@panphora/clayjs 1.13.1 → 1.15.0

package/src/core/save.js

@@ -13,7 +13,7 @@ import throttle from "../lib/throttle.js";
 import Mutation from "../lib/mutation.js";
 import { isDraftMode, isEditMode, isOwner } from "./is-edit-mode.js";
 import {
-  saveHtml,
+  saveCapturedHtml,
   getPageContents,
   replacePageWith as replacePageWithCore,
   addDocumentTransform,
@@ -21,12 +21,15 @@ import {
   saveFateIsUnknown,
   withKeepalive
 } from "./save-core.js";
-import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison, captureForDirtyCheck } from "./snapshot.js";
+import { captureForComparison, captureForComparisonAndDirty, captureForSaveAndComparison, captureForDirtyCheck, captureSaveClone } from "./snapshot.js";
+import { paintSignature } from "../lib/derived.js";
 import { NO_TRIGGER_AUTOSAVE_SELECTOR } from "../lib/region-policy.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 { registerStyleAdoption } from "../lib/style-adoption.js";
+import { styleComparisonStripper } from "./style-comparisons.js";
 import { ROOT_LIBRARY_ATTRS, SAVE_TOKEN_ATTRS, LEGACY_SAVE_TOKEN_ATTRS, HOST_RESPONSE_ATTRS } from "../lib/root-attrs.js";
 import { logSaveCheck, logBaseline } from "../lib/autosave-debug.js";
 import { initUserGesture, markExplicitSave, clearExplicitSave } from "../lib/user-gesture.js";
@@ -35,6 +38,7 @@ import { initUserGesture, markExplicitSave, clearExplicitSave } from "../lib/use
 // 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";
+import { bootPhase } from "./boot-phase.js";
 
 // Keep this library's own root state out of the saved bytes.
 //
@@ -188,6 +192,8 @@ let unsavedChanges = false;
 // the split is observable there.
 let lastSavedContents = '';
 let lastSavedDirty = '';
+let baselineRevision = 0;
+const inFlightComparisons = new Set();
 // A save was requested while one was on the wire; run one more when it settles.
 let pendingSave = false;
 // An autosave arrived while one of our saves was on the wire. When that save lands
