@perspective-dev/viewer-datagrid 4.0.1 → 4.1.0

package/src/ts/style_handlers/column_header.ts

@@ -0,0 +1,183 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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, 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 function style_selected_column(
+    this: DatagridModel,
+    regularTable: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+    selectedColumn: string | undefined,
+): void {
+    const group_header_trs = Array.from(
+        regularTable.children[0].children[0].children,
+    ) as HTMLTableRowElement[];
+
+    const len = group_header_trs.length;
+    const settings_open = viewer.hasAttribute("settings");
+    if (len <= 1) {
+        group_header_trs[0]?.removeAttribute("id");
+    } else {
+        group_header_trs.forEach((tr, i) => {
+            const offset = settings_open ? 1 : 0;
+            const id =
+                i === len - (offset + 1)
+                    ? "psp-column-titles"
+                    : i === len - offset
+                      ? "psp-column-edit-buttons"
+                      : null;
+            id ? tr.setAttribute("id", id) : tr.removeAttribute("id");
+        });
+    }
+
+    viewer.classList.toggle("psp-menu-open", !!selectedColumn);
+    if (settings_open && len >= 2) {
+        const titles = Array.from(
+            group_header_trs[len - 2].children,
+        ) as HTMLElement[];
+        const editBtns = Array.from(
+            group_header_trs[len - 1].children,
+        ) as HTMLElement[];
+        if (titles && editBtns) {
+            group_header_trs.slice(0, len - 2).forEach((tr) => {
+                Array.from(tr.children).forEach((th) => {
+                    th.classList.toggle("psp-menu-open", false);
+                });
+            });
+
+            for (let i = 0; i < titles.length; i++) {
+                const title = titles[i];
+                const editBtn = editBtns[i];
+
+                const open = title.textContent === selectedColumn;
+                title.classList.toggle("psp-menu-open", open);
+                editBtn.classList.toggle("psp-menu-open", open);
+                if (this._config.columns.length > 1) {
+                    for (const r of regularTable.querySelectorAll("td")) {
+                        const meta = regularTable.getMeta(r);
+                        if (!meta?.column_header) continue;
+                        const isOpen =
+                            meta.column_header[
+                                meta.column_header.length - 2
+                            ] === selectedColumn;
+                        r.classList.toggle("psp-menu-open", isOpen);
+                    }
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Style a single column header row.
+ */
+export function styleColumnHeaderRow(
+    this: DatagridModel,
+    headerRow: CollectedHeaderRow,
+    regularTable: RegularTableElement,
+    is_menu_row: boolean,
+): void {
+    const header_depth = this._config.group_by.length;
+    const selectedColumn = this._column_settings_selected_column;
+
+    for (const { element: td, metadata } of headerRow.cells) {
+        if (!metadata) continue;
+
+        const column_name =
+            metadata.column_header?.[this._config.split_by.length];
+        const sort = this._config.sort.find((x) => x[0] === column_name);
+        let needs_border = metadata.row_header_x === header_depth;
+        const is_corner = typeof metadata.x === "undefined";
+        needs_border =
+            needs_border ||
+            (metadata.x !== undefined &&
+                (metadata.x + 1) % this._config.columns.length === 0);
+
+        td.classList.toggle("psp-header-border", needs_border);
+        td.classList.toggle("psp-header-group", false);
+        td.classList.toggle("psp-header-leaf", true);
+        td.classList.toggle("psp-is-top", false);
+        td.classList.toggle("psp-header-corner", is_corner);
+        td.classList.toggle(
+            "psp-header-sort-asc",
+            !is_menu_row && !!sort && sort[1] === "asc",
+        );
+        td.classList.toggle(
+            "psp-header-sort-desc",
+            !is_menu_row && !!sort && sort[1] === "desc",
+        );
+        td.classList.toggle(
+            "psp-header-sort-col-asc",
+            !is_menu_row && !!sort && sort[1] === "col asc",
+        );
+        td.classList.toggle(
+            "psp-header-sort-col-desc",
+            !is_menu_row && !!sort && sort[1] === "col desc",
+        );
+        td.classList.toggle(
+            "psp-header-sort-abs-asc",
+            !is_menu_row && !!sort && sort[1] === "asc abs",
+        );
+        td.classList.toggle(
+            "psp-header-sort-abs-desc",
+            !is_menu_row && !!sort && sort[1] === "desc abs",
+        );
+        td.classList.toggle(
+            "psp-header-sort-abs-col-asc",
+            !is_menu_row && !!sort && sort[1] === "col asc abs",
+        );
+        td.classList.toggle(
+            "psp-header-sort-abs-col-desc",
+            !is_menu_row && !!sort && sort[1] === "col desc abs",
+        );
+
+        const type = this.get_psp_type(metadata);
+        const is_numeric = type === "integer" || type === "float";
+        const is_string = type === "string";
+        const is_date = type === "date";
+        const is_datetime = type === "datetime";
+
+        td.classList.toggle("psp-align-right", is_numeric);
+        td.classList.toggle("psp-align-left", !is_numeric);
+        td.classList.toggle(
+            "psp-menu-enabled",
+            (is_string || is_numeric || is_date || is_datetime) &&
+                !is_corner &&
+                metadata.column_header_y === this._config.split_by.length + 1,
+        );
+        td.classList.toggle(
+            "psp-sort-enabled",
+            (is_string || is_numeric || is_date || is_datetime) &&
+                !is_corner &&
+                metadata.column_header_y === this._config.split_by.length,
+        );
+        td.classList.toggle(
+            "psp-is-width-override",
+            regularTable.saveColumnSizes()[metadata.size_key!] !== undefined,
+        );
+
+        // Apply menu-open for selected column
+        if (this._config.columns.length > 1 && selectedColumn) {
+            const isOpen =
+                metadata.column_header?.[metadata.column_header.length - 2] ===
+                selectedColumn;
+            td.classList.toggle("psp-menu-open", isOpen);
+        }
+    }
+}

package/src/ts/style_handlers/consolidated.ts

@@ -0,0 +1,223 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { ColumnType } from "@perspective-dev/client";
+import { PRIVATE_PLUGIN_SYMBOL } from "../model/index.js";
+import type {
+    DatagridModel,
+    PerspectiveViewerElement,
+    ColumnsConfig,
+    DatagridPluginElement,
+    SelectedPosition,
+} from "../types.js";
+
+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";
+
+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>;
+}
+
+// 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;
+}
+
+/**
+ * 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 function createConsolidatedStyleListener(
+    datagrid: DatagridPluginElement,
+    selectedRowsMap: LocalSelectedRowsMap,
+    selectedPositionMap: LocalSelectedPositionMap,
+): (
+    this: DatagridModel,
+    regularTable: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+) => void {
+    return function consolidatedStyleListener(
+        this: DatagridModel,
+        regularTable: RegularTableElement,
+        viewer: PerspectiveViewerElement,
+    ): 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);
+
+        // Toggle edit mode class on datagrid
+        datagrid.classList.toggle("edit-mode-allowed", isEditableAllowed);
+        const bodyCells: CollectedCell[] = [];
+        const groupHeaderRows: CollectedHeaderRow[] = [];
+        const tbody = regularTable.children[0]?.children[1];
+        if (tbody) {
+            for (const tr of tbody.children) {
+                for (const cell of tr.children) {
+                    const metadata = regularTable.getMeta(cell) as
+                        | CellMetaExtended
+                        | undefined;
+
+                    if (metadata) {
+                        const isHeader = cell.tagName === "TH";
+                        bodyCells.push({
+                            element: cell as HTMLElement,
+                            metadata,
+                            isHeader,
+                        });
+                    }
+                }
+            }
+        }
+
+        // Collect header rows (thead)
+        const thead = regularTable.children[0]?.children[0];
+        if (thead) {
+            for (const tr of thead.children) {
+                const rowData: CollectedHeaderRow = {
+                    row: tr as HTMLTableRowElement,
+                    cells: [],
+                };
+
+                for (const cell of tr.children) {
+                    const metadata = regularTable.getMeta(cell) as
+                        | CellMetadata
+                        | undefined;
+
+                    rowData.cells.push({
+                        element: cell as HTMLTableCellElement,
+                        metadata,
+                    });
+                }
+                groupHeaderRows.push(rowData);
+            }
+        }
+
+        this._applyBodyCellStyles(
+            bodyCells,
+            plugins,
+            isSettingsOpen,
+            isSelectable,
+            isEditable,
+            regularTable,
+            selectedRowsMap,
+            selectedPositionMap,
+            viewer,
+        );
+
+        this._applyGroupHeaderStyles(groupHeaderRows, regularTable);
+        this._applyColumnHeaderStyles(groupHeaderRows, regularTable, viewer);
+        this._applyFocusStyle(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

@@ -0,0 +1,94 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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, PerspectiveViewerElement } from "../types.js";
+
+import { CollectedHeaderRow } from "./types.js";
+
+/**
+ * Apply styles to column header rows.
+ */
+export function applyColumnHeaderStyles(
+    this: DatagridModel,
+    headerRows: CollectedHeaderRow[],
+    regularTable: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+): void {
+    if (headerRows.length === 0) return;
+
+    // Style selected column for settings panel
+    const selectedColumn = this._column_settings_selected_column;
+    const len = headerRows.length;
+    const settings_open = viewer.hasAttribute("settings");
+
+    // Set row IDs
+    if (len <= 1) {
+        headerRows[0]?.row.removeAttribute("id");
+    } else {
+        headerRows.forEach(({ row }, i) => {
+            const offset = settings_open ? 1 : 0;
+            const id =
+                i === len - (offset + 1)
+                    ? "psp-column-titles"
+                    : i === len - offset
+                      ? "psp-column-edit-buttons"
+                      : null;
+            id ? row.setAttribute("id", id) : row.removeAttribute("id");
+        });
+    }
+
+    viewer.classList.toggle("psp-menu-open", !!selectedColumn);
+
+    // Style column titles and edit buttons when settings open
+    if (settings_open && len >= 2) {
+        const titlesRow = headerRows[len - 2];
+        const editBtnsRow = headerRows[len - 1];
+
+        if (titlesRow && editBtnsRow) {
+            // Clear menu-open from other rows
+            headerRows.slice(0, len - 2).forEach(({ cells }) => {
+                cells.forEach(({ element }) => {
+                    element.classList.toggle("psp-menu-open", false);
+                });
+            });
+
+            for (let i = 0; i < titlesRow.cells.length; i++) {
+                const title = titlesRow.cells[i]?.element;
+                const editBtn = editBtnsRow.cells[i]?.element;
+                if (!title || !editBtn) continue;
+
+                const open = title.textContent === selectedColumn;
+                title.classList.toggle("psp-menu-open", open);
+                editBtn.classList.toggle("psp-menu-open", open);
+            }
+        }
+    }
+
+    // Style the actual column header rows
+    const colHeadersIndex = this._config.split_by.length;
+    if (colHeadersIndex < headerRows.length) {
+        const colHeaders = headerRows[colHeadersIndex];
+        if (colHeaders) {
+            this._styleColumnHeaderRow(colHeaders, regularTable, false);
+        }
+    }
+
+    const menuHeadersIndex = this._config.split_by.length + 1;
+    if (menuHeadersIndex < headerRows.length) {
+        const menuHeaders = headerRows[menuHeadersIndex];
+        if (menuHeaders) {
+            this._styleColumnHeaderRow(menuHeaders, regularTable, true);
+        }
+    }
+}

package/src/ts/style_handlers/focus.ts

@@ -0,0 +1,106 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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, SelectedPosition } from "../types.js";
+
+import {
+    CollectedCell,
+    LocalSelectedPositionMap,
+    CellMetaExtended,
+} from "./types.js";
+
+/**
+ * Apply focus style to the selected cell.
+ * Optimized to use collected cells instead of querySelectorAll.
+ */
+export function applyFocusStyle(
+    this: DatagridModel,
+    cells: CollectedCell[],
+    regularTable: RegularTableElement,
+    selectedPositionMap: LocalSelectedPositionMap,
+): void {
+    const selected_position = selectedPositionMap.get(regularTable);
+    const host = regularTable.getRootNode() as Document;
+
+    if (selected_position) {
+        for (const { element: td, metadata } of cells) {
+            if (
+                metadata.x === selected_position.x &&
+                metadata.y === selected_position.y
+            ) {
+                if (host.activeElement !== td) {
+                    td.focus({ preventScroll: true });
+                }
+                return;
+            }
+        }
+
+        // If we didn't find the cell to focus, blur current
+        if (
+            document.activeElement !== document.body &&
+            regularTable.contains(host.activeElement)
+        ) {
+            (host.activeElement as HTMLElement).blur();
+        }
+    }
+}
+
+/**
+ * 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 function focusSelectedCell(
+    regularTable: RegularTableElement,
+    selectedPositionMap: Map<RegularTableElement, SelectedPosition>,
+): boolean {
+    const selected_position = selectedPositionMap.get(regularTable);
+    if (!selected_position) {
+        return false;
+    }
+
+    const host = regularTable.getRootNode() as Document;
+    const tbody = regularTable.children[0]?.children[1];
+
+    if (tbody) {
+        for (const tr of tbody.children) {
+            for (const cell of tr.children) {
+                const metadata = regularTable.getMeta(cell) as
+                    | CellMetaExtended
+                    | undefined;
+                if (
+                    metadata &&
+                    metadata.x === selected_position.x &&
+                    metadata.y === selected_position.y
+                ) {
+                    if (host.activeElement !== cell) {
+                        (cell as HTMLElement).focus({ preventScroll: true });
+                    }
+                    return true;
+                }
+            }
+        }
+    }
+
+    // If we didn't find the cell to focus, blur current
+    if (
+        document.activeElement !== document.body &&
+        regularTable.contains(host.activeElement)
+    ) {
+        (host.activeElement as HTMLElement).blur();
+    }
+
+    return false;
+}