xtralab 0.15.1 → 0.15.2

package/lib/git/diffPreferences.js

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Token } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+export const MIN_SPLIT_RATIO = 0.1;
+export const MAX_SPLIT_RATIO = 0.9;
+export const DEFAULT_SPLIT_RATIO = 0.5;
+const SPLIT_RATIO_STATE_KEY = 'xtralab:git-diff:split-ratio';
+export const IDiffPreferences = new Token('xtralab:IDiffPreferences', 'Display choices shared by the git diff views.');
+const SETTING_KEYS = [
+    'diffStyle',
+    'diffStyleControl',
+    'lineWrap',
+    'notebookViewMode',
+    'imageViewMode'
+];
+/**
+ * {@link IDiffPreferences} backed by the settings registry and the state
+ * database. Without them it keeps the values in memory only.
+ */
+export class DiffPreferences {
+    constructor() {
+        this._values = {
+            diffStyle: 'split',
+            diffStyleControl: 'buttons',
+            lineWrap: false,
+            notebookViewMode: 'notebook',
+            imageViewMode: '2-up',
+            splitRatio: DEFAULT_SPLIT_RATIO
+        };
+        this._changed = new Signal(this);
+        this._settings = null;
+        this._state = null;
+    }
+    get values() {
+        return this._values;
+    }
+    get changed() {
+        return this._changed;
+    }
+    update(values) {
+        var _a, _b;
+        if (!this._apply(values)) {
+            return;
+        }
+        for (const key of SETTING_KEYS) {
+            if (key in values) {
+                (_a = this._settings) === null || _a === void 0 ? void 0 : _a.set(key, this._values[key]).catch(reason => {
+                    console.error(`xtralab: failed to save the diff ${key}`, reason);
+                });
+            }
+        }
+        if ('splitRatio' in values) {
+            (_b = this._state) === null || _b === void 0 ? void 0 : _b.save(SPLIT_RATIO_STATE_KEY, this._values.splitRatio).catch(reason => {
+                console.error('xtralab: failed to save the diff split', reason);
+            });
+        }
+    }
+    /**
+     * Read the toggles from the plugin settings and follow their changes.
+     */
+    connectSettings(settings) {
+        this._settings = settings;
+        const sync = () => {
+            this._apply(settings.composite);
+        };
+        sync();
+        settings.changed.connect(sync);
+    }
+    /**
+     * Restore the split width from the state database and save it there.
+     */
+    async connectState(state) {
+        this._state = state;
+        const ratio = await state.fetch(SPLIT_RATIO_STATE_KEY);
+        if (typeof ratio === 'number' &&
+            ratio >= MIN_SPLIT_RATIO &&
+            ratio <= MAX_SPLIT_RATIO) {
+            this._apply({ splitRatio: ratio });
+        }
+    }
+    /**
+     * Merge values without persisting them; return whether one changed.
+     */
+    _apply(values) {
+        const next = { ...this._values, ...values };
+        const keys = Object.keys(next);
+        if (keys.every(key => next[key] === this._values[key])) {
+            return false;
+        }
+        this._values = next;
+        this._changed.emit();
+        return true;
+    }
+}
+/**
+ * Re-render on every preference change and return the current values.
+ */
+export function useDiffPreferences(preferences) {
+    const subscribe = React.useCallback((onChange) => {
+        const slot = () => onChange();
+        preferences.changed.connect(slot);
+        return () => {
+            preferences.changed.disconnect(slot);
+        };
+    }, [preferences]);
+    return React.useSyncExternalStore(subscribe, () => preferences.values);
+}

package/lib/git/diffProvider.js

@@ -3,6 +3,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 import { IGitExtension } from '@jupyterlab/git';
 import { IAskAgent } from '../askAgent/tokens';
