@supersuit/artifacts 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 `@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.25.0
+
+**A page can play a Supersuit Session demo inline: the ```simulator block.** A book or guide that
+wanted to show a session had to send readers away to another site.
+
+```simulator
+scenario: diane-meeting-prep
+caption: Step into the hour before Diane's first meeting. Press Start.
+height: 760px            # optional, default 720px
+```
+
+- Same syntax as the Superskills book's reader, so one block works in both. `scenario` is
+  lowercase letters, digits and dashes; `caption` is required; `height` is `NNNpx`. A malformed
+  block is refused at publish with the line, like a checklist.
+- The HOST names the demo: new `ArtifactRoutesConfig.simulatorEmbed` (an https embed page, e.g.
+  `https://example.com/simulator/embed`). The block draws as a lazy-loaded frame on
+  `<embed>?scenario=<id>&timeline=off`, with the caption under it. No default: a host without a
+  demo draws the caption alone, never the block's source as code.
+- New exports `parseSimulatorFence`, `simulatorSrc`, `SimulatorBlock`; `ArtifactMarkdown` takes
+  `simulator?: { embed }`.
+- DETECTOR: publish a page with a ```simulator block. A code block showing `scenario:` means the
+  host is on 0.24.0 or earlier, or has not set `simulatorEmbed`.
+- REMEDY: update the dependency and set `simulatorEmbed` in the host's routes config.
+- Tests: `simulator.test.ts` (parse, defaults, refusals with lines, https-only embed),
+  `widgets.test.ts` (refused at publish, passes when well formed), `render.test.tsx` (frame when the
+  host names a demo, caption only when not, never a code block). `test:packed` green.
+
+## 0.24.0
+
+**A reader is asked for their name when they comment, so the owner can credit the feedback.**
+Comments from readers without an account arrived as "a reader", with nothing to thank or follow up
+with.
+
+- The comment card shows `Your name, so <owner> can credit your feedback` above the share switch
+  when the reader is not signed in and is sharing with the owner. It is optional; a comment
+  without it still saves, as "a reader". The name is remembered on the device
+  (`localStorage` key `artifacts:comment-name`), so the next comment is already signed.
+- `CommentValue` gains `by?: string` (one line, at most 80 characters, trimmed; a blank one is
+  dropped). New export `MAX_COMMENT_NAME_CHARS`. A signed-in reader's account name always wins.
+- The shared thread shows the declared name where it used to show "a reader", and the publisher's
+  `/responses` (JSON and CSV) carries it in `name` for an anonymous row, so feeds that already read
+  `name` (an owner's comment notifications) credit the reader with no change of their own.
+- DETECTOR: open a page with `comments: anyone` while signed out and select text. No name field
+  in the card means the host is on 0.23.0 or earlier; a comment posted with `by` is refused as
+  "a comment is { anchor, body, version, parent? }" on those versions.
+- REMEDY: update the dependency. No route or front-matter change.
+- Tests: `comments.test.ts` (keeps, trims, drops blank, refuses long or multi-line names),
+  `state-view.test.ts` (declared name shown, account name wins, responses and CSV carry it, "a
+  reader" when none), `comment-card.test.tsx` (asked when signed out and sharing, remembered,
+  passed to save; not asked when signed in or for a personal note). `test:packed` green.
+
 ## 0.23.0
 
 **A checklist can keep its ticks in the cloud, shared by everyone on the page.** Two people

package/lib/artifacts/comments.d.ts

@@ -15,6 +15,7 @@ export declare function mergeCommentsState(state: StateConfig | undefined, comme
     error: string;
 };
 export declare const MAX_COMMENT_CHARS = 4000;
+export declare const MAX_COMMENT_NAME_CHARS = 80;
 export declare const COMMENT_TRANSCRIPTS: readonly ["browser", "host", "typed"];
 /** One shared comment or personal note. `parent` makes it a reply to a top-level comment (one
  *  level only). `audio` and `transcript` are filled by voice memos; a memo may have an empty body. */
@@ -25,6 +26,8 @@ export type CommentValue = {
     parent?: string;
     audio?: string;
     transcript?: (typeof COMMENT_TRANSCRIPTS)[number];
+    /** The name a reader typed so the owner can credit them. A signed-in reader's account name wins. */
+    by?: string;
 };
 /** The server's check on a comment, called by the state POST for the `comments` slot. `existing`
  *  returns a comment THIS WRITER can see by its entry id, so a reply can only name a thread its

package/lib/artifacts/comments.js

@@ -14,6 +14,7 @@ export function mergeCommentsState(state, comments, visible) {
     return { ok: true, state: { ...base, slots: { ...base.slots, [COMMENTS_SLOT]: slot } } };
 }
 export const MAX_COMMENT_CHARS = 4000;
+export const MAX_COMMENT_NAME_CHARS = 80;
 export const COMMENT_TRANSCRIPTS = ['browser', 'host', 'typed'];
 const ENTRY_ID = /^[A-Za-z0-9_-]{1,128}$/;
 // An uploaded asset path under the page (comments/<id>.webm), never a URL and never `..`.
@@ -23,8 +24,8 @@ const isMap = (v) => !!v && typeof v === 'object' && !Array.isArray(v);
  *  returns a comment THIS WRITER can see by its entry id, so a reply can only name a thread its
  *  writer was shown. The browser checks too; this is the one that counts. */
 export function validateComment(v, existing) {
-    if (!isMap(v) || Object.keys(v).some((k) => !['anchor', 'body', 'version', 'parent', 'audio', 'transcript'].includes(k)))
-        return { ok: false, error: 'a comment is { anchor, body, version, parent? }' };
+    if (!isMap(v) || Object.keys(v).some((k) => !['anchor', 'body', 'version', 'parent', 'audio', 'transcript', 'by'].includes(k)))
+        return { ok: false, error: 'a comment is { anchor, body, version, parent?, by? }' };
     const anchor = parseAnchor(v.anchor);
     if (!anchor)
         return { ok: false, error: 'a comment needs the place on the page it is pinned to' };
@@ -53,5 +54,11 @@ export function validateComment(v, existing) {
         value.audio = v.audio;
     if (v.transcript !== undefined)
         value.transcript = v.transcript;
+    if (v.by !== undefined) {
+        if (typeof v.by !== 'string' || /[\r\n]/.test(v.by) || v.by.trim().length > MAX_COMMENT_NAME_CHARS)
+            return { ok: false, error: `a comment's name is one line of at most ${MAX_COMMENT_NAME_CHARS} characters` };
+        if (v.by.trim())
+            value.by = v.by.trim();
+    }
     return { ok: true, value };
 }

