{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price-range-gauge",
  "title": "Price Range Gauge",
  "description": "Plots the current price against its historical range as low/typical/high zones with a tick at the current price.",
  "dependencies": [
    "@channel3/sdk"
  ],
  "registryDependencies": [
    "https://ui.trychannel3.com/r/format.json"
  ],
  "files": [
    {
      "path": "registry/default/components/price-range-gauge.tsx",
      "content": "import type { PriceStatistics } from \"@channel3/sdk/resources\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { formatCurrency } from \"@/registry/default/lib/format\";\n\ntype PriceStatus = PriceStatistics[\"current_status\"];\n\nconst ZONE_FILL: Record<PriceStatus, string> = {\n  low: \"bg-emerald-500/70\",\n  typical: \"bg-amber-500/70\",\n  high: \"bg-red-500/70\",\n};\n\nconst STATUS_LABEL: Record<PriceStatus, string> = {\n  low: \"Lower than usual\",\n  typical: \"Typical price\",\n  high: \"Higher than usual\",\n};\n\nconst STATUS_TEXT: Record<PriceStatus, string> = {\n  low: \"text-emerald-600 dark:text-emerald-400\",\n  typical: \"text-amber-600 dark:text-amber-400\",\n  high: \"text-red-600 dark:text-red-400\",\n};\n\n// Track spans mean ± WINDOW·σ; band edges derive from the same mapping as the thumb.\nconst WINDOW = 2;\n\nexport interface PriceRangeGaugeProps extends React.ComponentProps<\"div\"> {\n  statistics: PriceStatistics;\n  locale?: string;\n}\n\nexport function PriceRangeGauge({ statistics, locale, className, ...props }: PriceRangeGaugeProps) {\n  const { min_price, max_price, current_price, currency, mean, std_dev, current_status } =\n    statistics;\n\n  const hasRange = max_price > min_price && std_dev > 0;\n  const lowBound = mean - std_dev;\n  const highBound = mean + std_dev;\n\n  const pos = (price: number) => {\n    const fromCenter = (price - mean) / std_dev / WINDOW;\n    return Math.min(100, Math.max(0, (fromCenter + 1) * 50));\n  };\n\n  // Stable prices keep the same three-zone layout with a centered marker.\n  const greenEnd = hasRange ? pos(lowBound) : 25;\n  const yellowEnd = hasRange ? pos(highBound) : 75;\n  const marker = hasRange ? pos(current_price) : 50;\n\n  return (\n    <div data-slot=\"price-range-gauge\" className={cn(\"flex flex-col gap-2\", className)} {...props}>\n      <div className=\"flex items-baseline justify-between gap-2\">\n        <span className=\"text-sm font-semibold\">\n          {formatCurrency(current_price, currency, locale)}\n        </span>\n        <span\n          className={cn(\n            \"text-xs font-medium\",\n            hasRange ? STATUS_TEXT[current_status] : \"text-muted-foreground\",\n          )}\n        >\n          {hasRange ? STATUS_LABEL[current_status] : \"Stable price\"}\n        </span>\n      </div>\n\n      <div className=\"relative h-2.5 w-full\">\n        <div className=\"absolute inset-0 overflow-hidden rounded-full bg-muted\">\n          <div\n            className={cn(\"absolute inset-y-0 left-0\", ZONE_FILL.low)}\n            style={{ width: `${greenEnd}%` }}\n          />\n          <div\n            className={cn(\"absolute inset-y-0\", ZONE_FILL.typical)}\n            style={{\n              left: `${greenEnd}%`,\n              width: `${yellowEnd - greenEnd}%`,\n            }}\n          />\n          <div\n            className={cn(\"absolute inset-y-0 right-0\", ZONE_FILL.high)}\n            style={{ left: `${yellowEnd}%` }}\n          />\n        </div>\n\n        <div\n          className=\"absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm\"\n          style={{ left: `${marker}%` }}\n          role=\"presentation\"\n        />\n      </div>\n\n      {hasRange ? (\n        <div className=\"relative h-4 text-xs text-muted-foreground\">\n          <span\n            className=\"absolute -translate-x-1/2 whitespace-nowrap\"\n            style={{ left: `${greenEnd}%` }}\n          >\n            {formatCurrency(lowBound, currency, locale)}\n          </span>\n          <span\n            className=\"absolute -translate-x-1/2 whitespace-nowrap\"\n            style={{ left: `${yellowEnd}%` }}\n          >\n            {formatCurrency(highBound, currency, locale)}\n          </span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}