@panphora/clayjs 1.24.1 → 1.25.0

package/src/lib/dirty-gate.js

@@ -29,6 +29,7 @@ import Mutation from './mutation.js';
 import { isEditMode } from '../core/is-edit-mode.js';
 import { STRIP_FROM_DIRTY_CHECK, SNAPSHOT_REMOVE_SELECTOR } from './region-policy.js';
 import { PERSIST } from './attr-aliases.js';
+import { setDraftGate } from '../core/draft-mode.js';
 
 let changes = 0;
 let clearedAt = 0;
@@ -121,6 +122,7 @@ export function startDirtyGate() {
   );
   document.addEventListener('input', onUserInput, true);
   document.addEventListener('change', onUserInput, true);
+  setDraftGate({ token: gateTokenNow, unchangedSince: gateUnchangedSince });
 }
 
 /** The morph-apply window: nothing that happens inside it is a user edit. */
@@ -210,6 +212,23 @@ export function gateCaptureToken() {
   return { gen: changes, probe };
 }
 
+/** A token for the page as it is now: what the browser has queued is counted first. */
+export function gateTokenNow() {
+  Mutation._deliverBeforePause();
+  return gateCaptureToken();
+}
+
+/**
+ * True when nothing was recorded since the token was taken and every [persist] control
+ * still holds what it held then. Records the browser has queued are delivered first, so
+ * the answer holds in the task that made a change too.
+ */
+export function gateUnchangedSince(token) {
+  if (!token) return false;
+  Mutation._deliverBeforePause();
+  return changes === token.gen && token.probe.every(([el, sig]) => controlSignature(el) === sig);
+}
+
 /** A change nothing in the DOM recorded: the page holds text a save has not written. */
 export function gateMarkDirty() {
   changes++;

package/src/plugins/menu/visitor.js

@@ -72,17 +72,49 @@ function copyUrl(loc = window.location) {
   return `/_/copy${path === "/" ? "" : path}`;
 }
 
+// Hyperclay's trial bar, once the visitor closes it, leaves its Host action and a way back to the
+// page (hyperclay server-lib/drop/trial-bar.js): `window.hyperclayBar` holds its state, set before
+// this menu loads, and `hyperclay:bar` reports each change. Download copy is already in the menu.
+function attachBar({ addItem, removeItem }) {
+  const draw = (bar) => {
+    if (bar?.kind !== "trial" || !bar.dismissed) {
+      removeItem("clay.bar.host");
+      removeItem("clay.bar.show");
+      return;
+    }
+    const host = Array.isArray(bar.actions) ? bar.actions.find((action) => action?.id === "host") : null;
+    if (typeof host?.href === "string") addItem({ id: "clay.bar.host", label: "Host and share online", href: host.href });
+    if (typeof bar.show === "function") addItem({ id: "clay.bar.show", label: "Show draft bar", run: () => bar.show() });
+  };
+  document.addEventListener("hyperclay:bar", (event) => draw(event.detail));
+  draw(window.hyperclayBar);
+}
+
 // A visitor's menu holds exactly Undo, Redo, Download copy and Make your own copy (David, Nov 11):
-// no theme row, no page items, no Start over.
+// no theme row, no page items, no Start over. While Hyperclay's trial bar is closed it also holds
+// Host and share online and Show draft bar (David, Nov 11, sheet hosts review), and Earlier
+// drafts when this page has recovery copies (David, Nov 13).
 export function start() {
   if (document.querySelector('clay-editor-ui[data-clay-ui="menu"]')) return;
   const shell = createShell({ sections: [["clay.undo"], null], icon: GEAR, label: "Settings" });
   const { embedded, skin, addItem, removeItem, open, close, note, goo, beforeOpen } = shell;
   shell.mount(embedded ? [MENU_SAFETY, SHELL_BASE, skin ?? MENU_SKIN, MENU_TOUCH] : [MENU_SAFETY, SHELL_BASE, SHELL_FLOATING, MENU_SKIN, MENU_TOUCH]);
+  let recoveryMenu;
+  beforeOpen.push(() => {
+    if (typeof globalThis.indexedDB?.open !== "function" || !globalThis.IDBKeyRange) return;
+    recoveryMenu ??= import("../visitor-drafts/recovery-menu.js").then(async ({ attachRecoveryMenu }) => {
+      const { recoveryDrafts } = await import("../visitor-drafts.js");
+      attachRecoveryMenu(shell, recoveryDrafts);
+    }).catch((error) => {
+      recoveryMenu = null;
+      console.warn("visitor-menu: earlier drafts did not load", error);
+    });
+  });
   publishLooks();
   attachUndo({ addItem, beforeOpen });
   addItem({ id: "clay.download", label: "Download copy", run: () => window.clay.visitorDrafts.download() });
   addItem({ id: "clay.copy", label: "Make your own copy", href: copyUrl() });
+  attachBar({ addItem, removeItem });
   window.clay.menu = { addItem, removeItem, open, close, note, embedded, button: goo };
   document.dispatchEvent(new CustomEvent("clay:menu-ready"));
 }

package/src/plugins/visitor-drafts/commit.js

@@ -76,6 +76,22 @@ export function applyKeys(data, keys, merge3) {
 export const isChain = (value) => isPlain(value) && typeof value.tab === "string" && typeof value.reset === "string" && Array.isArray(value.ops);
 export const recoveryMark = (copy) => isChain(copy) ? `op:${copy.tab}:${copy.ops.at(-1)?.seq ?? copy.acked ?? 0}` : foreignMark(copy);
 
+// Ended journals carry only the fields they changed; other fields use the served page.
+export function recoveryRecord(copy, seed) {
+  if (isPlain(copy) && copy.v === 1 && isPlain(copy.data)) return clone(copy);
+  if (!isChain(copy) || !copy.ops.length) return null;
+  const data = clone(seed);
+  let unit = null;
+  for (const op of copy.ops) {
+    for (const [name, pair] of Object.entries(op.keys ?? {})) {
+      if ("m" in pair) Object.defineProperty(data, name, { value: clone(pair.m), enumerable: true, writable: true, configurable: true });
+      else delete data[name];
+    }
+    if (op.unit !== undefined) unit = op.unit.to;
+  }
+  return { v: 1, savedAt: copy.ops.at(-1).savedAt, data, ...(unit && { live: clone(unit.live), blockeditor: clone(unit.blockeditor) }) };
+}
+
 // Cleanup needs proof for this exact chain, even when its generation has ended.
 export function settled(chain, meta) {
   if (isPlain(chain) && meta.recovery?.includes(recoveryMark(chain))) return true;
@@ -123,7 +139,7 @@ function foreignBase(line, { record, seen, direct, v1base, meta }) {
  * @param {?Object} [input.seen] - the latest cache copy the caller saw at the draft's key
  * @param {boolean} [input.direct] - a storage event says `local` replaced exactly that copy
  */
-export function commit(stored, { seed, newId, now, merge3, unitMark, marker = null, resets = [], chains = [], local = null, seen = null, direct = false }) {
+export function commit(stored, { seed, newId, now, merge3, same, unitMark, marker = null, resets = [], chains = [], local = null, seen = null, direct = false, recovery = null, copies = [] }) {
   const meta = stored.meta ? clone(stored.meta) : emptyMeta(marker);
   // A database the browser cleared counts on from this ClayJS's cache, so the cache never
   // reads as newer than the record.
@@ -260,6 +276,36 @@ export function commit(stored, { seed, newId, now, merge3, unitMark, marker = nu
     out.applied[chain.tab] = at;
   }
 
+  if (recovery) {
+    const found = copies.find(([mark]) => mark === recovery.mark);
+    if (!found) throw new Error("That draft is no longer available. Open the list again.");
+    if (recovery.type === "remove") {
+      meta.recovery = (meta.recovery ?? []).filter((mark) => mark !== recovery.mark);
+      out.dropped.push(recovery.mark);
+      out.removedMark = recovery.mark;
+      out.changed = true;
+    } else if (recovery.type === "restore" && recovery.reset === meta.reset) {
+      const chosen = recoveryRecord(found[1], seed);
+      if (!chosen) throw new Error("This draft cannot be restored by this version.");
+      if (meta.recovery?.includes(recovery.mark)) meta.recovery = [recovery.mark, ...meta.recovery.filter((mark) => mark !== recovery.mark)];
+      const alreadyKept = record && copies.some(([mark, copy]) => {
+        if (!meta.recovery?.includes(mark)) return false;
+        const kept = recoveryRecord(copy, seed);
+        return kept && same(record.data, kept.data) && same(unitOf(record), unitOf(kept));
+      });
+      if (record && !alreadyKept) recover(record);
+      record = {
+        v: 1, savedAt: new Date(now).toISOString(), id: newId(),
+        ancestry: lineage([], record, meta), data: chosen.data,
+        ...(chosen.blockeditor && { live: chosen.live, blockeditor: chosen.blockeditor }),
+      };
+      meta.unit = unitMark(unitOf(record));
+      meta.rev++;
+      out.changed = true;
+      out.restoredCopy = true;
+    }
+  }
+
   for (const [tab, entry] of Object.entries(meta.tabs)) {
     if (now - (entry.at ?? 0) > TAB_TTL_MS) {
       delete meta.tabs[tab];
@@ -285,7 +331,8 @@ export function transact(drafts, key, input, options) {
     const stored = { meta: parse(raw.meta), record: parse(raw.record), v1base: parse(raw.v1base) };
     const rows = raw.rows.map(([name, text]) => [name, parse(text)]);
     const given = input(stored);
-    const result = commit(stored, { ...given, chains: [...rows.map(([, chain]) => chain), ...(given.chains ?? [])] });
+    const copies = (raw.recovery ?? []).map(([name, text]) => [name.slice((key + ":recovery:").length), parse(text)]);
+    const result = commit(stored, { ...given, copies, chains: [...rows.map(([, chain]) => chain), ...(given.chains ?? [])] });
     const puts = [];
     const deletes = [];
     if (result.changed) {
@@ -297,7 +344,7 @@ export function transact(drafts, key, input, options) {
     if (result.conflicts.length) puts.push([conflictKey(key), JSON.stringify(result.conflicts[result.conflicts.length - 1])]);
     for (const copy of result.recovered) puts.push([recoveryKey(key, recoveryMark(copy)), JSON.stringify(copy)]);
     for (const mark of result.dropped) deletes.push(recoveryKey(key, mark));
-    for (const [name, chain] of rows) if (settled(chain, result.meta)) deletes.push(name);
+    for (const [name, chain] of rows) if (settled(chain, result.meta) || (result.removedMark && isChain(chain) && recoveryMark(chain) === result.removedMark)) deletes.push(name);
     return { puts, deletes, result };
   }, options);
 }

package/src/plugins/visitor-drafts/idb.js

@@ -138,7 +138,7 @@ function wrap(db, keyRange) {
   // `key`, hands them to `build` inside the transaction, and writes the `puts` and
   // `deletes` it returns before the transaction can complete. A `build` or a write that
   // throws aborts it, so nothing lands. Resolves with `build`'s `result` on `complete`.
-  function change(key, build, { timeout = 0 } = {}) {
+  function change(key, build, { timeout = 0, recovery = false } = {}) {
     return new Promise((resolve, reject) => {
       let tx;
       try {
@@ -167,9 +167,14 @@ function wrap(db, keyRange) {
         const store = tx.objectStore(RECORDS);
         const rows = keyRange.bound(key + ":op:", key + ":op:\uffff");
         const reads = { record: store.get(key), meta: store.get(key + ":meta"), v1base: store.get(key + ":v1base"), names: store.getAllKeys(rows), values: store.getAll(rows) };
+        const copies = recovery ? keyRange.bound(key + ":recovery:", key + ":recovery:\uffff") : null;
+        if (copies) {
+          reads.copyNames = store.getAllKeys(copies);
+          reads.copyValues = store.getAll(copies);
+        }
         // Requests in one transaction answer in the order they were made: the last one in
         // means every read is.
-        reads.values.onsuccess = () => {
+        (reads.copyValues ?? reads.values).onsuccess = () => {
           if (settled) return;
           try {
             const raw = {
@@ -177,6 +182,7 @@ function wrap(db, keyRange) {
               meta: reads.meta.result ?? null,
               v1base: reads.v1base.result ?? null,
               rows: reads.names.result.map((name, i) => [name, reads.values.result[i]]),
+              ...(copies && { recovery: reads.copyNames.result.map((name, i) => [name, reads.copyValues.result[i]]) }),
             };
             const planned = build(raw);
             for (const [name, value] of planned.puts) store.put(value, name);

package/src/plugins/visitor-drafts/recovery-menu.js

@@ -0,0 +1,118 @@
+import { COPY } from "./recovery.js";
+import { bevelBox, bevelButton, bevelText, setShown } from "../../ui/bevel-controls.js";
+import { FONT_MONO } from "../../ui/bevel.js";
+import { resolveTheme } from "../../ui/theme.js";
+import modal, { SURFACE_THEME } from "../../ui/modal.js";
+
+export function attachRecoveryMenu(shell, load) {
+  let request = 0;
+  const refresh = async () => {
+    const id = ++request;
+    try {
+      const recovery = await load();
+      const rows = recovery ? await recovery.list() : [];
+      if (id !== request) return;
+      if (!rows.length) return shell.removeItem("clay.earlier-drafts");
+      shell.addItem({ id: "clay.earlier-drafts", label: COPY.label, run: () => openRecovery(recovery, { refresh, anchor: shell.goo }).catch(() => shell.note("The drafts could not be opened. Try again.")) });
+    } catch {
+      if (id === request) shell.removeItem("clay.earlier-drafts");
+    }
+  };
+  shell.beforeOpen.push(refresh);
+  refresh();
+  return refresh;
+}
+
+export async function openRecovery(recovery, { refresh = () => {}, anchor = document.activeElement } = {}) {
+  const theme = resolveTheme();
+  const box = bevelBox("div", ["display:flex", "flex-direction:column", "gap:16px"], { theme, parts: ["dialog.content"] });
+  box.dataset.draftCopies = "";
+  box.append(bevelText("p", ["display:block", "margin:0"], COPY.intro, { theme }));
+  const status = bevelText("p", ["display:block", "margin:0"], "", { theme });
+  status.setAttribute("role", "status");
+  const list = bevelBox("ol", ["display:flex", "flex-direction:column", "gap:16px", "padding:0", "margin:0", "list-style:none"], { theme });
+  box.append(status, list);
+  let busy = false;
+
+  async function draw() {
+    const rows = await recovery.list();
+    list.replaceChildren();
+    if (!rows.length) status.textContent = "No earlier drafts are kept.";
+    for (const row of rows) {
+      const item = bevelBox("li", ["display:flex", "flex-direction:column", "gap:8px"], { theme });
+      item.dataset.draftMark = row.mark;
+      const date = new Date(row.savedAt);
+      const when = Number.isNaN(date.getTime()) ? "Time unavailable" : date.toLocaleString();
+      const time = bevelText("time", ["display:block", `font-family:${FONT_MONO}`], when, { theme });
+      if (row.savedAt) time.dateTime = row.savedAt;
+      item.append(time, bevelText("p", ["display:block", "margin:0"], `${row.fields} saved ${row.fields === 1 ? "field" : "fields"}`, { theme, role: "mutedText" }));
+      const actions = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px"], { theme });
+      const preview = bevelBox("div", ["display:block"], { theme });
+      setShown(preview, false);
+      const confirm = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px", "align-items:center"], { theme });
+      setShown(confirm, false);
+      const action = (label, fn, options = {}) => {
+        const button = bevelButton(label, { small: true, theme, ...options, onClick: async () => {
+          if (busy) return;
+          busy = true;
+          button.setDisabled(true);
+          status.textContent = "";
+          try { await fn(button); }
+          catch (error) { status.textContent = error.message || "That did not work. Try again."; }
+          finally { busy = false; button.setDisabled(false); }
+        } });
+        button.setAttribute("aria-label", `${label}: ${when}`);
+        return button;
+      };
+      const open = action("Preview", () => {
+        if (!preview.hidden) { setShown(preview, false); open.setAttribute("aria-expanded", "false"); return; }
+        const doc = new DOMParser().parseFromString(recovery.html(row.copy), "text/html");
+        for (const el of doc.querySelectorAll('script, meta[http-equiv="refresh" i]')) el.remove();
+        for (const el of doc.querySelectorAll("input, textarea, select, button")) el.disabled = true;
+        for (const el of doc.querySelectorAll("[contenteditable]")) el.removeAttribute("contenteditable");
+        for (const el of doc.querySelectorAll("a, area")) {
+          el.removeAttribute("href");
+          el.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+          el.removeAttribute("xlink:href");
+        }
+        const policy = doc.createElement("meta");
+        policy.httpEquiv = "Content-Security-Policy";
+        policy.content = "default-src 'none'; style-src 'unsafe-inline'; img-src data: blob:; form-action 'none'";
+        doc.head.prepend(policy);
+        const frame = bevelBox("iframe", ["display:block", "width:100%", "height:45vh", "border:0"], { theme });
+        frame.title = `Draft preview: ${when}`;
+        frame.setAttribute("sandbox", "");
+        frame.srcdoc = "<!DOCTYPE html>\n" + doc.documentElement.outerHTML;
+        preview.replaceChildren(frame);
+        setShown(preview, true);
+        open.setAttribute("aria-expanded", "true");
+      });
+      open.setAttribute("aria-expanded", "false");
+      const restore = action("Restore", async () => { await recovery.restore(row.mark); status.textContent = "Draft restored. Reloading the page."; await refresh(); });
+      const download = action("Download", () => recovery.download(row.copy));
+      for (const button of [open, restore, download]) button.setDisabled(!row.available);
+      const remove = action("Remove", () => { setShown(confirm, true, "flex"); cancel.focus(); });
+      const cancel = bevelButton("Keep draft", { small: true, theme, onClick: () => { setShown(confirm, false); remove.focus(); } });
+      confirm.append(bevelText("p", ["margin:0"], "Remove this saved draft?", { theme }), cancel, action("Remove draft", async () => {
+        await recovery.remove(row.mark);
+        await draw();
+        await refresh();
+        list.querySelector("button")?.focus();
+      }, { variant: "danger" }));
+      actions.append(open, restore, download, remove);
+      item.append(actions, confirm, preview);
+      list.append(item);
+    }
+  }
+
+  await draw();
+  modal.title = COPY.label;
+  modal.html = box;
+  modal.width = "720px";
+  modal[SURFACE_THEME] = theme;
+  modal.closeHtml = "x";
+  modal.no = "Close";
+  modal.onNo(() => anchor?.focus());
+  modal.open();
+  return box;
+}

package/src/plugins/visitor-drafts/recovery.js

@@ -0,0 +1,64 @@
+import { applyData, extractData } from "../../vendor/hyper-html-api-data.vendor.js";
+import { finalizeControlForSave } from "../../vendor/control-serialize.vendor.js";
+import { downloadHtml, documentName } from "../../core/download.js";
+
+export const COPY = {
+  label: "Earlier drafts",
+  intro: "This page kept your earlier drafts aside, listed by time.",
+};
+
+export function createRecovery({ store, session, getHTML = () => window.clay.getHTML(), download = downloadHtml }) {
+  const recordOf = (copy) => session.recoveryRecord(copy);
+  const savedAt = (copy) => copy?.savedAt ?? copy?.ops?.at(-1)?.savedAt ?? (copy?.at ? new Date(copy.at).toISOString() : null);
+
+  async function list() {
+    const rows = await session.listRecovery();
+    return rows.map(({ mark, copy }) => {
+      const record = recordOf(copy);
+      const fields = copy?.ops ? new Set(copy.ops.flatMap((op) => Object.keys(op.keys ?? {}))).size : Object.keys(record?.data ?? {}).length;
+      return { mark, copy, savedAt: savedAt(copy), fields, available: Boolean(record) };
+    }).sort((a, b) => (Date.parse(b.savedAt) || 0) - (Date.parse(a.savedAt) || 0));
+  }
+
+  function html(copy) {
+    const record = recordOf(copy);
+    if (!record) throw new Error("This draft cannot be opened by this version.");
+    const doc = new DOMParser().parseFromString(getHTML(), "text/html");
+    applyData(doc, store.seed(), store.rules);
+    applyData(doc, record.data, store.rules);
+    if (!store.fitsInto(record.data, extractData(doc, store.rules))) throw new Error("This draft no longer fits the page. Its saved copy is still kept.");
+    const unit = record.blockeditor ? record : store.servedUnit();
+    const article = doc.querySelector("article[data-blockeditor]");
+    if (unit) {
+      if (!article) throw new Error("This draft's page editor is no longer available.");
+      for (const tag of doc.querySelectorAll('script[type="application/json"][merge][clay~="live"]')) tag.remove();
+      for (const [name, value] of Object.entries(unit.live)) {
+        const tag = doc.createElement("script");
+        tag.type = "application/json";
+        tag.setAttribute("merge", name);
+        tag.setAttribute("clay", "live");
+        tag.textContent = JSON.stringify(value).replace(/</g, "\\u003c");
+        article.before(tag);
+      }
+      article.setAttribute("data-rev", unit.blockeditor.rev);
+      article.innerHTML = unit.blockeditor.html;
+    }
+    for (const control of doc.querySelectorAll('input:not([type="password"]):not([type="file"]), textarea, select')) finalizeControlForSave(control);
+    return "<!DOCTYPE html>\n" + doc.documentElement.outerHTML;
+  }
+
+  async function downloadCopy(copy) {
+    const ok = await download({ html: html(copy), name: documentName() + ".htmlclay" });
+    if (!ok) throw new Error("The download could not be made. Try again.");
+    return true;
+  }
+
+  async function restore(mark) {
+    const row = (await list()).find((row) => row.mark === mark);
+    if (!row) throw new Error("That draft is no longer available. Open the list again.");
+    html(row.copy);
+    return session.restoreRecovery(mark);
+  }
+
+  return { list, html, download: downloadCopy, restore, remove: (mark) => session.removeRecovery(mark) };
+}

package/src/plugins/visitor-drafts/session.js

@@ -20,7 +20,7 @@
  */
 
 import { openDrafts } from "./idb.js";
-import { emptyMeta, foreignMark, isForeign, markerFor, markerGen, recoveryKey, recoveryMark, rowKey, settled, transact } from "./commit.js";
+import { emptyMeta, foreignMark, isChain, isForeign, markerFor, markerGen, recoveryKey, recoveryMark, recoveryRecord, rowKey, settled, transact } from "./commit.js";
 import { setDraftStoreFailed } from "../../core/draft-mode.js";
 
 export const FULL_COPY_LIMIT = 256 * 1024;
@@ -91,6 +91,7 @@ export async function openSession({ store, storage, doc = document, now = () =>
   let sent = null;
   let carried = 0;
   let retiring = false;
+  let restoringCopy = false;
   let shownId = store.held()?.id;
   // The latest full cache copy this tab saw at the key, and the text of another writer's
   // record a storage event says replaced it: such a record merges from that copy.
@@ -127,6 +128,7 @@ export async function openSession({ store, storage, doc = document, now = () =>
       seed: store.seed(),
       newId: store.newId,
       merge3: store.merge3,
+      same: store.same,
       unitMark: store.unitMark,
       now: now(),
       marker: held,
@@ -139,12 +141,12 @@ export async function openSession({ store, storage, doc = document, now = () =>
   }
 
   // Another tab's slot is removed once nothing more can come of it and its tab has gone quiet.
-  function sweep(meta) {
+  function sweep(meta, removedMark) {
     const at = now();
     for (const name of store.journalSlots()) {
       if (name === store.slotKey) continue;
       const chain = parse(read(name));
-      if (settled(chain, meta) && at - (chain?.at ?? 0) > SLOT_AGE_MS) remove(name);
+      if ((removedMark && isChain(chain) && recoveryMark(chain) === removedMark) || (settled(chain, meta) && at - (chain?.at ?? 0) > SLOT_AGE_MS)) remove(name);
     }
   }
 
@@ -169,20 +171,26 @@ export async function openSession({ store, storage, doc = document, now = () =>
     try { storage.setItem(key, headOf(record, w)); } catch {}
   }
 
+  async function stopWithPending() {
+    store.stop({ keepPending: true });
+    if (store.unsafe()) {
+      try { await drafts.putRow(rowKey(key, store.tab), JSON.stringify(store.chain())); }
+      catch (error) { throw store.failed(error); }
+      store.acknowledge(store.chain().ops.at(-1)?.seq ?? 0);
+    }
+  }
+
   // Operations captured after the transaction read stay journaled for the next load.
   async function ended(result) {
+    try { store.captureLate(); }
+    catch (error) { throw store.failed(error); }
     retiring = true;
     const chain = store.chain();
     const mark = recoveryMark(chain);
     const kept = chain.ops.some((op) => op.seq > carried) || result.meta.recovery?.includes(mark)
       ? mark : result.meta.recovery?.includes(shownId) ? shownId : null;
     store.acknowledge(carried);
-    store.stop({ keepPending: true });
-    if (store.unsafe()) {
-      try { await drafts.putRow(rowKey(key, store.tab), JSON.stringify(store.chain())); }
-      catch (error) { throw store.failed(error); }
-      store.acknowledge(store.chain().ops.at(-1)?.seq ?? 0);
-    }
+    await stopWithPending();
     cache(result);
     if (kept) rememberRecovery(kept);
     const held = store.held();
@@ -277,13 +285,14 @@ export async function openSession({ store, storage, doc = document, now = () =>
     gen = meta.gen;
     rememberGeneration(meta.reset);
     const saved = store.acknowledge(meta.tabs[store.tab]?.seq ?? 0);
-    sweep(meta);
+    sweep(meta, result.removedMark);
     cache(result);
     if (store.pending()) return result;
     if (saved) {
       setDraftStoreFailed(false);
       doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data: record.data } }));
     }
+    if (restoringCopy) return result;
     if (!store.shown()) {
       rev = meta.rev;
       return result;
@@ -303,8 +312,15 @@ export async function openSession({ store, storage, doc = document, now = () =>
   // so it carries every operation made before then.
   let active = null;
   let waiting = null;
-  function run(options) {
-    active = transact(drafts, key, input, options).then(took, (error) => {
+  function run(options, recovery = null) {
+    const given = () => {
+      if (recovery?.type === "restore") {
+        if (store.stopped()) throw new Error("This page has started over. Reload it before restoring a draft.");
+        store.captureNow();
+      }
+      return { ...input(), recovery };
+    };
+    active = transact(drafts, key, given, options).then(took, (error) => {
       throw store.pending() ? store.failed(error) : error;
     }).finally(() => { active = null; });
     return active;
@@ -318,6 +334,38 @@ export async function openSession({ store, storage, doc = document, now = () =>
     });
     return waiting;
   }
+  async function changeRecovery(recovery) {
+    while (active || waiting) await (waiting ?? active).catch(() => {});
+    return run({ recovery: true }, recovery);
+  }
+
+  async function restoreRecovery(mark) {
+    if (restoringCopy) throw new Error("A draft is already being restored.");
+    restoringCopy = true;
+    try {
+      if (store.stopped()) throw new Error("This page has started over. Reload it before restoring a draft.");
+      store.captureNow();
+      let result;
+      do {
+        result = await changeRecovery({ type: "restore", mark, reset: store.generation() });
+        if (!result.restoredCopy || store.stopped()) throw new Error("This page has started over. Reload it before restoring a draft.");
+      } while (store.pending());
+      // This tab's pre-restore page is retired without ending the other tabs' generation.
+      try { store.captureLate("restored:" + store.tab); }
+      catch (error) { throw store.failed(error); }
+      await stopWithPending();
+      reload();
+      return result;
+    } finally { restoringCopy = false; }
+  }
+
+  async function listRecovery() {
+    await first.catch(() => {});
+    const prefix = key + ":recovery:";
+    const rows = await drafts.readAll(key);
+    return [...rows].filter(([name]) => name.startsWith(prefix)).map(([name, raw]) => ({ mark: name.slice(prefix.length), copy: parse(raw) }));
+  }
+
   const quietly = () => { sync().catch(() => {}); };
 
   // At a hide, an operation too large for the journal slot goes into the database blind, with
@@ -341,5 +389,5 @@ export async function openSession({ store, storage, doc = document, now = () =>
 
   const first = run({ timeout: FIRST_TRANSACTION_TIMEOUT_MS });
   first.catch(() => {});
-  return { first, sync, hide, startOver };
+  return { first, sync, hide, startOver, listRecovery, restoreRecovery, recoveryRecord: (copy) => recoveryRecord(copy, store.seed()), removeRecovery: (mark) => changeRecovery({ type: "remove", mark }) };
 }

package/src/plugins/visitor-drafts/store.js

@@ -1,5 +1,5 @@
 import { extractData, applyData, engine } from "../../vendor/hyper-html-api-data.vendor.js";
-import { draftSlot, setDraftStoreFailed } from "../../core/draft-mode.js";
+import { draftGate, draftSlot, setDraftStoreFailed } from "../../core/draft-mode.js";
 
 export const KEY_PREFIX = "clay:visitor-drafts:";
 export const RECORD_VERSION = 1;
@@ -73,6 +73,7 @@ export function same(a, b) {
 
 const STORE_SEL = 'script[type="application/json"][merge][clay~="live"]';
 const ARTICLE_SEL = "article[data-blockeditor]";
+const HANDLER_SEL = "[onbeforesave], [onbeforesnapshot]";
 const isPagePart = (name) => name === "blockeditor" || /^blockeditor\.\d+$/.test(name);
 const canonical = (live) => JSON.stringify(Object.keys(live).sort().map((name) => [name, live[name]]));
 
@@ -269,7 +270,7 @@ function withoutSiteKey(value) {
   return rest;
 }
 
-export function createStore({ doc = document, storage = safeStorage(), now = () => new Date(), path = draftPath(), fallback = null, slotLimit = SLOT_LIMIT, pendingLimit = PENDING_LIMIT } = {}) {
+export function createStore({ doc = document, storage = safeStorage(), gate = draftGate, now = () => new Date(), path = draftPath(), fallback = null, slotLimit = SLOT_LIMIT, pendingLimit = PENDING_LIMIT } = {}) {
   const slot = draftSlot(doc);
   const key = draftKey(slot, path);
   const rules = withoutSiteKey(engine.findRulesIn(doc, "api").rules);
@@ -610,16 +611,46 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   // to `localStorage` after it made some.
   let before = null;
 
-  function capture(html) {
+  // The dirty gate's token for the snapshot `base` was last compared with: taken before
+  // that snapshot, in its task. Null while that is not known.
+  let capturedAt = null;
+
+  const pageOf = (html) => (html === undefined ? doc : new DOMParser().parseFromString(html, "text/html"));
+
+  // `at` is the gate token of the snapshot `html` was serialized from.
+  function capture(html, { reset = tab.reset, at = null } = {}) {
+    if (stopped) return null;
+    const parsed = pageOf(html);
+    const op = captureData(extractData(parsed, rules), recordable(readUnit(parsed)), reset);
+    capturedAt = at;
+    return op;
+  }
+
+  // The page as it is now.
+  function captureNow(reset = tab.reset) {
+    if (stopped) return null;
+    const at = gate()?.token() ?? null;
+    return capture(window.clay.getHTML(), { reset, at });
+  }
+
+  // The last capture of a generation that has ended. A capture runs the page's save
+  // handlers, and a handler that writes a changing value makes a field differ with no
+  // edit behind it. So on a page with a save handler that has recorded no edit since
+  // `base` was captured, the fields are what `base` holds, and only the page editor's
+  // part, which no handler writes, is compared.
+  function captureLate(reset = tab.reset) {
     if (stopped) return null;
+    const settled = capturedAt !== null && doc.querySelector(HANDLER_SEL) !== null && gate()?.unchangedSince(capturedAt) === true;
+    const parsed = pageOf(window.clay?.getHTML?.());
+    return captureData(settled ? base : extractData(parsed, rules), recordable(readUnit(parsed)), reset);
+  }
+
+  function captureData(mine, mineUnit, reset = tab.reset) {
     if (unparked != null && park(unparked, { keepSlot: true }) === null) {
       throw storageFailure(doc, new Error("an earlier saved copy could not be kept aside"));
     }
     // Too much is waiting: nothing more is taken until it drains, and the page keeps it.
     if (tab.sizes.reduce((sum, size) => sum + size, 0) >= pendingLimit) throw storageFailure(doc, new Error("too many changes are waiting to be saved"));
-    const parsed = new DOMParser().parseFromString(html, "text/html");
-    const mine = extractData(parsed, rules);
-    const mineUnit = recordable(readUnit(parsed));
     const unitChanged = !sameUnit(mineUnit, editorUnit);
     const keys = {};
     for (const name of Object.keys(mine)) {
@@ -644,6 +675,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     }
     if (unitChanged) editorUnit = seenUnit = mineUnit;
     fresh = false;
+    tab.reset = reset;
     tab.ops.push(op);
     tab.sizes.push(JSON.stringify(op).length);
     journal();
@@ -655,7 +687,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   function keep() {
     if (stopped) return true;
     try {
-      if (changed()) capture(window.clay.getHTML());
+      if (changed()) captureNow();
     } catch { return false; }
     return tab.journaled === tab.seq;
   }
@@ -680,6 +712,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   // unsaved changes, for `write` to save.
   function release() {
     if (tab.ops.length) ({ base, editorUnit, seenUnit } = before);
+    capturedAt = null;
     drop();
   }
 
@@ -815,8 +848,11 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
 
   return {
     slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, externalUnit, adoptedUnit, park, clear, snapshot,
-    tab: tab.id, slotKey, chain, capture, keep, acknowledge, release, take, stop, journalSlots,
+    tab: tab.id, slotKey, chain, capture, captureNow, captureLate, keep, acknowledge, release, take, stop, journalSlots,
     seed: seedData,
+    servedUnit: () => { readServed(); return served; },
+    fitsInto,
+    same,
     // For the session, which is fetched after the boot and imports nothing from here.
     merge3,
     unitMark,