@zohofinance/commerce 1.0.1 → 2.0.0

package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/dev-server-and-urls.md

@@ -11,14 +11,14 @@ URL paths vary by store and dev setup. **Never assume** `/` is home or `/collect
 Before starting or requesting the dev server, ask:
 
 > What is your **storeUrl** for local dev?
-> Example: `https://yourstore.zohocommerce.com`
+> Example: `<your store url>`
 
 Record it in scratchpad:
 
 ```json
 // .claude/scratchpad/<theme>/dev-config.json
 {
-  "store_url": "https://yourstore.zohocommerce.com",
+  "store_url": "<your store url>",
   "dev_server_port": 3000,
   "page_urls": {},
   "confirmed_by_developer": false
@@ -31,11 +31,15 @@ Do not hardcode a demo store URL unless the developer confirms it.
 
 ## Step 2 — Dev server (ask or start)
 
+Pass the developer's store URL into `theme dev` via `--storeUrl`. Without it, the preview uses mock data only.
+
+Use the value from Step 1 (`dev-config.json` → `store_url`) as `<your store url>`.
+
 **Option A — Developer starts it (preferred if already running):**
 
 ```bash
 cd <theme_name>
-yarn run dev --storeUrl=<store_url_from_developer>
+npx @zohofinance/commerce theme dev --storeUrl=<your store url>
 ```
 
 Ask: *"Is the dev server already running on port 3000? If not, please start it with the command above (or tell me to start it)."*
@@ -43,9 +47,14 @@ Ask: *"Is the dev server already running on port 3000? If not, please start it w
 **Option B — Agent starts it:**
 
 1. Check: `lsof -i :3000`
-2. If not running, start in background from theme folder with developer's `storeUrl`
+2. If not running, start in background from the theme folder:
+
+```bash
+npx @zohofinance/commerce theme dev --storeUrl=<your store url>
+```
+
 3. Wait for "Preview theme in http://localhost:3000" (up to 30s)
-4. Tell the developer: *"Dev server started with storeUrl …"*
+4. Tell the developer: *"Dev server started with your storeUrl."*
 
 If the server fails to start → stop and ask the developer to fix CLI/network issues. Do not proceed to visual verify.
 

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

@@ -10,7 +10,7 @@ Every question, blocker, or notification from a **page orchestrator** or **secti
 |---|---|
 | `needs-developer.md` written | Surface immediately in chat with section/page name |
 | `unresolved.md` with `blocking: true` | Batch into `AskUserQuestion` before continuing |
-| Dev server not running | Ask developer to start OR start with confirmed `storeUrl` |
+| Dev server not running | Ask developer to start OR start with `npx @zohofinance/commerce theme dev --storeUrl=<your store url>` (confirmed `store_url`) |
 | Page URLs not confirmed | Pause build; run URL confirmation flow (`dev-server-and-urls.md`) |
 | Visual verify stuck after 3 iterations | Show CRITICAL items from `visual-diff.md` |
 | Subagent aborted / timed out | Report which page/section; parent takes over or re-spawns |

package/ts-dist/mocks/init-theme/.claude/skills/theme-from-figma/visual-verify-loop.md

@@ -29,7 +29,7 @@ Also always run:
 
 ### 1. Preconditions
 - `dev-config.json` exists with `confirmed_by_developer: true` — see `dev-server-and-urls.md`
-- Dev server running with developer's `storeUrl` (ask them to start, or start and notify)
+- Dev server running with developer's `storeUrl`: `npx @zohofinance/commerce theme dev --storeUrl=<your store url>` (ask them to start, or start and notify; value from `dev-config.json`)
 - Chrome DevTools MCP connected
 - Figma node ID in `figma-spec.json`
 - **Do not `navigate_page` until page URLs are confirmed with the developer**

package/ts-dist/mocks/init-theme/.cursor/agents/visual-compare.md

@@ -30,9 +30,9 @@ lsof -i :3000 2>/dev/null || lsof -i :9292 2>/dev/null
 **If NOT running**, start it in background:
 ```bash
 cd <theme_name>
