hyperclayjs 1.24.2 → 1.24.4

package/README.md

@@ -66,19 +66,19 @@ import 'hyperclayjs/presets/standard.js';
 | save-system | 13.4KB | CMD+S, [trigger-save] button, savestatus attribute |
 | save-toast | 0.9KB | Toast notifications for save events |
 | 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 |
 
 ### Custom Attributes (HTML enhancements)
 
 | Module | Size | Description |
 |--------|------|-------------|
-| ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
+| ajax-elements | 2.8KB | [ajax-form], [ajax-button] for async form submissions |
 | dom-helpers | 6.8KB | el.nearest, el.val, el.text, el.exec, el.cycle |
 | event-attrs | 5.3KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
 | input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
 | movable | 2.5KB | Free-positioning drag with [movable] and [movable-handle], edit mode only |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
+| refetch-on-save | 0.9KB | Flash-free refetch of href/src resources on save via [refetch-on-save] attribute |
 | save-freeze | 2.8KB | [save-freeze] attribute - freeze element innerHTML for saves, live DOM changes freely |
 | sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
 
@@ -123,7 +123,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | file-upload | 10.7KB | File upload with progress |
-| live-sync | 11.7KB | Real-time DOM sync across browsers |
+| live-sync | 11.6KB | Real-time DOM sync across browsers |
 | send-message | 1.3KB | Message sending utility |
 
 ### Vendor Libraries (Third-party libraries)
@@ -144,7 +144,7 @@ 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 (~225.2KB)
+### Everything (~224.9KB)
 All available features
 
 Includes all available modules across all categories.
@@ -342,16 +342,16 @@ myFeature();
 
 ### Before
 ```html
-<script src="/js/old-hyperclay.js"></script>
+<script src="/public/js/old-hyperclay.js"></script>
 ```
 
 ### After
 ```html
 <!-- Use preset -->
-<script src="/js/hyperclay.js?preset=standard" type="module"></script>
+<script src="/public/js/hyperclay.js?preset=standard" type="module"></script>
 
 <!-- Or specific features -->
-<script src="/js/hyperclay.js?features=save,edit-mode-helpers,toast" type="module"></script>
+<script src="/public/js/hyperclay.js?features=save,edit-mode-helpers,toast" type="module"></script>
 ```
 
 ## Contributing

package/package.json

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

package/src/communication/behaviorCollector.js

