hyperclayjs 1.1.2 → 1.3.0

package/README.md

@@ -52,89 +52,87 @@ import 'hyperclayjs/presets/standard.js';
 
 | Module | Size | Description |
 |--------|------|-------------|
-| Admin Features | 5.3KB | Hides admin inputs, scripts, contenteditable, onclick for regular viewers |
-| Edit Mode | 1.4KB | Toggle edit mode on/off |
-| Form Persistence | 2.2KB | Persist form values to the DOM with [persist] attribute |
-| Option Visibility | 4.4KB | Dynamic show/hide based on page state with option:attribute="value" |
-| Save Core | 5.9KB | Basic save function only - hyperclay.savePage() |
-| Save System | 4.9KB | Full save: save button, keyboard shortcut, auto-save, change tracking |
+| admin | 5.4KB | Hides admin inputs, scripts, contenteditable, onclick for regular viewers |
+| autosave | 2.4KB | Auto-save on DOM changes, unsaved changes warning |
+| edit-mode | 1.7KB | Toggle edit mode on/off |
+| option-visibility | 4.7KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
+| persist | 2.4KB | Persist form values to the DOM with [persist] attribute |
+| save-core | 5.8KB | Basic save function only - hyperclay.savePage() |
+| save-system | 4.1KB | Manual save: keyboard shortcut (CMD+S), save button, change tracking |
 
 ### Custom Attributes (HTML enhancements)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| AJAX Elements | 2.7KB | [ajax-form], [ajax-button] for async form submissions |
-| DOM Helpers | 5.4KB | el.nearest, el.val, el.text, el.exec, el.cycle |
-| Event Attributes | 3.5KB | [onclickaway], [onclone], [onpagemutation], [onrender] |
-| Input Helpers | 1.2KB | [prevent-enter], [autosize] for textareas |
-| Sortable | 117.9KB | Drag-drop sorting with [sortable] - includes Sortable.js vendor library |
+| ajax-elements | 2.8KB | [ajax-form], [ajax-button] for async form submissions |
+| dom-helpers | 5.6KB | el.nearest, el.val, el.text, el.exec, el.cycle |
+| event-attrs | 3.6KB | [onclickaway], [onclone], [onpagemutation], [onrender] |
+| input-helpers | 1.2KB | [prevent-enter], [autosize] for textareas |
+| sortable | 118.1KB | Drag-drop sorting with [sortable] - includes Sortable.js vendor library |
 
 ### UI Components (User interface elements)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| Dialog Functions | 7.7KB | ask(), consent(), tell(), snippet() functions |
-| Info Dialog | 3.2KB | Info dialog component |
-| Modal System | 18.4KB | Full modal window creation system - window.theModal |
-| Tailwind Play | 362.3KB | Live Tailwind CSS editing - updates styles based on classes in your HTML |
-| Toast Notifications | 7.3KB | Success/error message notifications - toast(msg, msgType) |
+| dialogs | 11.2KB | ask(), consent(), tell(), info(), snippet() functions |
+| modal | 18.5KB | Full modal window creation system - window.theModal |
+| tailwind-play | 362.3KB | Live Tailwind CSS editing - no need for a build system |
+| toast | 7.3KB | Success/error message notifications - toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
 | Module | Size | Description |
 |--------|------|-------------|
-| Cookie Helper | 1.3KB | Cookie management (often auto-included) |
-| Debounce | 0.2KB | Function debouncing |
-| Mutation Observer | 12.8KB | DOM mutation observation (often auto-included) |
-| Nearest Element | 3.2KB | Find nearest elements (often auto-included) |
-| Throttle | 0.6KB | Function throttling |
+| cookie | 1.3KB | Cookie management (often auto-included) |
+| debounce | 0.4KB | Function debouncing |
+| mutation | 12.9KB | DOM mutation observation (often auto-included) |
+| nearest | 3.3KB | Find nearest elements (often auto-included) |
+| throttle | 0.7KB | Function throttling |
 
 ### DOM Utilities (DOM manipulation helpers)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| All.js (jQuery-like) | 13.9KB | Full DOM manipulation library |
