@kayord/ui 3.0.11 → 4.0.0

package/dist/components/custom/data-table/features.js

@@ -0,0 +1,36 @@
+import { tableFeatures, stockFeatures, metaHelper, filterFns, sortFns, aggregationFns, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, } from "@tanstack/svelte-table";
+/**
+ * The static feature set shared by every {@link createShadTable} table.
+ *
+ * Includes:
+ * - all stock **feature modules** (so the `Table` / `ColumnDef` API surface and
+ *   every `table.atoms.<slice>` is always available and consistently typed)
+ * - the **row models** (sorted / filtered / paginated) — runtime-only, but
+ *   cheap to wire unconditionally: an unused pipeline simply falls through to
+ *   the previous stage (matching the TanStack examples)
+ * - the built-in **`filterFns` / `sortFns` / `aggregationFns` registries**, so
+ *   any string fn (including the default `"auto"`) resolves instead of silently
+ *   no-op'ing, and those strings typecheck in column defs
+ * - the per-table **`columnMeta` / `tableMeta`** slots (`meta.className`)
+ */
+export const features = tableFeatures({
+    ...stockFeatures,
+    sortedRowModel: createSortedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    filterFns,
+    sortFns,
+    aggregationFns,
+    columnMeta: metaHelper(),
+    tableMeta: metaHelper(),
+});
+/**
+ * Creates a `ColumnHelper` bound to the library's feature set, so consumers
+ * get the same typed API as the TanStack examples:
+ *
+ * ```ts
+ * const helper = createColumnHelper<Person>();
+ * const columns = helper.columns([helper.accessor("name", { header: "Name" })]);
+ * ```
+ */
+export const createColumnHelperFor = () => createColumnHelper();

package/dist/components/custom/data-table/index.d.ts

@@ -1,6 +1,9 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { createShadTable } from "./shad-table.svelte";
-export { createShadTableOld } from "./shad-table-old.svelte";
+export { createShadTable, features } from "./shad-table.svelte";
+export type { ShadTableOptions } from "./shad-table.svelte";
+export { createColumnHelperFor, type DataTableFeatures } from "./features";
+export { useTableUrlSync } from "./table-url-sync.svelte";
+export type { TableUrlSyncOptions } from "./table-url-sync.svelte";
 export { aggregationFns } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";
 export type { CustomColumnMeta, CustomOptions } from "./types";

package/dist/components/custom/data-table/index.js

@@ -1,5 +1,6 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { createShadTable } from "./shad-table.svelte";
-export { createShadTableOld } from "./shad-table-old.svelte";
+export { createShadTable, features } from "./shad-table.svelte";
+export { createColumnHelperFor } from "./features";
+export { useTableUrlSync } from "./table-url-sync.svelte";
 export { aggregationFns } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";

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

@@ -1,10 +1,11 @@
-import { type RowData, type RowModel, type Table } from "@tanstack/table-core";
+import { type RowData, type Table, type TableState } from "@tanstack/svelte-table";
+import { features, type DataTableFeatures } from "./features";
 import type { BaseOptions } from "./types";
-interface ShadTableOptions<TData extends RowData> extends BaseOptions<TData> {
-    getCoreRowModel?: (table: Table<any>) => () => RowModel<any>;
-    enablePaging?: boolean;
-    enableVisibility?: boolean;
+export type ControlledState = Partial<TableState<DataTableFeatures>>;
+export type ShadTableOptions<TData extends RowData> = BaseOptions<TData> & {
     enableRowSelectionUI?: boolean;
-}
-export declare function createShadTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>): Table<TData>;
-export {};
+    controlledState?: ControlledState;
+    resetPageIndexOn?: Array<keyof ControlledState>;
+};
+export declare function createShadTable<TData extends RowData>(shadOptions: ShadTableOptions<TData>): Table<DataTableFeatures, TData>;
+export { features };

package/dist/components/custom/data-table/shad-table.svelte.js

@@ -1,239 +1,60 @@
-import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
+import { createTable, functionalUpdate, } from "@tanstack/svelte-table";
 import DataTableCheckbox from "./DataTableCheckbox.svelte";
