@panphora/clayjs 1.23.0 → 1.24.1

package/src/server/rooms/page-lineage.js

@@ -11,7 +11,7 @@ const lineages = new Map();
 
 function storedArticle(html, doc) {
   const $ = load(html);
-  const nodes = $('article[data-page]').toArray().filter((node) => !inert(node));
+  const nodes = $('article[data-blockeditor]').toArray().filter((node) => !inert(node));
   if (nodes.length !== 1) return null;
   const article = doc.createElement('article');
   for (const [name, value] of Object.entries(nodes[0].attribs)) article.setAttribute(name, value);
@@ -31,7 +31,7 @@ function storedLineage(html, createDocument) {
   return lineage;
 }
 
-export function checkInitialLineage({ currentHtml, html, pageWrite = null, createDocument }) {
+export function checkInitialLineage({ currentHtml, html, blockeditorWrite = null, createDocument }) {
   const lineage = storedLineage(currentHtml, createDocument);
   if (!lineage) return;
   let doc;
@@ -42,7 +42,7 @@ export function checkInitialLineage({ currentHtml, html, pageWrite = null, creat
   }
   try {
     if (lineage.client !== null && !Y.decodeStateVector(Y.encodeStateVector(doc)).has(lineage.client)) refuse('seed-lineage');
-    if (typeof pageWrite === 'string' && pageWrite.trim() === 'v1' && seedOnly(doc, lineage.client) &&
+    if (typeof blockeditorWrite === 'string' && blockeditorWrite.trim() === 'v1' && seedOnly(doc, lineage.client) &&
       splitPage(html).file === currentHtml) refuse('nothing-to-write');
   } finally {
     doc.destroy();
@@ -51,6 +51,6 @@ export function checkInitialLineage({ currentHtml, html, pageWrite = null, creat
 
 export function checkOrdinaryLineage({ currentHtml, html, room = null }) {
   const before = inspectPage(currentHtml ?? '');
-  const stored = before.kind === 'yjs' ? before.tags[0][1] : room?.stores.get('page')?.value ?? null;
+  const stored = before.kind === 'yjs' ? before.tags[0][1] : room?.stores.get('blockeditor')?.value ?? null;
   if (stored && !sharesLineage(stored, inspectPage(html).tags[0][1])) refuse('seed-lineage');
 }

package/src/server/rooms/page-rebase.js

@@ -5,13 +5,13 @@ import { project, parseModel, renderModel, fragmentCleaner } from '../../page/pr
 import { blocksFromPageValues } from '../../page/ybind/decode.js';
 import { mergePageModels } from '../../page/merge.js';
 import { inert, pageRev } from './page-state.js';
-import { pageFormatFloor, withPageFormatFloor } from '../../page/format-level.js';
+import { blockeditorFormatFloor, withPageFormatFloor } from '../../page/format-level.js';
 
 // The lone article of html: its element rebuilt in doc, and where its start tag
 // and its contents sit in html.
 export function articleOf(html, doc) {
   const $ = load(html, { sourceCodeLocationInfo: true });
-  const nodes = $('article[data-page]').toArray().filter((node) => !inert(node));
+  const nodes = $('article[data-blockeditor]').toArray().filter((node) => !inert(node));
   if (nodes.length !== 1) return null;
   const loc = nodes[0].sourceCodeLocation;
   if (!loc?.startTag || !loc?.endTag) return null;
@@ -70,7 +70,7 @@ export function rebasePage({ storedHtml, state, incomingHtml, baseHtml, createDo
   const body = incomingHtml.slice(0, incoming.startTag.startOffset) + open + inner + incomingHtml.slice(innerEnd);
   // The floor is canonical metadata outside the article, and it only rises: a
   // writer that rebased from a version before activation cannot lower it.
-  const html = withPageFormatFloor(body, Math.max(pageFormatFloor(storedHtml), pageFormatFloor(incomingHtml)));
+  const html = withPageFormatFloor(body, Math.max(blockeditorFormatFloor(storedHtml), blockeditorFormatFloor(incomingHtml)));
   return { html, conflicts: merged.conflicts };
 }
 
@@ -106,7 +106,7 @@ export function closestBase(candidates, incomingHtml, createDocument) {
 export function stampPageRev(html, rev, floor = 0) {
   if (typeof html !== 'string' || !rev) return null;
   const $ = load(html, { sourceCodeLocationInfo: true });
-  const nodes = $('article[data-page]').toArray().filter((node) => !inert(node));
+  const nodes = $('article[data-blockeditor]').toArray().filter((node) => !inert(node));
   const loc = nodes.length === 1 ? nodes[0].sourceCodeLocation?.startTag : null;
   if (!loc) return null;
   const stamped = stampOpen(html, loc, rev);

package/src/server/rooms/page-room-conformance.js

@@ -6,7 +6,7 @@ import { entriesOf } from '../../page/ybind/parts.js';
 import { rangesOf, within, docRanges } from '../../page/ybind/containment.js';
 
 /**
- * The D13 page-room conformance fixture: a seeded run of several tabs, restarts,
+ * The D13 blockeditor-room conformance fixture: a seeded run of several tabs, restarts,
  * resets and legacy file writes over one page room, driven through an adapter
  * that stands in for a host's wiring of the room. Every run throws with the seed
  * and the invariant it broke. The module reads no files: the caller passes the
@@ -39,14 +39,14 @@ import { rangesOf, within, docRanges } from '../../page/ybind/containment.js';
  *
  *   readState({ key, tabId, capable })
  *     The JSON the client receives for a state read: { epoch, seq, writer,
- *     stores: { page: { value, ... }, ... }, ... }, with the page store's value
+ *     stores: { blockeditor: { value, ... }, ... }, ... }, with the page store's value
  *     as the client's re-read carries it. `tabId` is the reading client (null for
  *     a broadcast's read) and `capable` says whether it advertises the page
  *     compaction capability (default true). Answers { status: 404, body: null }
  *     when the host has no room for key.
  *
  *   apply({ key, tabId, frame })
- *     Apply one frame { name, n, epoch, pageGeneration, compaction, ops } from
+ *     Apply one frame { name, n, epoch, blockeditorGeneration, compaction, ops } from
  *     tabId, atomically. Answer { status: 200, body: { duplicate, seq, epoch, ... } }
  *     when the host took it, { status, body: { error, ... } } with the host's
  *     status for a refusal (the error code and any retryAfter), or
@@ -82,7 +82,7 @@ import { rangesOf, within, docRanges } from '../../page/ybind/containment.js';
  */
 
 const NET = 'net';
-const TAG = /merge="page" clay="live"(?: live-at="[^"]*")?>(.*?)<\/script>/;
+const TAG = /merge="blockeditor" clay="live"(?: live-at="[^"]*")?>(.*?)<\/script>/;
 
 function rng(seed) {
   let s = seed >>> 0 || 1;
@@ -167,7 +167,7 @@ export function createRoomsAdapter({ now = null, newEpoch = null, compaction = n
         body: {
           reported: rooms.used(),
           receiptBytes: target.receiptBytes ?? 0,
-          transitionBytes: target.pageTransition?.bytes ?? 0,
+          transitionBytes: target.blockeditorTransition?.bytes ?? 0,
           reservedBytes: target.compaction?.job?.reserved ?? 0,
           stores,
         },
@@ -206,7 +206,7 @@ export function runPageRoomConformance({ adapter, template, seed = 1, steps = 40
   const r = rng(seed);
   const pick = (n) => Math.floor(r() * n);
   const limits = { activeBytes, loose: adapter.limits.loose, soft: adapter.limits.soft, leaseMs: adapter.limits.leaseMs, tailFloor };
-  const htmlOf = (value, at = null) => template.replace(TAG, () => `merge="page" clay="live"${at ? ` live-at="${at}"` : ''}>${JSON.stringify(value)}</script>`);
+  const htmlOf = (value, at = null) => template.replace(TAG, () => `merge="blockeditor" clay="live"${at ? ` live-at="${at}"` : ''}>${JSON.stringify(value)}</script>`);
   const fail = (message, extra = {}) => { throw Object.assign(new Error(`seed ${seed}: ${message}`), extra); };
   const dueSet = new Set();
   adapter.onCompactionDue(({ key, overflow }) => { if (key === KEY) dueSet.add({ key, overflow }); });
@@ -218,7 +218,7 @@ export function runPageRoomConformance({ adapter, template, seed = 1, steps = 40
     if (answer.status !== 200) fail(`state read refused with ${answer.status}`);
     return answer.body;
   };
-  const page = () => state().stores.page.value;
+  const page = () => state().stores.blockeditor.value;
   const usage = () => {
     const answer = adapter.usage({ key: KEY });
     if (answer.status !== 200) fail(`usage read refused with ${answer.status}`);
@@ -246,7 +246,7 @@ export function runPageRoomConformance({ adapter, template, seed = 1, steps = 40
 
   const check = (where) => {
     const u = usage();
-    const bytes = u.stores.page.bytes;
+    const bytes = u.stores.blockeditor.bytes;
     const shape = pageShape(page().y, limits);
     stats.maxLoose = Math.max(stats.maxLoose, shape.loose);
     stats.maxBytes = Math.max(stats.maxBytes, bytes);
@@ -291,12 +291,12 @@ export function runPageRoomConformance({ adapter, template, seed = 1, steps = 40
     const out = adapter.fileWritten({ key: KEY, html: htmlOf(file, at) });
     legacy.writes++;
     const after = state();
-    if (!after.stores.page) fail('a merge dropped the page store');
-    const y = after.stores.page.value.y;
+    if (!after.stores.blockeditor) fail('a merge dropped the page store');
+    const y = after.stores.blockeditor.value.y;
     if (keysBefore.some((k) => !(k in y) || y[k] !== valueBefore.y[k])) fail('a file merge deleted or changed a room key');
     if (!contains([update])) fail('a file merge lost the legacy edit');
     if (out.body?.valueChanged) legacy.merged++;
-    if (out.body?.landed?.includes('page')) stats.landed++;
+    if (out.body?.landed?.includes('blockeditor')) stats.landed++;
     admitted.push(update);
     const u = usage();
     if (u.reported !== held(u)) fail('budget after merge');
@@ -330,13 +330,13 @@ export function runPageRoomConformance({ adapter, template, seed = 1, steps = 40
     const before = serializeLive(page());
     const seqBefore = state().seq;
     const now = state();
-    const answer = adapter.apply({ key: KEY, tabId: t.id, frame: { name: 'page', n: f.n, epoch: now.epoch, pageGeneration: now.pageTransition?.id ?? null, compaction: 1, ops: [{ op: 'set', path: ['y', f.key], value: f.value }] } });
+    const answer = adapter.apply({ key: KEY, tabId: t.id, frame: { name: 'blockeditor', n: f.n, epoch: now.epoch, blockeditorGeneration: now.blockeditorTransition?.id ?? null, compaction: 1, ops: [{ op: 'set', path: ['y', f.key], value: f.value }] } });
     const body = answer.body ?? {};
     if (body.error) {
       if (serializeLive(page()) !== before || state().seq !== seqBefore) fail(`refusal ${body.error} changed the room`);
       stats.unchangedRefusals++;
       if (body.error === 'checkpoint-required') { stats.refusedRetry++; return; }
-      if (body.error === 'page-full') { stats.capacity++; t.blocked = true; return; }
+      if (body.error === 'blockeditor-full') { stats.capacity++; t.blocked = true; return; }
       fail(`unexpected refusal ${body.error}`);
     }
     if (body.stale) { t.inflight = null; return; }
@@ -455,7 +455,7 @@ export function runPageRoomConformance({ adapter, template, seed = 1, steps = 40
     roomDoc.destroy();
   }
   const end = page();
-  const out = { seed, ...stats, legacyWrites: legacy.writes, legacyMerged: legacy.merged, blocked: blocked.length, end: { bytes: usage().stores.page.bytes, ...pageShape(end.y, limits) } };
+  const out = { seed, ...stats, legacyWrites: legacy.writes, legacyMerged: legacy.merged, blocked: blocked.length, end: { bytes: usage().stores.blockeditor.bytes, ...pageShape(end.y, limits) } };
   if (log) console.log(JSON.stringify(out));
   return out;
 }

package/src/server/rooms/page-state.js

@@ -15,8 +15,8 @@ const span = (node) => {
 // Offsets only, never the parsed tree, so the remembered answers stay small.
 const locate = recent(4, (html) => {
   const $ = load(html, { sourceCodeLocationInfo: true });
-  const articles = $('article[data-page]').toArray().filter((node) => !inert(node));
-  const tags = $('script[merge="page"]').toArray().filter((node) => !inert(node) &&
+  const articles = $('article[data-blockeditor]').toArray().filter((node) => !inert(node));
+  const tags = $('script[merge="blockeditor"]').toArray().filter((node) => !inert(node) &&
     ($(node).attr('clay') || '').split(/\s+/).includes('live'));
   return Object.freeze({
     articles: articles.length,

package/src/server/rooms/page-write-admission.js

@@ -6,7 +6,7 @@ import { PageFormatError } from './page-write-guard.js';
 import { ifMatchSatisfied } from './spec-wire.js';
 import { checkInitialLineage, checkOrdinaryLineage } from './page-lineage.js';
 
-const PAGE = /^page(\.[0-9]+)?$/;
+const PAGE = /^blockeditor(\.[0-9]+)?$/;
 const record = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
 const refuse = (reason) => { throw new PageConversionError(reason); };
 
@@ -26,7 +26,7 @@ function claimsYPage(html) {
 function checkInitialRoom(room) {
   if ([...(room?.stores.keys() ?? [])].some((name) => PAGE.test(name)) ||
     [...(room?.lastN.keys() ?? [])].some((key) => PAGE.test(key.slice(0, key.indexOf('\n')))) ||
-    (room?.pageTransition && room.pageTransition.format !== 'none')) refuse('room-page-authority');
+    (room?.blockeditorTransition && room.blockeditorTransition.format !== 'none')) refuse('room-blockeditor-authority');
 }
 
 function checkInitialCondition(ifMatch, currentHtml) {
@@ -34,18 +34,18 @@ function checkInitialCondition(ifMatch, currentHtml) {
     !ifMatchSatisfied(ifMatch, currentHtml)) refuse('file-changed');
 }
 
-export function checkPageInitial({ currentHtml, html, ifMatch, room = null, pageWrite = null, createDocument }) {
+export function checkPageInitial({ currentHtml, html, ifMatch, room = null, blockeditorWrite = null, createDocument }) {
   if (typeof currentHtml !== 'string' || inspectPage(currentHtml).kind !== 'none') refuse('invalid-source');
   if (typeof html !== 'string' || inspectPage(html).kind !== 'yjs') refuse('invalid-capture');
   checkInitialRoom(room);
   checkInitialCondition(ifMatch, currentHtml);
-  checkInitialLineage({ currentHtml, html, pageWrite, createDocument });
+  checkInitialLineage({ currentHtml, html, blockeditorWrite, createDocument });
 }
 
-export function checkPageWriteAdmission({ currentHtml, html, header = null, ifMatch, room = null, pageWrite = null, createDocument }) {
+export function checkPageWriteAdmission({ currentHtml, html, header = null, ifMatch, room = null, blockeditorWrite = null, createDocument }) {
   const before = inspectPage(currentHtml ?? '');
   const after = inspectPage(html ?? '');
-  const converted = before.kind === 'yjs' || room?.pageTransition?.format === 'yjs';
+  const converted = before.kind === 'yjs' || room?.blockeditorTransition?.format === 'yjs';
   if (converted && after.kind === 'none' && header == null) return 'ordinary';
   if (converted && after.kind !== 'yjs') throw new PageFormatError();
   if (header !== null && header !== undefined) {
@@ -64,6 +64,6 @@ export function checkPageWriteAdmission({ currentHtml, html, header = null, ifMa
   if (before.kind !== 'none' || typeof currentHtml !== 'string') refuse('invalid-source');
   checkInitialRoom(room);
   checkInitialCondition(ifMatch, currentHtml);
-  checkInitialLineage({ currentHtml, html, pageWrite, createDocument });
+  checkInitialLineage({ currentHtml, html, blockeditorWrite, createDocument });
   return 'initial';
 }

package/src/server/rooms/page-write-guard.js

@@ -4,13 +4,13 @@ export class PageFormatError extends Error {
   constructor() {
     super('A converted page must retain one complete Yjs page value');
     this.name = 'PageFormatError';
-    this.code = 'page-format';
+    this.code = 'blockeditor-format';
     this.statusCode = 409;
   }
 }
 
 export function checkPageWriteFormat({ currentHtml, html, room = null }) {
-  if (room?.pageTransition?.format !== 'yjs' && inspectPage(currentHtml ?? '').kind !== 'yjs') return;
+  if (room?.blockeditorTransition?.format !== 'yjs' && inspectPage(currentHtml ?? '').kind !== 'yjs') return;
   const kind = inspectPage(html ?? '').kind;
   if (kind !== 'yjs' && kind !== 'none') throw new PageFormatError();
 }
@@ -19,5 +19,5 @@ export function checkPageWriteFormat({ currentHtml, html, room = null }) {
 // outside edit or restore replaced the article, so the room's unsaved page
 // edits belong in a recovered copy and the room must start over.
 export function pageLineageLost(room, html) {
-  return room?.pageTransition?.format === 'yjs' && room.stores.has('page') && inspectPage(html ?? '').kind === 'none';
+  return room?.blockeditorTransition?.format === 'yjs' && room.stores.has('blockeditor') && inspectPage(html ?? '').kind === 'none';
 }

package/src/sync/data-guard-notice.js

@@ -0,0 +1,265 @@
+import { saveToken } from "../core/host-attrs.js";
+import { storage } from "../lib/doc-storage.js";
+
+const TITLE = "Saved data was overwritten";
+const DONE_KEY = "data-guard-done";
+const READ_TIMEOUT_MS = 6000;
+const AFTER_SAVE_MS = 1500;
+const MIN_READ_GAP_MS = 5000;
+const VISIBLE_GAP_MS = 30000;
+const UNREACHED = "Could not reach the server. Try again.";
+const REFUSED = "That did not go through. Try again.";
+const SAVE_FIRST = "Save your changes first, then try again.";
+const RELOAD_FIRST = "Reload the page, then try again.";
+
+let session = null;
+let ui = null;
+
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+const isPending = (event) => Boolean(event) && typeof event.id === "string" && event.status === "pending";
+const allowed = (current, event, choice, flag) => flag === true && !current.refused.has(`${event.id}:${choice}`);
+const canRestore = (current, event) => allowed(current, event, "restore", event.restorable);
+const canRevert = (current, event) => allowed(current, event, "revert", event.canRevert);
+const credentials = () => (saveToken() ? "omit" : "same-origin");
+const headers = (extra = {}) => ({ "Document-URL": location.href, ...extra });
+
+function removeServerBar() {
+  for (const bar of document.querySelectorAll("[data-htmlclay-guard]")) bar.remove();
+}
+
+function say(message, type) {
+  import("../ui/toast.js").then((module) => {
+    ui = module;
+    module.default(message, type);
+  }, () => {});
+}
+
+function describe(current, event) {
+  const summary = event.lossSummary || {};
+  const source = summary.provenance === "external" ? "A change from outside this page" : "A save from this page";
+  const loss = summary.removedItems > 0
+    ? `removed ${plural(summary.removedItems, "item")}`
+    : summary.destroyedAtoms > 0 ? `erased ${plural(summary.destroyedAtoms, "value")}` : "changed saved data";
+  const row = Array.isArray(event.preview) ? event.preview[0] : null;
+  const parts = [`${source} ${loss}.`];
+  if (row) parts.push(`${row.key}: ${row.yours} before, ${row.now} now.`);
+  if (canRestore(current, event)) {
+    if (event.droppedAdditions > 0) parts.push(`Restoring removes ${plural(event.droppedAdditions, "item")} added or changed since.`);
+  } else if (canRevert(current, event)) {
+    parts.push("This data no longer fits the page, but the whole change can be undone.");
+  } else {
+    parts.push("It cannot be restored from here.");
+  }
+  if (canRevert(current, event)) parts.push("Undo the change also removes edits made since.");
+  return parts.join(" ");
+}
+
+function actionsFor(current, event) {
+  const actions = [];
+  if (canRestore(current, event)) actions.push({ label: "Restore", onClick: () => choose(current, event, "restore") });
+  if (canRevert(current, event)) actions.push({ label: "Undo the change", onClick: () => choose(current, event, "revert") });
+  actions.push({ label: "Keep as is", onClick: () => choose(current, event, "dismiss") });
+  return actions;
+}
+
+async function draw(current, event) {
+  const key = [event.id, canRestore(current, event), canRevert(current, event), event.lastWriteAt, describe(current, event)].join("|");
+  if (current.drawn === key) return true;
+  current.drawn = key;
+  current.eventId = event.id;
+  try {
+    ui ??= await import("../ui/toast.js");
+  } catch {
+    if (current.drawn === key) {
+      current.drawn = null;
+      current.eventId = null;
+    }
+    return false;
+  }
+  if (session !== current || current.drawn !== key) return false;
+  ui.dismissPersistent(TITLE, { now: true });
+  ui.toastPersistent(TITLE, "warning", { detail: describe(current, event), actions: actionsFor(current, event) });
+  return true;
+}
+
+function clearNotice(current) {
+  current.drawn = null;
+  current.eventId = null;
+  ui?.dismissPersistent(TITLE, { now: true });
+}
+
+async function read(current) {
+  const turn = ++current.turn;
+  current.lastRead = Date.now();
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), READ_TIMEOUT_MS);
+  let body;
+  try {
+    const res = await fetch(current.url, {
+      method: "GET",
+      credentials: credentials(),
+      headers: headers(),
+      cache: "no-store",
+      redirect: "manual",
+      signal: controller.signal,
+    });
+    if (!res.ok) return;
+    body = await res.json();
+  } catch {
+    return;
+  } finally {
+    clearTimeout(timer);
+  }
+  if (session !== current || turn !== current.turn) return;
+  if (!body || typeof body !== "object" || !("event" in body)) return;
+  if (isPending(body.event)) {
+    if (current.resolved.has(body.event.id)) return;
+    if (await draw(current, body.event)) removeServerBar();
+    return;
+  }
+  clearNotice(current);
+  removeServerBar();
+}
+
+function forget(current, event) {
+  current.resolved.add(event.id);
+  if (current.eventId === event.id) clearNotice(current);
+}
+
+function finish(current, event, choice) {
+  forget(current, event);
+  if (choice === "dismiss") {
+    say("Kept the page as it is.", "info");
+    return;
+  }
+  storage.session.set(DONE_KEY, choice);
+  current.reload();
+}
+
+function settle(current, event, choice, status, body) {
+  if (session !== current) return;
+  if (status === 200 && body?.ok === true) {
+    finish(current, event, choice);
+  } else if (status === 404) {
+    forget(current, event);
+    say("This was already taken care of somewhere else. Reload to see the current page.", "info");
+  } else if (status === 409) {
+    current.drawn = null;
+    say("This page changed after the notice appeared. Check the notice and try again.", "warning");
+    read(current);
+  } else if (status === 422) {
+    current.refused.add(`${event.id}:${choice}`);
+    if (current.eventId === event.id && !current.resolved.has(event.id)) draw(current, event);
+    say(choice === "restore" ? "That data no longer fits this page, so it could not be restored." : "That earlier version is no longer available.", "warning");
+  } else if (status === 401 || status === 403) {
+    say(RELOAD_FIRST, "error");
+  } else {
+    say(status === 400 ? REFUSED : UNREACHED, "error");
+  }
+}
+
+async function saveFirst() {
+  const clay = window.clay;
+  if (!clay?.hasUnsavedChanges?.()) return true;
+  if (typeof clay.save?.flush !== "function") return false;
+  try {
+    await clay.save.flush();
+  } catch {
+    return false;
+  }
+  return !clay.hasUnsavedChanges();
+}
+
+async function choose(current, event, choice) {
+  if (current.busy || session !== current) return;
+  current.busy = true;
+  try {
+    if (choice !== "dismiss" && !(await saveFirst())) {
+      if (session === current) say(SAVE_FIRST, "warning");
+      return;
+    }
+    if (session !== current) return;
+    const res = await fetch(current.url, {
+      method: "POST",
+      credentials: credentials(),
+      headers: headers({ "Content-Type": "application/json" }),
+      redirect: "manual",
+      body: JSON.stringify({ id: event.id, choice }),
+    });
+    const body = await res.json().catch(() => null);
+    settle(current, event, choice, res.status, body);
+  } catch {
+    if (session === current) say(UNREACHED, "error");
+  } finally {
+    current.busy = false;
+  }
+}
+
+function onNotification(current, e) {
+  const { msgType, action, data } = e.detail || {};
+  if (msgType !== "data-loss") return;
+  if (action === "resolved") {
+    if (typeof data?.id !== "string") return;
+    current.turn++;
+    current.resolved.add(data.id);
+    if (current.eventId === data.id) clearNotice(current);
+    return;
+  }
+  if (action === "raised" && isPending(data) && !current.resolved.has(data.id)) {
+    current.turn++;
+    draw(current, data).then((drawn) => { if (drawn) removeServerBar(); }, () => {});
+  }
+}
+
+const readAt = (current) => Math.max(current.lastSave + AFTER_SAVE_MS, current.lastRead + MIN_READ_GAP_MS);
+
+function armRead(current) {
+  if (current.timer) return;
+  current.timer = setTimeout(() => {
+    current.timer = null;
+    if (session !== current) return;
+    if (readAt(current) > Date.now()) armRead(current);
+    else read(current);
+  }, Math.max(readAt(current) - Date.now(), 0));
+}
+
+export function start({ href, reload = () => window.location.reload() }) {
+  if (session) return;
+  let url;
+  try {
+    url = new URL(href, location.href);
+  } catch {
+    return;
+  }
+  if (url.origin !== location.origin) return;
+  const listeners = new AbortController();
+  const current = {
+    url: url.href, reload, listeners, turn: 0, lastRead: 0, lastSave: 0, timer: null,
+    busy: false, drawn: null, eventId: null, resolved: new Set(), refused: new Set(),
+  };
+  session = current;
+  const { signal } = listeners;
+  document.addEventListener("clay:notification", (e) => onNotification(current, e), { signal });
+  document.addEventListener("clay:save-saved", () => {
+    current.lastSave = Date.now();
+    armRead(current);
+  }, { signal });
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "visible" && Date.now() - current.lastRead >= VISIBLE_GAP_MS) read(current);
+  }, { signal });
+  const done = storage.session.get(DONE_KEY);
+  if (done) {
+    storage.session.remove(DONE_KEY);
+    say(done === "restore" ? "Your saved data is back." : "The earlier version is back.", "success");
+  }
+  read(current);
+}
+
+export function stop() {
+  const current = session;
+  if (!current) return;
+  session = null;
+  current.listeners.abort();
+  clearTimeout(current.timer);
+  clearNotice(current);
+}

package/src/sync/live-sync.js

@@ -48,13 +48,13 @@ import { mergeIgnoresAttr, mergeVetoesAttr } from '../lib/root-attrs.js';
 import { autosaveActive } from '../lib/autosave-state.js';
 import { hostSupports } from '../core/host-meta.js';
 import { PAGE_FORMAT, PAGE_FORMAT_HEADER } from '../core/page-format-wire.js';
-import { knownPageFormatFloor, pageFormatFloor, withPageFormatFloor } from '../core/page-format.js';
+import { knownPageFormatFloor, blockeditorFormatFloor, withPageFormatFloor } from '../core/page-format.js';
 import { onSaveAccepted } from '../core/save-accepted.js';
 import { servedDocumentEtag } from '../core/host-attrs.js';
 import { recordEtag, seedEtag, lastSeenEtag, conditionalSaves, representedEtag, forgetRepresentedEtag } from '../core/etag.js';
 import { pageMaybeDirty, pauseGate, resumeGate, gateCaptureToken, gateClearIfUnchanged, gateMarkDirty } from '../lib/dirty-gate.js';
 import { gestureSeen } from '../lib/user-gesture.js';
-import { SyncStream } from './stream.js';
+import { SyncStream, pageHidden } from './stream.js';
 import { streamOpened, streamClosed, streamEvent, LIVE_EVENTS } from '../live/stream-bridge.js';
 import { conflicts, conflictLedger, loadConflicts } from './conflicts-facade.js';
 import { upgradeReplaces, stopForUpgrade } from './version-guard.js';
@@ -364,6 +364,7 @@ class LiveSync {
     this._profilePromise = null;
     this._sharedData = false;
     this._sharedSync = false;
+    this._workerFeatures = ['live-data'];
     this._liveData = false;
     this._editing = null;
     this._presenceLease = null;
@@ -390,6 +391,7 @@ class LiveSync {
 
     // Store handler reference for cleanup
     this._snapshotHandler = null;
+    this._hiddenHandler = null;
 
     // High-water mark of server seqs we've seen on this channel (own echoes
     // count too). Server-broadcast payloads carry a monotonic seq
@@ -776,6 +778,12 @@ class LiveSync {
       this._settledHandler = null;
     }
 
+    if (this._hiddenHandler) {
+      document.removeEventListener('visibilitychange', this._hiddenHandler);
+      document.removeEventListener('clay:workspace-background', this._hiddenHandler);
+      this._hiddenHandler = null;
+    }
+
     this._queuedSend = null;
 
     // Cancel any pending frame and clear the queue. A morph already in
@@ -848,6 +856,7 @@ class LiveSync {
         this._sharedData = resolved.sharedData;
         this._sharedSync = resolved.sharedSync;
         this._liveData = resolved.liveData;
+        this._workerFeatures = resolved.workerFeatures;
         this._profile = resolved.profile;
         this._log(`Wire profile: ${resolved.profile.name}`);
         return resolved.profile;
@@ -925,15 +934,33 @@ class LiveSync {
     // 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);
+    // 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) {
+      this._hiddenHandler = () => {
+        if (this._rafHandle == null || !pageHidden()) return;
+        this._cancelFrame(this._rafHandle);
+        this._rafHandle = null;
+        this._scheduleNextFrame();
+      };
+      document.addEventListener('visibilitychange', this._hiddenHandler);
+      document.addEventListener('clay:workspace-background', this._hiddenHandler);
+    }
     // Resolved against the real origin: a <base href> in the authored document
     // would otherwise point the sync stream at an origin the document chose.
     this.sse = new SyncStream(new URL(path, window.location.origin).href, {
       shared: this._sharedSync,
       sharedData: this._sharedData,
+      workerFeatures: this._workerFeatures,
       documentURL: window.location.href,
       lane: this.lane,
       clientId: this.clientId,
-      keepAliveWhenHidden: this._liveData && this.lane === 'live',
+      // A hidden edit tab stays subscribed wherever that costs no connection of its
+      // own: a live-data host keeps it for the room, and the shared worker carries it
+      // for free ('shared': the stream decides, from the connection it holds).
+      // Released, it would miss a peer's save, and its own next save would be
+      // refused as a conflict.
+      keepAliveWhenHidden: this.lane !== 'live' ? false : (this._liveData ? true : 'shared'),
       // Only a response that named its own version gives this tab anything to
       // compare against. On a host that served none there is no provenance to
       // check, and the page keeps its pre-1.9.0 startup behavior.
@@ -1305,7 +1332,7 @@ class LiveSync {
     // at: the save adds the format marker on its way out (core/save-core.js runSave),
     // after the capture this relay was built from. At floor 0 the html is unchanged.
     const sent = acceptedBytesFor(captureId) ?? acceptedHtml;
-    const floor = typeof sent === 'string' ? pageFormatFloor(sent) : 0;
+    const floor = typeof sent === 'string' ? blockeditorFormatFloor(sent) : 0;
     payload = { ...payload, html: asSent(withPageFormatFloor(payload.html, Math.max(knownPageFormatFloor(), floor)), sent) };
 
     // Skip only an unstamped repeat, judged against the base as it stood. A
@@ -1919,19 +1946,35 @@ class LiveSync {
     return true;
   }
 
+  // A hidden page runs no animation frames, and Chrome slows its timers to one a
+  // second (one a minute after five minutes). A frame left waiting there kept the
+  // stamp of the version before a peer's save, so the tab's next save was refused
+  // as a conflict. A message the page posts to itself runs at once, hidden or not.
   _requestFrame(cb) {
+    if (pageHidden()) {
+      if (typeof MessageChannel === 'function') {
+        const channel = new MessageChannel();
+        let live = true;
+        channel.port1.onmessage = () => {
+          channel.port1.close();
+          if (live) cb();
+        };
+        channel.port2.postMessage(null);
+        return { cancel: () => { live = false; channel.port1.close(); } };
+      }
+      const timer = setTimeout(cb, 0);
+      return { cancel: () => clearTimeout(timer) };
+    }
     if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
-      return window.requestAnimationFrame(cb);
+      const frame = window.requestAnimationFrame(cb);
+      return { cancel: () => window.cancelAnimationFrame?.(frame) };
     }
-    return setTimeout(cb, 16);
+    const timer = setTimeout(cb, 16);
+    return { cancel: () => clearTimeout(timer) };
   }
 
   _cancelFrame(handle) {
-    if (typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') {
-      window.cancelAnimationFrame(handle);
-      return;
-    }
-    clearTimeout(handle);
+    handle?.cancel?.();
   }
 
   /**