@displayxr/inline3d 1.47.6 → 1.48.0

package/js/inline3d-call.js

@@ -85,7 +85,7 @@
 
 import { sharedInline3D } from './inline3d.js';
 import * as wire from './call/wire.js';
-import { DEFAULT_MAX_PEERS, HINT_MAX_HZ, newPeerId, parseInviteLink, normalizeHint, normalizeState, rateGate, createConvergence, eyeOutputSize, backoffMs } from './call/wire.js';
+import { DEFAULT_MAX_PEERS, HINT_MAX_HZ, CONV_MAX_HZ, CONV_RECV_MAX_HZ, CONV_HEARTBEAT_MS, CONV_FRESH_MS, APP_MAX_PER_SEC, APP_RECV_MAX_PER_SEC, newPeerId, parseInviteLink, normalizeHint, normalizeState, normalizeConv, makeConv, makeAppMessage, normalizeApp, windowGate, selectedPath, sanitizeName, rateGate, createConvergence, eyeOutputSize, backoffMs } from './call/wire.js';
 import { MeshTransport as MeshTransportImpl, clampMaxPeers as clampMaxPeersImpl } from './call/transport.js';
 import { openMic } from './camera/capture.js';
 import { openCamera, addCameraView, isStereoCamera } from './inline3d-camera.js';
@@ -98,7 +98,8 @@ import * as signalingMod from './call/signaling.js';
 import { injectCallStyle, ICONS, el, show, CALL_ACCENTS as CALL_ACCENTS_IMPL, createStrings, CALL_STRINGS } from './call/ui.js';
 import { normalizeCallOptions as normalizeOptions } from './call/options.js';
 import { defineCallElement } from './call/element.js';
-import { lumaFromRgba, createDisparityTrack, createFocusTracker, downsampleLuma } from './call/disparity.js';
+import { createDisparityTrack, createFocusTracker } from './call/disparity.js';
+import { grabLumaFrame, createConvergenceMeter } from './camera/conv-meter.js';
 import { dxrSignaling } from './call/signaling.js';
 
 // ── the public surface (RFC 0003 §2) ────────────────────────────────────────────────────────
@@ -119,8 +120,6 @@ const AUTO_CONV_INTERVAL_MS = 200;
 const AUTO_CONV_EYE_WIDTH = 240;
 // While a depth cursor hovers a stereo tile, its source is copied this often (the cursor measures it).
 const CURSOR_SAMPLE_MS = 66;
