{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "activity-feed",
  "title": "Activity Feed",
  "type": "registry:block",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/activity-feed/activity-feed.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/relative-time/relative-time'\nimport '../../components/section-card/section-card'\nimport '../../components/timeline/timeline'\n\n/**\n * <uip-activity-feed> — the registry ActivityFeed block as a web component.\n *\n * Class strings are React's ActivityFeed verbatim. Every row is spelled out\n * inline as in React (actor, verb, optional comment, relative time) — no\n * items wrapper, per the block boundary rules. Timestamps are pinned to the\n * same fixed `now` as React so the relative labels match the demo.\n */\nexport class UipActivityFeed extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'activity-feed')\n  }\n\n  render() {\n    const now = '2026-08-14T12:00:00.000Z'\n    return html`\n      <uip-section-card data-slot=\"activity-feed\" heading=\"Activity\" description=\"Latest changes on this record.\">\n        <uip-timeline>\n          <uip-timeline-item status=\"success\">\n            <uip-timeline-media variant=\"avatar\">\n              <uip-avatar size=\"sm\">\n                <uip-avatar-fallback size=\"sm\" class=\"text-foreground\">MC</uip-avatar-fallback>\n              </uip-avatar>\n            </uip-timeline-media>\n            <uip-timeline-content>\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              <uip-relative-time\n                date=\"2026-08-14T11:18:00.000Z\"\n                now=${now}\n                locale=\"en\"\n                class=\"mt-0.5 block text-xs\"\n              ></uip-relative-time>\n            </uip-timeline-content>\n          </uip-timeline-item>\n\n          <uip-timeline-item status=\"info\">\n            <uip-timeline-media variant=\"avatar\">\n              <uip-avatar size=\"sm\">\n                <uip-avatar-fallback size=\"sm\" class=\"text-foreground\">OF</uip-avatar-fallback>\n              </uip-avatar>\n            </uip-timeline-media>\n            <uip-timeline-content>\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              <uip-relative-time\n                date=\"2026-08-14T10:04:00.000Z\"\n                now=${now}\n                locale=\"en\"\n                class=\"mt-0.5 block text-xs\"\n              ></uip-relative-time>\n            </uip-timeline-content>\n          </uip-timeline-item>\n\n          <uip-timeline-item status=\"muted\">\n            <uip-timeline-media variant=\"avatar\">\n              <uip-avatar size=\"sm\">\n                <uip-avatar-fallback size=\"sm\" class=\"text-foreground\">PS</uip-avatar-fallback>\n              </uip-avatar>\n            </uip-timeline-media>\n            <uip-timeline-content>\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              <uip-relative-time\n                date=\"2026-08-13T16:40:00.000Z\"\n                now=${now}\n                locale=\"en\"\n                class=\"mt-0.5 block text-xs\"\n              ></uip-relative-time>\n            </uip-timeline-content>\n          </uip-timeline-item>\n\n          <uip-timeline-item status=\"muted\">\n            <uip-timeline-media variant=\"avatar\">\n              <uip-avatar size=\"sm\">\n                <uip-avatar-fallback size=\"sm\" class=\"text-foreground\">LP</uip-avatar-fallback>\n              </uip-avatar>\n            </uip-timeline-media>\n            <uip-timeline-content>\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              <uip-relative-time\n                date=\"2026-08-13T09:12:00.000Z\"\n                now=${now}\n                locale=\"en\"\n                class=\"mt-0.5 block text-xs\"\n              ></uip-relative-time>\n            </uip-timeline-content>\n          </uip-timeline-item>\n        </uip-timeline>\n      </uip-section-card>\n    `\n  }\n}\n\ncustomElements.get('uip-activity-feed') || customElements.define('uip-activity-feed', UipActivityFeed)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-activity-feed': UipActivityFeed\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/activity-feed/activity-feed.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/avatar.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/relative-time.json",
    "https://uipkge.dev/r/lit/section-card.json",
    "https://uipkge.dev/r/lit/timeline.json"
  ]
}