+import { DiffPreferences, IDiffPreferences } from './diffPreferences';
 import { XtralabDiffWidget, addDiffToolbarItems } from './diffWidget';
 import { IMAGE_DIFF_EXTENSIONS } from './imageDiff';
 /**
@@ -22,14 +23,21 @@ const diffProviderPlugin = {
     description: "Replaces jupyterlab-git's notebook, text and image diff plugins with xtralab's renderer.",
     autoStart: true,
     requires: [IGitExtension],
-    optional: [IRenderMimeRegistry, IThemeManager, ITranslator, IAskAgent],
-    activate: (app, gitExtension, rendermime, themeManager, translator, askAgent) => {
+    optional: [
+        IRenderMimeRegistry,
+        IThemeManager,
+        ITranslator,
+        IAskAgent,
+        IDiffPreferences
+    ],
+    activate: (app, gitExtension, rendermime, themeManager, translator, askAgent, preferences) => {
         const trans = (translator !== null && translator !== void 0 ? translator : nullTranslator).load('jupyterlab');
         const factory = makeXtralabDiffFactory({
             contentsManager: app.serviceManager.contents,
             rendermime,
             themeManager,
             askAgent,
+            preferences: preferences !== null && preferences !== void 0 ? preferences : new DiffPreferences(),
             trans
         });
         // Use one shared factory; the surface detects notebooks/images by filename.

package/lib/git/diffSurface.d.ts

@@ -3,25 +3,8 @@ import { IThemeManager } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import type { TranslationBundle } from '@jupyterlab/translation';
 import { type SelectedLineRange } from '@pierre/diffs';
+import { type DiffStyle, type DiffStyleControlMode, type ImageDiffViewMode, type NotebookDiffViewMode } from './diffPreferences';
 export declare const DIFF_WIDGET_CSS_CLASS = "jp-xtralab-DiffWidget";
-export type DiffStyle = 'split' | 'unified';
-/**
- * Read the persisted diff style, defaulting to `'split'`.
- */
-export declare function readStoredDiffStyle(): DiffStyle;
-/**
- * Persist the diff style to local storage (best-effort).
- */
-export declare function writeStoredDiffStyle(style: DiffStyle): void;
-export type NotebookDiffViewMode = 'notebook' | 'json';
-/**
- * Read the persisted notebook view mode, defaulting to `'notebook'`.
- */
-export declare function readStoredNotebookViewMode(): NotebookDiffViewMode;
-/**
- * Persist the notebook view mode to local storage (best-effort).
- */
-export declare function writeStoredNotebookViewMode(mode: NotebookDiffViewMode): void;
 /**
  * Dark-theme check via `IThemeManager`, falling back to the
  * `data-jp-theme-light` body attribute for hosts without the token.
@@ -101,6 +84,26 @@ interface IDiffSurfaceProps {
      * Split vs unified layout for the textual file diff (host-controlled).
      */
     diffStyle: DiffStyle;
+    /**
+     * Whether long lines wrap instead of scrolling horizontally (host-controlled).
+     */
+    lineWrap: boolean;
+    /**
+     * Left pane width in split view, as a fraction of the diff width (host-controlled).
+     */
+    splitRatio: number;
+    /**
+     * Called when the user finishes resizing the split panes.
+     */
+    onSplitRatioChange: (ratio: number) => void;
+    /**
+     * 2-up, swipe or onion view for image diffs (host-controlled).
+     */
+    imageViewMode: ImageDiffViewMode;
+    /**
+     * Called when the user picks another image view mode.
+     */
+    onImageViewModeChange: (mode: ImageDiffViewMode) => void;
     /**
      * Fires when rendered-notebook availability changes so the host can toggle its Notebook/JSON control.
      */
@@ -145,13 +148,25 @@ export declare function NotebookViewModeControl(props: {
     trans: TranslationBundle;
 }): React.ReactElement;
 /**
- * Segmented Split/Unified selector; mirrors {@link NotebookViewModeControl}.
+ * Split/Unified selector: two segmented buttons, or with `control: 'toggle'`
+ * one button that shows the layout it switches to.
  * `available` mirrors the surface's `onFileDiffActiveChange`.
  */
 export declare function DiffStyleControl(props: {
     diffStyle: DiffStyle;
+    control: DiffStyleControlMode;
     available: boolean;
     onChange: (style: DiffStyle) => void;
     trans: TranslationBundle;
 }): React.ReactElement;
