@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/event-calendar/composables/useColorManager.ts

@@ -0,0 +1,244 @@
+import type { CalendarEvent, EventColor } from '../types';
+
+export interface ColorConfig {
+	palette: EventColor[];
+	autoAssign: boolean;
+	allowDuplicates: boolean;
+	themeAware: boolean;
+}
+
+export interface ColorState {
+	usedColors: Map<string, EventColor>;
+	availableColors: EventColor[];
+	colorAssignments: Map<string, EventColor>;
+}
+
+const DEFAULT_COLOR_PALETTE: EventColor[] = ['sky', 'emerald', 'violet', 'rose', 'amber', 'orange'];
+
+/**
+ * Color management system for automatic unique color assignment
+ */
+export function useColorManager(events: Ref<CalendarEvent[]> | CalendarEvent[], config: Partial<ColorConfig> = {}) {
+	// Handle both ref and plain array inputs
+	const eventsRef = Array.isArray(events) ? ref(events) : events;
+	const colorConfig = ref<ColorConfig>({
+		palette: DEFAULT_COLOR_PALETTE,
+		autoAssign: true,
+		allowDuplicates: false,
+		themeAware: true,
+		...config,
+	});
+
+	const colorState = ref<ColorState>({
+		usedColors: new Map(),
+		availableColors: [...DEFAULT_COLOR_PALETTE],
+		colorAssignments: new Map(),
+	});
+
+	// Track which colors are currently in use
+	const usedColors = computed(() => {
+		const used = new Set<EventColor>();
+		eventsRef.value.forEach((event) => {
+			if (event.color) {
+				used.add(event.color);
+			}
+		});
+		return used;
+	});
+
+	// Get available colors that haven't been used yet
+	const availableColors = computed(() => {
+		if (colorConfig.value.allowDuplicates) {
+			return colorConfig.value.palette;
+		}
+		return colorConfig.value.palette.filter((color) => !usedColors.value.has(color));
+	});
+
+	// Get the next available color in the palette
+	const getNextAvailableColor = (): EventColor => {
+		const available: any = availableColors.value;
+
+		if (available.length > 0) {
+			return available[0];
+		}
+
+		// If no colors are available, cycle through the palette
+		const eventCount = eventsRef.value.length;
+		const paletteIndex = eventCount % colorConfig.value.palette.length;
+		const selectedColor = colorConfig.value.palette[paletteIndex];
+		return selectedColor || 'sky'; // Fallback to sky if undefined
+	};
+
+	// Assign a unique color to an event
+	const assignUniqueColor = (event: CalendarEvent): EventColor => {
+		// If event already has a color and we allow duplicates, keep it
+		if (event.color && colorConfig.value.allowDuplicates) {
+			return event.color;
+		}
+
+		// If event already has a unique color, keep it
+		if (event.color && availableColors.value.includes(event.color)) {
+			return event.color;
+		}
+
+		// Get the next available color
+		const newColor = getNextAvailableColor();
+		if (event.id) {
+			// Store the assignment
+			colorState.value.colorAssignments.set(event.id, newColor);
+		}
+		return newColor;
+	};
+
+	// Assign colors to all events that don't have them
+	const assignColorsToEvents = (eventList: CalendarEvent[]): CalendarEvent[] => {
+		if (!colorConfig.value.autoAssign) {
+			return eventList;
+		}
+
+		return eventList.map((event) => {
+			if (!event.color) {
+				return {
+					...event,
+					color: assignUniqueColor(event),
+				};
+			}
+			return event;
+		});
+	};
+
+	// Get color statistics
+	const getColorStats = () => {
+		const stats = new Map<EventColor, number>();
+
+		eventsRef.value.forEach((event) => {
+			if (event.color) {
+				stats.set(event.color, (stats.get(event.color) || 0) + 1);
+			}
+		});
+
+		return {
+			totalEvents: eventsRef.value.length,
+			coloredEvents: eventsRef.value.filter((e) => e.color).length,
+			colorDistribution: Object.fromEntries(stats),
+			availableColors: availableColors.value,
+			usedColors: Array.from(usedColors.value),
+		};
+	};
+
+	// Rebalance colors to ensure better distribution
+	const rebalanceColors = (): CalendarEvent[] => {
+		const eventsWithoutColors = eventsRef.value.filter((e) => !e.color);
+		const eventsWithColors = eventsRef.value.filter((e) => e.color);
+
+		// Clear existing assignments
+		colorState.value.colorAssignments.clear();
+
+		// Reassign colors to events without colors
+		const rebalanced = eventsWithoutColors.map((event: any, index) => {
+			const colorIndex = index % colorConfig.value.palette.length;
+			const assignedColor = colorConfig.value.palette[colorIndex] || 'sky';
+
+			colorState.value.colorAssignments.set(event.id, assignedColor);
+
+			return {
+				...event,
+				color: assignedColor,
+			};
+		});
+
+		return [...eventsWithColors, ...rebalanced];
+	};
+
+	// Update color configuration
+	const updateConfig = (newConfig: Partial<ColorConfig>) => {
+		colorConfig.value = { ...colorConfig.value, ...newConfig };
+
+		// Update available colors if palette changed
+		if (newConfig.palette) {
+			colorState.value.availableColors = [...newConfig.palette];
+		}
+	};
+
+	// Get theme-aware color classes for Tailwind
+	const getColorClasses = (color: EventColor) => {
+		const colorMap = {
+			sky: 'bg-sky-200 dark:bg-sky-700 border-sky-400 dark:border-sky-500 text-sky-800 dark:text-sky-100 hover:bg-sky-300 dark:hover:bg-sky-600',
+			emerald: 'bg-emerald-200 dark:bg-emerald-700 border-emerald-400 dark:border-emerald-500 text-emerald-800 dark:text-emerald-100 hover:bg-emerald-300 dark:hover:bg-emerald-600',
+			violet: 'bg-violet-200 dark:bg-violet-700 border-violet-400 dark:border-violet-500 text-violet-800 dark:text-violet-100 hover:bg-violet-300 dark:hover:bg-violet-600',
+			rose: 'bg-rose-200 dark:bg-rose-700 border-rose-400 dark:border-rose-500 text-rose-800 dark:text-rose-100 hover:bg-rose-300 dark:hover:bg-rose-600',
+			amber: 'bg-amber-200 dark:bg-amber-700 border-amber-400 dark:border-amber-500 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-amber-600',
+			orange: 'bg-orange-200 dark:bg-orange-700 border-orange-400 dark:border-orange-500 text-orange-800 dark:text-orange-100 hover:bg-orange-300 dark:hover:bg-orange-600',
+		};
+
+		return colorMap[color] || colorMap.sky;
+	};
+
+	// Get border-only classes for agenda view
+	const getBorderColorClasses = (color: EventColor) => {
+		const colorMap = {
+			sky: 'border-sky-500 dark:border-sky-400',
+			emerald: 'border-emerald-500 dark:border-emerald-400',
+			violet: 'border-violet-500 dark:border-violet-400',
+			rose: 'border-rose-500 dark:border-rose-400',
+			amber: 'border-amber-500 dark:border-amber-400',
+			orange: 'border-orange-500 dark:border-orange-400',
+		};
+
+		return colorMap[color] || colorMap.sky;
+	};
+
+	// Check if a color conflicts with existing events
+	const hasColorConflict = (color: EventColor, excludeEventId?: string): boolean => {
+		if (colorConfig.value.allowDuplicates) {
+			return false;
+		}
+
+		return eventsRef.value.some((event) => event.color === color && event.id !== excludeEventId);
+	};
+
+	// Resolve color conflicts
+	const resolveColorConflicts = (): CalendarEvent[] => {
+		const resolvedEvents: CalendarEvent[] = [];
+		const usedColorsInPass = new Set<EventColor>();
+
+		eventsRef.value.forEach((event) => {
+			let eventColor = event.color;
+
+			// If color is already used in this pass, assign a new one
+			if (eventColor && usedColorsInPass.has(eventColor)) {
+				eventColor = getNextAvailableColor();
+			}
+
+			// If still no color, assign one
+			if (!eventColor) {
+				eventColor = getNextAvailableColor();
+			}
+
+			usedColorsInPass.add(eventColor);
+			resolvedEvents.push({
+				...event,
+				color: eventColor,
+			});
+		});
+
+		return resolvedEvents;
+	};
+
+	return {
+		colorConfig,
+		colorState,
+		usedColors,
+		availableColors,
+		assignUniqueColor,
+		assignColorsToEvents,
+		getColorStats,
+		rebalanceColors,
+		updateConfig,
+		getColorClasses,
+		getBorderColorClasses,
+		hasColorConflict,
+		resolveColorConflicts,
+		getNextAvailableColor,
+	};
+}

