@supersuit/artifacts 0.33.0 → 0.33.1

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 `@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.33.1
+
+**The player bar: the speed button no longer reflows the bar, 2x is a speed, and the narrator
+line is gone** (Gary, 2026-10-12: "The bottom bar speed dial shouldn't cause reflow when clicked.
+2x should be an option. And read by freedom should be removed."). Ships after 0.33.0, which was
+already tagged when these were asked for.
+
+- **No reflow.** The speed button sized itself to its label, so "1x" (30px) to "1.25x" (48px) made
+  it grow and the seek line beside it shrink by 18px on every tap. It is now a fixed 56px
+  (`w-14`), centred, never wrapping, with tabular figures, and a tap inserts nothing into the bar.
+  Measured in Chromium at 390 and 1280 wide with the bar rendered at every speed: 0.32.0's button
+  was 29.86, 47.56, 40.17 and 31.55px wide and the seek line moved with it; 0.33.1's bar, button
+  and seek line have identical boxes at every speed.
+- **2x.** The button steps 1x, 1.25x, 1.5x, 2x and back to 1x (`RATES`, exported beside
+  `nextRate`).
+- **No "Read aloud by Freedom".** The bar shows no narrator line. `PlayerBar`'s and
+  `ArtifactReader`'s `label` and `BrandPack.narratorLabel` are optional and ignored, so a host or
+  pack that still sets them compiles and shows nothing; `freedomDefault` no longer sets one. The
+  narration itself is unchanged.
+- DETECTOR: on a narrated page, a line above the seek bar reading "Read aloud by ...", or the
+  speed button changing width as you tap it, or no 2x: 0.33.0 or earlier.
+- REMEDY: update the dependency. A host may delete its own `narratorLabel` from its packs (it is
+  ignored either way). Nothing else.
+- Tests: `reader/player-bar.test.tsx` (no narrator text even when a label is passed; the 1, 1.25,
+  1.5, 2 cycle; GUARD: one class list and one node count across every speed, with `w-14`,
+  `whitespace-nowrap`, `tabular-nums` and no horizontal padding). jsdom has no layout, so the
+  measured proof is the Chromium check above, run against the built `lib` with the host's Tailwind.
+
 ## 0.33.0
 
 **A comment thread can be resolved** (Gary, 2026-10-12: "Are you going to resolve the comments at

package/README.md

@@ -791,7 +791,7 @@ refuses the query and the error names a link that creates the index. A host with
 ## Brand packs
 
 A `BrandPack` is data plus at most two components: colours, type, the kicker line above a title,
-the narrator label, an optional full-page `Wrapper` and `Mark`, and an optional `share` block
+an optional full-page `Wrapper` and `Mark`, and an optional `share` block
 (a font loader and a backdrop) that draws the unfurl card. `freedomDefault` is the default look.
 Keep a pack carrying your own trademark in your own app, not in a pull request here.
 

package/lib/brand/pack.d.ts

@@ -38,8 +38,9 @@ export type BrandPack = {
     };
     /** The small uppercase line above a title, e.g. "From Sam Rivera". */
     kicker: string;
-    /** The label under the play button, by narrator voice id. */
-    narratorLabel: (voice?: string) => string;
+    /** Unused since 0.33.1: the player bar names no narrator (it read "Read aloud by Freedom").
+     *  Optional so a pack that still sets it compiles; nothing reads it. */
+    narratorLabel?: (voice?: string) => string;
     /** Optional full-page backdrop. Receives the page as children. */
     Wrapper?: ComponentType<{
         children: ReactNode;

package/lib/brand/pack.js

@@ -11,7 +11,6 @@ export const freedomDefault = {
         body: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
     },
     kicker: 'A page from Freedom',
-    narratorLabel: () => 'Read aloud by Freedom',
     // Pages unfurl as their title on the ground colour. A pack with a backdrop of its own
     // overrides this whole field.
     share: { font: newsreader },

package/lib/reader/artifact-reader.d.ts

@@ -18,12 +18,12 @@ export declare function litWordIndex(words: WordTiming[], now: number, started:
 /** Whether a key press is the reader scrolling the page themselves. Space scrolls only outside a
  *  field that takes text. */
 export declare function isUserScrollKey(key: string, target: EventTarget | null): boolean;
-export declare function ArtifactReader({ src, words, rootId, label, accent, ground, }: {
+export declare function ArtifactReader({ src, words, rootId, accent, ground, }: {
     src: string;
     words: WordTiming[];
     rootId: string;
-    /** The line under the play button; the brand pack decides it from the voice. */
-    label: string;
+    /** Ignored since 0.33.1: the player bar names no narrator. Kept so an older caller compiles. */
+    label?: string;
     accent: string;
     ground: string;
 }): import("react").JSX.Element;

package/lib/reader/artifact-reader.js

@@ -146,8 +146,7 @@ export function isUserScrollKey(key, target) {
 }
 /** 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;
+export function ArtifactReader({ src, words, rootId, accent, ground, }) {
     const audioRef = useRef(null);
     const mapRef = useRef([]);
     const litRef = useRef(null);
@@ -301,7 +300,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", { 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) => {
+                }, 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, 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/lib/reader/player-bar.d.ts

@@ -1,8 +1,8 @@
-export declare function PlayerBar({ playing, onToggle, label, accent, ground, value, max, step, onSeek, progress, rate, onRate, }: {
+export declare function PlayerBar({ playing, onToggle, accent, ground, value, max, step, onSeek, progress, rate, onRate, }: {
     playing: boolean;
     onToggle: () => void;
-    /** The line under the play button. */
-    label: string;
+    /** Ignored since 0.33.1: the bar names no narrator. Kept so an older caller still compiles. */
+    label?: string;
     accent: string;
     ground: string;
     value: number;
@@ -14,5 +14,6 @@ export declare function PlayerBar({ playing, onToggle, label, accent, ground, va
     rate: number;
     onRate: () => void;
 }): import("react").JSX.Element;
-/** The speeds the speed button steps through, in order, wrapping back to 1. */
+/** The speeds the speed button steps through, in order, wrapping back to the first. */
+export declare const RATES: readonly [1, 1.25, 1.5, 2];
 export declare function nextRate(rate: number): number;

package/lib/reader/player-bar.js

@@ -3,14 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // The bar at the bottom of a page that can be listened to, shared by the recorded-narration
 // reader and the browser read-aloud, so a page looks the same whichever one is speaking. It is
 // pure chrome: each reader owns its engine and hands the bar what to show and what to call.
-export function PlayerBar({ playing, onToggle, label, accent, ground, value, max, step, onSeek, progress, rate, onRate, }) {
+//
+// No narrator line (0.33.1, Gary: "read by freedom should be removed"): the bar is the play
+// button, the seek line, the progress and the speed. The speed button has a FIXED width wide enough
+// for its longest label ("1.25x"), so stepping 1x -> 1.25x -> 2x never resizes it and never shifts
+// the seek line beside it (Gary: "the bottom bar speed dial shouldn't cause reflow when clicked").
+export function PlayerBar({ playing, onToggle, accent, ground, value, max, step, onSeek, progress, rate, onRate, }) {
     return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
         .artifact-word { border-radius: 3px; transition: background-color 120ms; }
         .artifact-word:hover { background: var(--a-surface-strong, rgba(255,255,255,0.08)); cursor: pointer; }
         .artifact-word-lit { background: color-mix(in srgb, ${accent} 35%, transparent); color: var(--a-strong, #fff); }
-      ` }), _jsx("div", { "data-artifact-player": true, className: "fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--a-line)] backdrop-blur", style: { background: `color-mix(in srgb, ${ground} 90%, transparent)` }, children: _jsxs("div", { className: "mx-auto flex max-w-2xl items-center gap-4 px-6 py-3", children: [_jsx("button", { type: "button", onClick: onToggle, "aria-label": playing ? 'Pause narration' : 'Play narration', className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full", style: { background: accent, color: ground }, children: playing ? (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("rect", { x: "6", y: "5", width: "4", height: "14" }), _jsx("rect", { x: "14", y: "5", width: "4", height: "14" })] })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: label }), _jsx("input", { type: "range", min: 0, max: max || 0, step: step, value: Math.min(value, max || 0), onChange: (e) => onSeek(Number(e.target.value)), "aria-label": "Seek", className: "mt-1 w-full", style: { accentColor: accent } })] }), _jsx("div", { className: "w-16 shrink-0 text-right text-xs tabular-nums text-[color:var(--a-muted)]", children: progress }), _jsxs("button", { type: "button", onClick: onRate, className: "shrink-0 rounded border border-[color:var(--a-line-strong)] px-2 py-1 text-xs text-[color:var(--a-body)]", "aria-label": "Playback speed", children: [rate, "x"] })] }) }), _jsx("div", { className: "h-20", "aria-hidden": true })] }));
+      ` }), _jsx("div", { "data-artifact-player": true, className: "fixed inset-x-0 bottom-0 z-40 border-t border-[color:var(--a-line)] backdrop-blur", style: { background: `color-mix(in srgb, ${ground} 90%, transparent)` }, children: _jsxs("div", { className: "mx-auto flex max-w-2xl items-center gap-4 px-6 py-3", children: [_jsx("button", { type: "button", onClick: onToggle, "aria-label": playing ? 'Pause narration' : 'Play narration', className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full", style: { background: accent, color: ground }, children: playing ? (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("rect", { x: "6", y: "5", width: "4", height: "14" }), _jsx("rect", { x: "14", y: "5", width: "4", height: "14" })] })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx("input", { type: "range", min: 0, max: max || 0, step: step, value: Math.min(value, max || 0), onChange: (e) => onSeek(Number(e.target.value)), "aria-label": "Seek", className: "block w-full", style: { accentColor: accent } }) }), _jsx("div", { className: "w-16 shrink-0 text-right text-xs tabular-nums text-[color:var(--a-muted)]", children: progress }), _jsxs("button", { type: "button", onClick: onRate, "data-artifact-rate": true, className: "w-14 shrink-0 whitespace-nowrap rounded border border-[color:var(--a-line-strong)] py-1 text-center text-xs tabular-nums text-[color:var(--a-body)]", "aria-label": `Playback speed, ${rate}x`, children: [rate, "x"] })] }) }), _jsx("div", { className: "h-20", "aria-hidden": true })] }));
 }
-/** The speeds the speed button steps through, in order, wrapping back to 1. */
+/** The speeds the speed button steps through, in order, wrapping back to the first. */
+export const RATES = [1, 1.25, 1.5, 2];
 export function nextRate(rate) {
-    return rate >= 1.5 ? 1 : rate + 0.25;
+    const i = RATES.findIndex((r) => r > rate + 1e-9);
+    return i === -1 ? RATES[0] : RATES[i];
 }

package/lib/routes/artifacts.js

@@ -410,7 +410,7 @@ export function createArtifactRoutes(config) {
                         return (_jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: _jsxs(_Fragment, { children: [header, a.cover ? (_jsx("div", { className: "mx-auto max-w-2xl px-6 pb-8", children: _jsx("img", { src: a.cover, alt: "", className: "w-full rounded-xl border border-[color:var(--a-line)]" }) })) : null] }), children: _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined, 
                                 // Ticks are kept in the reader's browser on any host; Send needs one that keeps answers.
                                 checklist: { artifactId: a.id, send: !!config.state && !!a.state && Object.hasOwn(a.state.slots, CHECKLIST_SLOT), owner, accent: brand.accent }, Section: pack.Section, figure: pack.figure, simulator: config.simulatorEmbed ? { embed: config.simulatorEmbed } : undefined, messages: config.messagesEmbed ? { embed: config.messagesEmbed } : undefined }) }));
-                    })() }), _jsx(CommentLayer, { artifactId: a.id, rootId: "artifact-narration-root", ownerName: owner, comments: mode, canShare: mode !== 'off' && (reader !== null || effectiveWriters(a.state, a.access, COMMENTS_SLOT) === 'anyone'), signedIn: reader !== null, isOwner: isAdmin(reader), version: a.version ?? (a.versions?.length ?? 0) + 1, accent: brand.accent, ground: brand.ground, signIn: signInOrigin ? signInUrl(signInOrigin, pageUrl(a.id)) : null }), a.narration && words.length > 0 ? (_jsx(ArtifactReader, { src: a.narration, words: words, rootId: "artifact-narration-root", label: brand.narratorLabel(a.voice), accent: brand.accent, ground: brand.ground })) : null /* No recorded narration: no player. Never the browser's own voice (the operator,
+                    })() }), _jsx(CommentLayer, { artifactId: a.id, rootId: "artifact-narration-root", ownerName: owner, comments: mode, canShare: mode !== 'off' && (reader !== null || effectiveWriters(a.state, a.access, COMMENTS_SLOT) === 'anyone'), signedIn: reader !== null, isOwner: isAdmin(reader), version: a.version ?? (a.versions?.length ?? 0) + 1, accent: brand.accent, ground: brand.ground, signIn: signInOrigin ? signInUrl(signInOrigin, pageUrl(a.id)) : null }), a.narration && words.length > 0 ? (_jsx(ArtifactReader, { src: a.narration, words: words, rootId: "artifact-narration-root", accent: brand.accent, ground: brand.ground })) : null /* No recorded narration: no player. Never the browser's own voice (the operator,
                   2026-09-29: "NEVER PUT DEFAULT SAFARI VOICE DICTATION"); the audio is Kokoro or ElevenLabs,
                   recorded at publish, or there is none. */] }));
     }

package/package.json

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