@cueloop/client 0.1.0-alpha.44 → 0.1.0-alpha.46

package/src/prototype-browser.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, test } from "bun:test";
+import { cssBoxToCell, imageCellToCss } from "./prototype-browser";
+
+const IMAGE = { x: 1, y: 1, width: 80, height: 40 };
+const VIEWPORT = { width: 1280, height: 720 };
+
+describe("imageCellToCss", () => {
+  test("maps a cell inside the image to the center of its viewport pixel band", () => {
+    // Act - the image's top-left cell (1,1)
+    const css = imageCellToCss({ x: 1, y: 1 }, IMAGE, VIEWPORT)!;
+
+    // Assert - half a cell into the first band
+    expect(css.x).toBeCloseTo((0.5 / 80) * 1280, 5);
+    expect(css.y).toBeCloseTo((0.5 / 40) * 720, 5);
+  });
+
+  test("a click below the image's origin lands deeper in the page", () => {
+    // Act
+    const top = imageCellToCss({ x: 40, y: 2 }, IMAGE, VIEWPORT)!;
+    const bottom = imageCellToCss({ x: 40, y: 38 }, IMAGE, VIEWPORT)!;
+
+    // Assert
+    expect(bottom.y).toBeGreaterThan(top.y);
+  });
+
+  test("a cell outside the image returns null", () => {
+    // Assert - the gutter left of and the row above the image
+    expect(imageCellToCss({ x: 0, y: 10 }, IMAGE, VIEWPORT)).toBeNull();
+    expect(imageCellToCss({ x: 10, y: 0 }, IMAGE, VIEWPORT)).toBeNull();
+    expect(imageCellToCss({ x: 200, y: 10 }, IMAGE, VIEWPORT)).toBeNull();
+  });
+});
+
+describe("cssBoxToCell", () => {
+  test("maps a viewport rect back to the image cells covering it", () => {
+    // Arrange - a rect covering the right half, lower half of the page
+    const box = { x: 640, y: 360, width: 320, height: 180 };
+
+    // Act
+    const cell = cssBoxToCell(box, IMAGE, VIEWPORT);
+
+    // Assert - x at half width -> 40 cells in from the image origin (1)
+    expect(cell.column).toBe(1 + Math.floor((640 / 1280) * 80));
+    expect(cell.row).toBe(1 + Math.floor((360 / 720) * 40));
+    expect(cell.columns).toBe(Math.round((320 / 1280) * 80));
+    expect(cell.rows).toBe(Math.round((180 / 720) * 40));
+  });
+
+  test("a zero-size rect still reserves at least one cell", () => {
+    // Assert
+    const cell = cssBoxToCell({ x: 0, y: 0, width: 0, height: 0 }, IMAGE, VIEWPORT);
+    expect(cell.columns).toBe(1);
+    expect(cell.rows).toBe(1);
+  });
+});

package/src/prototype-browser.ts

