База знаний

1. Интеграция верстки (Посадка)

meloddyCMS не требует изучения сложных языков шаблонизаторов. Посадка происходит прямо на вашу готовую HTML-верстку.

1. Возьмите вашу готовую папку с сайтом (с index.html, папками css, js, img).
2. Убедитесь, что пути к стилям и картинкам в HTML — относительные от корня (например, <img src="/img/logo.png">).
3. Запакуйте содержимое папки (именно файлы, а не саму папку) в ZIP-архив.
4. В Дашборде админки нажмите «Загрузить сайт (.ZIP)» и выберите ваш архив.
5. Система сама распакует сайт, настроит роутинг и сделает его доступным в CMS.

2. Разметка элементов

Чтобы клиент мог менять текст или картинки в Визуальном редакторе, вам нужно разметить нужные теги специальными data-атрибутами.

Редактирование текста (data-editable)

Добавьте атрибут data-editable="уникальный_ключ" к любому текстовому тегу (h1-h6, p, span, div). Ключ должен быть уникальным в рамках страницы.

<h1 data-editable="hero_title">Мы создаем сайты</h1>
<p data-editable="hero_subtitle">Быстро и качественно</p>

Замена изображений (data-img-editable)

Для тегов <img> используйте атрибут data-img-editable="ключ". При клике в редакторе откроется загрузчик файлов.

<img data-img-editable="about_photo" src="/img/about.jpg" alt="О нас">

Фоновые изображения (data-bg-editable)

Если картинка задана через CSS свойство background-image (inline style), используйте data-bg-editable="ключ".

<section data-bg-editable="main_banner" style="background-image: url('/img/banner.jpg');">
    ...
</section>

3. Подключение форм (Лиды)

Для отправки заявок с сайта в Telegram-бот CMS, вам не нужно писать PHP-скрипты или настраивать SMTP. Достаточно слегка модифицировать вашу HTML-форму.

1. Форма должна отправлять данные POST-запросом на наш API-эндпоинт: action="/api/submit-form".
2. Каждое поле (input) должно иметь понятный атрибут name (например: name="Телефон", name="Имя"). CMS использует эти имена для формирования красивого сообщения в Telegram.
3. Форма должна перехватываться через JS, либо редиректить на страницу "Спасибо". (Для базовой работы CMS сама отловит submit, если подключен наш базовый скрипт интеграции).

<form action="/api/submit-form" method="POST">
    <input type="text" name="Имя" placeholder="Ваше имя" required>
    <input type="tel" name="Телефон" placeholder="Ваш телефон" required>
    <button type="submit">Оставить заявку</button>
</form>

4. Создание шаблонов

Шаблоны позволяют вам один раз собрать типовой сайт (например, квиз или лендинг для стройки), а затем создавать из него новые проекты для клиентов в один клик.

Как создать шаблон:

1. Сверстайте сайт и полностью разметьте его data-editable атрибутами.
2. Создайте в корне папки файл template.json со следующим содержимым:

{
  "name": "Лендинг: Строительство домов",
  "description": "Светлый шаблон со слайдером и формой",
  "version": "1.0.0"
}

3. Запакуйте все файлы сайта (вместе с template.json) в ZIP-архив.
4. В Дашборде админки перейдите на вкладку «Шаблоны» и загрузите этот архив.

Теперь вы сможете разворачивать этот сайт под новых клиентов моментально, просто указывая новый домен или ID проекта!

5. Динамические компоненты и скрипты

В отличие от классических CMS, которые перестраивают DOM дерева и ломают ваши JavaScript плагины (слайдеры, табы, анимации), визуальный редактор meloddyCMS работает в режиме прямого редактирования.

Сохранение работоспособности JS

Когда пользователь редактирует текст или меняет картинку, CMS обновляет только текстовые узлы или атрибут src, не перезагружая страницу и не ломая привязанные JS-слушатели событий.

• Динамические слайдеры: Если у вас есть инициализированный слайдер Swiper или Slick, он продолжит работать в визуальном редакторе. Если пользователь изменит изображение в слайде, оно обновится «на лету».
• Рекомендация: Для элементов, которые скрыты при загрузке (например, модальные окна), вы можете использовать атрибут data-editable, но чтобы клиент мог их увидеть в редакторе, CMS предоставляет специальную панель просмотра скрытых элементов.

