hyperclayjs 1.7.0 → 1.9.0

package/{ui → src/ui}/theModal.js

@@ -429,6 +429,7 @@ const modalCss = `<style class="micromodal-css">
   align-items: center;
   width: 100%;
   height: 39px;
+  line-height: 0;
   border: 3px solid;
   border-top-color: #94BA6F;
   border-left-color: #94BA6F;
@@ -449,6 +450,66 @@ const modalCss = `<style class="micromodal-css">
   border-right-color: #94BA6F;
 }
 
+.micromodal button.micromodal__secondary-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 39px;
+  line-height: 0;
+  border: 3px solid;
+  border-top-color: #474C65;
+  border-left-color: #474C65;
+  border-bottom-color: #131725;
+  border-right-color: #131725;
+  background-color: #1D1F2F;
+  color: #E5E7EB;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.micromodal button.micromodal__secondary-btn:focus,
+.micromodal button.micromodal__secondary-btn:hover {
+  background-color: #232639;
+}
+
+.micromodal button.micromodal__secondary-btn:active {
+  border-top-color: #131725;
+  border-left-color: #131725;
+  border-bottom-color: #474C65;
+  border-right-color: #474C65;
+}
+
+.micromodal:has(.snippet-code-block) .micromodal__content {
+  margin-bottom: 0;
+}
+
+.micromodal .snippet-code-block {
+  background-color: #292E54;
+  padding: 1rem;
+  margin-bottom: 14px;
+  max-width: 420px;
+  overflow-x: auto;
+}
+
+.micromodal .snippet-code-block pre {
+  color: white;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.micromodal .snippet-warning {
+  padding: 0.75rem;
+  border: 2px solid #989742;
+  background-color: #1E1E11;
+  font-size: 0.875rem;
+  color: #FBF7B7;
+  max-width: 420px;
+}
+
 .micromodal button.micromodal__close {
   clip-path: polygon(0% 4%, 0% 0%, 100% 0%, 100% 100%, 94% 100%);
   position: absolute;
@@ -456,6 +517,46 @@ const modalCss = `<style class="micromodal-css">
   right: -1px;
   width: 68px;
 }
+
+.micromodal .micromodal__close-bg {
+  fill: #1D2032;
+}
+
+.micromodal .micromodal__close:hover .micromodal__close-bg {
+  fill: #212543;
+}
+
+.micromodal .micromodal__close-x {
+  fill: #fff;
+}
+
+.micromodal .micromodal__tell {
+  max-width: 440px;
+  margin-bottom: 28px;
+}
+
+.micromodal .micromodal__tell > * + * {
+  margin-top: 20px;
+}
+
+.micromodal .micromodal__tell-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.micromodal .micromodal__tell-content {
+  font-size: 16px;
+  font-weight: normal;
+}
+
+@media (min-width: 640px) {
+  .micromodal .micromodal__tell-title {
+    font-size: 22px;
+  }
+  .micromodal .micromodal__tell-content {
+    font-size: 18px;
+  }
+}
 </style>`;
 
 const modalHtml = `<div class="micromodal" id="micromodal" aria-hidden="true">
@@ -625,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/{ui → src/ui}/toast.js

@@ -1,10 +1,10 @@
 // a nice, simple alert
 // ❗️ don't use too much text!
 
-// Default modern icons
+// Default modern icons (normalized to 48x48 viewBox)
 const defaultIcons = {
-  success: `<svg viewBox="0 0 48 45" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9404 22.4475L21.9099 29.724L35.1906 14.4045M3 3H44.9804V42.809H3V3Z" stroke="#33D131" stroke-width="4.3"/></svg>`,
-  error: `<svg viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.7383 12.4045L13 31.1429M31.7451 31.1429L13.0068 12.4046M2.00977 2H43.9902V41.809H2.00977V2Z" stroke="#FF4450" stroke-width="4"/></svg>`
+  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>`
 };
 
 // Hyperclay icons
@@ -100,6 +100,7 @@ const modernStyles = `
   }
 
   [data-toast-theme="modern"] .toast-icon svg {
+    display: block;
     width: 22px;
     height: 22px;
   }

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/{vendor → 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;
 }
 

package/core/adminContenteditable.js

@@ -1,36 +0,0 @@
-import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
-import onDomReady from "../dom-utilities/onDomReady.js";
-import {beforeSave} from "./savePage.js";
-
-export function disableContentEditableBeforeSave () {
-  beforeSave(docElem => {
-    docElem.querySelectorAll('[edit-mode-contenteditable]').forEach(resource => {
-      const originalValue = resource.getAttribute("contenteditable");
-      resource.setAttribute("inert-contenteditable", originalValue);
-      resource.removeAttribute("contenteditable");
-    });
-  });
-}
-
-export function enableContentEditableForAdminOnPageLoad () {
-  if (!isEditMode) return;
-
-  onDomReady(() => {
-    document.querySelectorAll('[edit-mode-contenteditable]').forEach(resource => {
-      let originalValue = resource.getAttribute("inert-contenteditable");
-
-      if (!["false", "plaintext-only"].includes(originalValue)) {
-        originalValue = "true";
-      }
-
-      resource.setAttribute("contenteditable", originalValue);
-      resource.removeAttribute("inert-contenteditable");
-    });
-  });
-}
-
-// Auto-initialize
-export function init() {
-  disableContentEditableBeforeSave();
-  enableContentEditableForAdminOnPageLoad();
-}

package/core/adminOnClick.js

@@ -1,31 +0,0 @@
-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/enablePersistentFormInputValues.js

@@ -1,72 +0,0 @@
-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]");
-}
-
-// 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/savePageCore.js

