@perspective-dev/viewer-datagrid 4.0.0 → 4.1.0

package/src/ts/style_handlers/group_header.ts

@@ -0,0 +1,78 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { RegularTableElement } from "regular-table";
+import type { DatagridModel } from "../types.js";
+
+import { CollectedHeaderRow } from "./types.js";
+
+/**
+ * Apply styles to group header rows.
+ */
+export function applyGroupHeaderStyles(
+    this: DatagridModel,
+    headerRows: CollectedHeaderRow[],
+    regularTable: RegularTableElement,
+): void {
+    const header_depth = this._config.group_by.length;
+    const m: boolean[][] = [];
+    let marked = new Set<number>();
+
+    for (let y = 0; y < headerRows.length; y++) {
+        const { row, cells } = headerRows[y];
+        const tops = new Set<number>();
+
+        for (let x = 0; x < cells.length; x++) {
+            const { element: td, metadata } = cells[x];
+            if (!metadata) continue;
+
+            td.style.backgroundColor = "";
+
+            const needs_border =
+                (header_depth > 0 && metadata.row_header_x === header_depth) ||
+                (metadata.x ?? -1) >= 0;
+
+            td.classList.toggle("psp-align-right", false);
+            td.classList.toggle("psp-align-left", false);
+            td.classList.toggle("psp-header-group", true);
+            td.classList.toggle("psp-header-leaf", false);
+            td.classList.toggle("psp-header-border", needs_border);
+            td.classList.toggle(
+                "psp-header-group-corner",
+                typeof metadata.x === "undefined",
+            );
+            td.classList.toggle("psp-color-mode-bar", false);
+            td.classList.toggle("psp-header-sort-asc", false);
+            td.classList.toggle("psp-header-sort-desc", false);
+            td.classList.toggle("psp-header-sort-col-asc", false);
+            td.classList.toggle("psp-header-sort-col-desc", false);
+            td.classList.toggle("psp-sort-enabled", false);
+
+            // Calculate spanning for psp-is-top
+            let xx = x;
+            for (; m[y] && m[y][xx]; ++xx);
+            tops.add(xx);
+
+            const cell = td;
+            for (let tx = xx; tx < xx + cell.colSpan; ++tx) {
+                for (let ty = y; ty < y + cell.rowSpan; ++ty) {
+                    if (!m[ty]) m[ty] = [];
+                    m[ty][tx] = true;
+                }
+            }
+
+            cell.classList.toggle("psp-is-top", y === 0 || !marked.has(xx));
+        }
+
+        marked = tops;
+    }
+}

package/src/ts/style_handlers/table_cell/boolean.ts

@@ -0,0 +1,39 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
+
+interface CellMetaWithFlags extends CellMetadata {
+    _is_hidden_by_aggregate_depth?: boolean;
+}
+
+export function cell_style_boolean(
+    this: DatagridModel,
+    _plugin: ColumnConfig | undefined,
+    td: HTMLElement,
+    metadata: CellMetaWithFlags,
+): void {
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else {
+        const [hex]: ColorRecord | [string, number, number, number, string] =
+            metadata.user === true
+                ? this._pos_fg_color
+                : metadata.user === false
+                  ? this._neg_fg_color
+                  : ["", 0, 0, 0, ""];
+        td.style.backgroundColor = "";
+        td.style.color = hex;
+    }
+}

package/src/ts/style_handlers/table_cell/cell_flash.ts