6. Тонкая настройка SEO и метатегов

Вы можете позволить клиенту самостоятельно редактировать SEO-параметры страницы, используя системные data-атрибуты.

Помимо вкладки «SEO & Файлы» в настройках дашборда, вы можете внедрить прямое редактирование метатегов в HTML коде шаблона:

• <title data-editable="meta_title">...</title> — позволяет клиенту менять заголовок вкладки.
• <meta name="description" content="Отредактируйте меня" data-editable="meta_description"> — описание для поисковиков.
• Для картинок OpenGraph (OG Image) используйте <meta property="og:image" content="/img/share.jpg" data-img-editable="og_image">.

7. REST API Платформы

meloddyCMS предоставляет набор REST API эндпоинтов, которые вы можете использовать для интеграции с внешними системами или разработки собственных расширений.

Основные эндпоинты:

• GET /api/sites — получить список всех сайтов текущего пользователя (доступно для ролей admin и developer).
• POST /api/sites — создать новый сайт на основе ZIP-архива.
• GET /api/sites/:id/files — получить структуру файлов проекта в формате JSON.
• POST /api/submit-form — эндпоинт для отправки лидов. Принимает JSON или url-encoded данные и пересылает их в привязанный Telegram-чат.
• POST /api/settings/developer — привязка разработчика к сайту по уникальному коду.

8. Локальная разработка и синхронизация

Для удобства разработки шаблонов и верстки вы можете использовать Git и разрабатывать сайты на своем локальном компьютере.

Синхронизация через FTP/SFTP или Git

Вы можете настроить автоматический деплой из вашей IDE (VS Code, WebStorm) прямо в директорию сайтов на сервере:

• Путь к проектам на сервере: /home/ubuntuuser/meloddy-cms/data/sites/[siteId].
• При обновлении файлов напрямую на сервере кэш визуального редактора сбрасывается автоматически, и клиент сразу видит обновленную верстку при следующем входе в редактор.

9. База данных SQLite и архитектура данных

Вся конфигурация пользователей, проекты, связи с Telegram и лиды хранятся в легковесной и быстрой базе данных SQLite.

Схема БД и файлы данных:

• Файл базы данных находится по пути: data/database.sqlite (или конфигурационный файл users.json / sites.json в зависимости от сборки).
• Таблица leads содержит поля: id (уникальный номер), site_id (ID сайта), data (JSON строка со всеми полями формы), status (статус в CRM: new, in_progress, completed, rejected), created_at (дата создания).
• Конфигурационные данные каждого отдельного сайта хранятся в скрытой папке проекта: data/sites/[siteId]/.meloddy/config.json.

10. Оптимизация производительности и скорость загрузки

meloddyCMS не делает лишних запросов к базе данных при открытии ваших сайтов посетителями. Все страницы отдаются напрямую веб-сервером Nginx как статический HTML, что обеспечивает невероятную скорость работы (100 баллов в Google PageSpeed Insights).

Рекомендации по оптимизации:

1. Используйте современные форматы изображений (WebP, SVG).
2. Подключайте CSS в шапке документа, а JS — в самом конце перед закрывающим тегом </body> с атрибутом defer.
3. Минифицируйте ваши ассеты перед упаковкой в ZIP. CMS отдает файлы в оригинальном виде, поэтому предварительная минификация CSS/JS сэкономит трафик ваших пользователей.

11. Авто-посадка и подготовка верстки через ИИ

Чтобы максимально ускорить посадку сайта на meloddyCMS (особенно если верстка сгенерирована ИИ-конструкторами или визуальными средами вроде VibeCode), вы можете использовать любой ИИ-ассистент (Claude, ChatGPT, Gemini).

Используйте следующий подготовленный промпт. Скопируйте его и отправьте в чат с ИИ вместе с архивом вашего проекта или кодом страниц:

Ты — специализированный транскомпилятор и системный нормализатор статической верстки для платформы meloddyCMS. 
Твоя задача — преобразовать предоставленные исходные файлы верстки (HTML, CSS, JS, медиа-ресурсы), включая экспортированные из визуальных сред и генераторов кода (таких как VibeCode), и полностью подготовить их к интеграции с платформой meloddyCMS.

Выполняй обработку строго по шагам (Chain of Thought), следуя техническому регламенту ниже.

---

