react-glide-table 1.1.4 → 1.1.5

package/dist/core.cjs

@@ -40,10 +40,12 @@ __export(core_exports, {
   hasCellSelectionEdges: () => hasCellSelectionEdges,
   isCellInSelection: () => isCellInSelection,
   isColumnEditable: () => isColumnEditable,
+  measureMergedSpanRowHeights: () => measureMergedSpanRowHeights,
   parseCellEditValue: () => parseCellEditValue,
   resolveDataTableLabels: () => resolveDataTableLabels,
   resolveRowSelection: () => resolveRowSelection,
   resolveRowSpanAt: () => resolveRowSpanAt,
+  rowRangeToHeightRatios: () => rowRangeToHeightRatios,
   toggleExpandedRowId: () => toggleExpandedRowId,
   useCellEdit: () => useCellEdit,
   useCellSelection: () => useCellSelection,
@@ -230,10 +232,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
+  if (rowSpan <= 1) return void 0;
+  const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
+  if (!tbody) return void 0;
+  const rows = tbody.querySelectorAll(":scope > tr");
+  if (rows.length < rowIndex + rowSpan) return void 0;
+  const heights = [];
+  for (let i = 0; i < rowSpan; i++) {
+    const row = rows[rowIndex + i];
+    const height = row?.getBoundingClientRect().height ?? 0;
+    if (height <= 0) return void 0;
+    heights.push(height);
+  }
+  return heights;
+}
 function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
   if (rowSpan <= 1) return rowIndex;
   const rect = cellElement.getBoundingClientRect();
   const relativeY = clientY - rect.top;
+  const heights = measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement);
+  if (heights && heights.length === rowSpan) {
+    let accrued = 0;
+    for (let i = 0; i < rowSpan; i++) {
+      accrued += heights[i];
+      if (relativeY < accrued) {
+        return rowIndex + i;
+      }
+    }
+    return rowIndex + rowSpan - 1;
+  }
   const rowHeight = rect.height / rowSpan;
   const offset = Math.min(
     Math.max(Math.floor(relativeY / rowHeight), 0),
@@ -255,7 +283,35 @@ function getActiveSelectionBounds(dragState, selectionBounds) {
 var SELECTION_EDGE_WIDTH_PX = 2;
 var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
 var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
-function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
+function rowRangeToHeightRatios(rowIndex, span, fromRow, toRowExclusive, rowHeights) {
+  const clampedFrom = Math.max(fromRow, rowIndex);
+  const clampedTo = Math.min(toRowExclusive, rowIndex + span);
+  if (clampedTo <= clampedFrom) {
+    return { offsetRatio: 0, lengthRatio: 0 };
+  }
+  if (!rowHeights || rowHeights.length !== span) {
+    return {
+      offsetRatio: (clampedFrom - rowIndex) / span,
+      lengthRatio: (clampedTo - clampedFrom) / span
+    };
+  }
+  const total = rowHeights.reduce((sum, height) => sum + height, 0) || 1;
+  let offsetPx = 0;
+  for (let i = 0; i < clampedFrom - rowIndex; i++) {
+    offsetPx += rowHeights[i] ?? 0;
+  }
+  let lengthPx = 0;
+  for (let i = clampedFrom - rowIndex; i < clampedTo - rowIndex; i++) {
+    lengthPx += rowHeights[i] ?? 0;
+  }
+  return {
+    offsetRatio: offsetPx / total,
+    lengthRatio: lengthPx / total,
+    offsetPx,
+    lengthPx
+  };
+}
+function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt, rowHeights) {
   const cellEndRow = rowIndex + rowSpan - 1;
   const span = cellEndRow - rowIndex + 1;
   if (span <= 1) return [];
@@ -274,20 +330,30 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
         continue;
       }
       if (runStart !== null) {
-        edges.push({
-          side,
-          offsetRatio: (runStart - rowIndex) / span,
-          heightRatio: (row - runStart) / span
-        });
+        const ratios = rowRangeToHeightRatios(
+          rowIndex,
+          span,
+          runStart,
+          row,
+          rowHeights
+        );
+        if (ratios.lengthRatio > 0) {
+          edges.push({ side, ...ratios });
+        }
         runStart = null;
       }
     }
     if (runStart !== null) {
-      edges.push({
-        side,
-        offsetRatio: (runStart - rowIndex) / span,
-        heightRatio: (toRowExclusive - runStart) / span
-      });
+      const ratios = rowRangeToHeightRatios(
+        rowIndex,
+        span,
+        runStart,
+        toRowExclusive,
+        rowHeights
+      );
+      if (ratios.lengthRatio > 0) {
+        edges.push({ side, ...ratios });
+      }
     }
   };
   const collectSide = (side, neighborCol) => {
@@ -316,14 +382,17 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
   }
   return edges;
 }
