{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-interactive-tabs", "title": "Feature Interactive Tabs", "type": "registry:block", "description": "Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.", "categories": [ "marketing" ], "files": [ { "path": "packages/elements-lit/src/blocks/feature-interactive-tabs/feature-interactive-tabs.ts", "content": "import { LitElement, css, html } from 'lit'\nimport { Activity, Check, CheckCircle2, Code2, Copy, LayoutGrid, Terminal, Zap, type IconNode } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect import: registers for standalone use (consumers\n// who install only this block still get a working badge).\nimport '../../components/badge/badge'\n\ninterface FeatureTab {\n id: string\n title: string\n subtitle: string\n icon: IconNode\n iconName: string\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 iconName: 'code-2',\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// ✔ Placed components/blocks/HeroDeveloperTerminal.tsx\\n// ✔ 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 iconName: 'layout-grid',\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\\n\\n// React 19 JSX:\\n\\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 iconName: '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 iconName: '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\n/**\n * — the registry FeatureInteractiveTabs block\n * as a web component.\n *\n * Class strings are React's FeatureInteractiveTabs verbatim. React state\n * (useState) becomes @state fields; the copy-label timeout is cleared in\n * `disconnectedCallback`. The detail panel is a plain div carrying the\n * registry Card classes (see the login-01 block).\n */\nexport class UipFeatureInteractiveTabs extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n activeTabId: { state: true },\n copiedCode: { state: true },\n }\n\n private activeTabId = 'unbundled'\n private copiedCode = false\n private timer?: number\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'feature-interactive-tabs')\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.timer) window.clearTimeout(this.timer)\n }\n\n private copySnippet() {\n const current = tabs.find((t) => t.id === this.activeTabId) ?? tabs[0]\n try {\n navigator.clipboard?.writeText(current.codeSnippet)?.catch(() => {})\n } catch {\n // Clipboard unavailable (insecure context): still flash the label.\n }\n this.copiedCode = true\n if (this.timer) window.clearTimeout(this.timer)\n this.timer = window.setTimeout(() => {\n this.copiedCode = false\n }, 2000)\n }\n\n render() {\n const currentTab = tabs.find((t) => t.id === this.activeTabId) ?? tabs[0]\n return html`\n \n
\n\n
\n
\n \n ${icon(LayoutGrid, 'layout-grid', 'text-primary size-3.5')} Architecture Differentiation\n \n

\n Why engineering teams choose UIPKGE.\n

\n

\n Explore the architectural pillars behind our unbundled component registry.\n

\n
\n\n
\n
\n ${tabs.map((tab) => {\n const isActive = this.activeTabId === tab.id\n return html` {\n this.activeTabId = tab.id\n }}\n >\n
\n \n ${icon(tab.icon, tab.iconName, 'size-4')}\n
\n\n
\n
\n

${tab.title}

\n \n
\n

${tab.subtitle}

\n
\n
\n `\n })}\n
\n\n \n
\n
\n \n ${currentTab.tag}\n \n Architectural Specification\n
\n

${currentTab.headline}

\n

${currentTab.description}

\n
\n\n
\n
\n \n ${icon(Terminal, 'terminal', 'text-primary size-3.5')} Source Implementation\n \n \n ${this.copiedCode ? icon(Check, 'check', 'text-success size-3') : icon(Copy, 'copy', 'size-3')}\n ${this.copiedCode ? 'Copied' : 'Copy Snippet'}\n \n
\n ${currentTab.codeSnippet}\n
\n\n
\n ${currentTab.stats.map(\n (st) => html`
\n

${st.label}

\n

${st.value}

\n
`,\n )}\n
\n\n
\n

Verified Enforcements

\n
    \n ${currentTab.checks.map(\n (chk) => html`
  • \n ${icon(CheckCircle2, 'circle-check-big', 'text-success mt-0.5 size-4 shrink-0')}\n ${chk}\n
    • `,\n )}\n
\n
\n
\n \n \n \n `\n }\n}\n\ncustomElements.get('uip-feature-interactive-tabs') ||\n customElements.define('uip-feature-interactive-tabs', UipFeatureInteractiveTabs)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-feature-interactive-tabs': UipFeatureInteractiveTabs\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/feature-interactive-tabs/feature-interactive-tabs.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/lit-core.json" ] }