@perspective-dev/viewer-datagrid 4.4.0 → 4.4.1

package/dist/esm/plugin/activate.d.ts

@@ -1,5 +1,5 @@
 import type { View } from "@perspective-dev/client";
-import type { DatagridPluginElement } from "../types.js";
+import { type DatagridPluginElement } from "../types.js";
 /**
  * Lazy initialize this plugin with various listeners.
  */

package/dist/esm/plugin/column_style_controls.d.ts

@@ -1,4 +1,4 @@
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 import type { DatagridPluginElement } from "../types.js";
 interface NumberStyleOpts {
     datagrid_number_style: {

package/dist/esm/style_handlers/body.d.ts

@@ -1,7 +1,7 @@
 import { RegularTableElement } from "regular-table";
-import { type DatagridModel, type PerspectiveViewerElement, type ColumnsConfig } from "../types.js";
-import { CollectedCell, LocalSelectedPositionMap, LocalSelectedRowsMap } from "./types.js";
+import { type DatagridModel, type ColumnsConfig } from "../types.js";
+import { CollectedCell } from "./types.js";
 /**
  * Apply styles to all body cells in a single pass.
  */
-export declare function applyBodyCellStyles(this: DatagridModel, cells: CollectedCell[], plugins: ColumnsConfig, isSettingsOpen: boolean, isSelectable: boolean, isEditable: boolean, regularTable: RegularTableElement, selectedRowsMap: LocalSelectedRowsMap, selectedPositionMap: LocalSelectedPositionMap, viewer: PerspectiveViewerElement): void;
+export declare function applyBodyCellStyles(model: DatagridModel, cells: CollectedCell[], plugins: ColumnsConfig, isSettingsOpen: boolean, isSelectable: boolean, isEditable: boolean, regularTable: RegularTableElement): void;

package/dist/esm/style_handlers/column_header.d.ts

@@ -1,13 +1,14 @@
 import { RegularTableElement } from "regular-table";
-import { type DatagridModel, type PerspectiveViewerElement } from "../types.js";
+import { type DatagridModel } from "../types.js";
 import { CollectedHeaderRow } from "./types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 /**
  * Apply selected column styling in response to column settings toggle events.
  * This is called directly (not as a style listener) when the user opens/closes
  * the column settings panel.
  */
-export declare function style_selected_column(this: DatagridModel, regularTable: RegularTableElement, viewer: PerspectiveViewerElement, selectedColumn: string | undefined): void;
+export declare function style_selected_column(model: DatagridModel, regularTable: RegularTableElement, viewer: HTMLPerspectiveViewerElement, selectedColumn: string | undefined): void;
 /**
  * Style a single column header row.
  */
-export declare function styleColumnHeaderRow(this: DatagridModel, headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;
+export declare function styleColumnHeaderRow(model: DatagridModel, headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;

package/dist/esm/style_handlers/consolidated.d.ts

@@ -1,54 +1,10 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement, ColumnsConfig, DatagridPluginElement, SelectedPosition } from "../types.js";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
-interface CollectedCell {
-    element: HTMLElement;
-    metadata: CellMetadata;
-    isHeader: boolean;
-}
-interface CollectedHeaderRow {
-    row: HTMLTableRowElement;
-    cells: Array<{
-        element: HTMLTableCellElement;
-        metadata: CellMetadata | undefined;
-    }>;
-}
-/**
- * Context object passed through consolidated styling
- */
-export interface StyleContext {
-    model: DatagridModel;
-    regularTable: RegularTableElement;
-    viewer: PerspectiveViewerElement;
-    datagrid: DatagridPluginElement;
-    plugins: ColumnsConfig;
-    isSettingsOpen: boolean;
-    isSelectable: boolean;
-    isEditable: boolean;
-    selectedRowsMap: Map<RegularTableElement, unknown[]>;
-    selectedPositionMap: Map<RegularTableElement, SelectedPosition>;
-}
-type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
-type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;
+import type { DatagridModel, DatagridPluginElement, SelectedPositionMap } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 /**
  * Consolidated style listener that handles all cell styling in a single pass.
  * This eliminates redundant DOM traversals and reduces layout thrashing by:
  * 1. Collecting all cell metadata in a read phase
  * 2. Applying all styles in a write phase
  */
-export declare function createConsolidatedStyleListener(datagrid: DatagridPluginElement, selectedRowsMap: LocalSelectedRowsMap, selectedPositionMap: LocalSelectedPositionMap): (this: DatagridModel, regularTable: RegularTableElement, viewer: PerspectiveViewerElement) => void;
-declare module "../types.js" {
-    interface DatagridModel {
-        _applyBodyCellStyles(cells: CollectedCell[], plugins: ColumnsConfig, isSettingsOpen: boolean, isSelectable: boolean, isEditable: boolean, regularTable: RegularTableElement, selectedRowsMap: LocalSelectedRowsMap, selectedPositionMap: LocalSelectedPositionMap, viewer: PerspectiveViewerElement): void;
-        _applyGroupHeaderStyles(headerRows: CollectedHeaderRow[], regularTable: RegularTableElement): void;
-        _applyColumnHeaderStyles(headerRows: CollectedHeaderRow[], regularTable: RegularTableElement, viewer: PerspectiveViewerElement): void;
-        _applyFocusStyle(cells: CollectedCell[], regularTable: RegularTableElement, selectedPositionMap: LocalSelectedPositionMap): void;
-        _styleColumnHeaderRow(headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;
-    }
-}
-/**
- * Install the styling methods on the DatagridModel prototype.
- * This should be called once during module initialization.
- */
-export declare function installConsolidatedStyleMethods(modelPrototype: any): void;
-export {};
+export declare function createConsolidatedStyleListener(datagrid: DatagridPluginElement, model: DatagridModel, regularTable: RegularTableElement, viewer: HTMLPerspectiveViewerElement, selectedPositionMap: SelectedPositionMap): () => void;

package/dist/esm/style_handlers/editable.d.ts

@@ -1,7 +1,8 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement } from "../types.js";
+import type { DatagridModel } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 import { CollectedHeaderRow } from "./types.js";
 /**
  * Apply styles to column header rows.
  */
-export declare function applyColumnHeaderStyles(this: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement, viewer: PerspectiveViewerElement): void;
+export declare function applyColumnHeaderStyles(model: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement, viewer: HTMLPerspectiveViewerElement): void;

package/dist/esm/style_handlers/focus.d.ts

@@ -1,11 +1,11 @@
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, SelectedPosition } from "../types.js";
-import { CollectedCell, LocalSelectedPositionMap } from "./types.js";
+import type { DatagridModel, SelectedPositionMap } from "../types.js";
+import { CollectedCell } from "./types.js";
 /**
  * Apply focus style to the selected cell.
  * Optimized to use collected cells instead of querySelectorAll.
  */
-export declare function applyFocusStyle(this: DatagridModel, cells: CollectedCell[], regularTable: RegularTableElement, selectedPositionMap: LocalSelectedPositionMap): void;
+export declare function applyFocusStyle(_model: DatagridModel, cells: CollectedCell[], regularTable: RegularTableElement, selectedPositionMap: SelectedPositionMap): void;
 /**
  * Standalone function to focus the selected cell.
  * This collects cells from the table and tries to focus the selected position.
@@ -13,4 +13,4 @@ export declare function applyFocusStyle(this: DatagridModel, cells: CollectedCel
  *
  * Used by edit_keydown.ts for keyboard navigation.
  */
-export declare function focusSelectedCell(regularTable: RegularTableElement, selectedPositionMap: Map<RegularTableElement, SelectedPosition>): boolean;
+export declare function focusSelectedCell(regularTable: RegularTableElement, selectedPositionMap: SelectedPositionMap): boolean;

package/dist/esm/style_handlers/group_header.d.ts

@@ -4,4 +4,4 @@ import { CollectedHeaderRow } from "./types.js";
 /**
  * Apply styles to group header rows.
  */
-export declare function applyGroupHeaderStyles(this: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement): void;
+export declare function applyGroupHeaderStyles(model: DatagridModel, headerRows: CollectedHeaderRow[], regularTable: RegularTableElement): void;

package/dist/esm/style_handlers/table_cell/boolean.d.ts

@@ -1,3 +1,3 @@
 import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColumnConfig } from "../../types.js";
-export declare function cell_style_boolean(this: DatagridModel, _plugin: ColumnConfig | undefined, td: HTMLElement, metadata: CellMetadata): void;
+export declare function cell_style_boolean(model: DatagridModel, _plugin: ColumnConfig | undefined, td: HTMLElement, metadata: CellMetadata): void;

package/dist/esm/style_handlers/table_cell/cell_flash.d.ts

@@ -1,3 +1,3 @@
 import { CellMetadataBody } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColorRecord } from "../../types.js";
