hyperclayjs 1.6.0 → 1.8.0

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.6.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>
  *
@@ -31,7 +31,7 @@ const MODULE_PATHS = {
   "save-toast": "./core/saveToast.js",
   "edit-mode-helpers": "./core/adminSystem.js",
   "persist": "./core/enablePersistentFormInputValues.js",
-  "option-visibility": "./core/optionVisibilityRuleGenerator.js",
+  "option-visibility": "./core/optionVisibility.js",
   "edit-mode": "./core/editmodeSystem.js",
   "event-attrs": "./custom-attributes/events.js",
   "ajax-elements": "./custom-attributes/ajaxElements.js",

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",
@@ -68,7 +58,7 @@
       "string-utilities/query.js",
       "utilities/cookie.js"
     ],
-    "core/optionVisibilityRuleGenerator.js": [
+    "core/optionVisibility.js": [
       "utilities/mutation.js"
     ],
     "core/savePage.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",
@@ -242,9 +232,9 @@
     "option-visibility": {
       "name": "option-visibility",
       "category": "core",
-      "size": 4.7,
+      "size": 5.9,
       "files": [
-        "core/optionVisibilityRuleGenerator.js"
+        "core/optionVisibility.js"
       ],
       "description": "Dynamic show/hide based on ancestor state with option:attribute=\"value\"",
       "exports": {}
@@ -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"
       ],
@@ -678,7 +668,7 @@
     "save-toast": "./core/saveToast.js",
     "edit-mode-helpers": "./core/adminSystem.js",
     "persist": "./core/enablePersistentFormInputValues.js",
-    "option-visibility": "./core/optionVisibilityRuleGenerator.js",
+    "option-visibility": "./core/optionVisibility.js",
     "edit-mode": "./core/editmodeSystem.js",
     "event-attrs": "./custom-attributes/events.js",
     "ajax-elements": "./custom-attributes/ajaxElements.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();
-}