@supersuit/artifacts 0.29.0 → 0.30.1

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 `@supersuit/artifacts`. One entry per version, newest first. Each entry says what changed, how a
 host can tell whether it is affected (DETECTOR), what a host does about it (REMEDY), and the tests.
 
+## 0.30.1
+
+**Play from here is one compact pill that stays on screen.** A word tapped near the right edge put
+the bar half off the screen, so its label wrapped to three lines inside a pill inside a pill, with
+an emoji play glyph that iOS draws as a picture.
+
+- One pill in the page's accent color, the UI font, 13px, never wrapping, a drawn play triangle, and
+  the close button inside the same pill.
+- Placed under the tapped word and clamped inside the screen.
+- DETECTOR: on a phone, pause and tap a word near the right edge. A three-line bubble means 0.30.0.
+- REMEDY: update the dependency.
+- Tests: `artifact-reader-controls.test.tsx` (no emoji, no wrapping, kept inside a 390px screen).
+
+## 0.30.0
+
+**Every page has a page menu: one small "⋯" button, top right, whose items depend on who you are
+to the page.** Release 1 of the approved design. Things that floated around the page on their own
+(the History link, the comments on/off switch, sign in) now also have one always-findable home.
+
+- A 36px round button fixed top right on every page, past version and door, themed with the
+  page's variables, labelled "Page menu". It opens a sheet on a phone and a popover on a desk;
+  a tap outside or Escape closes it.
+- First line, the role: "Not signed in", "Signed in as Dana", "… · not on this page's list" at a
+  gated door, "… · owner of this page" (`ownerEmail`), "… · admin of this hub" (`admins`).
+- Items, absent (never greyed) when a role cannot use them: **Share** (the phone's share sheet,
+  else copy with "Link copied"; on `invite` pages with "Only people on the list can open it."; on
+  password pages for the owner and admins only, the link carrying `?key=`), **Show / Hide
+  comments** (only where shared comments are on, kept in sync with the comment panel's own toggle),
+  **Sign in** (back to the exact address, hash included) / **Sign out**, **Version history**
+  (whoever `history` allows, admins by default), **Copy the markdown** (owner and admins: the
+  published front matter and body, ready to republish).
+- The History control left the "Version N · Updated" line, which stays for everyone; the version
+  list stays in the server markup, hidden, for readers with scripts off.
+- The server passes the menu only what this reader may use: the markdown source, a keyed share
+  link and the version list never reach a page rendered for anyone else.
+- New exports from `/reader`: `PageMenu`, `roleLine`, `menuItems`, `HistoryPanel`, `VersionList`,
+  `VersionHistory`, and the page bridge (`requestPins`, `announcePins`, `signInBack`).
+- DETECTOR: open any page. No round "⋯" button in the top right means 0.29.0 or earlier.
+- REMEDY: update the dependency. No config change; set `ownerEmail` and `admins` for the owner and
+  admin items, `signInOrigin` for Sign in.
+- Tests: `reader/page-menu.test.tsx` (role line per role, items per role, share copies on a desk
+  and uses the sheet on a phone, a refused or hung share/clipboard still answers, invite note,
+  copy markdown, sign-in returns with the hash, history panel, closing, two-way sync with the
+  comment layer), `routes/page-menu.test.tsx` (role and items per role and access level, password
+  share only for admins, the markdown source and version list never handed to non-admins). The
+  0.15.0 golden was regenerated on purpose: the History control moved into the menu marker.
+  `test:packed` green, with the menu marker checked in the built fixture.
+
 ## 0.29.0
 
 **The "comment can't be shown" notice is a readable card with a way in.** 0.28.0 drew it as a pill

package/README.md

@@ -114,10 +114,46 @@ hostname and pick by the `host` header.
 body. The response carries the page's id and URL. Posting a file whose front matter carries
 that `id:` republishes it in place, keeping every earlier version.
 
+## The page menu
+
+Every page, past version and door carries one small round **⋯** button in the top right corner
+(`aria-label="Page menu"`), the same on every host. Tapping it opens a short menu: a sheet from
+the bottom on a phone, a popover under the button on a desk. A tap outside, Escape, or choosing an
+item closes it. It paints with the page's own theme variables, so it follows the pack and the
+light or dark mode.
+
+The first line says who the reader is to this page, and the items depend on it. **An item a role
+cannot use is absent, never greyed out.**
+
+| Role | Role line | Items |
+|---|---|---|
+| Visitor (signed out) | Not signed in | Share, Show / Hide comments, Sign in |
+| Reader (signed in) | Signed in as Dana | Share, Show / Hide comments, Sign out |
+| Shut out (at a gated page's door) | Signed in as Dana · not on this page's list | Share, Sign out |
+| Owner (`ownerEmail`) | Signed in as Robin · owner of this page | Share, Show / Hide comments, Version history, Copy the markdown, Sign out |
+| Admin (`admins`) | Signed in as Casey · admin of this hub | the owner's items |
+
+- **Share** opens the phone's own share sheet where there is one, and otherwise copies the link and
+  says "Link copied". Public and `access: freedom` pages show it to everyone; `access: invite` pages
+  show it with the line "Only people on the list can open it."; a password page shows it to the
+  owner and admins only, with the password in the link (`?key=`), since only they hold it.
+- **Show / Hide comments** appears only where shared comments are on, and is the same switch as
+  the comment panel's own toggle: moving either moves both.
+- **Sign in** needs `signInOrigin` and returns to the exact address, hash included. **Sign out** is
+  this host's `/api/reader/leave` (the `LEAVE` handler).
+- **Version history** is for whoever `history` lets see past versions (the owner and admins by
+  default) and opens the panel described below.
+- **Copy the markdown** copies the page as published (an `id`, `title`, `summary`, `subtitle` and
+  `to` front matter, then the body), ready to paste into a session and republish onto the same page.
+
+The server decides every item and hands the browser only what this reader may use: the markdown
+source, a share link carrying a password, and the version list are never in a page rendered for
+anyone else. `PageMenu`, `roleLine` and `menuItems` are exported from `/reader`.
+
 ## Version history
 
-Every page names its version under the summary, "Version 4 · Updated <minute> · History", and
-History opens a panel listing every version newest first: its number, the minute it went live in
+Every page names its version under the summary, "Version 4 · Updated <minute>", and the page
+menu's **Version history** opens a panel listing every version newest first: its number, the minute it went live in
 the reader's own time zone, and its change note. The panel is drawn over the page (a sheet on a
 phone, a side panel on a desk), so opening it moves no text. Each past version is readable at
 `/<id>/v/<n>`, read-only, under a banner naming it and linking the current page, behind exactly
@@ -125,7 +161,7 @@ the same password or confidential door as the page itself. A version that does n
 404; on a shut page the door comes first, so it never says which versions exist.
 
 **Past versions are for admins by default (0.21.0).** An earlier draft can hold what the current
-one was edited to remove, so only the page's admins see the History control or open
+one was edited to remove, so only the page's admins see Version history in the page menu or open
 `/<id>/v/<n>`: the reader signed in as `ownerEmail` or any address in `admins` (case does not
 matter). Everyone else still sees "Version N · Updated <minute>", and a past version is a 404 to
 them. With neither configured, nobody does. `history: 'everyone'` in the config restores the old

package/lib/reader/artifact-reader.js

@@ -144,6 +144,8 @@ export function isUserScrollKey(key, target) {
         return false;
     return true;
 }
+/** The Play from here bar's width, so it can be kept inside the screen. */
+const OFFER_WIDTH = 168;
 export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
     const narrator = label;
     const audioRef = useRef(null);
@@ -184,7 +186,9 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
                 return;
             }
             const r = el.getBoundingClientRect();
