xtralab 0.7.0 → 0.9.0

package/src/git/diffSurface.tsx

@@ -18,22 +18,7 @@ import {
   NotebookDiffView,
   type INotebookDiffResult
 } from './notebookDiff';
-
-/**
- * Shared diff rendering surface used by both diff hosts in this extension:
- *
- *   - the launcher dashboard's own `xtralab:git:open-diff` command
- *     (via {@link DiffContentWidget} in `diffWidget.tsx`), and
- *   - the `jupyterlab-git` diff providers registered into the upstream git
- *     panel (via `XtralabDiffWidget` in `diffProvider.tsx`).
- *
- * The surface is deliberately content-source agnostic: callers resolve the
- * old/new text however they like (xtralab's REST helper, or a
- * `Git.Diff.IModel`'s `content()` getters) and hand the resolved strings in.
- * Everything visual — the `@pierre/diffs` split view, the cell-by-cell
- * notebook view, the draggable column resizer, and the per-hunk discard
- * affordance — lives here so the two hosts stay pixel-identical.
- */
+import { resolveDiffTheme } from './diffTheme';
 
 /**
  * The CSS class added to the diff main-area widget. The selectors that
@@ -101,6 +86,35 @@ function writeStoredSplitRatio(ratio: number): void {
   }
 }
 
+/**
+ * Layout for textual/code diffs, forwarded to `@pierre/diffs` as its
+ * `diffStyle` option. `split` is the side-by-side old|new view; `unified`
+ * is the single-column inline view (what diffs.com calls "stacked").
+ */
+export type DiffStyle = 'split' | 'unified';
+
+const DIFF_STYLE_STORAGE_KEY = 'xtralab:diff-style';
+
+export function readStoredDiffStyle(): DiffStyle {
+  try {
+    const raw = window.localStorage.getItem(DIFF_STYLE_STORAGE_KEY);
+    if (raw === 'split' || raw === 'unified') {
+      return raw;
+    }
+  } catch {
+    // See readStoredSplitRatio — privacy-mode / sandboxed contexts can throw.
+  }
+  return 'split';
+}
+
+export function writeStoredDiffStyle(style: DiffStyle): void {
+  try {
+    window.localStorage.setItem(DIFF_STYLE_STORAGE_KEY, style);
+  } catch {
+    // Best-effort.
+  }
+}
+
 /**
  * View modes available for `.ipynb` diffs. `notebook` is the cell-by-cell
  * rendered view; `json` is the raw nbformat JSON file diff, for inspecting
@@ -167,6 +181,14 @@ export function isDarkTheme(themeManager: IThemeManager | null): boolean {
   return document.body.dataset.jpThemeLight === 'false';
 }
 
+/**
+ * Whether the active JupyterLab theme should keep Pierre diff highlighting.
+ */
+export function isPierreTheme(themeManager: IThemeManager | null): boolean {
+  const theme = themeManager?.theme ?? null;
+  return theme !== null && theme.toLowerCase().includes('pierre');
+}
+
 /**
  * Optional per-hunk discard wiring. When supplied and `enabled`, each hunk
  * in a plain-text/code diff gets an inline "discard" button; clicking it
@@ -182,15 +204,25 @@ export interface IHunkDiscard {
 }
 
 export interface IDiffSurfaceProps {
-  /** Whether the host is still resolving the file contents. */
+  /**
+   * Whether the host is still resolving the file contents.
+   */
   loading: boolean;
-  /** Fatal error message to show instead of a diff, or `null`. */
+  /**
+   * Fatal error message to show instead of a diff, or `null`.
+   */
   error: string | null;
-  /** Whether the file is binary (no textual diff is rendered). */
+  /**
+   * Whether the file is binary (no textual diff is rendered).
+   */
   isBinary: boolean;
-  /** Resolved old/reference text. Ignored while loading/binary/errored. */
+  /**
+   * Resolved old/reference text. Ignored while loading/binary/errored.
+   */
   oldText: string;
-  /** Resolved new/challenger text. Ignored while loading/binary/errored. */
+  /**
+   * Resolved new/challenger text. Ignored while loading/binary/errored.
+   */
   newText: string;
   /**
    * New-side path. Drives notebook detection and the `@pierre/diffs` file
@@ -202,34 +234,54 @@ export interface IDiffSurfaceProps {
    * to {@link newName} when the host does not track a previous path.
    */
   oldName?: string;
-  /** Whether to render with the dark `@pierre/diffs` theme. */
+  /**
+   * Whether to render with the dark `@pierre/diffs` theme.
+   */
   dark: boolean;
