@bagelink/blox 1.5.3

package/dist/setup.d.ts

@@ -0,0 +1,24 @@
+import { ComponentConfig } from './config/baseComponents';
+/**
+ * Register all base components from the library
+ * Call this in your project's setup to make base components available
+ */
+export declare function registerBaseComponents(): void;
+/**
+ * Get all component configurations (base + custom)
+ * This returns both the Vue components and their editor schemas
+ */
+export declare function getAllComponentConfigs(customConfigs?: ComponentConfig[]): ComponentConfig[];
+/**
+ * Helper to create a custom component configuration
+ */
+export declare function createComponentConfig(config: ComponentConfig): ComponentConfig;
+/**
+ * Register a single custom component
+ */
+export declare function registerCustomComponent(config: ComponentConfig): void;
+/**
+ * Register multiple custom components
+ */
+export declare function registerCustomComponents(configs: ComponentConfig[]): void;
+//# sourceMappingURL=setup.d.ts.map

package/dist/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../setup.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAwB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAGpF;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CAS7C;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,aAAa,GAAE,eAAe,EAAO,GAAG,eAAe,EAAE,CAE/F;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,eAAe,GAAG,eAAe,CAE9E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAGrE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,IAAI,CAIzE"}

package/dist/utils/normalizer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Data Normalization Utilities
+ *
+ * Normalizes component data for proper rendering
+ */
+/**
+ * Convert string values to proper types for component props
+ */
+export declare function normalizeComponentData(data: Record<string, any>): Record<string, any>;
+/**
+ * Deep clone an object
+ */
+export declare function deepClone<T>(obj: T): T;
+/**
+ * Merge objects deeply
+ */
+export declare function deepMerge(target: any, source: any): any;
+//# sourceMappingURL=normalizer.d.ts.map

package/dist/utils/normalizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../utils/normalizer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAwCrF;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAEtC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,GAAG,CAYvD"}

package/dist/utils/styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generate CSS styles from block data
+ */
+export declare function generateBlockStyles(data: Record<string, any>, isMobile?: boolean): Record<string, string>;
+/**
+ * Generate responsive CSS classes
+ */
+export declare function getResponsiveClasses(data: Record<string, any>): string[];
+/**
+ * Generate the responsive CSS to be injected into the page
+ */
+export declare function getResponsiveCSS(): string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/utils/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../utils/styles.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,mBAAmB,CAClC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,QAAQ,GAAE,OAAe,GACvB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAqKxB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,EAAE,CAgBxE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CA8BzC"}

package/dist/views/ExternalPreview.vue.d.ts

