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:T7c1f,"use client" /** * Animated search field with gradient border polish — tuned for both light and * dark themes using design tokens (`card`, `border`, `foreground`, etc.). */ import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, type ChangeEvent, type ComponentProps, type InputHTMLAttributes, } from "react" import { Warp, type WarpProps } from "@paper-design/shaders-react" import { AnimatePresence, motion, useInView, useReducedMotion, } from "motion/react" import { cn } from "@/lib/utils" /** Placeholder line: snappy stagger. */ const PLACEHOLDER_STAGGER_SEC = 0.018 const PLACEHOLDER_CHAR_DURATION_SEC = 0.16 /** Loading line: longer, more deliberate reveal (parent can override). */ const DEFAULT_LOADING_STAGGER_SEC = 0.038 const DEFAULT_LOADING_CHAR_DURATION_SEC = 0.36 /** Clear control ↔ spinner crossfade / shared layout (ease-out ~200ms). */ const TRAILING_ACTION_DURATION_SEC = 0.2 /** Caps right-to-left deletion stagger so long clears stay snappy and teardown stays in sync. */ const DELETION_MAX_STAGGER_SPAN_SEC = 0.85 /** * Per-glyph blur timing for `DeletedTextBlurReveal` and `scheduleDeletionEnd`. * Compresses delay steps when `(staggerGlyphCount - 1) * step` would exceed the cap. */ function getDeletionGlyphTiming(args: { sweepDurationMs: number /** Drives speed curve (same as count of glyphs that participate in the effect). */ animatedCount: number /** Full string length used for stagger delays (max index is `length - 1`). */ staggerGlyphCount: number }) { const sweepDurationSec = args.sweepDurationMs / 1000 const animatedCount = Math.max(1, args.animatedCount) const staggerCount = Math.max(1, args.staggerGlyphCount) const normalizedLength = Math.min(1, Math.max(0, (animatedCount - 1) / 60)) const easeOutLength = 1 - (1 - normalizedLength) ** 3 const speedFactor = 1 - 0.6 * easeOutLength const glyphDurationSec = Math.max( 0.12, Math.max(0.22, sweepDurationSec * 0.45) * speedFactor ) let glyphDelayStepSec = Math.max( 0.004, Math.max(0.012, sweepDurationSec * 0.03) * speedFactor ) const gapCount = Math.max(0, staggerCount - 1) const uncappedStaggerSpan = gapCount * glyphDelayStepSec if ( uncappedStaggerSpan > DELETION_MAX_STAGGER_SPAN_SEC && uncappedStaggerSpan > 0 ) { glyphDelayStepSec *= DELETION_MAX_STAGGER_SPAN_SEC / uncappedStaggerSpan } const staggerSpanSec = gapCount * glyphDelayStepSec return { glyphDurationSec, glyphDelayStepSec, staggerSpanSec } } interface HaloSearchInputProps extends InputHTMLAttributes { onClear?: () => void /** * Frosted, semi-transparent fill so animated gradient blobs show through more clearly. * Also applied automatically while `isLoading` (e.g. after submit until the request finishes). */ blobTranslucent?: boolean /** * When true, query text is hidden and staggered loading copy is shown (same motion as * the placeholder). Parent typically toggles this during async submit. */ isLoading?: boolean /** Copy shown while `isLoading`; defaults to “Searching…”. */ loadingText?: string /** Delay between each loading character’s fade-in (seconds). Default 0.038. */ loadingStaggerSec?: number /** Duration of each loading character’s fade-in (seconds). Default 0.36. */ loadingCharDurationSec?: number } function XIcon({ className }: { className?: string }) { return ( ) } /** Small indeterminate ring; Tailwind `animate-spin` avoids fighting parent `layoutId` transforms. */ function SearchFieldSpinner({ className, reduceMotion, }: { className?: string reduceMotion: boolean }) { return ( ) } const trailingMotionTransition = (reduceMotion: boolean) => ({ duration: reduceMotion ? 0 : TRAILING_ACTION_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 TrailingLoadingSlot({ reduceMotion }: { reduceMotion: boolean }) { const cross = trailingCrossfade(reduceMotion) return ( ) } function TrailingClearSlot({ reduceMotion, onClear, }: { reduceMotion: boolean onClear: () => void }) { const cross = trailingCrossfade(reduceMotion) return ( ) } function SearchTrailingAction({ hasValue, isLoading, reduceMotion, onClear, }: { hasValue: boolean isLoading: boolean reduceMotion: boolean onClear: () => void }) { if (!(hasValue || isLoading)) { return null } return (

{isLoading ? ( ) : ( )}

) } /** Overlay placeholder: each character fades in with a short stagger (re-mounted via `animateKey`). */ function AnimatedPlaceholder({ text, animateKey, reduceMotion, staggerSec = PLACEHOLDER_STAGGER_SEC, charDurationSec = PLACEHOLDER_CHAR_DURATION_SEC, }: { text: string animateKey: number reduceMotion: boolean /** Seconds between starting each child’s entrance. */ staggerSec?: number /** Seconds for each glyph’s opacity fade-in. */ charDurationSec?: number }) { // Keys like `a-0`, `a-1` so duplicate letters animate independently and remount cleanly. 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} ))} ) } export function HaloSearchInput({ className, value, onChange, onClear, placeholder = "Ask anything or search", blobTranslucent = false, isLoading = false, loadingText = "Searching…", loadingStaggerSec = DEFAULT_LOADING_STAGGER_SEC, loadingCharDurationSec = DEFAULT_LOADING_CHAR_DURATION_SEC, disabled, readOnly, ...props }: HaloSearchInputProps) { const showBlobTranslucent = blobTranslucent || isLoading const [internalValue, setInternalValue] = useState("") const [isFocused, setIsFocused] = useState(false) // While true, real input text is hidden and `DeletedTextBlurReveal` shows the last string. const [isDeleting, setIsDeleting] = useState(false) const [deletionGhostText, setDeletionGhostText] = useState( null ) // Which code units animate (here: entire string); could be a subset for partial effects. const [deletionIndexes, setDeletionIndexes] = useState([]) const [deletionKey, setDeletionKey] = useState(0) // Bumps `AnimatedPlaceholder`’s React key so the stagger runs again after a clear. const [placeholderAnimKey, setPlaceholderAnimKey] = useState(0) const [loadingAnimKey, setLoadingAnimKey] = useState(0) const inputRef = useRef(null) const deletionTimerRef = useRef | null>(null) const typingIdleTimerRef = useRef | null>(null) const [isTypingBurst, setIsTypingBurst] = useState(false) const wasDeletingRef = useRef(false) const wasLoadingRef = useRef(false) const reduceMotion = useReducedMotion() ?? false const deleteClipDurationMs = 340 const deleteSweepDurationMs = deleteClipDurationMs + deleteClipDurationMs / 2 // Controlled when `value` is passed; otherwise internal state mirrors the input. const currentValue = value === undefined ? internalValue : value const hasValue = String(currentValue).length > 0 useEffect(() => { return () => { if (deletionTimerRef.current) { clearTimeout(deletionTimerRef.current) } if (typingIdleTimerRef.current) { clearTimeout(typingIdleTimerRef.current) } } }, []) // After deletion teardown, replay placeholder entrance once the field is empty again. useEffect(() => { if (wasDeletingRef.current && !isDeleting && !hasValue) { setPlaceholderAnimKey((k) => k + 1) } wasDeletingRef.current = isDeleting }, [hasValue, isDeleting]) // Replay loading line stagger each time loading starts (same timing as placeholder). useEffect(() => { if (isLoading && !wasLoadingRef.current) { setLoadingAnimKey((k) => k + 1) } wasLoadingRef.current = isLoading }, [isLoading]) // Tear down overlay only after glyph timings finish (matches `DeletedTextBlurReveal` stagger). const scheduleDeletionEnd = useCallback( (deletedCount: number) => { if (deletionTimerRef.current) { clearTimeout(deletionTimerRef.current) } const { glyphDurationSec, staggerSpanSec } = getDeletionGlyphTiming({ sweepDurationMs: deleteSweepDurationMs, animatedCount: deletedCount, staggerGlyphCount: deletedCount, }) const totalGlyphRunMs = (staggerSpanSec + glyphDurationSec) * 1000 const teardownDelayMs = Math.max(deleteSweepDurationMs, totalGlyphRunMs) + 160 deletionTimerRef.current = setTimeout(() => { setIsDeleting(false) setDeletionGhostText(null) setDeletionIndexes([]) deletionTimerRef.current = null }, teardownDelayMs) }, [deleteSweepDurationMs] ) const handleChange = (e: ChangeEvent) => { const prevValue = String(currentValue) const newLength = e.target.value.length const prevLen = prevValue.length // Full clear (e.g. select-all + delete): play exit animation, then restore empty field. if (newLength === 0 && prevLen > 0 && !reduceMotion) { const fullDeletionIndexes = Array.from( { length: prevLen }, (_, idx) => idx ) setDeletionIndexes(fullDeletionIndexes) setDeletionGhostText(prevValue) setDeletionKey((k) => k + 1) setIsDeleting(true) scheduleDeletionEnd(prevLen) } if (onChange) { onChange(e) } else { setInternalValue(e.target.value) } const isAnimatedFullClear = newLength === 0 && prevLen > 0 && !reduceMotion if (!(reduceMotion || isAnimatedFullClear)) { if (typingIdleTimerRef.current) { clearTimeout(typingIdleTimerRef.current) } setIsTypingBurst(true) typingIdleTimerRef.current = setTimeout(() => { setIsTypingBurst(false) typingIdleTimerRef.current = null }, 420) } } // Mirrors the “clear to empty” path in `handleChange`, then focuses the input. const handleClear = () => { if (typingIdleTimerRef.current) { clearTimeout(typingIdleTimerRef.current) typingIdleTimerRef.current = null } setIsTypingBurst(false) if (hasValue && !reduceMotion) { const fullDeletionIndexes = Array.from( { length: String(currentValue).length }, (_, idx) => idx ) setDeletionIndexes(fullDeletionIndexes) setDeletionGhostText(String(currentValue)) setDeletionKey((k) => k + 1) setIsDeleting(true) scheduleDeletionEnd(String(currentValue).length) } if (onClear) { onClear() } else { setInternalValue("") } inputRef.current?.focus() } // Border glow: warmer, faster sweep while text deletion plays (ease-out aligned with exit). const borderGlow = useMemo(() => { if (isDeleting) { return { opacityIdle: 0.88, primaryBg: "linear-gradient(90deg, #fb7185, #f43f5e, #f97316, #ec4899, #a855f7)", secondaryBg: "linear-gradient(90deg, #fda4af, #fb923c, #f472b6, #fb7185)", tertiaryBg: "linear-gradient(90deg, #e11d48, #db2777, #c026d3, #9333ea)", primaryLeft: ["-8%", "92%", "-8%"], secondaryLeft: ["72%", "-2%", "72%"], tertiaryLeft: ["35%", "62%", "35%"], durationMain: 2.35, durationSec: 2, durationTer: 1.65, } } let idleOpacity: number if (showBlobTranslucent) { idleOpacity = isFocused ? 0.92 : 0.72 } else { idleOpacity = isFocused ? 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, } }, [showBlobTranslucent, isDeleting, isFocused]) // Avatar: faster pulse + shader while loading (“thinking”) vs typing burst vs idle. const { avatarPulseSec, avatarWarpSpeed } = useMemo(() => { if (isLoading) { return { avatarPulseSec: 1.65, avatarWarpSpeed: 3.45 } } if (isTypingBurst) { return { avatarPulseSec: 2.65, avatarWarpSpeed: 2.65 } } return { avatarPulseSec: 5.2, avatarWarpSpeed: 1.15 } }, [isLoading, isTypingBurst]) return (

{/* Outer container for gradient border effect */}

{/* Animated gradient glow layer - sits behind the input */}

{/* Gradient container positioned at the bottom */} {/* Main flowing gradient blob */} {/* Secondary warm accent */} {/* Tertiary cool accent */}

{/* Input container — solid or frosted glass so gradient blobs read through */}

{/* Input + animated placeholder overlay; empty `placeholder` — label text is custom. */}

setIsFocused(false)} onChange={handleChange} onFocus={() => setIsFocused(true)} placeholder="" readOnly={readOnly || isLoading} ref={inputRef} type="text" value={currentValue} /> {isLoading && ( )} {!(hasValue || isDeleting || isLoading) && ( )} {/* Deletion animation - blur reveal sweep over deleted text */} {isDeleting && deletionGhostText !== null && ( )}

) } interface DeletedTextBlurRevealProps { text: string animatedIndexes?: number[] reduceMotion?: boolean className?: string textClassName?: string clipDurationMs?: number blurPx?: number saturatePercent?: number /** Optional diagonal blur “wiper” (disabled in the search field for a simpler exit). */ showSweep?: boolean } /** * Absolute overlay: clones the string as per-glyph spans, blurs/fades them on a delay * (right-to-left), optionally with a masked backdrop-blur sweep and soft-light noise strip. */ export function DeletedTextBlurReveal({ text, animatedIndexes, reduceMotion = false, className, textClassName, clipDurationMs = 340, blurPx = 10, saturatePercent = 220, showSweep = true, }: DeletedTextBlurRevealProps) { const noiseFilterId = useId() const sweepDurationMs = clipDurationMs + clipDurationMs / 2 // Per character + stable key; `order` is index for stagger math. const glyphs = useMemo(() => { const counts = new Map() let order = 0 return Array.from(text, (char) => { const count = counts.get(char) ?? 0 counts.set(char, count + 1) const glyph = { char, key: `${char}-${count}`, order, index: order, } order += 1 return glyph }) }, [text]) // `null` set means animate every glyph; otherwise only indices in the set animate to blurred state. const animatedIndexSet = useMemo(() => { if (!animatedIndexes || animatedIndexes.length === 0) { return null } return new Set(animatedIndexes) }, [animatedIndexes]) const animatedCount = animatedIndexes && animatedIndexes.length > 0 ? animatedIndexes.length : glyphs.length const { glyphDurationSec, glyphDelayStepSec } = getDeletionGlyphTiming({ sweepDurationMs, animatedCount, staggerGlyphCount: glyphs.length, }) return (

{glyphs.map((glyph) => ( {glyph.char === " " ? "\u00A0" : glyph.char} ))} {/* Moving soft mask + backdrop blur; gradient mask feathers the strip edges. */} {showSweep && (

{/* Fractal noise rect adds grain along the sweep (soft-light blend). */}

)}

) } const DEFAULT_WARP: Partial = { /** Matches idle `borderGlow` blobs: primary, secondary, tertiary gradient leading stops. */ // colors: ["#ff0080", "#ff4d4d", "#0070f3", "#00d4ff", "#7928ca"], // colors: ["#ff0080", "#7928ca", "#00d4ff", "#0070f3"], colors: ["#fda4af", "#0070f3", "#fb923c", "#f472b6", "#00d4ff"], distortion: 0.25, height: 720, proportion: 0.54, scale: 0.2, shape: "checks", shapeScale: 1, softness: 1, speed: 0.1, swirl: 0.8, swirlIterations: 10, width: 1280, } export type AiBlobWarpAvatarProps = Omit, "children"> & { /** Scale / rotate loop length in seconds. Default 5.2. */ pulseDurationSec?: number /** Props forwarded to the Paper `Warp` shader (merged after defaults). */ warpProps?: Partial } /** * Circular avatar frame with an animated Warp shader inside. * Motion uses transforms only; shader speed pauses off-screen and when `prefers-reduced-motion` is set. */ export const AiBlobWarpAvatar = forwardRef< HTMLDivElement, AiBlobWarpAvatarProps >(function AiBlobWarpAvatarImpl( { className, pulseDurationSec = 5.2, warpProps, ...props }, forwardedRef ) { const { className: warpClassName, speed: warpSpeed, ...restWarpProps } = warpProps ?? {} const rootRef = useRef(null) const reduceMotion = useReducedMotion() const inView = useInView(rootRef, { amount: 0.2, margin: "0px 0px -10% 0px", }) const live = inView && !reduceMotion const setRefs = useCallback( (node: HTMLDivElement | null) => { rootRef.current = node if (typeof forwardedRef === "function") { forwardedRef(node) } else if (forwardedRef) { forwardedRef.current = node } }, [forwardedRef] ) const baseSpeed = warpSpeed ?? DEFAULT_WARP.speed ?? 1 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","@paper-design/shaders-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40paper-design%2Fshaders-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":"@paper-design/shaders-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-search.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]