{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-interactive-tabs",
  "title": "Feature Interactive Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-interactive-tabs/FeatureInteractiveTabs.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Activity, Check, CheckCircle2, Code2, Copy, LayoutGrid, Terminal, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\n\ninterface FeatureTab {\n  id: string\n  title: string\n  subtitle: string\n  icon: any\n  tag: string\n  headline: string\n  description: string\n  codeSnippet: string\n  stats: { label: string; value: string }[]\n  checks: string[]\n}\n\nconst tabs: FeatureTab[] = [\n  {\n    id: 'unbundled',\n    title: 'Zero-Package Registry',\n    subtitle: 'Direct AST source ownership',\n    icon: Code2,\n    tag: 'No Node Modules Bloat',\n    headline: 'You own 100% of the source code. No semver breaking changes.',\n    description:\n      'Unlike monolithic component packages that lock you into inflexible dependency trees, UIPKGE copies pristine, tree-shakeable source files directly into your project repository.',\n    codeSnippet: `// Terminal command:\\nnpx shadcn-vue@latest add https://uipkge.dev/r/vue/hero-developer-terminal.json\\n\\n// Output in your repo:\\n// \\u2714 Placed components/blocks/HeroDeveloperTerminal.vue\\n// \\u2714 Installed zero runtime wrapper overhead`,\n    stats: [\n      { label: 'Bundle Size Overhead', value: '0.0 kB' },\n      { label: 'Semver Breakage Risk', value: '0%' },\n      { label: 'Customization Freedom', value: '100%' },\n    ],\n    checks: [\n      'Raw SFC/TSX files living right in your /components directory',\n      'Edit Tailwind tokens, props, or behavior anytime without forking',\n      'Never wait on upstream maintainers for critical hotfixes or styling tweaks',\n    ],\n  },\n  {\n    id: 'parity',\n    title: 'Dual-Framework Parity',\n    subtitle: 'Synchronized Vue 3.5 & React 19',\n    icon: LayoutGrid,\n    tag: '1:1 AST Parity',\n    headline: 'One design system, identical aesthetics across Vue and React.',\n    description:\n      'Whether your engineering organization uses Nuxt 3, Vite, Next.js, or Astro, every primitive and block shares identical OKLCH color spaces, CVA variant tokens, and spring transition curves.',\n    codeSnippet: `// Vue 3.5 SFC:\\n<Button variant=\"default\" size=\"sm\">Deploy</Button>\\n\\n// React 19 JSX:\\n<Button variant=\"default\" size=\"sm\">Deploy</Button>\\n\\n// Both generate identical DOM attributes & micro-interactions`,\n    stats: [\n      { label: 'Token Parity', value: '100.0%' },\n      { label: 'Supported Frameworks', value: 'Vue 3.5 + React 19' },\n      { label: 'Shared CVA Tokens', value: '31 Primitives' },\n    ],\n    checks: [\n      'Reka UI (Vue) and Radix UI (React) accessible headless engines',\n      'Automated CI check verifying cross-framework class string equality',\n      'Identical behavior in Vue and React microfrontends',\n    ],\n  },\n  {\n    id: 'telemetry',\n    title: 'Interactive Workbenches',\n    subtitle: 'Beyond static cards & fluff',\n    icon: Activity,\n    tag: 'Dense & Functional',\n    headline: 'Real-time controls, telemetry, and live interactive state.',\n    description:\n      'Every UIPKGE marketing block functions as a live interactive workbench with stateful sliders, timeframe toggles, and reactive calculation engines.',\n    codeSnippet: `// Composing live reactive telemetry in your blocks:\\nconst activeCohort = ref<'enterprise' | 'growth'>('enterprise')\\nconst liveThroughput = computed(() => activeCohort.value === 'enterprise' ? '1.2M QPS' : '45k QPS')`,\n    stats: [\n      { label: 'Interactive Demos', value: '450+ Blocks' },\n      { label: 'Keyboard Ergonomics', value: 'WCAG AA' },\n      { label: 'Telemetry Visualizers', value: 'Real SVG Sparklines' },\n    ],\n    checks: [\n      'Functional master-detail views and comparative toggles',\n      'Integrated mock API testers, terminal sandboxes, and pricing calculators',\n      'Zero placeholder text or dummy lorum ipsum shapes',\n    ],\n  },\n  {\n    id: 'performance',\n    title: 'Sub-Millisecond Speed',\n    subtitle: 'OKLCH Tailwind v4 Engine',\n    icon: Zap,\n    tag: 'Lighthouse 100',\n    headline: 'Engineered for zero-latency interactions and pristine Lighthouse scores.',\n    description:\n      'Built on modern CSS custom properties and lightweight headless primitives, our blocks avoid hefty client-side runtime libraries, keeping your First Contentful Paint blazing fast.',\n    codeSnippet: `@theme inline {\\n  --color-primary: oklch(0.205 0 0);\\n  --color-primary-foreground: oklch(0.985 0 0);\\n  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);\\n}`,\n    stats: [\n      { label: 'Interaction to Next Paint (INP)', value: '< 16ms' },\n      { label: 'Lighthouse Score', value: '100 / 100' },\n      { label: 'CSS Engine', value: 'Tailwind CSS v4' },\n    ],\n    checks: [\n      'OKLCH native color spaces with automatic light/dark mode adaptation',\n      'Hardware-accelerated transforms and calibrated spring physics',\n      'Zero runtime JavaScript CSS parsing or CSS-in-JS style injection',\n    ],\n  },\n]\n\nconst activeTabId = ref<string>('unbundled')\nconst copiedCode = ref(false)\n\nconst currentTab = computed(() => tabs.find((t) => t.id === activeTabId.value)!)\n\nfunction copySnippet() {\n  navigator.clipboard.writeText(currentTab.value.codeSnippet)\n  copiedCode.value = true\n  setTimeout(() => (copiedCode.value = false), 2000)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"feature-interactive-tabs\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Subtle Radial Glow -->\n    <div\n      class=\"bg-primary/5 pointer-events-none absolute top-1/2 left-1/2 -z-10 h-80 w-full max-w-5xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl\"\n    />\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          <LayoutGrid class=\"text-primary size-3.5\" />\n          Architecture Differentiation\n        </Badge>\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          Why engineering teams choose UIPKGE.\n        </h2>\n        <p class=\"text-muted-foreground text-base\">\n          Explore the architectural pillars behind our unbundled component registry.\n        </p>\n      </div>\n\n      <!-- Feature Interactive Tabs Workbench -->\n      <div class=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n        <!-- Left Column: Master Feature Navigation Rail (4 Cols) -->\n        <div class=\"flex flex-col gap-2.5 lg:col-span-4\">\n          <button\n            v-for=\"tab in tabs\"\n            :key=\"tab.id\"\n            type=\"button\"\n            class=\"group relative overflow-hidden rounded-2xl border p-4 text-left transition-[colors,box-shadow,transform] duration-150 active:scale-[0.98]\"\n            :class=\"\n              activeTabId === tab.id\n                ? 'border-primary/80 bg-card ring-primary/20 shadow-sm ring-1'\n                : 'border-border bg-card/60 hover:border-border hover:bg-card'\n            \"\n            @click=\"activeTabId = tab.id\"\n          >\n            <div class=\"flex items-start gap-3.5\">\n              <div\n                class=\"flex size-9 shrink-0 items-center justify-center rounded-lg font-mono transition-colors\"\n                :class=\"\n                  activeTabId === tab.id\n                    ? 'bg-primary text-primary-foreground font-bold shadow-xs'\n                    : 'bg-muted text-muted-foreground group-hover:text-foreground'\n                \"\n              >\n                <component :is=\"tab.icon\" class=\"size-4\" />\n              </div>\n\n              <div class=\"min-w-0 space-y-0.5\">\n                <div class=\"flex items-center justify-between gap-2\">\n                  <h3 class=\"text-foreground truncate font-mono text-xs font-bold\">{{ tab.title }}</h3>\n                  <span\n                    class=\"size-1.5 shrink-0 rounded-full\"\n                    :class=\"activeTabId === tab.id ? 'bg-primary animate-pulse' : 'bg-transparent'\"\n                  />\n                </div>\n                <p class=\"text-muted-foreground truncate text-xs\">{{ tab.subtitle }}</p>\n              </div>\n            </div>\n          </button>\n        </div>\n\n        <!-- Right Column: Interactive Detail Sandbox Panel (8 Cols) -->\n        <Card class=\"border-border bg-card/95 space-y-6 rounded-2xl p-6 text-left shadow-sm sm:p-8 lg:col-span-8\">\n          <!-- Detail Header -->\n          <div class=\"border-border/80 space-y-3 border-b pb-6\">\n            <div class=\"flex flex-wrap items-center justify-between gap-2\">\n              <Badge variant=\"outline\" class=\"text-primary bg-primary/5 border-primary/20 font-mono text-xs\">\n                {{ currentTab.tag }}\n              </Badge>\n              <span class=\"text-muted-foreground font-mono text-xs\">Architectural Specification</span>\n            </div>\n            <h3 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n              {{ currentTab.headline }}\n            </h3>\n            <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n              {{ currentTab.description }}\n            </p>\n          </div>\n\n          <!-- Code Snippet Sandbox Preview -->\n          <div class=\"space-y-2\">\n            <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n              <span class=\"flex items-center gap-1.5\">\n                <Terminal class=\"text-primary size-3.5\" /> Source Implementation\n              </span>\n              <button type=\"button\" class=\"text-primary flex items-center gap-1 hover:underline\" @click=\"copySnippet\">\n                <Check v-if=\"copiedCode\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copiedCode ? 'Copied' : 'Copy Snippet' }}</span>\n              </button>\n            </div>\n            <pre\n              class=\"border-border bg-muted/40 text-foreground overflow-x-auto rounded-xl border p-4 font-mono text-xs leading-relaxed\"\n            ><code>{{ currentTab.codeSnippet }}</code></pre>\n          </div>\n\n          <!-- 3-Pillar Telemetry Metrics Bar -->\n          <div class=\"grid grid-cols-1 gap-3 pt-2 sm:grid-cols-3\">\n            <div\n              v-for=\"(st, idx) in currentTab.stats\"\n              :key=\"idx\"\n              class=\"border-border bg-background/50 space-y-0.5 rounded-xl border p-3.5\"\n            >\n              <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">{{ st.label }}</p>\n              <p class=\"text-foreground font-mono text-base font-bold\">{{ st.value }}</p>\n            </div>\n          </div>\n\n          <!-- Technical Checkmarks List -->\n          <div class=\"border-border/60 space-y-2 border-t pt-2\">\n            <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">Verified Enforcements</p>\n            <ul class=\"space-y-2\">\n              <li\n                v-for=\"(chk, idx) in currentTab.checks\"\n                :key=\"idx\"\n                class=\"text-foreground/90 flex items-start gap-2 text-xs\"\n              >\n                <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>{{ chk }}</span>\n              </li>\n            </ul>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureInteractiveTabs.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.",
  "categories": [
    "marketing"
  ]
}