GenTree

Веб-приложение для построения генеалогического древа с богатым медиа-контентом (фото, видео, аудио, документы), визуализацией отношений на канвасе и сохранением семейных историй.

Статус: MVP. Один пользователь, всё хранится локально в IndexedDB, без бэкенда.

---

Что в репозитории

Путь	Назначение
app/	Само приложение. Vite + React + TypeScript. Здесь весь код.
ARCHITECTURE.md	Проектный документ: стек, модель данных, архитектура канваса/медиа/историй, GEDCOM, этапы.
README.md	Этот файл.

Ранний однофайловый прототип (prototype.html / app.js) удалён — он полностью заменён приложением в app/. История доступна в git.

---

Как запустить

Нужен Node ≥ 20 (зафиксировано в app/.nvmrc и engines). Если используете nvm: nvm use в каталоге app/.

cd app
npm install
npm run dev      # дев-сервер Vite

Прочие команды (из каталога app/):

npm test         # юнит- и интеграционные тесты (Vitest)
npm run build    # tsc -b && vite build
npm run lint     # ESLint

---

Возможности

• Канвас на React Flow: кастомные карточки персон (аватар, годы жизни, место, теги, бейджи медиа/историй), зум, мини-карта, контролы.
• Связи разных типов (родитель—ребёнок, партнёр, брат/сестра, кастом) со своими стилями рёбер; создание связи перетаскиванием с выбором типа.
• Боковая панель персоны с вкладками: профиль, медиа, истории, связи, хронология.
• Медиа: загрузка фото/видео/аудио/PDF в IndexedDB (Blob), генерация превью, галерея, лайтбокс, авто-аватар.
• Истории с markdown и @упоминаниями персон.
• Авто-раскладка (dagre), поиск по ⌘K, фильтры (тег / только живущие / с медиа).
• Undo/redo (⌘Z / ⌘⇧Z) с группировкой правок в полях в один шаг.
• Библиотека древ: несколько древ рядом, переключение, переименование, удаление.
• Экспорт в .gentree (zip с tree.json + медиа) и JSON; импорт .gentree и GEDCOM (.ged) с отчётом. Все входные данные проходят валидацию схемой (zod).
• Клавиатура / a11y: ⌘K — поиск, ⌘Z/⌘⇧Z — undo/redo, Delete/Backspace — удалить выбранную персону или открытое ребро, Esc — закрыть панель/поиск.

---

Производительность

Тяжёлые зависимости подгружаются по требованию через динамический import(): marked — при первом рендере истории, jszip — при экспорте/импорте .gentree, parse-gedcom — только при импорте .ged. Стартовый JS-бандл — около 660 KB (минифицированный, ≈ 204 KB gzip).

Подробности архитектуры и модели данных — в ARCHITECTURE.md.

---

Ключевые решения

• Стек: Vite + React + TypeScript + React Flow + Zustand + Tailwind + Dexie/IndexedDB.
• Хранилище: локально через IndexedDB; медиа как Blob; экспорт .gentree (zip).
• Модель: четыре сущности — Persona, Relationship (отдельная сущность, не поле персоны), MediaAsset, Story. Схемы и типы заданы через zod в app/src/types.ts.
• Платформа: веб (Tauri рассматривается позже, если возможностей веба перестанет хватать).

---

Полезные ссылки

• React Flow / XYFlow: https://reactflow.dev
• Dexie (обёртка над IndexedDB): https://dexie.org
• Zustand: https://github.com/pmndrs/zustand
• Zod: https://zod.dev
• GEDCOM spec 7.0: https://gedcom.io
• parse-gedcom: https://www.npmjs.com/package/parse-gedcom