package/lib/artifacts/index.d.ts

@@ -13,6 +13,7 @@ export { parseStateConfig, effectiveWriters, slotVisibility, checkValue, shapeCh
 export { createStateStore, createMemoryStateStore, readerKeyFor, type StateStore, type StateEntry, type Writer } from './state-store.js';
 export { stateView, responsesOf, responsesCsv, type SlotView, type Tally, type SharedEntry, type Response as StateResponse } from './state-view.js';
 export { slugify, headingsOf, blocksOf, scanWidgets, mergeWidgetState, mergeChecklistState, checklistsOf, checklistSendIds, checklistAnswerIds, checklistSyncs, hasNotesWidget, checkNoteValue, placeNotes, NOTES_SLOT, MAX_NOTE_CHARS, type Heading, type NotesWidget, type NoteValue, type PlacedNote } from './widgets.js';
+export { parseSimulatorFence, simulatorSrc, type SimulatorBlock } from './simulator.js';
 export { CHECKLIST_SLOT, checklistStorageKey, checkChecklistValue, parseChecklistFence, type ChecklistBlock, type ChecklistItem, type ChecklistValue } from './checklist.js';
 export { textAnchorFrom, findText, blockId, parseAnchor, CONTEXT_CHARS, MAX_QUOTE_CHARS, BLOCK_ID, type Anchor, type TextAnchor, type RegionAnchor } from './anchor.js';
 export { COMMENTS_SLOT, COMMENTS_MODES, COMMENT_TRANSCRIPTS, MAX_COMMENT_CHARS, mergeCommentsState, validateComment, type CommentsMode, type CommentsVisible, type CommentValue } from './comments.js';

package/lib/artifacts/index.js

@@ -13,6 +13,7 @@ export { parseStateConfig, effectiveWriters, slotVisibility, checkValue, shapeCh
 export { createStateStore, createMemoryStateStore, readerKeyFor } from './state-store.js';
 export { stateView, responsesOf, responsesCsv } from './state-view.js';
 export { slugify, headingsOf, blocksOf, scanWidgets, mergeWidgetState, mergeChecklistState, checklistsOf, checklistSendIds, checklistAnswerIds, checklistSyncs, hasNotesWidget, checkNoteValue, placeNotes, NOTES_SLOT, MAX_NOTE_CHARS } from './widgets.js';
+export { parseSimulatorFence, simulatorSrc } from './simulator.js';
 export { CHECKLIST_SLOT, checklistStorageKey, checkChecklistValue, parseChecklistFence } from './checklist.js';
 export { textAnchorFrom, findText, blockId, parseAnchor, CONTEXT_CHARS, MAX_QUOTE_CHARS, BLOCK_ID } from './anchor.js';
 export { COMMENTS_SLOT, COMMENTS_MODES, COMMENT_TRANSCRIPTS, MAX_COMMENT_CHARS, mergeCommentsState, validateComment } from './comments.js';

package/lib/artifacts/render.d.ts

@@ -4,6 +4,9 @@ import { type Heading } from './widgets.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;
+};
 /** 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
@@ -11,7 +14,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, }: {
+export declare function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, simulator, }: {
     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
@@ -33,4 +36,7 @@ export declare function ArtifactMarkdown({ markdown, notes, checklist, definitio
     };
     /** Terms to define inline (front matter `definitions:`): the first occurrence of each is underlined. */
     definitions?: Definition[];
+    /** The host's Supersuit Session demo, for ```simulator blocks. Without it a block shows its caption only. */
+    simulator?: SimulatorCtx;
 }): import("react").JSX.Element;
+export {};

package/lib/artifacts/render.js

@@ -16,6 +16,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 { parseSimulatorFence, simulatorSrc } from './simulator.js';
 import { VideoAutoplay } from '../reader/video-autoplay.js';
 import { CodeCopy } from '../reader/code-copy.js';
 import { DefinitionLayer } from '../reader/definition-layer.js';
