Оси вариативности

Два фрейма могут отличаться из-за узкого экрана, другого языка или ещё не загруженных данных. Прежде чем сравнивать их, определите причину. DFC Bridge называет каждую независимую причину осью: ширина не объясняет незаявленную смену содержимого или поведения.

Читайте три отдельных примера: виды страницы default/empty на разных ширинах; нативные варианты кнопки Type=Primary/Secondary; действие с целью filters-open. Вариант компонента — не вид страницы, а объявление цели состояния не реализует переход во время работы приложения. Открыть в полном размере.

Визуальный экскурс показывает, зачем эти решения нужны команде.

Главное правило

По умолчанию адаптив — то же логическое дерево в другой раскладке. Для иной композиции нужно объявленное преобразование; сама ширина его не объясняет.

Если меняется текст, укажите продуктовую причину: например, локаль или согласованный эксперимент. Если ради удобства адаптива меняется родитель или композиция, опишите сопоставление старой и новой структуры. Ни одно отличие корней не должно остаться необъяснённым.

Канонические оси

Ось	Опорная отметка	Может ли меняться содержимое	Назначение
Страница	[page=...]	нет само по себе	логическая страница
Маршрут	[route=...] / [route-pattern=...]	нет	рабочий URL или его шаблон
Контрольная ширина	[bp=...]	нет	подготовленная точка адаптива
Состояние	[view=...]	да, по состоянию	загрузка, пустота, частичный результат, ошибка
Локаль	[locale=...]	да	перевод и региональный формат
Направление / режим письма	структурированный контекст	нет само по себе	ltr/rtl и горизонтальный/вертикальный поток
Тема	[theme=...]	нет	контекст визуальных токенов
Эксперимент	[experiment=...]	да, контролируемо	продуктовый эксперимент
Роль	[role-view=...]	да, контролируемо	права и представление пользователя
Сценарий данных	[data=...]	только примеры	длинные, отсутствующие, минимальные, максимальные, устаревшие или ошибочные данные
Цель/возможности	структурированный профиль	только по решению	возможности платформы, ввода, медиа и производительности, запасной путь

Теги остаются короткими опорными отметками. Направление, режим письма, возможности, сопоставления и критерии находятся в bridge.context, bridge.responsive или профиле целевой платформы.

Контрольная ширина

catalog [page=catalog] [route=/catalog] [bp=1200] [view=default]
catalog [page=catalog] [route=/catalog] [bp=360] [view=default]

По умолчанию меняются геометрия, интервалы, типографика, естественные переносы, число колонок и визуальная раскладка. Нельзя молча менять содержимое, действие, данные, смысловые связи и доступность. См. правила адаптивов.

Состояние

Состояния — достижимые примеры страницы или данных:

catalog [page=catalog] [route=/catalog] [bp=1200] [view=default]
catalog [page=catalog] [route=/catalog] [bp=1200] [view=loading]
catalog [page=catalog] [route=/catalog] [bp=1200] [view=empty]
catalog [page=catalog] [route=/catalog] [bp=1200] [view=error]

Содержимое меняется из-за продуктового состояния. Адаптивы внутри состояния сохраняют одно дерево или объявляют преобразование. Локальные состояния компонента остаются в его модели состояний, а не становятся корнями страницы.

Локаль

contacts [page=contacts] [route=/contacts] [bp=1200] [locale=en-US]
contacts [page=contacts] [route=/contacts] [bp=1200] [locale=ru-RU]

Локаль меняет перевод, множественное число, даты, числа, валюту и юридическое содержимое по продуктовым правилам. Проверяйте расширение, неделимые значения, покрытие шрифта и форматы. Локаль не является способом сократить мобильный текст.

Направление и режим письма

Локаль и направление связаны, но не совпадают. Записывайте direction: ltr | rtl и writingMode в структурированном контексте:

{
  "direction": "rtl",
  "writingMode": "horizontal-tb"
}

Объявите зеркальность композиции; используйте логические start/end; разделите зеркалящиеся и неизменные иконки; проверьте смешанные имена, телефоны, даты, идентификаторы, код и цифры; задайте оси диаграмм и порядок категорий; сохраните смысловой порядок чтения и клавиатуры независимо от отражения; добавьте RTL/bidirectional стрессовые примеры и скриншоты, если это поддерживается.

