refactor(page-header): migrate to design-system primitives [Phase 1c]

[barach6662001-bit]

Phase 1c — Перший консумер примітивів: PageHeader

Перша реальна міграція компонента на нові примітиви Phase 1b. PageHeader.tsx тепер zero-CSS — вся розкладка, типографіка та відступи йдуть через Stack/Cluster/Heading/Text.

Чому саме PageHeader

• Використовується в 20+ сторінках, тож будь-яка регресія спливе одразу.
• Public API крихітний (title, subtitle, actions, breadcrumbs) — контракт легко зберегти буква в букву.
• Стара реалізація — підручниковий анти-паттерн: незрозумілі імена класів (text22, flex_between), магічні пікселі, і #fff градієнт на заголовку, який був візуально зламаний на новій світлій темі.

Зміни (3 файли, +57 / -54)

Файл	Дія
PageHeader.tsx	Перепис на примітивах
PageHeader.module.css	Видалено повністю
__tests__/PageHeader.test.tsx	+3 семантичних тести

До/після (суть)

Було:

<div>
  <div className={s.flex_between}>
    <h1 className={s.text22}>{title}</h1>     {/* font-size: 26px; gradient #fff → broken on light */}
    <p className={s.text13}>{subtitle}</p>     {/* font-size: 13px; */}
  </div>
</div>

Стало:

<Stack as="header" gap="3" style={{ marginBottom: 'var(--space-6)' }}>
  {breadcrumbs}
  <Cluster align="start" justify="between" style={{ paddingBottom: 'var(--space-5)', borderBottom: '1px solid var(--border)' }}>
    <Stack gap="1">
      <Heading level={1}>{title}</Heading>
      {subtitle && <Text size="sm" tone="tertiary">{subtitle}</Text>}
    </Stack>
    {actions && <Cluster gap="2" align="center">{actions}</Cluster>}
  </Cluster>
</Stack>

Що покращилось семантично

• Заголовок тепер флюїдний через токени: clamp(24px, …, 32px) — масштабується між брейкпоінтами автоматично.
• Підпис автоматично адаптується до light/dark через семантичні токени (--text-tertiary).
• Обгортка тепер реальний <header> (було <div>).
• Прибрано #fff-градієнт, що ламав світлу тему.
• Жодних magic numbers, жодних інлайн-розмірів — все через CSS-змінні з токенів.

Перевірки

• ✅ eslint — 0 errors (warnings успадковані)
• ✅ tsc -b — clean
• ✅ vitest — 137 / 137 passed (3 нових тести на семантику + старі)
• ✅ vite build — OK

API не змінився

Усі 20+ консумерів продовжують працювати без змін: той самий імпорт, ті самі пропси. Безпечно мерджити.

Що далі

Phase 1d — мігрувати ще одну точку дотику (можливо, шапку AppLayout або Sidebar), або перейти до Phase 2 (нові primitives: Card, Surface, Field).