@panphora/clayjs 1.24.0 → 1.25.0

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

@@ -1,9 +1,21 @@
 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;
 const LINEAGE = 32;
+// What one tab's journal slot in `localStorage` may hold, and what its unconfirmed
+// operations may hold in memory, in characters of JSON.
+export const SLOT_LIMIT = 512 * 1024;
+export const PENDING_LIMIT = 16 * 1024 * 1024;
+
+export const newRecordId = () => Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+
+function textMark(text) {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < text.length; i++) hash = Math.imul(hash ^ text.charCodeAt(i), 0x01000193);
+  return (hash >>> 0).toString(36) + "." + text.length.toString(36);
+}
 
 // The document a pathname names, spelled the way the hosts resolve it: the path up to
 // and including the first segment that ends in .html or .htmlclay (anything after it is
@@ -55,12 +67,13 @@ export function fitsInto(wanted, got) {
   return wanted === got;
 }
 
-function same(a, b) {
+export function same(a, b) {
   return fitsInto(a, b) && fitsInto(b, a);
 }
 
 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]]));
 
@@ -78,6 +91,9 @@ function readUnit(source) {
 
 const sameUnit = (a, b) => (!a || !b ? a === b : a.blockeditor.rev === b.blockeditor.rev && canonical(a.live) === canonical(b.live));
 
+// One page content, one mark: two pages `sameUnit` calls the same carry the same one.
+export const unitMark = (unit) => (isPlain(unit?.live) && isPlain(unit?.blockeditor) ? `${unit.blockeditor.rev}:${textMark(canonical(unit.live))}` : null);
+
 function unitOf(record) {
   if (!isPlain(record?.live) || !isPlain(record?.blockeditor)) return null;
   const { live, blockeditor } = record;
@@ -189,7 +205,7 @@ export function merge3(base, mine, theirs) {
   return merged;
 }
 
-function storageFailure(doc, error) {
+export function storageFailure(doc, error) {
   setDraftStoreFailed(true);
   doc.dispatchEvent(new CustomEvent("clay:drafts-store-failed", { detail: { error } }));
   const failure = new Error("Couldn't save in this browser. Storage is full or turned off.");
@@ -254,13 +270,20 @@ function withoutSiteKey(value) {
   return rest;
 }
 
-export function createStore({ doc = document, storage = safeStorage(), now = () => new Date(), path = draftPath(), fallback = null } = {}) {
+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);
 
   let lastRaw = null;
   let base = null;
+  // The served page's data, read before any restore, and the stored data this tab's next
+  // operation is built on: the record it restored or last took in with its own operations
+  // laid over, or the served page's while nothing is stored.
+  let seed = null;
+  let tip = null;
+  // Nothing of a draft is on this page yet: no restore, no operation, nothing taken in.
+  let fresh = true;
   let unparked = null;
   let stopped = false;
   // This tab's own last write: its record id, its ancestry, and the data of the record it
@@ -317,7 +340,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     return true;
   }
 
-  const newId = () => Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+  const newId = newRecordId;
 
   // A record's ancestry is the ids it descends from, nearest first, ending at the empty
   // slot it grew from, or at a record from a runtime that kept no ids, named by its bytes.
@@ -328,11 +351,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     try { return "root:" + (storage?.getItem(resetKey) ?? ""); } catch { return "root:"; }
   }
 
-  function legacyId(raw) {
-    let hash = 0x811c9dc5;
-    for (let i = 0; i < raw.length; i++) hash = Math.imul(hash ^ raw.charCodeAt(i), 0x01000193);
-    return "legacy:" + (hash >>> 0).toString(36) + "." + raw.length.toString(36);
-  }
+  const legacyId = (raw) => "legacy:" + textMark(raw);
 
   function lineageOf(record, raw) {
     if (!record) return null;
@@ -456,31 +475,37 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     return null;
   }
 
-  function parkedResult(raw) {
+  function parkedResult({ raw, record }) {
     const parkedKey = park(raw);
     if (!parkedKey) lastRaw = raw;
     base = live();
+    tip = record?.data ?? base;
     return parkedKey
       ? { restored: false, hadDraft: true, parked: true }
       : { restored: false, hadDraft: true, parked: false, blocked: true };
   }
 
-  function restore() {
-    const found = read();
+  const seedData = () => (seed ??= live());
+
+  // `found` is the record to put on the page: the one `localStorage` holds, or the
+  // database's when the page waited for it (null: it holds none).
+  function restore(found = read()) {
+    seedData();
     if (!found) {
-      base = live();
+      base = tip = seed;
       whenArticle(readServed);
       return { restored: false, hadDraft: false };
     }
-    if (!found.record) return parkedResult(found.raw);
+    fresh = false;
+    if (!found.record) return parkedResult(found);
     const unit = unitOf(found.record);
     const hasData = Object.keys(found.record.data).length > 0;
     const fitted = hasData ? fit(found.record.data) : { data: {}, dropped: [] };
     const dataFits = Boolean(fitted) && (!hasData || Object.keys(fitted.data).length > 0);
     // The page does not depend on the rules: a page is placed even when no saved field fits,
     // and the whole record is kept aside as well.
-    if (!unit && !dataFits) return parkedResult(found.raw);
-    if (!unit && !hasData) return parkedResult(found.raw);
+    if (!unit && !dataFits) return parkedResult(found);
+    if (!unit && !hasData) return parkedResult(found);
     if (hasData && dataFits) applyData(doc, fitted.data, rules);
     if (unit) {
       whenArticle(() => {
@@ -493,6 +518,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     }
     lastRaw = found.raw;
     base = live();
+    tip = found.record.data;
     if (!dataFits || fitted.dropped.length) {
       const parkedKey = park(found.raw, { keepSlot: true });
       return { restored: true, hadDraft: true, data: dataFits ? fitted.data : {}, partial: true, parked: Boolean(parkedKey), blocked: !parkedKey };
@@ -552,6 +578,165 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     return fitted.data;
   }
 
+  // With the database as the record, a save is an operation: for each key the page changed,
+  // the stored value it was built on (`b`, absent when nothing was) and the value now (`m`).
+  // `tab.ops` are the ones the database has not confirmed, oldest first, under the Start
+  // over marker this page booted on; `sizes` runs beside them. A copy that fits goes into
+  // this tab's journal slot at once, so closing the tab loses nothing: `journaled` is the
+  // last sequence number the slot holds.
+  const tab = { id: newId(), reset: "", acked: 0, seq: 0, journaled: 0, ops: [], sizes: [] };
+  try { tab.reset = storage?.getItem(resetKey) ?? ""; } catch {}
+  try {
+    const known = JSON.parse(window.sessionStorage.getItem(key + ":generation"));
+    if (known?.marker === tab.reset && typeof known.reset === "string") tab.reset = known.reset;
+  } catch {}
+  const slotKey = `${key}:op:${tab.id}`;
+  const chain = () => ({ tab: tab.id, reset: tab.reset, acked: tab.acked, at: now().getTime(), ops: tab.ops });
+
+  function journal() {
+    try {
+      if (!tab.ops.length) {
+        tab.journaled = tab.seq;
+        storage.removeItem(slotKey);
+        return;
+      }
+      const text = JSON.stringify(chain());
+      if (text.length > slotLimit) return;
+      storage.setItem(slotKey, text);
+      tab.journaled = tab.seq;
+    } catch {}
+  }
+
+  // What the page held before its unconfirmed operations, for a page load that falls back
+  // to `localStorage` after it made some.
+  let before = null;
+
+  // 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 unitChanged = !sameUnit(mineUnit, editorUnit);
+    const keys = {};
+    for (const name of Object.keys(mine)) {
+      if (name in base && fitsInto(mine[name], base[name])) continue;
+      // Fields the stored value has and this page's rules lack are carried through.
+      keys[name] = name in tip ? { b: tip[name], m: complete(mine[name], tip[name]) } : { m: mine[name] };
+    }
+    if (!Object.keys(keys).length && !unitChanged) {
+      if (!tab.ops.length) {
+        setDraftStoreFailed(false);
+        doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data: mine, unchanged: true } }));
+      }
+      return null;
+    }
+    if (!tab.ops.length) before = { base, editorUnit, seenUnit };
+    const op = { seq: ++tab.seq, savedAt: now().toISOString(), keys, ...(unitChanged && { unit: { seen: unitMark(seenUnit), to: mineUnit } }) };
+    base = { ...base };
+    tip = { ...tip };
+    for (const name of Object.keys(keys)) {
+      base[name] = mine[name];
+      tip[name] = keys[name].m;
+    }
+    if (unitChanged) editorUnit = seenUnit = mineUnit;
+    fresh = false;
+    tab.reset = reset;
+    tab.ops.push(op);
+    tab.sizes.push(JSON.stringify(op).length);
+    journal();
+    return op;
+  }
+
+  // A hide's synchronous half of a save. False while an operation is neither in the
+  // journal slot nor confirmed: closing the tab now could lose it.
+  function keep() {
+    if (stopped) return true;
+    try {
+      if (changed()) captureNow();
+    } catch { return false; }
+    return tab.journaled === tab.seq;
+  }
+
+  function acknowledge(seq) {
+    if (seq <= tab.acked) return false;
+    tab.acked = seq;
+    const done = tab.ops.filter((op) => op.seq <= seq).length;
+    tab.ops.splice(0, done);
+    tab.sizes.splice(0, done);
+    journal();
+    return done > 0;
+  }
+
+  function drop() {
+    tab.ops.length = 0;
+    tab.sizes.length = 0;
+    journal();
+  }
+
+  // The database did not open: what the journal holds goes back to being this page's
+  // unsaved changes, for `write` to save.
+  function release() {
+    if (tab.ops.length) ({ base, editorUnit, seenUnit } = before);
+    capturedAt = null;
+    drop();
+  }
+
+  // A page with nothing unsaved takes in what the database holds: the keys whose stored
+  // value is no longer the one this tab was built on.
+  function take(data) {
+    const moved = Object.fromEntries(Object.entries(data).filter(([name, value]) => !same(value, tip[name])));
+    if (!Object.keys(moved).length) return false;
+    const shown = adopt(moved);
+    tip = { ...tip, ...moved };
+    if (shown) base = { ...base, ...shown };
+    fresh = false;
+    return true;
+  }
+
+  // The generation this page shows has ended, by this tab's Start over or another tab's:
+  // nothing more is saved from it.
+  function stop({ keepPending = false } = {}) {
+    stopped = true;
+    if (!keepPending) drop();
+  }
+
+  const journalSlots = () => storedKeys().filter((name) => name.startsWith(key + ":op:"));
+
   function write(html) {
     if (stopped) return null;
     if (unparked != null && park(unparked, { keepSlot: true }) === null) {
@@ -578,7 +763,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     const id = newId();
     const raw = stored && sameUnit(unit, theirs)
       ? stored
-      : JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), id, ancestry, data, ...(unit && { live: unit.live, blockeditor: unit.blockeditor }) });
+      : JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), id, ancestry, reset: tab.reset, data, ...(unit && { live: unit.live, blockeditor: unit.blockeditor }) });
     if (raw !== stored) {
       try {
         if (!storage) throw new Error("no storage");
@@ -634,11 +819,15 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     return true;
   }
 
-  // The page another tab recorded since this tab last read or wrote one, or null.
-  function externalUnit() {
+  // The page another tab recorded since this tab last read or wrote one, or null. `record`
+  // is the database's; without one the copy in `localStorage` is read.
+  function externalUnit(record) {
     if (stopped) return null;
-    const raw = getRaw();
-    const theirs = raw == null ? null : unitOf(parse(raw));
+    if (record === undefined) {
+      const raw = getRaw();
+      record = raw == null ? null : parse(raw);
+    }
+    const theirs = unitOf(record);
     return theirs && !sameUnit(theirs, seenUnit) ? theirs : null;
   }
 
@@ -648,12 +837,43 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   }
 
   function clear() {
-    stopped = true;
+    stop();
     unparked = null;
     setDraftStoreFailed(false);
     try { storage.removeItem(key); } catch {}
-    try { storage.setItem(resetKey, newId()); } catch {}
-  }
-
-  return { slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, externalUnit, adoptedUnit, park, clear, snapshot };
+    const match = /^(\d+)~/.exec(tab.reset);
+    const gen = match ? Number(match[1]) : tab.reset === "" ? 1 : null;
+    try { storage.setItem(resetKey, gen === null ? newId() : `${gen + 1}~${newId()}`); } catch {}
+  }
+
+  return {
+    slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, externalUnit, adoptedUnit, park, clear, snapshot,
+    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,
+    newId,
+    failed: (error) => storageFailure(doc, error),
+    generation: () => tab.reset,
+    enter: (reset) => { tab.reset = reset; },
+    fresh: () => fresh,
+    shown: () => base !== null,
+    pending: () => tab.ops.length,
+    unsafe: () => tab.journaled < tab.seq,
+    stopped: () => stopped,
+    // What `localStorage` holds at the draft's key, whatever wrote it: a record, the head of
+    // a draft whose full record is only in the database (`idb`), or nothing readable.
+    held() {
+      try {
+        const held = JSON.parse(getRaw());
+        return isPlain(held) ? held : null;
+      } catch { return null; }
+    },
+    // A draft is kept when `localStorage` holds its copy or head, or any tab's journal.
+    kept: () => Boolean(read()) || tab.ops.length > 0 || journalSlots().length > 0,
+  };
 }

