@lavalogic/scoria 0.20.0 → 0.21.0

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1,7 +1,7 @@
 import { browser, dev } from '$app/environment';
-import { asyncAll, asyncForEach, asyncMap, asyncSleep, devCatch, getCanvasContext, } from '../../../../Helpers/Helpers.svelte.js';
+import { asyncAll, asyncForEach, asyncMap, devCatch, getCanvasContext, } from '../../../../Helpers/Helpers.svelte.js';
 import { tick, untrack } from 'svelte';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { SvelteMap } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
 import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
 import { CheckboxDef } from '../Columns/Definitions/Accessors/CheckboxDef.svelte.js';
@@ -69,16 +69,17 @@ export class TableContext {
         // this.dataRepo.forceRefresh = this.forceVisibilityUpdate;
         $effect(() => {
             void this.currentPageData;
-            void this.selectedItems;
-            void this.paginationRepo?.paginationState.pageIndex;
-            untrack(async () => {
-                await this.currentPageData;
+            // void this.selectedItems;
+            untrack(() => {
                 if (this.paginationRepo?.paginationState.pageIndex != undefined) {
-                    await this.updateSelectedItems();
-                    this.resetHighlightedRows();
-                    this.recalculateAllSelectedInCurrentPage();
+                    this.updateSelectedItems()
+                        .then(() => {
+                        this.resetHighlightedRows();
+                    })
+                        .catch(devCatch);
+                    // this.recalculateAllSelectedInCurrentPage();
                 }
-            }).catch(devCatch);
+            });
         });
         let filteredIndicesAbortController = null;
         $effect(() => {
@@ -100,7 +101,7 @@ export class TableContext {
                     });
                 }
                 else {
-                    await asyncSleep(300);
+                    // await asyncSleep(300);
                     const filtered = [];
                     for (let index = 0; index < data.length; ++index) {
                         if (currentController.signal.aborted) {
@@ -134,7 +135,182 @@ export class TableContext {
                     }
                     this._filteredIndices = filtered;
                 }
-            })().catch(devCatch);
+            })().catch((e) => {
+                devCatch(e);
+            });
+        });
+        let lastIncrement = Number.MIN_SAFE_INTEGER;
+        $effect(() => {
+            void this.dataRepo.data.length;
+            void this.selectedItems;
+            void this.paginationRepo?.pageStartIndex;
+            const invalidValues = this._invalidValues;
+            const allSelectedInCurrentPage = [...this.selectedItems.keys()];
+            const currentIncrement = ++lastIncrement;
+            void this.allSelectedInCurrentPage;
+            const isUpToDate = lastIncrement === currentIncrement;
+            if (isUpToDate) {
+                this.hasInvalidSelectedItems = allSelectedInCurrentPage.some((key) => {
+                    return invalidValues.has(key);
+                });
+            }
+            else {
+                if (dev) {
+                    console.log('skipping recalculation due to stale data');
+                }
+            }
+        });
+        let latest_pageColData = 0;
+        $effect(() => {
+            const current = (latest_pageColData = latest_pageColData + 1);
+            if (!this.focusStart || !this.focusEnd) {
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                this._focusedRowIndices = new Set();
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                this._focusedColumnIds = new Set();
+                return;
+            }
+            const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
+            const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
+            const model = this.sortedRowModel;
+            if (current === latest_pageColData) {
+                const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
+                const endRowIndex = model.rows.findIndex((row) => row.visibleIndex === endRowIndexId);
+                if (startRowIndex == -1 || endRowIndex == -1) {
+                    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                    this._focusedRowIndices = new Set();
+                    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                    this._focusedColumnIds = new Set();
+                    return;
+                }
+                const minRowIndex = Math.min(startRowIndex, endRowIndex);
+                const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+                const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
+                const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                const affectedColumns = new Set();
+                const visibility = this.columnVisibility;
+                this.columnDefs
+                    .filter((it) => 'index' in it &&
+                    visibility[it.id] !== false &&
+                    // TODO handle pinning behaviour
+                    // !columnPinning.left?.includes(it.id) &&
+                    // !columnPinning.right?.includes(it.id) &&
+                    // (!('columnType' in it) || it.columnType === undefined || it.columnType === 'Accessor') &&
+                    it.index >= minColumnIndex &&
+                    it.index <= maxColumnIndex)
+                    .forEach((it) => affectedColumns.add(it.id));
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                const indices = new Set();
+                for (let i = minRowIndex; i <= maxRowIndex; i++) {
+                    indices.add(parseInt(model.rows[i].id));
+                }
+                this._focusedRowIndices = indices;
+                this._focusedColumnIds = affectedColumns;
+            }
+        });
+        let latest_paginationRowModel = 0;
+        $effect(() => {
+            const current = (latest_paginationRowModel = latest_paginationRowModel + 1);
+            const rows = this.rowsPromise;
+            if (current === latest_paginationRowModel) {
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                const rowsById = $derived(new Map(rows.map((it, index) => [index.toString(), it])));
+                this._paginationRowModel = {
+                    rows,
+                    get rowsById() {
+                        return rowsById;
+                    }, //FIXME should this be by sorted id or by original id?
+                };
+            }
+        });
+        let latest_sortedRowModel = 0;
+        $effect(() => {
+            void this.originalRowIndices;
+            void this.sortedData;
+            // if (!$effect.tracking()) {
+            // 	throw new Error(`filtered indices are not in a tracking context`);
+            // }
+            const current = (latest_sortedRowModel = latest_sortedRowModel + 1);
+            const sd = this.sortedData;
+            const ori = this.originalRowIndices;
+            if (current !== latest_sortedRowModel || !ori.size) {
+                return;
+            }
+            Promise.resolve(asyncMap(sd, (item, index) => {
+                const rawKey = this._cachedKey(item);
+                const finish = (key) => {
+                    const originalIndex = ori.get(key);
+                    const unsortedIndex = originalIndex ?? index;
+                    if (current !== latest_sortedRowModel) {
+                        throw new Error(`stale data`);
+                    }
+                    if (originalIndex == null) {
+                        throw new Error(`Sorted Data not found in Original Row Indices: original index ${originalIndex}, index ${index}`);
+                    }
+                    return this.createRow(item, index, unsortedIndex);
+                };
+                if (rawKey instanceof Promise) {
+                    return rawKey.then(finish);
+                }
+                return finish(rawKey);
+            }))
+                .then((rows) => {
+                if (current !== latest_sortedRowModel) {
+                    return;
+                }
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                const rowsById = new Map(rows.map((it, index) => [index.toString(), it])); //FIXME should this be by sorted id or by original id?
+                this._sortedRowModel = {
+                    get rows() {
+                        return rows;
+                    },
+                    get rowsById() {
+                        return rowsById;
+                    },
+                };
+            })
+                .catch(devCatch);
+        });
+        let latest_originalRowIndices = 0;
+        $effect(() => {
+            const dataRepo = this.dataRepo;
+            const current = (latest_originalRowIndices = latest_originalRowIndices + 1);
+            Promise.resolve(asyncMap(dataRepo.data, (item, index) => {
+                const raw = this._cachedKey(item);
+                if (raw instanceof Promise) {
+                    return raw.then((key) => [key, index]);
+                }
+                return [raw, index];
+            }))
+                .then((mapped) => {
+                if (current === latest_originalRowIndices) {
+                    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                    this._originalRowIndices = new Map(mapped);
+                }
+            })
+                .catch(devCatch);
+        });
+        $effect(() => {
+            if (this.highlightedItems.size === 0) {
+                this._allHighlighted = false;
+                return;
+            }
+            const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+            const pageEndIndexExclusive = this.paginationRepo
+                ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
+                : this.sortedData.length;
+            const allHighlightedResult = this._areAllHighlighted(pageStartIndex, pageEndIndexExclusive);
+            if (allHighlightedResult instanceof Promise) {
+                allHighlightedResult
+                    .then((flag) => {
+                    this._allHighlighted = flag;
+                })
+                    .catch(devCatch);
+            }
+            else {
+                this._allHighlighted = allHighlightedResult;
+            }
         });
         if (defaultColumnDefs.remoteFilters) {
             this.remoteFilters = defaultColumnDefs.remoteFilters;
@@ -251,11 +427,23 @@ export class TableContext {
         this._remoteFilters = v;
     }
     _showSelectedOnly = $state(false);
+    _pageBeforeSelectedOnly = undefined;
     get showSelectedOnly() {
         return this._showSelectedOnly;
     }
     set showSelectedOnly(v) {
+        if (v === this._showSelectedOnly) {
+            return;
+        }
         this._showSelectedOnly = v;
+        if (v) {
+            this._pageBeforeSelectedOnly = (this.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
+            this.paginationRepo?.setPage(1);
+        }
+        else if (this._pageBeforeSelectedOnly != null) {
+            this.paginationRepo?.setPage(this._pageBeforeSelectedOnly);
+            this._pageBeforeSelectedOnly = undefined;
+        }
     }
     dateFilter = $derived(this.paginationRepo?.dateFilter);
     numberFilter = $derived(this.paginationRepo?.numberFilter);
@@ -298,52 +486,20 @@ export class TableContext {
     set selectedPreset(v) {
         this._selectedPreset = v;
     }
-    _pageColData = $derived.by(async () => {
-        if (!this.focusStart || !this.focusEnd) {
-            return { indices: new SvelteSet(), affectedColumns: new SvelteSet() };
-        }
-        const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
-        const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
-        const model = await this.sortedRowModel;
-        const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
-        const endRowIndex = model.rows.findIndex((row) => row.visibleIndex === endRowIndexId);
-        if (startRowIndex == -1 || endRowIndex == -1) {
-            return { indices: new SvelteSet(), affectedColumns: new SvelteSet() };
-        }
-        const minRowIndex = Math.min(startRowIndex, endRowIndex);
-        const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-        const minColumnIndex = Math.min(startColumnIndex, endColumnIndex);
-        const maxColumnIndex = Math.max(startColumnIndex, endColumnIndex);
-        const affectedColumns = new SvelteSet();
-        const visibility = this.columnVisibility;
-        this.columnDefs
-            .filter((it) => 'index' in it &&
-            visibility[it.id] !== false &&
-            // TODO handle pinning behaviour
-            // !columnPinning.left?.includes(it.id) &&
-            // !columnPinning.right?.includes(it.id) &&
-            // (!('columnType' in it) || it.columnType === undefined || it.columnType === 'Accessor') &&
-            it.index >= minColumnIndex &&
-            it.index <= maxColumnIndex)
-            .forEach((it) => affectedColumns.add(it.id));
-        const indices = new SvelteSet();
-        for (let i = minRowIndex; i <= maxRowIndex; i++) {
-            indices.add(parseInt(model.rows[i].id));
-        }
-        return { indices, affectedColumns };
-    });
-    focusedRowIndices = $derived.by(async () => {
-        void this._pageColData;
-        return (await this._pageColData).indices;
-    });
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _focusedRowIndices = $state(new Set());
+    get focusedRowIndices() {
+        return this._focusedRowIndices;
+    }
     _highlightedItems = $state(new SvelteMap());
     get highlightedItems() {
         return this._highlightedItems;
     }
-    focusedColumnIds = $derived.by(async () => {
-        void this._pageColData;
-        return (await this._pageColData).affectedColumns;
-    });
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _focusedColumnIds = $state(new Set());
+    get focusedColumnIds() {
+        return this._focusedColumnIds;
+    }
     _isMousingDown = $state(false);
     get isMousingDown() {
         return this._isMousingDown;
@@ -442,64 +598,113 @@ export class TableContext {
     set openModalCoordinates(v) {
         this._openModalCoordinates = v;
     }
-    _allSelectedInCurrentPage = $derived.by(async () => {
+    _allSelectedAsync = $state(false);
+    _allSelectedInCurrentPage = $derived.by(() => {
+        void this.columnDefs;
         if (this.selectedItems.size === 0) {
-            return Promise.resolve(false);
+            return false;
         }
-        void this.paginationRepo?.pageStartIndex;
-        void this.columnDefs;
-        const sortedData = await this.sortedData;
+        const sortedData = this.sortedData;
         const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
         const pageEndIndexExclusive = this.paginationRepo
             ? Math.min(this.paginationRepo.pageEndIndexExclusive, sortedData.length)
             : sortedData.length;
         const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
-        return await this.allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod);
+        const result = this.allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod);
+        if (result instanceof Promise) {
+            result
+                .then((flag) => {
+                this._allSelectedAsync = flag;
+            })
+                .catch(devCatch);
+            return this._allSelectedAsync;
+        }
+        return result;
     });
     get allSelectedInCurrentPage() {
         return this._allSelectedInCurrentPage;
     }
-    async allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod) {
-        const sortedData = await this.sortedData;
+    allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod) {
+        const sortedData = this.sortedData;
+        const emptyPromise = new Promise(() => { });
         if (selectableMethod) {
-            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                const item = sortedData[index];
-                if ((await selectableMethod(item, index)) &&
-                    !this.selectedItems.has(await this.selectionExtractor(item))) {
-                    return Promise.resolve(false);
+            const pending = [];
+            for (let i = pageStartIndex; i < pageEndIndexExclusive; i++) {
+                const item = sortedData[i];
+                const relIdx = i - pageStartIndex;
+                const raw = this._cachedKey(item);
+                const checkUnselected = (key) => {
+                    const selectable = selectableMethod(item, relIdx);
+                    if (selectable instanceof Promise) {
+                        return selectable.then((s) => s && !this.selectedItems.has(key));
+                    }
+                    return selectable && !this.selectedItems.has(key);
+                };
+                const r = raw instanceof Promise ? raw.then(checkUnselected) : checkUnselected(raw);
+                if (r === true) {
+                    return false;
+                }
+                if (r instanceof Promise) {
+                    pending.push(r);
                 }
             }
+            if (pending.length === 0) {
+                return true;
+            }
+            return Promise.race([
+                Promise.race(pending.map(async (p) => ((await p) ? false : emptyPromise))),
+                Promise.all(pending).then((results) => {
+                    return !results.some(Boolean);
+                }),
+            ]);
         }
         else {
-            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                const item = sortedData[index];
-                if (!this.selectedItems.has(await this.selectionExtractor(item))) {
-                    return Promise.resolve(false);
+            const pending = [];
+            for (let i = pageStartIndex; i < pageEndIndexExclusive; i++) {
+                const raw = this._cachedKey(sortedData[i]);
+                if (raw instanceof Promise) {
+                    pending.push(raw.then((key) => !this.selectedItems.has(key)));
+                }
+                else if (!this.selectedItems.has(raw)) {
+                    return false;
                 }
             }
+            if (pending.length === 0) {
+                return true;
+            }
+            return Promise.race([
+                Promise.race(pending.map(async (p) => ((await p) ? false : emptyPromise))),
+                Promise.all(pending).then((results) => !results.some(Boolean)),
+            ]);
         }
-        return Promise.resolve(true);
     }
-    async _areAllHighlighted(pageStartIndex, pageEndIndexExclusive) {
-        const sortedData = await this.sortedData;
+    _areAllHighlighted(pageStartIndex, pageEndIndexExclusive) {
+        const sortedData = this.sortedData;
         for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
             const item = sortedData[index];
-            if (!this.highlightedItems.has(await this.selectionExtractor(item))) {
-                return Promise.resolve(false);
+            const raw = this._cachedKey(item);
+            if (raw instanceof Promise) {
+                return raw.then(async (key) => {
+                    if (!this.highlightedItems.has(key)) {
+                        return false;
+                    }
+                    for (let j = index + 1; j < pageEndIndexExclusive; j++) {
+                        const r = this._cachedKey(sortedData[j]);
+                        const k = r instanceof Promise ? await r : r;
+                        if (!this.highlightedItems.has(k)) {
+                            return false;
+                        }
+                    }
+                    return true;
+                });
+            }
+            if (!this.highlightedItems.has(raw)) {
+                return false;
             }
         }
-        return Promise.resolve(true);
+        return true;
     }
-    _allHighlighted = $derived.by(async () => {
-        if (this.highlightedItems.size === 0) {
-            return Promise.resolve(false);
-        }
-        const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
-        const pageEndIndexExclusive = this.paginationRepo
-            ? Math.min(this.paginationRepo.pageEndIndexExclusive, (await this.sortedData).length)
-            : (await this.sortedData).length;
-        return await this._areAllHighlighted(pageStartIndex, pageEndIndexExclusive);
-    });
+    _allHighlighted = $state(false);
     get allHighlighted() {
         return this._allHighlighted;
     }
@@ -527,7 +732,8 @@ export class TableContext {
         this._hasInvalidSelectedItems = v;
     }
     // FIXME decide
-    columnDefsById = $derived(new SvelteMap(this.columnDefs.map((it) => [it.id, it])));
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    columnDefsById = $derived(new Map(this.columnDefs.map((it) => [it.id, it])));
     getSortingFn = (id, desc) => {
         if (this.dataRepo.data.length == 0) {
             return undefined;
@@ -560,11 +766,14 @@ export class TableContext {
     get filteredIndices() {
         return this._filteredIndices;
     }
-    filteredData = $derived.by(async () => {
+    filteredData = $derived.by(() => {
         void this.dataRepo.data;
         void this.filteredIndices;
         void this.showSelectedOnly;
-        void this.selectedItems.size;
+        // selectedItems is intentionally NOT read here unconditionally — doing so would
+        // invalidate filteredData → sortedData → currentPageData → entire row model on
+        // every single toggle. The selectedItems.values() reads inside the showSelectedOnly
+        // branches below are sufficient to track reactivity when it actually matters.
         if (this.paginationRepo?.paginationType == PaginationType.Local) {
             const data = this.showSelectedOnly
                 ? // FIXME this will show the selected items by order of insertion to the selectedItems map.
@@ -580,7 +789,7 @@ export class TableContext {
         return this.showSelectedOnly ? [...this.selectedItems.values()] : this.dataRepo.data;
     });
     sortedDataAbortController = null;
-    sortedData = $derived.by(async () => {
+    sortedData = $derived.by(() => {
         // if (!$effect.tracking()) {
         // 	throw new Error(`sorted data is not in a tracking context`);
         // }
@@ -592,7 +801,7 @@ export class TableContext {
             console.log('sorted data');
         }
         if (this.paginationRepo?.paginationType == PaginationType.Local) {
-            const data = await this.filteredData;
+            const data = this.filteredData;
             if (currentController.signal.aborted) {
                 return [];
             }
@@ -629,83 +838,51 @@ export class TableContext {
         }
         return this.filteredData;
     });
-    sortedRowModel = $derived.by(async () => {
-        void this.originalRowIndices;
-        void this.sortedData;
-        // if (!$effect.tracking()) {
-        // 	throw new Error(`filtered indices are not in a tracking context`);
-        // }
-        const sd = await this.sortedData;
-        const ori = await this.originalRowIndices;
-        const rows = await asyncMap(sd, async (item, index) => {
-            const originalIndex = ori.get(await this.selectionExtractor(item));
-            const unsortedIndex = originalIndex ?? index;
-            if (originalIndex == null) {
-                throw new Error(`Sorted Data not found in Original Row Indices: original index ${originalIndex}, index ${index}`);
-            }
-            return this.createRow(item, index, unsortedIndex);
-        });
-        const rowsById = $derived(new SvelteMap(rows.map((it, index) => [index.toString(), it]))); //FIXME should this be by sorted id or by original id?
-        return {
-            get rows() {
-                return rows;
-            },
-            get rowsById() {
-                return rowsById;
-            },
-        };
-    });
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _sortedRowModel = $state({ rows: [], rowsById: new Map() });
+    get sortedRowModel() {
+        return this._sortedRowModel;
+    }
     CurrentPageDataAbortController = null;
-    currentPageData = $derived.by(async () => {
-        // void this.originalRowIndices;
+    currentPageData = $derived.by(() => {
         void this.sortedData;
-        void this.dataRepo.pageStartIndex;
-        void this.dataRepo.pageEndIndexExclusive;
         // if (!$effect.tracking()) {
         // 	throw new Error(`Current Page Data is not in a tracking context`);
         // }
         this.CurrentPageDataAbortController?.abort();
         const currentController = (this.CurrentPageDataAbortController = new AbortController());
-        const sd = await this.sortedData;
+        const sd = this.sortedData;
         if (currentController.signal.aborted) {
             return [];
         }
-        if (this.dataRepo.paginationType != PaginationType.Local) {
+        // When showing selected only, bypass pagination and return all filtered rows at once.
+        // Only track page indices when we will actually paginate, to avoid unnecessary re-runs
+        // while the user is in show-selected-only mode.
+        if (this.dataRepo.paginationType != PaginationType.Local || this.showSelectedOnly) {
             return sd;
         }
+        void this.dataRepo.pageStartIndex;
+        void this.dataRepo.pageEndIndexExclusive;
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (currentController.signal.aborted) {
             return [];
         }
         return sd.slice(this.dataRepo.pageStartIndex, this.dataRepo.pageEndIndexExclusive);
     });
-    // FIXME this is most likely the cuplrit for add pod not working on receipt.
-    // Tracking changes in a promise of a map is a problem
-    // worst case fix: turn it into a map of promises
-    originalRowIndices = $derived.by(async () => {
-        const dataRepo = this.dataRepo;
-        const awaited = await asyncMap(dataRepo.data, async (item, index) => [await this.selectionExtractor(item), index]);
-        return new SvelteMap(awaited);
-    });
-    rowsPromiseAbortController = null;
-    rowsPromise = $derived.by(async () => {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _originalRowIndices = $state(new Map());
+    get originalRowIndices() {
+        return this._originalRowIndices;
+    }
+    rowsPromise = $derived.by(() => {
         // void this.originalRowIndices;
         void this.currentPageData;
         // void this.columnDefsById;
         void this.columnVisibility;
         void this.paginationRepo?.sorting;
         void this.columnPinning;
-        this.rowsPromiseAbortController?.abort();
-        const currentController = (this.rowsPromiseAbortController = new AbortController());
-        const currentPageData = await this.currentPageData;
-        if (currentController.signal.aborted) {
-            return [];
-        }
-        const indices = await this.originalRowIndices;
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (currentController.signal.aborted) {
-            return [];
-        }
+        const currentPageData = this.currentPageData;
+        const indices = this.originalRowIndices;
         return currentPageData.map((item, index) => {
             const unsortedIndex = indices.get(item) ?? index;
             const getValue = $derived.by(() => {
@@ -819,16 +996,68 @@ export class TableContext {
             return row;
         });
     });
-    paginationRowModel = $derived.by(async () => {
-        void this.rowsPromise;
-        const rows = await this.rowsPromise;
-        return {
-            rows,
-            rowsById: new SvelteMap(rows.map((it, index) => [index.toString(), it])), //FIXME should this be by sorted id or by original id?
-        };
+    _paginationRowModel = $state({
+        rows: [],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        rowsById: new Map(),
     });
+    get paginationRowModel() {
+        return this._paginationRowModel;
+    }
     // #endregion
     // #region public methods
+    // Key extraction cache — avoids re-calling selectionExtractor for the same item object.
+    // Only onEditCell explicitly invalidates the cache (when the item is mutated in-place).
+    _keyCache = new WeakMap();
+    _cachedKey(item) {
+        const cached = this._keyCache.get(item);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const raw = this.selectionExtractor(item);
+        if (raw instanceof Promise) {
+            return raw.then((key) => {
+                this._keyCache.set(item, key);
+                return key;
+            });
+        }
+        this._keyCache.set(item, raw);
+        return raw;
+    }
+    // Pending selection changes — buffered and flushed as a single SvelteMap reassignment
+    // to avoid per-toggle reactive cascades.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _pendingSelectionChanges = new Map();
+    _flushScheduled = false;
+    _flushPendingSelectionChanges() {
+        if (this._pendingSelectionChanges.size === 0) {
+            return;
+        }
+        // Mutate in place to preserve SvelteMap's per-key reactive tracking.
+        // Replacing _selectedItems with a cloned map would invalidate every .has()/.get()
+        // subscriber across all visible rows, not just the changed keys.
+        for (const [key, item] of this._pendingSelectionChanges) {
+            if (item === null) {
+                this.selectedItems.delete(key);
+            }
+            else {
+                this.selectedItems.set(key, item);
+            }
+        }
+        this._pendingSelectionChanges.clear();
+        this._flushScheduled = false;
+    }
+    _schedulePendingFlush() {
+        if (this._flushScheduled) {
+            return;
+        }
+        this._flushScheduled = true;
+        tick()
+            .then(() => {
+            this._flushPendingSelectionChanges();
+        })
+            .catch(devCatch);
+    }
     selectionContains = async (item) => {
         void item;
         void this.isSelectable;
@@ -839,174 +1068,226 @@ export class TableContext {
         if (!this.isSelectable) {
             return true;
         }
-        const identity = await this.selectionExtractor(item);
+        const rawIdentity = this._cachedKey(item);
+        const identity = rawIdentity instanceof Promise ? await rawIdentity : rawIdentity;
         const has = this.selectedItems.has(identity);
         return has;
     };
-    addInvalidValue = async (item) => {
-        this.invalidValues.set(await this.selectionExtractor(item), item);
+    addInvalidValue = (item) => {
+        const raw = this._cachedKey(item);
+        if (raw instanceof Promise) {
+            return raw.then((key) => {
+                this.invalidValues.set(key, item);
+            });
+        }
+        this.invalidValues.set(raw, item);
     };
-    removeInvalidValue = async (item) => {
-        this.invalidValues.delete(await this.selectionExtractor(item));
+    removeInvalidValue = (item) => {
+        const raw = this._cachedKey(item);
+        if (raw instanceof Promise) {
+            return raw.then((key) => {
+                this.invalidValues.delete(key);
+            });
+        }
+        this.invalidValues.delete(raw);
     };
     setOpenModalCoordinates = (coordinates) => {
         this.openModalCoordinates = coordinates ? { ...coordinates } : null;
     };
-    toggleHighlightedRow = async (item) => {
-        const key = await this.selectionExtractor(item);
-        if (this.highlightedItems.has(key)) {
-            this.highlightedItems.delete(key);
+    toggleHighlightedRow = (item) => {
+        const raw = this._cachedKey(item);
+        if (raw instanceof Promise) {
+            return raw.then((key) => {
+                if (this.highlightedItems.has(key)) {
+                    this.highlightedItems.delete(key);
+                }
+                else {
+                    this.highlightedItems.set(key, item);
+                }
+            });
+        }
+        if (this.highlightedItems.has(raw)) {
+            this.highlightedItems.delete(raw);
         }
         else {
-            this.highlightedItems.set(key, item);
+            this.highlightedItems.set(raw, item);
         }
     };
     resetHighlightedRows = () => {
         this.highlightedItems.clear();
     };
-    toggleSelected = async (item) => {
-        const key = await this.selectionExtractor(item);
-        if (this.selectedItems.has(key)) {
-            this.selectedItems.delete(key);
-        }
-        else {
-            this.selectedItems.set(key, item);
+    toggleSelected = (item) => {
+        const raw = this._cachedKey(item);
+        if (raw instanceof Promise) {
+            return raw.then((key) => {
+                const pendingValue = this._pendingSelectionChanges.get(key);
+                const isSelected = pendingValue !== undefined ? pendingValue !== null : this.selectedItems.has(key);
+                this._pendingSelectionChanges.set(key, isSelected ? null : item);
+                this._schedulePendingFlush();
+            });
         }
+        const pendingValue = this._pendingSelectionChanges.get(raw);
+        const isSelected = pendingValue !== undefined ? pendingValue !== null : this.selectedItems.has(raw);
+        this._pendingSelectionChanges.set(raw, isSelected ? null : item);
+        this._schedulePendingFlush();
     };
-    setSelected = async (item, selected) => {
-        const key = await this.selectionExtractor(item);
-        if (selected) {
-            this.selectedItems.set(key, item);
-        }
-        else {
-            this.selectedItems.delete(key);
+    setSelected = (item, selected) => {
+        const raw = this._cachedKey(item);
+        if (raw instanceof Promise) {
+            return raw.then((key) => {
+                this._pendingSelectionChanges.set(key, selected ? item : null);
+                this._schedulePendingFlush();
+            });
         }
+        this._pendingSelectionChanges.set(raw, selected ? item : null);
+        this._schedulePendingFlush();
     };
     setSelectionMap = (set) => {
         this._selectedItems = set;
     };
     updateSelectedItems = async () => {
+        if (this.selectedItems.size === 0) {
+            return;
+        }
         const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
-        const sortedData = await this.sortedData;
+        const sortedData = this.sortedData;
         const pageEndIndexExclusive = this.paginationRepo
             ? Math.min(this.paginationRepo.pageEndIndexExclusive, sortedData.length)
             : sortedData.length;
-        const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
-        const updateSelectedItem = async (item) => {
-            const key = await this.selectionExtractor(item);
-            if (this.selectedItems.has(key)) {
-                //replace selected item with newer version of the same identity
-                this.selectedItems.set(key, item);
+        // Build key → item map for the current page (O(page_size) extractions)
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const pageKeyMap = new Map();
+        const pending = [];
+        for (let i = pageStartIndex; i < pageEndIndexExclusive; i++) {
+            const item = sortedData[i];
+            const raw = this._cachedKey(item);
+            if (raw instanceof Promise) {
+                pending.push(raw.then((key) => {
+                    pageKeyMap.set(key, item);
+                }));
             }
-        };
-        if (selectableMethod) {
-            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                const item = sortedData[index];
-                if (await selectableMethod(item, index)) {
-                    await updateSelectedItem(item);
-                }
+            else {
+                pageKeyMap.set(raw, item);
             }
         }
-        else {
-            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                const item = sortedData[index];
-                await updateSelectedItem(item);
-            }
+        if (pending.length > 0) {
+            await Promise.all(pending);
         }
-    };
-    resetSelectedItems = () => {
+        // Update only selected items that appear on this page (O(selected_size))
         for (const key of this.selectedItems.keys()) {
-            this.selectedItems.delete(key);
+            const newItem = pageKeyMap.get(key);
+            if (newItem !== undefined) {
+                this.selectedItems.set(key, newItem);
+            }
         }
-        this.recalculateAllSelectedInCurrentPage();
     };
-    lastIncrement = Number.MIN_SAFE_INTEGER;
-    recalculateAllSelectedInCurrentPage = () => {
-        const invalidValues = this._invalidValues;
-        const allSelectedInCurrentPage = [...this.selectedItems.keys()];
-        const currentIncrement = ++this.lastIncrement;
-        this.allSelectedInCurrentPage
-            .then(() => {
-            if (this.lastIncrement == currentIncrement) {
-                this.hasInvalidSelectedItems = allSelectedInCurrentPage.some((key) => {
-                    return invalidValues.has(key);
-                });
-            }
-            else {
-                if (dev) {
-                    console.log('skipping recalculation due to stale data');
-                }
-            }
-        })
-            .catch(devCatch);
+    resetSelectedItems = () => {
+        this._selectedItems = new SvelteMap();
     };
     selectAllInCurrentPage = async () => {
         void this.paginationRepo?.pageStartIndex;
-        const sortedData = await this.sortedData;
-        if (await this.allSelectedInCurrentPage) {
-            const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
-            const pageEndIndexExclusive = this.paginationRepo
-                ? Math.min(this.paginationRepo.pageEndIndexExclusive, sortedData.length)
-                : sortedData.length;
-            for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                const item = sortedData[index];
-                this.selectedItems.delete(await this.selectionExtractor(item));
+        const sortedData = this.sortedData;
+        const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
+        const pageEndIndexExclusive = this.paginationRepo
+            ? Math.min(this.paginationRepo.pageEndIndexExclusive, sortedData.length)
+            : sortedData.length;
+        // Will be doing one full reassignment to this.selectedItems to avoid svelteMap redraws
+        const cloned = new SvelteMap(this.selectedItems);
+        const pending = [];
+        if (this.allSelectedInCurrentPage) {
+            for (let i = pageStartIndex; i < pageEndIndexExclusive; i++) {
+                const raw = this._cachedKey(sortedData[i]);
+                if (raw instanceof Promise) {
+                    pending.push(raw.then((key) => {
+                        cloned.delete(key);
+                    }));
+                }
+                else {
+                    cloned.delete(raw);
+                }
             }
         }
         else {
-            // this.resetSelectedItems();
-            // const selectedItems = new SvelteSet<number>();
-            const pageStartIndex = this.paginationRepo ? this.paginationRepo.pageStartIndex : 0;
-            const pageEndIndexExclusive = this.paginationRepo
-                ? Math.min(this.paginationRepo.pageEndIndexExclusive, sortedData.length)
-                : sortedData.length;
             const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
             if (selectableMethod) {
-                for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                    const item = sortedData[index];
-                    if (await selectableMethod(item, index)) {
-                        this.selectedItems.set(await this.selectionExtractor(item), item);
+                for (let i = pageStartIndex; i < pageEndIndexExclusive; i++) {
+                    const item = sortedData[i];
+                    const relIdx = i - pageStartIndex;
+                    const s = selectableMethod(item, relIdx);
+                    const doSet = (ok) => {
+                        if (!ok) {
+                            return;
+                        }
+                        const raw = this._cachedKey(item);
+                        if (raw instanceof Promise) {
+                            return raw.then((key) => {
+                                cloned.set(key, item);
+                            });
+                        }
+                        cloned.set(raw, item);
+                    };
+                    const r = s instanceof Promise ? s.then(doSet) : doSet(s);
+                    if (r instanceof Promise) {
+                        pending.push(r);
                     }
                 }
             }
             else {
-                for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-                    const item = sortedData[index];
-                    this.selectedItems.set(await this.selectionExtractor(item), item);
+                for (let i = pageStartIndex; i < pageEndIndexExclusive; i++) {
+                    const item = sortedData[i];
+                    const raw = this._cachedKey(item);
+                    if (raw instanceof Promise) {
+                        pending.push(raw.then((key) => {
+                            cloned.set(key, item);
+                        }));
+                    }
+                    else {
+                        cloned.set(raw, item);
+                    }
                 }
             }
         }
+        if (pending.length > 0) {
+            await Promise.all(pending);
+        }
+        this._selectedItems = cloned;
     };
     onHighlightAll = () => {
-        this.allHighlighted
-            .then((areAllHighlighted) => {
-            if (areAllHighlighted) {
-                this.highlightedItems.clear();
-                return Promise.resolve();
-            }
-            else {
-                return this.currentPageData.then((items) => {
-                    return asyncForEach(items, async (item) => {
-                        this.highlightedItems.set(await this.selectionExtractor(item), item);
+        if (this.allHighlighted) {
+            this.highlightedItems.clear();
+            return Promise.resolve();
+        }
+        else {
+            const items = this.currentPageData;
+            return asyncForEach(items, (item) => {
+                const raw = this._cachedKey(item);
+                if (raw instanceof Promise) {
+                    return raw.then((key) => {
+                        this.highlightedItems.set(key, item);
                     });
-                });
-            }
-        })
-            .catch(devCatch);
+                }
+                this.highlightedItems.set(raw, item);
+                return;
+            });
+        }
     };
     onEditCell = async (item, coords, value) => {
-        const oldKey = await this.selectionExtractor(item);
+        const rawOldKey = this._cachedKey(item);
+        const oldKey = rawOldKey instanceof Promise ? await rawOldKey : rawOldKey;
         const wasSelected = this.selectedItems.has(oldKey);
         if (wasSelected) {
             this.selectedItems.delete(oldKey);
         }
+        // Invalidate cache — _onEditCell may mutate the item's key field in-place
+        this._keyCache.delete(item);
         await this._onEditCell?.(item, coords, value);
         if (wasSelected && this.isSelectable) {
-            const newKey = await this.selectionExtractor(item);
+            const rawNewKey = this._cachedKey(item);
+            const newKey = rawNewKey instanceof Promise ? await rawNewKey : rawNewKey;
             if (newKey) {
                 this.selectedItems.set(newKey, item);
             }
-            this.recalculateAllSelectedInCurrentPage();
+            // this.recalculateAllSelectedInCurrentPage();
         }
     };
     handleTdKeydown = (e) => {
@@ -1031,7 +1312,7 @@ export class TableContext {
                 this.tabBackward();
             }
             else {
-                this.tabForward().catch(devCatch);
+                this.tabForward();
             }
         }
         if (e.target.tagName === 'INPUT' &&
@@ -1058,20 +1339,20 @@ export class TableContext {
                         if (!this.allowCopy) {
                             return;
                         }
-                        await this.focusToTop();
+                        this.focusToTop();
                     }
                     else {
-                        await this.moveToTop();
+                        this.moveToTop();
                     }
                 }
                 else if (e.getModifierState('Shift')) {
                     if (!this.allowCopy) {
                         return;
                     }
-                    await this.moveFocusUp();
+                    this.moveFocusUp();
                 }
                 else {
-                    await this.setFocusUp();
+                    this.setFocusUp();
                 }
                 return;
             }
@@ -1082,20 +1363,20 @@ export class TableContext {
                         if (!this.allowCopy) {
                             return;
                         }
-                        await this.focusToBottom();
+                        this.focusToBottom();
                     }
                     else {
-                        await this.moveToBottom();
+                        this.moveToBottom();
                     }
                 }
                 else if (e.getModifierState('Shift')) {
                     if (!this.allowCopy) {
                         return;
                     }
-                    await this.moveFocusDown();
+                    this.moveFocusDown();
                 }
                 else {
-                    await this.setFocusDown();
+                    this.setFocusDown();
                 }
                 return;
             }
@@ -1157,9 +1438,9 @@ export class TableContext {
                 case 'a': {
                     if (e.ctrlKey) {
                         e.preventDefault();
-                        await this.moveToTop();
+                        this.moveToTop();
                         this.moveToStart();
-                        await this.focusToBottom();
+                        this.focusToBottom();
                         this.focusToEnd();
                     }
                     break;
@@ -1253,7 +1534,7 @@ export class TableContext {
         if (!colId) {
             return;
         }
-        const currentPageContents = await this.currentPageData;
+        const currentPageContents = this.currentPageData;
         const ctx = getCanvasContext();
         let maxWidth = 0;
         if (columnDef.accessorFn) {
@@ -1332,7 +1613,7 @@ export class TableContext {
         // this.forceVisibilityUpdate();
     };
     copyHighlightedRowsToClipboard = async () => {
-        // HACK clipboard does not exist in http environments
+        // NOTE: False Positive. Clipboard does not exist in http environments
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!navigator.clipboard) {
             alert('cannot copy in an insecure connection');
@@ -1341,7 +1622,7 @@ export class TableContext {
         return this._performRowCopy(await this.getHighlightedRowData());
     };
     copyDataToClipboard = async () => {
-        // HACK clipboard does not exist in http environments
+        // NOTE: False Positive. Clipboard does not exist in http environments
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (!navigator.clipboard) {
             alert('cannot copy in an insecure connection');
@@ -1352,7 +1633,8 @@ export class TableContext {
     _performRowCopy = async ({ items, indicesByItem, focusedElementData, affectedColumns, }) => {
         const focusedColumnIds = affectedColumns.map((it) => encapsulate(typeof it.header === 'string' ? it.header : it.id));
         const value = await (async () => {
-            const selectColumns = new SvelteMap();
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const selectColumns = new Map();
             for (let i = affectedColumns.length - 1; i > -1; i--) {
                 const columnDef = affectedColumns[i];
                 if (columnDef instanceof SelectDef) {
@@ -1426,41 +1708,41 @@ export class TableContext {
         this.focusStart = null;
         this.focusEnd = null;
     };
-    focusToTop = async () => {
+    focusToTop = () => {
         if (!this.allowCopy) {
             return;
         }
-        return this._moveFocusEndRow(-Infinity);
+        this._moveFocusEndRow(-Infinity);
     };
     focusToBottom = () => {
         if (!this.allowCopy) {
             return;
         }
-        return this._moveFocusEndRow(Infinity);
+        this._moveFocusEndRow(Infinity);
     };
-    moveToBottom = async () => {
-        return this._moveFocusRow(Infinity);
+    moveToBottom = () => {
+        this._moveFocusRow(Infinity);
     };
-    moveToTop = async () => {
-        return this._moveFocusRow(-Infinity);
+    moveToTop = () => {
+        this._moveFocusRow(-Infinity);
     };
-    moveFocusUp = async () => {
+    moveFocusUp = () => {
         if (!this.allowCopy) {
             return;
         }
-        return this._moveFocusEndRow(-1);
+        this._moveFocusEndRow(-1);
     };
-    setFocusUp = async () => {
-        return this._moveFocusRow(-1);
+    setFocusUp = () => {
+        this._moveFocusRow(-1);
     };
-    tabForward = async () => {
+    tabForward = () => {
         if (!this.allowCopy) {
             return;
         }
         const defs = this.columnDefs;
         const visibility = this.columnVisibility;
         const indexBounds = defs.length;
-        const rowBounds = (await this.sortedData).length;
+        const rowBounds = this.sortedData.length;
         if (!this.focusStart || !rowBounds) {
             return;
         }
@@ -1582,14 +1864,14 @@ export class TableContext {
         }
         //otherwise return without doing anything
     };
-    moveFocusDown = async () => {
+    moveFocusDown = () => {
         if (!this.allowCopy) {
             return;
         }
-        return this._moveFocusEndRow(1);
+        this._moveFocusEndRow(1);
     };
-    setFocusDown = async () => {
-        return this._moveFocusRow(1);
+    setFocusDown = () => {
+        this._moveFocusRow(1);
     };
     moveFocusLeft = () => {
         if (!this.allowCopy) {
@@ -1856,7 +2138,7 @@ export class TableContext {
         };
         localStorage.setItem(`${this.userId}-${this.tableName}-settings`, JSON.stringify(settingsObject));
     }
-    async _moveFocusEndRow(offset) {
+    _moveFocusEndRow(offset) {
         if (!this.allowCopy) {
             return;
         }
@@ -1868,21 +2150,23 @@ export class TableContext {
         // 	throw new Error(`_moveFocusEndRow is not in a tracking context.`);
         // }
         const focusEnd = this.focusEnd;
-        const rows = (await this.paginationRowModel).rows;
+        const prm = this.paginationRowModel;
+        const rows = prm.rows;
         const endRowIndex = rows.findIndex((row) => row.visibleIndex === focusEnd.row);
         this.focusEnd = {
             ...this.focusEnd,
             row: rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex,
         };
     }
-    async _moveFocusRow(offset) {
+    _moveFocusRow(offset) {
         if (!this.focusStart) {
             console.warn('no focusStart found');
             return;
         }
         const focusStart = this.focusStart;
-        const newEndRowIndex = await (async () => {
-            const rows = (await this.paginationRowModel).rows;
+        const newEndRowIndex = (() => {
+            const prm = this.paginationRowModel;
+            const rows = prm.rows;
             const endRowIndex = rows.findIndex((row) => row.visibleIndex === focusStart.row);
             return rows[Math.max(Math.min(endRowIndex + offset, rows.length - 1), 0)].visibleIndex;
         })();
@@ -1890,9 +2174,10 @@ export class TableContext {
     }
     async getHighlightedRowData() {
         const affectedColumns = this.columnDefs.filter(this.columnDefReturnsTextValue);
-        const indices = new SvelteMap();
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const indices = new Map();
         const selectedRows = [...this.highlightedItems.values()];
-        const sortedData = await this.sortedData;
+        const sortedData = this.sortedData;
         for (const item of selectedRows) {
             const rowIndex = sortedData.indexOf(item);
             if (rowIndex == -1) {
@@ -1906,7 +2191,8 @@ export class TableContext {
         const rowLength = selectedRows.length;
         for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
             const item = selectedRows[rowIndex];
-            const key = await this.selectionExtractor(item);
+            const rawKey = this._cachedKey(item);
+            const key = rawKey instanceof Promise ? await rawKey : rawKey;
             selectedCells[rowIndex] = [];
             const targetRow = selectedCells[rowIndex];
             const colLength = affectedColumns.length;
@@ -1949,10 +2235,10 @@ export class TableContext {
             const { row: startRowIndexId, column: startColumnIndex } = this.focusStart;
             const { row: endRowIndexId, column: endColumnIndex } = this.focusEnd;
             // const model = this._currentPageData;
-            const model = await this.paginationRowModel;
+            const model = this.paginationRowModel;
             const startRowIndex = model.rows.findIndex((row) => row.visibleIndex === startRowIndexId);
             const endRowIndex = model.rows.findIndex((row) => row.visibleIndex === endRowIndexId);
-            if (!(await this.currentPageData).length || startRowIndex == -1 || endRowIndex == -1) {
+            if (!this.currentPageData.length || startRowIndex == -1 || endRowIndex == -1) {
                 throw new Error(`copy was missing one of the two indices. First: ${startRowIndex}, second: ${endRowIndex}`);
             }
             const minRowIndex = Math.min(startRowIndex, endRowIndex);
@@ -1965,7 +2251,8 @@ export class TableContext {
                     this.columnDefReturnsTextValue(it));
             });
             const selectedRows = [];
-            const indices = new SvelteMap();
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const indices = new Map();
             for (let i = minRowIndex; i <= maxRowIndex; i++) {
                 const row = model.rows[i];
                 const item = row.original;
@@ -1976,10 +2263,11 @@ export class TableContext {
             // TODO somewhere between here and the ending of the copy functionality, we end up with issues where instead of it using the accessor fn, it tries to pick up the select option, and ends up using the value ("1", etc)
             const selectedCells = [];
             const rowLength = selectedRows.length;
-            const sortedData = await this.sortedData;
+            const sortedData = this.sortedData;
             for (let rowIndex = 0; rowIndex < rowLength; rowIndex++) {
                 const item = selectedRows[rowIndex];
-                const key = await this.selectionExtractor(item);
+                const rawKey = this._cachedKey(item);
+                const key = rawKey instanceof Promise ? await rawKey : rawKey;
                 selectedCells[rowIndex] = [];
                 const targetRow = selectedCells[rowIndex];
                 const colLength = affectedColumns.length;
@@ -2019,7 +2307,8 @@ export class TableContext {
         }
         return {
             items: [],
-            indicesByItem: new SvelteMap(),
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            indicesByItem: new Map(),
             focusedElementData: [],
             affectedColumns: [],
         };
@@ -2049,7 +2338,8 @@ export class TableContext {
         return allDefs;
     };
     assertNoDuplicateIds() {
-        const foundIds = new SvelteSet();
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const foundIds = new Set();
         this.defaultColumnDefs.defs.forEach((def) => {
             if (foundIds.has(def.id)) {
                 throw new Error(`Duplicate Column Definition ID ${def.id} in table ${this.tableName}`);
@@ -2223,13 +2513,15 @@ export class TableContext {
     }
     _setNewPinningState() {
         this.columnPinning = {
-            left: new SvelteMap(this.columnPinning.left &&
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            left: new Map(this.columnPinning.left &&
                 this.columnDefs
                     .filter((col) => {
                     return this.columnPinning.left?.has(col.id);
                 })
                     .map((col, index) => [col.id, index])),
-            right: new SvelteMap(this.columnPinning.right &&
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            right: new Map(this.columnPinning.right &&
                 this.columnDefs
                     .filter((col) => this.columnPinning.right?.has(col.id))
                     .map((col, index) => [col.id, index])),
@@ -2308,7 +2600,8 @@ function areDefsEquivalent(newColumnDefs, oldColumnDefs) {
     });
 }
 function columnDefsToMap(defs) {
-    const map = new SvelteMap();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const map = new Map();
     defs.forEach((def) => {
         map.set(def.id, def);
     });