@bagelink/blox 1.5.13 → 1.5.17

package/dist/index.mjs

@@ -184,52 +184,128 @@ var Title_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PUR
 		};
 	}
 }), [["__scopeId", "data-v-ae0634d1"]]);
-const baseComponentConfigs = [
-	{
-		id: "Text",
-		label: "Text",
-		icon: "text_fields",
-		order: 10,
-		component: Text_default,
-		content: [{
-			type: "richtext",
-			key: "content",
-			label: "Content",
-			defaultValue: "<p>Enter your text here...</p>",
-			height: 200
-		}],
-		settings: [{
+const TextConfig = {
+	id: "Text",
+	label: "Text",
+	icon: "text_fields",
+	order: 10,
+	category: "basic",
+	component: Text_default,
+	content: [{
+		type: "richtext",
+		key: "content",
+		label: "Content",
+		defaultValue: "<p>Enter your text here...</p>",
+		height: 200
+	}],
+	settings: [{
+		type: "select",
+		key: "tag",
+		label: "HTML Tag",
+		defaultValue: "div",
+		options: [
+			{
+				label: "Div",
+				value: "div"
+			},
+			{
+				label: "Paragraph",
+				value: "p"
+			},
+			{
+				label: "Span",
+				value: "span"
+			},
+			{
+				label: "Article",
+				value: "article"
+			},
+			{
+				label: "Section",
+				value: "section"
+			}
+		]
+	}, {
+		type: "select",
+		key: "align",
+		label: "Text Alignment",
+		defaultValue: "left",
+		options: [
+			{
+				label: "Left",
+				value: "left"
+			},
+			{
+				label: "Center",
+				value: "center"
+			},
+			{
+				label: "Right",
+				value: "right"
+			},
+			{
+				label: "Justify",
+				value: "justify"
+			}
+		]
+	}]
+};
+const TitleConfig = {
+	id: "Title",
+	label: "Title",
+	icon: "title",
+	order: 5,
+	category: "basic",
+	component: Title_default,
+	content: [{
+		type: "text",
+		key: "title",
+		label: "Title",
+		defaultValue: "Your Title Here"
+	}, {
+		type: "text",
+		key: "subtitle",
+		label: "Subtitle",
+		defaultValue: ""
+	}],
+	settings: [
+		{
 			type: "select",
 			key: "tag",
-			label: "HTML Tag",
-			defaultValue: "div",
+			label: "Heading Tag",
+			defaultValue: "h2",
 			options: [
 				{
-					label: "Div",
-					value: "div"
+					label: "H1",
+					value: "h1"
 				},
 				{
-					label: "Paragraph",
-					value: "p"
+					label: "H2",
+					value: "h2"
 				},
 				{
-					label: "Span",
-					value: "span"
+					label: "H3",
+					value: "h3"
 				},
 				{
-					label: "Article",
-					value: "article"
+					label: "H4",
+					value: "h4"
 				},
 				{
-					label: "Section",
-					value: "section"
+					label: "H5",
+					value: "h5"
+				},
+				{
+					label: "H6",
+					value: "h6"
 				}
 			]
-		}, {
+		},
+		{
 			type: "select",
 			key: "align",
 			label: "Text Alignment",
-			defaultValue: "left",
+			defaultValue: "center",
 			options: [
 				{
 					label: "Left",
@@ -242,337 +318,273 @@ const baseComponentConfigs = [
 				{
 					label: "Right",
 					value: "right"
+				}
+			]
+		},
+		{
+			type: "number",
+			key: "size",
+			label: "Font Size (px)",
+			defaultValue: 32
+		}
+	]
+};
+const ButtonConfig = {
+	id: "Button",
+	label: "Button",
+	icon: "smart_button",
+	order: 15,
+	category: "basic",
+	component: Button_default,
+	content: [{
+		type: "text",
+		key: "btnTxt",
+		label: "Button Text",
+		defaultValue: "Click Me"
+	}, {
+		type: "text",
+		key: "btnUrl",
+		label: "Button URL",
+		defaultValue: "#"
+	}],
+	settings: [
+		{
+			type: "select",
+			key: "variant",
+			label: "Button Style",
+			defaultValue: "primary",
+			options: [
+				{
+					label: "Primary",
+					value: "primary"
+				},
+				{
+					label: "Secondary",
+					value: "secondary"
 				},
 				{
-					label: "Justify",
-					value: "justify"
+					label: "Outline",
+					value: "outline"
+				},
+				{
+					label: "Ghost",
+					value: "ghost"
 				}
 			]
-		}]
-	},
-	{
-		id: "Title",
-		label: "Title",
-		icon: "title",
-		order: 5,
-		component: Title_default,
-		content: [{
-			type: "text",
-			key: "title",
-			label: "Title",
-			defaultValue: "Your Title Here"
-		}, {
-			type: "text",
-			key: "subtitle",
-			label: "Subtitle",
-			defaultValue: ""
-		}],
-		settings: [
-			{
-				type: "select",
-				key: "tag",
-				label: "Heading Tag",
-				defaultValue: "h2",
-				options: [
-					{
-						label: "H1",
-						value: "h1"
-					},
-					{
-						label: "H2",
-						value: "h2"
-					},
-					{
-						label: "H3",
-						value: "h3"
-					},
-					{
-						label: "H4",
-						value: "h4"
-					},
-					{
-						label: "H5",
-						value: "h5"
-					},
-					{
-						label: "H6",
-						value: "h6"
-					}
-				]
-			},
-			{
-				type: "select",
-				key: "align",
-				label: "Text Alignment",
-				defaultValue: "center",
-				options: [
-					{
-						label: "Left",
-						value: "left"
-					},
-					{
-						label: "Center",
-						value: "center"
-					},
-					{
-						label: "Right",
-						value: "right"
-					}
-				]
-			},
-			{
-				type: "number",
-				key: "size",
-				label: "Font Size (px)",
-				defaultValue: 32
-			}
-		]
-	},
-	{
-		id: "Button",
-		label: "Button",
-		icon: "smart_button",
-		order: 15,
-		component: Button_default,
-		content: [{
-			type: "text",
-			key: "btnTxt",
-			label: "Button Text",
-			defaultValue: "Click Me"
-		}, {
-			type: "text",
-			key: "btnUrl",
-			label: "Button URL",
-			defaultValue: "#"
-		}],
-		settings: [
-			{
-				type: "select",
-				key: "variant",
-				label: "Button Style",
-				defaultValue: "primary",
-				options: [
-					{
-						label: "Primary",
-						value: "primary"
-					},
-					{
-						label: "Secondary",
-						value: "secondary"
-					},
-					{
-						label: "Outline",
-						value: "outline"
-					},
-					{
-						label: "Ghost",
-						value: "ghost"
-					}
-				]
-			},
-			{
-				type: "select",
-				key: "size",
-				label: "Size",
-				defaultValue: "md",
-				options: [
-					{
-						label: "Small",
-						value: "sm"
-					},
-					{
-						label: "Medium",
-						value: "md"
-					},
-					{
-						label: "Large",
-						value: "lg"
-					}
-				]
-			},
-			{
-				type: "select",
-				key: "align",
-				label: "Alignment",
-				defaultValue: "left",
-				options: [
-					{
-						label: "Left",
-						value: "left"
-					},
-					{
-						label: "Center",
-						value: "center"
-					},
-					{
-						label: "Right",
-						value: "right"
-					}
-				]
-			},
-			{
-				type: "checkbox",
-				key: "fullWidth",
-				label: "Full Width",
-				defaultValue: false
-			},
-			{
-				type: "select",
-				key: "btnTarget",
-				label: "Link Target",
-				defaultValue: "_self",
-				options: [{
-					label: "Same Window",
-					value: "_self"
-				}, {
-					label: "New Window",
-					value: "_blank"
-				}]
-			}
-		]
-	},
-	{
-		id: "Image",
-		label: "Image",
-		icon: "image",
-		order: 20,
-		component: Image_default,
-		content: [{
-			type: "upload",
-			key: "src",
-			label: "Image",
-			defaultValue: "",
-			height: 200
-		}, {
-			type: "text",
-			key: "alt",
-			label: "Alt Text",
-			defaultValue: ""
-		}],
-		settings: [
-			{
-				type: "select",
-				key: "objectFit",
-				label: "Object Fit",
-				defaultValue: "cover",
-				options: [
-					{
-						label: "Cover",
-						value: "cover"
-					},
-					{
-						label: "Contain",
-						value: "contain"
-					},
-					{
-						label: "Fill",
-						value: "fill"
-					},
-					{
-						label: "None",
-						value: "none"
-					},
-					{
-						label: "Scale Down",
-						value: "scale-down"
-					}
-				]
-			},
-			{
-				type: "number",
-				key: "maxWidth",
-				label: "Max Width (px)",
-				defaultValue: null
-			},
-			{
-				type: "number",
-				key: "height",
-				label: "Height (px)",
-				defaultValue: null
-			},
-			{
-				type: "select",
-				key: "align",
-				label: "Alignment",
-				defaultValue: "center",
-				options: [
-					{
-						label: "Left",
-						value: "left"
-					},
-					{
-						label: "Center",
-						value: "center"
-					},
-					{
-						label: "Right",
-						value: "right"
-					}
-				]
-			}
-		]
-	},
-	{
-		id: "Spacer",
-		label: "Spacer",
-		icon: "height",
-		order: 25,
-		component: Spacer_default,
-		content: [],
-		settings: [{
-			type: "number",
-			key: "height",
-			label: "Height (px)",
-			defaultValue: 40
-		}]
-	},
-	{
-		id: "Container",
-		label: "Container",
-		icon: "view_module",
-		order: 30,
-		component: Container_default,
-		content: [{
-			type: "richtext",
-			key: "content",
-			label: "Content",
-			defaultValue: "<p>Container content...</p>",
-			height: 200
-		}],
-		settings: [{
+		},
+		{
 			type: "select",
-			key: "maxWidth",
-			label: "Max Width",
-			defaultValue: "lg",
+			key: "size",
+			label: "Size",
+			defaultValue: "md",
 			options: [
 				{
-					label: "Small (640px)",
+					label: "Small",
 					value: "sm"
 				},
 				{
-					label: "Medium (768px)",
+					label: "Medium",
 					value: "md"
 				},
 				{
-					label: "Large (1024px)",
+					label: "Large",
 					value: "lg"
+				}
+			]
+		},
+		{
+			type: "select",
+			key: "align",
+			label: "Alignment",
+			defaultValue: "left",
+			options: [
+				{
+					label: "Left",
+					value: "left"
 				},
 				{
-					label: "Extra Large (1280px)",
-					value: "xl"
+					label: "Center",
+					value: "center"
 				},
 				{
-					label: "Full Width",
-					value: "full"
+					label: "Right",
+					value: "right"
 				}
 			]
-		}, {
+		},
+		{
 			type: "checkbox",
-			key: "centered",
-			label: "Center Content",
-			defaultValue: true
-		}]
-	}
+			key: "fullWidth",
+			label: "Full Width",
+			defaultValue: false
+		},
+		{
+			type: "select",
+			key: "btnTarget",
+			label: "Link Target",
+			defaultValue: "_self",
+			options: [{
+				label: "Same Window",
+				value: "_self"
+			}, {
+				label: "New Window",
+				value: "_blank"
+			}]
+		}
+	]
+};
+const ImageConfig = {
+	id: "Image",
+	label: "Image",
+	icon: "image",
+	order: 20,
+	category: "media",
+	component: Image_default,
+	content: [{
+		type: "upload",
+		key: "src",
+		label: "Image",
+		defaultValue: "",
+		height: 200
+	}, {
+		type: "text",
+		key: "alt",
+		label: "Alt Text",
+		defaultValue: ""
+	}],
+	settings: [
+		{
+			type: "select",
+			key: "objectFit",
+			label: "Object Fit",
+			defaultValue: "cover",
+			options: [
+				{
+					label: "Cover",
+					value: "cover"
+				},
+				{
+					label: "Contain",
+					value: "contain"
+				},
+				{
+					label: "Fill",
+					value: "fill"
+				},
+				{
+					label: "None",
+					value: "none"
+				},
+				{
+					label: "Scale Down",
+					value: "scale-down"
+				}
+			]
+		},
+		{
+			type: "number",
+			key: "maxWidth",
+			label: "Max Width (px)",
+			defaultValue: null
+		},
+		{
+			type: "number",
+			key: "height",
+			label: "Height (px)",
+			defaultValue: null
+		},
+		{
+			type: "select",
+			key: "align",
+			label: "Alignment",
+			defaultValue: "center",
+			options: [
+				{
+					label: "Left",
+					value: "left"
+				},
+				{
+					label: "Center",
+					value: "center"
+				},
+				{
+					label: "Right",
+					value: "right"
+				}
+			]
+		}
+	]
+};
+const SpacerConfig = {
+	id: "Spacer",
+	label: "Spacer",
+	icon: "height",
+	order: 25,
+	category: "layout",
+	component: Spacer_default,
+	content: [],
+	settings: [{
+		type: "number",
+		key: "height",
+		label: "Height (px)",
+		defaultValue: 40
+	}]
+};
+const ContainerConfig = {
+	id: "Container",
+	label: "Container",
+	icon: "view_module",
+	order: 30,
+	category: "layout",
+	component: Container_default,
+	content: [{
+		type: "richtext",
+		key: "content",
+		label: "Content",
+		defaultValue: "<p>Container content...</p>",
+		height: 200
+	}],
+	settings: [{
+		type: "select",
+		key: "maxWidth",
+		label: "Max Width",
+		defaultValue: "lg",
+		options: [
+			{
+				label: "Small (640px)",
+				value: "sm"
+			},
+			{
+				label: "Medium (768px)",
+				value: "md"
+			},
+			{
+				label: "Large (1024px)",
+				value: "lg"
+			},
+			{
+				label: "Extra Large (1280px)",
+				value: "xl"
+			},
+			{
+				label: "Full Width",
+				value: "full"
+			}
+		]
+	}, {
+		type: "checkbox",
+		key: "centered",
+		label: "Center Content",
+		defaultValue: true
+	}]
+};
+const baseComponentConfigs = [
+	TextConfig,
+	TitleConfig,
+	ButtonConfig,
+	ImageConfig,
+	SpacerConfig,
+	ContainerConfig
 ];
 function getBaseComponentConfigs() {
 	return baseComponentConfigs;
@@ -951,29 +963,6 @@ async function initializePage(pageData) {
 	injectCode(pageData.header_code, "head");
 	injectCode(pageData.body_code, "body");
 }
-function registerBaseComponents() {
-	const componentMap = {};
-	baseComponentConfigs.forEach((config) => {
-		componentMap[config.id] = config.component;
-	});
-	registerComponents(componentMap);
-	console.log("✅ Registered base components:", Object.keys(componentMap));
-}
-function getAllComponentConfigs(customConfigs = []) {
-	return [...baseComponentConfigs, ...customConfigs];
-}
-function createComponentConfig(config) {
-	return config;
-}
-function registerCustomComponent(config) {
-	registerComponent(config.id, config.component);
-	console.log(`✅ Registered custom component: ${config.id}`);
-}
-function registerCustomComponents(configs) {
-	configs.forEach((config) => {
-		registerCustomComponent(config);
-	});
-}
 function normalizeComponentData(data) {
 	const normalized = {};
 	const stringFields = [
@@ -1055,7 +1044,7 @@ var ExternalPreview_default = /* @__PURE__ */ __plugin_vue_export_helper_default
 		let bridge = null;
 		const registeredComponents = getAllComponents();
 		const getBlockStyles = computed(() => {
-			updateCounter.value;
+			console.log("updateCounter", updateCounter.value);
 			return (data, mobile = false) => generateBlockStyles(data, mobile);
 		});
 		function setFocus(id, emit = false) {
@@ -1211,7 +1200,7 @@ var ExternalPreview_default = /* @__PURE__ */ __plugin_vue_export_helper_default
 			}), 128))]);
 		};
 	}
