@perspective-dev/viewer-datagrid 4.0.1 → 4.1.1

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

@@ -0,0 +1,6 @@
+import type { View } from "@perspective-dev/client";
+import type { DatagridPluginElement } from "../types.js";
+/**
+ * Lazy initialize this plugin with various listeners.
+ */
+export declare function activate(this: DatagridPluginElement, view: View): Promise<void>;

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

@@ -0,0 +1,28 @@
+import { ColumnType } from "@perspective-dev/client";
+import type { DatagridPluginElement } from "../types.js";
+interface NumberStyleOpts {
+    datagrid_number_style: {
+        fg_gradient: number;
+        pos_fg_color: string;
+        neg_fg_color: string;
+        number_fg_mode: string;
+        bg_gradient: number;
+        pos_bg_color: string;
+        neg_bg_color: string;
+        number_bg_mode: string;
+    };
+    number_string_format: boolean;
+}
+interface DatetimeStyleOpts {
+    datagrid_datetime_style?: {
+        color: string;
+        bg_color: string;
+    };
+    datagrid_string_style?: {
+        color: string;
+        bg_color: string;
+    };
+}
+export type ColumnStyleOpts = NumberStyleOpts | DatetimeStyleOpts | null;
+export default function column_style_opts(this: DatagridPluginElement, type: ColumnType, _group: string): ColumnStyleOpts;
+export {};

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

@@ -0,0 +1,7 @@
+import type { View } from "@perspective-dev/client";
+import type { DatagridPluginElement } from "../types.js";
+interface DatagridPluginWithActivate extends DatagridPluginElement {
+    activate(view: View): Promise<void>;
+}
+export declare function draw(this: DatagridPluginWithActivate, view: View): Promise<void>;
+export {};

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

@@ -0,0 +1,10 @@
+import type { DatagridPluginElement, EditMode, ColumnsConfig } from "../types.js";
+interface RestoreToken {
+    columns?: Record<string, {
+        column_size_override?: number;
+    }>;
+    edit_mode?: EditMode;
+    scroll_lock?: boolean;
+}
+export declare function restore(this: DatagridPluginElement, token: RestoreToken, columns: ColumnsConfig): void;
+export {};

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

@@ -0,0 +1,2 @@
+import type { DatagridPluginElement, DatagridPluginConfig } from "../types.js";
+export declare function save(this: DatagridPluginElement): DatagridPluginConfig | Record<string, never>;

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

@@ -0,0 +1,7 @@
+import { RegularTableElement } from "regular-table";
+import type { DatagridModel, PerspectiveViewerElement, ColumnsConfig } from "../types.js";
+import { CollectedCell, LocalSelectedPositionMap, LocalSelectedRowsMap } 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;

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

@@ -0,0 +1,13 @@
+import { RegularTableElement } from "regular-table";
+import type { DatagridModel, PerspectiveViewerElement } from "../types.js";
+import { CollectedHeaderRow } from "./types.js";
+/**
+ * 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;
+/**
+ * Style a single column header row.
+ */
+export declare function styleColumnHeaderRow(this: DatagridModel, headerRow: CollectedHeaderRow, regularTable: RegularTableElement, is_menu_row: boolean): void;

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

@@ -0,0 +1,57 @@
+import { RegularTableElement } from "regular-table";
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel, PerspectiveViewerElement, ColumnsConfig, DatagridPluginElement, SelectedPosition } from "../types.js";
+interface CellMetaExtended extends CellMetadata {
+    _is_hidden_by_aggregate_depth?: boolean;
+}
+interface CollectedCell {
+    element: HTMLElement;
+    metadata: CellMetaExtended;
+    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>;
+/**
+ * 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 {};

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

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

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

@@ -0,0 +1,16 @@
+import { RegularTableElement } from "regular-table";
+import type { DatagridModel, SelectedPosition } from "../types.js";
+import { CollectedCell, LocalSelectedPositionMap } 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;
+/**
+ * Standalone function to focus the selected cell.
+ * This collects cells from the table and tries to focus the selected position.
+ * Returns true if focus was successful, false otherwise.
+ *
+ * Used by edit_keydown.ts for keyboard navigation.
+ */
+export declare function focusSelectedCell(regularTable: RegularTableElement, selectedPositionMap: Map<RegularTableElement, SelectedPosition>): boolean;

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

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

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

@@ -0,0 +1,7 @@
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel, ColumnConfig } from "../../types.js";
+interface CellMetaWithFlags extends CellMetadata {
+    _is_hidden_by_aggregate_depth?: boolean;
+}
+export declare function cell_style_boolean(this: DatagridModel, _plugin: ColumnConfig | undefined, td: HTMLElement, metadata: CellMetaWithFlags): void;
+export {};

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

