vue-wswg-editor 0.0.12 → 0.0.13

package/src/util/theme-registry.ts

@@ -0,0 +1,397 @@
+import { shallowRef, markRaw, type Ref } from "vue";
+import type { Theme } from "../types/Theme";
+import type { Layout } from "../types/Layout";
+import type { Block } from "../types/Block";
+import { generateNameVariations, toCamelCase } from "./helpers";
+import { EditorFieldConfig } from "./fieldConfig";
+
+// Load all thumbnail images - Vite will process these as assets and provide URLs
+// For images, Vite returns the URL as the default export when using eager: true
+// const thumbnailModules = import.meta.glob("@page-builder/blocks/**/thumbnail.png", { eager: true });
+
+/**
+ * Registry of all page builder themes, blocks, layouts, fields & thumbnails
+ */
+export const pageBuilderThemes: Ref<Record<string, Theme>> = shallowRef({});
+export const themeLayouts: Ref<Record<string, Layout>> = shallowRef({});
+export const themeBlocks: Ref<Record<string, Block>> = shallowRef({});
+export const themeBlockFields: Ref<Record<string, Record<string, EditorFieldConfig>>> = shallowRef({});
+export const activeThemeId: Ref<string | undefined> = shallowRef(undefined);
+let blockThumbnails: Record<string, any> | null = null; // non reactive cache of block thumbnails
+let themeThumbnails: Record<string, any> | null = null; // non reactive cache of theme thumbnails
+
+////////////////////////////////////////////////////////////
+// Helper Functions
+////////////////////////////////////////////////////////////
+
+/**
+ * Extract the default export from a module, handling different module formats
+ * Works with both eager and lazy-loaded modules from import.meta.glob
+ */
+export function getModuleDefault(module: any): any {
+   if (!module) return undefined;
+
+   // If module is a function (lazy-loaded), we'd need to await it, but with eager: true it should be resolved
+   if (typeof module === "function") {
+      // This shouldn't happen with eager: true, but handle it just in case
+      return undefined;
+   }
+
+   // Try .default first (standard ES module format)
+   if (typeof module === "object") {
+      // Check if it has .default property
+      if ("default" in module && module.default !== undefined) {
+         return module.default;
+      }
+      // If no .default but module has component-like properties (__name, etc.), maybe module itself is the component
+      if ("__name" in module || "name" in module || "setup" in module || "render" in module) {
+         return module;
+      }
+   }
+
+   // Fallback: return the module as-is
+   return module;
+}
+
+/**************************************************
+ * THEMES
+ **************************************************/
+export async function initialiseThemeRegistry(): Promise<void> {
+   // Clear existing registry
+   Object.keys(pageBuilderThemes.value).forEach((key) => {
+      delete pageBuilderThemes.value[key];
+   });
+
+   // Lazy load virtual modules to prevent initialization order issues
+   const { modules: themeModules } = await import("vue-wswg-editor:themes");
+
+   for (const [path, module] of Object.entries(themeModules)) {
+      let resolvedModule = module;
+      // If module is a function (lazy-loaded), call it to get the actual module
+      if (typeof module === "function") {
+         resolvedModule = await module();
+      }
+      const themeConfig = getModuleDefault(resolvedModule);
+      if (!themeConfig) continue;
+
+      // Extract theme ID from directory name containing theme.config.js
+      // Path format: "@page-builder/demo-theme/theme.config.js" -> theme ID is "demo-theme"
+      const pathParts = path.split("/");
+      // Remove the filename (theme.config.js) to get the directory path
+      const directoryPath = path.replace(/\/[^/]+\.config\.js$/, "");
+      // Get the directory name (second to last part of the path)
+      const themeId = pathParts[pathParts.length - 2];
+
+      if (!themeId) continue;
+
+      const theme: Theme = {
+         id: themeId,
+         path: directoryPath,
+         title: themeConfig.title || themeId,
+         description: themeConfig.description || "",
+         version: themeConfig.version || "1.0.0",
+         author: themeConfig.author || "",
+         authorWebsite: themeConfig.authorWebsite || "",
+         tags: themeConfig.tags || [],
+         license: themeConfig.license || "",
+      };
+
+      pageBuilderThemes.value[themeId] = theme;
+   }
+
+   // If there are no themes, throw an error
+   if (Object.keys(pageBuilderThemes.value).length === 0) {
+      console.error("[vue-wswg-editor:registry] No themes found");
+      return;
+   }
+}
+
+export function getThemes(): Theme[] {
+   return Object.values(pageBuilderThemes.value);
+}
+
+export function getActiveTheme(): Theme {
+   if (!activeThemeId.value) {
+      throw new Error("No active theme found");
+   }
+   return pageBuilderThemes.value[activeThemeId.value];
+}
+
+export async function setActiveTheme(themeId?: string): Promise<void> {
+   // If the themeID is not found, set the active theme ID to the first theme in the registry
+   if (!themeId || !pageBuilderThemes.value[themeId]) {
+      const firstThemeId = Object.keys(pageBuilderThemes.value)[0];
+      if (!firstThemeId) {
+         throw new Error("[vue-wswg-editor:registry] No themes found. Cannot set active theme.");
+      }
+      activeThemeId.value = firstThemeId;
+      console.warn(
+         `[vue-wswg-editor:registry] No theme found with ID: ${themeId}, setting active theme to: ${activeThemeId.value}`
+      );
+   } else {
+      activeThemeId.value = themeId;
+   }
+}
+
+/**************************************************
+ * THEME THUMBNAILS
+ **************************************************/
+async function initialiseThemeThumbnailsRegistry(): Promise<void> {
+   const { modules: thumbnailModules } = await import("vue-wswg-editor:thumbnails");
+   themeThumbnails = thumbnailModules;
+}
+
+export function getThemeThumbnail(themeDirectory: string): string | undefined {
+   if (!themeDirectory || !themeThumbnails) return undefined;
+
+   // Try thumbnail.jpg first, then fall back to thumbnail.png
+   const thumbnailPaths = [`${themeDirectory}/thumbnail.jpg`, `${themeDirectory}/thumbnail.png`];
+
+   for (const thumbnailPath of thumbnailPaths) {
+      const thumbnailModule = themeThumbnails[thumbnailPath];
+      if (thumbnailModule) {
+         try {
+            const thumbnailUrl = (thumbnailModule as any)?.default;
+            if (thumbnailUrl) {
+               return thumbnailUrl as string;
+            }
+         } catch {
+            // Silently continue to next format if this one fails
+            continue;
+         }
+      }
+   }
+
+   // Return undefined if no thumbnail found
+   return undefined;
+}
+
+/**************************************************
+ * LAYOUTS
+ **************************************************/
+export async function initialiseLayoutRegistry(): Promise<void> {
+   // Clear existing registry
+   Object.keys(themeLayouts.value).forEach((key) => {
+      delete themeLayouts.value[key];
+   });
+
+   // Get the active theme
+   const activeTheme = getActiveTheme();
+
+   // Use virtual module to load all layouts (scans all themes at build time)
+   // Then filter to only process layouts from the active theme
+   const { modules: layoutModules } = await import("vue-wswg-editor:layouts");
+
+   // Filter to only layouts from the active theme
+   const themeLayoutPath = `${activeTheme.path}/layout`;
+   const themeLayoutModules = Object.entries(layoutModules).filter(([path]) => path.startsWith(themeLayoutPath));
+
+   // Process only the active theme's layouts
+   for (const [, module] of themeLayoutModules) {
+      let resolvedModule = module;
+      // If module is a function (lazy-loaded), call it to get the actual module
+      if (typeof module === "function") {
+         resolvedModule = await module();
+      }
+      const layout = getModuleDefault(resolvedModule);
+      // exclude modules without name or label
+      if (!layout || !layout.label) {
+         continue;
+      }
+      // Mark layout component as raw to prevent Vue from making it reactive
+      themeLayouts.value[layout.__name] = markRaw(layout);
+   }
+   // If there are no layouts, warn
+   if (Object.keys(themeLayouts.value).length === 0) {
+      console.warn(`[vue-wswg-editor:registry] No layouts found for theme: ${activeTheme.id}`);
+      return;
+   }
+}
+
+export function getLayout(layoutType: string): Layout | undefined {
+   // Generate name variations and try to find a match
+   const nameVariations = generateNameVariations(layoutType);
+
+   for (const variation of nameVariations) {
+      const layout = themeLayouts.value[variation];
+      if (layout) {
+         return layout;
+      }
+   }
+
+   return undefined;
+}
+
+/**************************************************
+ * BLOCK FIELDS
+ **************************************************/
+async function initialiseBlockFieldsRegistry(): Promise<void> {
+   // Clear existing registry
+   Object.keys(themeBlockFields.value).forEach((key) => {
+      delete themeBlockFields.value[key];
+   });
+
+   // Get the active theme
+   const activeTheme = getActiveTheme();
+
+   // Use virtual module to load all block fields (scans all themes at build time)
+   // Then filter to only process block fields from the active theme
+   const { modules: blockFieldsModules } = await import("vue-wswg-editor:fields");
+
+   // Filter to only block fields from the active theme
+   const themeBlockFieldsPath = `${activeTheme.path}/blocks`;
+   const themeBlockFieldsModules = Object.entries(blockFieldsModules).filter(([path]) =>
+      path.startsWith(themeBlockFieldsPath)
+   );
+
+   // Process only the active theme's block fields
+   for (const [path, module] of themeBlockFieldsModules) {
+      let resolvedModule = module;
+      // If module is a function (lazy-loaded), call it to get the actual module
+      if (typeof module === "function") {
+         resolvedModule = await module();
+      }
+      const blockFields = getModuleDefault(resolvedModule);
+      // Mark block fields component as raw to prevent Vue from making it reactive
+      themeBlockFields.value[path] = markRaw(blockFields);
+   }
+}
+
+function getBlockFieldsFile(path: string): Record<string, EditorFieldConfig> {
+   const fieldsPath = `${path}/fields.ts`;
+   try {
+      // Generate path for fields.ts file
+      const blockField = themeBlockFields.value[fieldsPath];
+      if (blockField) {
+         return blockField;
+      }
+      return {};
+   } catch (error) {
+      console.error("Error getting block fields for block: ", fieldsPath, error);
+      return {};
+   }
+}
+
+/**************************************************
+ * BLOCKS
+ **************************************************/
+export async function initialiseBlockRegistry(): Promise<void> {
+   // Clear existing registry
+   Object.keys(themeBlocks.value).forEach((key) => {
+      delete themeBlocks.value[key];
+   });
+
+   // Get the active theme
+   const activeTheme = getActiveTheme();
+
+   // Use virtual module to load all layouts (scans all themes at build time)
+   // Then filter to only process layouts from the active theme
+   const { modules: blockModules } = await import("vue-wswg-editor:blocks");
+
+   // Filter to only layouts from the active theme
+   const themeBlockPath = `${activeTheme.path}/blocks`;
+   const themeBlockModules = Object.entries(blockModules).filter(([path]) => path.startsWith(themeBlockPath));
+
+   // Process only the active theme's layouts
+   for (const [path, module] of themeBlockModules) {
+      let resolvedModule = module;
+      // If module is a function (lazy-loaded), call it to get the actual module
+      if (typeof module === "function") {
+         resolvedModule = await module();
+      }
+      const blockModule = getModuleDefault(resolvedModule);
+      // exclude modules without name or label
+      if (!blockModule || !blockModule.__name) {
+         continue;
+      }
+
+      // Format the block
+      const blockType = toCamelCase(blockModule.type || blockModule.__name);
+      // Extract directory path from component path (e.g., "@page-builder/my-theme/blocks/hero-section/hero-section.vue" -> "@page-builder/my-theme/blocks/hero-section")
+      const directory = path.replace(/\/[^/]+\.vue$/, "");
+      // Mark the component itself as raw before spreading
+      const rawComponent = markRaw(blockModule);
+      const block: Block = {
+         fields: getBlockFieldsFile(directory), // Load the block fields file
+         ...rawComponent, // Component can override fields if defined directly
+         path: directory, // Path where the block component is located (e.g., "@page-builder/my-theme/blocks/hero-section")
+         type: blockType,
+      };
+
+      // Add the block to the registry
+      themeBlocks.value[blockType] = markRaw(block);
+   }
+   // If there are no blocks, warn
+   if (Object.keys(themeBlocks.value).length === 0) {
+      console.warn(`[vue-wswg-editor:registry] No blocks found for theme: ${activeTheme.id}`);
+      return;
+   }
+}
+
+export function getBlock(blockType: string): Block | undefined {
+   // Generate name variations and try to find a match
+   const nameVariations = generateNameVariations(blockType);
+
+   for (const variation of nameVariations) {
+      const block = themeBlocks.value[variation];
+      if (block) {
+         return block;
+      }
+   }
+
+   return undefined;
+}
+
+/**************************************************
+ * BLOCK THUMBNAILS
+ **************************************************/
+async function initialiseBlockThumbnailsRegistry(): Promise<void> {
+   const { modules: thumbnailModules } = await import("vue-wswg-editor:thumbnails");
+   blockThumbnails = thumbnailModules;
+}
+
+export function getBlockThumbnail(blockDirectory: string): string | undefined {
+   if (!blockDirectory || !blockThumbnails) return undefined;
+   const thumbnailPath = `${blockDirectory}/thumbnail.png`;
+   const thumbnailModule = blockThumbnails[thumbnailPath];
+   if (!thumbnailModule) return undefined;
+   return (thumbnailModule as any).default as string | undefined;
+}
+
+/**************************************************
+ * REGISTRY COMPOSERS
+ **************************************************/
+
+/** THEME BLOCK & FIELD REGISTRY */
+async function initialiseThemeSubRegistries(useEditingRegistry?: boolean): Promise<void> {
+   // Load the layouts that belong to the active theme
+   await initialiseLayoutRegistry();
+   // Load the additional theme fields and thumbnails if in edit mode
+   if (useEditingRegistry) {
+      await initialiseBlockFieldsRegistry();
+      await initialiseBlockThumbnailsRegistry();
+      await initialiseThemeThumbnailsRegistry();
+   }
+   // Load the blocks that belong to the active theme
+   await initialiseBlockRegistry();
+}
+
+/**
+ * Initialize the registry with a specific theme
+ * @param themeId - The theme ID to load blocks/layouts from
+ */
+export async function initialiseRegistry(themeId?: string, useEditingRegistry: boolean = true): Promise<void> {
+   try {
+      // First, initialize theme registry to discover all available themes
+      await initialiseThemeRegistry();
+
+      // Set the active theme ID
+      await setActiveTheme(themeId);
+
+      // Load the theme sub registries (layouts, blocks, fields)
+      await initialiseThemeSubRegistries(useEditingRegistry);
+   } catch (error) {
+      console.error("[vue-wswg-editor:registry] Error during registry initialization:", error);
+      throw error;
+   }
+}