-function buildPartialVerticalGradient(edge) {
+function buildPartialEdgeGradient(edge) {
+  const usePx = edge.offsetPx != null && edge.lengthPx != null;
   const startPct = edge.offsetRatio * 100;
-  const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
-  const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
-  const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
-  const isBottomProtrusion = edge.offsetRatio > 0;
-  const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
-  const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
+  const endPct = (edge.offsetRatio + edge.lengthRatio) * 100;
+  const startPx = edge.offsetPx ?? 0;
+  const endPx = (edge.offsetPx ?? 0) + (edge.lengthPx ?? 0);
+  const overlapPx = SELECTION_EDGE_WIDTH_PX;
+  const isTopProtrusion = (usePx ? startPx === 0 : edge.offsetRatio === 0) && edge.lengthRatio < 1;
+  const isBottomProtrusion = usePx ? startPx > 0 : edge.offsetRatio > 0;
+  const startStop = usePx ? isBottomProtrusion ? `${Math.max(0, startPx - overlapPx)}px` : `${startPx}px` : isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
+  const endStop = usePx ? isTopProtrusion ? `${endPx + overlapPx}px` : `${endPx}px` : isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
   const xPos = edge.side === "left" ? "0" : "100%";
   const layers = [
     {
@@ -333,7 +402,7 @@ function buildPartialVerticalGradient(edge) {
     }
   ];
   if (isTopProtrusion || isBottomProtrusion) {
-    const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
+    const capTop = usePx ? isTopProtrusion ? `${Math.max(0, endPx - SELECTION_EDGE_WIDTH_PX)}px` : `${Math.max(0, startPx - SELECTION_EDGE_WIDTH_PX)}px` : isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
     layers.push({
       image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
       size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
@@ -342,7 +411,7 @@ function buildPartialVerticalGradient(edge) {
   }
   return layers;
 }
-function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
+function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt, rowHeights) {
   if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
     return void 0;
   const cellEndRow = rowIndex + rowSpan - 1;
@@ -351,39 +420,47 @@ function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVi
   const isLeftEdge = colIndex === bounds.startCol;
   const isRightEdge = colIndex === bounds.endCol;
   const selectionContinuesBelow = cellEndRow < bounds.endRow;
-  const shadows = [];
-  if (isTopEdge) {
-    shadows.push(
-      `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isBottomEdge) {
-    shadows.push(
-      `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isLeftEdge) {
-    shadows.push(
-      `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isRightEdge) {
-    shadows.push(
-      `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
   const stepEdges = getMergedCellStepEdges(
     rowIndex,
     colIndex,
     bounds,
     rowSpan,
-    isVisuallySelectedAt
+    isVisuallySelectedAt,
+    rowHeights
   );
+  const shadows = [];
+  const hasFullPerimeter = isTopEdge && isBottomEdge && isLeftEdge && isRightEdge && stepEdges.length === 0;
+  if (hasFullPerimeter) {
+    shadows.push(
+      `inset 0 0 0 ${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_COLOR}`
+    );
+  } else {
+    if (isTopEdge) {
+      shadows.push(
+        `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isBottomEdge) {
+      shadows.push(
+        `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isLeftEdge) {
+      shadows.push(
+        `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isRightEdge) {
+      shadows.push(
+        `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+  }
   const gradients = [];
   const sizes = [];
   const positions = [];
   for (const edge of stepEdges) {
-    for (const partial of buildPartialVerticalGradient(edge)) {
+    for (const partial of buildPartialEdgeGradient(edge)) {
       gradients.push(partial.image);
       sizes.push(partial.size);
       positions.push(partial.position);
@@ -1186,10 +1263,12 @@ function useGlideTable(options) {
   hasCellSelectionEdges,
   isCellInSelection,
   isColumnEditable,
+  measureMergedSpanRowHeights,
   parseCellEditValue,
   resolveDataTableLabels,
   resolveRowSelection,
   resolveRowSpanAt,
+  rowRangeToHeightRatios,
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,

package/dist/core.d.cts

@@ -55,29 +55,50 @@ type DragState = {
     fillAnchor: CellPosition | null;
     fillEnd: CellPosition | null;
 };
+/**
+ * Reads per-row heights for a merged cell span from the table body.
+ * Expand + merge yields unequal row heights (e.g. parent 25px / child 22px);
+ * step borders must use these instead of equal-ratio splits.
+ */
+declare function measureMergedSpanRowHeights(rowIndex: number, rowSpan: number, cellElement?: HTMLElement | null): number[] | undefined;
 declare function getRowIndexInMergedCell(clientY: number, cellElement: HTMLElement, rowIndex: number, rowSpan: number): number;
 declare function isCellInSelection(rowIndex: number, colIndex: number, bounds: CellSelectionBounds | null, rowSpan?: number): boolean;
 declare const CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
 type CellSelectionEdgeStyle = {
     /** Full-side inset border applied via ::after */
     ["--selection-edge-shadows"]?: string;
-    /** Partial vertical border for merged-cell step (stair) segments */
+    /** Partial borders for merged-cell step (stair) segments */
     ["--selection-edge-gradients"]?: string;
     ["--selection-edge-sizes"]?: string;
     ["--selection-edge-positions"]?: string;
     /** Hide internal horizontal grid lines inside the selection with background color */
     borderBottomColor?: string;
 };
+/**
+ * Maps a logical row range inside a merged cell to height ratios / pixels.
+ * When `rowHeights` is omitted, falls back to equal row splits.
+ */
+declare function rowRangeToHeightRatios(rowIndex: number, span: number, fromRow: number, toRowExclusive: number, rowHeights?: number[]): {
+    offsetRatio: number;
+    lengthRatio: number;
+    offsetPx?: number;
+    lengthPx?: number;
+};
 /**
  * Draws the selection border with ::after (extended -1px at the bottom) plus
  * inset box-shadow / partial gradients so it does not break on the cell's
  * border-bottom.
  *
+ * Merged cells that overlap the selection are filled as a whole, so top/bottom
+ * edges follow the cell's visual box when it contains the selection start/end.
+ * Step (stair) segments use height-weighted ratios when expand makes rows unequal.
+ *
  * @param isVisuallySelectedAt Whether a logical cell is visually selected
  *   (including adjacent merged cells). Used to suppress internal step borders
  *   when multiple columns have rowSpan.
+ * @param rowHeights Per-row heights inside this merged span.
  */
-declare function getCellSelectionEdgeStyle(rowIndex: number, colIndex: number, bounds: CellSelectionBounds | null, rowSpan?: number, isVisuallySelectedAt?: (row: number, col: number) => boolean): CellSelectionEdgeStyle | undefined;
+declare function getCellSelectionEdgeStyle(rowIndex: number, colIndex: number, bounds: CellSelectionBounds | null, rowSpan?: number, isVisuallySelectedAt?: (row: number, col: number) => boolean, rowHeights?: number[]): CellSelectionEdgeStyle | undefined;
 declare function hasCellSelectionEdges(style: CellSelectionEdgeStyle | undefined): boolean;
 
 type RowSpanInfo = {
@@ -253,4 +274,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableLabels, DataTableProps, type DragState, type EditingCell, RowSelectionMode, type RowSpanInfo, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };
+export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableLabels, DataTableProps, type DragState, type EditingCell, RowSelectionMode, type RowSpanInfo, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, measureMergedSpanRowHeights, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };

package/dist/core.d.ts

@@ -55,29 +55,50 @@ type DragState = {
     fillAnchor: CellPosition | null;
     fillEnd: CellPosition | null;
 };
+/**
+ * Reads per-row heights for a merged cell span from the table body.
+ * Expand + merge yields unequal row heights (e.g. parent 25px / child 22px);
+ * step borders must use these instead of equal-ratio splits.
+ */
+declare function measureMergedSpanRowHeights(rowIndex: number, rowSpan: number, cellElement?: HTMLElement | null): number[] | undefined;
 declare function getRowIndexInMergedCell(clientY: number, cellElement: HTMLElement, rowIndex: number, rowSpan: number): number;
 declare function isCellInSelection(rowIndex: number, colIndex: number, bounds: CellSelectionBounds | null, rowSpan?: number): boolean;
 declare const CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
 type CellSelectionEdgeStyle = {
     /** Full-side inset border applied via ::after */
     ["--selection-edge-shadows"]?: string;
-    /** Partial vertical border for merged-cell step (stair) segments */
+    /** Partial borders for merged-cell step (stair) segments */
     ["--selection-edge-gradients"]?: string;
     ["--selection-edge-sizes"]?: string;
     ["--selection-edge-positions"]?: string;
     /** Hide internal horizontal grid lines inside the selection with background color */
     borderBottomColor?: string;
 };
+/**
+ * Maps a logical row range inside a merged cell to height ratios / pixels.
+ * When `rowHeights` is omitted, falls back to equal row splits.
+ */
+declare function rowRangeToHeightRatios(rowIndex: number, span: number, fromRow: number, toRowExclusive: number, rowHeights?: number[]): {
+    offsetRatio: number;
+    lengthRatio: number;
+    offsetPx?: number;
+    lengthPx?: number;
+};
 /**
  * Draws the selection border with ::after (extended -1px at the bottom) plus
  * inset box-shadow / partial gradients so it does not break on the cell's
  * border-bottom.
  *
+ * Merged cells that overlap the selection are filled as a whole, so top/bottom
+ * edges follow the cell's visual box when it contains the selection start/end.
+ * Step (stair) segments use height-weighted ratios when expand makes rows unequal.
+ *
  * @param isVisuallySelectedAt Whether a logical cell is visually selected
  *   (including adjacent merged cells). Used to suppress internal step borders
  *   when multiple columns have rowSpan.
+ * @param rowHeights Per-row heights inside this merged span.
  */
-declare function getCellSelectionEdgeStyle(rowIndex: number, colIndex: number, bounds: CellSelectionBounds | null, rowSpan?: number, isVisuallySelectedAt?: (row: number, col: number) => boolean): CellSelectionEdgeStyle | undefined;
+declare function getCellSelectionEdgeStyle(rowIndex: number, colIndex: number, bounds: CellSelectionBounds | null, rowSpan?: number, isVisuallySelectedAt?: (row: number, col: number) => boolean, rowHeights?: number[]): CellSelectionEdgeStyle | undefined;
 declare function hasCellSelectionEdges(style: CellSelectionEdgeStyle | undefined): boolean;
 
 type RowSpanInfo = {
@@ -253,4 +274,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableLabels, DataTableProps, type DragState, type EditingCell, RowSelectionMode, type RowSpanInfo, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };
+export { CELL_SELECTION_EDGES_CLASS, type CellSelectionBounds, type ColumnRowSpanMap, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableLabels, DataTableProps, type DragState, type EditingCell, RowSelectionMode, type RowSpanInfo, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, canExpandRow, collectFillChanges, collectRowSpanColumns, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, measureMergedSpanRowHeights, parseCellEditValue, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable };

package/dist/core.js

@@ -187,10 +187,36 @@ function getCellSelectionBounds(start, end) {
     endCol: Math.max(start.col, end.col)
   };
 }
+function measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement) {
+  if (rowSpan <= 1) return void 0;
+  const tbody = cellElement?.closest("tbody") ?? (typeof document !== "undefined" ? document.querySelector("tbody.data-table-body") : null);
+  if (!tbody) return void 0;
+  const rows = tbody.querySelectorAll(":scope > tr");
+  if (rows.length < rowIndex + rowSpan) return void 0;
+  const heights = [];
+  for (let i = 0; i < rowSpan; i++) {
+    const row = rows[rowIndex + i];
+    const height = row?.getBoundingClientRect().height ?? 0;
+    if (height <= 0) return void 0;
+    heights.push(height);
+  }
+  return heights;
+}
 function getRowIndexInMergedCell(clientY, cellElement, rowIndex, rowSpan) {
   if (rowSpan <= 1) return rowIndex;
   const rect = cellElement.getBoundingClientRect();
   const relativeY = clientY - rect.top;
+  const heights = measureMergedSpanRowHeights(rowIndex, rowSpan, cellElement);
+  if (heights && heights.length === rowSpan) {
+    let accrued = 0;
+    for (let i = 0; i < rowSpan; i++) {
+      accrued += heights[i];
+      if (relativeY < accrued) {
+        return rowIndex + i;
+      }
+    }
+    return rowIndex + rowSpan - 1;
+  }
   const rowHeight = rect.height / rowSpan;
   const offset = Math.min(
     Math.max(Math.floor(relativeY / rowHeight), 0),
@@ -212,7 +238,35 @@ function getActiveSelectionBounds(dragState, selectionBounds) {
 var SELECTION_EDGE_WIDTH_PX = 2;
 var SELECTION_EDGE_COLOR = "var(--color-brand-primary)";
 var CELL_SELECTION_EDGES_CLASS = "cell-selection-edges";
-function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt) {
+function rowRangeToHeightRatios(rowIndex, span, fromRow, toRowExclusive, rowHeights) {
+  const clampedFrom = Math.max(fromRow, rowIndex);
+  const clampedTo = Math.min(toRowExclusive, rowIndex + span);
+  if (clampedTo <= clampedFrom) {
+    return { offsetRatio: 0, lengthRatio: 0 };
+  }
+  if (!rowHeights || rowHeights.length !== span) {
+    return {
+      offsetRatio: (clampedFrom - rowIndex) / span,
+      lengthRatio: (clampedTo - clampedFrom) / span
+    };
+  }
+  const total = rowHeights.reduce((sum, height) => sum + height, 0) || 1;
+  let offsetPx = 0;
+  for (let i = 0; i < clampedFrom - rowIndex; i++) {
+    offsetPx += rowHeights[i] ?? 0;
+  }
+  let lengthPx = 0;
+  for (let i = clampedFrom - rowIndex; i < clampedTo - rowIndex; i++) {
+    lengthPx += rowHeights[i] ?? 0;
+  }
+  return {
+    offsetRatio: offsetPx / total,
+    lengthRatio: lengthPx / total,
+    offsetPx,
+    lengthPx
+  };
+}
+function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallySelectedAt, rowHeights) {
   const cellEndRow = rowIndex + rowSpan - 1;
   const span = cellEndRow - rowIndex + 1;
   if (span <= 1) return [];
@@ -231,20 +285,30 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
         continue;
       }
       if (runStart !== null) {
-        edges.push({
-          side,
-          offsetRatio: (runStart - rowIndex) / span,
-          heightRatio: (row - runStart) / span
-        });
+        const ratios = rowRangeToHeightRatios(
+          rowIndex,
+          span,
+          runStart,
+          row,
+          rowHeights
+        );
+        if (ratios.lengthRatio > 0) {
+          edges.push({ side, ...ratios });
+        }
         runStart = null;
       }
     }
     if (runStart !== null) {
-      edges.push({
-        side,
-        offsetRatio: (runStart - rowIndex) / span,
-        heightRatio: (toRowExclusive - runStart) / span
-      });
+      const ratios = rowRangeToHeightRatios(
+        rowIndex,
+        span,
+        runStart,
+        toRowExclusive,
+        rowHeights
+      );
+      if (ratios.lengthRatio > 0) {
+        edges.push({ side, ...ratios });
+      }
     }
   };
   const collectSide = (side, neighborCol) => {
@@ -273,14 +337,17 @@ function getMergedCellStepEdges(rowIndex, colIndex, bounds, rowSpan, isVisuallyS
   }
   return edges;
 }
-function buildPartialVerticalGradient(edge) {
+function buildPartialEdgeGradient(edge) {
+  const usePx = edge.offsetPx != null && edge.lengthPx != null;
   const startPct = edge.offsetRatio * 100;
-  const endPct = (edge.offsetRatio + edge.heightRatio) * 100;
-  const overlapPx = SELECTION_EDGE_WIDTH_PX + 1;
-  const isTopProtrusion = edge.offsetRatio === 0 && edge.heightRatio < 1;
-  const isBottomProtrusion = edge.offsetRatio > 0;
-  const startStop = isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
-  const endStop = isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
+  const endPct = (edge.offsetRatio + edge.lengthRatio) * 100;
+  const startPx = edge.offsetPx ?? 0;
+  const endPx = (edge.offsetPx ?? 0) + (edge.lengthPx ?? 0);
+  const overlapPx = SELECTION_EDGE_WIDTH_PX;
+  const isTopProtrusion = (usePx ? startPx === 0 : edge.offsetRatio === 0) && edge.lengthRatio < 1;
+  const isBottomProtrusion = usePx ? startPx > 0 : edge.offsetRatio > 0;
+  const startStop = usePx ? isBottomProtrusion ? `${Math.max(0, startPx - overlapPx)}px` : `${startPx}px` : isBottomProtrusion ? `calc(${startPct}% - ${overlapPx}px)` : `${startPct}%`;
+  const endStop = usePx ? isTopProtrusion ? `${endPx + overlapPx}px` : `${endPx}px` : isTopProtrusion ? `calc(${endPct}% + ${overlapPx}px)` : `${endPct}%`;
   const xPos = edge.side === "left" ? "0" : "100%";
   const layers = [
     {
@@ -290,7 +357,7 @@ function buildPartialVerticalGradient(edge) {
     }
   ];
   if (isTopProtrusion || isBottomProtrusion) {
-    const capTop = isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
+    const capTop = usePx ? isTopProtrusion ? `${Math.max(0, endPx - SELECTION_EDGE_WIDTH_PX)}px` : `${Math.max(0, startPx - SELECTION_EDGE_WIDTH_PX)}px` : isTopProtrusion ? `calc(${endPct}% - ${SELECTION_EDGE_WIDTH_PX}px)` : `calc(${startPct}% - ${SELECTION_EDGE_WIDTH_PX}px)`;
     layers.push({
       image: `linear-gradient(${SELECTION_EDGE_COLOR}, ${SELECTION_EDGE_COLOR})`,
       size: `${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_WIDTH_PX}px`,
@@ -299,7 +366,7 @@ function buildPartialVerticalGradient(edge) {
   }
   return layers;
 }
-function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt) {
+function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVisuallySelectedAt, rowHeights) {
   if (!isCellInSelection(rowIndex, colIndex, bounds, rowSpan) || !bounds)
     return void 0;
   const cellEndRow = rowIndex + rowSpan - 1;
@@ -308,39 +375,47 @@ function getCellSelectionEdgeStyle(rowIndex, colIndex, bounds, rowSpan = 1, isVi
   const isLeftEdge = colIndex === bounds.startCol;
   const isRightEdge = colIndex === bounds.endCol;
   const selectionContinuesBelow = cellEndRow < bounds.endRow;
-  const shadows = [];
-  if (isTopEdge) {
-    shadows.push(
-      `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isBottomEdge) {
-    shadows.push(
-      `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isLeftEdge) {
-    shadows.push(
-      `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
-  if (isRightEdge) {
-    shadows.push(
-      `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
-    );
-  }
   const stepEdges = getMergedCellStepEdges(
     rowIndex,
     colIndex,
     bounds,
     rowSpan,
-    isVisuallySelectedAt
+    isVisuallySelectedAt,
+    rowHeights
   );
+  const shadows = [];
+  const hasFullPerimeter = isTopEdge && isBottomEdge && isLeftEdge && isRightEdge && stepEdges.length === 0;
+  if (hasFullPerimeter) {
+    shadows.push(
+      `inset 0 0 0 ${SELECTION_EDGE_WIDTH_PX}px ${SELECTION_EDGE_COLOR}`
+    );
+  } else {
+    if (isTopEdge) {
+      shadows.push(
+        `inset 0 ${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isBottomEdge) {
+      shadows.push(
+        `inset 0 -${SELECTION_EDGE_WIDTH_PX}px 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isLeftEdge) {
+      shadows.push(
+        `inset ${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+    if (isRightEdge) {
+      shadows.push(
+        `inset -${SELECTION_EDGE_WIDTH_PX}px 0 0 0 ${SELECTION_EDGE_COLOR}`
+      );
+    }
+  }
   const gradients = [];
   const sizes = [];
   const positions = [];
   for (const edge of stepEdges) {
-    for (const partial of buildPartialVerticalGradient(edge)) {
+    for (const partial of buildPartialEdgeGradient(edge)) {
       gradients.push(partial.image);
       sizes.push(partial.size);
       positions.push(partial.position);
@@ -1142,10 +1217,12 @@ export {
   hasCellSelectionEdges,
   isCellInSelection,
   isColumnEditable,
+  measureMergedSpanRowHeights,
   parseCellEditValue,
   resolveDataTableLabels,
   resolveRowSelection,
   resolveRowSpanAt,
+  rowRangeToHeightRatios,
   toggleExpandedRowId,
   useCellEdit,
   useCellSelection,