@panphora/clayjs 1.17.0 → 1.18.0

package/src/plugins/live.js

@@ -9,7 +9,7 @@ import { contains, parseBy, frameSet, descendants, unionRanges, formatBy } from
 import { createStore } from "../live/store.js";
 import { serializeLive, stampOf, parseStamp, textHash } from "../live/ops.js";
 import { capturePageState, onSnapshot } from "../core/snapshot.js";
-import { onSaveAccepted, onSaveAttempt, onSaveOutcome, isSaveInProgress } from "../core/save-core.js";
+import { onSaveAccepted, onSaveAttempt, onSaveOutcome, isSaveInProgress, saveFateIsUnknown, exitSave } from "../core/save-core.js";
 import { savePageForce, baselineSettled, isSaveConflicted, autosaveIsSuspended } from "../core/save.js";
 import { withKeepalive } from "../core/save-core.js";
 import { isEditMode } from "../core/is-edit-mode.js";
@@ -17,13 +17,13 @@ import { registerUnsavedState } from "../lib/unsaved-state.js";
 import { createCheckpoints } from "../live/checkpoint.js";
 import { parseJsonRelaxed } from "../vendor/hyper-morph-json.vendor.js";
 import * as hostMeta from "../core/host-meta.js";
-import { createFastLane } from "../live/fast-lane.js";
 import { createSaveHistoryRecovery, RECOVERY_WINDOW_MS } from "../live/save-history.js";
 import { serverTransport } from "../live/server-lane.js";
-import { localTransport, localLaneSupported } from "../live/local-lane.js";
 import { captureYValue } from "../page/ybind/parts.js";
 import { lastSeenEtag, recordEtag } from "../core/etag.js";
 
+const lanes = () => Promise.all([import("../live/fast-lane.js"), import("../live/local-lane.js")]).then(([f, l]) => ({ createFastLane: f.createFastLane, localTransport: l.localTransport, localLaneSupported: l.localLaneSupported }));
+
 const NAME = /^[A-Za-z0-9_.:-]{1,64}$/;
 const entries = new Map();
 
@@ -755,6 +755,9 @@ function seedLocalRoom() {
       if (value !== null && typeof value === "object") values.set(name, { value, ephemeral: tag.ephemeral });
     } catch {}
   }
+  for (const [name, entry] of entries) {
+    if (!entry.staged) values.set(name, { value: entry.store.authoritative, ephemeral: entry.store.ephemeral });
+  }
   return values;
 }
 
