@bagelink/blox 1.5.3

package/dist/index.mjs

@@ -0,0 +1,1260 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useCssVars, withCtx, withModifiers } from "vue";
+var _hoisted_1$4 = [
+	"href",
+	"target",
+	"rel"
+];
+var Button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ 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 openBlock(), createElementBlock("div", { class: normalizeClass(`button-wrapper align-${_ctx.align}`) }, [createElementVNode("a", {
+				href: _ctx.btnUrl,
+				target: _ctx.btnTarget,
+				rel: _ctx.btnTarget === "_blank" ? "noopener noreferrer" : void 0,
+				class: normalizeClass(["btn", [
+					`btn-${_ctx.variant}`,
+					`btn-${_ctx.size}`,
+					{ "btn-full-width": _ctx.fullWidth }
+				]]),
+				onClick: handleClick
+			}, 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_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "Container",
+	props: {
+		maxWidth: { default: 1200 },
+		padding: { default: 20 },
+		gap: { default: 16 },
+		layout: { default: "vertical" },
+		columns: { default: 3 },
+		isMobile: { type: Boolean }
+	},
+	setup(__props) {
+		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 openBlock(), createElementBlock("div", {
+				class: normalizeClass(["container", [`layout-${_ctx.layout}`]]),
+				style: containerStyle
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2);
+		};
+	}
+}), [["__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_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ 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 openBlock(), createElementBlock("figure", _hoisted_1$3, [_ctx.link ? (openBlock(), createElementBlock("a", {
+				key: 0,
+				href: _ctx.link,
+				target: _ctx.linkTarget,
+				rel: _ctx.linkTarget === "_blank" ? "noopener noreferrer" : void 0,
+				class: "image-link"
+			}, [createElementVNode("img", {
+				src: _ctx.src,
+				alt: _ctx.alt,
+				style: imageStyle,
+				class: "image"
+			}, null, 8, _hoisted_3$2)], 8, _hoisted_2$2)) : (openBlock(), createElementBlock("img", {
+				key: 1,
+				src: _ctx.src,
+				alt: _ctx.alt,
+				style: imageStyle,
+				class: "image"
+			}, null, 8, _hoisted_4$2)), _ctx.caption ? (openBlock(), createElementBlock("figcaption", _hoisted_5$1, toDisplayString(_ctx.caption), 1)) : createCommentVNode("", true)]);
+		};
+	}
+}), [["__scopeId", "data-v-dcfd7570"]]);
+var Spacer_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ 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 openBlock(), createElementBlock("div", {
+				class: "spacer",
+				style: normalizeStyle({ height: computedHeight() })
+			}, null, 4);
+		};
+	}
+}), [["__scopeId", "data-v-73a7e941"]]);
+var Text_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "Text",
+	props: {
+		content: { default: "" },
+		tag: { default: "div" },
+		align: { default: "left" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+				class: normalizeClass(`text-align-${_ctx.align}`),
+				innerHTML: _ctx.content
+			}, null, 8, ["class", "innerHTML"]);
+		};
+	}
+}), [["__scopeId", "data-v-a6173468"]]);
+var _hoisted_1$2 = {
+	key: 1,
+	class: "subtitle"
+};
+var Title_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "Title",
+	props: {
+		title: { default: "" },
+		subTitle: { default: "" },
+		tag: { default: "h2" },
+		align: { default: "left" }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(`title-wrapper text-align-${_ctx.align}`) }, [_ctx.title ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+				key: 0,
+				class: "title"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(_ctx.title), 1)]),
+				_: 1
+			})) : createCommentVNode("", true), _ctx.subTitle ? (openBlock(), createElementBlock("p", _hoisted_1$2, toDisplayString(_ctx.subTitle), 1)) : createCommentVNode("", true)], 2);
+		};
+	}
+}), [["__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_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "ExternalPreview",
+	props: {
+		origin: { default: "*" },
+		initialPageData: {},
+		componentConfigs: { default: () => [] }
+	},
+	setup(__props) {
+		const props = __props;
+		const components = ref([]);
+		const highlightID = ref("");
+		const selectedID = ref("");
+		const isMobile = ref(false);
+		const previewMode = ref(false);
+		const linksDisabled = ref(false);
+		const loading = ref(true);
+		const updateCounter = ref(0);
+		let bridge = null;
+		const registeredComponents = getAllComponents();
+		const getBlockStyles = 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);
+		}
+		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;
+			}
+		});
+		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 openBlock(), createElementBlock("div", _hoisted_1$1, [loading.value ? (openBlock(), createElementBlock("div", _hoisted_2$1, _cache[0] || (_cache[0] = [createElementVNode("p", null, "Loading preview...", -1)]))) : !components.value.length && !previewMode.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, _cache[1] || (_cache[1] = [createElementVNode("p", null, "No blocks yet. Add a block from the editor to get started!", -1)]))) : !components.value.length && previewMode.value ? (openBlock(), createElementBlock("div", _hoisted_4$1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(components.value, (comp) => {
+				return openBlock(), createElementBlock("div", {
+					key: comp.id,
+					class: 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 ? (openBlock(), createElementBlock("p", _hoisted_6, [createTextVNode(toDisplayString(comp.type) + " ", 1), comp.data?.title ? (openBlock(), createElementBlock("span", _hoisted_7, " | " + toDisplayString(comp.data.title), 1)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+					(openBlock(), createElementBlock("div", {
+						id: comp.data.customId,
+						key: `${comp.id}-${updateCounter.value}`,
+						style: normalizeStyle(getBlockStyles.value(comp.data, isMobile.value)),
+						class: normalizeClass(unref(getResponsiveClasses)(comp.data))
+					}, [unref(registeredComponents)[comp.type] ? (openBlock(), createBlock(resolveDynamicComponent(unref(registeredComponents)[comp.type]), mergeProps({
+						key: 0,
+						ref_for: true
+					}, {
+						...unref(normalizeComponentData)(comp.data),
+						isMobile: isMobile.value
+					}), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_9, " ⚠️ Component not registered: " + toDisplayString(comp.type), 1))], 14, _hoisted_8)),
+					!previewMode.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: "blox-block-overlay",
+						onClick: withModifiers(($event) => setFocus(comp.id, true), ["self"])
+					}, null, 8, _hoisted_10)) : createCommentVNode("", true)
+				], 42, _hoisted_5);
+			}), 128))]);
+		};
+	}
+}), [["__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_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "RenderPage",
+	props: {
+		pageData: {},
+		mobileBreakpoint: { default: 910 }
+	},
+	setup(__props) {
+		const props = __props;
+		const isMobile = ref(false);
+		const loading = ref(true);
+		const updateCounter = ref(0);
+		const registeredComponents = getAllComponents();
+		const getBlockStyles = 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++;
+		}
+		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 openBlock(), createElementBlock("div", _hoisted_1, [loading.value ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[0] || (_cache[0] = [createElementVNode("p", null, "Loading...", -1)]))) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.pageData.components, (comp) => {
+				return openBlock(), createElementBlock("div", {
+					key: `${comp.id}-${updateCounter.value}`,
+					id: comp.data.customId,
+					style: normalizeStyle(getBlockStyles.value(comp.data, isMobile.value)),
+					class: normalizeClass(unref(getResponsiveClasses)(comp.data))
+				}, [unref(registeredComponents)[comp.type] ? (openBlock(), createBlock(resolveDynamicComponent(unref(registeredComponents)[comp.type]), mergeProps({
+					key: 0,
+					ref_for: true
+				}, {
+					...unref(normalizeComponentData)(comp.data),
+					isMobile: isMobile.value
+				}), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_4, " Component not found: " + toDisplayString(comp.type), 1))], 14, _hoisted_3);
+			}), 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, createNamespacedRegistry, deepClone, deepMerge, generateBlockStyles, getAllComponentConfigs, getAllComponents, getBaseComponentConfig, getBaseComponentConfigs, getComponent, getRegisteredTypes, getResponsiveCSS, getResponsiveClasses, hasComponent, initializePage, injectCode, injectResponsiveCSS, loadComponentFonts, loadGoogleFont, normalizeComponentData, registerBaseComponents, registerComponent, registerComponents, registry, sendMessage, unregisterComponent };