@bagelink/blox 1.5.3

package/dist/index.cjs

@@ -0,0 +1,1305 @@
+let vue = require("vue");
+var _hoisted_1$4 = [
+	"href",
+	"target",
+	"rel"
+];
+var Button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Button",
+	props: {
+		btnTxt: { default: "Click Me" },
+		btnUrl: { default: "#" },
+		btnTarget: { default: "_self" },
+		variant: { default: "primary" },
+		size: { default: "md" },
+		align: { default: "left" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		isMobile: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		function handleClick(e) {
+			console.log("Button clicked:", props.btnTxt);
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(`button-wrapper align-${_ctx.align}`) }, [(0, vue.createElementVNode)("a", {
+				href: _ctx.btnUrl,
+				target: _ctx.btnTarget,
+				rel: _ctx.btnTarget === "_blank" ? "noopener noreferrer" : void 0,
+				class: (0, vue.normalizeClass)(["btn", [
+					`btn-${_ctx.variant}`,
+					`btn-${_ctx.size}`,
+					{ "btn-full-width": _ctx.fullWidth }
+				]]),
+				onClick: handleClick
+			}, (0, vue.toDisplayString)(_ctx.btnTxt), 11, _hoisted_1$4)], 2);
+		};
+	}
+});
+var __plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+var Button_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Button_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-04e758bb"]]);
+var Container_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Container",
+	props: {
+		maxWidth: { default: 1200 },
+		padding: { default: 20 },
+		gap: { default: 16 },
+		layout: { default: "vertical" },
+		columns: { default: 3 },
+		isMobile: { type: Boolean }
+	},
+	setup(__props) {
+		(0, vue.useCssVars)((_ctx) => ({ "6936d1aa": _ctx.columns }));
+		const props = __props;
+		const containerStyle = {
+			maxWidth: typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth,
+			padding: typeof props.padding === "number" ? `${props.padding}px` : props.padding,
+			gap: `${props.gap}px`
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(["container", [`layout-${_ctx.layout}`]]),
+				style: containerStyle
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, void 0, true)], 2);
+		};
+	}
+});
+var Container_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Container_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-144084df"]]);
+var _hoisted_1$3 = { class: "image-wrapper" };
+var _hoisted_2$2 = [
+	"href",
+	"target",
+	"rel"
+];
+var _hoisted_3$2 = ["src", "alt"];
+var _hoisted_4$2 = ["src", "alt"];
+var _hoisted_5$1 = {
+	key: 2,
+	class: "image-caption"
+};
+var Image_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Image",
+	props: {
+		src: { default: "" },
+		alt: { default: "" },
+		caption: { default: "" },
+		link: { default: "" },
+		linkTarget: { default: "_self" },
+		objectFit: { default: "cover" },
+		aspectRatio: { default: "auto" },
+		isMobile: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		const imageStyle = {
+			objectFit: props.objectFit,
+			aspectRatio: props.aspectRatio
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("figure", _hoisted_1$3, [_ctx.link ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("a", {
+				key: 0,
+				href: _ctx.link,
+				target: _ctx.linkTarget,
+				rel: _ctx.linkTarget === "_blank" ? "noopener noreferrer" : void 0,
+				class: "image-link"
+			}, [(0, vue.createElementVNode)("img", {
+				src: _ctx.src,
+				alt: _ctx.alt,
+				style: imageStyle,
+				class: "image"
+			}, null, 8, _hoisted_3$2)], 8, _hoisted_2$2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("img", {
+				key: 1,
+				src: _ctx.src,
+				alt: _ctx.alt,
+				style: imageStyle,
+				class: "image"
+			}, null, 8, _hoisted_4$2)), _ctx.caption ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("figcaption", _hoisted_5$1, (0, vue.toDisplayString)(_ctx.caption), 1)) : (0, vue.createCommentVNode)("", true)]);
+		};
+	}
+});
+var Image_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Image_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-dcfd7570"]]);
+var Spacer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Spacer",
+	props: {
+		height: { default: 40 },
+		heightMobile: { default: void 0 },
+		isMobile: { type: Boolean }
+	},
+	setup(__props) {
+		const props = __props;
+		function computedHeight() {
+			const h = props.isMobile && props.heightMobile ? props.heightMobile : props.height;
+			return typeof h === "number" ? `${h}px` : h;
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: "spacer",
+				style: (0, vue.normalizeStyle)({ height: computedHeight() })
+			}, null, 4);
+		};
+	}
+});
+var Spacer_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Spacer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-73a7e941"]]);
+var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Text",
+	props: {
+		content: { default: "" },
+		tag: { default: "div" },
+		align: { default: "left" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.tag), {
+				class: (0, vue.normalizeClass)(`text-align-${_ctx.align}`),
+				innerHTML: _ctx.content
+			}, null, 8, ["class", "innerHTML"]);
+		};
+	}
+});
+var Text_default = /* @__PURE__ */ __plugin_vue_export_helper_default(Text_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a6173468"]]);
+var _hoisted_1$2 = {
+	key: 1,
+	class: "subtitle"
+};
+var Title_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "Title",
+	props: {
+		title: { default: "" },
+		subTitle: { default: "" },
+		tag: { default: "h2" },
+		align: { default: "left" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(`title-wrapper text-align-${_ctx.align}`) }, [_ctx.title ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(_ctx.tag), {
+				key: 0,
+				class: "title"
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(_ctx.title), 1)]),
+				_: 1
+			})) : (0, vue.createCommentVNode)("", true), _ctx.subTitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_1$2, (0, vue.toDisplayString)(_ctx.subTitle), 1)) : (0, vue.createCommentVNode)("", true)], 2);
+		};
+	}
+});
+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: [{
+			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"
+				}
+			]
+		}]
+	},
+	{
+		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",
+			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
+		}]
+	}
+];
+function getBaseComponentConfigs() {
+	return baseComponentConfigs;
+}
+function getBaseComponentConfig(id) {
+	return baseComponentConfigs.find((config) => config.id === id);
+}
+var CommunicationBridge = class {
+	origin;
+	targetWindow;
+	handlers;
+	boundMessageHandler;
+	constructor(config) {
+		this.origin = config.origin;
+		this.targetWindow = config.targetWindow || window.parent;
+		this.handlers = /* @__PURE__ */ new Map();
+		this.boundMessageHandler = this.handleMessage.bind(this);
+		window.addEventListener("message", this.boundMessageHandler);
+		console.log(`🌉 Communication bridge initialized for origin: ${this.origin}`);
+	}
+	handleMessage(event) {
+		if (this.origin !== "*" && event.origin !== this.origin) {
+			console.warn(`⚠️ Rejected message from unauthorized origin: ${event.origin}`);
+			return;
+		}
+		const { type, message, data, isMobile } = event.data;
+		if (!type) return;
+		console.log(`📨 Received message: ${type}`, {
+			message,
+			data,
+			isMobile
+		});
+		const typeHandlers = this.handlers.get(type);
+		if (typeHandlers) typeHandlers.forEach((handler) => {
+			try {
+				handler({
+					type,
+					message,
+					data,
+					isMobile
+				});
+			} catch (error) {
+				console.error(`Error in handler for ${type}:`, error);
+			}
+		});
+		const globalHandlers = this.handlers.get("*");
+		if (globalHandlers) globalHandlers.forEach((handler) => {
+			try {
+				handler({
+					type,
+					message,
+					data,
+					isMobile
+				});
+			} catch (error) {
+				console.error("Error in global handler:", error);
+			}
+		});
+	}
+	on(type, handler) {
+		if (!this.handlers.has(type)) this.handlers.set(type, /* @__PURE__ */ new Set());
+		this.handlers.get(type).add(handler);
+		return () => {
+			this.off(type, handler);
+		};
+	}
+	off(type, handler) {
+		const typeHandlers = this.handlers.get(type);
+		if (typeHandlers) typeHandlers.delete(handler);
+	}
+	send(type, message, data) {
+		const payload = {
+			type,
+			message,
+			data
+		};
+		this.targetWindow.postMessage(payload, this.origin === "*" ? "*" : this.origin);
+		console.log(`📤 Sent message: ${type}`, payload);
+	}
+	destroy() {
+		window.removeEventListener("message", this.boundMessageHandler);
+		this.handlers.clear();
+		console.log("🧹 Communication bridge destroyed");
+	}
+};
+function createCommunicationBridge(config) {
+	return new CommunicationBridge(config);
+}
+function sendMessage(type, message, targetWindow = window.parent, origin = "*") {
+	const payload = {
+		type,
+		message
+	};
+	targetWindow.postMessage(payload, origin);
+}
+var registry = {};
+function registerComponent(type, component) {
+	if (registry[type]) console.warn(`Component "${type}" is already registered. Overwriting...`);
+	registry[type] = component;
+	console.log(`✅ Registered component: ${type}`);
+}
+function registerComponents(components) {
+	Object.entries(components).forEach(([type, component]) => {
+		registerComponent(type, component);
+	});
+}
+function getComponent(type) {
+	return registry[type];
+}
+function hasComponent(type) {
+	return type in registry;
+}
+function getAllComponents() {
+	return { ...registry };
+}
+function unregisterComponent(type) {
+	delete registry[type];
+	console.log(`❌ Unregistered component: ${type}`);
+}
+function clearRegistry() {
+	Object.keys(registry).forEach((key) => delete registry[key]);
+	console.log("🗑️ Registry cleared");
+}
+function getRegisteredTypes() {
+	return Object.keys(registry);
+}
+function createNamespacedRegistry(namespace) {
+	const namespacedRegistry = {};
+	return {
+		register: (type, component) => {
+			const key = `${namespace}:${type}`;
+			namespacedRegistry[key] = component;
+			registry[key] = component;
+		},
+		get: (type) => {
+			return namespacedRegistry[`${namespace}:${type}`];
+		},
+		getAll: () => ({ ...namespacedRegistry })
+	};
+}
+function generateBlockStyles(data, isMobile = false) {
+	const styles = {};
+	function toNumber(v) {
+		if (v === void 0 || v === null || v === "") return null;
+		const n = Number(v);
+		return Number.isNaN(n) ? null : n;
+	}
+	function getValue(desktopKey, mobileKey) {
+		if (isMobile && data[mobileKey] !== void 0 && data[mobileKey] !== null) return data[mobileKey];
+		return data[desktopKey];
+	}
+	const mTop = toNumber(getValue("marginTop", "marginTopMobile"));
+	const mBottom = toNumber(getValue("marginBottom", "marginBottomMobile"));
+	const pad = toNumber(getValue("padding", "paddingMobile"));
+	if (mTop !== null) {
+		styles["margin-top"] = `${mTop}rem`;
+		styles["--margin-top"] = `${mTop}rem`;
+	} else styles["--margin-top"] = "0rem";
+	if (mBottom !== null) {
+		styles["margin-bottom"] = `${mBottom}rem`;
+		styles["--margin-bottom"] = `${mBottom}rem`;
+	} else styles["--margin-bottom"] = "0rem";
+	if (pad !== null) {
+		styles.padding = `${pad}rem`;
+		styles["--block-padding"] = `${pad}rem`;
+	}
+	const wDesktop = toNumber(data.width);
+	const wMobile = toNumber(data.widthMobile);
+	const wPercentDesktop = toNumber(data.widthPercent) || 96;
+	const wPercentMobile = toNumber(data.widthPercentMobile) || wPercentDesktop;
+	const fullWidthDesktop = data.fullWidth;
+	styles["--max-width-desktop"] = wDesktop !== null ? `${wDesktop}px` : "800px";
+	styles["--max-width-mobile"] = wMobile !== null ? `${wMobile}px` : wDesktop !== null ? `${wDesktop}px` : "800px";
+	styles["--width-percent-desktop"] = `${wPercentDesktop}%`;
+	styles["--width-percent-mobile"] = `${wPercentMobile}%`;
+	if (!(fullWidthDesktop === true || fullWidthDesktop === "true") && wDesktop !== null) {
+		styles["margin-left"] = "auto";
+		styles["margin-right"] = "auto";
+	}
+	const borderW = toNumber(getValue("borderWidth", "borderWidthMobile"));
+	if (borderW !== null && borderW > 0) {
+		styles["border-width"] = `${borderW}px`;
+		styles["border-style"] = getValue("borderStyle", "borderStyleMobile") || "solid";
+		const borderColor = getValue("borderColor", "borderColorMobile");
+		if (borderColor) styles["border-color"] = borderColor;
+	}
+	const isCenter = getValue("center", "centerMobile");
+	if (isCenter === true || isCenter === "true") styles["text-align"] = "center";
+	const borderR = toNumber(getValue("borderRadius", "borderRadiusMobile"));
+	if (borderR !== null) styles["border-radius"] = `${borderR}px`;
+	const bgColorDesktop = data.backgroundColor;
+	const bgColorMobile = data.backgroundColorMobile;
+	const textColorDesktop = data.textColor;
+	const { textColorMobile } = data;
+	if (bgColorDesktop) styles["--bg-color-desktop"] = bgColorDesktop;
+	if (bgColorMobile) styles["--bg-color-mobile"] = bgColorMobile;
+	if (textColorDesktop) styles["--text-color-desktop"] = textColorDesktop;
+	if (textColorMobile) styles["--text-color-mobile"] = textColorMobile;
+	const shadowMap = {
+		none: "none",
+		sm: "0 0 10px 0 rgba(0, 0, 0, 0.05)",
+		md: "0 0 20px 0 rgba(0, 0, 0, 0.15)",
+		lg: "0 0 30px 0 rgba(0, 0, 0, 0.15)",
+		xl: "0 0 40px 0 rgba(0, 0, 0, 0.5)",
+		custom: "0 4px 6px -1px rgba(0, 0, 0, 0.15)"
+	};
+	const shadowType = getValue("shadowType", "shadowTypeMobile");
+	if (shadowType && shadowType !== "none") styles["box-shadow"] = shadowMap[shadowType] || shadowMap.md;
+	const z = toNumber(getValue("zIndex", "zIndexMobile"));
+	if (z !== null && z > 0) {
+		styles.position = "relative";
+		styles["z-index"] = z.toString();
+	}
+	if (!isMobile && data.showDesktop === false) styles.display = "none";
+	else if (isMobile && data.showMobile === false) styles.display = "none";
+	const fontFamilyDesktop = data.fontFamily;
+	const { fontFamilyMobile } = data;
+	if (isMobile && fontFamilyMobile && fontFamilyMobile.trim() !== "") styles["font-family"] = `"${fontFamilyMobile}", sans-serif`;
+	else if (fontFamilyDesktop && fontFamilyDesktop.trim() !== "") styles["font-family"] = `"${fontFamilyDesktop}", sans-serif`;
+	if (data.customCSS) try {
+		data.customCSS.split(";").filter((rule) => rule.trim()).map((rule) => rule.trim().split(":")).filter((parts) => parts.length === 2).forEach(([property, value]) => {
+			const prop = property.trim();
+			const val = value.trim();
+			if (prop && val) styles[prop] = val;
+		});
+	} catch (e) {
+		console.warn("Invalid custom CSS:", data.customCSS);
+	}
+	return styles;
+}
+function getResponsiveClasses(data) {
+	const classes = ["blox-block", "responsive-colors"];
+	const effectiveDesktopFullWidth = Boolean(data.fullWidth);
+	const effectiveMobileFullWidth = data.fullWidthMobile !== null ? Boolean(data.fullWidthMobile) : effectiveDesktopFullWidth;
+	if (effectiveDesktopFullWidth) classes.push("full-width-desktop");
+	if (effectiveMobileFullWidth) classes.push("full-width-mobile");
+	return classes;
+}
+function getResponsiveCSS() {
+	return `
+		/* Blox Responsive System */
+		.responsive-colors {
+			color: var(--text-color-desktop, inherit);
+			background-color: var(--bg-color-desktop, transparent);
+			margin-inline: auto;
+			max-width: var(--max-width-desktop, 800px);
+			width: var(--width-percent-desktop, 96%);
+		}
+
+		.responsive-colors.full-width-desktop {
+			width: 100% !important;
+			max-width: none !important;
+		}
+
+		@media (max-width: 910px) {
+			.responsive-colors {
+				color: var(--text-color-mobile, var(--text-color-desktop, inherit));
+				background-color: var(--bg-color-mobile, var(--bg-color-desktop, transparent));
+				max-width: var(--max-width-mobile, var(--max-width-desktop, 800px));
+				width: var(--width-percent-mobile, var(--width-percent-desktop, 96%));
+			}
+
+			.responsive-colors.full-width-mobile {
+				width: 100% !important;
+				max-width: none !important;
+			}
+		}
+	`;
+}
+function injectResponsiveCSS() {
+	if (document.getElementById("blox-responsive-css")) return;
+	const style = document.createElement("style");
+	style.id = "blox-responsive-css";
+	style.textContent = getResponsiveCSS();
+	document.head.appendChild(style);
+}
+function injectCode(code, target) {
+	if (!code) return;
+	const element = document.querySelector(target);
+	if (element) {
+		const div = document.createElement("div");
+		div.innerHTML = code;
+		element.appendChild(div);
+	}
+}
+var loadedFonts = /* @__PURE__ */ new Set();
+function loadGoogleFont(fontName) {
+	if (!fontName || loadedFonts.has(fontName)) return Promise.resolve();
+	return new Promise((resolve, reject) => {
+		const fontUrl = `https://fonts.googleapis.com/css2?family=${fontName.trim().replace(/\s+/g, "+")}:wght@400;500;600;700&display=swap`;
+		const linkElement = document.createElement("link");
+		linkElement.rel = "stylesheet";
+		linkElement.href = fontUrl;
+		linkElement.setAttribute("data-font-name", fontName);
+		linkElement.onload = () => {
+			console.log(`✅ Font loaded: ${fontName}`);
+			loadedFonts.add(fontName);
+			resolve();
+		};
+		linkElement.onerror = () => {
+			console.error(`❌ Failed to load font: ${fontName}`);
+			reject(/* @__PURE__ */ new Error(`Failed to load font: ${fontName}`));
+		};
+		document.head.appendChild(linkElement);
+	});
+}
+async function loadComponentFonts(components) {
+	const fontsToLoad = /* @__PURE__ */ new Set();
+	components.forEach((comp) => {
+		if (comp.data?.fontFamily) fontsToLoad.add(comp.data.fontFamily);
+		if (comp.data?.fontFamilyMobile) fontsToLoad.add(comp.data.fontFamilyMobile);
+	});
+	await Promise.all(Array.from(fontsToLoad).map((font) => loadGoogleFont(font)));
+}
+function applyGlobalFont(fontName) {
+	if (!fontName) return;
+	const existingStyle = document.getElementById("blox-global-font");
+	if (existingStyle) existingStyle.remove();
+	const style = document.createElement("style");
+	style.id = "blox-global-font";
+	style.textContent = `
+		body {
+			font-family: "${fontName}", sans-serif;
+		}
+		.blox-page-wrapper {
+			font-family: "${fontName}", sans-serif !important;
+		}
+		.blox-page-wrapper * {
+			font-family: inherit;
+		}
+	`;
+	document.head.appendChild(style);
+	loadGoogleFont(fontName);
+}
+function applyPageSettings(pageData) {
+	const { pageSettings } = pageData;
+	if (!pageSettings) return;
+	if (pageSettings.pageLanguage) document.documentElement.lang = pageSettings.pageLanguage;
+	if (pageSettings.pageDirection) {
+		document.documentElement.dir = pageSettings.pageDirection;
+		document.body.dir = pageSettings.pageDirection;
+	}
+	if (pageSettings.selectedGoogleFont) applyGlobalFont(pageSettings.selectedGoogleFont);
+	injectCode(pageSettings.additionalHeadCode, "head");
+	injectCode(pageSettings.additionalBodyCode, "body");
+	if (pageSettings.customFavicon) {
+		let faviconLink = document.querySelector("link[rel=\"icon\"]");
+		if (!faviconLink) {
+			faviconLink = document.createElement("link");
+			faviconLink.rel = "icon";
+			document.head.appendChild(faviconLink);
+		}
+		faviconLink.href = pageSettings.customFavicon;
+	}
+	applyMetaTags(pageSettings);
+}
+function applyMetaTags(settings) {
+	if (settings.customOgImage) updateOrCreateMeta("og:image", settings.customOgImage, "property");
+	if (settings.customKeywords) updateOrCreateMeta("keywords", settings.customKeywords);
+	if (settings.customRobotsMeta) updateOrCreateMeta("robots", settings.customRobotsMeta);
+}
+function updateOrCreateMeta(name, content, attribute = "name") {
+	const selector = `meta[${attribute}="${name}"]`;
+	let metaTag = document.querySelector(selector);
+	if (!metaTag) {
+		metaTag = document.createElement("meta");
+		metaTag.setAttribute(attribute, name);
+		document.head.appendChild(metaTag);
+	}
+	metaTag.content = content;
+}
+async function initializePage(pageData) {
+	injectResponsiveCSS();
+	applyPageSettings(pageData);
+	await loadComponentFonts(pageData.components);
+	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 normalizeComponentData(data) {
+	const normalized = {};
+	const stringFields = [
+		"title",
+		"subTitle",
+		"btnTxt",
+		"tag",
+		"customId",
+		"height",
+		"url",
+		"href"
+	];
+	for (const [key, value] of Object.entries(data)) if (typeof value === "string") if (value === "true") normalized[key] = true;
+	else if (value === "false") normalized[key] = false;
+	else if (!Number.isNaN(Number(value)) && value !== "" && !stringFields.includes(key)) normalized[key] = Number(value);
+	else normalized[key] = value;
+	else normalized[key] = value;
+	if (!normalized.items) normalized.items = [];
+	if (normalized.height !== void 0 && typeof normalized.height === "number") normalized.height = String(normalized.height);
+	if (normalized.height === "auto") delete normalized.height;
+	return normalized;
+}
+function deepClone(obj) {
+	return JSON.parse(JSON.stringify(obj));
+}
+function deepMerge(target, source) {
+	const result = { ...target };
+	for (const key in source) if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) result[key] = deepMerge(result[key] || {}, source[key]);
+	else result[key] = source[key];
+	return result;
+}
+var _hoisted_1$1 = { class: "blox-page-wrapper" };
+var _hoisted_2$1 = {
+	key: 0,
+	class: "blox-loading"
+};
+var _hoisted_3$1 = {
+	key: 1,
+	class: "blox-empty-state"
+};
+var _hoisted_4$1 = {
+	key: 2,
+	class: "blox-empty-preview"
+};
+var _hoisted_5 = [
+	"data-block-id",
+	"onClick",
+	"onMouseenter",
+	"onFocus"
+];
+var _hoisted_6 = {
+	key: 0,
+	class: "blox-block-label"
+};
+var _hoisted_7 = { key: 0 };
+var _hoisted_8 = ["id"];
+var _hoisted_9 = {
+	key: 1,
+	class: "blox-missing-component"
+};
+var _hoisted_10 = ["onClick"];
+var ExternalPreview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "ExternalPreview",
+	props: {
+		origin: { default: "*" },
+		initialPageData: {},
+		componentConfigs: { default: () => [] }
+	},
+	setup(__props) {
+		const props = __props;
+		const components = (0, vue.ref)([]);
+		const highlightID = (0, vue.ref)("");
+		const selectedID = (0, vue.ref)("");
+		const isMobile = (0, vue.ref)(false);
+		const previewMode = (0, vue.ref)(false);
+		const linksDisabled = (0, vue.ref)(false);
+		const loading = (0, vue.ref)(true);
+		const updateCounter = (0, vue.ref)(0);
+		let bridge = null;
+		const registeredComponents = getAllComponents();
+		const getBlockStyles = (0, vue.computed)(() => {
+			updateCounter.value;
+			return (data, mobile = false) => generateBlockStyles(data, mobile);
+		});
+		function setFocus(id, emit = false) {
+			selectedID.value = id;
+			highlightID.value = id;
+			document.querySelector(`[data-block-id="${id}"]`)?.scrollIntoView({
+				behavior: "smooth",
+				block: "center"
+			});
+			if (emit && bridge) bridge.send("focus", id);
+		}
+		function setHighlight(id, emit = false) {
+			highlightID.value = id;
+			if (emit && bridge) bridge.send("highlight", id);
+		}
+		function keyboardHandler(event) {
+			if (previewMode.value) return;
+			if (event.key === "ArrowDown") {
+				const next = components.value.findIndex((comp) => comp.id === highlightID.value) + 1;
+				if (next < components.value.length) setFocus(components.value[next].id, true);
+			} else if (event.key === "ArrowUp") {
+				const prev = components.value.findIndex((comp) => comp.id === highlightID.value) - 1;
+				if (prev >= 0) setFocus(components.value[prev].id, true);
+			} else if (event.key === "Enter") {
+				if (bridge) bridge.send("focus", highlightID.value);
+			} else if (event.key === "Escape") {
+				setHighlight("");
+				selectedID.value = "";
+			} else if (event.key === "Delete") {
+				if (bridge) bridge.send("delete", highlightID.value);
+			}
+		}
+		function clickHandler(event) {
+			if (!linksDisabled.value) return;
+			let element = event.target;
+			while (element) {
+				if (element.tagName === "A" && element.getAttribute("href")) if (!(element.classList.contains("btn") || element.classList.contains("button") || element.getAttribute("role") === "button")) {
+					event.preventDefault();
+					event.stopPropagation();
+					return false;
+				} else {
+					event.preventDefault();
+					return false;
+				}
+				element = element.parentElement;
+			}
+		}
+		function setupBridge() {
+			bridge = createCommunicationBridge({
+				origin: props.origin,
+				targetWindow: window.parent
+			});
+			bridge.on("update", ({ message, data, isMobile: mobile }) => {
+				const componentData = message?.data || data;
+				const mobileMode = message?.isMobile !== void 0 ? message.isMobile : mobile;
+				if (componentData) {
+					components.value = [...componentData];
+					updateCounter.value++;
+					console.log("📦 Updated components:", components.value.length);
+				}
+				if (mobileMode !== void 0) {
+					isMobile.value = mobileMode;
+					console.log("📱 Mobile mode:", mobileMode);
+				}
+				loading.value = false;
+			});
+			bridge.on("highlight", ({ message }) => {
+				setHighlight(message);
+			});
+			bridge.on("focus", ({ message }) => {
+				setFocus(message);
+			});
+			bridge.on("preview", ({ message }) => {
+				previewMode.value = message;
+				if (previewMode.value) {
+					document.body.classList.add("blox-preview-mode");
+					document.body.classList.remove("blox-edit-mode");
+				} else {
+					document.body.classList.remove("blox-preview-mode");
+					document.body.classList.add("blox-edit-mode");
+				}
+			});
+			bridge.on("disableLinks", ({ message }) => {
+				linksDisabled.value = message;
+			});
+			const registeredTypes = Object.keys(registeredComponents);
+			const configsToSend = props.componentConfigs.map((config) => ({
+				id: config.id,
+				label: config.label,
+				icon: config.icon,
+				img: config.img,
+				order: config.order || 999,
+				content: config.content || [],
+				settings: config.settings || []
+			}));
+			bridge.send("ready", {
+				registeredTypes,
+				componentConfigs: configsToSend
+			});
+			console.log("📤 Sent component configurations:", configsToSend);
+		}
+		(0, vue.onMounted)(async () => {
+			console.log("🚀 External Preview mounted");
+			console.log("📦 Registered components:", Object.keys(registeredComponents));
+			setupBridge();
+			window.addEventListener("keydown", keyboardHandler);
+			document.addEventListener("click", clickHandler, true);
+			document.body.classList.add("blox-edit-mode");
+			if (props.initialPageData) {
+				await initializePage(props.initialPageData);
+				components.value = props.initialPageData.components;
+				loading.value = false;
+			}
+		});
+		(0, vue.onUnmounted)(() => {
+			if (bridge) bridge.destroy();
+			window.removeEventListener("keydown", keyboardHandler);
+			document.removeEventListener("click", clickHandler, true);
+			document.body.classList.remove("blox-preview-mode", "blox-edit-mode");
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [loading.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$1, _cache[0] || (_cache[0] = [(0, vue.createElementVNode)("p", null, "Loading preview...", -1)]))) : !components.value.length && !previewMode.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_3$1, _cache[1] || (_cache[1] = [(0, vue.createElementVNode)("p", null, "No blocks yet. Add a block from the editor to get started!", -1)]))) : !components.value.length && previewMode.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$1)) : (0, vue.createCommentVNode)("", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(components.value, (comp) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: comp.id,
+					class: (0, vue.normalizeClass)(["blox-block-wrapper", {
+						"blox-highlight": !previewMode.value && highlightID.value === comp.id,
+						"blox-selected": !previewMode.value && selectedID.value === comp.id
+					}]),
+					"data-block-id": comp.id,
+					onClick: ($event) => !previewMode.value ? setFocus(comp.id, true) : null,
+					onMouseenter: ($event) => !previewMode.value ? setHighlight(comp.id, true) : null,
+					onFocus: ($event) => !previewMode.value ? setHighlight(comp.id, true) : null
+				}, [
+					!previewMode.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6, [(0, vue.createTextVNode)((0, vue.toDisplayString)(comp.type) + " ", 1), comp.data?.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7, " | " + (0, vue.toDisplayString)(comp.data.title), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true),
+					((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						id: comp.data.customId,
+						key: `${comp.id}-${updateCounter.value}`,
+						style: (0, vue.normalizeStyle)(getBlockStyles.value(comp.data, isMobile.value)),
+						class: (0, vue.normalizeClass)((0, vue.unref)(getResponsiveClasses)(comp.data))
+					}, [(0, vue.unref)(registeredComponents)[comp.type] ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(registeredComponents)[comp.type]), (0, vue.mergeProps)({
+						key: 0,
+						ref_for: true
+					}, {
+						...(0, vue.unref)(normalizeComponentData)(comp.data),
+						isMobile: isMobile.value
+					}), null, 16)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_9, " ⚠️ Component not registered: " + (0, vue.toDisplayString)(comp.type), 1))], 14, _hoisted_8)),
+					!previewMode.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 1,
+						class: "blox-block-overlay",
+						onClick: (0, vue.withModifiers)(($event) => setFocus(comp.id, true), ["self"])
+					}, null, 8, _hoisted_10)) : (0, vue.createCommentVNode)("", true)
+				], 42, _hoisted_5);
+			}), 128))]);
+		};
+	}
+});
+var ExternalPreview_default = /* @__PURE__ */ __plugin_vue_export_helper_default(ExternalPreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8110f424"]]);
+var _hoisted_1 = { class: "blox-page-wrapper" };
+var _hoisted_2 = {
+	key: 0,
+	class: "blox-loading"
+};
+var _hoisted_3 = ["id"];
+var _hoisted_4 = {
+	key: 1,
+	class: "blox-missing-component"
+};
+var RenderPage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "RenderPage",
+	props: {
+		pageData: {},
+		mobileBreakpoint: { default: 910 }
+	},
+	setup(__props) {
+		const props = __props;
+		const isMobile = (0, vue.ref)(false);
+		const loading = (0, vue.ref)(true);
+		const updateCounter = (0, vue.ref)(0);
+		const registeredComponents = getAllComponents();
+		const getBlockStyles = (0, vue.computed)(() => {
+			updateCounter.value;
+			return (data, mobile = false) => generateBlockStyles(data, mobile);
+		});
+		function updateMobileStatus() {
+			const wasMobile = isMobile.value;
+			isMobile.value = window.innerWidth <= props.mobileBreakpoint;
+			if (wasMobile !== isMobile.value) updateCounter.value++;
+		}
+		(0, vue.onMounted)(async () => {
+			console.log("🚀 Render Page mounted");
+			console.log("📦 Registered components:", Object.keys(registeredComponents));
+			await initializePage(props.pageData);
+			updateMobileStatus();
+			window.addEventListener("resize", updateMobileStatus);
+			loading.value = false;
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [loading.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, _cache[0] || (_cache[0] = [(0, vue.createElementVNode)("p", null, "Loading...", -1)]))) : ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(_ctx.pageData.components, (comp) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: `${comp.id}-${updateCounter.value}`,
+					id: comp.data.customId,
+					style: (0, vue.normalizeStyle)(getBlockStyles.value(comp.data, isMobile.value)),
+					class: (0, vue.normalizeClass)((0, vue.unref)(getResponsiveClasses)(comp.data))
+				}, [(0, vue.unref)(registeredComponents)[comp.type] ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(registeredComponents)[comp.type]), (0, vue.mergeProps)({
+					key: 0,
+					ref_for: true
+				}, {
+					...(0, vue.unref)(normalizeComponentData)(comp.data),
+					isMobile: isMobile.value
+				}), null, 16)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, " Component not found: " + (0, vue.toDisplayString)(comp.type), 1))], 14, _hoisted_3);
+			}), 128))]);
+		};
+	}
+});
+var RenderPage_default = /* @__PURE__ */ __plugin_vue_export_helper_default(RenderPage_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1a340b1b"]]);
+exports.Button = Button_default;
+exports.CommunicationBridge = CommunicationBridge;
+exports.Container = Container_default;
+exports.ExternalPreview = ExternalPreview_default;
+exports.Image = Image_default;
+exports.RenderPage = RenderPage_default;
+exports.Spacer = Spacer_default;
+exports.Text = Text_default;
+exports.Title = Title_default;
+exports.applyGlobalFont = applyGlobalFont;
+exports.applyPageSettings = applyPageSettings;
+exports.baseComponentConfigs = baseComponentConfigs;
+exports.clearRegistry = clearRegistry;
+exports.createCommunicationBridge = createCommunicationBridge;
+exports.createNamespacedRegistry = createNamespacedRegistry;
+exports.deepClone = deepClone;
+exports.deepMerge = deepMerge;
+exports.generateBlockStyles = generateBlockStyles;
+exports.getAllComponentConfigs = getAllComponentConfigs;
+exports.getAllComponents = getAllComponents;
+exports.getBaseComponentConfig = getBaseComponentConfig;
+exports.getBaseComponentConfigs = getBaseComponentConfigs;
+exports.getComponent = getComponent;
+exports.getRegisteredTypes = getRegisteredTypes;
+exports.getResponsiveCSS = getResponsiveCSS;
+exports.getResponsiveClasses = getResponsiveClasses;
+exports.hasComponent = hasComponent;
+exports.initializePage = initializePage;
+exports.injectCode = injectCode;
+exports.injectResponsiveCSS = injectResponsiveCSS;
+exports.loadComponentFonts = loadComponentFonts;
+exports.loadGoogleFont = loadGoogleFont;
+exports.normalizeComponentData = normalizeComponentData;
+exports.registerBaseComponents = registerBaseComponents;
+exports.registerComponent = registerComponent;
+exports.registerComponents = registerComponents;
+exports.registry = registry;
+exports.sendMessage = sendMessage;
+exports.unregisterComponent = unregisterComponent;