hyperclayjs 1.15.0 → 1.17.0

package/LICENSE

@@ -26,10 +26,10 @@ SOFTWARE.
 
 This project includes the following third-party libraries:
 
-### Idiomorph
-- Copyright (c) Big Sky Software
+### HyperMorph
+- Copyright (c) Hyperclay
 - License: 0BSD (Zero-Clause BSD)
-- https://github.com/bigskysoftware/idiomorph
+- https://github.com/hyperclay/hyper-morph
 
 ### Sortable.js
 - Copyright (c) All contributors to Sortable

package/README.md

@@ -57,17 +57,17 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| autosave | 0.9KB | Auto-save on DOM changes |
+| autosave | 1.4KB | Auto-save on DOM changes |
 | edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
 | edit-mode-helpers | 7.5KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
 | option-visibility | 7.8KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
 | persist | 2.4KB | Persist input/select/textarea values to the DOM with [persist] attribute |
-| save-core | 6.8KB | Basic save function only - hyperclay.savePage() |
-| save-system | 9.6KB | CMD+S, [trigger-save] button, savestatus attribute |
+| save-core | 7.4KB | Basic save function only - hyperclay.savePage() |
+| save-system | 12.1KB | CMD+S, [trigger-save] button, savestatus attribute |
 | save-toast | 0.9KB | Toast notifications for save events |
-| snapshot | 7.5KB | Source of truth for page state - captures DOM snapshots for save and sync |
-| tailwind-inject | 0.4KB | Injects tailwind CSS link with cache-bust on save |
-| unsaved-warning | 0.8KB | Warn before leaving page with unsaved changes |
+| snapshot | 10.2KB | Source of truth for page state - captures DOM snapshots for save and sync |
+| tailwind-inject | 1.4KB | Injects tailwind CSS link with cache-bust on save |
+| unsaved-warning | 1.3KB | Warn before leaving page with unsaved changes |
 
 ### Custom Attributes (HTML enhancements)
 
@@ -76,7 +76,7 @@ import 'hyperclayjs/presets/standard.js';
 | ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
 | dom-helpers | 6.2KB | el.nearest, el.val, el.text, el.exec, el.cycle |
 | event-attrs | 4.6KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
-| input-helpers | 1.2KB | [prevent-enter], [autosize] for textareas |
+| input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
 | sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
 
@@ -86,7 +86,7 @@ import 'hyperclayjs/presets/standard.js';
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
 | the-modal | 21KB | Full modal window creation system - window.theModal |
-| toast | 7.9KB | Success/error message notifications, toast(msg, msgType) |
+| toast | 8.3KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
@@ -95,7 +95,7 @@ import 'hyperclayjs/presets/standard.js';
 | cache-bust | 0.6KB | Cache-bust href/src attributes |
 | cookie | 1.4KB | Cookie management (often auto-included) |
 | debounce | 0.4KB | Function debouncing |
-| mutation | 13KB | DOM mutation observation (often auto-included) |
+| mutation | 13.5KB | DOM mutation observation (often auto-included) |
 | nearest | 3.4KB | Find nearest elements (often auto-included) |
 | throttle | 0.8KB | Function throttling |
 
@@ -106,7 +106,7 @@ import 'hyperclayjs/presets/standard.js';
 | all-js | 14.4KB | Full DOM manipulation library |
 | dom-ready | 0.4KB | DOM ready callback |
 | form-data | 2KB | Extract form data as an object |
-| style-injection | 4KB | Dynamic stylesheet injection |
+| style-injection | 4.2KB | Dynamic stylesheet injection |
 
 ### String Utilities (String manipulation helpers)
 
@@ -121,28 +121,28 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | file-upload | 10.7KB | File upload with progress |
-| live-sync | 12.7KB | Real-time DOM sync across browsers |
+| live-sync | 10.4KB | Real-time DOM sync across browsers |
 | send-message | 1.3KB | Message sending utility |
 
 ### Vendor Libraries (Third-party libraries)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| idiomorph | 8.3KB | Efficient DOM morphing library |
