Організм · рівень 3

Оверлей каталогу

Жоден кольоровий екран цього не малює, і це головне про файл. Розмітки оверлея немає у жодному html репозиторію: її створює wfCatOverlayEnsure() і дописує в body при першому тапі по вкладці «Каталог». Тому всі 14 власних класів і всі 178 оголошень у спокої не збігаються ні з чим - третій за розміром такий блок серед 24 організмів. Демо нижче не знято з того, що екран малює: воно отримане викликом самого будівника на design/index.html у цій же сесії.

рівень 3design/system/components/cat-overlay.css121 рядок32 селектори110 оголошеньжодного екранарозмітки немає в жодному html

З чого складається

Таблиці складу немає зовсім: зонд обходив сторінки в спокої, кореня .wf-catov не знайшов на жодній і запису не завів. У знятій розмітці 144 елементи, і чуже в них рівно одне ім'я - .uiv-ic, знак у рядку, 26 штук, і фарбує його цей самий файл.

Замір не відбувся. Кореня цього організму немає в спокої на жодному кольоровому екрані, тож обхід сорока екранів не мав що обійти. Склад читається з файлу й з розмітки, знятої після виклику будівника, а не з цієї таблиці.

Анатомія

Розмітка тут - не переписана від руки. Її знято з design/index.html у цій же сесії, обробники зняті, посилання підняті на рівень. Цей організм у спокої не існує - він display: none, доки щось не додасть open, - тож стенд додає цей клас сам. Показано на сцені: трансформований предок стає для position: fixed тим блоком, від якого рахується його inset, тож панель не накриває сторінку й не втрачає жодного свого оголошення.

Показано в рамці шириною 390, і ширина названа не для краси: вона в продукті ховається від 860, тож на широкому стенді малювала б порожнечу. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.

1Перемикач на 860 - .wf-catov{ display: none } стоїть поза медіа-умовою, а .wf-catov.open{ display: flex } - усередині @media (max-width: 859px). Тому вище 859 клас .open нічого не вмикає, і !important тут не потрібен

2Панель - fixed, top: 0, bottom: 57px, z-index 49, тобто нижче за нижню панель вкладок (z-index 50), з якої її й відкривають. Висота йде за вікном: заміряно 643 при вікні 700 і 943 при 1000, обидва рази рівно вікно мінус 57

3Шапка .wf-catov-h - sticky, min-height: 52px (число поза шкалою), у ній .ctitle, на другому рівні .ctitle.sub і .cback, праворуч .cx

4Рядок .wf-catov-row - у демо їх 13: один .lead («За ціллю») плюс 12 категорій. Усередині знак .ci, назва .cl з overflow-wrap: anywhere і шеврон .car кольору --mark-faint

5Рівні 2 і 3 - .wf-catov-all, .wf-catov-sub, .wf-catov-goal з .cg, .gn і .gc. У демо їх немає, бо будівник пише їх лише після тапу по категорії: те, що ви бачите нижче, це рівень 0

6Знаки - три правила поза медіа-умовою: акцент на «За ціллю» і на цілях, чорнило на простому списку категорій, і 19px замість 1.05em, бо в рядку 14px em дав би 14.7, а мальований знак на такому кеглі читається тонше за друкований

Одна межа, дві техніки, один крок

Цей файл і nav-drawer.css написані на кроці 7.26 і роблять на 860 те саме - гасять панель, якої на десктопі не існує. Тут .open сховано всередину медіа-умови, і правило поза нею вимикає панель тихо. Там - display: none !important. Обидві техніки працюють, але в системі мають бути не дві, а одна, і другу треба обрати вголос: у шарі компонентів рівно п'ять !important, і всі п'ять саме про це.

Два нижні рівні, і шість класів файлу існують лише там

Оверлей має три рівні, і рамка вище показує лише перший. Він не перемикається класом - тіло переписується цілком, тож у спокої першого рівня решти розмітки не існує ніде: .cback у шапці, .wf-catov-all і .wf-catov-sub на рівні категорії, .wf-catov-goal з двома дітьми .cg і .gn - на рівні цілей.

Рівні не підроблені. Рамки викликають catOverlayCat(0) і catOverlayGoals() - ті самі функції, які натискають рядки першого рівня. Стенд натискає, а не набирає.

.cback - «‹ Каталог» ліворуч, і поруч .ctitle.sub з назвою категорії: шлях назад і місце, де ви є, в одному рядку. .wf-catov-all - перший рядок тіла, вихід у всю категорію; .wf-catov-sub - підкатегорії під ним

.wf-catov-goal - рядок цілі з двома рядками тексту: .cg це стовпчик, .gn - назва, під нею перелік категорій. Шість цілей MVP, той самий набір, що на плитках головної

Стани

Стан	Що робить	Чому так
рівень 0	`catOverlayL0()`: рядок «За ціллю» плюс 12 категорій	це те, що показано в демо, і єдине, що будівник пише одразу
рівень 1	`catOverlayCat(i)`: у шапці `.cback` і `.ctitle.sub`, у тілі `.wf-catov-all` і список `.wf-catov-sub`	той самий екран без завантаження сторінки: три рівні, одна адреса
цілі	`catOverlayGoals()`: `.wf-catov-goal` з назвою `.gn` і поясненням `.gc`	шість цілей MVP, і саме тут витрачено акцент
відкрито	`.open` плюс `body.style.overflow = hidden`	замок сторінки тут інлайновий стиль, а в сусідній шухляді меню - клас `html.dr-lock`. Одна робота, два способи
від 860	не існує	вище межі каталог показує мега-меню, і оверлей не має що там робити
наведення й фокус	у файлі жодного псевдокласу	13 рядків демо це `<button>`, і власного стану натискання чи фокуса файл їм не дає

