@cueloop/client 0.1.0-alpha.43 → 0.1.0-alpha.45

package/src/components/PlanSheet.tsx

@@ -16,7 +16,9 @@ import {
   blockRuns,
   displayText,
   overlayMarks,
-  renderedOffsetFor,
+  renderedOffsetAtOrAfter,
+  renderedOffsetAtOrBefore,
+  safeLinkHref,
   workRangeForRendered,
   type DisplayBlock,
   type Mark,
@@ -33,6 +35,20 @@ import { FRAME_BORDER_STYLE } from "./primitives/frame";
 /** A cut block reads as removed: struck through and grayed, never red. */
 const CUT_ATTRIBUTES = createTextAttributes({ strikethrough: true, dim: true });
 
+/** Inline-emphasis attributes, reused per run so the render loop allocates none. */
+const STRONG_ATTRIBUTES = createTextAttributes({ bold: true });
+const EM_ATTRIBUTES = createTextAttributes({ italic: true });
+const STRIKE_ATTRIBUTES = createTextAttributes({ strikethrough: true });
+const LINK_ATTRIBUTES = createTextAttributes({ underline: true });
+/** Block-level base attributes: headings read bold, blockquotes read italic. */
+const HEADING_ATTRIBUTES = createTextAttributes({ bold: true });
+const QUOTE_ATTRIBUTES = createTextAttributes({ italic: true });
+
+/** The popover toolbar card is 3 rows tall and sits flush above the marked words. */
+const POPOVER_ROWS_ABOVE = 3;
+/** Widest toolbar row ("comment · cut · actions · [x]") plus border and padding. */
+const POPOVER_TOOLBAR_COLUMNS = 33;
+
 export interface PlanSelection {
   displayIndex: number;
   start: number;
@@ -73,6 +89,13 @@ export interface PlanSheetProps {
   popover: PlanPopoverState | null;
   editOrphanCount: number;
   onLineActivate: (displayIndex: number) => void;
+  /**
+   * Fires on any mouse release inside the sheet. A drag released outside a
+   * block's text (the gutter, past a line end, a gap between blocks) never
+   * reaches a block's own handler, so this fallback lets the app still turn
+   * the finished drag's native selection into a span.
+   */
+  onSelectionRelease?: () => void;
   theme?: Theme;
 }
 
@@ -108,6 +131,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     popover,
     editOrphanCount,
     onLineActivate,
+    onSelectionRelease,
     theme,
   }: PlanSheetProps,
   handleRef,
@@ -146,9 +170,11 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       if (!renderer) return;
       const blockRef = blockRefs.current.get(span.displayIndex);
       if (!blockRef) return;
-      const renderedStart = renderedOffsetFor(blockRef.runs, span.start);
-      const renderedEnd = renderedOffsetFor(blockRef.runs, span.end - 1);
-      if (renderedStart === null || renderedEnd === null) return;
+      // a span over an emphasized word starts/ends on concealed markers with
+      // no rendered cell; snap to the visible characters inside them
+      const renderedStart = renderedOffsetAtOrAfter(blockRef.runs, span.start);
+      const renderedEnd = renderedOffsetAtOrBefore(blockRef.runs, span.end - 1);
+      if (renderedStart === null || renderedEnd === null || renderedEnd < renderedStart) return;
       const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
       const endPosition = positionOfRenderedOffset(blockRef.renderable, renderedEnd);
       renderer.startSelection(blockRef.renderable, startPosition.x, startPosition.y);
@@ -166,24 +192,43 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
     },
   }));
 
-  // the popover floats above its block, anchored to the selection start; flip
-  // below when the block sits too near the viewport top to fit above it
-  const [popoverFlipBelow, setPopoverFlipBelow] = useState(false);
+  // the popover sits flush above the marked words, anchored to the
+  // selection start mapped through the wrap geometry (line + column, not the
+  // block's linear offset). It renders as the LAST child of the scrollbox in
+  // content coordinates: content coordinates are scroll-invariant so the card
+  // tracks its block, and the last sibling paints over every block it floats
+  // across. Flips below when the line sits too near the viewport top.
+  const [popoverTop, setPopoverTop] = useState(0);
   const [popoverLeft, setPopoverLeft] = useState(2);
