@supersuit/artifacts 0.31.0 → 0.31.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 `@supersuit/artifacts`. One entry per version, newest first. Each entry says what changed, how a
 host can tell whether it is affected (DETECTOR), what a host does about it (REMEDY), and the tests.
 
+## 0.31.1
+
+**Play from here stays inside the page card, not only the screen.** 0.30.2 kept the bar inside
+the screen, but the company host draws the page in a rounded card that clips its content, so the
+bar's right end was still cut off at the card's edge.
+
+- The bar is bounded by every ancestor that clips (any overflow other than visible) as well as the
+  screen.
+- DETECTOR: at iPhone width on the company host, pause and tap a word at the right edge. A pill
+  whose right end is cut off means 0.30.2.
+- REMEDY: update the dependency.
+- Tests: `artifact-reader-controls.test.tsx` (a clipping card 10 to 380px keeps the bar's right edge
+  at 372px or less).
+
 ## 0.31.0
 
 **The owner and admins change a page's share and comment settings from the page menu, and a later

package/lib/reader/artifact-reader.js

@@ -173,10 +173,23 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
         const el = offerRef.current;
         if (!offer || !el || offer.nudged)
             return;
-        const vw = document.documentElement.clientWidth || window.innerWidth;
+        // Inside the screen AND inside whatever box clips the bar (a host's rounded page card).
+        let lo = 0;
+        let hi = document.documentElement.clientWidth || window.innerWidth;
+        for (let p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+            const o = getComputedStyle(p);
+            if (o.overflowX !== 'visible' || o.overflow !== 'visible') {
+                const b = p.getBoundingClientRect();
+                if (b.width > 0) {
+                    lo = Math.max(lo, b.left);
+                    hi = Math.min(hi, b.right);
+                }
+            }
+        }
+        const vw = hi;
         const r = el.getBoundingClientRect();
         // No layout to measure (a server render, a test DOM): leave the placement as computed.
-        const shift = r.width === 0 ? 0 : r.right > vw - 8 ? vw - 8 - r.right : r.left < 8 ? 8 - r.left : 0;
+        const shift = r.width === 0 ? 0 : r.right > vw - 8 ? vw - 8 - r.right : r.left < lo + 8 ? lo + 8 - r.left : 0;
         // Once per tap: measured again, an element with no layout would move forever.
         setOffer({ ...offer, left: offer.left + (Math.abs(shift) >= 1 ? shift : 0), nudged: true });
     }, [offer]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Publish markdown as branded, read-aloud pages from a Next.js app: the artifacts store, the route factory, the read-along reader, brand packs, password and confidential pages, and share cards.",
   "license": "MIT",
   "type": "module",