@@ -0,0 +1,3 @@
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel, ColorRecord } from "../../types.js";
+export declare function style_cell_flash(this: DatagridModel, metadata: CellMetadata, 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

@@ -0,0 +1,7 @@
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel, ColumnConfig } from "../../types.js";
+interface CellMetaWithFlags extends CellMetadata {
+    _is_hidden_by_aggregate_depth?: boolean;
+}
+export declare function cell_style_datetime(this: DatagridModel, plugin: ColumnConfig, td: HTMLElement, metadata: CellMetaWithFlags): void;
+export {};

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

@@ -0,0 +1,15 @@
+import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
+interface CellMetaWithExtras {
+    _is_hidden_by_aggregate_depth?: boolean;
+    user?: number;
+    dy: number;
+    column_header?: string[];
+}
+interface PluginWithColors extends Omit<ColumnConfig, "pos_fg_color" | "neg_fg_color" | "pos_bg_color" | "neg_bg_color"> {
+    pos_bg_color?: ColorRecord;
+    neg_bg_color?: ColorRecord;
+    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 {};

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

@@ -0,0 +1,4 @@
+import { CellMetadata } 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: CellMetadata): void;

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

@@ -0,0 +1,11 @@
+import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
+interface CellMetaWithExtras {
+    _is_hidden_by_aggregate_depth?: boolean;
+    user?: string | null;
+    column_header?: string[];
+}
+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 {};

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

@@ -0,0 +1,20 @@
+import { RegularTableElement } from "regular-table";
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { SelectedPosition } from "../types.js";
+export interface CellMetaExtended extends CellMetadata {
+    _is_hidden_by_aggregate_depth?: boolean;
+}
+export interface CollectedCell {
+    element: HTMLElement;
+    metadata: CellMetaExtended;
+    isHeader: boolean;
+}
+export interface CollectedHeaderRow {
+    row: HTMLTableRowElement;
+    cells: Array<{
+        element: HTMLTableCellElement;
+        metadata: CellMetadata | undefined;
+    }>;
+}
+export type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
+export type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;

package/dist/esm/types.d.ts

