@swell/apps-sdk 1.0.124 → 1.0.126

package/dist/index.cjs

@@ -8161,7 +8161,7 @@ function getEasyblocksPagePropsWithConfigs(themeGlobals, allSections, pageSectio
           {
             _id: "swell_page",
             _component: "swell_page",
-            ContentSections: pageSections.filter((config) => componentSet.has(config.section.type)).map(({ section, settings, schema }) => ({
+            [SECTION_GROUP_CONTENT]: pageSections.filter((config) => componentSet.has(config.section.type)).map(({ section, settings, schema }) => ({
               _id: prepareSectionId(section.id),
               _component: section.type,
               custom_css: settings?.section?.custom_css || "",
@@ -13751,7 +13751,10 @@ function ShopifyBlog(instance, blogCategory) {
     blogCategory = cloneStorefrontResource(blogCategory);
   }
   const allTags = deferWith(blogCategory.blogs, (blogs) => {
-    const set = blogs?.results?.reduce(
+    if (!Array.isArray(blogs?.results)) {
+      return [];
+    }
+    const set = blogs.results.reduce(
       (set2, blog) => {
         for (const tag of blog.tags || []) {
           set2.add(tag);
@@ -16540,13 +16543,25 @@ function ShopifyTemplate(_instance, template) {
   );
 }
 
+// src/compatibility/drops/render.ts
+var import_liquidjs5 = require("liquidjs");
+var RenderDrop = class extends import_liquidjs5.Drop {
+  constructor(handler) {
+    super();
+    this.handler = handler;
+  }
+  valueOf() {
+    return this.handler();
+  }
+};
+
 // src/liquid/index.ts
-var import_liquidjs24 = require("liquidjs");
+var import_liquidjs25 = require("liquidjs");
 
 // src/liquid/tags/assign.ts
-var import_liquidjs5 = require("liquidjs");
+var import_liquidjs6 = require("liquidjs");
 function bind(_liquidSwell) {
-  return class AssignTag extends import_liquidjs5.Tag {
+  return class AssignTag extends import_liquidjs6.Tag {
     key;
     value;
     identifier;
@@ -16558,7 +16573,7 @@ function bind(_liquidSwell) {
       this.tokenizer.skipBlank();
       this.tokenizer.advance();
       try {
-        this.value = new import_liquidjs5.Value(this.tokenizer.readFilteredValue(), this.liquid);
+        this.value = new import_liquidjs6.Value(this.tokenizer.readFilteredValue(), this.liquid);
       } catch (e) {
         console.warn(
           `Liquid "assign" tag: ${e instanceof Error ? e.stack : String(e)}`
@@ -16585,9 +16600,9 @@ function bind(_liquidSwell) {
 }
 
 // src/liquid/tags/case.ts
-var import_liquidjs6 = require("liquidjs");
+var import_liquidjs7 = require("liquidjs");
 function bind2(liquidSwell) {
-  return class CaseTag extends import_liquidjs6.Tag {
+  return class CaseTag extends import_liquidjs7.Tag {
     value;
     branches;
     elseTemplates;
@@ -16598,7 +16613,7 @@ function bind2(liquidSwell) {
       const caseVar = this.tokenizer.readValue()?.getText();
       this.isBlock = Boolean(caseVar?.startsWith("block."));
       this.tokenizer.p = begin;
-      this.value = new import_liquidjs6.Value(this.tokenizer.readFilteredValue(), this.liquid);
+      this.value = new import_liquidjs7.Value(this.tokenizer.readFilteredValue(), this.liquid);
       this.branches = [];
       this.elseTemplates = [];
       let p = [];
@@ -16636,12 +16651,12 @@ function bind2(liquidSwell) {
     }
     *render(ctx, emitter) {
       const r = this.liquid.renderer;
-      const target = (0, import_liquidjs6.toValue)(yield this.value.value(ctx, ctx.opts.lenientIf));
+      const target = (0, import_liquidjs7.toValue)(yield this.value.value(ctx, ctx.opts.lenientIf));
       let branchHit = false;
       let output = "";
       for (const branch of this.branches) {
         for (const valueToken of branch.values) {
-          const value = yield (0, import_liquidjs6.evalToken)(valueToken, ctx, ctx.opts.lenientIf);
+          const value = yield (0, import_liquidjs7.evalToken)(valueToken, ctx, ctx.opts.lenientIf);
           if (target === value) {
             const blockOutput = yield r.renderTemplates(branch.templates, ctx);
             output += this.isBlock && liquidSwell.isEditor ? `<span class="swell-block">${blockOutput}</span>` : blockOutput;
@@ -16674,15 +16689,15 @@ function bind2(liquidSwell) {
 }
 
 // src/liquid/tags/comment.ts
-var import_liquidjs7 = require("liquidjs");
+var import_liquidjs8 = require("liquidjs");
 function bind3(_liquidSwell) {
-  return class CommentTag extends import_liquidjs7.Tag {
+  return class CommentTag extends import_liquidjs8.Tag {
     constructor(tagToken, remainTokens, liquid) {
       super(tagToken, remainTokens, liquid);
       let nested = 1;
       while (remainTokens.length > 0) {
         const token = remainTokens.shift();
-        if (import_liquidjs7.TypeGuards.isTagToken(token)) {
+        if (import_liquidjs8.TypeGuards.isTagToken(token)) {
           switch (token.name) {
             case "comment":
               nested += 1;
@@ -16707,13 +16722,13 @@ function bind3(_liquidSwell) {
 }
 
 // src/liquid/tags/for.ts
-var import_liquidjs8 = require("liquidjs");
+var import_liquidjs9 = require("liquidjs");
 var MODIFIERS = Object.freeze(["offset", "limit", "reversed"]);
 function bind4(_liquidSwell) {
-  return class ForTag extends import_liquidjs8.ForTag {
+  return class ForTag extends import_liquidjs9.ForTag {
     *render(ctx, emitter) {
       const r = this.liquid.renderer;
-      let collection = yield (0, import_liquidjs8.evalToken)(this.collection, ctx);
+      let collection = yield (0, import_liquidjs9.evalToken)(this.collection, ctx);
       collection = yield resolveEnumerable(collection);
       if (!collection.length) {
         yield r.renderTemplates(this.elseTemplates, ctx, emitter);
@@ -16768,10 +16783,10 @@ function limit(arr, count) {
 }
 
 // src/liquid/tags/form.ts
-var import_liquidjs9 = require("liquidjs");
+var import_liquidjs10 = require("liquidjs");
 var IGNORED_SHOPIFY_FORMS = Object.freeze(["new_comment", "guest_login"]);
 function bind5(liquidSwell) {
-  return class FormTag extends import_liquidjs9.Tag {
+  return class FormTag extends import_liquidjs10.Tag {
     formType;
     formConfig;
     templates;
@@ -16785,10 +16800,10 @@ function bind5(liquidSwell) {
       tokenizer.advance();
       this.arg = tokenizer.readValue();
       this.templates = [];
-      this.hash = new import_liquidjs9.Hash(this.tokenizer.remaining());
+      this.hash = new import_liquidjs10.Hash(this.tokenizer.remaining());
       while (remainTokens.length > 0) {
         const token2 = remainTokens.shift();
-        if (import_liquidjs9.TypeGuards.isTagToken(token2) && token2.name === "endform") {
+        if (import_liquidjs10.TypeGuards.isTagToken(token2) && token2.name === "endform") {
           return;
         }
         this.templates.push(parser.parseToken(token2, remainTokens));
@@ -16806,7 +16821,7 @@ function bind5(liquidSwell) {
         return;
       }
       const r = this.liquid.renderer;
-      const arg = yield (0, import_liquidjs9.evalToken)(this.arg, ctx);
+      const arg = yield (0, import_liquidjs10.evalToken)(this.arg, ctx);
       const hash = yield this.hash.render(ctx);
       const scope = ctx.getAll();
       const attrs = " " + Object.entries(hash).reduce((acc, [key, value]) => {
@@ -16866,9 +16881,9 @@ function bind5(liquidSwell) {
 }
 
 // src/liquid/tags/if.ts
-var import_liquidjs10 = require("liquidjs");
+var import_liquidjs11 = require("liquidjs");
 function bind6(_liquidSwell) {
-  return class IfTag extends import_liquidjs10.Tag {
+  return class IfTag extends import_liquidjs11.Tag {
     branches = [];
     elseTemplates;
     constructor(tagToken, remainTokens, liquid, parser) {
@@ -16877,22 +16892,22 @@ function bind6(_liquidSwell) {
       parser.parseStream(remainTokens).on(
         "start",
         () => this.branches.push({
-          value: new import_liquidjs10.Value(
+          value: new import_liquidjs11.Value(
             tagToken.tokenizer.readFilteredValue(),
             this.liquid
           ),
           templates: p = []
         })
       ).on("tag:elsif", (token) => {
-        (0, import_liquidjs10.assert)(!this.elseTemplates, "unexpected elsif after else");
+        (0, import_liquidjs11.assert)(!this.elseTemplates, "unexpected elsif after else");
         this.branches.push({
-          value: new import_liquidjs10.Value(token.tokenizer.readFilteredValue(), this.liquid),
+          value: new import_liquidjs11.Value(token.tokenizer.readFilteredValue(), this.liquid),
           templates: p = []
         });
       }).on("tag:else", (tag) => {
         if (tag.args.length > 0) {
           this.branches.push({
-            value: new import_liquidjs10.Value(tag.tokenizer.readFilteredValue(), this.liquid),
+            value: new import_liquidjs11.Value(tag.tokenizer.readFilteredValue(), this.liquid),
             templates: p = []
           });
         } else {
@@ -16910,7 +16925,7 @@ function bind6(_liquidSwell) {
       const r = this.liquid.renderer;
       for (const { value, templates } of this.branches) {
         const v = yield value.value(ctx, ctx.opts.lenientIf);
-        if ((0, import_liquidjs10.isTruthy)(v, ctx)) {
+        if ((0, import_liquidjs11.isTruthy)(v, ctx)) {
           yield r.renderTemplates(templates, ctx, emitter);
           return;
         }
@@ -16931,20 +16946,20 @@ function bind6(_liquidSwell) {
   };
 }
 function assertEmpty(predicate, message = `unexpected ${JSON.stringify(predicate)}`) {
-  (0, import_liquidjs10.assert)(!predicate, message);
+  (0, import_liquidjs11.assert)(!predicate, message);
 }
 
 // src/liquid/tags/javascript.ts
-var import_liquidjs11 = require("liquidjs");
+var import_liquidjs12 = require("liquidjs");
 function bind7(_liquidSwell) {
-  return class JavascriptTag extends import_liquidjs11.Tag {
+  return class JavascriptTag extends import_liquidjs12.Tag {
     templates;
     constructor(token, remainTokens, liquid, parser) {
       super(token, remainTokens, liquid);
       this.templates = [];
       while (remainTokens.length > 0) {
         const token2 = remainTokens.shift();
-        if (import_liquidjs11.TypeGuards.isTagToken(token2) && token2.name === "endjavascript") {
+        if (import_liquidjs12.TypeGuards.isTagToken(token2) && token2.name === "endjavascript") {
           return;
         }
         this.templates.push(parser.parseToken(token2, remainTokens));
@@ -16962,9 +16977,9 @@ function bind7(_liquidSwell) {
 }
 
 // src/liquid/tags/layout.ts
-var import_liquidjs12 = require("liquidjs");
+var import_liquidjs13 = require("liquidjs");
 function bind8(liquidSwell) {
-  return class LayoutTag extends import_liquidjs12.Tag {
+  return class LayoutTag extends import_liquidjs13.Tag {
     fileName;
     constructor(token, remainTokens, liquid, _parser) {
       super(token, remainTokens, liquid);
@@ -16980,9 +16995,9 @@ function bind8(liquidSwell) {
 }
 
 // src/liquid/tags/paginate.ts
-var import_liquidjs13 = require("liquidjs");
+var import_liquidjs14 = require("liquidjs");
 function bind9(liquidSwell) {
-  return class PaginateTag extends import_liquidjs13.Tag {
+  return class PaginateTag extends import_liquidjs14.Tag {
     collection;
     pageSize;
     templates;
@@ -16997,7 +17012,7 @@ function bind9(liquidSwell) {
       }
       this.templates = [];
       this.collection = collection;
-      this.hash = new import_liquidjs13.Hash(this.tokenizer.remaining());
+      this.hash = new import_liquidjs14.Hash(this.tokenizer.remaining());
       const stream = parser.parseStream(remainTokens).on("tag:endpaginate", () => stream.stop()).on("template", (tpl) => {
         this.templates.push(tpl);
       }).on("end", () => {
@@ -17007,8 +17022,8 @@ function bind9(liquidSwell) {
     }
     *render(ctx, emitter) {
       const r = this.liquid.renderer;
-      const collection = yield (0, import_liquidjs13.evalToken)(this.collection, ctx);
-      const pageSize = Number(yield (0, import_liquidjs13.evalToken)(this.pageSize, ctx));
+      const collection = yield (0, import_liquidjs14.evalToken)(this.collection, ctx);
+      const pageSize = Number(yield (0, import_liquidjs14.evalToken)(this.pageSize, ctx));
       const hash = yield this.hash.render(ctx);
       if (!Number.isNaN(pageSize) && collection instanceof SwellStorefrontCollection && collection.limit != pageSize) {
         yield collection._get({
@@ -17032,9 +17047,9 @@ function bind9(liquidSwell) {
 
 // src/liquid/tags/render.ts
 var import_lodash_es8 = require("lodash-es");
-var import_liquidjs14 = require("liquidjs");
+var import_liquidjs15 = require("liquidjs");
 function bind10(liquidSwell) {
-  return class RenderTag extends import_liquidjs14.RenderTag {
+  return class RenderTag extends import_liquidjs15.RenderTag {
     *render(ctx, emitter) {
       const { liquid, hash } = this;
       const filepath = yield renderFilePath(
@@ -17042,7 +17057,7 @@ function bind10(liquidSwell) {
         ctx,
         liquid
       );
-      (0, import_liquidjs14.assert)(filepath, () => `illegal file path "${filepath}"`);
+      (0, import_liquidjs15.assert)(filepath, () => `illegal file path "${filepath}"`);
       const themeConfig = yield liquidSwell.getComponentPath(filepath).then(
         (fileName) => liquidSwell.getThemeConfig(fileName)
       );
@@ -17054,11 +17069,11 @@ function bind10(liquidSwell) {
       if (this["with"]) {
         const { value, alias } = this["with"];
         const aliasName = alias || filepath;
-        scope[aliasName] = yield (0, import_liquidjs14.evalToken)(value, ctx);
+        scope[aliasName] = yield (0, import_liquidjs15.evalToken)(value, ctx);
       }
       if (this["for"]) {
         const { value, alias } = this["for"];
-        let collection = yield (0, import_liquidjs14.evalToken)(value, ctx);
+        let collection = yield (0, import_liquidjs15.evalToken)(value, ctx);
         collection = yield resolveEnumerable(collection);
         scope["forloop"] = new ForloopDrop(
           collection.length,
@@ -17091,13 +17106,13 @@ function* renderFilePath(file, ctx, liquid) {
     default:
       break;
   }
-  return yield (0, import_liquidjs14.evalToken)(file, ctx);
+  return yield (0, import_liquidjs15.evalToken)(file, ctx);
 }
 
 // src/liquid/tags/section.ts
-var import_liquidjs15 = require("liquidjs");
+var import_liquidjs16 = require("liquidjs");
 function bind11(liquidSwell) {
-  return class SectionTag extends import_liquidjs15.Tag {
+  return class SectionTag extends import_liquidjs16.Tag {
     fileName;
     constructor(token, remainTokens, liquid, _parser) {
       super(token, remainTokens, liquid);
@@ -17133,7 +17148,7 @@ function bind11(liquidSwell) {
           }
         });
       });
-      if (output) {
+      if (output && schema && settings) {
         const { shopify_compatibility: shopifyCompatibility } = liquidSwell.theme.globals;
         const tag = schema.tag || "div";
         const id = `${shopifyCompatibility ? "shopify" : "swell"}-section-${settings.id || this.fileName}`;
@@ -17147,10 +17162,10 @@ function bind11(liquidSwell) {
 }
 
 // src/liquid/tags/sections.ts
-var import_liquidjs16 = require("liquidjs");
+var import_liquidjs17 = require("liquidjs");
 var import_json54 = __toESM(require("json5"), 1);
 function bind12(liquidSwell) {
-  return class SectionsTag extends import_liquidjs16.Tag {
+  return class SectionsTag extends import_liquidjs17.Tag {
     fileName;
     constructor(token, remainTokens, liquid, _parser) {
       super(token, remainTokens, liquid);
@@ -17158,10 +17173,16 @@ function bind12(liquidSwell) {
       this.fileName = tokenizer.readValue()?.content;
     }
     *render(_ctx, emitter) {
-      const filePath = yield liquidSwell.getSectionGroupPath(this.fileName);
-      const themeConfig = yield liquidSwell.getThemeConfig(filePath);
+      const filePath = yield liquidSwell.getSectionGroupPath(
+        this.fileName
+      );
+      const themeConfig = yield liquidSwell.getThemeConfig(
+        filePath
+      );
       try {
-        const sectionGroup = import_json54.default.parse(themeConfig.file_data);
+        const sectionGroup = import_json54.default.parse(
+          themeConfig.file_data
+        );
         const sectionConfigs = yield liquidSwell.renderPageSections(
           sectionGroup
         );
@@ -17174,6 +17195,7 @@ function bind12(liquidSwell) {
             return `<${tag} id="${id}" class="${className} ${section.class || ""}">${section.output}</${tag}>`;
           }).join("")}</div>`
         );
+        yield liquidSwell.theme.addPageSection(this.fileName, true);
       } catch (err) {
         console.warn(err);
       }
@@ -17182,18 +17204,19 @@ function bind12(liquidSwell) {
 }
 
 // src/liquid/tags/style.ts
-var import_liquidjs17 = require("liquidjs");
+var import_liquidjs18 = require("liquidjs");
 function bind13(_liquidSwell) {
-  return class StyleTag extends import_liquidjs17.Tag {
+  return class StyleTag extends import_liquidjs18.Tag {
     templates;
     hash;
     constructor(token, remainTokens, liquid, parser) {
       super(token, remainTokens, liquid);
-      this.hash = md5(token.input);
       this.templates = [];
+      const tagBegin = token.begin;
       while (remainTokens.length > 0) {
         const token2 = remainTokens.shift();
-        if (import_liquidjs17.TypeGuards.isTagToken(token2) && token2.name === "endstyle") {
+        if (import_liquidjs18.TypeGuards.isTagToken(token2) && token2.name === "endstyle") {
+          this.hash = md5(token2.input.slice(tagBegin, token2.end));
           return;
         }
         this.templates.push(parser.parseToken(token2, remainTokens));
@@ -17215,16 +17238,16 @@ function bind13(_liquidSwell) {
 }
 
 // src/liquid/tags/stylesheet.ts
-var import_liquidjs18 = require("liquidjs");
+var import_liquidjs19 = require("liquidjs");
 function bind14(_liquidSwell) {
-  return class StyleSheetTag extends import_liquidjs18.Tag {
+  return class StyleSheetTag extends import_liquidjs19.Tag {
     templates;
     constructor(token, remainTokens, liquid, parser) {
       super(token, remainTokens, liquid);
       this.templates = [];
       while (remainTokens.length > 0) {
         const token2 = remainTokens.shift();
-        if (import_liquidjs18.TypeGuards.isTagToken(token2) && token2.name === "endstylesheet") {
+        if (import_liquidjs19.TypeGuards.isTagToken(token2) && token2.name === "endstylesheet") {
           return;
         }
         this.templates.push(parser.parseToken(token2, remainTokens));
@@ -17240,9 +17263,9 @@ function bind14(_liquidSwell) {
 }
 
 // src/liquid/tags/shopify/include.ts
-var import_liquidjs19 = require("liquidjs");
+var import_liquidjs20 = require("liquidjs");
 function bind15(liquidSwell) {
-  return class IncludeTag extends import_liquidjs19.IncludeTag {
+  return class IncludeTag extends import_liquidjs20.IncludeTag {
     *render(ctx, emitter) {
       const { hash } = this;
       const filepath = yield renderFilePath(
@@ -17250,13 +17273,13 @@ function bind15(liquidSwell) {
         ctx,
         this.liquid
       );
-      (0, import_liquidjs19.assert)(filepath, () => `illegal file path "${filepath}"`);
+      (0, import_liquidjs20.assert)(filepath, () => `illegal file path "${filepath}"`);
       const saved = ctx.saveRegister("blocks", "blockMode");
       ctx.setRegister("blocks", {});
       ctx.setRegister("blockMode", 0);
       const scope = yield hash.render(ctx);
       if (this.withVar) {
-        scope[filepath] = yield (0, import_liquidjs19.evalToken)(this.withVar, ctx);
+        scope[filepath] = yield (0, import_liquidjs20.evalToken)(this.withVar, ctx);
       }
       ctx.push(ctx.opts.jekyllInclude ? { include: scope } : scope);
       const output = yield liquidSwell.getComponentPath(filepath).then((path) => liquidSwell.getThemeConfig(path)).then((themeConfig) => liquidSwell.renderTemplate(themeConfig, scope));
@@ -17268,10 +17291,10 @@ function bind15(liquidSwell) {
 }
 
 // src/liquid/tags/shopify/schema.ts
-var import_liquidjs20 = require("liquidjs");
+var import_liquidjs21 = require("liquidjs");
 var import_json55 = __toESM(require("json5"), 1);
 function bind16(liquidSwell) {
-  return class SchemaTag extends import_liquidjs20.Tag {
+  return class SchemaTag extends import_liquidjs21.Tag {
     templates;
     constructor(token, remainTokens, liquid, parser) {
       super(token, remainTokens, liquid);
@@ -17304,9 +17327,9 @@ function bind16(liquidSwell) {
 }
 
 // src/liquid/tags/inline_editable.ts
-var import_liquidjs21 = require("liquidjs");
+var import_liquidjs22 = require("liquidjs");
 function bind17(_liquidSwell) {
-  return class InlineEditableTag extends import_liquidjs21.Tag {
+  return class InlineEditableTag extends import_liquidjs22.Tag {
     key;
     value;
     constructor(token, remainTokens, liquid, _parser) {
@@ -18303,9 +18326,9 @@ async function resolveAsyncProps(propArg, resolveProps) {
 }
 
 // src/liquid/operators.ts
-var import_liquidjs22 = require("liquidjs");
+var import_liquidjs23 = require("liquidjs");
 var swellOperators = {
-  ...import_liquidjs22.defaultOperators,
+  ...import_liquidjs23.defaultOperators,
   "==": equal,
   "!=": (l, r) => !equal(l, r),
   contains: (l, r) => {
@@ -18332,8 +18355,8 @@ function arrayEqual(lhs, rhs) {
 
 // src/liquid/color.ts
 var import_color = __toESM(require("color"), 1);
-var import_liquidjs23 = require("liquidjs");
-var ThemeColor = class _ThemeColor extends import_liquidjs23.Drop {
+var import_liquidjs24 = require("liquidjs");
+var ThemeColor = class _ThemeColor extends import_liquidjs24.Drop {
   color;
   colorValues;
   red;
@@ -18468,7 +18491,7 @@ function isThemeColorLike(value) {
 }
 
 // src/liquid/index.ts
-var LiquidSwell30 = class extends import_liquidjs24.Liquid {
+var LiquidSwell30 = class extends import_liquidjs25.Liquid {
   theme;
   getThemeConfig;
   getThemeTemplateConfigByType;
@@ -18900,6 +18923,7 @@ var SwellTheme3 = class {
   globalData = {};
   // Swell-native theme settings if not using Shopify compatibility
   themeSettingFilePath = "theme/config/theme.json";
+  pageSectionGroups = null;
   constructor(swell, options = {}) {
     const { forms, resources, globals, shopifyCompatibilityClass } = options;
     this.swell = swell;
@@ -19791,9 +19815,10 @@ var SwellTheme3 = class {
     }
     return "";
   }
-  async renderLayout(data) {
-    if (this.liquidSwell.layoutName) {
-      return this.renderLayoutTemplate(this.liquidSwell.layoutName, data);
+  async renderLayout(layoutName, data) {
+    layoutName = layoutName || this.liquidSwell.layoutName;
+    if (layoutName) {
+      return this.renderLayoutTemplate(layoutName, data);
     } else {
       return data?.content_for_layout || "";
     }
@@ -19926,15 +19951,30 @@ ${this.shopifyCompatibility.getContentForHeader()}`;
     }
     return sectionConfigs;
   }
+  async addPageSection(sectionFileName, group) {
+    if (this.pageSectionGroups === null) {
+      return;
+    }
+    const { pageSectionGroups } = this;
+    const sectionSchema = await this.getSectionSchema(sectionFileName);
+    const sectionName = sectionSchema?.label || sectionFileName;
+    let sourcePath = "";
+    if (group) {
+      const sectionConfig = await this.getThemeTemplateConfigByType(
+        "sections",
+        `${sectionFileName}.json`
+      );
+      sourcePath = sectionConfig?.file_path ?? "";
+    }
+    pageSectionGroups.push({
+      prop: getSectionGroupProp(sectionFileName),
+      label: sectionName,
+      source: sourcePath,
+      group
+    });
+  }
   /**
    * Get a list of sections and section groups in a page layout.
-   *
-   * Basically we should get these section groups: `header`, `content` and `footer`.
-   * For now, section groups are searched for using regex in the page layout.
-   * There may be cases where section groups can be nested in other files,
-   * in which case they will not be visible to this function.
-   *
-   * In the future, we may use a dummy page renderer and thus extract all section groups.
    */
   async getPageSectionGroups(pageId) {
     const pageConfig = await this.getThemeTemplateConfigByType(
@@ -19945,45 +19985,31 @@ ${this.shopifyCompatibility.getContentForHeader()}`;
       return [];
     }
     const pageSchema = parseJsonConfig(pageConfig);
-    const pageLayout = pageSchema.layout || "theme";
-    const layoutConfig = await this.getThemeTemplateConfigByType(
-      "layouts",
-      `${pageLayout}.liquid`
-    );
-    if (layoutConfig === null) {
-      return [];
-    }
-    const layoutData = layoutConfig.file_data;
-    const iterator = layoutData.matchAll(
-      /\bsections '(\w.*?)'|(\bcontent_for_layout\b)/gm
-    );
-    const sections = [];
-    for (const match of iterator) {
-      if (match[1]) {
-        const sectionFileName = match[1] || match[2];
-        const sectionSchema = await this.getSectionSchema(sectionFileName);
-        const sectionName = sectionSchema?.label || sectionFileName;
-        const sectionConfig = await this.getThemeTemplateConfigByType(
-          "sections",
-          `${sectionFileName}.json`
-        );
-        sections.push({
-          prop: getSectionGroupProp(sectionFileName),
-          label: sectionName,
-          source: sectionConfig?.file_path
-        });
-      } else if (match[2]) {
-        sections.push({
+    const pageLayout = pageSchema.layout || "";
+    const pageSectionGroups = [];
+    this.pageSectionGroups = pageSectionGroups;
+    await this.renderLayout(pageLayout, {
+      content_for_layout: new RenderDrop(() => {
+        pageSectionGroups.push({
           prop: SECTION_GROUP_CONTENT,
           label: "Template",
-          source: pageConfig.file_path
+          source: pageConfig.file_path,
+          group: true
         });
+        return "";
+      })
+    });
+    this.pageSectionGroups = null;
+    return pageSectionGroups;
+  }
+  async getLayoutSectionGroups(sectionGroups, resolveSettings = true) {
+    const configs = /* @__PURE__ */ new Map();
+    for (const sectionGroup of sectionGroups) {
+      const config = await this.getThemeConfig(sectionGroup.source);
+      if (config) {
+        configs.set(config.file_path, config);
       }
     }
-    return sections;
-  }
-  async getLayoutSectionGroups(resolveSettings = true) {
-    const configs = await this.getThemeConfigsByPath("theme/sections/");
     const layoutSectionGroups = await getLayoutSectionGroups(
       configs,
       this.getTemplateSchema.bind(this)