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:T83f7,"use client"; /** * @author: @dorianbaffier * @description: Throw Deck * @version: 2.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ChevronLeft, ChevronRight, X } from "lucide-react"; import { AnimatePresence, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode, type RefObject, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface DeckSpec { label: string; value: string; } export interface DeckCard { id: string; title: string; subtitle: string; /** Artwork shown edge to edge on the card. Inline SVG keeps it portable. */ art: ReactNode; description: string; specs: DeckSpec[]; price?: string; } export interface CardStackProps { cards?: DeckCard[]; /** The one accent color, used by the artwork and the primary action. */ accent?: string; /** Label of the primary action in the details view. */ actionLabel?: string; onAction?: (card: DeckCard) => void; /** Called with the new top card after the deck cycles. */ onChange?: (card: DeckCard) => void; className?: string; } // --------------------------------------------------------------------------- // Physics // --------------------------------------------------------------------------- // Resting pose of each slot. The top card sits straight; the ones beneath // keep a fixed tilt, like a pile squared up by hand. const TILTS = [0, -2, 1.5, -1]; const SLOT_Y = 9; const SLOT_SCALE = 0.035; const MAX_SLOT = TILTS.length - 1; // Dragging rotates the card up to this many degrees across its own width. const MAX_DRAG_ROTATION = 18; // A release throws the card when it is this fast (px/ms) or this far (share // of the card's width). Anything less springs home. const THROW_VELOCITY = 0.5; const THROW_DISTANCE = 0.35; // Taps that move less than this open the card instead of dragging it. const TAP_SLOP = 5; // Release velocity is measured over the last stretch of the gesture only. const VELOCITY_WINDOW = 90; // Springs as stiffness / damping (per second). Home is slightly underdamped // so a hard release visibly carries through; the flight is looser so a faster // flick travels further before it turns around. const HOME = { k: 420, c: 30 }; const FLIGHT = { k: 150, c: 15 }; const RETURN = { k: 240, c: 26 }; const TOP_Z = 1000; type Phase = "rest" | "drag" | "out" | "return"; interface Pose { x: number; y: number; r: number; s: number; } interface Body extends Pose { vx: number; vy: number; vr: number; vs: number; phase: Phase; /** Where a thrown card is headed before it turns around. */ out: Pose; /** Unit direction of the throw. */ dx: number; dy: number; /** Z-index override while in flight. */ z: number | null; /** Z-index to take at the top of the arc. */ apexZ: number | null; } interface Drag { pointerId: number; index: number; startX: number; startY: number; baseX: number; baseY: number; width: number; /** +1 when grabbed in the top half, −1 in the bottom half. */ lever: number; moved: boolean; samples: { t: number; x: number; y: number }[]; } function slotPose(depth: number): Pose { const d = Math.min(depth, MAX_SLOT); return { x: 0, y: d * SLOT_Y, r: TILTS[d] ?? 0, s: 1 - d * SLOT_SCALE }; } function lerpPose(a: Pose, b: Pose, t: number): Pose { return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t, r: a.r + (b.r - a.r) * t, s: a.s + (b.s - a.s) * t, }; } function poseTransform({ x, y, r, s }: Pose) { return `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) rotate(${r.toFixed(3)}deg) scale(${s.toFixed(4)})`; } function makeBody(depth: number): Body { const pose = slotPose(depth); return { ...pose, vx: 0, vy: 0, vr: 0, vs: 0, phase: "rest", out: pose, dx: 1, dy: 0, z: null, apexZ: null, }; } function springAxis( value: number, velocity: number, target: number, spring: { k: number; c: number }, dt: number ) { const accel = -spring.k * (value - target) - spring.c * velocity; const v = velocity + accel * dt; return [value + v * dt, v] as const; } function stepBody(body: Body, target: Pose, dt: number) { let spring = HOME; if (body.phase === "out") { spring = FLIGHT; } else if (body.phase === "return") { spring = RETURN; } // Sub-step so a stiff spring stays stable on a slow frame. const steps = Math.max(1, Math.ceil(dt * 240)); const h = dt / steps; for (let i = 0; i < steps; i++) { [body.x, body.vx] = springAxis(body.x, body.vx, target.x, spring, h); [body.y, body.vy] = springAxis(body.y, body.vy, target.y, spring, h); [body.r, body.vr] = springAxis(body.r, body.vr, target.r, spring, h); [body.s, body.vs] = springAxis(body.s, body.vs, target.s, spring, h); } } function isSettled(body: Body, target: Pose) { return ( Math.abs(body.x - target.x) < 0.1 && Math.abs(body.y - target.y) < 0.1 && Math.abs(body.r - target.r) < 0.02 && Math.abs(body.s - target.s) < 0.0005 && Math.abs(body.vx) + Math.abs(body.vy) < 2 && Math.abs(body.vr) < 1 && Math.abs(body.vs) < 0.01 ); } /** Distance along (ux, uy) at which a w×h card no longer covers the deck. */ function clearance(w: number, h: number, ux: number, uy: number) { const along = Math.min( ux === 0 ? Number.POSITIVE_INFINITY : w / Math.abs(ux), uy === 0 ? Number.POSITIVE_INFINITY : h / Math.abs(uy) ); return along + 24; } function releaseVelocity(samples: Drag["samples"]) { const last = samples.at(-1); const first = samples.find( (sample) => last && last.t - sample.t <= VELOCITY_WINDOW ); if (!(first && last) || last.t - first.t < 8) { return { vx: 0, vy: 0 }; } const dt = last.t - first.t; return { vx: (last.x - first.x) / dt, vy: (last.y - first.y) / dt }; } function cardState(phase: Phase) { if (phase === "drag") { return "drag"; } return phase === "rest" ? "rest" : "fly"; } // --------------------------------------------------------------------------- // Component // --------------------------------------------------------------------------- export default function CardStack({ cards = DEFAULT_CARDS, accent = "#f97316", actionLabel = "Add to cart", onAction, onChange, className, }: CardStackProps) { const count = cards.length; const [order, setOrder] = useState(() => cards.map((_, i) => i)); const [openId, setOpenId] = useState(null); const reduceMotion = useReducedMotion(); const orderRef = useRef(order); const bodies = useRef(cards.map((_, i) => makeBody(i))); const nodes = useRef<(HTMLButtonElement | null)[]>([]); const drag = useRef(null); // 0–1: how close the current drag is to a throw. The card beneath rises // to meet it. const progress = useRef(0); const raf = useRef(0); const last = useRef(0); const reduced = useRef(false); const suppressClick = useRef(false); const focusTop = useRef(false); const closeRef = useRef(null); const onChangeRef = useRef(onChange); onChangeRef.current = onChange; reduced.current = reduceMotion === true; const write = useCallback((index: number, depth: number) => { const node = nodes.current[index]; const body = bodies.current[index]; if (!(node && body)) { return; } node.style.transform = poseTransform(body); node.style.zIndex = String(body.z ?? orderRef.current.length - depth); const state = cardState(body.phase); if (node.dataset.state !== state) { node.dataset.state = state; } }, []); const targetFor = useCallback((body: Body, depth: number): Pose => { if (body.phase === "out") { return body.out; } const pose = slotPose(depth); if (depth > 0 && progress.current > 0) { return lerpPose(pose, slotPose(depth - 1), progress.current * 0.6); } return pose; }, []); const advance = useCallback( (index: number, depth: number, dt: number) => { const body = bodies.current[index]; if (!body) { return false; } if (body.phase === "drag") { write(index, depth); return true; } if (reduced.current && body.phase === "out") { body.phase = "rest"; body.z = null; } const target = targetFor(body, depth); if (reduced.current) { Object.assign(body, target, { vx: 0, vy: 0, vr: 0, vs: 0 }); } else { stepBody(body, target, dt); } // Top of the arc: the card stops travelling outward, swaps to its new // layer while it is clear of the deck, and heads home. if (body.phase === "out" && body.vx * body.dx + body.vy * body.dy <= 0) { body.phase = "return"; body.z = body.apexZ; } const settled = isSettled(body, target); if (settled && body.phase !== "out") { body.phase = "rest"; body.z = null; } write(index, depth); return !settled; }, [targetFor, write] ); const tick = useCallback( (now: number) => { const dt = Math.min((now - last.current) / 1000, 1 / 30); last.current = now; let active = false; orderRef.current.forEach((index, depth) => { if (advance(index, depth, dt)) { active = true; } }); raf.current = active ? requestAnimationFrame(tick) : 0; }, [advance] ); // The loop sleeps whenever every card has settled; anything that moves a // card wakes it. const kick = useCallback(() => { if (raf.current) { return; } last.current = performance.now(); raf.current = requestAnimationFrame(tick); }, [tick]); useEffect(() => () => cancelAnimationFrame(raf.current), []); const commitOrder = useCallback( (next: number[]) => { orderRef.current = next; setOrder(next); const top = cards[next[0] ?? 0]; if (top) { onChangeRef.current?.(top); } kick(); }, [cards, kick] ); // Send the top card flying along (vx, vy) px/ms; it comes back under the // pile. (fx, fy) is the direction to use when there is no real velocity. const throwTop = useCallback( (vx: number, vy: number, fx: number, fy: number) => { const current = orderRef.current; const index = current[0]; if (index === undefined || current.length < 2) { return; } const body = bodies.current[index]; const node = nodes.current[index]; if (!body) { return; } const speed = Math.hypot(vx, vy); const rawX = speed > 0.05 ? vx : fx; const rawY = speed > 0.05 ? vy : fy; const norm = Math.hypot(rawX, rawY) || 1; const ux = rawX / norm; const uy = rawY / norm; const w = node?.offsetWidth ?? 256; const h = node?.offsetHeight ?? 320; const distance = clearance(w, h, ux, uy) + Math.min(speed * 50, 90); // Keep some speed so a slow but far drag still leaves with intent. const launch = Math.max(speed, 0.9) * 1000; body.phase = "out"; body.dx = ux; body.dy = uy; body.out = { x: ux * distance, y: uy * distance, r: Math.max(-40, Math.min(40, body.r + ux * 26)), s: 1, }; body.vx = ux * launch; body.vy = uy * launch; body.vr += ux * launch * 0.05; body.z = TOP_Z; body.apexZ = null; commitOrder([...current.slice(1), index]); }, [commitOrder] ); // The bottom card slips out to the left, swaps on top at its apex and lands // as the new top card. const bringBack = useCallback(() => { const current = orderRef.current; const index = current.at(-1); if (index === undefined || current.length < 2) { return; } const body = bodies.current[index]; const node = nodes.current[index]; if (!body) { return; } const ux = -0.97; const uy = -0.24; const w = node?.offsetWidth ?? 256; const h = node?.offsetHeight ?? 320; const distance = clearance(w, h, ux, uy) + 20; body.phase = "out"; body.dx = ux; body.dy = uy; body.out = { x: ux * distance, y: uy * distance, r: -16, s: 1 }; body.vx = ux * 1100; body.vy = uy * 1100; body.z = 0; body.apexZ = TOP_Z - 1; commitOrder([index, ...current.slice(0, -1)]); }, [commitOrder]); const cycle = useCallback( (direction: 1 | -1) => { if (direction === 1) { throwTop(1.3, -0.35, 1, 0); } else { bringBack(); } }, [throwTop, bringBack] ); // Keep keyboard focus on whichever card is now on top. useEffect(() => { if (!focusTop.current || openId) { return; } focusTop.current = false; const topCard = order[0]; if (topCard !== undefined) { nodes.current[topCard]?.focus({ preventScroll: true }); } }, [order, openId]); const closeDetails = useCallback(() => { focusTop.current = true; setOpenId(null); }, []); useEffect(() => { if (!openId) { return; } closeRef.current?.focus({ preventScroll: true }); const onKey = (event: globalThis.KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); closeDetails(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [openId, closeDetails]); const handlePointerDown = ( event: PointerEvent, index: number ) => { suppressClick.current = false; if (drag.current || orderRef.current[0] !== index) { return; } if (event.pointerType === "mouse" && event.button !== 0) { return; } const body = bodies.current[index]; if (!body) { return; } const node = event.currentTarget; const rect = node.getBoundingClientRect(); node.setPointerCapture(event.pointerId); drag.current = { pointerId: event.pointerId, index, startX: event.clientX, startY: event.clientY, baseX: body.x, baseY: body.y, width: node.offsetWidth, lever: event.clientY - rect.top < rect.height / 2 ? 1 : -1, moved: false, samples: [{ t: event.timeStamp, x: event.clientX, y: event.clientY }], }; }; const handlePointerMove = (event: PointerEvent) => { const current = drag.current; if (!current || current.pointerId !== event.pointerId) { return; } const dx = event.clientX - current.startX; const dy = event.clientY - current.startY; if (!current.moved) { if (Math.hypot(dx, dy) < TAP_SLOP) { return; } // Axis lock for touch: a mostly vertical swipe is a page scroll, so // let go of the card and leave it to the browser (touch-pan-y). if (event.pointerType !== "mouse" && Math.abs(dy) > Math.abs(dx)) { drag.current = null; if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } return; } } const body = bodies.current[current.index]; if (!body) { return; } current.moved = true; current.samples.push({ t: event.timeStamp, x: event.clientX, y: event.clientY, }); if (current.samples.length > 24) { current.samples.shift(); } body.phase = "drag"; body.x = current.baseX + dx; body.y = current.baseY + dy; body.s = 1; // Pivot at the bottom edge: grabbing the top half swings the top out, // grabbing the bottom half swings it the other way. body.r = Math.max(-1, Math.min(1, body.x / current.width)) * MAX_DRAG_ROTATION * current.lever; body.vx = 0; body.vy = 0; body.vr = 0; body.vs = 0; progress.current = Math.min( Math.hypot(body.x, body.y) / (current.width * THROW_DISTANCE), 1 ); kick(); }; const handlePointerUp = ( event: PointerEvent, cancelled = false ) => { const current = drag.current; if (!current || current.pointerId !== event.pointerId) { return; } drag.current = null; progress.current = 0; const body = bodies.current[current.index]; if (!(body && current.moved)) { kick(); return; } if (cancelled) { // The browser took the gesture (or capture was lost): no throw, no // click, just spring home. body.phase = "rest"; kick(); return; } suppressClick.current = true; const { vx, vy } = releaseVelocity(current.samples); const speed = Math.hypot(vx, vy); const distance = Math.hypot(body.x, body.y); // A flick back toward the deck is a change of mind, not a throw. const heading = distance > 0 ? (vx * body.x + vy * body.y) / distance : 0; const fast = speed > THROW_VELOCITY && heading > -0.2; const far = distance > current.width * THROW_DISTANCE && heading > -0.3; if (fast || far) { throwTop(vx, vy, body.x / (distance || 1), body.y / (distance || 1)); return; } // Spring home, carrying the release velocity into the spring. body.phase = "rest"; body.vx = vx * 1000; body.vy = vy * 1000; body.vr = ((vx * 1000) / current.width) * MAX_DRAG_ROTATION * current.lever; kick(); }; const handleKeyDown = (event: KeyboardEvent) => { // A drag that ended without its click must not swallow Enter or Space. suppressClick.current = false; if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); focusTop.current = true; cycle(1); } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); focusTop.current = true; cycle(-1); } }; const topIndex = order[0] ?? 0; const top = cards[topIndex]; const open = openId ? cards.find((card) => card.id === openId) : undefined; return (

