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

package/src/CommandPalette/CommandPalette.jsx

@@ -1,5 +1,7 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { Command } from 'cmdk'
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
 import Icon from '../Icon.jsx'
 import {
   buildPrototypeIndex,
@@ -14,9 +16,11 @@ import {
   trackRecent,
   getCommandPaletteConfig,
   getToolbarConfig,
+  getConfig,
   setTheme,
   getTheme,
   isExcludedByRoute,
+  scoreMatch,
 } from '@dfosco/storyboard-core'
 import { widgetTypes } from '../canvas/widgets/widgetConfig.js'
 import CreateDialog from './CreateDialog.jsx'
@@ -32,10 +36,12 @@ function getIconMap() {
   return config?.icons || {}
 }
 
-function ItemIcon({ type, toolIcon }) {
+function ItemIcon({ type, toolIcon, toolMeta }) {
   const icons = getIconMap()
-  const iconName = toolIcon || icons[type] || icons.fallback || 'feather/hexagon'
-  return <Icon name={iconName} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />
+  const entry = toolIcon || icons[type] || icons.fallback || 'feather/hexagon'
+  const iconName = typeof entry === 'object' ? entry.name : entry
+  const meta = toolMeta || (typeof entry === 'object' ? entry.meta : undefined)
+  return <Icon name={iconName} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" {...(meta || {})} />
 }
 
 function AvatarIcon({ username }) {
@@ -116,13 +122,14 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
         items: section.items.map((item, i) => {
           const id = `cfg:${section.id}:${i}`
           if (item.type === 'link') {
+            const resolvedUrl = item.url?.startsWith('/') ? prefix + item.url : item.url
             return {
               id,
               children: item.label,
               keywords: item.keywords || [item.label],
+              url: resolvedUrl,
               onClick: () => {
-                const url = item.url?.startsWith('/') ? prefix + item.url : item.url
-                if (url) window.location.href = url
+                if (resolvedUrl) window.location.href = resolvedUrl
               },
             }
           }
@@ -237,12 +244,14 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
 
       // Any remaining tools (all surfaces)
       if (tool.render === 'link' && tool.url) {
+        const resolvedUrl = tool.url.startsWith('/') ? prefix + tool.url : tool.url
         remainingItems.push({
           id: `cfg:${section.id}:${toolId}`,
           children: label,
           keywords: [label, toolId].filter(Boolean),
           showType: false,
-          onClick: () => { window.location.href = tool.url },
+          url: resolvedUrl,
+          onClick: () => { window.location.href = resolvedUrl },
         })
       } else {
         // Menu tools: close palette and click the toolbar button to open the menu
@@ -283,9 +292,10 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
       }
     }
 
-    // Also include any toolMenus sub-pages not yet listed
+    // Also include any tool sub-pages not yet listed (skip non-tool sub-pages like create-widget)
     for (const menu of toolMenus) {
-      const menuToolId = menu.id?.replace('tool:', '')
+      if (!menu.id?.startsWith('tool:')) continue
+      const menuToolId = menu.id.replace('tool:', '')
       if (usedToolIds.has(menuToolId)) continue
       if (remainingItems.some(i => i.id === `cfg:${section.id}:${menuToolId}`)) continue
       remainingItems.push({
@@ -299,6 +309,18 @@ function buildConfigSections(prefix, onNavigateToPage, onCreateAction) {
     }
 
     if (remainingItems.length === 0) continue
+
+    // Stamp toolIcon from toolbar config onto remaining items
+    for (const item of remainingItems) {
+      if (!item.toolIcon) {
+        const match = item.id?.match(/cfg:[^:]+:(.+)/)
+        if (match) {
+          const t = allTools[match[1]]
+          if (t?.icon) item.toolIcon = t.icon
+        }
+      }
+    }
+
     groups.push({
       heading: section.title,
       id: `cfg:${section.id}`,
@@ -334,22 +356,66 @@ 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 hiddenTypes = new Set(['link-preview', 'image', 'figma-embed', 'codepen-embed', 'story', 'terminal-read'])
+    const hiddenTypes = new Set(['link-preview', 'image', 'figma-embed', 'codepen-embed', 'story', 'terminal-read', 'agent'])
     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()],
-      itemType: 'create',
+      itemType: type,
       onClick: () => {
         document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
       },
     }))
-    return { group: { heading: section.title, id: `cfg:${section.id}`, items } }
+
+    // Build agent submenu from canvas.agents config
+    const subPages = []
+    const canvasConfig = getConfig('canvas')
+    const agentsConfig = canvasConfig?.agents
+    if (agentsConfig && typeof agentsConfig === 'object') {
+      const agentEntries = Object.entries(agentsConfig)
+      if (agentEntries.length > 0) {
+        const pageId = 'create-widget:agents'
+        subPages.push({
+          id: pageId,
+          label: 'Add agent to canvas',
+          title: 'Add agent to canvas',
+          keywords: ['agent', 'add', 'widget', 'copilot', 'claude', 'codex'],
+          options: agentEntries.map(([id, cfg]) => ({
+            label: cfg.label || id,
+            icon: cfg.icon,
+            execute: () => {
+              document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', {
+                detail: {
+                  type: 'agent',
+                  props: {
+                    agentId: id,
+                    startupCommand: cfg.startupCommand || id,
+                    ...(cfg.defaultWidth ? { width: cfg.defaultWidth } : {}),
+                    ...(cfg.defaultHeight ? { height: cfg.defaultHeight } : {}),
+                  },
+                },
+              }))
+            },
+          })),
+        })
+        items.push({
+          id: 'create-widget:agent',
+          children: 'Agent',
+          keywords: ['add', 'widget', 'create', 'agent'],
+          itemType: 'agent',
+          hideFromSearch: true,
+          onClick: () => onNavigateToPage?.(pageId),
+          closeOnSelect: false,
+        })
+      }
+    }
+
+    return { group: { heading: section.title, id: `cfg:${section.id}`, items }, subPages }
   }
 
   // --- Starred source (reads from viewfinder localStorage) ---
   if (section.source === 'starred') {
-    const STARRED_KEY = 'sb-viewfinder-starred'
+    const STARRED_KEY = 'sb-workspace-starred'
     let starredIds = []
     try { starredIds = JSON.parse(localStorage.getItem(STARRED_KEY)) || [] } catch {}
     if (starredIds.length === 0) return null
@@ -379,6 +445,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
         children: artifact.name,
         keywords: ['starred', 'star', artifact.name.toLowerCase()],
         itemType: artifact._type === 'canvas' ? 'canvas' : 'prototype',
+        url: route,
         onClick: () => {
           if (artifact.isExternal) {
             window.open(route, '_blank')
@@ -415,14 +482,15 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
           })
         }
       } else if (action.type === 'link' && action.url) {
+        const resolvedUrl = action.url.startsWith('/') && !action.url.startsWith('//') ? prefix + action.url : action.url
         commandItems.push({
           id: `cmd:${action.id}`,
           children: action.label,
           keywords: [action.label],
           itemType: 'link',
+          url: resolvedUrl,
           onClick: () => {
-            const url = action.url.startsWith('/') && !action.url.startsWith('//') ? prefix + action.url : action.url
-            window.location.href = url
+            window.location.href = resolvedUrl
           },
         })
       } else {
@@ -449,17 +517,20 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
       group: {
         heading: section.title,
         id: `cfg:${section.id}`,
-        items: items.map(entry => ({
-          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)
-            if (route) window.location.href = route
-          },
-      })),
+        items: items.map(entry => {
+          const route = resolveRecentRoute(entry, prefix)
+          return {
+            id: `cfg:${section.id}:${entry.type}:${entry.key}`,
+            children: entry.label,
+            keywords: [entry.type, entry.key, entry.label],
+            itemType: entry.type,
+            url: route || undefined,
+            onClick: () => {
+              trackRecent(entry.type, entry.key, entry.label)
+              if (route) window.location.href = route
+            },
+          }
+        }),
       },
     }
   }
