Mission Control

Press F3 and every open window in the current space spreads into scaled preview cards, with a Spaces bar across the top. Click a card and that window comes to the front; click empty space or press Esc and you return to the desktop unchanged. (Ctrl + ↑, the macOS overview chord, is claimed by the host OS in a browser, so it is left to maximize and F3 is the in-app trigger.)

Open all three apps, then press F3 Open in new tab ↗

Previews

Each card is a scaled, live re-render of the real window: its title bar (traffic lights and title) plus the app’s own content, with the app name on a readable label below. The preview mounts a second, inert copy of the content while Mission Control is open, so it shows the real UI (though not unsaved live state), and an error boundary keeps a misbehaving preview from taking the overlay down.

Windows are fit into a shared size envelope, so a small utility and a large document end up at comparable, recognizable sizes. Each card keeps its window’s aspect ratio.

Spaces

The bar along the top shows every workspace as a desktop thumbnail, with miniature outlines of the windows that live in each one. The active space is highlighted. Click a thumbnail to switch spaces (Mission Control stays open and shows that space’s windows), or the + to add a space. Mission Control shows only the active space’s windows, matching macOS.

Behavior

Action	Effect
`F3`	Toggle Mission Control
`←` `→` `↑` `↓`	Move the selection between windows
`Enter` / `Space`	Open the selected window
Click a card	Bring that window to the front and dismiss
Click a space	Switch to that space
Click empty space	Dismiss without changing focus
`Esc`	Dismiss without changing focus

Minimized windows are not shown; they live in the dock. Use the dock or Spotlight to bring one back. The spread, the scrim, and the selection highlight honor prefers-reduced-motion and read from the active theme’s tokens, so Mission Control looks right on light and dark themes alike.

Composition

The component is mounted by <Desktop> by default. Drop down to <DesktopProvider> if you want to swap it for a custom implementation:

<DesktopProvider apps={apps} theme={theme}>
  <Wallpaper />
  <MenuBar />
  <WindowLayer />
  <Dock />
  <MyOwnMissionControl />
  {/* default surfaces you do want */}
</DesktopProvider>

Accessibility

The overlay is role="dialog" aria-label="Mission Control".
Each card carries a transparent overlay <button> labelled with the window name, so it is keyboard- and screen-reader-reachable while the scaled preview itself is inert. The card is a div, not a button, because the live preview can contain its own buttons and a button cannot nest a button.
The Spaces bar is a role="tablist" of space buttons.
Arrow keys move the selection, Enter or Space opens it, and both Esc and a click outside dismiss without changing focus.