svelte-theme-picker 1.0.0

package/dist/catalog.js

@@ -0,0 +1,160 @@
+/**
+ * Convert a simple themes record to a catalog with default metadata
+ */
+export function themesToCatalog(themes, defaultMeta = {}) {
+    const catalog = {};
+    for (const [id, theme] of Object.entries(themes)) {
+        catalog[id] = {
+            theme,
+            meta: { active: true, ...defaultMeta },
+        };
+    }
+    return catalog;
+}
+/**
+ * Extract just the themes from a catalog (for use with ThemePicker)
+ */
+export function catalogToThemes(catalog) {
+    const themes = {};
+    for (const [id, entry] of Object.entries(catalog)) {
+        themes[id] = entry.theme;
+    }
+    return themes;
+}
+/**
+ * Filter themes from a catalog based on options
+ */
+export function filterCatalog(catalog, options = {}) {
+    const { activeOnly = true, tags, anyTags, excludeTags, } = options;
+    const filtered = {};
+    for (const [id, entry] of Object.entries(catalog)) {
+        const meta = entry.meta || {};
+        const themeTags = meta.tags || [];
+        // Filter by active status
+        if (activeOnly && meta.active === false) {
+            continue;
+        }
+        // Filter by required tags (ALL must match)
+        if (tags && tags.length > 0) {
+            const hasAllTags = tags.every((tag) => themeTags.includes(tag));
+            if (!hasAllTags)
+                continue;
+        }
+        // Filter by any tags (ANY must match)
+        if (anyTags && anyTags.length > 0) {
+            const hasAnyTag = anyTags.some((tag) => themeTags.includes(tag));
+            if (!hasAnyTag)
+                continue;
+        }
+        // Exclude by tags
+        if (excludeTags && excludeTags.length > 0) {
+            const hasExcludedTag = excludeTags.some((tag) => themeTags.includes(tag));
+            if (hasExcludedTag)
+                continue;
+        }
+        filtered[id] = entry;
+    }
+    return filtered;
+}
+/**
+ * Get only active themes from a catalog as a simple themes record
+ */
+export function getActiveThemes(catalog) {
+    return catalogToThemes(filterCatalog(catalog, { activeOnly: true }));
+}
+/**
+ * Get themes by tag from a catalog
+ */
+export function getThemesByTag(catalog, tag) {
+    return catalogToThemes(filterCatalog(catalog, { tags: [tag] }));
+}
+/**
+ * Get themes by any of the given tags
+ */
+export function getThemesByAnyTag(catalog, tags) {
+    return catalogToThemes(filterCatalog(catalog, { anyTags: tags }));
+}
+/**
+ * Sort catalog entries by their order property
+ */
+export function sortCatalog(catalog) {
+    const entries = Object.entries(catalog);
+    entries.sort((a, b) => {
+        const orderA = a[1].meta?.order ?? 999;
+        const orderB = b[1].meta?.order ?? 999;
+        return orderA - orderB;
+    });
+    return Object.fromEntries(entries);
+}
+/**
+ * Get all unique tags from a catalog
+ */
+export function getCatalogTags(catalog) {
+    const tagSet = new Set();
+    for (const entry of Object.values(catalog)) {
+        const tags = entry.meta?.tags || [];
+        for (const tag of tags) {
+            tagSet.add(tag);
+        }
+    }
+    return Array.from(tagSet).sort();
+}
+/**
+ * Create a catalog entry with defaults
+ */
+export function createCatalogEntry(theme, meta = {}) {
+    return {
+        theme,
+        meta: {
+            active: true,
+            tags: [],
+            ...meta,
+        },
+    };
+}
+/**
+ * Merge multiple catalogs (later catalogs override earlier ones)
+ */
+export function mergeCatalogs(...catalogs) {
+    return Object.assign({}, ...catalogs);
+}
+/**
+ * Type guard to check if a value is a valid theme entry
+ */
+function isValidThemeEntry(entry) {
+    if (typeof entry !== 'object' || entry === null) {
+        return false;
+    }
+    const obj = entry;
+    if (typeof obj.theme !== 'object' || obj.theme === null) {
+        return false;
+    }
+    const theme = obj.theme;
+    return (typeof theme.name === 'string' &&
+        typeof theme.description === 'string' &&
+        typeof theme.colors === 'object' &&
+        theme.colors !== null &&
+        typeof theme.fonts === 'object' &&
+        theme.fonts !== null &&
+        typeof theme.effects === 'object' &&
+        theme.effects !== null);
+}
+/**
+ * Load themes from a JSON object (useful for loading from files)
+ * The JSON should match the ThemeCatalog structure
+ * @throws {Error} If the JSON is not a valid ThemeCatalog
+ */
+export function loadCatalogFromJSON(json) {
+    if (typeof json !== 'object' || json === null) {
+        throw new Error('Invalid catalog JSON: expected an object');
+    }
+    const catalog = {};
+    const entries = Object.entries(json);
+    for (const [id, entry] of entries) {
+        if (!isValidThemeEntry(entry)) {
+            throw new Error(`Invalid theme entry for "${id}": missing required fields (theme.name, theme.description, theme.colors, theme.fonts, theme.effects)`);
+        }
+        catalog[id] = entry;
+    }
+    return catalog;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ThemePicker } from './ThemePicker.svelte';
+export type { Theme, ThemeColors, ThemeFonts, ThemeEffects, ThemePickerConfig, ThemeMeta, ThemeCatalogEntry, ThemeCatalog, ThemeFilterOptions, } from './types.js';
+export { createThemeStore, applyTheme, themeStore, type ThemeStore, } from './store.js';
+export { defaultThemes, defaultThemeCatalog, DEFAULT_THEME_ID, dreamy, cyberpunk, sunset, ocean, mono, sakura, aurora, galaxy, milk, light, } from './themes.js';
+export { themesToCatalog, catalogToThemes, filterCatalog, getActiveThemes, getThemesByTag, getThemesByAnyTag, sortCatalog, getCatalogTags, createCatalogEntry, mergeCatalogs, loadCatalogFromJSON, } from './catalog.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+// Components
+export { default as ThemePicker } from './ThemePicker.svelte';
+// Store
+export { createThemeStore, applyTheme, themeStore, } from './store.js';
+// Default themes
+export { defaultThemes, defaultThemeCatalog, DEFAULT_THEME_ID, dreamy, cyberpunk, sunset, ocean, mono, sakura, aurora, galaxy, milk, light, } from './themes.js';
+// Catalog utilities
+export { themesToCatalog, catalogToThemes, filterCatalog, getActiveThemes, getThemesByTag, getThemesByAnyTag, sortCatalog, getCatalogTags, createCatalogEntry, mergeCatalogs, loadCatalogFromJSON, } from './catalog.js';

