61: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"] 62: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"] 63:T3c9e,"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)); } interface Setting { id: string; label: string; hint: string; default: boolean; beta?: boolean; restart?: boolean; sub?: { id: string; label: string; options: string[]; default: string }; } export interface SettingsToggleListProps { sections?: { id: string; title: string; settings: Setting[] }[]; onChange?: (id: string, value: boolean | string) => 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.08)", input: "#0D0D0D", track: "rgba(255,255,255,0.12)", mark: "rgba(250,204,21,0.3)", 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.09)", input: "#FAFAF8", track: "rgba(10,10,10,0.14)", mark: "rgba(250,204,21,0.45)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#2563EB", green: "#15803D", amber: "#B45309", ring: "rgba(10,10,10,0.5)" }, }; const SECTIONS = [ { id: "general", title: "General", settings: [ { id: "autosave", label: "Auto-save", hint: "Save changes while you type", default: true, sub: { id: "autosave-every", label: "Save every", options: ["5 seconds", "30 seconds", "1 minute"], default: "30 seconds" } }, { id: "sounds", label: "Sounds", hint: "Play a sound for mentions and completed tasks", default: false }, { id: "compact", label: "Compact mode", hint: "Tighter spacing to fit more on screen", default: false }, { id: "week", label: "Week starts on Monday", hint: "Used in calendars and date pickers", default: true }, ], }, { id: "editor", title: "Editor", settings: [ { id: "spell", label: "Spell check", hint: "Underline misspelled words", default: true }, { id: "markdown", label: "Markdown shortcuts", hint: "Type # for headings and - for lists", default: true }, { id: "ai", label: "AI writing suggestions", hint: "Inline completions as you write", default: false, beta: true, sub: { id: "ai-tone", label: "Tone", options: ["Neutral", "Friendly", "Formal"], default: "Neutral" } }, ], }, { id: "privacy", title: "Privacy", settings: [ { id: "status", label: "Show when I'm online", hint: "Others see a green dot on your avatar", default: true }, { id: "read", label: "Read receipts", hint: "Let people know you've seen their message", default: true }, { id: "telemetry", label: "Share usage data", hint: "Anonymous stats that help us improve Nexora", default: true, restart: true }, ], }, { id: "labs", title: "Labs", settings: [ { id: "gpu", label: "Hardware acceleration", hint: "Use your graphics card for smoother charts", default: false, beta: true, restart: true }, { id: "cmdk", label: "New command menu", hint: "The redesigned ⌘K with actions and recent items", default: false, beta: true }, ], }, ]; function highlight(text: string, q: string, mark: string) { if (!q) return text; const i = text.toLowerCase().indexOf(q); if (i < 0) return text; return ( <> {text.slice(0, i)} {text.slice(i, i + q.length)} {text.slice(i + q.length)} ); } export function SettingsToggleList({ sections = SECTIONS, onChange, theme = "dark", className }: SettingsToggleListProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const all = sections.flatMap((s) => s.settings); const defaults = React.useMemo(() => Object.fromEntries(sections.flatMap((s) => s.settings.flatMap((x) => [[x.id, x.default], ...(x.sub ? [[x.sub.id, x.sub.default]] : [])]))) as Record, [sections]); const [values, setValues] = React.useState>(() => ({ ...defaults, sounds: true, ai: true })); const [applied, setApplied] = React.useState>(() => ({ ...defaults, sounds: true, ai: true })); const [query, setQuery] = React.useState(""); const [flash, setFlash] = React.useState(null); const [undo, setUndo] = React.useState<{ id: string; prev: boolean | string; label: string } | null>(null); React.useEffect(() => { if (!flash) return; const t = setTimeout(() => setFlash(null), 1200); return () => clearTimeout(t); }, [flash]); React.useEffect(() => { if (!undo) return; const t = setTimeout(() => setUndo(null), 4000); return () => clearTimeout(t); }, [undo]); const set = (id: string, val: boolean | string, label: string) => { setUndo({ id, prev: values[id], label }); setValues((v) => ({ ...v, [id]: val })); setFlash(id); onChange?.(id, val); }; const q = query.trim().toLowerCase(); const changed = Object.keys(values).filter((k) => values[k] !== defaults[k]).length; const pendingRestart = all.filter((x) => x.restart && values[x.id] !== applied[x.id]); 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"; return (

Preferences

Changes save as you go · {changed} changed from default

setQuery(e.target.value)} onKeyDown={(e) => e.key === "Escape" && setQuery("")} placeholder="Search settings" aria-label="Search settings" className={cn("h-9 w-full rounded-lg border pr-3 pl-8 text-[13px]", focus)} style={{ borderColor: p.border, background: p.card, color: p.text, ...ring }} />

{pendingRestart.length > 0 && (

Reload to apply {pendingRestart.length} {pendingRestart.length === 1 ? "change" : "changes"}: {pendingRestart.map((x) => x.label).join(", ")}

)}

{sections.map((s) => { const list = s.settings.filter((x) => !q || x.label.toLowerCase().includes(q) || x.hint.toLowerCase().includes(q)); if (!list.length) return null; const sectionChanged = s.settings.some((x) => values[x.id] !== defaults[x.id] || (x.sub && values[x.sub.id] !== defaults[x.sub.id])); return (

{s.title}

{sectionChanged && ( )}

0 && "border-t")} style={{ borderColor: p.border }}>

{highlight(x.label, q, p.mark)} {x.beta && ( Beta )} {x.restart && ( · needs reload )} {flash === x.id && ( ✓ Saved )}

{highlight(x.hint, q, p.mark)}

{x.sub && on && (
{x.sub.label}
)}

); })} {q && !sections.some((s) => s.settings.some((x) => x.label.toLowerCase().includes(q) || x.hint.toLowerCase().includes(q))) && (

No settings match “{query}”

)}

{undo && ( {undo.label} {typeof values[undo.id] === "boolean" ? (values[undo.id] ? "on" : "off") : `set to ${values[undo.id]}`} )}

); } export default SettingsToggleList; 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/settings-toggle-list/settings-toggle-list.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]