@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/SvarkGrid/internal/SvarkGridView.svelte

@@ -1,549 +1,387 @@
-<script lang="ts">
-	/* eslint-disable @typescript-eslint/no-explicit-any */
-	import { Grid, Willow, WillowDark } from '@svar-ui/svelte-grid';
-	import type { IApi } from '@svar-ui/svelte-grid';
-	import type { Snippet } from 'svelte';
-	import BetterMenu from '../../BetterMenu/BetterMenu.svelte';
-	import type { BetterMenuInstance } from '../../BetterMenu/types';
-	import SvarkContextMenu from '../components/SvarkContextMenu.svelte';
-	import SvarkInfiniteLoader from '../components/SvarkInfiniteLoader.svelte';
-	import SvarkPager from '../components/SvarkPager.svelte';
-	import SvarkSearchPopover from '../components/SvarkSearchPopover.svelte';
-	import SvarkTopBar from '../components/SvarkTopBar.svelte';
-	import type { GridColumn, GridCommonProps } from '../../Types/generic_grid';
-	import type {
-		IColumnConfig,
-		SvarkContextMenuContext,
-		SvarkContextMenuItem,
-		SvarkContextMenuProps
-	} from '../types.js';
-
-	export interface Props {
-		// sizing
-		heightStyle: string;
-		widthStyle: string;
-		menuProviderID: string;
-
-		// grid render
-		hideHeader: boolean;
-		columns: IColumnConfig[];
-		data: Array<Record<string, unknown>>;
-		loading: boolean;
-		error: string | null;
-		select: boolean;
-		multiselect: boolean;
-		gridDynamic?: any;
-		gridConfig: Record<string, unknown>;
-		onInit: (api: IApi) => void;
-
-		// top bar
-		topBarLeft?: Snippet;
-		topBarRight?: Snippet;
-		searchOpen: boolean;
-		searchValue: string;
-		onToggleSearch: () => void;
-		onSearchChange: (value: string) => void;
-
-		// infinite scroll
-		infiniteScroll: boolean;
-		infiniteLoading: boolean;
-		total: number;
-		onLoadNextPage: () => void;
-
-		// pager
-		showPager: boolean;
-		page: number;
-		totalPages: number;
-		pageStart: number;
-		pageEnd: number;
-		onPageFirst: () => void;
-		onPagePrev: () => void;
-		onPageNext: () => void;
-		onPageLast: () => void;
-
-		// row + context menu
-		gridApi: IApi | null;
-		uniqueID: string;
-		genericColumnsById: Record<string, GridColumn<Record<string, unknown>, unknown>>;
-		selectedIds: Array<string | number>;
-		onSelectedIdsChange: (ids: Array<string | number>) => void;
-		onRowClick?: (ctx: { id: string | number; row?: any; event: MouseEvent }) => void;
-		onRowDblClick?: (ctx: { id: string | number; row?: any; event: MouseEvent }) => void;
-		onRowContextMenu?: (ctx: { id: string | number; row?: any; event: MouseEvent }) => void;
-		contextMenuProps?: SvarkContextMenuProps;
-		onGridEvent?: GridCommonProps<Record<string, unknown>, unknown>['onGridEvent'];
-		onCellEvent?: GridCommonProps<Record<string, unknown>, unknown>['onCellEvent'];
-		onMenuClick?: GridCommonProps<Record<string, unknown>, unknown>['onMenuClick'];
-	}
-
-	const {
-		heightStyle,
-		widthStyle,
-		menuProviderID,
-		hideHeader,
-		columns,
-		data,
-		loading,
-		error,
-		select,
-		multiselect,
-		gridDynamic,
-		gridConfig,
-		onInit,
-		// top bar
-		topBarLeft,
-		topBarRight,
-		searchOpen,
-		searchValue,
-		onToggleSearch,
-		onSearchChange,
-		// infinite scroll
-		infiniteScroll,
-		infiniteLoading,
-		total,
-		onLoadNextPage,
-		// pager
-		showPager,
-		page,
-		totalPages,
-		pageStart,
-		pageEnd,
-		onPageFirst,
-		onPagePrev,
-		onPageNext,
-		onPageLast,
-		// row + context menu
-		gridApi,
-		uniqueID,
-		genericColumnsById,
-		selectedIds,
-		onSelectedIdsChange,
-		onRowClick,
-		onRowDblClick,
-		onRowContextMenu,
-		contextMenuProps,
-		onGridEvent,
-		onCellEvent,
-		onMenuClick
-	}: Props = $props();
-
-	// 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;
-			}
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Grid, Willow, WillowDark } from "@svar-ui/svelte-grid";
+import BetterMenu from "../../BetterMenu/BetterMenu.svelte";
+import SvarkContextMenu from "../components/SvarkContextMenu.svelte";
+import SvarkInfiniteLoader from "../components/SvarkInfiniteLoader.svelte";
+import SvarkPager from "../components/SvarkPager.svelte";
+import SvarkSearchPopover from "../components/SvarkSearchPopover.svelte";
+import SvarkTopBar from "../components/SvarkTopBar.svelte";
+const { heightStyle, widthStyle, menuProviderID, hideHeader, columns, data, loading, error, select, multiselect, gridDynamic, gridConfig, onInit, topBarLeft, topBarRight, searchOpen, searchValue, onToggleSearch, onSearchChange, infiniteScroll, infiniteLoading, total, onLoadNextPage, showPager, page, totalPages, pageStart, pageEnd, onPageFirst, onPagePrev, onPageNext, onPageLast, gridApi, uniqueID, genericColumnsById, selectedIds, onSelectedIdsChange, onRowClick, onRowDblClick, onRowContextMenu, contextMenuProps, onGridEvent, onCellEvent, onMenuClick } = $props();
+// 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;
 		}