-            setOffer({ idx, top: r.bottom + window.scrollY + 6, left: Math.max(8, r.left + window.scrollX) });
+            // Kept on screen: a word near the right edge would push the bar off it and wrap its label.
+            const vw = window.innerWidth || document.documentElement.clientWidth || 1024;
+            setOffer({ idx, top: r.bottom + window.scrollY + 8, left: Math.max(8, Math.min(r.left, vw - OFFER_WIDTH - 8)) + window.scrollX });
         };
         root.addEventListener('click', onClick);
         return () => root.removeEventListener('click', onClick);
@@ -264,7 +268,7 @@ export function ArtifactReader({ src, words, rootId, label, accent, ground, }) {
                     follow(true);
                 }, onSeeking: () => {
                     startedRef.current = true;
-                }, onPause: () => { playingRef.current = false; setPlaying(false); }, onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), offer ? (_jsxs("div", { "data-nospeak": true, className: "absolute z-50 flex items-center gap-1 rounded-full border px-1 py-1 text-sm shadow-lg", style: { top: offer.top, left: offer.left, background: ground, borderColor: accent }, children: [_jsx("button", { type: "button", "data-play-from-here": true, onClick: () => playFrom(offer.idx), className: "rounded-full px-3 py-1 font-medium", style: { background: accent, color: ground }, children: "\u25B6 Play from here" }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOffer(null), className: "px-2 opacity-70", children: "\u00D7" })] })) : null, playing && !following ? (_jsx("button", { type: "button", "data-follow-voice": true, "data-nospeak": true, onClick: backToVoice, className: "fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-4 py-2 text-sm font-medium shadow-lg", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)', background: accent, color: ground }, children: "Back to the voice" })) : null, _jsx(PlayerBar, { playing: playing, onToggle: toggle, label: narrator, accent: accent, ground: ground, value: t, max: dur, step: 0.1, onSeek: (v) => {
+                }, onPause: () => { playingRef.current = false; setPlaying(false); }, onLoadedMetadata: (e) => setDur(e.target.duration), onRateChange: (e) => setRate(e.target.playbackRate) }), offer ? (_jsxs("div", { "data-nospeak": true, "data-play-offer": true, className: "absolute z-50 flex items-center rounded-full font-sans text-[13px] leading-none shadow-lg", style: { top: offer.top, left: offer.left, width: OFFER_WIDTH, whiteSpace: 'nowrap', background: accent, color: ground }, children: [_jsxs("button", { type: "button", "data-play-from-here": true, onClick: () => playFrom(offer.idx), className: "flex flex-1 items-center gap-1.5 rounded-l-full py-2 pl-3 pr-1 font-medium", children: [_jsx("svg", { "aria-hidden": "true", width: "10", height: "11", viewBox: "0 0 10 11", children: _jsx("path", { d: "M1 1l8 4.5L1 10z", fill: "currentColor" }) }), "Play from here"] }), _jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOffer(null), className: "rounded-r-full py-2 pl-1 pr-3 text-base leading-none opacity-70", children: "\u00D7" })] })) : null, playing && !following ? (_jsx("button", { type: "button", "data-follow-voice": true, "data-nospeak": true, onClick: backToVoice, className: "fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-4 py-2 text-sm font-medium shadow-lg", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)', background: accent, color: ground }, children: "Back to the voice" })) : null, _jsx(PlayerBar, { playing: playing, onToggle: toggle, label: narrator, accent: accent, ground: ground, value: t, max: dur, step: 0.1, onSeek: (v) => {
                     if (audioRef.current)
                         audioRef.current.currentTime = v;
                 }, progress: `${fmt(t)} / ${fmt(dur)}`, rate: rate, onRate: () => {

package/lib/reader/comment-layer.js

@@ -24,6 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { PINS_SET, announcePins, signInBack } from './page-bridge.js';
 import { MAX_QUOTE_CHARS, textAnchorFrom } from '../artifacts/anchor.js';
 import { COMMENTS_SLOT } from '../artifacts/comments.js';
 import { CommentCard } from './comment-card.js';
@@ -37,18 +38,6 @@ import { boxOf, headingAt, indexText, offsetAt, placeAnchor, regionFrom } from '
 const isValue = (v) => !!v && typeof v === 'object' && typeof v.body === 'string' && !!v.anchor && typeof v.anchor === 'object';
 const LONG_PRESS_MS = 400;
 const HASH = /^#comment-([A-Za-z0-9_-]{1,128})$/;
-/** The sign-in link, returning to this exact address, hash included, so a reader who signs in to
- *  see a linked comment lands on it. */
-function signInBack(signIn) {
-    try {
-        const u = new URL(signIn);
-        u.searchParams.set('to', window.location.href);
-        return u.toString();
-    }
-    catch {
-        return signIn;
-    }
-}
 /** The entry id a `#comment-<id>` hash names, or null. */
 const commentHashId = (hash) => HASH.exec(hash)?.[1] ?? null;
 const DRAG_PX = 8;
@@ -360,6 +349,14 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
         return { placed, earlier };
         // `tick` re-measures after a resize.
     }, [mounted, rootId, tops, tick]); // eslint-disable-line react-hooks/exhaustive-deps
+    // The page menu's Show / Hide comments drives the same switch as the panel's toggle, and hears
+    // back whichever one moved it, so the two never disagree.
+    useEffect(() => {
+        const onSet = (e) => setShowPins(e.detail === true);
+        window.addEventListener(PINS_SET, onSet);
+        return () => window.removeEventListener(PINS_SET, onSet);
+    }, []);
+    useEffect(() => { announcePins(showPins); }, [showPins]);
     // Show the comment the address names once it has loaded: a reply is shown in its parent's thread.
     // Held until the comments arrive; an id that is not among them (deleted, or not this reader's to
     // see) says so in a line, rather than leaving the reader wondering why nothing happened.

package/lib/reader/index.d.ts

@@ -1,6 +1,9 @@
 export { ArtifactReader, wrapWords, seekableWord, litWordIndex, type WordTiming } from './artifact-reader.js';
 export { PlayerBar } from './player-bar.js';
 export { CommentLayer } from './comment-layer.js';
+export { PageMenu, roleLine, menuItems, type PageMenuProps, type PageRole } from './page-menu.js';
+export { VersionHistory, HistoryPanel, VersionList, type HistoryItem } from './version-history.js';
+export { requestPins, announcePins, signInBack, PINS_SET, PINS_STATE } from './page-bridge.js';
 export { CommentCard, warningLine, DEVICE_LINE } from './comment-card.js';
 export { deviceNotes, deviceNotesKey, addDeviceNote, replaceDeviceNote, removeDeviceNote } from './device-notes.js';
 export { indexText, offsetAt, rangeOf, headingAt, placeAnchor, boxOf, regionFrom, type TextIndex, type Placement } from './comment-place.js';

package/lib/reader/index.js

@@ -3,6 +3,9 @@
 export { ArtifactReader, wrapWords, seekableWord, litWordIndex } from './artifact-reader.js';
 export { PlayerBar } from './player-bar.js';
 export { CommentLayer } from './comment-layer.js';