-export declare function style_cell_flash(this: DatagridModel, metadata: CellMetadataBody, td: HTMLElement, [, , , , , pos_s, pos_e]: ColorRecord, [, , , , , neg_s, neg_e]: ColorRecord, is_settings_open: boolean): void;
+export declare function style_cell_flash(model: DatagridModel, metadata: CellMetadataBody, td: HTMLElement, [, , , , , pos_s, pos_e]: ColorRecord, [, , , , , neg_s, neg_e]: ColorRecord, is_settings_open: boolean): void;

package/dist/esm/style_handlers/table_cell/datetime.d.ts

@@ -3,5 +3,5 @@ import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 interface PluginWithColor extends Omit<ColumnConfig, "color"> {
     color?: ColorRecord;
 }
-export declare function cell_style_datetime(this: DatagridModel, plugin: PluginWithColor, td: HTMLElement, metadata: CellMetadata): void;
+export declare function cell_style_datetime(model: DatagridModel, plugin: PluginWithColor, td: HTMLElement, metadata: CellMetadata): void;
 export {};

package/dist/esm/style_handlers/table_cell/numeric.d.ts

@@ -11,5 +11,5 @@ interface PluginWithColors extends Omit<ColumnConfig, "pos_fg_color" | "neg_fg_c
     pos_fg_color?: ColorRecord;
     neg_fg_color?: ColorRecord;
 }
