@fakhrirafiki/theme-engine 0.2.2 → 0.2.5

package/dist/index.d.mts

@@ -318,7 +318,7 @@ interface UnifiedThemeContextValue {
     /** Current appearance mode setting */
     mode: Mode;
     /** Resolved appearance mode (never 'system') */
-    resolvedMode: 'light' | 'dark';
+    resolvedMode: "light" | "dark";
     /** Change the appearance mode */
     setMode: (mode: Mode) => void;
     /** Toggle between light and dark modes with optional animation */
@@ -330,7 +330,7 @@ interface UnifiedThemeContextValue {
         /** Human-readable preset name */
         presetName: string;
         /** Color values for light and dark modes */
-        colors: ThemePreset['colors'];
+        colors: ThemePreset["colors"];
         /** Timestamp when preset was applied */
         appliedAt: number;
     } | null;
@@ -340,6 +340,8 @@ interface UnifiedThemeContextValue {
     setThemePresetById: (presetId: string) => void;
     /** Clear the current preset and revert to default colors */
     clearPreset: () => void;
+    /** Whether the currently active preset matches the defaultPreset prop */
+    isUsingDefaultPreset: boolean;
     /** Available presets (merged built-in + custom) */
     availablePresets: Record<string, TweakCNThemePreset>;
     /** Built-in presets only */

package/dist/index.d.ts

@@ -318,7 +318,7 @@ interface UnifiedThemeContextValue {
     /** Current appearance mode setting */
     mode: Mode;
     /** Resolved appearance mode (never 'system') */
-    resolvedMode: 'light' | 'dark';
+    resolvedMode: "light" | "dark";
     /** Change the appearance mode */
     setMode: (mode: Mode) => void;
     /** Toggle between light and dark modes with optional animation */
@@ -330,7 +330,7 @@ interface UnifiedThemeContextValue {
         /** Human-readable preset name */
         presetName: string;
         /** Color values for light and dark modes */
-        colors: ThemePreset['colors'];
+        colors: ThemePreset["colors"];
         /** Timestamp when preset was applied */
         appliedAt: number;
     } | null;
@@ -340,6 +340,8 @@ interface UnifiedThemeContextValue {
     setThemePresetById: (presetId: string) => void;
     /** Clear the current preset and revert to default colors */
     clearPreset: () => void;
+    /** Whether the currently active preset matches the defaultPreset prop */
+    isUsingDefaultPreset: boolean;
     /** Available presets (merged built-in + custom) */
     availablePresets: Record<string, TweakCNThemePreset>;
     /** Built-in presets only */

package/dist/index.js

@@ -3748,9 +3748,12 @@ function ThemeProvider({
   }, [includeBuiltInPresets, customPresets]);
   const builtInPresets = (0, import_react.useMemo)(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
   const normalizedCustomPresets = (0, import_react.useMemo)(() => customPresets || {}, [customPresets]);
-  const getAvailablePresetById = (0, import_react.useCallback)((id) => {
-    return availablePresets[id] || null;
-  }, [availablePresets]);
+  const getAvailablePresetById = (0, import_react.useCallback)(
+    (id) => {
+      return availablePresets[id] || null;
+    },
+    [availablePresets]
+  );
   const [currentPreset, setCurrentPreset] = (0, import_react.useState)(null);
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
@@ -3760,10 +3763,9 @@ function ThemeProvider({
     }
     try {
       const stored = localStorage.getItem(presetStorageKey);
-      if (stored) {
-        const preset = JSON.parse(stored);
-        setCurrentPreset(preset);
-      } else if (defaultPreset) {
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      const applyDefaultPreset = () => {
+        if (!defaultPreset) return;
         const preset = getAvailablePresetById(defaultPreset);
         if (preset) {
           const presetData = {
@@ -3779,13 +3781,42 @@ function ThemeProvider({
         } else {
           console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
         }
+      };
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          const isValidObject = parsed && typeof parsed === "object";
+          const hasColors = isValidObject && "colors" in parsed && parsed.colors && typeof parsed.colors === "object" && parsed.colors.light && parsed.colors.dark;
+          if (hasColors) {
+            setCurrentPreset(parsed);
+            if (isDevelopment) {
+            }
+          } else {
+            if (isDevelopment) {
+              console.warn("\u{1F3A8} UnifiedTheme: Invalid persisted preset shape. Clearing and falling back.");
+            }
+            localStorage.removeItem(presetStorageKey);
+            applyDefaultPreset();
+          }
+        } catch (error) {
+          if (isDevelopment) {
+            console.warn("\u{1F3A8} UnifiedTheme: Failed to parse persisted preset. Clearing key.", error);
+          }
+          localStorage.removeItem(presetStorageKey);
+          applyDefaultPreset();
+        }
+      } else {
+        applyDefaultPreset();
       }
     } catch (error) {
-      console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset:", error);
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      if (isDevelopment) {
+        console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset from storage:", error);
+      }
     } finally {
       setIsReady(true);
     }
-  }, [presetStorageKey, enablePresets, defaultPreset]);
+  }, [presetStorageKey, enablePresets, defaultPreset, getAvailablePresetById]);
   (0, import_react.useEffect)(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -3806,11 +3837,12 @@ function ThemeProvider({
     root.style.colorScheme = resolvedMode;
   }, [resolvedMode]);
   const applyPresetColors = (0, import_react.useCallback)((preset, mode2) => {
+    if (!preset) return;
     const root = document.documentElement;
     const colors = preset[mode2];
     if (!colors) return;
     const defaultValues = {
-      "spacing": "0.25rem",
+      spacing: "0.25rem",
       "letter-spacing": "normal"
     };
     const allCategories = [
@@ -3849,67 +3881,79 @@ function ThemeProvider({
       }
     });
   }, []);
-  const handleModeChange = (0, import_react.useCallback)((newMode) => {
-    setMode(newMode);
-    setStoredMode(newMode, modeStorageKey);
-  }, [modeStorageKey]);
-  const handleModeToggle = (0, import_react.useCallback)((coordinates) => {
-    const newMode = resolvedMode === "light" ? "dark" : "light";
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
-      const root = document.documentElement;
-      if (coordinates) {
-        root.style.setProperty("--x", `${coordinates.x}px`);
-        root.style.setProperty("--y", `${coordinates.y}px`);
-      }
-      document.startViewTransition(() => {
+  const handleModeChange = (0, import_react.useCallback)(
+    (newMode) => {
+      setMode(newMode);
+      setStoredMode(newMode, modeStorageKey);
+    },
+    [modeStorageKey]
+  );
+  const handleModeToggle = (0, import_react.useCallback)(
+    (coordinates) => {
+      const newMode = resolvedMode === "light" ? "dark" : "light";
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
+        const root = document.documentElement;
+        if (coordinates) {
+          root.style.setProperty("--x", `${coordinates.x}px`);
+          root.style.setProperty("--y", `${coordinates.y}px`);
+        }
+        document.startViewTransition(() => {
+          handleModeChange(newMode);
+        });
+      } else {
         handleModeChange(newMode);
-      });
-    } else {
-      handleModeChange(newMode);
-    }
-  }, [resolvedMode, enableTransitions, handleModeChange]);
+      }
+    },
+    [resolvedMode, enableTransitions, handleModeChange]
+  );
   (0, import_react.useEffect)(() => {
     if (!currentPreset || typeof window === "undefined") return;
     applyPresetColors(currentPreset.colors, resolvedMode);
   }, [currentPreset, resolvedMode, applyPresetColors]);
-  const applyPreset = (0, import_react.useCallback)((preset) => {
-    const presetData = {
-      presetId: preset.id,
-      presetName: preset.name,
-      colors: preset.colors,
-      appliedAt: Date.now()
-    };
-    setCurrentPreset(presetData);
-    if (enablePresets && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
-      } catch (error) {
-        console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+  const applyPreset = (0, import_react.useCallback)(
+    (preset) => {
+      const presetData = {
+        presetId: preset.id,
+        presetName: preset.name,
+        colors: preset.colors,
+        appliedAt: Date.now()
+      };
+      setCurrentPreset(presetData);
+      if (enablePresets && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
+        } catch (error) {
+          console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+        }
       }
-    }
-    if (typeof window !== "undefined") {
-      applyPresetColors(preset.colors, resolvedMode);
-    }
-  }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
-  const setThemePresetById = (0, import_react.useCallback)((presetId) => {
-    const preset = getAvailablePresetById(presetId);
-    if (!preset) {
       if (typeof window !== "undefined") {
-        console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+        applyPresetColors(preset.colors, resolvedMode);
       }
-      return;
-    }
-    const presetData = {
-      id: presetId,
-      name: preset.label,
-      colors: {
-        light: preset.styles.light,
-        dark: preset.styles.dark
+    },
+    [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
+  );
+  const setThemePresetById = (0, import_react.useCallback)(
+    (presetId) => {
+      const preset = getAvailablePresetById(presetId);
+      if (!preset) {
+        if (typeof window !== "undefined") {
+          console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+        }
+        return;
       }
-    };
-    applyPreset(presetData);
-  }, [getAvailablePresetById, applyPreset]);
+      const presetData = {
+        id: presetId,
+        name: preset.label,
+        colors: {
+          light: preset.styles.light,
+          dark: preset.styles.dark
+        }
+      };
+      applyPreset(presetData);
+    },
+    [getAvailablePresetById, applyPreset]
+  );
   const clearPreset = (0, import_react.useCallback)(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
@@ -3957,6 +4001,7 @@ function ThemeProvider({
   if (!isReady) {
     return null;
   }
+  const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
     mode,
     resolvedMode,
@@ -3966,6 +4011,7 @@ function ThemeProvider({
     applyPreset,
     setThemePresetById,
     clearPreset,
+    isUsingDefaultPreset,
     availablePresets,
     builtInPresets,
     customPresets: normalizedCustomPresets

package/dist/index.mjs

@@ -3707,9 +3707,12 @@ function ThemeProvider({
   }, [includeBuiltInPresets, customPresets]);
   const builtInPresets = useMemo(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
   const normalizedCustomPresets = useMemo(() => customPresets || {}, [customPresets]);
-  const getAvailablePresetById = useCallback((id) => {
-    return availablePresets[id] || null;
-  }, [availablePresets]);
+  const getAvailablePresetById = useCallback(
+    (id) => {
+      return availablePresets[id] || null;
+    },
+    [availablePresets]
+  );
   const [currentPreset, setCurrentPreset] = useState(null);
   const [isReady, setIsReady] = useState(false);
   useEffect(() => {
@@ -3719,10 +3722,9 @@ function ThemeProvider({
     }
     try {
       const stored = localStorage.getItem(presetStorageKey);
-      if (stored) {
-        const preset = JSON.parse(stored);
-        setCurrentPreset(preset);
-      } else if (defaultPreset) {
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      const applyDefaultPreset = () => {
+        if (!defaultPreset) return;
         const preset = getAvailablePresetById(defaultPreset);
         if (preset) {
           const presetData = {
@@ -3738,13 +3740,42 @@ function ThemeProvider({
         } else {
           console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
         }
+      };
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          const isValidObject = parsed && typeof parsed === "object";
+          const hasColors = isValidObject && "colors" in parsed && parsed.colors && typeof parsed.colors === "object" && parsed.colors.light && parsed.colors.dark;
+          if (hasColors) {
+            setCurrentPreset(parsed);
+            if (isDevelopment) {
+            }
+          } else {
+            if (isDevelopment) {
+              console.warn("\u{1F3A8} UnifiedTheme: Invalid persisted preset shape. Clearing and falling back.");
+            }
+            localStorage.removeItem(presetStorageKey);
+            applyDefaultPreset();
+          }
+        } catch (error) {
+          if (isDevelopment) {
+            console.warn("\u{1F3A8} UnifiedTheme: Failed to parse persisted preset. Clearing key.", error);
+          }
+          localStorage.removeItem(presetStorageKey);
+          applyDefaultPreset();
+        }
+      } else {
+        applyDefaultPreset();
       }
     } catch (error) {
-      console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset:", error);
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      if (isDevelopment) {
+        console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset from storage:", error);
+      }
     } finally {
       setIsReady(true);
     }
-  }, [presetStorageKey, enablePresets, defaultPreset]);
+  }, [presetStorageKey, enablePresets, defaultPreset, getAvailablePresetById]);
   useEffect(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -3765,11 +3796,12 @@ function ThemeProvider({
     root.style.colorScheme = resolvedMode;
   }, [resolvedMode]);
   const applyPresetColors = useCallback((preset, mode2) => {
+    if (!preset) return;
     const root = document.documentElement;
     const colors = preset[mode2];
     if (!colors) return;
     const defaultValues = {
-      "spacing": "0.25rem",
+      spacing: "0.25rem",
       "letter-spacing": "normal"
     };
     const allCategories = [
@@ -3808,67 +3840,79 @@ function ThemeProvider({
       }
     });
   }, []);
-  const handleModeChange = useCallback((newMode) => {
-    setMode(newMode);
-    setStoredMode(newMode, modeStorageKey);
-  }, [modeStorageKey]);
-  const handleModeToggle = useCallback((coordinates) => {
-    const newMode = resolvedMode === "light" ? "dark" : "light";
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
-      const root = document.documentElement;
-      if (coordinates) {
-        root.style.setProperty("--x", `${coordinates.x}px`);
-        root.style.setProperty("--y", `${coordinates.y}px`);
-      }
-      document.startViewTransition(() => {
+  const handleModeChange = useCallback(
+    (newMode) => {
+      setMode(newMode);
+      setStoredMode(newMode, modeStorageKey);
+    },
+    [modeStorageKey]
+  );
+  const handleModeToggle = useCallback(
+    (coordinates) => {
+      const newMode = resolvedMode === "light" ? "dark" : "light";
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
+        const root = document.documentElement;
+        if (coordinates) {
+          root.style.setProperty("--x", `${coordinates.x}px`);
+          root.style.setProperty("--y", `${coordinates.y}px`);
+        }
+        document.startViewTransition(() => {
+          handleModeChange(newMode);
+        });
+      } else {
         handleModeChange(newMode);
-      });
-    } else {
-      handleModeChange(newMode);
-    }
-  }, [resolvedMode, enableTransitions, handleModeChange]);
+      }
+    },
+    [resolvedMode, enableTransitions, handleModeChange]
+  );
   useEffect(() => {
     if (!currentPreset || typeof window === "undefined") return;
     applyPresetColors(currentPreset.colors, resolvedMode);
   }, [currentPreset, resolvedMode, applyPresetColors]);
-  const applyPreset = useCallback((preset) => {
-    const presetData = {
-      presetId: preset.id,
-      presetName: preset.name,
-      colors: preset.colors,
-      appliedAt: Date.now()
-    };
-    setCurrentPreset(presetData);
-    if (enablePresets && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
-      } catch (error) {
-        console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+  const applyPreset = useCallback(
+    (preset) => {
+      const presetData = {
+        presetId: preset.id,
+        presetName: preset.name,
+        colors: preset.colors,
+        appliedAt: Date.now()
+      };
+      setCurrentPreset(presetData);
+      if (enablePresets && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
+        } catch (error) {
+          console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+        }
       }
-    }
-    if (typeof window !== "undefined") {
-      applyPresetColors(preset.colors, resolvedMode);
-    }
-  }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
-  const setThemePresetById = useCallback((presetId) => {
-    const preset = getAvailablePresetById(presetId);
-    if (!preset) {
       if (typeof window !== "undefined") {
-        console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+        applyPresetColors(preset.colors, resolvedMode);
       }
-      return;
-    }
-    const presetData = {
-      id: presetId,
-      name: preset.label,
-      colors: {
-        light: preset.styles.light,
-        dark: preset.styles.dark
+    },
+    [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
+  );
+  const setThemePresetById = useCallback(
+    (presetId) => {
+      const preset = getAvailablePresetById(presetId);
+      if (!preset) {
+        if (typeof window !== "undefined") {
+          console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+        }
+        return;
       }
-    };
-    applyPreset(presetData);
-  }, [getAvailablePresetById, applyPreset]);
+      const presetData = {
+        id: presetId,
+        name: preset.label,
+        colors: {
+          light: preset.styles.light,
+          dark: preset.styles.dark
+        }
+      };
+      applyPreset(presetData);
+    },
+    [getAvailablePresetById, applyPreset]
+  );
   const clearPreset = useCallback(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
@@ -3916,6 +3960,7 @@ function ThemeProvider({
   if (!isReady) {
     return null;
   }
+  const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
     mode,
     resolvedMode,
@@ -3925,6 +3970,7 @@ function ThemeProvider({
     applyPreset,
     setThemePresetById,
     clearPreset,
+    isUsingDefaultPreset,
     availablePresets,
     builtInPresets,
     customPresets: normalizedCustomPresets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",