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:T3b28,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type FormEvent, } from "react"; // --------------------------------------------------------------------------- // NewsletterCadenceRail — a newsletter capture whose headline element is the // publication's actual rhythm, drawn as a mono day-rail. Six weeks of days at // a 1ch pitch: a dot per ordinary day, a `│` on every issue day (derived from // one anchor date plus an interval, so the spacing IS the cadence and can be // counted), and a `▮` caret on today. The same arithmetic that draws the rail // writes the readout line beneath it, so the information is never trapped in // the decoration — the rail is aria-hidden, the sentence is the accessible // truth. // // The only ambient motion is today's caret, breathing on a pure CSS keyframe // whose duration is jittered once at mount so two instances on a page never // lock step. There is no rAF loop. Nothing responds to the pointer. // --------------------------------------------------------------------------- export interface NewsletterIssue { /** issue number, e.g. 48 */ number: number; title: string; /** ISO date (YYYY-MM-DD) the issue shipped */ dateISO: string; href?: string; } export interface NewsletterCadenceRailProps { /** any known past issue date, ISO (YYYY-MM-DD). Anchors the whole cadence. */ anchorISO: string; /** days between issues. Default 14. */ intervalDays?: number; /** recent issues, newest first — rendered as a short archive list */ issues?: NewsletterIssue[]; /** called with the entered email on submit */ onSubmit?: (email: string) => void; /** extra classes merged onto the rendered root element */ className?: string; } const DAY_MS = 86_400_000; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/; /** cells, and how many of them sit before today */ const NO_ISSUES: NewsletterIssue[] = []; const WIDE = { cells: 42, past: 28 }; const NARROW = { cells: 28, past: 21 }; function startOfDay(d: Date): number { return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); } function parseISO(iso: string): number { const [y, m, d] = iso.split("-").map((n) => parseInt(n, 10)); return new Date(y, (m || 1) - 1, d || 1).getTime(); } function addDays(ms: number, n: number): number { const d = new Date(ms); return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n).getTime(); } function dayDiff(a: number, b: number): number { return Math.round((a - b) / DAY_MS); } /** `Jul 07` */ function shortDate(ms: number): string { const d = new Date(ms); return `${MONTHS[d.getMonth()]} ${String(d.getDate()).padStart(2, "0")}`; } /** `Tue 12 Aug` */ function longDate(ms: number): string { const d = new Date(ms); return `${WEEKDAYS[d.getDay()]} ${String(d.getDate()).padStart(2, "0")} ${MONTHS[d.getMonth()]}`; } function agoPhrase(days: number): string { if (days === 0) return "ships today"; if (days === 1) return "shipped yesterday"; return `shipped ${days} days ago`; } export function NewsletterCadenceRail({ anchorISO, intervalDays = 14, issues = NO_ISSUES, onSubmit, className = "", }: NewsletterCadenceRailProps) { const uid = useId(); const interval = Math.max(1, Math.round(intervalDays)); const railRef = useRef(null); const chRef = useRef(null); const travelRef = useRef | null>(null); const [size, setSize] = useState<"wide" | "narrow" | "none">("wide"); const [pulse, setPulse] = useState(null); const [reduced, setReduced] = useState(false); const [email, setEmail] = useState(""); const [status, setStatus] = useState(""); const [invalid, setInvalid] = useState(false); const [done, setDone] = useState(false); const [marker, setMarker] = useState(null); // The server renders in its own timezone; a viewer east or west of it can be // on a different calendar day, which would slide the whole rail by one cell. // Seeded at render so SSR still emits a real rail, re-read once at mount so // the client's own midnight wins (identical value ⇒ React bails out). const [nowMs, setNowMs] = useState(() => startOfDay(new Date())); // ---- cadence arithmetic (one source for both the rail and the readout) --- const cadence = useMemo(() => { const today = nowMs; const anchor = parseISO(anchorISO); const elapsed = dayDiff(today, anchor); const offset = ((elapsed % interval) + interval) % interval; const last = addDays(today, -offset); const next = offset === 0 ? addDays(today, interval) : addDays(last, interval); // issue number of `last`, extrapolated from the newest archive entry let lastNumber: number | null = null; if (issues.length > 0) { const newest = issues.reduce((a, b) => (b.number > a.number ? b : a)); const steps = Math.round(dayDiff(last, parseISO(newest.dateISO)) / interval); lastNumber = newest.number + steps; } return { today, anchor, last, next, lastNumber, sinceLast: offset }; }, [anchorISO, interval, issues, nowMs]); const dims = size === "narrow" ? NARROW : WIDE; const cells = useMemo(() => { const out: { ms: number; issue: boolean; today: boolean }[] = []; for (let i = 0; i < dims.cells; i++) { const ms = addDays(cadence.today, i - dims.past); const delta = Math.floor(dayDiff(ms, cadence.anchor)); out.push({ ms, issue: ((delta % interval) + interval) % interval === 0, today: i === dims.past, }); } return out; }, [cadence.today, cadence.anchor, dims, interval]); // The next issue can fall past the end of the rail (most days in narrow, // where the rail only reaches today+6). Clamp where the marker stops, but remember // that the stop is NOT the issue cell — nothing may flip to a destination // glyph on an ordinary day. The readout still carries the real date. const next = useMemo(() => { const raw = dims.past + dayDiff(cadence.next, cadence.today); return { idx: Math.min(raw, dims.cells - 1), onRail: raw <= dims.cells - 1 }; }, [cadence.next, cadence.today, dims]); const nextIdx = next.idx; // ---- mount-time jitter: no two instances breathe in lockstep ------------- useEffect(() => { setNowMs(startOfDay(new Date())); const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); if (!mq.matches) setPulse(`${(3.2 * (0.92 + Math.random() * 0.16)).toFixed(3)}s`); const onChange = () => { setReduced(mq.matches); setPulse(mq.matches ? null : `${(3.2 * (0.92 + Math.random() * 0.16)).toFixed(3)}s`); }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); // ---- responsive: measure the rail box in ch ----------------------------- const measure = useCallback(() => { const rail = railRef.current; const probe = chRef.current; if (!rail || !probe) return; const ch = probe.getBoundingClientRect().width / 10; if (!ch) return; const capacity = rail.getBoundingClientRect().width / ch; setSize(capacity >= WIDE.cells ? "wide" : capacity >= 20 ? "narrow" : "none"); }, []); useEffect(() => { measure(); const rail = railRef.current; if (!rail || typeof ResizeObserver === "undefined") return; const ro = new ResizeObserver(measure); ro.observe(rail); return () => ro.disconnect(); }, [measure]); useEffect(() => () => { if (travelRef.current) clearInterval(travelRef.current); }, []); // ---- form --------------------------------------------------------------- function handleSubmit(e: FormEvent) { e.preventDefault(); const value = email.trim(); if (value.length === 0) { setInvalid(true); setStatus("Enter an email address"); return; } if (!EMAIL_RE.test(value)) { setInvalid(true); setStatus("That address looks incomplete"); return; } setInvalid(false); setDone(true); setStatus(`You're on the list — first issue lands ${longDate(cadence.next)}`); onSubmit?.(value); if (reduced) { setMarker(nextIdx); return; } let idx = dims.past; setMarker(idx); if (travelRef.current) clearInterval(travelRef.current); travelRef.current = setInterval(() => { idx += 1; setMarker(idx); if (idx >= nextIdx && travelRef.current) { clearInterval(travelRef.current); travelRef.current = null; } }, 90); } const arrived = marker !== null && marker >= nextIdx; const weekLabels: { idx: number; text: string }[] = []; for (let i = 0; i + 6 < dims.cells; i += 7) { weekLabels.push({ idx: i, text: shortDate(cells[i]?.ms ?? cadence.today).padEnd(7, " ") }); } const readout = [ cadence.lastNumber !== null ? `issue #${cadence.lastNumber} ${agoPhrase(cadence.sinceLast)}` : `last issue ${agoPhrase(cadence.sinceLast)}`, `next issue ${longDate(cadence.next)}`, `every ${interval} days`, ].join(" · "); const fieldId = `${uid}-email`; const statusId = `${uid}-status`; return (