@@ -0,0 +1,193 @@
+import type { View, Table, ViewConfig, ColumnType, SortDir, ViewWindow } from "@perspective-dev/client";
+import { RegularTableElement } from "regular-table";
+import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
+export type { RegularTableElement as RegularTable };
+export type { CellMetadata as CellMeta };
+export type EditMode = "READ_ONLY" | "EDIT" | "SELECT_COLUMN" | "SELECT_ROW" | "SELECT_REGION";
+export type ColorRecord = [
+    string,
+    number,
+    number,
+    number,
+    string,
+    string,
+    string
+];
+export type SortTerm = [string, SortDir];
+export interface SelectionArea {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+}
+export interface SelectionState {
+    selected_areas: SelectionArea[];
+    dirty: boolean;
+    CURRENT_MOUSEDOWN_COORDINATES?: {
+        x?: number;
+        y?: number;
+    };
+    old_selected_areas?: SelectionArea[];
+    potential_selection?: SelectionArea;
+}
+export interface SelectedPosition {
+    x: number;
+    y: number;
+    content?: string;
+}
+export interface ColumnConfig {
+    color?: string;
+    pos_fg_color?: string;
+    neg_fg_color?: string;
+    pos_bg_color?: string;
+    neg_bg_color?: string;
+    fg_gradient?: number;
+    bg_gradient?: number;
+    number_fg_mode?: string;
+    number_bg_mode?: string;
+    string_color_mode?: string;
+    datetime_color_mode?: string;
+    fixed?: number;
+    aggregate_depth?: number;
+    column_size_override?: number;
+    format?: string;
+    date_format?: DateFormatConfig;
+    number_format?: NumberFormatConfig;
+}
+export interface DateFormatConfig {
+    format?: "custom" | string;
+    timeZone?: string;
+    dateStyle?: "short" | "medium" | "long" | "full" | "disabled";
+    timeStyle?: "short" | "medium" | "long" | "full" | "disabled";
+    second?: "numeric" | "2-digit" | "disabled";
+    minute?: "numeric" | "2-digit" | "disabled";
+    hour?: "numeric" | "2-digit" | "disabled";
+    day?: "numeric" | "2-digit" | "disabled";
+    weekday?: "narrow" | "short" | "long" | "disabled";
+    month?: "numeric" | "2-digit" | "narrow" | "short" | "long" | "disabled";
+    year?: "numeric" | "2-digit" | "disabled";
+    hour12?: boolean;
+    fractionalSecondDigits?: 1 | 2 | 3;
+}
+export interface NumberFormatConfig {
+    style?: "decimal" | "currency" | "percent" | "unit";
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumIntegerDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+    currency?: string;
+    currencyDisplay?: "code" | "symbol" | "narrowSymbol" | "name";
+    notation?: "standard" | "scientific" | "engineering" | "compact";
+    compactDisplay?: "short" | "long";
+    useGrouping?: boolean;
+}
+export type ColumnsConfig = Record<string, ColumnConfig>;
+export interface DatagridPluginConfig {
+    columns?: ColumnsConfig;
+    editable?: boolean;
+    scroll_lock?: boolean;
+    edit_mode?: EditMode;
+    column_size_override?: Record<string, number>;
+}
+export interface ElemFactory {
+    clear(): void;
+    get(): HTMLElement;
+}
+export type Schema = Record<string, ColumnType>;
+export interface DatagridModel {
+    _edit_port: number;
+    _view: View;
+    _table: Table;
+    _table_schema: Schema;
+    _config: ViewConfig;
+    _num_rows: number;
+    _num_columns?: number;
+    _schema: Schema;
+    _ids: unknown[][];
+    _plugin_background: number[];
+    _color: ColorRecord;
+    _pos_fg_color: ColorRecord;
+    _neg_fg_color: ColorRecord;
+    _pos_bg_color: ColorRecord;
+    _neg_bg_color: ColorRecord;
+    _column_paths: string[];
+    _column_types: ColumnType[];
+    _is_editable: boolean[];
+    _edit_mode: EditMode;
+    _selection_state: SelectionState;
+    _row_header_types: ColumnType[];
+    _series_color_map: Map<string, Map<string, number>>;
+    _series_color_seed: Map<string, number>;
+    _div_factory: ElemFactory;
+    _last_window?: ViewWindow;
+    _is_old_viewport?: boolean;
+    _reverse_columns?: Map<string, number>;
+    _reverse_ids?: Map<string, number>;
+    last_column_paths?: string[];
+    last_meta?: unknown[][];
+    last_ids?: unknown[][];
+    last_reverse_ids?: Map<string, number>;
+    last_reverse_columns?: Map<string, number>;
+    get_psp_type(metadata: CellMetadata): ColumnType;
+    _column_settings_selected_column?: string;
+}
+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;
+}
+export type ColumnOverrides = Record<string, number | undefined>;
+export interface FormatterCacheEntry {
+    format(value: unknown): string;
+}
+export type FormatterCache = Map<string, FormatterCacheEntry>;
+export interface CellConfigResult {
+    row: Record<string, unknown>;
+    column_names: string[];
+    config: Partial<ViewConfig>;
+}
+export interface PerspectiveClickDetail {
+    row: Record<string, unknown>;
+    column_names: string[];
+    config: Partial<ViewConfig>;
+}
+export interface PerspectiveSelectDetail {
+    selected: boolean;
+    row: Record<string, unknown>;
+    column_names?: string[];
+    config: Partial<ViewConfig>;
+}
+export interface HandledMouseEvent extends MouseEvent {
+    handled?: boolean;
+}
+export type SortRotationOrder = Record<string, SortDir | undefined>;
+export interface DatagridPluginElement extends HTMLElement {
+    regular_table: RegularTableElement;
+    model?: DatagridModel;
+    _toolbar?: DatagridToolbarElement;
+    _edit_button?: HTMLElement;
+    _scroll_lock?: HTMLElement;
+    _is_scroll_lock: boolean;
+    _edit_mode: EditMode;
+    _initialized?: boolean;
+    _reset_scroll_top?: boolean;
+    _reset_scroll_left?: boolean;
+    _reset_select?: boolean;
+    _reset_column_size?: boolean;
+}
+export type SelectedRowsMap = WeakMap<RegularTableElement, Set<number>>;
+export type SelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./dist/esm/index.d.ts",
       "default": "./dist/esm/perspective-viewer-datagrid.js"
     },
     "./dist/*": "./dist/*",
