hyperclayjs 1.0.0

package/core/adminInputs.js

@@ -0,0 +1,58 @@
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+import onDomReady from "../dom-utilities/onDomReady.js";
+import { beforeSave } from "./savePage.js";
+
+export function disableAdminInputsBeforeSave() {
+  beforeSave(docElem => {
+    docElem.querySelectorAll('[edit-mode-input]').forEach(input => {
+      if (supportsReadonly(input)) {
+        input.setAttribute('readonly', '');
+      } else {
+        input.setAttribute('disabled', '');
+      }
+    });
+  });
+}
+
+export function enableAdminInputsOnPageLoad() {
+  if (!isEditMode) return;
+
+  onDomReady(() => {
+    document.querySelectorAll('[edit-mode-input]').forEach(input => {
+      if (supportsReadonly(input)) {
+        input.removeAttribute('readonly');
+      } else {
+        input.removeAttribute('disabled');
+      }
+    });
+  });
+}
+
+// Input types that support the readonly attribute
+const readonlyTypes = ['text', 'search', 'url', 'tel', 'email', 'password', 'date', 'month', 'week', 'time', 'datetime-local', 'number'];
+
+function supportsReadonly(element) {
+  // Handle different element types
+  const tagName = element.tagName?.toUpperCase();
+
+  // TEXTAREA supports readonly
+  if (tagName === 'TEXTAREA') return true;
+
+  // SELECT, BUTTON, FIELDSET use disabled
+  if (tagName === 'SELECT' || tagName === 'BUTTON' || tagName === 'FIELDSET') return false;
+
+  // For INPUT elements, check the type
+  if (tagName === 'INPUT') {
+    const type = element.type || 'text';
+    return readonlyTypes.includes(type);
+  }
+
+  // Default to disabled for unknown elements
+  return false;
+}
+
+// Auto-initialize
+export function init() {
+  disableAdminInputsBeforeSave();
+  enableAdminInputsOnPageLoad();
+}

package/core/adminOnClick.js

@@ -0,0 +1,31 @@
+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();
+}

package/core/adminResources.js

@@ -0,0 +1,33 @@
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+import onDomReady from "../dom-utilities/onDomReady.js";
+import {beforeSave} from "./savePage.js";
+
+export function disableAdminResourcesBeforeSave () {
+  beforeSave(docElem => {
+    docElem.querySelectorAll('[edit-mode-resource]:is(style, link, script)').forEach(resource => {
+      const currentType = resource.getAttribute('type') || 'text/javascript';
+      // Only add the inert/ prefix if it's not already there
+      if (!currentType.startsWith('inert/')) {
+        resource.setAttribute('type', `inert/${currentType}`);
+      }
+    });
+  });
+}
+
+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, '');
+      resource.replaceWith(resource.cloneNode(true));
+    });
+  });
+}
+
+// Auto-initialize
+export function init() {
+  disableAdminResourcesBeforeSave();
+  enableAdminResourcesOnPageLoad();
+}

package/core/adminSystem.js

@@ -0,0 +1,15 @@
+// Admin system - combines all admin features
+import { init as initContenteditable } from './adminContenteditable.js';
+import { init as initInputs } from './adminInputs.js';
+import { init as initOnClick } from './adminOnClick.js';
+import { init as initResources } from './adminResources.js';
+
+function init() {
+  initContenteditable();
+  initInputs();
+  initOnClick();
+  initResources();
+}
+
+export { init };
+export default init;

package/core/editmode.js

@@ -0,0 +1,8 @@
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+
+export function toggleEditMode() {
+  const url = new URL(window.location.href);
+  const newMode = isEditMode ? "false" : "true";
+  url.searchParams.set('editmode', newMode);
+  window.location.href = url.toString();
+}

package/core/editmodeSystem.js

