@panphora/clayjs 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/clayjs",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "description": "clayjs: malleable HTML files. Save lifecycle for self-saving HTML.",
   "license": "MIT",
@@ -28,10 +28,23 @@
   },
   "scripts": {
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:conformance": "UPDATE_GOLDENS=0 web-test-runner",
+    "conformance:update": "UPDATE_GOLDENS=1 web-test-runner",
+    "prepublishOnly": "npm test && npm run test:conformance",
     "dev": "node tests/stub-server.mjs"
   },
   "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.1",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
+    "jest-environment-jsdom": "^29.7.0",
+    "playwright": "1.56.1"
+  },
+  "hyper": {
+    "kind": "lib",
+    "status": "active",
+    "url": "https://clayjs.com"
   }
 }

package/src/core/save.js

@@ -38,8 +38,9 @@ let savingTimeout = null;
  *
  * @param {string} state - One of: 'saving', 'saved', 'offline', 'error'
  * @param {string} msg - Optional message (e.g., error details)
+ * @param {string} msgType - Optional severity from the server (e.g., 'warning')
  */
-function setSaveState(state, msg = '') {
+function setSaveState(state, msg = '', msgType = '') {
   if (savingTimeout) {
     clearTimeout(savingTimeout);
     savingTimeout = null;
@@ -48,7 +49,7 @@ function setSaveState(state, msg = '') {
   document.documentElement.setAttribute('savestatus', state);
 
   const event = new CustomEvent(`clay:save-${state}`, {
-    detail: { msg, timestamp: Date.now() }
+    detail: { msg, msgType, timestamp: Date.now() }
   });
   document.dispatchEvent(event);
 }
@@ -187,7 +188,7 @@ export function savePage(callback = () => {}) {
         // SUCCESS - store stripped version for future comparisons
         lastSavedContents = forComparison;
         unsavedChanges = false;
-        setSaveState('saved', data?.msg || 'Saved');
+        setSaveState('saved', data?.msg || 'Saved', data?.msgType);
         logBaseline('updated after save', `${lastSavedContents.length} chars`);
       } else {
         // FAILED - determine if it's offline or server error
@@ -255,7 +256,7 @@ export function savePageForce(callback = () => {}) {
       if (!err) {
         lastSavedContents = forComparison;
         unsavedChanges = false;
-        setSaveState('saved', data?.msg || 'Saved');
+        setSaveState('saved', data?.msg || 'Saved', data?.msgType);
         logBaseline('updated after force save', `${lastSavedContents.length} chars`);
       } else {
         if (!navigator.onLine) {

package/src/core/snapshot.js

@@ -133,16 +133,18 @@ function prepareCloneForSave(clone) {
     new Function(el.getAttribute('onbeforesave')).call(el);
   }
 
-  // Remove elements that shouldn't be saved ([no-save] / legacy [save-remove])
-  for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
-    el.remove();
-  }
-
   // Run registered prepare hooks ([freeze]/[save-freeze] innerHTML restore lives here)
   for (const hook of prepareForSaveHooks) {
     hook(clone);
   }
 
+  // Strip [no-save] / legacy [save-remove] LAST (snapshot-algorithm step 7): a
+  // prepare hook (freeze restore) can re-inject [no-save] content into the clone,
+  // so the strip must run after the hooks or that content leaks to disk.
+  for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
+    el.remove();
+  }
+
   return "<!DOCTYPE html>" + clone.outerHTML;
 }
 
@@ -212,13 +214,14 @@ export function captureForSaveAndComparison({ emitForSync = true } = {}) {
   // Clone for comparison before stripping (cheaper than cloning live DOM)
   const compareClone = clonePreventingOnclone(clone);
 
-  // Save clone: strip [no-save]/[save-remove], then run hooks (freeze restore in hooks)
-  for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
-    el.remove();
-  }
+  // Save clone: run hooks (freeze restore lives here), THEN strip [no-save]/[save-remove]
+  // LAST (snapshot-algorithm step 7) so freeze-restored [no-save] content can't leak to disk.
   for (const hook of prepareForSaveHooks) {
     hook(clone);
   }
+  for (const el of clone.querySelectorAll(STRIP_FROM_SAVE)) {
+    el.remove();
+  }
   const forSave = "<!DOCTYPE html>" + clone.outerHTML;
 
   // Compare clone: strip every autosave-off region, then run hooks

package/src/sync/live-sync.js

@@ -47,6 +47,15 @@ class LiveSync {
     this.currentFile = null;
     this.lastHtml = null;
     this.clientId = this.generateClientId();
+
+    // Per-stream resume id for the htmlclay replay server's wire contract.
+    // Regenerated on every start() (see below) so an explicit stop/start is a
+    // brand-new stream that never inherits the old baseline. Native
+    // EventSource reuses the same URL — and thus this id — on its own
+    // automatic reconnect. Deliberately NOT the sender clientId, which is the
+    // durable per-tab identity used for echo suppression.
+    this.resumeId = null;
+
     this.debounceMs = 150;
     this.debounceTimer = null;
     this.isPaused = false;
@@ -133,6 +142,21 @@ class LiveSync {
     return id;
   }
 
+  /**
+   * Generate a fresh per-stream resume id (URL-safe, well under the 128-byte
+   * wire limit). Minted on every start(), never persisted: an explicit
+   * stop/start must not reuse the previous stream's baseline.
+   */
+  generateResumeId() {
+    try {
+      const bytes = new Uint8Array(16);
+      (globalThis.crypto || window.crypto).getRandomValues(bytes);
+      return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+    } catch (e) {
+      return Math.random().toString(36).slice(2) + Date.now().toString(36);
+    }
+  }
+
   /**
    * Start the LiveSync system
    * Can be called after stop() to restart with a new file
@@ -153,9 +177,11 @@ class LiveSync {
       return;
     }
 
-    // Reset state for new connection
+    // Reset state for new connection. Resetting lastSeenSeq is a new baseline,
+    // so mint a fresh resume id — this stream must not resume the previous one.
     this.lastHtml = null;
     this.lastSeenSeq = 0;
+    this.resumeId = this.generateResumeId();
 
     console.log(`[LiveSync] Starting for: ${this.currentFile} (lane=${this.lane})`);
     this.connect();
@@ -361,7 +387,7 @@ class LiveSync {
     if (this.isDestroyed) return;
 
     const pageUrl = encodeURIComponent(window.location.href);
-    const url = `/_/live-sync/stream?page-url=${pageUrl}&lane=${this.lane}`;
+    const url = `/_/live-sync/stream?page-url=${pageUrl}&lane=${this.lane}&resume-id=${this.resumeId}`;
     this.sse = new EventSource(url);
 
     this.sse.onopen = () => {
@@ -372,6 +398,26 @@ class LiveSync {
     this.sse.onmessage = (event) => {
       const data = JSON.parse(event.data);
 
+      // Staleness check + watermark advance run FIRST — before the notification
+      // and error branches — against the high-water mark of seqs we've seen
+      // (own echoes count too, see below). Notification frames now carry a seq,
+      // so a conservative-cursor replay after reconnect must not duplicate a
+      // toast or let a later stale data frame apply an older snapshot. `seq` is
+      // optional for back-compat with older servers that don't stamp it.
+      const { seq } = data;
+      if (typeof seq === 'number' && seq <= this.lastSeenSeq) {
+        this._log(`Dropping stale message: seq=${seq}, lastSeen=${this.lastSeenSeq}`);
+        return;
+      }
+
+      // Advance the watermark before the notification/sender branches so that
+      // our own save echoes count toward "seen". Without this, a later
+      // buffered/replayed message with a smaller seq could rewind us past our
+      // local edit.
+      if (typeof seq === 'number') {
+        this.lastSeenSeq = seq;
+      }
+
       // Handle notifications (show toast, don't morph)
       if (data.type === "notification") {
         this.handleNotification(data);
@@ -385,22 +431,7 @@ class LiveSync {
         return;
       }
 
-      const { html, sender, seq, identityMap } = data;
-
-      // Staleness check runs FIRST — compared against the high-water mark of
-      // seqs we've seen (own echoes count too, see below). `seq` is optional
-      // for back-compat with older server builds that don't stamp it.
-      if (typeof seq === 'number' && seq <= this.lastSeenSeq) {
-        this._log(`Dropping stale message: seq=${seq}, lastSeen=${this.lastSeenSeq}`);
-        return;
-      }
-
-      // Advance the watermark before the sender filter so that our own save
-      // echoes count toward "seen". Without this, a later buffered/replayed
-      // peer message with a smaller seq could rewind us past our local edit.
-      if (typeof seq === 'number') {
-        this.lastSeenSeq = seq;
-      }
+      const { html, sender, identityMap } = data;
 
       // Ignore own changes — already reflected in the DOM, nothing to morph
       if (sender === this.clientId) {

package/src/ui/index.js

@@ -30,7 +30,8 @@ else document.addEventListener("clay:mutation-ready", mirrorConsent, { once: tru
 
 // Automatic save feedback. clay:save-saving stays deliberately silent (a toast for
 // a sub-second transient is noise). Keep your own toast lib? The events are public.
-document.addEventListener("clay:save-saved", () => toast("Saved", "success"));
+document.addEventListener("clay:save-saved", (e) =>
+  toast(e.detail?.msg || "Saved", e.detail?.msgType === "warning" ? "warning" : "success"));
 document.addEventListener("clay:save-error", () => toastPersistent("Couldn't save", "error"));
 document.addEventListener("clay:save-offline", () => toastPersistent("Offline, not saved", "warning"));
 

package/src/ui/toast.js

@@ -280,11 +280,14 @@ export function toastCore(message, messageType = "success", config = {}) {
   const template = templates.toast[messageType] || templates.toast.success;
   const toastHtml = template
     .replace('{icon}', icon)
-    .replace('{message}', message);
+    .replace('{message}', '');
 
   const tempDiv = document.createElement('div');
   tempDiv.innerHTML = toastHtml.trim();
   const toastElement = tempDiv.firstElementChild;
+  // A message can carry a filename, and a filename is whatever whoever wrote the
+  // file chose. Assign it as text so markup in a name can never become markup here.
+  toastElement.querySelector('.toast-message, .message').textContent = message;
 
   // Add click handler
   toastElement.addEventListener('click', () => {
@@ -393,11 +396,14 @@ function toastPersistent(message, messageType = "warning") {
   const template = templates.toast[messageType] || templates.toast.warning;
   const toastHtml = template
     .replace('{icon}', icon)
-    .replace('{message}', message);
+    .replace('{message}', '');
 
   const tempDiv = document.createElement('div');
   tempDiv.innerHTML = toastHtml.trim();
   const toastElement = tempDiv.firstElementChild;
+  // A message can carry a filename, and a filename is whatever whoever wrote the
+  // file chose. Assign it as text so markup in a name can never become markup here.
+  toastElement.querySelector('.toast-message, .message').textContent = message;
   toastElement.classList.add('toast-persistent');
 
   // Add close button as sibling (not inside message)