-// WebCodecs pixel formats whose plane 0 is luma (Y): read directly, no colour conversion.
-const Y_PLANE_FORMATS = new Set(['I420', 'I420A', 'I422', 'I444', 'NV12']);
 /**
  * Put a 3D video call in `container`. Resolves once the camera is open and (with `ui:true`) the
  * lobby is showing; with `ui:false` (or `autoJoin:true`) once the call is joined.
@@ -177,9 +176,25 @@ class Call {
     this.depth = 0;
     this.speakerId = null;
     this.transport = null;
+    // Headless hooks (docs/call.md § Headless mode): this side's name, the signalling state, the
+    // self view switch, the audio output every tile plays to, and the app channel's per-peer gates.
+    this.name = o.name;
+    this.signalState = null;
+    this.selfViewOn = o.selfView;
+    this.sinkId = null;
+    this._appOut = new Map();
+    this._appIn = new Map();
     this._raf = 0;
     this._statsTimer = 0;
     this._hintGate = rateGate(HINT_MAX_HZ);
+    // Sender-side auto-convergence (docs/call.md): this side measures its OWN raw camera frames
+    // (before encoding) and broadcasts `conv`, so every receiver applies one good measurement
+    // instead of each measuring a compressed, possibly downscaled copy. The timer paces it.
+    this._convGate = rateGate(CONV_MAX_HZ, 20); // paced by a 5 Hz timer: 20 ms of slack for its jitter (rateGate)
+    this._convMeter = createConvergenceMeter({ intervalMs: 0, grab: o._convGrab });
+    this._convOut = { frac: null, sentAt: 0, msg: null };
+    this._convGen = 0;
+    this._convTimer = 0;
     // mono→3D (call/lift.js): the option, whether it is on right now (setMono3D), the resolved
     // lift (null until resolved), the pool of lifted streams, and the web-provider frame watch.
     this.mono3D = o.mono3D;
@@ -256,7 +271,7 @@ class Call {
     let camError = null;
     const given = isStereoCamera(want) ? want : null;
     try {
-      cam = given || (await openCamera({ prefer: want, format: format || this.o.format, calibration: this.o.calibration, rectify: this.o.rectify || undefined, log }));
+      cam = given || (await openCamera({ prefer: want, format: format || this.o.format, calibration: this.o.calibration, rectify: this.o.rectify || undefined, exclude: this.o.cameraExclude, log }));
       if (given && given.state !== 'live') throw Object.assign(new Error('the camera given is not live'), { code: 'no-camera', skipped: [] });
     } catch (err) {
       camError = err;
@@ -330,6 +345,8 @@ class Call {
       baselineMm: l.calibration?.baselineMm,
       hfovDeg: l.calibration?.hfovDeg,
       rectified: !!l.calibration?.rectified,
+      conv: this.o.sendConvergence && l.format === 'sbs',
+      name: this.name,
     });
   }
 
@@ -382,6 +399,7 @@ class Call {
         onGhost: (gid, on) => this._onGhost(gid, on),
         onSignalingState: (st, err) => {
           this.log('signaling', { state: st });
+          this._setSignal(st, err);
           if (st === 'closed' && err) this.error(err.code || 'signaling-closed', err.message, err);
         },
       });
@@ -397,6 +415,7 @@ class Call {
       throw err;
     }
     this._setState('in-call');
+    this._setSignal('connected');
     // The grid is sized so the whole call block fits ONE viewport, but only if it starts at the
     // top: a tile below the fold is withheld from the weave (browser#167), so its layer goes
     // live late. Bring the block into view once, on join.
@@ -409,6 +428,7 @@ class Call {
       }
     }
     this._startStats();
+    this._startConvSend();
     this._pagehide = () => this.leave('pagehide');
     globalThis.addEventListener?.('pagehide', this._pagehide);
     this.log('joined', { id: this.id, peers: this.tiles.size });
@@ -492,6 +512,8 @@ class Call {
     if (msg.type === '__open') {
       this.transport.send(id, this.hello());
       this.transport.send(id, this.stateMsg());
+      // A peer that joins mid-call gets the current convergence at once, not at the next heartbeat.
+      if (this._convOut.msg && this._convSending()) this.transport.send(id, this._convOut.msg);
       tile.onChannelOpen();
       return;
     }
@@ -501,6 +523,167 @@ class Call {
     if (hint) return tile.setHint(hint);
     const st = normalizeState(msg);
     if (st) return tile.setRemoteState(st);
+    const cv = normalizeConv(msg);
+    if (cv) return tile.setConv(cv);
+    // An app message (handle.send / broadcast). The ONLY type that reaches the page: everything
+    // above is the SDK's own and never surfaces. Rate-capped per peer on receipt too.
+    const app = normalizeApp(msg);
+    if (app) {
+      let gate = this._appIn.get(id);
+      if (!gate) this._appIn.set(id, (gate = windowGate(APP_RECV_MAX_PER_SEC)));
+      if (gate(performance.now())) this.emit('message', { from: id, data: app.data });
+    }
+  }
+
+  /** The signalling connection's state for `handle.signal` + the `signal` event (transitions only). */
+  _setSignal(st, err) {
+    if (st === this.signalState) return;
+    this.signalState = st;
+    const ev = { state: st };
+    if (err && err.code) ev.code = err.code;
+    this.emit('signal', ev);
+  }
+
+  // ── headless hooks: names, app messages, devices, the self view ─────────────────────────
+
+  setName(n) {
+    this.name = sanitizeName(n);
+    this.transport?.broadcast(this.hello());
+    return this.name;
+  }
+
+  /** One app message to one peer: false when not connected, too big, not serialisable, or over its rate. */
+  sendApp(peerId, data) {
+    if (!this.transport) return false;
+    const m = makeAppMessage(data);
+    if (!m) return false;
+    return this._sendAppTo(peerId, m.json);
+  }
+
+  /** The same message to every peer; true only if every connected peer got it. */
+  broadcastApp(data) {
+    if (!this.transport) return false;
+    const m = makeAppMessage(data);
+    if (!m) return false;
+    let any = false;
+    let all = true;
+    for (const id of this.tiles.keys()) {
+      if (this.transport.peerState?.(id) === null) continue; // a ghost / a peer the mesh does not hold
+      any = true;
+      if (!this._sendAppTo(id, m.json)) all = false;
+    }
+    return any && all;
+  }
+
+  _sendAppTo(id, json) {
+    if (!this.tiles.has(id)) return false;
+    let gate = this._appOut.get(id);
+    if (!gate) this._appOut.set(id, (gate = windowGate(APP_MAX_PER_SEC)));
+    if (!gate(performance.now())) return false;
+    return this.transport.sendRaw ? this.transport.sendRaw(id, json) : this.transport.send(id, JSON.parse(json));
+  }
+
+  /** Switch the microphone to `deviceId` (null = the default). False (old mic kept) when it cannot open. */
+  async setMic(deviceId) {
+    const track = await openMic({ deviceId: deviceId || undefined, log: (t, x) => this.log(t, x) });
+    if (!track) return false;
+    const l = this.local;
+    if (!l) {
+      track.stop();
+      return false;
+    }
+    const old = l.audioTrack;
+    track.enabled = !this.muted;
+    l.audioTrack = track;
+    l.stream = new MediaStream([l.videoTrack, track].filter(Boolean));
+    if (this.transport) await this.transport.replaceTrack('audio', track, l.stream);
+    if (old && old !== track) old.stop();
+    this.log('mic', { deviceId: deviceId || null });
+    return true;
+  }
+
+  /** Every participant's audio to `sinkId` (also tiles that join later). True if every tile took it. */
+  async setAudioOutput(sinkId) {
+    this.sinkId = sinkId || '';
+    const results = await Promise.all([...this.tiles.values()].map((t) => t.applySink()));
+    return results.every(Boolean);
+  }
+
+  setSelfView(on) {
+    const want = on === undefined ? !this.selfViewOn : !!on;
+    if (want === this.selfViewOn) return want;
+    this.selfViewOn = want;
+    if (want) {
+      if (!this.self) this.self = new SelfTile(this, this.ui.selfSlot);
+      show(this.ui.selfSlot, true);
+      show(this.self.el, true);
+      this.self.update();
+    } else if (this.self) {
+      // Remove the LAYER first (never display:none over a live registration), then hide the box.
+      this.self.detach();
+      show(this.self.el, false);
+    }
+    this.log('self-view', { on: want });
+    return want;
+  }
+
+  // ── sender-side auto-convergence ─────────────────────────────────────────────────────────
+
+  _startConvSend() {
+    this._stopConvSend();
+    this._convTimer = setInterval(() => this._tickConv(), AUTO_CONV_INTERVAL_MS);
+  }
+
+  _stopConvSend() {
+    clearInterval(this._convTimer);
+    this._convTimer = 0;
+  }
+
+  /** Forget the measurement (a new camera, leaving): the next `conv` is a fresh one. */
+  _resetConvSend() {
+    this._convGen++;
+    this._convMeter.reset();
+    this._convOut = { frac: null, sentAt: 0, msg: null };
+  }
+
+  /** Is this side measuring and sending its convergence right now? */
+  _convSending() {
+    const l = this.local;
+    return !!(this.transport && this.o.sendConvergence && l && l.format === 'sbs' && l.videoTrack && !this.camOff && l.video);
+  }
+
+  /**
+   * One sample of this side's raw camera frame (`local.video` plays the camera's own stream: the
+   * pre-encode, unmirrored pair; the self view's mirroring is a paint, never on this video). Runs
+   * whatever the self view does, including `selfView: false`. Broadcasts `conv` when the gate
+   * passes and the value moved by a quarter source pixel, or the heartbeat is due.
+   */
+  _tickConv() {
+    if (!this._convSending() || this._convMeter.busy) return;
+    const v = this.local.video;
+    const gen = this._convGen;
+    this._convMeter
+      .sample(v, performance.now())
+      .then((r) => {
+        if (!r || gen !== this._convGen || !this._convSending()) return;
+        // Gate on the SEND time (what a receiver's own gate sees). A send the gate refuses is not
+        // lost: the value still differs from the last one sent, so the next tick sends it.
+        const now = performance.now();
+        const out = this._convOut;
+        const eyeW = (v.videoWidth || 0) / 2;
+        const minStep = eyeW > 0 ? 0.25 / eyeW : 0;
+        const moved = (r.frac === null) !== (out.frac === null) || (r.frac !== null && Math.abs(r.frac - out.frac) >= minStep);
+        const due = !out.msg || now - out.sentAt >= CONV_HEARTBEAT_MS;
+        if ((!moved && !due) || !this._convGate(now)) return;
+        const msg = makeConv(r.frac, r.ncc);
+        this.transport.broadcast(msg);
+        this._convOut = { frac: r.frac, sentAt: now, msg };
+        if (r.frac !== null && !this._convLogged) {
+          this._convLogged = true;
+          this.log('send-conv', { frac: Math.round(r.frac * 1e4) / 1e4, disparityPx: Math.round(r.d * 10) / 10, method: r.method, via: r.via, ms: Math.round(r.ms) });
+        }
+      })
+      .catch(() => {});
   }
 
   // ── handle ops ─────────────────────────────────────────────────────────────────────────