+export { PageMenu, roleLine, menuItems } from './page-menu.js';
+export { VersionHistory, HistoryPanel, VersionList } from './version-history.js';
+export { requestPins, announcePins, signInBack, PINS_SET, PINS_STATE } from './page-bridge.js';
 export { CommentCard, warningLine, DEVICE_LINE } from './comment-card.js';
 export { deviceNotes, deviceNotesKey, addDeviceNote, replaceDeviceNote, removeDeviceNote } from './device-notes.js';
 export { indexText, offsetAt, rangeOf, headingAt, placeAnchor, boxOf, regionFrom } from './comment-place.js';

package/lib/reader/page-bridge.d.ts

@@ -0,0 +1,9 @@
+/** The menu asks the comment layer to show (true) or hide (false) its pins. */
+export declare const PINS_SET = "artifact:pins-set";
+/** The comment layer says whether its pins are showing, on mount and on every change. */
+export declare const PINS_STATE = "artifact:pins-state";
+export declare function requestPins(show: boolean): void;
+export declare function announcePins(show: boolean): void;
+/** The sign-in link, returning to this exact address, hash included, so a reader who signs in
+ *  lands where they were (a linked comment, a section). */
+export declare function signInBack(signIn: string): string;

package/lib/reader/page-bridge.js

@@ -0,0 +1,24 @@
+// Small bridges between the page menu and the parts of the page it drives, so neither has to
+// import the other. Both run in the same window; a window event is the whole wire.
+/** The menu asks the comment layer to show (true) or hide (false) its pins. */
+export const PINS_SET = 'artifact:pins-set';
+/** The comment layer says whether its pins are showing, on mount and on every change. */
+export const PINS_STATE = 'artifact:pins-state';
+export function requestPins(show) {
+    window.dispatchEvent(new CustomEvent(PINS_SET, { detail: show }));
+}
+export function announcePins(show) {
+    window.dispatchEvent(new CustomEvent(PINS_STATE, { detail: show }));
+}
+/** The sign-in link, returning to this exact address, hash included, so a reader who signs in
+ *  lands where they were (a linked comment, a section). */
+export function signInBack(signIn) {
+    try {
+        const u = new URL(signIn);
+        u.searchParams.set('to', window.location.href);
+        return u.toString();
+    }
+    catch {
+        return signIn;
+    }
+}

package/lib/reader/page-menu.d.ts

@@ -0,0 +1,34 @@
+import { type HistoryItem } from './version-history.js';
+export type PageRole = 'visitor' | 'reader' | 'owner' | 'admin';
+export type PageMenuProps = {
+    role: PageRole;
+    /** What to call the reader in the role line: a first name, else their email. Null signed out. */
+    name: string | null;
+    /** The page is gated and this reader is not let in (they see its door). */
+    shutOut?: boolean;
+    /** The link to share, or null when this reader cannot share this page. `note` sits under it. */
+    share: {
+        url: string;
+        title: string;
+        note?: string;
+    } | null;
+    /** Shared comments are on here, so the pins can be shown or hidden. */
+    comments: boolean;
+    /** The sign-in authority's link for this page, when signed out on a host that signs readers in. */
+    signIn: string | null;
+    /** This host's sign-out link, when signed in. */
+    signOut: string | null;
+    /** Every version, when this reader may see past versions and there is more than one. */
+    history: {
+        items: HistoryItem[];
+        base: string;
+        viewing: number;
+    } | null;
+    /** The published source, for the owner and admins only. */
+    markdown: string | null;
+};
+/** The menu's first line: who this reader is to this page. */
+export declare function roleLine(role: PageRole, name: string | null, shutOut?: boolean): string;
+/** The items this reader gets, in order. Exported so the server markup and tests can name them. */
+export declare function menuItems(p: Pick<PageMenuProps, 'share' | 'comments' | 'signIn' | 'signOut' | 'history' | 'markdown'>): string[];
+export declare function PageMenu(props: PageMenuProps): import("react").JSX.Element;