### ТЕХНИЧЕСКИЙ РЕГЛАМЕНТ ОБРАБОТКИ ВЕРСТКИ

#### ШАГ 1: Реорганизация структуры каталогов
Приведи файловую структуру проекта к следующему стандарту:
1. Все файлы страниц (*.html) должны быть перенесены исключительно в корень проекта.
2. Все файлы стилей (*.css) должны быть перенесены в директорию /css/.
3. Все файлы скриптов (*.js) должны быть перенесены в директорию /js/.
4. Все медиаресурсы (изображения png/jpg/webp/avif, векторная графика svg, шрифты, иконки, favicon) должны быть перенесены в директорию /img/.

#### ШАГ 2: Нормализация путей в коде (Рефакторинг ссылок)
Замени все относительные (../, ./, images/, assets/) и абсолютные сторонние пути во всех HTML и CSS файлах на относительные от корня сайта. Каждый путь должен начинаться со знака слэша /:
- Подключение стилей: <link rel="stylesheet" href="/css/style.css">
- Подключение скриптов: <script src="/js/main.js"></script>
- Подключение картинок: <img src="/img/logo.svg">
- Фоновые изображения в CSS: background-image: url('/img/hero-bg.webp');
- Фавикон: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> (favicon.svg находится в корне).

#### ШАГ 3: Интеграция data-атрибутов редактирования (Визуальный редактор)
Разметь все контентные элементы специальными атрибутами. 

##### Валидация идентификаторов (ID):
Каждое значение атрибута (ключ) должно:
1. Быть уникальным в пределах одной страницы.
2. Соответствовать регулярному выражению: ^[a-z0-9_]+$ (только строчные латинские буквы, цифры и символ подчеркивания).
3. Иметь длину от 3 до 50 символов.
4. Отражать семантическое назначение элемента (например: hero_title, benefit_card_1_text).

##### Правила разметки элементов:
1. Редактируемый текст (data-editable):
   Добавь атрибут data-editable="[уникальный_ключ]" к тегам: <h1>-<h6>, <p>, <span>, <div class="...-text">, <a> (если внутри ссылки только простой текст).
   * ДО: <h2 class="title">Наши услуги</h2>
   * ПОСЛЕ: <h2 class="title" data-editable="services_title">Наши услуги</h2>
2. Заменяемые изображения (data-img-editable):
   Добавь атрибут data-img-editable="[уникальный_ключ]" к тегам <img>.
   * ДО: <img class="logo" src="img/logo-old.png" alt="Лого">
   * ПОСЛЕ: <img class="logo" src="/img/logo-old.png" data-img-editable="header_logo" alt="Лого">
3. Фоновые изображения (data-bg-editable):
   Если фон задан инлайн-стилем style="background-image: url(...)", добавь атрибут data-bg-editable="[уникальный_ключ]".
   * ДО: <div class="hero" style="background-image: url('assets/hero.jpg');">
   * ПОСЛЕ: <div class="hero" data-bg-editable="hero_banner" style="background-image: url('/img/hero.jpg');">

#### ШАГ 4: Интеграция лид-форм (CRM и уведомления)
Все HTML-формы на страницах сайта должны быть адаптированы для отправки лидов во встроенную CRM-систему meloddyCMS и привязанный Telegram-канал.

##### Правила для форм:
1. Тег <form> должен иметь атрибуты: action="/api/submit-form" и method="POST".
2. Каждый элемент ввода данных (<input>, <textarea>, <select>) обязан иметь атрибут name. Значение этого атрибута должно быть человекочитаемым русским словом или фразой, так как оно напрямую транслируется в Telegram-оповещения администратора.
3. Кнопка отправки формы должна иметь тип type="submit".

##### Таблица сопоставления полей (Few-shot mapping):
- name="name" или name="first-name" ➡️ name="Имя"
- name="phone" или name="tel" ➡️ name="Телефон"
- name="email" ➡️ name="Email"
- name="message" или name="comment" ➡️ name="Сообщение"
- name="company" ➡️ name="Компания"

##### Пример нормализации формы:
* ДО:
  <form id="contact-form">
      <input type="text" name="user_name" placeholder="Введите имя">
      <input type="tel" name="phone_number" placeholder="Ваш телефон">
      <textarea name="user_message"></textarea>
      <button class="submit-btn">Отправить</button>
  </form>
