{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-toolbar",
  "title": "Chart Toolbar",
  "description": "Brutalist chart toolbar overlay — export the wrapped chart as PNG or SVG, download its data as CSV, and toggle fullscreen.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@boldkit/chart-export",
    "@boldkit/button",
    "@boldkit/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/chart-toolbar.tsx",
      "content": "import * as React from 'react'\nimport { Download, Image, FileText, Maximize } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport {\n  downloadCSV,\n  exportPNG,\n  exportSVG,\n  toggleFullscreen,\n} from '@/lib/chart-export'\n\nexport interface ChartToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Rows fed to the chart — enables the CSV export button when provided. */\n  data?: Array<Record<string, unknown>>\n  /** Base filename (no extension) for exports. Default 'chart'. */\n  filename?: string\n  /** Show the PNG export button. Default true. */\n  png?: boolean\n  /** Show the SVG export button. Default true (no-ops for canvas engines). */\n  svg?: boolean\n  /** Show the fullscreen toggle. Default true. */\n  fullscreen?: boolean\n}\n\n/**\n * Wraps a chart and overlays a brutalist export toolbar (PNG / SVG / CSV /\n * fullscreen). Framework-agnostic under the hood — works with any chart that\n * renders an <svg> (Recharts) or <canvas> into the wrapped container.\n *\n *   <ChartToolbar data={rows} filename=\"sales\">\n *     <ChartContainer config={config}>…</ChartContainer>\n *   </ChartToolbar>\n */\nexport const ChartToolbar = React.forwardRef<HTMLDivElement, ChartToolbarProps>(\n  (\n    { data, filename = 'chart', png = true, svg = true, fullscreen = true, className, children, ...props },\n    ref\n  ) => {\n    const innerRef = React.useRef<HTMLDivElement | null>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const withContainer = (fn: (el: HTMLElement) => void) => () => {\n      const el = innerRef.current\n      if (el) fn(el)\n    }\n\n    return (\n      <div ref={innerRef} className={cn('relative', className)} {...props}>\n        <div data-chart-export-controls className=\"absolute right-2 top-2 z-10 flex gap-1\">\n          {png && (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"h-8 w-8\"\n              aria-label=\"Export chart as PNG\"\n              title=\"Export PNG\"\n              onClick={withContainer((el) => void exportPNG(el, `${filename}.png`))}\n            >\n              <Image />\n            </Button>\n          )}\n          {svg && (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"h-8 w-8\"\n              aria-label=\"Export chart as SVG\"\n              title=\"Export SVG\"\n              onClick={withContainer((el) => exportSVG(el, `${filename}.svg`))}\n            >\n              <Download />\n            </Button>\n          )}\n          {data && data.length > 0 && (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"h-8 w-8\"\n              aria-label=\"Download chart data as CSV\"\n              title=\"Download CSV\"\n              onClick={() => downloadCSV(data, `${filename}.csv`)}\n            >\n              <FileText />\n            </Button>\n          )}\n          {fullscreen && (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"icon\"\n              className=\"h-8 w-8\"\n              aria-label=\"Toggle fullscreen\"\n              title=\"Fullscreen\"\n              onClick={withContainer(toggleFullscreen)}\n            >\n              <Maximize />\n            </Button>\n          )}\n        </div>\n        {children}\n      </div>\n    )\n  }\n)\nChartToolbar.displayName = 'ChartToolbar'\n",
      "type": "registry:ui",
      "target": "components/ui/chart-toolbar.tsx"
    }
  ],
  "type": "registry:ui"
}