Appearance
Browser API
Signatures for @idlekitjs/browser. Concepts: Browser overview.
pageLifecycle
ts
import { pageLifecycle } from "@idlekitjs/browser/page-lifecycle";
function pageLifecycle<T extends object>(): Extension<T>;No options. Tab hidden → engine.pause(). Tab visible → events.emit("resume", elapsedMs) then engine.resume(). No-op without document (SSR/Node-safe); the single visibilitychange listener is removed in teardown. Usage: Page lifecycle.
createRafScheduler
ts
import { createRafScheduler } from "@idlekitjs/browser/raf-scheduler";
function createRafScheduler(): FrameScheduler;The browser frame driver: requestAnimationFrame-based implementation of the core's FrameScheduler. Pass it to createEngine:
ts
const engine = createEngine<State>({ initialState, renderer, scheduler: createRafScheduler() });The rAF timestamp is the loop's clock — core never calls performance.now. It is not tied to the DOM renderer: any browser-rendered view (DOM, canvas, React, ...) can drive the engine with it.
Screen helpers
ts
import { devicePixelRatio, cssToDevicePx, deviceToCssPx } from "@idlekitjs/browser/screen";CSS ↔ physical pixel conversion, safe outside the browser (ratio falls back to 1 without window):
ts
devicePixelRatio(): number; // physical px per CSS px (>= 1)
cssToDevicePx(cssPx: number): number;
deviceToCssPx(devicePx: number): number;Useful to decide whether a sub-pixel change is visible on the current screen (e.g. skipping imperceptible progress-bar updates on low-DPI displays).