{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "live-dashboard",
  "title": "Live Dashboard",
  "description": "Studio status board with editable CONTENT projects.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@atroui/utils",
    "@atroui/fade-in"
  ],
  "files": [
    {
      "path": "registry/default/blocks/live-dashboard.tsx",
      "content": "\"use client\"\n\nimport { Activity, Circle } from \"lucide-react\"\nimport { useEffect, useState } from \"react\"\n\nimport { FadeIn } from \"@/components/ui/fade-in\"\nimport { cn } from \"@/lib/utils\"\n\ntype Status = \"active\" | \"shipping\" | \"paused\"\n\n/** Edit CONTENT.projects for your studio board. */\nconst CONTENT = {\n  footerNote:\n    \"Anonymized snapshots shared with client permission. Slots: 2 of 3 filled.\",\n  projects: [\n    {\n      id: \"p1\",\n      name: \"Billing dashboard\",\n      client: \"Acme\",\n      status: \"active\" as Status,\n      milestone: \"Checkout polish\",\n      progress: 72,\n      lastUpdate: \"Shipped invoice PDF export\",\n      service: \"MVP sprint\",\n      public: true,\n    },\n    {\n      id: \"p2\",\n      name: \"Ops AI inbox\",\n      client: \"Northwind\",\n      status: \"shipping\" as Status,\n      milestone: \"Prompt evals\",\n      progress: 88,\n      lastUpdate: \"Cut false positives 30%\",\n      service: \"AI feature\",\n      public: true,\n    },\n  ],\n}\n\nconst STATUS_COLORS: Record<Status, string> = {\n  active: \"border-emerald-500/40 text-emerald-400\",\n  shipping: \"border-sky-500/40 text-sky-400\",\n  paused: \"border-amber-500/40 text-amber-400\",\n}\n\nconst STATUS_LABELS: Record<Status, string> = {\n  active: \"Active\",\n  shipping: \"Shipping\",\n  paused: \"Paused\",\n}\n\nexport function LiveDashboard() {\n  const [now, setNow] = useState<Date | null>(null)\n\n  useEffect(() => {\n    setNow(new Date())\n    const id = setInterval(() => setNow(new Date()), 60_000)\n    return () => clearInterval(id)\n  }, [])\n\n  const publicProjects = CONTENT.projects.filter((p) => p.public)\n\n  return (\n    <div>\n      <div className=\"ms-shell-pad flex items-center justify-between border-b border-border-subtle py-4\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"relative flex h-2 w-2\">\n            <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75\" />\n            <span className=\"relative inline-flex h-2 w-2 rounded-full bg-emerald-500\" />\n          </span>\n          <span className=\"text-xs font-medium text-muted-foreground\">\n            Studio live · {publicProjects.length} active project\n            {publicProjects.length === 1 ? \"\" : \"s\"}\n          </span>\n        </div>\n        {now ? (\n          <span className=\"ds-mono-label flex items-center gap-1.5\">\n            <Activity className=\"size-3\" />\n            Updated{\" \"}\n            {now.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}\n          </span>\n        ) : null}\n      </div>\n\n      <ul className=\"divide-y divide-border-subtle\">\n        {publicProjects.map((project, i) => (\n          <li key={project.id}>\n            <FadeIn delay={i * 0.05}>\n              <article className=\"grid grid-cols-1 items-start gap-3 px-6 py-5 md:grid-cols-12 md:gap-4 md:px-8 md:py-6\">\n                <span className=\"font-mono text-[11px] tabular-nums text-muted-foreground md:col-span-1\">\n                  {String(i + 1).padStart(2, \"0\")}\n                </span>\n                <div className=\"md:col-span-4\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <h3 className=\"text-sm font-medium text-foreground\">\n                      {project.name}\n                    </h3>\n                    <span\n                      className={cn(\n                        \"shrink-0 border px-2 py-0.5 text-[10px] font-medium\",\n                        STATUS_COLORS[project.status]\n                      )}\n                    >\n                      {STATUS_LABELS[project.status]}\n                    </span>\n                  </div>\n                  <p className=\"mt-0.5 text-xs text-muted-foreground\">\n                    {project.client}\n                  </p>\n                </div>\n                <div className=\"md:col-span-4\">\n                  <div className=\"flex items-center justify-between text-[10px] text-muted-foreground\">\n                    <span>{project.milestone}</span>\n                    <span>{project.progress}%</span>\n                  </div>\n                  <div className=\"mt-1.5 h-1 overflow-hidden border border-border-subtle bg-muted\">\n                    <div\n                      className=\"h-full bg-brand transition-all duration-700\"\n                      style={{ width: `${project.progress}%` }}\n                    />\n                  </div>\n                  <p className=\"mt-2 text-xs leading-relaxed text-muted-foreground\">\n                    <Circle className=\"mr-1 inline size-2 fill-emerald-500 text-emerald-500\" />\n                    {project.lastUpdate}\n                  </p>\n                </div>\n                <p className=\"text-[11px] text-muted-foreground md:col-span-3 md:text-right\">\n                  {project.service}\n                </p>\n              </article>\n            </FadeIn>\n          </li>\n        ))}\n      </ul>\n\n      <p className=\"ms-shell-pad py-4 text-[11px] text-muted-foreground\">\n        {CONTENT.footerNote}\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/live-dashboard.tsx"
    }
  ],
  "type": "registry:block"
}