@fakhrirafiki/theme-engine 0.2.6 → 0.4.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/providers/UnifiedThemeProvider.tsx
-import { createContext, useContext, useEffect, useState, useCallback, useMemo } from "react";
+import { createContext, useContext, useEffect, useState, useCallback, useMemo as useMemo2 } from "react";
 
 // src/types/presets.ts
 var CSS_PROPERTY_CATEGORIES = {
@@ -83,6 +83,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: {
@@ -3596,7 +3624,7 @@ var tweakcnPresets = {
   }
 };
 function getPresetIds() {
-  return Object.keys(tweakcnPresets);
+  return [...builtInPresetIds];
 }
 function getPresetById(id) {
   return tweakcnPresets[id] || null;
@@ -3606,13 +3634,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
@@ -3761,8 +3791,153 @@ function logValidationResult(result, context = "Custom presets") {
   }
 }
 
-// src/providers/UnifiedThemeProvider.tsx
+// src/components/UnifiedThemeScript.tsx
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+function ThemeScript({ presetStorageKey = "theme-preset", defaultPreset }) {
+  const defaultPresetData = useMemo(() => {
+    if (!defaultPreset) return null;
+    const preset = getPresetById(defaultPreset);
+    return preset ? {
+      presetId: defaultPreset,
+      presetName: preset.label,
+      colors: preset.styles
+    } : null;
+  }, [defaultPreset]);
+  const scriptContent = 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__ */ jsx("script", { dangerouslySetInnerHTML: { __html: scriptContent }, suppressHydrationWarning: true });
+}
+
+// src/providers/UnifiedThemeProvider.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var UnifiedThemeContext = createContext(void 0);
 var THEME_STORAGE_KEY = "theme-engine-theme";
 function getSystemTheme() {
@@ -3791,9 +3966,14 @@ function ThemeProvider({
   modeStorageKey = THEME_STORAGE_KEY,
   presetStorageKey = "theme-preset",
   enablePresets = true,
-  customPresets = {},
-  includeBuiltInPresets = true
+  customPresets,
+  includeBuiltInPresets = true,
+  disableScript = false,
+  deferRenderUntilReady
 }) {
+  const shouldInjectScript = !disableScript;
+  const shouldDeferRenderUntilReady = deferRenderUntilReady ?? disableScript;
+  const normalizedCustomPresets = useMemo2(() => customPresets ?? {}, [customPresets]);
   const [mode, setMode] = useState(() => {
     const stored = getStoredMode(modeStorageKey);
     return stored || defaultMode;
@@ -3804,19 +3984,19 @@ function ThemeProvider({
     }
     return mode;
   });
-  const availablePresets = useMemo(() => {
+  const availablePresets = useMemo2(() => {
     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");
@@ -3824,9 +4004,8 @@ function ThemeProvider({
       }
     }
     return merged;
-  }, [includeBuiltInPresets, customPresets]);
-  const builtInPresets = useMemo(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
-  const normalizedCustomPresets = useMemo(() => customPresets || {}, [customPresets]);
+  }, [includeBuiltInPresets, normalizedCustomPresets]);
+  const builtInPresets = useMemo2(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
   const getAvailablePresetById = useCallback(
     (id) => {
       return availablePresets[id] || null;
@@ -3834,7 +4013,7 @@ function ThemeProvider({
     [availablePresets]
   );
   const [currentPreset, setCurrentPreset] = useState(null);
-  const [isReady, setIsReady] = useState(false);
+  const [isReady, setIsReady] = useState(() => !shouldDeferRenderUntilReady);
   useEffect(() => {
     if (!enablePresets || typeof window === "undefined") {
       setIsReady(true);
@@ -4077,8 +4256,9 @@ function ThemeProvider({
       }
     }
   }, [presetStorageKey, enablePresets, defaultPreset, applyPresetColors, resolvedMode]);
-  if (!isReady) {
-    return null;
+  const scriptElement = shouldInjectScript ? /* @__PURE__ */ jsx2(ThemeScript, { presetStorageKey, defaultPreset }) : null;
+  if (!isReady && shouldDeferRenderUntilReady) {
+    return scriptElement;
   }
   const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
@@ -4095,7 +4275,10 @@ function ThemeProvider({
     builtInPresets,
     customPresets: normalizedCustomPresets
   };
-  return /* @__PURE__ */ jsx(UnifiedThemeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scriptElement,
+    /* @__PURE__ */ jsx2(UnifiedThemeContext.Provider, { value: contextValue, children })
+  ] });
 }
 function useTheme() {
   const context = useContext(UnifiedThemeContext);
@@ -4105,163 +4288,11 @@ function useTheme() {
   return context;
 }
 
-// src/components/UnifiedThemeScript.tsx
-import { useMemo as useMemo2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function ThemeScript({
-  presetStorageKey = "theme-preset",
-  defaultPreset
-}) {
-  const defaultPresetData = useMemo2(() => {
-    if (!defaultPreset) return null;
-    const preset = getPresetById(defaultPreset);
-    return preset ? {
-      presetId: defaultPreset,
-      presetName: preset.label,
-      colors: preset.styles
-    } : null;
-  }, [defaultPreset]);
-  const scriptContent = useMemo2(() => `
-    // 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__ */ jsx2(
-    "script",
-    {
-      dangerouslySetInnerHTML: { __html: scriptContent },
-      suppressHydrationWarning: true
-    }
-  );
-}
-
 // src/components/ThemeToggle.tsx
 import { forwardRef } from "react";
 import { clsx } from "clsx";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var SunIcon = () => /* @__PURE__ */ jsxs(
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SunIcon = () => /* @__PURE__ */ jsxs2(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4303,7 +4334,7 @@ var MoonIcon = () => /* @__PURE__ */ jsx3(
     children: /* @__PURE__ */ jsx3("path", { d: "m12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
   }
 );
-var SystemIcon = () => /* @__PURE__ */ jsxs(
+var SystemIcon = () => /* @__PURE__ */ jsxs2(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4373,6 +4404,7 @@ var ThemeToggle = 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,
@@ -4384,8 +4416,7 @@ var ThemeToggle = forwardRef(
 ThemeToggle.displayName = "ThemeToggle";
 
 // src/components/ThemePresetButtons.tsx
-import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useMemo as useMemo3, useRef } from "react";
-import { motion, useAnimate } from "framer-motion";
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { clsx as clsx2 } from "clsx";
 
 // src/utils/colors.ts
@@ -4521,7 +4552,7 @@ function withAlpha(colorInput, alpha) {
 }
 
 // src/components/ThemePresetButtons.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_ANIMATION = {
   enabled: true,
   duration: 5,
@@ -4573,33 +4604,25 @@ var PresetButton = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx4(
-    motion.div,
+  return /* @__PURE__ */ jsx4("div", { className: "flex-shrink-0", style: { minWidth: layout.buttonWidth }, children: /* @__PURE__ */ jsx4(
+    "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__ */ jsx4(
-        "div",
-        {
-          className: clsx2(
-            "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__ */ jsxs2("div", { className: "flex items-center gap-2.5 text-center", children: [
-            layout.showColorBoxes && /* @__PURE__ */ jsx4("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
-              (color, index) => renderColorBox ? renderColorBox(color, index) : /* @__PURE__ */ jsx4(ColorBox, { color }, index)
-            ) }),
-            /* @__PURE__ */ jsx4("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
-          ] })
-        }
-      )
+      className: clsx2(
+        "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__ */ jsxs3("div", { className: "flex items-center gap-2.5 text-center", children: [
+        layout.showColorBoxes && /* @__PURE__ */ jsx4("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
+          (color, index) => renderColorBox ? /* @__PURE__ */ jsx4("span", { children: renderColorBox(color, index) }, index) : /* @__PURE__ */ jsx4(ColorBox, { color }, index)
+        ) }),
+        /* @__PURE__ */ jsx4("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
+      ] })
     }
-  );
+  ) });
 };
 var AnimatedRow = ({
   presets,
@@ -4611,36 +4634,28 @@ var AnimatedRow = ({
   renderPreset,
   renderColorBox
 }) => {
-  const [scope, animate] = useAnimate();
-  const controls = 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
-  };
-  useEffect2(() => {
-    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__ */ jsx4(
-    motion.div,
+    "div",
     {
-      ref: scope,
-      className: "flex",
-      onHoverStart: () => animation.hoverPause && controls.current?.pause(),
-      onHoverEnd: () => animation.hoverPause && controls.current?.play(),
+      className: clsx2(
+        "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__ */ jsx4(
         "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__ */ jsx4(
             PresetButton,
@@ -4669,29 +4684,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] = useState2([]);
   const [loading, setLoading] = useState2(true);
   const [error, setError] = useState2(null);
@@ -4786,7 +4783,7 @@ var ThemePresetButtons = ({
     return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsx4("div", { className: "animate-pulse text-sm text-muted-foreground", children: "Loading presets..." }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsxs2("div", { className: "text-sm text-destructive", children: [
+    return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsxs3("div", { className: "text-sm text-destructive", children: [
       "Error: ",
       error
     ] }) });
@@ -4795,14 +4792,10 @@ var ThemePresetButtons = ({
     return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsx4("div", { className: "text-sm text-muted-foreground", children: "No presets available" }) });
   }
   return /* @__PURE__ */ jsx4(
-    motion.div,
+    "div",
     {
-      initial: { opacity: 0, y: 20 },
-      whileInView: { opacity: 1, y: 0 },
-      viewport: { once: true },
-      transition: { duration: 0.5, ease: "easeOut" },
       className: clsx2(
-        "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,
@@ -4823,11 +4816,23 @@ var ThemePresetButtons = ({
     }
   );
 };
+
+// src/hooks/useTypedTheme.ts
+function useTypedTheme(customPresets) {
+  void customPresets;
+  const theme = useTheme();
+  const setThemePresetById = (presetId) => theme.setThemePresetById(presetId);
+  return {
+    ...theme,
+    setThemePresetById
+  };
+}
 export {
   ThemePresetButtons,
   ThemeProvider,
   ThemeScript,
   ThemeToggle,
+  builtInPresetIds,
   formatColor,
   getPresetById,
   getPresetEntries,
@@ -4838,6 +4843,7 @@ export {
   searchPresets,
   tweakcnPresets,
   useTheme,
+  useTypedTheme,
   validateCustomPresets,
   validateTweakCNPreset,
   withAlpha