package/src/util/validation.ts

@@ -1,25 +1,116 @@
 import type { EditorFieldConfig, ValidatorFunction } from "./fieldConfig";
-import { getBlockComponent, getLayoutFields } from "./registry";
+import { getBlock } from "./theme-registry";
+import { getLayoutFields } from "./registry";
 import { toNiceName } from "./helpers";
 
-export function validateField(value: any, fieldConfig: EditorFieldConfig) {
+export async function validateField(
+   value: any,
+   fieldConfig: EditorFieldConfig
+): Promise<boolean | string | ValidationResult> {
    // Create generic validator from field config properties (minLength, maxLength, etc.)
    const genericValidator = createGenericValidator(fieldConfig);
 
    // Combine generic validator with custom validator if provided
    const combinedValidator = combineValidators(genericValidator, fieldConfig.validator);
 
-   // If no validator exists, clear any error message
-   if (!combinedValidator) return true;
+   // Validate the field itself first
+   if (combinedValidator) {
+      const result = await combinedValidator(value);
+      if (result !== true) {
+         return result;
+      }
+   }
+
+   // Handle nested structures
+   // For repeater fields, validate each item's fields
+   if (fieldConfig.type === "repeater" && fieldConfig.repeaterFields && Array.isArray(value)) {
+      const nestedValidationResult: ValidationResult = {
+         title: fieldConfig.label || "Items",
+         isValid: true,
+         errors: {},
+      };
+
+      for (let i = 0; i < value.length; i++) {
+         const item = value[i];
+         if (!item) continue;
+
+         const itemValidationResult: ValidationResult = {
+            title: `Item ${i + 1}`,
+            isValid: true,
+            errors: {},
+         };
+
+         for (const fieldName of Object.keys(fieldConfig.repeaterFields)) {
+            const nestedFieldConfig: EditorFieldConfig | undefined = fieldConfig.repeaterFields[fieldName];
+            if (!nestedFieldConfig) continue;
+            const nestedValue = item[fieldName];
+            const nestedResult = await validateField(nestedValue, nestedFieldConfig);
+            if (nestedResult !== true) {
+               const fieldLabel = nestedFieldConfig.label || fieldName;
+               // If nested result is a ValidationResult, nest it; otherwise use as string
+               if (typeof nestedResult === "object" && "isValid" in nestedResult) {
+                  itemValidationResult.errors[fieldLabel] = nestedResult;
+               } else {
+                  itemValidationResult.errors[fieldLabel] = nestedResult;
+               }
+               itemValidationResult.isValid = false;
+            }
+         }
+
+         if (!itemValidationResult.isValid) {
+            nestedValidationResult.errors[`Item ${i + 1}`] = itemValidationResult;
+            nestedValidationResult.isValid = false;
+         }
+      }
+
+      if (!nestedValidationResult.isValid) {
+         return nestedValidationResult;
+      }
+   }
+
+   // For object fields, validate each nested field
+   if (
+      fieldConfig.type === "object" &&
+      fieldConfig.objectFields &&
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value)
+   ) {
+      const nestedValidationResult: ValidationResult = {
+         title: fieldConfig.label || "Object",
+         isValid: true,
+         errors: {},
+      };
+
+      for (const fieldName of Object.keys(fieldConfig.objectFields)) {
+         const nestedFieldConfig: EditorFieldConfig | undefined = fieldConfig.objectFields[fieldName];
+         if (!nestedFieldConfig) continue;
+         const nestedValue = value[fieldName];
+         const nestedResult = await validateField(nestedValue, nestedFieldConfig);
+         if (nestedResult !== true) {
+            const fieldLabel = nestedFieldConfig.label || fieldName;
+            // If nested result is a ValidationResult, nest it; otherwise use as string
+            if (typeof nestedResult === "object" && "isValid" in nestedResult) {
+               nestedValidationResult.errors[fieldLabel] = nestedResult;
+            } else {
+               nestedValidationResult.errors[fieldLabel] = nestedResult;
+            }
+            nestedValidationResult.isValid = false;
+         }
+      }
+
+      if (!nestedValidationResult.isValid) {
+         return nestedValidationResult;
+      }
+   }
 
-   // Validate the value
-   return combinedValidator(value);
+   return true;
 }
 
 export interface ValidationResult {
    title: string;
    isValid: boolean;
-   errors: Record<string, string | boolean>;
+   errors: Record<string, string | boolean | ValidationResult>;
 }
 
 /**
@@ -63,7 +154,7 @@ async function validateSettings(value: any, settingsKey: string = "settings"): P
       const fieldConfig = layoutOptions[field];
       if (!fieldConfig) continue;
       const result = await validateField(value[settingsKey][field], fieldConfig);
-      // If validation fails (returns false or a string), add to validation results
+      // If validation fails (returns false, string, or ValidationResult), add to validation results
       if (result !== true) {
          validationResult.errors[fieldConfig.label || field] = result;
          validationResult.isValid = false;
@@ -84,11 +175,11 @@ async function validateBlocks(value: any, blocksKey: string = "blocks"): Promise
       // Get the block type
       const blockType = block.type;
       // Get the block editor fields
-      const blockComponent = getBlockComponent(blockType);
+      const blockComponent = getBlock(blockType);
 
       // Add validation results entry for the section
       validationResults[blockType] = {
-         title: blockComponent.label || toNiceName(blockType),
+         title: blockComponent?.label || toNiceName(blockType),
          isValid: true,
          errors: {},
       };
@@ -104,7 +195,7 @@ async function validateBlocks(value: any, blocksKey: string = "blocks"): Promise
          if (!fieldConfig) continue;
          // Validate
          const result = await validateField(block[field], fieldConfig);
-         // If validation fails (returns false or a string), add to validation results
+         // If validation fails (returns false, string, or ValidationResult), add to validation results
          if (result !== true) {
             validationResults[blockType].errors[fieldConfig.label || field] = result;
             validationResults[blockType].isValid = false;

package/src/vite-plugin.ts

@@ -15,6 +15,7 @@ export function vueWswgEditorPlugin(options: VueWswgEditorPluginOptions): Plugin
       fields: "\0vue-wswg-editor:fields",
       layouts: "\0vue-wswg-editor:layouts",
       thumbnails: "\0vue-wswg-editor:thumbnails",
+      themes: "\0vue-wswg-editor:themes",
    };
 
    return {
@@ -41,6 +42,7 @@ export function vueWswgEditorPlugin(options: VueWswgEditorPluginOptions): Plugin
             "vue-wswg-editor:blocks",
             "vue-wswg-editor:fields",
             "vue-wswg-editor:thumbnails",
+            "vue-wswg-editor:themes",
          ];
          for (const item of itemsToExclude) {
             if (!exclude.includes(item)) {
@@ -90,13 +92,15 @@ export function vueWswgEditorPlugin(options: VueWswgEditorPluginOptions): Plugin
          // Using a more explicit format to ensure Vite processes it correctly
          switch (id) {
             case virtualModules.layouts:
-               return `export const modules = import.meta.glob("${options.rootDir}/layout/**/*.vue", { eager: true });`;
+               return `export const modules = import.meta.glob("${options.rootDir}/*/layout/**/*.vue", { eager: true });`;
             case virtualModules.blocks:
