@svadmin/core 0.22.1 → 0.23.0

package/src/query-hooks.svelte.ts

@@ -3,6 +3,7 @@ import { getAdminOptions } from './options.svelte';
 import { getDataProviderForResource, getDataProvider, getLiveProvider } from './context.svelte';
 import { useParsed } from './useParsed.svelte';
 import {
+  checkError,
   createOvertimeTracker,
   createLiveSubscription,
   fireSuccessNotification,
@@ -22,19 +23,18 @@ import type { LiveMode, LiveEvent } from './live.svelte';
  */
 function extendQuery<Q extends object, E extends Record<string, unknown>>(
   query: Q,
-  extensions: () => E,
+  extensions: E,
 ): Q & E {
   return new Proxy(query, {
     get(target, prop) {
-      if (typeof prop === 'string') {
-        const ext = extensions();
-        if (prop in ext) return ext[prop as keyof E];
+      if (typeof prop === 'string' && prop in extensions) {
+        return extensions[prop as keyof E];
       }
-      return target[prop as keyof Q];
+      return Reflect.get(target, prop);
     },
     has(target, prop) {
-      if (typeof prop === 'string' && prop in extensions()) return true;
-      return prop in target;
+      if (typeof prop === 'string' && prop in extensions) return true;
+      return Reflect.has(target, prop);
     },
   }) as Q & E;
 }
@@ -73,7 +73,7 @@ export function useList<TData extends BaseRecord = BaseRecord, TError = HttpErro
     const queryOptions = opts.queryOptions;
     
     return {
-      queryKey: [resource, 'list', opts.pagination, opts.sorters, opts.filters, opts.meta],
+      queryKey: [opts.dataProviderName, resource, 'list', opts.pagination, opts.sorters, opts.filters, opts.meta],
       queryFn: async () => provider.getList<TData>({
         resource,
         pagination: opts.pagination,
@@ -105,16 +105,22 @@ export function useList<TData extends BaseRecord = BaseRecord, TError = HttpErro
     };
   });
 
+  // Track last notification timestamps to prevent duplicate firings on re-render
+  let lastSuccessAt = 0;
+  let lastErrorAt = 0;
   $effect(() => {
     const opts = getOptions();
-    if (query.isSuccess && opts.successNotification) {
+    if (query.isSuccess && query.dataUpdatedAt > lastSuccessAt && opts.successNotification) {
+      lastSuccessAt = query.dataUpdatedAt;
       fireSuccessNotification(opts.successNotification, '', query.data, undefined, getResource());
-    } else if (query.isError) {
+    } else if (query.isError && query.errorUpdatedAt > lastErrorAt) {
+      lastErrorAt = query.errorUpdatedAt;
+      checkError(query.error);
       fireErrorNotification(opts.errorNotification, 'Fetch failed', query.error);
     }
   });
 
-  return extendQuery(query, () => ({ overtime }));
+  return extendQuery(query, { overtime });
 }
 
 // ─── useOne ────────────────────────────────────────────────────
@@ -149,7 +155,7 @@ export function useOne<TData extends BaseRecord = BaseRecord, TError = HttpError
     const queryOptions = opts.queryOptions;
 
     return {
-      queryKey: [resource, 'one', id, opts.meta],
+      queryKey: [opts.dataProviderName, resource, 'one', id, opts.meta],
       queryFn: async () => {
         if (id == null) throw new Error('useOne requires an id');
         const result = await provider.getOne<TData>({
@@ -168,16 +174,37 @@ export function useOne<TData extends BaseRecord = BaseRecord, TError = HttpError
 
   const overtime = createOvertimeTracker(() => query.isLoading, typeof optionsOrGetter === 'function' ? optionsOrGetter().overtimeOptions : optionsOrGetter.overtimeOptions ?? adminOptions.overtime);
 
+  createLiveSubscription((): LiveSubscriptionParams => {
+    const opts = getOptions();
+    const resource = getResource();
+    return {
+      resource,
+      liveProvider: getLiveProvider(),
+      liveMode: opts.liveMode ?? adminOptions.liveMode,
+      onLiveEvent: (e: LiveEvent) => {
+        opts.onLiveEvent?.(e);
+        adminOptions.onLiveEvent?.(e);
+      },
+      liveParams: opts.liveParams,
+      enabled: (opts.queryOptions?.enabled ?? true) && getId() != null,
+    };
+  });
+
+  let lastSuccessAt = 0;
+  let lastErrorAt = 0;
   $effect(() => {
     const opts = getOptions();
-    if (query.isSuccess && opts.successNotification) {
+    if (query.isSuccess && query.dataUpdatedAt > lastSuccessAt && opts.successNotification) {
+      lastSuccessAt = query.dataUpdatedAt;
       fireSuccessNotification(opts.successNotification, '', query.data, undefined, getResource());
-    } else if (query.isError) {
+    } else if (query.isError && query.errorUpdatedAt > lastErrorAt) {
+      lastErrorAt = query.errorUpdatedAt;
+      checkError(query.error);
       fireErrorNotification(opts.errorNotification, 'Fetch failed', query.error);
     }
   });
 
-  return extendQuery(query, () => ({ overtime }));
+  return extendQuery(query, { overtime });
 }
 
 // ─── useShow ──────────────────────────────────────────────────
@@ -200,7 +227,7 @@ export function useShow<TData extends BaseRecord = BaseRecord, TError = HttpErro
     id: showId,
   }));
 
-  return extendQuery(result, () => ({ showId, setShowId }));
+  return extendQuery(result, { get showId() { return showId; }, setShowId });
 }
 
 // ─── useMany ───────────────────────────────────────────────────
@@ -229,7 +256,7 @@ export function useMany<TData extends BaseRecord = BaseRecord, TError = HttpErro
     const provider = getDataProviderForResource(resource, dataProviderName);
 
     return {
-      queryKey: [resource, 'many', ids, meta],
+      queryKey: [dataProviderName, resource, 'many', ids, meta],
       queryFn: async () => {
         if (!ids.length) return { data: [] };
         if (provider.getMany) {
@@ -247,13 +274,36 @@ export function useMany<TData extends BaseRecord = BaseRecord, TError = HttpErro
 
   const overtime = createOvertimeTracker(() => query.isLoading, typeof optionsOrGetter === 'function' ? optionsOrGetter().overtimeOptions : optionsOrGetter.overtimeOptions ?? adminOptions.overtime);
 
+  createLiveSubscription((): LiveSubscriptionParams => {
+    const opts = getOptions();
+    return {
+      resource: opts.resource,
+      liveProvider: getLiveProvider(),
+      liveMode: opts.liveMode ?? adminOptions.liveMode,
+      onLiveEvent: (e: LiveEvent) => {
+        opts.onLiveEvent?.(e);
+        adminOptions.onLiveEvent?.(e);
+      },
+      liveParams: opts.liveParams,
+      enabled: (opts.queryOptions?.enabled ?? true) && opts.ids.length > 0,
+    };
+  });
+
+  let lastSuccessAt = 0;
+  let lastErrorAt = 0;
   $effect(() => {
     const opts = getOptions();
-    if (query.isSuccess && opts.successNotification) fireSuccessNotification(opts.successNotification, '', query.data, undefined, opts.resource);
-    else if (query.isError) fireErrorNotification(opts.errorNotification, 'Fetch failed', query.error);
+    if (query.isSuccess && query.dataUpdatedAt > lastSuccessAt && opts.successNotification) {
+      lastSuccessAt = query.dataUpdatedAt;
+      fireSuccessNotification(opts.successNotification, '', query.data, undefined, opts.resource);
+    } else if (query.isError && query.errorUpdatedAt > lastErrorAt) {
+      lastErrorAt = query.errorUpdatedAt;
+      checkError(query.error);
+      fireErrorNotification(opts.errorNotification, 'Fetch failed', query.error);
+    }
   });
 
-  return extendQuery(query, () => ({ overtime }));
+  return extendQuery(query, { overtime });
 }
 
 export function useApiUrl(dataProviderName?: string): string {

package/src/router-provider.ts

@@ -100,7 +100,9 @@ export function createHistoryRouterProvider(basePath = ''): RouterProvider {
       if (typeof window === 'undefined') {
         return { resource: undefined, action: undefined, id: undefined, params: {}, pathname: '/' };
       }
-      const pathname = window.location.pathname.replace(basePath, '') || '/';
+      const pathname = (basePath && window.location.pathname.startsWith(basePath)
+        ? window.location.pathname.slice(basePath.length) || '/'
+        : window.location.pathname);
       const params: Record<string, string> = {};
       for (const [k, v] of new URLSearchParams(window.location.search).entries()) {
         params[k] = v;

package/src/router.ts

@@ -7,13 +7,26 @@ interface RouteMatch {
   params: Record<string, string>;
 }
 
-// Store a reference to the active RouterProvider (set by router-state.svelte.ts)
+export type RouteGuard = (to: string, from: string) => boolean | Promise<boolean>;
+
 let _routerProvider: RouterProvider | undefined;
+let _beforeGuards: RouteGuard[] = [];
+let _afterGuards: ((to: string, from: string) => void)[] = [];
 
 export function setActiveRouterProvider(provider: RouterProvider | undefined) {
   _routerProvider = provider;
 }
 
+export function beforeEach(guard: RouteGuard): () => void {
+  _beforeGuards.push(guard);
+  return () => { _beforeGuards = _beforeGuards.filter(g => g !== guard); };
+}
+
+export function afterEach(guard: (to: string, from: string) => void): () => void {
+  _afterGuards.push(guard);
+  return () => { _afterGuards = _afterGuards.filter(g => g !== guard); };
+}
+
 // Parse route pattern like /products/edit/:id into regex
 function compileRoute(pattern: string): { regex: RegExp; keys: string[] } {
   const keys: string[] = [];
@@ -50,12 +63,20 @@ export function matchRoute(
   return null;
 }
 
-export function navigate(path: string, options?: { replaceState?: boolean }): void {
+export async function navigate(path: string, options?: { replaceState?: boolean }): Promise<void> {
+  const from = currentPath();
+  for (const guard of _beforeGuards) {
+    const allowed = await guard(path, from);
+    if (!allowed) return;
+  }
   if (_routerProvider) {
     _routerProvider.go({ to: path, type: options?.replaceState ? 'replace' : 'push' });
   } else if (typeof window !== 'undefined') {
     window.location.hash = '#' + path.replace(/^#/, '');
   }
+  for (const guard of _afterGuards) {
+    guard(path, from);
+  }
 }
 
 /**

package/src/routing-hooks.svelte.ts

@@ -6,11 +6,24 @@ import { useParsed } from './useParsed.svelte';
 
 export function useGetToPath() {
   const routerProvider = getRouterProvider();
+  const parsed = useParsed();
 
   return (options: { resource?: string; action?: 'list' | 'create' | 'edit' | 'show' | 'clone'; id?: string | number; meta?: Record<string, unknown> }) => {
-    const { resource, action, id } = options;
+    const { resource, action, id, meta } = options;
     if (!resource) return '/';
-    let path = `/${resource}`;
+
+    // Support nested resources: use meta.parentPath or auto-detect from current URL
+    let basePath: string;
+    if (meta?.parentPath) {
+      basePath = `${meta.parentPath}/${resource}`;
+    } else if (parsed.resourcePath && parsed.resource === resource) {
+      // Re-use the current nested path context (e.g., /teams/123/users)
+      basePath = `/${parsed.resourcePath}`;
+    } else {
+      basePath = `/${resource}`;
+    }
+
+    let path = basePath;
     if (action === 'create') path += '/create';
     else if (action === 'edit' && id) path += `/edit/${id}`;
     else if (action === 'show' && id) path += `/show/${id}`;
@@ -70,16 +83,28 @@ export function useLink() {
 
 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() };
-  }
+
+  // Derived resource — re-evaluates when parsed.resource or resourceName changes
+  const resolvedResource = $derived.by(() => {
+    const target = resourceName ?? parsed.resource;
+    if (!target) return undefined;
+    try {
+      return getResource(target);
+    } catch {
+      return undefined;
+    }
+  });
+
+  return {
+    get resource() { return resolvedResource; },
+    get resources() { return getResources(); },
+    get identifier() { return resolvedResource?.identifier ?? resolvedResource?.name; },
+    /** Resolve a resource by name — useful for dynamic lookups inside callbacks */
+    select: (name: string) => {
+      const res = getResource(name);
+      return { resource: res, identifier: res.identifier ?? res.name };
+    },
+  };
 }
 
 export function useNavigation() {

package/src/table-hooks.svelte.ts

@@ -1,6 +1,7 @@
 import { useParsed } from './useParsed.svelte';
 import { useList } from './query-hooks.svelte';
 import { readURLState, writeURLState } from './url-sync';
+import { getAdminOptions } from './options.svelte';
 import type { Pagination, Sort, Filter, BaseRecord, HttpError, KnownResources, GetListResult } from './types';
 import type { UseListOptions, MaybeGetter } from './query-hooks.svelte';
 
@@ -34,6 +35,7 @@ export function useTable<
   // Use a local derived to compute these since they are used to initialize state
   // Even if options change, init values are only used once, which makes sense for initial state
   const initialOpts = getOptions();
+  const syncWithLocation = initialOpts.syncWithLocation ?? getAdminOptions().syncWithLocation;
   
   const paginationMode = $derived(getOptions().pagination?.mode ?? 'server');
   const sortersMode = $derived(getOptions().sorters?.mode ?? 'server');
@@ -47,7 +49,7 @@ export function useTable<
   let initSorters = initialOpts.sorters?.initial ?? [];
   let initFilters = initialOpts.filters?.initial ?? [];
 
-  if (initialOpts.syncWithLocation && typeof window !== 'undefined') {
+  if (syncWithLocation && typeof window !== 'undefined') {
     const urlState = readURLState();
     if (urlState.page || urlState.pageSize) {
       initPagination = {
@@ -93,13 +95,14 @@ export function useTable<
   const query = tableQueryInfo;
   const overtime = tableQueryInfo.overtime;
 
-  function setSorters(newSorters: Sort[]) { currentSorters = newSorters; }
+  function setSorters(newSorters: Sort[]) { currentSorters = newSorters; pagination = { ...pagination, current: 1 }; }
   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 (!('field' in nf)) { merged.push(nf); continue; }
+        const idx = merged.findIndex(f => 'field' in 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;
@@ -117,7 +120,7 @@ export function useTable<
   function setPage(page: number) { pagination = { ...pagination, current: page }; }
   function setPageSize(size: number) { pagination = { ...pagination, pageSize: size, current: 1 }; }
 
-  if (initialOpts.syncWithLocation && typeof window !== 'undefined') {
+  if (syncWithLocation && typeof window !== 'undefined') {
     $effect(() => {
       writeURLState({
         page: pagination.current,
@@ -127,6 +130,39 @@ export function useTable<
         filters: currentFilters,
       });
     });
+
+    $effect(() => {
+      const handler = () => {
+        const urlState = readURLState();
+        const newPage = urlState.page ?? 1;
+        if (newPage !== pagination.current) {
+          pagination = { ...pagination, current: newPage };
+        }
+        const newPageSize = urlState.pageSize ?? initialOpts.pagination?.pageSize ?? getAdminOptions().defaultPageSize ?? 10;
+        if (newPageSize !== pagination.pageSize) {
+          pagination = { ...pagination, pageSize: newPageSize };
+        }
+        if (urlState.sortField) {
+          const newSorter: Sort = { field: urlState.sortField, order: (urlState.sortOrder as 'asc' | 'desc') ?? 'asc' };
+          if (JSON.stringify([newSorter]) !== JSON.stringify(currentSorters)) {
+            currentSorters = [newSorter];
+          }
+        } else if (currentSorters.length > 0) {
+          currentSorters = [];
+        }
+        if (urlState.filters && JSON.stringify(urlState.filters) !== JSON.stringify(currentFilters)) {
+          currentFilters = urlState.filters;
+        } else if (!urlState.filters && currentFilters.length > 0) {
+          currentFilters = [];
+        }
+      };
+      window.addEventListener('popstate', handler);
+      window.addEventListener('hashchange', handler);
+      return () => {
+        window.removeEventListener('popstate', handler);
+        window.removeEventListener('hashchange', handler);
+      };
+    });
   }
 
   function createLinkForSyncWithLocation(): string {
@@ -160,23 +196,33 @@ export function useTable<
     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 [];
+      if (paginationMode === 'server') 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;
+      const activeSorters = sortersMode === 'off' ? effectiveSorters : [];
       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;
+          for (const { field, order } of activeSorters) {
+            const va = (a as Record<string, unknown>)[field];
+            const vb = (b as Record<string, unknown>)[field];
+            if (va == null && vb != null) return 1;
+            if (vb == null && va != null) return -1;
+            if (va == null && vb == null) continue;
+            
+            let cmp = 0;
+            if (typeof va === 'number' && typeof vb === 'number') cmp = va - vb;
+            else if (va instanceof Date && vb instanceof Date) cmp = va.getTime() - vb.getTime();
+            else if (typeof va === 'string' && typeof vb === 'string' && !isNaN(Number(va)) && !isNaN(Number(vb))) cmp = Number(va) - Number(vb);
+            else cmp = String(va).localeCompare(String(vb));
+            
+            if (cmp !== 0) return order === 'desc' ? -cmp : cmp;
+          }
+          return 0;
         });
       }
+      if (paginationMode === 'off') return sorted;
+      const start = ((pagination.current ?? 1) - 1) * (pagination.pageSize ?? 10);
+      const end = start + (pagination.pageSize ?? 10);
       return sorted.slice(start, end);
     },
   };

package/src/table-state.svelte.ts

@@ -200,7 +200,8 @@ export class TableState<TData extends BaseRecord = BaseRecord, TError = HttpErro
     if (behavior === 'merge') {
       const merged = [...this.currentFilters];
       for (const nf of newFilters) {
-        const idx = merged.findIndex(f => f.field === nf.field && f.operator === nf.operator);
+        if (!('field' in nf)) { merged.push(nf); continue; }
+          const idx = merged.findIndex(f => 'field' in 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;

package/src/theme.svelte.ts

@@ -134,13 +134,13 @@ export const builtinPresets: Record<string, ColorPreset> = $state({
       '--chart-1': 'oklch(0.577 0.245 27.325)',
     },
     dark: {
-      '--primary': 'oklch(0.577 0.245 27.325)',
-      '--primary-foreground': 'oklch(0.985 0 0)',
-      '--ring': 'oklch(0.577 0.245 27.325)',
-      '--sidebar-primary': 'oklch(0.577 0.245 27.325)',
+      '--primary': 'oklch(0.685 0.22 27)',
+      '--primary-foreground': 'oklch(0.15 0.04 27)',
+      '--ring': 'oklch(0.55 0.18 27)',
+      '--sidebar-primary': 'oklch(0.685 0.22 27)',
       '--sidebar-primary-foreground': 'oklch(0.985 0 0)',
-      '--sidebar-ring': 'oklch(0.577 0.245 27.325)',
-      '--chart-1': 'oklch(0.577 0.245 27.325)',
+      '--sidebar-ring': 'oklch(0.55 0.18 27)',
+      '--chart-1': 'oklch(0.685 0.22 27)',
     },
   },
   orange: {
@@ -157,13 +157,13 @@ export const builtinPresets: Record<string, ColorPreset> = $state({
       '--chart-1': 'oklch(0.646 0.222 41.116)',
     },
     dark: {
-      '--primary': 'oklch(0.646 0.222 41.116)',
-      '--primary-foreground': 'oklch(0.985 0 0)',
-      '--ring': 'oklch(0.646 0.222 41.116)',
-      '--sidebar-primary': 'oklch(0.646 0.222 41.116)',
+      '--primary': 'oklch(0.73 0.195 41)',
+      '--primary-foreground': 'oklch(0.15 0.04 41)',
+      '--ring': 'oklch(0.6 0.18 41)',
+      '--sidebar-primary': 'oklch(0.73 0.195 41)',
       '--sidebar-primary-foreground': 'oklch(0.985 0 0)',
-      '--sidebar-ring': 'oklch(0.646 0.222 41.116)',
-      '--chart-1': 'oklch(0.646 0.222 41.116)',
+      '--sidebar-ring': 'oklch(0.6 0.18 41)',
+      '--chart-1': 'oklch(0.73 0.195 41)',
     },
   },
   violet: {
@@ -180,13 +180,13 @@ export const builtinPresets: Record<string, ColorPreset> = $state({
       '--chart-1': 'oklch(0.541 0.281 293.009)',
     },
     dark: {
-      '--primary': 'oklch(0.541 0.281 293.009)',
-      '--primary-foreground': 'oklch(0.985 0 0)',
-      '--ring': 'oklch(0.541 0.281 293.009)',
-      '--sidebar-primary': 'oklch(0.541 0.281 293.009)',
+      '--primary': 'oklch(0.65 0.25 293)',
+      '--primary-foreground': 'oklch(0.15 0.04 293)',
+      '--ring': 'oklch(0.52 0.2 293)',
+      '--sidebar-primary': 'oklch(0.65 0.25 293)',
       '--sidebar-primary-foreground': 'oklch(0.985 0 0)',
-      '--sidebar-ring': 'oklch(0.541 0.281 293.009)',
-      '--chart-1': 'oklch(0.541 0.281 293.009)',
+      '--sidebar-ring': 'oklch(0.52 0.2 293)',
+      '--chart-1': 'oklch(0.65 0.25 293)',
     },
   },
 });
@@ -194,11 +194,6 @@ export const builtinPresets: Record<string, ColorPreset> = $state({
 /** Register a custom color preset. Overwrites any built-in preset with the same name. */
 export function registerColorPreset(preset: ColorPreset): void {
   builtinPresets[preset.name] = preset;
-  // Update colorThemes display list
-  const idx = colorThemes.findIndex(ct => ct.id === preset.name);
-  const entry = { id: preset.name as ColorTheme, label: preset.label, color: preset.color };
-  if (idx >= 0) colorThemes[idx] = entry;
-  else colorThemes.push(entry);
 }
 
 /** Resolve a preset by name or return the preset object directly. */
@@ -208,14 +203,21 @@ function resolvePreset(preset: ColorPreset | string): ColorPreset | undefined {
 }
 
 /** Apply a color preset's CSS variables based on current resolved theme. */
+let activePresetVars: string[] = [];
+
 function applyColorPreset(preset: ColorPreset): void {
   if (typeof document === 'undefined') return;
   const resolved = mode === 'system' ? getSystemPreference() : mode;
   const vars = resolved === 'dark' ? preset.dark : preset.light;
   const root = document.documentElement;
+  for (const key of activePresetVars) {
+    root.style.removeProperty(key);
+  }
+  activePresetVars = [];
   for (const [key, value] of Object.entries(vars)) {
     const cssVar = key.startsWith('--') ? key : `--${key}`;
     root.style.setProperty(cssVar, value);
+    activePresetVars.push(cssVar);
   }
 }
 
@@ -292,7 +294,7 @@ export function clearCssOverrides(keys?: string[]): void {
 }
 
 // ── Color themes (display metadata, derived from presets) ──
-export const colorThemes: { id: ColorTheme | string; label: string; color: string }[] = $state(Object.values(builtinPresets).map(p => ({
+export const colorThemes: { id: ColorTheme | string; label: string; color: string }[] = $derived(Object.values(builtinPresets).map(p => ({
   id: p.name as ColorTheme,
   label: p.label,
   color: p.color,

package/src/toast.svelte.ts

@@ -2,6 +2,7 @@ export type ToastType = 'success' | 'error' | 'info' | 'warning' | 'undoable';
 
 export interface ToastItem {
   id: number;
+  key?: string;
   type: ToastType;
   message: string;
   duration?: number;
@@ -10,18 +11,16 @@ export interface ToastItem {
 }
 
 let nextId = 0;
+const undoableTimers = new Map<number, ReturnType<typeof setTimeout>>();
 
-// Queue for simple toasts (consumed by UI Toast bridge)
 let queue = $state<ToastItem[]>([]);
 export function getToastQueue() { return queue; }
 export function consumeToastQueue() { queue = []; }
 
-// Promise Queue
 let promiseQueue = $state<{ id: number; promise: Promise<any>; opts: { loading: string; success: string; error: string } }[]>([]);
 export function getPromiseQueue() { return promiseQueue; }
 export function consumePromiseQueue() { promiseQueue = []; }
 
-// Legacy compatibility — kept for existing consumers (Undoable)
 let toasts = $state<ToastItem[]>([]);
 export function getToasts(): ToastItem[] { return toasts; }
 
@@ -29,29 +28,41 @@ export function addToast(
   type: ToastType, 
   message: string, 
   duration = 3000, 
-  options?: { onUndo?: () => void, onTimeout?: () => void }
+  options?: { key?: string, onUndo?: () => void, onTimeout?: () => void }
 ): void {
+  if (options?.key) {
+    if (queue.some(q => q.key === options.key) || toasts.some(t => t.key === options.key)) return;
+  }
   if (type !== 'undoable') {
-    queue.push({ id: nextId++, type, message, duration });
+    queue.push({ id: nextId++, type, message, duration, key: options?.key });
     return;
   }
   const id = nextId++;
   toasts = [...toasts, { id, type, message, duration, ...options }];
+  const timer = setTimeout(() => {
+    undoableTimers.delete(id);
+    options?.onTimeout?.();
+    removeToast(id);
+  }, duration);
+  undoableTimers.set(id, timer);
 }
 
 export function removeToast(id: number): void {
+  const timer = undoableTimers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    undoableTimers.delete(id);
+  }
   toasts = toasts.filter(t => t.id !== id);
 }
 
-// Convenience methods — backward compatible
 export const toast = {
-  success: (msg: string, duration?: number) => addToast('success', msg, duration),
-  error: (msg: string, duration?: number) => addToast('error', msg, duration ?? 5000),
-  info: (msg: string, duration?: number) => addToast('info', msg, duration),
-  warning: (msg: string, duration?: number) => addToast('warning', msg, duration ?? 4000),
+  success: (msg: string, duration?: number, opts?: { key?: string }) => addToast('success', msg, duration, opts),
+  error: (msg: string, duration?: number, opts?: { key?: string }) => addToast('error', msg, duration ?? 5000, opts),
+  info: (msg: string, duration?: number, opts?: { key?: string }) => addToast('info', msg, duration, opts),
+  warning: (msg: string, duration?: number, opts?: { key?: string }) => addToast('warning', msg, duration ?? 4000, opts),
   undoable: (msg: string, duration: number, onUndo: () => void, onTimeout: () => void) =>
     addToast('undoable', msg, duration, { onUndo, onTimeout }),
-  /** Promise toast — shows loading → success/error automatically */
   promise: <T>(promise: Promise<T>, opts: { loading: string; success: string; error: string }) => {
     promiseQueue.push({ id: nextId++, promise, opts });
     return promise;

package/src/types.ts

@@ -48,12 +48,14 @@ export type CrudOperator =
   | 'null' | 'nnull'
   | 'between' | 'nbetween';
 
-export interface Filter {
+export interface FieldFilter {
   field: string;
   operator: CrudOperator;
   value: unknown;
 }
 
+export type Filter = FieldFilter | LogicalFilter;
+
 export interface LogicalFilter {
   operator: 'or' | 'and';
   value: Filter[];