# Конструктор писем VipAvenue (Svelte)

Подробная инструкция по использованию редактора для сборки Pug-кода писем.

## Запуск проекта
1. Установите зависимости: `npm install`
2. Запустите dev-сервер: `npm run dev`
3. Откройте ссылку из терминала (обычно `http://localhost:5173`)

## Сохранение в email-gen
Для записи `let.pug` и `html.pug` нужен локальный сервер. Автосохранение работает только для `html.pug`, а `let.pug` сохраняется кнопкой «Сохранить».

### Сборка и запуск
1. Соберите фронт: `npm run build`
2. Запустите сервер: `npm run serve`
3. Откройте интерфейс: `http://localhost:4173`

### Переменные окружения
- `EMAIL_GEN_ROOT` — путь к корню `email-gen`
- `EMAIL_GEN_PROJECT` — имя проекта (по умолчанию `vipavenue`)
- `EMAIL_GEN_HTML_PATH` — путь к `html.pug` внутри `email-gen` (опционально)
- `EMAIL_GEN_LETTERS_DIR` — путь к папке `letters` внутри `email-gen` (опционально)
- `EMAIL_GEN_PUBLIC_INDEX` — путь к `public/index.html` (опционально)
- `PORT` — порт сервера (по умолчанию `4173`)

Кнопка `HTML` в конструкторе копирует содержимое `public/index.html` через `/api/html`.

### Dev-режим (опционально)
Если запускаете `npm run dev`, укажите `VITE_API_BASE=http://localhost:4173`,
чтобы кнопка сохранения обращалась к backend.

## Общие элементы
- **Тёмная тема** — переключатель в топбаре. Сохраняется в `localStorage`.
- **Папка изображений** — глобальный префикс для всех картинок. В блоках указывается только имя файла и расширение.
- **Цены в товарах** — один глобальный флажок. Управляет всеми товарными блоками (включая «3 товара + картинка»).
- **Собрать мужское / Собрать женское** — переставляет сегменты относительно разделителя (`dividerVA`), сохраняя общие блоки до и после.
- **Сохранить как пресет** — сохраняет текущее состояние блоков и настроек.
- **Сбросить** — очищает блоки и Pug.

## Работа с блоками
- Добавляйте блок через выпадающий список «Тип блока».
- Каждый блок имеет сегмент: **O** (общий), **Ж**, **М**. Сегментный бейдж меняется при клике.
- Перетаскивайте блоки за «ручку» или кнопками ↑/↓.
- Параметры блока сразу попадают в Pug (панель справа).
- Кнопки «Скопировать код» / «Экспорт .pug» работают сверху и снизу панели кода.

### Сегменты и сборка версий
- Общие блоки **до** разделителя `dividerVA` всегда остаются сверху.
- При сборке **мужской** версии: сегмент М становится над разделителем, Ж — под ним; общие блоки вокруг разделителя остаются на месте.
- При возвращении на **женскую** версию порядок восстанавливается.

## Пресеты
- Вкладка «Пресеты»: Новинки, Акция, Новые коллекции, Мои пресеты.
- Для Новинок/Акции/Новых коллекций введите женские и мужские ID (до 16), при необходимости цены.
- Кнопки «Женская версия» / «Мужская версия» создают набор блоков и переходят в конструктор.
- «Мои пресеты» — сохранённые состояния конструктора. Доступны загрузка/удаление.

## Поля и картинки
- В блоках с картинками указывайте только имя файла и расширение; базовый путь — в «Папка изображений».
- Расширение по умолчанию: `.png`.

## Хранение данных
- `localStorage` ключи:
  - `vip_letter_editor_blocks_v1`
  - `vip_letter_editor_settings_v1` (включая `imageBaseUrl`, `showPrices`, тема)
  - `vip_letter_editor_theme`
  - `vip_letter_editor_custom_presets_v1`

## Частые действия
- **Показать превью HTML для текстового блока** — чекбокс внутри текстового блока (если нужен рендер HTML).
- **Убрать отступ после блока** — флажок внутри блока.
- **Ширина/высота, отступы** — в доп. настройках (кнопка «Доп. настройки» там, где она есть).

Если что-то пошло не так: проверьте, что глобальный флажок цен включён/выключен как нужно, и убедитесь, что разделитель `dividerVA` стоит на месте, если используете сборку мужской/женской версии.