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

Максимально подробная инструкция: запуск, глобальные настройки, блоки, сегменты, пресеты, экспорт и хранение.

## 1. Запуск и окружение

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

Все состояния (блоки, настройки, тема, кастомные пресеты) хранятся в `localStorage`.

## 2. Макет интерфейса

- Топбар: переключатель темы (тёмная/светлая, сохраняется).
- Левая колонка — Конструктор:
  - Папка изображений — глобальный префикс URL.
  - Цены в товарах — общий флажок для всех товарных блоков.
  - Тип блока — добавление нового блока.
  - Собрать мужское / Собрать женское — обмен сегментов относительно разделителя.
  - Сохранить как пресет — сохраняет текущее состояние (блоки + настройки).
  - Сбросить — удаляет все блоки и код.
- Левая колонка — Пресеты: Новинки, Акция, Новые коллекции, Мои пресеты.
- Правая колонка: живой Pug-код, кнопки копирования/экспорта (дублируются сверху и снизу).
- Футер: цитата и ссылка на инструкцию.

## 3. Блоки и сегменты

- Сегменты: O — общий, Ж — женский, М — мужской. Меняются кликом по бейджу в заголовке.
- Перетаскивание: за «ручку» или кнопки ↑/↓.
- Все поля блока моментально обновляют Pug справа.
- Опция «Убрать отступ после блока» позволяет стыковать плотнее.
- Глобальный флажок «Цены в товарах» управляет всеми товарными блоками, включая «3 товара + картинка».

## 4. Сборка женской/мужской версии

- `dividerVA` — центр обмена сегментов.
- Общие блоки до/после разделителя остаются на местах.
- При «Собрать мужское» блоки М поднимаются над разделителем, блоки Ж опускаются под него.
- При «Собрать женское» порядок возвращается (запоминается при переключении на мужскую).

## 5. Перечень блоков

- Заголовки/текст: АКТУАЛЬНЫЙ заголовок, Текстовый блок (поддержка `<br>`, `` , `—`, жирный через `<span style="font-weight:700;">`). Есть HTML-превью.
- Кнопки: одиночная, двойная, тройная. Настройки ширины/высоты/цветов/шрифта/отступов.
- Баннеры: с ссылкой/без, 2/3 баннера (с/без текста). Имя файла + расширение, префикс берётся из «Папка изображений».
- Товары:
  - 4 в ряд, 3 в ряд.
  - Товары + картинка слева/справа; 3 товара + картинка слева/справа.
  - Цены регулируются глобальным флажком.
- Текст + картинка: картинка слева/справа, кнопка под текстом.
- Сервис: Отступ, Разделитель (`dividerVA`), Размерная сетка, Промокод.

## 6. Картинки

- Заполните «Папка изображений» (например, `https://email-files.vipavenue.ru/newsletter_2025/2025_12_07/`).
- В блоках — только имя файла и расширение (`.png` по умолчанию). При необходимости есть поля расширения и прямой URL (fallback).
- URL собирается автоматически: префикс + имя файла + расширение.

## 7. Пресеты

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

## 8. Экспорт Pug

- Поле справа всегда содержит актуальный Pug.
- «Скопировать код» — в буфер; «Экспорт .pug» — скачивает файл `letter.pug`.
- Кнопки копирования/экспорта продублированы сверху и снизу панели кода.

## 9. Хранение данных (localStorage)

- `vip_letter_editor_blocks_v1` — блоки.
- `vip_letter_editor_settings_v1` — настройки (включая `imageBaseUrl`, `showPrices`).
- `vip_letter_editor_theme` — тема.
- `vip_letter_editor_custom_presets_v1` — пользовательские пресеты.

## 10. Практические советы

- Следите, чтобы `dividerVA` стоял на месте, если используете сборку мужской/женской версии.
- После «Собрать мужское» вернуться на женскую можно той же кнопкой (текст меняется).
- Для плотного стыка блоков снимайте «Отступ после блока».
- В текстовых блоках включайте HTML-превью, если хотите увидеть рендер `<br>`/`` /`—` и жирного текста.