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:T3556,"use client" /** * Primary action button matching `HaloSearchInput` polish: animated gradient * rim, frosted fill, staggered label, loading text + trailing spinner crossfade. */ import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, } from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cn } from "@/lib/utils" const LABEL_STAGGER_SEC = 0.018 const LABEL_CHAR_DURATION_SEC = 0.16 const DEFAULT_LOADING_STAGGER_SEC = 0.038 const DEFAULT_LOADING_CHAR_DURATION_SEC = 0.36 const TRAILING_EXIT_DURATION_SEC = 0.2 /** Layout spring: smooth width when label/spinner changes; bounce kept low per motion skill. */ const layoutSpring = { type: "spring" as const, bounce: 0.12, damping: 34, stiffness: 420, } const trailingExitTransition = (reduceMotion: boolean) => ({ duration: reduceMotion ? 0 : TRAILING_EXIT_DURATION_SEC, ease: "easeOut" as const, }) const trailingCrossfade = (reduceMotion: boolean) => ({ exit: { opacity: reduceMotion ? 1 : 0, scale: reduceMotion ? 1 : 0.88, }, initial: { opacity: reduceMotion ? 1 : 0, scale: reduceMotion ? 1 : 0.88, }, }) function ButtonSpinner({ className, reduceMotion, }: { className?: string reduceMotion: boolean }) { return ( ) } function StaggeredTextLabel({ text, reduceMotion, staggerSec = LABEL_STAGGER_SEC, charDurationSec = LABEL_CHAR_DURATION_SEC, }: { text: string reduceMotion: boolean staggerSec?: number charDurationSec?: number }) { const chars = useMemo(() => { const counts = new Map() return Array.from(text, (char) => { const count = counts.get(char) ?? 0 counts.set(char, count + 1) return { char, key: `${char}-${count}` } }) }, [text]) return ( {chars.map((glyph) => ( {glyph.char} ))} ) } function TrailingLoadingSlot({ reduceMotion, reveal, }: { reduceMotion: boolean reveal: boolean }) { const cross = trailingCrossfade(reduceMotion) return ( ) } export interface HaloButtonProps extends Omit, "children"> { children: ReactNode /** Frosted inner surface so gradient blobs read through (matches search translucent mode). */ translucent?: boolean /** Shows trailing spinner and sets `aria-busy`; label switches to `loadingText`. */ isLoading?: boolean /** Copy shown while `isLoading` (staggered when `staggerLabel` is true). */ loadingText?: string /** Stagger between loading glyphs (seconds). */ loadingStaggerSec?: number /** Duration of each loading glyph fade-in (seconds). */ loadingCharDurationSec?: number /** * When `children` is a string, replay character stagger on change. * Ignored for non-string children. */ staggerLabel?: boolean className?: string } export function HaloButton({ children, className, translucent = true, isLoading = false, loadingText = "Working…", loadingStaggerSec = DEFAULT_LOADING_STAGGER_SEC, loadingCharDurationSec = DEFAULT_LOADING_CHAR_DURATION_SEC, staggerLabel = true, disabled, onFocus, onBlur, onMouseEnter, onMouseLeave, style, ...props }: HaloButtonProps) { const [isFocused, setIsFocused] = useState(false) const [isHovered, setIsHovered] = useState(false) /** Spinner fades in only after outer `layout` width animation finishes (avoids leading the expansion). */ const [trailingRevealReady, setTrailingRevealReady] = useState(false) const reduceMotion = useReducedMotion() ?? false const isLoadingRef = useRef(isLoading) isLoadingRef.current = isLoading useEffect(() => { if (!isLoading) { setTrailingRevealReady(false) return } if (reduceMotion) { setTrailingRevealReady(true) } }, [isLoading, reduceMotion]) /** If layout completion never fires (e.g. zero delta), still reveal the spinner. */ useEffect(() => { if (!isLoading || reduceMotion) { return } const id = window.setTimeout(() => { setTrailingRevealReady(true) }, 480) return () => window.clearTimeout(id) }, [isLoading, reduceMotion]) /** `disabled` + `pointer-events-none` while loading can strand `isHovered`; ignore hover then. */ const hoverAllowed = !(disabled || isLoading) const rimEmphasis = isFocused || (isHovered && hoverAllowed) const borderGlow = useMemo(() => { let idleOpacity: number if (translucent) { idleOpacity = rimEmphasis ? 0.92 : 0.72 } else { idleOpacity = rimEmphasis ? 0.78 : 0.5 } return { opacityIdle: idleOpacity, primaryBg: "linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)", secondaryBg: "linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)", tertiaryBg: "linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)", primaryLeft: ["-5%", "75%", "-5%"], secondaryLeft: ["65%", "10%", "65%"], tertiaryLeft: ["25%", "55%", "25%"], durationMain: 6, durationSec: 5, durationTer: 4, } }, [translucent, rimEmphasis]) const labelIsString = typeof children === "string" const showTrailing = isLoading const labelContent = (() => { if (isLoading) { if (staggerLabel) { return ( ) } return ( {loadingText} ) } if (labelIsString && staggerLabel) { return } return ( {children} ) })() let fillBackground: string if (translucent) { if (isHovered && hoverAllowed) { fillBackground = "linear-gradient(to bottom, color-mix(in oklch, var(--card) 88%, transparent) 0%, color-mix(in oklch, var(--card) 74%, transparent) 100%)" } else { fillBackground = "linear-gradient(to bottom, color-mix(in oklch, var(--card) 82%, transparent) 0%, color-mix(in oklch, var(--card) 70%, transparent) 100%)" } } else if (isHovered && hoverAllowed) { fillBackground = "linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 90%, var(--muted)) 100%)" } else { fillBackground = "linear-gradient(to bottom, var(--card) 0%, color-mix(in oklch, var(--card) 94%, var(--muted)) 100%)" } return ( { if (isLoadingRef.current && !reduceMotion) { setTrailingRevealReady(true) } }} >

{ setIsFocused(false) onBlur?.(e) }} onFocus={(e) => { setIsFocused(true) onFocus?.(e) }} onMouseEnter={(e) => { setIsHovered(true) onMouseEnter?.(e) }} onMouseLeave={(e) => { setIsHovered(false) onMouseLeave?.(e) }} style={{ ...style, background: fillBackground, }} {...props} > {labelContent} {showTrailing ? (

) : null}

) } 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/halo-button.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]