@supersuit/artifacts 0.30.0 → 0.30.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 `@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.30.2
+
+**Play from here is kept inside the screen on a host that insets the page.** 0.30.1 clamped the
+bar in page coordinates, but it is placed in its container's, so on the company host (whose card is
+inset from the screen edge) a word near the right edge still pushed the pill past it.
+
+- After it renders, the bar measures where it actually landed and moves back inside the screen, once
+  per tap.
+- DETECTOR: at iPhone width on a host with an inset card, pause and tap a word at the right edge.
+  The pill running off the screen means 0.30.1.
+- REMEDY: update the dependency.
+- Tests: `artifact-reader-controls.test.tsx` (a bar landing 30px right of its placement is moved
+  inside a 390px screen). Checked on the live page at iPhone size with Playwright.
+
+## 0.30.1
+
+**Play from here is one compact pill that stays on screen.** A word tapped near the right edge put
+the bar half off the screen, so its label wrapped to three lines inside a pill inside a pill, with
+an emoji play glyph that iOS draws as a picture.
+
+- One pill in the page's accent color, the UI font, 13px, never wrapping, a drawn play triangle, and
+  the close button inside the same pill.
+- Placed under the tapped word and clamped inside the screen.
+- DETECTOR: on a phone, pause and tap a word near the right edge. A three-line bubble means 0.30.0.
+- REMEDY: update the dependency.
+- Tests: `artifact-reader-controls.test.tsx` (no emoji, no wrapping, kept inside a 390px screen).
+
 ## 0.30.0
 
 **Every page has a page menu: one small "⋯" button, top right, whose items depend on who you are

package/lib/reader/artifact-reader.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // small bar offers to play from it, so reading and tapping never starts the audio by surprise. While
 // it plays the page follows the voice, until the reader scrolls on their own: then it leaves them
 // where they are and shows a button that brings them back to the voice.
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { nextRate, PlayerBar } from './player-bar.js';
 const SKIP = '[data-nospeak], [data-artifact-links], pre, [data-footnotes], sup, img, style, script';
 /** The elements that hold a run of text; a word whose block differs from the previous word's
@@ -144,6 +144,8 @@ export function isUserScrollKey(key, target) {
         return false;
     return true;
 }
+/** The Play from here bar's width, so it can be kept inside the screen. */
+const OFFER_WIDTH = 168;
 export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
     const narrator = label;
     const audioRef = useRef(null);
@@ -164,6 +166,20 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
     // The Play from here bar, beside the word a paused reader tapped, in page coordinates so it
     // stays with the word when they scroll.
     const [offer, setOffer] = useState(null);
+    const offerRef = useRef(null);
+    // The bar is placed in its container's coordinates, which on a host that insets the page are not
+    // the screen's; measure where it actually landed and nudge it back inside the screen.
+    useLayoutEffect(() => {
+        const el = offerRef.current;
+        if (!offer || !el || offer.nudged)
+            return;
+        const vw = document.documentElement.clientWidth || window.innerWidth;
+        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;
+        // 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]);
     useEffect(() => {
         const root = document.getElementById(rootId);
         if (!root)
@@ -184,7 +200,9 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
                 return;
             }
             const r = el.getBoundingClientRect();
-            setOffer({ idx, top: r.bottom + window.scrollY + 6, left: Math.max(8, r.left + window.scrollX) });
+            // Kept on screen: a word near the right edge would push the bar off it and wrap its label.
+            const vw = window.innerWidth || document.documentElement.clientWidth || 1024;
+            setOffer({ idx, top: r.bottom + window.scrollY + 8, left: Math.max(8, Math.min(r.left, vw - OFFER_WIDTH - 8)) + window.scrollX });
         };
         root.addEventListener('click', onClick);
         return () => root.removeEventListener('click', onClick);
@@ -264,7 +282,7 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
                     follow(true);
                 }, onSeeking: () => {
                     startedRef.current = true;
-                }, onPause: () => { playingRef.current = false; setPlaying(false); }, onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), offer ? (_jsxs("div", { "data-nospeak": true, className: "absolute z-50 flex items-center gap-1 rounded-full border px-1 py-1 text-sm shadow-lg", style: { top: offer.top, left: offer.left, background: ground, borderColor: accent }, children: [_jsx("button", { type: "button", "data-play-from-here": true, onClick: () => playFrom(offer.idx), className: "rounded-full px-3 py-1 font-medium", style: { background: accent, color: ground }, children: "\u25B6 Play from here" }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOffer(null), className: "px-2 opacity-70", children: "\u00D7" })] })) : null, playing && !following ? (_jsx("button", { type: "button", "data-follow-voice": true, "data-nospeak": true, onClick: backToVoice, className: "fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-4 py-2 text-sm font-medium shadow-lg", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)', background: accent, color: ground }, children: "Back to the voice" })) : null, _jsx(PlayerBar, { playing: playing, onToggle: toggle, label: narrator, accent: accent, ground: ground, value: t, max: dur, step: 0.1, onSeek: (v) => {
+                }, onPause: () => { playingRef.current = false; setPlaying(false); }, onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), offer ? (_jsxs("div", { ref: offerRef, "data-nospeak": true, "data-play-offer": true, className: "absolute z-50 flex items-center rounded-full font-sans text-[13px] leading-none shadow-lg", style: { top: offer.top, left: offer.left, width: OFFER_WIDTH, whiteSpace: 'nowrap', background: accent, color: ground }, children: [_jsxs("button", { type: "button", "data-play-from-here": true, onClick: () => playFrom(offer.idx), className: "flex flex-1 items-center gap-1.5 rounded-l-full py-2 pl-3 pr-1 font-medium", children: [_jsx("svg", { "aria-hidden": "true", width: "10", height: "11", viewBox: "0 0 10 11", children: _jsx("path", { d: "M1 1l8 4.5L1 10z", fill: "currentColor" }) }), "Play from here"] }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOffer(null), className: "rounded-r-full py-2 pl-1 pr-3 text-base leading-none opacity-70", children: "\u00D7" })] })) : null, playing && !following ? (_jsx("button", { type: "button", "data-follow-voice": true, "data-nospeak": true, onClick: backToVoice, className: "fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-4 py-2 text-sm font-medium shadow-lg", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)', background: accent, color: ground }, children: "Back to the voice" })) : null, _jsx(PlayerBar, { playing: playing, onToggle: toggle, label: narrator, accent: accent, ground: ground, value: t, max: dur, step: 0.1, onSeek: (v) => {
                     if (audioRef.current)
                         audioRef.current.currentTime = v;
                 }, progress: `${fmt(t)} / ${fmt(dur)}`, rate: rate, onRate: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "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",