Telemetry Bento

blockmarketing

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.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/bento-01.json

$npx shadcn@latest add https://uipkge.dev/r/lit/bento-01.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/bento-01.json

$bunx shadcn@latest add https://uipkge.dev/r/lit/bento-01.json

Manifest:https://uipkge.dev/r/lit/bento-01.jsonInstalls to:src/uip/blocks/bento-01/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

HTMLElementTagNameMap

interface HTMLElementTagNameMap {
    'uip-bento-01': UipBento01
  }
}

npm dependencies

lit lucide

Includes

badge button lit-core

Files installed (1)

src/uip/blocks/bento-01/bento-01.ts18.4 kB

import { LitElement, css, html } from 'lit'
import { Activity, ArrowRight, Bot, CheckCircle2, Globe2, Layers, ShieldCheck, Terminal, Zap } from 'lucide'
import { cn } from '../../lib/utils'
import { tailwind } from '../../lib/styles'
import { ThemeController } from '../../lib/theme'
import { icon } from '../../lib/icon'
// Side-effect imports: register the composed elements for standalone use
// (consumers who install only this block still get working primitives).
import '../../components/badge/badge'
import '../../components/button/button'

const liveTelemetryEvents = [
  {
    id: 1,
    type: 'deploy',
    title: 'Edge worker edge-us-east-1 deployed',
    latency: '18ms',
    time: '12s ago',
    status: 'healthy',
  },
  {
    id: 2,
    type: 'database',
    title: 'CDC stream synced 42,800 records',
    latency: '4ms',
    time: '34s ago',
    status: 'healthy',
  },
  {
    id: 3,
    type: 'security',
    title: 'Automated mTLS key rotation complete',
    latency: '120ms',
    time: '1m ago',
    status: 'healthy',
  },
  {
    id: 4,
    type: 'deploy',
    title: 'Static asset bundle cached in 32 edge PoPs',
    latency: '8ms',
    time: '2m ago',
    status: 'healthy',
  },
]

const edgeRegions = [
  { code: 'iad1', name: 'US East (N. Virginia)', status: 'Active', latency: '12ms' },
  { code: 'fra1', name: 'EU Central (Frankfurt)', status: 'Active', latency: '18ms' },
  { code: 'hnd1', name: 'AP East (Tokyo)', status: 'Active', latency: '24ms' },
]

// Card chrome follows the registry Card verbatim (see the login-01 block:
// surfaces stay plain divs so per-tile classes like the hover border apply
// to the painted box; the nested uip-* hosts carry only their own API).
const tileClass =
  'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150 overflow-hidden border-border hover:border-primary/40 relative shadow-xs duration-200'

/**
 * <uip-bento-01> — the registry Bento01 block as a web component.
 *
 * Class strings are React's Bento01 verbatim. React state (useState) becomes
 * @state fields; the AI-optimization timeout is cleared in
 * `disconnectedCallback`. The prompt field is a native input like React's
 * (not <uip-input>); progress tracks are plain divs carrying React's
 * Progress root/indicator classes so the per-tile heights apply.
 */
export class UipBento01 extends LitElement {
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
  // :host display can't be a utility class (the host has no template of its own).
  static styles = [tailwind, css`:host { display: block; }`]

  static properties = {
    activeEventFilter: { state: true },
    isSimulatingPrompt: { state: true },
    aiPromptInput: { state: true },
    aiDraftOutput: { state: true },
  }

