@simon-says-build/demo-player 0.3.0 → 0.5.0

package/index.d.ts

@@ -29,3 +29,15 @@ export function onDemo(fn: (demo: { id: string; token: string; api: string } | n
 export const PLAYER_VERSION: string;
 /** The changes a demo's last card offers to approve or discuss: one per `job:<id>` feature. */
 export function reviewChangesOf(demo: unknown): { jobId: string; title: string }[];
+/** A release's demo (0.4.0): the session merge its review card releases, or null. */
+export function releaseOf(demo: unknown): { jobId: string; label: string; note: string } | null;
+
+/**
+ * React Navigation (an app without expo-router): a path is the chain of route
+ * names to the focused screen, "/MainStack/Tabs/Dashboard". `nav` is the
+ * NavigationContainer's ref (or the container), read at call time.
+ */
+export function navigationRoute(nav: unknown): string;
+export function navigationRouter(nav: unknown): { push: (path: string) => boolean };
+export function navigateArgs(path: string): [string] | [string, object] | null;
+export function pathOfState(state: unknown): string;

package/index.js

@@ -1,2 +1,3 @@
 export { DemoHost } from './src/DemoHost.js';
-export { demoConfig, findTarget, handlerFor, phoneSteps, scalePoint, playDemo, currentDemo, onDemo, reviewChangesOf, PLAYER_VERSION } from './src/core.js';
+export { demoConfig, findTarget, handlerFor, phoneSteps, scalePoint, playDemo, currentDemo, onDemo, reviewChangesOf, releaseOf, PLAYER_VERSION } from './src/core.js';
+export { navigationRoute, navigationRouter, navigateArgs, pathOfState } from './src/navigation.js';

package/package.json

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

package/src/DemoHost.js

@@ -6,12 +6,13 @@
 // the viewer through it: a ring on each step's element, a caption card with
 // Back / Next, "Do it for me" on taps and typing, and a pill to tuck it away.
 // A demo of CHANGES ends on a review card (0.3.0): ✓ Approve or 💬 Discuss
+// (a RELEASE's demo, 0.4.0: one Approve & release for all of them)
 // each one, the extension's guided review on the phone (docs/GUIDED-REVIEW.md).
 //
 // 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, reviewChangesOf, scalePoint } from './core.js';
+import { cardBox, currentDemo, demoConfig, findTarget, handlerFor, onDemo, phoneSteps, playDemo, releaseOf, reviewChangesOf, scalePoint } from './core.js';
 import { demoApi, tourOf } from './api.js';
 
 const h = React.createElement;
@@ -68,12 +69,13 @@ function Player({ config, router, insets, onClose, children }) {
   const [tucked, setTucked] = useState(false);
   const [done, setDone] = useState(false);
   const [changes, setChanges] = useState([]);     // what the last card reviews (reviewChangesOf)
+  const [release, setRelease] = useState(null);   // a release's demo ends on releasing it (releaseOf)
   const [reviewing, setReviewing] = useState(false);
 
   useEffect(() => {
     let live = true;
     api.load()
-      .then((d) => { if (live) { setSteps(phoneSteps(tourOf(d, { here: !!config.here })).concat()); setChanges(reviewChangesOf(d)); } })
+      .then((d) => { if (live) { setSteps(phoneSteps(tourOf(d, { here: !!config.here })).concat()); setChanges(reviewChangesOf(d)); setRelease(releaseOf(d)); } })
       .catch((e) => { if (live) setError(e.message); });
     return () => { live = false; };
   }, [api]);
@@ -135,7 +137,7 @@ function Player({ config, router, insets, onClose, children }) {
   const overlay = (() => {
     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, screen, insets, onBack: steps.length ? () => setReviewing(false) : null, onDone: finish, onHide: () => setTucked(true) });
+    if (reviewing && !tucked) return h(Review, { api, changes, release, screen, insets, onBack: steps.length ? () => setReviewing(false) : null, onDone: finish, onHide: () => setTucked(true) });
     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.
@@ -144,7 +146,7 @@ function Player({ config, router, insets, onClose, children }) {
       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' : reviewing ? 'Review the changes' : `Demo ${index + 1}/${steps.length}`));
     }
-    if (!step && changes.length) return h(Review, { api, changes, screen, insets, onBack: null, onDone: finish, onHide: () => setTucked(true) });
+    if (!step && changes.length) return h(Review, { api, changes, release, screen, insets, onBack: null, onDone: finish, onHide: () => setTucked(true) });
     if (!step) return h(Card, { at: null, screen, insets, card, setCard, title: 'Demo', body: 'This demo has no steps a phone can play.' });
     const canDo = (step.kind === 'click' || step.kind === 'fill') && found && (step.kind === 'click' ? handlerFor(found, 'onPress') : handlerFor(found, 'onChangeText'));
     return h(React.Fragment, null,
@@ -171,8 +173,15 @@ function Player({ config, router, insets, onClose, children }) {
 // SSB revises THAT change (functions/demo.mjs reviewRef). Nothing here holds
 // the tour: Done closes it whatever is left undecided.
 const ROW = { idle: null, approving: 'Approving…', approved: '✓ Approved', sending: 'Sending…', sent: 'Sent to SSB — it will revise this' };
-function Review({ api, changes, screen, insets, onBack, onDone, onHide }) {
+function Review({ api, changes, release, screen, insets, onBack, onDone, onHide }) {
   const [rows, setRows] = useState({});           // jobId → { state, error, text }
+  // A RELEASE (0.4.0): the changes go out together, so they are approved
+  // together — one button for the release; each change can still be discussed.
+  const [rel, setRel] = useState({ state: 'idle', error: null });
+  const doRelease = () => {
+    setRel({ state: 'releasing', error: null });
+    api.release().then(() => setRel({ state: 'released', error: null })).catch((e) => setRel({ state: 'idle', error: e.message }));
+  };
   const set = (id, patch) => setRows((r) => ({ ...r, [id]: { ...(r[id] || {}), ...patch } }));
   const approve = (id) => {
     set(id, { state: 'approving', error: null });
@@ -184,10 +193,12 @@ function Review({ api, changes, screen, insets, onBack, onDone, onHide }) {
     set(id, { state: 'sending', error: null });
     api.discuss(id, text).then(() => set(id, { state: 'sent' })).catch((e) => set(id, { state: 'discussing', error: e.message }));
   };
-  const left = changes.filter((c) => !['approved', 'sent'].includes(rows[c.jobId]?.state)).length;
+  const left = release ? 0 : changes.filter((c) => !['approved', 'sent'].includes(rows[c.jobId]?.state)).length;
   return h(View, { style: [s.card, s.review, { top: insets.top + 12, maxHeight: screen.height - insets.top - insets.bottom - 24, maxWidth: screen.width - 32, left: Math.max(16, (screen.width - Math.min(360, screen.width - 32)) / 2) }], testID: 'ssb-demo-review' },
-    h(Text, { style: s.title }, changes.length === 1 ? 'Review the change' : `Review ${changes.length} changes`),
-    h(Text, { style: s.body }, 'Approve what looks right. Anything that should be different, say so — SSB revises it.'),
+    h(Text, { style: s.title }, release ? (changes.length === 1 ? 'The next release: 1 change' : `The next release: ${changes.length} changes`)
+      : changes.length === 1 ? 'Review the change' : `Review ${changes.length} changes`),
+    h(Text, { style: s.body }, release ? `Happy with it? ${release.label} sends them out together. Anything that should be different, say so — SSB revises it.`
+      : 'Approve what looks right. Anything that should be different, say so — SSB revises it.'),
     h(ScrollView, { style: s.changes, keyboardShouldPersistTaps: 'handled' }, ...changes.map((c) => {
       const r = rows[c.jobId] || {};
       const state = r.state || 'idle';
@@ -202,12 +213,16 @@ function Review({ api, changes, screen, insets, onBack, onDone, onHide }) {
             button('Send', () => send(c.jobId), true))) : null,
         state === 'idle' ? h(View, { style: s.actions },
           button('💬 Discuss', () => set(c.jobId, { state: 'discussing' })),
-          button('✓ Approve', () => approve(c.jobId), true)) : null);
+          release ? null : button('✓ Approve', () => approve(c.jobId), true)) : null);
     })),
+    release && rel.state === 'released' ? h(Text, { style: s.changeState, testID: 'ssb-release-done' }, 'Approved — it goes out in 5 minutes. Undo it on the release page in SimonSays if you need to.') : null,
+    release && rel.error ? h(Text, { style: s.error }, rel.error) : null,
     h(View, { style: [s.actions, s.reviewFoot] },
       button('Hide', onHide),
       onBack ? button('Back', onBack) : null,
-      button(left ? `Done (${left} undecided)` : 'Done', onDone, !left)));
+      release && rel.state !== 'released'
+        ? button(rel.state === 'releasing' ? 'Approving…' : release.label, rel.state === 'releasing' ? () => {} : doRelease, true)
+        : button(left ? `Done (${left} undecided)` : 'Done', onDone, !left)));
 }
 
 const button = (label, onPress, primary = false) => h(Pressable, {

package/src/api.js

@@ -16,6 +16,9 @@ export function demoApi({ api, id, token }, fetchImpl = globalThis.fetch) {
     // Guided review (0.3.0): approve one change of this demo, or say something
     // about it in the conversation it came from — SSB revises the change.
     approve: (jobId) => call('/review', { method: 'POST', body: JSON.stringify({ jobId }) }),
+    // A release's demo (0.4.0): approve and release the session, as the person
+    // the demo was made for, after the five-minute cool-off.
+    release: () => call('/release', { method: 'POST', body: '{}' }),
     discuss: (jobId, text) => call('/chat', { method: 'POST', body: JSON.stringify({ text, context: { about: jobId } }) }),
   };
 }

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.3.0';
+export const PLAYER_VERSION = '0.5.0';
 
 export const HOST = 5;
 export const TEXT = 6;
@@ -158,3 +158,14 @@ export function reviewChangesOf(demo) {
   }
   return out;
 }
+
+// A RELEASE'S DEMO (0.4.0, docs/SESSION-BRANCHES.md "Told when the release is
+// ready"): a demo of one session's changes carries its merge job
+// (`sessionMerge`), and the review card ends on releasing them together —
+// the button saying what the app's release does ("Approve & release", or
+// "Approve" where the app has a release cycle of its own). Null otherwise.
+export function releaseOf(demo) {
+  const sm = demo?.sessionMerge;
+  if (!sm || typeof sm.jobId !== 'string' || !sm.jobId) return null;
+  return { jobId: sm.jobId, label: String(sm.label || 'Approve & release'), note: String(sm.note || '') };
+}

package/src/navigation.js

@@ -0,0 +1,52 @@
+// REACT NAVIGATION, for an app without expo-router (2026-10-22, SuperSub's
+// Center and Sub apps). A demo's `goto` step carries an in-app PATH, and the
+// in-app overlay reports the screen a person is on as one. For an
+// expo-router app that is its URL path. For a React Navigation app it is the
+// chain of route NAMES from the root to the focused screen:
+//
+//     /MainStack/Tabs/Dashboard
+//
+// navigationRoute() reads that off the navigation container, and
+// navigationRouter() replays it with nested navigate() calls, so a path the
+// overlay recorded is one the demo player can open. Both take the container
+// (or a ref to it, read at call time). Pure apart from the container.
+
+const containerOf = (nav) => (nav && 'current' in nav ? nav.current : nav);
+
+/** The focused route's path, "/A/B/C", from a navigation state; "" when there is none. */
+export function pathOfState(state) {
+  const names = [];
+  for (let s = state; s && Array.isArray(s.routes) && s.routes.length;) {
+    const r = s.routes[Number.isInteger(s.index) ? s.index : s.routes.length - 1];
+    if (!r?.name) break;
+    names.push(r.name);
+    s = r.state;
+  }
+  return names.length ? `/${names.map(encodeURIComponent).join('/')}` : '';
+}
+
+/** What navigate() is called with to open a path: [name, params], or null for a path that names nothing. */
+export function navigateArgs(path) {
+  const names = String(path || '').split('?')[0].split('/').filter(Boolean).map((n) => { try { return decodeURIComponent(n); } catch { return n; } });
+  if (!names.length) return null;
+  let params;
+  for (let i = names.length - 1; i >= 1; i--) params = params ? { screen: names[i], params } : { screen: names[i] };
+  return params ? [names[0], params] : [names[0]];
+}
+
+/** The current screen's path on a React Navigation container ("" before it is ready). */
+export function navigationRoute(nav) {
+  try { return pathOfState(containerOf(nav)?.getRootState?.()); } catch { return ''; }
+}
+
+/** A `router` for <DemoHost> on a React Navigation app: push(path) opens it. */
+export function navigationRouter(nav) {
+  return {
+    push(path) {
+      const c = containerOf(nav);
+      const args = navigateArgs(path);
+      if (!c?.navigate || !args) return false;
+      try { c.navigate(...args); return true; } catch { return false; }
+    },
+  };
+}