52: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"] 53: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"] 54:T263b,"use client" import { useState } from "react" import { DeployGlobe, type DeployNode, type DeployStatus, type TrajectoryStep, } from "@/registry/default/ui/illustration-globe-vercel" function DemoGlobeVercelControls({ status, accent, preset, onStatusChange, onPresetChange, onAccentChange, }: { status: DeployStatus accent: string preset: NodePresetName onStatusChange: (status: DeployStatus) => void onPresetChange: (preset: NodePresetName) => void onAccentChange: (color: string) => void }) { const pill = (active: boolean) => ({ padding: "5px 13px", borderRadius: 999, border: "none", background: active ? "var(--pill-active-bg, #171717)" : "var(--pill-bg, #f4f4f5)", color: active ? "var(--pill-active-fg, #fff)" : "var(--pill-fg, #52525b)", fontSize: 12, fontWeight: 500, cursor: "pointer", fontFamily: "ui-monospace, SFMono-Regular, monospace", transition: "background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out", letterSpacing: "0.02em", }) as React.CSSProperties return (

Status {(["deploying", "deployed", "error"] as DeployStatus[]).map( (nextStatus) => ( ) )}

Icons {(Object.keys(NODE_PRESETS) as NodePresetName[]).map((nextPreset) => ( ))}

Color {COLOR_PRESETS.map((colorPreset) => (

) } const TRAJ = { a: [ [3, 0], [3, 1], [3, 2], [3, 3], ] as TrajectoryStep[], b: [ [-3, 0], [-3, 1], [-3, 2], [-3, 3], [-3, 4], ] as TrajectoryStep[], c: [ [1, 0], [1, 1], [1, 2], ] as TrajectoryStep[], d: [ [-1, 0], [-1, 1], [-2, 1], ] as TrajectoryStep[], e: [ [0, 0], [0, 1], [0, 2], [0, 3], [-1, 3], ] as TrajectoryStep[], f: [ [2, 0], [2, 1], ] as TrajectoryStep[], } const DEMO_DOTS: DeployNode[] = [ { id: "a", trajectory: TRAJ.a }, { id: "b", trajectory: TRAJ.b }, { id: "c", trajectory: TRAJ.c }, { id: "d", trajectory: TRAJ.d }, { id: "e", trajectory: TRAJ.e }, { id: "f", trajectory: TRAJ.f }, ] const DEMO_TRIANGLES: DeployNode[] = [ { id: "a", trajectory: TRAJ.a, icon: "triangle" }, { id: "b", trajectory: TRAJ.b, icon: "triangle" }, { id: "c", trajectory: TRAJ.c, icon: "triangle" }, { id: "d", trajectory: TRAJ.d, icon: "triangle" }, { id: "e", trajectory: TRAJ.e, icon: "triangle" }, { id: "f", trajectory: TRAJ.f, icon: "triangle" }, ] const DEMO_INFRA: DeployNode[] = [ { id: "a", trajectory: TRAJ.a, icon: "server" }, { id: "b", trajectory: TRAJ.b, icon: "database" }, { id: "c", trajectory: TRAJ.c, icon: "cloud" }, { id: "d", trajectory: TRAJ.d, icon: "shield" }, { id: "e", trajectory: TRAJ.e, icon: "globe" }, { id: "f", trajectory: TRAJ.f, icon: "zap" }, ] const DEMO_CUSTOM: DeployNode[] = [ { id: "a", trajectory: TRAJ.a, icon: { d: "M12 2L2 22h20L12 2z", viewBox: "0 0 24 24" }, }, { id: "b", trajectory: TRAJ.b, icon: { d: "M4 4h16v16H4z", viewBox: "0 0 24 24" }, }, { id: "c", trajectory: TRAJ.c, icon: { d: "M12 3a9 9 0 100 18 9 9 0 000-18z", viewBox: "0 0 24 24" }, }, { id: "d", trajectory: TRAJ.d, icon: { d: "M12 2l8 4v6c0 5-3.8 9.7-8 10-4.2-.3-8-5-8-10V6l8-4z", viewBox: "0 0 24 24", }, }, { id: "e", trajectory: TRAJ.e, icon: { d: "M12 2v8h8v4h-8v8h-4v-8H0v-4h8V2z", viewBox: "0 0 24 24" }, }, { id: "f", trajectory: TRAJ.f, icon: { d: "M12 1l10 6v10l-10 6L2 17V7l10-6z", viewBox: "0 0 24 24" }, }, ] const NODE_PRESETS = { Dots: DEMO_DOTS, Vercel: DEMO_TRIANGLES, Infra: DEMO_INFRA, Custom: DEMO_CUSTOM, } as const type NodePresetName = keyof typeof NODE_PRESETS const COLOR_PRESETS = [ { label: "Blue", color: "#3B82F6" }, { label: "Teal", color: "#45DEC4" }, { label: "Purple", color: "#A855F7" }, { label: "Rose", color: "#F43F5E" }, { label: "Amber", color: "#F59E0B" }, ] function DemoGlobeVercel() { const [status, setStatus] = useState("deployed") const [accent, setAccent] = useState("#3B82F6") const [preset, setPreset] = useState("Vercel") const activeNodes = NODE_PRESETS[preset] return (

) } export default DemoGlobeVercel 51:["$","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":[null,["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":["illustration-globe-vercel"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/example/illustration-globe-vercel-demo.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]