@supersuit/artifacts 0.1.0

package/lib/artifacts/store.js

@@ -0,0 +1,114 @@
+// Firestore store for published artifacts. One document per id; the current
+// body lives on the document and every previous body is kept in its `versions`
+// SUBCOLLECTION, one document per version, so a re-publish is an in-place update with
+// history rather than a new URL.
+//
+// History used to be an array ON the page document. Firestore caps a document at 1 MiB, and
+// a 55 KB paper republished about 25 times crossed it: every publish after that failed with a
+// 500 and the live page silently stayed on the old version (the lightpaper, 2026-09-24). The
+// first save of a page still carrying the array moves it into the subcollection.
+import { randomInt } from 'node:crypto';
+import { FieldValue } from 'firebase-admin/firestore';
+// No 0/o, 1/l/i: an id read aloud or retyped from a screenshot must survive it.
+const ALPHABET = 'abcdefghjkmnpqrstuvwxyz23456789';
+export function newArtifactId() {
+    let s = '';
+    for (let i = 0; i < 8; i++)
+        s += ALPHABET[randomInt(ALPHABET.length)];
+    return s;
+}
+/** The Firestore-backed store. The instance hands in its own Firestore, so the shell
+ *  never knows which project it is writing to; a hosted tenant passes a namespaced one. */
+export function createArtifactStore(db, collection = 'artifacts') {
+    const col = () => db.collection(collection);
+    return {
+        get: (id) => getArtifact(col, id),
+        save: (input) => saveArtifact(col, input),
+        delete: (id) => deleteArtifact(col, id),
+        bumpViews: (id) => bumpViews(col, id),
+        setAccess: async (id, access) => {
+            const ref = col().doc(id);
+            if (!(await ref.get()).exists)
+                return false;
+            await ref.update({ access: access === 'public' ? FieldValue.delete() : access });
+            return true;
+        },
+    };
+}
+async function getArtifact(col, id) {
+    const snap = await col().doc(id).get();
+    if (!snap.exists)
+        return null;
+    return snap.data();
+}
+async function saveArtifact(col, input) {
+    const now = new Date().toISOString();
+    const fields = {
+        title: input.meta.title,
+        summary: input.meta.summary,
+        template: input.meta.template,
+        ...(input.meta.subtitle ? { subtitle: input.meta.subtitle } : {}),
+        ...(input.meta.audience ? { audience: input.meta.audience } : {}),
+        ...(input.meta.cover ? { cover: input.meta.cover } : {}),
+        ...(input.meta.voice ? { voice: input.meta.voice } : {}),
+        ...(input.meta.narration ? { narration: input.meta.narration } : {}),
+        ...(input.meta.timings ? { timings: input.meta.timings } : {}),
+        ...(input.meta.narrationHash ? { narrationHash: input.meta.narrationHash } : {}),
+        ...(input.meta.password ? { password: input.meta.password } : {}),
+        ...(input.meta.access && input.meta.access !== 'public' ? { access: input.meta.access } : {}),
+    };
+    if (input.id) {
+        const existing = await getArtifact(col, input.id);
+        if (!existing)
+            return { notFound: true };
+        const ref = col().doc(input.id);
+        const history = ref.collection('versions');
+        const legacy = existing.versions ?? [];
+        const current = existing.version ?? legacy.length + 1;
+        const vid = (n) => String(n).padStart(6, '0');
+        // Move any legacy array out first, then file the body being replaced under its own number.
+        for (let i = 0; i < legacy.length; i++)
+            await history.doc(vid(i + 1)).set({ version: i + 1, ...legacy[i] });
+        await history.doc(vid(current)).set({ version: current, markdown: existing.markdown, at: existing.updatedAt });
+        const next = current + 1;
+        // An update merges, so a password the file no longer carries has to be cleared on purpose:
+        // otherwise removing the line from the file would leave the door up on the live page.
+        const password = input.meta.password ? {} : { password: FieldValue.delete() };
+        // A subtitle the file no longer carries is gone from the page, like any other content.
+        const subtitle = input.meta.subtitle ? {} : { subtitle: FieldValue.delete() };
+        // Access is the opposite of password on purpose: absent leaves it alone, and only an explicit
+        // `access: public` opens the page. Reopening a confidential page must never be a side effect.
+        const access = input.meta.access === 'public' ? { access: FieldValue.delete() } : {};
+        await ref.update({
+            ...fields, ...password, ...subtitle, ...access, markdown: input.markdown, updatedAt: now, version: next,
+            ...(existing.versions ? { versions: FieldValue.delete() } : {}),
+        });
+        return { id: input.id, version: next, created: false };
+    }
+    const id = newArtifactId();
+    const rec = {
+        id,
+        ...fields,
+        markdown: input.markdown,
+        createdAt: now,
+        updatedAt: now,
+        version: 1,
+        views: 0,
+    };
+    await col().doc(id).set(rec);
+    return { id, version: 1, created: true };
+}
+async function deleteArtifact(col, id) {
+    const ref = col().doc(id);
+    const snap = await ref.get();
+    if (!snap.exists)
+        return false;
+    await ref.delete();
+    return true;
+}
+async function bumpViews(col, id) {
+    await col()
+        .doc(id)
+        .update({ views: FieldValue.increment(1) })
+        .catch(() => { });
+}

