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:T58a5,"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 Session { id: string; device: "laptop" | "phone" | "tablet"; name: string; location: string; active: string; current?: boolean; } export interface PrivacySecuritySettingsPanelProps { sessions?: Session[]; onSignOutSession?: (id: string) => void; onDeleteAccount?: () => 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", well: "rgba(255,255,255,0.035)", border: "rgba(255,255,255,0.08)", input: "#0D0D0D", track: "rgba(255,255,255,0.1)", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", red: "#F87171", 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", well: "rgba(10,10,10,0.03)", border: "rgba(10,10,10,0.09)", input: "#FAFAF8", track: "rgba(10,10,10,0.1)", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", amber: "#B45309", red: "#DC2626", ring: "rgba(10,10,10,0.5)" }, }; const SESSIONS: Session[] = [ { id: "s1", device: "laptop", name: "Chrome on macOS", location: "Berlin, DE", active: "Active now", current: true }, { id: "s2", device: "phone", name: "iOS app", location: "Berlin, DE", active: "2 hours ago" }, { id: "s3", device: "tablet", name: "Safari on iPadOS", location: "Hamburg, DE", active: "3 days ago" }, { id: "s4", device: "laptop", name: "Firefox on Windows", location: "Lisbon, PT", active: "12 days ago" }, ]; const HISTORY = [ { ok: true, what: "Signed in · Chrome on macOS", where: "Berlin, DE", when: "Today 09:12" }, { ok: false, what: "Failed sign-in · wrong password", where: "Unknown, RO", when: "Yesterday 23:48" }, { ok: true, what: "Signed in · iOS app", where: "Berlin, DE", when: "Yesterday 08:05" }, { ok: true, what: "Password changed", where: "Berlin, DE", when: "Nov 2" }, ]; const DEVICE: Record = { laptop: "M4 5h16v11H4zM2 19h20", phone: "M8 3h8v18H8zM11 18h2", tablet: "M5 3h14v18H5zM11 18h2", }; export function PrivacySecuritySettingsPanel({ sessions: initial = SESSIONS, onSignOutSession, onDeleteAccount, theme = "dark", className }: PrivacySecuritySettingsPanelProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [checks, setChecks] = React.useState({ password: true, email: true, twofa: false, passkey: false, alerts: true }); const [busy, setBusy] = React.useState(null); const [sessions, setSessions] = React.useState(initial); const [confirmAll, setConfirmAll] = React.useState(false); const [visibility, setVisibility] = React.useState("team"); const [activity, setActivity] = React.useState(true); const [archive, setArchive] = React.useState<{ state: "idle" | "working" | "ready"; pct: number }>({ state: "idle", pct: 0 }); const [deleting, setDeleting] = React.useState(false); const [confirmText, setConfirmText] = React.useState(""); const [toast, setToast] = React.useState(null); const timers = React.useRef[]>([]); const focusOnce = React.useCallback((el: HTMLElement | null) => el?.focus({ preventScroll: true }), []); React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2200); return () => clearTimeout(t); }, [toast]); React.useEffect(() => { const list = timers.current; return () => list.forEach(clearTimeout); }, []); const score = Object.values(checks).filter(Boolean).length; const total = Object.keys(checks).length; const tone = score >= 5 ? p.green : score >= 4 ? p.green : score >= 3 ? p.amber : p.red; const enable = (k: "twofa" | "passkey", label: string) => { setBusy(k); timers.current.push( setTimeout( () => { setChecks((c) => ({ ...c, [k]: true })); setBusy(null); setToast(`${label} turned on`); }, reduce ? 0 : 900, ), ); }; const prepareArchive = () => { setArchive({ state: "working", pct: 0 }); const steps = reduce ? 1 : 10; for (let i = 1; i <= steps; i++) timers.current.push(setTimeout(() => setArchive({ state: i === steps ? "ready" : "working", pct: i / steps }), i * 160)); }; 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 btn = cn("flex h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 text-[12.5px] font-medium disabled:cursor-not-allowed disabled:opacity-40", focus); const card = "rounded-2xl border p-5"; const h3 = "m-0 text-[15px] font-semibold"; const C = 2 * Math.PI * 26; const checkRows: { k: keyof typeof checks; label: string; done: string; todo: string; action?: boolean }[] = [ { k: "password", label: "Strong password", done: "Changed 9 days ago", todo: "" }, { k: "email", label: "Recovery email", done: "l•••@halden.studio", todo: "" }, { k: "twofa", label: "Two-step verification", done: "Authenticator app", todo: "Adds a code at sign-in", action: true }, { k: "passkey", label: "Passkey", done: "This Mac", todo: "Sign in with Touch ID or Face ID", action: true }, { k: "alerts", label: "Sign-in alerts", done: "Email for new devices", todo: "" }, ]; return (

Privacy & security

Keep your account safe and decide what others can see.

{/* Score */}

{score}/{total}

{score === total ? "Excellent" : score >= 4 ? "Good" : "Needs attention"}

Security checkup

0 && "border-t")} style={{ borderColor: p.border }}> {done ? ( ) : ( )} {r.label} {done ? r.done : r.todo} {!done && r.action && ( )}

{/* Sessions */}

Where you're signed in

{sessions.length} {sessions.length === 1 ? "session" : "sessions"}

{sessions.length > 1 && (confirmAll ? ( ) : ( ))}

{sessions.map((s) => (

{s.name} {s.current && ( This device )} {s.location} · {s.active} {!s.current && ( )}

))}

› Recent sign-in activity

{h.what} {h.where} {h.when}

{/* Privacy */}

Privacy

Who can see your profile Name, title and contact details

Show my activity status Others see when you're online

Download your data {archive.state === "working" ? `Preparing archive… ${Math.round(archive.pct * 100)}%` : archive.state === "ready" ? "Ready · nexora-export.zip · 24 MB" : "Profile, projects, comments and files as a ZIP"} {archive.state === "ready" ? ( Download ) : ( )}

{archive.state === "working" && ( )}

{/* Danger */}

Delete account

Permanently removes your profile and personal files. Workspaces you own must be transferred first.

{!deleting && ( )}

{deleting && ( { e.preventDefault(); if (confirmText !== "DELETE") return; onDeleteAccount?.(); setDeleting(false); setConfirmText(""); setToast("Deletion scheduled · you have 14 days to undo"); }} > Type DELETE to confirm

setConfirmText(e.target.value)} autoComplete="off" className={cn("h-8 w-40 rounded-lg border px-2.5 font-mono text-[13px]", focus)} style={{ borderColor: p.border, background: p.input, color: p.text, ...ring }} />

)}

{toast && ( {toast} )}

); } export default PrivacySecuritySettingsPanel; 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/privacy-security-settings-panel/privacy-security-settings-panel.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]