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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/demo-player",
-  "version": "0.13.3",
+  "version": "0.14.1",
   "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",

package/src/DemoHost.js

@@ -15,7 +15,7 @@
 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, 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 { 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';
 import { demoApi, tourOf } from './api.js';
 import { signInFirst, openInApp } from './signin.js';
 import { runEvent, fillStep } from './events.js';
@@ -311,6 +311,21 @@ function Player({ config, router, insets, onClose, children }) {
         actions: signIn ? [{ label: 'Hide', onPress: () => setTucked(true) }, { label: 'Try again', onPress: () => setSignInTry((n) => n + 1), primary: true }] : [],
       });
     }
+    // A PART'S TITLE CARD (0.14.0): the review moving to a different thing —
+    // its title, one line, centred, nothing ringed; Next carries on.
+    if (step.kind === 'chapter') {
+      const part = chapterOf(steps, index);
+      return h(Card, {
+        at: null, screen, insets, card, setCard, onCollapse: () => setTucked(true),
+        title: part ? `Part ${part.n} of ${part.of} · ${step.title}` : step.title,
+        body: step.caption,
+        actions: [
+          { label: 'Hide', onPress: () => setTucked(true) },
+          index > 0 && steps[index - 1].kind !== 'signin' ? { label: 'Back', onPress: () => setIndex(index - 1) } : null,
+          { label: index + 1 >= steps.length ? 'Finish' : 'Next', onPress: next, primary: true },
+        ].filter(Boolean),
+      });
+    }
     if (step.kind === 'try') {
       return h(React.Fragment, null,
         rect ? h(View, { pointerEvents: 'none', style: [s.ring, s.tryRing, { left: rect.left - 6, top: rect.top - 6, width: rect.width + 12, height: rect.height + 12 }] }) : null,

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.13.3';
+export const PLAYER_VERSION = '0.14.1';
 
 export const HOST = 5;
 export const TEXT = 6;
@@ -21,7 +21,7 @@ export const RECORDED_SCREEN = { width: 393, height: 852 };
 // What a phone can perform. `press` (a keyboard key), `select` (a web
 // <select>) and `run` (a terminal demo) have no phone equivalent. `signin` is
 // the player's own (tourOf, 0.6.0): sign this person in by link.
-const PHONE_KINDS = new Set(['say', 'goto', 'show', 'click', 'fill', 'signin', 'event', 'try']);
+const PHONE_KINDS = new Set(['say', 'goto', 'show', 'click', 'fill', 'signin', 'event', 'try', 'chapter']);
 
 const lower = (s) => String(s ?? '').trim().toLowerCase();
 const hiddenHost = (f) => {
@@ -153,6 +153,17 @@ export function scalePoint(point, screen, from = RECORDED_SCREEN) {
 }
 
 /** A step card's title: where it is in the demo, and whether SSB only set it up (a best-effort step: the state seeded and the screen opened, the change not driven). */
+/**
+ * Which part a step belongs to (0.14.0): parts start at each `chapter` step.
+ * → { n, of } (1-based) for a chapter step, or null when the tour has none. Pure.
+ */
+export function chapterOf(steps = [], index = 0) {
+  const at = steps.map((s, i) => (s?.kind === 'chapter' ? i : -1)).filter((i) => i >= 0);
+  if (!at.length) return null;
+  const n = at.filter((i) => i <= index).length;
+  return n ? { n, of: at.length } : null;
+}
+
 export function stepTitle(step, index, total) {
   return `${index + 1} of ${total}${step?.bestEffort === true ? ' · set up by SSB' : ''}`;
 }
@@ -183,12 +194,24 @@ 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;
+
 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