hyperclayjs 1.17.0 → 1.19.0

package/README.md

@@ -62,10 +62,10 @@ import 'hyperclayjs/presets/standard.js';
 | edit-mode-helpers | 7.5KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
 | option-visibility | 7.8KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
 | persist | 2.4KB | Persist input/select/textarea values to the DOM with [persist] attribute |
-| save-core | 7.4KB | Basic save function only - hyperclay.savePage() |
+| save-core | 8.9KB | Basic save function only - hyperclay.savePage() |
 | save-system | 12.1KB | CMD+S, [trigger-save] button, savestatus attribute |
 | save-toast | 0.9KB | Toast notifications for save events |
-| snapshot | 10.2KB | Source of truth for page state - captures DOM snapshots for save and sync |
+| snapshot | 10.8KB | Source of truth for page state - captures DOM snapshots for save and sync |
 | tailwind-inject | 1.4KB | Injects tailwind CSS link with cache-bust on save |
 | unsaved-warning | 1.3KB | Warn before leaving page with unsaved changes |
 
@@ -85,8 +85,8 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | dialogs | 7.7KB | ask(), consent(), tell(), snippet() dialog functions |
-| the-modal | 21KB | Full modal window creation system - window.theModal |
-| toast | 8.3KB | Success/error message notifications, toast(msg, msgType) |
+| the-modal | 21.1KB | Full modal window creation system - window.theModal |
+| toast | 10.7KB | Success/error message notifications, toast(msg, msgType) |
 
 ### Utilities (Core utilities (often auto-included))
 
@@ -121,7 +121,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | file-upload | 10.7KB | File upload with progress |
-| live-sync | 10.4KB | Real-time DOM sync across browsers |
+| live-sync | 11.4KB | Real-time DOM sync across browsers |
 | send-message | 1.3KB | Message sending utility |
 
 ### Vendor Libraries (Third-party libraries)
@@ -132,17 +132,17 @@ import 'hyperclayjs/presets/standard.js';
 
 ## Presets
 
-### Minimal (~46.8KB)
+### Minimal (~51.3KB)
 Essential features for basic editing
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Standard (~69.1KB)
+### Standard (~73.6KB)
 Standard feature set for most use cases
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `unsaved-warning`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Everything (~201.8KB)
+### Everything (~207.4KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "description": "Modular JavaScript library for building interactive HTML applications with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",

package/src/communication/live-sync.js

