50: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"] 51: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"] 52:T2b26,"use client" import React, { useEffect, useRef, useState } from "react" import { Pause, Play } from "lucide-react" import { renderToString } from "react-dom/server" import { Button } from "@/components/ui/button" interface Icon { x: number y: number z: number scale: number opacity: number id: number } interface IconCloudProps { icons?: React.ReactNode[] images?: string[] showControl?: boolean } function easeOutCubic(t: number): number { return 1 - Math.pow(1 - t, 3) } export function IconCloud({ icons, images, showControl = true, }: IconCloudProps) { const canvasRef = useRef(null) const [iconPositions, setIconPositions] = useState([]) const [isDragging, setIsDragging] = useState(false) const [isPaused, setIsPaused] = useState(false) const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 }) const [mousePos, setMousePos] = useState({ x: 0, y: 0 }) const [targetRotation, setTargetRotation] = useState<{ x: number y: number startX: number startY: number distance: number startTime: number duration: number } | null>(null) const animationFrameRef = useRef(0) const rotationRef = useRef({ x: 0, y: 0 }) const iconCanvasesRef = useRef([]) const imagesLoadedRef = useRef([]) // Pause animation if user prefers reduced motion useEffect(() => { const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)") if (mediaQuery.matches) { setIsPaused(true) } const handleChange = (e: MediaQueryListEvent) => { setIsPaused(e.matches) } mediaQuery.addEventListener("change", handleChange) return () => mediaQuery.removeEventListener("change", handleChange) }, []) // Create icon canvases once when icons/images change useEffect(() => { if (!icons && !images) return const items = icons ?? images ?? [] imagesLoadedRef.current = new Array(items.length).fill(false) const newIconCanvases = items.map((item, index) => { const offscreen = document.createElement("canvas") offscreen.width = 40 offscreen.height = 40 const offCtx = offscreen.getContext("2d") if (offCtx) { if (images) { // Handle image URLs directly const img = new Image() img.crossOrigin = "anonymous" img.src = items[index] as string img.onload = () => { offCtx.clearRect(0, 0, offscreen.width, offscreen.height) // Create circular clipping path offCtx.beginPath() offCtx.arc(20, 20, 20, 0, Math.PI * 2) offCtx.closePath() offCtx.clip() // Draw the image offCtx.drawImage(img, 0, 0, 40, 40) imagesLoadedRef.current[index] = true } } else { // Handle SVG icons offCtx.scale(0.4, 0.4) const svgString = renderToString(item as React.ReactElement) const img = new Image() img.src = "data:image/svg+xml;base64," + btoa(svgString) img.onload = () => { offCtx.clearRect(0, 0, offscreen.width, offscreen.height) offCtx.drawImage(img, 0, 0) imagesLoadedRef.current[index] = true } } } return offscreen }) iconCanvasesRef.current = newIconCanvases }, [icons, images]) // Generate initial icon positions on a sphere useEffect(() => { const items = icons ?? images ?? [] const newIcons: Icon[] = [] const numIcons = items.length || 20 // Fibonacci sphere parameters const offset = 2 / numIcons const increment = Math.PI * (3 - Math.sqrt(5)) for (let i = 0; i < numIcons; i++) { const y = i * offset - 1 + offset / 2 const r = Math.sqrt(1 - y * y) const phi = i * increment const x = Math.cos(phi) * r const z = Math.sin(phi) * r newIcons.push({ x: x * 100, y: y * 100, z: z * 100, scale: 1, opacity: 1, id: i, }) } setIconPositions(newIcons) }, [icons, images]) // Handle mouse events const handleMouseDown = (e: React.MouseEvent) => { const rect = canvasRef.current?.getBoundingClientRect() if (!rect || !canvasRef.current) return const x = e.clientX - rect.left const y = e.clientY - rect.top const ctx = canvasRef.current.getContext("2d") if (!ctx) return iconPositions.forEach((icon) => { const cosX = Math.cos(rotationRef.current.x) const sinX = Math.sin(rotationRef.current.x) const cosY = Math.cos(rotationRef.current.y) const sinY = Math.sin(rotationRef.current.y) const rotatedX = icon.x * cosY - icon.z * sinY const rotatedZ = icon.x * sinY + icon.z * cosY const rotatedY = icon.y * cosX + rotatedZ * sinX const screenX = canvasRef.current!.width / 2 + rotatedX const screenY = canvasRef.current!.height / 2 + rotatedY const scale = (rotatedZ + 200) / 300 const radius = 20 * scale const dx = x - screenX const dy = y - screenY if (dx * dx + dy * dy < radius * radius) { const targetX = -Math.atan2( icon.y, Math.sqrt(icon.x * icon.x + icon.z * icon.z) ) const targetY = Math.atan2(icon.x, icon.z) const currentX = rotationRef.current.x const currentY = rotationRef.current.y const distance = Math.sqrt( Math.pow(targetX - currentX, 2) + Math.pow(targetY - currentY, 2) ) const duration = Math.min(2000, Math.max(800, distance * 1000)) setTargetRotation({ x: targetX, y: targetY, startX: currentX, startY: currentY, distance, startTime: performance.now(), duration, }) return } }) setIsDragging(true) setLastMousePos({ x: e.clientX, y: e.clientY }) } const handleMouseMove = (e: React.MouseEvent) => { const rect = canvasRef.current?.getBoundingClientRect() if (rect) { const x = e.clientX - rect.left const y = e.clientY - rect.top setMousePos({ x, y }) } if (isDragging) { const deltaX = e.clientX - lastMousePos.x const deltaY = e.clientY - lastMousePos.y rotationRef.current = { x: rotationRef.current.x + deltaY * 0.002, y: rotationRef.current.y + deltaX * 0.002, } setLastMousePos({ x: e.clientX, y: e.clientY }) } } const handleMouseUp = () => { setIsDragging(false) } // Animation and rendering useEffect(() => { const canvas = canvasRef.current const ctx = canvas?.getContext("2d") if (canvas && ctx) { const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) const centerX = canvas.width / 2 const centerY = canvas.height / 2 const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY) const dx = mousePos.x - centerX const dy = mousePos.y - centerY const distance = Math.sqrt(dx * dx + dy * dy) const speed = 0.003 + (distance / maxDistance) * 0.01 if (targetRotation) { const elapsed = performance.now() - targetRotation.startTime const progress = Math.min(1, elapsed / targetRotation.duration) const easedProgress = easeOutCubic(progress) rotationRef.current = { x: targetRotation.startX + (targetRotation.x - targetRotation.startX) * easedProgress, y: targetRotation.startY + (targetRotation.y - targetRotation.startY) * easedProgress, } if (progress >= 1) { setTargetRotation(null) } } else if (!isDragging && !isPaused) { rotationRef.current = { x: rotationRef.current.x + (dy / canvas.height) * speed, y: rotationRef.current.y + (dx / canvas.width) * speed, } } iconPositions.forEach((icon, index) => { const cosX = Math.cos(rotationRef.current.x) const sinX = Math.sin(rotationRef.current.x) const cosY = Math.cos(rotationRef.current.y) const sinY = Math.sin(rotationRef.current.y) const rotatedX = icon.x * cosY - icon.z * sinY const rotatedZ = icon.x * sinY + icon.z * cosY const rotatedY = icon.y * cosX + rotatedZ * sinX const scale = (rotatedZ + 200) / 300 const opacity = Math.max(0.2, Math.min(1, (rotatedZ + 150) / 200)) ctx.save() ctx.translate( canvas.width / 2 + rotatedX, canvas.height / 2 + rotatedY ) ctx.scale(scale, scale) ctx.globalAlpha = opacity if (icons || images) { // Only try to render icons/images if they exist if ( iconCanvasesRef.current[index] && imagesLoadedRef.current[index] ) { ctx.drawImage(iconCanvasesRef.current[index], -20, -20, 40, 40) } } else { // Show numbered circles if no icons/images are provided ctx.beginPath() ctx.arc(0, 0, 20, 0, Math.PI * 2) ctx.fillStyle = "#4444ff" ctx.fill() ctx.fillStyle = "white" ctx.textAlign = "center" ctx.textBaseline = "middle" ctx.font = "16px Arial" ctx.fillText(`${icon.id + 1}`, 0, 0) } ctx.restore() }) const hasPendingAssets = Boolean(icons || images) && !imagesLoadedRef.current.every((loaded) => loaded) const shouldContinue = !isPaused || isDragging || targetRotation !== null || hasPendingAssets if (shouldContinue) { animationFrameRef.current = requestAnimationFrame(animate) } } animate() } return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } }, [ icons, images, iconPositions, isDragging, isPaused, mousePos, targetRotation, ]) return (

) } 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@magicui","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/magicui/icon-cloud.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]