@fabrika/canvas-kernel 0.1.45 → 0.2.0

package/src/client/blockTarget.ts

@@ -1,127 +0,0 @@
-import type { AnnotationTarget } from "./annotationTarget";
-
-/**
- * A whole canvas block, identified by the text a reader sees in it.
- *
- * The hard-won invariant lives here: the selector that decides where an
- * annotation may be minted and the selector the lookup scans must be one
- * selector. An annotation minted on a block the lookup skips can never be
- * resolved again. Both now come off one table, so they cannot drift: a kind is
- * annotatable exactly when it can mint a snippet, and `getBlockSnippet` refuses
- * every block outside that set.
- */
-interface BlockKind {
-  /** CSS matching this kind, as the component emits it. */
-  selector: string;
-  /** The key a block of this kind is annotated under, or null when it is
-   *  missing the attribute that identifies it. */
-  snippet(block: HTMLElement): string | null;
-}
-
-/**
- * A block's text as a reader sees it. Decorative markup — the callout icon,
- * anything else marked aria-hidden — is skipped, so the glyph does not ride
- * along into the sidebar label and into feedback.md.
- */
-function readableText(block: HTMLElement): string {
-  const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
-  let text = "";
-  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-    const hidden = node.parentElement?.closest("[aria-hidden='true']");
-    if (hidden && block.contains(hidden)) continue;
-    text += node.textContent ?? "";
-  }
-  return text.trim();
-}
-
-/** A block named by one of its attributes, e.g. `[Item] Ship the beta`. */
-function byAttribute(selector: string, prefix: string, attribute: string): BlockKind {
-  return {
-    selector,
-    snippet: (block) => {
-      const value = block.getAttribute(attribute);
-      return value ? `${prefix} ${value}` : null;
-    },
-  };
-}
-
-/** Every block an annotation can be minted on. */
-const ANNOTATABLE_KINDS: BlockKind[] = [
-  byAttribute("[data-md='item']", "[Item]", "data-md-label"),
-  byAttribute("[data-md='section']", "[Section]", "data-md-title"),
-  byAttribute("[data-md='checklist-item']", "[Checklist]", "data-md-label"),
-  byAttribute("[data-md='image']", "[Image]", "data-md-src"),
-  {
-    selector: "[data-md='callout']",
-    snippet: (block) => {
-      const type = block.getAttribute("data-md-type") || "info";
-      return `[Callout:${type}] ${readableText(block).slice(0, 60) || "Callout"}`;
-    },
-  },
-  {
-    selector: "[data-md='note']",
-    snippet: (block) => `[Note] ${readableText(block).slice(0, 60) || "Note"}`,
-  },
-  {
-    // Only rows of a table the canvas emitted: a table inside a markdown block
-    // is not navigable, so a row annotated there could never be reached again.
-    selector: "[data-md='table'] tbody tr",
-    snippet: (block) => {
-      const cells = Array.from(block.querySelectorAll("td")).map((td) => td.textContent?.trim()).filter(Boolean);
-      return cells.length ? `[Row] ${cells.join(" | ")}` : null;
-    },
-  },
-];
-
-/** Blocks the arrows walk but no annotation can land on — interactive controls
- *  carry the reader's answer, not the author's text. */
-const NAVIGABLE_ONLY_SELECTORS = [
-  "[data-md='choice-option']",
-  "[data-md='multichoice-option']",
-  "[data-md='userinput']",
-  "[data-md='rangeinput']",
-];
-
-/**
- * The blocks that can carry a block annotation — a strict subset of
- * BLOCK_SELECTOR, since interactive controls are navigable but not annotatable.
- */
-export const ANNOTATABLE_SELECTOR = ANNOTATABLE_KINDS.map((kind) => kind.selector).join(", ");
-
-/** Every block the keyboard arrows walk through. */
-export const BLOCK_SELECTOR = [
-  ...ANNOTATABLE_KINDS.map((kind) => kind.selector),
-  ...NAVIGABLE_ONLY_SELECTORS,
-].join(", ");
-
-/** The snippet identifier for a block, or null if nothing can be annotated here. */
-export function getBlockSnippet(block: HTMLElement): string | null {
-  for (const kind of ANNOTATABLE_KINDS) {
-    if (block.matches(kind.selector)) return kind.snippet(block);
-  }
-  return null;
-}
-
-/** A block is its own locator: the snippet is the text that identifies it. */
-export interface BlockLocator {
-  snippet: string;
-}
-
-export const blockTarget: AnnotationTarget<BlockLocator> = {
-  kind: "block",
-
-  // Every block snippet opens with its kind in brackets. Text that merely looks
-  // like one is not stranded by claiming it: `find` compares against snippets
-  // blocks actually mint, so a lookalike simply matches nothing.
-  parse: (snippet) => (snippet.startsWith("[") ? { snippet } : null),
-
-  format: (locator) => locator.snippet,
-
-  find: (locator, root) => {
-    for (const el of root.querySelectorAll(ANNOTATABLE_SELECTOR)) {
-      if (!(el instanceof HTMLElement)) continue;
-      if (getBlockSnippet(el) === locator.snippet) return el;
-    }
-    return null;
-  },
-};

