Add SpeedDial FAB component with expandable secondary actions

Hover-peek + click-to-pin (chevron toggle), long-press support,
column-reverse layout, pop-in animation, and configurable actions.
Deprecate `MobileFAB` in favor of `SpeedDial`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ryan-williams

src/MobileFAB.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useMaybeHotkeysContext } from './HotkeysProvider'
 
+/**
+ * @deprecated Use {@link SpeedDialProps} from `SpeedDial` instead.
+ */
 export interface MobileFABProps {
   /**
    * Which modal to open when tapped.
@@ -52,6 +55,9 @@ function SearchIcon({ className }: { className?: string }) {
 }
 
 /**
+ * @deprecated Use `SpeedDial` instead, which supports expandable secondary actions,
+ * hover-peek + click-to-pin, and cross-device support.
+ *
  * Floating Action Button for triggering omnibar/lookup on mobile devices.
  *
  * On mobile, keyboard shortcuts aren't available, but users can still benefit

src/SearchTrigger.tsx

@@ -41,7 +41,7 @@ export function SearchIcon({ className }: { className?: string }) {
  * A simple button to trigger the omnibar or lookup modal.
  *
  * Use this to integrate search into your existing UI (FABs, menus, toolbars).
- * For a standalone floating action button, use `MobileFAB` instead.
+ * For a standalone floating action button, use `SpeedDial` instead.
  *
  * @example
  * ```tsx

src/SpeedDial.tsx

@@ -0,0 +1,251 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useMaybeHotkeysContext } from './HotkeysProvider'
+import { SearchIcon } from './SearchTrigger'
+
+export interface SpeedDialAction {
+  /** Unique key for React rendering */
+  key: string
+  /** Accessible label */
+  label: string
+  /** Icon element */
+  icon: React.ReactNode
+  /** Click handler (for button actions) */
+  onClick?: () => void
+  /** Link href (renders as <a> instead of <button>) */
+  href?: string
+  /** Open link in new tab (defaults to true for links) */
+  external?: boolean
+}
+
+export interface SpeedDialProps {
+  /** Extra actions rendered above the built-in shortcuts action */
+  actions?: SpeedDialAction[]
+  /** Whether to show the built-in "Shortcuts" action that opens the omnibar (default: true) */
+  showShortcuts?: boolean
+  /** Position offset from viewport edges */
+  position?: { bottom?: number; right?: number }
+  /** Duration in ms for long-press to toggle sticky (default: 400) */
+  longPressDuration?: number
+  /** Custom icon for the primary button (defaults to SearchIcon) */
+  primaryIcon?: React.ReactNode
+  /** Accessible label for the primary button */
+  ariaLabel?: string
+  /** Custom CSS class for the container */
+  className?: string
+}
+
+function ChevronIcon({ direction }: { direction: 'up' | 'down' }) {
+  const d = direction === 'up' ? 'M18 15l-6-6-6 6' : 'M6 9l6 6 6-6'
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ width: '1em', height: '1em' }}
+    >
+      <path d={d} />
+    </svg>
+  )
+}
+
+function KeyboardIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ width: '1em', height: '1em' }}
+    >
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+      <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8" />
+    </svg>
+  )
+}
+
+export function SpeedDial({
+  actions,
+  showShortcuts = true,
+  position,
+  longPressDuration = 400,
+  primaryIcon,
+  ariaLabel = 'Open command palette',
+  className,
+}: SpeedDialProps) {
+  const ctx = useMaybeHotkeysContext()
+  const [isSticky, setIsSticky] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const primaryBtnRef = useRef<HTMLButtonElement>(null)
+
+  const isExpanded = isSticky || isHovered
+
+  // Click-outside to clear sticky
+  useEffect(() => {
+    if (!isSticky) return
+    const handler = (e: MouseEvent | TouchEvent) => {
+      const target = e.target as Node
+      if (!document.contains(target)) return
+      if (containerRef.current && !containerRef.current.contains(target)) {
+        setIsSticky(false)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    document.addEventListener('touchstart', handler)
+    return () => {
+      document.removeEventListener('mousedown', handler)
+      document.removeEventListener('touchstart', handler)
+    }
+  }, [isSticky])
+
+  // Long-press on primary button (non-passive touch)
+  useEffect(() => {
+    const btn = primaryBtnRef.current
+    if (!btn) return
+
+    let timer: ReturnType<typeof setTimeout> | null = null
+    let longPressFired = false
+
+    const onTouchStart = (e: TouchEvent) => {
+      longPressFired = false
+      timer = setTimeout(() => {
+        longPressFired = true
+        setIsSticky(s => !s)
+      }, longPressDuration)
+    }
+    const onTouchEnd = (e: TouchEvent) => {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      if (longPressFired) {
+        e.preventDefault()
+      }
+    }
+    const onTouchMove = () => {
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+    }
+
+    btn.addEventListener('touchstart', onTouchStart, { passive: false })
+    btn.addEventListener('touchend', onTouchEnd, { passive: false })
+    btn.addEventListener('touchmove', onTouchMove, { passive: true })
+    return () => {
+      btn.removeEventListener('touchstart', onTouchStart)
+      btn.removeEventListener('touchend', onTouchEnd)
+      btn.removeEventListener('touchmove', onTouchMove)
+      if (timer) clearTimeout(timer)
+    }
+  }, [longPressDuration])
+
+  const handlePrimaryClick = useCallback(() => {
+    if (!ctx) return
+    ctx.openOmnibar()
+  }, [ctx])
+
+  const handleChevronClick = useCallback(() => {
+    setIsSticky(s => !s)
+  }, [])
+
+  if (!ctx) return null
+
+  const bottom = position?.bottom ?? 20
+  const right = position?.right ?? 20
+
+  const containerClasses = ['kbd-speed-dial']
+  if (isExpanded) containerClasses.push('kbd-speed-dial-expanded')
+  if (className) containerClasses.push(className)
+
+  const chevronClasses = ['kbd-speed-dial-chevron']
+  if (isSticky) chevronClasses.push('kbd-speed-dial-sticky')
+
+  // Built-in shortcuts action
+  const builtinActions: SpeedDialAction[] = []
+  if (showShortcuts) {
+    builtinActions.push({
+      key: '_kbd_shortcuts',
+      label: 'Shortcuts',
+      icon: <KeyboardIcon />,
+      onClick: () => ctx.openOmnibar(),
+    })
+  }
+
+  const allSecondaryActions = [...builtinActions, ...(actions ?? [])]
+
+  return (
+    <div
+      ref={containerRef}
+      className={containerClasses.join(' ')}
+      style={{
+        position: 'fixed',
+        bottom: `calc(${bottom}px + env(safe-area-inset-bottom, 0px))`,
+        right: `${right}px`,
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* DOM order = visual bottom-to-top via column-reverse */}
+
+      {/* Primary button (bottom) */}
+      <button
+        ref={primaryBtnRef}
+        type="button"
+        className="kbd-speed-dial-primary"
+        onClick={handlePrimaryClick}
+        aria-label={ariaLabel}
+      >
+        {primaryIcon ?? <SearchIcon className="kbd-speed-dial-icon" />}
+      </button>
+
+      {/* Chevron toggle (above primary) */}
+      <button
+        type="button"
+        className={chevronClasses.join(' ')}
+        onClick={handleChevronClick}
+        aria-label={isExpanded ? 'Collapse actions' : 'Expand actions'}
+        aria-expanded={isExpanded}
+      >
+        <ChevronIcon direction={isExpanded ? 'down' : 'up'} />
+      </button>
+
+      {/* Secondary actions (above chevron, visible when expanded) */}
+      {isExpanded && allSecondaryActions.map(action => {
+        const cls = 'kbd-speed-dial-action'
+        if (action.href) {
+          const external = action.external ?? true
+          return (
+            <a
+              key={action.key}
+              className={cls}
+              href={action.href}
+              aria-label={action.label}
+              title={action.label}
+              {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+            >
+              {action.icon}
+            </a>
+          )
+        }
+        return (
+          <button
+            key={action.key}
+            type="button"
+            className={cls}
+            onClick={action.onClick}
+            aria-label={action.label}
+            title={action.label}
+          >
+            {action.icon}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

src/index.ts

@@ -74,6 +74,8 @@ export { KeybindingEditor } from './KeybindingEditor'
 export { LookupModal } from './LookupModal'
 export { MobileFAB } from './MobileFAB'
 export type { MobileFABProps } from './MobileFAB'
+export { SpeedDial } from './SpeedDial'
+export type { SpeedDialAction, SpeedDialProps } from './SpeedDial'
 export { SearchTrigger, SearchIcon } from './SearchTrigger'
 export type { SearchTriggerProps } from './SearchTrigger'
 export { Omnibar } from './Omnibar'