-| DOM Ready | 0.2KB | DOM ready callback |
-| Get Data From Form | 1.7KB | Extract form data as an object |
-| Style Injection | 0.8KB | Dynamic stylesheet injection |
-| Window Load | 0.2KB | Window load callback |
+| all-js | 13.9KB | Full DOM manipulation library |
+| dom-ready | 0.3KB | DOM ready callback |
+| form-data | 1.9KB | Extract form data as an object |
+| style-injection | 1KB | Dynamic stylesheet injection |
 
 ### String Utilities (String manipulation helpers)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| Copy to Clipboard | 0.9KB | Clipboard utility |
-| Emmet HTML | 1.4KB | Emmet-like HTML generation |
-| Slugify | 0.7KB | URL-friendly slug generator |
-| URL Query Parser | 0.1KB | Parse URL search params |
+| clipboard | 0.8KB | Clipboard utility |
+| emmet | 1.5KB | Emmet-like HTML generation |
+| query-params | 0.2KB | Parse URL search params |
+| slugify | 0.6KB | URL-friendly slug generator |
 
 ### Communication & Files (File handling and messaging)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| Behavior Collector | 5.2KB | Tracks user interactions (mouse, scroll, keyboard) |
-| File Upload to App Owner | 10.4KB | File upload with progress |
-| Send Message to App Owner | 1.2KB | Message sending utility |
+| file-upload | 10.6KB | File upload with progress |
+| send-message | 1.3KB | Message sending utility |
 
 ### Vendor Libraries (Third-party libraries)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| DOM Morphing | 7.9KB | Efficient DOM updates |
+| idiomorph | 8.1KB | Efficient DOM morphing library |
 
 ## Presets
 
-### Minimal (~23.4KB)
+### Minimal (~22.6KB)
 Essential features for basic editing
 
-**Modules:** `save-core`, `save`, `admin`, `toast`
+**Modules:** `save-core`, `save-system`, `admin`, `toast`
 
-### Standard (~37.2KB)
+### Standard (~38.9KB)
 Standard feature set for most use cases
 
-**Modules:** `save-core`, `save`, `admin`, `persist`, `ajax`, `events`, `helpers`, `toast`
+**Modules:** `save-core`, `save-system`, `admin`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`
 
-### Everything (~616.4KB)
+### Everything (~629.5KB)
 All available features
 
 Includes all available modules across all categories.
@@ -214,12 +212,12 @@ The configurator dynamically loads this file to always show accurate information
 
 ## Browser Support
 
-- Chrome 90+
-- Firefox 88+
-- Safari 14+
-- Edge 90+
+- Chrome 89+
+- Firefox 89+
+- Safari 15.4+
+- Edge 89+
 
-All features use modern JavaScript (ES2020+). For older browser support, use a transpiler.
+The loader uses top-level await, which means any `<script type="module">` placed after it will automatically wait for HyperclayJS to finish loading. No ready events or promises needed.
 
 ## API Examples
 
@@ -229,9 +227,6 @@ All features use modern JavaScript (ES2020+). For older browser support, use a t
 // Manually save the page
 hyperclay.savePage();
 
-// Initialize auto-save
-hyperclay.initSavePageOnChange();
-
 // Add save button
 hyperclay.initHyperclaySaveButton(); // Looks for [trigger-save]
 
@@ -308,18 +303,8 @@ export default function myFeature() {
   // Feature implementation
 }
 
-// Export initialization function
-export function init() {
-  if (typeof window !== 'undefined') {
-    // Auto-initialize on import
-    myFeature();
-  }
-}
-
-// Auto-run if needed
-if (typeof window !== 'undefined') {
-  init();
-}
+// Auto-init when module is imported
+myFeature();
 ```
 
 ## Migration from Monolithic Script

package/communication/behaviorCollector.js

@@ -222,9 +222,16 @@ const behaviorCollector = (() => {
   };
 })();
 
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.behaviorCollector = behaviorCollector;
+
 export default behaviorCollector;
 
 // Auto-initialize - start collecting behavior data
 export function init() {
   behaviorCollector.init();
-}
+}
+
+// Auto-init when module is imported
+init();

package/communication/sendMessage.js

@@ -2,7 +2,7 @@ import behaviorCollector from "./behaviorCollector.js";
 import getDataFromForm from "../dom-utilities/getDataFromForm.js";
 import toast from "../ui/toast.js";
 
