@panphora/clayjs 1.24.1 → 1.25.1

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,

package/src/plugins/visitor-drafts.js

@@ -1,6 +1,6 @@
 import { isDraftMode, isEditMode, isOwner } from "../core/is-edit-mode.js";
 import { hasSaveToken } from "../core/host-attrs.js";
-import { draftSlot, draftStoreFailed, setDraftTransport, setDraftFlush, setDraftUnconfirmed } from "../core/draft-mode.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";
@@ -72,13 +72,13 @@ if (isDraftMode && slot && rulesTag) {
     .then((m) => m.openSession({ store, storage: local, reload: () => reloadAfterDiscard({ isCurrent: () => true, reload: () => window.location.reload() }) }))
     .then((opened) => { session = opened; }, () => { direct = true; });
 
-  setDraftTransport((html) => {
+  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) html = window.clay.getHTML();
+      if (recapture) [at, html] = [draftGate()?.token() ?? null, window.clay.getHTML()];
       if (direct) return void store.write(html);
-      store.capture(html);
+      store.capture(html, { at });
       return opening.then(() => {
         if (session) return session.sync().then(() => {});
         store.write(html);
@@ -131,6 +131,26 @@ if (isDraftMode && slot && rulesTag) {
   };
   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
@@ -197,7 +217,7 @@ export const visitorDrafts = store ? {
   saveNow() {
     if (refused || !restoredDetail) return false;
     if (direct) return store.writeLive();
-    try { store.capture(window.clay.getHTML()); } catch { return false; }
+    try { store.captureNow(); } catch { return false; }
     session?.sync().catch(() => {});
     return !store.unsafe();
   },
@@ -232,3 +252,12 @@ export const visitorDrafts = store ? {
   }),
   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/server/markdown/index.js

@@ -0,0 +1,23 @@
+import { Marked } from "../../vendor/marked.vendor.js";
+import { importMarkdownTokens, MarkdownImportError, MAX_BYTES } from "../../page/import-markdown.js";
+import { fragmentCleaner, project, renderModel, revOf } from "../../page/projection.js";
+import { documentTitle } from "../../page/document-title.js";
+
+export { MarkdownImportError, MAX_BYTES };
+
+/**
+ * Markdown text as a Block editor article: the inner HTML of `<article data-blockeditor>`,
+ * the `data-rev` that article carries, and the title a save would write. The same codec
+ * and projection the editor uses, so the editor opens the result as its own page.
+ * `document` is any DOM document (jsdom on a server); raw HTML blocks are cleaned with it.
+ * `resolveImage(src)` may return a replacement address for an image, or null; `resolveLink(href)`
+ * does the same for a link (a link to another local file is otherwise kept as text).
+ */
+export function markdownArticle(text, { document, resolveImage = null, resolveLink = null } = {}) {
+  if (!document) throw new TypeError("markdownArticle needs a DOM document");
+  const tokens = new Marked().lexer(String(text ?? ""));
+  const { blocks, unsupported, refused } = importMarkdownTokens(tokens, { document, resolveImage, resolveLink });
+  const model = project(blocks);
+  const html = renderModel(model, { fallbackOf: () => "", clean: fragmentCleaner(document) });
+  return { html, rev: revOf(model), title: documentTitle(model), unsupported, refused };
+}

package/src/sync/conflicts.js

@@ -62,8 +62,10 @@ function changed(detail) {
 // A report is a loss unless the engine says this tab's operation survived, or a
 // hook kept the incoming change off the page. One the engine could not map to the
 // live page ("missing-output") still replaced this tab's work: it shows, without
-// a place to point at.
+// a place to point at. A region whose incoming version always wins (no-dirty,
+// no-watch) held nothing to keep, so replacing it is never a loss.
 function isLoss(c) {
+  if (c.kind === 'structure' && c.detail === 'remote-wins') return false;
   const r = c.recovery;
   if (!r) return true;
   if (r.applied === false && r.unavailable === 'hook-veto') return false;