package/lib/reader/page-menu.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The page menu: one small round "⋯" button fixed in the top right of every artifact page, the
+// same on every page and every host. Tapping it opens a short menu whose first line says who the
+// reader is to this page ("Signed in as Robin · admin of this hub"), and whose items depend on
+// that role. Items a role cannot use are absent, never greyed out.
+//
+// Release 1 (0.30.0): Share, Show / Hide comments, Sign in / Sign out, Version history and Copy
+// the markdown. The server decides every item (routes/artifacts.tsx) and passes only what this
+// reader may have: the markdown source and the history list never reach a reader who may not use
+// them, so nothing here has to hide anything.
+//
+// Rendered as a hidden marker on the server and on the first client render, so the markup always
+// hydrates; after mount the button and its menu are portalled onto document.body carrying the
+// page's theme variables, like the comment layer, so nothing on the page can paint over them. On
+// a phone the menu is a sheet from the bottom; on a desk a popover under the button. A tap
+// outside, Escape, or choosing an item closes it.
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { themeVarsAround } from './theme-vars.js';
+import { HistoryPanel, VersionList } from './version-history.js';
+import { PINS_STATE, requestPins, signInBack } from './page-bridge.js';
+/** The menu's first line: who this reader is to this page. */
+export function roleLine(role, name, shutOut = false) {
+    if (role === 'visitor' || !name)
+        return 'Not signed in';
+    if (role === 'admin')
+        return `Signed in as ${name} · admin of this hub`;
+    if (role === 'owner')
+        return `Signed in as ${name} · owner of this page`;
+    return shutOut ? `Signed in as ${name} · not on this page's list` : `Signed in as ${name}`;
+}
+/** The items this reader gets, in order. Exported so the server markup and tests can name them. */
+export function menuItems(p) {
+    return [
+        p.share ? 'share' : null,
+        p.comments ? 'comments' : null,
+        p.history ? 'history' : null,
+        p.markdown !== null ? 'markdown' : null,
+        p.signOut ? 'sign-out' : p.signIn ? 'sign-in' : null,
+    ].filter((x) => !!x);
+}
+const PHONE = '(max-width: 639px)';
+const isPhone = () => (typeof window.matchMedia === 'function' ? window.matchMedia(PHONE).matches : window.innerWidth < 640);
+const coarse = () => typeof window.matchMedia === 'function' && window.matchMedia('(pointer: coarse)').matches;
+/** Copy text, by the clipboard API where it exists, else the old textarea way. */
+async function copyText(text) {
+    try {
+        if (navigator.clipboard?.writeText) {
+            // Bounded: a browser waiting on a permission it never asks for leaves the promise pending
+            // (seen in headless Chrome), and the reader would get no answer at all.
+            const done = await Promise.race([
+                navigator.clipboard.writeText(text).then(() => true, () => false),
+                new Promise((r) => setTimeout(() => r(false), 1200)),
+            ]);
+            if (done)
+                return true;
+        }
+    }
+    catch { /* fall through */ }
+    try {
+        const t = document.createElement('textarea');
+        t.value = text;
+        t.setAttribute('readonly', '');
+        t.style.position = 'fixed';
+        t.style.opacity = '0';
+        document.body.appendChild(t);
+        t.select();
+        const ok = document.execCommand?.('copy') ?? false;
+        t.remove();
+        return ok;
+    }
+    catch {
+        return false;
+    }
+}
+export function PageMenu(props) {
+    const { role, name, shutOut, share, comments, signIn, signOut, history, markdown } = props;
+    const items = menuItems(props);
+    const [mounted, setMounted] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [phone, setPhone] = useState(false);
+    const [vars, setVars] = useState({});
+    const [pins, setPins] = useState(true);
+    const [said, setSaid] = useState(null);
+    const [historyOpen, setHistoryOpen] = useState(false);
+    const marker = useRef(null);
+    const button = useRef(null);
+    const menu = useRef(null);
+    useEffect(() => {
+        setVars(themeVarsAround(marker.current));
+        setMounted(true);
+        const onPins = (e) => setPins(e.detail === true);
+        window.addEventListener(PINS_STATE, onPins);
+        return () => window.removeEventListener(PINS_STATE, onPins);
+    }, []);
+    const close = useCallback((focus = true) => {
+        setOpen(false);
+        setSaid(null);
+        if (focus)
+            button.current?.focus();
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        setPhone(isPhone());
+        setVars(themeVarsAround(marker.current));
+        menu.current?.querySelector('[role="menuitem"]')?.focus();
+        const onKey = (e) => { if (e.key === 'Escape')
+            close(); };
+        const onDown = (e) => {
+            const t = e.target;
+            if (menu.current?.contains(t) || button.current?.contains(t))
+                return;
+            close(false);
+        };
+        document.addEventListener('keydown', onKey);
+        document.addEventListener('pointerdown', onDown);
+        return () => {
+            document.removeEventListener('keydown', onKey);
+            document.removeEventListener('pointerdown', onDown);
+        };
+    }, [open, close]);
+    const onShare = async () => {
+        if (!share)
+            return;
+        // A phone hands the link to its own share sheet (Messages, Mail, AirDrop); a desk copies it.
+        if (coarse() && typeof navigator.share === 'function') {
+            try {
+                await navigator.share({ title: share.title, url: share.url });
+                close();
+                return;
+            }
+            catch (e) {
+                // The reader backed out of the sheet: leave the menu as it was. Any other refusal (no
+                // permission, an unsupported page) falls through to copying, so Share always answers.
+                if (e?.name === 'AbortError')
+                    return;
+            }
+        }
+        setSaid((await copyText(share.url)) ? 'Link copied' : 'Could not copy the link');
+    };
+    const onMarkdown = async () => {
+        if (markdown === null)
+            return;
+        setSaid((await copyText(markdown)) ? 'Markdown copied' : 'Could not copy the markdown');
+    };
+    const onPins = () => {
+        requestPins(!pins);
+        setPins(!pins);
+        close();
+    };
+    const onHistory = () => {
+        setOpen(false);
+        setHistoryOpen(true);
+    };
+    const line = roleLine(role, name, shutOut);
+    const itemStyle = {
+        display: 'block', width: '100%', boxSizing: 'border-box', textAlign: 'left', font: 'inherit', fontSize: phone ? 16 : 14,
+        color: 'inherit', background: 'none', border: 0, borderRadius: 8, padding: phone ? '12px 12px' : '8px 10px',
+        cursor: 'pointer', textDecoration: 'none', lineHeight: 1.3,
+    };
+    const sub = { display: 'block', marginTop: 2, fontSize: 12, opacity: 0.6 };
+    const panelStyle = {
+        ...vars,
+        position: 'fixed', zIndex: 60, boxSizing: 'border-box', background: 'var(--a-surface, var(--a-ground, #fff))', color: 'var(--a-strong, var(--a-ink, #111))',
+        border: '1px solid var(--a-line, rgba(127,127,127,0.3))', boxShadow: '0 12px 32px rgba(0,0,0,0.22)', fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
+        fontStyle: 'normal', fontWeight: 400, letterSpacing: 'normal', textTransform: 'none', outline: 'none',
+        ...(phone
+            ? { left: 8, right: 8, bottom: 'calc(env(safe-area-inset-bottom, 0px) + 8px)', borderRadius: 16, padding: '6px 6px 8px', maxHeight: '70vh', overflowY: 'auto' }
+            : { top: 'calc(env(safe-area-inset-top, 0px) + 56px)', right: 12, width: 264, borderRadius: 12, padding: 6 }),
+    };
+    const ui = mounted ? (_jsxs("div", { "data-page-menu-ui": true, "data-nospeak": true, "data-comment-ui": true, style: vars, children: [_jsx("button", { ref: button, type: "button", "data-page-menu-button": true, "aria-label": "Page menu", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => (open ? close() : (setSaid(null), setOpen(true))), style: {
+                    position: 'fixed', zIndex: 45, top: 'calc(env(safe-area-inset-top, 0px) + 12px)', right: 12, width: 36, height: 36,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, margin: 0, borderRadius: 999, cursor: 'pointer',
+                    color: 'var(--a-ink, #111)', background: 'color-mix(in srgb, var(--a-ground, #fff) 82%, transparent)',
+                    border: '1px solid var(--a-line, rgba(127,127,127,0.3))', boxShadow: '0 1px 4px rgba(0,0,0,0.12)',
+                    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
+                }, children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": true, focusable: "false", children: [_jsx("circle", { cx: "3.5", cy: "9", r: "1.6", fill: "currentColor" }), _jsx("circle", { cx: "9", cy: "9", r: "1.6", fill: "currentColor" }), _jsx("circle", { cx: "14.5", cy: "9", r: "1.6", fill: "currentColor" })] }) }), open && phone ? _jsx("div", { "aria-hidden": true, "data-page-menu-scrim": true, style: { position: 'fixed', inset: 0, zIndex: 59, background: 'rgba(0,0,0,0.28)' } }) : null, open ? (_jsxs("div", { ref: menu, "data-page-menu": true, role: "menu", "aria-label": "Page menu", style: panelStyle, children: [_jsx("p", { "data-page-menu-role": true, style: { margin: 0, padding: phone ? '10px 12px 8px' : '8px 10px 6px', fontSize: 12, lineHeight: 1.35, opacity: 0.7, overflowWrap: 'anywhere' }, children: line }), items.length ? _jsx("div", { "aria-hidden": true, style: { height: 1, margin: '0 6px 4px', background: 'var(--a-line, rgba(127,127,127,0.3))' } }) : null, share ? (_jsxs("button", { type: "button", role: "menuitem", "data-page-menu-item": "share", onClick: () => void onShare(), style: itemStyle, children: [said === 'Link copied' || said === 'Could not copy the link' ? said : 'Share', share.note ? _jsx("span", { "data-page-menu-note": true, style: sub, children: share.note }) : null] })) : null, comments ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "comments", onClick: onPins, style: itemStyle, children: pins ? 'Hide comments' : 'Show comments' })) : null, history ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "history", "aria-haspopup": "dialog", onClick: onHistory, style: itemStyle, children: "Version history" })) : null, markdown !== null ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "markdown", onClick: () => void onMarkdown(), style: itemStyle, children: said === 'Markdown copied' || said === 'Could not copy the markdown' ? said : 'Copy the markdown' })) : null, signOut ? (_jsx("a", { role: "menuitem", "data-page-menu-item": "sign-out", href: signOut, style: itemStyle, children: "Sign out" })) : signIn ? (_jsx("a", { role: "menuitem", "data-page-menu-item": "sign-in", href: signIn, onClick: (e) => { e.currentTarget.href = signInBack(signIn); }, style: itemStyle, children: "Sign in" })) : null, _jsx("span", { role: "status", "aria-live": "polite", style: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }, children: said ?? '' })] })) : null, historyOpen && history ? (_jsx(HistoryPanel, { items: history.items, base: history.base, viewing: history.viewing, anchor: button, onClose: () => { setHistoryOpen(false); button.current?.focus(); }, onOutside: () => setHistoryOpen(false) })) : null] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: marker, hidden: true, "data-page-menu-for": role, "data-page-menu-items": items.join(' '), children: history ? _jsx(VersionList, { items: history.items, base: history.base, marker: true }) : null }), ui ? createPortal(ui, document.body) : null] }));
+}

package/lib/reader/version-history.d.ts

@@ -12,3 +12,23 @@ export declare function VersionHistory({ items, base, viewing }: {
     /** The version this page shows. */
     viewing: number;
 }): import("react").JSX.Element;
+/** Every version as plain links, hidden: server markup a reader with scripts off can still use. */
+export declare function VersionList({ items, base, marker }: {
+    items: HistoryItem[];
+    base: string;
+    marker?: boolean;
+}): import("react").JSX.Element;
+/** The open list, portalled onto document.body. `anchor` is the control that opened it: its theme
+ *  variables are carried onto the panel, and a tap on it is not a tap outside. */
+export declare function HistoryPanel({ items, base, viewing, anchor, onClose, onOutside }: {
+    items: HistoryItem[];
+    base: string;
+    viewing: number;
+    anchor: {
+        current: HTMLElement | null;
+    };
+    /** Escape or the close button: closes and hands focus back. */
+    onClose: () => void;
+    /** A tap outside the panel and the anchor. */
+    onOutside: () => void;
+}): import("react").ReactPortal | null;

package/lib/reader/version-history.js

@@ -1,6 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// The page's history, opened from the "Version N" line under the summary. The list renders
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The page's history, opened from the page menu ("Version history"), or from the standalone
+// History control a host may still place itself. The list renders
 // through a portal on document.body, OUTSIDE the text flow, like the definition layer, so opening
 // it cannot reflow a word of the page: on a phone it is a sheet pinned to the bottom, above the
 // narration bar; on a desk it is a panel pinned to the right of the window. Escape, the close
@@ -17,44 +18,51 @@ const MARGIN = 16;
 const VARS = ['--a-ground', '--a-ink', '--a-accent', '--a-line'];
 export function VersionHistory({ items, base, viewing }) {
     const [open, setOpen] = useState(false);
+    const button = useRef(null);
+    const close = useCallback(() => {
+        setOpen(false);
+        button.current?.focus();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: button, type: "button", "data-version-history": true, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen((o) => !o), style: { font: 'inherit', color: 'inherit', background: 'none', border: 0, padding: 0, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: '0.2em' }, children: "History" }), _jsx(VersionList, { items: items, base: base }), open ? _jsx(HistoryPanel, { items: items, base: base, viewing: viewing, anchor: button, onClose: close, onOutside: () => setOpen(false) }) : null] }));
+}
+/** Every version as plain links, hidden: server markup a reader with scripts off can still use. */
+export function VersionList({ items, base, marker }) {
+    return (_jsx("span", { hidden: true, "data-version-list": true, ...(marker ? { 'data-version-history': '' } : {}), children: items.map((v) => (_jsx("a", { href: v.current ? base : `${base}/v/${v.version}`, children: `Version ${v.version}${v.note ? `: ${v.note}` : ''}` }, v.version))) }));
+}
+/** The open list, portalled onto document.body. `anchor` is the control that opened it: its theme
+ *  variables are carried onto the panel, and a tap on it is not a tap outside. */
+export function HistoryPanel({ items, base, viewing, anchor, onClose, onOutside }) {
     const [phone, setPhone] = useState(false);
     const [bottom, setBottom] = useState(MARGIN);
     const [vars, setVars] = useState({});
     const [zone, setZone] = useState('UTC');
-    const button = useRef(null);
     const panel = useRef(null);
     const measure = useCallback(() => {
-        const el = button.current;
-        if (!el)
-            return;
-        const cs = getComputedStyle(el);
-        setVars({ ...Object.fromEntries(VARS.map((v) => [v, cs.getPropertyValue(v).trim()]).filter(([, x]) => x)), fontFamily: cs.fontFamily });
+        const el = anchor.current;
+        if (el) {
+            const cs = getComputedStyle(el);
+            setVars({ ...Object.fromEntries(VARS.map((v) => [v, cs.getPropertyValue(v).trim()]).filter(([, x]) => x)), fontFamily: cs.fontFamily });
+        }
         const isPhone = window.matchMedia ? window.matchMedia(PHONE).matches : window.innerWidth < 640;
         setPhone(isPhone);
         const bar = document.querySelector('[data-artifact-player]')?.getBoundingClientRect();
         setBottom((bar && bar.top < window.innerHeight ? window.innerHeight - bar.top : 0) + MARGIN);
-    }, []);
-    const close = useCallback(() => {
-        setOpen(false);
-        button.current?.focus();
-    }, []);
+    }, [anchor]);
     useEffect(() => {
         setZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
     }, []);
     useEffect(() => {
-        if (!open)
-            return;
         measure();
         panel.current?.focus();
         const onKey = (e) => {
             if (e.key === 'Escape')
-                close();
+                onClose();
         };
         const onDown = (e) => {
             const t = e.target;
-            if (panel.current?.contains(t) || button.current?.contains(t))
+            if (panel.current?.contains(t) || anchor.current?.contains(t))
                 return;
-            setOpen(false);
+            onOutside();
         };
         document.addEventListener('keydown', onKey);
         document.addEventListener('pointerdown', onDown);
@@ -64,7 +72,7 @@ export function VersionHistory({ items, base, viewing }) {
             document.removeEventListener('pointerdown', onDown);
             window.removeEventListener('resize', measure);
         };
-    }, [open, measure, close]);
+    }, [measure, onClose, onOutside, anchor]);
     const style = {
         ...vars,
         zIndex: 60,
@@ -85,13 +93,13 @@ export function VersionHistory({ items, base, viewing }) {
             ? { position: 'fixed', left: MARGIN, right: MARGIN, bottom: `calc(${bottom}px + env(safe-area-inset-bottom, 0px))`, maxHeight: '65vh' }
             : { position: 'fixed', top: 80, right: 24, width: 380, maxHeight: 'calc(100vh - 120px)' }),
     };
