hyperclayjs 1.23.0 → 1.24.0

package/README.md

@@ -59,7 +59,7 @@ import 'hyperclayjs/presets/standard.js';
 |--------|------|-------------|
 | autosave | 1.4KB | Auto-save on DOM changes |
 | edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
-| edit-mode-helpers | 8.3KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
+| edit-mode-helpers | 6.8KB | Admin-only functionality: [viewmode:disabled], [editmode:resource], [editmode:onclick] |
 | option-visibility | 7.1KB | 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 | 8.9KB | Basic save function only - hyperclay.savePage() |
@@ -79,6 +79,7 @@ import 'hyperclayjs/presets/standard.js';
 | input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
 | movable | 2.5KB | Free-positioning drag with [movable] and [movable-handle], edit mode only |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
+| save-freeze | 1.9KB | [save-freeze] attribute - freeze element innerHTML for saves, live DOM changes freely |
 | sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
 
 ### UI Components (User interface elements)
@@ -86,8 +87,8 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 21.5KB | Full modal window creation system - window.theModal |
-| toast | 15.9KB | Success/error message notifications, toast(msg, msgType) |
+| the-modal | 22.4KB | Full modal window creation system - window.theModal |
+| toast | 15.8KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
@@ -96,7 +97,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 | 13.5KB | DOM mutation observation (often auto-included) |
+| mutation | 13.8KB | DOM mutation observation (often auto-included) |
 | nearest | 3.4KB | Find nearest elements (often auto-included) |
 | throttle | 0.8KB | Function throttling |
 
@@ -122,7 +123,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | file-upload | 10.7KB | File upload with progress |
-| live-sync | 11.5KB | Real-time DOM sync across browsers |
+| live-sync | 11.7KB | Real-time DOM sync across browsers |
 | send-message | 1.3KB | Message sending utility |
 
 ### Vendor Libraries (Third-party libraries)
@@ -133,17 +134,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~58.6KB)
+### Minimal (~57KB)
 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 (~80.8KB)
+### Standard (~79.2KB)
 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 (~217.9KB)
+### Everything (~219.6KB)
 All available features
 
 Includes all available modules across all categories.
@@ -316,9 +317,9 @@ tell("Welcome to Hyperclay!");
 
 ```html
 <!-- Only visible/editable in edit mode -->
-<div contenteditable edit-mode-contenteditable>Admin can edit this</div>
-<input type="text" edit-mode-input>
-<script edit-mode-resource>console.log('Admin only');</script>
+<div contenteditable editmode:contenteditable>Admin can edit this</div>
+<input type="text" viewmode:disabled>
+<script editmode:resource>console.log('Admin only');</script>
 ```
 
 ## Module Creation

package/package.json

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

package/src/communication/live-sync.js