@@ -541,6 +724,7 @@ class Call {
   async setCamera(idOrStream, { format } = {}) {
     const before = this.local?.format;
     const l = await this._openMedia(idOrStream, format, { keepOnFail: true });
+    this._resetConvSend(); // a new camera: measure afresh, before the hello that announces it
     if (this.transport) {
       await this.transport.replaceTrack('video', l.videoTrack, l.stream);
       await this.transport.setSendFormat(l.format);
@@ -569,6 +753,8 @@ class Call {
     globalThis.removeEventListener?.('pagehide', this._pagehide);
     this.transport?.stop();
     this.transport = null;
+    this._stopConvSend();
+    this._resetConvSend();
     for (const t of this.tiles.values()) t.destroy();
     this.tiles.clear();
     this.liftPool?.releaseAll();
@@ -585,6 +771,9 @@ class Call {
       this.local.audioTrack = null;
     }
     this.self?.detach(); // a rejoin re-attaches it
+    this.signalState = null;
+    this._appOut.clear();
+    this._appIn.clear();
     this._unhookWall();
     this._setState('left');
     this._layout();
@@ -863,6 +1052,7 @@ class Call {
         if (s.type === 'codec') codecs[s.id] = s.mimeType;
       });
       const q = { in: null, out: null };
+      if (withQuality) Object.assign(q, selectedPath(report));
       report.forEach((s) => {
         if (s.type === 'inbound-rtp' && s.kind === 'audio' && typeof s.audioLevel === 'number') tile.level = Math.max(s.audioLevel, (tile.level || 0) * 0.6);
         if (s.type === 'media-source' && s.kind === 'audio' && typeof s.audioLevel === 'number') localLevel = Math.max(localLevel, s.audioLevel);
@@ -893,7 +1083,7 @@ class Call {
           tile._prevOut = { bytes: s.bytesSent, t: s.timestamp };
         }
       });
-      if (withQuality && (q.in || q.out)) {
+      if (withQuality && (q.in || q.out || q.path)) {
         tile.quality = q;
         this.emit('quality', { id, ...q });
       }
@@ -916,6 +1106,7 @@ class Call {
       this._selfSpeaking = speaking;
       this.transport?.broadcast(this.stateMsg());
       this.self?.setSpeaking(speaking);
+      this.emit('speaking', { id: 'self', on: speaking });
     }
   }
 
@@ -962,6 +1153,9 @@ class Call {
     const t = this.t;
     injectCallStyle(c.ownerDocument || document);
     c.classList.add('dxr-call-host');
+    // layout:'none': the footer and self slot step aside too (display:contents), so the page can
+    // place the self tile ([data-dxr-peer="self"]) — style it in place, never move it.
+    c.classList.toggle('dxr-call-host--none', this.o.layout === 'none');
     // theme → CSS custom properties on the host (chrome only: no variable can reach a tile).
     for (const [prop, v] of Object.entries(this.o.cssVars)) c.style.setProperty(prop, v);
     const ui = (this.ui = {});
@@ -979,7 +1173,7 @@ class Call {
       show(ui.bar, false);
     }
     c.append(ui.banner, ui.panel, ui.grid, ui.invite, ui.foot);
-    if (this.o.selfView) this.self = new SelfTile(this, ui.selfSlot);
+    if (this.selfViewOn) this.self = new SelfTile(this, ui.selfSlot);
     else show(ui.selfSlot, false);
     if (this.o.chrome) this._buildBar();
   }
@@ -1203,8 +1397,26 @@ class Call {
       retryCamera: () => call.retryCamera(),
       setMono3D: (on) => call.setMono3D(on),
       leave: () => call.leave('left'),
-      /** A remote participant's tile element (for `layout: 'none'`), or null. */
-      tile: (peerId) => call.tiles.get(peerId)?.el || null,
+      /** A participant's tile element (for `layout: 'none'`), or null; `'self'` is your self view. */
+      tile: (peerId) => (peerId === 'self' ? call.self?.el || null : call.tiles.get(peerId)?.el || null),
+      /** Your display name (sent in `hello`), or null. */
+      get name() {
+        return call.name;
+      },
+      setName: (n) => call.setName(n),
+      send: (peerId, data) => call.sendApp(peerId, data),
+      broadcast: (data) => call.broadcastApp(data),
+      /** The signalling connection: 'connected' | 'reconnecting' | 'closed', null before join / after leave. */
+      get signal() {
+        return call.signalState;
+      },
+      setSelfView: (on) => call.setSelfView(on),
+      setMic: (deviceId) => call.setMic(deviceId),
+      setAudioOutput: (sinkId) => call.setAudioOutput(sinkId),
+      /** What this side sends (camera + microphone), read-only; null before a camera / mic opened. */
+      get localStream() {
+        return call.local ? call.local.stream : null;
+      },
       diagnostics: () => call.diagnostics(),
       on(type, cb) {
         if (typeof cb !== 'function') throw new TypeError(`${TAG} on() takes a function`);
@@ -1247,6 +1459,27 @@ class Call {
 
 // ── paint helpers ──────────────────────────────────────────────────────────────────────────
 
+/**
+ * Observe a tile's stage box (`ResizeObserver`, where there is one): `onBox(w, h)` with its
+ * `clientWidth` / `clientHeight` on every change. Returns the disconnect, or null without one.
+ */
+function observeBox(el, onBox) {
+  if (typeof ResizeObserver !== 'function') return null;
+  const ro = new ResizeObserver(() => onBox(el.clientWidth || 0, el.clientHeight || 0));
+  ro.observe(el);
+  return () => ro.disconnect();
+}
+
+/** The `weave` event payload of a settled `firstWoven` / `rewoven()`. */
+function weaveEvent(id, res) {
+  const ev = { id, state: res.woven ? 'woven' : 'flat', ms: Math.round(res.ms || 0) };
+  if (res.reason) ev.reason = res.reason;
+  return ev;
+}
+
+/** `theme.tileAspect: 'fill'`: a stage box's aspect, clamped to what a woven tile may take. */
+const clampAspect = (w, h) => Math.max(0.3, Math.min(4, w / h));
+
 /** Size a FLAT (never woven) canvas to its box × dpr. Returns false if it has no box yet. */
 function sizeFlat(canvas) {
   const dpr = Math.min(globalThis.devicePixelRatio || 1, 2);
@@ -1304,6 +1537,7 @@ class Tile {
     this.autoCanvas = null;
     this.autoLocked = false;
     this.autoStats = { n: 0, ms: 0, readMs: 0, method: null, via: null };
+    this.autoGrabs = 0; // local copies made: the receiver fallback, or the depth cursor's
     this.autoPending = false;
     // Bumped on every stream change and on destroy(): an async copyTo() that resolves after either
     // belongs to a stream this tile no longer shows, and is dropped (review of #92).
@@ -1312,6 +1546,10 @@ class Tile {
     this.destroyed = false;
     this.conv.depth = call.depth;
     this.hintGate = rateGate(HINT_MAX_HZ);
+    // The sender's own measurement (`conv`, when its hello says `conv: true`): `{ frac, c, at }`,
+    // `at` = when it ARRIVED here. Fresh for CONV_FRESH_MS; after that this side measures again.
+    this.convGate = rateGate(CONV_RECV_MAX_HZ);
+    this.senderConv = null;
     this.layerFails = 0;
     this.forceFlat = false;
     // lifted route (mono→3D): the lift handle once it lands, whether it is showing (live), and a
@@ -1332,13 +1570,20 @@ class Tile {
     this.badge = el('div', { class: 'dxr-call-badge', part: 'badge' });
     this.plate = el('div', { class: 'dxr-call-state', part: 'plate', text: call.t('connecting') });
     this.stage = el('div', { class: 'dxr-call-stage' }, [this.canvas, this.cover, this.badge, this.plate]);
-    this.stage.style.aspectRatio = String(call.o.tileAspect);
+    // 'fill' (theme.tileAspect): no aspect-ratio — the page sizes the stage and the crop follows it.
+    if (call.o.tileAspect !== 'fill') this.stage.style.aspectRatio = String(call.o.tileAspect);
+    /** The stage box `{ w, h }` from the ResizeObserver; null until it first reports (or without one). */
+    this._box = null;
+    this._aspect = null; // 'fill': the stage's own aspect, once measured
+    this._rwP = null; // the rewoven() promise a `weave` event is waiting on
+    this._unobserve = observeBox(this.stage, (w, h) => this._onBox(w, h));
     // `data-dxr-peer` is the documented hook (layout:'none', handle.tile()); `data-peer` is the 1.29 spelling.
     this.el = el('div', { class: 'dxr-call-tile', part: 'tile', 'data-dxr-peer': id, 'data-peer': id }, [this.stage, el('div', { class: 'dxr-call-talk' })]);
     if (!call.o.ui) {
       show(this.badge, false);
     }
     call.ui.grid.appendChild(this.el);
+    if (call.sinkId) this.applySink();
     this._renderBadge();
     /** The depth cursor (`cursor: 'depth'`) once its module has loaded; null otherwise. */
     this.cursor = null;
@@ -1365,9 +1610,38 @@ class Tile {
       muted: this.remote.muted,
       cameraOff: this.remote.cameraOff,
       speaking: this.speaking,
+      name: (this.hello && this.hello.name) || null,
+    });
+  }
+
+  /** The stage box changed: the 'fill' aspect, and a woven tile's `weave` event once it re-joins. */
+  _onBox(w, h) {
+    const prev = this._box;
+    this._box = { w, h };
+    if (w > 0 && h > 0) this._aspect = clampAspect(w, h);
+    if (!prev || !w || !h || (prev.w === w && prev.h === h)) return;
+    const handle = this.handle;
+    if (!handle || !this._fwSettled || typeof handle.rewoven !== 'function') return;
+    const p = handle.rewoven();
+    if (p === this._rwP || !p || typeof p.then !== 'function') return;
+    this._rwP = p;
+    p.then((res) => {
+      if (this._rwP !== p || this.handle !== handle || !res) return;
+      this._rwP = null;
+      this.call.emit('weave', weaveEvent(this.id, res));
     });
   }
 
+  /** Play this participant's audio to the call's output device (`handle.setAudioOutput`). */
+  applySink() {
+    const a = this.audio;
+    if (typeof a.setSinkId !== 'function') return Promise.resolve(false);
+    return a.setSinkId(this.call.sinkId || '').then(
+      () => true,
+      () => false
+    );
+  }
+
   /** Everything else (UNSTABLE): `handle.diagnostics().peers[i]`. */
   diag() {
     return {
@@ -1387,6 +1661,12 @@ class Tile {
         readMs: this.autoStats.n ? this.autoStats.readMs / this.autoStats.n : null,
         method: this.autoStats.method,
         via: this.autoStats.via,
+        // Local copies made (the receiver fallback, or the depth cursor's).
+        samples: this.autoGrabs,
+        // Where the applied disparity comes from: 'sender' (its `conv`, fresh), 'local' (measured
+        // here: an older or silent sender), null (autoConverge off, or nothing measured yet).
+        source: !this.call.o.autoConverge ? null : this._senderFrac(performance.now()) !== null ? 'sender' : this.conv.measuredPx !== null ? 'local' : null,
+        senderFrac: this.senderConv ? this.senderConv.frac : null,
       },
       lift: this.lifted
         ? {
@@ -1423,8 +1703,10 @@ class Tile {
 
   setHello(h) {
     clearTimeout(this.helloTimer);
+    const prevName = this.hello ? this.hello.name || null : null;
     this.hello = h;
     this.conv.hello = h;
+    if ((h.name || null) !== prevName) this.call.emit('name', { id: this.id, name: h.name || null });
     const changed = this.format !== h.format;
     this.format = h.format;
     this.call.log('hello', { peer: this.id, format: h.format, width: h.width, height: h.height, rectified: h.rectified });
@@ -1437,6 +1719,28 @@ class Tile {
     this.conv.subjectZmm = h.subjectZmm;
   }
 
+  /**
+   * A `conv` from the sender (wire.normalizeConv already validated it). Rate-limited here too, so a
+   * chatty or hostile sender cannot drive this tile at frame rate. `d: null` (nothing measured
+   * yet) keeps a previous value alive and is otherwise ignored.
+   */
+  setConv(cv) {
+    const now = performance.now();
+    if (!this.convGate(now)) return;
+    if (cv.d === null) {
+      if (this.senderConv) this.senderConv.at = now;
+      return;
+    }
+    this.senderConv = { frac: cv.d, c: cv.c === undefined ? null : cv.c, at: now };
+  }
+
+  /** The sender's measured disparity as a fraction of its eye width, when fresh and announced; else null. */
+  _senderFrac(now) {
+    const sc = this.senderConv;
+    if (!sc || !this.hello || !this.hello.conv || now - sc.at >= CONV_FRESH_MS) return null;
+    return sc.frac;
+  }
+
   setRemoteState(st) {
     this.remote = st;
     this._renderBadge();
@@ -1448,6 +1752,7 @@ class Tile {
     if (on === this.speaking) return;
     this.speaking = on;
     this.el.classList.toggle('dxr-call-tile--speaking', on);
+    this.call.emit('speaking', { id: this.id, on });
   }
 
   setConn(st) {
@@ -1533,12 +1838,18 @@ class Tile {
     if (!this.convCanvas) this.convCanvas = document.createElement('canvas');
     this._paintConv(); // the first frame exists before the layer does
     show(this.cover, true);
-    const handle = call.wall.addImage(this.canvas, this.convCanvas);
+    // tileCover 'auto': the core's rect cover takes over after the first join, across every later
+    // resize / move (layout: 'none' — the page moves the tiles). No cover machinery here.
+    const handle = call.o.tileCover === 'auto' ? call.wall.addImage(this.canvas, this.convCanvas, { rectCover: 'auto' }) : call.wall.addImage(this.canvas, this.convCanvas);
     this.handle = handle;
+    this._fwSettled = false;
+    this._rwP = null;
     handle.firstWoven?.then((res) => {
       if (this.handle !== handle) return;
+      this._fwSettled = true;
       show(this.cover, false); // a cut, never a fade
       call.log('first-woven', { peer: this.id, woven: res.woven, reason: res.reason, ms: Math.round(res.ms) });
+      call.emit('weave', weaveEvent(this.id, res));
       if (!res.woven && res.reason === 'layer-failed') this._layerFailed();
     });
   }
@@ -1685,6 +1996,9 @@ class Tile {
 
   paint() {
     if (!this.route) return;
+    // Hidden (display:none) or collapsed: nothing to see, so no copy, no measurement. Known from the
+    // ResizeObserver; without one (or before it reports) the tile paints as before.
+    if (this._box && (!this._box.w || !this._box.h)) return;
     if (this.route !== 'woven-sbs') this.cursor?.idle(); // only a woven pair has depth to measure
     if (this.route === 'woven-sbs') this._paintConv();
     else if (this.route === 'lifted') {
@@ -1699,7 +2013,7 @@ class Tile {
     const H = v.videoHeight;
     if (!W || !H || (v.readyState || 0) < 2 || !this.convCanvas) return;
     const eyeW = W / 2;
-    const A = this.call.o.tileAspect;
+    const A = this.call.o.tileAspect === 'fill' ? this._aspect || 16 / 9 : this.call.o.tileAspect;
     const { w: outW, h: outH } = eyeOutputSize(eyeW, H, A);
     const c = this.convCanvas;
     if (c.width !== 2 * outW || c.height !== outH) {
@@ -1707,7 +2021,12 @@ class Tile {
       c.height = outH;
     }
     const hover = !!(this.cursor && this.cursor.hovering);
-    if (this.call.o.autoConverge || hover) this._sampleDisparity(v, W, H, hover);
+    // The sender's measurement, when it sends one (recomputed per paint: a WebRTC resolution change
+    // keeps it right, since it is a fraction of the eye width). Otherwise measure here, as before.
+    const auto = this.call.o.autoConverge;
+    const frac = auto ? this._senderFrac(performance.now()) : null;
+    if (frac !== null) this.conv.measuredPx = frac * eyeW;
+    if (hover || (auto && frac === null)) this._sampleDisparity(v, W, H, hover);
     const shift = this.conv.step(eyeW);
     const g = c.getContext('2d');
     const rects = [];
@@ -1729,61 +2048,20 @@ class Tile {
     // ~15 Hz while a depth cursor hovers: it measures the same copy, under the pointer.
     if (this.autoPending || now - this.autoAt < (hover ? CURSOR_SAMPLE_MS : AUTO_CONV_INTERVAL_MS)) return;
     this.autoAt = now;
-    // Preferred: WebCodecs. `new VideoFrame(video)` + an ASYNC copyTo() of the decoded frame, reading
-    // the luma (Y) plane directly: no synchronous GPU->CPU canvas readback on the paint path (that
-    // readback, not the matching, was ~25 ms of a ~30 ms measurement).
-    if (typeof VideoFrame === 'function') {
-      let frame = null;
-      try {
-        frame = new VideoFrame(v);
-      } catch {
-        frame = null;
-      }
-      if (frame && Y_PLANE_FORMATS.has(frame.format)) {
-        this.autoPending = true;
-        const gen = this.autoGen;
-        const fw = frame.visibleRect ? frame.visibleRect.width : frame.displayWidth;
-        const fh = frame.visibleRect ? frame.visibleRect.height : frame.displayHeight;
-        const buf = new Uint8Array(frame.allocationSize());
-        frame
-          .copyTo(buf)
-          .then((layout) => {
-            if (gen !== this.autoGen) return; // the stream changed or the tile is gone: stale frame
-            const t0 = performance.now();
-            const f = Math.max(1, Math.ceil(fw / 2 / AUTO_CONV_EYE_WIDTH));
-            const ds = downsampleLuma(buf, layout[0].offset, layout[0].stride, fw, fh, f);
-            this._applyMeasurement(ds.img, ds.w, ds.h, ds.w / fw, now, performance.now() - t0, 'videoframe');
-          })
-          .catch(() => {
-            if (gen === this.autoGen) this._applyMeasurement(null, 0, 0, 1, now, 0, 'videoframe');
-          })
-          .finally(() => {
-            frame.close();
-            this.autoPending = false;
-          });
-        return;
-      }
-      if (frame) frame.close();
-    }
-    // Fallback: a small canvas + getImageData (synchronous readback).
-    const s = Math.min(1, AUTO_CONV_EYE_WIDTH / (W / 2));
-    const w = Math.max(2, Math.round((W * s) / 2) * 2);
-    const h = Math.max(2, Math.round(H * s));
+    this.autoPending = true;
+    const gen = this.autoGen;
     if (!this.autoCanvas) this.autoCanvas = document.createElement('canvas');
-    const c = this.autoCanvas;
-    if (c.width !== w || c.height !== h) {
-      c.width = w;
-      c.height = h;
-    }
-    const g = c.getContext('2d', { willReadFrequently: true });
-    let img = null;
-    try {
-      g.drawImage(v, 0, 0, w, h);
-      img = lumaFromRgba(g.getImageData(0, 0, w, h).data, w * h);
-    } catch {
-      img = null; // a frame that cannot be read (tainted, not decoded yet): skip it
-    }
-    this._applyMeasurement(img, w, h, w / W, now, performance.now() - now, 'canvas');
+    // camera/conv-meter.js: WebCodecs Y plane (async copyTo, no canvas readback) when the decoded
+    // frame has one, else a small canvas + getImageData.
+    grabLumaFrame(v, { eyeMax: AUTO_CONV_EYE_WIDTH, scratch: this.autoCanvas })
+      .then((g) => {
+        if (gen !== this.autoGen) return; // the stream changed or the tile is gone: stale frame
+        if (g) this._applyMeasurement(g.img, g.w, g.h, g.scale, now, g.readMs, g.via);
+        else this._applyMeasurement(null, 0, 0, 1, now, 0, this.autoStats.via);
+      })
+      .finally(() => {
+        this.autoPending = false;
+      });
   }
 
   /**
@@ -1793,12 +2071,16 @@ class Tile {
    */
   _applyMeasurement(img, w, h, s, at, readMs, via) {
     if (this.destroyed) return;
+    this.autoGrabs++;
     if (img) this.luma = { img, w, h, scale: s };
     if (!this.call.o.autoConverge) return; // the copy was for the depth cursor only
+    if (this._senderFrac(performance.now()) !== null) return; // the sender's measurement wins; the copy was for the cursor
     const t = performance.now();
     const m = img ? this.autoFocus.measure(img, w, h, at) : null;
     const d = this.autoTrack.push(m ? m.d / s : null);
-    this.conv.measuredPx = d;
+    // A failed measurement holds: the track holds its last value, and with an empty track (the
+    // sender's `conv` just went stale) the sender's last value stays until this side locks.
+    if (d !== null) this.conv.measuredPx = d;
     this.autoStats.n++;
     this.autoStats.readMs += readMs;
     this.autoStats.ms += readMs + (performance.now() - t);
@@ -1820,6 +2102,7 @@ class Tile {
 
   _resetAutoConverge() {
     this.autoGen++;
+    this.senderConv = null;
     this.luma = null;
     this.autoTrack.reset();
     this.autoFocus.reset();
@@ -1837,6 +2120,8 @@ class Tile {
     clearTimeout(this.leaveTimer);
     clearTimeout(this.liftTimer);
     this._unregister();
+    this._unobserve?.();
+    this._unobserve = null;
     this.video.srcObject = null;
     this.audio.srcObject = null;
     this.el.remove();
@@ -1859,9 +2144,13 @@ class SelfTile {
     this.badge = el('div', { class: 'dxr-call-badge', part: 'badge' });
     this.plate = el('div', { class: 'dxr-call-state dxr-call-hidden', part: 'plate' });
     this.stage = el('div', { class: 'dxr-call-stage' }, [this.canvas, this.badge, this.plate]);
-    this.stage.style.aspectRatio = String(call.o.tileAspect);
-    this.el = el('div', { class: 'dxr-call-tile dxr-call-tile--self', part: 'tile' }, [this.stage, el('div', { class: 'dxr-call-talk' })]);
+    if (call.o.tileAspect !== 'fill') this.stage.style.aspectRatio = String(call.o.tileAspect);
+    // `data-dxr-peer="self"`: handle.tile('self'), and the page's CSS under layout: 'none'.
+    this.el = el('div', { class: 'dxr-call-tile dxr-call-tile--self', part: 'tile', 'data-dxr-peer': 'self' }, [this.stage, el('div', { class: 'dxr-call-talk' })]);
     slot.appendChild(this.el);
+    this._box = null;
+    this._rwP = null;
+    this._unobserve = observeBox(this.stage, (w, h) => this._onBox(w, h));
     this.view = null; // the CameraView over the current camera
     this.cam = null;
   }
@@ -1884,7 +2173,7 @@ class SelfTile {
     const l = this.call.local;
     const cam = l && l.videoTrack ? l.cam : null;
     const wall = this.call.woven ? this.call.wall : { supported: false };
-    if (!cam || cam.state !== 'live') {
+    if (!cam || cam.state !== 'live' || !this.call.selfViewOn) {
       this.detach();
       return this._badge();
     }
@@ -1899,16 +2188,48 @@ class SelfTile {
         autoConverge: !!this.call.o.autoConverge, // the call option (default on) governs the self view too
         cursor: this.call.o.cursor || undefined, // and so does `cursor: 'depth'`
         aspect: this.call.o.tileAspect,
+        ...(this.call.o.tileCover === 'auto' ? { rectCover: 'auto' } : {}),
         onRouteChange: (route, st) => {
           if (this.cam !== cam) return; // a view this tile already replaced
           this.call.log('self-route', { route, woven: st.woven, reason: st.reason });
           this._badge();
+          this._weave(st);
         },
       });
     }
     this._badge();
   }
 
+  /**
+   * The self view's `weave` event (`id: 'self'`): its tile's `firstWoven` settled (woven or not),
+   * or the view dropped flat because the wall said the tile will not weave.
+   */
+  _weave(st) {
+    const fw = st.firstWoven;
+    let ev = null;
+    if (fw && typeof fw === 'object') ev = weaveEvent('self', fw);
+    else if (st.route !== 'woven-sbs' && st.reason) ev = { id: 'self', state: 'flat', reason: st.reason, ms: 0 };
+    if (ev) this.call.emit('weave', ev);
+  }
+
+  /** The self stage resized: once woven, the `weave` event of its re-join. */
+  _onBox(w, h) {
+    const prev = this._box;
+    this._box = { w, h };
+    if (!prev || !w || !h || (prev.w === w && prev.h === h)) return;
+    const handle = this.view && this.view.woven ? this.view.handle : null;
+    const fw = this.view ? this.view.weaveState().firstWoven : null;
+    if (!handle || !fw || typeof fw !== 'object' || typeof handle.rewoven !== 'function') return;
+    const p = handle.rewoven();
+    if (p === this._rwP || !p || typeof p.then !== 'function') return;
+    this._rwP = p;
+    p.then((res) => {
+      if (this._rwP !== p || !this.view || this.view.handle !== handle || !res) return;
+      this._rwP = null;
+      this.call.emit('weave', weaveEvent('self', res));
+    });
+  }
+
   /** 3D only while the view is on the woven route — a layer the wall failed has already taken it flat. */
   _badge() {
     const t = this.call.t;