-
-		update();
-		mq.addEventListener('change', update);
-
-		const observer = new MutationObserver(update);
-		observer.observe(html, { attributeFilter: ['class', 'style'] });
-
-		return () => {
-			mq.removeEventListener('change', update);
-			observer.disconnect();
-		};
-	});
-
-	let containerRef = $state<HTMLElement | undefined>();
-	let scrollContainerRef = $state<HTMLElement | null>(null);
-	let gridWrapperRef = $state<HTMLElement | null>(null);
-
-	type BetterMenuRef = {
-		show: (id: string, options?: Partial<Omit<BetterMenuInstance, 'id'>>) => void;
-		set: (id: string, options?: Partial<Omit<BetterMenuInstance, 'id'>>) => void;
-		hide: (id: string) => void;
-	};
-	let betterMenuRef = $state<BetterMenuRef | undefined>();
-
-	const searchMenuId = $derived(`${menuProviderID}:search`);
-	let searchMenuWasOpen = $state(false);
-
-	function openSearchMenu() {
-		if (!betterMenuRef) return;
-		const rect =
-			gridWrapperRef?.getBoundingClientRect() ?? containerRef?.getBoundingClientRect();
-		if (!rect) return;
-		betterMenuRef.set(searchMenuId, {
-			x: rect.left + 10,
-			y: rect.top + 10,
-			renderer: SearchMenu as any,
-			onHide: () => {
-				if (searchOpen) onToggleSearch();
-			}
-		});
 	}
