@supersuit/artifacts 0.30.0 → 0.30.1

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 `@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.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

@@ -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);
@@ -184,7 +186,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 +268,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", { "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.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",