Посібник з розробки віджетів

1. Сітка дашборда

UI Core будує дашборд як CSS grid. Розміри з manifest.json:

size	Ширина	Висота	Застосування
1x1	1 колонка	1 рядок	Простий індикатор
2x1	2 колонки	1 рядок	Компактний статус
2x2	2 колонки	2 рядки	Повноцінний віджет з графіком
4x1	вся ширина	1 рядок	Горизонтальна панель

2. Ключове правило: віджет живе в iframe

Немає 100vh — використовуйте width/height: 100%
Немає скролу — scrolling="no" заданий батьком
Немає доступу до parent DOM
Немає alert/confirm/prompt

3. Обов'язковий CSS-шаблон

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.root { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 14px 16px; gap: 10px; overflow: hidden; }

4. BASE URL

const BASE = window.location.pathname
  .replace(/\/(widget|settings)(\.html)?(\?.*)?$/, '');

5. Адаптивні макети

Використовуйте checkLayout() для визначення компактного режиму при height < 160px.

6. Отримання даних

const data = await fetch(BASE + '/status').then(r => r.json());
setInterval(load, 30_000);

7. Core API з віджета

UI token (read-only, TTL 1 год) передається через query параметр ?ui_token=....

8. Realtime: SSE

const es = new EventSource(BASE + '/events/stream');
es.addEventListener('state_changed', (e) => updateUI(JSON.parse(e.data)));

9. settings.html

Показується в прокручуваному модальному вікні. Зберігання через API модуля, не localStorage.

Чеклист

html, body: width/height 100%, overflow hidden
Немає 100vh, немає position: fixed
BASE обчислюється з pathname
Є обробка помилок на всіх fetch
Автооновлення через setInterval або SSE
Компактний режим при height < 160px