@warkypublic/svelix 0.1.29 → 0.1.32

package/dist/components/Boxer/Boxer.svelte

@@ -97,6 +97,7 @@
   let dropdownZ = $state(1100);
   let pointerInteractingWithDropdown = $state(false);
   let insideDialog = $state(false);
+  let suppressOpenOnFocus = $state(false);
   const effectiveDisablePortal = $derived(disablePortal || insideDialog);
   // Plain variable — NOT $state to avoid deep proxy on the complex virtualizer object.
   let rawVirtualizer: SvelteVirtualizer<
@@ -303,6 +304,12 @@
           activeOptionIndex = null;
         }
         break;
+      case "Tab":
+        if (multiSelect && $store.opened && $store.boxerData.length > 0) {
+          e.preventDefault();
+          onOptionSubmit(0);
+        }
+        break;
     }
   }
 
@@ -331,6 +338,7 @@
         e.preventDefault();
         store.setOpened(false);
         activeOptionIndex = null;
+        suppressOpenOnFocus = true;
         targetRef?.focus();
         break;
     }
@@ -387,6 +395,7 @@
     activeOptionIndex = null;
   }
   export function focus() {
+    suppressOpenOnFocus = false;
     targetRef?.focus();
   }
   export function getValue() {
@@ -504,7 +513,13 @@
     isFetching={$store.isFetching}
     search={$store.input}
     onclear={onClear}
-    onfocus={() => store.setOpened(true)}
+    onfocus={() => {
+      if (suppressOpenOnFocus) {
+        suppressOpenOnFocus = false;
+        return;
+      }
+      store.setOpened(true);
+    }}
     onkeydown={onInputKeydown}
     onsearch={(v) => {
       store.setSearch(v);

package/dist/components/GlobalStateStore/GlobalStateStore.d.ts

@@ -6,6 +6,7 @@ type GlobalStateStoreApi = {
     setState: (partial: PartialUpdater, replace?: boolean) => void;
     subscribe: (run: (value: GlobalStateStoreType) => void) => () => void;
 };
+declare const createGlobalStateStore: () => GlobalStateStoreApi;
 declare const GlobalStateStore: GlobalStateStoreApi;
 declare const languageStore: Readable<SupportedLanguage>;
 declare function useGlobalStateStore(): Readable<GlobalStateStoreType>;
@@ -18,4 +19,4 @@ declare const setAuthToken: (token: string) => void;
 declare const GetGlobalState: () => GlobalStateStoreType;
 declare const setLanguage: (lang: SupportedLanguage) => void;
 export type { GlobalStateStoreApi };
-export { getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedIn, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };
+export { createGlobalStateStore, getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedIn, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };

package/dist/components/GlobalStateStore/GlobalStateStore.js

@@ -30,6 +30,7 @@ const createInitialState = () => ({
         connected: true,
         loading: false,
         loggedIn: false,
+        validated: true,
     },
     user: {
         guid: "",
@@ -45,6 +46,62 @@ const toPersistedState = (state) => ({
     session: state.session,
     user: state.user,
 });
+const isSessionExpired = (session) => {
+    if (!session?.expiryDate) {
+        return false;
+    }
+    return new Date(session.expiryDate) < new Date();
+};
+const hasSessionCredentials = (session) => {
+    return Boolean(session?.authToken || session?.loggedIn);
+};
+const createClearedAuthenticatedState = (state, options) => {
+    const initialState = createInitialState();
+    return {
+        owner: initialState.owner,
+        program: initialState.program,
+        session: {
+            ...initialState.session,
+            apiURL: state.session.apiURL,
+            connected: options?.connected ?? true,
+            error: options?.error,
+            loading: options?.loading ?? false,
+            validated: true,
+        },
+        user: {
+            ...initialState.user,
+            language: state.user.language ?? initialState.user.language,
+        },
+    };
+};
+const getSessionValidationMismatch = ({ fetchedSession, fetchedUser, previousState, }) => {
+    const previousAuthToken = previousState.session.authToken ?? "";
+    const previousGuid = previousState.user.guid ?? "";
+    const previousUsername = previousState.user.username ?? "";
+    if (fetchedSession?.loggedIn === false) {
+        return true;
+    }
+    if (previousAuthToken &&
+        fetchedSession?.authToken &&
+        fetchedSession.authToken !== previousAuthToken) {
+        return true;
+    }
+    if (previousGuid && fetchedUser?.guid && fetchedUser.guid !== previousGuid) {
+        return true;
+    }
+    if (previousUsername &&
+        fetchedUser?.username &&
+        fetchedUser.username !== previousUsername) {
+        return true;
+    }
+    return false;
+};
+const hasSessionValidationSignal = (session, user) => {
+    return Boolean(session?.loggedIn === true ||
+        session?.authToken ||
+        user?.guid ||
+        user?.username);
+};
 const createGlobalStateStore = () => {
     const initialState = createInitialState();
     let isStorageInitialized = false;
@@ -96,6 +153,59 @@ const createGlobalStateStore = () => {
         try {
             const currentState = getState();
             const result = await currentState.onFetchSession?.(currentState);
+            const hasExistingSession = hasSessionCredentials(currentState.session);
+            const nextUser = { ...currentState.user, ...result?.user };
+            const nextSession = {
+                ...currentState.session,
+                ...result?.session,
+                apiURL: url || currentState.session.apiURL,
+                connected: true,
+                loading: false,
+            };
+            const serverConfirmsSession = result?.session?.loggedIn === true || Boolean(result?.session?.authToken);
+            const serverConfirmsUser = Boolean(result?.user?.guid || result?.user?.username);
+            const alreadyValidated = currentState.session.validated === true;
+            const requiresValidation = (hasExistingSession && !alreadyValidated) || serverConfirmsSession;
+            const hasValidationSignal = serverConfirmsSession || serverConfirmsUser || alreadyValidated;
+            const hasValidationMismatch = getSessionValidationMismatch({
+                fetchedSession: result?.session,
+                fetchedUser: result?.user,
+                previousState: currentState,
+            });
+            const resolvedLoggedIn = result?.session?.loggedIn ??
+                (hasValidationSignal && Boolean(nextSession.authToken));
+            const resolvedSession = {
+                ...nextSession,
+                loggedIn: resolvedLoggedIn,
+                validated: !requiresValidation || hasValidationSignal,
+            };
+            const isInvalidSession = hasValidationMismatch ||
+                isSessionExpired(resolvedSession) ||
+                (requiresValidation &&
+                    (!hasValidationSignal ||
+                        !resolvedSession.loggedIn ||
+                        !resolvedSession.authToken));
+            if (isInvalidSession) {
+                const clearedState = createClearedAuthenticatedState(currentState);
+                setGlobalState((state) => ({
+                    ...state,
+                    ...result,
+                    layout: { ...state.layout, ...result?.layout },
+                    navigation: { ...state.navigation, ...result?.navigation },
+                    owner: { ...clearedState.owner, ...result?.owner },
+                    program: {
+                        ...clearedState.program,
+                        ...result?.program,
+                        updatedAt: new Date().toISOString(),
+                    },
+                    session: {
+                        ...clearedState.session,
+                        apiURL: url || state.session.apiURL,
+                    },
+                    user: clearedState.user,
+                }));
+                return;
+            }
             setGlobalState((state) => ({
                 ...state,
                 ...result,
@@ -107,21 +217,17 @@ const createGlobalStateStore = () => {
                     ...result?.program,
                     updatedAt: new Date().toISOString(),
                 },
-                session: {
-                    ...state.session,
-                    ...result?.session,
-                    connected: true,
-                    loading: false,
-                },
-                user: { ...state.user, ...result?.user },
+                session: resolvedSession,
+                user: nextUser,
             }));
         }
         catch (e) {
+            const error = `Load Exception: ${String(e)}`;
             setGlobalState((state) => ({
                 session: {
                     ...state.session,
                     connected: false,
-                    error: `Load Exception: ${String(e)}`,
+                    error,
                     loading: false,
                 },
             }));
@@ -134,10 +240,10 @@ const createGlobalStateStore = () => {
         },
         isLoggedIn: () => {
             const session = getState().session;
-            if (!session.loggedIn || !session.authToken) {
+            if (!session.validated || !session.loggedIn || !session.authToken) {
                 return false;
             }
-            if (session.expiryDate && new Date(session.expiryDate) < new Date()) {
+            if (isSessionExpired(session)) {
                 return false;
             }
             return true;
@@ -152,7 +258,8 @@ const createGlobalStateStore = () => {
                             authToken: authToken ?? "",
                             expiryDate: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
                             loading: true,
-                            loggedIn: true,
+                            loggedIn: false,
+                            validated: false,
                         },
                         user: {
                             ...state.user,
@@ -162,6 +269,7 @@ const createGlobalStateStore = () => {
                     const currentState = getState();
                     const result = await currentState.onLogin?.(currentState);
                     if (result) {
+                        const loginValidated = hasSessionValidationSignal(result.session, result.user);
                         setGlobalState((state) => ({
                             owner: result.owner
                                 ? { ...state.owner, ...result.owner }
@@ -169,9 +277,13 @@ const createGlobalStateStore = () => {
                             program: result.program
                                 ? { ...state.program, ...result.program }
                                 : state.program,
-                            session: result.session
-                                ? { ...state.session, ...result.session }
-                                : state.session,
+                            session: {
+                                ...state.session,
+                                ...result.session,
+                                loggedIn: result.session?.loggedIn ??
+                                    (loginValidated && Boolean(result.session?.authToken ?? state.session.authToken)),
+                                validated: loginValidated ? true : state.session.validated,
+                            },
                             user: result.user
                                 ? { ...state.user, ...result.user }
                                 : state.user,
@@ -180,14 +292,14 @@ const createGlobalStateStore = () => {
                     await fetchDataInternal();
                 }
                 catch (e) {
+                    const currentState = getState();
+                    const clearedState = createClearedAuthenticatedState(currentState, {
+                        connected: false,
+                        error: `Login Exception: ${String(e)}`,
+                    });
                     setGlobalState((state) => ({
-                        session: {
-                            ...state.session,
-                            connected: false,
-                            error: `Login Exception: ${String(e)}`,
-                            loading: false,
-                            loggedIn: false,
-                        },
+                        ...state,
+                        ...clearedState,
                     }));
                 }
                 finally {
@@ -203,6 +315,7 @@ const createGlobalStateStore = () => {
         logout: async () => {
             await waitForInitialization();
             return withOperationLock(async () => {
+                const previousState = getState();
                 try {
                     setGlobalState((state) => ({
                         ...createInitialState(),
@@ -215,7 +328,7 @@ const createGlobalStateStore = () => {
                         },
                     }));
                     const currentState = getState();
-                    const result = await currentState.onLogout?.(currentState);
+                    const result = await currentState.onLogout?.(previousState);
                     if (result) {
                         setGlobalState((state) => ({
                             owner: result.owner
@@ -235,13 +348,14 @@ const createGlobalStateStore = () => {
                     await fetchDataInternal();
                 }
                 catch (e) {
+                    const currentState = getState();
+                    const clearedState = createClearedAuthenticatedState(currentState, {
+                        connected: false,
+                        error: `Logout Exception: ${String(e)}`,
+                    });
                     setGlobalState((state) => ({
-                        session: {
-                            ...state.session,
-                            connected: false,
-                            error: `Logout Exception: ${String(e)}`,
-                            loading: false,
-                        },
+                        ...state,
+                        ...clearedState,
                     }));
                 }
                 finally {
@@ -319,6 +433,7 @@ const createGlobalStateStore = () => {
     store.set(initialStoreState);
     initializationPromise = loadStorage()
         .then((loadedState) => {
+        const hasPersistedSession = hasSessionCredentials(loadedState.session);
         setGlobalState((current) => ({
             ...current,
             ...loadedState,
@@ -328,6 +443,12 @@ const createGlobalStateStore = () => {
                 ...loadedState.session,
                 connected: true,
                 loading: false,
+                loggedIn: hasPersistedSession
+                    ? false
+                    : loadedState.session?.loggedIn ?? current.session.loggedIn,
+                validated: hasPersistedSession
+                    ? false
+                    : loadedState.session?.validated ?? current.session.validated,
             },
         }));
     })
@@ -386,4 +507,4 @@ const GetGlobalState = () => {
 const setLanguage = (lang) => {
     GlobalStateStore.getState().setLanguage(lang);
 };
-export { getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedIn, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };
+export { createGlobalStateStore, getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedIn, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };

package/dist/components/GlobalStateStore/GlobalStateStore.types.d.ts

@@ -107,6 +107,7 @@ interface SessionState {
     loggedIn?: boolean;
     meta?: Record<string, any>;
     parameters?: Record<string, any>;
+    validated?: boolean;
 }
 type SupportedLanguage = 'af' | 'en';
 interface ThemeSettings {

package/dist/components/GlobalStateStore/GlobalStateStore.utils.js

@@ -3,7 +3,8 @@ const SKIP_PATHS = new Set([
     'app.controls',
     'session.connected',
     'session.error',
-    'session.loading'
+    'session.loading',
+    'session.validated'
 ]);
 const PERSIST_KEYS = [
     'layout',

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

@@ -28,6 +28,10 @@
       item?: Record<string, unknown>;
       column?: GridlerColumn;
     }) => void;
+    onRowClick?: (row: number) => void;
+    onRowContextMenu?: (row: number) => void;
+    /** Resolve raw row data by row index for populating onCellEvent. */
+    getRowData?: (row: number) => Record<string, unknown> | undefined;
     children?: Snippet;
   }
 
@@ -57,6 +61,8 @@
     onHeaderContextMenu,
     onMenuClick,
     onGridMenuOpen,
+    onRowClick,
+    onRowContextMenu,
     theme = {},
     selection = { type: "none" } as Selection,
     onSelectionChange,
@@ -68,8 +74,9 @@
     sortOrder,
     onFilterChange: _onFilterChange,
     filters: _filters,
-    selectedItems: _selectedItems,
+    selectedItems,
     onSelectedItemsChange: _onSelectedItemsChange,
+    getRowData,
     settings,
     children,
   }: Props = $props();
@@ -245,6 +252,7 @@
 
   function handleKeyDown(e: KeyboardEvent) {
     if (!canvasComponent?.getHasFocus()) return;
+    onGridEvent?.("keydown", undefined, undefined, { x: 0, y: 0, code: e.key });
 
     // Search toggle
     if ((e.ctrlKey || e.metaKey) && e.key === "f") {
@@ -308,7 +316,7 @@
         if (!resolvedReadonly) {
           beginEdit(focusedCell);
         }
-        onCellEvent?.("enter_key", {}, columns[col] ?? { id: "", title: "" });
+        onCellEvent?.("enter_key", getRowData?.(row) ?? {}, columns[col] ?? { id: "", title: "" });
         e.preventDefault();
         return;
       case "Escape": {
@@ -334,7 +342,7 @@
             onRowAppended?.();
           }
         }
-        onCellEvent?.("tab_key", {}, columns[col] ?? { id: "", title: "" });
+        onCellEvent?.("tab_key", getRowData?.(row) ?? {}, columns[col] ?? { id: "", title: "" });
         e.preventDefault();
         break;
       case "Delete":
@@ -346,7 +354,7 @@
             onDelete?.(delSel);
           }
         }
-        onCellEvent?.("delte_key", {}, columns[col] ?? { id: "", title: "" });
+        onCellEvent?.("delete_key", getRowData?.(row) ?? {}, columns[col] ?? { id: "", title: "" });
         return;
       }
       default:
@@ -376,7 +384,7 @@
 
   function handleVisibleRangeChange(range: VisibleRange) {
     onVisibleRangeChange?.(range);
-    onGridEvent?.("scroll", { row: range.firstRow, column: range.firstCol });
+    onGridEvent?.("scroll", undefined, undefined, undefined, { row: range.firstRow, column: range.firstCol });
   }
 
   async function handleMenuOpen(d: {
@@ -423,15 +431,51 @@
   onSelectionChange={(sel) => {
     currentSelection = sel;
     onSelectionChange?.(sel);
+    onGridEvent?.("selection_changed");
   }}
   onCellDblClick={(item, cell) => {
     onCellDblClick?.(item, cell);
-    onCellEvent?.("dblclick", {}, columns[item[0]] ?? { id: "", title: "" });
+    onCellEvent?.("dblclick", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+    onGridEvent?.("dblclick", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+  }}
+  onRowClick={(row) => {
+    onRowClick?.(row);
+  }}
+  onCellClick={(item) => {
+    onCellEvent?.("click", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+    onGridEvent?.("click", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+  }}
+  onCellHover={(item) => {
+    onCellEvent?.("hover", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+    onGridEvent?.("hover", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+  }}
+  onCellLeave={(item) => {
+    onCellEvent?.("leave", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+    onGridEvent?.("leave", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" });
+  }}
+  onCellContextMenu={(item, x, y) => {
+    onCellEvent?.("contextmenu", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" }, { x, y });
+    onGridEvent?.("contextmenu", getRowData?.(item[1]) ?? {}, columns[item[0]] ?? { id: "", title: "" }, { x, y });
+  }}
+  onRowContextMenu={(row) => {
+    onRowContextMenu?.(row);
+  }}
+  onColumnResized={(col, width) => {
+    onGridEvent?.("column_resized", undefined, columns[col], undefined, { width });
+  }}
+  onGridResize={(width, height) => {
+    onGridEvent?.("resize", undefined, undefined, undefined, { width, height });
+  }}
+  onGridEnter={() => {
+    onGridEvent?.("enter");
   }}
   {sortOrder}
   {onSortOrderChange}
   {onHeaderContextMenu}
-  {onColumnMoved}
+  onColumnMoved={onColumnMoved || onGridEvent ? (from, to) => {
+    onColumnMoved?.(from, to);
+    onGridEvent?.("column_moved", undefined, undefined, undefined, { from, to });
+  } : undefined}
   {onCellEdited}
   {onDelete}
   {onRowAppended}

package/dist/components/Gridler/components/Gridler.svelte.d.ts

@@ -13,6 +13,10 @@ export interface Props extends Partial<GridlerProps> {
         item?: Record<string, unknown>;
         column?: GridlerColumn;
     }) => void;
+    onRowClick?: (row: number) => void;
+    onRowContextMenu?: (row: number) => void;
+    /** Resolve raw row data by row index for populating onCellEvent. */
+    getRowData?: (row: number) => Record<string, unknown> | undefined;
     children?: Snippet;
 }
 declare const Gridler: import("svelte").Component<Props, {}, "">;

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

@@ -56,6 +56,8 @@
     onVisibleRangeChange?: (range: VisibleRange) => void;
     onSelectionChange?: (sel: Selection) => void;
     onCellDblClick?: (item: Item, cell: GridlerCell) => void;
+    onRowClick?: (row: number) => void;
+    onRowContextMenu?: (row: number) => void;
     onColumnMoved?: (from: number, to: number) => void;
     onCellEdited?: (item: Item, cell: GridlerCell) => void;
     onDelete?: (sel: Selection) => void;
@@ -72,6 +74,13 @@
       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;
   }
@@ -100,6 +109,8 @@
     onVisibleRangeChange,
     onSelectionChange,
     onCellDblClick,
+    onRowClick,
+    onRowContextMenu,
     onColumnMoved,
     onCellEdited: _onCellEdited,
     onDelete: _onDelete,
@@ -111,6 +122,13 @@
     onSearchValueChange,
     onSearchClose,
     onGridMenuOpen,
+    onCellClick,
+    onCellHover,
+    onCellLeave,
+    onCellContextMenu,
+    onColumnResized,
+    onGridResize,
+    onGridEnter,
     onkeydown,
     children,
   }: Props = $props();
@@ -133,6 +151,7 @@
   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);
@@ -286,6 +305,7 @@
       if (entry) {
         containerWidth = entry.contentRect.width;
         containerHeight = entry.contentRect.height;
+        onGridResize?.(entry.contentRect.width, entry.contentRect.height);
       }
     });
     observer.observe(containerRef);
@@ -468,8 +488,7 @@
   // ── Header context menu ───────────────────────────────────────────────────────
 
   function handleContextMenu(e: MouseEvent) {
-    if (!onHeaderContextMenu) return;
-    if (e.offsetY >= headerHeight || e.offsetX < rowMarkerWidth) return;
+    if (e.offsetY < headerHeight && e.offsetX < rowMarkerWidth) return;
     const fixedBoundaryX =
       fixedColumns > 0
         ? getColumnX(effectiveColumns, Math.min(fixedColumns, columns.length))
@@ -477,10 +496,39 @@
     const localX = e.offsetX - rowMarkerWidth;
     const effectiveScrollX =
       fixedColumns > 0 && localX >= 0 && localX < fixedBoundaryX ? 0 : scrollX;
-    const col = getColumnFromX(localX + effectiveScrollX, effectiveColumns);
-    if (col >= 0 && col < columns.length) {
+
+    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();
-      onHeaderContextMenu(col, e.clientX, e.clientY);
+      onRowContextMenu?.(row);
+    }
+
+    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);
+      }
     }
   }
 
@@ -501,6 +549,12 @@
 
   // ── 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;
@@ -594,6 +648,11 @@
       return;
     }
 
+    const row = getRowFromOffsetY(e.offsetY);
+    if (row !== null) {
+      onRowClick?.(row);
+    }
+
     if (readonly) return;
 
     const cell = getCellFromPoint(
@@ -619,6 +678,7 @@
     }
 
     if (cell) {
+      onCellClick?.(cell);
       if (e.shiftKey && focusedCell) {
         const newSelection: Selection = {
           type: "range",
@@ -802,6 +862,36 @@
       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 =
@@ -865,6 +955,9 @@
       scheduleDraw();
     }
 
+    if (resizingColumn !== null) {
+      onColumnResized?.(resizingColumn, columns[resizingColumn].width);
+    }
     isDragging = false;
     dragStart = null;
     resizingColumn = null;
@@ -876,6 +969,10 @@
     hoverResizeCol = null;
     hoverMenuButton = false;
     hoverSortCol = null;
+    if (hoveredCell) {
+      onCellLeave?.(hoveredCell);
+      hoveredCell = null;
+    }
     if (!isDraggingVScrollbar && !isDraggingHScrollbar) {
       handleMouseUp(e);
     } else {
@@ -981,7 +1078,7 @@
     }
 
     if (rowMarkers !== "none" && offsetX < rowMarkerWidth) {
-      const row = Math.floor((offsetY - headerHeight + scrollY) / rowHeight);
+      const row = getRowFromOffsetY(offsetY);
       if (row >= 0 && row < rows) {
         onRowToggle?.(row);
       }
@@ -1073,6 +1170,7 @@
   style:--gridler-header-height={`${headerHeight}px`}
   onfocusin={handleFocusIn}
   onfocusout={handleFocusOut}
+  onmouseenter={onGridEnter}
   {onkeydown}
 >
   <canvas

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

@@ -25,6 +25,8 @@ interface Props {
     onVisibleRangeChange?: (range: VisibleRange) => void;
     onSelectionChange?: (sel: Selection) => void;
     onCellDblClick?: (item: Item, cell: GridlerCell) => void;
+    onRowClick?: (row: number) => void;
+    onRowContextMenu?: (row: number) => void;
     onColumnMoved?: (from: number, to: number) => void;
     onCellEdited?: (item: Item, cell: GridlerCell) => void;
     onDelete?: (sel: Selection) => void;
@@ -41,6 +43,13 @@ interface Props {
         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;
 }

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

@@ -38,6 +38,8 @@
       | "onSearchValueChange"
       | "onVisibleRangeChange"
       | "onCellDblClick"
+      | "onRowClick"
+      | "onRowContextMenu"
     > {
     columns: GridlerColumn[];
 
@@ -81,6 +83,16 @@
       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 and resolved row data. */
+    onRowContextMenu?: (
+      row: number,
+      rowData: Record<string, unknown> | undefined,
+    ) => void;
 
     // ── Server-side fetching ──────────────────────────────────────────────────
     // Use dataSource + dataSourceOptions (from GridCommonProps) for server config.
@@ -157,6 +169,8 @@
     onCellEdited,
     onCellDblClick,
     onRowDblClick,
+    onRowClick,
+    onRowContextMenu,
     onMenuClick,
     onSelectionChange,
     onCellEvent,
@@ -199,9 +213,11 @@
     if (typeof data === "function") {
       data().then((result) => {
         dataState = result;
+        onGridEvent?.("load");
       });
     } else {
       dataState = data.slice();
+      onGridEvent?.("load");
     }
   });
 
@@ -258,6 +274,7 @@
       internalSearchValue = value;
     }
     onSearchValueChange?.(value);
+    onGridEvent?.("search_changed", undefined, undefined, undefined, { searchValue: value });
   }
 
   // ── Context menu ───────────────────────────────────────────────────────────
@@ -477,6 +494,7 @@
   function handleFilterChange(next: GridColumnFilters) {
     if (filters === undefined) internalFilters = next;
     onFilterChange?.(next);
+    onGridEvent?.("filter_changed", undefined, undefined, undefined, { filters: next });
   }
 
 
@@ -530,6 +548,7 @@
   function handleSortOrderChange(order: GridColumnSortOrder) {
     if (sortOrder === undefined) internalSortOrder = order;
     onSortOrderChange?.(order);
+    onGridEvent?.("sort_changed", undefined, undefined, undefined, { sortOrder: order });
   }
 
   const resolvedSort = $derived(
@@ -619,6 +638,7 @@
       serverData = [...serverData, ...result.data];
       serverCursor = result.nextCursor;
       serverAllLoaded = result.data.length < pageSize || !result.nextCursor;
+      onGridEvent?.("page_loaded", undefined, undefined, undefined, { data: result.data, total: serverData.length });
     } catch {
       // Silent — don't clobber existing rows with an error on append.
     } finally {
@@ -650,18 +670,49 @@
     onRowDblClick?.(item[1], rowData);
   }
 
+  function handleRowClick(row: number) {
+    onRowClick?.(row, resolveRowData(row));
+  }
+
+  function handleRowContextMenu(row: number) {
+    onRowContextMenu?.(row, resolveRowData(row));
+  }
+
   // ── Selection → selectedItems bridge ──────────────────────────────────────
 
+  let internalSelectedItems = $state<Record<string, unknown>[]>([]);
+
   function handleSelectionChange(sel: Selection) {
-    if (sel.type === "row" && onSelectedItemsChange) {
-      const items = sel.rows
+    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);
-      onSelectedItemsChange(items);
+    } 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);
   }
 
+  // ── Settings change event ─────────────────────────────────────────────────
+
+  let lastSettings = $state(settings);
+  $effect(() => {
+    if (settings === untrack(() => lastSettings)) return;
+    lastSettings = settings;
+    onGridEvent?.("settings_changed", undefined, undefined, undefined, { settings });
+  });
+
   // ── Cell content ───────────────────────────────────────────────────────────
 
   const serverGetCellContent = $derived(makeGetCellContent(serverData, columnsState));
@@ -700,6 +751,7 @@
     };
     dataState = next;
     await onDataChange?.(next);
+    onGridEvent?.("data_changed", next[originalIndex], columnsState[col], undefined, { data: next });
   }
 
   async function handleGridMenuClick(d?: {
@@ -747,7 +799,12 @@
       onCellEdited?.(item, value);
     }}
     onCellDblClick={handleCellDblClick}
+    onRowClick={handleRowClick}
+    onRowContextMenu={handleRowContextMenu}
+    selectedItems={internalSelectedItems}
+    getRowData={resolveRowData}
     onSelectionChange={handleSelectionChange}
+    {onMenuClick}
     onGridMenuOpen={handleGridMenuClick}
     sortOrder={resolvedSortOrder}
     onSortOrderChange={handleSortOrderChange}

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import type { GridlerCell, GridlerColumn, GridlerContextMenuItem, GridlerProps, Item } from "../types";
-export interface Props extends Omit<Partial<GridlerProps>, "columns" | "rows" | "getCellContent" | "searchValue" | "onSearchValueChange" | "onVisibleRangeChange" | "onCellDblClick"> {
+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
@@ -28,6 +28,10 @@ export interface Props extends Omit<Partial<GridlerProps>, "columns" | "rows" |
     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 and resolved row data. */
+    onRowContextMenu?: (row: number, rowData: Record<string, unknown> | undefined) => void;
     /** Rows per cursor-forward page. Defaults to 200. */
     pageSize?: number;
     /**

package/dist/components/Gridler/types.d.ts

@@ -103,6 +103,10 @@ export interface GridlerProps extends GridCommonProps<Record<string, unknown>> {
     onCellEdited?: (item: Item, value: GridlerCell) => void;
     /** Called on cell double-click (low-level; GridlerFull enriches with row data). */
     onCellDblClick?: (item: Item, cell: GridlerCell) => void;
+    /** Called when a body row is clicked. */
+    onRowClick?: (row: number) => void;
+    /** Called when a body row receives a context-menu event. */
+    onRowContextMenu?: (row: number) => void;
     /** Called when Tab moves past the last column of the last row. */
     onRowAppended?: () => void;
     /** Called when Delete/Backspace is pressed with a selection. */

package/llm/README.md

@@ -16,6 +16,7 @@ This folder contains AI-readable documentation that ships with the package.
 - [tools/SVAR.md](./tools/SVAR.md)
 - [tools/resolvespec-js.md](./tools/resolvespec-js.md)
 - [plans/canvasgrid.md](./plans/canvasgrid.md)
+- [gridler-events.md](./gridler-events.md)
 
 ## Installed package paths
 

package/llm/gridler-events.md

@@ -0,0 +1,139 @@
+# Gridler Events
+
+`GridlerFull` (and the lower-level `Gridler`) emit two event callbacks defined in `GridCommonProps` (`src/lib/components/Types/generic_grid.ts`):
+
+| Callback | Purpose |
+|---|---|
+| `onGridEvent` | Grid-level events (interaction, state, lifecycle) |
+| `onCellEvent` | Cell-level events (mouse + keyboard on a specific cell) |
+
+---
+
+## `onGridEvent`
+
+```ts
+onGridEvent?: (
+  type: GridEventType,
+  item?: Record<string, unknown>,   // resolved raw row data
+  column?: GridColumn,
+  coords?: GridEventCoords,          // { x, y, code? }
+  detail?: GridEventDetail,          // event-specific payload
+) => void
+```
+
+### All `GridEventType` values
+
+| Type | Fired from | `item` | `column` | `coords` | `detail` |
+|---|---|---|---|---|---|
+| `click` | Mouse click on a cell | row data | clicked column | — | — |
+| `dblclick` | Double-click on a cell | row data | clicked column | — | — |
+| `contextmenu` | Right-click on a cell | row data | clicked column | `{ x, y }` client coords | — |
+| `keydown` | Any key pressed while grid focused | — | — | `{ x:0, y:0, code }` | — |
+| `hover` | Mouse moves over a new cell | row data | hovered column | — | — |
+| `leave` | Mouse leaves a cell | row data | vacated column | — | — |
+| `enter` | Mouse enters the grid container | — | — | — | — |
+| `load` | Local `data` prop set/changed, or first server page loaded | — | — | — | — |
+| `scroll` | Visible range changes (scroll) | — | — | — | `{ row, column }` first visible |
+| `resize` | Grid container resized (ResizeObserver) | — | — | — | `{ width, height }` |
+| `page_loaded` | Next cursor page loaded from server | — | — | — | `{ data, total }` |
+| `sort_changed` | Sort order applied or cleared | — | — | — | `{ sortOrder: GridColumnSortOrder }` |
+| `filter_changed` | Filter applied or cleared | — | — | — | `{ filters: GridColumnFilters }` |
+| `search_changed` | Search input value changed | — | — | — | `{ searchValue: string }` |
+| `selection_changed` | Cell, row, range, or column selection changes | — | — | — | — |
+| `column_moved` | Column dragged to new position | — | — | — | `{ from: number, to: number }` |
+| `column_resized` | Column edge dragged to new width | — | moved column | — | `{ width: number }` |
+| `data_changed` | Cell edited and committed (local mode only) | updated row | edited column | — | `{ data: Row[] }` full new dataset |
+| `settings_changed` | `settings` prop reference changed | — | — | — | `{ settings }` |
+
+---
+
+## `onCellEvent`
+
+```ts
+onCellEvent?: (
+  type: GridCellEventType,
+  item: Record<string, unknown>,  // resolved raw row data
+  column: GridColumn,
+  coords?: GridEventCoords,
+  detail?: GridEventDetail,
+) => void
+```
+
+### All `GridCellEventType` values
+
+| Type | Fired when |
+|---|---|
+| `click` | Mouse click on the cell |
+| `dblclick` | Double-click on the cell |
+| `contextmenu` | Right-click on the cell |
+| `hover` | Mouse moves over this cell |
+| `leave` | Mouse leaves this cell |
+| `enter_key` | Enter pressed while this cell is focused |
+| `tab_key` | Tab pressed while this cell is focused |
+| `delete_key` | Delete or Backspace pressed while this cell is focused |
+
+For all `onCellEvent` calls, `item` carries the **resolved raw row data** (from `serverData` or local `filteredDataState`). When the row cannot be resolved by index (e.g. from a top-level menu button), `item` falls back to the value in `selectedItems[0]`.
+
+---
+
+## Row data resolution
+
+`GridlerFull` passes `getRowData` to `Gridler`, which calls `resolveRowData(rowIndex)`:
+
+```ts
+function resolveRowData(row: number): Record<string, unknown> | undefined {
+  return isServerMode ? serverData[row] : filteredDataState[row];
+}
+```
+
+The current selection's row data is also tracked in `internalSelectedItems` state and passed as `selectedItems` to `Gridler`. This is used as a fallback when no row index is available.
+
+---
+
+## Field selection sent to adapters (hotfields)
+
+When `dataSource="resolvespec"` or `"headerspec"`, `GridlerFull` derives a `resolvedFields` array and passes it to every `readPage` call as `options.columns` (maps to `X-Select-Fields` in headerspec):
+
+```ts
+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];
+});
+```
+
+- **Column fields** come from `column.dataKey ?? column.id` for every column.
+- **Hotfields** (`dataSourceOptions.hotfields`) are extra fields needed server-side (for filtering, sorting, FK lookups) that are not grid columns. They are appended without duplicating existing column fields.
+
+---
+
+## Usage example
+
+```svelte
+<GridlerFull
+  {columns}
+  {data}
+  onGridEvent={(type, item, column, coords, detail) => {
+    if (type === 'sort_changed') console.log('Sort:', detail?.sortOrder);
+    if (type === 'filter_changed') console.log('Filter:', detail?.filters);
+    if (type === 'search_changed') console.log('Search:', detail?.searchValue);
+    if (type === 'data_changed') console.log('Edited row:', item, 'All data:', detail?.data);
+    if (type === 'column_moved') console.log('Moved col', detail?.from, '→', detail?.to);
+    if (type === 'page_loaded') console.log('New page:', detail?.data, 'Total so far:', detail?.total);
+  }}
+  onCellEvent={(type, item, column) => {
+    if (type === 'click') console.log('Clicked:', item, column.id);
+    if (type === 'enter_key') console.log('Enter on row:', item);
+  }}
+  dataSource="resolvespec"
+  dataSourceOptions={{
+    url: 'https://api.example.com',
+    schema: 'public',
+    entity: 'users',
+    uniqueID: 'id',
+    hotfields: ['tenant_id', 'deleted_at'],  // fetched but not shown as columns
+  }}
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.29",
+  "version": "0.1.32",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
   "exports": {
@@ -26,43 +26,43 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
-    "@chromatic-com/storybook": "^5.0.2",
-    "@eslint/compat": "^2.0.3",
+    "@chromatic-com/storybook": "^5.1.1",
+    "@eslint/compat": "^2.0.4",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.58.2",
-    "@sentry/svelte": "^10.45.0",
-    "@skeletonlabs/skeleton": "^4.13.0",
-    "@skeletonlabs/skeleton-svelte": "^4.13.0",
-    "@storybook/addon-a11y": "^10.3.1",
-    "@storybook/addon-docs": "^10.3.1",
-    "@storybook/addon-svelte-csf": "^5.0.12",
-    "@storybook/addon-vitest": "^10.3.1",
-    "@storybook/sveltekit": "^10.3.1",
+    "@playwright/test": "^1.59.1",
+    "@sentry/svelte": "^10.47.0",
+    "@skeletonlabs/skeleton": "^4.15.1",
+    "@skeletonlabs/skeleton-svelte": "^4.15.1",
+    "@storybook/addon-a11y": "^10.3.4",
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/addon-svelte-csf": "^5.1.2",
+    "@storybook/addon-vitest": "^10.3.4",
+    "@storybook/sveltekit": "^10.3.4",
     "@storybook/test": "^8.6.15",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.56.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/svelte-virtual": "^3.13.23",
-    "@types/node": "^25.5.0",
-    "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/coverage-v8": "^4.1.0",
-    "eslint": "^10.0.3",
-    "eslint-plugin-svelte": "^3.15.2",
+    "@types/node": "^25.5.2",
+    "@vitest/browser-playwright": "^4.1.3",
+    "@vitest/coverage-v8": "^4.1.3",
+    "eslint": "^10.2.0",
+    "eslint-plugin-svelte": "^3.17.0",
     "globals": "^17.4.0",
-    "playwright": "^1.58.2",
+    "playwright": "^1.59.1",
     "publint": "^0.3.18",
-    "storybook": "^10.3.1",
-    "svelte": "^5.54.0",
-    "svelte-check": "^4.4.5",
+    "storybook": "^10.3.4",
+    "svelte": "^5.55.1",
+    "svelte-check": "^4.4.6",
     "tailwindcss": "^4.2.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.1",
-    "vite": "^8.0.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.7",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -76,13 +76,13 @@
     "@cartamd/plugin-math": "^4.3.1",
     "@friendofsvelte/tipex": "^0.1.1",
     "@js-temporal/polyfill": "^0.5.1",
-    "@svar-ui/svelte-grid": "^2.6.0",
+    "@svar-ui/svelte-grid": "^2.6.1",
     "@warkypublic/resolvespec-js": "^1.0.1",
     "@warkypublic/artemis-kit": "^1.0.10",
     "carta-md": "^4.11.1",
     "github-markdown-css": "^5.9.0",
-    "isomorphic-dompurify": "^3.5.1",
-    "katex": "^0.16.39",
+    "isomorphic-dompurify": "^3.7.1",
+    "katex": "^0.16.45",
     "monaco-editor": "^0.55.1"
   },
   "scripts": {