+  /**
+   * Whether the diff should keep Pierre's own syntax palette.
+   */
+  pierreTheme: boolean;
   /**
    * Rendermime registry used by the notebook view to render outputs and
    * markdown cells. May be `null` in stripped-down hosts; the notebook
    * diff falls back to a textual representation in that case.
    */
   rendermime: IRenderMimeRegistry | null;
-  /** Current rendered-vs-JSON choice for notebook diffs (host-controlled). */
+  /**
+   * Current rendered-vs-JSON choice for notebook diffs (host-controlled).
+   */
   notebookViewMode: NotebookDiffViewMode;
+  /**
+   * Split vs unified layout for the textual/code file diff (host-controlled).
+   */
+  diffStyle: DiffStyle;
   /**
    * Called whenever the availability of a rendered notebook view changes,
    * so the host can show/hide its Notebook/JSON toolbar toggle.
    */
   onNotebookAvailabilityChange?: (available: boolean) => void;
+  /**
+   * Called whenever the textual/code file diff (the only view the split vs
+   * unified choice affects) becomes the active view, so the host can
+   * show/hide its Split/Unified toolbar toggle. False for image, binary,
+   * rendered-notebook, loading and error states.
+   */
+  onFileDiffActiveChange?: (active: boolean) => void;
   /**
    * Called after each (re)computation of the diff with the number of hunks
    * (or `null` when no textual diff exists). Hosts use this to implement
    * post-discard behaviors such as auto-closing an emptied diff.
    */
   onMetadataChange?: (info: { hunkCount: number | null }) => void;
-  /** Optional per-hunk discard wiring; omit for a read-only diff. */
+  /**
+   * Optional per-hunk discard wiring; omit for a read-only diff.
+   */
   hunkDiscard?: IHunkDiscard;
 }
 
 /**
- * The shared, content-source-agnostic diff renderer. See the module
- * docstring for the division of labor between this surface and its hosts.
+ * Shared renderer for text, notebook and image diffs.
  */
 export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
   const {
@@ -241,9 +293,12 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
     newName,
     oldName,
     dark,
+    pierreTheme,
     rendermime,
     notebookViewMode,
+    diffStyle,
     onNotebookAvailabilityChange,
+    onFileDiffActiveChange,
     onMetadataChange,
     hunkDiscard
   } = props;
@@ -295,6 +350,21 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
     });
   }, [onMetadataChange, metadata]);
 
+  // Decide which view to render. The notebook view requires a successful
+  // nbformat parse; if that failed, we only show the raw JSON file diff.
+  // Computed before the early returns below so the file-diff-active effect
+  // can depend on it without violating the rules of hooks.
+  const hasNotebookView = notebookDiff !== null;
+  const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
+  const showFileDiff = !showNotebookView && metadata !== null;
+
+  // The split vs unified choice only affects the textual/code file diff, so
+  // tell the host whether that view is active to drive its Split/Unified
+  // toolbar toggle.
+  React.useEffect(() => {
+    onFileDiffActiveChange?.(showFileDiff);
+  }, [onFileDiffActiveChange, showFileDiff]);
+
   // 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.
@@ -461,12 +531,6 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
       </div>
     );
   }