  private activeEventFilter: 'all' | 'deploy' | 'security' | 'database' = 'all'
  private isSimulatingPrompt = false
  private aiPromptInput = 'Optimize database indexing for high concurrency tenant reads'
  private aiDraftOutput =
    'Generated compound B-Tree index on `(tenant_id, created_at DESC)` reducing p99 latency from 142ms to 6ms.'
  private timer?: number

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'bento-01')
  }

  disconnectedCallback() {
    super.disconnectedCallback()
    if (this.timer) window.clearTimeout(this.timer)
  }

  private get filteredEvents() {
    if (this.activeEventFilter === 'all') return liveTelemetryEvents
    return liveTelemetryEvents.filter((e) => e.type === this.activeEventFilter)
  }

  private runAiOptimization() {
    this.isSimulatingPrompt = true
    this.aiDraftOutput = 'Analyzing query AST and cache hit rates...'
    if (this.timer) window.clearTimeout(this.timer)
    this.timer = window.setTimeout(() => {
      this.aiDraftOutput = 'Applied index pushdown & partitioned query plan. Estimated cache hit rate: 98.4%.'
      this.isSimulatingPrompt = false
    }, 900)
  }

  private filterTab(
    id: 'all' | 'deploy' | 'database' | 'security',
    label: string,
  ) {
    return html`<button
      type="button"
      class=${cn(
        'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',
        this.activeEventFilter === id
          ? 'bg-card text-foreground font-semibold shadow-2xs'
          : 'text-muted-foreground hover:text-foreground',
      )}
      @click=${() => {
        this.activeEventFilter = id
      }}
    >
      ${label}
    </button>`
  }

  render() {
    return html`
      <section data-slot="bento-01" class=${cn('bg-background w-full py-16 sm:py-24')}>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div class="mb-12 max-w-2xl space-y-3">
            <div
              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"
            >
              ${icon(Layers, 'layers', 'size-3.5')}
              <span>Unified Enterprise Architecture</span>
            </div>
            <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
              Everything your engineering team needs to move at velocity
            </h2>
            <p class="text-muted-foreground text-base sm:text-lg">
              Engineered for extreme performance, continuous security governance, and multi-cloud resilience from day
              one.
            </p>
          </div>

          <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div data-uipkge="" data-slot="card" class=${cn(tileClass, 'md:col-span-2')}>
              <div data-uipkge="" data-slot="card-content" class="flex h-full flex-col justify-between space-y-6 p-6 pt-0 sm:p-8 sm:pt-0">
                <div class="flex flex-wrap items-center justify-between gap-4">
                  <div class="flex items-center gap-3">
                    <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                      ${icon(Bot, 'bot', 'size-5')}
                    </div>
                    <div>
                      <h3 class="text-foreground text-lg font-bold tracking-tight sm:text-xl">
                        Autonomous AI Query & Performance Copilot
                      </h3>
                      <p class="text-muted-foreground text-xs">
                        Analyzes production query patterns in real-time and recommends zero-downtime optimizations.
                      </p>
                    </div>
                  </div>
                  <uip-badge variant="secondary" class="bg-primary/10 text-primary border-primary/20 font-mono text-xs">
                    LLM Grounded · v4.8
                  </uip-badge>
                </div>

                <div class="border-border bg-muted/30 space-y-4 rounded-xl border p-4 sm:p-5">
                  <div class="flex flex-wrap items-center justify-between gap-2 text-xs">
                    <span class="text-muted-foreground font-mono">Input Prompt Context:</span>
                    <span class="text-success inline-flex items-center gap-1 font-medium">
                      ${icon(CheckCircle2, 'circle-check-big', 'size-3.5')}
                      <span>AST Validated</span>
                    </span>
                  </div>
                  <div class="flex items-center gap-2">
                    <div class="relative flex-1">
                      <input
                        .value=${this.aiPromptInput}
                        @input=${(e: Event) => {
                          this.aiPromptInput = (e.target as HTMLInputElement).value
                        }}
                        type="text"
                        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"
                      />
                    </div>
                    <uip-button
                      size="sm"
                      class="h-9 gap-1.5 text-xs font-medium"
                      ?disabled=${this.isSimulatingPrompt}
                      @click=${this.runAiOptimization}
                    >
                      ${icon(Zap, 'zap', 'size-3.5 fill-current')}
                      <span>${this.isSimulatingPrompt ? 'Running...' : 'Optimize'}</span>
                    </uip-button>
                  </div>

                  <div class="border-border/80 bg-card text-foreground space-y-2 rounded-lg border p-3.5 font-mono text-xs">
                    <div class="text-muted-foreground flex items-center justify-between text-xs">
                      <span class="flex items-center gap-1.5">
                        ${icon(Terminal, 'terminal', 'text-primary size-3')}
                        <span>Optimization Plan Output</span>
                      </span>
                      <span class="text-success font-semibold">98.4% Efficiency Gain</span>
                    </div>
                    <p class="text-foreground leading-relaxed">${this.aiDraftOutput}</p>
                  </div>
                </div>

                <div class="border-border grid grid-cols-3 gap-4 border-t pt-2 text-center text-xs">
                  <div>
                    <p class="text-foreground font-mono text-base font-bold">0.4ms</p>
                    <p class="text-muted-foreground">Inference Overhead</p>
                  </div>
                  <div>
                    <p class="text-foreground font-mono text-base font-bold">99.8%</p>
                    <p class="text-muted-foreground">Syntactic Accuracy</p>
                  </div>
                  <div>
                    <p class="text-foreground font-mono text-base font-bold">3.4M</p>
                    <p class="text-muted-foreground">Queries Analyzed</p>
                  </div>
                </div>
              </div>
            </div>

            <div data-uipkge="" data-slot="card" class=${cn(tileClass)}>
              <div data-uipkge="" data-slot="card-content" class="flex h-full flex-col justify-between space-y-6 p-6 pt-0">
                <div class="space-y-3">
                  <div class="flex items-center justify-between">
                    <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                      ${icon(Globe2, 'globe-2', 'size-5')}
                    </div>
                    <span
                      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"
                    >
                      <span class="bg-success size-1.5 rounded-full"></span>
                      <span>32 Edge PoPs</span>
                    </span>
                  </div>
                  <div>
                    <h3 class="text-foreground text-lg font-bold tracking-tight">Global Edge Mesh</h3>
                    <p class="text-muted-foreground text-xs">
                      Sub-20ms p99 execution worldwide with automatic zero-downtime failover routing.
                    </p>
                  </div>
                </div>

                <div class="border-border bg-muted/20 space-y-2.5 rounded-lg border p-3">
                  ${edgeRegions.map(
                    (region) => html`<div
                      class="border-border/50 flex items-center justify-between border-b py-1 text-xs last:border-0"
                    >
                      <div class="flex items-center gap-2">
                        <span class="text-foreground font-mono text-xs font-bold uppercase">${region.code}</span>
                        <span class="text-muted-foreground max-w-[120px] truncate">${region.name}</span>
                      </div>
                      <span class="text-primary font-mono text-xs font-semibold">${region.latency}</span>
                    </div>`,
                  )}
                </div>

                <div class="space-y-2">
                  <div class="text-muted-foreground flex justify-between font-mono text-xs">
                    <span>Global Route SLA</span>
                    <span class="text-foreground font-bold">99.995%</span>
                  </div>
                  <div
                    data-uipkge=""
                    data-slot="progress"
                    role="progressbar"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="99.9"
                    data-state="loading"
                    data-value="99.9"
                    data-max="100"
                    class="bg-primary/20 relative h-1.5 w-full overflow-hidden rounded-full"
                  >
                    <div
                      data-uipkge=""
                      data-slot="progress-indicator"
                      data-state="loading"
                      data-value="99.9"
                      data-max="100"
                      class="bg-primary h-full w-full flex-1 transition-transform duration-500 ease-out motion-reduce:transition-none"
                      style=${`transform: translateX(-${100 - 99.9}%)`}
                    ></div>
                  </div>
                </div>
              </div>
            </div>

            <div data-uipkge="" data-slot="card" class=${cn(tileClass, 'lg:col-span-2')}>
              <div data-uipkge="" data-slot="card-content" class="flex h-full flex-col justify-between space-y-6 p-6 pt-0 sm:p-8 sm:pt-0">
                <div class="flex flex-wrap items-center justify-between gap-4">
                  <div class="flex items-center gap-3">
                    <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                      ${icon(Activity, 'activity', 'size-5')}
                    </div>
                    <div>
                      <h3 class="text-foreground text-lg font-bold tracking-tight">Real-Time Event Stream</h3>
                      <p class="text-muted-foreground text-xs">
                        Deterministic audit feed capturing deployments, schema migrations, and security operations.
                      </p>
                    </div>
                  </div>

                  <div class="border-border bg-muted/40 flex items-center gap-1 rounded-lg border p-1">
                    ${this.filterTab('all', 'All')} ${this.filterTab('deploy', 'Deploy')}
                    ${this.filterTab('database', 'Data')} ${this.filterTab('security', 'Security')}
                  </div>
                </div>

                <div class="divide-border border-border bg-muted/20 divide-y rounded-xl border">
                  ${this.filteredEvents.map(
                    (ev) => html`<div
                      class="hover:bg-muted/40 flex flex-wrap items-center justify-between gap-3 p-3.5 text-xs transition-colors"
                    >
                      <div class="flex items-center gap-2.5">
                        <span class="bg-success size-2 rounded-full"></span>
                        <span class="text-foreground font-medium">${ev.title}</span>
                      </div>
                      <div class="text-muted-foreground flex items-center gap-3 font-mono">
                        <span class="bg-muted text-foreground rounded px-1.5 py-0.5">${ev.latency}</span>
                        <span>${ev.time}</span>
                      </div>
                    </div>`,
                  )}
                </div>

                <div
                  class="text-muted-foreground border-border flex flex-wrap items-center justify-between gap-2 border-t pt-2 text-xs"
                >
                  <span class="flex items-center gap-1.5">
                    ${icon(ShieldCheck, 'shield-check', 'text-success size-4')}
                    <span>Zero message loss guaranteed via Raft consensus</span>
                  </span>
                  <span class="font-mono">Throughput: ~14,200 ev/sec</span>
                </div>
              </div>
            </div>

            <div data-uipkge="" data-slot="card" class=${cn(tileClass)}>
              <div data-uipkge="" data-slot="card-content" class="flex h-full flex-col justify-between space-y-6 p-6 pt-0">
                <div class="space-y-3">
                  <div class="flex items-center justify-between">
                    <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                      ${icon(ShieldCheck, 'shield-check', 'size-5')}
                    </div>
                    <uip-badge variant="outline" class="font-mono text-xs">SOC 2 Type II</uip-badge>
                  </div>
                  <div>
                    <h3 class="text-foreground text-lg font-bold tracking-tight">Compliance & Vault</h3>
                    <p class="text-muted-foreground text-xs">
                      Continuous cryptographic verification, automated KMS key rotation, and granular RBAC.
                    </p>
                  </div>
                </div>

                <div class="border-border bg-muted/20 space-y-3 rounded-lg border p-3.5 text-xs">
                  <div class="flex items-center justify-between">
                    <span class="text-muted-foreground">AES-256 GCM at rest</span>
                    <span class="text-success flex items-center gap-1 font-semibold">
                      ${icon(CheckCircle2, 'circle-check-big', 'size-3.5')} Enforced
                    </span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-muted-foreground">mTLS v1.3 in transit</span>
                    <span class="text-success flex items-center gap-1 font-semibold">
                      ${icon(CheckCircle2, 'circle-check-big', 'size-3.5')} Enforced
                    </span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-muted-foreground">SCIM v2 Directory Sync</span>
                    <span class="text-foreground font-semibold">Active</span>
                  </div>
                </div>

                <uip-button variant="outline" class="h-9 w-full gap-1.5 text-xs font-semibold">
                  <span>View Trust Center</span>
                  ${icon(ArrowRight, 'arrow-right', 'size-3.5')}
                </uip-button>
              </div>
            </div>
          </div>
        </div>
      </section>
    `
  }
}

customElements.get('uip-bento-01') || customElements.define('uip-bento-01', UipBento01)

declare global {
  interface HTMLElementTagNameMap {
    'uip-bento-01': UipBento01
  }
}

Raw manifest:https://uipkge.dev/r/lit/bento-01.json

Change language