@bagelink/blox 1.5.17 → 1.5.20

package/utils/styles.ts

@@ -1,228 +0,0 @@
-/**
- * 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;
-			}
-		}
-	`
-}

package/views/ExternalPreview.vue

@@ -1,415 +0,0 @@
-<script setup lang="ts">
-/**
- * External Preview View
- *
- * This component runs on the target site and communicates with the editor
- * via postMessage. It receives component updates and renders them using
- * the site's registered components.
- */
-
-import type { ComponentData, PageData } from '../core/types'
-import { ref, onMounted, onUnmounted, computed } from 'vue'
-import { createCommunicationBridge, type CommunicationBridge } from '../core/communication'
-import { getAllComponents } from '../core/registry'
-import { initializePage } from '../core/renderer'
-import { normalizeComponentData } from '../utils/normalizer'
-import { generateBlockStyles, getResponsiveClasses } from '../utils/styles'
-
-interface Props {
-	origin?: string // Allowed editor origin (default: *)
-	initialPageData?: PageData // Optional initial page data
-	componentConfigs?: any[] // Component configurations with schemas
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	origin: '*',
-	componentConfigs: () => [],
-})
-
-// State
-const components = ref<ComponentData[]>([])
-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)
-
-// Communication bridge
-let bridge: CommunicationBridge | null = null
-
-// Get registered components
-const registeredComponents = getAllComponents()
-
-// Reactive computed for block styles
-const getBlockStyles = computed(() => {
-	// Access updateCounter to trigger reactivity
-	console.log('updateCounter', updateCounter.value)
-	return (data: Record<string, any>, mobile: boolean = false) => generateBlockStyles(data, mobile)
-})
-
-/**
- * Handle focus on a block
- */
-function setFocus(id: string, emit = false) {
-	selectedID.value = id
-	highlightID.value = id
-
-	const el = document.querySelector(`[data-block-id="${id}"]`)
-	el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-
-	if (emit && bridge) {
-		bridge.send('focus', id)
-	}
-}
-
-/**
- * Handle highlight on a block
- */
-function setHighlight(id: string, emit = false) {
-	highlightID.value = id
-
-	if (emit && bridge) {
-		bridge.send('highlight', id)
-	}
-}
-
-/**
- * Handle keyboard navigation
- */
-function keyboardHandler(event: KeyboardEvent) {
-	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)
-	}
-}
-
-/**
- * Handle click on page (prevent navigation in edit mode)
- */
-function clickHandler(event: MouseEvent) {
-	if (!linksDisabled.value) return
-
-	let element: HTMLElement | null = event.target as HTMLElement
-
-	while (element) {
-		if (element.tagName === 'A' && element.getAttribute('href')) {
-			const isButton
-				= element.classList.contains('btn')
-					|| element.classList.contains('button')
-					|| element.getAttribute('role') === 'button'
-
-			if (!isButton) {
-				event.preventDefault()
-				event.stopPropagation()
-				return false
-			} else {
-				event.preventDefault()
-				return false
-			}
-		}
-		element = element.parentElement
-	}
-}
-
-/**
- * Setup communication bridge
- */
-function setupBridge() {
-	bridge = createCommunicationBridge({
-		origin: props.origin,
-		targetWindow: window.parent,
-	})
-
-	// Handle update messages
-	bridge.on('update', ({ message, data, isMobile: mobile }) => {
-		// Data can be in message.data or at top level (for backward compatibility)
-		const componentData = message?.data || data
-		const mobileMode = message?.isMobile !== undefined ? message.isMobile : mobile
-
-		if (componentData) {
-			components.value = [...componentData]
-			updateCounter.value++
-			console.log('📦 Updated components:', components.value.length)
-		}
-
-		if (mobileMode !== undefined) {
-			isMobile.value = mobileMode
-			console.log('📱 Mobile mode:', mobileMode)
-		}
-
-		loading.value = false
-	})
-
-	// Handle highlight messages
-	bridge.on('highlight', ({ message }) => {
-		setHighlight(message)
-	})
-
-	// Handle focus messages
-	bridge.on('focus', ({ message }) => {
-		setFocus(message)
-	})
-
-	// Handle preview mode toggle
-	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')
-		}
-	})
-
-	// Handle link disable toggle
-	bridge.on('disableLinks', ({ message }) => {
-		linksDisabled.value = message
-	})
-
-	// Send ready message with component configurations
-	const registeredTypes = Object.keys(registeredComponents)
-
-	// Prepare component configs to send to editor
-	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))
-
-	// Setup communication
-	setupBridge()
-
-	// Add event listeners
-	window.addEventListener('keydown', keyboardHandler)
-	document.addEventListener('click', clickHandler, true)
-
-	// Set edit mode initially
-	document.body.classList.add('blox-edit-mode')
-
-	// Initialize with initial page data if provided
-	if (props.initialPageData) {
-		await initializePage(props.initialPageData)
-		components.value = props.initialPageData.components
-		loading.value = false
-	}
-})
-
-onUnmounted(() => {
-	// Cleanup
-	if (bridge) {
-		bridge.destroy()
-	}
-
-	window.removeEventListener('keydown', keyboardHandler)
-	document.removeEventListener('click', clickHandler, true)
-
-	document.body.classList.remove('blox-preview-mode', 'blox-edit-mode')
-})
-</script>
-
-<template>
-	<div class="blox-page-wrapper">
-		<div v-if="loading" class="blox-loading">
-			<p>Loading preview...</p>
-		</div>
-
-		<div v-else-if="!components.length && !previewMode" class="blox-empty-state">
-			<p>No blocks yet. Add a block from the editor to get started!</p>
-		</div>
-
-		<div v-else-if="!components.length && previewMode" class="blox-empty-preview">
-			<!-- Empty page in preview mode -->
-		</div>
-
-		<template v-for="comp in components" :key="comp.id">
-			<div
-				class="blox-block-wrapper" :class="{
-					'blox-highlight': !previewMode && highlightID === comp.id,
-					'blox-selected': !previewMode && selectedID === comp.id,
-				}" :data-block-id="comp.id" @click="!previewMode ? setFocus(comp.id, true) : null"
-				@mouseenter="!previewMode ? setHighlight(comp.id, true) : null"
-				@focus="!previewMode ? setHighlight(comp.id, true) : null"
-			>
-				<!-- Block label (edit mode only) -->
-				<p v-if="!previewMode" class="blox-block-label">
-					{{ comp.type }}
-					<span v-if="comp.data?.title"> | {{ comp.data.title }}</span>
-				</p>
-
-				<!-- Block content -->
-				<div
-					:id="comp.data.customId" :key="`${comp.id}-${updateCounter}`"
-					:style="getBlockStyles(comp.data, isMobile)" :class="getResponsiveClasses(comp.data)"
-				>
-					<component
-						:is="registeredComponents[comp.type]" v-if="registeredComponents[comp.type]"
-						v-bind="{ ...normalizeComponentData(comp.data), isMobile }"
-					/>
-					<div v-else class="blox-missing-component">
-						⚠️ Component not registered: {{ comp.type }}
-					</div>
-				</div>
-
-				<!-- Overlay for click handling (edit mode only) -->
-				<div v-if="!previewMode" class="blox-block-overlay" @click.self="setFocus(comp.id, true)" />
-			</div>
-		</template>
-	</div>
-</template>
-
-<style>
-/* Global styles for the Blox page */
-.blox-page-wrapper {
-	min-height: 100vh;
-	background-color: #fff;
-}
-
-.blox-page-wrapper * {
-	box-sizing: border-box;
-}
-</style>
-
-<style scoped>
-/* Loading state */
-.blox-loading {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-	font-size: 1.2rem;
-	color: #666;
-}
-
-/* Empty states */
-.blox-empty-state {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 100vh;
-	text-align: center;
-	font-size: 1.2rem;
-	color: #666;
-	padding: 2rem;
-}
-
-.blox-empty-preview {
-	min-height: 100vh;
-	background: #fff;
-}
-
-/* Block wrapper */
-.blox-block-wrapper {
-	position: relative;
-}
-
-/* Block overlay for click detection */
-.blox-block-overlay {
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-	z-index: 9;
-}
-
-/* Interactive elements should be clickable */
-.blox-block-wrapper button,
-.blox-block-wrapper a,
-.blox-block-wrapper input,
-.blox-block-wrapper textarea,
-.blox-block-wrapper select {
-	pointer-events: auto;
-	position: relative;
-	z-index: 10;
-}
-
-/* Preview mode - all interactions work */
-.blox-preview-mode .blox-block-wrapper * {
-	pointer-events: auto !important;
-}
-
-/* Block label */
-.blox-block-label {
-	position: absolute;
-	top: 0;
-	left: 0;
-	font-size: 0.625rem;
-	padding: 0.25rem 0.5rem;
-	color: white;
-	background: #9ca3af;
-	border-bottom-right-radius: 5px;
-	z-index: 10001;
-	opacity: 0;
-	transition: opacity 0.2s;
-}
-
-/* Highlight state */
-.blox-highlight {
-	background: rgba(156, 163, 175, 0.1);
-	outline: 1px solid #9ca3af;
-	outline-offset: -1px;
-}
-
-.blox-highlight .blox-block-label {
-	opacity: 1;
-	background: #9ca3af;
-}
-
-/* Selected state */
-.blox-selected {
-	background: rgba(88, 191, 235, 0.08) !important;
-	outline: 2px solid #3b82f6 !important;
-	outline-offset: -2px;
-	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-}
-
-.blox-selected .blox-block-label {
-	opacity: 1;
-	background: #3b82f6;
-}
-
-/* Missing component warning */
-.blox-missing-component {
-	padding: 2rem;
-	background: #fef3c7;
-	border: 2px dashed #f59e0b;
-	border-radius: 8px;
-	text-align: center;
-	font-size: 1rem;
-	color: #92400e;
-}
-</style>