52: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"] 53: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"] 54:T6102,"use client" /** * Multiline prompt field matching `HaloSearchInput` polish: animated gradient * rim blobs (inlined; no `halo-card` import), soft ambient backdrop orbs, frosted * fill, `AiBlobWarpAvatar` + Paper `Warp` shader (inlined; no `halo-search` import), * staggered * placeholder / loading line, trailing attach + send with the same layout + crossfade * as search (send ↔ spinner). */ import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, type ChangeEvent, type ComponentProps, type KeyboardEvent, type TextareaHTMLAttributes, } from "react" import { Button as ButtonPrimitive } from "@base-ui/react/button" import { Warp, type WarpProps } from "@paper-design/shaders-react" import { Paperclip, Send } from "lucide-react" import { AnimatePresence, motion, useInView, useReducedMotion, } from "motion/react" import { cn } from "@/lib/utils" /* ─── Rim blobs (self-contained; no halo-card import) ─── */ type RimVariant = "default" | "success" | "destructive" const RIM_BLOB_GRADIENTS: Record< RimVariant, { primaryBg: string; secondaryBg: string; tertiaryBg: string } > = { default: { primaryBg: "linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)", secondaryBg: "linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)", tertiaryBg: "linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)", }, success: { primaryBg: "linear-gradient(90deg, #047857, #059669, #10b981, #14b8a6, #0d9488)", secondaryBg: "linear-gradient(90deg, #34d399, #6ee7b7, #2dd4bf, #5eead4)", tertiaryBg: "linear-gradient(90deg, #065f46, #047857, #0f766e)", }, destructive: { primaryBg: "linear-gradient(90deg, #991b1b, #dc2626, #e11d48, #f43f5e, #be123c)", secondaryBg: "linear-gradient(90deg, #fb7185, #fda4af, #f87171, #fecdd3)", tertiaryBg: "linear-gradient(90deg, #7f1d1d, #b91c1c, #dc2626)", }, } function composerBorderGlowConfig( translucent: boolean, rimEmphasis: boolean, rimVariant: RimVariant = "default" ) { let idleOpacity: number if (translucent) { idleOpacity = rimEmphasis ? 0.92 : 0.72 } else { idleOpacity = rimEmphasis ? 0.78 : 0.5 } const gradients = RIM_BLOB_GRADIENTS[rimVariant] return { opacityIdle: idleOpacity, primaryBg: gradients.primaryBg, secondaryBg: gradients.secondaryBg, tertiaryBg: gradients.tertiaryBg, primaryLeft: ["-5%", "75%", "-5%"], secondaryLeft: ["65%", "10%", "65%"], tertiaryLeft: ["25%", "55%", "25%"], durationMain: 6, durationSec: 5, durationTer: 4, } } type ComposerBorderGlowState = ReturnType function ComposerCardRimBlobs({ borderGlow, reduceMotion, }: { borderGlow: ComposerBorderGlowState reduceMotion: boolean }) { return (

) } /* ─── Shader avatar (inlined; no halo-search import) ─── */ const DEFAULT_WARP: Partial = { 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"> & { pulseDurationSec?: number warpProps?: Partial } 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 (

) }) AiBlobWarpAvatar.displayName = "AiBlobWarpAvatar" /** Placeholder line: snappy stagger (matches search). */ const PLACEHOLDER_STAGGER_SEC = 0.018 const PLACEHOLDER_CHAR_DURATION_SEC = 0.16 const DEFAULT_LOADING_STAGGER_SEC = 0.038 const DEFAULT_LOADING_CHAR_DURATION_SEC = 0.36 const TRAILING_ACTION_DURATION_SEC = 0.2 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 FieldSpinner({ className, reduceMotion, }: { className?: string reduceMotion: boolean }) { return ( ) } function AnimatedPlaceholder({ text, animateKey, reduceMotion, staggerSec = PLACEHOLDER_STAGGER_SEC, charDurationSec = PLACEHOLDER_CHAR_DURATION_SEC, className, alignTop, }: { text: string animateKey: number reduceMotion: boolean staggerSec?: number charDurationSec?: number className?: string alignTop?: boolean }) { 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 }: { reduceMotion: boolean }) { const cross = trailingCrossfade(reduceMotion) return ( ) } function TrailingSendSlot({ reduceMotion, disabled, onClick, }: { reduceMotion: boolean disabled: boolean onClick: () => void }) { const cross = trailingCrossfade(reduceMotion) return ( Send message ) } /** Large, soft aurora behind the rim — balances the tall textarea without fighting the bottom blobs. */ function AmbientComposerBackdrop({ reduceMotion, emphasis, }: { reduceMotion: boolean emphasis: boolean }) { const drift = reduceMotion ? { duration: 0 } : { duration: 18, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" as const, } return (

) } export interface PromptComposerProps extends Omit< TextareaHTMLAttributes, "onResize" | "children" > { /** * Frosted fill so animated gradient blobs read through more clearly. * Also applied automatically while `isLoading`. */ blobTranslucent?: boolean isLoading?: boolean loadingText?: string loadingStaggerSec?: number loadingCharDurationSec?: number /** Fires when the user clicks Send or presses ⌘/Ctrl+Enter (unless `disabled` / loading / empty). */ onSend?: () => void /** When set, an attach control is shown (unless `showAttach` is false). */ onAttach?: () => void showAttach?: boolean /** Grow height with content up to `maxAutoGrowPx`. */ autoGrow?: boolean maxAutoGrowPx?: number } export const PromptComposer = forwardRef< HTMLTextAreaElement, PromptComposerProps >( // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mirrors search/composer surface; splitting would obscure the single-field API. function PromptComposerImpl( { className, value, onChange, placeholder = "Write a prompt…", blobTranslucent = false, isLoading = false, loadingText = "Sending…", loadingStaggerSec = DEFAULT_LOADING_STAGGER_SEC, loadingCharDurationSec = DEFAULT_LOADING_CHAR_DURATION_SEC, disabled, readOnly, onSend, onAttach, showAttach, autoGrow = true, maxAutoGrowPx = 280, onKeyDown, ...props }, forwardedRef ) { const showBlobTranslucent = blobTranslucent || isLoading const [internalValue, setInternalValue] = useState("") const [isFocused, setIsFocused] = useState(false) const [placeholderAnimKey, setPlaceholderAnimKey] = useState(0) const [loadingAnimKey, setLoadingAnimKey] = useState(0) const [isTypingBurst, setIsTypingBurst] = useState(false) const textareaRef = useRef(null) const typingIdleTimerRef = useRef | null>( null ) const wasLoadingRef = useRef(isLoading) const reduceMotion = useReducedMotion() ?? false const fieldId = useId() useEffect(() => { if (isLoading && !wasLoadingRef.current) { setLoadingAnimKey((k) => k + 1) } wasLoadingRef.current = isLoading }, [isLoading]) const setRefs = useCallback( (node: HTMLTextAreaElement | null) => { textareaRef.current = node if (typeof forwardedRef === "function") { forwardedRef(node) } else if (forwardedRef) { forwardedRef.current = node } }, [forwardedRef] ) const currentValue = value === undefined ? internalValue : value const hasValue = String(currentValue).trim().length > 0 const canSend = hasValue && !isLoading && !disabled && !readOnly const showAttachControl = (showAttach ?? !!onAttach) && !!onAttach useEffect(() => { return () => { if (typingIdleTimerRef.current) { clearTimeout(typingIdleTimerRef.current) } } }, []) const adjustHeight = useCallback(() => { const el = textareaRef.current if (!(el && autoGrow)) { return } el.style.height = "auto" const next = Math.min(el.scrollHeight, maxAutoGrowPx) el.style.height = `${next}px` }, [autoGrow, maxAutoGrowPx]) // biome-ignore lint/correctness/useExhaustiveDependencies: rerun when controlled `value` changes from parent (not only via onChange). useEffect(() => { adjustHeight() }, [adjustHeight, currentValue]) const handleChange = (e: ChangeEvent) => { const prevLen = String(currentValue).length const nextLen = e.target.value.length if (nextLen === 0 && prevLen > 0) { setPlaceholderAnimKey((k) => k + 1) } if (onChange) { onChange(e) } else { setInternalValue(e.target.value) } if (!reduceMotion) { if (typingIdleTimerRef.current) { clearTimeout(typingIdleTimerRef.current) } setIsTypingBurst(true) typingIdleTimerRef.current = setTimeout(() => { setIsTypingBurst(false) typingIdleTimerRef.current = null }, 420) } } const fireSend = useCallback(() => { if (!canSend) { return } onSend?.() }, [canSend, onSend]) const handleKeyDown = (e: KeyboardEvent) => { onKeyDown?.(e) if (e.defaultPrevented) { return } if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault() fireSend() } } const borderGlow = useMemo( () => composerBorderGlowConfig(showBlobTranslucent, isFocused), [showBlobTranslucent, isFocused] ) 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 (

setIsFocused(false)}
                  onChange={(e) => {
                    handleChange(e)
                    queueMicrotask(adjustHeight)
                  }}
                  onFocus={() => setIsFocused(true)}
                  onKeyDown={handleKeyDown}
                  placeholder=""
                  readOnly={readOnly || isLoading}
                  ref={setRefs}
                  rows={props.rows ?? 4}
                  value={currentValue}
                />
                {isLoading && (
                  <AnimatedPlaceholder
                    alignTop
                    animateKey={loadingAnimKey}
                    charDurationSec={loadingCharDurationSec}
                    className="pr-1"
                    reduceMotion={reduceMotion}
                    staggerSec={loadingStaggerSec}
                    text={loadingText}
                  />
                )}
                {!(hasValue || isLoading) && (
                  <AnimatedPlaceholder
                    alignTop
                    animateKey={placeholderAnimKey}
                    className="pr-1"
                    reduceMotion={reduceMotion}
                    text={placeholder}
                  />
                )}
              </div>
            </div>

