@panphora/clayjs 1.16.0 → 1.18.0

package/src/sync/live-sync.js

@@ -36,20 +36,23 @@
  */
 
 import { createIdentityStore } from "../vendor/hyper-morph-identity.vendor.js";
+import { pageRelay } from "./page-relay.js";
 import { loadedEngine, mergeEngine } from "./merge-engine.js";
 import Mutation from "../lib/mutation.js";
 import { NO_DIRTY_SELECTOR, LIVE_SELECTOR } from "../lib/region-policy.js";
 import { EXTENSION_NODE_SELECTOR, EXTENSION_ATTR_PATTERN } from '../lib/extension-noise.js';
 import { isEditMode, modeState } from "../core/is-edit-mode.js";
 import { attributeMerge } from "./merge-declarations.js";
-import { serializeForSync, captureForComparisonAndDirty, canonicalizeReceived, captureSnapshot, originalSnapshotNode, captureForMerge, captureForSaveAndComparison } from '../core/snapshot.js';
+import { serializeForSync, copyCaptureClone, captureForComparisonAndDirty, canonicalizeReceived, captureSnapshot, originalSnapshotNode, captureForMerge, captureForSaveAndComparison } from '../core/snapshot.js';
 import { mergeIgnoresAttr, mergeVetoesAttr } from '../lib/root-attrs.js';
 import { autosaveActive } from '../lib/autosave-state.js';
 import { hostSupports } from '../core/host-meta.js';
 import { PAGE_FORMAT, PAGE_FORMAT_HEADER } from '../core/page-format-wire.js';
