@simon-says-build/demo-player 0.1.0 → 0.2.0

package/index.d.ts

@@ -15,3 +15,12 @@ export function DemoHost(props: {
   insets?: { top?: number; bottom?: number };
   children?: ReactNode;
 }): ReactNode;
+
+/**
+ * Play a demo now, in the bundle already running (the in-app SSB overlay's
+ * ▶ Demo hands SimonSays' answer here). `null` stops it. A demo baked into
+ * the bundle (`<DemoHost demo>`) outranks it. Returns false for an incomplete demo.
+ */
+export function playDemo(demo: DemoBundle | null): boolean;
+export function currentDemo(): { id: string; token: string; api: string } | null;
+export function onDemo(fn: (demo: { id: string; token: string; api: string } | null) => void): () => void;

package/index.js

@@ -1,2 +1,2 @@
 export { DemoHost } from './src/DemoHost.js';
-export { demoConfig, findTarget, handlerFor, phoneSteps, scalePoint } from './src/core.js';
+export { demoConfig, findTarget, handlerFor, phoneSteps, scalePoint, playDemo, currentDemo, onDemo } from './src/core.js';

package/package.json

@@ -1,17 +1,27 @@
 {
   "name": "@simon-says-build/demo-player",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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",
+    "url": "git+https://github.com/simon-says-studio/simon-says-build.git",
+    "directory": "packages/demo-player"
+  },
   "type": "module",
   "main": "index.js",
   "types": "index.d.ts",
-  "files": ["index.js", "index.d.ts", "src/", "README.md"],
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "src/",
+    "README.md"
+  ],
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.76"
   },
   "scripts": {
-    "test": "node --test test/"
+    "test": "node --test test/*.test.mjs"
   },
   "license": "UNLICENSED"
 }

package/src/DemoHost.js

@@ -9,7 +9,7 @@
 // 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, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
-import { cardBox, demoConfig, findTarget, handlerFor, phoneSteps, scalePoint } from './core.js';
+import { cardBox, currentDemo, demoConfig, findTarget, handlerFor, onDemo, phoneSteps, playDemo, scalePoint } from './core.js';
 import { demoApi, tourOf } from './api.js';
 
 const h = React.createElement;
@@ -44,12 +44,16 @@ const measure = (fiber) => new Promise((resolve) => {
 const DEFAULT_INSETS = { top: 60, bottom: 100 };
 
 export function DemoHost({ demo, router, insets, children }) {
-  const config = useMemo(() => demoConfig(demo || {}), [demo?.id, demo?.token, demo?.api]);
+  const baked = useMemo(() => demoConfig(demo || {}), [demo?.id, demo?.token, demo?.api]);
+  const [started, setStarted] = useState(currentDemo);
+  useEffect(() => onDemo(setStarted), []);
+  const config = baked || started;
   if (!config) return children ?? null;
-  return h(Player, { config, router, insets: { ...DEFAULT_INSETS, ...(insets || {}) } }, children);
+  // Keyed by the demo: a second ▶ Demo starts its own tour from the first step.
+  return h(Player, { key: config.id, config, router, insets: { ...DEFAULT_INSETS, ...(insets || {}) }, onClose: baked ? null : () => playDemo(null) }, children);
 }
 
-function Player({ config, router, insets, children }) {
+function Player({ config, router, insets, onClose, children }) {
   const rootRef = useRef(null);
   const screen = useWindowDimensions();
   const api = useMemo(() => demoApi(config), [config]);
@@ -65,7 +69,7 @@ function Player({ config, router, insets, children }) {
   useEffect(() => {
     let live = true;
     api.load()
-      .then((d) => { if (live) setSteps(phoneSteps(tourOf(d)).concat()); })
+      .then((d) => { if (live) setSteps(phoneSteps(tourOf(d, { here: !!config.here })).concat()); })
       .catch((e) => { if (live) setError(e.message); });
     return () => { live = false; };
   }, [api]);
@@ -127,6 +131,10 @@ function Player({ config, router, insets, 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 (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.
+      if (done && onClose) return h(Pressable, { style: [s.pill, { bottom: insets.bottom + 12 }], onPress: onClose, accessibilityRole: 'button', accessibilityLabel: 'Close the demo', testID: 'ssb-demo-close' },
+        h(Text, { style: s.pillText }, 'Demo done · close'));
       return h(Pressable, { style: [s.pill, { bottom: insets.bottom + 12 }], onPress: () => { setTucked(false); if (done) { setDone(false); setIndex(0); } }, accessibilityRole: 'button', accessibilityLabel: 'Open the demo' },
         h(Text, { style: s.pillText }, done ? 'Demo done · replay' : `Demo ${index + 1}/${steps.length}`));
     }

package/src/api.js

@@ -17,12 +17,14 @@ export function demoApi({ api, id, token }, fetchImpl = globalThis.fetch) {
 }
 
 /** The tour a phone plays: every actor's steps, each actor introduced by who to be. */
-export function tourOf(demo) {
+// A demo played in the build the viewer is already using, signed in as
+// themselves (`here`, the overlay's ▶ Demo), is not told who to sign in as.
+export function tourOf(demo, { here = false } = {}) {
   const out = [];
   for (const [actorIndex, a] of (demo?.actors || []).entries()) {
     const steps = a.tour?.steps || [];
     if (!steps.length) continue;
-    out.push({ kind: 'say', caption: `This part is as ${a.label}. Sign in as ${a.email} if you aren't already, then tap Next.`, actorIndex, intro: true });
+    if (!here) out.push({ kind: 'say', caption: `This part is as ${a.label}. Sign in as ${a.email} if you aren't already, then tap Next.`, actorIndex, intro: true });
     for (const s of steps) out.push({ ...s, actorIndex });
   }
   return out;

package/src/core.js

@@ -103,9 +103,9 @@ export function phoneSteps(steps) {
 }
 
 /** The demo this bundle carries (EXPO_PUBLIC_SSB_DEMO_*), or null when it carries none. */
-export function demoConfig({ id, token, api } = {}) {
+export function demoConfig({ id, token, api, here } = {}) {
   if (!id || !token || !api) return null;
-  return { id: String(id), token: String(token), api: String(api).replace(/\/+$/, '') };
+  return { id: String(id), token: String(token), api: String(api).replace(/\/+$/, ''), ...(here ? { here: true } : {}) };
 }
 
 // The card's box, inside the band between the insets. With no element and no
@@ -118,3 +118,18 @@ export function cardBox(place, at, screen, insets, card) {
   const box = bubbleBox(place, el, band, { w: card.w, h: card.h });
   return { left: box.left, top: box.top + insets.top };
 }
+
+// A DEMO STARTED AT RUN TIME (2026-10-20, the in-app overlay's ▶ Demo, "Ready
+// is this build"): the bundle running IS the preview of the work, so nothing
+// is baked into it — SimonSays hands the overlay a demo's id and token, and
+// the overlay hands them here. <DemoHost> plays a baked demo first, else this.
+let runtime = null;
+const listeners = new Set();
+/** Play this demo now ({ id, token, api }); null stops it. */
+export function playDemo(demo) {
+  runtime = demo ? demoConfig(demo) : null;
+  for (const fn of listeners) fn(runtime);
+  return !!runtime || !demo;
+}
+export const currentDemo = () => runtime;
+export function onDemo(fn) { listeners.add(fn); return () => listeners.delete(fn); }