@simon-says-build/ssb-overlay 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/ssb-overlay",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "SSB inside a native app SimonSays controls: the SSB button for the people who change the app (screenshot, mark, ask for a change), and Help for everyone who uses it.",
   "repository": {
     "type": "git",

package/src/SsbHost.js

@@ -13,7 +13,10 @@
 // make it an option"). **Draw** puts a pencil and a box on the live screen:
 // scribble on or box what should change (as much as it takes, Undo), say what,
 // send — the drawing is captured ON the screen, with the field and our chrome
-// hidden. (It was **Mark**, one pin or one box, until 0.2.0.) SSB replies on the thread and proposes jobs; the drafts bar
+// hidden. The screen is FROZEN while they draw (2026-10-25): a picture of it,
+// taken as Draw opens, covers the app, so the keyboard the field raises (an
+// app's KeyboardAvoidingView), a scroll or a live update can't slide the app
+// out from under the drawing. (It was **Mark**, one pin or one box, until 0.2.0.) SSB replies on the thread and proposes jobs; the drafts bar
 // starts them. The same conversation is on the console.
 //
 // No JSX, so it needs nothing from the app's Babel setup beyond React Native's.
@@ -70,6 +73,16 @@ const frames = (n = 2) => new Promise((resolve) => {
   step(n);
 });
 
+// Until the keyboard is down (and the app back where it sits without it), or
+// half a second: a picture taken mid-slide would freeze the app shifted.
+const keyboardGone = (up) => new Promise((resolve) => {
+  if (!up.current) { resolve(); return; }
+  let sub = null;
+  const done = () => { sub?.remove(); clearTimeout(t); frames(2).then(resolve); };
+  const t = setTimeout(done, 500);
+  sub = Keyboard.addListener('keyboardDidHide', done);
+});
+
 // Where this app's JS was loaded from: a preview's tunnel, or a file.
 const scriptURL = () => {
   try { const sc = NativeModules.SourceCode; return sc?.getConstants?.()?.scriptURL ?? sc?.scriptURL ?? ''; } catch { return ''; }
@@ -131,6 +144,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   const [gate, setGate] = useState(null);            // {show, person, app, canJob} once SSB has answered
   const [mode, setMode] = useState('idle');          // idle | sheet | drawing | capturing
   const [shot, setShot] = useState(null);            // the screen as it was when the button was tapped
+  const [frozen, setFrozen] = useState(null);        // while drawing: { pic, hosts } — the screen held still under the pencil
   const [items, setItems] = useState([]);            // what is drawn: strokes and boxes, in screen points (core.js)
   const [openShot, setOpenShot] = useState(null);    // the message whose full screen is showing (its preview otherwise)
   const [live, setLive] = useState(null);            // the item under the finger
@@ -155,6 +169,8 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   const [work, setWork] = useState([]);              // the app's work in flight (GET /api/in-app/work)
   const [seen, setSeen] = useState(null);
   const [kbTop, setKbTop] = useState(screen.height);
+  const kbUpRef = useRef(null);
+  kbUpRef.current = kbTop < screen.height;           // is a keyboard up
 
   // ---- the gate: ask once per login --------------------------------------
   useEffect(() => {
@@ -198,7 +214,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     setShot(null);
     if (mode === 'drawing') {
       if (note.trim()) setDraft((d) => (d ? `${d}\n${note}` : note));
-      setItems([]); setNote(''); setMode('sheet');
+      setItems([]); setNote(''); setFrozen(null); setMode('sheet');
     }
   }, [route]);
 
@@ -270,7 +286,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     Keyboard.dismiss();
     setSeen(lastReplyId(chat));
     setSeenDemo(chat?.demo?.url ?? null);
-    setItems([]); setNote('');
+    setItems([]); setNote(''); setFrozen(null);
     setMode('idle');
   }, [chat]);
 
@@ -297,28 +313,51 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   }, [draft, busy, deliver, chatId, route, screen, shot]);
 
   // What the app has under the scribbles, named the way the app names it.
