@liberation-data/desk 0.1.0 → 0.2.0

package/src/desk.css

@@ -216,6 +216,23 @@
   color: var(--desk-muted);
 }
 
+.desk-window-note {
+  margin: 0 0 0 auto;
+  min-width: 0;
+  /* The title is what the window IS; the note is what it is looking at. In a narrow window the note
+     gives up its room first, and is cut before the title is. */
+  flex: 0 999 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  color: var(--desk-muted);
+}
+
+.desk-window-note + .desk-window-actions {
+  margin-left: var(--desk-space-1);
+}
+
 .desk-window-actions {
   margin-left: auto;
   display: flex;
@@ -372,7 +389,8 @@
   transition: transform .18s var(--desk-ease), margin .18s var(--desk-ease);
 }
 
-.desk-dock-item:disabled {
+.desk-dock-item:disabled,
+.desk-dock-item[aria-disabled="true"] {
   opacity: .45;
   cursor: not-allowed;
 }
@@ -658,6 +676,13 @@
   height: 15px;
 }
 
+/* A context menu is the same menu, opened where the pointer is rather than under a title. */
+.desk-context-menu {
+  position: fixed;
+  z-index: 1300;
+  outline: none;
+}
+
 .desk-menubar-slot[data-align="end"] .desk-menu {
   left: auto;
   right: 0;
@@ -2548,3 +2573,123 @@
   border: 0;
   background: var(--desk-surface);
 }
+
+/* Icon view: a Finder's icons, in rows that follow the window's width. */
+.desk-icon-view {
+  list-style: none;
+  margin: 0;
+  padding: 12px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  align-content: start;
+  gap: 8px;
+}
+
+.desk-icon-cell {
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 4px;
+  padding: 10px 6px;
+  border-radius: 10px;
+  text-align: center;
+  cursor: default;
+  user-select: none;
+  outline: none;
+}
+
+.desk-icon-cell[aria-disabled="true"] {
+  opacity: .45;
+}
+
+.desk-icon-cell:focus-visible {
+  box-shadow: 0 0 0 2px var(--desk-accent);
+}
+
+.desk-icon-glyph {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  border: 1px solid var(--desk-rule);
+  background: var(--desk-dock-icon);
+  color: var(--desk-ink);
+}
+
+.desk-icon-glyph > svg,
+.desk-icon-glyph > img {
+  width: 55%;
+  height: 55%;
+  object-fit: contain;
+}
+
+.desk-icon-badge {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--desk-accent);
+  color: #fff;
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.desk-icon-label {
+  max-width: 100%;
+  padding: 1px 6px;
+  border-radius: 5px;
+  font-size: 12.5px;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.desk-icon-subtitle {
+  max-width: 100%;
+  font-size: 11px;
+  color: var(--desk-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.desk-icon-cell[aria-selected="true"] .desk-icon-glyph {
+  background: color-mix(in srgb, var(--desk-accent) 16%, transparent);
+}
+
+.desk-icon-cell[aria-selected="true"] .desk-icon-label {
+  background: var(--desk-accent);
+  color: #fff;
+}
+
+.desk-icon-view-empty {
+  display: grid;
+  place-items: center;
+  padding: 32px 16px;
+  color: var(--desk-muted);
+  text-align: center;
+}
+
+.desk-icon-drag {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+}
+
+/* Something carried to the dock: the dock lights up, and a kept item shows where it would go in front. */
+.desk-dock-item[data-desk-drop][data-ready] {
+  outline: none;
+  background: var(--desk-dock-icon);
+}
+
+.desk-dock-item[data-desk-drop][data-over] {
+  box-shadow: -6px 0 0 -2px var(--desk-accent);
+}

package/src/react/Desktop.tsx

@@ -13,6 +13,12 @@ export type DeskLayout = 'desktop' | 'fullscreen'
 export interface DesktopProps {
   readonly renderWindow: (id: WindowId) => ReactNode
   readonly title: (id: WindowId) => ReactNode
+  /**
+   * A quiet line on the trailing side of the title bar, saying what this window is looking at: the
+   * request behind it, the file it is editing, how many rows it found. Text, not a control — it
+   * gives way to the actions and disappears before the title does when the window is narrow.
+   */
+  readonly note?: (id: WindowId) => ReactNode
   /** Window-wide controls on the trailing side of the title bar. One or two; more belongs in a toolbar. */
   readonly actions?: (id: WindowId) => ReactNode
   /** Shown when no window is open. */
@@ -70,7 +76,7 @@ const halfFrame = (stage: HTMLElement, side: 'start' | 'end'): Frame => {
   return { x: side === 'start' ? area.x : area.x + width + area.gap, y: area.y, width, height: area.height }
 }
 
-export function Desktop({ renderWindow, title, actions, empty, loading, failed, layout = 'auto', className }: DesktopProps) {
+export function Desktop({ renderWindow, title, note, actions, empty, loading, failed, layout = 'auto', className }: DesktopProps) {
   const desk = useDesk()
   const state = useDeskState()
   const stage = useRef<HTMLDivElement>(null)
@@ -150,6 +156,7 @@ export function Desktop({ renderWindow, title, actions, empty, loading, failed,
           // One window at a time: the rest stay mounted, keeping their state, and simply wait offstage.
           hidden={mode === 'fullscreen' && window.id !== focused}
           title={title(window.id)}
+          note={note?.(window.id)}
           actions={actions?.(window.id)}
         >
           {/* Memoised on the id and the render function: moving or focusing a window
@@ -184,6 +191,7 @@ interface WindowViewProps {
   readonly depth: number
   readonly focused: boolean
   readonly title: ReactNode
+  readonly note?: ReactNode
   readonly actions?: ReactNode
   readonly children: ReactNode
 }
@@ -210,7 +218,7 @@ function reshape(gesture: Gesture, origin: Frame, dx: number, dy: number): Frame
   }
 }
 
-function WindowView({ window, layout, hidden, depth, focused, title, actions, children }: WindowViewProps) {
+function WindowView({ window, layout, hidden, depth, focused, title, note, actions, children }: WindowViewProps) {
   const desk = useDesk()
   // While dragging, the frame lives here and commits once on release, so a drag
   // re-renders one window rather than notifying every subscriber per pixel.
@@ -331,6 +339,7 @@ function WindowView({ window, layout, hidden, depth, focused, title, actions, ch
           <h2 id={titleId} className="desk-title">
             {title}
           </h2>
+          {note != null && note !== false && <p className="desk-window-note">{note}</p>}
           {actions && <div className="desk-window-actions">{actions}</div>}
         </header>
         <div className="desk-body">{children}</div>

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 }
+}