@panphora/clayjs 1.6.0 → 1.7.0

package/src/core/save.js

@@ -18,15 +18,22 @@ import {
   replacePageWith as replacePageWithCore,
   addDocumentTransform,
   isSaveInProgress,
-  saveFateIsUnknown
+  saveFateIsUnknown,
+  withKeepalive
 } from "./save-core.js";
 import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison } from "./snapshot.js";
-import { seedEtag } from "./etag.js";
+import { seedEtag, lastSeenEtag } from "./etag.js";
 import { gateCaptureToken, gateClearIfUnchanged, pageMaybeDirty } from "../lib/dirty-gate.js";
+import { hasUnsavedState } from "../lib/unsaved-state.js";
 import { autosaveActive } from "../lib/autosave-state.js";
 import { ROOT_LIBRARY_ATTRS, SAVE_TOKEN_ATTRS, LEGACY_SAVE_TOKEN_ATTRS } from "../lib/root-attrs.js";
 import { logSaveCheck, logBaseline } from "../lib/autosave-debug.js";
 import { initUserGesture, markExplicitSave, clearExplicitSave } from "../lib/user-gesture.js";
+// A deliberate import cycle: unsaved-warning reads this module's saved baseline, and
+// flush asks the SAME bytes question the close warning asks, through `bytesUnsaved`.
+// Both read across it at call time, never while a module is evaluating, so neither
+// side sees a half-built module.
+import { bytesUnsaved } from "./unsaved-warning.js";
 
 // Keep this library's own root state out of the saved bytes.
 //
@@ -207,23 +214,26 @@ export function resumeAutosave() {
 }
 
 // ============================================
-// THE PREVIEW HOLD
+// THE ALL-SAVE HOLD
 // ============================================
 //
-// While an AI edit's rewrite is on screen and not yet kept, the DOM holds words the
-// person has not accepted. Every save would write them, the explicit ones included,
-// so for that window no save goes out at all. A save asked for meanwhile is
-// remembered and runs on release; Keep releases without the replay because it saves
-// right after.
+// While an operation owns the page's persisted state, no save goes out at all. A
+// save asked for meanwhile is remembered and runs on release.
 let previewHold = 0;
 let previewMissed = false;
+const PREVIEW_HOLD_REASON = 'Waiting for the AI edit to be kept or reverted';
+const holdReasons = new Map();
 
