Основи
Адаптив
Адаптив у цьому продукті вже був: 170 медіазапитів у 53 файлах із 88, і жодного названого. Цей етап його не додає, він його називає, вкладає в токен і зводить 27 різних меж ширини до двох. Значення прочитані з живого :root.
жива ширина цієї сторінки
вимірюю…
Три способи, і точка остання
Драбина читається згори вниз. Береш плинне; не виходить - контейнер; не виходить і це - аж тоді точка, і в аудиті стоїть рядок, чому плинне не змогло. «Так зручніше писати» причиною не є.
| Плинне | Контейнер | Точка | |
|---|---|---|---|
| Питання | вміст сам розтягнеться? | рядок не задовгий? | поведінка інша? |
| Механізм | clamp(), %, minmax(auto-fit), flex-wrap | max-width + margin-inline | @media для оболонки, @container для компонента |
| Скільки в продукті | без обмежень | два: --container-page, --container-text | два: --bp-grid-2col, --bp-shell-wide |
| Чим доводиться | тягнеш ширину, нічого не ламається | вимірювана міра рядка в ch | рядок аудиту, який каже, чому плинне не змогло |
Медіазапит питає про ЕКРАН, контейнерний - про МІСЦЕ
Картка не знає, стоїть вона в одноколонковій стрічці чи в сітці на три, і@media дасть їй неправильну відповідь: на широкому екрані теж буває вузька колонка. Оболонка міряє в'юпорт, компонент міряє свій контейнер, а container-type оголошує той, хто ставить компонент, бо місце не є властивістю цеглини. Сьогодні в системі нуль контейнерних запитів; вони приходять на кроці 4.Дві точки, і обидві названі зміною
Ім'я точки називає що на ній відбувається, а не чийсь пристрій. --bp-tablet і --bp-desktop заборонені як імена: планшет через рік має іншу ширину, а слово «десктоп» повертає в голову модель «три версії продукту» навіть тоді, коли в коді її немає.
| Токен | rem | px | Що на ній вмикається | Звідки число |
|---|---|---|---|---|
--bp-grid-2col | 38.75rem | 620 | ряд карток перестає бути однією колонкою | перепис: 32 входження, тут повертають product-grid, goal-tile, review-item, section-head, coach-order |
--bp-shell-wide | 53.75rem | 860 | оболонка міняє носія навігації, і з нею повертають ще шість поведінок | перепис: 107 входжень, найгустіше число в проєкті |
жива точка: цей блок міняє тло на 620 і додає рядок на 860
до 620 - одна колонка · від 620 - сітка у дві та більше · від 860 - широка оболонка
@media не вміє читати var(), і число тому написане двічі
@media (min-width: var(--bp-shell-wide)) тихо не працює: медіазапит обчислюється до каскаду змінних, помилки немає, правило просто ніколи не спрацьовує. Тому в запиті стоїть літерал, а токен лишається джерелом правди і реєстром. Це не два джерела: на кроці 6 греп проходить кожен @media у design/system/ і кожен мусить дати рівно одне з цих двох чисел. Будь-яке інше число в запиті продукту - дефект.Чому саме дві, і що сталося з рештою
Перепис знайшов 36 сирих значень ширини, 27 після дзеркалення (max-width: 859 це дзеркало межі 860), 18 із них діють у продукті. Ці дві найгустіші з великим відривом. Решта 16 це або дзеркала цих двох, або дрейф, і крок 4 переводить їх сюди. Три шви перекриваються: 520, 620 і 760 написані і як min-width: N, і як max-width: N, тож рівно на N діють обидва правила.Ці токени пари теми не мають, і це не пропуск
Пара:root / [data-theme="dark"] це властивість semantic-рівня, тобто кольору. Ширина, контейнер і відступ це геометрія: вона живе на primitive-рівні й у темі не змінюється. Шукати тут пару не треба. Токени руху (Рух) пари не мають з тієї самої причини: тривалість і крива теж не є кольором.А чи РУХАЄТЬСЯ розкладка на точці - вирішує етап 11
Зміна розкладки на точці це кандидат у момент руху, і дефолт тут «ні»: точка спрацьовує рівно тоді, коли людина тягне край вікна і на вміст не дивиться, а анімація перебудови сітки дорога. Виняток - поверхня, якої на вузькій ширині не існувало (права панель спліт-в'ю, рейка): вона з'являється як елемент, і на неї працює звичайна робота «зв'язок». Рішення ухвалюється на кроці 4 сторінки Рух.Контейнер і міра рядка
Найпомітніший дефект mobile-first продукту на великому моніторі це абзац на 1400px, у якому око не знаходить початку наступного рядка. Лікується не точкою, а контейнером.
згори - у межах
--container-text (68ch), знизу - те саме без міриКреатин моногідрат це найдослідженіша спортивна добавка з усіх, що є на ринку, і саме тому вона стоїть першою в наборі для набору маси. Доза 3-5 грамів на добу, приймати щодня, зокрема у дні без тренування.
Креатин моногідрат це найдослідженіша спортивна добавка з усіх, що є на ринку, і саме тому вона стоїть першою в наборі для набору маси. Доза 3-5 грамів на добу, приймати щодня, зокрема у дні без тренування.
| Токен | Значення | Перший читач | Решта |
|---|---|---|---|
--container-page | 75rem (1200px) | design/_stand.css .wf-page, рамка сторінки кожного кольорового екрана з етапу 07 | .co-wrap (1200) і .cc-wrap (900) досі пишуть своє число, переїжджають на кроці 4 |
--container-text | 68ch | seo-text.css: .lintro і .seotext p | проза сторінок content-* ще сіра, це етап 12 |
Чому ch, а не пікселі
.lintro писав max-width: 760px, а 760px при 14px це близько 95 символів у рядку, далеко за межею 60-75, яку тримає око. 68ch усередині цієї межі й рухається разом зі шрифтом, чого піксельна цифра не вміє. Одиниця системі не нова: banner.css уже міряє .promo .pt у 22ch. А empty-state.css несе запис про ручну правку у двох розмірах, 42ch і 46ch, і це рівно той підпис, який токен прибирає.Сітка: кількість колонок токеном не є
Сітка написана як repeat(auto-fit, minmax(var(--grid-col-min), 1fr)) і рахує колонки сама. На 1100px їх три, хоча такої ширини ніхто не передбачав. Токен --col-count-wide довелося б перемикати, а перемикання це саме те, чого весь цей етап уникає.
жива сітка: кількість колонок не задана ніде, тягніть край вікна
123456
--grid-gap НЕ заведено, і це рішення
Проміжок сітки це --space-16, щабель шкали відступів. Аліас --grid-gap був би другим іменем для одного значення, а tokens.css уже несе правило, яке його вбиває: «значення, вжите один раз, це значення, а не токен». Коли сітці знадобиться ритм, якого шкала не має, вона заробить токен того самого дня.Типографіка теж адаптується, і теж плинно
згори -
--fs-display, плинний; знизу - --fs-30, сталий. Тягніть край вікнаСпортивне харчування
Спортивне харчування
Шкала переїхала з px у rem, значення в значення. При типовому корені 16px кожен щабель дає те саме число, що й до цього, тож жоден екран не зрушив на піксель. Купує це читача, який поставив у браузері шрифт 20px: у px шкала його просто ігнорувала, і він отримував тісну мобільну міру на широкому моніторі.
А сама шкала лишилась сталою, і це навмисно
Шкала загальна:--fs-30 носить і H1 сторінки, і живу ціну в геро-плитці (.hdeal .hd-new), і гліф порожнього стану (.empty .ei). Обгорнути щабель у clamp() означало б змусити іконку дихати разом із в'юпортом, а такого рішення про розмір ніхто не ухвалював. Тому плинний розмір це окремий токен з поіменним списком читачів.| Клас | Читач? | Чому |
|---|---|---|
.lh1 | так | H1 родини листингу, повна ширина сторінки |
.acc-h1 | так | H1 кабінету, повна ширина |
.co-h1 | так | H1 оформлення, повна ширина |
.bb h1 | ні | назва товару стоїть у вузькій колонці поруч із галереєю: її розмір задає місце, а не екран, тож це @container на кроці 4 |
.auth-h1, .coach .cv-h1 | ні | діалог і центрована форма, обидва обмежені близько 420-560. Заголовок, що росте з вікном усередині коробки, яка не росте, це дефект, а не адаптація |
.hdeal .hd-new, .coachbox .cbnew, .empty .ei, .pm-stars .pmst | ні | ціна, цифра і два гліфи. Вони носять щабель 30, бо 30 це їхній розмір, а не бо вони заголовки |
Обидва кінці в rem, і середній член несе rem-доданок
clamp(1.875rem, 1.58rem + 1.3vw, 2.75rem). Чистий vw у середньому члені ігнорує розмір шрифту читача і зупиняє масштабування сторінки зумом, що є провалом WCAG 1.4.4. Коліно поставлене рівно на 360px: 1.58rem + 1.3vw дає там 29.96px, трохи нижче підлоги 30px, тож на 360 clamp повертає підлогу і екран не рухається на піксель. Заміряно tools/tree-diff.mjs --widths=360 проти базового дерева, що відрізнялось цими сімома файлами й нічим більше: 0 зрушених боксів. Стеля досягається на 1440.font-size на точці не перемикається ніколи
Перемикання дає стрибок рівно в ту мить, коли людина тягне край вікна, і лишає ширини між точками, на яких заголовок або завеликий, або замалий. Це та сама драбина, лише для тексту.Оболонка: форма A, обрана власником
Оболонка це шапка плюс носій навігації верхнього рівня плюс контейнер сторінки. Форма на широкій ширині не обирається на смак - вона виводиться з навігаційної моделі етапу 03a трьома питаннями.
| Питання до моделі | Відповідь | Що з неї випливає |
|---|---|---|
| Скільки пунктів верхнього рівня | П'ять, залоковані 2026-06-29: Головна · Каталог · Кошик · Обране · Акаунт. Пошук навмисно не таб - він у постійній верхній смузі | п'ять або менше це критерій форми A |
| Чи є другий рівень, який мусить бути постійно видимим | У глобальної навігації ні: каталог це флайаут, а не постійне дерево. Постійний другий рівень у продукті один - рейка фільтрів від 860, але вона належить сторінці | рейл зліва не потрібен, а на листингу він став би другою лівою колонкою |
| Чи забирає якийсь екран бічний простір під нову поведінку | Так. Split-view потоку тренера, 11 екранів, кандидат кроку 5, хоче ліву колонку під список клієнтів | другий аргумент проти рейла: оболонка зіткнулась би зі split-view |
Рішення: A - пункти переїжджають у шапку, таб-бар на широкій ширині не рендериться
Обрано власником. Будувати не довелось нічого: ця форма вже стояла в коді, і крок її назвав, заміряв і записав. Уся зміна живе у двох файлах оболонки,header.css і tabbar.css, і в жодному файлі екрана.жива оболонка в обох формах: та сама сторінка продукту, дві ширини
Рівно один носій навігації верхнього рівня, і це заміряно, а не написано
tools/tab-walk.mjs тисне Tab і читає document.activeElement. На 1280: носій один, шапка з 17 пунктами, таб-бар дає нуль фокусованих, бо він display: none і йде з дерева доступності разом із пікселями. На 360: носіїв два за ролями - смуга це первинна навігація, шапка це утиліти. Фокус на невидимому: 0 на обох ширинах, tabindex > 0 ніде, порядок фокусу збігається з візуальним.Два пункти стоять в обох носіях на вузькій ширині
«Кошик» - за рішенням IA:navigation.md каже «a slim top bar kept for logo, search and cart». Дубль свідомий, але він усе одно дубль у дереві доступності. «Обране» - а цього специфікація не передбачає: там названо логотип, пошук і кошик. Це знахідка про IA, і виправляти її версткою заборонено: скільки пунктів і де вони - рішення етапу 03a. Навігаційна модель цим етапом не переглядається: міняється розкладка оболонки, а не набір, порядок чи стани пунктів.Сторінки shell.html у цьому проєкті немає, і це сказано вголос
Пак припускає зібрану design/kit/shell.html. Тут її нема і ніколи не було: оболонка живе двома компонентами зі своїми сторінками, header.html і tabbar.html, і обидві щойно отримали підпункт «Поведінка на ширині». Заводити третю сторінку заради показу означало б завести артефакт без читача.Поведінка компонентів: раунд 1, атоми
Крок 4 іде рівнями знизу вгору. Усі чотири раунди закриті. Затриманим лишився один файл, coach-session, і не на питанні, а на кроці: його пара 939/940 це коуч-спліт-в'ю, предмет кроку 5. Колонка «поведінка на ширині» лягає в inventory.md, коли зроблені всі чотири: колонка, заповнена на один рівень із чотирьох, каже «невідомо» про три інші у формі, яка читається як «нема чого сказати».
N = 23, M = 9 адаптуються, K = 14 свідомо ні. M + K = N
Перекличка взята з реєстру компонентів, а не з аудиту ширини: аудит відсортований за екранами, і атом, що стоїть лише на екранах «однаково», у ньому не трапляється жодного разу.| Що сталося | Атоми |
|---|---|
| уже плинні, нічого не змінилось | field · link-row · radio · stack-action |
| запит зник у пандус | button: @media (max-width: 479px) немає; паддінг це clamp(), 12px на 360 і 16px від 860, і перемикання кегля на .btn--l пішло разом із ним |
| запит згорнувся на реєстрову точку | menu: 479 стало 619, дзеркало --bp-grid-2col. Випадайка, що стає повноекранним шитом, це поведінка, тож вона лишається точкою |
| три запити стали одним, і разом із ними пішов дефект | skeleton: 620 / 959 / 1040 стали auto-fill на тих самих двох підлогах, що в product-grid.css. На 1280 справжня сітка дає три колонки по 248px, а скелет малював чотири по 185 - обіцянку, якої сторінка не приносила. Тепер обидві дають 248 x 3, піксель у піксель |
| правило переїхало до свого господаря | status-pill: рядок @media (max-width: 639px){ .oh-status{ grid-area: stat } } переїхав у order-row.css, чий власний запит на тій самій ширині і оголошує grid-template-areas, без яких stat нічого не значить. Вирізано, не скопійовано |
| лишились названим екранним винятком | chip · view-toggle, обидва на --bp-shell-wide |
| свідомо не адаптуються (14) | price · rating · availability · discount · favourite · checkbox · stepper · otp · switch · status-pill · badge · icon · product-thumb · counter. Причина одна на всіх: коробку вбудованого знака задає його власний вміст, і він їде разом із контейнером, що адаптується |
Заміряно, і обіцянка асиметрична
На 360:tools/tree-diff.mjs по всіх 92 кольорових сторінках проти базового дерева, що відрізнялось лише цим раундом - 0 зрушених боксів. На 1280 зрушили три сторінки, і всі три це скелет, що приходить у згоду із сіткою, яку обіцяє.Два екранні винятки поза оболонкою, обидва на реєстровій точці
chip.css ховає чипи цілей від 860 не тому, що їхня коробка стала широкою, а тому, що там на тому самому екрані видно плитки тих самих шести цілей: це факт про те, що показує екран, і контейнерний запит його не спитає. view-toggle.css - те саме: нижче точки листинг має одну колонку, і перемикатись немає між чим.Контейнерних порогів після раунду 1 нуль, і це відповідь
Жодному атому він не знадобився: коробку атома задає його вміст, тож поведінки, залежної від місця, у нього немає. Єдиний кандидат -status-pill на 639 - виявився не тим: перебудовується рядок, а пілюлі він видає комірку.Поведінка компонентів: раунд 2, молекули
N = 27, M = 23 адаптуються, K = 4 свідомо ні. M + K = N
Перекличка була пропозицією, і замір скасував третину її. Сім файлів пішли в неї кандидатами наauto-fit; чотири з них заповнення не бере, і причина в усіх чотирьох одна: repeat(auto-fit, minmax(F, 1fr)) заповнює ряд, а фіксована кількість елементів має збалансовані розкладки лише на своїх дільниках. Шість плиток цілей хочуть 2, 3 або 6 і ніколи 4+2; шість логотипів - 3 або 6; три картки блогу - 1 або 3. Підлоги, яка дає дільники і пропускає решту, не існує.| Що сталося | Молекули |
|---|---|
запит зник у auto-fit | address-card (720) · loyalty-rung (760) · banner .tbanners (720). У всіх трьох кількість або змінна, або дорівнює двом, тож заповнення тут точне, а не приблизне. Перші два читають новий токен --grid-col-min-panel, третій пише літерал 8rem, бо читач у нього один |
| запит зник у базове правило | restock-note: 419 немає. flex-wrap піднявся в базу, поле несе підлогу 13rem, і ряд ламає свою лінію сам |
| три розміри стрибали на точці, тепер ідуть пандусом | banner .recbanner: гап, портрет і font-size - усі троє стрибали на 559. Кожен пандус кінчається тим самим числом, що стояло там раніше, тож обидва кінці не зрушили, а перестали бути урвищем тільки 200px між ними. .hpromo min-height вийшла зі свого запиту так само |
| складено на реєстрову точку | goal-tile 960 -> 860 · blog-card 720 -> 620 · spec-table 720 -> 620 · banner 720 -> 620 · product-card 559 -> 619 · order-row 639 -> 619 |
| уже на реєстровій точці | section-head · review-item · gallery · brand-logo · toolbar, чиї три окремі блоки 860 стали одним |
| уже плинні, нічого не міняли | empty-state · toast · cart-row · client-row · cert-thumb · desc-block · related |
| затримано на власникові (2) | trust-strip (479, 559, 719, 720, 1180) і seo-text (759, 760). Три відкриті питання, нижче |
| свідомо не адаптуються (4) | breadcrumb · pagination · filter-group · qa-item - і це зміряно, а не прочитано |
Числа
До раунду рівень молекул тримав 37 запитів на 14 різних ширинах, чотири з них у реєстрі. Після: 30 запитів на 11 ширинах, і всі сім, що досі поза реєстром, стоять у двох затриманих файлах. Більше ніщо на цьому рівні не питає про ширину, якої реєстр не називає.Четвірку «без механізму» зміряно, бо прилад шукає п'ять маркерів плинного, і рядковий текст не з них
breadcrumb, 91 екран, найносиміша молекула продукту: на 360 стежка переносить рядок рівно на 7 сторінках із 72 - три coach-order і чотири product, 47.2 -> 66.4px - і не переповнює ніде. pagination: нуль рефлоу на всіх 9; .pages це 87.2px і на 360, і на 1280. filter-group: на 360 у групи немає коробки взагалі (0x0), на 1280 вона 238 x 345.7 - адаптується її місце. qa-item: 157.8 -> 113px, це переноситься текст.Дефект, який знайшов цей раунд, у файлі, який відмовлявся, щоб його чіпали
restock-note ніс запит max-width: 419 і коментар кроку 7.64 на його захист: «на 420, 440, 460 і 479 цей ряд НЕ переноситься, його двоє дітей виходять 26 + 350». Ці числа і є дефект. Кнопка носить btn--full, її width: 100% вигравала на флекс-лінії, і поле e-mail було 26 пікселів завширшки від 420 і до 1600: 26 + 410 на 480, 26 + 650 на 720. Запит нижче 419 це ховав, тому ніхто ніколи й не питав.Контейнер сторінки НЕ монотонний за шириною вікна, і виявило це саме заповнення
Перша підлога для--grid-col-min-panel була 22rem. Вона сходилась із запитом на 360 і на 1280 - двох ширинах, на які всі дивляться - і розгортка знайшла її хибною між ними: кабінет бере собі колонку навігації на 960 і лишає списку адрес коробку 628px, де підлога 352 вміщає одну картку, а запит вміщав дві. На 19rem відтворюються всі кількості колонок, які давав запит, і додається одна, якої він не давав. Медіазапит питає вікно і не бачить 216px, які забрала оболонка; плинна підлога питає коробку і не може їх не побачити.Заміряно, і обіцянка асиметрична
tools/tree-diff.mjs по всіх 92 кольорових сторінках проти базового дерева, що відрізнялось лише десятьма файлами цього раунду, на 360 і 1280: 6 різниць на 184 порівняння, і кожну названо. Чотири - це .tbanners на 1280, де обчислений список треків набув двох записів 0px: п'ять справжніх треків це 196.797 x4 + 196.812 до і після, бо auto-fit згортає треки, для яких немає елемента, а обчислене значення їх усе одно перелічує. Дві - на product-oos: на 360 змінилась лише flex-basis, а обидві коробки лишились 328 x 44 і 328 x 64; на 1280 поле пішло з 26px на 284px, і це та сама полагоджена діра. На 360 не зрушив жоден бокс.Три питання затримано, і два файли з ними
1. Число талісмана. Одна поведінка - «талісман з'являється, коли поруч є місце» - записана двома неузгодженими числами, 759/760 уseo-text і 1180 у trust-strip, і жодного немає в реєстрі. Це питання про МІСЦЕ, тож чесний механізм тут @container, і це були б перші два контейнерні пороги системи; згорнути обидва на 860 - інша відповідь. 2. Розділювачі смуги довіри. Смуга йде 1 -> 2 -> 4 колонки, а волосини між клітинками це тіні через nth-child, які мусять знати кількість колонок; auto-fit робить її невідомою для CSS. Або дві точки лишаються і сідають на 620/860, або лінії перемальовуються рамкою клітинки - і це міняє те, як вони намальовані, тобто потребує піксельної звірки. 3. .cs-act на 559 - це переноситься ряд дій, а patterns/action-row.css володіє переносом для 53 імен контейнерів із кроку 9.1: схоже, правило належить раунду 4.Два сказано вголос, а не полагоджено тихо
.listing{ grid-template-columns: 240px 1fr } живе в toolbar.css і є рамкою екрана лістингу, а не тулбара: воно належить оболонці кроку 3, і переносити його тихо всередині раунду молекул означало б це сховати. А ще одну знахідку знято при перевірці: розгортка сказала, що .addr-2col не стоїть на жодній кольоровій сторінці, що читається як «мертвий». Він стоїть - у стенді, на client-dialog.html, а корпус цього приладу це продукт. Нуль від приладу, який не бачить класу, не є нулем; прилад тепер шукає в стенді те, чого не знайшов на продукті, і каже, де саме знайшов.Контейнерних порогів після раунду 2 і далі нуль
Жодній молекулі він теж не знадобився: кожна поведінка, залежна від місця, на цьому рівні виявилась або фіксованою кількістю (яку точка каже краще), або заповненням (якеauto-fit каже взагалі без порогу). Єдиний справжній кандидат - талісман - це перше з трьох затриманих питань.Поведінка компонентів: раунд 3, організми
N = 34, M = 32 адаптуються, K = 2 свідомо ні. M + K = N
Найважчий рівень із чотирьох, і він упав удвічі двічі. До раунду 34 файли організмів тримали 86 запитів на 19 різних ширинах, 15 із них поза реєстром - більше, ніж атоми і молекули разом. Після: 80 запитів на 7 ширинах, 3 поза реєстром, і всі три стоять у затриманих файлах. По всійdesign/system/ тепер 117 запитів на 13 ширинах, і кожне позареєстрове число живе рівно в чотирьох файлах: trust-strip і seo-text (три питання власника з раунду 2), coach-session (крок 5) і pdp-tabs (у парі з талісманом).| Що сталося | Організми |
|---|---|
| два запити видалено, бо вони ніколи не малювали | product-grid - найбільша знахідка раунду, нижче |
| запит зник у пандус | product-grid і skeleton (перемикач підлоги став --grid-col-fluid) · hero (min-height 130/164) · checkout-form (кегль, гліф і бічний паддінг) |
| друга оболонка склалась на першу | account-shell: 960/959 → 860/859 і 640 → 620. Винне skeleton 959 поїхало разом |
| складено на реєстрову точку | auth-dialog 720/719 → 860/859 (вісім блоків) · coach-verify 760 → 860, 520 → 620 · footer 479 → 619, 720 → 860 · coach-landing 980 → 860, 559 → 619 · coach-clients · coach-cabinet · plan-card · system-page · buy-box (п'ять блоків) · city-dialog · client-dialog · coach-session · checkout-form |
| уже на реєстровій точці | header · nav-drawer · tabbar · mega-menu · filter-rail · filter-sheet · buy-bar · cart-drawer · coach-order · cat-overlay · cookie-banner |
| уже плинні або тримаються контейнером | price-slider · coach-tariff · review-modal · upsell |
| затримано навмисно | coach-session 939/940 - коуч-спліт-в'ю, предмет кроку 5 · pdp-tabs 1180 - те саме число, що в затриманого талісмана |
| свідомо не адаптуються (2) | overlay · coach-wishlist |
Найбільша знахідка: product-grid ніс два мертві запити і сітку, яка йшла назад
1) Мертві. Структурна половина файлу писала repeat(3, 1fr) на 620 і repeat(4, 1fr) на 1040, а кольорова половина нижче перевизначає .prow із тією самою вагою - тож жоден із двох не малював ніколи. Перепис кроку 1 порахував 1040 діючою межею продукту; вона не діяла, і сказати це міг лише замір виходу.2) Сітка губила колонку, коли вікно ширшало. Зміряно на десяти сторінках: 1 колонка на 320, 2 на 360, 3 на 520, 2 на 620, 3 на 680, 4 на 880. На 620 підлога стрибає зі 150 на 200 і коробка 588 перестає вміщати три - і це на точці, названій «ряд карток перестає бути однією колонкою». Одна підлога цього не лікує (три на 620 вимагають 185 або менше, чотири на 1280 - 194 або більше), тож дефектом є сам перемикач, і його замінив пандус. Тепер ряд читається 1 → 2 (360) → 3 (580) → 4 (880) → 5 (1320), монотонно, а 360 і 1280 не зрушили. Ціна названа: стан «три колонки» на 520-619 стає двома по 244.
Дефект старший за етап - обидві підлоги і мертва пара прийшли з розколу 08 - і пережив етапи 07, 08 і 09, бо звірка на двох ширинах, 360 і 1280, провалля на 620 не бачить.
Кабінет це друга оболонка, і складання було рішенням за замовчуванням
Від своєї точки кабінет відрощує колонку навігації 268px, а нижче ті самі посилання стають горизонтальним скролером. Число було 960 і в жодному реєстрі не стояло. Пак дозволяє третю точку, але лише як рішення власника, назване вголос - його не було, тож число склалось на--bp-shell-wide. Спершу зміряно: на 860 колонка навігації лишається 268, колонка вмісту виходить 528 проти сьогоднішніх 628, нового обрізання немає. Пара мусила їхати разом - скласти лише одну половину означало б покласти смугу 1253px у колонку 268px - і винне skeleton 959, яке раунд 1 лишив саме через цю пару, поїхало з нею.Де в складання було два кандидати, вибирав замір
auth-dialog пішов на 860, а не на 620, бо на 620 модал обмежений вікном: панелі виходять 243.8 і 310.3, і колонка форми стає вужчою за однопанельну форму, яку вона замінила (618); на 860 вони 349.4 і 444.6. coach-verify - з тієї ж причини і з жорсткішої: примусовий ряд .cv-split на 620 обрізає .opt-tiles, 324 у 319. Самі плитки пішли в інший бік, на 620, де вони по 174.7 і не обрізають нічого.Три нулі прочитано, а не повірено
comp-width.mjs показує cat-overlay, cookie-banner і system-page на нулі екранів, і жоден із трьох не мертвий. Перші два народжуються в акті: їх ставить _nav.js на подію, тож у завантаженому DOM, який міряє обхід, їх немає. У третього один екран, wireframes/system.html, і кольорового двійника в нього немає взагалі. Три нулі, три різні причини, і жодна з них не «видали файл».Поведінка компонентів: раунд 4, патерни
N = 1, M = 1, K = 0, і це результат, а не пропуск
patterns/action-row.css це єдиний патерн системи, і в ньому нуль медіазапитів: flex-wrap: wrap стоїть у базовому правилі з кроку 9.1, а .actions--even каже «поділіть ширину» модифікатором розмітки, а не числом. Композиція, зібрана з компонентів, які вже вміють ширину, власної відповіді на неї не має. Одне правило перевірено і лишилось не тут: .cs-act у trust-strip.css нижче точки бере всю лінію і ділить її порівну - друга половина цього і є .actions--even, але модифікатор не вмикається за шириною без запиту, тож правило лишається у свого контейнера, складене на 619.| Затриманий файл | Було | Стало | Чому саме так |
|---|---|---|---|
seo-text | 760 / 759 | 860 / 859 | талісман біля SEO-тексту складається чисто: на 860 текстова колонка виходить 500 проти 400 на 760 сьогодні, не обрізає нічого |
pdp-tabs | 1180 | немає | 1180 робило рівно одне - розширювало праву колонку з 540 до 580. 40px це РОЗМІР, тож він пандус між тими самими значеннями: 248 + 540 на 860 і 312 + 580 на 1180, до і після |
trust-strip | 479, 559, 719/720, 1180 | 619, 619, 859/860, 860 + два пандуси | нижче |
coach-session | 939 / 940 | 860 / 859 | закрито кроком 5: смуга клієнтів переїхала всередину сітки і стала вертикальною рейкою. Це була остання пара поза реєстром |
Смуга довіри - там, де талісман відмовився складатись, і замір сказав це до правки
Увімкнений на 860 із повним резервом 150px, він робить чотири клітинки по 167 і дві з них обрізають текст. Резерв - це те, що смуга віддає, тож пандусом стає резерв: 108px на 860, 150px на 1180, а кроп-бокс ведмедя їде разом (108 → 180), бо інакше 180-піксельний ведмідь звисав би на 72px над четвертою клітинкою. Тоді на 860 клітинки виходять 177.5 і не обрізає нічого, а на 1180 обидва повертаються до повного розміру. Кроп-бокс для того й існує, щоб різати цього ведмедя, тож різати сильніше там, де менше місця, - це механізм робить свою роботу.А кількості колонок смуги лишились ТОЧКАМИ
Волосини між клітинками намальовані тінями черезnth-child, тобто мусять ЗНАТИ кількість колонок - а auto-fit саме той механізм, що робить її невідомою для CSS. Перемалювати лінії рамкою клітинки було іншим шляхом і його не взято: це міняє те, як намальована кожна лінія смуги, а приймання раунду міряється в пікселях. Третя точка була іншою відповіддю на талісмана, двічі, і її не взято: пак дозволяє одну, але лише як рішення власника, назване вголос.Де система стоїть після чотирьох раундів
117 запитів на ЧОТИРЬОХ ширинах по всіх файлахdesign/system/: 619, 620, 859, 860. Це все - пару 939/940 закрив крок 5, і більше нічого поза реєстром немає. Перепис кроку 1 знайшов 27 різних значень ширини, що діяли в продукті, і жодного токена під жодне з них; лишилось два токени, два їхні дзеркала і одна свідомо відкладена поведінка.tools/bp.mjs це те, що тримає стан: він читає реєстр із tokens.css і питає кожен запит продукту дати одне з його чисел, падає на @media у файлі екрана, на var() усередині запиту і на @container без жодного оголошеного container-type. Усі чотири класи доведено падінням - їх вносили навмисно і відкочували. Кожен оголошений список усередині нього сам перевірений на те, що покриває бодай щось.Заборона записана у двох місцях
design/system/CLAUDE.md, правила 11 і 12, та architecture.md, розділ J, «A new ADAPTATION». Правило 12 - те, якого не бачить жоден grep і яке потрібне кожному читачеві: КІЛЬКІСТЬ і ПОВЕДІНКА можуть стрибати на точці, РОЗМІР не може.Крок 5: нова поведінка - спліт-в'ю тренера
Аудит назвав вісім поведінок для широкої ширини, і сім із них уже стояли в коді після раунду 4. Восьма - ця. Джерело не вподобання: головний job каже дослівно «build a complete order for each client in one session», а на телефоні тренер ходить між списком клієнтів і кошиком клієнта туди-сюди, щоразу гублячи місце.
Поріг для спліта - не поріг патерна, і пак каже це прямо
Патерну треба три екрани; спліту - дві й більше пар «список + деталь» або одна пара головного флоу, бо спліт тягне новий стан, керування фокусом і роботу з історією. Тут виконано обидві умови, і дві пари - це різні питання, а не одне двічі.| Пара | Багато | Один | Рамка |
|---|---|---|---|
| клієнти | .clist - збережені клієнти | .cldetail - ціль, контакти, нотатки | .clsplit |
| сесія | .ctabs - клієнти цієї сесії | .cs-panel - кошик того клієнта | .cs-grid |
Екран-деталь НЕ скасовано, і це правило пака, а не ввічливість
coach-client.html лишає власний URL, власні хлібні крихти і SEO-блок A-E. Нижче точки «Профіль» - звичайне посилання на нього; вище точки той самий запис додатково з'являється поруч зі списком. Поділене посилання й далі відкриває повний екран.Панель відкривається ПОРОЖНЬОЮ, і рядок - це нова продуктова копія
На потоці «один екран за раз» стану «нічого не вибрано» не існує: ви або в списку, або в клієнті. Спліт цей стан вигадує, тож рядок написано заvoice.md і він живе в microcopy.md - шість рядків, voice.html перезібрано тим самим кроком. Автовибір першого клієнта був іншим варіантом і його не взято: він кладе на екран запис, якого ніхто не просив, а на списку зі змінним порядком це щоразу інший запис.У рамки й панелі ОДНА редакція, і це функція
Три екрани клієнтів несуть той самий список. Панель, скопійована в три файли, - це три редакції, і третя дрейфує першою. ТомуwfClientSplit() знаходить .clist, сам загортає його в .clsplit і сам будує .cldetail. Екран лише кличе функцію і не каже про ширину нічого.Немає списку - немає спліта, і це правило, а не пропуск. У
coach-clients-empty і -error карток немає, тож поруч нема чого ставити. А -loading рамку отримує: без неї сторінка стрибнула б на 860 тієї миті, коли приходять дані - список склався б із власних колонок у рейку, і нізвідки з'явилась би панель. Скелетний варіант читається з aria-busy, а не з імені файла.Пара сесії закрила останнє число поза реєстром
coach-session.css тримав 940 і 939 крізь усі чотири раунди навмисно - їх мав витратити крок 5. Смуга клієнтів переїхала всередину .cs-grid на всіх восьми екранах сесії, і від --bp-shell-wide вона стає вертикальною рейкою в лівій колонці 20rem зі зведенням сесії під нею - зведення підсумовує саме цей список, - а кошик активного клієнта бере решту. Звис таба в 1px, який існує, щоб приклеїти таб до панелі під ним, у рейці вимкнено: панелі під ним там немає.Далі впав
tools/bp.mjs, і це холостий контроль у роботі. Його масив EXCUSED усе ще називав 939 і 940 після того, як ці числа перестали існувати, а список, що називає те, чого ніхто не пише, читається як покриття. Масив тепер порожній.Що це міряє, після того як критика це полагодила
Спліт більше не вмикається на точці оболонки. Він питає два питання в порядку їхньої ваги:@media (min-width: 860px) першим, бо двопанельне робоче місце належить ДЕСКТОПНІЙ ОБОЛОНЦІ, і @container (min-width: 41rem) всередині, бо навіть у тій оболонці місце не гарантоване.41rem - це виведення, а не пристрій. Найменша панель, яку варто відкривати, - та, на якій
.cd-row ще тримає підпис і значення поруч, тобто власний контейнерний поріг цього ж файла, 22rem. Додаємо рейку і зазор: 17.5rem + 1.5rem + 22rem = 41rem. Співвідношення записане в коментарі, бо запит його не втримає: @container, як і @media, обчислюється до змінних, тож ні calc(), ні var() усередині умови немає.| До критики | Після | |
|---|---|---|
| вмикається на | в'юпорт 860 | в'юпорт 990, де .acc-main уперше дає 658 |
| деталь там | 224px, вужче за рейку 280 | 354px, ширше за поріг рейки |
| що вирішує | вікно | бокс, який оболонка справді лишає |
Голий контейнерний запит був НЕПРАВИЛЬНИЙ, і прилад спіймав це за один прогін
Питати лише@container означало вмикати спліт нижче 860 і вимикати між 860 і 960: нижче 860 в оболонки немає колонки навігації, тож .acc-main це повні 828 і тест проходить; на 860 оболонка забирає свої 268 і бокс падає до 528. Спліт з'являвся, зникав і повертався. Місце немонотонне у в'юпорті - той самий факт, що змусив --grid-col-min-panel опуститись до 19rem на кроці 4, - і одні ворота цього не бачать. Тому воріт двоє.Що лишилось, і це стенда, а не продукту
Розгортка кроком 10px від 320 до 1600 дає в кольоровій копії три переходи: вмикається на 990 (бокс 658), вимикається на 1080 (бокс 532), вмикається знову на 1210 (бокс 662). Падіння на 1080 - це власна рейка роадмепу СТЕНДА, яка з'являється і перебудовує сторінку. У продукті такої рейки немає, і розгортка дає один перехід на 990. Прилад друкує кожен перехід разом із боксом, який його спричинив, тож це не стане тихо нормою; сама рейка лежить уbacklog.md як те, що прибрало б мерехтіння.Що ще полагодила критика
Панель відповідала не на те питання. Рядки були Ціль / Телефон / E-mail / Нотатки, тобто контактна книга, а картка в рейці над нею несла «8 замовлень · останнє 12 черв. 2026» - і панель, яка її деталізує, обидва факти викидала. Стало: Ціль · Замовлень · Останнє замовлення, нотатка тренера піднята в помічену смугу.cc-note (компонент, який coach-client.html для цього вже вживав), телефон і пошта - за «Профіль».Дві назви на одне місце і загублена особистість. «Почати сесію» = «Нова сесія», «Уся картка клієнта» = «Профіль», і жодне не несло
?client=, який цей самий крок і винайшов. Тепер одна назва на місце, а ?client= проставляється і на кнопки панелі, і на посилання самої картки.Картка не була кнопкою.
role="button" містив два справжні посилання всередині, чого роль кнопки не дозволяє. Контрол переїхав на ІМ'Я клієнта - єдину доступну назву, яку цей контрол міг би хотіти, - а картка лишила клік по всій поверхні мишею, бо це не коштує жодної ARIA-заяви.Двом новим контролам бракувало кільця. Обидва падали в дефолтний синій Chrome. Тепер
--ring-focus-control, те саме, що бере кожен контрол системи.Смуга сесії заявляла tablist і ним не була. Обробника не існувало взагалі. Таб став справжнім місцем призначення з
?client=, а поточний помічено aria-current - рівно тим самим знаком, що й поточна картка клієнта. Один акт, одна модель, один контракт.Скелет обіцяв те, що не прийде - малював аватар і заповнену картку даних, а приходила порожня підказка. Тепер це форма самої порожньої коробки.
Чужий
?client= мовчав - тепер каже «Клієнта не знайдено» і чистить URL.96px порожнечі в рейці сесії: панель охоплює обидва рядки, тож неявні
auto auto ділили її висоту між ними. grid-template-rows: auto 1fr - зведення сіло під смугу, проміжок 20px.Дефект, якого не знайшов жоден прилад
.cldetail-empty був приватним правилом у coach-clients.css - пунктирна рамка, radius-12, по центру, - тобто .emptybox.mini, написаний удруге всередині файла іншого компонента. Ціну заплачено одразу й мовчки: розмітка вже несла .et і .es, але empty-state.css пише їх як .emptybox .et, тож під приватним батьком вони не збігались ні з чим. Заголовок і текст малювались одним розміром і читались як один абзац - на екрані, який кожен прилад називав чистим, бо жоден прилад не питає, чи заголовок виглядає як заголовок. Знайдено тим, що сторінку відкрили. Стан тепер .emptybox mini, а приватне правило видалено, а не виправлено.Прилад: tools/split.mjs
Спліт заявляє дві речі одночасно - рамка справді має дві колонки, і дві панелі справді в них сидять, - і жодної не видно в css, тож обидві питаються в getBoundingClientRect. Друга половина - перекличка: прилад обходить увесь корпус продукту і падає на будь-якій сторінці, що несе СПИСОК і стоїть поза рамкою. Саме ця перевірка спіймала б сім екранів сесії, які цей крок перевів, і саме вона спіймає восьмий, коли його додадуть.| Клас провалу | Доведено тим, що | Що надрукував |
|---|---|---|
| носій поза рамкою | .ctabs винесено назад на coach-session-oos | .ctabs поза .cs-grid |
| оголошена рамка нікому не належить | .clsplit перейменовано на .no-such-frame | не стоїть на жодній сторінці продукту |
| одна колонка вище точки | другу доріжку знято з .cs-grid | широка ширина, а колонок 1 |
| обрізає всередині рамки | та сама правка | обрізано ctabs 118>0 |
| сторінка їде вбік | min-width: 1700px на .cldetail | горизонтальна прокрутка сторінки |
Дві хибні версії, обидві в шапці приладу
Перекличка спершу була grep-ом по джерелу: на екранах сесії вона відповідала правильно і на трьох із чотирьох екранів клієнтів відповіла б «спліта немає», хоча він там є, - боwfClientSplit() будує їхню рамку на завантаженні і жодного з двох класів у тих файлах немає взагалі. А перший замір сесії вприскував ту розкладку, яку міряв: замість рухати в'юпорт він заштовхував у сторінку власний стиль-перекриття, і потім повідомив рейку 320 і кошик 488 поміняними місцями плюс обрізання qa-row 324 > 258, якого не існує на жодній ширині.Перепис і аудит: три таблиці кроку 1
Повні таблиці лежать у design/kit/docs/responsive.md. Нижче - те, що з них видно з одного погляду.
| Корпус | Файлів | Точка | Плинне | Контейнер | Доля |
|---|---|---|---|---|---|
design/system/ | 88 | 170 | 113 | 316 | дім, тут воно й має жити |
design/*.html | 92 | 1 | 10 | 13 | чуже місце, переїжджає на кроці 4 |
design/kit/ | 104 | 56 | 115 | 223 | стенд, у правила продукту не входить |
wireframes/ | 143 | 176 | 210 | 390 | заморожений свідок, звідси нічого не переносимо |
Чого немає взагалі
@container 0 · container-type 0 · clamp() 0 · rem усередині медіазапиту 0 · токен ширини, контейнера чи сітки 0. Усі 27 меж у px, усі міряють в'юпорт. minmax( зустрічається 27 разів, а auto-fit лише тричі: більшість сіток у системі несе фіксовану кількість колонок.| Категорія аудиту | Екранів зі 141 |
|---|---|
| ОДНАКОВО | 62 |
| ШИРШЕ · сітка | 24 |
| ШИРШЕ · повітря | 16 |
| НОВА ПОВЕДІНКА | 39 |
39 це набагато більше за три-чотири, і ось чесне читання
39 це число екранів. Число поведінок вісім, і сім із них уже стоять у коді: оболонка міняє носія навігації на 860 · рейка категорій з головної · мега-меню флайаутом замість шухляди · рейка фільтрів замість шита на 860 · PDP кладе галерею і бай-бокс поруч і прибирає липку смугу · кошик панеллю замість шухляди на 620 · оформлення формою і підсумком поруч. Восьму збудував крок 5: split-view потоку тренера, 11 екранів. Джерело не вподобання - головний job каже дослівно «build a complete order for each client in one session», а на телефоні тренер ходить між списком клієнтів і кошиком клієнта туди-сюди.Число одинадцять не змінилось, а склад змінився - і саме це варто сказати вголос. Аудит поклав у ці одинадцять два екрани-ДЕТАЛІ (
coach-client, coach-client-loading) і лишив за ними два порожні стани сесії. Крок 5 вирішив навпаки в обох випадках, і рішення прийшло з правила паку, а не зі смаку: спліт не скасовує екран-деталь, тож coach-client лишає власний URL і бере контейнер 900px, а смуга сесії несе рамку в кожному стані, бо сторінка, що виростила б другу колонку в момент приходу даних, стрибнула б тренеру під руками. Заміряно, а не заявлено: .cs-grid дає 328px на 360 і 320px 692px на 1280 і на coach-session-empty, і на coach-session-addempty.Реєстр перезаміряно на кроці 4, і перший був неправильний тричі
Опубліковане тут число «13 компонентів нічого не знають про ширину» було хибним. Перший реєстр питав сірий корпус, де власних імен системи немає взагалі (мапа перейменувань етапу 08 пройшла лише поdesign/*.html), тож button.css відповів «нуль екранів». Другий читав class="..." із джерела - 68 рядків із 85 розійшлись із живим заміром, бо скрипти дописують класи на завантаженні. Третій брав кожен клас у файлі, і otp.css відповів «91 екран», бо його селектори називають ще й .field. Якір це клас, яким володіє рівно один файл, і питати треба браузером по кольоровому корпусу. Прилад: tools/comp-width.mjs, усі три хибні версії в його шапці. Чотири файли не мають власного класу - badge, icon, product-thumb, counter - і друкують -, а не 0.| Рівень | Компонент | Файл | Екранів | Найширша категорія | Ширина сьогодні |
|---|---|---|---|---|---|
| атом | Кнопка | button.css | 90 | НОВА ПОВЕДІНКА | плинне |
| атом | Поле | field.css | 89 | НОВА ПОВЕДІНКА | плинне |
| атом | Чип | chip.css | 86 | НОВА ПОВЕДІНКА | @media 860 · плинне |
| атом | Дія стовпчиком | stack-action.css | 86 | НОВА ПОВЕДІНКА | плинне · контейнер |
| атом | Рядок посилань | link-row.css | 85 | НОВА ПОВЕДІНКА | плинне |
| атом | Ціна | price.css | 45 | НОВА ПОВЕДІНКА | нічого |
| атом | Рейтинг | rating.css | 22 | НОВА ПОВЕДІНКА | нічого |
| атом | Мітка наявності | availability.css | 22 | НОВА ПОВЕДІНКА | нічого |
| атом | Бейдж знижки | discount.css | 21 | НОВА ПОВЕДІНКА | нічого |
| атом | Обране | favourite.css | 21 | НОВА ПОВЕДІНКА | нічого |
| атом | Меню вибору | menu.css | 12 | НОВА ПОВЕДІНКА | @media 619 · плинне · контейнер |
| атом | Скелетон | skeleton.css | 12 | НОВА ПОВЕДІНКА | @media 620, 959 · плинне · контейнер |
| атом | Чекбокс | checkbox.css | 12 | НОВА ПОВЕДІНКА | нічого |
| атом | Лічильник кількості | stepper.css | 12 | НОВА ПОВЕДІНКА | нічого |
| атом | Статус-пілюля | status-pill.css | 11 | НОВА ПОВЕДІНКА | нічого |
| атом | Перемикач вигляду | view-toggle.css | 11 | НОВА ПОВЕДІНКА | @media 860 |
| атом | Радіо | radio.css | 9 | НОВА ПОВЕДІНКА | плинне |
| атом | OTP-комірка | otp.css | 4 | ОДНАКОВО | нічого |
| атом | Перемикач | switch.css | 2 | ОДНАКОВО | нічого |
| атом | Бейдж | badge.css | – | без свого класу | нічого |
| атом | Іконка | icon.css | – | без свого класу | нічого |
| атом | Мініатюра товару | product-thumb.css | – | без свого класу | нічого |
| атом | Лічильник | counter.css | – | без свого класу | нічого |
| молекула | Хлібні крихти | breadcrumb.css | 91 | НОВА ПОВЕДІНКА | нічого |
| молекула | Заголовок секції | section-head.css | 28 | НОВА ПОВЕДІНКА | @media 620 · плинне · контейнер |
| молекула | Порожній стан | empty-state.css | 27 | НОВА ПОВЕДІНКА | плинне · контейнер |
| молекула | Щабель лояльності | loyalty-rung.css | 26 | НОВА ПОВЕДІНКА | @media 760 · плинне |
| молекула | Картка товару | product-card.css | 22 | НОВА ПОВЕДІНКА | @media 559, 619, 859, 860 · плинне · контейнер |
| молекула | Тост | toast.css | 20 | НОВА ПОВЕДІНКА | плинне · контейнер |
| молекула | SEO-текст | seo-text.css | 17 | НОВА ПОВЕДІНКА | @media 759, 760 · контейнер |
| молекула | Відгук | review-item.css | 13 | НОВА ПОВЕДІНКА | @media 620, 860 · плинне · контейнер |
| молекула | Рядок кошика | cart-row.css | 11 | НОВА ПОВЕДІНКА | плинне |
| молекула | Група фільтра | filter-group.css | 11 | НОВА ПОВЕДІНКА | нічого |
| молекула | Тулбар | toolbar.css | 11 | НОВА ПОВЕДІНКА | @media 860 · плинне |
| молекула | Пагінація | pagination.css | 9 | НОВА ПОВЕДІНКА | нічого |
| молекула | Банер | banner.css | 6 | НОВА ПОВЕДІНКА | @media 559, 720 · плинне · контейнер |
| молекула | Картка блогу | blog-card.css | 6 | НОВА ПОВЕДІНКА | @media 720 |
| молекула | Смуга довіри | trust-strip.css | 5 | НОВА ПОВЕДІНКА | @media 479, 559, 719, 720, 1180 · плинне · контейнер |
| молекула | Рядок клієнта | client-row.css | 5 | НОВА ПОВЕДІНКА | плинне · контейнер |
| молекула | Галерея | gallery.css | 4 | НОВА ПОВЕДІНКА | @media 859, 860 · плинне · контейнер |
| молекула | Плитка цілі | goal-tile.css | 4 | НОВА ПОВЕДІНКА | @media 620, 960 · плинне |
| молекула | Логотип бренду | brand-logo.css | 4 | НОВА ПОВЕДІНКА | @media 620 · плинне · контейнер |
| молекула | Мініатюра сертифіката | cert-thumb.css | 3 | НОВА ПОВЕДІНКА | плинне |
| молекула | Картка адреси | address-card.css | 3 | ШИРШЕ | @media 720 · плинне |
| молекула | Схожі товари | related.css | 3 | НОВА ПОВЕДІНКА | плинне |
| молекула | Рядок замовлення | order-row.css | 2 | ШИРШЕ | @media 639, 860 · плинне · контейнер |
| молекула | Таблиця складу | spec-table.css | 2 | НОВА ПОВЕДІНКА | @media 720 · плинне |
| молекула | Блок опису | desc-block.css | 2 | НОВА ПОВЕДІНКА | плинне · контейнер |
| молекула | Запитання | qa-item.css | 2 | НОВА ПОВЕДІНКА | нічого |
| молекула | Нотатка про поповнення | restock-note.css | 2 | НОВА ПОВЕДІНКА | @media 419 · плинне · контейнер |
| організм | Хедер | header.css | 86 | НОВА ПОВЕДІНКА | @media 859, 860 · плинне · контейнер |
| організм | Шухляда меню | nav-drawer.css | 86 | НОВА ПОВЕДІНКА | @media 860 · плинне |
| організм | Таб-бар | tabbar.css | 86 | НОВА ПОВЕДІНКА | @media 859 · контейнер |
| організм | Мега-меню | mega-menu.css | 86 | НОВА ПОВЕДІНКА | @media 859 · плинне · контейнер |
| організм | Діалог міста | city-dialog.css | 86 | НОВА ПОВЕДІНКА | @media 479 · плинне · контейнер |
| організм | Оверлей | overlay.css | 86 | НОВА ПОВЕДІНКА | нічого |
| організм | Футер | footer.css | 81 | НОВА ПОВЕДІНКА | @media 479, 720 · плинне · контейнер |
| організм | Смуга покупки | buy-bar.css | 69 | НОВА ПОВЕДІНКА | @media 859, 860 · контейнер |
| організм | Форма чекауту | checkout-form.css | 36 | НОВА ПОВЕДІНКА | @media 479, 480, 559, 860 · плинне · контейнер |
| організм | Оболонка кабінету | account-shell.css | 33 | НОВА ПОВЕДІНКА | @media 640, 959, 960 · плинне · контейнер |
| організм | Сітка товарів | product-grid.css | 21 | НОВА ПОВЕДІНКА | @media 620, 1040 · плинне |
| організм | Рейка фільтрів | filter-rail.css | 15 | НОВА ПОВЕДІНКА | @media 859, 860 · контейнер |
| організм | Діалог клієнта | client-dialog.css | 13 | НОВА ПОВЕДІНКА | @media 479 · плинне · контейнер |
| організм | Шит фільтрів | filter-sheet.css | 11 | НОВА ПОВЕДІНКА | @media 860 |
| організм | Повзунок ціни | price-slider.css | 11 | НОВА ПОВЕДІНКА | плинне |
| організм | Клієнти тренера | coach-clients.css | 10 | НОВА ПОВЕДІНКА | @media 520, 640, 860 · плинне · контейнер |
| організм | Замовлення тренера | coach-order.css | 9 | НОВА ПОВЕДІНКА | @media 620 · плинне · контейнер |
| організм | Кабінет тренера | coach-cabinet.css | 8 | НОВА ПОВЕДІНКА | @media 520, 720 · плинне · контейнер |
| організм | Сесія замовлення | coach-session.css | 8 | НОВА ПОВЕДІНКА | @media 479, 859, 939, 940 · плинне · контейнер |
| організм | Вкладки товару | pdp-tabs.css | 8 | НОВА ПОВЕДІНКА | @media 860, 1180 · плинне |
| організм | Перевірка тренера | coach-verify.css | 5 | ОДНАКОВО | @media 520, 760 · плинне · контейнер |
| організм | Шухляда кошика | cart-drawer.css | 5 | НОВА ПОВЕДІНКА | @media 620 · плинне · контейнер |
| організм | Діалог входу | auth-dialog.css | 5 | ОДНАКОВО | @media 719, 720 · плинне · контейнер |
| організм | Головний блок | hero.css | 4 | НОВА ПОВЕДІНКА | @media 720, 860 · плинне · контейнер |
| організм | Тариф тренера | coach-tariff.css | 3 | ШИРШЕ | плинне · контейнер |
| організм | Блок покупки | buy-box.css | 3 | НОВА ПОВЕДІНКА | @media 479, 619 · плинне · контейнер |
| організм | Картка тарифу | plan-card.css | 3 | ШИРШЕ | @media 640 |
| організм | Модалка відгуку | review-modal.css | 3 | НОВА ПОВЕДІНКА | контейнер |
| організм | Панель Pro | upsell.css | 2 | НОВА ПОВЕДІНКА | плинне |
| організм | Лендинг тренера | coach-landing.css | 1 | ШИРШЕ | @media 559, 620, 860, 980 · плинне · контейнер |
| організм | Обране тренера | coach-wishlist.css | 1 | ШИРШЕ | нічого |
| організм | Оверлей каталогу | cat-overlay.css | 0 | не стоїть | @media 859 · плинне · контейнер |
| організм | Банер cookie | cookie-banner.css | 0 | не стоїть | @media 620 · плинне · контейнер |
| організм | Системна сторінка | system-page.css | 0 | не стоїть | @media 720, 859 · плинне · контейнер |
| патерн | Ряд дій | action-row.css | 15 | НОВА ПОВЕДІНКА | плинне |
Таблиця аудиту: рядок на кожен зі 141 екрана
Ідл-контроль: 141 екран у корпусі, 141 рядок, 0 без рядка. Стан екрана успадковує категорію своєї бази: скелет сітки це теж сітка.| Екран | Що людина тут робить | Категорія | Чим досягається |
|---|---|---|---|
404 | читає одне повідомлення і йде далі | ОДНАКОВО | контейнер |
500 | читає одне повідомлення і йде далі | ОДНАКОВО | контейнер |
account | оглядає кабінет: замовлення, бонуси, адреси | ШИРШЕ · сітка | плинне (auto-fit) + контейнер |
account-addresses | переглядає свій список | ШИРШЕ · сітка | плинне (auto-fit) |
account-addresses-add | заповнює форму адреси в діалозі | ОДНАКОВО | контейнер |
account-addresses-courier | заповнює форму адреси в діалозі | ОДНАКОВО | контейнер |
account-addresses-delete | заповнює форму адреси в діалозі | ОДНАКОВО | контейнер |
account-addresses-edit | заповнює форму адреси в діалозі | ОДНАКОВО | контейнер |
account-addresses-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
account-addresses-postomat | заповнює форму адреси в діалозі | ОДНАКОВО | контейнер |
account-addresses-viddilennia | заповнює форму адреси в діалозі | ОДНАКОВО | контейнер |
account-empty | оглядає кабінет: замовлення, бонуси, адреси | ШИРШЕ · сітка | плинне (auto-fit) + контейнер |
account-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
account-loading | оглядає кабінет: замовлення, бонуси, адреси | ШИРШЕ · сітка | плинне (auto-fit) + контейнер |
account-loyalty | переглядає свій список | ШИРШЕ · сітка | плинне (auto-fit) |
account-loyalty-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
account-loyalty-max | переглядає свій список | ШИРШЕ · сітка | плинне (auto-fit) |
account-orders | переглядає свій список | ШИРШЕ · сітка | плинне (auto-fit) |
account-orders-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
account-profile | править одне поле профілю | ОДНАКОВО | контейнер |
account-profile-delete | править одне поле профілю | ОДНАКОВО | контейнер |
account-profile-email | править одне поле профілю | ОДНАКОВО | контейнер |
account-profile-lang | править одне поле профілю | ОДНАКОВО | контейнер |
account-profile-phone | править одне поле профілю | ОДНАКОВО | контейнер |
account-profile-withemail | править одне поле профілю | ОДНАКОВО | контейнер |
account-wishlist | переглядає свій список | ШИРШЕ · сітка | плинне (auto-fit) |
account-wishlist-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
account-wishlist-many | переглядає свій список | ШИРШЕ · сітка | плинне (auto-fit) |
auth | вводить номер і код зі SMS | ОДНАКОВО | контейнер ~420 |
auth-code | вводить номер і код зі SMS | ОДНАКОВО | контейнер ~420 |
auth-error | вводить номер і код зі SMS | ОДНАКОВО | контейнер ~420 |
auth-loading | вводить номер і код зі SMS | ОДНАКОВО | контейнер ~420 |
auth-newuser | вводить номер і код зі SMS | ОДНАКОВО | контейнер ~420 |
brands | обирає бренд або категорію з набору плиток | ШИРШЕ · сітка | плинне (auto-fit) |
brands-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
brands-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
brands-loading | обирає бренд або категорію з набору плиток | ШИРШЕ · сітка | плинне (auto-fit) |
cart | переглядає кошик | НОВА ПОВЕДІНКА · є в коді | точка 620 (панель замість шухляди) |
cart-coach | переглядає кошик | НОВА ПОВЕДІНКА · є в коді | точка 620 (панель замість шухляди) |
cart-coach-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
cart-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
cart-oos | переглядає кошик | НОВА ПОВЕДІНКА · є в коді | точка 620 (панель замість шухляди) |
catalog-page | обирає бренд або категорію з набору плиток | ШИРШЕ · сітка | плинне (auto-fit) |
catalog-page-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
catalog-page-loading | обирає бренд або категорію з набору плиток | ШИРШЕ · сітка | плинне (auto-fit) |
checkout | оформлює замовлення | НОВА ПОВЕДІНКА · є в коді | точка 860 (форма і підсумок поруч) |
checkout-declined | чекає або читає, що оплату не завершено | ОДНАКОВО | контейнер |
checkout-loading | чекає або читає, що оплату не завершено | ОДНАКОВО | контейнер |
checkout-loggedin | оформлює замовлення | НОВА ПОВЕДІНКА · є в коді | точка 860 (форма і підсумок поруч) |
checkout-noaddr | оформлює замовлення | НОВА ПОВЕДІНКА · є в коді | точка 860 (форма і підсумок поруч) |
coach-client | веде список клієнтів і відкриває профіль | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view список + деталь |
coach-client-edit | заповнює або підтверджує картку клієнта в діалозі | ОДНАКОВО | контейнер |
coach-client-edit-confirm | заповнює або підтверджує картку клієнта в діалозі | ОДНАКОВО | контейнер |
coach-client-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
coach-client-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
coach-client-loading | веде список клієнтів і відкриває профіль | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view список + деталь |
coach-client-new | заповнює або підтверджує картку клієнта в діалозі | ОДНАКОВО | контейнер |
coach-clients | веде список клієнтів і відкриває профіль | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view список + деталь |
coach-clients-cap | веде список клієнтів і відкриває профіль | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view список + деталь |
coach-clients-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
coach-clients-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
coach-clients-loading | веде список клієнтів і відкриває профіль | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view список + деталь |
coach-home | оглядає кабінет тренера | ШИРШЕ · сітка | плинне (auto-fit) + контейнер |
coach-home-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
coach-home-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
coach-home-free | оглядає кабінет тренера | ШИРШЕ · сітка | плинне (auto-fit) + контейнер |
coach-home-loading | оглядає кабінет тренера | ШИРШЕ · сітка | плинне (auto-fit) + контейнер |
coach-landing | читає лендинг гуртового доступу | ШИРШЕ · сітка | плинне + контейнер |
coach-order | читає одне замовлення тренера, по клієнтах | ШИРШЕ · сітка | плинне + контейнер |
coach-order-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
coach-order-loading | читає одне замовлення тренера, по клієнтах | ШИРШЕ · сітка | плинне + контейнер |
coach-orders | переглядає список замовлень | ШИРШЕ · сітка | плинне |
coach-orders-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
coach-orders-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
coach-orders-loading | переглядає список замовлень | ШИРШЕ · сітка | плинне |
coach-session | збирає замовлення на кількох клієнтів за одну сесію | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view клієнти + кошик клієнта |
coach-session-addclient | збирає замовлення на кількох клієнтів за одну сесію | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view клієнти + кошик клієнта |
coach-session-addempty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
coach-session-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
coach-session-loading | збирає замовлення на кількох клієнтів за одну сесію | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view клієнти + кошик клієнта |
coach-session-newclient | збирає замовлення на кількох клієнтів за одну сесію | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view клієнти + кошик клієнта |
coach-session-oos | збирає замовлення на кількох клієнтів за одну сесію | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view клієнти + кошик клієнта |
coach-session-priceblock | збирає замовлення на кількох клієнтів за одну сесію | НОВА ПОВЕДІНКА · НЕМАЄ | точка 860, split-view клієнти + кошик клієнта |
coach-tariff | порівнює два тарифи поруч | ШИРШЕ · сітка | плинне (flex-wrap) |
coach-tariff-cancel | підтверджує скасування тарифу в діалозі | ОДНАКОВО | контейнер |
coach-tariff-free | порівнює два тарифи поруч | ШИРШЕ · сітка | плинне (flex-wrap) |
coach-verify | подає заявку на гуртовий доступ, чекає, читає відповідь | ОДНАКОВО | контейнер |
coach-verify-deadend | подає заявку на гуртовий доступ, чекає, читає відповідь | ОДНАКОВО | контейнер |
coach-verify-error | подає заявку на гуртовий доступ, чекає, читає відповідь | ОДНАКОВО | контейнер |
coach-verify-loading | подає заявку на гуртовий доступ, чекає, читає відповідь | ОДНАКОВО | контейнер |
coach-verify-tier | подає заявку на гуртовий доступ, чекає, читає відповідь | ОДНАКОВО | контейнер |
coach-wishlist | переглядає обране тренера | ШИРШЕ · сітка | плинне (auto-fit) |
content-about | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-article | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-blog | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-contacts | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-delivery | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-faq | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-guarantee | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-legal | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-loyalty | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-loyalty-buyer | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-newsletter | читає, що підписку підтверджено | ОДНАКОВО | контейнер |
content-promo | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-returns | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
content-reviews | читає суцільний текст | ШИРШЕ · повітря | контейнер + міра рядка в ch |
goal | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
goal-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
goal-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
goal-loading | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
home-buyer | входить у продукт: геро, цілі, добірки | НОВА ПОВЕДІНКА · є в коді | точка 860 (оболонка) + плинне |
home-cart | входить у продукт: геро, цілі, добірки | НОВА ПОВЕДІНКА · є в коді | точка 860 (оболонка) + плинне |
home-catalog | відкриває каталог рейкою категорій | НОВА ПОВЕДІНКА · є в коді | точка 860 (оверлей проти рейки) |
home-coach | входить у продукт: геро, цілі, добірки | НОВА ПОВЕДІНКА · є в коді | точка 860 (оболонка) + плинне |
index | входить у продукт: геро, цілі, добірки | НОВА ПОВЕДІНКА · є в коді | точка 860 (оболонка) + плинне |
listing | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
listing-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
listing-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
listing-filtered | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
listing-list | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
listing-loading | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
listing-sheet | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
maintenance | читає одне повідомлення і йде далі | ОДНАКОВО | контейнер |
megamenu | розкриває каталог із шапки | НОВА ПОВЕДІНКА · є в коді | точка 860 (флайаут проти шухляди) |
megamenu-health | розкриває каталог із шапки | НОВА ПОВЕДІНКА · є в коді | точка 860 (флайаут проти шухляди) |
megamenu-protein | розкриває каталог із шапки | НОВА ПОВЕДІНКА · є в коді | точка 860 (флайаут проти шухляди) |
megamenu-vitamins | розкриває каталог із шапки | НОВА ПОВЕДІНКА · є в коді | точка 860 (флайаут проти шухляди) |
order-placed | читає підтвердження, номер і наступний крок | ОДНАКОВО | контейнер |
order-placed-account-end | читає підтвердження, номер і наступний крок | ОДНАКОВО | контейнер |
product | вивчає товар і додає в кошик | НОВА ПОВЕДІНКА · є в коді | точка 860 (галерея і бай-бокс поруч, липка смуга зникає) |
product-coach | вивчає товар і додає в кошик | НОВА ПОВЕДІНКА · є в коді | точка 860 (галерея і бай-бокс поруч, липка смуга зникає) |
product-error | читає помилку і повторює спробу | ОДНАКОВО | контейнер |
product-loading | вивчає товар і додає в кошик | НОВА ПОВЕДІНКА · є в коді | точка 860 (галерея і бай-бокс поруч, липка смуга зникає) |
product-oos | вивчає товар і додає в кошик | НОВА ПОВЕДІНКА · є в коді | точка 860 (галерея і бай-бокс поруч, липка смуга зникає) |
product-reviews | читає відгуки і сертифікат | ШИРШЕ · повітря | контейнер + міра рядка |
quiz | відповідає на питання по одному | ОДНАКОВО | контейнер |
search | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
search-empty | бачить порожній стан і один вихід із нього | ОДНАКОВО | контейнер |
search-loading | фільтрує видачу | НОВА ПОВЕДІНКА · є в коді | точка 860 (постійна рейка фільтрів проти шита) + плинна сітка |
search-suggest | бачить підказки під полем пошуку | ОДНАКОВО | контейнер |
system | службовий індекс прототипу, не екран продукту | ОДНАКОВО | контейнер |
Крок 6: критика класами, зі статусом на кожному рядку
Два прилади плюс третій: Claude з апаратом проєкту і браузером, Codex read-only по джерелу, /impeccable audit ізольованим браузерним агентом. Набори зняті незалежно, дедуп після.
| Клас | Знайдено | Хто знайшов | Виправлено | Знято | Записано, не взято |
|---|---|---|---|---|---|
| таблиця аудиту застаріла про власну поставку | 13 рядків | Claude (11), Codex (2) | 13 | – | – |
| стенд описує файл, якому вже не відповідає | 6 | Claude, Codex | 6 | – | – |
| контейнерний поріг поза реєстром | 1 | обидва | 1 | – | – |
| токен, якого ніхто не читає | 3 | Codex | 1 видалено | 2 | – |
| міру рядка ігнорує суцільний текст | 5 селекторів | impeccable | 5 | – | – |
px там, де правило каже rem | 58 | Codex | 58 | – | – |
| той самий блок оголошень двічі | 6 груп | Codex, Claude | 1 | – | 5 |
| контрол без кільця фокуса | 51 + 4 + 2 | impeccable, Claude | усі | – | – |
кільце спрацьовує на :focus | 2 правила | impeccable | 2 | – | – |
| доступне ім'я посилання це заповнювач | 222 | impeccable | 222 | – | – |
| схована смуга прокрутки без жодного знаку | 3 | impeccable | 3 | – | – |
| картинка вантажиться в закриту панель | 1 (2.28 МБ) | impeccable | 1 | – | – |
<img> без lazy і без розмірів | 28 | impeccable | 28 | – | – |
| лендмарк без доступного імені | 1 | impeccable | 1 | – | – |
| тач-таргет нижче підлоги | 3 | impeccable | – | 3 | – |
| em dash в output-файлі | 13 | Codex | – | 13 | – |
| інлайн-ширина на екрані | 28 | Codex | 1 | 20 | 7 |
| стиль оголошено на екрані | 80 | Codex, Claude | – | – | 80 |
| типографіка перемикається на точці | 29 | Claude, Codex | – | – | 29 |
| вага ассетів | 9.34 МБ на сторінку | impeccable | 2.28 МБ | – | решта |
| ЛАМАЄТЬСЯ МІЖ ТОЧКАМИ | не міряно | розгортка, відкладена власником | – | – | – |
Останній рядок це ДІРА, а не нуль
tools/split.mjs справді проходить 91 сторінку на 129 ширинах - але лише по рамках, які сам оголошує, ніколи по довільному елементу, носіях навігації чи мірі рядка. 84 з 92 кольорових сторінок і всі 103 сторінки стенда по ширинах не пройдені.Форма кроку 6: п'ять із шести дефектів документів зробили два проходи перед ним
roles.mjs і inventory.mjs впали на файлах, які прохід по боргах правив годиною раніше. CLAUDE.md уже каже, що ремонт застарює сусідів; чого він не казав - що прилад, який це ловить, треба гнати ПІСЛЯ ремонту, а не до. Всередині самого кроку 6 цей цикл замкнувся ще чотири рази, і кожен займав хвилину, а не два етапи.Найбільша знахідка не лежала в жодному файлі джерела
Наcoach-clients при 1280: з 80 видимих фокусованих 51 малював власне синє кільце Chrome rgb(0, 95, 204) - фіксоване значення user agent, яке не слідує темній темі. І чотири правила box-shadow: none на КОНТРОЛАХ видаляли кільце назавжди: (0,2,0) у файлі, що вантажиться після button.css, дає нічию, а нічия йде порядку джерела. Два файли, обидва правильні окремо, а дефект існує лише в розв'язаному виводі - тому саме вивід і питає tools/focus.mjs. Сьогодні: 19 071 контрол на 91 сторінці у двох ширинах, 0 синіх, 0 без кільця.Крок 7: обхід ширин, тобто те, що етап лишив невиміряним
Етап 10 закрився з одним червоним рядком у власному чек-листі контракту: «розриви МІЖ точками - не заміряно». Обхід було відкладено власником до кінця Анімації. Анімація закрилась; це той борг.
Три прилади з чотирьох назвали б етап чистим
accept.mjs ходить по корпусу на 360 і 390 · tree-diff.mjs звіряє два дерева властивість за властивістю · grid-sweep.mjs рахує колонки · split.mjs обходить 129 ширин, але лише для рамок, які сам оголошує. Жоден не питає довільний елемент про довільну ширину, тож етап, чий предмет - ширина, закрився з нулем знахідок у своєму головному класі.| Клас | Вище підлоги 360 | Що це було |
|---|---|---|
| документ гортається вбік | 0 | спрацьовує нижче підлоги на двох сторінках, тож це не нуль від сліпої перевірки |
| елемент за межею екрана | 1 → 0 | .ob-side на account-orders, 56.8px за краєм між 1076 і ~1160 - і ніщо не гортається: предок обрізає, тож панель не виштовхнута кудись, де її знайдуть, а відрізана мовчки |
| рядок довший за міру читання | 31 → 0 | етап 10 міряв прозу на ОДНІЙ ширині, 1600, і закапав п'ять. Проза перетинає міру не там, де вікно найширше, а там, де її колонка перестає ділити рядок |
| той самий пункт у двох носіях | 0 | визначення взяте дослівно з tab-walk.mjs, а не виведене вдруге; цей файл додає 129 ширин замість двох |
| за краєм, але У РЕЙЛІ | 15 | друкується, провалом не рахується: айтем за краєм горизонтального скролера - це і є рейл |
Чому @container, а не третя точка
Питання ніколи не було про вікно. Між 1076 і ~1160 ВІКНО широке, тож оболонка відкриває бічну навігацію і колонка кабінету втрачає 216px одним стрибком; в'юпортний запит лишається істинним, 1fr не може стиснутись за власний min-content, і панель виштовхується. Розміщувач уже існував: .acc-main оголосив container-type: inline-size ще на кроці 5. Число - сума, а не пристрій: 292 + 24 + 268 - панель, --space-24 і заміряний min-content колонки підсумку, тобто 36.5rem. bp.mjs валив прогін, доки поріг не став у реєстр - гейт спрацював.Найгірший рядок продукту був невидимий, доки не полагодили той, що перед ним
.tsb тягнеться на 132.1ch, майже вдвічі за міру, і стояв за .qans - бо перше написання приладу тримало лише найгіршого порушника на ширину. Прилад, який треба ганяти, правити й ганяти знову, щоб побачити на шар глибше, не відрізняє «чисто» від «ще один раунд попереду», і кількість раундів невидима в його ж виводі. Раундів знадобилось три.Дві з перших двадцяти правок промахнулись, і сказав це сам обхід
.coach .crestock .rk-lead не покривав покупецький кабінет, де той самий блок не носить .coach; .cd-oosnote .m - інший .m, ніж на чекауті. Обидва названі в css, а не тихо розширені. Правило «ремонт переперевіряє той прилад, що знайшов дефект», яке спрацювало саме на собі.І одна знахідка була про РІД числа, а не про ширину
.pf-note уже був закапаний - на max-width: 38.75rem, а це --bp-grid-2col: точка адаптиву, ужита як міра читання. Точка це поріг, який перетинає розкладка; міра це наскільки широким може бути рядок; 620px дорівнює 70.2ch при цьому кеглі випадково. Тепер каже, що означає, і рядок вужчає на ~20px навмисно.Дванадцять хибних версій приладу, і чотири з них змінили, що він узагалі вміє
Міра бралася з КОРОБКИ, а міра - про РЯДОК:.qans доповідався на 132.3ch, а його текст - «Магазин: ~72 порції по 30 г.», двадцять вісім символів у широкій коробці, що не переноситься жодного разу. Знайшлось тільки тому, що всі 21 знахідку відкрили руками. · Один порушник на ширину - див. вище; заразом вилікувало сліпоту: з одним булевим на клас усе, що істинне від низу підлоги і вище, не звітувало нічого над нею, тому клас «за межею» стрибнув з 1 на 15, щойно власники отримали власні краї. · Рейл - не розрив. · Нутрощі <svg> - не розкладка.Крок 6: контракт етапу як чек-лист
Третій прилад, і він навмисно окрема таблиця. Обидва прилади, що шукають дефекти, читають те, що існує, тому пропущений гейт не бачить жоден: кроку, якого не було, немає ні в жодному файлі, ні на жодній сторінці.
| Гейт паку | Статус | Чим саме |
|---|---|---|
| гейт входу перед кроком 1 | зроблено | 84 компоненти, 1 патерн, два рівні токенів, 142 сірих, 92 кольорових |
| один крок, показ, чекання | зроблено | шість кроків, кожен показаний |
| рев'ю на кроці 2, до компонентів | зроблено | токени і драбина прийняті до раунду 1 |
дві точки, в rem, названі ЗМІНОЮ | зроблено | 38.75rem і 53.75rem. Третьої немає |
кожен @media дає число реєстру | зроблено | bp.mjs, 117 запитів, чотири числа |
жодного @media у файлі екрана | зроблено | єдиний виняток design/overview.html тепер записаний і в реєстрі, а не лише у власному коментарі |
container-type оголошує ТОЙ, ХТО СТАВИТЬ | зроблено | три пороги, три placer-и, усі названі |
| контейнерні пороги в реєстрі | закрито на кроці 6 | 63rem бракувало; bp.mjs тепер питає в обидва боки |
шкала плинна через clamp() | зроблено на кроці 2 | і 29 оголошень усе ще перемикають типографіку в запиті - записано, не взято, з причиною |
адаптивних px не лишилось | закрито на кроці 6 | 58 переведено; 120 усередині умов лишаються за правилом самого паку |
| оболонка розв'язана розвилкою A/B/C | зроблено | форма A, рішення власника, заміряно tab-walk |
| рівно один носій навігації на будь-якій ширині | зроблено | tab-walk, 4 сторінки × 2 ширини, 0 знахідок |
| розгортка ширини 320-1600 | НЕ ЗРОБЛЕНО - власник відклав до анімацій | головний прилад етапу. Клас, яким він володіє, не має знахідок, і це діра |
| ідл-контроль з обох боків | зроблено | кожен оголошений список у кожному приладі, і кожен доведений зламом |
| широка ширина в ТЕМНІЙ темі | зроблено | theme.mjs, 277 з 281, 0 зламаних темою |
| нуль різниці на 360 | зроблено | accept 282/0; proof.mjs --against HEAD не зрушив нічого на 40 екранах |
| кожна різниця на десктопі пояснена рядком аудиту | частково | п'ять обмежень міри і три маски пояснені тут; вони нові на кроці 6, а таблиця аудиту старша за них |
| критика в два прилади | зроблено | Claude і Codex, набори незалежні, write: false у записі задачі |
| контракт як третій прилад | зроблено | ця таблиця |
/impeccable audit | зроблено | ізольований браузерний агент, 15 знахідок і 6 знятих ним самим |
| секція піксельного доказу етапу 10 | частково | половина на 360 доведена; кадри розгортки потребують розгортки |
README, wip у /_nav.js, ритуал закриття | НЕ ЗРОБЛЕНО | етап не можна закрити, поки не відпрацював його головний прилад |