@@ -514,6 +585,7 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
         children: item.name,
         keywords: [item.name, item.id, item.type],
         itemType: item.type,
+        url: item.route,
         onClick: () => {
           trackRecent(item.type, item.id, item.name)
           window.location.href = item.route
@@ -543,12 +615,14 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
     for (const entry of section.toolIds) {
       const toolId = typeof entry === 'string' ? entry : entry.id
       const customLabel = typeof entry === 'object' ? entry.label : null
+      const closeOnSelect = typeof entry === 'object' ? entry.closeOnSelect : undefined
+      const iconMeta = typeof entry === 'object' ? entry.meta : undefined
       const tool = tools[toolId]
       if (!tool) continue
       const state = getToolbarToolState(toolId)
       if (state === 'disabled' || state === 'hidden') continue
       if (isHiddenInPalette(tool, basePath)) continue
-      entries.push({ toolId, tool, label: customLabel || tool.label || toolId, toolIcon: tool.icon })
+      entries.push({ toolId, tool, label: customLabel || tool.label || toolId, toolIcon: tool.icon, toolMeta: iconMeta, closeOnSelect: closeOnSelect ?? tool.closeOnSelect })
     }
   } else {
     for (const [toolId, tool] of Object.entries(tools)) {
@@ -556,7 +630,7 @@ 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: tool.label || toolId, toolIcon: tool.icon })
+      entries.push({ toolId, tool, label: tool.label || toolId, toolIcon: tool.icon, toolMeta: undefined, closeOnSelect: tool.closeOnSelect })
     }
   }
 