+  // a terminal resize rewraps every block; re-run the anchor math against the
+  // new geometry instead of leaving the card at its pre-resize cell
+  const [resizeEpoch, setResizeEpoch] = useState(0);
+  useEffect(() => {
+    if (!renderer) return;
+    const onResize = (): void => setResizeEpoch((epoch) => epoch + 1);
+    renderer.on("resize", onResize);
+    return () => void renderer.off("resize", onResize);
+  }, [renderer]);
   useEffect(() => {
     if (!popover) return;
     const blockRef = blockRefs.current.get(popover.displayIndex);
     const scrollbox = scrollRef.current;
     if (!blockRef || !scrollbox) return;
-    // only the toolbar (3 rows) + gap must fit above; the dropdown flows down
-    setPopoverFlipBelow(blockRef.renderable.y - scrollbox.y < 4);
-    // left-anchor to the start of the selection: gutter width + its column
-    const startColumn =
+    const renderedStart =
       activeSpan && activeSpan.displayIndex === popover.displayIndex
-        ? (renderedOffsetFor(blockRef.runs, activeSpan.start) ?? 0)
+        ? (renderedOffsetAtOrAfter(blockRef.runs, activeSpan.start) ?? 0)
         : 0;
-    setPopoverLeft(2 + startColumn);
-  }, [popover, activeSpan, display, cursor]);
+    const startPosition = positionOfRenderedOffset(blockRef.renderable, renderedStart);
+    const content = scrollbox.content;
+    const anchorLeft = startPosition.x - content.x;
+    const anchorTop = startPosition.y - content.y;
+    // clamp so the toolbar card never runs past the content's right edge
+    const maxLeft = Math.max(0, content.width - POPOVER_TOOLBAR_COLUMNS);
+    setPopoverLeft(Math.min(anchorLeft, maxLeft));
+    // only the toolbar (3 rows) + gap must fit above; the dropdown flows down
+    const lineViewportRow = startPosition.y - scrollbox.y;
+    setPopoverTop(anchorTop + (lineViewportRow < POPOVER_ROWS_ABOVE ? 1 : -POPOVER_ROWS_ABOVE));
+  }, [popover, activeSpan, display, cursor, resizeEpoch]);
 
   const registerBlock = (
     displayIndex: number,
@@ -235,13 +280,7 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
         <box
           key={displayIndex}
           id={`plan-block-${displayIndex}`}
-          // raise the block holding the popover so its overlay paints over the
-          // later blocks it floats across (siblings paint in z-index order)
-          style={{
-            flexDirection: "row",
-            marginTop: gap,
-            zIndex: popover?.displayIndex === displayIndex ? 10 : undefined,
-          }}
+          style={{ flexDirection: "row", marginTop: gap }}
         >
           <text selectable={false}>
             <span fg={isCursor ? tokens.accent : tokens.textDim}>{isCursor ? "▎ " : "  "}</span>
@@ -258,31 +297,22 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
             }
             onMouseUp={() => onLineActivate(displayIndex)}
           >
-            {runs.map((run, runIndex) => (
-              <span key={runIndex} {...runStyle(run, block, tokens)}>
-                {run.text}
-              </span>
-            ))}
+            {runs.map((run, runIndex) => {
+              const url = run.role === "link" ? safeLinkHref(run.href) : undefined;
+              return (
+                <span
+                  key={runIndex}
+                  {...runStyle(run, block, tokens)}
+                  {...(url ? { link: { url } } : {})}
+                >
+                  {run.text}
+                </span>
+              );
+            })}
             {showsChangeTag(block) ? (
               <span fg={tagColor(block, tokens)}> [{tagLabel(block)}]</span>
             ) : null}
           </text>
-          {popover && popover.displayIndex === displayIndex ? (
-            // float the card over the block, centered, with a one-row gap; flip
-            // below only when there is no room above (near the viewport top)
-            <box
-              style={{
-                position: "absolute",
-                left: popoverLeft,
-                // fixed offset: the toolbar sits one row above the selection and
-                // stays put; the dropdown flows down from it, over the selection
-                top: popoverFlipBelow ? 1 : -4,
-                flexDirection: "column",
-              }}
-            >
-              <MarkerPopover {...popover} theme={theme} />
-            </box>
-          ) : null}
         </box>,
       );
     }
@@ -298,9 +328,26 @@ export const PlanSheet = forwardRef<PlanSheetHandle, PlanSheetProps>(function Pl
       );
     }
   }