package/src/client/highlightRange.ts

@@ -1,262 +0,0 @@
-/**
- * Wraps the current browser Range in <mark> elements with the given annotation ID.
- * Works for multiline / cross-element selections.
- */
-export function wrapRangeWithMark(range: Range, annotationId: string): HTMLElement[] {
-  const marks: HTMLElement[] = [];
-
-  // Collect all text nodes within the range
-  const textNodes = getTextNodesInRange(range);
-
-  for (const tn of textNodes) {
-    const nodeRange = document.createRange();
-    nodeRange.selectNodeContents(tn);
-
-    // Clamp to the actual selection range
-    if (tn === range.startContainer) {
-      nodeRange.setStart(tn, range.startOffset);
-    }
-    if (tn === range.endContainer) {
-      nodeRange.setEnd(tn, range.endOffset);
-    }
-
-    const text = nodeRange.toString();
-    if (!text || !text.trim()) continue;
-
-    // Wrap this portion in a <mark>
-    const mark = document.createElement("mark");
-    mark.setAttribute("data-annotation-id", annotationId);
-
-    try {
-      nodeRange.surroundContents(mark);
-    } catch {
-      // surroundContents fails if range crosses element boundaries within a single text node
-      // (shouldn't happen for a single text node, but handle gracefully)
-      const fragment = nodeRange.extractContents();
-      mark.appendChild(fragment);
-      nodeRange.insertNode(mark);
-    }
-
-    marks.push(mark);
-  }
-
-  return marks;
-}
-
-/**
- * Whether the annotation index carries this text. Line-number gutters and text
- * that already belongs to another annotation are outside it. Everything that
- * records a snippet or its context is matched back against that index later, so
- * all of them have to skip exactly the same runs.
- */
-export function isIndexedText(node: Text): boolean {
-  const parent = node.parentElement;
-  if (parent?.classList.contains("select-none")) return false;
-  if (parent?.closest("[data-annotation-id]")) return false;
-  return true;
-}
-
-function getTextNodesInRange(range: Range): Text[] {
-  const nodes: Text[] = [];
-  const ancestor = range.commonAncestorContainer;
-
-  if (ancestor.nodeType === Node.TEXT_NODE) {
-    nodes.push(ancestor as Text);
-    return nodes;
-  }
-
-  const walker = document.createTreeWalker(ancestor, NodeFilter.SHOW_TEXT);
-  let node: Text | null;
-  while ((node = walker.nextNode() as Text | null)) {
-    if (!isIndexedText(node)) continue;
-    if (range.intersectsNode(node)) {
-      nodes.push(node);
-    }
-  }
-
-  return nodes;
-}
-
-/** The part of a text node that falls inside the range. */
-function clampToRange(node: Text, range: Range): string {
-  const nodeRange = document.createRange();
-  nodeRange.selectNodeContents(node);
-  if (node === range.startContainer) nodeRange.setStart(node, range.startOffset);
-  if (node === range.endContainer) nodeRange.setEnd(node, range.endOffset);
-  return nodeRange.toString();
-}
-
-/**
- * A selection's text as the annotation index will read it back. The raw
- * selection is not that: it carries the gutter and any text already inside
- * another annotation, none of which the index holds — so a snippet taken from
- * it names something that cannot be found again.
- */
-export function rangeIndexText(range: Range): string {
-  let text = "";
-  for (const node of getTextNodesInRange(range)) {
-    text += clampToRange(node, range);
-  }
-  return text;
-}
-
-/**
- * Update the visual state of marks for a given annotation ID.
- */
-export function setMarkActive(annotationId: string, active: boolean) {
-  const marks = document.querySelectorAll(`[data-annotation-id="${annotationId}"]`);
-  for (const mark of marks) {
-    (mark as HTMLElement).classList.toggle("mark-active", active);
-  }
-}
-
-/**
- * Update active state for annotation marks.
- * Only touches marks for the previous and current active IDs to avoid full DOM scans.
- */
-export function updateAllMarkStates(activeId: string | null, prevActiveId?: string | null) {
-  if (prevActiveId != null && prevActiveId !== activeId) {
-    setMarkActive(prevActiveId, false);
-  }
-  if (activeId != null) {
-    setMarkActive(activeId, true);
-  }
-}
-
-/**
- * Rename annotation ID on existing marks (e.g. temp → real ID).
- */
-export function renameMarkId(oldId: string, newId: string) {
-  const marks = document.querySelectorAll(`[data-annotation-id="${oldId}"]`);
-  for (const mark of marks) {
-    mark.setAttribute("data-annotation-id", newId);
-  }
-}
-
-/**
- * Restore marks for persisted annotations by finding their snippet text in the DOM.
- * Uses before/after context for disambiguation when the same text appears multiple times.
- */
-export function restoreMarks(
-  container: HTMLElement,
-  annotations: { id: string; snippet: string; filePath?: string; context?: { before: string; after: string; hierarchy: string[] } }[]
-) {
-  for (const ann of annotations) {
-    // A canvas can be rendered more than once (overview, compare, hidden
-    // source panes), so restore decisions must be scoped to this container.
-    if (container.querySelector(`[data-annotation-id="${ann.id}"]`)) continue;
-
-    const snippet = ann.snippet;
-    if (!snippet) continue;
-
-    // Rebuild after every inserted mark. Wrapping text splits and moves text
-    // nodes, so a cached offset map can point at stale DOM after the first hit.
-    const { fullText, textNodes } = buildTextIndex(container);
-
-    // Find all occurrences of the snippet in the full text
-    const occurrences: number[] = [];
-    let searchFrom = 0;
-    while (true) {
-      const idx = fullText.indexOf(snippet, searchFrom);
-      if (idx === -1) break;
-      occurrences.push(idx);
-      searchFrom = idx + 1;
-    }
-
-    const [firstOccurrence] = occurrences;
-    if (firstOccurrence === undefined) continue;
-
-    // Pick the best occurrence using context
-    let bestIdx = firstOccurrence;
-    if (occurrences.length > 1 && ann.context) {
-      let bestScore = -1;
-      for (const idx of occurrences) {
-        let score = 0;
-        if (ann.context.before) {
-          const preceding = fullText.slice(Math.max(0, idx - 80), idx);
-          if (preceding.includes(ann.context.before)) score += 2;
-          else if (ann.context.before.length > 10 && preceding.includes(ann.context.before.slice(-10))) score += 1;
-        }
-        if (ann.context.after) {
-          const following = fullText.slice(idx + snippet.length, idx + snippet.length + 80);
-          if (following.includes(ann.context.after)) score += 2;
-          else if (ann.context.after.length > 10 && following.includes(ann.context.after.slice(0, 10))) score += 1;
-        }
-        if (score > bestScore) {
-          bestScore = score;
-          bestIdx = idx;
-        }
-      }
-    }
-
-    // Map text offsets to DOM positions
-    const startOffset = bestIdx;
-    const endOffset = bestIdx + snippet.length;
-
-    const startPos = offsetToNode(textNodes, startOffset);
-    const endPos = offsetToNode(textNodes, endOffset);
-    if (!startPos || !endPos) continue;
-
-    try {
-      const range = document.createRange();
-      range.setStart(startPos.node, startPos.offset);
-      range.setEnd(endPos.node, endPos.offset);
-      wrapRangeWithMark(range, ann.id);
-    } catch {}
-  }
-}
-
-function buildTextIndex(container: HTMLElement): {
-  fullText: string;
-  textNodes: { node: Text; start: number }[];
-} {
-  const textNodes: { node: Text; start: number }[] = [];
-  let fullText = "";
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
-  let tn: Text | null;
-  while ((tn = walker.nextNode() as Text | null)) {
-    if (!isIndexedText(tn)) continue;
-    textNodes.push({ node: tn, start: fullText.length });
-    fullText += tn.textContent || "";
-  }
-  return { fullText, textNodes };
-}
-
-function offsetToNode(
-  textNodes: { node: Text; start: number }[],
-  offset: number
-): { node: Text; offset: number } | null {
-  for (let i = textNodes.length - 1; i >= 0; i--) {
-    const entry = textNodes[i];
-    if (!entry || entry.start > offset) continue;
-    const localOffset = offset - entry.start;
-    const nodeLen = entry.node.textContent?.length ?? 0;
-    if (localOffset <= nodeLen) {
-      return { node: entry.node, offset: localOffset };
-    }
-  }
-  return null;
-}
-
-/**
- * Remove the decoration for a given annotation ID, restoring the original text
- * nodes an inline mark wrapped.
- */
-export function unwrapMarks(annotationId: string) {
-  const marks = document.querySelectorAll(`[data-annotation-id="${annotationId}"]`);
-  for (const mark of marks) {
-    const parent = mark.parentNode;
-    if (!parent) continue;
-    // Decoration that is not an inline mark — a region overlay — wraps no text
-    // and is simply taken out.
-    if (mark.tagName !== "MARK") {
-      parent.removeChild(mark);
-      continue;
-    }
-    while (mark.firstChild) {
-      parent.insertBefore(mark.firstChild, mark);
-    }
-    parent.removeChild(mark);
-    parent.normalize();
-  }
-}

