@swell/apps-sdk 1.0.123 → 1.0.125

package/dist/index.js

@@ -8057,7 +8057,7 @@ ${formattedMessage}`;
             {
               _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 || "",
@@ -16436,13 +16436,25 @@ ${injects.join("\n")}<\/script>`;
     );
   }
 
+  // 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;
@@ -16454,7 +16466,7 @@ ${injects.join("\n")}<\/script>`;
         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)}`
@@ -16481,9 +16493,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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;
@@ -16494,7 +16506,7 @@ ${injects.join("\n")}<\/script>`;
         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 = [];
@@ -16532,12 +16544,12 @@ ${injects.join("\n")}<\/script>`;
       }
       *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;
@@ -16570,15 +16582,15 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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;
@@ -16603,13 +16615,13 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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);
@@ -16664,10 +16676,10 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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;
@@ -16681,10 +16693,10 @@ ${injects.join("\n")}<\/script>`;
         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));
@@ -16702,7 +16714,7 @@ ${injects.join("\n")}<\/script>`;
           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]) => {
@@ -16762,9 +16774,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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) {
@@ -16773,22 +16785,22 @@ ${injects.join("\n")}<\/script>`;
         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 {
@@ -16806,7 +16818,7 @@ ${injects.join("\n")}<\/script>`;
         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;
           }
@@ -16827,20 +16839,20 @@ ${injects.join("\n")}<\/script>`;
     };
   }
   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));
@@ -16858,9 +16870,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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);
@@ -16876,9 +16888,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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;
@@ -16893,7 +16905,7 @@ ${injects.join("\n")}<\/script>`;
         }
         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", () => {
@@ -16903,8 +16915,8 @@ ${injects.join("\n")}<\/script>`;
       }
       *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({
@@ -16928,9 +16940,9 @@ ${injects.join("\n")}<\/script>`;
 
   // 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(
@@ -16938,7 +16950,7 @@ ${injects.join("\n")}<\/script>`;
           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)
         );
@@ -16950,11 +16962,11 @@ ${injects.join("\n")}<\/script>`;
         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,
@@ -16987,13 +16999,13 @@ ${injects.join("\n")}<\/script>`;
       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);
@@ -17029,7 +17041,7 @@ ${injects.join("\n")}<\/script>`;
             }
           });
         });
-        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}`;
@@ -17043,10 +17055,10 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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);
@@ -17054,10 +17066,16 @@ ${injects.join("\n")}<\/script>`;
         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
           );
@@ -17070,6 +17088,7 @@ ${injects.join("\n")}<\/script>`;
               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);
         }
@@ -17078,9 +17097,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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) {
@@ -17089,7 +17108,7 @@ ${injects.join("\n")}<\/script>`;
         this.templates = [];
         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") {
             return;
           }
           this.templates.push(parser.parseToken(token2, remainTokens));
@@ -17111,16 +17130,16 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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));
@@ -17136,9 +17155,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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(
@@ -17146,13 +17165,13 @@ ${injects.join("\n")}<\/script>`;
           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));
@@ -17164,10 +17183,10 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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);
@@ -17200,9 +17219,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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) {
@@ -18199,9 +18218,9 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // 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) => {
@@ -18228,8 +18247,8 @@ ${injects.join("\n")}<\/script>`;
 
   // 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;
@@ -18364,7 +18383,7 @@ ${injects.join("\n")}<\/script>`;
   }
 
   // src/liquid/index.ts
-  var LiquidSwell30 = class extends import_liquidjs24.Liquid {
+  var LiquidSwell30 = class extends import_liquidjs25.Liquid {
     theme;
     getThemeConfig;
     getThemeTemplateConfigByType;
@@ -18796,6 +18815,7 @@ ${injects.join("\n")}<\/script>`;
     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;
@@ -19687,9 +19707,10 @@ ${injects.join("\n")}<\/script>`;
       }
       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 || "";
       }
@@ -19822,15 +19843,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(
@@ -19841,45 +19877,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)