@supersuit/artifacts 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 `@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.15.0 (2026-09-29)
+
+**A reader signed in with the wrong Google account can change it.** Before, "Sign out" only
+cleared this host's grant; the sign-in authority still held the Google session and vouched for
+the same account again, so the reader looped back as the wrong person. Now:
+
+- `GET /api/reader/leave?to=/<id>&switch=1` clears the grant and redirects to
+  `<signInOrigin>/artifact/sign-in?to=<page>&switch=1`. Without `switch` it still lands on the page.
+- `signInUrl(origin, page, { switchAccount: true })` builds that URL.
+- The refusal door, the agreement and the confidential banner say "Use a different account" and
+  link to the switch.
+- An open page now shows a signed-in reader "Signed in as <email> · Use a different account ·
+  Sign out" under the version line (not spoken). Before, it showed nothing at all.
+
+- DETECTOR: a reader on a page of yours reports they cannot switch Google accounts.
+- REMEDY: bump, AND make the host's `/artifact/sign-in` honor `switch=1` by signing its Firebase
+  user out before vouching (and ask Google with `prompt: 'select_account'`). A host whose sign-in
+  ignores `switch` still loops.
+- Tests: the switch URL, LEAVE with and without switch (grant cleared, redirect, off-host `to`
+  refused), the three gated surfaces linking the switch, the open-page reader line present when
+  signed in and absent when not.
+
+## 0.14.0 (2026-09-28)
+
+**A page can say who it is for.** `to: Isaiah` in front matter reads "For Isaiah" in three
+places: after the kicker on the page (not spoken), in the link preview's title ("For Isaiah:
+<title>", og:title, twitter:title and <title>), and as a line above the title on the share card.
+1 to 60 characters, one line; a republish without it clears it. Past versions keep the name they
+were published with. `audience:` is unchanged: stored, never shown.
+
+- DETECTOR: a page with `to:` whose preview does not name the reader.
+- REMEDY: bump; publishers must forward `to`.
+- Tests: parse and refusals, store round trip and clear-on-omit, the kicker on open, password,
+  gated and version pages, the three metadata titles, the share card markup and PNG, narration
+  leaving the name out. Metadata title, share card prop and clear-on-omit mutation-checked.
+
 ## 0.13.0 (2026-09-28)
 
 **A publisher can hear about new comments, and every comment has a link to itself.**

package/README.md

@@ -149,9 +149,10 @@ summary: Three bets, what each costs, and what we stop doing to afford them.
 | `title` (required) | The large line, and the unfurl title |
 | `summary` (required) | The italic teaser under it, and the unfurl description |
 | `subtitle` | A line between the two. A republish without it removes it |
+| `to` | Who the page is for, e.g. `to: Marisol`. Shows as "For Marisol" after the kicker, leads the unfurl title ("For Marisol: <title>") and gets its own line on the share card. Never read aloud, and not an access control. One line, 1 to 60 characters; a republish without it removes it |
+| `audience` | Free text stored with the page, never shown |
 | `id` | Republish in place instead of minting a new page |
 | `cover` | An image URL (absolute or site-relative) used as the unfurl image instead of the share card |
-| `audience` | Free text stored with the page |
 | `voice`, `narration`, `timings`, `narrationHash` | Read-aloud: the audio and word timings a publisher generated. Absent (or the timings will not load), the page is read by the browser's own voice instead, lighting the same words; a browser with no `speechSynthesis` shows no player |
 | `password` | Shuts the body behind a door (below) |
 | `access` | `freedom`, `invite` or `public`: a confidential page (below) |

package/lib/artifacts/confidential.js

@@ -9,7 +9,7 @@ export function bannerLines({ name, email, reason, owner }) {
 }
 export function ConfidentialBanner(props) {
     const l = bannerLines(props);
-    return (_jsxs("aside", { "data-nospeak": true, className: "mx-auto max-w-2xl rounded-xl border px-5 py-4 text-sm leading-relaxed", style: { borderColor: props.brand.accent, color: props.brand.ink }, children: [_jsx("p", { className: "font-semibold", style: { color: props.brand.accent }, children: l.lead }), _jsxs("p", { className: "mt-1", children: [l.why, " ", l.rule] }), _jsxs("p", { className: "mt-2 text-xs opacity-60", children: [l.record, " Not you? ", _jsx("a", { href: props.signOutUrl, className: "underline", children: "Sign out" }), "."] })] }));
+    return (_jsxs("aside", { "data-nospeak": true, className: "mx-auto max-w-2xl rounded-xl border px-5 py-4 text-sm leading-relaxed", style: { borderColor: props.brand.accent, color: props.brand.ink }, children: [_jsx("p", { className: "font-semibold", style: { color: props.brand.accent }, children: l.lead }), _jsxs("p", { className: "mt-1", children: [l.why, " ", l.rule] }), _jsxs("p", { className: "mt-2 text-xs opacity-60", children: [l.record, " Not you? ", _jsx("a", { href: props.signOutUrl, className: "underline", children: "Use a different account" }), "."] })] }));
 }
 /** A tiled, rotated, near-invisible line of the reader's address over the whole page. */
 export function Watermark({ email }) {
@@ -30,7 +30,7 @@ export function SignInDoor({ brand, href, note = DEFAULT_SIGN_IN_NOTE }) {
     return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center", children: [_jsx("p", { className: "text-sm opacity-70", children: note }), _jsx("a", { href: href, className: "mt-5 inline-block rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Sign in to read" })] }));
 }
 export function NotAllowedDoor({ brand, reader, signOutUrl }) {
-    return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center text-sm", children: [_jsxs("p", { className: "opacity-80", children: ["You are signed in as ", reader.email, ", and this page has not been shared with that address. If it was sent to a different address of yours, sign out and use that one."] }), _jsx("p", { className: "mt-3 opacity-60", children: "This attempt was recorded." }), _jsx("a", { href: signOutUrl, className: "mt-5 inline-block underline", style: { color: brand.accent }, children: "Sign out" })] }));
+    return (_jsxs("div", { "data-nospeak": true, className: "mx-auto max-w-sm px-6 pb-24 text-center text-sm", children: [_jsxs("p", { className: "opacity-80", children: ["You are signed in as ", reader.email, ", and this page has not been shared with that address. If it was sent to a different address of yours, switch to that account."] }), _jsx("p", { className: "mt-3 opacity-60", children: "This attempt was recorded." }), _jsx("a", { href: signOutUrl, className: "mt-5 inline-block underline", style: { color: brand.accent }, children: "Use a different account" })] }));
 }
 /** The agreement a reader makes before a confidential page opens. The exact string is stored
  *  with their acknowledgement, so the record says what they agreed to, not what it says today. */
@@ -38,5 +38,5 @@ export function ackText(owner) {
     return `I understand this document is confidential. I will not share, forward, copy, screenshot, print, or download it, or discuss its contents with anyone ${owner} has not given access. I understand that my reading is recorded.`;
 }
 export function AckDoor({ brand, name, email, owner, pageId, signOutUrl }) {
-    return (_jsxs("form", { method: "post", action: "/api/reader/ack", "data-nospeak": true, className: "mx-auto max-w-md px-6 pb-24 text-left text-sm", children: [_jsx("input", { type: "hidden", name: "id", value: pageId }), _jsxs("div", { className: "rounded-xl border px-5 py-5", style: { borderColor: brand.accent }, children: [_jsx("p", { className: "font-semibold", style: { color: brand.accent }, children: name ? `${name}, before you read` : 'Before you read' }), _jsx("p", { className: "mt-3 leading-relaxed", children: ackText(owner) }), _jsxs("label", { className: "mt-4 flex items-start gap-3", children: [_jsx("input", { type: "checkbox", name: "agree", value: "yes", required: true, className: "mt-1" }), _jsx("span", { children: "I agree to keep it confidential." })] }), _jsx("button", { type: "submit", className: "mt-5 w-full rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Agree and open" }), _jsxs("p", { className: "mt-3 text-xs opacity-60", children: ["Signed in as ", email, ". Your agreement is recorded with the time. Not you? ", _jsx("a", { href: signOutUrl, className: "underline", children: "Sign out" }), "."] })] })] }));
+    return (_jsxs("form", { method: "post", action: "/api/reader/ack", "data-nospeak": true, className: "mx-auto max-w-md px-6 pb-24 text-left text-sm", children: [_jsx("input", { type: "hidden", name: "id", value: pageId }), _jsxs("div", { className: "rounded-xl border px-5 py-5", style: { borderColor: brand.accent }, children: [_jsx("p", { className: "font-semibold", style: { color: brand.accent }, children: name ? `${name}, before you read` : 'Before you read' }), _jsx("p", { className: "mt-3 leading-relaxed", children: ackText(owner) }), _jsxs("label", { className: "mt-4 flex items-start gap-3", children: [_jsx("input", { type: "checkbox", name: "agree", value: "yes", required: true, className: "mt-1" }), _jsx("span", { children: "I agree to keep it confidential." })] }), _jsx("button", { type: "submit", className: "mt-5 w-full rounded-lg px-5 py-2 text-sm font-medium", style: { background: brand.accent, color: brand.ground }, children: "Agree and open" }), _jsxs("p", { className: "mt-3 text-xs opacity-60", children: ["Signed in as ", email, ". Your agreement is recorded with the time. Not you? ", _jsx("a", { href: signOutUrl, className: "underline", children: "Use a different account" }), "."] })] })] }));
 }

package/lib/artifacts/front-matter.d.ts

@@ -10,6 +10,10 @@ export type ArtifactMeta = {
     /** A line under the title. Title, subtitle and summary are three separate fields; the summary
      *  is the teaser, and the unfurl carries the title and the summary. */
     subtitle?: string;
+    /** Who the page is for ("For <name>" in the kicker, the unfurl title and the share card). A
+     *  label, not an access control: a republish without it removes it. Never spoken. Distinct from
+     *  `audience`, which is stored and never shown. */
+    to?: string;
     audience?: string;
     cover?: string;
     id?: string;
@@ -47,6 +51,8 @@ export type ArtifactMeta = {
     /** Who sees shared comments: `owner` (the default) or every reader (`readers`). */
     commentsVisible?: CommentsVisible;
 };
+/** The longest `to:` a page may carry: a name or two, never a sentence. */
+export declare const MAX_TO_CHARS = 60;
 export declare function parseArtifactSource(text: string): {
     ok: true;
     meta: ArtifactMeta;

package/lib/artifacts/front-matter.js

@@ -7,7 +7,9 @@ import { mergeWidgetState, scanWidgets } from './widgets.js';
 import { COMMENTS_MODES, mergeCommentsState } from './comments.js';
 import { THEME_MODES } from '../brand/theme.js';
 import { parseDefinitions } from './definitions.js';
-const KNOWN = new Set(['title', 'summary', 'subtitle', 'template', 'audience', 'cover', 'id', 'voice', 'narration', 'timings', 'narrationHash', 'password', 'access', 'state', 'theme', 'toc', 'definitions', 'change', 'comments', 'comments_visible']);
+/** The longest `to:` a page may carry: a name or two, never a sentence. */
+export const MAX_TO_CHARS = 60;
+const KNOWN = new Set(['title', 'summary', 'subtitle', 'to', 'template', 'audience', 'cover', 'id', 'voice', 'narration', 'timings', 'narrationHash', 'password', 'access', 'state', 'theme', 'toc', 'definitions', 'change', 'comments', 'comments_visible']);
 export function parseArtifactSource(text) {
     const { data, content } = matter(text);
     const d = data;
@@ -33,6 +35,12 @@ export function parseArtifactSource(text) {
         if (typeof v === 'string' && v)
             meta[k] = v;
     }
+    if (d.to !== undefined && d.to !== null) {
+        const to = typeof d.to === 'string' ? d.to.trim() : '';
+        if (!to || to.length > MAX_TO_CHARS || /[\r\n]/.test(to))
+            return { ok: false, error: `to must be one line naming who the page is for, 1 to ${MAX_TO_CHARS} characters` };
+        meta.to = to;
+    }
     if (d.change !== undefined && d.change !== null) {
         if (typeof d.change !== 'string')
             return { ok: false, error: 'change must be one line of text' };

package/lib/artifacts/reader.d.ts

@@ -47,8 +47,12 @@ export declare const LISTED_REASON = "you were given access to it by name";
 export declare function decide(access: Access, reader: Reader | null, allow: AllowEntry[]): Decision;
 /** The name the banner addresses: the allowlist's name, then the account's, first word only. */
 export declare function firstName(reader: Reader, allow: AllowEntry[]): string | null;
-/** Where a reader goes to sign in, carrying the page they asked for. */
-export declare function signInUrl(signInOrigin: string, pageUrl: string): string;
+/** Where a reader goes to sign in, carrying the page they asked for. `switchAccount` tells the
+ *  authority to forget the Google account it already holds and ask which one, because otherwise
+ *  it vouches for the same account again and the reader can never change it. */
+export declare function signInUrl(signInOrigin: string, pageUrl: string, opts?: {
+    switchAccount?: boolean;
+}): string;
 /** A path on this host that `enter` may send a reader to after it sets the grant: one page id,
  *  nothing else, so the redirect cannot be pointed off the host. */
 export declare function safeReturnPath(to: string | null | undefined, prefix?: string): string | null;

package/lib/artifacts/reader.js

@@ -95,9 +95,11 @@ export function firstName(reader, allow) {
     const full = listed?.name?.trim() || reader.name;
     return full ? full.split(/\s+/)[0] : null;
 }
-/** Where a reader goes to sign in, carrying the page they asked for. */
-export function signInUrl(signInOrigin, pageUrl) {
-    return `${signInOrigin}/artifact/sign-in?to=${encodeURIComponent(pageUrl)}`;
+/** Where a reader goes to sign in, carrying the page they asked for. `switchAccount` tells the
+ *  authority to forget the Google account it already holds and ask which one, because otherwise
+ *  it vouches for the same account again and the reader can never change it. */
+export function signInUrl(signInOrigin, pageUrl, opts = {}) {
+    return `${signInOrigin}/artifact/sign-in?to=${encodeURIComponent(pageUrl)}${opts.switchAccount ? '&switch=1' : ''}`;
 }
 /** A path on this host that `enter` may send a reader to after it sets the grant: one page id,
  *  nothing else, so the redirect cannot be pointed off the host. */

package/lib/artifacts/store.d.ts

@@ -11,6 +11,8 @@ export type ArtifactRecord = {
     summary: string;
     template: 'document';
     subtitle?: string;
+    /** Who the page is for; see ArtifactMeta.to. */
+    to?: string;
     audience?: string;
     cover?: string;
     voice?: string;
@@ -54,6 +56,7 @@ export type VersionRecord = VersionEntry & {
     markdown: string;
     title?: string;
     subtitle?: string;
+    to?: string;
     summary?: string;
 };
 /** A change note is one line: whitespace collapsed, capped, empty means none. */

package/lib/artifacts/store.js

@@ -76,7 +76,7 @@ async function versionOf(col, id, n) {
     const cur = currentOf(a);
     if (n === cur) {
         return { version: n, at: a.updatedAt, markdown: a.markdown, title: a.title, summary: a.summary, current: true,
-            ...(a.subtitle ? { subtitle: a.subtitle } : {}), ...(a.note ? { note: a.note } : {}) };
+            ...(a.subtitle ? { subtitle: a.subtitle } : {}), ...(a.to ? { to: a.to } : {}), ...(a.note ? { note: a.note } : {}) };
     }
     if (n > cur)
         return null;
@@ -123,6 +123,7 @@ async function saveArtifact(col, input) {
         summary: input.meta.summary,
         template: input.meta.template,
         ...(input.meta.subtitle ? { subtitle: input.meta.subtitle } : {}),
+        ...(input.meta.to ? { to: input.meta.to } : {}),
         ...(input.meta.audience ? { audience: input.meta.audience } : {}),
         ...(input.meta.cover ? { cover: input.meta.cover } : {}),
         ...(input.meta.voice ? { voice: input.meta.voice } : {}),
@@ -161,7 +162,7 @@ async function saveArtifact(col, input) {
             await history.doc(vid(current)).set({
                 version: current, markdown: existing.markdown, at: existing.updatedAt,
                 title: existing.title, summary: existing.summary,
-                ...(existing.subtitle ? { subtitle: existing.subtitle } : {}), ...(existing.note ? { note: existing.note } : {}),
+                ...(existing.subtitle ? { subtitle: existing.subtitle } : {}), ...(existing.to ? { to: existing.to } : {}), ...(existing.note ? { note: existing.note } : {}),
             });
         }
         const next = fresh ? current + 1 : current;
@@ -170,6 +171,8 @@ async function saveArtifact(col, input) {
         const password = input.meta.password ? {} : { password: FieldValue.delete() };
         // A subtitle the file no longer carries is gone from the page, like any other content.
         const subtitle = input.meta.subtitle ? {} : { subtitle: FieldValue.delete() };
+        // Who it is for is a label on the content, never an access control: absent clears it.
+        const to = input.meta.to ? {} : { to: FieldValue.delete() };
         // Access is the opposite of password on purpose: absent leaves it alone, and only an explicit
         // `access: public` opens the page. Reopening a confidential page must never be a side effect.
         const access = input.meta.access === 'public' ? { access: FieldValue.delete() } : {};
@@ -186,7 +189,7 @@ async function saveArtifact(col, input) {
             ...(input.meta.commentsVisible ? {} : { commentsVisible: FieldValue.delete() }),
         };
         await ref.update({
-            ...fields, ...password, ...subtitle, ...access, ...state, ...look, markdown: input.markdown, version: next,
+            ...fields, ...password, ...subtitle, ...to, ...access, ...state, ...look, markdown: input.markdown, version: next,
             // `updatedAt` is when this version went live; finishing its own publish does not move it.
             ...(fresh || input.markdown !== existing.markdown ? { updatedAt: now } : {}),
             note: nextNote ?? FieldValue.delete(),

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

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

package/lib/brand/share-card.js

@@ -24,8 +24,9 @@ export function titleSize(title) {
         return 62;
     return 52;
 }
-export function ShareCard({ pack, title, fontName, backdrop }) {
+export function ShareCard({ pack, title, to, fontName, backdrop }) {
     const size = titleSize(title);
+    const kicker = { display: 'flex', fontSize: 22, letterSpacing: 5, textTransform: 'uppercase', color: pack.accent, fontWeight: 500 };
     return (_jsxs("div", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -36,12 +37,12 @@ export function ShareCard({ pack, title, fontName, backdrop }) {
             ...(backdrop ? { backgroundImage: `url(${backdrop})`, backgroundSize: `${SHARE_W}px ${SHARE_H}px` } : {}),
             color: pack.ink,
             fontFamily: fontName,
-        }, children: [_jsx("div", { style: { display: 'flex', fontSize: 22, letterSpacing: 5, textTransform: 'uppercase', color: pack.accent, fontWeight: 500 }, children: pack.kicker }), _jsx("div", { style: { display: 'flex', marginTop: 28, fontSize: size, lineHeight: 1.18, maxWidth: 980, lineClamp: 3 }, children: title })] }));
+        }, children: [_jsx("div", { style: kicker, children: pack.kicker }), to ? _jsx("div", { style: { ...kicker, marginTop: 12, lineHeight: 1.4 }, children: `For ${to}` }) : null, _jsx("div", { style: { display: 'flex', marginTop: 28, fontSize: size, lineHeight: 1.18, maxWidth: 980, lineClamp: 3 }, children: title })] }));
 }
 /** A 1200x630 PNG for one page. Caller has already checked `pack.share` exists. */
-export async function renderShareCard(pack, title) {
+export async function renderShareCard(pack, title, opts = {}) {
     const { font, backdrop } = await assetsFor(pack);
-    return new ImageResponse(_jsx(ShareCard, { pack: pack, title: title, fontName: font.name, backdrop: backdrop }), {
+    return new ImageResponse(_jsx(ShareCard, { pack: pack, title: title, to: opts.to, fontName: font.name, backdrop: backdrop }), {
         width: SHARE_W,
         height: SHARE_H,
         fonts: [{ name: font.name, data: font.data, weight: font.weight, style: 'normal' }],

package/lib/routes/artifacts.js

@@ -53,6 +53,9 @@ export function createArtifactRoutes(config) {
     const ownerEmail = config.ownerEmail?.trim().toLowerCase();
     const readerSecret = () => config.readerSecret?.();
     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.
+    const switchUrl = (id) => (signInOrigin ? `${signOutUrl(id)}&switch=1` : signOutUrl(id));
     const shareCardUrl = (id, updatedAt) => `${pageUrl(id)}/share.png?v=${encodeURIComponent(updatedAt)}`;
     // Readers' recordings are played through short-lived signed URLs, issued only beside the comment
     // or note they belong to; a host whose assets cannot sign them shows no play control.
@@ -66,6 +69,11 @@ export function createArtifactRoutes(config) {
         store, state: config.state, personal: config.personal, readers: config.readers, assets: config.assets, transcribe: config.transcribe,
         readerSecret, pageUrl, signInOrigin, siteUrl, clientIp: config.clientIp,
     });
+    /** 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 }) {
+        return (_jsxs("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: [brand.kicker, to ? _jsx("span", { "data-nospeak": true, "data-to": true, children: ` · For ${to}` }) : null] }));
+    }
     async function generateMetadata({ params }) {
         const { id } = await params;
         const a = ARTIFACT_ID.test(id) ? await store.get(id) : null;
@@ -73,13 +81,15 @@ export function createArtifactRoutes(config) {
             return { title: 'Not found', robots: { index: false, follow: false } };
         const url = pageUrl(a.id);
         const image = absolute(a.cover) ?? (brand.share ? shareCardUrl(a.id, a.updatedAt) : absolute(config.defaultShareImage));
+        // Who it is for leads the unfurl, so a thread shows it before the reader opens anything.
+        const title = a.to ? `For ${a.to}: ${a.title}` : a.title;
         return {
-            title: a.title,
+            title,
             description: a.summary,
             alternates: { canonical: pagePath(a.id) },
             robots: { index: false, follow: false },
             openGraph: {
-                title: a.title,
+                title,
                 description: a.summary,
                 url,
                 siteName: brand.name,
@@ -88,7 +98,7 @@ export function createArtifactRoutes(config) {
             },
             twitter: {
                 card: image ? 'summary_large_image' : 'summary',
-                title: a.title,
+                title,
                 description: a.summary,
                 ...(image ? { images: [image] } : {}),
             },
@@ -145,7 +155,7 @@ export function createArtifactRoutes(config) {
         ];
         const remember = paths.length ? paths.map((p) => `document.cookie=${JSON.stringify(unlockLine(p))}`).join(';') : 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("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: brand.kicker }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary })] }), _jsx(ArtifactDoor, { brand: brand, wrongKey: key !== undefined })] }));
+            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 }), _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.
@@ -164,23 +174,23 @@ export function createArtifactRoutes(config) {
         const reader = readerSecret() ? verifyGrant(readerSecret(), await readCookie(GRANT_COOKIE).catch(() => undefined)) : null;
         const allow = config.readers && reader ? await config.readers.allowList(id) : [];
         const d = config.readers ? decide(a.access, reader, allow) : { open: false, why: 'signed-out' };
-        const header = (_jsxs("div", { className: "mx-auto max-w-2xl px-6 pt-24 pb-8 text-center sm:pt-28", children: [_jsx("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: brand.kicker }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary })] }));
+        const header = (_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 }), _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 })] }));
         if (!d.open) {
             if (d.why === 'not-allowed' && config.readers)
                 void config.readers.flag({ artifactId: id, reader: d.reader, kind: 'refused' }).catch(() => { });
             return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [header, d.why === 'not-allowed'
-                        ? _jsx(NotAllowedDoor, { brand: brand, reader: d.reader, signOutUrl: signOutUrl(id) })
+                        ? _jsx(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: signOutUrl(id) })] }));
+            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) })] }));
         }
         const page = await render(false, r);
         if (n === null)
             void store.bumpViews(id);
-        return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: NO_PRINT_CSS } }), _jsx(Watermark, { email: r.email }), _jsx("div", { className: "px-6 pt-20 sm:pt-24", children: _jsx(ConfidentialBanner, { name: firstName(r, allow), email: r.email, reason: d.reason, owner: owner, brand: brand, signOutUrl: signOutUrl(id) }) }), page, _jsx(ReaderWatch, { artifactId: id, endpoint: "/api/reader/track", accent: brand.accent })] }));
+        return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: NO_PRINT_CSS } }), _jsx(Watermark, { email: r.email }), _jsx("div", { className: "px-6 pt-20 sm:pt-24", children: _jsx(ConfidentialBanner, { name: firstName(r, allow), email: r.email, reason: d.reason, owner: owner, brand: brand, signOutUrl: switchUrl(id) }) }), page, _jsx(ReaderWatch, { artifactId: id, endpoint: "/api/reader/track", accent: brand.accent })] }));
     }
     /** Every version of a page, newest first, or null when the store keeps none. A failed read hides
      *  the History control rather than failing the page. */
@@ -205,7 +215,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" })] }) }), _jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-10 sm:pt-12' : 'pt-10'} pb-8 text-center`, children: [_jsx("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: brand.kicker }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: 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 })] }), _jsxs("article", { className: "mx-auto max-w-2xl px-6 pb-24", children: [toc.length ? _jsx(TocInline, { items: toc }) : null, _jsx(ArtifactMarkdown, { markdown: v.markdown, definitions: a.definitions })] })] }));
+        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" })] }) }), _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 }), _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 })] }), _jsxs("article", { className: "mx-auto max-w-2xl px-6 pb-24", children: [toc.length ? _jsx(TocInline, { items: toc }) : null, _jsx(ArtifactMarkdown, { markdown: v.markdown, definitions: a.definitions })] })] }));
     }
     /** The page itself, shared by open and gated pages. */
     async function Body(a, { top, reader }) {
@@ -223,7 +233,7 @@ 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, _jsxs("div", { id: "artifact-narration-root", children: [_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-24 sm:pt-28' : 'pt-12'} pb-8 text-center`, children: [_jsx("p", { "data-nospeak": true, className: "mb-4 text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: brand.kicker }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary }), _jsx(VersionLine, { a: a, n: a.version ?? (a.versions?.length ?? 0) + 1, at: a.updatedAt, history: await historyOf(a.id) })] }), a.cover ? (_jsx("div", { className: "mx-auto max-w-2xl px-6 pb-8", children: _jsx("img", { src: a.cover, alt: "", className: "w-full rounded-xl border border-[color:var(--a-line)]" }) })) : null, _jsxs("article", { className: "mx-auto max-w-2xl px-6 pb-24", children: [toc.length ? _jsx(TocInline, { items: toc }) : null, _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined })] })] }), _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 === ownerEmail, 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 })) : (
+        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsxs("div", { id: "artifact-narration-root", children: [_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-24 sm:pt-28' : 'pt-12'} pb-8 text-center`, children: [_jsx(Kicker, { to: a.to }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary }), _jsx(VersionLine, { a: a, n: a.version ?? (a.versions?.length ?? 0) + 1, at: a.updatedAt, history: await historyOf(a.id) }), 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] }), a.cover ? (_jsx("div", { className: "mx-auto max-w-2xl px-6 pb-8", children: _jsx("img", { src: a.cover, alt: "", className: "w-full rounded-xl border border-[color:var(--a-line)]" }) })) : null, _jsxs("article", { className: "mx-auto max-w-2xl px-6 pb-24", children: [toc.length ? _jsx(TocInline, { items: toc }) : null, _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined })] })] }), _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 === ownerEmail, 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 })) : (
                 // No recorded narration, or its timings would not load: the browser reads the page.
                 _jsx(BrowserReader, { rootId: "artifact-narration-root", accent: brand.accent, ground: brand.ground }))] }));
     }
@@ -243,10 +253,13 @@ export function createArtifactRoutes(config) {
             res.headers.append('set-cookie', cookieLine(mintGrant(secret, reader), GRANT_TTL_SECONDS));
         return res;
     }
-    /** GET /api/reader/leave?to=/<id>: sign out of this host's gated pages. */
+    /** GET /api/reader/leave?to=/<id>[&switch=1]: sign out of this host's pages. With switch=1 it
+     *  goes on to the authority's account chooser, which is the only way the account changes. */
     async function LEAVE(request) {
         const to = safeReturnPath(request.nextUrl.searchParams.get('to'), prefix) ?? '/';
-        const res = NextResponse.redirect(`${siteUrl}${to}`, 303);
+        const switching = request.nextUrl.searchParams.get('switch') === '1' && !!signInOrigin && to !== '/';
+        const res = NextResponse.redirect(switching ? signInUrl(signInOrigin, `${siteUrl}${to}`, { switchAccount: true }) : `${siteUrl}${to}`, 303);
+        res.headers.set('cache-control', 'no-store');
         res.headers.append('set-cookie', cookieLine('', 0));
         return res;
     }
@@ -497,7 +510,7 @@ export function createArtifactRoutes(config) {
         const a = ARTIFACT_ID.test(id) ? await store.get(id) : null;
         if (!a)
             return new NextResponse(`no artifact with id ${id}`, { status: 404 });
-        return renderShareCard(pack, a.title);
+        return renderShareCard(pack, a.title, { to: a.to });
     }
     /** GET|POST /api/artifacts/<id>/versions, publish key: the history, and a note written onto one
      *  version after the fact. POST body: { version: number, note: string | null }. */

package/package.json

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