@bagelink/blox 1.5.17 → 1.5.20

package/config/baseComponents.ts

@@ -1,364 +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 | (() => Promise<any>) // Support async components
-	content?: ComponentSchema[] // Content editing schema
-	settings?: ComponentSchema[] // Settings schema
-	category?: string // Component category for organization
-}
-
-/**
- * Individual component configurations for easy importing
- */
-export const TextConfig: ComponentConfig = {
-	id: 'Text',
-	label: 'Text',
-	icon: 'text_fields',
-	order: 10,
-	category: 'basic',
-	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' },
-			],
-		},
-	],
-}
-
-export const TitleConfig: ComponentConfig = {
-	id: 'Title',
-	label: 'Title',
-	icon: 'title',
-	order: 5,
-	category: 'basic',
-	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,
-		},
-	],
-}
-
-export const ButtonConfig: ComponentConfig = {
-	id: 'Button',
-	label: 'Button',
-	icon: 'smart_button',
-	order: 15,
-	category: 'basic',
-	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' },
-			],
-		},
-	],
-}
-
-export const ImageConfig: ComponentConfig = {
-	id: 'Image',
-	label: 'Image',
-	icon: 'image',
-	order: 20,
-	category: 'media',
-	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' },
-			],
-		},
-	],
-}
-
-export const SpacerConfig: ComponentConfig = {
-	id: 'Spacer',
-	label: 'Spacer',
-	icon: 'height',
-	order: 25,
-	category: 'layout',
-	component: Spacer,
-	content: [],
-	settings: [
-		{
-			type: 'number',
-			key: 'height',
-			label: 'Height (px)',
-			defaultValue: 40,
-		},
-	],
-}
-
-export const ContainerConfig: ComponentConfig = {
-	id: 'Container',
-	label: 'Container',
-	icon: 'view_module',
-	order: 30,
-	category: 'layout',
-	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,
-		},
-	],
-}
-
-/**
- * Base component configurations array
- */
-export const baseComponentConfigs: ComponentConfig[] = [
-	TextConfig,
-	TitleConfig,
-	ButtonConfig,
-	ImageConfig,
-	SpacerConfig,
-	ContainerConfig,
-]
-
-/**
- * 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 }