@warkypublic/svelix 0.1.34 → 0.1.36

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

@@ -9,14 +9,14 @@ type GlobalStateStoreApi = {
 declare const createGlobalStateStore: () => GlobalStateStoreApi;
 declare const GlobalStateStore: GlobalStateStoreApi;
 declare const languageStore: Readable<SupportedLanguage>;
+declare const isLoggedInStore: Readable<boolean>;
 declare function useGlobalStateStore(): Readable<GlobalStateStoreType>;
 declare function useGlobalStateStore<T>(selector: (state: GlobalStateStoreType) => T): Readable<T>;
 declare const setApiURL: (url: string) => void;
 declare const getApiURL: () => string;
 declare const getAuthToken: () => string;
-declare const isLoggedIn: () => boolean;
 declare const setAuthToken: (token: string) => void;
 declare const GetGlobalState: () => GlobalStateStoreType;
 declare const setLanguage: (lang: SupportedLanguage) => void;
 export type { GlobalStateStoreApi };
-export { createGlobalStateStore, getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedIn, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };
+export { createGlobalStateStore, getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedInStore, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };

package/dist/components/GlobalStateStore/GlobalStateStore.js

@@ -102,12 +102,29 @@ const hasSessionValidationSignal = (session, user) => {
         user?.guid ||
         user?.username);
 };
