{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-chart",
  "type": "registry:ui",
  "title": "Line chart",
  "description": "Threshold-aware line chart with tactical alert markers.",
  "dependencies": [
    "recharts"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "utils",
    "panel",
    "chart-tooltip"
  ],
  "files": [
    {
      "path": "registry/blacksite/charts/line-chart.tsx",
      "type": "registry:ui",
      "target": "components/charts/line-chart.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CartesianGrid,\n  Line,\n  LineChart as RLineChart,\n  ReferenceLine,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChartTooltip } from \"./chart-tooltip\";\n\nexport interface LineChartSeries {\n  key: string;\n  label?: string;\n  color?: string;\n  strokeDasharray?: string;\n}\n\nexport interface LineChartThreshold {\n  value: number;\n  label?: string;\n  tone?: \"danger\" | \"warning\" | \"info\" | \"success\";\n}\n\ninterface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Array<Record<string, number | string>>;\n  series: LineChartSeries[];\n  xKey?: string;\n  xLabel?: string;\n  yLabel?: string;\n  thresholds?: LineChartThreshold[];\n  height?: number;\n  /** Curve interpolation. Defaults to \"monotone\". */\n  curve?: \"linear\" | \"monotone\" | \"step\";\n}\n\nconst TONE_TO_VAR: Record<NonNullable<LineChartThreshold[\"tone\"]>, string> = {\n  danger: \"var(--color-danger)\",\n  warning: \"var(--color-warning)\",\n  info: \"var(--color-info)\",\n  success: \"var(--color-success)\",\n};\n\nconst DEFAULT_COLORS = [\n  \"var(--color-chart-1)\",\n  \"var(--color-chart-2)\",\n  \"var(--color-chart-3)\",\n  \"var(--color-chart-4)\",\n  \"var(--color-chart-5)\",\n];\n\nconst LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n  (\n    {\n      className,\n      data,\n      series,\n      xKey = \"x\",\n      xLabel,\n      yLabel,\n      thresholds,\n      height = 220,\n      curve = \"monotone\",\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"w-full\", className)} style={{ height }} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RLineChart data={data} margin={{ top: 8, right: 12, bottom: 16, left: 0 }}>\n            <CartesianGrid stroke=\"hsl(var(--border))\" strokeDasharray=\"2 4\" vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              stroke=\"hsl(var(--foreground-subtle))\"\n              tick={{\n                fontFamily: \"var(--font-mono)\",\n                fontSize: 10,\n                fill: \"hsl(var(--foreground-muted))\",\n              }}\n              tickLine={false}\n              axisLine={{ stroke: \"hsl(var(--border))\" }}\n              label={\n                xLabel\n                  ? {\n                      value: xLabel,\n                      position: \"insideBottom\",\n                      offset: -8,\n                      fill: \"hsl(var(--foreground-muted))\",\n                      style: {\n                        fontFamily: \"var(--font-mono)\",\n                        fontSize: 10,\n                        textTransform: \"uppercase\",\n                        letterSpacing: \"0.08em\",\n                      },\n                    }\n                  : undefined\n              }\n            />\n            <YAxis\n              stroke=\"hsl(var(--foreground-subtle))\"\n              tick={{\n                fontFamily: \"var(--font-mono)\",\n                fontSize: 10,\n                fill: \"hsl(var(--foreground-muted))\",\n              }}\n              tickLine={false}\n              axisLine={{ stroke: \"hsl(var(--border))\" }}\n              width={40}\n              label={\n                yLabel\n                  ? {\n                      value: yLabel,\n                      angle: -90,\n                      position: \"insideLeft\",\n                      offset: 12,\n                      fill: \"hsl(var(--foreground-muted))\",\n                      style: {\n                        fontFamily: \"var(--font-mono)\",\n                        fontSize: 10,\n                        textTransform: \"uppercase\",\n                        letterSpacing: \"0.08em\",\n                      },\n                    }\n                  : undefined\n              }\n            />\n            <Tooltip cursor={{ stroke: \"hsl(var(--border-strong))\" }} content={<ChartTooltip />} />\n            {thresholds?.map((t, i) => (\n              <ReferenceLine\n                key={i}\n                y={t.value}\n                stroke={TONE_TO_VAR[t.tone ?? \"danger\"]}\n                strokeDasharray=\"4 4\"\n                strokeOpacity={0.8}\n                label={\n                  t.label\n                    ? {\n                        value: t.label,\n                        position: \"insideTopLeft\",\n                        fill: TONE_TO_VAR[t.tone ?? \"danger\"],\n                        style: {\n                          fontFamily: \"var(--font-mono)\",\n                          fontSize: 10,\n                          textTransform: \"uppercase\",\n                          letterSpacing: \"0.08em\",\n                        },\n                      }\n                    : undefined\n                }\n              />\n            ))}\n            {series.map((s, i) => (\n              <Line\n                key={s.key}\n                type={curve}\n                dataKey={s.key}\n                name={s.label ?? s.key}\n                stroke={s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length]}\n                strokeDasharray={s.strokeDasharray}\n                strokeWidth={1.5}\n                dot={{\n                  r: 2,\n                  strokeWidth: 0,\n                  fill: s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],\n                }}\n                activeDot={{ r: 3 }}\n              />\n            ))}\n          </RLineChart>\n        </ResponsiveContainer>\n      </div>\n    );\n  },\n);\nLineChart.displayName = \"LineChart\";\n\nexport { LineChart };\n"
    }
  ]
}