64: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"] 65:I[544296,["/_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"],"ItemStyles"] 66:I[8513,["/_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"],"ScrollArea"] 67:I[8513,["/_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"],"ScrollBar"] 68: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"] 69:T480f,"use client"; import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, type ReactNode, } from "react"; // --------------------------------------------------------------------------- // ImpulseCradle — a toast stack that behaves like a Newton's cradle. A new // toast swings in from the top with an accelerating (ease-in) entrance and // "strikes" the queue; the impact travels down through every already-queued // toast as a fast domino of 2-3px shunts, staggered 35ms apart, so the eye // reads how deep the stack is without counting anything. Under capacity that // impulse simply dissipates — the last toast shunts and returns. At capacity // the same impulse instead carries the oldest toast off the far (bottom) end: // it inherits the shunt's momentum and departs with an ease-out arc, a slight // rotation, and a fade — conservation of notifications, visibly enforced. // Pure DOM transforms via the Web Animations API, tokens only, no canvas. // --------------------------------------------------------------------------- export type ImpulseSeverity = "info" | "error"; export interface ImpulseToastInput { severity?: ImpulseSeverity; title: string; message?: string; /** ms before auto-dismiss; 0 disables; defaults to the stack `duration` */ duration?: number; } export interface ImpulseCradleHandle { /** swing a new toast into the stack, returns its id */ push: (toast: ImpulseToastInput) => string; dismiss: (id: string) => void; clear: () => void; } type ToastRec = { id: string; severity: ImpulseSeverity; title: string; message?: string; duration: number; }; type HistoryReason = "dismissed" | "expired" | "evicted"; type HistoryRec = ToastRec & { reason: HistoryReason; at: number }; type TimerEntry = { handle: number | null; deadline: number; remaining: number }; type PauseReason = "hover" | "focus"; const SHUNT_STAGGER = 35; // ms between each toast's impulse pulse const SHUNT_MS = 60; const SHUNT_PX = 3; const EJECT_MS = 340; const ENTER_MS = 200; const EXIT_MS = 150; const EASE_IN = "cubic-bezier(.55,.06,.68,.19)"; // accelerating, released-ball entrance const EASE_OUT = "cubic-bezier(0.16,1,0.3,1)"; // decelerating, matches the eject's inherited velocity const ICONS: Record = { error: ( ), info: ( ), }; function CardShell({ toast, onDismiss }: { toast: ToastRec; onDismiss: () => void }) { return (

{ICONS[toast.severity]}

{toast.title}

