@nanocollective/roster 0.1.0-alpha.3 → 0.1.0-alpha.31

package/templates/portal/js/lightbox.js

@@ -0,0 +1,273 @@
+/* Looking properly at a picture.
+ *
+ * An image inside a document is laid out for the page it is in, which for a screenshot of a
+ * user interface means unreadable: the thing you wanted to see is the small print. Every other
+ * surface here has an answer for "show me that bigger" and this one did not.
+ *
+ * So any image the portal renders as *content* opens over the page, fitted to the window, and
+ * zooms. Gallery tiles are deliberately not included: they already have a click, which opens
+ * the file, and the file's own view is one of the images this does catch.
+ *
+ * Deliberately not a `<dialog>`. The rest of the portal uses one, and it is right for a form,
+ * but this needs its own key handling, wheel handling and pointer capture, and `showModal`
+ * brings a focus trap and a backdrop that then have to be worked around rather than used.
+ */
+
+import { el } from "./dom.js";
+import { icon } from "./icons.js";
+
+/** Images that open. `.md img` is every rendered document; `zoomable` is opt-in elsewhere. */
+const SELECTOR = ".md img, img.zoomable";
+
+const MIN_SCALE = 0.1;
+
+/**
+ * How far in it will go, and why it is not just a number.
+ *
+ * A scaled `<img>` is a composited layer, and the compositor allocates it at the *rendered*
+ * size. A flat ceiling of 16 turned a 1544x784 screenshot into a 310-megapixel layer, about
+ * 1.2GB of texture, and froze the tab for the best part of a minute. That is not a zoom level
+ * anybody asked for; it is a number that was never checked against a real picture.
+ *
+ * So the ceiling comes off the image. The budget is what may be rendered at once; the floor of
+ * 1 keeps actual size reachable however large the source is, and the cap of 8 stops a 100px
+ * icon being allowed to fill a wall.
+ */
+const MAX_RENDERED_PIXELS = 16e6;
+const ABSOLUTE_MAX = 8;
+
+export function maxScaleFor(natural) {
+  const px = (natural.width || 1) * (natural.height || 1);
+  return Math.min(ABSOLUTE_MAX, Math.max(1, Math.sqrt(MAX_RENDERED_PIXELS / px)));
+}
+
+let open = null;
+
+/**
+ * Zoom about a point, as arithmetic.
+ *
+ * The pixel under the cursor has to stay under the cursor. Without that the image drifts away
+ * from whatever you were trying to look at, which is the difference between a zoom and a
+ * nuisance, and it is the one part of this that is wrong in a way no screenshot shows.
+ *
+ * Pure, and separate from the element, so it can be checked rather than eyeballed.
+ *
+ * @param at     {scale, tx, ty}, the current transform
+ * @param px,py  the fixed point, in stage coordinates
+ * @param max    the ceiling, from `maxScaleFor`
+ * @returns the new transform, or `at` unchanged when it is already against a stop
+ */
+export function zoomAbout(at, factor, px, py, max = ABSOLUTE_MAX) {
+  const scale = Math.min(max, Math.max(MIN_SCALE, at.scale * factor));
+  if (scale === at.scale) return at;
+  const k = scale / at.scale;
+  return { scale, tx: px - (px - at.tx) * k, ty: py - (py - at.ty) * k };
+}
+
+/**
+ * The fitted transform: the whole thing visible, centred, and never enlarged to get there.
+ *
+ * Blowing a 200px image up to fill a 1400px window is not "fitting" it, it is making it worse,
+ * so the scale is capped at 1 and a small picture sits small in the middle.
+ */
+export function fitInside(natural, stage) {
+  const [w, h] = [natural.width || 1, natural.height || 1];
+  const [bw, bh] = [stage.width || 1, stage.height || 1];
+  const scale = Math.min(bw / w, bh / h, 1);
+  return { scale, tx: (bw - w * scale) / 2, ty: (bh - h * scale) / 2 };
+}
+
+/**
+ * One delegated listener, installed at boot.
+ *
+ * Per-image handlers would have to be attached by every render site, and there are four of
+ * them: markdown in a doc page, markdown in a brain document, an image surface, and the file
+ * viewer. A render that forgot would be an image that silently does not open, which is exactly
+ * the sort of thing nobody notices for a month.
+ */
+export function installLightbox() {
+  document.addEventListener?.("click", (e) => {
+    const img = e.target?.closest?.(SELECTOR);
+    if (!img || !img.currentSrc && !img.getAttribute?.("src")) return;
+    // A picture inside a link is the link's to handle. Following it is what was asked for.
+    if (img.closest("a")) return;
+    e.preventDefault();
+    show(img.currentSrc || img.getAttribute("src"), img.getAttribute("alt") || "");
+  });
+
+  /* Navigating away closes it. The overlay is appended to the body rather than into the view,
+     so without this it outlives the page it was opened from: a doc image left open over the
+     Inbox, with no obvious relationship to anything on screen. */
+  addEventListener?.("hashchange", close);
+}
+
+/** Open one. Exported so a caller with a src and no element can use it too. */
+export function show(src, alt = "") {
+  close();
+
+  const img = el("img", { src, alt, draggable: false });
+  const stage = el("div", { className: "lbstage" }, [img]);
+
+  const caption = alt ? el("figcaption", { className: "lbcap", textContent: alt }) : null;
+  const shut = el("button", {
+    className: "lbx",
+    title: "Close (Esc)",
+    "aria-label": "Close",
+  }, [icon("close", "ic")]);
+  const hint = el("span", {
+    className: "lbhint",
+    textContent: "scroll to zoom · drag to move · click to fit",
+  });
+
+  /* Zoom has always worked from the keyboard and the wheel. Neither is discoverable, and on a
+     mouse without a usable wheel the keyboard was the only way in at all.
+     The percentage is a button rather than a readout: "how big is this" and "put it back" are
+     the same question, and it is the one control here that says what the state is. */
+  const out = el("button", {
+    className: "lbctl",
+    title: "Zoom out (-)",
+    "aria-label": "Zoom out",
+  }, [icon("dash", "ic")]);
+  const level = el("button", { className: "lbctl lblevel", title: "Fit to the window (0)" });
+  const into = el("button", {
+    className: "lbctl",
+    title: "Zoom in (+)",
+    "aria-label": "Zoom in",
+  }, [icon("plus", "ic")]);
+  const zoombar = el("div", { className: "lbzoom" }, [out, level, into]);
+
+  const box = el("div", {
+    className: "lightbox",
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": alt || "image",
+  }, [stage, shut, hint, zoombar, ...(caption ? [caption] : [])]);
+
+  /* Scale and offset are kept here rather than read back off the transform, because reading a
+     matrix back and re-deriving them accumulates error over a few dozen wheel events. */
+  let scale = 1;
+  let fit = 1;
+  let ceiling = ABSOLUTE_MAX;
+  let tx = 0;
+  let ty = 0;
+
+  const draw = () => {
+    img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+    box.dataset.zoomed = String(scale > fit * 1.001);
+    /* Percentage of actual size, not of fitted: 100% has to mean one image pixel per screen
+       pixel, or the number is about the window rather than about the picture. */
+    level.textContent = `${Math.round(scale * 100)}%`;
+    // Disabled at the stops, because a button that does nothing reads as a broken one.
+    out.disabled = scale <= MIN_SCALE + 1e-9;
+    into.disabled = scale >= ceiling - 1e-9;
+  };
+
+  const reset = () => {
+    const natural = {
+      width: img.naturalWidth || img.width,
+      height: img.naturalHeight || img.height,
+    };
+    const at = fitInside(natural, stage.getBoundingClientRect?.() ?? { width: 0, height: 0 });
+    fit = at.scale;
+    ceiling = maxScaleFor(natural);
+    ({ scale, tx, ty } = at);
+    draw();
+  };
+
+  const zoomAt = (factor, px, py) => {
+    ({ scale, tx, ty } = zoomAbout({ scale, tx, ty }, factor, px, py, ceiling));
+    draw();
+  };
+
+  const centre = () => {
+    const r = stage.getBoundingClientRect?.() ?? { width: 0, height: 0 };
+    return [r.width / 2, r.height / 2];
+  };
+
+  img.addEventListener("load", reset);
+  if (img.complete) reset();
+
+  box.addEventListener(
+    "wheel",
+    (e) => {
+      e.preventDefault();
+      const r = stage.getBoundingClientRect();
+      // ctrl+wheel is what a trackpad pinch arrives as, and it comes in much larger steps.
+      const step = e.ctrlKey ? 0.01 : 0.0015;
+      zoomAt(Math.exp(-e.deltaY * step), e.clientX - r.left, e.clientY - r.top);
+    },
+    { passive: false },
+  );
+
+  /* Drag to pan, and the same gesture decides what a release means: a press that moved is a
+     pan, a press that did not is a click. Without the distance test, panning an image always
+     ended by toggling the zoom you had just set. */
+  let from = null;
+  let moved = false;
+  img.addEventListener("pointerdown", (e) => {
+    from = { x: e.clientX, y: e.clientY, tx, ty };
+    moved = false;
+    img.setPointerCapture?.(e.pointerId);
+  });
+  img.addEventListener("pointermove", (e) => {
+    if (!from) return;
+    const dx = e.clientX - from.x;
+    const dy = e.clientY - from.y;
+    if (Math.abs(dx) + Math.abs(dy) > 3) moved = true;
+    tx = from.tx + dx;
+    ty = from.ty + dy;
+    draw();
+  });
+  img.addEventListener("pointerup", (e) => {
+    const wasDrag = moved;
+    from = null;
+    img.releasePointerCapture?.(e.pointerId);
+    if (wasDrag) return;
+    // Fitted: go to actual size under the cursor. Zoomed at all: back to fitted.
+    const r = stage.getBoundingClientRect();
+    if (scale > fit * 1.001) reset();
+    else zoomAt(1 / fit, e.clientX - r.left, e.clientY - r.top);
+  });
+
+  // The buttons zoom about the middle of the stage, which is the only fixed point they have.
+  out.onclick = () => zoomAt(0.8, ...centre());
+  into.onclick = () => zoomAt(1.25, ...centre());
+  level.onclick = reset;
+
+  // The backdrop is the way out, and the image is not the backdrop.
+  box.addEventListener("pointerdown", (e) => {
+    if (e.target === box || e.target === stage) close();
+  });
+  shut.onclick = close;
+
+  const keys = (e) => {
+    if (e.key === "Escape") return close();
+    if (e.key === "0") return reset();
+    if (e.key === "+" || e.key === "=") return zoomAt(1.25, ...centre());
+    if (e.key === "-" || e.key === "_") return zoomAt(0.8, ...centre());
+  };
+  addEventListener("keydown", keys);
+
+  const onResize = () => reset();
+  addEventListener("resize", onResize);
+
+  const returnTo = document.activeElement;
+  open = { box, keys, onResize, returnTo };
+
+  document.body.append(box);
+  // The page behind must not scroll under an overlay: the scrollbar is still live otherwise,
+  // and a wheel event that misses the image scrolls the document instead of zooming.
+  document.body.dataset.lightbox = "1";
+  shut.focus?.();
+}
+
+export function close() {
+  if (!open) return;
+  const { box, keys, onResize, returnTo } = open;
+  open = null;
+  removeEventListener("keydown", keys);
+  removeEventListener("resize", onResize);
+  box.remove?.();
+  delete document.body.dataset.lightbox;
+  returnTo?.focus?.();
+}

