# browser-screen

Wraps `window.screen` as one global atom, synced on `resize`, `orientationchange`, and DPR changes.

## Install

```bash
bun add @valdres/browser-screen
```

## Live example

▶ Live example: [https://valdres.dev/angular/plugins/browser-screen](https://valdres.dev/angular/plugins/browser-screen)

## Usage

```ts
import { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { screenAtom } from "@valdres/browser-screen"

@Component({
    selector: "screen-resolution",
    template: `{{ s().width }} × {{ s().height }}`,
})
export class ScreenResolution {
    s = injectValue(screenAtom) // Signal<ScreenInfo>
}
```

## Exports

| Export       | Kind             | Type                                                                                                                      |
| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `screenAtom` | atom (read-only) | `ScreenInfo`                                                                                                              |
| `ScreenInfo` | type             | `{ width, height, availWidth, availHeight, colorDepth, pixelDepth, devicePixelRatio, orientationType, orientationAngle }` |

All fields are `number` except `orientationType: OrientationType`. Outside the browser the atom returns a fallback (zeros for dimensions; `colorDepth`/`pixelDepth` 24, `devicePixelRatio` 1, `orientationType: "landscape-primary"`).

The browser subscription starts on the first subscriber across all stores and stops when the last one leaves.