@svadmin/core 0.0.6 → 0.4.1

package/src/query-hooks.svelte.ts

@@ -0,0 +1,213 @@
+import { createQuery, createInfiniteQuery } from '@tanstack/svelte-query';
+import { getAdminOptions } from './options';
+import { getDataProviderForResource, getDataProvider, getLiveProvider } from './context.svelte';
+import { useParsed } from './useParsed';
+import {
+  createOvertimeTracker,
+  createLiveSubscription,
+  fireSuccessNotification,
+  fireErrorNotification,
+} from './hook-utils.svelte';
+import type { NotificationConfig, OvertimeOptions, LiveSubscriptionParams } from './hook-utils.svelte';
+import type {
+  GetListParams, GetListResult, Pagination, Sort, Filter, BaseRecord, HttpError,
+  GetOneParams, GetOneResult, GetManyParams, GetManyResult, CustomParams, CustomResult,
+  KnownResources,
+} from './types';
+import type { LiveMode, LiveEvent } from './live';
+
+// ─── useList ───────────────────────────────────────────────────
+
+export interface UseListOptions<TData extends BaseRecord = BaseRecord, TError = HttpError> {
+  resource?: KnownResources;
+  pagination?: Pagination;
+  sorters?: Sort[];
+  filters?: Filter[];
+  meta?: Record<string, unknown>;
+  dataProviderName?: string;
+  queryOptions?: { staleTime?: number; enabled?: boolean; cacheTime?: number; refetchOnWindowFocus?: boolean };
+  successNotification?: NotificationConfig;
+  errorNotification?: NotificationConfig;
+  liveMode?: LiveMode;
+  onLiveEvent?: (event: LiveEvent) => void;
+  liveParams?: Record<string, unknown>;
+  overtimeOptions?: OvertimeOptions;
+}
+
+export function useList<TData extends BaseRecord = BaseRecord, TError = HttpError>(options: UseListOptions<TData, TError> = {}) {
+  const parsed = useParsed();
+  const resource = options.resource ?? parsed.resource ?? '';
+  const adminOptions = getAdminOptions();
+  const provider = getDataProviderForResource(resource, options.dataProviderName);
+
+  const queryOptions = options.queryOptions;
+
+  const query = createQuery<GetListResult<TData>, TError>(() => ({
+    queryKey: [resource, 'list', options.pagination, options.sorters, options.filters, options.meta],
+    queryFn: async () => {
+      const result = await provider.getList<TData>({
+        resource,
+        pagination: options.pagination,
+        sorters: options.sorters,
+        filters: options.filters,
+        meta: options.meta,
+      });
+      return result;
+    },
+    enabled: queryOptions?.enabled ?? true,
+    staleTime: queryOptions?.staleTime ?? adminOptions.reactQuery?.staleTime,
+    gcTime: queryOptions?.cacheTime ?? adminOptions.reactQuery?.cacheTime,
+    refetchOnWindowFocus: queryOptions?.refetchOnWindowFocus ?? adminOptions.reactQuery?.refetchOnWindowFocus,
+  }));
+
+  const overtime = createOvertimeTracker(() => query.isLoading, options.overtimeOptions ?? adminOptions.overtime);
+
+  createLiveSubscription({
+    resource,
+    liveProvider: getLiveProvider(),
+    liveMode: options.liveMode ?? adminOptions.liveMode,
+    onLiveEvent: (e) => {
+      options.onLiveEvent?.(e);
+      adminOptions.onLiveEvent?.(e);
+    },
+    liveParams: options.liveParams,
+    enabled: queryOptions?.enabled ?? true,
+  });
+
+  $effect(() => {
+    if (query.isSuccess) {
+      fireSuccessNotification(options.successNotification, '', query.data, undefined, resource);
+    } else if (query.isError) {
+      fireErrorNotification(options.errorNotification, 'Fetch failed', query.error);
+    }
+  });
+
+  return {
+    query,
+    get overtime() { return overtime; }
+  };
+}
+
+// ─── useOne ────────────────────────────────────────────────────
+
+export interface UseOneOptions<TData extends BaseRecord = BaseRecord, TError = HttpError> {
+  resource?: KnownResources;
+  id?: string | number;
+  meta?: Record<string, unknown>;
+  dataProviderName?: string;
+  queryOptions?: { staleTime?: number; enabled?: boolean; cacheTime?: number; refetchOnWindowFocus?: boolean };
+  successNotification?: NotificationConfig;
+  errorNotification?: NotificationConfig;
+  liveMode?: LiveMode;
+  onLiveEvent?: (event: LiveEvent) => void;
+  liveParams?: Record<string, unknown>;
+  overtimeOptions?: OvertimeOptions;
+}
+
+export function useOne<TData extends BaseRecord = BaseRecord, TError = HttpError>(options: UseOneOptions<TData, TError> = {}) {
+  const parsed = useParsed();
+  const resource = options.resource ?? parsed.resource ?? '';
+  const id = options.id ?? parsed.id;
+  const adminOptions = getAdminOptions();
+  const provider = getDataProviderForResource(resource, options.dataProviderName);
+
+  const queryOptions = options.queryOptions;
+
+  const query = createQuery<GetOneResult<TData>, TError>(() => ({
+    queryKey: [resource, 'one', id, options.meta],
+    queryFn: async () => {
+      if (id == null) throw new Error('useOne requires an id');
+      const result = await provider.getOne<TData>({
+        resource,
+        id,
+        meta: options.meta,
+      });
+      return result;
+    },
+    enabled: (queryOptions?.enabled ?? true) && id != null,
+    staleTime: queryOptions?.staleTime ?? adminOptions.reactQuery?.staleTime,
+    gcTime: queryOptions?.cacheTime ?? adminOptions.reactQuery?.cacheTime,
+  }));
+
+  const overtime = createOvertimeTracker(() => query.isLoading, options.overtimeOptions ?? adminOptions.overtime);
+
+  $effect(() => {
+    if (query.isSuccess && options.successNotification) {
+      fireSuccessNotification(options.successNotification, '', query.data, undefined, resource);
+    } else if (query.isError) {
+      fireErrorNotification(options.errorNotification, 'Fetch failed', query.error);
+    }
+  });
+
+  return { query, get overtime() { return overtime; } };
+}
+// ─── useShow ──────────────────────────────────────────────────
+export function useShow<TData extends BaseRecord = BaseRecord, TError = HttpError>(
+  options: UseOneOptions<TData, TError> = {}
+) {
+  const parsed = useParsed();
+  let showId = $state<string | number | undefined>(options.id ?? parsed.id);
+
+  function setShowId(id: string | number) { showId = id; }
+
+  const result = useOne<TData, TError>({
+    ...options,
+    get id() { return showId; },
+  });
+
+  return {
+    get query() { return result.query; },
+    get showId() { return showId; },
+    setShowId,
+    get overtime() { return result.overtime; },
+  };
+}
+
+// ─── useMany ───────────────────────────────────────────────────
+
+export interface UseManyOptions<TData extends BaseRecord = BaseRecord, TError = HttpError> {
+  resource: KnownResources;
+  ids: (string | number)[];
+  meta?: Record<string, unknown>;
+  dataProviderName?: string;
+  queryOptions?: { staleTime?: number; enabled?: boolean; cacheTime?: number; refetchOnWindowFocus?: boolean };
+  successNotification?: NotificationConfig;
+  errorNotification?: NotificationConfig;
+  liveMode?: LiveMode;
+  onLiveEvent?: (event: LiveEvent) => void;
+  liveParams?: Record<string, unknown>;
+  overtimeOptions?: OvertimeOptions;
+}
+
+export function useMany<TData extends BaseRecord = BaseRecord, TError = HttpError>(options: UseManyOptions<TData, TError>) {
+  const { resource, ids, meta, dataProviderName, queryOptions } = options;
+  const adminOptions = getAdminOptions();
+  const provider = getDataProviderForResource(resource, dataProviderName);
+
+  const query = createQuery<GetManyResult<TData>, TError>(() => ({
+    queryKey: [resource, 'many', ids, meta],
+    queryFn: async () => {
+      if (!ids.length) return { data: [] };
+      if (provider.getMany) {
+        return provider.getMany<TData>({ resource, ids, meta });
+      }
+      const results = await Promise.all(ids.map(id => provider.getOne<TData>({ resource, id, meta })));
+      return { data: results.map(r => r.data) };
+    },
+    enabled: (queryOptions?.enabled ?? true) && ids.length > 0,
+    staleTime: queryOptions?.staleTime ?? adminOptions.reactQuery?.staleTime,
+  }));
+
+  const overtime = createOvertimeTracker(() => query.isLoading, options.overtimeOptions ?? adminOptions.overtime);
+
+  $effect(() => {
+    if (query.isSuccess && options.successNotification) fireSuccessNotification(options.successNotification, '', query.data, undefined, resource);
+    else if (query.isError) fireErrorNotification(options.errorNotification, 'Fetch failed', query.error);
+  });
+
+  return { query, get overtime() { return overtime; } };
+}
+
+export function useApiUrl(dataProviderName?: string): string {
+  return getDataProvider(dataProviderName).getApiUrl();
+}

