{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero",
  "title": "Hero",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero/Hero01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, PlayCircle } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\n</script>\n\n<template>\n  <section data-slot=\"hero-01\" class=\"bg-background relative overflow-hidden\">\n    <div class=\"relative mx-auto max-w-6xl px-6 py-24 lg:py-32\">\n      <div class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n        <div class=\"space-y-6\">\n          <h1 class=\"text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl\">\n            The platform your team will actually use.\n          </h1>\n          <p class=\"text-muted-foreground max-w-xl text-lg\">\n            One workspace for everything your team needs. Built on shadcn-vue primitives — fast, accessible, easy to\n            customise.\n          </p>\n          <div class=\"flex flex-wrap items-center gap-3\">\n            <Button size=\"lg\">\n              Start free trial\n              <ArrowRight class=\"ml-2 size-4\" />\n            </Button>\n            <Button size=\"lg\" variant=\"outline\">\n              <PlayCircle class=\"mr-2 size-4\" />\n              Watch demo (2 min)\n            </Button>\n          </div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm\">\n            <span>★★★★★ 4.9 on G2</span>\n            <span>14-day free trial</span>\n            <span>No credit card required</span>\n          </div>\n        </div>\n\n        <div class=\"relative\">\n          <Card class=\"absolute -top-4 right-0 w-56 rotate-2 shadow-lg\">\n            <CardContent class=\"space-y-1 p-4\">\n              <p class=\"text-muted-foreground text-xs uppercase\">Active users</p>\n              <p class=\"text-2xl font-semibold\">1,284</p>\n              <p class=\"text-success text-xs\">+8.2% MoM</p>\n            </CardContent>\n          </Card>\n          <Card class=\"absolute top-32 -left-2 w-52 -rotate-3 shadow-lg\">\n            <CardContent class=\"space-y-1 p-4\">\n              <p class=\"text-muted-foreground text-xs uppercase\">Uptime</p>\n              <p class=\"text-2xl font-semibold\">100%</p>\n              <p class=\"text-muted-foreground text-xs\">12 cycles, 0 misses</p>\n            </CardContent>\n          </Card>\n          <Card class=\"ml-auto w-72 shadow-xl\">\n            <CardHeader>\n              <CardTitle class=\"text-base\">Onboarding queue</CardTitle>\n              <CardDescription>3 starting Monday</CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-3\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar class=\"size-8\">\n                  <AvatarFallback>LW</AvatarFallback>\n                </Avatar>\n                <div class=\"flex-1\">\n                  <p class=\"text-sm font-medium\">Lena Wei</p>\n                  <p class=\"text-muted-foreground text-xs\">Engineering</p>\n                </div>\n                <Badge variant=\"secondary\">Pending</Badge>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <Avatar class=\"size-8\">\n                  <AvatarFallback>JR</AvatarFallback>\n                </Avatar>\n                <div class=\"flex-1\">\n                  <p class=\"text-sm font-medium\">Joaquín Reyes</p>\n                  <p class=\"text-muted-foreground text-xs\">Engineering</p>\n                </div>\n                <Badge variant=\"secondary\">Pending</Badge>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <Avatar class=\"size-8\">\n                  <AvatarFallback>PS</AvatarFallback>\n                </Avatar>\n                <div class=\"flex-1\">\n                  <p class=\"text-sm font-medium\">Priya Shah</p>\n                  <p class=\"text-muted-foreground text-xs\">Engineering</p>\n                </div>\n                <Badge variant=\"secondary\">Pending</Badge>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/Hero01.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/Hero3dTiltInteractiveCanvas.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Code2, Cpu, Layers, MousePointerClick, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nexport interface Hero3dTiltInteractiveCanvasProps {\n  title?: string\n  description?: string\n  primaryActionLabel?: string\n  secondaryActionLabel?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<Hero3dTiltInteractiveCanvasProps>(), {\n  title: 'Fluid 3D Spatial Architecture rendered in pure CSS.',\n  description:\n    'Experience zero-latency hardware-accelerated 3D perspective transforms with dynamic specular reflections and layered z-depth primitives.',\n  primaryActionLabel: 'Explore 3D Primitives',\n  secondaryActionLabel: 'Copy CSS Matrix Code',\n})\n\nconst cardRef = ref<HTMLDivElement | null>(null)\nconst rotateX = ref(0)\nconst rotateY = ref(0)\nconst glareX = ref(50)\nconst glareY = ref(50)\nconst isHovering = ref(false)\n\nfunction handleMouseMove(e: MouseEvent) {\n  if (!cardRef.value) return\n  const rect = cardRef.value.getBoundingClientRect()\n  const x = e.clientX - rect.left\n  const y = e.clientY - rect.top\n\n  const centerX = rect.width / 2\n  const centerY = rect.height / 2\n\n  // Limit max rotation to +/- 14 degrees\n  rotateY.value = Number(((x - centerX) / (centerX / 14)).toFixed(2))\n  rotateX.value = Number((-(y - centerY) / (centerY / 14)).toFixed(2))\n\n  glareX.value = Number(((x / rect.width) * 100).toFixed(1))\n  glareY.value = Number(((y / rect.height) * 100).toFixed(1))\n}\n\nfunction handleMouseEnter() {\n  isHovering.value = true\n}\n\nfunction handleMouseLeave() {\n  isHovering.value = false\n  rotateX.value = 0\n  rotateY.value = 0\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-3d-tilt-interactive-canvas\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#3d-spatial\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Layers class=\"text-primary size-3.5\" />\n          <span>Spatial 3D Design Engineering</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h1 class=\"text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          {{ title }}\n        </h1>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <div class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button size=\"lg\" class=\"gap-2 shadow-xs\">\n            <span>{{ primaryActionLabel }}</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n          <Button variant=\"outline\" size=\"lg\" class=\"gap-2\">\n            <Code2 class=\"size-4\" />\n            <span>{{ secondaryActionLabel }}</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- 3D Perspective Stage Container -->\n      <div class=\"mt-14 flex flex-col items-center justify-center [perspective:1200px]\">\n        <div\n          ref=\"cardRef\"\n          :style=\"{\n            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,\n            transition: isHovering ? 'transform 100ms ease-out' : 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)',\n          }\"\n          class=\"border-border bg-card relative w-full max-w-2xl cursor-crosshair overflow-hidden rounded-2xl border p-8 shadow-xl select-none [transform-style:preserve-3d]\"\n          @mousemove=\"handleMouseMove\"\n          @mouseenter=\"handleMouseEnter\"\n          @mouseleave=\"handleMouseLeave\"\n        >\n          <!-- Dynamic Specular Reflection / Glare Gradient -->\n          <div\n            :style=\"{\n              background: `radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,0.12) 0%, transparent 60%)`,\n            }\"\n            class=\"pointer-events-none absolute inset-0 transition-opacity duration-300\"\n            :class=\"isHovering ? 'opacity-100' : 'opacity-0'\"\n          />\n\n          <!-- Layer 1: Base Grid Info -->\n          <div class=\"border-border flex items-center justify-between border-b pb-4\">\n            <div class=\"flex items-center gap-2\">\n              <Layers class=\"text-primary size-4\" />\n              <span class=\"text-foreground text-sm font-bold\">Spatial Component Viewport</span>\n            </div>\n            <Badge variant=\"outline\" class=\"border-border text-muted-foreground font-mono text-xs\">\n              Pitch: {{ rotateX }}&deg; &bull; Yaw: {{ rotateY }}&deg;\n            </Badge>\n          </div>\n\n          <!-- Layer 2: Floating 3D Cards & Primitives (Preserve-3d + translateZ) -->\n          <div class=\"mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n            <!-- Floating Badge Card 1 -->\n            <div\n              :style=\"{ transform: 'translateZ(35px)' }\"\n              class=\"border-border/90 bg-muted/40 space-y-2 rounded-xl border p-4 shadow-md transition-transform\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <Cpu class=\"text-primary size-4\" />\n                <span class=\"text-foreground text-xs font-bold\">GPU Accelerated Matrix</span>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Zero JavaScript bundle runtime. Calculated via pure CSS 3D matrix transforms.\n              </p>\n            </div>\n\n            <!-- Floating Badge Card 2 -->\n            <div\n              :style=\"{ transform: 'translateZ(50px)' }\"\n              class=\"border-primary/30 bg-primary/5 space-y-2 rounded-xl border p-4 shadow-lg transition-transform\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <Zap class=\"text-success size-4\" />\n                <span class=\"text-foreground text-xs font-bold\">Specular Ray Diffusion</span>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Dynamic light reflection calculates azimuth angles relative to mouse coordinates.\n              </p>\n            </div>\n          </div>\n\n          <!-- Bottom Telemetry Bar -->\n          <div\n            :style=\"{ transform: 'translateZ(25px)' }\"\n            class=\"border-border/80 bg-background/90 mt-6 flex items-center justify-between rounded-lg border p-3 text-xs\"\n          >\n            <div class=\"text-muted-foreground flex items-center gap-2\">\n              <MousePointerClick class=\"text-primary size-3.5\" />\n              <span>Hover and move cursor to orient viewport</span>\n            </div>\n            <span class=\"text-foreground font-mono text-xs font-bold\">\n              {{ isHovering ? 'Tracking Live' : 'Hover to Orbit' }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/Hero3dTiltInteractiveCanvas.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroAsciiTerminalStream.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Terminal } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface HeroAsciiTerminalStreamProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst ASCII_BANNER = `\n  _   _ ___ ____  _  ______ _____ \n | | | |_ _|  _ \\\\| |/ / ___| ____|\n | | | || || |_) | ' / |  _|  _|  \n | |_| || ||  __/| . \\\\ |_| | |___ \n  \\\\___/|___|_|   |_|\\\\_\\\\____|_____|\n  ================================\n  DUAL-FRAMEWORK UNBUNDLED REGISTRY\n`\n\nconst props = withDefaults(defineProps<HeroAsciiTerminalStreamProps>(), {\n  title: 'Deterministic UI engineering stream for technical operators.',\n  description:\n    'Inspect build outputs, verify zero-dependency bundle telemetry, and stream component ASTs in real time with hardware precision.',\n})\n\nconst terminalLogs = ref<string[]>([\n  'INIT: Initializing UIPKGE dual-framework AST registry...',\n  'RESOLVE: Synchronizing @uipkge/button -> Vue 3.5 & React 19',\n  'OKLCH: Loaded 48 semantic color variables from packages/shared',\n  'BENCHMARK: Cold compilation completed in 1.42ms (zero dead code)',\n  'READY: Terminal listening on edge:8080',\n])\n\nconst inputCommand = ref('')\nconst isRunning = ref(false)\n\nfunction runCommand(cmd: string) {\n  const cleanCmd = cmd.trim().toLowerCase()\n  if (!cleanCmd) return\n\n  terminalLogs.value.push(`$ ${cleanCmd}`)\n  isRunning.value = true\n\n  setTimeout(() => {\n    if (cleanCmd === 'clear') {\n      terminalLogs.value = ['TERMINAL: Buffer cleared.']\n    } else if (cleanCmd === 'bench') {\n      terminalLogs.value.push('BENCHMARK: Button (1.1kb) | Modal (2.8kb) | DataGrid (4.2kb)')\n      terminalLogs.value.push('RESULT: 100% Tree-shaken bundle efficiency.')\n    } else if (cleanCmd === 'parity') {\n      terminalLogs.value.push('PARITY: 31 variant tokens evaluated across Vue & React.')\n      terminalLogs.value.push('STATUS: [PASS] Zero framework divergence detected.')\n    } else if (cleanCmd === 'tree') {\n      terminalLogs.value.push('TREE: packages/registry-vue (471) <-> packages/registry-react (471)')\n    } else {\n      terminalLogs.value.push(`EXEC: Command '${cleanCmd}' executed with exit code 0.`)\n    }\n    isRunning.value = false\n  }, 400)\n\n  inputCommand.value = ''\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-ascii-terminal-stream\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#ascii-terminal\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Terminal class=\"text-primary size-3.5\" />\n          <span>Real-time ASCII Telemetry Stream</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h1 class=\"text-foreground text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          {{ title }}\n        </h1>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <!-- Command Chips -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <span class=\"text-muted-foreground text-xs\">Quick commands:</span>\n          <button\n            v-for=\"chip in ['bench', 'parity', 'tree', 'clear']\"\n            :key=\"chip\"\n            type=\"button\"\n            class=\"border-border bg-muted/40 hover:bg-muted text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n            @click=\"runCommand(chip)\"\n          >\n            ${{ chip }}\n          </button>\n        </div>\n      </div>\n\n      <!-- Main ASCII Terminal Card -->\n      <div class=\"mx-auto mt-12 max-w-4xl\">\n        <Card class=\"border-border bg-card overflow-hidden font-mono text-xs shadow-lg\">\n          <!-- Terminal Title Bar -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"flex gap-1.5\">\n                <span class=\"bg-destructive/80 size-2.5 rounded-full\" />\n                <span class=\"bg-warning/80 size-2.5 rounded-full\" />\n                <span class=\"bg-success/80 size-2.5 rounded-full\" />\n              </div>\n              <span class=\"text-foreground pl-2 text-xs font-bold\">uipkge-telemetry-cli &bull; zsh</span>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-3 text-xs\">\n              <span class=\"flex items-center gap-1\">\n                <span class=\"bg-success size-1.5 rounded-full\" />\n                <span>60 FPS</span>\n              </span>\n              <span>1.2MB RSS</span>\n            </div>\n          </div>\n\n          <!-- Terminal Content Viewport -->\n          <CardContent class=\"bg-background/95 space-y-4 p-6\">\n            <!-- ASCII Art Banner -->\n            <pre\n              class=\"text-primary overflow-x-auto text-xs leading-tight font-bold select-none\"\n            ><code>{{ ASCII_BANNER }}</code></pre>\n\n            <!-- Logs Stream Output -->\n            <div class=\"border-border/80 max-h-56 space-y-1.5 overflow-y-auto border-t pt-2 text-xs\">\n              <div\n                v-for=\"(log, idx) in terminalLogs\"\n                :key=\"idx\"\n                :class=\"\n                  cn(\n                    'leading-relaxed',\n                    log.startsWith('$')\n                      ? 'text-primary font-bold'\n                      : log.includes('PASS') || log.includes('OKLCH')\n                        ? 'text-success'\n                        : 'text-muted-foreground',\n                  )\n                \"\n              >\n                {{ log }}\n              </div>\n            </div>\n\n            <!-- Terminal Interactive Input Prompt -->\n            <form\n              class=\"border-border flex items-center gap-2 border-t pt-3\"\n              @submit.prevent=\"runCommand(inputCommand)\"\n            >\n              <span class=\"text-primary font-bold\">&gt;</span>\n              <input\n                v-model=\"inputCommand\"\n                type=\"text\"\n                placeholder=\"Type command (e.g. bench, parity, clear)...\"\n                class=\"text-foreground placeholder:text-muted-foreground flex-1 bg-transparent text-xs focus-visible:outline-none\"\n              />\n              <Button size=\"sm\" type=\"submit\" class=\"h-7 gap-1 px-2.5 text-xs\">\n                <span>Run</span>\n                <ArrowRight class=\"size-3\" />\n              </Button>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroAsciiTerminalStream.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroBentoPreviewGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Activity, ArrowRight, CheckCircle2, Code2, Cpu, Layers, Moon, Palette, Play, Sun, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\n// Tile 1: OKLCH Palette preview state\nconst colorThemes = [\n  { name: 'Emerald', hue: 'oklch(0.65 0.22 145)', hex: '#10b981' },\n  { name: 'Indigo', hue: 'oklch(0.60 0.24 275)', hex: '#6366f1' },\n  { name: 'Amber', hue: 'oklch(0.75 0.18 70)', hex: '#f59e0b' },\n  { name: 'Rose', hue: 'oklch(0.65 0.24 15)', hex: '#f43f5e' },\n]\nconst activeColorIndex = ref(0)\nconst isDarkPreview = ref(true)\n\n// Tile 2: Dual framework parity toggle\nconst activeFramework = ref<'vue' | 'react'>('vue')\n\n// Tile 3: Bundle slider\nconst componentCount = ref(12)\nconst estimatedSavings = computed(() => (componentCount.value * 42).toFixed(0))\n\n// Tile 4: Query execution simulator\nconst isRunningQuery = ref(false)\nconst queryLatency = ref('12ms')\n\nfunction triggerQuery() {\n  isRunningQuery.value = true\n  setTimeout(() => {\n    queryLatency.value = `${Math.floor(Math.random() * 8) + 8}ms`\n    isRunningQuery.value = false\n  }, 400)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-bento-preview-grid\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Center Ambient Glow -->\n    <div\n      class=\"bg-primary/10 pointer-events-none absolute top-1/4 left-1/2 -z-10 h-96 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 text-center\">\n      <!-- Headline & Subtitle -->\n      <div class=\"mx-auto max-w-3xl space-y-5\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Layers class=\"text-primary size-3.5\" />\n          The Unbundled Design Engineering Platform\n        </Badge>\n\n        <h1 class=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          Everything design engineers need to build at lightspeed.\n        </h1>\n\n        <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n          Tactile workbenches, OKLCH fluid color palettes, and guaranteed cross-framework parity—composed right in your\n          hero.\n        </p>\n\n        <!-- CTA Buttons -->\n        <div class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button as=\"a\" href=\"#explore\" size=\"lg\" class=\"gap-2 font-semibold shadow-xs\">\n            <span>Explore 300+ Workbenches</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n\n          <Button as=\"a\" href=\"#docs\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <Code2 class=\"text-muted-foreground size-4\" />\n            <span>View Architecture</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- 3-Column Asymmetric Bento Hero Grid -->\n      <div class=\"mx-auto grid max-w-6xl grid-cols-1 gap-4 pt-4 text-left sm:gap-6 md:grid-cols-3\">\n        <!-- Tile 1: OKLCH Theme Customizer (2 Cols) -->\n        <Card\n          class=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 shadow-lg backdrop-blur-md md:col-span-2\"\n        >\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-primary inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                <Palette class=\"size-3.5\" /> OKLCH Dynamic Theme Engine\n              </span>\n              <Badge variant=\"outline\" class=\"font-mono text-xs\">Zero Runtime CSS</Badge>\n            </div>\n            <h3 class=\"text-foreground text-lg font-bold\">Interactive Palette & Contrast Synthesizer</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Select a brand accent and watch UI components dynamically adjust perceptual contrast.\n            </p>\n          </div>\n\n          <!-- Color Buttons & Live Preview -->\n          <div class=\"border-border bg-background/60 space-y-4 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <button\n                  v-for=\"(c, idx) in colorThemes\"\n                  :key=\"c.name\"\n                  type=\"button\"\n                  class=\"size-6 rounded-full border-2 transition-transform\"\n                  :class=\"\n                    activeColorIndex === idx\n                      ? 'border-foreground scale-125 shadow-xs'\n                      : 'border-transparent opacity-70 hover:opacity-100'\n                  \"\n                  :style=\"{ backgroundColor: c.hex }\"\n                  @click=\"activeColorIndex = idx\"\n                />\n              </div>\n\n              <div class=\"text-muted-foreground flex items-center gap-1 font-mono text-xs\">\n                <span>Mode:</span>\n                <button\n                  type=\"button\"\n                  class=\"border-border hover:bg-muted rounded border p-1 transition-colors\"\n                  @click=\"isDarkPreview = !isDarkPreview\"\n                >\n                  <Sun v-if=\"!isDarkPreview\" class=\"text-warning size-3.5\" />\n                  <Moon v-else class=\"text-muted-foreground size-3.5\" />\n                </button>\n              </div>\n            </div>\n\n            <!-- Live Button Demo with Active Hue -->\n            <div class=\"flex flex-wrap items-center gap-3 pt-2\">\n              <button\n                type=\"button\"\n                class=\"rounded-lg px-4 py-2 text-xs font-semibold text-white shadow-xs transition-transform active:scale-95\"\n                :style=\"{ backgroundColor: colorThemes[activeColorIndex].hex }\"\n              >\n                Synthesized Action Button\n              </button>\n              <button\n                type=\"button\"\n                class=\"border-border bg-background text-foreground hover:bg-muted rounded-lg border px-4 py-2 text-xs font-medium transition-colors\"\n              >\n                Secondary Token\n              </button>\n            </div>\n          </div>\n        </Card>\n\n        <!-- Tile 2: Dual Framework Parity (1 Col) -->\n        <Card\n          class=\"border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-lg backdrop-blur-md\"\n        >\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-success inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                <CheckCircle2 class=\"size-3.5\" /> 100% Mirror Parity\n              </span>\n            </div>\n            <h3 class=\"text-foreground text-lg font-bold\">Vue 3.5 & React 19</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Identical CVA variant matrix and AST output across both frameworks.\n            </p>\n          </div>\n\n          <!-- Framework Toggle -->\n          <div class=\"space-y-3\">\n            <div class=\"bg-muted/40 border-border grid grid-cols-2 gap-1 rounded-lg border p-1\">\n              <button\n                type=\"button\"\n                class=\"rounded-md py-1.5 font-mono text-xs font-semibold transition-colors\"\n                :class=\"activeFramework === 'vue' ? 'bg-background text-success shadow-xs' : 'text-muted-foreground'\"\n                @click=\"activeFramework = 'vue'\"\n              >\n                Vue 3.5 SFC\n              </button>\n              <button\n                type=\"button\"\n                class=\"rounded-md py-1.5 font-mono text-xs font-semibold transition-colors\"\n                :class=\"activeFramework === 'react' ? 'bg-background text-info shadow-xs' : 'text-muted-foreground'\"\n                @click=\"activeFramework = 'react'\"\n              >\n                React 19 TSX\n              </button>\n            </div>\n\n            <!-- Code snippet snippet -->\n            <div class=\"bg-muted/30 border-border/80 text-muted-foreground rounded-lg border p-3 font-mono text-xs\">\n              <span class=\"text-primary font-bold\">&gt;</span>\n              <span v-if=\"activeFramework === 'vue'\"> &lt;Button variant=\"primary\"&gt;</span>\n              <span v-else> &lt;Button variant=\"primary\"&gt;</span>\n              <div class=\"text-success mt-0.5 font-medium\">&check; CVA Type Contract Validated</div>\n            </div>\n          </div>\n        </Card>\n\n        <!-- Tile 3: Zero Bundle Bloat Calculator (1 Col) -->\n        <Card\n          class=\"border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-lg backdrop-blur-md\"\n        >\n          <div class=\"space-y-2\">\n            <span class=\"text-warning inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n              <Cpu class=\"size-3.5\" /> Zero NPM Overhead\n            </span>\n            <h3 class=\"text-foreground text-lg font-bold\">Own Your Source Code</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Slide to calculate bundle weight saved compared to monolithic packages.\n            </p>\n          </div>\n\n          <!-- Slider Widget -->\n          <div class=\"border-border bg-background/60 space-y-3 rounded-xl border p-4\">\n            <div class=\"flex items-center justify-between font-mono text-xs\">\n              <span class=\"text-muted-foreground\">Installed Blocks:</span>\n              <span class=\"text-foreground font-bold\">{{ componentCount }}</span>\n            </div>\n            <input\n              v-model.number=\"componentCount\"\n              type=\"range\"\n              min=\"1\"\n              max=\"50\"\n              class=\"accent-primary w-full cursor-pointer\"\n            />\n            <div class=\"border-border/60 flex items-center justify-between border-t pt-1 font-mono text-xs\">\n              <span class=\"text-muted-foreground\">Bundle Saved:</span>\n              <span class=\"text-success font-mono font-bold\">~{{ estimatedSavings }} kB</span>\n            </div>\n          </div>\n        </Card>\n\n        <!-- Tile 4: Sub-millisecond Execution Speed (2 Cols) -->\n        <Card\n          class=\"border-border bg-card/95 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-lg backdrop-blur-md md:col-span-2\"\n        >\n          <div class=\"flex items-center justify-between\">\n            <div class=\"space-y-1\">\n              <span class=\"text-primary inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                <Zap class=\"size-3.5\" /> Instant Hydration & Zero Latency\n              </span>\n              <h3 class=\"text-foreground text-lg font-bold\">Edge Optimized Architecture</h3>\n            </div>\n            <Button size=\"sm\" variant=\"outline\" class=\"gap-1.5 font-mono text-xs\" @click=\"triggerQuery\">\n              <Play v-if=\"!isRunningQuery\" class=\"size-3 fill-current\" />\n              <Activity v-else class=\"size-3 animate-spin\" />\n              <span>Ping Edge</span>\n            </Button>\n          </div>\n\n          <!-- Latency Telemetry Row -->\n          <div class=\"grid grid-cols-3 gap-3\">\n            <div class=\"border-border bg-background/50 space-y-0.5 rounded-xl border p-3\">\n              <p class=\"text-muted-foreground font-mono text-xs\">Round-Trip Latency</p>\n              <p class=\"text-success font-mono text-xl font-bold\">{{ queryLatency }}</p>\n            </div>\n            <div class=\"border-border bg-background/50 space-y-0.5 rounded-xl border p-3\">\n              <p class=\"text-muted-foreground font-mono text-xs\">DOM Mutation Time</p>\n              <p class=\"text-foreground font-mono text-xl font-bold\">&lt; 1.2ms</p>\n            </div>\n            <div class=\"border-border bg-background/50 space-y-0.5 rounded-xl border p-3\">\n              <p class=\"text-muted-foreground font-mono text-xs\">Accessibility Score</p>\n              <p class=\"text-primary font-mono text-xl font-bold\">100 / 100</p>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroBentoPreviewGrid.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroDeveloperTerminal.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport { ArrowRight, Check, Code2, Copy, RotateCcw } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ninterface CommandPreset {\n  id: string\n  label: string\n  command: string\n  output: string[]\n}\n\nconst presets: CommandPreset[] = [\n  {\n    id: 'init',\n    label: '1. Init Theme',\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json',\n    output: [\n      '✔ Resolving registry dependencies...',\n      '✔ Downloaded packages/shared/styles/tailwind.css (OKLCH @theme inline)',\n      '✔ Configured cn() utility in src/lib/utils.ts',\n      '✔ Injected useTheme composable with system preference sync',\n      '✔ UIPKGE bootstrap complete in 124ms.',\n    ],\n  },\n  {\n    id: 'component',\n    label: '2. Add KPI Grid',\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/kpi-grid.json',\n    output: [\n      '✔ Fetched manifest for kpi-grid (registry:ui)',\n      '✔ Added components/ui/kpi-grid/KpiGrid.vue',\n      '✔ Verified CVA variants in kpi-grid.variants.ts',\n      '✔ Installed transitive primitives: Card, Badge, Sparkline',\n      '✔ Zero npm bundle overhead added to node_modules.',\n    ],\n  },\n  {\n    id: 'verify',\n    label: '3. Parity Check',\n    command: 'npm run check:parity',\n    output: [\n      '✔ Checking 31 shared CVA variant definitions...',\n      '✔ Validating Vue 3.5 SFC and React 19 TSX type contracts...',\n      '✔ Token synchronization: styles/tailwind.css (100% match)',\n      '✔ PASS: Full cross-framework parity confirmed across all 300+ items.',\n    ],\n  },\n]\n\nconst activePresetIndex = ref(0)\nconst activeTab = ref<'terminal' | 'source'>('terminal')\nconst displayedLines = ref<string[]>([])\nconst isExecuting = ref(false)\nconst copied = ref(false)\nconst executionSpeed = ref<1 | 2>(1)\n\nlet executionTimeout: ReturnType<typeof setTimeout> | undefined\n\nfunction runPreset(index: number) {\n  activePresetIndex.value = index\n  activeTab.value = 'terminal'\n  displayedLines.value = []\n  isExecuting.value = true\n\n  if (executionTimeout) clearTimeout(executionTimeout)\n\n  const currentPreset = presets[index]\n  const lines = currentPreset.output\n  const delay = executionSpeed.value === 1 ? 160 : 70\n\n  lines.forEach((line, i) => {\n    executionTimeout = setTimeout(\n      () => {\n        displayedLines.value.push(line)\n        if (i === lines.length - 1) {\n          isExecuting.value = false\n        }\n      },\n      (i + 1) * delay,\n    )\n  })\n}\n\nfunction copyCommand() {\n  const current = presets[activePresetIndex.value]\n  navigator.clipboard.writeText(current.command)\n  copied.value = true\n  setTimeout(() => (copied.value = false), 2000)\n}\n\nonMounted(() => {\n  runPreset(0)\n})\n\nonUnmounted(() => {\n  if (executionTimeout) clearTimeout(executionTimeout)\n})\n\nconst currentPreset = computed(() => presets[activePresetIndex.value])\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-developer-terminal\"\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 grid max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-8\">\n      <!-- Left Column: Value Proposition & CTAs (6 Cols) -->\n      <div class=\"space-y-6 text-left lg:col-span-6\">\n        <!-- Parity Badge -->\n        <div\n          class=\"border-border bg-muted/40 inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs shadow-xs\"\n        >\n          <span class=\"bg-success size-2 rounded-full\" />\n          <span class=\"text-foreground font-medium\">Dual-Framework UI Registry</span>\n          <span class=\"text-muted-foreground\">&bull;</span>\n          <span class=\"text-muted-foreground\">Vue 3.5 & React 19</span>\n        </div>\n\n        <!-- Main Headline -->\n        <h1 class=\"text-foreground text-4xl leading-[1.1] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          The unbundled UI registry for design engineers.\n        </h1>\n\n        <!-- Subtitle -->\n        <p class=\"text-muted-foreground max-w-xl text-base leading-relaxed sm:text-lg\">\n          Own your source code. Copy production-grade components and dense workbenches directly into your project with\n          zero npm runtime lock-in.\n        </p>\n\n        <!-- CTA Buttons -->\n        <div class=\"flex flex-wrap items-center gap-3 pt-2\">\n          <Button as=\"a\" href=\"#components\" size=\"lg\" class=\"gap-2 font-semibold shadow-xs\">\n            <span>Explore 300+ Blocks</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n\n          <Button as=\"a\" href=\"#spec\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <Code2 class=\"text-muted-foreground size-4\" />\n            <span>Registry Spec</span>\n          </Button>\n        </div>\n\n        <!-- Telemetry Metrics Strip -->\n        <div class=\"border-border/80 grid grid-cols-3 gap-4 border-t pt-6 text-left\">\n          <div>\n            <p class=\"text-foreground font-mono text-2xl font-bold\">300+</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Workbenches & Primitives</p>\n          </div>\n          <div>\n            <p class=\"text-foreground font-mono text-2xl font-bold\">0 kB</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Runtime Package Bloat</p>\n          </div>\n          <div>\n            <p class=\"text-foreground font-mono text-2xl font-bold\">100%</p>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Cross-Framework Parity</p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column: Interactive Developer Terminal Workbench (6 Cols) -->\n      <div class=\"lg:col-span-6\">\n        <Card class=\"border-border bg-card overflow-hidden rounded-xl shadow-sm\">\n          <!-- Terminal Header -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-2.5\">\n            <!-- Window Controls & File Path -->\n            <div class=\"flex items-center gap-2\">\n              <div class=\"flex gap-1.5\">\n                <div class=\"bg-destructive/80 size-3 rounded-full\" />\n                <div class=\"bg-warning/80 size-3 rounded-full\" />\n                <div class=\"bg-success/80 size-3 rounded-full\" />\n              </div>\n              <span class=\"text-muted-foreground ml-2 font-mono text-xs\">uipkge-cli &mdash; bash</span>\n            </div>\n\n            <!-- Action Controls -->\n            <div class=\"flex items-center gap-1.5\">\n              <!-- Speed Selector -->\n              <button\n                type=\"button\"\n                class=\"border-border bg-background text-muted-foreground hover:text-foreground rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                @click=\"executionSpeed = executionSpeed === 1 ? 2 : 1\"\n              >\n                {{ executionSpeed }}x speed\n              </button>\n\n              <!-- Copy Button -->\n              <button\n                type=\"button\"\n                class=\"border-border bg-background text-muted-foreground hover:text-foreground flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs transition-colors\"\n                @click=\"copyCommand\"\n              >\n                <Check v-if=\"copied\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ copied ? 'Copied' : 'Copy' }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- Preset Navigation Tabs -->\n          <div class=\"border-border/80 bg-muted/20 flex items-center overflow-x-auto border-b px-2\">\n            <button\n              v-for=\"(preset, idx) in presets\"\n              :key=\"preset.id\"\n              type=\"button\"\n              class=\"border-b-2 px-3 py-2 font-mono text-xs whitespace-nowrap transition-colors\"\n              :class=\"\n                activePresetIndex === idx\n                  ? 'border-primary text-foreground bg-background/50 font-semibold'\n                  : 'text-muted-foreground hover:text-foreground border-transparent'\n              \"\n              @click=\"runPreset(idx)\"\n            >\n              {{ preset.label }}\n            </button>\n          </div>\n\n          <!-- Terminal Content Viewport -->\n          <div class=\"bg-card min-h-[220px] space-y-3 p-4 font-mono text-xs sm:p-5\">\n            <!-- Command Input Line -->\n            <div class=\"text-foreground flex items-start gap-2\">\n              <span class=\"text-primary font-bold select-none\">&gt;</span>\n              <span class=\"text-foreground font-medium break-all\">{{ currentPreset.command }}</span>\n            </div>\n\n            <!-- Output Lines -->\n            <div class=\"space-y-1.5 pt-1\">\n              <div\n                v-for=\"(line, idx) in displayedLines\"\n                :key=\"idx\"\n                class=\"text-muted-foreground flex items-center gap-2 transition-colors duration-150\"\n              >\n                <span class=\"text-success shrink-0 font-bold select-none\">✓</span>\n                <span class=\"text-xs\">{{ line.replace(/^✔\\s*/, '') }}</span>\n              </div>\n\n              <!-- Typing / Loading Cursor -->\n              <div v-if=\"isExecuting\" class=\"text-muted-foreground flex items-center gap-2 pt-1\">\n                <span class=\"bg-primary size-1.5 rounded-full\" />\n                <span class=\"text-muted-foreground text-xs italic\">Streaming AST payload...</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Terminal Footer Status Bar -->\n          <div\n            class=\"border-border bg-muted/30 text-muted-foreground flex items-center justify-between border-t px-4 py-2 font-mono text-xs\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <span class=\"bg-success size-2 rounded-full\" />\n              <span>Registry v2.4.0 (OKLCH)</span>\n            </div>\n            <button\n              type=\"button\"\n              class=\"text-primary inline-flex items-center gap-1 hover:underline\"\n              @click=\"runPreset(activePresetIndex)\"\n            >\n              <RotateCcw class=\"size-3\" />\n              <span>Re-run</span>\n            </button>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroDeveloperTerminal.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroGlobeInteractiveNodes.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Activity, ArrowRight, Check, Copy, Globe, Radio, Server, ShieldCheck, Terminal, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface EdgeNode {\n  id: string\n  name: string\n  region: string\n  country: string\n  city: string\n  latencyMs: number\n  p99LatencyMs: number\n  cacheHitRatio: number\n  qps: number\n  status: 'optimal' | 'operational' | 'degraded'\n  coordinates: { x: number; y: number }\n}\n\nexport interface HeroGlobeInteractiveNodesProps {\n  title?: string\n  description?: string\n  cliCommand?: string\n  nodes?: EdgeNode[]\n  class?: string\n}\n\nconst DEFAULT_NODES: EdgeNode[] = [\n  {\n    id: 'node-iad',\n    name: 'iad-1',\n    region: 'us-east-1',\n    country: 'United States',\n    city: 'Washington, D.C.',\n    latencyMs: 8,\n    p99LatencyMs: 14,\n    cacheHitRatio: 99.4,\n    qps: 18450,\n    status: 'optimal',\n    coordinates: { x: 28, y: 38 },\n  },\n  {\n    id: 'node-sfo',\n    name: 'sfo-1',\n    region: 'us-west-1',\n    country: 'United States',\n    city: 'San Francisco',\n    latencyMs: 12,\n    p99LatencyMs: 22,\n    cacheHitRatio: 99.1,\n    qps: 14200,\n    status: 'optimal',\n    coordinates: { x: 18, y: 40 },\n  },\n  {\n    id: 'node-fra',\n    name: 'fra-1',\n    region: 'eu-central-1',\n    country: 'Germany',\n    city: 'Frankfurt',\n    latencyMs: 15,\n    p99LatencyMs: 27,\n    cacheHitRatio: 98.9,\n    qps: 21300,\n    status: 'optimal',\n    coordinates: { x: 52, y: 32 },\n  },\n  {\n    id: 'node-sin',\n    name: 'sin-1',\n    region: 'ap-southeast-1',\n    country: 'Singapore',\n    city: 'Singapore',\n    latencyMs: 24,\n    p99LatencyMs: 41,\n    cacheHitRatio: 98.6,\n    qps: 16800,\n    status: 'optimal',\n    coordinates: { x: 76, y: 58 },\n  },\n  {\n    id: 'node-nrt',\n    name: 'nrt-1',\n    region: 'ap-northeast-1',\n    country: 'Japan',\n    city: 'Tokyo',\n    latencyMs: 19,\n    p99LatencyMs: 34,\n    cacheHitRatio: 99.2,\n    qps: 19400,\n    status: 'optimal',\n    coordinates: { x: 84, y: 42 },\n  },\n  {\n    id: 'node-syd',\n    name: 'syd-1',\n    region: 'ap-southeast-2',\n    country: 'Australia',\n    city: 'Sydney',\n    latencyMs: 32,\n    p99LatencyMs: 52,\n    cacheHitRatio: 98.2,\n    qps: 9800,\n    status: 'optimal',\n    coordinates: { x: 88, y: 78 },\n  },\n  {\n    id: 'node-gru',\n    name: 'gru-1',\n    region: 'sa-east-1',\n    country: 'Brazil',\n    city: 'São Paulo',\n    latencyMs: 44,\n    p99LatencyMs: 68,\n    cacheHitRatio: 97.9,\n    qps: 7600,\n    status: 'optimal',\n    coordinates: { x: 36, y: 74 },\n  },\n  {\n    id: 'node-lhr',\n    name: 'lhr-1',\n    region: 'eu-west-2',\n    country: 'United Kingdom',\n    city: 'London',\n    latencyMs: 11,\n    p99LatencyMs: 20,\n    cacheHitRatio: 99.5,\n    qps: 24600,\n    status: 'optimal',\n    coordinates: { x: 48, y: 30 },\n  },\n]\n\nconst props = withDefaults(defineProps<HeroGlobeInteractiveNodesProps>(), {\n  title: 'Sub-millisecond UI edge delivery across 310+ PoPs globally.',\n  description:\n    'Compile unbundled Vue 3.5 and React 19 components with instant edge caching. Zero cold starts, deterministic tree-shaking, and hardware-accelerated telemetry.',\n  cliCommand: 'npx shadcn-vue add @uipkge/init',\n})\n\nconst activeNodes = computed(() => props.nodes ?? DEFAULT_NODES)\nconst selectedNodeId = ref<string>('node-iad')\nconst copied = ref(false)\n\nconst selectedNode = computed<EdgeNode>(() => {\n  return activeNodes.value.find((n) => n.id === selectedNodeId.value) || activeNodes.value[0]\n})\n\nconst avgGlobalLatency = computed(() => {\n  if (!activeNodes.value.length) return 0\n  const sum = activeNodes.value.reduce((acc, curr) => acc + curr.latencyMs, 0)\n  return Math.round(sum / activeNodes.value.length)\n})\n\nconst totalGlobalQps = computed(() => {\n  return activeNodes.value.reduce((acc, curr) => acc + curr.qps, 0).toLocaleString()\n})\n\nasync function copyCommand() {\n  try {\n    await navigator.clipboard.writeText(props.cliCommand)\n    copied.value = true\n    setTimeout(() => {\n      copied.value = false\n    }, 2000)\n  } catch {\n    // clipboard fallback\n  }\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-globe-interactive-nodes\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center\">\n        <!-- Left: Copy & Actions (6 Cols) -->\n        <div class=\"space-y-6 lg:col-span-6\">\n          <div\n            class=\"border-primary/20 bg-primary/10 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium shadow-2xs\"\n          >\n            <Radio class=\"text-primary size-3.5 animate-pulse\" />\n            <span>Global Edge CDN Mesh Active &bull; 310+ PoPs</span>\n          </div>\n\n          <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n            {{ title }}\n          </h1>\n\n          <p class=\"text-muted-foreground text-base sm:text-lg\">\n            {{ description }}\n          </p>\n\n          <!-- CLI Command Sandbox -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n            <div\n              class=\"border-border bg-muted/60 text-foreground flex items-center justify-between rounded-lg border px-3 py-2 font-mono text-xs shadow-2xs sm:w-80\"\n            >\n              <div class=\"flex items-center gap-2 truncate\">\n                <Terminal class=\"text-muted-foreground size-3.5 shrink-0\" />\n                <span class=\"truncate\">{{ cliCommand }}</span>\n              </div>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-muted-foreground hover:text-foreground size-7 shrink-0\"\n                @click=\"copyCommand\"\n              >\n                <Check v-if=\"copied\" class=\"text-primary size-3.5\" />\n                <Copy v-else class=\"size-3.5\" />\n              </Button>\n            </div>\n\n            <Button size=\"default\" class=\"gap-1.5 shadow-xs\">\n              <span>Explore Registry</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          </div>\n\n          <!-- Quick Telemetry Strip -->\n          <div class=\"border-border grid grid-cols-3 gap-4 border-t pt-6\">\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground text-xs font-medium\">Global Avg Ping</div>\n              <div class=\"text-foreground text-xl font-bold tracking-tight\">{{ avgGlobalLatency }}ms</div>\n              <div class=\"text-success text-xs font-medium\">&minus;42% vs origin</div>\n            </div>\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground text-xs font-medium\">Network Throughput</div>\n              <div class=\"text-foreground text-xl font-bold tracking-tight\">{{ totalGlobalQps }}</div>\n              <div class=\"text-muted-foreground text-xs\">req/sec live</div>\n            </div>\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground text-xs font-medium\">Edge Availability</div>\n              <div class=\"text-foreground text-xl font-bold tracking-tight\">99.95%</div>\n              <div class=\"text-success text-xs font-medium\">Enterprise SLA</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right: Interactive SVG Node Map & Telemetry Workbench (6 Cols) -->\n        <div class=\"space-y-4 lg:col-span-6\">\n          <Card class=\"border-border bg-card/80 shadow-sm backdrop-blur-xs\">\n            <CardContent class=\"space-y-4 p-4 sm:p-6\">\n              <!-- Top bar: active node switch -->\n              <div class=\"border-border flex items-center justify-between border-b pb-3\">\n                <div class=\"flex items-center gap-2\">\n                  <Globe class=\"text-primary size-4\" />\n                  <span class=\"text-foreground text-xs font-semibold\">Active Edge Inspection</span>\n                </div>\n                <Badge variant=\"outline\" class=\"border-border text-muted-foreground font-mono text-xs\">\n                  {{ selectedNode.city }} ({{ selectedNode.name }})\n                </Badge>\n              </div>\n\n              <!-- Interactive Node Grid / Map Canvas -->\n              <div class=\"border-border/80 bg-muted/30 relative h-60 w-full overflow-hidden rounded-lg border p-3\">\n                <!-- SVG Connections Network Layer -->\n                <svg class=\"stroke-border/70 absolute inset-0 size-full\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <line\n                    v-for=\"(n, idx) in activeNodes.slice(1)\"\n                    :key=\"idx\"\n                    :x1=\"`${activeNodes[0].coordinates.x}%`\"\n                    :y1=\"`${activeNodes[0].coordinates.y}%`\"\n                    :x2=\"`${n.coordinates.x}%`\"\n                    :y2=\"`${n.coordinates.y}%`\"\n                    stroke-dasharray=\"3 3\"\n                    stroke-width=\"1\"\n                  />\n                </svg>\n\n                <!-- Interactive Region Nodes -->\n                <button\n                  v-for=\"node in activeNodes\"\n                  :key=\"node.id\"\n                  type=\"button\"\n                  :style=\"{ left: `${node.coordinates.x}%`, top: `${node.coordinates.y}%` }\"\n                  :class=\"\n                    cn(\n                      'focus-visible:ring-ring absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',\n                      selectedNodeId === node.id\n                        ? 'bg-primary text-primary-foreground ring-primary/20 z-10 size-7 scale-110 shadow-sm ring-4'\n                        : 'bg-card hover:bg-accent border-border text-foreground size-5 border hover:scale-105',\n                    )\n                  \"\n                  @click=\"selectedNodeId = node.id\"\n                >\n                  <span class=\"font-mono text-xs leading-none font-bold\">\n                    {{ selectedNodeId === node.id ? node.name.slice(0, 3).toUpperCase() : '' }}\n                  </span>\n                  <span v-if=\"selectedNodeId !== node.id\" class=\"bg-success size-2 rounded-full\" />\n                </button>\n              </div>\n\n              <!-- Edge Node Telemetry Card -->\n              <div class=\"border-border bg-background grid grid-cols-2 gap-2.5 rounded-lg border p-3 sm:grid-cols-4\">\n                <div class=\"space-y-0.5\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <Zap class=\"text-primary size-3\" />\n                    <span>Ping (p50)</span>\n                  </div>\n                  <div class=\"text-foreground font-mono text-sm font-bold\">{{ selectedNode.latencyMs }}ms</div>\n                </div>\n\n                <div class=\"space-y-0.5\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <Activity class=\"text-success size-3\" />\n                    <span>Ping (p99)</span>\n                  </div>\n                  <div class=\"text-foreground font-mono text-sm font-bold\">{{ selectedNode.p99LatencyMs }}ms</div>\n                </div>\n\n                <div class=\"space-y-0.5\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <Server class=\"text-info size-3\" />\n                    <span>Cache Hit</span>\n                  </div>\n                  <div class=\"text-foreground font-mono text-sm font-bold\">{{ selectedNode.cacheHitRatio }}%</div>\n                </div>\n\n                <div class=\"space-y-0.5\">\n                  <div class=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                    <ShieldCheck class=\"text-primary size-3\" />\n                    <span>Throughput</span>\n                  </div>\n                  <div class=\"text-foreground font-mono text-sm font-bold\">\n                    {{ selectedNode.qps.toLocaleString() }} qps\n                  </div>\n                </div>\n              </div>\n\n              <!-- Quick Node Pill Selector -->\n              <div class=\"flex flex-wrap gap-1.5 pt-1\">\n                <button\n                  v-for=\"node in activeNodes\"\n                  :key=\"node.id\"\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded-md border px-2 py-1 font-mono text-xs font-medium transition-colors',\n                      selectedNodeId === node.id\n                        ? 'border-primary bg-primary/10 text-primary'\n                        : 'border-border bg-card text-muted-foreground hover:text-foreground hover:bg-accent/50',\n                    )\n                  \"\n                  @click=\"selectedNodeId = node.id\"\n                >\n                  {{ node.name }} &bull; {{ node.city }}\n                </button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroGlobeInteractiveNodes.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroSaasMetricsDashboard.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, CheckCircle2, Play, ShieldCheck, TrendingUp } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ntype Timeframe = 'live' | '24h' | '7d' | '30d'\n\ninterface MetricData {\n  mrr: string\n  growth: string\n  activeUsers: string\n  requests: string\n  chartPoints: number[]\n}\n\nconst metricsByTimeframe: Record<Timeframe, MetricData> = {\n  live: {\n    mrr: '$148,920',\n    growth: '+24.6%',\n    activeUsers: '14,280',\n    requests: '1.42M/min',\n    chartPoints: [28, 42, 36, 54, 48, 62, 78, 70, 85, 92, 88, 98],\n  },\n  '24h': {\n    mrr: '$146,800',\n    growth: '+18.2%',\n    activeUsers: '42,100',\n    requests: '84.6M',\n    chartPoints: [35, 38, 45, 52, 50, 68, 64, 75, 82, 80, 89, 94],\n  },\n  '7d': {\n    mrr: '$139,400',\n    growth: '+31.4%',\n    activeUsers: '185,400',\n    requests: '592M',\n    chartPoints: [20, 28, 35, 42, 55, 60, 72, 68, 80, 85, 90, 100],\n  },\n  '30d': {\n    mrr: '$124,100',\n    growth: '+44.1%',\n    activeUsers: '490,000',\n    requests: '2.4B',\n    chartPoints: [15, 22, 30, 38, 48, 58, 65, 74, 82, 88, 94, 105],\n  },\n}\n\nconst activeTimeframe = ref<Timeframe>('live')\nconst activeMetric = computed(() => metricsByTimeframe[activeTimeframe.value])\n\nconst chartSvgPath = computed(() => {\n  const points = activeMetric.value.chartPoints\n  const width = 500\n  const height = 120\n  const max = Math.max(...points)\n  const min = Math.min(...points)\n  const range = max - min || 1\n\n  return points\n    .map((val, idx) => {\n      const x = (idx / (points.length - 1)) * width\n      const y = height - ((val - min) / range) * (height - 20) - 10\n      return `${idx === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`\n    })\n    .join(' ')\n})\n\nconst chartAreaPath = computed(() => {\n  return `${chartSvgPath.value} L 500 120 L 0 120 Z`\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-saas-metrics-dashboard\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Radial Glow Background -->\n    <div\n      class=\"bg-primary/10 pointer-events-none absolute top-0 left-1/2 -z-10 h-80 w-full max-w-6xl -translate-x-1/2 rounded-full blur-xl\"\n    />\n\n    <div class=\"mx-auto max-w-6xl space-y-12 text-center\">\n      <!-- Header Copy -->\n      <div class=\"mx-auto max-w-3xl space-y-5\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <TrendingUp class=\"text-primary size-3.5\" />\n          Enterprise Revenue & Event Intelligence\n        </Badge>\n\n        <h1 class=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          Real-time telemetry for modern engineering teams.\n        </h1>\n\n        <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n          Monitor revenue acceleration, API transaction throughput, and compute workloads with sub-millisecond\n          precision.\n        </p>\n\n        <!-- CTA Action Buttons -->\n        <div class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button as=\"a\" href=\"#start\" size=\"lg\" class=\"gap-2 font-semibold shadow-xs\">\n            <span>Start Free Sandbox</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n\n          <Button as=\"a\" href=\"#demo\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <Play class=\"size-3.5 fill-current\" />\n            <span>Interactive Demo</span>\n          </Button>\n        </div>\n\n        <div class=\"text-muted-foreground flex items-center justify-center gap-6 pt-2 font-mono text-xs\">\n          <span class=\"inline-flex items-center gap-1.5\">\n            <ShieldCheck class=\"text-success size-4\" /> SOC2 Type II Certified\n          </span>\n          <span class=\"inline-flex items-center gap-1.5\">\n            <CheckCircle2 class=\"text-primary size-4\" /> 99.95% SLA Uptime\n          </span>\n        </div>\n      </div>\n\n      <!-- Interactive SaaS Dashboard Preview Card -->\n      <div class=\"relative mx-auto max-w-5xl\">\n        <Card class=\"border-border bg-card/95 overflow-hidden rounded-2xl text-left shadow-sm backdrop-blur-md\">\n          <!-- Mock Window Top Bar -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"flex gap-1.5\">\n                <div class=\"bg-destructive/80 size-3 rounded-full\" />\n                <div class=\"bg-warning/80 size-3 rounded-full\" />\n                <div class=\"bg-success/80 size-3 rounded-full\" />\n              </div>\n              <span class=\"text-foreground font-mono text-xs font-medium\">console.uipkge.dev/production</span>\n            </div>\n\n            <!-- Timeframe Filter Tabs -->\n            <div class=\"bg-background border-border flex items-center gap-1 rounded-lg border p-0.5\">\n              <button\n                v-for=\"tf in ['live', '24h', '7d', '30d'] as Timeframe[]\"\n                :key=\"tf\"\n                type=\"button\"\n                class=\"rounded-md px-2.5 py-1 font-mono text-xs uppercase transition-colors\"\n                :class=\"\n                  activeTimeframe === tf\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"activeTimeframe = tf\"\n              >\n                {{ tf }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Dashboard Metric Cards Grid -->\n          <div class=\"space-y-6 p-6 sm:p-8\">\n            <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n              <!-- MRR Card -->\n              <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span class=\"font-mono\">Recurring Revenue</span>\n                  <Badge variant=\"outline\" class=\"border-success/20 bg-success/10 text-success font-mono text-xs\">\n                    {{ activeMetric.growth }}\n                  </Badge>\n                </div>\n                <p class=\"text-foreground font-mono text-2xl font-bold\">{{ activeMetric.mrr }}</p>\n                <p class=\"text-muted-foreground text-xs\">Calculated across active subscriptions</p>\n              </div>\n\n              <!-- Active Workloads Card -->\n              <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span class=\"font-mono\">Active Nodes & Pods</span>\n                  <span class=\"bg-success size-2 rounded-full\" />\n                </div>\n                <p class=\"text-foreground font-mono text-2xl font-bold\">{{ activeMetric.activeUsers }}</p>\n                <p class=\"text-muted-foreground text-xs\">Distributed across 8 global regions</p>\n              </div>\n\n              <!-- Request Throughput Card -->\n              <div class=\"border-border bg-background/50 space-y-1 rounded-xl border p-4\">\n                <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                  <span class=\"font-mono\">Throughput</span>\n                  <TrendingUp class=\"text-primary size-3.5\" />\n                </div>\n                <p class=\"text-foreground font-mono text-2xl font-bold\">{{ activeMetric.requests }}</p>\n                <p class=\"text-muted-foreground text-xs\">Edge cached queries & websocket streams</p>\n              </div>\n            </div>\n\n            <!-- Interactive Area Trend Chart -->\n            <div class=\"border-border bg-background/30 space-y-3 rounded-xl border p-5\">\n              <div class=\"flex items-center justify-between\">\n                <div>\n                  <p class=\"text-muted-foreground font-mono text-xs uppercase\">Transaction Velocity & Event Stream</p>\n                  <p class=\"text-foreground text-sm font-semibold\">Global Ingestion Rate</p>\n                </div>\n                <span class=\"text-success font-mono text-xs font-medium\">99.998% Success</span>\n              </div>\n\n              <!-- SVG Area Chart -->\n              <div class=\"relative h-28 w-full overflow-hidden\">\n                <svg class=\"h-full w-full\" viewBox=\"0 0 500 120\" preserveAspectRatio=\"none\">\n                  <defs>\n                    <linearGradient id=\"chartGlow\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stop-color=\"var(--primary)\" stop-opacity=\"0.35\" />\n                      <stop offset=\"100%\" stop-color=\"var(--primary)\" stop-opacity=\"0.0\" />\n                    </linearGradient>\n                  </defs>\n                  <!-- Gradient Area -->\n                  <path :d=\"chartAreaPath\" fill=\"url(#chartGlow)\" />\n                  <!-- Stroke Line -->\n                  <path\n                    :d=\"chartSvgPath\"\n                    fill=\"none\"\n                    stroke=\"var(--primary)\"\n                    stroke-width=\"2.5\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroSaasMetricsDashboard.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroSplitDeviceMockup.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Monitor, Moon, Smartphone, Sun, Tablet } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface HeroSplitDeviceMockupProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<HeroSplitDeviceMockupProps>(), {\n  title: 'Responsive components with identical fidelity on every device.',\n  description:\n    'Every primitive and block is engineered with fluid container queries and zero layout shift across desktop, tablet, and mobile displays.',\n})\n\ntype DeviceMode = 'desktop' | 'tablet' | 'mobile'\n\nconst activeMode = ref<DeviceMode>('desktop')\nconst isDarkMode = ref(true)\nconst activeTab = ref<'overview' | 'analytics' | 'activity'>('overview')\nconst isMetricStreaming = ref(true)\n\nconst mockKpis = [\n  { label: 'Active Sessions', value: '24,892', change: '+14.2%', status: 'up' },\n  { label: 'Conversion Rate', value: '4.82%', change: '+0.6%', status: 'up' },\n  { label: 'Avg TTFB', value: '18ms', change: '-4ms', status: 'optimal' },\n]\n\nconst viewportWidthClass = computed(() => {\n  if (activeMode.value === 'desktop') return 'w-full max-w-2xl'\n  if (activeMode.value === 'tablet') return 'w-full max-w-md'\n  return 'w-full max-w-[320px]'\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-split-device-mockup\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Top Title & Badge Area -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#device-preview\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Smartphone class=\"text-primary size-3.5\" />\n          <span>Fluid Container Queries &bull; Tailwind v4 Ready</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n          {{ title }}\n        </h1>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <!-- Viewport Controls & Interactive Triggers -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <div class=\"border-border bg-muted/50 inline-flex rounded-lg border p-1 shadow-2xs\">\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'desktop'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )\n              \"\n              @click=\"activeMode = 'desktop'\"\n            >\n              <Monitor class=\"size-3.5\" />\n              <span>Desktop (1440px)</span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'tablet'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )\n              \"\n              @click=\"activeMode = 'tablet'\"\n            >\n              <Tablet class=\"size-3.5\" />\n              <span>Tablet (768px)</span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'mobile'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )\n              \"\n              @click=\"activeMode = 'mobile'\"\n            >\n              <Smartphone class=\"size-3.5\" />\n              <span>Mobile (375px)</span>\n            </button>\n          </div>\n\n          <Button variant=\"outline\" size=\"sm\" class=\"border-border gap-1.5 text-xs\" @click=\"isDarkMode = !isDarkMode\">\n            <Sun v-if=\"isDarkMode\" class=\"size-3.5\" />\n            <Moon v-else class=\"size-3.5\" />\n            <span>{{ isDarkMode ? 'Dark Frame' : 'Light Frame' }}</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Split Device Mockup Canvas -->\n      <div class=\"mt-12 flex justify-center\">\n        <div\n          :class=\"\n            cn(\n              'border-border bg-card rounded-xl border p-2 shadow-md transition-colors duration-300 ease-out sm:p-3',\n              viewportWidthClass,\n              isDarkMode ? 'dark' : '',\n            )\n          \"\n        >\n          <!-- Browser / Device Chrome Header -->\n          <div class=\"border-border/80 flex items-center justify-between border-b px-2 pt-1 pb-2.5\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-destructive/80 size-2.5 rounded-full\" />\n              <span class=\"bg-warning/80 size-2.5 rounded-full\" />\n              <span class=\"bg-success/80 size-2.5 rounded-full\" />\n            </div>\n\n            <!-- URL Bar -->\n            <div\n              class=\"border-border/60 bg-muted/60 text-muted-foreground mx-auto flex h-6 w-1/2 items-center justify-center truncate rounded-md border px-2 font-mono text-xs\"\n            >\n              https://uipkge.dev/demo/dashboard-kpis\n            </div>\n\n            <div class=\"text-muted-foreground flex items-center gap-1\">\n              <span class=\"bg-success size-2 rounded-full\" />\n              <span class=\"font-mono text-xs\">LIVE</span>\n            </div>\n          </div>\n\n          <!-- Inside Interactive Device Application -->\n          <div class=\"bg-background space-y-4 rounded-lg p-4 pt-4\">\n            <!-- App Header Inside Frame -->\n            <div class=\"border-border flex items-center justify-between border-b pb-3\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md text-xs font-bold\"\n                >\n                  UI\n                </div>\n                <div>\n                  <div class=\"text-foreground text-xs font-semibold\">Platform Metrics</div>\n                  <div class=\"text-muted-foreground text-xs\">Production Cluster (us-east-1)</div>\n                </div>\n              </div>\n\n              <!-- Inner App Tabs -->\n              <div class=\"border-border bg-muted/40 flex gap-1 rounded-md border p-0.5\">\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2 py-0.5 text-xs font-medium transition-colors',\n                      activeTab === 'overview'\n                        ? 'bg-background text-foreground shadow-2xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"activeTab = 'overview'\"\n                >\n                  Overview\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2 py-0.5 text-xs font-medium transition-colors',\n                      activeTab === 'analytics'\n                        ? 'bg-background text-foreground shadow-2xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"activeTab = 'analytics'\"\n                >\n                  Analytics\n                </button>\n              </div>\n            </div>\n\n            <!-- KPI Metric Grid in Frame -->\n            <div :class=\"cn('grid gap-2.5', activeMode === 'mobile' ? 'grid-cols-1' : 'grid-cols-3')\">\n              <Card v-for=\"(kpi, idx) in mockKpis\" :key=\"idx\" class=\"border-border bg-card/60 shadow-2xs\">\n                <CardContent class=\"space-y-1 p-3\">\n                  <div class=\"text-muted-foreground text-xs font-medium\">{{ kpi.label }}</div>\n                  <div class=\"text-foreground text-lg font-bold tracking-tight\">{{ kpi.value }}</div>\n                  <div class=\"text-success flex items-center gap-1 text-xs font-medium\">\n                    <span>{{ kpi.change }}</span>\n                    <span class=\"text-muted-foreground\">&bull; vs last week</span>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n\n            <!-- Interactive Wave / Chart Preview -->\n            <div class=\"border-border/80 bg-muted/20 space-y-2 rounded-lg border p-3\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-foreground font-medium\">Real-time Telemetry Stream</span>\n                <Badge variant=\"outline\" class=\"border-border text-success font-mono text-xs\"> Synced: 0.2ms </Badge>\n              </div>\n\n              <!-- SVG Mock Sparkline Chart -->\n              <svg class=\"stroke-primary fill-primary/10 h-16 w-full\" viewBox=\"0 0 300 60\" preserveAspectRatio=\"none\">\n                <path d=\"M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20 L 300 60 L 0 60 Z\" />\n                <path\n                  d=\"M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20\"\n                  fill=\"none\"\n                  stroke-width=\"2\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroSplitDeviceMockup.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroTypingCommandCenter.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, Command, CornerDownLeft, FileCode, FolderGit2, Layers, Palette, Search, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface CommandAction {\n  id: string\n  title: string\n  category: 'Components' | 'Themes' | 'Git' | 'Workflows'\n  shortcut: string[]\n  icon: any\n  description: string\n  status: string\n}\n\nexport interface HeroTypingCommandCenterProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<HeroTypingCommandCenterProps>(), {\n  title: 'Execute workflows at the speed of thought with keyboard command palette.',\n  description:\n    'Instant component insertion, theme switching, git branches, and automated deployment pipelines driven by zero-latency hotkeys.',\n})\n\nconst searchQuery = ref('')\nconst selectedIndex = ref(0)\nconst executedAction = ref<CommandAction | null>(null)\n\nconst actions: CommandAction[] = [\n  {\n    id: 'add-pdp',\n    title: 'Insert Product Detail Page',\n    category: 'Components',\n    shortcut: ['⌘', 'I', 'P'],\n    icon: Layers,\n    description: 'Adds flagship unbundled PDP with gallery, reviews & buy box',\n    status: 'Ready to inject',\n  },\n  {\n    id: 'toggle-dark',\n    title: 'Toggle High-Contrast Dark Theme',\n    category: 'Themes',\n    shortcut: ['⌘', 'T'],\n    icon: Palette,\n    description: 'Switches active OKLCH tokens to studio obsidian mode',\n    status: 'Instant update',\n  },\n  {\n    id: 'git-branch',\n    title: 'Checkout Release Branch: v2.4.0',\n    category: 'Git',\n    shortcut: ['⌘', 'G', 'B'],\n    icon: FolderGit2,\n    description: 'Switches workspace to staging pipeline branch',\n    status: 'Clean working tree',\n  },\n  {\n    id: 'sync-registry',\n    title: 'Synchronize Dual-Framework ASTs',\n    category: 'Workflows',\n    shortcut: ['⌘', 'S', 'Y'],\n    icon: FileCode,\n    description: 'Generates parity manifests between Vue 3.5 and React 19',\n    status: 'Verified 100% parity',\n  },\n  {\n    id: 'run-audit',\n    title: 'Trigger Automated Craft Audit',\n    category: 'Workflows',\n    shortcut: ['⌘', 'A', 'U'],\n    icon: Zap,\n    description: 'Validates semantic scales, AA contrast and eliminates design slop',\n    status: 'Zero regressions',\n  },\n]\n\nconst filteredActions = computed(() => {\n  if (!searchQuery.value.trim()) return actions\n  const q = searchQuery.value.toLowerCase()\n  return actions.filter(\n    (a) =>\n      a.title.toLowerCase().includes(q) ||\n      a.category.toLowerCase().includes(q) ||\n      a.description.toLowerCase().includes(q),\n  )\n})\n\nfunction execute(action: CommandAction) {\n  executedAction.value = action\n  setTimeout(() => {\n    executedAction.value = null\n  }, 2500)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-typing-command-center\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <div class=\"grid grid-cols-1 gap-12 lg:grid-cols-12 lg:items-center\">\n        <!-- Left: Headline & Key Advantages (5 Cols) -->\n        <div class=\"space-y-6 lg:col-span-5\">\n          <div\n            class=\"border-border/80 bg-secondary/60 text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs\"\n          >\n            <Command class=\"text-primary size-3.5\" />\n            <span>Keyboard Ergonomics &bull; Zero Latency</span>\n          </div>\n\n          <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n            {{ title }}\n          </h1>\n\n          <p class=\"text-muted-foreground text-base sm:text-lg\">\n            {{ description }}\n          </p>\n\n          <!-- Hotkey Highlights Grid -->\n          <div class=\"border-border bg-muted/20 grid grid-cols-2 gap-3 rounded-xl border p-4 text-xs\">\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground font-medium\">Global Trigger</div>\n              <div class=\"flex items-center gap-1 font-mono\">\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">⌘</kbd>\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">K</kbd>\n              </div>\n            </div>\n            <div class=\"space-y-1\">\n              <div class=\"text-muted-foreground font-medium\">Quick Insert</div>\n              <div class=\"flex items-center gap-1 font-mono\">\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">⌘</kbd>\n                <kbd class=\"border-border bg-card rounded border px-1.5 py-0.5 shadow-2xs\">I</kbd>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Right: Interactive Command Palette Hub (7 Cols) -->\n        <div class=\"lg:col-span-7\">\n          <Card class=\"border-border bg-card shadow-lg\">\n            <!-- Search Header -->\n            <div class=\"border-border flex items-center gap-3 border-b px-4 py-3\">\n              <Search class=\"text-muted-foreground size-4 shrink-0\" />\n              <input\n                v-model=\"searchQuery\"\n                type=\"text\"\n                placeholder=\"Type a command or search actions (e.g., 'insert', 'git', 'theme')...\"\n                class=\"placeholder:text-muted-foreground text-foreground flex-1 bg-transparent text-sm outline-none\"\n              />\n              <div class=\"text-muted-foreground flex items-center gap-1 font-mono text-xs\">\n                <kbd class=\"border-border bg-muted rounded border px-1.5 py-0.5 text-xs\">ESC</kbd>\n              </div>\n            </div>\n\n            <!-- Command List -->\n            <CardContent class=\"space-y-1 p-2\">\n              <button\n                v-for=\"(action, idx) in filteredActions\"\n                :key=\"action.id\"\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'group flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left transition-colors',\n                    selectedIndex === idx\n                      ? 'border-primary/30 bg-accent text-accent-foreground border'\n                      : 'hover:bg-muted/50 text-foreground border border-transparent',\n                  )\n                \"\n                @mouseenter=\"selectedIndex = idx\"\n                @click=\"execute(action)\"\n              >\n                <div class=\"flex min-w-0 items-center gap-3\">\n                  <div\n                    class=\"border-border bg-background flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n                  >\n                    <component :is=\"action.icon\" class=\"text-primary size-4\" />\n                  </div>\n                  <div class=\"min-w-0 space-y-0.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"truncate text-xs font-semibold\">{{ action.title }}</span>\n                      <Badge variant=\"outline\" class=\"h-4.5 px-1.5 text-xs\">{{ action.category }}</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground truncate text-xs\">{{ action.description }}</p>\n                  </div>\n                </div>\n\n                <!-- Shortcut Badge Group -->\n                <div class=\"ml-3 flex shrink-0 items-center gap-1 font-mono text-xs\">\n                  <kbd\n                    v-for=\"(key, kIdx) in action.shortcut\"\n                    :key=\"kIdx\"\n                    class=\"border-border bg-background rounded border px-1.5 py-0.5 text-xs shadow-2xs\"\n                  >\n                    {{ key }}\n                  </kbd>\n                </div>\n              </button>\n            </CardContent>\n\n            <!-- Status Footer -->\n            <div class=\"border-border bg-muted/30 flex items-center justify-between border-t px-4 py-2.5 text-xs\">\n              <div class=\"text-muted-foreground flex items-center gap-2\">\n                <CornerDownLeft class=\"size-3.5\" />\n                <span>Press <strong>Enter</strong> to run</span>\n              </div>\n              <div v-if=\"executedAction\" class=\"text-success flex items-center gap-1.5 font-semibold\">\n                <Check class=\"size-3.5\" />\n                <span>Executed: {{ executedAction.title }}</span>\n              </div>\n              <div v-else class=\"text-muted-foreground font-mono text-xs\">\n                {{ filteredActions.length }} actions available\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroTypingCommandCenter.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroVideoModalWalkthrough.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { BookOpen, Maximize2, Pause, Play, Star, Volume2, VolumeX, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ninterface VideoChapter {\n  id: string\n  title: string\n  timestamp: string\n  description: string\n}\n\nconst chapters: VideoChapter[] = [\n  {\n    id: 'intro',\n    title: '1. Architecture & Registry Engine',\n    timestamp: '0:45',\n    description: 'Learn how unbundled components provide 100% source ownership without npm dependencies.',\n  },\n  {\n    id: 'tokens',\n    title: '2. OKLCH Theme & Token System',\n    timestamp: '1:30',\n    description: 'Explore the fluid color space engine and dynamic contrast balancing in Tailwind v4.',\n  },\n  {\n    id: 'parity',\n    title: '3. Dual-Framework Parity Model',\n    timestamp: '2:15',\n    description: 'Deep dive into mirror synchronization between Vue 3.5 SFC and React 19 TSX.',\n  },\n]\n\nconst isModalOpen = ref(false)\nconst isPlaying = ref(true)\nconst isMuted = ref(false)\nconst playbackSpeed = ref<1 | 1.5 | 2>(1)\nconst activeChapterIndex = ref(0)\nconst progressPercent = ref(38)\n\nconst currentChapter = computed(() => chapters[activeChapterIndex.value])\n\nfunction openModal(index = 0) {\n  activeChapterIndex.value = index\n  isModalOpen.value = true\n  isPlaying.value = true\n}\n\nfunction closeModal() {\n  isModalOpen.value = false\n  isPlaying.value = false\n}\n\nfunction togglePlay() {\n  isPlaying.value = !isPlaying.value\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-video-modal-walkthrough\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Ambient Glow Background -->\n    <div\n      class=\"bg-primary/10 pointer-events-none absolute top-12 left-1/2 -z-10 h-72 w-full max-w-5xl -translate-x-1/2 rounded-full blur-xl\"\n    />\n\n    <div class=\"mx-auto max-w-6xl space-y-12 text-center\">\n      <!-- Headline & Subtitle -->\n      <div class=\"mx-auto max-w-3xl space-y-5\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Play class=\"text-primary fill-primary/20 size-3.5\" />\n          Interactive 3-Minute Architecture Walkthrough\n        </Badge>\n\n        <h1 class=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          See how top engineering teams build with UIPKGE.\n        </h1>\n\n        <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n          Watch a full walkthrough of our design engineering principles, OKLCH token engine, and dual-framework\n          component architecture.\n        </p>\n\n        <!-- CTA Action Buttons -->\n        <div class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button size=\"lg\" class=\"gap-2 font-semibold shadow-xs\" @click=\"openModal(0)\">\n            <Play class=\"size-4 fill-current\" />\n            <span>Watch Product Tour (3:30)</span>\n          </Button>\n\n          <Button as=\"a\" href=\"#docs\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <BookOpen class=\"text-muted-foreground size-4\" />\n            <span>Read Architecture RFC</span>\n          </Button>\n        </div>\n\n        <!-- Social Proof Avatars & Stars -->\n        <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-6 pt-3 text-xs\">\n          <div class=\"flex -space-x-2 overflow-hidden\">\n            <div\n              class=\"ring-background bg-primary/20 text-primary flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\"\n            >\n              RF\n            </div>\n            <div\n              class=\"ring-background bg-success/20 text-success flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\"\n            >\n              PC\n            </div>\n            <div\n              class=\"ring-background bg-info/20 text-info flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\"\n            >\n              EK\n            </div>\n            <div\n              class=\"ring-background bg-warning/20 text-warning flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\"\n            >\n              SH\n            </div>\n          </div>\n          <div class=\"text-warning flex items-center gap-1\">\n            <Star v-for=\"i in 5\" :key=\"i\" class=\"size-3.5 fill-current\" />\n            <span class=\"text-foreground ml-1 font-mono text-xs font-medium\">4.9/5 by 1,400+ Design Engineers</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Video Preview Card & Chapter Trigger Grid -->\n      <div class=\"mx-auto max-w-4xl\">\n        <Card\n          class=\"border-border bg-card/95 group cursor-pointer overflow-hidden rounded-2xl p-2 shadow-sm backdrop-blur-md\"\n          @click=\"openModal(0)\"\n        >\n          <!-- Video Thumbnail Frame -->\n          <div\n            class=\"bg-muted/60 border-border/80 relative flex aspect-video flex-col justify-between overflow-hidden rounded-xl border p-6 text-left\"\n          >\n            <!-- Overlay Backdrop Texture -->\n            <div class=\"from-background/95 via-background/40 absolute inset-0 z-0 bg-gradient-to-t to-transparent\" />\n\n            <!-- Top Row: Badge & Length -->\n            <div class=\"relative z-10 flex items-center justify-between\">\n              <span\n                class=\"bg-background/80 border-border text-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium backdrop-blur-md\"\n              >\n                <span class=\"bg-success size-2 animate-pulse rounded-full\" />\n                <span>Full HD &bull; 60 FPS</span>\n              </span>\n              <span\n                class=\"bg-background/80 border-border text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs backdrop-blur-md\"\n              >\n                Total runtime: 3m 30s\n              </span>\n            </div>\n\n            <!-- Center: Play Button Beacon -->\n            <div class=\"relative z-10 flex flex-col items-center justify-center py-8\">\n              <div\n                class=\"bg-primary text-primary-foreground shadow-primary/25 flex size-16 items-center justify-center rounded-full shadow-lg transition-transform duration-300 group-hover:scale-110 sm:size-20\"\n              >\n                <Play class=\"ml-1 size-7 fill-current sm:size-8\" />\n              </div>\n              <p class=\"text-foreground mt-4 text-sm font-semibold tracking-tight\">\n                Click to Launch Interactive Player\n              </p>\n            </div>\n\n            <!-- Bottom: Chapter Navigation Strip -->\n            <div class=\"border-border/60 relative z-10 grid grid-cols-1 gap-2 border-t pt-2 sm:grid-cols-3\">\n              <div\n                v-for=\"(chapter, idx) in chapters\"\n                :key=\"chapter.id\"\n                class=\"bg-background/60 border-border/50 hover:bg-background/90 rounded-lg border p-2 text-left backdrop-blur-sm transition-colors\"\n                @click.stop=\"openModal(idx)\"\n              >\n                <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                  <span class=\"truncate\">{{ chapter.title.split('.')[1] }}</span>\n                  <span class=\"text-primary font-bold\">{{ chapter.timestamp }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Interactive Video Dialog Modal -->\n    <div\n      v-if=\"isModalOpen\"\n      class=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md sm:p-6\"\n    >\n      <div\n        class=\"bg-card border-border animate-in fade-in-0 zoom-in-95 relative w-full max-w-4xl overflow-hidden rounded-2xl border text-left shadow-sm duration-200\"\n      >\n        <!-- Modal Top Bar -->\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"bg-primary size-2.5 rounded-full\" />\n            <span class=\"text-foreground font-mono text-xs font-semibold\">{{ currentChapter.title }}</span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1 transition-colors\"\n            @click=\"closeModal\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n\n        <!-- Simulated Video Playback Viewport -->\n        <div class=\"relative flex aspect-video flex-col justify-between bg-neutral-950 p-6 text-white select-none\">\n          <div class=\"flex items-center justify-between font-mono text-xs opacity-80\">\n            <span>UIPKGE Architecture Masterclass</span>\n            <span>OKLCH Engine v2.4</span>\n          </div>\n\n          <!-- Video Mock Graphic -->\n          <div class=\"flex flex-col items-center justify-center space-y-3\">\n            <div\n              class=\"flex size-16 items-center justify-center rounded-full border border-white/20 bg-white/10 backdrop-blur-md\"\n            >\n              <Play v-if=\"!isPlaying\" class=\"ml-1 size-7 fill-current\" />\n              <Pause v-else class=\"size-7\" />\n            </div>\n            <p class=\"max-w-md text-center font-mono text-xs text-neutral-400\">\n              {{ currentChapter.description }}\n            </p>\n          </div>\n\n          <!-- Timeline Scrubber & Controls -->\n          <div class=\"space-y-2\">\n            <!-- Progress Bar -->\n            <div class=\"h-1.5 w-full cursor-pointer overflow-hidden rounded-full bg-white/20\">\n              <div\n                class=\"bg-primary h-full transition-[width] duration-200\"\n                :style=\"{ width: `${progressPercent}%` }\"\n              />\n            </div>\n\n            <!-- Controls Row -->\n            <div class=\"flex items-center justify-between font-mono text-xs\">\n              <div class=\"flex items-center gap-3\">\n                <button type=\"button\" class=\"hover:text-primary transition-colors\" @click=\"togglePlay\">\n                  <Pause v-if=\"isPlaying\" class=\"size-4\" />\n                  <Play v-else class=\"size-4 fill-current\" />\n                </button>\n                <button type=\"button\" class=\"hover:text-primary transition-colors\" @click=\"isMuted = !isMuted\">\n                  <VolumeX v-if=\"isMuted\" class=\"size-4\" />\n                  <Volume2 v-else class=\"size-4\" />\n                </button>\n                <span class=\"text-neutral-400\">{{ currentChapter.timestamp }} / 3:30</span>\n              </div>\n\n              <div class=\"flex items-center gap-2\">\n                <button\n                  type=\"button\"\n                  class=\"rounded bg-white/10 px-2 py-0.5 transition-colors hover:bg-white/20\"\n                  @click=\"playbackSpeed = playbackSpeed === 1 ? 1.5 : playbackSpeed === 1.5 ? 2 : 1\"\n                >\n                  {{ playbackSpeed }}x\n                </button>\n                <button type=\"button\" class=\"hover:text-primary p-1 transition-colors\">\n                  <Maximize2 class=\"size-3.5\" />\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Chapter Selector Footer -->\n        <div class=\"border-border bg-muted/20 grid grid-cols-3 border-t\">\n          <button\n            v-for=\"(ch, idx) in chapters\"\n            :key=\"ch.id\"\n            type=\"button\"\n            class=\"border-border border-r p-3 text-left font-mono text-xs transition-colors last:border-r-0\"\n            :class=\"\n              activeChapterIndex === idx\n                ? 'bg-background text-foreground font-semibold'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"activeChapterIndex = idx\"\n          >\n            <div class=\"truncate\">{{ ch.title }}</div>\n            <div class=\"text-muted-foreground mt-0.5 text-xs\">{{ ch.timestamp }}</div>\n          </button>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroVideoModalWalkthrough.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero/HeroWaitlistGlow.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref } from 'vue'\nimport { ArrowRight, Check, CheckCircle2, Copy, Shield } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\ntype Role = 'frontend' | 'architect' | 'founder'\n\ninterface RoleOption {\n  id: Role\n  label: string\n  perk: string\n}\n\nconst roleOptions: RoleOption[] = [\n  { id: 'frontend', label: 'Frontend / UI Engineer', perk: 'Direct access to raw SFC / TSX templates & Figma tokens' },\n  { id: 'architect', label: 'Solutions Architect', perk: 'Full unbundled AST registry spec & self-hosting blueprints' },\n  { id: 'founder', label: 'Founder / CTO', perk: 'Zero runtime dependency compliance & white-label enterprise SLA' },\n]\n\nconst selectedRole = ref<Role>('frontend')\nconst email = ref('')\nconst isSubmitted = ref(false)\nconst queueNumber = ref<number | null>(null)\nconst referralCopied = ref(false)\n\n// Countdown timer state\nconst timeLeft = ref({\n  days: 14,\n  hours: 8,\n  minutes: 42,\n  seconds: 19,\n})\n\nlet timerInterval: ReturnType<typeof setInterval> | undefined\n\nonMounted(() => {\n  timerInterval = setInterval(() => {\n    if (timeLeft.value.seconds > 0) {\n      timeLeft.value.seconds--\n    } else {\n      timeLeft.value.seconds = 59\n      if (timeLeft.value.minutes > 0) {\n        timeLeft.value.minutes--\n      } else {\n        timeLeft.value.minutes = 59\n        if (timeLeft.value.hours > 0) {\n          timeLeft.value.hours--\n        }\n      }\n    }\n  }, 1000)\n})\n\nonUnmounted(() => {\n  if (timerInterval) clearInterval(timerInterval)\n})\n\nfunction submitWaitlist() {\n  if (!email.value || !email.value.includes('@')) return\n  queueNumber.value = Math.floor(Math.random() * 80) + 120\n  isSubmitted.value = true\n}\n\nfunction copyReferral() {\n  navigator.clipboard.writeText(`https://uipkge.dev/join?ref=${queueNumber.value || 142}`)\n  referralCopied.value = true\n  setTimeout(() => (referralCopied.value = false), 2000)\n}\n\nconst activeRoleObj = computed(() => roleOptions.find((r) => r.id === selectedRole.value)!)\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-waitlist-glow\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Center Radial Glow -->\n    <div\n      class=\"bg-primary/15 pointer-events-none absolute top-1/4 left-1/2 -z-10 h-96 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl\"\n    />\n\n    <div class=\"mx-auto max-w-4xl space-y-10\">\n      <!-- Top Pill -->\n      <div\n        class=\"border-border bg-muted/40 inline-flex items-center gap-2 rounded-full border px-3.5 py-1 font-mono text-xs shadow-xs\"\n      >\n        <span class=\"bg-success size-2 rounded-full\" />\n        <span class=\"text-foreground font-medium\">Public Registry Release</span>\n        <span class=\"text-muted-foreground\">&bull;</span>\n        <span class=\"text-primary font-semibold\">96% Claimed</span>\n      </div>\n\n      <!-- Main Headline -->\n      <div class=\"mx-auto max-w-3xl space-y-4\">\n        <h1 class=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n          Unbundled UI components and composable application blocks.\n        </h1>\n        <p class=\"text-muted-foreground mx-auto max-w-2xl text-base leading-relaxed sm:text-lg\">\n          Join over thousands of developers building high-velocity web applications with unbundled Vue 3.5 & React 19\n          components.\n        </p>\n      </div>\n\n      <!-- Live Countdown Bar -->\n      <div class=\"mx-auto grid max-w-md grid-cols-4 gap-3\">\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.days).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Days</p>\n        </div>\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.hours).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Hours</p>\n        </div>\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.minutes).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Mins</p>\n        </div>\n        <div class=\"border-border bg-card/60 rounded-xl border p-3 backdrop-blur-sm\">\n          <p class=\"text-foreground font-mono text-2xl font-bold\">{{ String(timeLeft.seconds).padStart(2, '0') }}</p>\n          <p class=\"text-muted-foreground mt-0.5 font-mono text-xs uppercase\">Secs</p>\n        </div>\n      </div>\n\n      <!-- Interactive Waitlist Workbench Card -->\n      <Card\n        class=\"border-border bg-card/95 mx-auto max-w-2xl overflow-hidden rounded-2xl p-6 text-left shadow-sm backdrop-blur-md sm:p-8\"\n      >\n        <div v-if=\"!isSubmitted\" class=\"space-y-6\">\n          <!-- Role Selection Tabs -->\n          <div class=\"space-y-2\">\n            <label class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">Select Your Track</label>\n            <div class=\"grid grid-cols-3 gap-2\">\n              <button\n                v-for=\"opt in roleOptions\"\n                :key=\"opt.id\"\n                type=\"button\"\n                class=\"rounded-lg border p-2.5 text-center text-xs font-medium transition-colors\"\n                :class=\"\n                  selectedRole === opt.id\n                    ? 'border-primary bg-primary/10 text-foreground font-semibold shadow-xs'\n                    : 'border-border bg-background/50 text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"selectedRole = opt.id\"\n              >\n                {{ opt.label.split(' ')[0] }}\n              </button>\n            </div>\n            <p class=\"text-muted-foreground pt-1 text-xs italic\">&rarr; {{ activeRoleObj.perk }}</p>\n          </div>\n\n          <!-- Email Input & Submit -->\n          <form class=\"space-y-3\" @submit.prevent=\"submitWaitlist\">\n            <div class=\"flex flex-col items-center gap-2 sm:flex-row\">\n              <Input\n                v-model=\"email\"\n                type=\"email\"\n                placeholder=\"name@company.com\"\n                required\n                class=\"bg-background h-11 font-mono text-sm\"\n              />\n              <Button type=\"submit\" size=\"lg\" class=\"h-11 w-full shrink-0 gap-2 px-6 font-semibold sm:w-auto\">\n                <span>Get Started</span>\n                <ArrowRight class=\"size-4\" />\n              </Button>\n            </div>\n            <p class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n              <Shield class=\"text-success size-3.5\" />\n              <span>Zero spam. Instant private registry token delivered upon verification.</span>\n            </p>\n          </form>\n        </div>\n\n        <!-- Success Queue State -->\n        <div v-else class=\"space-y-5 py-4 text-center\">\n          <div\n            class=\"border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border\"\n          >\n            <CheckCircle2 class=\"size-6\" />\n          </div>\n\n          <div class=\"space-y-1\">\n            <h3 class=\"text-foreground text-xl font-bold\">You're on the list!</h3>\n            <p class=\"text-primary font-mono text-xs font-semibold\">Priority Spot: #{{ queueNumber }} in line</p>\n            <p class=\"text-muted-foreground mx-auto max-w-sm text-xs\">\n              We dispatched an invitation link to <span class=\"text-foreground font-mono\">{{ email }}</span\n              >.\n            </p>\n          </div>\n\n          <!-- Referral Link Box -->\n          <div class=\"border-border bg-muted/30 mx-auto max-w-md space-y-2 rounded-xl border p-3\">\n            <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n              <span>Jump 5 spots per referral</span>\n              <span class=\"text-success font-bold\">+5 boost</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Input\n                readonly\n                :value=\"`https://uipkge.dev/join?ref=${queueNumber}`\"\n                class=\"bg-background h-9 font-mono text-xs\"\n              />\n              <Button type=\"button\" size=\"sm\" variant=\"outline\" class=\"h-9 gap-1.5 px-3\" @click=\"copyReferral\">\n                <Check v-if=\"referralCopied\" class=\"text-success size-3\" />\n                <Copy v-else class=\"size-3\" />\n                <span>{{ referralCopied ? 'Copied' : 'Copy' }}</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero/HeroWaitlistGlow.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json"
  ],
  "description": "Hero section collection with eleven interchangeable variants: metric showcase, 3D tilt canvas, ASCII terminal stream, bento preview grid, developer terminal, interactive globe nodes, SaaS metrics dashboard, split device mockup, typing command center, video walkthrough modal, and glowing waitlist.",
  "categories": [
    "hero",
    "marketing"
  ]
}