+| hyper-morph | 17.2KB | DOM morphing with content-based element matching |
 
 ## Presets
 
-### Minimal (~40.6KB)
+### Minimal (~46.8KB)
 Essential features for basic editing
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Standard (~62.4KB)
+### Standard (~69.1KB)
 Standard feature set for most use cases
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `unsaved-warning`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Everything (~184.6KB)
+### Everything (~201.8KB)
 All available features
 
 Includes all available modules across all categories.
@@ -157,9 +157,9 @@ Some modules with large vendor dependencies are **lazy-loaded** to optimize page
 
 **How it works:**
 - The wrapper module checks if the page is in edit mode (`isEditMode`)
-- If true, it injects a `<script save-ignore>` tag that loads the vendor script
+- If true, it injects a `<script save-remove>` tag that loads the vendor script
 - If false, nothing is loaded - viewers don't download the heavy scripts
-- The `save-ignore` attribute strips the script tag when the page is saved
+- The `save-remove` attribute strips the script tag when the page is saved
 
 This means:
 - **Editors** get full functionality when needed
@@ -371,7 +371,7 @@ MIT © Hyperclay
 
 This project includes the following open-source libraries:
 
-- **[Idiomorph](https://github.com/bigskysoftware/idiomorph)** - DOM morphing library by Big Sky Software (0BSD)
+- **[HyperMorph](https://github.com/hyperclay/hyper-morph)** - DOM morphing with content-based element matching (0BSD)
 - **[Sortable.js](https://github.com/SortableJS/Sortable)** - Drag-and-drop library (MIT)
 
 ## Links

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",

package/src/communication/live-sync.js

@@ -5,12 +5,12 @@
  *
  *   ┌─────────────────────────────────────────────────────────┐
  *   │  1. LISTEN            snapshot-ready event from save    │
- *   │                       (body with form values, no strip) │
+ *   │                       (full document with form values)  │
  *   └─────────────────────────────────────────────────────────┘
  *                              │
  *                              ▼
  *   ┌─────────────────────────────────────────────────────────┐
- *   │  2. SEND               POST body to /live-sync/save     │
+ *   │  2. SEND               POST html to /live-sync/save     │
  *   │                        (debounced, skip if unchanged)   │
  *   └─────────────────────────────────────────────────────────┘
  *                              │
@@ -22,25 +22,27 @@
  *                              │
  *                              ▼
  *   ┌─────────────────────────────────────────────────────────┐
- *   │  4. MORPH              Idiomorph to update DOM          │
+ *   │  4. MORPH              HyperMorph full documentElement  │
  *   │                        (preserves focus, input values)  │
  *   └─────────────────────────────────────────────────────────┘
  *
- * DEPENDS ON: Idiomorph (for intelligent DOM morphing)
  * INTEGRATES WITH: snapshot.js (receives snapshot-ready events)
  */
 
+import { HyperMorph } from "../vendor/hyper-morph.vendor.js";
+import Mutation from "../utilities/mutation.js";
+
 class LiveSync {
   constructor() {
     this.sse = null;
     this.currentFile = null;
-    this.lastHeadHash = null;
-    this.lastBodyHtml = null;
+    this.lastHtml = null;
     this.clientId = this.generateClientId();
     this.debounceMs = 150;
     this.debounceTimer = null;
     this.isPaused = false;
     this.isDestroyed = false;
+    this.debug = false;
 
     // Store handler reference for cleanup
     this._snapshotHandler = null;
@@ -52,22 +54,33 @@ class LiveSync {
     this.onError = null;
   }
 
+  _log(message, data = null) {
+    if (!this.debug) return;
+    const prefix = `[LiveSync ${new Date().toISOString()}]`;
+    if (data !== null) {
+      console.log(prefix, message, data);
+    } else {
+      console.log(prefix, message);
+    }
+  }
+
   /**
-   * Generate or retrieve a persistent client ID
+   * Generate or retrieve a tab-specific client ID
+   * Uses sessionStorage (unique per tab) not localStorage (shared across tabs)
    */
   generateClientId() {
     let id = null;
 
     try {
-      id = localStorage.getItem('livesync-client-id');
+      id = sessionStorage.getItem('livesync-client-id');
     } catch (e) {
-      // localStorage might not be available
+      // sessionStorage might not be available
     }
 
     if (!id) {
       id = Math.random().toString(36).slice(2, 11) + Date.now().toString(36);
       try {
-        localStorage.setItem('livesync-client-id', id);
+        sessionStorage.setItem('livesync-client-id', id);
       } catch (e) {
         // That's okay
       }
@@ -97,8 +110,7 @@ class LiveSync {
     }
 
     // Reset state for new connection
-    this.lastHeadHash = null;
-    this.lastBodyHtml = null;
+    this.lastHtml = null;
 
     console.log('[LiveSync] Starting for:', this.currentFile);
     this.connect();
@@ -185,32 +197,23 @@ class LiveSync {
         return;
       }
 
-      const { body, headHash, sender } = data;
+      const { html, sender } = data;
 
       // Ignore own changes
-      if (sender === this.clientId) return;
-
-      // Guard against invalid body - never apply non-string
-      if (typeof body !== 'string') {
-        console.error('[LiveSync] Received invalid body (not a string), ignoring');
+      if (sender === this.clientId) {
+        this._log('Ignoring own message (sender matches clientId)');
         return;
       }
 
-      // Check for head changes -> full reload
-      // Only compare when BOTH hashes exist (server must send headHash)
-      // Only set lastHeadHash when incoming hash is valid
-      if (headHash) {
-        if (this.lastHeadHash && headHash !== this.lastHeadHash) {
-          console.log('[LiveSync] Head changed, reloading');
-          location.reload();
-          return;
-        }
-        this.lastHeadHash = headHash;
+      // Guard against invalid html
+      if (typeof html !== 'string') {
+        console.error('[LiveSync] Received invalid html, ignoring');
+        return;
       }
 
-      console.log('[LiveSync] Received update from:', sender);
-      this.applyUpdate(body);
-      if (this.onUpdate) this.onUpdate({ body, sender });
+      this._log(`Received update from: ${sender} (my clientId: ${this.clientId})`);
+      this.applyUpdate(html);
+      if (this.onUpdate) this.onUpdate({ html, sender });
     };
 
     // Native EventSource auto-reconnects on transient errors
@@ -228,160 +231,90 @@ class LiveSync {
 
   /**
    * Listen for snapshot-ready events from the save system.
-   * Receives the full cloned documentElement and extracts head/body.
+   * Receives the full cloned documentElement and sends it.
    */
   listenForSnapshots() {
-    this._snapshotHandler = async (event) => {
-      if (this.isPaused) return;
+    this._snapshotHandler = (event) => {
+      if (this.isPaused) {
+        this._log('snapshot-ready received but isPaused, skipping');
+        return;
+      }
 
       const { documentElement } = event.detail;
       if (!documentElement) return;
 
-      // Extract head and body directly from cloned element
-      const head = documentElement.querySelector('head')?.innerHTML || '';
-      const body = documentElement.querySelector('body')?.innerHTML || '';
-
-      // Compute headHash using SHA-256 (async)
-      const headHash = await this.computeHeadHash(head);
-
-      // Send update even if body is empty (allows clearing content)
-      this.sendUpdate(body, headHash);
+      this._log('snapshot-ready received, preparing to send');
+      const html = documentElement.outerHTML;
+      this.sendUpdate(html);
     };
 
     document.addEventListener('hyperclay:snapshot-ready', this._snapshotHandler);
   }
 
   /**
-   * Send body and headHash to the server (debounced)
-   * Only updates lastBodyHtml after successful save
+   * Send full HTML to the server (debounced)
+   * Only updates lastHtml after successful save
    */
-  sendUpdate(body, headHash) {
+  sendUpdate(html) {
     clearTimeout(this.debounceTimer);
 
     this.debounceTimer = setTimeout(() => {
       // Skip if unchanged
-      if (body === this.lastBodyHtml) return;
-
-      console.log('[LiveSync] Sending update');
+      if (html === this.lastHtml) {
+        this._log('Skipping send - HTML unchanged');
+        return;
+      }
 
-      // Track local head changes
-      this.lastHeadHash = headHash;
+      this._log(`Sending update (HTML length: ${html.length}, lastHtml length: ${this.lastHtml?.length || 0})`);
 
       fetch('/live-sync/save', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           file: this.currentFile,
-          body: body,
-          sender: this.clientId,
-          headHash: headHash
+          html: html,
+          sender: this.clientId
         })
       }).then(response => {
         if (response.ok) {
-          // Only update lastBodyHtml after successful save
-          this.lastBodyHtml = body;
+          this.lastHtml = html;
         } else {
-          // Log non-OK responses but don't suppress future sends
           console.warn('[LiveSync] Save returned status:', response.status);
         }
       }).catch(err => {
-        // Network error - don't update lastBodyHtml so next mutation will retry
         console.error('[LiveSync] Save failed:', err);
         if (this.onError) this.onError(err);
       });
     }, this.debounceMs);
   }
 
-  /**
-   * Compute SHA-256 hash of head content (first 16 hex chars)
-   * Uses SubtleCrypto API (async)
-   * @param {string} head - Head innerHTML
-   * @returns {Promise<string|null>} 16-char hex hash or null if unavailable
-   */
-  async computeHeadHash(head) {
-    if (!head) return null;
-
-    // SubtleCrypto requires secure context (HTTPS or localhost)
-    if (!crypto?.subtle?.digest) {
-      console.warn('[LiveSync] SHA-256 unavailable (non-secure context), skipping headHash');
-      return null;
-    }
-
-    try {
-      const encoder = new TextEncoder();
-      const data = encoder.encode(head);
-      const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-      const hashArray = Array.from(new Uint8Array(hashBuffer));
-      return hashArray.map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 16);
-    } catch (e) {
-      console.warn('[LiveSync] SHA-256 hash failed, skipping headHash:', e);
-      return null;
-    }
-  }
-
   /**
    * Apply an update received from the server
-   * Guards against non-string values
+   * Morphs the entire document (head and body)
    */
-  applyUpdate(bodyHtml) {
-    // Guard against non-string values
-    if (typeof bodyHtml !== 'string') {
-      console.error('[LiveSync] applyUpdate called with non-string value, ignoring');
-      return;
-    }
-
+  applyUpdate(html) {
+    this._log('applyUpdate - pausing mutations and morphing');
     this.isPaused = true;
-    this.lastBodyHtml = bodyHtml;
+    this.lastHtml = html;
 
-    try {
-      const temp = document.createElement('div');
-      temp.innerHTML = bodyHtml;
-
-      // Use Idiomorph if available
-      const morphFn = window.Idiomorph?.morph;
-
-      if (morphFn) {
-        morphFn(document.body, temp, {
-          morphStyle: 'innerHTML',
-          ignoreActiveValue: true
-        });
-      } else {
-        // Fallback to innerHTML
-        console.warn('[LiveSync] Idiomorph not available, using innerHTML fallback');
-        document.body.innerHTML = bodyHtml;
-      }
+    // Pause mutation observer so morph doesn't trigger autosave
+    Mutation.pause();
 
-      this.rehydrateFormState(document.body);
-    } finally {
-      this.isPaused = false;
-    }
-  }
+    // Parse as full document
+    const parser = new DOMParser();
+    const newDoc = parser.parseFromString(html, 'text/html');
 
-  /**
-   * Sync form control attributes to properties after DOM morph
-   */
-  rehydrateFormState(container) {
-    const focused = document.activeElement;
-
-    // Text inputs and textareas
-    container.querySelectorAll('input[value], textarea[value]').forEach(el => {
-      if (el === focused) return;
-      el.value = el.getAttribute('value') || '';
+    // Morph entire document (html element)
+    HyperMorph.morph(document.documentElement, newDoc.documentElement, {
+      morphStyle: 'outerHTML',
+      ignoreActiveValue: true,
+      head: { style: 'merge' },
+      scripts: { handle: true, matchMode: 'smart' }
     });
 
-    // Checkboxes and radios
-    container.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(el => {
-      if (el === focused) return;
-      el.checked = el.hasAttribute('checked');
-    });
-
-    // Select dropdowns
-    container.querySelectorAll('select').forEach(select => {
-      if (select === focused) return;
-      select.querySelectorAll('option').forEach(opt => {
-        opt.selected = opt.hasAttribute('selected');
-      });
-    });
+    this._log('applyUpdate - morph complete, resuming mutations');
+    Mutation.resume();
+    this.isPaused = false;
   }
 
   /**

package/src/core/autosave.js

@@ -27,9 +27,23 @@ function initSavePageOnChange() {
   });
 }
 
+/**
+ * Initialize auto-save on input events for [persist] elements
+ * Form input values don't trigger DOM mutations, so we listen for input events
+ */
+let inputSaveTimer = null;
+function initSaveOnPersistInput() {
+  document.addEventListener('input', (e) => {
+    if (!e.target.closest('[persist]')) return;
+    clearTimeout(inputSaveTimer);
+    inputSaveTimer = setTimeout(savePageThrottled, 3333);
+  }, true);
+}
+
 function init() {
   if (!isEditMode) return;
   initSavePageOnChange();
+  initSaveOnPersistInput();
 }
 
 // No window exports - savePageThrottled is exported from save-system

package/src/core/savePage.js

@@ -14,11 +14,14 @@ import throttle from "../utilities/throttle.js";
 import Mutation from "../utilities/mutation.js";
 import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import {
-  savePage as savePageCore,
+  saveHtml,
   getPageContents,
   replacePageWith as replacePageWithCore,
-  beforeSave
+  beforeSave,
+  isSaveInProgress
 } from "./savePageCore.js";
+import { captureForComparison, captureForSaveAndComparison } from "./snapshot.js";
+import { logSaveCheck, logBaseline } from "../utilities/autosaveDebug.js";
 
 // Reset savestatus to 'saved' in snapshots (each module cleans up its own attrs)
 beforeSave(clone => {
@@ -88,6 +91,23 @@ window.addEventListener('online', () => {
   }
 });
 
+// ============================================
+// POST-SAVE BASELINE RECAPTURE
+// ============================================
+// After a successful save, onaftersave handlers may modify the live DOM
+// (e.g., cacheBust updates ?v= query params). We recapture the baseline
+// after these sync handlers complete to prevent false "unsaved changes" warnings.
+
+document.addEventListener('hyperclay:save-saved', () => {
+  // Use setTimeout(0) to run after all sync onaftersave handlers complete
+  setTimeout(() => {
+    // Store stripped version so comparisons are direct (no parsing needed)
+    const contents = captureForComparison();
+    lastSavedContents = contents;
+    logBaseline('recaptured after onaftersave', `${contents.length} chars`);
+  }, 0);
+});
+
 // Re-export from core for backward compatibility
 export { beforeSave, getPageContents };
 
@@ -110,6 +130,11 @@ export function savePage(callback = () => {}) {
     return;
   }
 
+  // Don't start a new save if one is already in progress
+  if (isSaveInProgress()) {
+    return;
+  }
+
   // Check if offline - set DOM state immediately for UI feedback
   // but still try the fetch (navigator.onLine can be wrong)
   const wasOffline = !navigator.onLine;
@@ -117,10 +142,24 @@ export function savePage(callback = () => {}) {
     setOfflineStateQuiet();
   }
 
-  const currentContents = getPageContents();
+  // Single capture: clone once, get both versions
+  // forComparison has [save-remove] and [save-ignore] stripped
+  // forSave has only [save-remove] stripped
+  let forSave, forComparison;
+  try {
+    ({ forSave, forComparison } = captureForSaveAndComparison());
+  } catch (err) {
+    console.error('savePage: captureForSaveAndComparison failed', err);
+    setSaveState('error', err.message);
+    if (typeof callback === 'function') {
+      callback({ msg: err.message, msgType: 'error' });
+    }
+    return;
+  }
 
-  // Track whether there are unsaved changes
-  unsavedChanges = (currentContents !== lastSavedContents);
+  // Compare directly - lastSavedContents is already stripped
+  unsavedChanges = (forComparison !== lastSavedContents);
+  logSaveCheck('savePage dirty check', !unsavedChanges);
 
   // Skip if content hasn't changed
   if (!unsavedChanges) {
@@ -130,24 +169,29 @@ export function savePage(callback = () => {}) {
   // Start debounced 'saving' state (only shows if save takes >500ms)
   setSavingState();
 
-  savePageCore(({msg, msgType}) => {
-    if (msgType !== 'error') {
-      // SUCCESS
-      lastSavedContents = currentContents;
+  // Use saveHtml directly with our pre-captured content (avoids double capture)
+  saveHtml(forSave, (err, data) => {
+    if (!err) {
+      // SUCCESS - store stripped version for future comparisons
+      lastSavedContents = forComparison;
       unsavedChanges = false;
-      setSaveState('saved', msg);
+      setSaveState('saved', data?.msg || 'Saved');
+      logBaseline('updated after save', `${lastSavedContents.length} chars`);
     } else {
       // FAILED - determine if it's offline or server error
       if (!navigator.onLine) {
-        setSaveState('offline', msg);
+        setSaveState('offline', err.message);
       } else {
-        setSaveState('error', msg);
+        setSaveState('error', err.message);
       }
     }
 
-    // Call user callback if provided
-    if (typeof callback === 'function' && msg) {
-      callback({msg, msgType});
+    // Call user callback if provided (preserve server's msgType)
+    if (typeof callback === 'function') {
+      callback({
+        msg: err?.message || data?.msg,
+        msgType: err ? 'error' : (data?.msgType || 'success')
+      });
     }
   });
 }
@@ -207,9 +251,11 @@ function initBaselineCapture() {
 
   // Take immediate snapshot and set as baseline right away
   // This ensures saves during settle window work correctly
-  const immediateContents = getPageContents();
+  // Store stripped version so comparisons are direct (no parsing needed)
+  const immediateContents = captureForComparison();
   lastSavedContents = immediateContents;
   baselineContents = immediateContents;
+  logBaseline('immediate capture', `${immediateContents.length} chars`);
 
   // Track user edits to avoid overwriting real changes
   const userEditEvents = ['input', 'change', 'paste'];
@@ -235,9 +281,13 @@ function initBaselineCapture() {
     // Only update if no user edits AND no saves occurred during settle
     // (if a save happened, lastSavedContents would differ from immediateContents)
     if (!userEdited && lastSavedContents === immediateContents) {
-      const contents = getPageContents();
+      // Store stripped version so comparisons are direct (no parsing needed)
+      const contents = captureForComparison();
       lastSavedContents = contents;
       baselineContents = contents;
+      logBaseline('settled capture', `${contents.length} chars`);
+    } else {
+      logBaseline('settled skipped', userEdited ? 'user edited' : 'save occurred during settle');
     }
 
     document.documentElement.setAttribute('savestatus', 'saved');
@@ -271,10 +321,17 @@ if (document.readyState === 'loading') {
 export function savePageThrottled(callback = () => {}) {
   if (!isEditMode) return;
 
-  const currentContents = getPageContents();
   // For autosave: check both that content changed from baseline AND from last save
   // This prevents saves from initial setup mutations
-  if (currentContents !== baselineContents && currentContents !== lastSavedContents) {
+  // Compare directly - stored versions are already stripped
+  const currentForCompare = captureForComparison();
+  const differsFromBaseline = currentForCompare !== baselineContents;
+  const differsFromLastSave = currentForCompare !== lastSavedContents;
+
+  logSaveCheck('throttled vs baseline', !differsFromBaseline);
+  logSaveCheck('throttled vs lastSave', !differsFromLastSave);
+
+  if (differsFromBaseline && differsFromLastSave) {
     unsavedChanges = true;
     throttledSave(callback);
   }