-yarn run dev --storeUrl=<store_url> &
+npx @zohofinance/commerce theme dev --storeUrl=<your store url> &
 ```
-Wait for "compiled" or "ready" in output (up to 30 seconds).
+Wait for "compiled" or "ready" in output (up to 30 seconds). Use `store_url` from the inputs / `dev-config.json` for `<your store url>`. Without `--storeUrl`, the preview uses mock data only.
 
 **If already running**, skip to Step 2.
 

package/ts-dist/mocks/init-theme/.cursor/commands/build-theme.md

@@ -292,7 +292,7 @@ NEXT STEPS:
   1. Review unresolved items above
   2. /compare-section <theme_name> <section>  — only if unresolved items exist
   3. /qa-theme <theme_name>                   — full QA after any manual fixes
-  4. yarn run dev --storeUrl=<url>            — preview in browser
+  4. npx @zohofinance/commerce theme dev --storeUrl=<your store url>  — preview in browser (live store data; omit `--storeUrl` for mock only)
 ```
 
 ---

package/ts-dist/mocks/init-theme/.cursor/commands/compare-section.md

@@ -36,7 +36,7 @@ ensuring consistency between what was built and what is verified.
 **Default mode (code compare):** Extracts values from code and Figma MCP data, compares numerically. Fast and precise for CSS/Tailwind property matching.
 
 **Visual mode (`--visual`):** Launches the `visual-compare` subagent (see `.cursor/agents/visual-compare.md`). This mode:
-1. Ensures the dev server is running (`yarn run dev --storeUrl=<url>`)
+1. Ensures the dev server is running (`npx @zohofinance/commerce theme dev --storeUrl=<your store url>` — from `--store-url` / `dev-config.json`; without `--storeUrl`, preview uses mock data only)
 2. Uses Claude in Chrome to navigate to the page and screenshot the rendered section (desktop + mobile)
 3. Fetches the Figma screenshot via Figma MCP (`get_screenshot`)
 4. Visually compares both screenshots and reports differences

package/ts-dist/mocks/init-theme/.cursor/skills/browser-verify.md

@@ -12,7 +12,7 @@ Single source of truth for browser automation during theme development.
 
 1. **Developer confirmed `storeUrl`** — recorded in `.claude/scratchpad/<theme>/dev-config.json`
 2. **Developer confirmed page URLs** — same file, `confirmed_by_developer: true`
-3. Dev server running: `yarn run dev --storeUrl=<store_url>` (developer starts OR agent starts and notifies)
+3. Dev server running: `npx @zohofinance/commerce theme dev --storeUrl=<your store url>` (developer starts OR agent starts and notifies). Use `store_url` from `dev-config.json` for `<your store url>`. Without `--storeUrl`, the preview uses mock data only.
 4. Chrome DevTools MCP connected
 5. Figma node ID known for visual compare
 

package/ts-dist/utils/editor-attributes.d.ts

@@ -0,0 +1,3 @@
+export declare function buildSectionComponentAttr(sectionType: string, sectionKey: string, jsonType: string, displayName?: string): string;
+export declare function buildBlockZcommerceAttributes(blockType: string, blockKey: string, sectionKey: string, jsonType: string, displayName?: string): string;
+//# sourceMappingURL=editor-attributes.d.ts.map

package/ts-dist/utils/editor-attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-attributes.d.ts","sourceRoot":"","sources":["../../src/utils/editor-attributes.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,CACvC,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAUR;AAED,wBAAgB,6BAA6B,CAC3C,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAYR"}

package/ts-dist/utils/editor-attributes.js

@@ -0,0 +1,24 @@
+export function buildSectionComponentAttr(sectionType, sectionKey, jsonType, displayName) {
+    return JSON.stringify({
+        id: `section_${sectionKey}`,
+        'data-zcommerce-section-id': '',
+        'data-zcommerce-component-name': sectionType,
+        'data-zcommerce-component-key': `section_${sectionKey}`,
+        'data-zcommerce-json-type': jsonType,
+        'data-zcommerce-display-name': displayName || sectionType,
+        settingid: `setting_section_${sectionType}`
+    });
+}
+export function buildBlockZcommerceAttributes(blockType, blockKey, sectionKey, jsonType, displayName) {
+    const id = `block_${blockKey}_section_${sectionKey}`;
+    const attrJson = JSON.stringify({
+        id,
+        'data-zcommerce-section-id': `section_${sectionKey}`,
+        'data-zcommerce-component-name': blockType,
+        'data-zcommerce-component-key': id,
+        'data-zcommerce-json-type': jsonType,
+        'data-zcommerce-display-name': displayName || blockType,
+        settingid: `setting_block_${blockType}`
+    }).replace(/'/g, ''');
+    return `data-zcommerce-component='${attrJson}'`;
+}

package/ts-dist/utils/prepare-section-data.d.ts