+/**
+ * Line-wrap toggle styled as a one-button segmented control.
+ * `available` mirrors the surface's `onFileDiffActiveChange`.
+ */
+export declare function LineWrapControl(props: {
+    lineWrap: boolean;
+    available: boolean;
+    onChange: (wrap: boolean) => void;
+    trans: TranslationBundle;
+}): React.ReactElement;
 export {};

package/lib/git/diffSurface.js

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { undoIcon } from '@jupyterlab/ui-components';
 import { FileDiff } from '@pierre/diffs/react';
+import { IconDiffSplit, IconDiffUnified, IconWordWrap } from '@pierre/icons';
 import { diffAcceptRejectHunk, parseDiffFromFile } from '@pierre/diffs';
 import { ImageDiffView, imageDataType } from './imageDiff';
 import { buildNotebookDiff, NotebookDiffView } from './notebookDiff';
-import { resolveDiffTheme } from './diffTheme';
+import { DEFAULT_SPLIT_RATIO, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO } from './diffPreferences';
+import { DIFF_SCROLLBAR_CSS, resolveDiffTheme } from './diffTheme';
 export const DIFF_WIDGET_CSS_CLASS = 'jp-xtralab-DiffWidget';
-const SPLIT_RATIO_STORAGE_KEY = 'xtralab:diff-split-ratio';
-const MIN_SPLIT_RATIO = 0.1;
-const MAX_SPLIT_RATIO = 0.9;
-const DEFAULT_SPLIT_RATIO = 0.5;
 /**
  * Injected via the `unsafeCSS` option into the shadow root's `@layer
  * unsafe`, beating the library's base rule that hardcodes `1fr 1fr`. Reads
@@ -19,86 +17,7 @@ const DEFAULT_SPLIT_RATIO = 0.5;
 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 can throw in privacy mode or sandboxed contexts.
-    }
-    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 DIFF_STYLE_STORAGE_KEY = 'xtralab:diff-style';
-/**
- * Read the persisted diff style, defaulting to `'split'`.
- */
-export function readStoredDiffStyle() {
-    try {
-        const raw = window.localStorage.getItem(DIFF_STYLE_STORAGE_KEY);
-        if (raw === 'split' || raw === 'unified') {
-            return raw;
-        }
-    }
-    catch (_a) {
-        // See readStoredSplitRatio.
-    }
-    return 'split';
-}
-/**
- * Persist the diff style to local storage (best-effort).
- */
-export function writeStoredDiffStyle(style) {
-    try {
-        window.localStorage.setItem(DIFF_STYLE_STORAGE_KEY, style);
-    }
-    catch (_a) {
-        // Best-effort.
-    }
-}
-const NOTEBOOK_DIFF_VIEW_MODE_STORAGE_KEY = 'xtralab:notebook-diff-view-mode';
-/**
- * Read the persisted notebook view mode, defaulting to `'notebook'`.
- */
-export 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.
-    }
-    return 'notebook';
-}
-/**
- * Persist the notebook view mode to local storage (best-effort).
- */
-export function writeStoredNotebookViewMode(mode) {
-    try {
-        window.localStorage.setItem(NOTEBOOK_DIFF_VIEW_MODE_STORAGE_KEY, mode);
-    }
-    catch (_a) {
-        // Best-effort.
-    }
-}
+const DIFF_SURFACE_CSS = `${SPLIT_RESIZE_CSS}\n${DIFF_SCROLLBAR_CSS}`;
 /**
  * Extension-only check; a false positive is harmless because
  * {@link buildNotebookDiff} validates the JSON and the file diff is the fallback.
@@ -128,7 +47,7 @@ export function isPierreTheme(themeManager) {
  * Shared renderer for text, notebook and image diffs.
  */
 export function DiffSurface(props) {
-    const { loading, error, isBinary, oldText, newText, newName, oldName, dark, pierreTheme, rendermime, notebookViewMode, diffStyle, onNotebookAvailabilityChange, onFileDiffActiveChange, onMetadataChange, hunkDiscard, onLineAsk, trans } = props;
+    const { loading, error, isBinary, oldText, newText, newName, oldName, dark, pierreTheme, rendermime, notebookViewMode, diffStyle, lineWrap, splitRatio, onSplitRatioChange, imageViewMode, onImageViewModeChange, onNotebookAvailabilityChange, onFileDiffActiveChange, onMetadataChange, hunkDiscard, onLineAsk, trans } = props;
     const hasContent = !loading && error === null && !isBinary;
     // For raster images the host passes both sides as base64 in oldText/newText.
     const imageType = React.useMemo(() => imageDataType(newName), [newName]);
@@ -167,7 +86,11 @@ export function DiffSurface(props) {
     React.useEffect(() => {
         onFileDiffActiveChange === null || onFileDiffActiveChange === void 0 ? void 0 : onFileDiffActiveChange(showFileDiff);
     }, [onFileDiffActiveChange, showFileDiff]);
-    const [leftRatio, setLeftRatio] = React.useState(() => readStoredSplitRatio());
+    // Local while dragging; the host hears the ratio when a drag ends.
+    const [leftRatio, setLeftRatio] = React.useState(splitRatio);
+    React.useEffect(() => {
+        setLeftRatio(splitRatio);
+    }, [splitRatio]);
     const wrapperRef = React.useRef(null);
     // Drag listeners read the live ratio from a ref to avoid stale captures.
     const leftRatioRef = React.useRef(leftRatio);
@@ -248,16 +171,16 @@ export function DiffSurface(props) {
             handle.removeEventListener('pointermove', onPointerMove);
             handle.removeEventListener('pointerup', onPointerEnd);
             handle.removeEventListener('pointercancel', onPointerEnd);
-            writeStoredSplitRatio(leftRatioRef.current);
+            onSplitRatioChange(leftRatioRef.current);
         };
         handle.addEventListener('pointermove', onPointerMove);
         handle.addEventListener('pointerup', onPointerEnd);
         handle.addEventListener('pointercancel', onPointerEnd);
-    }, []);
+    }, [onSplitRatioChange]);
     const handleResizerDoubleClick = React.useCallback(() => {
         setLeftRatio(DEFAULT_SPLIT_RATIO);
-        writeStoredSplitRatio(DEFAULT_SPLIT_RATIO);
-    }, []);
+        onSplitRatioChange(DEFAULT_SPLIT_RATIO);
+    }, [onSplitRatioChange]);
     const handleResizerKeyDown = React.useCallback((event) => {
         const step = event.shiftKey ? 0.1 : 0.01;
         let next = null;
@@ -281,8 +204,8 @@ export function DiffSurface(props) {
         event.preventDefault();
         const clamped = Math.max(MIN_SPLIT_RATIO, Math.min(MAX_SPLIT_RATIO, next));
         setLeftRatio(clamped);
-        writeStoredSplitRatio(clamped);
-    }, []);
+        onSplitRatioChange(clamped);
+    }, [onSplitRatioChange]);
     if (loading) {
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, trans.__('Loading diff…')));
     }
