@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Table/Headers/TableHead.svelte.d.ts

@@ -1,29 +1,26 @@
-export interface TableHeadProps {
-    showHighlight: boolean;
-    side: 'left' | 'centre' | 'right';
-    oncontextmenu?: (e: MouseEvent) => void;
-}
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+import type { TableHeadProps } from './TableHeadProps.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: TableHeadProps;
     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'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['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']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableHead: $$IsomorphicComponent;
-type TableHead<T extends object> = InstanceType<typeof TableHead<T>>;
+type TableHead<T extends object, IdType extends Primitive> = InstanceType<typeof TableHead<T, IdType>>;
 export default TableHead;

package/dist/Components/Table/Headers/TableHeadProps.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Props for `TableHead`. The head now renders the full column set (left
+ * pinned + centre + right pinned) inside a single grid container row; the
+ * per-side `side` / `showHighlight` props from the three-section render
+ * were dropped in the div+grid refactor.
+ */
+export interface TableHeadProps {
+    /** Forwarded right-click handler on the head element. */
+    oncontextmenu?: (e: MouseEvent) => void;
+}

package/dist/Components/Table/Headers/TableHeadProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
 	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
@@ -13,8 +13,9 @@
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const labelledPresets: Array<SelectOption<string>> = $derived(
 		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))
@@ -27,9 +28,12 @@
 	let pendingPresetName = $state('');
 </script>
 
-<div class="column-panel top presets-and-filter">
-	<!-- TODO Select component -->
-	<div class="select">
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>Modify Columns</h2>
+	</header>
+
+	<div class="toolbar">
 		<SingleSelect
 			label="Selected Preset"
 			name="Preset"
@@ -40,66 +44,120 @@
 			valueAsObject
 			onchange={(newSelection: SelectOption<string> | null) => {
 				const preset =
-					newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.label);
+					newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.value);
 				if (preset) {
 					tableContext.setSelectedPreset(preset);
 				}
 			}}
 		/>
+		<TextInput
+			bind:value={searchValue}
+			leftIcon={{ name: 'search', size: Size.Medium }}
+			placeholder="Search Columns"
+			onkeydown={() => {
+				// Override the TextInput default `passthrough` keydown so the
+				// input does not blur on every alphanumeric keystroke (which
+				// is the barcode-scanner default; see `Helpers.svelte.ts`).
+			}}
+		/>
 	</div>
-	<TextInput
-		bind:value={searchValue}
-		leftIcon={{ name: 'search', size: Size.Medium }}
-		placeholder="Search Columns"
-	/>
-</div>
-<ColumnList {searchValue} />
-<form
-	class="column-panel bottom save-preset-wrapper"
-	onsubmit={(e) => {
-		e.preventDefault();
-		tableContext.saveColumnPreset(pendingPresetName);
-		pendingPresetName = '';
-	}}
->
-	<!-- size={Size.MediumSmall} -->
-	<TextInput
-		placeholder="name"
-		bind:value={pendingPresetName}
-	/>
-	<Button
-		type="submit"
-		variant={Variant.Secondary}
-		nowrap
-		size={Size.MediumSmall}>Save Layout</Button
+
+	<div class="column-list-wrapper">
+		<ColumnList {searchValue} />
+	</div>
+
+	<form
+		class="side-panel-footer"
+		onsubmit={(e) => {
+			e.preventDefault();
+			const trimmed = pendingPresetName.trim();
+			if (!trimmed) {
+				return;
+			}
+			tableContext.saveColumnPreset(trimmed);
+			pendingPresetName = '';
+		}}
 	>
-</form>
+		<TextInput
+			placeholder="Preset name"
+			bind:value={pendingPresetName}
+		/>
+		<Button
+			type="submit"
+			variant={Variant.Secondary}
+			nowrap
+			size={Size.MediumSmall}>Save Layout</Button
+		>
+	</form>
+</section>
 
