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:T3d83,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const DISCLOSE = { type: "spring", stiffness: 150, damping: 27, mass: 1 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const LEAVE = [0.4, 0, 1, 1] as const; export type SwipeChoice = "left" | "right"; export type SwipeIntent = { dir: -1 | 0 | 1; step: number }; export type SwipeDeckFlow = { dir: -1 | 1; kind: "decide" | "undo" }; const BLANK: SwipeIntent = { dir: 0, step: 0 }; const spent = (out: boolean) => (out ? "opacity-0" : ""); export type UseSwipeDeckOptions = { count: number; threshold?: number; steps?: number; flick?: number; onDecide?: (index: number, choice: SwipeChoice) => void; onUndo?: (index: number) => void; disabled?: boolean; }; export function useSwipeDeck({ count, threshold = 92, steps = 6, flick = 520, onDecide, onUndo, disabled = false, }: UseSwipeDeckOptions) { const total = Math.max(0, Math.floor(count)); const grain = Math.max(1, Math.floor(steps)); const reach = Math.max(1, threshold); const [decisions, setDecisions] = useState([]); const [flow, setFlow] = useState({ dir: 1, kind: "decide" }); const [intent, setIntent] = useState(BLANK); const index = Math.min(decisions.length, total); const len = useRef(decisions.length); len.current = decisions.length; const size = useRef(total); size.current = total; const made = useRef(decisions); made.current = decisions; const decided = useRef(onDecide); decided.current = onDecide; const reverted = useRef(onUndo); reverted.current = onUndo; const clear = useCallback(() => { setIntent((prev) => (prev.step === 0 && prev.dir === 0 ? prev : BLANK)); }, []); const decide = useCallback( (choice: SwipeChoice) => { if (disabled) return; const at = len.current; if (at >= size.current) return; len.current = at + 1; setDecisions((prev) => [...prev, choice]); setFlow({ dir: choice === "right" ? 1 : -1, kind: "decide" }); setIntent(BLANK); decided.current?.(at, choice); }, [disabled], ); const undo = useCallback(() => { if (disabled) return; const at = len.current; if (at === 0) return; const last = made.current[at - 1]; len.current = at - 1; setDecisions((prev) => prev.slice(0, prev.length - 1)); setFlow({ dir: last === "right" ? 1 : -1, kind: "undo" }); setIntent(BLANK); reverted.current?.(at - 1); }, [disabled]); const report = useCallback( (dx: number) => { const step = Math.min(grain, Math.round((Math.abs(dx) / reach) * grain)); const dir: -1 | 0 | 1 = step === 0 ? 0 : dx > 0 ? 1 : -1; setIntent((prev) => prev.dir === dir && prev.step === step ? prev : { dir, step }, ); }, [grain, reach], ); const release = useCallback( (dx: number, vx: number) => { const far = Math.abs(dx) >= reach; const fast = Math.abs(vx) >= flick && Math.abs(dx) >= reach * 0.35; if (!far && !fast) { clear(); return; } decide((far ? dx : vx) > 0 ? "right" : "left"); }, [reach, flick, clear, decide], ); const onKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.target !== event.currentTarget) return; if (event.key === "ArrowLeft") { event.preventDefault(); decide("left"); } else if (event.key === "ArrowRight") { event.preventDefault(); decide("right"); } else if (event.key === "Backspace" || event.key === "Delete") { event.preventDefault(); undo(); } else if (event.key === "Escape") { clear(); } }, [decide, undo, clear], ); useEffect(() => { const bail = () => clear(); const hidden = () => document.hidden && clear(); window.addEventListener("blur", bail); document.addEventListener("visibilitychange", hidden); return () => { window.removeEventListener("blur", bail); document.removeEventListener("visibilitychange", hidden); }; }, [clear]); return { index, count: total, remaining: total - index, done: index >= total, decisions, flow, intent, steps: grain, threshold: reach, armed: intent.step >= grain, canUndo: decisions.length > 0, decide, undo, clear, report, release, deckProps: { role: "group" as const, "aria-roledescription": "card deck", tabIndex: 0, onKeyDown, }, }; } export type UseSwipeDeckResult = ReturnType; const ICON_LEFT = ( ); const ICON_RIGHT = ( ); const ICON_UNDO = ( ); type DeckCardProps = { depth: number; height: number; entryX: number; active: boolean; reduced: boolean; label: string; leftLabel: string; rightLabel: string; intent: SwipeIntent; steps: number; onMove: (dx: number) => void; onRelease: (dx: number, vx: number) => void; children: React.ReactNode; }; function DeckCard({ depth, height, entryX, active, reduced, label, leftLabel, rightLabel, intent, steps, onMove, onRelease, children, }: DeckCardProps) { const x = useMotionValue(entryX); const rotate = useTransform(x, [-200, 0, 200], [-8, 0, 8], { clamp: false }); const fade = useTransform(x, [-340, -150, 0, 150, 340], [0, 1, 1, 1, 0]); const skip = useRef(reduced); skip.current = reduced; useEffect(() => { if (x.get() === 0) return; const controls = animate(x, 0, skip.current ? { duration: 0 } : DISCLOSE); return () => controls.stop(); }, [x, entryX]); const commit = active ? 0 : depth === 1 ? intent.step / steps : 0; const y = depth * 10 - commit * 10; const scale = 1 - depth * 0.045 + commit * 0.045; const badge = (side: -1 | 1, text: string, place: string) => { const on = intent.dir === side; return ( = steps ? "border-[#4568FF] text-[#4568FF] dark:border-[#93B0FF] dark:text-[#93B0FF]" : "border-stone-300 text-stone-700 dark:border-white/20 dark:text-stone-200" } ${place}`} > {text} ); }; return ( ({ x: dir * 560, zIndex: 12, borderColor: "rgba(0,0,0,0)", transition: reduced ? { duration: 0 } : { x: { duration: 0.3, ease: LEAVE }, borderColor: { duration: 0.1, ease: "linear" }, }, }), }} initial={{ y, scale }} animate={{ y, scale }} exit="exit" transition={ reduced ? { duration: 0 } : active ? { ...CROSSFADE, delay: 0.1 } : CROSSFADE } drag={active ? "x" : false} dragDirectionLock dragMomentum={false} dragElastic={1} dragConstraints={{ left: 0, right: 0 }} dragTransition={{ bounceStiffness: 260, bounceDamping: 34 }} whileDrag={reduced ? undefined : { scale: 1.03 }} onDrag={(_event, info) => onMove(info.offset.x)} onDragEnd={(_event, info) => onRelease(info.offset.x, info.velocity.x)} style={{ x, rotate, opacity: fade, height, zIndex: 10 - depth, transformOrigin: "50% 100%", touchAction: "pan-y", }} className={`absolute inset-x-5 top-0 select-none overflow-hidden rounded-[14px] border border-stone-200 bg-white dark:border-white/[0.16] dark:bg-[#1D1D1A] ${ active ? "cursor-grab shadow-[0_1px_2px_rgba(28,25,23,0.06),0_16px_32px_-18px_rgba(28,25,23,0.55)] active:cursor-grabbing dark:shadow-[0_2px_16px_rgba(0,0,0,0.6)]" : "shadow-[0_1px_2px_rgba(28,25,23,0.05),0_6px_14px_-12px_rgba(28,25,23,0.4)] dark:shadow-[0_1px_6px_rgba(0,0,0,0.45)]" }`} > {children} {active ? badge(-1, leftLabel, "left-3") : null} {active ? badge(1, rightLabel, "right-3") : null} ); } export type SwipeDeckProps = { items: readonly T[]; itemKey: (item: T) => string; itemLabel: (item: T) => string; children: (item: T) => React.ReactNode; onDecide?: (item: T, choice: SwipeChoice) => void; onUndo?: (item: T) => void; label?: string; leftLabel?: string; rightLabel?: string; undoLabel?: string; emptyLabel?: string; height?: number; threshold?: number; steps?: number; peek?: number; className?: string; }; export function SwipeDeck({ items, itemKey, itemLabel, children, onDecide, onUndo, label = "Card deck", leftLabel = "Skip", rightLabel = "Keep", undoLabel = "Undo", emptyLabel = "Deck cleared", height = 180, threshold = 92, steps = 6, peek = 3, className = "", }: SwipeDeckProps) { const hintId = useId(); const reduced = useReducedMotion() === true; const deck = useSwipeDeck({ count: items.length, threshold, steps, onDecide: (at, choice) => { const item = items[at]; if (item !== undefined) onDecide?.(item, choice); }, onUndo: (at) => { const item = items[at]; if (item !== undefined) onUndo?.(item); }, }); const stack = items.slice(deck.index, deck.index + Math.max(1, peek)); const current = items[deck.index]; const control = "inline-flex h-8 items-center gap-1.5 rounded-[9px] border border-stone-200 bg-white px-2.5 text-[12px] font-medium text-stone-700 outline-none transition-[background-color,border-color,opacity] duration-150 hover:bg-stone-100 focus-visible:border-[#4568FF] dark:border-white/[0.16] dark:bg-[#1D1D1A] dark:text-stone-200 dark:hover:bg-white/10 dark:focus-visible:border-[#93B0FF]"; return (

{emptyLabel} {stack.map((item, depth) => ( {children(item)} ))}

{items.length} {deck.remaining} left

{deck.done || current === undefined ? emptyLabel : `${itemLabel(current)}. Card ${deck.index + 1} of ${items.length}.`}

Left and right arrow keys decide the top card. Backspace brings the last one back.

); } 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"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/swipe-deck.tsx","content":"$52","type":"registry:ui","target":"components/interior/swipe-deck.tsx"}],"className":"h-[70svh] min-h-80"}]]}]