-               return `export const modules = import.meta.glob("${options.rootDir}/blocks/**/*.vue", { eager: true });`;
+               return `export const modules = import.meta.glob("${options.rootDir}/*/blocks/**/*.vue", { eager: true });`;
             case virtualModules.fields:
-               return `export const modules = import.meta.glob("${options.rootDir}/blocks/**/fields.ts", { eager: true });`;
+               return `export const modules = import.meta.glob("${options.rootDir}/*/blocks/**/fields.ts", { eager: true });`;
             case virtualModules.thumbnails:
-               return `export const modules = import.meta.glob("${options.rootDir}/blocks/**/thumbnail.png", { eager: true });`;
+               return `export const modules = import.meta.glob(["${options.rootDir}/*/blocks/**/thumbnail.png", "${options.rootDir}/*/thumbnail.jpg", "${options.rootDir}/*/thumbnail.png"], { eager: true });`;
+            case virtualModules.themes:
+               return `export const modules = import.meta.glob("${options.rootDir}/**/theme.config.js", { eager: true });`;
             default:
                return undefined;
          }

package/types/vue-wswg-editor.d.ts

@@ -159,3 +159,7 @@ declare module "vue-wswg-editor:fields" {
 declare module "vue-wswg-editor:thumbnails" {
    export const modules: Record<string, () => Promise<any>>;
 }
+
+declare module "vue-wswg-editor:themes" {
+   export const modules: Record<string, () => Promise<any>>;
+}

package/dist/types/components/PageRenderer/blockModules.d.ts

@@ -1,3 +0,0 @@
-import { type Component } from "vue";
-export declare function loadBlockModules(): Promise<Record<string, Component> | null>;
-export declare function getBlockModule(type: string): Component | undefined;

package/dist/types/components/PageRenderer/layoutModules.d.ts

@@ -1,3 +0,0 @@
-import { type Component } from "vue";
-export declare function loadLayoutModules(): Promise<Record<string, Component> | null>;
-export declare function getLayoutModule(type: string): Component | undefined;

package/src/components/PageRenderer/blockModules-alternative.ts.example

@@ -1,9 +0,0 @@
-// Alternative 1: Use relative paths instead of aliases
-// This works because the consuming app processes this file
-// The path is relative to where the consuming app's vite.config.ts is located
-// For participant/admin projects, this resolves to ../../page-builder/blocks/**/*.vue
-export const blockModules = import.meta.glob("../../page-builder/blocks/**/*.vue", { eager: true });
-
-// However, this is fragile because it depends on the file location relative to the consuming app
-// Better: Use a build-time script (see Alternative 2)
-

package/src/components/PageRenderer/blockModules-manual.ts.example

@@ -1,19 +0,0 @@
-// Alternative 4: Manual explicit imports
-// Most explicit, but requires updating when adding new blocks
-
-import HeroSection from "../../../../page-builder/blocks/hero-section/hero-section.vue";
-import CardsSection from "../../../../page-builder/blocks/cards-section/cards-section.vue";
-import FaqSection from "../../../../page-builder/blocks/faq-section/faq-section.vue";
-import FlexibleContent from "../../../../page-builder/blocks/flexible-content/flexible-content.vue";
-import TabsSection from "../../../../page-builder/blocks/tabs-section/tabs-section.vue";
-import TextSection from "../../../../page-builder/blocks/text-section/text-section.vue";
-
-export const blockModules = {
-   "hero-section": HeroSection,
-   "cards-section": CardsSection,
-   "faq-section": FaqSection,
-   "flexible-content": FlexibleContent,
-   "tabs-section": TabsSection,
-   "text-section": TextSection,
-};
-

package/src/components/PageRenderer/blockModules-runtime.ts.example

@@ -1,23 +0,0 @@
-// Alternative 3: Runtime registration pattern
-// Components register themselves when imported
-
-import { ref, type Ref } from "vue";
-import type { Component } from "vue";
-
-// Registry store
-export const blockRegistry: Ref<Record<string, Component>> = ref({});
-
-// Registration function
-export function registerBlock(type: string, component: Component) {
-   blockRegistry.value[type] = component;
-}
-
-// In each block component, add:
-// import { registerBlock } from "./blockModules-runtime";
-// registerBlock("hero-section", defineComponent({ ... }));
-
-// Then manually import blocks:
-// import "./blocks/hero-section/hero-section.vue";
-// import "./blocks/cards-section/cards-section.vue";
-// etc.
-