package/dist/store.d.ts

@@ -0,0 +1,36 @@
+import { type Writable } from 'svelte/store';
+import type { Theme, ThemePickerConfig } from './types.js';
+/**
+ * Theme store interface with preview support
+ */
+export interface ThemeStore extends Writable<string> {
+    /** Set the current theme by ID (persists to localStorage) */
+    setTheme: (themeId: string) => void;
+    /** Get a theme by ID */
+    getTheme: (themeId: string) => Theme | undefined;
+    /** Get all available themes */
+    getAllThemes: () => Record<string, Theme>;
+    /** Get the current theme ID (may be preview theme) */
+    getCurrentThemeId: () => string;
+    /** Get the persisted theme ID (ignores preview) */
+    getPersistedThemeId: () => string;
+    /** Preview a theme temporarily without persisting */
+    previewTheme: (themeId: string) => void;
+    /** Revert from preview back to the persisted theme */
+    revertPreview: () => void;
+    /** Check if currently in preview mode */
+    isPreviewMode: () => boolean;
+}
+/**
+ * Create a theme store with the given configuration
+ */
+export declare function createThemeStore(config?: ThemePickerConfig): ThemeStore;
+/**
+ * Apply a theme's CSS variables to the document.
+ * Uses requestAnimationFrame to batch DOM updates for better performance.
+ */
+export declare function applyTheme(theme: Theme, prefix?: string): void;
+/**
+ * Default theme store instance
+ */
+export declare const themeStore: ThemeStore;

package/dist/store.js

