UI Visual

Мова продукту, покладена на реальні екрани. Це кольорові копії сірих вайрфреймів у теці design/: сірий прототип лишається сірим, копія володіє лише візуальним шаром (структура, текст і набір станів - власність wireframes/). Переходи на ще-не-пофарбовані екрани ведуть на сірий оригінал, а не в глухий кут. Ця сторінка службова (noindex) - карта кольорового прототипу; index.html - це вже реальна кольорова головна продукту (вузол 0.0), а не резерв: хаб зветься overview.html, бо index - точка входу в теку, і більше нічого.

Це не окрема сторінка, а спільний компонент: діалог живе в wireframes/_nav.js і відкривається з будь-якого «Увійти». Ці екрани - референс-рендери (діалог відкрито закріпленим), тож стани не можуть розійтися з канонічним компонентом. Кольоровий шар лише перефарбовує його на кожному кроці: один оранжевий на дію, кожна цифра - моно, помилка - серйозний червоний, а не акцент.

Знижка їде разом зі своїм товаром, «Разом» - просто сума. Товар, що на полиці йде −15%, несе ту саму закреслену ціну й чип −% на рядку кошика, а його жива цифра бере акцент за звичайним правилом ціни: один товар - одна історія ціни, де б ви його не зустріли. «Разом» лишається чорнильним - це арифметика набраного, а не пропозиція; розкладка замовлення (лояльність, бонуси, доставка) далі живе на оформленні. Сума рядка, «Разом» і цифра в хедері рахуються з однієї величини - ціни за штуку на рядку, - тож плюс, мінус і кошик у шапці завжди кажуть одне й те саме.

Сторінку тримає просторове правило: ліва колонка - там, де ви вводите, права - там, де вирішуєте. Тому зліва немає жодної залитої дії: обраний спосіб доставки чи оплати позначено так само, як позначається вибір скрізь у продукті - оранжевим контуром, - а єдиний залитий оранжевий на сторінці це «Підтвердити замовлення» у грошовій колонці. Вхід - не покупка, тож «Отримати код» - чорнильна кнопка: один акцент, одне значення. Уся права колонка обчислюється: зміна кількості, вибір доставки, списання бонусів і додавання з апселу одразу переписують «До сплати» й нарахування. Апсел «Не забудьте додати» - полиця, а не коробка: канонічні картки товару без панелі позаду, бо додаток - це теж товар.

Головна має двоє вхідних дверей, і їм дано не два конкурентні акценти, а два регістри. Двері новачка - вибір цілі: шість теплих плиток з акцентом на іконці (іконки взято з того самого WF_GOAL_MENU, що й мега-меню, тож розійтися не можуть) і квіз під ними. Двері тренера - вугільна смуга з білою дією: та сама вага на сторінці, інший голос - справа, а не турбота, - і вона ніколи не забирає купівельний акцент. Промо каже пропозицію без таймера, смуга довіри - тихі факти з іконкою на кожен, а решта оранжевого - лише кнопка кошика на картці.

Кабінет - не вітрина, тому колір тут розкладено інакше. Оранжевий лишається тим, чим був завжди: дія і місце, де ви стоїте (повторити замовлення, у кошик, поточний розділ). Золото (та сама фарба, що й бонусна цифра на оформленні) веде історію лояльності: баланс, прогрес, досягнуті щаблі, нарахування - це статус, а не дія, і саме тут він є темою сторінки. Стан замовлення говорить кольорами стану: доставлено - спокійний зелений, у дорозі - бурштин, обробляється - сірий; акцент до цього не залучається. Рух бонусів розрізняє списання і згоряння (згоряння - підсвічений рядок і бурштинова цифра): згоряння - це драйвер повернення, воно не має губитись серед звичайних витрат. Кожна цифра - грошi, баланс, телефон, номер замовлення - моноширинна.

Інвентар компонентів

Прочитаний з усіх 142 файлів вайрфреймів (141 екран + хаб), а не з пофарбованої вибірки: колір звужує те, що ми фарбуємо, а не те, що ми знаємо про продукт. Система, побудована під 40 екранів, на розкотці недорахувалася б половини компонентів. Повна таблиця - design/kit/docs/inventory.md, жива вітрина - кіт компонентів.

Дев'ять компонентів існують лише як рендер-функції у wireframes/_nav.js - хедер, футер, таб-бар, оверлеї, діалоги, тост, банер cookie. Саме тому кількість екранів це погана міра важливості: футер має нуль у розмітці й рендериться на 129 екранах (діалоги, системні сторінки і хаб обвязки не несуть). Рівень виробляється рівно один раз, тут, і далі лише читається: з нього етап 08 бере порядок розколу kit.css на файли, порядок @import, групи стенда і раунди збірки.

