handsontable 18.0.0 → 18.1.0-rc7

package/3rdparty/walkontable/src/selection/border/border.mjs

@@ -1,8 +1,10 @@
-import { addClass, hasClass, removeClass, getTrimmingContainer, innerWidth, innerHeight, offset, outerHeight, outerWidth, isHTMLElement } from '../../../../../helpers/dom/element.mjs';
-import { stopImmediatePropagation } from '../../../../../helpers/dom/event.mjs';
+import { addClass, hasClass, removeClass, getTrimmingContainer, isHTMLElement } from '../../../../../helpers/dom/element.mjs';
+import { stopImmediatePropagation, isRightClick } from '../../../../../helpers/dom/event.mjs';
 import { isMobileBrowser } from '../../../../../helpers/browser.mjs';
 import { getCornerStyle } from './utils.mjs';
+import { CUSTOM_SELECTION_TYPE } from '../constants.mjs';
 const BORDER_STYLE_CLASS_PREFIX = 'ht-border-style-';
+const MOVE_ZONE_THICKNESS = 6;
 const BORDER_STYLE_VERTICAL_SUFFIX = '-vertical';
 const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
 /**
@@ -14,6 +16,11 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         const documentBody = this.wot.rootDocument.body;
         this.eventManager.addEventListener(documentBody, 'mousedown', ()=>this.onMouseDown());
         this.eventManager.addEventListener(documentBody, 'mouseup', ()=>this.onMouseUp());
+        // Only the five border divs created by `createBorders` are present at this point, which is
+        // exactly the set that wants the fragment-selection hide-on-enter behavior. The lazily created
+        // `selectionHandles`/`moveCells` elements must NOT get it — `onMouseEnter` restores with an
+        // unconditional `display = 'block'`, which would un-hide a handle the visibility predicate
+        // wants hidden. Their own listeners are attached in their `create*` methods instead.
         if (this.main) {
             for(let c = 0, len = this.main.childNodes.length; c < len; c++){
                 const mainNode = this.main;
@@ -49,7 +56,7 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         event.preventDefault();
         stopImmediatePropagation(event);
         const documentBody = this.wot.rootDocument.body;
-        const bounds = parentElement.getBoundingClientRect();
+        const bounds = this.wot.domBindings.geometryReader.getBoundingClientRect(parentElement);
         // Hide border to prevents selection jumping when fragmentSelection is enabled.
         parentElement.style.display = 'none';
         /**
@@ -97,6 +104,13 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         style.position = 'absolute';
         style.top = '0';
         style.left = '0';
+        // Custom borders can overlap (e.g. two configured ranges sharing a cell). Each EDGE is stacked by
+        // its own width so overlapping ranges paint deterministically - the thicker (more emphasized) edge
+        // consistently sits on top. Stacking per edge, not per whole border, keeps a single visual line
+        // uniform where it crosses a shared cell (that cell's merged border mixes a thin and a thick side).
+        // The `main` wrapper must NOT carry a z-index, or it would create a stacking context and trap each
+        // edge's z-index inside its own border instead of ordering edges across overlapping borders.
+        const isCustomBorder = settings.selectionType === CUSTOM_SELECTION_TYPE;
         const createdDivs = [];
         for(let i = 0; i < 5; i++){
             const position = borderDivs[i];
@@ -127,6 +141,9 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             }
             style.height = `${getSettingsProperty('width')}px`;
             style.width = `${getSettingsProperty('width')}px`;
+            if (isCustomBorder) {
+                style.zIndex = `${getSettingsProperty('width') ?? 1}`;
+            }
             createdDivs.push(div);
             this.main.appendChild(div);
         }
@@ -148,9 +165,13 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             this.cornerDefaultStyle.borderStyle,
             this.cornerDefaultStyle.borderColor
         ].join(' ');
-        if (isMobileBrowser() && this.instance.getSetting('isDataViewInstance')) {
+        if (isMobileBrowser() && this.wot.getSetting('isDataViewInstance')) {
             this.createMultipleSelectorHandles();
         }
+        // The `selectionHandles` and `moveCells` elements are created lazily, on the first `appear()`
+        // whose visibility predicate resolves truthy. Creating them here would add 8 divs and their
+        // listeners to every border of every highlight in every overlay, for every instance — including
+        // the majority that leave both options off. See `appear()`.
         this.disappear();
         const { wtTable } = this.wot;
         let bordersHolder = wtTable.bordersHolder;
@@ -213,6 +234,153 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             handleStyleTarget.background = `color-mix(in srgb, ${cellMobileHandleBackgroundColor} ${cellMobileHandleBackgroundOpacity}%, transparent)`;
             handleStyleTarget.border = `${cellMobileHandleBorderWidth}px solid ${cellMobileHandleBorderColor}`;
         }
+        this.main.appendChild(this.selectionHandles.top);
+        this.main.appendChild(this.selectionHandles.bottom);
+        this.main.appendChild(this.selectionHandles.topHitArea);
+        this.main.appendChild(this.selectionHandles.bottomHitArea);
+    }
+    /**
+   * Creates the four edge-adjustment handle elements used by the `selectionHandles` feature.
+   * Visual styling (size, background, border, border-radius, cursor, z-index) is driven entirely
+   * by CSS via the `--ht-cell-selection-handle-*` tokens defined in the theme stylesheets.
+   * JS sets only `display:none` (initial hidden state) and the positioning `top`/`left` values
+   * during `positionAdjustHandles`. Class names (`wtSelectionHandle--<edge>`) carry orientation.
+   *
+   * Called lazily from `appear()` on the first draw whose `adjustHandlesVisible` predicate resolves
+   * truthy, so the elements never exist for instances that leave `selectionHandles` off. Because
+   * `registerListeners` has already run by then, each handle attaches its own `mousedown` listener
+   * here.
+   *
+   * @returns {AdjustHandles} The created handle set, so the caller can use it without a null check.
+   */ createAdjustHandles() {
+        const { rootDocument } = this.wot;
+        const make = (edge)=>{
+            const el = rootDocument.createElement('div');
+            el.className = `wtSelectionHandle wtSelectionHandle--${edge}`;
+            el.style.display = 'none';
+            this.main.appendChild(el);
+            this.eventManager.addEventListener(el, 'mousedown', (event)=>{
+                // A right-press must fall through to the context menu without starting a resize drag.
+                if (isRightClick(event)) {
+                    return;
+                }
+                stopImmediatePropagation(event);
+                event.preventDefault();
+                this.wot.getSetting('onSelectionHandleMouseDown', event, edge);
+            });
+            return el;
+        };
+        const top = make('top');
+        const bottom = make('bottom');
+        const start = make('start');
+        const end = make('end');
+        this.adjustHandles = {
+            top,
+            bottom,
+            start,
+            end,
+            styles: {
+                top: top.style,
+                bottom: bottom.style,
+                start: start.style,
+                end: end.style
+            }
+        };
+        return this.adjustHandles;
+    }
+    /**
+   * Creates the four edge move-zone band elements. Each band is a thin overlay div positioned along
+   * one selection edge. Hovering a band shows a `grab` cursor; a `mousedown` on a band calls the
+   * `onSelectionEdgeMouseDown` Walkontable setting so the core can initiate a move drag.
+   *
+   * Bands sit at z-index 100 — below the resize pills (z-index 115) and below the autofill fill
+   * handle (`.wtBorder.corner`, z-index 110), so both keep winning their own pixels in the corner
+   * regions where the bands overlap them. All four bands are created hidden; `positionMoveZone`
+   * + `appear` control their visibility.
+   *
+   * Called lazily from `appear()` on the first draw whose `moveEnabled` predicate resolves truthy,
+   * so the bands never exist for instances that leave `moveCells` off.
+   *
+   * @private
+   */ createMoveZone() {
+        const { rootDocument } = this.wot;
+        const make = (edge)=>{
+            const el = rootDocument.createElement('div');
+            el.className = 'wtMoveZone';
+            el.style.position = 'absolute';
+            el.style.display = 'none';
+            el.style.zIndex = '100';
+            el.style.pointerEvents = 'auto';
+            el.style.cursor = 'grab';
+            this.main.appendChild(el);
+            this.eventManager.addEventListener(el, 'mousedown', (event)=>{
+                // A right-press must fall through to the context menu without starting a move drag.
+                if (isRightClick(event)) {
+                    return;
+                }
+                stopImmediatePropagation(event);
+                event.preventDefault();
+                this.wot.getSetting('onSelectionEdgeMouseDown', event, edge);
+            });
+            return el;
+        };
+        const top = make('top');
+        const bottom = make('bottom');
+        const start = make('start');
+        const end = make('end');
+        this.moveZone = {
+            top,
+            bottom,
+            start,
+            end,
+            styles: {
+                top: top.style,
+                bottom: bottom.style,
+                start: start.style,
+                end: end.style
+            }
+        };
+    }
+    /**
+   * Positions the four move-zone bands along the selection edges. Each band is `MOVE_ZONE_THICKNESS`
+   * pixels tall (or wide for the vertical bands) and centered on its respective edge line. RTL layout
+   * is handled by using `right` instead of `left` for the inline axis, mirroring `positionAdjustHandles`.
+   *
+   * @private
+   * @param {number} top The selection border top (px, container-relative).
+   * @param {number} inlineStart The selection border inline-start (px, container-relative).
+   * @param {number} width The selection border width (px).
+   * @param {number} height The selection border height (px).
+   */ positionMoveZone(top, inlineStart, width, height) {
+        const isRtl = this.wot.wtSettings.getSetting('rtlMode');
+        const inlineProp = isRtl ? 'right' : 'left';
+        // Only ever called from `appear()` after the bands have been created.
+        const s = this.moveZone.styles;
+        const half = Math.floor(MOVE_ZONE_THICKNESS / 2);
+        // Top band — full width, centered on the top edge.
+        s.top[inlineProp] = `${inlineStart}px`;
+        s.top.top = `${top - half}px`;
+        s.top.width = `${width}px`;
+        s.top.height = `${MOVE_ZONE_THICKNESS}px`;
+        s.top.display = 'block';
+        // Bottom band — full width, centered on the bottom edge.
+        s.bottom[inlineProp] = `${inlineStart}px`;
+        s.bottom.top = `${top + height - half}px`;
+        s.bottom.width = `${width}px`;
+        s.bottom.height = `${MOVE_ZONE_THICKNESS}px`;
+        s.bottom.display = 'block';
+        // Start band — full height, centered on the inline-start edge.
+        s.start[inlineProp] = `${inlineStart - half}px`;
+        s.start.top = `${top}px`;
+        s.start.width = `${MOVE_ZONE_THICKNESS}px`;
+        s.start.height = `${height}px`;
+        s.start.display = 'block';
+        // End band — full height, centered on the inline-end edge.
+        s.end[inlineProp] = `${inlineStart + width - half}px`;
+        s.end.top = `${top}px`;
+        s.end.width = `${MOVE_ZONE_THICKNESS}px`;
+        s.end.height = `${height}px`;
+        s.end.display = 'block';
     }
     /**
    * Checks if the given coordinates are south-east of the area selection. If `true` then
@@ -288,20 +456,512 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         }
     }
     /**
+   * Tells whether a selection edge lands exactly on a frozen-pane boundary and is therefore owned by
+   * the frozen overlay. Depends only on the fixed-pane settings and the raw corner, so every overlay
+   * evaluates it on identical inputs.
+   *
+   * @private
+   * @param {'row'|'column'} axis The freeze axis to test (`row` → `fixedRowsTop`, `column` → `fixedColumnsStart`).
+   * @param {number} fromIndex The selection's top (`row`) or inline-start (`column`) corner index.
+   * @returns {boolean}
+   */ isFrozenBoundaryEdge(axis, fromIndex) {
+        if (axis === 'row') {
+            const fixedRowsTop = this.wot.getSetting('fixedRowsTop');
+            return fixedRowsTop > 0 && fromIndex === fixedRowsTop;
+        }
+        const fixedColumnsStart = this.wot.getSetting('fixedColumnsStart');
+        return fixedColumnsStart > 0 && fromIndex === fixedColumnsStart;
+    }
+    /**
+   * Tells whether a selection's bottom or end edge lands immediately before a top or start frozen pane.
+   *
+   * @private
+   * @param {'row'|'column'} axis The freeze axis to test.
+   * @param {number} toIndex The selection's bottom (`row`) or inline-end (`column`) corner index.
+   * @returns {boolean}
+   */ isFrozenStartBoundaryOppositeEdge(axis, toIndex) {
+        if (axis === 'row') {
+            const fixedRowsTop = this.wot.getSetting('fixedRowsTop');
+            return fixedRowsTop > 0 && toIndex === fixedRowsTop - 1;
+        }
+        const fixedColumnsStart = this.wot.getSetting('fixedColumnsStart');
+        return fixedColumnsStart > 0 && toIndex === fixedColumnsStart - 1;
+    }
+    /**
+   * Tells whether the selection's boundary corner (the cell flush with a frozen-pane line) has
+   * scrolled behind the frozen pane in the master viewport. The frozen overlay can't detect this
+   * itself (its rendered range is sticky), so we consult the scroll-aware master and stop drawing the
+   * edge once the cell is occluded by the pane.
+   *
+   * @private
+   * @param {'row'|'column'} axis The freeze axis to test (`row` → vertical, `column` → horizontal).
+   * @param {number} fromIndex The selection's boundary corner index on that axis.
+   * @returns {boolean} `true` when the boundary corner is scrolled out (edge must not be drawn).
+   */ isBoundaryCornerScrolledOut(axis, fromIndex) {
+        const masterTable = this.wot.cloneSource?.wtTable;
+        if (!masterTable) {
+            return false;
+        }
+        const firstVisible = axis === 'row' ? masterTable.getFirstVisibleRow() : masterTable.getFirstVisibleColumn();
+        return firstVisible >= 0 && fromIndex < firstVisible;
+    }
+    /**
+   * Mirror of {@link Border#isFrozenBoundaryEdge} for the bottom freeze line: tells whether the
+   * selection's bottom edge lands exactly on the `fixedRowsBottom` boundary (the line between the last
+   * non-frozen row and the first bottom-frozen row), and is therefore owned by the bottom overlay.
+   *
+   * @private
+   * @param {number} toIndex The selection's bottom corner row index.
+   * @returns {boolean}
+   */ isFrozenBottomBoundaryEdge(toIndex) {
+        const fixedRowsBottom = this.wot.getSetting('fixedRowsBottom');
+        const totalRows = this.wot.getSetting('totalRows');
+        return fixedRowsBottom > 0 && toIndex === totalRows - fixedRowsBottom - 1;
+    }
+    /**
+   * Mirror of {@link Border#isFrozenStartBoundaryOppositeEdge} for the bottom freeze line: tells
+   * whether the selection's top edge lands exactly on the `fixedRowsBottom` boundary (the selection
+   * starts at the first bottom-frozen row), so the top handle sits on the freeze line and must be
+   * suppressed there like every other frozen-seam edge.
+   *
+   * @private
+   * @param {number} fromIndex The selection's top corner row index.
+   * @returns {boolean}
+   */ isFrozenBottomBoundaryOppositeEdge(fromIndex) {
+        const fixedRowsBottom = this.wot.getSetting('fixedRowsBottom');
+        const totalRows = this.wot.getSetting('totalRows');
+        return fixedRowsBottom > 0 && fromIndex === totalRows - fixedRowsBottom;
+    }
+    /**
+   * Mirror of {@link Border#isBoundaryCornerScrolledOut} for the bottom freeze line: tells whether the
+   * selection's bottom boundary cell has scrolled behind the bottom frozen pane in the master viewport
+   * (it then drops below the last visible master row), so the edge must not be drawn.
+   *
+   * @private
+   * @param {number} toIndex The selection's bottom boundary corner row index.
+   * @returns {boolean} `true` when the boundary corner is scrolled out (edge must not be drawn).
+   */ isBottomBoundaryCornerScrolledOut(toIndex) {
+        const masterTable = this.wot.cloneSource?.wtTable;
+        if (!masterTable) {
+            return false;
+        }
+        const lastVisible = masterTable.getLastVisibleRow();
+        return lastVisible >= 0 && toIndex > lastVisible;
+    }
+    /**
+   * Draws the selection-border edge(s) that lie exactly on a frozen-pane boundary, where the master
+   * renders them on the freeze line under the occluding frozen overlay. Re-draws each such edge
+   * inside the frozen overlay(s) that own it (clamped to each overlay's rendered range), while
+   * `appear` hides the matching master edge so exactly one line is drawn per segment.
+   *
+   * @param {number[]} corners The selection corners `[fromRow, fromColumn, toRow, toColumn]`.
+   * @returns {boolean} `true` when a boundary edge was drawn (regular drawing should be skipped).
+   */ drawFrozenBoundaryEdge(corners) {
+        const { wtTable } = this.wot;
+        const overlayName = wtTable.name;
+        const isTopOverlay = overlayName === 'top';
+        const isInlineStartOverlay = overlayName === 'inline_start';
+        const isCornerOverlay = overlayName === 'top_inline_start_corner';
+        const isBottomOverlay = overlayName === 'bottom';
+        const isBottomCornerOverlay = overlayName === 'bottom_inline_start_corner';
+        if (!isTopOverlay && !isInlineStartOverlay && !isCornerOverlay && !isBottomOverlay && !isBottomCornerOverlay) {
+            return false;
+        }
+        // In RTL the horizontal axis is mirrored: edges are anchored with `right`, like the regular flow
+        // in `appear`. Row-freeze (vertical) geometry is direction-agnostic.
+        const isRtl = this.wot.wtSettings.getSetting('rtlMode');
+        const [fromRow, fromColumn, toRow, toColumn] = corners;
+        const borderWidth = this.settings.border?.width ?? 0;
+        // Along-axis length extension mirroring `appear`'s `ceil(borderWidth / 2)`, so corners meet.
+        // Without it the line falls short of the master's side edges for borders thicker than 1px.
+        const delta = Math.ceil(borderWidth / 2);
+        // `rowEdgeOwned`/`columnEdgeOwned` are true when the selection's top/start edge lands on the
+        // freeze line AND its boundary cell is still visible. Resolved once and reused by every branch
+        // below.
+        const rowEdgeOwned = this.isFrozenBoundaryEdge('row', fromRow) && !this.isBoundaryCornerScrolledOut('row', fromRow);
+        const columnEdgeOwned = this.isFrozenBoundaryEdge('column', fromColumn) && !this.isBoundaryCornerScrolledOut('column', fromColumn);
+        // The bottom-freeze counterpart of `rowEdgeOwned`: the selection's bottom edge lands on the
+        // `fixedRowsBottom` line and its boundary cell is still visible in the master.
+        const bottomRowEdgeOwned = this.isFrozenBottomBoundaryEdge(toRow) && !this.isBottomBoundaryCornerScrolledOut(toRow);
+        // The row-freeze edge straddles the freeze line: the master draws its lower half (below the seam)
+        // and the frozen overlay its upper half (above the seam, on top of the opaque pane), so together
+        // they show the full thickness in both selection and edit modes. Split between the `top` overlay
+        // (non-frozen columns) and the corner overlay (frozen columns), each clamped to its rendered range.
+        if (rowEdgeOwned && (isTopOverlay || isCornerOverlay)) {
+            const firstColumn = Math.max(fromColumn, wtTable.getFirstRenderedColumn());
+            const lastColumn = Math.min(toColumn, wtTable.getLastRenderedColumn());
+            if (this.drawRowFreezeEdge(firstColumn, lastColumn, isRtl, delta)) {
+                return true;
+            }
+        }
+        // The column-freeze edge is split between the `inline_start` overlay (non-frozen rows) and the
+        // top/bottom corner overlays (top-frozen / bottom-frozen rows), each clamped to its own rendered
+        // row range so together they cover the edge without overlap. Mirror of the row-freeze branch on
+        // the column axis. Without the bottom corner the slice that reaches down into the bottom-frozen
+        // rows would be occluded by that overlay and left undrawn.
+        if (columnEdgeOwned && (isInlineStartOverlay || isCornerOverlay || isBottomCornerOverlay)) {
+            const firstRow = Math.max(fromRow, wtTable.getFirstRenderedRow());
+            const lastRow = Math.min(toRow, wtTable.getLastRenderedRow());
+            if (this.drawColumnFreezeEdge(firstRow, lastRow, isRtl, delta)) {
+                return true;
+            }
+        }
+        // The bottom-freeze edge is split between the `bottom` overlay (non-frozen columns) and the bottom
+        // corner overlay (frozen columns), mirroring the row-freeze branch on the bottom axis. The bottom
+        // overlay occludes the master's edge on the freeze line, so re-draw it here.
+        if (bottomRowEdgeOwned && (isBottomOverlay || isBottomCornerOverlay)) {
+            const firstColumn = Math.max(fromColumn, wtTable.getFirstRenderedColumn());
+            const lastColumn = Math.min(toColumn, wtTable.getLastRenderedColumn());
+            if (this.drawRowFreezeBottomEdge(firstColumn, lastColumn, isRtl, delta)) {
+                return true;
+            }
+        }
+        // When the corner lands on BOTH freeze lines, the top and start edges meet in the frozen×frozen
+        // square owned by the corner overlay, which occludes both their tips and leaves a gap. Draw that
+        // connecting square here to close it.
+        if (isCornerOverlay && rowEdgeOwned && columnEdgeOwned) {
+            if (this.drawFrozenBoundaryCorner(isRtl, borderWidth)) {
+                return true;
+            }
+        }
+        // Bottom mirror of the branch above: when the corner lands on BOTH the bottom and column freeze
+        // lines, the bottom and start edges meet in the bottom corner overlay's frozen×frozen square,
+        // which occludes their tips. Draw that connecting square here to close the gap.
+        if (isBottomCornerOverlay && bottomRowEdgeOwned && columnEdgeOwned) {
+            if (this.drawFrozenBottomBoundaryCorner(isRtl, borderWidth)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+   * Shared inline-axis writer for the row/bottom freeze edges. Given the boundary cells and an
+   * already-resolved vertical position, writes the horizontal anchor + width (RTL-aware) on the
+   * supplied border element and reveals it. The top and bottom freeze edges differ only in which
+   * gridline they sit on and which element they reuse, so they delegate the identical inline math
+   * here. Cheap range/cell-lookup guards run before any reflow-forcing `geometryReader.offset()`, so non-drawing
+   * calls leave the styles untouched.
+   *
+   * @private
+   * @param {number} boundaryRow The row whose edge carries the freeze line.
+   * @param {CSSStyleDeclaration} style The border element to position (`topStyle` or `bottomStyle`).
+   * @param {number} firstColumn The first column index to span (clamped to the overlay).
+   * @param {number} lastColumn The last column index to span (clamped to the overlay).
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} delta The along-axis length extension (`ceil(borderWidth / 2)`).
+   * @param {Function} resolveTop Resolves the edge's `top` (px) from the boundary cell and offsets.
+   * @returns {boolean} `true` when the edge was drawn.
+   */ drawHorizontalFreezeEdge(boundaryRow, style, firstColumn, lastColumn, isRtl, delta, resolveTop) {
+        const { geometryReader } = this.wot.domBindings;
+        if (lastColumn < firstColumn) {
+            return false;
+        }
+        const { wtTable } = this.wot;
+        const boundaryTD = wtTable.getCell(this.wot.createCellCoords(boundaryRow, firstColumn));
+        const boundaryEndTD = wtTable.getCell(this.wot.createCellCoords(boundaryRow, lastColumn));
+        if (!isHTMLElement(boundaryTD) || !isHTMLElement(boundaryEndTD)) {
+            return false;
+        }
+        const containerOffset = geometryReader.offset(wtTable.TABLE);
+        const boundaryOffset = geometryReader.offset(boundaryTD);
+        const endOffset = geometryReader.offset(boundaryEndTD);
+        // The `-1` overlaps the border shared with the previous column, mirroring `appear`. At column 0
+        // there is no previous column, so drop the shift and shorten the line to avoid protruding past
+        // the pane edge.
+        const startShift = firstColumn === 0 ? 0 : 1;
+        this.disappear();
+        style.top = `${resolveTop(boundaryTD, boundaryOffset, containerOffset.top)}px`;
+        if (isRtl) {
+            // `firstColumn` (lowest index) is the visual-right cell, `lastColumn` the visual-left one.
+            const spanRightX = boundaryOffset.left + geometryReader.outerWidth(boundaryTD);
+            const tableRightX = containerOffset.left + geometryReader.outerWidth(wtTable.TABLE);
+            style.right = `${tableRightX - spanRightX - startShift}px`;
+            style.width = `${spanRightX - endOffset.left + delta - (1 - startShift)}px`;
+        } else {
+            style.left = `${boundaryOffset.left - containerOffset.left - startShift}px`;
+            const edgeWidth = endOffset.left + geometryReader.outerWidth(boundaryEndTD) - boundaryOffset.left + delta - (1 - startShift);
+            style.width = `${edgeWidth}px`;
+        }
+        style.display = 'block';
+        return true;
+    }
+    /**
+   * Draws the selection's top edge on the row freeze line across the given (clamped) column span,
+   * anchored one pixel inside the freeze line by a constant so borders of different widths line up.
+   *
+   * @private
+   * @param {number} firstColumn The first column index to span (clamped to the overlay).
+   * @param {number} lastColumn The last column index to span (clamped to the overlay).
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} delta The along-axis length extension (`ceil(borderWidth / 2)`).
+   * @returns {boolean} `true` when the edge was drawn.
+   */ drawRowFreezeEdge(firstColumn, lastColumn, isRtl, delta) {
+        const boundaryRow = this.wot.getSetting('fixedRowsTop') - 1;
+        // The seam sits on the boundary cell's BOTTOM edge, one pixel up to overlap the shared gridline.
+        return this.drawHorizontalFreezeEdge(boundaryRow, this.topStyle, firstColumn, lastColumn, isRtl, delta, (boundaryTD, boundaryOffset, containerTop)=>boundaryOffset.top + this.wot.domBindings.geometryReader.outerHeight(boundaryTD) - containerTop - 1);
+    }
+    /**
+   * Mirror of {@link Border#drawRowFreezeEdge} for the bottom freeze line: draws the selection's
+   * bottom edge on the `fixedRowsBottom` line across the given (clamped) column span. The boundary
+   * cell is the FIRST bottom-frozen row, and the freeze line is its TOP edge (= bottom of the last
+   * non-frozen row). Uses the `bottom` border element.
+   *
+   * @private
+   * @param {number} firstColumn The first column index to span (clamped to the overlay).
+   * @param {number} lastColumn The last column index to span (clamped to the overlay).
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} delta The along-axis length extension (`ceil(borderWidth / 2)`).
+   * @returns {boolean} `true` when the edge was drawn.
+   */ drawRowFreezeBottomEdge(firstColumn, lastColumn, isRtl, delta) {
+        const fixedRowsBottom = this.wot.getSetting('fixedRowsBottom');
+        const totalRows = this.wot.getSetting('totalRows');
+        const boundaryRow = totalRows - fixedRowsBottom;
+        // The freeze line is the boundary cell's TOP edge; position like `appear`'s bottom border
+        // (`cellBottom - thickness + delta`, where `cellBottom` is the freeze line) so borders of
+        // different widths stay aligned on the gridline.
+        return this.drawHorizontalFreezeEdge(boundaryRow, this.bottomStyle, firstColumn, lastColumn, isRtl, delta, (_boundaryTD, boundaryOffset, containerTop)=>boundaryOffset.top - containerTop - parseInt(this.bottomStyle.height, 10) + delta);
+    }
+    /**
+   * Draws the selection's inline-start edge on the column freeze line across the given (clamped) row
+   * span, anchored one pixel inside the freeze line by a constant so borders of different widths line
+   * up. Guard/reflow behavior mirrors `drawRowFreezeEdge`.
+   *
+   * @private
+   * @param {number} firstRow The first row index to span (clamped to the overlay).
+   * @param {number} lastRow The last row index to span (clamped to the overlay).
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} delta The along-axis length extension (`ceil(borderWidth / 2)`).
+   * @returns {boolean} `true` when the edge was drawn.
+   */ drawColumnFreezeEdge(firstRow, lastRow, isRtl, delta) {
+        if (lastRow < firstRow) {
+            return false;
+        }
+        const { geometryReader } = this.wot.domBindings;
+        const { wtTable } = this.wot;
+        const boundaryColumn = this.wot.getSetting('fixedColumnsStart') - 1;
+        const boundaryTD = wtTable.getCell(this.wot.createCellCoords(firstRow, boundaryColumn));
+        const boundaryEndTD = wtTable.getCell(this.wot.createCellCoords(lastRow, boundaryColumn));
+        if (!isHTMLElement(boundaryTD) || !isHTMLElement(boundaryEndTD)) {
+            return false;
+        }
+        const containerOffset = geometryReader.offset(wtTable.TABLE);
+        const boundaryOffset = geometryReader.offset(boundaryTD);
+        const endOffset = geometryReader.offset(boundaryEndTD);
+        // The `-1` overlaps the border shared with the row above, like `appear`. At row 0 there is no row
+        // above, so drop the shift and shorten the line to avoid protruding past the pane top.
+        const atFirstRow = firstRow === 0;
+        let edgeTop = boundaryOffset.top - containerOffset.top - 1;
+        let edgeHeight = endOffset.top + geometryReader.outerHeight(boundaryEndTD) - boundaryOffset.top + delta;
+        if (atFirstRow) {
+            edgeTop += 1;
+            edgeHeight = Math.max(edgeHeight - 1, 0);
+        }
+        this.disappear();
+        this.startStyle.top = `${edgeTop}px`;
+        if (isRtl) {
+            // RTL: the frozen pane sits on the right, so the freeze line is the boundary cell's LEFT edge,
+            // and the edge is drawn one pixel inside it (to the right) via the `right` anchor.
+            const tableRightX = containerOffset.left + geometryReader.outerWidth(wtTable.TABLE);
+            this.startStyle.right = `${tableRightX - boundaryOffset.left - 1}px`;
+        } else {
+            const freezeLineX = boundaryOffset.left + geometryReader.outerWidth(boundaryTD);
+            this.startStyle.left = `${freezeLineX - containerOffset.left - 1}px`;
+        }
+        this.startStyle.height = `${edgeHeight}px`;
+        this.startStyle.display = 'block';
+        return true;
+    }
+    /**
+   * Shared writer for the freeze-corner squares. Draws the `borderWidth`-sized square bridging a
+   * row/bottom edge and the inline-start edge where a selection corner lands on both freeze lines,
+   * since that square sits in the corner overlay's frozen×frozen region that occludes both edges'
+   * tips. Anchored one pixel inside the freeze column; the caller resolves the vertical position and
+   * the border element to reuse. Reflow/guard behavior mirrors the freeze-edge helpers.
+   *
+   * @private
+   * @param {number} boundaryRow The row whose edge carries the freeze line.
+   * @param {CSSStyleDeclaration} style The border element to position (`topStyle` or `bottomStyle`).
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} borderWidth The configured border width in pixels.
+   * @param {Function} resolveTop Resolves the square's `top` (px) from the boundary cell and offsets.
+   * @returns {boolean} `true` when the corner square was drawn.
+   */ drawFreezeCorner(boundaryRow, style, isRtl, borderWidth, resolveTop) {
+        const { geometryReader } = this.wot.domBindings;
+        const { wtTable } = this.wot;
+        const boundaryColumn = this.wot.getSetting('fixedColumnsStart') - 1;
+        const boundaryTD = wtTable.getCell(this.wot.createCellCoords(boundaryRow, boundaryColumn));
+        if (!isHTMLElement(boundaryTD)) {
+            return false;
+        }
+        const containerOffset = geometryReader.offset(wtTable.TABLE);
+        const boundaryOffset = geometryReader.offset(boundaryTD);
+        this.disappear();
+        style.top = `${resolveTop(boundaryTD, boundaryOffset, containerOffset.top)}px`;
+        style.height = `${borderWidth}px`;
+        style.width = `${borderWidth}px`;
+        if (isRtl) {
+            // RTL: the frozen pane is on the right, so the freeze line is the boundary cell's LEFT edge;
+            // the square sits one pixel inside it (to the right) via the `right` anchor.
+            const tableRightX = containerOffset.left + geometryReader.outerWidth(wtTable.TABLE);
+            style.right = `${tableRightX - boundaryOffset.left - 1}px`;
+        } else {
+            const freezeLineX = boundaryOffset.left + geometryReader.outerWidth(boundaryTD);
+            style.left = `${freezeLineX - containerOffset.left - 1}px`;
+        }
+        style.display = 'block';
+        return true;
+    }
+    /**
+   * Draws the corner square bridging the top and inline-start edges where a selection corner lands on
+   * both the `fixedRowsTop` and `fixedColumnsStart` freeze lines. Reuses the `top` border element.
+   *
+   * @private
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} borderWidth The configured border width in pixels.
+   * @returns {boolean} `true` when the corner square was drawn.
+   */ drawFrozenBoundaryCorner(isRtl, borderWidth) {
+        const boundaryRow = this.wot.getSetting('fixedRowsTop') - 1;
+        // The square sits on the boundary cell's BOTTOM edge (the top freeze line), one pixel up.
+        return this.drawFreezeCorner(boundaryRow, this.topStyle, isRtl, borderWidth, (boundaryTD, boundaryOffset, containerTop)=>boundaryOffset.top + this.wot.domBindings.geometryReader.outerHeight(boundaryTD) - containerTop - 1);
+    }
+    /**
+   * Bottom mirror of {@link Border#drawFrozenBoundaryCorner}: draws the corner square bridging the
+   * bottom and inline-start edges where a selection corner lands on both the `fixedRowsBottom` and
+   * `fixedColumnsStart` freeze lines. The boundary cell is the FIRST bottom-frozen row and the bottom
+   * freeze line is its TOP edge. Reuses the `bottom` border element.
+   *
+   * @private
+   * @param {boolean} isRtl Whether the grid is rendered right-to-left.
+   * @param {number} borderWidth The configured border width in pixels.
+   * @returns {boolean} `true` when the corner square was drawn.
+   */ drawFrozenBottomBoundaryCorner(isRtl, borderWidth) {
+        const fixedRowsBottom = this.wot.getSetting('fixedRowsBottom');
+        const totalRows = this.wot.getSetting('totalRows');
+        const boundaryRow = totalRows - fixedRowsBottom;
+        const delta = Math.ceil(borderWidth / 2);
+        // Align with the bottom edge's vertical position (`cellBottom - thickness + delta`, where
+        // `cellBottom` is the freeze line = the boundary cell's TOP edge) so it joins seamlessly.
+        return this.drawFreezeCorner(boundaryRow, this.bottomStyle, isRtl, borderWidth, (_boundaryTD, boundaryOffset, containerTop)=>boundaryOffset.top - containerTop - borderWidth + delta);
+    }
+    /**
+   * Resolves the position the fill handle's overflow checks measure from, in the same space as the
+   * trimming container they compare against: viewport coordinates when the window trims the grid,
+   * otherwise the offset inside the scrollable content.
+   *
+   * A cell's own `offsetLeft`/`offsetTop` are relative to the `<table>`, and the master shifts that
+   * table through the spreader by the frozen-pane size and by the first rendered column/row offset.
+   * That shift is missing from the cell offsets, so the handle could measure as "inside" while it
+   * protruded past the content edge and forced a spurious scrollbar. The hider spans the whole
+   * scrollable content, so measuring from it puts the shift back.
+   *
+   * @private
+   * @param {HTMLElement} TD The cell that carries the fill handle (the selection's bottom-end cell).
+   * @param {{ top: number, left: number }} TDOffset The cell's already-measured document offset.
+   * @param {boolean} trimToWindow Whether the grid is trimmed by the window rather than an element.
+   * @returns {{ top: number, left: number }}
+   */ getFillHandleAnchor(TD, TDOffset, trimToWindow) {
+        const { geometryReader } = this.wot.domBindings;
+        if (trimToWindow) {
+            const { top, left } = geometryReader.getBoundingClientRect(TD);
+            return {
+                top,
+                left
+            };
+        }
+        const hiderOffset = geometryReader.offset(this.wot.wtTable.hider);
+        return {
+            top: TDOffset.top - hiderOffset.top,
+            left: TDOffset.left - hiderOffset.left
+        };
+    }
+    /**
+   * Tells whether the fill handle must be pulled back inside the selection's inline-end edge instead
+   * of straddling it. Only the grid's last column needs that, where the overhang would spill out of
+   * the trimming container and force a scrollbar. A selection ending on the last frozen-start column
+   * does not: the frozen overlay draws that handle itself and already lands it flush against its own
+   * edge, which `border.spec.js` pins to the pixel — lifting it there moves it off that line.
+   *
+   * @private
+   * @param {number} toColumn The selection's inline-end column index.
+   * @param {number} anchorInlineStart The fill handle anchor's inline-start offset.
+   * @param {HTMLElement} TD The cell that carries the fill handle.
+   * @param {HTMLElement | Window} trimmingContainer The container that clips the grid.
+   * @param {boolean} isRtl Whether the grid renders right-to-left.
+   * @returns {boolean}
+   */ isCornerLiftedAtInlineEnd(toColumn, anchorInlineStart, TD, trimmingContainer, isRtl) {
+        if (toColumn !== this.wot.getSetting('totalColumns') - 1) {
+            return false;
+        }
+        const { geometryReader } = this.wot.domBindings;
+        const cornerHalfWidth = parseInt(String(this.cornerDefaultStyle.width), 10) / 2;
+        if (isRtl) {
+            return anchorInlineStart - cornerHalfWidth < 0;
+        }
+        return anchorInlineStart + geometryReader.outerWidth(TD) + cornerHalfWidth >= geometryReader.innerWidth(trimmingContainer);
+    }
+    /**
+   * Block-axis mirror of {@link Border#isCornerLiftedAtInlineEnd}. Two rows pull the fill handle back
+   * inside the selection's bottom edge: the grid's last row, where the overhang would spill out of
+   * the trimming container, and the last scrollable row above the `fixedRowsBottom` line, where the
+   * bottom overlay is painted above the master and would cover the overhang. The last frozen-top row
+   * is not one of them — like the frozen-start column, that handle is drawn by the overlay itself and
+   * already sits flush against its edge.
+   *
+   * @private
+   * @param {number} toRow The selection's bottom row index.
+   * @param {number} anchorTop The fill handle anchor's top offset.
+   * @param {HTMLElement} TD The cell that carries the fill handle.
+   * @param {HTMLElement | Window} trimmingContainer The container that clips the grid.
+   * @returns {boolean}
+   */ isCornerLiftedAtBlockEnd(toRow, anchorTop, TD, trimmingContainer) {
+        if (this.isFrozenBottomBoundaryEdge(toRow)) {
+            return true;
+        }
+        if (toRow !== this.wot.getSetting('totalRows') - 1) {
+            return false;
+        }
+        const { geometryReader } = this.wot.domBindings;
+        const cornerHalfHeight = parseInt(String(this.cornerDefaultStyle.height), 10) / 2;
+        return anchorTop + geometryReader.outerHeight(TD) + cornerHalfHeight >= geometryReader.innerHeight(trimmingContainer);
+    }
+    /**
    * Show border around one or many cells.
    *
+   * The fill handle is normally centered on the selection's bottom-end corner, so half of it hangs
+   * past that corner. Where that overhang cannot survive — a container edge, or a frozen pane that
+   * clips or covers it — the handle is pulled back inside instead, and `wtCornerInlineEndEdge` /
+   * `wtCornerBlockEndEdge` pull its hit area along. See {@link Border#isCornerLiftedAtInlineEnd} and
+   * {@link Border#isCornerLiftedAtBlockEnd} for which edges those are.
+   *
    * @param {Array} corners The corner coordinates.
    */ appear(corners) {
         if (this.disabled) {
             return;
         }
+        // A selection flush against a frozen-pane boundary has its top/inline-start edge rendered by the
+        // master on the freeze line, where the frozen overlay occludes it. Re-draw it inside the frozen
+        // overlay so it stays visible; no-op unless `fixedRowsTop`/`fixedColumnsStart` is used.
+        //
+        // When it draws, we return early and intentionally skip the rest of `appear` (corner/fill handle,
+        // the other edges): in these overlays the selection's cell isn't rendered here — only the seam
+        // edge slice is — so there is nothing else to draw.
+        if (this.drawFrozenBoundaryEdge(corners)) {
+            return;
+        }
         let [fromRow, fromColumn, toRow, toColumn] = corners;
+        // Capture the top-start corner before the clamping below mutates it — used to suppress the
+        // master's boundary edge (so it isn't doubled by the frozen overlay's edge).
+        const originalFromRow = fromRow;
+        const originalFromColumn = fromColumn;
+        const originalToRow = toRow;
+        const originalToColumn = toColumn;
         // borders can not be rendered on headers so hide them
         if (fromRow < 0 && toRow < 0 || fromColumn < 0 && toColumn < 0) {
             this.disappear();
             return;
         }
         const { wtTable, rootDocument, rootWindow } = this.wot;
+        const { geometryReader } = this.wot.domBindings;
         const isMultiple = fromRow !== toRow || fromColumn !== toColumn;
         const firstRenderedRow = wtTable.getFirstRenderedRow();
         const lastRenderedRow = wtTable.getLastRenderedRow();
@@ -337,22 +997,22 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         const toTD = isMultiple ? wtTable.getCell(this.wot.createCellCoords(toRow, toColumn)) : fromTD;
         const fromTDEl = fromTD;
         const toTDEl = isHTMLElement(toTD) ? toTD : fromTDEl;
-        const fromOffset = offset(fromTDEl);
-        const toOffset = isMultiple ? offset(toTDEl) : fromOffset;
-        const containerOffset = offset(wtTable.TABLE);
+        const fromOffset = geometryReader.offset(fromTDEl);
+        const toOffset = isMultiple ? geometryReader.offset(toTDEl) : fromOffset;
+        const containerOffset = geometryReader.offset(wtTable.TABLE);
         const minTop = fromOffset.top;
         const minLeft = fromOffset.left;
         const isRtl = this.wot.wtSettings.getSetting('rtlMode');
         let inlineStartPos = 0;
         let width = 0;
         if (isRtl) {
-            const containerWidth = outerWidth(wtTable.TABLE);
-            const fromWidth = outerWidth(fromTDEl);
+            const containerWidth = geometryReader.outerWidth(wtTable.TABLE);
+            const fromWidth = geometryReader.outerWidth(fromTDEl);
             const gridRightPos = rootWindow.innerWidth - containerOffset.left - containerWidth;
             width = minLeft + fromWidth - toOffset.left;
             inlineStartPos = rootWindow.innerWidth - minLeft - fromWidth - gridRightPos - 1;
         } else {
-            width = toOffset.left + outerWidth(toTDEl) - minLeft;
+            width = toOffset.left + geometryReader.outerWidth(toTDEl) - minLeft;
             inlineStartPos = minLeft - containerOffset.left - 1;
         }
         if (this.isEntireColumnSelected(fromRow, toRow)) {
@@ -367,7 +1027,7 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             }
         }
         let top = minTop - containerOffset.top - 1;
-        let height = toOffset.top + outerHeight(toTDEl) - minTop;
+        let height = toOffset.top + geometryReader.outerHeight(toTDEl) - minTop;
         if (this.isEntireRowSelected(fromColumn, toColumn)) {
             const columnHeader = fromColumn;
             const modifiedValues = this.getDimensionsFromHeader('rows', fromRow, toRow, columnHeader, containerOffset);
@@ -379,7 +1039,7 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
                 fromTD = fromTH;
             }
         }
-        const style = rootWindow.getComputedStyle(fromTDEl);
+        const style = geometryReader.getComputedStyle(fromTDEl);
         if (parseInt(style.borderTopWidth, 10) > 0) {
             top += 1;
             height = height > 0 ? height - 1 : 0;
@@ -389,23 +1049,70 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             width = width > 0 ? width - 1 : 0;
         }
         const inlinePosProperty = isRtl ? 'right' : 'left';
-        const delta = Math.ceil((this.settings.border?.width ?? 0) / 2);
+        // Corner geometry is resolved per edge rather than from a single `settings.border.width` delta,
+        // which misaligns edges whose own width differs from the border-object default - e.g. a cell
+        // shared by two overlapping custom-border ranges of different widths. Two distinct roles:
+        //   - POSITION offset (bottom `top`, end inline-start) uses the edge's OWN half-thickness, so a
+        //     straight run of same-width edges stays level across a shared cell.
+        //   - LENGTH extension (so a corner is filled) uses the PERPENDICULAR edge's half-thickness - the
+        //     edge it meets at that corner - so the horizontal line reaches, but does not overshoot, the
+        //     vertical one. Using its own half-thickness would make a thick edge stick out past a thinner
+        //     perpendicular edge.
+        // For uniform-width borders every per-edge delta equals the old shared delta, so regular
+        // selections are unaffected.
+        // A corner is only filled when the perpendicular edge is actually drawn there. A horizontal edge
+        // extends toward the end corner only if this cell has a visible end edge, and toward the bottom
+        // only if it has a visible bottom edge. Without this, a per-cell custom border whose end/bottom
+        // side is hidden (an interior or split-range edge) would still extend into the empty neighbour and
+        // stick out. For regular selections the side settings are absent, so `!undefined?.hide` is `true`
+        // and the extension behaves exactly as before.
+        const extendToEnd = !this.settings.end?.hide;
+        const extendToBottom = !this.settings.bottom?.hide;
+        const bottomThickness = parseInt(this.bottomStyle.height, 10);
+        const endThickness = parseInt(this.endStyle.width, 10);
+        const bottomDelta = Math.ceil(bottomThickness / 2);
+        const endDelta = Math.ceil(endThickness / 2);
+        const horizontalExtension = extendToEnd ? endDelta : 0;
+        const verticalExtension = extendToBottom ? bottomDelta : 0;
         this.topStyle.top = `${top}px`;
         this.topStyle[inlinePosProperty] = `${inlineStartPos}px`;
-        this.topStyle.width = `${width + delta}px`;
+        this.topStyle.width = `${width + horizontalExtension}px`;
         this.topStyle.display = 'block';
         this.startStyle.top = `${top}px`;
         this.startStyle[inlinePosProperty] = `${inlineStartPos}px`;
-        this.startStyle.height = `${height + delta}px`;
+        this.startStyle.height = `${height + verticalExtension}px`;
         this.startStyle.display = 'block';
-        this.bottomStyle.top = `${top + height - parseInt(this.bottomStyle.height, 10) + delta}px`;
+        this.bottomStyle.top = `${top + height - bottomThickness + bottomDelta}px`;
         this.bottomStyle[inlinePosProperty] = `${inlineStartPos}px`;
-        this.bottomStyle.width = `${width + delta}px`;
+        this.bottomStyle.width = `${width + horizontalExtension}px`;
         this.bottomStyle.display = 'block';
         this.endStyle.top = `${top}px`;
-        this.endStyle[inlinePosProperty] = `${inlineStartPos + width - parseInt(this.endStyle.width, 10) + delta}px`;
-        this.endStyle.height = `${height + delta}px`;
+        this.endStyle[inlinePosProperty] = `${inlineStartPos + width - endThickness + endDelta}px`;
+        this.endStyle.height = `${height + verticalExtension}px`;
         this.endStyle.display = 'block';
+        // A boundary edge owned by the frozen overlay must be hidden on every other overlay that would
+        // redraw it in its regular flow, so the lines don't stack into a doubled border. The row-freeze
+        // edge is hidden on the master and `inline_start`; the column-freeze edge on the master and `top`.
+        const overlayName = wtTable.name;
+        // The master keeps drawing the seam top edge (its straddling lower half stays visible below the
+        // frozen pane / editor); the frozen overlay adds the upper half on top of the pane. Only hide the
+        // master when the whole selection is in frozen columns (then the inline-start pane occludes it and
+        // the corner overlay owns the edge). `inline_start` always hides its row-edge duplicate.
+        const seamAllFrozenCols = originalToColumn < this.wot.getSetting('fixedColumnsStart');
+        if (this.isFrozenBoundaryEdge('row', originalFromRow) && (overlayName === 'inline_start' || wtTable.isMaster && seamAllFrozenCols)) {
+            this.topStyle.display = 'none';
+        }
+        if (this.isFrozenBoundaryEdge('column', originalFromColumn) && (wtTable.isMaster || overlayName === 'top' || overlayName === 'bottom')) {
+            this.startStyle.display = 'none';
+        }
+        // The bottom-freeze edge straddles its seam: the master draws the half above the freeze line and
+        // the `bottom` overlay the half below it (on top of the opaque bottom pane), so together they show
+        // the full thickness in both selection and edit modes. Hide the master only when the whole
+        // selection is in frozen columns (then the inline-start pane occludes it and the bottom corner owns
+        // the edge); `inline_start` always hides its duplicate.
+        if (this.isFrozenBottomBoundaryEdge(originalToRow) && (overlayName === 'inline_start' || wtTable.isMaster && seamAllFrozenCols)) {
+            this.bottomStyle.display = 'none';
+        }
         let cornerVisibleSetting = this.settings.border?.cornerVisible;
         cornerVisibleSetting = typeof cornerVisibleSetting === 'function' ? cornerVisibleSetting(this.settings.layerLevel) : cornerVisibleSetting;
         const hookResult = this.wot.getSetting('onModifyGetCellCoords', toRow, toColumn, false, 'render');
@@ -439,43 +1146,68 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             const cornerBorderCompensation = parseInt(String(this.cornerDefaultStyle.borderWidth), 10) - 1;
             const cornerHalfWidth = Math.ceil(parseInt(String(this.cornerDefaultStyle.width), 10) / 2);
             const cornerHalfHeight = Math.ceil(parseInt(String(this.cornerDefaultStyle.height), 10) / 2);
-            if (toColumn === this.wot.getSetting('totalColumns') - 1) {
-                const toTdOffsetLeft = trimToWindow ? toTDEl.getBoundingClientRect().left : toTDEl.offsetLeft;
-                let cornerOverlappingContainer = false;
-                let cornerEdge = 0;
-                if (isRtl) {
-                    cornerEdge = toTdOffsetLeft - parseInt(String(this.cornerDefaultStyle.width), 10) / 2;
-                    cornerOverlappingContainer = cornerEdge < 0;
-                } else {
-                    cornerEdge = toTdOffsetLeft + outerWidth(toTDEl) + parseInt(String(this.cornerDefaultStyle.width), 10) / 2;
-                    cornerOverlappingContainer = cornerEdge >= innerWidth(trimmingContainer);
-                }
-                if (cornerOverlappingContainer) {
-                    const inlineStartPosition = Math.floor(inlineStartPos + width + this.cornerCenterPointOffset - cornerHalfWidth - cornerBorderCompensation);
-                    addClass(this.corner, 'wtCornerInlineEndEdge');
-                    this.cornerStyle[inlinePosProperty] = `${inlineStartPosition - 1}px`;
-                }
+            const fillHandleAnchor = this.getFillHandleAnchor(toTDEl, toOffset, trimToWindow);
+            const liftsAtInlineEnd = this.isCornerLiftedAtInlineEnd(toColumn, fillHandleAnchor.left, toTDEl, trimmingContainer, isRtl);
+            if (liftsAtInlineEnd) {
+                const inlineStartPosition = Math.floor(inlineStartPos + width + this.cornerCenterPointOffset - cornerHalfWidth - cornerBorderCompensation);
+                addClass(this.corner, 'wtCornerInlineEndEdge');
+                this.cornerStyle[inlinePosProperty] = `${inlineStartPosition - 1}px`;
             } else {
                 removeClass(this.corner, 'wtCornerInlineEndEdge');
             }
-            if (toRow === this.wot.getSetting('totalRows') - 1) {
-                const toTdOffsetTop = trimToWindow ? toTDEl.getBoundingClientRect().top : toTDEl.offsetTop;
-                const cornerHalfHeight = parseInt(String(this.cornerDefaultStyle.height), 10) / 2;
-                const cornerBottomEdge = toTdOffsetTop + outerHeight(toTDEl) + cornerHalfHeight;
-                const cornerOverlappingContainer = cornerBottomEdge >= innerHeight(trimmingContainer);
-                if (cornerOverlappingContainer) {
-                    const cornerTopPosition = Math.floor(top + height + this.cornerCenterPointOffset - cornerHalfHeight - cornerBorderCompensation);
-                    addClass(this.corner, 'wtCornerBlockEndEdge');
-                    this.cornerStyle.top = `${cornerTopPosition - 1}px`;
-                }
+            const liftsAtBlockEnd = this.isCornerLiftedAtBlockEnd(toRow, fillHandleAnchor.top, toTDEl, trimmingContainer);
+            if (liftsAtBlockEnd) {
+                const cornerTopPosition = Math.floor(top + height + this.cornerCenterPointOffset - cornerHalfHeight - cornerBorderCompensation);
+                addClass(this.corner, 'wtCornerBlockEndEdge');
+                this.cornerStyle.top = `${cornerTopPosition - 1}px`;
             } else {
                 removeClass(this.corner, 'wtCornerBlockEndEdge');
             }
             this.cornerStyle.display = 'block';
         }
-        if (isMobileBrowser() && this.instance.getSetting('isDataViewInstance')) {
+        if (isMobileBrowser() && this.wot.getSetting('isDataViewInstance')) {
             this.updateMultipleSelectionHandlesPosition(toRow, toColumn, top, inlineStartPos, width, height);
         }
+        let adjustVisible = this.settings.border?.adjustHandlesVisible;
+        adjustVisible = typeof adjustVisible === 'function' ? adjustVisible(this.settings.layerLevel) : adjustVisible;
+        if (!isMobileBrowser() && adjustVisible && this.wot.getSetting('isDataViewInstance')) {
+            const adjustHandles = this.adjustHandles ?? this.createAdjustHandles();
+            this.positionAdjustHandles(top, inlineStartPos, width, height, corners);
+            // Hide handles on an edge that lands on a frozen-pane line. This boundary rule is
+            // intentionally Walkontable-local: Walkontable cannot import core helpers, so the
+            // matching core-side check was removed as dead code — this is the single
+            // authoritative enforcement point.
+            if (this.isFrozenBoundaryEdge('row', corners[0]) || this.isFrozenBottomBoundaryOppositeEdge(corners[0])) {
+                adjustHandles.styles.top.display = 'none';
+            }
+            if (this.isFrozenBoundaryEdge('column', corners[1])) {
+                adjustHandles.styles.start.display = 'none';
+            }
+            if (this.isFrozenStartBoundaryOppositeEdge('row', corners[2]) || this.isFrozenBottomBoundaryEdge(corners[2])) {
+                adjustHandles.styles.bottom.display = 'none';
+            }
+            if (this.isFrozenStartBoundaryOppositeEdge('column', corners[3])) {
+                adjustHandles.styles.end.display = 'none';
+            }
+        } else if (this.adjustHandles) {
+            this.adjustHandles.styles.top.display = 'none';
+            this.adjustHandles.styles.bottom.display = 'none';
+            this.adjustHandles.styles.start.display = 'none';
+            this.adjustHandles.styles.end.display = 'none';
+        }
+        let moveEnabled = this.settings.border?.moveEnabled;
+        moveEnabled = typeof moveEnabled === 'function' ? moveEnabled(this.settings.layerLevel) : moveEnabled;
+        if (!isMobileBrowser() && moveEnabled && this.wot.getSetting('isDataViewInstance')) {
+            if (!this.moveZone) {
+                this.createMoveZone();
+            }
+            this.positionMoveZone(top, inlineStartPos, width, height);
+        } else if (this.moveZone) {
+            this.moveZone.styles.top.display = 'none';
+            this.moveZone.styles.bottom.display = 'none';
+            this.moveZone.styles.start.display = 'none';
+            this.moveZone.styles.end.display = 'none';
+        }
     }
     /**
    * Check whether an entire column of cells is selected.
@@ -508,6 +1240,7 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
    * @param {number} containerOffset Offset of the container.
    * @returns {Array|boolean} Returns an array of [headerElement, left, width] or [headerElement, top, height], depending on `direction` (`false` in case of an error getting the headers).
    */ getDimensionsFromHeader(direction, fromIndex, toIndex, headerIndex, containerOffset) {
+        const { geometryReader } = this.wot.domBindings;
         const { wtTable } = this.wot;
         const rootHotElement = wtTable.wtRootElement.parentNode;
         let getHeaderFn = null;
@@ -521,13 +1254,13 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         switch(direction){
             case 'rows':
                 getHeaderFn = (...args)=>wtTable.getRowHeader(args[0], args[1]);
-                dimensionFn = (el)=>outerHeight(el);
+                dimensionFn = (el)=>geometryReader.outerHeight(el);
                 entireSelectionClassname = 'ht__selection--rows';
                 dimensionProperty = 'top';
                 break;
             case 'columns':
                 getHeaderFn = (...args)=>wtTable.getColumnHeader(args[0], args[1]);
-                dimensionFn = (el)=>outerWidth(el);
+                dimensionFn = (el)=>geometryReader.outerWidth(el);
                 entireSelectionClassname = 'ht__selection--columns';
                 dimensionProperty = 'left';
                 break;
@@ -540,8 +1273,8 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             if (!startHeader || !endHeader) {
                 return false;
             }
-            const startHeaderOffset = offset(startHeader);
-            const endOffset = offset(endHeader);
+            const startHeaderOffset = geometryReader.offset(startHeader);
+            const endOffset = geometryReader.offset(endHeader);
             const startOff = startHeaderOffset[dimensionProperty];
             const endOff = endOffset[dimensionProperty];
             const contOff = containerOffset[dimensionProperty];
@@ -556,6 +1289,72 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         return false;
     }
     /**
+   * Positions the four edge-adjustment handles at the midpoint of each edge, hiding any handle
+   * whose edge is flush with the grid boundary. Called at the end of `appear()` when the
+   * `selectionHandles` feature is enabled for this highlight.
+   *
+   * Handle dimensions are sourced from the `--ht-cell-selection-handle-size` and
+   * `--ht-cell-selection-handle-length` CSS tokens via a cached stylesHandler read
+   * (no layout-forcing DOM access). Top/bottom handles are horizontal pills
+   * (width = length, height = size); start/end handles are vertical pills (width = size, height = length).
+   *
+   * @private
+   * @param {number} top The selection border top (px, container-relative).
+   * @param {number} inlineStart The selection border inline-start (px, container-relative).
+   * @param {number} width The selection border width (px).
+   * @param {number} height The selection border height (px).
+   * @param {number[]} corners The raw `[fromRow, fromColumn, toRow, toColumn]` visual corners.
+   */ positionAdjustHandles(top, inlineStart, width, height, corners) {
+        const isRtl = this.wot.wtSettings.getSetting('rtlMode');
+        const inlineProp = isRtl ? 'right' : 'left';
+        const [fromRow, fromColumn, toRow, toColumn] = corners;
+        const lastRow = this.wot.getSetting('totalRows') - 1;
+        const lastColumn = this.wot.getSetting('totalColumns') - 1;
+        // Handle dimensions are read from the CSS token cache (not computed style — that would be a
+        // layout-forcing read). Visual sizing lives in the stylesheet; JS reads the resolved token values.
+        const stylesHandler = this.wot.wtSettings.getSetting('stylesHandler');
+        const sizeRaw = stylesHandler.getCSSVariableValue('cell-selection-handle-size');
+        const lengthRaw = stylesHandler.getCSSVariableValue('cell-selection-handle-length');
+        const size = parseInt(sizeRaw !== null && sizeRaw !== undefined ? String(sizeRaw) : '8', 10);
+        const length = parseInt(lengthRaw !== null && lengthRaw !== undefined ? String(lengthRaw) : '24', 10);
+        // top/bottom handles are horizontal pills: width = length, height = size.
+        const topW = length;
+        const topH = size;
+        const bottomW = length;
+        const bottomH = size;
+        // start/end handles are vertical pills: width = size, height = length.
+        const startW = size;
+        const startH = length;
+        const endW = size;
+        const endH = length;
+        // Only ever called from `appear()` after the handles have been created.
+        const s = this.adjustHandles.styles;
+        s.top.display = 'none';
+        s.bottom.display = 'none';
+        s.start.display = 'none';
+        s.end.display = 'none';
+        if (fromRow > 0) {
+            s.top[inlineProp] = `${inlineStart + Math.round(width / 2) - Math.round(topW / 2)}px`;
+            s.top.top = `${top - Math.round(topH / 2)}px`;
+            s.top.display = 'block';
+        }
+        if (toRow < lastRow) {
+            s.bottom[inlineProp] = `${inlineStart + Math.round(width / 2) - Math.round(bottomW / 2)}px`;
+            s.bottom.top = `${top + height - Math.round(bottomH / 2)}px`;
+            s.bottom.display = 'block';
+        }
+        if (fromColumn > 0) {
+            s.start[inlineProp] = `${inlineStart - Math.round(startW / 2)}px`;
+            s.start.top = `${top + Math.round(height / 2) - Math.round(startH / 2)}px`;
+            s.start.display = 'block';
+        }
+        if (toColumn < lastColumn) {
+            s.end[inlineProp] = `${inlineStart + width - Math.round(endW / 2)}px`;
+            s.end.top = `${top + Math.round(height / 2) - Math.round(endH / 2)}px`;
+            s.end.display = 'block';
+        }
+    }
+    /**
    * Change border style.
    *
    * @private
@@ -618,12 +1417,24 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         this.startStyle.display = 'none';
         this.endStyle.display = 'none';
         this.cornerStyle.display = 'none';
-        if (isMobileBrowser() && this.instance.getSetting('isDataViewInstance')) {
+        if (isMobileBrowser() && this.wot.getSetting('isDataViewInstance')) {
             this.selectionHandles.styles.top.display = 'none';
             this.selectionHandles.styles.topHitArea.display = 'none';
             this.selectionHandles.styles.bottom.display = 'none';
             this.selectionHandles.styles.bottomHitArea.display = 'none';
         }
+        if (this.adjustHandles) {
+            this.adjustHandles.styles.top.display = 'none';
+            this.adjustHandles.styles.bottom.display = 'none';
+            this.adjustHandles.styles.start.display = 'none';
+            this.adjustHandles.styles.end.display = 'none';
+        }
+        if (this.moveZone) {
+            this.moveZone.styles.top.display = 'none';
+            this.moveZone.styles.bottom.display = 'none';
+            this.moveZone.styles.start.display = 'none';
+            this.moveZone.styles.end.display = 'none';
+        }
     }
     /**
    * Cleans up all the DOM state related to a Border instance. Call this prior to deleting a Border instance.
@@ -642,7 +1453,6 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
             return;
         }
         this.eventManager = wotInstance.eventManager;
-        this.instance = wotInstance;
         this.wot = wotInstance;
         this.settings = settings;
         this.mouseDown = false;
@@ -655,7 +1465,7 @@ const BORDER_STYLE_HORIZONTAL_SUFFIX = '-horizontal';
         this.bottomStyle = null;
         this.startStyle = null;
         this.endStyle = null;
-        this.cornerDefaultStyle = getCornerStyle(this.instance);
+        this.cornerDefaultStyle = getCornerStyle(this.wot);
         // Offset to moving the corner to be centered relative to the grid.
         this.cornerCenterPointOffset = -Math.ceil(parseInt(String(this.cornerDefaultStyle.width), 10) / 2);
         this.corner = null;