@@ -0,0 +1,218 @@
+/// <reference lib="dom" />
+/**
+ * Headless-Chromium backing for prototype review: render an HTML file to a PNG
+ * and resolve a click coordinate to a DOM element. puppeteer-core is imported
+ * lazily so plan/diff review and the test suite never load it.
+ */
+
+export interface PrototypeElement {
+  /** Stable CSS selector - the annotation anchor's authority. */
+  selector: string;
+  /** Short human label for the rail card (element text, else the selector). */
+  quote: string;
+  /** Element rectangle in CSS pixels within the captured viewport. */
+  box: ElementBox;
+}
+
+export interface ElementBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface PrototypeViewport {
+  width: number;
+  height: number;
+}
+
+export interface PrototypeRenderer {
+  readonly viewport: PrototypeViewport;
+  screenshot(): Promise<Uint8Array>;
+  elementAt(cssX: number, cssY: number): Promise<PrototypeElement | null>;
+  highlight(selector: string | null): Promise<void>;
+  close(): Promise<void>;
+}
+
+export interface LaunchOptions {
+  filePath: string;
+  viewport: PrototypeViewport;
+  /** Absolute path to a Chrome/Chromium binary; falls back to the channel. */
+  executablePath?: string;
+}
+
+/** Cell click -> CSS pixel inside the letterboxed image, or null when outside it. */
+export function imageCellToCss(
+  event: { x: number; y: number },
+  image: { x: number; y: number; width: number; height: number },
+  viewport: PrototypeViewport,
+): { x: number; y: number } | null {
+  const columnInImage = event.x - image.x;
+  const rowInImage = event.y - image.y;
+  if (
+    columnInImage < 0 ||
+    rowInImage < 0 ||
+    columnInImage >= image.width ||
+    rowInImage >= image.height
+  ) {
+    return null;
+  }
+  return {
+    x: ((columnInImage + 0.5) / image.width) * viewport.width,
+    y: ((rowInImage + 0.5) / image.height) * viewport.height,
+  };
+}
+
+/** CSS pixel rect -> the image cell it maps to, for anchoring overlays. */
+export function cssBoxToCell(
+  box: ElementBox,
+  image: { x: number; y: number; width: number; height: number },
+  viewport: PrototypeViewport,
+): { column: number; row: number; columns: number; rows: number } {
+  const scaleColumn = image.width / viewport.width;
+  const scaleRow = image.height / viewport.height;
+  return {
+    column: image.x + Math.floor(box.x * scaleColumn),
+    row: image.y + Math.floor(box.y * scaleRow),
+    columns: Math.max(1, Math.round(box.width * scaleColumn)),
+    rows: Math.max(1, Math.round(box.height * scaleRow)),
+  };
+}
+
+export async function launchPrototypeRenderer(options: LaunchOptions): Promise<PrototypeRenderer> {
+  const puppeteer = (await import("puppeteer-core")).default;
+  const { pathToFileURL } = await import("node:url");
+  const browser = await puppeteer.launch({
+    executablePath: options.executablePath ?? chromeExecutable(),
+    headless: true,
+    args: ["--no-sandbox", "--hide-scrollbars", "--force-color-profile=srgb"],
+    defaultViewport: {
+      width: options.viewport.width,
+      height: options.viewport.height,
+      deviceScaleFactor: 2,
+    },
+  });
+  // close the browser if page setup fails, so a launch error never leaks Chromium
+  const page = await browser.newPage().catch(async (error) => {
+    await browser.close();
+    throw error;
+  });
+  await page
+    .goto(pathToFileURL(options.filePath).href, { waitUntil: "networkidle0" })
+    .catch(async (error) => {
+      await browser.close();
+      throw error;
+    });
+
+  return {
+    viewport: options.viewport,
+    async screenshot() {
+      const buffer = await page.screenshot({ type: "png", encoding: "binary" });
+      return new Uint8Array(buffer as Buffer);
+    },
+    async elementAt(cssX, cssY) {
+      return (await page.evaluate(elementAtScript, cssX, cssY)) as PrototypeElement | null;
+    },
+    async highlight(selector) {
+      await page.evaluate(highlightScript, selector);
+    },
+    async close() {
+      await browser.close();
+    },
+  };
+}
+
+/** Serialized into the page (self-contained for puppeteer): resolve the click to a component element. */
+function elementAtScript(x: number, y: number): unknown {
+  const SEMANTIC = new Set([
+    "SECTION",
+    "ARTICLE",
+    "LI",
+    "NAV",
+    "HEADER",
+    "FOOTER",
+    "ASIDE",
+    "FORM",
+  ]);
+  const isNamed = (element: Element): boolean =>
+    element.classList.length > 0 || SEMANTIC.has(element.tagName);
+  // a card wraps several children: climb to the nearest named container holding
+  // more than one child, else the nearest named ancestor, else the clicked leaf
+  const componentRoot = (start: Element): Element => {
+    let namedFallback: Element | null = null;
+    let current: Element | null = start;
+    while (current && current !== document.body) {
+      if (isNamed(current)) {
+        if (current.childElementCount > 1) return current;
+        namedFallback = namedFallback ?? current;
+      }
+      current = current.parentElement;
+    }
+    return namedFallback ?? start;
+  };
+  const selectorFor = (start: Element): string => {
+    const parts: string[] = [];
+    let current: Element | null = start;
+    while (current && current.nodeType === 1 && current !== document.documentElement) {
+      let part = current.tagName.toLowerCase();
+      if (current.id) {
+        parts.unshift(part + "#" + CSS.escape(current.id));
+        break;
+      }
+      const parent: Element | null = current.parentElement;
+      if (parent) {
+        const twins = [...parent.children].filter((child) => child.tagName === current!.tagName);
+        if (twins.length > 1) part += ":nth-of-type(" + (twins.indexOf(current) + 1) + ")";
+      }
+      parts.unshift(part);
+      current = current.parentElement;
+    }
+    return parts.join(" > ");
+  };
+  const hit = document.elementFromPoint(x, y);
+  if (!(hit instanceof Element)) return null;
+  const node = componentRoot(hit);
+  const selector = selectorFor(node);
+  if (!selector) return null;
+  const text = (node.textContent || "").replace(/\s+/g, " ").trim();
+  const tag = node.tagName.toLowerCase();
+  const quote = text
+    ? text.slice(0, 80)
+    : node.id
+      ? tag + "#" + node.id
+      : node.classList.length
+        ? tag + "." + node.classList[0]
+        : tag;
+  const rect = node.getBoundingClientRect();
+  return { selector, quote, box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } };
+}
+
+function highlightScript(selector: string | null): void {
+  const ATTRIBUTE = "data-cueloop-selected";
+  const STYLE_ID = "cueloop-highlight-style";
+  document
+    .querySelectorAll("[" + ATTRIBUTE + "]")
+    .forEach((node) => node.removeAttribute(ATTRIBUTE));
+  if (!document.getElementById(STYLE_ID)) {
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent =
+      "[" + ATTRIBUTE + "]{outline:2px solid #f38ba8 !important;outline-offset:2px;}";
+    document.head.appendChild(style);
+  }
+  if (selector) {
+    const node = document.querySelector(selector);
+    if (node) node.setAttribute(ATTRIBUTE, "");
+  }
+}
+
+/** Standard Chrome install locations by platform; puppeteer-core ships no browser. */
+function chromeExecutable(): string {
+  if (process.platform === "darwin") {
+    return "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
+  }
+  if (process.platform === "win32") {
+    return "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
+  }
+  return "/usr/bin/google-chrome";
+}

