"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { SearchIcon, XIcon } from "@kineticui/icons"; export type Shortcut = { /** e.g. "mod+k", "g d", "shift+?". `mod` = ⌘ on Mac, Ctrl elsewhere. Space separates a sequence. */ keys: string; label: string; group?: string; /** Run when pressed. Omit for display-only entries. */ action?: () => void; }; const isMac = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent); const pretty = (k: string) => ({ mod: isMac() ? "⌘" : "Ctrl", shift: "⇧", alt: isMac() ? "⌥" : "Alt", enter: "↵", esc: "Esc", up: "↑", down: "↓", left: "←", right: "→", backspace: "⌫" })[k.toLowerCase()] ?? k.toUpperCase(); const matches = (combo: string, e: KeyboardEvent) => { const parts = combo.toLowerCase().split("+"); const key = parts.pop()!; const want = { mod: parts.includes("mod"), shift: parts.includes("shift"), alt: parts.includes("alt") }; const mod = isMac() ? e.metaKey : e.ctrlKey; return e.key.toLowerCase() === key && mod === want.mod && e.altKey === want.alt && (key === "?" || e.shiftKey === want.shift); }; /** Registers shortcuts (combos and sequences like "g d"). Ignores typing in inputs unless the combo uses mod. */ export function useHotkeys(shortcuts: Shortcut[], enabled = true) { const seq = React.useRef<{ keys: string[]; t?: ReturnType }>({ keys: [] }); React.useEffect(() => { if (!enabled) return; const onKey = (e: KeyboardEvent) => { const typing = /^(INPUT|TEXTAREA|SELECT)$/.test((e.target as HTMLElement).tagName) || (e.target as HTMLElement).isContentEditable; for (const s of shortcuts) { if (!s.action) continue; const steps = s.keys.split(" "); if (steps.length === 1) { if ((!typing || steps[0]!.includes("mod")) && matches(steps[0]!, e)) { e.preventDefault(); s.action(); return; } } } if (typing || e.metaKey || e.ctrlKey || e.altKey) return; const st = seq.current; st.keys = [...st.keys, e.key.toLowerCase()].slice(-3); clearTimeout(st.t); st.t = setTimeout(() => (st.keys = []), 900); for (const s of shortcuts) { const steps = s.keys.toLowerCase().split(" "); if (s.action && steps.length > 1 && st.keys.slice(-steps.length).join(" ") === steps.join(" ")) { st.keys = []; s.action(); return; } } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [shortcuts, enabled]); } export function Keys({ combo }: { combo: string }) { return ( {combo.split(" ").map((step, i) => ( {i ? then : null} {step.split("+").map((k) => ( {pretty(k)} ))} ))} ); } export type ShortcutOverlayProps = { shortcuts: Shortcut[]; /** Key that opens the overlay. Default "?". */ openKey?: string; open?: boolean; onOpenChange?: (open: boolean) => void; }; /** Press ? to see every keyboard shortcut, grouped and searchable. Also wires up the shortcuts' actions. */ export function ShortcutOverlay({ shortcuts, openKey = "?", open: controlled, onOpenChange }: ShortcutOverlayProps) { const [inner, setInner] = React.useState(false); const open = controlled ?? inner; const setOpen = (o: boolean) => (controlled === undefined ? setInner(o) : onOpenChange?.(o)); const [q, setQ] = React.useState(""); const all = React.useMemo(() => [...shortcuts, { keys: openKey, label: "Show keyboard shortcuts", group: "General", action: () => setOpen(true) }], [shortcuts, openKey]); useHotkeys(all, !open); const groups = all .filter((s) => !q || s.label.toLowerCase().includes(q.toLowerCase())) .reduce>((a, s) => ((a[s.group ?? "General"] ??= []).push(s), a), {}); return (

Keyboard shortcuts setQ(e.target.value)} placeholder="Filter" aria-label="Filter shortcuts" className="w-32 bg-transparent text-sm outline-none" />

{Object.entries(groups).map(([g, list]) => (

{g}

{list.map((s) => (

{s.label}

))}

); }

Shortcut Overlay

Installation

Exports