package/src/client/popoverPosition.ts

@@ -1,46 +0,0 @@
-/** Width assumed when the caller does not say — the narrow popover. */
-const DEFAULT_POPOVER_WIDTH = 280;
-
-/**
- * Read a CSS width the popover will be styled with. Only px is a width this
- * placement can reason about; anything else falls back to the default rather
- * than clamping against a number that means something different.
- */
-export function pxWidth(css: string): number | undefined {
-  const match = /^(\d+(?:\.\d+)?)px$/.exec(css.trim());
-  return match ? Number(match[1]) : undefined;
-}
-
-/**
- * Calculate popover position relative to an anchor element.
- * Returns absolute position within the scroll container (or body).
- */
-export function getPopoverPosition(
-  anchor: HTMLElement,
-  scrollContainer?: HTMLElement | null,
-  popoverWidth: number = DEFAULT_POPOVER_WIDTH,
-): { style: Record<string, string>; parent: HTMLElement } {
-  const gap = 8;
-  const parent = scrollContainer || document.body;
-
-  // Use getBoundingClientRect for both anchor and parent,
-  // then add scroll offsets to get absolute position within parent
-  const anchorRect = anchor.getBoundingClientRect();
-  const parentRect = parent.getBoundingClientRect();
-
-  // Both rects are viewport-relative, so the subtraction has already cancelled
-  // page scroll. Only a scrolling parent adds to that — the body is not what
-  // scrolls a document, and counting window.scrollY here counted it twice.
-  const scrollTop = parent === document.body ? 0 : parent.scrollTop;
-  const top = anchorRect.bottom - parentRect.top + scrollTop + gap;
-
-  // Horizontal: clamp to parent width
-  const left = Math.max(0, Math.min(anchorRect.left - parentRect.left, parentRect.width - popoverWidth - 12));
-
-  parent.style.position = "relative";
-
-  return {
-    style: { position: "absolute", top: `${top}px`, left: `${left}px` },
-    parent,
-  };
-}

