Window

You will rarely instantiate <Window> directly. The WindowLayer compositor renders one per entry in the window manager’s state, and the window manager opens them via openWindow(...). The component is exported for the rare case where you compose your own layer.

A focused window: drag, resize, minimize Open in new tab ↗

Import

import { Window } from "@react-ui-os/desktop";
import type { OpenWindow } from "@react-ui-os/core";

Props

Prop	Type	Description
`win`	`OpenWindow`	The window manager’s record for this instance. Carries id, payload (app or system), state, bounds, and z-index.

Interaction model

Gesture	Behavior
Drag title bar	Moves the window. Transform written to DOM during the gesture; React state on `pointerup`
Double-click title bar	Toggles maximize / restore
Drag an edge	Resizes along that axis
Drag a corner	Resizes along both axes
Click the close control	Plays the close animation then dispatches `closeWindow(id)`
Click the minimize control	Plays the genie minimize toward the matching dock tile
Click the maximize control	Toggles maximize / restore
Click anywhere on the window	Focuses it (z-bumps and updates `focusedId`)
Escape (when focused and maximized)	Restores to the previous bounds

Window controls

The control cluster follows theme.chrome.windowControls. The behavior above is identical in every register; only the look and placement change.

Value	Reads as	Layout
`"traffic-lights"`	macOS	Red / yellow / green dots on the left, title centered.
`"windows"`	Windows 11	Minimize / maximize-restore / close caption buttons flush on the right (close turns red on hover), title left-aligned.
`"gnome"`	GNOME / Adwaita	Minimize / maximize-restore / close as round symbolic buttons on the right (neutral hover), title left-aligned.
`"minimal"`	A close glyph	A single close on the right, title left-aligned.

The focused window’s accent top-edge highlight is drawn in every register.

Animations

Phase	Duration	Easing
Open	`theme.motion.windowOpenDurationMs`	`theme.motion.windowOpenEasing`
Close	Same as open, reversed	Same
Minimize	`theme.motion.genieDurationMs`	`theme.motion.genieEasing`

Open and close scale the window between full size and theme.motion.windowOpenScale (optional, default 0.92, a subtle pop) while fading, pivoting on theme.motion.windowOpenOrigin (optional, default center). macOS and Windows grow a new window from its center; the Ubuntu theme sets the origin to its bottom edge so the window rises into place, the way GNOME maps a normal window (set_pivot_point(0.5, 1.0)). The origin is applied only while opening, so close and minimize keep their own pivots.

The minimize animation reads the matching dock tile’s DOMRect at gesture time, sets two CSS custom properties (--genie-dx, --genie-dy) on the window element, and plays a keyframe that scales it toward those coordinates. Each window flies to its own dock tile.

Performance

Drag and resize avoid React re-renders entirely during the gesture. The pointer handler reads bounds from a ref, writes transform directly to the DOM element, and only dispatches setBounds on pointerup. With four windows open and each containing a live preview, drags stay at 60 fps.

Accessibility

The root is a <div role="region" aria-label="<Name> window">.
The window controls are <button> elements with aria-label of "Close", "Minimize", and "Maximize" (or "Restore" when the window is maximized), in whichever register the theme selects.
Title-bar drag is pointer-only; keyboard users move and resize windows via the shortcuts handled by KeyboardShortcuts.