@atlaskit/editor-plugin-table 23.3.12 → 23.4.0

package/dist/es2019/nodeviews/toDOM.js

@@ -9,6 +9,7 @@ import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/tabl
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
 import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
+import { TableCssClassName as ClassName } from '../types';
 import { getAlignmentStyle } from './table-container-styles';
 export const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
@@ -50,6 +51,17 @@ export const tableNodeSpecWithFixedToDOM = config => {
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
       }
+      const roundedTableCornerMasks = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        class: ClassName.TABLE_CORNER_MASK,
+        'data-corner': 'left'
+      }], ['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        class: ClassName.TABLE_CORNER_MASK,
+        'data-corner': 'right'
+      }]] : [];
       const tableContainerDiv = ['div', {
         class: 'pm-table-container',
         'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -62,7 +74,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
         class: 'pm-table-wrapper'
-      }, ['table', attrs, colgroup, ['tbody', 0]]], ['div', {
+      }, ...roundedTableCornerMasks, ['table', attrs, colgroup, ['tbody', 0]]], ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }], ...(isSSRStreaming() ? [['div', {

package/dist/es2019/pm-plugins/commands/selection.js

@@ -4,7 +4,6 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getClosestSelectionRect } from '../../ui/toolbar';
 import { getPluginState } from '../plugin-factory';
 import { selectColumn, selectRow } from './misc';
@@ -429,7 +428,7 @@ export const modASelectTable = editorSelectionAPI => () => (state, dispatch) =>
   const isCellSelection = selection instanceof CellSelection;
 
   // if no cells are selected
-  if (!isCellSelection && expValEquals('platform_editor_lovability_select_all_shortcut', 'isEnabled', true)) {
+  if (!isCellSelection) {
     return selectTableCell(state, dispatch);
   }
   // else if any number of cells are selected but not the full table

package/dist/es2019/pm-plugins/table-resizing/utils/dom.js

@@ -1,5 +1,6 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
 import { colWidthsForRow } from '../../utils/column-controls';
@@ -96,5 +97,34 @@ const applyTableWidthToStickyRow = (tableRef, headerRow) => {
     const newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
     headerRow.style.width = `${newWidth}px`;
     headerRow.scrollLeft = wrapper.scrollLeft;
+    if (expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true)) {
+      syncCornerMasksToStickyRow(tableRef, headerRow, wrapper);
+    }
+  }
+};
+export const clearStickyCornerMaskPositions = tableRef => {
+  const wrapper = tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement;
+  if (!wrapper) {
+    return;
+  }
+  wrapper.querySelectorAll(`.${ClassName.TABLE_CORNER_MASK}`).forEach(mask => {
+    mask.style.removeProperty('left');
+  });
+};
+const syncCornerMasksToStickyRow = (tableRef, headerRow, wrapper) => {
+  const cornerMasks = wrapper.querySelectorAll(`.${ClassName.TABLE_CORNER_MASK}`);
+  if (!cornerMasks.length) {
+    return;
+  }
+  const isLegacySticky = tableRef.classList.contains(ClassName.TABLE_STICKY) && headerRow.classList.contains('sticky');
+  if (!isLegacySticky) {
+    clearStickyCornerMaskPositions(tableRef);
+    return;
   }
+  const stickyRowRect = headerRow.getBoundingClientRect();
+  cornerMasks.forEach(mask => {
+    const corner = mask.dataset.corner;
+    const left = corner === 'right' ? stickyRowRect.right - 11 : stickyRowRect.left - 1;
+    mask.style.left = `${left}px`;
+  });
 };

package/dist/es2019/tablePlugin.js

@@ -486,7 +486,7 @@ const tablePlugin = ({
         name: 'editorContentAreaHeightPlugin',
         plugin: () => expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_1') ? createContentAreaHeightPlugin() : undefined
       }];
-      if (!expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && fg('platform_editor_table_sticky_header_patch_2')) {
+      if (!expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
         plugins.push({
           name: 'tableAnchorNames',
           plugin: () => createTableAnchorNamesPlugin()

package/dist/es2019/types/index.js

@@ -142,6 +142,7 @@ export const TableCssClassName = {
   NODEVIEW_WRAPPER: 'tableView-content-wrap',
   TABLE_SELECTED: `${tablePrefixSelector}-table__selected`,
   TABLE_CELL: tableCellSelector,
+  TABLE_CORNER_MASK: `${tablePrefixSelector}-corner-mask`,
   TABLE_HEADER_CELL: tableHeaderSelector,
   TABLE_STICKY: `${tablePrefixSelector}-sticky`,
   TABLE_CHROMELESS: `${tablePrefixSelector}-chromeless`,

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -53,13 +53,21 @@ export default class NumberColumn extends Component {
       updateCellHoverLocation
     } = this.props;
     const rowHeights = getRowHeights(tableRef);
+    const getMarginTop = () => {
+      if (!hasHeaderRow || this.props.stickyTop === undefined) {
+        return undefined;
+      }
+
+      // with platform_editor_table_q4_loveability enabled, table controls have margin-top of 1px applied. Offset this here.
+      return rowHeights[0] + 1;
+    };
     if (isSSR()) {
       return /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.NUMBERED_COLUMN,
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+          marginTop: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? getMarginTop() : hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
           borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ?
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           `1px solid ${tableBorderColor}` : undefined,
@@ -74,7 +82,7 @@ export default class NumberColumn extends Component {
       className: ClassName.NUMBERED_COLUMN,
       style: {
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
+        marginTop: expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? getMarginTop() : hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
         borderLeft: isDragAndDropEnabled && tableActive && !expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         `1px solid ${tableBorderColor}` : undefined,

package/dist/es2019/ui/common-styles.js

@@ -18,6 +18,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
 import { TableCssClassName as ClassName } from '../types';
 import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, columnControlsDecorationHeight, dragRowControlsWidth, nativeStickyHeaderZIndex, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, stickyRowZIndex, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableColumnControlsHeight, tableControlsSpacing, tableHeaderCellBackgroundColor, tableHeaderCellSelectedColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { roundedTableOverrides } from './rounded-table-styles';
 import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragCornerControlButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
@@ -219,443 +220,6 @@ const tableStickyHeaderFirefoxFixStyle = () => {
 		`;
   }
 };
-const roundedTableCellCornerStyles = () => css`
-	.${ClassName.TABLE_NODE_WRAPPER} > table {
-		/* Round table corner cells (including merged cells that span to the edge)
-		   and their interaction overlays. The data-reaches-* attributes are set by the
-		   TableCell node view based on each cell's position + rowspan/colspan. */
-		> tbody > tr > td[data-reaches-top][data-reaches-left],
-		> tbody > tr > th[data-reaches-top][data-reaches-left] {
-			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-
-			&::after,
-			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-				border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-			}
-		}
-
-		> tbody > tr > td[data-reaches-top][data-reaches-right],
-		> tbody > tr > th[data-reaches-top][data-reaches-right] {
-			border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
-
-			&::after,
-			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-				border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
-			}
-		}
-
-		> tbody > tr > td[data-reaches-bottom][data-reaches-left],
-		> tbody > tr > th[data-reaches-bottom][data-reaches-left] {
-			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
-
-			&::after,
-			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-				border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
-			}
-		}
-
-		> tbody > tr > td[data-reaches-bottom][data-reaches-right],
-		> tbody > tr > th[data-reaches-bottom][data-reaches-right] {
-			border-bottom-right-radius: ${"var(--ds-radius-medium, 6px)"};
-
-			&::after,
-			&.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-				&.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-				border-bottom-right-radius: ${"var(--ds-radius-medium, 6px)"};
-			}
-		}
-	}
-`;
-const roundedTableInteractionOverlayStyles = () => css`
-	.${ClassName.TABLE_NODE_WRAPPER} > table {
-		/* Active-cell highlight base properties (replaces activeCellHighlightStyles).
-		   width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%,
-		   so that left/right/top/bottom determine the size instead. */
-		td.${ClassName.TABLE_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after,
-			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.ACTIVE_CURSOR_CELL}::after {
-			border: 1px solid ${"var(--ds-border-selected, #1868DB)"};
-			box-shadow: ${"var(--ds-shadow-raised, 0px 1px 1px #1E1F2140, 0px 0px 1px #1E1F214f)"};
-			content: '';
-			position: absolute;
-			top: -1px;
-			left: -1px;
-			right: -1px;
-			bottom: -1px;
-			width: auto;
-			height: auto;
-			z-index: ${akEditorSmallZIndex};
-			pointer-events: none;
-		}
-
-		/* Normalize selected/hover/danger overlays to the same box model as active-cell.
-		   width/height: auto overrides the base cell ::after which uses width: 100%; height: 100%. */
-		td.${ClassName.HOVERED_CELL}::after,
-			td.${ClassName.SELECTED_CELL}::after,
-			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL}::after,
-			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL}::after,
-			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-			td.${ClassName.TABLE_CELL}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-			left: -1px;
-			right: -1px;
-			top: -1px;
-			bottom: -1px;
-			width: auto;
-			height: auto;
-		}
-
-		/* Active-cell overlays: clamp outer sides using data-reaches-* attributes.
-		   Internal sides keep -1px overlap; true outer edges are clamped to 0. */
-		> tbody
-			> tr
-			> td[data-reaches-top].${ClassName.ACTIVE_CURSOR_CELL}::after,
-			> tbody
-			> tr
-			> th[data-reaches-top].${ClassName.ACTIVE_CURSOR_CELL}::after {
-			top: 0;
-		}
-
-		> tbody
-			> tr
-			> td[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL}::after,
-			> tbody
-			> tr
-			> th[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL}::after {
-			left: 0;
-		}
-
-		> tbody
-			> tr
-			> td[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL}::after,
-			> tbody
-			> tr
-			> th[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL}::after {
-			right: 0;
-		}
-
-		> tbody
-			> tr
-			> td[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL}::after,
-			> tbody
-			> tr
-			> th[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL}::after {
-			bottom: 0;
-		}
-
-		/* Selected/hover/active overlays: clamp outer left side and draw overlay border. */
-		> tbody
-			> tr
-			> td[data-reaches-left].${ClassName.SELECTED_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-left].${ClassName.SELECTED_CELL},
-			> tbody
-			> tr
-			> td[data-reaches-left].${ClassName.HOVERED_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-left].${ClassName.HOVERED_CELL},
-			> tbody
-			> tr
-			> td[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-left].${ClassName.ACTIVE_CURSOR_CELL} {
-			border-left-color: transparent;
-
-			&::after {
-				left: 0;
-				border-left-color: ${tableBorderSelectedColor};
-			}
-		}
-
-		/* Danger/delete overlays: clamp outer left side. */
-		> tbody
-			> tr
-			> td[data-reaches-left].${ClassName.HOVERED_CELL_IN_DANGER},
-			> tbody
-			> tr
-			> th[data-reaches-left].${ClassName.HOVERED_CELL_IN_DANGER} {
-			border-left-color: transparent;
-
-			&::after {
-				left: 0;
-				border-left-color: ${tableBorderDeleteColor};
-			}
-		}
-
-		/* Selected/hover/active overlays: clamp outer right side. */
-		> tbody
-			> tr
-			> td[data-reaches-right].${ClassName.SELECTED_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-right].${ClassName.SELECTED_CELL},
-			> tbody
-			> tr
-			> td[data-reaches-right].${ClassName.HOVERED_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-right].${ClassName.HOVERED_CELL},
-			> tbody
-			> tr
-			> td[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-right].${ClassName.ACTIVE_CURSOR_CELL} {
-			border-right-color: transparent;
-
-			&::after {
-				right: 0;
-				border-right-color: ${tableBorderSelectedColor};
-			}
-		}
-
-		/* Danger/delete overlays: clamp outer right side. */
-		> tbody
-			> tr
-			> td[data-reaches-right].${ClassName.HOVERED_CELL_IN_DANGER},
-			> tbody
-			> tr
-			> th[data-reaches-right].${ClassName.HOVERED_CELL_IN_DANGER} {
-			border-right-color: transparent;
-
-			&::after {
-				right: 0;
-				border-right-color: ${tableBorderDeleteColor};
-			}
-		}
-
-		/* Selected/hover/active overlays: clamp outer bottom side. */
-		> tbody
-			> tr
-			> td[data-reaches-bottom].${ClassName.SELECTED_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-bottom].${ClassName.SELECTED_CELL},
-			> tbody
-			> tr
-			> td[data-reaches-bottom].${ClassName.HOVERED_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-bottom].${ClassName.HOVERED_CELL},
-			> tbody
-			> tr
-			> td[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL},
-			> tbody
-			> tr
-			> th[data-reaches-bottom].${ClassName.ACTIVE_CURSOR_CELL} {
-			border-bottom-color: transparent;
-
-			&::after {
-				border-bottom-color: ${tableBorderSelectedColor};
-			}
-		}
-
-		/* Danger/delete overlays: clamp outer bottom side. */
-		> tbody
-			> tr
-			> td[data-reaches-bottom].${ClassName.HOVERED_CELL_IN_DANGER},
-			> tbody
-			> tr
-			> th[data-reaches-bottom].${ClassName.HOVERED_CELL_IN_DANGER} {
-			border-bottom-color: transparent;
-
-			&::after {
-				border-bottom-color: ${tableBorderDeleteColor};
-			}
-		}
-	}
-`;
-const roundedTableNumberedColumnStyles = () => css`
-	/* Numbered columns are separate, so they need their own rounded edge owner. */
-	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
-		/* Override the inline/container left border and replace it with one rounded pseudo-border. */
-		> .${ClassName.ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN},
-			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN} {
-			position: relative;
-			border-left: 0;
-
-			&::before {
-				content: '';
-				position: absolute;
-				top: 0;
-				left: 0;
-				bottom: 0;
-				width: 100%;
-				border-left: 1px solid ${tableBorderColor};
-				border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-				border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
-				pointer-events: none;
-				z-index: ${akEditorUnitZIndex};
-			}
-		}
-
-		/* Prevent individual number buttons from drawing a straight left border. */
-		> .${ClassName.ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON},
-			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON} {
-			border-left-color: transparent;
-		}
-
-		> .${ClassName.ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER},
-			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER},
-			> .${ClassName.ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE},
-			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE},
-			> .${ClassName.ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.active,
-			> .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-			border-left-color: transparent;
-		}
-
-		/* When numbered column is present, the visual left edge belongs to the number column widget.
-		   Zero out any left-side border-radius on the cell and its overlays/pseudo-borders —
-		   but leave right-side radii untouched so right-edge cells still round correctly. */
-		.${ClassName.TABLE_NODE_WRAPPER} > table > tbody > tr > th[data-reaches-top][data-reaches-left],
-		.${ClassName.TABLE_NODE_WRAPPER}
-			> table
-			> tbody
-			> tr
-			> td[data-reaches-top][data-reaches-left] {
-			border-top-left-radius: 0;
-
-			&::after,
-			&::before {
-				border-top-left-radius: 0;
-			}
-		}
-
-		.${ClassName.TABLE_NODE_WRAPPER}
-			> table
-			> tbody
-			> tr
-			> th[data-reaches-bottom][data-reaches-left],
-		.${ClassName.TABLE_NODE_WRAPPER}
-			> table
-			> tbody
-			> tr
-			> td[data-reaches-bottom][data-reaches-left] {
-			border-bottom-left-radius: 0;
-
-			&::after,
-			&::before {
-				border-bottom-left-radius: 0;
-			}
-		}
-
-		/* Preserve rounded numbered-column corners across normal, active, and danger states. */
-		.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-
-		.${ClassName.NUMBERED_COLUMN_BUTTON}:last-of-type {
-			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-
-		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type,
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE}:first-of-type,
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.active:first-of-type {
-			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-
-		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:last-of-type,
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_ACTIVE}:last-of-type,
-			.${ClassName.NUMBERED_COLUMN_BUTTON}.active:last-of-type {
-			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-
-		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:first-of-type::after {
-			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-
-		.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER}:last-of-type::after {
-			border-bottom-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-
-		/* Sticky numbered-column mask also needs the same top-left radius. */
-		.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW}
-			tr
-			th[data-reaches-top][data-reaches-left]::before {
-			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		}
-	}
-`;
-const roundedTableStickyHeaderStyles = () => css`
-	/* Sticky header rows have independent border/shadow/mask painting, so patch the sticky-only painters too. */
-	.${ClassName.TABLE_NODE_WRAPPER}
-		> table
-		> tbody
-		> tr.${ClassName.NATIVE_STICKY},
-		.${ClassName.TABLE_NODE_WRAPPER}
-		> table.${ClassName.TABLE_STICKY}
-		> tbody
-		> tr.sticky {
-		> th[data-reaches-left],
-		> td[data-reaches-left] {
-			border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-
-			&::after,
-			&::before {
-				border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-			}
-		}
-
-		> td[data-reaches-right],
-		> th[data-reaches-right] {
-			border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
-
-			&::after,
-			&::before {
-				border-top-right-radius: ${"var(--ds-radius-medium, 6px)"};
-			}
-		}
-	}
-
-	.${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-		border-left-color: transparent;
-	}
-
-	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr th[data-reaches-top][data-reaches-left]::before,
-	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr.${ClassName.NATIVE_STICKY} th[data-reaches-left]::before,
-	.${ClassName.TABLE_CONTAINER}[data-number-column='true'] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} .${ClassName.NATIVE_STICKY_ACTIVE} th[data-reaches-left]::before {
-		border-top-left-radius: ${"var(--ds-radius-medium, 6px)"};
-		clip-path: inset(0 0 0 0 round ${"var(--ds-radius-medium, 6px)"} 0 0 0);
-		box-shadow: none !important;
-	}
-
-	.${ClassName.TABLE_NODE_WRAPPER}
-		> table
-		> tbody
-		> tr.${ClassName.NATIVE_STICKY},
-		.${ClassName.TABLE_NODE_WRAPPER}
-		> table.${ClassName.TABLE_STICKY}
-		> tbody
-		> tr.sticky {
-		box-shadow: none !important;
-	}
-
-	.${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}:has(tr.sticky)
-		.${ClassName.NUMBERED_COLUMN}
-		.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-		box-shadow: none !important;
-	}
-`;
-const roundedTableOverrides = () => css`
-	${roundedTableCellCornerStyles()}
-	${roundedTableInteractionOverlayStyles()}
-	${roundedTableNumberedColumnStyles()}
-	${roundedTableStickyHeaderStyles()}
-`;
 const baseTableStylesWithoutSharedStyle = props => css`
 	${columnControlsLineMarker()};
 	${hoveredDeleteButton()};
