{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notebook-cell",
  "type": "registry:ui",
  "title": "Notebook cell",
  "description": "A Jupyter style notebook cell with a Run button beside a code editor frame and an optional output panel below. Good for interactive docs and playgrounds.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/code-editor-frame.json",
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/notebook-cell.tsx",
      "type": "registry:ui",
      "target": "components/ui/notebook-cell.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { PlayIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\nimport { CodeEditorFrame } from \"@/components/ui/code-editor-frame\"\n\nfunction NotebookCell({\n  code,\n  output,\n  onRun,\n  className,\n}: {\n  code: string\n  output?: string\n  onRun?: () => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"notebook-cell\" className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      <div className=\"flex items-start gap-2 border-b border-border bg-surface p-2\">\n        <IconButton type=\"button\" size=\"icon-sm\" variant=\"outline\" aria-label=\"Run cell\" onClick={onRun}><PlayIcon /></IconButton>\n        <div className=\"min-w-0 flex-1\">\n          <CodeEditorFrame filename=\"cell.ts\">{code}</CodeEditorFrame>\n        </div>\n      </div>\n      {output != null ? (\n        <pre className=\"overflow-auto bg-sunken p-3 font-mono text-[12px] text-fg-muted\">{output}</pre>\n      ) : null}\n    </div>\n  )\n}\nexport { NotebookCell }\n"
    }
  ]
}