@@ -294,12 +217,15 @@ export function DiffSurface(props) {
     }
     if (imageType !== null) {
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-content" },
-            React.createElement(ImageDiffView, { reference: oldText, challenger: newText, fileType: imageType, trans: trans })));
+            React.createElement(ImageDiffView, { reference: oldText, challenger: newText, fileType: imageType, mode: imageViewMode, onModeChange: onImageViewModeChange, trans: trans })));
     }
     if (!showNotebookView && !showFileDiff) {
         return (React.createElement("div", { className: "jp-xtralab-DiffWidget-status" }, trans.__('No content to diff.')));
     }
     const leftPercent = leftRatio * 100;
+    // The wrapped split grid sizes its gutter tracks to their content, so a
+    // percentage split cannot line up with the handle.
+    const showResizer = showFileDiff && diffStyle === 'split' && !lineWrap;
     const hostStyle = {
         '--xtralab-split-cols': `${leftPercent}% ${100 - leftPercent}%`
     };
@@ -310,11 +236,12 @@ export function DiffSurface(props) {
                 // at a resolvable URL, so the pool crashes; run on the main thread.
                 disableWorkerPool: true, options: {
                     diffStyle,
+                    overflow: lineWrap ? 'wrap' : 'scroll',
                     disableFileHeader: true,
                     theme: resolveDiffTheme(dark, pierreTheme),
                     themeType: dark ? 'dark' : 'light',
                     // Constant string lets the library skip its unsafeCSS re-render path.
-                    unsafeCSS: SPLIT_RESIZE_CSS,
+                    unsafeCSS: DIFF_SURFACE_CSS,
                     ...(onLineAsk !== undefined
                         ? {
                             enableLineSelection: true,
@@ -323,7 +250,7 @@ export function DiffSurface(props) {
                         }
                         : {})
                 } })) : null),