-    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: button, type: "button", "data-version-history": true, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen((o) => !o), style: { font: 'inherit', color: 'inherit', background: 'none', border: 0, padding: 0, cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: '0.2em' }, children: "History" }), _jsx("span", { hidden: true, "data-version-list": true, children: items.map((v) => (_jsx("a", { href: v.current ? base : `${base}/v/${v.version}`, children: `Version ${v.version}${v.note ? `: ${v.note}` : ''}` }, v.version))) }), open && typeof document !== 'undefined'
-                ? createPortal(_jsxs("div", { ref: panel, "data-version-panel": true, role: "dialog", "aria-label": "Version history", tabIndex: -1, style: style, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px 8px' }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.6 }, children: "Version history" }), _jsx("button", { type: "button", "aria-label": "Close", onClick: close, style: { font: 'inherit', fontSize: 20, lineHeight: 1, color: 'inherit', background: 'none', border: 0, padding: 4, cursor: 'pointer', opacity: 0.6 }, children: "\u00D7" })] }), _jsx("ol", { style: { listStyle: 'none', margin: 0, padding: '0 8px 10px' }, children: items.map((v) => {
-                                const here = v.version === viewing;
-                                return (_jsx("li", { children: _jsxs("a", { href: v.current ? base : `${base}/v/${v.version}`, "aria-current": here ? 'page' : undefined, style: {
-                                            display: 'block', padding: '10px 10px', borderRadius: 8, color: 'inherit', textDecoration: 'none',
-                                            background: here ? 'color-mix(in srgb, var(--a-accent, #888) 14%, transparent)' : undefined,
-                                        }, children: [_jsxs("span", { style: { display: 'flex', gap: 8, alignItems: 'baseline', flexWrap: 'wrap' }, children: [_jsx("strong", { style: { fontWeight: 600 }, children: `Version ${v.version}` }), v.current ? _jsx("span", { style: { fontSize: 12, color: 'var(--a-accent)' }, children: "current" }) : null, _jsx("time", { dateTime: v.at, style: { fontSize: 12, opacity: 0.6 }, children: formatUpdated(v.at, zone) })] }), v.note ? _jsx("span", { style: { display: 'block', marginTop: 2, fontSize: 14, opacity: 0.85 }, children: v.note }) : null] }) }, v.version));
-                            }) })] }), document.body)
-                : null] }));
+    if (typeof document === 'undefined')
+        return null;
+    return createPortal(_jsxs("div", { ref: panel, "data-version-panel": true, role: "dialog", "aria-label": "Version history", tabIndex: -1, style: style, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px 8px' }, children: [_jsx("span", { style: { fontSize: 11, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.6 }, children: "Version history" }), _jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, style: { font: 'inherit', fontSize: 20, lineHeight: 1, color: 'inherit', background: 'none', border: 0, padding: 4, cursor: 'pointer', opacity: 0.6 }, children: "\u00D7" })] }), _jsx("ol", { style: { listStyle: 'none', margin: 0, padding: '0 8px 10px' }, children: items.map((v) => {
+                    const here = v.version === viewing;
+                    return (_jsx("li", { children: _jsxs("a", { href: v.current ? base : `${base}/v/${v.version}`, "aria-current": here ? 'page' : undefined, style: {
+                                display: 'block', padding: '10px 10px', borderRadius: 8, color: 'inherit', textDecoration: 'none',
+                                background: here ? 'color-mix(in srgb, var(--a-accent, #888) 14%, transparent)' : undefined,
+                            }, children: [_jsxs("span", { style: { display: 'flex', gap: 8, alignItems: 'baseline', flexWrap: 'wrap' }, children: [_jsx("strong", { style: { fontWeight: 600 }, children: `Version ${v.version}` }), v.current ? _jsx("span", { style: { fontSize: 12, color: 'var(--a-accent)' }, children: "current" }) : null, _jsx("time", { dateTime: v.at, style: { fontSize: 12, opacity: 0.6 }, children: formatUpdated(v.at, zone) })] }), v.note ? _jsx("span", { style: { display: 'block', marginTop: 2, fontSize: 14, opacity: 0.85 }, children: v.note }) : null] }) }, v.version));
+                }) })] }), document.body);
 }