package/src/query-keys.ts

@@ -0,0 +1,22 @@
+export const keys = () => {
+  let _data = 'default';
+  let _resource = '';
+  let _action = '';
+  let _params: unknown = undefined;
+
+  const builder = {
+    data: (name: string) => { _data = name; return builder; },
+    resource: (name: string) => { _resource = name; return builder; },
+    action: (name: string) => { _action = name; return builder; },
+    params: (params: unknown) => { _params = params; return builder; },
+    get: (): unknown[] => {
+      const parts: unknown[] = ['data', _data];
+      if (_resource) parts.push(_resource);
+      if (_action) parts.push(_action);
+      if (_params !== undefined) parts.push(_params);
+      return parts;
+    }
+  };
+
+  return builder;
+};

package/src/resource-types.test.ts

@@ -0,0 +1,79 @@
+// Resource Type Registry — type-level tests
+import { describe, test, expect } from 'bun:test';
+import type { ResourceTypeMap, KnownResources, InferData } from './types';
+
+describe('Resource Type Registry', () => {
+  test('ResourceTypeMap is an empty interface by default', () => {
+    // When no declaration merging is used, keyof ResourceTypeMap = never
+    type Keys = keyof ResourceTypeMap;
+    // This compiles — verifying the interface exists and is empty
+    const _check: Keys extends never ? true : false = true;
+    expect(_check).toBe(true);
+  });
+
+  test('KnownResources falls back to string when ResourceTypeMap is empty', () => {
+    // When ResourceTypeMap is empty, KnownResources should be string
+    const resource: KnownResources = 'anything';
+    expect(typeof resource).toBe('string');
+  });
+
+  test('InferData falls back to Record<string, unknown> for unknown resources', () => {
+    // For any resource not in ResourceTypeMap, InferData should return Record<string, unknown>
+    type Result = InferData<'nonexistent'>;
+    const data: Result = { arbitrary: 'value', number: 42 };
+    expect(data.arbitrary).toBe('value');
+  });
+
+  test('type utilities are structurally sound', () => {
+    // Simulate what happens with declaration merging by testing the conditional types
+    // When R extends keyof ResourceTypeMap (which is never when empty),
+    // InferData should return Record<string, unknown>
+    type TestInfer = InferData<'users'>;
+    const obj: TestInfer = { id: '1', name: 'test' };
+    expect(obj).toBeDefined();
+  });
+
+  test('KnownResources accepts any string when ResourceTypeMap is empty', () => {
+    // This verifies backward compatibility — all strings are valid resource names
+    const resources: KnownResources[] = ['users', 'posts', 'categories', 'anything'];
+    expect(resources).toHaveLength(4);
+  });
+});
+
+// ─── Declaration Merging Example (compile-time only) ──────────
+// The following block verifies that declaration merging works correctly.
+// It's wrapped in a function so it doesn't affect runtime.
+
+function _typeTests() {
+  // Simulate declaration merging
+  interface TestResourceMap {
+    users: { id: string; name: string; email: string };
+    posts: { id: string; title: string; content: string };
+  }
+
+  // Test conditional type behavior with a populated map
+  type TestKnown<M> = keyof M extends never ? string : Extract<keyof M, string>;
+  type TestInfer<R extends string, M> = R extends keyof M ? M[R] : Record<string, unknown>;
+
+  // When map is populated, resources are constrained
+  type Resources = TestKnown<TestResourceMap>;
+  const _r1: Resources = 'users';
+  const _r2: Resources = 'posts';
+  // @ts-expect-error — 'invalid' is not in TestResourceMap
+  const _r3: Resources = 'invalid';
+
+  // InferData resolves correctly
+  type UserData = TestInfer<'users', TestResourceMap>;
+  const _user: UserData = { id: '1', name: 'Alice', email: 'a@b.com' };
+
+  type PostData = TestInfer<'posts', TestResourceMap>;
+  const _post: PostData = { id: '1', title: 'Hello', content: 'World' };
+
+  // Unknown resource falls back
+  type UnknownData = TestInfer<'unknown', TestResourceMap>;
+  const _unknown: UnknownData = { any: 'thing' };
+
+  void _r1; void _r2; void _r3; void _user; void _post; void _unknown;
+}
+
+void _typeTests;

