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:T3336,import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Suggestion = { value: string; description?: string; onSelect?: () => void | Promise; }; export type CommandPromptProps = Omit< React.ComponentProps<"input">, "onChange" | "value" | "defaultValue" > & { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; onCommand?: (value: string) => void; suggestions?: Suggestion[]; getSuggestions?: (value: string) => Suggestion[]; initialHistory?: string[]; prefix?: string; frameless?: boolean; showPrefix?: boolean; focusRing?: boolean; background?: "background" | "card"; showActions?: boolean; }; /** * A keyboard-first command prompt with history navigation and autocomplete. * - ArrowUp/ArrowDown to cycle history * - Tab to accept highlighted suggestion * - Enter to submit */ const CommandPrompt = React.forwardRef(function CommandPrompt( { className, value, defaultValue, onValueChange, onCommand, suggestions, getSuggestions, initialHistory, prefix = ">", disabled, placeholder, showPrefix = true, focusRing = true, background = "background", showActions = true, ...inputProps }: CommandPromptProps, ref ) { const isControlled = value !== undefined; const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? ""); const inputValue = isControlled ? value! : uncontrolledValue; const setInputValue = React.useCallback( (next: string) => { if (disabled) return; if (!isControlled) setUncontrolledValue(next); onValueChange?.(next); }, [disabled, isControlled, onValueChange] ); const [history, setHistory] = React.useState(() => initialHistory ?? []); const [historyIndex, setHistoryIndex] = React.useState(-1); const [open, setOpen] = React.useState(false); const [activeIndex, setActiveIndex] = React.useState(0); const listRef = React.useRef(null); const inputRef = React.useRef(null); const itemRefs = React.useRef<(HTMLLIElement | null)[]>([]); // Expose input ref to parent React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []); const computedSuggestions: Suggestion[] = React.useMemo(() => { const base = getSuggestions ? getSuggestions(inputValue) : suggestions ?? []; if (!inputValue) return base.slice(0, 8); const lower = inputValue.toLowerCase(); return base.filter((s) => s.value.toLowerCase().includes(lower)).slice(0, 8); }, [getSuggestions, suggestions, inputValue]); React.useEffect(() => { setOpen(computedSuggestions.length > 0); setActiveIndex(0); }, [computedSuggestions]); function handleKeyDown(e: React.KeyboardEvent) { if (disabled) return; const hasSuggestions = open && computedSuggestions.length > 0; if (e.key === "ArrowUp") { e.preventDefault(); if (hasSuggestions) { setActiveIndex( (idx) => (idx - 1 + computedSuggestions.length) % computedSuggestions.length ); } else if (history.length > 0) { const nextIndex = historyIndex < 0 ? history.length - 1 : Math.max(0, historyIndex - 1); setHistoryIndex(nextIndex); setInputValue(history[nextIndex] ?? ""); } return; } if (e.key === "ArrowDown") { e.preventDefault(); if (hasSuggestions) { setActiveIndex((idx) => (idx + 1) % computedSuggestions.length); } else if (history.length > 0) { const nextIndex = historyIndex < 0 ? 0 : Math.min(history.length - 1, historyIndex + 1); setHistoryIndex(nextIndex); setInputValue(history[nextIndex] ?? ""); } return; } if (e.key === "Tab") { if (open && computedSuggestions[activeIndex]) { e.preventDefault(); setInputValue(computedSuggestions[activeIndex].value); } return; } if (e.key === "Enter") { e.preventDefault(); const chosen = open && computedSuggestions[activeIndex] ? computedSuggestions[activeIndex].value : inputValue; const trimmed = chosen.trim(); if (open && computedSuggestions[activeIndex]) { computedSuggestions[activeIndex].onSelect?.(); } onCommand?.(trimmed); if (trimmed) { setHistory((prev) => (prev[prev.length - 1] === trimmed ? prev : [...prev, trimmed])); } setHistoryIndex(-1); return; } if (e.key === "Escape") { setOpen(false); setActiveIndex(0); return; } } function handleChange(e: React.ChangeEvent) { setInputValue(e.target.value); setHistoryIndex(-1); } function handleMouseMove(idx: number) { setActiveIndex(idx); } function handleClickSuggestion(s: Suggestion) { setInputValue(s.value); inputRef.current?.focus(); s.onSelect?.(); onCommand?.(s.value); } const listboxId = React.useId(); const activeId = `${listboxId}-option-${activeIndex}`; // Keep active option in view React.useEffect(() => { const el = listRef.current?.children?.[activeIndex] as HTMLElement | undefined; if (el) el.scrollIntoView({ block: "nearest" }); }, [activeIndex]); // Background highlight position/size const [highlight, setHighlight] = React.useState<{ top: number; height: number }>({ top: 0, height: 0, }); React.useEffect(() => { const el = itemRefs.current[activeIndex]; if (!el) return; setHighlight({ top: el.offsetTop, height: el.offsetHeight }); }, [activeIndex, computedSuggestions.length, open]); return (

{showPrefix ? {prefix} : null}

{open && computedSuggestions.length > 0 ? ( ) : null} {showActions ? (

{history.length > 0 ? ( ↑↓ history ) : null} Esc to close

↵ to accept {open && computedSuggestions.length > 0 ? ( Tab to complete ) : null}

) : null}

); }); export { CommandPrompt }; // Full-screen overlay with Cmd/Ctrl+K toggle export type CommandPromptOverlayProps = Omit & { open?: boolean; onOpenChange?: (open: boolean) => void; }; function useGlobalShortcut(handler: (e: KeyboardEvent) => void) { React.useEffect(() => { function onKey(e: KeyboardEvent) { handler(e); } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [handler]); } const CommandPromptOverlay = React.forwardRef( function CommandPromptOverlay({ open: controlledOpen, onOpenChange, ...props }, ref) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false); const isControlled = controlledOpen !== undefined; const open = isControlled ? controlledOpen! : uncontrolledOpen; const setOpen = React.useCallback( (next: boolean) => { if (!isControlled) setUncontrolledOpen(next); onOpenChange?.(next); }, [isControlled, onOpenChange] ); const inputRef = React.useRef(null); React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []); // Cmd/Ctrl+K to open useGlobalShortcut( React.useCallback( (e: KeyboardEvent) => { const isK = e.key.toLowerCase() === "k"; if ((e.metaKey || e.ctrlKey) && isK) { e.preventDefault(); setOpen(!open); } else if (e.key === "Escape" && open) { setOpen(false); } }, [open, setOpen] ) ); // Focus input when opened React.useEffect(() => { if (open) { const id = requestAnimationFrame(() => inputRef.current?.focus()); return () => cancelAnimationFrame(id); } }, [open]); if (!open) return null; function handleBackdropClick(e: React.MouseEvent) { if (e.target === e.currentTarget) setOpen(false); } return (

); } ); export { CommandPromptOverlay }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/new-york/blocks/command-prompt/command-prompt.tsx","content":"$51","type":"registry:component","target":"components/ui/command-prompt.tsx"}],"className":"h-[70svh] min-h-80"}]]}]