@@ -84,7 +84,7 @@ const behaviorCollector = (() => {
     const scrollEvent = {
       position: position,
       timestamp: now,
-      direction: position > data.navigation.lastScrollPosition ? 'down' : 'up',
+      direction: position === data.navigation.lastScrollPosition ? null : (position > data.navigation.lastScrollPosition ? 'down' : 'up'),
       isTrusted: e.isTrusted
     };
 
@@ -96,7 +96,7 @@ const behaviorCollector = (() => {
 
     if (data.scrollEvents.length > 1) {
       const lastEvent = data.scrollEvents[data.scrollEvents.length - 2];
-      if (lastEvent.direction !== scrollEvent.direction) {
+      if (lastEvent.direction && scrollEvent.direction && lastEvent.direction !== scrollEvent.direction) {
         data.navigation.scrollDirectionChanges++;
       }
     }

package/src/communication/live-sync.js

@@ -137,39 +137,28 @@ class LiveSync {
   }
 
   /**
-   * Auto-detect the current site identifier from the URL
-   * Returns site ID without .html extension
+   * Auto-detect the current site file path from the URL
+   * Returns the path including extension (e.g., card-canvas.html)
    *
    * Handles:
-   * - /                  -> index
-   * - /about             -> about
-   * - /about.html        -> about
-   * - /about/            -> about/index
-   * - /pages/contact     -> pages/contact
-   * - /pages/contact/    -> pages/contact/index
+   * - /                           -> index.html
+   * - /about.html                 -> about.html
+   * - /about.htmlclay             -> about.htmlclay
+   * - /about.html/dashboard       -> about.html  (SPA route stripped)
+   * - /blog/app.htmlclay/settings -> blog/app.htmlclay  (SPA route stripped)
    */
   detectCurrentFile() {
     let pathname = window.location.pathname;
 
-    // Root path
     if (pathname === '/') {
-      return 'index';
+      return 'index.html';
     }
 
-    // Remove leading slash
     pathname = pathname.replace(/^\//, '');
 
-    // Handle trailing slash -> directory index
-    if (pathname.endsWith('/')) {
-      return pathname + 'index';
-    }
-
-    // Remove .html extension if present
-    if (pathname.endsWith('.html')) {
-      return pathname.slice(0, -5);
-    }
+    const htmlMatch = pathname.match(/^(.*?\.html(?:clay)?)/);
+    if (htmlMatch) return htmlMatch[1];
 
-    // Already a site identifier
     return pathname;
   }
 
@@ -180,7 +169,8 @@ class LiveSync {
   connect() {
     if (this.isDestroyed) return;
 
-    const url = `/live-sync/stream?file=${encodeURIComponent(this.currentFile)}`;
+    const pageUrl = encodeURIComponent(window.location.href);
+    const url = `/live-sync/stream?page-url=${pageUrl}`;
     this.sse = new EventSource(url);
 
     this.sse.onopen = () => {
@@ -276,9 +266,8 @@ class LiveSync {
 
       fetch('/live-sync/save', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        headers: { 'Content-Type': 'application/json', 'Page-URL': window.location.href },
         body: JSON.stringify({
-          file: this.currentFile,
           html: html,
           sender: this.clientId
         })

package/src/core/adminContenteditable.js

@@ -2,7 +2,7 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
-const SELECTOR = '[editmode\\:contenteditable]';
+export const SELECTOR = '[editmode\\:contenteditable]';
 
 export function disableContentEditableBeforeSave () {
   beforeSave(docElem => {

package/src/core/adminInputs.js

@@ -2,8 +2,8 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import { beforeSave } from "./savePage.js";
 
-const SELECTOR_DISABLED = '[viewmode\\:disabled]';
-const SELECTOR_READONLY = '[viewmode\\:readonly]';
+export const SELECTOR_DISABLED = '[viewmode\\:disabled]';
+export const SELECTOR_READONLY = '[viewmode\\:readonly]';
 
 export function disableAdminInputsBeforeSave() {
   beforeSave(docElem => {

package/src/core/adminOnClick.js

@@ -2,7 +2,7 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
-const SELECTOR = '[editmode\\:onclick]';
+export const SELECTOR = '[editmode\\:onclick]';
 
 export function disableOnClickBeforeSave () {
   beforeSave(docElem => {

package/src/core/adminResources.js

@@ -2,8 +2,8 @@ import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
 import onDomReady from "../dom-utilities/onDomReady.js";
 import {beforeSave} from "./savePage.js";
 
-const SELECTOR = '[editmode\\:resource]:is(style, link, script)';
-const SELECTOR_INERT = '[editmode\\:resource]:is(style, link, script)[type^="inert/"]';
+export const SELECTOR = '[editmode\\:resource]:is(style, link, script)';
+export const SELECTOR_INERT = '[editmode\\:resource]:is(style, link, script)[type^="inert/"]';
 
 export function disableAdminResourcesBeforeSave () {
   beforeSave(docElem => {

package/src/core/adminSystem.js

@@ -4,7 +4,11 @@ import { init as initInputs } from './adminInputs.js';
 import { init as initOnClick } from './adminOnClick.js';
 import { init as initResources } from './adminResources.js';
 
+let initialized = false;
+
 function init() {
+  if (initialized) return;
+  initialized = true;
   initContenteditable();
   initInputs();
   initOnClick();

package/src/core/autosave.js

@@ -20,7 +20,7 @@ import { savePageThrottled } from "./savePage.js";
  */
 function initSavePageOnChange() {
   Mutation.onAnyChange({
-    debounce: 3333,
+    debounce: 1500,
     omitChangeDetails: true
   }, () => {
     savePageThrottled();
@@ -36,7 +36,7 @@ function initSaveOnPersistInput() {
   document.addEventListener('input', (e) => {
     if (!e.target.closest('[persist]')) return;
     clearTimeout(inputSaveTimer);
-    inputSaveTimer = setTimeout(savePageThrottled, 3333);
+    inputSaveTimer = setTimeout(savePageThrottled, 1500);
   }, true);
 }
 

package/src/core/savePageCore.js

@@ -7,7 +7,6 @@
  * For full save system with state management, use savePage.js instead.
  */
 
-import cookie from "../utilities/cookie.js";
 import { isEditMode } from "./isAdminOfCurrentResource.js";
 import {
   captureForSave,
@@ -24,7 +23,7 @@ import {
 // =============================================================================
 
 let saveInProgress = false;
-const saveEndpoint = `/save/${cookie.get("currentResource")}`;
+const saveEndpoint = '/save';
 
 /**
  * Check if a save is currently in progress.
@@ -119,12 +118,13 @@ export function savePage(callback = () => {}) {
   const fetchOptions = {
     method: 'POST',
     credentials: 'include',
-    signal: controller.signal
+    signal: controller.signal,
+    headers: { 'Page-URL': window.location.href }
   };
 
   if (isHyperclayLocal && window.__hyperclaySnapshotHtml) {
     // Send JSON with both stripped content and full snapshot for platform live sync
-    fetchOptions.headers = { 'Content-Type': 'application/json' };
+    fetchOptions.headers['Content-Type'] = 'application/json';
     fetchOptions.body = JSON.stringify({
       content: currentContents,
       snapshotHtml: window.__hyperclaySnapshotHtml
@@ -213,12 +213,13 @@ export function saveHtml(html, callback = () => {}) {
   const fetchOptions = {
     method: 'POST',
     credentials: 'include',
-    signal: controller.signal
+    signal: controller.signal,
+    headers: { 'Page-URL': window.location.href }
   };
 
   if (isHyperclayLocal && window.__hyperclaySnapshotHtml) {
     // Send JSON with both stripped content and full snapshot for platform live sync
-    fetchOptions.headers = { 'Content-Type': 'application/json' };
+    fetchOptions.headers['Content-Type'] = 'application/json';
     fetchOptions.body = JSON.stringify({
       content: html,
       snapshotHtml: window.__hyperclaySnapshotHtml

package/src/custom-attributes/ajaxElements.js

@@ -49,11 +49,13 @@ function submitAjax(elem) {
       },
       body: JSON.stringify(data)
     })
-      .then(res => res.json().then(resData => {
-        return { ...resData, ok: res.ok, msgType: res.ok ? "success" : "error" }
-      }))
-      .then((res) => {
-        handleResponse(elem, res);
+      .then(async (res) => {
+        const contentType = res.headers.get('content-type') || '';
+        let resData = {};
+        if (res.status !== 204 && contentType.includes('application/json')) {
+          resData = await res.json();
+        }
+        handleResponse(elem, { ...resData, ok: res.ok, msgType: res.ok ? "success" : "error" });
       })
       .catch(error => console.error('Error:', error));
   });

package/src/custom-attributes/refetchOnSave.js

@@ -0,0 +1,33 @@
+function swapElement(el) {
+  const attr = el.hasAttribute('href') ? 'href' : el.hasAttribute('src') ? 'src' : null;
+  if (!attr) return;
+
+  const oldValue = el.getAttribute(attr);
+  const url = new URL(oldValue, location.href);
+  url.searchParams.set('v', Date.now());
+  const isSameOrigin = url.origin === location.origin;
+
+  const newEl = document.createElement(el.tagName);
+  for (const { name, value } of el.attributes) {
+    newEl.setAttribute(name, value);
+  }
+  newEl.setAttribute(attr, isSameOrigin ? url.pathname + url.search : url.href);
+  newEl.setAttribute('save-ignore', '');
+
+  el.insertAdjacentElement('afterend', newEl);
+
+  newEl.onload = () => el.remove();
+  setTimeout(() => {
+    if (el.parentNode) el.remove();
+  }, 2000);
+}
+
+function init() {
+  document.addEventListener('hyperclay:save-saved', () => {
+    document.querySelectorAll('[refetch-on-save]').forEach(swapElement);
+  });
+}
+
+init();
+
+export default init;

package/src/dom-utilities/getDataFromForm.js

@@ -5,7 +5,7 @@ function getDataFromForm(container) {
   // Helper function to process a single element
   const processElement = (elem) => {
     const name = elem.getAttribute('name');
-    const value = elem.getAttribute('value') || elem.value;
+    const value = elem.value || elem.getAttribute('value');
     
     // Skip elements without a name or with a disabled attribute
     if (!name || elem.disabled) return;

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.24.2 - Minimal Browser-Native Loader
+ * HyperclayJS v1.24.4 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.
@@ -68,7 +68,7 @@ const MODULE_PATHS = {
   "send-message": "./communication/sendMessage.js",
   "file-upload": "./communication/uploadFile.js",
   "live-sync": "./communication/live-sync.js",
-  "tailwind-inject": "./core/tailwindInject.js",
+  "refetch-on-save": "./custom-attributes/refetchOnSave.js",
   "export-to-window": "./core/exportToWindow.js"
 };
 const PRESETS = {
@@ -145,6 +145,7 @@ const PRESETS = {
       "behavior-collector",
       "send-message",
       "file-upload",
+      "refetch-on-save",
       "export-to-window",
       "view-mode-excludes-edit-modules"
     ]
@@ -193,7 +194,7 @@ const PRESETS = {
       "send-message",
       "file-upload",
       "live-sync",
-      "tailwind-inject",
+      "refetch-on-save",
       "export-to-window",
       "view-mode-excludes-edit-modules"
     ]
@@ -216,7 +217,7 @@ const EDIT_MODE_ONLY = new Set([
   "hyper-morph",
   "file-upload",
   "live-sync",
-  "tailwind-inject"
+  "refetch-on-save"
 ]);
 
 // Parse URL (use import.meta.url for ES modules since document.currentScript is null)

package/src/utilities/cookie.js

@@ -1,9 +1,9 @@
-// e.g. Cookie.get("currentResource")
+// e.g. Cookie.get("isAdminOfCurrentResource")
 function get (cookieName) {
   const cookies = document.cookie.split('; ');
   const cookie = cookies.find(row => row.startsWith(`${cookieName}=`));
   if (!cookie) return null;
-  const cookieValue = cookie.split('=')[1];
+  const cookieValue = cookie.slice(cookieName.length + 1);
   try {
     return JSON.parse(decodeURIComponent(cookieValue));
   } catch (err) {
@@ -11,7 +11,7 @@ function get (cookieName) {
   }
 }
 
-// e.g. Cookie.remove("currentResource")
+// e.g. Cookie.remove("isAdminOfCurrentResource")
 function remove(name) {
   // Clear from current path
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;`

package/src/core/tailwindInject.js

@@ -1,56 +0,0 @@
-import { insertStyles } from '../dom-utilities/insertStyleTag.js';
-import cookie from '../utilities/cookie.js';
-
-function findTailwindLink(resourceName) {
-  const targetPath = `/tailwindcss/${resourceName}.css`;
-  return [...document.querySelectorAll('link[rel="stylesheet"]')]
-    .find(el => {
-      try {
-        const url = new URL(el.getAttribute('href'), location.href);
-        return url.pathname === targetPath;
-      } catch {
-        return false;
-      }
-    });
-}
-
-function swapTailwindLink() {
-  const currentResource = cookie.get('currentResource');
-  if (!currentResource) return;
-
-  const oldLink = findTailwindLink(currentResource);
-  if (!oldLink) return;
-
-  const newLink = document.createElement('link');
-  newLink.rel = 'stylesheet';
-  const url = new URL(oldLink.getAttribute('href'), location.href);
-  url.searchParams.set('v', Date.now());
-  newLink.href = url.href;
-  newLink.setAttribute('save-ignore', '');
-
-  oldLink.insertAdjacentElement('afterend', newLink);
-
-  newLink.onload = () => {
-    oldLink.remove();
-  };
-
-  setTimeout(() => {
-    if (oldLink.parentNode) {
-      oldLink.remove();
-    }
-  }, 2000);
-}
-
-function init() {
-  const currentResource = cookie.get('currentResource');
-  if (!currentResource) return;
-
-  const href = `/tailwindcss/${currentResource}.css`;
-  insertStyles(href, (link) => {
-    link.setAttribute('save-ignore', '');
-  });
-
-  document.addEventListener('hyperclay:save-saved', swapTailwindLink);
-}
-
-init();