package/src/router.ts

@@ -1,10 +1,19 @@
-// Minimal hash router for Svelte 5 runes mode
+// Router — path matching + navigation (supports hash & history via RouterProvider)
+
+import type { RouterProvider } from './router-provider';
 
 interface RouteMatch {
   route: string;
   params: Record<string, string>;
 }
 
+// Store a reference to the active RouterProvider (set by router-state.svelte.ts)
+let _routerProvider: RouterProvider | undefined;
+
+export function setActiveRouterProvider(provider: RouterProvider | undefined) {
+  _routerProvider = provider;
+}
+
 // Parse route pattern like /products/edit/:id into regex
 function compileRoute(pattern: string): { regex: RegExp; keys: string[] } {
   const keys: string[] = [];
@@ -17,11 +26,15 @@ function compileRoute(pattern: string): { regex: RegExp; keys: string[] } {
   return { regex: new RegExp(`^${regexStr}$`), keys };
 }
 
+/**
+ * Match a pathname against a list of route patterns.
+ * Accepts both hash paths (#/foo) and plain paths (/foo).
+ */
 export function matchRoute(
-  hash: string,
+  pathname: string,
   routes: string[]
 ): RouteMatch | null {
-  const path = hash.replace(/^#/, '') || '/';
+  const path = pathname.replace(/^#/, '').split('?')[0] || '/';
 
   for (const pattern of routes) {
     const { regex, keys } = compileRoute(pattern);
@@ -37,10 +50,21 @@ export function matchRoute(
   return null;
 }
 
+/**
+ * Navigate to a path. Uses RouterProvider if available, falls back to hash.
+ */
 export function navigate(path: string): void {
-  window.location.hash = path;
+  if (_routerProvider) {
+    _routerProvider.go({ to: path });
+  } else {
+    window.location.hash = path.startsWith('#') ? path : path;
+  }
 }
 
 export function currentPath(): string {
+  if (_routerProvider) {
+    const parsed = _routerProvider.parse();
+    return parsed.pathname || '/';
+  }
   return window.location.hash.replace(/^#/, '') || '/';
 }

package/src/routing-hooks.svelte.ts

@@ -0,0 +1,99 @@
+import { currentPath, navigate } from './router';
+import { getResource, getResources, getRouterProvider } from './context.svelte';
+import { useParsed } from './useParsed';
+
+// ─── routing-hooks.svelte.ts ───────────────────────────────────
+
+export function useGetToPath() {
+  const routerProvider = getRouterProvider();
+
+  return (options: { resource?: string; action?: 'list' | 'create' | 'edit' | 'show'; id?: string | number; meta?: Record<string, unknown> }) => {
+    const { resource, action, id } = options;
+    if (!resource) return '/';
+    let path = `/${resource}`;
+    if (action === 'create') path += '/create';
+    else if (action === 'edit' && id) path += `/edit/${id}`;
+    else if (action === 'show' && id) path += `/show/${id}`;
+
+    // Apply router mapping if the router provider defines custom path transformers
+    if (routerProvider?.go) {
+      // SvelteKit path generation can be injected here.
+    }
+    return path;
+  };
+}
+
+export function useGo() {
+  const getToPath = useGetToPath();
+  const routerProvider = getRouterProvider();
+
+  return (options: { to?: string; query?: Record<string, unknown>; type?: 'push' | 'replace'; resource?: string; action?: 'list' | 'create' | 'edit' | 'show' | 'clone'; id?: string | number }) => {
+    let targetUrl = options.to;
+    if (!targetUrl && options.resource) {
+      targetUrl = getToPath({ resource: options.resource, action: options.action === 'clone' ? 'edit' : options.action, id: options.id });
+    }
+    if (!targetUrl) targetUrl = '/';
+
+    if (options.query && Object.keys(options.query).length > 0) {
+      const qs = new URLSearchParams(options.query as Record<string, string>).toString();
+      targetUrl += `?${qs}`;
+    }
+
+    if (routerProvider?.go) {
+      routerProvider.go({ to: targetUrl, type: options.type });
+    } else {
+      // @ts-expect-error SvelteKit / internal navigate might only take 1 arg or options obj
+      navigate(targetUrl, options.type === 'replace' ? { replaceState: true } : undefined);
+    }
+  };
+}
+
+export function useBack() {
+  const routerProvider = getRouterProvider();
+  return () => {
+    if (routerProvider?.back) {
+      routerProvider.back();
+    } else if (typeof window !== 'undefined') {
+      window.history.back();
+    }
+  };
+}
+
+/**
+ * useLink replaces standard <a> tags with Svelte routing-aware links 
+ * (to avoid full page reloads in SSR apps)
+ */
+export function useLink() {
+  const routerProvider = getRouterProvider() as Record<string, unknown> | undefined;
+  return (routerProvider?.Link as string) ?? 'a';
+}
+
+export function useResource(resourceName?: string) {
+  const parsed = useParsed();
+  const targetResource = resourceName ?? parsed.resource;
+  if (!targetResource) {
+    return { resource: undefined, resources: getResources() };
+  }
+  try {
+    const resource = getResource(targetResource);
+    return { resource, resources: getResources() };
+  } catch {
+    return { resource: undefined, resources: getResources() };
+  }
+}
+
+export function useNavigation() {
+  const go = useGo();
+  const parsed = useParsed();
+
+  return {
+    create: (resource?: string) => go({ type: 'push', resource: resource ?? parsed.resource, action: 'create' }),
+    edit: (resource?: string, id?: string | number) => go({ type: 'push', resource: resource ?? parsed.resource, action: 'edit', id: id ?? parsed.id }),
+    clone: (resource?: string, id?: string | number) => go({ type: 'push', resource: resource ?? parsed.resource, action: 'clone', id: id ?? parsed.id }),
+    show: (resource?: string, id?: string | number) => go({ type: 'push', resource: resource ?? parsed.resource, action: 'show', id: id ?? parsed.id }),
+    list: (resource?: string) => go({ type: 'push', resource: resource ?? parsed.resource, action: 'list' }),
+    push: (url: string) => go({ to: url, type: 'push' }),
+    replace: (url: string) => go({ to: url, type: 'replace' }),
+    goBack: useBack(),
+  };
+}

package/src/table-hooks.svelte.ts

@@ -0,0 +1,178 @@
+import { useParsed } from './useParsed';
+import { useList } from './query-hooks.svelte';
+import { readURLState, writeURLState } from './url-sync';
+import type { Pagination, Sort, Filter, BaseRecord, HttpError, KnownResources, GetListResult } from './types';
+import type { UseListOptions } from './query-hooks.svelte';
+
+export type FilterSetMode = 'merge' | 'replace';
+
+export interface UseTableOptions<TQueryFnData extends BaseRecord = BaseRecord, TError = HttpError, TSearchVariables = Record<string, unknown>> extends Omit<UseListOptions<TQueryFnData, TError>, 'pagination' | 'sorters' | 'filters'> {
+  resource?: KnownResources;
+  pagination?: Pagination;
+  sorters?: {
+    initial?: Sort[];
+    permanent?: Sort[];
+    mode?: 'off' | 'server';
+  };
+  filters?: {
+    initial?: Filter[];
+    permanent?: Filter[];
+    mode?: 'off' | 'server';
+    defaultBehavior?: FilterSetMode;
+  };
+  syncWithLocation?: boolean;
+}
+
+export function useTable<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError = HttpError,
+  TSearchVariables = Record<string, unknown>
+>(options: UseTableOptions<TQueryFnData, TError, TSearchVariables> = {}) {
+  const parsed = useParsed();
+  const resource = options.resource ?? parsed.resource ?? '';
+  const { meta, syncWithLocation = false, dataProviderName, pagination: _p, sorters: _s, filters: _f, ...restOptions } = options;
+  
+  const paginationMode = options.pagination?.mode ?? 'server';
+  const sortersMode = options.sorters?.mode ?? 'server';
+  const filtersMode = options.filters?.mode ?? 'server';
+  const filterDefaultBehavior = options.filters?.defaultBehavior ?? 'replace';
+
+  const permanentSorters = options.sorters?.permanent ?? [];
+  const permanentFilters = options.filters?.permanent ?? [];
+
+  let initPagination = options.pagination ?? { current: 1, pageSize: 10 };
+  let initSorters = options.sorters?.initial ?? [];
+  let initFilters = options.filters?.initial ?? [];
+
+  if (syncWithLocation && typeof window !== 'undefined') {
+    const urlState = readURLState();
+    if (urlState.page || urlState.pageSize) {
+      initPagination = {
+        current: urlState.page ?? initPagination.current,
+        pageSize: urlState.pageSize ?? initPagination.pageSize,
+      };
+    }
+    if (urlState.sortField) {
+      initSorters = [{ field: urlState.sortField, order: (urlState.sortOrder as 'asc' | 'desc') ?? 'asc' }];
+    }
+    if (urlState.filters) {
+      initFilters = urlState.filters;
+    }
+  }
+
+  let pagination = $state<Pagination>(initPagination);
+  let currentSorters = $state<Sort[]>(initSorters);
+  let currentFilters = $state<Filter[]>(initFilters);
+
+  const effectiveSorters = $derived([...currentSorters, ...permanentSorters]);
+  const effectiveFilters = $derived([...currentFilters, ...permanentFilters]);
+
+  const querySorters = $derived(sortersMode === 'server' ? effectiveSorters : []);
+  const queryFilters = $derived(filtersMode === 'server' ? effectiveFilters : []);
+  const queryPagination = paginationMode === 'server'
+    ? pagination
+    : { current: 1, pageSize: 999999, mode: paginationMode as 'client' | 'off' };
+
+  const tableQueryInfo = useList<TQueryFnData, TError>({
+    resource,
+    pagination: queryPagination,
+    sorters: querySorters,
+    filters: queryFilters,
+    meta,
+    dataProviderName,
+    ...restOptions
+  });
+
+  const query = tableQueryInfo.query;
+  const overtime = tableQueryInfo.overtime;
+
+  function setSorters(newSorters: Sort[]) { currentSorters = newSorters; }
+  function setFilters(newFilters: Filter[], mode?: FilterSetMode) {
+    const behavior = mode ?? filterDefaultBehavior;
+    if (behavior === 'merge') {
+      const merged = [...currentFilters];
+      for (const nf of newFilters) {
+        const idx = merged.findIndex(f => f.field === nf.field && f.operator === nf.operator);
+        if (idx >= 0) {
+          if (nf.value === undefined || nf.value === null || nf.value === '') merged.splice(idx, 1);
+          else merged[idx] = nf;
+        } else if (nf.value !== undefined && nf.value !== null && nf.value !== '') {
+          merged.push(nf);
+        }
+      }
+      currentFilters = merged;
+    } else {
+      currentFilters = newFilters;
+    }
+    pagination = { ...pagination, current: 1 };
+  }
+
+  function setPage(page: number) { pagination = { ...pagination, current: page }; }
+  function setPageSize(size: number) { pagination = { ...pagination, pageSize: size, current: 1 }; }
+
+  if (syncWithLocation && typeof window !== 'undefined') {
+    $effect(() => {
+      writeURLState({
+        page: pagination.current,
+        pageSize: pagination.pageSize,
+        sortField: effectiveSorters[0]?.field,
+        sortOrder: effectiveSorters[0]?.order,
+        filters: effectiveFilters,
+      });
+    });
+  }
+
+  function createLinkForSyncWithLocation(): string {
+    const params = new URLSearchParams();
+    if (pagination.current) params.set('page', String(pagination.current));
+    if (pagination.pageSize) params.set('pageSize', String(pagination.pageSize));
+    if (effectiveSorters[0]) {
+      params.set('sortField', effectiveSorters[0].field);
+      params.set('sortOrder', effectiveSorters[0].order);
+    }
+    if (effectiveFilters.length > 0) {
+      params.set('filters', JSON.stringify(effectiveFilters));
+    }
+    return `?${params.toString()}`;
+  }
+
+  return {
+    query,
+    tableQuery: query,
+    get overtime() { return overtime; },
+    get pagination() { return pagination; },
+    get sorters() { return currentSorters; },
+    get filters() { return currentFilters; },
+    setSorters, setFilters, setPage, setPageSize,
+    setCurrentPage: setPage,
+    createLinkForSyncWithLocation,
+    get totalPages() {
+      // ts-expect-error reactive access
+      const total = (query.data as GetListResult<TQueryFnData> | undefined)?.total ?? 0;
+      return Math.ceil(total / (pagination.pageSize ?? 10));
+    },
+    get current() { return pagination.current ?? 1; },
+    get pageSize() { return pagination.pageSize ?? 10; },
+    get pageCount() { return Math.ceil(((query.data as GetListResult<TQueryFnData> | undefined)?.total ?? 0) / (pagination.pageSize ?? 10)); },
+    get clientData(): TQueryFnData[] {
+      if (paginationMode !== 'client') return [];
+      const allData = ((query.data as GetListResult<TQueryFnData> | undefined)?.data ?? []) as TQueryFnData[];
+      const start = ((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10);
+      const end = start + (pagination.pageSize ?? 10);
+      let sorted = [...allData];
+      const activeSorters = sortersMode === 'off' ? effectiveSorters : currentSorters;
+      if (activeSorters.length > 0) {
+        const { field, order } = activeSorters[0];
+        sorted.sort((a, b) => {
+          const va = (a as Record<string, unknown>)[field];
+          const vb = (b as Record<string, unknown>)[field];
+          if (va == null) return 1;
+          if (vb == null) return -1;
+          const cmp = va < vb ? -1 : va > vb ? 1 : 0;
+          return order === 'desc' ? -cmp : cmp;
+        });
+      }
+      return sorted.slice(start, end);
+    },
+  };
+}