hyperclayjs 1.7.0 → 1.8.0

package/README.md

@@ -21,7 +21,7 @@ Destructure directly from the import:
 
 ```html
 <script type="module">
-  const { toast, savePage } = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=standard');
+  const { toast, savePage } = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?preset=standard');
   toast('Hello!');
 </script>
 ```
@@ -30,7 +30,7 @@ Or with custom features:
 
 ```html
 <script type="module">
-  const { toast, ask } = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?features=toast,dialogs');
+  const { toast, ask } = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?features=toast,dialogs');
 </script>
 ```
 
@@ -59,10 +59,10 @@ import 'hyperclayjs/presets/standard.js';
 |--------|------|-------------|
 | autosave | 1.1KB | Auto-save on DOM changes, unsaved changes warning |
 | edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
-| edit-mode-helpers | 5.4KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
+| edit-mode-helpers | 7.5KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
 | option-visibility | 5.9KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
 | persist | 2.5KB | Persist input/select/textarea values to the DOM with [persist] attribute |
-| save-core | 6.3KB | Basic save function only - hyperclay.savePage() |
+| save-core | 6.5KB | Basic save function only - hyperclay.savePage() |
 | save-system | 7.1KB | Manual save: keyboard shortcut (CMD+S), save button, change tracking |
 | save-toast | 0.9KB | Toast notifications for save events |
 
@@ -71,18 +71,18 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | ajax-elements | 2.8KB | [ajax-form], [ajax-button] for async form submissions |
-| dom-helpers | 5.7KB | el.nearest, el.val, el.text, el.exec, el.cycle |
-| event-attrs | 3.6KB | [onclickaway], [onclone], [onpagemutation], [onrender] |
+| dom-helpers | 6.2KB | el.nearest, el.val, el.text, el.exec, el.cycle |
+| event-attrs | 4.1KB | [onclickaway], [onclone], [onpagemutation], [onrender] |
 | input-helpers | 1.2KB | [prevent-enter], [autosize] for textareas |
 | onaftersave | 1.2KB | [onaftersave] attribute - run JS when save status changes |
-| sortable | 2.8KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
+| sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
 
 ### UI Components (User interface elements)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| dialogs | 8.4KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 19.8KB | Full modal window creation system - window.theModal |
+| dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
+| the-modal | 21.8KB | Full modal window creation system - window.theModal |
 | toast | 7.7KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
@@ -99,7 +99,7 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| all-js | 14KB | Full DOM manipulation library |
+| all-js | 14.4KB | Full DOM manipulation library |
 | dom-ready | 0.4KB | DOM ready callback |
 | form-data | 2KB | Extract form data as an object |
 | style-injection | 1.1KB | Dynamic stylesheet injection |
@@ -127,17 +127,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~27.8KB)
+### Minimal (~30.1KB)
 Essential features for basic editing
 
 **Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`
 
-### Standard (~45.5KB)
+### Standard (~48.8KB)
 Standard feature set for most use cases
 
 **Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`
 
