{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-bento-preview-grid",
  "title": "Hero Bento Preview Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-bento-preview-grid/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 flex flex-col justify-between space-y-6 rounded-2xl p-6 shadow-sm 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 active:scale-90\"\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,transform] duration-150 active:scale-90\"\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,transform] duration-150 active:scale-95\"\n              >\n                Secondary Token\n              </button>\n            </div>\n          </div>\n        </Card>\n\n        <!-- Tile 2: Dual Framework Parity (1 Col) -->\n        <Card class=\"border-border bg-card flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-sm\">\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-[color,background-color,transform] duration-150 active:scale-95\"\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-[color,background-color,transform] duration-150 active:scale-95\"\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 class=\"border-border bg-card flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-sm\">\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 flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-sm 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 active:scale-95\" @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-lg 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-lg 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-lg 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/HeroBentoPreviewGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Asymmetric 3-column bento hero section with interactive OKLCH palette customizer, dual-framework parity toggle, bundle bloat calculator, and edge latency telemetry.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}