@panphora/clayjs 1.25.0 → 1.25.1

package/src/page/import-markdown.js

@@ -17,8 +17,8 @@ import { safeHref, safeSrc } from "./address.js";
 const EMBEDS = "iframe, frame, frameset, object, embed, applet, meta, base, link, form, style, animate, set, animateMotion, animateTransform, portal";
 const LOADERS = /^(srcdoc|data|formaction|codebase|archive|ping|background|poster|lowsrc|dynsrc)$/i;
 const SCRIPTED = /^\s*(javascript|vbscript|data):/i;
-function cleanImported(html) {
-  const t = document.createElement("template");
+function cleanImported(html, doc) {
+  const t = doc.createElement("template");
   t.innerHTML = html;
   for (const el of t.content.querySelectorAll(EMBEDS)) el.remove();
   for (const el of t.content.querySelectorAll("*")) {
@@ -57,7 +57,19 @@ function added(marks, name, attrs) {
 // One text block's inline content as the record keeps it: c, and m as runs (one
 // key per UTF-16 unit, packed), exactly as flatten and runsOf write it; `parts`
 // splits around an image, which the schema only carries as a block of its own.
-function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}) {
+// A link or image written as a relative path (`other.md`, `setup.sh`, `shot.png`) names a
+// file beside the Markdown it came from. It never becomes a web address: `setup.sh` read
+// as a host name is someone else's site, and an image there would make every reader's
+// browser ask that site for it. The host may map it (`resolveLink`, `resolveImage`).
+const RELATIVE = /^(?![a-z][a-z0-9+.-]*:|[/#?])\S/i;
+
+function linkHref(raw, resolveLink) {
+  const resolved = typeof resolveLink === "function" ? resolveLink(raw) : null;
+  if (typeof resolved === "string" && resolved) return safeHref(resolved);
+  return RELATIVE.test(raw.trim()) ? null : safeHref(raw);
+}
+
+function inlineOf(tokens, { images = true, refused = [], unsupported = [], resolveLink = null } = {}) {
   const parts = [];
   let c = "";
   let m = [];
@@ -91,7 +103,7 @@ function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}
         case "codespan": text(token.text, added(marks, "code")); break;
         case "br": atom(BREAK); break;
         case "link": {
-          const href = safeHref(token.href);
+          const href = linkHref(String(token.href ?? ""), resolveLink);
           if (href) walk(token.tokens, added(marks, "link", { href }));
           else {
             refused.push({ type: "link", href: String(token.href ?? "") });
@@ -121,7 +133,7 @@ function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}
   return { parts };
 }
 
-export function importMarkdownTokens(tokens) {
+export function importMarkdownTokens(tokens, { document: doc = globalThis.document, resolveImage = null, resolveLink = null } = {}) {
   if (!Array.isArray(tokens)) throw new MarkdownImportError("malformed-input", "Markdown import needs the lexer's token list.");
   let size = 0;
   for (const token of tokens) {
@@ -155,7 +167,9 @@ export function importMarkdownTokens(tokens) {
     return value;
   };
   const imageOf = (image) => {
-    const src = safeSrc(image.src);
+    const resolved = typeof resolveImage === "function" ? resolveImage(image.src) : null;
+    const mapped = typeof resolved === "string" && resolved ? resolved : null;
+    const src = mapped ? safeSrc(mapped) : RELATIVE.test(String(image.src).trim()) ? null : safeSrc(image.src);
     if (src) return { t: "image", src, ...(image.alt ? { alt: image.alt } : {}), ...(image.title ? { caption: image.title } : {}) };
     refused.push({ type: "image", href: image.src });
     return image.alt ? block("paragraph", {}, { c: image.alt, m: [] }) : null;
@@ -168,7 +182,7 @@ export function importMarkdownTokens(tokens) {
     }
   };
   const paragraph = (inline, ctx) => textBlocks(ctx.quote ? "quote" : "paragraph", {}, inline);
-  const inline = (tokens, options = {}) => inlineOf(tokens, { refused, unsupported, ...options });
+  const inline = (tokens, options = {}) => inlineOf(tokens, { refused, unsupported, resolveLink, ...options });
   const literal = (token) => {
     const raw = String(token.raw ?? token.text ?? "");
     unsupported.push({ type: token.type, text: raw });
@@ -193,7 +207,7 @@ export function importMarkdownTokens(tokens) {
         case "html": {
           const raw = String(token.text ?? token.raw ?? "");
           unsupported.push({ type: "HTML block cleaned", text: raw });
-          push({ t: "preserved", html: cleanImported(fragmentCleaner(document).fallback(raw)) });
+          push({ t: "preserved", html: cleanImported(fragmentCleaner(doc).fallback(raw), doc) });
           break;
         }
         case "blockquote": {

package/src/page/save-projection.js

@@ -120,4 +120,4 @@ export function acceptedPageState(html) {
   }
 }
 
-addDocumentTransform(projectInto);
+addDocumentTransform(projectInto, { required: true });

package/src/plugins/quickcrop.js

@@ -13,6 +13,9 @@ import { bevelDialog, dismissOf, keepFocusIn } from "../ui/bevel-dialog.js";
 import { bevelButton } from "../ui/bevel-controls.js";
 import { installSkin } from "../ui/vendor-skin.js";
 import { CSS as SKIN, ROOTS as SKIN_ROOTS } from "../ui/skins/quickcrop.js";
+import { resolveTheme } from "../ui/theme.js";
+import { themed, partRules, markParts } from "../ui/theme-parts.js";
+import { style } from "../lib/hostile-css.js";
 
 const WIDTH = 844;
 
@@ -24,80 +27,136 @@ function isThemodal(m) {
     typeof m.onYes === "function" && "html" in m;
 }
 
-export const bevelCropAdapter = {
-  // The stage has to fit inside the panel: the overlay's 16px side inset, the panel's
-  // 1px border and the body's 22px padding a side; below it the header, the footer and
-  // the overlay's top inset. Widths come from clientWidth, which leaves out a classic
-  // scrollbar as the overlay does.
-  fit() {
-    const width = document.documentElement.clientWidth;
-    return {
-      width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
-      height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
-    };
-  },
-  open({ content, confirmLabel, onConfirm, onCancel }) {
-    const { root, overlay, panel, heading, body, footer, close } = bevelDialog({
-      zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true,
-    });
-    heading.textContent = "Crop image";
-    panel.setAttribute("aria-label", "Crop image");
-    body.append(content);
-    const confirm = bevelButton(confirmLabel, { variant: "primary", onClick: () => onConfirm() });
-    footer.append(confirm);
-
-    close.addEventListener("click", () => onCancel());
-    panel.addEventListener("submit", (event) => event.preventDefault());
-    let pressedOnBackdrop = false;
-    overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
-    overlay.addEventListener("click", (event) => {
-      if (pressedOnBackdrop && event.target === overlay) onCancel();
-      pressedOnBackdrop = false;
-    });
-    // Capture, and stopped there, so a dialog underneath (a CMS confirm through
-    // clay.modal) does not take the same key as its own: Escape cancels this crop,
-    // Tab stays inside it.
-    const onKey = (event) => {
-      if (event.key === "Tab") {
+const TITLE = "Crop image";
+
+// The frame for one crop, in the theme captured for that crop. Measuring and opening
+// build the same frame, so the stage is sized for the padding, borders, heading and
+// button the person will actually see.
+function cropFrame(theme, confirmLabel, onConfirm = null) {
+  const frame = bevelDialog({ zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true, theme, surface: "crop" });
+  frame.heading.textContent = TITLE;
+  frame.panel.setAttribute("aria-label", TITLE);
+  const confirm = bevelButton(confirmLabel, {
+    variant: "primary", onClick: onConfirm, theme,
+    parts: ["dialog.button", "crop.button"], labelParts: ["dialog.buttonLabel", "crop.buttonLabel"],
+  });
+  frame.footer.append(confirm);
+  return { ...frame, confirm };
+}
+
+// The stage is quickcrop's; its parts take only a page's explicit crop.* declarations,
+// so dimming and crop lines keep their contrast unless the page asks otherwise.
+function themeStage(stage, theme) {
+  if (!themed(theme)) return;
+  const paint = (el, names) => {
+    if (!el) return;
+    markParts(el, theme, names);
+    style(el, partRules(theme, names, {}));
+  };
+  paint(stage, ["crop.stage"]);
+  paint(stage.querySelector(":scope > img"), ["crop.image"]);
+  paint(stage.querySelector(".qc-dim"), ["crop.dim"]);
+  paint(stage.querySelector(".qc-box"), ["crop.selection"]);
+  for (const corner of ["nw", "ne", "sw", "se"]) paint(stage.querySelector(`.qc-handle.qc-${corner}`), ["crop.handle", `crop.handle.${corner}`]);
+}
+
+// A themed frame is measured: a hidden copy is mounted for one layout read and removed,
+// without touching focus or the scroll lock. The room left for the stage is the body's
+// inner width, and the overlay's inner height less the empty panel. The exact Bevel
+// frame keeps its fixed allowances.
+function measure(theme, confirmLabel) {
+  const { root, overlay, panel, body } = cropFrame(theme, confirmLabel);
+  root.setAttribute("aria-hidden", "true");
+  style(root, ["visibility:hidden", "pointer-events:none"]);
+  document.body.append(root);
+  try {
+    const px = (value) => parseFloat(value) || 0;
+    const o = getComputedStyle(overlay), b = getComputedStyle(body);
+    const width = body.clientWidth - px(b.paddingLeft) - px(b.paddingRight);
+    const height = overlay.clientHeight - px(o.paddingTop) - px(o.paddingBottom) - panel.offsetHeight;
+    return { width: Math.max(1, Math.floor(width)), height: Math.max(1, Math.floor(height)) };
+  } finally {
+    root.remove();
+  }
+}
+
+export function createCropAdapter({ theme = null, confirmLabel = "Crop" } = {}) {
+  return {
+    // Unthemed, the stage fits inside the panel by fixed allowances: the overlay's 16px
+    // side inset, the panel's 1px border and the body's 22px padding a side; below it the
+    // header, the footer and the overlay's top inset. Widths come from clientWidth, which
+    // leaves out a classic scrollbar as the overlay does.
+    fit() {
+      if (themed(theme)) return measure(theme, confirmLabel);
+      const width = document.documentElement.clientWidth;
+      return {
+        width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
+        height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
+      };
+    },
+    open({ content, confirmLabel: label, onConfirm, onCancel }) {
+      const { root, overlay, panel, body, close, confirm } = cropFrame(theme, label, () => onConfirm());
+      themeStage(content, theme);
+      body.append(content);
+
+      close.addEventListener("click", () => onCancel());
+      panel.addEventListener("submit", (event) => event.preventDefault());
+      let pressedOnBackdrop = false;
+      overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
+      overlay.addEventListener("click", (event) => {
+        if (pressedOnBackdrop && event.target === overlay) onCancel();
+        pressedOnBackdrop = false;
+      });
+      // Capture, and stopped there, so a dialog underneath (a CMS confirm through
+      // clay.modal) does not take the same key as its own: Escape cancels this crop,
+      // Tab stays inside it.
+      const onKey = (event) => {
+        if (event.key === "Tab") {
+          event.stopPropagation();
+          keepFocusIn(panel, event);
+          return;
+        }
+        if (event.key !== "Escape") return;
         event.stopPropagation();
-        keepFocusIn(panel, event);
-        return;
-      }
-      if (event.key !== "Escape") return;
-      event.stopPropagation();
-      onCancel();
-    };
-    document.addEventListener("keydown", onKey, true);
-
-    // The page does not scroll behind the crop, as it did not under themodal. The
-    // previous value comes back, so a modal underneath keeps its own lock.
-    const overflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      document.removeEventListener("keydown", onKey, true);
-      document.body.style.overflow = overflow;
-      root.remove();
-    };
-    // A modal opened on top supersedes this crop the way it supersedes itself: the
-    // crop is cancelled, so its promise settles and the next crop can open.
-    dismissOf.set(root, () => { finish(); onCancel(); });
-
-    root.setAttribute("aria-hidden", "false");
-    document.body.append(root);
-    confirm.focus();
-
-    return { close: finish };
-  },
-};
+        onCancel();
+      };
+      document.addEventListener("keydown", onKey, true);
+
+      // The page does not scroll behind the crop, as it did not under themodal. The
+      // previous value comes back, so a modal underneath keeps its own lock.
+      const overflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        document.removeEventListener("keydown", onKey, true);
+        document.body.style.overflow = overflow;
+        root.remove();
+      };
+      // A modal opened on top supersedes this crop the way it supersedes itself: the
+      // crop is cancelled, so its promise settles and the next crop can open.
+      dismissOf.set(root, () => { finish(); onCancel(); });
+
+      root.setAttribute("aria-hidden", "false");
+      document.body.append(root);
+      confirm.focus();
+
+      return { close: finish };
+    },
+  };
+}
+
+// The exact Bevel frame, for callers that want ClayJS's crop without the page's theme.
+export const bevelCropAdapter = createCropAdapter();
 
 export function quickcrop(file, options = {}) {
   const modal = options.modal ?? "auto";
   const framed = modal === "auto" || isThemodal(modal);
-  return vendorQuickcrop(file, framed ? { ...options, modal: bevelCropAdapter } : options);
+  if (!framed) return vendorQuickcrop(file, options);
+  const adapter = createCropAdapter({ theme: resolveTheme(), confirmLabel: options.labels?.confirm ?? "Crop" });
+  return vendorQuickcrop(file, { ...options, modal: adapter });
 }
 
 export default quickcrop;

package/src/plugins/sortable.js

@@ -217,15 +217,31 @@ function makeSortable(sortableElem, Sortable, record = loose) {
   // Add onsorting callback if attribute exists (fires during drag)
   const onsortingCode = sortableElem.getAttribute('onsorting');
   if (onsortingCode) {
-    options.onMove = function(evt) {
-      if (!record.admitted) return;
-      try {
-        const asyncFn = new Function(`return (async function(evt) { ${onsortingCode} })`)();
-        asyncFn.call(sortableElem, evt);
-      } catch (error) {
-        console.error('Error in onsorting execution:', error);
-      }
-    };
+    // Sortable reads onMove's return value (false cancels the move, 1 or -1 picks a
+    // side), so the handler runs synchronously and its value goes back. A handler that
+    // awaits cannot answer in time; it still runs, as an async function, and Sortable
+    // gets no answer from it.
+    // Code that awaits compiles as async: a plain function would read `await (x)` as a
+    // call to a function named await and throw on every move.
+    let onsorting = null;
+    try {
+      onsorting = /\bawait\b/.test(onsortingCode)
+        ? new Function(`return (async function(evt) { ${onsortingCode} })`)()
+        : new Function('evt', onsortingCode);
+    } catch (error) {
+      console.error('Error in onsorting compilation:', error);
+    }
+    if (onsorting) {
+      options.onMove = function(evt) {
+        if (!record.admitted) return;
+        try {
+          const answer = onsorting.call(sortableElem, evt);
+          return answer instanceof Promise ? undefined : answer;
+        } catch (error) {
+          console.error('Error in onsorting execution:', error);
+        }
+      };
+    }
   }
 
   // After a drop, run any author onsorted code, then notify reactive libraries.

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;

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

@@ -1,12 +1,24 @@
 import { saveToken } from "../core/host-attrs.js";
 import { storage } from "../lib/doc-storage.js";
+import { isSaveInProgress } from "../core/save-core.js";
 
-const TITLE = "Saved data was overwritten";
+const TITLE = "Some saved data was removed";
+const TITLES = {
+  recent: "A change from outside this page removed something you typed",
+  "all-typed": "A change from outside this page removed everything you typed",
+  emptied: "A change from outside this page emptied this page's data",
+  unreadable: "A change from outside this page left its data unreadable",
+};
+const TYPED_SHOWN = 3;
+const HOUR_MS = 3600000;
 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 EXTERNAL_WINDOW_MS = 10000;
+const SETTLE_CAP_MS = 6000;
+const SAVE_UNSETTLED_EVENTS = ["clay:save-error", "clay:save-offline", "clay:save-conflict"];
 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.";
@@ -20,7 +32,15 @@ const isPending = (event) => Boolean(event) && typeof event.id === "string" && e
 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 canPutBack = (current, event) => allowed(current, event, "put-back", event.canPutBack);
+const typed = (event) => (Array.isArray(event.typed) ? event.typed : []);
+const reasoned = (event) => Boolean(event.reason);
+const titleFor = (event) => TITLES[event.reason] ?? TITLE;
+const typedLoss = (event) => event.reason === "recent" || event.reason === "all-typed";
+const toneFor = (event) => (typedLoss(event) ? "info" : "warning");
 const credentials = () => (saveToken() ? "omit" : "same-origin");
+const settling = (current) =>
+  isSaveInProgress() || (current.lastExternal > 0 && Date.now() - current.lastExternal < EXTERNAL_WINDOW_MS);
 const headers = (extra = {}) => ({ "Document-URL": location.href, ...extra });
 
 function removeServerBar() {
@@ -34,7 +54,7 @@ function say(message, type) {
   }, () => {});
 }
 
-function describe(current, event) {
+function sourceOf(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
@@ -43,12 +63,54 @@ function describe(current, event) {
   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.");
+  return parts;
+}
+
+function labelFor(path) {
+  const parts = String(path ?? "").split(".").filter((part) => part && !/^\[[^\]]*\]$/.test(part));
+  const last = (parts[parts.length - 1] ?? "").replace(/\[[^\]]*\]/g, "").trim();
+  return last.replace(/[_-]+/g, " ") || "value";
+}
+
+function typedLine(event) {
+  const rows = typed(event);
+  if (!rows.length) return "";
+  const shown = rows.slice(0, TYPED_SHOWN).map((row) => `${labelFor(row.path)}: "${row.yours}"`);
+  const more = rows.length - shown.length;
+  return `${shown.join("; ")}${more > 0 ? ` and ${more} more.` : "."}`;
+}
+
+function typedWhen(event) {
+  if (event.reason === "all-typed") return "";
+  const row = typed(event)[0];
+  const at = typeof row?.at === "number" ? row.at : Date.parse(row?.at);
+  if (!Number.isFinite(at)) return "";
+  const ago = Date.now() - at;
+  if (ago < 0 || ago >= HOUR_MS) return "";
+  const minutes = Math.max(1, Math.floor(ago / 60000));
+  return `You typed ${typed(event).length === 1 ? "it" : "them"} ${plural(minutes, "minute")} ago.`;
+}
+
+function detailFor(current, event) {
+  if (!reasoned(event)) {
+    const parts = sourceOf(event);
+    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(" ");
+  }
+  const parts = [];
+  if (typedLoss(event)) {
+    parts.push(typedLine(event) || sourceOf(event).join(" "));
+    const when = typedWhen(event);
+    if (when) parts.push(when);
   } else {
-    parts.push("It cannot be restored from here.");
+    parts.push(sourceOf(event).join(" "));
   }
   if (canRevert(current, event)) parts.push("Undo the change also removes edits made since.");
   return parts.join(" ");
@@ -56,14 +118,26 @@ function describe(current, event) {
 
 function actionsFor(current, event) {
   const actions = [];
-  if (canRestore(current, event)) actions.push({ label: "Restore", onClick: () => choose(current, event, "restore") });
+  if (!reasoned(event)) {
+    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;
+  }
+  if (canPutBack(current, event)) actions.push({ label: "Put it back", onClick: () => choose(current, event, "put-back") });
   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") });
+  actions.push({ label: "Keep the change", 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("|");
+  const title = titleFor(event);
+  const detail = detailFor(current, event);
+  const key = [
+    event.id, title, event.reason ?? "", JSON.stringify(typed(event)),
+    canRestore(current, event), canPutBack(current, event), canRevert(current, event),
+    event.lastWriteAt, detail,
+  ].join("|");
   if (current.drawn === key) return true;
   current.drawn = key;
   current.eventId = event.id;
@@ -77,15 +151,20 @@ async function draw(current, event) {
     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) });
+  const previous = current.title;
+  current.title = title;
+  if (previous && previous !== title) ui.dismissPersistent(previous, { now: true });
+  ui.dismissPersistent(title, { now: true });
+  ui.toastPersistent(title, toneFor(event), { detail, actions: actionsFor(current, event) });
   return true;
 }
 
 function clearNotice(current) {
+  const title = current.title;
   current.drawn = null;
   current.eventId = null;
-  ui?.dismissPersistent(TITLE, { now: true });
+  current.title = null;
+  if (title) ui?.dismissPersistent(title, { now: true });
 }
 
 async function read(current) {
@@ -113,7 +192,11 @@ async function read(current) {
   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 (current.resolved.has(body.event.id) || current.waiting === body.event.id) return;
+    if (!current.waited.has(body.event.id) && settling(current)) {
+      waitForSettle(current, body.event.id);
+      return;
+    }
     if (await draw(current, body.event)) removeServerBar();
     return;
   }
@@ -150,7 +233,7 @@ function settle(current, event, choice, status, body) {
   } 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");
+    say(choice === "restore" || choice === "put-back" ? "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 {
@@ -202,17 +285,44 @@ function onNotification(current, e) {
     if (typeof data?.id !== "string") return;
     current.turn++;
     current.resolved.add(data.id);
+    if (current.waiting === data.id) stopWaiting(current);
     if (current.eventId === data.id) clearNotice(current);
     return;
   }
   if (action === "raised" && isPending(data) && !current.resolved.has(data.id)) {
     current.turn++;
+    if (current.waiting === data.id) return;
+    if (!current.waited.has(data.id) && settling(current)) {
+      waitForSettle(current, data.id);
+      return;
+    }
     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 stopWaiting(current) {
+  if (!current.waiting) return false;
+  current.waiting = null;
+  clearTimeout(current.waitTimer);
+  current.waitTimer = null;
+  return true;
+}
+
+function endWait(current, { now = false } = {}) {
+  if (!stopWaiting(current) || session !== current) return;
+  if (now) read(current);
+  else armRead(current);
+}
+
+function waitForSettle(current, id) {
+  current.waited.add(id);
+  current.waiting = id;
+  clearTimeout(current.waitTimer);
+  current.waitTimer = setTimeout(() => endWait(current, { now: true }), SETTLE_CAP_MS);
+}
+
 function armRead(current) {
   if (current.timer) return;
   current.timer = setTimeout(() => {
@@ -235,22 +345,30 @@ export function start({ href, reload = () => window.location.reload() }) {
   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(),
+    lastExternal: 0, waiting: null, waitTimer: null, waited: new Set(),
+    busy: false, drawn: null, eventId: null, title: null, resolved: new Set(), refused: new Set(),
   };
   session = current;
   const { signal } = listeners;
   document.addEventListener("clay:notification", (e) => onNotification(current, e), { signal });
+  document.addEventListener("clay:sync-applied", (e) => {
+    if (e.detail?.source === "disk") current.lastExternal = Date.now();
+  }, { signal });
   document.addEventListener("clay:save-saved", () => {
     current.lastSave = Date.now();
-    armRead(current);
+    if (current.waiting) endWait(current);
+    else armRead(current);
   }, { signal });
+  for (const name of SAVE_UNSETTLED_EVENTS) {
+    document.addEventListener(name, () => endWait(current, { now: true }), { 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");
+    say(done === "restore" || done === "put-back" ? "Your saved data is back." : "The earlier version is back.", "success");
   }
   read(current);
 }
@@ -261,5 +379,6 @@ export function stop() {
   session = null;
   current.listeners.abort();
   clearTimeout(current.timer);
+  clearTimeout(current.waitTimer);
   clearNotice(current);
 }