{/* ch probe — measured, never seen */}

{size !== "none" && (

{cells.map((cell, i) => { const isDest = arrived && next.onRail && i === nextIdx; const isMarker = marker !== null && marker === i && !isDest; let glyph = cell.issue ? "│" : "·"; if (cell.today) glyph = "▮"; if (isDest) glyph = "█"; if (isMarker) glyph = "▸"; let color = "var(--ns-muted)"; let opacity = i < dims.past ? 0.35 : 0.6; if (cell.issue) { color = "var(--foreground)"; opacity = 0.9; } if (cell.today || isMarker || isDest) { color = "var(--ns-accent)"; opacity = 1; } return ( {glyph} ); })}

{weekLabels.map((w) => ( {w.text} ))}

)}

{readout}

{issues.length > 0 && (

#{issue.number} {issue.title} {shortDate(parseISO(issue.dateISO))}

)} {done ? (

▸ Subscribed.

) : ( )}

{status}

); } const CSS = ` @keyframes ns-ncr-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .ns-ncr-caret { animation-name: ns-ncr-breathe; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @media (prefers-reduced-motion: reduce) { .ns-ncr-caret { animation: none; } } `; export default NewsletterCadenceRail; 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"}]]}],["$","div","error",{"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":["--","error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ea001d"}]]}]]}],["$","$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"}]]}],["$","div","error",{"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":["--","error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ff6369"}]]}]]}],["$","$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/core/newsletter-cadence-rail/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/newsletter-cadence-rail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]