@warkypublic/svelix 0.1.44 → 0.1.47

package/dist/components/SvarkGrid/SvarkGrid.svelte

@@ -1,1177 +1,931 @@
-<script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import type { IApi } from '@svar-ui/svelte-grid';
-	import SvarkGridView from './internal/SvarkGridView.svelte';
-	import { SvarkResolveSpecAdapter } from './adapters/SvarkResolveSpecAdapter.js';
-	import { SvarkRestHeaderSpecAdapter } from './adapters/SvarkRestHeaderSpecAdapter.js';
-	import type {
-		GridColumn,
-		GridColumnFilters,
-		GridColumnSortOrder,
-		GridCommonProps,
-		GridEventType
-	} from '../Types/generic_grid';
-	import type {
-		SvarkFilterState,
-		SvarkSortState,
-		SvarkAdapterType,
-		SvarkInitialQuery,
-		SvarkContextMenuItem,
-		SvarkContextMenuProps,
-		SvarkProps,
-		IColumnConfig,
-		IConfig
-	} from './types.js';
-	import {
-		adapterKindFromDataSource,
-		gridColumnFiltersToSvarkFilterState,
-		idsToSelectedItems,
-		mapGenericColumnsToSvarColumns,
-		selectedItemsToIds,
-		sortOrderToSvarkSortState,
-		svarkSortStateToSortMarks,
-		svarkSortStateToSortOrder,
-		toCssSize
-	} from './utils/svarGridMapping.js';
-	import SvarkHeaderFilterCell from './components/SvarkHeaderFilterCell.svelte';
-	import { SVARKGRID_DEFAULT_ITEMS_MARKER_ID } from './utils/contextMenu.js';
-
-	export type SvarProps = Partial<
-		Omit<
-			SvarkProps,
-			// Generic-first equivalents / resolved from GridCommonProps:
-			| 'columns'
-			| 'height'
-			// Server config is generic-first but allowed as fallback:
-			| 'url'
-			| 'baseUrl'
-			| 'token'
-			| 'schema'
-			| 'entity'
-		>
-	> & {
-		columns?: IColumnConfig[];
-		url?: string;
-		baseUrl?: string;
-		token?: string;
-		schema?: string;
-		entity?: string;
-		height?: string | number;
-		config?: Omit<IConfig, 'data'>;
-	};
-
-	export interface Props extends GridCommonProps<Record<string, unknown>, unknown> {
-		columns: Array<GridColumn<Record<string, unknown>, unknown>>;
-		/** Svark/SVAR-grid escape hatch props. Generic props take precedence when overlapping. */
-		SvarProps?: SvarProps;
-		/** Used only when `searchValue` is undefined (uncontrolled). */
-		defaultSearchValue?: string;
-		/** Rows per fetch/page. If omitted, falls back to `SvarProps.pageSize` then 100. */
-		pageSize?: number;
-		/** Enables SVAR virtual scrolling. If omitted, falls back to `SvarProps.virtualScroll` then false. */
-		virtualScroll?: boolean;
-		/** Enables SVAR infinite scrolling. If omitted, falls back to `SvarProps.infiniteScroll` then false. */
-		infiniteScroll?: boolean;
-		/** Enables SVAR row selection. If omitted, falls back to `SvarProps.select` then true. */
-		select?: boolean;
-		/** Enables SVAR multi-row selection. If omitted, falls back to `SvarProps.multiselect` then false. */
-		multiselect?: boolean;
-	}
-
-	let {
-		columns,
-		data: dataProp,
-		width,
-		height,
-		rowHeight,
-		headerHeight,
-			onColumnMoved: _onColumnMoved,
-		sortOrder,
-		onSortOrderChange,
-		filters,
-		onFilterChange,
-		searchValue,
-		onSearchValueChange,
-		selectedItems,
-		onSelectedItemsChange,
-		dataSource,
-		dataSourceOptions,
-		onDataChange,
-		settings,
-		onCellEvent,
-		onGridEvent,
-		onMenuClick,
-		SvarProps: svarProps = {},
-		defaultSearchValue = '',
-		pageSize: pageSizeProp,
-		virtualScroll: virtualScrollProp,
-		infiniteScroll: infiniteScrollProp,
-		select: selectProp,
-		multiselect: multiselectProp
-	}: Props = $props();
-
-	function normalizeAdapterType(t: SvarkAdapterType): 'ResolveSpec' | 'RestHeaderSpec' {
-		return t === 'header' || t === 'RestHeaderSpec' ? 'RestHeaderSpec' : 'ResolveSpec';
-	}
-
-	const resolvedUrl = $derived(dataSourceOptions?.url ?? svarProps.url ?? svarProps.baseUrl ?? '');
-	const resolvedToken = $derived(dataSourceOptions?.authToken ?? svarProps.token);
-	const resolvedSchema = $derived(dataSourceOptions?.schema ?? svarProps.schema ?? '');
-	const resolvedEntity = $derived(dataSourceOptions?.entity ?? svarProps.entity ?? '');
-	const resolvedUniqueID = $derived(dataSourceOptions?.uniqueID ?? 'id');
-
-	const resolvedAdapterType = $derived(
-		normalizeAdapterType(
-			svarProps.adapterType ??
-				svarProps.clientType ??
-				adapterKindFromDataSource(dataSource)
-		)
-	);
-
-	const resolvedServerSide = $derived(
-		svarProps.serverSide ??
-			(!!dataSource && dataSource !== 'local' && dataSource !== 'custom')
-	);
-
-	const resolvedResizableColumns = $derived(settings?.resizableColumns ?? true);
-	const resolvedHideHeader = $derived(settings?.hideHeader ?? false);
-	const resolvedReadonly = $derived(settings?.readonly ?? false);
-	const enableColumnFilters = $derived(resolvedServerSide || dataSource === 'local');
-
-	const resolvedHeight = $derived(height ?? svarProps.height ?? '400px');
-	const resolvedWidth = $derived(width ?? '100%');
-
-	const baseColumns = $derived.by((): IColumnConfig[] => {
-		if (svarProps.columns?.length) return svarProps.columns;
-		return mapGenericColumnsToSvarColumns(columns, {
-			serverSide: resolvedServerSide,
-			resizableColumns: resolvedResizableColumns,
-			hideHeader: resolvedHideHeader
-		});
+<script lang="ts">import SvarkGridView from "./internal/SvarkGridView.svelte";
+import { SvarkResolveSpecAdapter } from "./adapters/SvarkResolveSpecAdapter.js";
+import { SvarkRestHeaderSpecAdapter } from "./adapters/SvarkRestHeaderSpecAdapter.js";
+import { adapterKindFromDataSource, gridColumnFiltersToSvarkFilterState, idsToSelectedItems, mapGenericColumnsToSvarColumns, selectedItemsToIds, sortOrderToSvarkSortState, svarkSortStateToSortMarks, svarkSortStateToSortOrder, toCssSize } from "./utils/svarGridMapping.js";
+import SvarkHeaderFilterCell from "./components/SvarkHeaderFilterCell.svelte";
+import { SVARKGRID_DEFAULT_ITEMS_MARKER_ID } from "./utils/contextMenu.js";
+let { columns, data: dataProp, width, height, rowHeight, headerHeight, onColumnMoved: _onColumnMoved, sortOrder, onSortOrderChange, filters, onFilterChange, searchValue, onSearchValueChange, selectedItems, onSelectedItemsChange, dataSource, dataSourceOptions, onDataChange, settings, onCellEvent, onGridEvent, onMenuClick, SvarProps: svarProps = {}, defaultSearchValue = "", pageSize: pageSizeProp, virtualScroll: virtualScrollProp, infiniteScroll: infiniteScrollProp, select: selectProp, multiselect: multiselectProp } = $props();
+function normalizeAdapterType(t) {
+	return t === "header" || t === "RestHeaderSpec" ? "RestHeaderSpec" : "ResolveSpec";
+}
+const resolvedUrl = $derived(dataSourceOptions?.url ?? svarProps.url ?? svarProps.baseUrl ?? "");
+const resolvedToken = $derived(dataSourceOptions?.authToken ?? svarProps.token);
+const resolvedSchema = $derived(dataSourceOptions?.schema ?? svarProps.schema ?? "");
+const resolvedEntity = $derived(dataSourceOptions?.entity ?? svarProps.entity ?? "");
+const resolvedUniqueID = $derived(dataSourceOptions?.uniqueID ?? "id");
+const resolvedAdapterType = $derived(normalizeAdapterType(svarProps.adapterType ?? svarProps.clientType ?? adapterKindFromDataSource(dataSource)));
+const resolvedServerSide = $derived(svarProps.serverSide ?? (!!dataSource && dataSource !== "local" && dataSource !== "custom"));
+const resolvedResizableColumns = $derived(settings?.resizableColumns ?? true);
+const resolvedHideHeader = $derived(settings?.hideHeader ?? false);
+const resolvedReadonly = $derived(settings?.readonly ?? false);
+const enableColumnFilters = $derived(resolvedServerSide || dataSource === "local");
+const resolvedHeight = $derived(height ?? svarProps.height ?? "400px");
+const resolvedWidth = $derived(width ?? "100%");
+const baseColumns = $derived.by(() => {
+	if (svarProps.columns?.length) return svarProps.columns;
+	return mapGenericColumnsToSvarColumns(columns, {
+		serverSide: resolvedServerSide,
+		resizableColumns: resolvedResizableColumns,
+		hideHeader: resolvedHideHeader
 	});
-
-	const heightStyle = $derived(toCssSize(resolvedHeight, '400px'));
-	const widthStyle = $derived(toCssSize(resolvedWidth, '100%'));
-
-	const pageSize = $derived(pageSizeProp ?? svarProps.pageSize ?? 100);
-	const virtualScroll = $derived(virtualScrollProp ?? svarProps.virtualScroll ?? false);
-	const infiniteScroll = $derived(infiniteScrollProp ?? svarProps.infiniteScroll ?? false);
-	const select = $derived(selectProp ?? svarProps.select ?? true);
-	const multiselect = $derived(multiselectProp ?? svarProps.multiselect ?? false);
-	const query = $derived(svarProps.query ?? ({} as SvarkInitialQuery));
-	const config = $derived(svarProps.config ?? ({} as Omit<IConfig, 'data'>));
-
-	const topBarLeft = $derived(svarProps.topBarLeft);
-	const topBarRight = $derived(svarProps.topBarRight);
-	const onchange = $derived(svarProps.onchange);
-	const onerror = $derived(svarProps.onerror);
-	const onselect = $derived(svarProps.onselect);
-	const onrowclick = $derived(svarProps.onrowclick);
-	const onrowdblclick = $derived(svarProps.onrowdblclick);
-	const onrowcontextmenu = $derived(svarProps.onrowcontextmenu);
-	const userContextMenuProps = $derived(svarProps.contextMenuProps);
-
-	let data = $state<Record<string, unknown>[]>([]);
-	let localRawData = $state<Record<string, unknown>[]>([]);
-	let loading = $state(false);
-	let infiniteLoading = $state(false);
-	let error = $state<string | null>(null);
-	let total = $state(0);
-	let sortState = $state<SvarkSortState[]>([]);
-	let gridFilterState = $state<SvarkFilterState>({});
-	let searchFilterState = $state<SvarkFilterState>({});
-	let page = $state(0);
-	let reload = $state(0);
-	let lastServerRequestKey = $state<string>('');
-	let activeServerRequestId = 0;
-	let activeServerRequestKey = '';
-
-	let gridApi = $state<IApi | null>(null);
-	let searchOpen = $state(false);
-	let searchValueState = $state(defaultSearchValue);
-
-	const effectiveFilterState = $derived({ ...gridFilterState, ...searchFilterState });
-
-	// Paging is active when serverSide with no scroll variant
-	const showPager = $derived(resolvedServerSide && !infiniteScroll && !virtualScroll);
-	const totalPages = $derived(pageSize > 0 ? Math.ceil(total / pageSize) : 1);
-	const pageStart = $derived(total === 0 ? 0 : page * pageSize + 1);
-	const pageEnd = $derived(Math.min((page + 1) * pageSize, total));
-
-	// ── Generic controlled/uncontrolled bridges ───────────────────────────────
-
-	let internalSortOrder = $state<GridColumnSortOrder>({});
-	$effect(() => {
-		if (sortOrder === undefined) return;
-		internalSortOrder = sortOrder;
-	});
-	const resolvedSortOrder = $derived(sortOrder ?? internalSortOrder);
-
-	let internalFilters = $state<GridColumnFilters>({});
-	$effect(() => {
-		if (filters === undefined) return;
-		internalFilters = filters;
-	});
-	const resolvedFilters = $derived(filters ?? internalFilters);
-
-	const instanceId = $state(
-		`svarkgrid-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`
-	);
-
-	let internalSelectedItems = $state<Record<string, unknown>[]>([]);
-	$effect(() => {
-		if (selectedItems === undefined) return;
-		internalSelectedItems = selectedItems;
-	});
-	const resolvedSelectedItems = $derived(selectedItems ?? internalSelectedItems);
-	const resolvedSelectedIds = $derived(selectedItemsToIds(resolvedSelectedItems, resolvedUniqueID));
-
-	function emitSortOrder(next: GridColumnSortOrder) {
-		if (sortOrder === undefined) internalSortOrder = next;
-		onSortOrderChange?.(next);
-	}
-
-	function emitFilters(next: GridColumnFilters) {
-		if (filters === undefined) internalFilters = next;
-		onFilterChange?.(next);
-	}
-
-	function emitGridEvent(
-		type: GridEventType,
-		item?: Record<string, unknown>,
-		column?: GridColumn<Record<string, unknown>, unknown>,
-		coords?: { x: number; y: number; code?: string },
-		detail?: Record<string, unknown>
-	) {
-		onGridEvent?.(type, item, column, coords, detail);
-	}
-
-	const genericColumnsById = $derived.by(() => {
-		const map: Record<string, GridColumn<Record<string, unknown>, unknown>> = {};
-		for (const col of columns ?? []) map[String(col.id)] = col;
-		return map;
+});
+const heightStyle = $derived(toCssSize(resolvedHeight, "400px"));
+const widthStyle = $derived(toCssSize(resolvedWidth, "100%"));
+const pageSize = $derived(pageSizeProp ?? svarProps.pageSize ?? 100);
+const virtualScroll = $derived(virtualScrollProp ?? svarProps.virtualScroll ?? false);
+const infiniteScroll = $derived(infiniteScrollProp ?? svarProps.infiniteScroll ?? false);
+const select = $derived(selectProp ?? svarProps.select ?? true);
+const multiselect = $derived(multiselectProp ?? svarProps.multiselect ?? false);
+const query = $derived(svarProps.query ?? {});
+const config = $derived(svarProps.config ?? {});
+const topBarLeft = $derived(svarProps.topBarLeft);
+const topBarRight = $derived(svarProps.topBarRight);
+const onchange = $derived(svarProps.onchange);
+const onerror = $derived(svarProps.onerror);
+const onselect = $derived(svarProps.onselect);
+const onrowclick = $derived(svarProps.onrowclick);
+const onrowdblclick = $derived(svarProps.onrowdblclick);
+const onrowcontextmenu = $derived(svarProps.onrowcontextmenu);
+const userContextMenuProps = $derived(svarProps.contextMenuProps);
+let data = $state([]);
+let localRawData = $state([]);
+let loading = $state(false);
+let infiniteLoading = $state(false);
+let error = $state(null);
+let total = $state(0);
+let sortState = $state([]);
+let gridFilterState = $state({});
+let searchFilterState = $state({});
+let page = $state(0);
+let reload = $state(0);
+let lastServerRequestKey = $state("");
+let activeServerRequestId = 0;
+let activeServerRequestKey = "";
+let gridApi = $state(null);
+let searchOpen = $state(false);
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; controlled changes handled by $effect
+let searchValueState = $state(defaultSearchValue);
+const effectiveFilterState = $derived({
+	...gridFilterState,
+	...searchFilterState
+});
+// Paging is active when serverSide with no scroll variant
+const showPager = $derived(resolvedServerSide && !infiniteScroll && !virtualScroll);
+const totalPages = $derived(pageSize > 0 ? Math.ceil(total / pageSize) : 1);
+const pageStart = $derived(total === 0 ? 0 : page * pageSize + 1);
+const pageEnd = $derived(Math.min((page + 1) * pageSize, total));
+// ── Generic controlled/uncontrolled bridges ───────────────────────────────
+let internalSortOrder = $state({});
+$effect(() => {
+	if (sortOrder === undefined) return;
+	internalSortOrder = sortOrder;
+});
+const resolvedSortOrder = $derived(sortOrder ?? internalSortOrder);
+let internalFilters = $state({});
+$effect(() => {
+	if (filters === undefined) return;
+	internalFilters = filters;
+});
+const resolvedFilters = $derived(filters ?? internalFilters);
+const instanceId = $state(`svarkgrid-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`);
+let internalSelectedItems = $state([]);
+$effect(() => {
+	if (selectedItems === undefined) return;
+	internalSelectedItems = selectedItems;
+});
+const resolvedSelectedItems = $derived(selectedItems ?? internalSelectedItems);
+const resolvedSelectedIds = $derived(selectedItemsToIds(resolvedSelectedItems, resolvedUniqueID));
+function emitSortOrder(next) {
+	if (sortOrder === undefined) internalSortOrder = next;
+	onSortOrderChange?.(next);
+}
+function emitFilters(next) {
+	if (filters === undefined) internalFilters = next;
+	onFilterChange?.(next);
+}
+function emitGridEvent(type, item, column, coords, detail) {
+	onGridEvent?.(type, item, column, coords, detail);
+}
+const genericColumnsById = $derived.by(() => {
+	const map = {};
+	for (const col of columns ?? []) map[String(col.id)] = col;
+	return map;
+});
+function setColumnFilter(columnId, next) {
+	const col = genericColumnsById[columnId];
+	const dataKey = col?.dataKey;
+	const merged = {
+		...resolvedFilters[columnId] ?? {},
+		...next,
+		...dataKey ? { dataKey } : {}
+	};
+	emitFilters({
+		...resolvedFilters,
+		[columnId]: merged
 	});
-
-	function setColumnFilter(columnId: string, next: GridColumnFilters[string]) {
-		const col = genericColumnsById[columnId];
-		const dataKey = col?.dataKey;
-		const merged: GridColumnFilters[string] = {
-			...(resolvedFilters[columnId] ?? {}),
-			...next,
-			...(dataKey ? { dataKey } : {})
-		};
-		emitFilters({ ...resolvedFilters, [columnId]: merged });
-	}
-
-	function clearColumnFilter(columnId: string) {
-		const { [columnId]: _ignored, ...rest } = resolvedFilters;
-		emitFilters(rest);
-	}
-
-	function setColumnSort(columnId: string, next: 'none' | 'asc' | 'desc') {
-		// Prefer using the grid API so local mode actually sorts rows and
-		// server-side mode triggers the existing intercept logic.
-		if (gridApi) {
-			if (next === 'none') {
-				gridApi.exec('sort-rows', {} as any);
-			} else {
-				gridApi.exec('sort-rows', { key: columnId, add: false, order: next });
-			}
-			return;
+}
+function clearColumnFilter(columnId) {
+	const { [columnId]: _ignored, ...rest } = resolvedFilters;
+	emitFilters(rest);
+}
+function setColumnSort(columnId, next) {
+	// Prefer using the grid API so local mode actually sorts rows and
+	// server-side mode triggers the existing intercept logic.
+	if (gridApi) {
+		if (next === "none") {
+			gridApi.exec("sort-rows", {});
+		} else {
+			gridApi.exec("sort-rows", {
+				key: columnId,
+				add: false,
+				order: next
+			});
 		}
-
-		const merged: GridColumnSortOrder = { ...(resolvedSortOrder ?? {}) };
-		merged[columnId] = next;
-		emitSortOrder(merged);
-	}
-
-	function isGenericColumnFilterDisabled(columnId: string): boolean {
-		const col = genericColumnsById[columnId];
-		return col?.disableFilter === true;
+		return;
+	}
+	const merged = { ...resolvedSortOrder ?? {} };
+	merged[columnId] = next;
+	emitSortOrder(merged);
+}
+function isGenericColumnFilterDisabled(columnId) {
+	const col = genericColumnsById[columnId];
+	return col?.disableFilter === true;
+}
+function enhanceColumnHeader(col) {
+	const id = col?.id;
+	const columnId = id == null ? "" : String(id);
+	const queryText = searchValueState.trim();
+	// Enable column sorting by default (SVAR Grid expects `sort` opt-out).
+	const sort = col.sort ?? true;
+	if (resolvedHideHeader) return {
+		...col,
+		sort,
+		header: undefined
+	};
+	const rawHeader = col.header;
+	// Avoid messing with complex multi-row headers.
+	if (Array.isArray(rawHeader)) return {
+		...col,
+		sort
+	};
+	const headerCfg = typeof rawHeader === "string" ? { text: rawHeader } : rawHeader && typeof rawHeader === "object" ? { ...rawHeader } : { text: columnId };
+	const isSearchTarget = !!queryText && !!columnId && !col.hidden && (resolvedServerSide ? col.searchable === true : col.searchable !== false);
+	if (!headerCfg.cell) {
+		const filterable = enableColumnFilters && !!columnId && !col.hidden && !isGenericColumnFilterDisabled(columnId);
+		headerCfg.cell = SvarkHeaderFilterCell;
+		headerCfg.__svarkMenuId = `${instanceId}:filter:${columnId}`;
+		headerCfg.__svarkFilterable = filterable;
+		headerCfg.__svarkColumnId = columnId;
+		headerCfg.__svarkColumnLabel = String(headerCfg.text ?? columnId);
+		headerCfg.__svarkSearchHighlight = isSearchTarget;
+		headerCfg.__svarkCurrentSort = resolvedSortOrder?.[columnId] ?? "none";
+		headerCfg.__svarkSetSort = (next) => setColumnSort(columnId, next);
+		headerCfg.__svarkCurrentFilter = resolvedFilters[columnId];
+		headerCfg.__svarkSetFilter = (next) => setColumnFilter(columnId, next);
+		headerCfg.__svarkClearFilter = () => clearColumnFilter(columnId);
+	}
+	return {
+		...col,
+		sort,
+		header: headerCfg
+	};
+}
+const gridColumns = $derived.by(() => (baseColumns ?? []).map((col) => enhanceColumnHeader(col)));
+function emitSearchValue(next) {
+	if (searchValue === undefined) searchValueState = next;
+	onSearchValueChange?.(next);
+}
+function emitSelectedItems(next) {
+	if (selectedItems === undefined) internalSelectedItems = next;
+	onSelectedItemsChange?.(next);
+}
+$effect(() => {
+	sortState = sortOrderToSvarkSortState(resolvedSortOrder);
+});
+$effect(() => {
+	gridFilterState = gridColumnFiltersToSvarkFilterState(resolvedFilters, { prefix: "" });
+});
+$effect(() => {
+	if (searchValue === undefined) return;
+	searchValueState = searchValue;
+});
+// ── Local data mode (dataSource: 'local' | 'custom') ──────────────────────
+$effect(() => {
+	if (resolvedServerSide) return;
+	void reload;
+	error = null;
+	loading = false;
+	if (!dataProp) {
+		localRawData = [];
+		data = [];
+		total = 0;
+		return;
+	}
+	let cancelled = false;
+	if (typeof dataProp === "function") {
+		loading = true;
+		dataProp().then((result) => {
+			if (cancelled) return;
+			localRawData = result ?? [];
+		}).catch((e) => {
+			if (cancelled) return;
+			const msg = e instanceof Error ? e.message : "Failed to load data";
+			error = msg;
+			onerror?.(msg);
+		}).finally(() => {
+			if (!cancelled) loading = false;
+		});
+	} else {
+		localRawData = dataProp ?? [];
 	}
-
-	function enhanceColumnHeader(col: IColumnConfig): IColumnConfig {
-		const id = (col as any)?.id;
-		const columnId = id == null ? '' : String(id);
-		const queryText = searchValueState.trim();
-
-		// Enable column sorting by default (SVAR Grid expects `sort` opt-out).
-		const sort = (col as any).sort ?? true;
-
-		if (resolvedHideHeader) return { ...col, sort, header: undefined };
-
-		const rawHeader = (col as any).header;
-		// Avoid messing with complex multi-row headers.
-		if (Array.isArray(rawHeader)) return { ...col, sort };
-
-		const headerCfg: any =
-			typeof rawHeader === 'string'
-				? { text: rawHeader }
-				: rawHeader && typeof rawHeader === 'object'
-					? { ...rawHeader }
-					: { text: columnId };
-
-		const isSearchTarget =
-			!!queryText &&
-			!!columnId &&
-			!(col as any).hidden &&
-			(resolvedServerSide ? (col as any).searchable === true : (col as any).searchable !== false);
-
-		if (!headerCfg.cell) {
-			const filterable =
-				enableColumnFilters &&
-				!!columnId &&
-				!(col as any).hidden &&
-				!isGenericColumnFilterDisabled(columnId);
-
-			headerCfg.cell = SvarkHeaderFilterCell;
-			headerCfg.__svarkMenuId = `${instanceId}:filter:${columnId}`;
-			headerCfg.__svarkFilterable = filterable;
-			headerCfg.__svarkColumnId = columnId;
-			headerCfg.__svarkColumnLabel = String(headerCfg.text ?? columnId);
-			headerCfg.__svarkSearchHighlight = isSearchTarget;
-			headerCfg.__svarkCurrentSort = (resolvedSortOrder?.[columnId] ?? 'none') as any;
-			headerCfg.__svarkSetSort = (next: 'none' | 'asc' | 'desc') => setColumnSort(columnId, next);
-			headerCfg.__svarkCurrentFilter = resolvedFilters[columnId];
-			headerCfg.__svarkSetFilter = (next: GridColumnFilters[string]) => setColumnFilter(columnId, next);
-			headerCfg.__svarkClearFilter = () => clearColumnFilter(columnId);
+	return () => {
+		cancelled = true;
+	};
+});
+function valueMatchesLocal(cellValue, filter) {
+	const operator = String(filter.operator ?? "eq").toLowerCase();
+	const rawValue = filter.value;
+	const actual = cellValue ?? "";
+	if (operator === "eq") return String(actual) === String(rawValue ?? "");
+	if (operator === "neq") return String(actual) !== String(rawValue ?? "");
+	if (operator === "gt" || operator === "gte" || operator === "lt" || operator === "lte") {
+		const left = Number(actual);
+		const right = Number(rawValue);
+		if (Number.isNaN(left) || Number.isNaN(right)) return false;
+		if (operator === "gt") return left > right;
+		if (operator === "gte") return left >= right;
+		if (operator === "lt") return left < right;
+		return left <= right;
+	}
+	const haystack = String(actual).toLowerCase();
+	let needle = String(rawValue ?? "").toLowerCase();
+	if (operator === "like" || operator === "ilike" || operator === "contains") {
+		const startsWith = needle.startsWith("%");
+		const endsWith = needle.endsWith("%");
+		const core = needle.replace(/^%|%$/g, "");
+		// If the UI provided a bare string, treat it like "%value%".
+		if (!startsWith && !endsWith) return haystack.includes(needle);
+		if (startsWith && endsWith) return haystack.includes(core);
+		if (startsWith) return haystack.endsWith(core);
+		if (endsWith) return haystack.startsWith(core);
+		return haystack.includes(core);
+	}
+	if (operator === "startswith") return haystack.startsWith(needle);
+	if (operator === "endswith") return haystack.endsWith(needle);
+	return haystack.includes(needle);
+}
+function applyLocalFiltersAndSearch(rows) {
+	let result = rows.slice();
+	const entries = Object.values(effectiveFilterState);
+	const andFilters = entries.filter((f) => String(f.logic_operator ?? "AND").toUpperCase() !== "OR");
+	const orFilters = entries.filter((f) => String(f.logic_operator ?? "AND").toUpperCase() === "OR");
+	for (const f of andFilters) {
+		const col = String(f.column ?? "");
+		if (!col) continue;
+		result = result.filter((row) => valueMatchesLocal(row[col], f));
+	}
+	if (orFilters.length > 0) {
+		result = result.filter((row) => orFilters.some((f) => {
+			const col = String(f.column ?? "");
+			if (!col) return false;
+			return valueMatchesLocal(row[col], f);
+		}));
+	}
+	const q = searchValueState.trim().toLowerCase();
+	if (q) {
+		const searchableCols = gridColumns.filter((c) => c?.id != null && !c.hidden && c.searchable !== false).map((c) => String(c.id));
+		if (searchableCols.length > 0) {
+			result = result.filter((row) => searchableCols.some((id) => String(row[id] ?? "").toLowerCase().includes(q)));
 		}
-
-		return { ...col, sort, header: headerCfg };
 	}
-
-	const gridColumns = $derived.by(() => (baseColumns ?? []).map((col) => enhanceColumnHeader(col)));
-
-	function emitSearchValue(next: string) {
-		if (searchValue === undefined) searchValueState = next;
-		onSearchValueChange?.(next);
-	}
-
-	function emitSelectedItems(next: Record<string, unknown>[]) {
-		if (selectedItems === undefined) internalSelectedItems = next;
-		onSelectedItemsChange?.(next);
+	return result;
+}
+$effect(() => {
+	if (resolvedServerSide) return;
+	const next = applyLocalFiltersAndSearch(localRawData);
+	data = next;
+	total = next.length;
+});
+const sortMarks = $derived.by(() => svarkSortStateToSortMarks(sortState));
+const gridConfig = $derived.by(() => {
+	const base = config ?? {};
+	const sizes = {
+		...base.sizes,
+		...rowHeight != null ? { rowHeight } : {},
+		...headerHeight != null ? { headerHeight } : {}
+	};
+	const next = {
+		...base,
+		sizes,
+		// Keep SVAR's sort indicators in sync with generic sortOrder.
+		...resolvedServerSide ? { sortMarks } : {},
+		...selectedItems !== undefined ? { selectedRows: resolvedSelectedIds } : {}
+	};
+	return next;
+});
+// Debounced mirrors of sortState/filterState used by the main fetch effect.
+// When serverSide is true, changes are held for 300 ms before committing so
+// rapid keystrokes / click-sort chains don't fire a request per event.
+// Page resets to 0 atomically with the debounced update so only one fetch fires.
+let debouncedSort = $state([]);
+let debouncedFilter = $state({});
+let _debounceTimer = null;
+function isSameSortState(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((item, index) => item.key === b[index]?.key && item.order === b[index]?.order);
+}
+function isSameFilterState(a, b) {
+	const aKeys = Object.keys(a);
+	const bKeys = Object.keys(b);
+	if (aKeys.length !== bKeys.length) return false;
+	for (const key of aKeys) {
+		const left = a[key];
+		const right = b[key];
+		if (!right || left?.column !== right.column || left?.operator !== right.operator || left?.logic_operator !== right.logic_operator || left?.value !== right.value) {
+			return false;
+		}
 	}
-
-	$effect(() => {
-		sortState = sortOrderToSvarkSortState(resolvedSortOrder);
-	});
-
-	$effect(() => {
-		gridFilterState = gridColumnFiltersToSvarkFilterState(resolvedFilters, { prefix: '' });
-	});
-
-	$effect(() => {
-		if (searchValue === undefined) return;
-		searchValueState = searchValue;
-	});
-
-	// ── Local data mode (dataSource: 'local' | 'custom') ──────────────────────
-
-	$effect(() => {
-		if (resolvedServerSide) return;
-
-		void reload; // allow Refresh to re-run local loaders
-
-		error = null;
-		loading = false;
-
-		if (!dataProp) {
-			localRawData = [];
-			data = [];
-			total = 0;
+	return true;
+}
+$effect(() => {
+	const s = sortState;
+	const f = effectiveFilterState;
+	if (!resolvedServerSide) {
+		debouncedSort = s;
+		debouncedFilter = f;
+		return;
+	}
+	if (_debounceTimer !== null) clearTimeout(_debounceTimer);
+	_debounceTimer = setTimeout(() => {
+		_debounceTimer = null;
+		if (page === 0 && isSameSortState(debouncedSort, s) && isSameFilterState(debouncedFilter, f)) {
 			return;
 		}
-
-		let cancelled = false;
-
-		if (typeof dataProp === 'function') {
-			loading = true;
-			dataProp()
-				.then((result) => {
-					if (cancelled) return;
-					localRawData = (result ?? []) as any;
-				})
-				.catch((e) => {
-					if (cancelled) return;
-					const msg = e instanceof Error ? e.message : 'Failed to load data';
-					error = msg;
-					onerror?.(msg);
-				})
-				.finally(() => {
-					if (!cancelled) loading = false;
-				});
-		} else {
-			localRawData = (dataProp ?? []) as any;
+		page = 0;
+		debouncedSort = s;
+		debouncedFilter = f;
+	}, 300);
+	return () => {
+		if (_debounceTimer !== null) {
+			clearTimeout(_debounceTimer);
+			_debounceTimer = null;
 		}
-
-		return () => {
-			cancelled = true;
+	};
+});
+function getLocalSearchColumns() {
+	const columnsMap = {};
+	for (const col of gridColumns) {
+		const id = col.id;
+		if (id == null) continue;
+		if (col.hidden) continue;
+		if (col.searchable === false) continue;
+		columnsMap[String(id)] = true;
+	}
+	return Object.keys(columnsMap).length > 0 ? columnsMap : undefined;
+}
+function applyServerSearchFilters(value) {
+	if (!resolvedServerSide) return;
+	if (!value) {
+		// Avoid triggering a refetch loop by reassigning `{}` repeatedly.
+		if (Object.keys(searchFilterState).length === 0) return;
+		searchFilterState = {};
+		return;
+	}
+	const searchableIds = [];
+	for (const col of gridColumns) {
+		const id = col.id;
+		if (id == null) continue;
+		if (col.hidden) continue;
+		if (col.searchable === true) searchableIds.push(String(id));
+	}
+	if (searchableIds.length === 0) {
+		if (Object.keys(searchFilterState).length === 0) return;
+		searchFilterState = {};
+		return;
+	}
+	const next = {};
+	for (const id of searchableIds) {
+		// Avoid clobbering an existing column filter the user set elsewhere.
+		const hasExistingFilter = Object.entries({ ...gridFilterState }).some(([key, filter]) => {
+			const target = filter.column ?? key;
+			return target === id && filter.value != null && filter.value !== "";
+		});
+		if (hasExistingFilter) continue;
+		next[`search:${id}`] = {
+			column: id,
+			value,
+			operator: "ilike",
+			logic_operator: "OR"
 		};
-	});
-
-	function valueMatchesLocal(cellValue: unknown, filter: { operator?: string; value?: unknown }) {
-		const operator = String(filter.operator ?? 'eq').toLowerCase();
-		const rawValue = filter.value;
-		const actual = cellValue ?? '';
-
-		if (operator === 'eq') return String(actual) === String(rawValue ?? '');
-		if (operator === 'neq') return String(actual) !== String(rawValue ?? '');
-
-		if (operator === 'gt' || operator === 'gte' || operator === 'lt' || operator === 'lte') {
-			const left = Number(actual);
-			const right = Number(rawValue);
-			if (Number.isNaN(left) || Number.isNaN(right)) return false;
-			if (operator === 'gt') return left > right;
-			if (operator === 'gte') return left >= right;
-			if (operator === 'lt') return left < right;
-			return left <= right;
-		}
-
-		const haystack = String(actual).toLowerCase();
-		let needle = String(rawValue ?? '').toLowerCase();
-
-		if (operator === 'like' || operator === 'ilike' || operator === 'contains') {
-			const startsWith = needle.startsWith('%');
-			const endsWith = needle.endsWith('%');
-			const core = needle.replace(/^%|%$/g, '');
-			// If the UI provided a bare string, treat it like "%value%".
-			if (!startsWith && !endsWith) return haystack.includes(needle);
-			if (startsWith && endsWith) return haystack.includes(core);
-			if (startsWith) return haystack.endsWith(core);
-			if (endsWith) return haystack.startsWith(core);
-			return haystack.includes(core);
-		}
-
-		if (operator === 'startswith') return haystack.startsWith(needle);
-		if (operator === 'endswith') return haystack.endsWith(needle);
-
-		return haystack.includes(needle);
 	}
-
-	function applyLocalFiltersAndSearch(rows: Record<string, unknown>[]) {
-		let result = rows.slice();
-
-		const entries = Object.values(effectiveFilterState);
-		const andFilters = entries.filter((f) => String(f.logic_operator ?? 'AND').toUpperCase() !== 'OR');
-		const orFilters = entries.filter((f) => String(f.logic_operator ?? 'AND').toUpperCase() === 'OR');
-
-		for (const f of andFilters) {
-			const col = String(f.column ?? '');
-			if (!col) continue;
-			result = result.filter((row) => valueMatchesLocal((row as any)[col], f));
-		}
-
-		if (orFilters.length > 0) {
-			result = result.filter((row) =>
-				orFilters.some((f) => {
-					const col = String(f.column ?? '');
-					if (!col) return false;
-					return valueMatchesLocal((row as any)[col], f);
-				})
-			);
-		}
-
-		const q = searchValueState.trim().toLowerCase();
-		if (q) {
-			const searchableCols = gridColumns
-				.filter((c: any) => c?.id != null && !c.hidden && c.searchable !== false)
-				.map((c: any) => String(c.id));
-
-			if (searchableCols.length > 0) {
-				result = result.filter((row) =>
-					searchableCols.some((id) => String((row as any)[id] ?? '').toLowerCase().includes(q))
-				);
+	// Idempotency guard: avoid reassigning equivalent filter state.
+	const prev = searchFilterState;
+	const prevKeys = Object.keys(prev);
+	const nextKeys = Object.keys(next);
+	if (prevKeys.length === nextKeys.length) {
+		let same = true;
+		for (const k of nextKeys) {
+			const a = prev[k];
+			const b = next[k];
+			if (!a || !b) {
+				same = false;
+				break;
+			}
+			if (String(a.column ?? "") !== String(b.column ?? "") || String(a.operator ?? "") !== String(b.operator ?? "") || String(a.logic_operator ?? "") !== String(b.logic_operator ?? "") || String(a.value ?? "") !== String(b.value ?? "")) {
+				same = false;
+				break;
 			}
 		}
-
-		return result;
-	}
-
-	$effect(() => {
-		if (resolvedServerSide) return;
-		const next = applyLocalFiltersAndSearch(localRawData);
-		data = next;
-		total = next.length;
+		if (same) return;
+	}
+	searchFilterState = next;
+}
+function setSearch(next) {
+	emitSearchValue(next);
+	gridApi?.exec("search-rows", {
+		search: next,
+		columns: getLocalSearchColumns()
 	});
-
-	const sortMarks = $derived.by(() => svarkSortStateToSortMarks(sortState));
-
-	const gridConfig = $derived.by(() => {
-		const base = config ?? {};
-		const sizes = {
-			...(base as any).sizes,
-			...(rowHeight != null ? { rowHeight } : {}),
-			...(headerHeight != null ? { headerHeight } : {})
-		};
-
-		const next: Omit<IConfig, 'data'> & {
-			selectedRows?: Array<string | number>;
-		} = {
-			...base,
-			sizes,
-			// Keep SVAR's sort indicators in sync with generic sortOrder.
-			...(resolvedServerSide ? { sortMarks } : {}),
-			...(selectedItems !== undefined ? { selectedRows: resolvedSelectedIds } : {})
+	applyServerSearchFilters(next.trim());
+}
+function refreshGrid() {
+	reload++;
+}
+function clearAllSort() {
+	// Clear in the UI/store first (local mode), then clear generic sort state.
+	gridApi?.exec("sort-rows", {});
+	emitSortOrder({});
+}
+function clearAllFilters() {
+	emitFilters({});
+}
+async function applyLocalDataChange(next) {
+	localRawData = next;
+	await onDataChange?.(next);
+}
+function resolveGenericColumn(columnId) {
+	if (!columnId) return undefined;
+	return genericColumnsById[columnId];
+}
+function extractRowsFromResponse(response) {
+	if (Array.isArray(response)) {
+		return response;
+	}
+	if (response && typeof response === "object" && Array.isArray(response.data)) {
+		return response.data;
+	}
+	return [];
+}
+function normalizeGridRows(rows, uniqueID) {
+	return rows.map((row) => {
+		const rowId = row?.id;
+		const uniqueValue = row?.[uniqueID];
+		if (rowId != null || uniqueValue == null) return row;
+		return {
+			...row,
+			id: uniqueValue
 		};
-
-		return next;
 	});
-
-	// Debounced mirrors of sortState/filterState used by the main fetch effect.
-	// When serverSide is true, changes are held for 300 ms before committing so
-	// rapid keystrokes / click-sort chains don't fire a request per event.
-	// Page resets to 0 atomically with the debounced update so only one fetch fires.
-	let debouncedSort = $state<SvarkSortState[]>([]);
-	let debouncedFilter = $state<SvarkFilterState>({});
-	let _debounceTimer: ReturnType<typeof setTimeout> | null = null;
-
-	function isSameSortState(a: SvarkSortState[], b: SvarkSortState[]): boolean {
-		if (a.length !== b.length) return false;
-		return a.every((item, index) => item.key === b[index]?.key && item.order === b[index]?.order);
-	}
-
-	function isSameFilterState(a: SvarkFilterState, b: SvarkFilterState): boolean {
-		const aKeys = Object.keys(a);
-		const bKeys = Object.keys(b);
-		if (aKeys.length !== bKeys.length) return false;
-
-		for (const key of aKeys) {
-			const left = a[key];
-			const right = b[key];
-			if (
-				!right ||
-				left?.column !== right.column ||
-				left?.operator !== right.operator ||
-				left?.logic_operator !== right.logic_operator ||
-				left?.value !== right.value
-			) {
-				return false;
+}
+function extractTotalFromResponse(response, rows) {
+	if (response && typeof response === "object" && typeof response.metadata?.total === "number") {
+		return response.metadata.total;
+	}
+	return rows.length;
+}
+$effect(() => {
+	// Keep SVAR's local highlight + server-side search filters in sync with controlled searchValue.
+	const next = searchValueState;
+	gridApi?.exec("search-rows", {
+		search: next,
+		columns: getLocalSearchColumns()
+	});
+	applyServerSearchFilters(next.trim());
+});
+function openSearch() {
+	searchOpen = true;
+}
+function closeSearch() {
+	searchOpen = false;
+}
+let selectedIdsInternal = $state([]);
+$effect(() => {
+	if (selectedItems === undefined) return;
+	selectedIdsInternal = resolvedSelectedIds;
+});
+function handleSelectedIdsChange(ids) {
+	selectedIdsInternal = ids;
+	emitSelectedItems(idsToSelectedItems(ids, data, resolvedUniqueID));
+}
+const contextMenuProps = $derived.by(() => {
+	const hasSort = Object.values(resolvedSortOrder ?? {}).some((dir) => dir === "asc" || dir === "desc");
+	const hasFilters = Object.keys(resolvedFilters ?? {}).length > 0;
+	const hasSearch = searchValueState.trim().length > 0;
+	return {
+		items: (ctx) => {
+			const defaults = [
+				{
+					id: "refresh",
+					label: "Refresh",
+					onselect: () => refreshGrid()
+				},
+				{
+					id: "clear-sort",
+					label: "Clear Sort",
+					disabled: !hasSort,
+					onselect: () => clearAllSort()
+				},
+				{
+					id: "clear-filters",
+					label: "Clear Filters",
+					disabled: !hasFilters,
+					onselect: () => clearAllFilters()
+				},
+				{
+					id: "clear-search",
+					label: "Clear Search",
+					disabled: !hasSearch,
+					onselect: () => setSearch("")
+				}
+			];
+			const userItemsRaw = typeof userContextMenuProps?.items === "function" ? userContextMenuProps.items(ctx) : userContextMenuProps?.items;
+			const userItems = Array.isArray(userItemsRaw) ? userItemsRaw : [];
+			if (userItems.length === 0) return defaults;
+			const hasMarker = userItems.some((it) => it?.id === SVARKGRID_DEFAULT_ITEMS_MARKER_ID);
+			if (hasMarker) {
+				const merged = [];
+				for (const it of userItems) {
+					if (it?.id === SVARKGRID_DEFAULT_ITEMS_MARKER_ID) merged.push(...defaults);
+					else merged.push(it);
+				}
+				return merged;
 			}
+			return [
+				...defaults,
+				{
+					id: "__sep__",
+					kind: "separator",
+					label: ""
+				},
+				...userItems
+			];
+		},
+		onselectitem: userContextMenuProps?.onselectitem
+	};
+});
+const isServerConfigured = $derived(!!(resolvedUrl && resolvedSchema && resolvedEntity));
+const adapter = $derived.by(() => {
+	if (!isServerConfigured) return null;
+	return resolvedAdapterType === "RestHeaderSpec" ? new SvarkRestHeaderSpecAdapter({
+		url: resolvedUrl,
+		token: resolvedToken,
+		schema: resolvedSchema,
+		entity: resolvedEntity
+	}) : new SvarkResolveSpecAdapter({
+		url: resolvedUrl,
+		token: resolvedToken,
+		schema: resolvedSchema,
+		entity: resolvedEntity
+	});
+});
+// For virtual scroll: set dynamic rowCount once total is known
+const gridDynamic = $derived(virtualScroll && total > 0 ? { rowCount: total } : undefined);
+// ── Main data effect (initial load + sort/filter/page/reload triggers) ──────
+$effect(() => {
+	const _adapter = adapter;
+	const _limit = virtualScroll ? 1 : pageSize;
+	const _sort = resolvedServerSide ? debouncedSort : [];
+	const _filters = resolvedServerSide ? debouncedFilter : {};
+	// Paging offset: only applied when server-side paging is active
+	const _offset = showPager ? page * pageSize : 0;
+	void reload;
+	if (!_adapter) {
+		activeServerRequestId += 1;
+		activeServerRequestKey = "";
+		loading = false;
+		error = resolvedServerSide ? "Missing server configuration (dataSourceOptions.url/schema/entity)" : null;
+		if (error) onerror?.(error);
+		return;
+	}
+	// Guard: if something upstream keeps re-triggering the effect without changing the
+	// actual server query parameters, avoid a tight refetch loop.
+	let requestId = 0;
+	let reqKey = "";
+	if (resolvedServerSide) {
+		const sortKey = JSON.stringify(_sort ?? []);
+		const filterKey = JSON.stringify(Object.keys(_filters ?? {}).sort().map((k) => [
+			k,
+			_filters[k]?.column,
+			_filters[k]?.operator,
+			_filters[k]?.value
+		]));
+		const queryKey = JSON.stringify(query ?? {});
+		reqKey = JSON.stringify({
+			url: resolvedUrl,
+			schema: resolvedSchema,
+			entity: resolvedEntity,
+			adapter: resolvedAdapterType,
+			limit: _limit,
+			offset: _offset,
+			sortKey,
+			filterKey,
+			queryKey,
+			reload
+		});
+		if (reqKey === lastServerRequestKey) {
+			return;
 		}
-
-		return true;
-	}
-
-	$effect(() => {
-		const s = sortState;
-		const f = effectiveFilterState;
-
-		if (!resolvedServerSide) {
-			debouncedSort = s;
-			debouncedFilter = f;
+		lastServerRequestKey = reqKey;
+		activeServerRequestKey = reqKey;
+		activeServerRequestId += 1;
+		requestId = activeServerRequestId;
+	}
+	loading = true;
+	error = null;
+	_adapter.read(_sort, _filters, _limit, _offset, query).then((response) => {
+		if (resolvedServerSide && (requestId !== activeServerRequestId || reqKey !== activeServerRequestKey)) {
 			return;
 		}
-
-		if (_debounceTimer !== null) clearTimeout(_debounceTimer);
-		_debounceTimer = setTimeout(() => {
-			_debounceTimer = null;
-			if (page === 0 && isSameSortState(debouncedSort, s) && isSameFilterState(debouncedFilter, f)) {
-				return;
+		if (response?.success !== false) {
+			const incoming = normalizeGridRows(extractRowsFromResponse(response), resolvedUniqueID);
+			total = extractTotalFromResponse(response, incoming);
+			if (virtualScroll) {
+				data = [];
+			} else {
+				data = incoming;
 			}
-			page = 0; // reset page atomically — prevents a double-fetch
-			debouncedSort = s;
-			debouncedFilter = f;
-		}, 300);
-
-		return () => {
-			if (_debounceTimer !== null) {
-				clearTimeout(_debounceTimer);
-				_debounceTimer = null;
+			emitGridEvent("load", incoming[0], undefined, {
+				x: 0,
+				y: 0
+			}, { total });
+			// If selection is currently id-based, refresh selectedItems mapping.
+			if (selectedIdsInternal.length > 0 && onSelectedItemsChange) {
+				const items = idsToSelectedItems(selectedIdsInternal, incoming, resolvedUniqueID);
+				emitSelectedItems(items);
 			}
-		};
-	});
-
-	function getLocalSearchColumns() {
-		const columnsMap: Record<string, boolean> = {};
-		for (const col of gridColumns) {
-			const id = (col as any).id;
-			if (id == null) continue;
-			if ((col as any).hidden) continue;
-			if ((col as any).searchable === false) continue;
-			columnsMap[String(id)] = true;
-		}
-		return Object.keys(columnsMap).length > 0 ? columnsMap : undefined;
-	}
-
-	function applyServerSearchFilters(value: string) {
-		if (!resolvedServerSide) return;
-
-		if (!value) {
-			// Avoid triggering a refetch loop by reassigning `{}` repeatedly.
-			if (Object.keys(searchFilterState).length === 0) return;
-			searchFilterState = {};
-			return;
-		}
-
-		const searchableIds: string[] = [];
-		for (const col of gridColumns) {
-			const id = (col as any).id;
-			if (id == null) continue;
-			if ((col as any).hidden) continue;
-			if ((col as any).searchable === true) searchableIds.push(String(id));
+		} else {
+			const msg = response.error?.message ?? "Failed to load data";
+			error = msg;
+			onerror?.(msg);
 		}
-
-		if (searchableIds.length === 0) {
-			if (Object.keys(searchFilterState).length === 0) return;
-			searchFilterState = {};
+	}).catch((e) => {
+		if (resolvedServerSide && (requestId !== activeServerRequestId || reqKey !== activeServerRequestKey)) {
 			return;
 		}
-
-		const next: SvarkFilterState = {};
-		for (const id of searchableIds) {
-			// Avoid clobbering an existing column filter the user set elsewhere.
-			const hasExistingFilter = Object.entries({ ...gridFilterState }).some(([key, filter]) => {
-				const target = filter.column ?? key;
-				return target === id && filter.value != null && filter.value !== '';
-			});
-			if (hasExistingFilter) continue;
-			next[`search:${id}`] = { column: id, value, operator: 'ilike', logic_operator: 'OR' };
+		const msg = e instanceof Error ? e.message : "Unknown error";
+		error = msg;
+		onerror?.(msg);
+	}).finally(() => {
+		if (!resolvedServerSide || requestId === activeServerRequestId && reqKey === activeServerRequestKey) {
+			loading = false;
 		}
-
-		// Idempotency guard: avoid reassigning equivalent filter state.
-		const prev = searchFilterState;
-		const prevKeys = Object.keys(prev);
-		const nextKeys = Object.keys(next);
-		if (prevKeys.length === nextKeys.length) {
-			let same = true;
-			for (const k of nextKeys) {
-				const a = (prev as any)[k];
-				const b = (next as any)[k];
-				if (!a || !b) {
-					same = false;
-					break;
-				}
-				if (
-					String(a.column ?? '') !== String(b.column ?? '') ||
-					String(a.operator ?? '') !== String(b.operator ?? '') ||
-					String(a.logic_operator ?? '') !== String(b.logic_operator ?? '') ||
-					String(a.value ?? '') !== String(b.value ?? '')
-				) {
-					same = false;
-					break;
-				}
+	});
+});
+async function loadNextPage() {
+	const _adapter = adapter;
+	if (!_adapter) return;
+	// Block if main fetch is running (sort/filter change in progress)
+	if (loading || infiniteLoading || data.length >= total) return;
+	// Snapshot debounced sort+filter so we can discard the response if they
+	// change while the request is in-flight (race condition guard).
+	const snapshotSort = resolvedServerSide ? JSON.stringify(debouncedSort) : "";
+	const snapshotFilter = resolvedServerSide ? JSON.stringify(debouncedFilter) : "";
+	const snapshotOffset = data.length;
+	infiniteLoading = true;
+	try {
+		const response = await _adapter.read(resolvedServerSide ? debouncedSort : [], resolvedServerSide ? debouncedFilter : {}, pageSize, snapshotOffset, query);
+		// Discard if sort/filter changed while we were fetching
+		if (resolvedServerSide) {
+			if (JSON.stringify(debouncedSort) !== snapshotSort || JSON.stringify(debouncedFilter) !== snapshotFilter) {
+				return;
 			}
-			if (same) return;
-		}
-
-		searchFilterState = next;
-	}
-
-	function setSearch(next: string) {
-		emitSearchValue(next);
-		gridApi?.exec('search-rows', { search: next, columns: getLocalSearchColumns() });
-		applyServerSearchFilters(next.trim());
-	}
-
-	function refreshGrid() {
-		reload++;
-	}
-
-	function clearAllSort() {
-		// Clear in the UI/store first (local mode), then clear generic sort state.
-		gridApi?.exec('sort-rows', {} as any);
-		emitSortOrder({});
-	}
-
-	function clearAllFilters() {
-		emitFilters({});
-	}
-
-	async function applyLocalDataChange(next: Record<string, unknown>[]) {
-		localRawData = next;
-		await onDataChange?.(next);
-	}
-
-	function resolveGenericColumn(columnId: string | undefined) {
-		if (!columnId) return undefined;
-		return genericColumnsById[columnId];
-	}
-
-	function extractRowsFromResponse(response: unknown): Record<string, unknown>[] {
-		if (Array.isArray(response)) {
-			return response as Record<string, unknown>[];
 		}
-
-		if (
-			response &&
-			typeof response === 'object' &&
-			Array.isArray((response as { data?: unknown }).data)
-		) {
-			return (response as { data: Record<string, unknown>[] }).data;
-		}
-
-		return [];
-	}
-
-	function normalizeGridRows(rows: Record<string, unknown>[], uniqueID: string): Record<string, unknown>[] {
-		return rows.map((row) => {
-			const rowId = row?.id;
-			const uniqueValue = row?.[uniqueID];
-			if (rowId != null || uniqueValue == null) return row;
-			return { ...row, id: uniqueValue };
-		});
-	}
-
-	function extractTotalFromResponse(response: unknown, rows: Record<string, unknown>[]): number {
-		if (
-			response &&
-			typeof response === 'object' &&
-			typeof (response as { metadata?: { total?: unknown } }).metadata?.total === 'number'
-		) {
-			return (response as { metadata: { total: number } }).metadata.total;
+		if (response?.success !== false) {
+			const incoming = normalizeGridRows(extractRowsFromResponse(response), resolvedUniqueID);
+			data = [...data, ...incoming];
 		}
-
-		return rows.length;
-	}
-
-	$effect(() => {
-		// Keep SVAR's local highlight + server-side search filters in sync with controlled searchValue.
-		const next = searchValueState;
-		gridApi?.exec('search-rows', { search: next, columns: getLocalSearchColumns() });
-		applyServerSearchFilters(next.trim());
-	});
-
-	function openSearch() {
-		searchOpen = true;
-	}
-
-	function closeSearch() {
-		searchOpen = false;
-	}
-
-	let selectedIdsInternal = $state<(string | number)[]>([]);
-	$effect(() => {
-		if (selectedItems === undefined) return;
-		selectedIdsInternal = resolvedSelectedIds;
-	});
-	function handleSelectedIdsChange(ids: Array<string | number>) {
+	} catch {} finally {
+		infiniteLoading = false;
+	}
+}
+// ── SVAR Grid init ─────────────────────────────────────────────────────────
+function handleInit(api) {
+	gridApi = api;
+	// Row selection callback
+	selectedIdsInternal = api.getState().selectedRows ?? [];
+	api.on("select-row", () => {
+		const ids = api.getState().selectedRows ?? [];
 		selectedIdsInternal = ids;
+		onselect?.(ids);
 		emitSelectedItems(idsToSelectedItems(ids, data, resolvedUniqueID));
+	});
+	// Virtual scroll: SVAR fires request-data when the visible row window changes.
+	// We fetch only that window from the API and replace data.
+	if (virtualScroll) {
+		api.on("request-data", async (ev) => {
+			const _adapter = adapter;
+			if (!_adapter) return;
+			const { start, end } = ev.row;
+			const limit = end - start;
+			if (limit <= 0) return;
+			loading = true;
+			try {
+				const response = await _adapter.read(resolvedServerSide ? debouncedSort : [], resolvedServerSide ? debouncedFilter : {}, limit, start, query);
+				if (response?.success !== false) {
+					data = normalizeGridRows(extractRowsFromResponse(response), resolvedUniqueID);
+				}
+			} catch (e) {
+				const msg = e instanceof Error ? e.message : "Failed to load data";
+				error = msg;
+				onerror?.(msg);
+			} finally {
+				loading = false;
+			}
+		});
 	}
-
-	const contextMenuProps = $derived.by((): SvarkContextMenuProps => {
-		const hasSort = Object.values(resolvedSortOrder ?? {}).some((dir) => dir === 'asc' || dir === 'desc');
-		const hasFilters = Object.keys(resolvedFilters ?? {}).length > 0;
-		const hasSearch = searchValueState.trim().length > 0;
-
-		return {
-			items: (ctx) => {
-				const defaults: SvarkContextMenuItem[] = [
-					{ id: 'refresh', label: 'Refresh', onselect: () => refreshGrid() },
-					{ id: 'clear-sort', label: 'Clear Sort', disabled: !hasSort, onselect: () => clearAllSort() },
-					{ id: 'clear-filters', label: 'Clear Filters', disabled: !hasFilters, onselect: () => clearAllFilters() },
-					{ id: 'clear-search', label: 'Clear Search', disabled: !hasSearch, onselect: () => setSearch('') }
-				];
-
-				const userItemsRaw =
-					typeof userContextMenuProps?.items === 'function'
-						? (userContextMenuProps.items as any)(ctx)
-						: (userContextMenuProps?.items as any);
-
-				const userItems = Array.isArray(userItemsRaw) ? (userItemsRaw as SvarkContextMenuItem[]) : [];
-				if (userItems.length === 0) return defaults;
-
-				const hasMarker = userItems.some((it) => it?.id === SVARKGRID_DEFAULT_ITEMS_MARKER_ID);
-				if (hasMarker) {
-					const merged: SvarkContextMenuItem[] = [];
-					for (const it of userItems) {
-						if (it?.id === SVARKGRID_DEFAULT_ITEMS_MARKER_ID) merged.push(...defaults);
-						else merged.push(it);
-					}
-					return merged;
+	// Keep generic sortOrder in sync with SVAR, in both local and server-side modes.
+	// In server-side mode we block SVAR's default sorting (the server returns sorted rows).
+	api.intercept("sort-rows", (ev) => {
+		if (ev.key) {
+			if (ev.add) {
+				const idx = sortState.findIndex((s) => s.key === ev.key);
+				if (idx >= 0) {
+					sortState[idx] = {
+						key: ev.key,
+						order: ev.order ?? "asc"
+					};
+				} else {
+					sortState = [...sortState, {
+						key: ev.key,
+						order: ev.order ?? "asc"
+					}];
 				}
-
-				return [...defaults, { id: '__sep__', kind: 'separator', label: '' } as any, ...userItems];
-			},
-			onselectitem: userContextMenuProps?.onselectitem
-		};
+			} else {
+				sortState = [{
+					key: ev.key,
+					order: ev.order ?? "asc"
+				}];
+			}
+		} else {
+			sortState = [];
+		}
+		emitSortOrder(svarkSortStateToSortOrder(sortState));
+		return resolvedServerSide ? false : true;
 	});
-
-	const isServerConfigured = $derived(!!(resolvedUrl && resolvedSchema && resolvedEntity));
-
-	type Adapter = SvarkResolveSpecAdapter | SvarkRestHeaderSpecAdapter;
-
-	const adapter = $derived.by((): Adapter | null => {
-		if (!isServerConfigured) return null;
-		return resolvedAdapterType === 'RestHeaderSpec'
-			? new SvarkRestHeaderSpecAdapter({
-					url: resolvedUrl,
-					token: resolvedToken,
-					schema: resolvedSchema,
-					entity: resolvedEntity
-				})
-			: new SvarkResolveSpecAdapter({
-					url: resolvedUrl,
-					token: resolvedToken,
-					schema: resolvedSchema,
-					entity: resolvedEntity
-				});
+	api.intercept("resize-column", (ev) => {
+		emitGridEvent("column_resized", undefined, resolveGenericColumn(ev?.id != null ? String(ev.id) : undefined), {
+			x: 0,
+			y: 0
+		}, {
+			width: ev?.width,
+			inProgress: ev?.inProgress
+		});
+		return true;
 	});
-
-	// For virtual scroll: set dynamic rowCount once total is known
-	const gridDynamic = $derived(
-		virtualScroll && total > 0 ? { rowCount: total } : undefined
-	);
-
-	// ── Main data effect (initial load + sort/filter/page/reload triggers) ──────
-
-	$effect(() => {
+	api.on("add-row", async (ev) => {
+		if (resolvedReadonly) return;
 		const _adapter = adapter;
-		const _limit = virtualScroll ? 1 : pageSize;
-		const _sort = resolvedServerSide ? debouncedSort : [];
-		const _filters = resolvedServerSide ? debouncedFilter : {};
-		// Paging offset: only applied when server-side paging is active
-		const _offset = showPager ? page * pageSize : 0;
-		void reload;
-
-		if (!_adapter) {
-			activeServerRequestId += 1;
-			activeServerRequestKey = '';
-			loading = false;
-			error = resolvedServerSide
-				? 'Missing server configuration (dataSourceOptions.url/schema/entity)'
-				: null;
-			if (error) onerror?.(error);
-			return;
-		}
-
-		// Guard: if something upstream keeps re-triggering the effect without changing the
-		// actual server query parameters, avoid a tight refetch loop.
-		let requestId = 0;
-		let reqKey = '';
-		if (resolvedServerSide) {
-			const sortKey = JSON.stringify(_sort ?? []);
-			const filterKey = JSON.stringify(
-				Object.keys(_filters ?? {})
-					.sort()
-					.map((k) => [k, (_filters as any)[k]?.column, (_filters as any)[k]?.operator, (_filters as any)[k]?.value])
-			);
-			const queryKey = JSON.stringify(query ?? {});
-			reqKey = JSON.stringify({
-				url: resolvedUrl,
-				schema: resolvedSchema,
-				entity: resolvedEntity,
-				adapter: resolvedAdapterType,
-				limit: _limit,
-				offset: _offset,
-				sortKey,
-				filterKey,
-				queryKey,
-				reload
-			});
-
-			if (reqKey === lastServerRequestKey) {
-				return;
+		try {
+			if (_adapter) {
+				await _adapter.create(ev.row);
+			} else {
+				await applyLocalDataChange([...localRawData, ev.row]);
 			}
-
-			lastServerRequestKey = reqKey;
-			activeServerRequestKey = reqKey;
-			activeServerRequestId += 1;
-			requestId = activeServerRequestId;
-		}
-
-		loading = true;
-		error = null;
-
-		_adapter
-			.read(_sort, _filters, _limit, _offset, query)
-			.then((response) => {
-				if (
-					resolvedServerSide &&
-					(requestId !== activeServerRequestId || reqKey !== activeServerRequestKey)
-				) {
-					return;
-				}
-				if ((response as any)?.success !== false) {
-					const incoming = normalizeGridRows(
-						extractRowsFromResponse(response),
-						resolvedUniqueID
-					);
-					total = extractTotalFromResponse(response, incoming);
-
-					if (virtualScroll) {
-						data = [];
-					} else {
-						data = incoming;
-					}
-					emitGridEvent('load', incoming[0], undefined, { x: 0, y: 0 }, { total });
-
-					// If selection is currently id-based, refresh selectedItems mapping.
-					if (selectedIdsInternal.length > 0 && onSelectedItemsChange) {
-						const items = idsToSelectedItems(selectedIdsInternal, incoming as any, resolvedUniqueID);
-						emitSelectedItems(items);
-					}
-				} else {
-					const msg = (response as any).error?.message ?? 'Failed to load data';
-					error = msg;
-					onerror?.(msg);
-				}
-			})
-			.catch((e) => {
-				if (
-					resolvedServerSide &&
-					(requestId !== activeServerRequestId || reqKey !== activeServerRequestKey)
-				) {
-					return;
-				}
-				const msg = e instanceof Error ? e.message : 'Unknown error';
-				error = msg;
-				onerror?.(msg);
-			})
-			.finally(() => {
-				if (
-					!resolvedServerSide ||
-					(requestId === activeServerRequestId && reqKey === activeServerRequestKey)
-				) {
-					loading = false;
-				}
+			onchange?.({
+				action: "add",
+				row: ev.row
 			});
+			reload++;
+		} catch (e) {
+			onerror?.(e instanceof Error ? e.message : "Create failed");
+		}
 	});
-
-	async function loadNextPage() {
+	api.on("delete-row", async (ev) => {
+		if (resolvedReadonly) return;
 		const _adapter = adapter;
-		if (!_adapter) return;
-
-		// Block if main fetch is running (sort/filter change in progress)
-		if (loading || infiniteLoading || data.length >= total) return;
-
-		// Snapshot debounced sort+filter so we can discard the response if they
-		// change while the request is in-flight (race condition guard).
-		const snapshotSort = resolvedServerSide ? JSON.stringify(debouncedSort) : '';
-		const snapshotFilter = resolvedServerSide ? JSON.stringify(debouncedFilter) : '';
-		const snapshotOffset = data.length;
-
-		infiniteLoading = true;
 		try {
-			const response = await _adapter.read(
-				resolvedServerSide ? debouncedSort : [],
-				resolvedServerSide ? debouncedFilter : {},
-				pageSize,
-				snapshotOffset,
-				query
-			);
-			// Discard if sort/filter changed while we were fetching
-			if (resolvedServerSide) {
-				if (
-					JSON.stringify(debouncedSort) !== snapshotSort ||
-					JSON.stringify(debouncedFilter) !== snapshotFilter
-				) {
-					return;
-				}
-			}
-			if ((response as any)?.success !== false) {
-				const incoming = normalizeGridRows(
-					extractRowsFromResponse(response),
-					resolvedUniqueID
-				);
-				data = [...data, ...incoming];
+			if (_adapter) {
+				await _adapter.delete(ev.id);
+			} else {
+				await applyLocalDataChange(localRawData.filter((row) => String(row?.[resolvedUniqueID]) !== String(ev.id)));
 			}
-		} catch {
-			// Silent — don't replace existing rows with an error on pagination
-		} finally {
-			infiniteLoading = false;
-		}
-	}
-
-	// ── SVAR Grid init ─────────────────────────────────────────────────────────
-
-	function handleInit(api: IApi) {
-		gridApi = api;
-
-		// Row selection callback
-		selectedIdsInternal = ((api.getState() as any).selectedRows ?? []) as (string | number)[];
-		api.on('select-row', () => {
-			const ids = ((api.getState() as any).selectedRows ?? []) as (string | number)[];
-			selectedIdsInternal = ids;
-			onselect?.(ids);
-			emitSelectedItems(idsToSelectedItems(ids, data, resolvedUniqueID));
-		});
-
-		// Virtual scroll: SVAR fires request-data when the visible row window changes.
-		// We fetch only that window from the API and replace data.
-		if (virtualScroll) {
-			api.on('request-data', async (ev: any) => {
-				const _adapter = adapter;
-				if (!_adapter) return;
-
-				const { start, end } = ev.row as { start: number; end: number };
-				const limit = end - start;
-				if (limit <= 0) return;
-
-				loading = true;
-				try {
-					const response = await _adapter.read(
-						resolvedServerSide ? debouncedSort : [],
-						resolvedServerSide ? debouncedFilter : {},
-						limit,
-						start,
-						query
-					);
-					if ((response as any)?.success !== false) {
-						data = normalizeGridRows(extractRowsFromResponse(response), resolvedUniqueID);
-					}
-				} catch (e) {
-					const msg = e instanceof Error ? e.message : 'Failed to load data';
-					error = msg;
-					onerror?.(msg);
-				} finally {
-					loading = false;
-				}
+			onchange?.({
+				action: "delete",
+				id: ev.id
 			});
+			reload++;
+		} catch (e) {
+			onerror?.(e instanceof Error ? e.message : "Delete failed");
 		}
-
-		// Keep generic sortOrder in sync with SVAR, in both local and server-side modes.
-		// In server-side mode we block SVAR's default sorting (the server returns sorted rows).
-		api.intercept('sort-rows', (ev: any) => {
-			if (ev.key) {
-				if (ev.add) {
-					const idx = sortState.findIndex((s) => s.key === ev.key);
-					if (idx >= 0) {
-						sortState[idx] = { key: ev.key, order: ev.order ?? 'asc' };
-					} else {
-						sortState = [...sortState, { key: ev.key, order: ev.order ?? 'asc' }];
-					}
-				} else {
-					sortState = [{ key: ev.key, order: ev.order ?? 'asc' }];
-				}
+	});
+	api.on("update-cell", async (ev) => {
+		if (resolvedReadonly) return;
+		const _adapter = adapter;
+		try {
+			if (_adapter) {
+				await _adapter.update(ev.id, { [String(ev.column)]: ev.value });
 			} else {
-				sortState = [];
-			}
-			emitSortOrder(svarkSortStateToSortOrder(sortState));
-			return resolvedServerSide ? false : true;
-		});
-
-		api.intercept('resize-column', (ev: any) => {
-			emitGridEvent(
-				'column_resized',
-				undefined,
-				resolveGenericColumn(ev?.id != null ? String(ev.id) : undefined),
-				{ x: 0, y: 0 },
-				{ width: ev?.width, inProgress: ev?.inProgress }
-			);
-			return true;
-		});
-
-		api.on('add-row', async (ev: any) => {
-			if (resolvedReadonly) return;
-			const _adapter = adapter;
-			try {
-				if (_adapter) {
-					await _adapter.create(ev.row);
-				} else {
-					await applyLocalDataChange([...localRawData, ev.row]);
-				}
-				onchange?.({ action: 'add', row: ev.row });
-				reload++;
-			} catch (e) {
-				onerror?.(e instanceof Error ? e.message : 'Create failed');
-			}
-		});
-
-		api.on('delete-row', async (ev: any) => {
-			if (resolvedReadonly) return;
-			const _adapter = adapter;
-			try {
-				if (_adapter) {
-					await _adapter.delete(ev.id);
-				} else {
-					await applyLocalDataChange(
-						localRawData.filter((row) => String(row?.[resolvedUniqueID]) !== String(ev.id))
-					);
-				}
-				onchange?.({ action: 'delete', id: ev.id });
-				reload++;
-			} catch (e) {
-				onerror?.(e instanceof Error ? e.message : 'Delete failed');
-			}
-		});
-
-		api.on('update-cell', async (ev: any) => {
-			if (resolvedReadonly) return;
-			const _adapter = adapter;
-			try {
-				if (_adapter) {
-					await _adapter.update(ev.id, { [String(ev.column)]: ev.value });
-				} else {
-					await applyLocalDataChange(
-						localRawData.map((row) =>
-							String(row?.[resolvedUniqueID]) === String(ev.id)
-								? { ...row, [String(ev.column)]: ev.value }
-								: row
-						)
-					);
-				}
-				onchange?.({ action: 'update', id: ev.id, column: ev.column, value: ev.value });
-			} catch (e) {
-				onerror?.(e instanceof Error ? e.message : 'Update failed');
+				await applyLocalDataChange(localRawData.map((row) => String(row?.[resolvedUniqueID]) === String(ev.id) ? {
+					...row,
+					[String(ev.column)]: ev.value
+				} : row));
 			}
-		});
-	}
-
-	let lastSortSignature = $state('');
-	$effect(() => {
-		const signature = JSON.stringify(resolvedSortOrder ?? {});
-		if (!signature || signature === lastSortSignature) return;
-		lastSortSignature = signature;
-		emitGridEvent('sort_changed', undefined, undefined, { x: 0, y: 0 }, { sortOrder: resolvedSortOrder });
-	});
-
-	let lastFilterSignature = $state('');
-	$effect(() => {
-		const signature = JSON.stringify(resolvedFilters ?? {});
-		if (signature === lastFilterSignature) return;
-		lastFilterSignature = signature;
-		emitGridEvent('filter_changed', undefined, undefined, { x: 0, y: 0 }, { filters: resolvedFilters });
-	});
-
-	let lastSearchValue = $state(searchValueState);
-	$effect(() => {
-		const next = searchValueState;
-		if (next === lastSearchValue) return;
-		lastSearchValue = next;
-		emitGridEvent('search_changed', undefined, undefined, { x: 0, y: 0 }, { value: next });
-	});
-
-	let lastSelectionSignature = $state('');
-	$effect(() => {
-		const signature = JSON.stringify(selectedIdsInternal);
-		if (signature === lastSelectionSignature) return;
-		lastSelectionSignature = signature;
-		emitGridEvent('selection_changed', resolvedSelectedItems[0], undefined, { x: 0, y: 0 }, {
-			selectedIds: selectedIdsInternal,
-			selectedItems: resolvedSelectedItems
-		});
+			onchange?.({
+				action: "update",
+				id: ev.id,
+				column: ev.column,
+				value: ev.value
+			});
+		} catch (e) {
+			onerror?.(e instanceof Error ? e.message : "Update failed");
+		}
 	});
-
-	let lastSettingsSignature = $state('');
-	$effect(() => {
-		const signature = JSON.stringify(settings ?? {});
-		if (signature === lastSettingsSignature) return;
-		lastSettingsSignature = signature;
-		emitGridEvent('settings_changed', undefined, undefined, { x: 0, y: 0 }, { settings });
+}
+let lastSortSignature = $state("");
+$effect(() => {
+	const signature = JSON.stringify(resolvedSortOrder ?? {});
+	if (!signature || signature === lastSortSignature) return;
+	lastSortSignature = signature;
+	emitGridEvent("sort_changed", undefined, undefined, {
+		x: 0,
+		y: 0
+	}, { sortOrder: resolvedSortOrder });
+});
+let lastFilterSignature = $state("");
+$effect(() => {
+	const signature = JSON.stringify(resolvedFilters ?? {});
+	if (signature === lastFilterSignature) return;
+	lastFilterSignature = signature;
+	emitGridEvent("filter_changed", undefined, undefined, {
+		x: 0,
+		y: 0
+	}, { filters: resolvedFilters });
+});
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture for change-detection
+let lastSearchValue = $state(searchValueState);
+$effect(() => {
+	const next = searchValueState;
+	if (next === lastSearchValue) return;
+	lastSearchValue = next;
+	emitGridEvent("search_changed", undefined, undefined, {
+		x: 0,
+		y: 0
+	}, { value: next });
+});
+let lastSelectionSignature = $state("");
+$effect(() => {
+	const signature = JSON.stringify(selectedIdsInternal);
+	if (signature === lastSelectionSignature) return;
+	lastSelectionSignature = signature;
+	emitGridEvent("selection_changed", resolvedSelectedItems[0], undefined, {
+		x: 0,
+		y: 0
+	}, {
+		selectedIds: selectedIdsInternal,
+		selectedItems: resolvedSelectedItems
 	});
-
-	let lastPageSignature = $state('');
-	$effect(() => {
-		if (!showPager) return;
-		const signature = `${page}:${totalPages}:${pageStart}:${pageEnd}`;
-		if (signature === lastPageSignature) return;
-		lastPageSignature = signature;
-		emitGridEvent('page_loaded', data[0], undefined, { x: 0, y: 0 }, {
-			page,
-			totalPages,
-			pageStart,
-			pageEnd
-		});
+});
+let lastSettingsSignature = $state("");
+$effect(() => {
+	const signature = JSON.stringify(settings ?? {});
+	if (signature === lastSettingsSignature) return;
+	lastSettingsSignature = signature;
+	emitGridEvent("settings_changed", undefined, undefined, {
+		x: 0,
+		y: 0
+	}, { settings });
+});
+let lastPageSignature = $state("");
+$effect(() => {
+	if (!showPager) return;
+	const signature = `${page}:${totalPages}:${pageStart}:${pageEnd}`;
+	if (signature === lastPageSignature) return;
+	lastPageSignature = signature;
+	emitGridEvent("page_loaded", data[0], undefined, {
+		x: 0,
+		y: 0
+	}, {
+		page,
+		totalPages,
+		pageStart,
+		pageEnd
 	});
-
-	let lastDataSignature = $state('');
-	$effect(() => {
-		const signature = `${data.length}:${total}:${loading ? 1 : 0}`;
-		if (signature === lastDataSignature || loading) return;
-		lastDataSignature = signature;
-		emitGridEvent('data_changed', data[0], undefined, { x: 0, y: 0 }, { data, total });
+});
+let lastDataSignature = $state("");
+$effect(() => {
+	const signature = `${data.length}:${total}:${loading ? 1 : 0}`;
+	if (signature === lastDataSignature || loading) return;
+	lastDataSignature = signature;
+	emitGridEvent("data_changed", data[0], undefined, {
+		x: 0,
+		y: 0
+	}, {
+		data,
+		total
 	});
+});
 </script>
 
 <SvarkGridView