{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-bento-preview-grid",
  "title": "Hero Bento Preview Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-bento-preview-grid/HeroBentoPreviewGrid.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Activity, ArrowRight, CheckCircle2, Code2, Cpu, Layers, Moon, Palette, Play, Sun, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\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]\n\nexport interface HeroBentoPreviewGridProps {\n  className?: string\n}\n\nexport function HeroBentoPreviewGrid({ className }: HeroBentoPreviewGridProps) {\n  const [activeColorIndex, setActiveColorIndex] = React.useState(0)\n  const [isDarkPreview, setIsDarkPreview] = React.useState(true)\n  const [activeFramework, setActiveFramework] = React.useState<'vue' | 'react'>('vue')\n  const [componentCount, setComponentCount] = React.useState(12)\n  const [isRunningQuery, setIsRunningQuery] = React.useState(false)\n  const [queryLatency, setQueryLatency] = React.useState('12ms')\n\n  const estimatedSavings = (componentCount * 42).toFixed(0)\n\n  const triggerQuery = () => {\n    setIsRunningQuery(true)\n    setTimeout(() => {\n      setQueryLatency(`${Math.floor(Math.random() * 8) + 8}ms`)\n      setIsRunningQuery(false)\n    }, 400)\n  }\n\n  return (\n    <section\n      data-slot=\"hero-bento-preview-grid\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      {/* Center Ambient Glow */}\n      <div className=\"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      <div className=\"mx-auto max-w-7xl space-y-12 text-center\">\n        {/* Headline & Subtitle */}\n        <div className=\"mx-auto max-w-3xl space-y-5\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Layers className=\"text-primary size-3.5\" />\n            The Unbundled Design Engineering Platform\n          </Badge>\n\n          <h1 className=\"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 className=\"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\n            your hero.\n          </p>\n\n          {/* CTA Buttons */}\n          <div className=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n            <Button asChild size=\"lg\" className=\"gap-2 font-semibold shadow-xs\">\n              <a href=\"#explore\">\n                <span>Explore 300+ Workbenches</span>\n                <ArrowRight className=\"size-4\" />\n              </a>\n            </Button>\n\n            <Button asChild variant=\"outline\" size=\"lg\" className=\"gap-2 font-medium\">\n              <a href=\"#docs\">\n                <Code2 className=\"text-muted-foreground size-4\" />\n                <span>View Architecture</span>\n              </a>\n            </Button>\n          </div>\n        </div>\n\n        {/* 3-Column Asymmetric Bento Hero Grid */}\n        <div className=\"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 className=\"border-border bg-card flex flex-col justify-between space-y-6 rounded-2xl p-6 shadow-sm md:col-span-2\">\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-primary inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                  <Palette className=\"size-3.5\" /> OKLCH Dynamic Theme Engine\n                </span>\n                <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                  Zero Runtime CSS\n                </Badge>\n              </div>\n              <h3 className=\"text-foreground text-lg font-bold\">Interactive Palette &amp; Contrast Synthesizer</h3>\n              <p className=\"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 className=\"border-border bg-background/60 space-y-4 rounded-xl border p-4\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  {colorThemes.map((c, idx) => (\n                    <button\n                      key={c.name}\n                      type=\"button\"\n                      className={cn(\n                        'size-6 rounded-full border-2 transition-transform active:scale-90',\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                      onClick={() => setActiveColorIndex(idx)}\n                    />\n                  ))}\n                </div>\n\n                <div className=\"text-muted-foreground flex items-center gap-1 font-mono text-xs\">\n                  <span>Mode:</span>\n                  <button\n                    type=\"button\"\n                    className=\"border-border hover:bg-muted rounded border p-1 transition-[colors,transform] duration-150 active:scale-90\"\n                    onClick={() => setIsDarkPreview(!isDarkPreview)}\n                  >\n                    {!isDarkPreview ? (\n                      <Sun className=\"text-warning size-3.5\" />\n                    ) : (\n                      <Moon className=\"text-muted-foreground size-3.5\" />\n                    )}\n                  </button>\n                </div>\n              </div>\n\n              {/* Live Button Demo with Active Hue */}\n              <div className=\"flex flex-wrap items-center gap-3 pt-2\">\n                <button\n                  type=\"button\"\n                  className=\"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                  className=\"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 className=\"border-border bg-card flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-sm\">\n            <div className=\"space-y-2\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-success inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                  <CheckCircle2 className=\"size-3.5\" /> 100% Mirror Parity\n                </span>\n              </div>\n              <h3 className=\"text-foreground text-lg font-bold\">Vue 3.5 &amp; React 19</h3>\n              <p className=\"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 className=\"space-y-3\">\n              <div className=\"bg-muted/40 border-border grid grid-cols-2 gap-1 rounded-lg border p-1\">\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'rounded-md py-1.5 font-mono text-xs font-semibold transition-[color,background-color,transform] duration-150 active:scale-95',\n                    activeFramework === 'vue' ? 'bg-background text-success shadow-xs' : 'text-muted-foreground',\n                  )}\n                  onClick={() => setActiveFramework('vue')}\n                >\n                  Vue 3.5 SFC\n                </button>\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'rounded-md py-1.5 font-mono text-xs font-semibold transition-[color,background-color,transform] duration-150 active:scale-95',\n                    activeFramework === 'react' ? 'bg-background text-info shadow-xs' : 'text-muted-foreground',\n                  )}\n                  onClick={() => setActiveFramework('react')}\n                >\n                  React 19 TSX\n                </button>\n              </div>\n\n              {/* Code snippet snippet */}\n              <div className=\"bg-muted/30 border-border/80 text-muted-foreground rounded-lg border p-3 font-mono text-xs\">\n                <span className=\"text-primary font-bold\">&gt;</span>\n                <span> &lt;Button variant=\"primary\"&gt;</span>\n                <div className=\"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 className=\"border-border bg-card flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-sm\">\n            <div className=\"space-y-2\">\n              <span className=\"text-warning inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                <Cpu className=\"size-3.5\" /> Zero NPM Overhead\n              </span>\n              <h3 className=\"text-foreground text-lg font-bold\">Own Your Source Code</h3>\n              <p className=\"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 className=\"border-border bg-background/60 space-y-3 rounded-xl border p-4\">\n              <div className=\"flex items-center justify-between font-mono text-xs\">\n                <span className=\"text-muted-foreground\">Installed Blocks:</span>\n                <span className=\"text-foreground font-bold\">{componentCount}</span>\n              </div>\n              <input\n                value={componentCount}\n                onChange={(e) => setComponentCount(Number(e.target.value))}\n                type=\"range\"\n                min=\"1\"\n                max=\"50\"\n                className=\"accent-primary w-full cursor-pointer\"\n              />\n              <div className=\"border-border/60 flex items-center justify-between border-t pt-1 font-mono text-xs\">\n                <span className=\"text-muted-foreground\">Bundle Saved:</span>\n                <span className=\"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 className=\"border-border bg-card flex flex-col justify-between space-y-4 rounded-2xl p-6 shadow-sm md:col-span-2\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"space-y-1\">\n                <span className=\"text-primary inline-flex items-center gap-1.5 font-mono text-xs font-semibold\">\n                  <Zap className=\"size-3.5\" /> Instant Hydration &amp; Zero Latency\n                </span>\n                <h3 className=\"text-foreground text-lg font-bold\">Edge Optimized Architecture</h3>\n              </div>\n              <Button\n                size=\"sm\"\n                variant=\"outline\"\n                className=\"gap-1.5 font-mono text-xs active:scale-95\"\n                onClick={triggerQuery}\n              >\n                {!isRunningQuery ? (\n                  <Play className=\"size-3 fill-current\" />\n                ) : (\n                  <Activity className=\"size-3 animate-spin\" />\n                )}\n                <span>Ping Edge</span>\n              </Button>\n            </div>\n\n            {/* Latency Telemetry Row */}\n            <div className=\"grid grid-cols-3 gap-3\">\n              <div className=\"border-border bg-background/50 space-y-0.5 rounded-lg border p-3\">\n                <p className=\"text-muted-foreground font-mono text-xs\">Round-Trip Latency</p>\n                <p className=\"text-success font-mono text-xl font-bold\">{queryLatency}</p>\n              </div>\n              <div className=\"border-border bg-background/50 space-y-0.5 rounded-lg border p-3\">\n                <p className=\"text-muted-foreground font-mono text-xs\">DOM Mutation Time</p>\n                <p className=\"text-foreground font-mono text-xl font-bold\">&lt; 1.2ms</p>\n              </div>\n              <div className=\"border-border bg-background/50 space-y-0.5 rounded-lg border p-3\">\n                <p className=\"text-muted-foreground font-mono text-xs\">Accessibility Score</p>\n                <p className=\"text-primary font-mono text-xl font-bold\">100 / 100</p>\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default HeroBentoPreviewGrid\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeroBentoPreviewGrid.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
}