chore: rename FetchFonts to GetFonts

src/features/GetFonts/index.ts

@@ -0,0 +1,19 @@
+export {
+    createFilterManager,
+    type FilterManager,
+    mapManagerToParams,
+} from './lib';
+
+export {
+    FONT_CATEGORIES,
+    FONT_PROVIDERS,
+    FONT_SUBSETS,
+} from './model/const/const';
+
+export { filterManager } from './model/state/manager.svelte';
+
+export {
+    FilterControls,
+    Filters,
+    FontSearch,
+} from './ui';

src/features/GetFonts/lib/index.ts

@@ -0,0 +1,6 @@
+export {
+    createFilterManager,
+    type FilterManager,
+} from './filterManager/filterManager.svelte';
+
+export { mapManagerToParams } from './mapper/mapManagerToParams';

src/features/GetFonts/model/const/const.ts

@@ -0,0 +1,90 @@
+import type {
+    FontCategory,
+    FontProvider,
+    FontSubset,
+} from '$entities/Font';
+import type { Property } from '$shared/lib';
+
+export const FONT_CATEGORIES: Property<FontCategory>[] = [
+    {
+        id: 'serif',
+        name: 'Serif',
+        value: 'serif',
+    },
+    {
+        id: 'sans-serif',
+        name: 'Sans-serif',
+        value: 'sans-serif',
+    },
+    {
+        id: 'display',
+        name: 'Display',
+        value: 'display',
+    },
+    {
+        id: 'handwriting',
+        name: 'Handwriting',
+        value: 'handwriting',
+    },
+    {
+        id: 'monospace',
+        name: 'Monospace',
+        value: 'monospace',
+    },
+    {
+        id: 'script',
+        name: 'Script',
+        value: 'script',
+    },
+    {
+        id: 'slab',
+        name: 'Slab',
+        value: 'slab',
+    },
+] as const;
+
+export const FONT_PROVIDERS: Property<FontProvider>[] = [
+    {
+        id: 'google',
+        name: 'Google Fonts',
+        value: 'google',
+    },
+    {
+        id: 'fontshare',
+        name: 'Fontshare',
+        value: 'fontshare',
+    },
+] as const;
+
+export const FONT_SUBSETS: Property<FontSubset>[] = [
+    {
+        id: 'latin',
+        name: 'Latin',
+        value: 'latin',
+    },
+    {
+        id: 'latin-ext',
+        name: 'Latin Extended',
+        value: 'latin-ext',
+    },
+    {
+        id: 'cyrillic',
+        name: 'Cyrillic',
+        value: 'cyrillic',
+    },
+    {
+        id: 'greek',
+        name: 'Greek',
+        value: 'greek',
+    },
+    {
+        id: 'arabic',
+        name: 'Arabic',
+        value: 'arabic',
+    },
+    {
+        id: 'devanagari',
+        name: 'Devanagari',
+        value: 'devanagari',
+    },
+] as const;

src/features/GetFonts/model/index.ts

@@ -0,0 +1,6 @@
+export type {
+    FilterConfig,
+    FilterGroupConfig,
+} from './types/filter';
+
+export { filterManager } from './state/manager.svelte';

src/features/GetFonts/model/state/manager.svelte.ts

@@ -0,0 +1,29 @@
+import { createFilterManager } from '../../lib/filterManager/filterManager.svelte';
+import {
+    FONT_CATEGORIES,
+    FONT_PROVIDERS,
+    FONT_SUBSETS,
+} from '../const/const';
+
+const initialConfig = {
+    queryValue: '',
+    groups: [
+        {
+            id: 'providers',
+            label: 'Font provider',
+            properties: FONT_PROVIDERS,
+        },
+        {
+            id: 'subsets',
+            label: 'Font subset',
+            properties: FONT_SUBSETS,
+        },
+        {
+            id: 'categories',
+            label: 'Font category',
+            properties: FONT_CATEGORIES,
+        },
+    ],
+};
+
+export const filterManager = createFilterManager(initialConfig);

src/features/GetFonts/ui/FontSearch/FontSearch.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import {
+    FontList,
+    fontshareStore,
+} from '$entities/Font';
+import { SearchBar } from '$shared/ui';
+import { onMount } from 'svelte';
+import { mapManagerToParams } from '../../lib';
+import { filterManager } from '../../model';
+
+/**
+ * FontSearch
+ *
+ * Font search component with search input and font list display.
+ * Uses unifiedFontStore for all font operations and search state.
+ */
+onMount(() => {
+    /**
+     * The Pairing:
+     * We "plug" this manager into the global store.
+     * addBinding returns a function that removes this binding when the component unmounts.
+     */
+    const unbind = fontshareStore.addBinding(() => mapManagerToParams(filterManager));
+
+    return unbind;
+});
+
+$inspect(filterManager.queryValue, filterManager.debouncedQueryValue);
+</script>
+
+<SearchBar
+    id="font-search"
+    class="w-full"
+    placeholder="Search fonts by name..."
+    bind:value={filterManager.queryValue}
+>
+    <FontList />
+</SearchBar>

src/features/GetFonts/ui/index.ts

@@ -0,0 +1,9 @@
+import Filters from './Filters/Filters.svelte';
+import FilterControls from './FiltersControl/FilterControls.svelte';
+import FontSearch from './FontSearch/FontSearch.svelte';
+
+export {
+    FilterControls,
+    Filters,
+    FontSearch,
+};