@@ -0,0 +1,75 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel, ColorRecord } from "../../types.js";
+
+export 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 {
+    const id = this._ids?.[metadata.dy ?? 0]?.join("|");
+    const metadata_path = (
+        is_settings_open
+            ? (metadata.column_header ?? []).slice(0, -1)
+            : (metadata.column_header ?? [])
+    ).join("|");
+
+    if (
+        this.last_reverse_columns?.has(metadata_path) &&
+        this.last_reverse_ids?.has(id)
+    ) {
+        const row_idx = this.last_reverse_ids?.get(id);
+        const col_idx = this.last_reverse_columns.get(metadata_path);
+        if (!this._is_old_viewport) {
+            td.style.animation = "";
+        } else if (
+            col_idx !== undefined &&
+            row_idx !== undefined &&
+            (this.last_meta?.[col_idx]?.[row_idx] as number | undefined) !==
+                undefined &&
+            (this.last_meta![col_idx]![row_idx] as number) >
+                ((metadata.user ?? 0) as number)
+        ) {
+            td.style.setProperty("--pulse--background-color-start", neg_s);
+            td.style.setProperty("--pulse--background-color-end", neg_e);
+            if (td.style.animationName === "pulse_neg") {
+                td.style.animation = "pulse_neg2 0.5s linear";
+            } else {
+                td.style.animation = "pulse_neg 0.5s linear";
+            }
+        } else if (
+            col_idx !== undefined &&
+            row_idx !== undefined &&
+            (this.last_meta?.[col_idx]?.[row_idx] as number | undefined) !==
+                undefined &&
+            (this.last_meta![col_idx]![row_idx] as number) <
+                ((metadata.user ?? 0) as number)
+        ) {
+            td.style.setProperty("--pulse--background-color-start", pos_s);
+            td.style.setProperty("--pulse--background-color-end", pos_e);
+            if (td.style.animationName === "pulse_pos") {
+                td.style.animation = "pulse_pos2 0.5s linear";
+            } else {
+                td.style.animation = "pulse_pos 0.5s linear";
+            }
+        } else if (row_idx !== metadata.dy) {
+            td.style.animation = "";
+        }
+    } else {
+        td.style.animation = "";
+    }
+}

package/src/ts/style_handlers/table_cell/datetime.ts

@@ -0,0 +1,64 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import {
+    rgbaToRgb,
+    infer_foreground_from_background,
+} from "../../color_utils.js";
+import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
+
+interface CellMetaWithFlags extends CellMetadata {
+    _is_hidden_by_aggregate_depth?: boolean;
+}
+
+export function cell_style_datetime(
+    this: DatagridModel,
+    plugin: ColumnConfig,
+    td: HTMLElement,
+    metadata: CellMetaWithFlags,
+): void {
+    const colorRecord: ColorRecord = //(() => {
+        // if (plugin?.color !== undefined) {
+        //     return plugin.color;
+        // } else {
+        // return
+        this._color;
+    // }
+    //  })();
+
+    const [hex, r, g, b] = colorRecord;
+
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else if (
+        plugin?.datetime_color_mode === "foreground" &&
+        metadata.user !== null
+    ) {
+        td.style.color = hex;
+        td.style.backgroundColor = "";
+    } else if (
+        plugin?.datetime_color_mode === "background" &&
+        metadata.user !== null
+    ) {
+        const source = this._plugin_background as [number, number, number];
+        const foreground = infer_foreground_from_background(
+            rgbaToRgb([r, g, b, 1], source),
+        );
+        td.style.color = foreground;
+        td.style.backgroundColor = hex;
+    } else {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    }
+}

package/src/ts/style_handlers/table_cell/numeric.ts

