@liberation-data/desk 0.1.0 → 0.3.0

package/src/react/Dock.tsx

@@ -3,6 +3,11 @@ import type { KeyboardEvent, ReactNode } from 'react'
 import { focusedId, instancesOf, windowType } from '../core/desk.js'
 import type { DeskState, WindowId } from '../core/types.js'
 import { useDesk, useDeskState } from './context.js'
+import { useContextMenu } from './contextMenu.js'
+import { useDragSource, useDropTarget } from './dnd.js'
+import type { Accepts, Drag } from './dnd.js'
+import { accepted } from './dragContext.js'
+import type { MenuItem } from './MenuBar.js'
 
 export interface DockItem {
   readonly id: string
@@ -16,6 +21,26 @@ export interface DockItem {
   /** Replaces the default of opening the item's window. */
   readonly onSelect?: () => void
   readonly disabled?: boolean
+  /** What a right-click (or the Menu key) offers for this item: Open, Remove from Dock. */
+  readonly contextMenu?: () => readonly MenuItem[]
+  /** Can be dragged along the dock to a new place, when the dock has `pins.onMove`. */
+  readonly movable?: boolean
+}
+
+/** The drag type of an item carried along the dock; its payload is the item's id. */
+export const DOCK_ITEM = 'desk.dock-item'
+
+/*
+ * Keeping things in the dock. The dock does not store what is kept: the app does, where it keeps its
+ * other preferences, and passes the kept items back as entries. The dock reports what the person did:
+ * dropped something on it, or carried a kept item to a new place. `before` is the id of the item it
+ * landed on, which it goes in front of, or null for the end.
+ */
+export interface DockPins {
+  /** The drag types that can be kept by dropping them on the dock. */
+  readonly accepts: Accepts
+  readonly onPin: (drag: Drag, before: string | null) => void
+  readonly onMove?: (id: string, before: string | null) => void
 }
 
 export interface DockStack {
@@ -41,6 +66,7 @@ export interface DockProps {
   /** `overlay` floats the dock over the bottom of its positioned parent; `inline` leaves layout to you. */
   readonly placement?: 'overlay' | 'inline'
   readonly className?: string
+  readonly pins?: DockPins
 }
 
 const windowOf = (item: DockItem) => item.window ?? item.id
@@ -75,9 +101,14 @@ function roveFocus(event: KeyboardEvent<HTMLElement>, keys: { next: string[]; pr
   target.focus()
 }
 
-export function Dock({ entries, label = 'Dock', placement = 'overlay', className }: DockProps) {
+export function Dock({ entries, label = 'Dock', placement = 'overlay', className, pins }: DockProps) {
   const [openStack, setOpenStack] = useState<string | null>(null)
   const firstFocusable = entries.find(e => e.type !== 'separator')?.id
+  const { dropProps } = useDropTarget({
+    accepts: pinAccepts(pins),
+    onDrop: drag => deliver(pins, drag, null),
+    disabled: !pins,
+  })
 
   return (
     <div
@@ -86,6 +117,7 @@ export function Dock({ entries, label = 'Dock', placement = 'overlay', className
       aria-orientation="horizontal"
       className={['desk-dock', className].filter(Boolean).join(' ')}
       data-placement={placement}
+      {...dropProps}
       onKeyDown={event => {
         if ((event.target as HTMLElement).closest('.desk-stack')) return
         roveFocus(event, { next: ['ArrowRight'], previous: ['ArrowLeft'] })
@@ -94,7 +126,7 @@ export function Dock({ entries, label = 'Dock', placement = 'overlay', className
       {entries.map(entry => {
         if (entry.type === 'separator') return <span key={entry.id} className="desk-dock-separator" role="separator" />
         if (entry.type === 'item')
-          return <DockButton key={entry.id} item={entry} tabIndex={entry.id === firstFocusable ? 0 : -1} />
+          return <DockButton key={entry.id} item={entry} tabIndex={entry.id === firstFocusable ? 0 : -1} pins={pins} />
         return (
           <StackButton
             key={entry.id}
@@ -113,10 +145,35 @@ function Badge({ children }: { readonly children: ReactNode }) {
   return <span className="desk-dock-badge">{children}</span>
 }
 
-function DockButton({ item, tabIndex }: { readonly item: DockItem; readonly tabIndex: number }) {
+// A kept item can be carried along the dock as well as whatever the app lets it keep.
+const pinAccepts = (pins: DockPins | undefined): Accepts => type =>
+  Boolean(pins) && ((type === DOCK_ITEM && Boolean(pins?.onMove)) || (type !== DOCK_ITEM && accepted(pins!.accepts, type)))
+
+function deliver(pins: DockPins | undefined, drag: Drag, before: string | null) {
+  if (!pins) return
+  if (drag.type === DOCK_ITEM) {
+    const id = drag.payload as string
+    if (id !== before) pins.onMove?.(id, before)
+  } else pins.onPin(drag, before)
+}
+
+interface DockButtonProps {
+  readonly item: DockItem
+  readonly tabIndex: number
+  readonly pins: DockPins | undefined
+}
+
+function DockButton({ item, tabIndex, pins }: DockButtonProps) {
   const desk = useDesk()
   const { running, focused } = statusOf(useDeskState(), [item])
+  const context = useContextMenu({ label: item.label, items: item.contextMenu ?? (() => []), disabled: !item.contextMenu })
+  // Only kept items take drops, so something carried lands among them and never splits the fixed ones.
+  const droppable = Boolean(pins && item.movable)
+  const { dropProps } = useDropTarget({ accepts: pinAccepts(pins), onDrop: drag => deliver(pins, drag, item.id), disabled: !droppable })
+  const source = useDragSource<string>({ type: DOCK_ITEM, disabled: !(droppable && pins?.onMove) })
+  const drag = droppable && pins?.onMove ? source.dragProps(item.id, <span className="desk-dock-icon">{item.icon}</span>) : {}
   return (
+    <>
     <button
       type="button"
       data-rove
@@ -125,8 +182,18 @@ function DockButton({ item, tabIndex }: { readonly item: DockItem; readonly tabI
       aria-label={item.label}
       data-running={running || undefined}
       data-focused={focused || undefined}
-      disabled={item.disabled}
-      onClick={() => (item.onSelect ? item.onSelect() : desk.open(windowOf(item)))}
+      // An item with a menu stays reachable while it cannot open, so it can still be removed.
+      disabled={item.disabled && !item.contextMenu}
+      aria-disabled={(item.disabled && item.contextMenu && true) || undefined}
+      {...dropProps}
+      {...drag}
+      onClick={() => {
+        if (item.disabled) return
+        if (item.onSelect) item.onSelect()
+        else desk.open(windowOf(item))
+      }}
+      onContextMenu={context.target.onContextMenu}
+      onKeyDown={context.target.onKeyDown}
     >
       <span className="desk-dock-icon" aria-hidden="true">
         {item.icon}
@@ -136,6 +203,8 @@ function DockButton({ item, tabIndex }: { readonly item: DockItem; readonly tabI
         {item.label}
       </span>
     </button>
+    {context.menu}
+    </>
   )
 }
 

package/src/react/MenuBar.tsx

@@ -4,6 +4,7 @@ import { canPerform, perform } from '../core/commands.js'
 import type { CommandId } from '../core/commands.js'
 import { focusedId } from '../core/desk.js'
 import { bindShortcuts, formatShortcut, isApplePlatform } from '../core/shortcuts.js'
+import type { Desk } from '../core/desk.js'
 import type { DeskState, WindowId } from '../core/types.js'
 import { useDesk } from './context.js'
 
@@ -79,11 +80,13 @@ export interface MenuBarProps {
   readonly className?: string
 }
 
-interface Resolved {
+/** A menu item as it stands when the menu opens: whether it can be chosen, and whether it is checked. */
+export interface ResolvedMenuItem {
   readonly item: MenuItem
   readonly enabled: boolean
   readonly checked: boolean | undefined
 }
+type Resolved = ResolvedMenuItem
 
 interface OpenMenu {
   readonly id: string
@@ -93,7 +96,39 @@ interface OpenMenu {
 }
 
 const read = (flag: Flag | undefined) => (typeof flag === 'function' ? flag() : flag)
-const selectable = (r: Resolved) => r.enabled && (r.item.type === 'command' || r.item.type === 'action')
+
+/** Can this item be moved to and chosen: an enabled command or action, not a separator or header. */
+export const selectable = (r: Resolved) => r.enabled && (r.item.type === 'command' || r.item.type === 'action')
+
+/** Items as they stand now: commands ask the responder chain whether anything would handle them. */
+export const resolveMenuItems = (desk: Desk | null, items: readonly MenuItem[]): Resolved[] =>
+  items.map(item => ({
+    item,
+    enabled:
+      item.type === 'command' ? canPerform(desk, item.command)
+      : item.type === 'action' ? !read(item.disabled)
+      : false,
+    checked: item.type === 'command' || item.type === 'action' ? read(item.checked) : undefined,
+  }))
+
+/** The next selectable item from `from`, wrapping; -1 when there is none. */
+export const stepMenu = (items: readonly Resolved[], from: number, delta: 1 | -1) => {
+  for (let i = 1; i <= items.length; i++) {
+    const index = (from + delta * i + items.length * 2) % items.length
+    if (items[index] && selectable(items[index])) return index
+  }
+  return -1
+}
+
+/** The next selectable item whose label starts with `letter`, after `from`; -1 when there is none. */
+export const typeAhead = (items: readonly Resolved[], from: number, letter: string) => {
+  for (let i = 1; i <= items.length; i++) {
+    const index = (from + i) % items.length
+    const r = items[index]
+    if (r && selectable(r) && 'label' in r.item && r.item.label.toLowerCase().startsWith(letter.toLowerCase())) return index
+  }
+  return -1
+}
 
 export function MenuBar({ menus, status = [], leading, trailing, label = 'Menu bar', shortcuts = true, className }: MenuBarProps) {
   const desk = useDesk()
@@ -107,23 +142,8 @@ export function MenuBar({ menus, status = [], leading, trailing, label = 'Menu b
   const baseId = useId()
   const apple = useMemo(isApplePlatform, [])
 
-  const resolve = (menu: Menu): Resolved[] =>
-    (typeof menu.items === 'function' ? menu.items() : menu.items).map(item => ({
-      item,
-      enabled:
-        item.type === 'command' ? canPerform(desk, item.command)
-        : item.type === 'action' ? !read(item.disabled)
-        : false,
-      checked: item.type === 'command' || item.type === 'action' ? read(item.checked) : undefined,
-    }))
-
-  const step = (items: readonly Resolved[], from: number, delta: 1 | -1) => {
-    for (let i = 1; i <= items.length; i++) {
-      const index = (from + delta * i + items.length * 2) % items.length
-      if (items[index] && selectable(items[index])) return index
-    }
-    return -1
-  }
+  const resolve = (menu: Menu): Resolved[] => resolveMenuItems(desk, typeof menu.items === 'function' ? menu.items() : menu.items)
+  const step = stepMenu
 
   const openMenu = (index: number, via: OpenMenu['via'], active: 'first' | 'last' | 'none' = 'first') => {
     const menu = all[(index + all.length) % all.length]
@@ -178,17 +198,10 @@ export function MenuBar({ menus, status = [], leading, trailing, label = 'Menu b
           case 'Tab': close(false); return false
           default: {
             if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return false
-            const letter = event.key.toLowerCase()
-            const start = open.active
-            for (let i = 1; i <= open.items.length; i++) {
-              const index = (start + i) % open.items.length
-              const r = open.items[index]
-              if (r && selectable(r) && 'label' in r.item && r.item.label.toLowerCase().startsWith(letter)) {
-                setOpen({ ...open, active: index })
-                return true
-              }
-            }
-            return false
+            const index = typeAhead(open.items, open.active, event.key)
+            if (index < 0) return false
+            setOpen({ ...open, active: index })
+            return true
           }
         }
       })()

package/src/react/context.tsx

@@ -32,6 +32,9 @@ export function DeskProvider({ desk, options, children }: DeskProviderProps) {
   )
 }
 
+/** The desk above, or null outside one: for parts that work on a desk and off one, like a context menu. */
+export const useOptionalDesk = (): Desk | null => useContext(DeskContext)
+
 export function useDesk(): Desk {
   const desk = useContext(DeskContext)
   if (!desk) throw new Error('useDesk must be used inside a <DeskProvider>')

package/src/react/contextMenu.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { perform } from '../core/commands.js'
+import { formatShortcut, isApplePlatform } from '../core/shortcuts.js'
+import { useOptionalDesk } from './context.js'
+import { resolveMenuItems, selectable, stepMenu, typeAhead } from './MenuBar.js'
+import type { MenuItem, ResolvedMenuItem } from './MenuBar.js'
+
+/*
+ * The menu a right-click opens: the things you can do to this one item, where the pointer is.
+ *
+ * The keyboard reaches it too — the Menu key, or Shift+F10 — and it opens at the item instead.
+ * It uses the menu bar's items, so a command in a context menu asks the responder chain whether it
+ * is enabled exactly as a menu-bar command does, and runs from the item that was right-clicked.
+ */
+
+export interface ContextMenuOptions {
+  /** The items, built as the menu opens: what is possible can depend on the item right now. */
+  readonly items: () => readonly MenuItem[]
+  /** Names the menu for assistive technology: "Actions for Ride Log". */
+  readonly label: string
+  readonly disabled?: boolean
+}
+
+export interface ContextMenuTargetProps {
+  readonly onContextMenu: (event: ReactMouseEvent<HTMLElement>) => void
+  readonly onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => void
+}
+
+export interface ContextMenuResult {
+  /** Spread on the thing that has the menu. Chain your own `onKeyDown` through `target.onKeyDown`. */
+  readonly target: ContextMenuTargetProps
+  /** Render it anywhere: it draws into the document body. */
+  readonly menu: ReactNode
+  readonly open: boolean
+}
+
+interface OpenState {
+  readonly x: number
+  readonly y: number
+  readonly items: readonly ResolvedMenuItem[]
+  readonly active: number
+  readonly opener: HTMLElement
+}
+
+export function useContextMenu({ items, label, disabled }: ContextMenuOptions): ContextMenuResult {
+  const desk = useOptionalDesk()
+  const [state, setState] = useState<OpenState | null>(null)
+  const panel = useRef<HTMLDivElement>(null)
+  const menuId = useId()
+  const apple = isApplePlatform()
+
+  const show = useCallback(
+    (x: number, y: number, opener: HTMLElement, activeFirst: boolean) => {
+      const resolved = resolveMenuItems(desk, items())
+      if (!resolved.length) return
+      setState({ x, y, items: resolved, active: activeFirst ? stepMenu(resolved, -1, 1) : -1, opener })
+    },
+    [desk, items],
+  )
+
+  const close = useCallback((returnFocus: boolean) => {
+    setState(current => {
+      if (current && returnFocus && current.opener.isConnected) current.opener.focus({ preventScroll: true })
+      return null
+    })
+  }, [])
+
+  const choose = (resolved: ResolvedMenuItem | undefined) => {
+    if (!state || !resolved || !selectable(resolved)) return
+    const { opener } = state
+    setState(null)
+    // Back to the item first, so a command starts its search for a responder from there.
+    if (opener.isConnected) opener.focus({ preventScroll: true })
+    const { item } = resolved
+    if (item.type === 'command') perform(desk, item.command, item.args)
+    else if (item.type === 'action') item.onSelect()
+  }
+
+  const target: ContextMenuTargetProps = {
+    onContextMenu: event => {
+      if (disabled) return
+      event.preventDefault()
+      const opener = event.currentTarget
+      opener.focus({ preventScroll: true })
+      show(event.clientX, event.clientY, opener, false)
+    },
+    onKeyDown: event => {
+      if (disabled) return
+      if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) {
+        event.preventDefault()
+        const box = event.currentTarget.getBoundingClientRect()
+        show(box.left + 8, box.bottom - 4, event.currentTarget, true)
+      }
+    },
+  }
+
+  // Keep it on screen: measured once it exists, then moved in from the edges it would cross.
+  useLayoutEffect(() => {
+    const element = panel.current
+    if (!state || !element) return
+    const { width, height } = element.getBoundingClientRect()
+    const x = Math.max(8, Math.min(state.x, innerWidth - width - 8))
+    const y = Math.max(8, state.y + height > innerHeight - 8 ? state.y - height : state.y)
+    element.style.left = `${x}px`
+    element.style.top = `${y}px`
+    element.focus({ preventScroll: true })
+  }, [state])
+
+  useEffect(() => {
+    if (!state) return
+    const onPointerDown = (event: PointerEvent) => {
+      if (!panel.current?.contains(event.target as Node)) close(false)
+    }
+    const onAway = () => close(false)
+    document.addEventListener('pointerdown', onPointerDown, true)
+    addEventListener('blur', onAway)
+    addEventListener('resize', onAway)
+    document.addEventListener('scroll', onAway, true)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      removeEventListener('blur', onAway)
+      removeEventListener('resize', onAway)
+      document.removeEventListener('scroll', onAway, true)
+    }
+  }, [state, close])
+
+  const onMenuKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (!state) return
+    const move = (active: number) => setState({ ...state, active })
+    switch (event.key) {
+      case 'ArrowDown': move(stepMenu(state.items, state.active, 1)); break
+      case 'ArrowUp': move(stepMenu(state.items, state.active < 0 ? state.items.length : state.active, -1)); break
+      case 'Home': move(stepMenu(state.items, -1, 1)); break
+      case 'End': move(stepMenu(state.items, state.items.length, -1)); break
+      case 'Enter':
+      case ' ': choose(state.items[state.active]); break
+      case 'Escape': close(true); break
+      case 'Tab': close(true); break
+      default: {
+        if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return
+        const index = typeAhead(state.items, state.active, event.key)
+        if (index < 0) return
+        move(index)
+      }
+    }
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  const menu =
+    state && typeof document !== 'undefined'
+      ? createPortal(
+          <div
+            ref={panel}
+            role="menu"
+            aria-label={label}
+            tabIndex={-1}
+            className="desk-menu desk-context-menu"
+            style={{ left: state.x, top: state.y }}
+            aria-activedescendant={state.active >= 0 ? `${menuId}-${state.active}` : undefined}
+            onKeyDown={onMenuKeyDown}
+            onContextMenu={event => event.preventDefault()}
+          >
+            {state.items.map((resolved, i) => {
+              const { item } = resolved
+              if (item.type === 'separator') return <div key={i} role="separator" className="desk-menu-separator" />
+              if (item.type === 'header') return <div key={i} role="presentation" className="desk-menu-header">{item.label}</div>
+              const checkable = resolved.checked !== undefined
+              return (
+                <div
+                  key={i}
+                  id={`${menuId}-${i}`}
+                  role={checkable ? 'menuitemcheckbox' : 'menuitem'}
+                  aria-checked={checkable ? resolved.checked : undefined}
+                  aria-disabled={!resolved.enabled || undefined}
+                  className="desk-menu-item"
+                  data-active={i === state.active || undefined}
+                  onPointerMove={() => {
+                    if (state.active !== i && selectable(resolved)) setState({ ...state, active: i })
+                  }}
+                  onClick={() => choose(resolved)}
+                >
+                  <span className="desk-menu-check" aria-hidden="true">{resolved.checked ? '✓' : ''}</span>
+                  <span className="desk-menu-label">{item.label}</span>
+                  {item.detail && <span className="desk-menu-detail">{item.detail}</span>}
+                  {item.shortcut && <kbd className="desk-menu-shortcut">{formatShortcut(item.shortcut, apple)}</kbd>}
+                </div>
+              )
+            })}
+          </div>,
+          document.body,
+        )
+      : null
+
+  return { target, menu, open: state !== null }
+}

package/src/react/iconView.tsx

@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState } from 'react'
+import type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react'
+import { useContextMenu } from './contextMenu.js'
+import { useDragSource } from './dnd.js'
+import type { MenuItem } from './MenuBar.js'
+
+/*
+ * Things shown as icons, the way a Finder window shows files: a name under each, arranged in rows
+ * that follow the width of the window.
+ *
+ * Click selects and double-click opens, as a Finder does; `openOn="single"` opens on one click for
+ * a launcher, where selecting first would be a step nobody wants. The keyboard can do everything the
+ * pointer can: arrows move through the grid (up and down by a row, however many fit), Home and End
+ * go to the ends, typing a name jumps to it, Return opens, and the Menu key opens the item's menu.
+ */
+
+export interface IconViewItem {
+  readonly id: string
+  readonly label: string
+  readonly icon: ReactNode
+  /** A second line, muted: a kind, a scope, a size. */
+  readonly subtitle?: string
+  readonly badge?: ReactNode
+  readonly disabled?: boolean
+}
+
+export interface IconViewProps<T extends IconViewItem> {
+  readonly items: readonly T[]
+  /** Names the collection: "Apps". */
+  readonly label: string
+  readonly onOpen: (item: T) => void
+  /** `double` (the default): click selects, double-click or Return opens. `single`: a click opens. */
+  readonly openOn?: 'double' | 'single'
+  /** Controlled selection. Leave both out and the view keeps its own. */
+  readonly selected?: string | null
+  readonly onSelectionChange?: (id: string | null) => void
+  /** The item's context menu: what can be done to this one thing. */
+  readonly contextMenu?: (item: T) => readonly MenuItem[]
+  /** Lets an icon be picked up and carried, to the dock or into another window. */
+  readonly drag?: { readonly type: string; readonly payload: (item: T) => unknown }
+  /** Shown when there are no items. */
+  readonly empty?: ReactNode
+  readonly className?: string
+}
+
+export function IconView<T extends IconViewItem>({
+  items,
+  label,
+  onOpen,
+  openOn = 'double',
+  selected,
+  onSelectionChange,
+  contextMenu,
+  drag,
+  empty,
+  className,
+}: IconViewProps<T>) {
+  const [ownSelection, setOwnSelection] = useState<string | null>(null)
+  const current = selected !== undefined ? selected : ownSelection
+  const select = (id: string | null) => {
+    if (selected === undefined) setOwnSelection(id)
+    onSelectionChange?.(id)
+  }
+  const list = useRef<HTMLUListElement>(null)
+  const typed = useRef({ text: '', at: 0 })
+  const source = useDragSource<unknown>({ type: drag?.type ?? 'desk.icon', disabled: !drag })
+
+  // The one that takes Tab: the selected item, or the first.
+  const focusable = items.some(i => i.id === current) ? current : (items[0]?.id ?? null)
+
+  const cells = () => [...(list.current?.querySelectorAll<HTMLElement>('[data-icon-id]') ?? [])]
+
+  const focusAt = (index: number) => {
+    const all = cells()
+    const target = all[Math.max(0, Math.min(index, all.length - 1))]
+    if (!target) return
+    target.focus()
+    select(target.dataset.iconId ?? null)
+  }
+
+  // How many icons fit in a row right now: the ones that share the first one's top edge.
+  const columns = () => {
+    const all = cells()
+    const top = all[0]?.offsetTop
+    const count = all.filter(cell => cell.offsetTop === top).length
+    return Math.max(1, count)
+  }
+
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>) => {
+    const all = cells()
+    const index = all.findIndex(cell => cell === document.activeElement)
+    if (index < 0) return
+    const item = items[index]
+    switch (event.key) {
+      case 'ArrowRight': focusAt(index + 1); break
+      case 'ArrowLeft': focusAt(index - 1); break
+      case 'ArrowDown': focusAt(index + columns()); break
+      case 'ArrowUp': focusAt(index - columns()); break
+      case 'Home': focusAt(0); break
+      case 'End': focusAt(all.length - 1); break
+      case 'Enter':
+        if (item && !item.disabled) onOpen(item)
+        break
+      case ' ':
+        if (item) select(item.id)
+        break
+      default: {
+        if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return
+        // Typing a name finds it: letters typed close together build one search, as in a Finder.
+        const now = Date.now()
+        typed.current = { text: (now - typed.current.at < 700 ? typed.current.text : '') + event.key.toLowerCase(), at: now }
+        const search = typed.current.text
+        const order = [...items.slice(index + (search.length === 1 ? 1 : 0)), ...items.slice(0, index + (search.length === 1 ? 1 : 0))]
+        const found = order.find(i => i.label.toLowerCase().startsWith(search))
+        if (!found) return
+        focusAt(items.indexOf(found))
+      }
+    }
+    event.preventDefault()
+  }
+
+  // A selection that no longer exists is dropped, so Tab never lands nowhere.
+  useEffect(() => {
+    if (current && !items.some(i => i.id === current)) select(null)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, current])
+
+  if (!items.length) return <div className={['desk-icon-view-empty', className].filter(Boolean).join(' ')}>{empty}</div>
+
+  return (
+    <ul
+      ref={list}
+      role="listbox"
+      aria-label={label}
+      className={['desk-icon-view', className].filter(Boolean).join(' ')}
+      onKeyDown={onKeyDown}
+      onPointerDown={event => {
+        if (event.target === event.currentTarget) select(null)
+      }}
+    >
+      {items.map(item => (
+        <IconCell
+          key={item.id}
+          item={item}
+          selected={item.id === current}
+          tabbable={item.id === focusable}
+          openOn={openOn}
+          onSelect={() => select(item.id)}
+          onOpen={() => onOpen(item)}
+          menu={contextMenu ? () => contextMenu(item) : null}
+          dragProps={drag ? source.dragProps(drag.payload(item), <span className="desk-icon-drag">{item.icon}</span>) : null}
+        />
+      ))}
+    </ul>
+  )
+}
+
+interface IconCellProps {
+  readonly item: IconViewItem
+  readonly selected: boolean
+  readonly tabbable: boolean
+  readonly openOn: 'double' | 'single'
+  readonly onSelect: () => void
+  readonly onOpen: () => void
+  readonly menu: (() => readonly MenuItem[]) | null
+  readonly dragProps: ReturnType<ReturnType<typeof useDragSource>['dragProps']> | null
+}
+
+function IconCell({ item, selected, tabbable, openOn, onSelect, onOpen, menu, dragProps }: IconCellProps) {
+  const context = useContextMenu({ label: `Actions for ${item.label}`, items: menu ?? (() => []), disabled: !menu })
+  // The menu sits beside the cell, not in it: React bubbles a portal's events through its owner,
+  // and a click on "Open" must not also count as a click on the icon.
+  return (
+    <>
+    <li
+      role="option"
+      aria-selected={selected}
+      aria-disabled={item.disabled || undefined}
+      tabIndex={tabbable ? 0 : -1}
+      data-icon-id={item.id}
+      className="desk-icon-cell"
+      {...(dragProps ?? {})}
+      onClick={() => {
+        onSelect()
+        if (openOn === 'single' && !item.disabled) onOpen()
+      }}
+      onDoubleClick={() => {
+        if (openOn === 'double' && !item.disabled) onOpen()
+      }}
+      onContextMenu={event => {
+        onSelect()
+        context.target.onContextMenu(event)
+      }}
+      onKeyDown={context.target.onKeyDown}
+    >
+      <span className="desk-icon-glyph" aria-hidden="true">
+        {item.icon}
+        {item.badge != null && <span className="desk-icon-badge">{item.badge}</span>}
+      </span>
+      <span className="desk-icon-label">{item.label}</span>
+      {item.subtitle && <span className="desk-icon-subtitle">{item.subtitle}</span>}
+    </li>
+    {context.menu}
+    </>
+  )
+}