4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T3a40,"use client"; import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const BOUNDARY = /[\s\-_/.:]/; const ROW = 36; const GAP = 2; const PAD = 5; const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; export type CommandItem = { id: string; label: string; hint?: string; keywords?: string; shortcut?: string[]; }; export type UseCommandPaletteOptions = { items: CommandItem[]; onSelect: (item: CommandItem) => void; onDismiss?: () => void; }; function scoreOne(text: string, query: string): number { const t = text.toLowerCase(); let cursor = 0; let total = 0; let streak = 0; for (let i = 0; i < query.length; i++) { const at = t.indexOf(query[i], cursor); if (at < 0) return -1; streak = at === cursor && i > 0 ? streak + 1 : 0; total += 2 + streak * 4; if (at === 0) total += 12; else if (BOUNDARY.test(t[at - 1])) total += 8; cursor = at + 1; } return total; } function rank(items: CommandItem[], query: string): CommandItem[] { const q = query.trim().toLowerCase(); if (!q) return items; const scored: { item: CommandItem; score: number; order: number }[] = []; for (let i = 0; i < items.length; i++) { const item = items[i]; const direct = scoreOne(item.label, q); const aliased = item.keywords ? scoreOne(item.keywords, q) - 3 : -1; const best = Math.max(direct, item.keywords ? aliased : -1); if (best < 0) continue; scored.push({ item, score: best - item.label.length * 0.05, order: i }); } scored.sort((a, b) => b.score - a.score || a.order - b.order); return scored.map((s) => s.item); } export function useCommandPalette({ items, onSelect, onDismiss, }: UseCommandPaletteOptions) { const [query, setQuery] = useState(""); const [pinned, setPinned] = useState(null); const listRef = useRef(null); const pointer = useRef({ x: -1, y: -1 }); const select = useRef(onSelect); select.current = onSelect; const dismiss = useRef(onDismiss); dismiss.current = onDismiss; const results = useMemo(() => rank(items, query), [items, query]); const activeId = results.some((r) => r.id === pinned) ? pinned : (results[0]?.id ?? null); const activeIndex = results.findIndex((r) => r.id === activeId); useEffect(() => { if (listRef.current) listRef.current.scrollTop = 0; }, [query]); const reveal = (index: number) => { const list = listRef.current; const row = list?.children[index]; if (!list || !(row instanceof HTMLElement)) return; const top = row.offsetTop - PAD; const bottom = row.offsetTop + row.offsetHeight + PAD; if (top < list.scrollTop) list.scrollTop = top; else if (bottom > list.scrollTop + list.clientHeight) { list.scrollTop = bottom - list.clientHeight; } }; const jump = (index: number) => { if (results.length === 0) return; const next = Math.max(0, Math.min(results.length - 1, index)); setPinned(results[next].id); reveal(next); }; const move = (delta: number) => { if (results.length === 0) return; const from = activeIndex < 0 ? 0 : activeIndex; jump((from + delta + results.length) % results.length); }; const run = (item?: CommandItem) => { const target = item ?? results.find((r) => r.id === activeId); if (target) select.current(target); }; const pointerActivate = (id: string, event: React.PointerEvent) => { const { x, y } = pointer.current; if (event.clientX === x && event.clientY === y) return; pointer.current = { x: event.clientX, y: event.clientY }; if (id !== activeId) setPinned(id); }; const onKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowDown") { event.preventDefault(); move(1); } else if (event.key === "ArrowUp") { event.preventDefault(); move(-1); } else if (event.key === "Home") { event.preventDefault(); jump(0); } else if (event.key === "End") { event.preventDefault(); jump(results.length - 1); } else if (event.key === "Enter") { event.preventDefault(); run(); } else if (event.key === "Escape") { event.preventDefault(); dismiss.current?.(); } }; return { query, setQuery, results, activeId, activeIndex, listRef, onKeyDown, pointerActivate, jump, move, run, }; } export type CommandPaletteProps = { items: CommandItem[]; onSelect: (item: CommandItem) => void; onDismiss?: () => void; open?: boolean; placeholder?: string; emptyLabel?: string; label?: string; maxRows?: number; autoFocus?: boolean; className?: string; }; export function CommandPalette({ items, onSelect, onDismiss, open, placeholder = "Search commands", emptyLabel = "No command matches", label = "Command palette", maxRows = 6, autoFocus = false, className = "", }: CommandPaletteProps) { const uid = useId(); const reduced = useReducedMotion(); const inputRef = useRef(null); const liveRef = useRef(null); const { query, setQuery, results, activeId, listRef, onKeyDown, pointerActivate, run, } = useCommandPalette({ items, onSelect, onDismiss }); const rows = Math.max(1, Math.min(maxRows, items.length)); const height = PAD * 2 + rows * ROW + (rows - 1) * GAP; const count = results.length; useEffect(() => { if (autoFocus && open === undefined) { inputRef.current?.focus({ preventScroll: true }); } }, [autoFocus, open]); useEffect(() => { if (open) setQuery(""); }, [open, setQuery]); useEffect(() => { const id = setTimeout(() => { if (!liveRef.current) return; liveRef.current.textContent = count === 0 ? emptyLabel : `${count} ${count === 1 ? "command" : "commands"} available`; }, 400); return () => clearTimeout(id); }, [count, emptyLabel]); const spring = reduced ? { duration: 0 } : CELL; const overlaid = open !== undefined; const surface = (

setQuery(e.target.value)} onKeyDown={onKeyDown} className="h-full min-w-0 flex-1 bg-transparent text-[13.5px] text-stone-700 outline-none placeholder:text-stone-400 dark:text-stone-200 dark:placeholder:text-stone-500" /> {count}

{count === 0 ? ( {emptyLabel} ) : null}

); if (!overlaid) return surface; return {surface}; } function PaletteLayer({ open, onDismiss, label, children, }: { open: boolean; onDismiss?: () => void; label: string; children: React.ReactNode; }) { const [host, setHost] = useState(null); const layerRef = useRef(null); const returnFocus = useRef(null); const leave = useRef(onDismiss); leave.current = onDismiss; useEffect(() => setHost(document.body), []); useIsoLayoutEffect(() => { if (!open || !host) return; returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null; layerRef.current ?.querySelector( 'input:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])', ) ?.focus({ preventScroll: true }); return () => { const node = returnFocus.current; requestAnimationFrame(() => node?.focus({ preventScroll: true })); returnFocus.current = null; }; }, [host, open]); useEffect(() => { if (!open) return; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); leave.current?.(); return; } if (event.key !== "Tab") return; const focusable = Array.from( layerRef.current?.querySelectorAll( 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', ) ?? [], ).filter((node) => !node.hasAttribute("aria-hidden")); if (focusable.length === 0) { event.preventDefault(); return; } const first = focusable[0]; const last = focusable[focusable.length - 1]; const active = document.activeElement; if (event.shiftKey && (active === first || !layerRef.current?.contains(active))) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && (active === last || !layerRef.current?.contains(active))) { event.preventDefault(); first.focus(); } }; document.addEventListener("keydown", onKeyDown, true); return () => document.removeEventListener("keydown", onKeyDown, true); }, [open]); useEffect(() => { if (!open) return; const root = document.documentElement; const overflow = root.style.overflow; const padding = root.style.paddingRight; const gutter = window.innerWidth - root.clientWidth; root.style.overflow = "hidden"; if (gutter > 0) root.style.paddingRight = `${gutter}px`; return () => { root.style.overflow = overflow; root.style.paddingRight = padding; }; }, [open]); if (!host) return null; return createPortal( open ? (

Command Palette

Installation

Files

components

Styles