-}), [["__scopeId", "data-v-8110f424"]]);
+}), [["__scopeId", "data-v-2fc74f90"]]);
 var _hoisted_1 = { class: "blox-page-wrapper" };
 var _hoisted_2 = {
 	key: 0,
@@ -1235,7 +1224,7 @@ var RenderPage_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @
 		const updateCounter = ref(0);
 		const registeredComponents = getAllComponents();
 		const getBlockStyles = computed(() => {
-			updateCounter.value;
+			console.log("updateCounter", updateCounter.value);
 			return (data, mobile = false) => generateBlockStyles(data, mobile);
 		});
 		function updateMobileStatus() {
@@ -1268,5 +1257,197 @@ var RenderPage_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @
 			}), 128))]);
 		};
 	}
-}), [["__scopeId", "data-v-1a340b1b"]]);
-export { Button_default as Button, CommunicationBridge, Container_default as Container, ExternalPreview_default as ExternalPreview, Image_default as Image, RenderPage_default as RenderPage, Spacer_default as Spacer, Text_default as Text, Title_default as Title, applyGlobalFont, applyPageSettings, baseComponentConfigs, clearRegistry, createCommunicationBridge, createComponentConfig, createNamespacedRegistry, deepClone, deepMerge, generateBlockStyles, getAllComponentConfigs, getAllComponents, getBaseComponentConfig, getBaseComponentConfigs, getComponent, getRegisteredTypes, getResponsiveCSS, getResponsiveClasses, hasComponent, initializePage, injectCode, injectResponsiveCSS, loadComponentFonts, loadGoogleFont, normalizeComponentData, registerBaseComponents, registerComponent, registerComponents, registerCustomComponent, registerCustomComponents, registry, sendMessage, unregisterComponent };
+}), [["__scopeId", "data-v-bd9da6cc"]]);
+var ComponentValidationError = class extends Error {
+	constructor(message, componentId) {
+		super(message);
+		this.componentId = componentId;
+		this.name = "ComponentValidationError";
+	}
+};
+function validateComponentConfig(config) {
+	const errors = [];
+	if (!config.id || typeof config.id !== "string") errors.push("Component must have a valid \"id\" (string)");
+	if (!config.label || typeof config.label !== "string") errors.push("Component must have a valid \"label\" (string)");
+	if (!config.component) errors.push("Component must have a \"component\" property (Vue component or async function)");
+	if (config.component && typeof config.component !== "function" && typeof config.component !== "object") errors.push("Component \"component\" must be a Vue component or async function");
+	if (config.content && !Array.isArray(config.content)) errors.push("Component \"content\" must be an array");
+	if (config.settings && !Array.isArray(config.settings)) errors.push("Component \"settings\" must be an array");
+	if (errors.length > 0) throw new ComponentValidationError(`Invalid component configuration for "${config.id || "unknown"}":\n${errors.map((e) => `  - ${e}`).join("\n")}`, config.id);
+}
+function levenshteinDistance(a, b) {
+	const matrix = [];
+	for (let i = 0; i <= b.length; i++) matrix[i] = [i];
+	for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
+	for (let i = 1; i <= b.length; i++) for (let j = 1; j <= a.length; j++) if (b.charAt(i - 1) === a.charAt(j - 1)) matrix[i][j] = matrix[i - 1][j - 1];
+	else matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j] + 1);
+	return matrix[b.length][a.length];
+}
+function findSimilarIds(targetId, allIds, maxSuggestions = 3) {
+	return allIds.map((id) => ({
+		id,
+		distance: levenshteinDistance(targetId.toLowerCase(), id.toLowerCase())
+	})).filter((item) => item.distance <= 3).sort((a, b) => a.distance - b.distance).slice(0, maxSuggestions).map((item) => item.id);
+}
+function createMissingComponentError(id, registeredIds) {
+	const suggestions = findSimilarIds(id, registeredIds);
+	let message = `Component "${id}" is not registered.`;
+	if (suggestions.length > 0) message += `\n\nDid you mean: ${suggestions.map((s) => `"${s}"`).join(", ")}?`;
+	message += `\n\nAvailable components: ${registeredIds.join(", ")}`;
+	return new Error(message);
+}
+function createBlox(options = {}) {
+	const { debug = false, autoRegisterBaseComponents = true } = options;
+	const registeredConfigs = [];
+	let hasRegisteredBaseComponents = false;
+	const log = (...args) => {
+		if (debug) console.log("[Blox]", ...args);
+	};
+	const instance = {
+		registerComponents(components, registerOptions = {}) {
+			const { category, skipValidation = false } = registerOptions;
+			const configs = Array.isArray(components) ? components : [components];
+			if (!hasRegisteredBaseComponents && autoRegisterBaseComponents) {
+				const componentMap = {};
+				baseComponentConfigs.forEach((config) => {
+					componentMap[config.id] = config.component;
+					registeredConfigs.push(config);
+				});
+				registerComponents(componentMap);
+				hasRegisteredBaseComponents = true;
+				log("Registered base components:", Object.keys(componentMap));
+				if (!debug) console.log("✅ Registered base components:", Object.keys(componentMap));
+			}
+			configs.forEach((config) => {
+				if (!skipValidation) try {
+					validateComponentConfig(config);
+				} catch (error) {
+					if (error instanceof ComponentValidationError) {
+						console.error("❌ Component validation failed:");
+						console.error(error.message);
+						if (debug) console.error("Component config:", config);
+						throw error;
+					}
+					throw error;
+				}
+				const finalConfig = category ? {
+					...config,
+					category
+				} : config;
+				if (registeredConfigs.some((c) => c.id === finalConfig.id)) {
+					const msg = `Component "${finalConfig.id}" is already registered. Overwriting...`;
+					console.warn(`⚠️  ${msg}`);
+					const index = registeredConfigs.findIndex((c) => c.id === finalConfig.id);
+					registeredConfigs.splice(index, 1);
+				}
+				registerComponent(finalConfig.id, finalConfig.component);
+				registeredConfigs.push(finalConfig);
+				const categoryMsg = finalConfig.category ? ` (${finalConfig.category})` : "";
+				log(`Registered component: ${finalConfig.id}${categoryMsg}`);
+				if (!debug) console.log(`✅ Registered component: ${finalConfig.id}${categoryMsg}`);
+			});
+			return instance;
+		},
+		registerRoutes(router, routeOptions = {}) {
+			const { basePath = "/blox", previewPath = "/preview/:pageId?", renderPath = "/render/:pageId?", meta = {} } = routeOptions;
+			router.addRoute({
+				path: `${basePath}${previewPath}`,
+				name: "blox-preview",
+				component: ExternalPreview_default,
+				meta: {
+					blox: true,
+					...meta
+				}
+			});
+			router.addRoute({
+				path: `${basePath}${renderPath}`,
+				name: "blox-render",
+				component: RenderPage_default,
+				meta: {
+					blox: true,
+					...meta
+				}
+			});
+			const routes = {
+				preview: `${basePath}${previewPath}`,
+				render: `${basePath}${renderPath}`
+			};
+			log("Registered Blox routes:", routes);
+			if (!debug) console.log("✅ Registered Blox routes:", routes);
+			return instance;
+		},
+		getRegisteredComponents() {
+			return [...registeredConfigs];
+		},
+		getComponentsByCategory(category) {
+			return registeredConfigs.filter((config) => config.category === category);
+		},
+		getComponentIds() {
+			return registeredConfigs.map((config) => config.id);
+		},
+		hasComponent(id) {
+			return registeredConfigs.some((config) => config.id === id);
+		},
+		install(app) {
+			app.config.globalProperties.$blox = {
+				configs: registeredConfigs,
+				getComponent: (id) => {
+					const config = registeredConfigs.find((c) => c.id === id);
+					if (!config && debug) {
+						const error = createMissingComponentError(id, this.getComponentIds());
+						console.error(error.message);
+					}
+					return config;
+				},
+				getComponentsByCategory: (category) => this.getComponentsByCategory(category),
+				hasComponent: (id) => registeredConfigs.some((c) => c.id === id)
+			};
+			app.provide("blox", {
+				configs: registeredConfigs,
+				getComponent: (id) => {
+					const config = registeredConfigs.find((c) => c.id === id);
+					if (!config && debug) {
+						const error = createMissingComponentError(id, this.getComponentIds());
+						console.error(error.message);
+					}
+					return config;
+				},
+				getComponentsByCategory: (category) => this.getComponentsByCategory(category),
+				hasComponent: (id) => registeredConfigs.some((c) => c.id === id)
+			});
+			log("Blox plugin installed with", registeredConfigs.length, "components");
+			if (!debug) console.log("✅ Blox plugin installed");
+			if (debug) {
+				console.log("[Blox] Registered components:", this.getComponentIds());
+				const categories = [...new Set(registeredConfigs.map((c) => c.category).filter((cat) => Boolean(cat)))];
+				console.log("[Blox] Categories:", categories);
+				console.log("[Blox] Debug mode enabled");
+			}
+		}
+	};
+	return instance;
+}
+function createComponentConfig(config) {
+	return config;
+}
+function getAllComponentConfigs(customConfigs = []) {
+	return [...baseComponentConfigs, ...customConfigs];
+}
+function registerBaseComponents() {
+	const componentMap = {};
+	baseComponentConfigs.forEach((config) => {
+		componentMap[config.id] = config.component;
+	});
+	registerComponents(componentMap);
+	console.log("✅ Registered base components:", Object.keys(componentMap));
+}
+function registerCustomComponent(config) {
+	registerComponent(config.id, config.component);
+	console.log(`✅ Registered custom component: ${config.id}`);
+}
+function registerCustomComponents(configs) {
+	configs.forEach((config) => {
+		registerCustomComponent(config);
+	});
+}
+export { Button_default as Button, ButtonConfig, CommunicationBridge, ComponentValidationError, Container_default as Container, ContainerConfig, ExternalPreview_default as ExternalPreview, Image_default as Image, ImageConfig, RenderPage_default as RenderPage, Spacer_default as Spacer, SpacerConfig, Text_default as Text, TextConfig, Title_default as Title, TitleConfig, applyGlobalFont, applyPageSettings, baseComponentConfigs, clearRegistry, createBlox, createCommunicationBridge, createComponentConfig, createNamespacedRegistry, deepClone, deepMerge, generateBlockStyles, getAllComponentConfigs, getAllComponents, getBaseComponentConfig, getBaseComponentConfigs, getComponent, getRegisteredTypes, getResponsiveCSS, getResponsiveClasses, hasComponent, initializePage, injectCode, injectResponsiveCSS, loadComponentFonts, loadGoogleFont, normalizeComponentData, registerBaseComponents, registerComponent, registerComponents, registerCustomComponent, registerCustomComponents, registry, sendMessage, unregisterComponent };