@simon-says-build/ssb-overlay 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/ssb-overlay",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "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,7 +144,9 @@ 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
   const liveRef = useRef(null);
   const [tool, setTool] = useState('pencil');        // pencil | box
@@ -154,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(() => {
@@ -197,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]);
 
@@ -269,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]);
 
@@ -296,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 () => {
@@ -447,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 }] }),
@@ -470,7 +512,7 @@ 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 },
@@ -478,7 +520,7 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
           }, 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'))),
+          h(Pressable, { onPress: stopDrawing, accessibilityRole: 'button', accessibilityLabel: 'Stop drawing', style: s.hintBtn }, h(Text, { style: s.hintLink }, 'Cancel'))),
         top != null ? h(View, { style: [s.field, { top }] },
           h(TextInput, {
             testID: 'ssb-draw-note', value: note, onChangeText: setNote, placeholder: 'What should change here?',
@@ -489,7 +531,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,
     });
@@ -626,7 +668,11 @@ function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, set
         h(BottomSheetScrollView, { ref: scroll, style: s.thread, contentContainerStyle: { paddingTop: 8, paddingBottom: footH + 8 }, keyboardShouldPersistTaps: 'handled', onContentSizeChange: () => scroll.current?.scrollToEnd({ animated: true }) },
           msgs.length ? null : h(Text, { style: s.empty }, 'Say what should change on this screen, or tap Draw to scribble on it.'),
           ...msgs.map((m) => h(View, { key: m.id, style: [s.bubble, m.role === 'user' ? s.mine : s.theirs] },
-            m.image ? h(Image, { source: { uri: m.image }, style: s.thumb, resizeMode: 'contain' }) : null,
+            // The marked part as the preview; a tap shows the full screen
+            // (2026-10-23, functions/shot-crop.mjs — the console and the
+            // extension do the same).
+            m.image ? h(Pressable, { onPress: () => setOpenShot(openShot === m.id ? null : m.id), accessibilityRole: 'imagebutton', accessibilityLabel: openShot === m.id ? 'Show the marked part' : 'Show the full screen' },
+              h(Image, { source: { uri: openShot === m.id || !m.preview ? m.image : m.preview }, style: openShot === m.id ? s.shotFull : s.thumb, resizeMode: 'contain' })) : null,
             h(Text, { style: m.role === 'user' ? s.mineText : s.theirsText }, m.text),
             m.id === offer ? h(Pressable, { onPress: onStartAll, disabled: busy, style: [s.primary, { marginTop: 8, alignSelf: 'flex-start' }] }, h(Text, { style: s.primaryText }, 'Confirm and start work')) : null)),
           chat?.thinking ? h(View, { style: [s.bubble, s.theirs, s.row] }, h(ActivityIndicator, { size: 'small', color: MUTED }), h(Text, { style: [s.theirsText, { marginLeft: 8 }] }, 'SSB is thinking…')) : null,
@@ -707,6 +753,7 @@ const s = StyleSheet.create({
   mineText: { color: '#fff', fontSize: 15, lineHeight: 21 },
   theirsText: { color: TEXT, fontSize: 15, lineHeight: 21 },
   thumb: { width: 140, height: 220, borderRadius: 8, marginBottom: 6, backgroundColor: '#0006' },
+  shotFull: { width: 260, height: 460, borderRadius: 8, marginBottom: 6, backgroundColor: '#0006' },
   error: { color: RED, fontSize: 13, paddingHorizontal: 16, paddingTop: 6 },
   composer: { paddingHorizontal: 12, paddingTop: 10, borderTopWidth: 1, borderTopColor: LINE, backgroundColor: SURFACE },
   input: { minHeight: 44, maxHeight: 120, fontSize: 16, color: TEXT, backgroundColor: BG, borderWidth: 1, borderColor: LINE, borderRadius: 14, paddingHorizontal: 13, paddingTop: 11, paddingBottom: 11 },

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.0';
+export const OVERLAY_VERSION = '0.9.2';
 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