-  // Decide which view to render. The notebook view requires a successful
-  // nbformat parse; if that failed, we only show the raw JSON file diff.
-  const hasNotebookView = notebookDiff !== null;
-  const showNotebookView = hasNotebookView && notebookViewMode === 'notebook';
-  const showFileDiff = !showNotebookView && metadata !== null;
-
   if (!showNotebookView && !showFileDiff) {
     return (
       <div className="jp-xtralab-DiffWidget-status">No content to diff.</div>
@@ -490,6 +554,7 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
             <NotebookDiffView
               diff={notebookDiff}
               dark={dark}
+              pierreTheme={pierreTheme}
               rendermime={rendermime}
             />
           ) : showFileDiff && metadata !== null ? (
@@ -506,12 +571,12 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
               // fine for the small files git diffs typically operate on.
               disableWorkerPool={true}
               options={{
-                diffStyle: 'split',
+                diffStyle,
                 // 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',
+                theme: resolveDiffTheme(dark, pierreTheme),
                 themeType: dark ? 'dark' : 'light',
                 // Inject the column-resize override into the shadow root
                 // via the library's `@layer unsafe` channel. Keeping the
@@ -523,7 +588,7 @@ export function DiffSurface(props: IDiffSurfaceProps): React.ReactElement {
             />
           ) : null}
         </div>
-        {showFileDiff ? (
+        {showFileDiff && diffStyle === 'split' ? (
           <div
             className="jp-xtralab-DiffWidget-resizer"
             style={{ left: `${leftPercent}%` }}
@@ -586,3 +651,90 @@ export function NotebookViewModeControl(props: {
     </div>
   );
 }
+
+/**
+ * Split / unified glyphs, inlined from the `@pierre/diffs` icon sprite
+ * (`diffs-icon-diff-split` / `diffs-icon-diff-unified`) so the toggle looks
+ * like the one on the library's own docs site without depending on the
+ * sprite sheet being injected into the document. `currentColor` lets the
+ * segmented-button styling drive the fill (including the active state).
+ */
+function DiffSplitIcon(): React.ReactElement {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <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" />
+      <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"
+      />
+    </svg>
+  );
+}
+
+function DiffUnifiedIcon(): React.ReactElement {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <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"
+      />
+      <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"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Segmented Split/Unified selector. Mirrors {@link NotebookViewModeControl}:
+ * hosts mount it into their own toolbar and drive its value/visibility from
+ * the same state they pass to {@link DiffSurface}. Only meaningful while the
+ * textual/code file diff is the active view, so `available` mirrors the
+ * surface's `onFileDiffActiveChange`.
+ */
+export function DiffStyleControl(props: {
+  diffStyle: DiffStyle;
+  available: boolean;
+  onChange: (style: DiffStyle) => void;
+}): React.ReactElement {
+  const { diffStyle, available, onChange } = props;
+  if (!available) {
+    return <></>;
+  }
+  return (
+    <div
+      className="jp-xtralab-DiffWidget-segmented"
+      role="tablist"
+      aria-label="Diff view style"
+    >
+      <button
+        type="button"
+        role="tab"
+        aria-selected={diffStyle === 'split'}
+        data-active={diffStyle === 'split'}
+        className="jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon"
+        title="Split (side-by-side) view"
+        aria-label="Split view"
+        onClick={() => onChange('split')}
+      >
+        <DiffSplitIcon />
+      </button>
+      <button
+        type="button"
+        role="tab"
+        aria-selected={diffStyle === 'unified'}
+        data-active={diffStyle === 'unified'}
+        className="jp-xtralab-DiffWidget-segmentedButton jp-xtralab-DiffWidget-segmentedButton-icon"
+        title="Unified (inline) view"
+        aria-label="Unified view"
+        onClick={() => onChange('unified')}
+      >
+        <DiffUnifiedIcon />
+      </button>
+    </div>
+  );
+}

package/src/git/diffTheme.ts

@@ -0,0 +1,40 @@
+import {
+  registerCustomCSSVariableTheme,
+  type DiffsThemeNames
+} from '@pierre/diffs';
+
+/**
+ * Shiki CSS-variable theme used for non-Pierre JupyterLab themes.
+ */
+export const JUPYTERLAB_DIFF_THEME: DiffsThemeNames = 'jupyterlab';
+
+/**
+ * Register a Shiki theme whose token colors read JupyterLab's editor
+ * variables. The values are CSS variables, so theme changes recolor the diff.
+ */
+registerCustomCSSVariableTheme(JUPYTERLAB_DIFF_THEME, {
+  foreground: 'var(--jp-content-font-color1)',
+  background: 'var(--jp-layout-color1)',
+  'token-keyword': 'var(--jp-mirror-editor-keyword-color)',
+  'token-string': 'var(--jp-mirror-editor-string-color)',
+  'token-string-expression': 'var(--jp-mirror-editor-string-2-color)',
+  'token-comment': 'var(--jp-mirror-editor-comment-color)',
+  'token-constant': 'var(--jp-mirror-editor-number-color)',
+  'token-function': 'var(--jp-mirror-editor-def-color)',
+  'token-parameter': 'var(--jp-mirror-editor-variable-color)',
+  'token-punctuation': 'var(--jp-mirror-editor-punctuation-color)',
+  'token-link': 'var(--jp-mirror-editor-link-color)'
+});
+
+/**
+ * Choose Pierre's palette or the JupyterLab CSS-variable theme.
+ */
+export function resolveDiffTheme(
+  dark: boolean,
+  pierreTheme: boolean
+): DiffsThemeNames {
+  if (pierreTheme) {
+    return dark ? 'pierre-dark' : 'pierre-light';
+  }
+  return JUPYTERLAB_DIFF_THEME;
+}