+    "./src/*": "./src/*",
     "./package.json": "./package.json"
   },
   "type": "module",
+  "types": "dist/esm/index.d.ts",
   "files": [
     "dist/**/*",
-    "index.d.ts"
+    "src/**/*"
   ],
   "publishConfig": {
     "access": "public"
@@ -30,13 +32,16 @@
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
     "chroma-js": ">=3 <4",
-    "regular-table": "=0.6.8"
+    "regular-table": "=0.8.0"
   },
   "devDependencies": {
     "@prospective.co/procss": "0.1.17",
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
-    "prettier": ">=3 <4"
+    "@types/chroma-js": "^3.1.2",
+    "prettier": ">=3 <4",
+    "typescript": ">=5 <6",
+    "zx": ">=8 <9"
   },
   "scripts": {
     "build": "node ./build.mjs",

package/src/less/mitered-headers.less

@@ -0,0 +1,65 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+.psp-header-border:not(.psp-is-top):not(.psp-header-leaf) {
+    // right
+    box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
+}
+
+.psp-header-group {
+    // bottom
+    box-shadow: 0px 10px 0 -9px var(--inactive--border-color, #8b868045);
+}
+
+.psp-is-top {
+    // top-miter-right
+    box-shadow: 5px 4px 0px -4px var(--inactive--border-color, #8b868045);
+}
+
+.psp-is-top.psp-header-group:not(.psp-header-group-corner) {
+    // top-miter-right and bottom
+    box-shadow:
+        5px 4px 0px -4px var(--inactive--border-color, #8b868045),
+        0px 10px 0 -9px var(--inactive--border-color, #8b868045);
+}
+
+.psp-header-border.psp-header-group {
+    &:not(.psp-is-top):not(.psp-header-group-corner) {
+        // right and bottom
+        box-shadow:
+            1px 0px var(--inactive--border-color, #8b868045),
+            0px 10px 0 -9px var(--inactive--border-color, #8b868045);
+    }
+}
+
+@mixin disabled-menu-funky-box-shadow {
+    tr.rt-autosize .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
+        box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
+    }
+}
+
+perspective-viewer[settings] {
+    @include disabled-menu-funky-box-shadow;
+}
+
+:host-context(perspective-viewer[settings]) {
+    @include disabled-menu-funky-box-shadow;
+}
+
+.psp-header-leaf.psp-header-border {
+    // bottom-miter-right
+    box-shadow: 5px -4px 0px -4px var(--inactive--border-color, #8b868045);
+}
+
+tr:only-child th {
+    box-shadow: none !important;
+}