+const computeIsLoggedIn = (session) => {
+    if (!session.validated || !session.loggedIn || !session.authToken) {
+        return false;
+    }
+    return !isSessionExpired(session);
+};
 const createGlobalStateStore = () => {
     const initialState = createInitialState();
     let isStorageInitialized = false;
     let initializationPromise = null;
     let operationLock = Promise.resolve();
     let hasAutoValidated = false;
+    let validationScheduled = false;
+    const scheduleValidation = () => {
+        if (validationScheduled)
+            return;
+        validationScheduled = true;
+        waitForInitialization()
+            .then(() => withOperationLock(() => fetchDataInternal()))
+            .finally(() => {
+            validationScheduled = false;
+        });
+    };
     const store = writable(undefined);
     const getState = () => get(store);
     const setState = (partial, replace = false) => {
@@ -126,7 +143,7 @@ const createGlobalStateStore = () => {
             hasAutoValidated = true;
             const session = after.session;
             if (hasSessionCredentials(session) && !session.validated) {
-                waitForInitialization().then(() => withOperationLock(() => fetchDataInternal()));
+                scheduleValidation();
             }
         }
     };
@@ -258,16 +275,7 @@ const createGlobalStateStore = () => {
             await waitForInitialization();
             return withOperationLock(() => fetchDataInternal(url));
         },
-        isLoggedIn: () => {
-            const session = getState().session;
-            if (!session.validated || !session.loggedIn || !session.authToken) {
-                return false;
-            }
-            if (isSessionExpired(session)) {
-                return false;
-            }
-            return true;
-        },
+        isLoggedIn: () => computeIsLoggedIn(getState().session),
         login: async (authToken, user) => {
             await waitForInitialization();
             return withOperationLock(async () => {
@@ -463,9 +471,6 @@ 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,
@@ -484,6 +489,12 @@ const createGlobalStateStore = () => {
         if (!isStorageInitialized) {
             return;
         }
+        if (hasSessionCredentials(state.session) &&
+            !state.session.validated &&
+            !computeIsLoggedIn(state.session) &&
+            typeof state.onFetchSession === "function") {
+            scheduleValidation();
+        }
         saveStorage(toPersistedState(state)).catch((e) => {
             console.error("Error saving storage:", e);
         });
@@ -499,6 +510,7 @@ const GlobalStateStoreReadable = {
     subscribe: GlobalStateStore.subscribe,
 };
 const languageStore = derived(GlobalStateStoreReadable, (state) => state.user.language ?? "en");
+const isLoggedInStore = derived(GlobalStateStoreReadable, (state) => computeIsLoggedIn(state.session));
 initTranslation(languageStore);
 function useGlobalStateStore(selector) {
     if (!selector) {
@@ -515,9 +527,6 @@ const getApiURL = () => {
 const getAuthToken = () => {
     return GlobalStateStore.getState().session.authToken ?? "";
 };
-const isLoggedIn = () => {
-    return GlobalStateStore.getState().isLoggedIn();
-};
 const setAuthToken = (token) => {
     GlobalStateStore.getState().setAuthToken(token);
 };
@@ -527,4 +536,4 @@ const GetGlobalState = () => {
 const setLanguage = (lang) => {
     GlobalStateStore.getState().setLanguage(lang);
 };
-export { createGlobalStateStore, getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedIn, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };
+export { createGlobalStateStore, getApiURL, getAuthToken, GetGlobalState, GlobalStateStore, isLoggedInStore, languageStore, setApiURL, setAuthToken, setLanguage, useGlobalStateStore, };

package/dist/components/GlobalStateStore/GlobalStateStore.mdx

@@ -0,0 +1,209 @@
+# GlobalStateStore
+
+Singleton Svelte store for app-wide authenticated state. Persists all slices to `localStorage` and re-validates credentials on every page load.
+
+---
+
+## Setup
+
+Wrap your app with `GlobalStateStoreProvider` and wire up the three server callbacks:
+
+```svelte
+<script lang="ts">
+  import { GlobalStateStoreProvider } from '@warkypublic/svelix';
+
+  const onLogin = async (state) => {
+    const res = await api.post('/auth/login', { token: state.session.authToken });
+    return { session: res.session, user: res.user };
+  };
+
+  const onLogout = async () => {
+    await api.post('/auth/logout');
+  };
+
+  const onFetchSession = async (state) => {
+    const res = await api.get('/app/bootstrap');
+    return { session: res.session, user: res.user, navigation: res.nav, program: res.program };
+  };
+</script>
+
+<GlobalStateStoreProvider {onLogin} {onLogout} {onFetchSession}>
+  {@render children()}
+</GlobalStateStoreProvider>
+```
+
+### Provider props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `apiURL` | `string` | — | Sets `session.apiURL` on mount |
+| `autoFetch` | `boolean` | `true` | Enables automatic `fetchData` calls |
+| `fetchOnMount` | `boolean` | `true` | Calls `fetchData` once after mount |
+| `onFetchSession` | `fn` | — | Called by `fetchData`; must return state slice or void |
+| `onLogin` | `fn` | — | Called after credentials are set; return confirms the session |
+| `onLogout` | `fn` | — | Called during logout |
+| `program` | `Partial<ProgramState>` | — | Merged into `program` slice on mount |
+| `throttleMs` | `number` | `0` | Minimum ms between `fetchData` calls |
+
+---
+
+## State slices
+
+### `session`
+
+| Field | Type | Description |
+|---|---|---|
+| `apiURL` | `string` | Base API URL |
+| `authToken` | `string` | Bearer token |
+| `loggedIn` | `boolean` | Persisted login intent |
+| `validated` | `boolean` | Server has confirmed the session this load |
+| `expiryDate` | `string` | ISO date; `isLoggedIn` returns false after this |
+| `connected` | `boolean` | Last fetch succeeded |
+| `loading` | `boolean` | Fetch in progress |
+| `error` | `string` | Last fetch error message |
+
+### `user`
+
+`guid`, `username`, `email`, `fullNames`, `language`, `isAdmin`, `avatarUrl`, `theme`, `parameters`
+
+### `owner`
+
+`id`, `guid`, `name`, `logo`, `settings`, `theme`
+
+### `program`
+
+`guid`, `name`, `slug`, `environment`, `version`, `controls`, `globals`, `database`, `meta`
+
+### `layout`
+
+`topBar`, `leftBar`, `rightBar`, `bottomBar` — each is `{ open, pinned, size, collapsed, menuItems }`
+
+### `navigation`
+
+`menu: MenuItem[]`, `currentPage: { title, path, breadcrumbs, meta }`
+
+---
+
+## Auth lifecycle
+
+```
+login(token)
+  → sets authToken, loggedIn:false, validated:false
+  → calls onLogin  ──► server confirms  → loggedIn:true, validated:true
+  → calls fetchData (onFetchSession)    → merges server state
+```
+
+```
+logout()
+  → clears all auth state, loading:true
+  → calls onLogout
+  → calls fetchData (onFetchSession)
+```
+
+```
+fetchData(url?)
+  → no-op if onFetchSession not registered
+  → calls onFetchSession
+  → validates or clears session (see Session Validation below)
+```
+
+---
+
+## Session validation
+
+Credentials from `localStorage` start each page load as `loggedIn: true, validated: false`. `isLoggedInStore` emits `false` until validated.
+
+Validation is triggered automatically — no manual call needed — in priority order:
+
+1. **`onFetchSession` registered** while unvalidated credentials exist (`setState` detects handler transition)
+2. **Any state change** with unvalidated credentials + handler present (`store.subscribe`)
+
+`fetchData` clears the session when the server response indicates invalidity:
+
+| Condition | Result |
+|---|---|
+| `onFetchSession` not registered | No-op, session unchanged |
+| Server returns no session/user fields | Session preserved, `validated` stays `false` |
+| Server returns `loggedIn: false` | Session cleared |
+| Server returns a different `authToken` | Session cleared |
+| Server returns a different `user.guid` or `username` | Session cleared |
+| `expiryDate` is in the past | Session cleared |
+| Server confirms credentials | `validated: true`, session kept |
+
+---
+
+## Reactive usage (Svelte components)
+
+```svelte
+<script lang="ts">
+  import { isLoggedInStore, useGlobalStateStore } from '@warkypublic/svelix';
+
+  const username = useGlobalStateStore((s) => s.user.username);
+</script>
+
+{#if $isLoggedInStore}
+  <p>Welcome, {$username}</p>
+{/if}
+```
+
+### Reactive stores
+
+| Export | Type | Value |
+|---|---|---|
+| `isLoggedInStore` | `Readable<boolean>` | `true` only when `loggedIn && validated && !expired` |
+| `languageStore` | `Readable<'en' \| 'af'>` | `user.language` |
+| `useGlobalStateStore(selector?)` | `Readable<T>` | Derived slice of the full store |
+
+---
+
+## Imperative usage (outside components)
+
+```ts
+import { GlobalStateStore, getAuthToken, getApiURL, setAuthToken, setApiURL } from '@warkypublic/svelix';
+
+const state = GlobalStateStore.getState();
+
+await state.login('my-token');
+await state.logout();
+await state.fetchData();
+
+state.isLoggedIn();          // boolean — checks validated + loggedIn + authToken + expiry
+state.setAuthToken('token');
+state.setApiURL('https://api.example.com');
+state.setUser({ username: 'alice' });
+state.setSession({ expiryDate: '2099-01-01T00:00:00.000Z' });
+
+getAuthToken();  // shorthand
+getApiURL();
+setAuthToken('token');
+setApiURL('https://api.example.com');
+```
+
+---
+
+## Persistence
+
+All slices are written to `localStorage` under `APP_GLO:<slice>` on every state change.
+
+**Not persisted:** `session.connected`, `session.error`, `session.loading`, `session.validated`
+
+On load, `validated` is forced to `false` when credentials exist. `loggedIn` is preserved as-is so the UI can optimistically render the logged-in shell while re-validation completes in the background.
+
+---
+
+## Callback return shapes
+
+```ts
+// onLogin / onLogout
+Promise<{
+  session?: Partial<SessionState>;
+  user?: Partial<UserState>;
+  owner?: Partial<OwnerState>;
+  program?: Partial<ProgramState>;
+} | void>
+
+// onFetchSession  (superset — also accepts layout + navigation)
+Promise<Partial<GlobalState>>
+```
+
+Return only the fields that changed. Omitted fields are left as-is.

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

@@ -123,8 +123,13 @@
 
   // ── Selection / editing state ────────────────────────────────────────────────
 
-  let currentSelection = $state<Selection>(untrack(() => selection));
+  let currentSelection = $state<Selection>({ type: "none" });
   let focusedCell = $state<Item | null>(null);
+
+  $effect(() => {
+    if (!selection || selection.type === "none") return;
+    currentSelection = selection;
+  });
   let isEditing = $state(false);
   let editingCell = $state<Item | null>(null);
 
@@ -211,10 +216,14 @@
     }
 
     if (lines.length > 0) {
-      await navigator.clipboard.writeText(lines.join("\n"));
-      canvasComponent?.setAnnouncement(
-        `Copied ${lines.length} row${lines.length > 1 ? "s" : ""} to clipboard`,
-      );
+      try {
+        await navigator.clipboard.writeText(lines.join("\n"));
+        canvasComponent?.setAnnouncement(
+          `Copied ${lines.length} row${lines.length > 1 ? "s" : ""} to clipboard`,
+        );
+      } catch {
+        canvasComponent?.setAnnouncement("Clipboard access denied");
+      }
     }
   }
 
@@ -222,7 +231,13 @@
     if (resolvedReadonly) return;
     const fc = canvasComponent?.getFocusedCell() ?? focusedCell;
     if (!fc) return;
-    const text = await navigator.clipboard.readText();
+    let text: string;
+    try {
+      text = await navigator.clipboard.readText();
+    } catch {
+      canvasComponent?.setAnnouncement("Clipboard access denied");
+      return;
+    }
     const pastedRows = text.split("\n").map((line) => line.split("\t"));
     const [startCol, startRow] = fc;
 
@@ -413,6 +428,7 @@
   width={typeof width === "number" ? `${width}px` : (width ?? "100%")}
   height={typeof height === "number" ? `${height}px` : (height ?? "400px")}
   {mergedTheme}
+  {isDarkMode}
   {headerHeight}
   {rowHeight}
   readonly={resolvedReadonly}
@@ -460,8 +476,10 @@
   onRowContextMenu={(row) => {
     onRowContextMenu?.(row);
   }}
-  onColumnResized={(col, width) => {
-    onGridEvent?.("column_resized", undefined, columns[col], undefined, { width });
+  onColumnResized={(col, newWidth) => {
+    columns[col].width = newWidth;
+    columns[col].grow = 0;
+    onGridEvent?.("column_resized", undefined, columns[col], undefined, { width: newWidth });
   }}
   onGridResize={(width, height) => {
     onGridEvent?.("resize", undefined, undefined, undefined, { width, height });

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

@@ -37,6 +37,7 @@
     width: string;
     height: string;
     mergedTheme: GridlerTheme;
+    isDarkMode?: boolean;
     headerHeight?: number;
     rowHeight?: number;
     readonly?: boolean;
@@ -92,6 +93,7 @@
     width,
     height,
     mergedTheme,
+    isDarkMode: isDarkModeProp = false,
     headerHeight = 36,
     rowHeight = 34,
     readonly = false,
@@ -135,7 +137,6 @@
 
   // ── Internal state ───────────────────────────────────────────────────────────
 
-  let isDarkMode = $state(false);
   let scrollX = $state(0);
   let scrollY = $state(0);
   let currentSelection = $state<Selection>({ type: "none" });
@@ -143,8 +144,8 @@
   let isDragging = $state(false);
   let dragStart = $state<Item | null>(null);
   let resizingColumn = $state<number | null>(null);
+  let resizeWidth = $state<number | null>(null);
   let hoverResizeCol = $state<number | null>(null);
-  let resizeVersion = $state(0);
   let draggingHeaderCol = $state<number | null>(null);
   let dragHeaderCurrentX = $state(0);
   let announcement = $state("");
@@ -194,13 +195,17 @@
   );
 
   const effectiveColumns: GridlerColumn[] = $derived.by(() => {
-    void resizeVersion;
-    return computeEffectiveColumns(columns, containerWidth, rowMarkerWidth);
+    const cols = resizingColumn !== null && resizeWidth !== null
+      ? columns.map((c, i) => i === resizingColumn ? { ...c, width: resizeWidth, grow: 0 } : c)
+      : columns;
+    return computeEffectiveColumns(cols, containerWidth, rowMarkerWidth);
   });
 
   const totalWidth = $derived.by(() => {
-    void resizeVersion;
-    return columns.reduce((sum, col) => sum + col.width, 0) + rowMarkerWidth;
+    const cols = resizingColumn !== null && resizeWidth !== null
+      ? columns.map((c, i) => i === resizingColumn ? { ...c, width: resizeWidth } : c)
+      : columns;
+    return cols.reduce((sum, col) => sum + col.width, 0) + rowMarkerWidth;
   });
 
   const totalHeight = $derived(getTotalHeight(rows, rowHeight));
@@ -257,45 +262,6 @@
     }
   });
 
-  // ── Dark mode detection ───────────────────────────────────────────────────────
-
-  function computeIsDarkMode(): boolean {
-    const root = containerRef;
-    if (root?.closest('.dark, [data-theme="dark"]')) return true;
-    if (document?.documentElement?.classList.contains("dark")) return true;
-    if (document?.body?.classList.contains("dark")) return true;
-    if (document?.documentElement?.getAttribute("data-theme") === "dark")
-      return true;
-    if (document?.body?.getAttribute("data-theme") === "dark") return true;
-    return false;
-  }
-
-  $effect(() => {
-    if (!containerRef) return;
-    const update = () => {
-      isDarkMode = computeIsDarkMode();
-    };
-    update();
-
-    const observed: HTMLElement[] = [];
-    let el: HTMLElement | null = containerRef;
-    while (el) {
-      observed.push(el);
-      el = el.parentElement;
-    }
-    if (document.documentElement) observed.push(document.documentElement);
-    if (document.body) observed.push(document.body);
-
-    const mo = new MutationObserver(update);
-    for (const node of observed) {
-      mo.observe(node, {
-        attributes: true,
-        attributeFilter: ["class", "data-theme"],
-      });
-    }
-    return () => mo.disconnect();
-  });
-
   // ── Resize observer ───────────────────────────────────────────────────────────
 
   $effect(() => {
@@ -320,16 +286,20 @@
     return () => document.removeEventListener(IMAGE_LOADED_EVENT, handler);
   });
 
+  // ── Document listener cleanup on destroy ─────────────────────────────────────
+  $effect(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleDocumentMouseMove);
+      document.removeEventListener("mouseup", handleDocumentMouseUp);
+    };
+  });
+
   // ── Render loop ───────────────────────────────────────────────────────────────
 
   $effect(() => {
-    void visibleRange;
-    void searchValue;
-    void currentSelection;
-    void getCellContent;
-    void mergedTheme;
-    void isDarkMode;
-    void sortOrder;
+    // Track reactive dependencies that should trigger a redraw.
+    const _deps = [visibleRange, searchValue, currentSelection, getCellContent, mergedTheme, isDarkModeProp, sortOrder];
+    void _deps;
     if (ctx && containerWidth > 0 && containerHeight > 0) {
       scheduleDraw();
     }
@@ -367,7 +337,7 @@
       totalHeight,
       currentSelection,
       mergedTheme,
-      isDarkMode,
+      isDarkMode: isDarkModeProp,
       rowMarkers: rowMarkers ?? "none",
       draggingHeaderCol,
       dragHeaderCurrentX,
@@ -849,9 +819,7 @@
       const scrollXForResize =
         fixedColumns > 0 && resizingColumn < fixedColumns ? 0 : scrollX;
       const newWidth = Math.max(50, e.offsetX - baseX + scrollXForResize);
-      columns[resizingColumn].width = newWidth;
-      columns[resizingColumn].grow = 0;
-      resizeVersion++;
+      resizeWidth = newWidth;
       scheduleDraw();
       return;
     }
@@ -955,12 +923,13 @@
       scheduleDraw();
     }
 
-    if (resizingColumn !== null) {
-      onColumnResized?.(resizingColumn, columns[resizingColumn].width);
+    if (resizingColumn !== null && resizeWidth !== null) {
+      onColumnResized?.(resizingColumn, resizeWidth);
     }
     isDragging = false;
     dragStart = null;
     resizingColumn = null;
+    resizeWidth = null;
   }
 
   function handleMouseLeave(e: MouseEvent) {
@@ -969,6 +938,7 @@
     hoverResizeCol = null;
     hoverMenuButton = false;
     hoverSortCol = null;
+    pendingGridMenuOpen = false;
     if (hoveredCell) {
       onCellLeave?.(hoveredCell);
       hoveredCell = null;
@@ -981,7 +951,6 @@
   }
 
   function handleWheel(e: WheelEvent) {
-    if (!hasFocus) return;
     if (scrollRef) {
       e.preventDefault();
       scrollRef.scrollLeft += e.deltaX;
@@ -1079,7 +1048,7 @@
 
     if (rowMarkers !== "none" && offsetX < rowMarkerWidth) {
       const row = getRowFromOffsetY(offsetY);
-      if (row >= 0 && row < rows) {
+      if (row !== null && row >= 0 && row < rows) {
         onRowToggle?.(row);
       }
       return;
@@ -1207,7 +1176,7 @@
     <GridlerEditor
       cell={getCellContent(editingCell)}
       x={getColumnX(effectiveColumns, editingCell[0]) -
-        scrollX +
+        (editingCell[0] < fixedColumns ? 0 : scrollX) +
         rowMarkerWidth}
       y={editingCell[1] * rowHeight - scrollY + headerHeight}
       width={effectiveColumns[editingCell[0]]?.width ?? 0}

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

@@ -8,6 +8,7 @@ interface Props {
     width: string;
     height: string;
     mergedTheme: GridlerTheme;
+    isDarkMode?: boolean;
     headerHeight?: number;
     rowHeight?: number;
     readonly?: boolean;

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

@@ -163,7 +163,7 @@
     // gridler pass-through
     fixedColumns = 0,
     rowMarkers,
-    showSearch = false,
+    showSearch,
     height = 500,
     onColumnMoved,
     onCellEdited,
@@ -211,10 +211,15 @@
     if (data === untrack(() => lastDataRef)) return;
     lastDataRef = data;
     if (typeof data === "function") {
-      data().then((result) => {
-        dataState = result;
-        onGridEvent?.("load");
-      });
+      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");
@@ -292,9 +297,14 @@
     if (isServerMode) {
       refreshTrigger++;
     } else if (typeof data === "function") {
-      data().then((result) => {
-        dataState = result;
-      });
+      data()
+        .then((result) => {
+          dataState = result;
+        })
+        .catch((e) => {
+          const msg = e instanceof Error ? e.message : "Failed to load data";
+          onLoadError?.(msg);
+        });
     }
   }
 
@@ -355,6 +365,7 @@
   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<
@@ -372,6 +383,7 @@
     filterPanelColTitle = colTitle;
     filterPanelOp = existing?.op ?? "contains";
     filterPanelValue = existing?.value ?? "";
+    filterPanelValue2 = existing?.value2 ?? "";
     menu?.show("gridler-filter-panel", {
       x,
       y,
@@ -387,9 +399,13 @@
       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]: { value: filterPanelValue, op: filterPanelOp },
+        [filterPanelColId]: entry,
       });
     }
     menu?.hide("gridler-filter-panel");
@@ -503,6 +519,7 @@
   let serverData = $state<Record<string, unknown>[]>([]);
   let serverTotal = $state(0);
   let serverCursor = $state<string | undefined>(undefined);
+  let serverFetchVersion = $state(0);
   let serverLoading = $state(false);
   let serverAllLoaded = $state(false);
   let serverError = $state<string | null>(null);
@@ -570,15 +587,16 @@
     const _pageSize = pageSize;
 
     // Track resolvedFilters so internal filter changes also trigger a re-fetch.
-     
-    void resolvedFilters;
+    const _filters = resolvedFilters;
     // Track manual refresh trigger.
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    refreshTrigger;
+    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 = [];
@@ -586,7 +604,13 @@
     serverCursor = undefined;
     serverAllLoaded = false;
 
-    const allFilters = buildAllFilters(_search);
+    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, resolvedFields)
@@ -596,7 +620,7 @@
         serverTotal = result.total;
         serverCursor = result.nextCursor;
         serverAllLoaded = result.data.length < _pageSize || !result.nextCursor;
-        onGridEvent?.("load", { row: 0, column: 0 });
+        onGridEvent?.("load");
       })
       .catch((e) => {
         if (cancelled) return;
@@ -619,7 +643,7 @@
     if (!_adapter || serverLoading || serverAllLoaded || !serverCursor) return;
 
     const cursorSnapshot = serverCursor;
-    const lengthSnapshot = serverData.length;
+    const versionSnapshot = serverFetchVersion;
     serverLoading = true;
 
     const allFilters = buildAllFilters(
@@ -634,13 +658,14 @@
         allFilters,
         resolvedFields,
       );
-      if (serverData.length !== lengthSnapshot) return;
+      if (serverFetchVersion !== versionSnapshot) return;
       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.
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Failed to load page";
+      onLoadError?.(msg);
     } finally {
       serverLoading = false;
     }
@@ -682,6 +707,11 @@
 
   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") {
@@ -706,7 +736,7 @@
 
   // ── Settings change event ─────────────────────────────────────────────────
 
-  let lastSettings = $state(settings);
+  let lastSettings = $state<typeof settings>(undefined);
   $effect(() => {
     if (settings === untrack(() => lastSettings)) return;
     lastSettings = settings;
@@ -804,7 +834,6 @@
     selectedItems={internalSelectedItems}
     getRowData={resolveRowData}
     onSelectionChange={handleSelectionChange}
-    {onMenuClick}
     onGridMenuOpen={handleGridMenuClick}
     sortOrder={resolvedSortOrder}
     onSortOrderChange={handleSortOrderChange}
@@ -842,8 +871,10 @@
     role="dialog"
     aria-modal="true"
     aria-labelledby="gf-filter-title"
+    tabindex="-1"
+    onkeydown={(e) => { if (e.key === "Escape") onClose(); }}
   >
-    <div class="gf-filter-title">{filterPanelColTitle}</div>
+    <div id="gf-filter-title" class="gf-filter-title">{filterPanelColTitle}</div>
     <select bind:value={filterPanelOp} class="gf-filter-select">
       <option value="contains">Contains</option>
       <option value="equals">Equals</option>
@@ -854,6 +885,10 @@
       <option value="lessThan">Less than</option>
       <option value="greaterThanOrEqual">Greater than or equal</option>
       <option value="lessThanOrEqual">Less than or equal</option>
+      <option value="in">In (comma-separated)</option>
+      <option value="notIn">Not in (comma-separated)</option>
+      <option value="between">Between</option>
+      <option value="notBetween">Not between</option>
       <option value="isNull">Is empty / null</option>
       <option value="isNotNull">Is not empty / null</option>
     </select>
@@ -862,11 +897,20 @@
         class="gf-filter-input"
         type="text"
         bind:value={filterPanelValue}
-        placeholder="Filter value…"
+        placeholder={filterPanelOp === "between" || filterPanelOp === "notBetween" ? "From value…" : "Filter value…"}
+        onkeydown={(e) => {
+          if (e.key === "Enter") applyFilterPanel();
+        }}
+      />
+    {/if}
+    {#if filterPanelOp === "between" || filterPanelOp === "notBetween"}
+      <input
+        class="gf-filter-input"
+        type="text"
+        bind:value={filterPanelValue2}
+        placeholder="To value…"
         onkeydown={(e) => {
-          if (e.key === "Enter") {
-            applyFilterPanel();
-          }
+          if (e.key === "Enter") applyFilterPanel();
         }}
       />
     {/if}

package/dist/components/Gridler/renderers/ImageRenderer.js

@@ -1,7 +1,17 @@
-/** Loaded images keyed by URL. 'loading' prevents duplicate requests. */
+const IMAGE_CACHE_MAX = 500;
+/** Loaded images keyed by URL. 'loading' prevents duplicate requests. Map insertion order acts as LRU. */
 const imageCache = new Map();
 /** Fired on document when a cached image finishes loading so the canvas repaints. */
 export const IMAGE_LOADED_EVENT = 'gridler:image-loaded';
+function touchCache(url, value) {
+    imageCache.delete(url);
+    imageCache.set(url, value);
+    if (imageCache.size > IMAGE_CACHE_MAX) {
+        const oldest = imageCache.keys().next().value;
+        if (oldest !== undefined)
+            imageCache.delete(oldest);
+    }
+}
 /**
  * Draws an image cell. Supported formats: PNG, JPG, SVG (anything <img> can load).
  * cell.data (or cell.displayData) should be a URL or data URI.
@@ -35,16 +45,16 @@ export function drawImageCell(ctx, cell, x, y, size) {
     // Placeholder while loading.
     drawPlaceholder(ctx, x, y, size);
     if (cached !== 'loading') {
-        imageCache.set(url, 'loading');
+        touchCache(url, 'loading');
         const img = new Image();
         if (!isDataUri(url))
             img.crossOrigin = 'anonymous';
         img.onload = () => {
-            imageCache.set(url, img);
+            touchCache(url, img);
             document.dispatchEvent(new CustomEvent(IMAGE_LOADED_EVENT));
         };
         img.onerror = () => {
-            imageCache.set(url, 'error');
+            touchCache(url, 'error');
             document.dispatchEvent(new CustomEvent(IMAGE_LOADED_EVENT));
         };
         img.src = url;

package/dist/components/Gridler/renderers/MarkdownRenderer.d.ts

@@ -1,5 +1,6 @@
 /**
- * Strips basic markdown syntax characters and renders as plain text.
- * For rich markdown rendering, replace this with a custom overlay cell.
+ * Strips markdown syntax patterns and renders as plain text.
+ * Targets structural markdown (headings, bold, italic, code, links)
+ * while preserving those characters when they appear in normal content.
  */
 export declare function drawMarkdownCell(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, maxWidth: number): void;

package/dist/components/Gridler/renderers/MarkdownRenderer.js

@@ -1,10 +1,19 @@
 import { truncateText } from './shared';
 /**
- * Strips basic markdown syntax characters and renders as plain text.
- * For rich markdown rendering, replace this with a custom overlay cell.
+ * Strips markdown syntax patterns and renders as plain text.
+ * Targets structural markdown (headings, bold, italic, code, links)
+ * while preserving those characters when they appear in normal content.
  */
 export function drawMarkdownCell(ctx, text, x, y, maxWidth) {
-    const cleanText = text.replace(/[#*`_~[\]]/g, '');
+    const cleanText = text
+        .replace(/^#{1,6}\s+/gm, '') // headings: "## title" → "title"
+        .replace(/\*\*(.+?)\*\*/g, '$1') // bold: **text** → text
+        .replace(/__(.+?)__/g, '$1') // bold: __text__ → text
+        .replace(/\*(.+?)\*/g, '$1') // italic: *text* → text
+        .replace(/_(.+?)_/g, '$1') // italic: _text_ → text
+        .replace(/~~(.+?)~~/g, '$1') // strikethrough: ~~text~~ → text
+        .replace(/`(.+?)`/g, '$1') // inline code: `code` → code
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'); // links: [text](url) → text
     const truncated = truncateText(ctx, cleanText, maxWidth);
     ctx.fillText(truncated, x, y);
 }

package/dist/components/Gridler/renderers/PercentageRenderer.js

@@ -7,12 +7,17 @@ import { truncateText } from './shared';
 export function drawPercentageCell(ctx, cell, x, y, maxWidth, fractional = true, decimals = 2, locale) {
     let text;
     if (typeof cell.data === 'number') {
-        const value = fractional ? cell.data : cell.data / 100;
-        text = new Intl.NumberFormat(locale, {
-            style: 'percent',
-            minimumFractionDigits: 0,
-            maximumFractionDigits: decimals,
-        }).format(value);
+        try {
+            const value = fractional ? cell.data : cell.data / 100;
+            text = new Intl.NumberFormat(locale, {
+                style: 'percent',
+                minimumFractionDigits: 0,
+                maximumFractionDigits: decimals,
+            }).format(value);
+        }
+        catch {
+            text = cell.displayData;
+        }
     }
     else {
         text = cell.displayData;

package/dist/components/Gridler/renderers/index.js

@@ -90,13 +90,16 @@ export function drawCell(ctx, x, y, width, height, cell, theme, isSelected, isHe
             drawDrilldownCell(ctx, cell, textX, textY, maxWidth, theme);
             break;
         case 'currency':
-            drawCurrencyCell(ctx, cell, textX, textY, maxWidth);
+            drawCurrencyCell(ctx, cell, textX, textY, maxWidth, cell.formatOptions?.currency, cell.formatOptions?.locale);
             break;
         case 'percentage':
-            drawPercentageCell(ctx, cell, textX, textY, maxWidth);
+            drawPercentageCell(ctx, cell, textX, textY, maxWidth, cell.formatOptions?.fractional, cell.formatOptions?.decimals, cell.formatOptions?.locale);
             break;
         case 'datetime':
-            drawDatetimeCell(ctx, cell, textX, textY, maxWidth);
+            drawDatetimeCell(ctx, cell, textX, textY, maxWidth, cell.formatOptions?.dateStyle, cell.formatOptions?.timeStyle, cell.formatOptions?.locale);
+            break;
+        default:
+            drawTextCell(ctx, cell.displayData, textX, textY, maxWidth);
             break;
     }
     ctx.restore();
@@ -111,7 +114,12 @@ export function drawHeaderCell(ctx, x, y, width, height, title, theme, isSelecte
     ctx.fillRect(x, y, width, height);
     ctx.strokeStyle = theme.borderColor;
     ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, width, height);
+    ctx.beginPath();
+    ctx.moveTo(x + width, y);
+    ctx.lineTo(x + width, y + height);
+    ctx.moveTo(x, y + height);
+    ctx.lineTo(x + width, y + height);
+    ctx.stroke();
     if (isSelected) {
         const dark = isDarkBg(theme.bgCell);
         ctx.strokeStyle = theme.accentColor;

package/dist/components/Gridler/renderers/shared.d.ts

@@ -13,6 +13,11 @@ export declare function relativeLuminance({ r, g, b }: {
     g: number;
     b: number;
 }): number;
+export declare function parseRgb(color: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
 export declare function isDarkBg(color: string): boolean;
 /** Binary-search truncation — keeps the longest prefix that fits within maxWidth. */
 export declare function truncateText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string;

package/dist/components/Gridler/renderers/shared.js

@@ -26,25 +26,35 @@ export function relativeLuminance({ r, g, b }) {
     const lin = srgb.map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
     return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
 }
+export function parseRgb(color) {
+    const match = color.match(/rgba?\(\s*(\d+)\s*[, ]\s*(\d+)\s*[, ]\s*(\d+)/);
+    if (!match)
+        return null;
+    return { r: Number(match[1]), g: Number(match[2]), b: Number(match[3]) };
+}
 export function isDarkBg(color) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb(color) ?? parseRgb(color);
     if (!rgb)
         return false;
     return relativeLuminance(rgb) < 0.35;
 }
 /** Binary-search truncation — keeps the longest prefix that fits within maxWidth. */
 export function truncateText(ctx, text, maxWidth) {
-    if (text.length === 0)
-        return text;
+    if (text.length === 0 || maxWidth <= 0)
+        return '';
     const metrics = ctx.measureText(text);
     if (metrics.width <= maxWidth)
         return text;
+    // If even "..." doesn't fit, return empty.
+    const ellipsis = '...';
+    if (ctx.measureText(ellipsis).width > maxWidth)
+        return '';
     let low = 0;
     let high = text.length;
-    let result = text;
+    let result = ellipsis;
     while (low <= high) {
         const mid = Math.floor((low + high) / 2);
-        const truncated = text.slice(0, mid) + '...';
+        const truncated = text.slice(0, mid) + ellipsis;
         const width = ctx.measureText(truncated).width;
         if (width <= maxWidth) {
             result = truncated;

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

@@ -45,6 +45,20 @@ export interface GridlerColumn extends GridColumn<Record<string, unknown>> {
     /** Show a context-menu trigger button on this column's header. */
     hasMenu?: boolean;
 }
+export interface GridlerCellFormatOptions {
+    /** Currency code for 'currency' cells (default: 'ZAR'). */
+    currency?: string;
+    /** Locale for number/date formatting. */
+    locale?: string;
+    /** For 'percentage' cells: true if data is 0–1 fractional (default), false if 0–100. */
+    fractional?: boolean;
+    /** Decimal places for 'percentage' cells (default: 2). */
+    decimals?: number;
+    /** Date style for 'datetime' cells (default: 'short'). */
+    dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+    /** Time style for 'datetime' cells. */
+    timeStyle?: Intl.DateTimeFormatOptions['timeStyle'];
+}
 export interface GridlerCell {
     kind: GridlerCellKind;
     data: unknown;
@@ -53,6 +67,8 @@ export interface GridlerCell {
     allowEditing?: boolean;
     readonly?: boolean;
     span?: [startRow: number, endRow: number];
+    /** Per-cell format options for currency, percentage, and datetime renderers. */
+    formatOptions?: GridlerCellFormatOptions;
 }
 export type Selection = {
     type: "none";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
   "exports": {