@canvas-components/list-table 0.2.6 → 0.3.1

package/dist/index.cjs

@@ -982,6 +982,7 @@ function collectLeafColumns(columns) {
 // src/domain/constants.ts
 var DEFAULT_ROW_HEIGHT = 32;
 var DEFAULT_HEADER_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
+var DEFAULT_SCROLLBAR_THICKNESS = 10;
 var HORIZONTAL_SCROLL_STEP = 120;
 var DEFAULT_SUMMARY_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
 var DEFAULT_EMPTY_BODY_HEIGHT = 96;
@@ -990,6 +991,7 @@ var FALLBACK_TABLE_WIDTH = 320;
 var FALLBACK_TABLE_HEIGHT = 240;
 var BODY_TOOLTIP_DELAY = 1e3;
 var TABLE_CONTENT_BORDER_SIZE = 2;
+var TABLE_CONTENT_BORDER_RADIUS = 8;
 var SCROLL_OVERFLOW_EPSILON = 1;
 function resolveTableSize(value, fallback) {
   if (value == null) {
@@ -1050,6 +1052,7 @@ var ListTableDomHost = class {
       return this.nodes;
     }
     const wrapper = document.createElement("div");
+    wrapper.className = "canvas-list-table-root";
     wrapper.style.position = "relative";
     wrapper.style.display = "flex";
     wrapper.style.flexDirection = "column";
@@ -1114,7 +1117,7 @@ var ListTableDomHost = class {
     );
     this.applyWrapperHeight();
     this.nodes.contentLayerElement.style.border = `1px solid ${theme.borderColor}`;
-    this.nodes.contentLayerElement.style.borderRadius = "0";
+    this.nodes.contentLayerElement.style.borderRadius = `${TABLE_CONTENT_BORDER_RADIUS}px`;
     this.nodes.contentLayerElement.style.background = theme.backgroundColor;
     this.nodes.paginationElement.style.borderTop = `1px solid ${theme.borderColor}`;
     this.nodes.paginationElement.style.background = theme.backgroundColor;
@@ -1761,7 +1764,7 @@ var headerSelectionStateCache = /* @__PURE__ */ new WeakMap();
 var ROW_SELECTION_COLUMN_KEY = "__row_selection__";
 var ROW_SELECTOR_COLUMN_KEY = "__row_selector__";
 var EXPAND_COLUMN_KEY = "__row_expand__";
-var DEFAULT_ROW_SELECTOR_WIDTH = 12;
+var DEFAULT_ROW_SELECTOR_WIDTH = DEFAULT_SCROLLBAR_THICKNESS;
 function getInitialSelectedRowKeys(options) {
   const rowSelection = options.rowSelection;
   if (!rowSelection) {
@@ -2550,8 +2553,14 @@ function getPriority(descriptor) {
   if (descriptor.kind === "body" && descriptor.fixed) {
     priority += 1;
   }
+  if (isHeaderDescriptor(descriptor.kind) && descriptor.fixed) {
+    priority += 3;
+  }
   return priority;
 }
+function isHeaderDescriptor(kind) {
+  return kind === "header" || kind === "header-selection" || kind === "header-action" || kind === "column-collapse-trigger" || kind === "resize-handle";
+}
 function getBasePriority(kind) {
   switch (kind) {
     case "grouping-remove":
@@ -6625,10 +6634,7 @@ function drawBodyCellContents(params) {
     return void 0;
   }
   const tooltipText = column.ellipsis === true && layout.truncated ? buildBodyContentsPlainText(contents) : void 0;
-  const blockHeight = Math.min(
-    layout.lines.length * lineHeight,
-    availableHeight
-  );
+  const blockHeight = layout.lines.length * lineHeight;
   const contentTop = resolveContentTop(
     rect,
     blockHeight,
@@ -6637,9 +6643,9 @@ function drawBodyCellContents(params) {
   );
   const contentRect = {
     x: rect.x + paddingInline,
-    y: rect.y + paddingBlock,
+    y: rect.y,
     width: availableWidth,
-    height: availableHeight
+    height: rect.height
   };
   const contentVisibleRect = visibleRect ? intersectRects(contentRect, visibleRect) : contentRect;
   if (!contentVisibleRect) {
@@ -8042,23 +8048,24 @@ function resolveScrollbarRole(x, y, scrollbar) {
 
 // src/services/scrollbar-service.ts
 function resolvePointerHitWithScrollbars(result, x, y, scrollbarLayout) {
-  if (result.area !== "empty") {
-    return result;
-  }
   const horizontalScrollbar = scrollbarLayout.horizontal;
   if (horizontalScrollbar && isPointInScrollbar(x, y, horizontalScrollbar)) {
+    const scrollbarRole = resolveScrollbarRole(x, y, horizontalScrollbar);
     return {
       area: "horizontal-scrollbar",
       columnKey: "__horizontal_scrollbar__",
-      scrollbarRole: resolveScrollbarRole(x, y, horizontalScrollbar)
+      scrollbarRole,
+      cursor: scrollbarRole === "thumb" ? "grab" : "pointer"
     };
   }
   const verticalScrollbar = scrollbarLayout.vertical;
   if (verticalScrollbar && isPointInScrollbar(x, y, verticalScrollbar)) {
+    const scrollbarRole = resolveScrollbarRole(x, y, verticalScrollbar);
     return {
       area: "vertical-scrollbar",
       columnKey: "__vertical_scrollbar__",
-      scrollbarRole: resolveScrollbarRole(x, y, verticalScrollbar)
+      scrollbarRole,
+      cursor: scrollbarRole === "thumb" ? "grab" : "pointer"
     };
   }
   return result;
@@ -11577,6 +11584,9 @@ function resolveVisibleRowIndexForDataRow(params) {
   if (rowIndex >= params.rowCount) {
     return null;
   }
+  if (params.frozenRows.scroll.dataRowIndexAligned) {
+    return rowIndex;
+  }
   for (const section of [
     params.frozenRows.top,
     params.frozenRows.scroll,
@@ -11600,7 +11610,7 @@ function resolveScrollTopForRowIndex(params) {
   if (frozenRows.top.rowIndexMap?.includes(rowIndex) || frozenRows.bottom.rowIndexMap?.includes(rowIndex)) {
     return null;
   }
-  const scrollSectionIndex = frozenRows.scroll.rowIndexMap ? frozenRows.scroll.rowIndexMap.indexOf(rowIndex) : rowIndex;
+  const scrollSectionIndex = frozenRows.scroll.dataRowIndexAligned ? rowIndex : frozenRows.scroll.rowIndexMap ? frozenRows.scroll.rowIndexMap.indexOf(rowIndex) : rowIndex;
   if (scrollSectionIndex < 0) {
     return null;
   }
@@ -12949,69 +12959,55 @@ function matchFilterValue(rawValue, filterValue, optionValue = serializeFilterOp
 }
 function isMeaningfulFilterValue(value) {
   if ((value.filterType ?? "value") === "condition") {
-    return isSingleConditionActive(
-      value.conditionOperator ?? "none",
-      value.conditionValue?.trim() ?? "",
-      value.conditionSecondValue?.trim() ?? ""
-    ) || isSingleConditionActive(
-      value.secondConditionOperator ?? "none",
-      value.secondConditionValue?.trim() ?? "",
-      value.secondConditionSecondValue?.trim() ?? ""
+    return resolveFilterConditions(value).some(
+      (condition) => isSingleConditionActive(
+        condition.operator,
+        condition.value,
+        condition.secondValue
+      )
     );
   }
   return value.keyword.trim().length > 0 || (value.selectedKeys?.filter(Boolean).length ?? 0) > 0;
 }
 function matchConditionFilterValue(rawValue, filterValue) {
   const sourceText = stringifyFilterValue(rawValue).toLowerCase();
-  const firstOperator = filterValue.conditionOperator ?? "none";
-  const firstValue = filterValue.conditionValue?.trim().toLowerCase() ?? "";
-  const firstSecondValue = filterValue.conditionSecondValue?.trim().toLowerCase() ?? "";
-  const secondOperator = filterValue.secondConditionOperator ?? "none";
-  const secondValue = filterValue.secondConditionValue?.trim().toLowerCase() ?? "";
-  const secondSecondValue = filterValue.secondConditionSecondValue?.trim().toLowerCase() ?? "";
-  const relation = filterValue.conditionRelation ?? "and";
-  const hasFirst = isSingleConditionActive(
-    firstOperator,
-    firstValue,
-    firstSecondValue
-  );
-  const hasSecond = isSingleConditionActive(
-    secondOperator,
-    secondValue,
-    secondSecondValue
+  const conditions = resolveFilterConditions(filterValue).filter(
+    (condition) => isSingleConditionActive(
+      condition.operator,
+      condition.value,
+      condition.secondValue
+    )
   );
-  if (!hasFirst && !hasSecond) {
+  const relation = filterValue.conditionRelation ?? "and";
+  if (conditions.length === 0) {
     return true;
   }
-  if (!hasFirst) {
-    return evaluateCondition(
-      sourceText,
-      secondOperator,
-      secondValue,
-      secondSecondValue
-    );
-  }
-  if (!hasSecond) {
-    return evaluateCondition(
-      sourceText,
-      firstOperator,
-      firstValue,
-      firstSecondValue
-    );
-  }
-  const primaryResult = evaluateCondition(
-    sourceText,
-    firstOperator,
-    firstValue,
-    firstSecondValue
-  );
-  const secondaryResult = evaluateCondition(
+  const matches = (condition) => evaluateCondition(
     sourceText,
-    secondOperator,
-    secondValue,
-    secondSecondValue
+    condition.operator,
+    condition.value,
+    condition.secondValue
   );
-  return relation === "or" ? primaryResult || secondaryResult : primaryResult && secondaryResult;
+  return relation === "or" ? conditions.some(matches) : conditions.every(matches);
+}
+function resolveFilterConditions(filterValue) {
+  const source = filterValue.conditions?.length ? filterValue.conditions : [
+    {
+      operator: filterValue.conditionOperator ?? "none",
+      value: filterValue.conditionValue,
+      secondValue: filterValue.conditionSecondValue
+    },
+    {
+      operator: filterValue.secondConditionOperator ?? "none",
+      value: filterValue.secondConditionValue,
+      secondValue: filterValue.secondConditionSecondValue
+    }
+  ];
+  return source.map((condition) => ({
+    operator: condition.operator,
+    value: condition.value?.trim().toLowerCase() ?? "",
+    secondValue: condition.secondValue?.trim().toLowerCase() ?? ""
+  }));
 }
 function isSingleConditionActive(operator, conditionValue, conditionSecondValue) {
   if (!operator || operator === "none") {
@@ -13140,7 +13136,10 @@ var FILTER_PANEL_TEXTS = {
   relationAndLabel: "\u5E76\u4E14",
   relationOrLabel: "\u6216\u8005",
   resetAction: "\u91CD\u7F6E",
-  applyAction: "\u5E94\u7528"
+  applyAction: "\u5E94\u7528",
+  conditionLabel: "\u6761\u4EF6",
+  addConditionAction: "\u65B0\u589E\u6761\u4EF6",
+  deleteConditionAction: "\u5220\u9664\u6761\u4EF6"
 };
 var ASYNC_FILTER_OPTION_BATCH_SIZE = 2e4;
 function sortRows(rows, sortState, leafColumns) {
@@ -13238,7 +13237,8 @@ function buildFilterPanelValue(currentValue) {
     conditionRelation: currentValue.conditionRelation,
     secondConditionOperator: currentValue.secondConditionOperator,
     secondConditionValue: currentValue.secondConditionValue,
-    secondConditionSecondValue: currentValue.secondConditionSecondValue
+    secondConditionSecondValue: currentValue.secondConditionSecondValue,
+    conditions: currentValue.conditions
   };
 }
 function resolveFilterModes(column) {
@@ -13363,7 +13363,12 @@ function buildFilterStateValue(value) {
     conditionRelation: value.conditionRelation,
     secondConditionOperator: value.secondConditionOperator,
     secondConditionValue: value.secondConditionValue,
-    secondConditionSecondValue: value.secondConditionSecondValue
+    secondConditionSecondValue: value.secondConditionSecondValue,
+    conditions: value.conditions?.map((condition) => ({
+      operator: condition.operator,
+      value: condition.value,
+      secondValue: condition.secondValue
+    }))
   };
 }
 function toQueryFilters(filters) {
@@ -13684,6 +13689,9 @@ function showHeaderContextMenu(params) {
   return true;
 }
 function resolveContextMenuDensity(rowHeight) {
+  if (rowHeight === "auto") {
+    return "auto";
+  }
   if (rowHeight === 56) {
     return "comfortable";
   }
@@ -15123,6 +15131,9 @@ var ListTableEventController = class {
         event.clientY
       );
       const result = this.host.resolvePointerHit(position.x, position.y);
+      this.host.canvasHost.setCursor(
+        result.area === "resize-handle" ? "col-resize" : result.cursor ?? ""
+      );
       const nextHover = {
         rowIndex: result.rowIndex ?? null,
         columnKey: result.columnKey ?? null,
@@ -15145,9 +15156,6 @@ var ListTableEventController = class {
         result,
         () => this.host.updateTooltip(result)
       );
-      this.host.canvasHost.setCursor(
-        result.area === "resize-handle" ? "col-resize" : result.cursor ?? ""
-      );
       this.host.scheduleRender(result);
     });
     __publicField(this, "handleMouseDown", (event) => {
@@ -15318,6 +15326,9 @@ var ListTableEventController = class {
       if (!viewport) {
         return;
       }
+      this.host.canvasHost.setCursor(
+        result.scrollbarRole === "thumb" ? "grabbing" : "pointer"
+      );
       if (result.scrollbarRole === "decrease-button") {
         this.stepScrollbar(result.area, -1, viewport);
         this.startContinuousScroll(result.area, -1, viewport);
@@ -15408,6 +15419,7 @@ var ListTableEventController = class {
         columnKey: null,
         area: "empty"
       };
+      this.host.canvasHost.setCursor("");
       this.host.render();
     });
     __publicField(this, "handleContextMenu", (event) => {
@@ -16553,6 +16565,7 @@ var ListTableEventController = class {
     this.host.setGroupingBarDropActive?.(false);
     this.stopContinuousScroll();
     this.host.tooltip.hide();
+    this.host.canvasHost.setCursor("");
     if (options?.unbindWindowEvents !== false) {
       this.host.canvasHost.unbindWindowDragEvents();
     }
@@ -17460,6 +17473,13 @@ function resolveToggleHeaderColumnVisibilityAction(params) {
 
 // src/shared/theme/density.ts
 function resolveDensitySizes(density) {
+  if (density === "auto") {
+    return {
+      rowHeight: "auto",
+      headerRowHeight: void 0,
+      summaryRowHeight: void 0
+    };
+  }
   if (density === "comfortable") {
     return {
       rowHeight: 56,
@@ -18136,7 +18156,7 @@ function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryR
     filters: filterState,
     ...typeof zoom === "number" && Number.isFinite(zoom) && zoom > 0 ? { zoom } : null,
     ...typeof summaryRowHeight === "number" && Number.isFinite(summaryRowHeight) && summaryRowHeight >= 0 ? { summaryRowHeight } : null,
-    ...density === 32 || density === 48 || density === 56 ? { density } : null
+    ...density === 32 || density === 48 || density === 56 || density === "auto" ? { density } : null
   };
 }
 
@@ -18186,7 +18206,7 @@ async function loadListTableStoredConfig(params) {
     filterState: stored.filters ? stored.filters : null,
     zoom: typeof stored.zoom === "number" && Number.isFinite(stored.zoom) && stored.zoom > 0 ? stored.zoom : null,
     summaryRowHeight: typeof stored.summaryRowHeight === "number" && Number.isFinite(stored.summaryRowHeight) && stored.summaryRowHeight >= 0 ? stored.summaryRowHeight : null,
-    density: stored.density === 32 || stored.density === 48 || stored.density === 56 ? stored.density : null
+    density: stored.density === 32 || stored.density === 48 || stored.density === 56 || stored.density === "auto" ? stored.density : null
   };
 }
 
@@ -18219,11 +18239,12 @@ var ListTablePersistenceController = class {
     }
     let currentOptions = this.options.getOptions();
     if (stored.density != null) {
+      const densitySizes = resolveDensitySizes(
+        stored.density === "auto" ? "auto" : stored.density === 32 ? "compact" : stored.density === 56 ? "comfortable" : "middle"
+      );
       currentOptions = {
         ...currentOptions,
-        rowHeight: stored.density,
-        headerRowHeight: stored.density,
-        summaryRowHeight: stored.density
+        ...densitySizes
       };
     }
     if (stored.summaryRowHeight != null) {
@@ -18528,7 +18549,6 @@ function getMaxDepth(columns) {
 }
 
 // src/domain/layout/compute-scrollbar-layout.ts
-var DEFAULT_SCROLLBAR_THICKNESS = 10;
 var DEFAULT_HORIZONTAL_LEFT = 0;
 var DEFAULT_HORIZONTAL_RIGHT = 0;
 var DEFAULT_HORIZONTAL_BOTTOM = 0;
@@ -20103,7 +20123,10 @@ function buildListTableRenderSnapshot(params) {
     baseRowsOverride,
     displayRowsOverride
   } = params;
-  const scrollbarThickness = options.scrollbar?.visible === false ? 0 : Math.max(options.scrollbar?.thickness ?? 10, 6);
+  const scrollbarThickness = options.scrollbar?.visible === false ? 0 : Math.max(
+    options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
+    6
+  );
   let width = hostWidth;
   let height = hostHeight;
   const sourceNormalizedColumns = normalizeColumns(
@@ -20150,7 +20173,11 @@ function buildListTableRenderSnapshot(params) {
     theme,
     cache: params.cache
   }) : options.rowHeight ?? DEFAULT_ROW_HEIGHT;
-  const headerRowHeight = options.headerRowHeight ?? rowHeight;
+  const headerRowHeight = resolveListTableHeaderRowHeight({
+    rowHeight: options.rowHeight,
+    resolvedRowHeight: rowHeight,
+    headerRowHeight: options.headerRowHeight
+  });
   const summaryRowHeight = options.summaryRowHeight ?? rowHeight;
   const groupingBarHeight = params.groupBarVisible ? rowHeight : 0;
   const columnHeaderHeight = (headerInfo.maxDepth + 1) * headerRowHeight;
@@ -20321,6 +20348,7 @@ function buildListTableRenderSnapshot(params) {
   let bodyState = resolveCurrentBodyState();
   if (plainRowWindow) {
     bodyState.frozenRows.scroll.windowed = true;
+    bodyState.frozenRows.scroll.dataRowIndexAligned = true;
     bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
     bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
     bodyState.bodyLayout = resolveBodyLayout({
@@ -20344,6 +20372,7 @@ function buildListTableRenderSnapshot(params) {
   bodyState = resolveCurrentBodyState();
   if (plainRowWindow) {
     bodyState.frozenRows.scroll.windowed = true;
+    bodyState.frozenRows.scroll.dataRowIndexAligned = true;
     bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
     bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
     bodyState.bodyLayout = resolveBodyLayout({
@@ -20390,6 +20419,7 @@ function buildListTableRenderSnapshot(params) {
     bodyState = resolveCurrentBodyState();
     if (plainRowWindow) {
       bodyState.frozenRows.scroll.windowed = true;
+      bodyState.frozenRows.scroll.dataRowIndexAligned = true;
       bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
       bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
       bodyState.bodyLayout = resolveBodyLayout({
@@ -20909,6 +20939,9 @@ function resolveAutoRowHeightMeasureRows(rows, sampleCount = AUTO_ROW_HEIGHT_SAM
   }
   return rows.slice(0, sampleCount);
 }
+function resolveListTableHeaderRowHeight(params) {
+  return params.headerRowHeight ?? params.resolvedRowHeight;
+}
 function buildListTableDebugSnapshot(params) {
   const {
     snapshot,
@@ -21069,13 +21102,28 @@ function resolveListTableRenderHostSize(params) {
 }
 
 // src/rendering/primitives/draw-scrollbars.ts
-function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true) {
+function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true, verticalFrame) {
   const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
   if (alpha <= 1e-3) {
     return;
   }
   ctx.save();
   ctx.globalAlpha = alpha;
+  if (layout.horizontal && verticalFrame) {
+    drawHorizontalScrollbarMask(
+      ctx,
+      layout.horizontal,
+      verticalFrame.bodyBackgroundColor
+    );
+  }
+  if (layout.vertical && verticalFrame) {
+    drawVerticalScrollbarFrame(
+      ctx,
+      layout.vertical,
+      verticalFrame,
+      borderColor
+    );
+  }
   if (layout.horizontal) {
     drawAxisScrollbar(
       ctx,
@@ -21096,6 +21144,45 @@ function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, inte
       interactive
     );
   }
+  if (layout.horizontal) {
+    drawHorizontalScrollbarTopBorder(
+      ctx,
+      layout.horizontal,
+      layout.vertical,
+      borderColor
+    );
+  }
+  ctx.restore();
+}
+function drawHorizontalScrollbarMask(ctx, layout, backgroundColor) {
+  const left = layout.decreaseButton.x;
+  const right = layout.increaseButton.x + layout.increaseButton.width;
+  const top = layout.decreaseButton.y;
+  const height = layout.decreaseButton.height;
+  if (right <= left || height <= 0) {
+    return;
+  }
+  ctx.save();
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(left, top, right - left, height);
+  ctx.restore();
+}
+function drawHorizontalScrollbarTopBorder(ctx, horizontal, vertical, borderColor) {
+  const left = Math.round(horizontal.decreaseButton.x) + 0.5;
+  const horizontalRight = horizontal.increaseButton.x + horizontal.increaseButton.width;
+  const verticalRight = vertical ? vertical.decreaseButton.x + vertical.decreaseButton.width : horizontalRight;
+  const right = Math.round(Math.max(horizontalRight, verticalRight)) - 0.5;
+  const top = Math.round(horizontal.decreaseButton.y) + 0.5;
+  if (right <= left) {
+    return;
+  }
+  ctx.save();
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(left, top);
+  ctx.lineTo(right, top);
+  ctx.stroke();
   ctx.restore();
 }
 function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
@@ -21126,19 +21213,69 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interact
       scrollbarRole: "increase-button"
     });
   }
-  drawTrack(ctx, layout.track, borderColor);
   drawButton(ctx, layout.decreaseButton, axis, "decrease");
   drawButton(ctx, layout.increaseButton, axis, "increase");
   drawThumb(ctx, layout.thumb);
+  drawTrackBorder(ctx, layout.track, axis, borderColor);
+}
+function drawTrackBorder(ctx, rect, axis, borderColor) {
+  const left = Math.round(rect.x) + 0.5;
+  const right = Math.round(rect.x + rect.width) - 0.5;
+  const top = Math.round(rect.y) + 0.5;
+  const bottom = Math.round(rect.y + rect.height) - 0.5;
+  if (right <= left || bottom <= top) {
+    return;
+  }
+  ctx.save();
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  if (axis === "horizontal") {
+    ctx.moveTo(left, top);
+    ctx.lineTo(right, top);
+  } else {
+    ctx.moveTo(left, top);
+    ctx.lineTo(left, bottom);
+  }
+  ctx.stroke();
+  ctx.restore();
 }
-function drawTrack(ctx, rect, borderColor) {
+function drawVerticalScrollbarFrame(ctx, layout, frame, borderColor) {
+  const left = Math.round(layout.decreaseButton.x) + 0.5;
+  const right = Math.round(layout.decreaseButton.x + layout.decreaseButton.width) - 0.5;
+  const top = Math.round(frame.top) + 0.5;
+  const bottom = Math.round(frame.top + frame.height) - 0.5;
+  const headerBottom = Math.round(frame.headerBottom) + 0.5;
+  if (right <= left || bottom <= top) {
+    return;
+  }
   ctx.save();
-  ctx.fillStyle = "rgba(148, 163, 184, 0.16)";
+  ctx.fillStyle = frame.headerBackgroundColor;
+  ctx.fillRect(
+    layout.decreaseButton.x,
+    frame.top,
+    layout.decreaseButton.width,
+    Math.max(frame.headerBottom - frame.top, 0)
+  );
+  ctx.fillStyle = frame.bodyBackgroundColor;
+  ctx.fillRect(
+    layout.decreaseButton.x,
+    frame.headerBottom,
+    layout.decreaseButton.width,
+    Math.max(frame.top + frame.height - frame.headerBottom, 0)
+  );
   ctx.strokeStyle = borderColor;
   ctx.lineWidth = 1;
-  roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
-  ctx.fill();
+  ctx.beginPath();
+  ctx.moveTo(left, top);
+  ctx.lineTo(left, bottom);
   ctx.stroke();
+  if (headerBottom > top && headerBottom < bottom) {
+    ctx.beginPath();
+    ctx.moveTo(left, headerBottom);
+    ctx.lineTo(right, headerBottom);
+    ctx.stroke();
+  }
   ctx.restore();
 }
 function drawThumb(ctx, rect) {
@@ -21150,34 +21287,25 @@ function drawThumb(ctx, rect) {
 }
 function drawButton(ctx, rect, axis, direction) {
   ctx.save();
-  ctx.fillStyle = "rgba(226, 232, 240, 0.92)";
-  ctx.strokeStyle = "rgba(148, 163, 184, 0.65)";
-  ctx.lineWidth = 1;
-  roundRect(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
-  ctx.fill();
-  ctx.stroke();
   ctx.fillStyle = "rgba(71, 85, 105, 0.88)";
   ctx.beginPath();
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const iconSize = Math.min(rect.width, rect.height) * 0.64;
+  const directionOffset = iconSize * 0.4;
+  const crossAxisOffset = iconSize / 2;
   if (axis === "horizontal") {
-    const centerY = rect.y + rect.height / 2;
-    const iconWidth = rect.width * 0.28;
-    const iconHeight = rect.height * 0.22;
-    const centerX = rect.x + rect.width / 2;
-    const tipX = direction === "decrease" ? centerX - iconWidth / 2 : centerX + iconWidth / 2;
-    const tailX = direction === "decrease" ? centerX + iconWidth / 2 : centerX - iconWidth / 2;
+    const tipX = centerX + (direction === "decrease" ? -1 : 1) * directionOffset;
+    const tailX = centerX + (direction === "decrease" ? 1 : -1) * directionOffset;
     ctx.moveTo(tipX, centerY);
-    ctx.lineTo(tailX, centerY - iconHeight);
-    ctx.lineTo(tailX, centerY + iconHeight);
+    ctx.lineTo(tailX, centerY - crossAxisOffset);
+    ctx.lineTo(tailX, centerY + crossAxisOffset);
   } else {
-    const centerX = rect.x + rect.width / 2;
-    const iconWidth = rect.width * 0.22;
-    const iconHeight = rect.height * 0.28;
-    const centerY = rect.y + rect.height / 2;
-    const tipY = direction === "decrease" ? centerY - iconHeight / 2 : centerY + iconHeight / 2;
-    const tailY = direction === "decrease" ? centerY + iconHeight / 2 : centerY - iconHeight / 2;
+    const tipY = centerY + (direction === "decrease" ? -1 : 1) * directionOffset;
+    const tailY = centerY + (direction === "decrease" ? 1 : -1) * directionOffset;
     ctx.moveTo(centerX, tipY);
-    ctx.lineTo(centerX - iconWidth, tailY);
-    ctx.lineTo(centerX + iconWidth, tailY);
+    ctx.lineTo(centerX - crossAxisOffset, tailY);
+    ctx.lineTo(centerX + crossAxisOffset, tailY);
   }
   ctx.closePath();
   ctx.fill();
@@ -23105,7 +23233,8 @@ function drawHeaderCell(params, cell, clipRect) {
     descriptors.push({
       kind: "header",
       rect,
-      columnKey: cell.node.key
+      columnKey: cell.node.key,
+      fixed: cell.node.fixed
     });
     if (params.rowSelection.type === "checkbox") {
       drawHeaderSelectionControl(params, rect);
@@ -23113,7 +23242,8 @@ function drawHeaderCell(params, cell, clipRect) {
         kind: "header-selection",
         rect: getHeaderSelectionRect(rect),
         columnKey: cell.node.key,
-        controlType: params.rowSelection.type
+        controlType: params.rowSelection.type,
+        fixed: cell.node.fixed
       });
     }
     ctx.restore();
@@ -23123,7 +23253,8 @@ function drawHeaderCell(params, cell, clipRect) {
     descriptors.push({
       kind: "header",
       rect,
-      columnKey: cell.node.key
+      columnKey: cell.node.key,
+      fixed: cell.node.fixed
     });
     ctx.restore();
     return;
@@ -23172,12 +23303,25 @@ function drawHeaderCell(params, cell, clipRect) {
       textLayout,
       titleContent,
       ctx
-    )
+    ),
+    fixed: cell.node.fixed
   });
   if (cell.node.children.length === 0) {
-    drawCollapsedColumnMarkers(params, rect, cell.node.key, collapseMarkerSet);
-    drawHeaderActions(params, rect, cell.node.key, visibleState);
-    drawResizeHandles(params, rect, cell.node.key);
+    drawCollapsedColumnMarkers(
+      params,
+      rect,
+      cell.node.key,
+      collapseMarkerSet,
+      cell.node.fixed
+    );
+    drawHeaderActions(
+      params,
+      rect,
+      cell.node.key,
+      visibleState,
+      cell.node.fixed
+    );
+    drawResizeHandles(params, rect, cell.node.key, cell.node.fixed);
   }
   ctx.restore();
 }
@@ -23215,7 +23359,7 @@ function measureHeaderContentWidth(ctx, contents) {
     0
   ) + Math.max(contents.length - 1, 0) * gap;
 }
-function drawHeaderActions(params, rect, columnKey, visibilityState) {
+function drawHeaderActions(params, rect, columnKey, visibilityState, fixed) {
   if (!visibilityState.visible) {
     return;
   }
@@ -23268,7 +23412,8 @@ function drawHeaderActions(params, rect, columnKey, visibilityState) {
       rect: actionRect,
       columnKey,
       actionType,
-      visibilityState
+      visibilityState,
+      fixed
     });
   });
 }
@@ -23290,15 +23435,15 @@ function resolveCollapsedColumnMarkerSet(markers, columnKey) {
     hasRightMarker: !!right
   };
 }
-function drawCollapsedColumnMarkers(params, rect, columnKey, markerSet) {
+function drawCollapsedColumnMarkers(params, rect, columnKey, markerSet, fixed) {
   if (markerSet.left) {
-    drawCollapsedColumnMarker(params, rect, columnKey, markerSet.left);
+    drawCollapsedColumnMarker(params, rect, columnKey, markerSet.left, fixed);
   }
   if (markerSet.right) {
-    drawCollapsedColumnMarker(params, rect, columnKey, markerSet.right);
+    drawCollapsedColumnMarker(params, rect, columnKey, markerSet.right, fixed);
   }
 }
-function drawCollapsedColumnMarker(params, rect, columnKey, marker) {
+function drawCollapsedColumnMarker(params, rect, columnKey, marker, fixed) {
   const triggerRect = {
     x: marker.align === "left" ? rect.x + GRID_LINE_OFFSET2 - COLLAPSE_TRIGGER_WIDTH / 2 : rect.x + rect.width + GRID_LINE_OFFSET2 - COLLAPSE_TRIGGER_WIDTH / 2,
     y: rect.y + (rect.height - COLLAPSE_TRIGGER_HEIGHT) / 2,
@@ -23312,7 +23457,8 @@ function drawCollapsedColumnMarker(params, rect, columnKey, marker) {
     rect: triggerRect,
     columnKey,
     cursor: "pointer",
-    contentKey: `${marker.rangeStart}:${marker.rangeEnd}`
+    contentKey: `${marker.rangeStart}:${marker.rangeEnd}`,
+    fixed
   });
 }
 function isHeaderCellSelected(params, columnKey, rect) {
@@ -23334,13 +23480,14 @@ function isHeaderCellInRange(rangeHighlight, cell) {
 function isSameRect(left, right) {
   return Math.abs(left.x - right.x) <= 1 && Math.abs(left.y - right.y) <= 1 && Math.abs(left.width - right.width) <= 1 && Math.abs(left.height - right.height) <= 1;
 }
-function drawResizeHandles(params, rect, columnKey) {
+function drawResizeHandles(params, rect, columnKey, fixed) {
   if (params.isResizable(columnKey)) {
     params.descriptors.push({
       kind: "resize-handle",
       rect: getResizeHandleRect(params, rect, "right"),
       columnKey,
-      resizeEdge: "right"
+      resizeEdge: "right",
+      fixed
     });
   }
   const leafIndex = params.leafColumnKeys?.indexOf(columnKey) ?? -1;
@@ -23350,7 +23497,8 @@ function drawResizeHandles(params, rect, columnKey) {
       kind: "resize-handle",
       rect: getResizeHandleRect(params, rect, "left"),
       columnKey: previousColumnKey,
-      resizeEdge: "left"
+      resizeEdge: "left",
+      fixed
     });
   }
 }
@@ -23744,15 +23892,18 @@ function resolveActiveCellOverlayLayout(params) {
   const descriptor = selection.rowIndex != null && selection.columnKey != null ? params.descriptors.find(
     (item) => item.kind === "body" && item.rowIndex === selection.rowIndex && item.columnKey === selection.columnKey
   ) : void 0;
-  const rangeRects = resolveRangeHighlightLayouts({
+  const rangeLayout = resolveRangeHighlightLayouts({
     descriptors: params.descriptors,
     rangeHighlight: params.rangeHighlight,
     highlightMode: params.highlightMode,
     columnKeys: params.columnKeys ?? [],
     allowColumnRange: selection.rowIndex == null,
     allowRowRange: selection.columnKey === ROW_SELECTOR_COLUMN_KEY,
-    resolveClipRect: (item) => resolveActiveCellSectionClipRect(item, params)
+    resolveClipRect: (item) => resolveActiveCellSectionClipRect(item, params),
+    width: params.width,
+    height: params.height
   });
+  const rangeRects = rangeLayout.rects;
   if (!descriptor && rangeRects.length === 0) {
     return null;
   }
@@ -23763,6 +23914,7 @@ function resolveActiveCellOverlayLayout(params) {
   return {
     rect: descriptor?.rect ?? { x: 0, y: 0, width: 0, height: 0 },
     clipRect,
+    rangeSegments: rangeLayout.segments,
     rangeRects
   };
 }
@@ -23771,14 +23923,44 @@ function drawActiveCellOverlay(params) {
     return;
   }
   const { ctx, layout } = params;
-  layout.rangeRects.forEach(({ rect, clipRect, omitLeft, omitRight }) => {
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
-    ctx.clip();
-    drawRangeHighlightBorder(ctx, rect, { omitLeft, omitRight });
-    ctx.restore();
-  });
+  if (layout.rangeSegments?.length) {
+    layout.rangeSegments.forEach((segment) => {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(
+        segment.clipRect.x,
+        segment.clipRect.y,
+        segment.clipRect.width,
+        segment.clipRect.height
+      );
+      ctx.clip();
+      ctx.strokeStyle = "#1677ff";
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(segment.startX, segment.startY);
+      if (segment.controlX != null && segment.controlY != null) {
+        ctx.quadraticCurveTo(
+          segment.controlX,
+          segment.controlY,
+          segment.endX,
+          segment.endY
+        );
+      } else {
+        ctx.lineTo(segment.endX, segment.endY);
+      }
+      ctx.stroke();
+      ctx.restore();
+    });
+  } else {
+    layout.rangeRects.forEach(({ rect, clipRect, omitLeft, omitRight }) => {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
+      ctx.clip();
+      drawRangeHighlightBorder(ctx, rect, { omitLeft, omitRight });
+      ctx.restore();
+    });
+  }
   if (layout.rangeRects.length === 0 && layout.rect.width > 0 && layout.rect.height > 0) {
     ctx.save();
     ctx.beginPath();
@@ -23799,17 +23981,19 @@ function resolveRangeHighlightLayouts(params) {
   const cellRange = params.rangeHighlight?.selectedCellRange;
   const rowSelectorRange = rowRange && params.allowRowRange;
   if (!cellRange && !rowSelectorRange && (!columnRange || !params.allowColumnRange)) {
-    return [];
+    return { rects: [], segments: [] };
   }
   const bodyDescriptors = params.descriptors.filter(
     (item) => item.kind === "body" && item.columnKey != null && item.rowIndex != null
   );
   const selected = bodyDescriptors.filter((item) => {
-    const rowSelected = rowRange != null && item.rowIndex >= rowRange.start && item.rowIndex <= rowRange.end;
+    const itemRowStart = item.rowIndex;
+    const itemRowEnd = itemRowStart + Math.max(item.rowSpan ?? 1, 1) - 1;
+    const rowSelected = rowRange != null && itemRowEnd >= rowRange.start && itemRowStart <= rowRange.end;
     const columnIndex = params.columnKeys.indexOf(item.columnKey);
     const columnSelected = columnRange != null && columnIndex >= columnRange.start && columnIndex <= columnRange.end;
     if (cellRange) {
-      return item.rowIndex >= cellRange.startRowIndex && item.rowIndex <= cellRange.endRowIndex && columnIndex >= cellRange.startColumnIndex && columnIndex <= cellRange.endColumnIndex;
+      return itemRowEnd >= cellRange.startRowIndex && itemRowStart <= cellRange.endRowIndex && columnIndex >= cellRange.startColumnIndex && columnIndex <= cellRange.endColumnIndex;
     }
     if (rowSelectorRange) {
       return rowSelected;
@@ -23845,7 +24029,7 @@ function resolveRangeHighlightLayouts(params) {
     layer.push(range);
     groupedByLayer.set(key, layer);
   });
-  return ranges.map((range) => {
+  const rects = ranges.map((range) => {
     const layer = groupedByLayer.get(`${range.rect.y}:${range.rect.height}`) ?? [];
     const minX = Math.min(...layer.map((item) => item.rect.x));
     const maxX = Math.max(
@@ -23857,6 +24041,172 @@ function resolveRangeHighlightLayouts(params) {
       omitRight: range.rect.x + range.rect.width < maxX
     };
   });
+  return {
+    rects,
+    segments: roundRangeBorderAtTableBottom(
+      resolveRangeBorderSegments(selected, params.resolveClipRect),
+      params.width,
+      params.height
+    )
+  };
+}
+function roundRangeBorderAtTableBottom(segments, width, height) {
+  const inset = 0.5;
+  const left = inset;
+  const right = width - inset;
+  const bottom = height - inset;
+  const radius = Math.max(
+    TABLE_CONTENT_BORDER_RADIUS - TABLE_CONTENT_BORDER_SIZE / 2,
+    0
+  );
+  if (radius <= 0) return segments;
+  const rounded = segments.map((segment) => ({ ...segment }));
+  const curves = [];
+  const bottomSegments = rounded.filter(
+    (segment) => nearlyEqual(segment.startY, bottom) && nearlyEqual(segment.endY, bottom)
+  );
+  const leftBottom = bottomSegments.find(
+    (segment) => nearlyEqual(segment.startX, left)
+  );
+  const leftSide = rounded.find(
+    (segment) => nearlyEqual(segment.startX, left) && nearlyEqual(segment.endX, left) && nearlyEqual(segment.endY, bottom)
+  );
+  if (leftBottom && leftSide) {
+    leftBottom.startX = Math.min(left + radius, leftBottom.endX);
+    leftSide.endY = Math.max(bottom - radius, leftSide.startY);
+    curves.push({
+      startX: leftSide.endX,
+      startY: leftSide.endY,
+      controlX: left,
+      controlY: bottom,
+      endX: leftBottom.startX,
+      endY: leftBottom.startY,
+      clipRect: leftSide.clipRect
+    });
+  }
+  const rightBottom = bottomSegments.find(
+    (segment) => nearlyEqual(segment.endX, right)
+  );
+  const rightSide = rounded.find(
+    (segment) => nearlyEqual(segment.startX, right) && nearlyEqual(segment.endX, right) && nearlyEqual(segment.endY, bottom)
+  );
+  if (rightBottom && rightSide) {
+    rightBottom.endX = Math.max(right - radius, rightBottom.startX);
+    rightSide.endY = Math.max(bottom - radius, rightSide.startY);
+    curves.push({
+      startX: rightBottom.endX,
+      startY: rightBottom.endY,
+      controlX: right,
+      controlY: bottom,
+      endX: rightSide.endX,
+      endY: rightSide.endY,
+      clipRect: rightSide.clipRect
+    });
+  }
+  return [...rounded, ...curves];
+}
+function nearlyEqual(left, right) {
+  return Math.abs(left - right) < 1e-3;
+}
+function resolveRangeBorderSegments(descriptors, resolveClipRect) {
+  const byLeft = groupDescriptorsByCoordinate(
+    descriptors,
+    (descriptor) => descriptor.rect.x
+  );
+  const byRight = groupDescriptorsByCoordinate(
+    descriptors,
+    (descriptor) => descriptor.rect.x + descriptor.rect.width
+  );
+  const byTop = groupDescriptorsByCoordinate(
+    descriptors,
+    (descriptor) => descriptor.rect.y
+  );
+  const byBottom = groupDescriptorsByCoordinate(
+    descriptors,
+    (descriptor) => descriptor.rect.y + descriptor.rect.height
+  );
+  return descriptors.flatMap((descriptor) => {
+    const { rect } = descriptor;
+    const left = rect.x;
+    const right = rect.x + rect.width;
+    const top = rect.y;
+    const bottom = rect.y + rect.height;
+    const clipRect = resolveClipRect(descriptor);
+    const horizontal = (y, side) => {
+      const adjacent = (side === "top" ? byBottom : byTop).get(
+        coordinateKey(side === "top" ? top : bottom)
+      ) ?? [];
+      return subtractCoveredIntervals(
+        left,
+        right,
+        adjacent.flatMap((other) => {
+          if (other === descriptor) return [];
+          return [[other.rect.x, other.rect.x + other.rect.width]];
+        })
+      ).map(([start, end]) => ({
+        startX: start + (Math.abs(start - left) < 1e-3 ? 0.5 : 0),
+        startY: y,
+        endX: end - (Math.abs(end - right) < 1e-3 ? 0.5 : 0),
+        endY: y,
+        clipRect
+      }));
+    };
+    const vertical = (x, side) => {
+      const adjacent = (side === "left" ? byRight : byLeft).get(
+        coordinateKey(side === "left" ? left : right)
+      ) ?? [];
+      return subtractCoveredIntervals(
+        top,
+        bottom,
+        adjacent.flatMap((other) => {
+          if (other === descriptor) return [];
+          return [[other.rect.y, other.rect.y + other.rect.height]];
+        })
+      ).map(([start, end]) => ({
+        startX: x,
+        startY: start + (Math.abs(start - top) < 1e-3 ? 0.5 : 0),
+        endX: x,
+        endY: end - (Math.abs(end - bottom) < 1e-3 ? 0.5 : 0),
+        clipRect
+      }));
+    };
+    return [
+      ...horizontal(top + 0.5, "top"),
+      ...horizontal(bottom - 0.5, "bottom"),
+      ...vertical(left + 0.5, "left"),
+      ...vertical(right - 0.5, "right")
+    ];
+  });
+}
+function groupDescriptorsByCoordinate(descriptors, getCoordinate) {
+  const groups = /* @__PURE__ */ new Map();
+  descriptors.forEach((descriptor) => {
+    const key = coordinateKey(getCoordinate(descriptor));
+    const group = groups.get(key) ?? [];
+    group.push(descriptor);
+    groups.set(key, group);
+  });
+  return groups;
+}
+function coordinateKey(value) {
+  return String(Math.round(value * 1e3) / 1e3);
+}
+function subtractCoveredIntervals(start, end, coveredIntervals) {
+  let visible = [[start, end]];
+  coveredIntervals.forEach(([coveredStart, coveredEnd]) => {
+    visible = visible.flatMap(([currentStart, currentEnd]) => {
+      const overlapStart = Math.max(currentStart, coveredStart);
+      const overlapEnd = Math.min(currentEnd, coveredEnd);
+      if (overlapEnd <= overlapStart) return [[currentStart, currentEnd]];
+      const next = [];
+      if (overlapStart > currentStart) next.push([currentStart, overlapStart]);
+      if (overlapEnd < currentEnd) next.push([overlapEnd, currentEnd]);
+      return next;
+    });
+  });
+  return visible.filter(
+    ([currentStart, currentEnd]) => currentEnd > currentStart
+  );
 }
 function drawRangeHighlightBorder(ctx, rect, edges = {}) {
   ctx.save();
@@ -24119,6 +24469,7 @@ function executeListTableRenderPipeline(params) {
       descriptors,
       selection,
       width,
+      height,
       headerHeight,
       topFrozenHeight,
       scrollBodyTop,
@@ -24146,7 +24497,14 @@ function executeListTableRenderPipeline(params) {
     descriptors,
     theme.borderColor,
     scrollbarOpacity,
-    isScrollbarInteractive
+    isScrollbarInteractive,
+    {
+      top: 0,
+      height,
+      headerBottom: headerHeight,
+      headerBackgroundColor: theme.headerBackgroundColor,
+      bodyBackgroundColor: theme.backgroundColor
+    }
   );
   if (headerDraggingIndicator) {
     drawDragOverlayFrame({
@@ -25266,7 +25624,7 @@ var ListTableScrollToController = class {
     });
     const targetTop = visibleRowIndex == null ? null : resolveScrollTopForRowIndex({
       rowIndex: visibleRowIndex,
-      rowCount: snapshot.visibleRows.length,
+      rowCount: snapshot.frozenRows.scroll.dataRowIndexAligned ? snapshot.dataRowCount : snapshot.visibleRows.length,
       rowHeight: snapshot.rowHeight,
       maxScrollTop: snapshot.viewport.maxScrollTop,
       frozenRows: snapshot.frozenRows
@@ -26613,7 +26971,7 @@ var ListTableCore = class {
    */
   changeDensity(density) {
     this.headerActionController.changeTableDensity(
-      density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
+      density === "auto" ? "auto" : density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
     );
   }
   /**