react-diff-viewer-continued 4.2.2 → 4.4.0

package/.github/workflows/pages.yml

@@ -0,0 +1,36 @@
+name: Deploy GitHub Pages
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Configure git
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+
+      - name: Deploy examples to GitHub Pages
+        run: pnpm publish:examples
+        env:
+          GITHUB_REPO_URL: https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git

package/.github/workflows/publish.yml

@@ -33,16 +33,8 @@ jobs:
       - run: pnpm install
       - run: pnpm build
 
-      # Upgrade npm for provenance support (GitHub runners ship with old npm)
-      - run: npm install -g npm@latest
-
-      - name: Publish to npm
-        run: pnpm publish --access public --provenance --no-git-checks
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      # Create GitHub release with changelog notes
-      - name: Create GitHub release
+      - name: Publish and create GitHub release
         run: pnpm just-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## 4.4.0 (2026-07-14)
+
+### Features
+
+- first-party syntax highlighting via highlightLanguage
+
+### Bug Fixes
+
+- build declarations against the React 18 peer floor
+
+### Tests
+
+- add regression repros for reported issues
+
+## 4.3.0 (2026-07-10)
+
+### Features
+
+- export default light and dark theme variables
+
+### Bug Fixes
+
+- do not do extra publish step, just release publishes
+- make exports immutable
+- freeze dark theme variables and add export-existence tests
+- add GitHub Pages deployment workflow and Vite base path
+- isolate diff table from host table CSS (daisyui/bootstrap)
+- bump js-yaml to ^4.2.0 (CVE-2026-53550)
+- clear remaining audit advisories in dev toolchain
+
+### Documentation
+
+- add overscan, disableWorker, and loading overlay to README
+
+### Chores
+
+- make pnpm canonical (drop npm lockfile, approve builds)
+
 ## 4.2.2 (2026-04-23)
 
 ### Bug Fixes

package/README.md