+import { knownPageFormatFloor, pageFormatFloor, withPageFormatFloor } from '../core/page-format.js';
+import { onSaveAccepted } from '../core/save-accepted.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 { pageMaybeDirty, pauseGate, resumeGate, gateCaptureToken, gateClearIfUnchanged, gateMarkDirty } 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';
@@ -289,6 +292,21 @@ function pairedBaseline() {
  */
 import { WIRE_PROFILES, resolveWireProfile } from './wire-profile.js';
 
+// Above this the relay body is a Blob built from parts, so the snapshot is never joined
+// into one more full-size string on the main thread. The save body's own threshold (5h).
+const RELAY_BODY_BLOB_MIN_BYTES = 1024 * 1024;
+
+/**
+ * The body of one relay POST: the bytes `JSON.stringify` of this object has always
+ * produced, from parts when the snapshot is large. An absent value still leaves its key
+ * out, exactly as before.
+ */
+function relayBody(profile, html, sender, identityMap, etag) {
+  const rest = { sender, identityMap, ...(etag ? { etag } : {}) };
+  if (html.length < RELAY_BODY_BLOB_MIN_BYTES) return JSON.stringify({ [profile.snapshotKey]: html, ...rest });
+  return new Blob([`{${JSON.stringify(profile.snapshotKey)}:`, JSON.stringify(html), `,${JSON.stringify(rest).slice(1)}`], { type: 'application/json' });
+}
+
 class LiveSync {
   constructor() {
     this.sse = null;
@@ -333,6 +351,7 @@ class LiveSync {
     // Never reconstructed from lastHtml: that is the newest accepted save or
     // applied frame, which can still lag the save in flight, and pairing a fresh
     // stamp with older bytes is the one thing spec §10 forbids.
+    this._savedSnapshot?.abort?.abort();
     this._savedSnapshot = null;
     this._sendInFlight = false;
     this._queuedSend = null;
@@ -347,6 +366,9 @@ class LiveSync {
     this._liveData = false;
     this._editing = null;
     this._presenceLease = null;
+    // Set by the exit barrier: a sender discovered while it runs is built but stays
+    // quiet until resume, so the exit publishes nobody.
+    this._presenceQuiesced = false;
     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.
@@ -578,6 +600,7 @@ class LiveSync {
     this._diskBase = null;
     this._diskBaseTicket = this._ticket();
     this._saveTicket = 0;
+    this._savedSnapshot?.abort?.abort();
     this._savedSnapshot = null;
     this._applyGen++;
     this.lastSeenSeq = 0;
@@ -662,7 +685,7 @@ class LiveSync {
       // one sender behind it: the generic marker publishes through the store, so a
       // page target and a caret path never talk over each other.
       loadPresence().then((store) => this._startPresence(store, gen), () => {});
-      this._saveSavedHandler = () => {
+      this._saveSavedHandler = (event) => {
         this._saveEpoch++;
         // The file now holds what this save wrote: the disk lane's new base,
         // dated at the save's capture, which is when the document held these
@@ -674,7 +697,7 @@ class LiveSync {
         if (ticket > this._acceptedSaveTicket) this._acceptedSaveTicket = ticket;
         const bytes = edit ? edit.getLastSavedBytes() : null;
         if (bytes != null) this._setDiskBase(bytes, ticket);
-        this._relayCommit();
+        this._relayCommit(event?.detail?.captureId, bytes);
       };
       document.addEventListener('clay:save-saved', this._saveSavedHandler);
       // A 412 can arrive after this tab already merged the version that beat it:
@@ -721,10 +744,14 @@ class LiveSync {
       this._editing.stop();
       this._editing = null;
     }
-    // Only this run's lease: a successor that already attached keeps its roster.
+    // Only this run's lease: a successor that already attached keeps its roster. A
+    // broadcast session is stopped, not just detached, so its heartbeat, channel and
+    // goodbye go with the session that opened them.
     if (this._presenceLease) {
-      this._presenceLease.detach();
+      const transport = this._presenceLease;
       this._presenceLease = null;
+      if (typeof transport.stop === 'function') transport.stop();
+      else transport.detach();
     }
     this._lastRoster = null;
 
@@ -1136,13 +1163,45 @@ class LiveSync {
       // after dispatchEvent returns, so reading outerHTML and walking children
       // must happen now.
       this._log('snapshot-ready received, preparing to send');
-      const html = serializeForSync(clone);
       const identityMap = this.identity.exportMap(clone, originalSnapshotNode);
 
       // The save that follows this capture stores these bytes, so this is the
       // content its stamp will describe. Held for _relayCommit, and overwritten
       // by the next capture, so it always names the save currently in flight.
-      this._savedSnapshot = { html, identityMap, ticket: this._saveTicket };
+      this._savedSnapshot?.abort?.abort();
+      const held = {
+        html: null,
+        steps: null,
+        copy: null,
+        abort: null,
+        identityMap,
+        ticket: this._saveTicket,
+        captureId: event.detail.captureId ?? null,
+      };
+      if (event.detail.sliced) {
+        // The save strips this clone as soon as the event returns, so a serialization
+        // that runs across tasks reads a private copy. Cloning is much cheaper than
+        // serializing, and the copy is what keeps the bytes exactly a one-call pass's.
+        // The generator records its own result, so whichever finishes it, the background
+        // run or the relay, leaves the bytes on `held`. The step serializers and the slicer
+        // load lazily; the sliced save that raised this event has already fetched them.
+        held.copy = copyCaptureClone(clone);
+        held.abort = new AbortController();
+        const { signal } = held.abort;
+        Promise.all([import('../core/serialize-steps.js'), import('../lib/slice.js')]).then(([{ serializeForSyncSteps }, { runSliced }]) => {
+          if (signal.aborted || typeof held.html === 'string') return;
+          const steps = (function* () {
+            const html = yield* serializeForSyncSteps(held.copy);
+            held.html = html;
+            held.steps = null;
+          })();
+          held.steps = steps;
+          return runSliced(steps, { signal });
+        }).catch(() => {});
+      } else {
+        held.html = serializeForSync(clone);
+      }
+      this._savedSnapshot = held;
     };
 
     document.addEventListener('clay:snapshot-ready', this._snapshotHandler);
@@ -1190,37 +1249,81 @@ class LiveSync {
    * peers only ever see versions the host accepted, each descending from the one
    * before. A host that returns no stamp still gets the relay, without one.
    */
-  _relayCommit() {
+  _relayCommit(captureId = null, acceptedHtml = null) {
     if (this.isDestroyed) return;
     const etag = lastSeenEtag();
 
+    const held = this._savedSnapshot;
+    // A capture taken after this save's own is somebody else's content: relay it
+    // under its own save's stamp, never this one's. The legacy null-id shape keeps
+    // matching, so a fixture that names no capture on either side still relays.
+    if (held && (held.captureId ?? null) !== (captureId ?? null)) {
+      this._log('Skipping send - snapshot belongs to a different capture');
+      return;
+    }
+
     // The content this save stored, captured with it. Consumed rather than left
     // behind, so a save-saved with no capture of its own can never reuse an
     // older save's bytes under a newer stamp.
-    const pending = this._savedSnapshot;
+    const pending = held;
     this._savedSnapshot = null;
 
+    // A serialization still running in the background: this task finishes it, so the
+    // relayed bytes are the ones the save stored however the two raced.
+    if (pending?.copy && typeof pending.html !== 'string') {
+      pending.abort?.abort();
+      if (pending.steps) for (let step = pending.steps.next(); !step.done; step = pending.steps.next());
+      else pending.html = serializeForSync(pending.copy);
+    }
+
     // No captured snapshot means nothing here knows which bytes this save
     // stored, and §10 is explicit that a stamp must never travel on its own.
     if (!pending || typeof pending.html !== 'string') return;
 
+    // The capture is taken before the document transforms run, and the page
+    // projection is one of them: a page's relay has to carry what the file now
+    // holds, not the editor DOM the capture saw. Everything outside the page's
+    // own elements stays the captured sync domain, `no-save` regions included.
+    let payload = pending;
+    if (typeof acceptedHtml === 'string') {
+      try {
+        payload = pageRelay(pending, acceptedHtml, this.identity);
+      } catch (err) {
+        // Stale page bytes are worse than no relay: the save stays accepted, and
+        // peers get the next one.
+        this._log(`Skipping send - page relay failed: ${err && err.message}`);
+        return;
+      }
+      if (!payload) {
+        this._log('Skipping send - accepted capture has no page article');
+        return;
+      }
+    }
+
+    // The relay cites this save's stamp, so it declares the floor those bytes went out
+    // at: the save adds the format marker on its way out (core/save-core.js runSave),
+    // after the capture this relay was built from. At floor 0 the html is unchanged.
+    const sent = acceptedBytesFor(captureId) ?? acceptedHtml;
+    const floor = typeof sent === 'string' ? pageFormatFloor(sent) : 0;
+    payload = { ...payload, html: asSent(withPageFormatFloor(payload.html, Math.max(knownPageFormatFloor(), floor)), sent) };
+
     // Skip only an unstamped repeat, judged against the base as it stood. A
     // landed save is news even when its bytes equal the last relay: "Keep mine"
     // can restore exactly those bytes after the peers moved on, and they must
     // hear it.
-    const repeat = !etag && pending.html === this.lastHtml;
+    const repeat = !etag && payload.html === this.lastHtml;
 
     // The host accepted these bytes, so every later accepted save descends from
     // them: they are the peer lane's base from this moment, not once the relay
     // returns. A frame whose morph ran after this capture installs its own,
     // newer base when its resources settle, and the ticket keeps it there.
-    this._setPeerBase(pending.html, pending.identityMap, pending.ticket);
+    this._setPeerBase(payload.html, payload.identityMap, payload.ticket);
 
     if (repeat) {
       this._log('Skipping send - HTML unchanged');
       return;
     }
-    this._enqueueSend(pending.html, pending.identityMap, etag || null);
+    this._enqueueSend(payload.html, payload.identityMap, etag || null);
   }
 
   _postUpdate(html, identityMap, etag = null, attempt = 0) {
@@ -1239,12 +1342,7 @@ class LiveSync {
         [profile.documentHeader]: window.location.href,
         [PAGE_FORMAT_HEADER]: String(PAGE_FORMAT),
       },
-      body: JSON.stringify({
-        [profile.snapshotKey]: html,
-        sender: this.clientId,
-        identityMap: identityMap,
-        ...(etag ? { etag } : {})
-      })
+      body: relayBody(profile, html, this.clientId, identityMap, etag)
     }).then(response => {
       if (!response.ok) {
         console.warn('[LiveSync] Save returned status:', response.status);
@@ -1288,7 +1386,8 @@ class LiveSync {
     return store.connect({ send: (body) => this._postPresence(body) })
       .then((transport) => {
         if (this.isDestroyed || this._startGen !== gen) {
-          transport?.detach();
+          if (typeof transport?.stop === 'function') transport.stop();
+          else transport?.detach();
           return null;
         }
         this._presenceLease = transport || null;
@@ -1299,8 +1398,11 @@ class LiveSync {
         return loadEdit().then((mod) => {
           if (this.isDestroyed || this._startGen !== gen || this._editing) return;
           this._editing = new mod.EditingSender({});
-          this._editing.start();
-          this._editing.roster(this._lastRoster);
+          if (this._presenceQuiesced) this._editing.stop();
+          else {
+            this._editing.start();
+            this._editing.roster(this._lastRoster);
+          }
         });
       });
   }
@@ -1917,6 +2019,9 @@ class LiveSync {
       ignoreAttribute: (el, name, merged) => isRootLocalAttr(el, name, merged) || (derivedActive() && isDerivedAttr(merged || el, name)),
       attributeMerge,
       protectFocusedValue: true,
+      // Focus inside ClayJS's own UI (a shadow root) has nothing on the page to put back,
+      // and restoring the stale page selection would pull focus out of the field.
+      restoreFocus: document.activeElement?.localName !== 'clay-editor-ui',
       keepLiveOnly: source === 'peer',
       scripts: { mergeTags: loadedEngine().mergeTagRecognizers },
       hooks: { beforeAttributeUpdated },
@@ -2020,7 +2125,9 @@ class LiveSync {
     } finally {
       lineageCapture.finish(conflicts.list());
     }
-    if (dirty && !report.localDiverged) {
+    if (this.lane === 'live' && report.localDiverged) {
+      gateMarkDirty();
+    } else if (dirty && !report.localDiverged) {
       gateClearIfUnchanged(token);
     }
     // Synthetic ids converge: every live element the frame named takes the
@@ -2499,6 +2606,26 @@ class LiveSync {
   }
 }
 
+// The bytes the host just accepted, exactly as they went out, and the capture they came
+// from: a save adds the format marker on its way out, so only these say the floor.
+let lastAccepted = null;
+onSaveAccepted((html, accepted) => {
+  lastAccepted = typeof html === 'string' ? { html, captureId: accepted?.captureId ?? null } : null;
+});
+
+const acceptedBytesFor = (captureId) =>
+  lastAccepted && (lastAccepted.captureId ?? null) === (captureId ?? null) ? lastAccepted.html : null;
+
+// A relay re-serializes the DOM, and that spelling is not the file's: a bare empty
+// attribute comes back as `=""`. When the relay describes the same document the host
+// stored, it carries the stored bytes themselves, so a peer reads what a reload would.
+// One that holds regions the file leaves out (`no-save`) keeps its own serialization.
+function asSent(html, sent) {
+  if (typeof sent !== 'string' || sent === html) return html;
+  const root = (source) => new DOMParser().parseFromString(source, 'text/html').documentElement;
+  return root(html).isEqualNode(root(sent)) ? sent : html;
+}
+
 // Singleton instance
 const liveSync = new LiveSync();
 

package/src/sync/page-relay.js

@@ -0,0 +1,52 @@
+import { importMap } from "../vendor/hyper-morph-identity.vendor.js";
+import { serializeForSync } from "../core/snapshot.js";
+
+const PAGE = /^page(\.[0-9]+)?$/;
+const tags = (root) => [...root.querySelectorAll('script[merge][clay~="live"]')]
+  .filter((el) => PAGE.test(el.getAttribute("merge")));
+
+export function pageRelay(pending, acceptedHtml, identity) {
+  // A capture with no page article has nothing to overlay, and a document without
+  // one is not parsed at all: nothing outside the article would change.
+  if (!pending.html.includes("data-page")) return pending;
+  const parse = (html) => new DOMParser().parseFromString(html, "text/html");
+  const outgoing = parse(pending.html);
+  const article = outgoing.querySelector("article[data-page]");
+  if (!article) return pending;
+  const accepted = parse(acceptedHtml);
+  const savedArticle = accepted.querySelector("article[data-page]");
+  if (!savedArticle) return null;
+  const oldIds = importMap(outgoing.documentElement, pending.identityMap);
+
+  const replace = (old, source) => {
+    const next = outgoing.importNode(source, true);
+    const id = oldIds.get(old);
+    if (id) oldIds.set(next, id);
+    old.replaceWith(next);
+    return next;
+  };
+  const nextArticle = replace(article, savedArticle);
+  const prior = new Map(tags(outgoing).map((el) => [el.getAttribute("merge"), el]));
+  for (const saved of tags(accepted)) {
+    const name = saved.getAttribute("merge");
+    const old = prior.get(name);
+    if (old) replace(old, saved);
+    else nextArticle.before(outgoing.importNode(saved, true));
+    prior.delete(name);
+  }
+  for (const old of prior.values()) old.remove();
+  const title = outgoing.querySelector("head > title");
+  const savedTitle = accepted.querySelector("head > title");
+  if (title && savedTitle) replace(title, savedTitle);
+  else if (savedTitle) outgoing.head.append(outgoing.importNode(savedTitle, true));
+  else title?.remove();
+
+  const root = outgoing.documentElement;
+  const identityMap = identity.exportMap(root, (node) => {
+    const id = oldIds.get(node);
+    if (!id) return null;
+    identity.adopt(node, id);
+    return node;
+  });
+  return { ...pending, html: serializeForSync(root), identityMap };
+}

package/src/sync/presence-store.js

@@ -60,6 +60,11 @@ export class PresenceStore {
     this.timer = null;
     this.timerKind = null;
     this.inflight = false;
+    // The lease the request in flight belongs to, and the target it carried. A
+    // request a lease left behind is its own: giving the lease back resets these, so
+    // the next one starts unblocked and a late answer changes nothing.
+    this.inflightOwner = null;
+    this.inflightKey = null;
   }
 
   /**
@@ -253,21 +258,37 @@ export class PresenceStore {
       },
       detach() {
         if (store.owner !== lease) return;
+        // A clear this lease asked for and the host never heard: the last word it
+        // holds is a target, and nothing after this lease will take it back.
+        const unsent = store.heldKey === '' && typeof store.inflightKey === 'string' && store.inflightKey !== '';
         store.owner = null;
         store.session = null;
         store.n = 0;
         store.sentKey = null;
+        // The request this lease left behind is its own: the next lease starts
+        // unblocked, and the answer that arrives late releases nothing.
+        store.inflight = false;
+        store.inflightOwner = null;
+        store.inflightKey = null;
         store.cancel();
         store.target = null;
         store.heldKey = '';
         store.explicit = false;
         store.clear();
+        if (unsent) {
+          try {
+            Promise.resolve(lease.send({ editing: null })).catch(() => {});
+          } catch {}
+        }
       },
     };
     this.owner = lease;
     this.session = null;
     this.n = 0;
     this.sentKey = null;
+    this.inflight = false;
+    this.inflightOwner = null;
+    this.inflightKey = null;
     this.cancel();
     // A fresh connection starts from nothing, so the target this tab holds is sent
     // again rather than assumed delivered.
@@ -284,7 +305,7 @@ export class PresenceStore {
    *
    * @param {{send?: ?function(Object): any}} [options] - the relay's send, when
    *   this tab may publish at all. A reader passes none.
-   * @returns {Promise<?{active: boolean, detach: function(): void}>}
+   * @returns {Promise<?{active: boolean, detach: function(): void, stop?: function(): void}>}
    */
   connect({ send = null } = {}) {
     if (this.connecting) return this.connecting;
@@ -297,8 +318,15 @@ export class PresenceStore {
           (extensions.includes('page-awareness-v1') || extensions.includes('record-awareness-v1'))
         ) {
           const scope = typeof awareness.scope === 'string' && awareness.scope ? awareness.scope : null;
-          return import('./local-presence.js')
-            .then(({ localPresence }) => localPresence({ scope, store: this }).start() ?? null);
+          return import('./local-presence.js').then(({ localPresence }) => {
+            const session = localPresence({ scope, store: this });
+            const lease = session.start();
+            if (!lease) return null;
+            // The lease stays the transport this document holds, so it is still the
+            // store's one owner; `stop` is the session's, and stopping it is what
+            // takes the heartbeat, the channel and the goodbye with the session.
+            return Object.defineProperty(lease, 'stop', { value: () => session.stop() });
+          });
         }
         if (typeof send === 'function' && extensions.includes('presence-editing')) {
           return this.attachTransport({ send });
@@ -382,10 +410,17 @@ export class PresenceStore {
     this.cancel();
     this.sentKey = this.heldKey;
     this.inflight = true;
+    this.inflightOwner = owner;
+    this.inflightKey = this.sentKey;
     if (body.v === PRESENCE_VERSION) this.n = n;
 
     const settle = (ok) => {
+      // A request a lease that has since let the tab go is not this store's to
+      // answer for: the newer owner's request, or the final clear, is what stands.
+      if (this.inflightOwner !== owner) return;
       this.inflight = false;
+      this.inflightOwner = null;
+      this.inflightKey = null;
       if (this.owner !== owner) return;
       if (this.heldKey !== this.sentKey) {
         // A newer target arrived while this one was in flight: the latest wins.
@@ -408,5 +443,10 @@ export default presence;
 // sender an editor starts with — and both find the same store here.
 if (typeof window !== 'undefined') {
   window.clay = window.clay || {};
-  if (!window.clay.presence) window.clay.presence = presence;
+  if (!window.clay.presence) {
+    window.clay.presence = presence;
+    try {
+      document.dispatchEvent(new CustomEvent('clay:presence-ready', { detail: { presence } }));
+    } catch {}
+  }
 }

package/src/sync/presence.js

@@ -62,6 +62,7 @@ function loadUI() {
   uiLoad ??= Promise.all([import('../ui/bevel-controls.js'), import('../ui/bevel.js')])
     .then(([controls, bevel]) => (ui = {
       pageScheme: controls.pageScheme,
+      paintLook: controls.paintLook,
       RUNTIME_ONLY: controls.RUNTIME_ONLY,
       TOKENS: bevel.TOKENS,
       SHADOW: bevel.SHADOW,
@@ -149,7 +150,7 @@ class Presence {
     this.roster = next;
     if (!(await this.supported())) return;
     if (same) {
-      set(this.root, 'color-scheme', ui.pageScheme());
+      ui.paintLook(this.root);
       return;
     }
     await this.render();
@@ -174,7 +175,8 @@ class Presence {
     // total either way: a recipient the host would not name gets people: [] and
     // everyone in `anonymous`, so this sum is the same participant count in both
     // directions.
-    if (people.length + anonymous <= 1) {
+    // The page menu draws who is here inside its own dock, so the corner stays empty.
+    if (people.length + anonymous <= 1 || window.clay?.menu) {
       this.hide();
       return;
     }
@@ -182,7 +184,6 @@ class Presence {
     if (!this.build()) return;
 
     this.hideTip();
-    set(this.root, 'color-scheme', ui.pageScheme());
     this.stack.textContent = '';
     for (const person of people) {
       this.stack.appendChild(this.avatar(person));
@@ -199,6 +200,7 @@ class Presence {
       set(this.count, 'display', 'none');
     }
     set(this.root, 'display', 'flex');
+    ui.paintLook(this.root);
   }
 
   hide() {
@@ -307,6 +309,7 @@ class Presence {
 }
 
 const presence = new Presence();
+if (typeof document !== 'undefined') document.addEventListener('clay:menu-ready', () => presence.render());
 
 export { presence, Presence };
 export default presence;

package/src/sync/saved-stream.js

@@ -177,6 +177,10 @@ export function createSavedStream({ documentURL, servedEtag = null, represented
   let presenceStore = null;
   let presenceLease = null;
   let presenceLoad = null;
+  // The corner the roster is drawn in, downloaded beside the store on the same first
+  // frame. It is the chrome alone: the block marks an editor draws are edit-only and
+  // a reader never imports them.
+  let presenceRoster = null;
   const presenceQueue = [];
 
   const active = (gen) => !stopped && gen === generation;
@@ -188,29 +192,37 @@ export function createSavedStream({ documentURL, servedEtag = null, represented
 
   function leavePresence() {
     presenceQueue.length = 0;
+    // A roster a newer owner has taken over is that owner's to clear: giving this
+    // lease back must not remove the squares it is drawing.
+    if (presenceRoster && (!presenceLease || presenceLease.active)) presenceRoster.clear();
     if (presenceLease) {
       presenceLease.detach();
       presenceLease = null;
     }
     presenceStore = null;
+    presenceRoster = null;
     presenceLoad = null;
   }
 
   // A frame that lands while the download is in flight waits in order, and a
   // download that failed keeps the queue so the next frame asks again.
-  function takePresence(data) {
-    if (presenceStore) {
-      presenceStore.receive(data);
+  function takePresence(data, gen) {
+    if (presenceRoster) {
+      presenceRoster.update(data);
       return;
     }
     presenceQueue.push(data);
     if (presenceLoad) return;
-    presenceLoad = import('./presence-store.js')
-      .then(({ presence }) => {
-        presenceStore = presence;
-        presenceLease = presence.attachTransport({ send: () => Promise.resolve(false) });
-        for (const frame of presenceQueue.splice(0)) presence.receive(frame);
-        return presence;
+    presenceLoad = Promise.all([import('./presence-store.js'), import('./presence.js')])
+      .then(([storeMod, rosterMod]) => {
+        // The download outlived the reader that asked for it: a stop (or a newer start)
+        // took the stream away, so this load attaches no lease and draws no roster.
+        if (!active(gen)) return null;
+        presenceStore = storeMod.presence;
+        presenceRoster = rosterMod.presence;
+        presenceLease = presenceStore.attachTransport({ send: () => Promise.resolve(false) });
+        for (const frame of presenceQueue.splice(0)) presenceRoster.update(frame);
+        return presenceRoster;
       })
       .catch(() => {
         presenceLoad = null;
@@ -336,10 +348,12 @@ export function createSavedStream({ documentURL, servedEtag = null, represented
   }
 
   function acceptBody(html, reason, responseEtag) {
-    // The response's own stamp names the body when the host sends one, otherwise the
-    // served root attribute does. A discovery stamp is never attached, and identical
-    // bytes already named by a stamp keep that name.
-    const bodyStamp = stampOf(responseEtag) ?? readBodyStamp(html);
+    // The served root attribute names the body; the response's own stamp only when the
+    // body carries none, since a server or proxy may add an HTTP ETag of its own. A weak
+    // ETag is never a document stamp (spec §4): it is how Express names any response. A
+    // discovery stamp is never attached, and identical bytes already named by a stamp
+    // keep that name.
+    const bodyStamp = readBodyStamp(html) ?? (/^W\//.test(responseEtag ?? '') ? null : stampOf(responseEtag));
     const etag = bodyStamp ?? (html === receipt.bytes ? receipt.etag : null);
     const seq = reason.kind === 'startup' ? receipt.seq : reason.seq ?? receipt.seq;
     if (!accept({ bytes: html, etag, seq })) return;
@@ -514,7 +528,7 @@ export function createSavedStream({ documentURL, servedEtag = null, represented
           } catch {
             return;
           }
-          if (data && typeof data === 'object' && !Array.isArray(data)) takePresence(data);
+          if (data && typeof data === 'object' && !Array.isArray(data)) takePresence(data, gen);
         });
         return handle;
       });

package/src/ui/bevel-controls.js

@@ -335,3 +335,4 @@ export function setShown(el, shown, display = 'block') {
 }
 
 export { pageScheme, protectIcon };
+export { paintLook, uiLook } from './page-colour.js';

package/src/ui/bevel-dialog.js

@@ -2,7 +2,7 @@
 // close. It holds no behaviour. The modal and the crop adapter own focus, Escape,
 // backdrop clicks and settling, so each keeps the rules it already had.
 import { style, set } from "../lib/hostile-css.js";
-import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon, restyleBox } from "./bevel-controls.js";
+import { bevelBox, bevelSurface, bevelText, uiLook, protectIcon, restyleBox } from "./bevel-controls.js";
 import { TOKENS, FONT_SANS, RULES, GLYPHS } from "./bevel.js";
 import { themed, tokenRulesFor, partRules, markParts } from "./theme-parts.js";
 
@@ -103,7 +103,10 @@ export function bevelDialog({ zIndex = "100", width = "600px", closable = false,
   root.setAttribute("data-clay-modal", "");
   if (on) root.setAttribute("data-clay-ui", surface);
   root.setAttribute("aria-hidden", "true");
-  set(root, "color-scheme", on ? theme.scheme : pageScheme());
+  const known = on && theme.scheme !== "light dark";
+  const panelWidth = Math.min(parseFloat(width) || 600, innerWidth - 32);
+  const area = { x: (innerWidth - panelWidth) / 2, y: Math.min(96, innerHeight * 0.1), width: panelWidth, height: 160 };
+  set(root, "color-scheme", known ? theme.scheme : uiLook(area).scheme);
 
   const overlay = bevelBox("div", [
     "position:fixed", "inset:0", `z-index:${zIndex}`, "overflow:auto",