@supersuit/artifacts 0.9.0 → 0.11.0

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/comment-card.d.ts

@@ -0,0 +1,18 @@
+import { type CommentsMode } from '../artifacts/comments.js';
+/** The warning, word for word. `They` is fixed copy: the card never guesses a pronoun. */
+export declare function warningLine(ownerName: string, mode: CommentsMode): string;
+export declare const DEVICE_LINE = "Saved on this device. Sign in to keep it everywhere.";
+export declare function CommentCard({ ownerName, mode, canShare, signedIn, quote, initial, accent, signIn, onSave, onCancel, }: {
+    ownerName: string;
+    mode: CommentsMode;
+    canShare: boolean;
+    signedIn: boolean;
+    /** The quoted text the comment is pinned to, shown above the box. */
+    quote?: string;
+    initial?: string;
+    accent?: string;
+    signIn?: string | null;
+    /** Resolves to an error to show, or null when saved. */
+    onSave: (body: string, share: boolean) => Promise<string | null>;
+    onCancel: () => void;
+}): import("react").JSX.Element;

package/lib/reader/comment-card.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The card a comment is written in. It says, before anything is typed, who will read it: when the
+// reader cannot share, the first line in the card is the warning that this is a personal note the
+// owner will never see, shown every time, because the moment it matters is the moment someone is
+// about to write something they meant for the owner. When they can share, a switch picks Share
+// (the default) or Just for me.
+import { useState } from 'react';
+import { MAX_COMMENT_CHARS } from '../artifacts/comments.js';
+/** The warning, word for word. `They` is fixed copy: the card never guesses a pronoun. */
+export function warningLine(ownerName, mode) {
+    const why = mode === 'off'
+        ? `${ownerName} has not opened this page to comments`
+        : `${ownerName} takes comments on this page from signed-in readers`;
+    return `Only you will see this. ${why}, so this is a personal note. They won't see it.`;
+}
+export const DEVICE_LINE = 'Saved on this device. Sign in to keep it everywhere.';
+export function CommentCard({ ownerName, mode, canShare, signedIn, quote, initial = '', accent = 'currentColor', signIn, onSave, onCancel, }) {
+    const [text, setText] = useState(initial);
+    const [share, setShare] = useState(canShare);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const personal = !canShare || !share;
+    const submit = async (e) => {
+        e?.preventDefault();
+        const body = text.trim();
+        if (!body || busy)
+            return;
+        setBusy(true);
+        const err = await onSave(body, canShare && share);
+        setBusy(false);
+        setError(err);
+    };
+    return (_jsxs("form", { "data-comment-card": true, "data-comment-ui": true, "data-nospeak": true, onSubmit: submit, className: "w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-left font-sans text-sm text-[color:var(--a-strong)] shadow-xl", children: [!canShare ? (_jsx("p", { "data-comment-warning": true, role: "note", className: "mb-2 rounded-lg border px-3 py-2 text-[13px] leading-snug", style: { borderColor: accent }, children: warningLine(ownerName, mode) })) : null, quote ? _jsx("p", { className: "mb-2 line-clamp-3 border-l-2 pl-2 text-[13px] italic opacity-75", style: { borderColor: accent }, children: quote }) : null, _jsx("textarea", { value: text, autoFocus: true, onChange: (e) => setText(e.target.value), onKeyDown: (e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey))
+                    void submit(); }, maxLength: MAX_COMMENT_CHARS, rows: 3, "aria-label": personal ? 'A personal note' : `A comment for ${ownerName}`, placeholder: personal ? 'A note for yourself' : `A comment for ${ownerName}`, className: "w-full rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-ground,transparent)] p-2 text-[15px]" }), canShare ? (_jsxs("fieldset", { className: "mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[13px]", children: [_jsx("legend", { className: "sr-only", children: "Who sees this" }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "comment-share", "data-comment-share": "share", checked: share, onChange: () => setShare(true) }), `Share with ${ownerName}`] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "comment-share", "data-comment-share": "mine", checked: !share, onChange: () => setShare(false) }), "Just for me"] })] })) : null, personal && !signedIn ? (_jsx("p", { "data-comment-device": true, className: "mt-2 text-xs opacity-70", children: signIn ? _jsxs(_Fragment, { children: ["Saved on this device. ", _jsx("a", { href: signIn, className: "underline", children: "Sign in to keep it everywhere." })] }) : DEVICE_LINE })) : null, error ? _jsx("p", { role: "alert", className: "mt-2 text-xs text-amber-500", children: error }) : null, _jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx("button", { type: "submit", "data-comment-save": true, disabled: busy || !text.trim(), className: "rounded-full px-4 py-1 text-sm font-medium disabled:opacity-40", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: personal ? 'Save note' : 'Comment' }), _jsx("button", { type: "button", onClick: onCancel, className: "text-sm opacity-70 hover:opacity-100", children: "Cancel" })] })] }));
+}