{toast.message ? (

{toast.message}

) : null}

); } export const ImpulseCradle = forwardRef< ImpulseCradleHandle, { /** how many toasts the stack shows before the impulse starts ejecting */ maxVisible?: number; /** ms before a toast auto-dismisses (paused on hover/focus); 0 disables */ duration?: number; /** toasts present at mount */ initial?: ImpulseToastInput[]; /** extra classes merged onto the rendered root element */ className?: string; /** accessible name for the toast stack */ "aria-label"?: string; } >(function ImpulseCradle( { maxVisible = 4, duration = 5000, initial, className = "w-full max-w-sm", "aria-label": ariaLabel = "Notifications", }, ref ) { const cap = Math.max(1, maxVisible); const regionRef = useRef(null); const historyPanelId = useId(); const seqRef = useRef(0); const liveSeqRef = useRef(0); const toastsRef = useRef([]); const timersRef = useRef>(new Map()); const pauseReasonsRef = useRef>>(new Map()); const cardElsRef = useRef>(new Map()); const enteredRef = useRef>(new Set()); const exitingIdsRef = useRef>(new Set()); const evictDelayRef = useRef>(new Map()); const evictAttachedRef = useRef>(new Set()); const [toasts, setToasts] = useState(() => (initial ?? []).map((t, i) => ({ id: `ic-init-${i}`, severity: t.severity ?? "info", title: t.title, message: t.message, duration: t.duration ?? duration, })) ); toastsRef.current = toasts; const [evicting, setEvicting] = useState([]); const [history, setHistory] = useState([]); const [historyOpen, setHistoryOpen] = useState(false); const [reduced, setReduced] = useState(false); const [live, setLive] = useState<{ text: string; level: "polite" | "assertive"; seq: number }>({ text: "", level: "polite", seq: -1, }); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(mq.matches); update(); mq.addEventListener("change", update); return () => mq.removeEventListener("change", update); }, []); const announce = useCallback((text: string, level: "polite" | "assertive") => { setLive({ text, level, seq: ++liveSeqRef.current }); }, []); const pushHistory = useCallback((t: ToastRec, reason: HistoryReason) => { setHistory((prev) => [{ ...t, reason, at: Date.now() }, ...prev].slice(0, 12)); }, []); const clearTimer = useCallback((id: string) => { const entry = timersRef.current.get(id); if (entry?.handle !== null && entry) clearTimeout(entry.handle); timersRef.current.delete(id); pauseReasonsRef.current.delete(id); }, []); const dismiss = useCallback( (id: string, reason: HistoryReason = "dismissed") => { if (exitingIdsRef.current.has(id)) return; const t = toastsRef.current.find((x) => x.id === id); if (!t) return; exitingIdsRef.current.add(id); clearTimer(id); const el = cardElsRef.current.get(id); const finish = () => { exitingIdsRef.current.delete(id); cardElsRef.current.delete(id); enteredRef.current.delete(id); setToasts((prev) => prev.filter((x) => x.id !== id)); pushHistory(t, reason); }; if (el) { const anim = el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: EXIT_MS, easing: "ease-out", fill: "forwards", }); anim.finished.catch(() => {}).finally(finish); } else { finish(); } }, [clearTimer, pushHistory] ); const armTimer = useCallback( (t: ToastRec) => { if (t.duration <= 0) return; timersRef.current.set(t.id, { handle: window.setTimeout(() => dismiss(t.id, "expired"), t.duration), deadline: Date.now() + t.duration, remaining: t.duration, }); }, [dismiss] ); const pauseTimer = useCallback((id: string, reason: PauseReason) => { const reasons = pauseReasonsRef.current.get(id) ?? new Set(); reasons.add(reason); pauseReasonsRef.current.set(id, reasons); const entry = timersRef.current.get(id); if (entry?.handle !== null && entry) { clearTimeout(entry.handle); entry.handle = null; entry.remaining = Math.max(0, entry.deadline - Date.now()); } }, []); const resumeTimer = useCallback( (id: string, reason: PauseReason) => { const reasons = pauseReasonsRef.current.get(id); if (reasons) { reasons.delete(reason); if (reasons.size > 0) return; } const entry = timersRef.current.get(id); if (!entry || entry.handle !== null) return; const ms = Math.max(400, entry.remaining); entry.deadline = Date.now() + ms; entry.handle = window.setTimeout(() => dismiss(id, "expired"), ms); }, [dismiss] ); const finalizeEvict = useCallback( (t: ToastRec) => { evictAttachedRef.current.delete(t.id); cardElsRef.current.delete(t.id); setEvicting((prev) => prev.filter((x) => x.id !== t.id)); pushHistory(t, "evicted"); }, [pushHistory] ); // entrance: every freshly-mounted toast card plays this exactly once — by // construction the only card that ever mounts fresh is the newest arrival, // since surviving cards keep their DOM identity (same React key) and just // ride out the shunt in place instead of remounting. const attachCard = useCallback( (id: string, el: HTMLDivElement | null) => { if (!el) return; cardElsRef.current.set(id, el); if (enteredRef.current.has(id)) return; enteredRef.current.add(id); if (reduced) { el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: EXIT_MS, easing: "ease-out" }); } else { el.animate( [ { transform: "translateY(-26px) scale(0.97)", opacity: 0 }, { transform: "translateY(0) scale(1)", opacity: 1 }, ], { duration: ENTER_MS, easing: EASE_IN } ); } }, [reduced] ); // eviction: the oldest toast, bumped out of the visible cap, keeps // rendering (in an inert overlay list) just long enough to play its // departure, inheriting the same stagger slot the shunt cascade would have // given it had it survived. const attachEvicting = useCallback( (t: ToastRec, el: HTMLDivElement | null) => { if (!el || evictAttachedRef.current.has(t.id)) return; evictAttachedRef.current.add(t.id); const delay = evictDelayRef.current.get(t.id) ?? 0; const anim = reduced ? el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: EXIT_MS, easing: "ease-out", fill: "forwards", }) : el.animate( [ { transform: "translateY(0px) rotate(0deg)", opacity: 1 }, { transform: "translateY(10px) rotate(2deg)", opacity: 1, offset: 0.35 }, { transform: "translateY(46px) rotate(9deg)", opacity: 0 }, ], { duration: EJECT_MS, delay, easing: EASE_OUT, fill: "forwards" } ); anim.finished .catch(() => {}) .finally(() => finalizeEvict(t)); }, [reduced, finalizeEvict] ); const push = useCallback( (input: ImpulseToastInput): string => { const id = `ic-${++seqRef.current}`; const severity: ImpulseSeverity = input.severity ?? "info"; const rec: ToastRec = { id, severity, title: input.title, message: input.message, duration: input.duration ?? duration, }; const prev = toastsRef.current; const overCap = prev.length >= cap; const kept = overCap ? prev.slice(0, Math.max(0, cap - 1)) : prev; const ejected = overCap ? prev[prev.length - 1] : null; const next = [rec, ...kept]; toastsRef.current = next; setToasts(next); if (ejected) { clearTimer(ejected.id); evictDelayRef.current.set(ejected.id, kept.length * SHUNT_STAGGER); setEvicting((ev) => [...ev, ejected]); } armTimer(rec); announce( `${severity === "error" ? "Error" : "Notification"}: ${rec.title}${ rec.message ? `. ${rec.message}` : "" }`, severity === "error" ? "assertive" : "polite" ); // the impulse cascade — every toast that survives the push (i.e. every // toast except the new arrival) gets a 3px shunt toward the far end, // staggered 35ms deeper per position, then springs back. The ejected // toast plays the matching (but non-returning) motion in attachEvicting. if (!reduced) { requestAnimationFrame(() => { kept.forEach((t, i) => { const el = cardElsRef.current.get(t.id); el?.animate( [ { transform: "translateY(0px)" }, { transform: `translateY(${SHUNT_PX}px)`, offset: 0.4 }, { transform: "translateY(0px)" }, ], { duration: SHUNT_MS, delay: (i + 1) * SHUNT_STAGGER, easing: "ease-out" } ); }); }); } return id; }, [cap, duration, armTimer, announce, clearTimer, reduced] ); const clear = useCallback(() => { for (const t of toastsRef.current) dismiss(t.id); }, [dismiss]); useImperativeHandle(ref, () => ({ push, dismiss, clear }), [push, dismiss, clear]); // arm timers for `initial` toasts seeded at mount (push() handles its own) useEffect(() => { for (const t of toastsRef.current) { if (!timersRef.current.has(t.id)) armTimer(t); } // deliberately mount-only: push() arms its own toasts as they arrive // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // teardown: every pending timer dies with the component useEffect(() => { const timers = timersRef.current; return () => { for (const entry of timers.values()) if (entry.handle !== null) clearTimeout(entry.handle); timers.clear(); }; }, []); // F6 (pane-jump convention): send focus straight to the toast region — // the newest toast if one is present, otherwise the region landmark itself. useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key !== "F6") return; const root = regionRef.current; if (!root) return; e.preventDefault(); const firstToast = root.querySelector("[data-ic-toast]"); (firstToast ?? root).focus(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return (

