4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollArea"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ScrollBar"] 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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 52:T3b7d,"use client"; import { Fragment, useEffect, useId, useMemo, useState, type CSSProperties } from "react"; // A 404 as returned mail, not an illustration of one. The "art" is a single // envelope: a real, focusable recovery `

` is the actual 404 page, and // everything above it — the address block, the routing-history postmarks, // the final NO SUCH ADDRESS hand-stamp — is aria-hidden decoration layered // over a plain-text summary that carries the same information for anyone // not watching it happen. The postmarks land one at a time (250ms apart, // scale(1.3->1) with a small per-hop rotation scatter, an SVG feTurbulence // + feDisplacementMap filter roughing their ink), the last one lands harder // (a two-frame squash) and knocks the whole card with a 1px shake, and the // forwarding-address label (search, home, recent pages) peels on with a // slight skew right after. Reduced motion renders the whole thing already // landed: no stamps dropping in, no peel, no shake. export interface DeadLetterHop { /** Routing stop label, e.g. "Edge". */ label: string; /** Optional small detail under the label, e.g. a node id. */ detail?: string; } export interface DeadLetterLink { /** Visible, accessible label. */ label: string; /** Destination. Omit to render a real, focusable link that does nothing. */ href?: string; } export interface DeadLetterProps { /** The URL that 404'd. Defaults to the current location. */ path?: string; /** Routing stops attempted, oldest first. Default: Edge / Origin / Router. */ hops?: DeadLetterHop[]; /** Recovery destinations besides Home, in source order. */ recentPages?: DeadLetterLink[]; /** Home link destination. Default "/". */ homeHref?: string; /** Called with the trimmed query on submit. Omit for a real, inert form. */ onSearch?: (query: string) => void; /** extra classes merged onto the rendered root element */ className?: string; } const DEFAULT_HOPS: DeadLetterHop[] = [ { label: "Edge", detail: "edge-04" }, { label: "Origin", detail: "origin-gw" }, { label: "Router", detail: "svc-router" }, ]; const DEFAULT_RECENT: DeadLetterLink[] = [ { label: "Dashboard" }, { label: "Settings" }, { label: "Docs" }, ]; function hash(s: string): number { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return h; } // Deterministic scatter in [-6, 6] degrees from a label, so re-renders don't // jitter and every hop still reads as hand-stamped rather than uniform. function scatter(label: string, index: number): number { return (Math.abs(hash(label + index)) % 13) - 6; } const CSS = ` @keyframes ns-dl-slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}} @keyframes ns-dl-stamp{ 0%{opacity:0;transform:scale(1.3) rotate(var(--ns-dl-rot,0deg))} 100%{opacity:1;transform:scale(1) rotate(var(--ns-dl-rot,0deg))} } @keyframes ns-dl-final{ 0%{opacity:0;transform:translateY(-10px) scale(1.3) rotate(var(--ns-dl-rot,-8deg))} 55%{opacity:1;transform:translateY(0) scale(1.08,0.88) rotate(var(--ns-dl-rot,-8deg))} 78%{transform:translateY(0) scale(0.96,1.05) rotate(var(--ns-dl-rot,-8deg))} 100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--ns-dl-rot,-8deg))} } @keyframes ns-dl-shake{ 0%,100%{transform:translateX(0)} 30%{transform:translateX(-1px)} 60%{transform:translateX(1px)} 85%{transform:translateX(-0.5px)} } @keyframes ns-dl-peel{ from{opacity:0;transform:translateY(10px) skewY(-3.5deg) scale(0.98)} to{opacity:1;transform:translateY(0) skewY(0deg) scale(1)} } `; export function DeadLetter({ path: pathProp, hops = DEFAULT_HOPS, recentPages = DEFAULT_RECENT, homeHref = "/", onSearch, className = "", }: DeadLetterProps) { const uid = useId(); const grainId = `ns-dl-grain-${uid}`; const [reduced, setReduced] = useState(false); const [autoPath, setAutoPath] = useState(null); const [query, setQuery] = useState(""); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const onChange = () => setReduced(mq.matches); onChange(); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); useEffect(() => { document.title = "404 — page not found"; }, []); useEffect(() => { if (pathProp) return; setAutoPath(window.location.pathname + window.location.search); }, [pathProp]); const path = pathProp ?? autoPath ?? "/unknown"; // --- timing -------------------------------------------------------------- // Full sequence must be settled with real margin before the verify gate's // 1000ms default screenshot — the last two beats (a squash, a skew-peel) // read as visibly broken if caught mid-motion, unlike a plain fade. Hops // stamp the required 250ms apart starting near-immediately; the final // stamp lands right after the last hop; the forwarding label starts // peeling the moment the stamp starts landing rather than waiting for it // to finish. Everything at rest by ~870ms, ~130ms of margin. const slideDur = 150; const hopStagger = 250; const hopDelayBase = 40; const hopDur = 150; const lastHopDelay = hopDelayBase + (hops.length - 1) * hopStagger; const finalDelay = lastHopDelay + hopDur + 20; const finalDur = 140; const peelDelay = finalDelay; const peelDur = 160; // Slide entrance and the late shake live on the SAME element, so they must // share one `animation` shorthand as a comma list — two style objects spread // together would overwrite each other's `animation`, leaving the entrance // (and its fill-mode opacity) never applied and the envelope stuck invisible. const envelopeStyle: CSSProperties | undefined = reduced ? undefined : { opacity: 0, animation: `ns-dl-slide ${slideDur}ms cubic-bezier(.16,1,.3,1) both, ns-dl-shake 160ms linear ${finalDelay}ms both`, }; // SVG elements transform around their border box by default in some // browsers, not their own visual center — explicit fill-box/center keeps // the scale+rotate pivoting in place rather than swinging from a corner. const hopStyle = (i: number): CSSProperties => (reduced ? { transformBox: "fill-box", transformOrigin: "center", "--ns-dl-rot": `${scatter(hops[i]?.label ?? "", i)}deg` } : { opacity: 0, transformBox: "fill-box", transformOrigin: "center", "--ns-dl-rot": `${scatter(hops[i]?.label ?? "", i)}deg`, animation: `ns-dl-stamp ${hopDur}ms cubic-bezier(.16,1,.3,1) ${hopDelayBase + i * hopStagger}ms both`, }) as unknown as CSSProperties; const finalStyle: CSSProperties = (reduced ? { transformBox: "fill-box", transformOrigin: "center", "--ns-dl-rot": "-8deg" } : { opacity: 0, transformBox: "fill-box", transformOrigin: "center", "--ns-dl-rot": "-8deg", animation: `ns-dl-final ${finalDur}ms cubic-bezier(.16,1,.3,1) ${finalDelay}ms both`, }) as unknown as CSSProperties; const peelStyle: CSSProperties | undefined = reduced ? undefined : { opacity: 0, animation: `ns-dl-peel ${peelDur}ms cubic-bezier(.16,1,.3,1) ${peelDelay}ms both` }; const hopSummary = useMemo(() => hops.map((h) => h.label).join(" → "), [hops]); return (

{/* shared grain filter — geometric-only turbulence, no baked color */}

UNDELIVERABLE MAIL

404 — page not found

Route attempted: {path} — failed at every hop ({hopSummary}) with no such address.

{/* theatrical envelope — pure decoration, zero focusable elements */}

{path}

{hops.map((hop, i) => ( {i > 0 && ( )}

{hop.label} {hop.detail && ( {hop.detail} )}

))} {/* the final hop lands here — anchored to the row's own right edge (already inside the card's padding) rather than centered on the last icon, so the stamp can never hang off the card */}

{/* forwarding-address label — the real 404 page, first in tab order */}

Forwarding address

); } 4c:["$","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,["$","$L4d",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4e",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":["$","$L4f",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"}]]}]]}],["$","$L50",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":["$","$L4f",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"}]]}]]}],["$","$L50",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":["$","$L4f",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)"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/loud/not-found-postmark/component.tsx","content":"$52","type":"registry:ui","target":"components/ui/not-found-postmark.tsx"}],"className":"h-[70svh] min-h-80"}]]}]