@supersuit/artifacts 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 `@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.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
+walking one list on a call each saw only their own browser's ticks: 0.22.0 kept ticks in
+`localStorage`, and Send hands one reader's set to the owner rather than to the other reader.
+
+- New fence setting `sync: anyone | signed-in` (who may tick). One block saying it makes every
+  checklist on the page one shared set, kept in the page's `checklist` slot declared `shared`
+  (shape one). Blocks that disagree on `sync`, and `send` on a page that syncs, are refused.
+- The server checks a synced set against every checklist item on the page (the 0.22.0 check took
+  only the first block with `send`). New exports `checklistAnswerIds`, `checklistSyncs`.
+- The widget holds one store per page, shared by all its blocks: reads the newest shared set on
+  load, posts the whole page-wide set 400ms after a tick, polls every 4s while the tab is visible,
+  and shows "Synced" / "Saving…" / the error after the count. Last write wins on the whole set.
+  A host with no state store (501), a page with no slot (404) or a failed first read falls back
+  to `localStorage` exactly as before.
+- No route change: the route's existing `checklist.send` (host keeps answers, page declares the
+  slot) turns sync on for a page whose checklists sync.
+- DETECTOR: publish a page whose checklist says `sync: anyone`. "the checklist block has an unknown
+  setting: sync" means the host is on 0.22.0 or earlier.
+- REMEDY: bump. Pages without `sync` render and behave exactly as before.
+- Tests: the grammar accepts and refuses `sync`; multi-block ids validated server-side (an id from
+  the second block accepted, an id no block draws refused); disagreeing blocks and send-with-sync
+  refused; the slot declared shared; an anonymous reader on an unlocked password page posts and a
+  second browser reads the set, then the reverse; the widget reads the newest shared set into
+  every block with one request, posts the page-wide set after a tick, takes another reader's
+  untick on the next poll, and falls back to storage on 501. Picking the newest set and checking
+  ids page-wide were each broken on purpose and went red.
+
 ## 0.22.0
 
 **A page can carry a checklist a reader ticks off and comes back to.** A per-person Mac setup

package/README.md

@@ -27,7 +27,7 @@ Firestore), and optionally `@google-cloud/storage >= 7` for uploaded files.
 | `BrandGround`, `BrandMark` | The pack's page backdrop and mark, for your own pages (a home, a 404) |
 | `parseArtifactSource` | The front-matter contract, as a parser you can call before publishing (widget fences included) |
 | `headingsOf`, `scanWidgets`, `placeNotes` | The notes widget's pure parts: heading slugs, fence validation, where each note shows |
-| `checklistsOf`, `parseChecklistFence`, `checklistStorageKey` | The checklist widget's pure parts: the fence grammar, every item's id, where a tick is kept |
+| `checklistsOf`, `parseChecklistFence`, `checklistStorageKey`, `checklistAnswerIds`, `checklistSyncs` | The checklist widget's pure parts: the fence grammar, every item's id, where a tick is kept |
 | `mintPass`, `verifyPass` | The reader pass, for the sign-in side (see below) |
 | `mintPublisherPass`, `verifyPublisherPass` | The publisher pass: an hour-long stand-in for the publish key, for one person on one host (see below) |
 | `ARTIFACT_PUBLIC_PREFIXES` (`/gate`) | Paths to leave open if you mount artifacts inside a gated site |
@@ -410,7 +410,7 @@ response carries the no-answers warning.
 This version draws two widgets, **checklist** and **notes**. Poll and form are coming: a fence
 named `poll` or `form` is refused at publish until then, so a page never ships a code block that
 turns into a live widget on a later update. A checklist needs no state store unless it offers
-Send.
+Send or syncs.
 
 ### Checklist
 
@@ -423,6 +423,7 @@ stays escaped and no author script ever runs.
 
 ```checklist
 send: anyone            # optional: signed-in | anyone; adds a Send button, see below
+                        # or sync: signed-in | anyone; one shared set for every reader, see below
 - Update macOS {#update}
   Apple menu > System Settings > General > Software Update.
   Restart and check again until it says you're up to date.
@@ -456,7 +457,8 @@ send: anyone            # optional: signed-in | anyone; adds a Send button, see
   username" is one tap into the reader's own Messages.
 - Refused at publish, naming the line in the file: an indented line before the first item, an
   unindented line after one, an empty item, a bad or repeated `{#id}`, a name after `checklist`,
-  any setting but `send`, a checklist with no items, and a second checklist with `send`.
+  any setting but `send` or `sync`, a checklist with no items, a second checklist with `send`,
+  `send` and `sync` on one page, and two checklists that say `sync` differently.
 
 **Send** (`send: signed-in` or `send: anyone`) adds a "Send my progress to <owner>" button under
 the list. It writes `{ done: [item ids] }` to the page's `checklist` slot, shape `one` and
@@ -466,6 +468,21 @@ and the rate limit, as `writers: anyone` does). The slot is the widget's own: a
 declare a `checklist` slot in `state:`. The server takes only ids of that checklist, each once. On a
 host with no state store the button is not drawn; the ticks still work.
 
