@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

package/src/ts/style_handlers/consolidated.ts

@@ -14,69 +14,19 @@ import { RegularTableElement } from "regular-table";
 import { PRIVATE_PLUGIN_SYMBOL } from "../model/index.js";
 import type {
     DatagridModel,
-    PerspectiveViewerElement,
     ColumnsConfig,
     DatagridPluginElement,
-    SelectedPosition,
+    SelectedPositionMap,
 } from "../types.js";
+import { isEditableMode } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 import { applyFocusStyle } from "./focus.js";
-import { styleColumnHeaderRow } from "./column_header.js";
 import { applyColumnHeaderStyles } from "./editable.js";
 import { applyGroupHeaderStyles } from "./group_header.js";
 import { applyBodyCellStyles } from "./body.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>;
-}
-
-// Local types for selection maps - match the actual runtime usage
-// (activate.ts uses `as any` casts when passing these)
-type LocalSelectedRowsMap = WeakMap<RegularTableElement, unknown[]>;
-type LocalSelectedPositionMap = WeakMap<RegularTableElement, SelectedPosition>;
-
-function isEditableMode(
-    model: DatagridModel,
-    viewer: PerspectiveViewerElement,
-    allowed: boolean = false,
-): boolean {
-    const has_pivots =
-        model._config.group_by.length === 0 &&
-        model._config.split_by.length === 0;
-    const selectable = viewer.hasAttribute("selectable");
-    const plugin = viewer.children[0] as
-        | (DatagridPluginElement & { dataset: DOMStringMap })
-        | undefined;
-    const editable = allowed || plugin?.dataset?.editMode === "EDIT";
-    return has_pivots && !selectable && editable;
-}
+import { CollectedCell, CollectedHeaderRow } from "./types.js";
 
 /**
  * Consolidated style listener that handles all cell styling in a single pass.
@@ -86,24 +36,18 @@ function isEditableMode(
  */
 export function createConsolidatedStyleListener(
     datagrid: DatagridPluginElement,
-    selectedRowsMap: LocalSelectedRowsMap,
-    selectedPositionMap: LocalSelectedPositionMap,
-): (
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
-) => void {
-    return function consolidatedStyleListener(
-        this: DatagridModel,
-        regularTable: RegularTableElement,
-        viewer: PerspectiveViewerElement,
-    ): void {
+    viewer: HTMLPerspectiveViewerElement,
+    selectedPositionMap: SelectedPositionMap,
+): () => void {
+    return function consolidatedStyleListener(): void {
         const plugins: ColumnsConfig =
             (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
         const isSettingsOpen = viewer.hasAttribute("settings");
-        const isSelectable = viewer.hasAttribute("selectable");
-        const isEditable = isEditableMode(this, viewer);
-        const isEditableAllowed = isEditableMode(this, viewer, true);
+        const isSelectable = model._edit_mode === "SELECT_ROW_TREE";
+        const isEditable = isEditableMode(model, viewer);
+        const isEditableAllowed = isEditableMode(model, viewer, true);
 
         // Toggle edit mode class on datagrid
         datagrid.classList.toggle("edit-mode-allowed", isEditableAllowed);
@@ -117,7 +61,11 @@ export function createConsolidatedStyleListener(
                         cell as HTMLElement,
                     ) as CellMetadata | undefined;
 
-                    if (metadata) {
+                    if (
+                        metadata &&
+                        (metadata.type === "body" ||
+                            metadata.type === "row_header")
+                    ) {
                         const isHeader = cell.tagName === "TH";
                         bodyCells.push({
                             element: cell as HTMLElement,
@@ -152,67 +100,18 @@ export function createConsolidatedStyleListener(
             }
         }
 
-        this._applyBodyCellStyles(
+        applyBodyCellStyles(
+            model,
             bodyCells,
             plugins,
             isSettingsOpen,
             isSelectable,
             isEditable,
             regularTable,
-            selectedRowsMap,
-            selectedPositionMap,
-            viewer,
         );
 
-        this._applyGroupHeaderStyles(groupHeaderRows, regularTable);
-        this._applyColumnHeaderStyles(groupHeaderRows, regularTable, viewer);
-        this._applyFocusStyle(bodyCells, regularTable, selectedPositionMap);
+        applyGroupHeaderStyles(model, groupHeaderRows, regularTable);
+        applyColumnHeaderStyles(model, groupHeaderRows, regularTable, viewer);
+        applyFocusStyle(model, bodyCells, regularTable, selectedPositionMap);
     };
 }
-
-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 function installConsolidatedStyleMethods(modelPrototype: any): void {
-    modelPrototype._applyBodyCellStyles = applyBodyCellStyles;
-    modelPrototype._applyGroupHeaderStyles = applyGroupHeaderStyles;
-    modelPrototype._applyColumnHeaderStyles = applyColumnHeaderStyles;
-    modelPrototype._applyFocusStyle = applyFocusStyle;
-    modelPrototype._styleColumnHeaderRow = styleColumnHeaderRow;
-}

package/src/ts/style_handlers/editable.ts

@@ -12,7 +12,9 @@
 
 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 { styleColumnHeaderRow } from "./column_header.js";
 
 import { CollectedHeaderRow } from "./types.js";
 
@@ -20,15 +22,15 @@ import { CollectedHeaderRow } from "./types.js";
  * Apply styles to column header rows.
  */
 export function applyColumnHeaderStyles(
-    this: DatagridModel,
+    model: DatagridModel,
     headerRows: CollectedHeaderRow[],
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
 ): void {
     if (headerRows.length === 0) return;
 
     // Style selected column for settings panel
-    const selectedColumn = this._column_settings_selected_column;
+    const selectedColumn = model._column_settings_selected_column;
     const len = headerRows.length;
     const settings_open = viewer.hasAttribute("settings");
 
@@ -76,19 +78,19 @@ export function applyColumnHeaderStyles(
     }
 
     // Style the actual column header rows
-    const colHeadersIndex = this._config.split_by.length;
+    const colHeadersIndex = model._config.split_by.length;
     if (colHeadersIndex < headerRows.length) {
         const colHeaders = headerRows[colHeadersIndex];
         if (colHeaders) {
-            this._styleColumnHeaderRow(colHeaders, regularTable, false);
+            styleColumnHeaderRow(model, colHeaders, regularTable, false);
         }
     }
 
-    const menuHeadersIndex = this._config.split_by.length + 1;
+    const menuHeadersIndex = model._config.split_by.length + 1;
     if (menuHeadersIndex < headerRows.length) {
         const menuHeaders = headerRows[menuHeadersIndex];
         if (menuHeaders) {
-            this._styleColumnHeaderRow(menuHeaders, regularTable, true);
+            styleColumnHeaderRow(model, menuHeaders, regularTable, true);
         }
     }
 }

package/src/ts/style_handlers/focus.ts

@@ -11,18 +11,18 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 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 function applyFocusStyle(
-    this: DatagridModel,
+    _model: DatagridModel,
     cells: CollectedCell[],
     regularTable: RegularTableElement,
-    selectedPositionMap: LocalSelectedPositionMap,
+    selectedPositionMap: SelectedPositionMap,
 ): void {
     const selected_position = selectedPositionMap.get(regularTable);
     const host = regularTable.getRootNode() as Document;
@@ -60,7 +60,7 @@ export function applyFocusStyle(
  */
 export function focusSelectedCell(
     regularTable: RegularTableElement,
-    selectedPositionMap: Map<RegularTableElement, SelectedPosition>,
+    selectedPositionMap: SelectedPositionMap,
 ): boolean {
     const selected_position = selectedPositionMap.get(regularTable);
     if (!selected_position) {

package/src/ts/style_handlers/group_header.ts

@@ -19,11 +19,11 @@ import { CollectedHeaderRow } from "./types.js";
  * Apply styles to group header rows.
  */
 export function applyGroupHeaderStyles(
-    this: DatagridModel,
+    model: DatagridModel,
     headerRows: CollectedHeaderRow[],
     regularTable: RegularTableElement,
 ): void {
-    const header_depth = this._config.group_by.length;
+    const header_depth = model._config.group_by.length;
     const m: boolean[][] = [];
     let marked = new Set<number>();
 
@@ -54,6 +54,7 @@ export function applyGroupHeaderStyles(
             );
 
             td.classList.toggle("psp-color-mode-bar", false);
+            td.classList.toggle("psp-color-mode-label-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);

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

@@ -14,7 +14,7 @@ import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
 export function cell_style_boolean(
-    this: DatagridModel,
+    model: DatagridModel,
     _plugin: ColumnConfig | undefined,
     td: HTMLElement,
     metadata: CellMetadata,
@@ -26,9 +26,9 @@ export function cell_style_boolean(
     } else {
         const [hex]: ColorRecord | [string, number, number, number, string] =
             metadata.user === true
-                ? this._pos_fg_color
+                ? model._pos_fg_color
                 : metadata.user === false
-                  ? this._neg_fg_color
+                  ? model._neg_fg_color
                   : ["", 0, 0, 0, ""];
         td.style.backgroundColor = "";
         td.style.color = hex;

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

@@ -14,14 +14,14 @@ import { CellMetadataBody } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColorRecord } from "../../types.js";
 
 export function style_cell_flash(
-    this: DatagridModel,
+    model: DatagridModel,
     metadata: CellMetadataBody,
     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 id = model._ids?.[metadata.dy ?? 0]?.join("|");
     const metadata_path = (
         is_settings_open
             ? (metadata.column_header ?? []).slice(0, -1)
@@ -29,19 +29,19 @@ export function style_cell_flash(
     ).join("|");
 
     if (
-        this.last_reverse_columns?.has(metadata_path) &&
-        this.last_reverse_ids?.has(id)
+        model.last_reverse_columns?.has(metadata_path) &&
+        model.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) {
+        const row_idx = model.last_reverse_ids?.get(id);
+        const col_idx = model.last_reverse_columns.get(metadata_path);
+        if (!model._is_old_viewport) {
             td.style.animation = "";
         } else if (
             col_idx !== undefined &&
             row_idx !== undefined &&
-            (this.last_meta?.[col_idx]?.[row_idx] as number | undefined) !==
+            (model.last_meta?.[col_idx]?.[row_idx] as number | undefined) !==
                 undefined &&
-            (this.last_meta![col_idx]![row_idx] as number) >
+            (model.last_meta![col_idx]![row_idx] as number) >
                 ((metadata.user ?? 0) as number)
         ) {
             td.style.setProperty("--pulse--background-color-start", neg_s);
@@ -54,9 +54,9 @@ export function style_cell_flash(
         } else if (
             col_idx !== undefined &&
             row_idx !== undefined &&
-            (this.last_meta?.[col_idx]?.[row_idx] as number | undefined) !==
+            (model.last_meta?.[col_idx]?.[row_idx] as number | undefined) !==
                 undefined &&
-            (this.last_meta![col_idx]![row_idx] as number) <
+            (model.last_meta![col_idx]![row_idx] as number) <
                 ((metadata.user ?? 0) as number)
         ) {
             td.style.setProperty("--pulse--background-color-start", pos_s);

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

@@ -17,20 +17,23 @@ import {
 } from "../../color_utils.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
+interface PluginWithColor extends Omit<ColumnConfig, "color"> {
+    color?: ColorRecord;
+}
+
 export function cell_style_datetime(
-    this: DatagridModel,
-    plugin: ColumnConfig,
+    model: DatagridModel,
+    plugin: PluginWithColor,
     td: HTMLElement,
     metadata: CellMetadata,
 ): void {
-    const colorRecord: ColorRecord = //(() => {
-        // if (plugin?.color !== undefined) {
-        //     return plugin.color;
-        // } else {
-        // return
-        this._color;
-    // }
-    //  })();
+    const colorRecord: ColorRecord = (() => {
+        if (plugin?.color !== undefined) {
+            return plugin.color;
+        } else {
+            return model._color;
+        }
+    })();
 
     const [hex, r, g, b] = colorRecord;
 
@@ -48,7 +51,7 @@ export function cell_style_datetime(
         plugin?.datetime_color_mode === "background" &&
         metadata.user !== null
     ) {
-        const source = this._plugin_background as [number, number, number];
+        const source = model._plugin_background as [number, number, number];
         const foreground = infer_foreground_from_background(
             rgbaToRgb([r, g, b, 1], source),
         );

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

@@ -36,7 +36,7 @@ interface PluginWithColors
 }
 
 export function cell_style_numeric(
-    this: DatagridModel,
+    model: DatagridModel,
     plugin: PluginWithColors | undefined,
     td: HTMLElement,
     metadata: CellMetaWithExtras,
@@ -49,14 +49,14 @@ export function cell_style_numeric(
     if (plugin?.pos_bg_color !== undefined) {
         pos_bg_color = plugin.pos_bg_color;
     } else {
-        pos_bg_color = this._pos_bg_color;
+        pos_bg_color = model._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;
+        neg_bg_color = model._neg_bg_color;
     }
 
     const bg_tuple: ColorRecord = is_positive
@@ -65,9 +65,9 @@ export function cell_style_numeric(
           ? neg_bg_color
           : [
                 "",
-                this._plugin_background[0],
-                this._plugin_background[1],
-                this._plugin_background[2],
+                model._plugin_background[0],
+                model._plugin_background[1],
+                model._plugin_background[2],
                 "",
                 "",
                 "",
@@ -91,7 +91,7 @@ export function cell_style_numeric(
                     Math.abs((metadata.user ?? 0) / (plugin.bg_gradient ?? 1)),
                 ),
             );
-            const source = this._plugin_background as [number, number, number];
+            const source = model._plugin_background as [number, number, number];
             const foreground = infer_foreground_from_background(
                 rgbaToRgb([r, g, b, a], source),
             );
@@ -100,8 +100,8 @@ export function cell_style_numeric(
             td.style.color = foreground;
             td.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
         } else if (plugin?.number_bg_mode === "pulse") {
-            style_cell_flash.call(
-                this,
+            style_cell_flash(
+                model,
                 metadata as any,
                 td,
                 pos_bg_color,
@@ -129,23 +129,23 @@ export function cell_style_numeric(
                   ? plugin.neg_fg_color!
                   : [
                         "",
-                        this._plugin_background[0],
-                        this._plugin_background[1],
-                        this._plugin_background[2],
+                        model._plugin_background[0],
+                        model._plugin_background[1],
+                        model._plugin_background[2],
                         "",
                         "",
                         "",
                     ];
         } else {
             return is_positive
-                ? this._pos_fg_color
+                ? model._pos_fg_color
                 : is_negative
-                  ? this._neg_fg_color
+                  ? model._neg_fg_color
                   : [
                         "",
-                        this._plugin_background[0],
-                        this._plugin_background[1],
-                        this._plugin_background[2],
+                        model._plugin_background[0],
+                        model._plugin_background[1],
+                        model._plugin_background[2],
                         "",
                         "",
                         "",
@@ -160,7 +160,7 @@ export function cell_style_numeric(
         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 source = model._plugin_background as [number, number, number];
             const foreground = infer_foreground_from_background(
                 rgbaToRgb([bg_tuple[1], bg_tuple[2], bg_tuple[3], 1], source),
             );
@@ -173,13 +173,12 @@ export function cell_style_numeric(
     } 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;
-        }
+        td.style.setProperty("--psp-label-bar-color", gradhex);
+        td.style.setProperty("--psp-label-bar-bg", hex);
+    } else if (plugin?.number_fg_mode === "label-bar") {
+        td.style.color = "";
+        td.style.setProperty("--psp-label-bar-color", gradhex);
+        td.style.setProperty("--psp-label-bar-bg", hex);
     } 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

@@ -18,7 +18,7 @@ import type { DatagridModel } from "../../types.js";
 import { RegularTableElement } from "regular-table";
 
 export function cell_style_row_header(
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTableElement,
     td: HTMLElement,
     metadata: CellMetadataRowHeader,
@@ -28,7 +28,7 @@ export function cell_style_row_header(
         metadata.value !== null &&
         metadata.value?.toString()?.trim().length > 0;
     const is_leaf =
-        (metadata.row_header_x ?? 0) >= this._config.group_by.length;
+        (metadata.row_header_x ?? 0) >= model._config.group_by.length;
     const next = regularTable.getMeta({
         dx: 0,
         dy: (metadata.y ?? 0) - (metadata.y0 ?? 0) + 1,

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

@@ -10,10 +10,13 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import chroma from "chroma-js";
 import {
-    rgbaToRgb,
+    hslToRgb,
     infer_foreground_from_background,
+    parseColor,
+    rgbaToRgb,
+    rgbToHex,
+    rgbToHsl,
 } from "../../color_utils.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
@@ -28,17 +31,17 @@ interface PluginWithColor extends Omit<ColumnConfig, "color"> {
 }
 
 export function cell_style_string(
-    this: DatagridModel,
+    model: DatagridModel,
     plugin: PluginWithColor | undefined,
     td: HTMLElement,
     metadata: CellMetaWithExtras,
 ): void {
-    const column_name = metadata.column_header?.[this._config.split_by.length];
+    const column_name = metadata.column_header?.[model._config.split_by.length];
     const colorRecord: ColorRecord = (() => {
         if (plugin?.color !== undefined) {
             return plugin.color;
         } else {
-            return this._color;
+            return model._color;
         }
     })();
 
@@ -60,7 +63,7 @@ export function cell_style_string(
         plugin?.string_color_mode === "background" &&
         metadata.user !== null
     ) {
-        const source = this._plugin_background as [number, number, number];
+        const source = model._plugin_background as [number, number, number];
         const foreground = infer_foreground_from_background(
             rgbaToRgb([r, g, b, 1], source),
         );
@@ -71,25 +74,24 @@ export function cell_style_string(
         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);
+        if (!model._series_color_map.has(column_name)) {
+            model._series_color_map.set(column_name, new Map());
+            model._series_color_seed.set(column_name, 0);
         }
 
-        const series_map = this._series_color_map.get(column_name)!;
+        const series_map = model._series_color_map.get(column_name)!;
         if (metadata.user && !series_map.has(metadata.user)) {
-            const seed = this._series_color_seed.get(column_name) ?? 0;
+            const seed = model._series_color_seed.get(column_name) ?? 0;
             series_map.set(metadata.user, seed);
-            this._series_color_seed.set(column_name, seed + 1);
+            model._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 [h, s, l] = rgbToHsl(parseColor(hex));
+        const rotated = hslToRgb([h + ((color_seed * 150) % 360), s, l]);
+        const [r2, g2, b2] = rotated;
+        const hex2 = rgbToHex(rotated);
+        const source = model._plugin_background as [number, number, number];
         const foreground = infer_foreground_from_background(
             rgbaToRgb([r2, g2, b2, 1], source),
         );

package/src/ts/style_handlers/types.ts

@@ -10,13 +10,11 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-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;
@@ -31,11 +29,3 @@ export interface CollectedHeaderRow {
         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
->;