@lavalogic/scoria 0.36.0 → 0.37.1

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

@@ -1,5 +1,7 @@
 import { browser, dev } from '$app/environment';
-import { asyncAll, asyncForEach, asyncMap, devCatch, getCanvasContext, isKeyOf, } from '../../../../Helpers/Helpers.svelte.js';
+import { asyncAll, asyncMap, devCatch, getCanvasContext, isKeyOf, } from '../../../../Helpers/Helpers.svelte.js';
+import { PreferencesState } from './PreferencesState.svelte.js';
+import { SelectionState } from './SelectionState.svelte.js';
 import { tick, untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
@@ -13,17 +15,41 @@ import { BubbleDef } from '../Columns/Definitions/Display/BubbleDef.svelte.js';
 import { DisplayDef } from '../Columns/Definitions/Display/DisplayDef.svelte.js';
 import { ProgressBarDef } from '../Columns/Definitions/Display/ProgressBarDef.svelte.js';
 import { RowSelectionDef } from '../Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+import { SortingState } from './SortingState.svelte.js';
+import { FilteringState } from './FilteringState.svelte.js';
+import { ColumnLayoutState } from './ColumnLayoutState.svelte.js';
+import { FocusState } from './FocusState.svelte.js';
+import { VirtualisationState } from './VirtualisationState.svelte.js';
 import { PaginationType } from '../Pagination/PaginationType.js';
 import { ToolbarPosition } from '../Toolbar/ToolbarPosition.js';
 const SORTING_ICON_WIDTH = 24;
 const InternalSymbol = Symbol();
 const uncopyableColumns = new Set([
-    // ColumnType.RowSelect, //row select is a special case and is handled by tableContext
+    // RowSelect column is a special case and is handled by tableContext directly
     ColumnType.Expand,
     ColumnType.Actions,
     ColumnType.FilterOnly,
     ColumnType.Custom,
 ]);
+/**
+ * Default values applied by `TableContext.init` for any `TableInitOptions`
+ * field the consumer omits. Frozen so callers (notably `NestedTable`)
+ * can spread it without risking accidental shared-object mutation.
+ *
+ * Mirrors the default literals consumed inside `init`; both share this
+ * constant so the two cannot drift.
+ */
+export const DEFAULT_TABLE_INIT_OPTIONS = Object.freeze({
+    allowCopy: true,
+    enableResize: true,
+    allowColumnReordering: true,
+    allowQuickFiltering: true,
+    showQuickFilterByDefault: true,
+    allowAdvancedFiltering: true,
+    toolbar: ToolbarPosition.Right,
+    displayFooter: true,
+    debug: false,
+});
 export class TableContext {
     defaultColumnDefs;
     tableName;
@@ -40,8 +66,27 @@ export class TableContext {
     _onEditCell;
     debug;
     static identifier = Symbol();
+    /**
+     * Factory for `TableContext`. Coalesces every optional flag from the
+     * caller-supplied `options` against `DEFAULT_TABLE_INIT_OPTIONS` so
+     * the constructor receives a complete set of values. The constructor
+     * itself is `protected` and gated by an internal symbol to make it
+     * impossible to construct a `TableContext` without going through
+     * `init`.
+     */
     static init(defaultColumnDefs, tableName, dataRepo, options) {
-        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? true, options.enableResize ?? true, options.allowColumnReordering ?? true, options.allowQuickFiltering ?? true, options.showQuickFilterByDefault ?? true, options.allowAdvancedFiltering ?? true, options.toolbar ?? ToolbarPosition.Right, options.displayFooter ?? true, options.selectionExtractor, options.getUserId, options.onEditCell, options.debug ?? false);
+        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? DEFAULT_TABLE_INIT_OPTIONS.allowCopy, options.enableResize ?? DEFAULT_TABLE_INIT_OPTIONS.enableResize, options.allowColumnReordering ?? DEFAULT_TABLE_INIT_OPTIONS.allowColumnReordering, options.allowQuickFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowQuickFiltering, options.showQuickFilterByDefault ?? DEFAULT_TABLE_INIT_OPTIONS.showQuickFilterByDefault, options.allowAdvancedFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowAdvancedFiltering, options.toolbar ?? DEFAULT_TABLE_INIT_OPTIONS.toolbar, options.displayFooter ?? DEFAULT_TABLE_INIT_OPTIONS.displayFooter, 
+        // Fallback identity extractor when no `selectionExtractor`
+        // is supplied. The nested-table call path (see
+        // `ColumnFactory.expand`) always passes one through, but
+        // other consumers may construct an options object directly
+        // without it. Returning the row object itself preserves
+        // row identity (the cell wrappers use reference equality
+        // via the keying cache) and avoids the
+        // `tableContext.selectionExtractor is not a function`
+        // crash inside `SelectionState.cachedKey` /
+        // `TableRow.svelte`'s id-resolution effect.
+        options.selectionExtractor ?? ((row) => row), options.getUserId, options.onEditCell, options.debug ?? DEFAULT_TABLE_INIT_OPTIONS.debug);
         return context;
     }
     // #region constructor
@@ -66,7 +111,6 @@ export class TableContext {
             throw new Error('This class may only be instantiated through the static init() method');
         }
         this._dataRepo = $state(dataRepo);
-        // this.dataRepo.forceRefresh = this.forceVisibilityUpdate;
         $effect(() => {
             void this.currentPageData;
             // void this.selectedItems;
@@ -77,7 +121,6 @@ export class TableContext {
                         this.resetHighlightedRows();
                     })
                         .catch(devCatch);
-                    // this.recalculateAllSelectedInCurrentPage();
                 }
             });
         });