-export function holdAllSaves() {
+export function holdAllSaves(reason = PREVIEW_HOLD_REASON) {
   previewHold++;
+  holdReasons.set(reason, (holdReasons.get(reason) || 0) + 1);
 }
 
-export function releaseAllSaves({ replay = true } = {}) {
-  if (previewHold === 0) return;
+export function releaseAllSaves({ replay = true, reason = PREVIEW_HOLD_REASON } = {}) {
+  const count = holdReasons.get(reason) || 0;
+  if (count === 0) return;
+  if (count === 1) holdReasons.delete(reason);
+  else holdReasons.set(reason, count - 1);
   previewHold--;
   if (previewHold > 0) return;
   const missed = previewMissed;
@@ -235,11 +245,16 @@ export function savesHeld() {
   return previewHold > 0;
 }
 
+export function saveHoldReason() {
+  if (previewHold === 0) return null;
+  return holdReasons.keys().next().value || PREVIEW_HOLD_REASON;
+}
+
 function heldForPreview(callback, resolve) {
   if (previewHold === 0) return false;
   previewMissed = true;
   clearExplicitSave();
-  const skipped = skipped_('Waiting for the AI edit to be kept or reverted');
+  const skipped = skipped_(saveHoldReason());
   callback(skipped);
   resolve(skipped);
   return true;
@@ -560,6 +575,101 @@ export function savePageForce(callback = () => {}) {
   });
 }
 
+// Resolve on the next save that settles, or reject once the deadline has passed.
+// Every settled state is one, not just success: a save that failed is an answer about
+// the page's bytes too, and the caller decides what to do with it.
+function settled(deadline) {
+  const events = ['clay:save-saved', 'clay:save-error', 'clay:save-offline', 'clay:save-conflict'];
+  return new Promise((resolve, reject) => {
+    let timer = null;
+    const cleanup = () => {
+      clearTimeout(timer);
+      for (const name of events) document.removeEventListener(name, onSettle);
+    };
+    const onSettle = () => {
+      cleanup();
+      resolve();
+    };
+    const remaining = deadline - Date.now();
+    if (remaining <= 0) {
+      reject(Object.assign(new Error('Save timed out.'), { state: 'failed' }));
+      return;
+    }
+    timer = setTimeout(() => {
+      cleanup();
+      reject(Object.assign(new Error('Save timed out.'), { state: 'failed' }));
+    }, remaining);
+    for (const name of events) document.addEventListener(name, onSettle);
+  });
+}
+
+function flushError(message, state) {
+  return Object.assign(new Error(message), { state });
+}
+
+// Resolve when `name` fires on document, or reject at the deadline.
+function nextEvent(name, deadline) {
+  return new Promise((resolve, reject) => {
+    const remaining = deadline - Date.now();
+    if (remaining <= 0) return reject(flushError('Save timed out.', 'failed'));
+    const timer = setTimeout(() => {
+      document.removeEventListener(name, onEvent);
+      reject(flushError('Save timed out.', 'failed'));
+    }, remaining);
+    const onEvent = () => { clearTimeout(timer); resolve(); };
+    document.addEventListener(name, onEvent, { once: true });
+  });
+}
+
+// Save now; answer only when the host has accepted the bytes the page holds now.
+// Resolves { state: 'view' | 'clean' | 'saved', etag }. Rejects with an Error carrying
+// state 'failed' (including a timeout), 'conflict', or 'blocked' (the bytes are on the
+// host but the page holds work a save cannot write, registered through
+// clay.registerUnsavedState; only a person can resolve that). Never overwrites.
+// `keepalive` is a transport hint honoured under 60 KB of UTF-8.
+export async function flushSave({ keepalive = false, timeoutMs = 15000 } = {}) {
+  if (!isEditMode) return { state: 'view', etag: null };
+  const deadline = Date.now() + timeoutMs;
+  let timer = null;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(flushError('Save timed out.', 'failed')), Math.max(0, timeoutMs));
+  });
+  try {
+    return await Promise.race([flushBytes(keepalive, deadline), timeout]);
+  } catch (err) {
+    if (err && typeof err.state === 'string') throw err;
+    throw flushError(err?.message || 'Save failed', 'failed');
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function flushBytes(keepalive, deadline) {
+  // Load-time module churn is not the person's work: autosave never saves it, and
+  // neither does a flush. Wait for the baseline to settle (at most MAX_SETTLE_MS).
+  if (!baselineSettled()) await nextEvent('clay:baseline-settled', deadline);
+
+  let saved = false;
+  let etag = null;
+  for (let attempt = 0; attempt < 4; attempt++) {
+    if (isSaveInProgress()) await settled(deadline);
+    if (isSaveConflicted()) throw flushError('This document has a conflict to resolve.', 'conflict');
+    const token = gateCaptureToken();
+    if (!bytesUnsaved()) {
+      gateClearIfUnchanged(token);
+      if (hasUnsavedState()) throw flushError('This document has unsaved work a save cannot write.', 'blocked');
+      return { state: saved ? 'saved' : 'clean', etag: etag ?? lastSeenEtag() };
+    }
+    const result = await withKeepalive(keepalive, () => savePage());
+    // The lane was busy (a drained pending save is on the wire): wait it out next turn.
+    if (result.msgType === 'skipped') continue;
+    if (!result.ok) throw flushError(result.msg || 'Save failed', result.msgType === 'conflict' || isSaveConflicted() ? 'conflict' : 'failed');
+    saved = true;
+    etag = result.etag ?? null;
+  }
+  throw flushError('The document kept changing while saving.', 'failed');
+}
+
 /**
  * Keep this tab's version, over the one the host is holding.
  *
@@ -752,7 +862,7 @@ export function savePageThrottled(callback = () => {}) {
 
   if (previewHold > 0) {
     previewMissed = true;
-    const skipped = skipped_('Waiting for the AI edit to be kept or reverted');
+    const skipped = skipped_(saveHoldReason());
     callback(skipped);
     return Promise.resolve(skipped);
   }

package/src/core/unsaved-warning.js

@@ -43,6 +43,39 @@ preloadIfEnabled();
 // sandboxed document, which cannot read cookies at all. Those are exactly the
 // documents where an unsaved edit is easiest to lose. If the page is editable,
 // the person editing it deserves the warning.
+//
+// The same predicate is exposed as `clay.hasUnsavedChanges`, which a host asks
+// synchronously before deciding whether a save is worth asking for.
+export function hasUnsavedChanges() {
+  if (!isEditMode) return false;
+
+  // Work outside the DOM first: it needs no capture, and a capture that throws
+  // must not hide it. The demo plugin does not save it either, so it warns there too.
+  if (hasUnsavedState()) return true;
+
+  // The demo plugin saves the page's bytes into this browser's own storage, so
+  // leaving loses none of them.
+  if (window.clay?.demo) return false;
+
+  return bytesUnsaved();
+}
+
+// The page's own bytes against the last bytes the host accepted. A capture that throws
+// counts as unsaved: something on the page is broken, and "nothing to lose" is the one
+// answer that can lose work.
+//
+// The DIRTY domain, not the autosave domain. An edit inside a no-trigger-autosave
+// region never starts a save by itself, which is exactly why closing the tab on one has
+// to warn: nothing else is going to write it.
+export function bytesUnsaved() {
+  if (!isEditMode) return false;
+  try {
+    return captureForDirtyCheck() !== getLastSavedDirty();
+  } catch {
+    return true;
+  }
+}
+
 window.addEventListener('beforeunload', (event) => {
   if (!isEditMode) return;
 
@@ -51,26 +84,16 @@ window.addEventListener('beforeunload', (event) => {
     return;
   }
 
-  // Work outside the DOM first: it needs no capture, and a capture that throws
-  // must not hide it. The demo plugin does not save it either, so it warns there too.
-  const held = hasUnsavedState();
-
-  // The demo plugin saves the page's bytes into this browser's own storage, so
-  // leaving loses none of them.
-  let bytesDiffer = false;
-  if (!held && !window.clay?.demo) {
-    // The DIRTY domain, not the autosave domain. An edit inside a
-    // no-trigger-autosave region never starts a save by itself, which is exactly
-    // why closing the tab on one has to warn: nothing else is going to write it.
-    const currentForCompare = captureForDirtyCheck();
-    const lastSaved = getLastSavedDirty();
-    bytesDiffer = currentForCompare !== lastSaved;
-    // Debug: log what's different before showing the warning
-    if (bytesDiffer) logUnloadDiffSync(currentForCompare, lastSaved);
-  }
+  if (!hasUnsavedChanges()) return;
 
-  if (held || bytesDiffer) {
-    event.preventDefault();
-    event.returnValue = '';
+  event.preventDefault();
+  event.returnValue = '';
+  // Debug only, after the decision: a capture that throws here must not cancel the warning.
+  if (!window.clay?.demo && !hasUnsavedState()) {
+    try {
+      const currentForCompare = captureForDirtyCheck();
+      const lastSaved = getLastSavedDirty();
+      if (currentForCompare !== lastSaved) logUnloadDiffSync(currentForCompare, lastSaved);
+    } catch {}
   }
 });

package/src/lib/content-dom.js

@@ -5,9 +5,9 @@ const UNSUPPORTED_SELECTOR = /:(?:focus(?:-within|-visible)?|hover|active|visite
 function copyControlState(source, copy) {
   if (!/^(INPUT|TEXTAREA|SELECT|OPTION)$/.test(source.tagName || '')) return
   const type = (source.getAttribute?.('type') || '').toLowerCase()
-  if ('value' in source && 'value' in copy && source.tagName !== 'OPTION' && type !== 'checkbox' && type !== 'radio') copy.value = source.value
-  if ('checked' in source && 'checked' in copy) copy.checked = source.checked
-  if ('selected' in source && 'selected' in copy) copy.selected = source.selected
+  if ('value' in source && 'value' in copy && source.tagName !== 'OPTION' && type !== 'checkbox' && type !== 'radio' && type !== 'file') copy.value = source.value
+  if (source.tagName === 'INPUT' && (type === 'checkbox' || type === 'radio')) copy.checked = source.checked
+  if (source.tagName === 'OPTION') copy.selected = source.selected
   if (source.tagName === 'SELECT') {
     for (let i = 0; i < source.options.length; i++) copy.options[i].selected = source.options[i].selected
   }

package/src/lib/dirty-gate.js

@@ -35,6 +35,26 @@ let clearedAt = 0;
 let paused = false;
 let started = false;
 
+// The state change, announced on the document: `clay:dirty` when work nothing has
+// written appears, `clay:clean` when a save (or the oracle) has accounted for it. A
+// burst of edits is ONE announcement, since what a listener wants is the state, not
+// the edit. Only a transition is dispatched.
+let announcedDirty = false;
+let queued = false;
+
+function scheduleAnnounce() {
+  if (!isEditMode || queued) return;
+  queued = true;
+  queueMicrotask(() => {
+    queued = false;
+    if (typeof document === 'undefined') return;
+    const dirty = pageMaybeDirty();
+    if (dirty === announcedDirty) return;
+    announcedDirty = dirty;
+    document.dispatchEvent(new CustomEvent(dirty ? 'clay:dirty' : 'clay:clean'));
+  });
+}
+
 const PERSIST_CONTROLS = `input${PERSIST}, textarea${PERSIST}, select${PERSIST}`;
 
 // Regions the loss oracle never sees. The hub feed already skips them, through
@@ -81,6 +101,7 @@ function onUserInput(event) {
   if (!(el.matches('input, textarea, select') || el.isContentEditable)) return;
   if (el.closest(GATE_IGNORE)) return;
   changes++;
+  scheduleAnnounce();
 }
 
 export function startDirtyGate() {
@@ -89,7 +110,10 @@ export function startDirtyGate() {
   Mutation.onAnyChange(
     { omitChangeDetails: true, require: 'dirty' },
     () => {
-      if (!paused) changes++;
+      if (!paused) {
+        changes++;
+        scheduleAnnounce();
+      }
     }
   );
   document.addEventListener('input', onUserInput, true);
@@ -151,6 +175,7 @@ export function probeMarkClean() {
   for (const el of gatedPersistControls()) {
     probeCache.set(el, controlSignature(el));
   }
+  scheduleAnnounce();
 }
 
 export function pageMaybeDirty() {
@@ -173,6 +198,7 @@ export function gateCaptureToken() {
 /** A change nothing in the DOM recorded: the page holds text a save has not written. */
 export function gateMarkDirty() {
   changes++;
+  scheduleAnnounce();
 }
 
 export function gateClearIfUnchanged(token) {
@@ -186,6 +212,7 @@ export function gateClearIfUnchanged(token) {
   for (const [el, sig] of token.probe) {
     if (controlSignature(el) === sig) probeCache.set(el, sig);
   }
+  scheduleAnnounce();
 }
 
 if (typeof document !== 'undefined' && isEditMode) {

package/src/loader-logic.js

@@ -8,6 +8,7 @@ export const CORE_WAVES = {
     // is exactly the case where edit mode is off, so the editOnly wave would never
     // reach it. It draws nothing on any other page.
     "core/stale-host-notice.js",
+    "core/page-data.js",
   ],
   editOnly: [
     "vendor/hyper-morph.vendor.js",
@@ -66,6 +67,7 @@ export const MODULES = {
   "lib/mutation.js":            () => import("./lib/mutation.js"),
   "core/edit-mode.js":          () => import("./core/edit-mode.js"),
   "core/stale-host-notice.js":  () => import("./core/stale-host-notice.js"),
+  "core/page-data.js":          () => import("./core/page-data.js"),
   "core/snapshot.js":           () => import("./core/snapshot.js"),
   "core/save-core.js":          () => import("./core/save-core.js"),
   "core/save.js":               () => import("./core/save.js"),

package/src/loader.js

@@ -50,7 +50,7 @@ export async function boot(base, params, readyResolve) {
       continue;
     }
     loaded[path] = mod;
-    attachPluginMember(path, mod);   // immediately, not after the loop: hypercms's ?cms=true
+    attachPluginMember(path, mod, loaded); // immediately, not after the loop: hypercms's ?cms=true
                                      // auto-open runs as a microtask queued during ITS evaluation
                                      // (before boot resumes) and reads clay.RichClay and clay.undo,
                                      // which earlier plugins must have attached by then
@@ -83,13 +83,23 @@ function assembleCore(loaded, { isEditMode, isOwner }, regionPolicy) {
   const save = loaded["core/save.js"];
   const cacheBustMod = loaded["lib/cache-bust.js"];
   const hyperMorph = loaded["vendor/hyper-morph.vendor.js"];
+  const pageData = loaded["core/page-data.js"];
+
+  clay.readData = pageData.readData;
+  clay.writeData = pageData.writeData;
 
   if (save) {
     const saveFn = save.savePage || save.default;
     saveFn.force = save.savePageForce;
     saveFn.overwrite = save.saveOverwritingConflict;
+    saveFn.flush = save.flushSave;
     clay.save = saveFn;
   }
+  // The close warning's own predicate, reachable without a capture. It falls back to
+  // false rather than to absent: the module is edit-only, and a document that cannot
+  // save has nothing unsaved. Older clayjs has no such member, and that is the answer
+  // a host feature-detects.
+  clay.hasUnsavedChanges = loaded["core/unsaved-warning.js"]?.hasUnsavedChanges ?? (() => false);
   if (snapshot) {
     clay.getHTML = snapshot.getPageContents;
     clay.addDocumentTransform = snapshot.addDocumentTransform;
@@ -101,7 +111,7 @@ function assembleCore(loaded, { isEditMode, isOwner }, regionPolicy) {
   if (hyperMorph) clay.morph = hyperMorph.morph;
 }
 
-function attachPluginMember(path, mod) {
+function attachPluginMember(path, mod, loaded) {
   const clay = window.clay;
 
   if (path === "plugins/undo.js") {
@@ -109,6 +119,7 @@ function attachPluginMember(path, mod) {
   } else if (path === "sync/live-sync.js") {
     clay.morph = mod.morph;
     clay.conflicts = mod.conflicts;
+    loaded["core/page-data.js"].setPageDataLiveSync(mod.liveSync);
   } else if (path === "plugins/cms.js") {
     clay.cms = mod.cms || mod.default;
   } else if (path === "plugins/upload.js") {

package/src/plugins/wire.js

@@ -506,10 +506,10 @@ async function flushSave() {
   // surface is an opt-in satellite script, absent on every page the loader
   // builds, so reading it here made "is a save on the wire" permanently false.
   const { isSaveInProgress } = await import("../core/save-core.js");
-  // A held save is an AI edit preview waiting for Keep or Revert, not a page with
-  // nothing to save: posting now would hand the agent a file that is about to change.
-  const { savesHeld } = await import("../core/save.js");
-  if (savesHeld()) throw new Error("keep or revert the AI edit first");
+  // A held save means another operation owns the page's persisted state, not a
+  // page with nothing to save: posting now could hand the agent stale bytes.
+  const { savesHeld, saveHoldReason } = await import("../core/save.js");
+  if (savesHeld()) throw new Error(saveHoldReason());
   const deadline = Date.now() + SAVE_FLUSH_TIMEOUT_MS;
 
   for (let attempt = 0; attempt < 3; attempt++) {

package/src/sync/conflict-footprints.js

@@ -0,0 +1,41 @@
+import { conflicts } from './conflicts.js';
+
+const replacements = new WeakMap();
+
+export const replacementFootprint = (rec) => replacements.get(rec) || null;
+
+export function trackConflictFootprints(merge) {
+  const watched = new Map();
+  for (const rec of conflicts.list()) {
+    if (!rec.recovery?.text) continue;
+    const live = rec.recovery.subject.live;
+    const node = replacements.get(rec) || (live.length === 1 ? live[0] : null);
+    if (node?.nodeType === 1 && node.ownerDocument === document && node.isConnected) watched.set(rec, node);
+  }
+  if (!watched.size) return merge();
+  const observer = new MutationObserver(() => {});
+  observer.observe(document, { subtree: true, childList: true, attributes: true, characterData: true });
+  try {
+    const pending = merge();
+    const changes = observer.takeRecords();
+    if (changes.length !== 2) return pending;
+    const [insert, remove] = changes;
+    if (insert.type !== 'childList' || remove.type !== 'childList' || insert.target !== remove.target ||
+        insert.addedNodes.length !== 1 || insert.removedNodes.length ||
+        remove.removedNodes.length !== 1 || remove.addedNodes.length) return pending;
+    const old = remove.removedNodes[0];
+    const fresh = insert.addedNodes[0];
+    if (old.nodeType !== 1 || fresh.nodeType !== 1 || old.isConnected || !fresh.isConnected ||
+        old.namespaceURI !== fresh.namespaceURI || old.tagName === fresh.tagName ||
+        insert.nextSibling !== old || remove.previousSibling !== fresh ||
+        fresh.parentNode !== insert.target || fresh.previousSibling !== insert.previousSibling ||
+        fresh.nextSibling !== remove.nextSibling) return pending;
+    if (old.childNodes.length !== 1 || fresh.childNodes.length !== 1 || old.firstChild.nodeType !== 3 ||
+        !old.firstChild.isEqualNode(fresh.firstChild) || old.attributes.length !== fresh.attributes.length ||
+        [...old.attributes].some((a) => fresh.getAttributeNS(a.namespaceURI, a.localName) !== a.value)) return pending;
+    for (const [rec, node] of watched) if (node === old) replacements.set(rec, fresh);
+    return pending;
+  } finally {
+    observer.disconnect();
+  }
+}

package/src/sync/conflict-revert.js

@@ -1,5 +1,6 @@
 import { HyperMorph } from "../vendor/hyper-morph.vendor.js";
 import { conflicts } from "./conflicts.js";
+import { replacementFootprint } from "./conflict-footprints.js";
 import { SYNC_IGNORE_SELECTOR, REMOTE_WINS_SELECTOR } from "./live-sync.js";
 import { savePage } from "../core/save.js";
 import { gateMarkDirty } from "../lib/dirty-gate.js";
@@ -802,6 +803,8 @@ function footprintOf(rec, apply) {
   }
   const live = subject ? liveOf(subject, apply, subject.nodeType) : null;
   if (live) return live;
+  const replacement = replacementFootprint(rec);
+  if (replacement && onPage(replacement)) return replacement;
   const parent = r.structure && r.structure.localPlacement ? liveOf(r.structure.localPlacement.parent, apply, 1) : null;
   if (parent) return parent;
   const path = subject && subject.local.length ? subject.local[0] : [];

package/src/sync/conflicts.js

@@ -63,6 +63,33 @@ export function beginApply({ source, seq = null, etag = null, domain, root }) {
   return id;
 }
 
+function insertionProof(raw) {
+  if (!raw.every((c) => c.kind === 'structure' && c.detail === 'insert-collision' && c.recovery?.applied === true && !c.recovery.unavailable && c.recovery.structure?.localAction === 'inserted' && c.recovery.structure.fragmentKind === 'element')) return null;
+  const subject = raw[0].recovery.subject;
+  if (subject?.local?.length !== 1 || subject.merged?.length !== 1 || subject.live?.length !== 1) return null;
+  return { local: subject.local[0], merged: subject.merged[0], live: subject.live[0] };
+}
+
+function foldInsertions(groups) {
+  const proofs = new Map(groups.map((raw) => [raw, insertionProof(raw)]));
+  const below = (parent, child) => parent.length < child.length && parent.every((step, i) => step === child[i]);
+  const at = (root, path) => path.reduce((node, step) => step === 'content' ? node?.content : node?.childNodes[step], root);
+  const folded = new Map();
+  for (const raw of groups) {
+    const child = proofs.get(raw);
+    let owner = raw;
+    if (child) {
+      for (const candidate of groups) {
+        const parent = proofs.get(candidate);
+        if (parent && parent.local.length < proofs.get(owner).local.length && below(parent.local, child.local) && below(parent.merged, child.merged) && (parent.live.contains(child.live) || at(parent.live, child.merged.slice(parent.merged.length)) === child.live)) owner = candidate;
+      }
+    }
+    if (!folded.has(owner)) folded.set(owner, [...owner]);
+    if (raw !== owner) folded.get(owner).push(...raw);
+  }
+  return [...folded.values()];
+}
+
 export function completeApply(applyId, conflicts, { ticket }) {
   const apply = applies.get(applyId);
   if (!apply) return [];
@@ -74,7 +101,7 @@ export function completeApply(applyId, conflicts, { ticket }) {
     if (!groups.has(key)) groups.set(key, []);
     groups.get(key).push(c);
   }
-  const ids = [...groups.values()].map((raw) => install(apply, raw));
+  const ids = foldInsertions([...groups.values()]).map((raw) => install(apply, raw));
   pending.delete(applyId);
   if (!ids.length) applies.delete(applyId);
   if (ids.length) changed({ added: ids.map((id) => records.get(id)) });

package/src/sync/live-sync.js

@@ -60,6 +60,7 @@ import { pageMaybeDirty, pauseGate, resumeGate, gateCaptureToken, gateClearIfUnc
 import { gestureSeen } from '../lib/user-gesture.js';
 import { SyncStream } from './stream.js';
 import { conflicts, beginApply, completeApply, failApply } from './conflicts.js';
+import { trackConflictFootprints } from './conflict-footprints.js';
 
 // What a live-sync merge never reads or touches on any side: editor chrome,
 // content kept out of the save or the snapshot, frozen regions, and nodes
@@ -1339,6 +1340,7 @@ class LiveSync {
    * @param {object} [lane.extra] - extra mergeDocument options (the disk lane's beforeApply)
    */
   async _mergeIncoming(html, identityMap, { base, baseIdentityMap = null, captureLocal, synthetic, source = 'peer', seq = null, etag = null, extra = {} }) {
+    const mergeDocument = (options) => trackConflictFootprints(() => HyperMorph.mergeDocument(options));
     const store = this.identity;
     // A frame may neither write these onto our root nor, by not carrying them,
     // take ours away. Returning false is hyper-morph's veto for both directions.
@@ -1396,7 +1398,7 @@ class LiveSync {
     let localRoot = null;
     let applyId = null;
     if (base == null) {
-      pending = HyperMorph.mergeDocument({
+      pending = mergeDocument({
         ...common,
         base: null,
         local: { root: captureLocal(), toLive: originalSnapshotNode },
@@ -1414,7 +1416,7 @@ class LiveSync {
       const localRoot = captureLocal();
       const baseDoc = localRoot.ownerDocument;
       if (baseDoc.documentElement !== localRoot) baseDoc.replaceChild(localRoot, baseDoc.documentElement);
-      pending = HyperMorph.mergeDocument({
+      pending = mergeDocument({
         ...common,
         base: baseDoc,
         local: { root: localRoot, toLive: originalSnapshotNode },
@@ -1432,7 +1434,7 @@ class LiveSync {
         domain: source === 'disk' ? 'save' : 'sync',
       });
       try {
-        pending = HyperMorph.mergeDocument({
+        pending = mergeDocument({
           ...common,
           base,
           local: { root: localRoot, toLive: originalSnapshotNode },

package/src/ui/bevel-controls.js

@@ -72,8 +72,10 @@ function protectIcon(svg, size) {
       `fill:${attr('fill', svg.getAttribute('fill') ?? 'currentColor')}`,
       `stroke:${attr('stroke', svg.getAttribute('stroke') ?? 'none')}`,
     ];
-    if (el.hasAttribute('stroke-width')) rules.push(`stroke-width:${el.getAttribute('stroke-width')}`);
-    if (el.hasAttribute('stroke-linecap')) rules.push(`stroke-linecap:${el.getAttribute('stroke-linecap')}`);
+    for (const prop of ['stroke-width', 'stroke-linecap', 'stroke-linejoin']) {
+      const value = el.getAttribute(prop) ?? svg.getAttribute(prop);
+      if (value !== null) rules.push(`${prop}:${value}`);
+    }
     if (el.localName === 'path' && el.hasAttribute('d')) rules.push(`d:path("${el.getAttribute('d')}")`);
     style(el, rules);
   }
@@ -84,6 +86,7 @@ export function bevelButton(label, { variant = 'default', small = false, onClick
   const size = small ? SIZE.small : SIZE.normal;
   const reducedMotion = media('(prefers-reduced-motion: reduce)');
   const forced = media('(forced-colors: active)');
+  const coarse = media('(pointer: coarse)');
   const flags = { hovered: false, pressed: false, focusVisible: false, disabled: false };
   const pinned = new Map();
 
@@ -103,6 +106,7 @@ export function bevelButton(label, { variant = 'default', small = false, onClick
     }
     if (flags.focusVisible) rules.push(...RULES.focus);
     if (forced) rules.push(...MEDIA.forcedColors);
+    if (coarse) rules.push(...MEDIA.coarseButton);
     rules.push(...extra);
     for (const [prop, value] of pinned) rules.push(`${prop}:${value}`);
     restyle(b, rules);
@@ -234,6 +238,7 @@ export function bevelText(tag, rules = [], text) {
 export function paintInput(el, { rules = [] } = {}) {
   const flags = { hovered: false, focused: false };
   const forced = media('(forced-colors: active)');
+  const coarse = media('(pointer: coarse)');
   runtime(el);
   function applyState() {
     const height = el.localName === 'textarea' ? el.style.getPropertyValue('height') : '';
@@ -242,6 +247,7 @@ export function paintInput(el, { rules = [] } = {}) {
     if (flags.focused) list.push(...RULES.inputFocus);
     if (forced) list.push(...MEDIA.forcedColors);
     list.push(...rules);
+    if (coarse) list.push(...MEDIA.coarseInput);
     if (height) list.push(`height:${height}`);
     restyle(el, list);
   }

package/src/ui/bevel-dialog.js

@@ -3,7 +3,7 @@
 // backdrop clicks and settling, so each keeps the rules it already had.
 import { set } from "../lib/hostile-css.js";
 import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon } from "./bevel-controls.js";
-import { TOKENS, FONT_SANS, RULES } from "./bevel.js";
+import { TOKENS, FONT_SANS, RULES, GLYPHS } from "./bevel.js";
 
 // A frame's own way to settle itself. The modal is a singleton and clears every frame
 // when it opens; a frame it does not own (the crop dialog) registers here, so it is
@@ -32,8 +32,6 @@ export function keepFocusIn(container, event) {
 // The dashboard's dialog (Bevel's React dialog with the dashboard's overrides), drawn
 // inline. ClayJS loads no webfonts, so the title's Newsreader falls back to Georgia.
 const LINE = `1px solid ${TOKENS["line-2"]}`;
-const CLOSE_X =
-  '<svg viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>';
 
 // The close: a column at the header's right edge in the button face, or a 62px square
 // at the panel's corner when there is no header.
@@ -48,7 +46,7 @@ function dialogClose(label, inHeader) {
   b.type = "button";
   b.setAttribute("aria-label", label);
   b.title = label;
-  b.innerHTML = CLOSE_X;
+  b.innerHTML = GLYPHS.dialogClose;
   protectIcon(b.firstElementChild, 16);
   b.addEventListener("pointerenter", () => set(b, "background", hover));
   b.addEventListener("pointerleave", () => set(b, "background", TOKENS.face));