package/templates/portal/js/md.js

@@ -6,6 +6,7 @@
 
 import { esc } from "./dom.js";
 import { iconHTML } from "./icons.js";
+import { yamlHTMLFromEscaped } from "./yaml.js";
 
 /* Who this org is, so `@cto` can be told from `@some-stranger`. Registered once at boot
    rather than threaded through every call site, because every call site would pass the
@@ -144,10 +145,13 @@ export function mdlite(src, opts = {}) {
     chips(
       s
         .replace(/`([^`]+)`/g, "<code>$1</code>")
-        .replace(
-          /!\[([^\]]*)\]\(([^)\s]+)\)/g,
-          (_m, alt, src2) =>
-            '<img src="' + mdAsset(src2, opts) + '" alt="' + alt + '" loading="lazy">',
+        .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_m, alt, src2) =>
+          // `![](clip.mp4)` is how a recording gets written into a note, and GitHub plays it.
+          // An <img> pointing at a video is a broken-image icon, so it becomes a player.
+          /\.(mp4|m4v|webm|mov|ogv)(\?|#|$)/i.test(src2)
+            ? '<video src="' + mdAsset(src2, opts) + '" controls preload="metadata" class="player">' +
+              "</video>"
+            : '<img src="' + mdAsset(src2, opts) + '" alt="' + alt + '" loading="lazy">',
         )
         // Non-greedy and allowing an inner asterisk, because "**bold with *this* inside**" is
         // ordinary in these files and the old pattern silently left the stars on the page.
@@ -187,11 +191,19 @@ export function mdlite(src, opts = {}) {
     }
 
     if (line.trim().startsWith("```")) {
+      // The fence's language was thrown away, which is most of why a YAML example in the docs
+      // read as a grey block while the same file in the Org screen is coloured.
+      const lang = line.trim().slice(3).trim().toLowerCase();
       const buf = [];
       i++;
       while (i < lines.length && !lines[i].trim().startsWith("```")) buf.push(lines[i++]);
       i++;
-      out.push("<pre><code>" + buf.join("\n") + "</code></pre>");
+      const body = buf.join("\n");
+      out.push(
+        "<pre" + (lang ? ' class="lang-' + esc(lang) + '"' : "") + "><code>" +
+          (lang === "yaml" || lang === "yml" ? yamlHTMLFromEscaped(body) : body) +
+          "</code></pre>",
+      );
       continue;
     }
 
@@ -340,7 +352,12 @@ function mdPath(href, opts) {
 }
 
 function mdAsset(src, opts) {
-  const path = /^(https?:|data:)/.test(src) ? null : mdPath(src, opts);
+  if (/^(https?:|data:)/.test(src)) return src;
+  /* A screenshot in the docs is not in anybody's brain repo, so it cannot go through
+     /api/file, which resolves inside the workspace. It comes off the framework's own docs
+     directory instead, through a route that serves nothing else. */
+  if (opts.docs) return "/api/docasset?path=" + encodeURIComponent(src.replace(/^\.?\//, ""));
+  const path = mdPath(src, opts);
   return path ? "/api/file?path=" + encodeURIComponent(opts.file.staffDir + "/" + path) : src;
 }
 

package/templates/portal/js/mdedit.js

@@ -0,0 +1,84 @@
+/* Colour behind a textarea, for the files people edit here.
+ *
+ * The textarea stays the thing you type into, so undo, selection, spellcheck and ⌘S all work
+ * as they always did. Its text is made transparent and a <pre> with the same box sits behind
+ * it, redrawn on every keystroke. The editors grow to fit rather than scroll, which is what
+ * keeps the two lined up without syncing a scroll position.
+ *
+ * Markdown here is a per-line tokeniser, like yaml.js: enough to read by, and anything it does
+ * not recognise is plain text rather than an error.
+ */
+
+import { el, esc } from "./dom.js";
+import { yamlHTML } from "./yaml.js";
+
+/**
+ * Wrap a textarea so its contents are highlighted. Returns the wrapper, which is what goes on
+ * the page in place of the textarea.
+ * @param {"md"|"yaml"} lang
+ */
+export function highlighted(ta, lang = "md") {
+  const wrap = el("div", { className: "hled" });
+  const back = el("pre", { className: "hlback" });
+  back.setAttribute?.("aria-hidden", "true");
+  ta.classList?.add("hlfront");
+  wrap.append(back, ta);
+  /* The colours only line up if both boxes set text identically, and the textarea's box comes
+     from whichever class it already had, so it is read rather than restated in CSS. */
+  const match = () => {
+    if (typeof getComputedStyle !== "function" || !ta.isConnected) return;
+    const cs = getComputedStyle(ta);
+    for (const k of ["font", "lineHeight", "letterSpacing", "tabSize", "padding", "borderWidth", "borderStyle", "borderRadius"]) {
+      back.style[k] = cs[k];
+    }
+  };
+  const paint = () => {
+    match();
+    // A trailing newline in a textarea is a line; in a <pre> it is not, without something after it.
+    back.innerHTML = (lang === "yaml" ? yamlHTML(ta.value) : markdownHTML(ta.value)) + "\n ";
+  };
+  ta.addEventListener("input", paint);
+  paint();
+  // Setting .value from code fires no input event, so the owner can ask for a repaint.
+  wrap.repaint = paint;
+  return wrap;
+}
+
+/** Escaped, highlighted HTML for markdown source. */
+export function markdownHTML(text) {
+  let fenced = false;
+  return String(text ?? "")
+    .split("\n")
+    .map((line) => {
+      if (/^\s*(```|~~~)/.test(line)) {
+        fenced = !fenced;
+        return span("mdfence", line);
+      }
+      if (fenced) return span("mdcode", line);
+      if (/^#{1,6}\s/.test(line)) return span("mdh", line);
+      if (/^\s*>/.test(line)) return span("mdq", line);
+      if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) return span("mdfence", line);
+      const list = /^(\s*)([-*+]|\d+[.)])(\s+)(.*)$/.exec(line);
+      if (list) return esc(list[1]) + span("mdl", list[2]) + esc(list[3]) + inline(list[4]);
+      return inline(line);
+    })
+    .join("\n");
+}
+
+const span = (cls, text) => '<span class="' + cls + '">' + esc(text) + "</span>";
+
+/** Inline marks, on one line. Code spans first, so nothing inside one is read as markup. */
+function inline(line) {
+  return line
+    .split(/(`[^`]+`)/)
+    .map((part, i) => (i % 2 ? span("mdc", part) : marks(part)))
+    .join("");
+}
+
+function marks(text) {
+  return esc(text)
+    .replace(/\{\{[^}]*\}\}/g, (m) => '<span class="mdt">' + m + "</span>")
+    .replace(/(\*\*|__)(?=\S)(.+?)(?<=\S)\1/g, '<span class="mdb">$1$2$1</span>')
+    .replace(/(^|[^*\w])([*_])(?=\S)([^*_]+?)(?<=\S)\2(?![*\w])/g, '$1<span class="mdi">$2$3$2</span>')
+    .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<span class="mdk">[$1]</span><span class="mdu">($2)</span>');
+}

package/templates/portal/js/mention.js

@@ -0,0 +1,264 @@
+/* Typing `@` should offer the org.
+ *
+ * A mention is not decoration here: a staff member's workflow gates on their `@handle`, so a
+ * reply that misspells it is a reply nobody is woken by, and a reply that spells a bot's login
+ * where a handle belongs looks right and does nothing. Both failures are silent, which is the
+ * kind this portal exists to stop. The roster is small and it is already on the page, so it is
+ * offered rather than remembered.
+ *
+ * Everyone is here, and each row says what mentioning it actually does: a staff handle wakes
+ * them, a human gets a notification, an App gets neither and is listed so you can recognise the
+ * name rather than address it.
+ */
+
+import { el, esc } from "./dom.js";
+import { humansOf, S } from "./state.js";
+
+/**
+ * Everyone a mention actually reaches, in the order they are worth offering.
+ *
+ * Staff first: waking one is the reason to type `@` in this app at all. Then the humans, who
+ * get a notification.
+ *
+ * **The Apps are deliberately not here.** `@some-org-cto` is a login, not an inbox: GitHub
+ * delivers nothing for mentioning a GitHub App, and an agent wakes on its own handle and not
+ * on the name of the identity it posts as. A list you pick from should contain only things
+ * that do something; an entry that says "notifies nobody" is a trap with a label on it, and it
+ * pushed the entries that work off the bottom of the box.
+ *
+ * Nothing here knows what any of these people are called. Every row comes off `org.yaml` and
+ * the manifests, so an org with a head of ops and a designer gets a head of ops and a designer.
+ */
+export function mentionable() {
+  const out = [];
+
+  for (const s of S.data?.staff ?? []) {
+    const at = String(s.mention ?? "@" + s.handle);
+    out.push({
+      text: at,
+      label: s.name ?? s.handle,
+      note: "wakes them, usually within a minute",
+      kind: "staff",
+      terms: [at.replace(/^@/, ""), s.handle, s.name ?? ""],
+    });
+  }
+
+  for (const h of humansOf()) {
+    if (!h.github) continue;
+    out.push({
+      text: "@" + h.github,
+      label: h.name ?? h.github,
+      note: h.role ? h.role + " · notifies them" : "notifies them",
+      kind: "human",
+      terms: [h.github, h.name ?? ""],
+    });
+  }
+
+  return out;
+}
+
+/** What is being typed after an `@`, or null. Only at a word boundary: an email is not a mention. */
+export function queryAt(text, caret) {
+  const before = String(text ?? "").slice(0, caret);
+  const m = /(?:^|[\s(<[{>,;:"'`])@([A-Za-z0-9][\w.-]*)?$/.exec(before);
+  if (!m) return null;
+  const query = m[1] ?? "";
+  return { query, start: caret - query.length - 1 };
+}
+
+/** The matches for a query, best first. Prefix beats substring; order beats neither. */
+export function matches(query, all = mentionable()) {
+  const q = query.toLowerCase();
+  if (!q) return all;
+  const rank = (c) => {
+    const terms = c.terms.map((t) => String(t).toLowerCase()).filter(Boolean);
+    if (terms.some((t) => t.startsWith(q))) return 0;
+    if (terms.some((t) => t.includes(q))) return 1;
+    return 2;
+  };
+  return all
+    .map((c, i) => ({ c, i, r: rank(c) }))
+    .filter((x) => x.r < 2)
+    .sort((a, b) => a.r - b.r || a.i - b.i)
+    .map((x) => x.c);
+}
+
+/**
+ * Wire a textarea up to the list.
+ *
+ * Attaching adds listeners and nothing else: the popup is built the first time somebody types
+ * an `@`, so a screen that renders fifty boxes pays for none of them, and a DOM without
+ * `getComputedStyle` (the test shim) never reaches the part that needs one.
+ */
+export function attachMentions(ta) {
+  if (!ta?.addEventListener) return;
+
+  let pop = null;
+  let items = [];
+  let at = 0;
+  let anchor = null;
+
+  const close = () => {
+    if (pop) pop.hidden = true;
+    anchor = null;
+  };
+
+  const open = (found, q) => {
+    items = found;
+    at = 0;
+    anchor = q;
+    if (!pop) {
+      pop = el("div", { className: "mentions" });
+      pop.setAttribute("role", "listbox");
+      // mousedown, not click: the textarea must not lose the caret before the pick lands.
+      pop.addEventListener("mousedown", (e) => {
+        const row = e.target.closest?.("[data-at]");
+        if (!row) return;
+        e.preventDefault();
+        pick(items[Number(row.dataset.at)]);
+      });
+      host(ta).append(pop);
+    }
+    pop.hidden = false;
+    paint();
+    place();
+  };
+
+  const paint = () => {
+    pop.replaceChildren(
+      ...items.map((c, i) => {
+        const row = el("button", { className: "mrow " + c.kind, type: "button" });
+        row.dataset.at = String(i);
+        row.setAttribute("aria-selected", String(i === at));
+        row.innerHTML =
+          '<span class="mat">' + esc(c.text) + "</span>" +
+          '<span class="mname">' + esc(c.label) + "</span>" +
+          '<span class="mnote">' + esc(c.note) + "</span>";
+        return row;
+      }),
+    );
+  };
+
+  const move = (by) => {
+    at = (at + by + items.length) % items.length;
+    paint();
+    pop.children[at]?.scrollIntoView?.({ block: "nearest" });
+  };
+
+  const pick = (choice) => {
+    if (!choice || !anchor) return;
+    const caret = ta.selectionStart ?? ta.value.length;
+    const after = ta.value.slice(caret);
+    // A space, unless there already is one: nobody wants to type it and nobody wants two.
+    const tail = /^\s/.test(after) ? "" : " ";
+    ta.value = ta.value.slice(0, anchor.start) + choice.text + tail + after;
+    const to = anchor.start + choice.text.length + tail.length;
+    ta.setSelectionRange?.(to, to);
+    close();
+    ta.focus?.();
+    // So the box's own listeners — the draft, the grow, the "this is what wakes them" line —
+    // see the text that is now in it.
+    if (typeof Event === "function") ta.dispatchEvent(new Event("input", { bubbles: true }));
+  };
+
+  const look = () => {
+    const caret = ta.selectionStart ?? 0;
+    const q = queryAt(ta.value, caret);
+    if (!q) return close();
+    const found = matches(q.query);
+    if (!found.length) return close();
+    open(found, q);
+  };
+
+  ta.addEventListener("input", look);
+  ta.addEventListener("click", close);
+  ta.addEventListener("blur", close);
+  ta.addEventListener("keydown", (e) => {
+    if (!anchor || !pop || pop.hidden) return;
+    if (e.key === "ArrowDown") { e.preventDefault(); move(1); return; }
+    if (e.key === "ArrowUp") { e.preventDefault(); move(-1); return; }
+    if (e.key === "Enter" || e.key === "Tab") {
+      // ⌘⏎ is "send", and it means that whether or not this list is open.
+      if (e.metaKey || e.ctrlKey) return;
+      e.preventDefault();
+      // Nothing else on the page may see it: in a dialog, a stray Enter submits.
+      e.stopPropagation();
+      pick(items[at]);
+      return;
+    }
+    if (e.key === "Escape") {
+      // Dismiss the list, not the dialog around it.
+      e.preventDefault();
+      e.stopPropagation();
+      close();
+    }
+  });
+
+  /** Where the popup lives: the first positioned ancestor, so a modal keeps it on top. */
+  function host(node) {
+    const parent = node.parentElement ?? node.parentNode;
+    if (!parent) return node;
+    if (typeof getComputedStyle === "function" && getComputedStyle(parent).position === "static") {
+      parent.style.position = "relative";
+    }
+    return parent;
+  }
+
+  /**
+   * Under the caret, not under the box.
+   *
+   * Measured with a mirror: a div with the textarea's own metrics, holding the text up to the
+   * caret and a marker after it. There is no other way to ask a textarea where its caret is.
+   * If any of that is unavailable, it falls back to the bottom of the box, which is worse but
+   * never wrong.
+   */
+  function place() {
+    const under = ta.offsetTop + ta.offsetHeight;
+    let top = under;
+    let left = ta.offsetLeft;
+    let line = 18;
+    if (typeof getComputedStyle === "function" && ta.parentElement) {
+      const style = getComputedStyle(ta);
+      const mirror = el("div", { className: "mmirror" });
+      for (const prop of [
+        "fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "textTransform",
+        "lineHeight", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+        "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
+      ]) {
+        mirror.style[prop] = style[prop];
+      }
+      mirror.style.width = ta.offsetWidth + "px";
+      mirror.style.left = ta.offsetLeft + "px";
+      mirror.style.top = ta.offsetTop + "px";
+      mirror.textContent = ta.value.slice(0, ta.selectionStart ?? 0);
+      const mark = el("span", { textContent: "​" });
+      mirror.append(mark);
+      ta.parentElement.append(mirror);
+      line = Number.parseFloat(style.lineHeight) || 18;
+      top = ta.offsetTop + mark.offsetTop - (ta.scrollTop ?? 0) + line;
+      left = ta.offsetLeft + mark.offsetLeft;
+      mirror.remove();
+      // A caret near the bottom of a long box would put the list off the card.
+      if (top > under) top = under;
+    }
+    pop.style.top = Math.round(top) + "px";
+    pop.style.left = Math.round(left) + "px";
+
+    /* Both edges, measured after placing, because until it is placed it has no size.
+       A `<dialog>` scrolls its own box, so anything hanging outside it is not merely ugly:
+       it is clipped, and the entries you were about to pick are the ones that go missing. */
+    const host = pop.offsetParent ?? pop.parentElement;
+    const wide = host?.clientWidth ?? 0;
+    if (wide && left + pop.offsetWidth > wide - 8) {
+      pop.style.left = Math.max(0, Math.round(wide - pop.offsetWidth - 8)) + "px";
+    }
+    const tall = host?.clientHeight ?? 0;
+    if (tall && top + pop.offsetHeight > tall - 8) {
+      // Above the line being typed if it fits there, which is where an editor would put it.
+      // Otherwise as low as it can sit and still be whole.
+      const above = top - line - pop.offsetHeight;
+      pop.style.top =
+        Math.round(above >= 0 ? above : Math.max(0, tall - pop.offsetHeight - 8)) + "px";
+    }
+  }
+}