@supersuit/artifacts 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 `@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.10.0 (2026-09-28)
+
+**Every page can be read aloud.** A page with no recorded narration, or whose timings will not
+load, now shows the same player bar and reads itself with the browser's own voice
+(`speechSynthesis`), lighting each word from the engine's word-boundary events. It speaks one
+sentence at a time, so a drifting engine (Safari on long passages) re-syncs at every sentence.
+Clicking a word starts reading there. Browsers without speech synthesis show no bar, as before.
+Pages with recorded narration are unchanged.
+
+- New exports from `./reader`: `BrowserReader`, `PlayerBar`, `planSentences`, `wordAt`,
+  `sentenceOf`, `fromWord`. `./reader` is now a barrel (`src/reader/index.ts`); everything
+  importable before still is.
+- `wrapWords` is idempotent, so two readers can never wrap a page twice.
+- DETECTOR: an un-narrated page with no player bar.
+- REMEDY: bump; nothing to republish.
+- Tests: `speech-plan.test.ts` (sentence plan, 60-word cap, block starts, boundary mapping),
+  `browser-reader.test.tsx` against a stubbed `speechSynthesis`, route tests for which reader
+  mounts, and the packed fixture's un-narrated page mounting the browser reader.
+
+## 0.9.0 (2026-09-27)
+
+**A host can word its own sign-in door.** `signInNote` on `createArtifactRoutes` replaces the
+door's line on a gated page. The default still names the Freedom account, so every host that
+passes nothing reads exactly as before. A host that signs readers in itself, rather than through
+a Freedom account, needs the door to say so, or readers are told to use an account they do not
+have.
+
+- DETECTOR: a host whose `signInOrigin` is not a Freedom account service, and whose door still
+  says "your Freedom account".
+- REMEDY: bump and pass `signInNote`.
+- Tests: `gated.test.tsx` pins the default line and a host's own line replacing it.
+
 ## 0.8.0 (2026-09-27)
 
 **Pages play audio clips.** `![caption](clip.mp3)` renders a captioned player with native

package/README.md

@@ -151,7 +151,7 @@ summary: Three bets, what each costs, and what we stop doing to afford them.
 | `id` | Republish in place instead of minting a new page |
 | `cover` | An image URL (absolute or site-relative) used as the unfurl image instead of the share card |
 | `audience` | Free text stored with the page |
-| `voice`, `narration`, `timings`, `narrationHash` | Read-aloud: the audio and word timings a publisher generated. Absent, no player |
+| `voice`, `narration`, `timings`, `narrationHash` | Read-aloud: the audio and word timings a publisher generated. Absent (or the timings will not load), the page is read by the browser's own voice instead, lighting the same words; a browser with no `speechSynthesis` shows no player |
 | `password` | Shuts the body behind a door (below) |
 | `access` | `freedom`, `invite` or `public`: a confidential page (below) |
 | `theme` | `light`, `dark` or `system` (follow the reader's device). Overrides the brand pack's mode for this page |

package/lib/artifacts/confidential.d.ts

@@ -25,9 +25,13 @@ export declare function Watermark({ email }: {
 }): import("react").JSX.Element;
 /** Printing shows this and nothing else, whichever way the print dialog was reached. */
 export declare const NO_PRINT_CSS = "@media print { body * { visibility: hidden !important; } body::after { content: \"This page is confidential and cannot be printed.\"; visibility: visible; position: fixed; top: 40%; left: 0; right: 0; text-align: center; font: 16px sans-serif; color: #000; } }";
-export declare function SignInDoor({ brand, href }: {
+/** The door's default line, for a host whose readers sign in with a Freedom account. A host
+ *  that signs readers in some other way passes `signInNote` to say so in its own words. */
+export declare const DEFAULT_SIGN_IN_NOTE = "This page is confidential. Sign in with the Google account your Freedom account uses, or the address it was shared with.";
+export declare function SignInDoor({ brand, href, note }: {
     brand: BrandPack;
     href?: string;
+    note?: string;
 }): import("react").JSX.Element;
 export declare function NotAllowedDoor({ brand, reader, signOutUrl }: {
     brand: BrandPack;

package/lib/artifacts/confidential.js

@@ -19,12 +19,15 @@ export function Watermark({ email }) {
 }
 /** Printing shows this and nothing else, whichever way the print dialog was reached. */
 export const NO_PRINT_CSS = `@media print { body * { visibility: hidden !important; } body::after { content: "This page is confidential and cannot be printed."; visibility: visible; position: fixed; top: 40%; left: 0; right: 0; text-align: center; font: 16px sans-serif; color: #000; } }`;
-export function SignInDoor({ brand, href }) {
+/** The door's default line, for a host whose readers sign in with a Freedom account. A host
+ *  that signs readers in some other way passes `signInNote` to say so in its own words. */
+export const DEFAULT_SIGN_IN_NOTE = 'This page is confidential. Sign in with the Google account your Freedom account uses, or the address it was shared with.';
+export function SignInDoor({ brand, href, note = DEFAULT_SIGN_IN_NOTE }) {
     // No href means the host configured no sign-in authority: the door stays, with no way through.
     if (!href) {
         return (_jsx("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: _jsx("p", { className: "text-sm opacity-70", children: "This page is confidential, and this site cannot sign readers in yet." }) }));
     }
-    return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: [_jsx("p", { className: "text-sm opacity-70", children: "This page is confidential. Sign in with the Google account your Freedom account uses, or the address it was shared with." }), _jsx("a", { href: href, className: "mt-5 inline-block rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Sign in to read" })] }));
+    return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: [_jsx("p", { className: "text-sm opacity-70", children: note }), _jsx("a", { href: href, className: "mt-5 inline-block rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Sign in to read" })] }));
 }
 export function NotAllowedDoor({ brand, reader, signOutUrl }) {
     return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center text-sm", children: [_jsxs("p", { className: "opacity-80", children: ["You are signed in as ", reader.email, ", and this page has not been shared with that address. If it was sent to a different address of yours, sign out and use that one."] }), _jsx("p", { className: "mt-3 opacity-60", children: "This attempt was recorded." }), _jsx("a", { href: signOutUrl, className: "mt-5 inline-block underline", style: { color: brand.accent }, children: "Sign out" })] }));

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

@@ -3,7 +3,11 @@ export type WordTiming = {
     s: number;
     e: number;
 };
-/** Wrap every word inside `root` (except skipped subtrees) in a span; return them in order. */
+/** The elements that hold a run of text; a word whose block differs from the previous word's
+ *  starts a new sentence in the browser read-aloud. */
+export declare const BLOCK = "p, li, td, th, h1, h2, h3, h4, h5, h6, blockquote, aside, dt, dd, figcaption, div";
+/** Wrap every word inside `root` (except skipped subtrees) in a span; return them in order.
+ *  Idempotent: a root already wrapped returns the spans it already has. */
 export declare function wrapWords(root: HTMLElement): HTMLSpanElement[];
 /** The karaoke word a click lands on, or null. A defined term is a control that opens its
  *  definition, so a tap on it must never seek or start the narration. */

package/lib/reader/artifact-reader.js

@@ -1,22 +1,33 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Speechify-style read-along for a published artifact. The narration was generated
 // from the same rendered text this page shows (see lib/artifacts/narration.ts), so
 // the highlighter walks the DOM in reading order, wraps each word, and aligns that
 // sequence to the word timings by normalized token, resyncing within a short window
 // when the two disagree. Click a word to seek; the bar at the bottom plays and paces.
 import { useEffect, 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';
-const BLOCK = 'p, li, td, th, h1, h2, h3, h4, h5, h6, blockquote, aside, dt, dd, figcaption, div';
+/** The elements that hold a run of text; a word whose block differs from the previous word's
+ *  starts a new sentence in the browser read-aloud. */
+export const BLOCK = 'p, li, td, th, h1, h2, h3, h4, h5, h6, blockquote, aside, dt, dd, figcaption, div';
 function normalize(w) {
     return w.toLowerCase().replace(/[^\p{L}\p{N}]/gu, '');
 }
-/** Wrap every word inside `root` (except skipped subtrees) in a span; return them in order. */
+// Set on a root once its words are wrapped. Wrapping twice would nest a span inside every span
+// (React's development double-mount, or a host that mounts both readers), and the second set of
+// spans would never be the ones the first reader lights.
+const WRAPPED = 'data-artifact-words';
+/** Wrap every word inside `root` (except skipped subtrees) in a span; return them in order.
+ *  Idempotent: a root already wrapped returns the spans it already has. */
 export function wrapWords(root) {
+    if (root.hasAttribute(WRAPPED))
+        return Array.from(root.querySelectorAll('.artifact-word'));
+    root.setAttribute(WRAPPED, '');
     const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
         acceptNode: (n) => {
             const el = n.parentElement;
-            if (!el || el.closest(SKIP))
+            if (!el || el.closest(SKIP) || el.closest('.artifact-word, .artifact-word-tail'))
                 return NodeFilter.FILTER_REJECT;
             return n.nodeValue && n.nodeValue.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
         },
@@ -184,21 +195,16 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
         else
             a.pause();
     };
-    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("audio", { ref: audioRef, src: src, preload: "metadata", onPlay: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("audio", { ref: audioRef, src: src, preload: "metadata", onPlay: () => {
                     startedRef.current = true;
                     setPlaying(true);
                 }, onSeeking: () => {
                     startedRef.current = true;
-                }, onPause: () => setPlaying(false), onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), _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: toggle, "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: narrator }), _jsx("input", { type: "range", min: 0, max: dur || 0, step: 0.1, value: Math.min(t, dur || 0), onChange: (e) => {
-                                        if (audioRef.current)
-                                            audioRef.current.currentTime = Number(e.target.value);
-                                    }, "aria-label": "Seek", className: "mt-1 w-full", style: { accentColor: accent } })] }), _jsxs("div", { className: "w-16 shrink-0 text-right text-xs tabular-nums text-[color:var(--a-muted)]", children: [fmt(t), " / ", fmt(dur)] }), _jsxs("button", { type: "button", onClick: () => {
-                                const next = rate >= 1.5 ? 1 : rate + 0.25;
-                                if (audioRef.current)
-                                    audioRef.current.playbackRate = next;
-                            }, 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 })] }));
+                }, onPause: () => setPlaying(false), onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), _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: () => {
+                    if (audioRef.current)
+                        audioRef.current.playbackRate = nextRate(rate);
+                } })] }));
 }

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

