@zohofinance/commerce 1.1.0 → 2.1.0

package/ts-dist/commands/serve-theme.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import fs from 'fs';
+import { fileURLToPath } from 'url';
 import open from 'open';
 import openEditor from 'open-editor';
 import chalk from 'chalk';
@@ -15,6 +16,10 @@ import StackTrace from '../utils/stack-trace.js';
 import { validateTheme, formatValidationIssuesForConsole } from '../utils/theme-validation.js';
 import { buildValidationErrorReport, buildRuntimeErrorReport, renderDevErrorPage } from '../utils/error-report.js';
 import { STOREFRONT_ROUTES, resolveApiPath, resolvePageTemplate } from '../routes/storefront-routes.js';
+import { resolveSchemaSettings } from '../utils/resolve-schema-settings.js';
+import { resolveSchemaTranslations as resolveSchemaT, resolveSchemaName } from '../utils/resolve-schema-translations.js';
+import { prepareSectionData } from '../utils/prepare-section-data.js';
+import { buildSectionComponentAttr } from '../utils/editor-attributes.js';
 function normalizeStoreUrl(input) {
     if (!input)
         return undefined;
@@ -183,7 +188,11 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         try {
             const pageTemplate = resolvePageTemplate(routePageTemplate);
             const data = await fetchPageData(apiPath);
+            // Always render in editor mode so sections get data-zcommerce-component attributes
+            engine.engine.__editorMode = true;
+            engine.engine.__editorJsonType = 'template';
             const result = await renderPage(pageTemplate, data, req);
+            engine.engine.__editorMode = false;
             if ('json' in result && result.json) {
                 res
                     .status(result.status ?? 200)
@@ -191,9 +200,18 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                     .send(JSON.stringify(result.json, null, 2));
                 return;
             }
-            res.status(result.status ?? 200).send(result.html);
+            let html = result.html ?? '';
+            const bridgeTag = '<script src="/sb-bridge.js"></script>';
+            if (html.includes('</body>')) {
+                html = html.replace('</body>', `${bridgeTag}</body>`);
+            }
+            else {
+                html += bridgeTag;
+            }
+            res.status(result.status ?? 200).send(html);
         }
         catch (error) {
+            engine.engine.__editorMode = false;
             next(error);
         }
     }
@@ -201,6 +219,20 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     const app = express();
     const upload = multer();
     app.use(express.json());
+    app.use((_req, res, next) => {
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+        if (_req.method === 'OPTIONS') {
+            res.sendStatus(204);
+            return;
+        }
+        next();
+    });
+    app.get('/sb-bridge.js', (_req, res) => {
+        const __dirname = path.dirname(fileURLToPath(import.meta.url));
+        res.type('application/javascript').sendFile(path.resolve(__dirname, '../../public/iframe-bridge.js'));
+    });
     app.engine('liquid', engine.express());
     app.set('views', ['./pages']);
     app.set('view engine', 'liquid');
@@ -714,6 +746,639 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             next(error);
         }
     });
