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:T3ec6,'use client'; import * as React from 'react'; import { motion, AnimatePresence, HTMLMotionProps } from 'motion/react'; import { cn } from '@/lib/utils'; import { PanelLeftClose, PanelRightClose } from 'lucide-react'; interface SplitterProps extends Omit< React.HTMLAttributes, 'onResize' > { onResize?: (leftSize: number, rightSize: number) => void; allowFullCollapse?: boolean; minSize?: number; maxSize?: number; defaultSize?: number; snapThreshold?: number; smoothTransition?: boolean; } type SplitterPanelProps = React.HTMLAttributes; interface SplitterHandleProps { className?: string; withHandle?: boolean; onMouseDown?: (e: React.MouseEvent) => void; onTouchStart?: (e: React.TouchEvent) => void; isDragging?: boolean; isLeftCollapsed?: boolean; isRightCollapsed?: boolean; isLeftNearCollapse?: boolean; isRightNearCollapse?: boolean; } function Splitter({ className, children, onResize, style, allowFullCollapse = true, minSize = 0, maxSize = 100, defaultSize = 50, snapThreshold = 5, smoothTransition = true, ...props }: SplitterProps) { const [leftWidth, setLeftWidth] = React.useState(defaultSize); const [isDragging, setIsDragging] = React.useState(false); const [startPosition, setStartPosition] = React.useState(0); const [startWidth, setStartWidth] = React.useState(0); const containerRef = React.useRef(null); const animationFrameRef = React.useRef(undefined); React.useEffect(() => { if (containerRef.current) { const computedStyle = getComputedStyle(containerRef.current); const cssDefaultSize = parseFloat( computedStyle.getPropertyValue('--splitter-default-size'), ); const initialSize = !isNaN(cssDefaultSize) ? cssDefaultSize : defaultSize; setLeftWidth(initialSize); } }, [defaultSize]); const handleInteractionStart = React.useCallback( (clientX: number): void => { if (!containerRef.current) return; setIsDragging(true); setStartPosition(clientX); setStartWidth(leftWidth); document.body.style.userSelect = 'none'; document.body.style.webkitUserSelect = 'none'; document.body.style.touchAction = 'none'; document.body.style.cursor = 'col-resize'; containerRef.current.classList.add('splitter-active'); }, [leftWidth], ); const handleMouseDown = React.useCallback( (e: React.MouseEvent): void => { e.preventDefault(); e.stopPropagation(); handleInteractionStart(e.clientX); }, [handleInteractionStart], ); const handleTouchStart = React.useCallback( (e: React.TouchEvent): void => { e.preventDefault(); e.stopPropagation(); if (e.touches.length === 1) { handleInteractionStart(e.touches[0].clientX); } }, [handleInteractionStart], ); const handleMove = React.useCallback( (clientX: number): void => { if (!isDragging || !containerRef.current) return; if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); } animationFrameRef.current = requestAnimationFrame(() => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const deltaX = clientX - startPosition; const deltaPercent = (deltaX / rect.width) * 100; const newLeftWidth = startWidth + deltaPercent; const effectiveMinSize = allowFullCollapse ? 0 : minSize; const effectiveMaxSize = allowFullCollapse ? 100 : maxSize; let clampedWidth = Math.min( Math.max(newLeftWidth, effectiveMinSize), effectiveMaxSize, ); if (allowFullCollapse) { if (clampedWidth <= snapThreshold) { clampedWidth = 0; } else if (clampedWidth >= 100 - snapThreshold) { clampedWidth = 100; } } setLeftWidth(clampedWidth); onResize?.(clampedWidth, 100 - clampedWidth); }); }, [ isDragging, startPosition, startWidth, onResize, allowFullCollapse, minSize, maxSize, snapThreshold, ], ); const handleMouseMove = React.useCallback( (e: MouseEvent): void => { handleMove(e.clientX); }, [handleMove], ); const handleTouchMove = React.useCallback( (e: TouchEvent): void => { e.preventDefault(); if (e.touches.length === 1) { handleMove(e.touches[0].clientX); } }, [handleMove], ); const handleInteractionEnd = React.useCallback((): void => { setIsDragging(false); document.body.style.userSelect = ''; document.body.style.webkitUserSelect = ''; document.body.style.touchAction = ''; document.body.style.cursor = ''; if (containerRef.current) { containerRef.current.classList.remove('splitter-active'); } if (animationFrameRef.current !== undefined) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = undefined; } }, []); const handleMouseUp = React.useCallback( (e: MouseEvent): void => { handleInteractionEnd(); }, [handleInteractionEnd], ); const handleTouchEnd = React.useCallback( (e: TouchEvent): void => { handleInteractionEnd(); }, [handleInteractionEnd], ); React.useEffect(() => { if (isDragging) { const options = { passive: false, capture: true }; document.addEventListener('mousemove', handleMouseMove, options); document.addEventListener('mouseup', handleMouseUp, options); document.addEventListener('touchmove', handleTouchMove, options); document.addEventListener('touchend', handleTouchEnd, options); document.addEventListener('touchcancel', handleTouchEnd, options); document.addEventListener( 'selectstart', (e) => e.preventDefault(), options, ); window.addEventListener('blur', handleInteractionEnd); } return () => { document.removeEventListener('mousemove', handleMouseMove, { capture: true, }); document.removeEventListener('mouseup', handleMouseUp, { capture: true }); document.removeEventListener('touchmove', handleTouchMove, { capture: true, }); document.removeEventListener('touchend', handleTouchEnd, { capture: true, }); document.removeEventListener('touchcancel', handleTouchEnd, { capture: true, }); document.removeEventListener('selectstart', (e) => e.preventDefault(), { capture: true, }); window.removeEventListener('blur-sm', handleInteractionEnd); }; }, [ isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd, handleInteractionEnd, ]); React.useEffect(() => { return () => { if (animationFrameRef.current !== undefined) { cancelAnimationFrame(animationFrameRef.current); } }; }, []); const childrenArray = React.Children.toArray(children); const panels = childrenArray.filter( (child): child is React.ReactElement => React.isValidElement(child) && typeof child.type !== 'string', ); const leftPanel = panels[0]; const rightPanel = panels[1]; const handle = panels.find( (child) => React.isValidElement(child) && child.type === SplitterHandle, ); const isLeftCollapsed = leftWidth <= 0.1; const isRightCollapsed = leftWidth >= 99.9; const isLeftNearCollapse = leftWidth <= snapThreshold && leftWidth > 0.1; const isRightNearCollapse = leftWidth >= 100 - snapThreshold && leftWidth < 99.9; // collect derived flags into a stable object const handleProps = React.useMemo( () => ({ onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, isDragging, isLeftCollapsed, isRightCollapsed, isLeftNearCollapse, isRightNearCollapse, }), [ handleMouseDown, handleTouchStart, isDragging, isLeftCollapsed, isRightCollapsed, isLeftNearCollapse, isRightNearCollapse, ], ); return (

