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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon-says-build/ssb-overlay",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "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

@@ -146,7 +146,6 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
   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
@@ -519,8 +518,11 @@ function Host({ config, getToken, sessionKey, route, capture, storage, pushToken
             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: stopDrawing, 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?',
@@ -563,6 +565,7 @@ function Panel({ gate, chat, work, elsewhere, onDemo, screen, insets, draft, set
   const sheet = useRef(null);
   const scroll = useRef(null);
   const [at, setAt] = useState(COMPACT);
+  const [openShot, setOpenShot] = useState(null);    // the message whose full screen is showing (its preview otherwise)
   const [footH, setFootH] = useState(120);
   const [open, setOpen] = useState(null);            // the draft whose detail is shown
   const { flying, waiting, sent } = workView({ inFlight: work, chat });
@@ -700,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.2';
+export const OVERLAY_VERSION = '0.9.4';
 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