@half-built/astro 0.4.2 → 0.6.0

package/src/scripts/lightbox.ts

@@ -9,19 +9,29 @@ import { iconButton, docOf } from "./core/dom";
 import { buildPlateModal } from "./plate-modal";
 import { ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT } from "./core/icons";
 
-export interface ZoomView { zoom: number; x: number; y: number }
+export interface ZoomView {
+  zoom: number;
+  x: number;
+  y: number;
+}
 
 export const MIN_NATIVE_ZOOM = 0.1;
 export const MAX_NATIVE_ZOOM = 8;
 export const TALL_ASPECT = 3;
 export const FALLBACK_BOX = { w: 800, h: 600 };
+
 /* HOME appears once the visible image-window overlap drops below this
    fraction of whichever is smaller, the scaled image or the window. */
 const WHACK_FRACTION = 0.25;
 
 /* zoom is CSS px per image px (1 = 100%); fit contains the image, except
    tall schematics fit width, and small images never upscale past 100%. */
-export function fitZoom(imgW: number, imgH: number, boxW: number, boxH: number): number {
+export function fitZoom(
+  imgW: number,
+  imgH: number,
+  boxW: number,
+  boxH: number,
+): number {
   if (imgH / imgW >= TALL_ASPECT) return boxW / imgW;
   return Math.min(boxW / imgW, boxH / imgH, 1);
 }
@@ -31,7 +41,10 @@ export function fitZoom(imgW: number, imgH: number, boxW: number, boxH: number):
    2026-08-01; originally 50% of fit, which read as arbitrary per-image
    percentages). Ceiling: 800% of native. */
 export function clampZoom(zoom: number, fit: number): number {
-  return Math.min(Math.max(zoom, Math.min(MIN_NATIVE_ZOOM, fit)), MAX_NATIVE_ZOOM);
+  return Math.min(
+    Math.max(zoom, Math.min(MIN_NATIVE_ZOOM, fit)),
+    MAX_NATIVE_ZOOM,
+  );
 }
 
 /* x/y offset the image center from the viewbox center. Pan is unbounded
@@ -43,29 +56,62 @@ export function normalizePan(view: ZoomView): ZoomView {
   return { zoom: view.zoom, x: view.x + 0, y: view.y + 0 };
 }
 
-export function initialView(imgW: number, imgH: number, boxW: number, boxH: number): ZoomView {
+export function initialView(
+  imgW: number,
+  imgH: number,
+  boxW: number,
+  boxH: number,
+): ZoomView {
   const zoom = fitZoom(imgW, imgH, boxW, boxH);
-  const y = imgH / imgW >= TALL_ASPECT ? Math.max(0, (imgH * zoom - boxH) / 2) : 0;
+
+  const tall = imgH / imgW >= TALL_ASPECT;
+  const centered = Math.max(0, (imgH * zoom - boxH) / 2);
+  const y = tall ? centered : 0;
+
   return normalizePan({ zoom, x: 0, y });
 }
 
 /* Anchor-point zoom: the image point under (cx, cy) stays put. Cursor
    coordinates are relative to the viewbox center. */