@@ -0,0 +1,12 @@
+import { PageData } from '../core/types';
+interface Props {
+    origin?: string;
+    initialPageData?: PageData;
+    componentConfigs?: any[];
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    origin: string;
+    componentConfigs: any[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=ExternalPreview.vue.d.ts.map

package/dist/views/ExternalPreview.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalPreview.vue.d.ts","sourceRoot":"","sources":["../../views/ExternalPreview.vue"],"names":[],"mappings":"AAAA,OA8aO,KAAK,EAAiB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAQ5D,UAAU,KAAK;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,QAAQ,CAAA;IAC1B,gBAAgB,CAAC,EAAE,GAAG,EAAE,CAAA;CACxB;;YAHS,MAAM;sBAEI,GAAG,EAAE;;AAoXzB,wBAQG"}

package/dist/views/RenderPage.vue.d.ts

@@ -0,0 +1,10 @@
+import { PageData } from '../core/types';
+interface Props {
+    pageData: PageData;
+    mobileBreakpoint?: number;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    mobileBreakpoint: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=RenderPage.vue.d.ts.map

package/dist/views/RenderPage.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderPage.vue.d.ts","sourceRoot":"","sources":["../../views/RenderPage.vue"],"names":[],"mappings":"AAAA,OAwIO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAO7C,UAAU,KAAK;IACd,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB;;sBADmB,MAAM;;AAsI1B,wBAQG"}

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('vite').UserConfigFnObject;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/dist/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AASA,wBAoCG"}

package/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Blox External Preview Library
+ * Main entry point
+ */
+
+// Component exports
+export * from './components'
+// Configuration exports
+export * from './config/baseComponents'
+export * from './core/communication'
+export * from './core/registry'
+
+export * from './core/renderer'
+// Core exports
+export * from './core/types'
+
+// Auto-registration helper
+export { getAllComponentConfigs, registerBaseComponents } from './setup'
+
+export * from './utils/normalizer'
+
+// Utility exports
+export * from './utils/styles'
+// View exports
+export { default as ExternalPreview } from './views/ExternalPreview.vue'
+
+export { default as RenderPage } from './views/RenderPage.vue'

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@bagelink/blox",
+  "type": "module",
+  "version": "1.5.3",
+  "description": "Blox page builder library for drag-and-drop page building and static data management",
+  "author": {
+    "name": "Bagel Studio",
+    "email": "info@bagelstudio.co.il",
+    "url": "https://bagelstudio.co.il"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/bageldb/bagelink/tree/master/packages/blox#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bageldb/bagelink.git",
+    "directory": "packages/blox"
+  },
+  "bugs": "https://github.com/bageldb/bagelink/issues",
+  "keywords": [
+    "blox",
+    "page-builder",
+    "preview",
+    "external-preview",
+    "cms",
+    "vue",
+    "component-library",
+    "drag-and-drop",
+    "static-pages"
+  ],
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs"
+    },
+    "./core": {
+      "types": "./dist/core/types.d.ts",
+      "import": "./dist/core/types.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils/styles.d.ts",
+      "import": "./dist/utils/styles.mjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "core",
+    "components",
+    "config",
+    "utils",
+    "views",
+    "setup.ts",
+    "index.ts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue-macros/reactivity-transform": "^1.1.6",
+    "typescript": "^5.8.3",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vite-tsconfig-paths": "^5.0.0",
+    "vue": "^3.5.16",
+    "vue-tsc": "^2.0.0"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit"
+  }
+}

package/setup.ts

@@ -0,0 +1,56 @@
+/**
+ * Blox Setup and Registration
+ *
+ * Handles automatic registration of base components and provides
+ * configuration helpers for external projects.
+ */
+
+import { baseComponentConfigs, type ComponentConfig } from './config/baseComponents'
+import { registerComponent, registerComponents } from './core/registry'
+
+/**
+ * Register all base components from the library
+ * Call this in your project's setup to make base components available
+ */
+export function registerBaseComponents(): void {
+	const componentMap: Record<string, any> = {}
+
+	baseComponentConfigs.forEach((config) => {
+		componentMap[config.id] = config.component
+	})
+
+	registerComponents(componentMap)
+	console.log('✅ Registered base components:', Object.keys(componentMap))
+}
+
+/**
+ * Get all component configurations (base + custom)
+ * This returns both the Vue components and their editor schemas
+ */
+export function getAllComponentConfigs(customConfigs: ComponentConfig[] = []): ComponentConfig[] {
+	return [...baseComponentConfigs, ...customConfigs]
+}
+
+/**
+ * Helper to create a custom component configuration
+ */
+export function createComponentConfig(config: ComponentConfig): ComponentConfig {
+	return config
+}
+
+/**
+ * Register a single custom component
+ */
+export function registerCustomComponent(config: ComponentConfig): void {
+	registerComponent(config.id, config.component)
+	console.log(`✅ Registered custom component: ${config.id}`)
+}
+
+/**
+ * Register multiple custom components
+ */
+export function registerCustomComponents(configs: ComponentConfig[]): void {
+	configs.forEach((config) => {
+		registerCustomComponent(config)
+	})
+}

package/utils/normalizer.ts

@@ -0,0 +1,74 @@
+/**
+ * Data Normalization Utilities
+ *
+ * Normalizes component data for proper rendering
+ */
+
+/**
+ * Convert string values to proper types for component props
+ */
+export function normalizeComponentData(data: Record<string, any>): Record<string, any> {
+	const normalized: Record<string, any> = {}
+
+	// Fields that should remain as strings even if they look like numbers
+	const stringFields = ['title', 'subTitle', 'btnTxt', 'tag', 'customId', 'height', 'url', 'href']
+
+	for (const [key, value] of Object.entries(data)) {
+		if (typeof value === 'string') {
+			// Convert string booleans to actual booleans
+			if (value === 'true') {
+				normalized[key] = true
+			} else if (value === 'false') {
+				normalized[key] = false
+			} else if (!Number.isNaN(Number(value)) && value !== '' && !stringFields.includes(key)) {
+			// Convert string numbers to numbers (but not for text fields)
+				normalized[key] = Number(value)
+			} else {
+				normalized[key] = value
+			}
+		} else {
+			normalized[key] = value
+		}
+	}
+
+	// Provide default props to avoid Vue warnings for missing required props
+	if (!normalized.items) {
+		normalized.items = []
+	}
+
+	// Ensure height is always a string if it exists
+	if (normalized.height !== undefined && typeof normalized.height === 'number') {
+		normalized.height = String(normalized.height)
+	}
+
+	if (normalized.height === 'auto') {
+		// Convert auto height strings to valid numbers for components that expect numbers
+		delete normalized.height
+	}
+
+	return normalized
+}
+
+/**
+ * Deep clone an object
+ */
+export function deepClone<T>(obj: T): T {
+	return JSON.parse(JSON.stringify(obj))
+}
+
+/**
+ * Merge objects deeply
+ */
+export function deepMerge(target: any, source: any): any {
+	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
+}

package/utils/styles.ts

@@ -0,0 +1,228 @@
+/**
+ * Generate CSS styles from block data
+ */
+export function generateBlockStyles(
+	data: Record<string, any>,
+	isMobile: boolean = false
+): Record<string, string> {
+	const styles: Record<string, string> = {}
+
+	// Helper to coerce numeric-like values
+	function toNumber(v: any): number | null {
+		if (v === undefined || v === null || v === '') return null
+		const n = Number(v)
+		return Number.isNaN(n) ? null : n
+	}
+
+	// Helper to get value with mobile override
+	function getValue(desktopKey: string, mobileKey: string) {
+		if (isMobile && data[mobileKey] !== undefined && data[mobileKey] !== null) {
+			return data[mobileKey]
+		}
+		return data[desktopKey]
+	}
+
+	// Margin and padding (use rem units) with mobile overrides
+	const mTop = toNumber(getValue('marginTop', 'marginTopMobile'))
+	const mBottom = toNumber(getValue('marginBottom', 'marginBottomMobile'))
+	const pad = toNumber(getValue('padding', 'paddingMobile'))
+
+	// Set margin values
+	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`
+	}
+
+	// Width behavior
+	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
+
+	// Set CSS variables for responsive width
+	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}%`
+
+	// Set margin centering for non-full-width blocks
+	if (!(fullWidthDesktop === true || fullWidthDesktop === 'true') && wDesktop !== null) {
+		styles['margin-left'] = 'auto'
+		styles['margin-right'] = 'auto'
+	}
+
+	// Border styles
+	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
+		}
+	}
+
+	// Center alignment
+	const isCenter = getValue('center', 'centerMobile')
+	if (isCenter === true || isCenter === 'true') {
+		styles['text-align'] = 'center'
+	}
+
+	// Border radius
+	const borderR = toNumber(getValue('borderRadius', 'borderRadiusMobile'))
+	if (borderR !== null) {
+		styles['border-radius'] = `${borderR}px`
+	}
+
+	// Colors with CSS variables
+	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
+	}
+
+	// Shadow types
+	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 as keyof typeof shadowMap] || shadowMap.md
+	}
+
+	// Z-index
+	const z = toNumber(getValue('zIndex', 'zIndexMobile'))
+	if (z !== null && z > 0) {
+		styles.position = 'relative'
+		styles['z-index'] = z.toString()
+	}
+
+	// Visibility
+	if (!isMobile && data.showDesktop === false) {
+		styles.display = 'none'
+	} else if (isMobile && data.showMobile === false) {
+		styles.display = 'none'
+	}
+
+	// Font family
+	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`
+	}
+
+	// Custom CSS
+	if (data.customCSS) {
+		try {
+			const customRules = data.customCSS
+				.split(';')
+				.filter((rule: string) => rule.trim())
+				.map((rule: string) => rule.trim().split(':'))
+				.filter((parts: string[]) => parts.length === 2)
+
+			customRules.forEach(([property, value]: [string, string]) => {
+				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
+}
+
+/**
+ * Generate responsive CSS classes
+ */
+export function getResponsiveClasses(data: Record<string, any>): string[] {
+	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
+}
+
+/**
+ * Generate the responsive CSS to be injected into the page
+ */
+export function getResponsiveCSS(): string {
+	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;
+			}
+		}
+	`
+}