package/src/plugins/visitor-drafts.js

@@ -1,17 +1,38 @@
 import { isDraftMode, isEditMode, isOwner } from "../core/is-edit-mode.js";
 import { hasSaveToken } from "../core/host-attrs.js";
-import { draftSlot, setDraftTransport, setDraftFlush } from "../core/draft-mode.js";
-import { createStore, adoptLegacy, draftPath, legacyKey, safeStorage } from "./visitor-drafts/store.js";
+import { draftGate, draftSlot, draftStoreFailed, setDraftTransport, setDraftFlush, setDraftUnconfirmed } from "../core/draft-mode.js";
+import { reloadAfterDiscard } from "../core/unsaved-warning.js";
+import { createStore, adoptLegacy, draftPath, legacyKey, safeStorage, storageFailure } from "./visitor-drafts/store.js";
 import { createUiMemory } from "./visitor-drafts/ui-memory.js";
 import { rememberSource, downloadUrl } from "./visitor-drafts/source.js";
 import { mountPrompt } from "./visitor-drafts/prompt.js";
 import { DOWNLOAD_URL, backToDraft, editOriginal, inertVisitorDrafts } from "./visitor-drafts/inert.js";
 
 let store = null;
+// This tab's side of the draft database, once it has opened. Without one, `localStorage`
+// holds the record for this page load, as it did before the database.
+let session = null;
+let direct = true;
+let database = false;
+let opening = Promise.resolve();
+// The database did not open and the full draft is only there: nothing is saved over it
+// for the rest of this page load.
+let refused = false;
 let restoredDetail = null;
 let downloadLink = DOWNLOAD_URL;
 let source = null;
 let ready = Promise.resolve();