+    // Runtime fields added by the CLI on section/block root objects — must NOT be written to disk.
+    // NOTE: display_name inside settings values (e.g. {display_name:"Full Width",value:"full"}) is
+    // legitimate theme data — we only strip it at the section/block root level, not inside settings.
+    const COMPONENT_RUNTIME_FIELDS = new Set(['id', 'display_name', 'settingid', 'zcommerce_attributes', 'block_key', 'available_sections', 'available_blocks']);
+    // Clean a single section or block object: strip runtime fields from root, recurse into blocks,
+    // but leave settings values entirely untouched (they may contain legitimate display_name/handle).
+    function cleanComponentForDisk(obj) {
+        const out = {};
+        for (const [k, v] of Object.entries(obj)) {
+            if (COMPONENT_RUNTIME_FIELDS.has(k))
+                continue;
+            if (k === 'blocks' && v && typeof v === 'object' && !Array.isArray(v)) {
+                // blocks is an object map — clean each block recursively
+                const cleanedBlocks = {};
+                for (const [bk, bv] of Object.entries(v)) {
+                    cleanedBlocks[bk] = bv && typeof bv === 'object' && !Array.isArray(bv)
+                        ? cleanComponentForDisk(bv)
+                        : bv;
+                }
+                out[k] = cleanedBlocks;
+            }
+            else {
+                // settings, type, block_order, etc. — pass through unchanged
+                out[k] = v;
+            }
+        }
+        return out;
+    }
+    function cleanFullJsonForDisk(json) {
+        const sections = json.sections;
+        if (!sections || typeof sections !== 'object' || Array.isArray(sections)) {
+            return json;
+        }
+        const cleanedSections = {};
+        for (const [sk, sv] of Object.entries(sections)) {
+            cleanedSections[sk] = sv && typeof sv === 'object' && !Array.isArray(sv)
+                ? cleanComponentForDisk(sv)
+                : sv;
+        }
+        return { ...json, sections: cleanedSections };
+    }
+    function getJsonFilePath(jsonType, pageName) {
+        if (jsonType === 'header')
+            return path.join(cwd, 'sections', 'header-group.json');
+        if (jsonType === 'footer')
+            return path.join(cwd, 'sections', 'footer-group.json');
+        const page = pageName === 'home' ? 'index' : pageName || 'index';
+        return path.join(cwd, 'pages', `${page}.json`);
+    }
+    function persistFullJsonToDisk(jsonType, pageName, json) {
+        const filePath = getJsonFilePath(jsonType, pageName);
+        try {
+            fs.writeFileSync(filePath, JSON.stringify(cleanFullJsonForDisk(json), null, 2), 'utf-8');
+        }
+        catch (e) {
+            console.warn('[dev] Failed to persist full JSON:', e);
+        }
+    }
+    // Cache parsed section schemas (type → { name, blocks }) to avoid re-reading files.
+    const sectionSchemaCache = new Map();
+    function getSectionSchema(sectionType) {
+        if (sectionSchemaCache.has(sectionType))
+            return sectionSchemaCache.get(sectionType);
+        const liquidPath = path.join(cwd, 'sections', `${sectionType}.liquid`);
+        try {
+            const content = fs.existsSync(liquidPath) ? fs.readFileSync(liquidPath, 'utf-8') : '';
+            const match = content.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+            const schema = match ? JSON.parse(match[1].trim()) : {};
+            const result = { name: schema.name, blocks: schema.blocks };
+            sectionSchemaCache.set(sectionType, result);
+            return result;
+        }
+        catch {
+            sectionSchemaCache.set(sectionType, {});
+            return {};
+        }
+    }
+    function addSectionIds(json) {
+        const sections = json.sections;
+        if (sections) {
+            for (const [key, section] of Object.entries(sections)) {
+                section.id = `section_${key}`;
+                const sectionType = section.type || key;
+                const schema = getSectionSchema(sectionType);
+                if (!section.display_name) {
+                    section.display_name = resolveSchemaName(schema.name, sectionType, cwd);
+                }
+                const blocks = section.blocks;
+                if (blocks && !Array.isArray(blocks) && typeof blocks === 'object') {
+                    const blockSchemaByType = new Map((schema.blocks || []).map((b) => [b.type, b]));
+                    for (const [blockKey, block] of Object.entries(blocks)) {
+                        if (block && typeof block === 'object') {
+                            if (!block.id) {
+                                block.id = `block_${blockKey}_section_${key}`;
+                            }
+                            if (!block.display_name) {
+                                const blockType = block.type || blockKey;
+                                const blockSchema = blockSchemaByType.get(blockType);
+                                block.display_name = resolveSchemaName(blockSchema?.name, blockType, cwd);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return json;
+    }
+    app.get('/_editor/themeinfo', (_req, res) => {
+        res.json({ name: path.basename(cwd) });
+    });
+    app.get('/_editor/availablepages', (_req, res, next) => {
+        try {
+            const pagesDir = path.join(cwd, 'pages');
+            if (!fs.existsSync(pagesDir)) {
+                res.json([]);
+                return;
+            }
+            const PAGE_NAMES = {
+                index: 'Home', product: 'Product', collection: 'Category',
+                cart: 'Cart', checkout: 'Checkout', search: 'Search',
+                wishlist: 'Wishlist', account: 'Account', blog: 'Blog',
+                article: 'Article', page: 'Page', order: 'Order',
+            };
+            const pages = fs.readdirSync(pagesDir)
+                .filter((f) => f.endsWith('.json'))
+                .map((f) => {
+                const key = f.replace('.json', '');
+                return { key, name: PAGE_NAMES[key] || key.charAt(0).toUpperCase() + key.slice(1), url: `/${key === 'index' ? '' : key}` };
+            });
+            res.json(pages);
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/_editor/sectionsschema', (_req, res, next) => {
+        try {
+            const sectionsDir = path.join(cwd, 'sections');
+            if (!fs.existsSync(sectionsDir)) {
+                res.json({ sections_schema: [] });
+                return;
+            }
+            const files = fs.readdirSync(sectionsDir).filter((f) => f.endsWith('.liquid'));
+            const sections_schema = files.map((file) => {
+                const sectionType = file.replace('.liquid', '');
+                const content = fs.readFileSync(path.join(sectionsDir, file), 'utf-8');
+                const schemaMatch = content.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+                let schema = { settings: [], blocks: [] };
+                if (schemaMatch) {
+                    try {
+                        schema = JSON.parse(schemaMatch[1].trim());
+                    }
+                    catch { /* skip invalid schema */ }
+                }
+                const resolved = resolveSchemaT({ settings: schema.settings || [], name: schema.name || sectionType, blocks: schema.blocks || [] }, cwd);
+                const blocks = (resolved.blocks || []).map((b) => ({
+                    ...b,
+                    id: `setting_section_${sectionType}.${b.type}`,
+                    settings: b.settings || [],
+                }));
+                return {
+                    id: `setting_section_${sectionType}`,
+                    name: resolved.name || sectionType,
+                    type: sectionType,
+                    settings: resolved.settings || [],
+                    blocks,
+                };
+            });
+            res.json({ sections_schema });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/_editor/templatejson', (req, res, next) => {
+        try {
+            const pageName = req.query.page || 'index';
+            const jsonPath = path.join(cwd, 'pages', `${pageName}.json`);
+            if (!fs.existsSync(jsonPath)) {
+                res.status(404).json({ error: `pages/${pageName}.json not found` });
+                return;
+            }
+            const json = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
+            res.json(addSectionIds(json));
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/_editor/headerjson', (req, res, next) => {
+        try {
+            const jsonPath = path.join(cwd, 'sections', 'header-group.json');
+            if (!fs.existsSync(jsonPath)) {
+                res.status(404).json({ error: 'sections/header-group.json not found' });
+                return;
+            }
+            const json = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
+            res.json(addSectionIds(json));
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/_editor/footerjson', (req, res, next) => {
+        try {
+            const jsonPath = path.join(cwd, 'sections', 'footer-group.json');
+            if (!fs.existsSync(jsonPath)) {
+                res.status(404).json({ error: 'sections/footer-group.json not found' });
+                return;
+            }
+            const json = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
+            res.json(addSectionIds(json));
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/_editor/page', async (req, res, next) => {
+        try {
+            const pageKey = req.query.page || 'home';
+            // Match by pageTemplate, exact expressPath, or expressPath prefix (e.g. 'product' → '/products/...')
+            const route = STOREFRONT_ROUTES.find((r) => r.pageTemplate === pageKey)
+                || STOREFRONT_ROUTES.find((r) => r.expressPath === `/${pageKey}`)
+                || STOREFRONT_ROUTES.find((r) => r.expressPath.split('/')[1]?.startsWith(pageKey))
+                || STOREFRONT_ROUTES[0];
+            const apiPath = resolveApiPath(route, {});
+            const data = await fetchPageData(apiPath);
+            engine.engine.__editorMode = true;
+            engine.engine.__editorJsonType = 'template';
+            const { html, error } = await engine.renderJSONTemplates({
+                pathName: resolvePageTemplate(route.pageTemplate),
+                data
+            });
+            engine.engine.__editorMode = false;
+            if (error) {
+                res.status(500).json({ error: String(error) });
+                return;
+            }
+            res.send(html);
+        }
+        catch (error) {
+            engine.engine.__editorMode = false;
+            next(error);
+        }
+    });
+    // Re-renders the full page with in-memory settings override (no disk write).
+    // Used by the editor when theme settings change so the preview updates immediately.
+    app.post('/_editor/renderpage', async (req, res, next) => {
+        const engineInternal = engine.engine;
+        try {
+            const body = req.body;
+            const settingsData = body.settingsData;
+            const pageName = body.pageName || 'index';
+            const route = STOREFRONT_ROUTES.find((r) => r.pageTemplate === pageName)
+                || STOREFRONT_ROUTES.find((r) => r.expressPath === `/${pageName}`)
+                || STOREFRONT_ROUTES.find((r) => r.expressPath.split('/')[1]?.startsWith(pageName))
+                || STOREFRONT_ROUTES[0];
+            const apiPath = resolveApiPath(route, {});
+            const data = await fetchPageData(apiPath);
+            // Temporarily override runtimeGlobals.settings so the engine renders with
+            // the new values. Restored in the finally block regardless of outcome.
+            const savedSettings = runtimeGlobals.settings;
+            if (settingsData)
+                runtimeGlobals.settings = settingsData;
+            engineInternal.__editorMode = true;
+            engineInternal.__editorJsonType = 'template';
+            try {
+                const { html, error } = await engine.renderJSONTemplates({
+                    pathName: resolvePageTemplate(route.pageTemplate),
+                    data,
+                });
+                if (error) {
+                    res.status(500).json({ error: String(error) });
+                    return;
+                }
+                res.json({ html });
+            }
+            finally {
+                runtimeGlobals.settings = savedSettings;
+                engineInternal.__editorMode = false;
+            }
+        }
+        catch (error) {
+            engineInternal.__editorMode = false;
+            next(error);
+        }
+    });
+    app.post('/_editor/rendersection', async (req, res, next) => {
+        try {
+            const body = req.body;
+            const sectionName = body.sectionName;
+            const jsonType = body.jsonType || 'template';
+            if (!sectionName) {
+                res.status(400).json({ error: 'sectionName required' });
+                return;
+            }
+            const sectionJsonRaw = body.sectionJson;
+            const sectionJson = typeof sectionJsonRaw === 'string' ? JSON.parse(sectionJsonRaw) : sectionJsonRaw;
+            const sectionType = sectionJson.type || sectionName;
+            const filePath = path.join(cwd, 'sections', `${sectionType}.liquid`);
+            if (!fs.existsSync(filePath)) {
+                res.status(404).json({ error: `Section ${sectionType} not found` });
+                return;
+            }
+            const fileContent = fs.readFileSync(filePath, 'utf-8');
+            const schemaMatch = fileContent.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+            let schemaData;
+            if (schemaMatch) {
+                try {
+                    schemaData = JSON.parse(schemaMatch[1].trim());
+                }
+                catch { /* ignore */ }
+            }
+            // Deep copy BEFORE any mutation (resolveSchemaSettings, prepareSectionData both mutate sectionJson).
+            // This copy goes back to the editor and is later saved to disk — must have original unmodified URLs.
+            const editorSectionJson = JSON.parse(JSON.stringify(sectionJson));
+            const data = { ...runtimeGlobals };
+            if (schemaData?.settings && sectionJson.settings) {
+                await resolveSchemaSettings(schemaData.settings, sectionJson.settings, data, engine.fetcher);
+            }
+            editorSectionJson.id = `section_${sectionName}`;
+            editorSectionJson.display_name = resolveSchemaName(schemaData?.name, sectionType, cwd);
+            const editorBlocks = editorSectionJson.blocks;
+            if (editorBlocks && !Array.isArray(editorBlocks) && typeof editorBlocks === 'object') {
+                const blockSchemaByType = new Map((schemaData?.blocks || []).map((b) => [b.type, b]));
+                for (const [blockKey, block] of Object.entries(editorBlocks)) {
+                    if (block && typeof block === 'object') {
+                        if (!block.id) {
+                            block.id = `block_${blockKey}_section_${sectionName}`;
+                        }
+                        if (!block.display_name) {
+                            const blockType = block.type || blockKey;
+                            const blockSchema = blockSchemaByType.get(blockType);
+                            block.display_name = resolveSchemaName(blockSchema?.name, blockType, cwd);
+                        }
+                    }
+                }
+            }
+            const preparedSection = prepareSectionData(sectionJson, schemaData, sectionName, { jsonType }, cwd);
+            const resolvedDisplayName = resolveSchemaName(schemaData?.name, sectionType, cwd);
+            preparedSection.settingid = `setting_section_${sectionType}`;
+            preparedSection.display_name = resolvedDisplayName;
+            const sectionHtml = await engine.renderFile(engine.getFilePath(`sections/${sectionType}.liquid`), {
+                ...data,
+                section: {
+                    ...preparedSection,
+                    id: `section_${sectionName}`,
+                    settingid: `setting_section_${sectionType}`,
+                    display_name: resolvedDisplayName
+                }
+            });
+            const attrJson = buildSectionComponentAttr(sectionType, sectionName, jsonType, resolvedDisplayName);
+            const wrappedHtml = `<div data-zcommerce-component='${attrJson.replace(/'/g, '&#39;')}' style="display:contents">${sectionHtml}</div>`;
+            res.json({ html: wrappedHtml, sectionJson: editorSectionJson });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.post('/_editor/sectionschema', async (req, res, next) => {
+        try {
+            const body = req.body;
+            const sectionJsonRaw = body.sectionJson;
+            const sectionJson = typeof sectionJsonRaw === 'string' ? JSON.parse(sectionJsonRaw) : sectionJsonRaw;
+            const sectionType = sectionJson?.type;
+            if (!sectionType) {
+                res.status(400).json({ error: 'sectionJson.type required' });
+                return;
+            }
+            const filePath = path.join(cwd, 'sections', `${sectionType}.liquid`);
+            if (!fs.existsSync(filePath)) {
+                res.status(404).json({ error: `Section ${sectionType} not found` });
+                return;
+            }
+            const fileContent = fs.readFileSync(filePath, 'utf-8');
+            const schemaMatch = fileContent.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+            if (!schemaMatch) {
+                res.json({ schema: { settings: [], name: sectionType } });
+                return;
+            }
+            const schema = JSON.parse(schemaMatch[1].trim());
+            res.json({ schema: resolveSchemaT({ settings: schema.settings || [], name: schema.name || sectionType, blocks: schema.blocks || [] }, cwd) });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.post('/_editor/blockschema', async (req, res, next) => {
+        try {
+            const body = req.body;
+            const sectionJsonRaw = body.sectionJson;
+            const blockJsonRaw = body.blockJson;
+            const sectionJson = typeof sectionJsonRaw === 'string' ? JSON.parse(sectionJsonRaw) : sectionJsonRaw;
+            const blockJson = typeof blockJsonRaw === 'string' ? JSON.parse(blockJsonRaw) : blockJsonRaw;
+            const sectionType = sectionJson?.type;
+            const blockType = blockJson?.type;
+            if (!sectionType || !blockType) {
+                res.status(400).json({ error: 'sectionJson.type and blockJson.type required' });
+                return;
+            }
+            const filePath = path.join(cwd, 'sections', `${sectionType}.liquid`);
+            if (!fs.existsSync(filePath)) {
+                res.status(404).json({ error: `Section ${sectionType} not found` });
+                return;
+            }
+            const fileContent = fs.readFileSync(filePath, 'utf-8');
+            const schemaMatch = fileContent.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+            if (!schemaMatch) {
+                res.json({ schema: { settings: [], name: blockType } });
+                return;
+            }
+            const schema = JSON.parse(schemaMatch[1].trim());
+            const blockSchema = (schema.blocks || []).find((b) => b.type === blockType);
+            res.json({ schema: resolveSchemaT({ settings: blockSchema?.settings || [], name: blockSchema?.name || blockType }, cwd) });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    // Returns list of available sections (from sections/ dir) with optional rendered HTML.
+    app.get('/_editor/availablesections', async (req, res, next) => {
+        try {
+            const needHtml = req.query.needHtml === 'true';
+            const jsonType = req.query.jsonType || 'template';
+            const pageName = req.query.pageName || 'index';
+            const sectionsDir = path.join(cwd, 'sections');
+            if (!fs.existsSync(sectionsDir)) {
+                res.json([]);
+                return;
+            }
+            let templateName;
+            if (jsonType === 'header') {
+                templateName = 'header-group';
+            }
+            else if (jsonType === 'footer') {
+                templateName = 'footer-group';
+            }
+            else {
+                templateName = pageName === 'home' ? 'index' : pageName;
+            }
+            let currentTemplateJson = { sections: {}, order: [] };
+            try {
+                let jsonPath;
+                if (jsonType === 'header') {
+                    jsonPath = path.join(cwd, 'sections', 'header-group.json');
+                }
+                else if (jsonType === 'footer') {
+                    jsonPath = path.join(cwd, 'sections', 'footer-group.json');
+                }
+                else {
+                    jsonPath = path.join(cwd, 'pages', `${templateName}.json`);
+                }
+                if (fs.existsSync(jsonPath)) {
+                    currentTemplateJson = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
+                }
+            }
+            catch { /* use defaults */ }
+            const currentSections = (currentTemplateJson.sections || {});
+            const currentOrder = (currentTemplateJson.order || []);
+            const availableSections = [];
+            const files = fs.readdirSync(sectionsDir).filter((f) => f.endsWith('.liquid'));
+            for (const file of files) {
+                const sectionType = file.replace('.liquid', '');
+                const content = fs.readFileSync(path.join(sectionsDir, file), 'utf-8');
+                const schemaMatch = content.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+                if (!schemaMatch)
+                    continue;
+                let schema;
+                try {
+                    schema = JSON.parse(schemaMatch[1].trim());
+                }
+                catch {
+                    continue;
+                }
+                const templates = schema?.available_in?.templates;
+                if (!Array.isArray(templates) || !templates.includes(templateName)) {
+                    continue;
+                }
+                const presets = schema.presets;
+                if (!Array.isArray(presets) || presets.length === 0) {
+                    continue;
+                }
+                if (typeof schema.limit === 'number') {
+                    let count = 0;
+                    for (const key of currentOrder) {
+                        if (currentSections[key]?.type === sectionType)
+                            count++;
+                    }
+                    if (count >= schema.limit) {
+                        continue;
+                    }
+                }
+                for (let p = 0; p < presets.length; p++) {
+                    const preset = presets[p];
+                    if (!preset)
+                        continue;
+                    const uuid = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+                    const sectionName = `${sectionType}-additional_section-${uuid}`;
+                    const resolved = resolveSchemaT({ name: preset.name || sectionType, settings: [], blocks: [] }, cwd);
+                    const displayName = resolved.name || preset.name || sectionType;
+                    availableSections.push({
+                        section_name: sectionName,
+                        display_name: displayName,
+                        name: displayName,
+                        preset_index: p,
+                        category: schema.category,
+                        _sectionType: sectionType,
+                    });
+                }
+            }
+            if (!needHtml) {
+                res.json(availableSections.map(({ _sectionType: _, ...s }) => s));
+                return;
+            }
+            const requestedNames = req.query.sectionNames
+                ? JSON.parse(req.query.sectionNames)
+                : availableSections.map((s) => s.section_name);
+            const baseTypeFor = (name) => {
+                const idx = name.indexOf('-additional_section-');
+                return idx >= 0 ? name.substring(0, idx) : name;
+            };
+            const typesToRender = [...new Set(requestedNames.map(baseTypeFor))];
+            const renderedMap = await renderSectionsForResponse(typesToRender, {});
+            const assetsDir = path.join(cwd, 'assets');
+            const cssLinks = fs.existsSync(assetsDir)
+                ? fs.readdirSync(assetsDir)
+                    .filter((f) => f.endsWith('.css'))
+                    .map((f) => `<link rel="stylesheet" href="http://localhost:${port}/assets/${f}">`)
+                    .join('')
+                : '';
+            const cliOrigin = `http://localhost:${port}`;
+            const displayNameForType = new Map();
+            for (const entry of availableSections) {
+                if (!displayNameForType.has(entry._sectionType)) {
+                    displayNameForType.set(entry._sectionType, entry.display_name);
+                }
+            }
+            const presetSettingsForType = new Map();
+            for (const entry of availableSections) {
+                if (!presetSettingsForType.has(entry._sectionType)) {
+                    presetSettingsForType.set(entry._sectionType, {});
+                }
+            }
+            for (const [sType] of presetSettingsForType) {
+                try {
+                    const content = fs.readFileSync(path.join(sectionsDir, `${sType}.liquid`), 'utf-8');
+                    const sm = content.match(/{%\s*schema\s*%}([\s\S]*?){%\s*endschema\s*%}/);
+                    if (sm) {
+                        const sc = JSON.parse(sm[1].trim());
+                        if (Array.isArray(sc.presets) && sc.presets[0]?.settings) {
+                            presetSettingsForType.set(sType, sc.presets[0].settings);
+                        }
+                    }
+                }
+                catch { /* skip */ }
+            }
+            const results = requestedNames.map((reqName) => {
+                const baseType = baseTypeFor(reqName);
+                const sectionHtml = (renderedMap[baseType] || '')
+                    .replace(/(['"(])\/assets\//g, `$1${cliOrigin}/assets/`)
+                    .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
+                const html = `<!DOCTYPE html><html><head><meta charset="utf-8">${cssLinks}</head><body>${sectionHtml}</body></html>`;
+                const displayName = displayNameForType.get(baseType) || baseType;
+                const sectionJson = {
+                    type: baseType,
+                    settings: presetSettingsForType.get(baseType) || {},
+                    blocks: {},
+                    block_order: [],
+                };
+                return { section_name: reqName, display_name: displayName, name: displayName, sectionJson, html };
+            });
+            res.json(results);
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/_editor/themesettings', (req, res, next) => {
+        try {
+            const settingsDir = path.join(cwd, 'settings');
+            let settings_schema = [];
+            const schemaPath = path.join(settingsDir, 'schema.json');
+            if (fs.existsSync(schemaPath)) {
+                try {
+                    const raw = JSON.parse(fs.readFileSync(schemaPath, 'utf-8'));
+                    settings_schema = resolveSchemaT(raw, cwd);
+                }
+                catch { /* use empty */ }
+            }
+            let settings_data = { selected: {}, presets: {} };
+            const themePath = path.join(settingsDir, 'theme.json');
+            if (fs.existsSync(themePath)) {
+                try {
+                    settings_data = JSON.parse(fs.readFileSync(themePath, 'utf-8'));
+                    if (!settings_data.selected)
+                        settings_data.selected = {};
+                    const { selected, presets } = settings_data;
+                    if (selected && typeof selected.preset_name === 'string' && presets) {
+                        const preset = presets[selected.preset_name];
+                        if (preset && typeof preset === 'object') {
+                            settings_data = {
+                                ...settings_data,
+                                selected: { ...preset, preset_name: selected.preset_name },
+                            };
+                        }
+                    }
+                }
+                catch { /* use defaults */ }
+            }
+            res.json({ settings_schema, settings_data });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    // Persists the full editor JSON to disk (for structural changes: add/delete/reorder sections).
+    app.post('/_editor/savejson', (req, res, next) => {
+        try {
+            const body = req.body;
+            const jsonType = body.jsonType || 'template';
+            const pageName = body.pageName || 'index';
+            const json = body.json;
+            if (!json || typeof json !== 'object') {
+                res.status(400).json({ error: 'json required' });
+                return;
+            }
+            persistFullJsonToDisk(jsonType, pageName, json);
+            res.json({ ok: true });
+        }
+        catch (error) {
+            next(error);
+        }
+    });
     app.get('/_cli/editor', async (req, res) => {
         try {
             const { file } = req.query;
@@ -752,6 +1417,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         res.set('Cache-Control', 'no-store').send('OK');
     });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     app.use((err, _req, res, _next) => {
         if (res.headersSent) {
             return;