@bagelink/blox 1.5.15 → 1.5.17

package/dist/index.cjs

@@ -189,52 +189,128 @@ var Title_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.
 	}
 });
 var Title_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Title_vue_vue_type_script_setup_true_lang_default, [["__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",
@@ -247,337 +323,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;
@@ -956,29 +968,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 = [
@@ -1060,7 +1049,7 @@ var ExternalPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		let bridge = null;
 		const registeredComponents = getAllComponents();
 		const getBlockStyles = (0, vue.computed)(() => {
-			updateCounter.value;
+			console.log("updateCounter", updateCounter.value);
 			return (data, mobile = false) => generateBlockStyles(data, mobile);
 		});
 		function setFocus(id, emit = false) {
@@ -1217,7 +1206,7 @@ var ExternalPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		};
 	}
 });
-var ExternalPreview_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ExternalPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8110f424"]]);
+var ExternalPreview_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ExternalPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2fc74f90"]]);
 var _hoisted_1 = { class: "blox-page-wrapper" };
 var _hoisted_2 = {
 	key: 0,
@@ -1241,7 +1230,7 @@ var RenderPage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		const updateCounter = (0, vue.ref)(0);
 		const registeredComponents = getAllComponents();
 		const getBlockStyles = (0, vue.computed)(() => {
-			updateCounter.value;
+			console.log("updateCounter", updateCounter.value);
 			return (data, mobile = false) => generateBlockStyles(data, mobile);
 		});
 		function updateMobileStatus() {
@@ -1275,20 +1264,220 @@ var RenderPage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0,
 		};
 	}
 });
-var RenderPage_default = /* @__PURE__ */ __plugin_vue_export_helper_default(RenderPage_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1a340b1b"]]);
+var RenderPage_default = /* @__PURE__ */ __plugin_vue_export_helper_default(RenderPage_vue_vue_type_script_setup_true_lang_default, [["__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);
+	});
+}
 exports.Button = Button_default;
+exports.ButtonConfig = ButtonConfig;
 exports.CommunicationBridge = CommunicationBridge;
+exports.ComponentValidationError = ComponentValidationError;
 exports.Container = Container_default;
+exports.ContainerConfig = ContainerConfig;
 exports.ExternalPreview = ExternalPreview_default;
 exports.Image = Image_default;
+exports.ImageConfig = ImageConfig;
 exports.RenderPage = RenderPage_default;
 exports.Spacer = Spacer_default;
+exports.SpacerConfig = SpacerConfig;
 exports.Text = Text_default;
+exports.TextConfig = TextConfig;
 exports.Title = Title_default;
+exports.TitleConfig = TitleConfig;
 exports.applyGlobalFont = applyGlobalFont;
 exports.applyPageSettings = applyPageSettings;
 exports.baseComponentConfigs = baseComponentConfigs;
 exports.clearRegistry = clearRegistry;
+exports.createBlox = createBlox;
 exports.createCommunicationBridge = createCommunicationBridge;
 exports.createComponentConfig = createComponentConfig;
 exports.createNamespacedRegistry = createNamespacedRegistry;