-import { renderComponent } from "../../../data-table";
-import { mergeObjects } from "../../ui/data-table/data-table.svelte";
-import { createSubscriber } from "svelte/reactivity";
+import { renderComponent } from "../../ui/data-table";
+import { features } from "./features";
 export function createShadTable(shadOptions) {
-    let notifyTableUpdate;
-    const subscribeToTable = createSubscriber((update) => {
-        notifyTableUpdate = update;
-        return () => { };
-    });
-    const defaultOptions = {
-        get data() {
-            return shadOptions.data;
-        },
-        columns: shadOptions.columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        globalFilterFn: "auto",
-        columnResizeMode: "onChange",
-        // enableColumnResizing: true
-        enableRowSelection: false,
-        // enableFilters: true,
-        enableGlobalFilter: true,
-        onSortingChange: (updater) => {
-            if (state.sorting) {
-                state.sorting = typeof updater === "function" ? updater(state.sorting) : updater;
-            }
-            notifyTableUpdate?.();
-        },
-        // onColumnSizingChange: (updater) => {
-        // 	columnSizing = typeof updater === "function" ? updater(columnSizing) : updater;
-        // },
-        // onColumnSizingInfoChange: (updater) => {
-        // 	columnSizingInfo = typeof updater === "function" ? updater(columnSizingInfo) : updater;
-        // },
-        // onColumnPinningChange: (updater) => {
-        // 	columnPinning = typeof updater === "function" ? updater(columnPinning) : updater;
-        // },
-        onColumnVisibilityChange: (updater) => {
-            if (state.columnVisibility) {
-                state.columnVisibility = typeof updater === "function" ? updater(state.columnVisibility) : updater;
-            }
-            notifyTableUpdate?.();
-        },
-        onPaginationChange: (updater) => {
-            if (state.pagination) {
-                state.pagination = typeof updater === "function" ? updater(state.pagination) : updater;
-            }
-            notifyTableUpdate?.();
-        },
-        onColumnFiltersChange: (updater) => {
-            if (state.columnFilters) {
-                state.columnFilters = typeof updater === "function" ? updater(state.columnFilters) : updater;
-            }
-            notifyTableUpdate?.();
-        },
-        onRowSelectionChange: (updater) => {
-            if (state.rowSelection) {
-                state.rowSelection = typeof updater === "function" ? updater(state.rowSelection) : updater;
-            }
-            notifyTableUpdate?.();
-        },
-        onGlobalFilterChange: (updater) => {
-            state.globalFilter = typeof updater === "function" ? updater(state.globalFilter) : updater;
-            notifyTableUpdate?.();
-        },
-    };
-    if (shadOptions.useURLSearchParams) {
-        shadOptions.autoResetPageIndex = false;
-    }
-    if ((shadOptions.enablePaging ?? true) == false) {
-        defaultOptions.getPaginationRowModel = undefined;
-        defaultOptions.manualPagination = true;
+    const { enableRowSelectionUI = true, controlledState, resetPageIndexOn = [], ...rest } = shadOptions;
+    const externalHandlers = {};
+    if (controlledState) {
+        for (const key of Object.keys(controlledState)) {
+            const resetPage = resetPageIndexOn.includes(key);
+            externalHandlers[`on${key.charAt(0).toUpperCase()}${key.slice(1)}Change`] = (updater) => {
+                const record = controlledState;
+                record[key] = functionalUpdate(updater, record[key]);
+                if (resetPage && controlledState.pagination) {
+                    controlledState.pagination = { ...controlledState.pagination, pageIndex: 0 };
+                }
+            };
+        }
     }
-    const options = mergeObjects(defaultOptions, shadOptions ?? {});
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        },
-    }, options);
-    const table = createTable(resolvedOptions);
-    const state = $state(table.initialState);
-    // Row Selection
-    if (options.enableRowSelection && (shadOptions.enableRowSelectionUI ?? true)) {
-        const rowSelectionColumn = {
-            id: "select",
-            header: () => {
-                subscribeToTable();
-                return renderComponent(DataTableCheckbox, {
-                    checked: table.getIsAllPageRowsSelected(),
-                    indeterminate: table.getIsSomePageRowsSelected(),
-                    onCheckedChange: () => table.toggleAllPageRowsSelected(),
-                });
-            },
-            cell: (r) => {
-                subscribeToTable();
-                return renderComponent(DataTableCheckbox, {
-                    checked: r.row.getIsSelected(),
-                    onCheckedChange: () => r.row.toggleSelected(),
-                });
-            },
-            enableResizing: false,
-            enableSorting: false,
-        };
-        options.columns.unshift(rowSelectionColumn);
-    }
-    const updateOptions = (table, state) => {
-        table.setOptions((prev) => {
-            return mergeObjects(prev, options, {
-                state: mergeObjects(state, options.state || {}),
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onStateChange: (updater) => {
-                    if (updater instanceof Function)
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                },
+    const state = { ...(rest.state ?? {}) };
+    if (controlledState) {
+        for (const key of Object.keys(controlledState)) {
+            Object.defineProperty(state, key, {
+                enumerable: true,
+                get: () => controlledState[key],
             });
-        });
+        }
+    }
+    const selectColumn = {
+        id: "select",
+        header: () => renderComponent(DataTableCheckbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            indeterminate: table.getIsSomePageRowsSelected() && !table.getIsAllRowsSelected(),
+            onCheckedChange: () => table.toggleAllPageRowsSelected(),
+        }),
+        cell: (r) => renderComponent(DataTableCheckbox, {
+            checked: r.row.getIsSelected(),
+            onCheckedChange: () => r.row.toggleSelected(),
+        }),
+        enableResizing: false,
+        enableSorting: false,
     };
-    updateOptions(table, state);
-    $effect.pre(() => {
-        updateOptions(table, state);
-    });
-    const reactiveTable = {
-        // Expose all original table methods and properties
-        ...table,
-        // Override methods that depend on state to create reactive dependencies
-        getRowModel: () => {
-            subscribeToTable();
-            return table.getRowModel();
-        },
-        getHeaderGroups: () => {
-            subscribeToTable();
-            return table.getHeaderGroups();
-        },
-        getAllColumns: () => {
-            subscribeToTable();
-            return table.getAllColumns();
-        },
-        getVisibleLeafColumns: () => {
-            subscribeToTable();
-            return table.getVisibleLeafColumns();
-        },
-        getState: () => {
-            subscribeToTable();
-            return table.getState();
-        },
-        getPageCount: () => {
-            subscribeToTable();
-            return table.getPageCount();
-        },
-        getColumn: (columnId) => {
-            subscribeToTable();
-            return table.getColumn(columnId);
-        },
-        // Forward all other methods to the original table
-        setColumnFilters: table.setColumnFilters.bind(table),
-        setSorting: table.setSorting.bind(table),
-        setPagination: table.setPagination.bind(table),
-        setPageIndex: table.setPageIndex.bind(table),
-        setPageSize: table.setPageSize.bind(table),
-        setColumnPinning: table.setColumnPinning.bind(table),
-        setColumnVisibility: table.setColumnVisibility.bind(table),
-        setRowSelection: table.setRowSelection.bind(table),
-        setColumnSizing: table.setColumnSizing.bind(table),
-        setOptions: table.setOptions.bind(table),
-        setGlobalFilter: table.setGlobalFilter.bind(table),
-        getFlatHeaders: () => {
-            subscribeToTable();
-            return table.getFlatHeaders();
-        },
-        getTotalSize: () => {
-            subscribeToTable();
-            return table.getTotalSize();
-        },
-        getLeftLeafColumns: () => {
-            subscribeToTable();
-            return table.getLeftLeafColumns();
-        },
-        getRowCount: () => {
-            subscribeToTable();
-            return table.getRowCount();
-        },
-        getRightLeafColumns: () => {
-            subscribeToTable();
-            return table.getRightLeafColumns();
-        },
-        getCenterLeafColumns: () => {
-            subscribeToTable();
-            return table.getCenterLeafColumns();
-        },
-        getIsAllRowsSelected: () => {
-            subscribeToTable();
-            return table.getIsAllRowsSelected();
-        },
-        getIsSomeRowsSelected: () => {
-            subscribeToTable();
-            return table.getIsSomeRowsSelected();
-        },
-        getIsAllPageRowsSelected: () => {
-            subscribeToTable();
-            return table.getIsAllPageRowsSelected();
-        },
-        getIsSomePageRowsSelected: () => {
-            subscribeToTable();
-            return table.getIsSomePageRowsSelected();
-        },
-        getCanPreviousPage: () => {
-            subscribeToTable();
-            return table.getCanPreviousPage();
-        },
-        getCanNextPage: () => {
-            subscribeToTable();
-            return table.getCanNextPage();
+    const table = createTable({
+        ...rest,
+        get data() {
+            return shadOptions.data;
         },
-        getFilteredSelectedRowModel: () => {
-            subscribeToTable();
-            return table.getFilteredSelectedRowModel();
+        get columns() {
+            const cols = shadOptions.columns ?? [];
+            return rest.enableRowSelection && enableRowSelectionUI ? [selectColumn, ...cols] : cols;
         },
-        toggleAllRowsSelected: table.toggleAllRowsSelected.bind(table),
-        toggleAllPageRowsSelected: table.toggleAllPageRowsSelected.bind(table),
-        // Keep table reference for any other property access
-        _getDefaultColumnDef: table._getDefaultColumnDef.bind(table),
-        get options() {
-            subscribeToTable();
-            return table.options;
+        get rowCount() {
+            return shadOptions.rowCount;
         },
-        initialState: table.initialState,
-    };
-    return reactiveTable;
+        ...(controlledState ? { state, ...externalHandlers } : {}),
+        features,
+    });
+    return table;
 }
+export { features };

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

@@ -1,14 +1,16 @@
-import type { TableState } from "@tanstack/table-core";
-export declare const encodeSorting: (state: Partial<TableState>) => string;
+import type { TableState } from "@tanstack/svelte-table";
+import type { DataTableFeatures } from "./features";
+type State = Partial<TableState<DataTableFeatures>>;
+export declare const encodeSorting: (state: State) => string;
 export declare const decodeSorting: () => {
     id: string;
     desc: boolean;
 }[] | undefined;
-export declare const encodeGlobalFilter: (state: Partial<TableState>) => any;
+export declare const encodeGlobalFilter: (state: State) => any;
 export declare const decodeGlobalFilter: () => string | undefined;
-export declare const encodePageIndex: (state: Partial<TableState>) => string;
+export declare const encodePageIndex: (state: State) => string;
 export declare const decodePageIndex: () => number;
-export declare const encodeColumnFilters: (state: Partial<TableState>) => string;
+export declare const encodeColumnFilters: (state: State) => string;
 export declare const decodeColumnFilters: () => {
     id: string;
     value: any;
@@ -19,6 +21,6 @@ interface Options {
     pagination?: boolean;
     columnFilter?: boolean;
 }
-export declare const decodeTableState: () => Partial<TableState>;
-export declare const encodeTableState: (state: Partial<TableState>, options?: Options, searchParams?: URLSearchParams) => string;
+export declare const decodeTableState: () => State;
+export declare const encodeTableState: (state: State, options?: Options, searchParams?: URLSearchParams) => string;
 export {};

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

@@ -9,10 +9,13 @@ export const encodeSorting = (state) => {
     return state.sorting?.map((s) => `${s.desc ? "-" : ""}${s.id}`).join(",") ?? "";
 };
 export const decodeSorting = () => {
-    return page.url.searchParams
-        .get("sort")
-        ?.split(",")
-        .map((s) => ({ id: s[0] === "-" ? s.slice(1) : s.slice(0), desc: s[0] === "-" }));
+    const sort = page.url.searchParams.get("sort");
+    if (!sort)
+        return undefined;
+    return sort
+        .split(",")
+        .filter(Boolean)
+        .map((s) => ({ id: s[0] === "-" ? s.slice(1) : s, desc: s[0] === "-" }));
 };
 export const encodeGlobalFilter = (state) => {
     return state.globalFilter;
@@ -25,7 +28,8 @@ export const encodePageIndex = (state) => {
     return state.pagination?.pageIndex?.toString() ?? "";
 };
 export const decodePageIndex = () => {
-    return Number(page.url.searchParams.get("page") ?? "0");
+    const pageIndex = Number(page.url.searchParams.get("page") ?? "0");
+    return Number.isFinite(pageIndex) ? pageIndex : 0;
 };
 export const encodeColumnFilters = (state) => {
     return (state.columnFilters
@@ -33,21 +37,26 @@ export const encodeColumnFilters = (state) => {
         .join(",") ?? "");
 };
 export const decodeColumnFilters = () => {
-    return page.url.searchParams
-        .get("filter")
-        ?.split(",")
-        .map((v) => {
-        const [id, stringValue] = v.split(".");
-        if (!id)
-            throw new Error("Invalid columnFilters");
-        if (stringValue === undefined)
-            throw new Error("Invalid columnFilters");
-        return {
-            id,
-            value: stringValue === "undefined" ? undefined : JSON.parse(decodeURIComponent(stringValue)),
-        };
-    })
-        .filter((x) => x !== null);
+    const filter = page.url.searchParams.get("filter");
+    if (!filter)
+        return undefined;
+    return filter.split(",").flatMap((v) => {
+        if (!v)
+            return [];
+        const separatorIndex = v.indexOf(".");
+        if (separatorIndex === -1)
+            return [];
+        const id = v.slice(0, separatorIndex);
+        const stringValue = v.slice(separatorIndex + 1);
+        if (!id || !stringValue)
+            return [];
+        try {
+            return [{ id, value: stringValue === "undefined" ? undefined : JSON.parse(decodeURIComponent(stringValue)) }];
+        }
+        catch {
+            return [];
+        }
+    });
 };
 export const decodeTableState = () => {
     return {

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

@@ -0,0 +1,42 @@
+import type { RowData, Table } from "@tanstack/svelte-table";
+import type { DataTableFeatures } from "./features";
+/**
+ * Which URL params to sync with the table. Omitted keys default to `true`, so
+ * calling `useTableUrlSync(table)` syncs everything. Pass `false` to opt out
+ * of individual params, or pass only the keys you want:
+ *
+ * ```ts
+ * // sync only paging (`?page=2`)
+ * useTableUrlSync(table, { pagination: true });
+ * ```
+ */
+export interface TableUrlSyncOptions {
+    /** Syncs the global filter to `?search=` (default `true`). */
+    globalFilter?: boolean;
+    /** Syncs sorting to `?sort=` (default `true`). */
+    sorting?: boolean;
+    /** Syncs column filters to `?filter=` (default `true`). */
+    columnFilters?: boolean;
+    /** Syncs the page index to `?page=` (default `true`). */
+    pagination?: boolean;
+}
+/**
+ * Keeps a table's global filter, sorting, column filters and page index in sync
+ * with the URL search params (`search`, `sort`, `filter`, `page`).
+ *
+ * This is app-routing glue, not UI — call it explicitly from the component that
+ * owns the table, next to `createShadTable`:
+ *
+ * ```svelte
+ * const table = createShadTable({ ... });
+ * useTableUrlSync(table);
+ * ```
+ *
+ * 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.
+ *
+ * By default all four params are synced; pass {@link TableUrlSyncOptions} to
+ * enable only a subset, e.g. `useTableUrlSync(table, { pagination: true })`.
+ */
+export declare function useTableUrlSync<TData extends RowData>(table: Table<DataTableFeatures, TData>, options?: TableUrlSyncOptions): void;

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

@@ -0,0 +1,81 @@
+import { untrack } from "svelte";
+import { beforeNavigate } from "$app/navigation";
+import { useSearchParams } from "runed/kit";
+import { defaultSearchParamSchema } from "./types";
+import { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, encodeColumnFilters, encodeSorting, } from "./table-search-params";
+/**
+ * Keeps a table's global filter, sorting, column filters and page index in sync
+ * with the URL search params (`search`, `sort`, `filter`, `page`).
+ *
+ * This is app-routing glue, not UI — call it explicitly from the component that
+ * owns the table, next to `createShadTable`:
+ *
+ * ```svelte
+ * const table = createShadTable({ ... });
+ * useTableUrlSync(table);
+ * ```
+ *
+ * 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.
+ *
+ * By default all four params are synced; pass {@link TableUrlSyncOptions} to
+ * enable only a subset, e.g. `useTableUrlSync(table, { pagination: true })`.
+ */
+export function useTableUrlSync(table, options) {
+    const enabled = {
+        globalFilter: true,
+        sorting: true,
+        columnFilters: true,
+        pagination: true,
+        ...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.
+    beforeNavigate((navigation) => {
+        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"));
+        if (queryChanged && (!Number.isFinite(targetPage) || targetPage <= 0)) {
+            table.resetPageIndex();
+        }
+    });
+    // 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.
+    $effect(() => {
+        const search = enabled.globalFilter ? table.atoms.globalFilter.get() : undefined;
+        const page = enabled.pagination ? table.atoms.pagination.get().pageIndex : undefined;
+        const sorting = enabled.sorting ? table.atoms.sorting.get() : undefined;
+        const columnFilters = enabled.columnFilters ? table.atoms.columnFilters.get() : undefined;
+        untrack(() => {
+            if (enabled.globalFilter)
+                params.search = search;
+            if (enabled.pagination && page !== undefined)
+                params.page = page;
+            if (enabled.sorting)
+                params.sort = encodeSorting({ sorting });
+            if (enabled.columnFilters)
+                params.filter = encodeColumnFilters({ columnFilters });
+        });
+    });
+}

package/dist/components/custom/data-table/types.d.ts

@@ -1,12 +1,16 @@
-import type { TableOptions } from "@tanstack/table-core";
+import type { RowData, TableOptions } from "@tanstack/svelte-table";
+import type { DataTableFeatures } from "./features";
 import z from "zod";
-export type BaseOptions<TData> = Omit<TableOptions<TData>, "getCoreRowModel">;
-export interface CustomOptions {
-    useURLSearchParams?: boolean;
-}
+/** Table options bound to the library's feature set. `features` is set internally. */
+export type BaseOptions<TData extends RowData> = Omit<TableOptions<DataTableFeatures, TData>, "features">;
+/** Per-column metadata exposed via `columnDef.meta` (typed through the feature set). */
 export interface CustomColumnMeta {
     className?: string;
 }
+/** Table-level metadata exposed via `table.options.meta` (typed through the feature set). */
+export interface CustomOptions {
+    [key: string]: unknown;
+}
 export declare const defaultSearchParamSchema: z.ZodObject<{
     search: z.ZodDefault<z.ZodAny>;
     page: z.ZodDefault<z.ZodCoercedNumber<unknown>>;

package/dist/components/custom/light-switch.svelte/LightSwitch.svelte

@@ -10,7 +10,7 @@
 	let { variant = "outline" }: Props = $props();
 </script>
 
-<Button onclick={toggleMode} {variant} size="icon">
+<Button onclick={toggleMode} {variant} size="icon" class="relative">
 	<SunIcon class="scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90" />
 	<MoonIcon class="absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0" />
 	<span class="sr-only">Toggle theme</span>

package/dist/components/custom/loader/Loader.svelte

@@ -9,8 +9,6 @@
 		isLoading?: boolean;
 	}
 
-	export { className as class };
-
 	interface Props {
 		class?: string | undefined | null;
 		isLoading?: boolean;

package/dist/components/custom/loader/Loader.svelte.d.ts

@@ -8,8 +8,6 @@ interface Props {
     isLoading?: boolean;
     iconProps?: LoaderIconProps;
 }
-declare const Loader: import("svelte").Component<Props, {
-    class: string | null | undefined;
-}, "">;
+declare const Loader: import("svelte").Component<Props, {}, "">;
 type Loader = ReturnType<typeof Loader>;
 export default Loader;