5f: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"] 60: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"] 61: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"] 62: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"] 63: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"] 64:T3832,"use client"; import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type UndoItem = { id: string; name: string; meta: string }; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // Survivors slide over 250ms while the leaver is gone in 150ms, so the gap // never stands empty. Exits are softer and faster than entrances. const SLIDE = { duration: 0.25, ease: EASE_OUT }; const LEAVE = { duration: 0.15, ease: EASE_OUT }; // A restored row waits 50ms for its neighbours to open the gap first. const RESTORE = { duration: 0.25, ease: EASE_OUT, delay: 0.05 }; const INSTANT = { duration: 0 }; // r=8 in a 20px box leaves room for the 2px stroke; 2 * PI * 8. const RING = 50.27; const CSS = ` .undo-ring { stroke-dasharray: ${RING}; animation-name: undo-countdown; /* Linear because it is a clock: every second must look the same. */ animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes undo-countdown { to { stroke-dashoffset: ${RING}; } } /* The ring is the timer itself, so pausing it pauses the delete. Focus pauses it too, so keyboard users are never raced. */ .undo-snackbar:focus-within .undo-ring, [data-hidden] .undo-ring { animation-play-state: paused; } @media (hover: hover) { .undo-snackbar:hover .undo-ring { animation-play-state: paused; } } `; function isEditable(el: EventTarget | null) { return ( el instanceof HTMLElement && (el.isContentEditable || el.tagName === "INPUT" || el.tagName === "TEXTAREA") ); } function shortcutName() { return /Mac|iPhone|iPad/.test(navigator.platform) ? "Command Z" : "Control Z"; } export function UndoToast({ items, // Long enough to notice the mistake and reach for Undo, short enough that // the snackbar doesn't linger over the list. duration = 5000, onDelete, className, }: { items: UndoItem[]; duration?: number; onDelete?: (items: UndoItem[]) => void; className?: string; }) { const reduceMotion = useReducedMotion(); // Deleted but still undoable. A second delete stacks into this batch // instead of replacing it: replacing would make the first delete permanent // without the user ever seeing its timer run out. const [pending, setPending] = useState([]); const [gone, setGone] = useState([]); // Bumped on every delete: restarts the ring and crossfades the message. const [batch, setBatch] = useState(0); const [announcement, setAnnouncement] = useState(""); // Stored rather than derived, so the snackbar keeps its last words while // it fades out instead of flashing "0 items deleted". const [message, setMessage] = useState(""); const rootRef = useRef(null); const undoRef = useRef(null); const deleteRefs = useRef(new Map()); const focusTarget = useRef(null); const visible = items.filter( (i) => !pending.includes(i.id) && !gone.includes(i.id), ); const pendingItems = items.filter((i) => pending.includes(i.id)); const focusInside = () => !!rootRef.current?.contains(document.activeElement); const remove = (item: UndoItem) => { // Hand focus to a neighbour so it isn't dropped on the body when the // focused button unmounts. if (focusInside()) { const index = visible.findIndex((i) => i.id === item.id); const next = visible[index + 1] ?? visible[index - 1]; focusTarget.current = next ? next.id : "undo"; } setPending((p) => [...p, item.id]); setBatch((b) => b + 1); setMessage( pending.length === 0 ? `Deleted \u2018${item.name}\u2019` : `${pending.length + 1} items deleted`, ); setAnnouncement( `Deleted ${item.name}. Press Undo or ${shortcutName()} to restore.`, ); }; const undo = () => { if (pending.length === 0) return; if (focusInside()) focusTarget.current = pending[0]; setPending([]); setAnnouncement( pending.length === 1 ? "Restored" : `Restored ${pending.length} items`, ); }; const commit = () => { if (pending.length === 0) return; if (focusInside()) focusTarget.current = visible[0]?.id ?? null; setGone((g) => [...g, ...pending]); setPending([]); onDelete?.(pendingItems); }; useEffect(() => { const target = focusTarget.current; if (target === null) return; focusTarget.current = null; (target === "undo" ? undoRef.current : deleteRefs.current.get(target) )?.focus(); }, [pending, gone]); // Ctrl/Cmd+Z undoes while the snackbar shows, unless a text field wants // the shortcut for its own undo. Same animation as clicking Undo: this is // an occasional action, not a constant one. useEffect(() => { if (pending.length === 0) return; const onKey = (e: KeyboardEvent) => { if (e.key.toLowerCase() !== "z" || !(e.metaKey || e.ctrlKey)) return; if (e.shiftKey || e.altKey || isEditable(e.target)) return; // Inert copies, like the index preview, stay quiet. if (rootRef.current?.closest("[inert]")) return; e.preventDefault(); undo(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }); // A hidden tab pauses the countdown, so nobody comes back to an undo that // expired unseen. Set on the DOM directly to skip a re-render. useEffect(() => { const sync = () => rootRef.current?.toggleAttribute("data-hidden", document.hidden); sync(); document.addEventListener("visibilitychange", sync); return () => document.removeEventListener("visibilitychange", sync); }, []); const empty = visible.length === 0 && pending.length === 0; return (

{/* Fixed height, so deleting and restoring never resize the demo. 24px radius around 8px padding leaves 16px for the rows. */}

{visible.map((item) => (

{item.name} {item.meta}

))}

{empty && ( No files left )}

{/* Reserved slot, so the snackbar appearing never moves the list. */}

{pending.length > 0 && ( {/* Old and new messages share this cell and crossfade, so a second delete reads as an update, not a new toast. */} {message} {/* 36px inside a 48px pill with 6px padding: both fully round, so the radii stay concentric. */} )}

{announcement}

); } const FILES: UndoItem[] = [ { id: "roadmap", name: "Q3 roadmap.pdf", meta: "2.4 MB, edited 2h ago" }, { id: "invoice", name: "Invoice 0142.pdf", meta: "86 KB, edited yesterday" }, { id: "offsite", name: "Team offsite.jpg", meta: "4.1 MB, edited Monday" }, { id: "notes", name: "Interview notes.md", meta: "12 KB, edited Aug 29" }, ]; export default function UndoToastDemo() { return ; } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/undo-toast.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]