+  if (popover) {
+    // last child on purpose: later siblings paint on top, so the floating card
+    // covers every block it overlaps regardless of scroll position
+    children.push(
+      <box
+        key="marker-popover"
+        style={{
+          position: "absolute",
+          left: popoverLeft,
+          top: popoverTop,
+          flexDirection: "column",
+        }}
+      >
+        <MarkerPopover {...popover} theme={theme} />
+      </box>,
+    );
+  }
 
   return (
-    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+    <box style={{ flexGrow: 1, flexDirection: "column" }} onMouseUp={onSelectionRelease}>
       <box
         style={{
           flexGrow: 1,
@@ -366,15 +413,25 @@ function runStyle(
 ): { fg?: string; bg?: string; attributes?: number } {
   // a cut block reads as removed: every run struck through and grayed, never red
   if (block.type === "del") return { fg: tokens.textDim, attributes: CUT_ATTRIBUTES };
+  const isHeading = block.kind === "h1" || block.kind === "h2" || block.kind === "h3";
+  const isQuote = block.kind === "quote";
+  // headings are all bold; level reads from descending brightness alone (a
+  // terminal cannot scale font size), leaving the salmon accent to annotations
   const headingFg =
     block.kind === "h1"
       ? tokens.text
-      : block.kind === "h2" || block.kind === "h3"
-        ? tokens.accent
-        : undefined;
+      : block.kind === "h2"
+        ? tokens.textMuted
+        : block.kind === "h3"
+          ? tokens.textDim
+          : undefined;
+  // block-level base: headings bold, quotes muted italic; inline roles compose on top
+  const baseFg = headingFg ?? (isQuote ? tokens.textMuted : tokens.text);
+  const baseAttributes = (isHeading ? HEADING_ATTRIBUTES : 0) | (isQuote ? QUOTE_ATTRIBUTES : 0);
+  const withBase = (roleAttributes: number): number => baseAttributes | roleAttributes;
   switch (run.role) {
     case "ins":
-      return { fg: tokens.insertedForeground };
+      return { fg: tokens.insertedForeground, attributes: baseAttributes || undefined };
     case "del":
       return { fg: tokens.deletedForeground };
     case "mark-comment":
@@ -383,7 +440,17 @@ function runStyle(
       return { fg: tokens.accentInk, bg: tokens.accent };
     case "kspan":
       return { fg: tokens.accentInk, bg: tokens.accent };
+    case "strong":
+      return { fg: baseFg, attributes: withBase(STRONG_ATTRIBUTES) };
+    case "em":
+      return { fg: baseFg, attributes: withBase(EM_ATTRIBUTES) };
+    case "code":
+      return { fg: tokens.text, bg: tokens.elevated };
+    case "strike":
+      return { fg: tokens.textMuted, attributes: withBase(STRIKE_ATTRIBUTES) };
+    case "link":
+      return { fg: tokens.blue, attributes: withBase(LINK_ATTRIBUTES) };
     default:
-      return { fg: headingFg ?? tokens.text };
+      return { fg: baseFg, attributes: baseAttributes || undefined };
   }
 }

package/src/components/ReviewRail.stories.tsx

@@ -177,8 +177,6 @@ export const SubmitConfirmOpen: Story = {
         submitConfirm={{
           verdict: "request_changes",
           summary: "",
-          annotationCount: 2,
-          blockingCount: 0,
           onInput: () => {},
           onSelectVerdict: () => {},
           onSubmit: () => {},

package/src/components/ReviewRail.tsx

@@ -75,11 +75,6 @@ export interface ReviewRailProps {
   theme?: Theme;
 }
 
-/** Forward-compatible: open annotation kinds may carry a blocking flag. */
-export function annotationBlocking(annotation: Annotation): boolean {
-  return (annotation as Annotation & { blocking?: boolean }).blocking === true;
-}
-
 export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function ReviewRail(
   {
     session,
@@ -133,13 +128,13 @@ export const ReviewRail = forwardRef<ReviewRailHandle, ReviewRailProps>(function
         body: annotation.body,
         isSelected: annotation.id === selectedId,
         isOrphan: resolvedIds !== null && !resolvedIds.has(annotation.id),
-        isBlocking: annotationBlocking(annotation),
         // border-title author: a collaborator's name, "agent" for agent notes, else "me"
         author: annotation.author
           ? resolveDisplayName(annotation.author, session.participants, authorNames)
           : isAgentNote(annotation)
             ? "agent"
             : "me",
+        tone: tokens.blue,
         editing:
           cardEdit && cardEdit.id === annotation.id
             ? {
@@ -293,7 +288,7 @@ function RemovalCard({
       <Card
         title={title}
         contentRows={contentRows}
-        borderColor={isSelected ? tokens.red : tokens.border}
+        borderColor={tokens.red}
         backgroundColor="transparent"
         theme={theme}
       >

package/src/components/__snapshots__/stories.test.tsx.snap

@@ -84,8 +84,8 @@ exports[`stories catalog AnnotationCard/SavedEditing renders, snapshots, and car
 "
 `;
 
-exports[`stories catalog AnnotationCard/SavedOrphanBlocking renders, snapshots, and carries its colors: AnnotationCard/SavedOrphanBlocking 1`] = `
-"╭─ COMMENT · me · BLOCKING · ORPHANED ─────────────────────────────────────────╮
+exports[`stories catalog AnnotationCard/SavedOrphan renders, snapshots, and carries its colors: AnnotationCard/SavedOrphan 1`] = `
+"╭─ COMMENT · me · ORPHANED ────────────────────────────────────────────────────╮
 │ "a removed passage"                                                          │
 │ The passage is gone.                                                         │
 ╰──────────────────────────────────────────────────────────────────────────────╯
@@ -338,8 +338,6 @@ exports[`stories catalog CompletionOverlay/FeedbackCounting renders, snapshots,
 
 exports[`stories catalog ConfirmCard/ApproveDefault renders, snapshots, and carries its colors: ConfirmCard/ApproveDefault 1`] = `
 "╭─ submit review ─────────────────────╮ 
-│ 0 annotations · 0 blocking          │ 
-│                                     │ 
 │  Comment  [Approve]  Changes        │ 
 │                                     │ 
 │ summary for the agent (optional)    │ 
@@ -351,13 +349,13 @@ exports[`stories catalog ConfirmCard/ApproveDefault renders, snapshots, and carr
                                         
                                         
                                         
+                                        
+                                        
 "
 `;
 
 exports[`stories catalog ConfirmCard/RequestChanges renders, snapshots, and carries its colors: ConfirmCard/RequestChanges 1`] = `
 "╭─ submit review ─────────────────────╮ 
-│ 3 annotations · 1 blocking          │ 
-│                                     │ 
 │  Comment   Approve  [Changes]       │ 
 │                                     │ 
 │ Tighten the steps.                  │ 
@@ -369,12 +367,13 @@ exports[`stories catalog ConfirmCard/RequestChanges renders, snapshots, and carr
                                         
                                         
                                         
+                                        
+                                        
 "
 `;
 
 exports[`stories catalog ConfirmCard/WithViewedSummary renders, snapshots, and carries its colors: ConfirmCard/WithViewedSummary 1`] = `
 "╭─ submit review ─────────────────────╮ 
-│ 1 annotations · 0 blocking          │ 
 │ 2/3 files viewed                    │ 
 │                                     │ 
 │  Comment  [Approve]  Changes        │ 
@@ -387,6 +386,7 @@ exports[`stories catalog ConfirmCard/WithViewedSummary renders, snapshots, and c
                                         
                                         
                                         
+                                        
 "
 `;
 
@@ -1121,9 +1121,9 @@ exports[`stories catalog ReviewRail/SubmitConfirmOpen renders, snapshots, and ca
                                         
                                         
                                         
+                                        
+                                        
 ╭─ submit review ───────────────╮       
-│ 2 annotations · 0 blocking    │       
-│                               │       
 │  Comment   Approve  [Changes] │       
 │                               │       
 │ summary for the agent (optiona│       

package/src/components/agent-launcher.tsx

@@ -129,7 +129,7 @@ export function AgentLauncher({
             border: true,
             borderStyle: FRAME_BORDER_STYLE,
             backgroundColor: "transparent",
-            borderColor: tokens.border,
+            borderColor: tokens.text,
             paddingLeft: 1,
             paddingRight: 1,
           }}

package/src/theme.ts

@@ -57,8 +57,8 @@ export const DARK: Theme = {
   accent: "#f5a3a3",
   accentInk: "#2a1416",
   green: "#62d96b",
-  red: "#ff6b6b",
-  blue: "#84a6e8",
+  red: "#f08080",
+  blue: "#a9c8f5",
   cursorBackground: "#33262a",
   markCommentBackground: "#3d2a2e",
   insertedForeground: "#62d96b",

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", () => {