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:T1ca3,"use client"; import { useId, type PointerEvent } from "react"; import { ArrowLeft } from "lucide-react"; export interface NotFoundProps { /** Big code shown in the middle. */ code?: string; title?: string; message?: string; /** Where the button goes. */ homeHref?: string; buttonLabel?: string; /** Periodic RGB-split glitch bursts on the code. */ glitch?: boolean; /** Px each digit drifts with the pointer. 0 disables parallax. */ parallax?: number; /** Accent used for the glow and one glitch channel. */ accent?: string; className?: string; } const css = ` .nf-digit{transform:translate3d(calc(var(--nf-x,0)*var(--d)*1px),calc(var(--nf-y,0)*var(--d)*1px),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)} .nf-ghost{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;pointer-events:none} .nf-glitch .nf-ghost-a{color:var(--nf-accent);animation:nf-a 3.4s steps(1) infinite} .nf-glitch .nf-ghost-b{color:#22d3ee;animation:nf-b 3.4s steps(1) infinite} .nf-glitch .nf-core{animation:nf-core 3.4s steps(1) infinite} @keyframes nf-a{ 0%,78%,100%{opacity:0;transform:none;clip-path:none} 80%{opacity:.9;transform:translate(-6px,0);clip-path:inset(12% 0 62% 0)} 83%{opacity:.9;transform:translate(8px,0);clip-path:inset(58% 0 18% 0)} 86%{opacity:.9;transform:translate(-3px,0);clip-path:inset(30% 0 44% 0)} 89%{opacity:.9;transform:translate(5px,0);clip-path:inset(76% 0 4% 0)} 92%{opacity:0}} @keyframes nf-b{ 0%,78%,100%{opacity:0;transform:none;clip-path:none} 80%{opacity:.9;transform:translate(6px,0);clip-path:inset(40% 0 38% 0)} 83%{opacity:.9;transform:translate(-8px,0);clip-path:inset(4% 0 80% 0)} 86%{opacity:.9;transform:translate(4px,0);clip-path:inset(66% 0 10% 0)} 89%{opacity:.9;transform:translate(-5px,0);clip-path:inset(22% 0 60% 0)} 92%{opacity:0}} @keyframes nf-core{0%,79%,93%,100%{transform:none}81%{transform:translate(3px,0) skewX(-6deg)}85%{transform:translate(-2px,0)}88%{transform:translate(1px,0) skewX(4deg)}} .nf-float{animation:nf-float 6s ease-in-out infinite} @keyframes nf-float{50%{transform:translateY(-10px)}} @keyframes nf-in{from{opacity:0;transform:translateY(14px);filter:blur(6px)}} .nf-in{animation:nf-in .8s cubic-bezier(.2,.8,.2,1) both} @media (prefers-reduced-motion: reduce){.nf-digit{transform:none;transition:none}.nf-glitch .nf-ghost-a,.nf-glitch .nf-ghost-b,.nf-glitch .nf-core,.nf-float,.nf-in{animation:none}} `; /** * Drop-in 404 section. Fills its parent; put it in `app/not-found.tsx` inside a * `min-h-screen` wrapper, or any sized box. */ export function NotFound({ code = "404", title = "This page drifted off", message = "The link might be broken, or the page moved somewhere new. Let's get you back on track.", homeHref = "/", buttonLabel = "Back to home", glitch = true, parallax = 18, accent = "#f43f5e", className, }: NotFoundProps) { const onMove = (e: PointerEvent) => { if (!parallax) return; const r = e.currentTarget.getBoundingClientRect(); e.currentTarget.style.setProperty("--nf-x", String(((e.clientX - r.left) / r.width - 0.5) * 2)); e.currentTarget.style.setProperty("--nf-y", String(((e.clientY - r.top) / r.height - 0.5) * 2)); }; const onLeave = (e: PointerEvent) => { e.currentTarget.style.setProperty("--nf-x", "0"); e.currentTarget.style.setProperty("--nf-y", "0"); }; const titleId = useId(); const digits = code.split(""); // Outer digits drift more than inner ones, alternating direction for depth. const depth = (i: number) => { const mid = (digits.length - 1) / 2; return parallax * (0.5 + Math.abs(i - mid) / Math.max(mid, 1)) * (i % 2 ? -1 : 1); }; return (

{/* Backdrop: fading grid + accent glow that also drifts with the pointer. */}

Error {code}

{digits.map((d, i) => ( {d} {d} {d} ))}

{title}

{message}

{buttonLabel}

); } 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","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/not-found.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]