@dfosco/storyboard-react 4.2.0-beta.1 → 4.2.0-beta.17

package/src/CommandPalette/CommandPalette.jsx

@@ -1,8 +1,6 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
-import 'react-cmdk/dist/cmdk.css'
-import * as ReactCmdk from 'react-cmdk'
-const CommandPalette = ReactCmdk.default || ReactCmdk
-const { filterItems, getItemIndex } = ReactCmdk
+import { Command } from 'cmdk'
+import Icon from '../Icon.jsx'
 import {
   buildPrototypeIndex,
   listStories,
@@ -26,6 +24,32 @@ import BranchBar from '../BranchBar/BranchBar.jsx'
 import AuthModal from '../AuthModal/AuthModal.jsx'
 import './command-palette.css'
 
+// Icon size for all palette items
+const ICON_SIZE = 16
+
+function getIconMap() {
+  const config = getCommandPaletteConfig()
+  return config?.icons || {}
+}
+
+function ItemIcon({ type, toolIcon }) {
+  const icons = getIconMap()
+  const iconName = toolIcon || icons[type] || icons.fallback || 'feather/hexagon'
+  return <Icon name={iconName} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />
+}
+
+function AvatarIcon({ username }) {
+  return (
+    <img
+      src={`https://github.com/${username}.png?size=32`}
+      alt={username}
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+      style={{ flexShrink: 0, borderRadius: '50%' }}
+    />
+  )
+}
+
 /**
  * Check if a tool should be hidden from the command palette on the current route.
  * Uses the same pattern-matching logic as excludeRoutes.
@@ -58,7 +82,8 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
   const sections = config?.sections || []
   const groups = []
   const toolMenus = []
-  const usedToolIds = new Set() // Track tools already listed by source:"tools" sections
+  const usedToolIds = new Set()
+  const hiddenFromSearchIds = new Set()
   const basePath = prefix || '/'
 
   for (const section of sections) {
@@ -80,6 +105,7 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
       if (result?.group) groups.push(result.group)
       if (result?.subPages) toolMenus.push(...result.subPages)
       if (result?.usedToolIds) result.usedToolIds.forEach(id => usedToolIds.add(id))
+      if (result?.hiddenFromSearchIds) result.hiddenFromSearchIds.forEach(id => hiddenFromSearchIds.add(id))
       continue
     }
 
@@ -204,6 +230,11 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
         continue
       }
 
+      if (tool.inlineAction === 'open-palette') {
+        // Skip — no point opening the palette from within itself
+        continue
+      }
+
       // Any remaining tools (all surfaces)
       if (tool.render === 'link' && tool.url) {
         remainingItems.push({
@@ -275,7 +306,7 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
     })
   }
 
-  return { groups, toolMenus }
+  return { groups, toolMenus, hiddenFromSearchIds }
 }
 
 function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction) {
@@ -288,11 +319,11 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
     if (!isLocalDev) return null
     const createItems = [
-      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], showType: false, onClick: () => onCreateAction?.('Canvas') },
-      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], showType: false, onClick: () => onCreateAction?.('Prototype') },
-      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], showType: false, onClick: () => onCreateAction?.('Component') },
-      { id: 'create:flow', children: 'Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], showType: false, onClick: () => onCreateAction?.('Flow') },
-      { id: 'create:page', children: 'Prototype Page', keywords: ['create', 'page', 'new'], showType: false, onClick: () => onCreateAction?.('Page') },
+      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], itemType: 'create', onClick: () => onCreateAction?.('Canvas') },
+      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], itemType: 'create', onClick: () => onCreateAction?.('Prototype') },
+      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], itemType: 'create', onClick: () => onCreateAction?.('Component') },
+      { id: 'create:flow', children: 'Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], itemType: 'create', onClick: () => onCreateAction?.('Flow') },
+      { id: 'create:page', children: 'Prototype Page', keywords: ['create', 'page', 'new'], itemType: 'create', onClick: () => onCreateAction?.('Page') },
     ]
     return { group: { heading: section.title, id: `cfg:${section.id}`, items: createItems } }
   }
@@ -303,11 +334,12 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     if (!isLocalDev) return null
     const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
     if (!isCanvasRoute) return null
-    const items = Object.entries(widgetTypes).map(([type, def]) => ({
+    const hiddenTypes = new Set(['link-preview', 'image', 'figma-embed', 'codepen-embed', 'story', 'terminal-read'])
+    const items = Object.entries(widgetTypes).filter(([type]) => !hiddenTypes.has(type)).map(([type, def]) => ({
       id: `create-widget:${type}`,
       children: def.label,
       keywords: ['add', 'widget', 'create', type, def.label.toLowerCase()],
-      showType: false,
+      itemType: 'create',
       onClick: () => {
         document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
       },
@@ -346,7 +378,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
         id: `starred:${id}`,
         children: artifact.name,
         keywords: ['starred', 'star', artifact.name.toLowerCase()],
-        showType: false,
+        itemType: artifact._type === 'canvas' ? 'canvas' : 'prototype',
         onClick: () => {
           if (artifact.isExternal) {
             window.open(route, '_blank')
@@ -378,6 +410,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
             id: `cmd:${action.id}/${child.id || child.label}`,
             children: child.label,
             keywords: [action.label, child.label],
+            itemType: 'command',
             onClick: () => { if (child.execute) child.execute() },
           })
         }
@@ -386,6 +419,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
           id: `cmd:${action.id}`,
           children: action.label,
           keywords: [action.label],
+          itemType: 'link',
           onClick: () => {
             const url = action.url.startsWith('/') && !action.url.startsWith('//') ? prefix + action.url : action.url
             window.location.href = url
@@ -396,6 +430,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
           id: `cmd:${action.id}`,
           children: action.label,
           keywords: [action.label],
+          itemType: 'command',
           onClick: () => executeAction(action.id),
         })
       }
@@ -418,6 +453,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
           id: `cfg:${section.id}:${entry.type}:${entry.key}`,
           children: entry.label,
           keywords: [entry.type, entry.key, entry.label],
+          itemType: entry.type,
           onClick: () => {
             trackRecent(entry.type, entry.key, entry.label)
             const route = resolveRecentRoute(entry, prefix)
@@ -477,6 +513,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
         id: `cfg:${section.id}:${item.id}`,
         children: item.name,
         keywords: [item.name, item.id, item.type],
+        itemType: item.type,
         onClick: () => {
           trackRecent(item.type, item.id, item.name)
           window.location.href = item.route
@@ -489,7 +526,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
 /**
  * Build a section from toolbar.config.json tools.
  * If toolIds is provided, only include those tools in that order (with optional custom labels).
- * Otherwise include all command-list tools.
+ * Otherwise include all command-palette tools.
  *
  * toolIds format: ["theme", "flows"] or [{ id: "theme", label: "Change theme" }]
  */
@@ -511,15 +548,15 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
       const state = getToolbarToolState(toolId)
       if (state === 'disabled' || state === 'hidden') continue
       if (isHiddenInPalette(tool, basePath)) continue
-      entries.push({ toolId, tool, label: customLabel || tool.label || toolId })
+      entries.push({ toolId, tool, label: customLabel || tool.label || toolId, toolIcon: tool.icon })
     }
   } else {
     for (const [toolId, tool] of Object.entries(tools)) {
-      if (tool.surface !== 'command-list') continue
+      if (tool.surface !== 'command-palette') continue
       const state = getToolbarToolState(toolId)
       if (state === 'disabled' || state === 'hidden') continue
       if (isHiddenInPalette(tool, basePath)) continue
-      entries.push({ toolId, tool, label: tool.label || toolId })
+      entries.push({ toolId, tool, label: tool.label || toolId, toolIcon: tool.icon })
     }
   }
 
