@gitkraken/gitkraken-components 13.0.0-vnext.3 → 13.0.0-vnext.31

package/README.md

@@ -3,10 +3,12 @@
 This is a shared module between the GitKraken app and GitLens to share React components.
 
 ## Requires resolution to React 17
+
 > [!WARNING]
 > In order for this package to work properly, you must resolve React to version 17 in your own project.
 > The reason for this is because this library's react-bootstrap dependency lists React 16 as a dependency, and npm/yarn 1 do not provide a way for dependencies to lock sub-dependencies. Therefore it is up to your project to force this library's react-bootstrap to use react 17.
 > The following is an example of what to put into your package.json:
+
 ```
   "resolutions": {
     "react": "17.0.2",
@@ -14,4 +16,8 @@ This is a shared module between the GitKraken app and GitLens to share React com
   }
 ```
 
+## Guides
+
+- [Multi-WIP rows](./docs/multi-wip-rows.md) — rendering secondary (per-worktree) WIP rows, deferred stats loading, and stale-while-revalidate invalidation.
+
 [CHANGELOG](./CHANGELOG.md)

package/dist/components/dnd/DndComponent.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 export type DndCanDrag = (sourceData?: any) => boolean;
 export type DndOnBeginDrag = (event: React.DragEvent, sourceData?: any) => void;
 export type DndOnDragEnter = (event: React.DragEvent, sourceData?: any, targetData?: any) => void;

package/dist/components/dnd/DndContainer.d.ts

@@ -1,6 +1,6 @@
 import type { Drake } from 'dragula';
 import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
+import * as React from 'react';
 export type DndDirection = 'vertical' | 'horizontal';
 export type DndIsDraggable = (source: ReactElement<any>) => boolean;
 export type DndIsDroppable = (source: ReactElement<any>, target: ReactElement<any>) => boolean;

package/dist/components/graph/GraphColumn.d.ts

@@ -1,7 +1,7 @@
 import type { Alignment, GridCellRangeRenderer } from 'react-virtualized';
 import type { ReactElement } from 'react';
 import type { GraphMarkerType, GraphZone, GraphZoneType } from '../../domain/graph/GraphConstants';
-import type { ColumnContentGenerator, GetExternalIcon, GraphMarkerColors, GraphMarkerRowIndices, OnGraphZoneResize, OnGraphZoneResizeEnd, OnGraphZoneResizeFromPropChange, OnScrollForZone, RowRenderersByIds } from '../../domain/graph/GraphTypes';
+import type { ColumnContentGenerator, GetExternalIcon, GraphMarkerColors, GraphMarkerRowIndices, InteractiveScrollMarker, OnGraphZoneResize, OnGraphZoneResizeEnd, OnGraphZoneResizeFromPropChange, OnScrollForZone, OnScrollMarkerClicked, ProcessedGraphRow, RowRenderersByIds } from '../../domain/graph/GraphTypes';
 import type { TranslationFn } from '../../domain/language/LanguageTypes';
 import type { GetRealKeyForCellFunc } from '../../domain/reactvirtualized/ReactVirtualizedHelpers';
 import type { OnMouseEnter } from '../../domain/ui/UiTypes';
