@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Svark/Svark.svelte

@@ -1,903 +1,731 @@
-<script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import type { Snippet } from 'svelte';
-	import { Grid, Willow, WillowDark } from '@svar-ui/svelte-grid';
-	import type { IApi } from '@svar-ui/svelte-grid';
-	import SvarkInfiniteLoader from './SvarkInfiniteLoader.svelte';
-	import SvarkPager from './SvarkPager.svelte';
-	import { SvarkResolveSpecAdapter } from './SvarkResolveSpecAdapter.js';
-	import { SvarkRestHeaderSpecAdapter } from './SvarkRestHeaderSpecAdapter.js';
-	import SvarkTopBar from './SvarkTopBar.svelte';
-	import { reduceServerFilterState } from './filtering.js';
-	import SvarkContextMenu from './SvarkContextMenu.svelte';
-	import type {
-		SvarkFilterState,
-		SvarkFilterOptionItem,
-		SvarkSortState,
-		SvarkChangeEvent,
-		SvarkRowInteractionEvent,
-		SvarkAdapterType,
-		SvarkInitialQuery,
-		SvarkPopupFilterDraft,
-		IColumnConfig,
-		IConfig,
-		SvarkContextMenuContext,
-		SvarkContextMenuItem,
-		SvarkContextMenuProps
-	} from './types.js';
-
-	export interface Props {
-		// Prefer `url`. `baseUrl` is kept for backwards compatibility.
-		url?: string;
-		baseUrl?: string;
-		token?: string;
-		schema: string;
-		entity: string;
-		adapterType?: SvarkAdapterType;
-		// Backwards compatibility alias for `adapterType`.
-		clientType?: SvarkAdapterType;
-		columns: IColumnConfig[];
-		config?: Omit<IConfig, 'data'>;
-		query?: SvarkInitialQuery;
-		pageSize?: number;
-		serverSide?: boolean;
-		height?: string | number;
-		select?: boolean;
-		multiselect?: boolean;
-		virtualScroll?: boolean;
-		infiniteScroll?: boolean;
-		topBarLeft?: Snippet;
-		topBarRight?: Snippet;
-		onchange?: (event: SvarkChangeEvent) => void;
-		onerror?: (message: string) => void;
-		onselect?: (ids: (string | number)[]) => void;
-		onrowclick?: (event: SvarkRowInteractionEvent) => void;
-		onrowdblclick?: (event: SvarkRowInteractionEvent) => void;
-		onrowcontextmenu?: (event: SvarkRowInteractionEvent) => void;
-		contextMenuProps?: SvarkContextMenuProps;
-	}
-
-	let {
-		url,
-		baseUrl,
-		token,
-		schema,
-		entity,
-		adapterType,
-		clientType,
-		columns,
-		config = {},
-		query = {},
-		pageSize = 100,
-		serverSide = false,
-		height = '400px',
-		select = true,
-		multiselect = false,
-		virtualScroll = false,
-		infiniteScroll = false,
-		topBarLeft,
-		topBarRight,
-		onchange,
-		onerror,
-		onselect,
-		onrowclick,
-		onrowdblclick,
-		onrowcontextmenu,
-		contextMenuProps
-	}: Props = $props();
-
-	function normalizeAdapterType(t: SvarkAdapterType): 'ResolveSpec' | 'RestHeaderSpec' {
-		return t === 'header' || t === 'RestHeaderSpec' ? 'RestHeaderSpec' : 'ResolveSpec';
-	}
-
-	const FILTER_OPERATOR_LABELS: Record<string, string> = {
-		contains: 'Contains',
-		eq: 'Equals',
-		neq: 'Not equal',
-		startswith: 'Starts with',
-		endswith: 'Ends with',
-		gt: 'Greater than',
-		gte: 'Greater or equal',
-		lt: 'Less than',
-		lte: 'Less or equal'
+<script lang="ts">import { Grid, Willow, WillowDark } from "@svar-ui/svelte-grid";
+import SvarkInfiniteLoader from "./SvarkInfiniteLoader.svelte";
+import SvarkPager from "./SvarkPager.svelte";
+import { SvarkResolveSpecAdapter } from "./SvarkResolveSpecAdapter.js";
+import { SvarkRestHeaderSpecAdapter } from "./SvarkRestHeaderSpecAdapter.js";
+import SvarkTopBar from "./SvarkTopBar.svelte";
+import { reduceServerFilterState } from "./filtering.js";
+import SvarkContextMenu from "./SvarkContextMenu.svelte";
+let { url, baseUrl, token, schema, entity, adapterType, clientType, columns, config = {}, query = {}, pageSize = 100, serverSide = false, height = "400px", select = true, multiselect = false, virtualScroll = false, infiniteScroll = false, topBarLeft, topBarRight, onchange, onerror, onselect, onrowclick, onrowdblclick, onrowcontextmenu, contextMenuProps } = $props();
+function normalizeAdapterType(t) {
+	return t === "header" || t === "RestHeaderSpec" ? "RestHeaderSpec" : "ResolveSpec";
+}
+const FILTER_OPERATOR_LABELS = {
+	contains: "Contains",
+	eq: "Equals",
+	neq: "Not equal",
+	startswith: "Starts with",
+	endswith: "Ends with",
+	gt: "Greater than",
+	gte: "Greater or equal",
+	lt: "Less than",
+	lte: "Less or equal"
+};
+function normalizeOperatorToken(value) {
+	return String(value ?? "contains").trim().toLowerCase().replace(/[\s_-]+/g, "");
+}
+function mapPopupOperatorValue(operator, value) {
+	const normalized = normalizeOperatorToken(operator);
+	if (normalized === "contains") return {
+		operator: "ilike",
+		value
 	};
-
-	function normalizeOperatorToken(value: string | undefined): string {
-		return String(value ?? 'contains')
-			.trim()
-			.toLowerCase()
-			.replace(/[\s_-]+/g, '');
-	}
-
-	function mapPopupOperatorValue(operator: string, value: string): { operator: string; value: string } {
-		const normalized = normalizeOperatorToken(operator);
-		if (normalized === 'contains') return { operator: 'ilike', value };
-		if (normalized === 'startswith') return { operator: 'ilike', value: `${value}%` };
-		if (normalized === 'endswith') return { operator: 'ilike', value: `%${value}` };
-		return { operator: normalized, value };
-	}
-
-	// Enable column sorting by default.
-	// Opt-out: set `sort: false` on a column.
-	const gridColumns = $derived(
-		(columns ?? []).map((col) => {
-			return {
-				...col,
-				sort: (col as any).sort ?? true
-			} as IColumnConfig;
-		})
-	);
-
-	const filterableColumns = $derived(
-		gridColumns
-			.filter((col) => (col as any).id != null && !(col as any).hidden)
-			.map((col) => ({
-				id: String((col as any).id),
-				label:
-					typeof (col as any).header === 'string'
-						? String((col as any).header)
-						: String((col as any).header?.text ?? (col as any).id),
-				column: col
-			}))
-	);
-	const canFilter = $derived(serverSide && filterableColumns.length > 0);
-
-	function getColumnDefinition(columnId: string): IColumnConfig | undefined {
-		return filterableColumns.find((entry) => entry.id === columnId)?.column;
-	}
-
-	function getColumnOptions(columnId: string): SvarkFilterOptionItem[] {
-		const column = getColumnDefinition(columnId);
-		const source = column?.filterOptions;
-		if (!source?.length) return [];
-		return source.map((option) =>
-			typeof option === 'object' && option != null && 'id' in option && 'label' in option
-				? { value: String(option.id), label: String(option.label) }
-				: { value: String(option), label: String(option) }
-		);
-	}
-
-	function getSupportedOperators(columnId: string) {
-		const column = getColumnDefinition(columnId);
-		const configured = column?.filterOperators?.map((item) => normalizeOperatorToken(item)).filter(Boolean);
-		if (configured?.length) return configured;
-		if (column?.filterOptions?.length) return ['eq', 'neq'];
-		return ['contains', 'eq', 'neq', 'startswith', 'endswith'];
-	}
-
-	function getDefaultOperator(columnId: string) {
-		return getSupportedOperators(columnId)[0] ?? 'contains';
-	}
-
-	let popupFilterId = $state(0);
-
-	function nextPopupFilterId() {
-		popupFilterId += 1;
-		return popupFilterId;
-	}
-
-	function createPopupDraft(columnId?: string): SvarkPopupFilterDraft {
-		const selectedColumn = columnId ?? filterableColumns[0]?.id ?? '';
-		return {
-			id: nextPopupFilterId(),
-			column: selectedColumn,
-			operator: getDefaultOperator(selectedColumn),
-			value: '',
-			logic: 'AND'
+	if (normalized === "startswith") return {
+		operator: "ilike",
+		value: `${value}%`
+	};
+	if (normalized === "endswith") return {
+		operator: "ilike",
+		value: `%${value}`
+	};
+	return {
+		operator: normalized,
+		value
+	};
+}
+// Enable column sorting by default.
+// Opt-out: set `sort: false` on a column.
+const gridColumns = $derived((columns ?? []).map((col) => {
+	return {
+		...col,
+		sort: col.sort ?? true
+	};
+}));
+const filterableColumns = $derived(gridColumns.filter((col) => col.id != null && !col.hidden).map((col) => ({
+	id: String(col.id),
+	label: typeof col.header === "string" ? String(col.header) : String(col.header?.text ?? col.id),
+	column: col
+})));
+const canFilter = $derived(serverSide && filterableColumns.length > 0);
+function getColumnDefinition(columnId) {
+	return filterableColumns.find((entry) => entry.id === columnId)?.column;
+}
+function getColumnOptions(columnId) {
+	const column = getColumnDefinition(columnId);
+	const source = column?.filterOptions;
+	if (!source?.length) return [];
+	return source.map((option) => typeof option === "object" && option != null && "id" in option && "label" in option ? {
+		value: String(option.id),
+		label: String(option.label)
+	} : {
+		value: String(option),
+		label: String(option)
+	});
+}
+function getSupportedOperators(columnId) {
+	const column = getColumnDefinition(columnId);
+	const configured = column?.filterOperators?.map((item) => normalizeOperatorToken(item)).filter(Boolean);
+	if (configured?.length) return configured;
+	if (column?.filterOptions?.length) return ["eq", "neq"];
+	return [
+		"contains",
+		"eq",
+		"neq",
+		"startswith",
+		"endswith"
+	];
+}
+function getDefaultOperator(columnId) {
+	return getSupportedOperators(columnId)[0] ?? "contains";
+}
+let popupFilterId = $state(0);
+function nextPopupFilterId() {
+	popupFilterId += 1;
+	return popupFilterId;
+}
+function createPopupDraft(columnId) {
+	const selectedColumn = columnId ?? filterableColumns[0]?.id ?? "";
+	return {
+		id: nextPopupFilterId(),
+		column: selectedColumn,
+		operator: getDefaultOperator(selectedColumn),
+		value: "",
+		logic: "AND"
+	};
+}
+function clonePopupDrafts(filters) {
+	return filters.map((filter) => ({ ...filter }));
+}
+function stripPopupFilters(state) {
+	return Object.fromEntries(Object.entries(state).filter(([key]) => !key.startsWith("popup:")));
+}
+function buildPopupFilterState(filters) {
+	const next = {};
+	for (const filter of filters) {
+		const value = filter.value.trim();
+		if (!filter.column || value === "") continue;
+		const mapped = mapPopupOperatorValue(filter.operator, value);
+		next[`popup:${filter.id}`] = {
+			column: filter.column,
+			operator: mapped.operator,
+			value: mapped.value,
+			logic_operator: filter.logic
 		};
 	}
-
-	function clonePopupDrafts(filters: SvarkPopupFilterDraft[]) {
-		return filters.map((filter) => ({ ...filter }));
-	}
-
-	function stripPopupFilters(state: SvarkFilterState): SvarkFilterState {
-		return Object.fromEntries(
-			Object.entries(state).filter(([key]) => !key.startsWith('popup:'))
-		);
-	}
-
-	function buildPopupFilterState(filters: SvarkPopupFilterDraft[]): SvarkFilterState {
-		const next: SvarkFilterState = {};
-		for (const filter of filters) {
-			const value = filter.value.trim();
-			if (!filter.column || value === '') continue;
-			const mapped = mapPopupOperatorValue(filter.operator, value);
-			next[`popup:${filter.id}`] = {
-				column: filter.column,
-				operator: mapped.operator,
-				value: mapped.value,
-				logic_operator: filter.logic
-			};
+	return next;
+}
+function syncPopupFilters(filters) {
+	popupAppliedFilters = clonePopupDrafts(filters).filter((filter) => filter.column && filter.value.trim() !== "");
+	filterState = {
+		...stripPopupFilters(filterState),
+		...buildPopupFilterState(popupAppliedFilters)
+	};
+}
+const resolvedUrl = $derived(url ?? baseUrl ?? "");
+const resolvedAdapterType = $derived(normalizeAdapterType(adapterType ?? clientType ?? "body"));
+const heightStyle = $derived(typeof height === "number" ? `${height}px` : height);
+let data = $state([]);
+let loading = $state(false);
+let infiniteLoading = $state(false);
+let error = $state(null);
+let total = $state(0);
+let sortState = $state([]);
+let filterState = $state({});
+let searchFilterState = $state({});
+let page = $state(0);
+let reload = $state(0);
+let gridApi = $state(null);
+let searchOpen = $state(false);
+let searchValue = $state("");
+let filterMenuOpen = $state(false);
+let popupAppliedFilters = $state([]);
+let popupDraftFilters = $state([]);
+// Paging is active when serverSide with no scroll variant
+const showPager = $derived(serverSide && !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));
+// 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;
+$effect(() => {
+	const s = sortState;
+	const f = {
+		...filterState,
+		...searchFilterState
+	};
+	if (!serverSide) {
+		debouncedSort = s;
+		debouncedFilter = f;
+		return;
+	}
+	if (_debounceTimer !== null) clearTimeout(_debounceTimer);
+	_debounceTimer = setTimeout(() => {
+		_debounceTimer = null;
+		page = 0;
+		debouncedSort = s;
+		debouncedFilter = f;
+	}, 300);
+	return () => {
+		if (_debounceTimer !== null) {
+			clearTimeout(_debounceTimer);
+			_debounceTimer = null;
+		}
+	};
+});
+// Dark mode detection — priority: inline color-scheme style > .dark class > OS media query
+let isDark = $state(false);
+$effect(() => {
+	const mq = window.matchMedia("(prefers-color-scheme: dark)");
+	const html = document.documentElement;
+	function update() {
+		const explicit = html.style.colorScheme;
+		if (explicit === "dark" || explicit === "light") {
+			isDark = explicit === "dark";
+		} else {
+			isDark = html.classList.contains("dark") || mq.matches;
 		}
-		return next;
 	}
-
-	function syncPopupFilters(filters: SvarkPopupFilterDraft[]) {
-		popupAppliedFilters = clonePopupDrafts(filters).filter((filter) => filter.column && filter.value.trim() !== '');
-		filterState = {
-			...stripPopupFilters(filterState),
-			...buildPopupFilterState(popupAppliedFilters)
+	update();
+	mq.addEventListener("change", update);
+	const observer = new MutationObserver(update);
+	observer.observe(html, { attributeFilter: ["class", "style"] });
+	return () => {
+		mq.removeEventListener("change", update);
+		observer.disconnect();
+	};
+});
+// Bind to outer container so we can find .wx-scroll for infinite scroll
+let containerRef = $state();
+let scrollContainerRef = $state(null);
+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 (!serverSide) return;
+	if (!value) {
+		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) {
+		searchFilterState = {};
+		return;
+	}
+	const next = {};
+	for (const id of searchableIds) {
+		// Avoid clobbering an existing column filter the user set elsewhere.
+		const hasExistingFilter = Object.entries(filterState).some(([key, filter]) => {
+			const target = filter.column ?? key;
+			return target === id && filter.value != null && filter.value !== "";
+		});
+		if (hasExistingFilter) continue;
+		next[id] = {
+			value,
+			operator: "ilike",
+			logic_operator: "OR"
 		};
 	}
-
-	const resolvedUrl = $derived(url ?? baseUrl ?? '');
-	const resolvedAdapterType = $derived(normalizeAdapterType(adapterType ?? clientType ?? 'body'));
-
-	const heightStyle = $derived(typeof height === 'number' ? `${height}px` : height);
-
-	let data = $state<any[]>([]);
-	let loading = $state(false);
-	let infiniteLoading = $state(false);
-	let error = $state<string | null>(null);
-	let total = $state(0);
-	let sortState = $state<SvarkSortState[]>([]);
-	let filterState = $state<SvarkFilterState>({});
-	let searchFilterState = $state<SvarkFilterState>({});
-	let page = $state(0);
-	let reload = $state(0);
-
-	let gridApi = $state<IApi | null>(null);
-	let searchOpen = $state(false);
-	let searchValue = $state('');
-	let filterMenuOpen = $state(false);
-	let popupAppliedFilters = $state<SvarkPopupFilterDraft[]>([]);
-	let popupDraftFilters = $state<SvarkPopupFilterDraft[]>([]);
-
-	// Paging is active when serverSide with no scroll variant
-	const showPager = $derived(serverSide && !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));
-
-	// 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;
-
-	$effect(() => {
-		const s = sortState;
-		const f = { ...filterState, ...searchFilterState };
-
-		if (!serverSide) {
-			debouncedSort = s;
-			debouncedFilter = f;
-			return;
-		}
-
-		if (_debounceTimer !== null) clearTimeout(_debounceTimer);
-		_debounceTimer = setTimeout(() => {
-			_debounceTimer = null;
-			page = 0; // reset page atomically — prevents a double-fetch
-			debouncedSort = s;
-			debouncedFilter = f;
-		}, 300);
-
-		return () => {
-			if (_debounceTimer !== null) {
-				clearTimeout(_debounceTimer);
-				_debounceTimer = null;
-			}
-		};
+	searchFilterState = next;
+}
+function setSearch(next) {
+	searchValue = next;
+	gridApi?.exec("search-rows", {
+		search: next,
+		columns: getLocalSearchColumns()
 	});
-
-	// Dark mode detection — priority: inline color-scheme style > .dark class > OS media query
-	let isDark = $state(false);
-
-	$effect(() => {
-		const mq = window.matchMedia('(prefers-color-scheme: dark)');
-		const html = document.documentElement;
-
-		function update() {
-			const explicit = html.style.colorScheme;
-			if (explicit === 'dark' || explicit === 'light') {
-				isDark = explicit === 'dark';
-			} else {
-				isDark = html.classList.contains('dark') || mq.matches;
+	applyServerSearchFilters(next.trim());
+}
+function openSearch() {
+	searchOpen = true;
+}
+function closeSearch() {
+	searchOpen = false;
+}
+function openFilterMenu() {
+	popupDraftFilters = popupAppliedFilters.length > 0 ? clonePopupDrafts(popupAppliedFilters) : [createPopupDraft()];
+	filterMenuOpen = true;
+}
+function closeFilterMenu() {
+	filterMenuOpen = false;
+}
+function toggleFilterMenu() {
+	if (filterMenuOpen) {
+		closeFilterMenu();
+		return;
+	}
+	openFilterMenu();
+}
+function addPopupDraft() {
+	popupDraftFilters = [...popupDraftFilters, createPopupDraft()];
+}
+function removePopupDraft(id) {
+	const next = popupDraftFilters.filter((filter) => filter.id !== id);
+	popupDraftFilters = next.length > 0 ? next : [createPopupDraft()];
+}
+function updatePopupDraft(id, updates, resetValue = false) {
+	popupDraftFilters = popupDraftFilters.map((filter) => {
+		if (filter.id !== id) return filter;
+		const next = {
+			...filter,
+			...updates
+		};
+		if (updates.column) {
+			const supported = getSupportedOperators(updates.column);
+			if (!supported.includes(normalizeOperatorToken(next.operator))) {
+				next.operator = getDefaultOperator(updates.column);
 			}
+			if (resetValue) next.value = "";
 		}
-
-		update();
-		mq.addEventListener('change', update);
-
-		const observer = new MutationObserver(update);
-		observer.observe(html, { attributeFilter: ['class', 'style'] });
-
-		return () => {
-			mq.removeEventListener('change', update);
-			observer.disconnect();
-		};
+		return next;
 	});
-
-	// Bind to outer container so we can find .wx-scroll for infinite scroll
-	let containerRef = $state<HTMLElement | undefined>();
-	let scrollContainerRef = $state<HTMLElement | null>(null);
-
-	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 (!serverSide) return;
-
-		if (!value) {
-			searchFilterState = {};
+}
+function applyPopupDrafts() {
+	syncPopupFilters(popupDraftFilters);
+	filterMenuOpen = false;
+}
+function clearPopupFilters() {
+	popupAppliedFilters = [];
+	popupDraftFilters = [createPopupDraft()];
+	filterState = stripPopupFilters(filterState);
+}
+function removeAppliedPopupFilter(id) {
+	syncPopupFilters(popupAppliedFilters.filter((filter) => filter.id !== id));
+}
+$effect(() => {
+	if (!containerRef) return;
+	const node = containerRef;
+	function onKeyDown(ev) {
+		const key = ev.key?.toLowerCase?.() ?? "";
+		const isFind = (ev.ctrlKey || ev.metaKey) && !ev.altKey && !ev.shiftKey && key === "f";
+		if (isFind) {
+			ev.preventDefault();
+			ev.stopPropagation();
+			openSearch();
 			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));
-		}
-
-		if (searchableIds.length === 0) {
-			searchFilterState = {};
-			return;
+		if (searchOpen && ev.key === "Escape") {
+			ev.preventDefault();
+			ev.stopPropagation();
+			closeSearch();
 		}
-
-		const next: SvarkFilterState = {};
-		for (const id of searchableIds) {
-			// Avoid clobbering an existing column filter the user set elsewhere.
-			const hasExistingFilter = Object.entries(filterState).some(([key, filter]) => {
-				const target = filter.column ?? key;
-				return target === id && filter.value != null && filter.value !== '';
-			});
-			if (hasExistingFilter) continue;
-			next[id] = { value, operator: 'ilike', logic_operator: 'OR' };
+		if (contextMenuOpen && ev.key === "Escape") {
+			ev.preventDefault();
+			ev.stopPropagation();
+			closeContextMenu();
 		}
-		searchFilterState = next;
 	}
-
-	function setSearch(next: string) {
-		searchValue = next;
-		gridApi?.exec('search-rows', { search: next, columns: getLocalSearchColumns() });
-		applyServerSearchFilters(next.trim());
-	}
-
-	function openSearch() {
-		searchOpen = true;
-	}
-
-	function closeSearch() {
-		searchOpen = false;
-	}
-
-	function openFilterMenu() {
-		popupDraftFilters =
-			popupAppliedFilters.length > 0 ? clonePopupDrafts(popupAppliedFilters) : [createPopupDraft()];
-		filterMenuOpen = true;
+	node.addEventListener("keydown", onKeyDown, true);
+	return () => node.removeEventListener("keydown", onKeyDown, true);
+});
+let selectedIdsInternal = $state([]);
+const selectedRow = $derived.by(() => {
+	const id = selectedIdsInternal[0];
+	if (id == null) return null;
+	return data.find((item) => String(item?.id) === String(id)) ?? null;
+});
+function resolveRowFromTarget(target) {
+	if (!containerRef || !(target instanceof Element)) return undefined;
+	const rowEl = target.closest("[data-id]");
+	if (!rowEl || !containerRef.contains(rowEl)) return undefined;
+	const attrId = rowEl.getAttribute("data-id");
+	if (attrId == null) return undefined;
+	const row = data.find((item) => String(item?.id) === attrId);
+	return {
+		id: row?.id ?? attrId,
+		row
+	};
+}
+let contextMenuOpen = $state(false);
+let contextMenuX = $state(0);
+let contextMenuY = $state(0);
+let contextMenuRowId = $state(null);
+let contextMenuRow = $state(null);
+let contextMenuEvent = $state(null);
+function buildContextMenuCtx() {
+	if (!contextMenuEvent) return null;
+	return {
+		api: gridApi ?? undefined,
+		row: contextMenuRow,
+		rowId: contextMenuRowId,
+		selectedIds: selectedIdsInternal,
+		data,
+		event: contextMenuEvent
+	};
+}
+const contextMenuItems = $derived.by(() => {
+	if (!contextMenuOpen) return [];
+	if (!contextMenuProps) return [];
+	const ctx = buildContextMenuCtx();
+	if (!ctx) return [];
+	const resolved = typeof contextMenuProps.items === "function" ? contextMenuProps.items(ctx) : contextMenuProps.items ?? [];
+	return (resolved ?? []).map((it) => ({
+		...it,
+		kind: it.kind ?? "item"
+	}));
+});
+function closeContextMenu() {
+	contextMenuOpen = false;
+	contextMenuEvent = null;
+	contextMenuRowId = null;
+	contextMenuRow = null;
+}
+function handleContextMenuItem(item) {
+	if (item.id === "__close__") {
+		closeContextMenu();
+		return;
 	}
-
-	function closeFilterMenu() {
-		filterMenuOpen = false;
+	if (!("label" in item)) {
+		closeContextMenu();
+		return;
+	}
+	const ctx = buildContextMenuCtx();
+	closeContextMenu();
+	if (!ctx) return;
+	item.onselect?.(ctx);
+	contextMenuProps?.onselectitem?.(item, ctx);
+}
+$effect(() => {
+	if (!containerRef) return;
+	const node = containerRef;
+	function handleClick(ev) {
+		const resolved = resolveRowFromTarget(ev.target);
+		if (!resolved) return;
+		onrowclick?.({
+			...resolved,
+			event: ev
+		});
 	}
-
-	function toggleFilterMenu() {
-		if (filterMenuOpen) {
-			closeFilterMenu();
+	function handleContextMenu(ev) {
+		// Only handle right-clicks on the grid surface itself, not on Svark's toolbar/pager.
+		if (!containerRef || !(ev.target instanceof Element) || !ev.target.closest(".wx-grid") || !containerRef.contains(ev.target.closest(".wx-grid"))) {
 			return;
 		}
-		openFilterMenu();
-	}
-
-	function addPopupDraft() {
-		popupDraftFilters = [...popupDraftFilters, createPopupDraft()];
-	}
-
-	function removePopupDraft(id: number) {
-		const next = popupDraftFilters.filter((filter) => filter.id !== id);
-		popupDraftFilters = next.length > 0 ? next : [createPopupDraft()];
-	}
-
-	function updatePopupDraft(
-		id: number,
-		updates: Partial<SvarkPopupFilterDraft>,
-		resetValue = false
-	) {
-		popupDraftFilters = popupDraftFilters.map((filter) => {
-			if (filter.id !== id) return filter;
-			const next = { ...filter, ...updates };
-			if (updates.column) {
-				const supported = getSupportedOperators(updates.column);
-				if (!supported.includes(normalizeOperatorToken(next.operator))) {
-					next.operator = getDefaultOperator(updates.column);
-				}
-				if (resetValue) next.value = '';
-			}
-			return next;
+		const resolved = resolveRowFromTarget(ev.target);
+		if (resolved) {
+			onrowcontextmenu?.({
+				...resolved,
+				event: ev
+			});
+		}
+		if (!contextMenuProps) return;
+		// Always prevent the browser context menu when a custom menu is configured.
+		ev.preventDefault();
+		ev.stopPropagation();
+		// Right-clicking a row should behave like "select + open menu".
+		if (resolved?.id != null && gridApi && select !== false) {
+			gridApi.exec("select-row", {
+				id: resolved.id,
+				toggle: false,
+				range: false
+			});
+			selectedIdsInternal = [resolved.id];
+		}
+		contextMenuEvent = ev;
+		contextMenuX = ev.clientX;
+		contextMenuY = ev.clientY;
+		// Prefer the right-clicked row; otherwise fall back to current selection.
+		const ctxRowId = resolved?.id ?? selectedIdsInternal[0] ?? null;
+		const ctxRow = resolved?.row ?? (ctxRowId != null ? data.find((item) => String(item?.id) === String(ctxRowId)) ?? null : selectedRow) ?? null;
+		contextMenuRowId = ctxRowId;
+		contextMenuRow = ctxRow;
+		contextMenuOpen = true;
+	}
+	function handleDoubleClick(ev) {
+		const resolved = resolveRowFromTarget(ev.target);
+		if (!resolved) return;
+		onrowdblclick?.({
+			...resolved,
+			event: ev
 		});
 	}
-
-	function applyPopupDrafts() {
-		syncPopupFilters(popupDraftFilters);
-		filterMenuOpen = false;
-	}
-
-	function clearPopupFilters() {
-		popupAppliedFilters = [];
-		popupDraftFilters = [createPopupDraft()];
-		filterState = stripPopupFilters(filterState);
-	}
-
-	function removeAppliedPopupFilter(id: number) {
-		syncPopupFilters(popupAppliedFilters.filter((filter) => filter.id !== id));
-	}
-
-	$effect(() => {
-		if (!containerRef) return;
-		const node = containerRef;
-
-		function onKeyDown(ev: KeyboardEvent) {
-			const key = ev.key?.toLowerCase?.() ?? '';
-			const isFind = (ev.ctrlKey || ev.metaKey) && !ev.altKey && !ev.shiftKey && key === 'f';
-
-			if (isFind) {
-				ev.preventDefault();
-				ev.stopPropagation();
-				openSearch();
-				return;
-			}
-
-			if (searchOpen && ev.key === 'Escape') {
-				ev.preventDefault();
-				ev.stopPropagation();
-				closeSearch();
-			}
-
-			if (contextMenuOpen && ev.key === 'Escape') {
-				ev.preventDefault();
-				ev.stopPropagation();
-				closeContextMenu();
+	node.addEventListener("click", handleClick);
+	node.addEventListener("dblclick", handleDoubleClick);
+	node.addEventListener("contextmenu", handleContextMenu);
+	return () => {
+		node.removeEventListener("click", handleClick);
+		node.removeEventListener("dblclick", handleDoubleClick);
+		node.removeEventListener("contextmenu", handleContextMenu);
+	};
+});
+const adapter = $derived(resolvedAdapterType === "RestHeaderSpec" ? new SvarkRestHeaderSpecAdapter({
+	url: resolvedUrl,
+	token,
+	schema,
+	entity
+}) : new SvarkResolveSpecAdapter({
+	url: resolvedUrl,
+	token,
+	schema,
+	entity
+}));
+// 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 = serverSide ? debouncedSort : [];
+	const _filters = serverSide ? debouncedFilter : {};
+	// Paging offset: only applied when server-side paging is active
+	const _offset = showPager ? page * pageSize : 0;
+	void reload;
+	let cancelled = false;
+	loading = true;
+	error = null;
+	_adapter.read(_sort, _filters, _limit, _offset, query).then((response) => {
+		if (cancelled) return;
+		if (response.success) {
+			const incoming = response.data ?? [];
+			total = response.metadata?.total ?? incoming.length;
+			if (virtualScroll) {
+				data = [];
+			} else {
+				data = incoming;
 			}
+		} else {
+			const msg = response.error?.message ?? "Failed to load data";
+			error = msg;
+			onerror?.(msg);
 		}
-
-		node.addEventListener('keydown', onKeyDown, true);
-		return () => node.removeEventListener('keydown', onKeyDown, true);
+	}).catch((e) => {
+		if (cancelled) return;
+		const msg = e instanceof Error ? e.message : "Unknown error";
+		error = msg;
+		onerror?.(msg);
+	}).finally(() => {
+		if (!cancelled) loading = false;
 	});
-
-	let selectedIdsInternal = $state<(string | number)[]>([]);
-	const selectedRow = $derived.by(() => {
-		const id = selectedIdsInternal[0];
-		if (id == null) return null;
-		return data.find((item) => String(item?.id) === String(id)) ?? null;
+	return () => {
+		cancelled = true;
+	};
+});
+// ── Infinite scroll: append pages when the user nears the bottom ───────────
+function maybeLoadNextPage() {
+	if (!infiniteScroll || !containerRef || loading || infiniteLoading || data.length >= total) return;
+	const scrollEl = scrollContainerRef;
+	if (scrollEl && scrollEl.scrollHeight > scrollEl.clientHeight + 1) {
+		const { scrollTop, scrollHeight, clientHeight } = scrollEl;
+		if (scrollHeight - scrollTop - clientHeight < 150) {
+			loadNextPage();
+		}
+		return;
+	}
+	const { bottom } = containerRef.getBoundingClientRect();
+	if (bottom - window.innerHeight < 150) {
+		loadNextPage();
+	}
+}
+$effect(() => {
+	if (!infiniteScroll || loading || infiniteLoading) return;
+	void data.length;
+	void total;
+	queueMicrotask(() => {
+		maybeLoadNextPage();
 	});
-
-	function resolveRowFromTarget(target: EventTarget | null) {
-		if (!containerRef || !(target instanceof Element)) return undefined;
-		const rowEl = target.closest('[data-id]') as HTMLElement | null;
-		if (!rowEl || !containerRef.contains(rowEl)) return undefined;
-
-		const attrId = rowEl.getAttribute('data-id');
-		if (attrId == null) return undefined;
-
-		const row = data.find((item) => String(item?.id) === attrId);
-		return {
-			id: (row?.id ?? attrId) as string | number,
-			row
-		};
-	}
-
-	let contextMenuOpen = $state(false);
-	let contextMenuX = $state(0);
-	let contextMenuY = $state(0);
-	let contextMenuRowId = $state<string | number | null>(null);
-	let contextMenuRow = $state<any | null>(null);
-	let contextMenuEvent = $state<MouseEvent | null>(null);
-
-	function buildContextMenuCtx(): SvarkContextMenuContext | null {
-		if (!contextMenuEvent) return null;
-		return {
-			api: gridApi ?? undefined,
-			row: contextMenuRow,
-			rowId: contextMenuRowId,
-			selectedIds: selectedIdsInternal,
-			data,
-			event: contextMenuEvent
+});
+$effect(() => {
+	if (!infiniteScroll || !containerRef) return;
+	let scrollEl = null;
+	function attach(el) {
+		scrollEl = el;
+		scrollContainerRef = el;
+		el.addEventListener("scroll", onScroll);
+		queueMicrotask(onViewportChange);
+	}
+	function onScroll() {
+		maybeLoadNextPage();
+	}
+	function onViewportChange() {
+		maybeLoadNextPage();
+	}
+	window.addEventListener("scroll", onViewportChange, true);
+	window.addEventListener("resize", onViewportChange);
+	// SVAR renders .wx-scroll asynchronously; watch for it with MutationObserver
+	const candidate = containerRef.querySelector(".wx-scroll");
+	if (candidate) {
+		attach(candidate);
+	} else {
+		const obs = new MutationObserver(() => {
+			const el = containerRef?.querySelector(".wx-scroll");
+			if (el) {
+				attach(el);
+				obs.disconnect();
+			}
+		});
+		obs.observe(containerRef, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			obs.disconnect();
+			scrollEl?.removeEventListener("scroll", onScroll);
+			window.removeEventListener("scroll", onViewportChange, true);
+			window.removeEventListener("resize", onViewportChange);
+			scrollContainerRef = null;
 		};
 	}
-
-	const contextMenuItems = $derived.by(() => {
-		if (!contextMenuOpen) return [] as SvarkContextMenuItem[];
-		if (!contextMenuProps) return [] as SvarkContextMenuItem[];
-		const ctx = buildContextMenuCtx();
-		if (!ctx) return [] as SvarkContextMenuItem[];
-		const resolved =
-			typeof contextMenuProps.items === 'function'
-				? contextMenuProps.items(ctx)
-				: contextMenuProps.items ?? [];
-		return (resolved ?? []).map((it): SvarkContextMenuItem => ({
-			...it,
-			kind: it.kind ?? 'item'
-		}));
-	});
-
-	function closeContextMenu() {
-		contextMenuOpen = false;
-		contextMenuEvent = null;
-		contextMenuRowId = null;
-		contextMenuRow = null;
-	}
-
-	function handleContextMenuItem(item: SvarkContextMenuItem | { id: '__close__' }) {
-		if (item.id === '__close__') {
-			closeContextMenu();
-			return;
-		}
-		if (!('label' in item)) {
-			closeContextMenu();
-			return;
-		}
-		const ctx = buildContextMenuCtx();
-		closeContextMenu();
-		if (!ctx) return;
-		item.onselect?.(ctx);
-		contextMenuProps?.onselectitem?.(item, ctx);
-	}
-
-	$effect(() => {
-		if (!containerRef) return;
-		const node = containerRef;
-
-		function handleClick(ev: MouseEvent) {
-			const resolved = resolveRowFromTarget(ev.target);
-			if (!resolved) return;
-			onrowclick?.({ ...resolved, event: ev });
-		}
-
-		function handleContextMenu(ev: MouseEvent) {
-			// Only handle right-clicks on the grid surface itself, not on Svark's toolbar/pager.
-			if (
-				!containerRef ||
-				!(ev.target instanceof Element) ||
-				!ev.target.closest('.wx-grid') ||
-				!containerRef.contains(ev.target.closest('.wx-grid'))
-			) {
+	return () => {
+		scrollEl?.removeEventListener("scroll", onScroll);
+		window.removeEventListener("scroll", onViewportChange, true);
+		window.removeEventListener("resize", onViewportChange);
+		scrollContainerRef = null;
+	};
+});
+async function loadNextPage() {
+	// 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 = serverSide ? JSON.stringify(debouncedSort) : "";
+	const snapshotFilter = serverSide ? JSON.stringify(debouncedFilter) : "";
+	const snapshotOffset = data.length;
+	infiniteLoading = true;
+	try {
+		const response = await adapter.read(serverSide ? debouncedSort : [], serverSide ? debouncedFilter : {}, pageSize, snapshotOffset, query);
+		// Discard if sort/filter changed while we were fetching
+		if (serverSide) {
+			if (JSON.stringify(debouncedSort) !== snapshotSort || JSON.stringify(debouncedFilter) !== snapshotFilter) {
 				return;
 			}
-
-			const resolved = resolveRowFromTarget(ev.target);
-			if (resolved) {
-				onrowcontextmenu?.({ ...resolved, event: ev });
-			}
-
-			if (!contextMenuProps) return;
-			// Always prevent the browser context menu when a custom menu is configured.
-			ev.preventDefault();
-			ev.stopPropagation();
-
-			// Right-clicking a row should behave like "select + open menu".
-			if (resolved?.id != null && gridApi && select !== false) {
-				gridApi.exec('select-row', { id: resolved.id, toggle: false, range: false });
-				selectedIdsInternal = [resolved.id];
-			}
-
-			contextMenuEvent = ev;
-			contextMenuX = ev.clientX;
-			contextMenuY = ev.clientY;
-
-			// Prefer the right-clicked row; otherwise fall back to current selection.
-			const ctxRowId = (resolved?.id ?? selectedIdsInternal[0] ?? null) as string | number | null;
-			const ctxRow =
-				resolved?.row ??
-				(ctxRowId != null
-					? data.find((item) => String(item?.id) === String(ctxRowId)) ?? null
-					: selectedRow) ??
-				null;
-
-			contextMenuRowId = ctxRowId;
-			contextMenuRow = ctxRow;
-			contextMenuOpen = true;
 		}
-
-		function handleDoubleClick(ev: MouseEvent) {
-			const resolved = resolveRowFromTarget(ev.target);
-			if (!resolved) return;
-			onrowdblclick?.({ ...resolved, event: ev });
+		if (response.success) {
+			data = [...data, ...response.data ?? []];
 		}
-
-		node.addEventListener('click', handleClick);
-		node.addEventListener('dblclick', handleDoubleClick);
-		node.addEventListener('contextmenu', handleContextMenu);
-
-		return () => {
-			node.removeEventListener('click', handleClick);
-			node.removeEventListener('dblclick', handleDoubleClick);
-			node.removeEventListener('contextmenu', handleContextMenu);
-		};
+	} 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);
 	});
-
-	const adapter = $derived(
-		resolvedAdapterType === 'RestHeaderSpec'
-			? new SvarkRestHeaderSpecAdapter({ url: resolvedUrl, token, schema, entity })
-			: new SvarkResolveSpecAdapter({ url: resolvedUrl, token, schema, entity })
-	);
-
-	// 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 = serverSide ? debouncedSort : [];
-		const _filters = serverSide ? debouncedFilter : {};
-		// Paging offset: only applied when server-side paging is active
-		const _offset = showPager ? page * pageSize : 0;
-		void reload;
-		let cancelled = false;
-
-		loading = true;
-		error = null;
-
-		_adapter
-			.read(_sort, _filters, _limit, _offset, query)
-			.then((response) => {
-				if (cancelled) return;
+	// 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 { start, end } = ev.row;
+			const limit = end - start;
+			if (limit <= 0) return;
+			loading = true;
+			try {
+				const response = await adapter.read(serverSide ? debouncedSort : [], serverSide ? debouncedFilter : {}, limit, start, query);
 				if (response.success) {
-					const incoming = response.data ?? [];
-					total = (response as any).metadata?.total ?? incoming.length;
-
-					if (virtualScroll) {
-						data = [];
-					} else {
-						data = incoming;
-					}
-				} else {
-					const msg = (response as any).error?.message ?? 'Failed to load data';
-					error = msg;
-					onerror?.(msg);
+					data = response.data ?? [];
 				}
-			})
-			.catch((e) => {
-				if (cancelled) return;
-				const msg = e instanceof Error ? e.message : 'Unknown error';
+			} catch (e) {
+				const msg = e instanceof Error ? e.message : "Failed to load data";
 				error = msg;
 				onerror?.(msg);
-			})
-			.finally(() => {
-				if (!cancelled) loading = false;
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	});
-
-	// ── Infinite scroll: append pages when the user nears the bottom ───────────
-
-	function maybeLoadNextPage() {
-		if (!infiniteScroll || !containerRef || loading || infiniteLoading || data.length >= total) return;
-
-		const scrollEl = scrollContainerRef;
-		if (scrollEl && scrollEl.scrollHeight > scrollEl.clientHeight + 1) {
-			const { scrollTop, scrollHeight, clientHeight } = scrollEl;
-			if (scrollHeight - scrollTop - clientHeight < 150) {
-				loadNextPage();
+			} finally {
+				loading = false;
 			}
-			return;
-		}
-
-		const { bottom } = containerRef.getBoundingClientRect();
-		if (bottom - window.innerHeight < 150) {
-			loadNextPage();
-		}
-	}
-
-	$effect(() => {
-		if (!infiniteScroll || loading || infiniteLoading) return;
-		void data.length;
-		void total;
-
-		queueMicrotask(() => {
-			maybeLoadNextPage();
 		});
-	});
-
-	$effect(() => {
-		if (!infiniteScroll || !containerRef) return;
-
-		let scrollEl: Element | null = null;
-
-		function attach(el: Element) {
-			scrollEl = el;
-			scrollContainerRef = el as HTMLElement;
-			el.addEventListener('scroll', onScroll);
-			queueMicrotask(onViewportChange);
-		}
-
-		function onScroll() {
-			maybeLoadNextPage();
-		}
-
-		function onViewportChange() {
-			maybeLoadNextPage();
-		}
-
-		window.addEventListener('scroll', onViewportChange, true);
-		window.addEventListener('resize', onViewportChange);
-
-		// SVAR renders .wx-scroll asynchronously; watch for it with MutationObserver
-		const candidate = containerRef.querySelector('.wx-scroll');
-		if (candidate) {
-			attach(candidate);
-		} else {
-			const obs = new MutationObserver(() => {
-				const el = containerRef?.querySelector('.wx-scroll');
-				if (el) {
-					attach(el);
-					obs.disconnect();
-				}
-			});
-			obs.observe(containerRef, { childList: true, subtree: true });
-			return () => {
-				obs.disconnect();
-				scrollEl?.removeEventListener('scroll', onScroll);
-				window.removeEventListener('scroll', onViewportChange, true);
-				window.removeEventListener('resize', onViewportChange);
-				scrollContainerRef = null;
-			};
-		}
-
-		return () => {
-			scrollEl?.removeEventListener('scroll', onScroll);
-			window.removeEventListener('scroll', onViewportChange, true);
-			window.removeEventListener('resize', onViewportChange);
-			scrollContainerRef = null;
-		};
-	});
-
-	async function loadNextPage() {
-		// 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 = serverSide ? JSON.stringify(debouncedSort) : '';
-		const snapshotFilter = serverSide ? JSON.stringify(debouncedFilter) : '';
-		const snapshotOffset = data.length;
-
-		infiniteLoading = true;
-		try {
-			const response = await adapter.read(
-				serverSide ? debouncedSort : [],
-				serverSide ? debouncedFilter : {},
-				pageSize,
-				snapshotOffset,
-				query
-			);
-			// Discard if sort/filter changed while we were fetching
-			if (serverSide) {
-				if (
-					JSON.stringify(debouncedSort) !== snapshotSort ||
-					JSON.stringify(debouncedFilter) !== snapshotFilter
-				) {
-					return;
-				}
-			}
-			if (response.success) {
-				data = [...data, ...(response.data ?? [])];
-			}
-		} 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);
-		});
-
-		// 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 { 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(
-						serverSide ? debouncedSort : [],
-						serverSide ? debouncedFilter : {},
-						limit,
-						start,
-						query
-					);
-					if (response.success) {
-						data = response.data ?? [];
-					}
-				} catch (e) {
-					const msg = e instanceof Error ? e.message : 'Failed to load data';
-					error = msg;
-					onerror?.(msg);
-				} finally {
-					loading = false;
-				}
-			});
-		}
-
-		if (serverSide) {
-			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' }];
-						}
+	if (serverSide) {
+		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 = [{ key: ev.key, order: ev.order ?? 'asc' }];
+						sortState = [...sortState, {
+							key: ev.key,
+							order: ev.order ?? "asc"
+						}];
 					}
 				} else {
-					sortState = [];
+					sortState = [{
+						key: ev.key,
+						order: ev.order ?? "asc"
+					}];
 				}
-				return false;
-			});
-
-			api.intercept('filter-rows', (ev: any) => {
-				filterState = reduceServerFilterState(filterState, ev ?? {});
-				return false;
-			});
-		}
-
-		api.on('add-row', async (ev: any) => {
-			try {
-				await adapter.create(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) => {
-			try {
-				await adapter.delete(ev.id);
-				onchange?.({ action: 'delete', id: ev.id });
-				reload++;
-			} catch (e) {
-				onerror?.(e instanceof Error ? e.message : 'Delete failed');
+			} else {
+				sortState = [];
 			}
+			return false;
 		});
-
-		api.on('update-cell', async (ev: any) => {
-			try {
-				await adapter.update(ev.id, { [String(ev.column)]: ev.value });
-				onchange?.({ action: 'update', id: ev.id, column: ev.column, value: ev.value });
-			} catch (e) {
-				onerror?.(e instanceof Error ? e.message : 'Update failed');
-			}
+		api.intercept("filter-rows", (ev) => {
+			filterState = reduceServerFilterState(filterState, ev ?? {});
+			return false;
 		});
 	}
+	api.on("add-row", async (ev) => {
+		try {
+			await adapter.create(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) => {
+		try {
+			await adapter.delete(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) => {
+		try {
+			await adapter.update(ev.id, { [String(ev.column)]: ev.value });
+			onchange?.({
+				action: "update",
+				id: ev.id,
+				column: ev.column,
+				value: ev.value
+			});
+		} catch (e) {
+			onerror?.(e instanceof Error ? e.message : "Update failed");
+		}
+	});
+}
 </script>
 
 <div class="svark-container" class:svark-dark={isDark} style:height={heightStyle} bind:this={containerRef}>