{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "component-showcase",
  "type": "registry:ui",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/component-showcase.tsx",
      "content": "import * as React from \"react\";\nimport fs from \"fs\";\nimport path from \"path\";\nimport { CodeBlock } from \"@/components/ui/code-block\";\nimport { CopyButton } from \"@/components/ui/copy-button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ChevronDown, Terminal, WandSparkles, TerminalSquare, PictureInPicture2 } from \"lucide-react\";\nimport { ComponentDocsSections } from \"@/components/docs/component-docs-sections\";\nimport { FullscreenPreview } from \"@/components/ui/fullscreen-preview\";\n\ninterface ComponentShowcaseProps {\n  componentName: string; // The exact filename in the registry (without .tsx)\n  title: string;\n  description: string;\n  slug?: string;\n  children: React.ReactNode; // The live component itself\n}\n\n/**\n * Read the component source code from the filesystem (server-side only).\n * Tries multiple candidate directories.\n * The turbopackIgnore comment prevents Turbopack from tracing the entire project.\n */\nfunction readComponentSource(componentName: string): string {\n  const fileName = `${componentName}.tsx`;\n\n  try {\n    const p1 = path.join(process.cwd(), \"src\", \"components\", \"ui\", fileName);\n    if (fs.existsSync(p1)) return fs.readFileSync(p1, \"utf8\");\n  } catch {}\n\n  try {\n    const p2 = path.join(process.cwd(), \"src\", \"registry\", fileName);\n    if (fs.existsSync(p2)) return fs.readFileSync(p2, \"utf8\");\n  } catch {}\n\n  try {\n    const p3 = path.join(process.cwd(), \"src\", \"components\", \"docs\", fileName);\n    if (fs.existsSync(p3)) return fs.readFileSync(p3, \"utf8\");\n  } catch {}\n\n  return `// Source code for ${componentName} not found`;\n}\n\nexport function ComponentShowcase({\n  componentName,\n  title,\n  description,\n  slug = componentName,\n  children,\n}: ComponentShowcaseProps) {\n  const installCommand = `npx shadcn@latest add @vengeanceui/${componentName}`;\n  const sourceCode = readComponentSource(componentName);\n\n  return (\n    <div className=\"mb-8 space-y-4\">\n      {/* Component Header */}\n      <div id=\"overview\" className=\"space-y-1 scroll-mt-24\">\n        <p className=\"text-sm font-medium text-neutral-500 dark:text-zinc-500\">\n          Components <span className=\"mx-1 text-neutral-400 dark:text-zinc-700\">/</span>\n          <span className=\"text-neutral-900 dark:text-zinc-200\">{title}</span>\n        </p>\n        <h1 className=\"mb-2 text-3xl font-bold tracking-tight text-neutral-900 dark:text-zinc-100\">{title}</h1>\n        <p className=\"text-neutral-500 dark:text-zinc-400 text-lg\">{description}</p>\n      </div>\n\n      {/* The Showcase Toggle */}\n      <Tabs defaultValue=\"preview\" className=\"space-y-4\">\n        <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n          <TabsList className=\"mb-0\">\n            <TabsTrigger value=\"preview\" className=\"gap-2 px-3 py-1.5 text-sm h-8 font-medium\">\n              <PictureInPicture2 className=\"h-4 w-4\" />\n              Preview\n            </TabsTrigger>\n            <TabsTrigger value=\"code\" className=\"gap-2 px-3 py-1.5 text-sm h-8 font-medium text-neutral-500 dark:text-zinc-400 hover:text-neutral-700 dark:hover:text-zinc-300\">\n              <TerminalSquare className=\"h-4 w-4\" />\n              Code\n            </TabsTrigger>\n          </TabsList>\n\n          <div className=\"flex w-full items-center gap-2 rounded-xl border border-neutral-200 dark:border-white/10 bg-neutral-50 dark:bg-black px-1.5 py-1.5 text-xs text-neutral-600 dark:text-zinc-300 shadow-sm dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] lg:w-auto\">\n            <div className=\"inline-flex h-6 w-6 items-center justify-center rounded-md bg-neutral-100 dark:bg-zinc-800 text-neutral-400 dark:text-zinc-500\">\n              <Terminal className=\"h-3.5 w-3.5\" />\n            </div>\n            <span className=\"max-w-[42vw] truncate font-mono text-neutral-500 dark:text-zinc-400 lg:max-w-[500px]\">{installCommand}</span>\n            <button\n              type=\"button\"\n              className=\"ml-auto hidden h-7 items-center gap-1 rounded-md border border-neutral-200 dark:border-white/10 bg-neutral-100 dark:bg-white/5 px-2.5 text-neutral-600 dark:text-zinc-300 transition-colors hover:bg-neutral-200 dark:hover:bg-white/10 sm:inline-flex\"\n            >\n              Copy prompt\n              <ChevronDown className=\"h-3.5 w-3.5\" />\n            </button>\n            <CopyButton code={installCommand} className=\"h-7 w-7 border-neutral-200 dark:border-white/10 bg-transparent hover:bg-neutral-100 dark:hover:bg-white/10\" />\n            <FullscreenPreview>{children}</FullscreenPreview>\n          </div>\n        </div>\n\n        {/* Live Preview */}\n        <TabsContent value=\"preview\">\n          <div className=\"w-full\">\n            <div id=\"preview\" className=\"w-full scroll-mt-24 rounded-2xl border border-neutral-200 dark:border-[#222] bg-neutral-100 dark:bg-zinc-900 p-2.5 shadow-lg dark:shadow-[0_20px_60px_rgba(0,0,0,0.45)] sm:p-4\">\n              <div className=\"relative flex h-[680px] items-stretch overflow-hidden rounded-xl border border-neutral-200 dark:border-[#222] bg-white dark:bg-black\">\n                <div className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-black/5 dark:bg-white/10\" />\n                <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_20%_0%,rgba(0,0,0,0.03),transparent_32%),radial-gradient(circle_at_80%_100%,rgba(0,0,0,0.02),transparent_34%)] dark:bg-[radial-gradient(circle_at_20%_0%,rgba(255,255,255,0.08),transparent_32%),radial-gradient(circle_at_80%_100%,rgba(255,255,255,0.04),transparent_34%)]\" />\n\n                <div className=\"relative z-10 w-full h-full flex justify-center items-center\">\n                  {children}\n                </div>\n              </div>\n            </div>\n          </div>\n        </TabsContent>\n\n        {/* Code Block */}\n        <TabsContent value=\"code\">\n          <div id=\"code\" className=\"scroll-mt-24\" />\n          <div className=\"mt-4\">\n            <CodeBlock fileName={`${componentName}.tsx`} />\n          </div>\n        </TabsContent>\n      </Tabs>\n\n      {/* ─── Documentation Sections (Client Component) ─── */}\n      <ComponentDocsSections componentName={componentName} slug={slug} sourceCode={sourceCode} />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/component-showcase.tsx"
    }
  ]
}