-### Everything (~150.2KB)
+### Everything (~155.8KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,39 +1,31 @@
 {
   "name": "hyperclayjs",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
-  "main": "hyperclay.js",
-  "module": "hyperclay.js",
+  "main": "src/hyperclay.js",
+  "module": "src/hyperclay.js",
   "exports": {
     ".": {
-      "import": "./hyperclay.js",
-      "default": "./hyperclay.js"
+      "import": "./src/hyperclay.js",
+      "default": "./src/hyperclay.js"
     },
-    "./core/*": "./core/*.js",
-    "./custom-attributes/*": "./custom-attributes/*.js",
-    "./ui/*": "./ui/*.js",
-    "./utilities/*": "./utilities/*.js",
-    "./dom-utilities/*": "./dom-utilities/*.js",
-    "./string-utilities/*": "./string-utilities/*.js",
-    "./communication/*": "./communication/*.js",
-    "./vendor/*": "./vendor/*.js"
+    "./core/*": "./src/core/*.js",
+    "./custom-attributes/*": "./src/custom-attributes/*.js",
+    "./ui/*": "./src/ui/*.js",
+    "./utilities/*": "./src/utilities/*.js",
+    "./dom-utilities/*": "./src/dom-utilities/*.js",
+    "./string-utilities/*": "./src/string-utilities/*.js",
+    "./communication/*": "./src/communication/*.js",
+    "./vendor/*": "./src/vendor/*.js"
   },
   "files": [
-    "core",
-    "custom-attributes",
-    "ui",
-    "utilities",
-    "dom-utilities",
-    "string-utilities",
-    "communication",
-    "vendor",
-    "hyperclay.js",
-    "module-dependency-graph.json"
+    "src"
   ],
   "scripts": {
-    "dev": "npm run build && http-server -p 3535 -c-1 -o /index.html",
+    "dev": "npm run build && npm run build:website && http-server website -p 3535 -c-1 -o /index.html",
     "build": "npm run generate:deps && npm run build:loader && npm run build:readme && npm run build:load-jsdelivr && npm run build:index-url",
+    "build:website": "node scripts/build-website.js",
     "generate:deps": "node build/generate-dependency-graph.js",
     "build:loader": "node build/build-loader.js",
     "build:readme": "node build/generate-readme.js",
@@ -44,7 +36,7 @@
     "format": "prettier --write .",
     "release": "./scripts/release.sh",
     "prepublishOnly": "npm run build && npm test",
-    "postpublish": "test -n \"$SKIP_POSTPUBLISH\" || open http://127.0.0.1:3535/build/load-jsdelivr.html"
+    "postpublish": "test -n \"$SKIP_POSTPUBLISH\" || open http://127.0.0.1:3535/load-jsdelivr.html"
   },
   "repository": {
     "type": "git",

package/src/core/adminContenteditable.js

@@ -0,0 +1,51 @@
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+import onDomReady from "../dom-utilities/onDomReady.js";
+import {beforeSave} from "./savePage.js";
+
+export function disableContentEditableBeforeSave () {
+  beforeSave(docElem => {
+    docElem.querySelectorAll('[edit-mode-contenteditable]').forEach(resource => {
+      const originalValue = resource.getAttribute("contenteditable");
+      resource.setAttribute("inert-contenteditable", originalValue);
+      resource.removeAttribute("contenteditable");
+    });
+  });
+}
+
+export function enableContentEditableForAdminOnPageLoad () {
+  if (!isEditMode) return;
+
+  onDomReady(() => {
+    enableContentEditable();
+  });
+}
+
+// Runtime toggle functions
+export function enableContentEditable() {
+  document.querySelectorAll('[edit-mode-contenteditable]').forEach(el => {
+    let val = el.getAttribute("inert-contenteditable");
+    if (!["false", "plaintext-only"].includes(val)) val = "true";
+    el.setAttribute("contenteditable", val);
+    el.removeAttribute("inert-contenteditable");
+  });
+}
+
+export function disableContentEditable() {
+  document.querySelectorAll('[edit-mode-contenteditable]').forEach(el => {
+    const val = el.getAttribute("contenteditable") || "true";
+    el.setAttribute("inert-contenteditable", val);
+    el.removeAttribute("contenteditable");
+  });
+}
+
+// Auto-initialize
+export function init() {
+  disableContentEditableBeforeSave();
+  enableContentEditableForAdminOnPageLoad();
+}
+
+// Export to window
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.enableContentEditable = enableContentEditable;
+window.hyperclay.disableContentEditable = disableContentEditable;
+window.h = window.hyperclay;

package/{core → src/core}/adminInputs.js

@@ -18,13 +18,28 @@ export function enableAdminInputsOnPageLoad() {
   if (!isEditMode) return;
 
   onDomReady(() => {
-    document.querySelectorAll('[edit-mode-input]').forEach(input => {
-      if (supportsReadonly(input)) {
-        input.removeAttribute('readonly');
-      } else {
-        input.removeAttribute('disabled');
-      }
-    });
+    enableAdminInputs();
+  });
+}
+
+// Runtime toggle functions
+export function enableAdminInputs() {
+  document.querySelectorAll('[edit-mode-input]').forEach(input => {
+    if (supportsReadonly(input)) {
+      input.removeAttribute('readonly');
+    } else {
+      input.removeAttribute('disabled');
+    }
+  });
+}
+
+export function disableAdminInputs() {
+  document.querySelectorAll('[edit-mode-input]').forEach(input => {
+    if (supportsReadonly(input)) {
+      input.setAttribute('readonly', '');
+    } else {
+      input.setAttribute('disabled', '');
+    }
   });
 }
 
@@ -55,4 +70,10 @@ function supportsReadonly(element) {
 export function init() {
   disableAdminInputsBeforeSave();
   enableAdminInputsOnPageLoad();
-}
+}
+
+// Export to window
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.enableAdminInputs = enableAdminInputs;
+window.hyperclay.disableAdminInputs = disableAdminInputs;
+window.h = window.hyperclay;

package/src/core/adminOnClick.js

@@ -0,0 +1,54 @@
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+import onDomReady from "../dom-utilities/onDomReady.js";
+import {beforeSave} from "./savePage.js";
+
+export function disableOnClickBeforeSave () {
+  beforeSave(docElem => {
+    docElem.querySelectorAll('[edit-mode-onclick]').forEach(resource => {
+      const originalValue = resource.getAttribute("onclick");
+      resource.setAttribute("inert-onclick", originalValue);
+      resource.removeAttribute("onclick");
+    });
+  });
+}
+
+export function enableOnClickForAdminOnPageLoad () {
+  if (!isEditMode) return;
+
+  onDomReady(() => {
+    enableOnClick();
+  });
+}
+
+// Runtime toggle functions
+export function enableOnClick() {
+  document.querySelectorAll('[edit-mode-onclick]').forEach(el => {
+    const val = el.getAttribute("inert-onclick");
+    if (val) {
+      el.setAttribute("onclick", val);
+      el.removeAttribute("inert-onclick");
+    }
+  });
+}
+
+export function disableOnClick() {
+  document.querySelectorAll('[edit-mode-onclick]').forEach(el => {
+    const val = el.getAttribute("onclick");
+    if (val) {
+      el.setAttribute("inert-onclick", val);
+      el.removeAttribute("onclick");
+    }
+  });
+}
+
+// Auto-initialize
+export function init() {
+  disableOnClickBeforeSave();
+  enableOnClickForAdminOnPageLoad();
+}
+
+// Export to window
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.enableOnClick = enableOnClick;
+window.hyperclay.disableOnClick = disableOnClick;
+window.h = window.hyperclay;

package/{core → src/core}/adminResources.js

@@ -18,11 +18,25 @@ export function enableAdminResourcesOnPageLoad () {
   if (!isEditMode) return;
 
   onDomReady(() => {
-    document.querySelectorAll('[edit-mode-resource]:is(style, link, script)[type^="inert/"]').forEach(resource => {
-      // works for js and css
-      resource.type = resource.type.replace(/inert\//g, '');
+    enableAdminResources();
+  });
+}
+
+// Runtime toggle functions
+export function enableAdminResources() {
+  document.querySelectorAll('[edit-mode-resource]:is(style, link, script)[type^="inert/"]').forEach(resource => {
+    resource.type = resource.type.replace(/inert\//g, '');
+    resource.replaceWith(resource.cloneNode(true));
+  });
+}
+
+export function disableAdminResources() {
+  document.querySelectorAll('[edit-mode-resource]:is(style, link, script)').forEach(resource => {
+    const currentType = resource.getAttribute('type') || 'text/javascript';
+    if (!currentType.startsWith('inert/')) {
+      resource.setAttribute('type', `inert/${currentType}`);
       resource.replaceWith(resource.cloneNode(true));
-    });
+    }
   });
 }
 
@@ -30,4 +44,10 @@ export function enableAdminResourcesOnPageLoad () {
 export function init() {
   disableAdminResourcesBeforeSave();
   enableAdminResourcesOnPageLoad();
-}
+}
+
+// Export to window
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.enableAdminResources = enableAdminResources;
+window.hyperclay.disableAdminResources = disableAdminResources;
+window.h = window.hyperclay;

package/{core → src/core}/savePage.js

@@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
  * @param {Function} callback - Optional callback for custom handling
  */
 export function savePage(callback = () => {}) {
-  if (!isEditMode) {
+  if (!isEditMode && !window.hyperclay?.testMode) {
     return;
   }
 

package/{core → src/core}/savePageCore.js

@@ -73,11 +73,21 @@ export function getPageContents() {
  * });
  */
 export function savePage(callback = () => {}) {
-  if (!isEditMode || saveInProgress) {
+  if (saveInProgress) {
+    return;
+  }
+  if (!isEditMode && !window.hyperclay?.testMode) {
     return;
   }
 
-  const currentContents = getPageContents();
+  let currentContents;
+  try {
+    currentContents = getPageContents();
+  } catch (err) {
+    console.error('savePage: getPageContents failed', err);
+    callback({msg: err.message, msgType: "error"});
+    return;
+  }
   saveInProgress = true;
 
   // Test mode: skip network request, return mock success

package/{custom-attributes → src/custom-attributes}/domHelpers.js

@@ -24,22 +24,35 @@ function init () {
     }
   });
 
-  // elem.val.project returns the value of the nearest "project" attribute
-  // elem.val.project = "hello world" sets the value of the nearest "project" attribute
+  // elem.val.project returns the value of the nearest element with "project" attribute
+  // elem.val.project = "hello world" sets the value of the nearest element with "project" attribute
+  // For form elements (input/select/textarea), uses the value property; otherwise uses the attribute
   Object.defineProperty(HTMLElement.prototype, 'val', {
     configurable: true,
     get: function() {
       let element = this;
 
+      const isFormElement = (elem) =>
+        elem.tagName === 'INPUT' || elem.tagName === 'SELECT' || elem.tagName === 'TEXTAREA';
+
       const handler = {
         get(target, prop) {
-          return nearest(element, `[${prop}], .${prop}`, elem => elem.getAttribute(prop));
+          return nearest(element, `[${prop}], .${prop}`, elem => {
+            if (isFormElement(elem)) {
+              return elem.value;
+            }
+            return elem.getAttribute(prop);
+          });
         },
         set(target, prop, value) {
           const foundElem = nearest(element, `[${prop}], .${prop}`);
 
           if (foundElem) {
-            foundElem.setAttribute(prop, value);
+            if (isFormElement(foundElem)) {
+              foundElem.value = value;
+            } else {
+              foundElem.setAttribute(prop, value);
+            }
           }
 
           return true;

package/{custom-attributes → src/custom-attributes}/events.js

@@ -1,12 +1,14 @@
 // Events module - combines all event attribute handlers
 import { init as initOnclickaway } from './onclickaway.js';
 import { init as initOnclone } from './onclone.js';
+import { init as initOnmutation } from './onmutation.js';
 import { init as initOnpagemutation } from './onpagemutation.js';
 import { init as initOnrender } from './onrender.js';
 
 function init() {
   initOnclickaway();
   initOnclone();
+  initOnmutation();
   initOnpagemutation();
   initOnrender();
 }

package/src/custom-attributes/onmutation.js

@@ -0,0 +1,90 @@
+/*
+   [onmutation] - Trigger code when this element or its children change
+
+   Usage:
+   <div onmutation="console.log('My content changed')">
+     <span contenteditable>Edit me</span>
+   </div>
+
+   Unlike [onglobalmutation]/[onpagemutation] which fires on ANY DOM change,
+   [onmutation] only fires when the element itself or its descendants mutate.
+*/
+import Mutation from "../utilities/mutation.js";
+
+const observers = new WeakMap();
+
+function setupMutationObserver(element) {
+  if (observers.has(element)) return;
+
+  const executeMutation = async () => {
+    try {
+      const code = element.getAttribute('onmutation');
+      if (!code) return;
+      const asyncFn = new Function(`return (async function() { ${code} })`)();
+      await asyncFn.call(element);
+    } catch (error) {
+      console.error('Error in onmutation execution:', error);
+    }
+  };
+
+  const observer = new MutationObserver(() => {
+    executeMutation();
+  });
+
+  observer.observe(element, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+    attributes: true
+  });
+
+  observers.set(element, observer);
+}
+
+function teardownMutationObserver(element) {
+  const observer = observers.get(element);
+  if (observer) {
+    observer.disconnect();
+    observers.delete(element);
+  }
+}
+
+function init() {
+  // Set up existing elements
+  document.querySelectorAll('[onmutation]').forEach(setupMutationObserver);
+
+  // Watch for dynamically added elements with onmutation
+  Mutation.onAddElement({
+    selectorFilter: '[onmutation]',
+    debounce: 200
+  }, (changes) => {
+    changes.forEach(({ element }) => {
+      setupMutationObserver(element);
+    });
+  });
+
+  // Clean up when elements are removed
+  Mutation.onRemoveElement({
+    selectorFilter: '[onmutation]',
+    debounce: 200
+  }, (changes) => {
+    changes.forEach(({ element }) => {
+      teardownMutationObserver(element);
+    });
+  });
+
+  // Watch for attribute removal
+  Mutation.onAttribute({
+    selectorFilter: '[onmutation]',
+    debounce: 200
+  }, (changes) => {
+    changes.forEach(({ element, attribute, newValue }) => {
+      if (attribute === 'onmutation' && newValue === null) {
+        teardownMutationObserver(element);
+      }
+    });
+  });
+}
+
+export { init };
+export default init;

package/src/custom-attributes/onpagemutation.js

@@ -0,0 +1,32 @@
+/*
+   [onpagemutation] / [onglobalmutation] - Trigger code when ANY element on the page changes
+
+   Usage:
+   <span onglobalmutation="this.textContent = All('li').length">0</span>
+   <span onpagemutation="this.textContent = All('li').length">0</span>
+
+   Both attributes are equivalent - onglobalmutation is the preferred name for clarity.
+*/
+import Mutation from "../utilities/mutation.js";
+
+function init() {
+  const executeGlobalMutation = async element => {
+    try {
+      // Support both onglobalmutation and onpagemutation (legacy)
+      const code = element.getAttribute('onglobalmutation') || element.getAttribute('onpagemutation');
+      const asyncFn = new Function(`return (async function() { ${code} })`)();
+      await asyncFn.call(element);
+    } catch (error) {
+      console.error('Error in onglobalmutation/onpagemutation execution:', error);
+    }
+  };
+
+  Mutation.onAnyChange({
+    debounce: 200,
+    omitChangeDetails: true
+  }, () => {
+    document.querySelectorAll('[onglobalmutation], [onpagemutation]').forEach(executeGlobalMutation);
+  });
+}
+export { init };
+export default init;

package/{custom-attributes → src/custom-attributes}/sortable.js

@@ -5,6 +5,8 @@
    How to use:
    - add `sortable` attribute to an element to make children sortable
    - e.g. <div sortable></div>
+   - add `onsorting` attribute to execute code during drag
+   - e.g. <ul sortable onsorting="console.log('Dragging!')"></ul>
    - add `onsorted` attribute to execute code when items are sorted
    - e.g. <ul sortable onsorted="console.log('Items reordered!')"></ul>
 
@@ -39,7 +41,20 @@ function makeSortable(sortableElem, Sortable) {
     options.handle = '[sortable-handle]';
   }
 
-  // Add onsorted callback if attribute exists
+  // Add onsorting callback if attribute exists (fires during drag)
+  const onsortingCode = sortableElem.getAttribute('onsorting');
+  if (onsortingCode) {
+    options.onMove = function(evt) {
+      try {
+        const asyncFn = new Function(`return (async function(evt) { ${onsortingCode} })`)();
+        asyncFn.call(sortableElem, evt);
+      } catch (error) {
+        console.error('Error in onsorting execution:', error);
+      }
+    };
+  }
+
+  // Add onsorted callback if attribute exists (fires after drop)
   const onsortedCode = sortableElem.getAttribute('onsorted');
   if (onsortedCode) {
     options.onEnd = function(evt) {

package/{dom-utilities → src/dom-utilities}/All.js

@@ -336,6 +336,28 @@ const defaultPlugins = {
       });
 
       return this;
+    },
+
+    pluck(attr) {
+      return this.map(el => el.getAttribute(attr));
+    },
+
+    unique() {
+      return [...new Set(this)];
+    },
+
+    sortBy(fn) {
+      if (typeof fn === 'string') {
+        const attr = fn;
+        fn = el => el.getAttribute(attr);
+      }
+      return [...this].sort((a, b) => {
+        const aVal = fn(a);
+        const bVal = fn(b);
+        if (aVal < bVal) return -1;
+        if (aVal > bVal) return 1;
+        return 0;
+      });
     }
   }
 };

package/{hyperclay.js → src/hyperclay.js}

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.7.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.8.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.
@@ -8,11 +8,11 @@
  *
  * <script type="module">
  *   // With window.hyperclay (default presets include export-to-window):
- *   await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=minimal');
+ *   await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?preset=minimal');
  *   const { toast, savePage } = window.hyperclay;
  *
  *   // ES modules only (exclude export-to-window):
- *   const hyperclay = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=minimal&exclude=export-to-window');
+ *   const hyperclay = await import('https://cdn.jsdelivr.net/npm/hyperclayjs@1/src/hyperclay.js?preset=minimal&exclude=export-to-window');
  *   const modules = window.hyperclayModules;
  * </script>
  *

package/{module-dependency-graph.json → src/module-dependency-graph.json}

@@ -1,15 +1,5 @@
 {
   "rawDependencies": {
-    "__tests__/All.test.js": [
-      "dom-utilities/All.js"
-    ],
-    "babel.config.js": [],
-    "build/build-loader.js": [],
-    "build/generate-dependency-graph.js": [],
-    "build/generate-load-jsdelivr.js": [],
-    "build/generate-readme.js": [],
-    "build/hyperclay.template.js": [],
-    "build/update-index-url.js": [],
     "communication/behaviorCollector.js": [],
     "communication/sendMessage.js": [
       "communication/behaviorCollector.js",
@@ -89,9 +79,6 @@
       "core/savePage.js",
       "dom-utilities/onDomReady.js"
     ],
-    "coverage/lcov-report/block-navigation.js": [],
-    "coverage/lcov-report/prettify.js": [],
-    "coverage/lcov-report/sorter.js": [],
     "custom-attributes/ajaxElements.js": [
       "dom-utilities/getDataFromForm.js"
     ],
@@ -103,6 +90,7 @@
     "custom-attributes/events.js": [
       "custom-attributes/onclickaway.js",
       "custom-attributes/onclone.js",
+      "custom-attributes/onmutation.js",
       "custom-attributes/onpagemutation.js",
       "custom-attributes/onrender.js"
     ],
@@ -113,6 +101,9 @@
     "custom-attributes/onaftersave.js": [],
     "custom-attributes/onclickaway.js": [],
     "custom-attributes/onclone.js": [],
+    "custom-attributes/onmutation.js": [
+      "utilities/mutation.js"
+    ],
     "custom-attributes/onpagemutation.js": [
       "utilities/mutation.js"
     ],
@@ -132,7 +123,6 @@
     "dom-utilities/onDomReady.js": [],
     "dom-utilities/onLoad.js": [],
     "hyperclay.js": [],
-    "jest.config.js": [],
     "string-utilities/copy-to-clipboard.js": [],
     "string-utilities/query.js": [],
     "string-utilities/slugify.js": [],
@@ -161,7 +151,7 @@
     "save-core": {
       "name": "save-core",
       "category": "core",
-      "size": 6.3,
+      "size": 6.5,
       "files": [
         "core/savePageCore.js"
       ],
@@ -218,7 +208,7 @@
     "edit-mode-helpers": {
       "name": "edit-mode-helpers",
       "category": "core",
-      "size": 5.4,
+      "size": 7.500000000000001,
       "files": [
         "core/adminSystem.js",
         "core/adminContenteditable.js",
@@ -274,7 +264,7 @@
     "event-attrs": {
       "name": "event-attrs",
       "category": "custom-attributes",
-      "size": 3.6000000000000005,
+      "size": 4.1000000000000005,
       "files": [
         "custom-attributes/events.js",
         "custom-attributes/onclickaway.js",
@@ -298,7 +288,7 @@
     "sortable": {
       "name": "sortable",
       "category": "custom-attributes",
-      "size": 2.8,
+      "size": 3.4,
       "files": [
         "custom-attributes/sortable.js"
       ],
@@ -308,7 +298,7 @@
     "dom-helpers": {
       "name": "dom-helpers",
       "category": "custom-attributes",
-      "size": 5.7,
+      "size": 6.2,
       "files": [
         "custom-attributes/domHelpers.js"
       ],
@@ -340,7 +330,7 @@
     "dialogs": {
       "name": "dialogs",
       "category": "ui",
-      "size": 8.4,
+      "size": 7.7,
       "files": [
         "ui/prompts.js"
       ],
@@ -396,7 +386,7 @@
     "the-modal": {
       "name": "the-modal",
       "category": "ui",
-      "size": 19.8,
+      "size": 21.8,
       "files": [
         "ui/theModal.js"
       ],
@@ -512,7 +502,7 @@
     "all-js": {
       "name": "all-js",
       "category": "dom-utilities",
-      "size": 14,
+      "size": 14.4,
       "files": [
         "dom-utilities/All.js"
       ],

package/{ui → src/ui}/prompts.js

@@ -3,7 +3,7 @@ import onDomReady from "../dom-utilities/onDomReady.js";
 import toast from "./toast.js";
 import copyToClipboard from "../string-utilities/copy-to-clipboard.js";
 
-const CLOSE_BUTTON_SVG = `<svg class="group" viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-[#1D2032] group-hover:fill-[#212543]" d="M132 132.5 1 1.5h131v131Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" fill="#fff"/></svg>`;
+const CLOSE_BUTTON_SVG = `<svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg>`;
 const CONFIRM_BUTTON_SVG = `<div style="width: 28px;"><svg viewBox="0 0 60 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 0.75H43.5V5.25H49V9.75H54.5V14.25H60V18.75H54.5V23.25H49V27.75H43.5V32.25H34.5V27.75H40V23.25H45.5V18.75H0V14.25H45.5V9.75H40V5.25H34.5V0.75Z" fill="white"/></svg></div>`;
 
 function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "") {
@@ -70,11 +70,11 @@ export function consent(promptText, yesCallback, extraContent = "") {
  */
 export function tell(promptText, ...content) {
   const contentHtml = content.length > 0
-    ? content.map(c => `<div class="text-[16px] sm:text-[18px] font-normal">${c}</div>`).join("")
+    ? content.map(c => `<div class="micromodal__tell-content">${c}</div>`).join("")
     : "";
 
-  themodal.html = `<div class="max-w-[440px] space-y-5 mb-7">
-    <div class="text-[20px] sm:text-[22px] font-bold">${promptText}</div>
+  themodal.html = `<div class="micromodal__tell">
+    <div class="micromodal__tell-title">${promptText}</div>
     ${contentHtml}
   </div>`;
   themodal.closeHtml = CLOSE_BUTTON_SVG;
@@ -98,27 +98,22 @@ export function tell(promptText, ...content) {
 
 /**
  * Display a modal with a code snippet and copy functionality
- * Following the existing modal pattern from prompts.js
+ * @param {string} title - The modal heading
+ * @param {string} content - The code to display
+ * @param {string} extraContent - Optional warning/info text below the copy button
  */
-export function snippet(title, content, options = {}) {
-  const {
-    extraContent = 'Save this, it won\'t be shown again. Expires in 1 year.'
-  } = options;
+export function snippet(title, content, extraContent = '') {
 
   // Create the modal content with copy button
   const modalContent = `
-    <div class="bg-[#292E54] p-4 mb-[14px] max-w-[420px]">
-      <div class="overflow-x-auto">
-        <pre class="text-white font-mono text-sm whitespace-nowrap">${content}</pre>
-      </div>
+    <div class="snippet-code-block">
+      <pre>${content}</pre>
     </div>
 
-    <button type="button" class="custom-button group font-fixedsys text-center cursor-pointer border-[3px] border-t-[#474C65] border-r-[#131725] border-b-[#131725] border-l-[#474C65] bg-[#1D1F2F] hover:bg-[#232639] active:border-b-[#474C65] active:border-l-[#131725] active:border-t-[#131725] active:border-r-[#474C65] text-[23px] p-[2px_16px_4px] w-full mb-4 copy-snippet-btn">
-      <span class="whitespace-nowrap select-none inline-block group-active:translate-x-[1.5px] group-active:translate-y-[1.5px]">copy</span>
-    </button>
+    <button type="button" class="micromodal__secondary-btn copy-snippet-btn" style="margin-bottom: 14px;">copy</button>
 
     ${extraContent ? `
-      <div class="p-3 border-2 border-[#989742] bg-[#1E1E11] text-sm text-[#FBF7B7] max-w-[420px]">
+      <div class="snippet-warning">
         ${extraContent}
       </div>
     ` : ''}
@@ -131,7 +126,7 @@ export function snippet(title, content, options = {}) {
   </div>`;
 
   themodal.closeHtml = CLOSE_BUTTON_SVG;
-  themodal.yes = CONFIRM_BUTTON_SVG;
+  themodal.yes = '';
 
   const promise = new Promise((resolve) => {
     // Local copy function

package/{ui → src/ui}/theModal.js

@@ -429,6 +429,7 @@ const modalCss = `<style class="micromodal-css">
   align-items: center;
   width: 100%;
   height: 39px;
+  line-height: 0;
   border: 3px solid;
   border-top-color: #94BA6F;
   border-left-color: #94BA6F;
@@ -449,6 +450,66 @@ const modalCss = `<style class="micromodal-css">
   border-right-color: #94BA6F;
 }
 
+.micromodal button.micromodal__secondary-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 39px;
+  line-height: 0;
+  border: 3px solid;
+  border-top-color: #474C65;
+  border-left-color: #474C65;
+  border-bottom-color: #131725;
+  border-right-color: #131725;
+  background-color: #1D1F2F;
+  color: #E5E7EB;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.micromodal button.micromodal__secondary-btn:focus,
+.micromodal button.micromodal__secondary-btn:hover {
+  background-color: #232639;
+}
+
+.micromodal button.micromodal__secondary-btn:active {
+  border-top-color: #131725;
+  border-left-color: #131725;
+  border-bottom-color: #474C65;
+  border-right-color: #474C65;
+}
+
+.micromodal:has(.snippet-code-block) .micromodal__content {
+  margin-bottom: 0;
+}
+
+.micromodal .snippet-code-block {
+  background-color: #292E54;
+  padding: 1rem;
+  margin-bottom: 14px;
+  max-width: 420px;
+  overflow-x: auto;
+}
+
+.micromodal .snippet-code-block pre {
+  color: white;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.micromodal .snippet-warning {
+  padding: 0.75rem;
+  border: 2px solid #989742;
+  background-color: #1E1E11;
+  font-size: 0.875rem;
+  color: #FBF7B7;
+  max-width: 420px;
+}
+
 .micromodal button.micromodal__close {
   clip-path: polygon(0% 4%, 0% 0%, 100% 0%, 100% 100%, 94% 100%);
   position: absolute;
@@ -456,6 +517,46 @@ const modalCss = `<style class="micromodal-css">
   right: -1px;
   width: 68px;
 }
+
+.micromodal .micromodal__close-bg {
+  fill: #1D2032;
+}
+
+.micromodal .micromodal__close:hover .micromodal__close-bg {
+  fill: #212543;
+}
+
+.micromodal .micromodal__close-x {
+  fill: #fff;
+}
+
+.micromodal .micromodal__tell {
+  max-width: 440px;
+  margin-bottom: 28px;
+}
+
+.micromodal .micromodal__tell > * + * {
+  margin-top: 20px;
+}
+
+.micromodal .micromodal__tell-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.micromodal .micromodal__tell-content {
+  font-size: 16px;
+  font-weight: normal;
+}
+
+@media (min-width: 640px) {
+  .micromodal .micromodal__tell-title {
+    font-size: 22px;
+  }
+  .micromodal .micromodal__tell-content {
+    font-size: 18px;
+  }
+}
 </style>`;
 
 const modalHtml = `<div class="micromodal" id="micromodal" aria-hidden="true">

package/{ui → src/ui}/toast.js

@@ -1,10 +1,10 @@
 // a nice, simple alert
 // ❗️ don't use too much text!
 
-// Default modern icons
+// Default modern icons (normalized to 48x48 viewBox)
 const defaultIcons = {
-  success: `<svg viewBox="0 0 48 45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9404 22.4475L21.9099 29.724L35.1906 14.4045M3 3H44.9804V42.809H3V3Z" stroke="#33D131" stroke-width="4.3"/></svg>`,
-  error: `<svg viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.7383 12.4045L13 31.1429M31.7451 31.1429L13.0068 12.4046M2.00977 2H43.9902V41.809H2.00977V2Z" stroke="#FF4450" stroke-width="4"/></svg>`
+  success: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9404 23.9475L21.9099 31.224L35.1906 15.9045M3 4.5H44.9804V44.309H3V4.5Z" stroke="#33D131" stroke-width="4.3"/></svg>`,
+  error: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.7383 14.4045L14 33.1429M32.7451 33.1429L14.0068 14.4046M3.01 4H44.99V43.809H3.01V4Z" stroke="#FF4450" stroke-width="4"/></svg>`
 };
 
 // Hyperclay icons
@@ -100,6 +100,7 @@ const modernStyles = `
   }
 
   [data-toast-theme="modern"] .toast-icon svg {
+    display: block;
     width: 22px;
     height: 22px;
   }

package/core/adminContenteditable.js

@@ -1,36 +0,0 @@
-import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
-import onDomReady from "../dom-utilities/onDomReady.js";
-import {beforeSave} from "./savePage.js";
-
-export function disableContentEditableBeforeSave () {
-  beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-contenteditable]').forEach(resource => {
-      const originalValue = resource.getAttribute("contenteditable");
-      resource.setAttribute("inert-contenteditable", originalValue);
-      resource.removeAttribute("contenteditable");
-    });
-  });
-}
-
-export function enableContentEditableForAdminOnPageLoad () {
-  if (!isEditMode) return;
-
-  onDomReady(() => {
-    document.querySelectorAll('[edit-mode-contenteditable]').forEach(resource => {
-      let originalValue = resource.getAttribute("inert-contenteditable");
-
-      if (!["false", "plaintext-only"].includes(originalValue)) {
-        originalValue = "true";
-      }
-
-      resource.setAttribute("contenteditable", originalValue);
-      resource.removeAttribute("inert-contenteditable");
-    });
-  });
-}
-
-// Auto-initialize
-export function init() {
-  disableContentEditableBeforeSave();
-  enableContentEditableForAdminOnPageLoad();
-}

package/core/adminOnClick.js

@@ -1,31 +0,0 @@
-import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
-import onDomReady from "../dom-utilities/onDomReady.js";
-import {beforeSave} from "./savePage.js";
-
-export function disableOnClickBeforeSave () {
-  beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-onclick]').forEach(resource => {
-      const originalValue = resource.getAttribute("onclick");
-      resource.setAttribute("inert-onclick", originalValue);
-      resource.removeAttribute("onclick");
-    });
-  });
-}
-
-export function enableOnClickForAdminOnPageLoad () {
-  if (!isEditMode) return;
-
-  onDomReady(() => {
-    document.querySelectorAll('[edit-mode-onclick]').forEach(resource => {
-      const originalValue = resource.getAttribute("inert-onclick");
-      resource.setAttribute("onclick", originalValue);
-      resource.removeAttribute("inert-onclick");
-    });
-  });
-}
-
-// Auto-initialize
-export function init() {
-  disableOnClickBeforeSave();
-  enableOnClickForAdminOnPageLoad();
-}

package/custom-attributes/onpagemutation.js

@@ -1,20 +0,0 @@
-import Mutation from "../utilities/mutation.js";
-
-function init() {
-  const executePageMutation = async element => {
-    try {
-      const code = element.getAttribute('onpagemutation');
-      const asyncFn = new Function(`return (async function() { ${code} })`)();
-      await asyncFn.call(element);
-    } catch (error) {
-      console.error('Error in onpagemutation execution:', error);
-    }
-  };
-
-  Mutation.onAnyChange({
-    debounce: 200,
-    omitChangeDetails: true
-  }, () => document.querySelectorAll('[onpagemutation]').forEach(executePageMutation));
-}
-export { init };
-export default init;