samagotchi 0.60.0 → 0.62.0

data/lib/samagotchi/web/public/context_chips.js

@@ -7,6 +7,9 @@
 // provider can attach one: GET …/context's can_add_url) opens a form that
 // attaches a URL (a GitHub PR); the web never adds a command.
 
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { keepFocus } from "./keep_focus.js";
+
 // "now", "3m", "2h", "4d" since an ISO time; "" for none.
 export function ageText(iso, now = Date.now()) {
   const at = Date.parse(iso || "");
@@ -38,33 +41,40 @@ export function chipModel(rows, now = Date.now()) {
   });
 }
 
-// addUrl: end with the "+ URL" chip.
-export function chipsHtml(chips, escapeHtml, { addUrl = false } = {}) {
-  return chips.map((chip) => `<button type="button" class="ctx-chip ${chip.state}" data-name="${escapeHtml(chip.name)}" ` +
-    `title="${escapeHtml(chip.title)}" aria-haspopup="dialog">` +
-    `${chip.state === "unread" ? '<span class="ctx-dot" aria-hidden="true"></span>' : ""}${escapeHtml(chip.label)}</button>`).join("") +
-    (addUrl ? '<button type="button" class="ctx-chip ctx-add" data-act="add" title="Attach a URL (a GitHub PR) the agent can read and hears about when it changes" aria-haspopup="dialog">+ URL</button>' : "");
+const ADD_TITLE = "Attach a URL (a GitHub PR) the agent can read and hears about when it changes";
+
+// The chips (a lit-html template; attributes after a bound one are bound
+// too, so they keep their order). addUrl: end with the "+ URL" chip;
+// open: the chip whose popover is open (a source's name), addOpen: the
+// "+ URL" form is.
+export function chipsTemplate(chips, { addUrl = false, open = null, addOpen = false } = {}) {
+  return html`${chips.map((chip) => html`<button type="button" class=${`ctx-chip ${chip.state}${chip.name === open ? " open" : ""}`}
+    data-name=${chip.name} title=${chip.title} aria-haspopup=${"dialog"}>${
+      chip.state === "unread" ? html`<span class="ctx-dot" aria-hidden="true"></span>` : nothing}${chip.label}</button>`)}${
+    addUrl ? html`<button type="button" class=${`ctx-chip ctx-add${addOpen ? " open" : ""}`} data-act=${"add"} title=${ADD_TITLE}
+      aria-haspopup=${"dialog"}>+ URL</button>` : nothing}`;
 }
 
-// The "+ URL" popover: the URL, an optional why, Attach; +url+ and +error+
-// after a try that failed.
-export function addFormHtml(escapeHtml, { url = "", error = null } = {}) {
-  return `<form class="ctx-add-form"><div class="ctx-pop-head"><strong>Attach a URL</strong>` +
-    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
-    `<div class="ctx-pop-meta">A link an installed bundle knows (github-pr: a pull request). The agent gets a note when it changes.</div>` +
-    `<input class="ctx-add-input" name="url" type="url" inputmode="url" placeholder="https://github.com/owner/repo/pull/123" value="${escapeHtml(url)}" required autocomplete="off">` +
-    `<input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off">` +
-    (error ? `<div class="ctx-pop-error" role="alert">${escapeHtml(error)}</div>` : "") +
-    `<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit">Attach</button></div></form>`;
+// The "+ URL" popover: the URL, an optional why, Attach; +error+ after a
+// try that failed, +busy+ while one runs.
+export function addFormTemplate({ error = null, busy = false } = {}) {
+  return html`<form class="ctx-add-form"><div class="ctx-pop-head"><strong>Attach a URL</strong
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    ><div class="ctx-pop-meta">A link an installed bundle knows (github-pr: a pull request). The agent gets a note when it changes.</div
+    ><input class="ctx-add-input" name="url" type="url" inputmode="url" placeholder="https://github.com/owner/repo/pull/123" required autocomplete="off"
+    ><input class="ctx-add-input" name="why" type="text" placeholder="why (optional)" maxlength="300" autocomplete="off"
+    >${error ? html`<div class="ctx-pop-error" role="alert">${error}</div>` : nothing
+    }<div class="ctx-pop-actions"><button type="submit" class="ctx-add-submit" ?disabled=${busy}>Attach</button></div></form>`;
 }
 
-// The popover's inside for one row (GET …/context's).
-export function popoverHtml(row, escapeHtml, now = Date.now()) {
+// The popover's inside for one row (GET …/context's); +text+ the row's
+// text once "view text" read it (null before).
+export function popoverTemplate(row, { text = null, now = Date.now() } = {}) {
   const kind = row.kind === "cmd" ? `runs every ${row.every_seconds ? `${row.every_seconds}s` : "few minutes"}` : "pushed";
   const url = hintUrl(row.hint);
   const hint = url
-    ? `<a class="ctx-pop-hint" href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>`
-    : (row.hint ? `<div class="ctx-pop-hint">${escapeHtml(row.hint)}</div>` : "");
+    ? html`<a class="ctx-pop-hint" href=${url} target=${"_blank"} rel=${"noopener noreferrer"}>${url}</a>`
+    : (row.hint ? html`<div class="ctx-pop-hint">${row.hint}</div>` : nothing);
   const age = ageText(row.fetched_at, now);
   const meta = [age ? (age === "now" ? "fetched just now" : `fetched ${age} ago`) : "no text yet",
                 row.unread ? "the agent hasn't read this change" : (row.has_text ? "the agent has read it" : "")]
@@ -73,29 +83,32 @@ export function popoverHtml(row, escapeHtml, now = Date.now()) {
   const detachTitle = row.scope === "project"
     ? "The project's source: this session stops seeing it (chi context unmute brings it back)"
     : "Remove it from this session";
-  return `<div class="ctx-pop-head"><strong>${escapeHtml(row.name)}</strong>` +
-    `<span class="ctx-pop-kind">${escapeHtml(row.scope)} · ${escapeHtml(kind)}</span>` +
-    `<button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div>` +
-    (row.why ? `<div class="ctx-pop-why">${escapeHtml(row.why)}</div>` : "") +
-    hint +
-    (row.summary ? `<div class="ctx-pop-summary">${escapeHtml(row.summary)}</div>` : "") +
-    `<div class="ctx-pop-meta">${escapeHtml(meta)}</div>` +
-    (row.error ? `<div class="ctx-pop-error">last refresh failed: ${escapeHtml(row.error)}</div>` : "") +
-    `<pre class="ctx-pop-text" hidden></pre>` +
-    `<div class="ctx-pop-actions">` +
-    (row.has_text ? `<button type="button" data-act="view">view text</button>` : "") +
-    `<button type="button" class="ctx-pop-detach" data-act="detach" title="${escapeHtml(detachTitle)}">${detach}</button></div>`;
+  return html`<div class="ctx-pop-head"><strong>${row.name}</strong
+    ><span class="ctx-pop-kind">${row.scope} · ${kind}</span
+    ><button type="button" class="ctx-pop-close" data-act="close" aria-label="Close">×</button></div
+    >${row.why ? html`<div class="ctx-pop-why">${row.why}</div>` : nothing}${hint}${
+      row.summary ? html`<div class="ctx-pop-summary">${row.summary}</div>` : nothing
+    }<div class="ctx-pop-meta">${meta}</div
+    >${row.error ? html`<div class="ctx-pop-error">last refresh failed: ${row.error}</div>` : nothing
+    }<pre class="ctx-pop-text" ?hidden=${text === null}>${text ?? ""}</pre
+    ><div class="ctx-pop-actions">${row.has_text && text === null ? html`<button type="button" data-act="view">view text</button>` : nothing
+    }<button type="button" class="ctx-pop-detach" data-act="detach" title=${detachTitle}>${detach}</button></div>`;
 }
 
 // The chips for the session bar. el: #contextChips; api: {list(id),
-// show(id, name), detach(id, name), add(id, {url, why})}; escapeHtml;
-// toast(text).
-export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc = document, win = window }) {
+// show(id, name), detach(id, name), add(id, {url, why})}; toast(text).
+// Chips, popover and form are lit templates: a redraw (a refresh, the
+// minute's tick) keeps their nodes, so focus and typed text stay.
+export function createContextChips({ el, api, toast = () => {}, doc = document, win = window }) {
   let sessionId = null;
   let rows = [];
   let canAdd = false;
   let openName = null;
   let loadSeq = 0;
+  // The open row's text once read (view text), and the "+ URL" form's
+  // state ({error, busy}).
+  let text = null;
+  let addState = {};
   const pop = doc.createElement("div");
   pop.id = "contextPopover";
   pop.className = "ctx-popover";
@@ -106,17 +119,20 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   // openName ADD: the "+ URL" form is open.
   const ADD = "\u0000add";
 
-  function render() {
+  function drawChips() {
     const chips = chipModel(rows);
-    el.innerHTML = chipsHtml(chips, escapeHtml, { addUrl: canAdd });
+    // A source inserted before the focused chip: the focus stays on its source.
+    keepFocus(el, "data-name", () => render(chipsTemplate(chips, { addUrl: canAdd, open: openName === ADD ? null : openName,
+                                                                   addOpen: openName === ADD }), el));
     el.hidden = chips.length === 0 && !canAdd;
     // The "+ URL" chip alone sits inline, not on a row of its own.
     el.classList.toggle("only-add", chips.length === 0 && canAdd);
-    if (openName === ADD) {
-      if (canAdd) el.querySelector(".ctx-add")?.classList.add("open");
-      else close();
-    } else if (openName && !chips.some((chip) => chip.name === openName)) close();
-    else if (openName) el.querySelector(`.ctx-chip[data-name="${openName}"]`)?.classList.add("open");
+  }
+
+  // The chips, and the open popover closed when what it is for has gone.
+  function draw() {
+    if (openName === ADD ? !canAdd : openName && !chipModel(rows).some((chip) => chip.name === openName)) close();
+    else drawChips();
   }
 
   async function refresh() {
@@ -134,10 +150,11 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
       rows = [];
       canAdd = false;
     }
-    render();
-    if (openName && openName !== ADD) {
+    draw();
+    // An open popover follows its row, but not while it shows the text.
+    if (openName && openName !== ADD && text === null) {
       const row = rows.find((r) => r.name === openName);
-      if (row && pop.querySelector(".ctx-pop-text")?.hidden !== false) fill(row);
+      if (row) fill(row);
     }
   }
 
@@ -146,7 +163,6 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     rows = [];
     canAdd = false;
     close();
-    render();
     return refresh();
   }
 
@@ -155,11 +171,10 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     rows = [];
     canAdd = false;
     close();
-    render();
   }
 
   function fill(row) {
-    pop.innerHTML = popoverHtml(row, escapeHtml);
+    render(popoverTemplate(row, { text }), pop);
   }
 
   // Above the chip, inside the window with a 16px gutter.
@@ -174,19 +189,30 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   function open(name, chip) {
     const row = rows.find((r) => r.name === name);
     if (!row) return;
+    // Another popover's nodes go, so this one starts fresh.
+    render(nothing, pop);
     openName = name;
+    text = null;
     fill(row);
     pop.hidden = false;
     place(chip);
-    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c.dataset.name === name));
+    drawChips();
   }
 
-  function openAdd(chip, state = {}) {
+  const drawAdd = (changes = {}) => {
+    addState = { ...addState, ...changes };
+    render(addFormTemplate(addState), pop);
+  };
+
+  function openAdd(chip) {
+    render(nothing, pop);
     openName = ADD;
-    pop.innerHTML = addFormHtml(escapeHtml, state);
+    text = null;
+    addState = {};
+    drawAdd();
     pop.hidden = false;
     place(chip);
-    el.querySelectorAll(".ctx-chip").forEach((c) => c.classList.toggle("open", c === chip));
+    drawChips();
     pop.querySelector('input[name="url"]')?.focus();
   }
 
@@ -195,8 +221,7 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
     const url = form.elements.url.value.trim();
     const why = form.elements.why.value.trim();
     if (!id || !url) return;
-    const button = form.querySelector(".ctx-add-submit");
-    if (button) button.disabled = true;
+    drawAdd({ busy: true });
     try {
       const data = await api.add(id, { url, why: why || undefined });
       if (id !== sessionId) return;
@@ -205,32 +230,35 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
       toast(`Attached ${data.name}: the agent gets a note before your next message`);
     } catch (e) {
       if (id !== sessionId || openName !== ADD) return;
-      const chip = el.querySelector(".ctx-add");
-      if (chip) openAdd(chip, { url, error: String(e.message).replace(/ \(\d+\)$/, "") });
+      // The same form again: what the user typed stays; the URL gets focus.
+      drawAdd({ busy: false, error: String(e.message).replace(/ \(\d+\)$/, "") });
+      pop.querySelector('input[name="url"]')?.focus();
     }
   }
 
   function close() {
     openName = null;
+    text = null;
+    addState = {};
     pop.hidden = true;
-    el.querySelectorAll(".ctx-chip.open").forEach((c) => c.classList.remove("open"));
+    render(nothing, pop);
+    drawChips();
   }
 
   async function viewText() {
     const name = openName;
-    const pre = pop.querySelector(".ctx-pop-text");
-    if (!name || !pre) return;
+    if (!name || name === ADD) return;
     try {
       const data = await api.show(sessionId, name);
       if (name !== openName) return;
-      pre.textContent = data.text || "";
-      pre.hidden = false;
-      pop.querySelector('[data-act="view"]')?.remove();
+      const row = rows.find((r) => r.name === name);
+      if (!row) return;
+      text = data.text || "";
+      fill(row);
     } catch (e) {
       toast(`Can't read ${name}: ${String(e.message).replace(/ \(\d+\)$/, "")}`);
     }
   }
-
   async function detach() {
     const row = rows.find((r) => r.name === openName);
     if (!row) return;
@@ -279,7 +307,7 @@ export function createContextChips({ el, api, escapeHtml, toast = () => {}, doc
   });
   win.addEventListener("focus", () => refresh());
   // The ages move on by themselves.
-  win.setInterval(() => { if (rows.length) render(); }, 60_000);
+  win.setInterval(() => { if (rows.length) drawChips(); }, 60_000);
 
   return { load, clear, refresh, close, get rows() { return rows; } };
 }

data/lib/samagotchi/web/public/families_view.js

@@ -1,23 +1,44 @@
 // A parent's card with its delegates folded in (docs/sessions.md, the web):
-// the chip that opens the family's list, and the list's rows. Pure string
-// builders; app.js places them (inline in all sessions, a popover over the
-// strip) and binds the clicks.
-import { escapeHtml, ownerBadge, previewForCard, relativeTime } from "./format.js";
+// the chip that opens the family's list, and the list's rows, as lit-html
+// templates; lists_view.js places them (inline in all sessions, a popover
+// over the strip) and binds the clicks. Attributes after a bound one are
+// bound too, so they keep their order in the markup (lit sets bound ones
+// after the static ones).
+import { ownerBadge, previewForCard, relativeTime } from "./format.js";
 import { familySummary, stoppedBadge, waitingBadge } from "./sessions_list.js";
+import { html, nothing, render } from "./vendor/lit-html.js";
+import { keepFocus } from "./keep_focus.js";
 
 // The chip in a parent's meta row: "▸ 3 delegates · ● 1 live · 1 waiting"
 // (a waiting one in the attention colour), its tooltip the delegates by
-// state. "" for a family with no members.
+// state. nothing for a family with no members.
 // @param open whether the list is open (aria-expanded; the arrow turns)
-export function familyChipHtml(f, { open = false } = {}) {
+export function familyChipTemplate(f, { open = false } = {}) {
   const sum = familySummary(f);
-  if (!sum) return "";
+  if (!sum) return nothing;
   const waiting = sum.counts.waiting;
-  const liveHtml = sum.live ? `<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : "";
-  const waitingHtml = waiting ? ` · <span class="fc-waiting">${waiting} waiting</span>` : "";
-  return `<button type="button" class="family-chip${waiting ? " waiting" : ""}" aria-expanded="${open ? "true" : "false"}" title="${escapeHtml(sum.title)}"><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${liveHtml}${waitingHtml}</button>`;
+  const live = sum.live ? html`<span class="fc-live"> · <span class="live-dot" aria-hidden="true"></span>${sum.live} live</span>` : nothing;
+  const waitingT = waiting ? html` · <span class="fc-waiting">${waiting} waiting</span>` : nothing;
+  return html`<button type="button" class=${`family-chip${waiting ? " waiting" : ""}`} aria-expanded=${open ? "true" : "false"}
+    title=${sum.title}><span class="fc-arrow" aria-hidden="true">▸</span>${sum.total} ${sum.total === 1 ? "delegate" : "delegates"}${
+    live}${waitingT}</button>`;
 }
 
+// A row's status dot (a family's or a chain's): the waiting title over the
+// status when the session waits on the user.
+export function rowDotTemplate(s, waiting) {
+  const word = (waiting ? waiting.title : s.status) || "";
+  return html`<span class=${`status dot ${s.status || ""}${waiting ? " waiting" : ""}`} title=${word} aria-label=${word}></span>`;
+}
+
+// A row's waiting or stopped badge, and the archived one.
+export function rowBadgesTemplate(waiting, stopped) {
+  return html`${waiting ? html`<span class=${`attn attn-${waiting.kind}`} title=${waiting.title}>${waiting.text}</span>` : nothing}${
+    stopped ? html`<span class="stopped-badge" title=${stopped.title}>${stopped.text}</span>` : nothing}`;
+}
+
+export const archivedBadge = html`<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>`;
+
 // The family's list: one row per member, depth first, indented one step
 // per depth (--depth): status dot, preview, time, the waiting / stopped
 // badge, the owner badge, archived. A row's click opens that session.
@@ -25,7 +46,7 @@ export function familyChipHtml(f, { open = false } = {}) {
 // @param matchIds a search's matching members (.match; the rest .dim), or
 //   null without a search
 // @param archivable an archive button per row (all sessions, not in select mode)
-export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
+export function familyRowsTemplate(f, { activeId = null, matchIds = null, archivable = false, now = Date.now() } = {}) {
   const rows = f.members.map(({ session: s, depth }) => {
     const cls = ["family-row"];
     if (activeId && s.id === activeId) cls.push("active");
@@ -36,23 +57,17 @@ export function familyRowsHtml(f, { activeId = null, matchIds = null, archivable
     const stopped = waiting ? null : stoppedBadge(s);
     const owner = ownerBadge(s.owner, s.id);
     const ago = relativeTime(ts, now);
-    const dotWord = waiting ? waiting.title : s.status;
-    const parts = [
-      `<span class="status dot ${escapeHtml(s.status || "")}${waiting ? " waiting" : ""}" title="${escapeHtml(dotWord || "")}" aria-label="${escapeHtml(dotWord || "")}"></span>`,
-      `<span class="fr-preview">${escapeHtml(previewForCard(s))}</span>`,
-      waiting ? `<span class="attn attn-${waiting.kind}" title="${escapeHtml(waiting.title)}">${escapeHtml(waiting.text)}</span>` : "",
-      stopped ? `<span class="stopped-badge" title="${escapeHtml(stopped.title)}">${escapeHtml(stopped.text)}</span>` : "",
-      ago ? `<span class="time">${escapeHtml(ago)}</span>` : "",
-      owner ? `<span class="owner ${owner.kind}" title="${escapeHtml(owner.title)}">${escapeHtml(owner.text)}</span>` : "",
-      s.archived ? `<span class="archived-badge" title="Archived: hidden from the lists, kept for good">archived</span>` : "",
-    ].join("");
-    const short = escapeHtml(s.short_id || String(s.id).slice(0, 8));
-    const arch = !archivable ? "" : s.archived
-      ? `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Unarchive: back to the lists" aria-label="Unarchive session ${short}"></button>`
-      : `<button type="button" class="card-arch" data-arch="${escapeHtml(s.id)}" title="Archive: hide from the lists, keep for good" aria-label="Archive session ${short}"></button>`;
-    return `<div class="${cls.join(" ")}" data-id="${escapeHtml(s.id)}" style="--depth:${depth}" role="listitem"><button type="button" class="fr-open" title="${escapeHtml(`${s.id} · ${s.status || ""}`)}">${parts}</button>${arch}</div>`;
+    const short = s.short_id || String(s.id).slice(0, 8);
+    const arch = !archivable ? nothing : s.archived
+      ? html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Unarchive: back to the lists"} aria-label=${`Unarchive session ${short}`}></button>`
+      : html`<button type="button" class="card-arch" data-arch=${s.id} title=${"Archive: hide from the lists, keep for good"} aria-label=${`Archive session ${short}`}></button>`;
+    return html`<div class=${cls.join(" ")} data-id=${s.id} style=${`--depth:${depth}`} role=${"listitem"}><button type="button" class="fr-open"
+      title=${`${s.id} · ${s.status || ""}`}>${rowDotTemplate(s, waiting)}<span class="fr-preview">${previewForCard(s)}</span>${
+      rowBadgesTemplate(waiting, stopped)}${ago ? html`<span class="time">${ago}</span>` : nothing}${
+      owner ? html`<span class=${`owner ${owner.kind}`} title=${owner.title}>${owner.text}</span>` : nothing}${
+      s.archived ? archivedBadge : nothing}</button>${arch}</div>`;
   });
-  return `<div class="family-rows" role="list">${rows.join("")}</div>`;
+  return html`<div class="family-rows" role="list">${rows}</div>`;
 }
 
 // The widest window index.html lays out as a phone (@media (max-width:600px)).
