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:T1f52,"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { FileText, RotateCcw, Trash2 } from "lucide-react"; export interface ShredderProps { /** Document name on the card. */ title?: string; /** Line under the title. */ subtitle?: string; /** Custom card body (defaults to a skeleton page). */ children?: ReactNode; /** Number of strips the card is cut into. */ strips?: number; /** Ms the undo button stays available. 0 keeps it forever. */ undoTimeout?: number; /** Called when the card is shredded. */ onDelete?: () => void; /** Called when undo brings it back. */ onUndo?: () => void; /** Called when the undo window closes. */ onExpire?: () => void; className?: string; } type Phase = "idle" | "shredding" | "gone" | "expired"; const CARD_H = 176; const SHRED_MS = 1500; // Deterministic jitter so SSR and client agree. const rand = (i: number, salt: number) => { const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453; return x - Math.floor(x); }; export function Shredder({ title = "Q3-forecast.pdf", subtitle = "2.4 MB · edited 3h ago", children, strips = 12, undoTimeout = 5000, onDelete, onUndo, onExpire, className, }: ShredderProps) { const reduce = useReducedMotion(); const [phase, setPhase] = useState("idle"); const [round, setRound] = useState(0); const timers = useRef([]); const undoBtn = useRef(null); const deleteBtn = useRef(null); useEffect(() => () => timers.current.forEach(clearTimeout), []); const later = (ms: number, fn: () => void) => timers.current.push(window.setTimeout(fn, ms)); const shred = () => { if (phase !== "idle") return; setPhase("shredding"); onDelete?.(); later(reduce ? 200 : SHRED_MS, () => { setPhase("gone"); requestAnimationFrame(() => undoBtn.current?.focus()); if (undoTimeout > 0) later(undoTimeout, () => { setPhase("expired"); onExpire?.(); }); }); }; const undo = () => { timers.current.forEach(clearTimeout); timers.current = []; setRound((r) => r + 1); setPhase("idle"); onUndo?.(); requestAnimationFrame(() => deleteBtn.current?.focus()); }; const body = children ?? (

{title}

{subtitle}

{[100, 92, 97, 64, 88, 40].map((w, i) => ( ))}

); return (

{/* Card: whole while idle, a stack of adjacent strips while shredding. */}

{phase === "idle" && ( {body} )} {phase === "shredding" && !reduce && Array.from({ length: strips }, (_, i) => { const a = (i / strips) * 100; const b = 100 - ((i + 1) / strips) * 100; const drift = (rand(i, round) - 0.5) * 70; return ( {body} ); })}

{/* The machine sits in front of the strips so they vanish into its mouth. */}

{phase === "shredding" ? "Shredding" : "Ready"}

{phase === "gone" && ( Document shredded )}

{phase === "gone" ? `${title} shredded. Undo available.` : ""}

); } 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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/shredder.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]