{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "html-output",
  "title": "HTML Output",
  "description": "Component for rendering HTML content in notebook outputs. Handles pandas DataFrames, rich HTML displays, and interactive visualizations. Requires iframe isolation for security.",
  "files": [
    {
      "path": "registry/outputs/html-output.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface HtmlOutputProps {\n  /**\n   * The HTML content to render\n   */\n  content: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * Check if the current window is inside an iframe\n */\nfunction isInIframe(): boolean {\n  try {\n    return window.self !== window.top;\n  } catch {\n    // If we can't access window.top due to cross-origin restrictions,\n    // we're definitely in an iframe\n    return true;\n  }\n}\n\n/**\n * HtmlOutput component for rendering HTML content in notebook outputs.\n *\n * This component handles HTML output from Jupyter kernels, such as\n * pandas DataFrames, rich HTML displays, and interactive visualizations.\n *\n * SECURITY: This component MUST be rendered inside a sandboxed iframe.\n * Use OutputArea (with isolated=\"auto\") or IsolatedFrame directly.\n * Throws an error if rendered in the main DOM.\n */\nexport function HtmlOutput({ content, className = \"\" }: HtmlOutputProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  // Require iframe for security - HTML can contain CSS attacks, forms, etc.\n  if (typeof window !== \"undefined\" && !isInIframe()) {\n    throw new Error(\n      \"HtmlOutput must be rendered inside an iframe. \" +\n        \"Use OutputArea or IsolatedFrame for HTML content.\",\n    );\n  }\n\n  useEffect(() => {\n    if (!ref.current || !content) return;\n\n    // Use createContextualFragment for proper script execution\n    // This allows scripts in the HTML to run, which is necessary for\n    // interactive outputs like Plotly, Bokeh, etc.\n    const range = document.createRange();\n    const fragment = range.createContextualFragment(content);\n    ref.current.innerHTML = \"\";\n    ref.current.appendChild(fragment);\n  }, [content]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"html-output\"\n      className={cn(\"not-prose py-2 max-w-none overflow-auto\", className)}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/outputs/html-output.tsx"
    }
  ],
  "type": "registry:component"
}