<div className="flex items-center justify-end gap-2 border-border/50 border-t pt-2">
              {showAttachControl ? (
                <ButtonPrimitive
                  className={cn(
                    "flex min-h-10 min-w-10 shrink-0 select-none items-center justify-center rounded-full outline-none",
                    "bg-muted text-muted-foreground shadow-foreground/10 shadow-sm ring-1 ring-foreground/10",
                    "transition-[background-color,color,transform] duration-150 ease-out",
                    "fine-hover:hover:bg-accent fine-hover:hover:text-accent-foreground",
                    "focus-visible:ring-2 focus-visible:ring-ring/35",
                    "enabled:active:scale-[0.96] motion-reduce:enabled:active:scale-100",
                    (disabled || isLoading) && "pointer-events-none opacity-40"
                  )}
                  disabled={disabled || isLoading}
                  onClick={onAttach}
                  type="button"
                >
                  <Paperclip aria-hidden className="size-4 shrink-0" />
                  <span className="sr-only">Attach file</span>
                </ButtonPrimitive>
              ) : null}

<div className="relative size-10 shrink-0">
                <AnimatePresence initial={false} mode="popLayout">
                  {isLoading ? (
                    <TrailingLoadingSlot reduceMotion={reduceMotion} />
                  ) : (
                    <TrailingSendSlot
                      disabled={!canSend}
                      onClick={fireSend}
                      reduceMotion={reduceMotion}
                    />
                  )}
                </AnimatePresence>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
)

export type PromptTextareaProps = PromptComposerProps

/** Alias for consumers that think of this surface as a textarea first. */
export { PromptComposer as PromptTextarea }
51:["$","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","@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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/prompt-composer.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>