@lavalogic/scoria 0.19.5 → 0.21.0

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -13,7 +13,7 @@
 	import TextInput from '../../TextInput.svelte';
 	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
 	import DateModal from '../../Touch/DateModal.svelte';
-	import { devCatch, hasQuery, isDateTuple, isNumberTuple } from '../../../Helpers/Helpers.svelte.js';
+	import { devCatch, hasQuery, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../../../scss/colours.js';
 	import { InputVariant } from '../../../Types/Internal/InputVariant.js';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
@@ -247,7 +247,7 @@
 			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
 
 		if (filterOption) {
-			if (isNumberTuple(filterOption.value)) {
+			if (isNumericArray(filterOption.value)) {
 				[valueMin, valueMax] = filterOption.value;
 				if (valueMax == undefined) {
 					valueMax = valueMin;

package/dist/Components/Table/Body/Rows/Columns/TableRowSelectionCheckbox.svelte

@@ -9,7 +9,7 @@
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, getErrorMessage, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick, untrack } from 'svelte';
 	import type { ChangeEventHandler } from 'svelte/elements';
@@ -31,7 +31,7 @@
 		new TableFocusDetails(cell, tableContext)
 	);
 
-	const keyPromise: Promise<RowIdType> = $derived(
+	const keyOrPromise: RowIdType | Promise<RowIdType> = $derived(
 		tableContext.selectionExtractor(cell.row.original)
 	);
 	const isSelectable = $derived(
@@ -41,14 +41,26 @@
 		)
 	);
 
-	const isSelectedPromise = $derived.by(async () => {
-		void keyPromise;
-		void isSelectable;
-		void tableContext.selectedItems.size;
-
-		const key = await keyPromise;
+	// Sync path (common): uses selectedItems.has(key) for per-key reactive tracking —
+	// only this row's checkbox re-runs when its specific key changes.
+	// Async path (rare): returns null and defers to _isSelectedAsync updated by the $effect below.
+	const isSelected: boolean | null = $derived.by(() => {
+		const k = keyOrPromise;
+		if (k instanceof Promise) {
+			void tableContext.selectedItems.size; // async fallback: re-run when any selection changes
+			return null;
+		}
+		return tableContext.selectedItems.has(k);
+	});
 
-		return tableContext.selectedItems.has(key);
+	let _isSelectedAsync: boolean = $state(false);
+	$effect(() => {
+		const k = keyOrPromise;
+		if (!(k instanceof Promise)) { return; }
+		void tableContext.selectedItems.size; // re-run when selection changes
+		k.then((key) => {
+			_isSelectedAsync = tableContext.selectedItems.has(key);
+		}).catch(devCatch);
 	});
 
 	let previousValidity: Validity = $state(Validity.Valid);
@@ -74,7 +86,7 @@
 			untrack(() => {
 				tick()
 					.then(() => {
-						const x: Promise<void> =
+						const x: void | Promise<void> =
 							validity === Validity.Invalid
 								? tableContext.addInvalidValue(cell.row.original)
 								: tableContext.removeInvalidValue(cell.row.original);
@@ -88,7 +100,7 @@
 	});
 
 	const onchange: ChangeEventHandler<HTMLInputElement> = () => {
-		tableContext.toggleSelected(cell.row.original).catch(devCatch);
+		tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
 	};
 
 	let inputRef: HTMLInputElement | undefined = $state();
@@ -121,7 +133,7 @@
 		if (e.key === 'Enter') {
 			e.stopPropagation();
 
-			tableContext.toggleSelected(cell.row.original).catch(devCatch);
+			tableContext.toggleSelected(cell.row.original)?.catch(devCatch);
 
 			inputRef?.dispatchEvent(new InputEvent('change'));
 			// tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);
@@ -141,25 +153,14 @@
 		class:multifocus-start={focusDetails.isMultiFocusStart}
 		style={focusDetails.outline}
 	>
-		{#await isSelectedPromise}
-			<input
-				id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-				type="checkbox"
-				checked={false}
-				disabled
-			/>
-		{:then isSelected}
-			<input
-				id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-				bind:this={inputRef}
-				{onchange}
-				type="checkbox"
-				checked={isSelected}
-				disabled={!isSelectable || tableContext.showSelectedOnly}
-			/>
-		{:catch e}
-			Error: {getErrorMessage(e)}
-		{/await}
+		<input
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			bind:this={inputRef}
+			{onchange}
+			type="checkbox"
+			checked={isSelected ?? _isSelectedAsync}
+			disabled={!isSelectable || tableContext.showSelectedOnly}
+		/>
 	</label>
 </td>
 

package/dist/Components/Table/Body/Rows/TableRow.svelte

@@ -165,7 +165,7 @@ onMouseLeave={onMouseLeave} -->
 				})()}
 			{highlighted}
 			toggleHighlightedRow={() => {
-				tableContext.toggleHighlightedRow(row.original).catch(devCatch);
+				tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
 			}}
 		/>
 	{/if}

package/dist/Components/Table/Body/TableBody.svelte

@@ -32,6 +32,10 @@
 	// 		return _rowHeights;
 	// 	}
 	// };
+
+	// $inspect(tableContext.paginationRowModel).with((...v) => {
+	// 	console.trace(...v);
+	// });
 </script>
 
 <tbody>
@@ -49,22 +53,20 @@
 		</tr>
 	{/if}
 
-	{#await tableContext.paginationRowModel then prm}
-		{#each prm.rows as row, index (row)}
-			<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
+	{#each tableContext.paginationRowModel.rows as row, index (row.visibleIndex)}
+		<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
 					? heights[index].maxHeight
 					: undefined} -->
-			<!-- {customHeight} -->
-			<TableRow
-				customHeight={undefined}
-				{includeHighlight}
-				{row}
-				{side}
-				odd={index % 2 == 1}
-			/>
-			<!-- bind:this={rows[index]} -->
-		{/each}
-	{/await}
+		<!-- {customHeight} -->
+		<TableRow
+			customHeight={undefined}
+			{includeHighlight}
+			{row}
+			{side}
+			odd={index % 2 == 1}
+		/>
+		<!-- bind:this={rows[index]} -->
+	{/each}
 </tbody>
 
 <style>td {

package/dist/Components/Table/Headers/HighlightAllHeader.svelte

@@ -13,18 +13,8 @@
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	let allHighlighted = $state(false);
-
-	$effect(() => {
-		tableContext.allHighlighted
-			.then((flag) => {
-				allHighlighted = flag;
-			})
-			.catch(devCatch);
-	});
-
-	const backgroundColour = $derived.by(async () => {
-		return (await tableContext.sortedData).length > 0 && allHighlighted
+	const backgroundColour = $derived.by(() => {
+		return tableContext.sortedData.length > 0 && tableContext.allHighlighted
 			? Colour['$brand-primary']
 			: Colour['$ui-white'];
 	});
@@ -32,30 +22,17 @@
 
 <div class="checkbox-cell">
 	<div class="wrapper">
-		{#await backgroundColour}
-			<Action
-				hoverBackgroundColour={Colour['$brand-dark']}
-				size={Size.FillWidth}
-				icon={{
-					name: 'nothing',
-				}}
-				onclick={() => {
-					tableContext.onHighlightAll();
-				}}
-			/>
-		{:then backgroundColour}
-			<Action
-				{backgroundColour}
-				hoverBackgroundColour={Colour['$brand-dark']}
-				size={Size.FillWidth}
-				icon={{
-					name: 'nothing',
-				}}
-				onclick={() => {
-					tableContext.onHighlightAll();
-				}}
-			/>
-		{/await}
+		<Action
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			icon={{
+				name: 'nothing',
+			}}
+			onclick={() => {
+				tableContext.onHighlightAll()?.catch(devCatch);
+			}}
+		/>
 	</div>
 </div>
 

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -9,29 +9,19 @@
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	const allSelected: Promise<boolean> = $derived(tableContext.allSelectedInCurrentPage);
-	const checked: Promise<boolean> = $derived.by(() => {
-		return tableContext.dataRepo.data.length > 0 ? allSelected : Promise.resolve(false);
-	});
+	const checked: boolean = $derived(
+		tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false
+	);
 </script>
 
 <div class="checkbox-cell">
 	<label>
-		{#await checked}
-			<input
-				onchange={tableContext.selectAllInCurrentPage}
-				type="checkbox"
-				checked={false}
-				disabled={tableContext.showSelectedOnly}
-			/>
-		{:then checked}
-			<input
-				onchange={tableContext.selectAllInCurrentPage}
-				type="checkbox"
-				{checked}
-				disabled={tableContext.showSelectedOnly}
-			/>
-		{/await}
+		<input
+			onchange={tableContext.selectAllInCurrentPage}
+			type="checkbox"
+			{checked}
+			disabled={tableContext.showSelectedOnly}
+		/>
 	</label>
 </div>
 

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -12,7 +12,7 @@
 	import SingleSelect from '../../SingleSelect.svelte';
 	import TextInput from '../../TextInput.svelte';
 	import DateModal from '../../Touch/DateModal.svelte';
-	import { devCatch, hasQuery, isDateTuple, isNumberTuple } from '../../../Helpers/Helpers.svelte.js';
+	import { devCatch, hasQuery, isDateTuple, isNumericArray } from '../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { getContext, onMount, untrack } from 'svelte';
 	import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
@@ -192,7 +192,7 @@
 			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
 
 		if (filterOption) {
-			if (isNumberTuple(filterOption.value)) {
+			if (isNumericArray(filterOption.value)) {
 				[valueMin, valueMax] = filterOption.value;
 				if (valueMax == undefined) {
 					valueMax = valueMin;

package/dist/Components/Table/Table.svelte

@@ -102,16 +102,6 @@
 		}
 	});
 
-	$effect(() => {
-		void tableContext.dataRepo.data.length;
-		void tableContext.selectedItems;
-		void tableContext.paginationRepo?.pageStartIndex;
-
-		untrack(() => {
-			tableContext.recalculateAllSelectedInCurrentPage();
-		});
-	});
-
 	function openContextMenu(e: MouseEvent) {
 		e.stopPropagation();
 
@@ -127,21 +117,21 @@
 		if (clickedElement) {
 			const [rowString, columnId] = clickedElement;
 			const row = parseInt(rowString);
-			Promise.all([tableContext.focusedColumnIds, tableContext.focusedRowIndices])
-				.then(([focusedColumnIds, focusedRowIndices]) => {
-					if (!focusedColumnIds.has(columnId) || !focusedRowIndices.has(row)) {
-						const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
-
-						if (columnIndex) {
-							tableContext.moveFocus({
-								column: columnIndex,
-								row,
-								id: columnId,
-							});
-						}
-					}
-				})
-				.catch(devCatch);
+
+			if (
+				!tableContext.focusedColumnIds.has(columnId) ||
+				!tableContext.focusedRowIndices.has(row)
+			) {
+				const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
+
+				if (columnIndex) {
+					tableContext.moveFocus({
+						column: columnIndex,
+						row,
+						id: columnId,
+					});
+				}
+			}
 		}
 
 		// this may not exist in http contexts

package/dist/Components/Table/Types/Columns/ColumnPinningState.d.ts

@@ -1,4 +1,4 @@
 export interface ColumnPinningState {
-    left?: Map<string, number>;
-    right?: Map<string, number>;
+    left?: ReadonlyMap<string, number>;
+    right?: ReadonlyMap<string, number>;
 }

package/dist/Components/Table/Types/Context/ITable.d.ts

@@ -9,7 +9,7 @@ import type { HeaderGroup } from '../HeaderGroup.js';
 import type { OnChangeFn } from '../OnChangeFn.js';
 import type { PaginationState } from '../Pagination/PaginationState.js';
 export interface ITable<T extends object> {
-    data: Promise<Array<T>>;
+    data: Array<T>;
     columns: Array<ColumnDef<T>>;
     columnSizing: ColumnSizingState;
     columnVisibility: VisibilityState;

package/dist/Components/Table/Types/Context/RowModel.d.ts

@@ -1,5 +1,5 @@
 import type { Row } from './Row.js';
 export interface RowModel<T extends object> {
     rows: Array<Row<T>>;
-    rowsById: Map<string, Row<T>>;
+    rowsById: ReadonlyMap<string, Row<T>>;
 }

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { SvelteMap } from 'svelte/reactivity';
 import type { Updater } from 'svelte/store';
 import type { ColumnPinningState } from '../Columns/ColumnPinningState.js';
 import type { ColumnSizingState } from '../Columns/ColumnSizingState.js';
@@ -51,6 +51,7 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     get remoteFilters(): CustomRemoteFilters<unknown> | undefined;
     private set remoteFilters(value);
     private _showSelectedOnly;
+    private _pageBeforeSelectedOnly;
     get showSelectedOnly(): boolean;
     set showSelectedOnly(v: boolean);
     readonly dateFilter: FilterFn<T, DateFilterValueType> | undefined;
@@ -73,11 +74,12 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     private _selectedPreset;
     get selectedPreset(): ColumnDefSet<T> | undefined;
     set selectedPreset(v: ColumnDefSet<T> | undefined);
-    private readonly _pageColData;
-    readonly focusedRowIndices: Promise<SvelteSet<number>>;
+    private _focusedRowIndices;
+    get focusedRowIndices(): ReadonlySet<number>;
     private readonly _highlightedItems;
     get highlightedItems(): SvelteMap<Awaited<unknown>, T>;
-    readonly focusedColumnIds: Promise<SvelteSet<string>>;
+    _focusedColumnIds: ReadonlySet<string>;
+    get focusedColumnIds(): ReadonlySet<string>;
     private _isMousingDown;
     get isMousingDown(): boolean;
     set isMousingDown(v: boolean);
@@ -120,12 +122,13 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     private _openModalCoordinates;
     get openModalCoordinates(): CellCoordinatesWithoutColumn | null;
     set openModalCoordinates(v: CellCoordinatesWithoutColumn | null);
+    private _allSelectedAsync;
     private _allSelectedInCurrentPage;
-    get allSelectedInCurrentPage(): Promise<boolean>;
+    get allSelectedInCurrentPage(): boolean;
     private allSelectedBySelectableMethod;
     private _areAllHighlighted;
     private _allHighlighted;
-    get allHighlighted(): Promise<boolean>;
+    get allHighlighted(): boolean;
     private _hasHighlightedItems;
     get hasHighlightedItems(): boolean;
     private _selectedItems;
@@ -140,31 +143,37 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     private readonly getSortingFn;
     private _filteredIndices;
     get filteredIndices(): ReadonlyArray<number>;
-    readonly filteredData: Promise<T[]>;
+    readonly filteredData: T[];
     private sortedDataAbortController;
-    readonly sortedData: Promise<T[]>;
-    readonly sortedRowModel: Promise<RowModel<T>>;
+    readonly sortedData: T[];
+    private _sortedRowModel;
+    get sortedRowModel(): RowModel<T>;
     private CurrentPageDataAbortController;
-    readonly currentPageData: Promise<T[]>;
-    readonly originalRowIndices: Promise<ReadonlyMap<unknown, number>>;
-    private rowsPromiseAbortController;
+    readonly currentPageData: T[];
+    private _originalRowIndices;
+    get originalRowIndices(): ReadonlyMap<unknown, number>;
     private rowsPromise;
-    readonly paginationRowModel: Promise<RowModel<T>>;
+    private _paginationRowModel;
+    get paginationRowModel(): RowModel<T>;
+    private readonly _keyCache;
+    private _cachedKey;
+    private readonly _pendingSelectionChanges;
+    private _flushScheduled;
+    private _flushPendingSelectionChanges;
+    private _schedulePendingFlush;
     readonly selectionContains: (item: T) => Promise<boolean>;
-    readonly addInvalidValue: (item: T) => Promise<void>;
-    readonly removeInvalidValue: (item: T) => Promise<void>;
+    readonly addInvalidValue: (item: T) => void | Promise<void>;
+    readonly removeInvalidValue: (item: T) => void | Promise<void>;
     readonly setOpenModalCoordinates: (coordinates: CellCoordinatesWithoutColumn | null) => void;
-    readonly toggleHighlightedRow: (item: T) => Promise<void>;
+    readonly toggleHighlightedRow: (item: T) => void | Promise<void>;
     readonly resetHighlightedRows: () => void;
-    readonly toggleSelected: (item: T) => Promise<void>;
-    readonly setSelected: (item: T, selected: boolean) => Promise<void>;
+    readonly toggleSelected: (item: T) => void | Promise<void>;
+    readonly setSelected: (item: T, selected: boolean) => void | Promise<void>;
     setSelectionMap: (set: SvelteMap<RowIdType, T>) => void;
     readonly updateSelectedItems: () => Promise<void>;
     readonly resetSelectedItems: () => void;
-    private lastIncrement;
-    readonly recalculateAllSelectedInCurrentPage: () => void;
     readonly selectAllInCurrentPage: () => Promise<void>;
-    readonly onHighlightAll: () => void;
+    readonly onHighlightAll: () => void | Promise<void>;
     readonly onEditCell: (item: T, coords: CellCoordinates, value: unknown) => Promise<void>;
     readonly handleTdKeydown: (e: KeyboardEvent) => void;
     private handleKeystroke;
@@ -183,20 +192,20 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     readonly startFocus: (coords: CellCoordinates) => void;
     readonly moveFocus: (coords: CellCoordinates, startEditing?: boolean) => void;
     readonly unfocus: () => void;
-    readonly focusToTop: () => Promise<void>;
-    readonly focusToBottom: () => Promise<void> | undefined;
-    readonly moveToBottom: () => Promise<void>;
-    readonly moveToTop: () => Promise<void>;
-    readonly moveFocusUp: () => Promise<void>;
-    readonly setFocusUp: () => Promise<void>;
-    readonly tabForward: () => Promise<void>;
+    readonly focusToTop: () => void;
+    readonly focusToBottom: () => void;
+    readonly moveToBottom: () => void;
+    readonly moveToTop: () => void;
+    readonly moveFocusUp: () => void;
+    readonly setFocusUp: () => void;
+    readonly tabForward: () => void;
     readonly tabBackward: () => void;
     readonly focusToStart: () => void;
     readonly moveToStart: () => void;
     readonly focusToEnd: () => void;
     readonly moveToEnd: () => void;
-    readonly moveFocusDown: () => Promise<void>;
-    readonly setFocusDown: () => Promise<void>;
+    readonly moveFocusDown: () => void;
+    readonly setFocusDown: () => void;
     readonly moveFocusLeft: () => void;
     readonly setFocusLeft: () => void;
     readonly moveFocusRight: () => void;