@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,558 +1,547 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, FilterOptionsType"
->
-	import { dev } from '$app/environment';
-	import Button from '../../Button.svelte';
-	import MultiSelect from '../../MultiSelect.svelte';
-	import NumberInput from '../../NumberInput.svelte';
-	import QuerySelect from '../../QuerySelect.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
-	import TextInput from '../../TextInput.svelte';
-	import DateModal from '../../Touch/DateModal.svelte';
-	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';
-	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
-	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
-	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
-	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
-	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-	import type { FilterInputProps } from './FilterInputProps.js';
-	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
-	import { stringFilterTypes } from './stringFilterTypes.js';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const { def, customFilters }: FilterInputProps<T, FilterValueType, FilterOptionsType> = $props();
-
-	const customFilter = $derived(customFilters?.get(def.id));
-
-	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
-
-	let value: /*SelectOption<unknown> |*/ unknown /*| null | undefined*/ = $state(null);
-	let valueMin: number | null = $state(null);
-	let valueMax: number | null = $state(null);
-
-	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
-	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
-
-	const isNumeric = $derived(
-		def instanceof NumberInputDef || customFilter?.type === CustomFilterType.Number
-	);
-
-	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
-
-	// const hasAcceptableColumnType = $derived(
-	// 	(def instanceof AccessorDef && searchableTypes.has(def.accessorType)) ||
-	// 		(def instanceof AbstractDisplayDef && searchableTypes.has(def.displayType))
-	// );
-
-	const isSearchable = $derived(
-		def.allowFiltering && (hasFilterFn || customFilters?.has(def.id) == true)
-		// ((hasFilterFn && hasAcceptableColumnType) || customFilters?.has(def.id) == true) // removed hasAcceptableColumnType due to it being redundant
-	);
-
-	const isSelect = $derived(
-		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
-	);
-
-	const options = $derived(isSelect ? (def.getOptions?.() ?? customFilter?.options ?? []) : []);
-
-	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(
-		[] as Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>
-	);
-
-	onMount(() => {
-		retryOptionsPromise();
-	});
-
-	function retryOptionsPromise() {
-		optionsPromise = def instanceof SelectDef ? def.getOptions() : [];
-	}
-
-	// function isNumber(def: ColumnDef<T>): def is INumberInputColumnAccessorDef<T> {
-	// 	return 'type' in def && def.type === 'Number';
-	// }
-
-	const filteringStateValue = $derived(
-		tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value
-	);
-
-	$effect(() => {
-		if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
-			return;
-		}
-		void filteringStateValue;
-		if (def.debug) {
-			console.debug(
-				`${def.id}: `,
-				'FILTER INPUT: filtering state value:',
-				$state.snapshot(filteringStateValue)
-			);
-		}
-
-		if (hasQuery(customFilter)) {
-			if (def.debug) {
-				console.debug(`${def.id}: `, 'has query');
-			}
-
-			untrack(async () => {
-				try {
-					//  as unknown as string | number | undefined;
-
-					if (filteringStateValue != undefined) {
-						if (def.debug) {
-							console.debug(`${def.id}: query values:`, tableContext.dataRepo.__queryValues);
-						}
-						const x = await tableContext.dataRepo.__queryValues.get(customFilter.id);
-
-						if (def.debug) {
-							console.debug(`${def.id}: value:`, $state.snapshot(x));
-						}
-						value = (x ?? null) as SelectOption<unknown> | null;
-					} else if (def.debug) {
-						console.debug(
-							`${def.id}: filtering state value was undefined`,
-							$state.snapshot(tableContext.paginationRepo?.filtering)
-						);
-					}
-				} catch (e) {
-					console.warn(e);
-					value = null;
-				}
-			}).catch(devCatch);
-		} else if (isSelect) {
-			if (def.debug) {
-				console.debug(`${def.id}: is select (not query)`);
-			}
-			untrack(async () => {
-				try {
-					const opts = await options;
-					if (def.debug) {
-						console.debug(`${def.id}: possible options:`, $state.snapshot(options));
-					}
-					const x = opts.filter((it) => {
-						if (it.value != null && (typeof it.value == 'string' || typeof it.value == 'number')) {
-							return (filteringStateValue as Array<unknown> | undefined)?.includes(it.value);
-						}
-						return false;
-					});
-					if (def.debug) {
-						console.debug(`${def.id}: selected options:`, x);
-					}
-					selectedOptions = x;
-				} catch (e) {
-					if (dev || def.debug) {
-						console.debug(`${def.id}: `, e);
-					}
-				}
-			}).catch(devCatch);
-		} else if (isNumeric) {
-			if (
-				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
-				tableContext.paginationRepo?.filtering
-			) {
-				if (filteringStateValue != undefined) {
-					const [min, max] = filteringStateValue as [number, number | undefined];
-					value = min;
-					valueMin = min;
-					valueMax = max ?? null;
-				} else {
-					value = valueMin = valueMax = null;
-				}
-			} else if (tableContext.paginationRepo?.filtering) {
-				if (filteringStateValue != undefined) {
-					const [min] = filteringStateValue as [number, number | undefined];
-					value = min;
-					valueMin = min;
-					valueMax = min;
-				} else {
-					value = valueMin = valueMax = null;
-				}
-			}
-		} else if (tableContext.paginationRepo?.filtering) {
-			if (
-				filteringStateValue == null ||
-				typeof filteringStateValue == 'string' ||
-				typeof filteringStateValue == 'number'
-			) {
-				value = filteringStateValue;
-			} else if (typeof filteringStateValue !== 'boolean') {
-				console.warn('unknown value type:', $state.snapshot(filteringStateValue));
-				value = filteringStateValue as string; // HACK attempt to keep production running
-			}
-		}
-	});
-
-	onMount(() => {
-		const filterOption =
-			tableContext.paginationRepo?.filtering &&
-			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
-
-		if (filterOption) {
-			if (isNumericArray(filterOption.value)) {
-				[valueMin, valueMax] = filterOption.value;
-				if (valueMax == undefined) {
-					valueMax = valueMin;
-				} else if (valueMin == undefined) {
-					valueMin = valueMax;
-				}
-			} else if (!hasQuery(customFilter)) {
-				const gotValue = filterOption.value;
-				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
-					value = gotValue;
-				} else if (typeof filteringStateValue !== 'boolean') {
-					console.warn('unknown value type:', $state.snapshot(gotValue));
-					value = gotValue as string; // HACK attempt to keep production running
-				}
-			}
-		}
-
-		// selectedNumberFilterType =
-		// 	(filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
-		// selectedStringFilterType =
-		// 	(filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
-	});
-
-	const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
-	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> | null = $derived.by(() => {
-		const value = (filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
-		return numberDateFilterTypes.find((it) => it.value === value) ?? null;
-	});
-	const selectedStringFilterType: SelectOption<StringFilterMode> | null = $derived.by(() => {
-		const value = (filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
-		return stringFilterTypes.find((it) => it.value === value) ?? null;
-	});
-
-	// let selectedNumberFilterType: NumberDateFilterMode = $state(NumberDateFilterMode.In);
-	// let selectedStringFilterType: StringFilterMode = $state(StringFilterMode.Contains);
-
-	const inputId: string = $derived(`${tableContext.tableName}-${def.id}-filter-type`);
-
-	let showFromDateModal = $state(false);
-	let showToDateModal = $state(false);
-
-	function generateOnChangeObject(label: string) {
-		return (newValue: SelectOption<unknown> | null) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
-			value = newValue ?? null;
-		};
-	}
-
-	function generateOnChangePrimitive(label: string) {
-		return (newValue: SelectOption<unknown> | null) => {
-			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
-			tableContext.dataRepo.__queryValues.set(label, newValue?.value ?? null);
-			value = newValue?.value ?? null;
-		};
-	}
-</script>
-
-{#if isSearchable}
-	<!-- TODO remove this check once datePicker is supported -->
-	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
-		<label for={inputId}>{def.header}</label>
-	{/if}
-	<div class="row">
-		{#if def instanceof DateInputDef}
-			{@const dateValues =
-				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
-			{#if isDateTuple(dateValues)}
-				{@const [fromDate, toDate] = dateValues}
-				<div class="spaced-around">
-					<Button
-						onclick={() => {
-							showFromDateModal = true;
-						}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
-					>
-
-					<Button
-						onclick={() => {
-							showToDateModal = true;
-						}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
-					>
-				</div>
-
-				{#if showFromDateModal}
-					<DateModal
-						header="Edit Date From"
-						value={fromDate}
-						cancelEditing={() => {
-							showFromDateModal = false;
-						}}
-						confirm={(e) => {
-							tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
-							showFromDateModal = false;
-						}}
-					/>
-				{/if}
-
-				{#if showToDateModal}
-					<DateModal
-						inclusive
-						header="Edit Date To"
-						value={toDate}
-						cancelEditing={() => {
-							showToDateModal = false;
-						}}
-						confirm={(e) => {
-							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
-							showToDateModal = false;
-						}}
-					/>
-				{/if}
-			{/if}
-		{:else if def instanceof SelectDef && !isRemoteSelect}
-			<div class="maxwidth">
-				{#await optionsPromise then options}
-					<MultiSelect
-						label={customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
-						labelProp="label"
-						valueProp="value"
-						name={customFilter?.objectName ?? 'Item'}
-						{options}
-						valueAsObject={false}
-						onchange={(e: Array<SelectOption<unknown>>) => {
-							tableContext.paginationRepo?.filterBy(
-								def.id,
-								e.map((it) => it.value)
-							);
-						}}
-						selectedValues={selectedOptions}
-						collapseSelection
-					/>
-				{:catch e}
-					<span>Error retrieving options: {e.message}</span>
-					<Button
-						onclick={() => {
-							retryOptionsPromise();
-						}}>Retry</Button
-					>
-				{/await}
-			</div>
-		{:else if customFilter && isRemoteSelect}
-			<div class="contents">
-				{#await options then options}
-					{#if hasQuery(customFilter)}
-						{#if customFilter.valueAsObject !== true}
-							{@const label = customFilter.id}
-
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={false}
-								{label}
-								clearable
-								name={customFilter.objectName ?? 'Item'}
-								valueProp="value"
-								labelProp="label"
-								value={value as string | number | null}
-								query={customFilter.query}
-								bind:options={lastQueryOptions}
-								onchange={generateOnChangePrimitive(label)}
-							/>
-						{:else}
-							{@const label = customFilter.id}
-
-							<!-- TODO: multiselect -->
-
-							<QuerySelect
-								valueAsObject={true}
-								{label}
-								clearable
-								name={customFilter.objectName ?? 'Item'}
-								valueProp="value"
-								labelProp="label"
-								value={value as null}
-								query={customFilter.query}
-								bind:options={lastQueryOptions}
-								onchange={generateOnChangeObject(label)}
-							/>
-						{/if}
-					{:else}
-						<MultiSelect
-							label={customFilter.id}
-							labelProp="label"
-							valueProp="value"
-							name={customFilter.objectName ?? 'Item'}
-							{options}
-							valueAsObject={false}
-							onchange={(e: Array<SelectOption<unknown>>) => {
-								tableContext.paginationRepo?.filterBy(
-									def.id,
-									e.map((it) => it.value)
-								);
-							}}
-							selectedValues={selectedOptions}
-							collapseSelection
-						/>
-					{/if}
-				{/await}
-			</div>
-		{:else if def instanceof CheckboxDef}
-			<div class="inner-row">
-				<label>
-					<input
-						value={false}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					No
-				</label>
-				<label>
-					<input
-						value={undefined}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					Any
-				</label>
-				<label>
-					<input
-						value={true}
-						type="radio"
-						bind:group={value}
-						onchange={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-					/>
-					Yes
-				</label>
-			</div>
-		{:else if isNumeric}
-			{@const label = typeof def.header === 'string' ? def.header : undefined}
-			<div class="left">
-				<SingleSelect
-					{label}
-					name="Filter Type"
-					options={numberDateFilterTypes}
-					labelProp="label"
-					valueProp="value"
-					valueAsObject
-					value={selectedNumberFilterType}
-					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
-						const oldFilterType = selectedNumberFilterType;
-
-						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
-						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-
-						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
-							if (oldFilterType?.value === NumberDateFilterMode.Between) {
-								valueMax = null;
-								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
-							}
-
-							if (newFilterType === NumberDateFilterMode.In) {
-								tableContext.paginationRepo?.filterBy(def.id, [value]);
-							}
-
-							// TODO what about the other modes?
-						}
-					}}
-					onkeydown={(e: KeyboardEvent) => {
-						e.stopPropagation();
-					}}
-				/>
-			</div>
-			<div class="right">
-				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
-					<NumberInput
-						id={inputId}
-						bind:value={valueMin}
-						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-					<span>and</span>
-					<NumberInput
-						id={inputId}
-						bind:value={valueMax}
-						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, [value]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if dev}
-					error: {value?.toString()}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug value}
-				{/if}
-			</div>
-		{:else}
-			{@const label = typeof def.header === 'string' ? def.header : undefined}
-			<div class="left">
-				<SingleSelect
-					name="Filter Type"
-					valueAsObject
-					{label}
-					options={stringFilterTypes}
-					labelProp="label"
-					valueProp="value"
-					value={selectedStringFilterType}
-					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
-						const filterType = newValue?.value ?? StringFilterMode.Contains;
-						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-					}}
-					onkeydown={(e: KeyboardEvent) => {
-						e.stopPropagation();
-					}}
-				/>
-			</div>
-			<div class="right">
-				{#if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if dev}
-					error: {value?.toString()}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug value}
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType"
+>
+	import { dev } from '$app/environment';
+	import Button from '../../Button.svelte';
+	import MultiSelect from '../../MultiSelect.svelte';
+	import NumberInput from '../../NumberInput.svelte';
+	import QuerySelect from '../../QuerySelect.svelte';
+	import SingleSelect from '../../SingleSelect.svelte';
+	import TextInput from '../../TextInput.svelte';
+	import DateModal from '../../Touch/DateModal.svelte';
+	import { hasQuery } from '../TableHelpers.svelte.js';
+	import { devCatch, 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';
+	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
+	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
+	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
+	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
+	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
+	import type { FilterInputProps } from './FilterInputProps.js';
+	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
+	import { stringFilterTypes } from './stringFilterTypes.js';
+
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
+
+	const { def, customFilters }: FilterInputProps<T, FilterValueType, FilterOptionsType> = $props();
+
+	const customFilter = $derived(customFilters?.get(def.id));
+
+	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
+
+	let value: unknown = $state(null);
+	let valueMin: number | null = $state(null);
+	let valueMax: number | null = $state(null);
+
+	let selectedOptions: Array<SelectOption<unknown>> = $state([]);
+	let lastQueryOptions: Array<SelectOption<unknown>> = $state([]);
+
+	const isNumeric = $derived(
+		def instanceof NumberInputDef || customFilter?.type === CustomFilterType.Number
+	);
+
+	const hasFilterFn = $derived(!!def.filterFn && typeof def.filterFn === 'function');
+
+	const isSearchable = $derived(
+		def.allowFiltering && (hasFilterFn || customFilters?.has(def.id) == true)
+	);
+
+	const isSelect = $derived(
+		def instanceof SelectDef || customFilter?.type === CustomFilterType.Select
+	);
+
+	const options = $derived(isSelect ? (def.getOptions?.() ?? customFilter?.options ?? []) : []);
+
+	let optionsPromise: Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>> = $state(
+		[] as Array<SelectOption<unknown>> | Promise<Array<SelectOption<unknown>>>
+	);
+
+	onMount(() => {
+		retryOptionsPromise();
+	});
+
+	function retryOptionsPromise() {
+		optionsPromise = def instanceof SelectDef ? def.getOptions() : [];
+	}
+
+	const filteringStateValue = $derived(
+		tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value
+	);
+
+	$effect(() => {
+		if (isRemoteSelect && !tableContext.paginationRepo?.filtering) {
+			return;
+		}
+		void filteringStateValue;
+		if (def.debug) {
+			console.debug(
+				`${def.id}: `,
+				'FILTER INPUT: filtering state value:',
+				$state.snapshot(filteringStateValue)
+			);
+		}
+
+		if (hasQuery(customFilter)) {
+			if (def.debug) {
+				console.debug(`${def.id}: `, 'has query');
+			}
+
+			untrack(async () => {
+				try {
+					//  as unknown as string | number | undefined;
+
+					if (filteringStateValue != undefined) {
+						if (def.debug) {
+							console.debug(`${def.id}: query values:`, tableContext.dataRepo.__queryValues);
+						}
+						const x = await tableContext.dataRepo.__queryValues.get(customFilter.id);
+
+						if (def.debug) {
+							console.debug(`${def.id}: value:`, $state.snapshot(x));
+						}
+						value = (x ?? null) as SelectOption<unknown> | null;
+					} else if (def.debug) {
+						console.debug(
+							`${def.id}: filtering state value was undefined`,
+							$state.snapshot(tableContext.paginationRepo?.filtering)
+						);
+					}
+				} catch (e) {
+					console.warn(e);
+					value = null;
+				}
+			}).catch(devCatch);
+		} else if (isSelect) {
+			if (def.debug) {
+				console.debug(`${def.id}: is select (not query)`);
+			}
+			untrack(async () => {
+				try {
+					const opts = await options;
+					if (def.debug) {
+						console.debug(`${def.id}: possible options:`, $state.snapshot(options));
+					}
+					const x = opts.filter((it) => {
+						if (it.value != null && (typeof it.value == 'string' || typeof it.value == 'number')) {
+							return (filteringStateValue as Array<unknown> | undefined)?.includes(it.value);
+						}
+						return false;
+					});
+					if (def.debug) {
+						console.debug(`${def.id}: selected options:`, x);
+					}
+					selectedOptions = x;
+				} catch (e) {
+					if (dev || def.debug) {
+						console.debug(`${def.id}: `, e);
+					}
+				}
+			}).catch(devCatch);
+		} else if (isNumeric) {
+			if (
+				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
+				tableContext.paginationRepo?.filtering
+			) {
+				if (filteringStateValue != undefined) {
+					const [min, max] = filteringStateValue as [number, number | undefined];
+					value = min;
+					valueMin = min;
+					valueMax = max ?? null;
+				} else {
+					value = valueMin = valueMax = null;
+				}
+			} else if (tableContext.paginationRepo?.filtering) {
+				if (filteringStateValue != undefined) {
+					const [min] = filteringStateValue as [number, number | undefined];
+					value = min;
+					valueMin = min;
+					valueMax = min;
+				} else {
+					value = valueMin = valueMax = null;
+				}
+			}
+		} else if (tableContext.paginationRepo?.filtering) {
+			if (
+				filteringStateValue == null ||
+				typeof filteringStateValue == 'string' ||
+				typeof filteringStateValue == 'number'
+			) {
+				value = filteringStateValue;
+			} else if (typeof filteringStateValue !== 'boolean') {
+				console.warn('unknown value type:', $state.snapshot(filteringStateValue));
+				value = filteringStateValue as string; // HACK attempt to keep production running
+			}
+		}
+	});
+
+	onMount(() => {
+		const filterOption =
+			tableContext.paginationRepo?.filtering &&
+			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
+
+		if (filterOption) {
+			if (isNumericArray(filterOption.value)) {
+				[valueMin, valueMax] = filterOption.value;
+				if (valueMax == undefined) {
+					valueMax = valueMin;
+				} else if (valueMin == undefined) {
+					valueMin = valueMax;
+				}
+			} else if (!hasQuery(customFilter)) {
+				const gotValue = filterOption.value;
+				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
+					value = gotValue;
+				} else if (typeof filteringStateValue !== 'boolean') {
+					console.warn('unknown value type:', $state.snapshot(gotValue));
+					value = gotValue as string; // HACK attempt to keep production running
+				}
+			}
+		}
+	});
+
+	const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
+	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> | null = $derived.by(() => {
+		const value = (filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
+		return numberDateFilterTypes.find((it) => it.value === value) ?? null;
+	});
+	const selectedStringFilterType: SelectOption<StringFilterMode> | null = $derived.by(() => {
+		const value = (filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
+		return stringFilterTypes.find((it) => it.value === value) ?? null;
+	});
+
+	const inputId: string = $derived(`${tableContext.tableName}-${def.id}-filter-type`);
+
+	let showFromDateModal = $state(false);
+	let showToDateModal = $state(false);
+
+	function generateOnChangeObject(label: string) {
+		return (newValue: SelectOption<unknown> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			value = newValue ?? null;
+		};
+	}
+
+	function generateOnChangePrimitive(label: string) {
+		// Phase 7.6: AsPrimitive QuerySelect now hands us the primitive
+		// directly. The previous code typed this as `SelectOption<unknown>`
+		// and read `.value` off it; with the discriminated typing the
+		// primitive flows straight through.
+		return (newValue: unknown) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+			tableContext.dataRepo.__queryValues.set(label, newValue ?? null);
+			value = newValue ?? null;
+		};
+	}
+</script>
+
+{#if isSearchable}
+	<!-- TODO remove this check once datePicker is supported -->
+	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
+		<label for={inputId}>{def.header}</label>
+	{/if}
+	<div class="row">
+		{#if def instanceof DateInputDef}
+			{@const dateValues =
+				tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
+			{#if isDateTuple(dateValues)}
+				{@const [fromDate, toDate] = dateValues}
+				<div class="spaced-around">
+					<Button
+						onclick={() => {
+							showFromDateModal = true;
+						}}>From {fromDate?.toLocaleDateString() ?? 'Any Date'}</Button
+					>
+
+					<Button
+						onclick={() => {
+							showToDateModal = true;
+						}}>To {toDate?.toLocaleDateString() ?? 'Any Date'}</Button
+					>
+				</div>
+
+				{#if showFromDateModal}
+					<DateModal
+						header="Edit Date From"
+						value={fromDate}
+						cancelEditing={() => {
+							showFromDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [e, toDate]);
+							showFromDateModal = false;
+						}}
+					/>
+				{/if}
+
+				{#if showToDateModal}
+					<DateModal
+						inclusive
+						header="Edit Date To"
+						value={toDate}
+						cancelEditing={() => {
+							showToDateModal = false;
+						}}
+						confirm={(e) => {
+							tableContext.paginationRepo?.filterBy(def.id, [fromDate, e]);
+							showToDateModal = false;
+						}}
+					/>
+				{/if}
+			{/if}
+		{:else if def instanceof SelectDef && !isRemoteSelect}
+			<div class="maxwidth">
+				{#await optionsPromise then options}
+					{@const selectedPrimitives = selectedOptions
+						.map((it) => it.value)
+						.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')}
+					<MultiSelect
+						label={customFilter?.id ??
+							customFilter?.label ??
+							customFilter?.objectName ??
+							customFilter?.queryKey ??
+							def.id}
+						labelProp="label"
+						valueProp="value"
+						name={customFilter?.objectName ?? 'Item'}
+						{options}
+						valueAsObject={false}
+						onchange={(e: Array<unknown>) => {
+							// Phase 7.6: `valueAsObject={false}` returns
+							// primitives directly.
+							tableContext.paginationRepo?.filterBy(def.id, e);
+						}}
+						selectedValues={selectedPrimitives}
+						collapseSelection
+					/>
+				{:catch e}
+					<span>Error retrieving options: {e.message}</span>
+					<Button
+						onclick={() => {
+							retryOptionsPromise();
+						}}>Retry</Button
+					>
+				{/await}
+			</div>
+		{:else if customFilter && isRemoteSelect}
+			<div class="contents">
+				{#await options then options}
+					{#if hasQuery(customFilter)}
+						{#if customFilter.valueAsObject !== true}
+							{@const label = customFilter.id}
+
+							<!-- TODO: multiselect -->
+
+							<QuerySelect
+								valueAsObject={false}
+								{label}
+								clearable
+								name={customFilter.objectName ?? 'Item'}
+								valueProp={'value' as never}
+								labelProp={'label' as never}
+								value={value as never}
+								query={customFilter.query}
+								bind:options={lastQueryOptions as never}
+								onchange={generateOnChangePrimitive(label)}
+							/>
+						{:else}
+							{@const label = customFilter.id}
+
+							<!-- TODO: multiselect -->
+
+							<QuerySelect
+								valueAsObject={true}
+								{label}
+								clearable
+								name={customFilter.objectName ?? 'Item'}
+								valueProp="value"
+								labelProp="label"
+								value={value as null}
+								query={customFilter.query}
+								bind:options={lastQueryOptions}
+								onchange={generateOnChangeObject(label)}
+							/>
+						{/if}
+					{:else}
+						<MultiSelect
+							label={customFilter.id}
+							labelProp="label"
+							valueProp="value"
+							name={customFilter.objectName ?? 'Item'}
+							{options}
+							valueAsObject={false}
+							onchange={(e: Array<unknown>) => {
+								// Phase 7.6: `valueAsObject={false}` returns
+								// primitives directly.
+								tableContext.paginationRepo?.filterBy(def.id, e);
+							}}
+							selectedValues={selectedOptions}
+							collapseSelection
+						/>
+					{/if}
+				{/await}
+			</div>
+		{:else if def instanceof CheckboxDef}
+			<div class="inner-row">
+				<label>
+					<input
+						value={false}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					No
+				</label>
+				<label>
+					<input
+						value={undefined}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					Any
+				</label>
+				<label>
+					<input
+						value={true}
+						type="radio"
+						bind:group={value}
+						onchange={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+					/>
+					Yes
+				</label>
+			</div>
+		{:else if isNumeric}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
+			<div class="left">
+				<SingleSelect
+					{label}
+					name="Filter Type"
+					options={numberDateFilterTypes}
+					labelProp="label"
+					valueProp="value"
+					valueAsObject
+					value={selectedNumberFilterType}
+					onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
+						const oldFilterType = selectedNumberFilterType;
+
+						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
+
+						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
+							if (oldFilterType?.value === NumberDateFilterMode.Between) {
+								valueMax = null;
+								tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
+							}
+
+							if (newFilterType === NumberDateFilterMode.In) {
+								tableContext.paginationRepo?.filterBy(def.id, [value]);
+							}
+
+							// TODO what about the other modes?
+						}
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
+					<NumberInput
+						id={inputId}
+						bind:value={valueMin}
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+					<span>and</span>
+					<NumberInput
+						id={inputId}
+						bind:value={valueMax}
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, [value]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug value}
+				{/if}
+			</div>
+		{:else}
+			{@const label = typeof def.header === 'string' ? def.header : undefined}
+			<div class="left">
+				<SingleSelect
+					name="Filter Type"
+					valueAsObject
+					{label}
+					options={stringFilterTypes}
+					labelProp="label"
+					valueProp="value"
+					value={selectedStringFilterType}
+					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
+						const filterType = newValue?.value ?? StringFilterMode.Contains;
+						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
+					}}
+					onkeydown={(e: KeyboardEvent) => {
+						e.stopPropagation();
+					}}
+				/>
+			</div>
+			<div class="right">
+				{#if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							tableContext.paginationRepo?.filterBy(def.id, value);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if dev}
+					error: {value?.toString()}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug value}
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
 <style>.contents {
   display: contents;
   --input-width: 100%;
@@ -623,4 +612,4 @@
 .inner-row label input {
   cursor: pointer;
   width: 2rem;
-}</style>
+}</style>