-<style>.column-panel {
-  --input-height: 3rem;
+<style>.side-panel-section {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  width: 100%;
   background-color: #ffffff;
+  box-sizing: border-box;
+  min-height: 0;
 }
-.column-panel.top {
-  border-bottom: solid 2px #cbd4da;
+
+.side-panel-header {
+  flex-shrink: 0;
+  padding: 1.25rem 1.25rem 0.875rem;
+  border-bottom: solid 1px #cbd4da;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
 }
-.column-panel.bottom {
-  border-top: solid 2px #cbd4da;
+.side-panel-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #3a4952;
+  line-height: 1.25;
 }
-.column-panel.presets-and-filter {
+
+.side-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
-  flex-flow: column;
-  row-gap: 0.5rem;
-  padding: 0.5rem;
-  flex-basis: min-content;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
-.column-panel.save-preset-wrapper {
+
+.side-panel-footer {
+  flex-shrink: 0;
+  padding: 0.875rem 1.25rem;
+  border-top: solid 1px #cbd4da;
+  background-color: #ffffff;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  flex-basis: min-content;
+  gap: 0.75rem;
+  align-items: center;
+  box-sizing: border-box;
 }
-.column-panel .select {
-  width: 100%;
+
+.toolbar {
+  flex-shrink: 0;
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  background-color: #ffffff;
+  border-bottom: solid 1px #cbd4da;
+  --input-height: 3rem;
+}
+
+.column-list-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: #ffffff;
 }</style>

package/dist/Components/Table/Misc/ColumnPanel.svelte.d.ts

@@ -1,24 +1,25 @@
-declare function $$render<T extends object>(): {
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: Record<string, never>;
     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'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['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>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ColumnPanel: $$IsomorphicComponent;
-type ColumnPanel<T extends object> = InstanceType<typeof ColumnPanel<T>>;
+type ColumnPanel<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnPanel<T, IdType>>;
 export default ColumnPanel;

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, IdType extends Primitive"
 >
 	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
@@ -14,9 +14,10 @@
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { Primitive } from '../Types/Context/TableInitOptions.js';
 	import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const { onclose }: ColumnPanelModalProps = $props();
 	const labelledPresets: Array<SelectOption<string>> = $derived(
@@ -32,14 +33,22 @@
 	function trySavePreset(e: KeyboardEvent) {
 		if (e.key === 'Enter') {
 			e.preventDefault();
-			tableContext.saveColumnPreset(pendingPresetName);
+			const trimmed = pendingPresetName.trim();
+			if (!trimmed) {
+				return;
+			}
+			tableContext.saveColumnPreset(trimmed);
 			pendingPresetName = '';
 		}
 	}
 
 	function savePreset(e: MouseEvent) {
 		e.preventDefault();
-		tableContext.saveColumnPreset(pendingPresetName);
+		const trimmed = pendingPresetName.trim();
+		if (!trimmed) {
+			return;
+		}
+		tableContext.saveColumnPreset(trimmed);
 		pendingPresetName = '';
 	}
 </script>
@@ -62,7 +71,7 @@
 					valueAsObject
 					onchange={(newSelection: SelectOption<string> | null) => {
 						const preset =
-							newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.label);
+							newSelection && tableContext.columnPresets.find((p) => p.name === newSelection.value);
 						if (preset) {
 							tableContext.setSelectedPreset(preset);
 						}
@@ -73,15 +82,19 @@
 				bind:value={searchValue}
 				leftIcon={{ name: 'search', size: Size.Medium }}
 				placeholder="Search Columns"
+				onkeydown={() => {
+					// Override the TextInput default `passthrough` keydown so
+					// the input does not blur on every alphanumeric keystroke
+					// (the barcode-scanner default; see `Helpers.svelte.ts`).
+				}}
 			/>
 		</div>
 		<div class="scrollable">
 			<ColumnList {searchValue} />
 		</div>
 		<div class="column-panel bottom save-preset-wrapper">
-			<!-- size={Size.MediumSmall} -->
 			<TextInput
-				placeholder="name"
+				placeholder="Preset name"
 				bind:value={pendingPresetName}
 				onkeydown={trySavePreset}
 			/>

package/dist/Components/Table/Misc/ColumnPanelModal.svelte.d.ts

@@ -1,25 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
 import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: ColumnPanelModalProps;
     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'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['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']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ColumnPanelModal: $$IsomorphicComponent;
-type ColumnPanelModal<T extends object> = InstanceType<typeof ColumnPanelModal<T>>;
+type ColumnPanelModal<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnPanelModal<T, IdType>>;
 export default ColumnPanelModal;

package/dist/Components/Table/Misc/ColumnPanelModalProps.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Props for `ColumnPanelModal` (the touch variant of the column-presets and
+ * column-list management panel).
+ */
 export interface ColumnPanelModalProps {
+    /** Called when the modal requests close. */
     onclose?: () => void;
 }

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object, FilterValueType, FilterOptionsType"
+	generics="T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType"
 >
 	import { dev } from '$app/environment';
 	import Button from '../../Button.svelte';
@@ -12,7 +12,8 @@
 	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 { 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';
@@ -20,6 +21,7 @@
 	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';
@@ -27,7 +29,7 @@
 	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
 	import { stringFilterTypes } from './stringFilterTypes.js';
 
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
 
 	const { def, customFilters }: FilterInputProps<T, FilterValueType, FilterOptionsType> = $props();
 
@@ -35,7 +37,7 @@
 
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 
-	let value: /*SelectOption<unknown> |*/ unknown /*| null | undefined*/ = $state(null);
+	let value: unknown = $state(null);
 	let valueMin: number | null = $state(null);
 	let valueMax: number | null = $state(null);
 
@@ -48,14 +50,8 @@
 
 	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(
@@ -76,10 +72,6 @@
 		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
 	);
@@ -213,11 +205,6 @@
 				}
 			}
 		}
-
-		// selectedNumberFilterType =
-		// 	(filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
-		// selectedStringFilterType =
-		// 	(filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
 	});
 
 	const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
@@ -230,9 +217,6 @@
 		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);
@@ -247,10 +231,14 @@
 	}
 
 	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;
+		// 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>
@@ -312,6 +300,9 @@
 		{: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 ??
@@ -323,13 +314,12 @@
 						name={customFilter?.objectName ?? 'Item'}
 						{options}
 						valueAsObject={false}
-						onchange={(e: Array<SelectOption<unknown>>) => {
-							tableContext.paginationRepo?.filterBy(
-								def.id,
-								e.map((it) => it.value)
-							);
+						onchange={(e: Array<unknown>) => {
+							// Phase 7.6: `valueAsObject={false}` returns
+							// primitives directly.
+							tableContext.paginationRepo?.filterBy(def.id, e);
 						}}
-						selectedValues={selectedOptions}
+						selectedValues={selectedPrimitives}
 						collapseSelection
 					/>
 				{:catch e}
@@ -355,11 +345,11 @@
 								{label}
 								clearable
 								name={customFilter.objectName ?? 'Item'}
-								valueProp="value"
-								labelProp="label"
-								value={value as string | number | null}
+								valueProp={'value' as never}
+								labelProp={'label' as never}
+								value={value as never}
 								query={customFilter.query}
-								bind:options={lastQueryOptions}
+								bind:options={lastQueryOptions as never}
 								onchange={generateOnChangePrimitive(label)}
 							/>
 						{:else}
@@ -388,11 +378,10 @@
 							name={customFilter.objectName ?? 'Item'}
 							{options}
 							valueAsObject={false}
-							onchange={(e: Array<SelectOption<unknown>>) => {
-								tableContext.paginationRepo?.filterBy(
-									def.id,
-									e.map((it) => it.value)
-								);
+							onchange={(e: Array<unknown>) => {
+								// Phase 7.6: `valueAsObject={false}` returns
+								// primitives directly.
+								tableContext.paginationRepo?.filterBy(def.id, e);
 							}}
 							selectedValues={selectedOptions}
 							collapseSelection

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

@@ -1,25 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
 import type { FilterInputProps } from './FilterInputProps.js';
-declare function $$render<T extends object, FilterValueType, FilterOptionsType>(): {
+declare function $$render<T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType>(): {
     props: FilterInputProps<T, FilterValueType, FilterOptionsType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object, FilterValueType, FilterOptionsType> {
-    props(): ReturnType<typeof $$render<T, FilterValueType, FilterOptionsType>>['props'];
-    events(): ReturnType<typeof $$render<T, FilterValueType, FilterOptionsType>>['events'];
-    slots(): ReturnType<typeof $$render<T, FilterValueType, FilterOptionsType>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType> {
+    props(): ReturnType<typeof $$render<T, IdType, FilterValueType, FilterOptionsType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType, FilterValueType, FilterOptionsType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType, FilterValueType, FilterOptionsType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object, FilterValueType, FilterOptionsType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['props']>, ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['events']>, ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['exports']>;
-    <T extends object, FilterValueType, FilterOptionsType>(internal: unknown, props: ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['props']> & {}): ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+    new <T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['props']>, ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['events']>, ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['exports']>;
+    <T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType, FilterValueType, FilterOptionsType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
 }
 declare const FilterInput: $$IsomorphicComponent;
-type FilterInput<T extends object, FilterValueType, FilterOptionsType> = InstanceType<typeof FilterInput<T, FilterValueType, FilterOptionsType>>;
+type FilterInput<T extends object, IdType extends Primitive, FilterValueType, FilterOptionsType> = InstanceType<typeof FilterInput<T, IdType, FilterValueType, FilterOptionsType>>;
 export default FilterInput;