{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-interactive-tabs",
  "title": "Feature Interactive Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/feature-interactive-tabs/FeatureInteractiveTabs.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface FeatureTab {\n    id: string\n    title: string\n    subtitle: string\n    icon: Component\n    tag: string\n    headline: string\n    description: string\n    codeSnippet: string\n    stats: { label: string; value: string }[]\n    checks: string[]\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Activity, Check, CheckCircle2, Code2, Copy, LayoutGrid, Terminal, Zap } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Card } from '$lib/components/ui/card'\n\n  const tabs: FeatureTab[] = [\n    {\n      id: 'unbundled',\n      title: 'Zero-Package Registry',\n      subtitle: 'Direct 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-svelte@latest add https://uipkge.dev/r/svelte/hero-developer-terminal.json\\n\\n// Output in your repo:\\n// \\u2714 Placed components/blocks/HeroDeveloperTerminal.svelte\\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 Svelte runes 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 Svelte 5 & React 19',\n      icon: LayoutGrid,\n      tag: '1:1 Parity',\n      headline: 'One design system, identical aesthetics across Svelte and React.',\n      description:\n        'Whether your engineering organization uses SvelteKit, Vite, Next.js, or Astro, every primitive and block shares identical OKLCH color spaces, CVA variant tokens, and spring transition curves.',\n      codeSnippet: `// Svelte 5 runes:\\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: 'Svelte 5 + React 19' },\n        { label: 'Shared CVA Tokens', value: '31 Primitives' },\n      ],\n      checks: [\n        'Hand-rolled runes state (Svelte) and Radix UI (React) accessible engines',\n        'Automated CI check verifying cross-framework class string equality',\n        'Identical behavior in Svelte 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:\\nlet activeCohort = $state<'enterprise' | 'growth'>('enterprise')\\nconst liveThroughput = $derived(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 runes 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\n  let activeTabId = $state<string>('unbundled')\n  let copiedCode = $state(false)\n\n  const currentTab = $derived(tabs.find((t) => t.id === activeTabId)!)\n\n  function copySnippet() {\n    navigator.clipboard.writeText(currentTab.codeSnippet)\n    copiedCode = true\n    setTimeout(() => (copiedCode = false), 2000)\n  }\n</script>\n\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  ></div>\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        {#each tabs as tab (tab.id)}\n          {@const Icon = tab.icon}\n          <button\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] {activeTabId ===\n            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            onclick={() => (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 {activeTabId ===\n                tab.id\n                  ? 'bg-primary text-primary-foreground font-bold shadow-xs'\n                  : 'bg-muted text-muted-foreground group-hover:text-foreground'}\"\n              >\n                <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 {activeTabId === tab.id\n                      ? 'bg-primary animate-pulse'\n                      : 'bg-transparent'}\"\n                  ></span>\n                </div>\n                <p class=\"text-muted-foreground truncate text-xs\">{tab.subtitle}</p>\n              </div>\n            </div>\n          </button>\n        {/each}\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\" onclick={copySnippet}>\n              {#if copiedCode}\n                <Check class=\"text-success size-3\" />\n              {:else}\n                <Copy class=\"size-3\" />\n              {/if}\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\"><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          {#each currentTab.stats as st, idx (idx)}\n            <div class=\"border-border bg-background/50 space-y-0.5 rounded-xl border p-3.5\">\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          {/each}\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            {#each currentTab.checks as chk, idx (idx)}\n              <li class=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n                <span>{chk}</span>\n              </li>\n            {/each}\n          </ul>\n        </div>\n      </Card>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/feature-interactive-tabs/FeatureInteractiveTabs.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/card.json"
  ],
  "description": "Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.",
  "categories": [
    "marketing"
  ]
}