{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trace-waterfall",
  "type": "registry:ui",
  "title": "Trace waterfall",
  "description": "React trace waterfall that draws each span as a bar offset by start time and scaled by duration, indented by depth with a millisecond label for observability.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/trace-waterfall.tsx",
      "type": "registry:ui",
      "target": "components/ui/trace-waterfall.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype Span = { name: string; start: number; duration: number; depth?: number }\n\nfunction TraceWaterfall({\n  spans = [\n    { name: \"GET /api/gallery\", start: 0, duration: 100, depth: 0 },\n    { name: \"auth\", start: 4, duration: 18, depth: 1 },\n    { name: \"db.query\", start: 24, duration: 40, depth: 1 },\n    { name: \"render\", start: 68, duration: 28, depth: 1 },\n  ],\n  className,\n}: {\n  spans?: Span[]\n  className?: string\n}) {\n  const total = Math.max(...spans.map((s) => s.start + s.duration), 1)\n  return (\n    <div data-slot=\"trace-waterfall\" className={cn(\"space-y-1.5 rounded-xl border border-border bg-surface p-3\", className)}>\n      {spans.map((s) => (\n        <div key={s.name} className=\"grid grid-cols-[140px_1fr_48px] items-center gap-2 text-xs\">\n          <span className=\"truncate font-mono text-fg\" style={{ paddingLeft: (s.depth ?? 0) * 12 }}>{s.name}</span>\n          <div className=\"relative h-5 rounded bg-sunken\">\n            <div\n              className=\"absolute inset-y-0.5 rounded-sm bg-accent/70\"\n              style={{ left: `${(s.start / total) * 100}%`, width: `${(s.duration / total) * 100}%` }}\n            />\n          </div>\n          <span className=\"text-right tabular-nums text-fg-muted\">{s.duration}ms</span>\n        </div>\n      ))}\n    </div>\n  )\n}\nexport { TraceWaterfall }\n"
    }
  ]
}