Dock

The dock renders one tile per registered app. Hovering magnifies the icon under the cursor and falls its neighbors off, the macOS fisheye, and shows the app name in a label above it. Clicking a tile toggles the app’s window: open if not running, focus + restore if minimized or unfocused, otherwise minimize. Hidden when theme.chrome.dockPosition is "hidden".

Hover to magnify the icons; the dots reflect focus Open in new tab ↗

Import

import { Dock, DOCK_HEIGHT, DOCK_WIDTH, getDockTileRect } from "@react-ui-os/desktop";

Props

None. The dock reads everything it needs from useApps() and useTheme().

Position

The dock honors theme.chrome.dockPosition:

Value	Layout
`"bottom"`	Horizontal pill centered at the bottom edge; magnified icons grow upward.
`"left"`	Vertical rail centered on the left edge; magnified icons grow inward.
`"hidden"`	Returns `null`. Apps are reachable via Spotlight, keyboard shortcuts, or `openWindow`.

Form

theme.chrome.dockStyle chooses the dock’s shape:

Value	Shape
`"floating"`	The macOS dock: a centered rounded pill hovering above the edge with a gap, accent-gradient squircle tiles, a dot indicator under running apps. The default.
`"bar"`	The Windows taskbar / GNOME panel: a flat bar flush to the edge, spanning the full width (bottom) or height (left), square corners, flat brand-colored icon buttons, and an accent underline under running apps (wider for the focused app). 48px thick, matching the Windows 11 taskbar.

The work area reserves the dock’s thickness either way, so maximized windows stop above a taskbar just as they stop above a floating dock. The Windows theme ships "bar"; every other theme uses "floating".

Alignment

theme.chrome.dockAlign sets where a "bar" dock packs its app icons along its long axis. The floating pill ignores it (the pill always hugs its icons).

Value	Packs icons
`"center"`	Centered. The macOS and Windows 11 placement. The default.
`"start"`	At the top (left dock) or left (bottom dock), launcher pinned at the far end. The GNOME / Ubuntu and Windows 10 placement.
`"end"`	At the far end.

A non-centered run is inset so it clears the launcher and tray at the edges. Windows 11 exposes the same lever as “Taskbar alignment”; the Ubuntu theme ships "start", and both the Ubuntu and Windows themes expose it as a Settings select.

Magnification

Hovering tracks the cursor and magnifies the icon beneath it, with its neighbors falling off smoothly over a fixed influence radius, like the macOS dock fisheye. The panel’s cross-axis is pinned so magnified icons overflow above (or beside) it rather than ballooning the panel, and the dock makes room by widening. The app name shows in a label centered above the magnified icon.

Each tile’s size eases toward a target derived from the cursor’s distance to that tile’s resting center (anchored to the dock center, so there is no layout-measurement feedback). The easing has no overshoot, the overdamped-spring character of the macOS dock, so nothing snaps. The values follow the common macOS approximation (a 110 px radius and a 2.25x peak), kept gentler here at 1.5x of a 56 px base tile.

The peak is the theme.motion.dockMagnification token. Set it to 1 to turn the fisheye off entirely, the register a Windows taskbar or GNOME dash uses; the Windows theme ships it that way. The hover label still appears, only the growth stops.

Tile appearance

Each tile renders the app’s accent as a linear gradient with a top sheen. The library accepts three optional visual hooks per app:

Field	Used by tile
`app.iconArt`	A subject illustration painted on top of the gradient. Best for distinctive identities.
`app.icon`	A small Lucide-style icon component, fallback when `iconArt` is absent.
`app.name`	Initial letter shown if neither icon is provided.

Indicator dot

A small dot under (bottom dock) or beside (left dock) the tile reflects state:

Hidden when the app is not open
Dim when open but unfocused (or minimized)
Bright (using theme.palette.textPrimary) when focused

Helper: `getDockTileRect`

import { getDockTileRect } from "@react-ui-os/desktop";

const rect = getDockTileRect("notes");
// → DOMRect | null

Returns the live bounding rect of the named dock tile. Used internally by the minimize-genie animation; consumers can use it to align tooltips, badges, or “fly-to-dock” effects.

Exports

Export	Description
`DOCK_HEIGHT`	Footprint when docked at the bottom (default 76 px). Useful for `position: fixed` layouts that need to clear it.
`DOCK_WIDTH`	Footprint when docked on the left. Same purpose.