@supersuit/artifacts 0.45.0 → 0.47.0

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 `@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.47.0
+
+**Figures and Helm scenes play inline, as two new embed fences.** A ```` ```figure ```` block
+(`figure: <id>`, `caption:`, optional `height:`, default 560px) plays an interactive figure, and a
+```` ```helm ```` block (`scene: <id>`, `caption:`, optional `height:`, default 760px, optional
+`autoplay: true`) plays a scene on a Helm phone, both in the same fitted, lazy frame and under the
+same caption as `simulator` and `messages`. They are rows in the one table of embed kinds, which
+now also carries per-kind options (helm's `autoplay`, passed to the embed page only when true), so
+a fifth kind is one line. Publish refuses a block with no id or no caption, naming the line. Embed
+blocks, the old two included, no longer take a comment anchor: the player and its caption were
+never selectable text. The host names the pages with two new config fields, `figureEmbed` and
+`helmEmbed`; there is no default. `ArtifactMarkdown` takes every kind's page as `embeds`
+(`simulator` and `messages` still work).
+
+- DETECTOR: a page carrying a ```` ```figure ```` or ```` ```helm ```` block. Before, it drew as a code block.
+- REMEDY: update the dependency, and set `figureEmbed` / `helmEmbed` in `createArtifactRoutes` to
+  the host's figure and Helm embed pages. Without them the blocks show their caption only.
+- Tests: simulator.test.ts ("the figure block", "the helm block", "every embed kind"),
+  render.test.tsx ("the figure and helm blocks", "an embed block is not read aloud"),
+  widgets.test.ts ("scanWidgets and the figure and helm blocks", "blocksOf and embed blocks").
+
+## 0.46.1
+
+0.46.0 republished: its tag's publish run refused on two settings-menu tests that still listed the
+owner's items without "View as a reader". The tests now expect it; no code changed. Everything in
+0.46.0 below ships in this version.
+
+## 0.46.0
+
+**View as a reader.** The owner and admins get "View as a reader" in the page menu: the page reloads
+at `?as=reader`, rendered for no one signed in, so the owner sees exactly what the people they send it
+to see (no version number or Version history unless the page shows them, no Copy the markdown, no
+owner menu), with a bar at the top reading "Viewing as a reader · Back to your view". A preview is not
+counted as a view. Anyone else asking for `?as=reader` gets the page they already get, byte for byte.
+Not yet on `access:` pages, which keep rendering for the signed-in owner.
+
+- DETECTOR: signed in as the owner, open the page menu. Before, no such item.
+- REMEDY: update the dependency.
+- Tests: routes/page-menu.test.tsx, "view as a reader" (3) and the owner's item list.
+
 ## 0.45.0
 
 **The Comments button shows the comments.** Pressing it now opens a list of every comment on the

package/README.md

@@ -676,6 +676,43 @@ Paste it under the audio line, then correct any word (a name, a phrase in anothe
 and keep its two times. `transcriptFenceFromWords` and `wordsFromWhisperJson` (from
 `@supersuit/artifacts/artifacts`) do the same from code.
 
+## Embedded players (`simulator`, `messages`, `figure`, `helm`)
+
+Four fences play a page the HOST serves, inline, in a frame under a caption:
+
+| Fence | Names | Default height | Plays |
+| --- | --- | --- | --- |
+| `simulator` | `scenario: <id>` (required) | 720px | a Supersuit Session demo |
+| `messages` | `chat: <id>` (optional) | 760px | a Messages-app phone, open on one thread or the list |
+| `figure` | `figure: <id>` (required) | 560px | an interactive figure |
+| `helm` | `scene: <id>` (required), `autoplay: true` (optional) | 760px | a scene on a Helm phone |
+
+````markdown
+```figure
+figure: doug-week
+caption: A week of Doug, before and after.
+height: 560px        # optional
+```
+
+```helm
+scene: doug-walk
+caption: A year later, on the reservoir loop.
+autoplay: true       # optional, true or false
+```
+````
+
+- **Every block needs a `caption`**, the line a reader sees under the player. Publish refuses a
+  block with no caption, no required id, an id that is not lowercase letters, digits and dashes, a
+  height that is not pixels, or an unknown key, naming the line in the file.
+- **The host names each player's embed page** (`simulatorEmbed`, `messagesEmbed`, `figureEmbed`,
+  `helmEmbed` in `createArtifactRoutes`, each an https URL; or `embeds` on `ArtifactMarkdown`). The
+  frame loads it with the id (`?figure=doug-week`, `?scene=doug-walk`) and `fit=content`. There is
+  no default: a host that names no page for a kind shows that block's caption alone, never its
+  source as code, which is also what print and a page with the player blocked show.
+- **The frame fits its player.** It opens at `height:` and takes the height the embed page posts
+  as `{ type: 'embed:fit', height }` from its own origin.
+- **Narration skips it**, caption included, and it carries no comment anchor.
+
 ## Comments and personal notes
 
 Every page takes comments pinned to any part of it. A reader selects text (a **Comment** chip

package/lib/artifacts/index.d.ts

@@ -1,5 +1,5 @@
 export { parseArtifactSource, ARTIFACT_KINDS, PAGE_HISTORY, type ArtifactMeta, type ArtifactKind, type PageHistory } from './front-matter.js';
-export { ArtifactMarkdown, artifactUrlTransform } from './render.js';
+export { ArtifactMarkdown, artifactUrlTransform, type EmbedCtx } from './render.js';
 export { narrationText, narrationTextFromMarkdown, normalizeWord } from './narration.js';
 export { createArtifactStore, newArtifactId, cleanNote, kindOf, listOfKind, MAX_CHANGE_NOTE_CHARS, type ArtifactListItem, type ArtifactStore, type ArtifactRecord, type SaveResult, type SaveInput, type VersionEntry, type VersionRecord } from './store.js';
 export { isPublishAuthed, isPublisherAuthed, type PublishAuth } from './auth.js';

package/lib/artifacts/render.d.ts

@@ -1,12 +1,15 @@
 import { type ComponentType } from 'react';
 import type { FigureProps, SectionOutline, SectionProps } from '../brand/pack.js';
 import { type Heading } from './widgets.js';
+import { type EmbedKind } from './simulator.js';
 import { type Definition } from './definitions.js';
 export declare function isReachableHref(href: unknown): href is string;
 export declare function artifactUrlTransform(url: string): string;
 type SimulatorCtx = {
     embed: string;
 };
+/** The host's embed page for each embed kind it serves (ArtifactMarkdown `embeds`). */
+export type EmbedCtx = Partial<Record<EmbedKind, SimulatorCtx>>;
 /** A pack's figure resolver (BrandPack.figure). */
 export type FigureFor = (src: string, alt: string) => ComponentType<FigureProps> | undefined;
 /** The page's top-level sections: every heading among the body's top-level blocks at the
@@ -14,7 +17,7 @@ export type FigureFor = (src: string, alt: string) => ComponentType<FigureProps>
 export declare function sectionOutline(markdown: string, headings?: Heading[]): SectionOutline[];
 /** `notes` turns on the notes widget, for a host that keeps answers; it draws only when the
  *  page carries a ```notes block. */