@@ -52,6 +52,7 @@ class LiveSync {
     this.onDisconnect = null;
     this.onUpdate = null;
     this.onError = null;
+    this.onNotification = null;
   }
 
   _log(message, data = null) {
@@ -190,6 +191,12 @@ class LiveSync {
     this.sse.onmessage = (event) => {
       const data = JSON.parse(event.data);
 
+      // Handle notifications (show toast, don't morph)
+      if (data.type === "notification") {
+        this.handleNotification(data);
+        return;
+      }
+
       // Handle error events from server
       if (data.error) {
         console.error('[LiveSync] Server error:', data.error);
@@ -317,6 +324,32 @@ class LiveSync {
     this.isPaused = false;
   }
 
+  /**
+   * Handle a notification message from the server
+   * Shows a toast and emits an event for custom handling
+   * @param {Object} data - { msgType, msg, action? }
+   */
+  handleNotification({ msgType, msg, action }) {
+    this._log(`Notification received: ${msgType} - ${msg}`);
+
+    // Show toast if available
+    if (window.toast) {
+      window.toast(msg, msgType);
+    } else {
+      console.log(`[LiveSync] Notification: ${msg}`);
+    }
+
+    // Emit event for custom handling (e.g., reload button)
+    document.dispatchEvent(new CustomEvent('hyperclay:notification', {
+      detail: { msgType, msg, action }
+    }));
+
+    // Call notification callback if set
+    if (this.onNotification) {
+      this.onNotification({ msgType, msg, action });
+    }
+  }
+
   /**
    * Stop LiveSync and clean up resources
    * Can call start() again to restart

package/src/core/savePageCore.js

@@ -112,12 +112,31 @@ export function savePage(callback = () => {}) {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), 12000);
 
-  fetch(saveEndpoint, {
+  // Check if running on Hyperclay Local - send JSON with both versions for platform sync
+  const isHyperclayLocal = window.location.hostname === 'localhost' ||
+                           window.location.hostname === '127.0.0.1';
+
+  const fetchOptions = {
     method: 'POST',
     credentials: 'include',
-    body: currentContents,
     signal: controller.signal
-  })
+  };
+
+  if (isHyperclayLocal && window.__hyperclaySnapshotHtml) {
+    // Send JSON with both stripped content and full snapshot for platform live sync
+    fetchOptions.headers = { 'Content-Type': 'application/json' };
+    fetchOptions.body = JSON.stringify({
+      content: currentContents,
+      snapshotHtml: window.__hyperclaySnapshotHtml
+    });
+    // Clear after use to avoid stale data
+    window.__hyperclaySnapshotHtml = null;
+  } else {
+    // Platform: send plain text as before
+    fetchOptions.body = currentContents;
+  }
+
+  fetch(saveEndpoint, fetchOptions)
     .then(res => {
       clearTimeout(timeoutId);
       return res.json().then(data => {
@@ -187,12 +206,31 @@ export function saveHtml(html, callback = () => {}) {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), 12000);
 
-  fetch(saveEndpoint, {
+  // Check if running on Hyperclay Local - send JSON with both versions for platform sync
+  const isHyperclayLocal = window.location.hostname === 'localhost' ||
+                           window.location.hostname === '127.0.0.1';
+
+  const fetchOptions = {
     method: 'POST',
     credentials: 'include',
-    body: html,
     signal: controller.signal
-  })
+  };
+
+  if (isHyperclayLocal && window.__hyperclaySnapshotHtml) {
+    // Send JSON with both stripped content and full snapshot for platform live sync
+    fetchOptions.headers = { 'Content-Type': 'application/json' };
+    fetchOptions.body = JSON.stringify({
+      content: html,
+      snapshotHtml: window.__hyperclaySnapshotHtml
+    });
+    // Clear after use to avoid stale data
+    window.__hyperclaySnapshotHtml = null;
+  } else {
+    // Platform: send plain text as before
+    fetchOptions.body = html;
+  }
+
+  fetch(saveEndpoint, fetchOptions)
     .then(res => {
       clearTimeout(timeoutId);
       return res.json().then(data => {

package/src/core/snapshot.js

@@ -85,6 +85,14 @@ export function captureSnapshot() {
     hook(clone);
   }
 
+  for (const el of clone.querySelectorAll('[onbeforesnapshot]')) {
+    new Function(el.getAttribute('onbeforesnapshot')).call(el);
+  }
+
+  for (const el of clone.querySelectorAll('[snapshot-remove]')) {
+    el.remove();
+  }
+
   return clone;
 }
 
@@ -172,6 +180,14 @@ export function captureForSaveAndComparison({ emitForSync = true } = {}) {
     document.dispatchEvent(new CustomEvent('hyperclay:snapshot-ready', {
       detail: { documentElement: clone }
     }));
+
+    // Store snapshot HTML for Hyperclay Local platform sync
+    // This allows the save system to send both stripped and full versions
+    const isHyperclayLocal = window.location.hostname === 'localhost' ||
+                             window.location.hostname === '127.0.0.1';
+    if (isHyperclayLocal) {
+      window.__hyperclaySnapshotHtml = '<!DOCTYPE html>' + clone.outerHTML;
+    }
   }
 
   // Run inline [onbeforesave] handlers

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.17.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.19.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.

package/src/ui/theModal.js

@@ -595,7 +595,7 @@ const themodal = (() => {
   const themodalMain = {
     isShowing: false,
     open() {
-      document.body.insertAdjacentHTML("afterbegin", "<div save-remove class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
+      document.body.insertAdjacentHTML("afterbegin", "<div save-remove snapshot-remove class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
 
       const modalOverlayElem = document.querySelector(".micromodal__overlay");
       const modalContentElem = document.querySelector(".micromodal__content");

package/src/ui/toast.js

@@ -4,13 +4,17 @@
 // Default modern icons (normalized to 48x48 viewBox)
 const defaultIcons = {
   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>`
+  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>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke="#F5A623" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>`,
+  info: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="20" stroke="#4A90D9" stroke-width="4"/><path d="M24 20V32M24 14V16" stroke="#4A90D9" stroke-width="4" stroke-linecap="round"/></svg>`
 };
 
 // Hyperclay icons
 export const hyperclayIcons = {
   success: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 1h-5v3.5h-2.5V8h-2v3.5H20V15h-2.5v3.5h-2V22H13v3.5H9V22H7v-3.5H6V15H1v3.5h1V22h2v3.5h1.5V29H7v3.5h5V29h3.5v-3.5H18V22h2.5v-3.5h2V15H25v-3.5h2.5V8h2V4.5H32V1Z" fill="#76C824"/></svg>`,
-  error: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M33 1h-5v3.5h-3.5V8H21v3.5h-3.5V15h-2v-3.5H12V8H8.5V4.5H5V1H0v3.5h3.5V8H7v3.5h3.5V15H14v3.5h-3.5V22H7v3.5H3.5V29H0v3.5h5V29h3.5v-3.5H12V22h3.5v-3.5h2V22H21v3.5h3.5V29H28v3.5h5V29h-3.5v-3.5H26V22h-3.5v-3.5H19V15h3.5v-3.5H26V8h3.5V4.5H33V1Z" fill="#DD304F"/></svg>`
+  error: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M33 1h-5v3.5h-3.5V8H21v3.5h-3.5V15h-2v-3.5H12V8H8.5V4.5H5V1H0v3.5h3.5V8H7v3.5h3.5V15H14v3.5h-3.5V22H7v3.5H3.5V29H0v3.5h5V29h3.5v-3.5H12V22h3.5v-3.5h2V22H21v3.5h3.5V29H28v3.5h5V29h-3.5v-3.5H26V22h-3.5v-3.5H19V15h3.5v-3.5H26V8h3.5V4.5H33V1Z" fill="#DD304F"/></svg>`,
+  warning: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 1h-3v3h-2v3h-2v3H9v3H7v3H5v3H3v3H1v6h31v-6h-2v-3h-2v-3h-2v-3h-2v-3h-2V7h-2V4h-2V1zm-2 8h1v10h-1V9zm0 13h1v2h-1v-2z" fill="#F5A623"/></svg>`,
+  info: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1v3H9v3H6v3H3v6h3v3h3v3h3v3h9v-3h3v-3h3v-3h3v-6h-3V7h-3V4h-3V1H12zm4 7h1v2h-1V8zm0 5h1v9h-1v-9z" fill="#4A90D9"/></svg>`
 };
 
 // Default templates
@@ -27,6 +31,18 @@ const defaultTemplates = {
         <div class="toast-icon">{icon}</div>
         <div class="toast-message">{message}</div>
       </div>
+    `,
+    warning: `
+      <div class="toast hide warning noise-texture">
+        <div class="toast-icon">{icon}</div>
+        <div class="toast-message">{message}</div>
+      </div>
+    `,
+    info: `
+      <div class="toast hide info noise-texture">
+        <div class="toast-icon">{icon}</div>
+        <div class="toast-message">{message}</div>
+      </div>
     `
   }
 };
@@ -45,6 +61,18 @@ export const hyperclayTemplates = {
         {icon}
         <span class="message">{message}</span>
       </div>
+    `,
+    warning: `
+      <div class="toast hide warning">
+        {icon}
+        <span class="message">{message}</span>
+      </div>
+    `,
+    info: `
+      <div class="toast hide info">
+        {icon}
+        <span class="message">{message}</span>
+      </div>
     `
   }
 };
@@ -94,6 +122,16 @@ const modernStyles = `
     background: radial-gradient(85.86% 68.42% at 50% 68.42%, #240A13 0%, #481826 100%);
   }
 
+  [data-toast-theme="modern"] .toast.warning {
+    border-color: #B8860B;
+    background: radial-gradient(85.86% 68.42% at 50% 68.42%, #2A2010 0%, #3D3018 100%);
+  }
+
+  [data-toast-theme="modern"] .toast.info {
+    border-color: #2E6B9E;
+    background: radial-gradient(85.86% 68.42% at 50% 68.42%, #0A1A24 0%, #162D3D 100%);
+  }
+
   [data-toast-theme="modern"] .toast-icon {
     position: relative;
     top: -1px;
@@ -180,6 +218,16 @@ export const hyperclayStyles = `
     color: #DD304F;
     border: 2px dashed #CD2140;
   }
+
+  [data-toast-theme="hyperclay"] .toast.warning {
+    color: #F5A623;
+    border: 2px dashed #D4900E;
+  }
+
+  [data-toast-theme="hyperclay"] .toast.info {
+    color: #4A90D9;
+    border: 2px dashed #3A7BBF;
+  }
 `;
 
 // Track which theme styles have been injected
@@ -205,6 +253,7 @@ export function injectToastStyles(styles, theme) {
   const styleSheet = document.createElement('style');
   styleSheet.className = `toast-styles-${theme}`;
   styleSheet.setAttribute('save-remove', '');
+  styleSheet.setAttribute('snapshot-remove', '');
   styleSheet.textContent = styles;
   document.head.appendChild(styleSheet);
 
@@ -224,6 +273,7 @@ export function toastCore(message, messageType = "success", config = {}) {
     toastContainer.className = 'toast-container';
     toastContainer.setAttribute('data-toast-theme', theme);
     toastContainer.setAttribute('save-remove', '');
+    toastContainer.setAttribute('snapshot-remove', '');
     document.body.append(toastContainer);
   }