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:T4b83,"use client"; import * as React from "react"; import { AnimatePresence, LayoutGroup, 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 View = "list" | "board" | "gallery"; type Status = "Backlog" | "In progress" | "Review" | "Done"; type Priority = "Low" | "Medium" | "High"; export interface ViewItem { id: string; title: string; status: Status; owner: string; priority: Priority; due: string; // YYYY-MM-DD cover: string; } export interface MultiViewSwitcherProps { items?: ViewItem[]; defaultView?: View; onItemsChange?: (items: ViewItem[]) => 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)", panel: "#0E0E0E", card: "#141414", col: "#101010", border: "rgba(255,255,255,0.08)", hover: "rgba(255,255,255,0.05)", on: "#F5F4F1", onText: "#0A0A0A", 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.4)", panel: "#F4F4F1", card: "#FFFFFF", col: "#F2F2EF", border: "rgba(10,10,10,0.09)", hover: "rgba(10,10,10,0.04)", on: "#0A0A0A", onText: "#FAFAF8", ring: "rgba(10,10,10,0.5)" }, }; const STATUSES: Status[] = ["Backlog", "In progress", "Review", "Done"]; const STATUS_COLOR: Record = { Backlog: "#A1A1AA", "In progress": "#60A5FA", Review: "#FBBF24", Done: "#34D399" }; const PRIORITY_RANK: Record = { High: 0, Medium: 1, Low: 2 }; const OWNERS: Record = { "Lena Brandt": "#60A5FA", "Daniel Reyes": "#F472B6", "Mia Okafor": "#A78BFA", "Tomás Ferreira": "#34D399" }; const ITEMS: ViewItem[] = [ { id: "t1", title: "Pricing page redesign", status: "In progress", owner: "Mia Okafor", priority: "High", due: "2026-11-14", cover: "#6366F1" }, { id: "t2", title: "Onboarding email series", status: "Review", owner: "Lena Brandt", priority: "Medium", due: "2026-11-12", cover: "#0EA5E9" }, { id: "t3", title: "SSO for Team plan", status: "In progress", owner: "Daniel Reyes", priority: "High", due: "2026-11-20", cover: "#F43F5E" }, { id: "t4", title: "Usage export to CSV", status: "Done", owner: "Tomás Ferreira", priority: "Low", due: "2026-11-06", cover: "#10B981" }, { id: "t5", title: "Churn dashboard", status: "Backlog", owner: "Lena Brandt", priority: "Medium", due: "2026-11-28", cover: "#F59E0B" }, { id: "t6", title: "Mobile nav polish", status: "Review", owner: "Mia Okafor", priority: "Low", due: "2026-11-13", cover: "#A855F7" }, { id: "t7", title: "Webhook retries", status: "Backlog", owner: "Daniel Reyes", priority: "High", due: "2026-11-24", cover: "#14B8A6" }, { id: "t8", title: "Customer stories page", status: "Done", owner: "Tomás Ferreira", priority: "Medium", due: "2026-11-04", cover: "#EC4899" }, ]; const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; const dueLabel = (d: string) => `${MONTHS[Number(d.slice(5, 7)) - 1]} ${Number(d.slice(8))}`; const initials = (n: string) => n .split(" ") .map((w) => w[0]) .join(""); const VIEW_ICONS: Record = { list: "M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01", board: "M4 4h4v16H4zM10 4h4v10h-4zM16 4h4v13h-4z", gallery: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z", }; export function MultiViewSwitcher({ items: initial = ITEMS, defaultView = "list", onItemsChange, theme = "dark", className }: MultiViewSwitcherProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [items, setItems] = React.useState(initial); const [view, setView] = React.useState(defaultView); const [query, setQuery] = React.useState(""); const [owners, setOwners] = React.useState([]); const [sort, setSort] = React.useState<"due" | "priority" | "title">("due"); const [openId, setOpenId] = React.useState(null); const rootRef = React.useRef(null); React.useEffect(() => { const onKey = (e: KeyboardEvent) => { if ((e.target as HTMLElement).closest("input, textarea, select")) return; if (!rootRef.current?.contains(document.activeElement) && document.activeElement !== document.body) return; const v = ({ "1": "list", "2": "board", "3": "gallery" } as Record)[e.key]; if (v) setView(v); if (e.key === "Escape") setOpenId(null); }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); const shown = items .filter((i) => (!owners.length || owners.includes(i.owner)) && i.title.toLowerCase().includes(query.trim().toLowerCase())) .sort((a, b) => (sort === "due" ? a.due.localeCompare(b.due) : sort === "priority" ? PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority] || a.due.localeCompare(b.due) : a.title.localeCompare(b.title))); const open = items.find((i) => i.id === openId) ?? null; const setStatus = (id: string, status: Status) => { const next = items.map((i) => (i.id === id ? { ...i, status } : i)); setItems(next); onItemsChange?.(next); }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const layout = reduce ? undefined : { type: "spring" as const, stiffness: 420, damping: 38 }; const avatar = (o: string, size = 22) => ( {initials(o)} ); const statusPill = (s: Status) => ( {s} ); const prio = (pr: Priority) => ( {[0, 1, 2].map((i) => ( ))} ); // One card element per item; the same layoutId in every view lets it fly to its new place. const card = (i: ViewItem, kind: View) => ( setOpenId(i.id)} aria-label={`${i.title}, ${i.status}, ${i.owner}, due ${dueLabel(i.due)}`} className={cn("relative flex w-full min-w-0 cursor-pointer overflow-hidden border text-left", focus, kind === "list" ? "items-center gap-3 rounded-lg px-3 py-2.5" : kind === "board" ? "flex-col gap-2.5 rounded-xl p-3" : "flex-col rounded-xl")} style={{ background: p.card, borderColor: openId === i.id ? p.on : p.border, color: p.text, ...ring }} > {kind === "gallery" && } {kind === "list" && } {i.title} {kind === "gallery" && statusPill(i.status)} {kind !== "gallery" && prio(i.priority)} {dueLabel(i.due)} {avatar(i.owner)} ); const empty = (

Nothing matches. Clear the search or owner filter.

); return (

Q4 roadmap

{shown.length} of {items.length} items · {items.filter((i) => i.status === "Done").length} done

{(["list", "board", "gallery"] as const).map((v, n) => ( ))}

{/* Filters */}

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

{Object.keys(OWNERS).map((o) => { const on = owners.includes(o); return ( ); })} {owners.length > 0 && ( )}

Sort

{/* Views */}

{!shown.length ? ( empty ) : view === "list" ? (

{STATUSES.map((s) => { const list = shown.filter((i) => i.status === s); if (!list.length) return null; return (

{s} {list.length}

{list.map((i) => card(i, "list"))}

); })}

) : view === "board" ? (

{STATUSES.map((s) => { const list = shown.filter((i) => i.status === s); return (

{s} {list.length}

{list.map((i) => card(i, "board"))} {!list.length && ( Empty )}

); })}

) : (

{shown.map((i) => card(i, "gallery"))}

)} {/* Details */} {open && (

{open.title}

Owner: {avatar(open.owner, 20)} {open.owner}
Due: {dueLabel(open.due)}
Priority: {prio(open.priority)} {open.priority}

Status

{STATUSES.map((s) => ( ))}

)}

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