-  const elementUnder = useCallback(async (pt) => {
-    if (!pt) return null;
+  // Measured as the screen freezes, so they match the picture the drawing is on.
+  const measureHosts = useCallback(async () => {
     try {
       const hosts = namedHosts(fiberOf(rootRef.current), fiberOf(chromeRef.current));
-      const cands = await Promise.all(hosts.map(async (fiber) => ({ fiber, rect: await measure(fiber) })));
-      const hit = smallestAt(cands, pt);
+      return await Promise.all(hosts.map(async (fiber) => ({ fiber, rect: await measure(fiber) })));
+    } catch { return null; }
+  }, []);
+  const elementUnder = useCallback(async (pt, held) => {
+    if (!pt) return null;
+    try {
+      const hit = smallestAt(held || (await measureHosts()) || [], pt);
       return hit ? describeHost(hit.fiber) : null;
     } catch { return null; }
+  }, [measureHosts]);
+
+  // ✎ Draw: the sheet steps aside, the keyboard goes (its app may have moved
+  // for it), and the screen is taken and held under the pencil. With no
+  // `capture`, they draw on the live screen as before.
+  const startDrawing = useCallback(async () => {
+    setError(null);
+    Keyboard.dismiss();
+    setMode('capturing');
+    await keyboardGone(kbUpRef);
+    const [pic, hosts] = await Promise.all([grab(), measureHosts()]);
+    setFrozen(pic ? { pic, hosts } : null);
+    if (pic) setShot(pic);
+    setMode('drawing');
+  }, [grab, measureHosts]);
+  const stopDrawing = useCallback(() => {
+    Keyboard.dismiss(); setItems([]); setFrozen(null); setMode('sheet');
   }, []);
 
   const sendDrawing = useCallback(async () => {
     const text = note.trim();
     if (!text || busy || !items.length) return;
     Keyboard.dismiss();
-    const element = await elementUnder(drawingPoint(items));
-    setMode('capturing');                            // only the drawing stays on screen
+    const element = await elementUnder(drawingPoint(items), frozen?.hosts);
+    setMode('capturing');                            // only the drawing (on the held screen) stays
     const pic = await grab();
     setMode('sheet');
+    setFrozen(null);
     const ok = await deliver(sendBody({ chatId, text, route, platform: Platform.OS, screen, mark: drawingMark(items, screen), element, screenshot: pic || shot }));
     if (ok) { setItems([]); setNote(''); }
     else setDraft((d) => d || text);
-  }, [note, busy, items, elementUnder, grab, deliver, chatId, route, screen, shot]);
+  }, [note, busy, items, frozen, elementUnder, grab, deliver, chatId, route, screen, shot]);
 
   // ---- 🎙 Talk ------------------------------------------------------------------
   const endTalk = useCallback(async () => {
@@ -448,7 +487,9 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
 
   const chrome = (() => {
     if (!gate) return null;
-    if (mode === 'capturing') return items.length ? h(View, { style: StyleSheet.absoluteFill, pointerEvents: 'none' }, ...drawingViews(items)) : null;
+    // The held screen, under the drawing, in place of the live app.
+    const still = frozen ? h(Image, { source: { uri: frozen.pic }, style: StyleSheet.absoluteFill, resizeMode: 'stretch', testID: 'ssb-draw-frozen' }) : null;
+    if (mode === 'capturing') return items.length || still ? h(View, { style: StyleSheet.absoluteFill, pointerEvents: 'none' }, still, ...drawingViews(items)) : null;
     if (mode === 'idle' && talk) {
       return h(View, { style: [s.pill, { top: insets.top + 8 }], testID: 'ssb-talk-pill' },
         h(View, { style: [s.talkDot, talk.status !== 'live' && { backgroundColor: MUTED }] }),
@@ -471,15 +512,18 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
       return h(View, { style: StyleSheet.absoluteFill, pointerEvents: 'box-none' },
         // The surface first, so the hint and the field above it still take their own taps.
         h(View, { style: StyleSheet.absoluteFill, ...pan.panHandlers, testID: 'ssb-draw-surface' },
-          ...drawingViews(live ? [...items, live] : items)),
+          still, ...drawingViews(live ? [...items, live] : items)),
         h(View, { style: [s.hint, { top: insets.top + 8 }] },
           ...['pencil', 'box'].map((t) => h(Pressable, {
             key: t, onPress: () => setTool(t), accessibilityRole: 'button', accessibilityState: { selected: tool === t },
             accessibilityLabel: t === 'box' ? 'Box: drag a box round it' : 'Pencil: scribble on it', style: [s.toolBtn, tool === t && s.toolOn],
           }, h(Text, { style: [s.toolText, tool === t && s.toolTextOn] }, t === 'box' ? '▭ Box' : '✎ Pencil'))),
           h(View, { style: s.hintSep }),
-          items.length ? h(Pressable, { onPress: () => setItems((all) => all.slice(0, -1)), accessibilityRole: 'button', accessibilityLabel: 'Undo the last one', style: s.hintBtn }, h(Text, { style: s.hintLink }, 'Undo')) : null,
-          h(Pressable, { onPress: () => { Keyboard.dismiss(); setItems([]); setMode('sheet'); }, accessibilityRole: 'button', accessibilityLabel: 'Stop drawing', style: s.hintBtn }, h(Text, { style: s.hintLink }, 'Cancel'))),
+          // Undo and Cancel are buttons, always there (Michael, 2026-10-26: two
+          // small links, Undo only after a mark, read as missing). Undo takes
+          // the last mark off; Cancel drops them all and goes back to the panel.
+          h(Pressable, { testID: 'ssb-draw-undo', onPress: () => setItems((all) => all.slice(0, -1)), disabled: !items.length, accessibilityRole: 'button', accessibilityLabel: 'Undo the last one', accessibilityState: { disabled: !items.length }, style: [s.hintBtn, !items.length && s.disabled] }, h(Text, { style: s.hintBtnText }, '↶ Undo')),
+          h(Pressable, { testID: 'ssb-draw-cancel', onPress: stopDrawing, accessibilityRole: 'button', accessibilityLabel: 'Stop drawing', style: [s.hintBtn, s.hintCancel] }, h(Text, { style: s.hintBtnText }, '✕ Cancel'))),
         top != null ? h(View, { style: [s.field, { top }] },
           h(TextInput, {
             testID: 'ssb-draw-note', value: note, onChangeText: setNote, placeholder: 'What should change here?',
@@ -490,7 +534,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
     if (mode === 'sheet') return h(Panel, {
       gate, chat, work, screen, insets, draft, setDraft, busy, error, elsewhere,
       onDemo: typeof playDemo === 'function' ? startDemo : null,
-      onSend: sendDraft, onDraw: () => { Keyboard.dismiss(); setMode('drawing'); }, onClose: close,
+      onSend: sendDraft, onDraw: startDrawing, onClose: close,
       canTalk: !!voice?.Room, talk, onTalk: startTalk, onEndTalk: endTalk, onMute: toggleMute,
       onNew: () => { rememberChat(null); setChat(null); }, onDecide: decide, onStartAll: startAll, onOpenLink: openLink,
     });
@@ -659,8 +703,9 @@ const s = StyleSheet.create({
   toolText: { color: TEXT, fontSize: 14, fontWeight: '600' },
   toolTextOn: { color: '#fff' },
   hintSep: { width: 1, height: 18, backgroundColor: LINE, marginHorizontal: 6 },
-  hintLink: { color: '#8fb3ff', fontSize: 14, fontWeight: '600' },
-  hintBtn: { paddingHorizontal: 6, paddingVertical: 2 },
+  hintBtn: { paddingVertical: 5, paddingHorizontal: 10, borderRadius: 12, marginLeft: 4, borderWidth: 1, borderColor: LINE, backgroundColor: SURFACE },
+  hintCancel: { borderColor: 'rgba(255,77,90,0.5)' },
+  hintBtnText: { color: TEXT, fontSize: 14, fontWeight: '600' },
   field: { position: 'absolute', left: 12, right: 12, height: 56, flexDirection: 'row', alignItems: 'center', paddingLeft: 14, paddingRight: 6, borderRadius: 16, backgroundColor: SURFACE, borderWidth: 1, borderColor: LINE, ...shadow },
   fieldInput: { flex: 1, fontSize: 16, color: TEXT },
   sendRound: { width: 40, height: 40, borderRadius: 20, backgroundColor: BLUE, alignItems: 'center', justifyContent: 'center', marginLeft: 4, ...glow(BLUE, 10) },

package/src/core.js

@@ -5,7 +5,7 @@
 export const DEFAULT_API = 'https://simonsays.build';
 // What this overlay is, said when it registers for pushes (clientInfo below).
 // Kept equal to package.json by test/core.test.mjs.
-export const OVERLAY_VERSION = '0.9.1';
+export const OVERLAY_VERSION = '0.9.3';
 export const HOST = 5;
 export const TEXT = 6;
 const PIN_SLOP = 12;           // a drag shorter than this is a tap: a pin, not a box