package/lib/routes/artifacts.d.ts

@@ -4,7 +4,7 @@ import { type ArtifactRecord, type ArtifactStore, type VersionEntry } from '../a
 import type { StateStore } from '../artifacts/state-store.js';
 import { type ArtifactAssets } from '../artifacts/assets.js';
 import type { BrandPack } from '../brand/pack.js';
-import { type Access } from '../artifacts/reader.js';
+import { type Access, type AllowEntry } from '../artifacts/reader.js';
 import { type ReadersStore } from '../artifacts/readers-store.js';
 import { type ReaderEvent } from '../artifacts/read-alerts.js';
 import type { PersonalStore } from '../artifacts/personal-store.js';
@@ -206,7 +206,7 @@ export declare function createArtifactRoutes(config: ArtifactRoutesConfig): {
     }> | NextResponse<{
         id: string;
         access: Access | null;
-        readers: import("../index.js").AllowEntry[];
+        readers: AllowEntry[];
     }>>;
     READS: (request: NextRequest, { params }: Params) => Promise<NextResponse<{
         error: string;

package/lib/routes/artifacts.js

@@ -21,7 +21,7 @@ import { ArtifactReader } from '../reader/artifact-reader.js';
 import { CommentLayer } from '../reader/comment-layer.js';
 import { ReaderWatch } from '../reader/reader-watch.js';
 import { UpdatedTime } from '../reader/updated-time.js';
-import { VersionHistory } from '../reader/version-history.js';
+import { PageMenu } from '../reader/page-menu.js';
 import { ACCESS_LEVELS, GRANT_COOKIE, GRANT_TTL_SECONDS, decide, firstName, mintGrant, safeReturnPath, signInUrl, verifyGrant, verifyPass, } from '../artifacts/reader.js';
 import { FLAG_KINDS, summarize } from '../artifacts/readers-store.js';
 import { readSecondsFor, wordCount } from '../artifacts/read-alerts.js';
@@ -65,6 +65,14 @@ export function createArtifactRoutes(config) {
     /** Whether this reader may see a page's past versions (config `history`). */
     const seesHistory = (reader) => config.history === 'everyone' || (!!reader && admins.has(reader.email.trim().toLowerCase()));
     const readerSecret = () => config.readerSecret?.();
+    /** Who this reader is to this host's pages: the page menu's role. Owner and admins share a menu. */
+    const roleOf = (reader) => {
+        if (!reader)
+            return 'visitor';
+        const email = reader.email.trim().toLowerCase();
+        return email === ownerEmail ? 'owner' : admins.has(email) ? 'admin' : 'reader';
+    };
+    const isAdmin = (reader) => roleOf(reader) === 'owner' || roleOf(reader) === 'admin';
     const signOutUrl = (id) => `/api/reader/leave?to=${encodeURIComponent(pagePath(id))}`;
     // Signing out alone cannot change the account: the authority still holds the Google session
     // and vouches for it again on the next sign-in. This leaves AND sends them to choose one.
@@ -137,6 +145,25 @@ export function createArtifactRoutes(config) {
         }
         return { pages, readers: count };
     }
+    /** The page menu for one reader on one page. Everything an item needs is decided here, and only
+     *  what this reader may use is passed: the markdown source and the history list never reach a
+     *  reader who may not have them, so the browser has nothing to hide.
+     *  - Share: public and `freedom` pages for everyone; `invite` pages too, with the line that only
+     *    the list can open it; a password page only for the owner and admins, with the key in the
+     *    link, since only they hold it.
+     *  - Version history: whoever `history` lets see past versions (admins by default).
+     *  - Copy the markdown: the owner and admins. */
+    function Menu({ a, reader, shutOut, allow, comments, history, viewing, source }) {
+        const role = roleOf(reader);
+        const admin = isAdmin(reader);
+        const name = reader ? (firstName(reader, allow ?? []) ?? reader.email) : null;
+        const share = a.access
+            ? { url: pageUrl(a.id), title: a.title, ...(a.access === 'invite' ? { note: 'Only people on the list can open it.' } : {}) }
+            : a.password
+                ? (admin ? { url: `${pageUrl(a.id)}?key=${encodeURIComponent(a.password)}`, title: a.title, note: 'The link carries the password.' } : null)
+                : { url: pageUrl(a.id), title: a.title };
+        return (_jsx(PageMenu, { role: role, name: name, shutOut: shutOut, share: share, comments: !!comments, signIn: !reader && signInOrigin ? signInUrl(signInOrigin, pageUrl(a.id)) : null, signOut: reader ? signOutUrl(a.id) : null, history: history && history.length > 1 && seesHistory(reader) && viewing ? { items: history, base: pagePath(a.id), viewing } : null, markdown: admin && source ? source : null }));
+    }
     /** The kicker over every title: the pack's line, then who the page is for. Never spoken: the
      *  whole paragraph is data-nospeak, and narrationText has no `to` to read. */
     function Kicker({ to, brand }) {
@@ -224,12 +251,12 @@ export function createArtifactRoutes(config) {
             ...(a.state || config.personal ? [`/api/artifacts/${id}`] : key !== undefined && cookie !== keyHash(id, a.password) ? [`/api/artifacts/${id}`] : []),
         ];
         const remember = paths.length ? paths.map((p) => `document.cookie=${JSON.stringify(unlockLine(p))}`).join(';') : null;
+        // Who is reading, when they happen to be signed in: their comments follow them, and the menu
+        // says who they are. Only a host that signs readers in can know one; the read never fails the page.
+        const reader = readerSecret() ? verifyGrant(readerSecret(), await readCookie(GRANT_COOKIE).catch(() => undefined)) : null;
         if (!open) {
-            return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsxs("div", { className: "mx-auto max-w-2xl px-6 pt-24 pb-8 text-center sm:pt-28", children: [_jsx(Kicker, { to: a.to, brand: brand }), _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(ArtifactDoor, { brand: brand, wrongKey: key !== undefined })] }));
+            return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsx(Menu, { a: a, reader: reader }), _jsxs("div", { className: "mx-auto max-w-2xl px-6 pt-24 pb-8 text-center sm:pt-28", children: [_jsx(Kicker, { to: a.to, brand: brand }), _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(ArtifactDoor, { brand: brand, wrongKey: key !== undefined })] }));
         }
