src/features/GetFonts/lib/filterManager/filterManager.svelte.ts

@@ -1,13 +1,16 @@
 import { createFilter } from '$shared/lib';
-import type { FilterGroupConfig } from '../../model/const/types/common';
+import { createDebouncedState } from '$shared/lib/helpers';
+import type { FilterConfig } from '../../model';
 
 /**
  * Create a filter manager instance.
  */
-export function createFilterManager<TValue extends string>(configs: FilterGroupConfig<TValue>[]) {
+export function createFilterManager<TValue extends string>(config: FilterConfig<TValue>) {
+    const search = createDebouncedState(config.queryValue ?? '');
+
     // Create filter instances upfront
     const groups = $state(
-        configs.map(config => ({
+        config.groups.map(config => ({
             id: config.id,
             label: config.label,
             instance: createFilter({ properties: config.properties }),
@@ -20,6 +23,21 @@ export function createFilterManager<TValue extends string>(configs: FilterGroupC
     );
 
     return {
+        // Getter for queryValue (immediate value for UI)
+        get queryValue() {
+            return search.immediate;
+        },
+
+        // Setter for queryValue
+        set queryValue(value) {
+            search.immediate = value;
+        },
+
+        // Getter for queryValue (debounced value for logic)
+        get debouncedQueryValue() {
+            return search.debounced;
+        },
+
         // Direct array reference (reactive)
         get groups() {
             return groups;