package/lib/reader/comment-layer.d.ts

@@ -0,0 +1,17 @@
+import { type CommentsMode } from '../artifacts/comments.js';
+export declare function CommentLayer({ artifactId, rootId, ownerName, comments, canShare, signedIn, isOwner, version, accent, ground, signIn, }: {
+    artifactId: string;
+    /** The element holding the page's prose, the same root the read-aloud lights. */
+    rootId: string;
+    ownerName: string;
+    comments: CommentsMode;
+    /** This reader may leave shared comments here (comments: is on, and they are signed in where it asks). */
+    canShare: boolean;
+    signedIn: boolean;
+    isOwner: boolean;
+    /** The version being read, stored on every comment left on it. */
+    version: number;
+    accent: string;
+    ground: string;
+    signIn?: string | null;
+}): import("react").JSX.Element;

package/lib/reader/comment-layer.js

@@ -0,0 +1,384 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Comments on any part of a page, Figma style. Select text and a "Comment" chip appears; hold and
+// drag over anything that is not text (an image, a table, the gap between paragraphs) and a box
+// draws. Either opens the card (comment-card.tsx), which says before anything is typed whether
+// the owner will ever read it.
+//
+// Two kinds, kept apart all the way down:
+//   SHARED   the `comments` slot on the state API; filled pins in the page's accent.
+//   PERSONAL the reader's own notes: /personal when signed in, else this device only
+//            (device-notes.ts); hollow pins marked "only you". Never on the state API.
+//
+// Pins sit in the margin beside a quote, or on the box drawn. A comment whose quote or block is gone
+// from this version is listed under "Comments on earlier versions" after the article, with its
+// quote, the way the notes widget sets aside notes on a renamed heading. Replies are one level
+// deep and only on shared comments. Everything drawn here is data-nospeak and data-comment-ui, so
+// the read-aloud never reads it and the text index never counts it.
+//
+// Rendered empty on the server and on the first client render so the markup always hydrates; the
+// overlay is portalled onto document.body so its coordinates are page coordinates.
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { MAX_QUOTE_CHARS, textAnchorFrom } from '../artifacts/anchor.js';
+import { COMMENTS_SLOT } from '../artifacts/comments.js';
+import { CommentCard } from './comment-card.js';
+import { addDeviceNote, deviceNotes, removeDeviceNote, replaceDeviceNote } from './device-notes.js';
+import { boxOf, headingAt, indexText, offsetAt, placeAnchor, regionFrom } from './comment-place.js';
+const isValue = (v) => !!v && typeof v === 'object' && typeof v.body === 'string' && !!v.anchor && typeof v.anchor === 'object';
+const LONG_PRESS_MS = 400;
+const DRAG_PX = 8;
+/** Where a drag never starts a box: controls, and anything that is somebody's words. */
+const NOT_FOR_BOXES = 'a, button, input, textarea, select, audio, video[controls], summary, label, [data-comment-ui], [data-note-toggle], [data-heading-notes], [data-artifact-notes], .artifact-defined-term, .artifact-word';
+function isTextTarget(el) {
+    if (el.closest(NOT_FOR_BOXES))
+        return true;
+    for (const c of Array.from(el.childNodes))
+        if (c.nodeType === Node.TEXT_NODE && c.textContent?.trim())
+            return true;
+    return false;
+}
+function sharedFrom(body) {
+    const slot = body?.slots?.[COMMENTS_SLOT];
+    if (!slot)
+        return [];
+    const rows = new Map();
+    for (const r of Array.isArray(slot.mine) ? slot.mine : [])
+        rows.set(String(r.id), { ...r, mine: true });
+    for (const r of Array.isArray(slot.shared) ? slot.shared : [])
+        rows.set(String(r.id), r);
+    const out = [];
+    for (const r of rows.values()) {
+        if (!isValue(r.value))
+            continue;
+        out.push({ id: String(r.id), kind: 'shared', where: 'server', value: r.value, name: r.mine === true ? 'You' : typeof r.name === 'string' ? r.name : 'a reader', mine: r.mine === true, at: String(r.at ?? '') });
+    }
+    return out.sort((a, b) => a.at.localeCompare(b.at));
+}
+const personalFrom = (notes, where) => notes.filter((n) => isValue(n.value)).map((n) => ({ id: n.id, kind: 'personal', where, value: n.value, name: 'You', mine: true, at: n.at }));
+export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare, signedIn, isOwner, version, accent, ground, signIn, }) {
+    const stateUrl = `/api/artifacts/${artifactId}/state`;
+    const personalUrl = `/api/artifacts/${artifactId}/personal`;
+    const [mounted, setMounted] = useState(false);
+    const [shared, setShared] = useState([]);
+    const [serverNotes, setServerNotes] = useState([]);
+    const [device, setDevice] = useState([]);
+    const [onServer, setOnServer] = useState(signedIn);
+    const [showPins, setShowPins] = useState(true);
+    const [panel, setPanel] = useState(false);
+    const [chip, setChip] = useState(null);
+    const [draft, setDraft] = useState(null);
+    const [thread, setThread] = useState(null);
+    const [drag, setDrag] = useState(null);
+    const [tick, setTick] = useState(0);
+    const call = useCallback(async (url, init) => {
+        try {
+            const r = await fetch(url, { credentials: 'same-origin', cache: 'no-store', ...init });
+            return { status: r.status, body: (await r.json().catch(() => ({}))) };
+        }
+        catch {
+            return { status: 0, body: { error: 'that did not reach the page; try again' } };
+        }
+    }, []);
+    const refreshDevice = useCallback(() => setDevice(personalFrom(deviceNotes(artifactId), 'device')), [artifactId]);
+    useEffect(() => {
+        setMounted(true);
+        refreshDevice();
+        let live = true;
+        if (comments !== 'off') {
+            void call(stateUrl).then((r) => { if (live && r.status === 200)
+                setShared(sharedFrom(r.body)); });
+        }
+        if (signedIn) {
+            void (async () => {
+                const r = await call(personalUrl);
+                if (!live)
+                    return;
+                if (r.status !== 200) {
+                    setOnServer(false);
+                    return;
+                }
+                let notes = r.body.notes ?? [];
+                // Notes kept on this device before signing in move to the account, then leave the device.
+                for (const n of deviceNotes(artifactId)) {
+                    const m = await call(personalUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ value: n.value }) });
+                    if (m.status !== 200)
+                        break;
+                    notes = m.body.notes ?? notes;
+                    removeDeviceNote(artifactId, n.id);
+                }
+                if (!live)
+                    return;
+                setServerNotes(personalFrom(notes, 'server'));
+                refreshDevice();
+            })();
+        }
+        const relayout = () => setTick((t) => t + 1);
+        window.addEventListener('resize', relayout);
+        const root = document.getElementById(rootId);
+        const ro = typeof ResizeObserver !== 'undefined' && root ? new ResizeObserver(relayout) : null;
+        if (ro && root)
+            ro.observe(root);
+        return () => { live = false; window.removeEventListener('resize', relayout); ro?.disconnect(); };
+    }, [artifactId, comments, signedIn, stateUrl, personalUrl, rootId, call, refreshDevice]);
+    // Text selection inside the page shows the Comment chip.
+    useEffect(() => {
+        const root = document.getElementById(rootId);
+        if (!root)
+            return;
+        const check = () => {
+            const sel = document.getSelection();
+            if (!sel || sel.isCollapsed || !sel.rangeCount)
+                return setChip(null);
+            const r = sel.getRangeAt(0);
+            const common = r.commonAncestorContainer;
+            if (!root.contains(common) || (common instanceof Element ? common : common.parentElement)?.closest('[data-comment-ui]'))
+                return setChip(null);
+            const idx = indexText(root);
+            let s = offsetAt(idx, r.startContainer, r.startOffset);
+            let e = offsetAt(idx, r.endContainer, r.endOffset);
+            if (s === null || e === null)
+                return setChip(null);
+            while (s < e && /\s/.test(idx.text[s]))
+                s++;
+            while (e > s && /\s/.test(idx.text[e - 1]))
+                e--;
+            if (e <= s)
+                return setChip(null);
+            e = Math.min(e, s + MAX_QUOTE_CHARS);
+            const anchor = textAnchorFrom(idx.text, s, e, headingAt(root, idx, s));
+            const rect = typeof r.getBoundingClientRect === 'function' ? r.getBoundingClientRect() : null;
+            setChip({ anchor, quote: anchor.quote, x: (rect?.right ?? 0) + window.scrollX, y: (rect?.bottom ?? 0) + window.scrollY + 6 });
+        };
+        let timer;
+        // Phones adjust a selection with handles and fire no mouseup; settle on selectionchange instead.
+        const settle = () => { clearTimeout(timer); timer = setTimeout(check, 350); };
+        root.addEventListener('mouseup', check);
+        root.addEventListener('keyup', check);
+        document.addEventListener('selectionchange', settle);
+        return () => { clearTimeout(timer); root.removeEventListener('mouseup', check); root.removeEventListener('keyup', check); document.removeEventListener('selectionchange', settle); };
+    }, [rootId]);
+    // Hold and drag over anything that is not text draws a box. A mouse starts after 8px of travel;
+    // a finger after a 400 ms long-press, so an ordinary swipe still scrolls.
+    const dragRef = useRef(null);
+    useEffect(() => {
+        const root = document.getElementById(rootId);
+        if (!root)
+            return;
+        const down = (e) => {
+            if (e.button !== 0 || !(e.target instanceof Element) || isTextTarget(e.target))
+                return;
+            const d = { x: e.clientX, y: e.clientY, armed: e.pointerType !== 'touch', drawing: false };
+            if (e.pointerType === 'touch')
+                d.timer = setTimeout(() => { d.armed = true; navigator.vibrate?.(10); }, LONG_PRESS_MS);
+            else
+                e.preventDefault();
+            dragRef.current = d;
+        };
+        const move = (e) => {
+            const d = dragRef.current;
+            if (!d)
+                return;
+            const far = Math.hypot(e.clientX - d.x, e.clientY - d.y) > DRAG_PX;
+            if (!d.armed) {
+                if (far) {
+                    clearTimeout(d.timer);
+                    dragRef.current = null;
+                }
+                return;
+            }
+            if (!d.drawing && !far)
+                return;
+            d.drawing = true;
+            setDrag({ x1: d.x, y1: d.y, x2: e.clientX, y2: e.clientY });
+        };
+        const up = (e) => {
+            const d = dragRef.current;
+            dragRef.current = null;
+            if (!d)
+                return;
+            clearTimeout(d.timer);
+            setDrag(null);
+            if (!d.drawing)
+                return;
+            const box = { left: Math.min(d.x, e.clientX), right: Math.max(d.x, e.clientX), top: Math.min(d.y, e.clientY), bottom: Math.max(d.y, e.clientY) };
+            // The box belongs to the block it covers most, so a drag across a gap still lands somewhere.
+            let best = null;
+            for (const el of root.querySelectorAll('[data-block]')) {
+                const b = el.getBoundingClientRect();
+                const area = Math.max(0, Math.min(box.right, b.right) - Math.max(box.left, b.left)) * Math.max(0, Math.min(box.bottom, b.bottom) - Math.max(box.top, b.top));
+                if (area > 0 && (!best || area > best.area))
+                    best = { el, area };
+            }
+            if (!best)
+                return;
+            const anchor = regionFrom(best.el.getBoundingClientRect(), { x: d.x, y: d.y }, { x: e.clientX, y: e.clientY }, best.el.dataset.block);
+            if (anchor) {
+                setChip(null);
+                setDraft({ anchor, x: box.right + window.scrollX, y: box.bottom + window.scrollY + 6 });
+            }
+        };
+        // While a finger is drawing, the page must not scroll under it.
+        const touchmove = (e) => { if (dragRef.current?.armed)
+            e.preventDefault(); };
+        const noImageDrag = (e) => { if (dragRef.current)
+            e.preventDefault(); };
+        root.addEventListener('pointerdown', down);
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
+        root.addEventListener('touchmove', touchmove, { passive: false });
+        root.addEventListener('dragstart', noImageDrag);
+        return () => {
+            root.removeEventListener('pointerdown', down);
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+            window.removeEventListener('pointercancel', up);
+            root.removeEventListener('touchmove', touchmove);
+            root.removeEventListener('dragstart', noImageDrag);
+        };
+    }, [rootId]);
+    const items = useMemo(() => [...shared, ...serverNotes, ...device], [shared, serverNotes, device]);
+    const tops = useMemo(() => items.filter((i) => !i.value.parent || !items.some((p) => p.id === i.value.parent)), [items]);
+    // Where each top-level comment sits on this version, or that it is on an earlier one.
+    const layout = useMemo(() => {
+        const placed = [];
+        const earlier = [];
+        if (!mounted)
+            return { placed, earlier };
+        const root = document.getElementById(rootId);
+        if (!root)
+            return { placed, earlier: tops };
+        const idx = indexText(root);
+        const col = (root.querySelector('article') ?? root).getBoundingClientRect();
+        const margin = Math.min(col.right + window.scrollX + 8, window.scrollX + (window.innerWidth || col.right + 40) - 32);
+        for (const item of tops) {
+            const at = item.value.parent ? null : placeAnchor(root, idx, item.value.anchor);
+            if (!at) {
+                earlier.push(item);
+                continue;
+            }
+            const b = boxOf(at);
+            if (at.kind === 'text')
+                placed.push({ item, left: margin, top: b.top });
+            else
+                placed.push({ item, left: b.left + b.width - 12, top: b.top - 12, box: b });
+        }
+        // Pins on the same line stack instead of hiding one another.
+        placed.sort((a, b) => a.top - b.top || a.left - b.left);
+        for (let i = 1; i < placed.length; i++) {
+            const p = placed[i - 1];
+            if (Math.abs(placed[i].left - p.left) < 20 && placed[i].top - p.top < 26)
+                placed[i].top = p.top + 26;
+        }
+        return { placed, earlier };
+        // `tick` re-measures after a resize.
+    }, [mounted, rootId, tops, tick]); // eslint-disable-line react-hooks/exhaustive-deps
+    const saveNew = async (body, share, d) => {
+        const value = { anchor: d.anchor, body, version };
+        if (share) {
+            const r = await call(stateUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ slot: COMMENTS_SLOT, op: 'append', value }) });
+            if (r.status !== 200)
+                return typeof r.body.error === 'string' ? r.body.error : 'that did not save; try again';
+            setShared(sharedFrom(r.body));
+        }
+        else if (signedIn && onServer) {
+            const r = await call(personalUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ value }) });
+            if (r.status === 200)
+                setServerNotes(personalFrom(r.body.notes ?? [], 'server'));
+            else if (r.body.device === true) {
+                setOnServer(false);
+                addDeviceNote(artifactId, value);
+                refreshDevice();
+            }
+            else
+                return typeof r.body.error === 'string' ? r.body.error : 'that did not save; try again';
+        }
+        else {
+            addDeviceNote(artifactId, value);
+            refreshDevice();
+        }
+        document.getSelection()?.removeAllRanges();
+        setDraft(null);
+        return null;
+    };
+    const remove = async (item) => {
+        if (item.where === 'device') {
+            removeDeviceNote(artifactId, item.id);
+            refreshDevice();
+        }
+        else if (item.kind === 'personal') {
+            const r = await call(`${personalUrl}?entry=${encodeURIComponent(item.id)}`, { method: 'DELETE' });
+            if (r.status === 200)
+                setServerNotes(personalFrom(r.body.notes ?? [], 'server'));
+        }
+        else {
+            const r = await call(stateUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ slot: COMMENTS_SLOT, op: 'remove', entry: item.id }) });
+            if (r.status === 200)
+                setShared(sharedFrom(r.body));
+        }
+        if (thread === item.id)
+            setThread(null);
+    };
+    const edit = async (item, body) => {
+        const value = { ...item.value, body };
+        if (item.where === 'device') {
+            replaceDeviceNote(artifactId, item.id, value);
+            refreshDevice();
+            return null;
+        }
+        const r = item.kind === 'personal'
+            ? await call(personalUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ entry: item.id, value }) })
+            : await call(stateUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ slot: COMMENTS_SLOT, op: 'replace', entry: item.id, value }) });
+        if (r.status !== 200)
+            return typeof r.body.error === 'string' ? r.body.error : 'that did not save; try again';
+        if (item.kind === 'personal')
+            setServerNotes(personalFrom(r.body.notes ?? [], 'server'));
+        else
+            setShared(sharedFrom(r.body));
+        return null;
+    };
+    const reply = async (parent, body) => {
+        const value = { anchor: parent.value.anchor, body, version, parent: parent.id };
+        const r = await call(stateUrl, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ slot: COMMENTS_SLOT, op: 'append', value }) });
+        if (r.status !== 200)
+            return typeof r.body.error === 'string' ? r.body.error : 'that did not save; try again';
+        setShared(sharedFrom(r.body));
+        return null;
+    };
+    const open = layout.placed.find((p) => p.item.id === thread);
+    const openItem = open?.item ?? layout.earlier.find((i) => i.id === thread);
+    const count = tops.length;
+    const overlay = mounted ? (_jsxs("div", { "data-comment-ui": true, "data-nospeak": true, className: "font-sans", children: [showPins ? layout.placed.map(({ item, left, top, box }) => (_jsxs("div", { children: [box ? (_jsx("div", { "data-comment-box": item.id, "aria-hidden": true, className: "pointer-events-none absolute z-30 rounded-md border-2", style: { left: box.left, top: box.top, width: box.width, height: box.height, borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', opacity: thread === item.id ? 1 : 0.55 } })) : null, _jsx(Pin, { item: item, left: left, top: top, accent: accent, ground: ground, onOpen: () => setThread(thread === item.id ? null : item.id) })] }, item.id))) : null, chip && !draft ? (_jsx("button", { type: "button", "data-comment-chip": true, className: "absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg", style: { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, onSave: (body, share) => saveNew(body, share, draft), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, accent: accent, onClose: () => setThread(null), onRemove: remove, onEdit: edit, onReply: reply }) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { hidden: true, "data-comment-layer": comments, "data-comment-can-share": canShare ? 'yes' : 'no' }), mounted && layout.earlier.length ? (_jsxs("section", { "data-comments-earlier": true, "data-comment-ui": true, "data-nospeak": true, className: "mx-auto max-w-2xl px-6 pb-16 text-sm", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: "Comments on earlier versions" }), _jsx("ul", { className: "m-0 mt-2 grid list-none gap-3 p-0", children: layout.earlier.map((item) => (_jsxs("li", { className: "m-0 border-l-2 py-1 pl-3", style: { borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid' }, children: [item.value.anchor.kind === 'text' ? _jsxs("span", { className: "block text-[13px] italic opacity-70", children: ["\u201C", item.value.anchor.quote, "\u201D"] }) : _jsx("span", { className: "block text-[13px] italic opacity-70", children: "A box on part of the page that has changed" }), _jsx("span", { className: "block whitespace-pre-wrap text-[15px] text-[color:var(--a-strong)]", children: item.value.body }), _jsxs("span", { className: "block text-xs opacity-60", children: [item.kind === 'personal' ? 'only you' : item.name, ` · version ${item.value.version}`, item.mine ? _jsx("button", { type: "button", onClick: () => void remove(item), className: "ml-2 underline", children: "delete" }) : null] })] }, item.id))) })] })) : null, overlay ? createPortal(overlay, document.body) : null] }));
+}
+function Pin({ item, left, top, accent, ground, onOpen }) {
+    const personal = item.kind === 'personal';
+    return (_jsx("button", { type: "button", "data-comment-pin": item.kind, "data-comment-id": item.id, onClick: onOpen, "aria-label": personal ? 'Your personal note (only you)' : `Comment by ${item.name}`, className: "absolute z-30 flex h-6 min-w-6 items-center justify-center gap-1 rounded-full border-2 px-1.5 text-[10px] font-semibold shadow", style: { left, top, borderColor: accent, background: personal ? ground : accent, color: personal ? accent : 'var(--a-on-accent, #111)' }, children: personal ? _jsx("span", { children: "only you" }) : _jsx("span", { "aria-hidden": true, children: "\u25CF" }) }));
+}
+function Floating({ x, y, children }) {
+    // Kept inside the screen on a phone, where the margin a pin sits in may be the screen's edge.
+    const width = typeof window === 'undefined' ? 360 : Math.min(360, window.innerWidth - 16);
+    const left = typeof window === 'undefined' ? x : Math.max(window.scrollX + 8, Math.min(x, window.scrollX + window.innerWidth - width - 8));
+    return _jsx("div", { className: "absolute z-50", style: { left, top: y }, children: children });
+}
+function Thread({ item, replies, canReply, accent, onClose, onRemove, onEdit, onReply }) {
+    const [replying, setReplying] = useState(false);
+    return (_jsxs("div", { "data-comment-thread": true, "data-comment-ui": true, "data-nospeak": true, className: "w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-sm text-[color:var(--a-strong)] shadow-xl", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.15em]", style: { color: accent }, children: [_jsx("span", { children: item.kind === 'personal' ? 'Only you' : 'Comment' }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "opacity-70 hover:opacity-100", children: "\u00D7" })] }), item.value.anchor.kind === 'text' ? _jsx("p", { className: "mb-2 line-clamp-2 border-l-2 pl-2 text-[13px] italic opacity-70", style: { borderColor: accent }, children: item.value.anchor.quote }) : null, _jsx(Entry, { item: item, onRemove: onRemove, onEdit: onEdit }), replies.length ? _jsx("ul", { className: "m-0 mt-2 grid list-none gap-2 border-l pl-3 p-0", children: replies.map((r) => _jsx("li", { className: "m-0", children: _jsx(Entry, { item: r, onRemove: onRemove, onEdit: onEdit }) }, r.id)) }) : null, canReply ? (replying
+                ? _jsx(InlineForm, { label: "Reply", accent: accent, onCancel: () => setReplying(false), onSubmit: async (b) => { const e = await onReply(item, b); if (!e)
+                        setReplying(false); return e; } })
+                : _jsx("button", { type: "button", "data-comment-reply": true, onClick: () => setReplying(true), className: "mt-2 text-xs underline", children: "Reply" })) : null] }));
+}
+function Entry({ item, onRemove, onEdit }) {
+    const [editing, setEditing] = useState(false);
+    if (editing)
+        return _jsx(InlineForm, { label: "Save", initial: item.value.body, onCancel: () => setEditing(false), onSubmit: async (b) => { const e = await onEdit(item, b); if (!e)
+                setEditing(false); return e; } });
+    return (_jsxs("div", { children: [_jsx("p", { className: "m-0 whitespace-pre-wrap text-[15px]", children: item.value.body }), _jsxs("p", { className: "m-0 text-xs opacity-60", children: [item.kind === 'personal' ? (item.where === 'device' ? 'only you, on this device' : 'only you') : item.name, item.mine ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-comment-edit": true, onClick: () => setEditing(true), className: "ml-2 underline", children: "edit" }), _jsx("button", { type: "button", "data-comment-delete": true, onClick: () => void onRemove(item), className: "ml-2 underline", children: "delete" })] })) : null] })] }));
+}
+function InlineForm({ label, initial = '', accent = 'currentColor', onSubmit, onCancel }) {
+    const [text, setText] = useState(initial);
+    const [error, setError] = useState(null);
+    return (_jsxs("form", { className: "mt-2", onSubmit: async (e) => { e.preventDefault(); if (text.trim())
+            setError(await onSubmit(text.trim())); }, children: [_jsx("textarea", { value: text, autoFocus: true, rows: 2, onChange: (e) => setText(e.target.value), "aria-label": label, className: "w-full rounded-lg border border-[color:var(--a-line)] bg-transparent p-2 text-[15px]" }), error ? _jsx("p", { role: "alert", className: "text-xs text-amber-500", children: error }) : null, _jsxs("div", { className: "mt-1 flex gap-3 text-xs", children: [_jsx("button", { type: "submit", disabled: !text.trim(), className: "rounded-full px-3 py-0.5 font-medium disabled:opacity-40", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: label }), _jsx("button", { type: "button", onClick: onCancel, className: "opacity-70", children: "Cancel" })] })] }));
+}