{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "activity-feed-stream",
  "type": "registry:ui",
  "title": "Activity Feed Stream",
  "description": "Real-time telemetry event stream with status badges, user tokens, and relative timestamp indicators.",
  "category": "data",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/data/activity-feed-stream/activity-feed-stream.tsx",
      "type": "registry:ui",
      "target": "components/ui/activity-feed-stream.tsx",
      "content": "import React, { useState } from 'react';\nimport { GitCommit, Rocket, ShieldCheck } from '@phosphor-icons/react';\n\nconst INITIAL_EVENTS = [\n  { id: '1', type: 'deploy', user: 'alex.ts', text: 'Emitted production bundle to Vercel edge CDN', time: '1m ago' },\n  { id: '2', type: 'commit', user: 'nive.tsx', text: 'Refactored Dark/Light CSS tokens to @custom-variant', time: '4m ago' },\n  { id: '3', type: 'verify', user: 'kernel-bot', text: 'Validated 70 canonical component registry endpoints', time: '8m ago' },\n];\n\nexport const ActivityFeedStream: React.FC = () => {\n  const [events] = useState(INITIAL_EVENTS);\n\n  return (\n    <div className=\"w-full max-w-sm mx-auto p-4 rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/60 shadow-lg font-mono text-xs\">\n      <div className=\"flex items-center justify-between pb-3 border-b border-zinc-200 dark:border-white/10 mb-3\">\n        <span className=\"text-[10px] uppercase font-bold text-zinc-500 tracking-wider\">LIVE AUDIT STREAM</span>\n        <span className=\"flex items-center gap-1.5 text-[10px] text-emerald-500 font-bold\">\n          <span className=\"h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse\" /> STREAMING\n        </span>\n      </div>\n\n      <div className=\"space-y-2.5\">\n        {events.map((ev) => (\n          <div key={ev.id} className=\"flex items-start gap-2.5 p-2 rounded-2xl hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors\">\n            <div className=\"p-1.5 rounded-xl bg-indigo-500/10 text-indigo-500 mt-0.5\">\n              {ev.type === 'deploy' && <Rocket size={13} weight=\"bold\" />}\n              {ev.type === 'commit' && <GitCommit size={13} weight=\"bold\" />}\n              {ev.type === 'verify' && <ShieldCheck size={13} weight=\"bold\" />}\n            </div>\n            <div className=\"flex-1 truncate\">\n              <div className=\"flex items-center justify-between text-[10px]\">\n                <span className=\"font-bold text-zinc-900 dark:text-white\">@{ev.user}</span>\n                <span className=\"text-zinc-400\">{ev.time}</span>\n              </div>\n              <p className=\"text-[11px] text-zinc-600 dark:text-zinc-400 truncate mt-0.5\">{ev.text}</p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}