@@ -0,0 +1,118 @@
+import { writable } from 'svelte/store';
+import { defaultThemes, DEFAULT_THEME_ID } from './themes.js';
+const isBrowser = typeof window !== 'undefined';
+/**
+ * Create a theme store with the given configuration
+ */
+export function createThemeStore(config = {}) {
+    const { storageKey = 'svelte-theme-picker', defaultTheme = DEFAULT_THEME_ID, themes = defaultThemes, } = config;
+    function getInitialTheme() {
+        if (isBrowser) {
+            try {
+                const stored = localStorage.getItem(storageKey);
+                if (stored && themes[stored]) {
+                    return stored;
+                }
+            }
+            catch (_error) {
+                // localStorage may be unavailable (private browsing, storage quota exceeded, etc.)
+                // Fall through to default theme
+            }
+        }
+        return themes[defaultTheme] ? defaultTheme : Object.keys(themes)[0] || DEFAULT_THEME_ID;
+    }
+    let persistedThemeId = getInitialTheme();
+    let currentThemeId = persistedThemeId;
+    let previewMode = false;
+    const { subscribe, set, update } = writable(currentThemeId);
+    const store = {
+        subscribe,
+        set,
+        update,
+        setTheme: (themeId) => {
+            if (themes[themeId]) {
+                persistedThemeId = themeId;
+                currentThemeId = themeId;
+                previewMode = false;
+                set(themeId);
+                if (isBrowser) {
+                    try {
+                        localStorage.setItem(storageKey, themeId);
+                    }
+                    catch (_error) {
+                        // localStorage may be unavailable (private browsing, storage quota exceeded, etc.)
+                        // Theme is still applied in memory, just won't persist across sessions
+                    }
+                }
+            }
+        },
+        getTheme: (themeId) => themes[themeId],
+        getAllThemes: () => themes,
+        getCurrentThemeId: () => currentThemeId,
+        getPersistedThemeId: () => persistedThemeId,
+        previewTheme: (themeId) => {
+            if (themes[themeId]) {
+                currentThemeId = themeId;
+                previewMode = true;
+                set(themeId);
+                // Note: Does NOT persist to localStorage
+            }
+        },
+        revertPreview: () => {
+            if (previewMode) {
+                currentThemeId = persistedThemeId;
+                previewMode = false;
+                set(persistedThemeId);
+            }
+        },
+        isPreviewMode: () => previewMode,
+    };
+    return store;
+}
+/**
+ * Apply a theme's CSS variables to the document.
+ * Uses requestAnimationFrame to batch DOM updates for better performance.
+ */
+export function applyTheme(theme, prefix = '') {
+    if (!isBrowser)
+        return;
+    // Use requestAnimationFrame to batch all CSS variable updates into a single frame
+    // This prevents multiple repaints/reflows during theme transitions
+    requestAnimationFrame(() => {
+        const root = document.documentElement;
+        const p = prefix ? `${prefix}-` : '';
+        // Background colors
+        root.style.setProperty(`--${p}bg-deep`, theme.colors.bgDeep);
+        root.style.setProperty(`--${p}bg-mid`, theme.colors.bgMid);
+        root.style.setProperty(`--${p}bg-card`, theme.colors.bgCard);
+        root.style.setProperty(`--${p}bg-glow`, theme.colors.bgGlow);
+        root.style.setProperty(`--${p}bg-overlay`, theme.colors.bgOverlay);
+        // Primary palette
+        root.style.setProperty(`--${p}primary-1`, theme.colors.primary1);
+        root.style.setProperty(`--${p}primary-2`, theme.colors.primary2);
+        root.style.setProperty(`--${p}primary-3`, theme.colors.primary3);
+        root.style.setProperty(`--${p}primary-4`, theme.colors.primary4);
+        root.style.setProperty(`--${p}primary-5`, theme.colors.primary5);
+        root.style.setProperty(`--${p}primary-6`, theme.colors.primary6);
+        // Accent colors
+        root.style.setProperty(`--${p}accent-1`, theme.colors.accent1);
+        root.style.setProperty(`--${p}accent-2`, theme.colors.accent2);
+        root.style.setProperty(`--${p}accent-3`, theme.colors.accent3);
+        // Text colors
+        root.style.setProperty(`--${p}text-primary`, theme.colors.textPrimary);
+        root.style.setProperty(`--${p}text-secondary`, theme.colors.textSecondary);
+        root.style.setProperty(`--${p}text-muted`, theme.colors.textMuted);
+        // Fonts
+        root.style.setProperty(`--${p}font-heading`, theme.fonts.heading);
+        root.style.setProperty(`--${p}font-body`, theme.fonts.body);
+        root.style.setProperty(`--${p}font-mono`, theme.fonts.mono);
+        // Effects
+        root.style.setProperty(`--${p}shadow-glow`, `0 0 40px ${theme.effects.glowColor}`);
+        root.style.setProperty(`--${p}glow-color`, theme.effects.glowColor);
+        root.style.setProperty(`--${p}glow-intensity`, theme.effects.glowIntensity.toString());
+    });
+}
+/**
+ * Default theme store instance
+ */
+export const themeStore = createThemeStore();

package/dist/themes.d.ts

@@ -0,0 +1,54 @@
+import type { Theme, ThemeCatalog } from './types.js';
+/**
+ * Dreamy pastel theme with soft purples and pinks
+ */
+export declare const dreamy: Theme;
+/**
+ * High contrast cyberpunk neon theme
+ */
+export declare const cyberpunk: Theme;
+/**
+ * Warm sunset oranges and purples
+ */
+export declare const sunset: Theme;
+/**
+ * Deep ocean blues and teals
+ */
+export declare const ocean: Theme;
+/**
+ * Clean monochromatic with purple accents
+ */
+export declare const mono: Theme;
+/**
+ * Cherry blossom inspired pinks
+ */
+export declare const sakura: Theme;
+/**
+ * Aurora borealis greens and purples
+ */
+export declare const aurora: Theme;
+/**
+ * Deep space with cosmic nebulae
+ */
+export declare const galaxy: Theme;
+/**
+ * Clean, creamy light theme
+ */
+export declare const milk: Theme;
+/**
+ * Modern light theme with purple accents
+ */
+export declare const light: Theme;
+/**
+ * Default themes included with the package
+ */
+export declare const defaultThemes: Record<string, Theme>;
+/**
+ * Default theme ID
+ */
+export declare const DEFAULT_THEME_ID: "dreamy";
+/**
+ * Default themes as a catalog with metadata
+ * This format supports filtering by tags, active status, etc.
+ */
+export declare const defaultThemeCatalog: ThemeCatalog;