hyperclayjs 1.7.0 → 1.9.0

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}/autosave.js

@@ -2,18 +2,17 @@
  * Auto-save system for Hyperclay
  *
  * Automatically saves page on DOM changes with throttling.
- * Warns before leaving page with unsaved changes.
  *
  * Requires the 'save-system' module to be loaded first.
- * For toast notifications, also load the 'save-toast' module.
+ *
+ * Recommended companion modules:
+ *   - 'unsaved-warning' - Warn before leaving with unsaved changes (required for beforeunload)
+ *   - 'save-toast' - Show toast notifications on save events
  */
 
 import Mutation from "../utilities/mutation.js";
-import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
-import {
-  savePageThrottled,
-  getUnsavedChanges
-} from "./savePage.js";
+import { isEditMode } from "./isAdminOfCurrentResource.js";
+import { savePageThrottled } from "./savePage.js";
 
 /**
  * Initialize auto-save on DOM changes
@@ -28,16 +27,6 @@ function initSavePageOnChange() {
   });
 }
 
-/**
- * Warn before leaving page with unsaved changes
- */
-window.addEventListener('beforeunload', (event) => {
-  if (getUnsavedChanges() && isOwner) {
-    event.preventDefault();
-    event.returnValue = '';
-  }
-});
-
 function init() {
   if (!isEditMode) return;
   initSavePageOnChange();

package/src/core/enablePersistentFormInputValues.js

@@ -0,0 +1,67 @@
+import { onSnapshot } from './snapshot.js';
+
+// <input type="checkbox" persist>
+export default function enablePersistentFormInputValues(filterBySelector = "[persist]") {
+  const inputSelector = `input${filterBySelector}:not([type="password"]):not([type="hidden"]):not([type="file"])`;
+  const textareaSelector = `textarea${filterBySelector}`;
+  const selectSelector = `select${filterBySelector}`;
+
+  // Use onSnapshot so form values are synced for both save AND live-sync
+  onSnapshot((doc) => {
+    // Sync text inputs
+    const liveInputs = document.querySelectorAll(inputSelector);
+    const clonedInputs = doc.querySelectorAll(inputSelector);
+    clonedInputs.forEach((cloned, i) => {
+      const live = liveInputs[i];
+      if (live.type === 'checkbox' || live.type === 'radio') {
+        if (live.checked) {
+          cloned.setAttribute('checked', '');
+        } else {
+          cloned.removeAttribute('checked');
+        }
+      } else {
+        cloned.setAttribute('value', live.value);
+      }
+    });
+
+    // Sync textareas
+    const liveTextareas = document.querySelectorAll(textareaSelector);
+    const clonedTextareas = doc.querySelectorAll(textareaSelector);
+    clonedTextareas.forEach((cloned, i) => {
+      cloned.textContent = liveTextareas[i].value;
+    });
+
+    // Sync selects
+    const liveSelects = document.querySelectorAll(selectSelector);
+    const clonedSelects = doc.querySelectorAll(selectSelector);
+    clonedSelects.forEach((cloned, i) => {
+      const live = liveSelects[i];
+      const clonedOptions = cloned.querySelectorAll('option');
+      clonedOptions.forEach(opt => opt.removeAttribute('selected'));
+
+      if (live.multiple) {
+        Array.from(live.selectedOptions).forEach(opt => {
+          const idx = Array.from(live.options).indexOf(opt);
+          if (clonedOptions[idx]) clonedOptions[idx].setAttribute('selected', '');
+        });
+      } else if (live.selectedIndex >= 0 && clonedOptions[live.selectedIndex]) {
+        clonedOptions[live.selectedIndex].setAttribute('selected', '');
+      }
+    });
+  });
+}
+
+// Auto-initialize with default selector
+export function init() {
+  enablePersistentFormInputValues("[persist]");
+}
+
+// Auto-export to window unless suppressed by loader
+if (!window.__hyperclayNoAutoExport) {
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.enablePersistentFormInputValues = enablePersistentFormInputValues;
+  window.h = window.hyperclay;
+}
+
+// Auto-init when module is imported
+init();

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

@@ -31,16 +31,15 @@
  */
 
 import Mutation from "../utilities/mutation.js";
+import insertStyles from "../dom-utilities/insertStyleTag.js";
+
+const STYLE_NAME = 'option-visibility';
 
 const optionVisibility = {
   debug: false,
   _started: false,
-  _styleElement: null,
   _unsubscribe: null,
 
-  LAYER_NAME: 'option-visibility',
-  STYLE_CLASS: 'option-visibility-layer-styles',
-
   log(...args) {
     if (this.debug) console.log('[OptionVisibility:Layer]', ...args);
   },
@@ -104,7 +103,7 @@ const optionVisibility = {
       return `[option\\:${safeName}="${safeValue}"]{display:none!important}[${safeName}="${safeValue}"] [option\\:${safeName}="${safeValue}"]{display:revert-layer!important}`;
     }).join('');
 
-    return `@layer ${this.LAYER_NAME}{${rules}}`;
+    return `@layer ${STYLE_NAME}{${rules}}`;
   },
 
   /**
@@ -119,33 +118,8 @@ const optionVisibility = {
     try {
       const attributes = this.findOptionAttributes();
       const css = this.generateCSS(attributes);
-
-      // Remove style element if no attributes
-      if (!css) {
-        if (this._styleElement) {
-          this._styleElement.remove();
-          this._styleElement = null;
-          this.log('Removed empty style element');
-        }
-        return;
-      }
-
-      // Skip if unchanged
-      if (this._styleElement?.textContent === css) {
-        this.log('Styles unchanged');
-        return;
-      }
-
-      // Create or update
-      if (!this._styleElement) {
-        this._styleElement = document.createElement('style');
-        this._styleElement.className = this.STYLE_CLASS;
-        document.head.appendChild(this._styleElement);
-      }
-
-      this._styleElement.textContent = css;
+      insertStyles(STYLE_NAME, css);
       this.log(`Generated ${attributes.length} rules`);
-
     } catch (error) {
       console.error('[OptionVisibility:Layer] Error generating rules:', error);
     }
@@ -190,10 +164,8 @@ const optionVisibility = {
       this._unsubscribe = null;
     }
 
-    if (this._styleElement) {
-      this._styleElement.remove();
-      this._styleElement = null;
-    }
+    const style = document.querySelector(`style[data-name="${STYLE_NAME}"]`);
+    if (style) style.remove();
 
     this.log('Stopped');
   }

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/src/core/savePageCore.js

@@ -0,0 +1,256 @@
+/**
+ * savePageCore.js — Network save functionality
+ *
+ * This module handles sending page contents to the server.
+ * It uses snapshot.js for capturing the DOM state.
+ *
+ * For full save system with state management, use savePage.js instead.
+ */
+
+import cookie from "../utilities/cookie.js";
+import { isEditMode } from "./isAdminOfCurrentResource.js";
+import {
+  captureForSave,
+  isCodeMirrorPage,
+  getCodeMirrorContents,
+  beforeSave,
+  getPageContents,
+  onSnapshot,
+  onPrepareForSave
+} from "./snapshot.js";
+
+// =============================================================================
+// STATE
+// =============================================================================
+
+let saveInProgress = false;
+const saveEndpoint = `/save/${cookie.get("currentResource")}`;
+
+// =============================================================================
+// RE-EXPORTS FROM SNAPSHOT (for backwards compat)
+// =============================================================================
+
+export { beforeSave, getPageContents, onSnapshot, onPrepareForSave };
+
+// =============================================================================
+// INTERNAL: GET PAGE CONTENTS
+// =============================================================================
+
+/**
+ * Get the current page contents as HTML string for saving.
+ * Handles both normal pages and CodeMirror editor pages.
+ * Emits snapshot-ready event for live-sync (normal pages only).
+ *
+ * @returns {string} HTML string of current page
+ */
+function getContentsForSave() {
+  if (isCodeMirrorPage()) {
+    // CodeMirror pages don't emit snapshot-ready - no live-sync for code editors
+    return getCodeMirrorContents();
+  }
+  // Emit for live-sync when actually saving
+  return captureForSave({ emitForSync: true });
+}
+
+// =============================================================================
+// SAVE FUNCTIONS
+// =============================================================================
+
+/**
+ * Save the current page contents to the server.
+ *
+ * @param {Function} callback - Called with {msg, msgType} on completion
+ *   msgType will be 'success' or 'error'
+ *
+ * @example
+ * savePage(({msg, msgType}) => {
+ *   if (msgType === 'error') {
+ *     console.error('Save failed:', msg);
+ *   } else {
+ *     console.log('Saved:', msg);
+ *   }
+ * });
+ */
+export function savePage(callback = () => {}) {
+  if (saveInProgress) {
+    return;
+  }
+  if (!isEditMode && !window.hyperclay?.testMode) {
+    return;
+  }
+
+  let currentContents;
+  try {
+    currentContents = getContentsForSave();
+  } catch (err) {
+    console.error('savePage: getContentsForSave failed', err);
+    callback({ msg: err.message, msgType: "error" });
+    return;
+  }
+  saveInProgress = true;
+
+  // Test mode: skip network request, return mock success
+  if (window.hyperclay?.testMode) {
+    setTimeout(() => {
+      saveInProgress = false;
+      if (typeof callback === 'function') {
+        callback({ msg: "Test mode: save skipped", msgType: "success" });
+      }
+    }, 0);
+    return;
+  }
+
+  // Add timeout - abort if server doesn't respond within 12 seconds
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort('Save timeout'), 12000);
+
+  fetch(saveEndpoint, {
+    method: 'POST',
+    credentials: 'include',
+    body: currentContents,
+    signal: controller.signal
+  })
+    .then(res => {
+      clearTimeout(timeoutId);
+      return res.json().then(data => {
+        if (!res.ok) {
+          throw new Error(data.msg || data.error || `HTTP ${res.status}: ${res.statusText}`);
+        }
+        return data;
+      });
+    })
+    .then(data => {
+      if (typeof callback === 'function') {
+        callback({ msg: data.msg, msgType: data.msgType || 'success' });
+      }
+    })
+    .catch(err => {
+      clearTimeout(timeoutId);
+      console.error('Failed to save page:', err);
+
+      const msg = err.name === 'AbortError'
+        ? 'Server not responding'
+        : 'Save failed';
+
+      if (typeof callback === 'function') {
+        callback({ msg, msgType: "error" });
+      }
+    })
+    .finally(() => {
+      clearTimeout(timeoutId);
+      saveInProgress = false;
+    });
+}
+
+/**
+ * Save specific HTML content to the server.
+ *
+ * @param {string} html - HTML string to save
+ * @param {Function} callback - Called with (err, data) on completion
+ *
+ * @example
+ * saveHtml(myHtml, (err, data) => {
+ *   if (err) {
+ *     console.error('Save failed:', err);
+ *   } else {
+ *     console.log('Saved:', data);
+ *   }
+ * });
+ */
+export function saveHtml(html, callback = () => {}) {
+  if (!isEditMode || saveInProgress) {
+    return;
+  }
+
+  saveInProgress = true;
+
+  // Test mode: skip network request, return mock success
+  if (window.hyperclay?.testMode) {
+    setTimeout(() => {
+      saveInProgress = false;
+      if (typeof callback === 'function') {
+        callback(null, { msg: "Test mode: save skipped", msgType: "success" });
+      }
+    }, 0);
+    return;
+  }
+
+  fetch(saveEndpoint, {
+    method: 'POST',
+    credentials: 'include',
+    body: html
+  })
+    .then(res => {
+      return res.json().then(data => {
+        if (!res.ok) {
+          throw new Error(data.msg || data.error || `HTTP ${res.status}: ${res.statusText}`);
+        }
+        return data;
+      });
+    })
+    .then(data => {
+      if (typeof callback === 'function') {
+        callback(null, data);
+      }
+    })
+    .catch(err => {
+      console.error('Failed to save page:', err);
+      if (typeof callback === 'function') {
+        callback(err);
+      }
+    })
+    .finally(() => {
+      saveInProgress = false;
+    });
+}
+
+/**
+ * Fetch HTML from a URL and save it to replace the current page.
+ *
+ * @param {string} url - URL to fetch HTML from
+ * @param {Function} callback - Called with (err, data) on completion
+ *
+ * @example
+ * replacePageWith('/templates/blog.html', (err, data) => {
+ *   if (err) {
+ *     console.error('Failed:', err);
+ *   } else {
+ *     window.location.reload();
+ *   }
+ * });
+ */
+export function replacePageWith(url, callback = () => {}) {
+  if (!isEditMode || saveInProgress) {
+    return;
+  }
+
+  fetch(url)
+    .then(res => res.text())
+    .then(html => {
+      saveHtml(html, (err, data) => {
+        if (typeof callback === 'function') {
+          callback(err, data);
+        }
+      });
+    })
+    .catch(err => {
+      console.error('Failed to fetch template:', err);
+      if (typeof callback === 'function') {
+        callback(err);
+      }
+    });
+}
+
+// =============================================================================
+// WINDOW EXPORTS
+// =============================================================================
+
+if (!window.__hyperclayNoAutoExport) {
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.savePage = savePage;
+  window.hyperclay.saveHtml = saveHtml;
+  window.hyperclay.replacePageWith = replacePageWith;
+  window.hyperclay.beforeSave = beforeSave;
+  window.hyperclay.getPageContents = getPageContents;
+  window.h = window.hyperclay;
+}