7.92: шапку накладки - і ✕, і ← - не можна було натиснути

Знайшов власник на телефоні. Заміряно: .uiv-topbar оснастки це fixed при top: 0, висота 40, z-index: 92; накладка стояла при top: 0 із z-index: 49, а її ✕ сидить на 12..40 - цілком під смугою. elementFromPoint у центрі хрестика повертав шеврон смуги оснастки, тобто тап відкривав список екранів замість того, щоб закрити каталог.

--shell-top це «скільки верху екрана забрало те, що стоїть НАД продуктом», і воно існує рівно для цього: .cart-ov, .cart-drawer, .auth-ov і .wfh читають його з кроку 7.26. Ця панель у той прохід не потрапила - той самий вид, що й чотири інші рази цього етапу: «хто саме отримує X» відповіли рукою, а те, що додали пізніше, лишилось поза списком. Запасне 0px лишає сірий шар там, де змінної немає. Заміряно після: накладка від 40, ✕ на 52, elementFromPoint у його центрі повертає BUTTON.cx.

І число, яке лишилось як було, свідомо. bottom: 57px це висота таб-бару, набрана числом, і вона розійшлась: заміряно на 390, .wf-tabbar має 59. buy-bar.css набирає ту саму смугу як 61. Два файли, два числа, одна смуга - а сама смуга висоти не оголошує, вона складається з відступів. Токен для неї це рішення про значення, і вигадувати його всередині виправлення бага - рівно той спосіб, яким значення потрапляє в систему без рішення. Записано, етап 09.

Межі

У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.

@media (max-width: 859px)

Холостий контроль

Сторінка звіряє себе з файлом: 14 власних класів і 0 станів.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: --bp-shell-wide дзеркалом 859, уже реєстрове. Раунд організмів нічого не складав. І окремо про нуль: comp-width.mjs показує цей файл на нулі екранів. Він не мертвий - оверлей каталогу народжується в акті: його ставить _nav.js на подію, тож у DOM на завантаженні його немає, а обхід міряє саме завантажений DOM.

Рух

Робота: ЗВ'ЯЗОК. Оверлей каталогу з'являвся перемиканням display - дискретна властивість, якої звичайний transition не бачить. Тепер allow-discrete + @starting-style, тривалість --dur-slow, криві --ease-enter / --ease-exit. Не їде, а проявляється, і це рішення: він заміщає всю сторінку під шапкою, тож зсув посунув би кожен піксель екрана одразу - найдорожчий рух у продукті заради найменшого сенсу, бо «звідки» тут немає: каталог не ліворуч від чогось. Правила стоять усередині того самого медіазапиту, що й сама поверхня - вище 859 її не існує.

Токени

Прочитані з cat-overlay.css: 9 семантичних ролей і 19 примітивів.

Семантичні ролі (9)	Примітиви (19)
`--bg-page` `--bg-surface` `--line-hair` `--mark-faint` `--text-action` `--text-body` `--text-muted` `--text-primary` `--text-secondary`	`--dur-slow` `--ease-enter` `--ease-exit` `--fs-12` `--fs-14` `--fs-16` `--fs-18` `--fs-20` `--fw-black` `--fw-bold` `--fw-semibold` `--lh-flat` `--lh-snug` `--size-24` `--space-12` `--space-16` `--space-2` `--space-24` `--space-4`

Що знайшов вирішувач

Вирішувач знайшов у цьому файлі 178 оголошень, які не збігаються з жодним елементом, і це всі 29 правил - увесь файл до останнього рядка. Оголошень, які збігаються й не виграють, немає: щоб програти, треба спершу когось зустріти. Більший такий блок серед 24 організмів лише в cookie-banner.css (291) і в system-page.css (210).

Що саме означає ця цифра

Не «мертвий код». Це третій з трьох різних способів існувати до відкриття, і в цій добірці є всі три: шухляда меню лежить у розмітці 34 екранів і чекає класу; шухляда кошика намальована завжди на трьох; цей оверлей не існує, поки не торкнешся вкладки. Перепис ширинами 360 / 390 / 720 / 1280 бачить тільки перший спосіб, і саме тому кожну таку панель треба відкривати рукою, а не рахувати за екранами.

Немає в коді -> етап 09

Чого бракує

Жодного кольорового екрана - оверлей не входить у вибірку 40 екранів ані як стан, ані як знімок, тож його колір ніхто не бачив у продукті
Демо це рівень 0 - .cback, .wf-catov-all, .wf-catov-sub, .wf-catov-goal, .cg і .gn на стенді лише названі: щоб їх показати, стенду потрібен свій виклик будівника
role="dialog" без aria-modal - будівник ставить роль і мітку, але не каже читачеві екрана, що решта сторінки неактивна
bottom: 57px - те саме число, що й у шухляді меню, при заміряних 59 у нижньої панелі

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.