-export default function sendMessage(eventOrObj, successMessage = "Successfully sent", callback) {
+function sendMessage(eventOrObj, successMessage = "Successfully sent", callback) {
   let form;
   let data;
   
@@ -45,4 +45,10 @@ export default function sendMessage(eventOrObj, successMessage = "Successfully s
       toast(`Failed to send message: ${error}`);
       throw error;
     });
-}
+}
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.sendMessage = sendMessage;
+
+export default sendMessage;

package/communication/uploadFile.js

@@ -322,7 +322,7 @@ function detectContentType(content) {
     // CSV pattern
     { type: "csv", mime: "text/csv", regex: /^[^,\n]+(,[^,\n]+)+/ },
     // Markdown pattern
-    { 
+    {
       type: "md",
       mime: "text/markdown",
       regex: /#\S+\s+\S+|```[\s\S]*```/
@@ -345,4 +345,10 @@ function detectContentType(content) {
 
   // Default to plain text
   return { type: "txt", mime: "text/plain", extension: ".txt" };
-}
+}
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.uploadFile = uploadFile;
+window.hyperclay.createFile = createFile;
+window.hyperclay.uploadFileBasic = uploadFileBasic;

package/core/adminSystem.js

@@ -11,5 +11,8 @@ function init() {
   initResources();
 }
 
+// Auto-init when module is imported
+init();
+
 export { init };
 export default init;

package/core/autosave.js

@@ -0,0 +1,95 @@
+/**
+ * Auto-save system for Hyperclay
+ *
+ * Automatically saves page on DOM changes with throttling.
+ * Warns before leaving page with unsaved changes.
+ *
+ * Requires the 'save' module to be loaded first.
+ */
+
+import toast from "../ui/toast.js";
+import throttle from "../utilities/throttle.js";
+import Mutation from "../utilities/mutation.js";
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+import { getPageContents } from "./savePageCore.js";
+import {
+  savePage,
+  getUnsavedChanges,
+  setUnsavedChanges,
+  getLastSavedContents
+} from "./savePage.js";
+
+let baselineContents = '';
+
+// Capture baseline after setup mutations settle
+document.addEventListener('DOMContentLoaded', () => {
+  if (isEditMode) {
+    setTimeout(() => {
+      baselineContents = getPageContents();
+    }, 1500);
+  }
+});
+
+/**
+ * Throttled version of savePage for auto-save
+ */
+const throttledSave = throttle(savePage, 1200);
+
+/**
+ * Save the page with throttling, for use with auto-save
+ * Checks both baseline and last saved content to prevent saves from initial setup
+ *
+ * @param {Function} callback - Optional callback
+ */
+export function savePageThrottled(callback = () => {}) {
+  if (!isEditMode) return;
+
+  const currentContents = getPageContents();
+  // For autosave: check both that content changed from baseline AND from last save
+  // This prevents saves from initial setup mutations
+  if (currentContents !== baselineContents && currentContents !== getLastSavedContents()) {
+    setUnsavedChanges(true);
+    throttledSave(callback);
+  }
+}
+
+/**
+ * Initialize auto-save on DOM changes
+ * Uses debounced mutation observer
+ */
+export function initSavePageOnChange() {
+  Mutation.onAnyChange({
+    debounce: 3333,
+    omitChangeDetails: true
+  }, () => {
+    savePageThrottled(({msg, msgType} = {}) => {
+      if (msg) toast(msg, msgType);
+    });
+  });
+}
+
+/**
+ * Warn before leaving page with unsaved changes
+ */
+window.addEventListener('beforeunload', (event) => {
+  if (getUnsavedChanges() && isOwner) {
+    event.preventDefault();
+    event.returnValue = '';
+  }
+});
+
+function init() {
+  if (!isEditMode) return;
+  initSavePageOnChange();
+}
+
+// Self-export to hyperclay
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.savePageThrottled = savePageThrottled;
+window.hyperclay.initSavePageOnChange = initSavePageOnChange;
+
+// Auto-init when module is imported
+init();
+
+export { init, savePageThrottled, initSavePageOnChange };
+export default init;

package/core/editmodeSystem.js

@@ -1,18 +1,20 @@
 // Edit mode system - combines editmode toggle with page type setting
 import { toggleEditMode } from './editmode.js';
+import { isEditMode, isOwner } from './isAdminOfCurrentResource.js';
 import { init as initPageType } from './setPageTypeOnDocumentElement.js';
 
 function init() {
   initPageType();
 }
 
-function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.toggleEditMode = toggleEditMode;
+window.hyperclay.isEditMode = isEditMode;
+window.hyperclay.isOwner = isOwner;
 
-  window.hyperclay.toggleEditMode = toggleEditMode;
-}
+// Auto-init when module is imported
+init();
 
-export { init, exportToWindow };
-export default { init, exportToWindow };
+export { init, toggleEditMode, isEditMode, isOwner };
+export default { init, toggleEditMode, isEditMode, isOwner };

package/core/enablePersistentFormInputValues.js

@@ -59,4 +59,11 @@ export default function enablePersistentFormInputValues(filterBySelector = "[per
 // Auto-initialize with default selector
 export function init() {
   enablePersistentFormInputValues("[persist]");
-}
+}
+
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.enablePersistentFormInputValues = enablePersistentFormInputValues;
+
+// Auto-init when module is imported
+init();

package/core/optionVisibilityRuleGenerator.js

@@ -152,9 +152,17 @@ const optionVisibilityRuleGenerator = {
   },
 };
 
