60: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"] 61: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"] 62:T6191,"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 type ActivityKind = "comment" | "status" | "file" | "mention" | "join" | "deploy"; export interface ActivityItem { id: string; kind: ActivityKind; actor: { name: string; avatar?: string }; /** Short verb phrase, e.g. "commented on". */ action: string; target: string; /** ISO time. */ time: string; comment?: string; from?: string; to?: string; file?: { name: string; size: string }; reactions?: Record; unread?: boolean; } export interface ActivityFeedProps { title?: string; items?: ActivityItem[]; /** Items that arrive while the feed is open (demo). They queue behind a "new activity" pill. */ incoming?: ActivityItem[]; /** Milliseconds between incoming items. */ interval?: number; /** Now, for relative times. */ now?: string; currentUser?: string; onReply?: (id: string, text: 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", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", hover: "rgba(255,255,255,0.03)", on: "#F5F4F1", onText: "#0A0A0A", accent: "#FB923C", quote: "rgba(255,255,255,0.04)", ring: "rgba(245,244,241,0.6)", input: "#0D0D0D" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", hover: "rgba(10,10,10,0.02)", on: "#0A0A0A", onText: "#FAFAF8", accent: "#EA580C", quote: "rgba(10,10,10,0.03)", ring: "rgba(10,10,10,0.5)", input: "#FAFAF8" }, }; const KIND: Record = { comment: { color: "#60A5FA", label: "Comment" }, status: { color: "#A78BFA", label: "Update" }, file: { color: "#FBBF24", label: "File" }, mention: { color: "#FB923C", label: "Mention" }, join: { color: "#4ADE80", label: "Team" }, deploy: { color: "#2DD4BF", label: "Deploy" }, }; const STATUS_COLOR: Record = { Todo: "#9CA3AF", "In progress": "#60A5FA", "In review": "#FBBF24", Done: "#4ADE80", Blocked: "#F87171" }; const at = (min: number) => new Date(Date.parse("2026-11-01T15:00:00Z") - min * 60000).toISOString(); const DEFAULT_ITEMS: ActivityItem[] = [ { id: "a1", kind: "mention", actor: { name: "Mara Okafor", avatar: "/demo/44.webp" }, action: "mentioned you in", target: "Q4 launch plan", time: at(4), comment: "@you can you double-check the pricing copy before Thursday? The annual discount still says 15%.", reactions: { "👀": 2 }, unread: true }, { id: "a2", kind: "status", actor: { name: "Daniel Reyes", avatar: "/demo/42.webp" }, action: "moved", target: "Checkout redesign", time: at(26), from: "In review", to: "Done", unread: true }, { id: "a3", kind: "file", actor: { name: "Lena Brandt", avatar: "/demo/55.webp" }, action: "uploaded a file to", target: "Brand refresh", time: at(58), file: { name: "logo-variants-v3.fig", size: "18.4 MB" }, reactions: { "🔥": 4, "👍": 1 } }, { id: "a4", kind: "comment", actor: { name: "Tomás Ferreira", avatar: "/demo/43.webp" }, action: "commented on", target: "API rate limits", time: at(95), comment: "Burst limit of 50 req/s works for every customer we checked. Shipping it behind a flag first.", reactions: { "👍": 3 } }, { id: "a5", kind: "deploy", actor: { name: "ci-deploy" }, action: "deployed", target: "web v3.8.2 to production", time: at(140) }, { id: "a6", kind: "status", actor: { name: "Mara Okafor", avatar: "/demo/44.webp" }, action: "moved", target: "Onboarding emails", time: at(60 * 20), from: "Todo", to: "In progress" }, { id: "a7", kind: "join", actor: { name: "Noor Haddad", avatar: "/demo/46.webp" }, action: "joined", target: "the Design team", time: at(60 * 23), reactions: { "👋": 6 } }, { id: "a8", kind: "comment", actor: { name: "Lena Brandt", avatar: "/demo/55.webp" }, action: "commented on", target: "Brand refresh", time: at(60 * 26), comment: "Option B reads better at small sizes. Let's test it on the app icon too." }, { id: "a9", kind: "status", actor: { name: "Daniel Reyes", avatar: "/demo/42.webp" }, action: "marked", target: "Payment retries", time: at(60 * 50), from: "In progress", to: "Blocked" }, ]; const DEFAULT_INCOMING: ActivityItem[] = [ { id: "n1", kind: "comment", actor: { name: "Noor Haddad", avatar: "/demo/46.webp" }, action: "commented on", target: "Checkout redesign", time: at(0), comment: "Looks great on mobile. One nit: the coupon field jumps when it validates.", unread: true }, { id: "n2", kind: "file", actor: { name: "Tomás Ferreira", avatar: "/demo/43.webp" }, action: "uploaded a file to", target: "API rate limits", time: at(0), file: { name: "load-test-results.csv", size: "240 KB" }, unread: true }, { id: "n3", kind: "status", actor: { name: "Lena Brandt", avatar: "/demo/55.webp" }, action: "moved", target: "Brand refresh", time: at(0), from: "In progress", to: "In review", unread: true }, ]; function rel(iso: string, now: string) { const m = Math.max(0, Math.round((Date.parse(now) - Date.parse(iso)) / 60000)); if (m < 1) return "just now"; if (m < 60) return `${m}m ago`; const h = Math.round(m / 60); if (h < 24) return `${h}h ago`; return `${Math.round(h / 24)}d ago`; } function dayLabel(iso: string, now: string) { const d = Math.floor(Date.parse(now) / 864e5) - Math.floor(Date.parse(iso) / 864e5); if (d <= 0) return "Today"; if (d === 1) return "Yesterday"; const dt = new Date(iso); return `${dt.getUTCDate()} ${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][dt.getUTCMonth()]}`; } type Tab = "all" | "comment" | "status" | "mention"; export function ActivityFeed({ title = "Activity", items, incoming = DEFAULT_INCOMING, interval = 3500, now: nowProp = "2026-11-01T15:00:00Z", currentUser = "You", onReply, theme = "dark", className }: ActivityFeedProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [list, setList] = React.useState(() => items ?? DEFAULT_ITEMS); const [queue, setQueue] = React.useState([]); const [tab, setTab] = React.useState("all"); const [mine, setMine] = React.useState>({}); const [replyOpen, setReplyOpen] = React.useState(null); const [replies, setReplies] = React.useState>({}); const [fresh, setFresh] = React.useState([]); const [now, setNow] = React.useState(nowProp); const sent = React.useRef(0); React.useEffect(() => { if (!incoming.length) return; const t = setInterval(() => { const next = incoming[sent.current]; if (!next) return clearInterval(t); sent.current += 1; setNow((n) => new Date(Date.parse(n) + 60000).toISOString()); setQueue((q) => [{ ...next, id: `${next.id}-${sent.current}` }, ...q]); }, interval); return () => clearInterval(t); }, [incoming, interval]); const showNew = () => { const stamped = queue.map((q) => ({ ...q, time: now })); setFresh(stamped.map((q) => q.id)); setList((l) => [...stamped, ...l]); setQueue([]); }; const unread = list.filter((x) => x.unread).length; const match = (x: ActivityItem) => tab === "all" || x.kind === tab || (tab === "comment" && x.kind === "mention"); const rows = list.filter(match); const groups: { day: string; items: ActivityItem[] }[] = []; rows.forEach((x) => { const d = dayLabel(x.time, now); const g = groups[groups.length - 1]; if (g && g.day === d) g.items.push(x); else groups.push({ day: d, items: [x] }); }); const counts: Record = { all: list.length, comment: list.filter((x) => x.kind === "comment" || x.kind === "mention").length, status: list.filter((x) => x.kind === "status").length, mention: list.filter((x) => x.kind === "mention").length }; const react = (id: string, emoji: string) => setMine((m) => ({ ...m, [id]: (m[id] ?? []).includes(emoji) ? (m[id] ?? []).filter((e) => e !== emoji) : [...(m[id] ?? []), emoji] })); const focusReply = React.useCallback((el: HTMLInputElement | null) => el?.focus({ preventScroll: true }), []); 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 avatar = (a: ActivityItem["actor"], size = 32) => a.avatar ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( ); const statusPill = (s: string) => ( ); return (

