@lavalogic/scoria 0.0.29 → 0.0.30

package/dist/Components/Base/Pagination.svelte

@@ -0,0 +1,237 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { autoPluralise, generateShortUUID } from '../../Helpers/Helpers.svelte.js';
+	import { Button, Colour, Icon, NumberInput, Side, Size, Variant } from '../../index.js';
+	import type { Snippet } from 'svelte';
+
+	export interface PaginationProps<T extends object> {
+		items: T[];
+		key: string & keyof T;
+		pageSize?: number;
+		snippet: Snippet<[T, number]>;
+		itemName?: string;
+		setPageSize?: (size: number) => void;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const {
+		items,
+		key,
+		pageSize = 20,
+		snippet,
+		itemName = 'Item',
+		setPageSize
+	}: PaginationProps<T> = $props();
+
+	const _uuid = generateShortUUID();
+	let pageIndex = $state(0);
+	let pageValue = $derived(pageIndex + 1);
+	const startIndex = $derived(pageIndex * pageSize);
+	const pageItems = $derived(items.slice(startIndex, startIndex + pageSize));
+
+	const lastPage = $derived(Math.ceil(items.length / pageSize));
+	const lastPageIndex = $derived(lastPage - 1);
+
+	let debounceTimeout = -1;
+	function onNumberInput(e: Event) {
+		const page = parseInt((e.target as HTMLInputElement).value);
+
+		clearTimeout(debounceTimeout);
+		if (!isNaN(page)) {
+			debounceTimeout = setTimeout(() => {
+				pageIndex = Math.max(page - 1, 0);
+			}, 400) as unknown as number;
+		}
+	}
+
+	let pageButtons: number[] = $state([]);
+
+	$effect(() => {
+		if (pageIndex == null) {
+			pageButtons = [1];
+		} else {
+			const startingPage = Math.min(lastPage - 2, pageIndex - 1);
+			const pageToStartWith = Math.max(1, Math.min(startingPage, lastPage - 4));
+
+			pageButtons = new Array(Math.min(lastPage, 5))
+				.fill(pageToStartWith)
+				.map((item, index) => item + index);
+		}
+	});
+</script>
+
+<!-- PROPER -->
+<!-- 
+
+	<div class="pagination">
+		<div>page {pageIndex}</div>
+		<button
+			onclick={() => {
+				pageIndex = Math.max(pageIndex - 1, 0);
+			}}>Previous</button
+		>
+		<button
+			onclick={() => {
+				pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+			}}>Next</button
+		>
+	</div>
+</div> -->
+
+<div class="wrapper">
+	{#each pageItems as item, index (item[key])}
+		{@render snippet(item, index)}
+	{/each}
+	<div class="spread_row bottom_row">
+		<div class="block">
+			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
+		</div>
+
+		<div class="block records-per-page">
+			<span>Records per Page: {pageSize}</span>
+		</div>
+
+		<div class="spacer"></div>
+		<!-- {/* TODO switch to a lib element for this */} -->
+
+		<div class="scrollable">
+			<div class="block">
+				<Icon name="paper" colour={Colour['$ui-blue-6']} />
+				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
+			</div>
+
+			<div class="block">
+				<label for="{_uuid}-jump-to-page"
+					><Icon name="arrow-move-horizontal" colour={Colour['$ui-blue-6']} /></label
+				>
+
+				<label for="{_uuid}-jump-to-page">Jump to page:</label>
+
+				<NumberInput id="{_uuid}-jump-to-page" value={pageValue} oninput={onNumberInput} />
+			</div>
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					disabled={pageIndex === 0}
+					side={Side.Bottom}
+					onclick={() => {
+						pageIndex = Math.max(pageIndex - 1, 0);
+					}}
+					size={Size.FillHeight}
+					iconLeft={{
+						name: 'left-close',
+						size: Size.FillHeight
+					}}>Previous Page</Button
+				>
+			</div>
+
+			{#key pageButtons}
+				{#each pageButtons as pageNumber (pageNumber)}
+					<div class="block nopad">
+						<Button
+							variant={Variant.Toolbar}
+							side={Side.Bottom}
+							size={Size.FillHeight}
+							toggled={pageIndex + 1 === pageNumber}
+							onclick={() => {
+								pageIndex = pageNumber - 1;
+							}}>{pageNumber}</Button
+						>
+					</div>
+				{/each}
+			{/key}
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					side={Side.Bottom}
+					size={Size.FillHeight}
+					onclick={() => {
+						pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+					}}
+					disabled={pageIndex == lastPageIndex}
+					iconRight={{
+						name: 'right-close',
+						size: Size.FillHeight
+					}}>Next Page</Button
+				>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>.wrapper {
+  border: solid 3px #cbd4da;
+  border-radius: 4px;
+}
+
+.spread_row {
+  border-top: solid 1px #cbd4da;
+  overflow: visible;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: #cbd4da;
+  gap: 1px;
+  justify-content: flex-start;
+  align-items: stretch;
+  line-height: 1;
+  bottom: 0;
+}
+.spread_row.limited {
+  overflow: hidden;
+}
+.spread_row .scrollable {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: #cbd4da;
+  gap: 1px;
+}
+.spread_row .scrollable > .block {
+  background-color: #ffffff;
+}
+.spread_row .block {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 0.6rem;
+  --input-height: 2rem;
+  --input-width: 4rem;
+  --input-border: none;
+}
+.spread_row .block.nopad {
+  padding: 0;
+  --button-padding-horizontal: 1rem;
+  --button-padding-vertical: 0.56rem;
+}
+.spread_row .block.nopad.page-arrow {
+  --button-padding-horizontal: 0.6rem;
+  --button-padding-vertical: 0.42rem;
+}
+.spread_row span,
+.spread_row label {
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #3a4952;
+}
+.spread_row > * {
+  background-color: #ffffff;
+}
+.spread_row > *:first-child {
+  border-bottom-left-radius: 4px;
+}
+.spread_row > *:last-child {
+  border-bottom-right-radius: 4px;
+}
+.spread_row .spacer {
+  flex-grow: 2;
+}</style>

package/dist/Components/Base/Pagination.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+export interface PaginationProps<T extends object> {
+    items: T[];
+    key: string & keyof T;
+    pageSize?: number;
+    snippet: Snippet<[T, number]>;
+    itemName?: string;
+    setPageSize?: (size: number) => void;
+}
+declare function $$render<T extends object>(): {
+    props: PaginationProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Pagination: $$IsomorphicComponent;
+type Pagination<T extends object> = InstanceType<typeof Pagination<T>>;
+export default Pagination;

package/dist/Components/Dial.svelte

@@ -122,9 +122,9 @@
 		onMouseUp();
 	};
 
+	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
 	function onkeydown(e: KeyboardEvent) {
-		const handledKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter'];
-		if (handledKeys.includes(e.key)) {
+		if (handledKeys.has(e.key)) {
 			e.preventDefault();
 
 			if (e.key === 'ArrowLeft') {

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

@@ -27,10 +27,13 @@
 	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
 	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import type { Column } from '../Types/Columns/Column.js';
-	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+
 	import { AbstractDisplayDef } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
 	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
 	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+	import { AccessorDef } from '../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+	import { dev } from '$app/environment';
 
 	export interface QuickSearchCellProps<T extends object> {
 		column: Column<T>;
@@ -61,7 +64,9 @@
 		hasFilterFn || hasAcceptableColumnType || (customFilters?.has(def.id) ?? false)
 	);
 	const isNumeric = $derived(
-		('type' in def && def.type === 'Number') || customFilter?.type === CustomFilterType.Number
+		def instanceof NumberInputDef ||
+			def.filterValueType == 'Number' ||
+			customFilter?.type === CustomFilterType.Number
 	);
 	const options = $derived(
 		isSelect
@@ -87,8 +92,8 @@
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
-	// HACK crappy bodge to get typescript to understand that this won't be always null
 	let selectedOption: SelectOption<string | number> | null = $state(
+		// HACK crappy bodge to get typescript to understand that this won't be always null
 		null as unknown as SelectOption<string | number>
 	);
 
@@ -109,7 +114,6 @@
 
 	function getFilteringStateValue(): unknown {
 		const gotValue = tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value;
-		console.log(gotValue);
 		return gotValue;
 	}
 
@@ -123,6 +127,12 @@
 				const gotValue = getFilteringStateValue() as unknown as
 					| Array<string | number | SelectOption<string | number>>
 					| undefined;
+				if (dev) {
+					// eslint-disable-next-line no-debugger
+					debugger;
+					return;
+				}
+				//TODO redo the below in a more performant way if possible
 				const x = (await options).filter((it) => gotValue?.includes(it.value));
 				selectedOptions = x;
 			});

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

@@ -26,24 +26,31 @@
 		isBeingTargeted = false;
 	}
 
+	function makeKVPairs(item: string, index: number): readonly [string, number] {
+		return [item, index];
+	}
 	function togglePinLeft() {
 		if (columnDef == null) return;
 
 		tableContext.setColumnPinning((pinning) => {
-			const leftPinIndex = pinning.left?.indexOf(columnDef!.id) ?? -1;
-			const left = pinning.left?.concat() ?? [];
+			const leftPinIndex = pinning.left?.get(columnDef!.id) ?? -1;
+			const left = [...(pinning.left?.keys() ?? [])];
 			if (leftPinIndex !== -1) {
 				left.splice(leftPinIndex, 1);
 			} else {
 				left.push(columnDef!.id);
 			}
 
-			const rightPinIndex = pinning.right?.indexOf(columnDef!.id) ?? -1;
-			const right = pinning.right?.concat() ?? [];
+			const rightPinIndex = pinning.right?.get(columnDef!.id) ?? -1;
+			const right = [...(pinning.right?.keys() ?? [])];
 			if (rightPinIndex !== -1) {
 				right.splice(rightPinIndex, 1);
 			}
-			return { ...pinning, left, right };
+			return {
+				...pinning,
+				left: new Map(left.map(makeKVPairs)),
+				right: new Map(right.map(makeKVPairs))
+			};
 		});
 	}
 
@@ -51,8 +58,8 @@
 		if (columnDef == null) return;
 
 		tableContext.setColumnPinning((pinning) => {
-			const rightPinIndex = pinning.right?.indexOf(columnDef!.id) ?? -1;
-			const right = pinning.right?.concat() ?? [];
+			const rightPinIndex = pinning.right?.get(columnDef!.id) ?? -1;
+			const right = [...(pinning.right?.keys() ?? [])];
 
 			if (rightPinIndex !== -1) {
 				right.splice(rightPinIndex, 1);
@@ -60,13 +67,17 @@
 				right.push(columnDef!.id);
 			}
 
-			const leftPinIndex = pinning.left?.indexOf(columnDef!.id) ?? -1;
-			const left = pinning.left?.concat() ?? [];
+			const leftPinIndex = pinning.left?.get(columnDef!.id) ?? -1;
+			const left = [...(pinning.left?.keys() ?? [])];
 			if (leftPinIndex !== -1) {
 				left.splice(leftPinIndex, 1);
 			}
 
-			return { ...pinning, left, right };
+			return {
+				...pinning,
+				left: new Map(left.map(makeKVPairs)),
+				right: new Map(right.map(makeKVPairs))
+			};
 		});
 	}
 
@@ -114,22 +125,22 @@
 		/>
 
 		{#if tableContext.allowColumnReordering}
-			<!-- value={tableContext.columnPinning.left?.includes(columnDef.id) ?? false} -->
+			<!-- value={tableContext.columnPinning.left?.has(columnDef.id) ?? false} -->
 			<Checkbox
 				disabled={isExpandColumn}
 				icon={{ name: 'pin-left' }}
 				id={`is-pinned-left-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.left?.includes(columnDef.id) || false}
+				value={tableContext.columnPinning.left?.has(columnDef.id) || false}
 				onchange={() => {
 					togglePinLeft();
 				}}
 			/>
-			<!-- value={tableContext.columnPinning.right?.includes(columnDef.id) ?? false} -->
+			<!-- value={tableContext.columnPinning.right?.has(columnDef.id) ?? false} -->
 			<Checkbox
 				disabled={isExpandColumn}
 				icon={{ name: 'pin-right' }}
 				id={`is-pinned-right-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.right?.includes(columnDef.id) || false}
+				value={tableContext.columnPinning.right?.has(columnDef.id) || false}
 				onchange={() => {
 					togglePinRight();
 				}}

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

@@ -0,0 +1,49 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import TableNumberInput from './TableNumberInput.svelte';
+	import TableDatePicker from './TableDatePicker.svelte';
+	import TableSelect from './TableSelect.svelte';
+	import TableQuerySelect from './TableQuerySelect.svelte';
+	import TableCheckbox from './TableCheckbox.svelte';
+	import TableTextInput from './TableTextInput.svelte';
+	import type { Component } from 'svelte';
+	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
+
+	export interface AccessorComponentProps<T extends object> {
+		cell: TableCell<T>;
+	}
+
+	const cellTypes: Record<
+		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Component<any>
+	> = {
+		Number: TableNumberInput,
+		Date: TableDatePicker,
+		Select: TableSelect,
+		Query: TableQuerySelect,
+		Checkbox: TableCheckbox,
+		Text: TableTextInput
+	} as const;
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { cell }: AccessorComponentProps<T> = $props();
+
+	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
+		if (columnDef instanceof AccessorDef) {
+			return cellTypes[columnDef.accessorType];
+		}
+
+		return FocusableImmutableCell;
+	}
+</script>
+
+<CurrentComponent {cell} />

package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+export interface AccessorComponentProps<T extends object> {
+    cell: TableCell<T>;
+}
+declare function $$render<T extends object>(): {
+    props: AccessorComponentProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AccessorComponent: $$IsomorphicComponent;
+type AccessorComponent<T extends object> = InstanceType<typeof AccessorComponent<T>>;
+export default AccessorComponent;

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

@@ -7,16 +7,9 @@
 	import type { Component } from 'svelte';
 	import ExpandCell from './ExpandCell.svelte';
 	import { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { DisplayType } from '../../../Types/Columns/DisplayType.js';
-	import TableNumberInput from './TableNumberInput.svelte';
-	import TableDatePicker from './TableDatePicker.svelte';
-	import TableSelect from './TableSelect.svelte';
-	import TableQuerySelect from './TableQuerySelect.svelte';
-	import TableCheckbox from './TableCheckbox.svelte';
-	import TableTextInput from './TableTextInput.svelte';
-	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+
 	import { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
 	import ValidityCell from './ValidityCell.svelte';
 	import TableRowSelectionCheckbox from './TableRowSelectionCheckbox.svelte';
@@ -28,19 +21,8 @@
 	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
 	import { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 	import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
-
-	const cellTypes: Record<
-		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		Component<any>
-	> = {
-		Number: TableNumberInput,
-		Date: TableDatePicker,
-		Select: TableSelect,
-		Query: TableQuerySelect,
-		Checkbox: TableCheckbox,
-		Text: TableTextInput
-	} as const;
+	import type { ActionsTableCell } from './TableAction.svelte';
+	import AccessorComponent from './AccessorComponent.svelte';
 
 	export interface TableColumnProps<T extends object> {
 		cell: TableCell<T>;
@@ -65,15 +47,9 @@
 		return typeof valueOrComponent === 'function';
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
-		if (columnDef instanceof AccessorDef) {
-			return cellTypes[columnDef.accessorType];
-		}
-
-		return FocusableImmutableCell;
+	function isActionsDef(cell: TableCell<T>): cell is ActionsTableCell<T> {
+		return cell.column.columnDef instanceof ActionsDef;
 	}
-
 	function isExpandTableCell(cell: TableCell<T>): cell is ExpandTableCell<T> {
 		return cell.column.columnDef instanceof ExpandDef;
 	}
@@ -86,31 +62,26 @@
 		<ValidityCell {cell} />
 	{:else if columnDef instanceof RowSelectionDef}
 		<TableRowSelectionCheckbox {cell} />
-	{:else if columnDef instanceof ActionsDef}
+	{:else if isActionsDef(cell)}
 		<ActionsCell {cell} />
 	{:else if isExpandTableCell(cell)}
 		<ExpandCell {cell} {expandedColumnDef} {onExpandChange} />
 	{:else if columnDef.columnType !== ColumnType.Display}
-		{@const CurrentComponent = getAppropriateAccessorDef(columnDef)}
-		<CurrentComponent {cell} />
+		<AccessorComponent {cell} />
 	{:else}
 		{@const valueOrComponentPromise =
 			cell.column.columnDef.accessorFn?.(cell.row.original, cell.row.originalIndex) ??
 			cell.row.original[cell.column.id as keyof typeof cell.row.original] ??
 			null}
 
-		{#if valueOrComponentPromise instanceof Promise}
-			{#await valueOrComponentPromise}
-				<FocusableImmutableCell value={valueOrComponentPromise} {cell} />
-			{:then value}
-				{@render ValueFallback(value)}
-			{:catch e}
-				{@debug e}
-				<FocusableImmutableCell value={e?.toString()} {cell} />
-			{/await}
-		{:else}
-			{@render ValueFallback(valueOrComponentPromise)}
-		{/if}
+		{#await valueOrComponentPromise}
+			<FocusableImmutableCell value={valueOrComponentPromise} {cell} />
+		{:then value}
+			{@render ValueFallback(value)}
+		{:catch e}
+			{@debug e}
+			<FocusableImmutableCell value={e?.toString()} {cell} />
+		{/await}
 	{/if}
 {/if}
 

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

@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
 	import SingleSelect from '../../../../SingleSelect.svelte';
 	import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
@@ -87,6 +88,9 @@
 		optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>,
 		value: unknown
 	): Promise<SelectOption<unknown> | null> {
+		void value;
+		void optionsPromise;
+
 		if (value == null) {
 			return null;
 		}
@@ -101,7 +105,9 @@
 			return foundOption ?? null;
 		}
 
-		console.warn('could not match value to any type:', value);
+		if (dev) {
+			console.warn('could not match value to any type:', value);
+		}
 
 		return null;
 	}

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

@@ -63,14 +63,14 @@
 
 	const isAppropriateTableSide = $derived.by(() => {
 		if (side === 'left') {
-			return (tableContext.columnPinning.left?.length ?? 0) > 0;
+			return (tableContext.columnPinning.left?.size ?? 0) > 0;
 		} else if (side === 'centre') {
 			return (
-				(tableContext.columnPinning.left?.length ?? 0) == 0 &&
-				(tableContext.columnPinning.right?.length ?? 0) != tableContext.columnDefs.length
+				(tableContext.columnPinning.left?.size ?? 0) == 0 &&
+				(tableContext.columnPinning.right?.size ?? 0) != tableContext.columnDefs.length
 			);
 		} else {
-			return (tableContext.columnPinning.right?.length ?? 0) == tableContext.columnDefs.length;
+			return (tableContext.columnPinning.right?.size ?? 0) == tableContext.columnDefs.length;
 		}
 	});
 	const showHighlightButton = $derived(rowIndex != null && isAppropriateTableSide);
@@ -125,7 +125,7 @@ onMouseLeave={onMouseLeave} -->
 			}}
 		/>
 	{/if}
-	{#each cells as cell (`${cell.id}-${cell.row.visibleIndex}`)}
+	{#each cells as cell (cell)}
 		<TableColumn {cell} {expandedColumnDef} {onExpandChange} />
 	{/each}
 </tr>

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

@@ -42,7 +42,7 @@
 			{/each}
 		</tr>
 	{/if}
-	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row.id)}
+	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row)}
 		<TableRow {row} {side} odd={index % 2 == 1} />
 	{/each}
 </tbody>