4e: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"] 4f: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"] 50:T232c,// Hairline UI · card-deck · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { ArrowLeft, ArrowRight } from 'lucide-react'; import { EASE_OUT, EASE_SETTLE, INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion'; import { useCardDeckGesture, type DeckThrow } from './use-card-deck-gesture'; import { NumberRoll } from './number-roll'; export interface CardDeckProps extends Omit, 'children' | 'onChange'> { items: T[]; renderCard: (item: T, state: { active: boolean; index: number }) => React.ReactNode; getLabel?: (item: T) => string; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; label?: string; /** Fixed card height keeps the stack stable while content changes. */ height?: number; } function DepartingCard({ motion, reduced, children }: { motion: DeckThrow; reduced: boolean; children: React.ReactNode }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el || reduced) return; const end = -motion.direction * el.offsetWidth * 1.4; const animation = el.animate([ { transform: `translateX(${motion.from}px) rotate(${motion.from / 24}deg)`, opacity: 1 }, { transform: `translateX(${end}px) rotate(${-motion.direction * 18}deg)`, opacity: 0 }, ], { duration: Math.abs(motion.velocity) > 1.5 ? 300 : 420, easing: EASE_OUT, fill: 'forwards' }); return () => animation.cancel(); }, [motion, reduced]); return ; } /** Where a card behind the front one sits: lower and smaller by depth, rising as the front card leaves. */ const stackTransform = (depth: number, progress: number, fanned: boolean) => `translateY(${depth * (fanned ? 17 : 12) - progress * 12}px) scale(${1 - depth * 0.055 + progress * 0.055}) rotate(${fanned ? (depth % 2 ? -1 : 1) * depth * 1.3 : 0}deg)`; /** * A tactile stack. Gestures write transforms straight onto the cards, and every card has its own compositor layer, * so a drag moves pictures instead of repainting them. React changes only when a card is chosen. */ export function CardDeck({ items, renderCard, getLabel = (item) => item.id, value, defaultValue, onValueChange, label = 'Card collection', height = 340, className = '', ...props }: CardDeckProps) { const reduced = useInteractionReducedMotion(); const [own, setOwn] = React.useState(defaultValue ?? items[0]?.id); const selected = value ?? own; const index = Math.max(0, items.findIndex((item) => item.id === selected)); const current = items[index]; const [leaving, setLeaving] = React.useState(null); const busy = React.useRef(false); const [fanned, setFanned] = React.useState(false); const restoreCardFocus = React.useRef(false); const choose = (direction: number, from?: number, velocity = 0) => { if (items.length < 2 || !current || busy.current) return false; const next = items[(index + direction + items.length) % items.length]; restoreCardFocus.current = Boolean(document.activeElement?.hasAttribute('data-deck-active')); busy.current = !reduced; const transform = frontRef.current ? getComputedStyle(frontRef.current).transform : 'none'; const origin = from ?? (transform === 'none' ? 0 : new DOMMatrixReadOnly(transform).m41); if (!reduced) setLeaving({ id: current.id, direction, from: origin, velocity }); if (value === undefined) setOwn(next.id); onValueChange?.(next.id); return true; }; const backs = React.useRef(new Map()); const fannedRef = React.useRef(false); const onProgress = (progress: number, settle: boolean) => { if (reduced) return; backs.current.forEach((el, depth) => { el.style.transition = settle ? `transform 520ms ${EASE_SETTLE}` : 'none'; el.style.transform = stackTransform(depth, progress, fannedRef.current); }); }; const { rootRef, frontRef, dragging, handlers } = useCardDeckGesture({ id: current?.id, count: items.length, reduced, onThrow: choose, onProgress }); React.useLayoutEffect(() => { if (restoreCardFocus.current) { frontRef.current?.focus({ preventScroll: true }); restoreCardFocus.current = false; } }, [current?.id, frontRef]); React.useLayoutEffect(() => { if (leaving?.id === current?.id) { // A controlled parent may reject a selection. Keep the original card available. if (frontRef.current) frontRef.current.style.transform = ''; setLeaving(null); busy.current = false; } }, [leaving, current?.id, frontRef]); React.useEffect(() => { const timer = window.setTimeout(() => { setLeaving(null); busy.current = false; }, reduced ? 0 : 430); return () => window.clearTimeout(timer); }, [selected, leaving, reduced]); const ordered = current ? Array.from({ length: Math.min(4, items.length) }, (_, depth) => ({ item: items[(index + depth) % items.length], depth })) : []; const departing = leaving && items.find((item) => item.id === leaving.id); const expanded = fanned && !reduced; fannedRef.current = expanded; return (