@@ -20,9 +20,12 @@ type GraphColumnProps = {
     graphZones: GraphZone[];
     hasMoreCommits: boolean;
     horizontalScrollHeight: number;
+    isFilteredSearch: boolean;
     isLoadingRows: boolean;
     markerColors: GraphMarkerColors;
     markerRowIndices: GraphMarkerRowIndices;
+    interactiveScrollMarkers?: readonly InteractiveScrollMarker[];
+    onScrollMarkerClicked?: OnScrollMarkerClicked;
     makeColumnContents?: ColumnContentGenerator;
     onResize?: OnGraphZoneResize;
     onResizeEnd?: OnGraphZoneResizeEnd;
@@ -31,13 +34,15 @@ type GraphColumnProps = {
     onScrollToRowCausedUpdate?: OnScrollForZone;
     onZoneEnter: OnMouseEnter;
     cellRenderersByIds: RowRenderersByIds;
+    processedRows?: ProcessedGraphRow[];
     scrollToAlignment?: Alignment;
     scrollToIndex?: number;
     scrollLeft: number;
     scrollTop: number;
     smartCellRangeRenderer: GridCellRangeRenderer;
+    stickyTimeline?: boolean;
     translate: TranslationFn;
     verticalScrollWidth: number;
 };
-export declare function GraphColumn({ branchUpstreamRowIndices, rowCount, cellRenderersByIds, columnIndex, customFooterRow, enabledScrollMarkerTypes, enableResizer, getExternalIcon, getKeyForCell, graphHeight, graphWidth, graphZoneType, graphZones, hasMoreCommits, horizontalScrollHeight, isLoadingRows, markerColors, markerRowIndices, onResize, onResizeEnd, onResizeFromPropChange, onScroll, onScrollToRowCausedUpdate, onZoneEnter, scrollLeft, scrollToAlignment, scrollToIndex, scrollTop, smartCellRangeRenderer, translate, verticalScrollWidth, }: GraphColumnProps): ReactElement<any> | null;
+export declare function GraphColumn({ branchUpstreamRowIndices, rowCount, cellRenderersByIds, columnIndex, customFooterRow, enabledScrollMarkerTypes, enableResizer, getExternalIcon, getKeyForCell, graphHeight, graphWidth, graphZoneType, graphZones, hasMoreCommits, horizontalScrollHeight, isFilteredSearch, isLoadingRows, markerColors, markerRowIndices, interactiveScrollMarkers, onScrollMarkerClicked, onResize, onResizeEnd, onResizeFromPropChange, onScroll, onScrollToRowCausedUpdate, onZoneEnter, processedRows, scrollLeft, scrollToAlignment, scrollToIndex, scrollTop, smartCellRangeRenderer, stickyTimeline, translate, verticalScrollWidth, }: GraphColumnProps): ReactElement<any> | null;
 export {};

package/dist/components/graph/GraphContainer.d.ts

@@ -1,20 +1,29 @@
-/// <reference types="node" />
 import type { Alignment, ScrollParams } from 'react-virtualized';
 import type { ReactElement } from 'react';
-import React from 'react';
+import * as React from 'react';
 import type { Sha } from '../../domain/commit/CommitTypes';
 import type { CssVariables } from '../../domain/generic/GenericTypes';
 import type { GraphCommitDescDisplayMode, GraphMarkerType, GraphSearchMode, GraphZone, GraphZoneType, ShiftSelectMode } from '../../domain/graph/GraphConstants';
 import type { ThrottledFn } from '../../domain/graph/GraphHelpers';
-import type { AbsoluteNodeLeftByColumn, AvatarUrlByEmail, AvatarUrlRequestedByEmail, ChildrenBySha, ColumnColorByColumn, DownstreamsByUpstream, EdgeByColumn, ExcludeByType, ExcludeRefsById, ExcludeRemotesByName, FormatCommitMessage, FormatRefShorthand, GetExternalIcon, GetMissingAvatar, GetMissingRefMetadata, GraphColumnSetting, GraphColumnsSettings, GraphContexts, GraphMarkerColors, GraphMarkerRowIndices, GraphPlatform, GraphRefGroup, GraphRow, GraphZoneModeConstants, GraphZonesByType, Head, HighlightedShas, IncludeOnlyRefsById, IncludeOnlyRemotesByName, IsRefShorthandValid, IsSelectedBySha, NodeOffsetByColumn, NodeOpacityByColumn, OnClearCurrentlyHoveredGraphCommit, OnClickCommit, OnClickGraphRef, OnClickGraphRow, OnClickRef, OnCommitContextMenu, OnCommitMessageChange, OnCurrentlyHoveredGraphCommit, OnDoubleClickCommit, OnDoubleClickGraphRef, OnDoubleClickGraphRow, OnDoubleClickRef, OnEmailsMissingAvatarUrls, OnFilterColumnClick, OnFormatCommitDateTime, OnGraphColumnReOrdered, OnGraphColumnResized, OnGraphColumnsReOrdered, OnGraphMouseEnter, OnGraphMouseLeave, OnGraphRefNodeHovered, OnGraphRefNodeUnhovered, OnGraphResized, OnGraphRowHovered, OnGraphRowUnhovered, OnGraphScrollForZone, OnGraphVisibleRowsChanged, OnGraphZoneResize, OnGraphZoneResizeEnd, OnLoadSelectedGraphRow, OnPopupGraphHeaderContextMenu, OnRefBeginDrag, OnRefCanDrag, OnRefCanDrop, OnRefContextMenu, OnRefCreate, OnRefCreateCancel, OnRefCreateContextMenu, OnRefDragEnter, OnRefDragLeave, OnRefDrop, OnRefEndDrag, OnRefNodeHovered, OnRefNodeUnhovered, OnRefShorthandChange, OnRefsMissingMetadata, OnRefZoneContextMenu, OnRefZoneHovered, OnRefZoneUnhovered, OnRowContextMenu, OnScrollForZone, OnSelectGraphRows, OnSettingsClick, OnShowMoreCommits, OnToggleRefNodesShown, OnToggleRefsVisibilityClick, OnWipMessageBlur, OnWipMessageFocus, ProcessedGraphRow, ProcessedGraphRowBySha, RefMetadataById, RefMetadataRequestedById, RefMetadataType, RefsMissingMetadata, Remote, ReserverInfoBySha, RowEdges, RowStats, RowStatsConstraints, ShaByRefId, Tag, TopAndBottomVisibleRowIndex } from '../../domain/graph/GraphTypes';
+import type { AbsoluteNodeLeftByColumn, AvatarUrlByEmail, AvatarUrlRequestedByEmail, ChildrenBySha, ColumnColorByColumn, DownstreamsByUpstream, ExcludeByType, ExcludeRefsById, ExcludeRemotesByName, FormatCommitMessage, FormatRefShorthand, GetExternalIcon, GetMissingAvatar, GetMissingRefMetadata, GraphColumnSetting, GraphColumnsSettings, GraphContexts, GraphMarkerColors, GraphMarkerRowIndices, GraphPlatform, GraphRefGroup, GraphRow, GraphScope, GraphZoneModeConstants, GraphZonesByType, Head, HighlightedShas, IncludeOnlyRefsById, IncludeOnlyRemotesByName, InteractiveScrollMarker, IsRefShorthandValid, IsSelectedBySha, NodeOffsetByColumn, NodeOpacityByColumn, OnClearCurrentlyHoveredGraphCommit, OnClickCommit, OnClickGraphRef, OnClickGraphRow, OnClickRef, OnColumnsCalculated, OnCommitContextMenu, OnCommitMessageChange, OnCurrentlyHoveredGraphCommit, OnDoubleClickCommit, OnDoubleClickGraphRef, OnDoubleClickGraphRow, OnDoubleClickRef, OnEmailsMissingAvatarUrls, OnFilterColumnClick, OnFormatCommitDateTime, OnGraphColumnReOrdered, OnGraphColumnResized, OnGraphColumnsReOrdered, OnGraphMouseEnter, OnGraphMouseLeave, OnGraphRefNodeHovered, OnGraphRefNodeUnhovered, OnGraphResized, OnGraphRowHovered, OnGraphRowUnhovered, OnGraphScrollForZone, OnGraphVisibleRowsChanged, OnGraphZoneResize, OnGraphZoneResizeEnd, OnLoadSelectedGraphRow, OnPopupGraphHeaderContextMenu, OnRefBeginDrag, OnRefCanDrag, OnRefCanDrop, OnRefContextMenu, OnRefCreate, OnRefCreateCancel, OnRefCreateContextMenu, OnRefDragEnter, OnRefDragLeave, OnRefDrop, OnRefEndDrag, OnRefNodeHovered, OnRefNodeUnhovered, OnRefShorthandChange, OnRefsMissingMetadata, OnRefZoneContextMenu, OnRefZoneHovered, OnRefZoneUnhovered, OnRowContextMenu, OnScrollForZone, OnSelectGraphRows, OnSettingsClick, OnShowMoreCommits, OnToggleRefNodesShown, OnToggleRefsVisibilityClick, OnWipMessageBlur, OnWipMessageFocus, ProcessedGraphRow, ProcessedGraphRowBySha, ReadonlyGraphRow, RefMetadataById, RefMetadataRequestedById, RefMetadataType, RefsMissingMetadata, Remote, ReserverInfoBySha, RowStats, RowStatsConstraints, ShaByRefId, Tag, TopAndBottomVisibleRowIndex } from '../../domain/graph/GraphTypes';
+import type { RowAdornmentProvider } from '../../domain/graph/rowAdornment/RowAdornmentTypes';
 import type { TranslationFn } from '../../domain/language/LanguageTypes';
 import type { CreateRefFormData, RefIconsPosition } from '../../domain/ref/RefTypes';
-import type { OnBlur, OnKeyDown, OnKeyUp, OnMouseDown, OnResizeParams } from '../../domain/ui/UiTypes';
-import type { WorkDirStats } from '../../domain/workdir/WorkDirTypes';
+import type { OnKeyDown, OnKeyUp, OnMouseDown, OnResizeParams } from '../../domain/ui/UiTypes';
+import type { OnVisibleWipShasChanged, OnWipShasMissingStats, VisibleWipShas, WipNodeMetadataBySha, WipShasMissingStats, WorkDirStats } from '../../domain/workdir/WorkDirTypes';
 import type { IGraphContainer } from './IGraphContainer';
 type ClearScrollToIndex = () => void;
 type OnZoneEnter = (e: React.MouseEvent<any>, zoneType: GraphZoneType, hoveredRefGroup?: GraphRefGroup, hoveredSha?: Sha) => void;
 type OnGraphContainerBlurred = (event: React.FocusEvent<any>, hoveredRefGroup?: GraphRefGroup, hoveredSha?: Sha) => void;
+/**
+ * Options for the public selectCommits method.
+ */
+export interface SelectCommitsOptions {
+    /** If true, toggle selection; if false, replace selection. Default: false */
+    toggle?: boolean;
+    /** If true, scroll to ensure the focused commit is visible. Default: false */
+    ensureVisible?: boolean;
+}
 interface OwnProps {
     formatCommitDateTime?: OnFormatCommitDateTime;
     formatCommitMessage?: FormatCommitMessage;
@@ -30,6 +39,14 @@ export interface StateProps {
     contexts?: GraphContexts | null;
     createRefFormData?: CreateRefFormData | null;
     dimMergeCommits?: boolean;
+    /**
+     * Renders the graph as if every row's first parent is its sole parent — the same
+     * topology as `git log --first-parent --all`. Set this instead of filtering
+     * `--first-parent` upstream so toggling stays a re-process of the cached `graphRows`
+     * rather than a re-query. Composes with `scope`: scope walks honor first-parent
+     * ordering when this is set.
+     */
+    onlyFirstParent?: boolean;
     enableShowHideRefsOptions?: boolean;
     downstreamsByUpstream?: DownstreamsByUpstream;
     formatRefShorthand?: FormatRefShorthand;
@@ -38,13 +55,21 @@ export interface StateProps {
     isRefShorthandValid?: IsRefShorthandValid;
     showGhostRefsOnRowHover?: boolean;
     showRemoteNamesOnRefs?: boolean;
+    /**
+     * Whether stash rows can keep otherwise-unreferenced parent commits visible.
+     * Defaults to true for backwards compatibility. When false, a stash is shown
+     * only if its parent commit would already be visible for some other reason.
+     */
+    stashesAnchorCommits?: boolean;
     enabledRefMetadataTypes?: RefMetadataType[];
     enabledScrollMarkerTypes?: GraphMarkerType[];
     scrollRowPadding?: number;
     enableMultiSelection?: boolean;
+    stickyTimeline?: boolean;
     graphCommitDescDisplayMode?: GraphCommitDescDisplayMode;
     graphRows: GraphRow[];
     hasMoreCommits?: boolean;
+    hasMoreSearchResults?: boolean;
     highlightedShas?: HighlightedShas;
     excludeByType?: ExcludeByType;
     excludeRefsById?: ExcludeRefsById;
@@ -54,6 +79,25 @@ export interface StateProps {
     isInUnsupportedRebase?: boolean;
     isLoadingRows?: boolean;
     pendingCommitMessageSummary?: string;
+    /**
+     * Full name of the branch to pin to the left-most column (column 0).
+     * Example: "refs/heads/main" or "refs/remotes/origin/main"
+     * If null or undefined, no branch is pinned.
+     */
+    pinnedBranchFullName?: string | null;
+    /**
+     * Narrow the graph to commits reachable from a specific branch, its upstream (if any), and
+     * a merge-target tip commit. Anchors (tips + merge target) show all their refs and never
+     * propagate child refs to their parents. When an anchor's real parents are hidden, a
+     * synthetic wavy dashed edge is drawn to its nearest visible ancestor.
+     */
+    scope?: GraphScope;
+    /**
+     * Fired when the helper determined that an anchor cannot reach a visible ancestor within the
+     * loaded graphRows (merge base not loaded). Consumer should fetch more data and re-render.
+     * Called once per processing pass, only when the set actually changes.
+     */
+    onScopeAnchorsUnreachable?: (unreachableAnchors: Set<Sha>) => void;
     shiftSelectMode?: ShiftSelectMode;
     suppressNonRefRowTooltips?: boolean;
     refMetadataById?: RefMetadataById | null;
@@ -66,8 +110,28 @@ export interface StateProps {
     useAuthorInitialsForAvatars: boolean;
     rowsStats?: Record<string, RowStats>;
     rowsStatsLoading?: boolean;
+    /**
+     * Controls when the WIP row is inserted into the graph.
+     * - 'auto' (default): shown only when there are pending working-tree changes.
+     * - 'always': shown even with a clean working tree, anchored at HEAD.
+     */
+    wipVisibility?: 'always' | 'auto';
     wipMessageEditable?: boolean;
     workDirStats?: WorkDirStats;
+    wipNodeMetadataBySha?: WipNodeMetadataBySha;
+    /**
+     * Settle delay (ms) for the internal scroll-settle debounce that drives both
+     * `onVisibleWipShasChanged` and `onWipShasMissingStats`. Each scroll/visible-range change
+     * resets the timer; the callbacks fire once activity stops for this long. Raise it (e.g. 350)
+     * to avoid firing stats requests for rows that are only momentarily visible during fast scrolls.
+     * Defaults to 100.
+     */
+    wipShasSettleDelayMs?: number;
+    /**
+     * Provider for row adornments.
+     * Graph subscribes to invalidate events and calls provide/resolve as needed.
+     */
+    rowAdornmentProvider?: RowAdornmentProvider;
 }
 export interface DispatchProps {
     onDoubleClickGraphRef?: OnDoubleClickGraphRef;
@@ -93,6 +157,12 @@ export interface DispatchProps {
     onGraphColumnsReOrdered?: OnGraphColumnsReOrdered;
     onFilterColumnClick?: OnFilterColumnClick;
     onColumnResized?: OnGraphColumnResized;
+    /**
+     * Callback invoked when column numbers are calculated for each commit.
+     * Receives a map of SHA → column number.
+     * Used to sync column layout data back to the parent application.
+     */
+    onColumnsCalculated?: OnColumnsCalculated;
     onFocusWipNodeInput?: OnWipMessageFocus;
     onMessageChange?: OnCommitMessageChange;
     onPopupGraphHeaderContextMenu?: OnPopupGraphHeaderContextMenu;
@@ -110,6 +180,8 @@ export interface DispatchProps {
     onGraphMouseLeave?: OnGraphMouseLeave;
     onEmailsMissingAvatarUrls?: OnEmailsMissingAvatarUrls;
     onRefsMissingMetadata?: OnRefsMissingMetadata;
+    onWipShasMissingStats?: OnWipShasMissingStats;
+    onVisibleWipShasChanged?: OnVisibleWipShasChanged;
 }
 interface Props extends OwnProps, StateProps, DispatchProps {
 }
@@ -122,6 +194,7 @@ type ComponentState = {
     cssVariablesWithDefaults: CssVariables;
     currentlyHoveredCommitSha?: Sha;
     dimMergeCommits: boolean;
+    onlyFirstParent: boolean;
     dimRowsOfSelectedCommit: boolean;
     enableShowHideRefsOptions: boolean;
     highlightRowsOnRefHover: boolean;
@@ -139,6 +212,7 @@ type ComponentState = {
     isLoadingRows: boolean;
     numGraphColumns: number;
     markerRowIndices: GraphMarkerRowIndices;
+    interactiveScrollMarkers: InteractiveScrollMarker[];
     pendingCommitMessageSummary: string;
     processedRows: ProcessedGraphRow[];
     refIconsPosition: RefIconsPosition;
@@ -165,6 +239,7 @@ type HasMergeNodeChildBySha = {
     [sha: Sha]: boolean;
 };
 declare class GraphContainer extends React.Component<Props, ComponentState> implements IGraphContainer {
+    static getDerivedStateFromProps(props: Props, state: ComponentState): Partial<ComponentState> | null;
     private graphComponentRef;
     private graphContainerRef;
     private resizeObserver;
@@ -173,7 +248,8 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     isRefContextMenuShown: boolean;
     isMounted: boolean;
     selectedShas: Set<Sha>;
-    lastFocusedSha?: Sha;
+    selectionAnchorSha?: Sha;
+    selectionFocusSha?: Sha;
     processedGraphRowBySha: ProcessedGraphRowBySha;
     shaByRefId: ShaByRefId;
     childrenBySha: ChildrenBySha;
@@ -189,10 +265,16 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     shouldFireShowMoreCommits: boolean;
     columnsToFreeWhenFound: ColumnsToFreeBySha;
     hasMergeNodeChildBySha: HasMergeNodeChildBySha;
+    private _autoLoadTimer?;
     reserverInfoBySha: ReserverInfoBySha;
     columnsUsed: ColumnsUsed;
+    private pinnedBranchShas;
+    private scopeVisibility;
+    private syntheticEdgeChildShas;
+    private _lastReportedUnreachable;
     rowsStats?: Record<string, RowStats>;
     workDirStats: WorkDirStats;
+    private _markerColorsCache;
     excludeByType: ExcludeByType;
     excludeRefsById: ExcludeRefsById;
     includeOnlyRefsById: IncludeOnlyRefsById;
@@ -208,18 +290,23 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     graphZonesByType: GraphZonesByType;
     graphZoneOrdering: GraphZoneType[];
     clientHeight: number;
-    missingAvatarsTimer?: NodeJS.Timeout;
+    missingAvatarsTimer?: ReturnType<typeof setTimeout>;
     pendingMissingAvatars: AvatarUrlByEmail;
     requestedMissingAvatars: AvatarUrlRequestedByEmail;
-    missingRefsMetadataTimer?: NodeJS.Timeout;
+    missingRefsMetadataTimer?: ReturnType<typeof setTimeout>;
     pendingMissingRefsMetadata: RefsMissingMetadata;
     requestedMissingRefsMetadata: RefMetadataRequestedById;
+    previousRefMetadataById: RefMetadataById | null;
+    requestedMissingWipStats: WipShasMissingStats;
+    visibleWipShasTimer?: ReturnType<typeof setTimeout>;
+    lastFiredVisibleWipShas: VisibleWipShas | undefined;
     branchUpstreamRowIndices: number[];
+    private interactiveScrollMarkersFromRows;
     downstreamsByUpstream: DownstreamsByUpstream;
-    timelinesInterval?: NodeJS.Timeout;
+    timelinesInterval?: ReturnType<typeof setInterval>;
     constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props, prevState: ComponentState): void;
     componentWillUnmount(): void;
     focus(): void;
     getRefIconsPositionOrDefault(refIconsPosition?: RefIconsPosition | null): RefIconsPosition;
@@ -246,14 +333,76 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     onRefDragLeave: OnRefDragLeave;
     onRefDrop: OnRefDrop;
     onRefEndDrag: OnRefEndDrag;
+    private performRangeSelection;
     onZoneRowClick(event: React.MouseEvent<any>, graphZoneType: GraphZoneType, sha: Sha): void;
-    getShiftSelectRange(currentSha: Sha): Sha[];
+    private handleToggleSelection;
+    getShiftSelectRange(currentSha: Sha, shiftSelectMode: ShiftSelectMode): Sha[] | undefined;
+    /**
+     * Check if a commit can extend the current topological selection via Ctrl+Click.
+     *
+     * In topological mode, we maintain a contiguous path through the git graph.
+     * This method determines if adding a commit would maintain that contiguity.
+     *
+     * Graph orientation:
+     * - Lower row index = NEWER commits (children, at top of graph)
+     * - Higher row index = OLDER commits (parents, at bottom of graph)
+     * - `getDirectTopologicalPathBetween(A, B)` finds path from A to B following parent pointers,
+     *   meaning B must be an ancestor (older) of A
+     *
+     * Three cases based on clicked commit's position relative to selection bounds:
+     *
+     * 1. NEWER than newest selected (clickedIndex < newestIndex):
+     *    - Clicked commit would extend the TOP of the selection
+     *    - Check: clicked → newest (is newest an ancestor of clicked?)
+     *    - Example: Selection is rows 5-10, clicking row 3
+     *      Must verify row 3 can reach row 5 by following parents
+     *
+     * 2. OLDER than oldest selected (clickedIndex > oldestIndex):
+     *    - Clicked commit would extend the BOTTOM of the selection
+     *    - Check: oldest → clicked (is clicked an ancestor of oldest?)
+     *    - Example: Selection is rows 5-10, clicking row 12
+     *      Must verify row 10 can reach row 12 by following parents
+     *
+     * 3. BETWEEN newest and oldest (newestIndex < clickedIndex < oldestIndex):
+     *    - Clicked commit must be ON the existing path, not a parallel branch
+     *    - Check BOTH directions:
+     *      - newest → clicked (is clicked an ancestor of newest?)
+     *      - clicked → oldest (is oldest an ancestor of clicked?)
+     *    - Example: Selection is rows 5-10, clicking row 7
+     *      Must verify row 5 → row 7 → row 10 forms a valid path
+     *    - This prevents selecting commits on parallel branches that happen
+     *      to merge into the same ancestor
+     *
+     * @returns true if the commit can be added while maintaining topological contiguity
+     */
+    private canExtendTopologicalSelection;
+    private getTopologicalPathBetween;
+    private getDirectTopologicalPathBetween;
+    /**
+     * Finds the nearest commit that is topologically reachable from the anchor commit.
+     * Searches in the appropriate direction based on whether the anchor is ahead or behind the target.
+     * This is used as a fallback when the clicked commit is not directly topologically reachable.
+     */
+    private findNearestTopologicallyReachableCommit;
+    /**
+     * Validates that a path has only 2 endpoints - the start and end commits.
+     * An endpoint is a commit that has no children or parents within the selected path
+     * (excluding the explicit start and end points).
+     */
+    private hasOnlyTwoEndpoints;
+    /**
+     * Checks if a set of rows form a topologically contiguous set
+     * Rows are contiguous if all rows are connected via parent-child relationships (i.e., they form a single connected subgraph)
+     */
+    areRowsContiguous(rows: ReadonlyGraphRow[]): boolean;
     onClickRef: OnClickRef;
     onClickCommit: OnClickCommit;
     onDoubleClickCommit: OnDoubleClickCommit;
-    onWindowKeyUp: OnKeyUp;
-    onWindowBlur: OnBlur;
-    onWindowKeyDown: OnKeyDown;
+    onWindowBlur: (e: FocusEvent) => void;
+    onWindowKeyUp: () => void;
+    onWindowKeyDown: (e: KeyboardEvent) => void;
+    onWindowMouseDown: () => void;
+    private isKeyboardNavigating;
     onKeyUp: OnKeyUp;
     onKeyDown: OnKeyDown;
     isNavigationKey(key: string): boolean;
@@ -265,19 +414,69 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     onRefZoneUnhovered: OnRefZoneUnhovered;
     onShowMoreCommits: OnShowMoreCommits;
     onScrollForZone: OnScrollForZone;
+    /**
+     * Checks if there are still highlighted commits that haven't been found yet,
+     * OR if there are more search results available to load.
+     * Used in filter mode to determine if we should continue loading more commits.
+     * @returns true if there are unfound highlighted commits or more search results available, false otherwise
+     */
+    private hasUnfoundHighlightedCommits;
     loadMoreCommitsIfNecessary(graphHeight: number, hasMoreCommits: boolean): void;
+    private shouldAutoLoadToFillViewport;
+    private autoLoadToFillViewport;
     onScrollToRowCausedUpdateForFirstColumn: OnScrollForZone;
     onCommitContextMenu: OnCommitContextMenu;
     onRefContextMenu: OnRefZoneContextMenu;
-    selectCommits(shas: Sha[], includeToPrevSel: boolean, isAutoOrKeyScroll: boolean): void;
+    /**
+     * Deep equality check for isSelectedBySha objects to avoid unnecessary scroll-to-selection
+     * when object reference changes but content is the same (e.g., after postMessage serialization)
+     */
+    private areSelectedByShaEqual;
+    private _pendingRowsUpdate;
+    private _selectionVersion;
+    private _cachedSmartCellRangeRenderer;
+    private _cachedScrollLeftForRenderer;
+    private _cachedForceCache;
+    /**
+     * Gets or creates a cached smartCellRangeRenderer.
+     * Only recreates when scrollLeft or forceCache changes.
+     * This prevents react-virtualized from invalidating its cache on every render.
+     */
+    private getOrCreateSmartCellRangeRenderer;
+    /**
+     * Gets commits rows by SHA
+     *
+     * @param shas - Array of commit SHAs to get
+     * @returns Array of ReadonlyGraphRow objects
+     */
+    getCommits(shas: Sha[]): ReadonlyGraphRow[];
+    /**
+     * Selects commits in the graph
+     * @param shas - Array of commit SHAs to select
+     * @param options - Selection options (toggle, ensureVisible)
+     * @returns Array of selected ReadonlyGraphRow objects
+     */
+    selectCommits(shas: Sha[], options?: SelectCommitsOptions): ReadonlyGraphRow[];
+    /**
+     * Internal method to select commits with full control over selection behavior
+     * @param shas - Array of commit SHAs to select
+     * @param options - Selection options including toggle, ensureVisible, isKeyboardNav, isTopological, isContiguous
+     * @returns Array of selected ReadonlyGraphRow objects
+     */
+    private selectCommitsCore;
+    private predictScrollTop;
     getCommitZoneContentWidthBetweenGutters(): number;
-    getSelectedShas(): Sha[];
     getExcludeRemotesByName(): ExcludeRemotesByName;
     getIncludeOnlyRemotesByName(): IncludeOnlyRemotesByName;
     clearScrollToIndex: ClearScrollToIndex;
+    getVisibleRows: () => ProcessedGraphRow[];
     getTopAndBottomVisibleRowIndex(): TopAndBottomVisibleRowIndex;
-    getOffsetSha(sha: Sha): Sha;
-    selectSha(sha: Sha, isAutoOrKeyScroll?: boolean): void;
+    getOffsetSha(sha: Sha, scrollDirection: 'up' | 'down' | 'none', lastScrollDirection: 'up' | 'down' | 'none' | undefined, isKeyboardNav: boolean): Sha;
+    private _pendingScrollUpdate;
+    private _lastSelectedRowIndex;
+    private _lastScrollDirection;
+    private _scrollToAlignmentOverride;
+    selectSha(sha: Sha, isKeyboardNav?: boolean): void;
     updateWidthByZone(widthToAssignForZone: number, graphZoneType: GraphZoneType, updatePreferredWidth?: boolean): void;
     updateCommitZoneContentWidthFromChange(): void;
     getCurrentWidthByZone(graphZoneType: GraphZoneType, withoutVerticalScrollWidth?: boolean): number;
@@ -312,16 +511,16 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     getLeftGutterBoxShadowAlpha(themeOpacityFactor: number): number;
     getRightGutterBoxShadowAlpha(themeOpacityFactor: number): number;
     updateMarkerRowIndices(types: GraphMarkerType[], nextProps?: GraphContainerProps): void;
+    private computeInteractiveScrollMarkers;
+    private onScrollMarkerClicked;
+    private getHeadPillDirection;
+    private onHeadPillClick;
     getMarkerColors(): GraphMarkerColors;
     initializeGraphZones(zoneSettings: GraphColumnsSettings | undefined, zoneOrdering: GraphZoneType[], width: number): GraphZone[];
     maybeSortGraphZoneOrderingFromSettings(zoneSettings?: GraphColumnsSettings): void;
     updateZonesFromSettings(zoneSettings?: GraphColumnsSettings): void;
-    getEdgeColumnMaxes(sha: Sha): number;
-    getEndingAndPassThroughEdgesByColumnFromPrevRow(graphRow: ProcessedGraphRow, prevRowEdges: RowEdges): RowEdges;
-    getFinalEdgeStateForGraphAndRow(graphRow: ProcessedGraphRow, prevRowEdges: RowEdges): RowEdges;
     loadEdgesBySha(): void;
-    processRows(graphRows?: GraphRow[]): void;
-    getStartingEdgesByColumn(currentRow: ProcessedGraphRow): EdgeByColumn;
+    processRows(graphRows?: GraphRow[], pinnedBranchFullName?: string | null): void;
     formatCommitDateTimeCallback: OnFormatCommitDateTime;
     formatCommitMessageCallback: FormatCommitMessage;
     formatRefShorthandCallback: FormatRefShorthand;
@@ -330,15 +529,73 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     getIconCallback: GetExternalIcon;
     onMissingAvatar: GetMissingAvatar;
     onMissingRefMetadata: GetMissingRefMetadata;
-    selectNext(topological?: boolean): void;
-    selectPrevious(topological?: boolean): void;
+    scheduleVisibleWipShasUpdate: () => void;
+    selectNext(shiftKey?: boolean, topological?: boolean, shiftSelectMode?: ShiftSelectMode): void;
+    selectPrevious(shiftKey?: boolean, topological?: boolean, shiftSelectMode?: ShiftSelectMode): void;
+    /**
+     * Navigate selection in the specified direction.
+     * @param direction - 'up' (towards newer/children) or 'down' (towards older/parents)
+     */
+    private selectInDirection;
+    /**
+     * Determine the next SHA to select based on direction and mode.
+     */
+    private getNextShaInDirection;
+    private getNextTopologicalSha;
+    private getPreviousTopologicalSha;
+    /**
+     * Find the next commit in the given direction that is topologically reachable from the anchor.
+     * Uses a hybrid approach: fast path for common cases, BFS fallback for complex graphs.
+     * @param preferSameColumn - If true, tries same-column navigation first (faster, used for ctrl+shift+arrow)
+     */
+    private findNextReachableFromAnchor;
+    /**
+     * Fast reachability check - determines if targetSha is reachable from startSha.
+     * Uses BFS with visit limit for performance.
+     */
+    private isReachableFrom;
+    /**
+     * Get the same-column child of a commit.
+     * Prefers children on the same column, then falls back to children where this commit is the first parent.
+     */
+    private getSameColumnChild;
+    /**
+     * Jump to the previous branching point (towards newer commits), or tip if none.
+     * A branching point is a commit with visible children on a different column.
+     */
+    private selectPreviousBranchingPoint;
+    /**
+     * Check if a commit is a branching point (has visible children on a different column).
+     */
+    private isBranchingPoint;
+    /**
+     * Get the same-column parent of a commit.
+     */
+    private getSameColumnParent;
+    /**
+     * Jump to the next branching point (towards older commits), or root if none.
+     * A branching point is a commit with visible children on a different column.
+     */
+    private selectNextBranchingPoint;
+    selectNextRef(): void;
+    selectPreviousRef(): void;
     selectHead(upstream?: boolean): void;
-    getAvailableColumnAndUseIt(): number;
-    getColumns(graphRow: GraphRow): number;
+    selectFirst(shiftKey?: boolean, shiftSelectMode?: ShiftSelectMode): void;
+    selectLast(shiftKey?: boolean, shiftSelectMode?: ShiftSelectMode): void;
+    selectPageUp(shiftKey?: boolean, shiftSelectMode?: ShiftSelectMode): void;
+    selectPageDown(shiftKey?: boolean, shiftSelectMode?: ShiftSelectMode): void;
+    /**
+     * Computes the column for a row.
+     *
+     * `parentsOverride` lets callers supply a different parent list than `graphRow.parents` —
+     * used by the scoped-graph feature to reserve lanes against synthetic ancestors when a
+     * row's real parents are hidden by scope filtering. Avoids mutating row.parents.
+     */
+    getColumns(graphRow: GraphRow, parentsOverride?: Sha[]): number;
     getFilteredHeadsForGraphRow(row: GraphRow, hasIncludes: boolean): Head[];
     getFilteredRemotesForGraphRow(row: GraphRow, hasIncludes: boolean): Remote[];
-    getFilteredTagsForGraphRow(row: GraphRow, hasIncludes: boolean, rowHasVisibleChild: boolean): Tag[];
-    loadRowsbySha(graphRows: GraphRow[]): void;
+    getBaseFilteredTagsForGraphRow(row: GraphRow, hasIncludesWithTags: boolean): Tag[];
+    loadRowsbySha(graphRows: GraphRow[], pinnedBranchFullName?: string | null): void;
     updateRowStatsConstraints(): void;
     updateTimelines(): void;
     clearTimelines(): void;
@@ -361,13 +618,19 @@ declare class GraphContainer extends React.Component<Props, ComponentState> impl
     onGraphContainerBlurred: OnGraphContainerBlurred;
     onGraphContainerMouseEnter: OnGraphMouseEnter;
     onGraphContainerMouseLeave: OnGraphMouseLeave;
+    private _headerHoverRestoreTimer?;
+    onGraphHeaderMouseDown: () => void;
+    onGraphHeaderMouseUp: (event: React.MouseEvent<any>) => void;
+    onGraphHeaderWheel: (event: React.WheelEvent<any>) => void;
+    onGraphHeaderMouseMove: (event: React.MouseEvent<any>) => void;
+    private hoverRowForHeaderEvent;
     onGraphResized: OnGraphResized;
     onGraphVisibleRowsUpdated(): void;
     getCurrentPlatform(): string;
     isMacOSPlatform(): boolean;
-    isCommitListFiltered(): boolean;
+    isFilteredSearch(): boolean;
     getGraphColumnSettingFromZoneType(graphZone: GraphZone): GraphColumnSetting;
-    decorateWithHelmet: (container: ReactElement<'div'>, cssVariables: CssVariables, nonce?: string) => React.JSX.Element;
+    decorateWithHelmet: (container: ReactElement<"div">, cssVariables: CssVariables, nonce?: string) => React.JSX.Element;
     render(): React.JSX.Element;
 }
 export default GraphContainer;

package/dist/components/graph/GraphHeaderRow.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import * as React from 'react';
 import type { GraphZone } from '../../domain/graph/GraphConstants';
 import type { ExcludeRefsById, GetExternalIcon, GraphColumnsSettings, GraphItemContext, IncludeOnlyRefsById, OnFilterColumnClick, OnGraphColumnReOrdered, OnGraphZoneResize, OnGraphZoneResizeEnd, OnGraphZoneResizeFromPropChange, OnPopupGraphHeaderContextMenu, OnSettingsClick, OnToggleRefNodesShown } from '../../domain/graph/GraphTypes';
 import type { TranslationFn } from '../../domain/language/LanguageTypes';
@@ -29,6 +29,10 @@ type Props = {
     translate: TranslationFn;
     width: number;
     height: number;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onWheel?: React.WheelEventHandler<HTMLDivElement>;
     settingsContext?: GraphItemContext;
 };
 declare class GraphHeaderRow extends React.PureComponent<Props> {

package/dist/components/graph/GraphScrollMarker.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import * as React from 'react';
 import type { GraphMarkerType } from '../../domain/graph/GraphConstants';
-import type { GraphMarkerColors, GraphMarkerRowIndices } from '../../domain/graph/GraphTypes';
+import type { GetExternalIcon, GraphMarkerColors, GraphMarkerRowIndices, InteractiveScrollMarker, OnScrollMarkerClicked } from '../../domain/graph/GraphTypes';
 interface Props {
     branchUpstreamRowIndices: number[];
     enabledScrollMarkerTypes: GraphMarkerType[];
@@ -9,14 +9,35 @@ interface Props {
     viewportHeight: number;
     markerRowIndices: GraphMarkerRowIndices;
     markerColors: GraphMarkerColors;
+    scrollTop: number;
     scrollWidth?: number;
     totalRows: number;
+    interactiveMarkers?: readonly InteractiveScrollMarker[];
+    onMarkerClick?: OnScrollMarkerClicked;
+    getExternalIcon?: GetExternalIcon;
 }
-export default class ScrollMarker extends React.PureComponent<Props> {
+interface HoveredRow {
+    rowIndex: number;
+    markers: InteractiveScrollMarker[];
+    tooltipTop: number;
+    color: string;
+}
+interface State {
+    hovered: HoveredRow | null;
+}
+export default class ScrollMarker extends React.PureComponent<Props, State> {
     canvas: HTMLCanvasElement | null;
+    state: State;
+    private memoMarkersByRow;
     componentDidMount(): void;
-    componentDidUpdate(nextProps: Props): void;
+    componentDidUpdate(prevProps: Props): void;
     updateCanvas(nextProps?: Props): void;
-    render(): ReactElement<'canvas'>;
+    private setHoveredRow;
+    private pickRowColor;
+    private clearHoveredIfRow;
+    private onRowHitMove;
+    private onRowHitClick;
+    private getMarkersByRowMemo;
+    render(): ReactElement<'div'>;
 }
 export {};

package/dist/components/graph/commitzone/CommitNode.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import * as React from 'react';
 import type { CommitType } from '../../../domain/commit/CommitTypes';
 import type { CssVariables } from '../../../domain/generic/GenericTypes';
 import type { GetExternalIcon, GraphItemContext, GraphZoneModeConstants } from '../../../domain/graph/GraphTypes';