{toasts.map((t) => (

attachCard(t.id, el)} data-ic-toast role={t.severity === "error" ? "alert" : "status"} aria-label={`${t.severity === "error" ? "Error" : "Notification"}: ${t.title}`} tabIndex={0} onPointerEnter={() => pauseTimer(t.id, "hover")} onPointerLeave={() => resumeTimer(t.id, "hover")} onFocus={() => pauseTimer(t.id, "focus")} onBlur={() => resumeTimer(t.id, "focus")} onKeyDown={(e) => { if (e.key === "Escape") { e.stopPropagation(); dismiss(t.id); } }} className="overflow-hidden rounded-sm border border-border bg-background will-change-transform focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ns-accent" > dismiss(t.id)} />

))} {evicting.map((t) => (

attachEvicting(t, el)} aria-hidden="true" className="pointer-events-none overflow-hidden rounded-sm border border-border bg-background will-change-transform" > {}} />

))}

{history.length > 0 ? (

{historyOpen ? (

{h.title} {h.reason}

) : null}

) : null} {/* single shared announcer: politeness swaps between info and error by remounting on `seq`, since a live region's live-ness is typically fixed at first AT encounter — physics-only reflow never touches this, so an existing toast is never re-announced */}

{live.text}

); }); 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/loud/toast-newton-cradle/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/toast-newton-cradle.tsx"}],"className":"h-[70svh] min-h-80"}]]}]