-            showFileDiff && diffStyle === 'split' ? (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), "aria-label": trans.__('Resize the diff panes'), tabIndex: 0, title: trans.__('Drag to resize the diff panes (double-click to reset)'), onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick, onKeyDown: handleResizerKeyDown })) : null)));
+            showResizer ? (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), "aria-label": trans.__('Resize the diff panes'), tabIndex: 0, title: trans.__('Drag to resize the diff panes (double-click to reset)'), onPointerDown: handleResizerPointerDown, onDoubleClick: handleResizerDoubleClick, onKeyDown: handleResizerKeyDown })) : null)));
 }
 /**
  * Segmented Notebook/JSON selector. Hosts mount it into their own toolbar
@@ -339,32 +266,39 @@ export function NotebookViewModeControl(props) {
         React.createElement("button", { type: "button", role: "tab", "aria-selected": mode === 'json', "data-active": mode === 'json', className: "jp-xtralab-DiffWidget-segmentedButton", onClick: () => onChange('json') }, trans.__('JSON'))));
 }
 /**
- * Split / unified glyphs inlined from the `@pierre/diffs` icon sprite so
- * the toggle matches the library's docs site without the sprite sheet;
- * `currentColor` lets the button styling drive the fill.
- */
-function DiffSplitIcon() {
-    return (React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" },
-        React.createElement("path", { d: "M14 0H8.5v16H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m-1.5 6.5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0" }),
-        React.createElement("path", { d: "M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5.5V0zm.5 7.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1", opacity: ".3" })));
-}
-function DiffUnifiedIcon() {
-    return (React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true" },
-        React.createElement("path", { fillRule: "evenodd", d: "M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8.5h16zm-8-4a.5.5 0 0 0-.5.5v1h-1a.5.5 0 0 0 0 1h1v1a.5.5 0 0 0 1 0v-1h1a.5.5 0 0 0 0-1h-1v-1A.5.5 0 0 0 8 10", clipRule: "evenodd" }),
-        React.createElement("path", { fillRule: "evenodd", d: "M14 0a2 2 0 0 1 2 2v5.5H0V2a2 2 0 0 1 2-2zM6.5 3.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z", clipRule: "evenodd", opacity: ".4" })));
-}
-/**
- * Segmented Split/Unified selector; mirrors {@link NotebookViewModeControl}.
+ * Split/Unified selector: two segmented buttons, or with `control: 'toggle'`
+ * one button that shows the layout it switches to.
  * `available` mirrors the surface's `onFileDiffActiveChange`.
  */
 export function DiffStyleControl(props) {
-    const { diffStyle, available, onChange, trans } = props;
+    const { diffStyle, control, available, onChange, trans } = props;
     if (!available) {
         return React.createElement(React.Fragment, null);
     }
+    if (control === 'toggle') {
+        const next = diffStyle === 'split' ? 'unified' : 'split';
+        const label = next === 'split'
+            ? trans.__('Switch to split view')
+            : trans.__('Switch to unified view');
+        return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented" },
+            React.createElement("button", { type: "button", className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: label, "aria-label": label, onClick: () => onChange(next) }, next === 'split' ? React.createElement(IconDiffSplit, null) : React.createElement(IconDiffUnified, null))));
+    }
     return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented", role: "tablist", "aria-label": trans.__('Diff view style') },
         React.createElement("button", { type: "button", role: "tab", "aria-selected": diffStyle === 'split', "data-active": diffStyle === 'split', className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: trans.__('Split (side-by-side) view'), "aria-label": trans.__('Split view'), onClick: () => onChange('split') },
-            React.createElement(DiffSplitIcon, null)),
+            React.createElement(IconDiffSplit, null)),
         React.createElement("button", { type: "button", role: "tab", "aria-selected": diffStyle === 'unified', "data-active": diffStyle === 'unified', className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: trans.__('Unified (inline) view'), "aria-label": trans.__('Unified view'), onClick: () => onChange('unified') },
-            React.createElement(DiffUnifiedIcon, null))));
+            React.createElement(IconDiffUnified, null))));
+}
+/**
+ * Line-wrap toggle styled as a one-button segmented control.
+ * `available` mirrors the surface's `onFileDiffActiveChange`.
+ */
+export function LineWrapControl(props) {
+    const { lineWrap, available, onChange, trans } = props;
+    if (!available) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", { className: "jp-xtralab-DiffWidget-segmented" },
+        React.createElement("button", { type: "button", "aria-pressed": lineWrap, "data-active": lineWrap, className: "jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon", title: trans.__('Wrap long lines'), "aria-label": trans.__('Wrap lines'), onClick: () => onChange(!lineWrap) },
+            React.createElement(IconWordWrap, null))));
 }