-export declare function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, simulator, messages, }: {
+export declare function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, simulator, messages, embeds: hosted, }: {
     markdown: string;
     /** The page a ```checklist keeps its ticks under, and whether its Send can reach the owner
      *  (a host that keeps answers, on a page that declares the slot). On a page whose checklists
@@ -40,5 +43,9 @@ export declare function ArtifactMarkdown({ markdown, notes, checklist, definitio
     simulator?: SimulatorCtx;
     /** The host's Messages phone, for ```messages blocks. Without it a block shows its caption only. */
     messages?: SimulatorCtx;
+    /** The host's embed page for every embed kind it serves (```simulator, ```messages, ```figure,
+     *  ```helm). A kind with none shows its caption only. `simulator` and `messages` above still work
+     *  and win over this. */
+    embeds?: EmbedCtx;
 }): import("react").JSX.Element;
 export {};

package/lib/artifacts/render.js

@@ -17,7 +17,7 @@ import { unified } from 'unified';
 import { blocksOf, checklistSyncs, checklistsOf, hasNotesWidget, headingsOf } from './widgets.js';
 import { HeadingNotes, NoteToggle, NotesEarlier, NotesProvider } from '../widgets/notes.js';
 import { Checklist } from '../widgets/checklist.js';
-import { embedSrc, parseEmbedFence } from './simulator.js';
+import { embedSrc, isEmbedKind, parseEmbedFence, EMBED_KINDS } from './simulator.js';
 import { EmbedFrame } from './embed-frame.js';
 import { VideoAutoplay } from '../reader/video-autoplay.js';
 import { CodeCopy } from '../reader/code-copy.js';
