xtralab 0.4.0 → 0.5.0

package/lib/git/diffWidget.js

@@ -1,100 +1,17 @@
 import * as React from 'react';
 import { MainAreaWidget } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
-import { ReactWidget, ToolbarButton, launchIcon, undoIcon } from '@jupyterlab/ui-components';
+import { ReactWidget, ToolbarButton, launchIcon } from '@jupyterlab/ui-components';
 import { Signal } from '@lumino/signaling';
-import { FileDiff } from '@pierre/diffs/react';
-import { diffAcceptRejectHunk, parseDiffFromFile } from '@pierre/diffs';
 import { getTreeIcon } from '../fileBrowser/icons';
 import { content } from './api';
-import { buildNotebookDiff, NotebookDiffView } from './notebookDiff';
-/**
- * The CSS class added to the diff main-area widget. The selectors that
- * style the embedded `@pierre/diffs` viewer hang off this class.
- */
-export const DIFF_WIDGET_CSS_CLASS = 'jp-xtralab-DiffWidget';
+import { imageDataType } from './imageDiff';
+import { DIFF_WIDGET_CSS_CLASS, DiffSurface, NotebookViewModeControl, isDarkTheme, readStoredNotebookViewMode, writeStoredNotebookViewMode } from './diffSurface';
+export { DIFF_WIDGET_CSS_CLASS };
 export const PREVIEW_DIFF_WIDGET_ID = 'xtralab:diff:preview';
 export function pinnedDiffWidgetId(change) {
     return `xtralab:diff:pinned:${change.group}:${change.path}`;
 }
-/**
- * `localStorage` key for the user's last-chosen split ratio. Persisted so
- * the preference survives reloads — the library has no built-in way to
- * remember per-host UI state, and reopening every diff at 50/50 is
- * annoying once the user has dialed in a layout they like.
- */
-const SPLIT_RATIO_STORAGE_KEY = 'xtralab:diff-split-ratio';
-/**
- * Bounds on the left-pane fraction. Keeping a few percent on either side
- * guarantees both panes remain visible — dragging to 0/100 would hide a
- * column and is almost never what the user wants.
- */
-const MIN_SPLIT_RATIO = 0.1;
-const MAX_SPLIT_RATIO = 0.9;
-const DEFAULT_SPLIT_RATIO = 0.5;
-/**
- * CSS injected via the `@pierre/diffs` `unsafeCSS` option. The library
- * places it inside the shadow root under `@layer unsafe`, which beats
- * the library's own `@layer base` rule that hardcodes
- * `grid-template-columns: 1fr 1fr` on the split-mode container.
- *
- * The override reads from `--xtralab-split-cols`, a custom property we set
- * on the host element via the `style` prop. Custom properties inherit
- * through the shadow DOM boundary, so adjusting it on the host instantly
- * resizes the columns without re-rendering the diff.
- */
-const SPLIT_RESIZE_CSS = `pre[data-diff-type="split"][data-overflow="scroll"] {
-  grid-template-columns: var(--xtralab-split-cols, 1fr 1fr);
-}`;
-function readStoredSplitRatio() {
-    try {
-        const raw = window.localStorage.getItem(SPLIT_RATIO_STORAGE_KEY);
-        if (raw === null) {
-            return DEFAULT_SPLIT_RATIO;
-        }
-        const parsed = Number.parseFloat(raw);
-        if (Number.isFinite(parsed) &&
-            parsed >= MIN_SPLIT_RATIO &&
-            parsed <= MAX_SPLIT_RATIO) {
-            return parsed;
-        }
-    }
-    catch (_a) {
-        // localStorage may throw in privacy mode or sandboxed contexts. Falling
-        // back to the default is fine — the user can resize again on this run.
-    }
-    return DEFAULT_SPLIT_RATIO;
-}
-function writeStoredSplitRatio(ratio) {
-    try {
-        window.localStorage.setItem(SPLIT_RATIO_STORAGE_KEY, ratio.toString());
-    }
-    catch (_a) {
-        // See readStoredSplitRatio — best-effort persistence.
-    }
-}
-const NOTEBOOK_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:notebook-diff-view-mode';
-function readStoredNotebookViewMode() {
-    try {
-        const raw = window.localStorage.getItem(NOTEBOOK_DIFF_VIEW_MODE_STORAGE_KEY);
-        if (raw === 'json' || raw === 'notebook') {
-            return raw;
-        }
-    }
-    catch (_a) {
-        // See readStoredSplitRatio — privacy-mode / sandboxed contexts can
-        // throw on access. The notebook view is the better default anyway.
-    }
-    return 'notebook';
-}
-function writeStoredNotebookViewMode(mode) {
-    try {
-        window.localStorage.setItem(NOTEBOOK_DIFF_VIEW_MODE_STORAGE_KEY, mode);
-    }
-    catch (_a) {
-        // Best-effort.
-    }
-}
 /**
  * Build the deterministic widget id used for a diff against a particular
  * file/group pair. Reused across plugin and command code so reopening a
@@ -133,6 +50,12 @@ export function resolveReferences(change) {
  * usual document chrome — toolbar slot, focus tracker integration, and
  * spinner-while-loading hooks — and matches the pattern used for other
  * read-only main-area widgets in the JupyterLab ecosystem.
+ *
+ * This is the launcher dashboard's own diff path
+ * (`xtralab:git:open-diff`), kept independent of `jupyterlab-git`. The
+ * actual diff rendering is delegated to the shared {@link DiffSurface};
+ * `jupyterlab-git`'s panel reaches the same surface through the providers
+ * registered in `diffProvider.tsx`.
  */
 export function createGitDiffWidget(options) {
     var _a;
@@ -310,50 +233,17 @@ export class DiffContentWidget extends ReactWidget {
         return React.createElement(DiffViewer, { ...this._options, widget: this });
     }
 }