package/lib/artifacts/unlock.d.ts

@@ -0,0 +1,9 @@
+export declare function keyHash(id: string, password: string): string;
+export declare function unlockCookieName(id: string): string;
+export declare function isUnlocked({ id, password, key, cookie }: {
+    id: string;
+    password?: string;
+    key?: string | null;
+    cookie?: string | null;
+}): boolean;
+export declare function unlockedUrl(pageUrl: string, password: string): string;

package/lib/artifacts/unlock.js

@@ -0,0 +1,24 @@
+// A page with a `password:` in its front matter is shut until the reader opens it, and it
+// opens two ways: `?key=<password>` in the URL (the link the author sends; the page then sets
+// a cookie so the next visit needs nothing) or that cookie. The cookie holds a hash bound to
+// the page id, so a stolen cookie names no password and opens no other page. Same shape as
+// the wiki family's `?key=` links (share-a-wiki-page), so an operator learns one convention.
+import { createHash } from 'node:crypto';
+export function keyHash(id, password) {
+    return createHash('sha256').update(`${id}\n${password}`).digest('hex');
+}
+export function unlockCookieName(id) {
+    return `artifact_key_${id}`;
+}
+export function isUnlocked({ id, password, key, cookie }) {
+    if (!password)
+        return true;
+    if (typeof key === 'string' && key === password)
+        return true;
+    if (typeof cookie === 'string' && cookie === keyHash(id, password))
+        return true;
+    return false;
+}
+export function unlockedUrl(pageUrl, password) {
+    return `${pageUrl}?key=${encodeURIComponent(password)}`;
+}

package/lib/brand/default-share.d.ts

@@ -0,0 +1,5 @@
+export declare function newsreader(): Promise<{
+    name: string;
+    data: ArrayBuffer;
+    weight: number;
+}>;

package/lib/brand/default-share.js

@@ -0,0 +1,37 @@
+// The Freedom look's share-card font: Newsreader 600 (OFL, a static instance from Google
+// Fonts), the nearest open face to the Georgia the pack renders pages in. Bundled with the
+// package so an operator with no pack of their own still unfurls as a title card rather than
+// as nothing. It ships at `fonts/Newsreader-600.ttf` in the package root.
+//
+// WHY process.cwd(). A Next app bundles this module, so `import.meta.url` points into `.next/`,
+// not at the package, and cannot find the font. A deployed function runs with the project root
+// as its cwd, so the first candidate is where an installed package's font sits.
+//
+// Next's file tracer does NOT follow this literal into node_modules (measured on Next 16.3 with
+// Turbopack, 2026-09-24), so a host names the font in `outputFileTracingIncludes` (README), and
+// test/fixture does the same so `npm run test:packed` proves the font reaches a build.
+//
+// Only type imports reach this module from anything client-side, so the node imports are safe.
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+const CANDIDATES = [
+    // Installed as a dependency: the normal case for every host.
+    join(process.cwd(), 'node_modules/@supersuit/artifacts/fonts/Newsreader-600.ttf'),
+    // This package's own checkout, where its tests run.
+    join(process.cwd(), 'fonts/Newsreader-600.ttf'),
+];
+async function firstReadable(paths) {
+    for (const p of paths) {
+        try {
+            return await readFile(p);
+        }
+        catch {
+            // try the next place
+        }
+    }
+    throw new Error(`@supersuit/artifacts: Newsreader-600.ttf not found. Looked in: ${paths.join(', ')}`);
+}
+export async function newsreader() {
+    const b = await firstReadable(CANDIDATES);
+    return { name: 'Newsreader', data: b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength), weight: 600 };
+}

package/lib/brand/index.d.ts