+// Self-export to window and hyperclay
+window.optionVisibilityRuleGenerator = optionVisibilityRuleGenerator;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.optionVisibilityRuleGenerator = optionVisibilityRuleGenerator;
+
 export default optionVisibilityRuleGenerator;
 
 // Auto-initialize
 export function init() {
   optionVisibilityRuleGenerator.start();
-}
+}
+
+// Auto-init when module is imported
+init();

package/core/savePage.js

@@ -1,15 +1,15 @@
 /**
- * Full save system for Hyperclay
+ * Save system for Hyperclay
  *
- * This includes all the conveniences: change detection, toast notifications,
- * auto-save, keyboard shortcuts, and more.
+ * Manual save with change detection, toast notifications,
+ * keyboard shortcuts, and save button support.
+ *
+ * For auto-save on DOM changes, also load the 'autosave' module.
  *
  * Built on top of savePageCore.js
  */
 
 import toast from "../ui/toast.js";
-import throttle from "../utilities/throttle.js";
-import Mutation from "../utilities/mutation.js";
 import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import {
   savePage as savePageCore,
@@ -20,9 +20,17 @@ import {
 // Re-export beforeSave from core for backward compatibility
 export { beforeSave } from "./savePageCore.js";
 
+// Re-export getPageContents for autosave module
+export { getPageContents } from "./savePageCore.js";
+
 let unsavedChanges = false;
 let lastSavedContents = '';
-let baselineContents = ''; // State after initial setup, used to prevent autosave from setup mutations
+
+// State accessors for autosave module
+export function getUnsavedChanges() { return unsavedChanges; }
+export function setUnsavedChanges(val) { unsavedChanges = val; }
+export function getLastSavedContents() { return lastSavedContents; }
+export function setLastSavedContents(val) { lastSavedContents = val; }
 
 // Initialize lastSavedContents on page load to match what's on disk
 // This prevents unnecessary save attempts when content hasn't changed
@@ -30,11 +38,6 @@ document.addEventListener('DOMContentLoaded', () => {
   if (isEditMode) {
     // Capture initial state immediately for comparison
     lastSavedContents = getPageContents();
-
-    // Also capture baseline after setup for autosave detection
-    setTimeout(() => {
-      baselineContents = getPageContents();
-    }, 1500);
   }
 });
 
@@ -72,29 +75,6 @@ export function savePage(callback = () => {}) {
   });
 }
 
-/**
- * Throttled version of savePage for auto-save
- */
-const throttledSave = throttle(savePage, 1200);
-
-/**
- * Save the page with throttling, for use with auto-save
- * Checks both baseline and last saved content to prevent saves from initial setup
- *
- * @param {Function} callback - Optional callback
- */
-export function savePageThrottled(callback = () => {}) {
-  if (!isEditMode) return;
-
-  const currentContents = getPageContents();
-  // For autosave: check both that content changed from baseline AND from last save
-  // This prevents saves from initial setup mutations
-  if (currentContents !== baselineContents && currentContents !== lastSavedContents) {
-    unsavedChanges = true;
-    throttledSave(callback);
-  }
-}
-
 /**
  * Fetch HTML from a URL and save it, then reload
  * Shows toast notifications
@@ -148,49 +128,26 @@ export function initHyperclaySaveButton() {
 }
 
 /**
- * Initialize auto-save on DOM changes
- * Uses debounced mutation observer
- */
-export function initSavePageOnChange() {
-  Mutation.onAnyChange({
-    debounce: 3333,
-    omitChangeDetails: true
-  }, () => {
-    savePageThrottled(({msg, msgType} = {}) => {
-      if (msg) toast(msg, msgType);
-    });
-  });
-}
-
-/**
- * Warn before leaving page with unsaved changes
- */
-window.addEventListener('beforeunload', (event) => {
-  if (unsavedChanges && isOwner) {
-    event.preventDefault();
-    event.returnValue = '';
-  }
-});
-
-/**
- * Initialize the full save system
+ * Initialize the save system (keyboard shortcut and save button)
+ * For auto-save, also load the 'autosave' module
  */
 export function init() {
   if (!isEditMode) return;
 
   initSaveKeyboardShortcut();
   initHyperclaySaveButton();
-  initSavePageOnChange();
 }
 
