hyperclayjs 1.15.0 → 1.16.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

@@ -62,12 +62,12 @@ import 'hyperclayjs/presets/standard.js';
 | 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 |
+| snapshot | 10.2KB | 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 |
+| 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 |
 
@@ -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.1KB | DOM mutation observation (often auto-included) |
 | nearest | 3.4KB | Find nearest elements (often auto-included) |
 | throttle | 0.8KB | Function throttling |
 
@@ -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 | 12.5KB | 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 | 16.3KB | DOM morphing with content-based element matching |
 
 ## Presets
 
-### Minimal (~40.6KB)
+### Minimal (~46.4KB)
 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 (~68.7KB)
 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.5KB)
 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.16.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",

package/src/communication/live-sync.js

@@ -22,14 +22,15 @@
  *                              │
  *                              ▼
  *   ┌─────────────────────────────────────────────────────────┐
- *   │  4. MORPH              Idiomorph to update DOM          │
+ *   │  4. MORPH              HyperMorph to update DOM          │
  *   │                        (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";
+
 class LiveSync {
   constructor() {
     this.sse = null;
@@ -337,19 +338,10 @@ class LiveSync {
       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;
-      }
+      HyperMorph.morph(document.body, temp, {
+        morphStyle: 'innerHTML',
+        ignoreActiveValue: true
+      });
 
       this.rehydrateFormState(document.body);
     } finally {

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);
   }

package/src/core/savePageCore.js

@@ -26,6 +26,14 @@ import {
 let saveInProgress = false;
 const saveEndpoint = `/save/${cookie.get("currentResource")}`;
 
+/**
+ * Check if a save is currently in progress.
+ * @returns {boolean}
+ */
+export function isSaveInProgress() {
+  return saveInProgress;
+}
+
 // =============================================================================
 // RE-EXPORTS FROM SNAPSHOT (for backwards compat)
 // =============================================================================
@@ -102,7 +110,7 @@ export function savePage(callback = () => {}) {
 
   // Add timeout - abort if server doesn't respond within 12 seconds
   const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort('Save timeout'), 12000);
+  const timeoutId = setTimeout(() => controller.abort(), 12000);
 
   fetch(saveEndpoint, {
     method: 'POST',
@@ -175,12 +183,18 @@ export function saveHtml(html, callback = () => {}) {
     return;
   }
 
+  // Add timeout - abort if server doesn't respond within 12 seconds
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 12000);
+
   fetch(saveEndpoint, {
     method: 'POST',
     credentials: 'include',
-    body: html
+    body: html,
+    signal: controller.signal
   })
     .then(res => {
+      clearTimeout(timeoutId);
       return res.json().then(data => {
         if (!res.ok) {
           throw new Error(data.msg || data.error || `HTTP ${res.status}: ${res.statusText}`);
@@ -194,12 +208,20 @@ export function saveHtml(html, callback = () => {}) {
       }
     })
     .catch(err => {
+      clearTimeout(timeoutId);
       console.error('Failed to save page:', err);
+
+      // Normalize timeout errors
+      const error = err.name === 'AbortError'
+        ? new Error('Server not responding')
+        : err;
+
       if (typeof callback === 'function') {
-        callback(err);
+        callback(error);
       }
     })
     .finally(() => {
+      clearTimeout(timeoutId);
       saveInProgress = false;
     });
 }

package/src/core/snapshot.js

@@ -21,7 +21,7 @@
  *   │  3a. PREPARE HOOKS      │     │  3b. DONE               │
  *   │  onPrepareForSave       │     │  (live-sync stops here) │
  *   │  [onbeforesave]         │     │                         │
- *   │  [save-ignore]          │     │  → emits snapshot-ready │
+ *   │  [save-remove]          │     │  → emits snapshot-ready │
  *   │                         │     └─────────────────────────┘
  *   │  ✓ Used by: SAVE only   │
  *   └─────────────────────────┘
@@ -102,7 +102,7 @@ function prepareCloneForSave(clone) {
   }
 
   // Remove elements that shouldn't be saved
-  for (const el of clone.querySelectorAll('[save-ignore]')) {
+  for (const el of clone.querySelectorAll('[save-remove]')) {
     el.remove();
   }
 
@@ -114,6 +114,95 @@ function prepareCloneForSave(clone) {
   return "<!DOCTYPE html>" + clone.outerHTML;
 }
 
+/**
+ * Capture snapshot prepared for dirty/change comparison.
+ *
+ * Like captureForSave but also strips [save-ignore] elements.
+ * Use this for comparing current state against baselines.
+ *
+ * @returns {string} HTML string with [save-remove] and [save-ignore] stripped
+ */
+export function captureForComparison() {
+  // CodeMirror pages: return editor content directly (same for save and compare)
+  if (isCodeMirrorPage()) {
+    return getCodeMirrorContents();
+  }
+
+  const clone = captureSnapshot();
+
+  // Run inline [onbeforesave] handlers
+  for (const el of clone.querySelectorAll('[onbeforesave]')) {
+    new Function(el.getAttribute('onbeforesave')).call(el);
+  }
+
+  // Strip before hooks (hooks see the "final" state)
+  for (const el of clone.querySelectorAll('[save-remove], [save-ignore]')) {
+    el.remove();
+  }
+
+  // Run registered prepare hooks
+  for (const hook of prepareForSaveHooks) {
+    hook(clone);
+  }
+
+  return "<!DOCTYPE html>" + clone.outerHTML;
+}
+
+/**
+ * Single-capture function for both saving and comparison.
+ *
+ * Clones the DOM once, then clones that clone for comparison.
+ * More efficient than calling captureForSave() and captureForComparison() separately.
+ *
+ * @param {Object} options
+ * @param {boolean} options.emitForSync - Whether to emit snapshot-ready event (default: true)
+ * @returns {{ forSave: string, forComparison: string }}
+ */
+export function captureForSaveAndComparison({ emitForSync = true } = {}) {
+  // CodeMirror pages: return editor content directly, skip snapshot-ready
+  if (isCodeMirrorPage()) {
+    const contents = getCodeMirrorContents();
+    return { forSave: contents, forComparison: contents };
+  }
+
+  const clone = captureSnapshot();
+
+  // Emit for live-sync before any stripping
+  if (emitForSync) {
+    document.dispatchEvent(new CustomEvent('hyperclay:snapshot-ready', {
+      detail: { documentElement: clone }
+    }));
+  }
+
+  // Run inline [onbeforesave] handlers
+  for (const el of clone.querySelectorAll('[onbeforesave]')) {
+    new Function(el.getAttribute('onbeforesave')).call(el);
+  }
+
+  // Clone for comparison before stripping (cheaper than cloning live DOM)
+  const compareClone = clone.cloneNode(true);
+
+  // Save clone: strip [save-remove], then run hooks
+  for (const el of clone.querySelectorAll('[save-remove]')) {
+    el.remove();
+  }
+  for (const hook of prepareForSaveHooks) {
+    hook(clone);
+  }
+  const forSave = "<!DOCTYPE html>" + clone.outerHTML;
+
+  // Compare clone: strip both, then run hooks
+  for (const el of compareClone.querySelectorAll('[save-remove], [save-ignore]')) {
+    el.remove();
+  }
+  for (const hook of prepareForSaveHooks) {
+    hook(compareClone);
+  }
+  const forComparison = "<!DOCTYPE html>" + compareClone.outerHTML;
+
+  return { forSave, forComparison };
+}
+
 /**
  * PHASE 1-4: Full pipeline for saving to server.
  *

package/src/core/unsavedWarning.js

@@ -7,19 +7,31 @@
  * Works independently of autosave - no mutation observer needed during editing,
  * just a single comparison when the user tries to leave.
  *
+ * Both current and stored content have [save-remove] and [save-ignore] stripped,
+ * so comparison is direct with no parsing needed.
+ *
  * Requires the 'save-system' module (automatically included as dependency).
  */
 
 import { isOwner, isEditMode } from "./isAdminOfCurrentResource.js";
-import { getPageContents, getLastSavedContents } from "./savePage.js";
+import { captureForComparison } from "./snapshot.js";
+import { getLastSavedContents } from "./savePage.js";
+import { logUnloadDiffSync, preloadIfEnabled } from "../utilities/autosaveDebug.js";
+
+// Pre-load diff library if debug mode is on (so it's ready for unload)
+preloadIfEnabled();
 
 window.addEventListener('beforeunload', (event) => {
   if (!isOwner || !isEditMode) return;
 
-  const currentContents = getPageContents();
+  // Compare directly - both are already stripped
+  const currentForCompare = captureForComparison();
   const lastSaved = getLastSavedContents();
 
-  if (currentContents !== lastSaved) {
+  if (currentForCompare !== lastSaved) {
+    // Debug: log what's different before showing the warning
+    logUnloadDiffSync(currentForCompare, lastSaved);
+
     event.preventDefault();
     event.returnValue = '';
   }

package/src/custom-attributes/autosize.esm.js

@@ -0,0 +1 @@
+var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;"undefined"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var o,r=null,n=window.getComputedStyle(t),i=(o=t.value,function(){a({testForHeightReduction:""===o||!t.value.startsWith(o),restoreTextAlign:null}),o=t.value}),l=function(o){t.removeEventListener("autosize:destroy",l),t.removeEventListener("autosize:update",s),t.removeEventListener("input",i),window.removeEventListener("resize",s),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",l),t.addEventListener("autosize:update",s),t.addEventListener("input",i),window.addEventListener("resize",s),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:l,update:s}),s()}function a(e){var o,i,l=e.restoreTextAlign,s=void 0===l?null:l,d=e.testForHeightReduction,u=void 0===d||d,c=n.overflowY;if(0!==t.scrollHeight&&("vertical"===n.resize?t.style.resize="none":"both"===n.resize&&(t.style.resize="horizontal"),u&&(o=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior="auto",t.scrollTop=o,t.style.scrollBehavior=null})}}(t),t.style.height=""),i="content-box"===n.boxSizing?t.scrollHeight-(parseFloat(n.paddingTop)+parseFloat(n.paddingBottom)):t.scrollHeight+parseFloat(n.borderTopWidth)+parseFloat(n.borderBottomWidth),"none"!==n.maxHeight&&i>parseFloat(n.maxHeight)?("hidden"===n.overflowY&&(t.style.overflow="scroll"),i=parseFloat(n.maxHeight)):"hidden"!==n.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",s&&(t.style.textAlign=s),o&&o(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),c!==n.overflow&&!s)){var v=n.textAlign;"hidden"===n.overflow&&(t.style.textAlign="start"===v?"end":"start"),a({restoreTextAlign:v,testForHeightReduction:!0})}}function s(){a({testForHeightReduction:!0,restoreTextAlign:null})}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e});var n=r;export default n;

package/src/custom-attributes/autosize.js

@@ -1,17 +1,20 @@
-function init () {
-  document.addEventListener('input', event => {
-    const target = event.target;
-    if (target.matches('textarea[autosize]')) {
-      target.style.overflowY = 'hidden';
-      target.style.height = 'auto';
-      target.style.height = target.scrollHeight + 'px';
-    }
-  });
+import autosize from './autosize.esm.js';
+
+function init() {
+  document.querySelectorAll('textarea[autosize]').forEach(autosize);
 
-  document.querySelectorAll('textarea[autosize]').forEach(textarea => {
-    textarea.style.overflowY = 'hidden';
-    textarea.style.height = textarea.scrollHeight + 'px';
+  const observer = new MutationObserver(mutations => {
+    mutations.forEach(mutation => {
+      mutation.addedNodes.forEach(node => {
+        if (node.nodeType === 1) {
+          if (node.matches?.('textarea[autosize]')) autosize(node);
+          node.querySelectorAll?.('textarea[autosize]').forEach(autosize);
+        }
+      });
+    });
   });
+  observer.observe(document.body, { childList: true, subtree: true });
 }
+
 export { init };
 export default init;

package/src/custom-attributes/sortable.js

@@ -11,7 +11,7 @@
    - e.g. <ul sortable onsorted="console.log('Items reordered!')"></ul>
 
    This wrapper conditionally loads the full Sortable.js vendor script (~118KB)
-   only when in edit mode. The script is injected with save-ignore so it's
+   only when in edit mode. The script is injected with save-remove so it's
    stripped from the page before saving.
 
 */

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.15.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.16.0 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.
@@ -56,7 +56,7 @@ const MODULE_PATHS = {
   "all-js": "./dom-utilities/All.js",
   "style-injection": "./dom-utilities/insertStyleTag.js",
   "form-data": "./dom-utilities/getDataFromForm.js",
-  "idiomorph": "./vendor/idiomorph.min.js",
+  "hyper-morph": "./vendor/hyper-morph.vendor.js",
   "slugify": "./string-utilities/slugify.js",
   "copy-to-clipboard": "./string-utilities/copy-to-clipboard.js",
   "query-params": "./string-utilities/query.js",
@@ -136,7 +136,7 @@ const PRESETS = {
       "all-js",
       "style-injection",
       "form-data",
-      "idiomorph",
+      "hyper-morph",
       "slugify",
       "copy-to-clipboard",
       "query-params",
@@ -162,6 +162,7 @@ const EDIT_MODE_ONLY = new Set([
   "sortable",
   "onaftersave",
   "cache-bust",
+  "hyper-morph",
   "file-upload",
   "live-sync",
   "tailwind-inject"
@@ -276,7 +277,8 @@ export const All = window.hyperclayModules['all-js']?.All ?? window.hyperclayMod
 export const insertStyles = window.hyperclayModules['style-injection']?.insertStyles ?? window.hyperclayModules['style-injection']?.default;
 export const insertStyleTag = window.hyperclayModules['style-injection']?.insertStyleTag ?? window.hyperclayModules['style-injection']?.default;
 export const getDataFromForm = window.hyperclayModules['form-data']?.getDataFromForm ?? window.hyperclayModules['form-data']?.default;
-export const Idiomorph = window.hyperclayModules['idiomorph']?.Idiomorph ?? window.hyperclayModules['idiomorph']?.default;
+export const HyperMorph = window.hyperclayModules['hyper-morph']?.HyperMorph ?? window.hyperclayModules['hyper-morph']?.default;
+export const morph = window.hyperclayModules['hyper-morph']?.morph ?? window.hyperclayModules['hyper-morph']?.default;
 export const slugify = window.hyperclayModules['slugify']?.slugify ?? window.hyperclayModules['slugify']?.default;
 export const copyToClipboard = window.hyperclayModules['copy-to-clipboard']?.copyToClipboard ?? window.hyperclayModules['copy-to-clipboard']?.default;
 export const query = window.hyperclayModules['query-params']?.query ?? window.hyperclayModules['query-params']?.default;

package/src/ui/theModal.js

@@ -595,7 +595,7 @@ const themodal = (() => {
   const themodalMain = {
     isShowing: false,
     open() {
-      document.body.insertAdjacentHTML("afterbegin", "<div save-ignore class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
+      document.body.insertAdjacentHTML("afterbegin", "<div save-remove class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
 
       const modalOverlayElem = document.querySelector(".micromodal__overlay");
       const modalContentElem = document.querySelector(".micromodal__content");

package/src/ui/toast.js

@@ -191,7 +191,7 @@ export function injectToastStyles(styles, theme) {
 
   const styleSheet = document.createElement('style');
   styleSheet.className = `toast-styles-${theme}`;
-  styleSheet.setAttribute('save-ignore', '');
+  styleSheet.setAttribute('save-remove', '');
   styleSheet.textContent = styles;
   document.head.appendChild(styleSheet);
 
@@ -210,7 +210,7 @@ export function toastCore(message, messageType = "success", config = {}) {
     toastContainer = document.createElement('div');
     toastContainer.className = 'toast-container';
     toastContainer.setAttribute('data-toast-theme', theme);
-    toastContainer.setAttribute('save-ignore', '');
+    toastContainer.setAttribute('save-remove', '');
     document.body.append(toastContainer);
   }
 

package/src/utilities/autosaveDebug.js

@@ -0,0 +1,223 @@
+/**
+ * Autosave Debug Utility
+ *
+ * Provides conditional logging for the autosave system.
+ * Enable by setting localStorage.setItem('hyperclay:debug:autosave', 'true')
+ *
+ * When enabled, dynamically imports a diff library to show exactly
+ * what changed between DOM states.
+ */
+
+const DEBUG_KEY = 'hyperclay:debug:autosave';
+
+let diffModule = null;
+let diffLoadPromise = null;
+
+/**
+ * Check if autosave debug mode is enabled
+ */
+export function isDebugEnabled() {
+  try {
+    return localStorage.getItem(DEBUG_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Lazily load the diff library only when needed
+ * Uses esm.sh for zero-install dynamic import
+ */
+async function loadDiff() {
+  if (diffModule) return diffModule;
+  if (diffLoadPromise) return diffLoadPromise;
+
+  diffLoadPromise = import('https://esm.sh/diff@5.2.0')
+    .then(mod => {
+      diffModule = mod;
+      return mod;
+    })
+    .catch(err => {
+      console.warn('[autosave-debug] Failed to load diff library:', err);
+      return null;
+    });
+
+  return diffLoadPromise;
+}
+
+/**
+ * Log a brief one-liner for save operations
+ */
+export function logSaveCheck(label, matches) {
+  if (!isDebugEnabled()) return;
+
+  const status = matches ? '✓ matches' : '✗ differs';
+  console.log(`[autosave] ${label}: ${status}`);
+}
+
+/**
+ * Log when baseline is captured/updated
+ */
+export function logBaseline(event, details = '') {
+  if (!isDebugEnabled()) return;
+
+  console.log(`[autosave] baseline ${event}${details ? `: ${details}` : ''}`);
+}
+
+/**
+ * Log and diff two HTML strings (async, for unload warning)
+ * Returns a promise that resolves when logging is complete
+ */
+export async function logUnloadDiff(currentContents, lastSaved) {
+  if (!isDebugEnabled()) return;
+
+  console.group('[autosave] Unload warning triggered - content differs from last save');
+  console.log('Current length:', currentContents.length);
+  console.log('Last saved length:', lastSaved.length);
+  console.log('Difference:', currentContents.length - lastSaved.length, 'characters');
+
+  const diff = await loadDiff();
+
+  if (diff) {
+    const changes = diff.diffLines(lastSaved, currentContents);
+
+    console.log('\n--- DIFF (last saved → current) ---');
+
+    let hasChanges = false;
+    changes.forEach(part => {
+      if (part.added || part.removed) {
+        hasChanges = true;
+        const prefix = part.added ? '+++ ' : '--- ';
+        const lines = part.value.split('\n').filter(l => l.length > 0);
+
+        // Truncate very long diffs
+        const maxLines = 20;
+        const displayLines = lines.slice(0, maxLines);
+
+        displayLines.forEach(line => {
+          // Truncate very long lines
+          const displayLine = line.length > 200
+            ? line.substring(0, 200) + '...[truncated]'
+            : line;
+          console.log(prefix + displayLine);
+        });
+
+        if (lines.length > maxLines) {
+          console.log(`... and ${lines.length - maxLines} more lines`);
+        }
+      }
+    });
+
+    if (!hasChanges) {
+      console.log('(No line-level differences found - may be whitespace or inline changes)');
+      // Fall back to character diff for small differences
+      if (Math.abs(currentContents.length - lastSaved.length) < 500) {
+        const charChanges = diff.diffChars(lastSaved, currentContents);
+        console.log('\n--- CHARACTER DIFF ---');
+        charChanges.forEach(part => {
+          if (part.added || part.removed) {
+            const prefix = part.added ? '+++ ' : '--- ';
+            const value = part.value.length > 100
+              ? part.value.substring(0, 100) + '...[truncated]'
+              : part.value;
+            console.log(prefix + JSON.stringify(value));
+          }
+        });
+      }
+    }
+  } else {
+    console.log('(diff library not available - showing raw comparison)');
+    console.log('First 500 chars of current:', currentContents.substring(0, 500));
+    console.log('First 500 chars of last saved:', lastSaved.substring(0, 500));
+  }
+
+  console.groupEnd();
+}
+
+/**
+ * Synchronous version for beforeunload (can't await in event handler)
+ * Logs what it can immediately, diff loads async but may not complete before unload
+ */
+export function logUnloadDiffSync(currentContents, lastSaved) {
+  if (!isDebugEnabled()) return;
+
+  console.group('[autosave] Unload warning triggered - content differs from last save');
+  console.log('Current length:', currentContents.length);
+  console.log('Last saved length:', lastSaved.length);
+  console.log('Difference:', currentContents.length - lastSaved.length, 'characters');
+
+  // If diff is already loaded, use it synchronously
+  if (diffModule) {
+    const changes = diffModule.diffLines(lastSaved, currentContents);
+
+    console.log('\n--- DIFF (last saved → current) ---');
+
+    let hasChanges = false;
+    changes.forEach(part => {
+      if (part.added || part.removed) {
+        hasChanges = true;
+        const prefix = part.added ? '+++ ' : '--- ';
+        const lines = part.value.split('\n').filter(l => l.length > 0);
+
+        const maxLines = 20;
+        const displayLines = lines.slice(0, maxLines);
+
+        displayLines.forEach(line => {
+          const displayLine = line.length > 200
+            ? line.substring(0, 200) + '...[truncated]'
+            : line;
+          console.log(prefix + displayLine);
+        });
+
+        if (lines.length > maxLines) {
+          console.log(`... and ${lines.length - maxLines} more lines`);
+        }
+      }
+    });
+
+    if (!hasChanges) {
+      console.log('(No line-level differences - checking character diff)');
+      if (Math.abs(currentContents.length - lastSaved.length) < 500) {
+        const charChanges = diffModule.diffChars(lastSaved, currentContents);
+        charChanges.forEach(part => {
+          if (part.added || part.removed) {
+            const prefix = part.added ? '+++ ' : '--- ';
+            const value = part.value.length > 100
+              ? part.value.substring(0, 100) + '...[truncated]'
+              : part.value;
+            console.log(prefix + JSON.stringify(value));
+          }
+        });
+      }
+    }
+  } else {
+    // Kick off async load for next time, show basic info now
+    loadDiff();
+    console.log('(diff library loading - run localStorage.setItem("hyperclay:debug:autosave", "true") and reload for full diff)');
+
+    // Find first difference position
+    let diffPos = 0;
+    const minLen = Math.min(currentContents.length, lastSaved.length);
+    while (diffPos < minLen && currentContents[diffPos] === lastSaved[diffPos]) {
+      diffPos++;
+    }
+
+    console.log('First difference at position:', diffPos);
+    console.log('Context around difference:');
+    console.log('  Last saved:', JSON.stringify(lastSaved.substring(Math.max(0, diffPos - 50), diffPos + 100)));
+    console.log('  Current:', JSON.stringify(currentContents.substring(Math.max(0, diffPos - 50), diffPos + 100)));
+  }
+
+  console.groupEnd();
+}
+
+/**
+ * Pre-load the diff library if debug is enabled
+ * Call this early to ensure diff is ready for unload events
+ */
+export function preloadIfEnabled() {
+  if (isDebugEnabled()) {
+    loadDiff();
+    console.log('[autosave-debug] Debug mode enabled - diff library loading');
+  }
+}

package/src/utilities/loadVendorScript.js

@@ -1,8 +1,8 @@
 /*
   Lazy-load vendor scripts in edit mode only
 
-  Injects a <script save-ignore> tag that loads the vendor script.
-  The save-ignore attribute ensures it's stripped when the page is saved.
+  Injects a <script save-remove> tag that loads the vendor script.
+  The save-remove attribute ensures it's stripped when the page is saved.
 
   Usage:
     import { loadVendorScript } from '../utilities/loadVendorScript.js';
@@ -15,7 +15,7 @@
 */
 
 /**
- * Load a vendor script via script tag with save-ignore
+ * Load a vendor script via script tag with save-remove
  * @param {string} url - URL to the vendor script
  * @param {Object} [options] - Options
  * @param {string} [options.globalName] - Window property to return when loaded (for classic scripts)
@@ -33,7 +33,7 @@ export function loadVendorScript(url, options = {}) {
   return new Promise((resolve, reject) => {
     const script = document.createElement('script');
     script.src = url;
-    script.setAttribute('save-ignore', '');
+    script.setAttribute('save-remove', '');
     if (isModule) {
       script.type = 'module';
     }

package/src/utilities/mutation.js

@@ -175,7 +175,9 @@ const Mutation = {
 
   _shouldIgnore(element) {
     while (element && element.nodeType === 1) {
-      if (element.hasAttribute?.('mutations-ignore') || element.hasAttribute?.('save-ignore')) {
+      if (element.hasAttribute?.('mutations-ignore') ||
+          element.hasAttribute?.('save-remove') ||
+          element.hasAttribute?.('save-ignore')) {
         return true;
       }
       element = element.parentElement;
@@ -244,7 +246,7 @@ const Mutation = {
         }
         
         for (const node of mutation.removedNodes) {
-          if (node.nodeType === 1 && !node.hasAttribute?.('save-ignore') && !node.hasAttribute?.('mutations-ignore')) {
+          if (node.nodeType === 1 && !node.hasAttribute?.('save-remove') && !node.hasAttribute?.('save-ignore') && !node.hasAttribute?.('mutations-ignore')) {
             const removedNodes = [node, ...node.querySelectorAll('*')];
             this._log(`Processing ${removedNodes.length} removed nodes`, { removedNodes });
             

package/src/vendor/hyper-morph.vendor.js

@@ -0,0 +1,22 @@
+var HyperMorph=(()=>{var q=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var G=Object.prototype.hasOwnProperty;var Y=(s,a)=>{for(var u in a)q(s,u,{get:a[u],enumerable:!0})},J=(s,a,u,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let f of U(a))!G.call(s,f)&&f!==u&&q(s,f,{get:()=>a[f],enumerable:!(d=z(a,f))||d.enumerable});return s};var K=s=>J(q({},"__esModule",{value:!0}),s);var he={};Y(he,{HyperMorph:()=>V,default:()=>fe,defaults:()=>de,morph:()=>ce});var B={includeClasses:!0,includeAttributes:["href","src","name","type","role","aria-label","alt","title"],excludeAttributePrefixes:["data-morph-","data-hyper-","data-im-"],textHintLength:64,excludeIds:!0,maxPathDepth:4,landmarks:["HEADER","NAV","MAIN","ASIDE","FOOTER","SECTION","ARTICLE"],weights:{signature:100,pathSegment:10,textMatch:20,textMismatch:25,uniqueCandidate:50,positionPenalty:1},minConfidence:101};function Q(s){let a=5381;for(let u=0;u<s.length;u++)a=(a<<5)+a^s.charCodeAt(u);return Math.abs(a).toString(36)}function X(s){if(s.classList&&s.classList.length>0)return Array.from(s.classList).sort().join(" ");let a=s.getAttribute?.("class");return a?a.split(/\s+/).filter(Boolean).sort().join(" "):""}function Z(s,a){let u=[];for(let d of s.attributes||[]){let f=d.name;f==="id"||f==="class"||a.excludeAttributePrefixes.some(y=>f.startsWith(y))||a.includeAttributes.includes(f)&&u.push(`${f}=${d.value}`)}return u.sort().join("|")}function ee(s,a){return(s.textContent||"").replace(/\s+/g," ").trim().slice(0,a.textHintLength)}function te(s,a){let u=[s.tagName];return a.includeClasses&&u.push(X(s)),u.push(Z(s,a)),Q(u.join("|"))}function ne(s){let a=s.tagName,u=1,d=s.previousElementSibling;for(;d;)d.tagName===a&&u++,d=d.previousElementSibling;return u}function re(s,a){return s.id||s.getAttribute?.("role")?!0:a.landmarks.includes(s.tagName)}function se(s){if(s.id)return`#${s.id}`;let a=s.getAttribute?.("role");return a?`@${a}`:s.tagName}function ie(s,a){let u=[],d=s;for(;d&&d.tagName&&u.length<a.maxPathDepth;){let f=`${d.tagName}:${ne(d)}`;if(u.unshift(f),d!==s&&re(d,a)){u.unshift(se(d));break}d=d.parentElement}return u}function ae(s,a){let u=0,d=s.length-1,f=a.length-1;for(;d>=0&&f>=0&&s[d]===a[f];)u++,d--,f--;return u}function R(s,a,u){if(u.has(s))return u.get(s);let d={signature:te(s,a),path:ie(s,a),textHint:ee(s,a)};return u.set(s,d),d}function P(s,a,u,d){if(d.has(s))return d.get(s);let f=new Map,y=s.querySelectorAll("*"),H=0;for(let b of y){let k=R(b,a,u);k.domIndex=H++,f.has(k.signature)||f.set(k.signature,[]),f.get(k.signature).push(b)}return d.set(s,f),f}function oe(s,a,u){u.delete(s),a.delete(s);let d=s.querySelectorAll("*");for(let f of d)a.delete(f)}function F(s,a,u,d,f){let y=R(s,u,d),H=R(a,u,d),b=u.weights,k={},L=0;if(y.signature!==H.signature)return{score:0,breakdown:{rejected:"signature mismatch"}};L+=b.signature,k.signature=b.signature;let I=ae(y.path,H.path)*b.pathSegment;L+=I,k.path=I;let E=!0;if(y.textHint&&H.textHint?y.textHint===H.textHint?(L+=b.textMatch,k.text=b.textMatch):(L-=b.textMismatch,k.text=-b.textMismatch,E=!1):y.textHint!==H.textHint&&(L-=b.textMismatch,k.text=-b.textMismatch,E=!1),f.candidateCount===1&&E&&(L+=b.uniqueCandidate,k.unique=b.uniqueCandidate),typeof y.domIndex=="number"&&typeof H.domIndex=="number"){let x=Math.abs(y.domIndex-H.domIndex),c=Math.min(x*b.positionPenalty,20);L-=c,k.drift=-c}return{score:L,breakdown:k}}function D(s,a,u,d,f){if(u.excludeIds&&s.id)return null;let y=P(a,u,d,f),H=R(s,u,d);if(typeof H.domIndex!="number"){let E=0,x=s.previousElementSibling;for(;x;)E++,x=x.previousElementSibling;H.domIndex=E}let b=y.get(H.signature)||[],k=u.excludeIds?b.filter(E=>!E.id):b;if(k.length===0)return null;let L=null,N=0,I=null;for(let E of k){let{score:x,breakdown:c}=F(s,E,u,d,{candidateCount:k.length});x>N&&(N=x,L=E,I=c)}return N<u.minConfidence?null:{element:L,confidence:N,breakdown:I}}function $(s,a,u,d,f){let y=a.querySelectorAll("*"),H=P(s,u,d,f),b=0;for(let I of y){let E=R(I,u,d);E.domIndex=b++}let k=[];for(let I of y){if(u.excludeIds&&I.id)continue;let E=R(I,u,d),x=H.get(E.signature)||[],c=u.excludeIds?x.filter(S=>!S.id):x;for(let S of c){let{score:p,breakdown:M}=F(I,S,u,d,{candidateCount:c.length});p>=u.minConfidence&&k.push({newEl:I,oldEl:S,score:p,breakdown:M})}}k.sort((I,E)=>E.score-I.score);let L=new Map,N=new Set;for(let{newEl:I,oldEl:E}of k)L.has(I)||N.has(E)||(L.set(I,E),N.add(E));return L}function W(s,a,u,d){let f=R(s,u,d),y=R(a,u,d),{score:H,breakdown:b}=F(s,a,u,d,{candidateCount:1});return{matches:H>=u.minConfidence,score:H,breakdown:b,newMeta:{signature:f.signature,path:f.path,textHint:f.textHint},oldMeta:{signature:y.signature,path:y.path,textHint:y.textHint}}}function C(s={}){let a={...B,...s,weights:{...B.weights,...s.weights}},u=new WeakMap,d=new WeakMap;return{findMatch:(f,y)=>D(f,y,a,u,d),computeMatches:(f,y)=>$(f,y,a,u,d),explain:(f,y)=>W(f,y,a,u),invalidate:f=>oe(f,u,d),session:()=>{let f=new WeakMap,y=new WeakMap;return{findMatch:(H,b)=>D(H,b,a,f,y),computeMatches:(H,b)=>$(H,b,a,f,y),explain:(H,b)=>W(H,b,a,f)}},getConfig:()=>({...a})}}var ue={createMatcher:C,DEFAULT_CONFIG:B};typeof exports<"u"&&(typeof module<"u"&&module.exports&&(module.exports=ue),exports.createMatcher=C,exports.DEFAULT_CONFIG=B);var le=C(),V=(function(){"use strict";let s=()=>{},a={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:s,afterNodeAdded:s,beforeNodeMorphed:s,afterNodeMorphed:s,beforeNodeRemoved:s,afterNodeRemoved:s,beforeAttributeUpdated:s},head:{style:"merge",shouldPreserve:c=>c.getAttribute("im-preserve")==="true",shouldReAppend:c=>c.getAttribute("im-re-append")==="true",shouldRemove:s,afterHeadMorphed:s},scripts:{handle:!1,shouldPreserve:c=>c.getAttribute("im-preserve")==="true",shouldReAppend:c=>c.getAttribute("im-re-append")==="true",shouldRemove:s,afterScriptsHandled:s},restoreFocus:!0},u={computeMatches(c,S){let{computeMatches:p}=le.session();return p(c,S)}};function d(c,S,p={}){c=E(c);let M=x(S),v=I(c,M,p),m=new Set(Array.from(c.querySelectorAll("script")).map(e=>e.outerHTML)),n=y(v,()=>k(v,c,M,e=>e.morphStyle==="innerHTML"?(H(e,c,M),Array.from(c.childNodes)):f(e,c,M)));v.pantry.remove();let o=N(c,m,v);return o.length>0?n instanceof Promise?n.then(e=>Promise.all(o).then(()=>e)):Promise.all(o).then(()=>n):n}function f(c,S,p){let M=x(S);return H(c,M,p,S,S.nextSibling),Array.from(M.childNodes)}function y(c,S){if(!c.config.restoreFocus)return S();let p=document.activeElement;if(!(p instanceof HTMLInputElement||p instanceof HTMLTextAreaElement))return S();let{id:M,selectionStart:v,selectionEnd:m}=p,n=S();return M&&M!==document.activeElement?.getAttribute("id")&&(p=c.target.querySelector(`[id="${M}"]`),p?.focus()),p&&!p.selectionEnd&&m!=null&&p.setSelectionRange(v,m),n}let H=(function(){function c(e,t,i,r=null,l=null){t instanceof HTMLTemplateElement&&i instanceof HTMLTemplateElement&&(t=t.content,i=i.content),r||=t.firstChild;for(let h of i.childNodes){if(r&&r!=l){let A=p(e,h,r,l);if(A){A!==r&&v(e,r,A),b(A,h,e),r=A.nextSibling;continue}}if(h instanceof Element){let A=h.getAttribute("id");if(e.persistentIds.has(A)){let T=m(t,A,r,e);b(T,h,e),r=T.nextSibling;continue}if(!e.idMap.has(h)){let T=e.hyperMatches.get(h);if(T&&!e.idMap.has(T)){o(t,T,r),b(T,h,e),r=T.nextSibling;continue}}}let g=S(t,h,r,e);g&&(r=g.nextSibling)}for(;r&&r!=l;){let h=r;r=r.nextSibling,M(e,h)}}function S(e,t,i,r){if(r.callbacks.beforeNodeAdded(t)===!1)return null;if(r.idMap.has(t)){let l=document.createElement(t.tagName);return e.insertBefore(l,i),b(l,t,r),r.callbacks.afterNodeAdded(l),l}else{let l=document.importNode(t,!0);return e.insertBefore(l,i),r.callbacks.afterNodeAdded(l),l}}let p=(function(){function e(r,l,h,g){let A=l instanceof Element&&!r.idMap.has(l)?r.hyperMatches.get(l):null,T=null,O=l.nextSibling,j=0,w=h;for(;w&&w!=g;){if(i(w,l)){if(t(r,w,l)||w===A&&!r.idMap.has(w))return w;if(T===null){let _=w instanceof Element&&r.hyperMatchedOldElements.has(w);!r.idMap.has(w)&&!_&&(T=w)}}if(T===null&&O&&i(w,O)&&(j++,O=O.nextSibling,j>=2&&(T=void 0)),r.activeElementAndParents.includes(w))break;w=w.nextSibling}return T||null}function t(r,l,h){let g=r.idMap.get(l),A=r.idMap.get(h);if(!A||!g)return!1;for(let T of g)if(A.has(T))return!0;return!1}function i(r,l){let h=r,g=l;return h.nodeType===g.nodeType&&h.tagName===g.tagName&&(!h.getAttribute?.("id")||h.getAttribute?.("id")===g.getAttribute?.("id"))}return e})();function M(e,t){let i=t instanceof Element&&e.hyperMatchedOldElements.has(t)&&!e.idMap.has(t);if(e.idMap.has(t)||i)o(e.pantry,t,null);else{if(e.callbacks.beforeNodeRemoved(t)===!1)return;t.parentNode?.removeChild(t),e.callbacks.afterNodeRemoved(t)}}function v(e,t,i){let r=t;for(;r&&r!==i;){let l=r;r=r.nextSibling,M(e,l)}return r}function m(e,t,i,r){let l=r.target.getAttribute?.("id")===t&&r.target||r.target.querySelector(`[id="${t}"]`)||r.pantry.querySelector(`[id="${t}"]`);return n(l,r),o(e,l,i),l}function n(e,t){let i=e.getAttribute("id");for(;e=e.parentNode;){let r=t.idMap.get(e);r&&(r.delete(i),r.size||t.idMap.delete(e))}}function o(e,t,i){if(e.moveBefore)try{e.moveBefore(t,i)}catch{e.insertBefore(t,i)}else e.insertBefore(t,i)}return c})(),b=(function(){function c(n,o,e){return e.ignoreActive&&n===document.activeElement?null:(e.callbacks.beforeNodeMorphed(n,o)===!1||(n instanceof HTMLHeadElement&&e.head.ignore||(n instanceof HTMLHeadElement&&e.head.style!=="morph"?L(n,o,e):(S(n,o,e),m(n,e)||H(e,n,o))),e.callbacks.afterNodeMorphed(n,o)),n)}function S(n,o,e){let t=o.nodeType;if(t===1){let i=n,r=o,l=i.attributes,h=r.attributes;for(let g of h)v(g.name,i,"update",e)||i.getAttribute(g.name)!==g.value&&i.setAttribute(g.name,g.value);for(let g=l.length-1;0<=g;g--){let A=l[g];if(A&&!r.hasAttribute(A.name)){if(v(A.name,i,"remove",e))continue;i.removeAttribute(A.name)}}m(i,e)||p(i,r,e)}(t===8||t===3)&&n.nodeValue!==o.nodeValue&&(n.nodeValue=o.nodeValue)}function p(n,o,e){if(n instanceof HTMLInputElement&&o instanceof HTMLInputElement&&o.type!=="file"){let t=o.value,i=n.value;M(n,o,"checked",e),M(n,o,"disabled",e),o.hasAttribute("value")?i!==t&&(v("value",n,"update",e)||(n.setAttribute("value",t),n.value=t)):v("value",n,"remove",e)||(n.value="",n.removeAttribute("value"))}else if(n instanceof HTMLOptionElement&&o instanceof HTMLOptionElement)M(n,o,"selected",e);else if(n instanceof HTMLTextAreaElement&&o instanceof HTMLTextAreaElement){let t=o.value,i=n.value;if(v("value",n,"update",e))return;t!==i&&(n.value=t),n.firstChild&&n.firstChild.nodeValue!==t&&(n.firstChild.nodeValue=t)}}function M(n,o,e,t){let i=o[e],r=n[e];if(i!==r){let l=v(e,n,"update",t);l||(n[e]=o[e]),i?l||n.setAttribute(e,""):v(e,n,"remove",t)||n.removeAttribute(e)}}function v(n,o,e,t){return n==="value"&&t.ignoreActiveValue&&o===document.activeElement?!0:t.callbacks.beforeAttributeUpdated(n,o,e)===!1}function m(n,o){return!!o.ignoreActiveValue&&n===document.activeElement&&n!==document.body}return c})();function k(c,S,p,M){if(c.head.block){let v=S.querySelector("head"),m=p.querySelector("head");if(v&&m){let n=L(v,m,c);return Promise.all(n).then(()=>{let o=Object.assign(c,{head:{block:!1,ignore:!0}});return M(o)})}}return M(c)}function L(c,S,p){let M=[],v=[],m=[],n=[],o=new Map;for(let t of S.children)o.set(t.outerHTML,t);for(let t of c.children){let i=o.has(t.outerHTML),r=p.head.shouldReAppend(t),l=p.head.shouldPreserve(t);i||l?r?v.push(t):(o.delete(t.outerHTML),m.push(t)):p.head.style==="append"?r&&(v.push(t),n.push(t)):p.head.shouldRemove(t)!==!1&&v.push(t)}n.push(...o.values());let e=[];for(let t of n){let i=document.createRange().createContextualFragment(t.outerHTML).firstChild;if(p.callbacks.beforeNodeAdded(i)!==!1){if("href"in i&&i.href||"src"in i&&i.src){let r,l=new Promise(function(h){r=h});i.addEventListener("load",function(){r()}),e.push(l)}c.appendChild(i),p.callbacks.afterNodeAdded(i),M.push(i)}}for(let t of v)p.callbacks.beforeNodeRemoved(t)!==!1&&(c.removeChild(t),p.callbacks.afterNodeRemoved(t));return p.head.afterHeadMorphed(c,{added:M,kept:m,removed:v}),e}function N(c,S,p){if(!p.scripts.handle)return[];let M=[],v=[],m=[],n=[],o=Array.from(c.querySelectorAll("script"));for(let t of o){let i=t.outerHTML,r=S.has(i),l=p.scripts.shouldPreserve(t),h=p.scripts.shouldReAppend(t);r||l?h?(v.push(t),n.push(t)):m.push(t):n.push(t)}for(let t of S){let i=o.some(r=>r.outerHTML===t)}let e=[];for(let t of n){if(p.callbacks.beforeNodeAdded(t)===!1)continue;let i=document.createRange().createContextualFragment(t.outerHTML).firstChild;if(i.src){let r,l=new Promise(function(h){r=h});i.addEventListener("load",function(){r()}),i.addEventListener("error",function(){r()}),e.push(l)}t.replaceWith(i),p.callbacks.afterNodeAdded(i),M.push(i)}return p.scripts.afterScriptsHandled(c,{added:M,kept:m,removed:v}),e}let I=(function(){function c(e,t,i){let{persistentIds:r,idMap:l}=n(e,t),h=u.computeMatches(e,t),g=new Set;for(let O of h.values())g.add(O);let A=S(i),T=A.morphStyle||"outerHTML";if(!["innerHTML","outerHTML"].includes(T))throw`Do not understand how to morph style ${T}`;return{target:e,newContent:t,config:A,morphStyle:T,ignoreActive:A.ignoreActive,ignoreActiveValue:A.ignoreActiveValue,restoreFocus:A.restoreFocus,idMap:l,persistentIds:r,hyperMatches:h,hyperMatchedOldElements:g,pantry:p(),activeElementAndParents:M(e),callbacks:A.callbacks,head:A.head,scripts:A.scripts}}function S(e){let t=Object.assign({},a);return Object.assign(t,e),t.callbacks=Object.assign({},a.callbacks,e.callbacks),t.head=Object.assign({},a.head,e.head),t.scripts=Object.assign({},a.scripts,e.scripts),t}function p(){let e=document.createElement("div");return e.hidden=!0,document.body.insertAdjacentElement("afterend",e),e}function M(e){let t=[],i=document.activeElement;if(i?.tagName!=="BODY"&&e.contains(i))for(;i&&(t.push(i),i!==e);)i=i.parentElement;return t}function v(e){let t=Array.from(e.querySelectorAll("[id]"));return e.getAttribute?.("id")&&t.push(e),t}function m(e,t,i,r){for(let l of r){let h=l.getAttribute("id");if(t.has(h)){let g=l;for(;g;){let A=e.get(g);if(A==null&&(A=new Set,e.set(g,A)),A.add(h),g===i)break;g=g.parentElement}}}}function n(e,t){let i=v(e),r=v(t),l=o(i,r),h=new Map;m(h,l,e,i);let g=t.__hyperMorphRoot||t;return m(h,l,g,r),{persistentIds:l,idMap:h}}function o(e,t){let i=new Set,r=new Map;for(let{id:h,tagName:g}of e)r.has(h)?i.add(h):r.set(h,g);let l=new Set;for(let{id:h,tagName:g}of t)l.has(h)?i.add(h):r.get(h)===g&&l.add(h);for(let h of i)l.delete(h);return l}return c})(),{normalizeElement:E,normalizeParent:x}=(function(){let c=new WeakSet;function S(m){return m instanceof Document?m.documentElement:m}function p(m){if(m==null)return document.createElement("div");if(typeof m=="string")return p(v(m));if(c.has(m))return m;if(m instanceof Node){if(m.parentNode)return new M(m);{let n=document.createElement("div");return n.append(m),n}}else{let n=document.createElement("div");for(let o of[...m])n.append(o);return n}}class M{constructor(n){this.originalNode=n,this.realParentNode=n.parentNode,this.previousSibling=n.previousSibling,this.nextSibling=n.nextSibling}get childNodes(){let n=[],o=this.previousSibling?this.previousSibling.nextSibling:this.realParentNode.firstChild;for(;o&&o!=this.nextSibling;)n.push(o),o=o.nextSibling;return n}querySelectorAll(n){return this.childNodes.reduce((o,e)=>{if(e instanceof Element){e.matches(n)&&o.push(e);let t=e.querySelectorAll(n);for(let i=0;i<t.length;i++)o.push(t[i])}return o},[])}insertBefore(n,o){return this.realParentNode.insertBefore(n,o)}moveBefore(n,o){return this.realParentNode.moveBefore(n,o)}get __hyperMorphRoot(){return this.originalNode}}function v(m){let n=new DOMParser,o=m.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(o.match(/<\/html>/)||o.match(/<\/head>/)||o.match(/<\/body>/)){let e=n.parseFromString(m,"text/html");if(o.match(/<\/html>/))return c.add(e),e;{let t=e.firstChild;return t&&c.add(t),t}}else{let t=n.parseFromString("<body><template>"+m+"</template></body>","text/html").body.querySelector("template").content;return c.add(t),t}}return{normalizeElement:S,normalizeParent:p}})();return{morph:d,defaults:a}})();var ce=V.morph,de=V.defaults,fe=V;return K(he);})();
+
+// Convenience morph wrapper with data-id support
+var morph = function(oldEl, newEl, options = {}) {
+    return HyperMorph.morph(oldEl, newEl, {
+        key: (el) => el.getAttribute('data-id') || el.id,
+        ...options
+    });
+};
+
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.HyperMorph = HyperMorph;
+  window.hyperclay.morph = morph;
+  window.HyperMorph = HyperMorph;
+  window.morph = morph;
+  window.h = window.hyperclay;
+}
+
+export { HyperMorph, morph };
+export default HyperMorph;

package/src/vendor/idiomorph.min.js

@@ -1,20 +0,0 @@
-var Idiomorph=function(){"use strict";let o=new Set;let n={morphStyle:"outerHTML",callbacks:{beforeNodeAdded:t,afterNodeAdded:t,beforeNodeMorphed:t,afterNodeMorphed:t,beforeNodeRemoved:t,afterNodeRemoved:t,beforeAttributeUpdated:t},head:{style:"merge",shouldPreserve:function(e){return e.getAttribute("im-preserve")==="true"},shouldReAppend:function(e){return e.getAttribute("im-re-append")==="true"},shouldRemove:t,afterHeadMorphed:t}};function e(e,t,n={}){if(e instanceof Document){e=e.documentElement}if(typeof t==="string"){t=k(t)}let l=y(t);let r=p(e,l,n);return a(e,l,r)}function a(r,i,o){if(o.head.block){let t=r.querySelector("head");let n=i.querySelector("head");if(t&&n){let e=c(n,t,o);Promise.all(e).then(function(){a(r,i,Object.assign(o,{head:{block:false,ignore:true}}))});return}}if(o.morphStyle==="innerHTML"){l(i,r,o);return r.children}else if(o.morphStyle==="outerHTML"||o.morphStyle==null){let e=M(i,r,o);let t=e?.previousSibling;let n=e?.nextSibling;let l=d(r,e,o);if(e){return N(t,l,n)}else{return[]}}else{throw"Do not understand how to morph style "+o.morphStyle}}function u(e,t){return t.ignoreActiveValue&&e===document.activeElement}function d(e,t,n){if(n.ignoreActive&&e===document.activeElement){}else if(t==null){if(n.callbacks.beforeNodeRemoved(e)===false)return e;e.remove();n.callbacks.afterNodeRemoved(e);return null}else if(!g(e,t)){if(n.callbacks.beforeNodeRemoved(e)===false)return e;if(n.callbacks.beforeNodeAdded(t)===false)return e;e.parentElement.replaceChild(t,e);n.callbacks.afterNodeAdded(t);n.callbacks.afterNodeRemoved(e);return t}else{if(n.callbacks.beforeNodeMorphed(e,t)===false)return e;if(e instanceof HTMLHeadElement&&n.head.ignore){}else if(e instanceof HTMLHeadElement&&n.head.style!=="morph"){c(t,e,n)}else{r(t,e,n);if(!u(e,n)){l(t,e,n)}}n.callbacks.afterNodeMorphed(e,t);return e}}function l(n,l,r){let i=n.firstChild;let o=l.firstChild;let a;while(i){a=i;i=a.nextSibling;if(o==null){if(r.callbacks.beforeNodeAdded(a)===false)return;l.appendChild(a);r.callbacks.afterNodeAdded(a);H(r,a);continue}if(b(a,o,r)){d(o,a,r);o=o.nextSibling;H(r,a);continue}let e=A(n,l,a,o,r);if(e){o=v(o,e,r);d(e,a,r);H(r,a);continue}let t=S(n,l,a,o,r);if(t){o=v(o,t,r);d(t,a,r);H(r,a);continue}if(r.callbacks.beforeNodeAdded(a)===false)return;l.insertBefore(a,o);r.callbacks.afterNodeAdded(a);H(r,a)}while(o!==null){let e=o;o=o.nextSibling;T(e,r)}}function f(e,t,n,l){if(e==="value"&&l.ignoreActiveValue&&t===document.activeElement){return true}return l.callbacks.beforeAttributeUpdated(e,t,n)===false}function r(t,n,l){let e=t.nodeType;if(e===1){const r=t.attributes;const i=n.attributes;for(const o of r){if(f(o.name,n,"update",l)){continue}if(n.getAttribute(o.name)!==o.value){n.setAttribute(o.name,o.value)}}for(let e=i.length-1;0<=e;e--){const a=i[e];if(f(a.name,n,"remove",l)){continue}if(!t.hasAttribute(a.name)){n.removeAttribute(a.name)}}}if(e===8||e===3){if(n.nodeValue!==t.nodeValue){n.nodeValue=t.nodeValue}}if(!u(n,l)){s(t,n,l)}}function i(t,n,l,r){if(t[l]!==n[l]){let e=f(l,n,"update",r);if(!e){n[l]=t[l]}if(t[l]){if(!e){n.setAttribute(l,t[l])}}else{if(!f(l,n,"remove",r)){n.removeAttribute(l)}}}}function s(n,l,r){if(n instanceof HTMLInputElement&&l instanceof HTMLInputElement&&n.type!=="file"){let e=n.value;let t=l.value;i(n,l,"checked",r);i(n,l,"disabled",r);if(!n.hasAttribute("value")){if(!f("value",l,"remove",r)){l.value="";l.removeAttribute("value")}}else if(e!==t){if(!f("value",l,"update",r)){l.setAttribute("value",e);l.value=e}}}else if(n instanceof HTMLOptionElement){i(n,l,"selected",r)}else if(n instanceof HTMLTextAreaElement&&l instanceof HTMLTextAreaElement){let e=n.value;let t=l.value;if(f("value",l,"update",r)){return}if(e!==t){l.value=e}if(l.firstChild&&l.firstChild.nodeValue!==e){l.firstChild.nodeValue=e}}}function c(e,t,l){let r=[];let i=[];let o=[];let a=[];let u=l.head.style;let d=new Map;for(const n of e.children){d.set(n.outerHTML,n)}for(const s of t.children){let e=d.has(s.outerHTML);let t=l.head.shouldReAppend(s);let n=l.head.shouldPreserve(s);if(e||n){if(t){i.push(s)}else{d.delete(s.outerHTML);o.push(s)}}else{if(u==="append"){if(t){i.push(s);a.push(s)}}else{if(l.head.shouldRemove(s)!==false){i.push(s)}}}}a.push(...d.values());m("to append: ",a);let f=[];for(const c of a){m("adding: ",c);let n=document.createRange().createContextualFragment(c.outerHTML).firstChild;m(n);if(l.callbacks.beforeNodeAdded(n)!==false){if(n.href||n.src){let t=null;let e=new Promise(function(e){t=e});n.addEventListener("load",function(){t()});f.push(e)}t.appendChild(n);l.callbacks.afterNodeAdded(n);r.push(n)}}for(const h of i){if(l.callbacks.beforeNodeRemoved(h)!==false){t.removeChild(h);l.callbacks.afterNodeRemoved(h)}}l.head.afterHeadMorphed(t,{added:r,kept:o,removed:i});return f}function m(){}function t(){}function h(e){let t={};Object.assign(t,n);Object.assign(t,e);t.callbacks={};Object.assign(t.callbacks,n.callbacks);Object.assign(t.callbacks,e.callbacks);t.head={};Object.assign(t.head,n.head);Object.assign(t.head,e.head);return t}function p(e,t,n){n=h(n);return{target:e,newContent:t,config:n,morphStyle:n.morphStyle,ignoreActive:n.ignoreActive,ignoreActiveValue:n.ignoreActiveValue,idMap:C(e,t),deadIds:new Set,callbacks:n.callbacks,head:n.head}}function b(e,t,n){if(e==null||t==null){return false}if(e.nodeType===t.nodeType&&e.tagName===t.tagName){if(e.id!==""&&e.id===t.id){return true}else{return L(n,e,t)>0}}return false}function g(e,t){if(e==null||t==null){return false}return e.nodeType===t.nodeType&&e.tagName===t.tagName}function v(t,e,n){while(t!==e){let e=t;t=t.nextSibling;T(e,n)}H(n,e);return e.nextSibling}function A(n,e,l,r,i){let o=L(i,l,e);let t=null;if(o>0){let e=r;let t=0;while(e!=null){if(b(l,e,i)){return e}t+=L(i,e,n);if(t>o){return null}e=e.nextSibling}}return t}function S(e,t,n,l,r){let i=l;let o=n.nextSibling;let a=0;while(i!=null){if(L(r,i,e)>0){return null}if(g(n,i)){return i}if(g(o,i)){a++;o=o.nextSibling;if(a>=2){return null}}i=i.nextSibling}return i}function k(n){let l=new DOMParser;let e=n.replace(/<svg(\s[^>]*>|>)([\s\S]*?)<\/svg>/gim,"");if(e.match(/<\/html>/)||e.match(/<\/head>/)||e.match(/<\/body>/)){let t=l.parseFromString(n,"text/html");if(e.match(/<\/html>/)){t.generatedByIdiomorph=true;return t}else{let e=t.firstChild;if(e){e.generatedByIdiomorph=true;return e}else{return null}}}else{let e=l.parseFromString("<body><template>"+n+"</template></body>","text/html");let t=e.body.querySelector("template").content;t.generatedByIdiomorph=true;return t}}function y(e){if(e==null){const t=document.createElement("div");return t}else if(e.generatedByIdiomorph){return e}else if(e instanceof Node){const t=document.createElement("div");t.append(e);return t}else{const t=document.createElement("div");for(const n of[...e]){t.append(n)}return t}}function N(e,t,n){let l=[];let r=[];while(e!=null){l.push(e);e=e.previousSibling}while(l.length>0){let e=l.pop();r.push(e);t.parentElement.insertBefore(e,t)}r.push(t);while(n!=null){l.push(n);r.push(n);n=n.nextSibling}while(l.length>0){t.parentElement.insertBefore(l.pop(),t.nextSibling)}return r}function M(e,t,n){let l;l=e.firstChild;let r=l;let i=0;while(l){let e=w(l,t,n);if(e>i){r=l;i=e}l=l.nextSibling}return r}function w(e,t,n){if(g(e,t)){return.5+L(n,e,t)}return 0}function T(e,t){H(t,e);if(t.callbacks.beforeNodeRemoved(e)===false)return;e.remove();t.callbacks.afterNodeRemoved(e)}function E(e,t){return!e.deadIds.has(t)}function x(e,t,n){let l=e.idMap.get(n)||o;return l.has(t)}function H(e,t){let n=e.idMap.get(t)||o;for(const l of n){e.deadIds.add(l)}}function L(e,t,n){let l=e.idMap.get(t)||o;let r=0;for(const i of l){if(E(e,i)&&x(e,i,n)){++r}}return r}function R(e,n){let l=e.parentElement;let t=e.querySelectorAll("[id]");for(const r of t){let t=r;while(t!==l&&t!=null){let e=n.get(t);if(e==null){e=new Set;n.set(t,e)}e.add(r.id);t=t.parentElement}}}function C(e,t){let n=new Map;R(e,n);R(t,n);return n}return{morph:e,defaults:n}}();
-// MODIFIED, added `morph`
-var morph = function(oldEl, newEl, options = {}) {
-    return Idiomorph.morph(oldEl, newEl, {
-        key: (el) => el.getAttribute('data-id') || el.id,
-        ...options
-    });
-};
-
-// Auto-export to window unless suppressed by loader
-if (!window.__hyperclayNoAutoExport) {
-  window.hyperclay = window.hyperclay || {};
-  window.hyperclay.Idiomorph = Idiomorph;
-  window.hyperclay.morph = morph;
-  window.morph = morph;
-  window.h = window.hyperclay;
-}
-
-export { Idiomorph, morph };
-export default Idiomorph;