claritykit-svelte/dist/utils/init.js

A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility

/**
 * Initialization utilities for ClarityKit
 * Provides setup functions for theme management and other core features
 */
import { getThemeManager } from './theme';
/**
 * Initializes ClarityKit theme management
 * Call this once when your application starts to ensure proper theme handling
 *
 * @param options - Configuration options for theme initialization
 */
export function initializeTheme(options = {}) {
    const { autoApply = true, defaultTheme = 'auto', target = document.documentElement } = options;
    if (typeof document === 'undefined') {
        console.warn('ClarityKit: Cannot initialize theme in non-browser environment');
        return;
    }
    try {
        const themeManager = getThemeManager();
        // Set default theme if no preference exists
        const currentPreference = themeManager.getThemePreference();
        if (currentPreference === 'auto' && defaultTheme !== 'auto') {
            // Only override if we have a specific default and current is auto (which might be the fallback)
            const storedValue = localStorage.getItem('ck-theme-preference');
            if (!storedValue) {
                themeManager.setTheme(defaultTheme);
            }
        }
        if (autoApply) {
            // Apply current theme immediately
            const currentTheme = themeManager.getCurrentTheme();
            // Apply to target element if different from document.documentElement
            if (target !== document.documentElement) {
                target.classList.remove('ck-theme-light', 'ck-theme-dark');
                target.classList.add(`ck-theme-${currentTheme}`);
            }
        }
        return themeManager;
    }
    catch (error) {
        console.error('ClarityKit: Failed to initialize theme:', error);
        return null;
    }
}
/**
 * Initializes all ClarityKit features
 * Convenience function that sets up theme management and other core features
 *
 * @param options - Configuration options for initialization
 */
export function initializeClarityKit(options = {}) {
    const { theme = {}, verbose = false } = options;
    if (verbose) {
        console.log('ClarityKit: Initializing...');
    }
    try {
        // Initialize theme management
        const themeManager = initializeTheme(theme);
        if (verbose) {
            if (themeManager) {
                console.log('ClarityKit: Theme management initialized successfully');
                console.log('Current theme:', themeManager.getCurrentTheme());
                console.log('Theme preference:', themeManager.getThemePreference());
            }
            else {
                console.warn('ClarityKit: Theme management initialization failed');
            }
        }
        // Add any other initialization logic here in the future
        // (e.g., focus management, reduced motion detection, etc.)
        if (verbose) {
            console.log('ClarityKit: Initialization complete');
        }
        return {
            themeManager,
            success: true
        };
    }
    catch (error) {
        console.error('ClarityKit: Initialization failed:', error);
        return {
            themeManager: null,
            success: false,
            error
        };
    }
}
/**
 * Sets up reduced motion preferences
 * Adds CSS class to document based on user's motion preferences
 */
export function setupReducedMotion() {
    if (typeof window === 'undefined')
        return;
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    function updateReducedMotion(e) {
        const shouldReduce = e ? e.matches : mediaQuery.matches;
        if (shouldReduce) {
            document.documentElement.classList.add('ck-reduced-motion');
        }
        else {
            document.documentElement.classList.remove('ck-reduced-motion');
        }
    }
    // Set initial state
    updateReducedMotion();
    // Listen for changes
    if (mediaQuery.addEventListener) {
        mediaQuery.addEventListener('change', updateReducedMotion);
        return () => mediaQuery.removeEventListener('change', updateReducedMotion);
    }
    else {
        // Fallback for older browsers
        mediaQuery.addListener(updateReducedMotion);
        return () => mediaQuery.removeListener(updateReducedMotion);
    }
}
/**
 * Sets up high contrast preferences
 * Adds CSS class to document based on user's contrast preferences
 */
export function setupHighContrast() {
    if (typeof window === 'undefined')
        return;
    const mediaQuery = window.matchMedia('(prefers-contrast: high)');
    function updateHighContrast(e) {
        const shouldUseHighContrast = e ? e.matches : mediaQuery.matches;
        if (shouldUseHighContrast) {
            document.documentElement.classList.add('ck-high-contrast');
        }
        else {
            document.documentElement.classList.remove('ck-high-contrast');
        }
    }
    // Set initial state
    updateHighContrast();
    // Listen for changes
    if (mediaQuery.addEventListener) {
        mediaQuery.addEventListener('change', updateHighContrast);
        return () => mediaQuery.removeEventListener('change', updateHighContrast);
    }
    else {
        // Fallback for older browsers
        mediaQuery.addListener(updateHighContrast);
        return () => mediaQuery.removeListener(updateHighContrast);
    }
}
/**
 * Sets up all accessibility preferences
 * Convenience function that sets up reduced motion, high contrast, etc.
 */
export function setupAccessibilityPreferences() {
    const cleanupReducedMotion = setupReducedMotion();
    const cleanupHighContrast = setupHighContrast();
    return () => {
        cleanupReducedMotion?.();
        cleanupHighContrast?.();
    };
}