{leftPanel}

{handle ? ( React.cloneElement( handle as React.ReactElement, // eslint-disable-next-line react-hooks/refs handleProps, ) ) : ( )}

{rightPanel}

); } function SplitterPanel({ className, children, ...props }: SplitterPanelProps) { return (

{children}

); } function SplitterHandle({ className, withHandle = true, onMouseDown, onTouchStart, isDragging, isLeftCollapsed, isRightCollapsed, isLeftNearCollapse, isRightNearCollapse, }: SplitterHandleProps) { const motionProps: HTMLMotionProps<'div'> = { className: cn( 'relative flex items-center justify-center cursor-col-resize select-none z-20', 'bg-border/80 backdrop-blur-xs', 'hover:bg-accent/80 active:bg-accent', 'dark:bg-border/80 dark:hover:bg-accent/80 dark:active:bg-accent', isDragging && 'bg-accent dark:bg-accent shadow-lg scale-110', (isLeftCollapsed || isRightCollapsed) && 'bg-accent/90 dark:bg-accent/90 shadow-md', (isLeftNearCollapse || isRightNearCollapse) && 'bg-warning/60 dark:bg-warning/60', 'transition-all duration-200 ease-out', 'touch-manipulation', className, ), style: { width: isDragging ? '10px' : '8px', minWidth: '8px', cursor: 'col-resize', }, onMouseDown, onTouchStart, animate: { width: isDragging ? '10px' : '8px', boxShadow: isDragging ? '0 0 20px rgba(0,0,0,0.2), 0 0 40px rgba(59,130,246,0.3)' : '0 2px 8px rgba(0,0,0,0.1)', }, whileHover: { width: '10px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', }, transition: { duration: 0.15, ease: 'easeOut' }, }; return ( {withHandle && !isLeftCollapsed && !isRightCollapsed && (

{[...Array(3)].map((_, i) => ( ))}

)} {isLeftCollapsed && (

)} {isRightCollapsed && (

)} ); } function SplitterResizer({ className, ...props }: React.HTMLAttributes) { return (

); } const addGlobalStyles = (() => { let styleElement: HTMLStyleElement | null = null; return () => { if (typeof document !== 'undefined' && !styleElement) { styleElement = document.createElement('style'); styleElement.textContent = ` .splitter-active { user-select: none !important; -webkit-user-select: none !important; touch-action: none !important; } .splitter-active * { pointer-events: none !important; } .splitter-active [data-slot="splitter-handle"] { pointer-events: auto !important; } `; document.head.appendChild(styleElement); } }; })(); if (typeof document !== 'undefined') { addGlobalStyles(); } Splitter.displayName = 'Splitter'; SplitterPanel.displayName = 'SplitterPanel'; SplitterHandle.displayName = 'SplitterHandle'; SplitterResizer.displayName = 'SplitterResizer'; export { Splitter, SplitterPanel, SplitterHandle, SplitterResizer }; 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"}]]}]}],["$","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/splitter.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"}]]}]