ui-variant-16 — компактный dock

10 статических макетов того, как уложить элементы production-панели Agent CMS Toolbar (brand-dock + vault): expand, pomodoro, скрин, toggles, CMS, поиск, закладки. Не про раскрытие «иконка → меню» (это ui-variant-12), а про плотность одной полосы.

browser-extension asc-brand-dock mock CSS 10 layouts

Сетка сравнения ui-variant-12 — expand UX

Элементы (как в prod)

Бренд + drag, «⊞» развернуть панель инструментов, pomodoro, скрин viewport
Toggles: crosshair, page inspector, media hover save
Открыть CMS, web-search (picker + поле), черновик закладок
Vault workspace — отдельная строка или inline

Локально: cd public/examples/ui-variant-16 && python3 -m http.server 8774

Icon strip

Одна кapsula, только иконки; поиск — лупа.

Открыть

Vault stack

Vault сверху, dock снизу без длинного label.

Открыть

Segmented

Три сегмента: бренд · tools · search.

Открыть

Overflow ⋯

Редкие действия в меню «ещё».

Открыть

Brand flank

Бренд слева, кластер контролов справа.

Открыть

Vault inline

Мини-vault внутри кapsule, без второй строки.

Открыть

Search 2nd row

Поиск раскрывается второй строкой в dock.

Открыть

Toggle merged

Три overlay-toggle в одном сегменте.

Открыть

Two-row grid

Сетка: tools сверху, toggles+search снизу.

Открыть

Minimal expand

Только бренд, ⊞ и 🔍 — остальное в panel.

Открыть