-        // Who is reading an open page, when they happen to be signed in: their comments follow them.
-        // Only a host that signs readers in can know one; the read never fails the page.
-        const reader = readerSecret() ? verifyGrant(readerSecret(), await readCookie(GRANT_COOKIE).catch(() => undefined)) : null;
         const page = await render(true, reader);
         if (n === null)
             void store.bumpViews(id);
@@ -255,14 +282,14 @@ export function createArtifactRoutes(config) {
                 else
                     void flagged;
             }
-            return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [header, d.why === 'not-allowed'
+            return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsx(Menu, { a: a, reader: reader, shutOut: d.why === 'not-allowed' }), header, d.why === 'not-allowed'
                         ? _jsx(NotAllowedDoor, { brand: brand, reader: d.reader, signOutUrl: switchUrl(id) })
                         : _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.
         if (config.readers && !(await config.readers.acknowledged(id, r.email))) {
-            return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [header, _jsx(AckDoor, { brand: brand, name: firstName(r, allow), email: r.email, owner: owner, pageId: id, signOutUrl: switchUrl(id) })] }));
+            return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsx(Menu, { a: a, reader: r, allow: allow }), header, _jsx(AckDoor, { brand: brand, name: firstName(r, allow), email: r.email, owner: owner, pageId: id, signOutUrl: switchUrl(id) })] }));
         }
         const page = await render(false, r);
         if (n === null)
@@ -276,9 +303,18 @@ export function createArtifactRoutes(config) {
             return null;
         return store.history(id).catch(() => null);
     }
