{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shortcuts-sheet", "type": "registry:ui", "title": "Shortcuts Sheet", "description": "Press ? for every shortcut; press any shortcut and its row lights up.", "categories": [ "command" ], "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json", "https://www.stealth.pm/r/command-palette.json", "https://www.stealth.pm/r/kbd.json" ], "files": [ { "path": "components/ui/shortcuts-sheet.tsx", "content": "\"use client\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport { Toggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup } from \"@base-ui/react/toggle-group\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Search, X } from \"@/lib/icons\";\nimport { spring } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\nimport {\n Kbd,\n formatShortcut,\n isTypingTarget,\n matchShortcut,\n parseShortcut,\n resolveStep,\n useHeldKeys,\n usePlatform,\n type Platform,\n} from \"@/components/ui/kbd\";\nimport { CommandHighlight, scoreCommand, usePaletteHotkey } from \"@/components/ui/command-palette\";\n\nexport type Shortcut = {\n /** \"mod+k\", \"g i\" (a sequence), \"shift+?\"… mod is ⌘ on a Mac and Ctrl elsewhere. */\n keys: string;\n label: string;\n /** More words that should find it. */\n keywords?: string[];\n};\n\nexport type ShortcutGroup = { heading: string; shortcuts: Shortcut[] };\n\nexport type ShortcutsSheetProps = {\n groups: ShortcutGroup[];\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Opens and closes the sheet. Ignored while typing in a field. */\n hotkey?: string | false;\n hotkeyTarget?: React.RefObject;\n /** Write the keys for this platform. Defaults to the reader's, and they can switch. */\n platform?: Platform;\n /** Show the macOS / Windows switch in the header. */\n platformToggle?: boolean;\n title?: string;\n container?: Dialog.Portal.Props[\"container\"];\n className?: string;\n children?: React.ReactNode;\n};\n\nexport function ShortcutsSheet({\n groups,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n hotkey = \"?\",\n hotkeyTarget,\n platform: platformProp,\n platformToggle = true,\n title = \"Keyboard shortcuts\",\n container,\n className,\n children,\n}: ShortcutsSheetProps) {\n const reduce = !!useReducedMotion();\n const detected = usePlatform(platformProp);\n const [chosen, setChosen] = useState(null);\n const platform = chosen ?? detected;\n const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });\n const [instant, setInstant] = useState(false);\n const [query, setQuery] = useState(\"\");\n const inputRef = useRef(null);\n const popupRef = useRef(null);\n const scrollRef = useRef(null);\n const titleId = useId();\n const contained = container != null;\n\n // While the sheet is open, pressing a listed shortcut lights its row and presses its keys.\n const held = useHeldKeys(open, { ignoreWhileTyping: true });\n\n usePaletteHotkey({\n hotkey,\n target: hotkeyTarget,\n open,\n onToggle: () => {\n setInstant(true);\n setOpen(!open);\n },\n });\n\n const filtered = useMemo(() => {\n const q = query.trim();\n return groups\n .map((g) => ({\n heading: g.heading,\n shortcuts: g.shortcuts\n .map((s) => {\n // Keys are searchable by name in both spellings: \"cmd\", \"command\", \"ctrl\", \"shift\"…\n const spoken = `${formatShortcut(s.keys, \"mac\", { spoken: true })} ${formatShortcut(s.keys, \"other\", { spoken: true })} cmd ${formatShortcut(s.keys, platform)}`;\n const m = scoreCommand({ id: s.keys, label: s.label, keywords: [g.heading, ...(s.keywords ?? []), ...spoken.split(/[\\s+,]+/)] }, q);\n return m ? { ...s, ranges: m.ranges } : null;\n })\n .filter((s): s is Shortcut & { ranges: [number, number][] } => s !== null),\n }))\n .filter((g) => g.shortcuts.length);\n }, [groups, query, platform]);\n const count = filtered.reduce((n, g) => n + g.shortcuts.length, 0);\n\n // A row lights when exactly its keys are held: ⌘↵ lights Send comment, not Open issue (↵) as well.\n const isActive = (keys: string) =>\n held.size > 0 &&\n parseShortcut(keys).some((step) => {\n const want = resolveStep(step, platform);\n return want.length === held.size && want.every((k) => held.has(k));\n });\n const activeKey = filtered.flatMap((g) => g.shortcuts).find((s) => isActive(s.keys))?.keys;\n\n useEffect(() => {\n if (!activeKey) return;\n scrollRef.current?.querySelector(`[data-keys=\"${CSS.escape(activeKey)}\"]`)?.scrollIntoView({ block: \"nearest\", behavior: reduce ? \"auto\" : \"smooth\" });\n }, [activeKey, reduce]);\n\n // Listed shortcuts are shown, not run, while the sheet is up: they stop here instead of reaching the app.\n const listed = useMemo(() => groups.flatMap((g) => g.shortcuts.map((s) => s.keys)), [groups]);\n const onPopupKeyDown = (e: React.KeyboardEvent) => {\n const native = e.nativeEvent;\n if (native.key === \"Escape\" || native.key === \"Tab\") return;\n // \"/\" jumps to the search field, as it does in most apps.\n if (native.key === \"/\" && !isTypingTarget(native.target) && !native.metaKey && !native.ctrlKey) {\n native.preventDefault();\n e.stopPropagation();\n inputRef.current?.focus();\n return;\n }\n // The key that opened the sheet closes it again.\n if (hotkey && matchShortcut(native, hotkey, platform)) return;\n if (isTypingTarget(native.target) && !native.metaKey && !native.ctrlKey && !native.altKey) return;\n const hit = listed.some((keys) => parseShortcut(keys).some((step) => resolveStep(step, platform).includes(eventName(native))));\n if (hit && (native.metaKey || native.ctrlKey || native.altKey || !isTypingTarget(native.target))) {\n if (native.metaKey || native.ctrlKey || native.altKey) native.preventDefault();\n e.stopPropagation();\n }\n };\n\n return (\n {\n const ev = details.event as Event | undefined;\n setInstant(ev instanceof KeyboardEvent || (ev instanceof MouseEvent && ev.detail === 0));\n setOpen(next);\n }}\n onOpenChangeComplete={(isOpen) => !isOpen && setQuery(\"\")}\n >\n {children}\n \n \n \n \n
\n \n {title}\n \n {platformToggle && }\n \n \n \n \n
\n\n
\n {count === 0 ? (\n
\n

\n No shortcuts match “{query.trim()}”\n

\n {\n setQuery(\"\");\n inputRef.current?.focus();\n }}\n className={cn(\n \"inline-flex h-7 items-center rounded-md border border-line-2 bg-raised px-2.5 text-[12px] font-medium text-fg shadow-[var(--shadow)]\",\n \"transition-[background-color,border-color,scale] duration-150 hover:border-fg-4 hover:bg-hover active:scale-[0.97]\",\n \"outline-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\",\n )}\n >\n Clear search\n \n
\n ) : (\n
\n {filtered.map((g) => (\n
\n

{g.heading}

\n
    \n {g.shortcuts.map((s) => {\n const active = activeKey === s.keys || isActive(s.keys);\n return (\n \n \n \n \n \n \n );\n })}\n
\n
\n ))}\n
\n )}\n
\n\n
\n Press a shortcut to find it. It won’t run.\n
\n \n {query.trim() ? (count === 0 ? \"No shortcuts match\" : `${count} ${count === 1 ? \"shortcut\" : \"shortcuts\"}`) : \"\"}\n \n \n \n \n \n );\n}\n\nfunction eventName(e: KeyboardEvent) {\n if (/^Key[A-Z]$/.test(e.code)) return e.code.slice(3).toLowerCase();\n if (/^Digit\\d$/.test(e.code)) return e.code.slice(5);\n return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase().replace(/^arrow/, \"\");\n}\n\nfunction PlatformSwitch({ value, onChange, reduce, className }: { value: Platform; onChange: (p: Platform) => void; reduce: boolean; className?: string }) {\n const id = useId();\n return (\n v[0] && onChange(v[0] as Platform)}\n className={cn(\"flex shrink-0 rounded-lg border border-line bg-frame p-0.5\", className)}\n >\n {(\n [\n [\"mac\", \"Mac\"],\n [\"other\", \"Windows\"],\n ] as const\n ).map(([v, label]) => (\n \n {value === v && (\n \n )}\n {label}\n \n ))}\n \n );\n}\n\nexport type ShortcutsSheetTriggerProps = Omit & { label?: string; shortcut?: string };\n\n/** A quiet button that opens the sheet and shows its key. */\nexport function ShortcutsSheetTrigger({ label = \"Keyboard shortcuts\", shortcut = \"?\", className, ...rest }: ShortcutsSheetTriggerProps) {\n return (\n \n {label}\n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/shortcuts-sheet" }