{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-code-preview-split",
  "title": "Feature Code Preview Split",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-code-preview-split/FeatureCodePreviewSplit.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, Code2, Copy, Eye, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ntype FrameworkTab = 'vue' | 'react' | 'tailwind'\ntype ButtonVariant = 'default' | 'secondary' | 'outline' | 'destructive'\ntype ButtonSize = 'sm' | 'default' | 'lg'\n\nconst activeFramework = ref<FrameworkTab>('vue')\nconst activeVariant = ref<ButtonVariant>('default')\nconst activeSize = ref<ButtonSize>('default')\nconst showIcon = ref(true)\nconst isCopied = ref(false)\n\nconst dynamicCode = computed(() => {\n  if (activeFramework.value === 'vue') {\n    const iconImport = showIcon.value ? \"\\nimport { Zap } from 'lucide-vue-next'\" : ''\n    const iconElement = showIcon.value ? '\\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.value}\"\n    size=\"${activeSize.value}\"\n    class=\"font-mono\"\n  >${iconElement}\n    <span>Deploy Application</span>\n  </Button>\n</template>`\n  }\n\n  if (activeFramework.value === 'react') {\n    const iconImport = showIcon.value ? \"\\nimport { Zap } from 'lucide-react'\" : ''\n    const iconElement = showIcon.value ? '\\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.value}\"\n      size=\"${activeSize.value}\"\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})\n\nfunction copyCode() {\n  navigator.clipboard.writeText(dynamicCode.value)\n  isCopied.value = true\n  setTimeout(() => (isCopied.value = false), 2000)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-code-preview-split\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"mx-auto max-w-7xl space-y-12\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Code2 class=\"text-primary size-3.5\" />\n          Interactive DX Playground\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Real-time code generation with instant live preview.\n        </h2>\n        <p class=\"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 class=\"grid grid-cols-1 items-stretch gap-6 lg:grid-cols-12\">\n        <!-- Left Pane: Interactive Code Sandbox Editor (7 Cols) -->\n        <Card\n          class=\"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        >\n          <!-- Editor Top Bar -->\n          <div class=\"border-border flex items-center justify-between border-b pb-3\">\n            <!-- Framework Selector Tabs -->\n            <div class=\"bg-muted/60 border-border flex items-center gap-1 rounded-lg border p-1\">\n              <button\n                type=\"button\"\n                class=\"rounded-md px-2.5 py-1 font-mono text-xs transition-colors\"\n                :class=\"\n                  activeFramework === 'vue'\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeFramework = 'vue'\"\n              >\n                Vue 3.5 SFC\n              </button>\n              <button\n                type=\"button\"\n                class=\"rounded-md px-2.5 py-1 font-mono text-xs transition-colors\"\n                :class=\"\n                  activeFramework === 'react'\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeFramework = 'react'\"\n              >\n                React 19 JSX\n              </button>\n              <button\n                type=\"button\"\n                class=\"rounded-md px-2.5 py-1 font-mono text-xs transition-colors\"\n                :class=\"\n                  activeFramework === 'tailwind'\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeFramework = 'tailwind'\"\n              >\n                Tailwind Tokens\n              </button>\n            </div>\n\n            <!-- Copy Code Button -->\n            <Button size=\"sm\" variant=\"ghost\" class=\"h-8 gap-1.5 px-2 font-mono text-xs\" @click=\"copyCode\">\n              <Check v-if=\"isCopied\" class=\"text-success size-3.5\" />\n              <Copy v-else class=\"text-muted-foreground size-3.5\" />\n              <span>{{ isCopied ? 'Copied' : 'Copy' }}</span>\n            </Button>\n          </div>\n\n          <!-- Code Viewport -->\n          <pre\n            class=\"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></pre>\n\n          <!-- Footer Metadata -->\n          <div\n            class=\"text-muted-foreground border-border flex items-center justify-between border-t pt-3 font-mono text-xs\"\n          >\n            <span\n              >Syntax:\n              {{\n                activeFramework === 'vue'\n                  ? 'Vue SFC + TS'\n                  : activeFramework === 'react'\n                    ? 'TypeScript TSX'\n                    : 'CSS @theme'\n              }}</span\n            >\n            <span class=\"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\n          class=\"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        >\n          <div class=\"space-y-4\">\n            <div class=\"border-border flex items-center justify-between border-b pb-3\">\n              <div class=\"flex items-center gap-2\">\n                <Eye class=\"text-primary size-4\" />\n                <h3 class=\"text-foreground font-mono text-xs font-bold\">Interactive Component Canvas</h3>\n              </div>\n              <Badge variant=\"outline\" class=\"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\n              class=\"border-border bg-background/50 flex h-44 items-center justify-center rounded-xl border border-dashed p-6 transition-colors\"\n            >\n              <Button :variant=\"activeVariant\" :size=\"activeSize\" class=\"gap-2 font-mono shadow-sm\">\n                <Zap v-if=\"showIcon\" class=\"size-4\" />\n                <span>Deploy Application</span>\n              </Button>\n            </div>\n          </div>\n\n          <!-- Component Controls Box -->\n          <div class=\"border-border space-y-4 border-t pt-2\">\n            <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">Interactive Prop Controls</p>\n\n            <!-- Variant Selector -->\n            <div class=\"space-y-1.5\">\n              <span class=\"text-muted-foreground font-mono text-xs\">Variant:</span>\n              <div class=\"grid grid-cols-2 gap-1.5\">\n                <button\n                  v-for=\"v in ['default', 'secondary', 'outline', 'destructive'] as ButtonVariant[]\"\n                  :key=\"v\"\n                  type=\"button\"\n                  class=\"rounded-lg border px-2.5 py-1 text-center font-mono text-xs capitalize transition-colors\"\n                  :class=\"\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                  @click=\"activeVariant = v\"\n                >\n                  {{ v }}\n                </button>\n              </div>\n            </div>\n\n            <!-- Size Selector & Icon Toggle -->\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"space-y-1.5\">\n                <span class=\"text-muted-foreground font-mono text-xs\">Size:</span>\n                <div class=\"flex items-center gap-1\">\n                  <button\n                    v-for=\"s in ['sm', 'default', 'lg'] as ButtonSize[]\"\n                    :key=\"s\"\n                    type=\"button\"\n                    class=\"flex-1 rounded-lg border py-1 text-center font-mono text-xs uppercase transition-colors\"\n                    :class=\"\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                    @click=\"activeSize = s\"\n                  >\n                    {{ s === 'default' ? 'md' : s }}\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <span class=\"text-muted-foreground font-mono text-xs\">Leading Icon:</span>\n                <Button\n                  size=\"sm\"\n                  variant=\"outline\"\n                  class=\"h-7 w-full font-mono text-xs\"\n                  :class=\"showIcon ? 'border-primary text-primary' : 'text-muted-foreground'\"\n                  @click=\"showIcon = !showIcon\"\n                >\n                  {{ showIcon ? 'Enabled' : 'Disabled' }}\n                </Button>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureCodePreviewSplit.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
  ]
}