@@ -321,7 +321,9 @@ class LiveSync {
 
     this._log('applyUpdate - morph complete, resuming mutations');
     Mutation.resume();
-    this.isPaused = false;
+    // Defer past microtask boundary — MutationObserver callbacks and any async
+    // morph side-effects fire before this, so isPaused catches stray snapshots
+    setTimeout(() => { this.isPaused = false; }, 0);
   }
 
   /**

package/src/core/adminContenteditable.js

@@ -2,7 +2,7 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
-const SELECTOR = '[edit-mode-contenteditable], [editmode\\:contenteditable]';
+const SELECTOR = '[editmode\\:contenteditable]';
 
 export function disableContentEditableBeforeSave () {
   beforeSave(docElem => {

package/src/core/adminInputs.js

@@ -2,20 +2,13 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import { beforeSave } from "./savePage.js";
 
-const SELECTOR_DISABLED = '[edit-mode-input], [viewmode\\:disabled]';
+const SELECTOR_DISABLED = '[viewmode\\:disabled]';
 const SELECTOR_READONLY = '[viewmode\\:readonly]';
-const SELECTOR_ALL = '[edit-mode-input], [viewmode\\:disabled], [viewmode\\:readonly]';
 
 export function disableAdminInputsBeforeSave() {
   beforeSave(docElem => {
     docElem.querySelectorAll(SELECTOR_DISABLED).forEach(input => {
-      if (input.hasAttribute('viewmode:disabled')) {
-        input.setAttribute('disabled', '');
-      } else if (supportsReadonly(input)) {
-        input.setAttribute('readonly', '');
-      } else {
-        input.setAttribute('disabled', '');
-      }
+      input.setAttribute('disabled', '');
     });
     docElem.querySelectorAll(SELECTOR_READONLY).forEach(input => {
       input.setAttribute('readonly', '');
@@ -31,16 +24,9 @@ export function enableAdminInputsOnPageLoad() {
   });
 }
 
-// Runtime toggle functions
 export function enableAdminInputs() {
   document.querySelectorAll(SELECTOR_DISABLED).forEach(input => {
-    if (input.hasAttribute('viewmode:disabled')) {
-      input.removeAttribute('disabled');
-    } else if (supportsReadonly(input)) {
-      input.removeAttribute('readonly');
-    } else {
-      input.removeAttribute('disabled');
-    }
+    input.removeAttribute('disabled');
   });
   document.querySelectorAll(SELECTOR_READONLY).forEach(input => {
     input.removeAttribute('readonly');
@@ -49,43 +35,18 @@ export function enableAdminInputs() {
 
 export function disableAdminInputs() {
   document.querySelectorAll(SELECTOR_DISABLED).forEach(input => {
-    if (input.hasAttribute('viewmode:disabled')) {
-      input.setAttribute('disabled', '');
-    } else if (supportsReadonly(input)) {
-      input.setAttribute('readonly', '');
-    } else {
-      input.setAttribute('disabled', '');
-    }
+    input.setAttribute('disabled', '');
   });
   document.querySelectorAll(SELECTOR_READONLY).forEach(input => {
     input.setAttribute('readonly', '');
   });
 }
 
-// Input types that support the readonly attribute
-const readonlyTypes = ['text', 'search', 'url', 'tel', 'email', 'password', 'date', 'month', 'week', 'time', 'datetime-local', 'number'];
-
-function supportsReadonly(element) {
-  const tagName = element.tagName?.toUpperCase();
-
-  if (tagName === 'TEXTAREA') return true;
-  if (tagName === 'SELECT' || tagName === 'BUTTON' || tagName === 'FIELDSET') return false;
-
-  if (tagName === 'INPUT') {
-    const type = element.type || 'text';
-    return readonlyTypes.includes(type);
-  }
-
-  return false;
-}
-
-// Auto-initialize
 export function init() {
   disableAdminInputsBeforeSave();
   enableAdminInputsOnPageLoad();
 }
 
-// Export to window
 window.hyperclay = window.hyperclay || {};
 window.hyperclay.enableAdminInputs = enableAdminInputs;
 window.hyperclay.disableAdminInputs = disableAdminInputs;

package/src/core/adminOnClick.js

@@ -2,7 +2,7 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
-const SELECTOR = '[edit-mode-onclick], [editmode\\:onclick]';
+const SELECTOR = '[editmode\\:onclick]';
 
 export function disableOnClickBeforeSave () {
   beforeSave(docElem => {

package/src/core/adminResources.js

@@ -2,8 +2,8 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
-const SELECTOR = '[edit-mode-resource]:is(style, link, script), [editmode\\:resource]:is(style, link, script)';
-const SELECTOR_INERT = '[edit-mode-resource]:is(style, link, script)[type^="inert/"], [editmode\\:resource]:is(style, link, script)[type^="inert/"]';
+const SELECTOR = '[editmode\\:resource]:is(style, link, script)';
+const SELECTOR_INERT = '[editmode\\:resource]:is(style, link, script)[type^="inert/"]';
 
 export function disableAdminResourcesBeforeSave () {
   beforeSave(docElem => {

package/src/custom-attributes/saveFreeze.js

@@ -0,0 +1,69 @@
+/**
+ * [save-freeze] Custom Attribute
+ *
+ * Freezes an element's innerHTML for save purposes.
+ * The live DOM can change freely, but the saved HTML always
+ * contains the original content captured when the element first appeared.
+ *
+ * Usage:
+ *   <div save-freeze>Content that JS will modify at runtime</div>
+ *
+ * The original innerHTML is captured:
+ *   - On page load, for all existing [save-freeze] elements
+ *   - On DOM insertion, for dynamically added [save-freeze] elements
+ *
+ * At save time, the clone's innerHTML is replaced with the stored original.
+ * Changes inside [save-freeze] elements do not trigger autosave dirty checks.
+ */
+
+import { onPrepareForSave } from "../core/snapshot.js";
+import { isEditMode } from "../core/isAdminOfCurrentResource.js";
+
+const originals = new WeakMap();
+
+function capture(el) {
+  if (!originals.has(el)) {
+    originals.set(el, el.innerHTML);
+  }
+}
+
+function captureAll() {
+  for (const el of document.querySelectorAll('[save-freeze]')) {
+    capture(el);
+  }
+}
+
+function init() {
+  if (!isEditMode) return;
+
+  captureAll();
+
+  const observer = new MutationObserver(mutations => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.hasAttribute?.('save-freeze')) capture(node);
+        for (const el of node.querySelectorAll?.('[save-freeze]') || []) {
+          capture(el);
+        }
+      }
+    }
+  });
+  observer.observe(document.documentElement, { childList: true, subtree: true });
+
+  onPrepareForSave(clone => {
+    const liveElements = document.querySelectorAll('[save-freeze]');
+    const cloneElements = clone.querySelectorAll('[save-freeze]');
+
+    for (let i = 0; i < cloneElements.length; i++) {
+      const liveEl = liveElements[i];
+      if (liveEl && originals.has(liveEl)) {
+        cloneElements[i].innerHTML = originals.get(liveEl);
+      }
+    }
+  });
+}
+
+init();
+
+export default init;

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.23.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.24.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.
@@ -44,6 +44,7 @@ const MODULE_PATHS = {
   "dom-helpers": "./custom-attributes/domHelpers.js",
   "input-helpers": "./custom-attributes/inputHelpers.js",
   "onaftersave": "./custom-attributes/onaftersave.js",
+  "save-freeze": "./custom-attributes/saveFreeze.js",
   "dialogs": "./ui/prompts.js",
   "toast": "./ui/toast.js",
   "toast-hyperclay": "./ui/toast-hyperclay.js",
@@ -124,6 +125,7 @@ const PRESETS = {
       "dom-helpers",
       "input-helpers",
       "onaftersave",
+      "save-freeze",
       "dialogs",
       "toast",
       "the-modal",
@@ -168,6 +170,7 @@ const PRESETS = {
       "dom-helpers",
       "input-helpers",
       "onaftersave",
+      "save-freeze",
       "dialogs",
       "toast",
       "the-modal",
@@ -208,6 +211,7 @@ const EDIT_MODE_ONLY = new Set([
   "sortable",
   "movable",
   "onaftersave",
+  "save-freeze",
   "cache-bust",
   "hyper-morph",
   "file-upload",

package/src/ui/theModal.js

@@ -608,6 +608,24 @@ const themodal = (() => {
   const themodalMain = {
     isShowing: false,
     open() {
+      // Clean up stale modal if DOM was removed externally (e.g. live-sync morph)
+      if (this.isShowing && !document.querySelector('.micromodal-parent')) {
+        this._cleanupListeners?.();
+        html = "";
+        yes = "";
+        no = "";
+        zIndex = "100";
+        closeHtml = "";
+        enableClickOutsideCloses = true;
+        disableScroll = true;
+        disableFocus = false;
+        onYes = [];
+        onNo = [];
+        onOpen = [];
+        this.isShowing = false;
+        document.body.style.overflow = '';
+      }
+
       document.body.insertAdjacentHTML("afterbegin", "<div save-remove snapshot-remove class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
 
       const modalOverlayElem = document.querySelector(".micromodal__overlay");
@@ -682,6 +700,13 @@ const themodal = (() => {
       document.addEventListener("click", handleClick);
       document.addEventListener("submit", handleSubmit);
 
+      // Store cleanup so stale listeners can be removed if DOM is yanked externally
+      this._cleanupListeners = () => {
+        document.removeEventListener("mousedown", handleMousedown);
+        document.removeEventListener("click", handleClick);
+        document.removeEventListener("submit", handleSubmit);
+      };
+
       function setButtonsVisibility () {
         modalButtonsElem.classList.toggle("micromodal__hide", !yes && !no);
         modalYesElem.classList.toggle("micromodal__hide", !yes);
@@ -718,6 +743,7 @@ const themodal = (() => {
           document.removeEventListener("mousedown", handleMousedown);
           document.removeEventListener("click", handleClick);
           document.removeEventListener("submit", handleSubmit);
+          this._cleanupListeners = null;
         }
       });
 

package/src/ui/toast.js

@@ -235,9 +235,6 @@ export const hyperclayStyles = `
   }
 `;
 
-// Track which theme styles have been injected
-const injectedThemes = new Set();
-
 // Global toast configuration (can be overridden by toast-hyperclay module)
 let toastConfig = {
   styles: modernStyles,
@@ -253,7 +250,7 @@ export function setToastTheme(config) {
 
 // Helper function to inject styles for a theme (additive, not replacing)
 export function injectToastStyles(styles, theme) {
-  if (injectedThemes.has(theme)) return;
+  if (document.querySelector(`style.toast-styles-${theme}`)) return;
 
   const styleSheet = document.createElement('style');
   styleSheet.className = `toast-styles-${theme}`;
@@ -261,8 +258,6 @@ export function injectToastStyles(styles, theme) {
   styleSheet.setAttribute('snapshot-remove', '');
   styleSheet.textContent = styles;
   document.head.appendChild(styleSheet);
-
-  injectedThemes.add(theme);
 }
 
 // Core toast function (used by both toast and toastHyperclay)
@@ -357,8 +352,6 @@ const persistentToastStyles = `
   }
 `;
 
-let persistentStylesInjected = false;
-
 // Track active persistent toasts by message
 const activePersistentToasts = new Map();
 
@@ -367,14 +360,13 @@ function toastPersistent(message, messageType = "warning") {
   injectToastStyles(toastConfig.styles, toastConfig.theme);
 
   // Inject persistent-specific styles once
-  if (!persistentStylesInjected) {
+  if (!document.querySelector('style.toast-styles-persistent')) {
     const styleSheet = document.createElement('style');
     styleSheet.className = 'toast-styles-persistent';
     styleSheet.setAttribute('save-remove', '');
     styleSheet.setAttribute('snapshot-remove', '');
     styleSheet.textContent = persistentToastStyles;
     document.head.appendChild(styleSheet);
-    persistentStylesInjected = true;
   }
 
   const templates = toastConfig.templates;

package/src/utilities/mutation.js

@@ -84,6 +84,11 @@ const Mutation = {
    * Resume mutation observation after a pause.
    */
   resume() {
+    // Drain pending mutation records — observer stays connected during pause,
+    // so morph mutations are recorded and would fire async after _paused=false
+    if (this._observer) {
+      this._observer.takeRecords();
+    }
     this._paused = false;
     this._log('Resumed');
   },
@@ -199,7 +204,8 @@ const Mutation = {
     while (element && element.nodeType === 1) {
       if (element.hasAttribute?.('mutations-ignore') ||
           element.hasAttribute?.('save-remove') ||
-          element.hasAttribute?.('save-ignore')) {
+          element.hasAttribute?.('save-ignore') ||
+          element.hasAttribute?.('save-freeze')) {
         return true;
       }
       element = element.parentElement;