@umbra.ui/core 0.1.0

package/dist/theme.d.ts

@@ -0,0 +1,73 @@
+import { type Ref, type ComputedRef } from "vue";
+export type Theme = "light" | "dark" | "custom";
+export interface ThemeConfig {
+    theme: Theme;
+    autoDetect: boolean;
+    customThemeId?: string;
+    customThemeColorMode?: "light" | "dark";
+}
+declare class ThemeManager {
+    private currentTheme;
+    private autoDetect;
+    private mediaQuery;
+    private systemThemeListener;
+    private customThemeId;
+    private customThemeColorMode;
+    constructor();
+    private initialize;
+    private loadConfig;
+    private saveConfig;
+    private setupSystemThemeDetection;
+    private removeSystemThemeListener;
+    setTheme(theme: Theme, save?: boolean): void;
+    setCustomTheme(customThemeId: string, customThemeColorMode: "light" | "dark", save?: boolean): void;
+    getTheme(): Theme;
+    getConfig(): ThemeConfig;
+    setAutoDetect(enabled: boolean): void;
+    isAutoDetectEnabled(): boolean;
+    toggleTheme(): void;
+    destroy(): void;
+    get theme(): Readonly<Ref<Theme>>;
+    get customThemeIdRef(): Readonly<Ref<string | undefined>>;
+    get customThemeColorModeRef(): Readonly<Ref<"light" | "dark" | undefined>>;
+    get autoDetectRef(): Readonly<Ref<boolean>>;
+    get configRef(): ComputedRef<ThemeConfig>;
+}
+export declare const themeManager: ThemeManager;
+export declare const currentTheme: Readonly<Ref<Theme, Theme>>;
+export declare const customThemeId: Readonly<Ref<string | undefined, string | undefined>>;
+export declare const customThemeColorMode: Readonly<Ref<"dark" | "light" | undefined, "dark" | "light" | undefined>>;
+export declare const autoDetect: Readonly<Ref<boolean, boolean>>;
+export declare const themeConfig: ComputedRef<ThemeConfig>;
+export declare const setTheme: (theme: Theme, save?: boolean) => void;
+export declare const setCustomTheme: (customThemeId: string, customThemeColorMode: "light" | "dark", save?: boolean) => void;
+export declare const getTheme: () => Theme;
+export declare const getThemeConfig: () => ThemeConfig;
+export declare const toggleTheme: () => void;
+export declare const setAutoDetect: (enabled: boolean) => void;
+export declare const isAutoDetectEnabled: () => boolean;
+export declare const destroyThemeManager: () => void;
+export declare const registerCustomTheme: (themeId: string, cssVariables: Record<string, string>) => void;
+export declare const unregisterCustomTheme: (themeId: string) => void;
+export declare const isThemeRegistered: (themeId: string) => boolean;
+export declare const getRegisteredThemes: () => string[];
+export declare const useTheme: () => {
+    theme: Readonly<Ref<Theme, Theme>>;
+    customThemeId: Readonly<Ref<string | undefined, string | undefined>>;
+    customThemeColorMode: Readonly<Ref<"dark" | "light" | undefined, "dark" | "light" | undefined>>;
+    autoDetect: Readonly<Ref<boolean, boolean>>;
+    config: ComputedRef<ThemeConfig>;
+    setTheme: (theme: Theme, save?: boolean) => void;
+    setCustomTheme: (customThemeId: string, customThemeColorMode: "light" | "dark", save?: boolean) => void;
+    toggleTheme: () => void;
+    setAutoDetect: (enabled: boolean) => void;
+    registerCustomTheme: (themeId: string, cssVariables: Record<string, string>) => void;
+    unregisterCustomTheme: (themeId: string) => void;
+    isThemeRegistered: (themeId: string) => boolean;
+    getRegisteredThemes: () => string[];
+    getTheme: () => Theme;
+    getThemeConfig: () => ThemeConfig;
+    isAutoDetectEnabled: () => boolean;
+};
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/theme.js