@@ -6,12 +6,15 @@ type SchemaSetting = {
 };
 type SchemaBlock = {
     type: string;
+    name?: string;
     settings?: SchemaSetting[];
 };
 type SectionSchema = {
     settings?: SchemaSetting[];
     blocks?: SchemaBlock[];
 };
-export declare function prepareSectionData(sectionData: SectionsType[string], schemaData?: SectionSchema, sectionKey?: string): import("types/common").SectionType;
+export declare function prepareSectionData(sectionData: SectionsType[string], schemaData?: SectionSchema, sectionKey?: string, editorOptions?: {
+    jsonType: string;
+}, cwd?: string): import("types/common").SectionType;
 export {};
 //# sourceMappingURL=prepare-section-data.d.ts.map

package/ts-dist/utils/prepare-section-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prepare-section-data.d.ts","sourceRoot":"","sources":["../../src/utils/prepare-section-data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAwFF,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,EACjC,UAAU,CAAC,EAAE,aAAa,EAC1B,UAAU,CAAC,EAAE,MAAM,sCAqDpB"}
+{"version":3,"file":"prepare-section-data.d.ts","sourceRoot":"","sources":["../../src/utils/prepare-section-data.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAwFF,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,YAAY,CAAC,MAAM,CAAC,EACjC,UAAU,CAAC,EAAE,aAAa,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,aAAa,CAAC,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,EACpC,GAAG,CAAC,EAAE,MAAM,sCAmFb"}

package/ts-dist/utils/prepare-section-data.js

@@ -1,4 +1,6 @@
 import { resolveThemeAssetUrlsInValue } from './resolve-theme-asset-url.js';
+import { buildBlockZcommerceAttributes } from './editor-attributes.js';
+import { resolveSchemaName } from './resolve-schema-translations.js';
 function isBlankImagePickerValue(value) {
     if (value === null || value === '') {
         return true;
@@ -61,7 +63,7 @@ function normalizeBlocksRecursively(blockData, sectionKey) {
             normalizeBlocksRecursively(child, sectionKey);
     }
 }
-export function prepareSectionData(sectionData, schemaData, sectionKey) {
+export function prepareSectionData(sectionData, schemaData, sectionKey, editorOptions, cwd) {
     normalizeBlocksRecursively(sectionData, sectionKey);
     if (schemaData?.settings && sectionData.settings) {
         applyImagePickerDefaults(sectionData.settings, schemaData.settings);
@@ -90,5 +92,26 @@ export function prepareSectionData(sectionData, schemaData, sectionKey) {
             return block;
         });
     }
+    if (editorOptions && Array.isArray(sectionData.blocks)) {
+        const { jsonType } = editorOptions;
+        const blockSchemaNameMap = new Map((schemaData?.blocks || []).map((b) => [b.type, b.name]));
+        sectionData.blocks = sectionData.blocks.map((block) => {
+            const rawKey = (block.block_key || block.id || '');
+            const cleanKey = rawKey.startsWith('block_')
+                ? rawKey.replace(/^block_/, '').replace(/_section_.*$/, '')
+                : rawKey;
+            const blockType = (block.type || '');
+            const existingDisplayName = block.display_name;
+            const displayName = existingDisplayName
+                || (cwd
+                    ? resolveSchemaName(blockSchemaNameMap.get(blockType), blockType, cwd)
+                    : blockType);
+            return {
+                ...block,
+                type: blockType,
+                zcommerce_attributes: buildBlockZcommerceAttributes(blockType, cleanKey, sectionKey || '', jsonType, displayName)
+            };
+        });
+    }
     return sectionData;
 }

package/ts-dist/utils/resolve-schema-translations.d.ts

@@ -0,0 +1,3 @@
+export declare function resolveSchemaTranslations<T>(schema: T, cwd: string): T;
+export declare function resolveSchemaName(name: string | undefined, fallback: string, cwd: string): string;
+//# sourceMappingURL=resolve-schema-translations.d.ts.map

package/ts-dist/utils/resolve-schema-translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-schema-translations.d.ts","sourceRoot":"","sources":["../../src/utils/resolve-schema-translations.ts"],"names":[],"mappings":"AA+CA,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,CAItE;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAMjG"}

package/ts-dist/utils/resolve-schema-translations.js

@@ -0,0 +1,61 @@
+import path from 'path';
+import fs from 'fs-extra';
+const localeCache = new Map();
+function loadSchemaLocale(cwd) {
+    if (localeCache.has(cwd))
+        return localeCache.get(cwd);
+    const filePath = path.join(cwd, 'i18n', 'en.schema.json');
+    try {
+        const locale = fs.existsSync(filePath)
+            ? JSON.parse(fs.readFileSync(filePath, 'utf-8'))
+            : null;
+        localeCache.set(cwd, locale);
+        return locale;
+    }
+    catch {
+        localeCache.set(cwd, null);
+        return null;
+    }
+}
+function lookupTKey(key, locale) {
+    const parts = key.slice(2).split('.');
+    let node = locale;
+    for (const part of parts) {
+        if (node == null || typeof node !== 'object')
+            return undefined;
+        node = node[part];
+    }
+    return typeof node === 'string' ? node : undefined;
+}
+function resolveTKeysIn(value, locale) {
+    if (typeof value === 'string' && value.startsWith('t:')) {
+        return lookupTKey(value, locale) ?? value;
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => resolveTKeysIn(item, locale));
+    }
+    if (value !== null && typeof value === 'object') {
+        const out = {};
+        for (const [k, v] of Object.entries(value)) {
+            out[k] = resolveTKeysIn(v, locale);
+        }
+        return out;
+    }
+    return value;
+}
+export function resolveSchemaTranslations(schema, cwd) {
+    const locale = loadSchemaLocale(cwd);
+    if (!locale)
+        return schema;
+    return resolveTKeysIn(schema, locale);
+}
+export function resolveSchemaName(name, fallback, cwd) {
+    if (!name)
+        return fallback;
+    if (!name.startsWith('t:'))
+        return name;
+    const locale = loadSchemaLocale(cwd);
+    if (!locale)
+        return name;
+    return lookupTKey(name, locale) ?? name;
+}

package/ts-dist/utils/template-engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-engine.d.ts","sourceRoot":"","sources":["../../src/utils/template-engine.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAwBlC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,UAGN,MAAM,kBAAkB,CAAC;AAc1B,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,cAAc,CAAC;AAEtB,qBAAa,cAAc;;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,QAAQ,CACT;IAEP,IAAI,OAAO,IAGK,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CADzE;IACD,IAAI,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,EAGzE;IAED,OAAO,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAM;IAEP,GAAG,EAAE,MAAM,CAAC;gBAEA,OAAO,gBAAK,EAAE,UAAU,EAAE,UAAU;IAQhD,iBAAiB,CAAC,OAAO,KAAK;IA+DxB,mBAAmB,CAAC,EACxB,QAAQ,EACR,IAAI,EACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;KACd,GAAG,OAAO,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IA+F7C,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;IA6FK,YAAY,CAAC,EACjB,MAAgB,EAChB,sBAAsB,EACtB,IAAI,EACL,EAAE;QACD,MAAM,EAAE,MAAM,CAAC;QACf,sBAAsB,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,MAAM,CAAC;KACd;IAgBK,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAO1C,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAI/C,WAAW,CAAC,QAAQ,EAAE,MAAM;IAI5B,OAAO;CAGR"}
+{"version":3,"file":"template-engine.d.ts","sourceRoot":"","sources":["../../src/utils/template-engine.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAwBlC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,UAGN,MAAM,kBAAkB,CAAC;AAgB1B,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,cAAc,CAAC;AAEtB,qBAAa,cAAc;;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,QAAQ,CACT;IAEP,IAAI,OAAO,IAGK,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CADzE;IACD,IAAI,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,EAGzE;IAED,OAAO,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAM;IAEP,GAAG,EAAE,MAAM,CAAC;gBAEA,OAAO,gBAAK,EAAE,UAAU,EAAE,UAAU;IAQhD,iBAAiB,CAAC,OAAO,KAAK;IA+DxB,mBAAmB,CAAC,EACxB,QAAQ,EACR,IAAI,EACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;KACd,GAAG,OAAO,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IA+F7C,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;IA+GK,YAAY,CAAC,EACjB,MAAgB,EAChB,sBAAsB,EACtB,IAAI,EACL,EAAE;QACD,MAAM,EAAE,MAAM,CAAC;QACf,sBAAsB,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,MAAM,CAAC;KACd;IAgBK,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAO1C,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAI/C,WAAW,CAAC,QAAQ,EAAE,MAAM;IAI5B,OAAO;CAGR"}

package/ts-dist/utils/template-engine.js

@@ -7,9 +7,11 @@ import { LiquidError } from '../utils/liquid-error.js';
 import { extractLiquidErrorLocation, toThemeRelativePath } from './stack-trace.js';
 import { promises as fs } from 'fs';
 import { prepareSectionData } from './prepare-section-data.js';
+import { buildSectionComponentAttr } from './editor-attributes.js';
 import { normalizeLiquidBlankAssignments } from './normalize-liquid-blank.js';
 import { createNormalizedLiquidFs } from './normalized-liquid-fs.js';
 import { resolveSchemaSettings } from './resolve-schema-settings.js';
+import { resolveSchemaName } from './resolve-schema-translations.js';
 import { attachCliStackTrace, withLiquidRenderFrame, renderTrackedLiquidFile, renderTrackedLiquidString } from './liquid-render-frame.js';
 export class TemplateEngine {
     engine;
@@ -159,6 +161,8 @@ export class TemplateEngine {
     async renderSections({ section_order, sections, data }) {
         let renderedSection = '';
         let renderedSectionsArr = [];
+        const editorMode = this.engine.__editorMode;
+        const editorJsonType = this.engine.__editorJsonType || 'template';
         for (const section of section_order || []) {
             let sectionToRender = sections[section].type || '';
             let liquidSection = `sections/${sectionToRender}.liquid`;
@@ -189,14 +193,24 @@ export class TemplateEngine {
                     console.error(`Failed to parse schema for section ${sectionToRender}:`, error);
                 }
             }
-            sections[section] = prepareSectionData(sections[section], schemaData, section);
+            sections[section] = prepareSectionData(sections[section], schemaData, section, editorMode ? { jsonType: editorJsonType } : undefined, this.cwd);
+            const sectionContext = {
+                ...sections[section],
+                id: `section_${section}`,
+                ...(editorMode ? {
+                    settingid: `setting_section_${sectionToRender}`,
+                    display_name: resolveSchemaName(schemaData?.name, sectionToRender, this.cwd)
+                } : {})
+            };
             let sectionData = await this.renderFile(this.getFilePath(`sections/${sectionToRender}.liquid`), {
                 ...data,
-                section: {
-                    ...sections[section],
-                    id: `section_${section}`
-                }
+                section: sectionContext
             });
+            if (editorMode) {
+                const displayName = resolveSchemaName(schemaData?.name, sectionToRender, this.cwd);
+                const attrJson = buildSectionComponentAttr(sectionToRender, section, editorJsonType, displayName);
+                sectionData = `<div data-zcommerce-component='${attrJson.replace(/'/g, '&#39;')}' style="display:contents">${sectionData}</div>`;
+            }
             renderedSectionsArr.push(sectionData);
         }
         await Promise.all(renderedSectionsArr).then((arr) => {

package/ts-dist/utils/theme-mocks.d.ts

@@ -0,0 +1,2 @@
+export declare function getMock<T>(name: string, builtin: T): T;
+//# sourceMappingURL=theme-mocks.d.ts.map

package/ts-dist/utils/theme-mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-mocks.d.ts","sourceRoot":"","sources":["../../src/utils/theme-mocks.ts"],"names":[],"mappings":"AAkCA,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAQtD"}

package/ts-dist/utils/theme-mocks.js

@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Theme-level mock overrides for `theme dev` without --storeUrl.
+ *
+ * A theme may ship `mocks/<name>.json` next to `pages/` (e.g. mocks/products.json,
+ * mocks/global-objects.json). When present, it replaces the built-in mock of the same
+ * name, so a preview can use data that fits the theme. `mocks/` is not a theme folder:
+ * `theme build` never copies it and theme validation skips it.
+ *
+ * Objects are merged one level deep over the built-in (so a global-objects override can
+ * set just `store` and `menu` and keep `routes`); arrays and other values replace it.
+ * Files are read on every call so edits show up on the next page load.
+ */
+const MOCKS_DIR = 'mocks';
+function readOverride(name) {
+    const file = path.join(process.cwd(), MOCKS_DIR, `${name}.json`);
+    if (!fs.existsSync(file)) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(fs.readFileSync(file, 'utf-8'));
+    }
+    catch (error) {
+        console.warn(`Ignoring ${MOCKS_DIR}/${name}.json: ${error.message}`);
+        return undefined;
+    }
+}
+function isPlainObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+export function getMock(name, builtin) {
+    const override = readOverride(name);
+    if (override === undefined) {
+        return builtin;
+    }
+    return isPlainObject(override) && isPlainObject(builtin)
+        ? { ...builtin, ...override }
+        : override;
+}