* ПОСЛЕ:
  <form action="/api/submit-form" method="POST">
      <input type="text" name="Имя" placeholder="Введите имя" required>
      <input type="tel" name="Телефон" placeholder="Ваш телефон" required>
      <textarea name="Сообщение"></textarea>
      <button type="submit" class="submit-btn">Отправить</button>
  </form>

#### ШАГ 5: Валидация сборки (Sanity Check)
Перед генерацией ответа перепроверь полученный результат по чек-листу:
1. Нет ли сломанных путей и ссылок (каждый href/src стилей, скриптов и картинок начинается со слэша /).
2. Все ли data-атрибуты имеют валидные уникальные ключи (^[a-z0-9_]+$).
3. Все ли формы имеют action="/api/submit-form" и method="POST", а их поля — русские атрибуты name.
4. Весь HTML-код валиден, теги закрыты, стили/скрипты не удалены.

---

### ФОРМАТ ОТВЕТА
Выведи результат строго в следующем формате:
1. Файловая структура: Схема перемещения файлов (какие файлы куда перенесены).
2. Сборка проекта: Полные версии измененных файлов (HTML-код страниц) без сокращений и пропусков. Не используй плейсхолдеры вида <!-- тут остальной код -->, выводи код целиком, чтобы его можно было скопировать.

После обработки ИИ вы получите готовую структуру файлов. Вам останется лишь запаковать их в ZIP-архив и загрузить в CMS в один клик!

12. Посадка фреймворков и Headless-интеграция

meloddyCMS предоставляет полноценную поддержку современных фреймворков (React, Vue 3, Next.js) через Headless API v1 и встроенный универсальный JavaScript SDK.

Вы получаете гибридную модель работы: данные (статьи, товары, кастомные коллекции) запрашиваются динамически через API, но при этом сохраняется полная работоспособность визуального редактора и панели стилей!

Принцип работы интеграции:

1. Загрузка данных: Фронтенд инициализирует клиент MeloddyClient из SDK (/js/sdk.js) и запрашивает данные с помощью методов client.content.list('slug') (для коллекций) или client.blog.list().
2. Визуальное инлайновое редактирование: На все выводимые элементы вешаются атрибуты data-meloddy-collection, data-meloddy-item и data-meloddy-field. Скрипт-мост /js/visual-bridge.js автоматически отслеживает клики по ним во фрейме редактора и открывает форму изменения контента.
3. Панель стилей и слоев: Чтобы в визуальном редакторе работала правая панель стилей (шрифты, отступы, границы, кастомные CSS-классы) и левая панель слоев, оберните статические структурные элементы разметки в атрибуты data-block-id="[уникальный_id]" и data-editable="[уникальный_id]". Это позволит редактору сохранять изменения стилей прямо в файлы шаблонов!

Специализированные промпты авто-посадки под фреймворки

Ниже представлены готовые промпты для ИИ-ассистентов, адаптированные под конкретные технологии. Скопируйте нужный промпт и отправьте его ИИ вместе с кодом вашего приложения:

Ты — специализированный ИИ-разработчик по бесшовной интеграции React-приложений (React / Vite / Create React App) с meloddyCMS Headless API.
Твоя задача — преобразовать предоставленный React-компонент (или целое SPA-приложение) и подготовить его к полной интеграции с платформой.

Выполняй обработку строго по шагам (Chain of Thought), следуя техническому регламенту ниже.

---

### ТЕХНИЧЕСКИЙ РЕГЛАМЕНТ ОБРАБОТКИ REACT-КОДА

#### ШАГ 1: Импорт SDK и подключение библиотек
1. В корневом index.html убедись, что перед закрывающим тегом </head> подключены:
   <script src="/js/sdk.js"></script>
   <script src="/js/visual-bridge.js"></script>
2. В коде компонента используй глобальный класс MeloddyClient для запроса контента.

#### ШАГ 2: Инициализация клиента и состояние (State)
Инициализируй клиент MeloddyClient внутри useEffect и сохрани данные в реактивном состоянии React (useState):

