52: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"] 53:T6bf1,"use client" import { useCallback, useMemo, useState } from "react" import { cn } from "@/lib/utils" export type DeployStatus = "deploying" | "deployed" | "error" export type TrajectoryStep = [number, number] export type BuiltInNodeIcon = | "triangle" | "server" | "database" | "globe" | "shield" | "zap" | "cloud" | "hexagon" export type CustomNodeIcon = { d: string; viewBox?: string } export type NodeIcon = BuiltInNodeIcon | CustomNodeIcon export type DeployNode = { id: string trajectory: TrajectoryStep[] icon?: NodeIcon } export type DeployNodeData = DeployNode & { pathD: string waypoints: { x: number; y: number }[] endPt: { x: number; y: number } } export type DeployGlobeProps = { status?: DeployStatus nodes?: DeployNode[] accentColor?: string duration?: number className?: string onReplay?: () => void } const MERIDIANS = [-4, -3, -2, -1, 0, 1, 2, 3, 4] const ROWS = [1, 2, 3, 4, 5, 6, 7, 8, 9] const ICON_PATHS: Record = { triangle: "M8 1L15 14H1L8 1Z", server: "M2 3a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm0 6a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V9zm9-5.5a.75.75 0 100-1.5.75.75 0 000 1.5zM11 10.5a.75.75 0 100-1.5.75.75 0 000 1.5z", database: "M8 1C4.13 1 1 2.34 1 4v8c0 1.66 3.13 3 7 3s7-1.34 7-3V4c0-1.66-3.13-3-7-3zm0 2c3.31 0 5 .9 5 1s-1.69 1-5 1-5-.9-5-1 1.69-1 5-1zm5 9c0 .1-1.69 1-5 1s-5-.9-5-1V9.47C4.55 10.06 6.15 10.5 8 10.5s3.45-.44 5-1.03V12zm0-4c0 .1-1.69 1-5 1s-5-.9-5-1V5.47C4.55 6.06 6.15 6.5 8 6.5s3.45-.44 5-1.03V8z", globe: "M8 1a7 7 0 100 14A7 7 0 008 1zM6.53 2.66A5.5 5.5 0 002.6 7H5.1c.1-1.62.4-3.07.86-4.13a5.52 5.52 0 01.57-.21zm2.94 0c.2.06.39.13.57.21.46 1.06.76 2.51.87 4.13h2.49a5.5 5.5 0 00-3.93-4.34zM6.6 7c.1-1.46.38-2.73.77-3.6.26-.58.52-.9.63-.9.11 0 .37.32.63.9.39.87.67 2.14.77 3.6H6.6zm-4 2a5.5 5.5 0 003.93 4.34 5.43 5.43 0 01-.57-.21C5.5 12.07 5.2 10.62 5.1 9H2.6zm6.87 4.34A5.5 5.5 0 0013.4 9h-2.49c-.1 1.62-.41 3.07-.87 4.13.18-.06.37-.13.57-.21h-.24zM6.6 9c.1 1.46.38 2.73.77 3.6.26.58.52.9.63.9.11 0 .37-.32.63-.9.39-.87.67-2.14.77-3.6H6.6z", shield: "M8 1L2 4v4c0 3.33 2.56 6.44 6 7.15C11.44 14.44 14 11.33 14 8V4L8 1zm0 2.18L12 5.4v2.6c0 2.52-1.77 4.86-4 5.55-2.23-.69-4-3.03-4-5.55V5.4L8 3.18z", zap: "M8.94 1.5L3 9h4.5l-.44 5.5L13 7H8.5l.44-5.5z", cloud: "M12.5 6.5A4.5 4.5 0 004 7.08 3.5 3.5 0 003.5 14h9a3 3 0 000-6 4.47 4.47 0 000-1.5zM8 4a3 3 0 00-2.83 2.02l-.23.67-.7.1A2 2 0 005.5 12.5h7a1.5 1.5 0 000-3h-.73l-.12-.72A3 3 0 008 4z", hexagon: "M8 1.5L14 5v6l-6 3.5L2 11V5l6-3.5zm0 1.73L3.5 6.04v4.92L8 13.77l4.5-2.81V6.04L8 3.23z", } const DEFAULT_NODES: DeployNode[] = [ { id: "n1", trajectory: [ [3, 0], [3, 1], [3, 2], [3, 3], ], }, { id: "n2", trajectory: [ [-3, 0], [-3, 1], [-3, 2], [-3, 3], [-3, 4], ], }, { id: "n3", trajectory: [ [1, 0], [1, 1], [1, 2], ], }, { id: "n4", trajectory: [ [-1, 0], [-1, 1], [-2, 1], ], }, { id: "n5", trajectory: [ [0, 0], [0, 1], [0, 2], [0, 3], [-1, 3], ], }, { id: "n6", trajectory: [ [2, 0], [2, 1], ], }, ] function meridianA(index: number, radius: number) { return ( radius * Math.sin((Math.abs(index) / 4) * (Math.PI / 2)) * Math.sign(index) ) } function rowY(row: number, cy: number, radius: number) { return cy - radius + row * ((2 * radius) / 10) } function pointOnMeridian( mIdx: number, row: number, cx: number, cy: number, radius: number ) { const a = meridianA(mIdx, radius) const y = rowY(row, cy, radius) const t = (y - cy) / radius const xOff = Math.abs(a) * Math.sqrt(Math.max(0, 1 - t * t)) return { x: cx + (a >= 0 ? xOff : -xOff), y } } function horizontalSpan(row: number, cx: number, cy: number, radius: number) { const y = rowY(row, cy, radius) const t = (y - cy) / radius const half = radius * Math.sqrt(Math.max(0, 1 - t * t)) return { x1: cx - half, x2: cx + half, y } } function buildPathData( trajectory: TrajectoryStep[], cx: number, cy: number, radius: number ) { const northPole = { x: cx, y: cy - radius } const points = trajectory.map(([m, row]) => pointOnMeridian(m, row, cx, cy, radius) ) const allPoints = [northPole, ...points] const parts = [`M ${northPole.x.toFixed(2)} ${northPole.y.toFixed(2)}`] for (let index = 1; index < allPoints.length; index++) { const point = allPoints[index] if (index === 1) { const m = trajectory[0][0] const a = Math.abs(meridianA(m, radius)) const sweep = m >= 0 ? 1 : 0 if (a < 0.5) { parts.push(`L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`) } else { parts.push( `A ${a.toFixed(2)} ${radius} 0 0 ${sweep} ${point.x.toFixed(2)} ${point.y.toFixed(2)}` ) } } else { const [prevM, prevRow] = trajectory[index - 2] const [currentM, currentRow] = trajectory[index - 1] if (currentM === prevM) { const a = Math.abs(meridianA(currentM, radius)) const sweep = currentM >= 0 ? currentRow > prevRow ? 1 : 0 : currentRow > prevRow ? 0 : 1 if (a < 0.5) { parts.push(`L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`) } else { parts.push( `A ${a.toFixed(2)} ${radius} 0 0 ${sweep} ${point.x.toFixed(2)} ${point.y.toFixed(2)}` ) } } else { parts.push(`L ${point.x.toFixed(2)} ${point.y.toFixed(2)}`) } } } return { d: parts.join(" "), waypoints: allPoints } } function GlobeWireframe({ cx, cy, radius, wireColor, }: { cx: number cy: number radius: number wireColor: string }) { return ( {MERIDIANS.map((m) => { const a = Math.abs(meridianA(m, radius)) const dir = m >= 0 ? 1 : 0 return ( ) })} {ROWS.map((row) => { const { x1, x2, y } = horizontalSpan(row, cx, cy, radius) return ( ) })} ) } function DeployPath({ pathD, waypoints, accent, duration, id, }: { pathD: string waypoints: { x: number; y: number }[] accent: string duration: number id: string }) { const waypointCount = waypoints.length const totalPhases = waypointCount + 3 const keyTimes = Array.from({ length: totalPhases + 1 }, (_, index) => (index / totalPhases).toFixed(4) ) const keyTimesStr = keyTimes.join(";") const cxValues: string[] = [] const cyValues: string[] = [] const radiusValues: string[] = [] const opacityValues: string[] = [] const first = waypoints[0] const last = waypoints[waypointCount - 1] for (let index = 0; index <= totalPhases; index++) { if (index === 0) { cxValues.push(first.x.toFixed(1)) cyValues.push(first.y.toFixed(1)) radiusValues.push("0") opacityValues.push("0") } else if (index <= waypointCount) { const point = waypoints[index - 1] cxValues.push(point.x.toFixed(1)) cyValues.push(point.y.toFixed(1)) radiusValues.push("140") opacityValues.push("1") } else if (index === waypointCount + 1) { cxValues.push(last.x.toFixed(1)) cyValues.push(last.y.toFixed(1)) radiusValues.push("140") opacityValues.push("1") } else if (index === waypointCount + 2) { cxValues.push(last.x.toFixed(1)) cyValues.push(last.y.toFixed(1)) radiusValues.push("0") opacityValues.push("0") } else { cxValues.push(first.x.toFixed(1)) cyValues.push(first.y.toFixed(1)) radiusValues.push("0") opacityValues.push("0") } } const gradientId = `dg-${id}` return ( ) } function NodeMarker({ x, y, accent, wireColor, duration, waypointCount, icon, }: { x: number y: number accent: string wireColor: string duration: number waypointCount: number icon?: NodeIcon }) { const totalPhases = waypointCount + 3 const arrivalFraction = waypointCount / totalPhases const p1 = arrivalFraction const p2 = Math.min(p1 + 0.06, 0.97) const p3 = Math.min(p1 + 0.12, 0.98) const p4 = Math.min(p1 + 0.2, 0.99) const keyTimes = `0;${p1.toFixed(4)};${p2.toFixed(4)};${p3.toFixed(4)};${p4.toFixed(4)};1` const hasIcon = icon != null let iconPath: string | null = null let iconViewBox = "0 0 16 16" if (hasIcon) { if (typeof icon === "string") { iconPath = ICON_PATHS[icon] } else { iconPath = icon.d iconViewBox = icon.viewBox || iconViewBox } } const [vbX, vbY, vbW, vbH] = iconViewBox.split(" ").map(Number) const targetSize = 16 const scale = targetSize / Math.max(vbW || 16, vbH || 16) const offsetX = x - ((vbW || 16) * scale) / 2 - vbX * scale const offsetY = y - ((vbH || 16) * scale) / 2 - vbY * scale return ( {hasIcon && iconPath ? ( ) : ( )} ) } function DeployGlobeSvg({ animationKey, width, height, children, }: { animationKey: number width: number height: number children: React.ReactNode }) { return ( ) } function DeployGlobeStatusBadge({ statusLabel, onReplay, }: { statusLabel: string onReplay: () => void }) { return (