{title} {unread > 0 && ( {unread} unread )}

{( [ ["all", "All"], ["comment", "Comments"], ["status", "Updates"], ["mention", "Mentions"], ] as [Tab, string][] ).map(([id, label]) => ( ))}

{queue.length > 0 && ( )}

{groups.map((g) => (

{g.day}

{g.items.map((x, i) => { const k = KIND[x.kind]; const my = mine[x.id] ?? []; const reacts = { ...(x.reactions ?? {}) }; my.forEach((e) => (reacts[e] = (reacts[e] ?? 0) + 1)); const last = i === g.items.length - 1; return ( {!last && } {avatar(x.actor)}

{x.actor.name} {" "} {x.action}{" "} e.preventDefault()} className={cn("rounded font-medium underline-offset-2 hover:underline", focus)} style={{ color: p.text, ...ring }}> {x.target} {rel(x.time, now)} {x.unread && }

{x.from && x.to && (

{statusPill(x.from)} {statusPill(x.to)}

)} {x.comment && (

{x.comment.split(/(@\w+)/).map((s, j) => s.startsWith("@") ? ( {s === "@you" ? `@${currentUser}` : s} ) : ( s ), )}

)} {x.file && ( e.preventDefault()} className={cn("mt-2 flex w-fit max-w-full items-center gap-2.5 rounded-xl border px-3 py-2", focus)} style={{ borderColor: p.border, color: p.text, ...ring }}> {x.file.name} {x.file.size} )} {(replies[x.id] ?? []).map((r, j) => (

{currentUser} {r}

))}

{Object.entries(reacts).map(([e, n]) => ( ))} {!reacts["👍"] && ( )} {(x.kind === "comment" || x.kind === "mention") && ( )}

{replyOpen === x.id && ( { e.preventDefault(); const input = e.currentTarget.elements.namedItem("reply") as HTMLInputElement; const text = input.value.trim(); if (!text) return; setReplies((r) => ({ ...r, [x.id]: [...(r[x.id] ?? []), text] })); onReply?.(x.id, text); setReplyOpen(null); }} >

e.key === "Escape" && setReplyOpen(null)} className={cn("h-9 min-w-0 flex-1 rounded-lg border px-3 text-[13px]", focus)} style={{ borderColor: p.border, background: p.input, color: p.text, ...ring }} />

)}

); })}

))} {rows.length === 0 && (

Nothing here yet.

)}

); } export default ActivityFeed; 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/new-york/activity-feed/activity-feed.tsx","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]