@panphora/clayjs 1.9.2 → 1.11.0

package/src/sync/live-sync.js

@@ -39,40 +39,60 @@ import { HyperMorph, morph } from "../vendor/hyper-morph.vendor.js";
 
 const { createIdentityStore } = HyperMorph;
 import Mutation from "../lib/mutation.js";
-import { NO_DIRTY_SELECTOR } from "../lib/region-policy.js";
+import { NO_DIRTY_SELECTOR, LIVE_SELECTOR } from "../lib/region-policy.js";
 import { EXTENSION_NODE_SELECTOR } from '../lib/extension-noise.js';
 import { isEditMode } from "../core/is-edit-mode.js";
 import { mergeTagRecognizers } from "./merge-tags.js";
 import { serializeForSync, captureForComparisonAndDirty, captureSnapshot, originalSnapshotNode, captureForMerge, captureForSaveAndComparison } from '../core/snapshot.js';
-import { isTabLocalRootAttr, TAB_LOCAL_ROOT_ATTRS } from '../lib/root-attrs.js';
+import { isTabLocalAttr } from '../lib/root-attrs.js';
 import { autosaveActive } from '../lib/autosave-state.js';
 import { enableContentEditable } from '../core/admin-contenteditable.js';
 import { enableOnClick } from '../core/admin-onclick.js';
 import { enableAdminInputs } from '../core/admin-inputs.js';
 import { enableAdminResources } from '../core/admin-resources.js';
 import { presence } from './presence.js';
-// Side-effect import: the section-changed notice wires itself to
-// `clay:sync-applied`, which this file is the only dispatcher of.
-import './section-notice.js';
-import { hostMeta } from '../core/host-meta.js';
+import { editingMarker } from './editing-marker.js';
+import { hostMeta, hostSupports } from '../core/host-meta.js';
+import { EditingSender } from './editing-sender.js';
 import { servedDocumentEtag } from '../core/host-attrs.js';
 import { recordEtag, seedEtag, lastSeenEtag, conditionalSaves, representedEtag, forgetRepresentedEtag } from '../core/etag.js';
 import { pageMaybeDirty, pauseGate, resumeGate, gateCaptureToken, gateClearIfUnchanged } from '../lib/dirty-gate.js';
 import { gestureSeen } from '../lib/user-gesture.js';
 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';
 
 // What a live-sync merge never reads or touches on any side: editor chrome,
-// content kept out of the save or the snapshot, frozen regions, and nodes
-// browser extensions inject. The same set the 0.5 morph's sync policy ignored.
+// content kept out of the save or the snapshot, the contents of frozen regions,
+// and nodes browser extensions inject. The same set the 0.5 morph's sync policy
+// ignored.
 const SYNC_IGNORE_SELECTOR = [
   '[editor-ui]', '[clay~="editor-ui"]', '[save-ignore]', '[snapshot-remove]',
-  '[no-snapshot]', '[no-save]', '[save-remove]', '[freeze]', '[save-freeze]',
-  '[clay~="no-save"]', '[clay~="no-snapshot"]', '[clay~="freeze"]',
+  '[no-snapshot]', '[no-save]', '[save-remove]', '[freeze] *', '[save-freeze] *',
+  '[clay~="no-save"]', '[clay~="no-snapshot"]', '[clay~="freeze"] *',
+  LIVE_SELECTOR,
   EXTENSION_NODE_SELECTOR,
 ].join(',');
 
+// 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.
+const FREEZE_SELECTOR = '[clay~="freeze"], [freeze], [save-freeze]';
+
+function emptyScratchpads(root) {
+  for (const el of root.querySelectorAll(FREEZE_SELECTOR)) el.replaceChildren();
+  return root;
+}
+
+function scratchpadsEmptied(input) {
+  if (input == null) return input;
+  const doc = typeof input === 'string' ? new DOMParser().parseFromString(input, 'text/html') : input;
+  emptyScratchpads(doc);
+  return doc;
+}
+
 // Regions whose local state is never work to keep: disposable content
 // (no-dirty) and regions the mutation system does not watch, whose churn the
 // dirty gate already excludes. The incoming frame's version wins there.
@@ -81,10 +101,9 @@ const REMOTE_WINS_SELECTOR = [
   '[clay~="no-watch"]', '[no-watch]', '[mutations-ignore]',
 ].join(',');
 
-// Host tokens and library state on a document's root element, on every side
+// Host tokens, library state and router state, on every side
 // of a merge: the live root, a snapshot clone's root, a parsed frame's root.
-const isRootLocalAttr = (el, name) =>
-  !el.parentElement && el.localName === 'html' && TAB_LOCAL_ROOT_ATTRS.has(name);
+const isRootLocalAttr = (el, name) => isTabLocalAttr(name, el);
 
 // Identity an author wrote into the page, the fallback behind synthetic ids.
 //