package/lib/git/diffTheme.d.ts

@@ -1,4 +1,11 @@
 import { type DiffsThemeNames } from '@pierre/diffs';
+/**
+ * `unsafeCSS` for a taller, always-visible horizontal scrollbar. The library
+ * default is 6px and only paints the thumb on hover, in a color close to the
+ * background, so users miss that long lines scroll. Same thumb color as the
+ * app scrollbars in chrome.css.
+ */
+export declare const DIFF_SCROLLBAR_CSS = ":host {\n  --diffs-scrollbar-gutter-override: 10px;\n  --xtralab-diff-scrollbar-thumb: color-mix(in srgb, var(--jp-ui-font-color1) 28%, transparent);\n}\n[data-code]::-webkit-scrollbar-thumb {\n  background-color: var(--xtralab-diff-scrollbar-thumb);\n  border-width: 2px;\n  border-radius: 999px;\n}\n[data-code]::-webkit-scrollbar-thumb:hover {\n  background-color: color-mix(in srgb, var(--jp-ui-font-color1) 45%, transparent);\n}\n@supports (-moz-appearance: none) {\n  [data-code] {\n    scrollbar-color: var(--xtralab-diff-scrollbar-thumb) transparent;\n  }\n}";
 /**
  * Choose Pierre's palette or the JupyterLab CSS-variable theme.
  */

package/lib/git/diffTheme.js

@@ -20,6 +20,29 @@ registerCustomCSSVariableTheme(JUPYTERLAB_DIFF_THEME, {
     'token-punctuation': 'var(--jp-mirror-editor-punctuation-color)',
     'token-link': 'var(--jp-mirror-editor-link-color)'
 });
