{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "latency-distribution",
  "type": "registry:ui",
  "title": "LatencyDistribution",
  "description": "Percentile latency distribution bar (p50, p75, p90, p99, p99.9) with color thresholds and SLA lines.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/latency-distribution.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface LatencyBracket {\n  label: string;\n  value: number;\n  display: string;\n  color?: \"emerald\" | \"amber\" | \"rose\" | \"blue\" | \"violet\" | string;\n}\n\nexport interface LatencyDistributionProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  sla?: string;\n  percentiles: LatencyBracket[];\n}\n\nexport function LatencyDistribution({\n  title = \"Latency Distribution\",\n  sla,\n  percentiles,\n  className,\n  ...props\n}: LatencyDistributionProps) {\n  const totalVal = percentiles.reduce((acc, p) => acc + p.value, 0) || 1;\n\n  const getColor = (c?: string) => {\n    switch (c) {\n      case \"emerald\":\n        return \"#10b981\";\n      case \"amber\":\n        return \"#f59e0b\";\n      case \"rose\":\n        return \"#f43f5e\";\n      case \"blue\":\n        return \"#3b82f6\";\n      case \"violet\":\n        return \"#8b5cf6\";\n      default:\n        return \"#e5000f\";\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-4 space-y-3 my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"font-mono text-xs font-medium text-foreground\">\n          {title}\n        </span>\n        {sla && (\n          <span className=\"font-mono text-xs text-muted-foreground\">{sla}</span>\n        )}\n      </div>\n\n      <div className=\"flex h-7 rounded border border-border overflow-hidden bg-muted/30\">\n        {percentiles.map((p, idx) => {\n          const widthPct = Math.max((p.value / totalVal) * 100, 8);\n          const color = getColor(p.color);\n\n          return (\n            <div\n              key={idx}\n              className=\"h-full border-r border-border/50 last:border-r-0 flex items-center justify-center font-mono text-xs font-medium\"\n              style={{\n                width: `${widthPct}%`,\n                backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,\n                color: color,\n              }}\n              title={`${p.label}: ${p.display}`}\n            >\n              {p.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"flex flex-wrap gap-2 pt-1\">\n        {percentiles.map((p, idx) => {\n          const color = getColor(p.color);\n          return (\n            <div\n              key={idx}\n              className=\"flex items-center gap-1.5 px-2.5 py-1 rounded border border-border bg-muted/20 font-mono text-xs font-medium\"\n            >\n              <span\n                className=\"w-2 h-2 rounded-full\"\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"text-muted-foreground\">{p.label}:</span>\n              <span className=\"font-bold text-foreground\">{p.display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}