@@ -0,0 +1,18 @@
+// Edit mode system - combines editmode toggle with page type setting
+import { toggleEditMode } from './editmode.js';
+import { init as initPageType } from './setPageTypeOnDocumentElement.js';
+
+function init() {
+  initPageType();
+}
+
+function exportToWindow() {
+  if (!window.hyperclay) {
+    window.hyperclay = {};
+  }
+
+  window.hyperclay.toggleEditMode = toggleEditMode;
+}
+
+export { init, exportToWindow };
+export default { init, exportToWindow };

package/core/enablePersistentFormInputValues.js

@@ -0,0 +1,62 @@
+import { beforeSave } from './savePage.js';
+
+// <input type="checkbox" persist>
+export default function enablePersistentFormInputValues(filterBySelector = "[persist]") {
+  const selector = `input${filterBySelector}:not([type="password"]):not([type="hidden"]):not([type="file"]), textarea${filterBySelector}, select${filterBySelector}`;
+  
+  document.addEventListener('input', (event) => {
+    const elem = event.target;
+    if (elem.matches(selector) && !(elem.type === 'checkbox' || elem.type === 'radio')) {
+      if (elem.tagName.toLowerCase() === 'textarea') {
+        // Store in value attribute instead of textContent to preserve cursor position
+        elem.setAttribute('value', elem.value);
+      } else {
+        elem.setAttribute('value', elem.value);
+      }
+    }
+  });
+
+  document.addEventListener('change', (event) => {
+    const elem = event.target;
+    if (elem.matches(selector)) {
+      // Handle checkboxes and radios
+      if (elem.type === 'checkbox' || elem.type === 'radio') {
+        if (elem.checked) {
+          elem.setAttribute('checked', '');
+        } else {
+          elem.removeAttribute('checked');
+        }
+      }
+      // Handle select elements
+      else if (elem.tagName.toLowerCase() === 'select') {
+        // Remove selected from all options
+        const options = elem.querySelectorAll('option');
+        options.forEach(option => option.removeAttribute('selected'));
+
+        // Add selected to currently selected option(s)
+        if (elem.multiple) {
+          const selectedOptions = elem.selectedOptions;
+          Array.from(selectedOptions).forEach(option => {
+            option.setAttribute('selected', '');
+          });
+        } else if (elem.selectedIndex >= 0) {
+          options[elem.selectedIndex].setAttribute('selected', '');
+        }
+      }
+    }
+  });
+
+  // Before save, transfer value attribute to textContent for textareas
+  beforeSave((doc) => {
+    const textareas = doc.querySelectorAll('textarea[value]');
+    textareas.forEach(textarea => {
+      textarea.textContent = textarea.getAttribute('value');
+      textarea.removeAttribute('value');
+    });
+  });
+}
+
+// Auto-initialize with default selector
+export function init() {
+  enablePersistentFormInputValues("[persist]");
+}

package/core/isAdminOfCurrentResource.js

@@ -0,0 +1,13 @@
+import cookie from "../utilities/cookie.js";
+import query from "../string-utilities/query.js";
+
+const isEditMode = query.editmode 
+  ? query.editmode === "true" // takes precedence over cookie
+  : Boolean(cookie.get("isAdminOfCurrentResource"));
+
+const isOwner = Boolean(cookie.get("isAdminOfCurrentResource"));
+
+export {
+  isEditMode,
+  isOwner
+}

package/core/optionVisibilityRuleGenerator.js