const [hero, setHero] = useState(null);
const [features, setFeatures] = useState([]);
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
    const client = new MeloddyClient({
        siteId: 'react-client', // ID текущего сайта
        apiKey: 'ml_pk_react_client_key', // Публичный API-ключ
        baseUrl: window.location.origin
    });

    Promise.all([
        client.content.list('landing_hero'),
        client.content.list('features'),
        client.blog.list()
    ]).then(([heroRes, featuresRes, blogRes]) => {
        if (heroRes && heroRes.items && heroRes.items.length > 0) {
            setHero(heroRes.items[0]);
        }
        setFeatures(featuresRes.items || []);
        setPosts(blogRes.posts || []);
        setLoading(false);
    }).catch(err => {
        console.error("MeloddyCMS Load Error:", err);
        setLoading(false);
    });
}, []);

#### ШАГ 3: Разметка JSX-элементов для инлайнового визуального редактора
Все выводимые текстовые и медийные данные должны быть размечены специальными data-атрибутами:
1. data-meloddy-collection="[slug_коллекции]" — слаг схемы коллекции контента.
2. data-meloddy-item="[id_записи]" — ID записи в коллекции.
3. data-meloddy-field="[имя_поля]" — конкретное имя редактируемого поля (например, title, subtitle, icon, content).

##### Примеры JSX-разметки:
- Текстовый заголовок баннера:
  <h1 data-meloddy-collection="landing_hero" data-meloddy-item={hero?.id || 'hero'} data-meloddy-field="title">{hero?.title || 'React & Headless'}</h1>
- Описание преимуществ в цикле:
  <p data-meloddy-collection="features" data-meloddy-item={feat.id} data-meloddy-field="description">{feat.description}</p>
- Для HTML-контента постов блога (используй dangerouslySetInnerHTML):
  <div data-meloddy-collection="posts" data-meloddy-item={post.id} data-meloddy-field="content" dangerouslySetInnerHTML={{ __html: post.content }} />

#### ШАГ 4: Поддержка визуальной панели стилей и слоев (Visual Editor)
Обязательно добавь к крупным структурным JSX-блокам, секциям или статическим элементам атрибуты:
- data-block-id="[уникальный_id]" — ID блока для панели слоев.
- data-editable="[уникальный_id]" — ID редактируемого блока для применения стилей (границы, тени, цвета, шрифты) через визуальный редактор.

##### Пример:
<h2 className="section-title" data-editable="section-title-features">Преимущества React Headless</h2>

---
Возвращай полностью готовый, чистый и рабочий React-код без плейсхолдеров.

Ты — специализированный ИИ-разработчик по бесшовной интеграции приложений Vue 3 (Composition API / Pinia / Vite) с meloddyCMS Headless API.
Твоя задача — адаптировать код Vue 3 (SFC - Single File Component) для динамического получения контента и полной интеграции с платформой.

Выполняй обработку строго по шагам (Chain of Thought), следуя техническому регламенту ниже.

---

### ТЕХНИЧЕСКИЙ РЕГЛАМЕНТ ОБРАБОТКИ VUE 3 КОДА

#### ШАГ 1: Подключение SDK
1. Убедись, что на странице подключены скрипты /js/sdk.js и /js/visual-bridge.js.
2. Внутри блока <script setup> используй глобально доступный класс MeloddyClient.

#### ШАГ 2: Инициализация и реактивное состояние
Объяви реактивные переменные через ref() и сделай асинхронный запрос в onMounted():

import { ref, onMounted } from 'vue';

const hero = ref(null);
const features = ref([]);
const reviews = ref([]);
const loading = ref(true);
const error = ref(null);

onMounted(async () => {
    try {
        const client = new MeloddyClient({
            siteId: 'vue-client', // ID сайта
            apiKey: 'ml_pk_vue_client_key', // Публичный API-ключ
            baseUrl: window.location.origin
        });

        const [heroRes, featuresRes, reviewsRes] = await Promise.all([
            client.content.list('landing_hero'),
            client.content.list('features'),
            client.content.list('reviews')
        ]);

        if (heroRes && heroRes.items && heroRes.items.length > 0) {
            hero.value = heroRes.items[0];
        }
        features.value = featuresRes.items || [];
        reviews.value = reviewsRes.items || [];
    } catch (err) {
        error.value = err.message;
        console.error("MeloddyCMS Load Error:", err);
    } finally {
        loading.value = false;
    }
});

#### ШАГ 3: Привязка полей шаблона с data-атрибутами инлайнового редактирования
Используй связывание атрибутов Vue (:) для передачи динамических ID записей (data-meloddy-item):
1. Баннер:
   <h1 data-meloddy-collection="landing_hero" :data-meloddy-item="hero?.id || 'hero'" data-meloddy-field="title">{{ hero?.title || 'Vue 3 CMS' }}</h1>
