@erkamyaman/capacitor-foldable 8.0.4 → 8.2.0

package/README.md

@@ -96,6 +96,19 @@ 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:
+
+| Fold | With the polyfill |
+| --- | --- |
+| Direction | `.fold-vertical`, `.fold-horizontal` |
+| Position and size | `var(--fold-left)`, `var(--fold-top)`, `var(--fold-width)`, `var(--fold-height)` |
+
+```css
+.fold-vertical .game { width: var(--fold-left); }
+.fold-vertical .controls { left: calc(var(--fold-left) + var(--fold-width)); }
+```
 
 Using Ionic's `ion-tabs`? `import '@erkamyaman/capacitor-foldable/ionic-tabs.css'` moves it to the side the way native tab bars do on iPhone Duo. See [Ionic tabs](docs/iphone-duo.md#ionic-tabs).
 
@@ -104,6 +117,12 @@ 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.
+
 ## Guides
 
 - [Examples](docs/examples.md)
@@ -118,6 +137,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)
@@ -129,6 +150,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)
@@ -175,20 +197,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
@@ -391,6 +454,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
@@ -417,16 +504,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
@@ -464,6 +565,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

@@ -1,6 +1,17 @@
 import type { SegmentRect } from './segments';
 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, hingeMargins?: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}): {
+    variables: Record<string, string>;
+    className: string | null;
+};
 export declare function barClassFor(edge: 'leading' | 'trailing' | null): string | null;
 export declare function verticalTabBarBottom(cameras: SegmentRect[], viewportHeight: number): number;
 export declare function cssFor(segments: SegmentRect[], posture: 'continuous' | 'folded'): {

package/dist/esm/css.js

@@ -5,6 +5,35 @@ export const CSS_CLASSES = [
     'device-posture-folded',
 ];
 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',
+    '--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}`,
+    };
+}
 export function barClassFor(edge) {
     return edge ? `vertical-bars-${edge}` : null;
 }

package/dist/esm/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/css.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,gCAAgC;IAChC,8BAA8B;IAC9B,2BAA2B;IAC3B,uBAAuB;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAC;AAE/E,MAAM,UAAU,WAAW,CAAC,IAAmC;IAC7D,OAAO,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAC/C,CAAC;AAED,MAAM,cAAc,GAAG,EAAE,CAAC;AAC1B,MAAM,UAAU,GAAG,EAAE,CAAC;AAEtB,MAAM,UAAU,oBAAoB,CAAC,OAAsB,EAAE,cAAsB;IACjF,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,cAAc,GAAG,CAAC,CAAC,CAAC;IACxE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,IAAI,CAAC,MAAM;QAAE,OAAO,cAAc,CAAC;IACnC,OAAO,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;AACtF,CAAC;AAED,MAAM,UAAU,MAAM,CACpB,QAAuB,EACvB,OAAgC;IAEhC,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,SAAS,GAA2B,EAAE,CAAC;IAE7C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAClC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC;QACrD,SAAS,CAAC,0BAA0B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC;QACjE,SAAS,CAAC,2BAA2B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC;QAClE,SAAS,CAAC,6BAA6B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC;QACrF,SAAS,CAAC,4BAA4B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;QACnF,SAAS,CAAC,4BAA4B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;QACvE,SAAS,CAAC,6BAA6B,MAAM,EAAE,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CAAC,kBAAkB,OAAO,EAAE,CAAC,CAAC;IAC9C,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC;IAC5F,CAAC;IAED,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAChC,CAAC","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 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"]}