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:T4da2,"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)); } export interface StackedNotification { id: string; text: string; time: string; unread?: boolean; } export interface AppShellStackedProps { brand?: string; nav?: string[]; tabs?: string[]; page?: { title: string; breadcrumb: string[]; status: string; meta: string }; notifications?: StackedNotification[]; user?: { name: string; email: string; avatar?: string }; children?: React.ReactNode; 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)", top: "#0E0E0E", band: "#111111", main: "#141414", border: "rgba(255,255,255,0.08)", chip: "rgba(255,255,255,0.06)", hover: "rgba(255,255,255,0.045)", skel: "rgba(255,255,255,0.045)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#FB923C", green: "#4ADE80", ring: "rgba(245,244,241,0.6)", pop: "#181818", shadow: "0 20px 50px -16px rgba(0,0,0,0.8)" }, light: { bg: "#F4F4F1", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", top: "#FFFFFF", band: "#FAFAF8", main: "#FFFFFF", border: "rgba(10,10,10,0.08)", chip: "rgba(10,10,10,0.05)", hover: "rgba(10,10,10,0.035)", skel: "rgba(10,10,10,0.05)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#EA580C", green: "#15803D", ring: "rgba(10,10,10,0.5)", pop: "#FFFFFF", shadow: "0 20px 50px -20px rgba(0,0,0,0.25)" }, }; const DEFAULT_NOTIFS: StackedNotification[] = [ { id: "n1", text: "Daniel approved the Q4 budget", time: "5m", unread: true }, { id: "n2", text: "Lena commented on Brand refresh", time: "1h", unread: true }, { id: "n3", text: "Weekly report is ready", time: "Yesterday" }, ]; const DEFAULT_PAGE = { title: "Website v3 launch", breadcrumb: ["Projects", "Marketing"], status: "On track", meta: "Updated 12 minutes ago by Mara" }; const DEFAULT_USER = { name: "Mara Okafor", email: "mara@nexora.io", avatar: "/demo/44.webp" }; export function AppShellStacked({ brand = "Nexora", nav = ["Dashboard", "Projects", "Team", "Calendar", "Reports"], tabs = ["Overview", "Tasks", "Files", "Activity", "Settings"], page = DEFAULT_PAGE, notifications = DEFAULT_NOTIFS, user = DEFAULT_USER, children, theme = "dark", className }: AppShellStackedProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [navActive, setNavActive] = React.useState(nav[1] ?? nav[0]); const [tab, setTab] = React.useState(tabs[0]); const [menu, setMenu] = React.useState<"notif" | "user" | null>(null); const [mobile, setMobile] = React.useState(false); const [notifs, setNotifs] = React.useState(notifications); const [starred, setStarred] = React.useState(false); React.useEffect(() => { if (!menu && !mobile) return; const down = (e: MouseEvent) => { if (!(e.target as HTMLElement).closest("[data-menu]")) setMenu(null); }; const key = (e: KeyboardEvent) => { if (e.key === "Escape") { setMenu(null); setMobile(false); } }; document.addEventListener("mousedown", down); document.addEventListener("keydown", key); return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); }; }, [menu, mobile]); const unread = notifs.filter((n) => n.unread).length; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.top } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const iconBtn = cn("relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent hover:bg-[var(--st-h)]", focus); const avatar = (size: number) => user.avatar ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( {user.name[0]} ); return (

{/* Top bar */}

{brand}

{menu === "notif" && ( )}

{menu === "user" && (

{/* Mobile nav */} {mobile && (

{avatar(32)} {user.name} {user.email}

)} {/* Page header */}

{page.title}

{page.meta}

{tabs.map((t) => ( ))}

{/* Content */}

{children ?? (

); } export default AppShellStacked; 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/app-shell-stacked/app-shell-stacked.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]

{page.title} setStarred((s) => !s)} className={cn("flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent", focus)} style={{ color: starred ? "#FBBF24" : p.faint, ...ring }}>

{page.title}