{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "bento-01", "title": "Telemetry Bento", "type": "registry:block", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/bento-01/bento-01.ts", "content": "import { LitElement, css, html } from 'lit'\nimport { Activity, ArrowRight, Bot, CheckCircle2, Globe2, Layers, ShieldCheck, Terminal, Zap } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\n\nconst 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\nconst 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// Card chrome follows the registry Card verbatim (see the login-01 block:\n// surfaces stay plain divs so per-tile classes like the hover border apply\n// to the painted box; the nested uip-* hosts carry only their own API).\nconst tileClass =\n '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'\n\n/**\n * — the registry Bento01 block as a web component.\n *\n * Class strings are React's Bento01 verbatim. React state (useState) becomes\n * @state fields; the AI-optimization timeout is cleared in\n * `disconnectedCallback`. The prompt field is a native input like React's\n * (not ); progress tracks are plain divs carrying React's\n * Progress root/indicator classes so the per-tile heights apply.\n */\nexport class UipBento01 extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n activeEventFilter: { state: true },\n isSimulatingPrompt: { state: true },\n aiPromptInput: { state: true },\n aiDraftOutput: { state: true },\n }\n\n private activeEventFilter: 'all' | 'deploy' | 'security' | 'database' = 'all'\n private isSimulatingPrompt = false\n private aiPromptInput = 'Optimize database indexing for high concurrency tenant reads'\n private aiDraftOutput =\n 'Generated compound B-Tree index on `(tenant_id, created_at DESC)` reducing p99 latency from 142ms to 6ms.'\n private timer?: number\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'bento-01')\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.timer) window.clearTimeout(this.timer)\n }\n\n private get filteredEvents() {\n if (this.activeEventFilter === 'all') return liveTelemetryEvents\n return liveTelemetryEvents.filter((e) => e.type === this.activeEventFilter)\n }\n\n private runAiOptimization() {\n this.isSimulatingPrompt = true\n this.aiDraftOutput = 'Analyzing query AST and cache hit rates...'\n if (this.timer) window.clearTimeout(this.timer)\n this.timer = window.setTimeout(() => {\n this.aiDraftOutput = 'Applied index pushdown & partitioned query plan. Estimated cache hit rate: 98.4%.'\n this.isSimulatingPrompt = false\n }, 900)\n }\n\n private filterTab(\n id: 'all' | 'deploy' | 'database' | 'security',\n label: string,\n ) {\n return html` {\n this.activeEventFilter = id\n }}\n >\n ${label}\n `\n }\n\n render() {\n return html`\n
\n
\n
\n \n ${icon(Layers, 'layers', 'size-3.5')}\n Unified Enterprise Architecture\n
\n

\n Everything your engineering team needs to move at velocity\n

\n

\n Engineered for extreme performance, continuous security governance, and multi-cloud resilience from day\n one.\n

\n
\n\n
\n
\n
\n
\n
\n
\n ${icon(Bot, 'bot', 'size-5')}\n
\n
\n

\n Autonomous AI Query & Performance Copilot\n

\n

\n Analyzes production query patterns in real-time and recommends zero-downtime optimizations.\n

\n
\n
\n \n LLM Grounded · v4.8\n \n
\n\n
\n
\n Input Prompt Context:\n \n ${icon(CheckCircle2, 'circle-check-big', 'size-3.5')}\n AST Validated\n \n
\n
\n
\n {\n this.aiPromptInput = (e.target as HTMLInputElement).value\n }}\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
\n \n ${icon(Zap, 'zap', 'size-3.5 fill-current')}\n ${this.isSimulatingPrompt ? 'Running...' : 'Optimize'}\n \n
\n\n
\n
\n \n ${icon(Terminal, 'terminal', 'text-primary size-3')}\n Optimization Plan Output\n \n 98.4% Efficiency Gain\n
\n

${this.aiDraftOutput}

\n
\n
\n\n
\n
\n

0.4ms

\n

Inference Overhead

\n
\n
\n

99.8%

\n

Syntactic Accuracy

\n
\n
\n

3.4M

\n

Queries Analyzed

\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n ${icon(Globe2, 'globe-2', 'size-5')}\n
\n \n \n 32 Edge PoPs\n \n
\n
\n

Global Edge Mesh

\n

\n Sub-20ms p99 execution worldwide with automatic zero-downtime failover routing.\n

\n
\n
\n\n
\n ${edgeRegions.map(\n (region) => html`\n
\n ${region.code}\n ${region.name}\n
\n ${region.latency}\n
`,\n )}\n
\n\n
\n
\n Global Route SLA\n 99.995%\n
\n \n
\n
\n
\n \n \n\n
\n
\n
\n
\n
\n ${icon(Activity, 'activity', 'size-5')}\n
\n
\n

Real-Time Event Stream

\n

\n Deterministic audit feed capturing deployments, schema migrations, and security operations.\n

\n
\n
\n\n
\n ${this.filterTab('all', 'All')} ${this.filterTab('deploy', 'Deploy')}\n ${this.filterTab('database', 'Data')} ${this.filterTab('security', 'Security')}\n
\n
\n\n
\n ${this.filteredEvents.map(\n (ev) => html`\n
\n \n ${ev.title}\n
\n
\n ${ev.latency}\n ${ev.time}\n
\n
`,\n )}\n
\n\n \n \n ${icon(ShieldCheck, 'shield-check', 'text-success size-4')}\n Zero message loss guaranteed via Raft consensus\n \n Throughput: ~14,200 ev/sec\n
\n \n \n\n
\n
\n
\n
\n
\n ${icon(ShieldCheck, 'shield-check', 'size-5')}\n
\n SOC 2 Type II\n
\n
\n

Compliance & Vault

\n

\n Continuous cryptographic verification, automated KMS key rotation, and granular RBAC.\n

\n
\n
\n\n
\n
\n AES-256 GCM at rest\n \n ${icon(CheckCircle2, 'circle-check-big', 'size-3.5')} Enforced\n \n
\n
\n mTLS v1.3 in transit\n \n ${icon(CheckCircle2, 'circle-check-big', 'size-3.5')} Enforced\n \n
\n
\n SCIM v2 Directory Sync\n Active\n
\n
\n\n \n View Trust Center\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n
\n
\n \n \n
\n `\n }\n}\n\ncustomElements.get('uip-bento-01') || customElements.define('uip-bento-01', UipBento01)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-bento-01': UipBento01\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/bento-01/bento-01.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/lit-core.json" ] }