@@ -96,12 +139,11 @@ export class TableContext {
                 // 	throw new Error(`filtered indices are not in a tracking context`);
                 // }
                 if (!this.dataRepo.filtering.length) {
-                    this._filteredIndices = data.map((_item, index) => {
+                    this._filtering.setFilteredIndices(data.map((_item, index) => {
                         return index;
-                    });
+                    }));
                 }
                 else {
-                    // await asyncSleep(300);
                     const filtered = [];
                     for (let index = 0; index < data.length; ++index) {
                         if (currentController.signal.aborted) {
@@ -133,7 +175,7 @@ export class TableContext {
                             filtered.push(index);
                         }
                     }
-                    this._filteredIndices = filtered;
+                    this._filtering.setFilteredIndices(filtered);
                 }
             })().catch((e) => {
                 devCatch(e);
@@ -144,7 +186,7 @@ export class TableContext {
             void this.dataRepo.data.length;
             void this.selectedItems;
             void this.paginationRepo?.pageStartIndex;
-            const invalidValues = this._invalidValues;
+            const invalidValues = this.invalidValues;
             const allSelectedInCurrentPage = [...this.selectedItems.keys()];
             const currentIncrement = ++lastIncrement;
             void this.allSelectedInCurrentPage;
@@ -165,9 +207,7 @@ export class TableContext {
             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();
+                this._focus.setFocusedDerived(new Set(), new Set());
                 return;
             }
             const { row: startRowIndexId } = this.focusStart;
@@ -178,9 +218,7 @@ export class TableContext {
                 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();
+                    this._focus.setFocusedDerived(new Set(), new Set());
                     return;
                 }
                 const minRowIndex = Math.min(startRowIndex, endRowIndex);
@@ -199,8 +237,7 @@ export class TableContext {
                 for (let i = minRowIndex; i <= maxRowIndex; i++) {
                     indices.add(parseInt(model.rows[i].id));
                 }
-                this._focusedRowIndices = indices;
-                this._focusedColumnIds = affectedColumns;
+                this._focus.setFocusedDerived(indices, affectedColumns);
             }
         });
         let latest_paginationRowModel = 0;
@@ -282,40 +319,36 @@ export class TableContext {
                 .catch(devCatch);
         });
         $effect(() => {
-            if (this.highlightedItems.size === 0) {
-                this._allHighlighted = false;
+            if (this._selection.highlightedItems.size === 0) {
+                this._selection.setAllHighlighted(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);
+            const allHighlightedResult = this._selection.computeAllHighlightedInRange(pageStartIndex, pageEndIndexExclusive);
             if (allHighlightedResult instanceof Promise) {
                 allHighlightedResult
                     .then((flag) => {
-                    this._allHighlighted = flag;
+                    this._selection.setAllHighlighted(flag);
                 })
                     .catch(devCatch);
             }
             else {
-                this._allHighlighted = allHighlightedResult;
+                this._selection.setAllHighlighted(allHighlightedResult);
             }
         });
         if (defaultColumnDefs.remoteFilters) {
-            this.remoteFilters = defaultColumnDefs.remoteFilters;
+            this._filtering.setRemoteFilters(defaultColumnDefs.remoteFilters);
         }
         if (hasPagination(dataRepo)) {
             this.paginationRepo = dataRepo;
-            // this.tableOptions.onSortingChange = dataRepo.updateSorting;
-            // this.tableOptions.manualSorting = dataRepo.manualSorting;
         }
-        this.userId = $derived(getUserId());
         if (browser) {
             this._getUserDefaults();
             const removeInvalidPresets = () => {
-                localStorage.removeItem(`${this.userId}-${tableName}-presets`);
-                localStorage.removeItem(`${this.userId}-${tableName}-selected-preset-name`);
+                this._preferences.clearPresetsAndSelection();
                 const visibilityState = {};
                 this.columnDefs.forEach((def) => {
                     if (def.defaultHidden || def.columnType === ColumnType.FilterOnly) {
@@ -323,7 +356,7 @@ export class TableContext {
                     }
                 });
                 const defaultPreset = {
-                    name: 'default',
+                    name: 'Default',
                     columnDefs: this.columnDefs,
                     sortingState: [],
                     visibilityState,
@@ -331,16 +364,15 @@ export class TableContext {
                 };
                 this.selectedPreset = defaultPreset;
                 this.columnVisibility = visibilityState;
-                this.columnPresets = [...this.columnPresets, defaultPreset];
+                this._preferences.setPresets([...this.columnPresets, defaultPreset]);
             };
             this.setupDefaultColumnDefs()
                 .then((defs) => {
                 this.showQuickFiltering = this.showQuickFilterByDefault;
                 this.isSelectable = defs.some((it) => it.id.startsWith('is-selectable-'));
                 if (this.allowColumnReordering) {
-                    const savedPresets = localStorage.getItem(`${this.userId}-${tableName}-presets`);
-                    if (savedPresets) {
-                        const presets = JSON.parse(savedPresets);
+                    const presets = this._preferences.loadPresets();
+                    if (presets.length > 0) {
                         if (presets[0] && areDefsEquivalent(defs, presets[0].columnDefs)) {
                             return this.reassignDefsToPresets(presets).then((p) => p);
                         }
@@ -356,7 +388,7 @@ export class TableContext {
                     removeInvalidPresets();
                     return;
                 }
-                const savedPresetName = localStorage.getItem(`${this.userId}-${tableName}-selected-preset-name`);
+                const savedPresetName = this._preferences.loadSelectedPresetName();
                 if (savedPresetName) {
                     const preset = presets.find((it) => it.name === savedPresetName);
                     if (preset && areDefsEquivalent(this.columnDefs, preset.columnDefs)) {
@@ -366,13 +398,13 @@ export class TableContext {
                         this.selectedPreset = preset;
                     }
                     else {
-                        localStorage.removeItem(`${this.userId}-${tableName}-selected-preset-name`);
+                        localStorage.removeItem(this._preferences.storageKey('selected-preset-name'));
                         this.selectedPreset = presets[0];
                         if (presets.at(0)?.visibilityState) {
                             this.columnVisibility = presets[0].visibilityState;
                         }
                     }
-                    this.columnPresets = presets;
+                    this._preferences.setPresets(presets);
                 }
             })
                 .catch(devCatch);
@@ -380,7 +412,6 @@ export class TableContext {
     }
     // #endregion
     // #region stores
-    userId;
     isSelectable = $state(false);
     _paginationRepo = $state();
     get paginationRepo() {
@@ -389,20 +420,17 @@ export class TableContext {
     set paginationRepo(v) {
         this._paginationRepo = v;
     }
-    _showQuickFiltering = $state(false);
+    /**
+     * Delegating accessor preserved for backwards compatibility; reads /
+     * writes through to `_filtering.showQuickFiltering`. The sub-context
+     * owns the `allowQuickFiltering` gate so the setter logic stays
+     * identical to the pre-extraction implementation.
+     */
     get showQuickFiltering() {
-        return this._showQuickFiltering;
+        return this._filtering.showQuickFiltering;
     }
     set showQuickFiltering(v) {
-        if (this.debug) {
-            if (!this.allowQuickFiltering) {
-                console.log(`attempted to toggle quick filtering when allowQuickFiltering = false`);
-            }
-            else {
-                console.log(`setting quick filtering = ${v}`);
-            }
-        }
-        this._showQuickFiltering = this.allowQuickFiltering && v;
+        this._filtering.showQuickFiltering = v;
     }
     _dataRepo;
     get dataRepo() {
@@ -411,28 +439,49 @@ export class TableContext {
     set dataRepo(v) {
         this._dataRepo = v;
     }
-    _remoteFilters = $state();
+    /**
+     * Delegating getter preserved for backwards compatibility. Reads
+     * through to `_filtering.remoteFilters`; the parent uses
+     * `_filtering.setRemoteFilters` during column-def setup to write the
+     * caller-supplied value.
+     */
     get remoteFilters() {
-        return this._remoteFilters;
-    }
-    set remoteFilters(v) {
-        this._remoteFilters = v;
+        return this._filtering.remoteFilters;
     }
-    _showSelectedOnly = $state(false);
+    /**
+     * Delegating accessor preserved for backwards compatibility; reads /
+     * writes through to `_filtering.showSelectedOnly`. The sub-context
+     * preserves the idempotency short-circuit (re-assigning the same
+     * value is a no-op).
+     */
     get showSelectedOnly() {
-        return this._showSelectedOnly;
+        return this._filtering.showSelectedOnly;
     }
     set showSelectedOnly(v) {
-        if (v === this._showSelectedOnly) {
-            return;
-        }
-        this._showSelectedOnly = v;
+        this._filtering.showSelectedOnly = v;
+    }
+    /**
+     * Delegating getters that relay the per-type `FilterFn` from
+     * `_filtering`. The sub-context's `$derived` chain reads through
+     * `paginationRepo` via the thunk so the source of truth stays
+     * with the data repository; consumers that bind these getters
+     * (notably `setupDefaultColumnDefs`) need no migration.
+     */
+    get dateFilter() {
+        return this._filtering.dateFilter;
+    }
+    get numberFilter() {
+        return this._filtering.numberFilter;
+    }
+    get selectFilter() {
+        return this._filtering.selectFilter;
+    }
+    get boolFilter() {
+        return this._filtering.boolFilter;
+    }
+    get stringFilter() {
+        return this._filtering.stringFilter;
     }
-    dateFilter = $derived(this.paginationRepo?.dateFilter);
-    numberFilter = $derived(this.paginationRepo?.numberFilter);
-    selectFilter = $derived(this.paginationRepo?.selectFilter);
-    boolFilter = $derived(this.paginationRepo?.boolFilter);
-    stringFilter = $derived(this.paginationRepo?.stringFilter);
     _limitFooter = $state(false);
     get limitFooter() {
         return this._limitFooter;
@@ -447,69 +496,104 @@ export class TableContext {
     set dragTarget(v) {
         this._dragTarget = v;
     }
-    _columnDefs = $state([]);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * actual `$state` slot lives on `_columnLayout`; this getter / setter
+     * pair forwards reads and writes so existing consumers need no
+     * migration. See `_columnLayout` below for the sub-context.
+     */
     get columnDefs() {
-        return this._columnDefs;
+        return this._columnLayout.columnDefs;
     }
     set columnDefs(v) {
-        this._columnDefs = v;
+        this._columnLayout.columnDefs = v;
     }
-    _columnPresets = $state([]);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * actual `$state` slot lives on `_preferences._columnPresets`
+     * (Phase 6.4). The setter is private because the consumer-facing
+     * write path goes through `saveColumnPreset` (which also persists
+     * the list to localStorage); internal call sites that need to
+     * mutate the list directly call `_preferences.setPresets(...)`.
+     */
     get columnPresets() {
-        return this._columnPresets;
-    }
-    set columnPresets(v) {
-        this._columnPresets = v;
+        return this._preferences.columnPresets;
     }
-    //FIXME why was this allowed to be undefined?
-    _selectedPreset = $state();
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * actual `$state` slot lives on `_preferences._selectedPreset`
+     * (Phase 6.4). Reads / writes through to the sub-context.
+     */
     get selectedPreset() {
-        return this._selectedPreset;
+        return this._preferences.selectedPreset;
     }
     set selectedPreset(v) {
-        this._selectedPreset = v;
+        this._preferences.selectedPreset = v;
     }
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    _focusedRowIndices = $state(new Set());
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * `$state` slot lives on `_focus._focusedRowIndices` (Phase 6.6).
+     * Populated by the parent's focus-derived `$effect` through
+     * `_focus.setFocusedDerived(rows, cols)`.
+     */
     get focusedRowIndices() {
-        return this._focusedRowIndices;
+        return this._focus.focusedRowIndices;
     }
-    _highlightedItems = $state(new SvelteMap());
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * actual `$state` slot lives on `_selection._highlightedItems`
+     * (Phase 6.5).
+     */
     get highlightedItems() {
-        return this._highlightedItems;
+        return this._selection.highlightedItems;
     }
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity
-    _focusedColumnIds = $state(new Set());
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * `$state` slot lives on `_focus._focusedColumnIds` (Phase 6.6).
+     */
     get focusedColumnIds() {
-        return this._focusedColumnIds;
+        return this._focus.focusedColumnIds;
     }
-    _isMousingDown = $state(false);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * `$state` slot lives on `_focus._isMousingDown` (Phase 6.6).
+     */
     get isMousingDown() {
-        return this._isMousingDown;
+        return this._focus.isMousingDown;
     }
     set isMousingDown(v) {
-        this._isMousingDown = v;
+        this._focus.isMousingDown = v;
     }
-    _focusStart = $state(null);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * `$state` slot lives on `_focus._focusStart` (Phase 6.6). The
+     * setter remains read-only at this surface; the write path is
+     * `moveFocus` / `unfocus` / `tabForward` / `tabBackward` /
+     * `endFocus` / `setFocusEnd` / `startFocus` (all delegated below).
+     */
     get focusStart() {
-        return this._focusStart;
-    }
-    set focusStart(v) {
-        this._focusStart = v;
+        return this._focus.focusStart;
     }
-    _focusStartIsBeingEdited = $state(false);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * `$state` slot lives on `_focus._focusStartIsBeingEdited`
+     * (Phase 6.6).
+     */
     get focusStartIsBeingEdited() {
-        return this._focusStartIsBeingEdited;
+        return this._focus.focusStartIsBeingEdited;
     }
     set focusStartIsBeingEdited(v) {
-        this._focusStartIsBeingEdited = v;
+        this._focus.focusStartIsBeingEdited = v;
     }
-    _focusEnd = $state(null);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * `$state` slot lives on `_focus._focusEnd` (Phase 6.6).
+     */
     get focusEnd() {
-        return this._focusEnd;
+        return this._focus.focusEnd;
     }
     set focusEnd(v) {
-        this._focusEnd = v;
+        this._focus.focusEnd = v;
     }
     _singleClickEditing = $state(false);
     get singleClickEditing() {
@@ -553,159 +637,113 @@ export class TableContext {
     set commaSeparatedCopy(v) {
         this._commaSeparatedCopy = v;
     }
-    _columnSizing = $state({});
+    /**
+     * Delegating accessor preserved for backwards compatibility. Reads
+     * through to `_columnLayout.columnSizing`. Per-key mutations (e.g.
+     * `this.columnSizing[id] = w` in `autoResize`) work because the
+     * underlying `$state` slot is a Svelte proxy.
+     */
     get columnSizing() {
-        return this._columnSizing;
+        return this._columnLayout.columnSizing;
     }
     set columnSizing(v) {
-        this._columnSizing = v;
+        this._columnLayout.columnSizing = v;
     }
-    _columnPinning = $state({});
+    /**
+     * Delegating accessor preserved for backwards compatibility. Reads
+     * through to `_columnLayout.columnPinning`. The `setColumnPinning`
+     * updater below honours the `allowColumnReordering` master gate; the
+     * direct setter does not, by design (used for preset switches and
+     * the init flow where the gate has already been checked).
+     */
     get columnPinning() {
-        return this._columnPinning;
+        return this._columnLayout.columnPinning;
     }
     set columnPinning(v) {
-        this._columnPinning = v;
+        this._columnLayout.columnPinning = v;
     }
-    _columnVisibility = $state({});
+    /**
+     * Delegating accessor preserved for backwards compatibility. Reads
+     * through to `_columnLayout.columnVisibility`. Tri-state semantics
+     * (`true` / `false` / `undefined`) are preserved.
+     */
     get columnVisibility() {
-        return this._columnVisibility;
+        return this._columnLayout.columnVisibility;
     }
     set columnVisibility(v) {
-        this._columnVisibility = v;
+        this._columnLayout.columnVisibility = v;
     }
-    _openModalCoordinates = $state(null);
-    get openModalCoordinates() {
-        return this._openModalCoordinates;
+    /**
+     * Identifies the cell whose `col.validity({ modal })` /
+     * `col.display({ modal })` modal is currently open, or `null` when no
+     * modal is open.
+     *
+     * Keyed on the **row object reference**, not on visible index, so the
+     * open-modal state is stable across pagination, sort, and filter
+     * changes - the cell renderer matches via `cell.row.original ===
+     * openModalCell.row`. Visible-index-based keying (the old
+     * `CellCoordinatesWithoutColumn` shape) silently re-targeted the modal
+     * to whichever row happened to occupy the same index after a page
+     * change.
+     */
+    _openModalCell = $state(null);
+    get openModalCell() {
+        return this._openModalCell;
     }
-    set openModalCoordinates(v) {
-        this._openModalCoordinates = v;
+    set openModalCell(v) {
+        this._openModalCell = v;
     }
-    _allSelectedAsync = $state(false);
-    _allSelectedInCurrentPage = $derived.by(() => {
-        void this.columnDefs;
-        if (this.selectedItems.size === 0) {
-            return false;
-        }
-        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;
-        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;
+    // Per-table identifier of the ActionsCell that currently has its popup open.
+    // Lives on the context rather than at module scope so multiple tables on the
+    // same page do not share open-popup state (security: cross-table state
+    // poisoning).
+    _shownActionsPopup = $state();
+    get shownActionsPopup() {
+        return this._shownActionsPopup;
     }
-    allSelectedBySelectableMethod(pageStartIndex, pageEndIndexExclusive, selectableMethod) {
-        const sortedData = this.sortedData;
-        const emptyPromise = new Promise(() => { });
-        if (selectableMethod) {
-            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 {
-            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)),
-            ]);
-        }
+    set shownActionsPopup(v) {
+        this._shownActionsPopup = v;
     }
-    _areAllHighlighted(pageStartIndex, pageEndIndexExclusive) {
-        const sortedData = this.sortedData;
-        for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
-            const item = sortedData[index];
-            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 true;
+    /**
+     * Delegating getter preserved for backwards compatibility. The
+     * actual `$derived` chain (and the async-result cache) live on
+     * `_selection.allSelectedInCurrentPage` (Phase 6.5).
+     */
+    get allSelectedInCurrentPage() {
+        return this._selection.allSelectedInCurrentPage;
     }
-    _allHighlighted = $state(false);
+    /**
+     * Delegating getter preserved for backwards compatibility. Reads
+     * through to `_selection.allHighlighted`; the value is published by
+     * the `_allHighlightedEffect` below which lives on this class
+     * because it reads `paginationRepo.pageStartIndex` / `pageEndIndexExclusive`
+     * directly.
+     */
     get allHighlighted() {
-        return this._allHighlighted;
+        return this._selection.allHighlighted;
     }
-    _hasHighlightedItems = $derived(this.highlightedItems.size > 0);
+    /**
+     * Delegating getter preserved for backwards compatibility. The
+     * `$derived` lives on `_selection.hasHighlightedItems` (Phase 6.5).
+     */
     get hasHighlightedItems() {
-        return this._hasHighlightedItems;
+        return this._selection.hasHighlightedItems;
     }
-    //type of entries depends on the value extractor in the column def
-    _selectedItems = $state(new SvelteMap());
+    /**
+     * Delegating accessors preserved for backwards compatibility. The
+     * `$state` slots live on `_selection` (Phase 6.5). `selectedItems`
+     * is read-only at this surface; the consumer-facing writers are
+     * `toggleSelected` / `setSelected` / `resetSelectedItems` /
+     * `setSelectionMap` below.
+     */
     get selectedItems() {
-        return this._selectedItems;
+        return this._selection.selectedItems;
     }
-    _invalidValues = $state(new SvelteMap());
     get invalidValues() {
-        return this._invalidValues;
+        return this._selection.invalidValues;
     }
     set invalidValues(v) {
-        this._invalidValues = v;
+        this._selection.invalidValues = v;
     }
     _hasInvalidSelectedItems = $state(false);
     get hasInvalidSelectedItems() {
@@ -714,116 +752,292 @@ export class TableContext {
     set hasInvalidSelectedItems(v) {
         this._hasInvalidSelectedItems = v;
     }
-    // FIXME decide
-    // 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;
-        }
-        const def = this.columnDefsById.get(id);
-        if (!def) {
-            return undefined;
-        }
-        if (def.getSortingFn != undefined) {
-            return def.getSortingFn(desc);
-        }
-        if (def instanceof DisplayDef ||
-            def instanceof TextInputDef ||
-            def instanceof NumberInputDef ||
-            def instanceof DateInputDef) {
-            return comparableSortingFn(id, desc);
-        }
-        if (def instanceof CheckboxDef) {
-            return checkboxSortingFn(id, desc);
-        }
-        if (def instanceof SelectDef) {
-            return comparableSortingFn(id, desc);
-        }
-        if (def instanceof ProgressBarDef) {
-            return progressSortingFn(id, desc);
-        }
-        // if (dev) {
-        // 	console.warn('Unhandled def type ' + id, def);
-        // }
-        return comparableSortingFn(id, desc);
-    };
-    _filteredIndices = $state([]);
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * id->def lookup map is owned by `_columnLayout.columnDefsById`
+     * (Phase 6.3); previously this was a `$derived` private field on
+     * `TableContext`. Made `public get` (instead of the previous
+     * `private` field) so the dependent sub-contexts (`SortingState`)
+     * and helpers (`generateTableOptions`) can read it through the
+     * legacy surface without piercing the sub-context boundary.
+     */
+    get columnDefsById() {
+        return this._columnLayout.columnDefsById;
+    }
+    /**
+     * Phase 6.3 sub-context that owns the column-layout state:
+     * `columnDefs`, `columnSizing`, `columnPinning`, `columnVisibility`,
+     * the `columnDefsById` reverse-lookup map, the `visualColumns`
+     * cached array (and the paired `visualColumnIndexById` O(1) lookup),
+     * the gated `setColumnPinning` updater, the `updateDefsBasedOnPinning`
+     * helper, and the `setNewPinningState` helper.
+     *
+     * Dependencies are passed as thunks so the sub-context never holds
+     * a reference to the parent. The `allowColumnReordering` thunk
+     * gates the public `setColumnPinning` updater; the `debug` thunk
+     * mirrors the parent's logger gate.
+     */
+    _columnLayout = new ColumnLayoutState({
+        getAllowColumnReordering: () => this.allowColumnReordering,
+        getDebug: () => this.debug,
+    });
+    /**
+     * Phase 6.2 sub-context that owns the filtering-related state: the
+     * per-row filter result (`filteredIndices`), the `filteredData`
+     * derived chain, the user-facing toggles (`showQuickFiltering`,
+     * `showSelectedOnly`), the per-type `FilterFn` relays, the
+     * remote-filter slot, and the `updateFilters` `OnChangeFn` slot.
+     *
+     * Dependencies are passed as thunks so the sub-context never holds
+     * a reference to the parent; the population effect for
+     * `_filteredIndices` stays in `TableContext` because it calls
+     * `this.createRow` (parent concern) - the effect publishes its
+     * result via `this._filtering.setFilteredIndices`.
+     */
+    _filtering = new FilteringState({
+        getRepoData: () => this.dataRepo.data,
+        getPaginationType: () => this.paginationRepo?.paginationType,
+        getDateFilterFn: () => this.paginationRepo?.dateFilter,
+        getNumberFilterFn: () => this.paginationRepo?.numberFilter,
+        getSelectFilterFn: () => this.paginationRepo?.selectFilter,
+        getBoolFilterFn: () => this.paginationRepo?.boolFilter,
+        getStringFilterFn: () => this.paginationRepo?.stringFilter,
+        getSelectedItems: () => this.selectedItems,
+        getAllowQuickFiltering: () => this.allowQuickFiltering,
+        getDebug: () => this.debug,
+    });
+    /**
+     * Delegating getter preserved for backwards compatibility. Reads
+     * through to `_filtering.filteredIndices`, which is populated by
+     * the per-row filter `$effect` in this class (the effect calls
+     * `this.createRow` and must stay where `createRow` lives).
+     */
     get filteredIndices() {
-        return this._filteredIndices;
-    }
-    filteredData = $derived.by(() => {
-        void this.dataRepo.data;
-        void this.filteredIndices;
-        void this.showSelectedOnly;
-        // 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.
-                    [...this.selectedItems.values()]
-                : this.filteredIndices.map((index) => {
-                    return this.dataRepo.data[index];
-                });
-            return data;
-        }
-        if (this.debug) {
-            console.log(`updating filtered data. Selected only: ${this.showSelectedOnly}`);
-        }
-        return this.showSelectedOnly ? [...this.selectedItems.values()] : this.dataRepo.data;
+        return this._filtering.filteredIndices;
+    }
+    /**
+     * Delegating getter preserved for backwards compatibility. Reads
+     * through to `_filtering.filteredData`, which owns the local /
+     * remote / show-selected-only branching.
+     */
+    get filteredData() {
+        return this._filtering.filteredData;
+    }
+    /**
+     * Phase 6.1 sub-context that owns the sort-related derived chain and
+     * the per-`ColumnDef` comparator dispatch. The dependency thunks
+     * close over `this.columnDefsById` / `this.filteredData` /
+     * `this.dataRepo` / `this.paginationRepo` / `this.debug`, so the
+     * sub-context never holds a direct reference to the parent and the
+     * reactivity graph remains threaded through `$derived` only.
+     *
+     * Exposed as a public field so future consumers can read sorting
+     * state directly; the legacy `sortedData` getter below preserves the
+     * pre-decomposition surface for backwards compatibility.
+     */
+    _sorting = new SortingState({
+        getColumnDefsById: () => this.columnDefsById,
+        getFilteredData: () => this._filtering.filteredData,
+        getSortingArray: () => this.dataRepo.sorting,
+        getPaginationType: () => this.paginationRepo?.paginationType,
+        getDataLength: () => this.dataRepo.data.length,
+        getDebug: () => this.debug,
     });
-    sortedDataAbortController = null;
-    sortedData = $derived.by(() => {
-        // if (!$effect.tracking()) {
-        // 	throw new Error(`sorted data is not in a tracking context`);
-        // }
-        void this.filteredData;
-        void this.dataRepo.sorting;
-        this.sortedDataAbortController?.abort();
-        const currentController = (this.sortedDataAbortController = new AbortController());
-        if (this.debug) {
-            console.log('sorted data');
-        }
-        if (this.paginationRepo?.paginationType == PaginationType.Local) {
-            const data = this.filteredData;
-            if (currentController.signal.aborted) {
-                return [];
-            }
-            const dataToSort = data.concat();
-            dataToSort.sort((a, b) => {
-                if (currentController.signal.aborted) {
-                    return 0;
-                }
-                const end = this.dataRepo.sorting.length;
-                for (let i = 0; i < end; i++) {
-                    const { id, desc } = this.dataRepo.sorting[i];
-                    const sortingFn = this.getSortingFn(id, desc);
-                    if (sortingFn) {
-                        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                        if (currentController.signal.aborted) {
-                            return 0;
-                        }
-                        const result = sortingFn(a, b);
-                        if (result != 0) {
-                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                            if (currentController.signal.aborted) {
-                                return 0;
-                            }
-                            return result;
-                        }
-                    }
-                    else if (dev) {
-                        console.warn('no sorting fn found for ' + id);
-                    }
-                }
-                return 0;
-            });
-            return dataToSort;
-        }
-        return this.filteredData;
+    /**
+     * Phase 6.4 sub-context that owns every persistence / preferences
+     * concern previously held directly on `TableContext`:
+     *
+     * - the saved column-presets list and currently-selected preset
+     *   (`columnPresets`, `selectedPreset`);
+     * - the `userIdSegment` `$derived` (used to namespace every
+     *   `scoria-table:<user>:<tableName>:<suffix>` storage key);
+     * - the `saveColumnPreset` / `setSelectedPreset` writers (which
+     *   apply the layout AND persist);
+     * - the `loadPresets` / `loadSelectedPresetName` /
+     *   `loadSavedSettings` boot-time hydration helpers;
+     * - the `persistSettings` writer used by the in-app settings
+     *   toggles (`setIsCompact`, `setAlternateRowColours`, etc.);
+     * - the schema-validation typeguards (exported alongside the
+     *   sub-context for unit testing).
+     *
+     * The settings fields themselves (`isCompact`, `singleClickEditing`,
+     * `alternateRowColours`, etc.) stay on `TableContext` because each
+     * one drives reactive UI; only the localStorage round-trip moved.
+     * `TableContext` retains delegating getters/setters/methods for
+     * every legacy surface (`columnPresets`, `selectedPreset`,
+     * `saveColumnPreset`, `setSelectedPreset`, `setIsCompact`, etc.).
+     */
+    _preferences = new PreferencesState({
+        getTableName: () => this.tableName,
+        getUserId: () => this.getUserId(),
+        getColumnDefs: () => this.columnDefs,
+        getColumnVisibility: () => this.columnVisibility,
+        getColumnPinning: () => this.columnPinning,
+        getSortingArray: () => this.paginationRepo?.sorting,
+        setColumnDefs: (defs) => {
+            this.columnDefs = defs;
+        },
+        setColumnVisibility: (state) => {
+            this.columnVisibility = state;
+        },
+        setColumnPinning: (state) => {
+            this.columnPinning = state;
+        },
+        applySortingState: (state) => {
+            this.paginationRepo?.updateSorting?.(state);
+        },
+        getDebug: () => this.debug,
+    });
+    /**
+     * Phase 6.5 sub-context that owns every selection + highlighting +
+     * key-cache concern previously held directly on `TableContext`:
+     *
+     * - `selectedItems` / `invalidValues` / `highlightedItems`
+     *   (`SvelteMap` slots, keyed by `selectionExtractor(item)`);
+     * - the `WeakMap<T, RowIdType>` key-cache that memoises the
+     *   extractor result for each row reference;
+     * - the pending-flush buffer and its debounced microtask
+     *   (`_pendingSelectionChanges` -> `tick().then(flush)`);
+     * - the `allSelectedInCurrentPage` `$derived` (with the async-
+     *   result cache for promise-returning `selectionExtractor` /
+     *   `RowSelectionDef.isSelectable`);
+     * - the `selectAllInCurrentPage` / `updateSelectedItems` /
+     *   `onHighlightAll` flows;
+     * - the `handleItemMutation` split that powers the parent's
+     *   `onEditCell` - the sub-context owns the key-cache delete +
+     *   selection rebind; the user-supplied callback stays on this
+     *   class.
+     *
+     * Dependencies are passed as thunks so the sub-context never holds
+     * a direct reference to `TableContext`. The two `$effect`s that
+     * historically lived on this class continue to live here (they
+     * read `paginationRepo` directly) but publish their results
+     * through `_selection.setAllHighlighted(...)` and
+     * `_selection.updateSelectedItems()`.
+     */
+    _selection = new SelectionState({
+        getSortedData: () => this.sortedData,
+        getCurrentPageData: () => this.currentPageData,
+        getColumnDefs: () => this.columnDefs,
+        getPageStartIndex: () => this.paginationRepo?.pageStartIndex,
+        getPageEndIndexExclusive: () => this.paginationRepo?.pageEndIndexExclusive,
+        getSelectionExtractor: () => this.selectionExtractor,
+        getIsSelectable: () => this.isSelectable,
+        getDebug: () => this.debug,
+    });
+    /**
+     * Phase 6.6 sub-context that owns every focus + keyboard-navigation
+     * concern previously held directly on `TableContext`:
+     *
+     * - `focusStart` / `focusEnd` / `focusStartIsBeingEdited` /
+     *   `isMousingDown` (the `$state` slots that define the focused
+     *   cell-range);
+     * - the `focusedRowIndices` / `focusedColumnIds` sets (populated
+     *   by the parent's `$effect` through `setFocusedDerived(...)`);
+     * - every focus writer (`startFocus`, `moveFocus`, `unfocus`,
+     *   `endFocus`, `setFocusEnd`, `focusToTop`, `focusToBottom`,
+     *   `focusToStart`, `focusToEnd`, `moveToTop`, `moveToBottom`,
+     *   `moveToStart`, `moveToEnd`, `setFocusUp` / `setFocusDown` /
+     *   `setFocusLeft` / `setFocusRight`, and the
+     *   `moveFocusUp` / `moveFocusDown` / `moveFocusLeft` /
+     *   `moveFocusRight` range-extension variants);
+     * - `handleTdKeydown` (the root `onkeydown` router) and the
+     *   private `handleKeystroke` dispatch.
+     *
+     * Dependencies are passed as thunks so the sub-context never holds
+     * a direct reference to `TableContext`. The Ctrl+F / Tab / Ctrl+C
+     * paths in `handleTdKeydown` and `handleKeystroke` call back into
+     * the parent through the `toggleQuickFiltering` / `tabForward` /
+     * `tabBackward` / `copyDataToClipboard` thunks because those
+     * methods read fields owned by other sub-contexts (or the parent
+     * directly) and would otherwise need to import them.
+     *
+     * The focus-derived `$effect` that publishes
+     * `focusedRowIndices` / `focusedColumnIds` lives on `TableContext`
+     * because it reads `paginationRowModel` + `_visualColumns` directly;
+     * it calls `_focus.setFocusedDerived(rows, cols)` to publish.
+     *
+     * Group 2 Item C (per-cell `TableFocusDetails` reuse cache) is
+     * deferred for Phase 6.6 - see the class-level JSDoc on
+     * `FocusState` for the deferral rationale.
+     */
+    _focus = new FocusState({
+        getAllowCopy: () => this.allowCopy,
+        getAllowQuickFiltering: () => this.allowQuickFiltering,
+        getColumnDefs: () => this.columnDefs,
+        getColumnVisibility: () => this.columnVisibility,
+        getVisualColumns: () => this._visualColumns,
+        getVisualColumnIndexById: (id) => this.columnVisualIndex(id),
+        getSortedDataLength: () => this.sortedData.length,
+        getPaginationRowModel: () => this.paginationRowModel,
+        copyDataToClipboard: () => this.copyDataToClipboard(),
+        toggleQuickFiltering: () => {
+            this.toggleQuickFiltering();
+        },
+        tabForward: () => {
+            this.tabForward();
+        },
+        tabBackward: () => {
+            this.tabBackward();
+        },
+        getDebug: () => this.debug,
+        // Phase 7.1 Item C - `getFocusDetailsFor` needs the parent
+        // `TableContext` to construct `TableFocusDetails` on cache-miss.
+        // Pass via a thunk so the sub-context never closes over `this`
+        // at construction time.
+        getTableContextRef: () => this,
     });
+    /**
+     * Phase 7.4 row-virtualisation sub-context. Owns the visible-row
+     * window plus the top / bottom spacer-height derived chain that
+     * `TableBody.svelte` renders. Threshold defaults to 100 rows
+     * (below that the legacy code path renders every row directly);
+     * overscan defaults to 10 rows above and below the viewport so a
+     * fast flick of the wheel does not surface a blank band before
+     * the next paint.
+     *
+     * Dependencies are thunks - the sub-context reads
+     * `paginationRowModel.rows` through `getRows`, the max-side
+     * observed height from the `_columnLayout` row-height pool
+     * through `getRowHeight`, and the per-table-density estimate
+     * through `getEstimatedRowHeight`.
+     */
+    /**
+     * Rendered widths of header cells, keyed by columnId. TableHead
+     * observes each `<div role="columnheader">` with a `ResizeObserver`
+     * and writes the actual rendered width here; TableRow / TableBody
+     * read these widths when computing sticky pinning offsets so that
+     * pinned columns can flex with `minmax(W, 1fr)` like centre columns
+     * (matching width-preservation expectation on pinning) while the
+     * sticky-cell offsets stay accurate.
+     *
+     * Fallback when a column has not yet been measured: 0. The first
+     * frame after pinning toggles may render with stale offsets but the
+     * resize observer fires immediately afterwards.
+     */
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    _columnRenderedWidths = new SvelteMap();
+    _virtualisation = new VirtualisationState({
+        getRows: () => this.paginationRowModel.rows,
+        // Row alignment is browser-handled in the single-grid layout, so
+        // the per-side height pool was deleted along with its observers.
+        // VirtualisationState falls back to `getEstimatedRowHeight` when
+        // no measured value is available, which is sufficient for
+        // determining the spacer heights to within one overscan band.
+        getRowHeight: () => 0,
+        getEstimatedRowHeight: () => (this.isCompact ? 28 : 48),
+    });
+    /**
+     * Delegating getter preserved for backwards compatibility. Reads
+     * through to `_sorting.sortedData`, which owns the comparator-hoist
+     * optimisation and the `AbortController` short-circuit. Consumers
+     * inside `src/lib` already point at `tableContext.sortedData`; the
+     * delegation will be removed once Phase 6 v-next migrates every
+     * reader to `tableContext._sorting.sortedData` directly.
+     */
+    get sortedData() {
+        return this._sorting.sortedData;
+    }
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     _sortedRowModel = $state({ rows: [], rowsById: new Map() });
     get sortedRowModel() {
@@ -965,490 +1179,139 @@ export class TableContext {
                     },
                 };
             };
-            const makeCellFromId = (columnId) => {
-                const def = this.columnDefsById.get(columnId);
-                if (!def) {
-                    throw new Error(`Could not find column with id ${columnId}`);
-                }
-                return makeRow(def);
-            };
-            const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId));
-            const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId));
-            const centerVisibleCells = $derived(this.columnDefs
+            // Iterating `this.columnDefs.filter(...)` instead of
+            // `this.columnPinning.left?.keys()` puts pinned-left body
+            // cells in declaration order (matching the header rendering
+            // and the `getVisualColumns` tab-order). Iterating the
+            // pinning Map's keys produced *insertion* order so that
+            // pinning Name then ID gave a body row of [Name, ID] while
+            // the header above it stayed [ID, Name]. See the duplicate
+            // factory in `createRow` below for the same fix.
+            const leftVisibleCells = $derived(this.columnDefs
                 .filter((it) => {
-                return !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id));
+                return (this.columnVisibility[it.id] !== false && this.columnPinning.left?.has(it.id) === true);
             })
                 .map(makeRow));
-            return row;
-        });
-    });
-    _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 = (item) => {
-        void item;
-        void this.isSelectable;
-        void this.selectedItems.size;
-        // if (!$effect.tracking()) {
-        // 	throw new Error(`selectionContains is not ran in a tracking context`);
-        // }
-        if (!this.isSelectable) {
-            return true;
-        }
-        const rawIdentity = this._cachedKey(item);
-        return rawIdentity instanceof Promise
-            ? rawIdentity.then((identity) => this.selectedItems.has(identity))
-            : this.selectedItems.has(rawIdentity);
-    };
-    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 = (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 = (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(raw, item);
-        }
-    };
-    resetHighlightedRows = () => {
-        this.highlightedItems.clear();
-    };
-    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 = (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 = this.sortedData;
-        const pageEndIndexExclusive = this.paginationRepo
-            ? Math.min(this.paginationRepo.pageEndIndexExclusive, sortedData.length)
-            : sortedData.length;
-        // 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);
-                }));
-            }
-            else {
-                pageKeyMap.set(raw, item);
-            }
-        }
-        if (pending.length > 0) {
-            await Promise.all(pending);
-        }
-        // Update only selected items that appear on this page (O(selected_size))
-        for (const key of this.selectedItems.keys()) {
-            const newItem = pageKeyMap.get(key);
-            if (newItem !== undefined) {
-                this.selectedItems.set(key, newItem);
-            }
-        }
-    };
-    resetSelectedItems = () => {
-        this._selectedItems.clear();
-    };
-    selectAllInCurrentPage = async () => {
-        void this.paginationRepo?.pageStartIndex;
-        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 sel = this.selectedItems; // HACK: keep the same svelteMap going so that we can support setSelectionMap()
-        // if this is deemed problematic, we'll need to find another way to ask for a new map from the context consumer
-        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) => {
-                        sel.delete(key);
-                    }));
-                }
-                else {
-                    sel.delete(raw);
-                }
-            }
-        }
-        else {
-            const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
-            if (selectableMethod) {
-                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) => {
-                                sel.set(key, item);
-                            });
-                        }
-                        sel.set(raw, item);
-                    };
-                    const r = s instanceof Promise ? s.then(doSet) : doSet(s);
-                    if (r instanceof Promise) {
-                        pending.push(r);
-                    }
-                }
-            }
-            else {
-                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) => {
-                            sel.set(key, item);
-                        }));
-                    }
-                    else {
-                        sel.set(raw, item);
-                    }
-                }
-            }
-        }
-        if (pending.length > 0) {
-            await Promise.all(pending);
-        }
-        // HACK
-        // this._selectedItems = cloned;
-    };
-    onHighlightAll = () => {
-        if (this.allHighlighted) {
-            // console.debug('All were highlighted. Clearing');
-            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);
-                    });
-                }
-                this.highlightedItems.set(raw, item);
-                return;
-            });
-        }
-    };
-    onEditCell = async (item, coords, value) => {
-        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 rawNewKey = this._cachedKey(item);
-            const newKey = rawNewKey instanceof Promise ? await rawNewKey : rawNewKey;
-            if (newKey) {
-                this.selectedItems.set(newKey, item);
-            }
-            // this.recalculateAllSelectedInCurrentPage();
-        }
-    };
-    handleTdKeydown = (e) => {
-        e.stopPropagation();
-        if (e.key.toLocaleUpperCase() === 'F' && e.ctrlKey && this.allowQuickFiltering) {
-            e.preventDefault();
-            this.toggleQuickFiltering();
-        }
-        else if (e.key === 'Escape') {
-            e.preventDefault();
-            this.focusStartIsBeingEdited = false;
-        }
-        else if (e.key === 'Tab') {
-            //allow regular operation in side panels
-            const target = e.target;
-            if (target?.closest('.side-panel') != null ||
-                target?.attributes.getNamedItem('data-type')?.value === 'quicksearch') {
-                return;
-            }
-            e.preventDefault();
-            if (e.getModifierState('Shift')) {
-                this.tabBackward();
-            }
-            else {
-                this.tabForward();
-            }
-        }
-        if (e.target.tagName === 'INPUT' &&
-            e.target.attributes.getNamedItem('type')?.value !== 'checkbox') {
-            return;
-        }
-        this.handleKeystroke(e).catch(devCatch);
-    };
-    async handleKeystroke(e) {
-        switch (e.key) {
-            case 'Enter':
-            case 'F2':
-                if (!e.target?.classList.contains('editable')) {
-                    break;
-                }
-                e.preventDefault();
-                e.target?.dispatchEvent(new CustomEvent('edit', { detail: { selectAll: e.key === 'Enter' } }));
-                // focusStartIsBeingEdited.set(true);
-                break;
-            case 'ArrowUp': {
-                e.preventDefault();
-                if (e.getModifierState('Control')) {
-                    if (e.getModifierState('Shift')) {
-                        if (!this.allowCopy) {
-                            return;
-                        }
-                        this.focusToTop();
-                    }
-                    else {
-                        this.moveToTop();
-                    }
-                }
-                else if (e.getModifierState('Shift')) {
-                    if (!this.allowCopy) {
-                        return;
-                    }
-                    this.moveFocusUp();
-                }
-                else {
-                    this.setFocusUp();
-                }
-                return;
-            }
-            case 'ArrowDown': {
-                e.preventDefault();
-                if (e.getModifierState('Control')) {
-                    if (e.getModifierState('Shift')) {
-                        if (!this.allowCopy) {
-                            return;
-                        }
-                        this.focusToBottom();
-                    }
-                    else {
-                        this.moveToBottom();
-                    }
-                }
-                else if (e.getModifierState('Shift')) {
-                    if (!this.allowCopy) {
-                        return;
-                    }
-                    this.moveFocusDown();
-                }
-                else {
-                    this.setFocusDown();
-                }
-                return;
-            }
-            // TODO add ctrl-home and ctrl-end as ways to get to top-left/bottom-right
-            case 'ArrowLeft':
-            case 'Home': {
-                e.preventDefault();
-                if (e.getModifierState('Control') || e.key === 'Home') {
-                    if (e.getModifierState('Shift')) {
-                        if (!this.allowCopy) {
-                            return;
-                        }
-                        this.focusToStart();
-                    }
-                    else {
-                        this.moveToStart();
-                    }
-                    //these two at the bottom shouldn't happen on a home press
-                }
-                else if (e.getModifierState('Shift') && this.allowCopy) {
-                    this.moveFocusLeft();
-                }
-                else {
-                    this.setFocusLeft();
-                }
-                return;
-            }
-            case 'ArrowRight':
-            case 'End': {
-                e.preventDefault();
-                if (e.getModifierState('Control') || e.key === 'End') {
-                    if (e.getModifierState('Shift')) {
-                        if (!this.allowCopy) {
-                            return;
-                        }
-                        this.focusToEnd();
-                    }
-                    else {
-                        this.moveToEnd();
-                    }
-                }
-                else if (e.getModifierState('Shift') && this.allowCopy) {
-                    this.moveFocusRight();
-                }
-                else {
-                    this.setFocusRight();
-                }
-                return;
-            }
-            default: {
-                if (this.debug) {
-                    console.log(`handleKeystroke: ignoring key ${e.key}`);
-                }
-                break;
-            }
-        }
-        if (this.allowCopy) {
-            switch (e.key) {
-                case 'a': {
-                    if (e.ctrlKey) {
-                        e.preventDefault();
-                        this.moveToTop();
-                        this.moveToStart();
-                        this.focusToBottom();
-                        this.focusToEnd();
-                    }
-                    break;
-                }
-                case 'c':
-                case 'C':
-                    if (e.getModifierState('Control')) {
-                        e.preventDefault();
-                        await this.copyDataToClipboard();
-                    }
-                    break;
-                default: {
-                    //nothing
-                    break;
-                }
-            }
-        }
+            const rightVisibleCells = $derived(this.columnDefs
+                .filter((it) => {
+                return (this.columnVisibility[it.id] !== false &&
+                    this.columnPinning.right?.has(it.id) === true);
+            })
+                .map(makeRow));
+            const centerVisibleCells = $derived(this.columnDefs
+                .filter((it) => {
+                return (this.columnVisibility[it.id] !== false &&
+                    !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id)));
+            })
+                .map(makeRow));
+            return row;
+        });
+    });
+    _paginationRowModel = $state({
+        rows: [],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        rowsById: new Map(),
+    });
+    get paginationRowModel() {
+        return this._paginationRowModel;
+    }
+    // #endregion
+    // #region public methods
+    /**
+     * Delegating wrapper preserved for backwards compatibility. The
+     * key-extraction cache lives on `_selection` (Phase 6.5); this
+     * method forwards to `_selection.cachedKey(item)` so legacy call
+     * sites in `getHighlightedRowData` / `getFocusElementData` /
+     * `originalRowIndices` / `sortedRowModel` / `onHighlightAll` see
+     * no behavioural change.
+     */
+    _cachedKey(item) {
+        return this._selection.cachedKey(item);
     }