-
-	$effect(() => {
-		if (!betterMenuRef) return;
-
-		if (searchOpen && !searchMenuWasOpen) {
-			searchMenuWasOpen = true;
-			queueMicrotask(() => openSearchMenu());
-			return;
-		}
-
-		if (!searchOpen && searchMenuWasOpen) {
-			searchMenuWasOpen = false;
-			betterMenuRef.hide(searchMenuId);
+	update();
+	mq.addEventListener("change", update);
+	const observer = new MutationObserver(update);
+	observer.observe(html, { attributeFilter: ["class", "style"] });
+	return () => {
+		mq.removeEventListener("change", update);
+		observer.disconnect();
+	};
+});
+let containerRef = $state();
+let scrollContainerRef = $state(null);
+let gridWrapperRef = $state(null);
+let betterMenuRef = $state();
+const searchMenuId = $derived(`${menuProviderID}:search`);
+let searchMenuWasOpen = $state(false);
+function openSearchMenu() {
+	if (!betterMenuRef) return;
+	const rect = gridWrapperRef?.getBoundingClientRect() ?? containerRef?.getBoundingClientRect();
+	if (!rect) return;
+	betterMenuRef.set(searchMenuId, {
+		x: rect.left + 10,
+		y: rect.top + 10,
+		renderer: SearchMenu,
+		onHide: () => {
+			if (searchOpen) onToggleSearch();
 		}
 	});
-
-	// While the search popover is open, keep it in sync with the grid search value.
-	// (Context-menu "Clear Search" updates the grid state but would not rerender the popover otherwise.)
-	$effect(() => {
-		if (!betterMenuRef) return;
-		if (!searchMenuWasOpen) return;
-		void searchValue;
-		betterMenuRef.set(searchMenuId, { renderer: SearchMenu as any });
-	});
-
-	// ── Row resolution (SVAR renders rows with data-id) ───────────────────────
-
-	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) return undefined;
-
-		const row = data.find((item) => String(item?.[uniqueID]) === attrId);
-		const idValue = row?.[uniqueID];
-		const resolvedId =
-			typeof idValue === 'string' || typeof idValue === 'number' ? idValue : attrId;
-
-		return { id: resolvedId, row };
+}
+$effect(() => {
+	if (!betterMenuRef) return;
+	if (searchOpen && !searchMenuWasOpen) {
+		searchMenuWasOpen = true;
+		queueMicrotask(() => openSearchMenu());
+		return;
 	}
-
-	function resolveColumnIdFromTarget(target: EventTarget | null): string | undefined {
-		if (!containerRef || !(target instanceof Element)) return undefined;
-		const cellEl = target.closest('[data-col-id], [data-header-id]') as HTMLElement | null;
-		if (!cellEl || !containerRef.contains(cellEl)) return undefined;
-
-		const colId = cellEl.getAttribute('data-col-id') ?? cellEl.getAttribute('data-header-id');
-		return colId ? String(colId) : undefined;
+	if (!searchOpen && searchMenuWasOpen) {
+		searchMenuWasOpen = false;
+		betterMenuRef.hide(searchMenuId);
 	}
-
-	function resolveGenericColumn(target: EventTarget | null) {
-		const columnId = resolveColumnIdFromTarget(target);
-		return columnId ? genericColumnsById[columnId] : undefined;
+});
+// While the search popover is open, keep it in sync with the grid search value.
+// (Context-menu "Clear Search" updates the grid state but would not rerender the popover otherwise.)
+$effect(() => {
+	if (!betterMenuRef) return;
+	if (!searchMenuWasOpen) return;
+	void searchValue;
+	betterMenuRef.set(searchMenuId, { renderer: SearchMenu });
+});
+// ── Row resolution (SVAR renders rows with data-id) ───────────────────────
+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) return undefined;
+	const row = data.find((item) => String(item?.[uniqueID]) === attrId);
+	const idValue = row?.[uniqueID];
+	const resolvedId = typeof idValue === "string" || typeof idValue === "number" ? idValue : attrId;
+	return {
+		id: resolvedId,
+		row
+	};
+}
+function resolveColumnIdFromTarget(target) {
+	if (!containerRef || !(target instanceof Element)) return undefined;
+	const cellEl = target.closest("[data-col-id], [data-header-id]");
+	if (!cellEl || !containerRef.contains(cellEl)) return undefined;
+	const colId = cellEl.getAttribute("data-col-id") ?? cellEl.getAttribute("data-header-id");
+	return colId ? String(colId) : undefined;
+}
+function resolveGenericColumn(target) {
+	const columnId = resolveColumnIdFromTarget(target);
+	return columnId ? genericColumnsById[columnId] : undefined;
+}
+// ── Context menu ──────────────────────────────────────────────────────────
+let contextMenuOpen = $state(false);
+let contextMenuX = $state(0);
+let contextMenuY = $state(0);
+let contextMenuEvent = $state(null);
+let contextMenuRowId = $state(null);
+let contextMenuRow = $state(null);
+function buildContextMenuCtx() {
+	if (!contextMenuEvent) return null;
+	return {
+		api: gridApi ?? undefined,
+		row: contextMenuRow,
+		rowId: contextMenuRowId,
+		selectedIds,
+		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;
 	}
-
-	// ── Context menu ──────────────────────────────────────────────────────────
-
-	let contextMenuOpen = $state(false);
-	let contextMenuX = $state(0);
-	let contextMenuY = $state(0);
-	let contextMenuEvent = $state<MouseEvent | null>(null);
-	let contextMenuRowId = $state<string | number | null>(null);
-	let contextMenuRow = $state<any | null>(null);
-
-	function buildContextMenuCtx(): SvarkContextMenuContext | null {
-		if (!contextMenuEvent) return null;
-		return {
-			api: gridApi ?? undefined,
-			row: contextMenuRow,
-			rowId: contextMenuRowId,
-			selectedIds,
-			data: data as any[],
-			event: contextMenuEvent
+	const ctx = buildContextMenuCtx();
+	closeContextMenu();
+	if (!ctx) return;
+	const menuItem = item;
+	menuItem.onselect?.(ctx);
+	contextMenuProps?.onselectitem?.(menuItem, ctx);
+}
+// ── Events: click/dblclick/contextmenu + keydown shortcuts ────────────────
+$effect(() => {
+	if (!containerRef) return;
+	const node = containerRef;
+	function handleClick(ev) {
+		const resolved = resolveRowFromTarget(ev.target);
+		const column = resolveGenericColumn(ev.target);
+		const coords = {
+			x: ev.clientX,
+			y: ev.clientY,
+			code: String(ev.button ?? 0)
 		};
+		onGridEvent?.("click", resolved?.row, column, coords, {
+			rowId: resolved?.id,
+			event: ev
+		});
+		if (resolved?.row && column) {
+			onCellEvent?.("click", resolved.row, column, coords, {
+				rowId: resolved.id,
+				event: ev
+			});
+		}
+		if (!resolved) return;
+		onRowClick?.({
+			...resolved,
+			event: ev
+		});
 	}
-
-	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) => ({ ...it, kind: (it as any).kind ?? 'item' }));
-	});
-
-	function closeContextMenu() {
-		contextMenuOpen = false;
-		contextMenuEvent = null;
-		contextMenuRowId = null;
-		contextMenuRow = null;
+	function handleDoubleClick(ev) {
+		const resolved = resolveRowFromTarget(ev.target);
+		const column = resolveGenericColumn(ev.target);
+		const coords = {
+			x: ev.clientX,
+			y: ev.clientY,
+			code: String(ev.button ?? 0)
+		};
+		onGridEvent?.("dblclick", resolved?.row, column, coords, {
+			rowId: resolved?.id,
+			event: ev
+		});
+		if (resolved?.row && column) {
+			onCellEvent?.("dblclick", resolved.row, column, coords, {
+				rowId: resolved.id,
+				event: ev
+			});
+		}
+		if (!resolved) return;
+		onRowDblClick?.({
+			...resolved,
+			event: ev
+		});
 	}
-
-	function handleContextMenuItem(item: SvarkContextMenuItem | { id: '__close__' }) {
-		if (item.id === '__close__') {
-			closeContextMenu();
+	function handleContextMenu(ev) {
+		// Only handle right-clicks on the grid surface itself, not on the toolbar/pager.
+		if (!containerRef || !(ev.target instanceof Element) || !ev.target.closest(".wx-grid") || !containerRef.contains(ev.target.closest(".wx-grid"))) {
 			return;
 		}
-		const ctx = buildContextMenuCtx();
-		closeContextMenu();
-		if (!ctx) return;
-		const menuItem = item as SvarkContextMenuItem;
-		menuItem.onselect?.(ctx);
-		contextMenuProps?.onselectitem?.(menuItem, ctx);
-	}
-
-	// ── Events: click/dblclick/contextmenu + keydown shortcuts ────────────────
-
-	$effect(() => {
-		if (!containerRef) return;
-		const node = containerRef;
-
-		function handleClick(ev: MouseEvent) {
-			const resolved = resolveRowFromTarget(ev.target);
-			const column = resolveGenericColumn(ev.target);
-			const coords = { x: ev.clientX, y: ev.clientY, code: String(ev.button ?? 0) };
-			onGridEvent?.('click', resolved?.row, column, coords, {
-				rowId: resolved?.id,
+		const resolved = resolveRowFromTarget(ev.target);
+		const column = resolveGenericColumn(ev.target);
+		const coords = {
+			x: ev.clientX,
+			y: ev.clientY,
+			code: String(ev.button ?? 2)
+		};
+		onGridEvent?.("contextmenu", resolved?.row, column, coords, {
+			rowId: resolved?.id,
+			event: ev
+		});
+		if (resolved?.row && column) {
+			onCellEvent?.("contextmenu", resolved.row, column, coords, {
+				rowId: resolved.id,
 				event: ev
 			});
-			if (resolved?.row && column) {
-				onCellEvent?.('click', resolved.row, column, coords, {
+		}
+		void onMenuClick?.(resolved?.row, column, coords);
+		if (resolved) onRowContextMenu?.({
+			...resolved,
+			event: ev
+		});
+		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
+			});
+			onSelectedIdsChange([resolved.id]);
+		}
+		contextMenuEvent = ev;
+		contextMenuX = ev.clientX;
+		contextMenuY = ev.clientY;
+		const ctxRowId = resolved?.id ?? selectedIds[0] ?? null;
+		const ctxRow = ctxRowId != null ? data.find((item) => String(item?.[uniqueID]) === String(ctxRowId)) ?? null : null;
+		contextMenuRowId = ctxRowId;
+		contextMenuRow = ctxRow;
+		contextMenuOpen = true;
+	}
+	function onKeyDown(ev) {
+		const resolved = resolveRowFromTarget(ev.target);
+		const column = resolveGenericColumn(ev.target);
+		const coords = {
+			x: 0,
+			y: 0,
+			code: ev.code || ev.key
+		};
+		onGridEvent?.("keydown", resolved?.row, column, coords, {
+			rowId: resolved?.id,
+			event: ev
+		});
+		if (resolved?.row && column) {
+			if (ev.key === "Enter") {
+				onCellEvent?.("enter_key", resolved.row, column, coords, {
 					rowId: resolved.id,
 					event: ev
 				});
 			}
-			if (!resolved) return;
-			onRowClick?.({ ...resolved, event: ev });
-		}
-
-		function handleDoubleClick(ev: MouseEvent) {
-			const resolved = resolveRowFromTarget(ev.target);
-			const column = resolveGenericColumn(ev.target);
-			const coords = { x: ev.clientX, y: ev.clientY, code: String(ev.button ?? 0) };
-			onGridEvent?.('dblclick', resolved?.row, column, coords, {
-				rowId: resolved?.id,
-				event: ev
-			});
-			if (resolved?.row && column) {
-				onCellEvent?.('dblclick', resolved.row, column, coords, {
+			if (ev.key === "Delete" || ev.key === "Backspace") {
+				onCellEvent?.("delete_key", resolved.row, column, coords, {
 					rowId: resolved.id,
 					event: ev
 				});
 			}
-			if (!resolved) return;
-			onRowDblClick?.({ ...resolved, event: ev });
-		}
-
-		function handleContextMenu(ev: MouseEvent) {
-			// Only handle right-clicks on the grid surface itself, not on the toolbar/pager.
-			if (
-				!containerRef ||
-				!(ev.target instanceof Element) ||
-				!ev.target.closest('.wx-grid') ||
-				!containerRef.contains(ev.target.closest('.wx-grid'))
-			) {
-				return;
-			}
-
-			const resolved = resolveRowFromTarget(ev.target);
-			const column = resolveGenericColumn(ev.target);
-			const coords = { x: ev.clientX, y: ev.clientY, code: String(ev.button ?? 2) };
-			onGridEvent?.('contextmenu', resolved?.row, column, coords, {
-				rowId: resolved?.id,
-				event: ev
-			});
-			if (resolved?.row && column) {
-				onCellEvent?.('contextmenu', resolved.row, column, coords, {
+			if (ev.key === "Tab") {
+				onCellEvent?.("tab_key", resolved.row, column, coords, {
 					rowId: resolved.id,
 					event: ev
 				});
 			}
-			void onMenuClick?.(resolved?.row, column, coords);
-			if (resolved) onRowContextMenu?.({ ...resolved, event: ev });
-
+		}
+		const key = ev.key?.toLowerCase?.() ?? "";
+		const isFind = (ev.ctrlKey || ev.metaKey) && !ev.altKey && !ev.shiftKey && key === "f";
+		if (isFind) {
 			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 });
-				onSelectedIdsChange([resolved.id]);
-			}
-
-			contextMenuEvent = ev;
-			contextMenuX = ev.clientX;
-			contextMenuY = ev.clientY;
-
-			const ctxRowId = (resolved?.id ?? selectedIds[0] ?? null) as string | number | null;
-			const ctxRow: Record<string, unknown> | null =
-				ctxRowId != null
-					? data.find((item) => String(item?.[uniqueID]) === String(ctxRowId)) ?? null
-					: null;
-
-			contextMenuRowId = ctxRowId;
-			contextMenuRow = ctxRow;
-			contextMenuOpen = true;
-		}
-
-		function onKeyDown(ev: KeyboardEvent) {
-			const resolved = resolveRowFromTarget(ev.target);
-			const column = resolveGenericColumn(ev.target);
-			const coords = { x: 0, y: 0, code: ev.code || ev.key };
-			onGridEvent?.('keydown', resolved?.row, column, coords, {
-				rowId: resolved?.id,
-				event: ev
-			});
-
-			if (resolved?.row && column) {
-				if (ev.key === 'Enter') {
-					onCellEvent?.('enter_key', resolved.row, column, coords, { rowId: resolved.id, event: ev });
-				}
-				if (ev.key === 'Delete' || ev.key === 'Backspace') {
-					onCellEvent?.('delete_key', resolved.row, column, coords, { rowId: resolved.id, event: ev });
-				}
-				if (ev.key === 'Tab') {
-					onCellEvent?.('tab_key', resolved.row, column, coords, { rowId: resolved.id, event: ev });
-				}
-			}
-
-			const key = ev.key?.toLowerCase?.() ?? '';
-			const isFind = (ev.ctrlKey || ev.metaKey) && !ev.altKey && !ev.shiftKey && key === 'f';
-			if (isFind) {
-				ev.preventDefault();
-				ev.stopPropagation();
-				onToggleSearch();
-				return;
-			}
-
-			if (searchOpen && ev.key === 'Escape') {
-				ev.preventDefault();
-				ev.stopPropagation();
-				onToggleSearch();
-				return;
-			}
-
-			if (contextMenuOpen && ev.key === 'Escape') {
-				ev.preventDefault();
-				ev.stopPropagation();
-				closeContextMenu();
-			}
+			onToggleSearch();
+			return;
 		}
-
-		node.addEventListener('click', handleClick);
-		node.addEventListener('dblclick', handleDoubleClick);
-		node.addEventListener('contextmenu', handleContextMenu);
-		node.addEventListener('keydown', onKeyDown, true);
-
-		return () => {
-			node.removeEventListener('click', handleClick);
-			node.removeEventListener('dblclick', handleDoubleClick);
-			node.removeEventListener('contextmenu', handleContextMenu);
-			node.removeEventListener('keydown', onKeyDown, true);
-		};
-	});
-
-	// ── Infinite scroll watchers (calls onLoadNextPage) ───────────────────────
-
-	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) {
-				onLoadNextPage();
-			}
+		if (searchOpen && ev.key === "Escape") {
+			ev.preventDefault();
+			ev.stopPropagation();
+			onToggleSearch();
 			return;
 		}
-
-		const { bottom } = containerRef.getBoundingClientRect();
-		if (bottom - window.innerHeight < 150) {
+		if (contextMenuOpen && ev.key === "Escape") {
+			ev.preventDefault();
+			ev.stopPropagation();
+			closeContextMenu();
+		}
+	}
+	node.addEventListener("click", handleClick);
+	node.addEventListener("dblclick", handleDoubleClick);
+	node.addEventListener("contextmenu", handleContextMenu);
+	node.addEventListener("keydown", onKeyDown, true);
+	return () => {
+		node.removeEventListener("click", handleClick);
+		node.removeEventListener("dblclick", handleDoubleClick);
+		node.removeEventListener("contextmenu", handleContextMenu);
+		node.removeEventListener("keydown", onKeyDown, true);
+	};
+});
+// ── Infinite scroll watchers (calls onLoadNextPage) ───────────────────────
+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) {
 			onLoadNextPage();
 		}
+		return;
 	}
-
-	$effect(() => {
-		if (!infiniteScroll || loading || infiniteLoading) return;
-		void data.length;
-		void total;
-
-		queueMicrotask(() => {
-			maybeLoadNextPage();
-		});
+	const { bottom } = containerRef.getBoundingClientRect();
+	if (bottom - window.innerHeight < 150) {
+		onLoadNextPage();
+	}
+}
+$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() {
-			onGridEvent?.(
-				'scroll',
-				undefined,
-				undefined,
-				{
-					x: scrollContainerRef?.scrollLeft ?? 0,
-					y: scrollContainerRef?.scrollTop ?? 0
-				},
-				undefined
-			);
-			maybeLoadNextPage();
-		}
-
-		function onViewportChange() {
-			onGridEvent?.(
-				'resize',
-				undefined,
-				undefined,
-				{
-					x: containerRef?.clientWidth ?? 0,
-					y: containerRef?.clientHeight ?? 0
-				},
-				undefined
-			);
-			maybeLoadNextPage();
-		}
-
-		window.addEventListener('scroll', onViewportChange, true);
-		window.addEventListener('resize', onViewportChange);
-
-		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 () => {
+});
+$effect(() => {
+	if (!infiniteScroll || !containerRef) return;
+	let scrollEl = null;
+	function attach(el) {
+		scrollEl = el;
+		scrollContainerRef = el;
+		el.addEventListener("scroll", onScroll);
+		queueMicrotask(onViewportChange);
+	}
+	function onScroll() {
+		onGridEvent?.("scroll", undefined, undefined, {
+			x: scrollContainerRef?.scrollLeft ?? 0,
+			y: scrollContainerRef?.scrollTop ?? 0
+		}, undefined);
+		maybeLoadNextPage();
+	}
+	function onViewportChange() {
+		onGridEvent?.("resize", undefined, undefined, {
+			x: containerRef?.clientWidth ?? 0,
+			y: containerRef?.clientHeight ?? 0
+		}, undefined);
+		maybeLoadNextPage();
+	}
+	window.addEventListener("scroll", onViewportChange, true);
+	window.addEventListener("resize", onViewportChange);
+	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();
-				scrollEl?.removeEventListener('scroll', onScroll);
-				window.removeEventListener('scroll', onViewportChange, true);
-				window.removeEventListener('resize', onViewportChange);
-				scrollContainerRef = null;
-			};
-		}
-
+			}
+		});
+		obs.observe(containerRef, {
+			childList: true,
+			subtree: true
+		});
 		return () => {
-			scrollEl?.removeEventListener('scroll', onScroll);
-			window.removeEventListener('scroll', onViewportChange, true);
-			window.removeEventListener('resize', onViewportChange);
+			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;
+	};
+});
 </script>
 
 {#snippet SearchMenu({ onClose }: { onClose: () => void })}