package/src/runtime/components/base/event-calendar/composables/useCompatibility.ts

@@ -0,0 +1,318 @@
+interface BrowserCapabilities {
+	hasNativeUUID: boolean;
+	hasResizeObserver: boolean;
+	hasIntersectionObserver: boolean;
+	supportsTouch: boolean;
+	supportsDragDrop: boolean;
+	supportsServiceWorker: boolean;
+	supportsLocalStorage: boolean;
+	supportsWebComponents: boolean;
+}
+
+interface PolyfillConfig {
+	autoLoad: boolean;
+	uuidFallback: boolean;
+	resizeObserverFallback: boolean;
+	touchEventsFallback: boolean;
+}
+
+const DEFAULT_POLYFILL_CONFIG: PolyfillConfig = {
+	autoLoad: true,
+	uuidFallback: true,
+	resizeObserverFallback: true,
+	touchEventsFallback: true,
+};
+
+/**
+ * Browser compatibility layer with polyfill management
+ */
+export function useCompatibility(config?: PolyfillConfig) {
+	const normalizedConfig = config ?? DEFAULT_POLYFILL_CONFIG;
+	const capabilities = ref<BrowserCapabilities>({
+		hasNativeUUID: false,
+		hasResizeObserver: false,
+		hasIntersectionObserver: false,
+		supportsTouch: false,
+		supportsDragDrop: false,
+		supportsServiceWorker: false,
+		supportsLocalStorage: false,
+		supportsWebComponents: false,
+	});
+
+	const isPolyfillsLoaded = ref(false);
+	const polyfillErrors = ref<string[]>([]);
+
+	// Feature detection
+	const detectCapabilities = (): void => {
+		if (globalThis.window === undefined) return;
+
+		capabilities.value = {
+			hasNativeUUID: typeof crypto?.randomUUID === 'function',
+			hasResizeObserver: typeof ResizeObserver !== 'undefined',
+			hasIntersectionObserver: typeof IntersectionObserver !== 'undefined',
+			supportsTouch: 'ontouchstart' in globalThis || navigator.maxTouchPoints > 0,
+			supportsDragDrop: 'draggable' in document.createElement('div'),
+			supportsServiceWorker: 'serviceWorker' in navigator,
+			supportsLocalStorage: typeof Storage !== 'undefined',
+			supportsWebComponents: 'customElements' in globalThis,
+		};
+	};
+
+	// UUID polyfill
+	const ensureUUID = (): string => {
+		if (capabilities.value.hasNativeUUID) {
+			return crypto.randomUUID();
+		}
+
+		// Fallback UUID v4 using cryptographically secure random values
+		const bytes = new Uint8Array(16);
+		crypto.getRandomValues(bytes);
+		bytes[6] = (bytes[6]! & 0x0f) | 0x40; // version 4
+		bytes[8] = (bytes[8]! & 0x3f) | 0x80; // variant bits (10xx)
+		const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+		return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+	};
+
+	// ResizeObserver polyfill
+	const createResizeObserver = (callback: ResizeObserverCallback): ResizeObserver | null => {
+		if (capabilities.value.hasResizeObserver) {
+			return new ResizeObserver(callback);
+		}
+
+		// Simple fallback using window resize
+		if (normalizedConfig.resizeObserverFallback) {
+			return createResizeObserverFallback(callback);
+		}
+
+		return null;
+	};
+
+	const createResizeObserverFallback = (callback: ResizeObserverCallback): ResizeObserver => {
+		const observedElements = new Set<Element>();
+		let rafId: number | null = null;
+
+		const observer = {
+			observe: (element: Element) => {
+				observedElements.add(element);
+				rafId ??= requestAnimationFrame(checkSizes);
+			},
+			unobserve: (element: Element) => {
+				observedElements.delete(element);
+				if (observedElements.size === 0 && rafId !== null) {
+					cancelAnimationFrame(rafId);
+					rafId = null;
+				}
+			},
+			disconnect: () => {
+				observedElements.clear();
+				if (rafId !== null) {
+					cancelAnimationFrame(rafId);
+					rafId = null;
+				}
+			},
+		} as ResizeObserver;
+
+		const checkSizes = () => {
+			const entries: ResizeObserverEntry[] = [];
+
+			observedElements.forEach((element) => {
+				const rect = element.getBoundingClientRect();
+				entries.push({
+					target: element,
+					contentRect: rect,
+					borderBoxSize: [{ blockSize: rect.height, inlineSize: rect.width }],
+					contentBoxSize: [{ blockSize: rect.height, inlineSize: rect.width }],
+					devicePixelContentBoxSize: [{ blockSize: rect.height, inlineSize: rect.width }],
+				} as ResizeObserverEntry);
+			});
+
+			if (entries.length > 0) {
+				callback(entries, observer);
+			}
+
+			rafId = requestAnimationFrame(checkSizes);
+		};
+
+		return observer;
+	};
+
+	// Use normalizedConfig instead of config
+
+	// Touch event normalization
+	const normalizePointerEvent = (
+		event: MouseEvent | TouchEvent
+	): {
+		clientX: number;
+		clientY: number;
+		pageX: number;
+		pageY: number;
+	} => {
+		if ('touches' in event && event.touches.length > 0) {
+			const touch = event.touches[0];
+			if (touch) {
+				return {
+					clientX: touch.clientX,
+					clientY: touch.clientY,
+					pageX: touch.pageX,
+					pageY: touch.pageY,
+				};
+			}
+		}
+
+		const mouseEvent = event as MouseEvent;
+		return {
+			clientX: mouseEvent.clientX,
+			clientY: mouseEvent.clientY,
+			pageX: mouseEvent.pageX,
+			pageY: mouseEvent.pageY,
+		};
+	};
+
+	// Safe localStorage wrapper
+	const safeLocalStorage = {
+		getItem: (key: string): string | null => {
+			if (!capabilities.value.supportsLocalStorage) return null;
+
+			try {
+				return localStorage.getItem(key);
+			} catch {
+				return null;
+			}
+		},
+
+		setItem: (key: string, value: string): boolean => {
+			if (!capabilities.value.supportsLocalStorage) return false;
+
+			try {
+				localStorage.setItem(key, value);
+				return true;
+			} catch {
+				return false;
+			}
+		},
+
+		removeItem: (key: string): boolean => {
+			if (!capabilities.value.supportsLocalStorage) return false;
+
+			try {
+				localStorage.removeItem(key);
+				return true;
+			} catch {
+				return false;
+			}
+		},
+	};
+
+	// Feature-based CSS classes for styling
+	const getFeatureClasses = (): string[] => {
+		const classes: string[] = [];
+		const caps = capabilities.value;
+
+		if (caps.supportsTouch) classes.push('touch-device');
+		if (!caps.supportsDragDrop) classes.push('no-native-drag');
+		if (!caps.hasNativeUUID) classes.push('uuid-polyfill');
+		if (!caps.hasResizeObserver) classes.push('resize-observer-polyfill');
+
+		return classes;
+	};
+
+	// Mobile-specific utilities
+	const isMobileDevice = (): boolean => {
+		return capabilities.value.supportsTouch && window.innerWidth <= 768;
+	};
+
+	const preventZoom = (element: HTMLElement): void => {
+		if (!capabilities.value.supportsTouch) return;
+
+		element.addEventListener(
+			'touchstart',
+			(e) => {
+				if (e.touches.length > 1) {
+					e.preventDefault();
+				}
+			},
+			{ passive: false }
+		);
+	};
+
+	// Load polyfills dynamically
+	const loadPolyfills = async (): Promise<void> => {
+		if (isPolyfillsLoaded.value) return;
+
+		const polyfillsToLoad: Promise<void>[] = [];
+
+		// Load critical polyfills
+		if (!capabilities.value.hasIntersectionObserver) {
+			polyfillsToLoad.push(loadIntersectionObserverPolyfill());
+		}
+
+		if (!capabilities.value.hasResizeObserver && normalizedConfig.resizeObserverFallback) {
+			// ResizeObserver polyfill is handled in createResizeObserver
+		}
+
+		try {
+			await Promise.all(polyfillsToLoad);
+			isPolyfillsLoaded.value = true;
+		} catch (error) {
+			polyfillErrors.value.push(`Failed to load polyfills: ${error}`);
+		}
+	};
+
+	const loadIntersectionObserverPolyfill = async (): Promise<void> => {
+		// In a real implementation, you'd load this from CDN or bundle
+		// For now, just mark as loaded
+		await new Promise((resolve) => setTimeout(resolve, 100));
+	};
+
+	// Initialize
+	const initialize = async (): Promise<void> => {
+		detectCapabilities();
+
+		if (normalizedConfig.autoLoad) {
+			await loadPolyfills();
+		}
+
+		// Apply feature classes to document
+		if (typeof document !== 'undefined') {
+			const classes = getFeatureClasses();
+			document.documentElement.classList.add(...classes);
+		}
+	};
+
+	// Browser-specific optimizations
+	const getBrowserOptimizations = () => {
+		const userAgent = navigator.userAgent.toLowerCase();
+		const isWebKit = userAgent.includes('webkit');
+		const isFirefox = userAgent.includes('firefox');
+		const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+
+		return {
+			useTransform3d: isWebKit, // Better performance on WebKit
+			useWillChange: !isFirefox, // Firefox has issues with will-change
+			useBackfaceVisibility: isWebKit,
+			preventTouchAction: isSafari, // Safari needs explicit touch-action
+		};
+	};
+
+	return {
+		// State
+		capabilities: readonly(capabilities),
+		isPolyfillsLoaded: readonly(isPolyfillsLoaded),
+		polyfillErrors: readonly(polyfillErrors),
+
+		// Utilities
+		ensureUUID,
+		createResizeObserver,
+		normalizePointerEvent,
+		safeLocalStorage,
+		getFeatureClasses,
+		isMobileDevice,
+		preventZoom,
+		getBrowserOptimizations,
+
+		// Initialization
+		initialize,
+		detectCapabilities,
+		loadPolyfills,
+	};
+}