@warkypublic/svelix 0.1.46 → 0.2.1

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

@@ -1,844 +1,524 @@
-<script lang="ts">
-  import { untrack } from "svelte";
-  import type { Snippet } from "svelte";
-  import type { FilterOption } from "@warkypublic/resolvespec-js";
-  import Gridler from "./Gridler.svelte";
-  import GridlerSearchToggle from "./GridlerSearchToggle.svelte";
-  import BetterMenu from "../../BetterMenu/BetterMenu.svelte";
-  import type {
-    BetterMenuInstance,
-    BetterMenuInstanceItem,
-  } from "../../BetterMenu/types.js";
-  import { GridlerResolveSpecAdapter } from "../adapters/GridlerResolveSpecAdapter.js";
-  import { GridlerRestHeaderSpecAdapter } from "../adapters/GridlerRestHeaderSpecAdapter.js";
-  import { reorderColumns } from "../utils/columns.js";
-  import { applyLocalFilter, buildSearchFilters, gridColumnFiltersToFilterOptions } from "../utils/filters.js";
-  import { applyLocalSort, sortOrderToSortOptions } from "../utils/sort.js";
-  import { makeGetCellContent } from "../utils/cellContent.js";
-  import type {
-    GridlerCell,
-    GridlerColumn,
-    GridlerContextMenuItem,
-    GridlerProps,
-    GridlerAdapterConfig,
-    GridColumnSortOrder,
-    GridColumnFilters,
-    Item,
-    Selection,
-    VisibleRange,
-  } from "../types";
-
-  export interface Props
-    extends Omit<
-      Partial<GridlerProps>,
-      | "columns"
-      | "rows"
-      | "getCellContent"
-      | "searchValue"
-      | "onSearchValueChange"
-      | "onVisibleRangeChange"
-      | "onCellDblClick"
-      | "onRowClick"
-      | "onRowContextMenu"
-    > {
-    columns: GridlerColumn[];
-
-    /**
-     * Optional row data. When provided (and `getCellContent` is omitted), the default
-     * cell renderer uses `columns[col].dataKey ?? columns[col].id` as the field name on each row object.
-     * Also accepts a function returning a Promise for async data loading.
-     */
-    data?:
-      | Record<string, unknown>[]
-      | (() => Promise<Record<string, unknown>[]>);
-
-    /** If provided, takes precedence over `data` rendering. */
-    getCellContent?: (item: Item) => GridlerCell;
-    /** Total rows. Defaults to `data.length`. */
-    rows?: number;
-
-    /** If true, reorders `columns` locally when the user drags headers. */
-    manageColumns?: boolean;
-    /** Optional notification when local column order changes. */
-    onColumnsChange?: (columns: GridlerColumn[]) => void;
-
-    /** Controlled search value (optional). */
-    searchValue?: string;
-    /** Uncontrolled initial search value (only used when `searchValue` is undefined). */
-    defaultSearchValue?: string;
-    /** Called whenever the search input changes. */
-    onSearchValueChange?: (value: string) => void;
-
-    /** Called when `GridlerFull` mutates its internal `data` in response to edits. */
-    onDataChange?: (data: Record<string, unknown>[]) => Promise<void>;
-
-    /** Called on cell double-click with the cell item, cell content, and resolved row data. */
-    onCellDblClick?: (
-      item: Item,
-      cell: GridlerCell,
-      rowData: Record<string, unknown> | undefined,
-    ) => void;
-    /** Called on row double-click with the row index and resolved row data. */
-    onRowDblClick?: (
-      row: number,
-      rowData: Record<string, unknown> | undefined,
-    ) => void;
-    /** Called on row click with the row index and resolved row data. */
-    onRowClick?: (
-      row: number,
-      rowData: Record<string, unknown> | undefined,
-    ) => void;
-    /** Called on row context-menu with the row index, resolved row data, and click coordinates. */
-    onRowContextMenu?: (
-      row: number,
-      rowData: Record<string, unknown> | undefined,
-      x: number,
-      y: number,
-    ) => void;
-
-    // ── Server-side fetching ──────────────────────────────────────────────────
-    // Use dataSource + dataSourceOptions (from GridCommonProps) for server config.
-    // dataSource: 'resolvespec' | 'headerspec' | 'websockspec' | 'local' | 'custom'
-    // dataSourceOptions: { url, authToken, schema, entity, uniqueID, headers }
-
-    /** Rows per cursor-forward page. Defaults to 200. */
-    pageSize?: number;
-    /**
-     * Shorthand for dataSourceOptions.uniqueID.
-     * Row field whose value is passed as `cursor_forward` on subsequent requests.
-     * Defaults to 'id'.
-     */
-    uniqueID?: string;
-    /**
-     * When true, the search input value is translated into `ilike` filters sent to
-     * the server instead of only being used for client-side highlighting.
-     */
-    serverSideSearch?: boolean;
-    /**
-     * Columns searched when `serverSideSearch` is true.
-     * Defaults to all column IDs when omitted.
-     */
-    searchColumns?: string[];
-    /** Called when a server fetch fails. */
-    onLoadError?: (error: string) => void;
-
-    /**
-     * Bindable. Reflects the server-reported total row count.
-     * Updated after every successful page fetch; 0 until the first response.
-     * Read-only from the parent — do not write this value.
-     */
-    total?: number;
-    /**
-     * Bindable. `true` while any server fetch is in flight (initial load or next-page).
-     * Read-only from the parent — do not write this value.
-     */
-    loading?: boolean;
-
-    /**
-     * Extra items appended to the built-in context menu (Refresh, Clear Search, Clear Filters, Clear Sort).
-     * Pass a separator item `{ id: 'sep', kind: 'separator', label: '' }` to group your items.
-     */
-    menuItems?: GridlerContextMenuItem[];
-    /** Called when any context menu item is selected (built-in or custom). */
-    onMenuItemSelect?: (item: GridlerContextMenuItem, rowData?: Record<string, unknown>) => void;
-
-    children?: Snippet;
-  }
-
-  let {
-    columns,
-    data,
-    getCellContent,
-    rows,
-    manageColumns = true,
-    onColumnsChange,
-    searchValue,
-    defaultSearchValue = "",
-    onSearchValueChange,
-    onDataChange,
-    // server-side (via GridCommonProps dataSource/dataSourceOptions)
-    dataSource,
-    dataSourceOptions,
-    pageSize = 200,
-    uniqueID,
-    serverSideSearch = false,
-    searchColumns,
-    onLoadError,
-    total = $bindable(0),
-    loading = $bindable(false),
-    // GridCommonProps filters/sort (generic types)
-    filters,
-    onFilterChange,
-    sortOrder,
-    onSortOrderChange,
-    // GridCommonProps selectedItems
-    selectedItems: _selectedItems,
-    onSelectedItemsChange,
-    // GridCommonProps settings
-    settings,
-    // gridler pass-through
-    fixedColumns = 0,
-    rowMarkers,
-    showSearch,
-    height = 500,
-    onColumnMoved,
-    onCellEdited,
-    onCellDblClick,
-    onRowDblClick,
-    onRowClick,
-    onRowContextMenu,
-    onMenuClick,
-    onSelectionChange,
-    onCellEvent,
-    onGridEvent,
-    menuItems,
-    onMenuItemSelect,
-    children,
-    ...rest
-  }: Props = $props();
-
-  // ── Column management ─────────────────────────────────────────────────────
-
-  let columnsState = $state<GridlerColumn[]>(columns.slice());
-  const columnsSignature = $derived.by(() =>
-    columns.map((c) => `${c.id}:${c.title}:${c.width}`).join("|"),
-  );
-  let lastColumnsSignature = $state(columnsSignature);
-
-  $effect(() => {
-    if (columnsSignature === untrack(() => lastColumnsSignature)) return;
-    columnsState = columns.slice();
-    lastColumnsSignature = columnsSignature;
-  });
-
-  // ── Local data management (non-server mode) ────────────────────────────────
-
-  let dataState = $state<Record<string, unknown>[]>(
-    Array.isArray(data) ? data.slice() : [],
-  );
-  let lastDataRef = $state<
-    | Record<string, unknown>[]
-    | (() => Promise<Record<string, unknown>[]>)
-    | undefined
-  >(data);
-
-  $effect(() => {
-    if (!data) return;
-    if (data === untrack(() => lastDataRef)) return;
-    lastDataRef = data;
-    if (typeof data === "function") {
-      data()
-        .then((result) => {
-          dataState = result;
-          onGridEvent?.("load");
-        })
-        .catch((e) => {
-          const msg = e instanceof Error ? e.message : "Failed to load data";
-          onLoadError?.(msg);
-        });
-    } else {
-      dataState = data.slice();
-      onGridEvent?.("load");
-    }
-  });
-
-  // ── Server config (resolved from dataSource / dataSourceOptions) ───────────
-
-  const resolvedUrl = $derived(dataSourceOptions?.url);
-  const resolvedToken = $derived(dataSourceOptions?.authToken);
-  const resolvedSchema = $derived(dataSourceOptions?.schema);
-  const resolvedEntity = $derived(dataSourceOptions?.entity);
-  const resolvedUniqueID = $derived(
-    dataSourceOptions?.uniqueID ?? uniqueID ?? "id",
-  );
-
-  const isServerMode = $derived(
-    !!(
-      dataSource &&
-      dataSource !== "local" &&
-      dataSource !== "custom" &&
-      resolvedUrl &&
-      resolvedSchema &&
-      resolvedEntity
-    ),
-  );
-
-  // ── Search visibility ──────────────────────────────────────────────────────
-
-  const resolvedShowSearch = $derived(
-    showSearch ?? settings?.showSearch ?? false,
-  );
-  let showSearchBar = $state(resolvedShowSearch);
-
-  function toggleSearch() {
-    showSearchBar = !showSearchBar;
-    if (!showSearchBar) emitSearchValue("");
-  }
-
-  function closeSearch() {
-    showSearchBar = false;
-    emitSearchValue("");
-  }
-
-  // ── Search ─────────────────────────────────────────────────────────────────
-
-  let internalSearchValue = $state(defaultSearchValue);
-  $effect(() => {
-    if (searchValue === undefined) return;
-    internalSearchValue = searchValue;
-  });
-
-  const resolvedSearchValue = $derived(searchValue ?? internalSearchValue);
-
-  function emitSearchValue(value: string) {
-    if (searchValue === undefined) {
-      internalSearchValue = value;
-    }
-    onSearchValueChange?.(value);
-    onGridEvent?.("search_changed", undefined, undefined, undefined, { searchValue: value });
-  }
-
-  // ── Context menu ───────────────────────────────────────────────────────────
-
-  let refreshTrigger = $state(0);
-  let contextMenuRowData = $state<Record<string, unknown> | undefined>(undefined);
-  let menu = $state<{
-    show: (
-      id: string,
-      options?: Partial<Omit<BetterMenuInstance, "id">>,
-    ) => void;
-    hide: (id: string) => void;
-  } | null>(null);
-
-  function refresh() {
-    if (isServerMode) {
-      refreshTrigger++;
-    } else if (typeof data === "function") {
-      data()
-        .then((result) => {
-          dataState = result;
-        })
-        .catch((e) => {
-          const msg = e instanceof Error ? e.message : "Failed to load data";
-          onLoadError?.(msg);
-        });
-    }
-  }
-
-  function buildMenuItems(): BetterMenuInstanceItem[] {
-    const items: BetterMenuInstanceItem[] = [];
-
-    items.push({ label: "Refresh", onClick: () => refresh() });
-
-    const _hasSearch = resolvedSearchValue.length > 0;
-    const _hasFilters = Object.keys(resolvedFilters).length > 0;
-    const _hasSort = Object.values(resolvedSortOrder).some((d) => d !== "none");
-
-    if (_hasSearch || _hasFilters || _hasSort) {
-      items.push({ isDivider: true });
-      if (_hasSearch)
-        items.push({
-          label: "Clear Search",
-          onClick: () => emitSearchValue(""),
-        });
-      if (_hasFilters)
-        items.push({
-          label: "Clear Filters",
-          onClick: () => handleFilterChange({}),
-        });
-      if (_hasSort)
-        items.push({
-          label: "Clear Sort",
-          onClick: () => handleSortOrderChange({}),
-        });
-    }
-
-    if (menuItems?.length) {
-      items.push({ isDivider: true });
-      for (const item of menuItems) {
-        if (item.kind === "separator") {
-          items.push({ isDivider: true });
-        } else {
-          items.push({
-            id: item.id,
-            label: item.label,
-            icon: item.icon,
-            onClick: () => {
-              item.onselect?.(contextMenuRowData);
-              onMenuItemSelect?.(item, contextMenuRowData);
-            },
-          });
-        }
-      }
-    }
-
-    return items;
-  }
-
-  // ── Filter panel ───────────────────────────────────────────────────────────
-
-  type GridFilterOp = NonNullable<GridColumnFilters[string]["op"]>;
-
-  let filterPanelColId = $state("");
-  let filterPanelColTitle = $state("");
-  let filterPanelOp = $state<GridFilterOp>("contains");
-  let filterPanelValue = $state("");
-  let filterPanelValue2 = $state("");
-
-  // Snippet reference captured from the template — assigned via {(filterRenderer ??= filterForm, '')}
-  let filterRenderer = $state<Snippet<
-    [{ id: string; onClose: () => void }]
-  > | null>(null);
-
-  function openFilterPanel(
-    colId: string,
-    colTitle: string,
-    x: number,
-    y: number,
-  ) {
-    const existing = resolvedFilters[colId];
-    filterPanelColId = colId;
-    filterPanelColTitle = colTitle;
-    filterPanelOp = existing?.op ?? "contains";
-    filterPanelValue = existing?.value ?? "";
-    filterPanelValue2 = existing?.value2 ?? "";
-    menu?.show("gridler-filter-panel", {
-      x,
-      y,
-      renderer: filterRenderer as unknown as (props: Record<string, unknown>) => unknown,
-    });
-  }
-
-  function applyFilterPanel() {
-    const needsValue =
-      filterPanelOp !== "isNull" && filterPanelOp !== "isNotNull";
-    if (needsValue && !filterPanelValue) {
-      const next = { ...resolvedFilters };
-      delete next[filterPanelColId];
-      handleFilterChange(next);
-    } else {
-      const entry: GridColumnFilters[string] = { value: filterPanelValue, op: filterPanelOp };
-      if ((filterPanelOp === "between" || filterPanelOp === "notBetween") && filterPanelValue2) {
-        entry.value2 = filterPanelValue2;
-      }
-      handleFilterChange({
-        ...resolvedFilters,
-        [filterPanelColId]: entry,
-      });
-    }
-    menu?.hide("gridler-filter-panel");
-  }
-
-  // ── Column header context menu ─────────────────────────────────────────────
-
-  function handleHeaderContextMenu(colIndex: number, x: number, y: number) {
-    const column = columnsState[colIndex];
-    if (!column) return;
-
-    const colId = column.id;
-    const currentSort = resolvedSortOrder[colId] ?? "none";
-    const currentFilter = resolvedFilters[colId];
-    const isSortable = column.disableSort !== true;
-    const isFilterable = column.disableFilter !== true;
-
-    const items: BetterMenuInstanceItem[] = [];
-
-    // Column name (non-clickable header label)
-    items.push({ label: column.title });
-    items.push({ isDivider: true });
-
-    // Sort section
-    if (isSortable) {
-      items.push({
-        label: `${currentSort === "asc" ? "✓ " : ""}Sort Ascending`,
-        onClick: () =>
-          handleSortOrderChange({
-            ...resolvedSortOrder,
-            [colId]: currentSort === "asc" ? "none" : "asc",
-          }),
-      });
-      items.push({
-        label: `${currentSort === "desc" ? "✓ " : ""}Sort Descending`,
-        onClick: () =>
-          handleSortOrderChange({
-            ...resolvedSortOrder,
-            [colId]: currentSort === "desc" ? "none" : "desc",
-          }),
-      });
-      if (currentSort !== "none") {
-        items.push({
-          label: "Clear Sort",
-          onClick: () => {
-            const next = { ...resolvedSortOrder, [colId]: "none" as const };
-            handleSortOrderChange(next);
-          },
-        });
-      }
-    }
-
-    // Filter section
-    if (isFilterable) {
-      items.push({ isDivider: true });
-      if (currentFilter) {
-        items.push({ label: `Filter: ${currentFilter.value}` });
-        items.push({
-          label: "Edit Filter…",
-          onClick: () => openFilterPanel(colId, column.title, x, y),
-        });
-        items.push({
-          label: "Clear Filter",
-          onClick: () => {
-            const next = { ...resolvedFilters };
-            delete next[colId];
-            handleFilterChange(next);
-          },
-        });
-      } else {
-        items.push({
-          label: "Set Filter…",
-          onClick: () => openFilterPanel(colId, column.title, x, y),
-        });
-      }
-    }
-
-    // Search section
-    if (resolvedSearchValue) {
-      items.push({ isDivider: true });
-      items.push({ label: `Search: "${resolvedSearchValue}"` });
-      items.push({ label: "Clear Search", onClick: () => emitSearchValue("") });
-    }
-
-    menu?.show("gridler-column-menu", { x, y, items });
-  }
-
-  // ── Column reorder ─────────────────────────────────────────────────────────
-
-  function handleColumnReorder(startIndex: number, endIndex: number) {
-    const next = reorderColumns(columnsState, startIndex, endIndex);
-    if (next === columnsState) return;
-    columnsState = next;
-    onColumnsChange?.(next);
-  }
-
-  // ── Filter state (controlled or internal) ─────────────────────────────────
-
-  let internalFilters = $state<GridColumnFilters>({});
-  const resolvedFilters = $derived(filters ?? internalFilters);
-
-  function handleFilterChange(next: GridColumnFilters) {
-    if (filters === undefined) internalFilters = next;
-    onFilterChange?.(next);
-    onGridEvent?.("filter_changed", undefined, undefined, undefined, { filters: next });
-  }
-
-
-  // ── Server-side state ──────────────────────────────────────────────────────
-
-  let serverData = $state<Record<string, unknown>[]>([]);
-  let serverTotal = $state(0);
-  let serverCursor = $state<string | undefined>(undefined);
-  let serverFetchVersion = 0;
-  let serverLoading = $state(false);
-  let serverAllLoaded = $state(false);
-
-  $effect(() => { total = serverTotal; });
-  $effect(() => { loading = serverLoading; });
-  let serverError = $state<string | null>(null);
-
-  type Adapter = GridlerResolveSpecAdapter | GridlerRestHeaderSpecAdapter;
-
-  const serverAdapter = $derived.by((): Adapter | null => {
-    if (!resolvedUrl || !resolvedSchema || !resolvedEntity) return null;
-    const config: GridlerAdapterConfig = {
-      url: resolvedUrl,
-      token: resolvedToken,
-      schema: resolvedSchema,
-      entity: resolvedEntity,
-      uniqueID: resolvedUniqueID,
-      extraOptions: dataSourceOptions?.extraOptions,
-    };
-    return dataSource === "headerspec"
-      ? new GridlerRestHeaderSpecAdapter(config)
-      : new GridlerResolveSpecAdapter(config);
-  });
-
-  function buildAllFilters(search: string | null): FilterOption[] {
-    const base = Object.keys(resolvedFilters).length
-      ? gridColumnFiltersToFilterOptions(resolvedFilters)
-      : [];
-    if (!search?.trim()) return base;
-    return [...base, ...buildSearchFilters(search, columnsState, searchColumns)];
-  }
-
-  // Compute column fields (dataKey ?? id) merged with hotfields, deduped.
-  const resolvedFields = $derived.by(() => {
-    const columnFields = columnsState.map((c) => c.dataKey ?? c.id);
-    const hotfields = dataSourceOptions?.hotfields ?? [];
-    const seen = new Set(columnFields);
-    const extra = hotfields.filter((f) => !seen.has(f));
-    return [...columnFields, ...extra];
-  });
-
-  // ── Sort state (controlled or internal) ───────────────────────────────────
-
-  let internalSortOrder = $state<GridColumnSortOrder>({});
-  const resolvedSortOrder = $derived(sortOrder ?? internalSortOrder);
-
-  function handleSortOrderChange(order: GridColumnSortOrder) {
-    if (sortOrder === undefined) internalSortOrder = order;
-    onSortOrderChange?.(order);
-    onGridEvent?.("sort_changed", undefined, undefined, undefined, { sortOrder: order });
-  }
-
-  const resolvedSort = $derived(
-    Object.values(resolvedSortOrder).some((d) => d !== "none")
-      ? sortOrderToSortOptions(resolvedSortOrder)
-      : undefined,
-  );
-
-  // ── Local sorted/filtered data ────────────────────────────────────────────
-
-  const sortedDataState = $derived(applyLocalSort(dataState, resolvedSort ?? [], columnsState));
-  const filteredDataState = $derived(applyLocalFilter(sortedDataState, resolvedFilters, columnsState));
-
-  // Full reset + first page fetch.
-  $effect(() => {
-    const _adapter = serverAdapter;
-    const _sort = resolvedSort;
-    const _search = serverSideSearch ? resolvedSearchValue : null;
-    const _pageSize = pageSize;
-
-    // Track resolvedFilters so internal filter changes also trigger a re-fetch.
-    const _filters = resolvedFilters;
-    // Track manual refresh trigger.
-    const _refresh = refreshTrigger;
-
-    // _refresh is tracked to trigger re-fetch on manual refresh.
-    void _refresh;
-    if (!_adapter) return;
-
-    let cancelled = false;
-    serverFetchVersion++;
-    serverLoading = true;
-    serverError = null;
-    serverData = [];
-    serverTotal = 0;
-    serverCursor = undefined;
-    serverAllLoaded = false;
-
-    const columnFilters = Object.keys(_filters).length
-      ? gridColumnFiltersToFilterOptions(_filters)
-      : [];
-    const searchFilters = _search?.trim()
-      ? buildSearchFilters(_search, columnsState, searchColumns)
-      : [];
-    const allFilters = [...columnFilters, ...searchFilters];
-
-    _adapter
-      .readPage(_pageSize, undefined, _sort, allFilters, untrack(() => resolvedFields))
-      .then((result) => {
-        if (cancelled) return;
-        serverData = result.data;
-        serverTotal = result.total;
-        serverCursor = result.nextCursor;
-        serverAllLoaded = result.data.length < _pageSize || !result.nextCursor;
-        onGridEvent?.("load");
-      })
-      .catch((e) => {
-        if (cancelled) return;
-        const msg = e instanceof Error ? e.message : "Failed to load data";
-        serverError = msg;
-        onLoadError?.(msg);
-      })
-      .finally(() => {
-        if (!cancelled) serverLoading = false;
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  });
-
-  // Append next cursor page.
-  async function loadNextPage() {
-    const _adapter = serverAdapter;
-    if (!_adapter || serverLoading || serverAllLoaded || !serverCursor) return;
-
-    const cursorSnapshot = serverCursor;
-    const versionSnapshot = serverFetchVersion;
-    serverLoading = true;
-
-    const allFilters = buildAllFilters(
-      serverSideSearch ? resolvedSearchValue : null,
-    );
-
-    try {
-      const result = await _adapter.readPage(
-        pageSize,
-        cursorSnapshot,
-        resolvedSort,
-        allFilters,
-        resolvedFields,
-      );
-      if (serverFetchVersion !== versionSnapshot) return;
-      serverData = [...serverData, ...result.data];
-      serverCursor = result.nextCursor;
-      serverAllLoaded =
-        result.data.length < pageSize ||
-        !result.nextCursor ||
-        result.nextCursor === cursorSnapshot;
-      onGridEvent?.("page_loaded", undefined, undefined, undefined, { data: result.data, total: serverData.length });
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : "Failed to load page";
-      onLoadError?.(msg);
-    } finally {
-      serverLoading = false;
-    }
-  }
-
-  // Trigger next page when the visible range nears the end of loaded data.
-  function handleVisibleRangeChange(range: VisibleRange) {
-    untrack(() => {
-      if (!isServerMode || serverLoading || serverAllLoaded || !serverCursor)
-        return;
-      const PREFETCH_THRESHOLD = Math.ceil(pageSize / 2);
-      if (range.lastRow >= serverData.length - PREFETCH_THRESHOLD) {
-        loadNextPage();
-      }
-    });
-  }
-
-  // ── Double-click ───────────────────────────────────────────────────────────
-
-  function resolveRowData(row: number): Record<string, unknown> | undefined {
-    return isServerMode ? serverData[row] : filteredDataState[row];
-  }
-
-  function handleCellDblClick(item: Item, cell: GridlerCell) {
-    const rowData = resolveRowData(item[1]);
-    onCellDblClick?.(item, cell, rowData);
-    onRowDblClick?.(item[1], rowData);
-  }
-
-  function handleRowClick(row: number) {
-    onRowClick?.(row, resolveRowData(row));
-  }
-
-  function handleRowContextMenu(row: number, x: number, y: number) {
-    contextMenuRowData = resolveRowData(row);
-    menu?.show("gridler-menu", { x, y, items: buildMenuItems() });
-    onRowContextMenu?.(row, contextMenuRowData, x, y);
-  }
-
-  // ── Selection → selectedItems bridge ──────────────────────────────────────
-
-  let internalSelectedItems = $state<Record<string, unknown>[]>([]);
-
-  $effect(() => {
-    if (_selectedItems === undefined) return;
-    internalSelectedItems = Array.isArray(_selectedItems) ? _selectedItems : [];
-  });
-
-  function handleSelectionChange(sel: Selection) {
-    let items: Record<string, unknown>[] = [];
-    if (sel.type === "row") {
-      items = sel.rows
-        .map((i) => resolveRowData(i))
-        .filter((r): r is Record<string, unknown> => r !== undefined);
-    } else if (sel.type === "cell") {
-      const row = resolveRowData(sel.item[1]);
-      if (row) items = [row];
-    } else if (sel.type === "range") {
-      const minRow = Math.min(sel.start[1], sel.end[1]);
-      const maxRow = Math.max(sel.start[1], sel.end[1]);
-      for (let i = minRow; i <= maxRow; i++) {
-        const row = resolveRowData(i);
-        if (row) items.push(row);
-      }
-    }
-    internalSelectedItems = items;
-    if (items.length > 0) onSelectedItemsChange?.(items);
-    onSelectionChange?.(sel, items.length > 0 ? items : undefined);
-  }
-
-  // ── Settings change event ─────────────────────────────────────────────────
-
-  let lastSettings = $state<typeof settings>(undefined);
-  $effect(() => {
-    if (settings === untrack(() => lastSettings)) return;
-    lastSettings = settings;
-    onGridEvent?.("settings_changed", undefined, undefined, undefined, { settings });
-  });
-
-  // ── Cell content ───────────────────────────────────────────────────────────
-
-  const serverGetCellContent = $derived(makeGetCellContent(serverData, columnsState));
-  const localGetCellContent = $derived(makeGetCellContent(filteredDataState, columnsState));
-
-  const resolvedGetCellContent = $derived.by(() => {
-    if (getCellContent) return getCellContent;
-    if (isServerMode) return serverGetCellContent;
-    return localGetCellContent;
-  });
-
-  // ── Row count ──────────────────────────────────────────────────────────────
-
-  const resolvedRows = $derived.by(() => {
-    if (isServerMode) return serverTotal;
-    if (rows != null) return rows;
-    return filteredDataState.length;
-  });
-
-  // ── Cell editing ───────────────────────────────────────────────────────────
-
-  async function applyEdit(item: Item, value: GridlerCell) {
-    if (getCellContent || isServerMode) return;
-    const [col, row] = item;
-    const colDef = columnsState[col];
-    const key = colDef?.dataKey ?? colDef?.id;
-    if (!key) return;
-    const existing = filteredDataState[row];
-    if (!existing) return;
-    const originalIndex = dataState.indexOf(existing);
-    if (originalIndex === -1) return;
-    const next = dataState.slice();
-    next[originalIndex] = {
-      ...existing,
-      [key]: value.data ?? value.displayData,
-    };
-    dataState = next;
-    await onDataChange?.(next);
-    onGridEvent?.("data_changed", next[originalIndex], columnsState[col], undefined, { data: next });
-  }
-
-  async function handleGridMenuClick(d?: {
-    x: number;
-    y: number;
-    item?: Record<string, unknown>;
-    column?: GridlerColumn;
-  }) {
-    contextMenuRowData = undefined;
-    if (onMenuClick) {
-      await onMenuClick(
-        d?.item,
-        d?.column,
-        d ? { x: d.x, y: d.y } : undefined,
-      );
-      return;
-    }
-    if (!d) return;
-    menu?.show("gridler-menu", { x: d.x, y: d.y, items: buildMenuItems() });
-  }
-
-  // ── Public API ────────────────────────────────────────────────────────────
-
-  export function getSelectedRows(): Record<string, unknown>[] {
-    return internalSelectedItems;
-  }
-
-  export function getLoadedData(): Record<string, unknown>[] {
-    return isServerMode ? serverData : filteredDataState;
-  }
+<script lang="ts">import { untrack } from "svelte";
+import Gridler from "./Gridler.svelte";
+import GridlerSearchToggle from "./GridlerSearchToggle.svelte";
+import BetterMenu from "../../BetterMenu/BetterMenu.svelte";
+import { GridlerResolveSpecAdapter } from "../adapters/GridlerResolveSpecAdapter.js";
+import { GridlerRestHeaderSpecAdapter } from "../adapters/GridlerRestHeaderSpecAdapter.js";
+import { reorderColumns } from "../utils/columns.js";
+import { applyLocalFilter, buildSearchFilters, gridColumnFiltersToFilterOptions } from "../utils/filters.js";
+import { applyLocalSort, sortOrderToSortOptions } from "../utils/sort.js";
+import { makeGetCellContent } from "../utils/cellContent.js";
+import { getServerRenderableRows } from "../utils/serverPaging.js";
+let { columns, data, getCellContent, rows, manageColumns = true, onColumnsChange, searchValue, defaultSearchValue = "", onSearchValueChange, onDataChange, dataSource, dataSourceOptions, pageSize = 200, uniqueID, serverSideSearch = false, searchColumns, onLoadError, total = $bindable(0), loading = $bindable(false), filters, onFilterChange, sortOrder, onSortOrderChange, selectedItems: _selectedItems, onSelectedItemsChange, settings, fixedColumns = 0, rowMarkers, showSearch, height = 500, onColumnMoved, onCellEdited, onCellDblClick, onRowDblClick, onRowClick, onRowContextMenu, onMenuClick, onSelectionChange, onCellEvent, onGridEvent, menuItems, onMenuItemSelect, children, ...rest } = $props();
+// ── Column management ─────────────────────────────────────────────────────
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; $effect below syncs changes
+let columnsState = $state(columns.slice());
+const columnsSignature = $derived.by(() => columns.map((c) => `${c.id}:${c.title}:${c.width}`).join("|"));
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; $effect below syncs changes
+let lastColumnsSignature = $state(columnsSignature);
+$effect(() => {
+	if (columnsSignature === untrack(() => lastColumnsSignature)) return;
+	columnsState = columns.slice();
+	lastColumnsSignature = columnsSignature;
+});
+// ── Local data management (non-server mode) ────────────────────────────────
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; $effect below syncs changes
+let dataState = $state(Array.isArray(data) ? data.slice() : []);
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; $effect below syncs changes
+let lastDataRef = $state(data);
+$effect(() => {
+	if (!data) return;
+	if (data === untrack(() => lastDataRef)) return;
+	lastDataRef = data;
+	if (typeof data === "function") {
+		data().then((result) => {
+			dataState = result;
+			onGridEvent?.("load");
+		}).catch((e) => {
+			const msg = e instanceof Error ? e.message : "Failed to load data";
+			onLoadError?.(msg);
+		});
+	} else {
+		dataState = data.slice();
+		onGridEvent?.("load");
+	}
+});
+// ── Server config (resolved from dataSource / dataSourceOptions) ───────────
+const resolvedUrl = $derived(dataSourceOptions?.url);
+const resolvedToken = $derived(dataSourceOptions?.authToken);
+const resolvedSchema = $derived(dataSourceOptions?.schema);
+const resolvedEntity = $derived(dataSourceOptions?.entity);
+const resolvedUniqueID = $derived(dataSourceOptions?.uniqueID ?? uniqueID ?? "id");
+const isServerMode = $derived(!!(dataSource && dataSource !== "local" && dataSource !== "custom" && resolvedUrl && resolvedSchema && resolvedEntity));
+// ── Search visibility ──────────────────────────────────────────────────────
+const resolvedShowSearch = $derived(showSearch ?? settings?.showSearch ?? false);
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture
+let showSearchBar = $state(resolvedShowSearch);
+function toggleSearch() {
+	showSearchBar = !showSearchBar;
+	if (!showSearchBar) emitSearchValue("");
+}
+function closeSearch() {
+	showSearchBar = false;
+	emitSearchValue("");
+}
+// ── Search ─────────────────────────────────────────────────────────────────
+// eslint-disable-next-line svelte/no-unused-svelte-ignore
+// svelte-ignore state_referenced_locally -- intentional initial capture; $effect below syncs controlled value
+let internalSearchValue = $state(defaultSearchValue);
+$effect(() => {
+	if (searchValue === undefined) return;
+	internalSearchValue = searchValue;
+});
+const resolvedSearchValue = $derived(searchValue ?? internalSearchValue);
+function emitSearchValue(value) {
+	if (searchValue === undefined) {
+		internalSearchValue = value;
+	}
+	onSearchValueChange?.(value);
+	onGridEvent?.("search_changed", undefined, undefined, undefined, { searchValue: value });
+}
+// ── Context menu ───────────────────────────────────────────────────────────
+let refreshTrigger = $state(0);
+let contextMenuRowData = $state(undefined);
+let menu = $state(null);
+function refresh() {
+	if (isServerMode) {
+		refreshTrigger++;
+	} else if (typeof data === "function") {
+		data().then((result) => {
+			dataState = result;
+		}).catch((e) => {
+			const msg = e instanceof Error ? e.message : "Failed to load data";
+			onLoadError?.(msg);
+		});
+	}
+}
+function buildMenuItems() {
+	const items = [];
+	items.push({
+		label: "Refresh",
+		onClick: () => refresh()
+	});
+	const _hasSearch = resolvedSearchValue.length > 0;
+	const _hasFilters = Object.keys(resolvedFilters).length > 0;
+	const _hasSort = Object.values(resolvedSortOrder).some((d) => d !== "none");
+	if (_hasSearch || _hasFilters || _hasSort) {
+		items.push({ isDivider: true });
+		if (_hasSearch) items.push({
+			label: "Clear Search",
+			onClick: () => emitSearchValue("")
+		});
+		if (_hasFilters) items.push({
+			label: "Clear Filters",
+			onClick: () => handleFilterChange({})
+		});
+		if (_hasSort) items.push({
+			label: "Clear Sort",
+			onClick: () => handleSortOrderChange({})
+		});
+	}
+	if (menuItems?.length) {
+		items.push({ isDivider: true });
+		for (const item of menuItems) {
+			if (item.kind === "separator") {
+				items.push({ isDivider: true });
+			} else {
+				items.push({
+					id: item.id,
+					label: item.label,
+					icon: item.icon,
+					onClick: () => {
+						item.onselect?.(contextMenuRowData);
+						onMenuItemSelect?.(item, contextMenuRowData);
+					}
+				});
+			}
+		}
+	}
+	return items;
+}
+let filterPanelColId = $state("");
+let filterPanelColTitle = $state("");
+let filterPanelOp = $state("contains");
+let filterPanelValue = $state("");
+let filterPanelValue2 = $state("");
+// Snippet reference captured from the template — assigned via {(filterRenderer ??= filterForm, '')}
+let filterRenderer = $state(null);
+function openFilterPanel(colId, colTitle, x, y) {
+	const existing = resolvedFilters[colId];
+	filterPanelColId = colId;
+	filterPanelColTitle = colTitle;
+	filterPanelOp = existing?.op ?? "contains";
+	filterPanelValue = existing?.value ?? "";
+	filterPanelValue2 = existing?.value2 ?? "";
+	menu?.show("gridler-filter-panel", {
+		x,
+		y,
+		renderer: filterRenderer
+	});
+}
+function applyFilterPanel() {
+	const needsValue = filterPanelOp !== "isNull" && filterPanelOp !== "isNotNull";
+	if (needsValue && !filterPanelValue) {
+		const next = { ...resolvedFilters };
+		delete next[filterPanelColId];
+		handleFilterChange(next);
+	} else {
+		const entry = {
+			value: filterPanelValue,
+			op: filterPanelOp
+		};
+		if ((filterPanelOp === "between" || filterPanelOp === "notBetween") && filterPanelValue2) {
+			entry.value2 = filterPanelValue2;
+		}
+		handleFilterChange({
+			...resolvedFilters,
+			[filterPanelColId]: entry
+		});
+	}
+	menu?.hide("gridler-filter-panel");
+}
+// ── Column header context menu ─────────────────────────────────────────────
+function handleHeaderContextMenu(colIndex, x, y) {
+	const column = columnsState[colIndex];
+	if (!column) return;
+	const colId = column.id;
+	const currentSort = resolvedSortOrder[colId] ?? "none";
+	const currentFilter = resolvedFilters[colId];
+	const isSortable = column.disableSort !== true;
+	const isFilterable = column.disableFilter !== true;
+	const items = [];
+	// Column name (non-clickable header label)
+	items.push({ label: column.title });
+	items.push({ isDivider: true });
+	// Sort section
+	if (isSortable) {
+		items.push({
+			label: `${currentSort === "asc" ? "✓ " : ""}Sort Ascending`,
+			onClick: () => handleSortOrderChange({
+				...resolvedSortOrder,
+				[colId]: currentSort === "asc" ? "none" : "asc"
+			})
+		});
+		items.push({
+			label: `${currentSort === "desc" ? "✓ " : ""}Sort Descending`,
+			onClick: () => handleSortOrderChange({
+				...resolvedSortOrder,
+				[colId]: currentSort === "desc" ? "none" : "desc"
+			})
+		});
+		if (currentSort !== "none") {
+			items.push({
+				label: "Clear Sort",
+				onClick: () => {
+					const next = {
+						...resolvedSortOrder,
+						[colId]: "none"
+					};
+					handleSortOrderChange(next);
+				}
+			});
+		}
+	}
+	// Filter section
+	if (isFilterable) {
+		items.push({ isDivider: true });
+		if (currentFilter) {
+			items.push({ label: `Filter: ${currentFilter.value}` });
+			items.push({
+				label: "Edit Filter…",
+				onClick: () => openFilterPanel(colId, column.title, x, y)
+			});
+			items.push({
+				label: "Clear Filter",
+				onClick: () => {
+					const next = { ...resolvedFilters };
+					delete next[colId];
+					handleFilterChange(next);
+				}
+			});
+		} else {
+			items.push({
+				label: "Set Filter…",
+				onClick: () => openFilterPanel(colId, column.title, x, y)
+			});
+		}
+	}
+	// Search section
+	if (resolvedSearchValue) {
+		items.push({ isDivider: true });
+		items.push({ label: `Search: "${resolvedSearchValue}"` });
+		items.push({
+			label: "Clear Search",
+			onClick: () => emitSearchValue("")
+		});
+	}
+	menu?.show("gridler-column-menu", {
+		x,
+		y,
+		items
+	});
+}
+// ── Column reorder ─────────────────────────────────────────────────────────
+function handleColumnReorder(startIndex, endIndex) {
+	const next = reorderColumns(columnsState, startIndex, endIndex);
+	if (next === columnsState) return;
+	columnsState = next;
+	onColumnsChange?.(next);
+}
+// ── Filter state (controlled or internal) ─────────────────────────────────
+let internalFilters = $state({});
+const resolvedFilters = $derived(filters ?? internalFilters);
+function handleFilterChange(next) {
+	if (filters === undefined) internalFilters = next;
+	onFilterChange?.(next);
+	onGridEvent?.("filter_changed", undefined, undefined, undefined, { filters: next });
+}
+// ── Server-side state ──────────────────────────────────────────────────────
+let serverData = $state([]);
+let serverTotal = $state(0);
+let serverCursor = $state(undefined);
+let serverFetchVersion = 0;
+let serverLoading = $state(false);
+let serverAllLoaded = $state(false);
+$effect(() => {
+	total = serverTotal;
+});
+$effect(() => {
+	loading = serverLoading;
+});
+let serverError = $state(null);
+const serverAdapter = $derived.by(() => {
+	if (!resolvedUrl || !resolvedSchema || !resolvedEntity) return null;
+	const config = {
+		url: resolvedUrl,
+		token: resolvedToken,
+		schema: resolvedSchema,
+		entity: resolvedEntity,
+		uniqueID: resolvedUniqueID,
+		extraOptions: dataSourceOptions?.extraOptions
+	};
+	return dataSource === "headerspec" ? new GridlerRestHeaderSpecAdapter(config) : new GridlerResolveSpecAdapter(config);
+});
+function buildAllFilters(search) {
+	const base = Object.keys(resolvedFilters).length ? gridColumnFiltersToFilterOptions(resolvedFilters) : [];
+	if (!search?.trim()) return base;
+	return [...base, ...buildSearchFilters(search, columnsState, searchColumns)];
+}
+// Compute column fields (dataKey ?? id) merged with hotfields, deduped.
+const resolvedFields = $derived.by(() => {
+	const columnFields = columnsState.map((c) => c.dataKey ?? c.id);
+	const hotfields = dataSourceOptions?.hotfields ?? [];
+	const seen = new Set(columnFields);
+	const extra = hotfields.filter((f) => !seen.has(f));
+	return [...columnFields, ...extra];
+});
+// ── Sort state (controlled or internal) ───────────────────────────────────
+let internalSortOrder = $state({});
+const resolvedSortOrder = $derived(sortOrder ?? internalSortOrder);
+function handleSortOrderChange(order) {
+	if (sortOrder === undefined) internalSortOrder = order;
+	onSortOrderChange?.(order);
+	onGridEvent?.("sort_changed", undefined, undefined, undefined, { sortOrder: order });
+}
+const resolvedSort = $derived(Object.values(resolvedSortOrder).some((d) => d !== "none") ? sortOrderToSortOptions(resolvedSortOrder) : undefined);
+// ── Local sorted/filtered data ────────────────────────────────────────────
+const sortedDataState = $derived(applyLocalSort(dataState, resolvedSort ?? [], columnsState));
+const filteredDataState = $derived(applyLocalFilter(sortedDataState, resolvedFilters, columnsState));
+// Full reset + first page fetch.
+$effect(() => {
+	const _adapter = serverAdapter;
+	const _sort = resolvedSort;
+	const _search = serverSideSearch ? resolvedSearchValue : null;
+	const _pageSize = pageSize;
+	// Track resolvedFilters so internal filter changes also trigger a re-fetch.
+	const _filters = resolvedFilters;
+	// Track manual refresh trigger.
+	const _refresh = refreshTrigger;
+	// _refresh is tracked to trigger re-fetch on manual refresh.
+	void _refresh;
+	if (!_adapter) return;
+	let cancelled = false;
+	serverFetchVersion++;
+	serverLoading = true;
+	serverError = null;
+	serverData = [];
+	serverTotal = 0;
+	serverCursor = undefined;
+	serverAllLoaded = false;
+	const columnFilters = Object.keys(_filters).length ? gridColumnFiltersToFilterOptions(_filters) : [];
+	const searchFilters = _search?.trim() ? buildSearchFilters(_search, columnsState, searchColumns) : [];
+	const allFilters = [...columnFilters, ...searchFilters];
+	_adapter.readPage(_pageSize, undefined, _sort, allFilters, untrack(() => resolvedFields)).then((result) => {
+		if (cancelled) return;
+		serverData = result.data;
+		serverTotal = result.total;
+		serverCursor = result.nextCursor;
+		serverAllLoaded = result.data.length < _pageSize || !result.nextCursor;
+		onGridEvent?.("load");
+	}).catch((e) => {
+		if (cancelled) return;
+		const msg = e instanceof Error ? e.message : "Failed to load data";
+		serverError = msg;
+		onLoadError?.(msg);
+	}).finally(() => {
+		if (!cancelled) serverLoading = false;
+	});
+	return () => {
+		cancelled = true;
+	};
+});
+// Append next cursor page.
+async function loadNextPage() {
+	const _adapter = serverAdapter;
+	if (!_adapter || serverLoading || serverAllLoaded || !serverCursor) return;
+	const cursorSnapshot = serverCursor;
+	const versionSnapshot = serverFetchVersion;
+	serverLoading = true;
+	const allFilters = buildAllFilters(serverSideSearch ? resolvedSearchValue : null);
+	try {
+		const result = await _adapter.readPage(pageSize, cursorSnapshot, resolvedSort, allFilters, resolvedFields);
+		if (serverFetchVersion !== versionSnapshot) return;
+		serverData = [...serverData, ...result.data];
+		serverCursor = result.nextCursor;
+		serverAllLoaded = result.data.length < pageSize || !result.nextCursor || result.nextCursor === cursorSnapshot;
+		onGridEvent?.("page_loaded", undefined, undefined, undefined, {
+			data: result.data,
+			total: serverData.length
+		});
+	} catch (e) {
+		const msg = e instanceof Error ? e.message : "Failed to load page";
+		onLoadError?.(msg);
+	} finally {
+		serverLoading = false;
+	}
+}
+// Trigger next page when the visible range nears the end of loaded data.
+function handleVisibleRangeChange(range) {
+	untrack(() => {
+		if (!isServerMode || serverLoading || serverAllLoaded || !serverCursor) return;
+		const PREFETCH_THRESHOLD = Math.ceil(pageSize / 2);
+		if (range.lastRow >= serverData.length - PREFETCH_THRESHOLD) {
+			loadNextPage();
+		}
+	});
+}
+// ── Double-click ───────────────────────────────────────────────────────────
+function resolveRowData(row) {
+	return isServerMode ? serverData[row] : filteredDataState[row];
+}
+function handleCellDblClick(item, cell) {
+	const rowData = resolveRowData(item[1]);
+	onCellDblClick?.(item, cell, rowData);
+	onRowDblClick?.(item[1], rowData);
+}
+function handleRowClick(row) {
+	onRowClick?.(row, resolveRowData(row));
+}
+function handleRowContextMenu(row, x, y) {
+	contextMenuRowData = resolveRowData(row);
+	menu?.show("gridler-menu", {
+		x,
+		y,
+		items: buildMenuItems()
+	});
+	onRowContextMenu?.(row, contextMenuRowData, x, y);
+}
+// ── Selection → selectedItems bridge ──────────────────────────────────────
+let internalSelectedItems = $state([]);
+$effect(() => {
+	if (_selectedItems === undefined) return;
+	internalSelectedItems = Array.isArray(_selectedItems) ? _selectedItems : [];
+});
+function handleSelectionChange(sel) {
+	let items = [];
+	if (sel.type === "row") {
+		items = sel.rows.map((i) => resolveRowData(i)).filter((r) => r !== undefined);
+	} else if (sel.type === "cell") {
+		const row = resolveRowData(sel.item[1]);
+		if (row) items = [row];
+	} else if (sel.type === "range") {
+		const minRow = Math.min(sel.start[1], sel.end[1]);
+		const maxRow = Math.max(sel.start[1], sel.end[1]);
+		for (let i = minRow; i <= maxRow; i++) {
+			const row = resolveRowData(i);
+			if (row) items.push(row);
+		}
+	}
+	internalSelectedItems = items;
+	if (items.length > 0) onSelectedItemsChange?.(items);
+	onSelectionChange?.(sel, items.length > 0 ? items : undefined);
+}
+// ── Settings change event ─────────────────────────────────────────────────
+let lastSettings = $state(undefined);
+$effect(() => {
+	if (settings === untrack(() => lastSettings)) return;
+	lastSettings = settings;
+	onGridEvent?.("settings_changed", undefined, undefined, undefined, { settings });
+});
+// ── Cell content ───────────────────────────────────────────────────────────
+const serverGetCellContent = $derived(makeGetCellContent(serverData, columnsState));
+const localGetCellContent = $derived(makeGetCellContent(filteredDataState, columnsState));
+const resolvedGetCellContent = $derived.by(() => {
+	if (getCellContent) return getCellContent;
+	if (isServerMode) return serverGetCellContent;
+	return localGetCellContent;
+});
+// ── Row count ──────────────────────────────────────────────────────────────
+const resolvedRows = $derived.by(() => {
+	if (isServerMode) return getServerRenderableRows(serverData.length, serverTotal, serverAllLoaded);
+	if (rows != null) return rows;
+	return filteredDataState.length;
+});
+// ── Cell editing ───────────────────────────────────────────────────────────
+async function applyEdit(item, value) {
+	if (getCellContent || isServerMode) return;
+	const [col, row] = item;
+	const colDef = columnsState[col];
+	const key = colDef?.dataKey ?? colDef?.id;
+	if (!key) return;
+	const existing = filteredDataState[row];
+	if (!existing) return;
+	const originalIndex = dataState.indexOf(existing);
+	if (originalIndex === -1) return;
+	const next = dataState.slice();
+	next[originalIndex] = {
+		...existing,
+		[key]: value.data ?? value.displayData
+	};
+	dataState = next;
+	await onDataChange?.(next);
+	onGridEvent?.("data_changed", next[originalIndex], columnsState[col], undefined, { data: next });
+}
+async function handleGridMenuClick(d) {
+	contextMenuRowData = undefined;
+	if (onMenuClick) {
+		await onMenuClick(d?.item, d?.column, d ? {
+			x: d.x,
+			y: d.y
+		} : undefined);
+		return;
+	}
+	if (!d) return;
+	menu?.show("gridler-menu", {
+		x: d.x,
+		y: d.y,
+		items: buildMenuItems()
+	});
+}
+// ── Public API ────────────────────────────────────────────────────────────
+export function getSelectedRows() {
+	return internalSelectedItems;
+}
+export function getLoadedData() {
+	return isServerMode ? serverData : filteredDataState;
+}
 </script>
 
 <BetterMenu bind:this={menu}>