@@ -0,0 +1,279 @@
+import { ref, computed, readonly } from "vue";
+// Track registered themes to avoid duplicates
+const registeredThemes = new Set();
+class ThemeManager {
+    constructor() {
+        this.currentTheme = ref("light");
+        this.autoDetect = ref(true);
+        this.mediaQuery = null;
+        this.systemThemeListener = null;
+        this.customThemeId = ref(undefined);
+        this.customThemeColorMode = ref(undefined);
+        this.initialize();
+    }
+    initialize() {
+        // Load saved configuration
+        const savedConfig = this.loadConfig();
+        if (savedConfig) {
+            this.autoDetect.value = savedConfig.autoDetect;
+            this.customThemeId.value = savedConfig.customThemeId;
+            this.customThemeColorMode.value = savedConfig.customThemeColorMode;
+            // If auto-detect is enabled, use system theme regardless of saved theme
+            if (this.autoDetect.value) {
+                this.setupSystemThemeDetection();
+            }
+            else {
+                // Use saved theme only if auto-detect is disabled
+                if (savedConfig.theme === "custom" &&
+                    this.customThemeId.value &&
+                    this.customThemeColorMode.value) {
+                    // Properly restore custom theme with both ID and color mode
+                    this.setCustomTheme(this.customThemeId.value, this.customThemeColorMode.value, false);
+                }
+                else {
+                    this.setTheme(savedConfig.theme, false);
+                }
+            }
+        }
+        else {
+            // First time setup - default to auto-detect
+            this.setupSystemThemeDetection();
+        }
+    }
+    loadConfig() {
+        try {
+            const saved = localStorage.getItem("umbra-theme-config");
+            return saved ? JSON.parse(saved) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    saveConfig() {
+        const config = {
+            theme: this.currentTheme.value,
+            autoDetect: this.autoDetect.value,
+            customThemeId: this.customThemeId.value,
+            customThemeColorMode: this.customThemeColorMode.value,
+        };
+        try {
+            localStorage.setItem("umbra-theme-config", JSON.stringify(config));
+        }
+        catch (e) {
+            console.warn("Failed to save theme configuration:", e);
+        }
+    }
+    setupSystemThemeDetection() {
+        // Clean up existing listener if any
+        this.removeSystemThemeListener();
+        this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        const systemTheme = this.mediaQuery.matches ? "dark" : "light";
+        this.setTheme(systemTheme, false);
+        // Create and store the listener
+        this.systemThemeListener = (e) => {
+            if (this.autoDetect.value) {
+                this.setTheme(e.matches ? "dark" : "light", false);
+            }
+        };
+        this.mediaQuery.addEventListener("change", this.systemThemeListener);
+    }
+    removeSystemThemeListener() {
+        if (this.mediaQuery && this.systemThemeListener) {
+            this.mediaQuery.removeEventListener("change", this.systemThemeListener);
+            this.systemThemeListener = null;
+        }
+    }
+    setTheme(theme, save = true) {
+        this.currentTheme.value = theme;
+        // Remove all theme-related classes and attributes
+        document.documentElement.classList.remove("light", "light-theme", "dark", "dark-theme");
+        document.documentElement.removeAttribute("data-theme");
+        document.documentElement.removeAttribute("data-custom-theme");
+        // Apply theme using CSS classes
+        if (theme === "custom" && this.customThemeId.value) {
+            document.documentElement.setAttribute("data-theme", "custom");
+            document.documentElement.setAttribute("data-custom-theme", this.customThemeId.value);
+            // Also set the color mode class for custom themes
+            if (this.customThemeColorMode.value === "dark") {
+                document.documentElement.classList.add("dark", "dark-theme");
+            }
+            else {
+                document.documentElement.classList.add("light", "light-theme");
+            }
+        }
+        else if (theme === "dark") {
+            document.documentElement.classList.add("dark", "dark-theme");
+        }
+        else {
+            document.documentElement.classList.add("light", "light-theme");
+        }
+        if (save) {
+            this.saveConfig();
+        }
+        // Dispatch theme change event
+        window.dispatchEvent(new CustomEvent("theme-change", {
+            detail: {
+                theme,
+                customThemeId: theme === "custom" ? this.customThemeId.value : undefined,
+                customThemeColorMode: theme === "custom" ? this.customThemeColorMode.value : undefined,
+            },
+        }));
+    }
+    setCustomTheme(customThemeId, customThemeColorMode, save = true) {
+        this.customThemeId.value = customThemeId;
+        this.customThemeColorMode.value = customThemeColorMode;
+        this.setTheme("custom", save);
+    }
+    getTheme() {
+        return this.currentTheme.value;
+    }
+    getConfig() {
+        return {
+            theme: this.currentTheme.value,
+            autoDetect: this.autoDetect.value,
+            customThemeId: this.customThemeId.value,
+            customThemeColorMode: this.customThemeColorMode.value,
+        };
+    }
+    setAutoDetect(enabled) {
+        this.autoDetect.value = enabled;
+        if (enabled) {
+            this.setupSystemThemeDetection();
+        }
+        else {
+            this.removeSystemThemeListener();
+        }
+        this.saveConfig();
+    }
+    isAutoDetectEnabled() {
+        return this.autoDetect.value;
+    }
+    toggleTheme() {
+        // Disable auto-detect when manually toggling
+        if (this.autoDetect.value) {
+            this.setAutoDetect(false);
+        }
+        // Toggle between light and dark only
+        // If custom theme is active, switch to light
+        let newTheme;
+        switch (this.currentTheme.value) {
+            case "light":
+                newTheme = "dark";
+                break;
+            case "dark":
+                newTheme = "light";
+                break;
+            case "custom":
+                newTheme = "light";
+                break;
+            default:
+                newTheme = "light";
+        }
+        this.setTheme(newTheme);
+    }
+    destroy() {
+        this.removeSystemThemeListener();
+    }
+    // Expose reactive references as readonly for components
+    get theme() {
+        return readonly(this.currentTheme);
+    }
+    get customThemeIdRef() {
+        return readonly(this.customThemeId);
+    }
+    get customThemeColorModeRef() {
+        return readonly(this.customThemeColorMode);
+    }
+    get autoDetectRef() {
+        return readonly(this.autoDetect);
+    }
+    // Computed property for the full config
+    get configRef() {
+        return computed(() => ({
+            theme: this.currentTheme.value,
+            autoDetect: this.autoDetect.value,
+            customThemeId: this.customThemeId.value,
+            customThemeColorMode: this.customThemeColorMode.value,
+        }));
+    }
+}
+// Create singleton instance
+export const themeManager = new ThemeManager();
+// Export reactive references for direct use in components
+export const currentTheme = themeManager.theme;
+export const customThemeId = themeManager.customThemeIdRef;
+export const customThemeColorMode = themeManager.customThemeColorModeRef;
+export const autoDetect = themeManager.autoDetectRef;
+export const themeConfig = themeManager.configRef;
+// Export convenience functions (keep existing API)
+export const setTheme = (theme, save) => themeManager.setTheme(theme, save);
+export const setCustomTheme = (customThemeId, customThemeColorMode, save) => themeManager.setCustomTheme(customThemeId, customThemeColorMode, save);
+export const getTheme = () => themeManager.getTheme();
+export const getThemeConfig = () => themeManager.getConfig();
+export const toggleTheme = () => themeManager.toggleTheme();
+export const setAutoDetect = (enabled) => themeManager.setAutoDetect(enabled);
+export const isAutoDetectEnabled = () => themeManager.isAutoDetectEnabled();
+// Cleanup function for SPA navigation
+export const destroyThemeManager = () => themeManager.destroy();
+// Custom theme registration utilities
+export const registerCustomTheme = (themeId, cssVariables) => {
+    // Check if already registered
+    if (registeredThemes.has(themeId)) {
+        console.warn(`Theme "${themeId}" is already registered`);
+        return;
+    }
+    // Check if style element already exists (e.g., from hot reload)
+    const existing = document.querySelector(`style[data-umbra-custom-theme="${themeId}"]`);
+    if (existing) {
+        existing.remove();
+    }
+    const style = document.createElement("style");
+    style.setAttribute("data-umbra-custom-theme", themeId);
+    const cssVars = Object.entries(cssVariables)
+        .map(([key, value]) => `  ${key}: ${value};`)
+        .join("\n");
+    style.textContent = `
+[data-theme="custom"][data-custom-theme="${themeId}"] {
+${cssVars}
+}`;
+    document.head.appendChild(style);
+    registeredThemes.add(themeId);
+};
+export const unregisterCustomTheme = (themeId) => {
+    const styleElement = document.querySelector(`style[data-umbra-custom-theme="${themeId}"]`);
+    if (styleElement) {
+        styleElement.remove();
+        registeredThemes.delete(themeId);
+    }
+};
+export const isThemeRegistered = (themeId) => {
+    return registeredThemes.has(themeId);
+};
+export const getRegisteredThemes = () => {
+    return Array.from(registeredThemes);
+};
+// Composable for use in Vue components
+export const useTheme = () => {
+    return {
+        // Reactive refs
+        theme: currentTheme,
+        customThemeId,
+        customThemeColorMode,
+        autoDetect,
+        config: themeConfig,
+        // Methods
+        setTheme,
+        setCustomTheme,
+        toggleTheme,
+        setAutoDetect,
+        // Custom theme registration (for advanced usage)
+        registerCustomTheme,
+        unregisterCustomTheme,
+        isThemeRegistered,
+        getRegisteredThemes,
+        // Non-reactive getters (for backward compatibility)
+        getTheme,
+        getThemeConfig,
+        isAutoDetectEnabled,
+    };
+};

package/dist/themes/blank.d.ts

@@ -0,0 +1,7 @@
+export interface ThemeObject {
+    themeId: string;
+    cssVariables: Record<string, string>;
+}
+export declare const lightAltTheme: ThemeObject;
+export default lightAltTheme;
+//# sourceMappingURL=blank.d.ts.map

package/dist/themes/blank.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blank.d.ts","sourceRoot":"","sources":["../../src/themes/blank.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,EAAE,WAwhB3B,CAAC;AAGF,eAAe,aAAa,CAAC"}