@@ -114,6 +114,8 @@ function InlineAudio({ src, label }) {
     const html = `<audio src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" data-artifact-audio data-artifact-media="${escapeAttr(mediaName(src))}" controls preload="none" class="block w-full"></audio>`;
     return (_jsxs("span", { className: "my-6 block rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-surface)] px-4 py-3", children: [label ? _jsx("span", { className: "mb-2 block text-sm text-[color:var(--a-strong)]", children: label }) : null, _jsx("span", { className: "block", dangerouslySetInnerHTML: { __html: html } })] }));
 }
+/** Fences that draw something other than code, so `pre` must not wrap them. */
+const OWN_BLOCK = new RegExp(`language-(links|notes|checklist|transcript|${EMBED_KINDS.join('|')})\\b`);
 // A session demo on a wide screen is wider than the reading column, so the device it draws (a
 // laptop, or a phone beside what was made) has room: up to 64rem, centred on the column, and clear
 // of the contents rail fixed in the left margin from 1280px (w-56 at left-6, w-64 at left-12).
@@ -125,14 +127,14 @@ const WIDE_EMBED_CSS = `@media (min-width:1024px){${WIDE}{width:max(100%,min(64r
     `[data-broadcast] ${WIDE}{width:auto;margin-left:0;transform:none}[data-broadcast] ${WIDE} figcaption{text-align:inherit}}` +
     `@media (min-width:1280px){${WIDE}{width:max(100%,min(64rem,calc(100vw - 36rem)))}}` +
     `@media (min-width:1536px){${WIDE}{width:max(100%,min(64rem,calc(100vw - 40rem)))}}`;
-/** An embed block (```simulator, ```messages): the player in a frame when the host names one, its
+/** An embed block (```simulator, ```messages, ```figure, ```helm): the player in a frame when the host names one, its
  *  caption alone when it does not, and nothing when the block does not parse (a page published
  *  before validation existed). */
 function EmbedFence({ kind, source, ctx }) {
     const r = parseEmbedFence(kind, source.replace(/\n$/, ''), 0);
     if (!r.ok)
         return null;
-    const src = ctx ? embedSrc(kind, ctx.embed, r.block.value) : null;
+    const src = ctx ? embedSrc(kind, ctx.embed, r.block.value, r.block.options) : null;
     const wide = kind === 'simulator' && src != null;
     return (
     // data-nospeak: the narration skips every fenced block (narration.ts), so the caption must not
@@ -219,7 +221,7 @@ function baseComponents(block, figure, checklists, embeds, voiceNotes) {
             // A transcript not under an audio line draws nothing (publish refuses one; an old page may hold it).
             if (lang === TRANSCRIPT_LANG)
                 return null;
-            if (lang === 'simulator' || lang === 'messages')
+            if (isEmbedKind(lang))
                 return _jsx(EmbedFence, { kind: lang, source: textOf(children), ctx: embeds?.[lang] });
             if (!className) {
                 return _jsx("code", { className: "rounded bg-[color:var(--a-surface-strong)] px-1.5 py-0.5 text-[0.9em] text-[color:var(--a-strong)]", children: children });
@@ -230,7 +232,7 @@ function baseComponents(block, figure, checklists, embeds, voiceNotes) {
             // A links fence renders its own block; do not wrap it in <pre>.
             const inner = Array.isArray(children) ? children[0] : children;
             const cls = inner?.props?.className ?? '';
-            if (/language-(links|notes|checklist|simulator|messages|transcript)/.test(cls))
+            if (OWN_BLOCK.test(cls))
                 return _jsx(_Fragment, { children: children });
             return (_jsx("pre", { ...block(node), "data-artifact-code": true, 
                 // whitespace-pre-wrap, because a fence here usually holds PROSE meant to be pasted
@@ -355,9 +357,9 @@ const DEFINED_TERM_CSS = '.artifact-defined-term{text-decoration-line:underline;
     'clip:rect(0,0,0,0);white-space:nowrap;border:0}';
 /** `notes` turns on the notes widget, for a host that keeps answers; it draws only when the
  *  page carries a ```notes block. */