@@ -0,0 +1,186 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { style_cell_flash } from "./cell_flash.js";
+import {
+    rgbaToRgb,
+    infer_foreground_from_background,
+} from "../../color_utils.js";
+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 function cell_style_numeric(
+    this: DatagridModel,
+    plugin: PluginWithColors | undefined,
+    td: HTMLElement,
+    metadata: CellMetaWithExtras,
+    is_settings_open: boolean,
+): void {
+    const is_positive = (metadata.user ?? 0) > 0;
+    const is_negative = (metadata.user ?? 0) < 0;
+
+    let pos_bg_color: ColorRecord;
+    if (plugin?.pos_bg_color !== undefined) {
+        pos_bg_color = plugin.pos_bg_color;
+    } else {
+        pos_bg_color = this._pos_bg_color;
+    }
+
+    let neg_bg_color: ColorRecord;
+    if (plugin?.neg_bg_color !== undefined) {
+        neg_bg_color = plugin.neg_bg_color;
+    } else {
+        neg_bg_color = this._neg_bg_color;
+    }
+
+    const bg_tuple: ColorRecord = is_positive
+        ? pos_bg_color
+        : is_negative
+          ? neg_bg_color
+          : [
+                "",
+                this._plugin_background[0],
+                this._plugin_background[1],
+                this._plugin_background[2],
+                "",
+                "",
+                "",
+            ];
+
+    {
+        const [hex, r, g, b] = bg_tuple;
+
+        td.style.position = "";
+        if (metadata._is_hidden_by_aggregate_depth) {
+            td.style.animation = "";
+            td.style.backgroundColor = "";
+        } else if (plugin?.number_bg_mode === "color") {
+            td.style.animation = "";
+            td.style.backgroundColor = hex;
+        } else if (plugin?.number_bg_mode === "gradient") {
+            const a = Math.max(
+                0,
+                Math.min(
+                    1,
+                    Math.abs((metadata.user ?? 0) / (plugin.bg_gradient ?? 1)),
+                ),
+            );
+            const source = this._plugin_background as [number, number, number];
+            const foreground = infer_foreground_from_background(
+                rgbaToRgb([r, g, b, a], source),
+            );
+
+            td.style.animation = "";
+            td.style.color = foreground;
+            td.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+        } else if (plugin?.number_bg_mode === "pulse") {
+            style_cell_flash.call(
+                this,
+                metadata as any,
+                td,
+                pos_bg_color,
+                neg_bg_color,
+                is_settings_open,
+            );
+            td.style.backgroundColor = "";
+        } else if (
+            plugin?.number_bg_mode === "disabled" ||
+            !plugin?.number_bg_mode
+        ) {
+            td.style.animation = "";
+            td.style.backgroundColor = "";
+        } else {
+            td.style.animation = "";
+            td.style.backgroundColor = "";
+        }
+    }
+
+    const fg_tuple: ColorRecord = (() => {
+        if (plugin?.pos_fg_color !== undefined) {
+            return is_positive
+                ? plugin.pos_fg_color
+                : is_negative
+                  ? plugin.neg_fg_color!
+                  : [
+                        "",
+                        this._plugin_background[0],
+                        this._plugin_background[1],
+                        this._plugin_background[2],
+                        "",
+                        "",
+                        "",
+                    ];
+        } else {
+            return is_positive
+                ? this._pos_fg_color
+                : is_negative
+                  ? this._neg_fg_color
+                  : [
+                        "",
+                        this._plugin_background[0],
+                        this._plugin_background[1],
+                        this._plugin_background[2],
+                        "",
+                        "",
+                        "",
+                    ];
+        }
+    })();
+
+    const [hex, , , , gradhex] = fg_tuple;
+
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else if (plugin?.number_fg_mode === "disabled") {
+        if (plugin?.number_bg_mode === "color") {
+            const source = this._plugin_background as [number, number, number];
+            const foreground = infer_foreground_from_background(
+                rgbaToRgb([bg_tuple[1], bg_tuple[2], bg_tuple[3], 1], source),
+            );
+            td.style.color = foreground;
+        } else if (plugin?.number_bg_mode === "gradient") {
+            // Color already set above
+        } else {
+            td.style.color = "";
+        }
+    } else if (plugin?.number_fg_mode === "bar") {
+        td.style.color = "";
+        td.style.position = "relative";
+        if (
+            gradhex !== "" &&
+            td.children.length > 0 &&
+            td.children[0].nodeType === Node.ELEMENT_NODE
+        ) {
+            (td.children[0] as HTMLElement).style.background = gradhex;
+        }
+    } else if (plugin?.number_fg_mode === "color" || !plugin?.number_fg_mode) {
+        td.style.color = hex;
+    }
+}

package/src/ts/style_handlers/table_cell/row_header.ts

