@zohofinance/commerce 1.0.1 → 2.0.0

package/ts-dist/commands/serve-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serve-theme.d.ts","sourceRoot":"","sources":["../../src/commands/serve-theme.ts"],"names":[],"mappings":"AAuDA,iBAAe,UAAU,CACvB,UAAU,CAAC,EAAE,MAAM,EACnB,SAAS,CAAC,EAAE,OAAO,EACnB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,UAAO,EACd,QAAQ,CAAC,EAAE,MAAM,iBAy8BlB;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"serve-theme.d.ts","sourceRoot":"","sources":["../../src/commands/serve-theme.ts"],"names":[],"mappings":"AA4DA,iBAAe,UAAU,CACvB,UAAU,CAAC,EAAE,MAAM,EACnB,SAAS,CAAC,EAAE,OAAO,EACnB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,UAAO,EACd,QAAQ,CAAC,EAAE,MAAM,iBA28ClB;AAED,eAAe,UAAU,CAAC"}

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,460 @@ 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']);
+    // 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;
+    }
+    // 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))
+            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);
+        }
+    });
+    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 sectionsDir = path.join(cwd, 'sections');
+            if (!fs.existsSync(sectionsDir)) {
+                res.json([]);
+                return;
+            }
+            const files = fs.readdirSync(sectionsDir).filter((f) => f.endsWith('.liquid'));
+            const sections = 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 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;
+                    }
+                    catch { /* skip */ }
+                }
+                return { section_name: sectionType, name, category };
+            });
+            if (!needHtml) {
+                res.json(sections);
+                return;
+            }
+            // Render HTML for requested section names using default section data.
+            const sectionNames = 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.
+            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 results = sectionNames.map((sectionType) => {
+                const entry = sections.find((s) => s.section_name === sectionType);
+                const sectionHtml = (renderedMap[sectionType] || '')
+                    .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 };
+            });
+            res.json(results);
+        }
+        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,7 +1238,7 @@ async function serveTheme(portNumber, openInWeb, livereloadOff, useMock = true,
         }
         res.set('Cache-Control', 'no-store').send('OK');
     });
