{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segment-muscle-analysis",
  "title": "Segment Muscle Analysis",
  "description": "Composed muscle-distribution block with a figure image, hotspots, and surrounding metric cards.",
  "registryDependencies": [
    "@blocks/metric-donut-card",
    "@blocks/patient-results-types",
    "@circle-ui/card",
    "@circle-ui/utils"
  ],
  "files": [
    {
      "path": "registry/berlin/blocks/patient-results/display/segment-muscle-analysis.tsx",
      "content": "// Generated from packages/ui/src/components/patient-results/display/segment-muscle-analysis.tsx\nimport * as React from \"react\";\n\nimport { Card, CardContent, CardHeader } from \"@/registry/berlin/circle-ui/card\";\nimport { cn } from \"@/registry/berlin/lib/utils\";\n\nimport { MetricDonutCard } from \"@/registry/berlin/blocks/metric-donut-card\";\n\nimport type { SegmentMuscleAnalysisProps } from \"@/registry/berlin/blocks/patient-results-types\";\n\nexport function SegmentMuscleAnalysis({\n  title = \"Segment Muscular Analysis\",\n  summary = \"Muscle distribution across different body segments\",\n  figureUrl,\n  figureAlt,\n  hotspots,\n  leftMetrics,\n  rightMetrics,\n  className,\n}: SegmentMuscleAnalysisProps) {\n  return (\n    <Card className={cn(\"rounded-[16px] border-black/10 bg-white\", className)}>\n      <CardHeader className=\"gap-4 p-6 pb-0\">\n        <div className=\"flex items-start justify-between gap-4\">\n          <p className=\"text-sm leading-6 tracking-[-0.01em] text-[#202020]\">\n            {title}\n          </p>\n          <p className=\"max-w-[360px] text-right text-sm leading-6 tracking-[-0.01em] text-muted-foreground\">\n            {summary}\n          </p>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"p-6 pt-6\">\n        <div className=\"grid gap-6 md:grid-cols-[minmax(0,1fr)_minmax(280px,420px)_minmax(0,1fr)] xl:gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(300px,440px)_minmax(0,1fr)]\">\n          <div className=\"min-w-0 space-y-4\">\n            {leftMetrics.map((metric, index) => (\n              <MetricDonutCard key={`${metric.title}-${index}`} {...metric} />\n            ))}\n          </div>\n\n          <div className=\"relative mx-auto aspect-[467/543] w-full max-w-[420px] overflow-hidden rounded-[24px] bg-[#f7f8fb] xl:max-w-[440px]\">\n            <img\n              src={figureUrl}\n              alt={figureAlt}\n              className=\"block h-full w-full object-contain\"\n            />\n            <div className=\"pointer-events-none absolute inset-0\">\n              {hotspots.map((hotspot, index) => (\n                <span\n                  key={`${hotspot.x}-${hotspot.y}-${index}`}\n                  aria-hidden=\"true\"\n                  className=\"absolute block size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-[#6fa7df] shadow-[0_0_0_4px_rgba(111,167,223,0.18)]\"\n                  style={{\n                    left: `${hotspot.x * 100}%`,\n                    top: `${hotspot.y * 100}%`,\n                  }}\n                />\n              ))}\n            </div>\n          </div>\n\n          <div className=\"min-w-0 space-y-4\">\n            {rightMetrics.map((metric, index) => (\n              <MetricDonutCard key={`${metric.title}-${index}`} {...metric} />\n            ))}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/components/ui/patient-results/display/segment-muscle-analysis.tsx"
    }
  ],
  "type": "registry:ui"
}