@@ -916,23 +480,14 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		height: 0;
 		margin-bottom: -${tableMarginTop}px;
 		position: sticky;
-		border-top: ${tableMarginTop}px solid
-			${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
+		border-top: ${tableMarginTop}px solid transparent;
 		z-index: ${stickyRowZIndex};
 	}
 
-	/** When cleaning up, merge this with the mask style above */
-	${fg('platform_editor_table_sticky_header_patch_2') ? `
-		.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY})::before {
-			border-top: ${tableMarginTop}px solid transparent;
-		}
-
-		.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY_ACTIVE})::before {
-			border-top: ${tableMarginTop}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
-		}` : fg('platform_editor_table_sticky_header_patch_1') ? `
-			.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY})::before {
-				margin-top: 1px;
-			}` : ``}
+	.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY_ACTIVE})::before {
+		border-top: ${tableMarginTop}px solid
+			${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
+	}
 
 	/** Corrects position of drag row controls when sticky header top mask is present */
 	.${ClassName.TABLE_CONTAINER}:has(.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW})
@@ -1631,6 +1186,9 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		position-area: top center;
 		position-visibility: anchors-visible;
 		z-index: ${nativeStickyHeaderZIndex + 1};
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `
+		/* Leave a 1px gap so the sticky header row's top border stays visible. */
+		translate: 0 -1px;` : ``}
 	}` : `.${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} > .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
 		/* +2px is to overlap the table border on the sides */
 		width: calc(anchor-size(width) + 2px);
