Skip to main content

Window controls overlay

import * as mod from "jsr:@nzip/lofi/recipes/window-controls-overlay";

Opt-in geometry observation for desktop Window Controls Overlay layouts.

observeWindowControlsOverlay​

function

function observeWindowControlsOverlay(options: ObserveWindowControlsOverlayOptions): WindowControlsOverlayObserver

Observe the experimental Window Controls Overlay geometry surface.

CSS titlebar-area-* environment variables should own collision-free layout. This observer is for state that genuinely needs geometry changes. Unsupported browsers retain the ordinary standalone header and receive no callback.

ObserveWindowControlsOverlayOptions​

type

type ObserveWindowControlsOverlayOptions = {
  client?: WindowControlsOverlayClient;
  onGeometry(geometry: WindowControlsOverlayGeometry): void;
};

Options for observing overlay visibility and geometry changes.

WindowControlsOverlayClient​

type

type WindowControlsOverlayClient = {
  readonly visible: boolean;
  getTitlebarAreaRect(): Pick<DOMRectReadOnly, "x" | "y" | "width" | "height">;
  addEventListener(type: "geometrychange", listener: EventListener): void;
  removeEventListener(type: "geometrychange", listener: EventListener): void;
};

Minimal browser surface consumed by this recipe.

WindowControlsOverlayGeometry​

type

type WindowControlsOverlayGeometry = {
  readonly visible: boolean;
  readonly titlebarArea: { readonly x: number; readonly y: number; readonly width: number; readonly height: number };
};

A value-only copy of the titlebar area available to application content.

WindowControlsOverlayObserver​

type

type WindowControlsOverlayObserver = {
  readonly supported: boolean;
  dispose(): void;
};

Disposable result from installing the geometry observer.