@@ -94,6 +95,15 @@ function InlineAudio({ src, label }) {
     const html = `<audio src="${escapeAttr(src)}" aria-label="${escapeAttr(label)}" data-artifact-audio 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 } })] }));
 }
+/** A ```simulator block: the demo in a frame when the host has one, its caption alone when it does
+ *  not, and nothing when the block does not parse (a page published before validation existed). */
+function SimulatorFence({ source, ctx }) {
+    const r = parseSimulatorFence(source.replace(/\n$/, ''), 0);
+    if (!r.ok)
+        return null;
+    const src = ctx ? simulatorSrc(ctx.embed, r.block.scenario) : null;
+    return (_jsxs("figure", { "data-artifact-simulator": true, className: "my-8", children: [src ? (_jsx("iframe", { src: src, title: r.block.caption, loading: "lazy", allow: "microphone; autoplay; fullscreen", className: "block w-full rounded-xl border border-[color:var(--a-line)]", style: { height: r.block.height, border: 0 } })) : null, _jsx("figcaption", { className: "mt-2 text-sm opacity-80", children: r.block.caption })] }));
+}
 /** The one image a paragraph holds and nothing else (whitespace aside), or null. */
 function soleImage(node) {
     const kids = (node?.children ?? []).filter((c) => !(c.type === 'text' && !c.value?.trim()));
@@ -122,7 +132,7 @@ function ChecklistFence({ line, ctx }) {
         return null;
     return (_jsx(Checklist, { items: c.items.map((it) => ({ id: it.id, title: checklistMarkdown(it.text, true), description: it.description ? checklistMarkdown(it.description, false) : null })), artifactId: ctx.artifactId, send: ctx.send && ctx.artifactId && !ctx.sync ? c.send : undefined, sync: ctx.sync && !!ctx.artifactId, owner: ctx.owner, accent: ctx.accent }));
 }
-function baseComponents(block, figure, checklists) {
+function baseComponents(block, figure, checklists, simulator) {
     return {
         p: ({ node, children }) => {
             // An image alone in its paragraph that the pack draws itself replaces the paragraph, so the
@@ -162,6 +172,8 @@ function baseComponents(block, figure, checklists) {
             // answers) it draws nothing: its settings are not prose and never shown as code.
             if (lang === 'notes')
                 return null;
+            if (lang === 'simulator')
+                return _jsx(SimulatorFence, { source: textOf(children), ctx: simulator });
             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 });
             }
@@ -171,7 +183,7 @@ function baseComponents(block, figure, checklists) {
             // 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)/.test(cls))
+            if (/language-(links|notes|checklist|simulator)/.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
@@ -204,20 +216,20 @@ const HEADING_CLASS = {
 };
 /** Components for any page: every heading gets its slug as an id, the one headingsOf derived,
  *  so a contents link and a note both land on it. */
-function pageComponents(headings, block, figure, checklists) {
+function pageComponents(headings, block, figure, checklists, simulator) {
     const byLine = new Map(headings.map((h) => [h.line, h]));
     const heading = (depth) => function Heading({ node, children }) {
         const Tag = `h${depth}`;
         const h = byLine.get(node?.position?.start.line ?? -1);
         return _jsx(Tag, { id: h?.slug, ...block(node), className: HEADING_CLASS[depth], children: children });
     };
-    return { ...baseComponents(block, figure, checklists), h1: heading(1), h2: heading(2), h3: heading(3), h4: heading(4), h5: heading(5), h6: heading(6) };
+    return { ...baseComponents(block, figure, checklists, simulator), h1: heading(1), h2: heading(2), h3: heading(3), h4: heading(4), h5: heading(5), h6: heading(6) };
 }
 /** Components for a page with a notes block: every heading gets its slug as an id, a note
  *  control, and its notes after it. The heading is found by its source line, so the slug is the
  *  one headingsOf derived, the same one a note stores. */
-function notesComponents(headings, block, figure, checklists) {
-    const components = baseComponents(block, figure, checklists);
+function notesComponents(headings, block, figure, checklists, simulator) {
+    const components = baseComponents(block, figure, checklists, simulator);
     const byLine = new Map(headings.map((h) => [h.line, h]));
     const heading = (depth) => function NotedHeading({ node, children }) {
         const Tag = `h${depth}`;
@@ -296,7 +308,7 @@ 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, }) {
+export function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, simulator, }) {
     const on = !!notes && hasNotesWidget(markdown);
     const headings = headingsOf(markdown);
     const blocks = blocksOf(markdown);
@@ -313,7 +325,7 @@ export function ArtifactMarkdown({ markdown, notes, checklist, definitions, Sect
         // page whose checklists sync, that same slot is the shared set, so it turns sync on instead.
         ? { byLine: lists, artifactId: checklist?.artifactId, send: !!checklist?.send, sync: !!checklist?.send && checklistSyncs(lists.values()), owner: checklist?.owner, accent: checklist?.accent }
         : undefined;
-    const components = on ? notesComponents(headings, block, figure, checklists) : pageComponents(headings, block, figure, checklists);
+    const components = on ? notesComponents(headings, block, figure, checklists, simulator) : pageComponents(headings, block, figure, checklists, simulator);
     if (outline.length)
         components.section = sectionComponent(Section, outline, block);
     const body = (_jsx(ReactMarkdown, { remarkPlugins: plugins, components: components, urlTransform: artifactUrlTransform, children: markdown }));

package/lib/artifacts/simulator.d.ts

@@ -0,0 +1,17 @@
+export type SimulatorBlock = {
+    scenario: string;
+    caption: string;
+    height: string;
+};
+/** Parses a simulator fence's body. `line` is the line the fence opens on, so every error names
+ *  the line the author sees. */
+export declare function parseSimulatorFence(value: string, line: number): {
+    ok: true;
+    block: SimulatorBlock;
+} | {
+    ok: false;
+    error: string;
+};
+/** The address the player loads: the host's embed page, the scenario, the timeline off. Null for
+ *  an embed address that is not https, so a misconfigured host frames nothing. */
+export declare function simulatorSrc(embed: string, scenario: string): string | null;

package/lib/artifacts/simulator.js

@@ -0,0 +1,59 @@
+// The ```simulator fence: a Supersuit Session demo played inline on the page. The block names a
+// scenario and a caption; the HOST names the demo's embed page (ArtifactRoutesConfig.simulatorEmbed),
+// so this public package points at nobody's service by default, and a host without a demo draws
+// the caption alone rather than the block's source as code.
+//
+//   ```simulator
+//   scenario: diane-meeting-prep
+//   caption: Step into the hour before Diane's first meeting. Press Start.
+//   height: 760px            # optional, default 720px
+//   ```
+//
+// The same syntax the Superskills book's reader takes, so one block works in both.
+const SCENARIO = /^[a-z0-9-]+$/;
+const HEIGHT = /^\d{3,4}px$/;
+const KEYS = ['scenario', 'caption', 'height'];
+/** Parses a simulator fence's body. `line` is the line the fence opens on, so every error names
+ *  the line the author sees. */
+export function parseSimulatorFence(value, line) {
+    const got = {};
+    const rows = value ? value.split('\n') : [];
+    for (let i = 0; i < rows.length; i++) {
+        const raw = rows[i].trim();
+        if (!raw || raw.startsWith('#'))
+            continue;
+        const at = line + 1 + i;
+        const m = /^([A-Za-z_-]+)\s*:\s*(.*)$/.exec(raw);
+        if (!m)
+            return { ok: false, error: `line ${at}: the simulator block takes lines like "scenario: <id>"` };
+        const key = m[1];
+        if (!KEYS.includes(key))
+            return { ok: false, error: `line ${at}: the simulator block has an unknown key: ${m[1]}` };
+        got[key] = { v: m[2].replace(/\s+#.*$/, '').trim(), at };
+    }
+    if (!got.scenario)
+        return { ok: false, error: `line ${line}: the simulator block needs a scenario` };
+    if (!SCENARIO.test(got.scenario.v))
+        return { ok: false, error: `line ${got.scenario.at}: a simulator scenario is lowercase letters, digits and dashes` };
+    if (!got.caption?.v)
+        return { ok: false, error: `line ${line}: the simulator block needs a caption, the line a reader sees under the demo` };
+    if (got.height && !HEIGHT.test(got.height.v))
+        return { ok: false, error: `line ${got.height.at}: a simulator height is a number of pixels, like 760px` };
+    return { ok: true, block: { scenario: got.scenario.v, caption: got.caption.v, height: got.height?.v ?? '720px' } };
+}
+/** The address the player loads: the host's embed page, the scenario, the timeline off. Null for
+ *  an embed address that is not https, so a misconfigured host frames nothing. */
+export function simulatorSrc(embed, scenario) {
+    let u;
+    try {
+        u = new URL(embed);
+    }
+    catch {
+        return null;
+    }
+    if (u.protocol !== 'https:')
+        return null;
+    u.searchParams.set('scenario', scenario);
+    u.searchParams.set('timeline', 'off');
+    return u.toString();
+}

package/lib/artifacts/state-view.js

@@ -4,6 +4,12 @@ import { createHash } from 'node:crypto';
 import { SHARED_LIMIT, slotVisibility } from './state.js';
 const byAt = (a, b) => a.at.localeCompare(b.at) || a.id.localeCompare(b.id);
 const firstWord = (name) => (name?.trim() ? name.trim().split(/\s+/)[0] : 'a reader');
+// The name an anonymous commenter typed into the comment box, so the owner can credit them. An
+// account name always wins, because the account is the stronger claim to who wrote it.
+const declared = (value) => {
+    const by = value && typeof value === 'object' && !Array.isArray(value) ? value.by : undefined;
+    return typeof by === 'string' && by.trim() ? by.trim() : null;
+};
 // A `one` entry's raw id is `<page>__<slot>__<readerKey>`, and the reader key inside it (`u:<uid>`
 // or `a:<anonId>`) is a credential: whoever reads it can write as that reader by minting the same
 // anonymous cookie. A `shared` slot handed that id straight to every reader, so it is hashed to
@@ -41,7 +47,7 @@ export function stateView(state, entries, readerKey) {
         if (visibility === 'shared')
             view.shared = here.slice(-SHARED_LIMIT).map((e) => ({
                 id: def.shape === 'one' ? opaqueOneId(e.id) : e.id,
-                name: firstWord(e.writer.name), value: e.value, at: e.at, mine: e.readerKey === readerKey,
+                name: e.writer.name?.trim() ? firstWord(e.writer.name) : (declared(e.value) ?? 'a reader'), value: e.value, at: e.at, mine: e.readerKey === readerKey,
             }));
         out[slot] = view;
     }
@@ -49,7 +55,7 @@ export function stateView(state, entries, readerKey) {
 }
 export function responsesOf(entries) {
     return entries.slice().sort(byAt).map((e) => ({
-        slot: e.slot, id: e.id, value: e.value, at: e.at, email: e.writer.email ?? null, name: e.writer.name, anonymous: e.writer.anonymous, reader: e.readerKey,
+        slot: e.slot, id: e.id, value: e.value, at: e.at, email: e.writer.email ?? null, name: e.writer.name ?? declared(e.value), anonymous: e.writer.anonymous, reader: e.readerKey,
     }));
 }
 // A cell a spreadsheet reads as a formula (leading =, +, -, @, tab or CR) gets an escaping

package/lib/artifacts/widgets.js

@@ -16,6 +16,7 @@ import remarkParse from 'remark-parse';
 import remarkGfm from 'remark-gfm';
 import { blockId } from './anchor.js';
 import { MAX_NOTE_CHARS, NOTES_SLOT } from './notes-place.js';
+import { parseSimulatorFence } from './simulator.js';
 import { CHECKLIST_SLOT, assignChecklistIds, parseChecklistFence } from './checklist.js';
 export { MAX_NOTE_CHARS, NOTES_SLOT, placeNotes } from './notes-place.js';
 /** Widgets the design names and this version does not draw yet. A fence using one is refused at
@@ -100,6 +101,13 @@ export function scanWidgets(body, offset) {
         }
         notes = w;
     }
+    for (const f of fences) {
+        if (f.lang !== 'simulator')
+            continue;
+        const r = parseSimulatorFence(f.value, (f.position?.start.line ?? 1) + offset);
+        if (!r.ok)
+            return r;
+    }
     const lists = scanChecklists(fences, offset);
     if (!lists.ok)
         return lists;

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

@@ -13,6 +13,8 @@ export type SavedMemo = {
 /** The warning, word for word. `They` is fixed copy: the card never guesses a pronoun. */
 export declare function warningLine(ownerName: string, mode: CommentsMode): string;
 export declare const DEVICE_LINE = "Saved on this device. Sign in to keep it everywhere.";
+/** Where a reader's declared name is remembered, so their next comment is already signed. */
+export declare const NAME_KEY = "artifacts:comment-name";
 export declare function CommentCard({ ownerName, mode, canShare, signedIn, quote, initial, accent, signIn, voice, onSave, onCancel, }: {
     ownerName: string;
     mode: CommentsMode;
@@ -26,6 +28,6 @@ export declare function CommentCard({ ownerName, mode, canShare, signedIn, quote
     /** The page's voice routes. Null: a memo is kept but never uploaded or transcribed here. */
     voice?: VoiceHost | null;
     /** Resolves to an error to show, or null when saved. */
-    onSave: (body: string, share: boolean, memo?: SavedMemo) => Promise<string | null>;
+    onSave: (body: string, share: boolean, memo?: SavedMemo, by?: string) => Promise<string | null>;
     onCancel: () => void;
 }): import("react").JSX.Element;

package/lib/reader/comment-card.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // since, in which case your words win. With neither, the memo is kept and the box stays empty.
 import { useRef, useState } from 'react';
 import { NO_ZOOM_FONT } from './no-zoom.js';
-import { MAX_COMMENT_CHARS } from '../artifacts/comments.js';
+import { MAX_COMMENT_CHARS, MAX_COMMENT_NAME_CHARS } from '../artifacts/comments.js';
 import { VoiceRecorder } from './voice-recorder.js';
 /** The warning, word for word. `They` is fixed copy: the card never guesses a pronoun. */
 export function warningLine(ownerName, mode) {
@@ -21,6 +21,18 @@ export function warningLine(ownerName, mode) {
     return `Only you will see this. ${why}, so this is a personal note. They won't see it.`;
 }
 export const DEVICE_LINE = 'Saved on this device. Sign in to keep it everywhere.';
+/** Where a reader's declared name is remembered, so their next comment is already signed. */
+export const NAME_KEY = 'artifacts:comment-name';
+const recall = () => { try {
+    return localStorage.getItem(NAME_KEY) ?? '';
+}
+catch {
+    return '';
+} };
+const remember = (name) => { try {
+    localStorage.setItem(NAME_KEY, name);
+}
+catch { /* a browser that keeps nothing still comments */ } };
 export function CommentCard({ ownerName, mode, canShare, signedIn, quote, initial = '', accent = 'currentColor', signIn, voice = null, onSave, onCancel, }) {
     const [text, setText] = useState(initial);
     const [share, setShare] = useState(canShare);
@@ -29,11 +41,15 @@ export function CommentCard({ ownerName, mode, canShare, signedIn, quote, initia
     const [memo, setMemo] = useState(null);
     const [transcript, setTranscript] = useState(undefined);
     const [status, setStatus] = useState(null);
+    const [name, setName] = useState(recall);
     // Refs, because the host's transcript arrives after an await and must see the box as it is then.
     const base = useRef('');
     const edited = useRef(false);
     const uploaded = useRef(null);
     const personal = !canShare || !share;
+    // A reader with no account is asked for a name, so the owner can credit the feedback. Optional:
+    // a comment without one still goes through, signed "a reader".
+    const askName = !personal && !signedIn;
     // Where a memo goes: a shared comment, the reader's account, or (neither) this device only.
     const scope = () => (canShare && share ? 'comment' : signedIn ? 'personal' : null);
     const recorded = async (m) => {
@@ -61,12 +77,14 @@ export function CommentCard({ ownerName, mode, canShare, signedIn, quote, initia
         if ((!body && !memo) || busy)
             return;
         setBusy(true);
-        const err = memo
-            ? await onSave(body, canShare && share, { memo, uploaded: uploaded.current, ...(body && transcript ? { transcript } : {}) })
-            : await onSave(body, canShare && share);
+        const by = askName && name.trim() ? name.trim() : undefined;
+        if (by)
+            remember(by);
+        const saved = memo ? { memo, uploaded: uploaded.current, ...(body && transcript ? { transcript } : {}) } : undefined;
+        const err = saved || by ? await onSave(body, canShare && share, saved, by) : await onSave(body, canShare && share);
         setBusy(false);
         setError(err);
     };
     return (_jsxs("form", { "data-comment-card": true, "data-comment-ui": true, "data-nospeak": true, onSubmit: submit, className: "w-[min(22rem,calc(100vw-2rem))] rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-left font-sans text-sm text-[color:var(--a-strong)] shadow-xl", children: [!canShare ? (_jsx("p", { "data-comment-warning": true, role: "note", className: "mb-2 rounded-lg border px-3 py-2 text-[13px] leading-snug", style: { borderColor: accent }, children: warningLine(ownerName, mode) })) : null, quote ? _jsx("p", { className: "mb-2 line-clamp-3 border-l-2 pl-2 text-[13px] italic opacity-75", style: { borderColor: accent }, children: quote }) : null, _jsx("textarea", { value: text, autoFocus: true, style: NO_ZOOM_FONT, onChange: (e) => { setText(e.target.value); edited.current = true; setTranscript('typed'); }, onKeyDown: (e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey))
-                    void submit(); }, maxLength: MAX_COMMENT_CHARS, rows: 3, "aria-label": personal ? 'A personal note' : `A comment for ${ownerName}`, placeholder: personal ? 'A note for yourself' : `A comment for ${ownerName}`, className: "w-full rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-ground,transparent)] p-2 text-[15px]" }), _jsx(VoiceRecorder, { accent: accent, onStart: () => { base.current = text.trim(); setMemo(null); setTranscript(undefined); setError(null); }, onLive: (heard) => { setText(base.current ? `${base.current} ${heard}` : heard); setTranscript('browser'); }, onStop: (m) => void recorded(m), onError: setError }), memo ? (_jsxs("p", { "data-voice-kept": true, className: "m-0 mt-1 text-xs opacity-70", children: [status ?? 'Recording kept with this comment.', _jsx("button", { type: "button", "data-voice-discard": true, className: "ml-2 underline", onClick: () => { setMemo(null); uploaded.current = null; }, children: "Discard recording" })] })) : null, canShare ? (_jsxs("fieldset", { className: "mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[13px]", children: [_jsx("legend", { className: "sr-only", children: "Who sees this" }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "comment-share", "data-comment-share": "share", checked: share, onChange: () => setShare(true) }), `Share with ${ownerName}`] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "comment-share", "data-comment-share": "mine", checked: !share, onChange: () => setShare(false) }), "Just for me"] })] })) : null, personal && !signedIn ? (_jsx("p", { "data-comment-device": true, className: "mt-2 text-xs opacity-70", children: signIn ? _jsxs(_Fragment, { children: ["Saved on this device. ", _jsx("a", { href: signIn, className: "underline", children: "Sign in to keep it everywhere." })] }) : DEVICE_LINE })) : null, error ? _jsx("p", { role: "alert", className: "mt-2 text-xs text-amber-500", children: error }) : null, _jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx("button", { type: "submit", "data-comment-save": true, disabled: busy || (!text.trim() && !memo), className: "rounded-full px-4 py-1 text-sm font-medium disabled:opacity-40", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: personal ? 'Save note' : 'Comment' }), _jsx("button", { type: "button", onClick: onCancel, className: "text-sm opacity-70 hover:opacity-100", children: "Cancel" })] })] }));
+                    void submit(); }, maxLength: MAX_COMMENT_CHARS, rows: 3, "aria-label": personal ? 'A personal note' : `A comment for ${ownerName}`, placeholder: personal ? 'A note for yourself' : `A comment for ${ownerName}`, className: "w-full rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-ground,transparent)] p-2 text-[15px]" }), _jsx(VoiceRecorder, { accent: accent, onStart: () => { base.current = text.trim(); setMemo(null); setTranscript(undefined); setError(null); }, onLive: (heard) => { setText(base.current ? `${base.current} ${heard}` : heard); setTranscript('browser'); }, onStop: (m) => void recorded(m), onError: setError }), memo ? (_jsxs("p", { "data-voice-kept": true, className: "m-0 mt-1 text-xs opacity-70", children: [status ?? 'Recording kept with this comment.', _jsx("button", { type: "button", "data-voice-discard": true, className: "ml-2 underline", onClick: () => { setMemo(null); uploaded.current = null; }, children: "Discard recording" })] })) : null, askName ? (_jsxs("label", { "data-comment-name": true, className: "mt-2 block text-[13px]", children: [_jsx("span", { className: "block opacity-80", children: `Your name, so ${ownerName} can credit your feedback` }), _jsx("input", { value: name, onChange: (e) => setName(e.target.value), maxLength: MAX_COMMENT_NAME_CHARS, autoComplete: "name", placeholder: "Your name", style: NO_ZOOM_FONT, className: "mt-1 w-full rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-ground,transparent)] px-2 py-1 text-[15px]" })] })) : null, canShare ? (_jsxs("fieldset", { className: "mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[13px]", children: [_jsx("legend", { className: "sr-only", children: "Who sees this" }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "comment-share", "data-comment-share": "share", checked: share, onChange: () => setShare(true) }), `Share with ${ownerName}`] }), _jsxs("label", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "radio", name: "comment-share", "data-comment-share": "mine", checked: !share, onChange: () => setShare(false) }), "Just for me"] })] })) : null, personal && !signedIn ? (_jsx("p", { "data-comment-device": true, className: "mt-2 text-xs opacity-70", children: signIn ? _jsxs(_Fragment, { children: ["Saved on this device. ", _jsx("a", { href: signIn, className: "underline", children: "Sign in to keep it everywhere." })] }) : DEVICE_LINE })) : null, error ? _jsx("p", { role: "alert", className: "mt-2 text-xs text-amber-500", children: error }) : null, _jsxs("div", { className: "mt-3 flex items-center gap-3", children: [_jsx("button", { type: "submit", "data-comment-save": true, disabled: busy || (!text.trim() && !memo), className: "rounded-full px-4 py-1 text-sm font-medium disabled:opacity-40", style: { background: accent, color: 'var(--a-on-accent, #111)' }, children: personal ? 'Save note' : 'Comment' }), _jsx("button", { type: "button", onClick: onCancel, className: "text-sm opacity-70 hover:opacity-100", children: "Cancel" })] })] }));
 }