@@ -0,0 +1,53 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { DatagridModel } from "../../types.js";
+import { RegularTableElement } from "regular-table";
+
+interface NextMeta {
+    row_header?: unknown[];
+}
+
+export function cell_style_row_header(
+    this: DatagridModel,
+    regularTable: RegularTableElement,
+    td: HTMLElement,
+    metadata: CellMetadata,
+): void {
+    const is_not_empty =
+        metadata.value !== undefined &&
+        metadata.value !== null &&
+        metadata.value?.toString()?.trim().length > 0;
+    const is_leaf =
+        (metadata.row_header_x ?? 0) >= this._config.group_by.length;
+    const next = regularTable.getMeta({
+        dx: 0,
+        dy: (metadata.y ?? 0) - (metadata.y0 ?? 0) + 1,
+    } as unknown as Element) as NextMeta | undefined;
+    const is_collapse =
+        next &&
+        next.row_header &&
+        typeof next.row_header[(metadata.row_header_x ?? 0) + 1] !==
+            "undefined";
+    td.classList.toggle("psp-tree-label", is_not_empty && !is_leaf);
+    td.classList.toggle(
+        "psp-tree-label-expand",
+        is_not_empty && !is_leaf && !is_collapse,
+    );
+
+    td.classList.toggle(
+        "psp-tree-label-collapse",
+        is_not_empty && !is_leaf && is_collapse,
+    );
+    td.classList.toggle("psp-tree-leaf", is_not_empty && is_leaf);
+}

package/src/ts/style_handlers/table_cell/string.ts

@@ -0,0 +1,102 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import chroma from "chroma-js";
+import {
+    rgbaToRgb,
+    infer_foreground_from_background,
+} from "../../color_utils.js";
+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 function cell_style_string(
+    this: DatagridModel,
+    plugin: PluginWithColor | undefined,
+    td: HTMLElement,
+    metadata: CellMetaWithExtras,
+): void {
+    const column_name = metadata.column_header?.[this._config.split_by.length];
+    const colorRecord: ColorRecord = (() => {
+        if (plugin?.color !== undefined) {
+            return plugin.color;
+        } else {
+            return this._color;
+        }
+    })();
+
+    const [hex, r, g, b] = colorRecord;
+
+    if (metadata._is_hidden_by_aggregate_depth) {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    } else if (
+        plugin?.string_color_mode === "foreground" &&
+        metadata.user !== null
+    ) {
+        td.style.color = hex;
+        td.style.backgroundColor = "";
+        if (plugin?.format === "link" && td.children[0]) {
+            (td.children[0] as HTMLElement).style.color = hex;
+        }
+    } else if (
+        plugin?.string_color_mode === "background" &&
+        metadata.user !== null
+    ) {
+        const source = this._plugin_background as [number, number, number];
+        const foreground = infer_foreground_from_background(
+            rgbaToRgb([r, g, b, 1], source),
+        );
+        td.style.color = foreground;
+        td.style.backgroundColor = hex;
+    } else if (
+        plugin?.string_color_mode === "series" &&
+        metadata.user !== null &&
+        column_name
+    ) {
+        if (!this._series_color_map.has(column_name)) {
+            this._series_color_map.set(column_name, new Map());
+            this._series_color_seed.set(column_name, 0);
+        }
+
+        const series_map = this._series_color_map.get(column_name)!;
+        if (metadata.user && !series_map.has(metadata.user)) {
+            const seed = this._series_color_seed.get(column_name) ?? 0;
+            series_map.set(metadata.user, seed);
+            this._series_color_seed.set(column_name, seed + 1);
+        }
+
+        const color_seed = series_map.get(metadata.user!) ?? 0;
+        let [h, s, l] = chroma(hex).hsl();
+        h = h + ((color_seed * 150) % 360);
+        const color2 = chroma(h, s, l, "hsl");
+        const [r2, g2, b2] = color2.rgb();
+        const hex2 = color2.hex();
+        const source = this._plugin_background as [number, number, number];
+        const foreground = infer_foreground_from_background(
+            rgbaToRgb([r2, g2, b2, 1], source),
+        );
+        td.style.color = foreground;
+        td.style.backgroundColor = hex2;
+    } else {
+        td.style.backgroundColor = "";
+        td.style.color = "";
+    }
+}

package/src/ts/style_handlers/types.ts

@@ -0,0 +1,41 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+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;
+    }>;
+}
+
+// Local types for selection maps - match the actual runtime usage
+// (activate.ts uses `as any` casts when passing these)
+export type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
+export type LocalSelectedPositionMap = WeakMap<
+    RegularTableElement,
+    SelectedPosition
+>;