@fakhrirafiki/theme-engine 0.4.5 → 0.4.8

package/dist/index.mjs

@@ -3940,6 +3940,29 @@ function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
             if (rgb) return toTriplet(rgbToHsl(rgb.r, rgb.g, rgb.b));
           }
 
+          // Any other CSS color (e.g. oklch(...), named colors) -> resolve via computed styles.
+          try {
+            const probe = document.createElement('span');
+            probe.style.color = trimmed;
+            probe.style.position = 'absolute';
+            probe.style.left = '-9999px';
+            probe.style.top = '-9999px';
+            probe.style.visibility = 'hidden';
+            document.documentElement.appendChild(probe);
+            const computed = getComputedStyle(probe).color; // rgb(...) or rgba(...)
+            probe.remove();
+
+            const match = computed && computed.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/i);
+            if (match) {
+              const r = clamp(parseFloat(match[1]) || 0, 0, 255);
+              const g = clamp(parseFloat(match[2]) || 0, 0, 255);
+              const b = clamp(parseFloat(match[3]) || 0, 0, 255);
+              return toTriplet(rgbToHsl(r, g, b));
+            }
+          } catch (e) {
+            // ignore and fall through
+          }
+
           return value;
         }
 
@@ -4212,23 +4235,40 @@ function normalizeColorValueToHslTriplet(value) {
   if (parsedHsl) return formatHSL(parsedHsl, false);
   const parsedRgb = parseHex(trimmed);
   if (parsedRgb) return formatHSL(rgbToHsl(parsedRgb), false);
-  return value;
+  if (typeof document !== "undefined") {
+    try {
+      if (trimmed.startsWith("var(")) return trimmed;
+      const probe = document.createElement("span");
+      probe.style.color = trimmed;
+      probe.style.position = "absolute";
+      probe.style.left = "-9999px";
+      probe.style.top = "-9999px";
+      probe.style.visibility = "hidden";
+      document.documentElement.appendChild(probe);
+      const computed = getComputedStyle(probe).color;
+      probe.remove();
+      const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+      if (match) {
+        const r = Number(match[1]);
+        const g = Number(match[2]);
+        const b = Number(match[3]);
+        if (Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b)) {
+          return formatHSL(rgbToHsl({ r, g, b }), false);
+        }
+      }
+    } catch {
+    }
+  }
+  return trimmed;
 }
 function ThemeProvider({
   children,
   defaultMode = "system",
   defaultPreset,
-  enableTransitions = true,
   modeStorageKey = THEME_STORAGE_KEY,
   presetStorageKey = "theme-preset",
-  enablePresets = true,
-  customPresets,
-  includeBuiltInPresets = true,
-  disableScript = false,
-  deferRenderUntilReady
+  customPresets
 }) {
-  const shouldInjectScript = !disableScript;
-  const shouldDeferRenderUntilReady = deferRenderUntilReady ?? disableScript;
   const normalizedCustomPresets = useMemo2(() => customPresets ?? {}, [customPresets]);
   const [mode, setMode] = useState(() => {
     const stored = getStoredMode(modeStorageKey);
@@ -4242,9 +4282,7 @@ function ThemeProvider({
   });
   const availablePresets = useMemo2(() => {
     const merged = {};
-    if (includeBuiltInPresets) {
-      Object.assign(merged, tweakcnPresets);
-    }
+    Object.assign(merged, tweakcnPresets);
     if (Object.keys(normalizedCustomPresets).length > 0) {
       const validationResult = validateCustomPresets(normalizedCustomPresets);
       const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
@@ -4260,8 +4298,8 @@ function ThemeProvider({
       }
     }
     return merged;
-  }, [includeBuiltInPresets, normalizedCustomPresets]);
-  const builtInPresets = useMemo2(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
+  }, [normalizedCustomPresets]);
+  const builtInPresets = tweakcnPresets;
   const getAvailablePresetById = useCallback(
     (id) => {
       return availablePresets[id] || null;
@@ -4269,12 +4307,8 @@ function ThemeProvider({
     [availablePresets]
   );
   const [currentPreset, setCurrentPreset] = useState(null);
-  const [isReady, setIsReady] = useState(() => !shouldDeferRenderUntilReady);
   useEffect(() => {
-    if (!enablePresets || typeof window === "undefined") {
-      setIsReady(true);
-      return;
-    }
+    if (typeof window === "undefined") return;
     try {
       const stored = localStorage.getItem(presetStorageKey);
       const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
@@ -4327,10 +4361,8 @@ function ThemeProvider({
       if (isDevelopment) {
         console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset from storage:", error);
       }
-    } finally {
-      setIsReady(true);
     }
-  }, [presetStorageKey, enablePresets, defaultPreset, getAvailablePresetById]);
+  }, [presetStorageKey, defaultPreset, getAvailablePresetById]);
   useEffect(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -4409,7 +4441,7 @@ function ThemeProvider({
     (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) {
+      if (!prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
         const root = document.documentElement;
         if (coordinates) {
           root.style.setProperty("--x", `${coordinates.x}px`);
@@ -4422,7 +4454,7 @@ function ThemeProvider({
         handleModeChange(newMode);
       }
     },
-    [resolvedMode, enableTransitions, handleModeChange]
+    [resolvedMode, handleModeChange]
   );
   useEffect(() => {
     if (!currentPreset || typeof window === "undefined") return;
@@ -4437,7 +4469,7 @@ function ThemeProvider({
         appliedAt: Date.now()
       };
       setCurrentPreset(presetData);
-      if (enablePresets && typeof window !== "undefined") {
+      if (typeof window !== "undefined") {
         try {
           localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
         } catch (error) {
@@ -4448,7 +4480,7 @@ function ThemeProvider({
         applyPresetColors(preset.colors, resolvedMode);
       }
     },
-    [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
+    [presetStorageKey, applyPresetColors, resolvedMode]
   );
   const setThemePresetById = useCallback(
     (presetId) => {
@@ -4472,53 +4504,50 @@ function ThemeProvider({
     [getAvailablePresetById, applyPreset]
   );
   const clearPreset = useCallback(() => {
-    if (enablePresets && typeof window !== "undefined") {
+    if (typeof window !== "undefined") {
       try {
         localStorage.removeItem(presetStorageKey);
       } catch (error) {
         console.error("\u{1F3A8} UnifiedTheme: Failed to clear preset:", error);
       }
-      if (defaultPreset) {
-        const preset = getAvailablePresetById(defaultPreset);
-        if (preset) {
-          const presetData = {
-            presetId: defaultPreset,
-            presetName: preset.label,
-            colors: {
-              light: preset.styles.light,
-              dark: preset.styles.dark
-            },
-            appliedAt: Date.now()
-          };
-          setCurrentPreset(presetData);
-          applyPresetColors(presetData.colors, resolvedMode);
-        } else {
-          console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
-          setCurrentPreset(null);
-        }
+    }
+    if (defaultPreset) {
+      const preset = getAvailablePresetById(defaultPreset);
+      if (preset) {
+        const presetData = {
+          presetId: defaultPreset,
+          presetName: preset.label,
+          colors: {
+            light: preset.styles.light,
+            dark: preset.styles.dark
+          },
+          appliedAt: Date.now()
+        };
+        setCurrentPreset(presetData);
+        applyPresetColors(presetData.colors, resolvedMode);
       } else {
+        console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
         setCurrentPreset(null);
-        const root = document.documentElement;
-        const allProperties = [
-          ...CSS_PROPERTY_CATEGORIES.colors,
-          ...CSS_PROPERTY_CATEGORIES.typography,
-          ...CSS_PROPERTY_CATEGORIES.layout,
-          ...CSS_PROPERTY_CATEGORIES.shadows,
-          ...CSS_PROPERTY_CATEGORIES.spacing
-        ];
-        let clearedCount = 0;
-        allProperties.forEach((prop) => {
-          const cssVar = `--${prop}`;
-          root.style.removeProperty(cssVar);
-          clearedCount++;
-        });
       }
+    } else {
+      setCurrentPreset(null);
+      const root = document.documentElement;
+      const allProperties = [
+        ...CSS_PROPERTY_CATEGORIES.colors,
+        ...CSS_PROPERTY_CATEGORIES.typography,
+        ...CSS_PROPERTY_CATEGORIES.layout,
+        ...CSS_PROPERTY_CATEGORIES.shadows,
+        ...CSS_PROPERTY_CATEGORIES.spacing
+      ];
+      let clearedCount = 0;
+      allProperties.forEach((prop) => {
+        const cssVar = `--${prop}`;
+        root.style.removeProperty(cssVar);
+        clearedCount++;
+      });
     }
-  }, [presetStorageKey, enablePresets, defaultPreset, applyPresetColors, resolvedMode]);
-  const scriptElement = shouldInjectScript ? /* @__PURE__ */ jsx2(ThemeScript, { presetStorageKey, defaultPreset }) : null;
-  if (!isReady && shouldDeferRenderUntilReady) {
-    return scriptElement;
-  }
+  }, [presetStorageKey, defaultPreset, getAvailablePresetById, applyPresetColors, resolvedMode]);
+  const scriptElement = /* @__PURE__ */ jsx2(ThemeScript, { presetStorageKey, defaultPreset });
   const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
     mode,
@@ -4774,7 +4803,7 @@ var AnimatedRow = ({
 }) => {
   if (presets.length === 0) return null;
   const duplicatedPresets = Array(animation.duplicationFactor).fill(presets).flat();
-  const totalWidth = presets.reduce((sum, preset) => sum + (Number(preset.metadata?.buttonWidth) || layout.buttonWidth), 0) + presets.length * layout.buttonGap;
+  const totalWidth = presets.reduce((sum, preset) => sum + (Number(preset.metadata?.buttonWidth) || layout.buttonWidth), 0) + Math.max(0, presets.length - 1) * layout.buttonGap;
   const effectiveScrollSpeed = Math.max(0.1, animation.scrollSpeed || 1);
   const animationDuration = presets.length * animation.duration / effectiveScrollSpeed;
   return /* @__PURE__ */ jsx4(
@@ -4971,6 +5000,42 @@ function useTypedTheme(customPresets) {
     setThemePresetById
   };
 }
+
+// src/hooks/useThemeEngine.ts
+function useThemeEngine() {
+  const theme = useTheme();
+  const darkMode = theme.resolvedMode === "dark";
+  const setDarkMode = (mode) => theme.setMode(mode);
+  const toggleDarkMode = (coordinates) => theme.toggleMode(coordinates);
+  const applyThemeById = (themeId) => theme.setThemePresetById(themeId);
+  const applyPresetById = applyThemeById;
+  const clearTheme = () => theme.clearPreset();
+  const clearPreset = clearTheme;
+  const currentTheme = theme.currentPreset;
+  const currentPreset = theme.currentPreset;
+  return {
+    // Mode
+    darkMode,
+    mode: theme.mode,
+    resolvedMode: theme.resolvedMode,
+    setDarkMode,
+    setMode: theme.setMode,
+    toggleDarkMode,
+    toggleMode: theme.toggleMode,
+    // Presets (theme naming)
+    applyThemeById,
+    applyPresetById,
+    clearTheme,
+    clearPreset,
+    currentTheme,
+    currentPreset,
+    // Advanced / diagnostics
+    isUsingDefaultPreset: theme.isUsingDefaultPreset,
+    availablePresets: theme.availablePresets,
+    builtInPresets: theme.builtInPresets,
+    customPresets: theme.customPresets
+  };
+}
 export {
   ThemePresetButtons,
   ThemeProvider,
@@ -4987,6 +5052,7 @@ export {
   searchPresets,
   tweakcnPresets,
   useTheme,
+  useThemeEngine,
   useTypedTheme,
   validateCustomPresets,
   validateTweakCNPreset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.4.5",
+  "version": "0.4.8",
   "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",