@lavalogic/scoria 0.37.43 → 0.37.45

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

@@ -1,637 +1,622 @@
-<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));
-
-	/** Human-readable label used by every inner input (QuerySelect /
-	 *  MultiSelect / SingleSelect / etc.). Priority:
-	 *  1. The column's `header` (when it is a plain string, which is the
-	 *     usual case in flowms migrations).
-	 *  2. The customFilter's `label` (set on the remoteFilters entry).
-	 *  3. The raw `customFilter.id` (last-ditch fallback).
-	 *  Avoids surfacing dotted-path / camelCase IDs like
-	 *  `orderLines.allowSplitFulfilment` as the visible label. */
-	const displayLabel: string = $derived.by(() => {
-		if (typeof def.header === 'string' && def.header.length > 0) {
-			return def.header;
-		}
-		if (customFilter?.label) {
-			return customFilter.label;
-		}
-		return customFilter?.id ?? 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');
-
-	// A column declares it is filterable when it either (a) has a local
-	// `filterFn` (set on AccessorDef subclasses, and on Display/Bubble/
-	// Progress defs whose underlying data repo is local), or (b) declares
-	// a `filterValueType` (in which case the server is expected to do
-	// the filtering and the UI just renders an input of the matching
-	// type), or (c) is keyed in `customFilters` (remote filter chips
-	// supplied via `defsWrapper.remoteFilters`).
-	//
-	// Without case (b) a remote-pagination Table would silently hide
-	// every typed column from the quick-filter row and the advanced
-	// filter panel - `paginationRepo.dateFilter` and friends are only
-	// populated on LOCAL data repositories, so `setupDefaultColumnDefs`
-	// assigns `def.filterFn = undefined` for every typed column and
-	// the bare `hasFilterFn` gate would lock the input out.
-	const hasDeclaredFilterType = $derived(def.filterValueType != null);
-
-	const isSearchable = $derived(
-		def.allowFiltering &&
-			(hasFilterFn || hasDeclaredFilterType || 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);
-
-	/**
-	 * Debounce window for typed filter inputs (Text / Number / Between
-	 * min+max). Discrete selections (Svelecte selects, date pickers,
-	 * filter-mode dropdowns) bypass this and fire `filterBy` immediately.
-	 * Combined with the 400 ms debounce in `createRemoteRowSource`, the
-	 * server-side lookup lands roughly one second after the last keystroke,
-	 * which matches the "wait a couple of seconds" expectation users have
-	 * when typing into a free-text filter.
-	 */
-	const FILTER_INPUT_DEBOUNCE_MS = 500;
-
-	let typingDebounceTimer: ReturnType<typeof setTimeout> | undefined;
-
-	/** Fire the table's `filterBy` after the user stops typing for
-	 *  `FILTER_INPUT_DEBOUNCE_MS`. Repeated calls coalesce; the most
-	 *  recent value wins. */
-	function debouncedFilterBy(id: string, newValue: unknown): void {
-		if (typingDebounceTimer !== undefined) {
-			clearTimeout(typingDebounceTimer);
-		}
-		typingDebounceTimer = setTimeout(() => {
-			typingDebounceTimer = undefined;
-			tableContext.paginationRepo?.filterBy(id, newValue);
-		}, FILTER_INPUT_DEBOUNCE_MS);
-	}
-
-	// Clear any pending debounce when the row unmounts so we do not
-	// fire `filterBy` against a torn-down `paginationRepo`.
-	$effect(() => {
-		return () => {
-			if (typingDebounceTimer !== undefined) {
-				clearTimeout(typingDebounceTimer);
-				typingDebounceTimer = undefined;
-			}
-		};
-	});
-
-	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}>{displayLabel}</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 = displayLabel}
-
-							<!-- 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 = displayLabel}
-
-							<!-- 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}
-						{@const selectedPrimitives = selectedOptions
-							.map((it) => it.value)
-							.filter(
-								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
-							)}
-						<!--
-							MultiSelect with `valueAsObject={false}` matches
-							options against the primitive value, not the whole
-							SelectOption shape. Previously the remote-select
-							branch passed the SelectOption objects directly
-							(the `selectedOptions` $state), meaning the inner
-							`selectedKeys` derived saw
-							`[{label, value}, ...]` rows where it expected
-							`[id1, id2, ...]`, so no chips ever rendered even
-							though the filter was active server-side. Pull the
-							primitive `value` off each option to match the
-							local-select branch above.
-						-->
-						<MultiSelect
-							label={displayLabel}
-							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
-						/>
-					{/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={() => {
-							debouncedFilterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-					<span>and</span>
-					<NumberInput
-						id={inputId}
-						bind:value={valueMax}
-						oninput={() => {
-							debouncedFilterBy(def.id, [valueMin, valueMax]);
-						}}
-						onkeydown={(e: KeyboardEvent) => {
-							e.stopPropagation();
-						}}
-					/>
-				{:else if value == null || typeof value == 'string'}
-					<TextInput
-						id={inputId}
-						bind:value
-						oninput={() => {
-							debouncedFilterBy(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={() => {
-							debouncedFilterBy(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"
+>
+	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> = $props();
+
+	const customFilter = $derived(customFilters?.get(def.id));
+
+	/** Human-readable label used by every inner input (QuerySelect /
+	 *  MultiSelect / SingleSelect / etc.). Priority:
+	 *  1. The column's `header` (when it is a plain string, which is the
+	 *     usual case in flowms migrations).
+	 *  2. The customFilter's `label` (set on the remoteFilters entry).
+	 *  3. The raw `customFilter.id` (last-ditch fallback).
+	 *  Avoids surfacing dotted-path / camelCase IDs like
+	 *  `orderLines.allowSplitFulfilment` as the visible label. */
+	const displayLabel: string = $derived.by(() => {
+		if (typeof def.header === 'string' && def.header.length > 0) {
+			return def.header;
+		}
+		if (customFilter?.label) {
+			return customFilter.label;
+		}
+		return customFilter?.id ?? 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');
+
+	// A column is filterable when it has any of:
+	//  - a local `filterFn` (AccessorDef subclasses, or Display/Bubble/
+	//    Progress columns whose data repo is local),
+	//  - a declared `filterValueType` (server-side filtering — the UI
+	//    renders an input matching the declared type),
+	//  - a `customFilters` entry from `defsWrapper.remoteFilters`.
+	// The `filterValueType` case is required for remote-pagination tables:
+	// their data repo never assigns `filterFn`, so without it every typed
+	// column would silently disappear from the filter UI.
+	const hasDeclaredFilterType = $derived(def.filterValueType != null);
+
+	const isSearchable = $derived(
+		def.allowFiltering &&
+			(hasFilterFn || hasDeclaredFilterType || 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.queryValues.snapshot());
+						}
+						const x = tableContext.queryValues.get(def);
+
+						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);
+
+	/**
+	 * Debounce window for typed filter inputs (Text / Number / Between).
+	 * Discrete selections (selects, date pickers, filter-mode dropdowns)
+	 * skip this and fire `filterBy` immediately. Combined with the 400 ms
+	 * debounce in `createRemoteRowSource`, server-side filtering lands
+	 * roughly a second after the last keystroke.
+	 */
+	const FILTER_INPUT_DEBOUNCE_MS = 500;
+
+	let typingDebounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	/** Fire the table's `filterBy` after the user stops typing for
+	 *  `FILTER_INPUT_DEBOUNCE_MS`. Repeated calls coalesce; the most
+	 *  recent value wins. */
+	function debouncedFilterBy(id: string, newValue: unknown): void {
+		if (typingDebounceTimer !== undefined) {
+			clearTimeout(typingDebounceTimer);
+		}
+		typingDebounceTimer = setTimeout(() => {
+			typingDebounceTimer = undefined;
+			tableContext.paginationRepo?.filterBy(id, newValue);
+		}, FILTER_INPUT_DEBOUNCE_MS);
+	}
+
+	// Clear any pending debounce when the row unmounts so we do not
+	// fire `filterBy` against a torn-down `paginationRepo`.
+	$effect(() => {
+		return () => {
+			if (typingDebounceTimer !== undefined) {
+				clearTimeout(typingDebounceTimer);
+				typingDebounceTimer = undefined;
+			}
+		};
+	});
+
+	function generateOnChangeObject(_label: string) {
+		return (newValue: SelectOption<unknown> | null) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue?.value ?? null);
+			tableContext.queryValues.set(def, newValue ?? null);
+			value = newValue ?? null;
+		};
+	}
+
+	function generateOnChangePrimitive(_label: string) {
+		// AsPrimitive QuerySelect hands us the primitive value directly.
+		return (newValue: unknown) => {
+			tableContext.paginationRepo?.filterBy(def.id, newValue ?? null);
+			tableContext.queryValues.set(def, 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}>{displayLabel}</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 resolvedOptions}
+					{@const options = resolvedOptions as Array<SelectOption<unknown>>}
+					{#if hasQuery(customFilter)}
+						{#if customFilter.valueAsObject !== true}
+							{@const label = displayLabel}
+
+							<!-- 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 = displayLabel}
+
+							<!-- 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}
+						{@const selectedPrimitives = selectedOptions
+							.map((it) => it.value)
+							.filter(
+								(v): v is string | number => typeof v === 'string' || typeof v === 'number'
+							)}
+						<!--
+							With `valueAsObject={false}`, MultiSelect compares
+							its `selectedValues` against options by primitive
+							value, so we map `selectedOptions` to their
+							primitive `.value` rather than passing the
+							SelectOption objects directly.
+						-->
+						<MultiSelect
+							label={displayLabel}
+							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
+						/>
+					{/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={() => {
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+					<span>and</span>
+					<NumberInput
+						id={inputId}
+						bind:value={valueMax}
+						oninput={() => {
+							debouncedFilterBy(def.id, [valueMin, valueMax]);
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							e.stopPropagation();
+						}}
+					/>
+				{:else if value == null || typeof value == 'string'}
+					<TextInput
+						id={inputId}
+						bind:value
+						oninput={() => {
+							debouncedFilterBy(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={() => {
+							debouncedFilterBy(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%;
@@ -702,4 +687,4 @@
 .inner-row label input {
   cursor: pointer;
   width: 2rem;
-}</style>
+}</style>