@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Gridler/components/Gridler.svelte

@@ -1,445 +1,347 @@
-<script lang="ts">
-  // @ts-nocheck
-  import type { Snippet } from "svelte";
-  import type {
-    GridlerProps,
-    GridlerColumn,
-    GridlerCell,
-    GridlerTheme,
-    Item,
-    Selection,
-    VisibleRange,
-  } from "../types";
-  import { DEFAULT_THEME, DEFAULT_THEME_DARK } from "../types";
-  import GridlerCanvas from "./GridlerCanvas.svelte";
-  import { detectDarkMode, resolveSkeletonGridTheme } from "../utils/helpers";
-
-  export interface Props extends Partial<GridlerProps> {
-    columns: GridlerColumn[];
-    rows: number;
-    getCellContent: (item: Item) => GridlerCell;
-    onSearchToggle?: () => void;
-    onSearchClose?: () => void;
-    onHeaderContextMenu?: (colIndex: number, x: number, y: number) => void;
-    onGridMenuOpen?: (coords: {
-      x: number;
-      y: number;
-      item?: Record<string, unknown>;
-      column?: GridlerColumn;
-    }) => void;
-    onRowClick?: (row: number) => void;
-    onRowContextMenu?: (row: number, x: number, y: number) => void;
-    /** Resolve raw row data by row index for populating onCellEvent. */
-    getRowData?: (row: number) => Record<string, unknown> | undefined;
-    children?: Snippet;
-  }
-
-  const {
-    columns,
-    rows,
-    getCellContent,
-    onCellEdited,
-    onCellDblClick,
-    onRowAppended,
-    onColumnMoved,
-    onDelete,
-    onSelectionCleared,
-    width = "100%",
-    height = "400px",
-    rowHeight = 34,
-    headerHeight = 36,
-    fixedColumns = 0,
-    resizableColumns,
-    rowMarkers,
-    showSearch,
-    readonly,
-    searchValue = "",
-    onSearchValueChange,
-    onSearchToggle,
-    onSearchClose,
-    onHeaderContextMenu,
-    onMenuClick,
-    onGridMenuOpen,
-    onRowClick,
-    onRowContextMenu,
-    theme = {},
-    selection = { type: "none" } as Selection,
-    onSelectionChange,
-    onVisibleRangeChange,
-    // GridCommonProps additions
-    onCellEvent,
-    onGridEvent,
-    onSortOrderChange,
-    sortOrder,
-    onFilterChange: _onFilterChange,
-    filters: _filters,
-    selectedItems: _selectedItems,
-    onSelectedItemsChange: _onSelectedItemsChange,
-    getRowData,
-    settings,
-    children,
-  }: Props = $props();
-
-  // ── Settings resolution (flat props win over settings object) ────────────
-
-  const resolvedReadonly = $derived(readonly ?? settings?.readonly ?? false);
-  const resolvedResizableColumns = $derived(resizableColumns ?? settings?.resizableColumns ?? true);
-  const resolvedShowSearch = $derived(showSearch ?? settings?.showSearch ?? false);
-  const resolvedRowMarkers = $derived<"checkbox" | "number" | "none">(
-    rowMarkers ??
-      (settings?.showRowMarkers
-        ? (settings?.rowMarkerType ?? "checkbox")
-        : (settings?.rowMarkerType ?? "none")),
-  );
-
-  // ── Theme ─────────────────────────────────────────────────────────────────────
-
-  let isDarkMode = $state(false);
-  let resolvedSkeletonTheme = $state<GridlerTheme>(DEFAULT_THEME);
-
-  $effect(() => {
-    isDarkMode = detectDarkMode();
-    resolvedSkeletonTheme =
-      resolveSkeletonGridTheme(isDarkMode) ??
-      (isDarkMode ? DEFAULT_THEME_DARK : DEFAULT_THEME);
-    const mo = new MutationObserver(() => {
-      isDarkMode = detectDarkMode();
-      resolvedSkeletonTheme =
-        resolveSkeletonGridTheme(isDarkMode) ??
-        (isDarkMode ? DEFAULT_THEME_DARK : DEFAULT_THEME);
-    });
-    const opts: MutationObserverInit = {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"],
-    };
-    mo.observe(document.documentElement, opts);
-    mo.observe(document.body, opts);
-    return () => mo.disconnect();
-  });
-
-  const baseTheme: GridlerTheme = $derived(resolvedSkeletonTheme);
-  const mergedTheme: GridlerTheme = $derived({ ...baseTheme, ...theme });
-
-  // ── Selection / editing state ────────────────────────────────────────────────
-
-  let currentSelection = $state<Selection>({ type: "none" });
-  let focusedCell = $state<Item | null>(null);
-
-  $effect(() => {
-    if (!selection || selection.type === "none") return;
-    currentSelection = selection;
-  });
-  let isEditing = $state(false);
-  let editingCell = $state<Item | null>(null);
-
-  let canvasComponent: ReturnType<typeof GridlerCanvas> | undefined = $state();
-
-  // ── Editing helpers ───────────────────────────────────────────────────────────
-
-  function beginEdit(cell: Item) {
-    const cellContent = getCellContent(cell);
-    if (cellContent.readonly) return;
-    editingCell = cell;
-    isEditing = true;
-  }
-
-  function cancelEdit() {
-    isEditing = false;
-    editingCell = null;
-  }
-
-  function handleEditComplete(value: string) {
-    if (editingCell) {
-      const cell = getCellContent(editingCell);
-      const newCell: GridlerCell = { ...cell, displayData: value, data: value };
-      onCellEdited?.(editingCell, newCell);
-    }
-    cancelEdit();
-  }
-
-  function getSelectionRowData(sel: Selection): Record<string, unknown>[] | undefined {
-    if (!getRowData) return undefined;
-    if (sel.type === "cell") {
-      const d = getRowData(sel.item[1]);
-      return d ? [d] : undefined;
-    }
-    if (sel.type === "row") {
-      const items = sel.rows.map(getRowData).filter((r): r is Record<string, unknown> => r !== undefined);
-      return items.length > 0 ? items : undefined;
-    }
-    if (sel.type === "range") {
-      const minRow = Math.min(sel.start[1], sel.end[1]);
-      const maxRow = Math.max(sel.start[1], sel.end[1]);
-      const items: Record<string, unknown>[] = [];
-      for (let i = minRow; i <= maxRow; i++) {
-        const d = getRowData(i);
-        if (d) items.push(d);
-      }
-      return items.length > 0 ? items : undefined;
-    }
-    return undefined;
-  }
-
-  // ── Row toggle (checkbox / number markers) ────────────────────────────────────
-
-  function handleRowToggle(row: number) {
-    const sel = canvasComponent?.getCurrentSelection() ?? currentSelection;
-    let newSel: Selection;
-    if (sel.type === "row" && sel.rows.includes(row)) {
-      const newRows = sel.rows.filter((r) => r !== row);
-      newSel =
-        newRows.length > 0 ? { type: "row", rows: newRows } : { type: "none" };
-    } else if (sel.type === "row") {
-      newSel = { type: "row", rows: [...sel.rows, row] };
-    } else {
-      newSel = { type: "row", rows: [row] };
-    }
-    currentSelection = newSel;
-    canvasComponent?.setCurrentSelection(newSel);
-    onSelectionChange?.(newSel, getSelectionRowData(newSel));
-  }
-
-  // ── Clipboard ────────────────────────────────────────────────────────────────
-
-  async function copySelection(): Promise<void> {
-    const lines: string[] = [];
-    const sel = canvasComponent?.getCurrentSelection() ?? currentSelection;
-
-    if (sel.type === "cell") {
-      lines.push(getCellContent(sel.item).displayData);
-    } else if (sel.type === "range") {
-      const [startCol, startRow] = sel.start;
-      const [endCol, endRow] = sel.end;
-      const minCol = Math.min(startCol, endCol);
-      const maxCol = Math.max(startCol, endCol);
-      const minRow = Math.min(startRow, endRow);
-      const maxRow = Math.max(startRow, endRow);
-      for (let row = minRow; row <= maxRow; row++) {
-        const rowData: string[] = [];
-        for (let col = minCol; col <= maxCol; col++) {
-          rowData.push(getCellContent([col, row]).displayData);
-        }
-        lines.push(rowData.join("\t"));
-      }
-    } else if (sel.type === "row") {
-      for (const row of sel.rows) {
-        const rowData = columns.map(
-          (_, col) => getCellContent([col, row]).displayData,
-        );
-        lines.push(rowData.join("\t"));
-      }
-    } else if (sel.type === "column") {
-      for (let row = 0; row < rows; row++) {
-        const rowData = sel.columns.map(
-          (col) => getCellContent([col, row]).displayData,
-        );
-        lines.push(rowData.join("\t"));
-      }
-    }
-
-    if (lines.length > 0) {
-      try {
-        await navigator.clipboard.writeText(lines.join("\n"));
-        canvasComponent?.setAnnouncement(
-          `Copied ${lines.length} row${lines.length > 1 ? "s" : ""} to clipboard`,
-        );
-      } catch {
-        canvasComponent?.setAnnouncement("Clipboard access denied");
-      }
-    }
-  }
-
-  async function pasteFromClipboard(): Promise<void> {
-    if (resolvedReadonly) return;
-    const fc = canvasComponent?.getFocusedCell() ?? focusedCell;
-    if (!fc) return;
-    let text: string;
-    try {
-      text = await navigator.clipboard.readText();
-    } catch {
-      canvasComponent?.setAnnouncement("Clipboard access denied");
-      return;
-    }
-    const pastedRows = text.split("\n").map((line) => line.split("\t"));
-    const [startCol, startRow] = fc;
-
-    for (let r = 0; r < pastedRows.length; r++) {
-      for (let c = 0; c < pastedRows[r].length; c++) {
-        const col = startCol + c;
-        const row = startRow + r;
-        if (col >= columns.length || row >= rows) continue;
-        const item: Item = [col, row];
-        const cell = getCellContent(item);
-        if (!cell.readonly && cell.allowEditing !== false) {
-          const newCell: GridlerCell = {
-            ...cell,
-            displayData: pastedRows[r][c],
-            data: pastedRows[r][c],
-          };
-          onCellEdited?.(item, newCell);
-        }
-      }
-    }
-    canvasComponent?.setAnnouncement(
-      `Pasted ${pastedRows.length} row${pastedRows.length > 1 ? "s" : ""}`,
-    );
-  }
-
-  // ── Keyboard handler ──────────────────────────────────────────────────────────
-
-  function handleKeyDown(e: KeyboardEvent) {
-    if (!canvasComponent?.getHasFocus()) return;
-    onGridEvent?.("keydown", undefined, undefined, { x: 0, y: 0, code: e.key });
-
-    // Search toggle
-    if ((e.ctrlKey || e.metaKey) && e.key === "f") {
-      onSearchToggle?.();
-      e.preventDefault();
-      return;
-    }
-
-    // Copy/paste shortcuts
-    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
-      copySelection();
-      e.preventDefault();
-      return;
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
-      pasteFromClipboard();
-      e.preventDefault();
-      return;
-    }
-    if ((e.ctrlKey || e.metaKey) && e.key === "a") {
-      if (rows > 0 && columns.length > 0) {
-        const newSel: Selection = {
-          type: "range",
-          start: [0, 0],
-          end: [columns.length - 1, rows - 1],
-        };
-        currentSelection = newSel;
-        canvasComponent?.setCurrentSelection(newSel);
-        onSelectionChange?.(newSel, getSelectionRowData(newSel));
-        canvasComponent?.setAnnouncement("All cells selected");
-      }
-      e.preventDefault();
-      return;
-    }
-
-    focusedCell = canvasComponent?.getFocusedCell() ?? focusedCell;
-    if (!focusedCell) return;
-
-    const [col, row] = focusedCell;
-    let newCol = col;
-    let newRow = row;
-
-    switch (e.key) {
-      case "ArrowUp":
-        newRow = Math.max(0, row - 1);
-        e.preventDefault();
-        break;
-      case "ArrowDown":
-        newRow = Math.min(rows - 1, row + 1);
-        e.preventDefault();
-        break;
-      case "ArrowLeft":
-        newCol = Math.max(0, col - 1);
-        e.preventDefault();
-        break;
-      case "ArrowRight":
-        newCol = Math.min(columns.length - 1, col + 1);
-        e.preventDefault();
-        break;
-      case "Enter":
-        if (!resolvedReadonly) {
-          beginEdit(focusedCell);
-        }
-        onCellEvent?.("enter_key", getRowData?.(row) ?? {}, columns[col] ?? { id: "", title: "" });
-        e.preventDefault();
-        return;
-      case "Escape": {
-        cancelEdit();
-        const sel = canvasComponent?.getCurrentSelection() ?? currentSelection;
-        if (sel.type !== "none") {
-          onSelectionCleared?.();
-        }
-        return;
-      }
-      case "Tab":
-        if (e.shiftKey) {
-          newCol = col - 1;
-          if (newCol < 0) {
-            newCol = columns.length - 1;
-            newRow = Math.max(0, row - 1);
-          }
-        } else {
-          newCol = col + 1;
-          if (newCol >= columns.length) {
-            newCol = 0;
-            newRow = Math.min(rows - 1, row + 1);
-            onRowAppended?.();
-          }
-        }
-        onCellEvent?.("tab_key", getRowData?.(row) ?? {}, columns[col] ?? { id: "", title: "" });
-        e.preventDefault();
-        break;
-      case "Delete":
-      case "Backspace": {
-        if (!resolvedReadonly) {
-          const delSel =
-            canvasComponent?.getCurrentSelection() ?? currentSelection;
-          if (delSel.type !== "none") {
-            onDelete?.(delSel);
-          }
-        }
-        onCellEvent?.("delete_key", getRowData?.(row) ?? {}, columns[col] ?? { id: "", title: "" });
-        return;
-      }
-      default:
-        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !resolvedReadonly) {
-          beginEdit(focusedCell);
-        }
-        return;
-    }
-
-    if (newCol !== col || newRow !== row) {
-      const newFocusedCell: Item = [newCol, newRow];
-      focusedCell = newFocusedCell;
-      canvasComponent?.setFocusedCell(newFocusedCell);
-
-      const newSel: Selection = { type: "cell", item: newFocusedCell };
-      currentSelection = newSel;
-      canvasComponent?.setCurrentSelection(newSel);
-      onSelectionChange?.(newSel, getSelectionRowData(newSel));
-      canvasComponent?.setAnnouncement(
-        `Row ${newRow + 1}, column ${columns[newCol]?.title ?? newCol + 1}`,
-      );
-      canvasComponent?.scrollCellIntoView(newFocusedCell);
-    }
-  }
-
-  // ── Visible range / grid events ───────────────────────────────────────────────
-
-  function handleVisibleRangeChange(range: VisibleRange) {
-    onVisibleRangeChange?.(range);
-    onGridEvent?.("scroll", undefined, undefined, undefined, { row: range.firstRow, column: range.firstCol });
-  }
-
-  async function handleMenuOpen(d: {
-    x: number;
-    y: number;
-    item?: Record<string, unknown>;
-    column?: GridlerColumn;
-  }) {
-    if (onMenuClick) {
-      await onMenuClick(
-        d.item,
-        d.column,
-        { x: d.x, y: d.y },
-      );
-      return;
-    }
-    onGridMenuOpen?.(d);
-  }
+<script lang="ts">import { DEFAULT_THEME, DEFAULT_THEME_DARK } from "../types";
+import GridlerCanvas from "./GridlerCanvas.svelte";
+import { detectDarkMode, resolveSkeletonGridTheme } from "../utils/helpers";
+const { columns, rows, getCellContent, onCellEdited, onCellDblClick, onRowAppended, onColumnMoved, onDelete, onSelectionCleared, width = "100%", height = "400px", rowHeight = 34, headerHeight = 36, fixedColumns = 0, resizableColumns, rowMarkers, showSearch, readonly, searchValue = "", onSearchValueChange, onSearchToggle, onSearchClose, onHeaderContextMenu, onMenuClick, onGridMenuOpen, onRowClick, onRowContextMenu, theme = {}, selection = { type: "none" }, onSelectionChange, onVisibleRangeChange, onCellEvent, onGridEvent, onSortOrderChange, sortOrder, onFilterChange: _onFilterChange, filters: _filters, selectedItems: _selectedItems, onSelectedItemsChange: _onSelectedItemsChange, getRowData, settings, children } = $props();
+// ── Settings resolution (flat props win over settings object) ────────────
+const resolvedReadonly = $derived(readonly ?? settings?.readonly ?? false);
+const resolvedResizableColumns = $derived(resizableColumns ?? settings?.resizableColumns ?? true);
+const resolvedShowSearch = $derived(showSearch ?? settings?.showSearch ?? false);
+const resolvedRowMarkers = $derived(rowMarkers ?? (settings?.showRowMarkers ? settings?.rowMarkerType ?? "checkbox" : settings?.rowMarkerType ?? "none"));
+// ── Theme ─────────────────────────────────────────────────────────────────────
+let isDarkMode = $state(false);
+let resolvedSkeletonTheme = $state(DEFAULT_THEME);
+// Both isDarkMode and resolvedSkeletonTheme are derived from a local `dark`
+// value rather than read back from isDarkMode itself, so this effect never
+// tracks its own write target — avoids tearing down/recreating the
+// MutationObserver on an incidental extra run.
+$effect(() => {
+	const dark = detectDarkMode();
+	isDarkMode = dark;
+	resolvedSkeletonTheme = resolveSkeletonGridTheme(dark) ?? (dark ? DEFAULT_THEME_DARK : DEFAULT_THEME);
+	const mo = new MutationObserver(() => {
+		const dark = detectDarkMode();
+		isDarkMode = dark;
+		resolvedSkeletonTheme = resolveSkeletonGridTheme(dark) ?? (dark ? DEFAULT_THEME_DARK : DEFAULT_THEME);
+	});
+	const opts = {
+		attributes: true,
+		attributeFilter: ["class", "data-theme"]
+	};
+	mo.observe(document.documentElement, opts);
+	mo.observe(document.body, opts);
+	return () => mo.disconnect();
+});
+const baseTheme = $derived(resolvedSkeletonTheme);
+const mergedTheme = $derived({
+	...baseTheme,
+	...theme
+});
+// ── Selection / editing state ────────────────────────────────────────────────
+let currentSelection = $state({ type: "none" });
+let focusedCell = $state(null);
+$effect(() => {
+	if (!selection || selection.type === "none") return;
+	currentSelection = selection;
+});
+let isEditing = $state(false);
+let editingCell = $state(null);
+let canvasComponent = $state();
+// ── Editing helpers ───────────────────────────────────────────────────────────
+function beginEdit(cell) {
+	const cellContent = getCellContent(cell);
+	if (cellContent.readonly) return;
+	editingCell = cell;
+	isEditing = true;
+}
+function cancelEdit() {
+	isEditing = false;
+	editingCell = null;
+}
+function handleEditComplete(value) {
+	if (editingCell) {
+		const cell = getCellContent(editingCell);
+		const newCell = {
+			...cell,
+			displayData: value,
+			data: value
+		};
+		onCellEdited?.(editingCell, newCell);
+	}
+	cancelEdit();
+}
+function getSelectionRowData(sel) {
+	if (!getRowData) return undefined;
+	if (sel.type === "cell") {
+		const d = getRowData(sel.item[1]);
+		return d ? [d] : undefined;
+	}
+	if (sel.type === "row") {
+		const items = sel.rows.map(getRowData).filter((r) => r !== undefined);
+		return items.length > 0 ? items : undefined;
+	}
+	if (sel.type === "range") {
+		const minRow = Math.min(sel.start[1], sel.end[1]);
+		const maxRow = Math.max(sel.start[1], sel.end[1]);
+		const items = [];
+		for (let i = minRow; i <= maxRow; i++) {
+			const d = getRowData(i);
+			if (d) items.push(d);
+		}
+		return items.length > 0 ? items : undefined;
+	}
+	return undefined;
+}
+// ── Row toggle (checkbox / number markers) ────────────────────────────────────
+function handleRowToggle(row) {
+	const sel = canvasComponent?.getCurrentSelection() ?? currentSelection;
+	let newSel;
+	if (sel.type === "row" && sel.rows.includes(row)) {
+		const newRows = sel.rows.filter((r) => r !== row);
+		newSel = newRows.length > 0 ? {
+			type: "row",
+			rows: newRows
+		} : { type: "none" };
+	} else if (sel.type === "row") {
+		newSel = {
+			type: "row",
+			rows: [...sel.rows, row]
+		};
+	} else {
+		newSel = {
+			type: "row",
+			rows: [row]
+		};
+	}
+	currentSelection = newSel;
+	canvasComponent?.setCurrentSelection(newSel);
+	onSelectionChange?.(newSel, getSelectionRowData(newSel));
+}
+// ── Clipboard ────────────────────────────────────────────────────────────────
+async function copySelection() {
+	const lines = [];
+	const sel = canvasComponent?.getCurrentSelection() ?? currentSelection;
+	if (sel.type === "cell") {
+		lines.push(getCellContent(sel.item).displayData);
+	} else if (sel.type === "range") {
+		const [startCol, startRow] = sel.start;
+		const [endCol, endRow] = sel.end;
+		const minCol = Math.min(startCol, endCol);
+		const maxCol = Math.max(startCol, endCol);
+		const minRow = Math.min(startRow, endRow);
+		const maxRow = Math.max(startRow, endRow);
+		for (let row = minRow; row <= maxRow; row++) {
+			const rowData = [];
+			for (let col = minCol; col <= maxCol; col++) {
+				rowData.push(getCellContent([col, row]).displayData);
+			}
+			lines.push(rowData.join("	"));
+		}
+	} else if (sel.type === "row") {
+		for (const row of sel.rows) {
+			const rowData = columns.map((_, col) => getCellContent([col, row]).displayData);
+			lines.push(rowData.join("	"));
+		}
+	} else if (sel.type === "column") {
+		for (let row = 0; row < rows; row++) {
+			const rowData = sel.columns.map((col) => getCellContent([col, row]).displayData);
+			lines.push(rowData.join("	"));
+		}
+	}
+	if (lines.length > 0) {
+		try {
+			await navigator.clipboard.writeText(lines.join("\n"));
+			canvasComponent?.setAnnouncement(`Copied ${lines.length} row${lines.length > 1 ? "s" : ""} to clipboard`);
+		} catch {
+			canvasComponent?.setAnnouncement("Clipboard access denied");
+		}
+	}
+}
+async function pasteFromClipboard() {
+	if (resolvedReadonly) return;
+	const fc = canvasComponent?.getFocusedCell() ?? focusedCell;
+	if (!fc) return;
+	let text;
+	try {
+		text = await navigator.clipboard.readText();
+	} catch {
+		canvasComponent?.setAnnouncement("Clipboard access denied");
+		return;
+	}
+	const pastedRows = text.split("\n").map((line) => line.split("	"));
+	const [startCol, startRow] = fc;
+	for (let r = 0; r < pastedRows.length; r++) {
+		for (let c = 0; c < pastedRows[r].length; c++) {
+			const col = startCol + c;
+			const row = startRow + r;
+			if (col >= columns.length || row >= rows) continue;
+			const item = [col, row];
+			const cell = getCellContent(item);
+			if (!cell.readonly && cell.allowEditing !== false) {
+				const newCell = {
+					...cell,
+					displayData: pastedRows[r][c],
+					data: pastedRows[r][c]
+				};
+				onCellEdited?.(item, newCell);
+			}
+		}
+	}
+	canvasComponent?.setAnnouncement(`Pasted ${pastedRows.length} row${pastedRows.length > 1 ? "s" : ""}`);
+}
+// ── Keyboard handler ──────────────────────────────────────────────────────────
+function handleKeyDown(e) {
+	if (!canvasComponent?.getHasFocus()) return;
+	onGridEvent?.("keydown", undefined, undefined, {
+		x: 0,
+		y: 0,
+		code: e.key
+	});
+	// Search toggle
+	if ((e.ctrlKey || e.metaKey) && e.key === "f") {
+		onSearchToggle?.();
+		e.preventDefault();
+		return;
+	}
+	// Copy/paste shortcuts
+	if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+		copySelection();
+		e.preventDefault();
+		return;
+	}
+	if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+		pasteFromClipboard();
+		e.preventDefault();
+		return;
+	}
+	if ((e.ctrlKey || e.metaKey) && e.key === "a") {
+		if (rows > 0 && columns.length > 0) {
+			const newSel = {
+				type: "range",
+				start: [0, 0],
+				end: [columns.length - 1, rows - 1]
+			};
+			currentSelection = newSel;
+			canvasComponent?.setCurrentSelection(newSel);
+			onSelectionChange?.(newSel, getSelectionRowData(newSel));
+			canvasComponent?.setAnnouncement("All cells selected");
+		}
+		e.preventDefault();
+		return;
+	}
+	focusedCell = canvasComponent?.getFocusedCell() ?? focusedCell;
+	if (!focusedCell) return;
+	const [col, row] = focusedCell;
+	let newCol = col;
+	let newRow = row;
+	switch (e.key) {
+		case "ArrowUp":
+			newRow = Math.max(0, row - 1);
+			e.preventDefault();
+			break;
+		case "ArrowDown":
+			newRow = Math.min(rows - 1, row + 1);
+			e.preventDefault();
+			break;
+		case "ArrowLeft":
+			newCol = Math.max(0, col - 1);
+			e.preventDefault();
+			break;
+		case "ArrowRight":
+			newCol = Math.min(columns.length - 1, col + 1);
+			e.preventDefault();
+			break;
+		case "Enter":
+			if (!resolvedReadonly) {
+				beginEdit(focusedCell);
+			}
+			onCellEvent?.("enter_key", getRowData?.(row) ?? {}, columns[col] ?? {
+				id: "",
+				title: ""
+			});
+			e.preventDefault();
+			return;
+		case "Escape": {
+			cancelEdit();
+			const sel = canvasComponent?.getCurrentSelection() ?? currentSelection;
+			if (sel.type !== "none") {
+				onSelectionCleared?.();
+			}
+			return;
+		}
+		case "Tab":
+			if (e.shiftKey) {
+				newCol = col - 1;
+				if (newCol < 0) {
+					newCol = columns.length - 1;
+					newRow = Math.max(0, row - 1);
+				}
+			} else {
+				newCol = col + 1;
+				if (newCol >= columns.length) {
+					newCol = 0;
+					newRow = Math.min(rows - 1, row + 1);
+					onRowAppended?.();
+				}
+			}
+			onCellEvent?.("tab_key", getRowData?.(row) ?? {}, columns[col] ?? {
+				id: "",
+				title: ""
+			});
+			e.preventDefault();
+			break;
+		case "Delete":
+		case "Backspace": {
+			if (!resolvedReadonly) {
+				const delSel = canvasComponent?.getCurrentSelection() ?? currentSelection;
+				if (delSel.type !== "none") {
+					onDelete?.(delSel);
+				}
+			}
+			onCellEvent?.("delete_key", getRowData?.(row) ?? {}, columns[col] ?? {
+				id: "",
+				title: ""
+			});
+			return;
+		}
+		default:
+			if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !resolvedReadonly) {
+				beginEdit(focusedCell);
+			}
+			return;
+	}
+	if (newCol !== col || newRow !== row) {
+		const newFocusedCell = [newCol, newRow];
+		focusedCell = newFocusedCell;
+		canvasComponent?.setFocusedCell(newFocusedCell);
+		const newSel = {
+			type: "cell",
+			item: newFocusedCell
+		};
+		currentSelection = newSel;
+		canvasComponent?.setCurrentSelection(newSel);
+		onSelectionChange?.(newSel, getSelectionRowData(newSel));
+		canvasComponent?.setAnnouncement(`Row ${newRow + 1}, column ${columns[newCol]?.title ?? newCol + 1}`);
+		canvasComponent?.scrollCellIntoView(newFocusedCell);
+	}
+}
+// ── Visible range / grid events ───────────────────────────────────────────────
+function handleVisibleRangeChange(range) {
+	onVisibleRangeChange?.(range);
+	onGridEvent?.("scroll", undefined, undefined, undefined, {
+		row: range.firstRow,
+		column: range.firstCol
+	});
+}
+async function handleMenuOpen(d) {
+	if (onMenuClick) {
+		await onMenuClick(d.item, d.column, {
+			x: d.x,
+			y: d.y
+		});
+		return;
+	}
+	onGridMenuOpen?.(d);
+}
 </script>
 
 <GridlerCanvas