4f: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"] 50: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"] 51:T492a,"use client"; // beui.dev/components/blocks/morphing-search import { type LucideIcon, Search } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, type Transition, useReducedMotion, } from "motion/react"; import { type KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease"; import { useOnOpen } from "@/lib/hooks/use-on-open"; import { useRowCursor } from "@/lib/hooks/use-row-cursor"; import { cn } from "@/lib/utils"; // Keeps the Wallet Card feel with a little more time to read the morph. const SEARCH_MORPH: Transition = { type: "spring", duration: 0.58, bounce: 0.22, }; // Keep the spring on the shell, but unfold complex clip-path values with the // same progressive tween as Morph Popover so the content never snaps ahead. const SEARCH_CLIP_TRANSITION: Transition = { duration: 0.32, ease: EASE_OUT, }; export type MorphingSearchItem = { id: string; title: string; description?: string; keywords?: string[]; icon?: LucideIcon; onSelect?: () => void; }; export interface MorphingSearchProps { items: MorphingSearchItem[]; placeholder?: string; shortcut?: string; /** Render the closed trigger as a compact search icon. */ iconOnly?: boolean; emptyMessage?: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; onQueryChange?: (query: string) => void; onSelect?: (item: MorphingSearchItem) => void; className?: string; } type AnchorRect = { top: number; left: number; width: number; }; function isEditableTarget(target: EventTarget | null) { if (!(target instanceof HTMLElement)) return false; return ( target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement ); } export function MorphingSearch({ items, placeholder = "Search", shortcut = "f", iconOnly = false, emptyMessage = "No results found.", open: controlledOpen, defaultOpen = false, onOpenChange, onQueryChange, onSelect, className, }: MorphingSearchProps) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const [query, setQuery] = useState(""); const [mounted, setMounted] = useState(false); const [backgroundScrollLocked, setBackgroundScrollLocked] = useState(defaultOpen); const [anchorRect, setAnchorRect] = useState({ top: 16, left: 16, width: 288, }); const open = controlledOpen ?? internalOpen; const controlled = controlledOpen !== undefined; const reduce = useReducedMotion(); const uid = useId(); const anchorRef = useRef(null); const triggerRef = useRef(null); const inputRef = useRef(null); const dialogRef = useRef(null); const listRef = useRef(null); const previousFocusRef = useRef(null); const wasOpenRef = useRef(open); const transition: Transition = reduce ? { duration: 0 } : SPRING_LAYOUT; const morphTransition: Transition = reduce ? { duration: 0 } : SEARCH_MORPH; const setOpen = useCallback( (next: boolean) => { if (!controlled) setInternalOpen(next); onOpenChange?.(next); }, [controlled, onOpenChange], ); const measureAnchor = useCallback(() => { const rect = anchorRef.current?.getBoundingClientRect(); if (!rect || rect.width === 0) return; setAnchorRect({ top: rect.top, left: rect.left, width: rect.width }); }, []); const openSearch = useCallback(() => { measureAnchor(); setBackgroundScrollLocked(true); previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null; setOpen(true); }, [measureAnchor, setOpen]); const filteredItems = useMemo(() => { const needle = query.trim().toLowerCase(); if (!needle) return items; return items.filter((item) => [item.title, item.description ?? "", ...(item.keywords ?? [])] .join(" ") .toLowerCase() .includes(needle), ); }, [items, query]); const { activeIndex, moveTo, moveActive } = useRowCursor(filteredItems, query); // The cursor is stamped with the query, so changing it drops the highlight // without this having to say so. const updateQuery = useCallback( (next: string) => { setQuery(next); onQueryChange?.(next); }, [onQueryChange], ); const closeSearch = useCallback(() => { updateQuery(""); setOpen(false); }, [setOpen, updateQuery]); useEffect(() => setMounted(true), []); useEffect(() => { if (open) setBackgroundScrollLocked(true); }, [open]); useEffect(() => { measureAnchor(); const anchor = anchorRef.current; const observer = anchor && typeof ResizeObserver !== "undefined" ? new ResizeObserver(measureAnchor) : null; if (anchor) observer?.observe(anchor); window.addEventListener("resize", measureAnchor); document.addEventListener("scroll", measureAnchor, true); window.visualViewport?.addEventListener("resize", measureAnchor); window.visualViewport?.addEventListener("scroll", measureAnchor); return () => { observer?.disconnect(); window.removeEventListener("resize", measureAnchor); document.removeEventListener("scroll", measureAnchor, true); window.visualViewport?.removeEventListener("resize", measureAnchor); window.visualViewport?.removeEventListener("scroll", measureAnchor); }; }, [measureAnchor]); useEffect(() => { if (!backgroundScrollLocked) return; const preventBackgroundWheel = (event: WheelEvent) => { const target = event.target; if (target instanceof Node && listRef.current?.contains(target)) return; event.preventDefault(); }; const preventBackgroundTouch = (event: TouchEvent) => { const target = event.target; if (target instanceof Node && listRef.current?.contains(target)) return; event.preventDefault(); }; document.addEventListener("wheel", preventBackgroundWheel, { passive: false, }); document.addEventListener("touchmove", preventBackgroundTouch, { passive: false, }); return () => { document.removeEventListener("wheel", preventBackgroundWheel); document.removeEventListener("touchmove", preventBackgroundTouch); }; }, [backgroundScrollLocked]); useEffect(() => { const handleShortcut = (event: KeyboardEvent) => { if (event.key === "Escape" && open) { event.preventDefault(); closeSearch(); return; } if ( !open && shortcut && event.key.toLowerCase() === shortcut.toLowerCase() && !event.repeat && !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey && !isEditableTarget(event.target) ) { event.preventDefault(); openSearch(); } }; window.addEventListener("keydown", handleShortcut); return () => window.removeEventListener("keydown", handleShortcut); }, [closeSearch, open, openSearch, shortcut]); // Only this component's own state. Telling the consumer the query changed is // a side effect, so it waits for the effect below. useOnOpen(open, () => { setQuery(""); moveTo(null); }); // Keyed to `open` alone. `onQueryChange` is read through a ref because an // inline one changes identity on every keystroke, and this effect clearing // the field on every keystroke is exactly what that costs. Written after // commit for the reason `lib/hooks/use-row-cursor.ts` gives at length. const notifyQuery = useRef(onQueryChange); useLayoutEffect(() => { notifyQuery.current = onQueryChange; }); useEffect(() => { if (open) { notifyQuery.current?.(""); const frame = requestAnimationFrame(() => inputRef.current?.focus()); return () => cancelAnimationFrame(frame); } if (wasOpenRef.current) { const frame = requestAnimationFrame(() => { const previousFocus = previousFocusRef.current; const focusTarget = previousFocus?.isConnected ? previousFocus : triggerRef.current; focusTarget?.focus(); }); return () => cancelAnimationFrame(frame); } }, [open]); useEffect(() => { wasOpenRef.current = open; }, [open]); useEffect(() => { if (!open) return; listRef.current ?.querySelector(`[data-index="${activeIndex}"]`) ?.scrollIntoView({ block: "nearest" }); }, [activeIndex, open]); const selectItem = useCallback( (item: MorphingSearchItem) => { item.onSelect?.(); onSelect?.(item); closeSearch(); }, [closeSearch, onSelect], ); const handleDialogKeyDown = (event: ReactKeyboardEvent) => { if (event.key === "ArrowDown") { event.preventDefault(); moveActive(1); return; } if (event.key === "ArrowUp") { event.preventDefault(); moveActive(-1); return; } if (event.key === "Enter") { event.preventDefault(); const item = filteredItems[activeIndex]; if (item) selectItem(item); return; } if (event.key !== "Tab" || !dialogRef.current) return; const focusable = Array.from( dialogRef.current.querySelectorAll( 'input, button:not([disabled]), [tabindex]:not([tabindex="-1"])', ), ); const first = focusable[0]; const last = focusable.at(-1); if (!first || !last) return; if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); } }; const shellLayoutId = `${uid}-shell`; const listboxId = `${uid}-results`; const panelWidth = mounted ? Math.max( anchorRect.width, Math.min(448, window.innerWidth - anchorRect.left - 16), ) : anchorRect.width; const resultsHeight = mounted ? Math.max(96, Math.min(288, window.innerHeight - anchorRect.top - 80)) : 288; const collapsedContentClip = `inset(0px ${Math.max( 0, panelWidth - anchorRect.width, )}px ${resultsHeight}px 0px round 12px)`; const expandedContentClip = "inset(0px 0px 0px 0px round 12px)"; // Neither grouping layer carries a box: they only hold `inert`/`aria-hidden`, // the z-index and the presence key, and every child below is `fixed` and // resolves against the viewport itself. The click catcher spans the viewport // edges but has no children and filters nothing, so it is not a sampling // layer either. const overlay = mounted ? createPortal(

