hyperclayjs 1.22.1 → 1.23.1

package/README.md

@@ -59,8 +59,8 @@ 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] |
-| option-visibility | 7.8KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
+| 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() |
 | save-system | 13.4KB | CMD+S, [trigger-save] button, savestatus attribute |
@@ -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 (~81.5KB)
+### 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 (~218.6KB)
+### 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.22.1",
+  "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/core/optionVisibility.js

@@ -1,5 +1,5 @@
 /**
- * Option Visibility (CSS Layers Implementation)
+ * Option Visibility
  *
  * Shows/hides elements based on `option:` and `option-not:` attributes.
  *
@@ -23,19 +23,19 @@
  *   </div>
  *
  * HOW IT WORKS:
- * 1. Uses `display: none !important` to forcefully hide elements
- * 2. Uses `display: revert-layer !important` to un-hide when ancestor matches
- *    `revert-layer` tells the browser: "Ignore rules in this layer, fall back to author styles"
- * 3. This preserves the user's original `display` (flex, grid, block) without us knowing what it is
+ * Uses a single conditional-hide rule per pattern. Elements get `display: none !important`
+ * ONLY when they are NOT inside a matching ancestor scope. When the ancestor condition
+ * IS met, the hide rule doesn't match, so the author's original display value
+ * (flex, grid, block, etc.) applies naturally — no recovery needed.
  *
  * BROWSER SUPPORT:
- * Requires `@layer`, `revert-layer`, and `:not()` selector lists (~92% of browsers, 2022+).
+ * Requires `:is()` and `:not()` with selector lists (~96% of browsers, 2021+).
  * Falls back gracefully - elements remain visible if unsupported.
  *
  * TRADEOFFS:
  * - Pro: Pure CSS after generation, zero JS overhead for toggling
- * - Pro: Simple code, similar to original approach
- * - Con: Loses to user `!important` rules (layered !important < unlayered !important)
+ * - Pro: No @layer or revert-layer — works with any author CSS (layered or unlayered)
+ * - Pro: One rule per pattern instead of two
  * - Con: Pipe character `|` cannot be used as a literal value (reserved as OR delimiter)
  */
 
@@ -78,16 +78,7 @@ const optionVisibility = {
   _unsubscribe: null,
 
   log(...args) {
-    if (this.debug) console.log('[OptionVisibility:Layer]', ...args);
-  },
-
-  /**
-   * Check if browser supports the layer approach
-   */
-  isSupported() {
-    return typeof CSS !== 'undefined'
-      && typeof CSS.supports === 'function'
-      && CSS.supports('display', 'revert-layer');
+    if (this.debug) console.log('[OptionVisibility]', ...args);
   },
 
   /**
@@ -126,61 +117,51 @@ const optionVisibility = {
   },
 
   /**
-   * Generate CSS rules wrapped in @layer
+   * Generate CSS rules for conditional hiding.
+   *
+   * Each pattern produces a single rule that hides the element ONLY when
+   * it's NOT inside a matching ancestor scope. When the condition IS met,
+   * the rule doesn't match, so the author's original display value applies.
    */
   generateCSS(patterns) {
     if (!patterns.length) return '';
 
-    const rules = patterns.map(({ name, rawValue, values, negated }) => {
+    return patterns.map(({ name, rawValue, values, negated }) => {
       const safeName = CSS.escape(name);
       const safeRawValue = CSS.escape(rawValue);
       const prefix = negated ? 'option-not' : 'option';
       const attrSelector = `[${prefix}\\:${safeName}="${safeRawValue}"]`;
 
-      // Hide rule (same for both types)
-      const hideRule = `${attrSelector}{display:none!important}`;
-
-      // Show rule depends on type
-      let showRule;
+      let scopeSelectors;
       if (negated) {
-        // option-not: show when ancestor has attr but NOT any of the values
-        // Uses :not(sel1, sel2) selector list syntax
+        // option-not: active when ancestor has attr but NOT any of the values
         const notList = values.map(v => `[${safeName}="${CSS.escape(v)}"]`).join(',');
-        showRule = `[${safeName}]:not(${notList}) ${attrSelector}{display:revert-layer!important}`;
+        const scope = `[${safeName}]:not(${notList})`;
+        scopeSelectors = `${scope},${scope} *`;
       } else {
-        // option: show when ancestor has ANY of the values
-        const showSelectors = values.map(v =>
-          `[${safeName}="${CSS.escape(v)}"] ${attrSelector}`
-        ).join(',');
-        showRule = `${showSelectors}{display:revert-layer!important}`;
+        // option: active when ancestor has ANY of the values
+        const self = values.map(v => `[${safeName}="${CSS.escape(v)}"]`);
+        const desc = values.map(v => `[${safeName}="${CSS.escape(v)}"] *`);
+        scopeSelectors = [...self, ...desc].join(',');
       }
 
-      return hideRule + showRule;
+      return `${attrSelector}:not(:is(${scopeSelectors})){display:none!important}`;
     }).join('');
-
-    return `@layer ${STYLE_NAME}{${rules}}`;
   },
 
   /**
    * Update the style element with current rules
    */
   update() {
-    if (!this.isSupported()) {
-      this.log('Browser lacks revert-layer support, skipping');
-      return;
-    }
-
     try {
       const attributes = this.findOptionAttributes();
       const css = this.generateCSS(attributes);
-      // mutations-ignore: This style tag is regenerated on load. Without this,
-      // the mutation observer would detect it as a change, delaying the settled signal.
       insertStyles(STYLE_NAME, css, (style) => {
         style.setAttribute('mutations-ignore', '');
       });
       this.log(`Generated ${attributes.length} rules`);
     } catch (error) {
-      console.error('[OptionVisibility:Layer] Error generating rules:', error);
+      console.error('[OptionVisibility] Error generating rules:', error);
     }
   },
 
@@ -194,11 +175,6 @@ const optionVisibility = {
 
     this._started = true;
 
-    if (!this.isSupported()) {
-      console.warn('[OptionVisibility:Layer] Browser lacks revert-layer support. Elements will remain visible.');
-      return;
-    }
-
     this.update();
 
     // selectorFilter only triggers on option:/option-not: attribute changes (new patterns).

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.22.1 - 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');
   },