package/src/client/regionTarget.ts

@@ -1,180 +0,0 @@
-import type { AnnotationTarget } from "./annotationTarget";
-
-/**
- * A rectangle or ellipse drawn inside an image block, so a reader can point at
- * one corner of a screenshot instead of the whole picture.
- *
- * Coordinates are normalized against the image box, which is a uniform scale of
- * the image's natural size — that is what lets a region survive a resize, a
- * zoom or a different screen. They are stored on a fixed integer grid rather
- * than as floats: a float printed into the snippet and read back is not
- * guaranteed to be the same float, and a locator that shifts by one ulp names
- * a region nobody drew.
- */
-
-/** The grid a region snaps to: hundredths of a percent of the image box. */
-export const REGION_UNITS = 10000;
-
-/** Under this a drag is a stray click, not a region — 0.3% of the image. */
-const MIN_REGION_SIZE = 30;
-
-export type RegionShape = "rect" | "ellipse";
-
-export interface RegionPoint {
-  x: number;
-  y: number;
-}
-
-/** Left, top, width and height, all in REGION_UNITS. */
-export interface RegionBox extends RegionPoint {
-  w: number;
-  h: number;
-}
-
-export interface RegionLocator extends RegionBox {
-  /** The image block the region sits in — the same `src` `[Image]` is keyed by. */
-  src: string;
-  shape: RegionShape;
-}
-
-/** Marks the element a region is measured against: the image's own box, not the
- *  `<figure>`, which also holds the caption and would skew every percentage. */
-export const REGION_HOST_ATTR = "data-annotation-image";
-
-// The coordinates are anchored at the end and strictly numeric, so the greedy
-// `src` group can hold anything at all — including a literal " @1,2,3,4" — and
-// still hand the real coordinates to the tail.
-const REGION_PATTERN = /^\[Region:(rect|ellipse)\] ([\s\S]+) @(0|[1-9]\d*),(0|[1-9]\d*),(0|[1-9]\d*),(0|[1-9]\d*)$/;
-
-function readShape(value: string | undefined): RegionShape | null {
-  if (value === "rect") return "rect";
-  if (value === "ellipse") return "ellipse";
-  return null;
-}
-
-/** A coordinate as `format` would have written it, or null. */
-function readUnit(value: string | undefined): number | null {
-  if (value === undefined) return null;
-  const n = Number(value);
-  if (!Number.isInteger(n) || n < 0 || n > REGION_UNITS) return null;
-  return n;
-}
-
-export function clampUnit(value: number): number {
-  return Math.min(REGION_UNITS, Math.max(0, value));
-}
-
-/** Where a pointer landed inside a box, on the region grid. Null for a box with
- *  no extent — happy-dom and a not-yet-laid-out image both report zero. */
-export function regionPointIn(box: { width: number; height: number }, offsetX: number, offsetY: number): RegionPoint | null {
-  if (!(box.width > 0) || !(box.height > 0)) return null;
-  return {
-    x: clampUnit(Math.round((offsetX / box.width) * REGION_UNITS)),
-    y: clampUnit(Math.round((offsetY / box.height) * REGION_UNITS)),
-  };
-}
-
-/** The box two drag corners span, kept inside the image. */
-export function regionBetween(a: RegionPoint, b: RegionPoint): RegionBox {
-  const x = Math.min(a.x, b.x);
-  const y = Math.min(a.y, b.y);
-  return {
-    x,
-    y,
-    w: Math.min(REGION_UNITS - x, Math.abs(a.x - b.x)),
-    h: Math.min(REGION_UNITS - y, Math.abs(a.y - b.y)),
-  };
-}
-
-export function isDrawableRegion(box: RegionBox): boolean {
-  return box.w >= MIN_REGION_SIZE && box.h >= MIN_REGION_SIZE;
-}
-
-/** CSS geometry for the overlay. REGION_UNITS is percent × 100, so every value
- *  the grid holds divides out exactly. */
-export function regionStyle(box: RegionBox): { left: string; top: string; width: string; height: string } {
-  return {
-    left: `${box.x / 100}%`,
-    top: `${box.y / 100}%`,
-    width: `${box.w / 100}%`,
-    height: `${box.h / 100}%`,
-  };
-}
-
-function pct(units: number): string {
-  return `${(units / 100).toFixed(1).replace(/\.0$/, "")}%`;
-}
-
-export function describeRegion(locator: RegionLocator): string {
-  const x = `${pct(locator.x)}-${pct(locator.x + locator.w)}`;
-  const y = `${pct(locator.y)}-${pct(locator.y + locator.h)}`;
-  return `[Region] ${locator.src} — ${locator.shape} x ${x}, y ${y} of the image`;
-}
-
-/** The image box a region belongs to. Compared attribute by attribute rather
- *  than through a selector, because an image src is a path and may carry any
- *  character a selector would have to escape. */
-export function findRegionHost(src: string, root: ParentNode): HTMLElement | null {
-  for (const figure of root.querySelectorAll("[data-md='image']")) {
-    if (!(figure instanceof HTMLElement)) continue;
-    if (figure.getAttribute("data-md-src") !== src) continue;
-    const host = figure.querySelector(`[${REGION_HOST_ATTR}]`);
-    if (host instanceof HTMLElement) return host;
-  }
-  return null;
-}
-
-export function applyRegionStyle(el: HTMLElement, box: RegionBox): void {
-  const style = regionStyle(box);
-  el.style.left = style.left;
-  el.style.top = style.top;
-  el.style.width = style.width;
-  el.style.height = style.height;
-}
-
-/** The overlay box for one region. It carries `data-annotation-id`, so the
- *  hover, active-state and delete plumbing that already drives inline marks
- *  drives these too. */
-export function createRegionOverlay(box: RegionBox, shape: RegionShape, annotationId: string): HTMLElement {
-  const el = document.createElement("div");
-  el.className = "ann-region";
-  el.setAttribute("data-annotation-id", annotationId);
-  el.setAttribute("data-annotation-region", shape);
-  applyRegionStyle(el, box);
-  return el;
-}
-
-export const regionTarget: AnnotationTarget<RegionLocator> = {
-  kind: "region",
-
-  parse: (snippet) => {
-    const match = REGION_PATTERN.exec(snippet);
-    if (!match) return null;
-    const shape = readShape(match[1]);
-    const src = match[2];
-    const x = readUnit(match[3]);
-    const y = readUnit(match[4]);
-    const w = readUnit(match[5]);
-    const h = readUnit(match[6]);
-    if (shape === null || src === undefined) return null;
-    if (x === null || y === null || w === null || h === null) return null;
-    if (w < 1 || h < 1) return null;
-    return { src, shape, x, y, w, h };
-  },
-
-  format: (locator) =>
-    `[Region:${locator.shape}] ${locator.src} @${locator.x},${locator.y},${locator.w},${locator.h}`,
-
-  // The overlay is found by annotation id like any other decoration; this is
-  // the fallback for before it is drawn, and it lands on the right image.
-  find: (locator, root) => findRegionHost(locator.src, root),
-
-  restore: (locator, root, ann) => {
-    if (root.querySelector(`[data-annotation-id="${ann.id}"]`)) return;
-    const host = findRegionHost(locator.src, root);
-    if (!host) return;
-    host.appendChild(createRegionOverlay(locator, locator.shape, ann.id));
-  },
-
-  describe: describeRegion,
-};