@@ -0,0 +1,8 @@
+export declare const BROWSER_READER_LABEL = "Read aloud by your browser";
+export declare function BrowserReader({ rootId, label, accent, ground, }: {
+    rootId: string;
+    /** The line under the play button. */
+    label?: string;
+    accent: string;
+    ground: string;
+}): import("react").JSX.Element;

package/lib/reader/browser-reader.js

@@ -0,0 +1,171 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Read-along for a page with no recorded narration: the browser's own voice (speechSynthesis)
+// reads the same word spans the recorded reader lights, and its word-boundary events light them.
+// It sounds worse than a recorded narrator and sends nothing anywhere.
+//
+// One utterance per sentence (see speech-plan.ts). Safari's boundary charIndex drifts on long
+// passages; every new utterance restarts it at zero against offsets we know, so a drift cannot
+// outlast the sentence it began in. Every utterance carries the generation it was spoken in, and
+// an event from an older generation (a sentence cancelled by a click, a seek or a speed change,
+// whose end or error the engine still reports) is ignored.
+//
+// The mount is rendered hidden and empty on the server and on the first client render, so the
+// markup always hydrates; it shows only once the browser is known to have speechSynthesis. It
+// never carries data-artifact-player while hidden, because the popovers measure that element to
+// keep clear of the bar, and a hidden element measures as the whole screen.
+import { useEffect, useRef, useState } from 'react';
+import { BLOCK, seekableWord, wrapWords } from './artifact-reader.js';
+import { nextRate, PlayerBar } from './player-bar.js';
+import { fromWord, planSentences, wordAt } from './speech-plan.js';
+export const BROWSER_READER_LABEL = 'Read aloud by your browser';
+function spokenWords(spans) {
+    const words = [];
+    const starts = new Set();
+    let prevBlock = null;
+    spans.forEach((span, i) => {
+        // Punctuation glued on across an element edge ("**bold**.") is a tail, not a word; it is
+        // spoken with the word it follows, which is also what lets it end a sentence.
+        const tail = span.nextSibling instanceof HTMLElement && span.nextSibling.classList.contains('artifact-word-tail') ? span.nextSibling.textContent ?? '' : '';
+        words.push((span.textContent ?? '') + tail);
+        const block = span.closest(BLOCK);
+        if (i > 0 && block !== prevBlock)
+            starts.add(i);
+        prevBlock = block;
+    });
+    return { words, starts };
+}
+export function BrowserReader({ rootId, label = BROWSER_READER_LABEL, accent, ground, }) {
+    const [ready, setReady] = useState(false);
+    const [playing, setPlaying] = useState(false);
+    const [current, setCurrent] = useState(-1);
+    const [count, setCount] = useState(0);
+    const [rate, setRate] = useState(1);
+    const spansRef = useRef([]);
+    const planRef = useRef([]);
+    const genRef = useRef(0);
+    const rateRef = useRef(1);
+    const currentRef = useRef(-1);
+    const playingRef = useRef(false);
+    // True from the first play until the page is finished: pause and resume act on a live queue.
+    const startedRef = useRef(false);
+    const litRef = useRef(null);
+    const setPlay = (p) => {
+        playingRef.current = p;
+        setPlaying(p);
+    };
+    const light = (i) => {
+        const el = i >= 0 ? spansRef.current[i] ?? null : null;
+        if (el !== litRef.current) {
+            litRef.current?.classList.remove('artifact-word-lit');
+            el?.classList.add('artifact-word-lit');
+            litRef.current = el;
+            if (el && playingRef.current) {
+                const r = el.getBoundingClientRect();
+                if (r.top < 80 || r.bottom > window.innerHeight - 140)
+                    el.scrollIntoView?.({ block: 'center', behavior: 'smooth' });
+            }
+        }
+        currentRef.current = i;
+        setCurrent(i);
+    };
+    const finish = () => {
+        startedRef.current = false;
+        setPlay(false);
+        light(-1);
+    };
+    const speak = (s, gen) => {
+        const synth = window.speechSynthesis;
+        const u = new SpeechSynthesisUtterance(s.text);
+        u.rate = rateRef.current;
+        u.onboundary = (e) => {
+            if (gen !== genRef.current || e.name !== 'word')
+                return;
+            light(wordAt(s, e.charIndex));
+        };
+        u.onend = () => {
+            if (gen !== genRef.current)
+                return;
+            const next = s.first + s.offsets.length;
+            if (next < spansRef.current.length)
+                speak(fromWord(planRef.current, next), gen);
+            else
+                finish();
+        };
+        u.onerror = () => {
+            if (gen === genRef.current)
+                finish();
+        };
+        // Light the sentence's first word now: some engines send no boundary events at all, and the
+        // page should still show where it is.
+        light(s.first);
+        synth.speak(u);
+    };
+    /** Cancel whatever is speaking and read from word `i` on. */
+    const speakFrom = (i) => {
+        if (!planRef.current.length)
+            return;
+        const synth = window.speechSynthesis;
+        const gen = ++genRef.current;
+        synth.cancel();
+        // An engine paused before the cancel stays paused for the next utterance in some browsers.
+        synth.resume();
+        startedRef.current = true;
+        setPlay(true);
+        speak(fromWord(planRef.current, Math.max(0, Math.min(i, spansRef.current.length - 1))), gen);
+    };
+    const speakFromRef = useRef(speakFrom);
+    speakFromRef.current = speakFrom;
+    useEffect(() => {
+        if (typeof window === 'undefined' || !('speechSynthesis' in window))
+            return;
+        const root = document.getElementById(rootId);
+        if (!root)
+            return;
+        const spans = wrapWords(root);
+        if (!spans.length)
+            return;
+        const { words, starts } = spokenWords(spans);
+        spansRef.current = spans;
+        planRef.current = planSentences(words, starts);
+        setCount(spans.length);
+        setReady(true);
+        const onClick = (e) => {
+            const el = seekableWord(e.target);
+            if (!el)
+                return;
+            const idx = spansRef.current.indexOf(el);
+            if (idx !== -1)
+                speakFromRef.current(idx);
+        };
+        root.addEventListener('click', onClick);
+        return () => {
+            root.removeEventListener('click', onClick);
+            genRef.current++;
+            window.speechSynthesis.cancel();
+        };
+    }, [rootId]);
+    const toggle = () => {
+        const synth = window.speechSynthesis;
+        if (!startedRef.current)
+            speakFrom(0);
+        else if (playingRef.current) {
+            synth.pause();
+            setPlay(false);
+        }
+        else {
+            synth.resume();
+            setPlay(true);
+        }
+    };
+    if (!ready)
+        return _jsx("div", { "data-artifact-reader": "browser", hidden: true });
+    return (_jsx("div", { "data-artifact-reader": "browser", children: _jsx(PlayerBar, { playing: playing, onToggle: toggle, label: label, accent: accent, ground: ground, value: Math.max(current, 0), max: Math.max(count - 1, 0), step: 1, onSeek: (v) => speakFrom(v), progress: `${current + 1} / ${count}`, rate: rate, onRate: () => {
+                const r = nextRate(rateRef.current);
+                rateRef.current = r;
+                setRate(r);
+                // The engine fixes the rate when an utterance starts, so restart at the current word.
+                if (startedRef.current && playingRef.current)
+                    speakFrom(Math.max(currentRef.current, 0));
+            } }) }));
+}