Тема

dashboard [page=dashboard] [bp=1200] [theme=light]
dashboard [page=dashboard] [bp=1200] [theme=dark]

Тема меняет токены, медиаматериалы и обработку контраста. Она не меняет текст, данные, действие или доступную возможность. Проверяйте интерактивные элементы, данные, фокус, недоступность, ошибки и принудительный контраст, а не один фон.

Эксперимент

pricing [page=pricing] [route=/pricing] [bp=1200] [experiment=cta-a]
pricing [page=pricing] [route=/pricing] [bp=1200] [experiment=cta-b]

Эксперимент может менять согласованное содержимое и путь. Определите гипотезу, назначение варианта, событие показа, метрики, срок и владельца, fallback, паритет доступности, реакции и историю. Не маскируйте эксперимент под адаптив.

Роль

dashboard [page=dashboard] [route=/dashboard] [bp=1200] [role-view=guest]
dashboard [page=dashboard] [route=/dashboard] [bp=1200] [role-view=admin]

Роль может менять сведения и действия. Источником правды о доступе остаётся runtime-авторизация: скрытый слой не является защитой. Покройте смену прав на уже открытой странице.

Сценарий данных

Сценарии — тестовые данные, а не рабочие варианты:

product-card [data=short]
product-card [data=long]
product-grid [collection=products] [data=max-items]
product-grid-empty [collection=products] [data=empty]

Покройте ноль, один, обычный и максимальный/неизвестный объём, длинный и двунаправленный текст, отсутствующие значения и медиа, дубликаты, частичные, устаревшие, ошибочные и недоступные данные. Порядок примеров или числовой суффикс не становится рабочим ключом. См. данные и визуализацию.

Профиль цели и возможностей

Цель может не поддерживать hover, sticky, scroll timeline, примитив диаграммы, кодек, нужный объём памяти или канала. Не создавайте тег для каждой возможности. Структурированный профиль задаёт:

• платформу и возможности ввода/вывода;
• форматы, размеры, качество и art direction ресурсов/медиа;
• приоритет загрузки, poster/preview, preload или lazy;
• ожидаемый объём данных и порог/стратегию пагинации или виртуализации;
• низкую скорость, offline, data saver, low power и reduced motion;
• fallback неподдерживаемой возможности и владельца;
• бюджеты производительности и место измерения.

Дизайн объявляет важные медиа, сведения и часть опыта. Реализация владеет измеримыми бюджетами и сопоставлением платформы. Неизвестная возможность становится openQuestions[] с владельцем, а не предположением.

Сочетание осей

catalog [page=catalog] [route=/catalog] [bp=360] [view=empty] [locale=ar-SA] [theme=dark]

Структурированный контекст может добавить direction: rtl, writingMode: horizontal-tb и профиль mobile-low-bandwidth. Комбинации выбираются по риску: рисовать всё декартово произведение не нужно, но пропущенная комбинация должна наследоваться детерминированно или стать открытым вопросом.

Недопустимые примеры

// адаптив скрывает контентный эксперимент
hero-title desktop = "Launch your store in one day"
hero-title mobile = "Launch faster"

// вымышленная локаль скрывает короткий текст
hero [bp=320] [locale=mobile-short]

// тема меняет продуктовое действие
delete [theme=light] [action=modal:confirm-delete]
delete [theme=dark] [action=none]

Проверка

Валидатор или ревью сообщает, если:

• текст, действие или данные меняются между адаптивами/темами без подходящей оси;
• топология меняется без преобразования;
• локаль кодирует устройство или раскладку;
• направление сведено к зеркальности без bidi, чтения, клавиатуры, иконок и диаграмм;
• у эксперимента нет владельца и измерения;
• видимость по роли считается авторизацией;
• тестовый пример используется как рабочий ключ или продуктовый вариант;
• неподдерживаемая возможность не имеет fallback, владельца, бюджета или открытого вопроса;
• наследование неподготовленной комбинации неоднозначно.