-export declare function cell_style_numeric(this: DatagridModel, plugin: PluginWithColors | undefined, td: HTMLElement, metadata: CellMetaWithExtras, is_settings_open: boolean): void;
+export declare function cell_style_numeric(model: DatagridModel, plugin: PluginWithColors | undefined, td: HTMLElement, metadata: CellMetaWithExtras, is_settings_open: boolean): void;
 export {};

package/dist/esm/style_handlers/table_cell/row_header.d.ts

@@ -1,4 +1,4 @@
 import { CellMetadataRowHeader } from "regular-table/dist/esm/types.js";
 import type { DatagridModel } from "../../types.js";
 import { RegularTableElement } from "regular-table";
-export declare function cell_style_row_header(this: DatagridModel, regularTable: RegularTableElement, td: HTMLElement, metadata: CellMetadataRowHeader): void;
+export declare function cell_style_row_header(model: DatagridModel, regularTable: RegularTableElement, td: HTMLElement, metadata: CellMetadataRowHeader): void;

package/dist/esm/style_handlers/table_cell/string.d.ts

@@ -7,5 +7,5 @@ interface CellMetaWithExtras {
 interface PluginWithColor extends Omit<ColumnConfig, "color"> {
     color?: ColorRecord;
 }
-export declare function cell_style_string(this: DatagridModel, plugin: PluginWithColor | undefined, td: HTMLElement, metadata: CellMetaWithExtras): void;
+export declare function cell_style_string(model: DatagridModel, plugin: PluginWithColor | undefined, td: HTMLElement, metadata: CellMetaWithExtras): void;
 export {};

package/dist/esm/style_handlers/types.d.ts

@@ -1,6 +1,4 @@
-import { RegularTableElement } from "regular-table";
 import { CellMetadata, CellMetadataBody, CellMetadataRowHeader } from "regular-table/dist/esm/types.js";
-import type { SelectedPosition } from "../types.js";
 export interface CollectedCell {
     element: HTMLElement;
     metadata: CellMetadataRowHeader | CellMetadataBody;
@@ -13,5 +11,3 @@ export interface CollectedHeaderRow {
         metadata: CellMetadata | undefined;
     }>;
 }
-export type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
-export type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;

package/dist/esm/types.d.ts

@@ -1,9 +1,10 @@
 import type { View, Table, ViewConfig, ColumnType, SortDir, ViewWindow, ViewConfigUpdate } from "@perspective-dev/client";
-import { RegularTableElement } from "regular-table";
-import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
+import type { HTMLPerspectiveViewerElement, ViewerConfig } from "@perspective-dev/viewer";
+import type { RegularTableElement } from "regular-table";
+import type { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
 export type { RegularTableElement as RegularTable };
 export declare function get_psp_type(model: DatagridModel, metadata: CellMetadata): ColumnType;
-export type EditMode = "READ_ONLY" | "EDIT" | "SELECT_COLUMN" | "SELECT_ROW" | "SELECT_REGION";
+export type EditMode = "READ_ONLY" | "EDIT" | "SELECT_COLUMN" | "SELECT_ROW" | "SELECT_REGION" | "SELECT_ROW_TREE";
 export type ColorRecord = [
     string,
     number,
@@ -100,10 +101,11 @@ export interface DatagridModel {
     _view: View;
     _table: Table;
     _table_schema: Schema;
-    _config: ViewConfig;
+    _config: ViewerConfig;
     _num_rows: number;
     _num_columns?: number;
     _schema: Schema;
+    _theme: string;
     _ids: unknown[][];
     _plugin_background: number[];
     _color: ColorRecord;
@@ -115,6 +117,8 @@ export interface DatagridModel {
     _column_types: ColumnType[];
     _is_editable: boolean[];
     _edit_mode: EditMode;
+    _tree_selection_id?: unknown[];
+    _last_insert_configs?: ViewConfigUpdate[];
     _selection_state: SelectionState;
     _row_header_types: ColumnType[];
     _series_color_map: Map<string, Map<string, number>>;
@@ -135,17 +139,6 @@ export interface DatagridModel {
 export declare const PRIVATE_PLUGIN_SYMBOL: unique symbol;
 export type DataListener = (regularTable: RegularTableElement, x0: number, y0: number, x1: number, y1: number) => Promise<DataResponse>;
 export type StyleListener = () => void;
-export interface PerspectiveViewerElement extends HTMLElement {
-    getView(): Promise<View>;
-    getTable(): Promise<Table>;
-    getEditPort(): Promise<number>;
-    restore(config: Partial<ViewConfig>): Promise<void>;
-    toggleColumnSettings(columnName?: string): Promise<void>;
-    hasAttribute(name: string): boolean;
-    setSelection(viewport?: ViewWindow): void;
-    dispatchEvent(event: Event): boolean;
-    children: HTMLCollectionOf<HTMLElement>;
-}
 export interface DatagridToolbarElement extends HTMLElement {
     setEditButton(button: HTMLElement): void;
     setScrollLockButton(button: HTMLElement): void;
@@ -165,7 +158,7 @@ export interface PerspectiveClickDetail {
     column_names: string[];
     config: Partial<ViewConfig>;
 }
-export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer/src/ts/extensions.js";
 export interface HandledMouseEvent extends MouseEvent {
     handled?: boolean;
 }
@@ -184,5 +177,5 @@ export interface DatagridPluginElement extends HTMLElement {
     _reset_select?: boolean;
     _reset_column_size?: boolean;
 }
-export type SelectedRowsMap = WeakMap<RegularTableElement, Set<number>>;
 export type SelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;
+export declare function isEditableMode(model: DatagridModel, viewer: HTMLPerspectiveViewerElement, allowed?: boolean): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
@@ -31,14 +31,12 @@
   "dependencies": {
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
-    "chroma-js": ">=3 <4",
-    "regular-table": "=0.8.3"
+    "regular-table": "=0.8.4"
   },
   "devDependencies": {
     "lightningcss": "^1.29.0",
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
-    "@types/chroma-js": "^3.1.2",
     "prettier": ">=3 <4",
     "typescript": ">=5 <6",
     "zx": ">=8 <9"

package/src/css/regular_table.css

@@ -97,34 +97,18 @@ perspective-viewer,
     cursor: pointer;
 }
 
-.psp-row-selected,
-:hover .psp-row-selected,
-:hover th.psp-tree-leaf.psp-row-selected,
-:hover th.psp-tree-label.psp-row-selected {
-    color: white !important;
-    background-color: var(--selected-row--background-color, #ea7319) !important;
-    border-color: var(--selected-row--background-color, #ea7319) !important;
-}
-
 regular-table.flat-group-rollup-mode.vertical-row-headers
     th.psp-tree-label:not(:last-of-type) {
     writing-mode: vertical-lr;
 }
 
-.psp-row-selected.psp-tree-label:not(:hover):before {
-    color: white;
-}
-
-regular-table:not(.flat-group-rollup-mode)
-    .psp-row-selected.psp-tree-label:not(:hover):before {
-    color: white;
-}
-
-.psp-row-subselected,
-:hover .psp-row-subselected,
-:hover th.psp-tree-leaf.psp-row-subselected,
-:hover th.psp-tree-label.psp-row-subselected {
-    background: rgba(234, 115, 25, 0.2) !important;
+.psp-select-region-inactive,
+:hover .psp-select-region-inactive,
+:hover th.psp-tree-leaf.psp-select-region-inactive,
+:hover th.psp-tree-label.psp-select-region-inactive {
+    background-color: var(--psp-inactive--color) !important;
+    color: var(--psp--background-color) !important;
+    border-color: var(--psp--background-color) !important;
 }
 
 .psp-error {
@@ -265,6 +249,7 @@ tbody th:last-of-type {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 tbody th:empty {
     background-image: linear-gradient(
         to right,
@@ -316,12 +301,78 @@ regular-table:not(.flat-group-rollup-mode) {
 .psp-align-right {
     text-align: right;
 }
+
+.psp-color-mode-bar {
+    padding: 0 2px;
+}
+
+.psp-color-mode-label-bar {
+    position: relative;
+    padding: 0 2px;
+
+    .psp-bar {
+        isolation: isolate;
+        position: unset;
+    }
+
+    .psp-bar:before {
+        color: transparent;
+        pointer-events: none;
+        content: var(--label);
+        display: inline-flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 3px;
+    }
+
+    .psp-bar:after {
+        color: var(--psp-label-bar-bg);
+        content: var(--label);
+        mix-blend-mode: difference;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: inline-flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 5px;
+    }
+}
+
+.psp-label-bar {
+    inset: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0px;
+}
+
+.psp-label-bar-fill {
+    position: absolute;
+    top: 10%;
+    height: 80%;
+    background: var(--psp-label-bar-color);
+    pointer-events: none;
+}
+
+.psp-label-bar-text {
+    position: relative;
+    color: var(--psp-label-bar-bg);
+    mix-blend-mode: difference;
+    pointer-events: none;
+}
+
 .psp-align-left {
     text-align: left;
 }
+
 .psp-positive:not(:focus) {
     color: var(--psp-datagrid--pos-cell--color);
 }
+
 .psp-negative:not(:focus) {
     color: var(--psp-datagrid--neg-cell--color);
 }
@@ -354,7 +405,7 @@ regular-table table {
     td,
     th {
         border-color: var(--psp-inactive--border-color, #8b868045);
-        height: 23px;
+        height: var(--psp-datagrid--row--height, 23px);
     }
 
     .psp-header-group {
@@ -363,9 +414,10 @@ regular-table table {
 
     th.psp-header-leaf {
         border-bottom-width: 0px;
+
         span {
-            height: 23px;
-            min-height: 23px;
+            height: var(--psp-datagrid--row--height, 23px);
+            min-height: var(--psp-datagrid--row--height, 23px);
         }
     }
 
@@ -395,18 +447,18 @@ regular-table table {
 regular-table
     tbody
     tr:hover
-    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected),
+    td.psp-select-region:not(.psp-select-region-inactive),
 regular-table
     tbody
     tr:hover
     + tr
-    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
+    td.psp-select-region:not(.psp-select-region-inactive) {
     border-color: var(--psp--background-color) !important;
 }
 
 regular-table tbody tr:hover {
     td.psp-select-region.psp-menu-open {
-        &:not(.psp-row-selected):not(.psp-row-subselected) {
+        &:not(.psp-select-region-inactive) {
             box-shadow:
                 inset -2px 0px 0px var(--psp--background-color),
                 inset 2px 0px 0px var(--psp--background-color);
@@ -445,7 +497,7 @@ regular-table table thead tr:last-child:after {
     width: 10000px;
     box-sizing: border-box;
     display: block;
-    height: 23px;
+    height: var(--psp-datagrid--row--height, 23px);
     content: " ";
     border-bottom: 1px solid var(--psp-inactive--border-color);
 }
@@ -455,7 +507,7 @@ regular-table table tbody tr:after {
     width: 10000px;
     box-sizing: border-box;
     display: block;
-    height: 23px;
+    height: var(--psp-datagrid--row--height, 23px);
     content: " ";
     border-top: 1px solid transparent;
 }
@@ -479,6 +531,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(0, 128, 255, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -494,6 +547,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(0, 128, 255, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -509,6 +563,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(255, 25, 0, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,
@@ -524,6 +579,7 @@ regular-table table tbody tr:hover + tr:after {
             rgba(255, 25, 0, 0.5)
         );
     }
+
     100% {
         background-color: var(
             --pulse--background-color-end,

package/src/css/row-hover.css

@@ -14,10 +14,14 @@
 regular-table {
     tbody {
         tr:hover
-            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-leaf:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
         tr:hover
-            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-label:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
+        tr:hover td:not(.psp-select-region):not(.psp-select-region-inactive),
         tr:hover:after {
             border-color: var(
                 --psp-datagrid--hover--border-color,
@@ -36,7 +40,9 @@ regular-table {
         }
 
         tr:last-child:hover
-            td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open {
+            td:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ).psp-menu-open {
             box-shadow:
                 inset -2px 0px 0px var(--psp--color),
                 inset 2px 0px 0px var(--psp--color),
@@ -46,11 +52,17 @@ regular-table {
 
         tr:hover
             + tr
-            th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected),
+            th.psp-tree-leaf:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
         tr:hover
             + tr
-            th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
-        tr:hover + tr td:not(.psp-row-selected):not(.psp-row-subselected) {
+            th.psp-tree-label:not(.psp-select-region):not(
+                .psp-select-region-inactive
+            ),
+        tr:hover
+            + tr
+            td:not(.psp-select-region):not(.psp-select-region-inactive) {
             border-top-color: transparent;
         }
 
@@ -72,6 +84,7 @@ regular-table {
 
         tr:hover {
             color: inherit;
+
             th:first-child:not(:empty),
             th:first-child:empty + th:not(:empty),
             th:first-child:empty ~ th:empty + th:not(:empty),

package/src/css/toolbar.css

@@ -94,6 +94,10 @@
     -webkit-mask-image: var(--psp-toolbar-edit-mode-select-region--content);
 }
 
+#edit_mode[data-edit-mode="SELECT_ROW_TREE"]:before {
+    -webkit-mask-image: var(--psp-toolbar-edit-mode-select-row-tree--content);
+}
+
 /* #edit_mode span:before { */
 /*     content: var(--edit-mode-toggle--content, "N/A"); */
 /* } */
@@ -124,6 +128,13 @@
     );
 }
 
+#edit_mode[data-edit-mode="SELECT_ROW_TREE"] span:before {
+    content: var(
+        --psp-label--edit-mode-select-row-tree--content,
+        "Tree Select"
+    );
+}
+
 #scroll_lock span:before {
     content: var(--psp-label--scroll-lock-toggle--content, "Free Scroll");
 }