@@ -374,12 +380,11 @@ function skipped_(msg) {
  * where the write may or may not have landed, so it is not treated as success
  * either.
  */
-function applySaveResult(result, forComparison, forDirty, label, gateToken, forSave = null) {
+function applySaveResult(result, forComparison, forDirty, label, gateToken, forSave = null, captureId = null, quietConflict = false) {
   if (result.ok) {
     // Both baselines advance from the SAME pre-request capture, never from the
     // live DOM, so an edit made while the request was on the wire stays unsaved.
-    lastSavedContents = forComparison;
-    lastSavedDirty = forDirty;
+    setLastSavedBaselines(forComparison, forDirty);
     lastSavedBytes = forSave;
     unsavedChanges = false;
     // Generation-checked: clears the scoped-sync dirty gate only if nothing
@@ -391,15 +396,39 @@ function applySaveResult(result, forComparison, forDirty, label, gateToken, forS
     logBaseline(label, `${lastSavedContents.length} chars`);
     releaseConflictHold();
   } else if (result.msgType === 'conflict') {
+    // A refused heal leaves the tab as it was: still clean, no save event, no
+    // hold. The save that beat it reaches this tab through sync.
+    if (quietConflict) {
+      if (savingTimeout) {
+        clearTimeout(savingTimeout);
+        savingTimeout = null;
+      }
+      document.documentElement.setAttribute('savestatus', 'saved');
+      return;
+    }
     holdForConflict(result.conflictEtag);
     setSaveState('conflict', result.msg, result.msgType, {
       hadTimeout: result.hadTimeout === true,
       changedBy: result.changedBy ?? null,
       afterTimeout: result.afterTimeout === true,
       etag: result.conflictEtag ?? null,
+      code: result.code ?? null,
+      reason: result.reason ?? null,
+      retryAfter: result.retryAfter ?? null,
+      captureId,
     });
   } else if (result.msgType !== 'skipped') {
-    const extra = { status: result.status ?? null, hadTimeout: result.hadTimeout === true };
+    const extra = {
+      status: result.status ?? null,
+      hadTimeout: result.hadTimeout === true,
+      // The host's typed refusal, so a listener can react to the specific code
+      // rather than reading the message. `retryAfter` is only set where the host
+      // asked for a delay.
+      code: result.code ?? null,
+      reason: result.reason ?? null,
+      retryAfter: result.retryAfter ?? null,
+      captureId,
+    };
     if (!navigator.onLine) {
       setSaveState('offline', result.msg, '', extra);
     } else {
@@ -455,14 +484,14 @@ export function getLastSavedBytes() { return lastSavedBytes; }
 export function setLastSavedBaselines(forComparison, forDirty) {
   lastSavedContents = forComparison;
   lastSavedDirty = forDirty;
+  baselineRevision++;
 }
 
 // Kept for back-compat: a caller with one string means the page has no batching
 // region, or it does not know about the split. Setting both from it is the safe
 // reading, since the domains coincide exactly when there is no such region.
 export function setLastSavedContents(val) {
-  lastSavedContents = val;
-  lastSavedDirty = val;
+  setLastSavedBaselines(val, val);
 }
 
 /**
@@ -509,15 +538,15 @@ export function savePage(callback = () => {}) {
     // Single capture: clone once, get both versions
     // forSave strips non-persisted regions ([no-save]/[save-remove])
     // forComparison additionally strips every autosave-off region
-    let forSave, forComparison, forDirty;
+    let forSave, forComparison, forDirty, captureId;
     const gateToken = gateCaptureToken();
     try {
-      ({ forSave, forComparison, forDirty } = captureForSaveAndComparison());
+      ({ forSave, forComparison, forDirty, captureId } = captureForSaveAndComparison({ requestRefresh: true }));
     } catch (err) {
       console.error('savePage: captureForSaveAndComparison failed', err);
       clearExplicitSave();
-      setSaveState('error', err.message);
-      const result = { msg: err.message, msgType: 'error', code: null, etag: null };
+      setSaveState('error', err.message, '', { sent: false, code: err.code ?? null });
+      const result = { msg: err.message, msgType: 'error', code: err.code ?? null, etag: null };
       if (typeof callback === 'function') {
         callback(result);
       }
@@ -545,11 +574,14 @@ export function savePage(callback = () => {}) {
     // Start debounced 'saving' state (only shows if save takes >500ms)
     setSavingState();
 
-    // Use saveHtml directly with our pre-captured content (avoids double capture)
+    // Use the captured save path with our pre-captured content (avoids double capture)
+    const comparison = { forComparison, forDirty };
+    inFlightComparisons.add(comparison);
     ownSaveOnWire = true;
-    saveHtml(forSave, (result) => {
+    saveCapturedHtml(forSave, captureId, (result) => {
       ownSaveOnWire = false;
-      applySaveResult(result, forComparison, forDirty, 'updated after save', gateToken, forSave);
+      inFlightComparisons.delete(comparison);
+      applySaveResult(result, comparison.forComparison, comparison.forDirty, 'updated after save', gateToken, forSave, captureId);
       if (typeof callback === 'function') {
         callback(result);
       }
@@ -565,7 +597,7 @@ export function savePage(callback = () => {}) {
  * @param {Function} callback - Optional callback for custom handling
  * @returns {Promise<{msg: string, msgType: string}>}
  */
-export function savePageForce(callback = () => {}) {
+export function savePageForce(callback = () => {}, { quietConflict = false } = {}) {
   return new Promise((resolve) => {
     if (!isEditMode && !window.clay?.testMode) {
       const skipped = skipped_('Not in edit mode');
@@ -587,14 +619,14 @@ export function savePageForce(callback = () => {}) {
       setOfflineStateQuiet();
     }
 
-    let forSave, forComparison, forDirty;
+    let forSave, forComparison, forDirty, captureId;
     const gateToken = gateCaptureToken();
     try {
-      ({ forSave, forComparison, forDirty } = captureForSaveAndComparison());
+      ({ forSave, forComparison, forDirty, captureId } = captureForSaveAndComparison({ requestRefresh: true }));
     } catch (err) {
       console.error('savePageForce: captureForSaveAndComparison failed', err);
-      setSaveState('error', err.message);
-      const result = { msg: err.message, msgType: 'error', code: null, etag: null };
+      setSaveState('error', err.message, '', { sent: false, code: err.code ?? null });
+      const result = { msg: err.message, msgType: 'error', code: err.code ?? null, etag: null };
       if (typeof callback === 'function') {
         callback(result);
       }
@@ -603,10 +635,13 @@ export function savePageForce(callback = () => {}) {
 
     setSavingState();
 
+    const comparison = { forComparison, forDirty };
+    inFlightComparisons.add(comparison);
     ownSaveOnWire = true;
-    saveHtml(forSave, (result) => {
+    saveCapturedHtml(forSave, captureId, (result) => {
       ownSaveOnWire = false;
-      applySaveResult(result, forComparison, forDirty, 'updated after force save', gateToken, forSave);
+      inFlightComparisons.delete(comparison);
+      applySaveResult(result, comparison.forComparison, comparison.forDirty, 'updated after force save', gateToken, forSave, captureId, quietConflict);
       if (typeof callback === 'function') {
         callback(result);
       }
@@ -774,6 +809,67 @@ let baselineActive = true;
 let baselineSettledAt = false;
 export function baselineSettled() { return baselineSettledAt; }
 
+// A repaint that leaves the page's painted values different from the file's means
+// the file is stale: an agent wrote a record without painting it. One clean,
+// autosaving tab saves the painted page so the bytes on disk heal. The delay is
+// jittered and the check reruns when it fires, so when several tabs repaint the
+// same frame, the first save reaches the others and they skip.
+const PAINT_HEAL_MIN_MS = 250;
+const PAINT_HEAL_SPREAD_MS = 1250;
+let paintHealTimer = null;
+
+const HEAL_KEY = 'clay:paint-heal:' + location.pathname;
+
+function hashSignature(s) {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return String(h >>> 0);
+}
+
+function healedFrom(signature) {
+  try { return localStorage.getItem(HEAL_KEY) === hashSignature(signature); } catch { return false; }
+}
+
+function noteHealedFrom(signature) {
+  try { localStorage.setItem(HEAL_KEY, hashSignature(signature)); } catch {}
+}
+
+/** The painted values of the page as it would be saved. */
+export function currentPaintSignature() {
+  return paintSignature(captureSaveClone({ flushUndo: false }));
+}
+
+/**
+ * Save the page if its painted values differ from the file's. `fileSignature` is
+ * the file's paintSignature, or a function returning it (or null when unknown)
+ * when the timer fires.
+ */
+export function schedulePaintHeal(fileSignature) {
+  if (!isEditMode || isDraftMode) return;
+  clearTimeout(paintHealTimer);
+  paintHealTimer = setTimeout(() => {
+    paintHealTimer = null;
+    const onDisk = typeof fileSignature === 'function' ? fileSignature() : fileSignature;
+    if (onDisk == null || !autosaveActive() || !baselineSettled() || isSaveConflicted() || autosaveIsSuspended()) return;
+    if (captureForDirtyCheck({ flushUndo: false }) !== lastSavedDirty) return;
+    if (onDisk === currentPaintSignature()) return;
+    if (healedFrom(onDisk)) return;
+    noteHealedFrom(onDisk);
+    savePageForce(() => {}, { quietConflict: true });
+  }, PAINT_HEAL_MIN_MS + Math.random() * PAINT_HEAL_SPREAD_MS);
+}
+
+registerStyleAdoption(identity => {
+  const strip = styleComparisonStripper(identity);
+  lastSavedContents = strip(lastSavedContents);
+  lastSavedDirty = strip(lastSavedDirty);
+  baselineContents = strip(baselineContents);
+  for (const comparison of inFlightComparisons) {
+    comparison.forComparison = strip(comparison.forComparison);
+    comparison.forDirty = strip(comparison.forDirty);
+  }
+});
+
 // ============================================
 // BASELINE CAPTURE (Settled Signal)
 // ============================================
@@ -787,10 +883,23 @@ export function baselineSettled() { return baselineSettledAt; }
 // WHY IMMEDIATE + CONDITIONAL UPDATE:
 // We set baseline immediately as a safety net. If the user edits or saves
 // before settle completes, we don't overwrite their work. The settled snapshot
-// only replaces baseline if nothing changed (lastSavedContents === immediateContents).
+// only replaces baseline if no user input or baseline installation intervened.
 
 const SETTLE_MS = 500;        // Wait for no mutations for this long
 const MAX_SETTLE_MS = 3000;   // Max time to wait before forcing capture
+const MAX_HOLD_MS = 10000;   // A held settle releases itself after this
+
+let settleNow = null;
+
+/**
+ * The loader's mount phase calls this once the derive engine has taken its first
+ * pass. The settle runs at once on the painted page, unless a person already
+ * edited or a save already installed a baseline (captureBaseline's guard).
+ */
+export function releaseBootSettle() {
+  bootPhase.holdSettle = false;
+  if (settleNow) settleNow();
+}
 
 function initBaselineCapture() {
   if (!isEditMode) return;
@@ -803,8 +912,8 @@ function initBaselineCapture() {
   // This ensures saves during settle window work correctly
   // Store stripped version so comparisons are direct (no parsing needed)
   const { forComparison: immediateContents, forDirty: immediateDirty } = captureForComparisonAndDirty();
-  lastSavedContents = immediateContents;
-  lastSavedDirty = immediateDirty;
+  setLastSavedBaselines(immediateContents, immediateDirty);
+  const immediateRevision = baselineRevision;
   baselineContents = immediateContents;
   logBaseline('immediate capture', `${immediateContents.length} chars`);
 
@@ -829,18 +938,14 @@ function initBaselineCapture() {
     if (unsubscribeMutation) unsubscribeMutation();
     userEditEvents.forEach(evt => document.removeEventListener(evt, markUserEdited, true));
 
-    // Only update if no user edits AND no saves occurred during settle.
-    // BOTH baselines have to be untouched, not just the autosave one: a save
-    // whose only change was inside a batching region advances lastSavedDirty
-    // while leaving lastSavedContents byte-identical to the immediate capture.
-    // Checking one would let a second, unsent edit in that region be captured
-    // here as though it had been saved.
-    if (!userEdited && lastSavedContents === immediateContents && lastSavedDirty === immediateDirty) {
+    // Adoption only removes owned styles from comparison state. It does not
+    // advance this revision. A save or sync installation does, even when its
+    // comparison bytes match, so settle cannot absorb a later unsent edit.
+    if (!userEdited && baselineRevision === immediateRevision) {
       // Store stripped version so comparisons are direct (no parsing needed)
       const gateToken = gateCaptureToken();
       const { forComparison: contents, forDirty: contentsDirty } = captureForComparisonAndDirty();
-      lastSavedContents = contents;
-      lastSavedDirty = contentsDirty;
+      setLastSavedBaselines(contents, contentsDirty);
       baselineContents = contents;
       // Boot churn (modules rewriting attributes at DOM-ready) counted toward
       // the scoped-sync gate; the settled baseline is the proof it wasn't edits.
@@ -862,19 +967,32 @@ function initBaselineCapture() {
     baselineSettledAt = true;
     document.dispatchEvent(new CustomEvent('clay:baseline-settled'));
   };
+  settleNow = captureBaseline;
+
+  // While the loader holds the settle for a derive engine's first pass, neither
+  // the quiet timer nor the max timeout may settle; releaseBootSettle does.
+  const settle = () => {
+    if (!bootPhase.holdSettle) captureBaseline();
+  };
 
   // Start settle observer - fires when no mutations for SETTLE_MS.
   // require:'autosave' so churn in no-save / save-* / no-watch regions doesn't
   // keep resetting the settle timer or count toward the baseline.
   unsubscribeMutation = Mutation.onAnyChange(
     { debounce: SETTLE_MS, omitChangeDetails: true, require: 'autosave' },
-    captureBaseline
+    settle
   );
 
   // Max timeout fallback
   setTimeout(() => {
-    if (!settled) captureBaseline();
+    if (!settled) settle();
   }, MAX_SETTLE_MS);
+
+  // The loader releases a held settle after the derive engine mounts. If boot
+  // never gets there (a plugin's ready stalls, boot throws), release it anyway.
+  setTimeout(() => {
+    if (!settled && bootPhase.holdSettle) releaseBootSettle();
+  }, MAX_HOLD_MS);
 }
 
 // Run when DOM is ready

package/src/core/snapshot.js

@@ -43,6 +43,7 @@ import { restoreAuthoredUrls } from '../lib/authored-url.js';
 import { STRIP_FROM_SAVE, STRIP_FROM_COMPARISON, STRIP_FROM_DIRTY_CHECK, NO_TRIGGER_AUTOSAVE_SELECTOR, SNAPSHOT_REMOVE_SELECTOR } from '../lib/region-policy.js';
 import { TAB_LOCAL_ROOT_ATTRS, stripRouteAttrs } from '../lib/root-attrs.js';
 import { stripEphemeral } from '../lib/ephemeral.js';
+import { stripDerived } from '../lib/derived.js';
 import { createContentView } from '../lib/content-dom.js';
 
 // =============================================================================
@@ -58,6 +59,17 @@ const snapshotProvenance = new WeakMap();
 // second renderer would be two answers to "what bytes does this save send".
 let saveRenderer = null;
 
+// The capture identity for save captures. A refused save that may retry reads it
+// before sending and again before each retry: a capture newer than the one those
+// bytes describe means the attempt is already superseded and must not be re-sent.
+// It is an opaque local count, monotone per loaded module, and never goes on the
+// wire; it is what binds one capture to the exact requests that carried its body.
+let captureCounter = 0;
+
+export function currentCaptureId() {
+  return captureCounter;
+}
+
 export function originalSnapshotNode(cloneNode) {
   return snapshotProvenance.get(cloneNode) || null;
 }
@@ -224,7 +236,7 @@ function clonePreventingOnclone(node, deep = true) {
   finally { window.__preventOnclone = prev; }
 }
 
-export function captureSnapshot({ flushUndo = true, authored = true } = {}) {
+export function captureSnapshot({ flushUndo = true, authored = true, forSave = false, requestRefresh = false } = {}) {
   // Force-close any pending undo idle batch BEFORE cloning the DOM, so the
   // snapshot reflects a clean undo boundary. Without this, a save that fires
   // mid-typing would leave the idle batch open across the save boundary, and
@@ -245,7 +257,7 @@ export function captureSnapshot({ flushUndo = true, authored = true } = {}) {
 
   for (const hook of snapshotHooks) {
     stripSnapshotRegions(clone);
-    hook(clone, { original: originalSnapshotNode });
+    hook(clone, { original: originalSnapshotNode, forSave, requestRefresh });
   }
 
   // Put back any URL clay rewrote at runtime (cache-bust, refetch-on-save) so
@@ -302,9 +314,17 @@ function prepareCloneForSave(clone, { authored = true } = {}) {
     el.remove();
   }
 
+  stripDiagnosticBeacons(clone);
+
   return clone;
 }
 
+// sapjs marks an element it cannot run with a sap-error beacon. It describes this
+// tab's engine, never the document, so no save carries it.
+function stripDiagnosticBeacons(clone) {
+  for (const el of clone.querySelectorAll("[sap-error]")) el.removeAttribute("sap-error");
+}
+
 /**
  * The save-domain clone, for a caller that needs the tree rather than the bytes.
  *
@@ -327,6 +347,20 @@ export function captureSaveClone({ flushUndo = true, authored = true } = {}) {
   return prepareCloneForSave(captureSnapshot({ flushUndo, authored }), { authored });
 }
 
+// Attributes that render exactly like their absence. A scroll lock or a browser
+// extension that resets an inline style leaves `style=""` behind, and the dirty
+// check must not read that as an edit the person would lose on close.
+const EMPTY_INERT_ATTRS = ['style', 'class'];
+
+function serializeForCompare(clone) {
+  stripDerived(clone);
+  for (const name of EMPTY_INERT_ATTRS) {
+    if (clone.getAttribute(name) === '') clone.removeAttribute(name);
+    for (const el of clone.querySelectorAll(`[${name}=""]`)) el.removeAttribute(name);
+  }
+  return "<!DOCTYPE html>" + clone.outerHTML;
+}
+
 /**
  * Capture snapshot prepared for dirty/change comparison.
  *
@@ -355,7 +389,7 @@ export function captureForComparison({ flushUndo = true } = {}) {
 
   stripSnapshotRegions(clone);
 
-  return "<!DOCTYPE html>" + clone.outerHTML;
+  return serializeForCompare(clone);
 }
 
 /**
@@ -388,7 +422,7 @@ export function captureForDirtyCheck({ flushUndo = true } = {}) {
 
   stripSnapshotRegions(clone);
 
-  return "<!DOCTYPE html>" + clone.outerHTML;
+  return serializeForCompare(clone);
 }
 
 /**
@@ -419,7 +453,7 @@ export function captureForComparisonAndDirty({ flushUndo = true } = {}) {
     hook(clone);
   }
   stripSnapshotRegions(clone);
-  const forComparison = "<!DOCTYPE html>" + clone.outerHTML;
+  const forComparison = serializeForCompare(clone);
 
   let forDirty = forComparison;
   if (dirtyClone) {
@@ -431,7 +465,7 @@ export function captureForComparisonAndDirty({ flushUndo = true } = {}) {
       hook(dirtyClone);
     }
     stripSnapshotRegions(dirtyClone);
-    forDirty = "<!DOCTYPE html>" + dirtyClone.outerHTML;
+    forDirty = serializeForCompare(dirtyClone);
   }
 
   return { forComparison, forDirty };
@@ -445,10 +479,12 @@ export function captureForComparisonAndDirty({ flushUndo = true } = {}) {
  *
  * @param {Object} options
  * @param {boolean} options.emitForSync - Whether to emit snapshot-ready event (default: true)
- * @returns {{ forSave: string, forComparison: string, forDirty: string }}
+ * @returns {{ forSave: string, forComparison: string, forDirty: string, captureId: number }}
  */
-export function captureForSaveAndComparison({ emitForSync = true, flushUndo = true } = {}) {
-  const clone = captureSnapshot({ flushUndo });
+export function captureForSaveAndComparison({ emitForSync = true, flushUndo = true, requestRefresh = false } = {}) {
+  if (!Number.isSafeInteger(captureCounter + 1)) throw new Error('Save capture identity exhausted');
+  const captureId = ++captureCounter;
+  const clone = captureSnapshot({ flushUndo, forSave: emitForSync, requestRefresh });
 
   // Emit for live-sync before any stripping.
   //
@@ -459,7 +495,7 @@ export function captureForSaveAndComparison({ emitForSync = true, flushUndo = tr
   // and a baseline the dirty check cannot reproduce warns on close forever.
   if (emitForSync) {
     document.dispatchEvent(new CustomEvent('clay:snapshot-ready', {
-      detail: { documentElement: clone, forSave: true }
+      detail: { documentElement: clone, forSave: true, captureId }
     }));
   }
 
@@ -488,6 +524,7 @@ export function captureForSaveAndComparison({ emitForSync = true, flushUndo = tr
   for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
     el.remove();
   }
+  stripDiagnosticBeacons(clone);
   const forSave = serializeSaveClone(clone);
 
   // Compare clone: strip every autosave-off region, then run hooks
@@ -499,7 +536,7 @@ export function captureForSaveAndComparison({ emitForSync = true, flushUndo = tr
     hook(compareClone);
   }
   stripSnapshotRegions(compareClone);
-  const forComparison = "<!DOCTYPE html>" + compareClone.outerHTML;
+  const forComparison = serializeForCompare(compareClone);
 
   // Dirty clone: same shape as the compare clone, one selector weaker.
   let forDirty = forComparison;
@@ -512,10 +549,10 @@ export function captureForSaveAndComparison({ emitForSync = true, flushUndo = tr
       hook(dirtyClone);
     }
     stripSnapshotRegions(dirtyClone);
-    forDirty = "<!DOCTYPE html>" + dirtyClone.outerHTML;
+    forDirty = serializeForCompare(dirtyClone);
   }
 
-  return { forSave, forComparison, forDirty };
+  return { forSave, forComparison, forDirty, captureId };
 }
 
 /**
@@ -570,6 +607,7 @@ export function captureForMerge() {
   for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
     el.remove();
   }
+  stripDiagnosticBeacons(clone);
 
   for (const el of compareClone.querySelectorAll(STRIP_FROM_DIRTY_CHECK)) {
     el.remove();

package/src/core/style-comparisons.js

@@ -0,0 +1,37 @@
+import { parse } from '../vendor/parse5.vendor.js';
+import { getStyleBaseUrl } from '../dom/insert-style-tag.js';
+
+export function styleComparisonStripper(identity) {
+  const cache = new Map();
+  return (html) => {
+    if (!html || !html.includes(identity.name !== undefined ? '<style' : '<link')) return html;
+    if (cache.has(html)) return cache.get(html);
+    const spans = [];
+    const tree = parse(html, { sourceCodeLocationInfo: true, scriptingEnabled: true });
+    const visit = (node) => {
+      const attrs = new Map((node.attrs || []).map(({ name, value }) => [name, value]));
+      const owned = identity.name !== undefined
+        ? node.tagName === 'style' && (attrs.get('data-name') === identity.name ||
+          (identity.legacyId !== undefined && attrs.get('id') === identity.legacyId && !attrs.has('data-name')))
+        : node.tagName === 'link' && attrs.get('rel')?.toLowerCase() === 'stylesheet' &&
+          getStyleBaseUrl(attrs.get('href') ?? null) === identity.href;
+      const loc = node.sourceCodeLocation;
+      if (owned && loc?.startTag) {
+        spans.push([loc.startTag.startOffset, loc.endTag?.endOffset ?? loc.endOffset]);
+      } else {
+        for (const child of node.childNodes || []) visit(child);
+      }
+    };
+    visit(tree);
+    spans.sort((a, b) => a[0] - b[0]);
+    let result = '';
+    let offset = 0;
+    for (const [from, to] of spans) {
+      result += html.slice(offset, from);
+      offset = to;
+    }
+    result += html.slice(offset);
+    cache.set(html, result);
+    return result;
+  };
+}

package/src/dom/insert-style-tag.js

@@ -1,3 +1,12 @@
+export function getStyleBaseUrl(url) {
+  try {
+    const parsed = new URL(url, window.location.href);
+    return parsed.origin + parsed.pathname;
+  } catch {
+    return url;
+  }
+}
+
 /**
  * Insert styles into the document (inline CSS or external stylesheet).
  *
@@ -62,24 +71,14 @@ function insertStyles(nameOrHref, cssOrCallback, callback) {
   const href = nameOrHref;
   const cb = typeof cssOrCallback === 'function' ? cssOrCallback : undefined;
 
-  // Helper to get base URL without query params (for comparison)
-  const getBaseUrl = (url) => {
-    try {
-      const parsed = new URL(url, window.location.href);
-      return parsed.origin + parsed.pathname;
-    } catch {
-      return url;
-    }
-  };
-
   // Normalize href to full URL path (without query params) for comparison
-  const normalizedHref = getBaseUrl(href);
+  const normalizedHref = getStyleBaseUrl(href);
 
   // Find all links with matching normalized path (ignoring query params like ?v=)
   const existingLinks = [...document.querySelectorAll('link[rel="stylesheet"]')]
     .filter(el => {
       try {
-        return getBaseUrl(el.getAttribute('href')) === normalizedHref;
+        return getStyleBaseUrl(el.getAttribute('href')) === normalizedHref;
       } catch {
         return false;
       }