{title}

4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T253f,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { AnimatedIcon } from "@/components/ui/animated-icon"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge, type BadgeProps } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Empty, EmptyDescription, EmptyTitle } from "@/components/ui/empty"; import { ItemContent, ItemDescription, ItemTitle } from "@/components/ui/item"; import { MotionPresence, MotionSurface } from "@/components/ui/presence"; import { BodySecondary, Meta, Title } from "@/components/ui/typography"; export type ActivityEntry = { id: string; title: React.ReactNode; description?: React.ReactNode; actor?: { name: string; initials?: string; avatarSrc?: string }; timestamp?: React.ReactNode; /** Machine-readable time matching the caller's timestamp label. */ dateTime?: string; /** Optional visible group heading; shown where a consecutive group begins. */ group?: string; badge?: { label: React.ReactNode; variant?: BadgeProps["variant"] }; /** Additional supplied details or native actions, kept in document flow. */ content?: React.ReactNode; }; export type ActivityFeedProps = Omit< React.ComponentProps<"section">, "children" | "title" > & { /** Caller supplies the chronological order; the feed never reorders entries. */ entries: readonly ActivityEntry[]; title?: React.ReactNode; description?: React.ReactNode; empty?: React.ReactNode; /** Omit to show every supplied entry, including later appends. */ initialVisible?: number; pageSize?: number; showMoreLabel?: React.ReactNode; }; function count(value: number | undefined, fallback: number) { return value !== undefined && Number.isFinite(value) ? Math.max(1, Math.floor(value)) : fallback; } export function ActivityFeed({ entries, title, description, empty, initialVisible, pageSize = 3, showMoreLabel, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...props }: ActivityFeedProps) { const titleId = React.useId(); const listId = React.useId(); const list = React.useRef(null); const focusIndex = React.useRef(null); const [windowState, setWindowState] = React.useState(() => ({ ids: entries.map((entry) => entry.id), limit: count(initialVisible, Infinity), })); const ids = entries.map((entry) => entry.id); let limit = windowState.limit; if ( ids.length !== windowState.ids.length || ids.some((id, index) => id !== windowState.ids[index]) ) { const oldFirst = windowState.ids[0], firstIndex = ids.indexOf(oldFirst), previous = new Set(windowState.ids); const prepended = firstIndex > 0 ? ids.slice(0, firstIndex).filter((id) => !previous.has(id)).length : 0; limit += prepended; // Reconcile before committing the new list: existing entries never unmount // for a frame merely because a new update was prepended. setWindowState({ ids, limit }); } const [announcement, setAnnouncement] = React.useState(""); const visible = entries.slice(0, limit); const remaining = entries.length - visible.length; const nextPage = Math.min(remaining, count(pageSize, 3)); React.useLayoutEffect(() => { if (focusIndex.current === null) return; list.current ?.querySelectorAll("[data-activity-entry]") [focusIndex.current]?.focus(); focusIndex.current = null; }, [visible.length]); const reveal = () => { focusIndex.current = visible.length; const nextCount = visible.length + nextPage; setWindowState((value) => ({ ...value, limit: nextCount })); setAnnouncement(`${nextCount} of ${entries.length} activities shown.`); }; return (

{(title || description) && (

{title && (

{title} {entries.length}

)} {description && {description}}

)} {entries.length === 0 ? ( (empty ?? ( No activity yet Updates appear here as they are added. )) ) : ( <>

{visible.map((entry, index) => (

{entry.group && entry.group !== visible[index - 1]?.group && (

{entry.group}

)}

{entry.actor ? ( {entry.actor.avatarSrc && ( )} {entry.actor.initials ?? entry.actor.name .trim() .split(/\s+/) .slice(0, 2) .map((part) => Array.from(part)[0]) .join("")} ) : ( )}

{entry.title} {entry.badge && ( {entry.badge.label} )}

{entry.description && ( {entry.description} )} {(entry.actor || entry.timestamp) && (

{entry.actor && {entry.actor.name}} {entry.actor && entry.timestamp && ( )} {entry.timestamp && ( {entry.timestamp} )}

)} {entry.content && (

{entry.content}

)}

))}

{remaining > 0 && ( )} )} {announcement}

); } 52:Tf27,@layer cojeev-states { .v-activity-feed[data-slot] { min-width: 0; width: 100%; color: var(--v-text); background: var(--v-paper); padding: 28px; border: 1px solid var(--v-border); border-radius: 24px 24px 6px 24px; } .v-activity-feed__header { display: grid; gap: 8px; margin-block-end: 18px; } .v-activity-feed__header :is(h3, p) { margin: 0; } .v-activity-feed__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .v-activity-feed__list { display: grid; list-style: none; margin: 0; padding: 0; } .v-activity-feed__entry { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; min-width: 0; padding-block: 20px; outline-offset: 5px; } .v-activity-feed__entry::marker { content: none; } .v-activity-feed__entry + .v-activity-feed__entry { border-block-start: 0; } .v-activity-feed__entry:focus-visible { outline: 2px solid var(--v-blue); } .v-activity-feed__portrait { position: relative; display: flex; justify-content: center; padding-block-start: 2px; } .v-activity-feed__portrait::after { content: ""; position: absolute; pointer-events: none; width: 1px; background: var(--v-border); top: 42px; bottom: -24px; left: 50%; } .v-activity-feed__entry:last-child .v-activity-feed__portrait::after { display: none; } .v-activity-feed__portrait > [data-slot] { position: relative; z-index: 1; } .v-activity-feed__group { grid-column: 1/-1; color: var(--v-text-2); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--v-paper); position: relative; z-index: 1; padding: 0 0 12px; } .v-activity-feed__header .v-activity-feed__heading [data-slot="typography-title"] { font-size: 22px; letter-spacing: -0.035em; } .v-activity-feed__marker { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 43% 57% 50% 50% / 55% 44% 56% 45%; background: var(--v-beige); color: var(--v-text); } .v-activity-feed__content[data-slot] { gap: 7px; min-width: 0; } .v-activity-feed__entry-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 12px; min-width: 0; } .v-activity-feed__title[data-slot] { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; } .v-activity-feed__badge[data-slot] { flex-shrink: 0; max-width: 100%; min-height: 20px; height: auto; padding-block: 3px; white-space: normal; line-height: 1.2; } .v-activity-feed__description[data-slot] { font-size: 14px; line-height: 1.55; max-width: 68ch; overflow-wrap: anywhere; } .v-activity-feed__description :first-child { margin-block-start: 0; } .v-activity-feed__description :last-child { margin-block-end: 0; } .v-activity-feed__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--v-text-2); min-width: 0; } .v-activity-feed__meta :is(time, span) { overflow-wrap: anywhere; } .v-activity-feed__details { display: grid; gap: 8px; margin-block-start: 5px; min-width: 0; overflow-wrap: anywhere; } .v-activity-feed__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-block-start: 16px; border-block-start: 1px solid var(--v-edge); } .v-activity-feed__footer > [data-slot="button"] { min-height: 44px; width: auto; } @media (max-width: 480px) { .v-activity-feed__entry { column-gap: 12px; padding-block: 18px; } .v-activity-feed__footer { justify-content: flex-start; gap: 12px 20px; } } @media (max-width: 600px) { .v-activity-feed[data-slot] { padding: 20px; } } .v-activity-example { width: 100%; min-width: 0; display: grid; gap: 22px; } } 4c:["$","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":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/animated-icon.json","https://000h.cojeev.com/r/avatar.json","https://000h.cojeev.com/r/badge.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/empty.json","https://000h.cojeev.com/r/item.json","https://000h.cojeev.com/r/presence.json","https://000h.cojeev.com/r/typography.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/activity-feed.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/activity-feed.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/activity-feed.css","content":"$52","type":"registry:file","target":"styles/cojeev/activity-feed.css"}],"className":"h-[70svh] min-h-80"}]]}]