hyperclayjs 1.18.0 → 1.19.0

package/README.md

@@ -65,7 +65,7 @@ import 'hyperclayjs/presets/standard.js';
 | save-core | 8.9KB | Basic save function only - hyperclay.savePage() |
 | save-system | 12.1KB | CMD+S, [trigger-save] button, savestatus attribute |
 | save-toast | 0.9KB | Toast notifications for save events |
-| snapshot | 10.6KB | Source of truth for page state - captures DOM snapshots for save and sync |
+| snapshot | 10.8KB | Source of truth for page state - captures DOM snapshots for save and sync |
 | tailwind-inject | 1.4KB | Injects tailwind CSS link with cache-bust on save |
 | unsaved-warning | 1.3KB | Warn before leaving page with unsaved changes |
 
@@ -85,8 +85,8 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 21KB | Full modal window creation system - window.theModal |
-| toast | 10.5KB | Success/error message notifications, toast(msg, msgType) |
+| the-modal | 21.1KB | Full modal window creation system - window.theModal |
+| toast | 10.7KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
@@ -132,17 +132,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~50.9KB)
+### Minimal (~51.3KB)
 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 (~73.2KB)
+### Standard (~73.6KB)
 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 (~206.9KB)
+### Everything (~207.4KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

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

package/src/core/snapshot.js

@@ -85,6 +85,14 @@ export function captureSnapshot() {
     hook(clone);
   }
 
+  for (const el of clone.querySelectorAll('[onbeforesnapshot]')) {
+    new Function(el.getAttribute('onbeforesnapshot')).call(el);
+  }
+
+  for (const el of clone.querySelectorAll('[snapshot-remove]')) {
+    el.remove();
+  }
+
   return clone;
 }
 

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.18.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.19.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.

package/src/ui/theModal.js

@@ -595,7 +595,7 @@ const themodal = (() => {
   const themodalMain = {
     isShowing: false,
     open() {
-      document.body.insertAdjacentHTML("afterbegin", "<div save-remove class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
+      document.body.insertAdjacentHTML("afterbegin", "<div save-remove snapshot-remove class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
 
       const modalOverlayElem = document.querySelector(".micromodal__overlay");
       const modalContentElem = document.querySelector(".micromodal__content");

package/src/ui/toast.js

@@ -5,7 +5,7 @@
 const defaultIcons = {
   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>`,
-  warning: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 8L4 40H44L24 8Z" stroke="#F5A623" stroke-width="4" stroke-linejoin="round"/><path d="M24 20V28M24 34V36" stroke="#F5A623" stroke-width="4" stroke-linecap="round"/></svg>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke="#F5A623" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>`,
   info: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="20" stroke="#4A90D9" stroke-width="4"/><path d="M24 20V32M24 14V16" stroke="#4A90D9" stroke-width="4" stroke-linecap="round"/></svg>`
 };
 
@@ -253,6 +253,7 @@ export function injectToastStyles(styles, theme) {
   const styleSheet = document.createElement('style');
   styleSheet.className = `toast-styles-${theme}`;
   styleSheet.setAttribute('save-remove', '');
+  styleSheet.setAttribute('snapshot-remove', '');
   styleSheet.textContent = styles;
   document.head.appendChild(styleSheet);
 
@@ -272,6 +273,7 @@ export function toastCore(message, messageType = "success", config = {}) {
     toastContainer.className = 'toast-container';
     toastContainer.setAttribute('data-toast-theme', theme);
     toastContainer.setAttribute('save-remove', '');
+    toastContainer.setAttribute('snapshot-remove', '');
     document.body.append(toastContainer);
   }