Архитектура BELF

Слои и направление импортов

app → pages → widgets → features → shared

• app монтирует страницу и не содержит интерфейсных секций;
• pages собирают страницу из sections и владеют page-specific data;
• widgets содержат составные блоки страницы: site header/footer;
• features содержат самостоятельные сценарии, например calculator и тему navigation;
• shared/config содержит site identity и metadata registry; shared/data содержит assets, navigation, modules и pricing;
• shared/utils содержит функции без React и DOM.

Нижний слой не импортирует верхний. В частности, shared не зависит от pages, features, widgets или app. ESLint fixtures проверяют запрещённые направления, parent-relative imports и deep imports в feature/widget internals; cycle check требует ноль циклов. Тот же architecture gate проверяет, что каждый runtime source file достижим из одного из app entrypoints, а каждый export локального public API действительно потребляется через этот API.

Фактическая структура страниц

src/
  app/
  widgets/
    site-header/
      SiteHeader.tsx
      NavigationDialog.tsx
    site-footer/
  pages/
    home/
      sections/
        CalculatorSection/
        SignalStrip.tsx
    partners/
      PartnersPage.tsx
      data.ts
      components/
        ApplicationForm/
      sections/
        PartnersHero/
        PartnershipIntroSection/
        PartnerTypesSection/
        PartnerBenefitsSection/
        ClientsRegistry/
        CommissionSection/
        PartnershipRulesSection/
        TerritorySection/
        InternationalSection/
        PartnershipProcessSection/
        PartnershipApplicationSection/
    careers/
      CareersPage.tsx
      data.ts
      components/
        ResumeForm/
      sections/
        CareersHero/
        CandidateProfileSection/
        ResponsibilitiesSection/
        TrainingSection/
        RequirementsSection/
        ResumeSection/
  shared/
    config/
      site.ts
    data/
      assets.ts
      contacts.ts
      modules.ts
      navigation.ts
      pricing.ts
    utils/

Все три страницы используют общий widgets/site-footer; ссылки на секции главной имеют абсолютный путь /#…, ссылка «Наверх» ведёт к локальному #top.

Page components задают providers, header/footer и порядок секций. Page-specific данные остаются в соседнем data.ts; site identity и metadata имеют единственный источник истины в shared/config/site.ts.

Стили

Глобальными остаются fonts.css, tokens.css, reset.css, global.css и три page utility-файла. Utilities содержат только доказанно общие классы внутри страницы. CSS Module имеет одного владельца; правило секции не стилизует внутренности другой секции, widget или feature.

Header tone

Секция, меняющая контраст header, оборачивается в NavThemeRegion. Значение theme="dark" означает светлый foreground header над тёмным фоном; theme="light" — тёмный foreground над светлым фоном. Не использовать DOM-поиск, data-атрибуты или page CSS для управления header.

Проверки

Перед передачей изменения запускайте npm run quality. В дополнение к unit и browser checks он запускает coverage, architecture fixtures, cycle, bundle, links, rendered SEO и Lighthouse audits. Не обновляйте snapshot, пока не подтверждена точная причина и не выполнен visual review.