package/lib/reader/comment-layer.js

@@ -377,8 +377,8 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
      *  there, uploaded now when the reader switched between Share and Just for me after recording. */
     const memoPath = async (m, scope) => m.uploaded?.scope === scope ? m.uploaded.path : host.upload(m.memo, scope);
     const LOST = 'The recording did not upload. Try again, or discard it and save the text.';
-    const saveNew = async (body, share, d, memo) => {
-        const value = { anchor: d.anchor, body, version, ...(memo?.transcript ? { transcript: memo.transcript } : {}) };
+    const saveNew = async (body, share, d, memo, by) => {
+        const value = { anchor: d.anchor, body, version, ...(memo?.transcript ? { transcript: memo.transcript } : {}), ...(share && by ? { by } : {}) };
         const toDevice = !share && !(signedIn && onServer);
         if (memo && !toDevice) {
             const path = await memoPath(memo, share ? 'comment' : 'personal');
@@ -472,7 +472,7 @@ export function CommentLayer({ artifactId, rootId, ownerName, comments, canShare
             // On a phone the button sits at the TOP of the screen, never beside the selection: that is
             // where iOS draws its own Copy / Look Up menu, and the two fought for the same tap (Gary,
             // 2026-09-29: "I keep trying to fight with the Apple pop-up"). A mouse keeps it by the text.
-            _jsx("button", { type: "button", "data-comment-chip": true, "data-comment-chip-at": onTouch() ? 'top' : 'selection', className: onTouch() ? 'fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-5 py-2 text-sm font-medium shadow-lg' : 'absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg', style: onTouch() ? { top: 'calc(env(safe-area-inset-top, 0px) + 12px)', background: accent, color: 'var(--a-on-accent, #111)' } : { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo) => saveNew(body, share, draft, memo), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, accent: accent, audioDb: audioDb, onClose: () => setThread(null), onRemove: remove, onEdit: edit, onReply: reply }) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
+            _jsx("button", { type: "button", "data-comment-chip": true, "data-comment-chip-at": onTouch() ? 'top' : 'selection', className: onTouch() ? 'fixed left-1/2 z-50 -translate-x-1/2 rounded-full px-5 py-2 text-sm font-medium shadow-lg' : 'absolute z-50 -translate-x-full rounded-full px-3 py-1 text-xs font-medium shadow-lg', style: onTouch() ? { top: 'calc(env(safe-area-inset-top, 0px) + 12px)', background: accent, color: 'var(--a-on-accent, #111)' } : { left: chip.x, top: chip.y, background: accent, color: 'var(--a-on-accent, #111)' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { setDraft(chip); setChip(null); }, children: "Comment" })) : null, draft ? (_jsx(Floating, { x: draft.x, y: draft.y, children: _jsx(CommentCard, { ownerName: ownerName, mode: comments, canShare: canShare, signedIn: signedIn && onServer, quote: draft.quote, accent: accent, signIn: signIn, voice: host, onSave: (body, share, memo, by) => saveNew(body, share, draft, memo, by), onCancel: () => setDraft(null) }) })) : null, openItem && open ? (_jsx(Floating, { x: open.left + 28, y: open.top, children: _jsx(Thread, { item: openItem, replies: items.filter((i) => i.value.parent === openItem.id), canReply: openItem.kind === 'shared' && canShare, accent: accent, audioDb: audioDb, onClose: () => setThread(null), onRemove: remove, onEdit: edit, onReply: reply }) })) : null, drag ? (_jsx("div", { "aria-hidden": true, className: "pointer-events-none fixed z-40 rounded-md border-2 border-dashed", style: { left: Math.min(drag.x1, drag.x2), top: Math.min(drag.y1, drag.y2), width: Math.abs(drag.x2 - drag.x1), height: Math.abs(drag.y2 - drag.y1), borderColor: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)` } })) : null, _jsxs("div", { className: "fixed right-4 z-40 flex flex-col items-end gap-2", style: { bottom: 'calc(env(safe-area-inset-bottom, 0px) + 5.5rem)' }, children: [panel ? (_jsxs("div", { "data-comment-panel": true, className: "w-64 rounded-xl border border-[color:var(--a-line-strong)] bg-[color:var(--a-surface)] p-3 text-xs text-[color:var(--a-strong)] shadow-xl", children: [_jsx("p", { className: "opacity-80", children: "Select any text, or hold and drag a box over anything, to leave a comment." }), isOwner ? _jsx("p", { "data-comment-owner": true, className: "mt-1 opacity-80", children: "This is your page: you see every comment, with the name of who left it." }) : null, _jsx("button", { type: "button", "data-comment-pins-toggle": true, className: "mt-2 underline", onClick: () => setShowPins((v) => !v), children: showPins ? 'Hide comments' : 'Show comments' })] })) : null, _jsx("button", { type: "button", "data-comment-button": true, "aria-expanded": panel, onClick: () => setPanel((v) => !v), className: "rounded-full border px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur", style: { borderColor: accent, color: accent, background: `color-mix(in srgb, ${ground} 85%, transparent)` }, children: count ? `Comments · ${count}` : 'Comment' })] })] })) : null;
     return (_jsxs(_Fragment, { children: [_jsx("span", { hidden: true, "data-comment-layer": comments, "data-comment-can-share": canShare ? 'yes' : 'no' }), mounted && layout.earlier.length ? (_jsxs("section", { "data-comments-earlier": true, "data-comment-ui": true, "data-nospeak": true, className: "mx-auto max-w-2xl px-6 pb-16 text-sm", children: [_jsx("p", { className: "text-[11px] uppercase tracking-[0.2em]", style: { color: accent }, children: "Comments on earlier versions" }), _jsx("ul", { className: "m-0 mt-2 grid list-none gap-3 p-0", children: layout.earlier.map((item) => (_jsxs("li", { "data-comment-earlier-id": item.id, ...(highlight === item.id ? { 'data-comment-highlight': '' } : {}), className: "m-0 border-l-2 py-1 pl-3", style: { borderColor: accent, borderStyle: item.kind === 'personal' ? 'dashed' : 'solid', ...(highlight === item.id ? { background: `color-mix(in srgb, ${accent} 14%, transparent)` } : {}) }, children: [item.value.anchor.kind === 'text' ? _jsxs("span", { className: "block text-[13px] italic opacity-70", children: ["\u201C", item.value.anchor.quote, "\u201D"] }) : _jsx("span", { className: "block text-[13px] italic opacity-70", children: "A box on part of the page that has changed" }), _jsx("span", { className: "block whitespace-pre-wrap text-[15px] text-[color:var(--a-strong)]", children: item.value.body }), _jsxs("span", { className: "block text-xs opacity-60", children: [item.kind === 'personal' ? 'only you' : item.name, ` · version ${item.value.version}`, item.mine ? _jsx("button", { type: "button", onClick: () => void remove(item), className: "ml-2 underline", children: "delete" }) : null] })] }, item.id))) })] })) : null, overlay ? createPortal(overlay, document.body) : null] }));
 }
 function Pin({ item, left, top, accent, ground, onOpen }) {

package/lib/routes/artifacts.d.ts

@@ -27,6 +27,10 @@ export type ArtifactRoutesConfig = {
     packFor?: (artifact: ArtifactRecord) => BrandPack | undefined;
     /** The host that serves a 200, e.g. https://artifacts.example.com. No trailing slash. */
     siteUrl: string;
+    /** The embed page of this host's Supersuit Session demo (an https URL, e.g.
+     *  https://example.com/simulator/embed), for ```simulator blocks. Without it a block shows its
+     *  caption only. No default: this package points at nobody's service. */
+    simulatorEmbed?: 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

package/lib/routes/artifacts.js

@@ -303,7 +303,7 @@ export function createArtifactRoutes(config) {
         const title = v.title ?? a.title;
         const summary = v.summary ?? a.summary;
         const toc = showToc(v.markdown, a.toc) ? tocOf(v.markdown) : [];
-        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsx("div", { "data-nospeak": true, className: `mx-auto max-w-2xl px-6 ${top ? 'pt-20 sm:pt-24' : 'pt-8'}`, children: _jsxs("p", { "data-version-banner": true, role: "status", className: "rounded-lg border px-4 py-3 text-sm", style: { borderColor: brand.accent }, children: [`You are reading version ${n} of ${of}. `, _jsx("a", { href: pagePath(a.id), className: "underline underline-offset-4", style: { color: brand.accent }, children: "Read the current version" })] }) }), _jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: pack.Cover ? (_jsx(pack.Cover, { title: title, subtitle: v.subtitle, summary: summary, to: v.to, markdown: v.markdown, kicker: _jsx(Kicker, { to: v.to, brand: brand }), meta: _jsx(VersionLine, { a: a, n: n, at: v.at, history: history, reader: reader }), version: n, updatedAt: v.at, createdAt: a.createdAt })) : (_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-10 sm:pt-12' : 'pt-10'} pb-8 text-center`, children: [_jsx(Kicker, { to: v.to, brand: brand }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: title }), v.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: v.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: summary }), _jsx(VersionLine, { a: a, n: n, at: v.at, history: history, reader: reader })] })), children: _jsx(ArtifactMarkdown, { markdown: v.markdown, definitions: a.definitions, checklist: { artifactId: a.id, accent: brand.accent }, Section: pack.Section, figure: pack.figure }) })] }));
+        return (_jsxs(_Fragment, { children: [toc.length ? _jsx(TocRail, { items: toc }) : null, _jsx("div", { "data-nospeak": true, className: `mx-auto max-w-2xl px-6 ${top ? 'pt-20 sm:pt-24' : 'pt-8'}`, children: _jsxs("p", { "data-version-banner": true, role: "status", className: "rounded-lg border px-4 py-3 text-sm", style: { borderColor: brand.accent }, children: [`You are reading version ${n} of ${of}. `, _jsx("a", { href: pagePath(a.id), className: "underline underline-offset-4", style: { color: brand.accent }, children: "Read the current version" })] }) }), _jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: pack.Cover ? (_jsx(pack.Cover, { title: title, subtitle: v.subtitle, summary: summary, to: v.to, markdown: v.markdown, kicker: _jsx(Kicker, { to: v.to, brand: brand }), meta: _jsx(VersionLine, { a: a, n: n, at: v.at, history: history, reader: reader }), version: n, updatedAt: v.at, createdAt: a.createdAt })) : (_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-10 sm:pt-12' : 'pt-10'} pb-8 text-center`, children: [_jsx(Kicker, { to: v.to, brand: brand }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: title }), v.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: v.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: summary }), _jsx(VersionLine, { a: a, n: n, at: v.at, history: history, reader: reader })] })), children: _jsx(ArtifactMarkdown, { markdown: v.markdown, simulator: config.simulatorEmbed ? { embed: config.simulatorEmbed } : undefined, definitions: a.definitions, checklist: { artifactId: a.id, accent: brand.accent }, Section: pack.Section, figure: pack.figure }) })] }));
     }
     /** The page itself, shared by open and gated pages. */
     async function Body(a, { top, reader }) {
@@ -328,7 +328,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, updatedAt: a.updatedAt, createdAt: a.createdAt })) : (_jsxs("div", { className: `mx-auto max-w-2xl px-6 ${top ? 'pt-24 sm:pt-28' : 'pt-12'} pb-8 text-center`, children: [_jsx(Kicker, { to: a.to, brand: brand }), _jsx("h1", { className: "text-4xl sm:text-5xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.title }), a.subtitle ? (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-xl sm:text-2xl", style: { fontFamily: brand.type.display, color: brand.ink }, children: a.subtitle })) : null, _jsx("p", { className: "mx-auto mt-6 max-w-xl text-lg italic opacity-80", children: a.summary }), meta] }));
                         return (_jsx(Framed, { pack: pack, toc: toc.length ? _jsx(TocInline, { items: toc }) : null, cover: _jsxs(_Fragment, { children: [header, a.cover ? (_jsx("div", { className: "mx-auto max-w-2xl px-6 pb-8", children: _jsx("img", { src: a.cover, alt: "", className: "w-full rounded-xl border border-[color:var(--a-line)]" }) })) : null] }), children: _jsx(ArtifactMarkdown, { markdown: a.markdown, definitions: a.definitions, notes: config.state && a.state ? { artifactId: a.id, accent: brand.accent } : undefined, 
                                 // Ticks are kept in the reader's browser on any host; Send needs one that keeps answers.
-                                checklist: { artifactId: a.id, send: !!config.state && !!a.state && Object.hasOwn(a.state.slots, CHECKLIST_SLOT), owner, accent: brand.accent }, Section: pack.Section, figure: pack.figure }) }));
+                                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 }) }));
                     })() }), _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 })) : 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.23.0",
+  "version": "0.25.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",