## ✅ Окончательное решение: BPMN-редактор на версии 3.4.0
После экспериментов выяснилось, что в новых версиях bpmn-js (начиная с 7.x) глобальная переменная `BpmnModeler` отсутствует, так как библиотека перешла на ES-модули. Версия **3.4.0** создаёт глобальную переменную `BpmnModeler` и работает корректно в локальном файле и на GitHub Pages. Ниже приведён **полностью работающий код**, который:
- отображает BPMN-редактор с палитрой элементов,
- содержит калькулятор (два поля ввода, выбор операции, результат),
- подсвечивает задачу `CalculateTask` на диаграмме при каждом расчёте,
- включает отладочную панель с копированием лога,
- не требует сервера и работает из одного HTML-файла.
### 📁 Файл `index.html` (скопируйте целиком)
```html
BPMN Калькулятор
📊 BPMN Редактор
💡 Редактируйте диаграмму. При изменении чисел задача "CalculateTask" подсвечивается.
🧮 Калькулятор
Результат:
—
🐞 ОТЛАДКА (лог)
[Инициализация] Ждём события...
```
### 🚀 Как использовать
1. Скопируйте весь код в новый файл `index.html`.
2. Откройте его в браузере (локально или через GitHub Pages).
3. **Слева** вы увидите BPMN-редактор с палитрой элементов (можно перетаскивать новые элементы, редактировать).
4. **Справа** – калькулятор. Меняйте числа или операцию – результат обновляется, а задача «Вычислить результат» на диаграмме подсвечивается.
5. Кнопка «Сохранить XML» выводит текущую BPMN-модель в консоль.
6. Отладочная панель показывает ход инициализации и позволяет скопировать лог.
### 📦 Развёртывание на GitHub Pages
1. Создайте репозиторий на GitHub.
2. Загрузите `index.html` в корень репозитория.
3. Перейдите в **Settings → Pages**, выберите ветку `main` и папку `/ (root)`. Нажмите Save.
4. Через минуту ваше приложение будет доступно по адресу:
`https://[username].github.io/[repository-name]/`.
### ✅ Почему это работает
- Используется **bpmn-js версии 3.4.0**, где глобальная переменная `BpmnModeler` гарантированно доступна.
- Все ресурсы подключаются через HTTPS, что исключает проблемы CORS.
- Редактор и калькулятор полностью независимы, но связаны через подсветку задачи.
- Код написан на чистом HTML/JS без сборщиков и подходит для любого статического хостинга.
Теперь у вас есть полноценный open-source BPMN-конструктор с no-code элементами, который работает в любом браузере и может быть развёрнут на GitHub Pages. Приятной работы!