{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "svg-output",
  "title": "SVG Output",
  "description": "Component for rendering SVG graphics in notebook outputs. Handles matplotlib figures, diagrams, and other vector graphics with proper scaling.",
  "files": [
    {
      "path": "registry/outputs/svg-output.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SvgOutputProps {\n  /**\n   * The SVG content as a string\n   */\n  data: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * SvgOutput component for rendering SVG graphics in notebook outputs\n *\n * This component handles SVG output from Jupyter kernels, commonly used\n * for matplotlib figures rendered as SVG, diagrams, and other vector graphics.\n *\n * The SVG is inserted directly into the DOM to preserve interactivity\n * and allow proper scaling.\n */\nexport function SvgOutput({ data, className = \"\" }: SvgOutputProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!ref.current || !data) return;\n\n    // Clear existing content and insert the SVG\n    ref.current.innerHTML = \"\";\n    ref.current.insertAdjacentHTML(\"beforeend\", data);\n\n    // Find the SVG element and ensure it scales properly\n    const svg = ref.current.querySelector(\"svg\");\n    if (svg) {\n      // Ensure SVG scales responsively if no explicit dimensions\n      if (!svg.hasAttribute(\"width\") && !svg.hasAttribute(\"height\")) {\n        svg.style.maxWidth = \"100%\";\n        svg.style.height = \"auto\";\n      }\n    }\n  }, [data]);\n\n  if (!data) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"svg-output\"\n      className={cn(\"not-prose py-2 max-w-full overflow-auto\", className)}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/outputs/svg-output.tsx"
    }
  ],
  "type": "registry:component"
}