61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T2111,"use client"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/cn"; import { ease } from "@/lib/motion"; type Wave = { id: number; /** Centre of the wave in the host's own (unscaled) coordinates. */ x: number; y: number; /** Distance to the host's farthest corner, so the wave always covers it. */ r: number; held: boolean; /** Seconds to wait before fading, so a quick tap is still seen to spread. */ hold: number; born: number; }; export type RippleIntensity = "soft" | "default" | "strong"; export type RippleProps = Omit, "children"> & { /** Every press ripples from the centre, for icon buttons, chips and radios where the pointer position means nothing. */ centered?: boolean; /** Stops new ripples. The host being `:disabled` or `aria-disabled="true"` does the same on its own. */ disabled?: boolean; /** Peak opacity of the wave: 5%, 8% or 12% of the host's text color. */ intensity?: RippleIntensity; }; const peak: Record = { soft: 0.05, default: 0.08, strong: 0.12 }; // A touch that turns into a scroll shouldn't flash a ripple. Wait this long for // the browser to claim the gesture (it fires pointercancel) before drawing. const TOUCH_INTENT_MS = 70; // Waves beyond this are dropped oldest-first when someone hammers the surface. const MAX_WAVES = 4; const isBlocked = (el: Element) => el.matches(':disabled, [aria-disabled="true"], [data-disabled]'); /** * Drop it inside any positioned surface (a button, a row, a card) and it listens * to that surface: presses ripple from the pointer, Enter and Space from the * centre. The wave takes the surface's text color, so it reads on a light row, * a dark primary button or a danger button without configuration. */ export function Ripple({ centered = false, disabled = false, intensity = "default", className, ref, ...rest }: RippleProps) { const layer = useRef(null); const [waves, setWaves] = useState([]); const reduce = !!useReducedMotion(); const setRef = useCallback( (node: HTMLSpanElement | null) => { layer.current = node; if (typeof ref === "function") return ref(node); if (ref) ref.current = node; }, [ref], ); useEffect(() => { const host = layer.current?.parentElement; if (!host || disabled) return; let seq = 0; let touchTimer: number | undefined; const live = new Set(); const spawn = (clientX?: number, clientY?: number) => { const rect = host.getBoundingClientRect(); const w = host.offsetWidth; const h = host.offsetHeight; if (!w || !h) return 0; // The host may itself be scaled mid-press; map the pointer back into its own box. const sx = rect.width / w || 1; const sy = rect.height / h || 1; const fromCentre = centered || clientX === undefined || clientY === undefined; const x = fromCentre ? w / 2 : Math.min(Math.max((clientX - rect.left) / sx, 0), w); const y = fromCentre ? h / 2 : Math.min(Math.max((clientY - rect.top) / sy, 0), h); const r = Math.hypot(Math.max(x, w - x), Math.max(y, h - y)); const id = ++seq; live.add(id); setWaves((all) => [...all.slice(-(MAX_WAVES - 1)), { id, x, y, r, held: true, hold: 0, born: performance.now() }]); return id; }; const release = (id: number) => { if (!live.delete(id)) return; const now = performance.now(); setWaves((all) => all.map((wave) => (wave.id === id ? { ...wave, held: false, hold: Math.max(0, 0.09 - (now - wave.born) / 1000) } : wave)), ); }; const releaseAll = () => live.forEach(release); /* Pointer -------------------------------------------------------------- */ let pointerWave = 0; const endPointer = () => { window.clearTimeout(touchTimer); window.removeEventListener("pointerup", onUp); window.removeEventListener("pointercancel", onCancel); host.removeEventListener("pointerleave", onLeave); }; const onUp = (e: PointerEvent) => { // A tap shorter than the touch-intent wait still gets its ripple, then lets go. if (!pointerWave && touchTimer !== undefined) pointerWave = spawn(e.clientX, e.clientY); endPointer(); release(pointerWave); }; // The browser took the touch for a scroll: never draw, or fade what was drawn. const onCancel = () => { endPointer(); release(pointerWave); }; // Dragging off the surface lets go, the same way the click would be abandoned. const onLeave = () => { endPointer(); release(pointerWave); }; const onDown = (e: PointerEvent) => { if (e.button !== 0 || isBlocked(host)) return; endPointer(); pointerWave = 0; touchTimer = undefined; window.addEventListener("pointerup", onUp); window.addEventListener("pointercancel", onCancel); host.addEventListener("pointerleave", onLeave); if (e.pointerType === "touch") { const { clientX, clientY } = e; touchTimer = window.setTimeout(() => { touchTimer = undefined; pointerWave = spawn(clientX, clientY); }, TOUCH_INTENT_MS); } else { pointerWave = spawn(e.clientX, e.clientY); } }; /* Keyboard ------------------------------------------------------------- */ const keys = new Map(); const onKeyDown = (e: KeyboardEvent) => { // Only when the surface itself has focus, never from a field inside it. if (e.target !== host || e.repeat || isBlocked(host)) return; if (e.key !== "Enter" && e.key !== " ") return; if (keys.has(e.key)) return; keys.set(e.key, spawn()); }; const onKeyUp = (e: KeyboardEvent) => { const id = keys.get(e.key); if (id === undefined) return; keys.delete(e.key); release(id); }; const onBlur = () => { keys.clear(); releaseAll(); }; host.addEventListener("pointerdown", onDown); host.addEventListener("keydown", onKeyDown); host.addEventListener("keyup", onKeyUp); host.addEventListener("blur", onBlur); return () => { endPointer(); host.removeEventListener("pointerdown", onDown); host.removeEventListener("keydown", onKeyDown); host.removeEventListener("keyup", onKeyUp); host.removeEventListener("blur", onBlur); }; }, [centered, disabled]); const remove = (id: number) => setWaves((all) => all.filter((wave) => wave.id !== id)); const opacity = peak[intensity]; return ( {waves.map((wave) => reduce ? ( // Reduced motion: no spreading circle, a flat wash of the whole surface that fades. !wave.held && remove(wave.id)} /> ) : ( !wave.held && remove(wave.id)} /> ), )} ); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/cn.json","https://www.stealth.pm/r/motion.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/ripple.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]