Агентный слой

Реплика

Один шаг обмена. Всё остальное в этом слое показывает работу; реплика — то, внутри чего работа происходит: ответ это не абзац, а контейнер для шагов, диффа, запроса разрешения и бюджета.

Компонент

Вы14:02

Добавь полосу долей над лентой истории.

Агент14:02

Поставлю её над лентой и дам одной легенде ключевать обе.

Разметка

<div class="inst-stack inst-stack--loose">
  <div class="inst-turn" data-from="user">
    <div class="inst-turn-head"><span class="inst-turn-who">Вы</span><span>14:02</span></div>
    <div class="inst-turn-body">Добавь полосу долей над лентой истории.</div>
  </div>
  <div class="inst-turn">
    <div class="inst-turn-head"><span class="inst-turn-who">Агент</span><span>14:02</span></div>
    <div class="inst-turn-body">Поставлю её над лентой и дам одной легенде ключевать обе.</div>
    <div class="inst-turn-actions">
      <button class="inst-btn inst-btn--xs inst-btn--icon inst-btn--ghost" type="button" aria-label="Копировать"><svg class="inst-icon" aria-hidden="true"><use href="#i-copy"/></svg></button>
      <button class="inst-btn inst-btn--xs inst-btn--icon inst-btn--ghost" type="button" aria-label="Повторить"><svg class="inst-icon" aria-hidden="true"><use href="#i-refresh"/></svg></button>
      <button class="inst-btn inst-btn--xs inst-btn--icon inst-btn--ghost" type="button" aria-label="Ещё"><svg class="inst-icon" aria-hidden="true"><use href="#i-more"/></svg></button>
    </div>
  </div>
</div>

Контракт

Что	Обязательно	Почему
`data-from="user"` у реплики человека	да	Реплика машины — умолчание. Помечать обе значило бы завести значение атрибута, которому нечего объявлять
Имя в `inst-turn-who`	да	Цвет и отступ не носители: утопление — одна и та же плёнка в любой теме, а скринридер не получает ни того ни другого
Время	нет	Полезно в длинной ветке, шум в короткой
`inst-turn-actions` держит место	да, если они есть	Наведение может усилить элемент, но не может вызвать его к жизни. Ряд размечен в любом случае, поэтому под курсором ничто не сдвигается: кнопки проявляются, а `@media (hover: none)` отдаёт их в полную силу там, где курсора нет. Ряд, которого нет в разметке вовсе, на сенсорном экране не существует
Ветка как список	нет	Реплики — соседи в `inst-stack--loose`; второго имени для колонки кит не заводит

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

Доступность


Кто говорит	Назван текстом, а не поверхностью. Утопление — оформление, и до вспомогательных технологий оно не доходит
Поток	Ещё идущий ответ несёт каретку; объявлением служит сам текст
Действия	Настоящие кнопки с подписями. Они стоят в потоке, поэтому `Tab` доходит до них в порядке чтения

Композиции

Ответ, который сделал работу

В контексте

Агент14:02

Добавил, легенда теперь расшифровывает тона.

edit src/data.css 0.4 с

.inst-share { display: flex; }