"use client"; import { useEffect, useMemo, useState } from "react"; import { AnimatePresence, motion, type Variants } from "framer-motion"; import { Command, Search, X } from "lucide-react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export type Shortcut = { /** Human label for the action, e.g. "Go to file". */ action: string; /** Ordered display tokens for each keycap, e.g. ["⌘", "P"]. */ keys: string[]; }; export type ShortcutGroup = { /** Section heading, e.g. "General". */ title: string; items: Shortcut[]; }; /* -------------------------------------------------------------------------- */ /* Motion constants */ /* -------------------------------------------------------------------------- */ const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; const listVariants: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.022, delayChildren: 0.08 } }, }; const rowVariants: Variants = { hidden: { opacity: 0, y: 8 }, visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease: EASE } }, }; // Guarantees glyph coverage for ⌘ ⇧ ⌥ ⌃ and arrows across platforms. const KEY_FONT = "system-ui, -apple-system, 'Segoe UI', sans-serif"; /* -------------------------------------------------------------------------- */ /* Keycap */ /* -------------------------------------------------------------------------- */ function Keycap({ token }: { token: string }) { return ( {token} ); } /* -------------------------------------------------------------------------- */ /* Row */ /* -------------------------------------------------------------------------- */ function ShortcutRow({ item }: { item: Shortcut }) { return ( {item.action}

{item.keys.map((token, i) => ( ))}

); } /* -------------------------------------------------------------------------- */ /* KeyboardShortcutsModal */ /* -------------------------------------------------------------------------- */ /** * A searchable keyboard-shortcut cheat sheet that springs into view over a * frosted backdrop. Positioned `absolute`, so its nearest positioned ancestor * must be `relative` (the demo container handles this). Search is a * controlled/uncontrolled hybrid: pass `query` + `onQueryChange` to control it, * or omit both to let the modal manage its own filter state. Escape and * backdrop clicks both request a close. */ export function KeyboardShortcutsModal({ open, onClose, groups, query, onQueryChange, className, }: { open: boolean; onClose: () => void; groups: ShortcutGroup[]; query?: string; onQueryChange?: (value: string) => void; className?: string; }) { const [innerQuery, setInnerQuery] = useState(""); const q = query ?? innerQuery; const setQ = onQueryChange ?? setInnerQuery; useEffect(() => { if (!open) return; function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose(); } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); const needle = q.trim().toLowerCase(); const total = useMemo( () => groups.reduce((sum, g) => sum + g.items.length, 0), [groups] ); const filtered = useMemo(() => { if (!needle) return groups; return groups .map((g) => ({ title: g.title, items: g.items.filter( (it) => it.action.toLowerCase().includes(needle) || it.keys.join(" ").toLowerCase().includes(needle) ), })) .filter((g) => g.items.length > 0); }, [groups, needle]); const matched = useMemo( () => filtered.reduce((sum, g) => sum + g.items.length, 0), [filtered] ); return ( {open && (

Keyboard Shortcuts