package/lib/reader/index.d.ts

@@ -0,0 +1,4 @@
+export { ArtifactReader, wrapWords, seekableWord, litWordIndex, type WordTiming } from './artifact-reader.js';
+export { BrowserReader } from './browser-reader.js';
+export { PlayerBar } from './player-bar.js';
+export { planSentences, wordAt, sentenceOf, fromWord, MAX_SENTENCE_WORDS, type Sentence } from './speech-plan.js';

package/lib/reader/index.js

@@ -0,0 +1,6 @@
+// The `./reader` entry: both readers and the bar they share. Each component module carries its
+// own 'use client'; this barrel is plain re-exports so it can be imported from either side.
+export { ArtifactReader, wrapWords, seekableWord, litWordIndex } from './artifact-reader.js';
+export { BrowserReader } from './browser-reader.js';
+export { PlayerBar } from './player-bar.js';
+export { planSentences, wordAt, sentenceOf, fromWord, MAX_SENTENCE_WORDS } from './speech-plan.js';

package/lib/reader/player-bar.d.ts

@@ -0,0 +1,18 @@
+export declare function PlayerBar({ playing, onToggle, label, accent, ground, value, max, step, onSeek, progress, rate, onRate, }: {
+    playing: boolean;
+    onToggle: () => void;
+    /** The line under the play button. */
+    label: string;
+    accent: string;
+    ground: string;
+    value: number;
+    max: number;
+    step: number;
+    onSeek: (value: number) => void;
+    /** The text at the right of the bar: a time for recorded audio, a word count for the browser. */
+    progress: string;
+    rate: number;
+    onRate: () => void;
+}): import("react").JSX.Element;
+/** The speeds the speed button steps through, in order, wrapping back to 1. */
+export declare function nextRate(rate: number): number;