setFanned(true)} onPointerLeave={() => setFanned(false)}> {ordered.slice().reverse().map(({ item, depth }) => { const active = depth === 0; return (

{ if (el) backs.current.set(depth, el); }} tabIndex={active ? 0 : -1} role="group" aria-roledescription="card" aria-label={active ? `${getLabel(item)}, ${index + 1} of ${items.length}. Use Left and Right to browse.` : undefined} aria-hidden={!active || undefined} inert={!active} data-deck-active={active || undefined} onKeyDown={active ? (event) => { if (event.target !== event.currentTarget) return; if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') { event.preventDefault(); choose(event.key === 'ArrowRight' ? 1 : -1); } } : undefined} onFocus={active ? () => setFanned(true) : undefined} onBlur={active ? (event) => { if (!event.currentTarget.contains(event.relatedTarget as Node)) setFanned(false); } : undefined} {...(active ? handlers : {})} className={`absolute inset-0 overflow-hidden rounded-[22px] border border-border bg-card text-card-foreground ${active ? `${dragging ? 'cursor-grabbing' : 'cursor-grab'} ${INTERACTION_FOCUS}` : 'pointer-events-none'}`} style={{ zIndex: 10 - depth, touchAction: active ? 'pan-y' : undefined, willChange: reduced ? undefined : 'transform', transform: active ? undefined : stackTransform(depth, 0, expanded), transformOrigin: '50% 100%', transition: reduced || dragging ? 'none' : `transform 520ms ${EASE_SETTLE}`, }}> {renderCard(item, { active, index: items.indexOf(item) })}

); })} {leaving && departing && {renderCard(departing, { active: false, index: items.indexOf(departing) })}}

{current &&

}

); } 51:T1248,// Hairline UI · card-deck · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { releaseVelocity, samplePointer, springFrames, type PointerSample } from './ui-interaction-motion'; export type DeckThrow = { id: string; direction: number; from: number; velocity: number }; export function useCardDeckGesture({ id, count, reduced, onThrow, onProgress }: { id: string | undefined; count: number; reduced: boolean; onThrow: (direction: number, from: number, velocity: number) => boolean; /** How far the front card has travelled toward a throw, 0–1; the stack behind rises with it. */ onProgress: (progress: number, settle: boolean) => void; }) { const rootRef = React.useRef(null); const frontRef = React.useRef(null); const animation = React.useRef(null); const drag = React.useRef<{ pointer: number; startX: number; startY: number; base: number; x: number; width: number; horizontal: boolean; samples: PointerSample[] } | null>(null); const [dragging, setDragging] = React.useState(false); React.useEffect(() => () => { animation.current?.cancel(); }, []); React.useLayoutEffect(() => { drag.current = null; setDragging(false); animation.current?.cancel(); if (frontRef.current) frontRef.current.style.transform = ''; // eslint-disable-next-line react-hooks/exhaustive-deps }, [id, reduced]); const settle = (from: number, velocity: number) => { const front = frontRef.current; if (!front) return; front.style.transform = ''; if (reduced) return; animation.current?.cancel(); animation.current = front.animate(springFrames(from, 0, velocity).map(({ value, offset }) => ({ transform: `translateX(${value}px) rotate(${value / 24}deg)`, offset, })), { duration: 520, easing: 'linear' }); }; const finish = (event: React.PointerEvent, cancelled: boolean) => { const state = drag.current; if (!state || state.pointer !== event.pointerId) return; drag.current = null; setDragging(false); onProgress(0, true); const velocity = releaseVelocity(state.samples, event.timeStamp); const crossed = Math.abs(state.x) > Math.min(100, state.width * 0.27); const flicked = Math.abs(state.x) > 16 && Math.abs(velocity) > 0.55 && Math.sign(velocity) === Math.sign(state.x); if (!cancelled && state.horizontal && (crossed || flicked)) { if (!onThrow(state.x < 0 ? 1 : -1, state.x, velocity)) settle(state.x, velocity); } else settle(state.x, cancelled ? 0 : velocity); }; return { rootRef, frontRef, dragging, handlers: { onPointerDown(event: React.PointerEvent) { if (count < 2 || event.button !== 0 || !event.isPrimary || (event.target as HTMLElement).closest('a,button,input,textarea,select,[data-deck-no-drag]')) return; const transform = getComputedStyle(event.currentTarget).transform; const base = transform === 'none' ? 0 : new DOMMatrixReadOnly(transform).m41; animation.current?.cancel(); if (!reduced) event.currentTarget.style.transform = `translateX(${base}px) rotate(${base / 24}deg)`; event.currentTarget.setPointerCapture(event.pointerId); drag.current = { pointer: event.pointerId, startX: event.clientX, startY: event.clientY, base, x: base, width: event.currentTarget.clientWidth, horizontal: false, samples: [{ x: event.clientX, time: event.timeStamp }] }; }, onPointerMove(event: React.PointerEvent) { const state = drag.current; if (!state || state.pointer !== event.pointerId) return; const dx = event.clientX - state.startX, dy = event.clientY - state.startY; if (!state.horizontal) { if (Math.abs(dy) > 8 && Math.abs(dy) > Math.abs(dx)) { drag.current = null; settle(state.base, 0); onProgress(0, true); return; } if (Math.abs(dx) < 6) return; state.horizontal = true; setDragging(true); } state.x = state.base + dx; samplePointer(state.samples, event.clientX, event.timeStamp); if (!reduced) { event.currentTarget.style.transform = `translateX(${state.x}px) rotate(${Math.max(-16, Math.min(16, state.x / 24))}deg)`; onProgress(Math.min(1, Math.abs(state.x) / (state.width * 0.65)), false); } }, onPointerUp: (event: React.PointerEvent) => finish(event, false), onPointerCancel: (event: React.PointerEvent) => finish(event, true), onLostPointerCapture: (event: React.PointerEvent) => finish(event, true), }, }; } 52:Tc67,// Hairline UI · card-deck · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; export const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)'; export const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)'; export const INTERACTION_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'; const query = '(prefers-reduced-motion: reduce)'; const subscribe = (notify: () => void) => { const media = window.matchMedia(query); media.addEventListener('change', notify); return () => media.removeEventListener('change', notify); }; export const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false); export function useInteractionActivity() { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(el); const visibility = () => setHidden(document.hidden); visibility(); document.addEventListener('visibilitychange', visibility); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); }; }, []); return { ref, active: visible && !hidden }; } export function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties { return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` }; } /** Sample recent movement rather than averaging a long drag and losing its release velocity. */ export type PointerSample = { x: number; time: number }; export function samplePointer(samples: PointerSample[], x: number, time: number) { samples.push({ x, time }); while (samples.length > 2 && time - samples[0].time > 100) samples.shift(); } export function releaseVelocity(samples: PointerSample[], now: number) { if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0; const first = samples[0], last = samples[samples.length - 1]; return (last.x - first.x) / Math.max(1, last.time - first.time); } /** A damped spring sampled by WAAPI: no React renders or perpetual frame loop. */ export function springFrames(from: number, to: number, velocity = 0, duration = 520) { const omega = 20, damping = 0.82, damped = omega * Math.sqrt(1 - damping * damping); const displacement = from - to; const coefficient = (velocity * 1000 + damping * omega * displacement) / damped; return Array.from({ length: 33 }, (_, i) => { const t = (i / 32) * duration / 1000; const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t)); return { value: i === 32 ? to : value, offset: i / 32 }; }); } 4d:["$","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","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/card-deck.tsx","content":"$50","type":"registry:component"},{"path":"registry/use-card-deck-gesture.ts","content":"$51","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]