@panphora/clayjs 1.13.1 → 1.15.0

package/src/server/rooms/recent.js

@@ -0,0 +1,18 @@
+// A function of one string that remembers its last few answers. A save hands the
+// same document to several readers in turn, and each would otherwise parse it again.
+export function recent(size, fn) {
+  const answers = new Map();
+  return (html) => {
+    if (typeof html !== 'string') return fn(html);
+    if (answers.has(html)) {
+      const answer = answers.get(html);
+      answers.delete(html);
+      answers.set(html, answer);
+      return answer;
+    }
+    const answer = fn(html);
+    answers.set(html, answer);
+    if (answers.size > size) answers.delete(answers.keys().next().value);
+    return answer;
+  };
+}

package/src/server/rooms/spec-wire.js

@@ -0,0 +1,17 @@
+import crypto from 'crypto';
+
+export function documentEtag (storedHtml) {
+  return crypto.createHash('sha256').update(storedHtml || '').digest('hex').substring(0, 16);
+}
+
+export function ifMatchSatisfied (fieldValue, storedBytes) {
+  const stored = storedBytes || '';
+  const field = String(fieldValue ?? '').trim();
+  if (field === '*') return stored.length > 0;
+
+  const current = documentEtag(stored);
+  return field.split(',').some(entry => {
+    const tag = entry.trim().replace(/^W\//i, '').replace(/^"(.*)"$/, '$1');
+    return tag !== '' && tag === current;
+  });
+}

package/src/standalone.js

@@ -35,6 +35,28 @@ import { noteBootParams } from "./core/draft-mode.js";
 
   if (!clay.ready) mintReady();
 
+  // clay.start runs app code once per page, after boot. A live-sync merge can
+  // re-insert an inline script and run it again; the repeat call is a no-op.
+  // It lives in the bootstrap so an inline script can call it before boot ends.
+  if (!clay.start) {
+    var started = Object.create(null);
+    clay.start = function (name, fn) {
+      if (typeof name === "function") { fn = name; name = ""; }
+      if (started[name]) return;
+      started[name] = true;
+      // A failed boot rejects the old promise after minting a new one, so a call
+      // made before the failure waits for the corrected tag's boot instead.
+      var wait = function () {
+        var ready = clay.ready;
+        return ready.then(fn, function (err) {
+          if (clay.ready === ready) throw err;
+          return wait();
+        });
+      };
+      return wait();
+    };
+  }
+
   // clay.js needs its own URL to find the loader; this file needs it only for the
   // query string, so pasted inline into the page it boots with the defaults.
   var script = document.currentScript;

package/src/sync/conflict-revert.js

@@ -4,6 +4,7 @@ import { protectionOf, protectionGeneration, captureFootprintWitnesses, footprin
 import { SYNC_IGNORE_SELECTOR, REMOTE_WINS_SELECTOR } from "./live-sync.js";
 import { savePage } from "../core/save.js";
 import { gateMarkDirty } from "../lib/dirty-gate.js";
+import { repaintDerived } from "../lib/derived.js";
 import Mutation from "../lib/mutation.js";
 import { markExplicitSave } from "../lib/user-gesture.js";
 import { enableContentEditable } from "../core/admin-contenteditable.js";
@@ -1136,6 +1137,7 @@ export async function revertConflicts(ids) {
   await Promise.resolve();
   const plan = prepareRevert(ids);
   const revertedIds = applyRevert(plan);
+  repaintDerived();
   let saveResult = null;
   if (revertedIds.length) {
     gateMarkDirty();

package/src/sync/conflicts.js

@@ -56,9 +56,9 @@ function install(apply, raw) {
   return id;
 }
 
-export function beginApply({ source, seq = null, etag = null, domain, root }) {
+export function beginApply({ source, seq = null, etag = null, domain, root, recoveryRoot = null }) {
   const id = nextId('a');
-  applies.set(id, { id, source, seq, etag, ticket: 0, domain, root, ids: new Set() });
+  applies.set(id, { id, source, seq, etag, ticket: 0, domain, root, recoveryRoot, ids: new Set() });
   pending.add(id);
   register().changed();
   return id;

package/src/sync/live-sync.js

@@ -62,6 +62,7 @@ import { SyncStream } from './stream.js';
 import { streamOpened, streamClosed, streamEvent, LIVE_EVENTS } from '../live/stream-bridge.js';
 import { conflicts, beginApply, completeApply, failApply } from './conflicts.js';
 import { beginLineageCapture } from './conflict-footprints.js';
+import { isDerivedAttr, ownsDerivedText, stripDerived, repaintDerived, paintSignatureOfHtml, derivedActive } from '../lib/derived.js';
 
 // What a live-sync merge never reads or touches on any side: editor chrome,
 // content kept out of the save or the snapshot, the contents of frozen regions,
@@ -78,11 +79,13 @@ const SYNC_IGNORE_SELECTOR = [
 // A frozen element is a scratchpad: the element is part of the document and
 // merges like any other, but its contents belong to this tab. Every merge input
 // has its frozen elements emptied, and hyper-morph's opaque option leaves the
-// live contents alone.
+// live contents alone. Painted output (lib/derived.js) is left out of every
+// input the same way, and the engine repaints it once the merge has applied.
 const FREEZE_SELECTOR = '[clay~="freeze"], [freeze], [save-freeze]';
 
 function emptyScratchpads(root) {
   for (const el of root.querySelectorAll(FREEZE_SELECTOR)) el.replaceChildren();
+  if (derivedActive()) stripDerived(root);
   return root;
 }
 
@@ -187,7 +190,7 @@ function pairedBaseline() {
   const { forComparison, forDirty } = captureForComparisonAndDirty({ flushUndo: false });
   return [forComparison, forDirty];
 }
-import { savePageThrottled, setLastSavedBaselines, setUnsavedChanges, getLastSavedBytes, conflictResolvedBySync, isSaveConflicted, baselineSettled } from '../core/save.js';
+import { savePageThrottled, setLastSavedBaselines, setUnsavedChanges, getLastSavedBytes, conflictResolvedBySync, isSaveConflicted, baselineSettled, schedulePaintHeal } from '../core/save.js';
 
 /**
  * The two live-sync wires, and the rule for choosing between them.
@@ -287,6 +290,9 @@ class LiveSync {
     // document, and hostMeta() memoizes the request itself.
     this._profile = null;
     this._profilePromise = null;
+    this._sharedData = false;
+    this._sharedSync = false;
+    this._liveData = false;
     this._editing = null;
     this._ready = null;
     // Bumped by every start(), so a discovery that resolves after a stop/restart
@@ -701,8 +707,13 @@ class LiveSync {
       this._profilePromise = hostMeta()
         .then((meta) => {
           const extensions = meta?.extensions || [];
-          this._sharedSync = extensions.includes('sync') && extensions.includes('sync-worker') && !extensions.includes('presence');
-          return extensions.includes('sync') ? WIRE_PROFILES.spec : WIRE_PROFILES.legacy;
+          const hasSync = extensions.includes('sync');
+          const hasLiveData = extensions.includes('live-data');
+          const hasPresence = extensions.includes('presence');
+          this._sharedData = hasSync && hasLiveData && extensions.includes('sync-worker-data') && !hasPresence;
+          this._sharedSync = hasSync && !hasPresence && (this._sharedData || (extensions.includes('sync-worker') && !hasLiveData));
+          this._liveData = hasLiveData;
+          return hasSync ? WIRE_PROFILES.spec : WIRE_PROFILES.legacy;
         })
         .catch(() => WIRE_PROFILES.legacy)
         .then((profile) => {
@@ -787,8 +798,11 @@ class LiveSync {
     // would otherwise point the sync stream at an origin the document chose.
     this.sse = new SyncStream(new URL(path, window.location.origin).href, {
       shared: this._sharedSync,
+      sharedData: this._sharedData,
       documentURL: window.location.href,
       lane: this.lane,
+      clientId: this.clientId,
+      keepAliveWhenHidden: this._liveData && this.lane === 'live',
       // Only a response that named its own version gives this tab anything to
       // compare against. On a host that served none there is no provenance to
       // check, and the page keeps its pre-1.9.0 startup behavior.
@@ -1691,9 +1705,9 @@ class LiveSync {
       live: document,
       remote,
       ignore: (el) => el.matches(SYNC_IGNORE_SELECTOR),
-      opaque: (el) => el.matches(FREEZE_SELECTOR),
+      opaque: (el) => el.matches(FREEZE_SELECTOR) || (derivedActive() && ownsDerivedText(el)),
       remoteWins: (el) => el.matches(REMOTE_WINS_SELECTOR),
-      ignoreAttribute: isRootLocalAttr,
+      ignoreAttribute: (el, name, merged) => isRootLocalAttr(el, name, merged) || (derivedActive() && isDerivedAttr(merged || el, name)),
       protectFocusedValue: true,
       keepLiveOnly: source === 'peer',
       scripts: { mergeTags: mergeTagRecognizers },
@@ -1743,9 +1757,13 @@ class LiveSync {
         },
       });
     } else {
-      localRoot = emptyScratchpads(captureLocal());
+      const captured = captureLocal();
+      // Download my copy serializes the page as it was, painted values included;
+      // the merge itself needs them stripped.
+      const recoveryRoot = captured.cloneNode(true);
+      localRoot = emptyScratchpads(captured);
       applyId = beginApply({
-        source, seq, etag, root: localRoot,
+        source, seq, etag, root: localRoot, recoveryRoot,
         domain: source === 'disk' ? 'save' : 'sync',
       });
       try {
@@ -1901,6 +1919,7 @@ class LiveSync {
       });
       diverged = report.localDiverged;
       typedDuringWait = typed;
+      repaintDerived();
 
       // Restore viewport. Done after morph so layout has settled.
       window.scrollTo(scrollX, scrollY);
@@ -2027,6 +2046,7 @@ class LiveSync {
    * local edits.
    */
   async _doApplyExternal(html, seq, etag = null, by = null, fetchOptions = null) {
+    const priorDisk = this._diskBase;
     this._log(`applyExternal - external disk change (seq=${seq})`);
     this.isPaused = true;
 
@@ -2103,6 +2123,7 @@ class LiveSync {
       });
       diverged = report.localDiverged;
       typedDuringWait = typed;
+      repaintDerived();
       // The file holds these bytes and this tab has applied them. Dated at the
       // apply, so a save that captured during the await keeps its newer base.
       this._setDiskBase(html, ticket);
@@ -2180,6 +2201,13 @@ class LiveSync {
     // autosave is on, as in the peer lane.
     if (stamped) conflictResolvedBySync(etag);
     this._saveAfterMerge(diverged, typedDuringWait);
+    // A disk frame from a writer that does not paint (an agent, the data API)
+    // changes records and leaves the painted values as they were. If the page's
+    // repainted values differ from them once the timer fires, one tab saves so
+    // the bytes on disk heal. A writer that paints is left alone.
+    if (priorDisk != null && paintSignatureOfHtml(priorDisk) === paintSignatureOfHtml(html)) {
+      schedulePaintHeal(() => (this._diskBase == null ? null : paintSignatureOfHtml(this._diskBase)));
+    }
   }
 
   /**

package/src/sync/stream.js

@@ -9,7 +9,7 @@ document.addEventListener('clay:workspace-foreground', () => { workspaceBackgrou
 const pageHidden = () => document.hidden || workspaceBackground;
 
 export class SyncStream extends EventTarget {
-  constructor(url, { shared = false, documentURL, lane, startupCheck = false } = {}) {
+  constructor(url, { shared = false, sharedData = false, documentURL, lane, clientId, startupCheck = false, keepAliveWhenHidden = false } = {}) {
     super();
     this.url = url;
     this.readyState = 0;
@@ -17,8 +17,11 @@ export class SyncStream extends EventTarget {
     this.onmessage = null;
     this.onerror = null;
     this._shared = shared && typeof SharedWorker === 'function';
+    this._sharedData = sharedData;
     this._documentURL = documentURL;
     this._lane = lane;
+    this._clientId = clientId;
+    this._keepAliveWhenHidden = keepAliveWhenHidden;
     this._since = 0;
     this._closed = false;
     this._suspended = false;
@@ -35,17 +38,17 @@ export class SyncStream extends EventTarget {
     this._visibility = () => {
       clearTimeout(this._hiddenTimer);
       if (pageHidden()) {
-        this._worker?.port.postMessage({ v: 1, type: 'hidden' });
-        this._hiddenTimer = setTimeout(() => this._suspend(), HIDDEN_DELAY);
+        if (this._worker) this._postWorker(this._worker, 'hidden');
+        if (!this._keepAliveWhenHidden) this._hiddenTimer = setTimeout(() => this._suspend(), HIDDEN_DELAY);
       } else {
         if (this._suspended) this._resume();
         else if (this._worker) {
-          this._worker.port.postMessage({ v: 1, type: 'visible' });
+          this._postWorker(this._worker, 'visible');
         }
       }
     };
-    this._pagehide = () => this._suspend();
-    this._pageshow = () => { if (!pageHidden()) this._resume(); };
+    this._pagehide = () => this._suspend(true);
+    this._pageshow = () => { if (!pageHidden() || this._keepAliveWhenHidden) this._resume(); };
     document.addEventListener('visibilitychange', this._visibility);
     document.addEventListener('clay:workspace-background', this._visibility);
     document.addEventListener('clay:workspace-foreground', this._visibility);
@@ -62,14 +65,22 @@ export class SyncStream extends EventTarget {
     this[`on${type}`]?.(event);
   }
 
+  _postWorker(worker, type, fields = {}) {
+    worker.port.postMessage({ v: this._sharedData ? 2 : 1, type, ...fields });
+  }
+
   _open() {
     if (this._closed || this._suspended) return;
     this.readyState = 0;
     if (!this._shared) return this._openDirect();
     try {
-      const worker = new SharedWorker(new URL('/_/sync/worker.js', window.location.origin).href, 'clay-sync');
+      const worker = new SharedWorker(
+        new URL(this._sharedData ? '/_/sync/data-worker.js' : '/_/sync/worker.js', window.location.origin).href,
+        this._sharedData ? 'clay-sync-data' : 'clay-sync'
+      );
       this._worker = worker;
       let lastReply = Date.now();
+      let greeted = false;
       worker.onerror = () => {
         if (this._worker !== worker) return;
         this._shared = false;
@@ -78,13 +89,39 @@ export class SyncStream extends EventTarget {
       };
       this._startTimer = setTimeout(worker.onerror, START_TIMEOUT);
       worker.port.onmessage = ({ data }) => {
-        if (this._worker !== worker || data?.v !== 1) return;
+        if (this._worker !== worker || data?.v !== (this._sharedData ? 2 : 1)) return;
+        if (this._sharedData) {
+          if (data.type === 'unsupported') {
+            worker.onerror();
+            return;
+          }
+          if (data.type === 'gone') {
+            this.readyState = 2;
+            this._emit('error');
+            this.close();
+            return;
+          }
+          if (!greeted) {
+            if (data.type !== 'hello') return;
+            if (!Array.isArray(data.features) || !data.features.includes('live-data')) {
+              worker.onerror();
+              return;
+            }
+            greeted = true;
+            clearTimeout(this._startTimer);
+            lastReply = Date.now();
+            return;
+          }
+          if (data.type === 'hello') return;
+        }
         lastReply = Date.now();
-        if (['status', 'pong', 'cursor', 'frame', 'gone'].includes(data.type)) clearTimeout(this._startTimer);
+        if (!this._sharedData && ['status', 'pong', 'cursor', 'frame', 'gone'].includes(data.type)) clearTimeout(this._startTimer);
         if (data.type === 'status') {
           if (data.state === 'open') {
-            this.readyState = 1;
-            this._emit('open');
+            if (!this._sharedData || this.readyState !== 1) {
+              this.readyState = 1;
+              this._emit('open');
+            }
           } else if (data.state === 'connecting') {
             this.readyState = 0;
             this._emit('error');
@@ -100,6 +137,9 @@ export class SyncStream extends EventTarget {
         } else if (data.type === 'frame' && typeof data.data === 'string') {
           this._remember(data.data);
           this._emit('message', data.data);
+        } else if (this._sharedData && data.type === 'event' && ['data', 'data-state', 'data-writer'].includes(data.event)
+          && data.data !== null && typeof data.data === 'object' && !Array.isArray(data.data)) {
+          try { this._emit(data.event, JSON.stringify(data.data)); } catch {}
         } else if (data.type === 'gone') {
           this.readyState = 2;
           this._emit('error');
@@ -107,14 +147,16 @@ export class SyncStream extends EventTarget {
         }
       };
       worker.port.start();
-      worker.port.postMessage({ v: 1, type: pageHidden() ? 'hidden' : 'visible' });
-      worker.port.postMessage({ v: 1, type: 'subscribe', document: this._documentURL, lane: this._lane, since: this._since });
+      this._postWorker(worker, pageHidden() ? 'hidden' : 'visible');
+      const subscription = { document: this._documentURL, lane: this._lane, since: this._since };
+      if (this._sharedData && this._lane === 'live') subscription.clientId = this._clientId;
+      this._postWorker(worker, 'subscribe', subscription);
       this._pingTimer = setInterval(() => {
         if (this._worker !== worker) return;
         if (Date.now() - lastReply > PING_INTERVAL * 3) {
           this._repair = true;
           this._reopen();
-        } else worker.port.postMessage({ v: 1, type: 'ping' });
+        } else this._postWorker(worker, 'ping');
       }, PING_INTERVAL);
     } catch {
       this._shared = false;
@@ -170,7 +212,7 @@ export class SyncStream extends EventTarget {
       this._worker = null;
       worker.onerror = null;
       worker.port.onmessage = null;
-      try { worker.port.postMessage({ v: 1, type: 'unsubscribe' }); } catch {}
+      try { this._postWorker(worker, 'unsubscribe'); } catch {}
       worker.port.close();
     }
     if (this._source) {
@@ -180,16 +222,20 @@ export class SyncStream extends EventTarget {
   }
 
   _reopen() {
+    const notify = (this._sharedData || this._keepAliveWhenHidden) && this.readyState === 1;
+    this.readyState = 0;
+    if (notify) this._emit('error');
     this._disconnect();
     this._open();
   }
 
-  _suspend() {
+  _suspend(pageExit = false) {
     clearTimeout(this._hiddenTimer);
     if (this._closed || this._suspended) return;
     this._suspended = true;
     this._repair = true;
     this.readyState = 0;
+    if (pageExit && this._keepAliveWhenHidden) this._emit('error');
     this._disconnect();
   }
 

package/src/ui/index.js

@@ -45,5 +45,9 @@ document.addEventListener("clay:save-saved", (e) => {
 });
 document.addEventListener("clay:save-error", () => toastPersistent("Couldn't save", "error"));
 document.addEventListener("clay:save-offline", () => toastPersistent("Offline, not saved", "warning"));
+document.addEventListener("clay:live-notice", (e) => {
+  if (e.detail?.code === "save-uncertain") toastPersistent(e.detail.message, "warning");
+  if (e.detail?.code === "op-too-large") toast(e.detail.message, "warning");
+});
 
 export { toast, toastPersistent, ask, consent, tell, snippet, themodal };

package/src/ui/toast.js

@@ -4,7 +4,7 @@
 // The Hyperclay dashboard's toast (Bevel's React toast with the dashboard's overrides),
 // drawn inline: a 3px tone edge, a 16px Bevel glyph, 13.5px semibold text, a quiet close.
 import { set } from "../lib/hostile-css.js";
-import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon } from "./bevel-controls.js";
+import { bevelBox, bevelSurface, bevelText, bevelButton, pageScheme, protectIcon } from "./bevel-controls.js";
 import { TOKENS, RULES, GLYPHS } from "./bevel.js";
 
 const TONES = {
@@ -39,7 +39,7 @@ function stack() {
   return box;
 }
 
-function build(message, type) {
+function build(message, type, { detail = "", actions = [] } = {}) {
   const tone = TONES[type];
   const el = bevelSurface("div", [
     "display:flex", "align-items:flex-start", ...RULES.toast, "width:100%",
@@ -48,13 +48,29 @@ function build(message, type) {
     ...HIDDEN, `transition:${motion()}`,
   ]);
   el.setAttribute("data-clay-toast", type);
+  const body = bevelBox("div", ["flex:1 1 auto", "min-width:0", "display:flex", "flex-direction:column", "gap:8px"]);
+  const head = bevelBox("div", ["display:flex", "align-items:flex-start", "gap:8px"]);
   const glyph = bevelText("span", ["display:inline-grid", "flex:none", "padding-top:1px", `color:${tone.edge}`]);
   glyph.innerHTML = tone.icon;
   protectIcon(glyph.firstElementChild, 16);
   // A message can carry a filename, and a filename is whatever whoever wrote the
   // file chose. It goes in as text so markup in a name can never become markup here.
   const text = bevelText("span", ["flex:1 1 auto", "min-width:120px", ...RULES.toastTitle, "overflow-wrap:anywhere"], message);
-  el.append(glyph, text);
+  head.append(glyph, text);
+  body.append(head);
+  // Detail and actions are the same untrusted text as the title: textContent for
+  // both, so a reason string can never become markup in the toast either.
+  if (detail) {
+    body.append(bevelText("span", ["display:block", `color:${TOKENS.muted}`, "overflow-wrap:anywhere"], detail));
+  }
+  if (actions.length) {
+    const row = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px"]);
+    for (const { label, onClick } of actions) {
+      row.append(bevelButton(label, { small: true, variant: "quiet", onClick }));
+    }
+    body.append(row);
+  }
+  el.append(body);
   return el;
 }
 
@@ -109,14 +125,14 @@ function toast(message, messageType = "success") {
 const activePersistentToasts = new Map();
 
 // Persistent toast function - doesn't auto-dismiss, requires click to close
-function toastPersistent(message, messageType = "warning") {
+function toastPersistent(message, messageType = "warning", { detail = "", actions = [] } = {}) {
   const existing = activePersistentToasts.get(message);
   if (existing) {
     dismiss(existing);
     activePersistentToasts.delete(message);
   }
 
-  const el = build(message, TONES[messageType] ? messageType : "warning");
+  const el = build(message, TONES[messageType] ? messageType : "warning", { detail, actions });
   set(el, "cursor", "default");
   const close = closeButton((e) => {
     e.stopPropagation();