package/lib/reader/player-bar.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// 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, }) {
+    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 })] }));
+}
+/** The speeds the speed button steps through, in order, wrapping back to 1. */
+export function nextRate(rate) {
+    return rate >= 1.5 ? 1 : rate + 0.25;
+}

package/lib/reader/speech-plan.d.ts

@@ -0,0 +1,20 @@
+export type Sentence = {
+    /** The words joined by single spaces: exactly what is handed to the speech engine. */
+    text: string;
+    /** Index of the sentence's first word in the page's word list. */
+    first: number;
+    /** offsets[i] is the char offset, inside `text`, of word `first + i`. */
+    offsets: number[];
+};
+export declare const MAX_SENTENCE_WORDS = 60;
+/** Split a page's words into sentences. `starts` holds word indexes that begin a new block
+ *  (a heading, a paragraph, a list item), which always begin a new sentence. */
+export declare function planSentences(words: string[], starts?: ReadonlySet<number>): Sentence[];
+/** The absolute word index a boundary event's `charIndex` falls in: the last word whose offset
+ *  is at or before it. */
+export declare function wordAt(s: Sentence, charIndex: number): number;
+/** The index of the sentence holding `wordIndex`. */
+export declare function sentenceOf(plan: Sentence[], wordIndex: number): number;
+/** The sentence holding `wordIndex`, cut so it starts AT that word, with offsets rebased to the
+ *  cut text. What is spoken when a reader clicks a word in the middle of a sentence. */
+export declare function fromWord(plan: Sentence[], wordIndex: number): Sentence;

