@simon-says-build/demo-player 0.8.0 → 0.8.2

package/package.json

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

package/src/DemoHost.js

@@ -14,7 +14,8 @@
 // No JSX, so it needs nothing from the app's Babel setup beyond React Native's.
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, useWindowDimensions } from 'react-native';
-import { cardBox, currentDemo, demoConfig, findTarget, handlerFor, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint } from './core.js';
+import { pageName } from './page-name.js';
+import { cardBox, currentDemo, demoConfig, findTarget, handlerFor, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint, stepTitle } from './core.js';
 import { demoApi, tourOf } from './api.js';
 import { signInFirst, openInApp } from './signin.js';
 import { runEvent, fillStep } from './events.js';
@@ -78,6 +79,7 @@ function Player({ config, router, insets, onClose, children }) {
   const [signIn, setSignIn] = useState(null);     // a `signin` step: null while it runs, else { ok, error }
   const [event, setEvent] = useState(null);       // an `event` step: null while it runs, else { ok, error }
   const [vars, setVars] = useState({});           // per person: what their events set up ({walkId} in later steps)
+  const [flash, setFlash] = useState(null);       // "Now navigating to the walk page", said before a goto opens it
 
   useEffect(() => {
     let live = true;
@@ -125,15 +127,27 @@ function Player({ config, router, insets, onClose, children }) {
     api.progress({ status: 'done' }).catch(() => {});
   }, [api]);
 
+  const advance = useCallback(() => {
+    if (index + 1 >= steps.length) { if (changes.length) setReviewing(true); else finish(); }
+    else setIndex(index + 1);
+  }, [steps, index, finish, changes]);
+  // SAID BEFORE IT GOES (2026-11-01, Michael): a goto flashes "Now navigating
+  // to the walk page" for a moment, then opens it (schemas/page-name.mjs).
   const next = useCallback(() => {
-    if (!steps) return;
+    if (!steps || flash) return;
     if (step?.kind === 'goto' && step.path) {
-      if (step.path.startsWith('/') && router?.push) router.push(step.path);
-      else Linking.openURL(step.path).catch(() => {});
+      const path = step.path;
+      setFlash(`Now navigating to ${pageName(path)}`);
+      setTimeout(() => {
+        if (path.startsWith('/') && router?.push) router.push(path);
+        else Linking.openURL(path).catch(() => {});
+        setFlash(null);
+        advance();
+      }, FLASH_MS);
+      return;
     }
-    if (index + 1 >= steps.length) { if (changes.length) setReviewing(true); else finish(); }
-    else setIndex(index + 1);
-  }, [steps, step, index, router, finish, changes]);
+    advance();
+  }, [steps, step, router, advance, flash]);
 
   const doIt = useCallback(() => {
     if (!step || !found) return;
@@ -183,6 +197,8 @@ function Player({ config, router, insets, onClose, children }) {
     if (error) return h(Card, { at: null, screen, insets, card, setCard, title: 'Demo', body: `The demo didn't load: ${error}` });
     if (!steps) return null;
     if (reviewing && !tucked) return h(Review, { api, changes, release, screen, insets, onBack: steps.length ? () => setReviewing(false) : null, onDone: finish, onHide: () => setTucked(true) });
+    if (flash) return h(View, { pointerEvents: 'none', style: [s.flash, { top: insets.top + screen.height * 0.4 }], testID: 'ssb-demo-flash' },
+      h(Text, { style: s.flashText, accessibilityLiveRegion: 'polite' }, flash));
     if (tucked || done) {
       // A demo started at run time closes when it is done (▶ Demo again replays it);
       // one baked into a preview stays, to be replayed from its pill.
@@ -212,7 +228,7 @@ function Player({ config, router, insets, onClose, children }) {
       rect ? h(View, { pointerEvents: 'none', style: [s.ring, { left: rect.left - 6, top: rect.top - 6, width: rect.width + 12, height: rect.height + 12 }] }) : null,
       h(Card, {
         at: rect, place: step.place, screen, insets, card, setCard,
-        title: `${index + 1} of ${steps.length}`, body: step.caption,
+        title: stepTitle(step, index, steps.length), body: step.caption,
         actions: [
           { label: 'Hide', onPress: () => setTucked(true) },
           index > 0 && steps[index - 1].kind !== 'signin' ? { label: 'Back', onPress: () => setIndex(index - 1) } : null,
@@ -307,6 +323,8 @@ function Card({ at, place, screen, insets, card, setCard, title, body, actions =
   }, h(Text, { style: [s.buttonText, a.primary && s.primaryText] }, a.label)))) : null);
 }
 
+const FLASH_MS = 1100;   // long enough to read "Now navigating to the walk page"
+
 const s = StyleSheet.create({
   root: { flex: 1 },
   ring: { position: 'absolute', borderRadius: 12, borderWidth: 3, borderColor: '#FFFFFF', shadowColor: '#000', shadowOpacity: 0.6, shadowRadius: 8, shadowOffset: { width: 0, height: 0 } },
@@ -327,6 +345,8 @@ const s = StyleSheet.create({
   changeState: { color: '#AEAEB2', fontSize: 13, marginTop: 4 },
   error: { color: '#FF6961', fontSize: 13, marginTop: 4 },
   input: { marginTop: 10, minHeight: 64, padding: 10, borderRadius: 10, backgroundColor: '#2C2C2E', color: '#FFFFFF', fontSize: 15 },
+  flash: { position: 'absolute', left: 32, right: 32, alignItems: 'center', paddingVertical: 14, paddingHorizontal: 18, borderRadius: 14, backgroundColor: 'rgba(28,28,30,0.92)' },
+  flashText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600', textAlign: 'center' },
   pill: { position: 'absolute', right: 16, paddingVertical: 8, paddingHorizontal: 14, borderRadius: 18, backgroundColor: '#1C1C1E' },
   pillText: { color: '#FFFFFF', fontSize: 13, fontWeight: '600' },
 });

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.8.0';
+export const PLAYER_VERSION = '0.8.2';
 
 export const HOST = 5;
 export const TEXT = 6;
@@ -103,6 +103,11 @@ 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). */
+export function stepTitle(step, index, total) {
+  return `${index + 1} of ${total}${step?.bestEffort === true ? ' · set up by SSB' : ''}`;
+}
+
 /** The steps of a tour a phone can play, in order. A step with no caption says nothing and is dropped. */
 export function phoneSteps(steps) {
   return (steps || []).filter((s) => s && PHONE_KINDS.has(s.kind) && String(s.caption || '').trim());

package/src/page-name.js

@@ -0,0 +1,23 @@
+// THE PAGE A STEP OPENS, in words (2026-11-01, Michael: "before any navigation,
+// can we show a brief flash showing 'Now navigating to [the X page]'"). Both
+// players say it before they navigate: the phone's (packages/demo-player/src/
+// page-name.js) and the extension's (extension/overlay.js) carry copies of
+// pageName, held equal by bin/page-name.test.mjs. Pure.
+//
+//   /walk/{walkId}          → the walk page     (an id or {placeholder} is not a name)
+//   /(app)/settings/profile → the profile page  (an Expo Router group is not a name)
+//   /MainStack/Tabs/Dashboard → the dashboard page (a React Navigation chain)
+//   walk2gether://walk/abc  → the walk page     (a deep link)
+//   /                       → the home page
+export function pageName(path) {
+  // A web address drops its host; a deep link's "host" is its first screen.
+  const rest = String(path || '').replace(/^https?:\/\/[^/]*/i, '').replace(/^[a-z][a-z0-9+.-]*:\/\//i, '/').split(/[?#]/)[0];
+  const isId = (s) => /^\{.*\}$/.test(s) || /^\[.*\]$/.test(s) || /^:/.test(s) || /^\(.*\)$/.test(s) || s === 'index'
+    || /^[0-9]+$/.test(s) || /^[0-9a-f]{8}-[0-9a-f]{4}-/i.test(s) || (s.length >= 16 && /[0-9]/.test(s) && /^[A-Za-z0-9_-]+$/.test(s));
+  const parts = rest.split('/').filter(Boolean).map((s) => { try { return decodeURIComponent(s); } catch { return s; } }).filter((s) => !isId(s));
+  const last = parts[parts.length - 1];
+  if (!last) return 'the home page';
+  const words = last.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/[-_.]+/g, ' ').trim().toLowerCase();
+  return `the ${words || 'home'} page`;
+}
+// END pageName