{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "activity-feed",
  "title": "Activity Feed",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/activity-feed/ActivityFeed.svelte",
      "content": "<script lang=\"ts\">\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import { RelativeTime } from '$lib/components/ui/relative-time'\n  import { SectionCard } from '$lib/components/ui/section-card'\n  import { Timeline, TimelineContent, TimelineItem, TimelineMedia } from '$lib/components/ui/timeline'\n\n  const now = new Date('2026-08-14T12:00:00.000Z')\n</script>\n\n<SectionCard data-slot=\"activity-feed\" title=\"Activity\" description=\"Latest changes on this record.\">\n  <Timeline>\n    <TimelineItem status=\"success\">\n      <TimelineMedia variant=\"avatar\">\n        <Avatar size=\"sm\">\n          <AvatarFallback size=\"sm\" class=\"text-foreground\">MC</AvatarFallback>\n        </Avatar>\n      </TimelineMedia>\n      <TimelineContent>\n        <p class=\"text-sm\">\n          <span class=\"font-medium\">Maya Chen</span>\n          <span class=\"text-muted-foreground\"> approved the leave request</span>\n        </p>\n        <RelativeTime date=\"2026-08-14T11:18:00.000Z\" {now} locale=\"en\" class=\"mt-0.5 block text-xs\" />\n      </TimelineContent>\n    </TimelineItem>\n\n    <TimelineItem status=\"info\">\n      <TimelineMedia variant=\"avatar\">\n        <Avatar size=\"sm\">\n          <AvatarFallback size=\"sm\" class=\"text-foreground\">OF</AvatarFallback>\n        </Avatar>\n      </TimelineMedia>\n      <TimelineContent>\n        <p class=\"text-sm\">\n          <span class=\"font-medium\">Omar Farid</span>\n          <span class=\"text-muted-foreground\"> added a comment</span>\n        </p>\n        <p class=\"text-muted-foreground mt-1 text-sm\">Coverage is confirmed for Thursday and Friday.</p>\n        <RelativeTime date=\"2026-08-14T10:04:00.000Z\" {now} locale=\"en\" class=\"mt-0.5 block text-xs\" />\n      </TimelineContent>\n    </TimelineItem>\n\n    <TimelineItem status=\"muted\">\n      <TimelineMedia variant=\"avatar\">\n        <Avatar size=\"sm\">\n          <AvatarFallback size=\"sm\" class=\"text-foreground\">PS</AvatarFallback>\n        </Avatar>\n      </TimelineMedia>\n      <TimelineContent>\n        <p class=\"text-sm\">\n          <span class=\"font-medium\">Priya Shah</span>\n          <span class=\"text-muted-foreground\"> updated the title to “Q3 planning offsite”</span>\n        </p>\n        <RelativeTime date=\"2026-08-13T16:40:00.000Z\" {now} locale=\"en\" class=\"mt-0.5 block text-xs\" />\n      </TimelineContent>\n    </TimelineItem>\n\n    <TimelineItem status=\"muted\">\n      <TimelineMedia variant=\"avatar\">\n        <Avatar size=\"sm\">\n          <AvatarFallback size=\"sm\" class=\"text-foreground\">LP</AvatarFallback>\n        </Avatar>\n      </TimelineMedia>\n      <TimelineContent>\n        <p class=\"text-sm\">\n          <span class=\"font-medium\">Leo Park</span>\n          <span class=\"text-muted-foreground\"> opened this request</span>\n        </p>\n        <RelativeTime date=\"2026-08-13T09:12:00.000Z\" {now} locale=\"en\" class=\"mt-0.5 block text-xs\" />\n      </TimelineContent>\n    </TimelineItem>\n  </Timeline>\n</SectionCard>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/activity-feed/ActivityFeed.svelte"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/relative-time.json",
    "https://uipkge.dev/r/svelte/section-card.json",
    "https://uipkge.dev/r/svelte/timeline.json"
  ],
  "description": "Record activity as a Timeline of avatar rows. Each row is spelled out inline — actor, verb, optional comment, relative time. Edit the rows after install; no items wrapper.",
  "categories": [
    "productivity",
    "dashboard"
  ]
}