@@ -528,16 +565,35 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
   const items = []
   const subPages = []
 
-  for (const { toolId, tool, label } of entries) {
+  for (const { toolId, tool, label, toolIcon } of entries) {
     // Inline actions
     if (tool.inlineAction === 'toggle-chrome') {
+      const isHidden = document.documentElement.classList.contains('storyboard-chrome-hidden')
       items.push({
         id: `cfg:${section.id}:${toolId}`,
-        children: label,
+        toolIcon,
+        children: <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>{label}</span>
+          <span>{isHidden ? '✓' : ''}</span>
+        </span>,
         keywords: [label, toolId, 'hide', 'show', 'toolbar'].filter(Boolean),
         showType: false,
         onClick: () => {
           document.documentElement.classList.toggle('storyboard-chrome-hidden')
+          setRefreshKey(k => k + 1)
+        },
+      })
+      continue
+    }
+
+    if (tool.inlineAction === 'open-palette') {
+      items.push({
+        id: `cfg:${section.id}:${toolId}`,
+        children: label,
+        keywords: [label, toolId, 'command', 'palette', 'search'].filter(Boolean),
+        showType: false,
+        onClick: () => {
+          document.dispatchEvent(new CustomEvent('storyboard:open-palette'))
         },
       })
       continue
@@ -570,6 +626,8 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
             options: children.map(child => ({
               label: child.label,
               execute: child.execute,
+              type: child.type,
+              active: child.active,
             })),
           })
           items.push({
@@ -647,6 +705,15 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
     })
   }
 
