4f: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"] 50: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"] 51:T5094,'use client'; import { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { animate, motion, motionValue, useReducedMotion } from 'motion/react'; const DEFAULT_IMAGES = [ 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format', 'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format', 'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format', 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' ]; const ORIGINS = { fan: [0.9, 0.9], cascade: [0.5, 0.5], deck: [0.5, 0], pile: [0.5, 0.5] }; const EXITS = { fan: [1, -0.3], cascade: [0.8, 0.6], deck: [0, 1] }; const SHADOW = '0 14px 34px -10px rgba(0, 0, 0, 0.45), 0 3px 8px -2px rgba(0, 0, 0, 0.18)'; const CLICK_SLOP = 6; const FLICK_SPEED = 650; const LEAN_SPEED = 1300; const LEAN_REACH = 260; const PRESS_SCALE = 1.035; const SPRINGS = { place: [260, 24], settle: [320, 34], tuck: [240, 28], face: [240, 30], lean: [240, 28], press: [420, 34], fling: [650, 42] }; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const mix = (a, b, t) => a + (b - a) * t; const noise = seed => { const value = Math.sin(seed * 127.1 + 311.7) * 43758.5453; return value - Math.floor(value); }; const placement = (layout, position, card, spread, depth) => { if (layout === 'cascade') { return { x: -position * spread * 28, y: -position * spread * 28, rotate: 0, scale: 1 - position * depth * 0.07 }; } if (layout === 'deck') { return { x: 0, y: -position * spread * 32, rotate: 0, scale: 1 - position * depth * 0.1 }; } if (layout === 'pile') { return { x: (noise(card + 1) - 0.5) * spread * 56, y: (noise(card + 2) - 0.5) * spread * 44, rotate: (noise(card + 3) - 0.5) * spread * 40, scale: 1 - position * depth * 0.03 }; } return { x: 0, y: 0, rotate: position * spread * 8, scale: 1 - position * depth * 0.12 }; }; const releaseVelocity = (samples, time) => { const recent = samples.filter(sample => time - sample[2] <= 100); if (recent.length < 2) return [0, 0]; const first = recent[0]; const last = recent[recent.length - 1]; const elapsed = Math.max((last[2] - first[2]) / 1000, 0.008); return [(last[0] - first[0]) / elapsed, (last[1] - first[1]) / elapsed]; }; export default function Stack({ cards, layout = 'fan', visible = 4, spread = 0.5, depth = 0.5, radius = 16, frame = 0, frameColor = '#ffffff', shadow = true, tilt = 30, threshold = 90, speed = 1, sendToBackOnClick = false, autoplay = false, autoplayDelay = 3000, pauseOnHover = false, onChange, className = '', style }) { const items = cards && cards.length ? cards : DEFAULT_IMAGES.map((src, index) => {`Card

); const count = items.length; const shape = ORIGINS[layout] ? layout : 'fan'; const reduceMotion = useReducedMotion(); const rootRef = useRef(null); const [order, setOrder] = useState(() => Array.from({ length: count }, (_, index) => index)); const [dragging, setDragging] = useState(false); const [hovered, setHovered] = useState(false); const orderRef = useRef(order); const valuesRef = useRef(new Map()); const elementsRef = useRef(new Map()); const flyingRef = useRef(new Map()); const dragRef = useRef(null); const aliveRef = useRef(true); const mountedRef = useRef(false); const settingsRef = useRef(null); const actionsRef = useRef(null); const listenersRef = useRef(null); const onChangeRef = useRef(onChange); onChangeRef.current = onChange; if (order.length !== count || order.some(index => index >= count)) { const next = order.filter(index => index < count); for (let index = 0; index < count; index++) if (!next.includes(index)) next.push(index); orderRef.current = next; setOrder(next); } settingsRef.current = { layout: shape, visible: clamp(Math.round(visible), 1, Math.max(count, 1)), spread: clamp(spread, 0, 2), depth: clamp(depth, 0, 1), tilt: clamp(tilt, 0, 89), threshold: Math.max(threshold, 0), speed: clamp(speed, 0.2, 4), sendToBackOnClick, count, reduceMotion: !!reduceMotion }; const valuesFor = index => { let values = valuesRef.current.get(index); if (!values) { const s = settingsRef.current; const position = Math.max(0, orderRef.current.indexOf(index)); const start = placement( s.layout, s.reduceMotion ? Math.min(position, s.visible - 1) : 0, index, s.spread, s.depth ); values = { x: motionValue(start.x), y: motionValue(start.y), rotate: motionValue(start.rotate), scale: motionValue(start.scale), tiltX: motionValue(0), tiltY: motionValue(0), spin: motionValue(0), lift: motionValue(1), grabX: motionValue(0.5), grabY: motionValue(0.5), z: motionValue(s.count - position), opacity: motionValue(position < s.visible ? 1 : 0), shade: motionValue(0) }; valuesRef.current.set(index, values); } return values; }; const springFor = (s, kind, extra = {}) => { if (s.reduceMotion) return { duration: 0.2, ease: 'easeOut', delay: extra.delay || 0 }; const [stiffness, damping] = SPRINGS[kind]; return { type: 'spring', stiffness: stiffness * s.speed * s.speed, damping: damping * s.speed, restDelta: 0.01, restSpeed: 0.5, ...extra }; }; const settleFace = (values, s, delay = 0) => { const transition = springFor(s, 'face', { delay }); animate(values.tiltX, 0, transition); animate(values.tiltY, 0, transition); animate(values.spin, 0, transition); animate(values.lift, 1, transition); }; const placeCard = (index, position, { delay = 0, lift = 0, kind = 'place', velocity = null, keepZ = false } = {}) => { const s = settingsRef.current; const values = valuesFor(index); const shown = Math.min(position, s.visible - 1); const target = placement(s.layout, shown, index, s.spread, s.depth); if (lift > 0 && shown > 0) { const ahead = placement(s.layout, shown - 1, index, s.spread, s.depth); target.x = mix(target.x, ahead.x, lift); target.y = mix(target.y, ahead.y, lift); target.rotate = mix(target.rotate, ahead.rotate, lift); target.scale = mix(target.scale, ahead.scale, lift); } const motionSpring = springFor(s, kind, { delay }); const fade = { duration: s.reduceMotion ? 0.2 : 0.35 / s.speed, ease: 'easeOut', delay }; if (!keepZ) values.z.set(s.count - position); animate(values.x, target.x, velocity ? { ...motionSpring, velocity: velocity[0] } : motionSpring); animate(values.y, target.y, velocity ? { ...motionSpring, velocity: velocity[1] } : motionSpring); animate(values.rotate, target.rotate, motionSpring); animate(values.scale, target.scale, motionSpring); settleFace(values, s, delay); animate(values.opacity, position < s.visible ? 1 : 0, fade); animate(values.shade, Math.min(0.6, shown * s.depth * 0.14 * (1 - lift)), fade); }; const placeAll = ({ stagger = 0, lift = 0, released = -1, velocity = null, kind = 'place' } = {}) => { const drag = dragRef.current; orderRef.current.forEach((index, position) => { const flight = flyingRef.current.get(index); if (flight && !flight.turned) return; if (drag && drag.moved && drag.card === index) return; const isReleased = index === released; placeCard(index, position, { delay: position * stagger, lift: position > 0 ? lift : 0, kind: flight ? 'tuck' : isReleased ? 'settle' : kind, velocity: isReleased ? velocity : null, keepZ: !!flight }); }); }; const commit = next => { orderRef.current = next; setOrder(next); }; const sendToBack = (direction, velocity = null) => { const s = settingsRef.current; const current = orderRef.current; if (current.length < 2) return; const top = current[0]; if (flyingRef.current.has(top)) return; const next = [...current.slice(1), top]; if (s.reduceMotion) { commit(next); return; } let [dx, dy] = direction || EXITS[s.layout] || [Math.cos(noise(top + 9) * 6.283), Math.sin(noise(top + 9) * 6.283)]; const length = Math.hypot(dx, dy) || 1; dx /= length; dy /= length; const bounds = rootRef.current?.getBoundingClientRect(); const width = bounds?.width || 240; const height = bounds?.height || 240; const clearance = Math.min(width / Math.max(Math.abs(dx), 0.01), height / Math.max(Math.abs(dy), 0.01)); const home = placement(s.layout, 0, top, s.spread, s.depth); const travel = clearance * 1.12 + 40; const out = [home.x + dx * travel, home.y + dy * travel]; const values = valuesFor(top); const launch = springFor(s, 'fling'); const flight = { turned: false }; flyingRef.current.set(top, flight); values.z.set(s.count + 1); animate(values.x, out[0], velocity ? { ...launch, velocity: velocity[0] } : launch); animate(values.y, out[1], velocity ? { ...launch, velocity: velocity[1] } : launch); settleFace(values, s); commit(next); const span = Math.max(Math.hypot(out[0] - values.x.get(), out[1] - values.y.get()), 1); let landed = false; const turn = () => { flight.turned = true; const position = orderRef.current.indexOf(top); if (position >= 0) placeCard(top, position, { kind: 'tuck', keepZ: !landed }); }; const land = () => { landed = true; if (flyingRef.current.get(top) === flight) flyingRef.current.delete(top); const position = orderRef.current.indexOf(top); if (position >= 0) values.z.set(settingsRef.current.count - position); }; const fallback = setTimeout(() => { if (!flight.turned) turn(); if (!landed) land(); }, 1500 / s.speed); const clearOfPile = () => { const element = elementsRef.current.get(top); if (!element) return true; const mine = element.getBoundingClientRect(); for (const [index, other] of elementsRef.current) { if (index === top || flyingRef.current.has(index) || valuesFor(index).opacity.get() < 0.5) continue; const box = other.getBoundingClientRect(); if (mine.left < box.right && mine.right > box.left && mine.top < box.bottom && mine.bottom > box.top) { return false; } } return true; }; const watch = () => { if (!aliveRef.current || (flight.turned && landed)) { clearTimeout(fallback); return; } const x = values.x.get(); const y = values.y.get(); const outward = values.x.getVelocity() * dx + values.y.getVelocity() * dy; if (!flight.turned && (Math.hypot(out[0] - x, out[1] - y) <= span * 0.06 || outward < 0)) turn(); if (!landed && (clearOfPile() || (flight.turned && outward < 0))) land(); requestAnimationFrame(watch); }; requestAnimationFrame(watch); }; const lean = drag => { const s = settingsRef.current; if (s.reduceMotion) return; const values = valuesFor(drag.card); const offsetX = values.x.get() - drag.homeX; const offsetY = values.y.get() - drag.homeY; const sideways = clamp(drag.vx / LEAN_SPEED, -1, 1) * 0.7 + clamp(offsetX / LEAN_REACH, -1, 1) * 0.3; const upward = clamp(-drag.vy / LEAN_SPEED, -1, 1) * 0.7 + clamp(-offsetY / LEAN_REACH, -1, 1) * 0.3; const follow = springFor(s, 'lean'); animate(values.tiltY, sideways * s.tilt, follow); animate(values.tiltX, upward * s.tilt, follow); animate(values.spin, clamp(offsetX / LEAN_REACH, -1, 1) * 6, follow); }; const onMove = event => { const drag = dragRef.current; if (!drag || event.pointerId !== drag.id) return; const s = settingsRef.current; const dx = event.clientX - drag.startX; const dy = event.clientY - drag.startY; const values = valuesFor(drag.card); if (!drag.moved) { if (Math.hypot(dx, dy) < CLICK_SLOP) return; drag.moved = true; values.x.stop(); values.y.stop(); drag.originX = values.x.get() - dx; drag.originY = values.y.get() - dy; try { drag.element.setPointerCapture(drag.id); } catch { drag.capture = false; } setDragging(true); } values.x.set(drag.originX + dx); values.y.set(drag.originY + dy); drag.samples.push([event.clientX, event.clientY, event.timeStamp]); if (drag.samples.length > 12) drag.samples.shift(); [drag.vx, drag.vy] = releaseVelocity(drag.samples, event.timeStamp); lean(drag); clearTimeout(drag.idle); drag.idle = setTimeout(() => { if (dragRef.current !== drag) return; drag.vx = 0; drag.vy = 0; lean(drag); }, 70); const progress = clamp(Math.hypot(dx, dy) / Math.max(s.threshold, 1), 0, 1); if (Math.abs(progress - drag.progress) > 0.02) { drag.progress = progress; placeAll({ lift: progress * 0.4, kind: 'settle' }); } }; const onUp = event => { const drag = dragRef.current; if (!drag || event.pointerId !== drag.id) return; dragRef.current = null; clearTimeout(drag.idle); window.removeEventListener('pointermove', listenersRef.current.move); window.removeEventListener('pointerup', listenersRef.current.up); window.removeEventListener('pointercancel', listenersRef.current.up); try { drag.element.releasePointerCapture(drag.id); } catch { drag.capture = false; } const s = settingsRef.current; if (!drag.moved) { if (event.type === 'pointerup' && s.sendToBackOnClick) sendToBack(null); else settleFace(valuesFor(drag.card), s); return; } setDragging(false); const dx = event.clientX - drag.startX; const dy = event.clientY - drag.startY; const [vx, vy] = releaseVelocity(drag.samples, event.timeStamp); const distance = Math.hypot(dx, dy); const pace = Math.hypot(vx, vy); const flick = pace > FLICK_SPEED && distance > 16 && vx * dx + vy * dy > 0; if (event.type === 'pointerup' && s.count > 1 && (distance > s.threshold || flick)) { sendToBack(pace > 300 ? [vx, vy] : [dx, dy], [vx, vy]); } else { placeAll({ released: drag.card, velocity: [clamp(vx, -3000, 3000), clamp(vy, -3000, 3000)] }); } }; const onDown = (event, index) => { if (event.button !== 0 || dragRef.current) return; if (orderRef.current[0] !== index || flyingRef.current.has(index)) return; const s = settingsRef.current; const values = valuesFor(index); const home = placement(s.layout, 0, index, s.spread, s.depth); const bounds = event.currentTarget.getBoundingClientRect(); values.grabX.set(clamp((event.clientX - bounds.left) / Math.max(bounds.width, 1), 0, 1)); values.grabY.set(clamp((event.clientY - bounds.top) / Math.max(bounds.height, 1), 0, 1)); if (!s.reduceMotion) animate(values.lift, PRESS_SCALE, springFor(s, 'press')); dragRef.current = { card: index, id: event.pointerId, element: event.currentTarget, startX: event.clientX, startY: event.clientY, originX: 0, originY: 0, homeX: home.x, homeY: home.y, vx: 0, vy: 0, idle: 0, moved: false, progress: 0, samples: [[event.clientX, event.clientY, event.timeStamp]] }; if (event.pointerType === 'mouse') event.preventDefault(); window.addEventListener('pointermove', listenersRef.current.move); window.addEventListener('pointerup', listenersRef.current.up); window.addEventListener('pointercancel', listenersRef.current.up); }; const onKeyDown = event => { if (event.target !== event.currentTarget) return; if (['ArrowRight', 'ArrowDown', 'Enter', ' '].includes(event.key)) { event.preventDefault(); sendToBack(null); } }; actionsRef.current = { placeAll, sendToBack, onMove, onUp }; if (!listenersRef.current) { listenersRef.current = { move: event => actionsRef.current.onMove(event), up: event => actionsRef.current.onUp(event) }; } useIsomorphicLayoutEffect(() => { orderRef.current = order; actionsRef.current.placeAll({ stagger: mountedRef.current ? 0 : 0.06 }); mountedRef.current = true; }, [order, shape, visible, spread, depth, speed, count]); const top = order[0]; const changedRef = useRef(false); useEffect(() => { if (!changedRef.current) { changedRef.current = true; return; } if (top !== undefined) onChangeRef.current?.(top); }, [top]); useEffect(() => { if (!autoplay || count < 2 || dragging || (pauseOnHover && hovered)) return undefined; const timer = setTimeout(() => actionsRef.current.sendToBack(null), Math.max(300, autoplayDelay)); return () => clearTimeout(timer); }, [autoplay, autoplayDelay, pauseOnHover, hovered, dragging, order, count]); useEffect(() => { aliveRef.current = true; const values = valuesRef.current; const listeners = listenersRef.current; return () => { aliveRef.current = false; if (dragRef.current) clearTimeout(dragRef.current.idle); window.removeEventListener('pointermove', listeners.move); window.removeEventListener('pointerup', listeners.up); window.removeEventListener('pointercancel', listeners.up); values.forEach(group => Object.values(group).forEach(value => value.stop())); }; }, []); const [originX, originY] = ORIGINS[shape]; const innerRadius = Math.max(0, radius - frame); return (

setHovered(true)} onMouseLeave={() => setHovered(false)} > {items.map((card, index) => { const values = valuesFor(index); const isTop = order[0] === index; return ( { if (element) elementsRef.current.set(index, element); else elementsRef.current.delete(index); }} className="absolute inset-0 will-change-transform select-none [-webkit-tap-highlight-color:transparent]" data-top={isTop ? '' : undefined} aria-hidden={isTop ? undefined : true} style={{ x: values.x, y: values.y, rotate: values.rotate, scale: values.scale, zIndex: values.z, opacity: values.opacity, originX, originY, cursor: isTop ? (dragging ? 'grabbing' : 'grab') : 'default', touchAction: isTop ? 'pan-y' : 'auto' }} onPointerDown={event => onDown(event, index)} > 0 ? frameColor : 'transparent', boxShadow: shadow ? SHADOW : 'none' }} >

{card}

); })}

); } 4e:["$","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@^12.23.12",{"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@^12.23.12"}]]}]}]]}],["$","$L4f",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"Stack/Stack.jsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]