+    /** Delegating accessor preserved for backwards compatibility. The
+     *  implementation lives on `_selection.selectionContains` (Phase 6.5). */
+    selectionContains = (item) => {
+        return this._selection.selectionContains(item);
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    addInvalidValue = (item) => {
+        return this._selection.addInvalidValue(item);
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    removeInvalidValue = (item) => {
+        return this._selection.removeInvalidValue(item);
+    };
+    /**
+     * Stores or clears the cell whose per-cell modal is currently open.
+     *
+     * Pass `{ row, columnId }` to open; pass `null` to close. The `row`
+     * value must be the same object reference the table holds for that row
+     * (`cell.row.original`) - identity comparison is what the cell
+     * renderers use to decide which one of them should render the modal.
+     */
+    setOpenModalCell = (cell) => {
+        this.openModalCell = cell ? { row: cell.row, columnId: cell.columnId } : null;
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    toggleHighlightedRow = (item) => {
+        return this._selection.toggleHighlightedRow(item);
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    resetHighlightedRows = () => {
+        this._selection.resetHighlightedRows();
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    toggleSelected = (item) => {
+        return this._selection.toggleSelected(item);
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    setSelected = (item, selected) => {
+        return this._selection.setSelected(item, selected);
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    setSelectionMap = (set) => {
+        this._selection.setSelectionMap(set);
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    updateSelectedItems = async () => {
+        await this._selection.updateSelectedItems();
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    resetSelectedItems = () => {
+        this._selection.resetSelectedItems();
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    selectAllInCurrentPage = async () => {
+        await this._selection.selectAllInCurrentPage();
+    };
+    /** Delegating accessor preserved for backwards compatibility. */
+    onHighlightAll = () => {
+        return this._selection.onHighlightAll();
+    };
+    /**
+     * Invoked by every editable cell on commit. Split between this
+     * class (the user-supplied edit callback) and `_selection`
+     * (the key-cache invalidation + selection-rebind half). The
+     * sub-context's `handleItemMutation` accepts a thunk that runs
+     * the consumer callback between the pre- and post-edit selection
+     * bookkeeping so the boundary stays explicit.
+     */
+    onEditCell = async (item, coords, value) => {
+        await this._selection.handleItemMutation(item, async () => {
+            await this._onEditCell?.(item, coords, value);
+        });
+    };
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * implementation lives on `_focus.handleTdKeydown` (Phase 6.6).
+     * Bound to the root `<table>` container's `onkeydown` listener;
+     * routes Ctrl+F / Escape / Tab synchronously and dispatches the
+     * arrow-key / Home / End / Ctrl+A / Ctrl+C path asynchronously.
+     */
+    handleTdKeydown = (e) => {
+        this._focus.handleTdKeydown(e);
+    };
+    /** Toggles quick-filtering visibility and refocuses the matching cell. */
     toggleQuickFiltering = () => {
         if (this.allowQuickFiltering) {
             const fs = this.focusStart;
@@ -1466,13 +1329,26 @@ export class TableContext {
                 .catch(devCatch);
         }
     };
+    /**
+     * Applies an updater to the column-pinning state (left / right
+     * pins). Delegates to `_columnLayout.setColumnPinning`, which
+     * enforces the `allowColumnReordering` master gate.
+     */
     setColumnPinning = (updater) => {
-        if (!this.allowColumnReordering) {
-            return;
-        }
-        this.columnPinning = updater(this.columnPinning);
+        this._columnLayout.setColumnPinning(updater);
     };
-    updateFilters = $state();
+    /**
+     * Delegating accessor preserved for backwards compatibility. The
+     * actual `$state` slot lives on `_filtering`; this getter / setter
+     * pair forwards reads and writes so existing consumers (notably
+     * `generateTableOptions`) need no migration.
+     */
+    get updateFilters() {
+        return this._filtering.updateFilters;
+    }
+    set updateFilters(v) {
+        this._filtering.updateFilters = v;
+    }
     updateVisibility = (stateOrCallback) => {
         if (typeof stateOrCallback == 'function') {
             this.columnVisibility = stateOrCallback(this.columnVisibility);
@@ -1495,6 +1371,7 @@ export class TableContext {
     // 	return this._rowModel;
     // }
     lastPage = $derived(this.dataRepo.lastPage ?? 0);
+    /** Canvas-measured width of a column header label, plus padding. */
     measureHeaderWidth = (columnDef) => {
         const label = columnDef.header;
         if (typeof label === 'string' && browser) {
@@ -1516,6 +1393,7 @@ export class TableContext {
         }
         return 0;
     };
+    /** Sizes a column to fit its widest current-page cell label. */
     autoResize = async (columnDef) => {
         if (!browser) {
             return;
@@ -1541,6 +1419,11 @@ export class TableContext {
         }
         this.columnSizing[colId] = maxWidth + 32; //standard extra cell padding
     };
+    /**
+     * Drops the in-progress column drag onto the supplied target,
+     * updating `columnDefs`, pinning state, and focus. No-op when
+     * column reordering is disabled.
+     */
     reorderColumn = (dropTarget) => {
         if (!this.allowColumnReordering) {
             return;
@@ -1602,6 +1485,41 @@ export class TableContext {
         this.columnDefs = newDefs;
         // this.forceVisibilityUpdate();
     };
+    /**
+     * Programmatic column-reorder primitive used by keyboard accessibility
+     * shortcuts in the column-management panel. Moves the column at
+     * {@link currentIndex} to {@link newIndex} (both expressed in the
+     * sorted-by-`index` order of {@link columnDefs}). No-op when column
+     * reordering is disabled or indices are out of range / unchanged.
+     */
+    moveColumnTo = (currentIndex, newIndex) => {
+        if (!this.allowColumnReordering) {
+            return;
+        }
+        const newDefs = this.columnDefs.concat();
+        newDefs
+            .sort((a, b) => a.index - b.index)
+            .forEach((element, index) => {
+            element.index = index;
+        });
+        if (currentIndex < 0 ||
+            currentIndex >= newDefs.length ||
+            newIndex < 0 ||
+            newIndex >= newDefs.length ||
+            currentIndex === newIndex) {
+            return;
+        }
+        const [moved] = newDefs.splice(currentIndex, 1);
+        newDefs.splice(newIndex, 0, moved);
+        newDefs.forEach((element, index) => {
+            element.index = index;
+        });
+        this._setNewPinningState();
+        this.updateDefsBasedOnPinning();
+        this.unfocus();
+        this.columnDefs = newDefs;
+    };
+    /** Copies the highlighted rows to the OS clipboard as TSV / CSV. */
     copyHighlightedRowsToClipboard = async () => {
         // NOTE: False Positive. Clipboard does not exist in http environments
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -1611,6 +1529,7 @@ export class TableContext {
         }
         return this._performRowCopy(await this.getHighlightedRowData());
     };
+    /** Copies the currently focused cell range to the OS clipboard. */
     copyDataToClipboard = async () => {
         // NOTE: False Positive. Clipboard does not exist in http environments
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -1645,11 +1564,13 @@ export class TableContext {
                     const value = columnOptions?.find((it) => it.value === focusedElementData[0][0])?.label ??
                         focusedElementData[0][0]?.toString() ??
                         '';
-                    return value;
+                    // Single-cell copy bypasses TSV/CSV wrapping but still lands
+                    // in a spreadsheet; neutralise formula-injection prefixes.
+                    return escapeForSpreadsheet(value);
                 }
                 else {
                     const value = focusedElementData[0][0]?.toString().trim() ?? '';
-                    return value;
+                    return escapeForSpreadsheet(value);
                 }
             }
             return `${shouldCopyHeaders ? `${focusedColumnIds.join(separator)}\n` : ''}${focusedElementData
@@ -1678,238 +1599,124 @@ export class TableContext {
         })();
         navigator.clipboard.writeText(value).catch(devCatch);
     };
+    /** Delegating accessor preserved for backwards compatibility. The
+     *  implementation lives on `_focus.startFocus` (Phase 6.6). */
     startFocus = (coords) => {
-        this.isMousingDown = true;
-        this.moveFocus(coords);
+        this._focus.startFocus(coords);
     };
+    /** Delegating accessor preserved for backwards compatibility. The
+     *  implementation lives on `_focus.moveFocus` (Phase 6.6). */
     moveFocus = (coords, startEditing = false) => {
-        this.focusStart = { ...coords };
-        this.focusEnd = { ...coords };
-        if (startEditing) {
-            tick()
-                .then(() => {
-                this.focusStartIsBeingEdited = true;
-            })
-                .catch(devCatch);
-        }
+        this._focus.moveFocus(coords, startEditing);
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     unfocus = () => {
-        this.focusStartIsBeingEdited = false;
-        this.focusStart = null;
-        this.focusEnd = null;
+        this._focus.unfocus();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     focusToTop = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        this._moveFocusEndRow(-Infinity);
+        this._focus.focusToTop();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     focusToBottom = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        this._moveFocusEndRow(Infinity);
+        this._focus.focusToBottom();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveToBottom = () => {
-        this._moveFocusRow(Infinity);
+        this._focus.moveToBottom();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveToTop = () => {
-        this._moveFocusRow(-Infinity);
+        this._focus.moveToTop();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveFocusUp = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        this._moveFocusEndRow(-1);
+        this._focus.moveFocusUp();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     setFocusUp = () => {
-        this._moveFocusRow(-1);
+        this._focus.setFocusUp();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     tabForward = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        const defs = this.columnDefs;
-        const visibility = this.columnVisibility;
-        const indexBounds = defs.length;
-        const rowBounds = this.sortedData.length;
-        if (!this.focusStart || !rowBounds) {
-            return;
-        }
-        let { column: index, row } = this.focusStart;
-        ++index;
-        while (row < rowBounds) {
-            while (index < indexBounds) {
-                const newId = defs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.moveFocus({ id: newId, row, column: index }, this.focusStartIsBeingEdited);
-                    return;
-                }
-                ++index;
-            }
-            index = 0;
-            ++row;
-        }
+        this._focus.tabForward();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     tabBackward = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        const maxIndexRight = this.columnDefs.length - 1;
-        const defs = this.columnDefs;
-        const visibility = this.columnVisibility;
-        if (!this.focusStart) {
-            return;
-        }
-        let { column: index, row } = this.focusStart;
-        --index;
-        while (row > -1) {
-            while (index > -1) {
-                const newId = defs[index].id;
-                if (newId && visibility[newId] !== false) {
-                    this.moveFocus({ id: newId, row, column: index }, this.focusStartIsBeingEdited);
-                    return;
-                }
-                --index;
-            }
-            index = maxIndexRight;
-            --row;
-        }
+        this._focus.tabBackward();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     focusToStart = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        if (!this.focusEnd) {
-            return;
-        }
-        const visualCols = this._visualColumns;
-        if (visualCols.length > 0) {
-            const first = visualCols[0];
-            this.focusEnd = { ...this.focusEnd, id: first.id, column: first.index };
-        }
+        this._focus.focusToStart();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveToStart = () => {
-        if (!this.focusStart) {
-            return;
-        }
-        const visualCols = this._visualColumns;
-        if (visualCols.length > 0) {
-            const first = visualCols[0];
-            this.moveFocus({ ...this.focusStart, id: first.id, column: first.index });
-        }
+        this._focus.moveToStart();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     focusToEnd = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        if (!this.focusEnd) {
-            return;
-        }
-        const visualCols = this._visualColumns;
-        if (visualCols.length > 0) {
-            const last = visualCols[visualCols.length - 1];
-            this.focusEnd = { ...this.focusEnd, id: last.id, column: last.index };
-        }
+        this._focus.focusToEnd();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveToEnd = () => {
-        if (!this.focusStart) {
-            return;
-        }
-        const visualCols = this._visualColumns;
-        if (visualCols.length > 0) {
-            const last = visualCols[visualCols.length - 1];
-            this.moveFocus({ ...this.focusStart, id: last.id, column: last.index });
-        }
+        this._focus.moveToEnd();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveFocusDown = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        this._moveFocusEndRow(1);
+        this._focus.moveFocusDown();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     setFocusDown = () => {
-        this._moveFocusRow(1);
+        this._focus.setFocusDown();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveFocusLeft = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        if (this.focusEnd != null) {
-            const visualCols = this._visualColumns;
-            const visualIndex = this.columnVisualIndex(this.focusEnd.id);
-            if (visualIndex > 0) {
-                const prev = visualCols[visualIndex - 1];
-                this.focusEnd = { ...this.focusEnd, id: prev.id, column: prev.index };
-            }
-        }
+        this._focus.moveFocusLeft();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     setFocusLeft = () => {
-        if (!this.focusStart) {
-            return;
-        }
-        const visualCols = this._visualColumns;
-        const visualIndex = this.columnVisualIndex(this.focusStart.id);
-        if (visualIndex > 0) {
-            const prev = visualCols[visualIndex - 1];
-            this.moveFocus({ ...this.focusStart, id: prev.id, column: prev.index });
-        }
+        this._focus.setFocusLeft();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     moveFocusRight = () => {
-        if (!this.allowCopy) {
-            return;
-        }
-        if (this.focusEnd != null) {
-            const visualCols = this._visualColumns;
-            const visualIndex = this.columnVisualIndex(this.focusEnd.id);
-            if (visualIndex < visualCols.length - 1) {
-                const next = visualCols[visualIndex + 1];
-                this.focusEnd = { ...this.focusEnd, id: next.id, column: next.index };
-            }
-        }
+        this._focus.moveFocusRight();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     setFocusRight = () => {
-        if (!this.focusStart) {
-            return;
-        }
-        const visualCols = this._visualColumns;
-        const visualIndex = this.columnVisualIndex(this.focusStart.id);
-        if (visualIndex < visualCols.length - 1) {
-            const next = visualCols[visualIndex + 1];
-            this.moveFocus({ ...this.focusStart, id: next.id, column: next.index });
-        }
+        this._focus.setFocusRight();
     };
+    /** Delegating accessor preserved for backwards compatibility. */
     endFocus = (coords) => {
-        if (this.isMousingDown) {
-            this.isMousingDown = false;
-            if (!this.allowCopy) {
-                return;
-            }
-            this.focusEnd = { ...coords };
-        }
+        this._focus.endFocus(coords);
     };
+    /** Toggles compact row sizing and persists to localStorage. */
     setIsCompact = (value) => {
         this.isCompact = value;
         this._updateLocalStorageSettings();
     };
+    /** Toggles alternating row colours and persists to localStorage. */
     setAlternateRowColours = (value) => {
         this.alternateRowColours = value;
         this._updateLocalStorageSettings();
     };
+    /** Toggles single-click editing and persists to localStorage. */
     setSingleClickEditing = (value) => {
         this.singleClickEditing = value;
         this._updateLocalStorageSettings();
     };
+    /** Toggles row-hover colour change and persists to localStorage. */
     setChangeColourOnHover = (value) => {
         this.changeColourOnHover = value;
         this._updateLocalStorageSettings();
     };
+    /** Toggles whether copy-to-clipboard prepends a header row and persists. */
     setCopyWithHeaders = (value) => {
         if (this.allowCopy) {
             this.copyWithHeaders = value;
             this._updateLocalStorageSettings();
         }
     };
+    /** Toggles CSV vs TSV copy-to-clipboard separator and persists. */
     setCommaSeparatedCopy = (value) => {
         if (this.allowCopy) {
             this.commaSeparatedCopy = value;
@@ -1929,63 +1736,41 @@ export class TableContext {
     // 		});
     // 	}
     // };
+    /**
+     * Delegating method preserved for backwards compatibility. Applies
+     * the preset to the live column layout, forwards the preset's
+     * `sortingState` to the data-repository updater, and persists the
+     * selected name. The underlying implementation lives on
+     * `_preferences.setSelectedPreset` (Phase 6.4).
+     *
+     * The pre-extraction debug warning ("no sorting state found") was
+     * emitted unconditionally when `paginationRepo.updateSorting` was
+     * absent; the sub-context skips that warning because the
+     * `applySortingState` thunk already no-ops in that case. The
+     * warning is reinstated below so the surface is byte-identical.
+     */
     setSelectedPreset = (preset) => {
-        if (this.debug) {
-            console.log('setting selected preset:', preset);
-        }
-        this.columnDefs = preset.columnDefs;
         if (!this.paginationRepo?.updateSorting) {
             console.warn('no sorting state found');
         }
-        this.paginationRepo?.updateSorting?.(preset.sortingState);
-        this.columnVisibility = preset.visibilityState;
-        this.columnPinning = preset.columnPinningState;
-        this.selectedPreset = preset;
-        localStorage.setItem(`${this.userId}-${this.tableName}-selected-preset-name`, preset.name);
+        this._preferences.setSelectedPreset(preset);
     };
+    /**
+     * Delegating method preserved for backwards compatibility. Adds or
+     * replaces a saved preset for the current column layout and
+     * persists the full preset list to localStorage. Delegates to
+     * `_preferences.saveColumnPreset` (Phase 6.4).
+     */
     saveColumnPreset = (name) => {
-        if (!name) {
-            return;
-        }
-        const visibilityState = this.columnVisibility;
-        const columnPinningState = this.columnPinning;
-        const columnDefs = this.columnDefs;
-        const sortingState = this.paginationRepo?.sorting || [];
-        const newPreset = { columnDefs, name, visibilityState, columnPinningState, sortingState };
-        const lowercasePresetname = name.toLocaleLowerCase();
-        const indexToReplace = this.columnPresets.findIndex((oldPreset) => oldPreset.name.toLocaleLowerCase() === lowercasePresetname);
-        const newPresets = this.columnPresets.concat();
-        if (indexToReplace > -1) {
-            newPresets[indexToReplace] = newPreset;
-        }
-        else {
-            newPresets.push(newPreset);
-        }
-        this.columnPresets = newPresets;
-        const jsonFriendly = newPresets.map((preset) => {
-            return {
-                ...preset,
-                columnDefs: preset.columnDefs.map((it) => {
-                    return { ...it.toJSON(), header: it.header.toString() };
-                }),
-                columnPinningState: {
-                    left: [...(preset.columnPinningState.left?.entries() ?? [])],
-                    right: [...(preset.columnPinningState.right?.entries() ?? [])],
-                },
-            };
-        });
-        const stringified = JSON.stringify(jsonFriendly);
-        localStorage.setItem(`${this.userId}-${this.tableName}-presets`, stringified);
-        this.setSelectedPreset(newPreset);
+        this._preferences.saveColumnPreset(name);
     };
     /**
      * This listener should be added and removed based on isMousingDown
      */
+    /** Delegating accessor preserved for backwards compatibility. The
+     *  implementation lives on `_focus.setFocusEnd` (Phase 6.6). */
     setFocusEnd = (coords) => {
-        if (!this.allowCopy) {
-            return;
-        }
-        this.focusEnd = coords;
+        this._focus.setFocusEnd(coords);
     };
     // #region private methods
     createRow(item, index, unsortedIndex) {
@@ -2041,18 +1826,36 @@ export class TableContext {
                 },
             };
         };
-        const makeCellFromId = (columnId) => {
-            const def = this.columnDefsById.get(columnId);
-            if (!def) {
-                throw new Error(`Could not make cell from id ${columnId}: Coloumn Def was not found`);
-            }
-            return makeRow(def);
-        };
-        const leftVisibleCells = $derived([...(this.columnPinning.left?.keys() ?? [])].map(makeCellFromId));
-        const rightVisibleCells = $derived([...(this.columnPinning.right?.keys() ?? [])].map(makeCellFromId));
+        // Visibility filter applied to every cell collection so the cell
+        // count in TableRow stays in sync with the visible-column count
+        // that drives `--cols` in Table.svelte. Without this, a hidden
+        // non-pinned column would still produce an empty cell wrapper in
+        // the row, which would overflow the grid template and force the
+        // extra cell onto an implicit grid row (visually splitting each
+        // data row into two or three lines).
+        //
+        // Iterating `this.columnDefs.filter(...)` instead of
+        // `this.columnPinning.left?.keys()` puts pinned-left body cells
+        // in declaration order (matching the header rendering and the
+        // `getVisualColumns` tab-order). Iterating the pinning Map's
+        // keys produced *insertion* order: pinning Name then ID gave a
+        // body row of [Name, ID] while the header row above it was
+        // [ID, Name], and tab navigation walked [Name, ID] instead of
+        // the visually-left-to-right [ID, Name].
+        const leftVisibleCells = $derived(this.columnDefs
+            .filter((it) => {
+            return (this.columnVisibility[it.id] !== false && this.columnPinning.left?.has(it.id) === true);
+        })
+            .map(makeRow));
+        const rightVisibleCells = $derived(this.columnDefs
+            .filter((it) => {
+            return (this.columnVisibility[it.id] !== false && this.columnPinning.right?.has(it.id) === true);
+        })
+            .map(makeRow));
         const centerVisibleCells = $derived(this.columnDefs
             .filter((it) => {
-            return !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id));
+            return (this.columnVisibility[it.id] !== false &&
+                !(this.columnPinning.left?.has(it.id) || this.columnPinning.right?.has(it.id)));
         })
             .map(makeRow));
         return row;
@@ -2062,87 +1865,57 @@ export class TableContext {
             this.columnVisibility[it.id] !== false &&
             !uncopyableColumns.has(it.columnType));
     };
+    /**
+     * Builds the user-controlled settings blob from the current
+     * `$state` slots and delegates the actual `localStorage.setItem`
+     * call to `_preferences.persistSettings` (Phase 6.4). The settings
+     * field set (`isCompact`, `singleClickEditing`, etc.) still lives
+     * on `TableContext` because each one drives reactive UI; only the
+     * persistence side of the boundary moved.
+     */
     _updateLocalStorageSettings() {
-        const isCompact = this.isCompact;
-        const singleClickEditing = this.singleClickEditing;
-        const alternateRowColours = this.alternateRowColours;
-        const copyWithHeaders = this.copyWithHeaders;
-        const commaSeparatedCopy = this.commaSeparatedCopy;
-        const changeColourOnHover = this.changeColourOnHover;
         const settingsObject = {
-            isCompact,
-            singleClickEditing,
-            alternateRowColours,
-            changeColourOnHover,
-            copyWithHeaders,
-            commaSeparatedCopy,
+            isCompact: this.isCompact,
+            singleClickEditing: this.singleClickEditing,
+            alternateRowColours: this.alternateRowColours,
+            changeColourOnHover: this.changeColourOnHover,
+            copyWithHeaders: this.copyWithHeaders,
+            commaSeparatedCopy: this.commaSeparatedCopy,
         };
-        localStorage.setItem(`${this.userId}-${this.tableName}-settings`, JSON.stringify(settingsObject));
+        this._preferences.persistSettings(settingsObject);
     }
     /**
-     * Columns in visual display order: pinned-left → center → pinned-right,
-     * preserving memory order within each section. Only includes visible columns.
+     * Delegating accessor preserved for backwards compatibility. The
+     * cached visual-column array and its paired O(1) id->index map now
+     * live on `_columnLayout` (Phase 6.3). The underscore prefix is
+     * preserved on `TableContext` to keep the existing read sites in
+     * `tabForward` / `focusToStart` / `moveFocusLeft` / etc. untouched.
      */
     get _visualColumns() {
-        const visibility = this.columnVisibility;
-        const pinLeft = this.columnPinning.left;
-        const pinRight = this.columnPinning.right;
-        const visible = this.columnDefs.filter((it) => visibility[it.id] !== false);
-        return [
-            ...visible.filter((it) => pinLeft?.has(it.id)),
-            ...visible.filter((it) => !pinLeft?.has(it.id) && !pinRight?.has(it.id)),
-            ...visible.filter((it) => pinRight?.has(it.id)),
-        ];
+        return this._columnLayout.visualColumns;
     }
-    /** Returns the visual index of the column with the given id, or -1 if not found. */
+    /** Returns the visual index of the column with the given id, or
+     *  -1 if not found. Delegates to `_columnLayout.columnVisualIndex`
+     *  which provides the O(1) lookup. */
     columnVisualIndex(id) {
-        return this._visualColumns.findIndex((it) => it.id === id);
+        return this._columnLayout.columnVisualIndex(id);
     }
+    /**
+     * Delegating getter preserved for backwards compatibility. The
+     * implementation lives on `_focus.focusStartVisualColumn`
+     * (Phase 6.6); the visual-index lookup itself is owned by
+     * `_columnLayout.columnVisualIndex` (Phase 6.3).
+     */
     get focusStartVisualColumn() {
-        if (!this.focusStart) {
-            return -1;
-        }
-        return this.columnVisualIndex(this.focusStart.id);
+        return this._focus.focusStartVisualColumn;
     }
+    /**
+     * Delegating getter preserved for backwards compatibility. The
+     * implementation lives on `_focus.focusEndVisualColumn`
+     * (Phase 6.6).
+     */
     get focusEndVisualColumn() {
-        if (!this.focusEnd) {
-            return -1;
-        }
-        return this.columnVisualIndex(this.focusEnd.id);
-    }
-    _moveFocusEndRow(offset) {
-        if (!this.allowCopy) {
-            return;
-        }
-        if (!this.focusEnd) {
-            console.warn('no focusEnd found');
-            return;
-        }
-        // if (!$effect.tracking()) {
-        // 	throw new Error(`_moveFocusEndRow is not in a tracking context.`);
-        // }
-        const focusEnd = this.focusEnd;
-        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,
-        };
-    }
-    _moveFocusRow(offset) {
-        if (!this.focusStart) {
-            console.warn('no focusStart found');
-            return;
-        }
-        const focusStart = this.focusStart;
-        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;
-        })();
-        this.moveFocus({ ...this.focusStart, row: newEndRowIndex });
+        return this._focus.focusEndVisualColumn;
     }
     async getHighlightedRowData() {
         const affectedColumns = this.columnDefs.filter(this.columnDefReturnsTextValue);
@@ -2289,28 +2062,7 @@ export class TableContext {
         };
     }
     updateDefsBasedOnPinning = () => {
-        const leftDefs = [];
-        const midDefs = [];
-        const rightDefs = [];
-        this.columnDefs.forEach((def) => {
-            if (this.columnPinning.left?.has(def.id)) {
-                leftDefs.push(def);
-            }
-            else if (this.columnPinning.right?.has(def.id)) {
-                rightDefs.push(def);
-            }
-            else {
-                midDefs.push(def);
-            }
-        });
-        leftDefs.sort((a, b) => a.index - b.index);
-        midDefs.sort((a, b) => a.index - b.index);
-        rightDefs.sort((a, b) => a.index - b.index);
-        const allDefs = leftDefs.concat(midDefs, rightDefs);
-        allDefs.forEach((def, index) => {
-            def.index = index;
-        });
-        return allDefs;
+        return this._columnLayout.updateDefsBasedOnPinning();
     };
     assertNoDuplicateIds() {
         // eslint-disable-next-line svelte/prefer-svelte-reactivity
@@ -2322,10 +2074,8 @@ export class TableContext {
             foundIds.add(def.id);
         });
     }
-    // FIXME
     // eslint-disable-next-line @typescript-eslint/require-await
     async setupDefaultColumnDefs() {
-        // const helper = createColumnHelper<T>();
         this.assertNoDuplicateIds();
         const adjustedDefsPromises = this.defaultColumnDefs.defs.map((def) => {
             if (def instanceof AccessorDef) {
@@ -2460,47 +2210,44 @@ export class TableContext {
         this.columnDefs = adjustedDefs;
         return adjustedDefs;
     }
+    /**
+     * Reads the persisted per-table user-settings blob through
+     * `_preferences.loadSavedSettings` (Phase 6.4) and applies each
+     * field to the live `$state` slot. Field defaults mirror the
+     * pre-extraction behaviour:
+     *
+     * - missing slot: `singleClickEditing` defaults to `true`; every
+     *   other field keeps its constructor default.
+     * - present slot: each field is applied if it would deviate from
+     *   the constructor default (the "only alter when the user
+     *   explicitly disabled" semantics are preserved verbatim).
+     */
     _getUserDefaults() {
-        const savedSettings = localStorage.getItem(`${this.userId}-${this.tableName}-settings`);
-        if (savedSettings) {
-            const saved = JSON.parse(savedSettings);
-            this.singleClickEditing = saved.singleClickEditing ?? true;
-            if (saved.alternateRowColours) {
-                this.alternateRowColours = true;
-            }
-            if (saved.commaSeparatedCopy) {
-                this.commaSeparatedCopy = true;
-            }
-            // these are true by default so we only want to alter them if the user wants them disabled
-            if (saved.isCompact === false) {
-                this.isCompact = false;
-            }
-            if (saved.copyWithHeaders === false) {
-                this.copyWithHeaders = false;
-            }
-            if (saved.changeColourOnHover === false) {
-                this.changeColourOnHover = false;
-            }
-        }
-        else {
+        const saved = this._preferences.loadSavedSettings();
+        if (saved === null) {
             this.singleClickEditing = true;
+            return;
+        }
+        this.singleClickEditing = saved.singleClickEditing ?? true;
+        if (saved.alternateRowColours) {
+            this.alternateRowColours = true;
+        }
+        if (saved.commaSeparatedCopy) {
+            this.commaSeparatedCopy = true;
+        }
+        // these are true by default so we only want to alter them if the user wants them disabled
+        if (saved.isCompact === false) {
+            this.isCompact = false;
+        }
+        if (saved.copyWithHeaders === false) {
+            this.copyWithHeaders = false;
+        }
+        if (saved.changeColourOnHover === false) {
+            this.changeColourOnHover = false;
         }
     }
     _setNewPinningState() {
-        this.columnPinning = {
-            // 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])),
-            // 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])),
-        }; // TODO
+        this._columnLayout.setNewPinningState();
     }
     getToggleSortingHandler = (def) => () => {
         this.paginationRepo?.updateSorting?.((state) => {
@@ -2524,7 +2271,6 @@ export class TableContext {
             return newState;
         });
     };
-    // FIXME
     // eslint-disable-next-line @typescript-eslint/require-await
     async reassignDefsToPresets(presets) {
         const adjustedDefs = this.columnDefs;
@@ -2591,9 +2337,51 @@ export function isSearchable(def) {
 function hasPagination(repository) {
     return 'setPage' in repository;
 }
+/**
+ * Neutralises CSV / TSV formula-injection prefixes recognised by Excel,
+ * LibreOffice Calc, Google Sheets, and Apple Numbers.
+ *
+ * When a clipboard payload reaches a spreadsheet, any cell whose first
+ * character is one of `=`, `+`, `-`, `@`, `\t`, `\r` is treated as a
+ * formula and evaluated in the user's context. Untrusted row data
+ * containing `=cmd|'/c calc'!A1` (or DDE / web-query equivalents) is the
+ * canonical attack vector. Prefixing such a value with a single quote
+ * (`'`) makes the spreadsheet interpret the cell as a literal string
+ * instead.
+ *
+ * Trade-off: the leading apostrophe is invisible in the rendered cell of
+ * every major spreadsheet, but the underlying cell value differs from the
+ * source when read back by another formula referencing the cell. This is
+ * the accepted industry mitigation (OWASP CSV Injection cheat sheet).
+ *
+ * Private helper - keep this colocated with `encapsulate` so every
+ * clipboard-bound string flows through both functions before being
+ * written to the OS clipboard.
+ */
+function escapeForSpreadsheet(value) {
+    if (value.length === 0) {
+        return value;
+    }
+    const first = value.charCodeAt(0);
+    // '=' 61, '+' 43, '-' 45, '@' 64, '\t' 9, '\r' 13
+    if (first === 61 || first === 43 || first === 45 || first === 64 || first === 9 || first === 13) {
+        return `'${value}`;
+    }
+    return value;
+}
 function encapsulate(value) {
-    return `"${value.replace(/[\n]/gm, ' ').replace(/["]/g, '""')}"`;
+    const safe = escapeForSpreadsheet(value);
+    return `"${safe.replace(/[\n]/gm, ' ').replace(/["]/g, '""')}"`;
 }
+/**
+ * Internal exports for tests. Not part of the public API; do not import
+ * from consumer code. Allows the clipboard formula-escape regression test
+ * to call the module-private helpers directly.
+ */
+export const _internal = {
+    escapeForSpreadsheet,
+    encapsulate,
+};
 function generateTableOptions(contextObj) {
     const _pagination = $derived.by(() => {
         void contextObj.paginationRepo?.paginationState.pageSize;
@@ -2616,6 +2404,22 @@ function generateTableOptions(contextObj) {
         let originalWidth = 0;
         let mouseStartingPoint = 0;
         function addOverrideResizeHandler(e) {
+            // Capture the column's currently rendered width as the
+            // drag's starting point, then mark this column as
+            // user-resized. Going forward the grid template will use a
+            // fixed `${width}px` track for this column (see
+            // `Table.svelte` colsTemplate) so dragging the handle only
+            // changes this column. Other columns that have not yet
+            // been user-resized continue to flex via `minmax(W, 1fr)`,
+            // which means they automatically take up any horizontal
+            // space the resized column gives back when shrunk - the
+            // table never ends up narrower than its container while
+            // any column still flexes.
+            const rendered = contextObj._columnRenderedWidths.get(def.id);
+            if (rendered != null && rendered > 0) {
+                def.width = rendered;
+            }
+            def.userResized = true;
             originalWidth = def.width;
             mouseStartingPoint = e.clientX;
             def.isResizing = true;
@@ -2623,7 +2427,14 @@ function generateTableOptions(contextObj) {
             window.addEventListener('mouseup', removeOverrideResizeHandler);
         }
         function onResize(e) {
-            def.width = originalWidth - (mouseStartingPoint - e.clientX);
+            // Clamp the resize floor so the column can never reach a
+            // negative or zero width. With the div+grid layout a
+            // non-positive `width` produces an invalid track size
+            // in `grid-template-columns`, which makes the browser
+            // fall back to single-column block layout and visually
+            // collapses the row.
+            const next = originalWidth - (mouseStartingPoint - e.clientX);
+            def.width = Math.max(next, 20);
         }
         function removeOverrideResizeHandler() {
             def.isResizing = false;
@@ -2753,111 +2564,6 @@ function generateTableOptions(contextObj) {
         // }
     };
 }
-function checkboxSortingFn(id, desc) {
-    return desc
-        ? (a, b) => {
-            if (a[id] && !b[id]) {
-                return 1;
-            }
-            if (!a[id] && b[id]) {
-                return -1;
-            }
-            return 0;
-        }
-        : (a, b) => {
-            if (a[id] && !b[id]) {
-                return -1;
-            }
-            if (!a[id] && b[id]) {
-                return 1;
-            }
-            return 0;
-        };
-}
-function comparableSortingFn(id, desc) {
-    return desc
-        ? (a, b) => {
-            if (a[id] == undefined && b[id] != undefined) {
-                return 1;
-            }
-            if (b[id] == undefined && a[id] != undefined) {
-                return -1;
-            }
-            if (a[id] < b[id]) {
-                return 1;
-            }
-            if (a[id] > b[id]) {
-                return -1;
-            }
-            return 0;
-        }
-        : (a, b) => {
-            if (a[id] == undefined && b[id] != undefined) {
-                return 1;
-            }
-            if (b[id] == undefined && a[id] != undefined) {
-                return -1;
-            }
-            if (a[id] < b[id]) {
-                return -1;
-            }
-            if (a[id] > b[id]) {
-                return 1;
-            }
-            return 0;
-        };
-}
-function progressSortingFn(id, desc) {
-    return desc
-        ? (a, b) => {
-            const [minA, maxA] = a[id];
-            const [minB, maxB] = b[id];
-            if (minA == undefined || maxA == undefined || maxA == 0) {
-                if (maxB != undefined && maxB != 0) {
-                    return 1;
-                }
-                else {
-                    return 0;
-                }
-            }
-            if (minB == undefined || maxB == undefined || maxB == 0) {
-                return -1;
-            }
-            const valueA = minA / maxA;
-            const valueB = minB / maxB;
-            if (valueA < valueB) {
-                return 1;
-            }
-            if (valueB < valueA) {
-                return -1;
-            }
-            return 0;
-        }
-        : (a, b) => {
-            const [minA, maxA] = a[id];
-            const [minB, maxB] = b[id];
-            if (minA == undefined || maxA == undefined || maxA == 0) {
-                if (maxB != undefined && maxB != 0) {
-                    return -1;
-                }
-                else {
-                    return 0;
-                }
-            }
-            if (minB == undefined || maxB == undefined || maxB == 0) {
-                return 1;
-            }
-            const valueA = minA / maxA;
-            const valueB = minB / maxB;
-            if (valueA < valueB) {
-                return -1;
-            }
-            if (valueB < valueA) {
-                return 1;
-            }
-            return 0;
-        };
-}
 function adaptJSONPinningState(state) {
     //HACK ignore previously broken pinning states
     return {