@@ -92,8 +92,9 @@ class Diff extends PureComponent {
 | linesOffset               | `number`                  | `0`                            | Number to start count code lines from.                                                                                                                                                                                                                                                                                                                                                                           |
 | summary                   | `string \| ReactElement`  | `undefined`                    | Text or element to display in the summary bar (e.g., filename).                                                                                                                                                                                                                                                                                                                                                  |
 | hideSummary               | `boolean`                 | `false`                        | Hide the summary bar (expand/collapse button, change count, summary text).                                                                                                                                                                                                                                                                                                                                       |
-| infiniteLoading           | `{ pageSize: number, containerHeight: string }` | `undefined`        | Enable virtualization for large diffs. When enabled, only visible rows are rendered. `containerHeight` sets the scrollable container height (e.g., `'500px'` or `'80vh'`).                                                                                                                                                                                                                                       |
-| loadingElement            | `() => ReactElement`      | `undefined`                    | Function that returns an element to display while the diff is being computed. Useful with `infiniteLoading` for large files.                                                                                                                                                                                                                                                                                     |
+| infiniteLoading           | `{ pageSize: number, containerHeight: string, overscan?: number }` | `undefined`        | Enable virtualization for large diffs. When enabled, only visible rows are rendered. `containerHeight` sets the scrollable container height (e.g., `'500px'` or `'80vh'`). `overscan` controls how many extra rows to render above and below the viewport (default `20`).                                                                                                                                         |
+| loadingElement            | `() => ReactElement`      | `undefined`                    | Function that returns an element to display while the diff is being computed or when content is hidden during fast scrolling. Useful with `infiniteLoading` for large files.                                                                                                                                                                                                                                      |
+| disableWorker             | `boolean`                 | `false`                        | Disable the Web Worker used for diff computation, falling back to synchronous computation on the main thread. Useful when the worker bundle fails to load in certain bundler configurations.                                                                                                                                                                                                                     |
 | nonce                     | `string`                  | `''`                           | Nonce to use for inline styles (for CSP).                                                                                                                                                                                                                                                                                                                                                                        |
 
 ## Instance Methods
@@ -114,7 +115,8 @@ Enable virtualization to only render visible rows:
   newValue={largeNewFile}
   infiniteLoading={{
     pageSize: 20,
-    containerHeight: '80vh'
+    containerHeight: '80vh',
+    overscan: 20,
   }}
   loadingElement={() => (
     <div style={{ padding: '20px', textAlign: 'center' }}>

package/lib/cjs/src/expand.d.ts

@@ -1 +1 @@
-export declare function Expand(): import("react/jsx-runtime").JSX.Element;
+export declare function Expand(): import("react").JSX.Element;

package/lib/cjs/src/fold.d.ts

@@ -1 +1 @@
-export declare function Fold(): import("react/jsx-runtime").JSX.Element;
+export declare function Fold(): import("react").JSX.Element;

package/lib/cjs/src/highlight-theme.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Syntax-highlighting colour themes for the first-party `highlightLanguage`
+ * feature. Colours are applied inline (`style={{ color }}`) on token spans, so
+ * they never collide with host-page CSS and require no stylesheet import —
+ * matching the way the rest of the diff viewer pins its own presentation.
+ *
+ * Keys are Prism token types (the class Prism emits after the leading `token`,
+ * e.g. `keyword`, `attr-name`). The special `default` key colours text that
+ * carries no token type. Unknown token types fall back to `default`.
+ */
+export type HighlightTheme = Record<string, string>;
+/**
+ * Light palette, harmonised with the GitHub-light diff theme used by
+ * `defaultLightThemeVariables` in `styles.ts`.
+ */
+export declare const defaultLightHighlightTheme: HighlightTheme;
+/**
+ * Dark palette, tuned to the Dracula-family colours the diff viewer's dark
+ * theme already leans on (and what consumers previously paired with
+ * `useDarkTheme`).
+ */
+export declare const defaultDarkHighlightTheme: HighlightTheme;
+/**
+ * Resolve the colour for a token whose Prism class list is `classNames`
+ * (e.g. `["token", "attr-value"]` or `["token", "punctuation", "attr-equals"]`).
+ * Picks the most specific class present in the theme, walking from the most
+ * specific class back toward the generic ones; falls back to `default`.
+ */
+export declare const resolveTokenColor: (theme: HighlightTheme, classNames: readonly string[]) => string;

package/lib/cjs/src/highlight-theme.js

@@ -0,0 +1,99 @@
+/**
+ * Syntax-highlighting colour themes for the first-party `highlightLanguage`
+ * feature. Colours are applied inline (`style={{ color }}`) on token spans, so
+ * they never collide with host-page CSS and require no stylesheet import —
+ * matching the way the rest of the diff viewer pins its own presentation.
+ *
+ * Keys are Prism token types (the class Prism emits after the leading `token`,
+ * e.g. `keyword`, `attr-name`). The special `default` key colours text that
+ * carries no token type. Unknown token types fall back to `default`.
+ */
+/**
+ * Light palette, harmonised with the GitHub-light diff theme used by
+ * `defaultLightThemeVariables` in `styles.ts`.
+ */
+export const defaultLightHighlightTheme = {
+    default: "#24292e",
+    comment: "#6a737d",
+    prolog: "#6a737d",
+    doctype: "#6a737d",
+    cdata: "#6a737d",
+    punctuation: "#24292e",
+    property: "#005cc5",
+    tag: "#22863a",
+    boolean: "#005cc5",
+    number: "#005cc5",
+    constant: "#005cc5",
+    symbol: "#005cc5",
+    deleted: "#b31d28",
+    selector: "#6f42c1",
+    "attr-name": "#6f42c1",
+    string: "#032f62",
+    char: "#032f62",
+    builtin: "#005cc5",
+    inserted: "#22863a",
+    operator: "#d73a49",
+    entity: "#22863a",
+    url: "#032f62",
+    "attr-value": "#032f62",
+    keyword: "#d73a49",
+    atrule: "#d73a49",
+    "class-name": "#6f42c1",
+    function: "#6f42c1",
+    regex: "#032f62",
+    important: "#e36209",
+    variable: "#e36209",
+};
+/**
+ * Dark palette, tuned to the Dracula-family colours the diff viewer's dark
+ * theme already leans on (and what consumers previously paired with
+ * `useDarkTheme`).
+ */
+export const defaultDarkHighlightTheme = {
+    default: "#f8f8f2",
+    comment: "#6272a4",
+    prolog: "#6272a4",
+    doctype: "#6272a4",
+    cdata: "#6272a4",
+    punctuation: "#f8f8f2",
+    property: "#8be9fd",
+    tag: "#ff79c6",
+    boolean: "#bd93f9",
+    number: "#bd93f9",
+    constant: "#bd93f9",
+    symbol: "#bd93f9",
+    deleted: "#ff5555",
+    selector: "#50fa7b",
+    "attr-name": "#50fa7b",
+    string: "#f1fa8c",
+    char: "#f1fa8c",
+    builtin: "#8be9fd",
+    inserted: "#50fa7b",
+    operator: "#f8f8f2",
+    entity: "#ff79c6",
+    url: "#f1fa8c",
+    "attr-value": "#f1fa8c",
+    keyword: "#ff79c6",
+    atrule: "#ff79c6",
+    "class-name": "#8be9fd",
+    function: "#50fa7b",
+    regex: "#ffb86c",
+    important: "#ffb86c",
+    variable: "#f8f8f2",
+};
+/**
+ * Resolve the colour for a token whose Prism class list is `classNames`
+ * (e.g. `["token", "attr-value"]` or `["token", "punctuation", "attr-equals"]`).
+ * Picks the most specific class present in the theme, walking from the most
+ * specific class back toward the generic ones; falls back to `default`.
+ */
+export const resolveTokenColor = (theme, classNames) => {
+    for (let i = classNames.length - 1; i >= 0; i--) {
+        const name = classNames[i];
+        if (name === "token")
+            continue;
+        if (theme[name])
+            return theme[name];
+    }
+    return theme.default;
+};

package/lib/cjs/src/highlight.d.ts

@@ -0,0 +1,69 @@
+/**
+ * First-party syntax highlighting for the diff viewer.
+ *
+ * The problem this solves: highlighting a diff line-by-line loses lexer state
+ * across line boundaries (a tag or string that wraps onto the next line is
+ * mis-tokenised), and highlighting that runs *after* the diff can't be merged
+ * with the word-level change marks on a changed line. So instead we highlight
+ * each whole side once — lexer state carries across every line — then express
+ * both the highlight tokens and the diff chunks as `[start, end)` intervals over
+ * the same line string and intersect them. Every resulting atom carries one
+ * colour (from the grammar) and one diff status (default / added / removed).
+ *
+ * Grammars are loaded lazily per language via `ensureLanguage`, tokenisation is
+ * synchronous (`refractor.highlight`), and colours are applied inline
+ * (`style={{ color }}`) so they never collide with host-page CSS.
+ */
+import type { ReactElement } from "react";
+import { type DiffInformation } from "./compute-lines.js";
+import { type HighlightTheme } from "./highlight-theme.js";
+/** A coloured run over a single line, in that line's character coordinate space. */
+export interface HighlightToken {
+    start: number;
+    end: number;
+    color: string;
+}
+/** Contiguous coloured runs for one line (covers the whole line, no gaps). */
+export type LineTokens = HighlightToken[];
+/**
+ * Ensures the grammar for `language` is registered, loading it lazily if needed.
+ * Resolves with the canonical language name to hand to `highlightSide`, or
+ * `null` if the language is unknown or failed to load (caller falls back to no
+ * highlighting). Safe to call repeatedly — registered/negative/in-flight are
+ * all cached.
+ */
+export declare const ensureLanguage: (language: string) => Promise<string | null>;
+/**
+ * Highlights an entire side and returns per-line token arrays (index `i` is the
+ * `i`-th line of `text`). Lexer state carries across lines because the whole
+ * string is tokenised in one pass. `language` must be a canonical name from
+ * `ensureLanguage`; returns `null` if tokenisation fails.
+ */
+export declare const highlightSide: (text: string, language: string, theme: HighlightTheme) => LineTokens[] | null;
+/**
+ * Re-bases a line's tokens to a sub-range starting at `from` (used to drop the
+ * peeled leading-whitespace indent so body tokens align with the diff body).
+ */
+export declare const sliceLineTokens: (tokens: LineTokens, from: number) => LineTokens;
+interface MergeStyles {
+    wordDiff: string;
+    wordAdded: string;
+    wordRemoved: string;
+}
+interface MergeOptions {
+    styles: MergeStyles;
+    showHighlight: boolean;
+}
+/**
+ * Intersects a changed line's highlight tokens with its word-diff chunks. Both
+ * are contiguous partitions of the same body string, so a two-pointer walk over
+ * their union of boundaries yields atoms that each carry one colour and one diff
+ * status — preserving syntax colour *and* the `<ins>`/`<del>` word marks.
+ */
+export declare const mergeHighlightWithDiff: (bodyText: string, bodyTokens: LineTokens, diffArray: readonly DiffInformation[], options: MergeOptions) => ReactElement[];
+/**
+ * Renders a non-changed (context / fully-added / fully-removed) line as coloured
+ * spans, with no word-diff wrapping.
+ */
+export declare const renderHighlightedPlain: (bodyText: string, bodyTokens: LineTokens) => ReactElement[];
+export {};

package/lib/cjs/src/highlight.js

@@ -0,0 +1,315 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * First-party syntax highlighting for the diff viewer.
+ *
+ * The problem this solves: highlighting a diff line-by-line loses lexer state
+ * across line boundaries (a tag or string that wraps onto the next line is
+ * mis-tokenised), and highlighting that runs *after* the diff can't be merged
+ * with the word-level change marks on a changed line. So instead we highlight
+ * each whole side once — lexer state carries across every line — then express
+ * both the highlight tokens and the diff chunks as `[start, end)` intervals over
+ * the same line string and intersect them. Every resulting atom carries one
+ * colour (from the grammar) and one diff status (default / added / removed).
+ *
+ * Grammars are loaded lazily per language via `ensureLanguage`, tokenisation is
+ * synchronous (`refractor.highlight`), and colours are applied inline
+ * (`style={{ color }}`) so they never collide with host-page CSS.
+ */
+import cn from "classnames";
+import { refractor } from "refractor/core";
+import { DiffType } from "./compute-lines.js";
+import { resolveTokenColor } from "./highlight-theme.js";
+/**
+ * Lazy grammar loaders. A static map (not `import(`refractor/${name}`)`) so a
+ * bundler can see every possible chunk and code-split them individually — only
+ * the grammar a consumer actually asks for is fetched. Covers refractor's
+ * "common" language set.
+ */
+const LANGUAGE_LOADERS = {
+    arduino: () => import("refractor/arduino"),
+    bash: () => import("refractor/bash"),
+    basic: () => import("refractor/basic"),
+    c: () => import("refractor/c"),
+    clike: () => import("refractor/clike"),
+    cpp: () => import("refractor/cpp"),
+    csharp: () => import("refractor/csharp"),
+    css: () => import("refractor/css"),
+    diff: () => import("refractor/diff"),
+    go: () => import("refractor/go"),
+    ini: () => import("refractor/ini"),
+    java: () => import("refractor/java"),
+    javascript: () => import("refractor/javascript"),
+    json: () => import("refractor/json"),
+    kotlin: () => import("refractor/kotlin"),
+    less: () => import("refractor/less"),
+    lua: () => import("refractor/lua"),
+    makefile: () => import("refractor/makefile"),
+    markdown: () => import("refractor/markdown"),
+    markup: () => import("refractor/markup"),
+    "markup-templating": () => import("refractor/markup-templating"),
+    objectivec: () => import("refractor/objectivec"),
+    perl: () => import("refractor/perl"),
+    php: () => import("refractor/php"),
+    python: () => import("refractor/python"),
+    r: () => import("refractor/r"),
+    regex: () => import("refractor/regex"),
+    ruby: () => import("refractor/ruby"),
+    rust: () => import("refractor/rust"),
+    sass: () => import("refractor/sass"),
+    scss: () => import("refractor/scss"),
+    sql: () => import("refractor/sql"),
+    swift: () => import("refractor/swift"),
+    typescript: () => import("refractor/typescript"),
+    vbnet: () => import("refractor/vbnet"),
+    yaml: () => import("refractor/yaml"),
+};
+/**
+ * Friendly names → canonical loader keys. refractor also registers a grammar's
+ * own aliases on `register` (e.g. `markup` enables `html`/`xml`/`svg`, and
+ * `typescript` enables `ts`), but we still need to know *which* loader to run
+ * when a consumer passes the alias, so map the common ones here.
+ */
+const LANGUAGE_ALIASES = {
+    html: "markup",
+    xml: "markup",
+    svg: "markup",
+    mathml: "markup",
+    ssml: "markup",
+    atom: "markup",
+    rss: "markup",
+    js: "javascript",
+    jsx: "javascript",
+    node: "javascript",
+    ts: "typescript",
+    tsx: "typescript",
+    py: "python",
+    rb: "ruby",
+    yml: "yaml",
+    md: "markdown",
+    sh: "bash",
+    shell: "bash",
+    zsh: "bash",
+    "c++": "cpp",
+    objc: "objectivec",
+    cs: "csharp",
+    dotnet: "csharp",
+    kt: "kotlin",
+    rs: "rust",
+    golang: "go",
+};
+/** Languages we've tried and failed to load — never retried. */
+const negativeCache = new Set();
+/** In-flight loads, deduped so concurrent requests share one import. */
+const inflight = new Map();
+/** Resolve a requested language name to its canonical (registerable) key. */
+const canonicalName = (language) => {
+    var _a;
+    const requested = language.toLowerCase();
+    return (_a = LANGUAGE_ALIASES[requested]) !== null && _a !== void 0 ? _a : requested;
+};
+/**
+ * Ensures the grammar for `language` is registered, loading it lazily if needed.
+ * Resolves with the canonical language name to hand to `highlightSide`, or
+ * `null` if the language is unknown or failed to load (caller falls back to no
+ * highlighting). Safe to call repeatedly — registered/negative/in-flight are
+ * all cached.
+ */
+export const ensureLanguage = async (language) => {
+    const canonical = canonicalName(language);
+    if (refractor.registered(canonical))
+        return canonical;
+    if (negativeCache.has(canonical))
+        return null;
+    const loader = LANGUAGE_LOADERS[canonical];
+    if (!loader) {
+        negativeCache.add(canonical);
+        return null;
+    }
+    let load = inflight.get(canonical);
+    if (!load) {
+        load = loader()
+            .then((mod) => {
+            refractor.register(mod.default);
+        })
+            .catch(() => {
+            negativeCache.add(canonical);
+        })
+            .finally(() => {
+            inflight.delete(canonical);
+        });
+        inflight.set(canonical, load);
+    }
+    await load;
+    return refractor.registered(canonical) ? canonical : null;
+};
+/**
+ * Walks the hast tree in document order, assigning each text leaf a character
+ * range and the colour of its innermost token class. Offsets are contiguous, so
+ * the leaves losslessly tile the input string.
+ */
+const collectLeaves = (nodes, theme, color, offset, out) => {
+    var _a, _b;
+    let pos = offset;
+    for (const node of nodes) {
+        if (node.type === "text") {
+            const value = (_a = node.value) !== null && _a !== void 0 ? _a : "";
+            if (value.length > 0) {
+                out.push({ start: pos, end: pos + value.length, color, text: value });
+                pos += value.length;
+            }
+        }
+        else if (node.children) {
+            const className = (_b = node.properties) === null || _b === void 0 ? void 0 : _b.className;
+            const nextColor = Array.isArray(className)
+                ? resolveTokenColor(theme, className)
+                : color;
+            pos = collectLeaves(node.children, theme, nextColor, pos, out);
+        }
+    }
+    return pos;
+};
+/** Splits contiguous leaves into per-line token arrays, rebased to line-start. */
+const tokensByLine = (leaves, lineCount) => {
+    const lines = Array.from({ length: lineCount }, () => []);
+    let line = 0;
+    let lineStart = 0;
+    for (const leaf of leaves) {
+        let segStart = leaf.start;
+        for (let i = 0; i < leaf.text.length; i++) {
+            if (leaf.text[i] === "\n") {
+                const segEnd = leaf.start + i;
+                if (segEnd > segStart && lines[line]) {
+                    lines[line].push({
+                        start: segStart - lineStart,
+                        end: segEnd - lineStart,
+                        color: leaf.color,
+                    });
+                }
+                line += 1;
+                lineStart = leaf.start + i + 1;
+                segStart = lineStart;
+            }
+        }
+        if (leaf.end > segStart && lines[line]) {
+            lines[line].push({
+                start: segStart - lineStart,
+                end: leaf.end - lineStart,
+                color: leaf.color,
+            });
+        }
+    }
+    return lines;
+};
+/**
+ * Highlights an entire side and returns per-line token arrays (index `i` is the
+ * `i`-th line of `text`). Lexer state carries across lines because the whole
+ * string is tokenised in one pass. `language` must be a canonical name from
+ * `ensureLanguage`; returns `null` if tokenisation fails.
+ */
+export const highlightSide = (text, language, theme) => {
+    var _a;
+    if (text.length === 0)
+        return [];
+    let root;
+    try {
+        root = refractor.highlight(text, language);
+    }
+    catch (_b) {
+        return null;
+    }
+    const leaves = [];
+    collectLeaves((_a = root.children) !== null && _a !== void 0 ? _a : [], theme, theme.default, 0, leaves);
+    const lineCount = text.split("\n").length;
+    return tokensByLine(leaves, lineCount);
+};
+/**
+ * Re-bases a line's tokens to a sub-range starting at `from` (used to drop the
+ * peeled leading-whitespace indent so body tokens align with the diff body).
+ */
+export const sliceLineTokens = (tokens, from) => {
+    if (from <= 0)
+        return tokens;
+    const out = [];
+    for (const token of tokens) {
+        if (token.end <= from)
+            continue;
+        out.push({
+            start: Math.max(token.start, from) - from,
+            end: token.end - from,
+            color: token.color,
+        });
+    }
+    return out;
+};
+const renderAtom = (text, color, type, { styles, showHighlight }, key) => {
+    const style = color ? { color } : undefined;
+    if (type === DiffType.ADDED) {
+        return (_jsx("ins", { className: cn(styles.wordDiff, { [styles.wordAdded]: showHighlight }), style: style, children: text }, key));
+    }
+    if (type === DiffType.REMOVED) {
+        return (_jsx("del", { className: cn(styles.wordDiff, { [styles.wordRemoved]: showHighlight }), style: style, children: text }, key));
+    }
+    return (_jsx("span", { className: styles.wordDiff, style: style, children: text }, key));
+};
+/**
+ * Intersects a changed line's highlight tokens with its word-diff chunks. Both
+ * are contiguous partitions of the same body string, so a two-pointer walk over
+ * their union of boundaries yields atoms that each carry one colour and one diff
+ * status — preserving syntax colour *and* the `<ins>`/`<del>` word marks.
+ */
+export const mergeHighlightWithDiff = (bodyText, bodyTokens, diffArray, options) => {
+    var _a;
+    const ranges = [];
+    let pos = 0;
+    for (const diff of diffArray) {
+        const value = typeof diff.value === "string" ? diff.value : "";
+        if (value.length > 0) {
+            ranges.push({
+                start: pos,
+                end: pos + value.length,
+                type: (_a = diff.type) !== null && _a !== void 0 ? _a : DiffType.DEFAULT,
+            });
+            pos += value.length;
+        }
+    }
+    const total = bodyText.length;
+    const out = [];
+    let ti = 0;
+    let ri = 0;
+    let cur = 0;
+    let key = 0;
+    while (cur < total) {
+        const token = bodyTokens[ti];
+        const range = ranges[ri];
+        const tokenEnd = token ? token.end : total;
+        const rangeEnd = range ? range.end : total;
+        const end = Math.min(tokenEnd, rangeEnd, total);
+        if (end <= cur) {
+            // Zero-width or stale interval — advance past it to guarantee progress.
+            if (tokenEnd <= cur)
+                ti += 1;
+            else if (rangeEnd <= cur)
+                ri += 1;
+            else
+                break;
+            continue;
+        }
+        out.push(renderAtom(bodyText.slice(cur, end), token === null || token === void 0 ? void 0 : token.color, range ? range.type : DiffType.DEFAULT, options, key++));
+        cur = end;
+        if (tokenEnd <= cur)
+            ti += 1;
+        if (rangeEnd <= cur)
+            ri += 1;
+    }
+    return out;
+};
+/**
+ * Renders a non-changed (context / fully-added / fully-removed) line as coloured
+ * spans, with no word-diff wrapping.
+ */
+export const renderHighlightedPlain = (bodyText, bodyTokens) => {
+    if (bodyTokens.length === 0) {
+        return [_jsx("span", { children: bodyText }, 0)];
+    }
+    return bodyTokens.map((token, i) => (_jsx("span", { style: { color: token.color }, children: bodyText.slice(token.start, token.end) }, i)));
+};