@@ -0,0 +1,3 @@
+export { freedomDefault, type BrandPack, type ShareCardAssets } from './pack.js';
+export { BrandGround, BrandMark } from './wrapper.js';
+export { renderShareCard } from './share-card.js';

package/lib/brand/index.js

@@ -0,0 +1,3 @@
+export { freedomDefault } from './pack.js';
+export { BrandGround, BrandMark } from './wrapper.js';
+export { renderShareCard } from './share-card.js';

package/lib/brand/pack.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentType, ReactNode } from 'react';
+/**
+ * A brand pack is what makes an operator's pages theirs: data plus at most two
+ * components. The package ships `freedomDefault`; an instance passes its own. A pack
+ * that carries anyone's trademark lives in that instance, never in this package.
+ */
+export type BrandPack = {
+    id: string;
+    name: string;
+    /** CSS colours. */
+    ground: string;
+    ink: string;
+    accent: string;
+    /** CSS font-family values for headings and body. */
+    type: {
+        display: string;
+        body: string;
+    };
+    /** 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;
+    /** Optional full-page backdrop. Receives the page as children. */
+    Wrapper?: ComponentType<{
+        children: ReactNode;
+    }>;
+    /** Optional mark rendered once above the kicker. */
+    Mark?: ComponentType<{
+        className?: string;
+    }>;
+    /** How a page with no cover unfurls: the shell draws its title over these, so a link
+     *  previews as the page rather than as the brand. Absent, the instance's static default
+     *  share image is used. Both loaders run once per instance. */
+    share?: ShareCardAssets;
+};
+export type ShareCardAssets = {
+    /** The display font, as bytes the renderer can embed. Satori needs a real file: a CSS
+     *  font-family name is not enough. */
+    font: () => Promise<{
+        name: string;
+        data: ArrayBuffer;
+        weight: number;
+    }>;
+    /** A 1200x630 image as a data: URL, drawn full-bleed under the text. Anything that needs
+     *  a blur or a glow is baked in here; the renderer only sets type. Absent, `ground` fills. */
+    backdrop?: () => Promise<string>;
+};
+export declare const freedomDefault: BrandPack;

package/lib/brand/pack.js

@@ -0,0 +1,17 @@
+import { newsreader } from './default-share.js';
+export const freedomDefault = {
+    id: 'freedom-default',
+    name: 'Freedom',
+    ground: '#0e0f13',
+    ink: '#ece7dc',
+    accent: '#c9a96e',
+    type: {
+        display: 'Georgia, "Iowan Old Style", "Times New Roman", serif',
+        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/brand/share-card.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPack } from './pack.js';
+export declare const SHARE_W = 1200;
+export declare const SHARE_H = 630;
+/** Titles get smaller as they get longer, so three lines always fit above the mark. */
+export declare function titleSize(title: string): number;
+export declare function ShareCard({ pack, title, fontName, backdrop }: {
+    pack: BrandPack;
+    title: string;
+    fontName: string;
+    backdrop?: string;
+}): import("react").JSX.Element;
+/** A 1200x630 PNG for one page. Caller has already checked `pack.share` exists. */
+export declare function renderShareCard(pack: BrandPack, title: string): Promise<Response>;

package/lib/brand/share-card.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The title card a page unfurls as when it has no cover: kicker, title, the pack's backdrop.
+// Drawn with next/og (Satori), which lays out a subset of CSS: flex only, inline styles, no
+// blur or glow. Anything atmospheric is the backdrop's job. The lower-left corner is left
+// clear, because a backdrop may put a small mark there.
+import { ImageResponse } from 'next/og';
+export const SHARE_W = 1200;
+export const SHARE_H = 630;
+const loaded = new WeakMap();
+function assetsFor(pack) {
+    let p = loaded.get(pack);
+    if (!p) {
+        const share = pack.share;
+        p = Promise.all([share.font(), share.backdrop?.()]).then(([font, backdrop]) => ({ font, backdrop }));
+        loaded.set(pack, p);
+    }
+    return p;
+}
+/** Titles get smaller as they get longer, so three lines always fit above the mark. */
+export function titleSize(title) {
+    if (title.length <= 40)
+        return 76;
+    if (title.length <= 80)
+        return 62;
+    return 52;
+}
+export function ShareCard({ pack, title, fontName, backdrop }) {
+    const size = titleSize(title);
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: SHARE_W,
+            height: SHARE_H,
+            padding: '96px 96px 0',
+            backgroundColor: pack.ground,
+            ...(backdrop ? { backgroundImage: `url(${backdrop})`, backgroundSize: `${SHARE_W}px ${SHARE_H}px` } : {}),
+            color: pack.ink,
+            fontFamily: fontName,
+        }, children: [_jsx("div", { style: { display: 'flex', fontSize: 22, letterSpacing: 5, textTransform: 'uppercase', color: pack.accent, fontWeight: 500 }, children: pack.kicker }), _jsx("div", { style: { display: 'flex', marginTop: 28, fontSize: size, lineHeight: 1.18, maxWidth: 980, lineClamp: 3 }, children: title })] }));
+}
+/** A 1200x630 PNG for one page. Caller has already checked `pack.share` exists. */
+export async function renderShareCard(pack, title) {
+    const { font, backdrop } = await assetsFor(pack);
+    return new ImageResponse(_jsx(ShareCard, { pack: pack, title: title, fontName: font.name, backdrop: backdrop }), {
+        width: SHARE_W,
+        height: SHARE_H,
+        fonts: [{ name: font.name, data: font.data, weight: font.weight, style: 'normal' }],
+        headers: { 'cache-control': 'public, max-age=3600, s-maxage=31536000, stale-while-revalidate=86400' },
+    });
+}

