@canvas-components/list-table 0.3.7 → 0.3.9

package/dist/index.cjs

@@ -3175,7 +3175,7 @@ function drawBodyBarcodeContent(params) {
     opacity: resolveContentOpacity(content),
     displayValue: content.showText,
     text: content.text,
-    fontSize: resolveContentFontSize(content, 12),
+    fontSize: resolveContentFontSize(content, theme.fontSize),
     fontWeight: resolveContentFontWeight(content, ""),
     fontFamily: resolveContentFontFamily(content, theme),
     textColor: content.style?.color ?? content.color
@@ -3183,7 +3183,7 @@ function drawBodyBarcodeContent(params) {
   ctx.restore();
   if (content.showText) {
     const text = content.text ?? content.value;
-    const fontSize = resolveContentFontSize(content, 12);
+    const fontSize = resolveContentFontSize(content, theme.fontSize);
     const font = buildCanvasFont({
       fontWeight: resolveContentFontWeight(content, ""),
       fontSize,
@@ -3253,12 +3253,6 @@ var BUTTON_HEIGHT_MAP = {
   medium: 32,
   large: 40
 };
-var BUTTON_FONT_SIZE_MAP = {
-  small: 14,
-  middle: 14,
-  medium: 14,
-  large: 16
-};
 var BUTTON_PADDING_INLINE_MAP = {
   small: 7,
   middle: 15,
@@ -3410,10 +3404,9 @@ function measureButtonContentHeight(content) {
   return BUTTON_HEIGHT_MAP[resolveButtonSize(content.size)];
 }
 function applyButtonTextStyle(ctx, content, theme) {
-  const size = resolveButtonSize(content.size);
   ctx.font = buildCanvasFont({
     fontWeight: resolveContentFontWeight(content, "400"),
-    fontSize: resolveContentFontSize(content, BUTTON_FONT_SIZE_MAP[size]),
+    fontSize: resolveContentFontSize(content, theme.fontSize),
     fontFamily: resolveContentFontFamily(content, theme)
   });
   ctx.textAlign = "left";
@@ -4952,7 +4945,7 @@ function measureProgressContentWidth(ctx, content, theme) {
 }
 function measureProgressContentHeight(content, theme) {
   const shape = content.shape ?? "line";
-  const textHeight = shouldShowProgressLabel(content) ? resolveContentFontSize(content, Math.max(theme.fontSize - 1, 12)) : 0;
+  const textHeight = shouldShowProgressLabel(content) ? resolveContentFontSize(content, theme.fontSize) : 0;
   const sizeMetrics = resolveProgressSizeMetrics(content, shape);
   if (shape === "circle") {
     return Math.max(sizeMetrics.height, sizeMetrics.width, 20);
@@ -5054,7 +5047,7 @@ function resolveProgressMetrics(ctx, content, theme) {
   const sizeMetrics = resolveProgressSizeMetrics(content, shape);
   applyProgressTextStyle(ctx, content, theme);
   const textWidth = showLabel && progressText ? ctx.measureText(progressText).width : 0;
-  const textHeight = showLabel ? resolveContentFontSize(content, Math.max(theme.fontSize - 1, 12)) : 0;
+  const textHeight = showLabel ? resolveContentFontSize(content, theme.fontSize) : 0;
   if (shape === "circle") {
     return {
       width: Math.max(sizeMetrics.width, 20),
@@ -5169,7 +5162,7 @@ function resolveProgressTextColor(content) {
 function applyProgressTextStyle(ctx, content, theme) {
   ctx.font = buildCanvasFont({
     fontWeight: resolveContentFontWeight(content, "500"),
-    fontSize: resolveContentFontSize(content, Math.max(theme.fontSize - 1, 12)),
+    fontSize: resolveContentFontSize(content, theme.fontSize),
     fontFamily: resolveContentFontFamily(content, theme)
   });
   ctx.textBaseline = "middle";
@@ -5689,7 +5682,7 @@ function drawSwitchControl(ctx, rect, content, theme, animationProgress, beforeT
   const displayText = normalizedProgress >= 0.5 ? content.checkedChildren ?? "" : content.uncheckedChildren ?? "";
   if (displayText) {
     ctx.fillStyle = textColor;
-    ctx.font = `12px ${theme.fontFamily}`;
+    ctx.font = `${theme.fontSize}px ${theme.fontFamily}`;
     ctx.textBaseline = "alphabetic";
     ctx.textAlign = checked ? "left" : "right";
     const metrics = ctx.measureText(displayText);
@@ -5722,7 +5715,7 @@ function resolveSwitchTextLayout(ctx, rect, content, theme, animationProgress) {
   const text = normalizedProgress >= 0.5 ? content.checkedChildren ?? "" : content.uncheckedChildren ?? "";
   if (!text) return null;
   ctx.save();
-  ctx.font = `12px ${theme.fontFamily}`;
+  ctx.font = `${theme.fontSize}px ${theme.fontFamily}`;
   const metrics = ctx.measureText(text);
   const ascent = metrics.actualBoundingBoxAscent ?? 0;
   const descent = metrics.actualBoundingBoxDescent ?? 0;
@@ -5740,7 +5733,7 @@ function measureSwitchContentWidth(ctx, content, theme) {
     return SWITCH_MIN_WIDTH;
   }
   ctx.save();
-  ctx.font = `12px ${theme.fontFamily}`;
+  ctx.font = `${theme.fontSize}px ${theme.fontFamily}`;
   const maxTextWidth = Math.max(
     ctx.measureText(checkedText).width,
     ctx.measureText(uncheckedText).width
@@ -5885,7 +5878,7 @@ function drawBodyTagContent(params) {
   ctx.fillStyle = textColor;
   ctx.font = buildCanvasFont({
     fontWeight: resolveContentFontWeight(content, "500"),
-    fontSize: resolveContentFontSize(content, Math.max(theme.fontSize - 1, 12)),
+    fontSize: resolveContentFontSize(content, theme.fontSize),
     fontFamily: resolveContentFontFamily(content, theme)
   });
   ctx.textAlign = "left";
@@ -5974,7 +5967,7 @@ function measureTagContentWidth(ctx, content, theme) {
 function applyTagTextStyle(ctx, content, theme) {
   ctx.font = buildCanvasFont({
     fontWeight: resolveContentFontWeight(content, "500"),
-    fontSize: resolveContentFontSize(content, Math.max(theme.fontSize - 1, 12)),
+    fontSize: resolveContentFontSize(content, theme.fontSize),
     fontFamily: resolveContentFontFamily(content, theme)
   });
   ctx.textAlign = "left";
@@ -6692,7 +6685,7 @@ function drawBodyCellContents(params) {
     return void 0;
   }
   const paddingInline = column.cellStyle?.paddingInline ?? CONTENT_HORIZONTAL_PADDING;
-  const paddingBlock = column.cellStyle?.paddingBlock ?? CONTENT_VERTICAL_PADDING;
+  const paddingBlock = column.cellStyle?.paddingBlock ?? params.defaultPaddingBlock ?? CONTENT_VERTICAL_PADDING;
   const availableWidth = Math.max(rect.width - paddingInline * 2, 0);
   const availableHeight = Math.max(rect.height - paddingBlock * 2, 0);
   if (availableWidth <= 0 || availableHeight <= 0) {
@@ -7598,7 +7591,7 @@ function getBodyCellContentsLineHeight(contents, theme) {
       lineHeight = Math.max(
         lineHeight,
         Math.max(
-          item.style?.fontSize ?? item.fontSize ?? Math.max(theme.fontSize - 1, 12),
+          item.style?.fontSize ?? item.fontSize ?? theme.fontSize,
           12
         ) + 10,
         item.height ?? 22
@@ -11658,9 +11651,51 @@ function setValueByDataIndex(record, dataIndex, value) {
   return true;
 }
 
+// src/shared/theme/density.ts
+var ULTRA_COMPACT_ROW_HEIGHT = 26;
+var ULTRA_COMPACT_PADDING_BLOCK = 2;
+var DEFAULT_PADDING_BLOCK = 6;
+function resolveDensitySizes(density) {
+  if (density === "auto") {
+    return {
+      rowHeight: "auto",
+      headerRowHeight: void 0,
+      summaryRowHeight: void 0
+    };
+  }
+  if (density === "comfortable") {
+    return {
+      rowHeight: 56,
+      headerRowHeight: 56,
+      summaryRowHeight: 56
+    };
+  }
+  if (density === "ultra-compact") {
+    return {
+      rowHeight: ULTRA_COMPACT_ROW_HEIGHT,
+      headerRowHeight: ULTRA_COMPACT_ROW_HEIGHT,
+      summaryRowHeight: ULTRA_COMPACT_ROW_HEIGHT
+    };
+  }
+  if (density === "compact") {
+    return {
+      rowHeight: 32,
+      headerRowHeight: 32,
+      summaryRowHeight: 32
+    };
+  }
+  return {
+    rowHeight: 48,
+    headerRowHeight: 48,
+    summaryRowHeight: 48
+  };
+}
+function resolveDensityPaddingBlock(rowHeight) {
+  return rowHeight <= ULTRA_COMPACT_ROW_HEIGHT ? ULTRA_COMPACT_PADDING_BLOCK : DEFAULT_PADDING_BLOCK;
+}
+
 // src/features/editing/editing-feature.ts
 var DEFAULT_EDITOR_PADDING_INLINE = 12;
-var DEFAULT_EDITOR_PADDING_BLOCK = 6;
 function openCellEditingSession(params) {
   const {
     rowIndex,
@@ -11678,7 +11713,8 @@ function openCellEditingSession(params) {
     onCommit,
     onCancel,
     onNavigate,
-    initialValue
+    initialValue,
+    defaultPaddingBlock
   } = params;
   const column = leafColumns.find((item) => item.key === columnKey);
   const record = rows[rowIndex];
@@ -11712,7 +11748,7 @@ function openCellEditingSession(params) {
   const hostRect = toHostRect ? toHostRect(descriptor.rect) : descriptor.rect;
   const zoom = typeof theme.contentZoom === "number" && Number.isFinite(theme.contentZoom) && theme.contentZoom > 0 ? theme.contentZoom : 1;
   const paddingInline = (column.cellStyle?.paddingInline ?? DEFAULT_EDITOR_PADDING_INLINE) * zoom;
-  const paddingBlock = (column.cellStyle?.paddingBlock ?? DEFAULT_EDITOR_PADDING_BLOCK) * zoom;
+  const paddingBlock = (column.cellStyle?.paddingBlock ?? defaultPaddingBlock ?? resolveDensityPaddingBlock(descriptor.rect.height)) * zoom;
   const editorTheme = {
     fontSize: theme.fontSize,
     fontFamily: theme.fontFamily,
@@ -11991,6 +12027,7 @@ var ListTableEditingController = class {
     this.options.clearBodyTooltip();
     const zoom = this.options.getTableZoom() > 0 ? this.options.getTableZoom() : 1;
     const theme = this.options.getTheme();
+    const configuredRowHeight = this.options.getOptions().rowHeight;
     this.editingSession = openCellEditingSession({
       rowIndex,
       columnKey,
@@ -12008,6 +12045,7 @@ var ListTableEditingController = class {
         textColor: theme.textColor,
         contentZoom: zoom
       },
+      defaultPaddingBlock: typeof configuredRowHeight === "number" ? resolveDensityPaddingBlock(configuredRowHeight) : void 0,
       editorFactory: this.options.getEditorFactory(),
       onEditorRequest: this.options.getOptions().ui?.onEditorRequest,
       onCommit: (commitOptions) => {
@@ -13957,6 +13995,9 @@ function resolveContextMenuDensity(rowHeight) {
   if (rowHeight === 56) {
     return "comfortable";
   }
+  if (rowHeight === 26) {
+    return "ultra-compact";
+  }
   if (rowHeight === 32) {
     return "compact";
   }
@@ -17768,36 +17809,6 @@ function resolveToggleHeaderColumnVisibilityAction(params) {
   return toggleHeaderColumnVisibility(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,
-      headerRowHeight: 56,
-      summaryRowHeight: 56
-    };
-  }
-  if (density === "compact") {
-    return {
-      rowHeight: 32,
-      headerRowHeight: 32,
-      summaryRowHeight: 32
-    };
-  }
-  return {
-    rowHeight: 48,
-    headerRowHeight: 48,
-    summaryRowHeight: 48
-  };
-}
-
 // src/shared/filter/filter-panel-data.ts
 function resolveFilterPanelDataSource(params) {
   if (params.queryRowsOverrideBase) {
@@ -18454,7 +18465,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 === "auto" ? { density } : null
+    ...density === 26 || density === 32 || density === 48 || density === 56 || density === "auto" ? { density } : null
   };
 }
 
@@ -18545,7 +18556,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 === "auto" ? stored.density : null
+    density: stored.density === 26 || stored.density === 32 || stored.density === 48 || stored.density === 56 || stored.density === "auto" ? stored.density : null
   };
 }
 
@@ -18580,7 +18591,7 @@ 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"
+        stored.density === "auto" ? "auto" : stored.density === 26 ? "ultra-compact" : stored.density === 32 ? "compact" : stored.density === 56 ? "comfortable" : "middle"
       );
       currentOptions = {
         ...currentOptions,
@@ -20489,6 +20500,10 @@ function buildListTableRenderSnapshot(params) {
   if (leafColumns.length === 0) {
     return null;
   }
+  const columnMetrics = resolveColumnMetrics({
+    columns: leafColumns,
+    tableWidth: width
+  });
   const headerInfo = buildHeaderTree(normalizedColumns, leafColumns);
   const sourceQueryRows = {
     baseRows: baseRowsOverride ?? getBaseDisplayRows({
@@ -20530,8 +20545,11 @@ function buildListTableRenderSnapshot(params) {
     (col) => col.summary != null || col.summaryTitle != null
   );
   const hasSummary = queryRows.displayRows.length > 0 && options.summaryRowHeight !== 0 && (options.summaryRowHeight != null || hasConfiguredSummary);
+  const hasHorizontalScrollbar = options.scrollbar?.visible !== false && columnMetrics.centerContentWidth - columnMetrics.availableCenterWidth > 1;
+  const horizontalScrollbarReserve = hasSummary && hasHorizontalScrollbar ? scrollbarThickness + Math.max(options.scrollbar?.horizontalBottom ?? 0, 0) : 0;
+  const contentHeight = Math.max(height - horizontalScrollbarReserve, 0);
   const initialBodyLayout = resolveBodyLayout({
-    height,
+    height: contentHeight,
     headerHeight,
     summaryRowHeight,
     hasSummary,
@@ -20661,7 +20679,7 @@ function buildListTableRenderSnapshot(params) {
       }
     },
     bodyLayout: resolveBodyLayout({
-      height,
+      height: contentHeight,
       headerHeight,
       summaryRowHeight,
       hasSummary,
@@ -20683,7 +20701,7 @@ function buildListTableRenderSnapshot(params) {
     visibleRows: filteredVisibleRows,
     frozenState: frozenRows,
     getRowKey: (row) => row.kind === "data" ? row.rowKey : null,
-    height,
+    height: contentHeight,
     headerHeight,
     summaryRowHeight,
     hasSummary,
@@ -20696,7 +20714,7 @@ function buildListTableRenderSnapshot(params) {
     bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
     bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
     bodyState.bodyLayout = resolveBodyLayout({
-      height,
+      height: contentHeight,
       headerHeight,
       summaryRowHeight,
       hasSummary,
@@ -20720,7 +20738,7 @@ function buildListTableRenderSnapshot(params) {
     bodyState.frozenRows.scroll.rowIndexMap = plainRowWindow.rowIndexMap;
     bodyState.frozenRows.scroll.rowOffsetMap = plainRowWindow.rowOffsetMap;
     bodyState.bodyLayout = resolveBodyLayout({
-      height,
+      height: contentHeight,
       headerHeight,
       summaryRowHeight,
       hasSummary,
@@ -20731,10 +20749,6 @@ function buildListTableRenderSnapshot(params) {
       scrollRowCount: plainRowWindow.totalRowCount
     });
   }
-  let columnMetrics = resolveColumnMetrics({
-    columns: leafColumns,
-    tableWidth: width
-  });
   let viewportResult = computeViewport({
     width,
     height,
@@ -21915,7 +21929,8 @@ function drawSegmentRows(params, segment, columns, startRowIndex, endRowIndex, r
         params.requestRender,
         validationMessage,
         intersectRects3(rect, renderClipRect) ?? rect,
-        (params.rangeHighlight ?? EMPTY_RANGE_HIGHLIGHT2).searchMatch
+        (params.rangeHighlight ?? EMPTY_RANGE_HIGHLIGHT2).searchMatch,
+        resolveDensityPaddingBlock(params.rowHeight)
       );
       if (cell.row.kind === "data") {
         applyRowSpanToDescriptors(
@@ -22014,6 +22029,7 @@ function drawExpandedRowsOverlay(params, startRowIndex, endRowIndex, rowOffsets)
       progress: expandedRowAnimation.progress,
       row,
       theme: params.theme,
+      defaultPaddingBlock: resolveDensityPaddingBlock(params.rowHeight),
       rowBackgroundColor: params.rowBackgroundColor,
       striped: params.striped === true,
       descriptors: params.descriptors,
@@ -22539,7 +22555,7 @@ function getMergedCellWidth(columns, startIndex, colSpan) {
   }
   return width;
 }
-function drawBodyCell(ctx, rect, record, rowIndex, column, theme, rowBackgroundColor, striped, hovered, selected, textSelection, frozen, descriptors, row, expandableConfig, collapseConfig, collapseBoundaryMarkers, getNestedTableHighlight, getControlAnimationProgress, requestRender, validationMessage, visibleRect, searchMatch) {
+function drawBodyCell(ctx, rect, record, rowIndex, column, theme, rowBackgroundColor, striped, hovered, selected, textSelection, frozen, descriptors, row, expandableConfig, collapseConfig, collapseBoundaryMarkers, getNestedTableHighlight, getControlAnimationProgress, requestRender, validationMessage, visibleRect, searchMatch, defaultPaddingBlock) {
   ctx.save();
   const paintStyle = resolveBodyCellPaintStyle({
     theme,
@@ -22582,6 +22598,7 @@ function drawBodyCell(ctx, rect, record, rowIndex, column, theme, rowBackgroundC
     rowIndex,
     column,
     theme: paintStyle.theme,
+    defaultPaddingBlock,
     frozen,
     hovered,
     descriptors,
@@ -22933,6 +22950,7 @@ function drawAnimatedExpandedBodyCell(params) {
     rect,
     params.row,
     params.theme,
+    params.defaultPaddingBlock,
     params.rowBackgroundColor,
     params.striped,
     params.descriptors,
@@ -22946,7 +22964,7 @@ function drawAnimatedExpandedBodyCell(params) {
   ctx.restore();
   return tooltip;
 }
-function drawExpandedBodyCell(ctx, rect, row, theme, rowBackgroundColor, striped, descriptors, visibleRect, segment, segments, contentInset, getNestedTableHighlight, textSelection) {
+function drawExpandedBodyCell(ctx, rect, row, theme, defaultPaddingBlock, rowBackgroundColor, striped, descriptors, visibleRect, segment, segments, contentInset, getNestedTableHighlight, textSelection) {
   ctx.save();
   ctx.fillStyle = rowBackgroundColor ?? (striped && row.ownerDataRowIndex % 2 === 1 ? theme.stripedBackgroundColor : theme.backgroundColor);
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
@@ -22986,6 +23004,7 @@ function drawExpandedBodyCell(ctx, rect, row, theme, rowBackgroundColor, striped
       rowIndex: row.ownerDataRowIndex,
       column: virtualColumn,
       theme,
+      defaultPaddingBlock,
       frozen: false,
       hovered: false,
       descriptors,
@@ -23273,6 +23292,21 @@ function drawFixedLeftBoundary(params) {
   ctx.stroke();
   ctx.restore();
 }
+function drawFixedRightBoundary(params) {
+  const { ctx, rightBoundaryX, fixedWidthRight, height, borderColor } = params;
+  if (fixedWidthRight <= 0 || height <= 0) {
+    return;
+  }
+  const x = Math.round(rightBoundaryX) + 0.5;
+  ctx.save();
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(x, 0);
+  ctx.lineTo(x, height);
+  ctx.stroke();
+  ctx.restore();
+}
 function mergeBoundarySkipRanges(skipRanges, height) {
   const ranges = skipRanges.map((range) => ({
     start: Math.max(Math.min(range.start, height), 0),
@@ -23519,7 +23553,7 @@ function drawHeaderCell(params, cell, clipRect) {
     rect,
     titleContent,
     theme.fontSize,
-    cell.node.style?.paddingBlock ?? 6,
+    cell.node.style?.paddingBlock ?? params.defaultPaddingBlock ?? resolveDensityPaddingBlock(cell.height),
     cell.node.style?.verticalAlign
   );
   ctx.textAlign = textLayout.align;
@@ -24054,6 +24088,15 @@ function findCellByKey(headerRows, columnKey) {
   return null;
 }
 
+// src/rendering/pipeline/header-clip.ts
+function resolveCenterHeaderClipWidth(params) {
+  const centerContentWidth = params.leafColumns.reduce(
+    (total, column) => column.fixed == null ? total + column.width : total,
+    0
+  );
+  return Math.min(params.availableCenterWidth, centerContentWidth);
+}
+
 // src/rendering/pipeline/header-renderer.ts
 function drawListTableHeader(params) {
   const {
@@ -24082,10 +24125,14 @@ function drawListTableHeader(params) {
     draggingReorder,
     requestRender
   } = params;
-  const centerClipRect = availableCenterWidth > 0 ? {
+  const centerClipWidth = resolveCenterHeaderClipWidth({
+    availableCenterWidth,
+    leafColumns
+  });
+  const centerClipRect = centerClipWidth > 0 ? {
     x: fixedWidthLeft,
     y: 0,
-    width: availableCenterWidth,
+    width: centerClipWidth,
     height: headerHeight
   } : null;
   const collapsedColumnMarkers = resolveCollapsedHeaderColumnMarkers({
@@ -24098,6 +24145,7 @@ function drawListTableHeader(params) {
     headerRows,
     centerClipRect,
     theme,
+    defaultPaddingBlock: typeof options.headerRowHeight === "number" ? resolveDensityPaddingBlock(options.headerRowHeight) : void 0,
     descriptors,
     hoveredColumnKey: hover.area === "header" || hover.area === "sort-trigger" || hover.area === "filter-trigger" || hover.area === "fixed-trigger" ? hover.columnKey : null,
     hoveredActionType: hover.area,
@@ -24179,6 +24227,7 @@ function drawRowDragInsertionIndicator(params) {
 }
 
 // src/rendering/pipeline/active-cell-overlay.ts
+var RIGHT_BORDER_CLIP_BLEED = 1;
 function resolveActiveCellOverlayLayout(params) {
   const { selection } = params;
   const descriptor = selection.rowIndex != null && selection.columnKey != null ? params.descriptors.find(
@@ -24333,15 +24382,69 @@ function resolveRangeHighlightLayouts(params) {
       omitRight: range.rect.x + range.rect.width < maxX
     };
   });
+  const rangeSegments = resolveRangeBorderSegments(
+    selected,
+    params.resolveClipRect
+  );
   return {
     rects,
     segments: roundRangeBorderAtTableBottom(
-      resolveRangeBorderSegments(selected, params.resolveClipRect),
+      removeRangeSegmentsAtSharedLayerBoundaries(rangeSegments, ranges),
       params.width,
       params.height
     )
   };
 }
+function removeRangeSegmentsAtSharedLayerBoundaries(segments, ranges) {
+  const tolerance = 1;
+  const sharedBoundaries = [];
+  const visibleRanges = ranges.map((range) => intersectRangeWithClip(range.rect, range.clipRect)).filter((range) => range != null);
+  visibleRanges.forEach((left, leftIndex) => {
+    visibleRanges.slice(leftIndex + 1).forEach((right) => {
+      const leftEdge = left.x + left.width;
+      const rightEdge = right.x;
+      const reverseLeftEdge = right.x + right.width;
+      const reverseRightEdge = left.x;
+      const boundary = Math.abs(leftEdge - rightEdge) <= tolerance ? (leftEdge + rightEdge) / 2 : Math.abs(reverseLeftEdge - reverseRightEdge) <= tolerance ? (reverseLeftEdge + reverseRightEdge) / 2 : null;
+      if (boundary == null) {
+        return;
+      }
+      const top = Math.max(left.y, right.y);
+      const bottom = Math.min(
+        left.y + left.height,
+        right.y + right.height
+      );
+      if (bottom > top) {
+        sharedBoundaries.push({ x: boundary, top, bottom });
+      }
+    });
+  });
+  return segments.filter((segment) => {
+    if (!nearlyEqual(segment.startX, segment.endX)) {
+      return true;
+    }
+    const top = Math.min(segment.startY, segment.endY);
+    const bottom = Math.max(segment.startY, segment.endY);
+    return !sharedBoundaries.some(
+      (boundary) => Math.abs(segment.startX - boundary.x) <= tolerance && bottom > boundary.top && top < boundary.bottom
+    );
+  });
+}
+function intersectRangeWithClip(rect, clipRect) {
+  const left = Math.max(rect.x, clipRect.x);
+  const top = Math.max(rect.y, clipRect.y);
+  const right = Math.min(rect.x + rect.width, clipRect.x + clipRect.width);
+  const bottom = Math.min(rect.y + rect.height, clipRect.y + clipRect.height);
+  if (right <= left || bottom <= top) {
+    return null;
+  }
+  return {
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top
+  };
+}
 function roundRangeBorderAtTableBottom(segments, width, height) {
   const inset = 0.5;
   const left = inset;
@@ -24535,11 +24638,11 @@ function drawRangeHighlightBorder(ctx, rect, edges = {}) {
 }
 function resolveActiveCellSectionClipRect(descriptor, params) {
   const horizontal = descriptor.fixed === "left" ? { x: 0, width: params.fixedWidthLeft } : descriptor.fixed === "right" ? {
-    x: params.width - params.fixedWidthRight,
-    width: params.fixedWidthRight
+    x: params.rightStartX,
+    width: params.fixedWidthRight + RIGHT_BORDER_CLIP_BLEED
   } : {
     x: params.fixedWidthLeft,
-    width: params.availableCenterWidth
+    width: Math.max(params.rightStartX - params.fixedWidthLeft, 0) + RIGHT_BORDER_CLIP_BLEED
   };
   if (!descriptor.frozen) {
     return {
@@ -24755,6 +24858,33 @@ function executeListTableRenderPipeline(params) {
     borderColor: theme.borderColor,
     skipRanges: fixedLeftBoundarySkips
   });
+  drawFixedRightBoundary({
+    ctx,
+    rightBoundaryX: snapshot.columnMetrics.rightStartX + snapshot.columnMetrics.fixedWidthRight,
+    fixedWidthRight: snapshot.columnMetrics.fixedWidthRight,
+    height,
+    borderColor: theme.borderColor
+  });
+  drawScrollbars(
+    ctx,
+    snapshot.scrollbarLayout,
+    descriptors,
+    theme.borderColor,
+    scrollbarOpacity,
+    isScrollbarInteractive,
+    {
+      x: width,
+      width: options.scrollbar?.visible === false ? 0 : Math.max(
+        options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
+        6
+      ),
+      top: 0,
+      height,
+      headerBottom: headerHeight,
+      headerBackgroundColor: theme.headerBackgroundColor,
+      bodyBackgroundColor: theme.backgroundColor
+    }
+  );
   drawActiveCellOverlay({
     ctx,
     layout: resolveActiveCellOverlayLayout({
@@ -24770,6 +24900,7 @@ function executeListTableRenderPipeline(params) {
       bottomFrozenHeight,
       fixedWidthLeft: snapshot.columnMetrics.fixedWidthLeft,
       fixedWidthRight: snapshot.columnMetrics.fixedWidthRight,
+      rightStartX: snapshot.columnMetrics.rightStartX,
       availableCenterWidth: snapshot.columnMetrics.availableCenterWidth,
       rangeHighlight,
       highlightMode: options.highlightMode,
@@ -24783,26 +24914,6 @@ function executeListTableRenderPipeline(params) {
       indicatorY: rowDragIndicator.y
     });
   }
-  drawScrollbars(
-    ctx,
-    snapshot.scrollbarLayout,
-    descriptors,
-    theme.borderColor,
-    scrollbarOpacity,
-    isScrollbarInteractive,
-    {
-      x: width,
-      width: options.scrollbar?.visible === false ? 0 : Math.max(
-        options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
-        6
-      ),
-      top: 0,
-      height,
-      headerBottom: headerHeight,
-      headerBackgroundColor: theme.headerBackgroundColor,
-      bodyBackgroundColor: theme.backgroundColor
-    }
-  );
   if (headerDraggingIndicator) {
     drawDragOverlayFrame({
       ctx,
@@ -27101,6 +27212,11 @@ function collectGroupingColumnItems(columns) {
   });
 }
 
+// src/engine/column-config-update-policy.ts
+function shouldPersistIncomingColumnConfig(previousRevision, nextRevision) {
+  return nextRevision !== void 0 && nextRevision !== previousRevision;
+}
+
 // src/engine/list-table-engine.ts
 var ListTableCore = class {
   /**
@@ -27192,6 +27308,10 @@ var ListTableCore = class {
   updateOptions(options) {
     this.animationController.stopCarouselScroll();
     const host = this.asAssemblyHost();
+    const shouldPersistColumnConfig = shouldPersistIncomingColumnConfig(
+      this.options.columnConfigRevision,
+      options.columnConfigRevision
+    );
     const incomingColumnsAreRuntimeColumns = options.columns === this.options.columns;
     const nextInitialColumns = incomingColumnsAreRuntimeColumns ? cloneColumns(host.initialColumns) : cloneColumns(options.columns);
     const nextInitialStretchColumns = incomingColumnsAreRuntimeColumns ? host.initialStretchColumns : options.stretchColumns;
@@ -27235,7 +27355,11 @@ var ListTableCore = class {
     this.hideFloatingOverlays({ includeLoading: true });
     this.refreshRuntimeColumns();
     this.renderController.render();
-    this.persistenceController.loadStoredConfig({ restoreQueryState: false });
+    if (shouldPersistColumnConfig) {
+      this.persistenceController.persistColumnConfig();
+    } else {
+      this.persistenceController.loadStoredConfig({ restoreQueryState: false });
+    }
     host.tableId = options.tableId?.trim() ? options.tableId : host.tableId;
     host.rowDragController.syncRegistration();
   }
@@ -27284,7 +27408,7 @@ var ListTableCore = class {
    */
   changeDensity(density) {
     this.headerActionController.changeTableDensity(
-      density === "auto" ? "auto" : density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
+      density === "auto" ? "auto" : density === 26 ? "ultra-compact" : density === 32 ? "compact" : density === 56 ? "comfortable" : "middle"
     );
   }
   /**