@@ -0,0 +1,160 @@
+/**
+* 
+*  Automatically show/hide elements with "option" attributes based on ancestors' attributes.
+*  
+*  # Usage:
+*  optionVisibilityRuleGenerator.debug = true;
+*  optionVisibilityRuleGenerator.start();
+*  
+*  # HTML Example:
+*  <div editmode="true">                  <!-- Parent element with matching attribute -->
+*    <div option:editmode="true"></div>   <!-- This will be visible -->
+*    <div option:editmode="false"></div>  <!-- This will be hidden -->
+*  </div>
+*  
+*  Elements with `option:` attributes will be:
+*  - Visible if any ancestor has matching attribute
+*  - Hidden if no ancestor has matching attribute
+* 
+*/
+import Mutation from "../utilities/mutation.js";
+
+const optionVisibilityRuleGenerator = {
+  debug: false,
+  styleElement: null,
+
+  HIDDEN_STYLES: `
+    visibility: hidden;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  `,
+  VISIBLE_STYLES: `
+    visibility: visible;
+    pointer-events: auto;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  `,
+
+  STYLE_CLASS: 'option-visibility-styles',
+
+  log(message, ...args) {
+    if (this.debug) {
+      console.log(`[OptionVisibilityRuleGenerator] ${message}`, ...args);
+    }
+  },
+
+  findOptionAttributes() {
+    const html = document.documentElement.outerHTML;
+    const optionAttributes = new Set(); // Using Set for unique combinations
+    const optionRegex = /option:([^\s"']+)=["']([^"']+)["']/g; // regex: "option:" + (anything but space and quote) + equal + quote + (anything but quote) + quote
+    
+    let match;
+    while ((match = optionRegex.exec(html)) !== null) {
+      // Create a unique key for each name-value pair
+      const key = JSON.stringify({name: match[1], value: match[2]});
+      optionAttributes.add(key);
+    }
+    
+    // Convert back to objects
+    return Array.from(optionAttributes).map(key => JSON.parse(key));
+  },
+
+  minifyCSS(css) {
+    return css
+      .replace(/\s+/g, ' ')
+      .replace(/{\s+/g, '{')
+      .replace(/\s+}/g, '}')
+      .replace(/;\s+/g, ';')
+      .replace(/:\s+/g, ':')
+      .trim();
+  },
+
+  generateCSSRules(optionAttributes) {
+    const rules = [];
+    
+    optionAttributes.forEach(({name, value}) => {
+      const escapedValue = value.replace(/["\\]/g, '\\$&');
+      
+      rules.push(`
+        [option\\:${name}="${escapedValue}"] {
+          ${this.HIDDEN_STYLES}
+        }
+      `);
+      
+      rules.push(`
+        [${name}="${escapedValue}"] [option\\:${name}="${escapedValue}"] {
+          ${this.VISIBLE_STYLES}
+        }
+      `);
+    });
+    
+    return this.minifyCSS(rules.join('\n'));
+  },
+
+  generateRules() {
+   try {
+     this.log('Starting rule generation');
+     
+     const optionAttributes = this.findOptionAttributes();
+     this.log('Found option attributes:', optionAttributes);
+     
+     // Early return if no option attributes found
+     if (optionAttributes.length === 0) {
+       this.log('No option attributes found, skipping style creation');
+       return;
+     }
+     
+     const cssRules = this.generateCSSRules(optionAttributes);
+     this.log('Generated CSS rules:', cssRules);
+     
+     // Check if we already have these exact rules
+     const existingStyleElement = document.head.querySelector(`.${this.STYLE_CLASS}`);
+     if (existingStyleElement && existingStyleElement.textContent.trim() === cssRules) {
+       this.log('Rules unchanged, skipping update');
+       return;
+     }
+     
+     // Create new style element
+     const newStyleElement = document.createElement('style');
+     newStyleElement.className = this.STYLE_CLASS;
+     newStyleElement.textContent = cssRules;
+     document.head.appendChild(newStyleElement);
+     
+     // Remove all previous style elements
+     document.head
+       .querySelectorAll(`.${this.STYLE_CLASS}`)
+       .forEach(el => {
+         if (el !== newStyleElement) {
+           el.remove();
+         }
+       });
+     
+     this.styleElement = newStyleElement;
+     
+     this.log('Rule generation complete');
+   } catch (error) {
+     console.error('Error generating visibility rules:', error);
+   }
+  },
+
+  start() {
+    Mutation.onAnyChange({
+      selectorFilter: el => [...el.attributes].some(attr => attr.name.startsWith('option:')),
+      debounce: 200
+    }, () => {
+      this.generateRules();
+    });
+    this.generateRules();
+    this.log('Started observing DOM mutations');
+  },
+};
+
+export default optionVisibilityRuleGenerator;
+
+// Auto-initialize
+export function init() {
+  optionVisibilityRuleGenerator.start();
+}

package/core/savePage.js

@@ -0,0 +1,196 @@
+/**
+ * Full save system for Hyperclay
+ *
+ * This includes all the conveniences: change detection, toast notifications,
+ * auto-save, keyboard shortcuts, and more.
+ *
+ * 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,
+  getPageContents,
+  replacePageWith as replacePageWithCore
+} from "./savePageCore.js";
+
+// Re-export beforeSave from core for backward compatibility
+export { beforeSave } from "./savePageCore.js";
+
+let unsavedChanges = false;
+let lastSavedContents = '';
+let baselineContents = ''; // State after initial setup, used to prevent autosave from setup mutations
+
+// Initialize lastSavedContents on page load to match what's on disk
+// This prevents unnecessary save attempts when content hasn't changed
+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);
+  }
+});
+
+/**
+ * Save the current page with change detection and toast notifications
+ *
+ * @param {Function} callback - Optional callback for custom handling
+ */
+export function savePage(callback = () => {}) {
+  if (!isEditMode) {
+    return;
+  }
+
+  const currentContents = getPageContents();
+
+  // Track whether there are unsaved changes
+  unsavedChanges = (currentContents !== lastSavedContents);
+
+  // Skip if content hasn't changed
+  if (!unsavedChanges) {
+    return;
+  }
+
+  savePageCore(({msg, msgType}) => {
+    // Update tracking on success
+    if (msgType !== 'error') {
+      lastSavedContents = currentContents;
+      unsavedChanges = false;
+    }
+
+    // Call user callback if provided
+    if (typeof callback === 'function' && msg) {
+      callback({msg, msgType});
+    }
+  });
+}
+
+/**
+ * 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
+ *
+ * @param {string} url - URL to fetch from
+ */
+export function replacePageWith(url) {
+  if (!isEditMode) {
+    return;
+  }
+
+  replacePageWithCore(url, (err, data) => {
+    if (err) {
+      // Show error toast if save failed
+      toast(err.message || "Failed to save template", "error");
+    } else {
+      // Only reload if save was successful
+      window.location.reload();
+    }
+  });
+}
+
+/**
+ * Initialize keyboard shortcut for save (CMD/CTRL+S)
+ */
+export function initSaveKeyboardShortcut() {
+  document.addEventListener("keydown", function(event) {
+    let isMac = window.navigator.platform.match("Mac");
+    let metaKeyPressed = isMac ? event.metaKey : event.ctrlKey;
+    if (metaKeyPressed && event.keyCode == 83) {
+      event.preventDefault();
+      savePage(({msg, msgType} = {}) => {
+        if (msg) toast(msg, msgType);
+      });
+    }
+  });
+}
+
+/**
+ * Initialize save button handler
+ * Looks for elements with [trigger-save] attribute
+ */
+export function initHyperclaySaveButton() {
+  document.addEventListener("click", event => {
+    if (event.target.closest("[trigger-save]")) {
+      savePage(({msg, msgType} = {}) => {
+        if (msg) toast(msg, msgType);
+      });
+    }
+  });
+}
+
+/**
+ * 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
+ */
+export function init() {
+  if (!isEditMode) return;
+
+  initSaveKeyboardShortcut();
+  initHyperclaySaveButton();
+  initSavePageOnChange();
+}
+
+/**
+ * Export save functions to window.hyperclay
+ */
+export function exportToWindow() {
+  if (!window.hyperclay) {
+    window.hyperclay = {};
+  }
+
+  window.hyperclay.savePage = savePage;
+  window.hyperclay.replacePageWith = replacePageWith;
+}