-    app.use((err, _req, res, _next) => {
+    app.use((err, _req, res) => {
         if (res.headersSent) {
             return;
         }

package/ts-dist/custom-tags/sections-tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sections-tag.d.ts","sourceRoot":"","sources":["../../src/custom-tags/sections-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAUzE,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAC;AAEnE,MAAM,CAAC,OAAO,MAAO,SAAQ,GAAG;IAC9B,OAAO,CAAC,QAAQ,CAAS;gBAEb,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,MAAM;IAM1E,WAAW,CAAC,QAAQ,EAAE,MAAM;IAItB,MAAM,CAAC,OAAO,EAAE,OAAO;IAWvB,cAAc,CAAC,EACnB,aAAa,EACb,QAAQ,EACR,IAAI,EACL,EAAE;QACD,aAAa,EAAE,MAAM,EAAE,CAAC;QACxB,QAAQ,EAAE,YAAY,CAAC;QACvB,IAAI,EAAE,GAAG,CAAC;KACX;CA0FF"}
+{"version":3,"file":"sections-tag.d.ts","sourceRoot":"","sources":["../../src/custom-tags/sections-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAYzE,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,cAAc,CAAC;AAQnE,MAAM,CAAC,OAAO,MAAO,SAAQ,GAAG;IAC9B,OAAO,CAAC,QAAQ,CAAS;gBAEb,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,MAAM;IAM1E,WAAW,CAAC,QAAQ,EAAE,MAAM;IAItB,MAAM,CAAC,OAAO,EAAE,OAAO;IAevB,cAAc,CAAC,EACnB,aAAa,EACb,QAAQ,EACR,IAAI,EACL,EAAE;QACD,aAAa,EAAE,MAAM,EAAE,CAAC;QACxB,QAAQ,EAAE,YAAY,CAAC;QACvB,IAAI,EAAE,GAAG,CAAC;KACX;CA6GF"}

package/ts-dist/custom-tags/sections-tag.js

@@ -1,8 +1,17 @@
 import { Tag } from 'liquidjs';
 import { readFileContent, readJSONFileContent } from '../utils/file-operations.js';
 import { prepareSectionData } from '../utils/prepare-section-data.js';
+import { buildSectionComponentAttr } from '../utils/editor-attributes.js';
 import { resolveSchemaSettings } from '../utils/resolve-schema-settings.js';
+import { resolveSchemaName } from '../utils/resolve-schema-translations.js';
 import { renderTrackedLiquidFile } from '../utils/liquid-render-frame.js';
+function inferJsonType(sectionsFileName) {
+    if (sectionsFileName.startsWith('header'))
+        return 'header';
+    if (sectionsFileName.startsWith('footer'))
+        return 'footer';
+    return 'template';
+}
 export default class extends Tag {
     sections;
     constructor(token, remainTokens, liquid) {
@@ -15,6 +24,10 @@ export default class extends Tag {
     }
     async render(context) {
         let { order, sections } = (await readJSONFileContent(`sections/${this.sections}.json`));
+        const editorMode = this.liquid.__editorMode;
+        if (editorMode) {
+            this.liquid.__editorJsonType = inferJsonType(this.sections);
+        }
         return this.renderSections({
             sections,
             section_order: order,
@@ -22,6 +35,8 @@ export default class extends Tag {
         });
     }
     async renderSections({ section_order, sections, data }) {
+        const editorMode = this.liquid.__editorMode;
+        const editorJsonType = this.liquid.__editorJsonType || 'template';
         let renderedSectionsArr = (section_order || []).map(async (section) => {
             let sectionToRender = sections[section].type || '';
             let fileContent = await readFileContent(this.getFilePath(`sections/${sectionToRender}.liquid`));
@@ -52,14 +67,25 @@ export default class extends Tag {
                     /* ignore */
                 }
             }
-            sections[section] = prepareSectionData(sections[section], schemaData, section);
-            return renderTrackedLiquidFile(this.liquid, this.getFilePath(`sections/${sectionToRender}.liquid`), {
-                ...data,
-                section: {
-                    ...sections[section],
-                    id: `section_${section}`
-                }
-            });
+            const cwd = process.cwd();
+            sections[section] = prepareSectionData(sections[section], schemaData, section, editorMode ? { jsonType: editorJsonType } : undefined, cwd);
+            const displayName = editorMode
+                ? resolveSchemaName(schemaData?.name, sectionToRender, cwd)
+                : '';
+            const sectionContext = {
+                ...sections[section],
+                id: `section_${section}`,
+                ...(editorMode ? {
+                    settingid: `setting_section_${sectionToRender}`,
+                    display_name: displayName
+                } : {})
+            };
+            const sectionHtml = await renderTrackedLiquidFile(this.liquid, this.getFilePath(`sections/${sectionToRender}.liquid`), { ...data, section: sectionContext });
+            if (editorMode) {
+                const attrJson = buildSectionComponentAttr(sectionToRender, section, editorJsonType, displayName);
+                return `<div data-zcommerce-component='${attrJson.replace(/'/g, '&#39;')}' style="display:contents">${sectionHtml}</div>`;
+            }
+            return sectionHtml;
         });
         const arr = await Promise.all(renderedSectionsArr);
         return arr.join('');

package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/SKILL.md

@@ -116,7 +116,7 @@ The skill runs these checks before Stage 0. If any fail, stop and surface to the
 
 1. **Ask developer for `storeUrl`.** Do not hardcode a demo store. Record in `dev-config.json`. See `dev-server-and-urls.md`.
 2. **Confirm page URLs before any browser navigation.** Home is often `/home` not `/`. Product/collection handles vary by store. Ask once; write confirmed URLs to `dev-config.json`.
-3. **Dev server.** Ask developer to start it, or start it yourself: `yarn run dev --storeUrl=<confirmed>`. Notify developer either way.
+3. **Dev server.** Ask the developer to start the local theme preview, or start it yourself with `npx @zohofinance/commerce theme dev --storeUrl=<your store url>` (value from `dev-config.json`). Notify the developer either way. Without `--storeUrl`, preview uses mock data only.
 4. **`npx @zohofinance/commerce --version` works from inside the theme folder.** If not, run `npm install @zohofinance/commerce` in the theme directory.
 5. **Figma MCP authenticated.** Otherwise: ask user to open Figma desktop with the first frame selected.
 6. **Chrome DevTools MCP available** (`.cursor/mcp.json`). See `.cursor/skills/browser-verify.md`.
@@ -228,7 +228,7 @@ The pipeline is the right tool for: building a new theme from scratch with full
 
 It is the **wrong** tool for, and should not be used for:
 - **Bug fix in an existing theme** → just open the file and fix it. No skill needed.
-- **One-off section change** → edit the section directly, then `cd <theme> && yarn run dev` to verify visually. No skill needed.
+- **One-off section change** → edit the section directly, then `cd <theme> && npx @zohofinance/commerce theme dev --storeUrl=<your store url>` to verify visually. No skill needed.
 - **Adding a theme setting** → edit `settings/schema.json` + `theme.json` directly.
 - **A new section that doesn't fit any of the 5 pages this skill handles** → also direct edit; the lint rules in `code-quality.md` still apply, but you don't need the orchestration.
 

package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/ask-developer.md

@@ -22,7 +22,7 @@ When the answer IS in any of those three sources — look it up. Don't ask.
   - Product: `http://localhost:3000/products/item-1`
   - Collection: `http://localhost:3000/collections/all-products`
   Write confirmed URLs to `dev-config.json`.
-- **Dev server not running** → ask developer to start it, or start it yourself with their `storeUrl` and notify them.
+- **Dev server not running** → ask developer to start it, or start it yourself with `npx @zohofinance/commerce theme dev --storeUrl=<your store url>` (their confirmed value) and notify them.
 
 ### Section identification (page orchestrator Phase 2)