@@ -769,13 +772,22 @@ function ensureLane() {
       if (request !== laneRequest) return;
       serverLane = supported;
       provenanceHost = provenance;
+      const lane = await lanes().catch(() => null);
+      if (request !== laneRequest) return;
+      if (!lane) {
+        settleLane?.(null);
+        settleWriter?.(null);
+        return;
+      }
       if (supported) {
-        fast = createFastLane(laneOptions(serverTransport()));
-      } else if (localLaneSupported()) {
+        fast = lane.createFastLane(laneOptions(serverTransport()));
+      } else if (lane.localLaneSupported()) {
         // The document's own floor picks the channel scope: a floor-1 document
-        // never shares the lane a tab that cannot read it is on.
-        local = localTransport({ seed: seedLocalRoom, floor: document.querySelector('meta[name="clay-page-format"]')?.getAttribute("content") });
-        fast = createFastLane(laneOptions(local));
+        // never shares the lane a tab that cannot read it is on. The room scope
+        // puts this tab's sequencer in the host-mode room, which a tab of the lane
+        // before it never joins.
+        local = lane.localTransport({ seed: seedLocalRoom, rooms: true, floor: document.querySelector('meta[name="clay-page-format"]')?.getAttribute("content") });
+        fast = lane.createFastLane(laneOptions(local));
       } else {
         settleLane?.(null);
         settleWriter?.(null);
@@ -878,7 +890,9 @@ function receive(entry, text, source, dropIds) {
   } catch {
     return;
   }
-  if (entry.store.rebase(value, { source, ...(dropIds?.length && { dropIds }) })) entry.framesSince = true;
+  if (!entry.store.rebase(value, { source, ...(dropIds?.length && { dropIds }) })) return false;
+  entry.framesSince = true;
+  return true;
 }
 
 // One open store and what the plugin follows about it. A staged store has no lane.
@@ -934,11 +948,12 @@ export function live(name) {
 
 // A page whose file carries no state of its own yet: the seed in memory, no tag in
 // the document, no request, until its first genuine op is written by the ordinary
-// save. Only an accepted write opens its room.
-export function stageStore(name, { value, represented = null, signal = null } = {}) {
+// save. A value already stored by this tab or a peer can open its room.
+export function stageStore(name, { value, represented = null, signal = null, persisted = false } = {}) {
   const existing = entries.get(name);
   if (existing && !existing.staged) throw new Error(`clay.live("${name}"): the store is open in a room`);
   const entry = existing ?? openEntry(name, createStore({ name, value, ephemeral: false }), { staged: { represented, signal } });
+  if (persisted) activateStaged(entry);
   return {
     handle: entry.store.handle,
     isPending: () => !!entry.staged && entry.store.pending.length > 0,
@@ -1359,9 +1374,7 @@ export function receiveFrame(html, seq = null) {
       else if (pageTag.getAttribute("live-by") !== by) pageTag.setAttribute("live-by", by);
     }
     if (entry && !entry.store.ephemeral) {
-      // An old seed is never merged into a newer article before its first write.
-      if (entry.staged) continue;
-      if (entry.store.handle.status.mode === "file") receive(entry, text, "remote", dropIds);
+      if (entry.store.handle.status.mode === "file" && receive(entry, text, "remote", dropIds)) activateStaged(entry);
       continue;
     }
     if (pageTag && pageTag.textContent !== text) pageTag.textContent = text;
@@ -1414,12 +1427,74 @@ export function fastLane() {
   return fast;
 }
 
+// The local lane's transport, for the format gate: a floor-1 document shares a
+// channel scope no tab below that floor is on, and moving this tab there is the
+// gate's call (page/format-gate.js). Null until this tab has such a lane, and a
+// gate asks again on its next retry.
+// Whether any live store of this tab holds ops the room has not confirmed. A tab with
+// none has nothing a scope switch could strand, so it may move without a receipt.
+export function lanePending() {
+  return sessionStores().some((entry) => entry.store.pending.length > 0);
+}
+
+export function localLane() {
+  return local;
+}
+
 // The page editor's pause save: checkpoint within ms of now. Only the room's
 // writer saves, so in other tabs this changes nothing.
 export function checkpointWithin(ms) {
   checkpoints.within(ms);
 }
 
+// The exit's own checkpoint: this tab's page input, saved once, under the permit the
+// exit minted and inside its deadline. It is not the background checkpoint: no timer is
+// armed and writer election is untouched, because a leave is an explicit save of this
+// tab's work, like the force save behind Cmd+S.
+//
+// One attempt per exit. A caller whose page input is still unconfirmed gets the answer
+// that names it, never a second write: an expired exit must not send anything later.
+export async function requestExitCheckpoint({ name, needsSave, permit, deadline, signal = null, keepalive = false }) {
+  const over = () => signal?.aborted || Date.now() >= deadline;
+  // Abortable, and it clears its own timer, so nothing is left waiting after the exit.
+  const pause = () => new Promise((resolve) => {
+    const done = () => {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", done);
+      resolve();
+    };
+    const timer = setTimeout(done, 5);
+    signal?.addEventListener("abort", done, { once: true });
+  });
+  const failed = (code) => ({ ok: false, code });
+  for (;;) {
+    if (over()) return failed("timeout");
+    if (!needsSave()) return { ok: true };
+    if (isSaveConflicted()) return failed("conflict");
+    if (saveFateIsUnknown() || historyPending()) return failed("save-unknown");
+    const entry = entries.get(name);
+    if (!entry) return failed("disposed");
+    if (!baselineSettled() || isSaveInProgress()) {
+      await pause();
+      continue;
+    }
+    // A fast capture holds the room's value, so this tab's own ops have to reach the
+    // room before the capture is taken.
+    if (entry.store.handle.status.mode === "fast" && entry.store.pending.length) {
+      fast?.release(name);
+      await pause();
+      continue;
+    }
+    if (over()) return failed("timeout");
+    const save = exitSave();
+    if (!save) return failed("checkpoint-failed");
+    const result = await withKeepalive(keepalive, () => save(permit));
+    if (over()) return failed("timeout");
+    if (!result?.ok) return failed(result?.code ?? "checkpoint-failed");
+    return needsSave() ? failed("page-not-checkpointed") : { ok: true };
+  }
+}
+
 // Resolves { ok: true } once the file holds every live change this tab knows
 // of now, or { ok: false, code: "timeout" }. The writer saves as soon as it
 // can; another tab waits for the writer's save to land.

package/src/plugins/menu/actions.js

@@ -0,0 +1,196 @@
+// The menu's editing items: Undo and Redo, Ask AI, and Download a copy. Each one calls
+// the service that already does the job and keeps no second copy of its state.
+import { modeRefusalText } from "../../core/mode-refusal.js";
+import { downloadHtml, documentName } from "../../core/download.js";
+import { keys, revealLabel } from "./preferences.js";
+
+const RESUME_KEY = "menu-resume";
+const READY_MS = 5000;
+
+const clay = () => window.clay || {};
+const session = () => clay().storage && clay().storage.session;
+const pageWants = (name) => {
+  const names = clay().editPlugins;
+  return Array.isArray(names) && names.includes(name);
+};
+
+// An edit-only plugin attaches after the mode change commits, so the item waits for it
+// briefly instead of reporting it missing.
+function whenPresent(get, ms = READY_MS) {
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const tick = () => {
+      const value = get();
+      if (value || Date.now() - start >= ms) resolve(value || null);
+      else setTimeout(tick, 50);
+    };
+    tick();
+  });
+}
+
+export function attachActions({ addItem, note, currentMode }) {
+  const resumers = new Map();
+
+  // Runs `run` in edit mode, entering it first when the page is in view. A reload entry
+  // leaves a one-shot receipt in session storage so the action runs once the page is
+  // back; a refused entry says why and runs nothing.
+  async function inEditMode(action, run) {
+    if (currentMode() === "edit") return run();
+    const storage = session();
+    if (storage) storage.set(RESUME_KEY, action);
+    let result;
+    try {
+      result = await clay().setMode?.("edit");
+    } catch (err) {
+      result = { ok: false, message: err && err.message };
+    }
+    if (result && result.ok !== false && result.reloading) return;
+    if (storage) storage.remove(RESUME_KEY);
+    if (!result || result.ok === false) {
+      const text = result ? modeRefusalText(result) : "Couldn't switch modes.";
+      if (text) note(text);
+      return;
+    }
+    return run();
+  }
+
+  function resumable(action, run) {
+    resumers.set(action, run);
+    return () => inEditMode(action, run);
+  }
+
+  let history = { canUndo: false, canRedo: false };
+  let heard = false;
+
+  function renderUndo() {
+    if (!pageWants("undo")) return;
+    const live = currentMode() === "edit" && clay().undo;
+    // The menu loads late, so edits made before it are read from the service itself.
+    if (!heard && live && typeof live.canUndo === "boolean") history = { canUndo: live.canUndo, canRedo: !!live.canRedo };
+    addItem({
+      id: "clay.undo",
+      pair: [
+        {
+          id: "clay.undo.undo",
+          label: "Undo",
+          keys: keys("⌘Z", "Ctrl+Z"),
+          disabled: !(live && history.canUndo),
+          run: () => clay().undo?.undo(),
+        },
+        {
+          id: "clay.undo.redo",
+          label: "Redo",
+          keys: keys("⌘⇧Z", "Ctrl+Shift+Z"),
+          disabled: !(live && history.canRedo),
+          run: () => clay().undo?.redo(),
+        },
+      ],
+    });
+  }
+
+  document.addEventListener("clay:undo-change", (event) => {
+    const detail = event.detail || {};
+    heard = true;
+    history = { canUndo: !!detail.canUndo, canRedo: !!detail.canRedo };
+    renderUndo();
+  });
+  document.addEventListener("clay:modechange", renderUndo);
+  renderUndo();
+
+  if (pageWants("ai-edit")) {
+    addItem({
+      id: "clay.ai",
+      label: "Ask AI…",
+      keys: keys("⌘J", "Ctrl+J"),
+      run: resumable("ai", async () => {
+        const ai = await whenPresent(() => clay().aiEdit);
+        const opened = ai ? await ai.open(document.body) : false;
+        if (!opened) note("Ask AI isn't available on this page right now.");
+      }),
+    });
+  }
+
+  if (pageWants("cms") && clay().cms?.hasRules?.(document)) {
+    addItem({
+      id: "clay.cms",
+      label: "Open the CMS (Edit content)",
+      run: resumable("cms", async () => {
+        const cms = await whenPresent(() => clay().cms);
+        let result = null;
+        try {
+          result = cms ? await cms.open() : { ok: false };
+        } catch {
+          result = { ok: false };
+        }
+        if (result && result.ok === false) note("Couldn't open the CMS. Try again.");
+      }),
+    });
+  }
+
+  // The copy is what a save would send now, unsaved edits included. A reader has no
+  // unsaved edits, so the saved file is the same document.
+  addItem({
+    id: "clay.download",
+    label: "Download a copy",
+    run: async () => {
+      let html = null;
+      try {
+        if (typeof clay().getHTML === "function") {
+          html = clay().getHTML();
+        } else {
+          const response = await fetch(location.href, { cache: "no-store", credentials: "same-origin" });
+          if (response.ok) html = await response.text();
+        }
+      } catch {}
+      // Upload paths only resolve on this host, so the copy names them in full.
+      if (typeof html === "string" && /^https?:$/.test(location.protocol)) {
+        html = html.replace(/(^|[^\w./:-])\/_\/uploads\//g, `$1${location.origin}/_/uploads/`);
+      }
+      if (typeof html !== "string" || !downloadHtml({ html, name: `${documentName()}.html` })) {
+        note("Couldn't build the download. Try again.");
+      }
+    },
+  });
+
+  // What the host offers for this document. A page opens in a new tab so this one keeps
+  // whatever is unsaved; anything else the host does itself when asked, and may answer
+  // with a page to open (a duplicate) or a reason it could not.
+  async function askHost(url) {
+    let body = null;
+    try {
+      const response = await fetch(url, { method: "POST", credentials: "same-origin", headers: { "Document-URL": location.href } });
+      body = await response.json().catch(() => null);
+      if (response.ok && body?.ok !== false) {
+        if (typeof body?.href === "string") window.open(body.href, "_blank", "noopener");
+        return;
+      }
+    } catch {}
+    note(typeof body?.message === "string" && body.message ? body.message : "Couldn't do that. Try again.");
+  }
+
+  const hostItem = (id, label, action) => {
+    if (action?.href) addItem({ id, label, href: action.href });
+    else if (action?.post) addItem({ id, label, run: () => askHost(action.post) });
+  };
+
+  import("../../core/host-meta.js")
+    .then(({ hostActions }) => hostActions())
+    .then((host) => {
+      hostItem("clay.code", "Open the code editor", host.codeEditor);
+      hostItem("clay.duplicate", "Duplicate as a new page", host.duplicate);
+      hostItem("clay.export", "Export as zip", host.export);
+      hostItem("clay.reveal", revealLabel(), host.reveal);
+      hostItem("clay.versions", "Version history…", host.versions);
+    })
+    .catch(() => {});
+
+  const storage = session();
+  const pending = storage && storage.get(RESUME_KEY);
+  if (pending) {
+    storage.remove(RESUME_KEY);
+    const run = resumers.get(pending);
+    if (run && currentMode() === "edit") run();
+  }
+
+  return { inEditMode, resumable, refresh: renderUndo };
+}

package/src/plugins/menu/people.js

@@ -0,0 +1,279 @@
+// Who's here: a menu item and, on a page that opts in with `<html clay-menu-roster>`, a
+// roster beside the capsule. Either opens the people panel, which lists the people on
+// this page and lets you change the name your edits are signed with when this browser
+// chose it. The roster comes from the presence store; nothing here is ever saved.
+import { initialsOf, personColor } from "../../lib/person-face.js";
+
+const CROSS =
+  '<svg viewBox="0 0 256 256" aria-hidden="true" focusable="false"><path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg>';
+const ROSTER_FACES = 3;
+
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+
+function face(person) {
+  const el = document.createElement("span");
+  el.className = "clay-avatar";
+  el.setAttribute("aria-hidden", "true");
+  const color = personColor(person.id);
+  el.style.setProperty("color", color);
+  el.style.setProperty("border-color", color);
+  el.style.setProperty("background", "var(--bevel-surface)");
+  el.textContent = initialsOf(person.name);
+  return el;
+}
+
+export function attachPeople({ root, capsule, addItem, removeItem, closeMenu, note }) {
+  let snapshot = { supported: false, people: [], anonymous: 0 };
+  let panel = null;
+  let opener = null;
+  let roster = null;
+  let renaming = false;
+
+  const people = () => window.clay && window.clay.people;
+  const me = () => (window.clay && window.clay.me) || null;
+  const canRename = () => {
+    try {
+      return !!people()?.canRename?.();
+    } catch {
+      return false;
+    }
+  };
+  const total = () => snapshot.people.length + snapshot.anonymous;
+  const wantsRoster = () => document.documentElement.hasAttribute("clay-menu-roster");
+
+  function closePanel({ restore = true } = {}) {
+    if (!panel) return;
+    panel.remove();
+    panel = null;
+    renaming = false;
+    roster?.setAttribute("aria-expanded", "false");
+    if (restore && opener && opener.isConnected) opener.focus();
+    opener = null;
+  }
+
+  function meSection() {
+    const mine = me();
+    if (!mine || !mine.name) return null;
+    const section = document.createElement("div");
+    section.className = "clay-people-me";
+    const label = document.createElement("span");
+    label.className = "clay-people-me-label";
+    label.textContent = "Your edits are signed as";
+    const row = document.createElement("div");
+    row.className = "clay-people-me-row";
+    section.append(label, row);
+
+    if (renaming) {
+      const input = document.createElement("input");
+      input.className = "clay-people-input";
+      input.type = "text";
+      input.value = mine.name;
+      input.setAttribute("aria-label", "Your name");
+      input.maxLength = 120;
+      const save = document.createElement("button");
+      save.type = "button";
+      save.className = "clay-menu-btn clay-menu-btn-small clay-menu-btn-primary";
+      save.textContent = "Save";
+      const commit = () => {
+        try {
+          people().rename(input.value);
+        } catch (err) {
+          note(err && err.code === "not-renamable" ? "This name comes from your account, so it can't be changed here." : "Use a name of 1 to 120 characters that isn't an email address.");
+          input.focus();
+          return;
+        }
+        renaming = false;
+        draw();
+        panel?.querySelector(".clay-people-me .clay-menu-btn")?.focus();
+      };
+      save.addEventListener("click", commit);
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          commit();
+        }
+      });
+      row.append(input, save);
+      queueMicrotask(() => {
+        if (!input.isConnected) return;
+        input.focus();
+        input.select();
+      });
+    } else {
+      const name = document.createElement("span");
+      name.className = "clay-people-me-name";
+      name.textContent = mine.name;
+      row.append(face(mine), name);
+      if (canRename()) {
+        const change = document.createElement("button");
+        change.type = "button";
+        change.className = "clay-menu-btn clay-menu-btn-small";
+        change.textContent = "Change";
+        change.addEventListener("click", () => {
+          renaming = true;
+          draw();
+        });
+        row.append(change);
+      }
+    }
+    return section;
+  }
+
+  function draw() {
+    if (!panel) return;
+    const count = total();
+    panel.textContent = "";
+
+    const head = document.createElement("div");
+    head.className = "clay-people-head";
+    const title = document.createElement("h3");
+    title.className = "clay-people-title";
+    title.textContent = "Who's here";
+    const sum = document.createElement("span");
+    sum.className = "clay-people-sum";
+    sum.textContent = plural(count, "person", "people");
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "clay-people-close";
+    x.setAttribute("aria-label", "Close");
+    x.innerHTML = CROSS;
+    x.addEventListener("click", () => closePanel());
+    head.append(title, sum, x);
+    panel.append(head);
+
+    if (snapshot.people.length) {
+      const list = document.createElement("ul");
+      list.className = "clay-people-list";
+      for (const person of snapshot.people) {
+        const row = document.createElement("li");
+        row.className = "clay-people-row";
+        const who = document.createElement("span");
+        who.className = "clay-people-who";
+        const name = document.createElement("strong");
+        name.textContent = person.name;
+        if (person.you) {
+          const you = document.createElement("span");
+          you.textContent = "(you)";
+          name.append(you);
+        }
+        who.append(name);
+        row.append(face(person), who);
+        list.append(row);
+      }
+      panel.append(list);
+    }
+
+    if (snapshot.anonymous > 0) {
+      const anon = document.createElement("p");
+      anon.className = "clay-people-anon";
+      anon.textContent =
+        snapshot.anonymous === 1
+          ? "1 other person is here without a shared name."
+          : `${snapshot.anonymous} others are here without a shared name.`;
+      panel.append(anon);
+    }
+
+    const mine = meSection();
+    if (mine) panel.append(mine);
+  }
+
+  function openPanel(from) {
+    closeMenu();
+    if (panel) {
+      closePanel();
+      return;
+    }
+    opener = from;
+    panel = document.createElement("div");
+    panel.className = "clay-people";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Who's here");
+    panel.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (renaming) {
+        renaming = false;
+        draw();
+        panel.querySelector(".clay-people-me .clay-menu-btn")?.focus();
+      } else {
+        closePanel();
+      }
+    });
+    draw();
+    root.append(panel);
+    roster?.setAttribute("aria-expanded", from === roster ? "true" : "false");
+    panel.querySelector(".clay-people-close").focus();
+  }
+
+  function drawRoster() {
+    const show = wantsRoster() && snapshot.supported && total() > 1;
+    if (!show) {
+      roster?.remove();
+      roster = null;
+      return;
+    }
+    if (!roster) {
+      roster = document.createElement("button");
+      roster.type = "button";
+      roster.className = "clay-roster";
+      roster.setAttribute("aria-haspopup", "dialog");
+      roster.setAttribute("aria-expanded", panel ? "true" : "false");
+      roster.addEventListener("click", () => openPanel(roster));
+      root.insertBefore(roster, capsule);
+    }
+    const shown = snapshot.people.slice(0, ROSTER_FACES);
+    const rest = total() - shown.length;
+    const faces = document.createElement("span");
+    faces.className = "clay-roster-faces";
+    for (const person of shown) faces.append(face(person));
+    roster.textContent = "";
+    roster.append(faces);
+    if (rest > 0) roster.append(plural(rest, "other", "others"));
+    const names = shown.map((person) => person.name);
+    roster.setAttribute("aria-label", `Who's here: ${names.join(", ")}${rest > 0 ? `${names.length ? " and " : ""}${plural(rest, "other", "others")}` : ""}`);
+  }
+
+  let itemLabel = null;
+
+  function update() {
+    const count = total();
+    if (snapshot.supported && (count > 1 || canRename())) {
+      const label = count > 1 ? `Who's here (${plural(count, "person", "people")})` : "Who's here";
+      // Re-adding redraws the open menu, so only a changed label does it.
+      if (label !== itemLabel) {
+        itemLabel = label;
+        addItem({ id: "clay.people", label, run: () => openPanel(capsule.querySelector(".clay-menu-goo")) });
+      }
+    } else {
+      if (itemLabel !== null) removeItem("clay.people");
+      itemLabel = null;
+      closePanel({ restore: false });
+    }
+    drawRoster();
+    if (panel && !renaming) {
+      const active = root.getRootNode().activeElement;
+      const focused = active && panel.contains(active) ? active.classList[0] : null;
+      draw();
+      if (focused) panel.querySelector(`.${focused}`)?.focus();
+    }
+  }
+
+  document.addEventListener("click", (event) => {
+    if (panel && !event.composedPath().includes(root)) closePanel({ restore: false });
+  });
+  document.addEventListener("clay:people", () => {
+    if (!renaming) update();
+  });
+
+  import("../../sync/presence-store.js")
+    .then(({ presence }) => {
+      presence.subscribe((next) => {
+        snapshot = next || snapshot;
+        update();
+      });
+    })
+    .catch(() => {});
+
+  return { close: closePanel };
+}