@@ -265,6 +284,7 @@ class LiveSync {
     // document, and hostMeta() memoizes the request itself.
     this._profile = null;
     this._profilePromise = null;
+    this._editing = null;
     this._ready = null;
     // Bumped by every start(), so a discovery that resolves after a stop/restart
     // cannot open a stream for the run that has already been torn down.
@@ -529,6 +549,12 @@ class LiveSync {
     // snapshot listener would never fire — skip registering it.
     if (this.lane === 'live') {
       this.listenForSnapshots();
+      hostSupports('presence-editing').then((supported) => {
+        if (!supported || this.isDestroyed || this._startGen !== gen || this._editing) return;
+        this._editing = new EditingSender({ send: (path) => this._postEditing(path) });
+        this._editing.start();
+        this._editing.roster(this._lastRoster);
+      }, () => {});
       this._saveSavedHandler = () => {
         this._saveEpoch++;
         // The file now holds what this save wrote: the disk lane's new base,
@@ -572,10 +598,18 @@ class LiveSync {
       this.sse.close();
       this.sse = null;
     }
+    streamClosed();
 
     // Nothing feeds the roster once the stream is gone, so leaving the stack up
     // would show a list of people who may all have left.
     presence.clear();
+    editingMarker.clear();
+
+    if (this._editing) {
+      this._editing.stop();
+      this._editing = null;
+    }
+    this._lastRoster = null;
 
     if (this._snapshotHandler) {
       document.removeEventListener('clay:snapshot-ready', this._snapshotHandler);
@@ -760,9 +794,26 @@ class LiveSync {
 
     this.sse.onopen = () => {
       console.log('[LiveSync] Connected');
+      if (this._editing) this._editing.reconnected();
       if (this.onConnect) this.onConnect();
     };
 
+    // clay.live's fast lane rides this stream: report it open and closed, and pass
+    // on its named events (stream-bridge.js).
+    this.sse.addEventListener('open', () => streamOpened({ clientId: this.clientId, lane: this.lane }));
+    this.sse.addEventListener('error', () => streamClosed());
+    for (const type of LIVE_EVENTS) {
+      this.sse.addEventListener(type, (event) => {
+        let data;
+        try {
+          data = JSON.parse(event.data);
+        } catch {
+          return;
+        }
+        streamEvent(type, data);
+      });
+    }
+
     // The cursor frame is a NAMED SSE event, so it never reaches onmessage and
     // never looks like data. Its `resync` flag says the server could not retain
     // everything between where this client resumed and the baseline it is
@@ -819,6 +870,9 @@ class LiveSync {
         return;
       }
       presence.update(data);
+      editingMarker.update(data);
+      this._lastRoster = data;
+      if (this._editing) this._editing.roster(data);
     });
 
     this.sse.onmessage = (event) => {
@@ -1083,6 +1137,16 @@ class LiveSync {
     });
   }
 
+  _postEditing(path) {
+    const url = new URL('/_/presence', window.location.origin);
+    url.searchParams.set('client-id', this.clientId);
+    return fetch(url.href, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'Document-URL': window.location.href },
+      body: JSON.stringify({ editing: path }),
+    }).then((response) => response.ok, () => false);
+  }
+
   /**
    * Route an external disk change (htmlclay watcher) out of the notification
    * path. Returns true when the notification was consumed — the caller must
@@ -1592,7 +1656,7 @@ class LiveSync {
     // A frame may neither write these onto our root nor, by not carrying them,
     // take ours away. Returning false is hyper-morph's veto for both directions.
     const beforeAttributeUpdated = (name, element) =>
-      isTabLocalRootAttr(name, element) ? false : undefined;
+      isTabLocalAttr(name, element) ? false : undefined;
     const authored = uniqueAuthoredIdentity(new WeakMap());
     const sideIdentity = (map) =>
       isIdMap(map) ? { first: authored, map, then: authored } : authored;
@@ -1619,11 +1683,13 @@ class LiveSync {
         if (synthetic) syntheticByAuthored.set(id, synthetic);
       }
     }
+    remote = scratchpadsEmptied(remote);
 
     const common = {
       live: document,
       remote,
       ignore: (el) => el.matches(SYNC_IGNORE_SELECTOR),
+      opaque: (el) => el.matches(FREEZE_SELECTOR),
       remoteWins: (el) => el.matches(REMOTE_WINS_SELECTOR),
       ignoreAttribute: isRootLocalAttr,
       protectFocusedValue: true,
@@ -1648,7 +1714,7 @@ class LiveSync {
       pending = mergeDocument({
         ...common,
         base: null,
-        local: { root: captureLocal(), toLive: originalSnapshotNode },
+        local: { root: emptyScratchpads(captureLocal()), toLive: originalSnapshotNode },
         identity: { local: localIdentity, remote: sideIdentity(identityMap) },
       });
     } else if (!dirty) {
@@ -1660,7 +1726,7 @@ class LiveSync {
       // a local edit, and a clean autosave tab would write that "edit" back to
       // disk on every frame. Still three-way: merge tags keep their base for
       // the JSON merge, and hyper-morph's clean-side shortcuts apply.
-      const localRoot = captureLocal();
+      const localRoot = emptyScratchpads(captureLocal());
       const baseDoc = localRoot.ownerDocument;
       if (baseDoc.documentElement !== localRoot) baseDoc.replaceChild(localRoot, baseDoc.documentElement);
       pending = mergeDocument({
@@ -1675,7 +1741,7 @@ class LiveSync {
         },
       });
     } else {
-      localRoot = captureLocal();
+      localRoot = emptyScratchpads(captureLocal());
       applyId = beginApply({
         source, seq, etag, root: localRoot,
         domain: source === 'disk' ? 'save' : 'sync',
@@ -1683,7 +1749,7 @@ class LiveSync {
       try {
         pending = mergeDocument({
           ...common,
-          base,
+          base: scratchpadsEmptied(base),
           local: { root: localRoot, toLive: originalSnapshotNode },
           identity: {
             base: sideIdentity(baseIdentityMap),
@@ -1920,7 +1986,7 @@ class LiveSync {
       // returns above without reaching here, so nothing can name an author for a
       // change this tab never took. Null on every frame the host did not stamp.
       document.dispatchEvent(new CustomEvent('clay:sync-applied', {
-        detail: { seq, source: 'peer', by: by || null, report, unresolved: this.unresolvedConflicts, conflictIds }
+        detail: { seq, source: 'peer', by: by || null, html, report, unresolved: this.unresolvedConflicts, conflictIds }
       }));
     } finally {
       this._log('applyUpdate - morph complete, resuming mutations');

package/src/sync/presence.js

@@ -31,12 +31,14 @@
  * hyperclay-local, HTML Clay and makerclay do today and it stays that way until
  * they adopt it.
  *
- * `people[].id` is an opaque keyed pseudonym. It picks the colour and nothing
- * else: it is not a database id, it names no account, and it is never logged.
+ * `people[].id` is the person's people id (the one `clay.me` and `clay.people`
+ * use) or a guest's per-document pseudonym. It picks the colour and nothing
+ * else: it is not a permission check, and it is never logged.
  */
 
 import { hostSupports } from '../core/host-meta.js';
 import { make, set } from '../lib/hostile-css.js';
+import { initialsOf, personColor } from '../lib/person-face.js';
 import { pageScheme, RUNTIME_ONLY } from '../ui/bevel-controls.js';
 import { TOKENS, FONT_MONO, SHADOW } from '../ui/bevel.js';
 
@@ -51,47 +53,17 @@ const LABEL_FONT = `500 11px/1.4 ${FONT_MONO}`;
 // resets color-scheme and direction too, which are put back straight after.
 const RESET = ['all:initial', 'color-scheme:inherit', 'direction:ltr', 'unicode-bidi:isolate'];
 
-// The paper a participant's colour sits on: the initials of a solid square, the fill
-// of a hollow one. One literal in both schemes, because every colour below was chosen
-// against it.
+// The fill of every square, under the participant's colour. One literal in both
+// schemes, because every colour the shared person-face palette draws with was
+// chosen against it.
 const FACE = '#FFFCF6';
 
-// A fixed set rather than a computed hue: every one of these was looked at
-// against white initials, and a hue wheel puts neighbouring pseudonyms on two
-// blues nobody can tell apart.
-const COLORS = [
-  '#b91c1c', '#c2410c', '#a16207', '#15803d', '#0f766e',
-  '#0369a1', '#1d4ed8', '#6d28d9', '#a21caf', '#9f1239',
-];
-
 /** Every element this module creates, marked the same way. */
 function runtimeRoot(el) {
   el.setAttribute('clay', RUNTIME_ONLY);
   return el;
 }
 
-function hashOf(id) {
-  let h = 5381;
-  for (let i = 0; i < id.length; i++) {
-    h = (((h << 5) + h) ^ id.charCodeAt(i)) >>> 0;
-  }
-  return h;
-}
-
-// The pseudonym picks the colour and nothing else.
-function colorFor(id) {
-  return COLORS[hashOf(id) % COLORS.length];
-}
-
-// Array.from, not [0]: a name starting outside the BMP would otherwise show half
-// a character.
-function initialsOf(name) {
-  const words = String(name).trim().split(/\s+/).filter(Boolean);
-  if (!words.length) return '?';
-  const first = (word) => Array.from(word)[0].toUpperCase();
-  return words.length === 1 ? first(words[0]) : first(words[0]) + first(words[1]);
-}
-
 /**
  * Read the roster frame defensively. Everything here arrived over a wire, and a
  * frame this function cannot understand must draw nothing rather than draw a
@@ -106,7 +78,6 @@ function normalize(data) {
     people.push({
       id: person.id,
       name,
-      canEdit: person.canEdit === true,
       you: person.you === true,
     });
   }
@@ -144,8 +115,14 @@ class Presence {
    * @returns {Promise<void>}
    */
   async update(data) {
-    this.roster = normalize(data);
+    const next = normalize(data);
+    const same = this.root && JSON.stringify(next) === JSON.stringify(this.roster);
+    this.roster = next;
     if (!(await this.supported())) return;
+    if (same) {
+      set(this.root, 'color-scheme', pageScheme());
+      return;
+    }
     this.render();
   }
 
@@ -260,13 +237,8 @@ class Presence {
   }
 
   avatar(person) {
-    const color = colorFor(person.id);
-    // Solid says this person can change the document; hollow says they are
-    // reading it. The two are the same three colours inverted, so a stack of
-    // both reads as one set rather than as two kinds of thing.
-    const skin = person.canEdit
-      ? [`background-color:${color}`, `color:${FACE}`, `border-color:${FACE}`]
-      : [`background-color:${FACE}`, `color:${color}`, `border-color:${color}`];
+    const color = personColor(person.id);
+    const skin = [`background-color:${FACE}`, `color:${color}`, `border-color:${color}`];
 
     const el = runtimeRoot(make('div', [
       ...RESET,

package/src/sync/stream.js

@@ -2,6 +2,12 @@ const START_TIMEOUT = 5000;
 const HIDDEN_DELAY = 5000;
 const PING_INTERVAL = 15000;
 
+let workspaceBackground = window.__clayWorkspaceBackground === true;
+document.addEventListener('clay:workspace-background', () => { workspaceBackground = true; });
+document.addEventListener('clay:workspace-foreground', () => { workspaceBackground = false; });
+
+const pageHidden = () => document.hidden || workspaceBackground;
+
 export class SyncStream extends EventTarget {
   constructor(url, { shared = false, documentURL, lane, startupCheck = false } = {}) {
     super();
@@ -28,7 +34,7 @@ export class SyncStream extends EventTarget {
     this._source = null;
     this._visibility = () => {
       clearTimeout(this._hiddenTimer);
-      if (document.hidden) {
+      if (pageHidden()) {
         this._worker?.port.postMessage({ v: 1, type: 'hidden' });
         this._hiddenTimer = setTimeout(() => this._suspend(), HIDDEN_DELAY);
       } else {
@@ -39,12 +45,14 @@ export class SyncStream extends EventTarget {
       }
     };
     this._pagehide = () => this._suspend();
-    this._pageshow = () => { if (!document.hidden) this._resume(); };
+    this._pageshow = () => { if (!pageHidden()) this._resume(); };
     document.addEventListener('visibilitychange', this._visibility);
+    document.addEventListener('clay:workspace-background', this._visibility);
+    document.addEventListener('clay:workspace-foreground', this._visibility);
     window.addEventListener('pagehide', this._pagehide);
     window.addEventListener('pageshow', this._pageshow);
     this._open();
-    if (document.hidden) this._visibility();
+    if (pageHidden()) this._visibility();
   }
 
   _emit(type, data) {
@@ -99,7 +107,7 @@ export class SyncStream extends EventTarget {
         }
       };
       worker.port.start();
-      worker.port.postMessage({ v: 1, type: document.hidden ? 'hidden' : 'visible' });
+      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._pingTimer = setInterval(() => {
         if (this._worker !== worker) return;
@@ -139,7 +147,8 @@ export class SyncStream extends EventTarget {
       this._remember(event.data);
       this._emit('message', event.data);
     };
-    for (const type of ['cursor', 'presence']) {
+    // `data`, `data-state` and `data-writer` are clay.live's fast lane (stream-bridge.js).
+    for (const type of ['cursor', 'presence', 'data', 'data-state', 'data-writer']) {
       source.addEventListener(type, event => {
         if (this._source === source) this._emit(type, event.data);
       });
@@ -197,6 +206,8 @@ export class SyncStream extends EventTarget {
     clearTimeout(this._hiddenTimer);
     this._disconnect();
     document.removeEventListener('visibilitychange', this._visibility);
+    document.removeEventListener('clay:workspace-background', this._visibility);
+    document.removeEventListener('clay:workspace-foreground', this._visibility);
     window.removeEventListener('pagehide', this._pagehide);
     window.removeEventListener('pageshow', this._pageshow);
   }