package/src/session-controller.ts

@@ -197,6 +197,8 @@ export interface ReviewController {
     end: number,
     body: string,
   ): string | undefined;
+  /** Anchor a prototype comment to a DOM element by its selector. */
+  annotatePrototype(selector: string, quote: string, body: string): string | undefined;
   /** Rewrite a stored annotation's body in place (the rail-card edit). */
   updateAnnotation(id: string, body: string): void;
   removeAnnotation(id: string): void;
@@ -679,6 +681,18 @@ class Controller implements ReviewController {
     return wire.id;
   }
 
+  annotatePrototype(selector: string, quote: string, body: string): string | undefined {
+    const session = this.snapshot.session;
+    if (!session) return undefined;
+    const anchor = { quote, prefix: "", suffix: "", selector };
+    const wire = { id: newAnnotationId(), kind: "comment", anchor, body };
+    const persisted = this.client!.sessionAnnotate(session.id, wire);
+    this.apply(persisted);
+    this.mirrorAnnotation(persisted, wire);
+    this.setStatus("comment added");
+    return wire.id;
+  }
+
   updateAnnotation(id: string, body: string): void {
     const session = this.snapshot.session;
     if (!session) return;

package/src/view-plan.regression.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, test } from "bun:test";
+import {
+  blockRuns,
+  buildDisplay,
+  displayText,
+  renderedOffsetFor,
+  workRangeForRendered,
+} from "./view-plan";
+
+// M0 (#232): lock the renderer's current StyleRun output and offset round-trips
+// before the inline-tokenizer milestones (M1-M5) change blockRuns. The snapshots
+// capture today's runs, so a later milestone's diff is explicit and reviewable.
+// The round-trip assertions are the durable invariant: a visible word's rendered
+// selection must always recover that word's *source* (block.text) offsets, even
+// once inline markers are concealed - this is what keeps quote anchors exact.
+
+const DOC = `# Heading with **bold**
+
+A paragraph with **strong**, *em*, \`code\`, ~~strike~~ and a [label](https://example.com).
+
+- a list item with *emphasis*
+`;
+
+const blocks = buildDisplay(DOC);
+
+describe("view-plan regression harness (M0)", () => {
+  test("blockRuns output is stable across the representative blocks", () => {
+    // Arrange / Act
+    const runsByBlock = blocks.map((block) => ({
+      type: block.type,
+      text: displayText(block),
+      runs: blockRuns(block, true),
+    }));
+
+    // Assert
+    expect(runsByBlock).toMatchSnapshot();
+  });
+
+  // A visible word's source offsets survive the rendered round-trip. Holds at M0
+  // (1:1 today) and must keep holding once M2 conceals markers and the rendered
+  // offset shifts - the recovered work range stays the word's block.text span.
+  const paragraph = blocks.find((block) => displayText(block).includes("strong"))!;
+  const paragraphRuns = blockRuns(paragraph, true);
+  const paragraphText = displayText(paragraph);
+
+  for (const word of ["paragraph", "strong", "strike", "label"]) {
+    test(`rendered selection of "${word}" recovers its block.text offsets`, () => {
+      // Arrange
+      const start = paragraphText.indexOf(word);
+      const rendered = renderedOffsetFor(paragraphRuns, start);
+
+      // Assert
+      expect(rendered).not.toBeNull();
+      expect(workRangeForRendered(paragraphRuns, rendered!, rendered! + word.length)).toEqual({
+        start,
+        end: start + word.length,
+      });
+    });
+  }
+});

