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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/demo-player",
-  "version": "0.14.0",
+  "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.0';
+export const PLAYER_VERSION = '0.14.2';
 
 export const HOST = 5;
 export const TEXT = 6;
@@ -194,12 +194,28 @@ export function cardBox(place, at, screen, insets, card) {
 // pinned to the top by default, but with a collapse button"). The card sits
 // across the top of the screen; only when it would cover the ringed element
 // (`at`) does it move to the bottom. Pure.
+// THE DEV CLIENT'S BUTTON (2026-11-07): a review plays in a development build,
+// and expo-dev-menu draws its floating tools button (the gear) in a native
+// window above the app at the top-right. Its touch area is far bigger than the
+// icon — on SSB's iPhone simulator nothing below it got touches from x ≈ 305
+// to the edge, down to y ≈ 165 — so a short card pinned at the top had its
+// right-aligned primary button under it: "Take me there" did nothing for the
+// playback check and for a person alike (Connie Ho's review, demo
+// 16D4S5HqugIonvUSdC5u; mapped by hand-tapping a grid on the simulator). A 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, width = screen.width - 24;
+  const left = 12, full = screen.width - 24;
   const top = insets.top + 8;
   const bottom = screen.height - insets.bottom - card.h - 8;
   const covers = at && at.top < top + card.h + 8 && at.bottom > top;
-  return { left, width, top: covers ? Math.max(top, bottom) : top };
+  const y = covers ? Math.max(top, bottom) : top;
+  return { left, width: y === top ? full - DEV_FAB_CLEAR : full, top: y };
 }
 
 // A TAP ON THE RINGED ELEMENT (0.13.1): a `try` step is done when the viewer's