{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-interactive-tabs",
  "title": "Feature Interactive Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-interactive-tabs/FeatureInteractiveTabs.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Activity, Check, CheckCircle2, Code2, Copy, LayoutGrid, Terminal, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\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@latest add https://uipkge.dev/r/react/hero-developer-terminal.json\\n\\n// Output in your repo:\\n// \\u2714 Placed components/blocks/HeroDeveloperTerminal.tsx\\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, setActiveCohort] = React.useState<'enterprise' | 'growth'>('enterprise')\\nconst liveThroughput = activeCohort === '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\nexport interface FeatureInteractiveTabsProps {\n  className?: string\n}\n\nexport function FeatureInteractiveTabs({ className }: FeatureInteractiveTabsProps) {\n  const [activeTabId, setActiveTabId] = React.useState<string>('unbundled')\n  const [copiedCode, setCopiedCode] = React.useState(false)\n\n  const currentTab = tabs.find((t) => t.id === activeTabId)!\n\n  const copySnippet = () => {\n    navigator.clipboard.writeText(currentTab.codeSnippet)\n    setCopiedCode(true)\n    setTimeout(() => setCopiedCode(false), 2000)\n  }\n\n  return (\n    <section\n      data-slot=\"feature-interactive-tabs\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      {/* Subtle Radial Glow */}\n      <div className=\"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      <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            <LayoutGrid className=\"text-primary size-3.5\" />\n            Architecture Differentiation\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Why engineering teams choose UIPKGE.\n          </h2>\n          <p className=\"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 className=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n          {/* Left Column: Master Feature Navigation Rail (4 Cols) */}\n          <div className=\"flex flex-col gap-2.5 lg:col-span-4\">\n            {tabs.map((tab) => {\n              const Icon = tab.icon\n              const isActive = activeTabId === tab.id\n              return (\n                <button\n                  key={tab.id}\n                  type=\"button\"\n                  className={cn(\n                    'group relative overflow-hidden rounded-2xl border p-4 text-left transition-[colors,box-shadow,transform] duration-150 active:scale-[0.98]',\n                    isActive\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                  onClick={() => setActiveTabId(tab.id)}\n                >\n                  <div className=\"flex items-start gap-3.5\">\n                    <div\n                      className={cn(\n                        'flex size-9 shrink-0 items-center justify-center rounded-lg font-mono transition-colors',\n                        isActive\n                          ? 'bg-primary text-primary-foreground font-bold shadow-xs'\n                          : 'bg-muted text-muted-foreground group-hover:text-foreground',\n                      )}\n                    >\n                      <Icon className=\"size-4\" />\n                    </div>\n\n                    <div className=\"min-w-0 space-y-0.5\">\n                      <div className=\"flex items-center justify-between gap-2\">\n                        <h3 className=\"text-foreground truncate font-mono text-xs font-bold\">{tab.title}</h3>\n                        <span\n                          className={cn(\n                            'size-1.5 shrink-0 rounded-full',\n                            isActive ? 'bg-primary animate-pulse' : 'bg-transparent',\n                          )}\n                        />\n                      </div>\n                      <p className=\"text-muted-foreground truncate text-xs\">{tab.subtitle}</p>\n                    </div>\n                  </div>\n                </button>\n              )\n            })}\n          </div>\n\n          {/* Right Column: Interactive Detail Sandbox Panel (8 Cols) */}\n          <Card className=\"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 className=\"border-border/80 space-y-3 border-b pb-6\">\n              <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                <Badge variant=\"outline\" className=\"text-primary bg-primary/5 border-primary/20 font-mono text-xs\">\n                  {currentTab.tag}\n                </Badge>\n                <span className=\"text-muted-foreground font-mono text-xs\">Architectural Specification</span>\n              </div>\n              <h3 className=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">{currentTab.headline}</h3>\n              <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">{currentTab.description}</p>\n            </div>\n\n            {/* Code Snippet Sandbox Preview */}\n            <div className=\"space-y-2\">\n              <div className=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                <span className=\"flex items-center gap-1.5\">\n                  <Terminal className=\"text-primary size-3.5\" /> Source Implementation\n                </span>\n                <button\n                  type=\"button\"\n                  className=\"text-primary flex items-center gap-1 hover:underline\"\n                  onClick={copySnippet}\n                >\n                  {copiedCode ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span>{copiedCode ? 'Copied' : 'Copy Snippet'}</span>\n                </button>\n              </div>\n              <pre className=\"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>\n              </pre>\n            </div>\n\n            {/* 3-Pillar Telemetry Metrics Bar */}\n            <div className=\"grid grid-cols-1 gap-3 pt-2 sm:grid-cols-3\">\n              {currentTab.stats.map((st, idx) => (\n                <div key={idx} className=\"border-border bg-background/50 space-y-0.5 rounded-xl border p-3.5\">\n                  <p className=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">{st.label}</p>\n                  <p className=\"text-foreground font-mono text-base font-bold\">{st.value}</p>\n                </div>\n              ))}\n            </div>\n\n            {/* Technical Checkmarks List */}\n            <div className=\"border-border/60 space-y-2 border-t pt-2\">\n              <p className=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">Verified Enforcements</p>\n              <ul className=\"space-y-2\">\n                {currentTab.checks.map((chk, idx) => (\n                  <li key={idx} className=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                    <CheckCircle2 className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>{chk}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default FeatureInteractiveTabs\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureInteractiveTabs.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.",
  "categories": [
    "marketing"
  ]
}