2. Карточка отзыва в цикле v-for:
   <span class="reviewer-name" data-meloddy-collection="reviews" :data-meloddy-item="review.id" data-meloddy-field="reviewerName">{{ review.reviewerName }}</span>
3. Вывод контента блога с рендерингом HTML (директива v-html):
   <div v-html="post.content" data-meloddy-collection="posts" :data-meloddy-item="post.id" data-meloddy-field="content"></div>

#### ШАГ 4: Поддержка визуальной панели стилей и слоев (Visual Editor)
Обязательно размечай статические заголовки, секции и общие контейнеры атрибутами:
- data-block-id="[id]"
- data-editable="[id]"

##### Пример:
<div class="reviews-list" data-block-id="reviews-list-container" data-editable="reviews-list-container"> ... </div>

---
Возвращай полностью готовый, чистый и рабочий Vue-код без плейсхолдеров.

Ты — специализированный ИИ-разработчик по бесшовной интеграции приложений Next.js (App Router / Static Export / SSR / ISR) с meloddyCMS Headless API.
Твоя задача — адаптировать Next.js страницы (JSX/TSX) для получения динамического контента и поддержки инлайнового визуального редактирования.

Выполняй обработку строго по шагам (Chain of Thought), следуя техническому регламенту ниже.

---

### ТЕХНИЧЕСКИЙ РЕГЛАМЕНТ ОБРАБОТКИ NEXT.JS КОДА

#### ШАГ 1: Импорт SDK и подключение библиотек
1. Подключи SDK и visual-bridge.js (например, через тег <Script> в вашем корневом layout.js или index.html):
   <Script src="/js/sdk.js" strategy="beforeInteractive" />
   <Script src="/js/visual-bridge.js" strategy="lazyOnload" />
2. Используй глобально доступный класс MeloddyClient для выполнения API запросов.

#### ШАГ 2: Получение данных (Data Fetching)
Инициализируй клиент MeloddyClient и запроси данные коллекций и статей блога.
- При статической генерации (SSG / Static Export) или серверном рендеринге (SSR / ISR) используйте встроенные асинхронные методы Next.js:

const client = new MeloddyClient({
    siteId: 'nextjs-client', // ID сайта
    apiKey: 'ml_pk_nextjs_client_key', // Публичный API-ключ
    baseUrl: 'http://localhost:3000' // Ссылка на сервер CMS
});

// Пример асинхронного fetch-запроса контента
const heroRes = await client.content.list('landing_hero');
const featuresRes = await client.content.list('features');
const blogRes = await client.blog.list();

const hero = heroRes.items?.[0] || null;
const features = featuresRes.items || [];
const posts = blogRes.posts || [];

#### ШАГ 3: Привязка полей к JSX-разметке с data-атрибутами
Для правильной работы инлайнового редактирования в визуальном редакторе разметь все контентные поля:
- data-meloddy-collection
- data-meloddy-item
- data-meloddy-field

##### Примеры JSX:
- Заголовок баннера:
  <h1 data-meloddy-collection="landing_hero" data-meloddy-item={hero?.id || 'hero'} data-meloddy-field="title">{hero?.title}</h1>
- Карточки преимуществ:
  {features.map(feat => (
      <div key={feat.id} className="feature-card">
          <h3 data-meloddy-collection="features" data-meloddy-item={feat.id} data-meloddy-field="title">{feat.title}</h3>
          <p data-meloddy-collection="features" data-meloddy-item={feat.id} data-meloddy-field="description">{feat.description}</p>
      </div>
  ))}
- Контент постов (используй безопасный вывод HTML):
  <div data-meloddy-collection="posts" data-meloddy-item={post.id} data-meloddy-field="content" dangerouslySetInnerHTML={{ __html: post.content }} />

#### ШАГ 4: Поддержка визуальной панели стилей и слоев (Visual Editor)
Каждый статический структурный блок или обертку снабди атрибутами:
- data-block-id="[id]"
- data-editable="[id]"

##### Пример:
<header className="header" id="hero-section" data-block-id="hero-section" data-editable="hero-section"> ... </header>

---
Возвращай полностью готовый, чистый и рабочий Next.js JSX-код без плейсхолдеров.