Паттерны страницы статьи (/media/[slug]) и её карточки в списке /media. Шесть примитивов, покрывающих hero, тело с левой ToC, «ключевые мысли» и карточку.

Хлебные крошки

Путь над hero статьи. Desktop — row, gap 12. Mobile — горизонтальный скролл, прижатый к концу (видно текущее положение).

Tag / Тег

Три размера (L/M/S) и четыре состояния. Используется для рубрикации, карточек и фильтра на /media.

Author / Автор

Блок «аватар + имя + дата». Вариант full — для hero статьи, short — для ArticleCard.

Key Thoughts / Ключевые мысли

Закреплённый блок тезисов, которые редактор выносит из тела статьи. Отображается в правой колонке hero на desktop.

ArticleNav / Левая ToC

Левая навигация по разделам статьи на desktop. Пункты автогенерируются из H2 в теле. Активный пункт — жёлтый.

ArticleCard / Карточка

Карточка статьи для списка /media и админского превью. 350×auto, glass-панель, картинка (без overlay), теги, заголовок, описание и автор.

ArticleBody / Тело статьи

Сквозной поток блоков h2 / h3 / paragraph / quote с единой логикой вертикального ритма. H2 → DS H3 (32/28), H3 → DS H4 (24/20). Перед h2 отступ 56px (desktop) / 44px (mobile) — начало новой секции. После h2 — 32px. Параграфы подряд — 16px. Подробности в §11.7 DS MD.

Списки внутри paragraph (строки с маркером - / 1. ) рендерятся семантическими <ul> / <ol> — точка-буллит / моно-цифра, текст Copy 18, inline-разметка и глоссарий работают внутри пунктов. Термин глоссария линкуется только при первом вхождении на статью.

VideoPlayer / Видео

Плеер для видео-блоков тела статьи. Кастомные контролы на нативном <video>: play/pause, scrubber с буферизацией и миниатюрой, таймер, регулятор громкости, fullscreen. Клавиши: Space/K — play/pause, ←/→ — ±5s, ↑/↓ — громкость,M — mute, F — fullscreen, Home/End — в начало/конец. Контролы автоскрываются через 2s во время воспроизведения, появляются на hover/mousemove/focus. Аспект 16/9 по умолчанию, цвет прогресса — --rm-yellow-100.

Буквенные шорткаты матчатся по e.code (физическая клавиша): в русской раскладке F/K/M даюта/л/ь, и сравнение по e.key не срабатывало. Клик по плееру возвращает фокус на контейнер — центральная кнопка «Play» забирает фокус и сразу размонтируется (рендерится при !isPlaying), после чего фокус улетал в bodyи клавиатура переставала работать.

Видео-блок принимает загруженный файл или ссылку с внешней площадки. Правило рендера: поле embedUrl есть → адаптивный 16/9 <iframe> (loading="lazy", allowFullScreen); иначе → VideoPlayer по src. Старые блоки (только src) играют через плеер — обратная совместимость. Ссылки распознаёт хелпер parseVideoSource(url): YouTube / Vimeo / RuTube / VK / Dailymotion → embedUrl; прямой файл (.mp4/.webm/.mov/.ogv/.ogg/.m3u8) → VideoPlayer; прочий http(s)-URL → generic-iframe (best-effort, площадки с X-Frame-Options: DENY не встроятся). В админке пустая нода — две dashed-кнопки «Загрузить видео» / «Вставить ссылку».

PdfPresentationViewer / Презентация PDF

Инлайн-просмотр PDF-презентации: слайды (страницы PDF) листаются прямо в странице, без открытия в отдельной вкладке. Используется в уроке saas-teacher вместо ссылки «Открыть». Рендер постранично в <canvas> (react-pdf поверх pdf.js), текстовый и аннотационный слои отключены. Контролы: ‹ / ›, счётчик N / M, fullscreen. Клавиши: ←/→ — листать, Home/End — первый/последний слайд, F — на весь экран. Воркер pdf.js приложение передаёт пропом workerSrc (резолвится бандлером, без CDN). Цвет фокус-кольца — --rm-yellow-100. В saas-admin к загрузке принимается только application/pdf. Перелистывание без артефактов: входящий слайд заранее рендерится в скрытом буфере и подменяется мгновенно (оба слоя непрозрачны) — без пустого кадра, без translateY и без просвечивания фона (белого мигания), в т.ч. при быстром листании.

Gallery / Смешанные табы (image + video)

Таб-свитчер в теле статьи. Элемент галереи может быть изображением (kind: "image", default) или видео (kind: "video"). Image-табы сохраняют slide-анимацию и overlay bg-black/20. Video-табы рендерятся через VideoPlayer без slide и overlay.

Кадр 1ВидеоКадр 2

Factoid grid / Сетка фактоидов (section-level)

Section-level компонент — рендерится строго в начале секции, под H2, не как блок тела. Адаптив: 2 (mobile, <768) / 2 / 3 колонки — линии решётки пересчитываются под мобильный перенос. На сайте 3-я карточка вылезает в col-4 (negative marginRight) и сдвигает sticky-asides секции вниз на сумму высот рядов с 3-й карточкой.accent: true — жёлтая подложка --rm-yellow-100с тёмным текстом.

List card grid / Сетка списков (section-level)

Аналог factoid-grid, живёт там же — в начале секции, под H2. Карточка: заголовок Label 18 + строки Copy 16 с маркером (listType: буллит 4×4px или номер). На мобильном (<768) — 2 колонки, колонки разведены на 40px, у bullet-списка нет точек и сдвига текста вправо: строки просто разведены на 12px.