+// Settles once the draft is on the page. Already settled for a first visit and for a
+// draft `localStorage` holds in full; the loader awaits it before the next plugin loads.
+let restoring = Promise.resolve();
+// The synchronous half of a save: false while something this tab changed is neither
+// stored nor in its journal slot.
+let keep = () => true;
+// A promise while the page's last changes are not yet where the download page reads them,
+// null once they are.
+let settle = () => null;
+// Past this deadline the download uses this page's current HTML.
+const DOWNLOAD_WAIT_MS = 3000;
 
 // The chip is a convenience: a failed import leaves the draft working without it.
 function mountChip() {
@@ -41,28 +62,102 @@ const rulesTag = document.querySelector('script[data-rules-name~="api"]');
 if (isDraftMode && slot && rulesTag) {
   const path = draftPath();
   const moved = adoptLegacy(slot, { path });
+  const local = safeStorage();
   store = createStore({ path, fallback: moved === "failed" ? legacyKey(slot) : null });
-  setDraftTransport((html) => store.write(html));
-  const result = store.restore();
-  restoredDetail = { restored: result.restored, hadDraft: result.hadDraft, parked: Boolean(result.parked), ...(result.partial && { partial: true }), ...(result.blocked && { blocked: true }) };
-  document.dispatchEvent(new CustomEvent("clay:drafts-restored", { detail: restoredDetail }));
-  const memory = createUiMemory(store.key, safeStorage());
+  direct = !(typeof globalThis.indexedDB?.open === "function" && globalThis.IDBKeyRange);
+  database = !direct;
+  // The session loads beside the database open, off the path of a draft `localStorage` holds
+  // in full. Until it is there a save still makes its operation and journals it.
+  opening = direct ? Promise.resolve() : import("./visitor-drafts/session.js")
+    .then((m) => m.openSession({ store, storage: local, reload: () => reloadAfterDiscard({ isCurrent: () => true, reload: () => window.location.reload() }) }))
+    .then((opened) => { session = opened; }, () => { direct = true; });
+
+  setDraftTransport((html, at = null) => {
+    const recapture = !restoredDetail;
+    return restoring.then(() => {
+      if (refused) throw storageFailure(document, new Error("the draft database did not open"));
+      if (recapture) [at, html] = [draftGate()?.token() ?? null, window.clay.getHTML()];
+      if (direct) return void store.write(html);
+      store.capture(html, { at });
+      return opening.then(() => {
+        if (session) return session.sync().then(() => {});
+        store.write(html);
+      });
+    });
+  });
+
+  const memory = createUiMemory(store.key, local);
   source = rememberSource(memory);
   downloadLink = downloadUrl(source);
-  const appName = document.querySelector('meta[name="application-name"]')?.content?.trim() || document.title.split(/:|\s\|\s/)[0].trim() || "This app";
-  const template = document.querySelector("template[visitor-intro]");
-  const start = () => {
-    ready = mountPrompt({ memory, appName, link: downloadLink }).then((prompt) => mountIntroLate({ memory, template, appName, hadDraft: result.hadDraft }).then(() => prompt)).then((prompt) => {
-      document.addEventListener("clay:drafts-store-failed", () => prompt.showError());
-      document.addEventListener("clay:drafts-saved", () => prompt.clearError());
-      return (isOwner ? mountChip() : Promise.resolve(null)).then(() => prompt);
-    });
+
+  function finish(result) {
+    restoredDetail = { restored: result.restored, hadDraft: result.hadDraft, parked: Boolean(result.parked), ...(result.partial && { partial: true }), ...(result.blocked && { blocked: true }) };
+    document.dispatchEvent(new CustomEvent("clay:drafts-restored", { detail: restoredDetail }));
+    const appName = document.querySelector('meta[name="application-name"]')?.content?.trim() || document.title.split(/:|\s\|\s/)[0].trim() || "This app";
+    const template = document.querySelector("template[visitor-intro]");
+    const start = () => {
+      ready = mountPrompt({ memory, appName, link: downloadLink, settle: () => settle(), canDownloadCurrent: () => !refused && !restoredDetail.blocked }).then((prompt) => mountIntroLate({ memory, template, appName, hadDraft: result.hadDraft || store.kept() }).then(() => prompt)).then((prompt) => {
+        document.addEventListener("clay:drafts-store-failed", () => prompt.showError());
+        document.addEventListener("clay:drafts-saved", () => prompt.clearError());
+        if (draftStoreFailed()) prompt.showError();
+        return (isOwner ? mountChip() : Promise.resolve(null)).then(() => prompt);
+      });
+    };
+    document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", start, { once: true }) : start();
+  }
+
+  keep = () => {
+    if (refused) return false;
+    if (!restoredDetail) return true;
+    if (direct) return store.flush();
+    const safe = store.keep();
+    session?.hide();
+    return safe;
+  };
+  setDraftFlush(keep);
+  setDraftUnconfirmed(() => !direct && store.unsafe());
+  settle = () => {
+    if (refused) return Promise.resolve(false);
+    if (!restoredDetail) return restoring.then(() => settle());
+    if (direct) {
+      return store.flush() ? null : Promise.resolve(false);
+    }
+    const safe = store.keep();
+    if (!store.pending()) return safe ? null : Promise.resolve(false);
+    const committed = opening.then(() => session ? session.sync().then(() => true) : store.flush()).catch(() => false);
+    let timer;
+    return Promise.race([committed, new Promise((resolve) => { timer = setTimeout(() => resolve(false), DOWNLOAD_WAIT_MS); })])
+      .finally(() => clearTimeout(timer));
   };
-  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", start, { once: true }) : start();
-  setDraftFlush(() => store.flush());
-  // Another tab's page, taken in by the page editor: on its storage event, once the editor
-  // listens (an event before that is missed), and when the tab comes back from the page cache.
+  document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") keep(); });
+  window.addEventListener("pagehide", keep);
+  // A link marked clay-wait-drafts (the host's download and host actions) waits for this
+  // page's last changes to reach the download page before it navigates, like the prompt's
+  // Download button. A new tab or a modified click leaves this page open, so it does not wait.
+  let leaving = false;
+  document.addEventListener("click", async (event) => {
+    // composedPath reaches into open shadow roots such as Hyperclay's trial bar.
+    const link = event.composedPath().find((node) => node instanceof Element && node.matches("a[clay-wait-drafts][href]"));
+    if (!link || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    if (link.target && link.target !== "_self") return;
+    if (leaving) { event.preventDefault(); return; }
+    const waiting = settle();
+    if (!waiting) return;
+    event.preventDefault();
+    leaving = true;
+    let timer;
+    await Promise.race([waiting, new Promise((resolve) => { timer = setTimeout(resolve, DOWNLOAD_WAIT_MS); })]);
+    clearTimeout(timer);
+    leaving = false;
+    window.location.assign(link.href);
+  }, true);
+
+  // Another tab's save reaches a page on the database through its session. With
+  // `localStorage` as the record it arrives as that key's storage event, once the page
+  // editor listens (an event before that is missed), and when the tab comes back from the
+  // page cache.
   const takeOtherTab = () => {
+    if (!direct || refused || !restoredDetail) return;
     // Read before adopting: adopting reads the record as this tab's own.
     const unit = store.externalUnit();
     // A page another tab wrote goes to the page editor, which merges it into its own.
@@ -72,9 +167,36 @@ if (isDraftMode && slot && rulesTag) {
   window.addEventListener("storage", (event) => { if (event.key === store.key) takeOtherTab(); });
   document.addEventListener("clay:drafts-blockeditor-listening", takeOtherTab);
   window.addEventListener("pageshow", (event) => { if (event.persisted) takeOtherTab(); });
-  const flush = () => store.flush();
-  document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden") flush(); });
-  window.addEventListener("pagehide", flush);
+
+  const held = store.held();
+  const head = held?.v === 2 && held.idb === true;
+  const foreignReset = !direct && held?.v === 1 && held.w === undefined && store.generation() !== "";
+  if (head || foreignReset || (!direct && held?.w && held.w.reset !== store.generation())) {
+    // The full draft is only in the database, or this copy is from before the last Start
+    // over: the page waits for the database's record, and plugins that read the document
+    // wait with the page.
+    restoring = opening.then(() => session?.first).then((result) => {
+      if (result) return finish(store.restore(result.record && { raw: JSON.stringify(result.record), record: result.record }));
+      throw new Error("the draft database did not open");
+    }).catch((error) => {
+      if (!head) {
+        if (!foreignReset) { try { local?.removeItem(store.key); } catch {} }
+        return finish(store.restore());
+      }
+      refused = true;
+      storageFailure(document, error);
+      finish({ restored: false, hadDraft: true, blocked: true });
+    });
+  } else {
+    finish(store.restore());
+    // The database did not open: `localStorage` is the record for this page load, and what
+    // this tab journaled while it waited is saved there.
+    opening.then(() => {
+      if (session) return;
+      store.release();
+      store.flush();
+    });
+  }
 } else if (!slot || !rulesTag) {
   const missing = [];
   if (!slot) missing.push('a visitor-drafts="<slot>" attribute on <html>');
@@ -84,18 +206,33 @@ if (isDraftMode && slot && rulesTag) {
   ready = mountChip();
 }
 
-export { ready };
+export { ready, restoring };
 
 export const visitorDrafts = store ? {
   active: true,
   slot: store.slot,
   key: store.key,
-  hasDraft: () => Boolean(store.read()),
+  hasDraft: () => store.kept(),
   restored: () => restoredDetail,
-  saveNow: () => store.writeLive(),
+  saveNow() {
+    if (refused || !restoredDetail) return false;
+    if (direct) return store.writeLive();
+    try { store.captureNow(); } catch { return false; }
+    session?.sync().catch(() => {});
+    return !store.unsafe();
+  },
   reset() {
-    store.clear();
-    window.location.reload();
+    if (!database) {
+      store.clear();
+      window.location.reload();
+      return true;
+    }
+    // The generation ends in the database before the page loads again.
+    opening.then(() => {
+      if (session) return session.startOver();
+      if (direct && !refused) return store.clear();
+      throw new Error("the draft database did not open");
+    }).then(() => window.location.reload(), (error) => storageFailure(document, error));
     return true;
   },
   onRestore(fn) {
@@ -109,6 +246,18 @@ export const visitorDrafts = store ? {
   editOriginal,
   backToDraft,
   downloadUrl: () => downloadLink,
-  download: () => ready.then((prompt) => { store.flush(); return prompt?.download(); }),
+  download: () => ready.then(async (prompt) => {
+    const saved = await settle();
+    return prompt?.download(saved === false);
+  }),
   source,
 } : inertVisitorDrafts();
+
+// Internal to the visitor menu; owner saving and the public visitorDrafts API stay separate.
+export async function recoveryDrafts() {
+  await restoring;
+  await opening;
+  if (!store || !session || refused) return null;
+  const { createRecovery } = await import("./visitor-drafts/recovery.js");
+  return createRecovery({ store, session });
+}

package/src/sync/live-sync.js

@@ -933,7 +933,7 @@ class LiveSync {
     // Whichever wire discovery selected. start() does not call connect() until the
     // profile is known, so this is never null on the normal path.
     const profile = this._profile || WIRE_PROFILES.legacy;
-    const path = profile.streamPath(window.location.href, this.lane, this.resumeId, this.clientId);
+    const path = profile.streamPath(window.location.href, this.lane, this.resumeId, this.clientId, PAGE_FORMAT);
     // A frame scheduled while the page showed waits for an animation frame, which a
     // page hidden since then never runs. Move it to the hidden schedule.
     if (!this._hiddenHandler) {