51: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"] 52: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"] 53:Tf18,.animated-list { position: relative; width: min(100%, var(--al-width)); min-width: 0; max-width: 100%; box-sizing: border-box; border-radius: calc(var(--al-radius) + 12px); color: var(--al-ink); -webkit-tap-highlight-color: transparent; } .animated-list--framed { padding: 6px; background: var(--al-frame); box-shadow: var(--al-frame-shadow); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } .animated-list:has(> .animated-list__viewport:focus-visible) { outline: 2px solid var(--al-accent); outline-offset: 3px; } .animated-list__frame-rim { position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--al-frame-edge), inset 0 1px 0 var(--al-frame-highlight); pointer-events: none; } .animated-list__viewport { --al-fade-top: 0px; --al-fade-bottom: 0px; position: relative; box-sizing: border-box; padding: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: calc(var(--al-radius) + 6px); outline: none; scrollbar-width: thin; scrollbar-color: var(--al-thumb) transparent; } .animated-list__viewport::-webkit-scrollbar { width: 6px; } .animated-list__viewport::-webkit-scrollbar-track { background: transparent; } .animated-list__viewport::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--al-thumb); } .animated-list__viewport--bare { scrollbar-width: none; } .animated-list__viewport--bare::-webkit-scrollbar { display: none; } .animated-list__track { position: relative; display: flex; flex-direction: column; gap: var(--al-gap); } .animated-list__item { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px 10px 10px; box-sizing: border-box; border-radius: var(--al-radius); background: var(--al-tile); box-shadow: var(--al-tile-shadow); color: var(--al-ink); cursor: pointer; user-select: none; -webkit-user-select: none; } .animated-list[data-animated] .animated-list__item:not([data-state]) { opacity: 0; } @media (hover: hover) { .animated-list__item:hover { filter: var(--al-hover); } } .animated-list__item[data-selected]:not(:active) { filter: var(--al-active); } .animated-list__item:active { filter: var(--al-press); } .animated-list__lead { display: grid; place-items: center; flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: max(8px, calc(var(--al-radius) - 4px)); background: var(--al-well); color: var(--al-ink); } .animated-list__lead img { display: block; width: 100%; height: 100%; object-fit: cover; } .animated-list__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } .animated-list__title { overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; } .animated-list__description { overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--al-muted); text-overflow: ellipsis; white-space: nowrap; } .animated-list__meta { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--al-muted); } .animated-list__rim { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--al-tile-edge), inset 0 1px 0 var(--al-tile-highlight); pointer-events: none; } .animated-list__indicator { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .animated-list__ring { position: absolute; inset: 0; border-radius: var(--al-radius); background: var(--al-ring-fill); box-shadow: inset 0 0 0 1px var(--al-ring); } 54:T57fc,'use client'; import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'; import { HugeiconsIcon, type IconSvgElement } from '@hugeicons/react'; import { CodeIcon, FigmaIcon, File01Icon, FileZipIcon, Folder01Icon, Image01Icon, MusicNote01Icon, Note01Icon, Pdf01Icon, Presentation01Icon, Table01Icon, Video01Icon } from '@hugeicons/core-free-icons'; import './AnimatedList.css'; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; export interface AnimatedListEntry { id?: string | number; icon?: ReactNode; image?: string; title: ReactNode; description?: ReactNode; meta?: ReactNode; } export type AnimatedListItem = string | AnimatedListEntry; type Animation = 'pop' | 'slide' | 'fade'; type State = 'in' | 'above' | 'below'; interface AnimatedListProps { items?: AnimatedListItem[]; onItemSelect?: (item: AnimatedListItem, index: number) => void; renderItem?: (item: AnimatedListItem, index: number, isSelected: boolean) => ReactNode; initialSelectedIndex?: number; selectOnHover?: boolean; enableArrowNavigation?: boolean; loop?: boolean; animation?: Animation | 'none'; animateOnce?: boolean; stagger?: number; showGradients?: boolean; fadeSize?: number; displayScrollbar?: boolean; frame?: boolean; theme?: 'dark' | 'light'; accentColor?: string; radius?: number; gap?: number; width?: number | string; maxHeight?: number | string; className?: string; itemClassName?: string; style?: CSSProperties; } interface Engine { place: (snap: boolean) => void; syncRing: () => void; updateFades: () => void; sync: () => void; } const THEMES: Record<'dark' | 'light', Record> = { dark: { '--al-frame': 'rgba(38, 35, 46, 0.66)', '--al-frame-edge': 'rgba(255, 255, 255, 0.08)', '--al-frame-highlight': 'rgba(255, 255, 255, 0.07)', '--al-frame-shadow': '0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5)', '--al-tile': 'linear-gradient(180deg, #3a3644 0%, #27242f 100%)', '--al-tile-edge': 'rgba(255, 255, 255, 0.07)', '--al-tile-highlight': 'rgba(255, 255, 255, 0.12)', '--al-tile-shadow': '0 4px 10px -4px rgba(0, 0, 0, 0.7)', '--al-well': 'rgba(255, 255, 255, 0.08)', '--al-ink': '#f4f4f5', '--al-muted': 'rgba(244, 244, 245, 0.55)', '--al-thumb': 'rgba(255, 255, 255, 0.16)', '--al-ring': 'rgba(244, 244, 245, 0.3)', '--al-ring-fill': 'rgba(244, 244, 245, 0.05)', '--al-hover': 'brightness(1.12)', '--al-press': 'brightness(0.85)', '--al-active': 'brightness(1.16)' }, light: { '--al-frame': 'rgba(240, 240, 243, 0.8)', '--al-frame-edge': 'rgba(24, 24, 27, 0.07)', '--al-frame-highlight': 'rgba(255, 255, 255, 0.95)', '--al-frame-shadow': '0 22px 44px -22px rgba(24, 24, 27, 0.3), 0 6px 16px -10px rgba(24, 24, 27, 0.16)', '--al-tile': 'linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%)', '--al-tile-edge': 'rgba(24, 24, 27, 0.08)', '--al-tile-highlight': 'rgba(255, 255, 255, 1)', '--al-tile-shadow': '0 4px 10px -5px rgba(24, 24, 27, 0.25)', '--al-well': 'rgba(24, 24, 27, 0.05)', '--al-ink': '#27272a', '--al-muted': 'rgba(39, 39, 42, 0.55)', '--al-thumb': 'rgba(24, 24, 27, 0.16)', '--al-ring': 'rgba(24, 24, 27, 0.28)', '--al-ring-fill': 'transparent', '--al-hover': 'brightness(0.97)', '--al-press': 'brightness(0.92)', '--al-active': 'none' } }; const glyph = (icon: IconSvgElement) => ; const DEFAULT_ITEMS: AnimatedListEntry[] = [ { icon: glyph(Folder01Icon), title: 'Brand assets', description: '24 files', meta: '2m' }, { icon: glyph(Image01Icon), title: 'Launch hero.png', description: '2.4 MB', meta: '18m' }, { icon: glyph(Video01Icon), title: 'Product tour.mp4', description: '148 MB', meta: '1h' }, { icon: glyph(Note01Icon), title: 'Pricing notes', description: '1,240 words', meta: '3h' }, { icon: glyph(CodeIcon), title: 'landing-page.tsx', description: '12 KB', meta: '5h' }, { icon: glyph(FigmaIcon), title: 'Onboarding flow', description: '38 frames', meta: '8h' }, { icon: glyph(MusicNote01Icon), title: 'Ambient loop.wav', description: '9.1 MB', meta: '1d' }, { icon: glyph(Table01Icon), title: 'Q3 forecast', description: '4 sheets', meta: '1d' }, { icon: glyph(Pdf01Icon), title: 'Brand guidelines.pdf', description: '6.8 MB', meta: '2d' }, { icon: glyph(Presentation01Icon), title: 'Investor update', description: '22 slides', meta: '3d' }, { icon: glyph(FileZipIcon), title: 'Icon set.zip', description: '1.2 MB', meta: '4d' }, { icon: glyph(Image01Icon), title: 'Moodboard.jpg', description: '3.6 MB', meta: '5d' }, { icon: glyph(File01Icon), title: 'Release notes', description: 'Version 2.4', meta: '1w' }, { icon: glyph(Folder01Icon), title: 'Archive', description: '118 files', meta: '2w' }, { icon: glyph(Video01Icon), title: 'Teaser cut.mov', description: '86 MB', meta: '3w' } ]; const HIDDEN: Record> = { pop: { above: 'translate3d(0, -12px, 0) scale(0.8)', below: 'translate3d(0, 12px, 0) scale(0.8)' }, slide: { above: 'translate3d(0, -28px, 0) scale(0.98)', below: 'translate3d(0, 28px, 0) scale(0.98)' }, fade: { above: 'translate3d(0, -4px, 0)', below: 'translate3d(0, 4px, 0)' } }; const SPRING = 'linear(0, 0.0603, 0.2033, 0.3821, 0.5633, 0.7258, 0.8584, 0.9574, 1.0242, 1.0634, 1.0809, 1.0828, 1.0747, 1.0613, 1.046, 1.0313, 1.0186, 1.0085, 1.0012, 0.9965, 0.994, 0.9931, 0.9933, 0.9941, 0.9953, 0.9966, 0.9978, 0.9988, 1)'; const smootherstep = (t: number) => t * t * t * (t * (t * 6 - 15) + 10); const FADE_MASK = (() => { const steps = [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1]; const top = steps.map(t => `rgba(0, 0, 0, ${smootherstep(t).toFixed(3)}) calc(var(--al-fade-top) * ${t})`); const bottom = [...steps] .reverse() .map(t => `rgba(0, 0, 0, ${smootherstep(t).toFixed(3)}) calc(100% - var(--al-fade-bottom) * ${t})`); return `linear-gradient(to bottom, ${[...top, ...bottom].join(', ')})`; })(); const size = (value: number | string) => (typeof value === 'number' ? `${value}px` : value); const AnimatedList = ({ items = DEFAULT_ITEMS, onItemSelect, renderItem, initialSelectedIndex = -1, selectOnHover = true, enableArrowNavigation = true, loop = false, animation = 'pop', animateOnce = false, stagger = 0.05, showGradients = true, fadeSize = 56, displayScrollbar = true, frame = true, theme = 'dark', accentColor, radius = 14, gap = 8, width = 420, maxHeight = 440, className = '', itemClassName = '', style }: AnimatedListProps) => { const rootRef = useRef(null); const viewportRef = useRef(null); const trackRef = useRef(null); const indicatorRef = useRef(null); const ringRef = useRef(null); const itemRefs = useRef<(HTMLDivElement | null)[]>([]); const engineRef = useRef(null); const keyboardRef = useRef(false); const navigatingRef = useRef(false); const [selected, setSelected] = useState(initialSelectedIndex); const baseId = useId(); const settings = { items, onItemSelect, selected, selectOnHover, enableArrowNavigation, loop, animation, animateOnce, stagger, showGradients, fadeSize }; const settingsRef = useRef(settings); settingsRef.current = settings; useIsomorphicLayoutEffect(() => { const root = rootRef.current; const viewport = viewportRef.current; const track = trackRef.current; const indicator = indicatorRef.current; const ring = ringRef.current; if (!root || !viewport || !track || !indicator || !ring) return; const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const springEase = CSS.supports?.('transition-timing-function', 'linear(0, 1)') ? SPRING : 'cubic-bezier(0.34, 1.4, 0.64, 1)'; const transition = `transform 620ms ${springEase}, opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), filter 200ms ease`; const motion = { y: 0, h: 0, vy: 0, vh: 0, ty: 0, th: 0, ready: false }; const fades = { top: '', bottom: '' }; let boxes: (number[] | null)[] = []; let current: Animation | 'none' | null = null; let entered = false; let engaged = false; let pointer = [0, 0]; let raf = 0; let last = 0; const mode = (): Animation | 'none' => { const chosen = settingsRef.current.animation; if (chosen === 'none' || !HIDDEN[chosen]) return 'none'; return reduced ? 'fade' : chosen; }; const apply = (element: HTMLElement, state: State) => { element.dataset.state = state; const pose = current && current !== 'none' && state !== 'in' ? HIDDEN[current][state] : ''; element.style.transform = pose; element.style.opacity = pose ? '0' : ''; }; const syncRing = () => { const item = itemRefs.current[settingsRef.current.selected]; if (!item) return; const state = (item.dataset.state as State | undefined) || 'in'; if (state === ring.dataset.state) return; ring.style.transitionDelay = item.style.transitionDelay; apply(ring, state); }; const write = () => { indicator.style.transform = `translate3d(0, ${motion.y.toFixed(2)}px, 0)`; indicator.style.height = `${motion.h.toFixed(2)}px`; }; const frame = (now: number) => { raf = 0; const dt = Math.min(0.05, (now - last) / 1000 || 0); last = now; const omega = 30; const zeta = 0.78; const steps = Math.max(1, Math.ceil(dt / (1 / 240))); const h = dt / steps; for (let i = 0; i < steps; i++) { motion.vy += (omega * omega * (motion.ty - motion.y) - 2 * zeta * omega * motion.vy) * h; motion.vh += (omega * omega * (motion.th - motion.h) - 2 * zeta * omega * motion.vh) * h; motion.y += motion.vy * h; motion.h += motion.vh * h; } const moving = Math.abs(motion.ty - motion.y) > 0.05 || Math.abs(motion.th - motion.h) > 0.05 || Math.abs(motion.vy) + Math.abs(motion.vh) > 0.5; if (!moving) { motion.y = motion.ty; motion.h = motion.th; motion.vy = motion.vh = 0; } write(); if (moving) raf = requestAnimationFrame(frame); }; const place = (snap: boolean) => { const item = itemRefs.current[settingsRef.current.selected]; if (!item) { indicator.style.opacity = '0'; motion.ready = false; return; } indicator.style.opacity = '1'; motion.ty = item.offsetTop; motion.th = item.offsetHeight; if (snap || reduced || !motion.ready) { motion.y = motion.ty; motion.h = motion.th; motion.vy = motion.vh = 0; motion.ready = true; write(); return; } if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const updateFades = () => { const s = settingsRef.current; const span = Math.max(1, s.fadeSize); const { scrollTop, scrollHeight, clientHeight } = viewport; const top = s.showGradients ? Math.min(span, Math.max(0, scrollTop)) : 0; const bottom = s.showGradients ? Math.min(span, Math.max(0, scrollHeight - clientHeight - scrollTop)) : 0; const nextTop = `${top.toFixed(1)}px`; const nextBottom = `${bottom.toFixed(1)}px`; if (nextTop !== fades.top) { fades.top = nextTop; viewport.style.setProperty('--al-fade-top', nextTop); } if (nextBottom !== fades.bottom) { fades.bottom = nextBottom; viewport.style.setProperty('--al-fade-bottom', nextBottom); } }; const measure = () => { const offset = track.offsetTop; boxes = itemRefs.current.map(item => (item ? [offset + item.offsetTop, item.offsetHeight] : null)); }; const reveal = (entrance: boolean) => { if (!entered) return; const s = settingsRef.current; const top = viewport.scrollTop; const view = viewport.clientHeight; let order = 0; itemRefs.current.forEach((item, index) => { const box = boxes[index]; if (!item || !box) return; const start = box[0] - top; const overlap = Math.min(view, start + box[1]) - Math.max(0, start); const hidden = current !== 'none' && overlap < Math.min(box[1], view) * 0.5 && !(s.animateOnce && item.dataset.seen); const state = hidden ? (start + box[1] / 2 < view / 2 ? 'above' : 'below') : 'in'; if (state === item.dataset.state) return; const delay = entrance && !hidden ? (order++ * Math.max(0, s.stagger)).toFixed(3) : 0; item.style.transitionDelay = delay ? `${delay}s, ${delay}s, 0s` : ''; if (!hidden) item.dataset.seen = 'true'; apply(item, state); }); syncRing(); }; const sync = () => { const s = settingsRef.current; itemRefs.current.length = s.items.length; const items = itemRefs.current.filter((item): item is HTMLDivElement => Boolean(item)); const next = mode(); const changed = next !== current; const restyle = changed ? items : items.filter(item => !item.dataset.state); current = next; if (current === 'none') entered = true; if (restyle.length) { const elements = changed ? [...restyle, ring] : restyle; for (const element of elements) element.style.transition = 'none'; for (const item of restyle) apply(item, current === 'none' ? 'in' : (item.dataset.state as State | undefined) || 'below'); if (changed) apply(ring, (itemRefs.current[s.selected]?.dataset.state as State | undefined) || 'in'); void root.offsetHeight; for (const element of elements) element.style.transition = transition; } measure(); reveal(restyle.length > 0); }; sync(); const gate = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver( (entries, observer) => { if (!entries.some(entry => entry.isIntersecting)) return; observer.disconnect(); if (entered) return; entered = true; measure(); reveal(true); }, { rootMargin: '0px 0px -10% 0px' } ); if (!entered) { if (gate) gate.observe(root); else { entered = true; reveal(true); } } const resizeObserver = new ResizeObserver(() => { place(true); updateFades(); measure(); reveal(false); }); resizeObserver.observe(viewport); resizeObserver.observe(track); const onScroll = () => { updateFades(); reveal(false); }; const onKey = (event: KeyboardEvent) => { const s = settingsRef.current; if (!s.enableArrowNavigation || event.defaultPrevented) return; if (event.altKey || event.ctrlKey || event.metaKey) return; const active = document.activeElement; const focused = active === viewport; const idle = !active || active === document.body || active === document.documentElement; if (!focused && !(engaged && idle)) return; const count = s.items.length; if (!count) return; const index = s.selected; let next: number | null = null; if (event.key === 'ArrowDown') next = index < 0 ? 0 : index + 1; else if (event.key === 'ArrowUp') next = index < 0 ? count - 1 : index - 1; else if (event.key === 'Home') next = 0; else if (event.key === 'End') next = count - 1; else if ((event.key === 'Enter' || (focused && event.key === ' ')) && index >= 0 && index < count) { event.preventDefault(); s.onItemSelect?.(s.items[index], index); return; } if (next === null) return; event.preventDefault(); next = s.loop ? (next + count) % count : Math.min(count - 1, Math.max(0, next)); keyboardRef.current = true; navigatingRef.current = true; setSelected(next); }; const onPointerMove = (event: PointerEvent) => { const moved = event.clientX !== pointer[0] || event.clientY !== pointer[1]; pointer = [event.clientX, event.clientY]; if (!navigatingRef.current || !moved) return; navigatingRef.current = false; const item = event.target instanceof Element ? event.target.closest('[data-index]') : null; if (item && root.contains(item) && settingsRef.current.selectOnHover) setSelected(Number(item.dataset.index)); }; const onEnter = () => { engaged = true; }; const onLeave = () => { engaged = false; }; viewport.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('keydown', onKey); root.addEventListener('pointerenter', onEnter); root.addEventListener('pointerleave', onLeave); root.addEventListener('pointermove', onPointerMove); updateFades(); place(true); syncRing(); engineRef.current = { place, syncRing, updateFades, sync }; return () => { cancelAnimationFrame(raf); gate?.disconnect(); resizeObserver.disconnect(); viewport.removeEventListener('scroll', onScroll); window.removeEventListener('keydown', onKey); root.removeEventListener('pointerenter', onEnter); root.removeEventListener('pointerleave', onLeave); root.removeEventListener('pointermove', onPointerMove); engineRef.current = null; }; }, []); useIsomorphicLayoutEffect(() => { engineRef.current?.sync(); }, [items, animation]); useEffect(() => { const engine = engineRef.current; if (!engine) return; engine.place(false); engine.syncRing(); if (!keyboardRef.current) return; keyboardRef.current = false; const viewport = viewportRef.current; const track = trackRef.current; const item = itemRefs.current[selected]; if (!viewport || !track || !item) return; const top = track.offsetTop + item.offsetTop; const bottom = top + item.offsetHeight; const room = Math.max(0, (viewport.clientHeight - item.offsetHeight) / 2); const margin = Math.min(showGradients ? Math.max(12, fadeSize) : 12, room); if (top < viewport.scrollTop + margin) { viewport.scrollTo({ top: Math.max(0, top - margin), behavior: 'smooth' }); } else if (bottom > viewport.scrollTop + viewport.clientHeight - margin) { viewport.scrollTo({ top: bottom - viewport.clientHeight + margin, behavior: 'smooth' }); } }, [selected, fadeSize, showGradients]); useEffect(() => { engineRef.current?.updateFades(); }, [showGradients, fadeSize, maxHeight, gap]); const hover = (index: number) => { if (!navigatingRef.current) setSelected(index); }; const choose = (item: AnimatedListItem, index: number) => { setSelected(index); onItemSelect?.(item, index); }; return (

{frame &&

); }; export default AnimatedList; 50:["$","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","@hugeicons/react@^1.1.10",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react@^1.1.10"}]]}]}],["$","li","@hugeicons/core-free-icons@^4.3.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons@^4.3.3"}]]}]}]]}],["$","$L51",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"AnimatedList.css","content":"$53","type":"registry:file","target":"@components/AnimatedList.css"},{"path":"AnimatedList.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]