ompchamber 2.0.2 → 3.1.0

package/src/shared/lib/code/editor/reset-css.test.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor's reset stylesheet.
+ *
+ * The rule is what makes the editor work at all: the `<textarea>` must paint the
+ * caret and the selection while its glyphs stay invisible. A regression here is
+ * silent in review (it is a string) and immediately visible in the app, so it is
+ * asserted directly — the two selectors and the one deliberate exception.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { CODE_EDITOR_RESET_CSS } from '@/shared/lib/code/editor/reset-css';
+
+describe('CODE_EDITOR_RESET_CSS', () => {
+  test('hides the textarea’s own glyphs', () => {
+    expect(CODE_EDITOR_RESET_CSS).toContain('-webkit-text-fill-color: transparent');
+  });
+
+  test('keeps the placeholder visible, since no <pre> sits behind it', () => {
+    // Without this exception an empty editor's hint inherits the transparent
+    // fill and the field looks blank rather than empty.
+    expect(CODE_EDITOR_RESET_CSS).toContain('.code-editor-native-textarea::placeholder');
+    expect(CODE_EDITOR_RESET_CSS).toContain('var(--theme-ink)');
+  });
+
+  test('is scoped to the editor’s own class, not to every textarea', () => {
+    expect(CODE_EDITOR_RESET_CSS).not.toMatch(/^\s*textarea\s*\{/m);
+    expect(CODE_EDITOR_RESET_CSS).toContain('.code-editor-native-textarea {');
+  });
+});

package/src/shared/lib/code/editor/reset-css.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The stylesheet the editor's two layers depend on.
+ *
+ * `CODE_EDITOR_RESET_CSS` is a rule, not a component: the transparent
+ * `<textarea>` paints the caret and the selection while its glyphs must stay
+ * invisible (the highlighted `<pre>` underneath supplies them), and the
+ * placeholder is the one thing that must remain visible. Keeping the rule in a
+ * `.ts` module rather than beside a JSX `<style>` element means a test can
+ * assert it without a DOM — and there is nothing to render but this string.
+ */
+
+/**
+ * The reset rule, scoped to the textarea's own class.
+ *
+ * `::placeholder` is deliberately excluded: an empty editor's hint has no
+ * `<pre>` behind it, so it keeps the theme's ink and a readable opacity
+ * instead of inheriting the transparent fill.
+ */
+export const CODE_EDITOR_RESET_CSS = `
+.code-editor-native-textarea {
+  -webkit-text-fill-color: transparent;
+}
+.code-editor-native-textarea::placeholder {
+  -webkit-text-fill-color: var(--theme-ink);
+  opacity: 0.45;
+}
+`;

package/src/shared/lib/code/editor/text-commands.test.ts

@@ -0,0 +1,178 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The text-command dispatch.
+ *
+ * `runTextCommand` is the single entry point both the keyboard and the command
+ * palette go through, so what it asserts is the ROUTING: which commands it
+ * claims, which it leaves to the component (Escape, undo, Tab) and which it
+ * hands back to the panel. A command that returns `false` silently does nothing
+ * when a chord reaches it, which is why the membership table is asserted
+ * directly rather than only through the commands themselves.
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { isTextCommand, runTextCommand, type CommandContext } from '@/shared/lib/code/editor/text-commands';
+import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
+
+interface Harness {
+  ctx: CommandContext;
+  committed: Array<{ value: string; selectionStart: number; selectionEnd: number }>;
+  carets: number[];
+  selections: Array<[number, number]>;
+  edges: string[];
+}
+
+function harness(options: { value: string; start: number; end?: number; extend?: boolean; language?: string }): Harness {
+  const committed: Harness['committed'] = [];
+  const carets: number[] = [];
+  const selections: Array<[number, number]> = [];
+  const edges: string[] = [];
+  return {
+    committed,
+    carets,
+    selections,
+    edges,
+    ctx: {
+      value: options.value,
+      selectionStart: options.start,
+      selectionEnd: options.end ?? options.start,
+      extend: options.extend ?? false,
+      language: options.language ?? 'typescript',
+      commit: (edit) => committed.push(edit),
+      setCaret: (offset) => carets.push(offset),
+      selectRange: (start, end) => selections.push([start, end]),
+      setDocumentEdge: (edge) => edges.push(edge),
+    },
+  };
+}
+
+describe('isTextCommand', () => {
+  test('claims the line and caret commands', () => {
+    for (const command of ['moveLineUp', 'copyLineDown', 'deleteLine', 'toggleComment', 'indent', 'lineStart'] as const) {
+      expect(isTextCommand(command)).toBe(true);
+    }
+  });
+
+  test('leaves the DOM-owned and panel-owned commands alone', () => {
+    // Undo/redo step the history, Escape is about focus, and the find-bar chords
+    // belong to the panel — none of them is buffer arithmetic.
+    for (const command of ['undo', 'redo', 'escape', 'find', 'selectNextOccurrence', 'toggleWordWrap'] as const) {
+      expect(isTextCommand(command)).toBe(false);
+    }
+  });
+});
+
+describe('runTextCommand', () => {
+  test('reports an unowned command rather than pretending to run it', () => {
+    const h = harness({ value: 'one', start: 0 });
+    expect(runTextCommand('find', h.ctx)).toBe(false);
+    expect(h.committed).toEqual([]);
+  });
+
+  test('moves a line through the commit path, not by writing the field', () => {
+    const h = harness({ value: 'one\ntwo', start: 4, end: 7 });
+    expect(runTextCommand('moveLineUp', h.ctx)).toBe(true);
+
+    expect(h.committed[0].value).toBe('two\none');
+  });
+
+  test('indents the caret’s whole line, not the text at the caret', () => {
+    // ⌘] is a line command: on a bare caret it widens to that line first, which
+    // is what keeps it from inserting spaces mid-line.
+    const h = harness({ value: 'const a = 1;', start: 10 });
+    runTextCommand('indent', h.ctx);
+
+    expect(h.committed[0].value).toBe('  const a = 1;');
+  });
+
+  test('indents every line of a selection', () => {
+    const h = harness({ value: 'one\ntwo', start: 0, end: 7 });
+    runTextCommand('indent', h.ctx);
+
+    expect(h.committed[0].value).toBe('  one\n  two');
+  });
+
+  test('outdenting a line that has no indent commits nothing', () => {
+    const h = harness({ value: 'one', start: 1 });
+    runTextCommand('outdent', h.ctx);
+
+    expect(h.committed).toEqual([]);
+  });
+
+  test('comments with the language’s own token', () => {
+    const h = harness({ value: 'key: value', start: 0, language: 'yaml' });
+    runTextCommand('toggleComment', h.ctx);
+
+    expect(h.committed[0].value).toBe('# key: value');
+  });
+
+  test('caret moves collapse the selection', () => {
+    const h = harness({ value: 'one\ntwo', start: 5 });
+    runTextCommand('lineStart', h.ctx);
+
+    expect(h.carets).toEqual([4]);
+    expect(h.selections).toEqual([]);
+  });
+
+  test('shifted caret moves extend instead', () => {
+    const h = harness({ value: 'one\ntwo', start: 5, extend: true });
+    runTextCommand('lineEnd', h.ctx);
+
+    expect(h.selections).toEqual([[5, 7]]);
+    expect(h.carets).toEqual([]);
+  });
+
+  test('file edges go through the document-edge path', () => {
+    const h = harness({ value: 'one\ntwo', start: 5 });
+    runTextCommand('documentStart', h.ctx);
+    runTextCommand('documentEnd', h.ctx);
+
+    expect(h.edges).toEqual(['start', 'end']);
+  });
+
+  test('a shifted document move selects instead of jumping', () => {
+    const h = harness({ value: 'one\ntwo', start: 5, extend: true });
+    runTextCommand('documentStart', h.ctx);
+
+    expect(h.selections).toEqual([[0, 5]]);
+    expect(h.edges).toEqual([]);
+  });
+
+  test('the palette reaches the same commands with no event at all', () => {
+    // This is the path the command palette uses; a command reachable by chord
+    // must be reachable this way too.
+    const h = harness({ value: 'one\ntwo', start: 0, end: 3 });
+    runTextCommand('copyLineDown', h.ctx);
+
+    expect(h.committed[0].value).toBe('one\none\ntwo');
+  });
+});
+
+describe('command coverage', () => {
+  test('every text command is one the editor keymap can produce', () => {
+    // A command in the table that no key or palette entry names would be dead
+    // code; this is the check that keeps the table honest.
+    const reachable: EditorCommand[] = [
+      'moveLineUp',
+      'moveLineDown',
+      'copyLineUp',
+      'copyLineDown',
+      'deleteLine',
+      'toggleComment',
+      'insertLineAbove',
+      'insertLineBelow',
+      'indent',
+      'outdent',
+      'lineStart',
+      'lineEnd',
+      'documentStart',
+      'documentEnd',
+    ];
+    for (const command of reachable) expect(isTextCommand(command)).toBe(true);
+  });
+});

package/src/shared/lib/code/editor/text-commands.ts

@@ -0,0 +1,154 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor's text commands, as a dispatch table.
+ *
+ * Extracted from the component because it is dispatch rather than rendering,
+ * and because it keeps the component under the repository's line ceiling. The
+ * component still owns the keys whose behaviour is about the DOM node rather
+ * than the buffer — Escape, Tab, Backspace, Enter, undo/redo — and calls in
+ * here for everything that is pure string arithmetic.
+ */
+
+import {
+  commentSyntaxFor,
+  deleteLines,
+  duplicateLines,
+  insertLine,
+  lineEdges,
+  moveLines,
+  toggleLineComment,
+  type TextRange,
+} from '@/shared/lib/code/editor/commands';
+import { editForTab } from '@/shared/lib/code/editor/edits';
+import { lineRangeAt } from '@/shared/lib/code/editor/lines';
+import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
+
+/** A whole-buffer edit plus where the caret lands. */
+export interface CommittedEdit {
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+}
+
+export interface CommandContext {
+  /** Current buffer and selection, read from the live textarea. */
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+  /** True while the event carried Shift (⌘↑ with Shift extends instead of moving). */
+  extend: boolean;
+  /** Shiki language id, which picks the comment syntax. */
+  language: string;
+  /** Commit a whole-buffer edit as ONE undoable step. */
+  commit: (edit: CommittedEdit) => void;
+  /** Move the caret, collapsing any selection. */
+  setCaret: (offset: number) => void;
+  /** Move the caret while keeping the selection's other end anchored. */
+  selectRange: (start: number, end: number) => void;
+  /** Jump to the buffer's first or last offset. */
+  setDocumentEdge: (edge: 'start' | 'end') => void;
+}
+
+/**
+ * Commands that edit or move within the buffer. Everything else (the find bar's
+ * chords, word wrap, save) belongs to the panel and is delegated by the caller.
+ */
+const TEXT_COMMANDS: Record<string, true> = {
+  moveLineUp: true,
+  moveLineDown: true,
+  copyLineUp: true,
+  copyLineDown: true,
+  deleteLine: true,
+  toggleComment: true,
+  insertLineAbove: true,
+  insertLineBelow: true,
+  indent: true,
+  outdent: true,
+  lineStart: true,
+  lineEnd: true,
+  documentStart: true,
+  documentEnd: true,
+};
+
+export function isTextCommand(command: EditorCommand): boolean {
+  return TEXT_COMMANDS[command] === true;
+}
+
+/**
+ * Run one text command. Returns true when the key was consumed.
+ *
+ * The buffer-changing branches all commit through `ctx.commit`, which is the
+ * component's single write path: one undo entry per command, and the highlight
+ * layer follows because the commit goes through the controlled value.
+ */
+export function runTextCommand(command: EditorCommand, ctx: CommandContext): boolean {
+  const selection: TextRange = { start: ctx.selectionStart, end: ctx.selectionEnd };
+
+  switch (command) {
+    case 'moveLineUp':
+      ctx.commit(moveLines(ctx.value, selection, -1));
+      return true;
+    case 'moveLineDown':
+      ctx.commit(moveLines(ctx.value, selection, 1));
+      return true;
+    case 'copyLineUp':
+      ctx.commit(duplicateLines(ctx.value, selection, -1));
+      return true;
+    case 'copyLineDown':
+      ctx.commit(duplicateLines(ctx.value, selection, 1));
+      return true;
+    case 'deleteLine':
+      ctx.commit(deleteLines(ctx.value, selection));
+      return true;
+    case 'toggleComment':
+      ctx.commit(toggleLineComment(ctx.value, selection, commentSyntaxFor(ctx.language)));
+      return true;
+    case 'insertLineAbove':
+      ctx.commit(insertLine(ctx.value, ctx.selectionStart, 'above'));
+      return true;
+    case 'insertLineBelow':
+      ctx.commit(insertLine(ctx.value, ctx.selectionStart, 'below'));
+      return true;
+
+    case 'indent':
+    case 'outdent': {
+      // ⌘] / ⌘[ act on the LINES the selection touches — on a bare caret that
+      // is the caret's own line, which is why the range is widened first. Tab
+      // itself still indents at the caret (that is what Tab means in an
+      // editor), but a line command that shifted text mid-line would not be
+      // indenting anything.
+      const range = ctx.selectionStart === ctx.selectionEnd ? lineRangeAt(ctx.value, ctx.selectionStart) : selection;
+      const edit = editForTab(ctx.value, range.start, range.end, command === 'outdent');
+      if (edit.value !== ctx.value) ctx.commit(edit);
+      return true;
+    }
+
+    case 'lineStart': {
+      const edges = lineEdges(ctx.value, ctx.selectionStart);
+      if (ctx.extend) ctx.selectRange(edges.start, ctx.selectionEnd);
+      else ctx.setCaret(edges.start);
+      return true;
+    }
+    case 'lineEnd': {
+      const edges = lineEdges(ctx.value, ctx.selectionStart);
+      if (ctx.extend) ctx.selectRange(ctx.selectionStart, edges.end);
+      else ctx.setCaret(edges.end);
+      return true;
+    }
+    case 'documentStart':
+      if (ctx.extend) ctx.selectRange(0, ctx.selectionEnd);
+      else ctx.setDocumentEdge('start');
+      return true;
+    case 'documentEnd':
+      if (ctx.extend) ctx.selectRange(ctx.selectionStart, ctx.value.length);
+      else ctx.setDocumentEdge('end');
+      return true;
+
+    default:
+      return false;
+  }
+}

package/src/shared/lib/code/syntax-highlight.test.ts

@@ -6,6 +6,7 @@
 import { beforeAll, describe, expect, test } from 'bun:test';
 
 import { bootSyntax, onLanguageReady, requestLanguage } from '@/shared/lib/code/highlighter';
+import { findMatches } from '@/shared/lib/code/editor/find';
 import { getLanguageFromPath, highlightCode, highlightLines } from '@/shared/lib/code/syntax-highlight';
 import { highlightCodeWindow } from '@/shared/lib/code/windowed-highlight';
 
@@ -161,6 +162,80 @@ describe('highlightCodeWindow', () => {
   });
 });
 
