GrSplitter

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

Второе следствие важнее первого: доля известна до рендера, поэтому серверная разметка совпадает с клиентской и гидрация проходит чисто. Компонент меряет DOM ровно в одном месте — когда переводит координату указателя в проценты; ни клавиатура, ни Home/End, ни сворачивание замеров не требуют.

v-model не обязателен: без него сплиттер помнит размер сам (как collapsed у GrSidebar). change эмитится в конце жеста и на каждом шаге с клавиатуры — это точка, куда вешают сохранение раскладки.

Компонент держит ровно две панели и один разделитель. Раскладка «дерево | редактор / консоль» собирается вложением, как в редакторах кода:

<GrSplitter v-model="treeWidth">
  <template #start><FileTree /></template>
  <template #end>
    <GrSplitter v-model="consoleHeight" orientation="vertical">
      <template #start><Editor /></template>
      <template #end><Console /></template>
    </GrSplitter>
  </template>
</GrSplitter>

Вложенные сплиттеры независимы: каждый ведёт свою модель.

min и max ограничивают первую панель, minEnd — вторую. Без minEnd вторую панель можно задавить в ноль, и вернуть её будет нечем.

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

Разделитель стоит в таб-порядке (role="separator", tabindex="0"):

• ←/→ в горизонтальной раскладке, ↑/↓ в вертикальной — шаг;
• Shift + стрелка — крупный шаг;
• Home / End — к min / max;
• Enter — свернуть и вернуть (при collapsible);
• двойной клик — сброс к defaultSize;
• перетаскивание вплотную к краю (ниже половины min) сворачивает панель мышью: двойной клик занят сбросом, а свернуть мышью чем-то надо.

Зона захвата шире видимой полосы: шестипиксельная мишень мышью не берётся, а делать ради этого полосу толще значило бы красить раскладку под удобство мыши.

orientation описывает раскладку: horizontal — панели стоят рядом. aria-orientation описывает сам разделитель, а панели, стоящие рядом, разделяет вертикальная полоса. Поэтому у горизонтальной раскладки aria-orientation="vertical", и наоборот.

Разделитель объявляет aria-valuenow/valuemin/valuemax в тех же процентах, что и модель, и ссылается на первую панель через aria-controls.

collapsed — отдельное состояние (v-model:collapsed), а не modelValue: 0. Прежний размер обязан пережить сворачивание, иначе Enter вернул бы панель не туда, откуда её свернули. В треке свёрнутая панель занимает 0 %, и aria-valuenow показывает 0 — то, что видно на экране.

Свёрнутая панель обрезана и скрыта (overflow: hidden, visibility: hidden) и помечена inert: её содержимое не рисуется поверх второй панели, не объявляется скринридером и не попадает в порядок Tab. Раньше нулевая ширина оставляла содержимое видимым поверх соседа, а ссылки внутри — достижимыми вслепую. При разворачивании всё возвращается.

• GrResizable (ресайз блока за уголок) сюда не входит — другой сценарий и другой паттерн;
• сохранение раскладки — задача приложения: v-model и change дают всё необходимое, а localStorage внутри компонента был бы состоянием, о котором приложение не знает;
• snap-точек и «магнитов» нет — без сценария это лишняя механика поверх клампа;
• своей физики касания нет — pointer-события покрывают тач как есть.