@fakhrirafiki/theme-engine 0.2.6 → 0.4.0

package/dist/index.js

@@ -25,6 +25,7 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   ThemeScript: () => ThemeScript,
   ThemeToggle: () => ThemeToggle,
+  builtInPresetIds: () => builtInPresetIds,
   formatColor: () => formatColor,
   getPresetById: () => getPresetById,
   getPresetEntries: () => getPresetEntries,
@@ -35,6 +36,7 @@ __export(index_exports, {
   searchPresets: () => searchPresets,
   tweakcnPresets: () => tweakcnPresets,
   useTheme: () => useTheme,
+  useTypedTheme: () => useTypedTheme,
   validateCustomPresets: () => validateCustomPresets,
   validateTweakCNPreset: () => validateTweakCNPreset,
   withAlpha: () => withAlpha
@@ -42,7 +44,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/providers/UnifiedThemeProvider.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/types/presets.ts
 var CSS_PROPERTY_CATEGORIES = {
@@ -124,6 +126,34 @@ var ALL_CSS_PROPERTIES = [
   ...CSS_PROPERTY_CATEGORIES.spacing
 ];
 
+// src/data/built-in-preset-ids.ts
+var builtInPresetIds = [
+  "amber-minimal",
+  "amethyst-haze",
+  "bold-tech",
+  "clean-slate",
+  "cosmic-night",
+  "doom-64",
+  "elegant-luxury",
+  "kodama-grove",
+  "midnight-bloom",
+  "mocha-mousse",
+  "modern-minimal",
+  "neo-brutalism",
+  "northern-lights",
+  "ocean-breeze",
+  "pastel-dreams",
+  "quantum-rose",
+  "retro-arcade",
+  "soft-pop",
+  "solar-dusk",
+  "starry-night",
+  "sunset-horizon",
+  "t3-chat",
+  "vintage-paper",
+  "violet-bloom"
+];
+
 // src/data/tweakcn-presets.ts
 var DEFAULT_ACCENT_COLORS = {
   DARK: {
@@ -3637,7 +3667,7 @@ var tweakcnPresets = {
   }
 };
 function getPresetIds() {
-  return Object.keys(tweakcnPresets);
+  return [...builtInPresetIds];
 }
 function getPresetById(id) {
   return tweakcnPresets[id] || null;
@@ -3647,13 +3677,15 @@ function getPresetLabels() {
 }
 function searchPresets(query) {
   const lowerQuery = query.toLowerCase();
-  return Object.entries(tweakcnPresets).filter(([id, preset]) => preset.label.toLowerCase().includes(lowerQuery) || id.toLowerCase().includes(lowerQuery)).map(([id, preset]) => ({ id, preset }));
+  return builtInPresetIds.map((id) => ({ id, preset: tweakcnPresets[id] })).filter(
+    ({ id, preset }) => preset.label.toLowerCase().includes(lowerQuery) || id.toLowerCase().includes(lowerQuery)
+  );
 }
 function getPresetsCount() {
-  return Object.keys(tweakcnPresets).length;
+  return builtInPresetIds.length;
 }
 function getPresetEntries() {
-  return Object.entries(tweakcnPresets);
+  return builtInPresetIds.map((id) => [id, tweakcnPresets[id]]);
 }
 
 // src/utils/preset-validation.ts
@@ -3802,9 +3834,154 @@ function logValidationResult(result, context = "Custom presets") {
   }
 }
 
-// src/providers/UnifiedThemeProvider.tsx
+// src/components/UnifiedThemeScript.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var UnifiedThemeContext = (0, import_react.createContext)(void 0);
+function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
+  const defaultPresetData = (0, import_react.useMemo)(() => {
+    if (!defaultPreset) return null;
+    const preset = getPresetById(defaultPreset);
+    return preset ? {
+      presetId: defaultPreset,
+      presetName: preset.label,
+      colors: preset.styles
+    } : null;
+  }, [defaultPreset]);
+  const scriptContent = (0, import_react.useMemo)(
+    () => `
+    // Unified Theme Engine: Restore preset colors before hydration
+    (function() {
+      try {
+        const presetStorageKey = "${presetStorageKey}";
+        const isDev = (function() {
+          try {
+            return location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+          } catch {
+            return false;
+          }
+        })();
+        
+        // CSS property categories (inline for script)
+        const CSS_CATEGORIES = {
+          colors: [
+            'background', 'foreground', 'card', 'card-foreground', 'popover', 'popover-foreground',
+            'primary', 'primary-foreground', 'secondary', 'secondary-foreground', 
+            'muted', 'muted-foreground', 'accent', 'accent-foreground',
+            'destructive', 'destructive-foreground', 'border', 'input', 'ring',
+            'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',
+            'sidebar', 'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
+            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring'
+          ],
+          typography: ['font-sans', 'font-serif', 'font-mono'],
+          layout: ['radius'],
+          shadows: ['shadow-color', 'shadow-opacity', 'shadow-blur', 'shadow-spread', 'shadow-offset-x', 'shadow-offset-y'],
+          spacing: ['letter-spacing', 'spacing']
+        };
+
+        // Function to apply all preset properties - with proper clearing and defaults
+        function applyPresetProperties(colors) {
+          if (!colors) return;
+          
+          const root = document.documentElement;
+          
+          // Default values for essential properties that might be missing
+          const defaultValues = {
+            'spacing': '0.25rem',
+            'letter-spacing': 'normal'
+          };
+          
+          // Get all possible CSS properties  
+          const allCategories = ['colors', 'typography', 'layout', 'shadows', 'spacing'];
+          const allProperties = [];
+          allCategories.forEach(function(category) {
+            CSS_CATEGORIES[category].forEach(function(prop) {
+              allProperties.push(prop);
+            });
+          });
+          
+          // First, clear all properties to prevent leftover values
+          let clearedCount = 0;
+          allProperties.forEach(function(prop) {
+            const cssVar = '--' + prop;
+            root.style.removeProperty(cssVar);
+            clearedCount++;
+          });
+          
+          // Apply all properties with defaults for missing ones
+          let appliedCount = 0;
+          allProperties.forEach(function(prop) {
+            let value = colors[prop];
+            
+            // Apply default value if property is missing and we have a default
+            if (!value && defaultValues[prop]) {
+              value = defaultValues[prop];
+            }
+            
+            if (value) {
+              const cssVar = '--' + prop;
+              // Apply directly like TweakCN does - no conversion, no !important
+              root.style.setProperty(cssVar, value);
+              appliedCount++;
+            }
+          });
+          
+        }
+        
+        // Load and apply persisted preset or default preset
+        const storedPreset = localStorage.getItem(presetStorageKey);
+        let presetToApply = null;
+        
+        if (storedPreset) {
+          try {
+            presetToApply = JSON.parse(storedPreset);
+          } catch (error) {
+            if (isDev) console.warn('\u{1F3A8} UnifiedThemeScript: Failed to parse stored preset:', error);
+          }
+        }
+        
+        // Use default preset if no stored preset
+        if (!presetToApply && ${JSON.stringify(defaultPresetData)}) {
+          presetToApply = ${JSON.stringify(defaultPresetData)};
+        }
+        
+        if (presetToApply) {
+          // Determine current mode (will be set by ThemeProvider)
+          // Default to light if no theme class is present yet
+          const isDark = document.documentElement.classList.contains('dark');
+          const mode = isDark ? 'dark' : 'light';
+          const colors = presetToApply.colors && presetToApply.colors[mode];
+          
+          if (colors) {
+            // Font inheritance logic: inherit missing fonts from other mode
+            const fontProperties = ['font-sans', 'font-serif', 'font-mono'];
+            const otherMode = mode === 'light' ? 'dark' : 'light';
+            const otherModeColors = presetToApply.colors && presetToApply.colors[otherMode];
+            
+            if (otherModeColors) {
+              fontProperties.forEach(function(fontProp) {
+                if (!colors[fontProp] && otherModeColors[fontProp]) {
+                  colors[fontProp] = otherModeColors[fontProp];
+                }
+              });
+            }
+            
+            applyPresetProperties(colors);
+          }
+        }
+        
+      } catch (error) {
+        if (isDev) console.error('\u{1F3A8} UnifiedThemeScript: Initialization failed:', error);
+      }
+    })();
+  `,
+    [presetStorageKey, defaultPresetData]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { dangerouslySetInnerHTML: { __html: scriptContent }, suppressHydrationWarning: true });
+}
+
+// src/providers/UnifiedThemeProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var UnifiedThemeContext = (0, import_react2.createContext)(void 0);
 var THEME_STORAGE_KEY = "theme-engine-theme";
 function getSystemTheme() {
   if (typeof window === "undefined") return "light";
@@ -3832,32 +4009,37 @@ function ThemeProvider({
   modeStorageKey = THEME_STORAGE_KEY,
   presetStorageKey = "theme-preset",
   enablePresets = true,
-  customPresets = {},
-  includeBuiltInPresets = true
+  customPresets,
+  includeBuiltInPresets = true,
+  disableScript = false,
+  deferRenderUntilReady
 }) {
-  const [mode, setMode] = (0, import_react.useState)(() => {
+  const shouldInjectScript = !disableScript;
+  const shouldDeferRenderUntilReady = deferRenderUntilReady ?? disableScript;
+  const normalizedCustomPresets = (0, import_react2.useMemo)(() => customPresets ?? {}, [customPresets]);
+  const [mode, setMode] = (0, import_react2.useState)(() => {
     const stored = getStoredMode(modeStorageKey);
     return stored || defaultMode;
   });
-  const [resolvedMode, setResolvedMode] = (0, import_react.useState)(() => {
+  const [resolvedMode, setResolvedMode] = (0, import_react2.useState)(() => {
     if (mode === "system") {
       return getSystemTheme();
     }
     return mode;
   });
-  const availablePresets = (0, import_react.useMemo)(() => {
+  const availablePresets = (0, import_react2.useMemo)(() => {
     const merged = {};
     if (includeBuiltInPresets) {
       Object.assign(merged, tweakcnPresets);
     }
-    if (customPresets && Object.keys(customPresets).length > 0) {
-      const validationResult = validateCustomPresets(customPresets);
+    if (Object.keys(normalizedCustomPresets).length > 0) {
+      const validationResult = validateCustomPresets(normalizedCustomPresets);
       const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
       if (isDevelopment) {
         logValidationResult(validationResult, "Custom presets");
       }
       if (validationResult.isValid || validationResult.errors.length === 0) {
-        Object.assign(merged, customPresets);
+        Object.assign(merged, normalizedCustomPresets);
       } else {
         if (isDevelopment) {
           console.error("\u{1F3A8} ThemeProvider: Skipping invalid custom presets");
@@ -3865,18 +4047,17 @@ function ThemeProvider({
       }
     }
     return merged;
-  }, [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)(
+  }, [includeBuiltInPresets, normalizedCustomPresets]);
+  const builtInPresets = (0, import_react2.useMemo)(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
+  const getAvailablePresetById = (0, import_react2.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)(() => {
+  const [currentPreset, setCurrentPreset] = (0, import_react2.useState)(null);
+  const [isReady, setIsReady] = (0, import_react2.useState)(() => !shouldDeferRenderUntilReady);
+  (0, import_react2.useEffect)(() => {
     if (!enablePresets || typeof window === "undefined") {
       setIsReady(true);
       return;
@@ -3937,7 +4118,7 @@ function ThemeProvider({
       setIsReady(true);
     }
   }, [presetStorageKey, enablePresets, defaultPreset, getAvailablePresetById]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       const updateResolvedMode = () => setResolvedMode(getSystemTheme());
@@ -3949,14 +4130,14 @@ function ThemeProvider({
       return;
     }
   }, [mode]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined") return;
     const root = document.documentElement;
     root.classList.remove("light", "dark");
     root.classList.add(resolvedMode);
     root.style.colorScheme = resolvedMode;
   }, [resolvedMode]);
-  const applyPresetColors = (0, import_react.useCallback)((preset, mode2) => {
+  const applyPresetColors = (0, import_react2.useCallback)((preset, mode2) => {
     if (!preset) return;
     const root = document.documentElement;
     const colors = preset[mode2];
@@ -4001,14 +4182,14 @@ function ThemeProvider({
       }
     });
   }, []);
-  const handleModeChange = (0, import_react.useCallback)(
+  const handleModeChange = (0, import_react2.useCallback)(
     (newMode) => {
       setMode(newMode);
       setStoredMode(newMode, modeStorageKey);
     },
     [modeStorageKey]
   );
-  const handleModeToggle = (0, import_react.useCallback)(
+  const handleModeToggle = (0, import_react2.useCallback)(
     (coordinates) => {
       const newMode = resolvedMode === "light" ? "dark" : "light";
       const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -4027,11 +4208,11 @@ function ThemeProvider({
     },
     [resolvedMode, enableTransitions, handleModeChange]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!currentPreset || typeof window === "undefined") return;
     applyPresetColors(currentPreset.colors, resolvedMode);
   }, [currentPreset, resolvedMode, applyPresetColors]);
-  const applyPreset = (0, import_react.useCallback)(
+  const applyPreset = (0, import_react2.useCallback)(
     (preset) => {
       const presetData = {
         presetId: preset.id,
@@ -4053,7 +4234,7 @@ function ThemeProvider({
     },
     [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
   );
-  const setThemePresetById = (0, import_react.useCallback)(
+  const setThemePresetById = (0, import_react2.useCallback)(
     (presetId) => {
       const preset = getAvailablePresetById(presetId);
       if (!preset) {
@@ -4074,7 +4255,7 @@ function ThemeProvider({
     },
     [getAvailablePresetById, applyPreset]
   );
-  const clearPreset = (0, import_react.useCallback)(() => {
+  const clearPreset = (0, import_react2.useCallback)(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
         localStorage.removeItem(presetStorageKey);
@@ -4118,8 +4299,9 @@ function ThemeProvider({
       }
     }
   }, [presetStorageKey, enablePresets, defaultPreset, applyPresetColors, resolvedMode]);
-  if (!isReady) {
-    return null;
+  const scriptElement = shouldInjectScript ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeScript, { presetStorageKey, defaultPreset }) : null;
+  if (!isReady && shouldDeferRenderUntilReady) {
+    return scriptElement;
   }
   const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
@@ -4136,168 +4318,19 @@ function ThemeProvider({
     builtInPresets,
     customPresets: normalizedCustomPresets
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnifiedThemeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    scriptElement,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UnifiedThemeContext.Provider, { value: contextValue, children })
+  ] });
 }
 function useTheme() {
-  const context = (0, import_react.useContext)(UnifiedThemeContext);
+  const context = (0, import_react2.useContext)(UnifiedThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
 }
 
-// src/components/UnifiedThemeScript.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function ThemeScript({
-  presetStorageKey = "theme-preset",
-  defaultPreset
-}) {
-  const defaultPresetData = (0, import_react2.useMemo)(() => {
-    if (!defaultPreset) return null;
-    const preset = getPresetById(defaultPreset);
-    return preset ? {
-      presetId: defaultPreset,
-      presetName: preset.label,
-      colors: preset.styles
-    } : null;
-  }, [defaultPreset]);
-  const scriptContent = (0, import_react2.useMemo)(() => `
-    // Unified Theme Engine: Restore preset colors before hydration
-    (function() {
-      try {
-        const presetStorageKey = "${presetStorageKey}";
-        
-        // CSS property categories (inline for script)
-        const CSS_CATEGORIES = {
-          colors: [
-            'background', 'foreground', 'card', 'card-foreground', 'popover', 'popover-foreground',
-            'primary', 'primary-foreground', 'secondary', 'secondary-foreground', 
-            'muted', 'muted-foreground', 'accent', 'accent-foreground',
-            'destructive', 'destructive-foreground', 'border', 'input', 'ring',
-            'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',
-            'sidebar', 'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
-            'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring'
-          ],
-          typography: ['font-sans', 'font-serif', 'font-mono'],
-          layout: ['radius'],
-          shadows: ['shadow-color', 'shadow-opacity', 'shadow-blur', 'shadow-spread', 'shadow-offset-x', 'shadow-offset-y'],
-          spacing: ['letter-spacing', 'spacing']
-        };
-
-        // Function to apply all preset properties - with proper clearing and defaults
-        function applyPresetProperties(colors) {
-          if (!colors) return;
-          
-          const root = document.documentElement;
-          
-          // Default values for essential properties that might be missing
-          const defaultValues = {
-            'spacing': '0.25rem',
-            'letter-spacing': 'normal'
-          };
-          
-          // Get all possible CSS properties  
-          const allCategories = ['colors', 'typography', 'layout', 'shadows', 'spacing'];
-          const allProperties = [];
-          allCategories.forEach(function(category) {
-            CSS_CATEGORIES[category].forEach(function(prop) {
-              allProperties.push(prop);
-            });
-          });
-          
-          // First, clear all properties to prevent leftover values
-          let clearedCount = 0;
-          allProperties.forEach(function(prop) {
-            const cssVar = '--' + prop;
-            root.style.removeProperty(cssVar);
-            clearedCount++;
-          });
-          console.log('\u{1F3A8} UnifiedThemeScript: Cleared ' + clearedCount + ' CSS properties before applying new theme');
-          
-          // Apply all properties with defaults for missing ones
-          let appliedCount = 0;
-          allProperties.forEach(function(prop) {
-            let value = colors[prop];
-            
-            // Apply default value if property is missing and we have a default
-            if (!value && defaultValues[prop]) {
-              value = defaultValues[prop];
-              console.log('\u{1F3A8} Script using default value for ' + prop + ': ' + value);
-            }
-            
-            if (value) {
-              const cssVar = '--' + prop;
-              // Apply directly like TweakCN does - no conversion, no !important
-              root.style.setProperty(cssVar, value);
-              appliedCount++;
-              console.log('\u{1F3A8} Script applied ' + cssVar + ': ' + value);
-            }
-          });
-          
-          console.log('\u{1F3A8} UnifiedThemeScript: Applied ' + appliedCount + ' CSS properties');
-        }
-        
-        // Load and apply persisted preset or default preset
-        const storedPreset = localStorage.getItem(presetStorageKey);
-        let presetToApply = null;
-        
-        if (storedPreset) {
-          try {
-            presetToApply = JSON.parse(storedPreset);
-            console.log('\u{1F3A8} UnifiedThemeScript: Using stored preset:', presetToApply.presetName);
-          } catch (error) {
-            console.warn('\u{1F3A8} UnifiedThemeScript: Failed to parse stored preset:', error);
-          }
-        }
-        
-        // Use default preset if no stored preset
-        if (!presetToApply && ${JSON.stringify(defaultPresetData)}) {
-          presetToApply = ${JSON.stringify(defaultPresetData)};
-          console.log('\u{1F3A8} UnifiedThemeScript: Using default preset:', presetToApply.presetName);
-        }
-        
-        if (presetToApply) {
-          // Determine current mode (will be set by ThemeProvider)
-          // Default to light if no theme class is present yet
-          const isDark = document.documentElement.classList.contains('dark');
-          const mode = isDark ? 'dark' : 'light';
-          const colors = presetToApply.colors && presetToApply.colors[mode];
-          
-          if (colors) {
-            // Font inheritance logic: inherit missing fonts from other mode
-            const fontProperties = ['font-sans', 'font-serif', 'font-mono'];
-            const otherMode = mode === 'light' ? 'dark' : 'light';
-            const otherModeColors = presetToApply.colors && presetToApply.colors[otherMode];
-            
-            if (otherModeColors) {
-              fontProperties.forEach(function(fontProp) {
-                if (!colors[fontProp] && otherModeColors[fontProp]) {
-                  colors[fontProp] = otherModeColors[fontProp];
-                  console.log('\u{1F3A8} Script inherited ' + fontProp + ': "' + otherModeColors[fontProp] + '" from ' + otherMode + ' mode');
-                }
-              });
-            }
-            
-            applyPresetProperties(colors);
-            console.log('\u{1F3A8} UnifiedThemeScript: Applied preset properties for', mode, 'mode');
-          }
-        }
-        
-      } catch (error) {
-        console.error('\u{1F3A8} UnifiedThemeScript: Initialization failed:', error);
-      }
-    })();
-  `, [presetStorageKey, defaultPresetData]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "script",
-    {
-      dangerouslySetInnerHTML: { __html: scriptContent },
-      suppressHydrationWarning: true
-    }
-  );
-}
-
 // src/components/ThemeToggle.tsx
 var import_react3 = require("react");
 var import_clsx = require("clsx");
@@ -4414,6 +4447,7 @@ var ThemeToggle = (0, import_react3.forwardRef)(
         className: baseClasses,
         onClick: handleClick,
         "data-mode": resolvedMode,
+        "data-theme": resolvedMode,
         "aria-label": `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
         title: `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
         ...props,
@@ -4426,7 +4460,6 @@ ThemeToggle.displayName = "ThemeToggle";
 
 // src/components/ThemePresetButtons.tsx
 var import_react4 = require("react");
-var import_framer_motion = require("framer-motion");
 var import_clsx2 = require("clsx");
 
 // src/utils/colors.ts
@@ -4614,33 +4647,25 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_framer_motion.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
     {
-      className: "flex-shrink-0",
-      style: { minWidth: layout.buttonWidth },
-      whileHover: { scale: 1.02, y: -3, zIndex: 20 },
-      transition: { duration: 0.2, ease: "easeOut" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "div",
-        {
-          className: (0, import_clsx2.clsx)(
-            "cursor-pointer bg-card hover:bg-card/80 border border-border rounded-lg",
-            "flex w-full h-full items-center justify-center relative transition-all duration-200",
-            "hover:shadow-lg hover:border-primary/20 px-4 py-3",
-            isSelected ? "ring-2 ring-primary/50 shadow-md bg-primary/5" : ""
-          ),
-          onClick,
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2.5 text-center", children: [
-            layout.showColorBoxes && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
-              (color, index) => renderColorBox ? renderColorBox(color, index) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorBox, { color }, index)
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
-          ] })
-        }
-      )
+      className: (0, import_clsx2.clsx)(
+        "theme-preset-button",
+        "cursor-pointer bg-card hover:bg-card/80 border border-border rounded-lg",
+        "flex w-full h-full items-center justify-center relative transition-all duration-200",
+        "hover:shadow-lg hover:border-primary/20 px-4 py-3",
+        isSelected ? "ring-2 ring-primary/50 shadow-md bg-primary/5" : ""
+      ),
+      onClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2.5 text-center", children: [
+        layout.showColorBoxes && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
+          (color, index) => renderColorBox ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: renderColorBox(color, index) }, index) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorBox, { color }, index)
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
+      ] })
     }
-  );
+  ) });
 };
 var AnimatedRow = ({
   presets,
@@ -4652,36 +4677,28 @@ var AnimatedRow = ({
   renderPreset,
   renderColorBox
 }) => {
-  const [scope, animate] = (0, import_framer_motion.useAnimate)();
-  const controls = (0, import_react4.useRef)(null);
   if (presets.length === 0) return null;
   const duplicatedPresets = Array(animation.duplicationFactor).fill(presets).flat();
   const totalWidth = presets.length * (layout.buttonWidth + layout.buttonGap);
-  const animationDuration = presets.length * animation.duration;
-  const target = {
-    x: [0, -totalWidth]
-  };
-  const options = {
-    duration: animationDuration,
-    ease: animation.easing,
-    repeat: Infinity
-  };
-  (0, import_react4.useEffect)(() => {
-    if (animation.enabled) {
-      controls.current = animate(scope.current, target, options);
-    }
-  }, [target, options, animate, scope, animation.enabled]);
+  const effectiveScrollSpeed = Math.max(0.1, animation.scrollSpeed || 1);
+  const animationDuration = presets.length * animation.duration / effectiveScrollSpeed;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_framer_motion.motion.div,
+    "div",
     {
-      ref: scope,
-      className: "flex",
-      onHoverStart: () => animation.hoverPause && controls.current?.pause(),
-      onHoverEnd: () => animation.hoverPause && controls.current?.play(),
+      className: (0, import_clsx2.clsx)(
+        "theme-preset-row flex",
+        animation.enabled && "theme-preset-row--animated",
+        animation.hoverPause && "theme-preset-row--hover-pause"
+      ),
+      style: {
+        ["--theme-engine-scroll-distance"]: `${totalWidth}px`,
+        ["--theme-engine-scroll-duration"]: `${animationDuration}s`,
+        ["--theme-engine-scroll-easing"]: animation.easing
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
-          className: "flex flex-shrink-0",
+          className: "theme-preset-track flex flex-shrink-0",
           style: { gap: `${layout.buttonGap}px` },
           children: duplicatedPresets.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             PresetButton,
@@ -4710,29 +4727,11 @@ var ThemePresetButtons = ({
   categories,
   maxPresets,
   showBuiltIn = true,
-  showCustom = true,
-  groupBy = "none",
-  labels = {},
-  showSectionHeaders = true
+  showCustom = true
 }) => {
   const { currentPreset, applyPreset, resolvedMode, availablePresets, builtInPresets, customPresets } = useTheme();
   const selectedPresetId = currentPreset?.presetId || void 0;
   const onPresetSelect = applyPreset;
-  const defaultLabels = {
-    builtIn: labels.builtIn || "Built-in Themes",
-    custom: labels.custom || "Custom Themes"
-  };
-  const isGrouped = groupBy !== "none";
-  const shouldShowHeaders = showSectionHeaders && isGrouped;
-  if (typeof window !== "undefined" && window.location?.hostname === "localhost") {
-    console.log("\u{1F3A8} ThemePresetButtons: Categorization features", {
-      groupBy,
-      showBuiltIn,
-      showCustom,
-      labels: defaultLabels,
-      shouldShowHeaders
-    });
-  }
   const [presets, setPresets] = (0, import_react4.useState)([]);
   const [loading, setLoading] = (0, import_react4.useState)(true);
   const [error, setError] = (0, import_react4.useState)(null);
@@ -4836,14 +4835,10 @@ var ThemePresetButtons = ({
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx2.clsx)("flex items-center justify-center py-8", className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm text-muted-foreground", children: "No presets available" }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_framer_motion.motion.div,
+    "div",
     {
-      initial: { opacity: 0, y: 20 },
-      whileInView: { opacity: 1, y: 0 },
-      viewport: { once: true },
-      transition: { duration: 0.5, ease: "easeOut" },
       className: (0, import_clsx2.clsx)(
-        "w-full overflow-hidden mb-8 flex flex-col py-2 -my-2",
+        "theme-fade-in w-full overflow-hidden mb-8 flex flex-col py-2 -my-2",
         className
       ),
       style: containerStyle,
@@ -4864,12 +4859,24 @@ var ThemePresetButtons = ({
     }
   );
 };
+
+// src/hooks/useTypedTheme.ts
+function useTypedTheme(customPresets) {
+  void customPresets;
+  const theme = useTheme();
+  const setThemePresetById = (presetId) => theme.setThemePresetById(presetId);
+  return {
+    ...theme,
+    setThemePresetById
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemePresetButtons,
   ThemeProvider,
   ThemeScript,
   ThemeToggle,
+  builtInPresetIds,
   formatColor,
   getPresetById,
   getPresetEntries,
@@ -4880,6 +4887,7 @@ var ThemePresetButtons = ({
   searchPresets,
   tweakcnPresets,
   useTheme,
+  useTypedTheme,
   validateCustomPresets,
   validateTweakCNPreset,
   withAlpha