@bagelink/blox 1.5.15 → 1.5.20

package/components/base/Title.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-/**
- * Base Title Component
- *
- * Renders headings with customizable tag and styling
- */
-
-interface Props {
-	title?: string
-	subTitle?: string
-	tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-	align?: 'left' | 'center' | 'right'
-}
-
-const { title = '', subTitle = '', tag = 'h2', align = 'left' } = defineProps<Props>()
-</script>
-
-<template>
-	<div :class="`title-wrapper text-align-${align}`">
-		<component :is="tag" v-if="title" class="title">
-			{{ title }}
-		</component>
-		<p v-if="subTitle" class="subtitle">
-			{{ subTitle }}
-		</p>
-	</div>
-</template>
-
-<style scoped>
-.title-wrapper {
-	margin-bottom: 1rem;
-}
-
-.title {
-	margin: 0 0 0.5rem 0;
-	line-height: 1.2;
-}
-
-.subtitle {
-	margin: 0;
-	opacity: 0.8;
-}
-
-.text-align-left {
-	text-align: left;
-}
-
-.text-align-center {
-	text-align: center;
-}
-
-.text-align-right {
-	text-align: right;
-}
-</style>

package/components/index.ts

@@ -1,20 +0,0 @@
-/**
- * Component Exports
- *
- * Export all base components for easy importing
- */
-
-export { default as Button } from './base/Button.vue'
-export * from './base/Button.vue'
-export { default as Container } from './base/Container.vue'
-export * from './base/Container.vue'
-export { default as Image } from './base/Image.vue'
-export * from './base/Image.vue'
-
-export { default as Spacer } from './base/Spacer.vue'
-export * from './base/Spacer.vue'
-export { default as Text } from './base/Text.vue'
-// Re-export for convenience
-export * from './base/Text.vue'
-export { default as Title } from './base/Title.vue'
-export * from './base/Title.vue'

package/config/baseComponents.ts

@@ -1,342 +0,0 @@
-/**
- * Base Component Configuration
- *
- * Defines all built-in components with their Vue components and editor schemas
- */
-
-import type { ComponentConstructor } from '../core/types'
-
-import Button from '../components/base/Button.vue'
-import Container from '../components/base/Container.vue'
-import Image from '../components/base/Image.vue'
-import Spacer from '../components/base/Spacer.vue'
-// Import base components
-import Text from '../components/base/Text.vue'
-import Title from '../components/base/Title.vue'
-
-export interface ComponentSchema {
-	type: 'text' | 'richtext' | 'number' | 'checkbox' | 'select' | 'upload' | 'color' | 'array' | 'row'
-	key: string
-	label: string
-	defaultValue?: any
-	options?: Array<{ label: string, value: any }>
-	height?: string | number
-	fields?: ComponentSchema[] // For array and row types
-	class?: string
-	placeholder?: string
-	[key: string]: any
-}
-
-export interface ComponentConfig {
-	id: string
-	label: string
-	icon: string
-	img?: string
-	order?: number
-	component: ComponentConstructor
-	content?: ComponentSchema[] // Content editing schema
-	settings?: ComponentSchema[] // Settings schema
-}
-
-/**
- * Base component configurations
- */
-export const baseComponentConfigs: ComponentConfig[] = [
-	{
-		id: 'Text',
-		label: 'Text',
-		icon: 'text_fields',
-		order: 10,
-		component: Text,
-		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,
-		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,
-		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,
-		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,
-		content: [],
-		settings: [
-			{
-				type: 'number',
-				key: 'height',
-				label: 'Height (px)',
-				defaultValue: 40,
-			},
-		],
-	},
-	{
-		id: 'Container',
-		label: 'Container',
-		icon: 'view_module',
-		order: 30,
-		component: Container,
-		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,
-			},
-		],
-	},
-]
-
-/**
- * Get all base component configurations
- */
-export function getBaseComponentConfigs(): ComponentConfig[] {
-	return baseComponentConfigs
-}
-
-/**
- * Get a base component configuration by ID
- */
-export function getBaseComponentConfig(id: string): ComponentConfig | undefined {
-	return baseComponentConfigs.find(config => config.id === id)
-}

package/core/communication.ts

