hyperclayjs 1.23.0 → 1.23.1

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() |
@@ -86,8 +86,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 +96,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.7KB | DOM mutation observation (often auto-included) |
 | nearest | 3.4KB | Find nearest elements (often auto-included) |
 | throttle | 0.8KB | Function throttling |
 
@@ -122,7 +122,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 +133,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 (~217.6KB)
 All available features
 
 Includes all available modules across all categories.
@@ -316,9 +316,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.23.1",
   "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/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.23.1 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.

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