@kayord/ui 4.0.2 → 4.0.5

package/dist/components/custom/data-table/Pagination.svelte

@@ -12,7 +12,7 @@
 		canChangePageSize?: boolean;
 	}
 
-	let { table, canChangePageSize = true }: Props<T> = $props();
+	let { table, canChangePageSize = false }: Props<T> = $props();
 
 	const pagination = $derived(table.atoms.pagination.get());
 </script>
@@ -24,11 +24,12 @@
 				{table.getFilteredSelectedRowModel().rows.length} of
 				{table.getFilteredRowModel().rows.length} row(s) selected.
 			</p>
+		{:else}
+			<p>
+				{table.getRowModel().rows.length.toLocaleString()}
+				of {table.getRowCount().toLocaleString()} rows
+			</p>
 		{/if}
-		<p>
-			{table.getRowModel().rows.length.toLocaleString()}
-			of {table.getRowCount().toLocaleString()} rows
-		</p>
 	</div>
 	<div class="flex items-center gap-6 lg:gap-8">
 		{#if canChangePageSize}

package/dist/components/custom/data-table/table-search-params.d.ts

@@ -9,7 +9,7 @@ export declare const decodeSorting: () => {
 export declare const encodeGlobalFilter: (state: State) => any;
 export declare const decodeGlobalFilter: () => string | undefined;
 export declare const encodePageIndex: (state: State) => string;
-export declare const decodePageIndex: () => number;
+export declare const decodePageIndex: () => number | undefined;
 export declare const encodeColumnFilters: (state: State) => string;
 export declare const decodeColumnFilters: () => {
     id: string;

package/dist/components/custom/data-table/table-search-params.js

@@ -28,8 +28,11 @@ export const encodePageIndex = (state) => {
     return state.pagination?.pageIndex?.toString() ?? "";
 };
 export const decodePageIndex = () => {
-    const pageIndex = Number(page.url.searchParams.get("page") ?? "0");
-    return Number.isFinite(pageIndex) ? pageIndex : 0;
+    const raw = page.url.searchParams.get("page");
+    if (raw == null)
+        return undefined;
+    const pageIndex = Number(raw);
+    return Number.isFinite(pageIndex) ? pageIndex : undefined;
 };
 export const encodeColumnFilters = (state) => {
     return (state.columnFilters
@@ -59,15 +62,16 @@ export const decodeColumnFilters = () => {
     });
 };
 export const decodeTableState = () => {
-    return {
-        pagination: {
-            pageIndex: decodePageIndex(),
-            pageSize: 10,
-        },
+    const pageIndex = decodePageIndex();
+    const state = {
         sorting: decodeSorting(),
         columnFilters: decodeColumnFilters(),
         globalFilter: decodeGlobalFilter(),
     };
+    if (pageIndex !== undefined) {
+        state.pagination = { pageIndex, pageSize: 10 };
+    }
+    return state;
 };
 export const encodeTableState = (state, options, searchParams) => {
     if (searchParams === undefined) {

package/dist/components/custom/data-table/table-url-sync.svelte.d.ts

@@ -34,7 +34,9 @@ export interface TableUrlSyncOptions {
  *
  * The table is hydrated from the URL immediately, before the first render, so
  * row-model auto-resets (which are skipped on their first run) can't clobber
- * the URL-backed state.
+ * the URL-backed state. URL params override `initialState`; params missing
+ * from the URL leave `initialState` in place, and the initial state is then
+ * written back to the URL like any other state.
  *
  * By default all four params are synced; pass {@link TableUrlSyncOptions} to
  * enable only a subset, e.g. `useTableUrlSync(table, { pagination: true })`.

package/dist/components/custom/data-table/table-url-sync.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { beforeNavigate } from "$app/navigation";
+import { afterNavigate, beforeNavigate } from "$app/navigation";
 import { useSearchParams } from "runed/kit";
 import { defaultSearchParamSchema } from "./types";
 import { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, encodeColumnFilters, encodeSorting, } from "./table-search-params";
@@ -17,7 +17,9 @@ import { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting
  *
  * The table is hydrated from the URL immediately, before the first render, so
  * row-model auto-resets (which are skipped on their first run) can't clobber
- * the URL-backed state.
+ * the URL-backed state. URL params override `initialState`; params missing
+ * from the URL leave `initialState` in place, and the initial state is then
+ * written back to the URL like any other state.
  *
  * By default all four params are synced; pass {@link TableUrlSyncOptions} to
  * enable only a subset, e.g. `useTableUrlSync(table, { pagination: true })`.
@@ -31,34 +33,61 @@ export function useTableUrlSync(table, options) {
         ...options,
     };
     const params = useSearchParams(defaultSearchParamSchema, { pushHistory: false });
-    // Hydrate from the URL before the first render. Sorting/filter/data changes
-    // defer an autoResetPageIndex microtask via the adapter's schedule; row
-    // models skip auto-resets on their first run, so applying the URL state
-    // up-front can't be undone by them (a post-mount hydration would be).
-    if (enabled.globalFilter)
-        table.setGlobalFilter(decodeGlobalFilter() ?? "");
-    if (enabled.sorting)
-        table.setSorting(decodeSorting() ?? []);
-    if (enabled.pagination)
-        table.setPageIndex(decodePageIndex());
-    if (enabled.columnFilters)
-        table.setColumnFilters(decodeColumnFilters() ?? []);
-    // When navigating with new sort/search/filter params, snap back to the first page
-    // unless the target URL explicitly points at a later page.
+    // Hydrate from the URL before the first render, but only for params the URL
+    // actually carries — absent params leave the table's `initialState` in place
+    // (the write-back effect below then publishes it to the URL). Sorting/filter/
+    // data changes defer an autoResetPageIndex microtask via the adapter's
+    // schedule; row models skip auto-resets on their first run, so applying the
+    // URL state up-front can't be undone by them (a post-mount hydration would be).
+    if (enabled.globalFilter) {
+        const globalFilter = decodeGlobalFilter();
+        if (globalFilter !== undefined)
+            table.setGlobalFilter(globalFilter);
+    }
+    if (enabled.sorting) {
+        const sorting = decodeSorting();
+        if (sorting !== undefined)
+            table.setSorting(sorting);
+    }
+    if (enabled.pagination) {
+        const pageIndex = decodePageIndex();
+        if (pageIndex !== undefined)
+            table.setPageIndex(pageIndex);
+    }
+    if (enabled.columnFilters) {
+        const columnFilters = decodeColumnFilters();
+        if (columnFilters !== undefined)
+            table.setColumnFilters(columnFilters);
+    }
+    // When navigating with new sort/search/filter params, snap back to the first
+    // page unless the target URL explicitly points at a later page. Only same-route
+    // query changes count: resetting on a cross-route navigation would mutate state
+    // mid-navigation, and the write-back effect below would then issue a competing
+    // `goto("?…")` that cancels the in-flight navigation (links off the table page
+    // would "do nothing" whenever the table isn't already on page 1).
+    let leavePage = false;
     beforeNavigate((navigation) => {
+        const from = navigation.from?.url;
+        const to = navigation.to?.url;
+        if (!from || !to)
+            return;
+        if (from.pathname !== to.pathname) {
+            leavePage = true;
+            return;
+        }
         if (!enabled.pagination)
             return;
-        const targetPage = Number(navigation.to?.url.searchParams.get("page") ?? "0");
-        const queryChanged = (enabled.sorting &&
-            navigation.from?.url.searchParams.get("sort") != navigation.to?.url.searchParams.get("sort")) ||
-            (enabled.globalFilter &&
-                navigation.from?.url.searchParams.get("search") != navigation.to?.url.searchParams.get("search")) ||
-            (enabled.columnFilters &&
-                navigation.from?.url.searchParams.get("filter") != navigation.to?.url.searchParams.get("filter"));
+        const targetPage = Number(to.searchParams.get("page") ?? "0");
+        const queryChanged = (enabled.sorting && from.searchParams.get("sort") != to.searchParams.get("sort")) ||
+            (enabled.globalFilter && from.searchParams.get("search") != to.searchParams.get("search")) ||
+            (enabled.columnFilters && from.searchParams.get("filter") != to.searchParams.get("filter"));
         if (queryChanged && (!Number.isFinite(targetPage) || targetPage <= 0)) {
             table.resetPageIndex();
         }
     });
+    afterNavigate(() => {
+        leavePage = false;
+    });
     // Write atoms back to the URL. Only the enabled atoms are read (and thus
     // tracked) so the effect doesn't re-run on unrelated state (e.g. row
     // selection), and disabled params are left untouched in the URL.
@@ -68,6 +97,10 @@ export function useTableUrlSync(table, options) {
         const sorting = enabled.sorting ? table.atoms.sorting.get() : undefined;
         const columnFilters = enabled.columnFilters ? table.atoms.columnFilters.get() : undefined;
         untrack(() => {
+            // Skip writes while leaving the route: state mutating mid-navigation
+            // (e.g. a debounced filter landing) must not `goto` over the target URL.
+            if (leavePage)
+                return;
             if (enabled.globalFilter)
                 params.search = search;
             if (enabled.pagination && page !== undefined)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "4.0.2",
+  "version": "4.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kayordDX/ui.git"
@@ -112,19 +112,19 @@
     "runed": "^0.37.1",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",
-    "zod": "4.4.3"
+    "zod": "4.5.2"
   },
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
     "@internationalized/date": "^3.12.3",
-    "@lucide/svelte": "^1.34.0",
+    "@lucide/svelte": "^1.38.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "7.3.0",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/svelte-table": "^9.1.2",
+    "@tanstack/svelte-table": "^9.2.4",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",
     "@vitest/browser": "^4.1.11",
@@ -137,7 +137,7 @@
     "eslint-plugin-svelte": "^3.23.0",
     "formsnap": "^2.0.1",
     "globals": "^17.11.0",
-    "layerchart": "^2.3.0",
+    "layerchart": "^2.3.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
     "playwright": "^1.62.1",
@@ -145,8 +145,8 @@
     "prettier-plugin-svelte": "4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.1",
     "publint": "^0.3.24",
-    "shadcn-svelte": "^1.5.0",
-    "svelte": "^5.56.10",
+    "shadcn-svelte": "^1.5.1",
+    "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",
     "svelte-sonner": "^1.2.1",
     "sveltekit-superforms": "^2.30.2",
@@ -154,7 +154,7 @@
     "tslib": "^2.8.1",
     "tw-animate-css": "1.4.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.68.0",
+    "typescript-eslint": "^8.69.0",
     "vaul-svelte": "1.0.0-next.7",
     "vite": "^8.2.2",
     "vitest": "^4.1.11",