@simon-says-build/demo-player 0.14.1 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/demo-player",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "SimonSays mobile demo player: walks a preview's viewer through a job's change, inside the app. Renders nothing unless the bundle carries a demo.",
   "repository": {
     "type": "git",
@@ -18,10 +18,16 @@
   ],
   "peerDependencies": {
     "react": ">=18",
-    "react-native": ">=0.76"
+    "react-native": ">=0.76",
+    "react-native-screens": ">=3"
   },
   "scripts": {
     "test": "node --test test/*.test.mjs"
   },
-  "license": "UNLICENSED"
+  "license": "UNLICENSED",
+  "peerDependenciesMeta": {
+    "react-native-screens": {
+      "optional": true
+    }
+  }
 }

package/src/DemoHost.js

@@ -15,7 +15,15 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, NativeModules, Platform, Settings, Pressable, ScrollView, StyleSheet, Text, TextInput, View, useWindowDimensions } from 'react-native';
 import { pageName } from './page-name.js';
-import { OVERLAY_ID, chapterOf, cardBox, pinnedBox, setTuckedDemo, overlayAnnounced, tapInside, currentDemo, demoConfig, findTarget, handlerFor, introBody, introOf, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint, rescueNote, screenCandidates, stepTitle, targetOfKey } from './core.js';
+// ABOVE NATIVE SHEETS (0.14.2, 2026-11-07): a profile that opens as a native
+// sheet (react-native-screens formSheet) covered the card, so Connie Ho's review
+// lost its card at "tap her photo" (demo 16D4S5HqugIonvUSdC5u). On iOS the
+// overlay draws in react-native-screens' FullWindowOverlay — a window above the
+// app's own, sheets and modals included; taps outside the card still reach the
+// app (box-none). An app without react-native-screens keeps the in-tree layer.
+let FullWindowOverlay = null;
+try { FullWindowOverlay = require('react-native-screens').FullWindowOverlay || null; } catch { FullWindowOverlay = null; }
+import { OVERLAY_ID, overlayLayer, chapterOf, cardBox, pinnedBox, setTuckedDemo, overlayAnnounced, tapInside, currentDemo, demoConfig, findTarget, handlerFor, introBody, introOf, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint, rescueNote, screenCandidates, stepTitle, targetOfKey } from './core.js';
 import { demoApi, tourOf } from './api.js';
 import { signInFirst, openInApp } from './signin.js';
 import { runEvent, fillStep } from './events.js';
@@ -362,7 +370,9 @@ function Player({ config, router, insets, onClose, children }) {
   };
   return h(View, { ref: rootRef, style: s.root, collapsable: false, onTouchEnd },
     children,
-    h(View, { pointerEvents: 'box-none', style: StyleSheet.absoluteFill, testID: OVERLAY_ID }, overlay));
+    overlayLayer(Platform.OS, FullWindowOverlay) === 'window'
+      ? h(FullWindowOverlay, null, h(View, { pointerEvents: 'box-none', style: StyleSheet.absoluteFill, testID: OVERLAY_ID }, overlay))
+      : h(View, { pointerEvents: 'box-none', style: StyleSheet.absoluteFill, testID: OVERLAY_ID }, overlay));
 }
 
 // The review card: every change of the demo, each approved here or discussed

package/src/core.js

@@ -10,7 +10,7 @@ import { bubbleBox } from './step-place.js';
 // What this player is, said when the app registers for "Ready to see"
 // (packages/ssb-overlay sends it; functions/in-app-notify.mjs clientOf). Kept
 // equal to package.json by test/core.test.mjs.
-export const PLAYER_VERSION = '0.14.1';
+export const PLAYER_VERSION = '0.14.2';
 
 export const HOST = 5;
 export const TEXT = 6;
@@ -205,6 +205,10 @@ export function cardBox(place, at, screen, insets, card) {
 // pinned at the TOP stays left of it; one pinned at the bottom is full width.
 export const DEV_FAB_CLEAR = 88;
 
+// Where the overlay draws (0.14.2): iOS with react-native-screens → its own
+// window above sheets and modals (DemoHost, FullWindowOverlay); else in-tree.
+export const overlayLayer = (os, fwo) => (os === 'ios' && fwo ? 'window' : 'tree');
+
 export function pinnedBox(at, screen, insets, card) {
   const left = 12, full = screen.width - 24;
   const top = insets.top + 8;