package/lib/reader/speech-plan.js

@@ -0,0 +1,67 @@
+// How the browser read-aloud splits a page into utterances, and maps a speech engine's
+// word-boundary events back to the page's word spans. Pure, so it is tested without a browser.
+//
+// One utterance per sentence is the drift bound: Safari's boundary charIndex wanders on long
+// passages, and every new utterance restarts it at zero against a sentence whose word offsets
+// are known. The cap keeps a page with no punctuation (a list, a table) from becoming one long
+// utterance, which is also where Chrome is known to stop speaking part-way.
+export const MAX_SENTENCE_WORDS = 60;
+// A word ends a sentence when it ends in . ! ? or :, optionally followed by closing quotes or
+// brackets. "10:30" and "example.com" do not, because the punctuation is not at the end.
+const ENDS_SENTENCE = /[.!?:]["'”’)\]]*$/;
+/** Split a page's words into sentences. `starts` holds word indexes that begin a new block
+ *  (a heading, a paragraph, a list item), which always begin a new sentence. */
+export function planSentences(words, starts) {
+    const plan = [];
+    let cur = null;
+    for (let i = 0; i < words.length; i++) {
+        if (cur && (cur.offsets.length >= MAX_SENTENCE_WORDS || starts?.has(i))) {
+            plan.push(cur);
+            cur = null;
+        }
+        if (!cur)
+            cur = { text: '', first: i, offsets: [] };
+        if (cur.offsets.length)
+            cur.text += ' ';
+        cur.offsets.push(cur.text.length);
+        cur.text += words[i];
+        if (ENDS_SENTENCE.test(words[i])) {
+            plan.push(cur);
+            cur = null;
+        }
+    }
+    if (cur)
+        plan.push(cur);
+    return plan;
+}
+/** The absolute word index a boundary event's `charIndex` falls in: the last word whose offset
+ *  is at or before it. */
+export function wordAt(s, charIndex) {
+    let i = 0;
+    for (let k = 0; k < s.offsets.length; k++) {
+        if (s.offsets[k] <= charIndex)
+            i = k;
+        else
+            break;
+    }
+    return s.first + i;
+}
+/** The index of the sentence holding `wordIndex`. */
+export function sentenceOf(plan, wordIndex) {
+    let idx = 0;
+    for (let k = 0; k < plan.length; k++) {
+        if (plan[k].first <= wordIndex)
+            idx = k;
+        else
+            break;
+    }
+    return idx;
+}
+/** The sentence holding `wordIndex`, cut so it starts AT that word, with offsets rebased to the
+ *  cut text. What is spoken when a reader clicks a word in the middle of a sentence. */
+export function fromWord(plan, wordIndex) {
+    const s = plan[sentenceOf(plan, wordIndex)];
+    const k = Math.max(0, Math.min(wordIndex - s.first, s.offsets.length - 1));
+    const base = s.offsets[k];
+    return { text: s.text.slice(base), first: s.first + k, offsets: s.offsets.slice(k).map((o) => o - base) };
+}

package/lib/routes/artifacts.d.ts

@@ -32,6 +32,9 @@ export type ArtifactRoutesConfig = {
     /** The sign-in authority's origin; readers go to `<signInOrigin>/artifact/sign-in?to=<page>`.
      *  No default: without it a gated page shows its door with no way through (fails closed). */
     signInOrigin?: string;
+    /** The line on the sign-in door, for a host whose readers do not sign in with a Freedom
+     *  account. Default names the Freedom account. */
+    signInNote?: string;
     /** Who the banner says grants access, e.g. "Example Co". Default the brand name. */
     owner?: string;
     /** The address the state routes' rate limit counts by. Default reads the first hop of

package/lib/routes/artifacts.js

@@ -16,6 +16,7 @@ import { themedPack } from '../brand/theme.js';
 import { showToc, tocOf, TocInline, TocRail } from '../artifacts/toc.js';
 import { renderShareCard } from '../brand/share-card.js';
 import { ArtifactReader } from '../reader/artifact-reader.js';
+import { BrowserReader } from '../reader/browser-reader.js';
 import { ReaderWatch } from '../reader/reader-watch.js';
 import { UpdatedTime } from '../reader/updated-time.js';
 import { VersionHistory } from '../reader/version-history.js';
@@ -151,7 +152,7 @@ export function createArtifactRoutes(config) {
                 void config.readers.flag({ artifactId: id, reader: d.reader, kind: 'refused' }).catch(() => { });
             return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [header, d.why === 'not-allowed'
                         ? _jsx(NotAllowedDoor, { brand: brand, reader: d.reader, signOutUrl: signOutUrl(id) })
-                        : _jsx(SignInDoor, { brand: brand, href: signInOrigin ? signInUrl(signInOrigin, here) : undefined })] }));
+                        : _jsx(SignInDoor, { brand: brand, href: signInOrigin ? signInUrl(signInOrigin, here) : undefined, note: config.signInNote })] }));
         }
         const r = reader;
         // The agreement comes before the body, every reader, once per page. No agreement, no body.
@@ -202,7 +203,9 @@ export function createArtifactRoutes(config) {
             }
         }
         const toc = showToc(a.markdown, a.toc) ? tocOf(a.markdown) : [];
-        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsxs("div", { id: "artifact-narration-root", children: [_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-24 sm:pt-28' : 'pt-12'} pb-8 text-center`, children: [_jsx("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: brand.kicker }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary }), _jsx(VersionLine, { a: a, n: a.version ?? (a.versions?.length ?? 0) + 1, at: a.updatedAt, history: await historyOf(a.id) })] }), 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, _jsxs("article", { className: "mx-auto max-w-2xl px-6 pb-24", children: [toc.length ? _jsx(TocInline, { items: toc }) : null, _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined })] })] }), 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] }));
+        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsxs("div", { id: "artifact-narration-root", children: [_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-24 sm:pt-28' : 'pt-12'} pb-8 text-center`, children: [_jsx("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: brand.kicker }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary }), _jsx(VersionLine, { a: a, n: a.version ?? (a.versions?.length ?? 0) + 1, at: a.updatedAt, history: await historyOf(a.id) })] }), 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, _jsxs("article", { className: "mx-auto max-w-2xl px-6 pb-24", children: [toc.length ? _jsx(TocInline, { items: toc }) : null, _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined })] })] }), 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 })) : (
+                // No recorded narration, or its timings would not load: the browser reads the page.
+                _jsx(BrowserReader, { rootId: "artifact-narration-root", accent: brand.accent, ground: brand.ground }))] }));
     }
     const cookieLine = (value, maxAge) => `${GRANT_COOKIE}=${value}; Path=/; Max-Age=${maxAge}; HttpOnly; Secure; SameSite=Lax`;
     /** GET /api/reader/enter?pass=<pass>&to=/<id>: where the sign-in authority sends a signed-in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "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",
@@ -38,8 +38,8 @@
       "default": "./lib/brand/index.js"
     },
     "./reader": {
-      "types": "./lib/reader/artifact-reader.d.ts",
-      "default": "./lib/reader/artifact-reader.js"
+      "types": "./lib/reader/index.d.ts",
+      "default": "./lib/reader/index.js"
     },
     "./gate": {
       "types": "./lib/gate.d.ts",