@zohofinance/commerce 2.0.0 → 2.2.0

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

@@ -13,13 +13,14 @@ import { findAvailablePort, watchFolders } from '../utils/serve-theme-utils.js';
 import { APIHandler } from '../utils/api-handler.js';
 import { loadThemeGlobals, mergePageData } from '../utils/load-theme-globals.js';
 import StackTrace from '../utils/stack-trace.js';
-import { validateTheme, formatValidationIssuesForConsole } from '../utils/theme-validation.js';
+import { validateTheme, formatValidationIssuesForConsole, validationWarnings } 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 { resolveSchemaTranslations as resolveSchemaT, resolveSchemaName, invalidateSchemaLocaleCache } from '../utils/resolve-schema-translations.js';
 import { prepareSectionData } from '../utils/prepare-section-data.js';
 import { buildSectionComponentAttr } from '../utils/editor-attributes.js';
+import { withThemeBlockSchema } from '../utils/theme-block-schema.js';
 function normalizeStoreUrl(input) {
     if (!input)
         return undefined;
@@ -39,8 +40,6 @@ function normalizeStoreUrl(input) {
 async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true, storeUrl) {
     const liveReloadPort = await findAvailablePort();
     const stackTrace = new StackTrace();
-    const themeGlobals = loadThemeGlobals();
-    let runtimeGlobals = themeGlobals;
     const normalizedStoreUrl = normalizeStoreUrl(storeUrl);
     const shouldUseMock = useMock || !normalizedStoreUrl;
     const cwd = process.cwd();
@@ -50,7 +49,11 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     let validationResult = await validateTheme(cwd, { mode: 'dev' });
     if (!validationResult.valid) {
         console.error(chalk.yellow('\nTheme validation failed. Pages will show validation errors until the issues are fixed.'));
-        console.error(chalk.red(formatValidationIssuesForConsole(validationResult.issues)));
+        console.error(formatValidationIssuesForConsole(validationResult.issues));
+    }
+    else if (validationWarnings(validationResult.issues).length > 0) {
+        console.log(chalk.yellow('\nTheme validation passed with warnings. Preview is still available.'));
+        console.log(formatValidationIssuesForConsole(validationResult.issues));
     }
     else {
         console.log(chalk.green('Theme validation passed.'));
@@ -59,18 +62,78 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         useMock: shouldUseMock,
         baseURL: normalizedStoreUrl ?? ''
     });
-    if (!shouldUseMock && normalizedStoreUrl) {
+    // Page-specific keys of the live /home response; they must not leak into other pages.
+    const PAGE_SPECIFIC_KEYS = [
+        'product',
+        'products',
+        'collection',
+        'collections',
+        'category',
+        'categories',
+        'blog',
+        'blogs',
+        'page',
+        'page_context',
+        'cart',
+        'checkout',
+        'order',
+        'comments',
+        'page_title',
+        'seo'
+    ];
+    let liveGlobals = null;
+    async function ensureLiveGlobals() {
+        if (shouldUseMock || liveGlobals)
+            return;
         try {
-            const homeData = await apiHandler.fetch('/home');
-            runtimeGlobals = mergePageData(themeGlobals, homeData);
+            const homeData = {
+                ...(await apiHandler.fetch('/home'))
+            };
+            for (const key of PAGE_SPECIFIC_KEYS) {
+                delete homeData[key];
+            }
+            liveGlobals = homeData;
         }
         catch (e) {
-            console.warn('Could not load live storefront globals. Using local theme globals instead.', e);
+            console.warn('Could not load live storefront globals. Will retry on the next request.', e);
+        }
+    }
+    // Rebuilt on every access so edits to settings/theme.json show up without a restart.
+    function getRuntimeGlobals() {
+        const themeGlobals = loadThemeGlobals(!shouldUseMock);
+        return liveGlobals ? mergePageData(themeGlobals, liveGlobals) : themeGlobals;
+    }
+    await ensureLiveGlobals();
+    const productHandleById = new Map();
+    function indexProductHandles(value, depth = 0) {
+        if (depth > 8 || !value || typeof value !== 'object')
+            return;
+        if (Array.isArray(value)) {
+            for (const item of value)
+                indexProductHandles(item, depth + 1);
+            return;
+        }
+        const record = value;
+        const { id, handle } = record;
+        if ((typeof id === 'string' || typeof id === 'number') &&
+            typeof handle === 'string' &&
+            handle) {
+            productHandleById.set(String(id), handle);
+        }
+        for (const nested of Object.values(record)) {
+            indexProductHandles(nested, depth + 1);
         }
     }
-    const engine = new TemplateEngine({ globals: runtimeGlobals }, stackTrace);
+    function resolveProductPath(productId) {
+        return productHandleById.get(productId) ?? productId;
+    }
+    const engine = new TemplateEngine({ globals: getRuntimeGlobals() }, stackTrace);
     if (!shouldUseMock && normalizedStoreUrl) {
-        engine.fetcher = (url) => apiHandler.fetch(url);
+        engine.fetcher = async (url) => {
+            const data = await apiHandler.fetch(url);
+            indexProductHandles(data);
+            return data;
+        };
     }
     function parseSectionsParam(req) {
         const raw = req.body?.sections ?? req.query?.sections;
@@ -144,11 +207,19 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         return sections;
     }
+    // Declared before revalidateTheme so a file change can reset it.
+    const sectionSchemaCache = new Map();
     async function revalidateTheme() {
+        sectionSchemaCache.clear();
+        invalidateSchemaLocaleCache();
         validationResult = await validateTheme(cwd, { mode: 'dev' });
         if (!validationResult.valid) {
             console.error(chalk.yellow('\nTheme validation failed after a file change.'));
-            console.error(chalk.red(formatValidationIssuesForConsole(validationResult.issues)));
+            console.error(formatValidationIssuesForConsole(validationResult.issues));
+        }
+        else if (validationWarnings(validationResult.issues).length > 0) {
+            console.log(chalk.yellow('\nTheme validation passed with warnings after a file change.'));
+            console.log(formatValidationIssuesForConsole(validationResult.issues));
         }
         else {
             console.log(chalk.green('Theme validation passed.'));
@@ -158,9 +229,24 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         const report = buildValidationErrorReport(validationResult, cwd);
         return renderDevErrorPage(report);
     }
-    async function fetchPageData(apiPath) {
-        const pageData = await apiHandler.fetch(apiPath);
-        return mergePageData(runtimeGlobals, pageData);
+    async function fetchPageData(apiPath, query = '') {
+        await ensureLiveGlobals();
+        // Sort, pagination and filter params must reach the live store.
+        const pageData = await apiHandler.fetch(query ? `${apiPath}?${query}` : apiPath);
+        indexProductHandles(pageData);
+        return mergePageData(getRuntimeGlobals(), pageData);
+    }
+    function pageQueryString(req) {
+        const params = new URLSearchParams();
+        for (const [key, value] of Object.entries(req.query)) {
+            if (key === 'format' || key === 'sections')
+                continue;
+            for (const v of Array.isArray(value) ? value : [value]) {
+                if (typeof v === 'string')
+                    params.append(key, v);
+            }
+        }
+        return params.toString();
     }
     async function renderPage(pathName, data, req) {
         if (req?.query.format === 'json') {
@@ -187,7 +273,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     async function handlePageRoute(routePageTemplate, apiPath, req, res, next) {
         try {
             const pageTemplate = resolvePageTemplate(routePageTemplate);
-            const data = await fetchPageData(apiPath);
+            const data = await fetchPageData(apiPath, pageQueryString(req));
             // Always render in editor mode so sections get data-zcommerce-component attributes
             engine.engine.__editorMode = true;
             engine.engine.__editorJsonType = 'template';
@@ -208,7 +294,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             else {
                 html += bridgeTag;
             }
-            res.status(result.status ?? 200).send(html);
+            res.status(result.status ?? 200).set('Cache-Control', 'no-store').send(html);
         }
         catch (error) {
             engine.engine.__editorMode = false;
@@ -236,11 +322,14 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     app.engine('liquid', engine.express());
     app.set('views', ['./pages']);
     app.set('view engine', 'liquid');
-    if (!livereloadOff) {
+    if (livereloadOff) {
+        watchFolders(undefined, revalidateTheme);
+    }
+    else {
         app.use(connectLiveReload({ port: liveReloadPort }));
         const liveReloadServer = livereload.createServer({ port: liveReloadPort });
+        watchFolders(liveReloadServer, revalidateTheme);
         liveReloadServer.server.once('connection', () => {
-            watchFolders(liveReloadServer, revalidateTheme);
             setTimeout(() => {
                 liveReloadServer.refresh('/');
             }, 100);
@@ -250,12 +339,62 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     app.get('/', (_req, res) => {
         res.redirect('/home');
     });
+    const PREDICTIVE_SEARCH_SECTION = 'search-result';
+    function withSearchContext(data, req) {
+        const existing = data.search && typeof data.search === 'object' && !Array.isArray(data.search)
+            ? { ...data.search }
+            : {};
+        if (existing.products === undefined) {
+            existing.products = data.products ?? [];
+        }
+        if (existing.q === undefined) {
+            existing.q = typeof req.query.q === 'string' ? req.query.q : '';
+        }
+        return { ...data, search: existing };
+    }
+    async function handlePredictiveSearch(req, res, next) {
+        try {
+            const requested = parseSectionsParam(req);
+            const sectionNames = requested.length > 0 ? requested : [PREDICTIVE_SEARCH_SECTION];
+            const data = await fetchPageData('/search', pageQueryString(req));
+            const sections = await renderSectionsForResponse(sectionNames, withSearchContext(data, req));
+            res.json({ sections });
+        }
+        catch (error) {
+            next(error);
+        }
+    }
+    app.get('/home/search', handlePredictiveSearch);
+    // /search is the search page as well, so only a sections param marks it as
+    // an API call; a plain navigation falls through to the page route below.
+    app.get('/search', (req, res, next) => {
+        if (parseSectionsParam(req).length === 0) {
+            next();
+            return;
+        }
+        return handlePredictiveSearch(req, res, next);
+    });
     for (const route of STOREFRONT_ROUTES) {
         app.get(route.expressPath, (req, res, next) => {
             const apiPath = resolveApiPath(route, req.params);
             return handlePageRoute(route.pageTemplate, apiPath, req, res, next);
         });
     }
+    // Live stores link to singular /category/<handle> and /collection/<handle> URLs.
+    const ROUTE_ALIASES = [
+        ['/category/:category_name', '/categories/:category_name'],
+        ['/collection/:collection_name', '/collections/:collection_name'],
+        ['/product/:product_id', '/products/:product_id']
+    ];
+    for (const [aliasPath, targetPath] of ROUTE_ALIASES) {
+        const route = STOREFRONT_ROUTES.find((r) => r.expressPath === targetPath);
+        if (!route)
+            continue;
+        app.get(aliasPath, (req, res, next) => {
+            const apiPath = resolveApiPath(route, req.params);
+            return handlePageRoute(route.pageTemplate, apiPath, req, res, next);
+        });
+    }
     app.post('/addtocart', upload.none(), async (req, res, next) => {
         try {
             const response = (await apiHandler.addToCart(req.body));
@@ -263,7 +402,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             if (sectionNames.length > 0) {
                 const cartData = await resolveCartForSections(response);
                 const sections = await renderSectionsForResponse(sectionNames, {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 });
                 res.send({ ...response, sections });
@@ -283,7 +422,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             if (sectionNames.length > 0) {
                 const cartData = await resolveCartForSections(response);
                 const sections = await renderSectionsForResponse(sectionNames, {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 });
                 res.send({ ...response, sections });
@@ -303,7 +442,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             if (sectionNames.length > 0) {
                 const cartData = await resolveCartForSections(response);
                 const sections = await renderSectionsForResponse(sectionNames, {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 });
                 res.send({ ...response, sections });
@@ -396,18 +535,14 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             const sectionNames = parseSectionsParam(req);
             if (sectionNames.length === 0) {
                 res.status(400).json({
-                    code: 1,
                     message: 'Missing sections query param',
                     sections: {}
                 });
                 return;
             }
-            const data = await fetchPageData(`/products/${req.params.product_id}`);
+            const data = await fetchPageData(`/products/${encodeURIComponent(resolveProductPath(req.params.product_id))}`);
             const sections = await renderSectionsForResponse(sectionNames, data);
-            res.json({
-                code: 0,
-                sections
-            });
+            res.json({ sections });
         }
         catch (error) {
             next(error);
@@ -415,7 +550,34 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     });
     app.get('/products/:product_id/reviews', async (req, res, next) => {
         try {
-            res.json(await apiHandler.getProductReviews(req.params.product_id));
+            const params = new URLSearchParams();
+            const response = (await apiHandler.getProductReviews(req.params.product_id, params.toString()));
+            res.json(response);
+            return;
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.post('/products/:product_id/reviews', async (req, res, next) => {
+        try {
+            res.json(await apiHandler.submitProductReview('POST', req.params.product_id, req.body));
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.put('/products/:product_id/reviews', async (req, res, next) => {
+        try {
+            res.json(await apiHandler.submitProductReview('PUT', req.params.product_id, req.body));
+        }
+        catch (error) {
+            next(error);
+        }
+    });
+    app.get('/editreview/:product_id', async (req, res, next) => {
+        try {
+            res.json(await apiHandler.getReviewForEdit(req.params.product_id));
         }
         catch (error) {
             next(error);
@@ -437,7 +599,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             if (sectionNames.length > 0) {
                 const cartData = await resolveCartForSections(response);
                 const sections = await renderSectionsForResponse(sectionNames, {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 });
                 res.send({ ...response, sections });
@@ -459,7 +621,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                 const cartData = await resolveCartForSections(response);
                 const saveForLaterData = resolveSaveForLaterForSections(response);
                 const sectionData = {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 };
                 if (saveForLaterData) {
@@ -485,7 +647,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                 const cartData = await resolveCartForSections(response);
                 const saveForLaterData = resolveSaveForLaterForSections(response);
                 const sectionData = {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 };
                 if (saveForLaterData) {
@@ -511,7 +673,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                 const cartData = await resolveCartForSections(response);
                 const saveForLaterData = resolveSaveForLaterForSections(response);
                 const sectionData = {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 };
                 if (saveForLaterData) {
@@ -537,7 +699,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                 const cartData = await resolveCartForSections(response);
                 const saveForLaterData = resolveSaveForLaterForSections(response);
                 const sectionData = {
-                    ...runtimeGlobals,
+                    ...getRuntimeGlobals(),
                     cart: cartData
                 };
                 if (saveForLaterData) {
@@ -749,7 +911,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     // 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']);
+    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) {
@@ -774,11 +936,11 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         return out;
     }
-    // Clean the full page/group JSON: only touches the sections map, leaves order/name/type intact.
     function cleanFullJsonForDisk(json) {
         const sections = json.sections;
-        if (!sections || typeof sections !== 'object' || Array.isArray(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)
@@ -804,8 +966,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             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();
+    // sectionSchemaCache (declared above) caches parsed section schemas (type → { name, blocks }).
     function getSectionSchema(sectionType) {
         if (sectionSchemaCache.has(sectionType))
             return sectionSchemaCache.get(sectionType);
@@ -901,11 +1062,15 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                     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 || [],
-                }));
+                const blocks = (schema.blocks || []).map((rawBlock) => {
+                    const merged = withThemeBlockSchema(cwd, rawBlock, rawBlock.type) ?? rawBlock;
+                    const b = resolveSchemaT(merged, cwd);
+                    return {
+                        ...b,
+                        id: `setting_section_${sectionType}.${b.type}`,
+                        settings: b.settings || [],
+                    };
+                });
                 return {
                     id: `setting_section_${sectionType}`,
                     name: resolved.name || sectionType,
@@ -991,6 +1156,45 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             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);
+            // Override the settings on this request's data so the engine renders with the new values.
+            if (settingsData)
+                data.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 {
+                engineInternal.__editorMode = false;
+            }
+        }
+        catch (error) {
+            engineInternal.__editorMode = false;
+            next(error);
+        }
+    });
     app.post('/_editor/rendersection', async (req, res, next) => {
         try {
             const body = req.body;
@@ -1020,7 +1224,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             // 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 };
+            const data = { ...getRuntimeGlobals() };
             if (schemaData?.settings && sectionJson.settings) {
                 await resolveSchemaSettings(schemaData.settings, sectionJson.settings, data, engine.fetcher);
             }
@@ -1112,11 +1316,13 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             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 } });
+                const themeBlock = withThemeBlockSchema(cwd, undefined, blockType);
+                res.json({ schema: resolveSchemaT({ settings: themeBlock?.settings || [], name: themeBlock?.name || blockType }, cwd) });
                 return;
             }
             const schema = JSON.parse(schemaMatch[1].trim());
-            const blockSchema = (schema.blocks || []).find((b) => b.type === blockType);
+            const sectionBlockEntry = (schema.blocks || []).find((b) => b.type === blockType);
+            const blockSchema = withThemeBlockSchema(cwd, sectionBlockEntry, blockType);
             res.json({ schema: resolveSchemaT({ settings: blockSchema?.settings || [], name: blockSchema?.name || blockType }, cwd) });
         }
         catch (error) {
@@ -1127,39 +1333,106 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
     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'));
-            const sections = files.map((file) => {
+            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*%}/);
-                let name = sectionType;
-                let category;
-                if (schemaMatch) {
-                    try {
-                        const schema = JSON.parse(schemaMatch[1].trim());
-                        const resolved = resolveSchemaT({ name: schema.name || sectionType, settings: [], blocks: [] }, cwd);
-                        name = resolved.name || sectionType;
-                        category = schema.category;
+                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;
                     }
-                    catch { /* skip */ }
                 }
-                return { section_name: sectionType, name, category };
-            });
+                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(sections);
+                res.json(availableSections.map(({ _sectionType: _, ...s }) => s));
                 return;
             }
-            // Render HTML for requested section names using default section data.
-            const sectionNames = req.query.sectionNames
+            const requestedNames = req.query.sectionNames
                 ? JSON.parse(req.query.sectionNames)
-                : sections.map((s) => s.section_name);
-            const renderedMap = await renderSectionsForResponse(sectionNames, {});
-            // Build CSS link tags from assets directory so previews render with theme styles.
+                : 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)
@@ -1168,13 +1441,45 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
                     .join('')
                 : '';
             const cliOrigin = `http://localhost:${port}`;
-            const results = sectionNames.map((sectionType) => {
-                const entry = sections.find((s) => s.section_name === sectionType);
-                const sectionHtml = (renderedMap[sectionType] || '')
+            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>`;
-                return { section_name: sectionType, display_name: entry?.name || sectionType, name: entry?.name || sectionType, category: entry?.category, 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);
         }
@@ -1182,6 +1487,44 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
             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 {
@@ -1238,7 +1581,8 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         res.set('Cache-Control', 'no-store').send('OK');
     });
-    app.use((err, _req, res) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    app.use((err, _req, res, _next) => {
         if (res.headersSent) {
             return;
         }