-export function zoomAt(view: ZoomView, factor: number, cx: number, cy: number, imgW: number, imgH: number, boxW: number, boxH: number): ZoomView {
+export function zoomAt(
+  view: ZoomView,
+  factor: number,
+  cx: number,
+  cy: number,
+  imgW: number,
+  imgH: number,
+  boxW: number,
+  boxH: number,
+): ZoomView {
   const fit = fitZoom(imgW, imgH, boxW, boxH);
   const zoom = clampZoom(view.zoom * factor, fit);
   const s = zoom / view.zoom;
-  return normalizePan({ zoom, x: cx - (cx - view.x) * s, y: cy - (cy - view.y) * s });
+  return normalizePan({
+    zoom,
+    x: cx - (cx - view.x) * s,
+    y: cy - (cy - view.y) * s,
+  });
 }
 
 /* True when the view has wandered far enough that the user likely wants
    a way home: the image-window overlap is under WHACK_FRACTION of the
    smaller of the two areas (so a centered deep zoom is never "whack"). */
-export function outOfWhack(view: ZoomView, imgW: number, imgH: number, boxW: number, boxH: number): boolean {
+export function outOfWhack(
+  view: ZoomView,
+  imgW: number,
+  imgH: number,
+  boxW: number,
+  boxH: number,
+): boolean {
   const w = imgW * view.zoom;
   const h = imgH * view.zoom;
-  const overlapW = Math.min(view.x + w / 2, boxW / 2) - Math.max(view.x - w / 2, -boxW / 2);
-  const overlapH = Math.min(view.y + h / 2, boxH / 2) - Math.max(view.y - h / 2, -boxH / 2);
+
+  const overlapW =
+    Math.min(view.x + w / 2, boxW / 2) - Math.max(view.x - w / 2, -boxW / 2);
+
+  const overlapH =
+    Math.min(view.y + h / 2, boxH / 2) - Math.max(view.y - h / 2, -boxH / 2);
+
   const overlap = Math.max(0, overlapW) * Math.max(0, overlapH);
   return overlap < WHACK_FRACTION * Math.min(w * h, boxW * boxH);
 }
@@ -75,7 +121,11 @@ export function readout(view: ZoomView, fit: number, prefix = "FIT"): string {
     const r = Math.round(n);
     return r >= 0 ? `+${String(r)}` : String(r);
   };
-  if (view.zoom === fit && view.x === 0 && view.y === 0) return `${prefix} · 0,0`;
+
+  if (view.zoom === fit && view.x === 0 && view.y === 0) {
+    return `${prefix} · 0,0`;
+  }
+
   if (view.zoom === fit) return `${prefix} · ${sign(view.x)},${sign(view.y)}`;
   return `${String(Math.round(view.zoom * 100))}% · ${sign(view.x)},${sign(view.y)}`;
 }
@@ -111,7 +161,13 @@ const DEFAULT_LABELS: LightboxLabels = {
   image: (i, n) => `Image ${String(i)} of ${String(n)}`,
 };
 
-interface Item { href: string; w: number; h: number; caption: string; thumb: string }
+interface Item {
+  href: string;
+  w: number;
+  h: number;
+  caption: string;
+  thumb: string;
+}
 
 interface Refs {
   dialog: HTMLDialogElement;
@@ -137,14 +193,21 @@ function itemFor(link: HTMLAnchorElement): Item {
     w: Number(link.dataset.lbW ?? "0"),
     h: Number(link.dataset.lbH ?? "0"),
     caption: link.dataset.lbCaption ?? "",
-    thumb: (img?.currentSrc ?? "") || (img?.getAttribute("src") ?? "") || (link.getAttribute("href") ?? ""),
+    thumb:
+      (img?.currentSrc ?? "") ||
+      (img?.getAttribute("src") ?? "") ||
+      (link.getAttribute("href") ?? ""),
   };
 }
 
 /* Gallery plates sharing a .gallery-plates ancestor form a set, and so do
    the photos of one Walkthrough (spec 2026-08-15-walkthrough-steps-design).
    Every other image opens solo (spec: no implicit chaining). */
-function setFor(link: HTMLAnchorElement, selector: string, groupSelector: string): HTMLAnchorElement[] {
+function setFor(
+  link: HTMLAnchorElement,
+  selector: string,
+  groupSelector: string,
+): HTMLAnchorElement[] {
   const set = link.closest(groupSelector);
   if (!set) return [link];
   return [...set.querySelectorAll<HTMLAnchorElement>(selector)];
@@ -153,30 +216,52 @@ function setFor(link: HTMLAnchorElement, selector: string, groupSelector: string
 /* The in-page rendition shows instantly; the untransformed original swaps
    in when loaded. dataset.pending guards against stale loads after
    navigating within a set. Returns the probe for tests. */
-export function swapToFull(target: HTMLImageElement, href: string, doc: Document): HTMLImageElement | null {
+export function swapToFull(
+  target: HTMLImageElement,
+  href: string,
+  doc: Document,
+): HTMLImageElement | null {
   if (target.getAttribute("src") === href) return null;
   target.dataset.pending = href;
   const probe = doc.createElement("img");
+
   probe.addEventListener("load", () => {
     if (target.dataset.pending === href) {
       target.src = href;
       delete target.dataset.pending;
     }
   });
+
   probe.src = href;
   return probe;
 }
 
 function buildDialog(doc: Document, labels: LightboxLabels): Refs {
-  const pm = buildPlateModal(doc, { ariaLabel: labels.viewer, legacyPrefix: "lb" });
+  const pm = buildPlateModal(doc, {
+    ariaLabel: labels.viewer,
+    legacyPrefix: "lb",
+  });
+
   const { dialog, zone, plate } = pm;
   const closeBtn = pm.closeBtn;
   closeBtn.setAttribute("aria-label", labels.close);
 
   const main = doc.createElement("div");
   main.className = "lb-main";
-  const prevBtn = iconButton(doc, "lb-arrow lb-prev icon-box", labels.prev, ICON_CHEVRON_LEFT);
-  const nextBtn = iconButton(doc, "lb-arrow lb-next icon-box", labels.next, ICON_CHEVRON_RIGHT);
+
+  const prevBtn = iconButton(
+    doc,
+    "lb-arrow lb-prev icon-box",
+    labels.prev,
+    ICON_CHEVRON_LEFT,
+  );
+
+  const nextBtn = iconButton(
+    doc,
+    "lb-arrow lb-next icon-box",
+    labels.next,
+    ICON_CHEVRON_RIGHT,
+  );
 
   /* The bar owns counter + close so the mobile header-row layout keeps
      working; the close button is re-parented out of the plate root. */
@@ -194,7 +279,11 @@ function buildDialog(doc: Document, labels: LightboxLabels): Refs {
      drag (no-drop cursor) and fires pointercancel, killing pan tracking.
      Opt the pan surface out of it on both layers. */
   img.draggable = false;
-  img.addEventListener("dragstart", (ev) => { ev.preventDefault(); });
+
+  img.addEventListener("dragstart", (ev) => {
+    ev.preventDefault();
+  });
+
   const homeBtn = doc.createElement("button");
   homeBtn.type = "button";
   homeBtn.className = "lb-home boxed-label micro-label";
@@ -219,14 +308,41 @@ function buildDialog(doc: Document, labels: LightboxLabels): Refs {
   thumbs.className = "lb-thumbs";
 
   zone.append(main, thumbs);
-  return { dialog, zone, prevBtn, nextBtn, closeBtn, counter, viewbox, img, caption, dims, readoutEl, homeBtn, thumbs, pmOpen: pm.open };
+  return {
+    dialog,
+    zone,
+    prevBtn,
+    nextBtn,
+    closeBtn,
+    counter,
+    viewbox,
+    img,
+    caption,
+    dims,
+    readoutEl,
+    homeBtn,
+    thumbs,
+    pmOpen: pm.open,
+  };
 }
 
-export const mountLightbox: Island<LightboxOptions> = (root, options = {}): IslandHandle => {
-  const { selector = "a.lightbox-link", groupSelector = ".gallery-plates, .walkthrough", labels: labelsOverride = {} } = options;
+export const mountLightbox: Island<LightboxOptions> = (
+  root,
+  options = {},
+): IslandHandle => {
+  const {
+    selector = "a.lightbox-link",
+    groupSelector = ".gallery-plates, .walkthrough",
+    labels: labelsOverride = {},
+  } = options;
+
   const labels: LightboxLabels = { ...DEFAULT_LABELS, ...labelsOverride };
   const doc = docOf(root);
-  const links = [...root.querySelectorAll<HTMLAnchorElement>(selector)].filter((link) => claim(link, "lightbox"));
+
+  const links = [...root.querySelectorAll<HTMLAnchorElement>(selector)].filter(
+    (link) => claim(link, "lightbox"),
+  );
+
   if (links.length === 0) {
     return {
       destroy(): void {
@@ -256,11 +372,17 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
   const goTo = (r: Refs, i: number): void => {
     const n = items.length;
     show(r, ((i % n) + n) % n);
+
     r.thumbs.querySelectorAll(".lb-thumb").forEach((t, ti) => {
       t.classList.toggle("active", ti === index);
+
       /* The strip scrolls rather than wraps; keep the active thumb in
          view (guarded: jsdom has no scrollIntoView). */
-      if (ti === index && t instanceof HTMLElement && typeof t.scrollIntoView === "function") {
+      if (
+        ti === index &&
+        t instanceof HTMLElement &&
+        typeof t.scrollIntoView === "function"
+      ) {
         t.scrollIntoView({ block: "nearest", inline: "nearest" });
       }
     });
@@ -268,6 +390,7 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
 
   const buildThumbs = (r: Refs): void => {
     r.thumbs.replaceChildren();
+
     items.forEach((item, i) => {
       const btn = doc.createElement("button");
       btn.type = "button";
@@ -277,7 +400,11 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
       timg.src = item.thumb;
       timg.alt = "";
       btn.append(timg);
-      btn.addEventListener("click", () => { goTo(r, i); });
+
+      btn.addEventListener("click", () => {
+        goTo(r, i);
+      });
+
       r.thumbs.append(btn);
     });
   };
@@ -299,22 +426,32 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
   const ensureRefs = (): Refs => {
     if (refs) return refs;
     const r = buildDialog(doc, labels);
-    r.prevBtn.addEventListener("click", () => { goTo(r, index - 1); });
-    r.nextBtn.addEventListener("click", () => { goTo(r, index + 1); });
+
+    r.prevBtn.addEventListener("click", () => {
+      goTo(r, index - 1);
+    });
+
+    r.nextBtn.addEventListener("click", () => {
+      goTo(r, index + 1);
+    });
+
     r.dialog.addEventListener("keydown", (ev) => {
       if (items.length < 2) return;
       if (ev.key === "ArrowRight") goTo(r, index + 1);
       if (ev.key === "ArrowLeft") goTo(r, index - 1);
     });
+
     /* Swipe navigation was removed with unbounded pan (owner adjustment
        2026-08-01): drag always pans, and set navigation is arrows, keys,
        and the scrollable thumb strip. */
     const ZOOM_STEP = 1.2;
     const item = (): Item => items[index];
+
     const rezoom = (factor: number, cx: number, cy: number): void => {
       view = zoomAt(view, factor, cx, cy, item().w, item().h, boxW, boxH);
       applyView(r);
     };
+
     /* Cursor position relative to the viewbox center. */
     const rel = (ev: MouseEvent): { cx: number; cy: number } => {
       const rect = r.viewbox.getBoundingClientRect();
@@ -327,6 +464,7 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
     r.dialog.addEventListener("keydown", (ev) => {
       if (ev.key === "+" || ev.key === "=") rezoom(ZOOM_STEP, 0, 0);
       if (ev.key === "-") rezoom(1 / ZOOM_STEP, 0, 0);
+
       if (ev.key === "0") {
         view = initialView(item().w, item().h, boxW, boxH);
         applyView(r);
@@ -338,11 +476,15 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
       applyView(r);
     });
 
-    r.viewbox.addEventListener("wheel", (ev) => {
-      ev.preventDefault();
-      const { cx, cy } = rel(ev);
-      rezoom(ev.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP, cx, cy);
-    }, { passive: false });
+    r.viewbox.addEventListener(
+      "wheel",
+      (ev) => {
+        ev.preventDefault();
+        const { cx, cy } = rel(ev);
+        rezoom(ev.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP, cx, cy);
+      },
+      { passive: false },
+    );
 
     /* At the untouched initial view, double-click dives to 100% under the
        cursor; from any other zoom or pan state it returns to fit, centered
@@ -352,7 +494,10 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
        listener on the image never fires in real browsers. */
     r.viewbox.addEventListener("dblclick", (ev) => {
       const init = initialView(item().w, item().h, boxW, boxH);
-      const atInit = view.zoom === init.zoom && view.x === init.x && view.y === init.y;
+
+      const atInit =
+        view.zoom === init.zoom && view.x === init.x && view.y === init.y;
+
       if (atInit && view.zoom < 1) {
         const { cx, cy } = rel(ev);
         rezoom(1 / view.zoom, cx, cy);
@@ -365,6 +510,7 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
     /* Drag pans while zoomed past fit; pinch zooms. Two live pointers
        mean pinch; one means pan (or, at fit, the Task 5 swipe). */
     const pointers = new Map<number, { x: number; y: number }>();
+
     r.viewbox.addEventListener("pointerdown", (ev) => {
       /* A press on HOME is a button press, not a drag. Capturing it
          would retarget the pointerup and click to the viewbox, so the
@@ -372,30 +518,54 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
          which is why only the browser showed this). */
       if (ev.target === r.homeBtn) return;
       pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
-      if (typeof r.viewbox.setPointerCapture === "function") r.viewbox.setPointerCapture(ev.pointerId);
+
+      if (typeof r.viewbox.setPointerCapture === "function") {
+        r.viewbox.setPointerCapture(ev.pointerId);
+      }
     });
+
     r.viewbox.addEventListener("pointermove", (ev) => {
       const prev = pointers.get(ev.pointerId);
       if (!prev) return;
+
       if (pointers.size === 2) {
-        const other = [...pointers.entries()].find(([id]) => id !== ev.pointerId)?.[1];
+        const other = [...pointers.entries()].find(
+          ([id]) => id !== ev.pointerId,
+        )?.[1];
+
         if (other) {
           const d0 = Math.hypot(prev.x - other.x, prev.y - other.y);
           const d1 = Math.hypot(ev.clientX - other.x, ev.clientY - other.y);
+
           if (d0 > 0) {
             const rect = r.viewbox.getBoundingClientRect();
-            const midX = (ev.clientX + other.x) / 2 - rect.left - (rect.width || boxW) / 2;
-            const midY = (ev.clientY + other.y) / 2 - rect.top - (rect.height || boxH) / 2;
+
+            const midX =
+              (ev.clientX + other.x) / 2 - rect.left - (rect.width || boxW) / 2;
+
+            const midY =
+              (ev.clientY + other.y) / 2 - rect.top - (rect.height || boxH) / 2;
+
             rezoom(d1 / d0, midX, midY);
           }
         }
       } else {
-        view = normalizePan({ zoom: view.zoom, x: view.x + ev.clientX - prev.x, y: view.y + ev.clientY - prev.y });
+        view = normalizePan({
+          zoom: view.zoom,
+          x: view.x + ev.clientX - prev.x,
+          y: view.y + ev.clientY - prev.y,
+        });
+
         applyView(r);
       }
+
       pointers.set(ev.pointerId, { x: ev.clientX, y: ev.clientY });
     });
-    const lift = (ev: PointerEvent): void => { pointers.delete(ev.pointerId); };
+
+    const lift = (ev: PointerEvent): void => {
+      pointers.delete(ev.pointerId);
+    };
+
     r.viewbox.addEventListener("pointerup", lift);
     r.viewbox.addEventListener("pointercancel", lift);
 
@@ -420,13 +590,28 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
     goTo(r, Math.max(0, set.indexOf(link)));
   };
 
-  const mounted: { link: HTMLAnchorElement; onClick: (ev: MouseEvent) => void }[] = [];
+  const mounted: {
+    link: HTMLAnchorElement;
+    onClick: (ev: MouseEvent) => void;
+  }[] = [];
+
   for (const link of links) {
     const onClick = (ev: MouseEvent): void => {
-      if (ev.defaultPrevented || ev.button !== 0 || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey) return;
+      if (
+        ev.defaultPrevented ||
+        ev.button !== 0 ||
+        ev.ctrlKey ||
+        ev.metaKey ||
+        ev.shiftKey ||
+        ev.altKey
+      ) {
+        return;
+      }
+
       ev.preventDefault();
       open(link);
     };
+
     link.addEventListener("click", onClick);
     mounted.push({ link, onClick });
   }
@@ -437,6 +622,7 @@ export const mountLightbox: Island<LightboxOptions> = (root, options = {}): Isla
         link.removeEventListener("click", onClick);
         release(link, "lightbox");
       }
+
       if (refs) {
         refs.dialog.remove();
         refs = null;

package/src/scripts/link-tip.ts

@@ -7,10 +7,25 @@ const EDGE = 12; /* px of breathing room against either viewport edge */
 
 export type TipPlace = "above" | "below";
 export type TipAlign = "start" | "end";
-export interface AnchorRect { left: number; right: number; top: number; bottom: number }
-export interface TipSize { width: number; height: number }
-export interface ViewportSize { width: number; height: number }
-export interface TipPosition { x: number; y: number; place: TipPlace }
+export interface AnchorRect {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+export interface TipSize {
+  width: number;
+  height: number;
+}
+export interface ViewportSize {
+  width: number;
+  height: number;
+}
+export interface TipPosition {
+  x: number;
+  y: number;
+  place: TipPlace;
+}
 
 /* Pure placement for the singleton tip: start/end alignment against
    the anchor, horizontal clamp into [edge, vw - edge] with the left
@@ -24,14 +39,28 @@ export function placeTip(
   align: TipAlign = "start",
   edge: number = EDGE,
 ): TipPosition {
-  let x = align === "start" ? anchor.left - INSET : anchor.right + INSET - tip.width;
+  const startX = anchor.left - INSET;
+  const endX = anchor.right + INSET - tip.width;
+  let x = align === "start" ? startX : endX;
+
   const overRight = x + tip.width - (viewport.width - edge);
   if (overRight > 0) x -= overRight;
   if (x < edge) x = edge;
   let finalPlace = place;
-  if (place === "above" && anchor.top - GAP - tip.height < 0) finalPlace = "below";
-  if (place === "below" && anchor.bottom + GAP + tip.height > viewport.height) finalPlace = "above";
-  const y = finalPlace === "above" ? anchor.top - GAP - tip.height : anchor.bottom + GAP;
+
+  if (place === "above" && anchor.top - GAP - tip.height < 0) {
+    finalPlace = "below";
+  }
+
+  if (place === "below" && anchor.bottom + GAP + tip.height > viewport.height) {
+    finalPlace = "above";
+  }
+
+  const y =
+    finalPlace === "above"
+      ? anchor.top - GAP - tip.height
+      : anchor.bottom + GAP;
+
   return { x: Math.round(x), y: Math.round(y), place: finalPlace };
 }
 
@@ -47,9 +76,15 @@ export interface LinkTipOptions {
    point (spec 2026-09-02; three positioning defects shipped from
    pseudo-element prediction). Containers steer placement with
    data-tip-place="below" and data-tip-align="end" (the masthead). */
-export const mountLinkTips: Island<LinkTipOptions> = (root, options = {}): IslandHandle => {
-  const { selector = 'a[href^="http"], a[data-tooltip]', edge = EDGE } = options;
+export const mountLinkTips: Island<LinkTipOptions> = (
+  root,
+  options = {},
+): IslandHandle => {
+  const { selector = 'a[href^="http"], a[data-tooltip]', edge = EDGE } =
+    options;
+
   const doc = docOf(root);
+
   if (!claim(doc.documentElement, "link-tip")) {
     return {
       destroy(): void {
@@ -66,6 +101,7 @@ export const mountLinkTips: Island<LinkTipOptions> = (root, options = {}): Islan
      path-player.ts): the plain Window type always declares the method,
      so an unwidened optional chain reads as always-true to the lint. */
   const mmWin = win as { matchMedia?: typeof window.matchMedia } | null;
+
   if (mmWin?.matchMedia?.("(hover: none)").matches) {
     return {
       destroy(): void {
@@ -108,7 +144,12 @@ export const mountLinkTips: Island<LinkTipOptions> = (root, options = {}): Islan
     const box = tip.getBoundingClientRect();
     const place = a.closest('[data-tip-place="below"]') ? "below" : "above";
     const align = a.closest('[data-tip-align="end"]') ? "end" : "start";
-    const viewport = { width: doc.documentElement.clientWidth, height: doc.documentElement.clientHeight };
+
+    const viewport = {
+      width: doc.documentElement.clientWidth,
+      height: doc.documentElement.clientHeight,
+    };
+
     const pos = placeTip(anchor, box, viewport, place, align, edge);
     tip.style.left = `${String(pos.x)}px`;
     tip.style.top = `${String(pos.y)}px`;
@@ -119,12 +160,15 @@ export const mountLinkTips: Island<LinkTipOptions> = (root, options = {}): Islan
     const a = linkFor(ev.target);
     if (a) show(a);
   };
+
   const onOut = (ev: Event): void => {
     if (linkFor(ev.target)) hide();
   };
+
   const onKey = (ev: KeyboardEvent): void => {
     if (ev.key === "Escape") hide();
   };
+
   const onHide = (): void => {
     hide();
   };

package/src/scripts/path-player-math.ts

@@ -1,7 +1,11 @@
 /* Pure geometry for the path-player timeline; the canvas painter in
    path-player.ts consumes these, jsdom tests never need a 2D context. */
 
-export function normalizeSeries(values: number[]): { min: number; max: number; frac: (v: number) => number } {
+export function normalizeSeries(values: number[]): {
+  min: number;
+  max: number;
+  frac: (v: number) => number;
+} {
   const min = Math.min(...values);
   const max = Math.max(...values);
   return { min, max, frac: (v) => (max > min ? (v - min) / (max - min) : 0.5) };
@@ -29,6 +33,11 @@ export function columnIndex(px: number, width: number, length: number): number {
 
 /* Vertical position of a normalized value inside a track: frac 0 sits
    pad above the track's bottom edge, frac 1 sits pad below its top. */
-export function seriesY(frac: number, top: number, height: number, pad: number): number {
+export function seriesY(
+  frac: number,
+  top: number,
+  height: number,
+  pad: number,
+): number {
   return top + height - pad - frac * (height - 2 * pad);
 }