package/lib/brand/wrapper.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { BrandPack } from './pack.js';
+/** The page backdrop: the pack's own Wrapper when it has one, else a flat ground. */
+export declare function BrandGround({ pack, children }: {
+    pack: BrandPack;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The mark above the kicker: the pack's own, else a small dove. */
+export declare function BrandMark({ pack, className }: {
+    pack: BrandPack;
+    className?: string;
+}): import("react").JSX.Element;

package/lib/brand/wrapper.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The page backdrop: the pack's own Wrapper when it has one, else a flat ground. */
+export function BrandGround({ pack, children }) {
+    if (pack.Wrapper)
+        return _jsx(pack.Wrapper, { children: children });
+    return (_jsx("div", { "data-brand-ground": pack.id, className: "min-h-screen", style: { background: pack.ground, color: pack.ink, fontFamily: pack.type.body }, children: children }));
+}
+/** The mark above the kicker: the pack's own, else a small dove. */
+export function BrandMark({ pack, className }) {
+    if (pack.Mark)
+        return _jsx(pack.Mark, { className: className });
+    return (_jsx("span", { "data-brand-mark": pack.id, "aria-hidden": true, className: className, style: { color: pack.accent }, children: "\uD83D\uDD4A" }));
+}

package/lib/gate.d.ts

@@ -0,0 +1 @@
+export declare const ARTIFACT_PUBLIC_PREFIXES: readonly ["/a/", "/api/artifacts"];

package/lib/gate.js

@@ -0,0 +1,5 @@
+// Routes every instance serves without its site gate. The trailing slash on '/a/' is
+// load-bearing: a bare '/a' prefix also matched /admin on the pilot (2026-09-11).
+// On a dedicated host every path is public and this list is moot; it exists for an
+// instance that mounts artifacts inside a gated site under the '/a/' prefix.
+export const ARTIFACT_PUBLIC_PREFIXES = ['/a/', '/api/artifacts'];

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './artifacts/index.js';
+export * from './brand/index.js';
+export * from './gate.js';
+export { createArtifactRoutes, type ArtifactRoutesConfig } from './routes/artifacts.js';

package/lib/index.js

@@ -0,0 +1,4 @@
+export * from './artifacts/index.js';
+export * from './brand/index.js';
+export * from './gate.js';
+export { createArtifactRoutes } from './routes/artifacts.js';

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

@@ -0,0 +1,14 @@
+export type WordTiming = {
+    w: string;
+    s: number;
+    e: number;
+};
+export declare function ArtifactReader({ src, words, rootId, label, accent, ground, }: {
+    src: string;
+    words: WordTiming[];
+    rootId: string;
+    /** The line under the play button; the brand pack decides it from the voice. */
+    label: string;
+    accent: string;
+    ground: string;
+}): import("react").JSX.Element;

package/lib/reader/artifact-reader.js

@@ -0,0 +1,165 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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';
+const SKIP = '[data-nospeak], [data-artifact-links], pre, [data-footnotes], sup, img';
+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. */
+function wrapWords(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode: (n) => {
+            const el = n.parentElement;
+            if (!el || el.closest(SKIP))
+                return NodeFilter.FILTER_REJECT;
+            return n.nodeValue && n.nodeValue.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        },
+    });
+    const nodes = [];
+    for (let n = walker.nextNode(); n; n = walker.nextNode())
+        nodes.push(n);
+    const spans = [];
+    for (const node of nodes) {
+        const parts = node.nodeValue.split(/(\s+)/);
+        const frag = document.createDocumentFragment();
+        for (const part of parts) {
+            if (!part)
+                continue;
+            if (/^\s+$/.test(part)) {
+                frag.appendChild(document.createTextNode(part));
+                continue;
+            }
+            const span = document.createElement('span');
+            span.textContent = part;
+            span.className = 'artifact-word';
+            frag.appendChild(span);
+            spans.push(span);
+        }
+        node.parentNode.replaceChild(frag, node);
+    }
+    return spans;
+}
+/** Map each timing index to a DOM span index, tolerating small mismatches. */
+function align(spans, words) {
+    const out = [];
+    let j = 0;
+    for (let i = 0; i < words.length; i++) {
+        const target = normalize(words[i].w);
+        if (!target) {
+            out.push(null);
+            continue;
+        }
+        let found = -1;
+        for (let k = j; k < Math.min(spans.length, j + 6); k++) {
+            if (normalize(spans[k].textContent ?? '') === target) {
+                found = k;
+                break;
+            }
+        }
+        if (found === -1) {
+            out.push(null);
+            continue;
+        }
+        out.push(spans[found]);
+        j = found + 1;
+    }
+    return out;
+}
+function fmt(t) {
+    const m = Math.floor(t / 60);
+    const s = Math.floor(t % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
+    const narrator = label;
+    const audioRef = useRef(null);
+    const mapRef = useRef([]);
+    const litRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [t, setT] = useState(0);
+    const [dur, setDur] = useState(0);
+    const [rate, setRate] = useState(1);
+    useEffect(() => {
+        const root = document.getElementById(rootId);
+        if (!root)
+            return;
+        const spans = wrapWords(root);
+        mapRef.current = align(spans, words);
+        const onClick = (e) => {
+            const el = e.target.closest('.artifact-word');
+            if (!el)
+                return;
+            const idx = mapRef.current.indexOf(el);
+            if (idx === -1 || !audioRef.current)
+                return;
+            audioRef.current.currentTime = words[idx].s;
+            void audioRef.current.play();
+        };
+        root.addEventListener('click', onClick);
+        return () => root.removeEventListener('click', onClick);
+    }, [rootId, words]);
+    useEffect(() => {
+        const a = audioRef.current;
+        if (!a)
+            return;
+        let raf = 0;
+        const tick = () => {
+            const now = a.currentTime;
+            setT(now);
+            // Binary search the word at `now`.
+            let lo = 0;
+            let hi = words.length - 1;
+            let idx = -1;
+            while (lo <= hi) {
+                const mid = (lo + hi) >> 1;
+                if (words[mid].s <= now) {
+                    idx = mid;
+                    lo = mid + 1;
+                }
+                else
+                    hi = mid - 1;
+            }
+            const el = idx >= 0 && now <= words[idx].e + 0.25 ? mapRef.current[idx] : null;
+            if (el !== litRef.current) {
+                litRef.current?.classList.remove('artifact-word-lit');
+                el?.classList.add('artifact-word-lit');
+                litRef.current = el;
+                if (el && playing) {
+                    const r = el.getBoundingClientRect();
+                    if (r.top < 80 || r.bottom > window.innerHeight - 140) {
+                        el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                    }
+                }
+            }
+            raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [words, playing]);
+    const toggle = () => {
+        const a = audioRef.current;
+        if (!a)
+            return;
+        if (a.paused)
+            void a.play();
+        else
+            a.pause();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+        .artifact-word { border-radius: 3px; transition: background-color 120ms; }
+        .artifact-word:hover { background: rgba(255,255,255,0.08); cursor: pointer; }
+        .artifact-word-lit { background: ${accent}59; color: #fff; }
+      ` }), _jsx("audio", { ref: audioRef, src: src, preload: "metadata", onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), _jsx("div", { className: "fixed inset-x-0 bottom-0 z-40 border-t border-white/10 backdrop-blur", style: { background: `${ground}e6` }, 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-zinc-400", 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-white/15 px-2 py-1 text-xs text-zinc-300", "aria-label": "Playback speed", children: [rate, "x"] })] }) }), _jsx("div", { className: "h-20", "aria-hidden": true })] }));
+}

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

@@ -0,0 +1,7 @@
+/** Quoting a sentence is fine; lifting a section is not. */
+export declare const COPY_LIMIT = 280;
+export declare function ReaderWatch({ artifactId, endpoint, accent }: {
+    artifactId: string;
+    endpoint: string;
+    accent: string;
+}): import("react").JSX.Element | null;