61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T15f1,"use client"; import { animate, AnimatePresence, motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform, type MotionValue, } from "motion/react"; import { useState, type FocusEvent, type ReactNode } from "react"; export type OrbitItem = { icon: ReactNode; label: string }; export type OrbitRing = { /** Distance from the center, in pixels. */ radius: number; /** Seconds for one lap. */ speed: number; items: OrbitItem[]; /** Turn this ring the other way. */ reverse?: boolean; }; type OrbitProps = { rings: OrbitRing[]; /** Content in the middle. */ center?: ReactNode; /** Turn every ring the other way. */ reverse?: boolean; /** Ease to a stop while the pointer or keyboard focus is on the orbit. */ pauseOnHover?: boolean; /** Item size, in pixels. */ itemSize?: number; /** Draw the ring paths. */ showRings?: boolean; /** Accessible name of the item list. */ label?: string; className?: string; }; const TAU = Math.PI * 2; /** Items circling a center on one or more rings. They stay upright, and show their label on hover or focus. */ export function Orbit({ rings, center, reverse = false, pauseOnHover = true, itemSize = 44, showRings = true, label = "Orbit", className = "", }: OrbitProps) { const reduce = Boolean(useReducedMotion()); // 1 is full speed, 0 is stopped. const pace = useMotionValue(1); const reach = Math.max(0, ...rings.map((r) => r.radius)); const box = reach * 2 + itemSize; function setPaused(paused: boolean) { if (!pauseOnHover) return; animate(pace, paused ? 0 : 1, { duration: paused ? 0.4 : 0.7, ease: "easeOut" }); } return (

setPaused(true)} onPointerLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={(e: FocusEvent) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setPaused(false); }} > {showRings ? rings.map((ring, i) => ( ); } type RingProps = { ring: OrbitRing; direction: number; pace: MotionValue; itemSize: number; reduce: boolean; }; function Ring({ ring, direction, pace, itemSize, reduce }: RingProps) { const angle = useMotionValue(0); useAnimationFrame((_, delta) => { if (reduce || ring.speed <= 0) return; const step = direction * pace.get() * (TAU / ring.speed) * (Math.min(delta, 64) / 1000); angle.set((angle.get() + step) % TAU); }); return ( <> {ring.items.map((item, i) => ( ))} ); } type OrbitNodeProps = { item: OrbitItem; angle: MotionValue; offset: number; radius: number; size: number; reduce: boolean; }; function OrbitNode({ item, angle, offset, radius, size, reduce }: OrbitNodeProps) { const [active, setActive] = useState(false); // Position from the angle instead of rotating the ring, so the item itself never turns. const x = useTransform(angle, (a) => Math.cos(a + offset - Math.PI / 2) * radius); const y = useTransform(angle, (a) => Math.sin(a + offset - Math.PI / 2) * radius); return ( setActive(true)} onPointerLeave={() => setActive(false)} onFocus={() => setActive(true)} onBlur={() => setActive(false)} className="grid size-full place-items-center rounded-full border border-ink-600 bg-ink-800 text-bone shadow-[0_10px_24px_-12px_rgb(0_0_0/0.9)] transition-colors hover:border-ember/60 [&>svg]:size-1/2" > {item.icon} {item.label} {active ? ( ) : null} ); } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@mekai-ui","registryDependencies":["https://ui.mekaigames.com/r/theme.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/orbit.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]