@nixxie-cms/core 1.0.0 → 1.0.2

package/src/admin-ui/components/CommandPalette.tsx

@@ -1,431 +1,433 @@
-import { useRouter } from 'next/router'
-import {
-  type KeyboardEvent,
-  type ChangeEvent,
-  useEffect,
-  useRef,
-  useState,
-  useMemo,
-} from 'react'
-
-import { css } from '@keystar/ui/style'
-
-import { useNixxie } from '../context'
-import { getHrefFromList } from './Navigation'
-
-type Command = {
-  id: string
-  label: string
-  description?: string
-  href?: string
-  action?: () => void
-  icon: string
-  category: string
-}
-
-function useCommands(): Command[] {
-  const { lists } = useNixxie()
-
-  return useMemo(() => {
-    const cmds: Command[] = [
-      {
-        id: 'nav-dashboard',
-        label: 'Go to Dashboard',
-        category: 'Navigate',
-        icon: '◼',
-        href: '/',
-      },
-    ]
-
-    for (const list of Object.values(lists)) {
-      if (list.hideNavigation) continue
-
-      cmds.push({
-        id: `nav-${list.key}`,
-        label: list.label,
-        description: `Open ${list.label} list`,
-        category: 'Navigate',
-        icon: '≡',
-        href: getHrefFromList(list),
-      })
-
-      if (!list.hideCreate && !list.isSingleton) {
-        cmds.push({
-          id: `create-${list.key}`,
-          label: `New ${list.singular}`,
-          description: `Create a new ${list.singular.toLowerCase()}`,
-          category: 'Create',
-          icon: '+',
-          href: `/${list.path}/create`,
-        })
-      }
-    }
-
-    return cmds
-  }, [lists])
-}
-
-type CommandPaletteProps = {
-  isOpen: boolean
-  onClose: () => void
-}
-
-export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
-  const router = useRouter()
-  const [query, setQuery] = useState('')
-  const [activeIndex, setActiveIndex] = useState(0)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const listRef = useRef<HTMLUListElement>(null)
-  const commands = useCommands()
-
-  const filtered = useMemo(() => {
-    if (!query.trim()) return commands
-    const q = query.toLowerCase()
-    return commands.filter(
-      c =>
-        c.label.toLowerCase().includes(q) ||
-        c.description?.toLowerCase().includes(q) ||
-        c.category.toLowerCase().includes(q)
-    )
-  }, [commands, query])
-
-  // Group by category
-  const grouped = useMemo(() => {
-    const map = new Map<string, Command[]>()
-    for (const cmd of filtered) {
-      if (!map.has(cmd.category)) map.set(cmd.category, [])
-      map.get(cmd.category)!.push(cmd)
-    }
-    return map
-  }, [filtered])
-
-  // Flat list for keyboard navigation
-  const flatList = useMemo(() => filtered, [filtered])
-
-  useEffect(() => {
-    if (isOpen) {
-      setQuery('')
-      setActiveIndex(0)
-      setTimeout(() => inputRef.current?.focus(), 10)
-    }
-  }, [isOpen])
-
-  useEffect(() => {
-    setActiveIndex(0)
-  }, [query])
-
-  // Scroll active item into view
-  useEffect(() => {
-    const el = listRef.current?.querySelector(`[data-active="true"]`) as HTMLElement | null
-    el?.scrollIntoView({ block: 'nearest' })
-  }, [activeIndex])
-
-  function runCommand(cmd: Command) {
-    onClose()
-    if (cmd.href) {
-      router.push(cmd.href)
-    } else if (cmd.action) {
-      cmd.action()
-    }
-  }
-
-  function onKeyDown(e: KeyboardEvent) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setActiveIndex(i => Math.min(i + 1, flatList.length - 1))
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setActiveIndex(i => Math.max(i - 1, 0))
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      const cmd = flatList[activeIndex]
-      if (cmd) runCommand(cmd)
-    } else if (e.key === 'Escape') {
-      onClose()
-    }
-  }
-
-  // Pre-compute flat index for each command ID
-  const cmdFlatIndex = useMemo(() => {
-    const map = new Map<string, number>()
-    filtered.forEach((cmd, i) => map.set(cmd.id, i))
-    return map
-  }, [filtered])
-
-  if (!isOpen) return null
-
-  return (
-    <>
-      {/* Backdrop */}
-      <div
-        onClick={onClose}
-        className={css({
-          position: 'fixed',
-          inset: 0,
-          backgroundColor: 'rgba(0,0,0,0.45)',
-          zIndex: 200,
-          backdropFilter: 'blur(3px)',
-        })}
-      />
-
-      {/* Panel */}
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label="Command palette"
-        className={css({
-          position: 'fixed',
-          top: '14vh',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          width: '90vw',
-          maxWidth: 560,
-          maxHeight: '62vh',
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: '#ffffff',
-          borderRadius: 10,
-          boxShadow: '0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
-          zIndex: 201,
-          overflow: 'hidden',
-        })}
-      >
-        {/* Search input */}
-        <div
-          className={css({
-            display: 'flex',
-            alignItems: 'center',
-            gap: 10,
-            padding: '12px 16px',
-            borderBottom: '1px solid #f0f0f0',
-          })}
-        >
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            style={{ flexShrink: 0, color: '#a3a3a3' }}
-          >
-            <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.4" />
-            <line
-              x1="9.9"
-              y1="9.9"
-              x2="13.2"
-              y2="13.2"
-              stroke="currentColor"
-              strokeWidth="1.4"
-              strokeLinecap="round"
-            />
-          </svg>
-          <input
-            ref={inputRef}
-            value={query}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
-            onKeyDown={onKeyDown}
-            placeholder="Search commands, lists, actions…"
-            className={css({
-              flex: 1,
-              border: 'none',
-              outline: 'none',
-              fontSize: 14.5,
-              color: '#0a0a0a',
-              background: 'transparent',
-              fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
-              '&::placeholder': { color: '#b8b8b8' },
-            })}
-          />
-          <kbd
-            className={css({
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 2,
-              padding: '2px 7px',
-              backgroundColor: '#f5f5f5',
-              border: '1px solid #e8e8e8',
-              borderRadius: 5,
-              fontSize: 11,
-              color: '#a3a3a3',
-              fontFamily: 'inherit',
-              flexShrink: 0,
-            })}
-          >
-            Esc
-          </kbd>
-        </div>
-
-        {/* Results */}
-        <ul
-          ref={listRef}
-          role="listbox"
-          className={css({
-            flex: 1,
-            overflowY: 'auto',
-            padding: '6px 0',
-            margin: 0,
-            listStyle: 'none',
-            '&::-webkit-scrollbar': { width: 4 },
-            '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
-          })}
-        >
-          {grouped.size === 0 ? (
-            <li
-              className={css({
-                padding: '28px 16px',
-                textAlign: 'center',
-                color: '#a3a3a3',
-                fontSize: 13.5,
-              })}
-            >
-              No results for &ldquo;{query}&rdquo;
-            </li>
-          ) : (
-            Array.from(grouped.entries()).map(([category, items]) => (
-              <li key={category} role="none">
-                <p
-                  className={css({
-                    margin: 0,
-                    padding: '8px 16px 3px',
-                    fontSize: 10,
-                    fontWeight: 600,
-                    letterSpacing: '0.10em',
-                    textTransform: 'uppercase',
-                    color: '#b8b8b8',
-                  })}
-                >
-                  {category}
-                </p>
-                <ul role="group" className={css({ listStyle: 'none', margin: 0, padding: 0 })}>
-                  {items.map(cmd => {
-                    const idx = cmdFlatIndex.get(cmd.id) ?? 0
-                    const isActive = idx === activeIndex
-                    return (
-                      <li
-                        key={cmd.id}
-                        role="option"
-                        aria-selected={isActive}
-                        data-active={isActive}
-                        onClick={() => runCommand(cmd)}
-                        onMouseEnter={() => setActiveIndex(idx)}
-                        className={css({
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: 10,
-                          padding: '7px 16px',
-                          cursor: 'pointer',
-                          backgroundColor: isActive ? '#0a0a0a' : 'transparent',
-                          transition: 'background 100ms',
-                          '&:hover': {
-                            backgroundColor: isActive ? '#0a0a0a' : '#f5f5f5',
-                          },
-                        })}
-                      >
-                        {/* Icon badge */}
-                        <span
-                          className={css({
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            width: 28,
-                            height: 28,
-                            borderRadius: 6,
-                            backgroundColor: isActive ? '#2a2a2a' : '#f0f0f0',
-                            fontSize: 12,
-                            fontWeight: 500,
-                            color: isActive ? '#ffffff' : '#636363',
-                            flexShrink: 0,
-                            transition: 'background 100ms, color 100ms',
-                            fontFamily: 'monospace',
-                          })}
-                        >
-                          {cmd.icon}
-                        </span>
-
-                        {/* Text */}
-                        <span className={css({ flex: 1, minWidth: 0 })}>
-                          <span
-                            className={css({
-                              display: 'block',
-                              fontSize: 13.5,
-                              fontWeight: 500,
-                              color: isActive ? '#ffffff' : '#0a0a0a',
-                              whiteSpace: 'nowrap',
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                              transition: 'color 100ms',
-                            })}
-                          >
-                            {cmd.label}
-                          </span>
-                          {cmd.description && (
-                            <span
-                              className={css({
-                                display: 'block',
-                                fontSize: 12,
-                                color: isActive ? 'rgba(255,255,255,0.5)' : '#a3a3a3',
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                transition: 'color 100ms',
-                              })}
-                            >
-                              {cmd.description}
-                            </span>
-                          )}
-                        </span>
-
-                        {/* Enter hint */}
-                        {isActive && (
-                          <kbd
-                            className={css({
-                              fontSize: 11,
-                              color: 'rgba(255,255,255,0.6)',
-                              background: '#2a2a2a',
-                              border: '1px solid #3a3a3a',
-                              borderRadius: 4,
-                              padding: '2px 6px',
-                              fontFamily: 'inherit',
-                              flexShrink: 0,
-                            })}
-                          >
-                            ↵
-                          </kbd>
-                        )}
-                      </li>
-                    )
-                  })}
-                </ul>
-              </li>
-            ))
-          )}
-        </ul>
-
-        {/* Footer shortcuts */}
-        <div
-          className={css({
-            display: 'flex',
-            alignItems: 'center',
-            gap: 14,
-            padding: '8px 16px',
-            borderTop: '1px solid #f0f0f0',
-            fontSize: 11,
-            color: '#b8b8b8',
-          })}
-        >
-          <span>
-            <kbd className={css({ fontFamily: 'inherit' })}>↑↓</kbd> navigate
-          </span>
-          <span>
-            <kbd className={css({ fontFamily: 'inherit' })}>↵</kbd> open
-          </span>
-          <span>
-            <kbd className={css({ fontFamily: 'inherit' })}>Esc</kbd> close
-          </span>
-          <span style={{ marginInlineStart: 'auto' }}>
-            <kbd className={css({ fontFamily: 'inherit' })}>⌘K</kbd> toggle
-          </span>
-        </div>
-      </div>
-    </>
-  )
-}
+import { useRouter } from 'next/router'
+import {
+  type KeyboardEvent,
+  type ChangeEvent,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+} from 'react'
+
+import { css } from '@keystar/ui/style'
+
+import { useNixxie } from '../context'
+import { getHrefFromList } from './Navigation'
+
+type Command = {
+  id: string
+  label: string
+  description?: string
+  href?: string
+  action?: () => void
+  icon: string
+  category: string
+}
+
+function useCommands(): Command[] {
+  const { lists } = useNixxie()
+
+  return useMemo(() => {
+    const cmds: Command[] = [
+      {
+        id: 'nav-dashboard',
+        label: 'Go to Dashboard',
+        category: 'Navigate',
+        icon: '◼',
+        href: '/',
+      },
+    ]
+
+    for (const list of Object.values(lists)) {
+      if (list.hideNavigation) continue
+
+      cmds.push({
+        id: `nav-${list.key}`,
+        label: list.label,
+        description: `Open ${list.label} list`,
+        category: 'Navigate',
+        icon: '≡',
+        href: getHrefFromList(list),
+      })
+
+      if (!list.hideCreate && !list.isSingleton) {
+        cmds.push({
+          id: `create-${list.key}`,
+          label: `New ${list.singular}`,
+          description: `Create a new ${list.singular.toLowerCase()}`,
+          category: 'Create',
+          icon: '+',
+          href: `/${list.path}/create`,
+        })
+      }
+    }
+
+    return cmds
+  }, [lists])
+}
+
+type CommandPaletteProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function CommandPalette({ isOpen, onClose }: CommandPaletteProps) {
+  const router = useRouter()
+  const [query, setQuery] = useState('')
+  const [activeIndex, setActiveIndex] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLUListElement>(null)
+  const commands = useCommands()
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return commands
+    const q = query.toLowerCase()
+    return commands.filter(
+      c =>
+        c.label.toLowerCase().includes(q) ||
+        c.description?.toLowerCase().includes(q) ||
+        c.category.toLowerCase().includes(q)
+    )
+  }, [commands, query])
+
+  // Group by category
+  const grouped = useMemo(() => {
+    const map = new Map<string, Command[]>()
+    for (const cmd of filtered) {
+      if (!map.has(cmd.category)) map.set(cmd.category, [])
+      map.get(cmd.category)!.push(cmd)
+    }
+    return map
+  }, [filtered])
+
+  // Flat list for keyboard navigation — built from the *grouped* (rendered) order so ArrowUp/Down
+  // walk items in the same top-to-bottom order the user sees, not the interleaved insertion order.
+  const flatList = useMemo(() => Array.from(grouped.values()).flat(), [grouped])
+
+  useEffect(() => {
+    if (!isOpen) return
+    setQuery('')
+    setActiveIndex(0)
+    const t = setTimeout(() => inputRef.current?.focus(), 10)
+    return () => clearTimeout(t)
+  }, [isOpen])
+
+  useEffect(() => {
+    setActiveIndex(0)
+  }, [query])
+
+  // Scroll active item into view
+  useEffect(() => {
+    const el = listRef.current?.querySelector(`[data-active="true"]`) as HTMLElement | null
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [activeIndex])
+
+  function runCommand(cmd: Command) {
+    onClose()
+    if (cmd.href) {
+      router.push(cmd.href)
+    } else if (cmd.action) {
+      cmd.action()
+    }
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIndex(i => Math.max(0, Math.min(i + 1, flatList.length - 1)))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex(i => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const cmd = flatList[activeIndex]
+      if (cmd) runCommand(cmd)
+    } else if (e.key === 'Escape') {
+      onClose()
+    }
+  }
+
+  // Pre-compute flat index for each command ID, using the same grouped order as `flatList` so the
+  // rendered highlight (`idx === activeIndex`) tracks keyboard navigation correctly.
+  const cmdFlatIndex = useMemo(() => {
+    const map = new Map<string, number>()
+    flatList.forEach((cmd, i) => map.set(cmd.id, i))
+    return map
+  }, [flatList])
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        className={css({
+          position: 'fixed',
+          inset: 0,
+          backgroundColor: 'rgba(0,0,0,0.45)',
+          zIndex: 200,
+          backdropFilter: 'blur(3px)',
+        })}
+      />
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className={css({
+          position: 'fixed',
+          top: '14vh',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          width: '90vw',
+          maxWidth: 560,
+          maxHeight: '62vh',
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: '#ffffff',
+          borderRadius: 10,
+          boxShadow: '0 24px 64px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07)',
+          zIndex: 201,
+          overflow: 'hidden',
+        })}
+      >
+        {/* Search input */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            padding: '12px 16px',
+            borderBottom: '1px solid #f0f0f0',
+          })}
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            style={{ flexShrink: 0, color: '#a3a3a3' }}
+          >
+            <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.4" />
+            <line
+              x1="9.9"
+              y1="9.9"
+              x2="13.2"
+              y2="13.2"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            />
+          </svg>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
+            onKeyDown={onKeyDown}
+            placeholder="Search commands, lists, actions…"
+            className={css({
+              flex: 1,
+              border: 'none',
+              outline: 'none',
+              fontSize: 14.5,
+              color: '#0a0a0a',
+              background: 'transparent',
+              fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+              '&::placeholder': { color: '#b8b8b8' },
+            })}
+          />
+          <kbd
+            className={css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 2,
+              padding: '2px 7px',
+              backgroundColor: '#f5f5f5',
+              border: '1px solid #e8e8e8',
+              borderRadius: 5,
+              fontSize: 11,
+              color: '#a3a3a3',
+              fontFamily: 'inherit',
+              flexShrink: 0,
+            })}
+          >
+            Esc
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <ul
+          ref={listRef}
+          role="listbox"
+          className={css({
+            flex: 1,
+            overflowY: 'auto',
+            padding: '6px 0',
+            margin: 0,
+            listStyle: 'none',
+            '&::-webkit-scrollbar': { width: 4 },
+            '&::-webkit-scrollbar-thumb': { background: '#e8e8e8', borderRadius: 4 },
+          })}
+        >
+          {grouped.size === 0 ? (
+            <li
+              className={css({
+                padding: '28px 16px',
+                textAlign: 'center',
+                color: '#a3a3a3',
+                fontSize: 13.5,
+              })}
+            >
+              No results for &ldquo;{query}&rdquo;
+            </li>
+          ) : (
+            Array.from(grouped.entries()).map(([category, items]) => (
+              <li key={category} role="none">
+                <p
+                  className={css({
+                    margin: 0,
+                    padding: '8px 16px 3px',
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: '0.10em',
+                    textTransform: 'uppercase',
+                    color: '#b8b8b8',
+                  })}
+                >
+                  {category}
+                </p>
+                <ul role="group" className={css({ listStyle: 'none', margin: 0, padding: 0 })}>
+                  {items.map(cmd => {
+                    const idx = cmdFlatIndex.get(cmd.id) ?? 0
+                    const isActive = idx === activeIndex
+                    return (
+                      <li
+                        key={cmd.id}
+                        role="option"
+                        aria-selected={isActive}
+                        data-active={isActive}
+                        onClick={() => runCommand(cmd)}
+                        onMouseEnter={() => setActiveIndex(idx)}
+                        className={css({
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 10,
+                          padding: '7px 16px',
+                          cursor: 'pointer',
+                          backgroundColor: isActive ? '#0a0a0a' : 'transparent',
+                          transition: 'background 100ms',
+                          '&:hover': {
+                            backgroundColor: isActive ? '#0a0a0a' : '#f5f5f5',
+                          },
+                        })}
+                      >
+                        {/* Icon badge */}
+                        <span
+                          className={css({
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 28,
+                            height: 28,
+                            borderRadius: 6,
+                            backgroundColor: isActive ? '#2a2a2a' : '#f0f0f0',
+                            fontSize: 12,
+                            fontWeight: 500,
+                            color: isActive ? '#ffffff' : '#636363',
+                            flexShrink: 0,
+                            transition: 'background 100ms, color 100ms',
+                            fontFamily: 'monospace',
+                          })}
+                        >
+                          {cmd.icon}
+                        </span>
+
+                        {/* Text */}
+                        <span className={css({ flex: 1, minWidth: 0 })}>
+                          <span
+                            className={css({
+                              display: 'block',
+                              fontSize: 13.5,
+                              fontWeight: 500,
+                              color: isActive ? '#ffffff' : '#0a0a0a',
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              transition: 'color 100ms',
+                            })}
+                          >
+                            {cmd.label}
+                          </span>
+                          {cmd.description && (
+                            <span
+                              className={css({
+                                display: 'block',
+                                fontSize: 12,
+                                color: isActive ? 'rgba(255,255,255,0.5)' : '#a3a3a3',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                transition: 'color 100ms',
+                              })}
+                            >
+                              {cmd.description}
+                            </span>
+                          )}
+                        </span>
+
+                        {/* Enter hint */}
+                        {isActive && (
+                          <kbd
+                            className={css({
+                              fontSize: 11,
+                              color: 'rgba(255,255,255,0.6)',
+                              background: '#2a2a2a',
+                              border: '1px solid #3a3a3a',
+                              borderRadius: 4,
+                              padding: '2px 6px',
+                              fontFamily: 'inherit',
+                              flexShrink: 0,
+                            })}
+                          >
+                            ↵
+                          </kbd>
+                        )}
+                      </li>
+                    )
+                  })}
+                </ul>
+              </li>
+            ))
+          )}
+        </ul>
+
+        {/* Footer shortcuts */}
+        <div
+          className={css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 14,
+            padding: '8px 16px',
+            borderTop: '1px solid #f0f0f0',
+            fontSize: 11,
+            color: '#b8b8b8',
+          })}
+        >
+          <span>
+            <kbd className={css({ fontFamily: 'inherit' })}>↑↓</kbd> navigate
+          </span>
+          <span>
+            <kbd className={css({ fontFamily: 'inherit' })}>↵</kbd> open
+          </span>
+          <span>
+            <kbd className={css({ fontFamily: 'inherit' })}>Esc</kbd> close
+          </span>
+          <span style={{ marginInlineStart: 'auto' }}>
+            <kbd className={css({ fontFamily: 'inherit' })}>⌘K</kbd> toggle
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}