package/src/view-plan.test.ts

@@ -6,7 +6,10 @@ import {
   marksByDisplay,
   nextWorkBlock,
   overlayMarks,
+  renderedOffsetAtOrAfter,
+  renderedOffsetAtOrBefore,
   renderedOffsetFor,
+  safeLinkHref,
   spanFromRange,
   spanKey,
   startSpan,
@@ -125,6 +128,86 @@ describe("blockRuns + overlayMarks", () => {
   });
 });
 
+describe("M4: link hrefs are scheme-validated for OSC 8 (#236)", () => {
+  test("trusts http(s) and mailto, drops everything else", () => {
+    // Assert
+    expect(safeLinkHref("https://example.com")).toBe("https://example.com");
+    expect(safeLinkHref("http://x")).toBe("http://x");
+    expect(safeLinkHref("mailto:a@b.c")).toBe("mailto:a@b.c");
+    expect(safeLinkHref("javascript:alert(1)")).toBeUndefined();
+    expect(safeLinkHref("./relative/path")).toBeUndefined();
+    expect(safeLinkHref(undefined)).toBeUndefined();
+  });
+
+  test("a control byte or space in the target drops the link", () => {
+    // Assert - ESC and BEL could splice into the OSC 8 escape stream
+    expect(safeLinkHref("https://x\x1b]8;;evil\x07")).toBeUndefined();
+    expect(safeLinkHref("https://x\x07")).toBeUndefined();
+    expect(safeLinkHref("https://x y")).toBeUndefined();
+  });
+
+  test("blockRuns carries the link href through to the link run", () => {
+    // Act
+    const block = buildDisplay("see [docs](https://example.com) now\n")[0]!;
+    const link = blockRuns(block, true).find((run) => run.role === "link")!;
+
+    // Assert
+    expect(link.text).toBe("docs");
+    expect(link.href).toBe("https://example.com");
+  });
+});
+
+describe("M3: inline emphasis composes with word-diff (#235)", () => {
+  test("context emphasis survives; added text keeps the green diff role; markers concealed", () => {
+    // Arrange - "**this**" is unchanged (context, stays emphasized); "safe"->"sound" is the edit
+    const block = buildDisplay("keep **this** safe\n", "keep **this** sound\n")[0]!;
+
+    // Act
+    const runs = blockRuns(block, true);
+
+    // Assert - no marker text renders anywhere
+    expect(runs.every((run) => !run.text.includes("*"))).toBe(true);
+    // the unchanged emphasized word keeps its strong role (context, not diffed)
+    expect(runs.find((run) => run.text === "this")!.role).toBe("strong");
+    // the added word is green (ins wins over any emphasis), the removed one opaque
+    expect(runs.find((run) => run.text.includes("sound"))!.role).toBe("ins");
+    expect(runs.some((run) => run.role === "del" && run.start === null)).toBe(true);
+  });
+
+  test("markers inside added text conceal while the run stays a positioned ins", () => {
+    // Arrange - an emphasized word is added into an otherwise unchanged line
+    const block = buildDisplay("keep it safe\n", "keep it **very** safe\n")[0]!;
+
+    // Act
+    const runs = blockRuns(block, true);
+    const added = runs.find((run) => run.text === "very")!;
+
+    // Assert - concealed markers, green role, and an exact work offset back into work text
+    expect(added.role).toBe("ins");
+    expect(added.start).not.toBeNull();
+    expect(block.work!.text.slice(added.start!, added.start! + "very".length)).toBe("very");
+    expect(runs.every((run) => !run.text.includes("*"))).toBe(true);
+  });
+
+  test("an anchor over an emphasized context word round-trips to its work offsets", () => {
+    // Arrange
+    const block = buildDisplay("hold **steady** now\n", "hold **steady** later\n")[0]!;
+    const runs = blockRuns(block, true);
+    const work = block.work!.text;
+    const start = work.indexOf("steady");
+
+    // Act
+    const rendered = renderedOffsetFor(runs, start);
+
+    // Assert
+    expect(rendered).not.toBeNull();
+    expect(workRangeForRendered(runs, rendered!, rendered! + "steady".length)).toEqual({
+      start,
+      end: start + "steady".length,
+    });
+  });
+});
+
 describe("marksByDisplay", () => {
   test("annotations resolve into display coordinates", () => {
     // Arrange
@@ -217,6 +300,28 @@ describe("rendered/work offset mapping", () => {
     expect(renderedOffsetFor(runs, 99)).toBeNull();
     expect(workRangeForRendered(runs, 90, 99)).toBeNull();
   });
+
+  test("a span starting/ending on concealed markers snaps to the visible word", () => {
+    // Arrange - the word span over "**very**" covers the markers, which have
+    // no rendered cells; the clamped lookups land on "very" itself
+    const text = "keep it **very** safe\n";
+    const runs = blockRuns(buildDisplay(text)[0]!, true);
+    const spanStart = text.indexOf("**very**");
+    const spanEnd = spanStart + "**very**".length;
+
+    // Act
+    const renderedStart = renderedOffsetAtOrAfter(runs, spanStart)!;
+    const renderedEnd = renderedOffsetAtOrBefore(runs, spanEnd - 1)!;
+
+    // Assert
+    const renderedText = runs.map((run) => run.text).join("");
+    expect(renderedText.slice(renderedStart, renderedEnd + 1)).toBe("very");
+    // exact hits behave like renderedOffsetFor
+    expect(renderedOffsetAtOrAfter(runs, 0)).toBe(0);
+    expect(renderedOffsetAtOrBefore(runs, 0)).toBe(0);
+    // nothing positioned beyond the text end
+    expect(renderedOffsetAtOrAfter(runs, 99)).toBeNull();
+  });
 });
 
 describe("span mode", () => {

package/src/view-plan.ts

@@ -8,6 +8,7 @@
  */
 
 import {
+  inlineRuns,
   isAddressed,
   lcsDiff,
   parseBlocks,
@@ -141,7 +142,18 @@ function numberOrderedListItems(display: DisplayBlock[]): void {
 
 // ── marks (annotation highlights + keyboard span) ──
 
-export type RunRole = "plain" | "ins" | "del" | "mark-comment" | "kspan" | "mark-focus";
+export type RunRole =
+  | "plain"
+  | "ins"
+  | "del"
+  | "mark-comment"
+  | "kspan"
+  | "mark-focus"
+  | "strong"
+  | "em"
+  | "code"
+  | "strike"
+  | "link";
 
 export interface StyleRun {
   text: string;
@@ -149,6 +161,8 @@ export interface StyleRun {
   /** Offset of this run in the block's working text; null for del runs. */
   start: number | null;
   annotationId?: string;
+  /** Link target for `link` runs. */
+  href?: string;
 }
 
 export interface Mark {
@@ -195,6 +209,7 @@ export function marksByDisplay(
 
 /** Base runs for a display block: plain text, or word-diff for mod blocks. */
 export function blockRuns(block: DisplayBlock, markup: boolean): StyleRun[] {
+  const literal = block.kind === "code" || block.kind === "hr";
   if (block.type === "mod" && markup) {
     const changes = wordLevelChanges(block.base!.text, block.work!.text);
     const runs: StyleRun[] = [];
@@ -202,18 +217,57 @@ export function blockRuns(block: DisplayBlock, markup: boolean): StyleRun[] {
     for (const change of changes) {
       if (change.kind === "removed") {
         runs.push({ text: change.text, role: "del", start: null });
-      } else {
-        runs.push({
-          text: change.text,
-          role: change.kind === "added" ? "ins" : "plain",
-          start: workOffset,
-        });
-        workOffset += change.text.length;
+        continue;
       }
+      // A code/rule block stays literal; prose segments inline-tokenize so their
+      // markers conceal while their work offsets stay intact. Added text keeps
+      // the green diff role (it wins over emphasis); context text shows emphasis.
+      const segment = literal
+        ? [{ text: change.text, role: "plain" as const, start: workOffset }]
+        : inlineStyleRuns(change.text, workOffset);
+      for (const run of segment) {
+        runs.push(change.kind === "added" ? { ...run, role: "ins" } : run);
+      }
+      workOffset += change.text.length;
     }
     return runs;
   }
-  return [{ text: displayText(block), role: "plain", start: 0 }];
+  const text = displayText(block);
+  // Prose carries inline markup; code fences and rules are literal. Concealed
+  // markers are dropped, so every rendered cell still maps to a work offset.
+  if (markup && !literal) {
+    return inlineStyleRuns(text, 0);
+  }
+  return [{ text, role: "plain", start: 0 }];
+}
+
+/** A link href safe to hand a terminal as an OSC 8 target, or undefined. Only
+ *  http(s) and mailto are trusted; a scheme like javascript: is dropped. The
+ *  target must stay printable ASCII: a control byte (ESC, BEL) in a reviewed
+ *  document could otherwise splice into the terminal escape stream. */
+export function safeLinkHref(href: string | undefined): string | undefined {
+  if (href === undefined) return undefined;
+  if (!/^(https?:|mailto:)/i.test(href)) return undefined;
+  return /^[\x21-\x7e]+$/.test(href) ? href : undefined;
+}
+
+/**
+ * Map the schema inline tokens to positioned StyleRuns, dropping the concealed
+ * markers. `base` is the run's offset within the block's working text (0 for a
+ * whole prose block; a segment's start for a word-diff piece).
+ */
+export function inlineStyleRuns(text: string, base: number): StyleRun[] {
+  const runs: StyleRun[] = [];
+  for (const run of inlineRuns(text)) {
+    if (run.role === "marker" || run.start === null) continue;
+    runs.push({
+      text: run.text,
+      role: run.role === "text" ? "plain" : run.role,
+      start: base + run.start,
+      ...(run.href !== undefined ? { href: run.href } : {}),
+    });
+  }
+  return runs;
 }
 
 /** Split runs at mark boundaries; marks only bind to runs with offsets. */
@@ -274,6 +328,39 @@ export function renderedOffsetFor(runs: StyleRun[], workOffset: number): number
   return null;
 }
 
+/**
+ * Rendered offset of the first positioned character at or after `workOffset`.
+ * A word span may start on a concealed marker (the `**` of an emphasized
+ * word), which has no rendered cell; the span visuals snap to the first
+ * character that does. Positioned runs appear in ascending work order.
+ */
+export function renderedOffsetAtOrAfter(runs: StyleRun[], workOffset: number): number | null {
+  let rendered = 0;
+  for (const run of runs) {
+    if (run.start !== null && run.start + run.text.length > workOffset) {
+      return rendered + Math.max(0, workOffset - run.start);
+    }
+    rendered += run.text.length;
+  }
+  return null;
+}
+
+/**
+ * Rendered offset of the last positioned character at or before `workOffset` -
+ * the closing-marker counterpart of `renderedOffsetAtOrAfter`.
+ */
+export function renderedOffsetAtOrBefore(runs: StyleRun[], workOffset: number): number | null {
+  let rendered = 0;
+  let best: number | null = null;
+  for (const run of runs) {
+    if (run.start !== null && run.start <= workOffset) {
+      best = rendered + Math.min(workOffset - run.start, run.text.length - 1);
+    }
+    rendered += run.text.length;
+  }
+  return best;
+}
+
 /**
  * Work-text range covered by a rendered-text selection [start, end). Del runs
  * and other unpositioned text inside the selection contribute nothing; the