@glassly/miniapp 0.3.7-dev.894 → 0.3.7-dev.897

package/dist/globals.d.ts

@@ -16,6 +16,12 @@ export interface MiniappCapsuleMenuRect {
     left: number;
     width: number;
     height: number;
+    /**
+     * `corner` floats over the page's top-right; `rail` sits in the iPhone
+     * Duo's status rail, inside the side safe-area inset and clear of the page.
+     * Absent on hosts older than the field.
+     */
+    placement?: "corner" | "rail";
 }
 export type MiniappColorScheme = "light" | "dark";
 export interface HostGlobals {
@@ -29,12 +35,18 @@ export interface HostGlobals {
     miniappLocal?: boolean;
     /** True when the miniapp is running via the dev workflow (QR sideload). */
     miniappDeveloperMode?: boolean;
-    /** Safe-area insets around the WebView content. Miniapps should pad accordingly. */
+    /**
+     * Safe-area insets around the WebView content. Miniapps should pad
+     * accordingly. On an iPhone Duo the status rail is an 84px side inset. The
+     * host updates this and dispatches `glassly:safe-area-change` when they
+     * change (a Duo folding or unfolding).
+     */
     safeAreaInsets?: MiniappSafeAreaInsets;
     /**
-     * Bounding rect (in CSS pixels) of the floating capsule menu the host draws
-     * over the WebView. The menu lives in the top-right and miniapps should
-     * avoid placing interactive elements beneath it.
+     * Bounding rect (in CSS pixels) of the capsule menu the host draws over the
+     * WebView: the top-right corner, or the Duo's status rail (see `placement`).
+     * Miniapps should avoid placing interactive elements beneath it. Updated
+     * with `safeAreaInsets`.
      */
     capsuleMenu?: MiniappCapsuleMenuRect;
     /**

package/dist/globals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAA;AAEjD,MAAM,WAAW,WAAW;IAC1B,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,qFAAqF;IACrF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2EAA2E;IAC3E,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,oFAAoF;IACpF,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;CACjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,OAAO,CAAC,EAAE,WAAW,CAAA;KACtB;CACF;AAED,wEAAwE;AACxE,wBAAgB,cAAc,IAAI,WAAW,CAG5C"}
+{"version":3,"file":"globals.d.ts","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;CAC9B;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAA;AAEjD,MAAM,WAAW,WAAW;IAC1B,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,qFAAqF;IACrF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2EAA2E;IAC3E,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;CACjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,OAAO,CAAC,EAAE,WAAW,CAAA;KACtB;CACF;AAED,wEAAwE;AACxE,wBAAgB,cAAc,IAAI,WAAW,CAG5C"}

package/dist/globals.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.js","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAqDH,wEAAwE;AACxE,MAAM,UAAU,cAAc;IAC5B,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,EAAE,CAAA;IAC5C,OAAO,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;AAC7B,CAAC"}
+{"version":3,"file":"globals.js","sourceRoot":"","sources":["../src/globals.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAiEH,wEAAwE;AACxE,MAAM,UAAU,cAAc;IAC5B,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,EAAE,CAAA;IAC5C,OAAO,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;AAC7B,CAAC"}

package/dist/react/capsuleHeaderLayout.d.ts

@@ -1,3 +1,10 @@
-import type { MiniappCapsuleMenuRect } from "../globals";
+import type { MiniappCapsuleMenuRect, MiniappSafeAreaInsets } from "../globals";
+/**
+ * Whether the capsule menu floats over the page content: false when it sits
+ * in a side safe-area inset (the iPhone Duo's status rail), where it covers
+ * nothing the page lays out. Hosts that predate `placement` report a corner
+ * rect on the Duo, which lands inside the rail inset all the same.
+ */
+export declare function capsuleOverContent(capsuleMenu: MiniappCapsuleMenuRect, viewportWidth: number, insets: MiniappSafeAreaInsets): boolean;
 export declare function getCapsuleHeaderPaddingRight(capsuleMenu: MiniappCapsuleMenuRect, viewportWidth: number, safeAreaRight: number, rightGap: number): number;
 //# sourceMappingURL=capsuleHeaderLayout.d.ts.map

package/dist/react/capsuleHeaderLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"capsuleHeaderLayout.d.ts","sourceRoot":"","sources":["../../src/react/capsuleHeaderLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,YAAY,CAAA;AAEtD,wBAAgB,4BAA4B,CAC1C,WAAW,EAAE,sBAAsB,EACnC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,MAAM,GACf,MAAM,CAGR"}
+{"version":3,"file":"capsuleHeaderLayout.d.ts","sourceRoot":"","sources":["../../src/react/capsuleHeaderLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,sBAAsB,EAAE,qBAAqB,EAAC,MAAM,YAAY,CAAA;AAE7E;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,sBAAsB,EACnC,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,qBAAqB,GAC5B,OAAO,CAGT;AAED,wBAAgB,4BAA4B,CAC1C,WAAW,EAAE,sBAAsB,EACnC,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,MAAM,GACf,MAAM,CAGR"}

package/dist/react/capsuleHeaderLayout.js

@@ -1,3 +1,14 @@
+/**
+ * Whether the capsule menu floats over the page content: false when it sits
+ * in a side safe-area inset (the iPhone Duo's status rail), where it covers
+ * nothing the page lays out. Hosts that predate `placement` report a corner
+ * rect on the Duo, which lands inside the rail inset all the same.
+ */
+export function capsuleOverContent(capsuleMenu, viewportWidth, insets) {
+    if (capsuleMenu.placement === "rail")
+        return false;
+    return capsuleMenu.left < viewportWidth - insets.right && capsuleMenu.left + capsuleMenu.width > insets.left;
+}
 export function getCapsuleHeaderPaddingRight(capsuleMenu, viewportWidth, safeAreaRight, rightGap) {
     const capsuleOffsetFromContentRight = viewportWidth - capsuleMenu.left - safeAreaRight;
     return Math.max(rightGap, capsuleOffsetFromContentRight + rightGap);

package/dist/react/capsuleHeaderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"capsuleHeaderLayout.js","sourceRoot":"","sources":["../../src/react/capsuleHeaderLayout.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,4BAA4B,CAC1C,WAAmC,EACnC,aAAqB,EACrB,aAAqB,EACrB,QAAgB;IAEhB,MAAM,6BAA6B,GAAG,aAAa,GAAG,WAAW,CAAC,IAAI,GAAG,aAAa,CAAA;IACtF,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,6BAA6B,GAAG,QAAQ,CAAC,CAAA;AACrE,CAAC"}
+{"version":3,"file":"capsuleHeaderLayout.js","sourceRoot":"","sources":["../../src/react/capsuleHeaderLayout.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAChC,WAAmC,EACnC,aAAqB,EACrB,MAA6B;IAE7B,IAAI,WAAW,CAAC,SAAS,KAAK,MAAM;QAAE,OAAO,KAAK,CAAA;IAClD,OAAO,WAAW,CAAC,IAAI,GAAG,aAAa,GAAG,MAAM,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAA;AAC9G,CAAC;AAED,MAAM,UAAU,4BAA4B,CAC1C,WAAmC,EACnC,aAAqB,EACrB,aAAqB,EACrB,QAAgB;IAEhB,MAAM,6BAA6B,GAAG,aAAa,GAAG,WAAW,CAAC,IAAI,GAAG,aAAa,CAAA;IACtF,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,6BAA6B,GAAG,QAAQ,CAAC,CAAA;AACrE,CAAC"}

package/dist/react/useCapsuleHeaderStyle.d.ts

@@ -4,7 +4,9 @@
  *
  * Use this when you want full control over header markup but want the
  * alignment math done for you. If you just want a stock header, use
- * <MiniappHeader> instead.
+ * <MiniappHeader> instead. When the capsule sits in the iPhone Duo's status
+ * rail, outside the page, the header takes the fallback height and margin
+ * and reserves nothing on the right.
  *
  * Example:
  *   const style = useCapsuleHeaderStyle()

package/dist/react/useCapsuleHeaderStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCapsuleHeaderStyle.d.ts","sourceRoot":"","sources":["../../src/react/useCapsuleHeaderStyle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAA;AAKxC,MAAM,WAAW,4BAA4B;IAC3C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,4BAAiC,GAAG,aAAa,CAuB/F"}
+{"version":3,"file":"useCapsuleHeaderStyle.d.ts","sourceRoot":"","sources":["../../src/react/useCapsuleHeaderStyle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,OAAO,CAAA;AAKxC,MAAM,WAAW,4BAA4B;IAC3C,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,4BAAiC,GAAG,aAAa,CAuB/F"}

package/dist/react/useCapsuleHeaderStyle.js

@@ -4,7 +4,9 @@
  *
  * Use this when you want full control over header markup but want the
  * alignment math done for you. If you just want a stock header, use
- * <MiniappHeader> instead.
+ * <MiniappHeader> instead. When the capsule sits in the iPhone Duo's status
+ * rail, outside the page, the header takes the fallback height and margin
+ * and reserves nothing on the right.
  *
  * Example:
  *   const style = useCapsuleHeaderStyle()

package/dist/react/useCapsuleHeaderStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCapsuleHeaderStyle.js","sourceRoot":"","sources":["../../src/react/useCapsuleHeaderStyle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,OAAO,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AAazC,MAAM,UAAU,qBAAqB,CAAC,UAAwC,EAAE;IAC9E,MAAM,EAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,iBAAiB,GAAG,EAAE,EAAC,GAAG,OAAO,CAAA;IAC9F,MAAM,EAAC,MAAM,EAAE,WAAW,EAAC,GAAG,WAAW,EAAE,CAAA;IAE3C,MAAM,MAAM,GAAG,WAAW,EAAE,MAAM,IAAI,cAAc,CAAA;IACpD,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,GAAG,MAAM,GAAG,CAAC,CAAA;IACnH,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,CAAA;IAClD,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW;YAC7B,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,QAAQ;YAC9B,CAAC,CAAC,4BAA4B,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;QACxF,CAAC,CAAC,WAAW,CAAA;IAEf,OAAO;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,WAAW;QACxB,YAAY;QACZ,SAAS;QACT,MAAM;KACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"useCapsuleHeaderStyle.js","sourceRoot":"","sources":["../../src/react/useCapsuleHeaderStyle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,OAAO,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AAClE,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAA;AAazC,MAAM,UAAU,qBAAqB,CAAC,UAAwC,EAAE;IAC9E,MAAM,EAAC,WAAW,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,iBAAiB,GAAG,EAAE,EAAC,GAAG,OAAO,CAAA;IAC9F,MAAM,EAAC,MAAM,EAAE,WAAW,EAAC,GAAG,WAAW,EAAE,CAAA;IAE3C,MAAM,MAAM,GAAG,WAAW,EAAE,MAAM,IAAI,cAAc,CAAA;IACpD,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,GAAG,MAAM,GAAG,CAAC,CAAA;IACnH,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,CAAA;IAClD,MAAM,YAAY,GAAG,WAAW;QAC9B,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW;YAC7B,CAAC,CAAC,WAAW,CAAC,KAAK,GAAG,QAAQ;YAC9B,CAAC,CAAC,4BAA4B,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;QACxF,CAAC,CAAC,WAAW,CAAA;IAEf,OAAO;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,WAAW;QACxB,YAAY;QACZ,SAAS;QACT,MAAM;KACP,CAAA;AACH,CAAC"}

package/dist/react/useSafeArea.d.ts

@@ -2,18 +2,24 @@
  * @fileoverview useSafeArea — React hook exposing the host's safe-area insets
  * and the capsule menu rect to miniapp UIs.
  *
- * The host injects these via window.Glassly before content loads. This hook
- * reads them once at mount — they don't currently change at runtime (the host
- * would have to force a reload to update them, e.g. on orientation change).
+ * The host injects these via window.Glassly before content loads and updates
+ * them when they change (an iPhone Duo folding moves its status rail),
+ * dispatching `glassly:safe-area-change`; the hook re-renders on that event
+ * and on viewport resizes.
  */
 import { type MiniappCapsuleMenuRect, type MiniappSafeAreaInsets } from "../globals";
 export interface UseSafeAreaResult {
-    /** Pixel insets around the WebView content. Apply as padding on your root element. */
+    /**
+     * Pixel insets around the WebView content. Apply as padding on your root
+     * element. On an iPhone Duo the status rail is an 84px left or right inset:
+     * let backgrounds run under it and stop content at it.
+     */
     insets: MiniappSafeAreaInsets;
     /**
-     * Bounding rect of the host's floating capsule menu (top-right overlay).
-     * Null when the host doesn't render one (e.g. older builds). Use this to
-     * avoid placing clickable content underneath the menu.
+     * Bounding rect of the host's capsule menu when it floats over the page
+     * (top-right). Null when the host doesn't render one (e.g. older builds) or
+     * draws it outside the content, in the Duo's status rail. Use this to avoid
+     * placing clickable content underneath the menu.
      */
     capsuleMenu: MiniappCapsuleMenuRect | null;
 }

package/dist/react/useSafeArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../src/react/useSafeArea.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAiB,KAAK,sBAAsB,EAAE,KAAK,qBAAqB,EAAC,MAAM,YAAY,CAAA;AAIlG,MAAM,WAAW,iBAAiB;IAChC,sFAAsF;IACtF,MAAM,EAAE,qBAAqB,CAAA;IAC7B;;;;OAIG;IACH,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAA;CAC3C;AAED,wBAAgB,WAAW,IAAI,iBAAiB,CAS/C"}
+{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../src/react/useSafeArea.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EAAiB,KAAK,sBAAsB,EAAE,KAAK,qBAAqB,EAAC,MAAM,YAAY,CAAA;AAKlG,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,MAAM,EAAE,qBAAqB,CAAA;IAC7B;;;;;OAKG;IACH,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAA;CAC3C;AAmBD,wBAAgB,WAAW,IAAI,iBAAiB,CAoB/C"}

package/dist/react/useSafeArea.js

@@ -2,21 +2,50 @@
  * @fileoverview useSafeArea — React hook exposing the host's safe-area insets
  * and the capsule menu rect to miniapp UIs.
  *
- * The host injects these via window.Glassly before content loads. This hook
- * reads them once at mount — they don't currently change at runtime (the host
- * would have to force a reload to update them, e.g. on orientation change).
+ * The host injects these via window.Glassly before content loads and updates
+ * them when they change (an iPhone Duo folding moves its status rail),
+ * dispatching `glassly:safe-area-change`; the hook re-renders on that event
+ * and on viewport resizes.
  */
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { getHostGlobals } from "../globals";
+import { capsuleOverContent } from "./capsuleHeaderLayout";
 const EMPTY_INSETS = { top: 0, bottom: 0, left: 0, right: 0 };
+function readSafeArea() {
+    const globals = getHostGlobals();
+    const insets = globals.safeAreaInsets ?? EMPTY_INSETS;
+    const capsuleMenu = globals.capsuleMenu ?? null;
+    const viewportWidth = typeof window === "undefined" ? Number.POSITIVE_INFINITY : window.innerWidth;
+    return {
+        insets,
+        capsuleMenu: capsuleMenu && capsuleOverContent(capsuleMenu, viewportWidth, insets) ? capsuleMenu : null,
+    };
+}
+function sameRect(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return Object.keys(a).every((key) => a[key] === b[key]);
+}
 export function useSafeArea() {
-    const [result] = useState(() => {
-        const globals = getHostGlobals();
-        return {
-            insets: globals.safeAreaInsets ?? EMPTY_INSETS,
-            capsuleMenu: globals.capsuleMenu ?? null,
+    const [result, setResult] = useState(readSafeArea);
+    useEffect(() => {
+        const update = () => setResult((previous) => {
+            const next = readSafeArea();
+            return sameRect(previous.insets, next.insets) && sameRect(previous.capsuleMenu, next.capsuleMenu)
+                ? previous
+                : next;
+        });
+        // The host may have updated the globals between the first render and now.
+        update();
+        window.addEventListener("glassly:safe-area-change", update);
+        window.addEventListener("resize", update);
+        return () => {
+            window.removeEventListener("glassly:safe-area-change", update);
+            window.removeEventListener("resize", update);
         };
-    });
+    }, []);
     return result;
 }
 //# sourceMappingURL=useSafeArea.js.map

package/dist/react/useSafeArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSafeArea.js","sourceRoot":"","sources":["../../src/react/useSafeArea.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAC,cAAc,EAA0D,MAAM,YAAY,CAAA;AAElG,MAAM,YAAY,GAA0B,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAC,CAAA;AAalF,MAAM,UAAU,WAAW;IACzB,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAoB,GAAG,EAAE;QAChD,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;QAChC,OAAO;YACL,MAAM,EAAE,OAAO,CAAC,cAAc,IAAI,YAAY;YAC9C,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,IAAI;SACzC,CAAA;IACH,CAAC,CAAC,CAAA;IACF,OAAO,MAAM,CAAA;AACf,CAAC"}
+{"version":3,"file":"useSafeArea.js","sourceRoot":"","sources":["../../src/react/useSafeArea.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAC,cAAc,EAA0D,MAAM,YAAY,CAAA;AAClG,OAAO,EAAC,kBAAkB,EAAC,MAAM,uBAAuB,CAAA;AAExD,MAAM,YAAY,GAA0B,EAAC,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAC,CAAA;AAkBlF,SAAS,YAAY;IACnB,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;IAChC,MAAM,MAAM,GAAG,OAAO,CAAC,cAAc,IAAI,YAAY,CAAA;IACrD,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,IAAI,CAAA;IAC/C,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAA;IAClG,OAAO;QACL,MAAM;QACN,WAAW,EAAE,WAAW,IAAI,kBAAkB,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI;KACxG,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAmB,CAAW,EAAE,CAAW;IAC1D,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACxB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QAAE,OAAO,KAAK,CAAA;IAC1B,OAAQ,MAAM,CAAC,IAAI,CAAC,CAAC,CAAiB,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;AAC1E,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAoB,YAAY,CAAC,CAAA;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;YACrB,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;YAC3B,OAAO,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC;gBAC/F,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,IAAI,CAAA;QACV,CAAC,CAAC,CAAA;QACJ,0EAA0E;QAC1E,MAAM,EAAE,CAAA;QACR,MAAM,CAAC,gBAAgB,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAA;QAC3D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QACzC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAA;YAC9D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;QAC9C,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,MAAM,CAAA;AACf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glassly/miniapp",
-  "version": "0.3.7-dev.894",
+  "version": "0.3.7-dev.897",
   "description": "SDK for building Glassly local miniapps (browser/WebView)",
   "author": "Glassly Labs",
   "license": "MIT",
@@ -73,7 +73,7 @@
     }
   },
   "dependencies": {
-    "@glassly/cloud-protocol": "0.3.7-dev.894",
+    "@glassly/cloud-protocol": "0.3.7-dev.897",
     "eventemitter3": "^5.0.1"
   },
   "devDependencies": {

package/src/globals.ts

@@ -18,6 +18,12 @@ export interface MiniappCapsuleMenuRect {
   left: number
   width: number
   height: number
+  /**
+   * `corner` floats over the page's top-right; `rail` sits in the iPhone
+   * Duo's status rail, inside the side safe-area inset and clear of the page.
+   * Absent on hosts older than the field.
+   */
+  placement?: "corner" | "rail"
 }
 
 export type MiniappColorScheme = "light" | "dark"
@@ -33,12 +39,18 @@ export interface HostGlobals {
   miniappLocal?: boolean
   /** True when the miniapp is running via the dev workflow (QR sideload). */
   miniappDeveloperMode?: boolean
-  /** Safe-area insets around the WebView content. Miniapps should pad accordingly. */
+  /**
+   * Safe-area insets around the WebView content. Miniapps should pad
+   * accordingly. On an iPhone Duo the status rail is an 84px side inset. The
+   * host updates this and dispatches `glassly:safe-area-change` when they
+   * change (a Duo folding or unfolding).
+   */
   safeAreaInsets?: MiniappSafeAreaInsets
   /**
-   * Bounding rect (in CSS pixels) of the floating capsule menu the host draws
-   * over the WebView. The menu lives in the top-right and miniapps should
-   * avoid placing interactive elements beneath it.
+   * Bounding rect (in CSS pixels) of the capsule menu the host draws over the
+   * WebView: the top-right corner, or the Duo's status rail (see `placement`).
+   * Miniapps should avoid placing interactive elements beneath it. Updated
+   * with `safeAreaInsets`.
    */
   capsuleMenu?: MiniappCapsuleMenuRect
   /**

package/src/react/capsuleHeaderLayout.ts

@@ -1,4 +1,19 @@
-import type {MiniappCapsuleMenuRect} from "../globals"
+import type {MiniappCapsuleMenuRect, MiniappSafeAreaInsets} from "../globals"
+
+/**
+ * Whether the capsule menu floats over the page content: false when it sits
+ * in a side safe-area inset (the iPhone Duo's status rail), where it covers
+ * nothing the page lays out. Hosts that predate `placement` report a corner
+ * rect on the Duo, which lands inside the rail inset all the same.
+ */
+export function capsuleOverContent(
+  capsuleMenu: MiniappCapsuleMenuRect,
+  viewportWidth: number,
+  insets: MiniappSafeAreaInsets,
+): boolean {
+  if (capsuleMenu.placement === "rail") return false
+  return capsuleMenu.left < viewportWidth - insets.right && capsuleMenu.left + capsuleMenu.width > insets.left
+}
 
 export function getCapsuleHeaderPaddingRight(
   capsuleMenu: MiniappCapsuleMenuRect,

package/src/react/useCapsuleHeaderStyle.ts

@@ -4,7 +4,9 @@
  *
  * Use this when you want full control over header markup but want the
  * alignment math done for you. If you just want a stock header, use
- * <MiniappHeader> instead.
+ * <MiniappHeader> instead. When the capsule sits in the iPhone Duo's status
+ * rail, outside the page, the header takes the fallback height and margin
+ * and reserves nothing on the right.
  *
  * Example:
  *   const style = useCapsuleHeaderStyle()

package/src/react/useSafeArea.ts

@@ -2,35 +2,70 @@
  * @fileoverview useSafeArea — React hook exposing the host's safe-area insets
  * and the capsule menu rect to miniapp UIs.
  *
- * The host injects these via window.Glassly before content loads. This hook
- * reads them once at mount — they don't currently change at runtime (the host
- * would have to force a reload to update them, e.g. on orientation change).
+ * The host injects these via window.Glassly before content loads and updates
+ * them when they change (an iPhone Duo folding moves its status rail),
+ * dispatching `glassly:safe-area-change`; the hook re-renders on that event
+ * and on viewport resizes.
  */
 
-import {useState} from "react"
+import {useEffect, useState} from "react"
 
 import {getHostGlobals, type MiniappCapsuleMenuRect, type MiniappSafeAreaInsets} from "../globals"
+import {capsuleOverContent} from "./capsuleHeaderLayout"
 
 const EMPTY_INSETS: MiniappSafeAreaInsets = {top: 0, bottom: 0, left: 0, right: 0}
 
 export interface UseSafeAreaResult {
-  /** Pixel insets around the WebView content. Apply as padding on your root element. */
+  /**
+   * Pixel insets around the WebView content. Apply as padding on your root
+   * element. On an iPhone Duo the status rail is an 84px left or right inset:
+   * let backgrounds run under it and stop content at it.
+   */
   insets: MiniappSafeAreaInsets
   /**
-   * Bounding rect of the host's floating capsule menu (top-right overlay).
-   * Null when the host doesn't render one (e.g. older builds). Use this to
-   * avoid placing clickable content underneath the menu.
+   * Bounding rect of the host's capsule menu when it floats over the page
+   * (top-right). Null when the host doesn't render one (e.g. older builds) or
+   * draws it outside the content, in the Duo's status rail. Use this to avoid
+   * placing clickable content underneath the menu.
    */
   capsuleMenu: MiniappCapsuleMenuRect | null
 }
 
+function readSafeArea(): UseSafeAreaResult {
+  const globals = getHostGlobals()
+  const insets = globals.safeAreaInsets ?? EMPTY_INSETS
+  const capsuleMenu = globals.capsuleMenu ?? null
+  const viewportWidth = typeof window === "undefined" ? Number.POSITIVE_INFINITY : window.innerWidth
+  return {
+    insets,
+    capsuleMenu: capsuleMenu && capsuleOverContent(capsuleMenu, viewportWidth, insets) ? capsuleMenu : null,
+  }
+}
+
+function sameRect<T extends object>(a: T | null, b: T | null): boolean {
+  if (a === b) return true
+  if (!a || !b) return false
+  return (Object.keys(a) as (keyof T)[]).every((key) => a[key] === b[key])
+}
+
 export function useSafeArea(): UseSafeAreaResult {
-  const [result] = useState<UseSafeAreaResult>(() => {
-    const globals = getHostGlobals()
-    return {
-      insets: globals.safeAreaInsets ?? EMPTY_INSETS,
-      capsuleMenu: globals.capsuleMenu ?? null,
+  const [result, setResult] = useState<UseSafeAreaResult>(readSafeArea)
+  useEffect(() => {
+    const update = () =>
+      setResult((previous) => {
+        const next = readSafeArea()
+        return sameRect(previous.insets, next.insets) && sameRect(previous.capsuleMenu, next.capsuleMenu)
+          ? previous
+          : next
+      })
+    // The host may have updated the globals between the first render and now.
+    update()
+    window.addEventListener("glassly:safe-area-change", update)
+    window.addEventListener("resize", update)
+    return () => {
+      window.removeEventListener("glassly:safe-area-change", update)
+      window.removeEventListener("resize", update)
     }
-  })
+  }, [])
   return result
 }