frontend-svelte/src/widgets/ComparisonView/ui/Search/Search.svelte

<!--
    Component: Search
    Typeface search input for the comparison view.
    Writes through appliedFilterStore; the global bridge in $features/FilterAndSortFonts
    propagates the value into fontCatalogStore.
-->
<script lang="ts">
import { appliedFilterStore } from '$features/FilterAndSortFonts';
import { SearchBar } from '$shared/ui';
</script>

<div class="p-6 border-b border-subtle">
    <SearchBar
        id="font-search"
        class="w-full"
        placeholder="Typeface Search"
        aria-label="Search typefaces"
        bind:value={appliedFilterStore.queryValue}
        fullWidth
    />
</div>