react-glide-table 1.1.4 → 1.1.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 송찬영
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/compound.cjs

@@ -128,10 +128,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),
@@ -153,7 +179,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 [];
@@ -172,20 +226,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) => {
@@ -214,14 +278,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 = [
     {
@@ -231,7 +298,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`,
@@ -240,7 +307,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;
@@ -249,39 +316,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);
@@ -853,9 +928,10 @@ function DataTableRow({
           }
         }
         const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
-        const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
+        const isMergedCellHovered = hoveredRowIndex !== null && hoveredRowIndex >= rowIndex && hoveredRowIndex <= rowIndex + cellRowSpan - 1;
+        const showCellHover = isRowSpanColumn ? isMergedCellHovered : isRowHovered;
+        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const isMerged = cellRowSpan > 1;
         const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
           columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
@@ -868,12 +944,14 @@ function DataTableRow({
           cellRowSpan
         );
         const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
+        const spanRowHeights = enableCellSelection && activeSelectionBounds && isCellDragSelected && cellRowSpan > 1 ? measureMergedSpanRowHeights(rowIndex, cellRowSpan) : void 0;
         const selectionEdgeStyle = getCellSelectionEdgeStyle(
           rowIndex,
           cellIndex,
           activeSelectionBounds,
           cellRowSpan,
-          isVisuallySelectedAt
+          isVisuallySelectedAt,
+          spanRowHeights
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
@@ -883,6 +961,7 @@ function DataTableRow({
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
             "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
             "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-merged-row-first": isMerged && cellIndex === 0 && showMergedRightEdge ? "" : void 0,
             "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
             "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
             "data-selection-fill": isCellDragSelected ? "" : void 0,
@@ -927,7 +1006,8 @@ function DataTableRow({
               "data-table-cell",
               CELL_ALIGN_CLASS[align],
               cellClassName,
-              isMerged && cellIndex > 0 && "is-merged",
+              isMerged && "is-merged",
+              isMerged && cellIndex === 0 && showMergedRightEdge && "is-merged-row-first",
               showMergedRightEdge && "is-merged-edge-right",
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
@@ -2036,10 +2116,26 @@ function parseTableChildren(children) {
   }
   return slots;
 }
+function flattenColumnElements(children) {
+  const result = [];
+  for (const child of import_react9.Children.toArray(children)) {
+    if (isTableColumnElement(child)) {
+      result.push(child);
+      continue;
+    }
+    if ((0, import_react9.isValidElement)(child)) {
+      const nested = child.props.children;
+      if (nested != null) {
+        result.push(...flattenColumnElements(nested));
+      }
+    }
+  }
+  return result;
+}
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return import_react9.Children.toArray(children).filter(isTableColumnElement);
+  return flattenColumnElements(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx

package/dist/compound.js

@@ -100,10 +100,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),
@@ -125,7 +151,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 [];
@@ -144,20 +198,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) => {
@@ -186,14 +250,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 = [
     {
@@ -203,7 +270,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`,
@@ -212,7 +279,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;
@@ -221,39 +288,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);
@@ -825,9 +900,10 @@ function DataTableRow({
           }
         }
         const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === cellIndex;
-        const showCellHover = isRowSpanColumn ? isGroupHovered : isRowHovered;
-        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const cellRowSpan = rowSpanInfo?.rowSpan ?? 1;
+        const isMergedCellHovered = hoveredRowIndex !== null && hoveredRowIndex >= rowIndex && hoveredRowIndex <= rowIndex + cellRowSpan - 1;
+        const showCellHover = isRowSpanColumn ? isMergedCellHovered : isRowHovered;
+        const showCellSelected = isRowSpanColumn ? isGroupSelected : isRowSelected;
         const isMerged = cellRowSpan > 1;
         const showMergedRightEdge = isMerged && (cellIndex === visibleCells.length - 1 || resolveRowSpanAt(
           columnRowSpanMap.get(columnIdsByIndex[cellIndex + 1]),
@@ -840,12 +916,14 @@ function DataTableRow({
           cellRowSpan
         );
         const isBottomRightCell = !isEditing && activeSelectionBounds && !dragState.isSelecting && activeSelectionBounds.endRow >= rowIndex && activeSelectionBounds.endRow <= rowIndex + cellRowSpan - 1 && cellIndex === activeSelectionBounds.endCol;
+        const spanRowHeights = enableCellSelection && activeSelectionBounds && isCellDragSelected && cellRowSpan > 1 ? measureMergedSpanRowHeights(rowIndex, cellRowSpan) : void 0;
         const selectionEdgeStyle = getCellSelectionEdgeStyle(
           rowIndex,
           cellIndex,
           activeSelectionBounds,
           cellRowSpan,
-          isVisuallySelectedAt
+          isVisuallySelectedAt,
+          spanRowHeights
         );
         const resolveCellRowIndex = (clientY, element) => getRowIndexInMergedCell(clientY, element, rowIndex, cellRowSpan);
         const hasSelectionEdges = hasCellSelectionEdges(selectionEdgeStyle);
@@ -855,6 +933,7 @@ function DataTableRow({
             rowSpan: rowSpanInfo && rowSpanInfo.rowSpan > 1 ? rowSpanInfo.rowSpan : void 0,
             "data-merged": isMerged && cellIndex > 0 ? "" : void 0,
             "data-merged-edge-right": showMergedRightEdge ? "" : void 0,
+            "data-merged-row-first": isMerged && cellIndex === 0 && showMergedRightEdge ? "" : void 0,
             "data-group-selected": enableRowSpan && showCellSelected ? "" : void 0,
             "data-group-hovered": enableRowSpan && showCellHover && !showCellSelected ? "" : void 0,
             "data-selection-fill": isCellDragSelected ? "" : void 0,
@@ -899,7 +978,8 @@ function DataTableRow({
               "data-table-cell",
               CELL_ALIGN_CLASS[align],
               cellClassName,
-              isMerged && cellIndex > 0 && "is-merged",
+              isMerged && "is-merged",
+              isMerged && cellIndex === 0 && showMergedRightEdge && "is-merged-row-first",
               showMergedRightEdge && "is-merged-edge-right",
               enableRowSpan && showCellSelected && "is-group-selected",
               enableRowSpan && showCellHover && !showCellSelected && "is-group-hovered",
@@ -1970,7 +2050,7 @@ function buildColumnDef(props, sort, onSort) {
 }
 
 // src/components/ui/table/components/Table/parseTableChildren.ts
-import { Children } from "react";
+import { Children, isValidElement as isValidElement2 } from "react";
 
 // src/components/ui/table/components/Table/tableChildTypes.ts
 import { isValidElement } from "react";
@@ -2019,10 +2099,26 @@ function parseTableChildren(children) {
   }
   return slots;
 }
+function flattenColumnElements(children) {
+  const result = [];
+  for (const child of Children.toArray(children)) {
+    if (isTableColumnElement(child)) {
+      result.push(child);
+      continue;
+    }
+    if (isValidElement2(child)) {
+      const nested = child.props.children;
+      if (nested != null) {
+        result.push(...flattenColumnElements(nested));
+      }
+    }
+  }
+  return result;
+}
 function extractColumnElements(header) {
   if (!header) return [];
   const { children } = header.props;
-  return Children.toArray(children).filter(isTableColumnElement);
+  return flattenColumnElements(children);
 }
 
 // src/components/ui/table/components/Table/TableBody.tsx