{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-grid",
  "type": "registry:ui",
  "title": "Status Grid",
  "description": "System health board showing service names with live status indicators. Supports 1–3 columns.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "ui/status-grid/status-grid.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type SystemStatus = 'ACTIVE' | 'OFFLINE' | 'WARNING' | 'CRITICAL' | 'SCANNING'\n\nexport interface SystemEntry {\n  name:    string\n  status:  SystemStatus\n  /** Optional secondary text shown beside the name */\n  detail?: string\n}\n\nexport interface StatusGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  systems:  SystemEntry[]\n  title?:   string\n  columns?: 1 | 2 | 3\n}\n\nfunction statusColor(s: SystemStatus): string {\n  switch (s) {\n    case 'ACTIVE':   return 'var(--color-green)'\n    case 'OFFLINE':  return 'var(--text-muted)'\n    case 'WARNING':  return 'var(--color-amber)'\n    case 'CRITICAL': return 'var(--color-red)'\n    case 'SCANNING': return 'var(--color-green)'\n  }\n}\n\nfunction statusGlow(s: SystemStatus): string {\n  switch (s) {\n    case 'ACTIVE':   return 'var(--glow-green)'\n    case 'SCANNING': return 'var(--glow-green)'\n    case 'WARNING':  return 'var(--glow-amber)'\n    case 'CRITICAL': return 'var(--glow-red)'\n    default:         return 'none'\n  }\n}\n\nconst StatusGrid = React.forwardRef<HTMLDivElement, StatusGridProps>(\n  ({ className, systems, title, columns = 1, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(className)}\n        style={{\n          border:     '1px solid var(--border)',\n          background: 'var(--surface)',\n          fontFamily: 'var(--font-mono)',\n          overflow:   'hidden',\n          ...style,\n        }}\n        {...props}\n      >\n        {/* Header */}\n        {title && (\n          <div\n            style={{\n              padding:       '0.4rem 0.75rem',\n              borderBottom:  '1px solid var(--border)',\n              background:    'var(--surface-raised)',\n              fontSize:      '0.6rem',\n              color:         'var(--text-muted)',\n              letterSpacing: '0.12em',\n              textTransform: 'uppercase',\n            }}\n          >\n            {title}\n          </div>\n        )}\n\n        {/* Grid of rows */}\n        <div\n          style={{\n            display:             'grid',\n            gridTemplateColumns: `repeat(${columns}, 1fr)`,\n          }}\n        >\n          {systems.map((system, i) => {\n            const color      = statusColor(system.status)\n            const glow       = statusGlow(system.status)\n            const isScanning = system.status === 'SCANNING'\n\n            // border logic: no bottom border on last row(s), no right on last column\n            const totalRows   = Math.ceil(systems.length / columns)\n            const rowIndex    = Math.floor(i / columns)\n            const colIndex    = i % columns\n            const isLastRow   = rowIndex === totalRows - 1\n            const isLastCol   = colIndex === columns - 1\n\n            return (\n              <div\n                key={i}\n                style={{\n                  display:             'grid',\n                  gridTemplateColumns: '1fr auto',\n                  alignItems:          'center',\n                  gap:                 '0.5rem',\n                  padding:             '0.5rem 0.75rem',\n                  borderBottom:        isLastRow ? 'none' : '1px solid var(--border)',\n                  borderRight:         isLastCol ? 'none' : '1px solid var(--border)',\n                  minWidth:            0,\n                }}\n              >\n                {/* Name + optional detail */}\n                <span\n                  style={{\n                    minWidth:     0,\n                    fontSize:     '0.7rem',\n                    color:        'var(--text-secondary)',\n                    letterSpacing:'0.06em',\n                    textTransform:'uppercase',\n                    overflow:     'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace:   'nowrap',\n                  }}\n                >\n                  {system.name}\n                  {system.detail && (\n                    <span style={{ color: 'var(--text-muted)', marginLeft: '0.5rem', textTransform: 'none' }}>\n                      {system.detail}\n                    </span>\n                  )}\n                </span>\n\n                {/* Status dot + label */}\n                <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>\n                  <span\n                    style={{\n                      display:      'inline-block',\n                      width:        '6px',\n                      height:       '6px',\n                      borderRadius: '50%',\n                      background:   color,\n                      boxShadow:    glow,\n                      animation:    isScanning ? 'blink-cursor 1s step-end infinite' : undefined,\n                    }}\n                  />\n                  <span\n                    style={{\n                      fontSize:      '0.6rem',\n                      color,\n                      letterSpacing: '0.08em',\n                    }}\n                  >\n                    {system.status}\n                  </span>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    )\n  }\n)\nStatusGrid.displayName = 'StatusGrid'\n\nexport { StatusGrid }\n"
    }
  ]
}