{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-board",
  "type": "registry:component",
  "title": "Status Board",
  "description": "Service health grid for surfacing infrastructure state, queue pressure, and incidents.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/status-board/status-board.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Badge } from \"@vllnt/ui\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@vllnt/ui\";\n\nexport type StatusBoardStatus =\n  | \"critical\"\n  | \"healthy\"\n  | \"maintenance\"\n  | \"offline\"\n  | \"warning\";\n\nexport type StatusBoardItem = {\n  description?: string;\n  label: string;\n  meta?: string;\n  status: StatusBoardStatus;\n  value?: string;\n};\n\nexport type StatusBoardProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  columns?: 2 | 3 | 4;\n  description?: string;\n  items: StatusBoardItem[];\n  title?: string;\n};\n\ntype StatusMeta = {\n  badgeVariant: \"default\" | \"destructive\" | \"outline\" | \"secondary\";\n  dotClassName: string;\n  label: string;\n  panelClassName: string;\n};\n\nconst STATUS_META: Record<StatusBoardStatus, StatusMeta> = {\n  critical: {\n    badgeVariant: \"destructive\",\n    dotClassName: \"bg-destructive\",\n    label: \"Critical\",\n    panelClassName: \"border-destructive/30 bg-destructive/5\",\n  },\n  healthy: {\n    badgeVariant: \"default\",\n    dotClassName: \"bg-emerald-500\",\n    label: \"Healthy\",\n    panelClassName: \"border-emerald-500/25 bg-emerald-500/5\",\n  },\n  maintenance: {\n    badgeVariant: \"secondary\",\n    dotClassName: \"bg-sky-500\",\n    label: \"Maintenance\",\n    panelClassName: \"border-sky-500/25 bg-sky-500/5\",\n  },\n  offline: {\n    badgeVariant: \"outline\",\n    dotClassName: \"bg-muted-foreground\",\n    label: \"Offline\",\n    panelClassName: \"border-border bg-muted/30\",\n  },\n  warning: {\n    badgeVariant: \"secondary\",\n    dotClassName: \"bg-amber-500\",\n    label: \"Warning\",\n    panelClassName: \"border-amber-500/25 bg-amber-500/5\",\n  },\n};\n\nconst STATUS_ORDER: StatusBoardStatus[] = [\n  \"healthy\",\n  \"warning\",\n  \"critical\",\n  \"maintenance\",\n  \"offline\",\n];\n\nfunction getColumnsClassName(columns: 2 | 3 | 4): string {\n  if (columns === 2) {\n    return \"md:grid-cols-2\";\n  }\n\n  if (columns === 4) {\n    return \"md:grid-cols-2 xl:grid-cols-4\";\n  }\n\n  return \"md:grid-cols-2 xl:grid-cols-3\";\n}\n\nfunction getSummary(items: StatusBoardItem[]) {\n  const counts = items.reduce<Record<StatusBoardStatus, number>>(\n    (summary, item) => ({\n      ...summary,\n      [item.status]: summary[item.status] + 1,\n    }),\n    {\n      critical: 0,\n      healthy: 0,\n      maintenance: 0,\n      offline: 0,\n      warning: 0,\n    },\n  );\n\n  return STATUS_ORDER.map((status) => ({\n    count: counts[status],\n    status,\n  })).filter((entry) => entry.count > 0);\n}\n\nfunction StatusBoardSummary({ items }: { items: StatusBoardItem[] }) {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      {getSummary(items).map(({ count, status }) => {\n        const meta = STATUS_META[status];\n\n        return (\n          <Badge key={status} variant={meta.badgeVariant}>\n            {count} {meta.label}\n          </Badge>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction StatusBoardCard({ item }: { item: StatusBoardItem }) {\n  const meta = STATUS_META[item.status];\n\n  return (\n    <Card className={cn(\"shadow-sm\", meta.panelClassName)}>\n      <CardHeader className=\"gap-3 space-y-0\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2\">\n              <span\n                aria-hidden=\"true\"\n                className={cn(\"size-2.5 rounded-full\", meta.dotClassName)}\n              />\n              <CardTitle className=\"text-base leading-none\">\n                {item.label}\n              </CardTitle>\n            </div>\n            {item.description ? (\n              <CardDescription>{item.description}</CardDescription>\n            ) : null}\n          </div>\n          <Badge variant={meta.badgeVariant}>{meta.label}</Badge>\n        </div>\n      </CardHeader>\n      <CardContent className=\"flex items-end justify-between gap-3\">\n        <div>\n          {item.value ? (\n            <div className=\"text-2xl font-semibold tracking-tight\">\n              {item.value}\n            </div>\n          ) : (\n            <div className=\"text-sm text-muted-foreground\">\n              No metric reported\n            </div>\n          )}\n        </div>\n        {item.meta ? (\n          <div className=\"text-xs text-muted-foreground\">{item.meta}</div>\n        ) : null}\n      </CardContent>\n    </Card>\n  );\n}\n\nexport const StatusBoard = React.forwardRef<HTMLDivElement, StatusBoardProps>(\n  (\n    {\n      className,\n      columns = 3,\n      description,\n      items,\n      title = \"Status board\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div className={cn(\"space-y-4\", className)} ref={ref} {...props}>\n        <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"space-y-1\">\n            <h2 className=\"text-lg font-semibold tracking-tight\">{title}</h2>\n            {description ? (\n              <p className=\"text-sm text-muted-foreground\">{description}</p>\n            ) : null}\n          </div>\n          <StatusBoardSummary items={items} />\n        </div>\n\n        <div className={cn(\"grid gap-4\", getColumnsClassName(columns))}>\n          {items.map((item) => (\n            <StatusBoardCard item={item} key={item.label} />\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nStatusBoard.displayName = \"StatusBoard\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}