63: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"] 64: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"] 65:T5590,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type Channel = "app" | "email" | "push"; type Digest = "instant" | "hourly" | "daily" | "weekly"; type Matrix = Record>; export interface NotificationPrefs { matrix: Matrix; digest: Digest; quiet: { on: boolean; from: string; to: string; days: number[] }; } export interface NotificationPreferencesPanelProps { defaultValue?: NotificationPrefs; onSave?: (prefs: NotificationPrefs) => Promise | void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", menu: "#1A1A1A", border: "rgba(255,255,255,0.09)", row: "rgba(255,255,255,0.025)", input: "#0D0D0D", track: "rgba(255,255,255,0.1)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#60A5FA", green: "#4ADE80", amber: "#FBBF24", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.42)", card: "#FFFFFF", menu: "#FFFFFF", border: "rgba(10,10,10,0.1)", row: "rgba(10,10,10,0.02)", input: "#FAFAF8", track: "rgba(10,10,10,0.12)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#2563EB", green: "#15803D", amber: "#B45309", ring: "rgba(10,10,10,0.5)" }, }; const CHANNELS: { id: Channel; label: string }[] = [ { id: "app", label: "In-app" }, { id: "email", label: "Email" }, { id: "push", label: "Push" }, ]; const GROUPS: { title: string; events: { id: string; label: string; hint: string; locked?: boolean }[] }[] = [ { title: "Activity", events: [ { id: "mentions", label: "Mentions", hint: "Someone @mentions you" }, { id: "comments", label: "Comments", hint: "Replies on things you follow" }, { id: "assigned", label: "Assigned to you", hint: "Tasks and reviews" }, ], }, { title: "Projects", events: [ { id: "status", label: "Status changes", hint: "Projects you're on move stage" }, { id: "due", label: "Due soon", hint: "24 hours before a deadline" }, ], }, { title: "Account", events: [ { id: "security", label: "Security alerts", hint: "New sign-ins and password changes", locked: true }, { id: "billing", label: "Billing", hint: "Invoices and failed payments" }, ], }, ]; const ALL_EVENTS = GROUPS.flatMap((g) => g.events); const row = (app: boolean, email: boolean, push: boolean) => ({ app, email, push }); const DEFAULT: NotificationPrefs = { matrix: { mentions: row(true, true, true), comments: row(true, false, false), assigned: row(true, true, true), status: row(true, false, false), due: row(true, true, false), security: row(true, true, true), billing: row(false, true, false) }, digest: "daily", quiet: { on: true, from: "20:00", to: "08:00", days: [5, 6] }, }; const DAYS = ["M", "T", "W", "T", "F", "S", "S"]; const DAY_NAMES = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]; const TIMES = Array.from({ length: 24 }, (_, h) => `${String(h).padStart(2, "0")}:00`); const PAUSES = [ ["1 hour", "until 11:42"], ["Until tomorrow", "until 09:00 tomorrow"], ["1 week", "until Nov 19"], ] as const; export function NotificationPreferencesPanel({ defaultValue = DEFAULT, onSave, theme = "dark", className }: NotificationPreferencesPanelProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [saved, setSaved] = React.useState(defaultValue); const [v, setV] = React.useState(defaultValue); const [paused, setPaused] = React.useState(null); const [pauseOpen, setPauseOpen] = React.useState(false); const [test, setTest] = React.useState(0); const [status, setStatus] = React.useState<"idle" | "saving" | "saved">("idle"); const timer = React.useRef | null>(null); React.useEffect(() => { if (!test) return; const t = setTimeout(() => setTest(0), 3200); return () => clearTimeout(t); }, [test]); React.useEffect(() => { if (status !== "saved") return; const t = setTimeout(() => setStatus("idle"), 1800); return () => clearTimeout(t); }, [status]); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const dirty = JSON.stringify(v) !== JSON.stringify(saved); const set = (id: string, ch: Channel, on: boolean) => setV((s) => ({ ...s, matrix: { ...s.matrix, [id]: { ...s.matrix[id], [ch]: on } } })); const colState = (ch: Channel) => { const editable = ALL_EVENTS.filter((e) => !e.locked); const n = editable.filter((e) => v.matrix[e.id][ch]).length; return n === 0 ? "none" : n === editable.length ? "all" : "some"; }; const setCol = (ch: Channel, on: boolean) => setV((s) => ({ ...s, matrix: Object.fromEntries(Object.entries(s.matrix).map(([id, r]) => [id, ALL_EVENTS.find((e) => e.id === id)?.locked ? r : { ...r, [ch]: on }])) })); const save = () => { if (!dirty || status === "saving") return; setStatus("saving"); const snap = v; const done = () => { setSaved(snap); setStatus("saved"); }; const r = onSave?.(snap); if (r instanceof Promise) r.then(done, () => setStatus("idle")); else timer.current = setTimeout(done, reduce ? 0 : 700); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const box = (on: boolean, mixed = false, disabled = false) => ( ); const card = "rounded-2xl border"; return (

Notifications

Choose what reaches you, and where.

{pauseOpen && ( )}

{paused && (

Notifications paused {paused}. Security alerts still come through.

)} {/* Matrix */}

{CHANNELS.map((c) => { const st = colState(c.id); return ( ); })} {GROUPS.map((g) => ( {g.events.map((e) => ( {CHANNELS.map((c) => { const on = v.matrix[e.id][c.id]; return ( ); })} ))} ))}

Event	{c.label} { if (el) el.indeterminate = st === "some"; }} onChange={() => setCol(c.id, st !== "all")} aria-label={`All ${c.label}`} /> {box(st === "all", st === "some")}
{g.title}
{e.label} {e.locked && ( )} {e.hint}	set(e.id, c.id, !on)} aria-label={`${e.label} by ${c.label}`} /> {box(on, false, e.locked)}

{/* Digest + quiet hours */}

Email frequency

Bundle emails instead of one per event.

{(["instant", "hourly", "daily", "weekly"] as const).map((d) => ( ))}

{v.digest === "instant" ? "Emails go out as things happen." : v.digest === "hourly" ? "At most one email an hour." : v.digest === "daily" ? "One summary at 8:00 each morning." : "One summary every Monday at 8:00."}

Quiet hours

No push notifications during these times.

{(["from", "to"] as const).map((k, i) => ( {i === 1 && –} ))} and all day

{DAYS.map((d, i) => { const on = v.quiet.days.includes(i); return ( ); })}

{/* Save bar */} {(dirty || status !== "idle") && (

{!dirty ? "✓ Preferences saved" : "Unsaved changes"}

{dirty && (

)}

)} {/* Test notification */} {test > 0 && ( N Mia mentioned you · now {paused ? "This is how it looks. Real ones are paused." : "“Can you check the Q4 numbers before the board call?”"} )}

); } export default NotificationPreferencesPanel; 62:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L63",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/new-york/notification-preferences-panel/notification-preferences-panel.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]