+  // Add toolIcon to all items from their entry
+  const iconByToolId = new Map(entries.map(e => [e.toolId, e.toolIcon]))
+  for (const item of items) {
+    if (!item.toolIcon) {
+      const match = item.id?.match(/cfg:[^:]+:(.+)/)
+      if (match && iconByToolId.has(match[1])) item.toolIcon = iconByToolId.get(match[1])
+    }
+  }
+
   return {
     group: {
       heading: section.title,
@@ -722,10 +789,10 @@ function buildPaletteItems(basePath, onCreateAction, onNavigateToPage) {
   const base = (basePath || '/').replace(/\/+$/, '')
   const prefix = base === '/' ? '' : base
 
-  const { groups, toolMenus } = buildConfigSections(prefix, onNavigateToPage, onCreateAction)
+  const { groups, toolMenus, hiddenFromSearchIds } = buildConfigSections(prefix, onNavigateToPage, onCreateAction)
   const authorIndex = buildAuthorIndex(prefix)
 
-  return { groups, toolMenus, authorIndex }
+  return { groups, toolMenus, authorIndex, hiddenFromSearchIds }
 }
 
 /**
@@ -738,9 +805,11 @@ export default function StoryboardCommandPalette({ basePath }) {
   const [items, setItems] = useState([])
   const [toolMenus, setToolMenus] = useState([])
   const [authorIndex, setAuthorIndex] = useState(new Map())
+  const [hiddenFromSearchIds, setHiddenFromSearchIds] = useState(new Set())
   const [activePage, setActivePage] = useState('root')
   const [createType, setCreateType] = useState(null)
   const [currentTheme, setCurrentTheme] = useState(() => getTheme())
+  const [refreshKey, setRefreshKey] = useState(0)
 
   // Keep currentTheme in sync when theme changes
   useEffect(() => {
@@ -759,43 +828,29 @@ export default function StoryboardCommandPalette({ basePath }) {
     setActivePage(pageId)
   }
 
-  // Listen for Cmd+K directly
-  // The Svelte CoreUIBar also handles Cmd+K by dispatching
-  // 'storyboard:toggle-palette'. We use rAF to detect if Svelte
-  // already fired the toggle event and skip to avoid double-toggle.
+  // Listen for Cmd+K directly to toggle the palette
   useEffect(() => {
-    let toggledByEvent = false
-
-    function handleToggleEvent() {
-      toggledByEvent = true
-    }
-
     function handleKeyDown(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
         e.preventDefault()
-        toggledByEvent = false
-        requestAnimationFrame(() => {
-          if (toggledByEvent) return
-          const built = buildPaletteItems(basePath, handleCreateAction, handleNavigateToPage)
-          setItems(built.groups)
-          setToolMenus(built.toolMenus)
-          setAuthorIndex(built.authorIndex)
-          setSearch('')
-          setActivePage('root')
-          setOpen(prev => !prev)
-        })
+        const built = buildPaletteItems(basePath, handleCreateAction, handleNavigateToPage)
+        setItems(built.groups)
+        setToolMenus(built.toolMenus)
+        setAuthorIndex(built.authorIndex)
+        setHiddenFromSearchIds(built.hiddenFromSearchIds || new Set())
+        setSearch('')
+        setActivePage('root')
+        setOpen(prev => !prev)
       }
     }
 
-    document.addEventListener('storyboard:toggle-palette', handleToggleEvent)
     document.addEventListener('keydown', handleKeyDown)
     return () => {
-      document.removeEventListener('storyboard:toggle-palette', handleToggleEvent)
       document.removeEventListener('keydown', handleKeyDown)
     }
   }, [basePath])
 
-  // Listen for toggle events from Svelte CoreUIBar
+  // Listen for toggle/open events from toolbar buttons (e.g. CommandPaletteTrigger)
   useEffect(() => {
     function handleToggle() {
       setOpen(prev => {
@@ -806,6 +861,7 @@ export default function StoryboardCommandPalette({ basePath }) {
             setItems(built.groups)
             setToolMenus(built.toolMenus)
             setAuthorIndex(built.authorIndex)
+            setHiddenFromSearchIds(built.hiddenFromSearchIds || new Set())
             setSearch('')
             setActivePage('root')
           }, 0)
@@ -819,6 +875,7 @@ export default function StoryboardCommandPalette({ basePath }) {
       setItems(built.groups)
       setToolMenus(built.toolMenus)
       setAuthorIndex(built.authorIndex)
+      setHiddenFromSearchIds(built.hiddenFromSearchIds || new Set())
       setSearch('')
       setActivePage('root')
       setOpen(true)
@@ -832,6 +889,14 @@ export default function StoryboardCommandPalette({ basePath }) {
     }
   }, [basePath])
 
+  // Rebuild palette items when a toggle is clicked (refreshKey changes)
+  useEffect(() => {
+    if (refreshKey === 0) return
+    const built = buildPaletteItems(basePath, handleCreateAction, handleNavigateToPage)
+    setItems(built.groups)
+    setToolMenus(built.toolMenus)
+  }, [refreshKey, basePath])
+
   const handleChangeOpen = useCallback((value) => {
     if (!value) {
       setOpen(false)
@@ -846,12 +911,12 @@ export default function StoryboardCommandPalette({ basePath }) {
       id: `subpage:${menu.id}`,
       items: (menu.options || []).map((opt, i) => ({
         id: `subpage:${menu.id}:${i}`,
-        children: opt.toolHandler === 'core:theme' && opt.value === currentTheme
-          ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
-          : opt.label,
+        label: opt.label,
+        isToggle: opt.type === 'toggle',
+        isActiveToggle: opt.type === 'toggle' && opt.active,
+        isActiveTheme: opt.toolHandler === 'core:theme' && opt.value === currentTheme,
         keywords: [opt.label, menu.label || menu.id],
-        showType: false,
-        onClick: () => {
+        onSelect: () => {
           if (opt.execute) {
             opt.execute()
           } else if (opt.toolHandler === 'core:theme' && opt.value) {
@@ -859,147 +924,185 @@ export default function StoryboardCommandPalette({ basePath }) {
           } else if (opt.action) {
             executeAction(opt.action, opt.value)
           }
-          setOpen(false)
-          setActivePage('root')
+          if (opt.type === 'toggle') {
+            setRefreshKey(k => k + 1)
+          } else {
+            setOpen(false)
+            setActivePage('root')
+          }
         },
       })),
     })).filter(g => g.items.length > 0)
-  }, [toolMenus, currentTheme])
-
-  const filteredItems = useMemo(() => {
-    const base = filterItems(items, search)
-    if (!search) return base
-    const matchingSub = filterItems(subPageGroups, search)
-    const result = [...base, ...matchingSub]
-
-    // Author search: match usernames against author index
-    const q = search.toLowerCase()
-    const authorQ = q.startsWith('@') ? q.slice(1) : q
-    for (const [key, { author, items: authorItems }] of authorIndex) {
-      if (!key.includes(authorQ)) continue
-      // Avoid duplicates with already-shown artifact items
-      const shownIds = new Set(result.flatMap(g => g.items.map(i => i.id)))
-      const uniqueItems = authorItems.filter(item => !shownIds.has(`author:${item.id}`))
-      if (uniqueItems.length === 0) continue
-      result.push({
+  }, [toolMenus, currentTheme, refreshKey])
+
+  // Build author groups from the index
+  const authorGroups = useMemo(() => {
+    const groups = []
+    for (const [, { author, items: authorItems }] of authorIndex) {
+      groups.push({
         heading: `Artifacts by @${author}`,
-        id: `author:${key}`,
-        items: uniqueItems.map(item => ({
+        id: `author:${author.toLowerCase()}`,
+        author,
+        items: authorItems.map(item => ({
           id: `author:${item.id}`,
-          children: (
-            <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
-              <span>{item.name}</span>
-              <span style={{ fontSize: '12px', color: 'var(--fgColor-muted, #999)' }}>{item.type}</span>
-            </span>
-          ),
+          label: item.name,
+          type: item.type,
           keywords: [item.name, item.id, item.type, author, `@${author}`],
-          showType: false,
-          onClick: () => {
+          onSelect: () => {
             trackRecent(item.type.toLowerCase(), item.id, item.name)
             window.location.href = item.route
           },
         })),
       })
     }
-
-    return result
-  }, [items, search, subPageGroups, authorIndex])
+    return groups
+  }, [authorIndex])
 
   // Remove consecutive separators and leading/trailing separators
-  const deduplicatedItems = useMemo(() => {
+  const cleanedItems = useMemo(() => {
     const result = []
-    for (const item of filteredItems) {
+    for (const item of items) {
       const isSep = item.id?.startsWith('cfg:sep')
       if (isSep && (result.length === 0 || result[result.length - 1].id?.startsWith('cfg:sep'))) continue
       result.push(item)
     }
-    // Remove trailing separator
     while (result.length > 0 && result[result.length - 1].id?.startsWith('cfg:sep')) result.pop()
     return result
-  }, [filteredItems])
-
-  // Items without separators — used for keyboard navigation indexing
-  const navigableItems = useMemo(
-    () => deduplicatedItems.filter(list => !list.id?.startsWith('cfg:sep')),
-    [deduplicatedItems]
-  )
-
-  const handleChangeSearch = useCallback((value) => {
-    setSearch(value)
-  }, [])
+  }, [items])
+
+  // Build search value string from keywords array
+  function itemValue(item) {
+    const parts = []
+    if (typeof item.children === 'string') parts.push(item.children)
+    if (item.label) parts.push(item.label)
+    if (item.keywords) parts.push(...item.keywords)
+    return parts.filter(Boolean).join(' ')
+  }
 
   return (
     <>
-    <CommandPalette
-      onChangeSearch={handleChangeSearch}
-      onChangeOpen={handleChangeOpen}
-      search={search}
-      isOpen={open}
-      page={activePage}
-      placeholder={activePage === 'root'
-        ? 'Search commands, prototypes, canvases, stories...'
-        : `Search ${toolMenus.find(m => m.id === activePage)?.label || ''}...`
-      }
+    <Command.Dialog
+      open={open}
+      onOpenChange={handleChangeOpen}
+      label="Command Menu"
+      className="command-palette"
+      shouldFilter={activePage === 'root'}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape' && activePage !== 'root') {
+          e.preventDefault()
+          e.stopPropagation()
+          setActivePage('root')
+          setSearch('')
+        }
+      }}
     >
-      <CommandPalette.Page id="root">
-        {deduplicatedItems.length ? (
-          deduplicatedItems.map((list) => (
-            list.id?.startsWith('cfg:sep') ? (
-              !search && <hr key={list.id} style={{ border: 'none', borderTop: '1px solid var(--borderColor-muted, #e5e5e5)', margin: '4px 14px' }} />
-            ) : (
-              <CommandPalette.List key={list.id} heading={list.heading}>
-                {list.items.map(({ id, ...rest }) => (
-                  <CommandPalette.ListItem
-                    key={id}
-                    index={getItemIndex(navigableItems, id)}
-                    {...rest}
-                  />
+      <Command.Input
+        placeholder={activePage === 'root'
+          ? 'Search commands, prototypes, canvases, stories...'
+          : `Search ${toolMenus.find(m => m.id === activePage)?.label || ''}...`
+        }
+        value={search}
+        onValueChange={setSearch}
+      />
+      <Command.List>
+        <Command.Empty>No results found.</Command.Empty>
+
+        {activePage === 'root' ? (
+          <>
+            {/* Main config-driven groups */}
+            {cleanedItems.map((list) => (
+              list.id?.startsWith('cfg:sep') ? (
+                !search && <Command.Separator key={list.id} />
+              ) : (
+                <Command.Group key={list.id} heading={list.heading}>
+                  {list.items.map(({ id, children, keywords, onClick, itemType, toolIcon, ...rest }) => {
+                    if (hiddenFromSearchIds.size > 0) {
+                      for (const toolId of hiddenFromSearchIds) {
+                        if (id?.includes(toolId)) return null
+                      }
+                    }
+                    return (
+                      <Command.Item
+                        key={id}
+                        value={itemValue({ children, keywords })}
+                        onSelect={() => onClick?.()}
+                      >
+                        <ItemIcon type={itemType} toolIcon={toolIcon} />
+                        {children}
+                      </Command.Item>
+                    )
+                  })}
+                </Command.Group>
+              )
+            ))}
+
+            {/* Sub-page options flattened for root search */}
+            {search && subPageGroups.map(group => (
+              <Command.Group key={group.id} heading={group.heading}>
+                {group.items.map(item => (
+                  <Command.Item
+                    key={item.id}
+                    value={itemValue(item)}
+                    onSelect={item.onSelect}
+                  >
+                    <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span>{item.label}</span>
+                      {(item.isActiveToggle || item.isActiveTheme) && <span>✓</span>}
+                    </span>
+                  </Command.Item>
                 ))}
-              </CommandPalette.List>
-            )
-          ))
+              </Command.Group>
+            ))}
+
+            {/* Author groups */}
+            {search && authorGroups.map(group => (
+              <Command.Group key={group.id} heading={group.heading}>
+                {group.items.map(item => (
+                  <Command.Item
+                    key={item.id}
+                    value={itemValue(item)}
+                    onSelect={item.onSelect}
+                  >
+                    <AvatarIcon username={group.author} />
+                    <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span>{item.label}</span>
+                      <span style={{ fontSize: '12px', color: 'var(--fgColor-muted, #999)' }}>{item.type}</span>
+                    </span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            ))}
+          </>
         ) : (
-          <div style={{ padding: '2rem', textAlign: 'center', color: '#6b7280' }}>
-            No results for &ldquo;{search}&rdquo;
-          </div>
+          /* Tool-menu sub-pages */
+          toolMenus.filter(menu => menu.id === activePage).map(menu => (
+            <Command.Group key={menu.id} heading={menu.title || menu.label || menu.id}>
+              {(menu.options || []).map((opt, i) => (
+                <Command.Item
+                  key={`${menu.id}:${i}`}
+                  value={opt.label}
+                  onSelect={() => {
+                    if (opt.execute) {
+                      opt.execute()
+                    } else if (opt.toolHandler === 'core:theme' && opt.value) {
+                      setTheme(opt.value)
+                    } else if (opt.action) {
+                      executeAction(opt.action, opt.value)
+                    }
+                    setOpen(false)
+                    setActivePage('root')
+                  }}
+                >
+                  {opt.toolHandler === 'core:theme' && opt.value === currentTheme
+                    ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
+                    : opt.label}
+                </Command.Item>
+              ))}
+            </Command.Group>
+          ))
         )}
-      </CommandPalette.Page>
-
-      {/* Tool-menu sub-pages */}
-      {toolMenus.map(menu => (
-        <CommandPalette.Page
-          key={menu.id}
-          id={menu.id}
-          onEscape={() => { setActivePage('root'); setSearch('') }}
-          searchPrefix={[menu.label || menu.id]}
-        >
-          <CommandPalette.List heading={menu.title || menu.label || menu.id}>
-            {(menu.options || []).map((opt, i) => (
-              <CommandPalette.ListItem
-                key={`${menu.id}:${i}`}
-                index={i}
-                showType={false}
-                onClick={() => {
-                  if (opt.execute) {
-                    opt.execute()
-                  } else if (opt.toolHandler === 'core:theme' && opt.value) {
-                    setTheme(opt.value)
-                  } else if (opt.action) {
-                    executeAction(opt.action, opt.value)
-                  }
-                  setOpen(false)
-                  setActivePage('root')
-                }}
-              >
-                {opt.toolHandler === 'core:theme' && opt.value === currentTheme
-                  ? <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}><span>{opt.label}</span><span>✓</span></span>
-                  : opt.label}
-              </CommandPalette.ListItem>
-            ))}
-          </CommandPalette.List>
-        </CommandPalette.Page>
-      ))}
-    </CommandPalette>
+      </Command.List>
+    </Command.Dialog>
 
     <CreateDialog
       type={createType}