xtralab 0.1.0

package/lib/git/notebookDiff.js

@@ -0,0 +1,805 @@
+import * as React from 'react';
+import { OutputAreaModel, SimplifiedOutputArea } from '@jupyterlab/outputarea';
+import { MimeModel } from '@jupyterlab/rendermime';
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
+import { FileDiff } from '@pierre/diffs/react';
+import { parseDiffFromFile } from '@pierre/diffs';
+/**
+ * The CSS class added to the root of the notebook diff. Selectors that
+ * style cell sections, headers, and the per-cell diff blocks hang off this
+ * class.
+ */
+export const NOTEBOOK_DIFF_CSS_CLASS = 'jp-xtralab-NotebookDiff';
+/**
+ * Parse notebook JSON. Returns `null` if the text doesn't parse or doesn't
+ * look like a notebook (missing `cells` array). The caller falls back to a
+ * raw text diff so a malformed file is still inspectable.
+ */
+export function parseNotebook(text) {
+    if (text.length === 0) {
+        return emptyNotebook();
+    }
+    let value;
+    try {
+        value = JSON.parse(text);
+    }
+    catch (_a) {
+        return null;
+    }
+    if (value === null ||
+        typeof value !== 'object' ||
+        !Array.isArray(value.cells)) {
+        return null;
+    }
+    const nb = value;
+    if (nb.metadata === undefined || typeof nb.metadata !== 'object') {
+        nb.metadata = {};
+    }
+    return nb;
+}
+function emptyNotebook() {
+    return {
+        cells: [],
+        metadata: {},
+        nbformat: 4,
+        nbformat_minor: 5
+    };
+}
+/**
+ * nbformat allows multiline string fields (`source`, stream `text`,
+ * `text/plain` outputs, …) to be either a single string or an array of
+ * strings. Normalize to one string so equality checks and diffs see the
+ * same shape regardless of how the writer chose to serialise it.
+ */
+export function joinMultiline(value) {
+    if (value === undefined) {
+        return '';
+    }
+    return Array.isArray(value) ? value.join('') : value;
+}
+export function cellSource(cell) {
+    return joinMultiline(cell.source);
+}
+/**
+ * Canonical text representation of a cell's outputs, used both for equality
+ * checks and for the per-cell output diff. Stream and `text/plain` data
+ * round-trip verbatim; richer mime types (image/png, text/html, …) collapse
+ * to a `<mime-type>` placeholder so diffing image bytes doesn't drown the
+ * panel in base64 noise.
+ */
+export function canonicalOutputs(cell) {
+    var _a;
+    const outputs = (_a = cell.outputs) !== null && _a !== void 0 ? _a : [];
+    if (outputs.length === 0) {
+        return '';
+    }
+    return outputs.map(formatOutput).join('\n');
+}
+function formatOutput(output) {
+    var _a, _b, _c, _d, _e, _f;
+    switch (output.output_type) {
+        case 'stream': {
+            const stream = (_a = output.name) !== null && _a !== void 0 ? _a : 'stdout';
+            return `[stream:${stream}]\n${joinMultiline(output.text)}`;
+        }
+        case 'execute_result':
+        case 'display_data': {
+            const data = (_b = output.data) !== null && _b !== void 0 ? _b : {};
+            const lines = [];
+            const tag = output.output_type === 'execute_result'
+                ? `[execute_result:${(_c = output.execution_count) !== null && _c !== void 0 ? _c : '?'}]`
+                : '[display_data]';
+            lines.push(tag);
+            if ('text/plain' in data) {
+                lines.push(joinMultiline(data['text/plain']));
+            }
+            const otherKeys = Object.keys(data)
+                .filter(key => key !== 'text/plain')
+                .sort();
+            for (const key of otherKeys) {
+                lines.push(`<${key}>`);
+            }
+            return lines.join('\n');
+        }
+        case 'error': {
+            const ename = (_d = output.ename) !== null && _d !== void 0 ? _d : 'Error';
+            const evalue = (_e = output.evalue) !== null && _e !== void 0 ? _e : '';
+            // Tracebacks contain ANSI escape codes by default. Strip them so the
+            // diff stays readable — coloring information has no analog in a plain
+            // text diff, and the escapes themselves would inflate every traceback
+            // line into a fake change.
+            const traceback = ((_f = output.traceback) !== null && _f !== void 0 ? _f : []).map(stripAnsi).join('\n');
+            return `[error]\n${ename}: ${evalue}\n${traceback}`;
+        }
+        default:
+            return `[${output.output_type}]`;
+    }
+}
+// Matching ANSI escape codes inherently requires a control character in
+// the pattern, which is what no-control-regex flags. Disable the rule on
+// this single literal — silently emitting un-stripped escapes would just
+// reintroduce the very noise stripAnsi exists to remove.
+// eslint-disable-next-line no-control-regex
+const ANSI_ESCAPE_RE = /\x1B\[[0-9;]*[A-Za-z]/g;
+function stripAnsi(value) {
+    return value.replace(ANSI_ESCAPE_RE, '');
+}
+/**
+ * Stable JSON of the cell's `metadata` object. Keys are sorted recursively
+ * so a writer that re-orders the metadata object doesn't surface as a diff.
+ * An empty metadata object returns the empty string so freshly-added cells
+ * that carry the default `{}` don't produce a `+{}` placeholder section.
+ */
+export function canonicalMetadata(cell) {
+    var _a;
+    const md = (_a = cell.metadata) !== null && _a !== void 0 ? _a : {};
+    if (Object.keys(md).length === 0) {
+        return '';
+    }
+    return stableStringify(md);
+}
+/**
+ * Stable JSON of the notebook-level metadata bundle (kernelspec, language
+ * info, nbformat). We diff the bundle as a single block so the user sees
+ * all environment-level changes in one place.
+ */
+export function canonicalNotebookMetadata(notebook) {
+    return stableStringify({
+        metadata: notebook.metadata,
+        nbformat: notebook.nbformat,
+        nbformat_minor: notebook.nbformat_minor
+    });
+}
+function stableStringify(value) {
+    return JSON.stringify(value, sortKeysReplacer, 2);
+}
+function sortKeysReplacer(_key, value) {
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        const sorted = {};
+        for (const key of Object.keys(value).sort()) {
+            sorted[key] = value[key];
+        }
+        return sorted;
+    }
+    return value;
+}
+/**
+ * Equality check used to classify matched cells as `unchanged` vs
+ * `modified`. Compares the three things we actually render — type, source,
+ * outputs, metadata — using the same canonical representations the diff
+ * itself sees, so an "equal" verdict here implies all per-cell diff blocks
+ * would be empty.
+ */
+export function cellsAreEqual(a, b) {
+    return (a.cell_type === b.cell_type &&
+        cellSource(a) === cellSource(b) &&
+        canonicalOutputs(a) === canonicalOutputs(b) &&
+        canonicalMetadata(a) === canonicalMetadata(b));
+}
+/**
+ * Align cells between two notebook revisions. Cells that carry a stable id
+ * (nbformat ≥ 4.5) match on their id; remaining cells fall back to
+ * positional matching against the next un-consumed unidentified old cell so
+ * older notebooks still produce a sensible diff.
+ *
+ * Output ordering: entries follow new-file order, with cells that exist
+ * only in the old revision appended at the end as `removed`. We don't try
+ * to interleave removals at their original position — for typical notebook
+ * edits this is more readable than guessing alignment between unrelated
+ * insertions and deletions.
+ */
+export function alignNotebookCells(oldCells, newCells) {
+    const oldById = new Map();
+    oldCells.forEach((cell, index) => {
+        if (cell.id !== undefined && cell.id.length > 0) {
+            oldById.set(cell.id, index);
+        }
+    });
+    const consumed = new Set();
+    const entries = [];
+    // Cursor used for positional matching of unidentified cells. Only advances
+    // forward so we don't double-match a single old cell.
+    let positionalCursor = 0;
+    for (let newIndex = 0; newIndex < newCells.length; newIndex++) {
+        const newCell = newCells[newIndex];
+        let matchedOldIndex;
+        if (newCell.id !== undefined && newCell.id.length > 0) {
+            const candidate = oldById.get(newCell.id);
+            if (candidate !== undefined && !consumed.has(candidate)) {
+                matchedOldIndex = candidate;
+            }
+        }
+        else {
+            while (positionalCursor < oldCells.length) {
+                const candidateIndex = positionalCursor;
+                positionalCursor += 1;
+                if (consumed.has(candidateIndex)) {
+                    continue;
+                }
+                const candidate = oldCells[candidateIndex];
+                if (candidate.id === undefined || candidate.id.length === 0) {
+                    matchedOldIndex = candidateIndex;
+                    break;
+                }
+            }
+        }
+        if (matchedOldIndex !== undefined) {
+            consumed.add(matchedOldIndex);
+            const oldCell = oldCells[matchedOldIndex];
+            const kind = cellsAreEqual(oldCell, newCell)
+                ? 'unchanged'
+                : 'modified';
+            entries.push({
+                kind,
+                oldCell,
+                newCell,
+                oldIndex: matchedOldIndex,
+                newIndex
+            });
+        }
+        else {
+            entries.push({ kind: 'added', newCell, newIndex });
+        }
+    }
+    oldCells.forEach((oldCell, oldIndex) => {
+        if (!consumed.has(oldIndex)) {
+            entries.push({ kind: 'removed', oldCell, oldIndex });
+        }
+    });
+    return entries;
+}
+/**
+ * Build a complete notebook diff from the textual contents of two
+ * revisions. Returns `null` if either side fails to parse as a notebook;
+ * the caller is expected to fall back to a raw text diff in that case.
+ *
+ * An empty string on either side is treated as an empty notebook (no
+ * cells, default metadata) so a freshly-added or deleted notebook still
+ * produces a sensible cell-by-cell diff.
+ */
+export function buildNotebookDiff(options) {
+    var _a;
+    const oldNotebook = parseNotebook(options.oldText);
+    const newNotebook = parseNotebook(options.newText);
+    if (oldNotebook === null || newNotebook === null) {
+        return null;
+    }
+    const language = (_a = detectLanguage(newNotebook)) !== null && _a !== void 0 ? _a : detectLanguage(oldNotebook);
+    const cells = alignNotebookCells(oldNotebook.cells, newNotebook.cells);
+    const oldMd = canonicalNotebookMetadata(oldNotebook);
+    const newMd = canonicalNotebookMetadata(newNotebook);
+    let notebookMetadataDiff = null;
+    if (oldMd !== newMd) {
+        notebookMetadataDiff = parseDiffFromFile({ name: 'notebook-metadata.json', contents: oldMd }, { name: 'notebook-metadata.json', contents: newMd });
+    }
+    return {
+        oldNotebook,
+        newNotebook,
+        cells,
+        language,
+        notebookMetadataDiff
+    };
+}
+function detectLanguage(notebook) {
+    var _a;
+    const li = (_a = notebook.metadata) === null || _a === void 0 ? void 0 : _a.language_info;
+    if (li !== undefined && typeof li.name === 'string') {
+        return li.name;
+    }
+    return undefined;
+}
+/**
+ * Pick a filename whose extension drives `@pierre/diffs`'s syntax
+ * highlighter. The library never reads the file from disk — `name` only
+ * influences token-level rendering, so any plausible extension that maps
+ * to the right language is fine.
+ */
+function cellFilename(cell, language) {
+    if (cell.cell_type === 'markdown') {
+        return 'cell.md';
+    }
+    if (cell.cell_type === 'raw') {
+        return 'cell.txt';
+    }
+    switch ((language !== null && language !== void 0 ? language : '').toLowerCase()) {
+        case 'python':
+            return 'cell.py';
+        case 'javascript':
+        case 'node':
+            return 'cell.js';
+        case 'typescript':
+            return 'cell.ts';
+        case 'r':
+            return 'cell.r';
+        case 'julia':
+            return 'cell.jl';
+        case 'rust':
+            return 'cell.rs';
+        case 'bash':
+        case 'sh':
+            return 'cell.sh';
+        default:
+            return 'cell.txt';
+    }
+}
+/**
+ * Build the FileContents pair the diff library wants. `kind` controls the
+ * filename so each per-cell sub-diff (source, metadata) gets the right
+ * extension and therefore the right highlighter.
+ */
+function pierreFiles(kind, oldText, newText, oldCell, newCell, language) {
+    let name;
+    if (kind === 'metadata') {
+        name = 'cell-metadata.json';
+    }
+    else {
+        // Use the new cell's type/language when available; fall back to the old
+        // side so a deleted cell still gets the right highlighter.
+        const reference = newCell !== null && newCell !== void 0 ? newCell : oldCell;
+        name = reference !== null ? cellFilename(reference, language) : 'cell.txt';
+    }
+    return {
+        oldFile: { name, contents: oldText },
+        newFile: { name, contents: newText }
+    };
+}
+/**
+ * Compute the source / metadata sub-diffs for a single cell entry.
+ * Returns the empty list for `unchanged` entries so the caller can collapse
+ * them; for `added` / `removed` entries the populated side is paired with
+ * an empty counterpart so the library treats every line as an addition or
+ * deletion respectively.
+ *
+ * Outputs are deliberately *not* included here — they're rendered through
+ * rendermime side-by-side in {@link OutputsSection} so images render as
+ * images, HTML as HTML, etc. The canonical text form survives for equality
+ * (it drives the `unchanged` classification) but not for display.
+ */
+function buildCellSubDiffs(entry, language) {
+    if (entry.kind === 'unchanged') {
+        return [];
+    }
+    const oldCell = entry.kind === 'added' ? null : entry.oldCell;
+    const newCell = entry.kind === 'removed' ? null : entry.newCell;
+    const oldSource = oldCell !== null ? cellSource(oldCell) : '';
+    const newSource = newCell !== null ? cellSource(newCell) : '';
+    const oldMd = oldCell !== null ? canonicalMetadata(oldCell) : '';
+    const newMd = newCell !== null ? canonicalMetadata(newCell) : '';
+    const subdiffs = [];
+    const sections = [
+        { kind: 'source', oldText: oldSource, newText: newSource },
+        { kind: 'metadata', oldText: oldMd, newText: newMd }
+    ];
+    for (const section of sections) {
+        if (section.oldText === section.newText) {
+            continue;
+        }
+        const { oldFile, newFile } = pierreFiles(section.kind, section.oldText, section.newText, oldCell, newCell, language);
+        subdiffs.push({
+            kind: section.kind,
+            metadata: parseDiffFromFile(oldFile, newFile)
+        });
+    }
+    return subdiffs;
+}
+/**
+ * Common diff library options shared across every per-cell sub-diff and
+ * the notebook-level metadata diff. Split mode matches the file-diff path
+ * and gives the user the same left=old / right=new mental model inside
+ * each cell — cells stack vertically but each cell internally reads
+ * side-by-side, which matches how nbdime renders.
+ */
+function diffLibraryOptions(theme, dark) {
+    return {
+        diffStyle: 'split',
+        disableFileHeader: true,
+        theme,
+        themeType: dark ? 'dark' : 'light'
+    };
+}
+/**
+ * Mount a Lumino {@link Widget} inside a React tree. The widget is the
+ * source of truth for its DOM — React just owns the host element and
+ * Lumino owns the content the widget paints into it. Detach + dispose
+ * happens on unmount or when a new widget arrives, so the parent doesn't
+ * need to manage the widget's lifecycle separately.
+ */
+function LuminoWidget(props) {
+    const { widget, className } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        const host = ref.current;
+        if (host === null || widget.isDisposed) {
+            return;
+        }
+        try {
+            Widget.attach(widget, host);
+        }
+        catch (err) {
+            // Lumino refuses to attach a widget whose host isn't connected to
+            // the document, or that's already attached elsewhere. Either way
+            // there's nothing useful to do here — log and bail so the parent
+            // tree still mounts.
+            console.warn('xtralab: Widget.attach failed', err);
+            return;
+        }
+        return () => {
+            // Lumino's `Widget.detach` throws "Widget is not attached" when
+            // either the `IsAttached` flag is false *or* the node is no longer
+            // connected to the document. During a parent React unmount the
+            // host element gets removed from the DOM before this cleanup
+            // runs, so `node.isConnected` is already `false` while the
+            // `IsAttached` flag is still set from our earlier `Widget.attach`
+            // call. Calling `Widget.detach` in that state would throw, and —
+            // worse — `widget.dispose()` re-enters the same detach branch
+            // internally (its `else if (this.isAttached)` guard does not
+            // check the DOM connection), so leaving the flag stale produces
+            // the noisy "Widget is not attached" warning out of `dispose`.
+            //
+            // Resolve the race by driving Lumino's detach lifecycle by hand
+            // when the host has already been torn down: send `BeforeDetach`
+            // and `AfterDetach` so the layout cleanup hooks run and the flag
+            // clears, then dispose. When the host is still connected the
+            // ordinary `Widget.detach` path handles both steps for us.
+            if (widget.isAttached) {
+                if (widget.node.isConnected) {
+                    try {
+                        Widget.detach(widget);
+                    }
+                    catch (err) {
+                        console.warn('xtralab: Widget.detach failed', err);
+                    }
+                }
+                else {
+                    try {
+                        MessageLoop.sendMessage(widget, Widget.Msg.BeforeDetach);
+                        MessageLoop.sendMessage(widget, Widget.Msg.AfterDetach);
+                    }
+                    catch (err) {
+                        console.warn('xtralab: Widget detach messaging failed', err);
+                    }
+                }
+            }
+            try {
+                if (!widget.isDisposed) {
+                    widget.dispose();
+                }
+            }
+            catch (err) {
+                console.warn('xtralab: Widget.dispose failed', err);
+            }
+        };
+    }, [widget]);
+    return React.createElement("div", { ref: ref, className: className });
+}
+/**
+ * Render a sequence of nbformat outputs through JupyterLab's rendermime,
+ * exactly the way a live notebook would. Wrapped here so the side-by-side
+ * cell layout can drop a fully-rendered output column on either side
+ * without re-implementing rich mime rendering.
+ *
+ * The output area is created `trusted` because the source git ref is on
+ * the user's machine (working tree / index / HEAD). A diff viewer that
+ * sandboxed its own user's outputs would just be inconvenient.
+ */
+function OutputsPreview(props) {
+    const { outputs, rendermime, className } = props;
+    const widget = React.useMemo(() => {
+        const model = new OutputAreaModel({
+            values: outputs,
+            trusted: true
+        });
+        return new SimplifiedOutputArea({ model, rendermime });
+    }, [outputs, rendermime]);
+    return React.createElement(LuminoWidget, { widget: widget, className: className });
+}
+/**
+ * Render markdown source through rendermime so the cell preview matches
+ * what JupyterLab would render in a live notebook (LaTeX, syntax-highlighted
+ * code fences, sanitized HTML, …). Used for both the rendered preview that
+ * sits next to a markdown cell's source diff, and for unchanged markdown
+ * cells when the user expands them.
+ */
+function MarkdownPreview(props) {
+    const { source, rendermime, className } = props;
+    const renderer = React.useMemo(() => rendermime.createRenderer('text/markdown'), [rendermime]);
+    React.useEffect(() => {
+        const model = new MimeModel({
+            data: { 'text/markdown': source },
+            trusted: true
+        });
+        renderer.renderModel(model).catch(err => {
+            console.error('xtralab: markdown render failed', err);
+        });
+    }, [renderer, source]);
+    return React.createElement(LuminoWidget, { widget: renderer, className: className });
+}
+/**
+ * Two-column "old | new" layout used by both {@link OutputsSection} and
+ * {@link MarkdownPreviewSection}. The visible side(s) depend on the cell
+ * kind: modified shows both, added shows only new, removed shows only old,
+ * unchanged collapses to a single full-width pane (since both sides
+ * render the same content).
+ */
+function SideBySidePanes(props) {
+    const { label, oldNode, newNode, hasOld, hasNew } = props;
+    if (!hasOld && !hasNew) {
+        return null;
+    }
+    const both = hasOld && hasNew;
+    return (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-sideBySide`, "data-layout": both ? 'split' : 'single' },
+        React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-subdiffLabel` }, label),
+        React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-sideBySideGrid` },
+            both || hasOld ? (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-sidePane`, "data-side": "old" }, oldNode)) : null,
+            both || hasNew ? (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-sidePane`, "data-side": "new" }, newNode)) : null)));
+}
+/**
+ * Rendered outputs section for a cell. Renders old / new outputs through
+ * rendermime in two columns; for added or removed cells only the populated
+ * side is shown. Returns `null` (so the section is hidden entirely) when
+ * neither side has any outputs, or when the same set of outputs appears
+ * on both sides and the host doesn't want the duplicate render.
+ */
+function OutputsSection(props) {
+    var _a, _b;
+    const { entry, rendermime, placement } = props;
+    const oldCell = 'oldCell' in entry ? entry.oldCell : null;
+    const newCell = 'newCell' in entry ? entry.newCell : null;
+    const oldOutputs = (_a = oldCell === null || oldCell === void 0 ? void 0 : oldCell.outputs) !== null && _a !== void 0 ? _a : [];
+    const newOutputs = (_b = newCell === null || newCell === void 0 ? void 0 : newCell.outputs) !== null && _b !== void 0 ? _b : [];
+    const hasOld = oldOutputs.length > 0;
+    const hasNew = newOutputs.length > 0;
+    if (!hasOld && !hasNew) {
+        return null;
+    }
+    // For added / removed cells the parent already lives in a single outer
+    // column — rendering the populated side full width within that column
+    // is the right move. SideBySidePanes itself collapses to a single grid
+    // column when only one side has content, so we can use it for both
+    // cases by feeding it only the side(s) we want.
+    const showOld = placement !== 'right' && hasOld;
+    const showNew = placement !== 'left' && hasNew;
+    if (rendermime === null) {
+        return (React.createElement(SideBySidePanes, { label: "Outputs", hasOld: showOld, hasNew: showNew, oldNode: React.createElement("pre", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-fallbackText` }, oldCell !== null ? canonicalOutputs(oldCell) : ''), newNode: React.createElement("pre", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-fallbackText` }, newCell !== null ? canonicalOutputs(newCell) : '') }));
+    }
+    return (React.createElement(SideBySidePanes, { label: "Outputs", hasOld: showOld, hasNew: showNew, oldNode: React.createElement(OutputsPreview, { outputs: oldOutputs, rendermime: rendermime }), newNode: React.createElement(OutputsPreview, { outputs: newOutputs, rendermime: rendermime }) }));
+}
+/**
+ * Rendered markdown preview section. Sits next to (and below) the markdown
+ * source diff so the user sees both the source-level changes and how the
+ * rendered cell looks. Skipped for non-markdown cells.
+ */
+function MarkdownPreviewSection(props) {
+    const { entry, rendermime, placement } = props;
+    const isMarkdown = referenceCellType(entry) === 'markdown';
+    if (!isMarkdown || rendermime === null) {
+        return null;
+    }
+    const oldSource = 'oldCell' in entry ? cellSource(entry.oldCell) : '';
+    const newSource = 'newCell' in entry ? cellSource(entry.newCell) : '';
+    const showOld = placement !== 'right' && oldSource.length > 0;
+    const showNew = placement !== 'left' && newSource.length > 0;
+    if (!showOld && !showNew) {
+        return null;
+    }
+    return (React.createElement(SideBySidePanes, { label: "Rendered", hasOld: showOld, hasNew: showNew, oldNode: React.createElement(MarkdownPreview, { source: oldSource, rendermime: rendermime }), newNode: React.createElement(MarkdownPreview, { source: newSource, rendermime: rendermime }) }));
+}
+/**
+ * The notebook-level diff view. Lays out cells in a 2-column grid where
+ * the left column tracks the *old* notebook and the right column tracks
+ * the *new* one — modified and unchanged cells span both columns (their
+ * internal split-mode FileDiff aligns with the outer columns), added
+ * cells live in the right column with an empty placeholder on the left,
+ * and removed cells live in the left column with an empty placeholder on
+ * the right. The diff library's red/green tint within each cell makes
+ * the orientation clear without a separate column header.
+ */
+export function NotebookDiffView(props) {
+    const { diff, dark, rendermime } = props;
+    const theme = dark ? 'pierre-dark' : 'pierre-light';
+    const summary = React.useMemo(() => summarize(diff.cells), [diff.cells]);
+    return (React.createElement("div", { className: NOTEBOOK_DIFF_CSS_CLASS },
+        React.createElement(NotebookDiffHeader, { summary: summary }),
+        React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-grid` }, diff.cells.map(entry => (React.createElement(CellEntryRow, { key: cellEntryKey(entry), entry: entry, language: diff.language, theme: theme, dark: dark, rendermime: rendermime })))),
+        diff.notebookMetadataDiff !== null ? (React.createElement(NotebookMetadataBlock, { metadata: diff.notebookMetadataDiff, theme: theme, dark: dark })) : null));
+}
+/**
+ * Place a single cell entry into the outer 2-column grid. Modified /
+ * unchanged entries span the full row; added entries take the right
+ * column with an empty placeholder on the left; removed entries take the
+ * left column with an empty placeholder on the right. The placeholders
+ * are visible (subtle dashed outline) so the user can see *where* a
+ * cell was inserted or removed relative to the other side.
+ */
+function CellEntryRow(props) {
+    const { entry } = props;
+    if (entry.kind === 'added') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(EmptyCellPlaceholder, { side: "old", reason: "added" }),
+            React.createElement(CellDiffBlock, { ...props, placement: "right" })));
+    }
+    if (entry.kind === 'removed') {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(CellDiffBlock, { ...props, placement: "left" }),
+            React.createElement(EmptyCellPlaceholder, { side: "new", reason: "removed" })));
+    }
+    return React.createElement(CellDiffBlock, { ...props, placement: "full" });
+}
+function EmptyCellPlaceholder(props) {
+    const { side, reason } = props;
+    const label = reason === 'added' ? 'cell added on the right' : 'cell removed';
+    return (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-empty`, "data-side": side, "aria-label": label },
+        React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-emptyLabel` }, reason === 'added' ? '— no cell —' : '— cell removed —')));
+}
+function summarize(cells) {
+    const summary = {
+        added: 0,
+        removed: 0,
+        modified: 0,
+        unchanged: 0
+    };
+    for (const entry of cells) {
+        summary[entry.kind] += 1;
+    }
+    return summary;
+}
+function NotebookDiffHeader(props) {
+    const { summary } = props;
+    const total = summary.added + summary.removed + summary.modified + summary.unchanged;
+    return (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-header` },
+        React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-headerCount` },
+            total,
+            " cell",
+            total === 1 ? '' : 's'),
+        summary.modified > 0 ? (React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-stat`, "data-kind": "modified" },
+            summary.modified,
+            " modified")) : null,
+        summary.added > 0 ? (React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-stat`, "data-kind": "added" },
+            summary.added,
+            " added")) : null,
+        summary.removed > 0 ? (React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-stat`, "data-kind": "removed" },
+            summary.removed,
+            " removed")) : null,
+        summary.unchanged > 0 ? (React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-stat`, "data-kind": "unchanged" },
+            summary.unchanged,
+            " unchanged")) : null));
+}
+function cellEntryKey(entry) {
+    var _a, _b, _c, _d;
+    if (entry.kind === 'added') {
+        return `added:${entry.newIndex}:${(_a = entry.newCell.id) !== null && _a !== void 0 ? _a : ''}`;
+    }
+    if (entry.kind === 'removed') {
+        return `removed:${entry.oldIndex}:${(_b = entry.oldCell.id) !== null && _b !== void 0 ? _b : ''}`;
+    }
+    return `${entry.kind}:${entry.newIndex}:${(_d = (_c = entry.newCell.id) !== null && _c !== void 0 ? _c : entry.oldCell.id) !== null && _d !== void 0 ? _d : ''}`;
+}
+function CellDiffBlock(props) {
+    var _a, _b;
+    const { entry, language, theme, dark, rendermime, placement } = props;
+    // Unchanged cells start collapsed — the user opted out of seeing those
+    // sections by virtue of them being unchanged. A toggle lets them peek if
+    // they want.
+    const [collapsed, setCollapsed] = React.useState(entry.kind === 'unchanged');
+    const subdiffs = React.useMemo(() => (collapsed ? [] : buildCellSubDiffs(entry, language)), [collapsed, entry, language]);
+    const cellType = referenceCellType(entry);
+    const indexLabel = cellIndexLabel(entry);
+    const isCodeCell = cellType === 'code';
+    // Output rendering is only meaningful for code cells. Markdown / raw cells
+    // never carry outputs in nbformat.
+    const showOutputs = isCodeCell && entry.kind !== 'unchanged';
+    return (React.createElement("section", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cell`, "data-kind": entry.kind, "data-cell-type": cellType, "data-placement": placement },
+        React.createElement("header", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellHeader`, onClick: () => setCollapsed(c => !c), role: "button", tabIndex: 0, "aria-expanded": !collapsed, onKeyDown: event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    setCollapsed(c => !c);
+                }
+            } },
+            React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellChevron` }, collapsed ? '▸' : '▾'),
+            React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellBadge`, "data-kind": entry.kind }, kindBadge(entry.kind)),
+            React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellLabel` },
+                indexLabel,
+                " \u00B7 ",
+                cellType),
+            entry.kind === 'unchanged' ? (React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellHint` }, "unchanged")) : null),
+        !collapsed ? (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellBody` }, entry.kind === 'unchanged' ? (React.createElement(UnchangedCellBody, { entry: entry, rendermime: rendermime })) : (React.createElement(React.Fragment, null,
+            subdiffs.map(sub => (React.createElement(CellSubDiff, { key: sub.kind, kind: sub.kind, metadata: sub.metadata, theme: theme, dark: dark, placement: placement }))),
+            React.createElement(MarkdownPreviewSection, { entry: entry, rendermime: rendermime, placement: placement }),
+            showOutputs ? (React.createElement(OutputsSection, { entry: entry, rendermime: rendermime, placement: placement })) : null,
+            subdiffs.length === 0 &&
+                !(showOutputs &&
+                    (('oldCell' in entry && ((_a = entry.oldCell.outputs) === null || _a === void 0 ? void 0 : _a.length)) ||
+                        ('newCell' in entry && ((_b = entry.newCell.outputs) === null || _b === void 0 ? void 0 : _b.length)))) ? (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellEmpty` }, "No content differences detected.")) : null)))) : null));
+}
+function CellSubDiff(props) {
+    const { kind, metadata, theme, dark, placement } = props;
+    // For modified / unchanged cells the diff spans both outer columns, and
+    // split mode lets it visually align with the outer old | new lanes. For
+    // added / removed cells the diff sits inside a single outer column, so
+    // unified mode keeps the content readable instead of leaving half the
+    // column empty.
+    const diffStyle = placement === 'full' ? 'split' : 'unified';
+    return (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-subdiff`, "data-section": kind },
+        React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-subdiffLabel` }, subdiffLabel(kind)),
+        React.createElement(FileDiff, { fileDiff: metadata, 
+            // See diffWidget.tsx — the worker bootstrap can't resolve through
+            // JupyterLab's federation pipeline, so every diff in this extension
+            // runs on the main thread. Cell diffs are small enough that this is
+            // not a performance concern.
+            disableWorkerPool: true, options: { ...diffLibraryOptions(theme, dark), diffStyle } })));
+}
+function NotebookMetadataBlock(props) {
+    const { metadata, theme, dark } = props;
+    return (React.createElement("section", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cell`, "data-kind": "modified", "data-cell-type": "metadata" },
+        React.createElement("header", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellHeader`, "aria-label": "Notebook metadata" },
+            React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellChevron` }, "\u25BE"),
+            React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellBadge`, "data-kind": "modified" }, "M"),
+            React.createElement("span", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellLabel` }, "Notebook metadata")),
+        React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-cellBody` },
+            React.createElement(CellSubDiff, { kind: "metadata", metadata: metadata, theme: theme, dark: dark, placement: "full" }))));
+}
+/**
+ * Body for an unchanged cell when the user has expanded it. The cell's
+ * content matches on both sides, so we render once full-width: markdown
+ * cells go through rendermime (if available) so they look like the live
+ * notebook would render them, code cells fall through to a verbatim
+ * pre-formatted block, and any code outputs render through rendermime
+ * below the source.
+ */
+function UnchangedCellBody(props) {
+    var _a;
+    const { entry, rendermime } = props;
+    const cell = entry.newCell;
+    const source = cellSource(cell);
+    const isMarkdown = cell.cell_type === 'markdown';
+    const outputs = (_a = cell.outputs) !== null && _a !== void 0 ? _a : [];
+    const hasOutputs = outputs.length > 0;
+    return (React.createElement(React.Fragment, null,
+        isMarkdown && rendermime !== null && source.length > 0 ? (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-unchangedRendered` },
+            React.createElement(MarkdownPreview, { source: source, rendermime: rendermime }))) : (React.createElement("pre", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-unchangedSource` }, source.length > 0 ? source : '(empty cell)')),
+        hasOutputs && rendermime !== null ? (React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-unchangedOutputs` },
+            React.createElement("div", { className: `${NOTEBOOK_DIFF_CSS_CLASS}-subdiffLabel` }, "Outputs"),
+            React.createElement(OutputsPreview, { outputs: outputs, rendermime: rendermime }))) : null));
+}
+function referenceCellType(entry) {
+    if (entry.kind === 'added') {
+        return entry.newCell.cell_type;
+    }
+    if (entry.kind === 'removed') {
+        return entry.oldCell.cell_type;
+    }
+    return entry.newCell.cell_type;
+}
+function cellIndexLabel(entry) {
+    if (entry.kind === 'added') {
+        return `Cell ${entry.newIndex + 1}`;
+    }
+    if (entry.kind === 'removed') {
+        return `Cell ${entry.oldIndex + 1} (removed)`;
+    }
+    if (entry.newIndex === entry.oldIndex) {
+        return `Cell ${entry.newIndex + 1}`;
+    }
+    return `Cell ${entry.oldIndex + 1} → ${entry.newIndex + 1}`;
+}
+function kindBadge(kind) {
+    switch (kind) {
+        case 'added':
+            return 'A';
+        case 'removed':
+            return 'D';
+        case 'modified':
+            return 'M';
+        case 'unchanged':
+            return '·';
+    }
+}
+function subdiffLabel(kind) {
+    switch (kind) {
+        case 'source':
+            return 'Source';
+        case 'metadata':
+            return 'Metadata';
+    }
+}