Первинна аудиторія цього продукту - тренер, і до серпня 2026 жоден із 42 його екранів не мав кольору. Власник вирішив розфарбувати вибірку: шість призначень, які називає власна навігація тренера, і два, названі замкненими продуктовими рішеннями. Кожен із восьми ніс власний блок <style> - приватну таблицю стилів, якої не бачив жоден інший екран; усі вісім переїхали в design/system/components/, і кожне правило заскоплено на .coach, бо шістнадцять їхніх імен уже належать іншому компоненту, а .ord означає в двох шарах два різні компоненти.

Останні три прийшли на кроці 8.7, і причина була не в повноті. Обхід посилань показав, що власна навігація тренера тричі виводила з кольору в сірий шар звичайним тапом: «Обране» з шести кольорових екранів, «Тариф» з трьох і «Деталі» замовлення з трьох. uivFixLinks робив рівно те, що мав - переписував посилання на екран, кольорової копії якого немає, - тож полагодити це можна було тільки трьома екранами.

Розкотка - етап 12

Журнал розкотки - design/kit/docs/rollout.md. Там лежать кошторис усього продукту, склад партій, канонічні дані одним переліком і контракт субагента дослівно. Кошторис не набраний руками: node tools/rollout-table.mjs виводить його з тих самих реєстрів, за якими живуть обидва прототипи, і це єдине місце в репозиторії, де записано зв'язок «екран → вузол IA» - етап 13 читає його теж.

Числа розкотки більше не набрані тут руками. Ця таблиця стояла на цьому місці з першої партії й показувала «118 у кольорі · 23 лишилось» ще довго після того, як лишилась одна сторінка: шість рядків, які ніхто не переписував, бо переписати їх не було чим. Вони знялись, а не виправились - те саме правило, за яким знімається будь-яке число без господаря. Живі числа стоять нижче, у розділі «Карта покриття», і їх виводить node tools/coverage.mjs з тих самих двох реєстрів.

Підлога контракту вичищена ДО фанауту, за рішенням власника і по всіх 91 екрані, а не лише на шаблонах: атрибут style= зі 102 на 38 екранах до 20 (усі 20 - оголошений виняток: відсоток на смузі є ЗНАЧЕННЯМ, бо в статичного прототипу немає сервера, щоб його порахувати), тег <style> з 31 до 0, літерал px з 92 до 0. Тридцять порожніх блоків несли записи про те, що пішло з екрана на кроках 8.30-8.42; жоден не втрачено - усі тридцять лежать дослівно в consolidation.md. Прилад, яким міряється кожна партія, - tools/screen-css.mjs, і він доведений червоним, а не обіцянкою.

Це засів етапу 06: мова доведена на еталоні й станах. Кожне рішення (колір, форма, шрифт, іконка) має пару в DESIGN-artifacts.md / стенді concept.html. Повний UI + Visual - кіт компонентів - це етап 07, і він закритий: кіт компонентів зібраний, інвентар прочитаний з усіх 142 файлів вайрфреймів. Решта карти пофарбувалась на розкотці етапу 12, уже на готовій системі, а не двічі. Скільки саме стоїть у кольорі, тут більше не написано: це число жило в цьому абзаці двічі й обидва рази відстало (50 з етапу 07, потім 87 з 14.08.2026), бо абзац розповідає ІСТОРІЮ, а історія не переписується щопартії. Живе число - у карті покриття.

Плаский кіт розколотий: етап 08 зібрав дизайн-систему - два рівні токенів у design/system/tokens.css і 81 файл компонента, кожен зі своєю сторінкою. kit.html лишається як заморожений смоук етапу 07: якщо він виглядає так само, як до розколу, система зібрана правильно. Новий компонент іде на власну сторінку в design/kit/, а не рядком у нього.

Карта покриття - усі 141 сторінок

Ця таблиця не набрана руками: tools/coverage.mjs виводить її з WF_FLOWS (весь продукт, сірий) і DESIGN_NAV (те, що існує в кольорі), і переписує розділ між маркерами. Зелене стоїть на тому, що увійшло в обсяг; свідомо не зроблене лишається окремим станом з причиною і рахується числом, бо обіцянка етапу це «нічого не загубилось», а не «все зелене».

Обхід приладом node tools/coverage.mjs, 1280px: записів 141 · відкрилось 141 · зі своїми станами 50 з 50 екранів обсягу. Панель на сторінці рівно одна: 141 з 141. Не відкрилось 0 - це рівно ті сторінки, що поза обсягом.

Разом: 141 сторінок у реєстрі · у кольорі 141 · поза обсягом 0 () · без причини 0. Реєстр кольорового прототипу (DESIGN_NAV) називає 141 імен плюс 1 оголошений виняток (overview.html - хаб, і він навмисно поза реєстром екранів).