diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7d517f8..c899fe7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,6 +36,9 @@ jobs:
- name: Type-check
run: npm run typecheck
+ - name: Unit tests
+ run: npm test
+
- name: Test Rust core
run: cargo test --manifest-path wasm/board-core/Cargo.toml
@@ -53,3 +56,40 @@ jobs:
- name: Run end-to-end tests
run: npx playwright test
+
+ # The e2e suite is red on `main` already (run 32238922648, same step), so a
+ # failing check on a PR carries no information on its own. Publish which
+ # tests failed — as a job summary readable without downloading logs, and
+ # as the HTML report artifact for local inspection.
+ - name: Summarize end-to-end results
+ if: always()
+ run: |
+ {
+ echo '### Playwright results'
+ echo '```'
+ node scripts/summarize-playwright-report.mjs playwright-report
+ echo '```'
+ } >> "$GITHUB_STEP_SUMMARY"
+ # Run it again for the workflow commands: annotations are only parsed
+ # from a step's stdout, and they are the one CI channel readable
+ # without access to the log/artifact blob storage.
+ node scripts/summarize-playwright-report.mjs playwright-report --annotations
+
+ # GitHub keeps 10 annotations per level per step, so a red suite with more
+ # than 10 failures needs a second step to stay fully visible.
+ - name: Annotate remaining end-to-end failures
+ if: always()
+ run: node scripts/summarize-playwright-report.mjs playwright-report --annotations --page=2
+
+ - name: Annotate the page state at each failure
+ if: always()
+ run: node scripts/summarize-playwright-report.mjs playwright-report --contexts
+
+ - name: Upload Playwright report
+ if: always()
+ uses: actions/upload-artifact@v4
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 7
+ if-no-files-found: ignore
diff --git a/dist/index.html b/dist/index.html
index 91e3839..443a40c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -5,26 +5,26 @@
MiroBoard — Локальная доска | Undo, Шаблоны, Тёмная тема
-
-
+ `}),E.jsx(kf,{})]})}async function mf(){await Uy(),Bd.createRoot(document.getElementById("root")).render(E.jsx(U.StrictMode,{children:E.jsx(Ff,{})}))}mf().catch(C=>{console.error("Could not initialize the board WebAssembly core.",C)});
+
diff --git a/docs/COLLABORATION_ANALYSIS.md b/docs/COLLABORATION_ANALYSIS.md
new file mode 100644
index 0000000..0273b85
--- /dev/null
+++ b/docs/COLLABORATION_ANALYSIS.md
@@ -0,0 +1,1034 @@
+# Совместная работа в MiroBoard: анализ и план
+
+> Дата анализа: 2026-09-20. Ветка: `arena/01a0c0ca-miroboard`, базовый коммит `6fe690d`.
+> Все утверждения ниже проверены по исходникам и измерениям, а не взяты из документации.
+> Ссылки вида `src/App.tsx:268` — на конкретные строки на момент анализа.
+>
+> Смежный документ: [`MIRO_FEATURE_GAP_ANALYSIS.md`](./MIRO_FEATURE_GAP_ANALYSIS.md) —
+> функциональный паритет с Miro. Этот документ — про совместную работу.
+
+---
+
+## 0. TL;DR
+
+**Совместной работы в продукте сейчас нет вообще.** Yjs присутствует, но используется
+только как локальная машина времени: undo/redo, контрольные точки, crash-recovery.
+Ни одного сетевого провайдера, ни awareness, ни presence, ни UI для входа в сессию —
+всё это было сознательно удалено в Phase 1 (`docs/architecture.md:11`).
+
+**Хорошая новость:** фундамент выбран правильный. CRDT в основе — это ровно то, на чём
+стоят Miro, Figma, tldraw, Excalidraw+. Обратной дороги строить не надо.
+
+**Плохая новость:** текущая *схема* CRDT для мультиплеера непригодна, и это проверено
+экспериментом (`docs/experiments/crdt-collaboration-probe.test.ts`):
+
+| Что сделали два клиента одновременно | Что получилось |
+| --- | --- |
+| Один передвинул элемент, второй перекрасил его | **Два элемента с одинаковым `id`** в массиве: `[{"id":"n1","x":0,"color":"blue"},{"id":"n1","x":100,"color":"red"}]` |
+| Оба правили текст одной заметки | Правка одного клиента **исчезла бесследно**: `"hello world (A)"` |
+
+То есть «добавить WebRTC-провайдер» — это не фича на вечер. Сначала придётся поменять
+модель данных. Ниже — что именно, в каком порядке и зачем.
+
+**Стратегическая развилка** (раздел 8): гнаться за живым мультиплеером Miro — значит
+играть на чужом поле с заведомо меньшими ресурсами. Асинхронная совместная работа
+(обмен файлами, слияние, комментарии, атрибуция автора, воспроизводимая история) —
+это то же самое ядро, но уникальное преимущество в офлайн-сегменте. Рекомендуется
+гибрид: **async-first, live opt-in**.
+
+---
+
+## 1. Что есть сейчас: проверенный baseline
+
+### 1.1 Сборка и качество
+
+Проверено локально (`npm ci && npx vitest run && npx tsc --noEmit`):
+
+- **148/148** Vitest-тестов проходят, 31 файл;
+- **0** ошибок TypeScript;
+- `dist/index.html` — **1.1 МБ** одним файлом (не 2.1 МБ, как указано в `ACHIEVEMENTS.md:13`);
+- CI (`.github/workflows/ci.yml`) гоняет lint, typecheck, `cargo test`, clippy,
+ wasm-pack, build и Playwright.
+
+### 1.2 Слой CRDT
+
+| Аспект | Реальность | Где |
+| --- | --- | --- |
+| Документ | `new Y.Doc({ gc: false })` — один на приложение | `src/App.tsx:268` |
+| Структура | `Y.Array` — **плоский массив JSON-объектов** | `src/App.tsx:453` |
+| Правка поля | `delete(index, 1)` + `insert(index, [целый объект])` | `src/persistence/updates.ts:28-31` |
+| Порядок поиска | `toArray().findIndex(...)` — O(n) на каждую правку | `src/persistence/updates.ts:24` |
+| Undo | `Y.UndoManager(yarray, { captureTimeout: 500, trackedOrigins: {null, HISTORY_RESTORE_ORIGIN} })` | `src/App.tsx:489-491` |
+| Профиль симуляции | `Y.Map('profileConfig')` — уже map, это хорошо | `src/App.tsx:452` |
+| Мета | `Y.Map('meta')` c `id`, `createdAt` | `src/App.tsx:451, 461-465` |
+| Индекс | `IndexeddbPersistence` как кэш аварийного восстановления | `src/persistence/indexeddb.ts` |
+
+### 1.3 История
+
+- Снимки = `Y.snapshot(ydoc)` → base64 **внутри** файла (`src/history/snapshots.ts:34-44`);
+- чтение истории = `Y.createDocFromSnapshot` (`snapshots.ts:49-57`) — поэтому `gc:false`
+ и является обязательным: снимки указывают на удалённые элементы;
+- восстановление = полное уничтожение массива и push исторических элементов
+ (`snapshots.ts:65-71`) — под мультиплеером это означает «отменить всё у всех»;
+- `history.yjsState` = **весь** документ целиком в base64 при каждом сохранении
+ (`src/App.tsx:599`).
+
+### 1.4 Идентичность и присутствие
+
+- Есть только `user.id` — анонимный UUID из `localStorage['miro-author-id']`
+ (`src/App.tsx:442-448`). Ни имени, ни цвета, ни аватара.
+- Поле `createdBy` пишется в элементы и сохраняется в файл
+ (`src/format/mboard.ts:118`, `src/format/types.ts:57`) — **но нигде не отображается**.
+ Это готовый, но не использованный крючок для атрибуции.
+- Инструмент «Лазер» существует (`src/App.tsx:243`, тулбар `~2128`), но это
+ **локальная** указка: `laserPos` живёт в `useState`, в документ не попадает.
+ Для презентаций он уже полезен; для совместной работы — нет.
+
+### 1.5 Сеть
+
+Ноль. Ни `y-webrtc`, ни `y-websocket`, ни `fetch`, ни WebSocket. `y-indexeddb` —
+единственный Yjs-провайдер в проекте, и он локальный. Документация это честно
+фиксирует: «Collaboration, shared cursors, accounts, and remote synchronization are
+not available in the air-gapped build» (`docs/OFFLINE_DEPLOYMENT.md:47`).
+
+### 1.6 Что из этого следует
+
+Продукт сегодня — **однопользовательский редактор с CRDT-движком внутри**. Это не
+плохо: CRDT уже окупается офлайн-редактированием, историей и восстановлением после
+сбоев. Но «добавить совместную работу» — это не подключить провайдер, а:
+
+1. поменять схему данных (иначе дубликаты и потерянные правки, см. раздел 2);
+2. разделить «контент» и «эфемерику» (курсоры не должны попадать в файл и в историю);
+3. решить вопрос с `gc:false` (иначе файл растёт линейно с каждым движением мыши);
+4. сделать отмену **своей** правки, а не общей;
+5. добавить транспорт, который по умолчанию выключен;
+6. добавить UI: профиль, сессия, присутствие, права.
+
+Пункты 1-4 обязательны даже для асинхронной совместной работы через файлы.
+Пункты 5-6 — только для живой.
+
+---
+
+## 2. Блокеры совместной работы (с доказательствами)
+
+Эксперимент: `docs/experiments/crdt-collaboration-probe.test.ts`.
+Запуск: `npm run probe` (скрипт добавлен в `package.json`, использует отдельный
+конфиг и **не** влияет на `npm test` и CI).
+
+### Блокер 1. Правка элемента = замена элемента целиком → дубликаты
+
+`commitElementUpdate` делает `delete(index,1); insert(index,[...])`
+(`src/persistence/updates.ts:28-31`). В Yjs это **две независимые операции над
+позицией массива**, а не «изменение поля». При одновременной правке разных полей
+одного элемента двумя клиентами массив расходится так:
+
+```
+A) merged element = [{"id":"n1","x":0,"color":"blue"},{"id":"n1","x":100,"color":"red"}]
+ count = 2
+```
+
+Какой из двух дубликатов окажется первым, зависит от порядка слияния
+(clientID и последовательность update'ов): при повторном запуске пробы порядок
+менялся местами. То есть результат **недетерминирован** — это худший класс
+дефекта для инструмента, который продаёт детерминированность.
+
+Последствия в UI: два `` с одинаковым ключом (дубликат ключа React,
+`src/App.tsx:1498`), «призрачный» элемент, который нельзя удалить
+(`deleteElement` находит только первый индекс, `src/App.tsx:747-748`), и расхождение
+между клиентами, которое не лечится переподключением.
+
+Тот же эксперимент со схемой `Y.Map`:
+
+```
+E) merged = x: 100 color: blue (обе правки сохранены)
+```
+
+**Вывод:** элемент должен быть `Y.Map` с полями-примитивами, а коллекция —
+`Y.Map` (или `Y.Array`), где удаление/вставка — редкое событие,
+а правка поля — обычное.
+
+### Блокер 2. Текст — строка, а не `Y.Text` → потерянная работа
+
+```
+B) text after merge = "hello WORLD (B)" // правка клиента A исчезла
+ (при повторном запуске побеждает то A, то B — кто именно, решает порядок слияния)
+```
+
+Для схемы с `Y.Text`:
+
+```
+E) concurrent text merge = "Well, hello big world" // обе правки на месте
+```
+
+Любая совместная заметка/подпись сейчас — это «кто последний нажал, тот и прав».
+В Miro одновременное редактирование текста — базовое ожидание пользователя.
+
+### Блокер 3. `gc: false` + presence = бесконечно растущий файл
+
+Измерено: перемещение **одного** элемента 500 раз (реалистичный drag за сессию):
+
+```
+C) update bytes after 125/250/375/500 moves = 4115 -> 8364 -> 12614 -> 16864
+C) same with gc:true = 4428 bytes
+```
+
+Линейный рост ≈ **34 байта на каждое изменение поля**, без потолка. Сегодня это
+терпимо, потому что правки делает один человек и `transientFrame` гасит промежуточные
+состояния drag'а (`src/App.tsx:260-262`). В мультиплеере 5 участников × курсоры ×
+drag'и × текст — это мегабайты в час, и всё это пишется в `history.yjsState` при
+**каждом** сохранении (`src/App.tsx:599`).
+
+При этом `gc:false` нельзя просто выключить: на нём держится история
+(`Y.createDocFromSnapshot`). Значит, нужно **разделение документов**:
+
+- `contentDoc` (`gc: true`) — живой контент, маленький, синхронизируемый;
+- `historyDoc` (`gc: false`) — подложка истории, локальная, в файл кладётся отдельно
+ и с собственной политикой удержания (которая уже есть: `src/history/retention.ts`).
+
+### Блокер 4. Отмена не различает «своё» и «чужое»
+
+`trackedOrigins: new Set([null, HISTORY_RESTORE_ORIGIN])` (`src/App.tsx:491`).
+`null` — это «локальная транзакция без origin». Удалённые правки приходят с origin
+провайдера, поэтому в стек не попадут — это правильно. Но:
+
+- `restoreSnapshot` (`snapshots.ts:65`) стирает весь массив и пушит исторический.
+ В мультиплеере это отмена работы **всех** участников, а не «своего» шага;
+- нет `Y.UndoManager` с `trackedOrigins: Set([localOrigin])` на транзакции
+ с явным origin — сейчас origin вообще не проставляется у пользовательских правок
+ (`ydoc.transact(() => ...)` без второго аргумента, `src/App.tsx:735, 742, 761`);
+- нет понятий «мягкая блокировка» и «кто сейчас правит этот элемент».
+
+**Вывод:** каждой категории правок нужен свой origin (`LOCAL_EDIT`, `LOCAL_GESTURE`,
+`REMOTE`, `RECOVERY`, `HISTORY_RESTORE`, `MERGE`), а undo — только для `LOCAL_*`.
+
+### Блокер 5. Одна выделенная ячейка, нет групп и рамок
+
+`selectedId: string | null` (`src/App.tsx:188`). Ни marquee-выделения, ни
+Shift+клик, ни групп, ни `parentId` в памяти (в формате поле зарезервировано —
+`src/format/types.ts:51`, при сериализации всегда `null` — `src/format/mboard.ts:113`).
+
+Для совместной работы это критично не из-за «удобства», а из-за того, что
+**presence = «что сейчас выделено у другого»**. Без множественного выделения
+невозможны ни общий фоллоу-режим, ни «не трогать чужую рамку», ни блокировки.
+
+### Блокер 6. Нет модели рёбер в памяти
+
+Связь — это элемент-стрелка с полем `bpmnFlow: { sourceId, targetId, ... }`
+(`src/App.tsx:98`), у которого собственные `x/y/w/h`. В файле это уже нормальное
+ребро (`DocEdge`, `src/format/types.ts:71`), а в памяти — костыль. Совместное
+редактирование графа (один тянет узел, второй — связь) на такой модели даёт
+рассинхрон геометрии.
+
+### Блокер 7. Монолит
+
+`src/App.tsx` — **2534 строки** (цель Phase 2 из `.cursorrules` — `<500`). Внутри:
+типы, геометрия, машина инструментов, палитра BPMN, UI симуляции, экспорт,
+онбординг и рендер. Любой из пунктов выше требует правки в 5-10 местах этого файла
+одновременно. Это главный практический риск: без декомпозиции каждая фича
+совместной работы будет стоить вдвое дороже и ломать 148 существующих тестов.
+
+---
+
+## 3. Целевая архитектура совместной работы
+
+### 3.1 Схема CRDT (v2)
+
+```
+contentDoc (Y.Doc, gc: true) ← синхронизируется, маленький
+├── meta: Y.Map { id, title, schemaVersion, createdAt, updatedAt }
+├── nodes: Y.Map ← узлы
+│ ├── kind, parentId, z (fractional index), createdAt, createdBy
+│ ├── frame: Y.Map { x, y, w, h, rotation } ← LWW-регистр для drag
+│ ├── style: Y.Map { color, fill, stroke }
+│ ├── text: Y.Text ← совместимый текст
+│ ├── points: Y.Array ← штрих: только append
+│ └── profileData: Y.Map ← BPMN и др. профили
+├── edges: Y.Map ← рёбра как сущности первого класса
+│ ├── kind, source: Y.Map{nodeId, anchor}, target: Y.Map{...}
+│ ├── waypoints: Y.Array, label: Y.Text, style: Y.Map
+│ └── profileData: Y.Map
+├── comments: Y.Map ← треды (см. 3.4)
+├── assets: Y.Map ← дедуп по контент-хэшу
+└── profileConfig: Y.Map ← уже есть, оставляем
+
+historyDoc (Y.Doc, gc: false) ← локальный, в файл кладётся отдельным блоком
+└── подложка снимков (Y.snapshot / createDocFromSnapshot)
+
+awareness (протокол Yjs, НЕ документ) ← курсоры, выделения, следование, лазер
+```
+
+Ключевые решения и почему именно так:
+
+1. **`Y.Map` вместо `Y.Array`.** Убирает дубликаты (блокер 1) и
+ даёт поле-уровневое слияние. Побочный эффект: нужен отдельный порядок рендера —
+ см. п. 3.
+2. **Порядок и z-order — fractional index** (строка вида `"a0"`, `"a0V"`, между
+ соседями вставляется лексикографически). Это убирает текущий
+ `delete+push` в `bringToFront` (`src/App.tsx:755-764`), который в мультиплеере
+ переставляет элементы у всех участников одновременно. Альтернатива — LWW-число,
+ но fractional index детерминирован и не требует разрешения коллизий.
+3. **`frame` как `Y.Map` с LWW-семантикой.** Для координат одновременная правка
+ не должна сливаться посимвольно — достаточно «последний победил», но по каждому
+ полю независимо. Yjs даёт это бесплатно для примитивов внутри `Y.Map`.
+4. **Штрихи (`points`) — только append.** Текущий `simplifyPath` (`src/App.tsx:159+`)
+ переписывает массив точек целиком — в мультиплеере два человека, рисующие одну
+ линию, сотрут друг друга. Решение: рисование пишет точки в `Y.Array`
+ аппендом, упрощение выполняется **один раз** локально при отпускании пера и
+ фиксируется как замена всего элемента-штриха (это редкая операция, её можно
+ делать через `Y.Map` целиком).
+5. **Контент и история — разные документы.** Единственный способ одновременно
+ иметь маленький синхронизируемый doc и полную историю. Формат файла при этом
+ сохраняет оба блока, как и сегодня (`nodes/edges` + `history.yjsState`), но
+ `history.yjsState` становится состоянием `historyDoc`, а не всего приложения.
+6. **`profileData` как `Y.Map`** — уже спроектировано в файле
+ (`src/format/types.ts:56`), в памяти надо просто привести к тому же виду. Это
+ же снимает 11 `bpmn*`-полей из базового типа (`src/App.tsx:81-91`).
+
+Миграция: `schemaVersion: 1 → 2` через уже существующий механизм
+(`src/format/migrations.ts`), плюс конвертер `Y.Array → Y.Map` для
+живых документов в IndexedDB. Фикстуры в `examples/legacy/` не правятся — они и
+есть тест миграции.
+
+### 3.2 Разделение: контент / эфемерика / история
+
+| Слой | Что | Где живёт | В файл? | Синхронизируется? |
+| --- | --- | --- | --- | --- |
+| Контент | узлы, рёбра, комментарии, ассеты | `contentDoc` | да | да |
+| Эфемерика | курсор, выделение, вьюпорт, лазер, «печатает…» | `Awareness` | **нет** | да (не сохраняется) |
+| История | снимки, точки восстановления | `historyDoc` | да (отдельный блок, с лимитом) | опционально, по умолчанию нет |
+| Идентичность | имя, цвет, аватар, права | `Awareness` + локальный профиль | нет (только `createdBy` в узлах) | да |
+
+Самое частое нарушение в самодельных мультиплеер-досках — курсоры в основном
+документе. Это немедленно даёт: рост файла (блокер 3), мусор в истории,
+ложные срабатывания dirty-трекера (`src/persistence/dirty.ts`) и «отмену»
+чужого движения мыши. Awareness в Yjs существует ровно для того, чтобы этого не было.
+
+### 3.3 Транспорт: интерфейс и четыре реализации
+
+```ts
+export interface CollabTransport {
+ readonly id: 'none' | 'broadcast' | 'webrtc' | 'websocket' | 'file'
+ connect(doc: Y.Doc, awareness: Awareness, room: RoomDescriptor): Promise
+ disconnect(): Promise
+ onStatus(cb: (s: TransportStatus) => void): () => void
+}
+```
+
+| Транспорт | Сценарий | Сеть | Зависимости | Приоритет |
+| --- | --- | --- | --- | --- |
+| `none` | одиночная работа (текущий режим) | нет | — | уже есть |
+| `broadcast` | два окна/вкладки на одной машине — **демо и тесты** | нет | `BroadcastChannel` (встроен в браузер) | **P0** |
+| `file` | асинхрон: обмен `.mboard` / `.mboard-patch`, слияние | нет | — | **P0** |
+| `websocket` | свой сервер в контуре предприятия / LAN | локальная сеть | `y-websocket` или `hocuspocus` | P1 |
+| `webrtc` | P2P без сервера, но нужен signaling | интернет или LAN | `y-webrtc` + **свой** signaling | P2 |
+
+Почему такой порядок:
+
+- **`broadcast`** — почти бесплатен (нет зависимостей, ~60 строк), при этом даёт
+ полноценный мультиплеер для CI-тестов в Playwright и для демо «два окна рядом».
+ Это самый дешёвый способ проверить схему CRDT на реальном параллелизме.
+- **`file`** — уникальное преимущество продукта: совместная работа **без единого
+ сервера**, через общий диск, флешку или почту. Для банков и госсектора
+ (целевая аудитория из `README.md`) это единственный разрешённый вариант.
+- **`websocket`** — единственный честный способ дать «живой» мультиплеер в
+ закрытом контуре. Сервер — ~150 строк Node, ставится внутри периметра.
+- **`webrtc`** — соблазнительно («без сервера»), но signaling всё равно нужен, а
+ NAT-traversal в корпоративных сетях обычно запрещён. Оставляем как опцию,
+ не как основной путь. Именно публичные signaling-серверы и были удалены в
+ Phase 1 — возвращать их по умолчанию нельзя (`docs/STRATEGIC_ROADMAP_2026_2027.md:321-343`).
+
+**Правило по умолчанию: `none`.** Никаких исходящих соединений при открытии
+`dist/index.html`. Существующий CI-тест на офлайн-режим
+(`tests/offline.spec.ts`) должен остаться зелёным и получить дополнение:
+«включение совместной работы требует явного действия пользователя».
+
+### 3.4 Асинхронная совместная работа — главный козырь
+
+Это то, чего нет ни у Miro, ни у draw.io, и что идеально ложится на
+офлайн-позиционирование.
+
+**Сценарий:** два аналитика в разных кабинетах, общего сервера нет, есть общая
+папка или пересылка файлов.
+
+1. Алиса открывает `process.mboard`, правит, сохраняет. Файл содержит
+ `contentState` (state vector + update) и `history`.
+2. Боб открывает **свою** копию того же документа (у него свой `meta.id`, тот же),
+ правит, сохраняет как `process-bob.mboard`.
+3. Боб пересылает файл Алисе. Алиса делает «Объединить с файлом…».
+4. Приложение сравнивает state vectors, считает, что изменилось у Боба, и
+ показывает **превью слияния**: добавленные узлы, изменённые, удалённые, с
+ авторством и подсветкой конфликтов (если оба правили одно поле — предложить
+ выбор, а не тихий LWW).
+5. После подтверждения создаётся слияние, и в историю добавляется именованная
+ контрольная точка `merge: process-bob.mboard`.
+
+Технически это **уже почти готово**: `Y.encodeStateAsUpdate(doc, stateVector)` и
+`Y.applyUpdate` — тот же механизм, который используется для восстановления из
+файла (`src/App.tsx:660`). Не хватает:
+
+- UI диалога слияния и диффа (можно переиспользовать подсветку изменений из
+ превью истории — `src/history/HistoryPreviewBanner.tsx` уже красит изменённые
+ узлы оранжевым, `src/App.tsx:1499`);
+- отдельного «тонкого» артефакта: `.mboard-patch` = только дельта относительно
+ state vector получателя (для больших документов пересылать мегабайты истории
+ каждый раз — расточительно);
+- политики: что делать с `history` при слиянии (рекомендация: объединять
+ снимки обоих файлов, применять существующую `retention`).
+
+**Дополнительно:** `.mboard` — это JSON. Значит, его можно сливать и в Git
+(текстовый merge по узлам при аккуратном форматировании). Это отдельная
+демо-возможность: «документ, который живёт в репозитории и имеет историю и в
+Git, и внутри себя».
+
+### 3.5 Живая сессия: присутствие и совместные действия
+
+Минимальный набор, без которого «живой» режим ощущается сломанным:
+
+| Фича | Механика | Оценка |
+| --- | --- | --- |
+| Профиль участника | имя + цвет (детерминированно из `clientID`), хранится локально | S |
+| Курсоры с именем | `awareness.setLocalState({ cursor, viewport, selection })`, троттлинг 30-50 мс, интерполяция на приёмной стороне | M |
+| Аватары онлайн | список из `awareness.getStates()`, таймаут 30 с | S |
+| Общий лазер | тот же awareness-канал, `laserPos` уже есть (`src/App.tsx:243`) | S |
+| Подсветка «кто правит элемент» | `selection` в awareness → рамка цвета участника; заменяет блокировки (мягкая блокировка) | M |
+| Follow-режим | подписка на `viewport` лидера, плавный pan/zoom | M |
+| Общая отмена | `Y.UndoManager` с `trackedOrigins: new Set([LOCAL_ORIGIN])` | S |
+| Синхронный текст | `Y.Text` + `y-prosemirror` или собственный contenteditable-биндинг | L |
+| Голос | WebRTC DataChannel/MediaStream — **вне скоупа**, требует сервера и отдельной работы с приватностью | — |
+
+Важно: `transientFrame` (`src/App.tsx:260-262`) уже реализует правильный паттерн —
+локальная анимация без записи в CRDT, коммит на pointer-up. Его надо обобщить:
+**любое непрерывное взаимодействие пишет в CRDT не чаще N раз в секунду**, а
+промежуточные состояния публикуются в awareness. Иначе каждый drag — это десятки
+обновлений на всех клиентов и десятки tombstone'ов.
+
+### 3.6 Права, приватность, соответствие требованиям
+
+Целевая аудитория — регулируемые организации. Здесь MiroBoard может быть сильнее
+облачных аналогов, но только если не наделать ошибок:
+
+- **Секрет ≠ идентификатор комнаты.** В старой версии `collaborationSecret ?? roomId`
+ означал, что URL-параметр был и паролем (отмечено как дефект в
+ `docs/STRATEGIC_ROADMAP_2026_2027.md:335-338`). Новая схема: `roomId` открыт,
+ ключ — отдельно, передаётся вне канала.
+- **E2EE для P2P.** Ключ в фрагменте URL (`#key=...`) — фрагмент не уходит на
+ сервер и не попадает в логи. Обновления шифруются до отправки в signaling.
+- **Криптографическое стирание.** CRDT хранит удалённое содержимое в tombstone'ах.
+ «Удалил заметку» ≠ «заметки больше нет в файле». Если документ содержит
+ чувствительные данные, нужен явный режим «очистить историю» (уже есть:
+ `compactHistory`, `src/App.tsx:326`) + документированное предупреждение.
+ Это стоит вынести в `SECURITY.md`.
+- **Права (view / comment / edit).** В P2P-модели принудительно обеспечить нельзя
+ (клиент всегда может отправить update). Честный вариант: права — это
+ **серверная** функция для `websocket`-транспорта, а в P2P-режиме они
+ декларативные (UI скрывает инструменты, но не гарантирует). Сказать об этом
+ прямо в документации лучше, чем создать иллюзию защиты.
+- **Персональные данные.** `createdBy` уже пишется в файл. Как только появится
+ имя, файл начнёт содержать персональные данные участников. Нужна настройка
+ «обезличивать при экспорте» и явное уведомление в UI.
+
+---
+
+## 4. Функционал «как в Miro»: честная матрица
+
+Подробная версия с оценками — в [`MIRO_FEATURE_GAP_ANALYSIS.md`](./MIRO_FEATURE_GAP_ANALYSIS.md).
+Здесь — сводка, потому что часть пунктов является предусловием совместной работы.
+
+### Есть
+
+Перо, маркер, ластик (удаляет элемент целиком), стикеры, текст, прямоугольник,
+круг, стрелка, линия, эмодзи, палитра цветов, привязка к сетке (по умолчанию
+выключена, `src/App.tsx:237`), pan/zoom/fit, minimap, контекстное меню
+(правка/дублировать/на передний план/на задний план/удалить), горячие клавиши
+инструментов, шаблоны (BPMN-ориентированные), экспорт PNG/SVG/BPMN XML, импорт
+BPMN XML, `.mboard` save/load, история с таймлайном, симуляция.
+
+### Нет (и это заметно сразу)
+
+| Категория | Отсутствует | Почему важно для совместной работы |
+| --- | --- | --- |
+| Выделение | множественное выделение, marquee, Shift+клик | presence, группы, блокировки невозможны |
+| Буфер | копировать/вставить (Ctrl+C/V), дублировать несколько | совместная работа с рамками/группами |
+| Структура | группы, фреймы, `parentId` в памяти | «рамка = область ответственности участника» |
+| Связи | рёбра как сущности, привязка к узлу, подписи, waypoints | общий граф при параллельном редактировании |
+| Контент | изображения, rich text, таблицы, чек-листы | 80% реальных досок |
+| Навигация | поиск, outline, переход к элементу | доска >100 элементов нечитаема |
+| Обсуждение | комментарии, реакции, голосование, таймер | ядро командной работы в Miro |
+| Презентация | presentation mode, spotlight, follow | лазер уже есть, остальное нет |
+| Данные | CSV/JSON импорт стикеров, экспорт в Markdown/PDF | интеграции и отчётность |
+| Производительность | виртуализация/куллинг вьюпорта | 500+ узлов и 5+ клиентов одновременно |
+
+### Есть, но работает не как в Miro
+
+- **Ластик** стирает весь элемент (`src/App.tsx:1173-1176`), а не часть штриха.
+- **Стрелка** — самостоятельный элемент с координатами, а не связь между узлами;
+ при перемещении узла стрелка не едет за ним (кроме BPMN-потоков, которые
+ пересчитываются по `bpmnFlow.sourceId/targetId`).
+- **Текст** — плоская строка в `content.text`, без форматирования и без
+ совместимого редактирования.
+- **Шаблоны** — 6 образовательных BPMN-примеров; ретро/канбан/майндмэп/свамм-плейн
+ отсутствуют, хотя именно они приводят людей в Miro.
+
+---
+
+## 5. План: четыре этапа
+
+Оценка: S ≈ до 1 дня, M ≈ 2-5 дней, L ≈ 1-2 недели, XL ≈ 2-4 недели
+(один разработчик, с тестами).
+
+### Этап 0 — Фундамент (обязателен для всего остального) · 2-3 недели
+
+Без этого этапа любая фича совместной работы стоит вдвое дороже и ломает тесты.
+
+| # | Задача | Оценка | Статус |
+| --- | --- | --- | --- |
+| 0.1 | Локальный профиль: имя + цвет вместо анонимного UUID | S | ✅ сделано: `src/collab/user-profile.ts`, кнопка-аватар и панель в топ-баре, миграция с `localStorage['miro-author-id']` |
+| 0.2 | Множественное выделение: `selectedIds: Set`, marquee, Shift+клик | M | ✅ сделано: `src/collab/selection.ts`, `src/collab/marquee.ts`; marquee, Shift+клик, Shift+marquee, групповой drag, Delete/Ctrl+D/Ctrl+A/стрелки, счётчик выделения |
+| 0.3 | Буфер обмена: Ctrl+C/V/X, JSON в `clipboard`, дублировать несколько | S | ✅ `src/collab/clipboard.ts`: формат `application/x-miroboard+json`, валидация чужого JSON, новые id + перепривязка `bpmnFlow`, вставка одной транзакцией с origin `LOCAL_CLIPBOARD`; стрелки теперь тоже двигают выделение одной транзакцией |
+| 0.4 | Явные origins транзакций (`LOCAL_EDIT`, `LOCAL_GESTURE`, `RECOVERY`, …) | M | ✅ сделано: `src/collab/origins.ts`, UndoManager переведён на allow-list локальных origins |
+| 0.5 | Декомпозиция `App.tsx`: canvas-render, tool-state-machine, selection, viewport, panels | XL | 🟡 в работе: в `src/board/` — типы, геометрия, id, палитра, примеры, тема, шаги тура, `useSimulationSettings`, математика вьюпорта и `commands.ts`; в `src/collab/` — selection, marquee, clipboard, origins, user-profile; в `src/components/` — 19 компонентов. `App.tsx` = 2104 строки при целевых 800, `useState` 63 → 54. Остаток — `renderElement` (~230 строк), обработчики указателя, BPMN/симуляция, файлы. Перенос разметки исчерпан; цель 800 достижима только через разделение состояния доски (отдельный этап, за рамками 0.x) |
+| 0.6 | Командный слой: все мутации через `commands/*` с явной транзакцией | M | ✅ `src/board/commands.ts`: add/update/delete/deleteMany/updateMany/move/duplicate/bringToFront. Два инварианта в одном месте — одно действие = одна транзакция (один шаг undo, один чекпоинт, один update для пиров) и каждая запись с origin. `updateSelected` перестал быть циклом. 27 тестов против настоящих функций вместо 6 против копий кода в тест-файле |
+
+Покрытие Этапа 0: 263 unit-теста, включая jsdom-smoke всего приложения
+(`src/app-smoke.test.tsx`) и два browser-level набора — `tests/multi-select.spec.ts`
+(9 сценариев) и `tests/clipboard.spec.ts` (6 сценариев). Все 102 e2e-теста в CI
+зелёные (прогон 35564158429).
+
+**Извлечённый урок (0.4): переименование origin — не локальное изменение.**
+После введения origins покраснели 11 e2e-тестов, и причин оказалось две, обе
+найдены только через CI.
+
+*Причина 1 — «Не сохранено» после сохранения (6 наборов).* Все они грузят
+учебный пример перед сохранением. Загрузка вызывает `setArrivalClasses`/
+`setRolePolicies`, те попадают в `simulationProfile`, а он запускает эффект,
+пишущий `profileConfig` обратно в документ. Против этого эха существует
+`profileConfigHydratingRef`, и он определял «конфиг пришёл из документа»
+проверкой `origin === RECOVERY_ORIGIN` — верной ровно до того, как открытие
+файла было переименовано в `LOAD`. Эхо стало считаться правкой и приходило
+*после* завершения сохранения. Исправлено проверкой `NON_EDIT_ORIGINS.has(...)`.
+
+Важно: первая гипотеза (грязный трекер не знает про `LOAD`) была **опровергнута
+CI** — фикс не изменил число падений. Трекер всё равно стоит читать политику из
+`src/collab/origins.ts`, но причиной был другой потребитель того же origin.
+Вывод для 0.5/0.6: при переименовании origin нужно найти *всё*, что на нём
+ветвится; на момент правки таких мест было два, и оба молчали при tsc и eslint.
+
+*Причина 2 — marquee не запускался (5 тестов).* Плашка «N элем.» — обычный div в
+левом верхнем углу холста, ровно там, где начинается рамка выделения, — глотала
+`pointerdown`. Она появляется только на непустой доске, поэтому падения
+выглядели как проблема выделения. Исправлено `pointer-events-none`.
+
+Попутно найдена настоящая гонка в приложении: `handlePointerUp` достраивал жест
+из React-состояния, записанного в `pointermove`, поэтому жест, отпущенный внутри
+одного кадра (флик), завершался с геометрией момента нажатия. Отсюда и
+«мигающие» тесты. Геометрия жестов вынесена в `src/board/gesture.ts` и считается
+от координат самого события.
+
+**Методический вывод.** jsdom не воспроизводит ни одну из причин: обе требуют
+реального браузера. Playwright в песочнице недоступен (CDN заблокирован), логи и
+артефакты CI — на недоступном blob-хосте. Единственный работающий канал — текст
+аннотаций, поэтому диагностика встраивалась в приложение, а спек выбрасывал
+собранный лог в сообщение об ошибке. Этот приём стоит помнить: он дал ответ за
+один прогон после того, как три раунда догадок ничего не дали.
+
+**Критерий готовности:** все unit- и e2e-тесты зелёные; `App.tsx < 800` строк;
+выделение множественное; копирование/вставка работают; в консоли нет дубликатов
+ключей React на доске из 500 элементов.
+
+### Этап 1 — CRDT v2 (данные, пригодные для слияния) · 2-3 недели
+
+| # | Задача | Оценка | Заметки |
+| --- | --- | --- | --- |
+| 1.1 | Новая схема: `nodes/edges: Y.Map`, `text: Y.Text` | L | ядро; см. 3.1 |
+| 1.2 | Fractional index для z-order, убрать `delete+push` | M | |
+| 1.3 | Разделение `contentDoc` (gc:true) / `historyDoc` (gc:false) | L | снимает блокер 3; требует пересмотра `snapshots.ts` и `state.ts` |
+| 1.4 | `schemaVersion: 2` + миграция + legacy-фикстуры | M | механизм уже есть (`migrations.ts`) |
+| 1.5 | Ребра в памяти как сущности (убрать `bpmnFlow` из `BoardElement`) | L | совпадает с Phase 3 стратегического роадмапа |
+| 1.6 | Слияние двух `.mboard`: state-vector diff, превью, конфликтные поля | L | уникальная фича, см. 3.4 |
+| 1.7 | Атрибуция: «кто изменил» из `createdBy` + история по автору | M | поле уже сохраняется, но не отображается |
+| 1.8 | Property-based тесты слияния (случайные параллельные правки, N итераций) | M | ловит класс багов, который руками не воспроизводится |
+
+**Критерий готовности:** два независимых документа, правившие один файл
+параллельно, сливаются без дубликатов `id` и без потери правок; одновременное
+редактирование текста сливается посимвольно; размер файла после 1000 правок
+не превышает задокументированного бюджета (например, ≤ 3× от текущего состояния —
+политика уже заявлена в `docs/STRATEGIC_ROADMAP_2026_2027.md:316-318`).
+
+### Этап 2 — Асинхронная совместная работа (без сервера) · 2 недели
+
+| # | Задача | Оценка |
+| --- | --- | --- |
+| 2.1 | Комментарии: `Y.Map`, пины на узлах и на точке холста, resolve, панель со списком | L |
+| 2.2 | UI слияния файлов: диалог, дифф по узлам, выбор в конфликтах, чекпоинт `merge:` | L |
+| 2.3 | `.mboard-patch`: тонкая дельта для пересылки | M |
+| 2.4 | Реакции/голоса на стикерах (`profileData.core.reactions`) + таймер фасилитации | M |
+| 2.5 | Экспорт «итоги обсуждения»: Markdown/CSV с комментариями и голосами | S |
+
+**Демо-сценарий:** «Мы втроём правили один документ на разных машинах без единого
+сервера, обменялись файлами, слили их, увидели кто что добавил, и получили единый
+документ с историей и всеми комментариями».
+
+### Этап 3 — Живая сессия (опционально, по умолчанию выключена) · 3-4 недели
+
+| # | Задача | Оценка |
+| --- | --- | --- |
+| 3.1 | `CollabTransport` интерфейс + `BroadcastChannelTransport` | M |
+| 3.2 | Awareness: курсоры, имена, выделения, вьюпорт, общий лазер | L |
+| 3.3 | Undo с `trackedOrigins: {LOCAL_ORIGIN}` + «своя» отмена | S |
+| 3.4 | UI сессии: создать/подключиться, список участников, статус соединения, выход | M |
+| 3.5 | `WebSocketTransport` + минимальный self-hosted relay (отдельный пакет, ~150 строк) | L |
+| 3.6 | E2EE-опция, ключ во фрагменте URL, предупреждение о tombstone'ах | M |
+| 3.7 | Follow-режим и presentation/spotlight | M |
+| 3.8 | E2E в CI: два браузера Playwright против локального relay, проверка слияния и отсутствия дубликатов | L |
+| 3.9 | `WebRTCTransport` со **своим** signaling (опция, без публичных серверов) | L |
+
+**Жёсткое требование:** офлайн-тест (`tests/offline.spec.ts`) и проверка «ноль
+внешних запросов в режиме по умолчанию» остаются зелёными. Совместная работа —
+опт-ин, с явным действием пользователя и явным индикатором в UI.
+
+### Этап 4 — Паритет с Miro по инструментам · параллельно, 4-6 недель
+
+Фреймы и группы, изображения, rich text, библиотека фигур, коннекторы с
+автомаршрутизацией, поиск/outline, шаблоны (ретро, канбан, майндмэп),
+презентационный режим, экспорт PDF/Markdown/CSV. Детальный список с оценками —
+в `MIRO_FEATURE_GAP_ANALYSIS.md`.
+
+---
+
+## 6. Что сознательно НЕ делаем
+
+| Не делаем | Почему |
+| --- | --- |
+| Публичные signaling-серверы по умолчанию | Именно это и было удалено в Phase 1 как нарушение офлайн-обещания и утечка идентификаторов досок |
+| Аккаунты, облачное хранение, серверная авторизация | Требует бэкенда и ломает «один HTML-файл с флешки» |
+| Видео/аудио-звонки | Отдельный продукт, высокая стоимость, низкая дифференциация |
+| Гонка за шириной библиотеки фигур Miro | Бесконечная работа без преимущества; см. риск «стать худшей версией Miro» в `docs/STRATEGIC_ROADMAP_2026_2027.md:794` |
+| Мобильное приложение | Вне скоупа |
+| Реалтайм-курсорики как главный маркетинг | Курсоры — гигиена, а не преимущество; преимущество — владение файлом и история |
+
+---
+
+## 7. Риски
+
+| Риск | Вероятность | Влияние | Митигция |
+| --- | --- | --- | --- |
+| Миграция схемы CRDT сломает историю существующих `.mboard` | Средняя | Высокое | Двойная запись в переходный период; legacy-фикстуры в CI; `gc:false`-документ сохраняется как есть, конвертация только при явном открытии v1 |
+| Этап 0 (декомпозиция) затянется и съест весь план | Высокая | Высокое | Делать strangler-fig батчами <150 строк с зелёными тестами между батчами; не смешивать рефакторинг и фичи в одном коммите |
+| Размер файла выйдет из-под контроля после включения истории на отдельный doc | Средняя | Среднее | Бюджет размера в CI с первого коммита; `retention` уже реализован (`src/history/retention.ts`) |
+| Живой мультиплеер окажется «как у Miro, но хуже» | Высокая | Среднее | Продавать async-first; живой режим — опция для LAN/своего сервера, не основной сценарий |
+| Производительность SVG-рендера на 500+ узлах и 5 клиентах | Высокая | Высокое | Замерить **до** оптимизации (профиль в `docs/STRATEGIC_ROADMAP_2026_2027.md:452`); кульминг вьюпорта и `React.memo` первыми, canvas-слой — только если замер это оправдает |
+| Приватность: имена и правки участников в файле, который уходит наружу | Средняя | Среднее | Настройка обезличивания при экспорте; предупреждение в UI; запись в `SECURITY.md` |
+| Тесты на параллелизм появятся после кода | Высокая | Высокое | Этап 1 начинается с property-based тестов слияния и пробы `docs/experiments/`, переведённой в постоянный набор |
+
+---
+
+## 8. Стратегическая развилка: стоит ли вообще делать живой мультиплеер
+
+`docs/STRATEGIC_ROADMAP_2026_2027.md:794` прямо предписывает:
+> «Compete on offline, portability, determinism and history — never on real-time
+> collaboration polish or breadth of shapes.»
+
+Запрос «сделать как в Miro» этому противоречит. Развилка решается так:
+
+**Аргументы за живой мультиплеер**
+
+- Без курсоров и presence продукт не воспринимается как «доска для команды» —
+ его не покажешь на воркшопе в реальном времени.
+- CRDT уже в стеке; предельная стоимость awareness-слоя невелика (M, а не XL).
+- Для портфолио «реализовал live-синхронизацию на Yjs с self-hosted relay и
+ E2EE» — сильный и проверяемый пункт.
+
+**Аргументы против**
+
+- Miro, Figma, tldraw, Excalidraw+ имеют команды и годы на polish. Догонять по
+ плавности курсоров — заведомо проигрышная гонка.
+- Живой режим требует сервер (или signaling), что размывает главное обещание —
+ «один HTML-файл без сети».
+- Основная аудитория (`README.md`: банки, госсектор, консалтинг) чаще работает
+ **асинхронно** и в закрытом контуре: общий диск, пересылка файла, ревью.
+
+**Рекомендация: гибрид, в таком порядке приоритетов**
+
+1. **Асинхронная совместная работа — это продукт.** Слияние файлов, комментарии,
+ атрибуция, голосование, воспроизводимая история. Уникально, соответствует
+ офлайн-обещанию, конкурентов нет.
+2. **Живой мультиплеер — опция для своего контура.** `websocket`-транспорт +
+ self-hosted relay (~150 строк, ставится внутри периметра). Продаётся как
+ «совместная работа в закрытой сети без интернета».
+3. **P2P/WebRTC — экспериментальная опция** с E2EE и явным предупреждением о
+ signaling-сервере. Не по умолчанию.
+
+Такая формулировка не противоречит стратегическому роадмапу: мы конкурируем
+**владением документа и историей**, а живой режим добавляем там, где он не
+требует чужой инфраструктуры.
+
+---
+
+## 9. Метрики успеха
+
+| Метрика | Сейчас | Цель после Этапа 1 | Цель после Этапа 3 |
+| --- | --- | --- | --- |
+| Потерянные правки при параллельном редактировании | 100 % (последний победил) | 0 | 0 |
+| Дубликаты `id` после слияния | возможны (доказано) | 0 | 0 |
+| Размер `yjsState` после 500 правок одного узла | 16.9 КБ, растёт линейно | ≤ 5 КБ (gc:true) | ≤ 5 КБ |
+| Доска из 500 узлов: pan/zoom | не замерено | ≥ 50 fps, замер в CI | ≥ 50 fps |
+| Внешние сетевые запросы в режиме по умолчанию | 0 | 0 | 0 |
+| Unit-тесты | 148 | 148 + ≥ 25 на слияние | то же |
+| E2E на два клиента | 0 | 1 (BroadcastChannel) | ≥ 5 (relay, presence, undo, reconnect, merge) |
+| `App.tsx`, строк | 2534 | < 800 | < 500 |
+
+---
+
+## 10. Найденные расхождения в документации (попутно)
+
+Не относится напрямую к совместной работе, но портит доверие к проекту — а
+доверие здесь и есть продукт.
+
+| Файл | Утверждение | Реальность |
+| --- | --- | --- |
+| `ACHIEVEMENTS.md:29` | «Canvas Rendering: HTML5 Canvas 2D API» | Рендер — **SVG** (``, ``, `` в `src/App.tsx:1498+`) |
+| `ACHIEVEMENTS.md:28` | «Zustand (state management)» | Zustand **не установлен** (`package.json`), состояние — `useState`/`useRef` |
+| `ACHIEVEMENTS.md:33` | «Custom binary format (.mboard), MessagePack-like» | `.mboard` — **JSON** (`src/format/mboard.ts`) |
+| `ACHIEVEMENTS.md:13` | «2.1 MB single-file offline bundle» | `dist/index.html` = **1.1 МБ** |
+| `docs/ROADMAP.md:30` | «Заменить публичные Yjs signaling-серверы управляемым собственным signaling» | Публичные серверы уже **удалены** в Phase 1; пункт устарел и вводит в заблуждение |
+| `README.md` | «История версий встроена… всё в одном `.mboard`-файле» | Верно; но про совместную работу README молчит, а `docs/OFFLINE_DEPLOYMENT.md:47` сообщает, что её нет. Стоит добавить явную строку в README, чтобы не создавать ложного ожидания |
+
+Рекомендация: завести правило «документация проверяется скриптом» там, где это
+возможно (размер бандла, наличие зависимостей, число тестов — всё это вычислимо
+в CI), и переписать `ACHIEVEMENTS.md` под фактическое состояние.
+
+---
+
+## 11. Следующий шаг
+
+Минимальный осмысленный первый шаг — **Этап 0, задачи 0.1-0.3** (профиль
+участника, множественное выделение, буфер обмена): они не требуют миграции схемы,
+заметны пользователю сразу и являются предусловием для всего остального.
+
+Параллельно — **1.8** (property-based тесты слияния) и перевод
+`docs/experiments/crdt-collaboration-probe.test.ts` в постоянный набор: тест,
+который сегодня документирует дефект, станет тестом, который не даст ему вернуться.
+
+---
+
+## 12. Класс дефектов: «данные защищены, интерфейс — нет»
+
+Найден при ревизии режима просмотра истории, но относится напрямую к
+совместной работе: там появится второй режим только для чтения (чужая
+блокировка, отставшая реплика), и ошибка воспроизведётся.
+
+Защита от записи в превью реализована **в слое данных** — `updateElement`,
+`addElement`, `deleteElement` и остальные мутаторы выходят по
+`if (previewSnapshot) return`. Это верно и достаточно для целостности
+документа. Но из этого **не следует**, что интерфейс не предложит действие,
+которое будет молча отброшено.
+
+Два подтверждённых случая (оба исправлены, оба с регрессионными тестами):
+
+| Дефект | Что видел пользователь | Коммит |
+|---|---|---|
+| Редактор текста у `rect`/`circle` не проверял `isPreview` | Двойной клик открывал редактор, текст набирался и молча исчезал по blur | `d1dab69` |
+| `Ctrl+A` читал `elements` (живой документ), а не `previewElements` | Выделялись невидимые объекты живого документа; `Ctrl+C` их копировал | `3854906` |
+| Заглушка пустой доски проверяла `elements.length` | Опустошив доску и открыв ранний снимок, пользователь видел снимок, накрытый «Начните творить» и кнопкой шаблонов | `1c2c6fd` |
+| Значок валидности BPMN описывал живой документ | В превью значок сообщал «BPMN OK» про доску, которой на экране нет | `be0e1ca` |
+
+Ревизия была сплошной: проверены все чтения `elements` в App.tsx на предмет
+того, попадают ли они в отрисовку. Контекстное меню, панели свойств,
+`MoreMenu` и остальные горячие клавиши защищены (pointerdown в превью выходит
+рано, кнопка меню `disabled={isPreview}`, вход и выход сбрасывают выделение и
+режим правки).
+
+Общее в обоих: запись действительно не происходила, страдала только правдивость
+интерфейса. Такие дефекты не ловятся проверками целостности данных и не видны
+в тестах, которые смотрят на состояние документа, — нужно утверждение о том,
+что интерфейс **предлагает**.
+
+Практические выводы:
+
+1. **Выделение — не мутация, и защита мутаторов его не покрывает.** Всё, что
+ читает `elements` в обход `renderedElements`, обязано отдельно учитывать
+ превью. На момент правки такое место было одно (`Ctrl+A`); при добавлении
+ любого «выделить по признаку» проверять заново.
+2. **Скрытый индикатор — плохой ориентир для теста.** Плашка с числом
+ выделенных намеренно скрыта в превью, поэтому тест «бейджа нет» проходил и
+ на сломанном коде. Утверждать нужно о наблюдаемом последствии — здесь
+ `Ctrl+C`, который перехватывает сочетание только когда есть что копировать.
+3. **Обязательно проверять, что тест краснеет без фикса.** Из четырёх правок
+ две первые версии тестов оказались бесполезны, и обе поймал только явный
+ откат фикса: одна утверждала про намеренно скрытый в превью индикатор,
+ другая рисовала прямоугольник вместо BPMN-узла, так что проверяемый значок
+ отсутствовал по совершенно другой причине. Зелёный тест ничего не значит,
+ пока не видел красного.
+
+4. **Намерение, выраженное в одном месте, нужно проводить до конца.**
+ `visibleSimulationResult`/`Summary`/`BottleneckRole` гасились в превью
+ именно потому, что описывают живой документ, — а соседний значок BPMN
+ остался. Такие «почти согласованные» места стоит искать рядом с уже
+ написанной защитой.
+5. **Дублирование кода прячет расхождение режимов.** Редактор текста был
+ скопирован по четырём фигурам, и проверка read-only потерялась в двух из
+ них. Сведение в `src/components/ElementTextEditor.tsx` делает такую потерю
+ невозможной.
+
+---
+
+## 13. Атрибуция: `createdBy` пишется, но не проверяется
+
+`createdBy` — это весь нынешний механизм авторства. Панель профиля прямо
+обещает пользователю: имя и цвет «используются для подписи созданных объектов».
+При ревизии выяснилось:
+
+- поле проставляется в **21 месте** `App.tsx` (все пути создания его ставят —
+ проверено);
+- оно **не читается нигде** в интерфейсе;
+- **ни один тест** не утверждал, что приложение его действительно проставляет:
+ все упоминания в тестах были фикстурами, кроме одного — `preparePaste`.
+
+В этом зазоре и нашлось расхождение: `Ctrl+D` (`duplicateElements`) копировал
+`createdBy` оригинала, тогда как `Ctrl+C`/`Ctrl+V` (`preparePaste`) переписывал
+автора на того, кто вставляет. Для пользователя это одно и то же действие —
+«сделать копию». Сценарий, где это видно: открыть чужой файл и нажать `Ctrl+D` —
+новый объект оказывался подписан коллегой. Исправлено в `c67ac70`; автор стал
+необязательным аргументом, прежнее поведение закреплено отдельным тестом.
+
+Отдельный урок про **границы тестируемости**. Первая попытка покрыть авторство
+шла через `app-smoke.test.tsx` и отладочный мост `window.__MIROBOARD_DEBUG__`.
+Мост объявлен за флагом сборки `__MIROBOARD_DEBUG_HOOK__`
+(`MIROBOARD_DEBUG_HOOK=1`), которого юнит-тесты не ставят, поэтому все три
+теста утверждали бы против пустого списка. Они были удалены, а покрытие
+перенесено на слой команд, где значение и записывается. Вывод: прежде чем
+писать тест через отладочный мост, нужно убедиться, что мост включён в том
+окружении, где тест исполняется — иначе получается ещё один тест, который
+никогда не краснеет.
+
+Что это значит для совместной работы: перед вводом любого UI с авторством
+(аватары на объектах, «кто это сделал», фильтр по участнику) стоит помнить, что
+поле сегодня пишется «вслепую». Читающий UI сразу обнажит все места, где оно
+проставлено неверно, — поэтому такие расхождения дешевле искать сейчас.
+
+---
+
+## 14. Origins: правило должно жить в одном месте
+
+Раздел 10 уже описывал, как переименование origin открытия файла в `LOAD`
+сломало потребителя, который ветвился на `RECOVERY_ORIGIN`. Ревизия показала,
+что это была не единичная ошибка, а закономерность: **каждый потребитель,
+перечисляющий origins вручную, рано или поздно отстаёт от списка**.
+
+Найдено и исправлено:
+
+| Потребитель | Что было | Следствие | Коммит |
+|---|---|---|---|
+| `createCaptureTriggers` в `App.tsx` | Множество выписано вручную: `{RECOVERY_ORIGIN, HISTORY_RESTORE_ORIGIN}`, без `LOAD` | Открытие файла считалось правкой. Сразу ничего не происходило (одна загрузка — одно обновление при пороге в 50), но взводился таймер, и через 5 минут на нетронутой доске появлялась контрольная точка «Авто» | `d2df908` |
+
+Показательно, что двумя строками выше в том же `useEffect` трекеру «грязности»
+передаётся общий `NON_EDIT_ORIGINS` — ровно для той же цели. Правило было в
+одном месте, но этот вызов его не использовал.
+
+Отдельно исправлен **комментарий** к `NON_EDIT_ORIGINS` (`1b0dc3e`): он
+утверждал, что множество содержит `null` «для ещё не мигрированных путей». Это
+неверно, и миграция давно завершена — аудит всех записей в документ (20 вызовов
+`transact` в `App.tsx`, `board/commands.ts`, `persistence/updates.ts` и
+`history/`, плюс проверка записей вне транзакций) не нашёл ни одного
+непомеченного пути. Ошибочный комментарий стоял в файле, чья единственная
+задача — быть справкой о том, что означает origin.
+
+Заодно зафиксировано само поведение: непомеченная запись **считается правкой**.
+Теперь это не случайность, а решение — раз непомеченная запись стала багом,
+безопасное её прочтение состоит в том, что пользователь что-то изменил. Обратное
+(считать `null` неправящим) молча теряло бы настоящие правки, тогда как цена
+ошибки в текущую сторону — лишнее «Не сохранено».
+
+Вывод на будущее, особенно к моменту появления provider-origin удалённой
+синхронизации: **не перечисляйте origins по месту**. Любой новый потребитель
+должен импортировать множество из `src/collab/origins.ts`; ручной список — это
+отложенный баг, который не заметят ни tsc, ни eslint.
+
+---
+
+## 15. Исчезающие элементы: кто ещё держит id
+
+Прямое продолжение раздела 12, но причина другая. Там интерфейс предлагал
+действие в режиме только для чтения; здесь — **элемент исчезает сам**, без
+участия пользователя: undo/redo, загрузка файла, восстановление из истории и,
+как только появится совместная работа, удаление коллегой.
+
+Наблюдатель `yarray.observe` уже чистил выделение (`retainExisting`) именно по
+этой причине. Ревизия показала, что id элементов держат **семь** состояний, а
+чистилось одно. Проверены все:
+
+| Состояние | Вывод |
+|---|---|
+| `selectedIds` | Чистилось и раньше |
+| `contextMenu` | **Дефект.** Меню закреплено в мировых координатах: открыть долгим нажатием, нажать undo — меню висит над пустым холстом, и каждый его пункт молча ничего не делает. Исправлено в `308a680` |
+| `selectedElementId` | Безопасно: производное от `selectedIds` |
+| `editingText` | Безопасно: рендерится только внутри существующего элемента |
+| `bpmnFlowSourceId` | Безопасно: элемент ищется заново при использовании, и при неудаче состояние сбрасывается |
+| `anchorId` | Безопасно: отрисовка якоря выделения делает `find` и возвращает `null`, если элемент исчез; к записи не ведёт |
+| `activeBpmnTokenId` | Безопасно: только сравнивается с id отрисовываемого элемента (`activeBpmnTokenId === el.id`), поэтому исчезнувший id просто ни с чем не совпадает |
+
+Первая редакция этой таблицы содержала пять строк вместо семи: `anchorId` и
+`activeBpmnTokenId` попали в исходную выборку, но не были проверены, и таблица
+утверждала полноту, которой не было. Обе строки добавлены после отдельной
+проверки. Урок ровно тот же, что и с тестами: заявление о полноте ревизии стоит
+ровно столько же, сколько заявление о зелёном тесте, — пока его не проверили.
+
+Данные и здесь не страдали: слой команд отклоняет операции с неизвестным id
+(`deleteElement`, `bringToFront` и остальные возвращают `false`). Как и в
+разделе 12, страдала правдивость интерфейса — и по той же причине проверки
+целостности данных такие дефекты не ловят.
+
+Практический вывод к моменту включения совместной работы: **список мест,
+держащих id элемента, должен быть явным**. Сегодня их пять, проверять их надо
+вместе, и добавление шестого обязано сопровождаться ответом на вопрос «что
+будет, когда этот элемент удалит кто-то другой». У удалённого удаления, в
+отличие от undo, не будет даже той подсказки, что действие совершил сам
+пользователь.
+
+---
+
+## 16. Незавершённый жест — это состояние вне документа
+
+Перетаскивание и изменение размера живут в `transientFrame` (React-состояние) и
+попадают в Y.Doc одной транзакцией только на `pointerup`. Так сделано намеренно:
+трёхсекундный drag остаётся **одним** шагом отмены, а не 180.
+
+Цена этого решения — окно, в котором **экран и документ расходятся**. Всё, что
+читает документ во время жеста, видит позицию «до». Сохранение — тот случай,
+где это заметно: `Ctrl+S` во время перетаскивания записывал на диск старые
+координаты, тогда как на экране были новые. Проверено тестом: отрисовано
+`translate(280,280)`, сохранено `(100,100)`. Исправлено в `7724e27` —
+`flushGesture()` фиксирует незавершённый жест, и `saveBoard` вызывает его первым.
+
+Отдельно стоит отметить **ложную тревогу по ходу**: я заподозрил, что фиксация
+жеста стоила пользователю лишнего шага отмены, и написал тест на это. Оказалось,
+что один `Ctrl+Z` убирает прямоугольник целиком **и с правкой, и без неё** —
+`captureTimeout: 500` у `UndoManager` объединяет создание и перемещение в один
+элемент стека. Проверка против непропатченного кода отличила реальный побочный
+эффект от собственного домысла; тест переписан на то, что действительно важно —
+что отпускание после сохранения не сдвигает элемент повторно.
+
+Сохранение оказалось не единственным читателем. Ревизия всех путей, достижимых
+во время жеста, дала такую картину:
+
+| Читатель | Достижим во время жеста? | Итог |
+|---|---|---|
+| `saveBoard` (`Ctrl+S`) | Да | **Дефект**, исправлен в `7724e27` |
+| Горячие клавиши: `Ctrl+D`, `Ctrl+C`, `Ctrl+X`, стрелки, `Delete` | Да | **Дефект**, исправлен в `f9411ed`. `Ctrl+D` при элементе на экране в `(280,280)` создавал копию от позиции «до» — она появлялась в `(120,120)`, рядом с прямоугольником, от которого пользователь уже уехал |
+| Контекстное меню | Нет | Открывается долгим нажатием тем же указателем, что ведёт жест |
+| Панели свойств, палитра цвета | Нет | Клик мышью, а кнопка удерживается жестом |
+| Автоснимок по таймеру | Нет | Взводится только записью в документ, а во время жеста записей нет |
+| Восстановление в IndexedDB | Нет | Обе точки вызова находятся внутри сохранения и открытия, уже после `flushGesture()` |
+| BPMN-экспорт | Формально да | Координаты влияют только на раскладку, не на семантику модели |
+| PNG-экспорт | — | Сериализует SVG, то есть отрисованное состояние, — расхождения нет по построению |
+
+Барьер поставлен **один раз** в начале клавиатурного обработчика, после ранних
+выходов (ввод текста, панель симуляции, `Escape`), а не в каждой команде
+отдельно: иначе следующая добавленная горячая клавиша унаследовала бы дефект.
+
+Вывод к совместной работе: как только появится сетевая синхронизация, читателей
+станет больше, и «пока я тащу — коллеги видят старое положение» станет видимым
+поведением. Варианта два: либо продолжать явно
+фиксировать жест перед каждым чтением, либо транслировать промежуточные кадры
+как presence-состояние (вне Y.Doc, без записи в историю). Второе ближе к тому,
+как это делает Miro, и не ломает инвариант «один жест — один шаг отмены».
+
+---
+
+## 17. Границы доверия: приведение типа вместо проверки
+
+У приложения два входа для чужих данных: системный буфер обмена и открываемый
+`.mboard`-файл. Оба обязаны валидировать вход — и в основном валидируют:
+`sanitiseElement` строга к `id`, `type`, координатам и проверяет по списку
+`flowType`, `bpmnDurationDistribution`, тип элемента.
+
+Исключением оказался **`bpmnNodeType`**: в обоих местах он не проверялся, а
+приводился (`as BpmnNodeType`). Приведение типа в TypeScript — это заявление
+«я знаю, что здесь правильное значение», сделанное ровно там, где знать этого
+нельзя.
+
+Почему это не косметика: Rust-движок десериализует поле в **строгий enum**.
+Одно нераспознанное значение ломает разбор всей модели, поэтому один вставленный
+или загруженный элемент оставлял доску с сообщением «Не удалось проверить
+BPMN-модель.» — про **все** остальные узлы тоже. Проверено пробой до правки:
+`sanitiseElement` возвращал `bpmnNodeType: 'totallyBogus'` без возражений.
+Исправлено в `13ce33a`.
+
+Попутно:
+
+- Список допустимых значений существовал **в трёх копиях** (тип в
+ `board/types.ts`, приватная копия union в `format/mboard.ts`, и неявно — в
+ Rust). Теперь в TS он один, рядом с типом, с предикатом `isBpmnNodeType`;
+ `mboard.ts` импортирует его. Правило «format/ не импортирует App.tsx»
+ соблюдено: `board/types.ts` — модуль без зависимостей.
+- Найдена ошибка в фикстуре теста: `bpmnNodeType: 'start'` вместо `'startEvent'`.
+ Она не падала только потому, что `preparePaste` не санитизирует, а приведение
+ типа в самом тесте затыкало компилятор. **Приведение в тестах прячет ошибки
+ ровно так же, как в коде.**
+- JSON-схема `src/format/mboard.schema.json` **нигде не подключена** — это
+ документация, а не валидация. Полагаться на неё как на защиту нельзя.
+
+### Отдельно: как этот же фикс породил худший баг
+
+Первая версия правки (`13ce33a`) просто отбрасывала нераспознанный
+`bpmnNodeType`. Движок она защитила, но **нарушила задокументированную гарантию
+формата**: `docs/FORMAT.md` объявляет сохранение неизвестных данных свойством
+v1 — файл, открытый более новой версией и сохранённый старой, не должен терять
+то, чего старая не понимает. До правки `nodeType` от новой версии переживал
+цикл load→save; после — молча удалялся из файла пользователя.
+
+Это хуже исходного дефекта. Отказ движка был **виден** (сообщение об ошибке
+валидации), а потеря данных при сохранении — нет.
+
+Исправлено в `70ccde5`: значение не попадает в элемент в памяти, но хранится в
+`elementExtras` и записывается обратно при сохранении. Попутно пришлось научить
+`mergeUnknown` переносить сохранённый namespace `bpmn`, когда текущая версия не
+произвела своих BPMN-полей, — иначе элемент, у которого единственным BPMN-полем
+был непонятый `nodeType`, всё равно сохранялся как `profileData: {}`.
+
+Три вывода:
+
+1. **Отклонить значение и удалить значение — разные вещи.** Валидация на входе
+ защищает потребителя; она не даёт права стирать то, что принадлежит
+ пользователю. Для форматов с прямой совместимостью это означает «не
+ использовать, но сохранить».
+2. **Регрессию нашло чтение `docs/FORMAT.md`, а не тест.** Ни один из 421 теста
+ не падал: гарантия была описана в документации, но не закреплена проверкой.
+ Теперь закреплена.
+3. **Проба может лгать из-за неверного уровня вызова.** Первые попытки
+ проверить сохранение шли через `toDocElement` и показывали, что всё в
+ порядке. `elementExtras` применяются только в `serialise`, поэтому проверять
+ надо было полный цикл `deserialise`/`serialise`.
+
+### Правило: сначала выяснить, в чём именно вред
+
+Второй похожий случай — неизвестный `kind` (тип элемента) в загруженном
+файле — решился **иначе**, и это различие важнее самих правок.
+
+| | `bpmnNodeType` | `kind` (тип элемента) |
+|---|---|---|
+| Что ломается | Rust-движок не десериализует enum → валидация всей модели падает | Ничего не падает |
+| Прямая совместимость | **Терялась** после первой правки — пришлось восстанавливать | Работает: значение переживает load→save нетронутым |
+| Реальный вред | Видимая ошибка валидации | Перекос вида: `fitTransform` читает `x`/`y` независимо от типа, и «призрак» в `(5000,5000)` рядом с реальным элементом в начале координат ронял масштаб с 8 до **0.12** — доска выглядит пустой, и причина не видна |
+| Решение | Не пускать в память, но сохранить в `elementExtras` | Не трогать загрузку; исключить из `elementsInScope` |
+
+Отрисовка и `boundsOf` уже игнорируют неизвестный тип (оба возвращают `null`),
+поэтому в выделении рамкой дефекта не было — только во «вписать в экран». Если
+бы я по инерции применил к `kind` то же решение, что к `bpmnNodeType`, я бы
+добавил отказ на загрузке там, где вреда от значения нет, и рисковал бы снова
+испортить совместимость.
+
+**Правило:** прежде чем защищаться от недоверенного значения, установить, что
+именно оно ломает. Ответ определяет уровень, на котором надо вмешаться:
+валидация на входе, фильтрация у потребителя или ничего.
+
+Попутно закрыт долг: в `70ccde5` предикат `isElementType` был объявлен, но не
+подключён, а `clipboard.ts` продолжал держать собственную копию списка — ровно
+то дублирование, которое та правка устраняла. Исправлено в `338b610`.
+
+Вывод к совместной работе: удалённый участник — третий вход для недоверенных
+данных, и он будет писать прямо в Y.Doc, минуя `sanitiseElement`. Значит
+валидация должна применяться к входящим обновлениям, а не только к буферу и
+файлу. Полезное правило для ревью: **`as` на данных из внешнего источника —
+это пропущенная проверка**, и поиск по `as ` в путях загрузки/вставки стоит
+сделать регулярным.
diff --git a/docs/MIRO_FEATURE_GAP_ANALYSIS.md b/docs/MIRO_FEATURE_GAP_ANALYSIS.md
new file mode 100644
index 0000000..04b37d3
--- /dev/null
+++ b/docs/MIRO_FEATURE_GAP_ANALYSIS.md
@@ -0,0 +1,251 @@
+# Функциональный паритет с Miro: разбор по категориям
+
+> Дата анализа: 2026-09-20. Все позиции проверены по исходникам (`src/App.tsx` и
+> модули), ссылки на строки актуальны для коммита `6fe690d`.
+>
+> Смежный документ: [`COLLABORATION_ANALYSIS.md`](./COLLABORATION_ANALYSIS.md) —
+> совместная работа, CRDT-схема, транспорты. Этот документ — про инструменты и
+> возможности холста.
+
+Оценки: **S** ≤ 1 день · **M** 2-5 дней · **L** 1-2 недели · **XL** 2-4 недели.
+Ценность: ★☆☆ приятно · ★★☆ заметно · ★★★ критично для восприятия «это доска».
+
+---
+
+## 1. Сводка
+
+MiroBoard сегодня — это **BPMN-симулятор с прикрученным холстом**. Холст умеет
+рисовать 8 типов объектов и сохранять их в файл. По инструментальному набору он
+соответствует не Miro, а скорее раннему Excalidraw: достаточно для скетча, мало
+для рабочей сессии команды.
+
+При этом три вещи у MiroBoard **сильнее**, чем у Miro, и их нельзя потерять в
+погоне за паритетом:
+
+1. детерминированная симуляция процесса (Rust/WASM, Monte Carlo, SLA, очереди);
+2. история изменений **внутри файла** с таймлайном и restore-as-append;
+3. один HTML-файл, работающий с флешки без сети.
+
+Паритет нужен не «чтобы было как у Miro», а чтобы холст перестал быть узким
+местом: сейчас пользователь упирается в отсутствие множественного выделения,
+групп, поиска и изображений примерно на 30-й минуте работы.
+
+---
+
+## 2. Матрица по категориям
+
+### 2.1 Инструменты рисования
+
+| Возможность | Miro | MiroBoard | Оценка | Ценность |
+| --- | --- | --- | --- | --- |
+| Перо (freehand) | ✅ | ✅ `pen` | — | — |
+| Маркер (полупрозрачный толстый) | ✅ | ✅ `marker` (`stroke * 3`, `src/App.tsx:1356`) | — | — |
+| Ластик | ✅ стирает часть штриха | ⚠️ удаляет **весь элемент** (`src/App.tsx:1173-1176`) | M | ★★☆ |
+| Линия | ✅ | ✅ | — | — |
+| Стрелка | ✅ с стилями/изгибом | ✅ прямая, один стиль наконечника | M | ★★☆ |
+| Прямоугольник / круг | ✅ | ✅ | — | — |
+| Треугольник, ромб, пятиугольник, звезда, «облако» | ✅ | ❌ | M | ★★☆ |
+| Стили линии: пунктир, точка, толщина, изгиб | ✅ | ❌ (одна глобальная `strokeWidth`, `src/App.tsx:186`) | M | ★★★ |
+| Текст | ✅ | ✅ `text` | — | — |
+| Стикер | ✅ | ✅ `sticky`, 8 цветов | — | — |
+| Эмодзи/реакции | ✅ | ✅ `emoji`, 20 штук | — | — |
+| Указка/лазер | ✅ общий для всех | ⚠️ **локальный** (`laserPos` в useState, `src/App.tsx:243`) | M | ★★☆ |
+| Пипетка (взять цвет с холста) | ✅ | ❌ | S | ★☆☆ |
+| Заливка vs обводка раздельно | ✅ | ⚠️ один цвет красит и то и другое (`src/App.tsx:2342`) | M | ★★☆ |
+
+### 2.2 Объекты и контент
+
+| Возможность | Miro | MiroBoard | Оценка | Ценность |
+| --- | --- | --- | --- | --- |
+| Изображения (вставка, drop, resize, crop) | ✅ | ❌ (поле `assets` в формате пустое: `Record`, `src/format/types.ts:12`) | L | ★★★ |
+| Иконки / библиотека стикеров | ✅ | ❌ (только 20 эмодзи) | M | ★☆☆ |
+| Rich text: жирный, курсив, списки, ссылки | ✅ | ❌ плоская строка `content.text` | L | ★★★ |
+| Размер/гарнитура шрифта на элемент | ✅ | ❌ | M | ★★☆ |
+| Таблицы | ✅ | ❌ | L | ★☆☆ |
+| Графики (bar/line/pie) | ✅ | ⚠️ только результат симуляции в модалке | M | ★☆☆ |
+| Чек-листы / kanban-карточки | ✅ | ❌ (план есть: `docs/IDEON_INSPIRATION_PLAN.md:244,341`) | M | ★★☆ |
+| Таймеры, прогресс-бары, кнопки голосования | ✅ | ❌ | M | ★★☆ |
+| Видео/аудио/превью ссылок | ✅ | ❌ и **не надо** (требует сеть) | — | — |
+| Поворот объекта | ✅ | ⚠️ поле `rotation` существует (`src/App.tsx:76`) и сохраняется в файл, но **UI-ручки нет** | S | ★★☆ |
+| Прозрачность, тень, скругление | ✅ | ❌ | M | ★☆☆ |
+| Формулы/LaTeX | ✅ | ❌ | M | ★☆☆ |
+
+### 2.3 Структура и организация
+
+| Возможность | Miro | MiroBoard | Оценка | Ценность |
+| --- | --- | --- | --- | --- |
+| Множественное выделение (marquee, Shift+клик) | ✅ | ❌ `selectedId: string \| null` (`src/App.tsx:188`) | M | ★★★ |
+| Группы (Ctrl+G) | ✅ | ❌ | M | ★★★ |
+| Фреймы/контейнеры, вложенность, коллапс | ✅ | ❌ (`parentId` зарезервирован в формате, всегда `null`: `src/format/mboard.ts:113`) | L | ★★★ |
+| Выравнивание и распределение | ✅ | ❌ | M | ★★☆ |
+| Умные направляющие (snap к краям/центрам) | ✅ | ⚠️ только сетка, и та выключена по умолчанию (`snapGrid = false`, `src/App.tsx:237`) | M | ★★★ |
+| Порядок слоёв | ✅ | ✅ «на передний/задний план» (дискретно, через delete+push) | — | — |
+| Блокировка объекта | ✅ | ❌ | S | ★★☆ |
+| Копировать/вставить/дублировать | ✅ | ⚠️ только Ctrl+D для одного элемента (`src/App.tsx:1446`), буфера обмена нет | S | ★★★ |
+| Поиск по холсту | ✅ | ❌ | M | ★★★ |
+| Outline / дерево структуры | ✅ | ❌ | L | ★★☆ |
+| Теги и фильтрация | ✅ | ❌ | M | ★☆☆ |
+| Сохранённые виды (saved views) | ✅ | ❌ (запланировано на Phase 4) | M | ★☆☆ |
+
+### 2.4 Связи и граф
+
+| Возможность | Miro | MiroBoard | Оценка | Ценность |
+| --- | --- | --- | --- | --- |
+| Коннектор крепится к объекту и следует за ним | ✅ | ⚠️ **только** для BPMN-потоков: `bpmnEdgeAnchor` пересчитывает концы (`src/App.tsx:1657-1658`). Обычная стрелка — самостоятельный элемент с собственными `x/y/w/h` | L | ★★★ |
+| Точки излома (waypoints) | ✅ | ⚠️ поле есть в формате (`src/format/types.ts:78`), в памяти и UI — нет | M | ★★☆ |
+| Подписи на связях | ✅ | ⚠️ только для BPMN-условий/вероятностей (`src/App.tsx:1674-1682`) | S | ★★☆ |
+| Типы связей (ассоциация, зависимость, причинность) | ✅ | ❌ (в формате `kind` есть, в UI один вид) | M | ★★☆ |
+| Автомаршрутизация (обход препятствий) | ✅ | ❌ | L | ★☆☆ |
+| Авто-раскладка (дерево, иерархия, radial) | ✅ | ❌ (запланировано в Phase 3, детерминированно в Rust) | L | ★★★ |
+
+**Замечание по производительности:** каждая стрелка делает
+`renderedElements.find(...)` дважды за рендер (`src/App.tsx:1657-1658`) — это
+O(n²) на доске с большим числом связей. Нужен индекс `Map` — правка
+на пару строк, выигрыш заметный.
+
+### 2.5 Совместная работа
+
+Подробно — в `COLLABORATION_ANALYSIS.md`. Сводка:
+
+| Возможность | Miro | MiroBoard | Оценка |
+| --- | --- | --- | --- |
+| Живые курсоры и имена | ✅ | ❌ | M |
+| Одновременное редактирование текста | ✅ | ❌ (последний победил — доказано экспериментом) | L |
+| Комментарии и треды | ✅ | ❌ | L |
+| Реакции/голоса на стикерах | ✅ | ❌ (эмодзи есть, но как отдельные элементы) | M |
+| Follow / spotlight | ✅ | ❌ | M |
+| Приватный режим / блокировки | ✅ | ❌ | M |
+| История с авторством | ⚠️ платно, поверхностно | ✅ **сильнее**: снимки внутри файла, таймлайн, restore-as-append | — |
+| Совместная работа без сервера | ❌ | 🎯 **возможность**, которой нет ни у кого: слияние `.mboard`-файлов | L |
+
+### 2.6 Презентация и фасилитация
+
+| Возможность | Miro | MiroBoard | Оценка | Ценность |
+| --- | --- | --- | --- | --- |
+| Presentation mode (пошаговый обход) | ✅ | ❌ | M | ★★☆ |
+| Spotlight / «следите за мной» | ✅ | ❌ | M | ★☆☆ |
+| Таймер для фасилитации | ✅ | ❌ | S | ★★☆ |
+| Режим «не мешать» / приватный холст участника | ✅ | ❌ | L | ★☆☆ |
+| Экспорт слайдов в PDF | ✅ | ❌ (есть PNG/SVG всего холста) | M | ★★☆ |
+
+### 2.7 Шаблоны, импорт, экспорт
+
+| Возможность | Miro | MiroBoard | Оценка | Ценность |
+| --- | --- | --- | --- | --- |
+| Галерея шаблонов | ✅ сотни | ⚠️ 6 образовательных BPMN-примеров (`src/App.tsx:63`, `examples/*.json`) + 2 стартовые доски | M | ★★★ |
+| Ретро, канбан, customer journey, mind map, SWOT | ✅ | ❌ | M | ★★★ |
+| Импорт изображений | ✅ | ❌ | L | ★★★ |
+| Импорт CSV/JSON в стикеры | ✅ | ❌ | M | ★★☆ |
+| Импорт BPMN 2.0 XML | ❌ | ✅ **уникально** (`import_bpmn_xml`, Rust) | — | — |
+| Экспорт PNG / SVG | ✅ | ✅ (`src/App.tsx:871-888`) | — | — |
+| Экспорт BPMN 2.0 XML с DI | ❌ | ✅ **уникально** | — | — |
+| Экспорт Markdown / PDF / CSV | ✅ | ❌ | M | ★★☆ |
+| Публикация ссылки / embed | ✅ | ❌ и **не надо** (требует сервер) | — | — |
+
+### 2.8 BPMN и симуляция — здесь MiroBoard выигрывает
+
+Не «паритет», а преимущество, которое надо сохранять и усиливать:
+
+- валидация семантики BPMN с **отказом** считать неподдерживаемые конструкции
+ (`validate_bpmn`, `wasm/board-core/src/lib.rs:563`);
+- детерминированный token runner: XOR/AND split/join (`run_bpmn`, `lib.rs:1039`);
+- seeded Monte Carlo: Min/Mean/σ/P50/P90/P95/Max, % SLA (`simulate_bpmn_seed_string`, `lib.rs:1162`);
+- ресурсы: capacity, FIFO vs priority очереди, стоимость, utilization;
+- рабочий календарь, arrival classes, визуализация токена и bottleneck на холсте;
+- 6 учебных fixture'ов с объяснениями и проверками.
+
+У Miro ничего подобного нет. **Это и есть причина выбрать MiroBoard.**
+
+### 2.9 Платформа, производительность, доступность
+
+| Аспект | Состояние | Что делать | Оценка |
+| --- | --- | --- | --- |
+| Рендер | SVG, все элементы сразу, без кульминга вьюпорта | замерить на 500/1000/2000 узлах, потом viewport culling + `React.memo` | M |
+| Bundle | 1.1 МБ один файл | бюджет в CI (сейчас не зафиксирован) | S |
+| Настройки UI | тёмная тема, minimap, snap — **не сохраняются** между сессиями (`useState`, `src/App.tsx:198, 242, 237`); в localStorage только онбординг и author-id | сохранять в localStorage | S |
+| Доступность | 4 `aria-*`/`role` атрибута на весь файл; клавиатурного создания объектов нет | фокус-менеджмент, ARIA на тулбаре, keyboard-complete editing (цель Phase 4) | L |
+| Тач/планшет | pointer-события есть, но жестов (pinch-zoom двумя пальцами) не видно | проверить и доделать | M |
+| Мобильная версия | нет | вне скоупа | — |
+| Тесты | 148 unit + 88 e2e + 32 rust, все зелёные | держать планку, добавить тесты слияния и производительности | — |
+
+---
+
+## 3. Быстрые победы (до 1 дня каждая, заметны сразу)
+
+1. **Сохранять настройки UI** (тема, minimap, snap, цвет, толщина) в
+ `localStorage` — сейчас при перезагрузке всё сбрасывается.
+2. **Поворот объекта** — поле `rotation` уже есть в модели и в файле, не хватает
+ только ручки и применения `transform: rotate()` в рендере.
+3. **Копировать/вставить** (Ctrl+C/V/X) через JSON в буфере обмена.
+4. **Индекс элементов** `Map` для рендера стрелок — убирает O(n²).
+5. **Включить умную привязку по умолчанию** (к краям/центрам соседей, не только
+ к сетке) — самое заметное улучшение «ощущения качества» холста.
+6. **Раздельная заливка и обводка** в палитре (данные уже разделены в файле:
+ `style.color` и `style.fill`, `src/format/types.ts:34-38`).
+7. **Персистентность стиля стрелки** (пунктир/толщина/наконечник) — в файле уже
+ есть `arrowHead` (`src/format/types.ts:68`).
+8. **Поиск по тексту** (Ctrl+F) с переходом к элементу — даже без outline это
+ снимает главную боль на больших досках.
+9. **Блокировка объекта** (защита от случайного перетаскивания).
+10. **Пипетка** (EyeDropper API в Chromium).
+
+Суммарно ~неделя работы, и продукт ощущается заметно взрослее.
+
+---
+
+## 4. Что НЕ гоним за Miro
+
+| Не делаем | Почему |
+| --- | --- |
+| Библиотека из сотен фигур и иконок | Бесконечная работа без дифференциации; 12-15 хорошо сделанных форм покрывают 95% задач |
+| Видео/аудио, превью ссылок, web-embed | Требует сеть — прямое нарушение офлайн-обещания |
+| Публикация по ссылке, embed-виджеты | Требует хостинг и аккаунты |
+| Интеграции Jira/Slack/Notion/Google | Требуют серверной части и секретов; возможно позже как опциональные плагины с явным включением |
+| Мобильные приложения | Вне скоупа |
+| AI-генерация контента | Требует внешний API; возможна только как opt-in с ключом пользователя и явным предупреждением |
+| Гонка за плавностью живых курсоров | См. раздел 8 `COLLABORATION_ANALYSIS.md` |
+
+---
+
+## 5. Рекомендуемая последовательность
+
+```
+Неделя 1-2 Быстрые победы (раздел 3) ──────────────► продукт ощущается взрослее
+ │
+Неделя 2-5 Этап 0: множественное выделение, группы, буфер, origins,
+ декомпозиция App.tsx ─────────────────► предусловие для ВСЕГО
+ │
+Неделя 5-8 Этап 1: CRDT v2 (Y.Map/Y.Text, fractional index,
+ contentDoc/historyDoc) ────────────────► данные, пригодные к слиянию
+ │
+ ├──────────────► Этап 2: async-коллаборация (комментарии, слияние файлов,
+ │ реакции, голоса) ──────────────► уникальное преимущество
+ │
+ └──────────────► Этап 4: фреймы, изображения, rich text, коннекторы,
+ поиск/outline, шаблоны ────────► паритет по инструментам
+
+Неделя 8+ Этап 3: живой режим (BroadcastChannel → WebSocket relay → WebRTC)
+```
+
+Этап 0 и Этап 1 — не «скучная подготовка», а единственная последовательность,
+при которой фреймы, группы и коннекторы не придётся переделывать дважды: все они
+опираются на `parentId`, рёбра как сущности и множественное выделение.
+
+---
+
+## 6. Критерии готовности по категориям
+
+- **Инструменты:** 15+ форм, стили линии (сплошная/пунктир/толщина), раздельные
+ заливка и обводка, поворот, ластик стирает часть штриха.
+- **Структура:** множественное выделение, группы, фреймы с вложенностью и
+ коллапсом, выравнивание, умные направляющие, поиск, блокировка.
+- **Связи:** коннектор крепится к объекту и следует за ним, waypoints, подписи,
+ 3+ типа связей, авто-раскладка (детерминированная, в Rust).
+- **Контент:** изображения с дедупликацией по хэшу и предупреждением о размере,
+ rich text с совместимым редактированием, экспорт в Markdown.
+- **Совместная работа:** слияние двух файлов без потери правок, комментарии,
+ атрибуция автора, живой режим через свой relay при нуле внешних запросов в
+ режиме по умолчанию.
+- **Производительность:** 500 узлов ≥ 50 fps pan/zoom, замер в CI; бюджет размера
+ файла и бандла в CI.
+- **Доступность:** создание и правка доски только с клавиатуры, подтверждено e2e.
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
index bb1dd9e..6ab3deb 100644
--- a/docs/ROADMAP.md
+++ b/docs/ROADMAP.md
@@ -25,8 +25,27 @@ GitHub хранит опубликованную историю. Git и jj об
undo. Rust/WASM содержит детерминированную доменную логику, React/Yjs — UI и
совместную работу. Новые функции сначала получают учебный fixture и тест.
+## Совместная работа и паритет с Miro
+
+Отдельный анализ (2026-09-20) с проверенными по исходникам фактами, оценками и
+поэтапным планом:
+
+- [`COLLABORATION_ANALYSIS.md`](./COLLABORATION_ANALYSIS.md) — что мешает
+ совместной работе (включая экспериментальное доказательство потери правок в
+ текущей CRDT-схеме), целевая архитектура, транспорты, async-слияние файлов;
+- [`MIRO_FEATURE_GAP_ANALYSIS.md`](./MIRO_FEATURE_GAP_ANALYSIS.md) — матрица
+ функционального паритета с Miro по категориям и быстрые победы;
+- [`experiments/`](./experiments/) — воспроизводимые пробы, на которые ссылается анализ.
+
## Production hardening
-- Заменить публичные Yjs signaling-серверы управляемым собственным signaling;
-- разделить большой UI-компонент и добавить browser-level тесты для Simulation;
-- сохранять Git history в UI через build-time generated manifest, а не вручную.
+- Публичные Yjs signaling-серверы уже удалены в Phase 1 (см. `docs/architecture.md`).
+ Актуальная задача — не «заменить» их, а ввести собственный opt-in транспорт
+ (`BroadcastChannel` → self-hosted WebSocket relay → WebRTC со своим signaling);
+- разделить большой UI-компонент (`src/App.tsx`, 2534 строки) и добавить browser-level
+ тесты для Simulation;
+- сохранять Git history в UI через build-time generated manifest, а не вручную;
+- зафиксировать в CI бюджеты: размер `dist/index.html`, размер `.mboard` после
+ N правок, fps на доске из 500 узлов;
+- привести `ACHIEVEMENTS.md` в соответствие с кодом (Canvas 2D → SVG, Zustand не
+ используется, «MessagePack-like» → JSON, размер бандла 2.1 МБ → 1.1 МБ).
diff --git a/docs/experiments/README.md b/docs/experiments/README.md
new file mode 100644
index 0000000..af438d9
--- /dev/null
+++ b/docs/experiments/README.md
@@ -0,0 +1,31 @@
+# Эксперименты / Probes
+
+Файлы здесь — **не часть тестового набора**. Корневой `vite.config.ts` включает в
+Vitest только тесты из `src`, поэтому эти пробы не запускаются в CI и не влияют
+на сборку и на `npm test`.
+
+Запуск вручную (нужен `npm ci`):
+
+```bash
+npm run probe
+```
+
+Скрипт использует собственный конфиг `docs/experiments/vitest.config.ts`.
+
+## crdt-collaboration-probe.test.ts
+
+Измеряет, как текущая CRDT-схема (`Y.Array` + замена элемента
+целиком в `src/persistence/updates.ts`) поведёт себя при реальном
+многопользовательском редактировании, и сравнивает её со схемой
+`Y.Map` + `Y.Text`. Результаты процитированы в
+`docs/COLLABORATION_ANALYSIS.md`, раздел 2 «Блокеры».
+
+Тесты **A** и **B** намеренно падают: они документируют дефект, а не регрессию.
+Поэтому `npm run probe` завершается с кодом 1 — это ожидаемо. Когда схема CRDT
+будет переведена на `Y.Map`/`Y.Text` (Этап 1 плана), эти пробы надо перенести в
+`src/` как постоянные тесты и обратить утверждения: дубликатов `id` быть не
+должно, а параллельные правки текста обязаны сливаться.
+
+Тесты **C**, **D**, **E** проходят и дают метрики: рост размера update'а при
+`gc:false`, стоимость поиска индекса в `commitElementUpdate`, и контрольное
+поведение целевой схемы.
diff --git a/docs/experiments/crdt-collaboration-probe.test.ts b/docs/experiments/crdt-collaboration-probe.test.ts
new file mode 100644
index 0000000..56b547b
--- /dev/null
+++ b/docs/experiments/crdt-collaboration-probe.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+import * as Y from 'yjs'
+import { commitElementUpdate } from '../../src/persistence/updates'
+
+type El = { id: string; x: number; color: string; text?: string }
+
+function sync(a: Y.Doc, b: Y.Doc) {
+ Y.applyUpdate(b, Y.encodeStateAsUpdate(a, Y.encodeStateVector(b)))
+ Y.applyUpdate(a, Y.encodeStateAsUpdate(b, Y.encodeStateVector(a)))
+}
+
+describe('probe: current CRDT shape under concurrency', () => {
+ it('A: two clients editing DIFFERENT fields of the same element', () => {
+ const a = new Y.Doc({ gc: false }); const b = new Y.Doc({ gc: false })
+ const ya = a.getArray('elements'); const yb = b.getArray('elements')
+ a.transact(() => ya.push([{ id: 'n1', x: 0, color: 'red' }]))
+ sync(a, b)
+ // concurrent: A moves the node, B recolors it
+ commitElementUpdate(a, ya, 'n1', { x: 100 })
+ commitElementUpdate(b, yb, 'n1', { color: 'blue' })
+ sync(a, b)
+ const merged = ya.toArray()
+ console.log('A) merged element =', JSON.stringify(merged), 'count =', merged.length)
+ expect(merged.length).toBe(1)
+ })
+
+ it('B: concurrent text edits (plain string field vs Y.Text)', () => {
+ const a = new Y.Doc({ gc: false }); const b = new Y.Doc({ gc: false })
+ const ya = a.getArray('elements'); const yb = b.getArray('elements')
+ a.transact(() => ya.push([{ id: 'n1', x: 0, color: 'red', text: 'hello world' }]))
+ sync(a, b)
+ commitElementUpdate(a, ya, 'n1', { text: 'hello world (A)' })
+ commitElementUpdate(b, yb, 'n1', { text: 'hello WORLD (B)' })
+ sync(a, b)
+ console.log('B) text after merge =', JSON.stringify(ya.toArray()[0].text), '| b sees:', JSON.stringify(yb.toArray()[0].text))
+ expect(ya.toArray().length).toBe(1)
+ })
+
+ it('C: gc:false tombstone growth over 500 drag steps', () => {
+ const doc = new Y.Doc({ gc: false })
+ const arr = doc.getArray('elements')
+ doc.transact(() => arr.push([{ id: 'n1', x: 0, color: 'red' }]))
+ const sizes: number[] = []
+ for (let i = 1; i <= 500; i++) {
+ commitElementUpdate(doc, arr, 'n1', { x: i })
+ if (i % 125 === 0) sizes.push(Y.encodeStateAsUpdate(doc).byteLength)
+ }
+ console.log('C) update bytes after 125/250/375/500 single-field moves =', sizes.join(' -> '))
+ const gcDoc = new Y.Doc({ gc: true })
+ const gcArr = gcDoc.getArray('elements')
+ gcDoc.transact(() => gcArr.push([{ id: 'n1', x: 0, color: 'red' }]))
+ for (let i = 1; i <= 500; i++) commitElementUpdate(gcDoc, gcArr, 'n1', { x: i })
+ console.log('C) same with gc:true =', Y.encodeStateAsUpdate(gcDoc).byteLength, 'bytes')
+ expect(sizes.length).toBe(4)
+ })
+
+ it('D: cost of index lookup in commitElementUpdate at 2000 elements', () => {
+ const doc = new Y.Doc({ gc: false })
+ const arr = doc.getArray('elements')
+ const many: El[] = Array.from({ length: 2000 }, (_, i) => ({ id: `n${i}`, x: i, color: 'red' }))
+ doc.transact(() => arr.push(many))
+ const t0 = performance.now()
+ for (let i = 0; i < 60; i++) commitElementUpdate(doc, arr, `n${1000 + i}`, { x: i })
+ const dt = performance.now() - t0
+ console.log('D) 60 updates on a 2000-element board =', dt.toFixed(1), 'ms (', (dt / 60).toFixed(2), 'ms per update )')
+ expect(dt).toBeGreaterThanOrEqual(0)
+ })
+
+ it('E: what a Y.Map-per-element schema would do instead', () => {
+ const a = new Y.Doc(); const b = new Y.Doc()
+ const make = (d: Y.Doc) => {
+ const nodes = d.getMap>('nodes')
+ const n = new Y.Map(); n.set('id', 'n1'); n.set('x', 0); n.set('color', 'red')
+ const t = new Y.Text('hello world'); n.set('text', t)
+ d.transact(() => nodes.set('n1', n))
+ return nodes
+ }
+ const na = make(a); const nb = make(b)
+ Y.applyUpdate(b, Y.encodeStateAsUpdate(a, Y.encodeStateVector(b)))
+ Y.applyUpdate(a, Y.encodeStateAsUpdate(b, Y.encodeStateVector(a)))
+ a.transact(() => { na.get('n1')!.set('x', 100) })
+ b.transact(() => { nb.get('n1')!.set('color', 'blue') })
+ sync(a, b)
+ const merged = na.get('n1')!
+ console.log('E) merged = x:', merged.get('x'), 'color:', merged.get('color'), '(both kept)')
+ // concurrent text
+ const a2 = new Y.Doc(); const b2 = new Y.Doc()
+ const m2a = make(a2); const m2b = make(b2)
+ sync(a2, b2)
+ a2.transact(() => { (m2a.get('n1')!.get('text') as Y.Text).insert(5, ' big') })
+ b2.transact(() => { (m2b.get('n1')!.get('text') as Y.Text).insert(0, 'Well, ') })
+ sync(a2, b2)
+ console.log('E) concurrent text merge =', JSON.stringify((m2a.get('n1')!.get('text') as Y.Text).toString()))
+ expect(true).toBe(true)
+ })
+})
diff --git a/docs/experiments/vitest.config.ts b/docs/experiments/vitest.config.ts
new file mode 100644
index 0000000..976dbc9
--- /dev/null
+++ b/docs/experiments/vitest.config.ts
@@ -0,0 +1,16 @@
+import path from 'node:path'
+import { defineConfig } from 'vitest/config'
+
+// Standalone config for the probes in this folder. The root vite.config.ts only
+// includes test files under src, so these experiments never run in CI — run them
+// explicitly with `npm run probe`.
+const repoRoot = path.resolve(__dirname, '../..')
+
+export default defineConfig({
+ test: {
+ environment: 'node',
+ globals: true,
+ root: repoRoot,
+ include: ['docs/experiments/**/*.test.ts'],
+ },
+})
diff --git a/package.json b/package.json
index deffb50..f9834c3 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,12 @@
"preview": "vite preview",
"typecheck": "tsc --noEmit",
"lint": "eslint .",
- "test": "node node_modules\\vitest\\vitest.mjs run",
- "test:watch": "node node_modules\\vitest\\vitest.mjs watch",
- "test:coverage": "node node_modules\\vitest\\vitest.mjs run --coverage",
+ "test": "vitest run",
+ "test:watch": "vitest watch",
+ "test:coverage": "vitest run --coverage",
"test:e2e": "playwright test",
- "test:rust": "cargo test --manifest-path wasm/board-core/Cargo.toml"
+ "test:rust": "cargo test --manifest-path wasm/board-core/Cargo.toml",
+ "probe": "vitest run --config docs/experiments/vitest.config.ts --reporter=verbose"
},
"dependencies": {
"clsx": "2.1.1",
diff --git a/playwright.config.ts b/playwright.config.ts
index ef0b719..9a3c470 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,6 +5,10 @@ export default defineConfig({
testIgnore: ['**/baseline-capture.spec.ts', '**/bpmn-validation-regression-suite.spec.ts', '**/bpmn-token-execution-regression-suite.spec.ts', '**/bpmn-token-visibility.spec.ts', '**/bpmn-simulation-parameter-regression-suite.spec.ts', '**/bpmn-resource-metrics-regression-suite.spec.ts', '**/bpmn-topology-edge-case-suite.spec.ts', '**/bpmn-authoring-regression-suite.spec.ts', '**/bpmn-migration-invariance-gate.spec.ts', '**/cross-history-simulation-integration.spec.ts'],
timeout: 60_000,
workers: 1,
+ // The html report is self-contained, so CI can publish *which* tests failed
+ // without anyone having to open the job logs — see
+ // scripts/summarize-playwright-report.mjs. Both output directories are gitignored.
+ reporter: [['list'], ['html', { open: 'never' }]],
// Playwright cannot reliably tear down its cmd.exe-owned Vite child on Windows.
// Windows callers start and stop preview explicitly through services.yaml instead.
webServer: process.platform === 'win32' ? undefined : {
diff --git a/scripts/summarize-playwright-report.mjs b/scripts/summarize-playwright-report.mjs
new file mode 100644
index 0000000..0c818dd
--- /dev/null
+++ b/scripts/summarize-playwright-report.mjs
@@ -0,0 +1,256 @@
+#!/usr/bin/env node
+/**
+ * Prints a compact pass/fail summary of an HTML Playwright report.
+ *
+ * CI job logs live in blob storage that is not always reachable (for example
+ * from a sandbox), but the job *summary* page is. This script unpacks the
+ * self-contained `playwright-report/index.html` and prints which tests failed
+ * and why, so the summary answers the only question that matters after a red
+ * run. Used by the 'Summarize end-to-end results' step in
+ * `.github/workflows/ci.yml`.
+ *
+ * Usage: node scripts/summarize-playwright-report.mjs [reportDir] [--annotations] [--contexts] [--page=N]
+ *
+ * With --annotations it prints GitHub workflow commands (`::error::`) instead of
+ * prose. That is not a convenience: annotations are the only CI channel this
+ * repo can actually read back, because both job logs and run artifacts are
+ * served from blob storage that is unreachable from a sandbox, while
+ * annotations come from the ordinary REST API.
+ *
+ * Always exits 0 — summarising must never change the job conclusion.
+ */
+import { existsSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { inflateRawSync } from 'node:zlib'
+
+const args = process.argv.slice(2)
+const annotationsOnly = args.includes('--annotations')
+// --contexts prints the aria snapshot Playwright attaches to a failure, which is
+// the closest thing to "what did the page look like" that survives without log
+// access: it shows the toolbar state and any toast next to the failed expect.
+const contextsOnly = args.includes('--contexts')
+// GitHub keeps at most 10 annotations of a level per step, so CI runs this
+// script once per page from a step of its own.
+const pageArg = args.find(arg => arg.startsWith('--page='))
+const annotationPage = Math.max(1, Number(pageArg?.slice('--page='.length) ?? 1))
+const reportDir = args.find(arg => !arg.startsWith('--')) ?? 'playwright-report'
+const indexPath = join(reportDir, 'index.html')
+
+function giveUp(reason) {
+ console.log(`could not summarise: ${reason}`)
+ process.exit(0)
+}
+
+if (!existsSync(indexPath)) giveUp(`no ${indexPath} (is the html reporter enabled?)`)
+
+const html = readFileSync(indexPath, 'utf8')
+// Playwright embeds the report as a zip inside ;
+// older builds assigned the same data URI to window.playwrightReportBase64. Accept both.
+const embedded =
+ /data:application\/zip;base64,([^<]+)<\/template>/.exec(html) ??
+ /window\.playwrightReportBase64\s*=\s*'data:application\/zip;base64,([^']+)'/.exec(html)
+if (!embedded) giveUp('report is not self-contained (no embedded zip)')
+
+const zipBuffer = Buffer.from(embedded[1], 'base64')
+
+/** Minimal stored/deflated zip reader, so the summary does not depend on `unzip` being installed. */
+function readZipDirectory(buffer) {
+ const directory = new Map()
+ let endOfDirectory = -1
+ for (let i = buffer.length - 22; i >= Math.max(0, buffer.length - 65_557); i -= 1) {
+ if (buffer.readUInt32LE(i) === 0x06_05_4b_50) {
+ endOfDirectory = i
+ break
+ }
+ }
+ if (endOfDirectory < 0) throw new Error('not a zip file (no end-of-central-directory record)')
+ const entryCount = buffer.readUInt16LE(endOfDirectory + 10)
+ let cursor = buffer.readUInt32LE(endOfDirectory + 16)
+ for (let i = 0; i < entryCount; i += 1) {
+ if (buffer.readUInt32LE(cursor) !== 0x02_01_4b_50) break
+ const method = buffer.readUInt16LE(cursor + 10)
+ const compressedSize = buffer.readUInt32LE(cursor + 20)
+ const nameLength = buffer.readUInt16LE(cursor + 28)
+ const extraLength = buffer.readUInt16LE(cursor + 30)
+ const commentLength = buffer.readUInt16LE(cursor + 32)
+ const localHeaderOffset = buffer.readUInt32LE(cursor + 42)
+ const name = buffer.toString('utf8', cursor + 46, cursor + 46 + nameLength)
+ directory.set(name, { method, compressedSize, localHeaderOffset })
+ cursor += 46 + nameLength + extraLength + commentLength
+ }
+ return directory
+}
+
+function readZipEntry(buffer, entry) {
+ const local = entry.localHeaderOffset
+ const nameLength = buffer.readUInt16LE(local + 26)
+ const extraLength = buffer.readUInt16LE(local + 28)
+ const start = local + 30 + nameLength + extraLength
+ const payload = buffer.subarray(start, start + entry.compressedSize)
+ if (entry.method === 0) return payload
+ if (entry.method === 8) return inflateRawSync(payload)
+ throw new Error(`unsupported compression method ${entry.method}`)
+}
+
+function readJson(buffer, directory, name) {
+ const entry = directory.get(name)
+ if (!entry) return undefined
+ return JSON.parse(readZipEntry(buffer, entry).toString('utf8'))
+}
+
+let directory
+try {
+ directory = readZipDirectory(zipBuffer)
+} catch (error) {
+ giveUp(error.message)
+}
+
+const index = readJson(zipBuffer, directory, 'report.json')
+if (!index) giveUp('report.json missing from the embedded zip')
+
+// Playwright colours error messages for a terminal; the summary is plain text.
+// The escape character is built with fromCharCode because a literal control
+// character in this source file would not survive every editor and pipeline.
+const ANSI_SEQUENCE = new RegExp(String.fromCharCode(27) + '\\[[0-9;]*m', 'g')
+const stripAnsi = value => value.replaceAll(ANSI_SEQUENCE, '')
+
+function firstErrorOf(test, detailedTests) {
+ const detailed = detailedTests.find(candidate => candidate.testId === test.testId)
+ for (const result of detailed?.results ?? []) {
+ for (const error of result.errors ?? []) {
+ const message = stripAnsi(error.message ?? '')
+ .split('\n')
+ .map(line => line.trimEnd())
+ .filter(line => line.length > 0)
+ if (message.length) return message.slice(0, 4).join(' | ')
+ }
+ }
+ return ''
+}
+
+/** Path of the error-context attachment (an aria snapshot) for a failed test, if any. */
+function findContextAttachment(test, detailedTests) {
+ const detailed = detailedTests.find(candidate => candidate.testId === test.testId)
+ for (const result of detailed?.results ?? []) {
+ for (const attachment of result.attachments ?? []) {
+ if (attachment.contentType === 'text/markdown' && attachment.path) return attachment.path
+ }
+ }
+ for (const result of test.results ?? []) {
+ for (const attachment of result.attachments ?? []) {
+ if (attachment.contentType === 'text/markdown' && attachment.path) return attachment.path
+ }
+ }
+ return undefined
+}
+
+const failures = []
+let passed = 0
+let skipped = 0
+let flaky = 0
+
+for (const file of index.files ?? []) {
+ // `report.json` carries one line per test; the per-file payload carries the
+ // error messages. Look the latter up lazily so a green run stays cheap.
+ let detailedTests = []
+ const loadDetails = () => {
+ if (!detailedTests.length) {
+ detailedTests = readJson(zipBuffer, directory, `${file.fileId}.json`)?.tests ?? []
+ }
+ return detailedTests
+ }
+ for (const test of file.tests ?? []) {
+ const label = `[${file.fileName}:${test.location?.line ?? '?'}] ${test.title}`
+ if (test.outcome === 'skipped') {
+ skipped += 1
+ continue
+ }
+ if (test.outcome === 'flaky') flaky += 1
+ if (test.ok) {
+ passed += 1
+ continue
+ }
+ failures.push({
+ label,
+ error: firstErrorOf(test, loadDetails()),
+ outcome: test.outcome,
+ context: findContextAttachment(test, loadDetails()),
+ })
+ }
+}
+
+const stats = index.stats ?? {}
+
+/**
+ * Workflow-command escaping. A property also cannot contain ':' or ',', and a
+ * message cannot contain a newline, so both are percent-encoded.
+ */
+function escapeProperty(value) {
+ return value.replaceAll('%', '%25').replaceAll('\r', '%0D').replaceAll('\n', '%0A').replaceAll(':', '%3A').replaceAll(',', '%2C')
+}
+
+function escapeMessage(value) {
+ return value.replaceAll('%', '%25').replaceAll('\r', '%0D').replaceAll('\n', '%0A')
+}
+
+const ANNOTATION_LIMIT = 10
+
+if (contextsOnly) {
+ for (const failure of failures.slice(0, ANNOTATION_LIMIT)) {
+ if (!failure.context) continue
+ let text
+ try {
+ text = readFileSync(join(reportDir, failure.context), 'utf8')
+ } catch {
+ continue
+ }
+ // The attachment starts with boilerplate (instructions, error, test source);
+ // the aria snapshot of the page at the moment of failure is at the end and is
+ // the part worth spending annotation characters on.
+ const snapshotAt = text.indexOf('# Page snapshot')
+ const useful = snapshotAt >= 0 ? text.slice(snapshotAt) : text
+ const trimmed = useful.split('\n').filter(line => line.trim().length > 0).join(' | ').slice(0, 1_200)
+ if (trimmed) console.log(`::notice title=CONTEXT ${escapeProperty(failure.label.slice(0, 110))}::${escapeMessage(trimmed)}`)
+ }
+ process.exit(0)
+}
+
+if (annotationsOnly) {
+ if (!failures.length) {
+ if (annotationPage === 1) console.log(`::notice title=Playwright::all ${passed} end-to-end tests passed`)
+ process.exit(0)
+ }
+ const from = (annotationPage - 1) * ANNOTATION_LIMIT
+ if (from >= failures.length) process.exit(0) // this page is empty
+ for (const failure of failures.slice(from, from + ANNOTATION_LIMIT)) {
+ const title = escapeProperty(`e2e ${failure.label}`.slice(0, 140))
+ const message = escapeMessage(failure.error || `test failed (${failure.outcome})`)
+ console.log(`::error title=${title}::${message.slice(0, 400)}`)
+ }
+ if (annotationPage === 1) {
+ const hidden = Math.max(0, failures.length - ANNOTATION_LIMIT)
+ console.log(
+ hidden > 0
+ ? `::notice title=Playwright::${failures.length} e2e tests failed, ${hidden} more annotated by the next step`
+ : `::notice title=Playwright::${failures.length} of ${stats.total ?? '?'} e2e tests failed`,
+ )
+ }
+ process.exit(0)
+}
+
+console.log(
+ `total: ${stats.total ?? passed + skipped + failures.length}, ` +
+ `passed: ${passed}, failed: ${failures.length}, flaky: ${flaky}, skipped: ${skipped}`,
+)
+
+if (!failures.length) {
+ console.log('no failures')
+ process.exit(0)
+}
+
+console.log('')
+console.log('failed tests:')
+for (const failure of failures) {
+ console.log(`FAIL ${failure.label}${failure.outcome === 'flaky' ? ' (flaky)' : ''}`)
+ if (failure.error) console.log(` ${failure.error}`)
+}
diff --git a/src/App.tsx b/src/App.tsx
index d18c9b5..f31424f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,15 @@
import { useEffect, useRef, useState, useMemo, useCallback } from 'react'
import * as Y from 'yjs'
-import { clamp_scale, export_bpmn_xml, import_bpmn_xml, run_bpmn, simulate_bpmn_seed_string, snap_to_grid, validate_bpmn } from './wasm/board-core/board_core'
+import { clamp_scale, export_bpmn_xml, import_bpmn_xml, run_bpmn, simulate_bpmn_seed_string, validate_bpmn } from './wasm/board-core/board_core'
import { commitElementUpdate } from './persistence/updates'
+import { LOAD, LOCAL_CLIPBOARD, LOCAL_EDIT, LOCAL_GESTURE, LOCAL_ORIGINS, LOCAL_TEMPLATE, NON_EDIT_ORIGINS } from './collab/origins'
+import { PASTE_OFFSET, parseClipboard, preparePaste, serialiseSelection } from './collab/clipboard'
+import { readProfile, writeProfile, type UserProfile } from './collab/user-profile'
+import {
+ clearSelection, idsOf, isSelected as isIdSelected, primaryOf, removeFromSelection, retainExisting,
+ selectMany, selectOnly, toggleInSelection, unionSelection, type Selection,
+} from './collab/selection'
+import { normaliseRect, selectInRect, type Bounds } from './collab/marquee'
import { useFileDrop } from './hooks/useFileDrop'
import { DropTargetCue } from './components/DropTargetCue'
import { MiniMap } from './components/MiniMap'
@@ -9,6 +17,27 @@ import { RecoveryDivergenceNotice } from './components/RecoveryDivergenceNotice'
import { openDocument, openDroppedDocument, saveDocument, type FileSession, type OpenOutcome } from './persistence/files'
import { UnsavedChangesDialog } from './components/UnsavedChangesDialog'
import { SimulationModal } from './components/SimulationModal'
+import { TemplatesModal } from './components/TemplatesModal'
+import { LearningModulesModal } from './components/LearningModulesModal'
+import { ProjectHistoryModal } from './components/ProjectHistoryModal'
+import { BpmnTaskProperties } from './components/BpmnTaskProperties'
+import { BpmnFlowProperties } from './components/BpmnFlowProperties'
+import { ColorPicker } from './components/ColorPicker'
+import { BoardHeader } from './components/BoardHeader'
+import { ZoomControls, ElementCount } from './components/ZoomControls'
+import { CanvasBackground } from './components/CanvasBackground'
+import { ChangedInPreview, ResizeHandles } from './components/element-chrome'
+import { ElementTextEditor } from './components/ElementTextEditor'
+import { useSimulationSettings } from './board/use-simulation-settings'
+import { elementsInScope, fitTransform, screenToWorld as toWorld, wheelZoomFactor, zoomAround } from './board/viewport'
+import * as commands from './board/commands'
+import { BottomToolbar } from './components/BottomToolbar'
+import { ProfilePanel } from './components/ProfilePanel'
+import { OnboardingTour } from './components/OnboardingTour'
+import { Toast, type ToastTone } from './components/Toast'
+import { MoreMenu } from './components/MoreMenu'
+import { ContextMenu } from './components/ContextMenu'
+import { createTheme } from './board/theme'
import { addBeforeUnloadGuard, createDirtyTracker, RECOVERY_ORIGIN, type DirtyTracker } from './persistence/dirty'
import { captureSnapshot, fromBase64, HISTORY_RESTORE_ORIGIN, readSnapshot, restoreSnapshot, toBase64 } from './history/snapshots'
import { loadIntoDoc } from './history/state'
@@ -20,163 +49,29 @@ import { HistoryRetentionControls } from './history/HistoryRetentionControls'
import { attachRecoveryCache } from './persistence/indexeddb'
import { createRecoverySession, inspectRecoverySession, setRecoverySession } from './persistence/recovery-session'
import { adoptLegacyRooms, legacyDocumentIdFromCurrentUrl } from './persistence/legacy-adoption'
-import { bpmnSimulationFromProfileConfig, DEFAULT_BPMN_SIMULATION, withBpmnSimulation } from './format/profile-config'
+import { bpmnSimulationFromProfileConfig, withBpmnSimulation } from './format/profile-config'
import { serialise } from './format/mboard'
import type { DocHistory, DocMeta, HistorySnapshot, ProfileConfig } from './format/types'
import { HelpPanel } from './HelpPanel'
import './help-panel.css'
-import basicFixedExample from '../examples/basic-fixed.json'
-import parallelQueueExample from '../examples/parallel-queue.json'
-import slaCalendarExample from '../examples/sla-calendar.json'
-import batchWorkloadExample from '../examples/batch-workload.json'
-import priorityQueueExample from '../examples/priority-queue.json'
-import fifoPriorityExample from '../examples/fifo-vs-priority.json'
+import { bpmnEdgeAnchor, simplifyPath, smoothPathD, snapVal } from './board/geometry'
+import { dragFrame, resizeFrame, type DragInfo, type ResizeCorner, type ResizeInfo } from './board/gesture'
+import { genId } from './board/id'
+import { STICKY_COLORS } from './board/palette'
+import type {
+ BoardElement, BpmnNodeType, BpmnSimulationResult, ContextMenuAction, EducationalExample,
+ ImportedBpmnModel, PendingOpen, Point, Tool, WorkspaceMode,
+} from './board/types'
declare global {
interface Window {
__MIROBOARD_DEBUG__?: { version: string; createBpmnModel: () => unknown; validateBpmn: () => unknown; exportBpmnXml: () => string; runBpmn: () => unknown; simulateBpmn: (seed: number | string | bigint, runs: number) => BpmnSimulationResult; getElements: () => BoardElement[] }
}
}
-type Point = { x: number; y: number }
-type Tool = 'select' | 'pan' | 'pen' | 'marker' | 'eraser' | 'sticky' | 'text' | 'rect' | 'circle' | 'arrow' | 'line' | 'laser' | 'emoji' | 'bpmnStart' | 'bpmnTask' | 'bpmnEnd' | 'bpmnGateway' | 'bpmnParallel' | 'bpmnSequence'
-type BpmnNodeType = 'startEvent' | 'endEvent' | 'task' | 'xorGateway' | 'andGateway' | 'orGateway'
-type WorkspaceMode = 'board' | 'bpmn' | 'simulation'
const GITHUB_REPOSITORY = 'https://github.com/xodapi/miroboard'
declare const __MIROBOARD_VERSION__: string
declare const __MIROBOARD_HISTORY__: { commit: string; date: string; title: string; release?: string }[]
declare const __MIROBOARD_DEBUG_HOOK__: boolean
-type ImportedBpmnModel = {
- nodes: { id: string; type: string; name?: string; x?: number; y?: number; width?: number; height?: number; durationMs?: number; durationDistribution?: 'fixed' | 'uniform' | 'triangular'; durationMinMs?: number; durationModeMs?: number; durationMaxMs?: number; resourceRole?: string; costPerHour?: number; resourceCapacity?: number; priority?: number }[]
- flows: { id: string; sourceId: string; targetId: string; flowType?: 'sequence' | 'message'; condition?: string; probability?: number; isDefault?: boolean }[]
- arrivalClasses?: { count: number; intervalMs: number; priority: number }[]
- resourceRoles?: { name: string; capacity: number; queuePolicy?: QueuePolicy }[]
-}
-type QueuePolicy = 'fifo' | 'priority'
-type ArrivalClassDraft = { count: string; intervalSec: string; priority: string }
-type RolePolicyDraft = { capacity: string; queuePolicy: QueuePolicy }
-type BpmnSimulationResult = {
- seed: number; runs: number; completedRuns: number; simulationInstances: number; arrivalIntervalMs: number
- minDurationMs: number; meanDurationMs: number; standardDeviationMs: number
- p50DurationMs: number; p90DurationMs: number; p95DurationMs: number; maxDurationMs: number; meanCost: number
- slaTargetMs?: number; onTimeRate?: number; roleUtilization: { role: string; capacity: number; meanWorkloadMs: number; meanWaitingMs: number; utilization: number }[]; priorityClasses: { priority: number; instances: number; meanWaitingMs: number; meanDurationMs: number }[]
-}
-type EducationalExample = { title: string; explanation: string; checks: string[]; model: ImportedBpmnModel }
-const EDUCATIONAL_EXAMPLES = [basicFixedExample, parallelQueueExample, slaCalendarExample, batchWorkloadExample, priorityQueueExample, fifoPriorityExample] as unknown as EducationalExample[]
-interface BoardElement {
- id: string
- type: 'path' | 'sticky' | 'rect' | 'circle' | 'arrow' | 'line' | 'text' | 'emoji'
- x: number
- y: number
- w?: number
- h?: number
- points?: Point[]
- text?: string
- color: string
- stroke?: number
- fill?: string
- rotation?: number
- createdBy?: string
- emoji?: string
- zIndex?: number
- bpmnNodeType?: BpmnNodeType
- bpmnDurationMs?: number
- bpmnDurationDistribution?: 'fixed' | 'uniform' | 'triangular'
- bpmnDurationMinMs?: number
- bpmnDurationModeMs?: number
- bpmnDurationMaxMs?: number
- bpmnResourceRole?: string
- bpmnCostPerHour?: number
- bpmnResourceCapacity?: number
- bpmnPriority?: number
- bpmnFlow?: { sourceId: string; targetId: string; flowType?: 'sequence' | 'message'; condition?: string; probability?: number; isDefault?: boolean }
-}
-const COLORS = [
- '#FF5D5D', '#FF9F43', '#FFD93D',
- '#6BCB77', '#4D96FF', '#9D65C9',
- '#EC4899', '#000000', '#FFFFFF'
-]
-const STICKY_COLORS = [
- '#FFD93D', '#6BCB77', '#4D96FF',
- '#FF9F43', '#9D65C9', '#FF5D5D',
- '#F9F871', '#A0E7E5'
-]
-const EMOJIS = ['👍', '❤️', '⭐', '🔥', '💡', '✅', '❌', '🎯', '📌', '❓', '💪', '🎉', '🚀', '💯', '⚡', '🏆', '👀', '🤔', '💬', '🧠']
-type ContextMenuAction = 'edit' | 'duplicate' | 'front' | 'back' | 'delete'
-type PendingOpen = { proceed: () => Promise }
-const CONTEXT_MENU_ITEMS: { label: string; action: ContextMenuAction; danger?: boolean }[] = [
- { label: '✏️ Редактировать', action: 'edit' },
- { label: '📋 Дублировать', action: 'duplicate' },
- { label: '⬆️ На передний план', action: 'front' },
- { label: '⬇️ На задний план', action: 'back' },
- { label: '🗑️ Удалить', action: 'delete', danger: true },
-]
-function genId() {
- if (typeof crypto !== 'undefined' && crypto.randomUUID) {
- return crypto.randomUUID()
- }
- // Fallback for environments without crypto.randomUUID
- if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
- const bytes = new Uint8Array(16)
- crypto.getRandomValues(bytes)
- return Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('').slice(0, 16)
- }
- // Final fallback (should never reach in modern browsers)
- return Math.random().toString(36).slice(2, 9) + Math.random().toString(36).slice(2, 9)
-}
-function pointToLineDistance(p: Point, a: Point, b: Point): number {
- const dx = b.x - a.x
- const dy = b.y - a.y
- const len = Math.sqrt(dx * dx + dy * dy)
- if (len === 0) return Math.hypot(p.x - a.x, p.y - a.y)
- return Math.abs(dy * p.x - dx * p.y + b.x * a.y - b.y * a.x) / len
-}
-function simplifyPath(points: Point[], tolerance = 2): Point[] {
- if (points.length <= 2) return points
- let maxDist = 0, maxIdx = 0
- const first = points[0], last = points[points.length - 1]
- for (let i = 1; i < points.length - 1; i++) {
- const d = pointToLineDistance(points[i], first, last)
- if (d > maxDist) { maxDist = d; maxIdx = i }
- }
- if (maxDist > tolerance) {
- const left = simplifyPath(points.slice(0, maxIdx + 1), tolerance)
- const right = simplifyPath(points.slice(maxIdx), tolerance)
- return [...left.slice(0, -1), ...right]
- }
- return [first, last]
-}
-function smoothPathD(points: Point[]): string {
- if (points.length < 2) return ''
- if (points.length === 2) return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`
- let d = `M ${points[0].x} ${points[0].y}`
- for (let i = 1; i < points.length - 1; i++) {
- const mx = (points[i].x + points[i + 1].x) / 2
- const my = (points[i].y + points[i + 1].y) / 2
- d += ` Q ${points[i].x} ${points[i].y} ${mx} ${my}`
- }
- d += ` L ${points[points.length - 1].x} ${points[points.length - 1].y}`
- return d
-}
-function snapVal(v: number, grid = 20) { return snap_to_grid(v, grid) }
-function bpmnEdgeAnchor(element: BoardElement, towardX: number, towardY: number): Point {
- const width = element.w || 0
- const height = element.h || 0
- const centerX = element.x + width / 2
- const centerY = element.y + height / 2
- const dx = towardX - centerX
- const dy = towardY - centerY
- if (dx === 0 && dy === 0) return { x: centerX, y: centerY }
- const halfWidth = width / 2
- const halfHeight = height / 2
- let scale: number
- if (element.bpmnNodeType === 'startEvent' || element.bpmnNodeType === 'endEvent') {
- scale = Math.min(halfWidth, halfHeight) / Math.hypot(dx, dy)
- } else if (element.bpmnNodeType === 'xorGateway' || element.bpmnNodeType === 'andGateway' || element.bpmnNodeType === 'orGateway') {
- scale = 1 / (Math.abs(dx) / halfWidth + Math.abs(dy) / halfHeight)
- } else {
- scale = 1 / Math.max(Math.abs(dx) / halfWidth, Math.abs(dy) / halfHeight)
- }
- return { x: centerX + dx * scale, y: centerY + dy * scale }
-}
+
export default function App() {
const canvasRef = useRef(null)
const svgRef = useRef(null)
@@ -185,7 +80,11 @@ export default function App() {
const [color, setColor] = useState('#000000')
const [strokeWidth, setStrokeWidth] = useState(3)
const [elements, setElements] = useState([])
- const [selectedId, setSelectedId] = useState(null)
+ const [selectedIds, setSelectedIds] = useState(clearSelection)
+ /** The element property panels and resize handles act on: single selection only. */
+ const selectedElementId = primaryOf(selectedIds)
+ /** Shift-marquee anchor: the selection a Shift drag extends or shrinks. */
+ const [anchorId, setAnchorId] = useState(null)
const [isDrawing, setIsDrawing] = useState(false)
const [currentPath, setCurrentPath] = useState([])
const [transform, setTransform] = useState({ x: 0, y: 0, scale: 1 })
@@ -200,7 +99,7 @@ export default function App() {
const [showLearningModules, setShowLearningModules] = useState(false)
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
const [workspaceMode, setWorkspaceMode] = useState('board')
- const [toast, setToast] = useState<{ message: string; tone: 'success' | 'error' | 'info' } | null>(null)
+ const [toast, setToast] = useState<{ message: string; tone: ToastTone } | null>(null)
const [tourStep, setTourStep] = useState(() => {
try { return localStorage.getItem('miro-onboarding-seen') ? -1 : 0 } catch { return -1 }
})
@@ -222,15 +121,10 @@ export default function App() {
const [bpmnSimulationResult, setBpmnSimulationResult] = useState(null)
const [bottleneckRole, setBottleneckRole] = useState(null)
const [simulationResultFingerprint, setSimulationResultFingerprint] = useState(null)
- const [simulationSeed, setSimulationSeed] = useState('42')
- const [simulationRuns, setSimulationRuns] = useState('500')
- const [simulationTarget, setSimulationTarget] = useState('')
- const [simulationInstances, setSimulationInstances] = useState('1')
- const [arrivalInterval, setArrivalInterval] = useState('0')
- const [arrivalClasses, setArrivalClasses] = useState([])
- const [rolePolicies, setRolePolicies] = useState>({})
- const [calendarStart, setCalendarStart] = useState('')
- const [calendarEnd, setCalendarEnd] = useState('')
+ const simulation = useSimulationSettings()
+ // Stable across renders (it is the raw setState), so the long-lived
+ // profileConfig observer can capture it without re-subscribing.
+ const replaceSimulation = simulation.replace
const [bpmnProfileActive, setBpmnProfileActive] = useState(false)
const [showEmoji, setShowEmoji] = useState(false)
const [selectedEmoji, setSelectedEmoji] = useState('👍')
@@ -248,19 +142,24 @@ export default function App() {
setFlowPreviewPoint(null)
}
}, [])
- // Drag state
- const [dragInfo, setDragInfo] = useState<{
- id: string; startX: number; startY: number; elStartX: number; elStartY: number
- } | null>(null)
+ // Drag state. One gesture moves the whole selection, so it carries the start
+ // frame of every dragged element instead of a single one.
+ //
+ // Refs rather than state: nothing renders from them, and reading gesture
+ // geometry from state made the outcome depend on whether React had committed
+ // the pointermove renders before pointerup arrived — a flick released inside
+ // one frame finished with the pointerdown geometry and silently did nothing
+ // (see src/board/gesture.ts).
+ const dragInfoRef = useRef(null)
// Resize state
- const [resizeInfo, setResizeInfo] = useState<{
- id: string; corner: string; startX: number; startY: number;
- elX: number; elY: number; elW: number; elH: number
- } | null>(null)
+ const resizeInfoRef = useRef(null)
// Gesture frames stay local until pointer-up, preventing one Yjs item rewrite
// (and one gc:false tombstone) per pointer event.
- const [transientFrame, setTransientFrame] = useState<{ id: string; updates: Partial } | null>(null)
- const transientFrameRef = useRef<{ id: string; updates: Partial } | null>(null)
+ const [transientFrame, setTransientFrame] = useState<{ id: string; updates: Partial }[] | null>(null)
+ const transientFrameRef = useRef<{ id: string; updates: Partial }[] | null>(null)
+ // Marquee selection in world coordinates; Shift extends the current selection.
+ const [marquee, setMarquee] = useState(null)
+ const marqueeRef = useRef<{ from: Point; shift: boolean } | null>(null)
const longPressRef = useRef<{ timer: number | null; x: number; y: number; startedAt: number } | null>(null)
const bpmnImportRef = useRef(null)
const bpmnRunTimersRef = useRef([])
@@ -273,7 +172,7 @@ export default function App() {
const compactHistoryOnSaveRef = useRef(false)
const undoManagerRef = useRef(null)
const profileConfigRef = useRef | null>(null); const profileConfigJsonRef = useRef(''); const profileConfigHydratingRef = useRef(false)
- const showToast = useCallback((message: string, tone: 'success' | 'error' | 'info' = 'info') => {
+ const showToast = useCallback((message: string, tone: ToastTone = 'info') => {
setToast({ message, tone })
window.setTimeout(() => setToast(null), 4200)
}, [])
@@ -286,7 +185,7 @@ export default function App() {
const exitPreview = useCallback(() => {
setPreviewSnapshot(null)
setPreviewElements(null)
- setSelectedId(null)
+ setSelectedIds(clearSelection())
setEditingText(null)
transientFrameRef.current = null
setTransientFrame(null)
@@ -300,7 +199,7 @@ export default function App() {
setPreviewSnapshot(snapshot)
setPreviewElements(historical)
setShowSimulationPanel(false)
- setSelectedId(null)
+ setSelectedIds(clearSelection())
setEditingText(null)
setShowMore(false)
setShowColorPicker(false)
@@ -359,7 +258,7 @@ export default function App() {
// Only emit roles the user actually configured. An empty list keeps the
// engine on the per-node `resourceCapacity` fallback, so untouched boards
// simulate exactly as before.
- const resourceRoles = Object.entries(rolePolicies)
+ const resourceRoles = Object.entries(simulation.rolePolicies)
.filter(([name]) => nodes.some((node) => node.resourceRole === name))
.map(([name, policy]) => ({
name,
@@ -369,19 +268,19 @@ export default function App() {
return {
nodes,
flows,
- slaTargetMs: simulationTarget ? Number(simulationTarget) * 1000 : undefined,
- calendarWorkStartMs: calendarStart ? Number(calendarStart) * 3_600_000 : undefined,
- calendarWorkEndMs: calendarEnd ? Number(calendarEnd) * 3_600_000 : undefined,
- simulationInstances: Number(simulationInstances) || 1,
- arrivalIntervalMs: Math.max(0, Number(arrivalInterval) || 0) * 1000,
- arrivalClasses: arrivalClasses.map((arrivalClass) => ({
+ slaTargetMs: simulation.slaTargetSec ? Number(simulation.slaTargetSec) * 1000 : undefined,
+ calendarWorkStartMs: simulation.calendarStartHour ? Number(simulation.calendarStartHour) * 3_600_000 : undefined,
+ calendarWorkEndMs: simulation.calendarEndHour ? Number(simulation.calendarEndHour) * 3_600_000 : undefined,
+ simulationInstances: Number(simulation.instances) || 1,
+ arrivalIntervalMs: Math.max(0, Number(simulation.arrivalIntervalSec) || 0) * 1000,
+ arrivalClasses: simulation.arrivalClasses.map((arrivalClass) => ({
count: Math.max(1, Number(arrivalClass.count) || 1),
intervalMs: Math.max(0, Number(arrivalClass.intervalSec) || 0) * 1000,
priority: Number(arrivalClass.priority) || 0,
})),
resourceRoles,
}
- }, [elements, simulationTarget, calendarStart, calendarEnd, simulationInstances, arrivalInterval, arrivalClasses, rolePolicies])
+ }, [elements, simulation.slaTargetSec, simulation.calendarStartHour, simulation.calendarEndHour, simulation.instances, simulation.arrivalIntervalSec, simulation.arrivalClasses, simulation.rolePolicies])
const createSimulationBpmnModel = useCallback(() => {
const model = createBpmnModel()
return {
@@ -400,8 +299,8 @@ export default function App() {
// immediately after an edit, without scheduling synchronous state updates from
// an effect.
const simulationFingerprint = useMemo(
- () => JSON.stringify({ model: createSimulationBpmnModel(), seed: simulationSeed, runs: simulationRuns }),
- [createSimulationBpmnModel, simulationSeed, simulationRuns],
+ () => JSON.stringify({ model: createSimulationBpmnModel(), seed: simulation.seed, runs: simulation.runs }),
+ [createSimulationBpmnModel, simulation.seed, simulation.runs],
)
const bpmnIssues = useMemo(() => {
const model = createBpmnModel()
@@ -428,34 +327,49 @@ export default function App() {
return [...roles.entries()].sort(([left], [right]) => left.localeCompare(right))
}, [elements])
const selectedBpmnTask = useMemo(
- () => elements.find((element) => element.id === selectedId && element.bpmnNodeType === 'task') ?? null,
- [elements, selectedId],
+ () => elements.find((element) => element.id === selectedElementId && element.bpmnNodeType === 'task') ?? null,
+ [elements, selectedElementId],
)
const selectedBpmnFlow = useMemo(
- () => elements.find((element) => element.id === selectedId && element.bpmnFlow) ?? null,
- [elements, selectedId],
+ () => elements.find((element) => element.id === selectedElementId && element.bpmnFlow) ?? null,
+ [elements, selectedElementId],
)
+ // Boolean, not `boolean | undefined`: the old expression short-circuited to
+ // undefined for a flow without bpmnFlow, which read as false everywhere it was
+ // used but is not assignable to a boolean prop.
const selectedBpmnFlowIsXor = useMemo(
- () => selectedBpmnFlow?.bpmnFlow && elements.find((element) => element.id === selectedBpmnFlow.bpmnFlow!.sourceId)?.bpmnNodeType === 'xorGateway',
+ () => Boolean(selectedBpmnFlow?.bpmnFlow && elements.find((element) => element.id === selectedBpmnFlow.bpmnFlow!.sourceId)?.bpmnNodeType === 'xorGateway'),
[elements, selectedBpmnFlow],
)
- const user = useMemo(() => {
- const saved = localStorage.getItem('miro-author-id')
- if (saved) return { id: saved }
- const id = genId()
- try { localStorage.setItem('miro-author-id', id) } catch { /* author id is optional metadata */ }
- return { id }
+ // Local participant profile. Device-scoped and fail-soft: it carries the
+ // author id that `createdBy` on every node already stores, plus the name and
+ // colour a collaboration session will publish through awareness.
+ const [userProfile, setUserProfile] = useState(() => {
+ const profile = readProfile(localStorage, genId)
+ writeProfile(localStorage, profile)
+ return profile
+ })
+ const [showProfile, setShowProfile] = useState(false)
+ const updateUserProfile = useCallback((next: UserProfile) => {
+ setUserProfile(next)
+ writeProfile(localStorage, next)
}, [])
useEffect(() => {
const yarray = ydoc.getArray('elements')
const meta = ydoc.getMap('meta')
const profileConfig = ydoc.getMap('profileConfig')
yElements.current = yarray
- dirtyTrackerRef.current = createDirtyTracker(ydoc, setIsDirty)
+ // NON_EDIT_ORIGINS rather than the tracker's default: opening a document is
+ // labelled LOAD, and a load must not report unsaved changes.
+ dirtyTrackerRef.current = createDirtyTracker(ydoc, setIsDirty, NON_EDIT_ORIGINS)
captureTriggersRef.current = createCaptureTriggers({
ydoc,
capture: appendCheckpoint,
- ignoredOrigins: new Set([RECOVERY_ORIGIN, HISTORY_RESTORE_ORIGIN]),
+ // The same rule as the dirty tracker above, from the same place: opening
+ // a file is not an edit. This set used to be spelled out by hand without
+ // LOAD, so opening a document counted as an edit and the interval timer
+ // then wrote an "Авто" checkpoint for a board nobody had touched.
+ ignoredOrigins: NON_EDIT_ORIGINS,
})
profileConfigRef.current = profileConfig
if (!meta.has('id')) {
@@ -467,28 +381,36 @@ export default function App() {
const applyProfileConfig = (_event?: unknown, transaction?: Y.Transaction) => {
const config = profileConfig.toJSON() as ProfileConfig
profileConfigJsonRef.current = JSON.stringify(config)
- const simulation = bpmnSimulationFromProfileConfig(config)
- setBpmnProfileActive(simulation !== null)
- if (!simulation) {
+ const incoming = bpmnSimulationFromProfileConfig(config)
+ setBpmnProfileActive(incoming !== null)
+ if (!incoming) {
setWorkspaceMode('board')
setShowSimulationPanel(false)
return
}
- profileConfigHydratingRef.current = transaction?.origin === RECOVERY_ORIGIN
- setSimulationSeed(simulation.seed); setSimulationRuns(simulation.runs)
- setSimulationTarget(simulation.slaTargetSec); setSimulationInstances(simulation.instances)
- setArrivalInterval(simulation.arrivalIntervalSec)
- setArrivalClasses(simulation.arrivalClasses)
- setRolePolicies(simulation.rolePolicies)
- setCalendarStart(simulation.calendarStartHour)
- setCalendarEnd(simulation.calendarEndHour)
+ // Any non-edit origin means the config arrived with the document rather
+ // than from the user: a file open (LOAD), the recovery cache replaying
+ // itself, or an applied history restore. Hydrating the simulation inputs
+ // from it must not echo back as a profileConfig write, or a freshly saved
+ // document turns dirty again the moment these setState calls settle.
+ //
+ // This used to test RECOVERY_ORIGIN alone, which was complete until file
+ // opens were relabelled LOAD; NON_EDIT_ORIGINS keeps the rule in one place
+ // (src/collab/origins.ts) so the next origin added cannot miss this site.
+ profileConfigHydratingRef.current = NON_EDIT_ORIGINS.has(transaction?.origin)
+ replaceSimulation(incoming)
}
profileConfig.observe(applyProfileConfig)
applyProfileConfig()
// UndoManager
const undoManager = new Y.UndoManager(yarray, {
captureTimeout: 500,
- trackedOrigins: new Set([null, HISTORY_RESTORE_ORIGIN]),
+ // Only this user's own intent is undoable. Remote updates arrive with
+ // the provider instance as origin and stay out of the stack; loads and
+ // recovery replays are excluded by NON_EDIT_ORIGINS semantics.
+ // HISTORY_RESTORE_ORIGIN stays tracked so restore-as-append remains
+ // reversible, which is the documented behaviour of the timeline.
+ trackedOrigins: new Set([...LOCAL_ORIGINS, HISTORY_RESTORE_ORIGIN]),
})
undoManagerRef.current = undoManager
const updateUndoState = () => setUndoState({
@@ -522,7 +444,19 @@ export default function App() {
}
void attachPersistence()
// Sync
- const updateElements = () => setElements(yarray.toArray())
+ const updateElements = () => {
+ const next = yarray.toArray()
+ setElements(next)
+ // Elements can vanish without this component asking: undo/redo, a file
+ // load, a history restore and (later) a remote peer's delete. Drop stale
+ // ids so panels and gestures never point at a missing element.
+ const ids = new Set(next.map(element => element.id))
+ setSelectedIds(current => retainExisting(current, ids))
+ // The context menu is anchored to one element in world coordinates, so a
+ // vanished element leaves it hovering over empty canvas with actions that
+ // silently do nothing (the command layer refuses unknown ids).
+ setContextMenu(current => (current && !ids.has(current.id) ? null : current))
+ }
yarray.observe(updateElements)
updateElements()
return () => {
@@ -538,22 +472,13 @@ export default function App() {
persistence?.destroy()
ydoc.destroy()
}
- }, [appendCheckpoint, showToast, ydoc])
+ }, [appendCheckpoint, replaceSimulation, showToast, ydoc])
useEffect(() => {
return addBeforeUnloadGuard(isDirty)
}, [isDirty])
- const simulationProfile = useMemo(() => ({
- ...DEFAULT_BPMN_SIMULATION,
- seed: simulationSeed,
- runs: simulationRuns,
- slaTargetSec: simulationTarget,
- instances: simulationInstances,
- arrivalIntervalSec: arrivalInterval,
- calendarStartHour: calendarStart,
- calendarEndHour: calendarEnd,
- arrivalClasses,
- rolePolicies,
- }), [simulationSeed, simulationRuns, simulationTarget, simulationInstances, arrivalInterval, calendarStart, calendarEnd, arrivalClasses, rolePolicies])
+ // Identical to the draft by construction: SimulationSettings holds exactly the
+ // SimulationDraft shape, so there is nothing left to assemble here.
+ const simulationProfile = simulation.draft
useEffect(() => {
if (!bpmnProfileActive || !profileConfigRef.current) return
if (profileConfigHydratingRef.current) { profileConfigHydratingRef.current = false; return }
@@ -561,7 +486,7 @@ export default function App() {
const encoded = JSON.stringify(config)
if (encoded === profileConfigJsonRef.current) return
profileConfigJsonRef.current = encoded
- ydoc.transact(() => profileConfigRef.current!.set('bpmn', config.bpmn))
+ ydoc.transact(() => profileConfigRef.current!.set('bpmn', config.bpmn), LOCAL_EDIT)
}, [bpmnProfileActive, simulationProfile, ydoc])
const activateBpmnProfile = useCallback(() => {
if (profileConfigRef.current && !bpmnProfileActive) {
@@ -570,15 +495,35 @@ export default function App() {
// defaults, so fixture arrival classes and role policies survive activation.
const config = withBpmnSimulation({}, simulationProfile)
profileConfigJsonRef.current = JSON.stringify(config)
- ydoc.transact(() => profileConfigRef.current!.set('bpmn', config.bpmn))
+ ydoc.transact(() => profileConfigRef.current!.set('bpmn', config.bpmn), LOCAL_EDIT)
}
setBpmnProfileActive(true)
setWorkspaceMode('bpmn')
setShowBpmnPalette(true)
}, [bpmnProfileActive, simulationProfile, ydoc])
const openSimulation = useCallback(() => { if (previewSnapshot) return void showToast('Симуляция недоступна во время просмотра истории.', 'info'); if (!bpmnProfileActive) activateBpmnProfile(); setWorkspaceMode('simulation'); setShowSimulationPanel(true) }, [activateBpmnProfile, bpmnProfileActive, previewSnapshot, showToast])
+ /**
+ * Writes an in-flight gesture to the document.
+ *
+ * A drag or resize lives in `transientFrame` until pointerup, so anything
+ * that reads the document mid-gesture sees the pre-drag position. Saving is
+ * the case that matters: Ctrl+S during a drag wrote the old coordinates to
+ * disk while the screen showed the new ones.
+ */
+ const flushGesture = useCallback(() => {
+ const frame = transientFrameRef.current
+ if (!frame?.length || !yElements.current) return
+ ydoc.transact(() => {
+ for (const item of frame) commitElementUpdate(ydoc, yElements.current!, item.id, item.updates)
+ }, LOCAL_GESTURE)
+ transientFrameRef.current = null
+ setTransientFrame(null)
+ }, [ydoc])
+
const saveBoard = useCallback(async (mode: 'save' | 'saveAs'): Promise => {
if (previewSnapshot) { showToast('Недоступно во время просмотра истории.', 'info'); return false }
+ // Land any in-flight drag first, so the file matches the screen.
+ flushGesture()
const metaMap = ydoc.getMap('meta')
const metaId = metaMap.get('id')
const metaTitle = metaMap.get('title')
@@ -630,7 +575,7 @@ export default function App() {
showToast('Не удалось сохранить документ. Проверьте доступ к файлу.', 'error')
}
return false
- }, [elements, fileSession, previewSnapshot, showToast, ydoc])
+ }, [elements, fileSession, flushGesture, previewSnapshot, showToast, ydoc])
const resetDocument = useCallback(() => { if (isDirty && !window.confirm('Несохраненные изменения будут потеряны. Продолжить?')) return
const meta = ydoc.getMap('meta')
const profileConfig = ydoc.getMap('profileConfig')
@@ -644,7 +589,7 @@ export default function App() {
setFileSession({ handle: null, name: null, isUntitled: true }); setRecoveryNotice(null)
historySnapshotsRef.current = []
setHistorySnapshots([])
- setSelectedId(null)
+ setSelectedIds(clearSelection())
setWorkspaceMode('board')
setBpmnProfileActive(false)
dirtyTrackerRef.current?.markSaved()
@@ -664,12 +609,15 @@ export default function App() {
profileConfigJsonRef.current = JSON.stringify(outcome.file.profileConfig); profileConfig.clear()
Object.entries(outcome.file.profileConfig).forEach(([key, value]) => profileConfig.set(key, value))
setRecoverySession(meta, createRecoverySession(outcome.session.name ?? outcome.file.meta.title, yElements.current?.toJSON() ?? loadedElements, profileConfig.toJSON()))
- }, RECOVERY_ORIGIN)
+ // LOAD rather than RECOVERY_ORIGIN: opening a file is not a recovery.
+ // Both are non-edit origins, but the distinction is what authorship and
+ // remote sync will key off later.
+ }, LOAD)
setFileSession(outcome.session); setRecoveryNotice(null)
const snapshots = reconstructed.historyLost ? [] : outcome.file.history.snapshots
historySnapshotsRef.current = snapshots
setHistorySnapshots(snapshots)
- setSelectedId(null)
+ setSelectedIds(clearSelection())
dirtyTrackerRef.current?.markSaved()
showToast(
outcome.migratedFrom === undefined
@@ -724,58 +672,131 @@ export default function App() {
const screenToWorld = useCallback((sx: number, sy: number): Point => {
const rect = canvasRef.current?.getBoundingClientRect()
if (!rect) return { x: 0, y: 0 }
- return {
- x: (sx - rect.left - transform.x) / transform.scale,
- y: (sy - rect.top - transform.y) / transform.scale
- }
+ return toWorld(transform, rect, sx, sy)
}, [transform])
- const addElement = useCallback((el: BoardElement) => {
- if (previewSnapshot) return
- if (!yElements.current) return
- ydoc.transact(() => { yElements.current!.push([el]) })
+ const addElement = useCallback((el: BoardElement, origin: unknown = LOCAL_EDIT) => {
+ if (previewSnapshot || !yElements.current) return
+ commands.addElement(ydoc, yElements.current, el, origin)
if ('vibrate' in navigator) navigator.vibrate(10)
}, [previewSnapshot, ydoc])
- const updateElement = useCallback((id: string, updates: Partial) => {
- if (previewSnapshot) return
- if (!yElements.current) return
- commitElementUpdate(ydoc, yElements.current, id, updates)
+ const updateElement = useCallback((id: string, updates: Partial, origin: unknown = LOCAL_EDIT) => {
+ if (previewSnapshot || !yElements.current) return
+ commands.updateElement(ydoc, yElements.current, id, updates, origin)
}, [previewSnapshot, ydoc])
+ /** Selection helpers. Defined next to the mutators they drive. */
+ const selectElement = useCallback((id: string) => setSelectedIds(selectOnly(id)), [])
+ const clearSelectionState = useCallback(() => setSelectedIds(clearSelection()), [])
+ const selectElements = useCallback((ids: string[]) => setSelectedIds(ids.length ? selectMany(ids) : clearSelection()), [])
+ const removeIdFromSelection = useCallback((id: string) => {
+ setSelectedIds(current => removeFromSelection(current, id))
+ setAnchorId(current => (current === id ? null : current))
+ }, [])
const deleteElement = useCallback((id: string) => {
- if (previewSnapshot) return
- if (!yElements.current) return
- const idx = yElements.current.toArray().findIndex(e => e.id === id)
- if (idx >= 0) ydoc.transact(() => { yElements.current!.delete(idx, 1) })
- setSelectedId(null)
+ if (previewSnapshot || !yElements.current) return
+ if (!commands.deleteElement(ydoc, yElements.current, id)) return
+ removeIdFromSelection(id)
setContextMenu(null)
- }, [previewSnapshot, ydoc])
+ }, [previewSnapshot, ydoc, removeIdFromSelection])
+ const deleteSelected = useCallback(() => {
+ if (previewSnapshot || !yElements.current) return
+ if (!commands.deleteElements(ydoc, yElements.current, selectedIds)) return
+ clearSelectionState()
+ setContextMenu(null)
+ }, [previewSnapshot, ydoc, selectedIds, clearSelectionState])
+ /**
+ * One transaction for the whole selection. This looped over updateElement,
+ * which made recolouring eight elements eight undo steps and eight
+ * checkpoints.
+ */
+ const updateSelected = useCallback((updates: Partial, origin: unknown = LOCAL_EDIT) => {
+ if (previewSnapshot || !yElements.current) return
+ commands.updateElements(ydoc, yElements.current, selectedIds, updates, origin)
+ }, [selectedIds, previewSnapshot, ydoc])
const bringToFront = useCallback((id: string) => {
- if (previewSnapshot) return
- if (!yElements.current) return
- const idx = yElements.current.toArray().findIndex(e => e.id === id)
- if (idx >= 0) {
- if (idx === yElements.current.length - 1) return
- const el = yElements.current.get(idx)
- const zIndex = Date.now()
- ydoc.transact(() => {
- yElements.current!.delete(idx, 1)
- yElements.current!.push([{ ...el, zIndex }])
- })
- }
+ if (previewSnapshot || !yElements.current) return
+ commands.bringToFront(ydoc, yElements.current, id)
}, [previewSnapshot, ydoc])
const sendToBack = useCallback((id: string) => {
updateElement(id, { zIndex: 0 })
}, [updateElement])
- const duplicateElement = useCallback((id: string) => {
- const el = elements.find(e => e.id === id)
- if (el) {
- const newEl = { ...el, id: genId(), x: el.x + 20, y: el.y + 20 }
- addElement(newEl)
+ /**
+ * Duplicates the whole selection. The offset grows with the copy index so
+ * duplicating three overlapping objects does not stack them into one.
+ * Returns the new ids so callers can select the copies.
+ */
+ const duplicateSelection = useCallback((origin?: unknown): string[] => {
+ if (previewSnapshot || !yElements.current) return []
+ return commands.duplicateElements(ydoc, yElements.current, selectedIds, genId, origin ?? LOCAL_EDIT, userProfile.id)
+ }, [selectedIds, previewSnapshot, ydoc, userProfile.id])
+
+ /**
+ * Nudges the whole selection in ONE transaction. Arrow keys used to commit
+ * per element, which made an 8-element nudge 8 undo steps and 8 checkpoints.
+ */
+ const moveSelection = useCallback((delta: { x: number; y: number }) => {
+ if (previewSnapshot || !yElements.current) return
+ commands.moveElements(ydoc, yElements.current, selectedIds, delta)
+ }, [selectedIds, previewSnapshot, ydoc])
+
+ /**
+ * The in-memory clipboard. A `file://` deployment — the primary way this app
+ * is shipped — usually has no clipboard permission at all, so the internal
+ * copy is the source of truth and the system clipboard is what makes
+ * cross-tab paste work when it is available.
+ */
+ const internalClipboardRef = useRef(null)
+
+ /** Ctrl+C. Returns how many elements were copied, so the caller knows whether to take over the shortcut. */
+ const copySelection = useCallback((): number => {
+ const picked = elements.filter(element => selectedIds.has(element.id))
+ if (!picked.length) return 0
+ const payload = serialiseSelection(picked)
+ internalClipboardRef.current = payload
+ void navigator.clipboard?.writeText(payload).catch(() => undefined)
+ return picked.length
+ }, [elements, selectedIds])
+
+ /** Ctrl+V: one transaction for the whole paste, labelled as a clipboard write. */
+ const pasteFromClipboard = useCallback(async () => {
+ if (previewSnapshot) return
+ let raw = internalClipboardRef.current
+ try {
+ const text = await navigator.clipboard?.readText()
+ // Another tab holds a newer payload than our in-memory copy.
+ if (text && parseClipboard(text)) raw = text
+ } catch {
+ // Denied or unavailable — the internal copy still works.
}
- }, [elements, addElement])
+ const parsed = parseClipboard(raw)
+ if (!parsed?.length) {
+ showToast('В буфере обмена нет объектов miroboard', 'info')
+ return
+ }
+ const created = preparePaste(parsed, {
+ makeId: () => genId(),
+ offset: { x: PASTE_OFFSET, y: PASTE_OFFSET },
+ createdBy: userProfile.id,
+ })
+ ydoc.transact(() => {
+ for (const element of created) yElements.current?.push([element])
+ }, LOCAL_CLIPBOARD)
+ setSelectedIds(selectMany(created.map(element => element.id)))
+ setAnchorId(created[created.length - 1]?.id ?? null)
+ showToast(`Вставлено объектов: ${created.length}`, 'success')
+ }, [previewSnapshot, ydoc, userProfile.id, showToast])
+
+ /** Ctrl+X: copy, then delete — the deletion stays a single undo step of its own. */
+ const cutSelection = useCallback(() => {
+ if (!copySelection()) return
+ deleteSelected()
+ }, [copySelection, deleteSelected])
const handleContextMenuAction = useCallback((action: ContextMenuAction, id: string) => {
+ // Right-clicking a member of a multi-selection applies to the selection,
+ // which is what every canvas editor does and what users expect.
+ const targets = selectedIds.has(id) ? idsOf(selectedIds) : [id]
if (action === 'edit') {
const element = elements.find(candidate => candidate.id === id)
if (element) {
@@ -783,16 +804,19 @@ export default function App() {
setEditValue(element.text || '')
}
} else if (action === 'duplicate') {
- duplicateElement(id)
+ if (targets.length > 1) setSelectedIds(selectMany(duplicateSelection()))
+ else duplicateSelection()
} else if (action === 'front') {
- bringToFront(id)
+ targets.forEach(bringToFront)
} else if (action === 'back') {
- sendToBack(id)
+ targets.forEach(sendToBack)
+ } else if (targets.length > 1) {
+ deleteSelected()
} else {
deleteElement(id)
}
setContextMenu(null)
- }, [elements, duplicateElement, bringToFront, sendToBack, deleteElement])
+ }, [elements, selectedIds, duplicateSelection, bringToFront, sendToBack, deleteElement, deleteSelected])
const { canUndo, canRedo } = undoState
@@ -813,7 +837,7 @@ export default function App() {
while (yElements.current!.length > 0) yElements.current!.delete(0, 1)
const t: BoardElement[] = []
const s = (text: string, x: number, y: number, w = 160, h = 60, fill = '#FFD93D') =>
- ({ id: genId(), type: 'sticky' as const, x, y, w, h, text, color: fill, fill, createdBy: user.id })
+ ({ id: genId(), type: 'sticky' as const, x, y, w, h, text, color: fill, fill, createdBy: userProfile.id })
if (name === 'kanban') {
t.push(s('📋 Сделать', 40, 30, 200, 55, '#FFD93D'))
@@ -842,27 +866,27 @@ export default function App() {
t.push(s('', 500, 90, 220, 100, '#FFFFFF'))
} else if (name === 'flowchart') {
t.push(s('Старт', 250, 20, 120, 50, '#6BCB77'))
- t.push({ id: genId(), type: 'arrow', x: 310, y: 70, w: 0, h: 60, color: '#000', stroke: 2, fill: 'transparent', createdBy: user.id })
+ t.push({ id: genId(), type: 'arrow', x: 310, y: 70, w: 0, h: 60, color: '#000', stroke: 2, fill: 'transparent', createdBy: userProfile.id })
t.push(s('Шаг 1', 230, 140, 160, 60, '#4D96FF'))
- t.push({ id: genId(), type: 'arrow', x: 310, y: 200, w: 0, h: 60, color: '#000', stroke: 2, fill: 'transparent', createdBy: user.id })
+ t.push({ id: genId(), type: 'arrow', x: 310, y: 200, w: 0, h: 60, color: '#000', stroke: 2, fill: 'transparent', createdBy: userProfile.id })
t.push(s('Шаг 2', 230, 270, 160, 60, '#FFD93D'))
- t.push({ id: genId(), type: 'arrow', x: 310, y: 330, w: 0, h: 60, color: '#000', stroke: 2, fill: 'transparent', createdBy: user.id })
+ t.push({ id: genId(), type: 'arrow', x: 310, y: 330, w: 0, h: 60, color: '#000', stroke: 2, fill: 'transparent', createdBy: userProfile.id })
t.push(s('Результат', 230, 400, 160, 60, '#9D65C9'))
} else if (name === 'bpmn') {
const startId = genId()
const taskId = genId()
const endId = genId()
- t.push({ id: startId, type: 'sticky', x: 80, y: 180, w: 86, h: 56, text: 'Старт', color: '#6BCB77', fill: '#6BCB77', createdBy: user.id, bpmnNodeType: 'startEvent' })
- t.push({ id: taskId, type: 'sticky', x: 250, y: 170, w: 180, h: 76, text: 'Выполнить задачу', color: '#4D96FF', fill: '#4D96FF', createdBy: user.id, bpmnNodeType: 'task' })
- t.push({ id: endId, type: 'sticky', x: 510, y: 180, w: 86, h: 56, text: 'Конец', color: '#FF5D5D', fill: '#FF5D5D', createdBy: user.id, bpmnNodeType: 'endEvent' })
- t.push({ id: genId(), type: 'arrow', x: 166, y: 208, w: 84, h: 0, color: '#000', stroke: 2, fill: 'transparent', createdBy: user.id, bpmnFlow: { sourceId: startId, targetId: taskId } })
- t.push({ id: genId(), type: 'arrow', x: 430, y: 208, w: 80, h: 0, color: '#000', stroke: 2, fill: 'transparent', createdBy: user.id, bpmnFlow: { sourceId: taskId, targetId: endId } })
+ t.push({ id: startId, type: 'sticky', x: 80, y: 180, w: 86, h: 56, text: 'Старт', color: '#6BCB77', fill: '#6BCB77', createdBy: userProfile.id, bpmnNodeType: 'startEvent' })
+ t.push({ id: taskId, type: 'sticky', x: 250, y: 170, w: 180, h: 76, text: 'Выполнить задачу', color: '#4D96FF', fill: '#4D96FF', createdBy: userProfile.id, bpmnNodeType: 'task' })
+ t.push({ id: endId, type: 'sticky', x: 510, y: 180, w: 86, h: 56, text: 'Конец', color: '#FF5D5D', fill: '#FF5D5D', createdBy: userProfile.id, bpmnNodeType: 'endEvent' })
+ t.push({ id: genId(), type: 'arrow', x: 166, y: 208, w: 84, h: 0, color: '#000', stroke: 2, fill: 'transparent', createdBy: userProfile.id, bpmnFlow: { sourceId: startId, targetId: taskId } })
+ t.push({ id: genId(), type: 'arrow', x: 430, y: 208, w: 80, h: 0, color: '#000', stroke: 2, fill: 'transparent', createdBy: userProfile.id, bpmnFlow: { sourceId: taskId, targetId: endId } })
}
t.forEach(el => yElements.current!.push([el]))
- })
+ }, LOCAL_TEMPLATE)
setShowTemplates(false)
setTransform({ x: 0, y: 0, scale: 1 })
- }, [ydoc, user.id])
+ }, [ydoc, userProfile.id])
const exportToPNG = useCallback(() => {
const svg = svgRef.current
@@ -935,9 +959,9 @@ export default function App() {
const simulateBpmn = useCallback(() => {
if (previewSnapshot) return void showToast('Симуляция недоступна во время просмотра истории.', 'info')
try {
- const runs = Number(simulationRuns)
+ const runs = Number(simulation.runs)
if (!Number.isInteger(runs) || runs < 1 || runs > 10000) throw new Error('Количество прогонов должно быть целым числом от 1 до 10000.')
- const result = JSON.parse(simulate_bpmn_seed_string(JSON.stringify(createSimulationBpmnModel()), simulationSeed, runs)) as BpmnSimulationResult
+ const result = JSON.parse(simulate_bpmn_seed_string(JSON.stringify(createSimulationBpmnModel()), simulation.seed, runs)) as BpmnSimulationResult
const seconds = (value: number) => `${(value / 1000).toFixed(1)}с`
setBpmnSimulationResult(result)
setBottleneckRole(result.roleUtilization[0]?.role ?? null)
@@ -949,10 +973,16 @@ export default function App() {
setSimulationResultFingerprint(null)
showToast(error instanceof Error ? error.message : 'Не удалось запустить BPMN-симуляцию.', 'error')
}
- }, [createSimulationBpmnModel, previewSnapshot, simulationFingerprint, simulationRuns, simulationSeed, showToast])
+ }, [createSimulationBpmnModel, previewSnapshot, simulationFingerprint, simulation.runs, simulation.seed, showToast])
const visibleSimulationResult = !previewSnapshot && simulationResultFingerprint === simulationFingerprint ? bpmnSimulationResult : null
const visibleSimulationSummary = !previewSnapshot && simulationResultFingerprint === simulationFingerprint ? bpmnSimulationSummary : null
const visibleBottleneckRole = !previewSnapshot && simulationResultFingerprint === simulationFingerprint ? bottleneckRole : null
+ /**
+ * The BPMN validity badge describes the live document, which is not what a
+ * history preview has on screen. Hiding it there matches the simulation
+ * summaries just above, which are already blanked for the same reason.
+ */
+ const showBpmnStatus = !previewSnapshot && elements.some(element => element.bpmnNodeType)
useEffect(() => {
if (!__MIROBOARD_DEBUG_HOOK__) return
@@ -992,7 +1022,7 @@ export default function App() {
return [node.id, {
id: node.id, type: 'sticky' as const, x: node.x ?? 100 + column * 260, y: node.y ?? 130 + row * 180,
w: node.width ?? width, h: node.height ?? height, text: node.name || (type === 'task' ? 'Задача' : ''),
- color: colorForType(type), fill: colorForType(type), createdBy: user.id, bpmnNodeType: type,
+ color: colorForType(type), fill: colorForType(type), createdBy: userProfile.id, bpmnNodeType: type,
bpmnDurationMs: type === 'task' ? 1000 : undefined,
}]
}))
@@ -1002,7 +1032,7 @@ export default function App() {
if (!nodeById.has(flow.sourceId) || !nodeById.has(flow.targetId)) continue
replacement.push({
id: flow.id, type: 'arrow', x: 0, y: 0, w: 0, h: 0, color: '#334155', stroke: 2,
- fill: 'transparent', createdBy: user.id,
+ fill: 'transparent', createdBy: userProfile.id,
bpmnFlow: {
sourceId: flow.sourceId,
targetId: flow.targetId,
@@ -1016,15 +1046,15 @@ export default function App() {
ydoc.transact(() => {
if (yElements.current!.length) yElements.current!.delete(0, yElements.current!.length)
yElements.current!.push(replacement)
- })
- setSelectedId(null)
+ }, LOCAL_TEMPLATE)
+ setSelectedIds(clearSelection())
setTransform({ x: 0, y: 0, scale: 1 })
} catch (error) {
showToast(error instanceof Error ? error.message : 'Не удалось импортировать BPMN-файл.', 'error')
} finally {
event.target.value = ''
}
- }, [user.id, ydoc, showToast])
+ }, [userProfile.id, ydoc, showToast])
const loadEducationalExample = useCallback((example: EducationalExample) => {
if (!yElements.current) return
@@ -1040,46 +1070,38 @@ export default function App() {
const color = colorForType(type)
yElements.current!.push([{
id: node.id, type: 'sticky', x: node.x ?? 100, y: node.y ?? 100, w: node.width ?? (type === 'task' ? 176 : 78), h: node.height ?? (type === 'task' ? 76 : 78),
- text: node.name || (type === 'task' ? 'Задача' : ''), color, fill: color, createdBy: user.id, bpmnNodeType: type,
+ text: node.name || (type === 'task' ? 'Задача' : ''), color, fill: color, createdBy: userProfile.id, bpmnNodeType: type,
bpmnDurationMs: node.durationMs, bpmnDurationDistribution: node.durationDistribution, bpmnDurationMinMs: node.durationMinMs, bpmnDurationModeMs: node.durationModeMs, bpmnDurationMaxMs: node.durationMaxMs,
bpmnResourceRole: node.resourceRole, bpmnCostPerHour: node.costPerHour, bpmnResourceCapacity: node.resourceCapacity,
bpmnPriority: node.priority,
}])
}
for (const flow of example.model.flows) yElements.current!.push([{
- id: flow.id, type: 'arrow', x: 0, y: 0, w: 0, h: 0, color: '#334155', stroke: 2, fill: 'transparent', createdBy: user.id,
+ id: flow.id, type: 'arrow', x: 0, y: 0, w: 0, h: 0, color: '#334155', stroke: 2, fill: 'transparent', createdBy: userProfile.id,
bpmnFlow: { sourceId: flow.sourceId, targetId: flow.targetId, flowType: flow.flowType || 'sequence', condition: flow.condition, probability: flow.probability, isDefault: flow.isDefault },
}])
- })
- // Load arrival classes if provided
- if (example.model.arrivalClasses) {
- setArrivalClasses(
- example.model.arrivalClasses.map((ac) => ({
- count: String(ac.count),
- intervalSec: String(ac.intervalMs / 1000),
- priority: String(ac.priority),
- }))
- )
- } else {
- setArrivalClasses([])
- }
- // Load role policies if provided
- if (example.model.resourceRoles) {
- const policies: Record = {}
- for (const role of example.model.resourceRoles) {
- policies[role.name] = {
- capacity: String(role.capacity),
- queuePolicy: role.queuePolicy ?? 'fifo',
- }
- }
- setRolePolicies(policies)
- } else {
- setRolePolicies({})
- }
- setSelectedId(null)
+ }, LOCAL_TEMPLATE)
+ // Only the two collections the example actually carries. Seed, runs and the
+ // SLA target deliberately survive a module load — the original code left
+ // them alone, and changing that is a behaviour decision, not a refactor.
+ replaceSimulation(current => ({
+ ...current,
+ arrivalClasses: (example.model.arrivalClasses ?? []).map(arrivalClass => ({
+ count: String(arrivalClass.count),
+ intervalSec: String(arrivalClass.intervalMs / 1000),
+ priority: String(arrivalClass.priority),
+ })),
+ rolePolicies: Object.fromEntries(
+ (example.model.resourceRoles ?? []).map(role => [
+ role.name,
+ { capacity: String(role.capacity), queuePolicy: role.queuePolicy ?? 'fifo' },
+ ]),
+ ),
+ }))
+ setSelectedIds(clearSelection())
setTransform({ x: 0, y: 0, scale: 1 })
showToast(`Загружен модуль: ${example.title}. Откройте Симуляцию для проверки.`, 'success')
- }, [user.id, ydoc, showToast])
+ }, [userProfile.id, ydoc, showToast, replaceSimulation])
// ======================== POINTER HANDLERS ========================
const handlePointerDown = useCallback((e: React.PointerEvent) => {
@@ -1089,6 +1111,7 @@ export default function App() {
setContextMenu(null)
setShowTemplates(false)
setShowMore(false)
+ setShowProfile(false)
const point = screenToWorld(e.clientX, e.clientY)
if (previewSnapshot) {
@@ -1098,11 +1121,6 @@ export default function App() {
}
return
}
- console.log('[BPMN diagnostic] canvas pointerdown before placement', JSON.stringify({
- tool,
- point,
- paletteVisible: showBpmnPalette,
- }))
if (e.pointerType === 'touch' && e.isPrimary === false) return
// Two fingers = pan
@@ -1121,7 +1139,7 @@ export default function App() {
if (tool === 'emoji') {
addElement({
id: genId(), type: 'emoji', x: point.x - 24, y: point.y - 24,
- w: 48, h: 48, emoji: selectedEmoji, color: 'transparent', createdBy: user.id
+ w: 48, h: 48, emoji: selectedEmoji, color: 'transparent', createdBy: userProfile.id
})
return
}
@@ -1135,14 +1153,14 @@ export default function App() {
if (tool === 'select') {
// Check resize handle
const resizeHandle = target.closest('[data-resize]') as HTMLElement
- if (resizeHandle && selectedId) {
- const el = elements.find(e => e.id === selectedId)
+ if (resizeHandle && selectedElementId) {
+ const el = elements.find(candidate => candidate.id === selectedElementId)
if (el) {
- setResizeInfo({
- id: selectedId, corner: resizeHandle.dataset.resize!,
+ resizeInfoRef.current = {
+ id: selectedElementId, corner: resizeHandle.dataset.resize as ResizeCorner,
startX: point.x, startY: point.y,
- elX: el.x, elY: el.y, elW: el.w || 0, elH: el.h || 0
- })
+ elX: el.x, elY: el.y, elW: el.w || 0, elH: el.h || 0,
+ }
return
}
}
@@ -1150,23 +1168,43 @@ export default function App() {
const el = target.closest('[data-id]') as HTMLElement
if (el) {
const elId = el.dataset.id!
- const boardEl = elements.find(e2 => e2.id === elId)
- setSelectedId(elId)
- if (boardEl) {
- setDragInfo({
- id: elId, startX: point.x, startY: point.y,
- elStartX: boardEl.x, elStartY: boardEl.y
- })
+ if (e.shiftKey) {
+ // Shift-click toggles membership and never starts a drag: the user is
+ // building a set, not moving it.
+ setSelectedIds(current => toggleInSelection(current, elId))
+ setAnchorId(elId)
+ return
+ }
+ // Clicking inside an existing multi-selection keeps it, so the whole
+ // group can be dragged. Clicking outside replaces it.
+ if (!selectedIds.has(elId)) {
+ setSelectedIds(selectOnly(elId))
+ setAnchorId(elId)
+ }
+ const dragged = (selectedIds.has(elId) ? idsOf(selectedIds) : [elId])
+ .map(id => elements.find(candidate => candidate.id === id))
+ .filter((candidate): candidate is BoardElement => Boolean(candidate))
+ if (dragged.length) {
+ dragInfoRef.current = {
+ startX: point.x, startY: point.y,
+ items: dragged.map(item => ({ id: item.id, x: item.x, y: item.y })),
+ }
}
const longPress = { timer: null as number | null, x: e.clientX, y: e.clientY, startedAt: performance.now() }
longPress.timer = window.setTimeout(() => {
if (longPressRef.current === longPress) longPressRef.current = null
+ // A long press outside the current selection retargets it, so the
+ // context menu never acts on a set the user cannot see.
+ if (!selectedIds.has(elId)) selectElement(elId)
setContextMenu({ x: point.x, y: point.y, id: elId })
if ('vibrate' in navigator) navigator.vibrate(30)
}, 500)
longPressRef.current = longPress
} else {
- setSelectedId(null)
+ // Empty canvas: start a marquee. Shift extends the anchored selection.
+ marqueeRef.current = { from: point, shift: e.shiftKey }
+ setAnchorId(current => (e.shiftKey ? current : null))
+ setMarquee(normaliseRect(point, point))
}
return
}
@@ -1182,7 +1220,7 @@ export default function App() {
if (!targetNode) return
if (!bpmnFlowSourceId) {
setBpmnFlowSourceId(targetNode.id)
- setSelectedId(targetNode.id)
+ selectElement(targetNode.id)
setFlowPreviewPoint({ x: targetNode.x + (targetNode.w || 0) / 2, y: targetNode.y + (targetNode.h || 0) / 2 })
showToast('Источник выбран. Теперь выберите целевой BPMN-узел.', 'info')
return
@@ -1208,12 +1246,12 @@ export default function App() {
color: '#334155',
stroke: 2,
fill: 'transparent',
- createdBy: user.id,
+ createdBy: userProfile.id,
bpmnFlow: { sourceId: sourceNode.id, targetId: targetNode.id, flowType: 'sequence' },
})
setBpmnFlowSourceId(null)
setFlowPreviewPoint(null)
- setSelectedId(flowId)
+ setSelectedIds(selectOnly(flowId))
chooseTool('select')
showToast('Sequence flow создан.', 'success')
return
@@ -1238,12 +1276,12 @@ export default function App() {
text: bpmnNode.text,
color: bpmnNode.color,
fill: bpmnNode.color,
- createdBy: user.id,
+ createdBy: userProfile.id,
bpmnNodeType: bpmnNode.type,
bpmnDurationMs: bpmnNode.durationMs,
}
addElement(newEl)
- setSelectedId(id)
+ setSelectedIds(selectOnly(id))
chooseTool('select')
return
}
@@ -1255,10 +1293,10 @@ export default function App() {
text: tool === 'sticky' ? 'Заметка' : 'Текст',
color: tool === 'sticky' ? STICKY_COLORS[0] : '#000000',
fill: tool === 'sticky' ? STICKY_COLORS[0] : 'transparent',
- createdBy: user.id
+ createdBy: userProfile.id
}
addElement(newEl)
- setSelectedId(id)
+ setSelectedIds(selectOnly(id))
setEditingText(id)
setEditValue(newEl.text || '')
chooseTool('select')
@@ -1268,9 +1306,9 @@ export default function App() {
const id = genId()
addElement({
id, type: tool, x: point.x, y: point.y, w: 0, h: 0,
- color, stroke: strokeWidth, fill: 'transparent', createdBy: user.id
+ color, stroke: strokeWidth, fill: 'transparent', createdBy: userProfile.id
})
- setSelectedId(id)
+ setSelectedIds(selectOnly(id))
setIsDrawing(true)
return
}
@@ -1278,7 +1316,7 @@ export default function App() {
setIsDrawing(true)
setCurrentPath([point])
}
- }, [tool, screenToWorld, transform, color, strokeWidth, addElement, deleteElement, user.id, selectedId, elements, selectedEmoji, bpmnFlowSourceId, setBpmnFlowSourceId, showToast, chooseTool, showBpmnPalette, previewSnapshot])
+ }, [tool, screenToWorld, transform, color, strokeWidth, addElement, deleteElement, userProfile.id, selectedIds, selectedElementId, selectElement, elements, selectedEmoji, bpmnFlowSourceId, setBpmnFlowSourceId, showToast, chooseTool, previewSnapshot])
const handlePointerMove = useCallback((e: React.PointerEvent) => {
const point = screenToWorld(e.clientX, e.clientY)
const isLaser = tool === 'laser'
@@ -1295,29 +1333,24 @@ export default function App() {
setTransform(t => ({ ...t, x: e.clientX - panStart.x, y: e.clientY - panStart.y }))
return
}
+ // Marquee
+ if (marqueeRef.current) {
+ setMarquee(normaliseRect(marqueeRef.current.from, point))
+ return
+ }
// Resize
- if (resizeInfo) {
- const dx = point.x - resizeInfo.startX
- const dy = point.y - resizeInfo.startY
- const c = resizeInfo.corner
- let newX = resizeInfo.elX, newY = resizeInfo.elY
- let newW = resizeInfo.elW, newH = resizeInfo.elH
- if (c === 'se') { newW = Math.max(30, resizeInfo.elW + dx); newH = Math.max(30, resizeInfo.elH + dy) }
- else if (c === 'sw') { newX = resizeInfo.elX + dx; newW = Math.max(30, resizeInfo.elW - dx); newH = Math.max(30, resizeInfo.elH + dy) }
- else if (c === 'ne') { newY = resizeInfo.elY + dy; newW = Math.max(30, resizeInfo.elW + dx); newH = Math.max(30, resizeInfo.elH - dy) }
- else if (c === 'nw') { newX = resizeInfo.elX + dx; newY = resizeInfo.elY + dy; newW = Math.max(30, resizeInfo.elW - dx); newH = Math.max(30, resizeInfo.elH - dy) }
- if (snapGrid) { newX = snapVal(newX); newY = snapVal(newY); newW = snapVal(newW); newH = snapVal(newH) }
- const frame = { id: resizeInfo.id, updates: { x: newX, y: newY, w: newW, h: newH } }
+ const resize = resizeInfoRef.current
+ if (resize) {
+ const frame = resizeFrame(resize, point, snapGrid ? snapVal : undefined)
transientFrameRef.current = frame
setTransientFrame(frame)
return
}
- // Drag
- if (dragInfo) {
- let newX = dragInfo.elStartX + (point.x - dragInfo.startX)
- let newY = dragInfo.elStartY + (point.y - dragInfo.startY)
- if (snapGrid) { newX = snapVal(newX); newY = snapVal(newY) }
- const frame = { id: dragInfo.id, updates: { x: newX, y: newY } }
+ // Drag: one delta applied to every dragged element, so a multi-selection
+ // moves as a group and stays internally consistent.
+ const drag = dragInfoRef.current
+ if (drag) {
+ const frame = dragFrame(drag, point, snapGrid ? snapVal : undefined)
transientFrameRef.current = frame
setTransientFrame(frame)
return
@@ -1327,16 +1360,16 @@ export default function App() {
setCurrentPath(prev => [...prev, point])
return
}
- if (selectedId && (tool === 'rect' || tool === 'circle' || tool === 'arrow' || tool === 'line')) {
- const el = elements.find(e => e.id === selectedId)
+ if (selectedElementId && (tool === 'rect' || tool === 'circle' || tool === 'arrow' || tool === 'line')) {
+ const el = elements.find(e => e.id === selectedElementId)
if (el) {
let w = point.x - el.x, h = point.y - el.y
if (snapGrid) { w = snapVal(w); h = snapVal(h) }
- updateElement(selectedId, { w, h })
+ updateElement(selectedElementId, { w, h })
}
}
- }, [isPanning, panStart, isDrawing, tool, selectedId, elements, screenToWorld, updateElement, dragInfo, resizeInfo, snapGrid, bpmnFlowSourceId])
- const handlePointerUp = useCallback(() => {
+ }, [isPanning, panStart, isDrawing, tool, selectedElementId, elements, screenToWorld, updateElement, snapGrid, bpmnFlowSourceId])
+ const handlePointerUp = useCallback((e?: React.PointerEvent) => {
// Cancel long press
if (longPressRef.current) {
if (performance.now() - longPressRef.current.startedAt < 500) {
@@ -1354,21 +1387,54 @@ export default function App() {
points: simplified.map(p => ({ x: p.x - minX, y: p.y - minY })),
color: tool === 'marker' ? color + '80' : color,
stroke: tool === 'marker' ? strokeWidth * 3 : strokeWidth,
- createdBy: user.id
+ createdBy: userProfile.id
})
}
- const frame = transientFrameRef.current
- if (frame) updateElement(frame.id, frame.updates)
+ // Where the pointer actually is. A cancelled gesture has no meaningful
+ // release point, so it keeps whatever the last move produced.
+ const releasedAt = e && e.type !== 'pointercancel' ? screenToWorld(e.clientX, e.clientY) : null
+ const snap = snapGrid ? snapVal : undefined
+ // Recompute the final frame from the release point instead of trusting the
+ // last committed pointermove: the gesture has to land where the user let go,
+ // whatever React has rendered by then.
+ const frame = releasedAt
+ ? resizeInfoRef.current
+ ? resizeFrame(resizeInfoRef.current, releasedAt, snap)
+ : dragInfoRef.current
+ ? dragFrame(dragInfoRef.current, releasedAt, snap)
+ : transientFrameRef.current
+ : transientFrameRef.current
+ // One commit per gesture, labelled as such: the drag itself stays local
+ // (transientFrame) so a 3-second drag is a single undo step, not 180.
+ if (frame?.length) {
+ const frames = frame
+ ydoc.transact(() => {
+ for (const item of frames) commitElementUpdate(ydoc, yElements.current!, item.id, item.updates)
+ }, LOCAL_GESTURE)
+ }
transientFrameRef.current = null
setTransientFrame(null)
+ // Finish the marquee: select what the rect covers, measured to the release
+ // point for the same reason as the frame above.
+ const pendingMarquee = marqueeRef.current
+ if (pendingMarquee) {
+ const rect = releasedAt ? normaliseRect(pendingMarquee.from, releasedAt) : marquee
+ if (rect) {
+ const picked = selectInRect(elements, rect, 'intersect')
+ setSelectedIds(current => (pendingMarquee.shift ? unionSelection(current, picked) : selectMany(picked)))
+ if (!pendingMarquee.shift) setAnchorId(picked.length ? picked[picked.length - 1] : null)
+ }
+ }
+ marqueeRef.current = null
+ setMarquee(null)
setIsDrawing(false)
setCurrentPath([])
setIsPanning(false)
setPanStart(null)
setLastPinchDist(null)
- setDragInfo(null)
- setResizeInfo(null)
- }, [isDrawing, tool, currentPath, color, strokeWidth, addElement, user.id, updateElement])
+ dragInfoRef.current = null
+ resizeInfoRef.current = null
+ }, [isDrawing, tool, currentPath, color, strokeWidth, addElement, userProfile.id, marquee, elements, ydoc, screenToWorld, snapGrid])
// Touch pinch
const handleTouchMove = useCallback((e: React.TouchEvent) => {
if (e.touches.length === 2) {
@@ -1377,12 +1443,9 @@ export default function App() {
const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
const cx = (t1.clientX + t2.clientX) / 2, cy = (t1.clientY + t2.clientY) / 2
if (lastPinchDist) {
- const s = dist / lastPinchDist
- setTransform(t => {
- const ns = clamp_scale(t.scale * s)
- const wc = screenToWorld(cx, cy)
- return { scale: ns, x: cx - wc.x * ns, y: cy - wc.y * ns }
- })
+ const factor = dist / lastPinchDist
+ const world = screenToWorld(cx, cy)
+ setTransform(current => zoomAround(current, factor, { x: cx, y: cy }, world))
}
setLastPinchDist(dist)
}
@@ -1390,37 +1453,15 @@ export default function App() {
// Wheel zoom
const handleWheel = useCallback((e: React.WheelEvent) => {
e.preventDefault()
- const delta = e.ctrlKey || e.metaKey ? -e.deltaY : -e.deltaY
- const scale = delta > 0 ? 1.08 : 0.92
- const point = screenToWorld(e.clientX, e.clientY)
- setTransform(t => {
- const ns = clamp_scale(t.scale * scale)
- return { scale: ns, x: e.clientX - point.x * ns, y: e.clientY - point.y * ns }
- })
+ const world = screenToWorld(e.clientX, e.clientY)
+ const factor = wheelZoomFactor(e.deltaY)
+ setTransform(current => zoomAround(current, factor, { x: e.clientX, y: e.clientY }, world))
}, [screenToWorld])
const fitToContent = useCallback(() => {
- const scoped = workspaceMode === 'board'
- ? elements.filter(element => !element.bpmnNodeType && !element.bpmnFlow)
- : elements.filter(element => element.bpmnNodeType || element.bpmnFlow)
- const visible = scoped.length ? scoped : elements
- if (!visible.length) {
- setTransform({ x: 0, y: 0, scale: 1 })
- return
- }
- const minX = Math.min(...visible.map(element => element.x))
- const minY = Math.min(...visible.map(element => element.y))
- const maxX = Math.max(...visible.map(element => element.x + (element.w || 48)))
- const maxY = Math.max(...visible.map(element => element.y + (element.h || 48)))
- const padding = 64
- const scale = clamp_scale(Math.min(
- (window.innerWidth - padding * 2) / Math.max(maxX - minX, 1),
- (window.innerHeight - 170) / Math.max(maxY - minY, 1),
- ))
- setTransform({
- scale,
- x: (window.innerWidth - (maxX - minX) * scale) / 2 - minX * scale,
- y: (window.innerHeight - (maxY - minY) * scale) / 2 - minY * scale,
- })
+ setTransform(fitTransform(elementsInScope(elements, workspaceMode), {
+ width: window.innerWidth,
+ height: window.innerHeight,
+ }))
}, [elements, workspaceMode])
useEffect(() => () => {
bpmnRunTimersRef.current.forEach(window.clearTimeout)
@@ -1429,7 +1470,7 @@ export default function App() {
useEffect(() => {
const h = (e: KeyboardEvent) => {
if (e.key === 'Escape' && previewSnapshot) { e.preventDefault(); closeTimeline(); return }
- if (e.key === 'Escape') { e.preventDefault(); setSelectedId(null); setContextMenu(null); setShowBpmnPalette(false); setWorkspaceMode('board'); return }
+ if (e.key === 'Escape') { e.preventDefault(); setSelectedIds(clearSelection()); setContextMenu(null); setShowBpmnPalette(false); setWorkspaceMode('board'); return }
if (editingText) return
if (showSimulationPanel && (e.key === 'Delete' || e.key === 'Backspace')) {
e.preventDefault()
@@ -1440,10 +1481,56 @@ export default function App() {
if (showSimulationPanel) return
const target = (e.target as HTMLElement | null) || document.activeElement as HTMLElement | null
if (target?.isContentEditable || (target && ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))) return
- if (e.key === 'Delete' || e.key === 'Backspace') { if (selectedId) deleteElement(selectedId) }
+ // Past this point every branch reads or writes the document, and a drag
+ // in progress is not in the document yet. Ctrl+D mid-drag used to place
+ // the copy next to where the element started, nowhere near the one on
+ // screen; Ctrl+C copied the pre-drag position. One flush covers all of
+ // them, rather than each shortcut having to remember.
+ flushGesture()
+ if (e.key === 'Delete' || e.key === 'Backspace') { if (selectedIds.size) deleteSelected() }
if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) { e.preventDefault(); handleUndo() }
if ((e.metaKey || e.ctrlKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) { e.preventDefault(); handleRedo() }
- if ((e.metaKey || e.ctrlKey) && e.key === 'd') { e.preventDefault(); if (selectedId) duplicateElement(selectedId) }
+ if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
+ e.preventDefault()
+ if (selectedIds.size) setSelectedIds(selectMany(duplicateSelection()))
+ }
+ // Clipboard. Ctrl+C is only taken over when the canvas has a selection,
+ // so copying text anywhere else in the UI keeps working natively.
+ if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'c' && !e.shiftKey) {
+ if (copySelection()) e.preventDefault()
+ return
+ }
+ if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'x') {
+ if (selectedIds.size) {
+ e.preventDefault()
+ cutSelection()
+ }
+ return
+ }
+ if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'v') {
+ e.preventDefault()
+ void pasteFromClipboard()
+ return
+ }
+ // Ctrl+A selects the whole board; arrow keys nudge the selection.
+ // `elements` is the live document, while a history preview renders
+ // `previewElements`. Selecting here during a preview would hand back
+ // objects that are not on screen — and Ctrl+C would then copy them.
+ if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'a') {
+ e.preventDefault()
+ if (previewSnapshot) return
+ selectElements(elements.map(element => element.id))
+ return
+ }
+ if (!e.metaKey && !e.ctrlKey && selectedIds.size && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+ e.preventDefault()
+ const step = e.shiftKey ? 10 : 1
+ const delta = e.key === 'ArrowUp' ? { x: 0, y: -step }
+ : e.key === 'ArrowDown' ? { x: 0, y: step }
+ : e.key === 'ArrowLeft' ? { x: -step, y: 0 } : { x: step, y: 0 }
+ moveSelection(delta)
+ return
+ }
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
e.preventDefault()
void saveBoard(e.shiftKey ? 'saveAs' : 'save')
@@ -1470,19 +1557,33 @@ export default function App() {
}
window.addEventListener('keydown', h, true)
return () => window.removeEventListener('keydown', h, true)
- }, [selectedId, deleteElement, editingText, handleUndo, handleRedo, duplicateElement, workspaceMode, fitToContent, showSimulationPanel, chooseTool, saveBoard, openBoard, previewSnapshot, closeTimeline])
+ }, [selectedIds, deleteSelected, editingText, flushGesture, handleUndo, handleRedo, duplicateSelection, elements, moveSelection, copySelection, cutSelection, pasteFromClipboard, selectElements, workspaceMode, fitToContent, showSimulationPanel, chooseTool, saveBoard, openBoard, previewSnapshot, closeTimeline])
// ======================== RENDER ELEMENT ========================
const isPreview = previewSnapshot !== null
const liveElementIds = useMemo(() => new Set(elements.map(element => element.id)), [elements])
const baseRenderedElements = previewElements ?? elements
const renderedElements = useMemo(() => {
if (!transientFrame || isPreview) return baseRenderedElements
- return baseRenderedElements.map(element => element.id === transientFrame.id
- ? { ...element, ...transientFrame.updates }
- : element)
+ const frames = new Map(transientFrame.map(frame => [frame.id, frame.updates]))
+ return baseRenderedElements.map(element => {
+ const updates = frames.get(element.id)
+ return updates ? { ...element, ...updates } : element
+ })
}, [baseRenderedElements, isPreview, transientFrame])
+ const selectionCount = selectedIds.size
+ /** Wires one element's text editing to the shared editor state. */
+ const textEditorProps = (el: BoardElement) => ({
+ text: el.text ?? '',
+ editing: editingText === el.id,
+ draft: editValue,
+ readOnly: isPreview,
+ onDraftChange: setEditValue,
+ onBeginEdit: () => { setEditingText(el.id); setEditValue(el.text || '') },
+ onCommit: () => { updateElement(el.id, { text: editValue }); setEditingText(null) },
+ })
+
const renderElement = (el: BoardElement) => {
- const isSelected = selectedId === el.id
+ const isSelected = isIdSelected(selectedIds, el.id)
const invS = 1 / transform.scale
const isChangedInPreview = isPreview && !liveElementIds.has(el.id)
if (el.bpmnNodeType) {
@@ -1496,7 +1597,7 @@ export default function App() {
const isBottleneck = el.bpmnNodeType === 'task' && visibleBottleneckRole !== null && el.bpmnResourceRole === visibleBottleneckRole
return (
- {isChangedInPreview && }
+ {isChangedInPreview && }
{el.bpmnNodeType === 'startEvent' && }
{el.bpmnNodeType === 'endEvent' && <>
@@ -1531,7 +1632,7 @@ export default function App() {
const d = smoothPathD(el.points)
return (
- {isChangedInPreview && }
+ {isChangedInPreview && }
6 ? { filter: `blur(${el.stroke > 10 ? 1 : 0}px)` } : {}) }} />
@@ -1545,48 +1646,41 @@ export default function App() {
case 'sticky':
return (
- {isChangedInPreview && }
+ {isChangedInPreview && }