4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T91b,"use client"; import { useState } from "react"; import { BentoGridTemplateTwo, BentoItem, } from "@/registry/blocks/bento-grid/two/bento-grid-template-two"; const sampleBentoData: BentoItem[] = [ { id: "design-system", title: "Visual Design System", description: "A comprehensive blueprint system built for layout structure.", size: "large", tag: "Blueprint", link: "#design", }, { id: "ai-studio", title: "AI Studio", description: "Train and run agent prompting nodes with simple inputs.", size: "small", tag: "Active", link: "#ai", }, { id: "analytics", title: "Analytics Engine", description: "Real-time metric telemetry and sparkline graphing.", size: "small", tag: "Live", link: "#analytics", }, { id: "cloud-platform", title: "Cloud Delivery Edge", description: "Globally distributed regional edge nodes with real-time status reporting.", size: "wide", tag: "Edge", link: "#cloud", }, { id: "security", title: "Security Suite", description: "Enterprise access control with JWT signature validation.", size: "small", tag: "Secure", link: "#security", }, { id: "dev-hub", title: "Developer Hub", description: "CLI components and automated workspace setups.", size: "small", tag: "CLI Tool", link: "#docs", }, { id: "collaboration", title: "Realtime Collaboration", description: "Multiplayer live presence cursors and shared scaling viewports.", size: "small", tag: "Multiplayer", link: "#collaboration", }, { id: "community", title: "Community & Integrations", description: "Sync schemas across third-party operations pipelines.", size: "small", tag: "Sync Ready", link: "#community", }, ]; export default function BentoGridTwo() { const [items] = useState(sampleBentoData); return (

); } 52:T682c,"use client"; import React, { useState, useEffect } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; import Link from "next/link"; import { ArrowUpRight, Lock, CheckCircle2, RefreshCw } from "lucide-react"; export type BentoItem = { id: string; title: string; description?: string; size?: "small" | "medium" | "large" | "wide" | "tall"; tag?: string; link?: string; }; export type BentoGridProps = { items: BentoItem[]; className?: string; animate?: boolean; gap?: number; }; export function BentoGridTemplateTwo({ items, className, animate = true, gap = 6, }: BentoGridProps) { return (

{items.map((item, i) => { return ( ); })}

); } // Card 1: Visual Design System Morphing Mockup function DesignSystemMockup() { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const interval = setInterval(() => { setIsMobile((prev) => !prev); }, 3000); return () => clearInterval(interval); }, []); return (

{/* Blueprint Grid Lines */}

{/* Header details */}

RESPONSIVE CANVAS {isMobile ? "VIEWPORT: MOBILE" : "VIEWPORT: DESKTOP"}

{/* Morphing layout boxes */}

{/* Box 1: Core Hero block */}

{/* Box 2: Secondary card */}

{/* Box 3: Tertiary card */}

{/* Canvas alignment indicators */}

Auto-Layout: Flex

Gap: 12px

{/* Footer details */}

COORDINATE MAPPING ENGINE

); } // Card 2: AI Studio typewriting effect function AIStudioMockup() { const text = "Design modular navigation bar with responsive layout"; const [displayText, setDisplayText] = useState(""); useEffect(() => { let i = 0; let isDeleting = false; let timer: NodeJS.Timeout; const type = () => { if (!isDeleting) { setDisplayText(text.slice(0, i)); i++; if (i > text.length) { isDeleting = true; timer = setTimeout(type, 1500); // pause at the end return; } timer = setTimeout(type, 70); } else { setDisplayText(text.slice(0, i)); i--; if (i < 0) { isDeleting = false; i = 0; timer = setTimeout(type, 500); // pause before starting over return; } timer = setTimeout(type, 30); } }; type(); return () => clearTimeout(timer); }, []); return (

Agent Prompt Model: sol-v4

> {displayText} |

Tokens: {displayText.length * 3} / 8k

); } // Card 3: Analytics build of curve animation function AnalyticsMockup() { return (

Telemetry Rate ONLINE

AVG LATENCY: 14ms SYNC RATE: 99.98%

); } // Card 4: Cloud Latency Monitor Mockup function CloudMockup() { const [latency1, setLatency1] = useState(11); const [latency2, setLatency2] = useState(24); const [latency3, setLatency3] = useState(38); useEffect(() => { const interval = setInterval(() => { setLatency1(Math.floor(9 + Math.random() * 5)); setLatency2(Math.floor(21 + Math.random() * 6)); setLatency3(Math.floor(35 + Math.random() * 7)); }, 2000); return () => clearInterval(interval); }, []); return (

Regional Edge Nodes Active Distribution

US-EAST {latency1}ms

EU-WEST {latency2}ms

AP-SOUTH {latency3}ms

); } // Card 5: Security Lock Mockup function SecurityMockup() { const [isValidating, setIsValidating] = useState(false); useEffect(() => { const interval = setInterval(() => { setIsValidating(true); setTimeout(() => setIsValidating(false), 900); }, 4000); return () => clearInterval(interval); }, []); return (

Access Control

eyJhbGciOiJIUzI1NiJ9. eyJuYW1lIjoiU2FyYWgifQ. signature-verification-key

ALGORITHM: HS256 {isValidating ? "VERIFYING..." : "SIGNATURE VALIDATED"}

); } // Card 6: Developer CLI mockup function DeveloperHubMockup() { const [step, setStep] = useState(0); useEffect(() => { const interval = setInterval(() => { setStep((prev) => (prev + 1) % 3); }, 3000); return () => clearInterval(interval); }, []); return (

terminal

{step >= 0 && (

$ npx solaceui add bento-grid

)} {step === 1 && (

installing components...

)} {step === 2 && (

Component successfully added

)}

solaceui-cli@1.0.8

); } // Card 8: Community Integrations Sync Grid Mockup function CommunityMockup() { const [activeNode, setActiveNode] = useState(0); useEffect(() => { const interval = setInterval(() => { setActiveNode((prev) => (prev + 1) % 4); }, 1500); return () => clearInterval(interval); }, []); const nodes = ["GitHub", "Figma", "Slack", "Linear"]; return (

Schema Sync SYNCING

{nodes.map((node, index) => { const isActive = activeNode === index; return (

{node}

); })}

); } function BentoGridItem({ item }: { item: BentoItem }) { const { id, title, description, link, tag } = item; // Helper to render card visual mockup components const renderVisualMockup = () => { switch (id) { case "design-system": return ; case "ai-studio": return ; case "analytics": return ; case "cloud-platform": return ; case "security": return ; case "dev-hub": return ; case "collaboration": return (

{/* Cursor 1 */} SARAH {/* Cursor 2 */} MARCUS

); case "community": return ; default: return null; } }; const ContentWrapper = (

{/* Visual Header containing Tag and Arrow */}

{tag && ( {tag} )} {link && ( )}

{/* Custom Visual Graphic Content */}

{renderVisualMockup()}

{/* Title & Description at the bottom */}

{title}

{description && (

{description}

)}

); if (link) { return ( {ContentWrapper} ); } return ContentWrapper; } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/bento-grid/two/index.tsx","content":"$51","type":"registry:component","target":"components/bento-grid-2.tsx"},{"path":"src/registry/blocks/bento-grid/two/bento-grid-template-two.tsx","content":"$52","type":"registry:component","target":"components/bento-grid-template-two.tsx"}],"className":"h-[70svh] min-h-80"}]]}]