flexdesk 0.18.0 → 0.18.1

package/dist/widgets.js

@@ -23,7 +23,7 @@ import {
   toastInfo,
   toastSuccess,
   toastWarn
-} from "./chunk-5W4EEKSK.js";
+} from "./chunk-3BLIVOFD.js";
 import {
   StateMachine
 } from "./chunk-3PHCPZHT.js";
@@ -54,15 +54,12 @@ import {
 import {
   ColorListField,
   SortableList,
-  attachInputOptions,
-  createCombobox,
-  createOptionList,
   hideContextMenu,
   openConfirm,
   openForm,
   openModal,
   showContextMenu
-} from "./chunk-RKVYIXDC.js";
+} from "./chunk-NFZJ6P42.js";
 import {
   ACTIONS,
   AutocompleteField,
@@ -109,7 +106,7 @@ import {
   resolvePaging,
   toTSV,
   tsvCell
-} from "./chunk-U5GKJUOC.js";
+} from "./chunk-QRBOIUU3.js";
 import {
   ROW_CONTROL_SELECTOR,
   endsTextSelection,
@@ -122,10 +119,13 @@ import {
   DEFAULT_WINDOW_STORAGE_KEY,
   ManagedWindow,
   ToggleField,
+  attachInputOptions,
+  createCombobox,
+  createOptionList,
   fireEvent,
   isHexColor,
   normalizeHex
-} from "./chunk-ZL3VKINP.js";
+} from "./chunk-HL3IIHU3.js";
 import {
   choiceSections,
   filterSections,
@@ -3142,6 +3142,7 @@ function mountChatShell(host, {
     closeReply("stopped");
     machine.cancel();
     if (sent) callCancel(request);
+    else runEnding = null;
     syncWelcome();
     changed();
     return true;
@@ -3213,6 +3214,7 @@ function mountChatShell(host, {
   const modelBtn = el3("button", "twm-chat-shell__model-btn");
   modelBtn.type = "button";
   modelBtn.setAttribute("aria-haspopup", "menu");
+  modelBtn.setAttribute("aria-expanded", "false");
   const modelDot = el3("span", "twm-chat-shell__status");
   const modelLabel = el3("span", "twm-chat-shell__model-label");
   modelBtn.append(modelDot, modelLabel, icon2("expand_more", "twm-chat-shell__model-chevron"));
@@ -3887,6 +3889,25 @@ function createFilterModel({
     if (value !== void 0) clause.value = value;
     return clause;
   }
+  function valueFits(field, op, value) {
+    const errors = [];
+    validateClause({ field: field.key, op: op.id, value }, errors, "");
+    if (errors.length) return false;
+    const options = op.multi || field.type === "enum" ? filterOptions(field) : [];
+    return !options.length || arr(value).every((v) => options.some((o) => o.value === v));
+  }
+  function moveClause(clause, key) {
+    const next = newClause(key);
+    if (!next) return null;
+    const field = byKey.get(key);
+    const op = operatorsFor(key).find((o) => o.id === clause.op);
+    if (!op) return next;
+    next.op = op.id;
+    delete next.value;
+    const value = op.arity && valueFits(field, op, clause.value) ? clause.value : defaultValue(field, op);
+    if (value !== void 0) next.value = value;
+    return next;
+  }
   function compileClause(clause) {
     const field = byKey.get(clause?.field);
     if (!field) {
@@ -4066,26 +4087,30 @@ function createFilterModel({
       const [a, b] = arr(value);
       return `${shown(a)} and ${shown(b)}`;
     }
-    return shown(first(value));
+    return Array.isArray(value) ? value.map(shown).join(", ") : shown(value);
   }
-  function describeNode(node2, depth, format) {
+  function describeNode(node2, depth, opts) {
     if (!node2) return "";
     if (node2.kind === "clause") {
       const field = byKey.get(node2.field);
-      if (!field) return `\u26A0 unknown field \u201C${unknownName(String(node2.field ?? ""))}\u201D`;
-      const op = catalogue.get(node2.op);
-      if (!op) return `${field.label} ${node2.op ?? ""}`.trim();
-      const val = describeValue(field, op, node2.value, format);
-      return val ? `${field.label} ${op.label} ${val}` : `${field.label} ${op.label}`;
+      const op = catalogue.get(node2.op) ?? { label: node2.op ?? "", arity: 1 };
+      const subject = field ? field.label : `\u26A0 unknown field \u201C${unknownName(String(node2.field ?? ""))}\u201D`;
+      const value = describeValue(field, op, node2.value, field ? opts.formatValue : null);
+      return [subject, op.label, value].filter(Boolean).join(" ");
     }
     if (node2.kind !== "group") return `\u26A0 ${JSON.stringify(node2.node ?? node2)}`;
-    const parts = (Array.isArray(node2.children) ? node2.children : []).map((c) => describeNode(c, depth + 1, format)).filter(Boolean);
+    const parts = (Array.isArray(node2.children) ? node2.children : []).map((c) => describeNode(c, depth + 1, opts)).filter(Boolean);
     if (!parts.length) return emptyMatches(node2) !== !!node2.negate ? "everything" : "nothing";
     const joined = parts.join(String(node2.op || "AND").toUpperCase() === "OR" ? " OR " : " AND ");
+    const many = parts.length > 1;
+    if (opts.groupBrackets) {
+      const group = many ? `(${joined})` : joined;
+      return node2.negate ? `NOT ${group}` : group;
+    }
     if (node2.negate) return `NOT (${joined})`;
-    return depth > 0 && parts.length > 1 ? `(${joined})` : joined;
+    return depth > 0 && many ? `(${joined})` : joined;
   }
-  const describeFilter = (expr, { formatValue = null } = {}) => describeNode(expr, 0, formatValue);
+  const describeFilter = (expr, { formatValue = null, groupBrackets = false } = {}) => describeNode(expr, 0, { formatValue, groupBrackets });
   function unknownFields(expr) {
     const out = /* @__PURE__ */ new Set();
     const walk = (n) => {
@@ -4112,13 +4137,13 @@ function createFilterModel({
     }
     if (op.arity === 0) return;
     const say = (what) => errors.push(`${field.label} ${op.label}: ${what}`);
-    if (op.multi) {
-      if (!Array.isArray(node2.value) || node2.value.length === 0) say("pick at least one value");
+    if (op.multi && (!Array.isArray(node2.value) || node2.value.length === 0)) {
+      say("pick at least one value");
       return;
     }
-    const values = op.arity === 2 ? arr(node2.value).slice(0, 2) : [first(node2.value)];
+    const values = op.multi ? node2.value : op.arity === 2 ? arr(node2.value).slice(0, 2) : [first(node2.value)];
     const needed = op.arity === 2 ? 2 : 1;
-    if (values.length < needed || values.some(isBlank)) {
+    if (!op.multi && (values.length < needed || values.some(isBlank))) {
       say(needed === 2 ? "needs two values" : "needs a value");
       return;
     }
@@ -4154,6 +4179,24 @@ function createFilterModel({
     validateNode(expr, errors, "expr");
     return { ok: errors.length === 0, errors };
   }
+  function partialRanges(expr) {
+    const said = [];
+    const walk = (node2) => {
+      if (node2?.kind === "group") {
+        (Array.isArray(node2.children) ? node2.children : []).forEach(walk);
+        return;
+      }
+      if (node2?.kind !== "clause") return;
+      const field = byKey.get(node2.field);
+      const op = catalogue.get(node2.op);
+      if (!field || op?.arity !== 2 || op.multi) return;
+      const ends = arr(node2.value).slice(0, 2);
+      const filled = ends.filter((v) => !isBlank(v)).length;
+      if (filled === 1) said.push(`${field.label} ${op.label}: needs two values`);
+    };
+    walk(expr);
+    return said;
+  }
   function prune(node2) {
     if (!node2 || typeof node2 !== "object") return null;
     if (node2.kind === "clause") {
@@ -4177,6 +4220,7 @@ function createFilterModel({
     operatorById,
     defaultValue,
     newClause,
+    moveClause,
     emptyMatches,
     unknownName,
     matcherFor,
@@ -4184,7 +4228,8 @@ function createFilterModel({
     describeFilter,
     validateFilter,
     unknownFields,
-    pruneFilter
+    pruneFilter,
+    partialRanges
   });
 }
 
@@ -4532,18 +4577,21 @@ function createFilterBuilder(host, { model, value = null, onChange = null } = {}
   function operatorChoices(clause) {
     const offered = model.operatorsFor(clause.field);
     const held = model.operatorById(clause.op);
-    const list = held && model.fieldByKey(clause.field) && !offered.includes(held) ? [...offered, held] : offered;
+    const list = held && !offered.includes(held) ? [...offered, held] : offered;
     return list.map((op) => ({ value: op.id, label: op.label }));
   }
   function clauseEl(clause) {
     const row = el("div", "twm-filter-builder__row");
+    const known = !!model.fieldByKey(clause.field);
+    const unknownWords = `\u26A0 unknown field \u201C${model.unknownName(String(clause.field ?? ""))}\u201D`;
     const fieldSelect = selectBox(fieldChoices(clause.field), clause.field, {
       label: "Field",
-      className: `${SELECT_CLASS} twm-filter-builder__select--field`,
-      notFound: () => `\u26A0 unknown field \u201C${model.unknownName(String(clause.field ?? ""))}\u201D`
+      className: `${SELECT_CLASS} twm-filter-builder__select--field${known ? "" : " twm-filter-builder__select--unknown"}`,
+      notFound: () => unknownWords
     });
+    if (!known) fieldSelect.box.title = unknownWords;
     fieldSelect.box.addEventListener("change", () => {
-      const next = model.newClause(fieldSelect.valueOf());
+      const next = model.moveClause(clause, fieldSelect.valueOf());
       for (const key of ["op", "value"]) delete clause[key];
       Object.assign(clause, next);
       restructure(clause, "field");
@@ -4581,7 +4629,7 @@ function createFilterBuilder(host, { model, value = null, onChange = null } = {}
   function drawValue(clause, cellEl, cell, drawCell) {
     const field = model.fieldByKey(clause.field);
     const op = model.operatorById(clause.op);
-    if (!field || !op) {
+    if (!field || !op || op.arity && !model.operatorsFor(clause.field).includes(op)) {
       if (clause.value !== void 0) {
         cellEl.appendChild(el("span", "twm-filter-builder__carried", JSON.stringify(clause.value)));
       }
@@ -4635,6 +4683,7 @@ function createFilterBuilder(host, { model, value = null, onChange = null } = {}
     if (numeric) {
       input.type = "number";
       input.step = "any";
+      if (op.input === "days") input.min = "0";
     } else if (field.type === "date") {
       input.type = field.time ? "datetime-local" : "date";
     } else {
@@ -4814,6 +4863,7 @@ async function openFilterDialog({
   requireValid = true,
   prune = false,
   confirmDiscard = false,
+  dismissOnBackdrop = false,
   submitLabel = "Apply",
   onSubmit = null,
   clearLabel = null,
@@ -4822,10 +4872,11 @@ async function openFilterDialog({
   height = 560
 } = {}) {
   if (!model) throw new Error("[FilterDialog] needs a filter model");
-  const start = asRoot(value);
-  if (seedField) {
-    const seeded = model.newClause(seedField);
-    if (seeded) start.children.push(seeded);
+  let start = asRoot(value);
+  const seeded = seedField ? model.newClause(seedField) : null;
+  if (seeded) {
+    if (start.negate) start = { kind: "group", op: "AND", children: [start, seeded] };
+    else start.children.push(seeded);
   }
   const content = el("div", "twm-filter-dialog");
   if (head) content.appendChild(head);
@@ -4895,9 +4946,12 @@ async function openFilterDialog({
     const expr = builder.getValue();
     return prune ? model.pruneFilter(expr) : expr;
   }
-  const checkOf = (expr) => expr ? model.validateFilter(expr) : { ok: true, errors: [] };
+  const refusals = (expr) => {
+    if (!expr) return [];
+    return requireValid ? model.validateFilter(expr).errors : model.partialRanges(expr);
+  };
   const nameMissing = () => !!nameInput && name.required !== false && !nameInput.value.trim();
-  const canSubmit = () => !busy && !nameMissing() && (!requireValid || checkOf(current()).ok);
+  const canSubmit = () => !busy && !nameMissing() && !refusals(current()).length;
   function refresh() {
     if (!controls) return;
     for (const { value: value2 } of modalActions) {
@@ -4914,11 +4968,11 @@ async function openFilterDialog({
   }
   function drawPreview() {
     const expr = current();
-    const { ok, errors } = checkOf(expr);
+    const errors = refusals(expr);
     previewRun?.abort();
     previewRun = null;
-    const blocked = requireValid && !ok;
-    showErrors(blocked ? errors : []);
+    const blocked = errors.length > 0;
+    showErrors(errors);
     if (!preview) return;
     slot.hidden = blocked;
     if (blocked) {
@@ -4954,11 +5008,15 @@ async function openFilterDialog({
     showFailure("");
     busy = true;
     try {
-      if (action.confirm && !await openConfirm(action.confirm)) return;
-      refresh();
       const result = { action: action.value, expr: action.value === CLEAR ? null : current() };
       if (nameInput) result.name = nameInput.value.trim();
       if (picker) result.icon = picker.value();
+      if (action.confirm) {
+        const { message } = action.confirm;
+        const asked = typeof message === "function" ? { ...action.confirm, message: message(result) } : action.confirm;
+        if (!await openConfirm(asked)) return;
+      }
+      refresh();
       await action.run?.(result);
       close(result);
     } catch (err) {
@@ -4999,9 +5057,12 @@ async function openFilterDialog({
     height,
     maximizable: true,
     beforeClose: mayDiscard,
+    dismissOnBackdrop,
     onMount: (_body, modalControls) => {
       controls = modalControls;
       refresh();
+      nameInput?.focus();
+      nameInput?.select();
     }
   });
   drawPreview();
@@ -9198,8 +9259,11 @@ function keyedChildren(container, build, update) {
       if (!next.has(key)) entry.node.remove();
     }
     drawn = next;
+    const focused = document.activeElement;
     nodes.forEach((node2, index) => {
-      if (container.children[index] !== node2) {
+      if (node2.contains(focused)) {
+        while (container.children[index] !== node2) container.append(container.children[index]);
+      } else if (container.children[index] !== node2) {
         container.insertBefore(node2, container.children[index] || null);
       }
     });
@@ -9375,6 +9439,7 @@ function createPickerSwitcher({
   let activeKey = null;
   let activeNode = null;
   let moved = false;
+  const rovingKeys = {};
   let nextEntryId = 0;
   const kept = /* @__PURE__ */ new Map();
   const idOf = (item) => String(describe(item, { current: false }).id);
@@ -9444,6 +9509,7 @@ function createPickerSwitcher({
     const node2 = part("div", "twm-wspicker__row");
     node2.id = `${uid}-row-${++nextEntryId}`;
     node2.setAttribute("role", "option");
+    node2.tabIndex = -1;
     const icon2 = glyph("", "twm-wspicker__row-icon");
     const text = part("span", "twm-wspicker__row-text");
     const name = part("span", "twm-wspicker__row-name");
@@ -9483,6 +9549,7 @@ function createPickerSwitcher({
     const disabled = !!model.disabled;
     paintRow(entry, { ...model, disabled, isCurrentRow: isCurrent(item) });
     entry.run = disabled ? null : () => pick(item);
+    if (disabled) entry.node.tabIndex = -1;
     const removable = !!onRemove && model.removable !== false;
     entry.remove = removable ? () => removeItem(item) : null;
     show(entry.bin, removable);
@@ -9594,6 +9661,15 @@ function createPickerSwitcher({
     }
     for (const [key, entry] of drawnFoot) next.push({ key: `foot:${key}`, node: entry.node, run: entry.run });
     stops = next;
+    syncTabStops();
+  }
+  function syncTabStops() {
+    const currentKey = current == null ? null : `row:${idOf(current)}`;
+    for (const prefix of ["row:", "action:"]) {
+      const rows = stops.filter((s) => s.key.startsWith(prefix));
+      const chosen = rows.find((s) => s.key === rovingKeys[prefix]) ?? rows.find((s) => s.key === currentKey) ?? rows[0];
+      for (const stop of rows) stop.node.tabIndex = stop === chosen ? 0 : -1;
+    }
   }
   function paintActive() {
     const stop = stops.find((s) => s.key === activeKey) ?? null;
@@ -9616,19 +9692,29 @@ function createPickerSwitcher({
     }
     if (!moved || !stops.some((s) => s.key === activeKey)) {
       reveal = moved;
+      const at = document.activeElement;
+      if (moved && isOpen && (at === document.body || panel.contains(at) && at !== input)) input.focus();
       moved = false;
       activeKey = stops.find((s) => s.primary)?.key ?? null;
     }
     paintActive();
     if (reveal) revealActive();
   }
-  function move(step) {
-    if (!stops.length) return;
-    const at = stops.findIndex((s) => s.key === activeKey);
-    const next = at === -1 ? step > 0 ? 0 : stops.length - 1 : (at + step + stops.length) % stops.length;
-    activeKey = stops[next].key;
+  function focusStop(stop) {
+    activeKey = stop.key;
     moved = true;
+    stop.node.focus({ preventScroll: true });
     paintActive();
+  }
+  function move(step) {
+    const walk = [input, ...stops.map((s) => s.node)];
+    const from = document.activeElement === input && moved ? activeNode : document.activeElement;
+    const next = walk[(walk.indexOf(from) + step + walk.length) % walk.length];
+    if (next === input) {
+      input.focus();
+      return;
+    }
+    focusStop(stops.find((s) => s.node === next));
     revealActive();
   }
   function render() {
@@ -9652,7 +9738,7 @@ function createPickerSwitcher({
     if (remaining > 0) {
       setText2(moreLabel, labels.loadMore({ next: Math.min(pageSize, remaining), shown: items.length, total }));
     }
-    more.disabled = loading || loadingMore;
+    more.setAttribute("aria-disabled", String(loading || loadingMore));
     collectStops(rowEntries, actionEntries, shown);
     settleActive();
   }
@@ -9745,7 +9831,11 @@ function createPickerSwitcher({
       }
     }
     renderEverything();
-    if (byKey && stayed) revealActive();
+    if (stayed) {
+      const stop = stops.find((s) => s.key === activeKey);
+      if (stop) focusStop(stop);
+      if (byKey) revealActive();
+    }
   }
   more.addEventListener("click", () => loadMore());
   function setBusy(waiting) {
@@ -9758,6 +9848,7 @@ function createPickerSwitcher({
     const removedKey = `row:${idOf(item)}`;
     const at = stops.findIndex((s) => s.key === removedKey);
     const following = stops.slice(at + 1).find((s) => s.key.startsWith("row:")) ?? stops.slice(0, Math.max(at, 0)).reverse().find((s) => s.key.startsWith("row:"));
+    const fromRow = stops[at]?.node === document.activeElement;
     setBusy(true);
     let outcome;
     try {
@@ -9781,6 +9872,11 @@ function createPickerSwitcher({
         moved = true;
       }
       ask(remote ? answered : "");
+      if (fromRow && following) {
+        focusStop(following);
+        revealActive();
+        return;
+      }
     }
     input.focus();
   }
@@ -9847,6 +9943,8 @@ function createPickerSwitcher({
     pickFirst = false;
     moved = false;
     activeKey = null;
+    delete rovingKeys["row:"];
+    delete rovingKeys["action:"];
     const last = kept.get(cacheKey());
     items = last ? [...last.items] : [];
     total = last ? last.total : null;
@@ -9902,6 +10000,24 @@ function createPickerSwitcher({
   panel.addEventListener("mousedown", (event) => {
     if (event.target !== input) event.preventDefault();
   });
+  panel.addEventListener("focusin", ({ target, relatedTarget }) => {
+    if (target === input) {
+      if (panel.contains(relatedTarget)) {
+        moved = false;
+        settleActive();
+      }
+      return;
+    }
+    const stop = stops.find((s) => s.node === target);
+    if (!stop) return;
+    activeKey = stop.key;
+    moved = true;
+    selectId = null;
+    const prefix = ["row:", "action:"].find((p) => stop.key.startsWith(p));
+    if (prefix) rovingKeys[prefix] = stop.key;
+    syncTabStops();
+    paintActive();
+  });
   input.addEventListener("input", () => {
     moved = false;
     scroller.scrollTop = 0;
@@ -9922,21 +10038,27 @@ function createPickerSwitcher({
       event.preventDefault();
       event.stopPropagation();
     };
+    const stop = stops.find((s) => s.node === target);
     if (key === "Escape") {
       handled();
       close({ restoreFocus: true });
     } else if (key === "ArrowDown" || key === "ArrowUp") {
       handled();
-      if (document.activeElement !== input) input.focus();
       move(key === "ArrowDown" ? 1 : -1);
     } else if (key === "Enter" && target === input) {
       handled();
       enter();
-    } else if (key === "Delete" && shiftKey && target === input) {
+    } else if ((key === "Enter" || key === " ") && stop) {
+      handled();
+      stop.run();
+    } else if (key === "Delete" && shiftKey) {
       handled();
       stops.find((s) => s.key === activeKey)?.remove?.();
     } else if (key === "Backspace" && target !== input) {
       handled();
+    } else if (target !== input && key.length === 1 && key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.stopPropagation();
+      input.focus();
     }
   });
   panel.addEventListener("focusout", (event) => {
@@ -11460,6 +11582,8 @@ var currentTarget = null;
 var listenersAttached = false;
 var mouseCheckInterval = null;
 var lastMousePosition = { x: 0, y: 0 };
+var focusTarget = null;
+var byKeyboard = false;
 function createTooltipElement() {
   if (tooltipElement) return tooltipElement;
   tooltipElement = document.createElement("div");
@@ -11538,11 +11662,12 @@ function showTooltip(target) {
   const hasLatex = target.classList && target.classList.contains("has-latex-tooltip");
   const hasPlain = target.classList && target.classList.contains("twm-has-tooltip");
   if (!hasLatex && !hasPlain) return;
+  if (!target.getAttribute(hasLatex ? "data-latex-tooltip" : "data-tooltip")) return;
+  stopMouseCheck();
   currentTarget = target;
   const tooltip = createTooltipElement();
   if (hasLatex) {
     const latex = target.getAttribute("data-latex-tooltip");
-    if (!latex) return;
     try {
       if (typeof katex !== "undefined") {
         katex.render(latex, tooltip, {
@@ -11559,7 +11684,6 @@ function showTooltip(target) {
     }
   } else if (hasPlain) {
     const text = target.getAttribute("data-tooltip");
-    if (!text) return;
     const formattedText = text.replace(/&#10;/g, "\n");
     const lines = formattedText.split("\n");
     tooltip.innerHTML = "";
@@ -11578,9 +11702,10 @@ function showTooltip(target) {
   const widthOverride = target.getAttribute("data-tooltip-max-width");
   tooltip.style.maxWidth = widthOverride || "";
   requestAnimationFrame(() => {
+    if (currentTarget !== target) return;
     positionTooltip(target, tooltip);
     tooltip.classList.add("visible");
-    startMouseCheck();
+    if (focusTarget !== target) startMouseCheck();
   });
 }
 function hideTooltip() {
@@ -11588,15 +11713,34 @@ function hideTooltip() {
     tooltipElement.classList.remove("visible");
   }
   currentTarget = null;
+  focusTarget = null;
+  stopMouseCheck();
+}
+function stopMouseCheck() {
   if (mouseCheckInterval) {
     clearInterval(mouseCheckInterval);
     mouseCheckInterval = null;
   }
 }
+function pointerGone() {
+  const held = focusTarget;
+  if (held && held === currentTarget) return;
+  hideTooltip();
+  if (!held) return;
+  focusTarget = held;
+  showTooltip(held);
+  requestAnimationFrame(() => {
+    if (held === focusTarget && held === currentTarget) followFocus();
+  });
+}
+function followFocus() {
+  const { left, top, width, height } = focusTarget.getBoundingClientRect();
+  const inSight = focusTarget.contains(document.elementFromPoint(left + width / 2, top + height / 2));
+  tooltipElement.classList.toggle("visible", inSight);
+  if (inSight) positionTooltip(focusTarget, tooltipElement);
+}
 function startMouseCheck() {
-  if (mouseCheckInterval) {
-    clearInterval(mouseCheckInterval);
-  }
+  stopMouseCheck();
   mouseCheckInterval = setInterval(() => {
     if (!currentTarget) {
       clearInterval(mouseCheckInterval);
@@ -11607,10 +11751,10 @@ function startMouseCheck() {
     if (elementUnderMouse) {
       const isStillOnTarget = elementUnderMouse === currentTarget || currentTarget.contains(elementUnderMouse) || elementUnderMouse.closest(".twm-has-tooltip, .has-latex-tooltip") === currentTarget;
       if (!isStillOnTarget) {
-        hideTooltip();
+        pointerGone();
       }
     } else {
-      hideTooltip();
+      pointerGone();
     }
   }, 3e3);
 }
@@ -11636,9 +11780,33 @@ function attachListeners() {
     if (!(target instanceof Element)) return;
     const tooltipTarget = target.closest(".has-latex-tooltip, .twm-has-tooltip");
     if (!tooltipTarget) return;
-    hideTooltip();
+    pointerGone();
+  }, true);
+  window.addEventListener("keydown", (event) => {
+    if (!event.ctrlKey && !event.metaKey && !event.altKey) byKeyboard = true;
+  }, true);
+  window.addEventListener("pointerdown", () => {
+    byKeyboard = false;
+  }, true);
+  document.addEventListener("focusin", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element) || !byKeyboard) return;
+    const tooltipTarget = target.closest(".has-latex-tooltip, .twm-has-tooltip");
+    if (!tooltipTarget) return;
+    focusTarget = tooltipTarget;
+    showTooltip(tooltipTarget);
+  }, true);
+  document.addEventListener("focusout", (event) => {
+    if (!focusTarget) return;
+    const next = event.relatedTarget;
+    if (next instanceof Node && focusTarget.contains(next)) return;
+    if (focusTarget === currentTarget) hideTooltip();
+    else focusTarget = null;
+  }, true);
+  document.addEventListener("scroll", () => {
+    if (focusTarget && focusTarget === currentTarget) followFocus();
+    else pointerGone();
   }, true);
-  document.addEventListener("scroll", hideTooltip, true);
   document.addEventListener("keydown", (event) => {
     if (event.key === "Escape") {
       hideTooltip();