{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-playground",
  "type": "registry:component",
  "title": "Code Playground",
  "description": "Interactive code editor with live preview.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/code-playground/code-playground.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Check, Code, Copy, FileCode } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\n\ntype CodeLineProps = {\n  highlightLines: number[];\n  line: string;\n  lineNumber: number;\n};\n\nfunction CodeLine({ highlightLines, line, lineNumber }: CodeLineProps) {\n  const isHighlighted = highlightLines.includes(lineNumber);\n  return (\n    <div className={cn(\"flex\", isHighlighted && \"bg-primary/10 -mx-4 px-4\")}>\n      <span className=\"select-none w-8 text-right pr-4 text-muted-foreground/50\">\n        {lineNumber}\n      </span>\n      <span>{line}</span>\n    </div>\n  );\n}\n\nexport type CodePlaygroundProps = {\n  children: ReactNode;\n  description?: string;\n  filename?: string;\n  highlightLines?: number[];\n  language?: string;\n  showLineNumbers?: boolean;\n  title: string;\n};\n\nconst EMPTY_HIGHLIGHT_LINES: number[] = [];\n\nexport function CodePlayground({\n  children,\n  description,\n  filename,\n  highlightLines = EMPTY_HIGHLIGHT_LINES,\n  language = \"typescript\",\n  showLineNumbers = false,\n  title,\n}: CodePlaygroundProps) {\n  const [copied, setCopied] = useState(false);\n  const code = typeof children === \"string\" ? children : \"\";\n  const lines = code.split(\"\\n\");\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => {\n      setCopied(false);\n    }, 2000);\n  };\n\n  return (\n    <div className=\"my-6 rounded-lg border bg-card overflow-hidden\">\n      <div className=\"flex items-center justify-between px-4 py-3 border-b bg-muted/30\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex size-8 items-center justify-center rounded bg-primary/10\">\n            <Code className=\"size-4 text-primary\" />\n          </div>\n          <div>\n            <h4 className=\"font-semibold text-sm\">{title}</h4>\n            {description ? (\n              <p className=\"text-xs text-muted-foreground\">{description}</p>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {filename ? (\n            <div className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n              <FileCode className=\"size-3\" />\n              <span className=\"font-mono\">{filename}</span>\n            </div>\n          ) : null}\n          <Button\n            className=\"size-8\"\n            onClick={handleCopy}\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            {copied ? (\n              <Check className=\"size-3\" />\n            ) : (\n              <Copy className=\"size-3\" />\n            )}\n          </Button>\n        </div>\n      </div>\n      <div className=\"relative overflow-x-auto\">\n        <pre className=\"p-4 text-sm font-mono\">\n          {showLineNumbers ? (\n            <code>\n              {lines.map((line, index) => (\n                <CodeLine\n                  highlightLines={highlightLines}\n                  key={`${line}-${index + 1}`}\n                  line={line}\n                  lineNumber={index + 1}\n                />\n              ))}\n            </code>\n          ) : (\n            <code>{code}</code>\n          )}\n        </pre>\n      </div>\n      <div className=\"px-4 py-2 border-t bg-muted/30\">\n        <span className=\"text-xs font-mono text-muted-foreground uppercase tracking-wider\">\n          {language}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport type FileTreeProps = {\n  children: ReactNode;\n  title?: string;\n};\n\nexport function FileTree({\n  children,\n  title = \"File Structure\",\n}: FileTreeProps) {\n  return (\n    <div className=\"my-6 rounded-lg border bg-card overflow-hidden\">\n      <div className=\"px-4 py-2 border-b bg-muted/30\">\n        <h4 className=\"font-semibold text-sm flex items-center gap-2\">\n          <FileCode className=\"size-4\" />\n          {title}\n        </h4>\n      </div>\n      <div className=\"p-4 font-mono text-sm [&>ul]:m-0 [&>ul]:list-none [&_ul]:ml-4 [&_ul]:list-none [&_li]:text-muted-foreground\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}