package/src/client/testing/dom.ts

@@ -1,74 +0,0 @@
-/**
- * DOM harness for the client tests.
- *
- * Import this **before** the module under test. ESM evaluates imports in order,
- * so putting it first is what guarantees the globals exist by the time anything
- * that reads `document` is evaluated.
- *
- * happy-dom is not a browser: it runs no layout. Everything geometric —
- * `getBoundingClientRect`, `scrollHeight`, `offsetWidth` — reads zero unless the
- * test stubs it, and `scrollIntoView` and CSS animations do nothing. Assert on
- * structure and on the values a function computes, never on real measurements.
- */
-import { GlobalRegistrator } from "@happy-dom/global-registrator";
-
-// Bun runs every test file in one process, so the second file to import this
-// must not register over the first.
-if (!globalThis.document) {
-  // happy-dom replaces the whole fetch stack with a Window implementation over
-  // node:http. That is not what this harness is for, and because every test
-  // file shares one process it reaches code that has nothing to do with the
-  // DOM — the daemon lifecycle probes `/health` through the global `fetch` and
-  // fails on responses Bun parses fine. Which tests broke depended on file
-  // order, so it passed locally and failed in CI. Keep Bun's stack.
-  const runtimeFetch = globalThis.fetch;
-  const runtimeResponse = globalThis.Response;
-  const runtimeRequest = globalThis.Request;
-  const runtimeHeaders = globalThis.Headers;
-
-  GlobalRegistrator.register();
-
-  globalThis.fetch = runtimeFetch;
-  globalThis.Response = runtimeResponse;
-  globalThis.Request = runtimeRequest;
-  globalThis.Headers = runtimeHeaders;
-}
-
-/**
- * Replace the document body with `html` inside a fresh container and return it.
- * Call it at the start of each test — the document is shared across every test
- * in the process, so whatever the previous one left behind is still there.
- */
-export function mountContainer(html: string): HTMLElement {
-  document.body.innerHTML = `<div data-testid="container">${html}</div>`;
-  const container = document.body.firstElementChild;
-  if (!(container instanceof HTMLElement)) throw new Error("container did not mount");
-  return container;
-}
-
-/**
- * A Range over the first occurrence of `text` within a single text node of
- * `root`, which is how a reader's selection arrives in the annotation code.
- * Throws rather than returning null so a typo in the fixture fails the test at
- * its cause instead of somewhere downstream.
- */
-export function selectText(root: HTMLElement, text: string): Range {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  let node: Node | null;
-  while ((node = walker.nextNode())) {
-    const content = node.textContent ?? "";
-    const index = content.indexOf(text);
-    if (index === -1) continue;
-    const range = document.createRange();
-    range.setStart(node, index);
-    range.setEnd(node, index + text.length);
-    return range;
-  }
-  throw new Error(`no text node in the fixture contains ${JSON.stringify(text)}`);
-}
-
-/** Ids of the marks currently wrapping annotated text, in document order. */
-export function markIds(root: HTMLElement): string[] {
-  return [...root.querySelectorAll("[data-annotation-id]")]
-    .map((el) => el.getAttribute("data-annotation-id") ?? "");
-}