@@ -1,245 +0,0 @@
-/**
- * Core save functionality for Hyperclay
- *
- * This is the minimal save system - just the basic save function you can call yourself.
- * No toast notifications, no auto-save, no keyboard shortcuts.
- *
- * Use this if you want full control over save behavior and notifications.
- * For the full save system with conveniences, use savePage.js instead.
- */
-
-import cookie from "../utilities/cookie.js";
-import { isEditMode } from "./isAdminOfCurrentResource.js";
-
-let beforeSaveCallbacks = [];
-let saveInProgress = false;
-const saveEndpoint = `/save/${cookie.get("currentResource")}`;
-
-/**
- * Register a callback to run before saving
- * Callbacks receive the cloned document element
- *
- * @param {Function} cb - Callback function(docElem)
- */
-export function beforeSave(cb) {
-  beforeSaveCallbacks.push(cb);
-}
-
-/**
- * Get the current page contents as HTML
- * Handles CodeMirror pages, runs [onbeforesave] attributes, removes [save-ignore] elements
- *
- * @returns {string} HTML string of current page
- */
-export function getPageContents() {
-  const isCodeMirrorPage = !!document.querySelector('.CodeMirror')?.CodeMirror;
-
-  if (!isCodeMirrorPage) {
-    let docElem = document.documentElement.cloneNode(true);
-
-    // Run onbeforesave callbacks
-    docElem.querySelectorAll('[onbeforesave]').forEach(el =>
-      new Function(el.getAttribute('onbeforesave')).call(el)
-    );
-
-    // Remove elements marked save-ignore
-    docElem.querySelectorAll('[save-ignore]').forEach(el =>
-      el.remove()
-    );
-
-    // Run registered beforeSave callbacks
-    beforeSaveCallbacks.forEach(cb => cb(docElem));
-
-    return "<!DOCTYPE html>" + docElem.outerHTML;
-  } else {
-    // For CodeMirror pages, get value from editor
-    return document.querySelector('.CodeMirror').CodeMirror.getValue();
-  }
-}
-
-/**
- * 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 (!isEditMode || saveInProgress) {
-    return;
-  }
-
-  const currentContents = getPageContents();
-  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 5 seconds
-  const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 5000);
-
-  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
- *   err will be null on success, Error object on failure
- *
- * @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); // Success: no error
-    }
-  })
-  .catch(err => {
-    console.error('Failed to save page:', err);
-    if (typeof callback === 'function') {
-      callback(err); // Pass error
-    }
-  })
-  .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);
-      }
-    });
-}
-
-// Auto-export to window unless suppressed by loader
-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;
-}

package/custom-attributes/onpagemutation.js

@@ -1,20 +0,0 @@
-import Mutation from "../utilities/mutation.js";
-
-function init() {
-  const executePageMutation = async element => {
-    try {
-      const code = element.getAttribute('onpagemutation');
-      const asyncFn = new Function(`return (async function() { ${code} })`)();
-      await asyncFn.call(element);
-    } catch (error) {
-      console.error('Error in onpagemutation execution:', error);
-    }
-  };
-
-  Mutation.onAnyChange({
-    debounce: 200,
-    omitChangeDetails: true
-  }, () => document.querySelectorAll('[onpagemutation]').forEach(executePageMutation));
-}
-export { init };
-export default init;

package/dom-utilities/insertStyleTag.js

@@ -1,38 +0,0 @@
-function insertStyleTag(href) {
-  // First check if there's already a link with this exact href
-  if (document.querySelector(`link[href="${href}"]`)) {
-    return;
-  }
-  
-  // Extract a more reliable identifier from the URL
-  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 link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = href;
-  document.head.appendChild(link);
-}
-
-// Auto-export to window unless suppressed by loader
-if (!window.__hyperclayNoAutoExport) {
-  window.insertStyleTag = insertStyleTag;
-  window.hyperclay = window.hyperclay || {};
-  window.hyperclay.insertStyleTag = insertStyleTag;
-  window.h = window.hyperclay;
-}
-
-export default insertStyleTag;