Кнопка запуску і персонажі

Для розробників, у коді: три типи кнопки запуску, підпис і контейнер, п'ять персонажів та їхні кольорові частини, автоконтраст і де віджет стоїть.

Кнопка запуску — це те, що в кутку. Це також персонаж: коли віджет відкривається, той самий орб лишається на місці, а розмова з’являється поруч — орб один, другої копії немає ніколи.

У панелі: персонаж і його кольори — Віджет → Вигляд → Орб / персонаж, кнопка — Віджет → Лаунчер (налаштування віджета). Ця сторінка — те саме в коді.

Три типи кнопки запуску

`launcher.type`	Що малюється	Примітки
`orb` (за замовчуванням)	анімований персонаж, скін `voiceCharacter`	`launcher.value` ігнорується; скін задає `voiceCharacter`
`image`	зображення з `launcher.value`, растрове або SVG	одна картинка, і відкритому, і закритому; персонаж не малюється — аура й керування компаньйона беруть кольори персонажа
`none`	нічого, поки закрито	headless: ваша власна кнопка викликає `Shukai.open()` — Headless

launcher.label — непорожній підпис перетворює кнопку на «пігулку» з текстом біля персонажа, він же її aria-label; колір — токен теми launcher-color. launcher.container — elevated (заливка й тінь), flat (лише заливка), bare (прозорий, персонаж плаває; значення панелі за замовчуванням для нового віджета). launcherAttention — off, subtle чи prominent — визначає, як закрита кнопка привертає увагу і чи з’являється привітальний тизер; off — ні те, ні те.

П’ять персонажів

voiceCharacter обирає скін. Кожен має кольорові частини («слоти»), які задає власник у панелі або сторінка через orbColours: { частина: колір } чи CSS-змінну. Колір тіла спільний для всіх скінів: voiceOrbColor або основний колір, якщо порожньо, — завжди намальований через виведену палітру з обмеженням контрасту, тож збережений колір ніколи не малюється точно як заданий, а сірий лишається сірим у кожному стані.

Скін	Частини	За замовчуванням	CSS-змінна
`robot2` (Robot 2.0)	`visor`	автоконтраст, хвіст `#1b2130`	`--sa-orb-face`
	`eyes`	автоконтраст, хвіст `#fff`	`--sa-orb-eye`
	`mouth`	іде за очима, де читається, інакше авто	`--sa-orb-mouth`
`kozak` (Козак)	`visor`, `eyes`	автоконтраст	`--sa-orb-kozak-visor`, `-eyes`
	`hair` (оселедець), `moustache`	`#1C1B2E`	`--sa-orb-kozak-hair`, `-moustache`
	`earring`	`#F5B800`	`--sa-orb-kozak-earring`
`fox`	`muzzle`, `eyewhite`	`#FFFFFF`	`--sa-orb-fox-muzzle`, `-eyewhite`
	`nose`, `mouth`	колір тексту стану	`--sa-orb-fox-nose`, `-mouth`
	`pupils`	`#0E1726`	`--sa-orb-fox-pupils`
`monster`	`mouth`	колір тексту стану	`--sa-orb-monster-mouth`
	`pupils`	`#0E1726`	`--sa-orb-monster-pupils`
	`eyewhite`	`#FFFFFF`	`--sa-orb-monster-eyewhite`
`mic`	`grille`	`#FFFFFF`	`--sa-orb-mic-grille`
	`bars`	колір стану	`--sa-orb-mic-bars`

У Козака немає рота: коли він говорить, рухаються вуса. Частина, що йде за станом (ніс лиса, смужки мікрофона), змінюється разом зі станом, доки не задано колір, а тоді тримає його в кожному стані. Невідомий id скіна малює Robot 2.0.

Кожна заливка читає var(--sa-orb-<скін>-<частина>, var(--sa-orb-<скін>-<частина>-auto, <запасне>)) (Robot 2.0 лишає свої публічні назви, --sa-orb-face / -eye / -mouth), тож явне значення — власника, CSS сторінки, orbColours — перемагає автоматичний вибір порядком запасних значень CSS, без жодного коду визначення.

Автоконтраст

Без заданих візора чи очей віджет обирає пару, яку видно на кольорі тіла: темний візор там, де він досягає 3:1 проти тіла, інакше контрастніший із темного й світлого; очі й колір значка — те з білого й #1b2130, що контрастніше. Задайте лише одне з двох — і друге обереться контрастним до нього. Рот Robot 2.0 намальований на тілі, а не на візорі, тож іде за очима лише там, де цей колір видно на тілі, а інакше обирається так, щоб виділятися. Обчислюється раз при монтуванні з кольорів із сервера.

Стани, які показує персонаж

Спокій, слухання, думання, мовлення; навушники, поки голосова розмова жива; піднята рука, коли чекає проактивна знахідка; одноразові «радий» чи «збентежений» після результату; вигляд «офлайн», коли хід провалився; дрімота після 30 секунд. У кожного стану своя пара кольорів (--sa-orb-<стан> / -ink), яку можна перевизначити з CSS сторінки.

Де стоїть віджет

position власника — це кут. Відвідувач може перетягнути кнопку (6 px відрізняють перетягування від кліку); відпускання в межах 24 px від краю прилипає до відступу 20 px; результат зберігається для цього відвідувача без терміну і обмежується при зміні розміру чи повороті, тож повернутий телефон ставить віджет туди, де його лишили. Колонка бульбашок і картка відкриваються в бік, де є місце, — вимірюється наживо. На телефоні віджет на половину відсувається, поки сторінка гортається, і піднімається над екранною клавіатурою — ні те, ні те не зберігається.

Поки дія на сторінці показує елемент під віджетом, увесь віджет на мить відступає до протилежного краю і повертається; клавіатурної альтернативи перетягуванню немає.