-/**
- * Detect notebook files by extension. We only look at the suffix so the
- * caller (the file-change tracker) doesn't need to plumb a content-type
- * field through; mistaking another `.ipynb`-named file for a notebook is
- * harmless because {@link buildNotebookDiff} validates the JSON shape and
- * we fall back to the file diff if parsing fails.
- */
-function isNotebookPath(path) {
-    return path.toLowerCase().endsWith('.ipynb');
-}
-/**
- * Decide whether the active JupyterLab theme is a dark theme. Prefers the
- * `IThemeManager` token when available, and falls back to sniffing the
- * `data-jp-theme-light` attribute that JupyterLab sets on `<body>` so the
- * component still works in stripped-down hosts where the token isn't
- * provided (lite, certain notebook configurations, …).
- */
-function isDarkTheme(themeManager) {
-    if (themeManager !== null && themeManager.theme !== null) {
-        return !themeManager.isLight(themeManager.theme);
-    }
-    return document.body.dataset.jpThemeLight === 'false';
-}
 function DiffViewer(props) {
+    var _a;
     const { repoPath, change, themeManager, contentsManager, rendermime, onChanged, onEmpty, widget } = props;
     const [state, setState] = React.useState({
         loading: true,
-        metadata: null,
-        notebookDiff: null,
+        oldText: '',
+        newText: '',
         serverPath: '',
         isBinary: false,
         error: null
     });
-    // Split ratio for the diff columns: fraction of width given to the
-    // deletions (left) pane. Persisted across sessions so the user only
-    // dials in their layout once.
-    const [leftRatio, setLeftRatio] = React.useState(() => readStoredSplitRatio());
-    const wrapperRef = React.useRef(null);
-    // The drag handler reads the live ratio from a ref so the listeners we
-    // attach on pointer-down don't capture a stale value across renders.
-    const leftRatioRef = React.useRef(leftRatio);
-    React.useEffect(() => {
-        leftRatioRef.current = leftRatio;
-    }, [leftRatio]);
     // Bumping `reloadKey` re-enters the fetch effect. Used after a successful
     // hunk discard, so the diff reflects the new working-tree contents
     // without the user having to close and reopen the tab.
@@ -379,9 +269,16 @@ function DiffViewer(props) {
     // toolbar reads this flag to decide whether to show the
     // Notebook/JSON selector — and the toolbar bar itself stays hidden
     // when the file isn't a parseable notebook.
-    React.useEffect(() => {
-        widget.setHasNotebookView(state.notebookDiff !== null);
-    }, [widget, state.notebookDiff]);
+    const handleNotebookAvailabilityChange = React.useCallback((available) => {
+        widget.setHasNotebookView(available);
+    }, [widget]);
+    // The shared surface reports its hunk count after every (re)computation;
+    // we keep the latest so the auto-close-on-empty effect can fire after a
+    // discard empties the diff.
+    const [hunkCount, setHunkCount] = React.useState(null);
+    const handleMetadataChange = React.useCallback((info) => {
+        setHunkCount(info.hunkCount);
+    }, []);
     // Auto-close after a discard that emptied the diff. Gated on `reloadKey > 0`
     // so a file that opens already-empty (uncommon but possible) is not closed
     // before the user has had a chance to look at it.
@@ -389,8 +286,7 @@ function DiffViewer(props) {
         if (!state.loading &&
             state.error === null &&
             !state.isBinary &&
-            state.metadata !== null &&
-            state.metadata.hunks.length === 0 &&
+            hunkCount === 0 &&
             reloadKey > 0) {
             onEmpty === null || onEmpty === void 0 ? void 0 : onEmpty();
         }
@@ -398,7 +294,7 @@ function DiffViewer(props) {
         state.loading,
         state.error,
         state.isBinary,
-        state.metadata,
+        hunkCount,
         reloadKey,
         onEmpty
     ]);
@@ -428,24 +324,28 @@ function DiffViewer(props) {
         const serverPath = toServerPath(repoPath, change.path);
         setState({
             loading: true,
-            metadata: null,
-            notebookDiff: null,
+            oldText: '',
+            newText: '',
             serverPath,
             isBinary: false,
             error: null
         });
         const { oldRef, newRef } = resolveReferences(change);
+        // Raster images are still binary, but the git server base64-encodes
+        // binary content, so we fetch them like text and let the surface render
+        // an image diff. Other binary files have no useful textual diff.
+        const isImage = imageDataType(change.path) !== null;
         void (async () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             try {
-                if (change.isBinary === true) {
+                if (change.isBinary === true && !isImage) {
                     if (cancelled) {
                         return;
                     }
                     setState({
                         loading: false,
-                        metadata: null,
-                        notebookDiff: null,
+                        oldText: '',
+                        newText: '',
                         serverPath,
                         isBinary: true,
                         error: null
@@ -462,31 +362,10 @@ function DiffViewer(props) {
                 if (cancelled) {
                     return;
                 }
-                const oldText = (_b = oldRes.content) !== null && _b !== void 0 ? _b : '';
-                const newText = (_c = newRes.content) !== null && _c !== void 0 ? _c : '';
-                // For .ipynb files we precompute *both* the cell-by-cell
-                // notebook diff and the raw JSON file diff up front. The user
-                // toggles between them via the in-widget toolbar, so keeping
-                // both around (instead of re-fetching on switch) makes the
-                // toggle feel instant. If parsing fails, `notebookDiff` stays
-                // null and we silently fall back to the file diff path.
-                let notebookDiff = null;
-                if (isNotebookPath(change.path)) {
-                    notebookDiff = buildNotebookDiff({ oldText, newText });
-                }
-                const oldFile = {
-                    name: (_d = change.from) !== null && _d !== void 0 ? _d : change.path,
-                    contents: oldText
-                };
-                const newFile = {
-                    name: change.path,
-                    contents: newText
-                };
-                const metadata = parseDiffFromFile(oldFile, newFile);
                 setState({
                     loading: false,
-                    metadata,
-                    notebookDiff,
+                    oldText: (_b = oldRes.content) !== null && _b !== void 0 ? _b : '',
+                    newText: (_c = newRes.content) !== null && _c !== void 0 ? _c : '',
                     serverPath,
                     isBinary: false,
                     error: null
@@ -498,8 +377,8 @@ function DiffViewer(props) {
                 }
                 setState({
                     loading: false,
-                    metadata: null,
-                    notebookDiff: null,
+                    oldText: '',
+                    newText: '',
                     serverPath,
                     isBinary: false,
                     error: err instanceof Error ? err.message : String(err)
@@ -513,158 +392,31 @@ function DiffViewer(props) {
     // Per-hunk discard buttons are only meaningful for unstaged modifications:
     // staged-vs-HEAD diffs would need an index manipulation we can't do
     // through the available endpoints, and untracked files have no previous
-    // version to revert to. The annotation list collapses to empty in those
-    // cases and the diff renders without action buttons.
+    // version to revert to.
     const canDiscardHunk = change.group === 'unstaged' && change.status !== 'untracked';
-    const lineAnnotations = React.useMemo(() => {
-        if (!canDiscardHunk || state.metadata === null) {
-            return [];
-        }
-        return state.metadata.hunks.map((hunk, hunkIndex) => ({
-            side: 'additions',
-            // The first line of each hunk in the new file. We anchor the button
-            // there so it sits at the top of the hunk's body.
-            lineNumber: hunk.additionStart,
-            metadata: { hunkIndex }
-        }));
-    }, [canDiscardHunk, state.metadata]);
-    const handleDiscardHunk = React.useCallback(async (hunkIndex) => {
-        if (state.metadata === null) {
-            return;
-        }
-        const updated = diffAcceptRejectHunk(state.metadata, hunkIndex, 'reject');
-        // `additionLines` after a 'reject' contains the full new file with
-        // the hunk reverted back to the old content. The library splits
-        // file contents with `/(?<=\n)/` (a lookbehind that keeps the
-        // trailing `\n` on each line), so the entries already carry their
-        // own line endings — joining with `''` rebuilds the original text
-        // verbatim, while joining with `'\n'` would double every newline.
-        const text = updated.additionLines.join('');
-        try {
+    const hunkDiscard = React.useMemo(() => ({
+        enabled: canDiscardHunk,
+        save: async (text) => {
             await contentsManager.save(state.serverPath, {
                 type: 'file',
                 format: 'text',
                 content: text
             });
+        },
+        onAfterSave: () => {
             onChanged();
             setReloadKey(key => key + 1);
         }
-        catch (err) {
-            console.error('xtralab: failed to discard hunk', err);
-        }
-    }, [contentsManager, onChanged, state.metadata, state.serverPath]);
-    const renderAnnotation = React.useCallback((annotation) => {
-        if (annotation.metadata === undefined) {
-            return null;
-        }
-        const { hunkIndex } = annotation.metadata;
-        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-hunkAnnotation" },
-            React.createElement("button", { type: "button", className: "jp-xtralab-DiffWidget-hunkButton", title: "Discard this hunk's changes", "aria-label": "Discard hunk", onClick: () => void handleDiscardHunk(hunkIndex) },
-                React.createElement(undoIcon.react, { tag: "span", className: "jp-xtralab-DiffWidget-hunkButton-icon", elementSize: "normal" }))));
-    }, [handleDiscardHunk]);
-    const handleResizerPointerDown = React.useCallback((event) => {
-        // Only react to primary-button drags. Right-click / middle-click on
-        // the handle should pass through to the browser default.
-        if (event.button !== 0) {
-            return;
-        }
-        const wrapper = wrapperRef.current;
-        if (wrapper === null) {
-            return;
-        }
-        event.preventDefault();
-        const handle = event.currentTarget;
-        handle.setPointerCapture(event.pointerId);
-        handle.dataset.dragging = 'true';
-        const rect = wrapper.getBoundingClientRect();
-        const startX = event.clientX;
-        const startRatio = leftRatioRef.current;
-        const onPointerMove = (ev) => {
-            if (rect.width <= 0) {
-                return;
-            }
-            const next = startRatio + (ev.clientX - startX) / rect.width;
-            const clamped = Math.max(MIN_SPLIT_RATIO, Math.min(MAX_SPLIT_RATIO, next));
-            setLeftRatio(clamped);
-        };
-        const onPointerEnd = (ev) => {
-            handle.releasePointerCapture(ev.pointerId);
-            delete handle.dataset.dragging;
-            handle.removeEventListener('pointermove', onPointerMove);
-            handle.removeEventListener('pointerup', onPointerEnd);
-            handle.removeEventListener('pointercancel', onPointerEnd);
-            // Only persist on drag-end so a quick drag isn't followed by a
-            // burst of writes for every intermediate position.
-            writeStoredSplitRatio(leftRatioRef.current);
-        };
-        handle.addEventListener('pointermove', onPointerMove);
-        handle.addEventListener('pointerup', onPointerEnd);
-        handle.addEventListener('pointercancel', onPointerEnd);
-    }, []);
-    const handleResizerDoubleClick = React.useCallback(() => {
-        setLeftRatio(DEFAULT_SPLIT_RATIO);
-        writeStoredSplitRatio(DEFAULT_SPLIT_RATIO);
-    }, []);
-    if (state.loading) {
-        return React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "Loading diff\u2026");
-    }
-    if (state.error !== null) {
-        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status", "data-error": "true" }, state.error));
-    }
-    if (state.isBinary) {
-        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "Binary file \u2014 diff not supported."));
-    }
-    // Decide which view to render. The notebook view requires a successful
-    // nbformat parse; if that failed, the toolbar is hidden and we only
-    // show the raw JSON file diff. The toolbar itself is sticky at the top
-    // of the content area, sitting above the scroll viewport.
-    const hasNotebookView = state.notebookDiff !== null;
-    const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
-    const showFileDiff = !showNotebookView && state.metadata !== null;
-    if (!showNotebookView && !showFileDiff) {
-        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, "No content to diff."));
-    }
-    // Custom property set on the diffs-container host. The library's
-    // shadow-root rule consumes it via `var(--xtralab-split-cols, …)` (see
-    // SPLIT_RESIZE_CSS) and recomputes the column tracks instantly. Only
-    // relevant in the file-diff path; the notebook view doesn't use it.
-    const leftPercent = leftRatio * 100;
-    const hostStyle = {
-        '--xtralab-split-cols': `${leftPercent}% ${100 - leftPercent}%`
-    };
-    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-content" },
-        React.createElement("div", { ref: wrapperRef, className: "jp-xtralab-DiffWidget-body" },
-            React.createElement("div", { className: "jp-xtralab-DiffWidget-scroll" }, showNotebookView && state.notebookDiff !== null ? (React.createElement(NotebookDiffView, { diff: state.notebookDiff, dark: dark, rendermime: rendermime })) : showFileDiff && state.metadata !== null ? (React.createElement(FileDiff, { fileDiff: state.metadata, lineAnnotations: lineAnnotations, renderAnnotation: renderAnnotation, style: hostStyle, 
-                // Disable the worker pool: JupyterLab's webpack federation
-                // pipeline doesn't ship the library's
-                // `@pierre/diffs/worker/worker.js` file at a URL the worker
-                // bootstrap can resolve from, so leaving the pool enabled
-                // crashes on instantiation. Running on the main thread is
-                // fine for the small files git diffs typically operate on.
-                disableWorkerPool: true, options: {
-                    diffStyle: 'split',
-                    // Drop the file header — the tab title already shows the
-                    // file name and the panel header carries the change
-                    // context.
-                    disableFileHeader: true,
-                    theme: dark ? 'pierre-dark' : 'pierre-light',
-                    themeType: dark ? 'dark' : 'light',
-                    // Inject the column-resize override into the shadow root
-                    // via the library's `@layer unsafe` channel. Keeping the
-                    // string constant lets the library short-circuit the
-                    // re-render path it uses when this option actually
-                    // changes.
-                    unsafeCSS: SPLIT_RESIZE_CSS
-                } })) : null),
-            showFileDiff ? (React.createElement("div", { className: "jp-xtralab-DiffWidget-resizer", style: { left: `${leftPercent}%` }, role: "separator", "aria-orientation": "vertical", "aria-valuenow": Math.round(leftPercent), "aria-valuemin": Math.round(MIN_SPLIT_RATIO * 100), "aria-valuemax": Math.round(MAX_SPLIT_RATIO * 100), title: "Drag to resize the diff panes (double-click to reset)", onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick })) : null)));
+    }), [canDiscardHunk, contentsManager, onChanged, state.serverPath]);
+    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: state.isBinary, oldText: state.oldText, newText: state.newText, newName: change.path, oldName: (_a = change.from) !== null && _a !== void 0 ? _a : change.path, dark: dark, rendermime: rendermime, notebookViewMode: notebookViewMode, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onMetadataChange: handleMetadataChange, hunkDiscard: hunkDiscard }));
 }
 /**
  * Segmented Notebook/JSON selector mounted into the `MainAreaWidget`
- * toolbar for `.ipynb` diffs. The selector reads from and writes to the
- * `DiffContentWidget` so React state changes (via the diff content) and
- * toolbar interactions stay in sync without either side knowing about
- * the other. The host toolbar widget's visibility is toggled by
- * {@link createGitDiffWidget} based on the same `hasNotebookView`
+ * toolbar for `.ipynb` diffs (launcher path). The selector reads from and
+ * writes to the {@link DiffContentWidget} so React state changes (via the
+ * diff content) and toolbar interactions stay in sync without either side
+ * knowing about the other. The host toolbar widget's visibility is toggled
+ * by {@link createGitDiffWidget} based on the same `hasNotebookView`
  * signal, so this control is always meaningful when it appears.
  */
 class NotebookViewModeToolbarItem extends ReactWidget {
@@ -674,28 +426,30 @@ class NotebookViewModeToolbarItem extends ReactWidget {
         this.addClass('jp-xtralab-DiffWidget-viewModeToolbarItem');
     }
     render() {
-        return React.createElement(NotebookViewModeControl, { content: this._content });
+        return React.createElement(NotebookViewModeToolbarControl, { content: this._content });
     }
 }
-function NotebookViewModeControl(props) {
+function NotebookViewModeToolbarControl(props) {
     const { content } = props;
     const [mode, setMode] = React.useState(() => content.notebookViewMode);
+    const [available, setAvailable] = React.useState(() => content.hasNotebookView);
     React.useEffect(() => {
-        const handler = (_sender, next) => {
+        const onMode = (_sender, next) => {
             setMode(next);
         };
-        content.notebookViewModeChanged.connect(handler);
+        const onAvailable = (_sender, next) => {
+            setAvailable(next);
+        };
+        content.notebookViewModeChanged.connect(onMode);
+        content.hasNotebookViewChanged.connect(onAvailable);
         setMode(content.notebookViewMode);
+        setAvailable(content.hasNotebookView);
         return () => {
-            content.notebookViewModeChanged.disconnect(handler);
+            content.notebookViewModeChanged.disconnect(onMode);
+            content.hasNotebookViewChanged.disconnect(onAvailable);
         };
     }, [content]);
-    if (!content.hasNotebookView) {
-        return React.createElement(React.Fragment, null);
-    }
-    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": "Notebook diff view mode" },
-        React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'notebook', "data-active": mode === 'notebook', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => content.setNotebookViewMode('notebook') }, "Notebook"),
-        React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'json', "data-active": mode === 'json', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => content.setNotebookViewMode('json') }, "JSON")));
+    return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => content.setNotebookViewMode(next) }));
 }
 function formatTitle(change) {
     var _a;

package/lib/git/imageDiff.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+/** The file extensions registered as the xtralab image diff provider. */
+export declare const IMAGE_DIFF_EXTENSIONS: string[];
+/**
+ * The `data:` MIME subtype for a path xtralab renders as an image, or
+ * `null` when the path is not a supported raster image.
+ */
+export declare function imageDataType(path: string): string | null;
+interface IImageDiffViewProps {
+    /** Base64 of the reference (old) revision; empty when added. */
+    reference: string;
+    /** Base64 of the challenger (new) revision; empty when deleted. */
+    challenger: string;
+    /** MIME subtype from {@link imageDataType}. */
+    fileType: string;
+}
+/**
+ * The image comparison surface: a segmented mode selector (reusing the
+ * diff segmented-control styling so it matches the Notebook/JSON toggle)
+ * plus the selected 2-up / swipe / onion-skin view.
+ */
+export declare function ImageDiffView(props: IImageDiffViewProps): React.ReactElement;
+export {};