@@ -1640,6 +1198,9 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		position-area: top center;
 		position-visibility: anchors-visible;
 		z-index: ${nativeStickyHeaderZIndex + 1};
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `
+		/* Leave a 1px gap so the sticky header row's top border stays visible. */
+		margin-bottom: 1px;` : ``}
 	}`}
 
 	/** Mask for content to the left of the column controls */
@@ -1662,16 +1223,17 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		display: inline-block;
 		box-sizing: border-box;
 		left: 0;
-		width: ${akEditorTableNumberColumnWidth - 1}px;
-		height: 100%;
-		margin-left: -${akEditorTableNumberColumnWidth}px;
-		margin-top: -${stickyRowOffsetTop}px;
-		outline: ${expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? `0.5px solid ${tableBorderColor}` : `1px solid ${tableBorderColor}`};
-		border-left: ${expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : `1px solid ${tableBorderColor}`};
+		width: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `${akEditorTableNumberColumnWidth}px` : `${akEditorTableNumberColumnWidth - 1}px`};
+		height: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%'};
+		margin-left: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `-${akEditorTableNumberColumnWidth + 1}px` : `-${akEditorTableNumberColumnWidth}px`};
+		margin-top: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `-${stickyRowOffsetTop + 1}px` : `-${stickyRowOffsetTop}px`};
+		outline: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? `0.5px solid ${tableBorderColor}` : `1px solid ${tableBorderColor}`};
+		border-left: ${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `1px solid ${tableBorderColor}` : expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? 'none' : `1px solid ${tableBorderColor}`};
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `border-bottom: 1px solid ${tableBorderColor};` : ``}
 		background: ${"var(--ds-background-accent-gray-subtlest, #F0F1F2)"};
 		${fg('platform_editor_table_sticky_header_patch_1') ? `border-top: 1px solid ${tableBorderColor};` : ``}
 
-		${getBrowserInfo().gecko && expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? `border-top: 1px solid ${tableBorderColor};` : `border-top: none;`}
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) || getBrowserInfo().gecko && expValEquals('platform_editor_table_sticky_header_patch_9', 'isEnabled', true) ? `border-top: 1px solid ${tableBorderColor};` : `border-top: none;`}
 	}
 
 	${fg('platform_editor_table_sticky_header_patch_7') ? `.ak-editor-selected-node .${ClassName.TABLE_CONTAINER}[data-number-column="true"]:not(.${ClassName.TABLE_SELECTED}) .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th:first-of-type {
@@ -1688,6 +1250,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 	.${ClassName.TABLE_CONTAINER}[data-number-column="true"].${ClassName.TABLE_SELECTED} .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.HOVERED_CELL_IN_DANGER}):first-of-type::before, .${ClassName.TABLE_CONTAINER}[data-number-column="true"] .${ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW} tr:first-of-type th.${ClassName.SELECTED_CELL}:not(.${ClassName.HOVERED_CELL_IN_DANGER}, .${ClassName.COLUMN_SELECTED}):first-of-type::before {
 		outline: none;
 		border-left-color: ${tableBorderSelectedColor};
+		${expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? `border-bottom-color: ${tableBorderSelectedColor}` : ''};
 		${fg('platform_editor_table_sticky_header_patch_1') ? `border-top-color: ${tableBorderSelectedColor};` : ``}
 		background: ${tableHeaderCellSelectedColor};
 	}