"use client"; import { useState, useCallback } from "react"; import { motion, AnimatePresence } from "motion/react"; /** * Spring Toast Stack — Rauno Freiberg craft. * * Notification cards stack with depth compression — * diminishing scale, progressive blur, fading opacity. * Top card is draggable: swipe right to dismiss, rubber-band left. * Each card owns its drag state via motion `drag` prop * (no shared MotionValue, no interference between exit + enter). * Stack reshuffles with spring physics on every dismissal. * Micro noise-burst audio tick. CSS :active cursor. */ /* ── Audio — 3ms noise burst singleton ── */ let _ctx: AudioContext | null = null; let _buf: AudioBuffer | null = null; function getAudio(): AudioContext { if (!_ctx) { _ctx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }) .webkitAudioContext)(); } if (_ctx.state === "suspended") _ctx.resume(); return _ctx; } function ensureBuf(ac: AudioContext): AudioBuffer { if (_buf && _buf.sampleRate === ac.sampleRate) return _buf; const len = Math.floor(ac.sampleRate * 0.003); const buf = ac.createBuffer(1, len, ac.sampleRate); const ch = buf.getChannelData(0); for (let i = 0; i < len; i++) ch[i] = (Math.random() * 2 - 1) * (1 - i / len) ** 4; _buf = buf; return buf; } function tick() { try { const ac = getAudio(); const src = ac.createBufferSource(); const g = ac.createGain(); src.buffer = ensureBuf(ac); g.gain.value = 0.06; src.connect(g).connect(ac.destination); src.start(); } catch { /* silent */ } } /* ── Types ── */ interface NotificationItem { id: string; title: string; body: string; time: string; type?: "default" | "success" | "error"; } interface NotificationProps { items?: NotificationItem[]; onDismiss?: (id: string) => void; sound?: boolean; } /* ── Default data ── */ const DEFAULT_ITEMS: NotificationItem[] = [ { id: "1", title: "Deployment complete", body: "Your app has been deployed to production.", time: "2m ago", type: "success", }, { id: "2", title: "Payment received", body: "You received $2,400 from Acme Corp.", time: "5m ago", }, { id: "3", title: "Build failed", body: "Pipeline #847 failed at test stage.", time: "12m ago", type: "error", }, { id: "4", title: "New comment", body: "Sarah left a comment on your pull request.", time: "1h ago", }, ]; /* ── Scoped CSS ── */ const STYLE = `.nt{--nt-glass:rgba(255,255,255,.72);--nt-border:rgba(0,0,0,.06);--nt-shadow:0 0 0 .5px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);--nt-ink:0,0,0;--nt-ok:#34C759;--nt-err:#FF3B30}.dark .nt,[data-theme="dark"] .nt{--nt-glass:rgba(30,30,32,.82);--nt-border:rgba(255,255,255,.06);--nt-shadow:0 0 0 .5px rgba(255,255,255,.04),0 2px 4px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.3);--nt-ink:255,255,255;--nt-ok:#30D158;--nt-err:#FF453A}.nt-grab{cursor:grab}.nt-grab:active{cursor:grabbing}`; /* ── Springs ── */ const SPRING = { type: "spring" as const, stiffness: 380, damping: 30 }; /* ── Depth constants ── */ const MAX_VISIBLE = 4; const DEPTH_Y = 7; const DEPTH_SCALE = 0.035; const DEPTH_OPACITY = 0.12; const CARD_H = 78; /* ── Component ── */ export function Notification({ items: ext, onDismiss, sound = true, }: NotificationProps) { const [internal, setInternal] = useState( () => ext ?? DEFAULT_ITEMS, ); const [isDragging, setIsDragging] = useState(false); const items = ext ?? internal; const visible = items.slice(0, MAX_VISIBLE); const dismiss = useCallback( (id: string) => { if (sound) tick(); if (ext) { onDismiss?.(id); } else { setInternal((prev) => prev.filter((n) => n.id !== id)); onDismiss?.(id); } }, [ext, onDismiss, sound], ); const dotColor = (type?: "default" | "success" | "error"): string => { if (type === "success") return "var(--nt-ok)"; if (type === "error") return "var(--nt-err)"; return `rgba(var(--nt-ink),.35)`; }; const stackH = visible.length > 0 ? CARD_H + (visible.length - 1) * DEPTH_Y : 0; return (