setBackgroundScrollLocked(false)} > {open ? ( ); }) ) : (

{emptyMessage}

)} ) : null}

, document.body, ) : null; return (

{!open ? ( ) : null}

{overlay} ); } 52:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 53:Teab,"use client"; import { useCallback, useLayoutEffect, useRef, useState } from "react"; /** * Where the keyboard or the pointer last moved to: the row's id, stamped with * the query it was placed under. */ type RowCursor = { id: string; query: string }; /** The cursor's row, or -1 once the query has moved on or the row has left. */ function indexOfCursor( rows: readonly { id: string }[], query: string, cursor: RowCursor | null, ) { if (cursor === null || cursor.query !== query) return -1; return rows.findIndex((row) => row.id === cursor.id); } /** * The highlighted row of a list whose rows can change under it. * * Which row is highlighted is resolved during render, never in a passive * effect: a passive effect runs after the commit, so a list that had just * changed would carry an `aria-activedescendant` naming a row that has left it, * and a key pressed in that window would commit the wrong row or nothing at * all. * * The cursor holds the row's id, not its position. A position alone cannot tell * a list that shrank from one that swapped its rows for a different set of the * same length, and the second case is the one that silently hands Enter to a * row the user never chose. A cursor whose row has left the list returns the * highlight to the first row rather than to the nearest surviving one: the row * the user aimed at is gone, and the first row is where a new query already * puts the highlight. * * Pass the query the list is filtered by. The cursor is stamped with it and * dropped when it changes, so a caller cannot forget to clear it — including a * caller whose query arrives as a prop and so never runs its own handler. Rows * that come back under a query that has moved on cannot revive it either. * `moveTo(null)` is for deliberate resets, such as reopening the list. * * Both callbacks keep one identity for the life of the component, and read the * rows and the query through a ref to do it. A caller will put them in an * effect's dependencies — the exhaustive-deps rule makes it — and a `moveTo` * rebuilt on every keystroke would re-run that effect on every keystroke. */ export function useRowCursor(rows: readonly { id: string }[], query: string) { const [cursor, setCursor] = useState(null); // Written after commit, not during render: a render React discards or has not // finished still runs the component body, and an event handler that read this // in that window would stamp the cursor with a query the committed tree does // not have. const latest = useRef({ rows, query }); useLayoutEffect(() => { latest.current = { rows, query }; }); const cursorRow = indexOfCursor(rows, query, cursor); // Cleared rather than ignored: React re-runs this render with the cursor // already gone, so rows that come back cannot revive a highlight the user has // stopped aiming at. if (cursor !== null && cursorRow < 0) setCursor(null); const moveTo = useCallback( (id: string | null) => setCursor(id === null ? null : { id, query: latest.current.query }), [], ); const moveActive = useCallback((direction: 1 | -1) => { const { rows: live, query: liveQuery } = latest.current; const last = live.length - 1; if (last < 0) return; // Steps from the row the cursor is really on, inside the update, so that // two keys landing in one batch move two rows rather than one. setCursor((current) => { const at = Math.max(indexOfCursor(live, liveQuery, current), 0); const next = Math.min(Math.max(at + direction, 0), last); return { id: live[next].id, query: liveQuery }; }); }, []); return { activeIndex: cursorRow < 0 ? 0 : cursorRow, moveTo, moveActive }; } 4e:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@beui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/morphing-search.tsx","content":"$51","type":"registry:component","target":"@components/motion/morphing-search.tsx"},{"path":"lib/ease.ts","content":"$52","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/hooks/use-on-open.ts","content":"\"use client\";\n\nimport { useState } from \"react\";\n\n/**\n * Runs `start` during the render in which `open` becomes true.\n *\n * Opening a list starts a fresh session — an empty query, the highlight back at\n * the top — and that is a resolution, not a side effect: a passive effect runs\n * after the commit, so the new session would carry the last one's state for a\n * window in which a key press can land.\n *\n * `start` may only set state belonging to the calling component. Anything that\n * reaches outside it — a consumer's callback, a DOM write, moving focus — is a\n * side effect, and React rejects a callback that sets another component's state\n * during this one's render. Put those in an effect keyed to `open`.\n */\nexport function useOnOpen(open: boolean, start: () => void) {\n const [wasOpen, setWasOpen] = useState(open);\n if (open !== wasOpen) {\n setWasOpen(open);\n if (open) start();\n }\n}\n","type":"registry:hook","target":"@lib/hooks/use-on-open.ts"},{"path":"lib/hooks/use-row-cursor.ts","content":"$53","type":"registry:hook","target":"@lib/hooks/use-row-cursor.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]