hyperclayjs 1.8.0 → 1.10.0

package/src/dom-utilities/insertStyleTag.js

@@ -1,38 +1,61 @@
-function insertStyleTag(href) {
-  // First check if there's already a link with this exact href
-  if (document.querySelector(`link[href="${href}"]`)) {
-    return;
+/**
+ * Insert styles into the document (inline CSS or external stylesheet).
+ *
+ * With a persistent DOM (i.e. hyperclay), we need a way to update styles.
+ * This function always inserts the new styles first, then removes any
+ * duplicates. This ensures:
+ *   - No flickering: new styles are applied before old ones are removed
+ *   - Always upgrades: we default to the new styles/approach
+ */
+function insertStyles(nameOrHref, css) {
+  if (css !== undefined) {
+    // Inline style: insertStyles('my-styles', '.foo { ... }')
+    const name = nameOrHref;
+    const oldStyles = document.querySelectorAll(`style[data-name="${name}"]`);
+
+    const style = document.createElement('style');
+    style.dataset.name = name;
+    style.textContent = css;
+    document.head.appendChild(style);
+
+    oldStyles.forEach(el => el.remove());
+    return style;
   }
-  
-  // Extract a more reliable identifier from the URL
+
+  // External stylesheet: insertStyles('/path/to/file.css')
+  const href = nameOrHref;
+
   let identifier;
   try {
     const url = new URL(href, window.location.href);
-    // Get the filename from the path
     identifier = url.pathname.split('/').pop();
   } catch (e) {
-    // Fallback to using the href itself if URL parsing fails
     identifier = href;
   }
-  
-  // Look for any link that contains this identifier
-  if (identifier && document.querySelector(`link[href*="${identifier}"]`)) {
-    return;
-  }
-  
-  // If no duplicate found, add the stylesheet
+
+  const oldLinks = document.querySelectorAll(
+    `link[href="${href}"], link[href*="${identifier}"]`
+  );
+
   const link = document.createElement('link');
   link.rel = 'stylesheet';
   link.href = href;
   document.head.appendChild(link);
+
+  oldLinks.forEach(el => el.remove());
+  return link;
 }
 
 // Auto-export to window unless suppressed by loader
 if (!window.__hyperclayNoAutoExport) {
-  window.insertStyleTag = insertStyleTag;
+  window.insertStyles = insertStyles;
+  window.insertStyleTag = insertStyles; // backwards-compat alias
   window.hyperclay = window.hyperclay || {};
-  window.hyperclay.insertStyleTag = insertStyleTag;
+  window.hyperclay.insertStyles = insertStyles;
+  window.hyperclay.insertStyleTag = insertStyles; // backwards-compat alias
   window.h = window.hyperclay;
 }
 
-export default insertStyleTag;
+export { insertStyles };
+export { insertStyles as insertStyleTag };  // backwards-compat alias
+export default insertStyles;

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.8.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.10.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.
@@ -28,9 +28,11 @@ const MODULE_PATHS = {
   "save-core": "./core/savePageCore.js",
   "save-system": "./core/savePage.js",
   "autosave": "./core/autosave.js",
+  "unsaved-warning": "./core/unsavedWarning.js",
   "save-toast": "./core/saveToast.js",
   "edit-mode-helpers": "./core/adminSystem.js",
   "persist": "./core/enablePersistentFormInputValues.js",
+  "snapshot": "./core/snapshot.js",
   "option-visibility": "./core/optionVisibility.js",
   "edit-mode": "./core/editmodeSystem.js",
   "event-attrs": "./custom-attributes/events.js",
@@ -48,6 +50,7 @@ const MODULE_PATHS = {
   "cookie": "./utilities/cookie.js",
   "throttle": "./utilities/throttle.js",
   "debounce": "./utilities/debounce.js",
+  "cache-bust": "./utilities/cacheBust.js",
   "dom-ready": "./dom-utilities/onDomReady.js",
   "window-load": "./dom-utilities/onLoad.js",
   "all-js": "./dom-utilities/All.js",
@@ -60,6 +63,7 @@ const MODULE_PATHS = {
   "behavior-collector": "./communication/behaviorCollector.js",
   "send-message": "./communication/sendMessage.js",
   "file-upload": "./communication/uploadFile.js",
+  "live-sync": "./communication/live-sync.js",
   "export-to-window": "./core/exportToWindow.js"
 };
 const PRESETS = {
@@ -98,9 +102,11 @@ const PRESETS = {
       "save-core",
       "save-system",
       "autosave",
+      "unsaved-warning",
       "save-toast",
       "edit-mode-helpers",
       "persist",
+      "snapshot",
       "option-visibility",
       "edit-mode",
       "event-attrs",
@@ -118,6 +124,7 @@ const PRESETS = {
       "cookie",
       "throttle",
       "debounce",
+      "cache-bust",
       "dom-ready",
       "window-load",
       "all-js",
@@ -130,6 +137,7 @@ const PRESETS = {
       "behavior-collector",
       "send-message",
       "file-upload",
+      "live-sync",
       "export-to-window"
     ]
   }
@@ -205,6 +213,12 @@ export const savePage = window.hyperclayModules['save-core']?.savePage ?? window
 export const beforeSave = window.hyperclayModules['save-system']?.beforeSave ?? window.hyperclayModules['save-system']?.default;
 export const savePageThrottled = window.hyperclayModules['save-system']?.savePageThrottled ?? window.hyperclayModules['save-system']?.default;
 export const replacePageWith = window.hyperclayModules['save-system']?.replacePageWith ?? window.hyperclayModules['save-system']?.default;
+export const captureSnapshot = window.hyperclayModules['snapshot']?.captureSnapshot ?? window.hyperclayModules['snapshot']?.default;
+export const captureForSave = window.hyperclayModules['snapshot']?.captureForSave ?? window.hyperclayModules['snapshot']?.default;
+export const captureBodyForSync = window.hyperclayModules['snapshot']?.captureBodyForSync ?? window.hyperclayModules['snapshot']?.default;
+export const onSnapshot = window.hyperclayModules['snapshot']?.onSnapshot ?? window.hyperclayModules['snapshot']?.default;
+export const onPrepareForSave = window.hyperclayModules['snapshot']?.onPrepareForSave ?? window.hyperclayModules['snapshot']?.default;
+export const getPageContents = window.hyperclayModules['snapshot']?.getPageContents ?? window.hyperclayModules['snapshot']?.default;
 export const toggleEditMode = window.hyperclayModules['edit-mode']?.toggleEditMode ?? window.hyperclayModules['edit-mode']?.default;
 export const isEditMode = window.hyperclayModules['edit-mode']?.isEditMode ?? window.hyperclayModules['edit-mode']?.default;
 export const isOwner = window.hyperclayModules['edit-mode']?.isOwner ?? window.hyperclayModules['edit-mode']?.default;
@@ -220,9 +234,11 @@ export const nearest = window.hyperclayModules['nearest']?.nearest ?? window.hyp
 export const cookie = window.hyperclayModules['cookie']?.cookie ?? window.hyperclayModules['cookie']?.default;
 export const throttle = window.hyperclayModules['throttle']?.throttle ?? window.hyperclayModules['throttle']?.default;
 export const debounce = window.hyperclayModules['debounce']?.debounce ?? window.hyperclayModules['debounce']?.default;
+export const cacheBust = window.hyperclayModules['cache-bust']?.cacheBust ?? window.hyperclayModules['cache-bust']?.default;
 export const onDomReady = window.hyperclayModules['dom-ready']?.onDomReady ?? window.hyperclayModules['dom-ready']?.default;
 export const onLoad = window.hyperclayModules['window-load']?.onLoad ?? window.hyperclayModules['window-load']?.default;
 export const All = window.hyperclayModules['all-js']?.All ?? window.hyperclayModules['all-js']?.default;
+export const insertStyles = window.hyperclayModules['style-injection']?.insertStyles ?? window.hyperclayModules['style-injection']?.default;
 export const insertStyleTag = window.hyperclayModules['style-injection']?.insertStyleTag ?? window.hyperclayModules['style-injection']?.default;
 export const getDataFromForm = window.hyperclayModules['form-data']?.getDataFromForm ?? window.hyperclayModules['form-data']?.default;
 export const Idiomorph = window.hyperclayModules['idiomorph']?.Idiomorph ?? window.hyperclayModules['idiomorph']?.default;
@@ -234,3 +250,4 @@ export const sendMessage = window.hyperclayModules['send-message']?.sendMessage
 export const uploadFile = window.hyperclayModules['file-upload']?.uploadFile ?? window.hyperclayModules['file-upload']?.default;
 export const createFile = window.hyperclayModules['file-upload']?.createFile ?? window.hyperclayModules['file-upload']?.default;
 export const uploadFileBasic = window.hyperclayModules['file-upload']?.uploadFileBasic ?? window.hyperclayModules['file-upload']?.default;
+export const liveSync = window.hyperclayModules['live-sync']?.liveSync ?? window.hyperclayModules['live-sync']?.default;

package/src/module-dependency-graph.json

@@ -1,6 +1,7 @@
 {
   "rawDependencies": {
     "communication/behaviorCollector.js": [],
+    "communication/live-sync.js": [],
     "communication/sendMessage.js": [
       "communication/behaviorCollector.js",
       "dom-utilities/getDataFromForm.js",
@@ -51,7 +52,7 @@
       "core/setPageTypeOnDocumentElement.js"
     ],
     "core/enablePersistentFormInputValues.js": [
-      "core/savePage.js"
+      "core/snapshot.js"
     ],
     "core/exportToWindow.js": [],
     "core/isAdminOfCurrentResource.js": [
@@ -59,6 +60,7 @@
       "utilities/cookie.js"
     ],
     "core/optionVisibility.js": [
+      "dom-utilities/insertStyleTag.js",
       "utilities/mutation.js"
     ],
     "core/savePage.js": [
@@ -68,6 +70,7 @@
     ],
     "core/savePageCore.js": [
       "core/isAdminOfCurrentResource.js",
+      "core/snapshot.js",
       "utilities/cookie.js"
     ],
     "core/saveToast.js": [
@@ -79,6 +82,11 @@
       "core/savePage.js",
       "dom-utilities/onDomReady.js"
     ],
+    "core/snapshot.js": [],
+    "core/unsavedWarning.js": [
+      "core/isAdminOfCurrentResource.js",
+      "core/savePage.js"
+    ],
     "custom-attributes/ajaxElements.js": [
       "dom-utilities/getDataFromForm.js"
     ],
@@ -137,6 +145,7 @@
       "ui/toast.js"
     ],
     "ui/toast.js": [],
+    "utilities/cacheBust.js": [],
     "utilities/cookie.js": [],
     "utilities/debounce.js": [],
     "utilities/loadVendorScript.js": [],
@@ -151,7 +160,7 @@
     "save-core": {
       "name": "save-core",
       "category": "core",
-      "size": 6.5,
+      "size": 6.8,
       "files": [
         "core/savePageCore.js"
       ],
@@ -169,7 +178,7 @@
       "files": [
         "core/savePage.js"
       ],
-      "description": "Manual save: keyboard shortcut (CMD+S), save button, change tracking",
+      "description": "CMD+S, [trigger-save] button, savestatus attribute",
       "exports": {
         "beforeSave": [
           "hyperclay"
@@ -188,11 +197,21 @@
     "autosave": {
       "name": "autosave",
       "category": "core",
-      "size": 1.1,
+      "size": 0.9,
       "files": [
         "core/autosave.js"
       ],
-      "description": "Auto-save on DOM changes, unsaved changes warning",
+      "description": "Auto-save on DOM changes",
+      "exports": {}
+    },
+    "unsaved-warning": {
+      "name": "unsaved-warning",
+      "category": "core",
+      "size": 0.8,
+      "files": [
+        "core/unsavedWarning.js"
+      ],
+      "description": "Warn before leaving page with unsaved changes",
       "exports": {}
     },
     "save-toast": {
@@ -222,17 +241,49 @@
     "persist": {
       "name": "persist",
       "category": "core",
-      "size": 2.5,
+      "size": 2.4,
       "files": [
         "core/enablePersistentFormInputValues.js"
       ],
       "description": "Persist input/select/textarea values to the DOM with [persist] attribute",
       "exports": {}
     },
+    "snapshot": {
+      "name": "snapshot",
+      "category": "core",
+      "size": 7.5,
+      "files": [
+        "core/snapshot.js"
+      ],
+      "description": "Source of truth for page state - captures DOM snapshots for save and sync",
+      "exports": {
+        "captureSnapshot": [
+          "hyperclay"
+        ],
+        "captureForSave": [
+          "hyperclay"
+        ],
+        "captureBodyForSync": [
+          "hyperclay"
+        ],
+        "onSnapshot": [
+          "hyperclay"
+        ],
+        "onPrepareForSave": [
+          "hyperclay"
+        ],
+        "beforeSave": [
+          "hyperclay"
+        ],
+        "getPageContents": [
+          "hyperclay"
+        ]
+      }
+    },
     "option-visibility": {
       "name": "option-visibility",
       "category": "core",
-      "size": 5.9,
+      "size": 5.3,
       "files": [
         "core/optionVisibility.js"
       ],
@@ -278,7 +329,7 @@
     "ajax-elements": {
       "name": "ajax-elements",
       "category": "custom-attributes",
-      "size": 2.8,
+      "size": 2.6,
       "files": [
         "custom-attributes/ajaxElements.js"
       ],
@@ -320,7 +371,7 @@
     "onaftersave": {
       "name": "onaftersave",
       "category": "custom-attributes",
-      "size": 1.2,
+      "size": 1,
       "files": [
         "custom-attributes/onaftersave.js"
       ],
@@ -349,6 +400,7 @@
           "hyperclay"
         ],
         "snippet": [
+          "window",
           "hyperclay"
         ]
       }
@@ -471,6 +523,21 @@
         ]
       }
     },
+    "cache-bust": {
+      "name": "cache-bust",
+      "category": "utilities",
+      "size": 0.6,
+      "files": [
+        "utilities/cacheBust.js"
+      ],
+      "description": "Cache-bust href/src attributes",
+      "exports": {
+        "cacheBust": [
+          "window",
+          "hyperclay"
+        ]
+      }
+    },
     "dom-ready": {
       "name": "dom-ready",
       "category": "dom-utilities",
@@ -517,12 +584,16 @@
     "style-injection": {
       "name": "style-injection",
       "category": "dom-utilities",
-      "size": 1.1,
+      "size": 1.9,
       "files": [
         "dom-utilities/insertStyleTag.js"
       ],
       "description": "Dynamic stylesheet injection",
       "exports": {
+        "insertStyles": [
+          "window",
+          "hyperclay"
+        ],
         "insertStyleTag": [
           "window",
           "hyperclay"
@@ -547,7 +618,7 @@
     "idiomorph": {
       "name": "idiomorph",
       "category": "vendor",
-      "size": 8.2,
+      "size": 8.3,
       "files": [
         "vendor/idiomorph.min.js"
       ],
@@ -619,7 +690,7 @@
     "send-message": {
       "name": "send-message",
       "category": "communication",
-      "size": 1.4,
+      "size": 1.3,
       "files": [
         "communication/sendMessage.js"
       ],
@@ -650,6 +721,20 @@
         ]
       }
     },
+    "live-sync": {
+      "name": "live-sync",
+      "category": "communication",
+      "size": 12.7,
+      "files": [
+        "communication/live-sync.js"
+      ],
+      "description": "Real-time DOM sync across browsers",
+      "exports": {
+        "liveSync": [
+          "hyperclay"
+        ]
+      }
+    },
     "export-to-window": {
       "name": "export-to-window",
       "category": "core",
@@ -665,9 +750,11 @@
     "save-core": "./core/savePageCore.js",
     "save-system": "./core/savePage.js",
     "autosave": "./core/autosave.js",
+    "unsaved-warning": "./core/unsavedWarning.js",
     "save-toast": "./core/saveToast.js",
     "edit-mode-helpers": "./core/adminSystem.js",
     "persist": "./core/enablePersistentFormInputValues.js",
+    "snapshot": "./core/snapshot.js",
     "option-visibility": "./core/optionVisibility.js",
     "edit-mode": "./core/editmodeSystem.js",
     "event-attrs": "./custom-attributes/events.js",
@@ -685,6 +772,7 @@
     "cookie": "./utilities/cookie.js",
     "throttle": "./utilities/throttle.js",
     "debounce": "./utilities/debounce.js",
+    "cache-bust": "./utilities/cacheBust.js",
     "dom-ready": "./dom-utilities/onDomReady.js",
     "window-load": "./dom-utilities/onLoad.js",
     "all-js": "./dom-utilities/All.js",
@@ -697,6 +785,7 @@
     "behavior-collector": "./communication/behaviorCollector.js",
     "send-message": "./communication/sendMessage.js",
     "file-upload": "./communication/uploadFile.js",
+    "live-sync": "./communication/live-sync.js",
     "export-to-window": "./core/exportToWindow.js"
   },
   "categories": {
@@ -707,9 +796,11 @@
         "save-core",
         "save-system",
         "autosave",
+        "unsaved-warning",
         "save-toast",
         "edit-mode-helpers",
         "persist",
+        "snapshot",
         "option-visibility",
         "edit-mode"
       ]
@@ -743,7 +834,8 @@
         "nearest",
         "cookie",
         "throttle",
-        "debounce"
+        "debounce",
+        "cache-bust"
       ]
     },
     "dom-utilities": {
@@ -770,7 +862,8 @@
       "description": "File handling and messaging",
       "modules": [
         "send-message",
-        "file-upload"
+        "file-upload",
+        "live-sync"
       ]
     },
     "vendor": {
@@ -817,9 +910,11 @@
         "save-core",
         "save-system",
         "autosave",
+        "unsaved-warning",
         "save-toast",
         "edit-mode-helpers",
         "persist",
+        "snapshot",
         "option-visibility",
         "edit-mode",
         "event-attrs",
@@ -837,6 +932,7 @@
         "cookie",
         "throttle",
         "debounce",
+        "cache-bust",
         "dom-ready",
         "window-load",
         "all-js",
@@ -849,6 +945,7 @@
         "behavior-collector",
         "send-message",
         "file-upload",
+        "live-sync",
         "export-to-window"
       ]
     }

package/src/ui/theModal.js

@@ -726,6 +726,8 @@ const themodal = (() => {
 
       this.isShowing = true;
 
+      onOpen.forEach(cb => cb());
+
       if (!disableFocus) {
         let firstInput = modalOverlayElem.querySelector(".micromodal__content :is(input,textarea,button):not(.micromodal__hide), .micromodal__buttons :is(input,textarea,button):not(.micromodal__hide)");
         firstInput?.focus();

package/src/utilities/cacheBust.js

@@ -0,0 +1,19 @@
+// cacheBust.js
+// Cache-bust an element's href or src attribute by adding/updating a version query param
+
+function cacheBust(el) {
+  const attr = el.href !== undefined ? 'href' : 'src';
+  const url = new URL(el[attr], location.href);
+  url.searchParams.set('v', Date.now());
+  el[attr] = url.href;
+}
+
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.cacheBust = cacheBust;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.cacheBust = cacheBust;
+  window.h = window.hyperclay;
+}
+
+export default cacheBust;

package/src/vendor/idiomorph.min.js

@@ -12,6 +12,7 @@ if (!window.__hyperclayNoAutoExport) {
   window.hyperclay = window.hyperclay || {};
   window.hyperclay.Idiomorph = Idiomorph;
   window.hyperclay.morph = morph;
+  window.morph = morph;
   window.h = window.hyperclay;
 }