@@ -61,11 +76,13 @@ export const PHONE_MAX_PX = 600;
 // The strip's family popover: one #familyPop in body (position: fixed, so
 // the strip's sideways scroll on a phone doesn't clip it), under the chip
 // it was opened from and as wide as that card (300 px at least, inside the
-// window; on a phone, the window less 16 px gutters). The strip draws again on every hub event: refresh() then finds
-// the new chip for the same head, rewrites the rows only when they changed,
+// window; on a phone, the window less 16 px gutters). The strip draws again
+// on every hub event: refresh() then finds the new chip for the same head,
+// draws the rows again (lit writes only what changed: a row keeps its
+// nodes, reused by position, so keepFocus keeps the focus on its session)
 // and closes when the family is gone.
-// @param rowsFor (headId) → the rows' html, or null when the family has no
-//   members (any more)
+// @param rowsFor (headId) → the rows' template, or null when the family
+//   has no members (any more)
 // @param anchorFor (headId) → its chip in the strip, or null
 // @param onPick (id) a row's click
 // @param onClose () after it closed (the strip's held order catches up)
@@ -73,7 +90,6 @@ export const PHONE_MAX_PX = 600;
 export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor, onPick, onClose = () => {} }) {
   let el = null;
   let headId = null;
-  let html = "";
 
   const element = () => {
     if (el) return el;
@@ -110,10 +126,8 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
       close();
       return false;
     }
-    if (rows !== html) {
-      el.innerHTML = rows;
-      html = rows;
-    }
+    // A row inserted before the focused one: the focus stays on its session.
+    keepFocus(el, "data-id", () => render(rows, el));
     anchor.setAttribute("aria-expanded", "true");
     place(anchor);
     return true;
@@ -123,7 +137,6 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     if (headId && headId !== id) close();
     headId = id;
     element().hidden = false;
-    html = "";
     draw();
   }
 
@@ -131,9 +144,8 @@ export function createFamilyPop({ id = "familyPop", doc, win, rowsFor, anchorFor
     if (!headId) return;
     anchorFor(headId)?.setAttribute("aria-expanded", "false");
     headId = null;
-    html = "";
     el.hidden = true;
-    el.innerHTML = "";
+    render(nothing, el);
     onClose();
   }