@warkypublic/svelix 0.1.44 → 0.1.47

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

@@ -1,1118 +1,723 @@
-<script lang="ts">
-  // @ts-nocheck
-  import type { Snippet } from "svelte";
-  import type {
-    GridlerColumn,
-    GridlerCell,
-    GridlerTheme,
-    Item,
-    Selection,
-    VisibleRange,
-    GridColumnSortOrder,
-  } from "../types";
-  import type { GridColumn } from "../../Types/generic_grid";
-  import {
-    calculateVisibleRange,
-    getColumnX,
-    getTotalHeight,
-    getCellFromPoint,
-    scrollToCell,
-    getResizeHandle,
-    getColumnFromX,
-  } from "../utils/scrolling";
-  import { computeEffectiveColumns } from "../utils/columns";
-  import {
-    renderFrame,
-    getScrollbarGeometry,
-  } from "../utils/canvasRender";
-  import { IMAGE_LOADED_EVENT } from "../renderers/ImageRenderer";
-  import type { GridlerRenderContext } from "../utils/canvasRender";
-  import GridlerEditor from "./GridlerEditor.svelte";
-  import GridlerSearch from "./GridlerSearch.svelte";
-
-  interface Props {
-    columns: GridlerColumn[];
-    rows: number;
-    getCellContent: (item: Item) => GridlerCell;
-    width: string;
-    height: string;
-    mergedTheme: GridlerTheme;
-    isDarkMode?: boolean;
-    headerHeight?: number;
-    rowHeight?: number;
-    readonly?: boolean;
-    fixedColumns?: number;
-    resizableColumns?: boolean;
-    rowMarkers?: "checkbox" | "number" | "none";
-    showSearch?: boolean;
-    searchValue?: string;
-    // editing state (driven by parent)
-    isEditing: boolean;
-    editingCell: Item | null;
-    // callbacks to parent
-    onBeginEdit: (cell: Item) => void;
-    onEditComplete: (value: string) => void;
-    onCancelEdit: () => void;
-    onRowToggle?: (row: number) => void;
-    onVisibleRangeChange?: (range: VisibleRange) => void;
-    onSelectionChange?: (sel: Selection) => void;
-    onCellDblClick?: (item: Item, cell: GridlerCell) => void;
-    onRowClick?: (row: number) => void;
-    onRowContextMenu?: (row: number, x: number, y: number) => void;
-    onColumnMoved?: (from: number, to: number) => void;
-    onCellEdited?: (item: Item, cell: GridlerCell) => void;
-    onDelete?: (sel: Selection) => void;
-    onRowAppended?: () => void;
-    onSelectionCleared?: () => void;
-    sortOrder?: GridColumnSortOrder;
-    onSortOrderChange?: (order: GridColumnSortOrder) => void;
-    onHeaderContextMenu?: (colIndex: number, x: number, y: number) => void;
-    onSearchValueChange?: (v: string) => void;
-    onSearchClose?: () => void;
-    onGridMenuOpen?: (coords: {
-      x: number;
-      y: number;
-      item?: Record<string, unknown>;
-      column?: GridColumn<Record<string, unknown>>;
-    }) => void;
-    onCellClick?: (item: Item) => void;
-    onCellHover?: (item: Item) => void;
-    onCellLeave?: (item: Item) => void;
-    onCellContextMenu?: (item: Item, x: number, y: number) => void;
-    onColumnResized?: (col: number, width: number) => void;
-    onGridResize?: (width: number, height: number) => void;
-    onGridEnter?: () => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    children?: Snippet;
-  }
-
-  const {
-    columns,
-    rows,
-    getCellContent,
-    width,
-    height,
-    mergedTheme,
-    isDarkMode: isDarkModeProp = false,
-    headerHeight = 36,
-    rowHeight = 34,
-    readonly = false,
-    fixedColumns = 0,
-    resizableColumns = true,
-    rowMarkers = "none",
-    showSearch = false,
-    searchValue = "",
-    isEditing,
-    editingCell,
-    onBeginEdit,
-    onEditComplete,
-    onCancelEdit,
-    onRowToggle,
-    onVisibleRangeChange,
-    onSelectionChange,
-    onCellDblClick,
-    onRowClick,
-    onRowContextMenu,
-    onColumnMoved,
-    onCellEdited: _onCellEdited,
-    onDelete: _onDelete,
-    onRowAppended: _onRowAppended,
-    onSelectionCleared: _onSelectionCleared,
-    sortOrder,
-    onSortOrderChange,
-    onHeaderContextMenu,
-    onSearchValueChange,
-    onSearchClose,
-    onGridMenuOpen,
-    onCellClick,
-    onCellHover,
-    onCellLeave,
-    onCellContextMenu,
-    onColumnResized,
-    onGridResize,
-    onGridEnter,
-    onkeydown,
-    children,
-  }: Props = $props();
-
-  // ── Internal state ───────────────────────────────────────────────────────────
-
-  let scrollX = $state(0);
-  let scrollY = $state(0);
-  let currentSelection = $state<Selection>({ type: "none" });
-  let focusedCell = $state<Item | null>(null);
-  let isDragging = $state(false);
-  let dragStart = $state<Item | null>(null);
-  let resizingColumn = $state<number | null>(null);
-  let resizeWidth = $state<number | null>(null);
-  let hoverResizeCol = $state<number | null>(null);
-  let draggingHeaderCol = $state<number | null>(null);
-  let dragHeaderCurrentX = $state(0);
-  let announcement = $state("");
-  let hasFocus = $state(false);
-  const gridId = `gridler-${Math.random().toString(36).slice(2, 10)}`;
-
-  let hoveredCell = $state<Item | null>(null);
-  let isDraggingVScrollbar = $state(false);
-  let isDraggingHScrollbar = $state(false);
-  let vScrollDragStartY = $state(0);
-  let hScrollDragStartX = $state(0);
-  let vScrollDragStartScroll = $state(0);
-  let hScrollDragStartScroll = $state(0);
-  let isHoveringVScrollbar = $state(false);
-  let isHoveringHScrollbar = $state(false);
-  let hoverMenuButton = $state(false);
-  let pendingGridMenuOpen = $state(false);
-  let hoverSortCol = $state<number | null>(null);
-  let touchStartClientX = $state(0);
-  let touchStartClientY = $state(0);
-  let touchStartScrollX = $state(0);
-  let touchStartScrollY = $state(0);
-  let isTouchScrolling = $state(false);
-
-  let containerRef: HTMLDivElement | undefined = $state();
-  let canvasRef: HTMLCanvasElement | undefined = $state();
-  let scrollRef: HTMLDivElement | undefined = $state();
-  let ctx: CanvasRenderingContext2D | null = $derived(
-    canvasRef?.getContext("2d") ?? null,
-  );
-
-  let containerWidth = $state(0);
-  let containerHeight = $state(0);
-
-  const canvasCursor = $derived(
-    resizingColumn !== null || hoverResizeCol !== null
-      ? "col-resize"
-      : hoverMenuButton || hoverSortCol !== null
-        ? "pointer"
-        : "default",
-  );
-
-  let drawPending = false;
-
-  const rowMarkerWidth = $derived(
-    rowMarkers !== "none" || !!onGridMenuOpen ? 40 : 0,
-  );
-
-  const effectiveColumns: GridlerColumn[] = $derived.by(() => {
-    const cols = resizingColumn !== null && resizeWidth !== null
-      ? columns.map((c, i) => i === resizingColumn ? { ...c, width: resizeWidth, grow: 0 } : c)
-      : columns;
-    return computeEffectiveColumns(cols, containerWidth, rowMarkerWidth);
-  });
-
-  const totalWidth = $derived.by(() => {
-    const cols = resizingColumn !== null && resizeWidth !== null
-      ? columns.map((c, i) => i === resizingColumn ? { ...c, width: resizeWidth } : c)
-      : columns;
-    return cols.reduce((sum, col) => sum + col.width, 0) + rowMarkerWidth;
-  });
-
-  const totalHeight = $derived(getTotalHeight(rows, rowHeight));
-
-  const visibleRange: VisibleRange = $derived.by(() => {
-    if (!containerWidth || !containerHeight) {
-      return { firstCol: 0, lastCol: 0, firstRow: 0, lastRow: 0 };
-    }
-    return calculateVisibleRange(
-      scrollX,
-      scrollY,
-      containerWidth,
-      containerHeight,
-      effectiveColumns,
-      rowHeight,
-      headerHeight,
-      rows,
-    );
-  });
-
-  const containerWidthStyle = $derived(
-    typeof width === "number" ? `${width}px` : width,
-  );
-  const containerHeightStyle = $derived(
-    typeof height === "number" ? `${height}px` : height,
-  );
-  const activeCellDescription = $derived.by(() => {
-    if (!focusedCell) {
-      return rows > 0 && columns.length > 0
-        ? "Use arrow keys to move between cells. On touch devices, swipe to scroll and tap to select."
-        : "No rows available.";
-    }
-
-    const [col, row] = focusedCell;
-    const columnTitle = columns[col]?.title ?? `Column ${col + 1}`;
-    const cell = getCellContent(focusedCell);
-    const value = `${cell.displayData ?? ""}`.trim();
-    return value
-      ? `Row ${row + 1}, ${columnTitle}, value ${value}`
-      : `Row ${row + 1}, ${columnTitle}, empty cell`;
-  });
-  const selectionDescription = $derived.by(() => {
-    switch (currentSelection.type) {
-      case "cell":
-        return "One cell selected.";
-      case "range":
-        return `Range selected from row ${currentSelection.start[1] + 1} to row ${currentSelection.end[1] + 1}.`;
-      case "row":
-        return `${currentSelection.rows.length} row${currentSelection.rows.length === 1 ? "" : "s"} selected.`;
-      case "column":
-        return `${currentSelection.columns.length} column${currentSelection.columns.length === 1 ? "" : "s"} selected.`;
-      default:
-        return "No selection.";
-    }
-  });
-
-  // ── Resize observer ───────────────────────────────────────────────────────────
-
-  $effect(() => {
-    if (!containerRef) return;
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        containerWidth = entry.contentRect.width;
-        containerHeight = entry.contentRect.height;
-        onGridResize?.(entry.contentRect.width, entry.contentRect.height);
-      }
-    });
-    observer.observe(containerRef);
-    return () => observer.disconnect();
-  });
-
-  // ── Image load repaint ────────────────────────────────────────────────────────
-
-  $effect(() => {
-    const handler = () => scheduleDraw();
-    document.addEventListener(IMAGE_LOADED_EVENT, handler);
-    return () => document.removeEventListener(IMAGE_LOADED_EVENT, handler);
-  });
-
-  // ── Document listener cleanup on destroy ─────────────────────────────────────
-  $effect(() => {
-    return () => {
-      document.removeEventListener("mousemove", handleDocumentMouseMove);
-      document.removeEventListener("mouseup", handleDocumentMouseUp);
-    };
-  });
-
-  // ── Render loop ───────────────────────────────────────────────────────────────
-
-  $effect(() => {
-    // Track reactive dependencies that should trigger a redraw.
-    const _deps = [visibleRange, searchValue, currentSelection, getCellContent, mergedTheme, isDarkModeProp, sortOrder];
-    void _deps;
-    if (ctx && containerWidth > 0 && containerHeight > 0) {
-      scheduleDraw();
-    }
-  });
-
-  $effect(() => {
-    onVisibleRangeChange?.(visibleRange);
-  });
-
-  function scheduleDraw() {
-    if (drawPending) return;
-    drawPending = true;
-    requestAnimationFrame(() => {
-      drawPending = false;
-      doRenderFrame();
-    });
-  }
-
-  function buildRenderContext(): GridlerRenderContext {
-    return {
-      containerWidth,
-      containerHeight,
-      headerHeight,
-      rowHeight,
-      rowMarkerWidth,
-      fixedColumns,
-      resizableColumns: resizableColumns ?? true,
-      effectiveColumns,
-      rows,
-      getCellContent,
-      searchValue: searchValue ?? "",
-      scrollX,
-      scrollY,
-      totalWidth,
-      totalHeight,
-      currentSelection,
-      mergedTheme,
-      isDarkMode: isDarkModeProp,
-      rowMarkers: rowMarkers ?? "none",
-      draggingHeaderCol,
-      dragHeaderCurrentX,
-      hoverResizeCol,
-      isDraggingVScrollbar,
-      isDraggingHScrollbar,
-      isHoveringVScrollbar,
-      isHoveringHScrollbar,
-      sortOrder,
-    };
-  }
-
-  function drawMenuButton() {
-    if (!ctx || !onGridMenuOpen || rowMarkerWidth <= 0) return;
-
-    // When rowMarkers is 'none', renderRowMarkers skips drawing the column.
-    // We need to fill the column background and draw the separator ourselves.
-    if (rowMarkers === "none") {
-      ctx.fillStyle = mergedTheme.bgHeader;
-      ctx.fillRect(0, 0, rowMarkerWidth, containerHeight);
-      ctx.strokeStyle = mergedTheme.borderColor;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.moveTo(rowMarkerWidth - 0.5, 0);
-      ctx.lineTo(rowMarkerWidth - 0.5, containerHeight);
-      ctx.stroke();
-    }
-
-    // Corner cell hover highlight.
-    if (hoverMenuButton) {
-      ctx.fillStyle = mergedTheme.bgHeaderHasFocus;
-      ctx.fillRect(0, 0, rowMarkerWidth, headerHeight);
-    }
-
-    // Burger icon (three lines).
-    const iconW = 14;
-    const startX = Math.round((rowMarkerWidth - iconW) / 2) + 0.5;
-    const midY = Math.round(headerHeight / 2) + 0.5;
-    ctx.strokeStyle = mergedTheme.foreground;
-    ctx.lineWidth = 1.5;
-    ctx.lineCap = "round";
-    ctx.globalAlpha = hoverMenuButton ? 1.0 : 0.5;
-    ctx.beginPath();
-    ctx.moveTo(startX, midY - 4);
-    ctx.lineTo(startX + iconW, midY - 4);
-    ctx.moveTo(startX, midY);
-    ctx.lineTo(startX + iconW, midY);
-    ctx.moveTo(startX, midY + 4);
-    ctx.lineTo(startX + iconW, midY + 4);
-    ctx.stroke();
-    ctx.globalAlpha = 1.0;
-  }
-
-  function doRenderFrame() {
-    if (!ctx || !canvasRef) return;
-
-    const dpr = window.devicePixelRatio || 1;
-    const canvasWidth = containerWidth;
-    const canvasHeight = containerHeight;
-
-    canvasRef.width = canvasWidth * dpr;
-    canvasRef.height = canvasHeight * dpr;
-    canvasRef.style.width = `${canvasWidth}px`;
-    canvasRef.style.height = `${canvasHeight}px`;
-
-    const rc = buildRenderContext();
-    renderFrame(ctx, rc, visibleRange);
-    drawMenuButton();
-  }
-
-  // ── Exposed methods ───────────────────────────────────────────────────────────
-
-  export function scrollCellIntoView(item: Item): void {
-    if (!scrollRef) return;
-    const scrollTarget = scrollToCell(
-      item,
-      effectiveColumns,
-      rowHeight,
-      headerHeight,
-      containerWidth,
-      containerHeight,
-    );
-    if (scrollTarget) {
-      scrollRef.scrollLeft = scrollTarget.scrollX;
-      scrollRef.scrollTop = scrollTarget.scrollY;
-    }
-  }
-
-  export function getFocusedCell(): Item | null {
-    return focusedCell;
-  }
-
-  export function setFocusedCell(cell: Item | null): void {
-    focusedCell = cell;
-  }
-
-  export function setCurrentSelection(sel: Selection): void {
-    currentSelection = sel;
-    scheduleDraw();
-  }
-
-  export function getCurrentSelection(): Selection {
-    return currentSelection;
-  }
-
-  export function focus(): void {
-    containerRef?.focus();
-  }
-
-  // ── Scroll handler ────────────────────────────────────────────────────────────
-
-  function handleScroll(e: Event) {
-    const target = e.target as HTMLElement;
-    scrollX = target.scrollLeft;
-    scrollY = target.scrollTop;
-  }
-
-  // ── Header context menu ───────────────────────────────────────────────────────
-
-  function handleContextMenu(e: MouseEvent) {
-    if (e.offsetY < headerHeight && e.offsetX < rowMarkerWidth) return;
-    const fixedBoundaryX =
-      fixedColumns > 0
-        ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-        : 0;
-    const localX = e.offsetX - rowMarkerWidth;
-    const effectiveScrollX =
-      fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
-
-    if (e.offsetY < headerHeight) {
-      if (!onHeaderContextMenu) return;
-      const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
-      if (col >= 0 && col < columns.length) {
-        e.preventDefault();
-        onHeaderContextMenu(col, e.clientX, e.clientY);
-      }
-      return;
-    }
-
-    const row = getRowFromOffsetY(e.offsetY);
-    if (row !== null) {
-      e.preventDefault();
-      onRowContextMenu?.(row, e.clientX, e.clientY);
-    }
-
-    if (e.offsetX < rowMarkerWidth) return;
-
-    if (onCellContextMenu) {
-      const cell = getCellFromPoint(
-        localX,
-        e.offsetY,
-        effectiveScrollX,
-        scrollY,
-        effectiveColumns,
-        rowHeight,
-        headerHeight,
-      );
-      if (cell) {
-        e.preventDefault();
-        onCellContextMenu(cell, e.clientX, e.clientY);
-      }
-    }
-  }
-
-  // ── Sort helpers ──────────────────────────────────────────────────────────────
-
-  function toggleSort(col: number, multi: boolean = false) {
-    const column = columns[col];
-    if (!column || !onSortOrderChange || column.disableSort === true) return;
-    const current = sortOrder?.[column.id] ?? "none";
-    const next =
-      current === "none" ? "asc" : current === "asc" ? "desc" : "none";
-    if (multi) {
-      onSortOrderChange({ ...sortOrder, [column.id]: next });
-    } else {
-      onSortOrderChange({ [column.id]: next });
-    }
-  }
-
-  // ── Mouse handlers ────────────────────────────────────────────────────────────
-
-  function getRowFromOffsetY(offsetY: number): number | null {
-    if (offsetY < headerHeight) return null;
-    const row = Math.floor((offsetY - headerHeight + scrollY) / rowHeight);
-    return row >= 0 && row < rows ? row : null;
-  }
-
-  function handleMouseDown(e: MouseEvent) {
-    if (e.button !== 0) return;
-    pendingGridMenuOpen = false;
-    containerRef?.focus();
-
-    const sbGeo = getScrollbarGeometry(buildRenderContext());
-    if (
-      sbGeo.needsVScroll &&
-      e.offsetX >= sbGeo.vTrackX &&
-      e.offsetY >= sbGeo.vTrackY &&
-      e.offsetY < sbGeo.vTrackY + sbGeo.vTrackH
-    ) {
-      isDraggingVScrollbar = true;
-      vScrollDragStartY = e.clientY;
-      vScrollDragStartScroll = scrollY;
-      document.addEventListener("mousemove", handleDocumentMouseMove);
-      document.addEventListener("mouseup", handleDocumentMouseUp);
-      return;
-    }
-    if (
-      sbGeo.needsHScroll &&
-      e.offsetY >= sbGeo.hTrackY &&
-      e.offsetX >= sbGeo.hTrackX &&
-      e.offsetX < sbGeo.hTrackX + sbGeo.hTrackW
-    ) {
-      isDraggingHScrollbar = true;
-      hScrollDragStartX = e.clientX;
-      hScrollDragStartScroll = scrollX;
-      document.addEventListener("mousemove", handleDocumentMouseMove);
-      document.addEventListener("mouseup", handleDocumentMouseUp);
-      return;
-    }
-
-    // Menu button click — handled before readonly check so it always fires.
-    if (
-      onGridMenuOpen &&
-      rowMarkerWidth > 0 &&
-      e.offsetX < rowMarkerWidth &&
-      e.offsetY < headerHeight
-    ) {
-      pendingGridMenuOpen = true;
-      return;
-    }
-
-    const fixedBoundaryX =
-      fixedColumns > 0
-        ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-        : 0;
-    const localX = e.offsetX - rowMarkerWidth;
-    const effectiveScrollX =
-      fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
-
-    // Header interactions — sort always active; resize/reorder/selection gated by readonly
-    if (e.offsetY < headerHeight) {
-      if (!readonly && resizableColumns) {
-        const resizeCol = getResizeHandle(
-          localX,
-          effectiveColumns,
-          effectiveScrollX,
-        );
-        if (resizeCol !== null) {
-          resizingColumn = resizeCol;
-          return;
-        }
-      }
-
-      // Column drag reorder (only if onColumnMoved provided and not readonly)
-      if (!readonly && onColumnMoved) {
-        const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
-        draggingHeaderCol = col;
-        dragHeaderCurrentX = e.offsetX;
-        return;
-      }
-
-      // Column header click → sort toggle (always) + column selection (when not readonly)
-      const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
-      if (col >= 0 && col < columns.length) {
-        toggleSort(col, e.ctrlKey || e.metaKey || e.shiftKey);
-        if (!readonly) {
-          if (e.shiftKey && currentSelection.type === "column") {
-            const cols = [...currentSelection.columns];
-            if (!cols.includes(col)) cols.push(col);
-            currentSelection = { type: "column", columns: cols };
-          } else {
-            currentSelection = { type: "column", columns: [col] };
-          }
-          onSelectionChange?.(currentSelection);
-          announcement = `Column ${columns[col].title} selected`;
-        }
-      }
-      return;
-    }
-
-    const row = getRowFromOffsetY(e.offsetY);
-    if (row !== null) {
-      onRowClick?.(row);
-    }
-
-    if (readonly) return;
-
-    const cell = getCellFromPoint(
-      localX,
-      e.offsetY,
-      effectiveScrollX,
-      scrollY,
-      effectiveColumns,
-      rowHeight,
-      headerHeight,
-    );
-
-    if (rowMarkers !== "none" && e.offsetX < rowMarkerWidth) {
-      if (e.offsetY >= headerHeight) {
-        const row = Math.floor(
-          (e.offsetY - headerHeight + scrollY) / rowHeight,
-        );
-        if (row >= 0 && row < rows) {
-          onRowToggle?.(row);
-        }
-      }
-      return;
-    }
-
-    if (cell) {
-      onCellClick?.(cell);
-      if (e.shiftKey && focusedCell) {
-        const newSelection: Selection = {
-          type: "range",
-          start: focusedCell,
-          end: cell,
-        };
-        currentSelection = newSelection;
-        onSelectionChange?.(newSelection);
-      } else {
-        focusedCell = cell;
-        dragStart = cell;
-        isDragging = true;
-        currentSelection = { type: "cell", item: cell };
-        onSelectionChange?.(currentSelection);
-        announcement = `Row ${cell[1] + 1}, column ${columns[cell[0]]?.title ?? cell[0] + 1}`;
-      }
-    }
-  }
-
-  function handleDblClick(e: MouseEvent) {
-    if (e.offsetY < headerHeight) return;
-    if (rowMarkers !== "none" && e.offsetX < rowMarkerWidth) return;
-
-    const fixedBoundaryX =
-      fixedColumns > 0
-        ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-        : 0;
-    const localX = e.offsetX - rowMarkerWidth;
-    const effectiveScrollX =
-      fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
-
-    const cell = getCellFromPoint(
-      localX,
-      e.offsetY,
-      effectiveScrollX,
-      scrollY,
-      effectiveColumns,
-      rowHeight,
-      headerHeight,
-    );
-    if (cell) {
-      onCellDblClick?.(cell, getCellContent(cell));
-      if (!readonly) {
-        onBeginEdit(cell);
-      }
-    }
-  }
-
-  function handleDocumentMouseMove(e: MouseEvent) {
-    if (isDraggingVScrollbar) {
-      const geo = getScrollbarGeometry(buildRenderContext());
-      const trackRange = geo.vTrackH - geo.vThumbH;
-      if (trackRange > 0 && scrollRef) {
-        const newScroll =
-          vScrollDragStartScroll +
-          ((e.clientY - vScrollDragStartY) / trackRange) * geo.maxScrollY;
-        scrollRef.scrollTop = Math.max(0, Math.min(geo.maxScrollY, newScroll));
-      }
-    } else if (isDraggingHScrollbar) {
-      const geo = getScrollbarGeometry(buildRenderContext());
-      const trackRange = geo.hTrackW - geo.hThumbW;
-      if (trackRange > 0 && scrollRef) {
-        const newScroll =
-          hScrollDragStartScroll +
-          ((e.clientX - hScrollDragStartX) / trackRange) * geo.maxScrollX;
-        scrollRef.scrollLeft = Math.max(0, Math.min(geo.maxScrollX, newScroll));
-      }
-    }
-  }
-
-  function handleDocumentMouseUp() {
-    isDraggingVScrollbar = false;
-    isDraggingHScrollbar = false;
-    scheduleDraw();
-    document.removeEventListener("mousemove", handleDocumentMouseMove);
-    document.removeEventListener("mouseup", handleDocumentMouseUp);
-  }
-
-  function handleMouseMove(e: MouseEvent) {
-    if (isDraggingVScrollbar || isDraggingHScrollbar) return;
-
-    // Menu button hover.
-    if (onGridMenuOpen && rowMarkerWidth > 0) {
-      const isOver = e.offsetX < rowMarkerWidth && e.offsetY < headerHeight;
-      if (isOver !== hoverMenuButton) {
-        hoverMenuButton = isOver;
-        scheduleDraw();
-      }
-    }
-
-    const sbGeo = getScrollbarGeometry(buildRenderContext());
-    const newHoverV =
-      sbGeo.needsVScroll &&
-      e.offsetX >= sbGeo.vTrackX &&
-      e.offsetY >= sbGeo.vTrackY &&
-      e.offsetY < sbGeo.vTrackY + sbGeo.vTrackH;
-    const newHoverH =
-      sbGeo.needsHScroll &&
-      e.offsetY >= sbGeo.hTrackY &&
-      e.offsetX >= sbGeo.hTrackX &&
-      e.offsetX < sbGeo.hTrackX + sbGeo.hTrackW;
-    if (
-      newHoverV !== isHoveringVScrollbar ||
-      newHoverH !== isHoveringHScrollbar
-    ) {
-      isHoveringVScrollbar = newHoverV;
-      isHoveringHScrollbar = newHoverH;
-      scheduleDraw();
-    }
-
-    // Sortable header hover (for pointer cursor)
-    if (
-      onSortOrderChange &&
-      e.offsetY < headerHeight &&
-      e.offsetX >= rowMarkerWidth
-    ) {
-      const fixedBoundaryX =
-        fixedColumns > 0
-          ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-          : 0;
-      const localX = e.offsetX - rowMarkerWidth;
-      const effectiveScrollX =
-        fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX
-          ? 0
-          : scrollX;
-      const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
-      const isSortable =
-        col >= 0 && col < columns.length && columns[col].disableSort !== true;
-      const newHoverSort = isSortable ? col : null;
-      if (newHoverSort !== hoverSortCol) {
-        hoverSortCol = newHoverSort;
-      }
-    } else if (hoverSortCol !== null) {
-      hoverSortCol = null;
-    }
-
-    if (
-      resizableColumns &&
-      resizingColumn === null &&
-      e.offsetY < headerHeight
-    ) {
-      const fixedBoundaryX =
-        fixedColumns > 0
-          ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-          : 0;
-      const localX = e.offsetX - rowMarkerWidth;
-      const effectiveScrollX =
-        fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX
-          ? 0
-          : scrollX;
-      const resizeCol = getResizeHandle(
-        localX,
-        effectiveColumns,
-        effectiveScrollX,
-      );
-      if (resizeCol !== hoverResizeCol) {
-        hoverResizeCol = resizeCol;
-        scheduleDraw();
-      }
-    } else if (hoverResizeCol !== null) {
-      hoverResizeCol = null;
-      scheduleDraw();
-    }
-
-    if (resizingColumn !== null) {
-      const baseX =
-        getColumnX(effectiveColumns, resizingColumn) + rowMarkerWidth;
-      const scrollXForResize =
-        fixedColumns > 0 && resizingColumn < fixedColumns ? 0 : scrollX;
-      const newWidth = Math.max(50, e.offsetX - baseX + scrollXForResize);
-      resizeWidth = newWidth;
-      scheduleDraw();
-      return;
-    }
-
-    if (draggingHeaderCol !== null) {
-      dragHeaderCurrentX = e.offsetX;
-      scheduleDraw();
-      return;
-    }
-
-    // Hover cell tracking
-    if (e.offsetY >= headerHeight && e.offsetX >= rowMarkerWidth) {
-      const hoverFixedBoundaryX =
-        fixedColumns > 0
-          ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-          : 0;
-      const hoverLocalX = e.offsetX - rowMarkerWidth;
-      const hoverScrollX =
-        fixedColumns > 0 && hoverLocalX >= 0 && hoverLocalX < hoverFixedBoundaryX
-          ? 0
-          : scrollX;
-      const hoverCell = getCellFromPoint(
-        hoverLocalX,
-        e.offsetY,
-        hoverScrollX,
-        scrollY,
-        effectiveColumns,
-        rowHeight,
-        headerHeight,
-      );
-      if (hoverCell?.[0] !== hoveredCell?.[0] || hoverCell?.[1] !== hoveredCell?.[1]) {
-        if (hoveredCell) onCellLeave?.(hoveredCell);
-        hoveredCell = hoverCell;
-        if (hoverCell) onCellHover?.(hoverCell);
-      }
-    } else if (hoveredCell !== null) {
-      onCellLeave?.(hoveredCell);
-      hoveredCell = null;
-    }
-
-    if (!isDragging || !dragStart) return;
-
-    const fixedBoundaryX =
-      fixedColumns > 0
-        ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-        : 0;
-    const localX = e.offsetX - rowMarkerWidth;
-    const effectiveScrollX =
-      fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
-
-    const cell = getCellFromPoint(
-      localX,
-      e.offsetY,
-      effectiveScrollX,
-      scrollY,
-      effectiveColumns,
-      rowHeight,
-      headerHeight,
-    );
-
-    if (cell && (cell[0] !== dragStart[0] || cell[1] !== dragStart[1])) {
-      currentSelection = { type: "range", start: dragStart, end: cell };
-      onSelectionChange?.(currentSelection);
-    }
-  }
-
-  function handleMouseUp(e: MouseEvent) {
-    if (
-      pendingGridMenuOpen &&
-      onGridMenuOpen &&
-      rowMarkerWidth > 0 &&
-      e.offsetX < rowMarkerWidth &&
-      e.offsetY < headerHeight
-    ) {
-      onGridMenuOpen({ x: e.clientX, y: e.clientY });
-    }
-    pendingGridMenuOpen = false;
-
-    if (draggingHeaderCol !== null && onColumnMoved) {
-      const fixedBoundaryX =
-        fixedColumns > 0
-          ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-          : 0;
-      const localX = e.offsetX - rowMarkerWidth;
-      const effectiveScrollX =
-        fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX
-          ? 0
-          : scrollX;
-
-      const targetCol = getColumnFromX(
-        localX + effectiveScrollX,
-        effectiveColumns,
-      );
-      if (targetCol !== draggingHeaderCol) {
-        onColumnMoved(draggingHeaderCol, targetCol);
-      } else {
-        // No actual drag movement — treat as a header click and toggle sort
-        toggleSort(draggingHeaderCol, e.ctrlKey || e.metaKey || e.shiftKey);
-      }
-      draggingHeaderCol = null;
-      scheduleDraw();
-    }
-
-    if (resizingColumn !== null && resizeWidth !== null) {
-      onColumnResized?.(resizingColumn, resizeWidth);
-    }
-    isDragging = false;
-    dragStart = null;
-    resizingColumn = null;
-    resizeWidth = null;
-  }
-
-  function handleMouseLeave(e: MouseEvent) {
-    isHoveringVScrollbar = false;
-    isHoveringHScrollbar = false;
-    hoverResizeCol = null;
-    hoverMenuButton = false;
-    hoverSortCol = null;
-    pendingGridMenuOpen = false;
-    if (hoveredCell) {
-      onCellLeave?.(hoveredCell);
-      hoveredCell = null;
-    }
-    if (!isDraggingVScrollbar && !isDraggingHScrollbar) {
-      handleMouseUp(e);
-    } else {
-      scheduleDraw();
-    }
-  }
-
-  function handleWheel(e: WheelEvent) {
-    if (scrollRef) {
-      e.preventDefault();
-      scrollRef.scrollLeft += e.deltaX;
-      scrollRef.scrollTop += e.deltaY;
-    }
-  }
-
-  // ── Focus handlers ────────────────────────────────────────────────────────────
-
-  export function handleFocusIn() {
-    hasFocus = true;
-
-    if (!focusedCell && rows > 0 && columns.length > 0) {
-      if (currentSelection.type === "cell") {
-        focusedCell = currentSelection.item;
-      } else if (currentSelection.type === "range") {
-        focusedCell = currentSelection.start;
-      } else if (currentSelection.type === "row") {
-        focusedCell = [0, currentSelection.rows[0] ?? 0];
-      } else if (currentSelection.type === "column") {
-        focusedCell = [currentSelection.columns[0] ?? 0, 0];
-      } else {
-        focusedCell = [0, 0];
-        currentSelection = { type: "cell", item: focusedCell };
-        onSelectionChange?.(currentSelection);
-      }
-    }
-  }
-
-  export function handleFocusOut(e: FocusEvent) {
-    const next = e.relatedTarget as Node | null;
-    if (next && containerRef?.contains(next)) return;
-    hasFocus = false;
-  }
-
-  export function getHasFocus(): boolean {
-    return hasFocus;
-  }
-
-  export function getAnnouncement(): string {
-    return announcement;
-  }
-
-  export function setAnnouncement(msg: string): void {
-    announcement = msg;
-  }
-
-  function getLocalPointFromClient(clientX: number, clientY: number) {
-    const rect = canvasRef?.getBoundingClientRect();
-    if (!rect) return null;
-
-    return {
-      offsetX: clientX - rect.left,
-      offsetY: clientY - rect.top,
-    };
-  }
-
-  function handleTouchTap(offsetX: number, offsetY: number) {
-    containerRef?.focus();
-
-    if (
-      onGridMenuOpen &&
-      rowMarkerWidth > 0 &&
-      offsetX < rowMarkerWidth &&
-      offsetY < headerHeight
-    ) {
-      const rect = canvasRef?.getBoundingClientRect();
-      onGridMenuOpen({
-        x: (rect?.left ?? 0) + offsetX,
-        y: (rect?.top ?? 0) + offsetY,
-      });
-      return;
-    }
-
-    const fixedBoundaryX =
-      fixedColumns > 0
-        ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
-        : 0;
-    const localX = offsetX - rowMarkerWidth;
-    const effectiveScrollX =
-      fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
-
-    if (offsetY < headerHeight) {
-      const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
-      if (col >= 0 && col < columns.length) {
-        toggleSort(col, false);
-        if (!readonly) {
-          currentSelection = { type: "column", columns: [col] };
-          onSelectionChange?.(currentSelection);
-          announcement = `Column ${columns[col].title} selected`;
-        }
-      }
-      return;
-    }
-
-    if (rowMarkers !== "none" && offsetX < rowMarkerWidth) {
-      const row = getRowFromOffsetY(offsetY);
-      if (row !== null && row >= 0 && row < rows) {
-        onRowToggle?.(row);
-      }
-      return;
-    }
-
-    const cell = getCellFromPoint(
-      localX,
-      offsetY,
-      effectiveScrollX,
-      scrollY,
-      effectiveColumns,
-      rowHeight,
-      headerHeight,
-    );
-
-    if (cell) {
-      focusedCell = cell;
-      currentSelection = { type: "cell", item: cell };
-      onSelectionChange?.(currentSelection);
-      announcement = `Row ${cell[1] + 1}, column ${columns[cell[0]]?.title ?? cell[0] + 1}`;
-    }
-  }
-
-  function handleTouchStart(e: TouchEvent) {
-    if (e.touches.length !== 1) return;
-
-    const touch = e.touches[0];
-    touchStartClientX = touch.clientX;
-    touchStartClientY = touch.clientY;
-    touchStartScrollX = scrollRef?.scrollLeft ?? 0;
-    touchStartScrollY = scrollRef?.scrollTop ?? 0;
-    isTouchScrolling = false;
-  }
-
-  function handleTouchMove(e: TouchEvent) {
-    if (e.touches.length !== 1 || !scrollRef) return;
-
-    const touch = e.touches[0];
-    const deltaX = touch.clientX - touchStartClientX;
-    const deltaY = touch.clientY - touchStartClientY;
-
-    if (!isTouchScrolling && (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8)) {
-      isTouchScrolling = true;
-    }
-
-    if (!isTouchScrolling) return;
-
-    e.preventDefault();
-    scrollRef.scrollLeft = touchStartScrollX - deltaX;
-    scrollRef.scrollTop = touchStartScrollY - deltaY;
-  }
-
-  function handleTouchEnd(e: TouchEvent) {
-    const touch = e.changedTouches[0];
-    if (!touch) return;
-
-    const point = getLocalPointFromClient(touch.clientX, touch.clientY);
-    const wasScrolling = isTouchScrolling;
-    isTouchScrolling = false;
-
-    if (!point || wasScrolling) return;
-
-    handleTouchTap(point.offsetX, point.offsetY);
-  }
+<script lang="ts">import { calculateVisibleRange, getColumnX, getTotalHeight, getCellFromPoint, scrollToCell, getResizeHandle, getColumnFromX } from "../utils/scrolling";
+import { computeEffectiveColumns } from "../utils/columns";
+import { renderFrame, getScrollbarGeometry } from "../utils/canvasRender";
+import { IMAGE_LOADED_EVENT } from "../renderers/ImageRenderer";
+import GridlerEditor from "./GridlerEditor.svelte";
+import GridlerSearch from "./GridlerSearch.svelte";
+const { columns, rows, getCellContent, width, height, mergedTheme, isDarkMode: isDarkModeProp = false, headerHeight = 36, rowHeight = 34, readonly = false, fixedColumns = 0, resizableColumns = true, rowMarkers = "none", showSearch = false, searchValue = "", isEditing, editingCell, onBeginEdit, onEditComplete, onCancelEdit, onRowToggle, onVisibleRangeChange, onSelectionChange, onCellDblClick, onRowClick, onRowContextMenu, onColumnMoved, onCellEdited: _onCellEdited, onDelete: _onDelete, onRowAppended: _onRowAppended, onSelectionCleared: _onSelectionCleared, sortOrder, onSortOrderChange, onHeaderContextMenu, onSearchValueChange, onSearchClose, onGridMenuOpen, onCellClick, onCellHover, onCellLeave, onCellContextMenu, onColumnResized, onGridResize, onGridEnter, onkeydown, children } = $props();
+// ── Internal state ───────────────────────────────────────────────────────────
+let scrollX = $state(0);
+let scrollY = $state(0);
+let currentSelection = $state({ type: "none" });
+let focusedCell = $state(null);
+let isDragging = $state(false);
+let dragStart = $state(null);
+let resizingColumn = $state(null);
+let resizeWidth = $state(null);
+let hoverResizeCol = $state(null);
+let draggingHeaderCol = $state(null);
+let dragHeaderCurrentX = $state(0);
+let announcement = $state("");
+let hasFocus = $state(false);
+const gridId = `gridler-${Math.random().toString(36).slice(2, 10)}`;
+let hoveredCell = $state(null);
+let isDraggingVScrollbar = $state(false);
+let isDraggingHScrollbar = $state(false);
+let vScrollDragStartY = $state(0);
+let hScrollDragStartX = $state(0);
+let vScrollDragStartScroll = $state(0);
+let hScrollDragStartScroll = $state(0);
+let isHoveringVScrollbar = $state(false);
+let isHoveringHScrollbar = $state(false);
+let hoverMenuButton = $state(false);
+let pendingGridMenuOpen = $state(false);
+let hoverSortCol = $state(null);
+let touchStartClientX = $state(0);
+let touchStartClientY = $state(0);
+let touchStartScrollX = $state(0);
+let touchStartScrollY = $state(0);
+let isTouchScrolling = $state(false);
+let containerRef = $state();
+let canvasRef = $state();
+let scrollRef = $state();
+let ctx = $derived(canvasRef?.getContext("2d") ?? null);
+let containerWidth = $state(0);
+let containerHeight = $state(0);
+const canvasCursor = $derived(resizingColumn !== null || hoverResizeCol !== null ? "col-resize" : hoverMenuButton || hoverSortCol !== null ? "pointer" : "default");
+let drawPending = false;
+const rowMarkerWidth = $derived(rowMarkers !== "none" || !!onGridMenuOpen ? 40 : 0);
+const effectiveColumns = $derived.by(() => {
+	const cols = resizingColumn !== null && resizeWidth !== null ? columns.map((c, i) => i === resizingColumn ? {
+		...c,
+		width: resizeWidth,
+		grow: 0
+	} : c) : columns;
+	return computeEffectiveColumns(cols, containerWidth, rowMarkerWidth);
+});
+const totalWidth = $derived.by(() => {
+	const cols = resizingColumn !== null && resizeWidth !== null ? columns.map((c, i) => i === resizingColumn ? {
+		...c,
+		width: resizeWidth
+	} : c) : columns;
+	return cols.reduce((sum, col) => sum + col.width, 0) + rowMarkerWidth;
+});
+const totalHeight = $derived(getTotalHeight(rows, rowHeight));
+const visibleRange = $derived.by(() => {
+	if (!containerWidth || !containerHeight) {
+		return {
+			firstCol: 0,
+			lastCol: 0,
+			firstRow: 0,
+			lastRow: 0
+		};
+	}
+	return calculateVisibleRange(scrollX, scrollY, containerWidth, containerHeight, effectiveColumns, rowHeight, headerHeight, rows);
+});
+const containerWidthStyle = $derived(typeof width === "number" ? `${width}px` : width);
+const containerHeightStyle = $derived(typeof height === "number" ? `${height}px` : height);
+const activeCellDescription = $derived.by(() => {
+	if (!focusedCell) {
+		return rows > 0 && columns.length > 0 ? "Use arrow keys to move between cells. On touch devices, swipe to scroll and tap to select." : "No rows available.";
+	}
+	const [col, row] = focusedCell;
+	const columnTitle = columns[col]?.title ?? `Column ${col + 1}`;
+	const cell = getCellContent(focusedCell);
+	const value = `${cell.displayData ?? ""}`.trim();
+	return value ? `Row ${row + 1}, ${columnTitle}, value ${value}` : `Row ${row + 1}, ${columnTitle}, empty cell`;
+});
+const selectionDescription = $derived.by(() => {
+	switch (currentSelection.type) {
+		case "cell": return "One cell selected.";
+		case "range": return `Range selected from row ${currentSelection.start[1] + 1} to row ${currentSelection.end[1] + 1}.`;
+		case "row": return `${currentSelection.rows.length} row${currentSelection.rows.length === 1 ? "" : "s"} selected.`;
+		case "column": return `${currentSelection.columns.length} column${currentSelection.columns.length === 1 ? "" : "s"} selected.`;
+		default: return "No selection.";
+	}
+});
+// ── Resize observer ───────────────────────────────────────────────────────────
+$effect(() => {
+	if (!containerRef) return;
+	const observer = new ResizeObserver((entries) => {
+		const entry = entries[0];
+		if (entry) {
+			containerWidth = entry.contentRect.width;
+			containerHeight = entry.contentRect.height;
+			onGridResize?.(entry.contentRect.width, entry.contentRect.height);
+		}
+	});
+	observer.observe(containerRef);
+	return () => observer.disconnect();
+});
+// ── Image load repaint ────────────────────────────────────────────────────────
+$effect(() => {
+	const handler = () => scheduleDraw();
+	document.addEventListener(IMAGE_LOADED_EVENT, handler);
+	return () => document.removeEventListener(IMAGE_LOADED_EVENT, handler);
+});
+// ── Document listener cleanup on destroy ─────────────────────────────────────
+$effect(() => {
+	return () => {
+		document.removeEventListener("mousemove", handleDocumentMouseMove);
+		document.removeEventListener("mouseup", handleDocumentMouseUp);
+	};
+});
+// ── Render loop ───────────────────────────────────────────────────────────────
+$effect(() => {
+	// Track reactive dependencies that should trigger a redraw.
+	const _deps = [
+		visibleRange,
+		searchValue,
+		currentSelection,
+		getCellContent,
+		mergedTheme,
+		isDarkModeProp,
+		sortOrder
+	];
+	void _deps;
+	if (ctx && containerWidth > 0 && containerHeight > 0) {
+		scheduleDraw();
+	}
+});
+$effect(() => {
+	onVisibleRangeChange?.(visibleRange);
+});
+function scheduleDraw() {
+	if (drawPending) return;
+	drawPending = true;
+	requestAnimationFrame(() => {
+		drawPending = false;
+		doRenderFrame();
+	});
+}
+function buildRenderContext() {
+	return {
+		containerWidth,
+		containerHeight,
+		headerHeight,
+		rowHeight,
+		rowMarkerWidth,
+		fixedColumns,
+		resizableColumns: resizableColumns ?? true,
+		effectiveColumns,
+		rows,
+		getCellContent,
+		searchValue: searchValue ?? "",
+		scrollX,
+		scrollY,
+		totalWidth,
+		totalHeight,
+		currentSelection,
+		mergedTheme,
+		isDarkMode: isDarkModeProp,
+		rowMarkers: rowMarkers ?? "none",
+		draggingHeaderCol,
+		dragHeaderCurrentX,
+		hoverResizeCol,
+		isDraggingVScrollbar,
+		isDraggingHScrollbar,
+		isHoveringVScrollbar,
+		isHoveringHScrollbar,
+		sortOrder
+	};
+}
+function drawMenuButton() {
+	if (!ctx || !onGridMenuOpen || rowMarkerWidth <= 0) return;
+	// When rowMarkers is 'none', renderRowMarkers skips drawing the column.
+	// We need to fill the column background and draw the separator ourselves.
+	if (rowMarkers === "none") {
+		ctx.fillStyle = mergedTheme.bgHeader;
+		ctx.fillRect(0, 0, rowMarkerWidth, containerHeight);
+		ctx.strokeStyle = mergedTheme.borderColor;
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(rowMarkerWidth - .5, 0);
+		ctx.lineTo(rowMarkerWidth - .5, containerHeight);
+		ctx.stroke();
+	}
+	// Corner cell hover highlight.
+	if (hoverMenuButton) {
+		ctx.fillStyle = mergedTheme.bgHeaderHasFocus;
+		ctx.fillRect(0, 0, rowMarkerWidth, headerHeight);
+	}
+	// Burger icon (three lines).
+	const iconW = 14;
+	const startX = Math.round((rowMarkerWidth - iconW) / 2) + .5;
+	const midY = Math.round(headerHeight / 2) + .5;
+	ctx.strokeStyle = mergedTheme.foreground;
+	ctx.lineWidth = 1.5;
+	ctx.lineCap = "round";
+	ctx.globalAlpha = hoverMenuButton ? 1 : .5;
+	ctx.beginPath();
+	ctx.moveTo(startX, midY - 4);
+	ctx.lineTo(startX + iconW, midY - 4);
+	ctx.moveTo(startX, midY);
+	ctx.lineTo(startX + iconW, midY);
+	ctx.moveTo(startX, midY + 4);
+	ctx.lineTo(startX + iconW, midY + 4);
+	ctx.stroke();
+	ctx.globalAlpha = 1;
+}
+function doRenderFrame() {
+	if (!ctx || !canvasRef) return;
+	const dpr = window.devicePixelRatio || 1;
+	const canvasWidth = containerWidth;
+	const canvasHeight = containerHeight;
+	canvasRef.width = canvasWidth * dpr;
+	canvasRef.height = canvasHeight * dpr;
+	canvasRef.style.width = `${canvasWidth}px`;
+	canvasRef.style.height = `${canvasHeight}px`;
+	const rc = buildRenderContext();
+	renderFrame(ctx, rc, visibleRange);
+	drawMenuButton();
+}
+// ── Exposed methods ───────────────────────────────────────────────────────────
+export function scrollCellIntoView(item) {
+	if (!scrollRef) return;
+	const scrollTarget = scrollToCell(item, effectiveColumns, rowHeight, headerHeight, containerWidth, containerHeight);
+	if (scrollTarget) {
+		scrollRef.scrollLeft = scrollTarget.scrollX;
+		scrollRef.scrollTop = scrollTarget.scrollY;
+	}
+}
+export function getFocusedCell() {
+	return focusedCell;
+}
+export function setFocusedCell(cell) {
+	focusedCell = cell;
+}
+export function setCurrentSelection(sel) {
+	currentSelection = sel;
+	scheduleDraw();
+}
+export function getCurrentSelection() {
+	return currentSelection;
+}
+export function focus() {
+	containerRef?.focus();
+}
+// ── Scroll handler ────────────────────────────────────────────────────────────
+function handleScroll(e) {
+	const target = e.target;
+	scrollX = target.scrollLeft;
+	scrollY = target.scrollTop;
+}
+// ── Header context menu ───────────────────────────────────────────────────────
+function handleContextMenu(e) {
+	if (e.offsetY < headerHeight && e.offsetX < rowMarkerWidth) return;
+	const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+	const localX = e.offsetX - rowMarkerWidth;
+	const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+	if (e.offsetY < headerHeight) {
+		if (!onHeaderContextMenu) return;
+		const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+		if (col >= 0 && col < columns.length) {
+			e.preventDefault();
+			onHeaderContextMenu(col, e.clientX, e.clientY);
+		}
+		return;
+	}
+	const row = getRowFromOffsetY(e.offsetY);
+	if (row !== null) {
+		e.preventDefault();
+		onRowContextMenu?.(row, e.clientX, e.clientY);
+	}
+	if (e.offsetX < rowMarkerWidth) return;
+	if (onCellContextMenu) {
+		const cell = getCellFromPoint(localX, e.offsetY, effectiveScrollX, scrollY, effectiveColumns, rowHeight, headerHeight);
+		if (cell) {
+			e.preventDefault();
+			onCellContextMenu(cell, e.clientX, e.clientY);
+		}
+	}
+}
+// ── Sort helpers ──────────────────────────────────────────────────────────────
+function toggleSort(col, multi = false) {
+	const column = columns[col];
+	if (!column || !onSortOrderChange || column.disableSort === true) return;
+	const current = sortOrder?.[column.id] ?? "none";
+	const next = current === "none" ? "asc" : current === "asc" ? "desc" : "none";
+	if (multi) {
+		onSortOrderChange({
+			...sortOrder,
+			[column.id]: next
+		});
+	} else {
+		onSortOrderChange({ [column.id]: next });
+	}
+}
+// ── Mouse handlers ────────────────────────────────────────────────────────────
+function getRowFromOffsetY(offsetY) {
+	if (offsetY < headerHeight) return null;
+	const row = Math.floor((offsetY - headerHeight + scrollY) / rowHeight);
+	return row >= 0 && row < rows ? row : null;
+}
+function handleMouseDown(e) {
+	if (e.button !== 0) return;
+	pendingGridMenuOpen = false;
+	containerRef?.focus();
+	const sbGeo = getScrollbarGeometry(buildRenderContext());
+	if (sbGeo.needsVScroll && e.offsetX >= sbGeo.vTrackX && e.offsetY >= sbGeo.vTrackY && e.offsetY < sbGeo.vTrackY + sbGeo.vTrackH) {
+		isDraggingVScrollbar = true;
+		vScrollDragStartY = e.clientY;
+		vScrollDragStartScroll = scrollY;
+		document.addEventListener("mousemove", handleDocumentMouseMove);
+		document.addEventListener("mouseup", handleDocumentMouseUp);
+		return;
+	}
+	if (sbGeo.needsHScroll && e.offsetY >= sbGeo.hTrackY && e.offsetX >= sbGeo.hTrackX && e.offsetX < sbGeo.hTrackX + sbGeo.hTrackW) {
+		isDraggingHScrollbar = true;
+		hScrollDragStartX = e.clientX;
+		hScrollDragStartScroll = scrollX;
+		document.addEventListener("mousemove", handleDocumentMouseMove);
+		document.addEventListener("mouseup", handleDocumentMouseUp);
+		return;
+	}
+	// Menu button click — handled before readonly check so it always fires.
+	if (onGridMenuOpen && rowMarkerWidth > 0 && e.offsetX < rowMarkerWidth && e.offsetY < headerHeight) {
+		pendingGridMenuOpen = true;
+		return;
+	}
+	const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+	const localX = e.offsetX - rowMarkerWidth;
+	const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+	// Header interactions — sort always active; resize/reorder/selection gated by readonly
+	if (e.offsetY < headerHeight) {
+		if (!readonly && resizableColumns) {
+			const resizeCol = getResizeHandle(localX, effectiveColumns, effectiveScrollX);
+			if (resizeCol !== null) {
+				resizingColumn = resizeCol;
+				return;
+			}
+		}
+		// Column drag reorder (only if onColumnMoved provided and not readonly)
+		if (!readonly && onColumnMoved) {
+			const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+			draggingHeaderCol = col;
+			dragHeaderCurrentX = e.offsetX;
+			return;
+		}
+		// Column header click → sort toggle (always) + column selection (when not readonly)
+		const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+		if (col >= 0 && col < columns.length) {
+			toggleSort(col, e.ctrlKey || e.metaKey || e.shiftKey);
+			if (!readonly) {
+				if (e.shiftKey && currentSelection.type === "column") {
+					const cols = [...currentSelection.columns];
+					if (!cols.includes(col)) cols.push(col);
+					currentSelection = {
+						type: "column",
+						columns: cols
+					};
+				} else {
+					currentSelection = {
+						type: "column",
+						columns: [col]
+					};
+				}
+				onSelectionChange?.(currentSelection);
+				announcement = `Column ${columns[col].title} selected`;
+			}
+		}
+		return;
+	}
+	const row = getRowFromOffsetY(e.offsetY);
+	if (row !== null) {
+		onRowClick?.(row);
+	}
+	if (readonly) return;
+	const cell = getCellFromPoint(localX, e.offsetY, effectiveScrollX, scrollY, effectiveColumns, rowHeight, headerHeight);
+	if (rowMarkers !== "none" && e.offsetX < rowMarkerWidth) {
+		if (e.offsetY >= headerHeight) {
+			const row = Math.floor((e.offsetY - headerHeight + scrollY) / rowHeight);
+			if (row >= 0 && row < rows) {
+				onRowToggle?.(row);
+			}
+		}
+		return;
+	}
+	if (cell) {
+		onCellClick?.(cell);
+		if (e.shiftKey && focusedCell) {
+			const newSelection = {
+				type: "range",
+				start: focusedCell,
+				end: cell
+			};
+			currentSelection = newSelection;
+			onSelectionChange?.(newSelection);
+		} else {
+			focusedCell = cell;
+			dragStart = cell;
+			isDragging = true;
+			currentSelection = {
+				type: "cell",
+				item: cell
+			};
+			onSelectionChange?.(currentSelection);
+			announcement = `Row ${cell[1] + 1}, column ${columns[cell[0]]?.title ?? cell[0] + 1}`;
+		}
+	}
+}
+function handleDblClick(e) {
+	if (e.offsetY < headerHeight) return;
+	if (rowMarkers !== "none" && e.offsetX < rowMarkerWidth) return;
+	const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+	const localX = e.offsetX - rowMarkerWidth;
+	const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+	const cell = getCellFromPoint(localX, e.offsetY, effectiveScrollX, scrollY, effectiveColumns, rowHeight, headerHeight);
+	if (cell) {
+		onCellDblClick?.(cell, getCellContent(cell));
+		if (!readonly) {
+			onBeginEdit(cell);
+		}
+	}
+}
+function handleDocumentMouseMove(e) {
+	if (isDraggingVScrollbar) {
+		const geo = getScrollbarGeometry(buildRenderContext());
+		const trackRange = geo.vTrackH - geo.vThumbH;
+		if (trackRange > 0 && scrollRef) {
+			const newScroll = vScrollDragStartScroll + (e.clientY - vScrollDragStartY) / trackRange * geo.maxScrollY;
+			scrollRef.scrollTop = Math.max(0, Math.min(geo.maxScrollY, newScroll));
+		}
+	} else if (isDraggingHScrollbar) {
+		const geo = getScrollbarGeometry(buildRenderContext());
+		const trackRange = geo.hTrackW - geo.hThumbW;
+		if (trackRange > 0 && scrollRef) {
+			const newScroll = hScrollDragStartScroll + (e.clientX - hScrollDragStartX) / trackRange * geo.maxScrollX;
+			scrollRef.scrollLeft = Math.max(0, Math.min(geo.maxScrollX, newScroll));
+		}
+	}
+}
+function handleDocumentMouseUp() {
+	isDraggingVScrollbar = false;
+	isDraggingHScrollbar = false;
+	scheduleDraw();
+	document.removeEventListener("mousemove", handleDocumentMouseMove);
+	document.removeEventListener("mouseup", handleDocumentMouseUp);
+}
+function handleMouseMove(e) {
+	if (isDraggingVScrollbar || isDraggingHScrollbar) return;
+	// Menu button hover.
+	if (onGridMenuOpen && rowMarkerWidth > 0) {
+		const isOver = e.offsetX < rowMarkerWidth && e.offsetY < headerHeight;
+		if (isOver !== hoverMenuButton) {
+			hoverMenuButton = isOver;
+			scheduleDraw();
+		}
+	}
+	const sbGeo = getScrollbarGeometry(buildRenderContext());
+	const newHoverV = sbGeo.needsVScroll && e.offsetX >= sbGeo.vTrackX && e.offsetY >= sbGeo.vTrackY && e.offsetY < sbGeo.vTrackY + sbGeo.vTrackH;
+	const newHoverH = sbGeo.needsHScroll && e.offsetY >= sbGeo.hTrackY && e.offsetX >= sbGeo.hTrackX && e.offsetX < sbGeo.hTrackX + sbGeo.hTrackW;
+	if (newHoverV !== isHoveringVScrollbar || newHoverH !== isHoveringHScrollbar) {
+		isHoveringVScrollbar = newHoverV;
+		isHoveringHScrollbar = newHoverH;
+		scheduleDraw();
+	}
+	// Sortable header hover (for pointer cursor)
+	if (onSortOrderChange && e.offsetY < headerHeight && e.offsetX >= rowMarkerWidth) {
+		const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+		const localX = e.offsetX - rowMarkerWidth;
+		const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+		const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+		const isSortable = col >= 0 && col < columns.length && columns[col].disableSort !== true;
+		const newHoverSort = isSortable ? col : null;
+		if (newHoverSort !== hoverSortCol) {
+			hoverSortCol = newHoverSort;
+		}
+	} else if (hoverSortCol !== null) {
+		hoverSortCol = null;
+	}
+	if (resizableColumns && resizingColumn === null && e.offsetY < headerHeight) {
+		const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+		const localX = e.offsetX - rowMarkerWidth;
+		const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+		const resizeCol = getResizeHandle(localX, effectiveColumns, effectiveScrollX);
+		if (resizeCol !== hoverResizeCol) {
+			hoverResizeCol = resizeCol;
+			scheduleDraw();
+		}
+	} else if (hoverResizeCol !== null) {
+		hoverResizeCol = null;
+		scheduleDraw();
+	}
+	if (resizingColumn !== null) {
+		const baseX = getColumnX(effectiveColumns, resizingColumn) + rowMarkerWidth;
+		const scrollXForResize = fixedColumns > 0 && resizingColumn < fixedColumns ? 0 : scrollX;
+		const newWidth = Math.max(50, e.offsetX - baseX + scrollXForResize);
+		resizeWidth = newWidth;
+		scheduleDraw();
+		return;
+	}
+	if (draggingHeaderCol !== null) {
+		dragHeaderCurrentX = e.offsetX;
+		scheduleDraw();
+		return;
+	}
+	// Hover cell tracking
+	if (e.offsetY >= headerHeight && e.offsetX >= rowMarkerWidth) {
+		const hoverFixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+		const hoverLocalX = e.offsetX - rowMarkerWidth;
+		const hoverScrollX = fixedColumns > 0 && hoverLocalX >= 0 && hoverLocalX < hoverFixedBoundaryX ? 0 : scrollX;
+		const hoverCell = getCellFromPoint(hoverLocalX, e.offsetY, hoverScrollX, scrollY, effectiveColumns, rowHeight, headerHeight);
+		if (hoverCell?.[0] !== hoveredCell?.[0] || hoverCell?.[1] !== hoveredCell?.[1]) {
+			if (hoveredCell) onCellLeave?.(hoveredCell);
+			hoveredCell = hoverCell;
+			if (hoverCell) onCellHover?.(hoverCell);
+		}
+	} else if (hoveredCell !== null) {
+		onCellLeave?.(hoveredCell);
+		hoveredCell = null;
+	}
+	if (!isDragging || !dragStart) return;
+	const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+	const localX = e.offsetX - rowMarkerWidth;
+	const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+	const cell = getCellFromPoint(localX, e.offsetY, effectiveScrollX, scrollY, effectiveColumns, rowHeight, headerHeight);
+	if (cell && (cell[0] !== dragStart[0] || cell[1] !== dragStart[1])) {
+		currentSelection = {
+			type: "range",
+			start: dragStart,
+			end: cell
+		};
+		onSelectionChange?.(currentSelection);
+	}
+}
+function handleMouseUp(e) {
+	if (pendingGridMenuOpen && onGridMenuOpen && rowMarkerWidth > 0 && e.offsetX < rowMarkerWidth && e.offsetY < headerHeight) {
+		onGridMenuOpen({
+			x: e.clientX,
+			y: e.clientY
+		});
+	}
+	pendingGridMenuOpen = false;
+	if (draggingHeaderCol !== null && onColumnMoved) {
+		const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+		const localX = e.offsetX - rowMarkerWidth;
+		const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+		const targetCol = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+		if (targetCol !== draggingHeaderCol) {
+			onColumnMoved(draggingHeaderCol, targetCol);
+		} else {
+			// No actual drag movement — treat as a header click and toggle sort
+			toggleSort(draggingHeaderCol, e.ctrlKey || e.metaKey || e.shiftKey);
+		}
+		draggingHeaderCol = null;
+		scheduleDraw();
+	}
+	if (resizingColumn !== null && resizeWidth !== null) {
+		onColumnResized?.(resizingColumn, resizeWidth);
+	}
+	isDragging = false;
+	dragStart = null;
+	resizingColumn = null;
+	resizeWidth = null;
+}
+function handleMouseLeave(e) {
+	isHoveringVScrollbar = false;
+	isHoveringHScrollbar = false;
+	hoverResizeCol = null;
+	hoverMenuButton = false;
+	hoverSortCol = null;
+	pendingGridMenuOpen = false;
+	if (hoveredCell) {
+		onCellLeave?.(hoveredCell);
+		hoveredCell = null;
+	}
+	if (!isDraggingVScrollbar && !isDraggingHScrollbar) {
+		handleMouseUp(e);
+	} else {
+		scheduleDraw();
+	}
+}
+function handleWheel(e) {
+	if (scrollRef) {
+		e.preventDefault();
+		scrollRef.scrollLeft += e.deltaX;
+		scrollRef.scrollTop += e.deltaY;
+	}
+}
+// ── Focus handlers ────────────────────────────────────────────────────────────
+export function handleFocusIn() {
+	hasFocus = true;
+	if (!focusedCell && rows > 0 && columns.length > 0) {
+		if (currentSelection.type === "cell") {
+			focusedCell = currentSelection.item;
+		} else if (currentSelection.type === "range") {
+			focusedCell = currentSelection.start;
+		} else if (currentSelection.type === "row") {
+			focusedCell = [0, currentSelection.rows[0] ?? 0];
+		} else if (currentSelection.type === "column") {
+			focusedCell = [currentSelection.columns[0] ?? 0, 0];
+		} else {
+			focusedCell = [0, 0];
+			currentSelection = {
+				type: "cell",
+				item: focusedCell
+			};
+			onSelectionChange?.(currentSelection);
+		}
+	}
+}
+export function handleFocusOut(e) {
+	const next = e.relatedTarget;
+	if (next && containerRef?.contains(next)) return;
+	hasFocus = false;
+}
+export function getHasFocus() {
+	return hasFocus;
+}
+export function getAnnouncement() {
+	return announcement;
+}
+export function setAnnouncement(msg) {
+	announcement = msg;
+}
+function getLocalPointFromClient(clientX, clientY) {
+	const rect = canvasRef?.getBoundingClientRect();
+	if (!rect) return null;
+	return {
+		offsetX: clientX - rect.left,
+		offsetY: clientY - rect.top
+	};
+}
+function handleTouchTap(offsetX, offsetY) {
+	containerRef?.focus();
+	if (onGridMenuOpen && rowMarkerWidth > 0 && offsetX < rowMarkerWidth && offsetY < headerHeight) {
+		const rect = canvasRef?.getBoundingClientRect();
+		onGridMenuOpen({
+			x: (rect?.left ?? 0) + offsetX,
+			y: (rect?.top ?? 0) + offsetY
+		});
+		return;
+	}
+	const fixedBoundaryX = fixedColumns > 0 ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length)) : 0;
+	const localX = offsetX - rowMarkerWidth;
+	const effectiveScrollX = fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
+	if (offsetY < headerHeight) {
+		const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
+		if (col >= 0 && col < columns.length) {
+			toggleSort(col, false);
+			if (!readonly) {
+				currentSelection = {
+					type: "column",
+					columns: [col]
+				};
+				onSelectionChange?.(currentSelection);
+				announcement = `Column ${columns[col].title} selected`;
+			}
+		}
+		return;
+	}
+	if (rowMarkers !== "none" && offsetX < rowMarkerWidth) {
+		const row = getRowFromOffsetY(offsetY);
+		if (row !== null && row >= 0 && row < rows) {
+			onRowToggle?.(row);
+		}
+		return;
+	}
+	const cell = getCellFromPoint(localX, offsetY, effectiveScrollX, scrollY, effectiveColumns, rowHeight, headerHeight);
+	if (cell) {
+		focusedCell = cell;
+		currentSelection = {
+			type: "cell",
+			item: cell
+		};
+		onSelectionChange?.(currentSelection);
+		announcement = `Row ${cell[1] + 1}, column ${columns[cell[0]]?.title ?? cell[0] + 1}`;
+	}
+}
+function handleTouchStart(e) {
+	if (e.touches.length !== 1) return;
+	const touch = e.touches[0];
+	touchStartClientX = touch.clientX;
+	touchStartClientY = touch.clientY;
+	touchStartScrollX = scrollRef?.scrollLeft ?? 0;
+	touchStartScrollY = scrollRef?.scrollTop ?? 0;
+	isTouchScrolling = false;
+}
+function handleTouchMove(e) {
+	if (e.touches.length !== 1 || !scrollRef) return;
+	const touch = e.touches[0];
+	const deltaX = touch.clientX - touchStartClientX;
+	const deltaY = touch.clientY - touchStartClientY;
+	if (!isTouchScrolling && (Math.abs(deltaX) > 8 || Math.abs(deltaY) > 8)) {
+		isTouchScrolling = true;
+	}
+	if (!isTouchScrolling) return;
+	e.preventDefault();
+	scrollRef.scrollLeft = touchStartScrollX - deltaX;
+	scrollRef.scrollTop = touchStartScrollY - deltaY;
+}
+function handleTouchEnd(e) {
+	const touch = e.changedTouches[0];
+	if (!touch) return;
+	const point = getLocalPointFromClient(touch.clientX, touch.clientY);
+	const wasScrolling = isTouchScrolling;
+	isTouchScrolling = false;
+	if (!point || wasScrolling) return;
+	handleTouchTap(point.offsetX, point.offsetY);
+}
 </script>
 
 <div