@1agh/maude 1.3.0 → 1.4.0

package/apps/studio/client/app.jsx

@@ -32,7 +32,7 @@ import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 // same "pull only pure logic into the client bundle" shape as the imports
 // above (a type-only SyncStatusSnapshot import that Bun erases).
 import { syncPresentation } from '../sync/presentation.ts';
-import { canvasUrl } from './canvas-url.js';
+import { canvasTokenRefreshDelay, canvasUrl, setLiveCanvasToken } from './canvas-url.js';
 import { applyEditRequest } from './apply-edit-request.ts';
 import { createIndexLoader } from './index-loader.ts';
 import {
@@ -3245,6 +3245,7 @@ function Sidebar({
               <button
                 type="button"
                 className={'st-tree-sec-hd' + (isRootOver ? ' is-drop-target' : '')}
+                data-testid={`tree-section-${g.label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
                 onClick={() => onToggleSection(g.label, defaultOpen)}
                 aria-expanded={sectionOpen}
                 aria-dropeffect={canDropOnRoot ? 'move' : undefined}
@@ -4684,6 +4685,28 @@ function Viewport({
   useEffect(() => {
     if (previewPath) previewRef.current?.focus();
   }, [previewPath]);
+  // An open canvas keeps the URL it was opened with. The capability in it is
+  // re-minted on a timer (canvas-url.js); letting that change the `src` of a
+  // live iframe would reload every open canvas every few minutes. The fresh
+  // capability reaches an open canvas by message instead, and a frame that is
+  // (re)created — a new tab, a Retry, a config change — is built with it.
+  // Only while the frame is open: a closed tab reopened later is a new frame
+  // and must not inherit a capability that may have expired meanwhile.
+  const srcCache = useRef(new Map());
+  const openPaths = new Set(tabs.map((t) => t.path));
+  for (const [key, entry] of srcCache.current) {
+    if (!openPaths.has(entry.path)) srcCache.current.delete(key);
+  }
+  const stableSrc = (path) => {
+    const bare = canvasUrl(path, { ...cfg, canvasToken: undefined });
+    const key = `${path}#${canvasReloadNonce}|${bare}`;
+    let entry = srcCache.current.get(key);
+    if (!entry) {
+      entry = { path, src: canvasUrl(path, cfg) };
+      srcCache.current.set(key, entry);
+    }
+    return entry.src;
+  };
   // One observable word for "what is the canvas pane actually doing" — the
   // top-frame signal the #115 E2E scenario waits on, and the only place these
   // three states are named together. `ready` is `dgn:'loaded'`-backed, so it
@@ -4776,7 +4799,7 @@ function Viewport({
             // path exactly as before.
             key={`${t.path}#${canvasReloadNonce}`}
             ref={(el) => registerIframe(t.path, el)}
-            src={canvasUrl(t.path, cfg)}
+            src={stableSrc(t.path)}
             className={t.path === activePath ? 'active' : ''}
             data-path={t.path}
             data-testid={t.path === activePath ? 'canvas-frame' : undefined}
@@ -5353,6 +5376,7 @@ function CommentsPanel({
             type="button"
             className={'st-cm-filter' + (filter === 'all' ? ' is-active' : '')}
             role="tab"
+            data-testid="comment-filter-all"
             aria-selected={filter === 'all'}
             onClick={() => setFilter('all')}
           >
@@ -5362,6 +5386,7 @@ function CommentsPanel({
             type="button"
             className={'st-cm-filter' + (filter === 'open' ? ' is-active' : '')}
             role="tab"
+            data-testid="comment-filter-open"
             aria-selected={filter === 'open'}
             onClick={() => setFilter('open')}
           >
@@ -5371,6 +5396,7 @@ function CommentsPanel({
             type="button"
             className={'st-cm-filter' + (filter === 'resolved' ? ' is-active' : '')}
             role="tab"
+            data-testid="comment-filter-resolved"
             aria-selected={filter === 'resolved'}
             onClick={() => setFilter('resolved')}
           >
@@ -5402,6 +5428,7 @@ function CommentsPanel({
               {g.comments.map((c) => (
                 <div
                   key={c.id}
+                  data-testid={`comment-item-${c.id}`}
                   className={
                     'st-comment' +
                     (c.status === 'resolved' ? ' is-resolved' : '') +
@@ -7054,6 +7081,7 @@ function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onReplaceMedia, onUndoR
           <button
             type="button"
             className="st-cp-sechd"
+            data-testid={`inspector-section-${name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
             aria-expanded={!!open[name]}
             onClick={() => setOpen((o) => ({ ...o, [name]: !o[name] }))}
           >
@@ -9578,8 +9606,10 @@ function InspectorPanel({
   };
   // An annotation-image has no element tabs; force Photo. Otherwise honor the
   // requested tab, but drop off a stale 'photo' tab when the new selection isn't
-  // photo-eligible (so switching from a photo to a normal element lands sanely).
-  const effTab = photoOnly ? 'photo' : tab === 'photo' && !photoTarget ? 'inspect' : tab;
+  // photo-eligible — onto CSS, the editing tab a fresh selection opens on (Stage
+  // C). Landing on read-only Inspect meant that after touching a sticker, the
+  // next element you clicked showed facts instead of the controls to change it.
+  const effTab = photoOnly ? 'photo' : tab === 'photo' && !photoTarget ? 'css' : tab;
   const tabBtn = (id, label, icon) => (
     <button
       type="button"
@@ -10806,6 +10836,71 @@ function App() {
   const wsRef = useRef(null);
   const iframesRef = useRef(new Map());
 
+  // THE CANVAS CAPABILITY OUTLIVES NO TAB (cloud only). It expires 15 minutes
+  // after the proxy minted it (render-token.mjs) and cannot be revoked, so it
+  // stays short — which left every cloud tab open longer than that with
+  // canvases that stopped updating: a teammate's edit re-imports the canvas
+  // module, and the canvas origin answered 401. Re-mint it well inside the
+  // lifetime (every `/_config` answer carries a fresh one), hand it to each
+  // open canvas, and let new frames be built with it. On waking a tab that
+  // slept past the cadence, do it at once. Desktops have no capability and
+  // never start the timer.
+  useEffect(() => {
+    if (!cfg?.canvasToken) return undefined;
+    let stopped = false;
+    let timer = null;
+    let dueAt = 0;
+    const schedule = (token) => {
+      clearTimeout(timer);
+      const delay = canvasTokenRefreshDelay(token);
+      dueAt = Date.now() + delay;
+      timer = setTimeout(refresh, delay);
+    };
+    async function refresh() {
+      let token = null;
+      try {
+        const res = await fetch('/_config', { cache: 'no-store', credentials: 'same-origin' });
+        if (res.ok) token = (await res.json())?.canvasToken;
+      } catch {
+        /* retried below; the current capability may still be valid */
+      }
+      if (stopped) return;
+      if (typeof token !== 'string' || !token) {
+        clearTimeout(timer);
+        dueAt = Date.now() + 30_000;
+        timer = setTimeout(refresh, 30_000);
+        return;
+      }
+      setLiveCanvasToken(token);
+      // To the canvas origin only, never '*': a frame the canvas content
+      // navigated elsewhere must not be handed the capability.
+      let target = null;
+      try {
+        target = new URL(cfg.canvasOrigin, location.href).origin;
+      } catch {}
+      if (target) {
+        for (const el of iframesRef.current.values()) {
+          try {
+            el.contentWindow?.postMessage({ dgn: 'canvas-cap', t: token }, target);
+          } catch {}
+        }
+      }
+      schedule(token);
+    }
+    schedule(cfg.canvasToken);
+    // A background tab's timers are throttled; one woken past its due time
+    // re-mints at once rather than on the throttled tick.
+    const onVisible = () => {
+      if (document.visibilityState === 'visible' && Date.now() >= dueAt) refresh();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [cfg?.canvasToken, cfg?.canvasOrigin]);
+
   // Phase 5.1 — postMessage bridge from menubar dropdowns to the canvas iframe.
   // The canvas-shell listens for these `dgn:*` messages and dispatches into the
   // matching local provider (annotations visibility / both selection stores /

package/apps/studio/client/canvas-url.js

@@ -9,6 +9,43 @@
 // default DS's tokens — whose ladder is scoped to a different `.<rootClass>`
 // subtree — so every `var(--*)` went undefined and the canvas rendered white.
 
+// THE CANVAS CAPABILITY EXPIRES (render-token.mjs: 15 minutes) and cannot be
+// revoked, so it is short on purpose. A tab open longer than that must carry a
+// fresh one or its canvases stop loading and stop updating — every module
+// re-import after a teammate's edit answers 401. The shell re-mints it on a
+// timer (`refreshCanvasToken` in app.jsx) and records it here; a URL built
+// after that carries the fresh capability. `null` until the first refresh:
+// the one in `/_config` is then current.
+let liveCanvasToken = null;
+export function setLiveCanvasToken(token) {
+  liveCanvasToken = typeof token === 'string' && token ? token : null;
+}
+export function currentCanvasToken(cfg) {
+  return cfg?.canvasToken ? (liveCanvasToken ?? cfg.canvasToken) : null;
+}
+
+/**
+ * When to re-mint a capability: at 60% of what is left of it, read off the
+ * token's own expiry claim (`e`, ms — render-token.mjs), so the cadence
+ * follows the hub's lifetime instead of a copy of it. Never sooner than 30 s
+ * (a skewed clock cannot turn this into a busy loop) and never later than
+ * 10 minutes; an unreadable token gets the ceiling.
+ */
+export function canvasTokenRefreshDelay(token, now = Date.now()) {
+  const MIN = 30_000;
+  const MAX = 10 * 60_000;
+  try {
+    const body = String(token).slice(0, String(token).lastIndexOf('.'));
+    const b64 = body.replace(/-/g, '+').replace(/_/g, '/');
+    const claims = JSON.parse(atob(b64 + '==='.slice((b64.length + 3) % 4)));
+    const left = Number(claims?.e) - now;
+    if (!Number.isFinite(left)) return MAX;
+    return Math.min(MAX, Math.max(MIN, Math.floor(left * 0.6)));
+  } catch {
+    return MAX;
+  }
+}
+
 export function urlOf(p) {
   return '/' + p.split('/').map(encodeURIComponent).join('/');
 }
@@ -47,7 +84,8 @@ export function canvasUrl(p, cfg, opts) {
   // origin: a cookie scoped widely enough to cover it would be readable by the
   // untrusted canvas content itself, which is the one thing the DDR-054 split
   // exists to prevent — so the capability lives in the URL instead.
-  if (cfg?.canvasToken) params.set('t', cfg.canvasToken);
+  const token = currentCanvasToken(cfg);
+  if (token) params.set('t', token);
   const ds0 = cfg?.designSystems?.[0];
   // Specimen detection: anything under `system/<ds>/preview/` belongs to that
   // specific DS, so it must render with *that* DS's tokens — not always the

package/apps/studio/client/panels/TimelinePanel.jsx

@@ -137,6 +137,24 @@ function fmtTime(frame, fps) {
   return `${whole}.${String(cs).padStart(2, '0')}s`;
 }
 
+/**
+ * Drag state its own release handler reads synchronously. The releases used
+ * to commit from INSIDE a state updater (`setX((d) => { commit(d); … })`), and
+ * React is free to run an updater more than once — StrictMode does it on
+ * purpose, and a render replayed against a concurrent update may too — so one
+ * drag could write its clip twice. Updaters passed to `set` run once, here,
+ * against the live value; the release commits outside any updater.
+ */
+function useLiveState(initial) {
+  const [state, setState] = useState(initial);
+  const live = useRef(initial);
+  const set = useCallback((next) => {
+    live.current = typeof next === 'function' ? next(live.current) : next;
+    setState(live.current);
+  }, []);
+  return [state, set, live];
+}
+
 // The frame axis starts AFTER the fixed label gutter.
 const LABEL_GUTTER = 96;
 // Padding the .tl-scroll container puts around the tracks (see 3-shell-maude.css).
@@ -353,10 +371,10 @@ export default function TimelinePanel({
 
   // -------------------------------------------------------------------------
   // Drag machines (retime / move) — px-per-frame based.
-  const [retimeDrag, setRetimeDrag] = useState(null);
-  const [moveDrag, setMoveDrag] = useState(null);
+  const [retimeDrag, setRetimeDrag, retimeLive] = useLiveState(null);
+  const [moveDrag, setMoveDrag, moveLive] = useLiveState(null);
   // Task 6 — magnetic storyline reorder drag: { index, slot, targetSlot, dx, pxf }.
-  const [reorderDrag, setReorderDrag] = useState(null);
+  const [reorderDrag, setReorderDrag, reorderLive] = useLiveState(null);
   // Debate verdict (feedback): a momentary accent rule at the frame a drag just
   // snapped to — magnetism is otherwise invisible. { frame } | null.
   const [snapFlash, setSnapFlash] = useState(null);
@@ -374,7 +392,7 @@ export default function TimelinePanel({
   const [commentMode, setCommentMode] = useState(false);
   // Dogfood (2026-07-30) — vertical layer reorder: dragging an overlay row's
   // lane chip up/down re-stacks the standalone clips (z-order = doc order).
-  const [layerDrag, setLayerDrag] = useState(null);
+  const [layerDrag, setLayerDrag, layerLive] = useLiveState(null);
   // Right-click clip context menu: { index, x, y }.
   const [ctxMenu, setCtxMenu] = useState(null);
   // Task 23 — the open comment-thread popover: { id, x, y } | null.
@@ -384,7 +402,7 @@ export default function TimelinePanel({
   // a seam chip click.
   const [inspector, setInspector] = useState(null);
   // Task 11 — left-edge in-point trim drag: { index, ref, startX, pxf, delta }.
-  const [trimInDrag, setTrimInDrag] = useState(null);
+  const [trimInDrag, setTrimInDrag, trimInLive] = useLiveState(null);
   // True after a body-drag actually moved — suppresses the click-to-select.
   const movedRef = useRef(false);
   // Drag the top edge to resize the panel — pointer-capture + window listeners
@@ -508,10 +526,9 @@ export default function TimelinePanel({
       setRetimeDrag((d) => (d ? { ...d, curDur, atClamp } : d));
     };
     const up = () => {
-      setRetimeDrag((d) => {
-        if (d && d.curDur !== d.startDur) onRetime?.(d.ref ?? d.index, { durationInFrames: d.curDur });
-        return null;
-      });
+      const d = retimeLive.current;
+      setRetimeDrag(null);
+      if (d && d.curDur !== d.startDur) onRetime?.(d.ref ?? d.index, { durationInFrames: d.curDur });
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -537,25 +554,23 @@ export default function TimelinePanel({
       setMoveDrag((d) => (d ? { ...d, curFrom, overStory } : d));
     };
     const up = (e) => {
-      setMoveDrag((d) => {
-        if (d) {
-          // Dropping the clip ON the storyline lane moves it between layers
-          // (the layers model); otherwise commit the horizontal from-move.
-          const story = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
-          if (
-            story &&
-            onClipVerb &&
-            e.clientY >= story.top &&
-            e.clientY <= story.bottom &&
-            movedRef.current
-          ) {
-            onClipVerb(d.ref ?? { index: d.index }, 'to-storyline', {});
-          } else if (d.curFrom !== d.startFrom) {
-            onRetime?.(d.ref ?? d.index, { from: d.curFrom });
-          }
-        }
-        return null;
-      });
+      const d = moveLive.current;
+      setMoveDrag(null);
+      if (!d) return;
+      // Dropping the clip ON the storyline lane moves it between layers
+      // (the layers model); otherwise commit the horizontal from-move.
+      const story = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
+      if (
+        story &&
+        onClipVerb &&
+        e.clientY >= story.top &&
+        e.clientY <= story.bottom &&
+        movedRef.current
+      ) {
+        onClipVerb(d.ref ?? { index: d.index }, 'to-storyline', {});
+      } else if (d.curFrom !== d.startFrom) {
+        onRetime?.(d.ref ?? d.index, { from: d.curFrom });
+      }
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -576,10 +591,9 @@ export default function TimelinePanel({
       setTrimInDrag((d) => (d ? { ...d, delta } : d));
     };
     const up = () => {
-      setTrimInDrag((d) => {
-        if (d && d.delta) onClipVerb?.(d.ref, 'trim-in', { deltaFrames: d.delta });
-        return null;
-      });
+      const d = trimInLive.current;
+      setTrimInDrag(null);
+      if (d && d.delta) onClipVerb?.(d.ref, 'trim-in', { deltaFrames: d.delta });
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -646,33 +660,33 @@ export default function TimelinePanel({
       setReorderDrag((d) => (d ? { ...d, dx, targetSlot: target } : d));
     };
     const up = (e) => {
-      setReorderDrag((d) => {
-        if (d && movedRef.current && onClipVerb) {
-          const story = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
-          if (story && e.clientY < story.top - 6) {
-            const beat = sequences[d.index];
-            if (beat) {
-              onClipVerb(refFor(beat, d.index), 'to-overlay', {});
-              return null;
-            }
+      const d = reorderLive.current;
+      setReorderDrag(null);
+      if (!d) return;
+      if (movedRef.current && onClipVerb) {
+        const track = document.querySelector('.tl-storyline-track')?.getBoundingClientRect();
+        if (track && e.clientY < track.top - 6) {
+          const beat = sequences[d.index];
+          if (beat) {
+            onClipVerb(refFor(beat, d.index), 'to-overlay', {});
+            return;
           }
         }
-        if (d && d.targetSlot !== d.slot) {
-          const moved = story[d.slot];
-          // targetSlot counts positions among the OTHER beats — map to a ref
-          // beat + before/after in the original order.
-          const others = story.filter((_, k) => k !== d.slot);
-          if (moved && others.length) {
-            if (d.targetSlot <= 0) {
-              onReorderMove?.(refFor(moved.s, moved.i), refFor(others[0].s, others[0].i), 'before');
-            } else {
-              const ref = others[Math.min(d.targetSlot, others.length) - 1];
-              onReorderMove?.(refFor(moved.s, moved.i), refFor(ref.s, ref.i), 'after');
-            }
+      }
+      if (d.targetSlot !== d.slot) {
+        const moved = story[d.slot];
+        // targetSlot counts positions among the OTHER beats — map to a ref
+        // beat + before/after in the original order.
+        const others = story.filter((_, k) => k !== d.slot);
+        if (moved && others.length) {
+          if (d.targetSlot <= 0) {
+            onReorderMove?.(refFor(moved.s, moved.i), refFor(others[0].s, others[0].i), 'before');
+          } else {
+            const ref = others[Math.min(d.targetSlot, others.length) - 1];
+            onReorderMove?.(refFor(moved.s, moved.i), refFor(ref.s, ref.i), 'after');
           }
         }
-        return null;
-      });
+      }
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });
@@ -701,13 +715,12 @@ export default function TimelinePanel({
       setLayerDrag((d) => (d ? { ...d, curTarget: target } : d));
     };
     const up = () => {
-      setLayerDrag((d) => {
-        if (d && d.curTarget !== d.docIdx) {
-          const seq = sequences[d.index];
-          if (seq) onClipVerb?.(refFor(seq, d.index), 'layer-order', { toIndex: d.curTarget });
-        }
-        return null;
-      });
+      const d = layerLive.current;
+      setLayerDrag(null);
+      if (d && d.curTarget !== d.docIdx) {
+        const seq = sequences[d.index];
+        if (seq) onClipVerb?.(refFor(seq, d.index), 'layer-order', { toIndex: d.curTarget });
+      }
     };
     window.addEventListener('pointermove', move);
     window.addEventListener('pointerup', up, { once: true });

package/apps/studio/client/photo-knobs.jsx

@@ -317,7 +317,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
       <Section
         title="Duotone"
-        right={<Toggle checked={duo.enabled} onChange={(v) => setSection('duotone', { enabled: v }, true)} label="on" />}
+        right={<Toggle checked={duo.enabled} onChange={(v) => setSection('duotone', { enabled: v }, true)} label="on" ariaLabel="Duotone on" />}
         onReset={() => clearSection('duotone')}
       >
         {duo.enabled && (
@@ -337,7 +337,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
       <Section
         title="Grain"
-        right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" />}
+        right={<Toggle checked={grain.enabled} onChange={(v) => setSection('grain', { enabled: v }, true)} label="on" ariaLabel="Grain on" />}
         onReset={() => clearSection('grain')}
       >
         {grain.enabled && (
@@ -358,7 +358,7 @@ export function PhotoKnobs({ asset, initialEdit, ColorPicker, onEdit, onRemoveBa
 
       <Section
         title="Pattern"
-        right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" />}
+        right={<Toggle checked={pat.enabled} onChange={(v) => setSection('pattern', { enabled: v }, true)} label="on" ariaLabel="Pattern on" />}
         onReset={() => clearSection('pattern')}
       >
         {pat.enabled && (

package/apps/studio/client/styles/3-shell-maude.css

@@ -2734,6 +2734,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .sp-note-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
 .sp-note-dot.is-synced { background: var(--presence-online); }
 .sp-note-dot.is-refused, .sp-note-dot.is-stalled, .sp-note-dot.is-offline { background: var(--status-error); }
+.sp-note > .btn { flex: none; white-space: nowrap; }
 .sp-sect-attention { color: var(--status-error); }
 .sp-list { list-style: none; margin: 0; padding: 0; }
 .sp-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-size: var(--type-sm); color: var(--fg-1); min-width: 0; }

package/apps/studio/collab/awareness-bridge.ts

@@ -27,8 +27,45 @@
 // originating clientID — the random 32-bit ids make local↔remote collisions
 // negligible.
 
+import * as encoding from 'lib0/encoding';
 import type { Awareness } from 'y-protocols/awareness';
-import { applyAwarenessUpdate, encodeAwarenessUpdate } from 'y-protocols/awareness';
+import {
+  applyAwarenessUpdate,
+  encodeAwarenessUpdate,
+  removeAwarenessStates,
+} from 'y-protocols/awareness';
+
+/**
+ * A departed relayed client, as the hub can carry it.
+ *
+ * A peer leaving is a REMOVAL — a null awareness state. The hub (Hocuspocus 4)
+ * runs every incoming awareness frame through a scratch Awareness for its
+ * `beforeHandleAwareness` hook and re-encodes only the states that scratch
+ * still HOLDS, so a null state is dropped on the way in: a tab closing behind
+ * this studio never left anyone else's presence until the 30 s awareness
+ * timeout (plan T31/L19). The one thing it forwards is a state, so a departure
+ * crosses as this marker with a newer clock; every bridge turns it back into a
+ * real removal on its room. It carries no `name`, so a client that predates
+ * the marker drops it at the trust boundary (`sanitizeForeignState`) instead
+ * of drawing a nameless avatar.
+ */
+export const DEPARTED = Object.freeze({ __left: true });
+
+function isDeparted(state: unknown): boolean {
+  return !!state && typeof state === 'object' && (state as { __left?: unknown }).__left === true;
+}
+
+/** Encode a departure for each of `clients`, one clock past what `from` knows. */
+function encodeDepartures(from: Awareness, clients: readonly number[]): Uint8Array {
+  const enc = encoding.createEncoder();
+  encoding.writeVarUint(enc, clients.length);
+  for (const clientID of clients) {
+    encoding.writeVarUint(enc, clientID);
+    encoding.writeVarUint(enc, (from.meta.get(clientID)?.clock ?? 0) + 1);
+    encoding.writeVarString(enc, JSON.stringify(DEPARTED));
+  }
+  return encoding.toUint8Array(enc);
+}
 
 interface AwarenessChange {
   added: number[];
@@ -49,22 +86,36 @@ export function bridgeAwareness(a: Awareness, b: Awareness): () => void {
   // so it relays; a change this bridge applied carries BRIDGE, so it stops.
   const BRIDGE = { awarenessBridge: true };
 
-  function makeRelay(from: Awareness, to: Awareness) {
-    return ({ added, updated, removed }: AwarenessChange, origin: unknown) => {
-      if (origin === BRIDGE) return;
-      const changed = added.concat(updated, removed);
-      if (changed.length === 0) return;
-      applyAwarenessUpdate(to, encodeAwarenessUpdate(from, changed), BRIDGE);
-    };
-  }
-
-  const aToB = makeRelay(a, b);
-  const bToA = makeRelay(b, a);
+  // Room → hub. A client that left the room leaves as a DEPARTED marker (see
+  // above) — never as the null state the hub would drop. Everything else
+  // relays as it is.
+  const aToB = ({ added, updated, removed }: AwarenessChange, origin: unknown) => {
+    if (origin === BRIDGE) return;
+    const present = added.concat(updated);
+    if (present.length > 0) applyAwarenessUpdate(b, encodeAwarenessUpdate(a, present), BRIDGE);
+    const gone = removed.filter((id) => id !== b.clientID && b.getStates().has(id));
+    if (gone.length > 0) applyAwarenessUpdate(b, encodeDepartures(b, gone), BRIDGE);
+  };
+  // Hub → room. A DEPARTED marker is a removal here; a real removal (the hub's
+  // own timeout, a peer's socket closing) relays as ever.
+  const bToA = ({ added, updated, removed }: AwarenessChange, origin: unknown) => {
+    if (origin === BRIDGE) return;
+    const states = b.getStates();
+    const departed = added.concat(updated).filter((id) => isDeparted(states.get(id)));
+    const live = added.concat(updated).filter((id) => !isDeparted(states.get(id)));
+    const changed = live.concat(removed);
+    if (changed.length > 0) applyAwarenessUpdate(a, encodeAwarenessUpdate(b, changed), BRIDGE);
+    const leaving = departed.filter((id) => a.getStates().has(id));
+    if (leaving.length > 0) removeAwarenessStates(a, leaving, BRIDGE);
+  };
 
-  // Initial state exchange — push each side's current states to the other.
+  // Initial state exchange — push each side's current states to the other
+  // (departed markers are not a presence).
   const aClients = Array.from(a.getStates().keys());
   if (aClients.length > 0) applyAwarenessUpdate(b, encodeAwarenessUpdate(a, aClients), BRIDGE);
-  const bClients = Array.from(b.getStates().keys());
+  const bClients = Array.from(b.getStates().entries())
+    .filter(([, state]) => !isDeparted(state))
+    .map(([id]) => id);
   if (bClients.length > 0) applyAwarenessUpdate(a, encodeAwarenessUpdate(b, bClients), BRIDGE);
 
   a.on('update', aToB);