@@ -1,140 +0,0 @@
-/**
- * PostMessage Communication Protocol
- *
- * Handles secure communication between editor and external preview
- */
-
-import type { EditorMessage, MessageType } from './types'
-
-export type MessageHandler = (message: EditorMessage) => void
-
-interface CommunicationConfig {
-	origin: string // Allowed origin for security
-	targetWindow?: Window // Target window for sending messages
-	onMessage?: MessageHandler
-}
-
-export class CommunicationBridge {
-	private origin: string
-	private targetWindow: Window
-	private handlers: Map<MessageType, Set<MessageHandler>>
-	private boundMessageHandler: (event: MessageEvent) => void
-
-	constructor(config: CommunicationConfig) {
-		this.origin = config.origin
-		this.targetWindow = config.targetWindow || window.parent
-		this.handlers = new Map()
-		this.boundMessageHandler = this.handleMessage.bind(this)
-
-		// Setup listener
-		window.addEventListener('message', this.boundMessageHandler)
-
-		console.log(`🌉 Communication bridge initialized for origin: ${this.origin}`)
-	}
-
-	/**
-	 * Handle incoming messages
-	 */
-	private handleMessage(event: MessageEvent): void {
-		// Security: verify origin
-		if (this.origin !== '*' && event.origin !== this.origin) {
-			console.warn(`⚠️ Rejected message from unauthorized origin: ${event.origin}`)
-			return
-		}
-
-		const { type, message, data, isMobile } = event.data as EditorMessage
-
-		if (!type) {
-			// Not a valid editor message
-			return
-		}
-
-		console.log(`📨 Received message: ${type}`, { message, data, isMobile })
-
-		// Call registered handlers for this message type
-		const typeHandlers = this.handlers.get(type as MessageType)
-		if (typeHandlers) {
-			typeHandlers.forEach((handler) => {
-				try {
-					handler({ type: type as MessageType, message, data, isMobile })
-				} catch (error) {
-					console.error(`Error in handler for ${type}:`, error)
-				}
-			})
-		}
-
-		// Call global handlers
-		const globalHandlers = this.handlers.get('*' as MessageType)
-		if (globalHandlers) {
-			globalHandlers.forEach((handler) => {
-				try {
-					handler({ type: type as MessageType, message, data, isMobile })
-				} catch (error) {
-					console.error('Error in global handler:', error)
-				}
-			})
-		}
-	}
-
-	/**
-	 * Register a handler for a specific message type
-	 */
-	on(type: MessageType | '*', handler: MessageHandler): () => void {
-		if (!this.handlers.has(type as MessageType)) {
-			this.handlers.set(type as MessageType, new Set())
-		}
-
-		this.handlers.get(type as MessageType)!.add(handler)
-
-		// Return unsubscribe function
-		return () => { this.off(type, handler) }
-	}
-
-	/**
-	 * Unregister a handler
-	 */
-	off(type: MessageType | '*', handler: MessageHandler): void {
-		const typeHandlers = this.handlers.get(type as MessageType)
-		if (typeHandlers) {
-			typeHandlers.delete(handler)
-		}
-	}
-
-	/**
-	 * Send a message to the target window (editor)
-	 */
-	send(type: MessageType, message?: any, data?: any): void {
-		const payload: EditorMessage = { type, message, data }
-		this.targetWindow.postMessage(payload, this.origin === '*' ? '*' : this.origin)
-		console.log(`📤 Sent message: ${type}`, payload)
-	}
-
-	/**
-	 * Cleanup
-	 */
-	destroy(): void {
-		window.removeEventListener('message', this.boundMessageHandler)
-		this.handlers.clear()
-		console.log('🧹 Communication bridge destroyed')
-	}
-}
-
-/**
- * Create a communication bridge instance
- */
-export function createCommunicationBridge(config: CommunicationConfig): CommunicationBridge {
-	return new CommunicationBridge(config)
-}
-
-/**
- * Simple send helper for one-off messages
- */
-export function sendMessage(
-	type: MessageType,
-	message?: any,
-	targetWindow: Window = window.parent,
-	origin: string = '*'
-): void {
-	const payload: EditorMessage = { type, message }
-	targetWindow.postMessage(payload, origin)
-}

package/core/registry.ts

@@ -1,108 +0,0 @@
-/**
- * Component Registry System
- *
- * Allows external sites to register their own component implementations
- * that map to the block types from the editor.
- */
-
-import type { ComponentRegistry, ComponentConstructor } from './types'
-
-// Global registry
-const registry: ComponentRegistry = {}
-
-/**
- * Register a component for a specific block type
- * @param type - The block type (e.g., 'Text', 'Button', 'Hero')
- * @param component - The Vue component to render
- */
-export function registerComponent(type: string, component: ComponentConstructor): void {
-	if (registry[type]) {
-		console.warn(`Component "${type}" is already registered. Overwriting...`)
-	}
-	registry[type] = component
-	console.log(`✅ Registered component: ${type}`)
-}
-
-/**
- * Register multiple components at once
- * @param components - Object mapping block types to components
- */
-export function registerComponents(components: ComponentRegistry): void {
-	Object.entries(components).forEach(([type, component]) => {
-		registerComponent(type, component)
-	})
-}
-
-/**
- * Get a registered component by type
- * @param type - The block type
- * @returns The component or undefined if not found
- */
-export function getComponent(type: string): ComponentConstructor | undefined {
-	return registry[type]
-}
-
-/**
- * Check if a component type is registered
- * @param type - The block type
- * @returns True if registered
- */
-export function hasComponent(type: string): boolean {
-	return type in registry
-}
-
-/**
- * Get all registered components
- * @returns The full registry
- */
-export function getAllComponents(): ComponentRegistry {
-	return { ...registry }
-}
-
-/**
- * Unregister a component
- * @param type - The block type to remove
- */
-export function unregisterComponent(type: string): void {
-	delete registry[type]
-	console.log(`❌ Unregistered component: ${type}`)
-}
-
-/**
- * Clear all registered components
- */
-export function clearRegistry(): void {
-	Object.keys(registry).forEach(key => delete registry[key])
-	console.log('🗑️ Registry cleared')
-}
-
-/**
- * Get a list of all registered component types
- * @returns Array of registered type names
- */
-export function getRegisteredTypes(): string[] {
-	return Object.keys(registry)
-}
-
-/**
- * Create a namespaced registry for multi-tenant scenarios
- */
-export function createNamespacedRegistry(namespace: string) {
-	const namespacedRegistry: ComponentRegistry = {}
-
-	return {
-		register: (type: string, component: ComponentConstructor) => {
-			const key = `${namespace}:${type}`
-			namespacedRegistry[key] = component
-			registry[key] = component
-		},
-		get: (type: string) => {
-			const key = `${namespace}:${type}`
-			return namespacedRegistry[key]
-		},
-		getAll: () => ({ ...namespacedRegistry }),
-	}
-}
-
-// Export the registry for debugging purposes
-export { registry }