Device safe area insets (for iOS and Android)

## What problem does this solve or what need does it fill?

On most modern mobile devices the display has rounded corners and there is a notch at the top of the screen. UI and other elements need to often not be drawn in awkward positions due to these.

## What solution would you like?

A built-in resource `SafeAreaInsets` with pixel inset values for `top`, `right`, `bottom`, and `left`. It should use the platform specific APIs to get the values and it must update the values e.g. when the device is rotated (but Android has more cases that require the values to also be updated so maybe they should just be queried each frame).

Even on devices which don't have any concept of safe area insets, the resource should exist and just have default values as zero.

## What alternative(s) have you considered?

1. Hard coded values, which breaks quickly because of the very high number of different kinds of devices in the market.
2. Building it myself.

## Additional context

- https://developer.apple.com/documentation/uikit/uiview/safeareainsets
- https://developer.apple.com/documentation/swiftui/geometryproxy/safeareainsets
- https://developer.android.com/develop/ui/compose/system/insets
- https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.foundation.layout.WindowInsets.Companion).safeContent()

Start by reading the linked Apple UIKit/SwiftUI and Android WindowInsets documentation to compare the platform APIs and update behavior on rotation. Define the SafeAreaInsets resource with top, right, bottom, and left pixel values, ensure zero defaults on unsupported devices, and verify that values can update for the Android cases described.

Written by the indexing model from the issue text.