@bochenw/react-diff-viewer-continued 4.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Bart Riepe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,521 @@
+<img src='https://github.com/Aeolun/react-diff-viewer-continued/raw/main/logo_dark.png' width="100%" alt='React Diff Viewer' />
+
+<br/>
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+[![npm version](https://img.shields.io/npm/v/react-diff-viewer-continued)](https://www.npmjs.com/package/react-diff-viewer-continued)
+[![npm downloads](https://img.shields.io/npm/dw/react-diff-viewer-continued)](https://www.npmjs.com/package/react-diff-viewer-continued)
+[![GitHub license](https://img.shields.io/github/license/aeolun/react-diff-viewer-continued.svg)](https://github.com/aeolun/react-diff-viewer-continued/blob/main/LICENSE)
+
+A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
+
+![example image](./example.jpg)
+
+Inspired by the Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
+
+Most credit goes to [Pranesh Ravi](https://praneshravi.in) who created the [original diff viewer](https://github.com/praneshr/react-diff-viewer). I've just made a few modifications and updated the dependencies so they work with modern stacks.
+
+## Install
+
+```bash
+yarn add react-diff-viewer-continued
+
+# or
+
+npm i react-diff-viewer-continued
+
+# or
+
+pnpm add react-diff-viewer-continued
+```
+
+## Usage
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+
+const oldCode = `
+const a = 10
+const b = 10
+const c = () => console.log('foo')
+
+if(a > 10) {
+  console.log('bar')
+}
+
+console.log('done')
+`;
+const newCode = `
+const a = 10
+const boo = 10
+
+if(a === 10) {
+  console.log('bar')
+}
+`;
+
+class Diff extends PureComponent {
+  render = () => {
+    return (
+      <ReactDiffViewer oldValue={oldCode} newValue={newCode} splitView={true} />
+    );
+  };
+}
+```
+
+## Props
+
+| Prop                      | Type                      | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
+|---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| oldValue                  | `string \| Object`        | `''`                           | Old value as string (or Object if using `DiffMethod.JSON`).                                                                                                                                                                                                                                                                                                                                                      |
+| newValue                  | `string \| Object`        | `''`                           | New value as string (or Object if using `DiffMethod.JSON`).                                                                                                                                                                                                                                                                                                                                                      |
+| splitView                 | `boolean`                 | `true`                         | Switch between `unified` and `split` view.                                                                                                                                                                                                                                                                                                                                                                       |
+| disableWordDiff           | `boolean`                 | `false`                        | Show and hide word diff in a diff line.                                                                                                                                                                                                                                                                                                                                                                          |
+| compareMethod             | `DiffMethod \| (string, string) => diff.Change[]` | `DiffMethod.CHARS` | JsDiff text diff method. See [Text block diff comparison](#text-block-diff-comparison). **Important:** For JSON files use `DiffMethod.JSON`, for YAML files use `DiffMethod.YAML` - these use optimized structural comparison that is significantly faster than generic text diff for large files.                                                                                                               |
+| renderGutter              | `(diffData) => ReactNode` | `undefined`                    | Function that can be used to render an extra gutter with various information next to the line number.                                                                                                                                                                                                                                                                                                            |
+| hideLineNumbers           | `boolean`                 | `false`                        | Show and hide line numbers.                                                                                                                                                                                                                                                                                                                                                                                      |
+| alwaysShowLines           | `string[]`                | `[]`                           | List of lines to always be shown, regardless of diff status. Line numbers are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. `extraLinesSurroundingDiff` applies to these lines as well.                                                                                                                       |
+| renderContent             | `function`                | `undefined`                    | Render Prop API to render code in the diff viewer. Helpful for [syntax highlighting](#syntax-highlighting).                                                                                                                                                                                                                                                                                                      |
+| onLineNumberClick         | `function`                | `undefined`                    | Event handler for line number click. `(lineId: string, event: MouseEvent) => void`                                                                                                                                                                                                                                                                                                                               |
+| highlightLines            | `string[]`                | `[]`                           | List of lines to be highlighted. Works together with `onLineNumberClick`. Line numbers are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. To highlight a range of line numbers, pass the prefixed line number as an array. For example, `[L-2, L-3, L-4, L-5]` will highlight the lines `2-5` in the left pane. |
+| showDiffOnly              | `boolean`                 | `true`                         | Shows only the diffed lines and folds the unchanged lines.                                                                                                                                                                                                                                                                                                                                                       |
+| extraLinesSurroundingDiff | `number`                  | `3`                            | Number of extra unchanged lines surrounding the diff. Works along with `showDiffOnly`.                                                                                                                                                                                                                                                                                                                           |
+| codeFoldMessageRenderer   | `function`                | `undefined`                    | Render Prop API to render code fold message. `(totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement`                                                                                                                                                                                                                                                             |
+| styles                    | `object`                  | `{}`                           | To override style variables and styles. Learn more about [overriding styles](#overriding-styles).                                                                                                                                                                                                                                                                                                                |
+| useDarkTheme              | `boolean`                 | `false`                        | To enable/disable dark theme.                                                                                                                                                                                                                                                                                                                                                                                    |
+| leftTitle                 | `string \| ReactElement`  | `undefined`                    | Column title for left section of the diff in split view. This will be used as the only title in inline view.                                                                                                                                                                                                                                                                                                     |
+| rightTitle                | `string \| ReactElement`  | `undefined`                    | Column title for right section of the diff in split view. This will be ignored in inline view.                                                                                                                                                                                                                                                                                                                   |
+| 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.                                                                                                                                                                                                                                                                                     |
+| nonce                     | `string`                  | `''`                           | Nonce to use for inline styles (for CSP).                                                                                                                                                                                                                                                                                                                                                                        |
+
+## Instance Methods
+
+`resetCodeBlocks()` - Resets the expanded code blocks to its initial state. Returns `true` on successful reset and `false` during unsuccessful reset.
+
+## Large Diffs and Performance
+
+For large files (thousands of lines), the diff viewer provides several features to maintain good performance:
+
+### Virtualization with infiniteLoading
+
+Enable virtualization to only render visible rows:
+
+```javascript
+<ReactDiffViewer
+  oldValue={largeOldFile}
+  newValue={largeNewFile}
+  infiniteLoading={{
+    pageSize: 20,
+    containerHeight: '80vh'
+  }}
+  loadingElement={() => (
+    <div style={{ padding: '20px', textAlign: 'center' }}>
+      Computing diff...
+    </div>
+  )}
+/>
+```
+
+When `infiniteLoading` is enabled:
+- Only visible rows are rendered (virtualization)
+- Word-level diffs are computed on-demand as lines become visible
+- A loading element can be shown while the initial diff is computed
+
+### Use optimized diff methods for structured data
+
+For JSON and YAML files, always use the dedicated diff methods:
+
+```javascript
+// For JSON files - up to 100x faster for large files
+<ReactDiffViewer
+  oldValue={jsonObject}
+  newValue={newJsonObject}
+  compareMethod={DiffMethod.JSON}
+/>
+
+// For YAML files
+<ReactDiffViewer
+  oldValue={yamlString}
+  newValue={newYamlString}
+  compareMethod={DiffMethod.YAML}
+/>
+```
+
+See [JSON and YAML diffing](#json-and-yaml-diffing) for more details.
+
+## Syntax Highlighting
+
+Syntax highlighting is a bit tricky when combined with diff. Here, React Diff Viewer provides a simple render prop API to handle syntax highlighting. Use `renderContent(content: string) => JSX.Element` and your favorite syntax highlighting library to achieve this.
+
+An example using [Prism JS](https://prismjs.com)
+
+```html
+// Load Prism CSS
+<link
+  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.css"
+/>
+
+// Load Prism JS
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
+```
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+
+const oldCode = `
+const a = 10
+const b = 10
+const c = () => console.log('foo')
+
+if(a > 10) {
+  console.log('bar')
+}
+
+console.log('done')
+`;
+const newCode = `
+const a = 10
+const boo = 10
+
+if(a === 10) {
+  console.log('bar')
+}
+`;
+
+class Diff extends PureComponent {
+  highlightSyntax = (str) => (
+    <pre
+      style={{ display: 'inline' }}
+      dangerouslySetInnerHTML={{
+        __html: Prism.highlight(str, Prism.languages.javascript),
+      }}
+    />
+  );
+
+  render = () => {
+    return (
+      <ReactDiffViewer
+        oldValue={oldCode}
+        newValue={newCode}
+        splitView={true}
+        renderContent={this.highlightSyntax}
+      />
+    );
+  };
+}
+```
+
+## Text block diff comparison
+
+Different styles of text block diffing are possible by using the enums corresponding to various JsDiff methods ([learn more](https://github.com/kpdecker/jsdiff/tree/v4.0.1#api)). The supported methods are as follows.
+
+```javascript
+enum DiffMethod {
+  CHARS = 'diffChars',
+  WORDS = 'diffWords',
+  WORDS_WITH_SPACE = 'diffWordsWithSpace',
+  LINES = 'diffLines',
+  TRIMMED_LINES = 'diffTrimmedLines',
+  SENTENCES = 'diffSentences',
+  CSS = 'diffCss',
+  JSON = 'diffJson',  // Optimized for JSON files
+  YAML = 'diffYaml',  // Optimized for YAML files
+}
+```
+
+### JSON and YAML diffing
+
+For JSON and YAML files, use the dedicated `DiffMethod.JSON` and `DiffMethod.YAML` methods. These use an optimized structural comparison algorithm that is **significantly faster** than generic text diff for large files.
+
+**Why use these methods?**
+
+Generic text diff algorithms (like `CHARS` or `WORDS`) compare files character-by-character using the Myers diff algorithm, which has O(ND) complexity where N is the file size and D is the number of differences. For large JSON/YAML files (thousands of lines), this can take several seconds or even freeze the browser.
+
+The `JSON` and `YAML` methods instead:
+1. Parse the data structure
+2. Compare objects/arrays structurally
+3. Only run text diff on the parts that actually differ
+
+This reduces comparison time from seconds to milliseconds for typical configuration files.
+
+```javascript
+import React from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+
+// For JSON - can pass objects directly
+const oldJson = { name: "Original", items: [1, 2, 3] };
+const newJson = { name: "Updated", items: [1, 2, 3, 4] };
+
+// For YAML - pass as strings
+const oldYaml = `
+name: Original
+items:
+  - 1
+  - 2
+`;
+const newYaml = `
+name: Updated
+items:
+  - 1
+  - 2
+  - 3
+`;
+
+function JsonDiff() {
+  return (
+    <ReactDiffViewer
+      oldValue={oldJson}
+      newValue={newJson}
+      compareMethod={DiffMethod.JSON}
+      splitView={true}
+    />
+  );
+}
+
+function YamlDiff() {
+  return (
+    <ReactDiffViewer
+      oldValue={oldYaml}
+      newValue={newYaml}
+      compareMethod={DiffMethod.YAML}
+      splitView={true}
+    />
+  );
+}
+```
+
+### Other diff methods
+
+For regular code or text files, use the standard diff methods:
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+
+const oldCode = `
+const a = 10
+const b = 10
+`;
+const newCode = `
+const a = 10
+const boo = 10
+`;
+
+class Diff extends PureComponent {
+  render = () => {
+    return (
+      <ReactDiffViewer
+        oldValue={oldCode}
+        newValue={newCode}
+        compareMethod={DiffMethod.WORDS}
+        splitView={true}
+      />
+    );
+  };
+}
+```
+
+## Overriding Styles
+
+React Diff Viewer uses [emotion](https://emotion.sh/) for styling. It also offers a simple way to override styles and style variables. You can supply different variables for both light and dark themes. Styles will be common for both themes.
+
+Below are the default style variables and style object keys.
+
+```javascript
+
+// Default variables and style keys
+
+const defaultStyles = {
+  variables: {
+    light: {
+      diffViewerBackground: '#fff',
+      diffViewerColor: '#212529',
+      addedBackground: '#e6ffed',
+      addedColor: '#24292e',
+      removedBackground: '#ffeef0',
+      removedColor: '#24292e',
+      wordAddedBackground: '#acf2bd',
+      wordRemovedBackground: '#fdb8c0',
+      addedGutterBackground: '#cdffd8',
+      removedGutterBackground: '#ffdce0',
+      gutterBackground: '#f7f7f7',
+      gutterBackgroundDark: '#f3f1f1',
+      highlightBackground: '#fffbdd',
+      highlightGutterBackground: '#fff5b1',
+      codeFoldGutterBackground: '#dbedff',
+      codeFoldBackground: '#f1f8ff',
+      emptyLineBackground: '#fafbfc',
+      gutterColor: '#212529',
+      addedGutterColor: '#212529',
+      removedGutterColor: '#212529',
+      codeFoldContentColor: '#212529',
+      diffViewerTitleBackground: '#fafbfc',
+      diffViewerTitleColor: '#212529',
+      diffViewerTitleBorderColor: '#eee',
+    },
+    dark: {
+      diffViewerBackground: '#2e303c',
+      diffViewerColor: '#FFF',
+      addedBackground: '#044B53',
+      addedColor: 'white',
+      removedBackground: '#632F34',
+      removedColor: 'white',
+      wordAddedBackground: '#055d67',
+      wordRemovedBackground: '#7d383f',
+      addedGutterBackground: '#034148',
+      removedGutterBackground: '#632b30',
+      gutterBackground: '#2c2f3a',
+      gutterBackgroundDark: '#262933',
+      highlightBackground: '#2a3967',
+      highlightGutterBackground: '#2d4077',
+      codeFoldGutterBackground: '#21232b',
+      codeFoldBackground: '#262831',
+      emptyLineBackground: '#363946',
+      gutterColor: '#464c67',
+      addedGutterColor: '#8c8c8c',
+      removedGutterColor: '#8c8c8c',
+      codeFoldContentColor: '#555a7b',
+      diffViewerTitleBackground: '#2f323e',
+      diffViewerTitleColor: '#555a7b',
+      diffViewerTitleBorderColor: '#353846',
+    }
+  },
+  diffContainer?: {}, // style object
+  diffRemoved?: {}, // style object
+  diffAdded?: {}, // style object
+  marker?: {}, // style object
+  emptyGutter?: {}, // style object
+  highlightedLine?: {}, // style object
+  lineNumber?: {}, // style object
+  highlightedGutter?: {}, // style object
+  contentText?: {}, // style object
+  gutter?: {}, // style object
+  line?: {}, // style object
+  wordDiff?: {}, // style object
+  wordAdded?: {}, // style object
+  wordRemoved?: {}, // style object
+  codeFoldGutter?: {}, // style object
+  codeFold?: {}, // style object
+  emptyLine?: {}, // style object
+  content?: {}, // style object
+  titleBlock?: {}, // style object
+  splitView?: {}, // style object
+}
+```
+
+To override any style, just pass the new style object to the `styles` prop. New style will be computed using `Object.assign(default, override)`.
+
+For keys other than `variables`, the value can either be an object or string interpolation.
+
+```javascript
+import React, { PureComponent } from 'react';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+
+const oldCode = `
+const a = 10
+const b = 10
+const c = () => console.log('foo')
+
+if(a > 10) {
+  console.log('bar')
+}
+
+console.log('done')
+`;
+const newCode = `
+const a = 10
+const boo = 10
+
+if(a === 10) {
+  console.log('bar')
+}
+`;
+
+class Diff extends PureComponent {
+  highlightSyntax = (str) => (
+    <span
+      style={{ display: 'inline' }}
+      dangerouslySetInnerHTML={{
+        __html: Prism.highlight(str, Prism.languages.javascript),
+      }}
+    />
+  );
+
+  render = () => {
+    const newStyles = {
+      variables: {
+        dark: {
+          highlightBackground: '#fefed5',
+          highlightGutterBackground: '#ffcd3c',
+        },
+      },
+      line: {
+        padding: '10px 2px',
+        '&:hover': {
+          background: '#a26ea1',
+        },
+      },
+    };
+
+    return (
+      <ReactDiffViewer
+        styles={newStyles}
+        oldValue={oldCode}
+        newValue={newCode}
+        splitView={true}
+        renderContent={this.highlightSyntax}
+      />
+    );
+  };
+}
+```
+
+## Local Development
+
+```bash
+pnpm install
+pnpm build # or use yarn build:watch
+pnpm start:examples
+```
+
+Check package.json for more build scripts.
+
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ericmorgan1"><img src="https://avatars.githubusercontent.com/u/10346191?v=4?s=100" width="100px;" alt="Eric M."/><br /><sub><b>Eric M.</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=ericmorgan1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/spyroid"><img src="https://avatars.githubusercontent.com/u/844495?v=4?s=100" width="100px;" alt="Andrei Kovalevsky"/><br /><sub><b>Andrei Kovalevsky</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=spyroid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://kimbiyam.me"><img src="https://avatars.githubusercontent.com/u/59679962?v=4?s=100" width="100px;" alt="Chang Hyun Kim"/><br /><sub><b>Chang Hyun Kim</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=KimBiYam" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## License
+
+MIT

package/lib/cjs/src/comment-row.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { ReactElement } from "react";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+import type { ReactDiffViewerStyles } from "./styles.js";
+/**
+ * Data passed to the renderComment render prop so consumers know
+ * the context of the line they are rendering a comment for.
+ */
+export interface CommentRenderData {
+    lineId: string;
+    lineNumber: number;
+    prefix: LineNumberPrefix;
+    side: "left" | "right";
+    splitView: boolean;
+    styles: ReactDiffViewerStyles;
+}
+export interface CommentRowProps {
+    lineId: string;
+    lineNumber: number;
+    prefix: LineNumberPrefix;
+    splitView: boolean;
+    hideLineNumbers: boolean;
+    hasRenderGutter: boolean;
+    styles: ReactDiffViewerStyles;
+    renderComment: (data: CommentRenderData) => ReactElement | null;
+    trRef?: (el: HTMLTableRowElement | null) => void;
+}
+/**
+ * Memoized component that renders a comment row below a diff line.
+ * Renders a full-width <tr> with a single <td> spanning all columns.
+ * The consumer's renderComment provides the actual comment UI.
+ */
+export declare const CommentRow: React.NamedExoticComponent<CommentRowProps>;

package/lib/cjs/src/comment-row.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+/**
+ * Custom equality function for React.memo — compares data props and renderComment reference.
+ * Skips trRef since it's a stable cached callback.
+ */
+function commentRowPropsAreEqual(prev, next) {
+    return (prev.lineId === next.lineId &&
+        prev.lineNumber === next.lineNumber &&
+        prev.prefix === next.prefix &&
+        prev.splitView === next.splitView &&
+        prev.hideLineNumbers === next.hideLineNumbers &&
+        prev.hasRenderGutter === next.hasRenderGutter &&
+        prev.styles === next.styles &&
+        prev.renderComment === next.renderComment);
+}
+/**
+ * Calculates the total number of columns for the comment cell's colSpan.
+ */
+function getColSpan(splitView, hideLineNumbers, hasRenderGutter) {
+    if (splitView) {
+        // Split: [gutter?] [renderGutter?] [marker] [content] | [gutter?] [renderGutter?] [marker] [content]
+        let span = 4; // marker + content on each side
+        if (!hideLineNumbers)
+            span += 2; // gutter on each side
+        if (hasRenderGutter)
+            span += 2; // renderGutter on each side
+        return span;
+    }
+    // Unified: [gutter?] [gutter?] [renderGutter?] [marker] [content]
+    let span = 2; // marker + content
+    if (!hideLineNumbers)
+        span += 2; // two gutter columns
+    if (hasRenderGutter)
+        span += 1;
+    return span;
+}
+/**
+ * Memoized component that renders a comment row below a diff line.
+ * Renders a full-width <tr> with a single <td> spanning all columns.
+ * The consumer's renderComment provides the actual comment UI.
+ */
+export const CommentRow = React.memo(function CommentRow({ lineId, lineNumber, prefix, splitView, hideLineNumbers, hasRenderGutter, styles, renderComment, trRef, }) {
+    const colSpan = getColSpan(splitView, hideLineNumbers, hasRenderGutter);
+    const side = prefix === LineNumberPrefix.LEFT ? "left" : "right";
+    const content = renderComment({
+        lineId,
+        lineNumber,
+        prefix,
+        side,
+        splitView,
+        styles,
+    });
+    if (content === null)
+        return null;
+    return (_jsx("tr", { ref: trRef, className: styles.commentRow, "data-comment-line": lineId, children: _jsx("td", { colSpan: colSpan, className: styles.commentCell, children: content }) }));
+}, commentRowPropsAreEqual);

package/lib/cjs/src/compute-hidden-blocks.d.ts

@@ -0,0 +1,13 @@
+import { type LineInformation } from "./compute-lines.js";
+export interface Block {
+    index: number;
+    startLine: number;
+    endLine: number;
+    lines: number;
+}
+interface HiddenBlocks {
+    lineBlocks: Record<number, number>;
+    blocks: Block[];
+}
+export declare function computeHiddenBlocks(lineInformation: LineInformation[], diffLines: number[], extraLines: number): HiddenBlocks;
+export {};