doc: comments for codebase and updated documentation

src/features/DisplayFont/model/store/displayedFontsStore.svelte.ts

@@ -1,5 +1,10 @@
 import { selectedFontsStore } from '$entities/Font';
 
+/**
+ * Store for displayed font samples
+ * - Handles shown text
+ * - Stores selected fonts for display
+ */
 export class DisplayedFontsStore {
     #sampleText = $state('The quick brown fox jumps over the lazy dog');
 

src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

@@ -10,8 +10,17 @@ import {
 import { ContentEditable } from '$shared/ui';
 
 interface Props {
+    /**
+     * Font info
+     */
     font: UnifiedFont;
+    /**
+     * Text to display
+     */
     text: string;
+    /**
+     * Font settings
+     */
     fontSize?: number;
     lineHeight?: number;
     letterSpacing?: number;

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

@@ -4,6 +4,11 @@ import type { FilterConfig } from '../../model';
 
 /**
  * Create a filter manager instance.
+ * - Uses debounce to update search query for better performance.
+ * - Manages filter instances for each group.
+ *
+ * @param config - Configuration for the filter manager.
+ * @returns - An instance of the filter manager.
  */
 export function createFilterManager<TValue extends string>(config: FilterConfig<TValue>) {
     const search = createDebouncedState(config.queryValue ?? '');

src/features/GetFonts/lib/mapper/mapManagerToParams.ts

@@ -1,6 +1,12 @@
 import type { FontshareParams } from '$entities/Font';
 import type { FilterManager } from '../filterManager/filterManager.svelte';
 
+/**
+ * Maps filter manager to fontshare params.
+ *
+ * @param manager - Filter manager instance.
+ * @returns - Partial fontshare params.
+ */
 export function mapManagerToParams(manager: FilterManager): Partial<FontshareParams> {
     return {
         q: manager.debouncedQueryValue,

src/features/GetFonts/ui/Filters/Filters.svelte

@@ -1,18 +1,8 @@
+<!--
+    Component: Filters
+    Renders a list of CheckboxFilter components for each filter group.
+-->
 <script lang="ts">
-/**
- * Filters Component
- *
- * Orchestrates all filter properties for the sidebar. Connects filter stores
- * to CheckboxFilter components, organizing them by filter type:
- *
- * - Font provider: Google Fonts vs Fontshare
- * - Font subset: Character subsets available (Latin, Latin Extended, etc.)
- * - Font category: Serif, Sans-serif, Display, etc.
- *
- * This component handles reactive sync between filterManager selections
- * and the unifiedFontStore using an $effect block to ensure filters are
- * automatically synchronized whenever selections change.
- */
 import { CheckboxFilter } from '$shared/ui';
 import { filterManager } from '../../model';
 </script>

src/features/GetFonts/ui/FiltersControl/FilterControls.svelte

@@ -1,14 +1,11 @@
+<!--
+    Component: FiltersControl
+    Renders a group of action buttons for filter operations.
+    - Reset: Clears all active filters (outline variant for secondary action)
+-->
 <script lang="ts">
 import { Button } from '$shared/shadcn/ui/button';
 import { filterManager } from '../../model';
-
-/**
- * Controls Component
- *
- * Action button group for filter operations. Provides two buttons:
- *
- * - Reset: Clears all active filters (outline variant for secondary action)
- */
 </script>
 
 <div class="flex flex-row gap-2">

src/features/GetFonts/ui/SuggestedFonts/SuggestedFonts.svelte

@@ -1,3 +1,7 @@
+<!--
+    Component: SuggestedFonts
+    Renders a list of suggested fonts in a virtualized list to improve performance.
+-->
 <script lang="ts">
 import {
     FontListItem,

src/features/SetupFont/lib/controlManager/controlManager.svelte.ts

@@ -3,6 +3,12 @@ import {
     createTypographyControl,
 } from '$shared/lib';
 
+/**
+ * Creates a typography control manager that handles a collection of typography controls.
+ *
+ * @param configs - Array of control configurations.
+ * @returns - Typography control manager instance.
+ */
 export function createTypographyControlManager(configs: ControlModel[]) {
     const controls = $state(
         configs.map(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => ({

src/features/SetupFont/ui/SetupFontMenu.svelte

@@ -1,7 +1,8 @@
+<!--
+    Component: SetupFontMenu
+    Contains controls for setting up font properties.
+-->
 <script lang="ts">
-/**
- * Component containing controls for setting up font properties.
- */
 import { Separator } from '$shared/shadcn/ui/separator/index';
 import { Trigger as SidebarTrigger } from '$shared/shadcn/ui/sidebar';
 import { ComboControl } from '$shared/ui';