+**Sync** (`sync: anyone` or `sync: signed-in`) makes the ticks the PAGE's: one set every reader
+sees and, as `sync:` names, may change. Two people on a call ticking the same list see each
+other's ticks within a few seconds. One block saying `sync` is enough: every checklist on the page
+then shares the one set, because item ids are page-wide, and two blocks that both say it must say
+the same thing. The page declares its `checklist` slot `shared` (shape `one`), each tick updates
+the screen at once and, after a short pause, posts the whole page-wide `{ done: [ids] }`, and the
+newest set by server time is the page's. The widget reads it on load and every four seconds while
+the tab is visible, and says where it stands after the count: "Synced", "Saving…", or what went
+wrong. The server takes only ids of checklists on the page. `anyone` works for anonymous readers
+(the anonymous cookie and rate limit, as `writers: anyone`), on a password page once it is
+unlocked. **Concurrency is last-write-wins on the whole set**: two readers ticking different items
+inside the same couple of seconds can lose one tick. A page cannot both sync and send. On a host
+with no state store, or where the first read fails, the list falls back to the reader's own
+`localStorage` exactly as an unsynced one.
+
 ### Notes
 
 ````markdown

package/lib/artifacts/checklist.d.ts

@@ -13,6 +13,7 @@ export type ChecklistItem = {
 export type ChecklistBlock = {
     line: number;
     send?: SendWriters;
+    sync?: SendWriters;
     items: ChecklistItem[];
 };
 /** What a Send stores in the page's `checklist` slot: the ids the reader had ticked. */
@@ -46,8 +47,8 @@ export declare function assignChecklistIds(blocks: RawChecklistBlock[]): {
     ok: false;
     error: string;
 };
-/** The server's check on a Send, on a page whose checklist offers one: every id is an item of
- *  that checklist, once. The browser sends exactly this; anything else is refused. */
+/** The server's check on a Send or a synced set: every id is an item of that checklist (of any
+ *  checklist on the page, when it syncs), once. The browser sends exactly this; anything else is refused. */
 export declare function checkChecklistValue(v: unknown, ids: readonly string[]): string | null;
 /** Where a reader's tick on one item is kept in their browser. */
 export declare const checklistStorageKey: (artifactId: string, itemId: string) => string;

package/lib/artifacts/checklist.js

@@ -4,6 +4,7 @@
 //
 // ```checklist
 // send: anyone                      # optional: signed-in | anyone (who may press Send)
+// sync: anyone                      # optional: signed-in | anyone (who may tick a shared set)
 // - Update macOS {#update}
 //   Apple menu > System Settings > General > Software Update.
 // - [ ] Sign in with your personal Apple Account
@@ -13,6 +14,11 @@
 // `{#id}` at the end of the line when there is one, else a slug of its text. Indented lines under
 // an item are its description, drawn as markdown with raw HTML escaped like the rest of the page.
 // Ticks belong to the reader: `[x]` is accepted and ticks nothing.
+//
+// `sync:` makes the ticks the PAGE's instead of the reader's: one page-wide set, kept by the host in
+// the shared `checklist` slot, that every reader sees and (as `sync:` names) may change. One block
+// saying it is enough; every checklist on the page then shares the one set, because item ids are
+// page-wide. A page cannot both sync and send: a synced set already reaches the owner.
 export const CHECKLIST_SLOT = 'checklist';
 export const MAX_CHECKLIST_ITEMS = 200;
 const MAX_ITEM_CHARS = 500;
@@ -35,6 +41,7 @@ export function parseChecklistFence(value, line, meta) {
     const rows = value ? value.split('\n') : [];
     const items = [];
     let send;
+    let sync;
     let desc = null;
     const close = () => {
         if (desc && items.length)
@@ -83,16 +90,21 @@ export function parseChecklistFence(value, line, meta) {
         const s = /^([A-Za-z_-]+)\s*:\s*([^#]*?)\s*(#.*)?$/.exec(row.trim());
         if (!s)
             return { ok: false, error: `line ${at}: the checklist block takes settings like "send: anyone", then items starting with "- "` };
-        if (s[1] !== 'send')
+        if (s[1] !== 'send' && s[1] !== 'sync')
             return { ok: false, error: `line ${at}: the checklist block has an unknown setting: ${s[1]}` };
         if (s[2] !== 'signed-in' && s[2] !== 'anyone')
-            return { ok: false, error: `line ${at}: checklist send must be signed-in or anyone` };
-        send = s[2];
+            return { ok: false, error: `line ${at}: checklist ${s[1]} must be signed-in or anyone` };
+        if (s[1] === 'send')
+            send = s[2];
+        else
+            sync = s[2];
     }
+    if (send && sync)
+        return { ok: false, error: `line ${line}: a checklist takes send or sync, not both; a synced list already reaches the owner` };
     close();
     if (!items.length)
         return { ok: false, error: `line ${line}: a checklist needs at least one item starting with "- "` };
-    return { ok: true, block: { line, ...(send ? { send } : {}), items } };
+    return { ok: true, block: { line, ...(send ? { send } : {}), ...(sync ? { sync } : {}), items } };
 }
 /** Gives every item on the page its final id. An explicit `{#id}` is kept as written and must be
  *  unique on the page; an item without one takes the slug of its text, numbered `-1`, `-2` when
@@ -111,6 +123,7 @@ export function assignChecklistIds(blocks) {
     const out = blocks.map((b) => ({
         line: b.line,
         ...(b.send ? { send: b.send } : {}),
+        ...(b.sync ? { sync: b.sync } : {}),
         items: b.items.map(({ explicit, ...it }) => {
             if (explicit)
                 return it;
@@ -124,8 +137,8 @@ export function assignChecklistIds(blocks) {
     }));
     return { ok: true, blocks: out };
 }
-/** The server's check on a Send, on a page whose checklist offers one: every id is an item of
- *  that checklist, once. The browser sends exactly this; anything else is refused. */
+/** The server's check on a Send or a synced set: every id is an item of that checklist (of any
+ *  checklist on the page, when it syncs), once. The browser sends exactly this; anything else is refused. */
 export function checkChecklistValue(v, ids) {
     if (!v || typeof v !== 'object' || Array.isArray(v) || Object.keys(v).some((k) => k !== 'done'))
         return 'a checklist answer is { done: [item ids] }';

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

@@ -12,7 +12,7 @@ export { readAlertsDue, readSecondsFor, wordCount, localDay, READ_ALERT_KINDS, W
 export { parseStateConfig, effectiveWriters, slotVisibility, checkValue, shapeChanges, SLOT_NAME, MAX_VALUE_BYTES, MAX_MANY_PER_READER, ANON_WRITES_PER_MINUTE, MAX_ENTRIES_PER_SLOT, SHARED_LIMIT, type StateConfig, type SlotDef, type Shape, type Visibility, type Writers } from './state.js';
 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, hasNotesWidget, checkNoteValue, placeNotes, NOTES_SLOT, MAX_NOTE_CHARS, type Heading, type NotesWidget, type NoteValue, type PlacedNote } from './widgets.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 { 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

@@ -12,7 +12,7 @@ export { readAlertsDue, readSecondsFor, wordCount, localDay, READ_ALERT_KINDS, W
 export { parseStateConfig, effectiveWriters, slotVisibility, checkValue, shapeChanges, SLOT_NAME, MAX_VALUE_BYTES, MAX_MANY_PER_READER, ANON_WRITES_PER_MINUTE, MAX_ENTRIES_PER_SLOT, SHARED_LIMIT } from './state.js';
 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, hasNotesWidget, checkNoteValue, placeNotes, NOTES_SLOT, MAX_NOTE_CHARS } from './widgets.js';
+export { slugify, headingsOf, blocksOf, scanWidgets, mergeWidgetState, mergeChecklistState, checklistsOf, checklistSendIds, checklistAnswerIds, checklistSyncs, hasNotesWidget, checkNoteValue, placeNotes, NOTES_SLOT, MAX_NOTE_CHARS } from './widgets.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

@@ -14,7 +14,8 @@ export declare function sectionOutline(markdown: string, headings?: Heading[]):
 export declare function ArtifactMarkdown({ markdown, notes, checklist, definitions, Section, figure, }: {
     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). Without it a checklist still
+     *  (a host that keeps answers, on a page that declares the slot). On a page whose checklists
+     *  `sync`, the same `send` turns on the shared, page-wide set. Without it a checklist still
      *  draws and ticks, for the visit only. */
     checklist?: {
         artifactId: string;

package/lib/artifacts/render.js

@@ -13,7 +13,7 @@ import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
-import { blocksOf, checklistsOf, hasNotesWidget, headingsOf } from './widgets.js';
+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 { VideoAutoplay } from '../reader/video-autoplay.js';
@@ -120,7 +120,7 @@ function ChecklistFence({ line, ctx }) {
     // Not a checklist this page validated: draw nothing rather than its source as code.
     if (!c)
         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 ? c.send : undefined, owner: ctx.owner, accent: ctx.accent }));
+    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) {
     return {
@@ -309,7 +309,9 @@ export function ArtifactMarkdown({ markdown, notes, checklist, definitions, Sect
     const plugins = [remarkGfm, ...(defined ? [remarkDefinitions(defined)] : []), ...(outline.length ? [remarkSections(outline[0].depth)] : [])];
     const lists = /^ {0,3}(`{3,}|~{3,})\s*checklist\b/m.test(markdown) ? checklistsOf(markdown) : null;
     const checklists = lists
-        ? { byLine: lists, artifactId: checklist?.artifactId, send: !!checklist?.send, owner: checklist?.owner, accent: checklist?.accent }
+        // `send` from the host means it keeps answers and the page declared the `checklist` slot; on a
+        // 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);
     if (outline.length)

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.d.ts

@@ -27,12 +27,20 @@ export declare function scanWidgets(body: string, offset: number): {
  *  draws. A page whose checklists do not parse (published before checklists existed, so never
  *  validated) draws none rather than half of them. */
 export declare function checklistsOf(markdown: string): Map<number, ChecklistBlock>;
-/** The item ids of the page's checklist that offers Send, or null when none does. The state
- *  route asks, to check what a Send may name. */
+/** The item ids of the page's checklist that offers Send, or null when none does. */
 export declare function checklistSendIds(markdown: string): string[] | null;
+/** Does any checklist on this page sync? Then every checklist on it shares one set of ticks. */
+export declare function checklistSyncs(checklists: Iterable<ChecklistBlock>): boolean;
+/** The ids an answer in the `checklist` slot may name, or null when the page takes none: on a page
+ *  that syncs, every item of every checklist on it (ids are page-wide); else the items of the
+ *  checklist that offers Send. The state route asks, so a synced set can never carry an id the
+ *  page does not draw. */
+export declare function checklistAnswerIds(markdown: string): string[] | null;
 /** A checklist with `send` declares its own slot, `checklist`, shape one, private, written by
- *  whoever `send:` names; the owner reads it through /responses. Like `comments:`, the slot is
- *  the widget's own, so state: may not declare one by that name. */
+ *  whoever `send:` names; the owner reads it through /responses. A page whose checklists `sync`
+ *  declares the same slot SHARED instead, so every reader is shown every reader's set and the
+ *  widget takes the newest as the page's. Like `comments:`, the slot is the widget's own, so
+ *  state: may not declare one by that name. */
 export declare function mergeChecklistState(state: StateConfig | undefined, checklists: ChecklistBlock[]): {
     ok: true;
     state: StateConfig | undefined;

package/lib/artifacts/widgets.js

@@ -116,6 +116,11 @@ function scanChecklists(fences, offset) {
             return c;
         if (c.block.send && lists.some((l) => l.send))
             return { ok: false, error: `line ${line}: a page takes at most one checklist with send` };
+        const synced = lists.find((l) => l.sync);
+        if (c.block.sync && synced && synced.sync !== c.block.sync)
+            return { ok: false, error: `line ${line}: this checklist says sync: ${c.block.sync} and the one on line ${synced.line} says sync: ${synced.sync}; a page's ticks are one set, so say it one way` };
+        if ((c.block.sync && lists.some((l) => l.send)) || (c.block.send && synced))
+            return { ok: false, error: `line ${line}: a page whose checklists sync takes no send; the synced ticks already reach the owner` };
         lists.push(c.block);
     }
     const ids = assignChecklistIds(lists);
@@ -134,24 +139,49 @@ export function checklistsOf(markdown) {
     const r = scanChecklists(fencesOf(markdown), 0);
     return new Map(r.ok ? r.checklists.map((c) => [c.line, c]) : []);
 }
-/** The item ids of the page's checklist that offers Send, or null when none does. The state
- *  route asks, to check what a Send may name. */
+/** The item ids of the page's checklist that offers Send, or null when none does. */
 export function checklistSendIds(markdown) {
     const r = scanChecklists(fencesOf(markdown), 0);
     const c = r.ok ? r.checklists.find((l) => l.send) : undefined;
     return c ? c.items.map((i) => i.id) : null;
 }
+/** Does any checklist on this page sync? Then every checklist on it shares one set of ticks. */
+export function checklistSyncs(checklists) {
+    for (const c of checklists)
+        if (c.sync)
+            return true;
+    return false;
+}
+/** The ids an answer in the `checklist` slot may name, or null when the page takes none: on a page
+ *  that syncs, every item of every checklist on it (ids are page-wide); else the items of the
+ *  checklist that offers Send. The state route asks, so a synced set can never carry an id the
+ *  page does not draw. */
+export function checklistAnswerIds(markdown) {
+    const r = scanChecklists(fencesOf(markdown), 0);
+    if (!r.ok)
+        return null;
+    if (checklistSyncs(r.checklists))
+        return r.checklists.flatMap((c) => c.items.map((i) => i.id));
+    const c = r.checklists.find((l) => l.send);
+    return c ? c.items.map((i) => i.id) : null;
+}
 /** A checklist with `send` declares its own slot, `checklist`, shape one, private, written by
- *  whoever `send:` names; the owner reads it through /responses. Like `comments:`, the slot is
- *  the widget's own, so state: may not declare one by that name. */
+ *  whoever `send:` names; the owner reads it through /responses. A page whose checklists `sync`
+ *  declares the same slot SHARED instead, so every reader is shown every reader's set and the
+ *  widget takes the newest as the page's. Like `comments:`, the slot is the widget's own, so
+ *  state: may not declare one by that name. */
 export function mergeChecklistState(state, checklists) {
-    const c = checklists.find((l) => l.send);
+    const c = checklists.find((l) => l.sync) ?? checklists.find((l) => l.send);
     if (!c)
         return { ok: true, state };
+    const what = c.sync ? 'sync' : 'send';
     if (state && Object.hasOwn(state.slots, CHECKLIST_SLOT))
-        return { ok: false, error: `line ${c.line}: the checklist's send writes to slot "${CHECKLIST_SLOT}", and state: declares a slot by that name; rename that slot` };
+        return { ok: false, error: `line ${c.line}: the checklist's ${what} writes to slot "${CHECKLIST_SLOT}", and state: declares a slot by that name; rename that slot` };
     const base = state ?? { writers: 'signed-in', visibility: 'private', slots: {} };
-    return { ok: true, state: { ...base, slots: { ...base.slots, [CHECKLIST_SLOT]: { shape: 'one', visibility: 'private', writers: c.send } } } };
+    const slot = c.sync
+        ? { shape: 'one', visibility: 'shared', writers: c.sync }
+        : { shape: 'one', visibility: 'private', writers: c.send };
+    return { ok: true, state: { ...base, slots: { ...base.slots, [CHECKLIST_SLOT]: slot } } };
 }
 /** A widget declares its own slot. The notes block adds `notes: { shape: many }` to the page's
  *  `state:` (creating `state:` with its defaults when the page had none), so the state API

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/state-routes.js

@@ -19,7 +19,7 @@ import { ANON_WRITES_PER_MINUTE, MAX_ENTRIES_PER_SLOT, checkValue, effectiveWrit
 import { COMMENTS_SLOT, validateComment } from '../artifacts/comments.js';
 import { isCommentAudioPath } from '../artifacts/audio.js';
 import { readerKeyFor } from '../artifacts/state-store.js';
-import { NOTES_SLOT, checkNoteValue, checklistSendIds, hasNotesWidget } from '../artifacts/widgets.js';
+import { NOTES_SLOT, checkNoteValue, checklistAnswerIds, hasNotesWidget } from '../artifacts/widgets.js';
 import { CHECKLIST_SLOT, checkChecklistValue } from '../artifacts/checklist.js';
 import { responsesCsv, responsesOf, stateView } from '../artifacts/state-view.js';
 export const ANON_COOKIE = 'artifact_anon';
@@ -243,7 +243,7 @@ export function createStateRoutes(ctx) {
                 return json({ error: 'no comment of yours with that id' }, 404);
         }
         else {
-            const sendIds = slot === CHECKLIST_SLOT ? checklistSendIds(a.markdown) : null;
+            const sendIds = slot === CHECKLIST_SLOT ? checklistAnswerIds(a.markdown) : null;
             const bad = checkValue(b.value)
                 ?? (slot === NOTES_SLOT && hasNotesWidget(a.markdown) ? checkNoteValue(b.value) : null)
                 ?? (sendIds ? checkChecklistValue(b.value, sendIds) : null);

package/lib/widgets/checklist-sync.d.ts

@@ -0,0 +1,54 @@
+export type SyncStatus = 'loading' | 'synced' | 'saving' | 'error' | 'sign-in' | 'local';
+export type SyncSnapshot = {
+    done: ReadonlySet<string>;
+    status: SyncStatus;
+    message?: string;
+    signIn?: string | null;
+};
+export declare const SYNC_POLL_MS = 4000;
+export declare const SYNC_SAVE_DELAY_MS = 400;
+/** The page's set from a state answer: the newest shared entry's `done`, or null when the answer
+ *  carries no checklist slot. An empty slot is an empty set. */
+export declare function latestSharedDone(body: unknown): string[] | null;
+declare class SyncStore {
+    private artifactId;
+    private blocks;
+    private done;
+    private status;
+    private message?;
+    private signIn?;
+    private snap;
+    private listeners;
+    private dirty;
+    private inflight;
+    private saveTimer;
+    private pollTimer;
+    private onVisible;
+    constructor(artifactId: string);
+    private make;
+    private emit;
+    private set;
+    private visible;
+    private url;
+    /** Every id a checklist on the page draws. A set from an earlier version can name an item the
+     *  page no longer has, and the server refuses a set naming one, so only these are posted. */
+    private known;
+    snapshot: () => SyncSnapshot;
+    subscribe: (l: () => void) => () => void;
+    register(block: object, ids: readonly string[]): void;
+    unregister(block: object): void;
+    private start;
+    private stop;
+    private toLocal;
+    /** Read the page's set. Skipped while this reader has a change not yet saved, so a poll can
+     *  never take back a tick the reader just made. */
+    pull(): Promise<void>;
+    toggle(id: string): void;
+    private schedule;
+    /** Post the whole page-wide set. Last write wins on the whole set (see the top of this file). */
+    push(): Promise<void>;
+}
+/** The one store for a page, shared by every checklist block on it. */
+export declare function syncStoreFor(artifactId: string): SyncStore;
+export declare const SERVER_SYNC_SNAPSHOT: SyncSnapshot;
+export {};

package/lib/widgets/checklist-sync.js

@@ -0,0 +1,255 @@
+'use client';
+// The shared set behind a page whose checklists `sync`: one store per page, held by every
+// checklist block on it, because item ids are page-wide and the host keeps ONE set for the page
+// (the shared `one` slot `checklist`, where each writer's latest set is an entry).
+//
+// The newest entry by its server time is the page's set. A tick updates the screen at once and,
+// after a short pause, posts the WHOLE page-wide set; a poll every few seconds while the tab is
+// visible brings in the other readers' ticks. Concurrency is last-write-wins on the whole set: two
+// people ticking different items inside the same couple of seconds can lose one of the two ticks.
+// That is accepted for a list two people walk through together; a per-item merge would need the
+// host to keep per-item state, which this version does not.
+//
+// A host that keeps no answers (501), a page that takes none (404), or a first read that fails
+// drops the store to `local`: ticks live in localStorage exactly as an unsynced checklist's do.
+import { CHECKLIST_SLOT, checklistStorageKey } from '../artifacts/checklist.js';
+export const SYNC_POLL_MS = 4000;
+export const SYNC_SAVE_DELAY_MS = 400;
+const RETRY_MS = 5000;
+/** The page's set from a state answer: the newest shared entry's `done`, or null when the answer
+ *  carries no checklist slot. An empty slot is an empty set. */
+export function latestSharedDone(body) {
+    const slot = body?.slots?.[CHECKLIST_SLOT];
+    if (!slot)
+        return null;
+    let best = null;
+    for (const e of slot.shared ?? [])
+        if (typeof e?.at === 'string' && (!best || e.at > best.at))
+            best = e;
+    const done = best?.value?.done;
+    return Array.isArray(done) ? done.filter((d) => typeof d === 'string') : [];
+}
+function readLocal(artifactId, id) {
+    try {
+        return globalThis.localStorage?.getItem(checklistStorageKey(artifactId, id)) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeLocal(artifactId, id, on) {
+    try {
+        if (on)
+            globalThis.localStorage?.setItem(checklistStorageKey(artifactId, id), '1');
+        else
+            globalThis.localStorage?.removeItem(checklistStorageKey(artifactId, id));
+    }
+    catch {
+        // Storage blocked: the tick lives for this visit only.
+    }
+}
+class SyncStore {
+    artifactId;
+    blocks = new Map();
+    done = new Set();
+    status = 'loading';
+    message;
+    signIn;
+    snap;
+    listeners = new Set();
+    dirty = false;
+    inflight = false;
+    saveTimer = null;
+    pollTimer = null;
+    onVisible = () => { if (this.visible())
+        void this.pull(); };
+    constructor(artifactId) {
+        this.artifactId = artifactId;
+        this.snap = this.make();
+    }
+    make() {
+        return { done: new Set(this.done), status: this.status, ...(this.message ? { message: this.message } : {}), ...(this.signIn !== undefined ? { signIn: this.signIn } : {}) };
+    }
+    emit() {
+        this.snap = this.make();
+        for (const l of this.listeners)
+            l();
+    }
+    set(status, message, signIn) {
+        this.status = status;
+        this.message = message;
+        this.signIn = signIn;
+    }
+    visible() {
+        return typeof document === 'undefined' || document.visibilityState !== 'hidden';
+    }
+    url() {
+        return `/api/artifacts/${this.artifactId}/state`;
+    }
+    /** Every id a checklist on the page draws. A set from an earlier version can name an item the
+     *  page no longer has, and the server refuses a set naming one, so only these are posted. */
+    known() {
+        const out = new Set();
+        for (const ids of this.blocks.values())
+            for (const id of ids)
+                out.add(id);
+        return out;
+    }
+    snapshot = () => this.snap;
+    subscribe = (l) => {
+        this.listeners.add(l);
+        return () => { this.listeners.delete(l); };
+    };
+    register(block, ids) {
+        // Back in the map after a stop (React's strict mode unmounts and remounts once).
+        if (!stores.has(this.artifactId))
+            stores.set(this.artifactId, this);
+        this.blocks.set(block, ids);
+        if (this.status === 'local') {
+            for (const id of ids)
+                if (readLocal(this.artifactId, id))
+                    this.done.add(id);
+            this.emit();
+        }
+        if (this.blocks.size === 1)
+            this.start();
+    }
+    unregister(block) {
+        this.blocks.delete(block);
+        if (this.blocks.size === 0)
+            this.stop();
+    }
+    start() {
+        void this.pull();
+        if (typeof document !== 'undefined')
+            document.addEventListener('visibilitychange', this.onVisible);
+        this.pollTimer = setInterval(() => { if (this.visible())
+            void this.pull(); }, SYNC_POLL_MS);
+    }
+    stop() {
+        if (this.pollTimer)
+            clearInterval(this.pollTimer);
+        if (this.saveTimer)
+            clearTimeout(this.saveTimer);
+        this.pollTimer = this.saveTimer = null;
+        if (typeof document !== 'undefined')
+            document.removeEventListener('visibilitychange', this.onVisible);
+        stores.delete(this.artifactId);
+    }
+    toLocal() {
+        if (this.pollTimer)
+            clearInterval(this.pollTimer);
+        this.pollTimer = null;
+        this.done = new Set([...this.known()].filter((id) => readLocal(this.artifactId, id)));
+        this.set('local');
+        this.emit();
+    }
+    /** Read the page's set. Skipped while this reader has a change not yet saved, so a poll can
+     *  never take back a tick the reader just made. */
+    async pull() {
+        if (this.status === 'local' || this.dirty || this.inflight)
+            return;
+        let r;
+        try {
+            r = await fetch(this.url(), { credentials: 'same-origin', cache: 'no-store' });
+        }
+        catch {
+            if (this.status === 'loading')
+                return this.toLocal();
+            this.set('error', 'offline; will retry');
+            return this.emit();
+        }
+        if (r.status === 501 || r.status === 404)
+            return this.toLocal();
+        const body = await r.json().catch(() => null);
+        if (!r.ok) {
+            if (this.status === 'loading')
+                return this.toLocal();
+            this.set('error', 'could not read the shared list; will retry');
+            return this.emit();
+        }
+        const done = latestSharedDone(body);
+        if (done === null)
+            return this.toLocal();
+        if (this.dirty || this.inflight)
+            return;
+        this.done = new Set(done);
+        if (this.status !== 'sign-in')
+            this.set('synced');
+        this.emit();
+    }
+    toggle(id) {
+        const on = !this.done.has(id);
+        if (on)
+            this.done.add(id);
+        else
+            this.done.delete(id);
+        writeLocal(this.artifactId, id, on);
+        if (this.status === 'local')
+            return this.emit();
+        this.dirty = true;
+        this.set('saving');
+        this.emit();
+        this.schedule(SYNC_SAVE_DELAY_MS);
+    }
+    schedule(ms) {
+        if (this.saveTimer)
+            clearTimeout(this.saveTimer);
+        this.saveTimer = setTimeout(() => { this.saveTimer = null; void this.push(); }, ms);
+    }
+    /** Post the whole page-wide set. Last write wins on the whole set (see the top of this file). */
+    async push() {
+        if (this.inflight || !this.dirty)
+            return;
+        this.inflight = true;
+        this.dirty = false;
+        const known = this.known();
+        const done = [...this.done].filter((id) => known.has(id));
+        let r = null;
+        let body = null;
+        try {
+            r = await fetch(this.url(), {
+                method: 'POST',
+                credentials: 'same-origin',
+                cache: 'no-store',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ slot: CHECKLIST_SLOT, op: 'set', value: { done } }),
+            });
+            body = (await r.json().catch(() => null));
+        }
+        catch {
+            r = null;
+        }
+        this.inflight = false;
+        if (r?.ok) {
+            if (this.dirty)
+                return this.schedule(SYNC_SAVE_DELAY_MS);
+            const latest = latestSharedDone(body);
+            if (latest)
+                this.done = new Set(latest);
+            this.set('synced');
+        }
+        else if (r?.status === 401) {
+            this.set('sign-in', undefined, typeof body?.signIn === 'string' ? body.signIn : null);
+        }
+        else if (r && r.status >= 400 && r.status < 500 && r.status !== 429) {
+            this.set('error', typeof body?.error === 'string' ? body.error : 'that tick did not save');
+        }
+        else {
+            // Offline, rate-limited or a server error: keep the tick and try again shortly.
+            this.dirty = true;
+            this.set('error', 'not saved yet; retrying');
+            this.schedule(RETRY_MS);
+        }
+        this.emit();
+    }
+}
+const stores = new Map();
+/** The one store for a page, shared by every checklist block on it. */
+export function syncStoreFor(artifactId) {
+    let s = stores.get(artifactId);
+    if (!s)
+        stores.set(artifactId, (s = new SyncStore(artifactId)));
+    return s;
+}
+export const SERVER_SYNC_SNAPSHOT = { done: new Set(), status: 'loading' };

package/lib/widgets/checklist.d.ts

@@ -5,12 +5,14 @@ export type ChecklistViewItem = {
     title: ReactNode;
     description: ReactNode | null;
 };
-export declare function Checklist({ items, artifactId, send, owner, accent, }: {
+export declare function Checklist({ items, artifactId, send, sync, owner, accent, }: {
     items: ChecklistViewItem[];
     /** The page, for the storage key. Without one (a past version) ticks last for the visit. */
     artifactId?: string;
     /** Who may press Send, when the page offers it and the host keeps answers. */
     send?: SendWriters;
+    /** The page's ticks are one shared set the host keeps (a page whose checklists `sync`). */
+    sync?: boolean;
     owner?: string;
     accent?: string;
 }): import("react").JSX.Element;

package/lib/widgets/checklist.js

@@ -9,8 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The item text and description arrive already drawn on the server, as markdown with raw HTML
 // escaped, so this file draws no author content itself. Everything here is data-nospeak: the
 // narrator reads the prose, never the checklist.
-import { useCallback, useEffect, useState } from 'react';
+//
+// With `sync`, the ticks are the page's, not the reader's: every checklist block on the page reads
+// and writes one shared set through ./checklist-sync.ts, and falls back to the localStorage path
+// below when the host keeps no answers.
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
 import { CHECKLIST_SLOT, checklistStorageKey } from '../artifacts/checklist.js';
+import { SERVER_SYNC_SNAPSHOT, syncStoreFor } from './checklist-sync.js';
 function readTick(key) {
     if (!key)
         return false;
@@ -34,21 +39,48 @@ function writeTick(key, on) {
         // Storage blocked: the tick lives for this visit only.
     }
 }
-export function Checklist({ items, artifactId, send, owner, accent, }) {
+const noopSubscribe = () => () => { };
+const nullSnapshot = () => null;
+const serverSnapshot = () => SERVER_SYNC_SNAPSHOT;
+const SYNC_WORDS = { loading: 'Connecting…', synced: 'Synced', saving: 'Saving…' };
+/** The quiet word after the count: where the shared set stands. */
+function SyncLabel({ s, color }) {
+    const words = s.status === 'error' ? (s.message ?? 'not saved') : s.status === 'sign-in' ? null : SYNC_WORDS[s.status];
+    return (_jsxs("span", { "data-checklist-sync": s.status, className: "normal-case tracking-normal opacity-70", children: [' · ', s.status === 'sign-in'
+                ? (s.signIn ? _jsx("a", { href: s.signIn, className: "underline", style: { color }, children: "Sign in to tick" }) : 'Ticking is open to signed-in readers')
+                : words] }));
+}
+export function Checklist({ items, artifactId, send, sync, owner, accent, }) {
     const key = useCallback((id) => (artifactId ? checklistStorageKey(artifactId, id) : null), [artifactId]);
-    const [done, setDone] = useState({});
+    const [local, setDone] = useState({});
     const [sent, setSent] = useState({ status: 'idle' });
+    const store = useMemo(() => (sync && artifactId ? syncStoreFor(artifactId) : null), [sync, artifactId]);
+    const shared = useSyncExternalStore(store ? store.subscribe : noopSubscribe, store ? store.snapshot : nullSnapshot, store ? serverSnapshot : nullSnapshot);
     // Read after mount, never during render: the server has no storage, and reading it while
     // hydrating would draw a page that disagrees with the server's.
     const ids = items.map((it) => it.id).join('\n');
     useEffect(() => {
+        if (store)
+            return;
         const next = {};
         for (const id of ids.split('\n'))
             if (readTick(key(id)))
                 next[id] = true;
         setDone(next);
-    }, [ids, key]);
+    }, [ids, key, store]);
+    // A synced block hands the page's store the ids it draws; the store reads and polls while any
+    // block on the page is mounted.
+    useEffect(() => {
+        if (!store)
+            return;
+        const block = {};
+        store.register(block, ids.split('\n'));
+        return () => store.unregister(block);
+    }, [store, ids]);
+    const done = shared ? Object.fromEntries([...shared.done].map((id) => [id, true])) : local;
     const toggle = (id) => {
+        if (store)
+            return store.toggle(id);
         setDone((d) => {
             const on = !d[id];
             writeTick(key(id), on);
@@ -87,7 +119,7 @@ export function Checklist({ items, artifactId, send, owner, accent, }) {
             setSent({ status: 'error', message: 'that did not reach the page; try again' });
         }
     };
-    return (_jsxs("div", { "data-nospeak": true, "data-artifact-checklist": true, className: "my-6 rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-surface)]", children: [_jsx("p", { "data-checklist-count": true, "aria-live": "polite", className: "m-0 border-b border-[color:var(--a-line)] px-4 py-2 text-[11px] uppercase tracking-[0.2em]", style: { color }, children: `${count} of ${items.length} done` }), _jsx("ul", { className: "m-0 list-none p-0", children: items.map((it) => {
+    return (_jsxs("div", { "data-nospeak": true, "data-artifact-checklist": true, className: "my-6 rounded-lg border border-[color:var(--a-line)] bg-[color:var(--a-surface)]", children: [_jsxs("p", { "data-checklist-count": true, "aria-live": "polite", className: "m-0 border-b border-[color:var(--a-line)] px-4 py-2 text-[11px] uppercase tracking-[0.2em]", style: { color }, children: [`${count} of ${items.length} done`, shared && shared.status !== 'local' ? _jsx(SyncLabel, { s: shared, color: color }) : null] }), _jsx("ul", { className: "m-0 list-none p-0", children: items.map((it) => {
                     const on = !!done[it.id];
                     const inputId = `checklist-${artifactId ?? 'page'}-${it.id}`;
                     return (_jsxs("li", { "data-checklist-item": it.id, "data-done": on ? 'yes' : 'no', className: "m-0 border-b border-[color:var(--a-line)] px-4 py-1 last:border-b-0", children: [_jsxs("label", { htmlFor: inputId, className: "flex cursor-pointer items-start gap-3 py-2", style: { minHeight: 44 }, children: [_jsx("input", { id: inputId, type: "checkbox", checked: on, onChange: () => toggle(it.id), className: "mt-0.5 shrink-0 cursor-pointer", style: { accentColor: color, width: 24, height: 24 } }), _jsx("span", { className: on ? 'text-[color:var(--a-muted)] line-through' : 'text-[color:var(--a-strong)]', children: it.title })] }), it.description ? _jsx("div", { className: "pb-2 pl-9 text-[15px] text-[color:var(--a-body)]", children: it.description }) : null] }, it.id));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersuit/artifacts",
-  "version": "0.22.0",
+  "version": "0.24.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",