+/**
+ * `unsafeCSS` for a taller, always-visible horizontal scrollbar. The library
+ * default is 6px and only paints the thumb on hover, in a color close to the
+ * background, so users miss that long lines scroll. Same thumb color as the
+ * app scrollbars in chrome.css.
+ */
+export const DIFF_SCROLLBAR_CSS = `:host {
+  --diffs-scrollbar-gutter-override: 10px;
+  --xtralab-diff-scrollbar-thumb: color-mix(in srgb, var(--jp-ui-font-color1) 28%, transparent);
+}
+[data-code]::-webkit-scrollbar-thumb {
+  background-color: var(--xtralab-diff-scrollbar-thumb);
+  border-width: 2px;
+  border-radius: 999px;
+}
+[data-code]::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--jp-ui-font-color1) 45%, transparent);
+}
+@supports (-moz-appearance: none) {
+  [data-code] {
+    scrollbar-color: var(--xtralab-diff-scrollbar-thumb) transparent;
+  }
+}`;
 /**
  * Choose Pierre's palette or the JupyterLab CSS-variable theme.
  */

package/lib/git/diffWidget.d.ts

@@ -8,7 +8,8 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import { ISignal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
 import type { IAskAgent } from '../askAgent/tokens';
-import { DIFF_WIDGET_CSS_CLASS, type DiffStyle, type NotebookDiffViewMode } from './diffSurface';
+import { type IDiffPreferences } from './diffPreferences';
+import { DIFF_WIDGET_CSS_CLASS } from './diffSurface';
 export { DIFF_WIDGET_CSS_CLASS };
 /**
  * `Git.Diff.IModel` plus optional xtralab-only metadata.
@@ -49,6 +50,10 @@ export interface IXtralabDiffContext {
      * When available, diff line selections get an "ask an agent" gutter button.
      */
     askAgent: IAskAgent | null;
+    /**
+     * The display choices shared by all diff views.
+     */
+    preferences: IDiffPreferences;
     /**
      * The application translation bundle.
      */
@@ -79,18 +84,6 @@ export declare class XtralabDiffWidget extends ReactWidget implements Git.Diff.I
      * Re-pull both sides of the model and re-render.
      */
     refresh(): Promise<void>;
-    /**
-     * The current rendered-vs-JSON choice for notebook diffs.
-     */
-    get notebookViewMode(): NotebookDiffViewMode;
-    /**
-     * Set the notebook view mode and persist it.
-     */
-    setNotebookViewMode(mode: NotebookDiffViewMode): void;
-    /**
-     * A signal emitted when the notebook view mode changes.
-     */
-    get notebookViewModeChanged(): ISignal<this, NotebookDiffViewMode>;
     /**
      * Whether a rendered notebook view is currently available.
      */
@@ -104,19 +97,7 @@ export declare class XtralabDiffWidget extends ReactWidget implements Git.Diff.I
      */
     get hasNotebookViewChanged(): ISignal<this, boolean>;
     /**
-     * The current split/unified layout for textual file diffs.
-     */
-    get diffStyle(): DiffStyle;
-    /**
-     * Set the diff style and persist it.
-     */
-    setDiffStyle(style: DiffStyle): void;
-    /**
-     * A signal emitted when the diff style changes.
-     */
-    get diffStyleChanged(): ISignal<this, DiffStyle>;
-    /**
-     * Whether the Split/Unified toolbar selector currently applies.
+     * Whether the Split/Unified and line-wrap toolbar controls currently apply.
      */
     get fileDiffActive(): boolean;
     /**
@@ -159,12 +140,8 @@ export declare class XtralabDiffWidget extends ReactWidget implements Git.Diff.I
     private _context;
     private _reloadNonce;
     private _pendingRefresh;
-    private _notebookViewMode;
-    private _notebookViewModeChanged;
     private _hasNotebookView;
     private _hasNotebookViewChanged;
-    private _diffStyle;
-    private _diffStyleChanged;
     private _fileDiffActive;
     private _fileDiffActiveChanged;
     private _emptied;