Отображение режимов — пять концептов

Прототипы к документу ModesUXUIConceptualDesignPrepare.md. Каждый кадр — компонент MainHeroWidget в состоянии «Интерактивная сцена» на боевых токенах и боевом src/styles/main.css. Ширина кадра 390px = мобильная раскладка. К1–К3 — первая редакция; К4 и К5 добавлены по запросу заказчика и размещают слой режимов сверху по центру кадра.

Состав строк панели у каждого режима — из продуктового ядра mainhero_core (ConceptualDesign.md §6.3 и §7.4, параметры P-16…P-21): у «Книги» мотив и глава, у «ДНК» генетический отчёт, у «Гороскопа» данные рождения, у «Рабочего процесса» сложность и время задачи; BPM во всех шести. Контекстные и биометрические параметры в панель не выводятся. Зона дизайна здесь — английские формулировки строк и форма ввода: справочников значений для этих параметров ядро не заводит, поэтому карусель со стрелками заменена на свободный ввод, ползунок и строку вложения.

К1«Ключ»

Режим — первая строка панели. Ни одной новой плоскости. Золотая акколада слева охватывает строки, которыми управляет режим; пунктир = режим пока не пишет музыку. Листается стрелками и свайпом по строке.

Открыть отдельно ↗

К2«Афиша»

Полнокадровый выбор, где превью — сама сцена: у каждого режима свой план съёмки (крупность и точка кадрирования). Вход — плашка титра слева внизу. Листание — свайп/стрелки, применение — кнопка Switch to.

Открыть отдельно ↗

К3«Пульт»

Лист поверх панели: шесть режимов сразу, сетка 2×3. Линия канала — волна у режимов со звуком, ровная линия у остальных. Вход — вкладка на кромке панели, выбор — один тап по плитке.

Открыть отдельно ↗

К4«Шкала»верх / центр

Механика К1, но рейкой сверху по центру — панель не растёт. Знак режима, строка о том, что он читает, и шкала каталога: шесть засечек (высота = есть ли звук) с золотым указателем настройки. Модальности нет.

Открыть отдельно ↗

К5«Титры»верх / центр

Рейка сверху по центру одним движением разворачивается во весь кадр: шесть строк, у каждой знак, имя и фраза о том, что режим делает. Постановка modes.md в нашем материале.

Открыть отдельно ↗

Как запускать. Прототипы подключают боевые стили и ассеты по абсолютным путям, поэтому нужен сервер из корня проекта:
python3 -m http.server 8123 --directory /opt/sourcecode/mainhero_web
затем http://localhost:8123/aiteam/workspace/DesignerUXUI/prototypes/
(порт 8080 в этом окружении занят другим сервисом — отсюда 8123)

Что проверять. Клавиатура (Tab, стрелки, Esc), тач-цели 44px, поведение при prefers-reduced-motion: reduce, смена состава строк панели после переключения режима.