62: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"] 63: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"] 64:T6170,'use client'; import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type FocusEvent, type KeyboardEvent, type PointerEvent as ReactPointerEvent, } from 'react'; import gsap from 'gsap'; import { CustomEase } from 'gsap/CustomEase'; import { cn } from '@/lib/utils'; gsap.registerPlugin(CustomEase); const TEAL = '#045f64'; const LIME = '#c6f56f'; const INK = '#071d1b'; const CHIP_HEIGHT = 36; const CHIP_INSET = 12; const FLIGHT = 0.62; const LIFT = 12; const BAR_HEIGHT = 56; const PANEL_GAP = 12; const SEED = { width: 120, height: 40, bottom: 8, borderRadius: 20 }; const SEED_STYLE = { ...SEED }; type Kind = 'typed' | 'recent' | 'suggestion'; interface Option { key: string; term: string; kind: Kind; } interface Flight { term: string; to: 'bar' | 'list'; left: number; top: number; width: number; height: number; fontSize: string; } export interface MorphingSearchProps { suggestions?: readonly string[]; chips?: string[]; defaultChips?: string[]; onChipsChange?: (chips: string[]) => void; defaultRecents?: string[]; onRecentsChange?: (recents: string[]) => void; maxRecents?: number; maxSuggestions?: number; maxChips?: number; placeholder?: string; label?: string; name?: string; className?: string; } const prefersReducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const sameTerm = (a: string, b: string) => a.toLowerCase() === b.toLowerCase(); const createEases = () => { CustomEase.create('search-glide', '0.32, 0.72, 0, 1'); }; const SearchIcon = ({ className }: { className?: string }) => ( ); const ClockIcon = () => ( ); const PlusIcon = () => ( ); const CloseIcon = () => ( ); const Match = ({ term, query }: { term: string; query: string }) => { const at = query ? term.toLowerCase().indexOf(query.toLowerCase()) : -1; if (at < 0) return term; return ( <> {term.slice(0, at)} {term.slice(at, at + query.length)} {term.slice(at + query.length)} ); }; const MorphingSearch = ({ suggestions = [], chips: chipsProp, defaultChips = [], onChipsChange, defaultRecents = [], onRecentsChange, maxRecents = 5, maxSuggestions = 5, maxChips, placeholder = 'Search', label = 'Search', name, className, }: MorphingSearchProps) => { const rootRef = useRef(null); const chipRowRef = useRef(null); const inputRef = useRef(null); const panelRef = useRef(null); const blobRef = useRef(null); const markerRef = useRef(null); const ghostRef = useRef(null); const revealed = useRef(null); const markerShown = useRef(false); const latestChips = useRef(defaultChips); const id = useId(); const gooId = `search-goo-${id.replace(/[^a-zA-Z0-9_-]/g, '')}`; const [ownChips, setOwnChips] = useState(defaultChips); const [recents, setRecents] = useState(defaultRecents); const [query, setQuery] = useState(''); const [open, setOpen] = useState(false); const [active, setActive] = useState(0); const [marked, setMarked] = useState(null); const [flight, setFlight] = useState(null); const [landing, setLanding] = useState(null); const [leaving, setLeaving] = useState(null); const [note, setNote] = useState({ text: '', count: 0 }); const chips = chipsProp ?? ownChips; const typed = query.trim(); const listId = `${id}-list`; const hintId = `${id}-hint`; const optionId = (index: number) => `${id}-option-${index}`; useLayoutEffect(() => { latestChips.current = chips; }); const options = useMemo(() => { const held = chips.filter((chip) => chip !== leaving); if (!typed) { return recents .filter((term) => !held.some((chip) => sameTerm(chip, term))) .map((term) => ({ key: `recent-${term}`, term, kind: 'recent' })); } const needle = typed.toLowerCase(); const taken = new Set([needle, ...held.map((chip) => chip.toLowerCase())]); const found: Option[] = []; const consider = (term: string, kind: Kind) => { const key = term.toLowerCase(); if (taken.has(key) || !key.includes(needle)) return; taken.add(key); found.push({ key: `${kind}-${term}`, term, kind }); }; recents.forEach((term) => consider(term, 'recent')); suggestions.forEach((term) => consider(term, 'suggestion')); return [ { key: `typed-${typed}`, term: typed, kind: 'typed' }, ...found.slice(0, maxSuggestions), ]; }, [typed, recents, suggestions, chips, leaving, maxSuggestions]); const current = Math.min(active, Math.max(options.length - 1, 0)); const showPanel = open && options.length > 0; const activeId = showPanel ? optionId(current) : undefined; const announce = (text: string) => setNote((last) => ({ text, count: last.count + 1 })); const commitChips = (next: string[]) => { if (chipsProp === undefined) setOwnChips(next); onChipsChange?.(next); }; const commitRecents = (next: string[]) => { setRecents(next); onRecentsChange?.(next); }; const chipElement = (term: string) => Array.from(rootRef.current?.querySelectorAll('[data-chip]') ?? []).find( (element) => element.dataset.chip === term ); const rowLabel = (term: string) => Array.from(panelRef.current?.querySelectorAll('[data-value]') ?? []) .find((element) => element.dataset.value === term) ?.querySelector('[data-term]'); const add = (term: string, source: HTMLElement | null) => { const value = term.trim(); if (!value) return; const exists = chips.some((chip) => sameTerm(chip, value)); if (!exists && maxChips !== undefined && chips.length >= maxChips) { announce(`You can add up to ${maxChips} filters`); return; } if (!exists) { if (source && !prefersReducedMotion()) { const box = source.getBoundingClientRect(); setFlight({ term: value, to: 'bar', left: box.left - CHIP_INSET, top: box.top + (box.height - CHIP_HEIGHT) / 2, width: 0, height: CHIP_HEIGHT, fontSize: getComputedStyle(source).fontSize, }); setLanding(value); } commitChips([...chips, value]); announce(`Added filter ${value}`); } commitRecents( [value, ...recents.filter((recent) => !sameTerm(recent, value))].slice(0, maxRecents) ); setQuery(''); setActive(0); }; const remove = (term: string) => { const finish = () => { commitChips(latestChips.current.filter((chip) => chip !== term)); setLeaving((current) => (current === term ? null : current)); announce(`Removed filter ${term}`); }; commitRecents( [term, ...recents.filter((recent) => !sameTerm(recent, term))].slice(0, maxRecents) ); const element = chipElement(term); if (!element || prefersReducedMotion()) finish(); else { const box = element.getBoundingClientRect(); setLeaving(term); setLanding(term); setFlight({ term, to: 'list', left: box.left, top: box.top, width: box.width, height: box.height, fontSize: getComputedStyle(element).fontSize, }); gsap.to(element, { width: 0, paddingLeft: 0, paddingRight: 0, marginRight: -6, opacity: 0, duration: 0.3, ease: 'power2.inOut', onComplete: finish, }); } setMarked(null); inputRef.current?.focus(); }; const forgetRecent = (term: string) => { commitRecents(recents.filter((recent) => recent !== term)); announce(`Removed ${term} from recent searches`); }; const moveTo = (index: number) => { setActive(index); document.getElementById(optionId(index))?.scrollIntoView?.({ block: 'nearest' }); }; const sourceFor = (index: number) => { const option = options[index]; if (!option || option.kind === 'typed') return inputRef.current; return ( document.getElementById(optionId(index))?.querySelector('[data-term]') ?? null ); }; const stepMark = (direction: -1 | 1) => { const at = marked === null ? chips.length : chips.indexOf(marked); const next = at + direction; setMarked(next >= chips.length ? null : (chips[Math.max(next, 0)] ?? null)); }; const onKeyDown = (event: KeyboardEvent) => { if (event.nativeEvent.isComposing) return; const field = event.currentTarget; const atStart = field.selectionStart === 0 && field.selectionEnd === 0; if (marked !== null) { if (event.key === 'Backspace' || event.key === 'Delete') { event.preventDefault(); remove(marked); return; } if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { event.preventDefault(); stepMark(event.key === 'ArrowLeft' ? -1 : 1); return; } if (event.key === 'Escape') { event.preventDefault(); setMarked(null); return; } setMarked(null); } if (event.key === 'Escape') { event.preventDefault(); if (query) setQuery(''); else setOpen(false); } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); if (!open) setOpen(true); else if (options.length) { const step = event.key === 'ArrowDown' ? 1 : options.length - 1; moveTo((current + step) % options.length); } } else if (event.key === 'Enter') { const option = options[current]; if (!showPanel || !option) return; event.preventDefault(); add(option.term, sourceFor(current)); } else if (event.key === 'Delete' && showPanel && options[current]?.kind === 'recent') { event.preventDefault(); const option = options[current]; if (option) forgetRecent(option.term); } else if ( (event.key === 'Backspace' || event.key === 'ArrowLeft') && atStart && chips.length ) { event.preventDefault(); const last = chips[chips.length - 1] ?? null; setMarked(last); if (last) announce(`${last} selected. Press Backspace again to remove it.`); } }; const onBarPointerDown = (event: ReactPointerEvent) => { if (event.target instanceof Element && event.target.closest('button, input')) return; event.preventDefault(); inputRef.current?.focus(); setOpen(true); }; const onBlur = (event: FocusEvent) => { const next = event.relatedTarget; if (!(next instanceof Node) || rootRef.current?.contains(next)) return; setOpen(false); setMarked(null); }; useEffect(() => { if (!open) return; const onPointerDown = (event: PointerEvent) => { if (event.target instanceof Node && rootRef.current?.contains(event.target)) return; setOpen(false); setMarked(null); }; document.addEventListener('pointerdown', onPointerDown, true); return () => document.removeEventListener('pointerdown', onPointerDown, true); }, [open]); useLayoutEffect(() => { if (!flight) return; const root = rootRef.current; const ghost = ghostRef.current; const toBar = flight.to === 'bar'; const target = toBar ? chipElement(flight.term) : rowLabel(flight.term); if (!root || !ghost || !target) { setFlight(null); setLanding(null); return; } createEases(); const row = chipRowRef.current; if (toBar && row) row.scrollLeft = row.scrollWidth; const rootBox = root.getBoundingClientRect(); const goal = target.getBoundingClientRect(); const fromX = flight.left - rootBox.left; const fromY = flight.top - rootBox.top; const toX = goal.left - rootBox.left - (toBar ? 0 : CHIP_INSET); const toY = goal.top - rootBox.top + (toBar ? 0 : (goal.height - CHIP_HEIGHT) / 2); gsap.set(ghost, { x: fromX, y: fromY, fontSize: flight.fontSize, opacity: 1 }); const natural = ghost.offsetWidth; gsap.set(ghost, { width: toBar ? natural : flight.width, color: toBar ? INK : LIME, backgroundColor: toBar ? 'rgba(198, 245, 111, 0)' : TEAL, }); const timeline = gsap.timeline({ onComplete: () => { setLanding(null); setFlight(null); }, }); timeline .to( ghost, { x: toX, width: toBar ? goal.width : natural, fontSize: 14, duration: FLIGHT, ease: 'search-glide', }, 0 ) .to(ghost, { y: Math.min(fromY, toY) - LIFT, duration: FLIGHT * 0.4, ease: 'power2.out' }, 0) .to(ghost, { y: toY, duration: FLIGHT * 0.6, ease: 'power2.inOut' }, FLIGHT * 0.4) .to( ghost, { backgroundColor: LIME, color: INK, duration: FLIGHT * 0.35, ease: 'power1.out' }, 0 ) .to( ghost, toBar ? { backgroundColor: TEAL, color: LIME, duration: FLIGHT * 0.5, ease: 'power1.inOut' } : { backgroundColor: 'rgba(198, 245, 111, 0)', duration: FLIGHT * 0.5, ease: 'power1.inOut', }, FLIGHT * 0.45 ); return () => { timeline.kill(); }; }, [flight]); useLayoutEffect(() => { const panel = panelRef.current; const blob = blobRef.current; if (!panel || !blob) return; createEases(); const first = revealed.current === null; const changed = revealed.current !== showPanel; revealed.current = showPanel; const settled = () => ({ width: panel.offsetWidth, height: panel.offsetHeight, bottom: BAR_HEIGHT + PANEL_GAP, borderRadius: 28, }); if (!changed && gsap.isTweening(blob)) return; if (!changed || first || prefersReducedMotion()) { gsap.killTweensOf([blob, panel]); gsap.set(blob, showPanel ? settled() : { ...SEED }); gsap.set(panel, { opacity: showPanel ? 1 : 0, y: 0 }); return; } if (showPanel) { gsap.to(blob, { ...settled(), duration: 0.64, ease: 'search-glide', overwrite: true, onComplete: () => { gsap.to(blob, { ...settled(), duration: 0.2, ease: 'power2.out' }); }, }); gsap.fromTo( panel, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.3, delay: 0.24, ease: 'power2.out', overwrite: true } ); } else { gsap.to(panel, { opacity: 0, duration: 0.12, ease: 'power1.out', overwrite: true }); gsap.to(blob, { ...SEED, duration: 0.44, ease: 'power3.inOut', overwrite: true }); } }, [showPanel]); useEffect(() => { const panel = panelRef.current; const blob = blobRef.current; if (!showPanel || !panel || !blob) return; const observer = new ResizeObserver(() => { if (gsap.isTweening(blob)) return; gsap.to(blob, { width: panel.offsetWidth, height: panel.offsetHeight, bottom: BAR_HEIGHT + PANEL_GAP, borderRadius: 28, duration: prefersReducedMotion() ? 0 : 0.3, ease: 'search-glide', overwrite: true, }); }); observer.observe(panel); return () => observer.disconnect(); }, [showPanel]); useLayoutEffect(() => { const marker = markerRef.current; if (!marker) return; const row = activeId ? document.getElementById(activeId) : null; if (!row) { gsap.killTweensOf(marker); gsap.set(marker, { opacity: 0 }); markerShown.current = false; return; } gsap.set(marker, { height: row.offsetHeight, opacity: 1 }); if (markerShown.current && !prefersReducedMotion()) { gsap.to(marker, { y: row.offsetTop, duration: 0.3, ease: 'power3.out', overwrite: true }); } else { gsap.killTweensOf(marker); gsap.set(marker, { y: row.offsetTop }); } markerShown.current = true; }, [activeId, options]); return (

{typed ? 'Suggestions' : 'Recent'} {!typed && options.length > 0 && ( )}

{chips.map((chip) => ( {chip} ))}

{ setQuery(event.target.value); setActive(0); setOpen(true); }} onFocus={() => setOpen(true)} onClick={() => setOpen(true)} onKeyDown={onKeyDown} className="h-9 min-w-24 flex-1 border-0 bg-transparent p-0 text-base text-[#071d1b] outline-none placeholder:text-[#045f64]/50" />

{flight && ( )} {name && chips.map((chip) => )} Press Enter to add a filter. Backspace at the start of the field selects the last filter; press it again to remove it. Delete removes the highlighted recent search. {note.text}

); }; export default MorphingSearch; 61:["$","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","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}]]}],["$","$L62",null,{"namespace":"@tween-ui","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"components/tweenui/morphing-search.tsx","content":"$64","type":"registry:component","target":"components/tweenui/morphing-search.tsx"}],"className":"h-[70svh] min-h-80"}]]}]