@@ -565,22 +639,22 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
   const items = []
   const subPages = []
 
-  for (const { toolId, tool, label, toolIcon } of entries) {
+  for (const { toolId, tool, label, toolIcon, toolMeta, closeOnSelect: entryCloseOnSelect } 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}`,
-        toolIcon,
+        toolIcon: isHidden ? 'primer/light-bulb' : 'primer/light-bulb',
         children: <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
-          <span>{label}</span>
+          <span>Hide toolbars</span>
           <span>{isHidden ? '✓' : ''}</span>
         </span>,
         keywords: [label, toolId, 'hide', 'show', 'toolbar'].filter(Boolean),
         showType: false,
+        closeOnSelect: entryCloseOnSelect,
         onClick: () => {
           document.documentElement.classList.toggle('storyboard-chrome-hidden')
-          setRefreshKey(k => k + 1)
         },
       })
       continue
@@ -600,13 +674,15 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
     }
 
     if (tool.render === 'link' && tool.url) {
+      const resolvedUrl = tool.url.startsWith('/') ? prefix + tool.url : tool.url
       items.push({
         id: `cfg:${section.id}:${toolId}`,
         children: label,
         keywords: [label, toolId].filter(Boolean),
+        url: resolvedUrl,
+        closeOnSelect: entryCloseOnSelect,
         onClick: () => {
-          const url = tool.url.startsWith('/') ? prefix + tool.url : tool.url
-          window.location.href = url
+          window.location.href = resolvedUrl
         },
       })
       continue
@@ -669,7 +745,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
         continue
       }
 
-      // Menu tool without sub-items or options — click toolbar button
+      // Menu tool without sub-items or options — dispatch open event, fall back to clicking toolbar button
       const ariaLabel = tool.ariaLabel || tool.label || toolId
       items.push({
         id: `cfg:${section.id}:${toolId}`,
@@ -678,6 +754,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
         showType: false,
         onClick: () => {
           setTimeout(() => {
+            document.dispatchEvent(new CustomEvent(`storyboard:open-${toolId}`))
             const btn = document.querySelector(`[aria-label="${ariaLabel}"]`)
             if (btn) btn.click()
           }, 100)
@@ -692,6 +769,7 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
         id: `cfg:${section.id}:${toolId}`,
         children: label,
         keywords: [label, toolId].filter(Boolean),
+        closeOnSelect: entryCloseOnSelect,
         onClick: () => { if (action) executeAction(action.id) },
       })
       continue
@@ -701,16 +779,21 @@ function buildToolsSection(section, prefix, onNavigateToPage) {
       id: `cfg:${section.id}:${toolId}`,
       children: label,
       keywords: [label, toolId].filter(Boolean),
+      closeOnSelect: entryCloseOnSelect,
       onClick: () => executeAction(toolId),
     })
   }
 
-  // Add toolIcon to all items from their entry
-  const iconByToolId = new Map(entries.map(e => [e.toolId, e.toolIcon]))
+  // Add toolIcon and toolMeta to all items from their entry
+  const iconByToolId = new Map(entries.map(e => [e.toolId, { icon: e.toolIcon, meta: e.toolMeta }]))
   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])
+      if (match && iconByToolId.has(match[1])) {
+        const entry = iconByToolId.get(match[1])
+        item.toolIcon = entry.icon
+        if (!item.toolMeta && entry.meta) item.toolMeta = entry.meta
+      }
     }
   }
 
@@ -811,6 +894,24 @@ export default function StoryboardCommandPalette({ basePath }) {
   const [currentTheme, setCurrentTheme] = useState(() => getTheme())
   const [refreshKey, setRefreshKey] = useState(0)
 
+  // Track modifier keys for link items (cmd/ctrl → new tab, alt → copy link).
+  // Updated from the most recent keyboard/mouse event via a capturing listener
+  // on the document so it fires before cmdk's own handlers.
+  const modifierHeldRef = useRef(false)
+  const altHeldRef = useRef(false)
+  useEffect(() => {
+    const track = (e) => { modifierHeldRef.current = e.metaKey || e.ctrlKey; altHeldRef.current = e.altKey }
+    const reset = () => { modifierHeldRef.current = false; altHeldRef.current = false }
+    document.addEventListener('keydown', track, true)
+    document.addEventListener('keyup', reset, true)
+    document.addEventListener('mousedown', track, true)
+    return () => {
+      document.removeEventListener('keydown', track, true)
+      document.removeEventListener('keyup', reset, true)
+      document.removeEventListener('mousedown', track, true)
+    }
+  }, [])
+
   // Keep currentTheme in sync when theme changes
   useEffect(() => {
     const handler = (e) => setCurrentTheme(e.detail.theme)
@@ -899,10 +1000,16 @@ export default function StoryboardCommandPalette({ basePath }) {
 
   const handleChangeOpen = useCallback((value) => {
     if (!value) {
+      // Escape from a sub-page goes back to root instead of closing
+      if (activePage !== 'root') {
+        setActivePage('root')
+        setSearch('')
+        return
+      }
       setOpen(false)
       setActivePage('root')
     }
-  }, [])
+  }, [activePage])
 
   // Flatten sub-page options into searchable groups so they appear in root search
   const subPageGroups = useMemo(() => {
@@ -912,6 +1019,7 @@ export default function StoryboardCommandPalette({ basePath }) {
       items: (menu.options || []).map((opt, i) => ({
         id: `subpage:${menu.id}:${i}`,
         label: opt.label,
+        icon: opt.icon,
         isToggle: opt.type === 'toggle',
         isActiveToggle: opt.type === 'toggle' && opt.active,
         isActiveTheme: opt.toolHandler === 'core:theme' && opt.value === currentTheme,
@@ -947,9 +1055,12 @@ export default function StoryboardCommandPalette({ basePath }) {
           id: `author:${item.id}`,
           label: item.name,
           type: item.type,
+          url: item.route,
           keywords: [item.name, item.id, item.type, author, `@${author}`],
           onSelect: () => {
             trackRecent(item.type.toLowerCase(), item.id, item.name)
+            setOpen(false)
+            setActivePage('root')
             window.location.href = item.route
           },
         })),
@@ -979,6 +1090,49 @@ export default function StoryboardCommandPalette({ basePath }) {
     return parts.filter(Boolean).join(' ')
   }
 
+  // Custom filter using scoreMatch for better ranking.
+  // scoreMatch tiers: prefix (100) > word-boundary (75) > substring (50) > fuzzy (5-25).
+  // Normalizes to 0-1 for cmdk; weak fuzzy matches (score < 10) are hidden to
+  // prevent garbage results from dominating above exact matches in other groups.
+  const MAX_SCORE = 110
+  const cmdkFilter = useCallback((value, search) => {
+    if (!search) return 1
+    const score = scoreMatch(value, search.toLowerCase().trim())
+    if (score < 10) return 0
+    return Math.min(1, score / MAX_SCORE)
+  }, [])
+
+  function showCenterToast(message) {
+    const el = document.createElement('div')
+    Object.assign(el.style, {
+      position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
+      zIndex: '10000', padding: '0.625rem 1rem', borderRadius: '0.5rem',
+      background: 'var(--bgColor-emphasis, #1f2328)', color: 'var(--fgColor-onEmphasis, #fff)',
+      fontSize: '0.8125rem', fontFamily: 'var(--fontStack-sansSerif, system-ui)',
+      opacity: '0', transition: 'opacity 0.15s ease',
+      pointerEvents: 'none',
+    })
+    el.textContent = message
+    document.body.appendChild(el)
+    requestAnimationFrame(() => { el.style.opacity = '1' })
+    setTimeout(() => { el.style.opacity = '0'; setTimeout(() => el.remove(), 200) }, 1800)
+  }
+
+  function copyLinkToClipboard(url, itemType) {
+    const fullUrl = url.startsWith('/') ? window.location.origin + url : url
+    const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
+    const isPasteable = itemType === 'prototype' || itemType === 'story'
+    const shouldPaste = isCanvasRoute && isPasteable
+
+    navigator.clipboard.writeText(fullUrl).then(() => {
+      showCenterToast(shouldPaste ? 'Link copied and pasted' : 'Link copied to clipboard')
+    })
+
+    if (shouldPaste) {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:paste-url', { detail: { url: fullUrl } }))
+    }
+  }
+
   return (
     <>
     <Command.Dialog
@@ -987,6 +1141,8 @@ export default function StoryboardCommandPalette({ basePath }) {
       label="Command Menu"
       className="command-palette"
       shouldFilter={activePage === 'root'}
+      filter={cmdkFilter}
+      aria-describedby={undefined}
       onKeyDown={(e) => {
         if (e.key === 'Escape' && activePage !== 'root') {
           e.preventDefault()
@@ -996,6 +1152,10 @@ export default function StoryboardCommandPalette({ basePath }) {
         }
       }}
     >
+      <VisuallyHidden.Root asChild>
+        <DialogPrimitive.Title>Command Menu</DialogPrimitive.Title>
+      </VisuallyHidden.Root>
+      <DialogPrimitive.Description className="sr-only" style={{ display: 'none' }} />
       <Command.Input
         placeholder={activePage === 'root'
           ? 'Search commands, prototypes, canvases, stories...'
@@ -1009,13 +1169,35 @@ export default function StoryboardCommandPalette({ basePath }) {
 
         {activePage === 'root' ? (
           <>
+            {/* Sub-page options flattened for root search — rendered first
+                so high-scoring items (e.g. "Copilot CLI" for query "cop")
+                appear above weaker matches in later groups. */}
+            {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}
+                  >
+                    {item.icon && <Icon name={item.icon} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />}
+                    <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <span>{item.label}</span>
+                      {(item.isActiveToggle || item.isActiveTheme) && <span>✓</span>}
+                    </span>
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            ))}
+
             {/* 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 }) => {
+                  {list.items.map(({ id, children, keywords, onClick, itemType, toolIcon, toolMeta, closeOnSelect, hideFromSearch, url, ...rest }) => {
+                    if (search && hideFromSearch) return null
                     if (hiddenFromSearchIds.size > 0) {
                       for (const toolId of hiddenFromSearchIds) {
                         if (id?.includes(toolId)) return null
@@ -1025,9 +1207,21 @@ export default function StoryboardCommandPalette({ basePath }) {
                       <Command.Item
                         key={id}
                         value={itemValue({ children, keywords })}
-                        onSelect={() => onClick?.()}
+                        onSelect={() => {
+                          if (url && altHeldRef.current) {
+                            copyLinkToClipboard(url, itemType)
+                          } else if (url && modifierHeldRef.current) {
+                            window.open(url, '_blank')
+                          } else {
+                            onClick?.()
+                          }
+                          if (closeOnSelect !== false) {
+                            setOpen(false)
+                            setActivePage('root')
+                          }
+                        }}
                       >
-                        <ItemIcon type={itemType} toolIcon={toolIcon} />
+                        <ItemIcon type={itemType} toolIcon={toolIcon} toolMeta={toolMeta} />
                         {children}
                       </Command.Item>
                     )
@@ -1036,24 +1230,6 @@ export default function StoryboardCommandPalette({ basePath }) {
               )
             ))}
 
-            {/* 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>
-                ))}
-              </Command.Group>
-            ))}
-
             {/* Author groups */}
             {search && authorGroups.map(group => (
               <Command.Group key={group.id} heading={group.heading}>
@@ -1061,7 +1237,19 @@ export default function StoryboardCommandPalette({ basePath }) {
                   <Command.Item
                     key={item.id}
                     value={itemValue(item)}
-                    onSelect={item.onSelect}
+                    onSelect={() => {
+                      if (item.url && altHeldRef.current) {
+                        copyLinkToClipboard(item.url, item.type?.toLowerCase())
+                        setOpen(false)
+                        setActivePage('root')
+                      } else if (item.url && modifierHeldRef.current) {
+                        window.open(item.url, '_blank')
+                        setOpen(false)
+                        setActivePage('root')
+                      } else {
+                        item.onSelect()
+                      }
+                    }}
                   >
                     <AvatarIcon username={group.author} />
                     <span style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -1093,6 +1281,7 @@ export default function StoryboardCommandPalette({ basePath }) {
                     setActivePage('root')
                   }}
                 >
+                  {opt.icon && <Icon name={opt.icon} size={ICON_SIZE} color="var(--fgColor-muted, #656d76)" />}
                   {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}

package/src/CommandPalette/command-palette.css

@@ -10,6 +10,7 @@
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 10000;
+  animation: cmdk-overlay-in 120ms ease-out;
 }
 
 /* ─── Dialog content (Radix Content wrapper) ─── */
@@ -29,6 +30,17 @@
   border: 1px solid var(--borderColor-muted, #d1d9e0);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   outline: none;
+  animation: cmdk-dialog-in 120ms ease-out;
+}
+
+@keyframes cmdk-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes cmdk-dialog-in {
+  from { opacity: 0; transform: translateX(-50%) scale(0.97); }
+  to   { opacity: 1; transform: translateX(-50%) scale(1); }
 }
 
 /* ─── Input ─── */