xtralab 0.7.0 → 0.9.0

package/lib/git/diffWidget.js

@@ -1,186 +1,78 @@
 import * as React from 'react';
-import { MainAreaWidget } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
-import { ReactWidget, ToolbarButton, launchIcon } from '@jupyterlab/ui-components';
+import { Git } from '@jupyterlab/git';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import { getTreeIcon } from '../fileBrowser/icons';
-import { content } from './api';
+import { DIFF_WIDGET_CSS_CLASS, DiffStyleControl, DiffSurface, NotebookViewModeControl, isDarkTheme, isPierreTheme, readStoredDiffStyle, readStoredNotebookViewMode, writeStoredDiffStyle, writeStoredNotebookViewMode } from './diffSurface';
 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}`;
-}
-/**
- * Build the deterministic widget id used for a diff against a particular
- * file/group pair. Reused across plugin and command code so reopening a
- * diff for the same file reveals the existing tab instead of opening a
- * second one.
- */
-export function diffWidgetId(change) {
-    return `xtralab:diff:${change.group}:${change.path}`;
-}
-function toServerPath(repoPath, filePath) {
-    return repoPath.length > 0 ? PathExt.join(repoPath, filePath) : filePath;
-}
-/**
- * Resolve the pair of git references whose `content` should appear on the
- * left and right side of the diff for a given file change. Mirrors VS
- * Code's source control diff: staged-side compares INDEX vs HEAD,
- * unstaged-side compares WORKING vs INDEX, and untracked files have no
- * "previous" version to compare against.
- */
-export function resolveReferences(change) {
-    if (change.status === 'untracked') {
-        return { oldRef: null, newRef: { special: 'WORKING' } };
-    }
-    if (change.group === 'staged') {
-        return { oldRef: { git: 'HEAD' }, newRef: { special: 'INDEX' } };
-    }
-    // Unstaged: WORKING vs INDEX. If the file isn't in the index yet (e.g.
-    // a freshly-`git add`-ed file that has been modified again) the server
-    // returns the HEAD blob for INDEX instead, which is still the right
-    // baseline for the diff.
-    return { oldRef: { special: 'INDEX' }, newRef: { special: 'WORKING' } };
-}
-/**
- * Build a `MainAreaWidget`-hosted diff viewer for a single file change.
- * Wrapping the `ReactWidget` in a `MainAreaWidget` is what gives it the
- * 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;
-    // `widget` is captured by the `onEmpty` closure we pass into the content,
-    // but doesn't exist yet at construction time — declare it up front so the
-    // closure can read it once the widget is wired.
-    let widget = null;
-    const content = new DiffContentWidget({
-        ...options,
-        onEmpty: () => {
-            var _a;
-            if (widget !== null && !widget.isDisposed) {
-                widget.close();
-            }
-            (_a = options.onEmpty) === null || _a === void 0 ? void 0 : _a.call(options);
-        }
-    });
-    widget = new MainAreaWidget({ content });
-    widget.id =
-        options.pinned === true
-            ? pinnedDiffWidgetId(options.change)
-            : PREVIEW_DIFF_WIDGET_ID;
-    widget.title.label = formatTitle(options.change);
-    widget.title.caption = options.change.path;
-    widget.title.closable = true;
-    widget.title.icon = getTreeIcon(options.change.path);
-    widget.title.className = options.pinned === true ? '' : 'jp-mod-preview';
-    const onPinned = (_a = options.onPinned) !== null && _a !== void 0 ? _a : (() => { });
-    widget.addClass(DIFF_WIDGET_CSS_CLASS);
-    // Wire the notebook view-mode selector into the `MainAreaWidget` toolbar
-    // — the proper home for document chrome controls. The toolbar starts
-    // hidden and becomes visible once the React content reports a parsed
-    // notebook diff via `setHasNotebookView`. Plain text / code diffs never
-    // flip that flag, and pin state can hide the toolbar again, so the host
-    // chrome tracks the active mode.
-    const pinButton = new ToolbarButton({
-        icon: launchIcon,
-        tooltip: 'Pin tab',
-        onClick: () => content.pin()
-    });
-    if (content.pinned) {
-        pinButton.hide();
-    }
-    widget.toolbar.addItem('pin', pinButton);
-    widget.toolbar.addItem('notebook-view-mode', new NotebookViewModeToolbarItem(content));
-    const syncToolbarVisibility = () => {
-        if (widget === null || widget.isDisposed) {
-            return;
-        }
-        if (!content.pinned || content.hasNotebookView) {
-            widget.toolbar.show();
-        }
-        else {
-            widget.toolbar.hide();
-        }
-    };
-    const onHasNotebookViewChanged = () => {
-        if (widget === null || widget.isDisposed) {
-            return;
-        }
-        syncToolbarVisibility();
-    };
-    const onPinnedChanged = (sender, value) => {
-        if (widget === null || widget.isDisposed) {
-            return;
-        }
-        void sender;
-        if (value) {
-            pinButton.hide();
-            // Keep toolbar state and title styling consistent for promoted tabs.
-            onPinned(widget);
-            if (widget.isDisposed) {
-                return;
-            }
-            widget.title.className = '';
-        }
-        syncToolbarVisibility();
-    };
-    content.hasNotebookViewChanged.connect(onHasNotebookViewChanged);
-    content.pinnedChanged.connect(onPinnedChanged);
-    syncToolbarVisibility();
-    widget.disposed.connect(() => {
-        content.hasNotebookViewChanged.disconnect(onHasNotebookViewChanged);
-        content.pinnedChanged.disconnect(onPinnedChanged);
-    });
-    return widget;
-}
-export function updateGitDiffWidget(widget, change) {
-    widget.content.setChange(change);
-    widget.title.label = formatTitle(change);
-    widget.title.caption = change.path;
-    widget.title.icon = getTreeIcon(change.path);
-}
 /**
- * The actual React-rendered region of the diff viewer. Held in its own
- * `ReactWidget` so the surrounding `MainAreaWidget` can manage chrome
- * without React having to know about it.
- *
- * Owns the persistent UI state that the surrounding `MainAreaWidget`
- * toolbar needs to read and write (`notebookViewMode` and whether a
- * notebook view is even available for the current file). Storing this on
- * the widget — and exposing change signals — lets the toolbar widget and
- * the React content stay in sync without either side knowing about the
- * other.
+ * Shared diff widget used by the launcher and by `jupyterlab-git`.
  */
-export class DiffContentWidget extends ReactWidget {
-    constructor(options) {
+export class XtralabDiffWidget extends ReactWidget {
+    constructor(model, context) {
         super();
+        this._reloadNonce = 0;
+        this._pendingRefresh = null;
         this._notebookViewModeChanged = new Signal(this);
         this._hasNotebookView = false;
         this._hasNotebookViewChanged = new Signal(this);
-        this._pinnedChanged = new Signal(this);
-        this._options = options;
-        this._pinned = options.pinned === true;
+        this._diffStyleChanged = new Signal(this);
+        this._fileDiffActive = false;
+        this._fileDiffActiveChanged = new Signal(this);
+        this._emptied = new Signal(this);
+        this._model = model;
+        this._context = context;
         this._notebookViewMode = readStoredNotebookViewMode();
+        this._diffStyle = readStoredDiffStyle();
+        // Reuse jupyterlab-git's host sizing while applying xtralab styling.
+        this.addClass('jp-git-diff-root');
+        this.addClass(DIFF_WIDGET_CSS_CLASS);
+    }
+    get model() {
+        return this._model;
+    }
+    /**
+     * Swap the rendered model when the launcher reuses its preview tab.
+     */
+    setModel(model) {
+        this._model = model;
+        this.update();
+    }
+    /**
+     * This renderer has no merge editor, so it never blocks mark-as-resolved.
+     */
+    get isFileResolved() {
+        return true;
+    }
+    /**
+     * Return the content jupyterlab-git should save for mark-as-resolved.
+     */
+    async getResolvedFile() {
+        const source = this._model.hasConflict === true && this._model.base !== undefined
+            ? this._model.base
+            : this._model.challenger;
+        const content = await source.content();
+        return {
+            type: 'file',
+            format: imageDataType(this._model.filename) !== null ? 'base64' : 'text',
+            content
+        };
     }
-    /** The change this widget renders, used by callers to identify the widget. */
-    get change() {
-        return this._options.change;
+    /**
+     * Re-pull both sides of the model and re-render.
+     */
+    async refresh() {
+        const done = new PromiseDelegate();
+        this._pendingRefresh = done;
+        this._reloadNonce += 1;
+        this.update();
+        await done.promise;
     }
-    /** The user's current rendered-vs-JSON view choice for notebook diffs. */
     get notebookViewMode() {
         return this._notebookViewMode;
     }
-    /** Update the notebook view mode and persist it across sessions. */
     setNotebookViewMode(mode) {
         if (mode === this._notebookViewMode) {
             return;
@@ -189,15 +81,9 @@ export class DiffContentWidget extends ReactWidget {
         writeStoredNotebookViewMode(mode);
         this._notebookViewModeChanged.emit(mode);
     }
-    /** Emits whenever {@link notebookViewMode} changes. */
     get notebookViewModeChanged() {
         return this._notebookViewModeChanged;
     }
-    /**
-     * Whether a rendered notebook view is currently available. Set by the
-     * React content once it has parsed the diff; the toolbar reads this to
-     * decide whether to show the view-mode selector.
-     */
     get hasNotebookView() {
         return this._hasNotebookView;
     }
@@ -208,109 +94,119 @@ export class DiffContentWidget extends ReactWidget {
         this._hasNotebookView = value;
         this._hasNotebookViewChanged.emit(value);
     }
-    /** Emits whenever {@link hasNotebookView} changes. */
     get hasNotebookViewChanged() {
         return this._hasNotebookViewChanged;
     }
-    get pinned() {
-        return this._pinned;
+    get diffStyle() {
+        return this._diffStyle;
     }
-    pin() {
-        if (this._pinned) {
+    setDiffStyle(style) {
+        if (style === this._diffStyle) {
             return;
         }
-        this._pinned = true;
-        this._pinnedChanged.emit(true);
+        this._diffStyle = style;
+        writeStoredDiffStyle(style);
+        this._diffStyleChanged.emit(style);
     }
-    get pinnedChanged() {
-        return this._pinnedChanged;
+    get diffStyleChanged() {
+        return this._diffStyleChanged;
     }
-    setChange(change) {
-        this._options = { ...this._options, change };
-        this.update();
+    /**
+     * Whether the Split/Unified toolbar selector currently applies.
+     */
+    get fileDiffActive() {
+        return this._fileDiffActive;
+    }
+    setFileDiffActive(value) {
+        if (value === this._fileDiffActive) {
+            return;
+        }
+        this._fileDiffActive = value;
+        this._fileDiffActiveChanged.emit(value);
+    }
+    get fileDiffActiveChanged() {
+        return this._fileDiffActiveChanged;
+    }
+    /**
+     * Emitted when a post-discard reload leaves the diff with no hunks.
+     */
+    get emptied() {
+        return this._emptied;
+    }
+    notifyEmptied() {
+        this._emptied.emit();
+    }
+    settleRefresh() {
+        const pending = this._pendingRefresh;
+        this._pendingRefresh = null;
+        pending === null || pending === void 0 ? void 0 : pending.resolve();
+    }
+    get reloadNonce() {
+        return this._reloadNonce;
+    }
+    get context() {
+        return this._context;
     }
     render() {
-        return React.createElement(DiffViewer, { ...this._options, widget: this });
+        return React.createElement(ModelDiffView, { widget: this });
     }
 }
-function DiffViewer(props) {
-    var _a;
-    const { repoPath, change, themeManager, contentsManager, rendermime, onChanged, onEmpty, widget } = props;
+function ModelDiffView(props) {
+    var _a, _b;
+    const { widget } = props;
+    const model = widget.model;
+    const { contentsManager, rendermime, themeManager } = widget.context;
+    const nonce = widget.reloadNonce;
     const [state, setState] = React.useState({
         loading: true,
         oldText: '',
         newText: '',
-        serverPath: '',
-        isBinary: false,
         error: null
     });
-    // 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.
-    const [reloadKey, setReloadKey] = React.useState(0);
-    // Mirror the widget's notebook view mode into local state so that
-    // toolbar-driven changes re-render the diff. The widget owns the
-    // canonical value (so the toolbar can read and write it without going
-    // through React); the React copy is just a cache for rendering.
-    const [notebookViewMode, setNotebookViewModeLocal] = React.useState(() => widget.notebookViewMode);
+    // Mirror toolbar-driven notebook view changes into React state.
+    const [notebookViewMode, setNotebookViewMode] = React.useState(() => widget.notebookViewMode);
     React.useEffect(() => {
         const handler = (_sender, mode) => {
-            setNotebookViewModeLocal(mode);
+            setNotebookViewMode(mode);
         };
         widget.notebookViewModeChanged.connect(handler);
-        // Re-sync in case the widget changed before this effect ran.
-        setNotebookViewModeLocal(widget.notebookViewMode);
+        setNotebookViewMode(widget.notebookViewMode);
         return () => {
             widget.notebookViewModeChanged.disconnect(handler);
         };
     }, [widget]);
-    // Tell the host widget whether a rendered notebook view is currently
-    // available. The toolbar item that lives in the `MainAreaWidget`
-    // 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.
     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.
+    // Mirror toolbar-driven diff-style changes into React state.
+    const [diffStyle, setDiffStyle] = React.useState(() => widget.diffStyle);
     React.useEffect(() => {
-        if (!state.loading &&
-            state.error === null &&
-            !state.isBinary &&
-            hunkCount === 0 &&
-            reloadKey > 0) {
-            onEmpty === null || onEmpty === void 0 ? void 0 : onEmpty();
-        }
-    }, [
-        state.loading,
-        state.error,
-        state.isBinary,
-        hunkCount,
-        reloadKey,
-        onEmpty
-    ]);
+        const handler = (_sender, style) => {
+            setDiffStyle(style);
+        };
+        widget.diffStyleChanged.connect(handler);
+        setDiffStyle(widget.diffStyle);
+        return () => {
+            widget.diffStyleChanged.disconnect(handler);
+        };
+    }, [widget]);
+    const handleFileDiffActiveChange = React.useCallback((active) => {
+        widget.setFileDiffActive(active);
+    }, [widget]);
     const [dark, setDark] = React.useState(() => isDarkTheme(themeManager));
-    // Track theme changes so the diff viewer recolors with the rest of
-    // JupyterLab. We listen on `IThemeManager.themeChanged` when available
-    // and fall back to a `<body>` attribute observer otherwise.
+    const [pierre, setPierre] = React.useState(() => isPierreTheme(themeManager));
     React.useEffect(() => {
+        const sync = () => {
+            setDark(isDarkTheme(themeManager));
+            setPierre(isPierreTheme(themeManager));
+        };
         if (themeManager !== null) {
-            const handler = () => setDark(isDarkTheme(themeManager));
-            themeManager.themeChanged.connect(handler);
+            themeManager.themeChanged.connect(sync);
             return () => {
-                themeManager.themeChanged.disconnect(handler);
+                themeManager.themeChanged.disconnect(sync);
             };
         }
-        const observer = new MutationObserver(() => setDark(isDarkTheme(themeManager)));
+        const observer = new MutationObserver(sync);
         observer.observe(document.body, {
             attributes: true,
             attributeFilter: ['data-jp-theme-light']
@@ -319,55 +215,40 @@ function DiffViewer(props) {
             observer.disconnect();
         };
     }, [themeManager]);
+    // Image diffs use the server's base64 payloads; other binaries show a placeholder.
+    const isImage = React.useMemo(() => imageDataType(model.filename) !== null, [model.filename]);
+    const isBinary = model.isBinary === true && !isImage;
+    // Used by the launcher to auto-close an emptied diff after discard.
+    const [hunkCount, setHunkCount] = React.useState(null);
+    const handleMetadataChange = React.useCallback((info) => {
+        setHunkCount(info.hunkCount);
+    }, []);
+    // Fetch both sides whenever the model or reload nonce changes.
     React.useEffect(() => {
         let cancelled = false;
-        const serverPath = toServerPath(repoPath, change.path);
-        setState({
-            loading: true,
-            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;
+        // Non-image binaries do not need content fetches.
+        if (isBinary) {
+            setState({ loading: false, oldText: '', newText: '', error: null });
+            // An in-flight `refresh()` still has to resolve.
+            widget.settleRefresh();
+            return () => {
+                cancelled = true;
+            };
+        }
+        setState({ loading: true, oldText: '', newText: '', error: null });
         void (async () => {
-            var _a, _b, _c;
             try {
-                if (change.isBinary === true && !isImage) {
-                    if (cancelled) {
-                        return;
-                    }
-                    setState({
-                        loading: false,
-                        oldText: '',
-                        newText: '',
-                        serverPath,
-                        isBinary: true,
-                        error: null
-                    });
-                    return;
-                }
-                const fetchOld = oldRef === null
-                    ? Promise.resolve({ content: '' })
-                    : content(repoPath, (_a = change.from) !== null && _a !== void 0 ? _a : change.path, oldRef);
-                const fetchNew = newRef === null
-                    ? Promise.resolve({ content: '' })
-                    : content(repoPath, change.path, newRef);
-                const [oldRes, newRes] = await Promise.all([fetchOld, fetchNew]);
+                const [oldText, newText] = await Promise.all([
+                    model.reference.content(),
+                    model.challenger.content()
+                ]);
                 if (cancelled) {
                     return;
                 }
                 setState({
                     loading: false,
-                    oldText: (_b = oldRes.content) !== null && _b !== void 0 ? _b : '',
-                    newText: (_c = newRes.content) !== null && _c !== void 0 ? _c : '',
-                    serverPath,
-                    isBinary: false,
+                    oldText: oldText !== null && oldText !== void 0 ? oldText : '',
+                    newText: newText !== null && newText !== void 0 ? newText : '',
                     error: null
                 });
             }
@@ -379,60 +260,67 @@ function DiffViewer(props) {
                     loading: false,
                     oldText: '',
                     newText: '',
-                    serverPath,
-                    isBinary: false,
                     error: err instanceof Error ? err.message : String(err)
                 });
             }
+            finally {
+                if (!cancelled) {
+                    // Let `refresh()` settle once content has loaded.
+                    widget.settleRefresh();
+                }
+            }
         })();
         return () => {
             cancelled = true;
         };
-    }, [repoPath, change, reloadKey]);
-    // 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.
-    const canDiscardHunk = change.group === 'unstaged' && change.status !== 'untracked';
+    }, [widget, model, nonce, isBinary]);
+    // Only close after a reload, not for a file that opens already empty.
+    React.useEffect(() => {
+        if (!state.loading &&
+            state.error === null &&
+            !isBinary &&
+            hunkCount === 0 &&
+            nonce > 0) {
+            widget.notifyEmptied();
+        }
+    }, [state.loading, state.error, isBinary, hunkCount, nonce, widget]);
+    // The launcher sets `canDiscard`; jupyterlab-git models fall back to source.
+    const canDiscardHunk = (_a = model.canDiscard) !== null && _a !== void 0 ? _a : (model.challenger.source === Git.Diff.SpecialRef.WORKING &&
+        model.hasConflict !== true);
+    const serverPath = React.useMemo(() => { var _a; return PathExt.join((_a = model.repositoryPath) !== null && _a !== void 0 ? _a : '', model.filename); }, [model.repositoryPath, model.filename]);
     const hunkDiscard = React.useMemo(() => ({
         enabled: canDiscardHunk,
         save: async (text) => {
-            await contentsManager.save(state.serverPath, {
+            await contentsManager.save(serverPath, {
                 type: 'file',
                 format: 'text',
                 content: text
             });
         },
         onAfterSave: () => {
-            onChanged();
-            setReloadKey(key => key + 1);
+            // Re-pull so the diff reflects the reverted hunk.
+            void widget.refresh();
         }
-    }), [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 }));
+    }), [canDiscardHunk, contentsManager, serverPath, widget]);
+    return (React.createElement(DiffSurface, { loading: state.loading, error: state.error, isBinary: isBinary, oldText: state.oldText, newText: state.newText, newName: model.filename, oldName: (_b = model.oldFilename) !== null && _b !== void 0 ? _b : model.filename, dark: dark, pierreTheme: pierre, rendermime: rendermime, notebookViewMode: notebookViewMode, diffStyle: diffStyle, onNotebookAvailabilityChange: handleNotebookAvailabilityChange, onFileDiffActiveChange: handleFileDiffActiveChange, onMetadataChange: handleMetadataChange, hunkDiscard: hunkDiscard }));
 }
 /**
- * Segmented Notebook/JSON selector mounted into the `MainAreaWidget`
- * 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.
+ * Notebook/JSON toggle mounted into a host-owned toolbar.
  */
 class NotebookViewModeToolbarItem extends ReactWidget {
-    constructor(content) {
+    constructor(widget) {
         super();
-        this._content = content;
+        this._widget = widget;
         this.addClass('jp-xtralab-DiffWidget-viewModeToolbarItem');
     }
     render() {
-        return React.createElement(NotebookViewModeToolbarControl, { content: this._content });
+        return React.createElement(NotebookViewModeToolbarControl, { widget: this._widget });
     }
 }
 function NotebookViewModeToolbarControl(props) {
-    const { content } = props;
-    const [mode, setMode] = React.useState(() => content.notebookViewMode);
-    const [available, setAvailable] = React.useState(() => content.hasNotebookView);
+    const { widget } = props;
+    const [mode, setMode] = React.useState(() => widget.notebookViewMode);
+    const [available, setAvailable] = React.useState(() => widget.hasNotebookView);
     React.useEffect(() => {
         const onMode = (_sender, next) => {
             setMode(next);
@@ -440,20 +328,56 @@ function NotebookViewModeToolbarControl(props) {
         const onAvailable = (_sender, next) => {
             setAvailable(next);
         };
-        content.notebookViewModeChanged.connect(onMode);
-        content.hasNotebookViewChanged.connect(onAvailable);
-        setMode(content.notebookViewMode);
-        setAvailable(content.hasNotebookView);
+        widget.notebookViewModeChanged.connect(onMode);
+        widget.hasNotebookViewChanged.connect(onAvailable);
+        setMode(widget.notebookViewMode);
+        setAvailable(widget.hasNotebookView);
         return () => {
-            content.notebookViewModeChanged.disconnect(onMode);
-            content.hasNotebookViewChanged.disconnect(onAvailable);
+            widget.notebookViewModeChanged.disconnect(onMode);
+            widget.hasNotebookViewChanged.disconnect(onAvailable);
         };
-    }, [content]);
-    return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => content.setNotebookViewMode(next) }));
+    }, [widget]);
+    return (React.createElement(NotebookViewModeControl, { mode: mode, available: available, onChange: next => widget.setNotebookViewMode(next) }));
 }
-function formatTitle(change) {
-    var _a;
-    const name = (_a = change.path.split('/').pop()) !== null && _a !== void 0 ? _a : change.path;
-    const groupLabel = change.group === 'staged' ? 'Staged' : 'Working';
-    return `${name} (${groupLabel})`;
+/**
+ * Split/Unified toggle mounted into a host-owned toolbar.
+ */
+class DiffStyleToolbarItem extends ReactWidget {
+    constructor(widget) {
+        super();
+        this._widget = widget;
+        this.addClass('jp-xtralab-DiffWidget-diffStyleToolbarItem');
+    }
+    render() {
+        return React.createElement(DiffStyleToolbarControl, { widget: this._widget });
+    }
+}
+function DiffStyleToolbarControl(props) {
+    const { widget } = props;
+    const [style, setStyle] = React.useState(() => widget.diffStyle);
+    const [available, setAvailable] = React.useState(() => widget.fileDiffActive);
+    React.useEffect(() => {
+        const onStyle = (_sender, next) => {
+            setStyle(next);
+        };
+        const onAvailable = (_sender, next) => {
+            setAvailable(next);
+        };
+        widget.diffStyleChanged.connect(onStyle);
+        widget.fileDiffActiveChanged.connect(onAvailable);
+        setStyle(widget.diffStyle);
+        setAvailable(widget.fileDiffActive);
+        return () => {
+            widget.diffStyleChanged.disconnect(onStyle);
+            widget.fileDiffActiveChanged.disconnect(onAvailable);
+        };
+    }, [widget]);
+    return (React.createElement(DiffStyleControl, { diffStyle: style, available: available, onChange: next => widget.setDiffStyle(next) }));
+}
+/**
+ * Mount the shared diff toolbar controls into a host-owned toolbar.
+ */
+export function addDiffToolbarItems(toolbar, widget) {
+    toolbar.addItem('xtralab-notebook-view-mode', new NotebookViewModeToolbarItem(widget));
+    toolbar.addItem('xtralab-diff-style', new DiffStyleToolbarItem(widget));
 }