-/**
- * Export save functions to window.hyperclay
- */
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.savePage = savePage;
+window.hyperclay.beforeSave = beforeSave;
+window.hyperclay.replacePageWith = replacePageWith;
+window.hyperclay.initHyperclaySaveButton = initHyperclaySaveButton;
+window.hyperclay.initSaveKeyboardShortcut = initSaveKeyboardShortcut;
 
-  window.hyperclay.savePage = savePage;
-  window.hyperclay.replacePageWith = replacePageWith;
-}
+// Auto-init when module is imported
+init();
+
+export { savePage, replacePageWith, initSaveKeyboardShortcut, initHyperclaySaveButton, init };
+export default savePage;

package/core/savePageCore.js

@@ -220,17 +220,10 @@ export function replacePageWith(url, callback = () => {}) {
     });
 }
 
-/**
- * Export save functions to window.hyperclay
- */
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-
-  window.hyperclay.savePage = savePage;
-  window.hyperclay.saveHtml = saveHtml;
-  window.hyperclay.replacePageWith = replacePageWith;
-  window.hyperclay.beforeSave = beforeSave;
-  window.hyperclay.getPageContents = getPageContents;
-}
+// Self-export to hyperclay only
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.savePage = savePage;
+window.hyperclay.saveHtml = saveHtml;
+window.hyperclay.replacePageWith = replacePageWith;
+window.hyperclay.beforeSave = beforeSave;
+window.hyperclay.getPageContents = getPageContents;

package/custom-attributes/ajaxElements.js

@@ -90,5 +90,9 @@ function init () {
   document.addEventListener('submit', handleFormSubmit);
   document.addEventListener('click', handleButtonClick);
 }
+
+// Auto-init when module is imported
+init();
+
 export { init };
 export default init;

package/custom-attributes/domHelpers.js

@@ -171,5 +171,14 @@ function init () {
   };
 
 }
+
+// Self-export to window and hyperclay
+window.initCustomAttributes = init;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.initCustomAttributes = init;
+
+// Auto-init when module is imported
+init();
+
 export { init };
 export default init;

package/custom-attributes/events.js

@@ -11,5 +11,8 @@ function init() {
   initOnrender();
 }
 
+// Auto-init when module is imported
+init();
+
 export { init };
 export default init;

package/custom-attributes/inputHelpers.js

@@ -7,5 +7,8 @@ function init() {
   initAutosize();
 }
 
+// Auto-init when module is imported
+init();
+
 export { init };
 export default init;

package/custom-attributes/sortable.js

@@ -72,5 +72,13 @@ function init () {
   // ❌ onElementAdded(newElem => makeSortable(newElem.closest('[sortable]')))
 }
 
-export { init };
+// Self-export to window and hyperclay
+window.Sortable = Sortable;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.Sortable = Sortable;
+
+// Auto-init when module is imported
+init();
+
+export { init, Sortable };
 export default init;

package/dom-utilities/All.js

@@ -403,12 +403,9 @@ const All = new Proxy(function (selectorOrElements, contextSelector) {
 // Install default plugins
 All.use(defaultPlugins);
 
-// Export to window for global access
-export function exportToWindow() {
-  if (!window.hyperclay) {
-    window.hyperclay = {};
-  }
-  window.hyperclay.All = All;
-}
+// Self-export to window and hyperclay
+window.All = All;
+window.hyperclay = window.hyperclay || {};
+window.hyperclay.All = All;
 
 export default All;