-export function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, simulator, messages, }) {
+export function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, simulator, messages, embeds: hosted, }) {
     const on = !!notes && hasNotesWidget(markdown);
-    const embeds = { simulator, messages };
+    const embeds = { ...hosted, ...(simulator ? { simulator } : {}), ...(messages ? { messages } : {}) };
     const headings = headingsOf(markdown);
     const blocks = blocksOf(markdown);
     const block = (node) => {

package/lib/artifacts/simulator.d.ts

@@ -1,10 +1,12 @@
-export type EmbedKind = 'simulator' | 'messages';
+export type EmbedKind = 'simulator' | 'messages' | 'figure' | 'helm';
 export declare const EMBED_KINDS: EmbedKind[];
 export declare const isEmbedKind: (k: unknown) => k is EmbedKind;
+/** `options` holds a kind's further keys (helm's `autoplay`) as written, and is absent when none were. */
 export type EmbedBlock = {
     value: string | null;
     caption: string;
     height: string;
+    options?: Record<string, string>;
 };
 export type SimulatorBlock = {
     scenario: string;
@@ -22,7 +24,7 @@ export declare function parseEmbedFence(kind: EmbedKind, value: string, line: nu
 };
 /** The address a player loads: the host's embed page, what to open, any fixed switches. Null for an
  *  embed address that is not https, so a misconfigured host frames nothing. */
-export declare function embedSrc(kind: EmbedKind, embed: string, value: string | null): string | null;
+export declare function embedSrc(kind: EmbedKind, embed: string, value: string | null, options?: Record<string, string>): string | null;
 /** The ```simulator block (kept for callers of 0.25.0). */
 export declare function parseSimulatorFence(value: string, line: number): {
     ok: true;

package/lib/artifacts/simulator.js

@@ -8,7 +8,7 @@
 //
 // `simulator` is a Supersuit Session demo; `messages` is a Messages-app phone of real threads. The
 // block names what to open and a caption; the HOST names each player's embed page
-// (ArtifactRoutesConfig.simulatorEmbed / messagesEmbed), so this public package points at nobody's
+// (ArtifactRoutesConfig.simulatorEmbed / messagesEmbed / figureEmbed / helmEmbed), so this public package points at nobody's
 // service by default, and a host without the player draws the caption alone rather than the block's
 // source as code. `simulator` keeps the syntax the Superskills book's reader takes.
 //
@@ -19,9 +19,12 @@
 // frame then takes (EmbedFrame). A page that posts nothing keeps the block's height. The embed
 // page must hold its player's size once asked, never size it from its own viewport, or the two
 // chase each other; that is why the frame listens only for this message and for no player's own.
+const BOOL = { values: ['true', 'false'], off: 'false' };
 const KINDS = {
     simulator: { key: 'scenario', required: true, fixed: { timeline: 'off', fit: 'content' }, height: '720px' },
     messages: { key: 'chat', required: false, fixed: {}, height: '760px' },
+    figure: { key: 'figure', required: true, fixed: { fit: 'content' }, height: '560px' },
+    helm: { key: 'scene', required: true, fixed: { fit: 'content' }, height: '760px', options: { autoplay: BOOL } },
 };
 export const EMBED_KINDS = Object.keys(KINDS);
 export const isEmbedKind = (k) => typeof k === 'string' && Object.hasOwn(KINDS, k);
@@ -31,7 +34,8 @@ const HEIGHT = /^\d{3,4}px$/;
  *  line the author sees. */
 export function parseEmbedFence(kind, value, line) {
     const spec = KINDS[kind];
-    const keys = [spec.key, 'caption', 'height'];
+    const opts = spec.options ?? {};
+    const keys = [spec.key, 'caption', 'height', ...Object.keys(opts)];
     const got = {};
     const rows = value ? value.split('\n') : [];
     for (let i = 0; i < rows.length; i++) {
@@ -55,11 +59,23 @@ export function parseEmbedFence(kind, value, line) {
         return { ok: false, error: `line ${line}: the ${kind} block needs a caption, the line a reader sees under it` };
     if (got.height && !HEIGHT.test(got.height.v))
         return { ok: false, error: `line ${got.height.at}: a ${kind} height is a number of pixels, like 760px` };
-    return { ok: true, block: { value: id?.v ?? null, caption: got.caption.v, height: got.height?.v ?? spec.height } };
+    const options = {};
+    for (const [name, o] of Object.entries(opts)) {
+        const g = got[name];
+        if (!g)
+            continue;
+        if (!o.values.includes(g.v))
+            return { ok: false, error: `line ${g.at}: a ${kind} ${name} is ${o.values.join(' or ')}` };
+        options[name] = g.v;
+    }
+    const block = { value: id?.v ?? null, caption: got.caption.v, height: got.height?.v ?? spec.height };
+    if (Object.keys(options).length)
+        block.options = options;
+    return { ok: true, block };
 }
 /** The address a player loads: the host's embed page, what to open, any fixed switches. Null for an
  *  embed address that is not https, so a misconfigured host frames nothing. */
-export function embedSrc(kind, embed, value) {
+export function embedSrc(kind, embed, value, options) {
     let u;
     try {
         u = new URL(embed);
@@ -72,6 +88,11 @@ export function embedSrc(kind, embed, value) {
     const spec = KINDS[kind];
     if (value)
         u.searchParams.set(spec.key, value);
+    for (const [name, o] of Object.entries(spec.options ?? {})) {
+        const v = options?.[name];
+        if (v && v !== o.off && o.values.includes(v))
+            u.searchParams.set(name, v);
+    }
     for (const [k, v] of Object.entries(spec.fixed))
         u.searchParams.set(k, v);
     return u.toString();

package/lib/artifacts/widgets.js

@@ -292,7 +292,9 @@ export function blocksOf(markdown) {
             content = plain(n);
         }
         else if (n.type === 'code') {
-            if (n.lang === 'links' || n.lang === NOTES_SLOT || n.lang === 'checklist' || n.lang === TRANSCRIPT_LANG)
+            // An embed block draws a player and a caption the reader cannot comment on (data-nospeak, no
+            // data-block), so it takes no anchor either.
+            if (n.lang === 'links' || n.lang === NOTES_SLOT || n.lang === 'checklist' || n.lang === TRANSCRIPT_LANG || isEmbedKind(n.lang))
                 continue;
             kind = 'code';
             content = n.value;

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

@@ -19,6 +19,8 @@ export type PageMenuProps = {
     signIn: string | null;
     /** This host's sign-out link, when signed in. */
     signOut: string | null;
+    /** The owner's or an admin's link to this page as a reader sees it (`?as=reader`). Null for anyone else. */
+    viewAsReader?: string | null;
     /** Every version, when this reader may see past versions and there is more than one. */
     history: {
         items: HistoryItem[];
@@ -34,5 +36,5 @@ export type PageMenuProps = {
 /** 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' | 'settings'>): string[];
+export declare function menuItems(p: Pick<PageMenuProps, 'share' | 'comments' | 'signIn' | 'signOut' | 'history' | 'markdown' | 'settings' | 'viewAsReader'>): string[];
 export declare function PageMenu(props: PageMenuProps): import("react").JSX.Element;

package/lib/reader/page-menu.js

@@ -41,6 +41,7 @@ export function menuItems(p) {
         p.settings && p.settings.comments !== null ? 'comment-settings' : null,
         p.history ? 'history' : null,
         p.markdown !== null ? 'markdown' : null,
+        p.viewAsReader ? 'view-as-reader' : null,
         p.signOut ? 'sign-out' : p.signIn ? 'sign-in' : null,
     ].filter((x) => !!x);
 }
@@ -79,7 +80,7 @@ async function copyText(text) {
     }
 }
 export function PageMenu(props) {
-    const { role, name, shutOut, share, comments, signIn, signOut, history, markdown, settings } = props;
+    const { role, name, shutOut, share, comments, signIn, signOut, history, markdown, settings, viewAsReader } = props;
     const items = menuItems(props);
     const [mounted, setMounted] = useState(false);
     const [open, setOpen] = useState(false);
@@ -197,6 +198,6 @@ export function PageMenu(props) {
                     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, settings ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "share-settings", "aria-haspopup": "dialog", onClick: () => onSheet('share'), style: itemStyle, children: "Share settings" })) : null, settings && settings.comments !== null ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "comment-settings", "aria-haspopup": "dialog", onClick: () => onSheet('comments'), style: itemStyle, children: "Comment settings" })) : 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, sheet && settings ? (_jsx(SettingsSheet, { kind: sheet.kind, settings: settings, saved: sheet.saved, phone: phone, vars: vars, onCopy: copyText, onClose: () => { setSheet(null); button.current?.focus(); } })) : 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;
+                }, 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, settings ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "share-settings", "aria-haspopup": "dialog", onClick: () => onSheet('share'), style: itemStyle, children: "Share settings" })) : null, settings && settings.comments !== null ? (_jsx("button", { type: "button", role: "menuitem", "data-page-menu-item": "comment-settings", "aria-haspopup": "dialog", onClick: () => onSheet('comments'), style: itemStyle, children: "Comment settings" })) : 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, viewAsReader ? (_jsx("a", { role: "menuitem", "data-page-menu-item": "view-as-reader", href: viewAsReader, style: itemStyle, children: "View as a reader" })) : 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, sheet && settings ? (_jsx(SettingsSheet, { kind: sheet.kind, settings: settings, saved: sheet.saved, phone: phone, vars: vars, onCopy: copyText, onClose: () => { setSheet(null); button.current?.focus(); } })) : 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/routes/artifacts.d.ts

@@ -37,6 +37,13 @@ export type ArtifactRoutesConfig = {
     /** The embed page of this host's Messages phone (an https URL), for ```messages blocks: a
      *  `chat=<id>` opens one thread. Without it a block shows its caption only. No default. */
     messagesEmbed?: string;
+    /** The embed page of this host's interactive figures (an https URL, e.g.
+     *  https://example.com/figures/embed), for ```figure blocks: `figure=<id>` opens one. Without it
+     *  a block shows its caption only. No default. */
+    figureEmbed?: string;
+    /** The embed page of this host's Helm player (an https URL), for ```helm blocks: `scene=<id>`
+     *  plays one, `autoplay=true` when the block asks. Without it a block shows its caption only. No default. */
+    helmEmbed?: string;
     /** Read at request time, so a rotated key needs no rebuild. */
     publishKey: () => string | undefined;
     /** Verifies publisher passes (`p1`, see artifacts/publisher.ts): a signed, hour-long stand-in
@@ -126,6 +133,7 @@ type PageProps = Params & {
     searchParams?: Promise<{
         key?: string | string[];
         r?: string | string[];
+        as?: string | string[];
     }>;
 };
 type VersionParams = {

package/lib/routes/artifacts.js

@@ -62,6 +62,14 @@ async function defaultReadHeader(name) {
     const { headers } = await import('next/headers');
     return (await headers()).get(name) ?? '';
 }
+/** `?as=reader` on a page's address: the owner's preview of the page as a reader sees it. */
+function wantsReaderView(sp) {
+    return (Array.isArray(sp.as) ? sp.as[0] : sp.as) === 'reader';
+}
+/** The owner's bar while previewing as a reader. Never spoken, never on a reader's page. */
+function ViewingAsReader({ back }) {
+    return (_jsx("div", { "data-viewing-as-reader": true, "data-nospeak": true, className: "fixed inset-x-0 top-3 z-50 flex justify-center px-3", children: _jsxs("p", { className: "m-0 rounded-full border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] px-4 py-1.5 font-sans text-xs text-[color:var(--a-strong)] shadow-lg", children: ["Viewing as a reader \u00B7 ", _jsx("a", { href: back, className: "underline", children: "Back to your view" })] }) }));
+}
 export function createArtifactRoutes(config) {
     const { store, siteUrl } = config;
     // The pack as configured draws the share card; the page paints with its theme variables, so a
@@ -84,6 +92,11 @@ export function createArtifactRoutes(config) {
     // The version in the URL is what makes a re-publish show up: every unfurler caches by URL.
     const signInOrigin = config.signInOrigin;
     const owner = config.owner ?? brand.name;
+    // The embed page of each player this host serves, for every ArtifactMarkdown below.
+    const embeds = {};
+    for (const [kind, url] of [['simulator', config.simulatorEmbed], ['messages', config.messagesEmbed], ['figure', config.figureEmbed], ['helm', config.helmEmbed]])
+        if (url)
+            embeds[kind] = { embed: url };
     const ownerEmail = config.ownerEmail?.trim().toLowerCase();
     const admins = new Set([ownerEmail, ...(config.admins ?? []).map((e) => e.trim().toLowerCase())].filter((e) => !!e));
     /** Whether this reader may see this page's version number and past versions: the page's own
@@ -236,7 +249,7 @@ export function createArtifactRoutes(config) {
             : 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(a, reader) && viewing ? { items: history, base: pagePath(a.id), viewing } : null, markdown: admin && source ? source : null, settings: admin ? settings ?? null : null }));
+        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(a, reader) && viewing ? { items: history, base: pagePath(a.id), viewing } : null, markdown: admin && source ? source : null, settings: admin ? settings ?? null : null, viewAsReader: admin && source ? `${pagePath(a.id)}?as=reader` : 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. */
@@ -320,8 +333,9 @@ export function createArtifactRoutes(config) {
             const me = readerSecret() ? verifyGrant(readerSecret(), await readCookie(GRANT_COOKIE).catch(() => undefined)) : null;
             if (isAdmin(me)) {
                 const markdown = await media(a.markdown);
-                const page = broadcast ? await BroadcastCard({ ...a, markdown }, { reader: me, bot }) : await Body({ ...a, markdown }, { top: true, reader: me });
-                return _jsx(BrandGround, { pack: pack, mode: a.theme, children: page });
+                const viewer = wantsReaderView(sp) ? null : me;
+                const page = broadcast ? await BroadcastCard({ ...a, markdown }, { reader: viewer, bot }) : await Body({ ...a, markdown }, { top: true, reader: viewer });
+                return _jsxs(BrandGround, { pack: pack, mode: a.theme, children: [viewer ? null : _jsx(ViewingAsReader, { back: pagePath(id) }), page] });
             }
             const secret = usableSecret(config.recipientSecret?.());
             const g = await perReaderGate({ id, param, cookie: await readCookie(ridCookieName(id)).catch(() => undefined), secret, recipients: config.recipients });
@@ -367,10 +381,14 @@ export function createArtifactRoutes(config) {
         if (!open) {
             return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [_jsx(Menu, { a: a, reader: reader, settings: await settingsFor(a, 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 })] }));
         }
-        const page = await render(true, reader);
-        if (n === null)
+        // The owner or an admin previewing the page as the people it is sent to see it (`?as=reader`):
+        // rendered for no one signed in, with a bar back to their own view. Anyone else asking gets the
+        // page they already get.
+        const asReader = isAdmin(reader) && wantsReaderView(sp);
+        const page = await render(true, asReader ? null : reader);
+        if (n === null && !asReader)
             void store.bumpViews(id);
-        return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [remember ? _jsx("script", { dangerouslySetInnerHTML: { __html: remember } }) : null, page] }));
+        return (_jsxs(BrandGround, { pack: pack, mode: a.theme, children: [remember ? _jsx("script", { dangerouslySetInnerHTML: { __html: remember } }) : null, asReader ? _jsx(ViewingAsReader, { back: n === null ? pagePath(id) : `${pagePath(id)}/v/${n}` }) : null, page] }));
     }
     /** A page with `access:`. The body is rendered only after the reader is known and allowed;
      *  everyone else gets the title, the summary, and a door. */
@@ -452,7 +470,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: [_jsx(Menu, { a: a, reader: reader, history: history, viewing: n, settings: await settingsFor(a, reader), 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, numbered: true }), version: n, showVersion: true, 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, numbered: true })] })), 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, settings: await settingsFor(a, reader), 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, numbered: true }), version: n, showVersion: true, 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, numbered: true })] })), children: _jsx(ArtifactMarkdown, { markdown: v.markdown, embeds: embeds, definitions: a.definitions, checklist: { artifactId: a.id, accent: brand.accent }, Section: pack.Section, figure: pack.figure }) })] }));
     }
     /** A broadcast: one message card. The sender's words at the top, then the media (a video with
      *  sound and controls, photos, a voice note's player, link cards) in the order the words put
@@ -467,7 +485,7 @@ export function createArtifactRoutes(config) {
         const cover = !bot && a.cover && !/!\[[^\]]*\]\(/.test(a.markdown) ? a.cover : null;
         return (_jsxs(_Fragment, { children: [admin ? (_jsx(PageMenu, { role: roleOf(reader), name: reader ? reader.name ?? reader.email : null, share: null, comments: mode !== 'off', signIn: null, signOut: signOutUrl(a.id), history: null, markdown: null, settings: null })) : null, _jsx("main", { "data-broadcast": true, className: "mx-auto max-w-lg px-4 pt-16 pb-20 sm:pt-24", children: _jsxs("article", { id: "broadcast-root", "data-broadcast-card": true, className: "rounded-2xl border border-[color:var(--a-line)] bg-[color:var(--a-surface)] px-5 py-6 sm:px-7 sm:py-8", children: [_jsx("p", { "data-nospeak": true, "data-broadcast-from": true, className: "text-[11px] font-medium uppercase tracking-[0.3em]", style: { color: brand.accent }, children: `From ${owner}` }), _jsx("h1", { className: "mt-3 text-2xl sm:text-3xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), cover ? (
                             // eslint-disable-next-line @next/next/no-img-element
-                            _jsx("img", { src: cover, alt: "", className: "mt-5 w-full rounded-xl border border-[color:var(--a-line)]" })) : null, _jsx("div", { "data-broadcast-body": true, className: "mt-4", children: _jsx(ArtifactMarkdown, { markdown: a.markdown, checklist: { artifactId: a.id, owner, accent: brand.accent }, simulator: config.simulatorEmbed ? { embed: config.simulatorEmbed } : undefined, messages: config.messagesEmbed ? { embed: config.messagesEmbed } : undefined }) }), perReader?.note ? (_jsxs("div", { "data-for-reader": true, className: "mt-6 rounded-xl border border-[color:var(--a-line)] px-4 py-3", children: [_jsx("p", { "data-nospeak": true, className: "text-[11px] uppercase tracking-[0.2em] opacity-70", children: `For ${perReader.label}` }), _jsx("p", { className: "mt-1 text-lg", children: perReader.note })] })) : null] }) }), mode !== 'off' ? (_jsx(CommentLayer, { artifactId: a.id, rootId: "broadcast-root", ownerName: owner, comments: mode, canShare: reader !== null || effectiveWriters(a.state, a.access, COMMENTS_SLOT) === 'anyone', signedIn: reader !== null, isOwner: admin, version: a.version ?? (a.versions?.length ?? 0) + 1, accent: brand.accent, ground: brand.ground, signIn: null, closesAt: perReader && !perReader.owner ? perReader.closesAt : null, requireName: a.commentName === 'required' && perReader?.group === true, knownName: a.commentName === 'required' && perReader && !perReader.group && !perReader.owner ? perReader.label : null })) : null, perReader && !perReader.owner ? _jsx(QuietView, { id: a.id, rid: perReader.rid, sig: perReader.sig, token: perReader.token }) : null] }));
+                            _jsx("img", { src: cover, alt: "", className: "mt-5 w-full rounded-xl border border-[color:var(--a-line)]" })) : null, _jsx("div", { "data-broadcast-body": true, className: "mt-4", children: _jsx(ArtifactMarkdown, { markdown: a.markdown, checklist: { artifactId: a.id, owner, accent: brand.accent }, embeds: embeds }) }), perReader?.note ? (_jsxs("div", { "data-for-reader": true, className: "mt-6 rounded-xl border border-[color:var(--a-line)] px-4 py-3", children: [_jsx("p", { "data-nospeak": true, className: "text-[11px] uppercase tracking-[0.2em] opacity-70", children: `For ${perReader.label}` }), _jsx("p", { className: "mt-1 text-lg", children: perReader.note })] })) : null] }) }), mode !== 'off' ? (_jsx(CommentLayer, { artifactId: a.id, rootId: "broadcast-root", ownerName: owner, comments: mode, canShare: reader !== null || effectiveWriters(a.state, a.access, COMMENTS_SLOT) === 'anyone', signedIn: reader !== null, isOwner: admin, version: a.version ?? (a.versions?.length ?? 0) + 1, accent: brand.accent, ground: brand.ground, signIn: null, closesAt: perReader && !perReader.owner ? perReader.closesAt : null, requireName: a.commentName === 'required' && perReader?.group === true, knownName: a.commentName === 'required' && perReader && !perReader.group && !perReader.owner ? perReader.label : null })) : null, perReader && !perReader.owner ? _jsx(QuietView, { id: a.id, rid: perReader.rid, sig: perReader.sig, token: perReader.token }) : null] }));
     }
     /** The page itself, shared by open and gated pages. */
     async function Body(a, { top, reader, perReader }) {
@@ -494,7 +512,7 @@ export function createArtifactRoutes(config) {
                         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, showVersion: seesHistory(a, reader), 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: [perReader?.closesAt && !perReader.owner ? (_jsx(FeedbackWindow, { owner: owner, label: perReader.label, note: perReader.note, group: perReader.group, closesAt: perReader.closesAt })) : perReader?.note ? (_jsx("p", { "data-for-reader": true, className: "mx-auto mt-6 mb-0 max-w-2xl px-6 text-lg", children: `For ${perReader.label}: ${perReader.note}` })) : null, 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 }) }));
+                                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, embeds: embeds }) }));
                     })() }), _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, closesAt: perReader && !perReader.owner ? perReader.closesAt : null, requireName: a.commentName === 'required' && perReader?.group === true, knownName: a.commentName === 'required' && perReader && !perReader.group && !perReader.owner ? perReader.label : null }), perReader && !perReader.owner ? _jsx(QuietView, { id: a.id, rid: perReader.rid, sig: perReader.sig, token: perReader.token }) : null, a.narration && words.length > 0 ? (_jsx(ArtifactReader, { src: a.narration, words: words, rootId: "artifact-narration-root", 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.45.0",
+  "version": "0.47.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",