-    /** "Version N · Updated <minute> · History": the line under the summary. */
-    function VersionLine({ a, n, at, history, reader }) {
-        return (_jsxs("p", { "data-nospeak": true, className: "mt-4 text-xs opacity-60", children: [`Version ${n} · Updated `, _jsx(UpdatedTime, { iso: at }), history && history.length > 1 && seesHistory(reader) ? (_jsxs(_Fragment, { children: [' · ', _jsx(VersionHistory, { items: history, base: pagePath(a.id), viewing: n })] })) : null] }));
+    /** "Version N · Updated <minute>": the line under the summary. The way into the history is the
+     *  page menu's Version history (0.30.0), for whoever `history` lets see it. */
+    function VersionLine({ n, at }) {
+        return (_jsxs("p", { "data-nospeak": true, className: "mt-4 text-xs opacity-60", children: [`Version ${n} · Updated `, _jsx(UpdatedTime, { iso: at })] }));
+    }
+    /** The source of one version as published: its front matter's identifying lines, then the body,
+     *  so it pastes into a session and republishes onto the same page. Quoted as JSON strings, which
+     *  are valid YAML. */
+    function sourceOf(id, m, markdown) {
+        const lines = [`id: ${id}`, `title: ${JSON.stringify(m.title)}`, ...(m.subtitle ? [`subtitle: ${JSON.stringify(m.subtitle)}`] : []),
+            `summary: ${JSON.stringify(m.summary)}`, ...(m.to ? [`to: ${JSON.stringify(m.to)}`] : [])];
+        return `---\n${lines.join('\n')}\n---\n\n${markdown}`;
     }
     /** The title block and the body, in the pack's Article when it has one. Without one this is
      *  exactly the markup every page had before packs could frame it. */
@@ -303,7 +339,7 @@ export function createArtifactRoutes(config) {
         const title = v.title ?? a.title;
         const summary = v.summary ?? a.summary;
         const toc = showToc(v.markdown, a.toc) ? tocOf(v.markdown) : [];
-        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsx("div", { "data-nospeak": true, className: `mx-auto max-w-2xl px-6 ${top ? 'pt-20 sm:pt-24' : 'pt-8'}`, children: _jsxs("p", { "data-version-banner": true, role: "status", className: "rounded-lg border px-4 py-3 text-sm", style: { borderColor: brand.accent }, children: [`You are reading version ${n} of ${of}. `, _jsx("a", { href: pagePath(a.id), className: "underline underline-offset-4", style: { color: brand.accent }, children: "Read the current version" })] }) }), _jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: pack.Cover ? (_jsx(pack.Cover, { title: title, subtitle: v.subtitle, summary: summary, to: v.to, markdown: v.markdown, kicker: _jsx(Kicker, { to: v.to, brand: brand }), meta: _jsx(VersionLine, { a: a, n: n, at: v.at, history: history, reader: reader }), version: n, updatedAt: v.at, createdAt: a.createdAt })) : (_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-10 sm:pt-12' : 'pt-10'} pb-8 text-center`, children: [_jsx(Kicker, { to: v.to, brand: brand }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: title }), v.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: v.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: summary }), _jsx(VersionLine, { a: a, n: n, at: v.at, history: history, reader: reader })] })), children: _jsx(ArtifactMarkdown, { markdown: v.markdown, simulator: config.simulatorEmbed ? { embed: config.simulatorEmbed } : undefined, messages: config.messagesEmbed ? { embed: config.messagesEmbed } : undefined, definitions: a.definitions, checklist: { artifactId: a.id, accent: brand.accent }, Section: pack.Section, figure: pack.figure }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Menu, { a: a, reader: reader, history: history, viewing: n, source: isAdmin(reader) ? sourceOf(a.id, { title, subtitle: v.subtitle, summary, to: v.to }, v.markdown) : null }), toc.length ? _jsx(TocRail, { items: toc }) : null, _jsx("div", { "data-nospeak": true, className: `mx-auto max-w-2xl px-6 ${top ? 'pt-20 sm:pt-24' : 'pt-8'}`, children: _jsxs("p", { "data-version-banner": true, role: "status", className: "rounded-lg border px-4 py-3 text-sm", style: { borderColor: brand.accent }, children: [`You are reading version ${n} of ${of}. `, _jsx("a", { href: pagePath(a.id), className: "underline underline-offset-4", style: { color: brand.accent }, children: "Read the current version" })] }) }), _jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: pack.Cover ? (_jsx(pack.Cover, { title: title, subtitle: v.subtitle, summary: summary, to: v.to, markdown: v.markdown, kicker: _jsx(Kicker, { to: v.to, brand: brand }), meta: _jsx(VersionLine, { n: n, at: v.at }), version: n, updatedAt: v.at, createdAt: a.createdAt })) : (_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-10 sm:pt-12' : 'pt-10'} pb-8 text-center`, children: [_jsx(Kicker, { to: v.to, brand: brand }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: title }), v.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: v.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: summary }), _jsx(VersionLine, { n: n, at: v.at })] })), children: _jsx(ArtifactMarkdown, { markdown: v.markdown, simulator: config.simulatorEmbed ? { embed: config.simulatorEmbed } : undefined, messages: config.messagesEmbed ? { embed: config.messagesEmbed } : undefined, definitions: a.definitions, checklist: { artifactId: a.id, accent: brand.accent }, Section: pack.Section, figure: pack.figure }) })] }));
     }
     /** The page itself, shared by open and gated pages. */
     async function Body(a, { top, reader }) {
@@ -322,14 +358,16 @@ export function createArtifactRoutes(config) {
         const toc = showToc(a.markdown, a.toc) ? tocOf(a.markdown) : [];
         // Shared comments need the page to take them AND a host that keeps answers; personal notes need neither.
         const mode = config.state && a.state && a.comments && a.comments !== 'off' && a.state.slots[COMMENTS_SLOT] ? a.comments : 'off';
-        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsx("div", { id: "artifact-narration-root", children: await (async () => {
+        const history = await historyOf(a.id);
+        const current = a.version ?? (a.versions?.length ?? 0) + 1;
+        return (_jsxs(_Fragment, { children: [_jsx(Menu, { a: a, reader: reader, comments: mode !== 'off', history: history, viewing: current, source: isAdmin(reader) ? sourceOf(a.id, a, a.markdown) : null }), toc.length ? _jsx(TocRail, { items: toc }) : null, _jsx("div", { id: "artifact-narration-root", children: await (async () => {
                         const n = a.version ?? (a.versions?.length ?? 0) + 1;
-                        const meta = (_jsxs(_Fragment, { children: [_jsx(VersionLine, { a: a, n: n, at: a.updatedAt, history: await historyOf(a.id), reader: reader }), top && reader ? (_jsxs("p", { "data-nospeak": true, "data-reader-line": true, className: "mt-2 text-xs opacity-60", children: [`Signed in as ${reader.email} · `, _jsx("a", { href: switchUrl(a.id), className: "underline", children: "Use a different account" }), ' · ', _jsx("a", { href: signOutUrl(a.id), className: "underline", children: "Sign out" })] })) : null] }));
+                        const meta = (_jsxs(_Fragment, { children: [_jsx(VersionLine, { n: n, at: a.updatedAt }), top && reader ? (_jsxs("p", { "data-nospeak": true, "data-reader-line": true, className: "mt-2 text-xs opacity-60", children: [`Signed in as ${reader.email} · `, _jsx("a", { href: switchUrl(a.id), className: "underline", children: "Use a different account" }), ' · ', _jsx("a", { href: signOutUrl(a.id), className: "underline", children: "Sign out" })] })) : null] }));
                         const header = pack.Cover ? (_jsx(pack.Cover, { title: a.title, subtitle: a.subtitle, summary: a.summary, to: a.to, markdown: a.markdown, kicker: _jsx(Kicker, { to: a.to, brand: brand }), meta: meta, version: n, updatedAt: a.updatedAt, createdAt: a.createdAt })) : (_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-24 sm:pt-28' : 'pt-12'} pb-8 text-center`, children: [_jsx(Kicker, { to: a.to, brand: brand }), _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 }), meta] }));
                         return (_jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: _jsxs(_Fragment, { children: [header, a.cover ? (_jsx("div", { className: "mx-auto max-w-2xl px-6 pb-8", children: _jsx("img", { src: a.cover, alt: "", className: "w-full rounded-xl border border-[color:var(--a-line)]" }) })) : null] }), children: _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined, 
                                 // Ticks are kept in the reader's browser on any host; Send needs one that keeps answers.
                                 checklist: { artifactId: a.id, send: !!config.state && !!a.state && Object.hasOwn(a.state.slots, CHECKLIST_SLOT), owner, accent: brand.accent }, Section: pack.Section, figure: pack.figure, simulator: config.simulatorEmbed ? { embed: config.simulatorEmbed } : undefined, messages: config.messagesEmbed ? { embed: config.messagesEmbed } : undefined }) }));
-                    })() }), _jsx(CommentLayer, { artifactId: a.id, rootId: "artifact-narration-root", ownerName: owner, comments: mode, canShare: mode !== 'off' && (reader !== null || effectiveWriters(a.state, a.access, COMMENTS_SLOT) === 'anyone'), signedIn: reader !== null, isOwner: !!reader && ((!!ownerEmail && reader.email.trim().toLowerCase() === ownerEmail.trim().toLowerCase()) || (config.admins ?? []).some((e) => e.trim().toLowerCase() === reader.email.trim().toLowerCase())), version: a.version ?? (a.versions?.length ?? 0) + 1, accent: brand.accent, ground: brand.ground, signIn: signInOrigin ? signInUrl(signInOrigin, pageUrl(a.id)) : null }), a.narration && words.length > 0 ? (_jsx(ArtifactReader, { src: a.narration, words: words, rootId: "artifact-narration-root", label: brand.narratorLabel(a.voice), accent: brand.accent, ground: brand.ground })) : null /* No recorded narration: no player. Never the browser's own voice (the operator,
+                    })() }), _jsx(CommentLayer, { artifactId: a.id, rootId: "artifact-narration-root", ownerName: owner, comments: mode, canShare: mode !== 'off' && (reader !== null || effectiveWriters(a.state, a.access, COMMENTS_SLOT) === 'anyone'), signedIn: reader !== null, isOwner: isAdmin(reader), version: a.version ?? (a.versions?.length ?? 0) + 1, accent: brand.accent, ground: brand.ground, signIn: signInOrigin ? signInUrl(signInOrigin, pageUrl(a.id)) : null }), a.narration && words.length > 0 ? (_jsx(ArtifactReader, { src: a.narration, words: words, rootId: "artifact-narration-root", label: brand.narratorLabel(a.voice), accent: brand.accent, ground: brand.ground })) : null /* No recorded narration: no player. Never the browser's own voice (the operator,
                   2026-09-29: "NEVER PUT DEFAULT SAFARI VOICE DICTATION"); the audio is Kokoro or ElevenLabs,
                   recorded at publish, or there is none. */] }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.29.0",
+  "version": "0.30.1",
   "description": "Publish markdown as branded, read-aloud pages from a Next.js app: the artifacts store, the route factory, the read-along reader, brand packs, password and confidential pages, and share cards.",
   "license": "MIT",
   "type": "module",