{cards.map((card, index) => { const depth = order.indexOf(index); const isTop = depth === 0; const isOpen = openId === card.id; return ( ); })}

{String(topIndex + 1).padStart(2, "0")} {" / "} {String(count).padStart(2, "0")} : {top?.title}

{open && ( )}

); } function DeckDetails({ card, openId, actionLabel, onAction, onClose, closeRef, }: { card: DeckCard; openId: string | null; actionLabel: string; onAction?: (card: DeckCard) => void; onClose: () => void; closeRef: RefObject; }) { return ( { if (event.target === event.currentTarget) { onClose(); } }} transition={{ duration: 0.2, ease: EASE_OUT }} > ); } const EASE_OUT = [0.23, 1, 0.32, 1] as const; const LAYOUT_SPRING = { type: "spring", duration: 0.45, bounce: 0 } as const; const NAV_BUTTON = "flex size-8 shrink-0 items-center justify-center rounded-full border border-zinc-200 text-zinc-600 transition-colors duration-150 hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 active:translate-y-px dark:border-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"; // --------------------------------------------------------------------------- // Demo artwork: flat zinc compositions with one accent, drawn inline so the // component ships with no image files. // --------------------------------------------------------------------------- const BG = "fill-zinc-100 dark:fill-zinc-800"; const MID = "fill-zinc-300 dark:fill-zinc-700"; const INK = "fill-zinc-800 dark:fill-zinc-300"; const ACCENT = { fill: "var(--deck-accent)" }; function Art({ children, dark }: { children: ReactNode; dark?: boolean }) { return ( ); } const STRIPES = [0, 1, 2, 3, 4, 5, 6]; function LowSunArt() { return ( {STRIPES.map((i) => ( ))} ); } function RidgeArt() { return ( ); } const RINGS = [24, 48, 72, 96, 120, 144, 168, 192]; function TideArt() { return ( {RINGS.map((r) => ( ))} ); } const WINDOWS = Array.from({ length: 30 }, (_, i) => i); const LIT = new Set([7, 16, 23]); function NightArt() { return ( {WINDOWS.map((i) => ( ))} ); } function SaltArt() { return ( ); } const DEFAULT_CARDS: DeckCard[] = [ { id: "low-sun", title: "Low Sun", subtitle: "Print 01 · Risograph", art: , description: "The last ten minutes of light over open water, pulled in two passes on warm cream stock.", specs: [ { label: "Size", value: "A3" }, { label: "Paper", value: "Cream 120g" }, { label: "Edition", value: "of 50" }, ], price: "$48", }, { id: "ridge-line", title: "Ridge Line", subtitle: "Print 02 · Screen print", art: , description: "Two ranges, one sun. Hand-pulled in three layers, with a slight misregister on purpose.", specs: [ { label: "Size", value: "50 × 70" }, { label: "Paper", value: "Natural 300g" }, { label: "Edition", value: "of 30" }, ], price: "$72", }, { id: "tide-pools", title: "Tide Pools", subtitle: "Print 03 · Risograph", art: , description: "Rings left by a single stone, printed as eight hairlines around one accent dot.", specs: [ { label: "Size", value: "A3" }, { label: "Paper", value: "White 120g" }, { label: "Edition", value: "of 80" }, ], price: "$40", }, { id: "night-market", title: "Night Market", subtitle: "Print 04 · Giclée", art: , description: "A block of windows after closing time. Three are still lit; the rest have gone home.", specs: [ { label: "Size", value: "40 × 50" }, { label: "Paper", value: "Cotton 310g" }, { label: "Edition", value: "Open" }, ], price: "$56", }, { id: "salt-flats", title: "Salt Flats", subtitle: "Print 05 · Screen print", art: , description: "One marker post and its shadow across a dry lake bed. Mostly empty, which is the point.", specs: [ { label: "Size", value: "50 × 70" }, { label: "Paper", value: "Bright 300g" }, { label: "Edition", value: "of 25" }, ], price: "$64", }, ]; 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","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","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":"@kokonutui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/card-stack.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/card-stack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]