{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-code-preview-split",
  "title": "Feature Code Preview Split",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-code-preview-split/FeatureCodePreviewSplit.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, Code2, Copy, Eye, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype FrameworkTab = 'vue' | 'react' | 'tailwind'\ntype ButtonVariant = 'default' | 'secondary' | 'outline' | 'destructive'\ntype ButtonSize = 'sm' | 'default' | 'lg'\n\nexport interface FeatureCodePreviewSplitProps {\n  className?: string\n}\n\nexport function FeatureCodePreviewSplit({ className }: FeatureCodePreviewSplitProps) {\n  const [activeFramework, setActiveFramework] = React.useState<FrameworkTab>('react')\n  const [activeVariant, setActiveVariant] = React.useState<ButtonVariant>('default')\n  const [activeSize, setActiveSize] = React.useState<ButtonSize>('default')\n  const [showIcon, setShowIcon] = React.useState(true)\n  const [isCopied, setIsCopied] = React.useState(false)\n\n  const dynamicCode = React.useMemo(() => {\n    if (activeFramework === 'vue') {\n      const iconImport = showIcon ? \"\\nimport { Zap } from 'lucide-vue-next'\" : ''\n      const iconElement = showIcon ? '\\n    <Zap class=\"size-4\" />' : ''\n      return `<script setup lang=\"ts\">\nimport { Button } from '@/components/ui/button'${iconImport}\n<\\/script>\n\n<template>\n  <Button\n    variant=\"${activeVariant}\"\n    size=\"${activeSize}\"\n    class=\"font-mono\"\n  >${iconElement}\n    <span>Deploy Application</span>\n  </Button>\n</template>`\n    }\n\n    if (activeFramework === 'react') {\n      const iconImport = showIcon ? \"\\nimport { Zap } from 'lucide-react'\" : ''\n      const iconElement = showIcon ? '\\n      <Zap className=\"size-4\" />' : ''\n      return `'use client'\n\nimport { Button } from '@/components/ui/button'${iconImport}\n\nexport function DeployTrigger() {\n  return (\n    <Button\n      variant=\"${activeVariant}\"\n      size=\"${activeSize}\"\n      className=\"font-mono\"\n    >${iconElement}\n      <span>Deploy Application</span>\n    </Button>\n  )\n}`\n    }\n\n    return `@theme inline {\n  --color-primary: oklch(0.205 0 0);\n  --color-primary-foreground: oklch(0.985 0 0);\n  --color-destructive: oklch(0.577 0.245 27.325);\n  --radius-lg: 0.625rem;\n  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);\n}`\n  }, [activeFramework, activeVariant, activeSize, showIcon])\n\n  const copyCode = () => {\n    navigator.clipboard.writeText(dynamicCode)\n    setIsCopied(true)\n    setTimeout(() => setIsCopied(false), 2000)\n  }\n\n  return (\n    <section\n      data-slot=\"feature-code-preview-split\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-7xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Code2 className=\"text-primary size-3.5\" />\n            Interactive DX Playground\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Real-time code generation with instant live preview.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            Modify the interactive controls on the right to see the AST code synchronize live across Vue 3.5, React 19,\n            and Tailwind v4.\n          </p>\n        </div>\n\n        {/* Split-Pane DX Workbench */}\n        <div className=\"grid grid-cols-1 items-stretch gap-6 lg:grid-cols-12\">\n          {/* Left Pane: Interactive Code Sandbox Editor (7 Cols) */}\n          <Card className=\"border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 text-left shadow-sm lg:col-span-7\">\n            {/* Editor Top Bar */}\n            <div className=\"border-border flex items-center justify-between border-b pb-3\">\n              {/* Framework Selector Tabs */}\n              <div className=\"bg-muted/60 border-border flex items-center gap-1 rounded-lg border p-1\">\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                    activeFramework === 'vue'\n                      ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )}\n                  onClick={() => setActiveFramework('vue')}\n                >\n                  Vue 3.5 SFC\n                </button>\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                    activeFramework === 'react'\n                      ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )}\n                  onClick={() => setActiveFramework('react')}\n                >\n                  React 19 JSX\n                </button>\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'rounded-md px-2.5 py-1 font-mono text-xs transition-colors',\n                    activeFramework === 'tailwind'\n                      ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )}\n                  onClick={() => setActiveFramework('tailwind')}\n                >\n                  Tailwind Tokens\n                </button>\n              </div>\n\n              {/* Copy Code Button */}\n              <Button size=\"sm\" variant=\"ghost\" className=\"h-8 gap-1.5 px-2 font-mono text-xs\" onClick={copyCode}>\n                {isCopied ? (\n                  <Check className=\"text-success size-3.5\" />\n                ) : (\n                  <Copy className=\"text-muted-foreground size-3.5\" />\n                )}\n                <span>{isCopied ? 'Copied' : 'Copy'}</span>\n              </Button>\n            </div>\n\n            {/* Code Viewport */}\n            <pre className=\"border-border bg-muted/40 text-foreground my-2 flex-1 overflow-x-auto rounded-xl border p-4 font-mono text-xs leading-relaxed\">\n              <code>{dynamicCode}</code>\n            </pre>\n\n            {/* Footer Metadata */}\n            <div className=\"text-muted-foreground border-border flex items-center justify-between border-t pt-3 font-mono text-xs\">\n              <span>\n                Syntax:{' '}\n                {activeFramework === 'vue'\n                  ? 'Vue SFC + TS'\n                  : activeFramework === 'react'\n                    ? 'TypeScript TSX'\n                    : 'CSS @theme'}\n              </span>\n              <span className=\"text-success font-semibold\">&check; 100% Tree-Shakeable</span>\n            </div>\n          </Card>\n\n          {/* Right Pane: Live Component Render & Controls (5 Cols) */}\n          <Card className=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-sm lg:col-span-5\">\n            <div className=\"space-y-4\">\n              <div className=\"border-border flex items-center justify-between border-b pb-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Eye className=\"text-primary size-4\" />\n                  <h3 className=\"text-foreground font-mono text-xs font-bold\">Interactive Component Canvas</h3>\n                </div>\n                <Badge variant=\"outline\" className=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                  Live Render\n                </Badge>\n              </div>\n\n              {/* Live Rendered Component Center Stage */}\n              <div className=\"border-border bg-background/50 flex h-44 items-center justify-center rounded-xl border border-dashed p-6 transition-colors\">\n                <Button variant={activeVariant} size={activeSize} className=\"gap-2 font-mono shadow-sm\">\n                  {showIcon && <Zap className=\"size-4\" />}\n                  <span>Deploy Application</span>\n                </Button>\n              </div>\n            </div>\n\n            {/* Component Controls Box */}\n            <div className=\"border-border space-y-4 border-t pt-2\">\n              <p className=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">\n                Interactive Prop Controls\n              </p>\n\n              {/* Variant Selector */}\n              <div className=\"space-y-1.5\">\n                <span className=\"text-muted-foreground font-mono text-xs\">Variant:</span>\n                <div className=\"grid grid-cols-2 gap-1.5\">\n                  {(['default', 'secondary', 'outline', 'destructive'] as ButtonVariant[]).map((v) => (\n                    <button\n                      key={v}\n                      type=\"button\"\n                      className={cn(\n                        'rounded-lg border px-2.5 py-1 text-center font-mono text-xs capitalize transition-colors',\n                        activeVariant === v\n                          ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                      )}\n                      onClick={() => setActiveVariant(v)}\n                    >\n                      {v}\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Size Selector & Icon Toggle */}\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div className=\"space-y-1.5\">\n                  <span className=\"text-muted-foreground font-mono text-xs\">Size:</span>\n                  <div className=\"flex items-center gap-1\">\n                    {(['sm', 'default', 'lg'] as ButtonSize[]).map((s) => (\n                      <button\n                        key={s}\n                        type=\"button\"\n                        className={cn(\n                          'flex-1 rounded-lg border py-1 text-center font-mono text-xs uppercase transition-colors',\n                          activeSize === s\n                            ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                            : 'border-border bg-card text-muted-foreground',\n                        )}\n                        onClick={() => setActiveSize(s)}\n                      >\n                        {s === 'default' ? 'md' : s}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <span className=\"text-muted-foreground font-mono text-xs\">Leading Icon:</span>\n                  <Button\n                    size=\"sm\"\n                    variant=\"outline\"\n                    className={cn(\n                      'h-7 w-full font-mono text-xs',\n                      showIcon ? 'border-primary text-primary' : 'text-muted-foreground',\n                    )}\n                    onClick={() => setShowIcon(!showIcon)}\n                  >\n                    {showIcon ? 'Enabled' : 'Disabled'}\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default FeatureCodePreviewSplit\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureCodePreviewSplit.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Split-pane developer workbench featuring live code generation across Vue 3.5, React 19, and Tailwind v4 tokens synchronized with an interactive component canvas.",
  "categories": [
    "marketing"
  ]
}