{statusLabel}

) } function DeployGlobe({ status = "deployed", nodes = DEFAULT_NODES, accentColor, duration = 4.5, className = "", onReplay, }: DeployGlobeProps) { const [animationKey, setAnimationKey] = useState(0) const width = 800 const height = 400 const cx = width / 2 const cy = height const radius = height const accent = status === "error" ? "var(--globe-error, #EF4444)" : accentColor || "#45DEC4" const wireColor = "var(--globe-wire, #c9c9c9)" const replay = useCallback(() => { setAnimationKey((key) => key + 1) onReplay?.() }, [onReplay]) const nodeData = useMemo( () => nodes.map((node) => { const { d, waypoints } = buildPathData(node.trajectory, cx, cy, radius) const endPt = waypoints[waypoints.length - 1] return { ...node, pathD: d, waypoints, endPt } }), [nodes, cx, cy, radius] ) const statusLabel = status === "error" ? "failed" : status === "deploying" ? "deploying…" : "deployed" return (

{status !== "error" ? nodeData.map((node) => ( )) : null} {nodeData.map((node) => ( ))}

) } 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 { MERIDIANS, ROWS, DEFAULT_NODES, GlobeWireframe, DeployPath, NodeMarker, DeployGlobeSvg, DeployGlobeStatusBadge, DeployGlobe, DemoGlobeVercelControls, DemoGlobeVercel, } export default DemoGlobeVercel 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/default/ui/illustration-globe-vercel.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]