+describe('find marks', () => {
+  const code = 'const alpha = 1;\nconst beta = alpha + 2;\n';
+  const PLAIN = { matchCase: false, wholeWord: false, isRegex: false };
+  /** The text of every mark, in order. A match spanning tokens is several
+   *  fragments, so the assertion is on the fragments JOINED. */
+  const marked = (html: string): string[] =>
+    Array.from(html.matchAll(/<mark class="find-match"[^>]*>(.*?)<\/mark>/g), (match) => match[1]);
+
+  test('splits a match across the tokens it spans, and marks every fragment current', () => {
+    // `const alpha` is three tokens (`const`, ` `, `alpha`): each carries its
+    // own fragment of the one match, which is why the CSS may not draw a
+    // vertical edge per fragment.
+    const line = highlightLines(code, 'typescript', { marks: [{ start: 0, end: 11 }], currentMark: 0 })[0];
+
+    expect(marked(line).join('')).toBe('const alpha');
+    expect(line.match(/data-find-current/g)?.length).toBe(3);
+    expect(line.match(/<\/mark>/g)?.length).toBe(3);
+  });
+
+  test('marks every occurrence, and only the current one as current', () => {
+    const marks = findMatches(code, 'alpha', PLAIN).matches;
+    const lines = highlightLines(code, 'typescript', { marks, currentMark: 1 });
+
+    expect(marked(lines[0]).join('')).toBe('alpha');
+    expect(marked(lines[1]).join('')).toBe('alpha');
+    expect(lines[0]).not.toContain('data-find-current');
+    expect(lines[1]).toContain('data-find-current');
+  });
+
+  test('escapes the matched text it wraps', () => {
+    const line = highlightLines('a < b', 'text', { marks: [{ start: 2, end: 3 }], currentMark: 0 })[0];
+
+    expect(line).toContain('<mark class="find-match" data-find-current="">&lt;</mark>');
+  });
+
+  test('leaves the markup untouched when there are no marks', () => {
+    const plain = highlightLines(code, 'typescript')[0];
+    const empty = highlightLines(code, 'typescript', { marks: [], currentMark: -1 })[0];
+
+    expect(empty).toBe(plain);
+    expect(plain).not.toContain('<mark');
+  });
+
+  test('keeps a windowed match on its own line, re-based to the slice', () => {
+    const marks = findMatches(code, 'alpha', PLAIN).matches;
+    // The window renders line 1 only. The match on line 0 must not reappear on
+    // line 1's text, and the current index (line 0's match) must not mark
+    // anything here.
+    const window = highlightCodeWindow(code, 'typescript', { start: 1, end: 2 }, { marks, currentMark: 0 });
+
+    expect(marked(window).join('')).toBe('alpha');
+    expect(window).not.toContain('data-find-current');
+  });
+
+  test('re-bases the current index onto the marks inside the window', () => {
+    const marks = findMatches(code, 'alpha', PLAIN).matches;
+    const window = highlightCodeWindow(code, 'typescript', { start: 1, end: 2 }, { marks, currentMark: 1 });
+
+    expect(window.match(/data-find-current/g)?.length).toBe(1);
+    expect(marked(window).join('')).toBe('alpha');
+  });
+
+  test('a mark reaching past the window is clipped to it', () => {
+    // The last line has no trailing newline, so a mark that runs to the end of
+    // the slice would be clamped by the rebase.
+    const window = highlightCodeWindow(code, 'typescript', { start: 1, end: 3 }, {
+      marks: [{ start: 30, end: 999 }],
+      currentMark: 0,
+    });
+
+    expect(marked(window).join('')).toBe('alpha + 2;');
+  });
+});
+
 describe('getLanguageFromPath', () => {
   test.each([
     ['a.ts', 'typescript'],

package/src/shared/lib/code/syntax-highlight.ts

@@ -1,8 +1,12 @@
 import type { HighlighterCore } from 'shiki/core';
 
 import { escapeCode, getHighlighterSync, requestLanguage } from '@/shared/lib/code/highlighter';
+import { tokenMarkup, type HighlightLinesOptions } from '@/shared/lib/code/editor/marks';
+import { lineStartOffset } from '@/shared/lib/code/editor/lines';
 import { SHIKI_THEMES } from '@/shared/lib/code/shiki-themes';
 
+export type { HighlightLinesOptions };
+
 /** Map file extension to Shiki language id */
 export function getLanguageFromPath(filePath?: string): string {
   if (!filePath) return 'javascript';
@@ -139,8 +143,13 @@ function resolveReadyLang(hl: HighlighterCore, language: string): string {
 }
 
 /** Syntax highlight code string safely with fallback */
-export function highlightCode(code: string, language = 'javascript'): string {
+export function highlightCode(code: string, language = 'javascript', options: HighlightLinesOptions = {}): string {
   if (!code) return '';
+  // A find in progress needs the match markup, which only the line-based path
+  // emits; without it the fast `codeToHtml` path is left exactly as it was.
+  if (options.marks && options.marks.length > 0) {
+    return `<span class="shiki">${highlightLines(code, language, options).join('\n')}</span>`;
+  }
   const hl = getHighlighterSync();
   if (!hl) return escapeCode(code);
   const lang = resolveReadyLang(hl, language);
@@ -268,14 +277,6 @@ export function highlightJson(code: string): string {
   return highlightCode(code, 'json');
 }
 
-export interface HighlightLinesOptions {
-  /**
-   * Lines at or above this length are emitted as plain text instead of being
-   * tokenized — the guard a minified bundle (one line of hundreds of KB) needs.
-   */
-  maxLineLength?: number;
-}
-
 /**
  * Highlight code and return one HTML fragment per line, aligned 1:1 with
  * `code.split('\n')`. Tokenizes the whole input at once so multi-line grammar
@@ -287,9 +288,18 @@ export function highlightLines(
   options: HighlightLinesOptions = {},
 ): string[] {
   const rawLines = code.split('\n');
+  const marks = options.marks;
+  const currentMark = options.currentMark ?? -1;
+  const occurrenceFrom = options.occurrenceFrom ?? -1;
+  // A grammar that has not arrived yet, or a highlighter that failed to boot,
+  // still gets the find marks: the widget's feedback must not depend on Shiki.
+  const plain = (lineIndex: number): string => {
+    if (!marks || marks.length === 0) return escapeCode(rawLines[lineIndex]);
+    return tokenMarkup(rawLines[lineIndex], lineStartOffset(code, lineIndex), marks, currentMark, occurrenceFrom);
+  };
   if (!code) return rawLines;
   const hl = getHighlighterSync();
-  if (!hl) return rawLines.map(escapeCode);
+  if (!hl) return rawLines.map((_line, index) => plain(index));
   const lang = resolveReadyLang(hl, language);
   try {
     const { tokens } = hl.codeToTokens(code, {
@@ -298,20 +308,22 @@ export function highlightLines(
       defaultColor: false,
       tokenizeMaxLineLength: options.maxLineLength ?? 0,
     });
-    if (tokens.length !== rawLines.length) return rawLines.map(escapeCode);
-    return tokens.map((lineTokens) =>
-      lineTokens
+    if (tokens.length !== rawLines.length) return rawLines.map((_line, index) => plain(index));
+    return tokens.map((lineTokens, lineIndex) => {
+      let offset = lineStartOffset(code, lineIndex);
+      return lineTokens
         .map((tok) => {
-          const content = escapeCode(tok.content);
+          const content = tokenMarkup(tok.content, offset, marks, currentMark, occurrenceFrom);
+          offset += tok.content.length;
           if (!tok.htmlStyle) return content;
           const style = Object.entries(tok.htmlStyle)
             .map(([key, value]) => `${key}:${value}`)
             .join(';');
           return style ? `<span style="${style}">${content}</span>` : content;
         })
-        .join('')
-    );
+        .join('');
+    });
   } catch {
-    return rawLines.map(escapeCode);
+    return rawLines.map((_line, index) => plain(index));
   }
 }

package/src/shared/lib/code/windowed-highlight.ts

@@ -4,6 +4,8 @@
  */
 
 import type { LineWindow } from '@/shared/lib/code/lazy-window';
+import type { FindMatch } from '@/shared/lib/code/editor/find';
+import { lineStartOffset } from '@/shared/lib/code/editor/lines';
 import { highlightLines } from '@/shared/lib/code/syntax-highlight';
 
 /**
@@ -28,6 +30,15 @@ export interface HighlightCodeWindowOptions {
   contextLines?: number;
   /** Length at which a line falls back to plain text. */
   maxLineLength?: number;
+  /**
+   * Find matches in DOCUMENT offsets. Only those inside the rendered window are
+   * passed on, re-based to the sliced source the tokenizer sees.
+   */
+  marks?: readonly FindMatch[];
+  /** Index of the current match within `marks`. */
+  currentMark?: number;
+  /** Marks from this index on are extra ⌘D selections rather than find matches. */
+  occurrenceFrom?: number;
 }
 
 /**
@@ -57,7 +68,47 @@ export function highlightCodeWindow(
   if (start === end) return '';
 
   const contextStart = Math.max(0, start - contextLines);
-  const rows = highlightLines(lines.slice(contextStart, end).join('\n'), language, { maxLineLength });
+  const slice = lines.slice(contextStart, end).join('\n');
+  const base = lineStartOffset(code, contextStart);
+  const sliceEnd = base + slice.length;
+  const { marks, currentMark, occurrenceFrom } = rebaseMarks(
+    options.marks,
+    options.currentMark ?? -1,
+    options.occurrenceFrom ?? -1,
+    base,
+    sliceEnd,
+  );
+  const rows = highlightLines(slice, language, { maxLineLength, marks, currentMark, occurrenceFrom });
   const offset = start - contextStart;
   return `<span class="shiki">${rows.slice(offset, offset + (end - start)).join('\n')}</span>`;
 }
+
+/**
+ * The marks inside `[base, sliceEnd)`, shifted to slice coordinates, with the
+ * current-match index remapped — the index points into the full list, so the
+ * rows below the window cannot simply reuse it.
+ */
+function rebaseMarks(
+  marks: readonly FindMatch[] | undefined,
+  currentMark: number,
+  occurrenceFrom: number,
+  base: number,
+  sliceEnd: number,
+): { marks: FindMatch[]; currentMark: number; occurrenceFrom: number } {
+  if (!marks || marks.length === 0) return { marks: [], currentMark: -1, occurrenceFrom: -1 };
+  const kept: FindMatch[] = [];
+  let remapped = -1;
+  let remappedOccurrenceFrom = -1;
+  for (let index = 0; index < marks.length; index++) {
+    const mark = marks[index];
+    if (mark.end <= base) continue;
+    if (mark.start >= sliceEnd) break;
+    if (index === currentMark) remapped = kept.length;
+    // The first surviving occurrence keeps the split, wherever it landed: a
+    // window whose opening lines held only matches still has to paint the
+    // selections below them differently.
+    if (remappedOccurrenceFrom === -1 && occurrenceFrom >= 0 && index >= occurrenceFrom) remappedOccurrenceFrom = kept.length;
+    kept.push({ start: mark.start - base, end: Math.min(mark.end, sliceEnd) - base });
+  }
+  return { marks: kept, currentMark: remapped, occurrenceFrom: remappedOccurrenceFrom };
+}