{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "bento-01",
  "title": "Telemetry Bento",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/bento-01/Bento01.svelte",
      "content": "<script lang=\"ts\">\n  import {\n    Activity,\n    ArrowRight,\n    Bot,\n    CheckCircle2,\n    Globe2,\n    Layers,\n    ShieldCheck,\n    Terminal,\n    Zap,\n  } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent } from '$lib/components/ui/card'\n  import { Progress } from '$lib/components/ui/progress'\n  import { cn } from '$lib/utils'\n\n  interface Props {\n    class?: string\n  }\n\n  let { class: className }: Props = $props()\n\n  let activeEventFilter = $state<'all' | 'deploy' | 'security' | 'database'>('all')\n  let isSimulatingPrompt = $state(false)\n  let aiPromptInput = $state('Optimize database indexing for high concurrency tenant reads')\n  let aiDraftOutput = $state(\n    'Generated compound B-Tree index on `(tenant_id, created_at DESC)` reducing p99 latency from 142ms to 6ms.',\n  )\n\n  const liveTelemetryEvents = [\n    {\n      id: 1,\n      type: 'deploy',\n      title: 'Edge worker edge-us-east-1 deployed',\n      latency: '18ms',\n      time: '12s ago',\n      status: 'healthy',\n    },\n    {\n      id: 2,\n      type: 'database',\n      title: 'CDC stream synced 42,800 records',\n      latency: '4ms',\n      time: '34s ago',\n      status: 'healthy',\n    },\n    {\n      id: 3,\n      type: 'security',\n      title: 'Automated mTLS key rotation complete',\n      latency: '120ms',\n      time: '1m ago',\n      status: 'healthy',\n    },\n    {\n      id: 4,\n      type: 'deploy',\n      title: 'Static asset bundle cached in 32 edge PoPs',\n      latency: '8ms',\n      time: '2m ago',\n      status: 'healthy',\n    },\n  ]\n\n  const filteredEvents = $derived(\n    activeEventFilter === 'all' ? liveTelemetryEvents : liveTelemetryEvents.filter((e) => e.type === activeEventFilter),\n  )\n\n  const edgeRegions = [\n    { code: 'iad1', name: 'US East (N. Virginia)', status: 'Active', latency: '12ms' },\n    { code: 'fra1', name: 'EU Central (Frankfurt)', status: 'Active', latency: '18ms' },\n    { code: 'hnd1', name: 'AP East (Tokyo)', status: 'Active', latency: '24ms' },\n  ]\n\n  function runAiOptimization() {\n    isSimulatingPrompt = true\n    aiDraftOutput = 'Analyzing query AST and cache hit rates...'\n    setTimeout(() => {\n      aiDraftOutput = 'Applied index pushdown & partitioned query plan. Estimated cache hit rate: 98.4%.'\n      isSimulatingPrompt = false\n    }, 900)\n  }\n</script>\n\n<section data-slot=\"bento-01\" class={cn('bg-background w-full py-16 sm:py-24', className)}>\n  <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n    <!-- Header -->\n    <div class=\"mb-12 max-w-2xl space-y-3\">\n      <div\n        class=\"border-primary/20 bg-primary/5 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium shadow-2xs\"\n      >\n        <Layers class=\"size-3.5\" />\n        <span>Unified Enterprise Architecture</span>\n      </div>\n      <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n        Everything your engineering team needs to move at velocity\n      </h2>\n      <p class=\"text-muted-foreground text-base sm:text-lg\">\n        Engineered for extreme performance, continuous security governance, and multi-cloud resilience from day one.\n      </p>\n    </div>\n\n    <!-- Bento Grid (High Density) -->\n    <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      <!-- Tile 1: AI Code & Query Optimization Copilot (Span 2 cols on desktop) -->\n      <Card\n        class=\"border-border bg-card hover:border-primary/40 relative overflow-hidden shadow-xs transition-colors duration-200 md:col-span-2\"\n      >\n        <CardContent class=\"flex h-full flex-col justify-between space-y-6 p-6 sm:p-8\">\n          <div class=\"flex flex-wrap items-center justify-between gap-4\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <Bot class=\"size-5\" />\n              </div>\n              <div>\n                <h3 class=\"text-foreground text-lg font-bold tracking-tight sm:text-xl\">\n                  Autonomous AI Query & Performance Copilot\n                </h3>\n                <p class=\"text-muted-foreground text-xs\">\n                  Analyzes production query patterns in real-time and recommends zero-downtime optimizations.\n                </p>\n              </div>\n            </div>\n            <Badge variant=\"secondary\" class=\"bg-primary/10 text-primary border-primary/20 font-mono text-xs\">\n              LLM Grounded · v4.8\n            </Badge>\n          </div>\n\n          <!-- Interactive Mini Workbench -->\n          <div class=\"border-border bg-muted/30 space-y-4 rounded-xl border p-4 sm:p-5\">\n            <div class=\"flex flex-wrap items-center justify-between gap-2 text-xs\">\n              <span class=\"text-muted-foreground font-mono\">Input Prompt Context:</span>\n              <span class=\"text-success inline-flex items-center gap-1 font-medium\">\n                <CheckCircle2 class=\"size-3.5\" />\n                <span>AST Validated</span>\n              </span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <div class=\"relative flex-1\">\n                <input\n                  bind:value={aiPromptInput}\n                  type=\"text\"\n                  class=\"border-border bg-card text-foreground focus:border-primary w-full rounded-md border px-3 py-2 font-mono text-xs focus:outline-hidden\"\n                />\n              </div>\n              <Button\n                size=\"sm\"\n                class=\"h-9 gap-1.5 text-xs font-medium\"\n                disabled={isSimulatingPrompt}\n                onclick={runAiOptimization}\n              >\n                <Zap class=\"size-3.5 fill-current\" />\n                <span>{isSimulatingPrompt ? 'Running...' : 'Optimize'}</span>\n              </Button>\n            </div>\n\n            <!-- AI Result Output -->\n            <div class=\"border-border/80 bg-card text-foreground space-y-2 rounded-lg border p-3.5 font-mono text-xs\">\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span class=\"flex items-center gap-1.5\">\n                  <Terminal class=\"text-primary size-3\" />\n                  <span>Optimization Plan Output</span>\n                </span>\n                <span class=\"text-success font-semibold\">98.4% Efficiency Gain</span>\n              </div>\n              <p class=\"text-foreground leading-relaxed\">{aiDraftOutput}</p>\n            </div>\n          </div>\n\n          <div class=\"border-border grid grid-cols-3 gap-4 border-t pt-2 text-center text-xs\">\n            <div>\n              <p class=\"text-foreground font-mono text-base font-bold\">0.4ms</p>\n              <p class=\"text-muted-foreground\">Inference Overhead</p>\n            </div>\n            <div>\n              <p class=\"text-foreground font-mono text-base font-bold\">99.8%</p>\n              <p class=\"text-muted-foreground\">Syntactic Accuracy</p>\n            </div>\n            <div>\n              <p class=\"text-foreground font-mono text-base font-bold\">3.4M</p>\n              <p class=\"text-muted-foreground\">Queries Analyzed</p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Tile 2: Global Edge Network & Latency Radar -->\n      <Card\n        class=\"border-border bg-card hover:border-primary/40 relative overflow-hidden shadow-xs transition-colors duration-200\"\n      >\n        <CardContent class=\"flex h-full flex-col justify-between space-y-6 p-6\">\n          <div class=\"space-y-3\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <Globe2 class=\"size-5\" />\n              </div>\n              <span\n                class=\"bg-success/10 text-success border-success/20 inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-mono text-xs font-semibold\"\n              >\n                <span class=\"bg-success size-1.5 rounded-full\"></span>\n                <span>32 Edge PoPs</span>\n              </span>\n            </div>\n            <div>\n              <h3 class=\"text-foreground text-lg font-bold tracking-tight\">Global Edge Mesh</h3>\n              <p class=\"text-muted-foreground text-xs\">\n                Sub-20ms p99 execution worldwide with automatic zero-downtime failover routing.\n              </p>\n            </div>\n          </div>\n\n          <!-- Edge Regions List -->\n          <div class=\"border-border bg-muted/20 space-y-2.5 rounded-lg border p-3\">\n            {#each edgeRegions as region (region.code)}\n              <div\n                class=\"border-border/50 flex items-center justify-between border-b py-1 text-xs last:border-0\"\n              >\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"text-foreground font-mono text-xs font-bold uppercase\">{region.code}</span>\n                  <span class=\"text-muted-foreground max-w-[120px] truncate\">{region.name}</span>\n                </div>\n                <span class=\"text-primary font-mono text-xs font-semibold\">{region.latency}</span>\n              </div>\n            {/each}\n          </div>\n\n          <div class=\"space-y-2\">\n            <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n              <span>Global Route SLA</span>\n              <span class=\"text-foreground font-bold\">99.995%</span>\n            </div>\n            <Progress value={99.9} class=\"h-1.5\" />\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Tile 3: Live Telemetry Event Stream (Span 2 cols on lg) -->\n      <Card\n        class=\"border-border bg-card hover:border-primary/40 relative overflow-hidden shadow-xs transition-colors duration-200 lg:col-span-2\"\n      >\n        <CardContent class=\"flex h-full flex-col justify-between space-y-6 p-6 sm:p-8\">\n          <div class=\"flex flex-wrap items-center justify-between gap-4\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <Activity class=\"size-5\" />\n              </div>\n              <div>\n                <h3 class=\"text-foreground text-lg font-bold tracking-tight\">Real-Time Event Stream</h3>\n                <p class=\"text-muted-foreground text-xs\">\n                  Deterministic audit feed capturing deployments, schema migrations, and security operations.\n                </p>\n              </div>\n            </div>\n\n            <!-- Filter Tabs -->\n            <div class=\"border-border bg-muted/40 flex items-center gap-1 rounded-lg border p-1\">\n              <button\n                type=\"button\"\n                class={cn(\n                  'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                  activeEventFilter === 'all'\n                    ? 'bg-card text-foreground font-semibold shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onclick={() => (activeEventFilter = 'all')}\n              >\n                All\n              </button>\n              <button\n                type=\"button\"\n                class={cn(\n                  'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                  activeEventFilter === 'deploy'\n                    ? 'bg-card text-foreground font-semibold shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onclick={() => (activeEventFilter = 'deploy')}\n              >\n                Deploy\n              </button>\n              <button\n                type=\"button\"\n                class={cn(\n                  'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                  activeEventFilter === 'database'\n                    ? 'bg-card text-foreground font-semibold shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onclick={() => (activeEventFilter = 'database')}\n              >\n                Data\n              </button>\n              <button\n                type=\"button\"\n                class={cn(\n                  'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n                  activeEventFilter === 'security'\n                    ? 'bg-card text-foreground font-semibold shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )}\n                onclick={() => (activeEventFilter = 'security')}\n              >\n                Security\n              </button>\n            </div>\n          </div>\n\n          <!-- Event Feed Table -->\n          <div class=\"divide-border border-border bg-muted/20 divide-y rounded-xl border\">\n            {#each filteredEvents as ev (ev.id)}\n              <div\n                class=\"hover:bg-muted/40 flex flex-wrap items-center justify-between gap-3 p-3.5 text-xs transition-colors\"\n              >\n                <div class=\"flex items-center gap-2.5\">\n                  <span class=\"bg-success size-2 rounded-full\"></span>\n                  <span class=\"text-foreground font-medium\">{ev.title}</span>\n                </div>\n                <div class=\"text-muted-foreground flex items-center gap-3 font-mono\">\n                  <span class=\"bg-muted text-foreground rounded px-1.5 py-0.5\">{ev.latency}</span>\n                  <span>{ev.time}</span>\n                </div>\n              </div>\n            {/each}\n          </div>\n\n          <div\n            class=\"text-muted-foreground border-border flex flex-wrap items-center justify-between gap-2 border-t pt-2 text-xs\"\n          >\n            <span class=\"flex items-center gap-1.5\">\n              <ShieldCheck class=\"text-success size-4\" />\n              <span>Zero message loss guaranteed via Raft consensus</span>\n            </span>\n            <span class=\"font-mono\">Throughput: ~14,200 ev/sec</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Tile 4: Enterprise Security & Compliance Vault -->\n      <Card\n        class=\"border-border bg-card hover:border-primary/40 relative overflow-hidden shadow-xs transition-colors duration-200\"\n      >\n        <CardContent class=\"flex h-full flex-col justify-between space-y-6 p-6\">\n          <div class=\"space-y-3\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg\">\n                <ShieldCheck class=\"size-5\" />\n              </div>\n              <Badge variant=\"outline\" class=\"font-mono text-xs\">SOC 2 Type II</Badge>\n            </div>\n            <div>\n              <h3 class=\"text-foreground text-lg font-bold tracking-tight\">Compliance & Vault</h3>\n              <p class=\"text-muted-foreground text-xs\">\n                Continuous cryptographic verification, automated KMS key rotation, and granular RBAC.\n              </p>\n            </div>\n          </div>\n\n          <div class=\"border-border bg-muted/20 space-y-3 rounded-lg border p-3.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">AES-256 GCM at rest</span>\n              <span class=\"text-success flex items-center gap-1 font-semibold\">\n                <CheckCircle2 class=\"size-3.5\" /> Enforced\n              </span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">mTLS v1.3 in transit</span>\n              <span class=\"text-success flex items-center gap-1 font-semibold\">\n                <CheckCircle2 class=\"size-3.5\" /> Enforced\n              </span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">SCIM v2 Directory Sync</span>\n              <span class=\"text-foreground font-semibold\">Active</span>\n            </div>\n          </div>\n\n          <Button variant=\"outline\" class=\"h-9 w-full gap-1.5 text-xs font-semibold\">\n            <span>View Trust Center</span>\n            <ArrowRight class=\"size-3.5\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/bento-01/Bento01.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/progress.json"
  ],
  "description": "High-density bento grid featuring an interactive AI query copilot workbench, real-time edge network telemetry feed, live latency radar, and SOC 2 compliance vault status.",
  "categories": [
    "marketing"
  ]
}