@erkamyaman/capacitor-foldable 8.1.0 → 8.3.0

package/ErkamyamanCapacitorFoldable.podspec

@@ -11,6 +11,7 @@ Pod::Spec.new do |s|
   s.author = package['author']
   s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
   s.source_files = 'ios/Sources/**/*.{swift,h,m,c,cc,mm,cpp}'
+  s.resource_bundles = { 'ErkamyamanCapacitorFoldablePrivacy' => ['ios/Sources/FoldablePlugin/Resources/PrivacyInfo.xcprivacy'] }
   s.ios.deployment_target = '14.0'
   s.dependency 'Capacitor'
   s.swift_version = '5.1'

package/Package.swift

@@ -19,7 +19,8 @@ let package = Package(
                 .product(name: "Capacitor", package: "capacitor-swift-pm"),
                 .product(name: "Cordova", package: "capacitor-swift-pm")
             ],
-            path: "ios/Sources/FoldablePlugin"),
+            path: "ios/Sources/FoldablePlugin",
+            resources: [.copy("Resources/PrivacyInfo.xcprivacy")]),
         .testTarget(
             name: "FoldablePluginTests",
             dependencies: ["FoldablePlugin"],

package/README.md

@@ -53,6 +53,8 @@ Web views already resize with the window, so a responsive layout that pads with
 - **Where iPhone Duo puts native bars**, so your HTML tab bar can follow. For Ionic's `ion-tabs` there's a ready-made stylesheet, plus a fix for the tab bar disappearing when you fold.
 - **The outer display on Android foldables**: rear display and dual screen.
 
+Google's [adaptive app quality guidelines](https://developer.android.com/develop/adaptive-apps/quality-guidelines/adaptive-app-quality) put window size classes and posture support in Tier 1, and Apple's [iPhone Duo guidance](https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo) asks for layouts that adapt to the fold rather than to a device. This plugin reports what both checklists are about.
+
 ## Installation
 
 ```bash
@@ -96,6 +98,7 @@ window.viewport.segments; // two DOMRects when the fold splits the web view
 | `@media (vertical-viewport-segments: 2)` | `.vertical-viewport-segments-2` |
 | `env(viewport-segment-width 0 0)` | `var(--viewport-segment-width-0-0)` |
 | Native bars moved to the side (iPhone Duo) | `.vertical-bars-leading`, `.vertical-bars-trailing` |
+| The phone is being folded right now | `.folding` |
 
 The segment variables only exist while the device is half-open. To lay out along the fold whether it's flat or half-open, such as a game on one side and its controls on the other, the polyfill also sets the fold's position whenever there is one:
 
@@ -116,6 +119,32 @@ Using Ionic's `ion-tabs`? `import '@erkamyaman/capacitor-foldable/ionic-tabs.css
 | <img src="https://raw.githubusercontent.com/erkamyaman/capacitor-foldable/main/docs/images/ionic-before-book.png" width="300" alt="Ionic tab bar across the fold in book posture"> | <img src="https://raw.githubusercontent.com/erkamyaman/capacitor-foldable/main/docs/images/ionic-after-book.png" width="300" alt="Ionic tab bar as a pill on the side in book posture"> |
 | <img src="https://raw.githubusercontent.com/erkamyaman/capacitor-foldable/main/docs/images/ionic-before-closed.png" width="220" alt="Ionic tab bar at the bottom of the closed iPhone Duo"> | <img src="https://raw.githubusercontent.com/erkamyaman/capacitor-foldable/main/docs/images/ionic-after-closed.png" width="220" alt="Ionic tab bar as a pill under the clock on the closed iPhone Duo"> |
 
+## Apps built with it
+
+- **[Hinge Guess](https://github.com/erkamyaman/hinge-guess)** is a small game: fold the phone to a target angle and score how close you got. Ionic Angular, native tabs, and the plugin behind the dial.
+- **[examples](examples)** in this repo is a catalogue of one-file demos, one per API, laid out as two pages around the crease on iPhone Duo.
+- **[example-app](example-app)** is the plain single-screen app that shows every value the plugin reports at once.
+
+## Store review
+
+The plugin is built so it cannot be the reason an app is rejected.
+
+**iOS.** Public APIs only, UIKit and Capacitor, with no dynamic lookup or private symbols. It touches none of Apple's [required reason APIs](https://developer.apple.com/documentation/bundleresources/privacy-manifest-files), collects nothing and tracks nobody, and it ships a `PrivacyInfo.xcprivacy` saying exactly that, which Xcode folds into your app's privacy report. Nothing it uses needs a purpose string in `Info.plist`. The iOS 27.1 code is behind a compile-time SDK check, so older Xcode versions build fine.
+
+**Android.** The plugin's manifest is empty: it adds no permissions to your app. The hinge angle comes from `TYPE_HINGE_ANGLE`, which needs no permission, and it is registered at `SENSOR_DELAY_NORMAL`, well under the rate that would require `HIGH_SAMPLING_RATE_SENSORS`. Rear display and dual screen go through Jetpack WindowManager's `WindowAreaController`, also permission free. `minSdk` is 24 and `targetSdk` follows your project, so it never holds you back from Play's target API rules.
+
+**Data safety and privacy labels.** Everything stays on the device: the plugin has no network code and stores nothing. There is no entry for it to add to Play's Data safety form or to your App Store privacy label.
+
+## Skill for coding agents
+
+The repo ships an agent skill, so Claude Code and other agents know how to use the plugin instead of guessing at the API:
+
+```bash
+npx skills add erkamyaman/capacitor-foldable@capacitor-foldable
+```
+
+It is one skill with the platform detail split out: laying out around the crease in CSS, the full API, Ionic specifics, iPhone Duo, Android foldables, and how to test on both. It is beta, so tell me if any of it steers you wrong. It also ships inside the npm package under [`skills/`](skills/capacitor-foldable), so an agent working in a project that depends on the plugin can find it in `node_modules`.
+
 ## Guides
 
 - [Examples](docs/examples.md)
@@ -130,6 +159,8 @@ Using Ionic's `ion-tabs`? `import '@erkamyaman/capacitor-foldable/ionic-tabs.css
 * [`isDeviceFoldable()`](#isdevicefoldable)
 * [`getFoldState()`](#getfoldstate)
 * [`getHingeAngle()`](#gethingeangle)
+* [`getReservedRegions()`](#getreservedregions)
+* [`setVerticalBarBehavior(...)`](#setverticalbarbehavior)
 * [`getSizeClass()`](#getsizeclass)
 * [`getDisplayModes()`](#getdisplaymodes)
 * [`getBarPlacement()`](#getbarplacement)
@@ -141,6 +172,7 @@ Using Ionic's `ion-tabs`? `import '@erkamyaman/capacitor-foldable/ionic-tabs.css
 * [`addListener('hingeAngleChange', ...)`](#addlistenerhingeanglechange-)
 * [`addListener('sizeClassChange', ...)`](#addlistenersizeclasschange-)
 * [`addListener('displayModeChange', ...)`](#addlistenerdisplaymodechange-)
+* [`addListener('foldingChange', ...)`](#addlistenerfoldingchange-)
 * [`addListener('barPlacementChange', ...)`](#addlistenerbarplacementchange-)
 * [Interfaces](#interfaces)
 * [Type Aliases](#type-aliases)
@@ -187,20 +219,61 @@ fold information.
 ### getHingeAngle()
 
 ```typescript
-getHingeAngle() => Promise<{ angle: number | null; }>
+getHingeAngle() => Promise<{ angle: number | null; status: HingeStatus | null; }>
 ```
 
 Read the angle between the two halves of the device, in degrees: `0` when
 closed, `180` when flat. Resolves to `{ angle: null }` on devices without a
 hinge angle sensor, on web, and on iOS before 27.1.
 
-**Returns:** <code>Promise&lt;{ angle: number | null; }&gt;</code>
+**Returns:** <code>Promise&lt;{ angle: number | null; status: <a href="#hingestatus">HingeStatus</a> | null; }&gt;</code>
 
 **Since:** 7.0.0
 
 --------------------
 
 
+### getReservedRegions()
+
+```typescript
+getReservedRegions() => Promise<{ regions: ReservedRegion[]; }>
+```
+
+Read every region the system reserves on this display: the fold and
+anything covering the screen, active or not. iPhone Duo reports the fold,
+the vertical status bar area and the under-display camera. Resolves to an
+empty list on Android, on web and on iOS before 27.1.
+
+**Returns:** <code>Promise&lt;{ regions: ReservedRegion[]; }&gt;</code>
+
+**Since:** 8.2.0
+
+--------------------
+
+
+### setVerticalBarBehavior(...)
+
+```typescript
+setVerticalBarBehavior(options: { behavior: 'automatic' | 'disabled'; }) => Promise<{ applied: boolean; }>
+```
+
+Choose whether iPhone Duo may move this app's bars to the side of the
+display. `'disabled'` keeps everything horizontal, including the status
+bar. Resolves to `{ applied: false }` when the app does not use
+`FoldableBridgeViewController`, on Android, on web and on iOS before 27.1.
+See the iPhone Duo guide for the one-line storyboard change.
+
+| Param         | Type                                                  |
+| ------------- | ----------------------------------------------------- |
+| **`options`** | <code>{ behavior: 'automatic' \| 'disabled'; }</code> |
+
+**Returns:** <code>Promise&lt;{ applied: boolean; }&gt;</code>
+
+**Since:** 8.2.0
+
+--------------------
+
+
 ### getSizeClass()
 
 ```typescript
@@ -403,6 +476,30 @@ the user folded or unfolded the device. Never fires on iOS and web.
 --------------------
 
 
+### addListener('foldingChange', ...)
+
+```typescript
+addListener(eventName: 'foldingChange', listenerFunc: (event: { folding: boolean; }) => void) => Promise<PluginListenerHandle>
+```
+
+Listen for the device being folded or unfolded. `folding` turns `true` as
+soon as the hinge starts moving and `false` about half a second after it
+stops, so an app can pause animations or heavy work while the screen is in
+motion. Only fires where a hinge angle is available: Android foldables with
+a hinge sensor, and iPhone Duo on iOS 27.1 or later.
+
+| Param              | Type                                                   |
+| ------------------ | ------------------------------------------------------ |
+| **`eventName`**    | <code>'foldingChange'</code>                           |
+| **`listenerFunc`** | <code>(event: { folding: boolean; }) =&gt; void</code> |
+
+**Returns:** <code>Promise&lt;<a href="#pluginlistenerhandle">PluginListenerHandle</a>&gt;</code>
+
+**Since:** 8.2.0
+
+--------------------
+
+
 ### addListener('barPlacementChange', ...)
 
 ```typescript
@@ -429,16 +526,30 @@ Only fires on iOS 27.1 or later.
 
 #### FoldState
 
-| Prop                   | Type                                                                    | Description                                                                                                                                                                                                                                  | Since |
-| ---------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
-| **`state`**            | <code>'flat' \| 'half-opened' \| 'closed'</code>                        | Posture of the fold. `'closed'` is never reported today: a device shut on its cover display reports `'flat'`.                                                                                                                                | 7.0.0 |
-| **`isSeparating`**     | <code>boolean</code>                                                    | Whether the fold splits the web view into two areas: `true` when half-opened, or when the hinge has a physical gap.                                                                                                                          | 7.0.0 |
-| **`posture`**          | <code>'flat' \| 'tabletop' \| 'book'</code>                             | How the device is held: `'tabletop'` when half-opened with a horizontal hinge, like a laptop, `'book'` when half-opened with a vertical hinge, and `'flat'` otherwise.                                                                       | 7.0.0 |
-| **`hingeOrientation`** | <code>'horizontal' \| 'vertical'</code>                                 | Direction of the hinge relative to the window, so it flips when the device rotates. Omitted when there is no fold.                                                                                                                           | 7.0.0 |
-| **`hingeBounds`**      | <code>{ x: number; y: number; width: number; height: number; }</code>   | Position of the fold in CSS pixels, relative to the web view. Zero wide (or zero tall) on a seamless fold. Omitted when there is no fold.                                                                                                    | 7.0.0 |
-| **`occludedBounds`**   | <code>{ x: number; y: number; width: number; height: number; }</code>   | Area of the web view the hinge covers, in CSS pixels. Only present on devices with a physical gap.                                                                                                                                           | 7.0.0 |
-| **`activeDisplay`**    | <code>'inner' \| 'outer'</code>                                         | Which display is showing the app, on a device with an inner and an outer display such as iPhone Duo. Reported on iPhone Duo (iOS 27.1 or later) and omitted elsewhere.                                                                       | 7.0.0 |
-| **`cameraBounds`**     | <code>{ x: number; y: number; width: number; height: number; }[]</code> | Areas of the web view covered by a front-facing camera, in CSS pixels. On Android these are the display cutouts. On iPhone Duo they are the outer camera and the under-display inner camera while it is in use. Omitted when there are none. | 7.0.0 |
+| Prop                   | Type                                                                       | Description                                                                                                                                                                                                                                                                                                                     | Since |
+| ---------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
+| **`state`**            | <code>'flat' \| 'half-opened' \| 'closed'</code>                           | Posture of the fold. `'closed'` is never reported today: a device shut on its cover display reports `'flat'`.                                                                                                                                                                                                                   | 7.0.0 |
+| **`isSeparating`**     | <code>boolean</code>                                                       | Whether the fold splits the web view into two areas: `true` when half-opened, or when the hinge has a physical gap.                                                                                                                                                                                                             | 7.0.0 |
+| **`posture`**          | <code>'flat' \| 'tabletop' \| 'book'</code>                                | How the device is held: `'tabletop'` when half-opened with a horizontal hinge, like a laptop, `'book'` when half-opened with a vertical hinge, and `'flat'` otherwise.                                                                                                                                                          | 7.0.0 |
+| **`hingeOrientation`** | <code>'horizontal' \| 'vertical'</code>                                    | Direction of the hinge relative to the window, so it flips when the device rotates. Omitted when there is no fold.                                                                                                                                                                                                              | 7.0.0 |
+| **`hingeBounds`**      | <code>{ x: number; y: number; width: number; height: number; }</code>      | Position of the fold in CSS pixels, relative to the web view. Zero wide (or zero tall) on a seamless fold. Omitted when there is no fold.                                                                                                                                                                                       | 7.0.0 |
+| **`occludedBounds`**   | <code>{ x: number; y: number; width: number; height: number; }</code>      | Area of the web view the hinge covers, in CSS pixels. Only present on devices with a physical gap.                                                                                                                                                                                                                              | 7.0.0 |
+| **`activeDisplay`**    | <code>'inner' \| 'outer'</code>                                            | Which display is showing the app, on a device with an inner and an outer display such as iPhone Duo. Reported on iPhone Duo (iOS 27.1 or later) and omitted elsewhere.                                                                                                                                                          | 7.0.0 |
+| **`cameraBounds`**     | <code>{ x: number; y: number; width: number; height: number; }[]</code>    | Areas of the web view something covers, in CSS pixels. On Android these are the display cutouts. On iPhone Duo these are the active occlusion regions: the camera in use, and the strip the system keeps for the vertical status bar. Use `getReservedRegions()` when you need to tell them apart. Omitted when there are none. | 7.0.0 |
+| **`hingeMargins`**     | <code>{ top: number; right: number; bottom: number; left: number; }</code> | Space the system asks you to keep clear around the fold, in CSS pixels. `hingeBounds` covers the crease plus these margins, so the crease itself is `hingeBounds` shrunk by them. iPhone Duo reports 20 on each side of a vertical fold. Omitted on Android and where there is no fold.                                         | 8.2.0 |
+
+
+#### ReservedRegion
+
+| Prop           | Type                                                                       | Description                                                                                                                          | Since |
+| -------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----- |
+| **`kind`**     | <code>'division' \| 'occlusion'</code>                                     | `'division'` is the fold itself. `'occlusion'` is something covering the display, such as a camera or the vertical status bar area.  | 8.2.0 |
+| **`isActive`** | <code>boolean</code>                                                       | Whether the region applies right now. An inactive division is a flat fold, and an inactive occlusion is a camera that is not in use. | 8.2.0 |
+| **`x`**        | <code>number</code>                                                        |                                                                                                                                      |       |
+| **`y`**        | <code>number</code>                                                        |                                                                                                                                      |       |
+| **`width`**    | <code>number</code>                                                        |                                                                                                                                      |       |
+| **`height`**   | <code>number</code>                                                        |                                                                                                                                      |       |
+| **`margins`**  | <code>{ top: number; right: number; bottom: number; left: number; }</code> | Space to keep clear around the region, in CSS pixels.                                                                                | 8.2.0 |
 
 
 #### SizeClass
@@ -476,6 +587,14 @@ Only fires on iOS 27.1 or later.
 ### Type Aliases
 
 
+#### HingeStatus
+
+How far open the hinge is, as the system sees it. Note that it can lag the
+angle: iOS keeps reporting `'closed'` for a moment after the phone opens.
+
+<code>'closed' | 'partiallyOpen' | 'fullyOpen'</code>
+
+
 #### DisplayModeStatus
 
 <code>'unsupported' | 'unavailable' | 'available' | 'active'</code>

package/android/src/main/kotlin/io/github/erkamyaman/foldable/FoldablePlugin.kt

@@ -39,6 +39,8 @@ class FoldablePlugin : Plugin() {
     private var displayModes: DisplayModes? = null
     private var lastKnownState: FoldState? = null
     private var hingeAngleJob: Job? = null
+    private var foldingJob: Job? = null
+    private var isFolding = false
     private var lastKnownAngle: Float? = null
     private var lastSizeClass: SizeClass? = null
     private var lastDisplayModes: DisplayModeStatuses? = null
@@ -106,6 +108,16 @@ class FoldablePlugin : Plugin() {
         )
     }
 
+    @PluginMethod
+    fun setVerticalBarBehavior(call: PluginCall) {
+        call.resolve(JSObject().put("applied", false))
+    }
+
+    @PluginMethod
+    fun getReservedRegions(call: PluginCall) {
+        call.resolve(JSObject().put("regions", JSArray()))
+    }
+
     @PluginMethod
     fun getFoldState(call: PluginCall) {
         lastKnownState?.let {
@@ -234,7 +246,7 @@ class FoldablePlugin : Plugin() {
     }
 
     private fun updateHingeAngleUpdates() {
-        if (!hasListeners(HINGE_ANGLE_CHANGE)) {
+        if (!hasListeners(HINGE_ANGLE_CHANGE) && !hasListeners(FOLDING_CHANGE)) {
             hingeAngleJob?.cancel()
             hingeAngleJob = null
             lastKnownAngle = null
@@ -250,6 +262,7 @@ class FoldablePlugin : Plugin() {
                     implementation.hingeAngles().conflate().collect { angle ->
                         lastKnownAngle = angle
                         notifyListeners(HINGE_ANGLE_CHANGE, angleResult(angle))
+                        notifyFolding()
                         delay(HINGE_ANGLE_FRAME_MS)
                     }
                 } finally {
@@ -259,6 +272,21 @@ class FoldablePlugin : Plugin() {
         }
     }
 
+    /** `true` while the hinge keeps moving, `false` once it has been still for a moment. */
+    private fun notifyFolding() {
+        if (!isFolding) {
+            isFolding = true
+            notifyListeners(FOLDING_CHANGE, JSObject().put("folding", true))
+        }
+
+        foldingJob?.cancel()
+        foldingJob = scope.launch {
+            delay(FOLDING_SETTLE_MS)
+            isFolding = false
+            notifyListeners(FOLDING_CHANGE, JSObject().put("folding", false))
+        }
+    }
+
     @SuppressLint("SetJavaScriptEnabled")
     private fun dualScreenWebView(context: Context, url: String): WebView = WebView(context).apply {
         settings.javaScriptEnabled = true
@@ -326,6 +354,8 @@ class FoldablePlugin : Plugin() {
     private companion object {
         const val FIRST_EMISSION_TIMEOUT_MS = 1_000L
         const val HINGE_ANGLE_CHANGE = "hingeAngleChange"
+        const val FOLDING_CHANGE = "foldingChange"
+        const val FOLDING_SETTLE_MS = 500L
         const val HINGE_ANGLE_FRAME_MS = 16L
         const val SIZE_CLASS_CHANGE = "sizeClassChange"
         const val DISPLAY_MODE_CHANGE = "displayModeChange"

package/dist/docs.json

@@ -39,9 +39,9 @@
       },
       {
         "name": "getHingeAngle",
-        "signature": "() => Promise<{ angle: number | null; }>",
+        "signature": "() => Promise<{ angle: number | null; status: HingeStatus | null; }>",
         "parameters": [],
-        "returns": "Promise<{ angle: number | null; }>",
+        "returns": "Promise<{ angle: number | null; status: HingeStatus | null; }>",
         "tags": [
           {
             "name": "since",
@@ -49,9 +49,49 @@
           }
         ],
         "docs": "Read the angle between the two halves of the device, in degrees: `0` when\nclosed, `180` when flat. Resolves to `{ angle: null }` on devices without a\nhinge angle sensor, on web, and on iOS before 27.1.",
-        "complexTypes": [],
+        "complexTypes": [
+          "HingeStatus"
+        ],
         "slug": "gethingeangle"
       },
+      {
+        "name": "getReservedRegions",
+        "signature": "() => Promise<{ regions: ReservedRegion[]; }>",
+        "parameters": [],
+        "returns": "Promise<{ regions: ReservedRegion[]; }>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "8.2.0"
+          }
+        ],
+        "docs": "Read every region the system reserves on this display: the fold and\nanything covering the screen, active or not. iPhone Duo reports the fold,\nthe vertical status bar area and the under-display camera. Resolves to an\nempty list on Android, on web and on iOS before 27.1.",
+        "complexTypes": [
+          "ReservedRegion"
+        ],
+        "slug": "getreservedregions"
+      },
+      {
+        "name": "setVerticalBarBehavior",
+        "signature": "(options: { behavior: 'automatic' | 'disabled'; }) => Promise<{ applied: boolean; }>",
+        "parameters": [
+          {
+            "name": "options",
+            "docs": "",
+            "type": "{ behavior: 'automatic' | 'disabled'; }"
+          }
+        ],
+        "returns": "Promise<{ applied: boolean; }>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "8.2.0"
+          }
+        ],
+        "docs": "Choose whether iPhone Duo may move this app's bars to the side of the\ndisplay. `'disabled'` keeps everything horizontal, including the status\nbar. Resolves to `{ applied: false }` when the app does not use\n`FoldableBridgeViewController`, on Android, on web and on iOS before 27.1.\nSee the iPhone Duo guide for the one-line storyboard change.",
+        "complexTypes": [],
+        "slug": "setverticalbarbehavior"
+      },
       {
         "name": "getSizeClass",
         "signature": "() => Promise<SizeClass>",
@@ -284,6 +324,34 @@
         ],
         "slug": "addlistenerdisplaymodechange-"
       },
+      {
+        "name": "addListener",
+        "signature": "(eventName: 'foldingChange', listenerFunc: (event: { folding: boolean; }) => void) => Promise<PluginListenerHandle>",
+        "parameters": [
+          {
+            "name": "eventName",
+            "docs": "",
+            "type": "'foldingChange'"
+          },
+          {
+            "name": "listenerFunc",
+            "docs": "",
+            "type": "(event: { folding: boolean; }) => void"
+          }
+        ],
+        "returns": "Promise<PluginListenerHandle>",
+        "tags": [
+          {
+            "name": "since",
+            "text": "8.2.0"
+          }
+        ],
+        "docs": "Listen for the device being folded or unfolded. `folding` turns `true` as\nsoon as the hinge starts moving and `false` about half a second after it\nstops, so an app can pause animations or heavy work while the screen is in\nmotion. Only fires where a hinge angle is available: Android foldables with\na hinge sensor, and iPhone Duo on iOS 27.1 or later.",
+        "complexTypes": [
+          "PluginListenerHandle"
+        ],
+        "slug": "addlistenerfoldingchange-"
+      },
       {
         "name": "addListener",
         "signature": "(eventName: 'barPlacementChange', listenerFunc: (placement: BarPlacement) => void) => Promise<PluginListenerHandle>",
@@ -416,9 +484,94 @@
               "name": "since"
             }
           ],
-          "docs": "Areas of the web view covered by a front-facing camera, in CSS pixels. On\nAndroid these are the display cutouts. On iPhone Duo they are the outer\ncamera and the under-display inner camera while it is in use. Omitted when\nthere are none.",
+          "docs": "Areas of the web view something covers, in CSS pixels. On Android these are\nthe display cutouts. On iPhone Duo these are the active occlusion regions:\nthe camera in use, and the strip the system keeps for the vertical status\nbar. Use `getReservedRegions()` when you need to tell them apart. Omitted\nwhen there are none.",
           "complexTypes": [],
           "type": "{ x: number; y: number; width: number; height: number; }[] | undefined"
+        },
+        {
+          "name": "hingeMargins",
+          "tags": [
+            {
+              "text": "8.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Space the system asks you to keep clear around the fold, in CSS pixels.\n`hingeBounds` covers the crease plus these margins, so the crease itself is\n`hingeBounds` shrunk by them. iPhone Duo reports 20 on each side of a\nvertical fold. Omitted on Android and where there is no fold.",
+          "complexTypes": [],
+          "type": "{ top: number; right: number; bottom: number; left: number; } | undefined"
+        }
+      ]
+    },
+    {
+      "name": "ReservedRegion",
+      "slug": "reservedregion",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "kind",
+          "tags": [
+            {
+              "text": "8.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "`'division'` is the fold itself. `'occlusion'` is something covering the\ndisplay, such as a camera or the vertical status bar area.",
+          "complexTypes": [],
+          "type": "'division' | 'occlusion'"
+        },
+        {
+          "name": "isActive",
+          "tags": [
+            {
+              "text": "8.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Whether the region applies right now. An inactive division is a flat fold,\nand an inactive occlusion is a camera that is not in use.",
+          "complexTypes": [],
+          "type": "boolean"
+        },
+        {
+          "name": "x",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "y",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "width",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "height",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "margins",
+          "tags": [
+            {
+              "text": "8.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Space to keep clear around the region, in CSS pixels.",
+          "complexTypes": [],
+          "type": "{ top: number; right: number; bottom: number; left: number; }"
         }
       ]
     },
@@ -556,6 +709,25 @@
   ],
   "enums": [],
   "typeAliases": [
+    {
+      "name": "HingeStatus",
+      "slug": "hingestatus",
+      "docs": "How far open the hinge is, as the system sees it. Note that it can lag the\nangle: iOS keeps reporting `'closed'` for a moment after the phone opens.",
+      "types": [
+        {
+          "text": "'closed'",
+          "complexTypes": []
+        },
+        {
+          "text": "'partiallyOpen'",
+          "complexTypes": []
+        },
+        {
+          "text": "'fullyOpen'",
+          "complexTypes": []
+        }
+      ]
+    },
     {
       "name": "DisplayModeStatus",
       "slug": "displaymodestatus",

package/dist/esm/css.d.ts

@@ -3,7 +3,12 @@ export declare const CSS_CLASSES: string[];
 export declare const BAR_CLASSES: string[];
 export declare const FOLD_CLASSES: string[];
 export declare const FOLD_VARIABLES: string[];
-export declare function foldCssFor(hingeBounds: SegmentRect | undefined, hingeOrientation: 'horizontal' | 'vertical' | undefined): {
+export declare function foldCssFor(hingeBounds: SegmentRect | undefined, hingeOrientation: 'horizontal' | 'vertical' | undefined, hingeMargins?: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}): {
     variables: Record<string, string>;
     className: string | null;
 };

package/dist/esm/css.js

@@ -6,16 +6,30 @@ export const CSS_CLASSES = [
 ];
 export const BAR_CLASSES = ['vertical-bars-leading', 'vertical-bars-trailing'];
 export const FOLD_CLASSES = ['fold-vertical', 'fold-horizontal'];
-export const FOLD_VARIABLES = ['--fold-left', '--fold-top', '--fold-width', '--fold-height'];
-export function foldCssFor(hingeBounds, hingeOrientation) {
+export const FOLD_VARIABLES = [
+    '--fold-left',
+    '--fold-top',
+    '--fold-width',
+    '--fold-height',
+    '--fold-margin-top',
+    '--fold-margin-right',
+    '--fold-margin-bottom',
+    '--fold-margin-left',
+];
+export function foldCssFor(hingeBounds, hingeOrientation, hingeMargins) {
     if (!hingeBounds || !hingeOrientation)
         return { variables: {}, className: null };
+    const margins = hingeMargins !== null && hingeMargins !== void 0 ? hingeMargins : { top: 0, right: 0, bottom: 0, left: 0 };
     return {
         variables: {
             '--fold-left': `${hingeBounds.x}px`,
             '--fold-top': `${hingeBounds.y}px`,
             '--fold-width': `${hingeBounds.width}px`,
             '--fold-height': `${hingeBounds.height}px`,
+            '--fold-margin-top': `${margins.top}px`,
+            '--fold-margin-right': `${margins.right}px`,
+            '--fold-margin-bottom': `${margins.bottom}px`,
+            '--fold-margin-left': `${margins.left}px`,
         },
         className: `fold-${hingeOrientation}`,
     };

package/dist/esm/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SegmentRect } from './segments';\n\nexport const CSS_CLASSES = [\n  'horizontal-viewport-segments-2',\n  'vertical-viewport-segments-2',\n  'device-posture-continuous',\n  'device-posture-folded',\n];\n\nexport const BAR_CLASSES = ['vertical-bars-leading', 'vertical-bars-trailing'];\n\nexport const FOLD_CLASSES = ['fold-vertical', 'fold-horizontal'];\n\nexport const FOLD_VARIABLES = ['--fold-left', '--fold-top', '--fold-width', '--fold-height'];\n\nexport function foldCssFor(\n  hingeBounds: SegmentRect | undefined,\n  hingeOrientation: 'horizontal' | 'vertical' | undefined,\n): { variables: Record<string, string>; className: string | null } {\n  if (!hingeBounds || !hingeOrientation) return { variables: {}, className: null };\n\n  return {\n    variables: {\n      '--fold-left': `${hingeBounds.x}px`,\n      '--fold-top': `${hingeBounds.y}px`,\n      '--fold-width': `${hingeBounds.width}px`,\n      '--fold-height': `${hingeBounds.height}px`,\n    },\n    className: `fold-${hingeOrientation}`,\n  };\n}\n\nexport function barClassFor(edge: 'leading' | 'trailing' | null): string | null {\n  return edge ? `vertical-bars-${edge}` : null;\n}\n\nconst TAB_BAR_MARGIN = 24;\nconst CAMERA_GAP = 15;\n\nexport function verticalTabBarBottom(cameras: SegmentRect[], viewportHeight: number): number {\n  const below = cameras.filter((camera) => camera.y > viewportHeight / 2);\n  const camera = below.sort((a, b) => a.width * a.height - b.width * b.height)[0];\n  if (!camera) return TAB_BAR_MARGIN;\n  return Math.max(TAB_BAR_MARGIN, Math.round(viewportHeight - camera.y + CAMERA_GAP));\n}\n\nexport function cssFor(\n  segments: SegmentRect[],\n  posture: 'continuous' | 'folded',\n): { variables: Record<string, string>; classes: string[] } {\n  const stacked = segments.length > 1 && segments[1].y > segments[0].y;\n  const variables: Record<string, string> = {};\n\n  segments.forEach((segment, index) => {\n    const suffix = stacked ? `0-${index}` : `${index}-0`;\n    variables[`--viewport-segment-top-${suffix}`] = `${segment.y}px`;\n    variables[`--viewport-segment-left-${suffix}`] = `${segment.x}px`;\n    variables[`--viewport-segment-bottom-${suffix}`] = `${segment.y + segment.height}px`;\n    variables[`--viewport-segment-right-${suffix}`] = `${segment.x + segment.width}px`;\n    variables[`--viewport-segment-width-${suffix}`] = `${segment.width}px`;\n    variables[`--viewport-segment-height-${suffix}`] = `${segment.height}px`;\n  });\n\n  const classes = [`device-posture-${posture}`];\n  if (segments.length > 1) {\n    classes.push(stacked ? 'vertical-viewport-segments-2' : 'horizontal-viewport-segments-2');\n  }\n\n  return { variables, classes };\n}\n"]}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SegmentRect } from './segments';\n\nexport const CSS_CLASSES = [\n  'horizontal-viewport-segments-2',\n  'vertical-viewport-segments-2',\n  'device-posture-continuous',\n  'device-posture-folded',\n];\n\nexport const BAR_CLASSES = ['vertical-bars-leading', 'vertical-bars-trailing'];\n\nexport const FOLD_CLASSES = ['fold-vertical', 'fold-horizontal'];\n\nexport const FOLD_VARIABLES = [\n  '--fold-left',\n  '--fold-top',\n  '--fold-width',\n  '--fold-height',\n  '--fold-margin-top',\n  '--fold-margin-right',\n  '--fold-margin-bottom',\n  '--fold-margin-left',\n];\n\nexport function foldCssFor(\n  hingeBounds: SegmentRect | undefined,\n  hingeOrientation: 'horizontal' | 'vertical' | undefined,\n  hingeMargins?: { top: number; right: number; bottom: number; left: number },\n): { variables: Record<string, string>; className: string | null } {\n  if (!hingeBounds || !hingeOrientation) return { variables: {}, className: null };\n\n  const margins = hingeMargins ?? { top: 0, right: 0, bottom: 0, left: 0 };\n\n  return {\n    variables: {\n      '--fold-left': `${hingeBounds.x}px`,\n      '--fold-top': `${hingeBounds.y}px`,\n      '--fold-width': `${hingeBounds.width}px`,\n      '--fold-height': `${hingeBounds.height}px`,\n      '--fold-margin-top': `${margins.top}px`,\n      '--fold-margin-right': `${margins.right}px`,\n      '--fold-margin-bottom': `${margins.bottom}px`,\n      '--fold-margin-left': `${margins.left}px`,\n    },\n    className: `fold-${hingeOrientation}`,\n  };\n}\n\nexport function barClassFor(edge: 'leading' | 'trailing' | null): string | null {\n  return edge ? `vertical-bars-${edge}` : null;\n}\n\nconst TAB_BAR_MARGIN = 24;\nconst CAMERA_GAP = 15;\n\nexport function verticalTabBarBottom(cameras: SegmentRect[], viewportHeight: number): number {\n  const below = cameras.filter((camera) => camera.y > viewportHeight / 2);\n  const camera = below.sort((a, b) => a.width * a.height - b.width * b.height)[0];\n  if (!camera) return TAB_BAR_MARGIN;\n  return Math.max(TAB_BAR_MARGIN, Math.round(viewportHeight - camera.y + CAMERA_GAP));\n}\n\nexport function cssFor(\n  segments: SegmentRect[],\n  posture: 'continuous' | 'folded',\n): { variables: Record<string, string>; classes: string[] } {\n  const stacked = segments.length > 1 && segments[1].y > segments[0].y;\n  const variables: Record<string, string> = {};\n\n  segments.forEach((segment, index) => {\n    const suffix = stacked ? `0-${index}` : `${index}-0`;\n    variables[`--viewport-segment-top-${suffix}`] = `${segment.y}px`;\n    variables[`--viewport-segment-left-${suffix}`] = `${segment.x}px`;\n    variables[`--viewport-segment-bottom-${suffix}`] = `${segment.y + segment.height}px`;\n    variables[`--viewport-segment-right-${suffix}`] = `${segment.x + segment.width}px`;\n    variables[`--viewport-segment-width-${suffix}`] = `${segment.width}px`;\n    variables[`--viewport-segment-height-${suffix}`] = `${segment.height}px`;\n  });\n\n  const classes = [`device-posture-${posture}`];\n  if (segments.length > 1) {\n    classes.push(stacked ? 'vertical-viewport-segments-2' : 'horizontal-viewport-segments-2');\n  }\n\n  return { variables, classes };\n}\n"]}