npm - @fakhrirafiki/theme-engine - Versions diffs - 0.4.5 → 0.4.8 - Mend

@fakhrirafiki/theme-engine 0.4.5 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -355,40 +355,27 @@ interface UnifiedThemeContextValue {
     /** Custom presets only */
     customPresets: Record<string, TweakCNThemePreset>;
 }
-type CustomPresetsRecord$1 = Record<string, TweakCNThemePreset>;
-type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
-type PresetId<TCustomPresets> = BuiltInPresetId | CustomPresetId$1<TCustomPresets>;
+type CustomPresetsRecord$2 = Record<string, TweakCNThemePreset>;
+type CustomPresetId$2<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$2 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
+type PresetId<TCustomPresets> = BuiltInPresetId | CustomPresetId$2<TCustomPresets>;
 /**
  * Props for the UnifiedThemeProvider component.
  *
  * @public
  */
-interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined> {
+interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$2 | undefined = undefined> {
     /** React children to wrap with theming context */
     children: react__default.ReactNode;
     /** Default appearance mode when no stored preference exists */
     defaultMode?: Mode;
     /** Default preset ID to use when no stored preset exists or when resetting */
     defaultPreset?: PresetId<TCustomPresets>;
-    /** Enable smooth transitions between modes */
-    enableTransitions?: boolean;
     /** localStorage key for appearance mode persistence */
     modeStorageKey?: string;
     /** localStorage key for color preset persistence */
     presetStorageKey?: string;
-    /** Enable custom color preset functionality */
-    enablePresets?: boolean;
     /** Custom presets to add to the available collection */
     customPresets?: TCustomPresets;
-    /** Whether to include built-in TweakCN presets (default: true) */
-    includeBuiltInPresets?: boolean;
-    /** Disable injecting `ThemeScript` from inside `ThemeProvider` (useful if you render it in `<head>` yourself). */
-    disableScript?: boolean;
-    /**
-     * When true, the provider renders `null` until persisted preset is loaded from storage.
-     * Defaults to `true` when `disableScript` is enabled (backwards behavior), otherwise `false`.
-     */
-    deferRenderUntilReady?: boolean;
 }
 /**
  * Theme Provider - The heart of the elegant theming system.
@@ -410,7 +397,6 @@ interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$1
  *   defaultMode="system"
  *   modeStorageKey="app-mode"
  *   presetStorageKey="app-preset"
- *   enablePresets={true}
  * >
  *   <App />
  * </ThemeProvider>
@@ -418,7 +404,7 @@ interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$1
  *
  * @public
  */
-declare function ThemeProvider<const TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined>({ children, defaultMode, defaultPreset, enableTransitions, modeStorageKey, presetStorageKey, enablePresets, customPresets, includeBuiltInPresets, disableScript, deferRenderUntilReady, }: UnifiedThemeProviderProps<TCustomPresets>): react_jsx_runtime.JSX.Element | null;
+declare function ThemeProvider<const TCustomPresets extends CustomPresetsRecord$2 | undefined = undefined>({ children, defaultMode, defaultPreset, modeStorageKey, presetStorageKey, customPresets, }: UnifiedThemeProviderProps<TCustomPresets>): react_jsx_runtime.JSX.Element;
 /**
  * Hook for accessing the unified theming system.
  *
@@ -492,10 +478,10 @@ declare const ThemeToggle: react.ForwardRefExoticComponent<ThemeToggleProps & re
  */
 declare const ThemePresetButtons: ({ animation: animationOverrides, layout: layoutOverrides, renderPreset, renderColorBox, className, categories, maxPresets, showBuiltIn, showCustom, }: ThemePresetButtonsProps) => react_jsx_runtime.JSX.Element;
-type CustomPresetsRecord = Record<string, TweakCNThemePreset>;
-type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
-type ThemePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = BuiltInPresetId | CustomPresetId<TCustomPresets>;
-type LooseString = string & {};
+type CustomPresetsRecord$1 = Record<string, TweakCNThemePreset>;
+type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
+type ThemePresetId$1<TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined> = BuiltInPresetId | CustomPresetId$1<TCustomPresets>;
+type LooseString$1 = string & {};
 /**
  * Typed convenience wrapper around `useTheme()` that provides IntelliSense for preset IDs.
  *
@@ -504,8 +490,8 @@ type LooseString = string & {};
  *
  * The resulting `setThemePresetById()` still accepts any string, but VS Code will suggest known IDs first.
  */
-declare function useTypedTheme<const TCustomPresets extends CustomPresetsRecord | undefined = undefined>(customPresets?: TCustomPresets): {
-    setThemePresetById: (presetId: LooseString | ThemePresetId<TCustomPresets>) => void;
+declare function useTypedTheme<const TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined>(customPresets?: TCustomPresets): {
+    setThemePresetById: (presetId: LooseString$1 | ThemePresetId$1<TCustomPresets>) => void;
     mode: Mode;
     resolvedMode: "light" | "dark";
     setMode: (mode: Mode) => void;
@@ -524,6 +510,59 @@ declare function useTypedTheme<const TCustomPresets extends CustomPresetsRecord
     customPresets: Record<string, TweakCNThemePreset>;
 };
+type CustomPresetsRecord = Record<string, TweakCNThemePreset>;
+type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
+type ThemePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = BuiltInPresetId | CustomPresetId<TCustomPresets>;
+type LooseString = string & {};
+/**
+ * Type helper to "register" your presets for autocomplete.
+ *
+ * Usage:
+ * `useThemeEngine<ThemePresets<typeof customPresets>>()`
+ */
+type ThemePresets<T> = T extends CustomPresetsRecord ? T : never;
+type ThemeEnginePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = ThemePresetId<TCustomPresets>;
+type ThemeId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = ThemeEnginePresetId<TCustomPresets> | LooseString;
+/**
+ * DX-first hook for Theme Engine.
+ *
+ * Unifies:
+ * - mode controls (`light` | `dark` | `system`)
+ * - preset controls (apply/clear by ID)
+ *
+ * For typed preset ID autocomplete (built-in + your custom IDs):
+ * `useThemeEngine<ThemePresets<typeof customPresets>>()`
+ */
+declare function useThemeEngine<const TCustomPresets extends CustomPresetsRecord | undefined = undefined>(): {
+    darkMode: boolean;
+    mode: Mode;
+    resolvedMode: "light" | "dark";
+    setDarkMode: (mode: Mode) => void;
+    setMode: (mode: Mode) => void;
+    toggleDarkMode: (coordinates?: Coordinates) => void;
+    toggleMode: (coordinates?: Coordinates) => void;
+    applyThemeById: (themeId: ThemeId<TCustomPresets>) => void;
+    applyPresetById: (themeId: ThemeId<TCustomPresets>) => void;
+    clearTheme: () => void;
+    clearPreset: () => void;
+    currentTheme: {
+        presetId: string;
+        presetName: string;
+        colors: ThemePreset["colors"];
+        appliedAt: number;
+    } | null;
+    currentPreset: {
+        presetId: string;
+        presetName: string;
+        colors: ThemePreset["colors"];
+        appliedAt: number;
+    } | null;
+    isUsingDefaultPreset: boolean;
+    availablePresets: Record<string, TweakCNThemePreset>;
+    builtInPresets: Record<string, TweakCNThemePreset>;
+    customPresets: Record<string, TweakCNThemePreset>;
+};
 /**
  * Lightweight color utilities for theme-engine
  * Provides basic color manipulation without heavy dependencies
@@ -565,4 +604,4 @@ declare function validateCustomPresets(customPresets: Record<string, TweakCNThem
  */
 declare function logValidationResult(result: ValidationResult, context?: string): void;
-export { type BuiltInPresetId, type CompleteThemeSchema, type Coordinates, type Mode, type PresetProvider, type ThemePreset, ThemePresetButtons, type ThemePresetButtonsProps, type ThemePresetId, ThemeProvider, ThemeScript, ThemeToggle, type ThemeToggleProps, type TweakCNThemePreset, type ValidationResult, builtInPresetIds, formatColor, getPresetById, getPresetEntries, getPresetIds, getPresetLabels, getPresetsCount, logValidationResult, searchPresets, tweakcnPresets, useTheme, useTypedTheme, validateCustomPresets, validateTweakCNPreset, withAlpha };
+export { type BuiltInPresetId, type CompleteThemeSchema, type Coordinates, type Mode, type PresetProvider, type ThemeEnginePresetId, type ThemeId, type ThemePreset, ThemePresetButtons, type ThemePresetButtonsProps, type ThemePresetId$1 as ThemePresetId, type ThemePresets, ThemeProvider, ThemeScript, ThemeToggle, type ThemeToggleProps, type TweakCNThemePreset, type ValidationResult, builtInPresetIds, formatColor, getPresetById, getPresetEntries, getPresetIds, getPresetLabels, getPresetsCount, logValidationResult, searchPresets, tweakcnPresets, useTheme, useThemeEngine, useTypedTheme, validateCustomPresets, validateTweakCNPreset, withAlpha };

package/dist/index.d.ts CHANGED Viewed

@@ -355,40 +355,27 @@ interface UnifiedThemeContextValue {
     /** Custom presets only */
     customPresets: Record<string, TweakCNThemePreset>;
 }
-type CustomPresetsRecord$1 = Record<string, TweakCNThemePreset>;
-type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
-type PresetId<TCustomPresets> = BuiltInPresetId | CustomPresetId$1<TCustomPresets>;
+type CustomPresetsRecord$2 = Record<string, TweakCNThemePreset>;
+type CustomPresetId$2<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$2 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
+type PresetId<TCustomPresets> = BuiltInPresetId | CustomPresetId$2<TCustomPresets>;
 /**
  * Props for the UnifiedThemeProvider component.
  *
  * @public
  */
-interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined> {
+interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$2 | undefined = undefined> {
     /** React children to wrap with theming context */
     children: react__default.ReactNode;
     /** Default appearance mode when no stored preference exists */
     defaultMode?: Mode;
     /** Default preset ID to use when no stored preset exists or when resetting */
     defaultPreset?: PresetId<TCustomPresets>;
-    /** Enable smooth transitions between modes */
-    enableTransitions?: boolean;
     /** localStorage key for appearance mode persistence */
     modeStorageKey?: string;
     /** localStorage key for color preset persistence */
     presetStorageKey?: string;
-    /** Enable custom color preset functionality */
-    enablePresets?: boolean;
     /** Custom presets to add to the available collection */
     customPresets?: TCustomPresets;
-    /** Whether to include built-in TweakCN presets (default: true) */
-    includeBuiltInPresets?: boolean;
-    /** Disable injecting `ThemeScript` from inside `ThemeProvider` (useful if you render it in `<head>` yourself). */
-    disableScript?: boolean;
-    /**
-     * When true, the provider renders `null` until persisted preset is loaded from storage.
-     * Defaults to `true` when `disableScript` is enabled (backwards behavior), otherwise `false`.
-     */
-    deferRenderUntilReady?: boolean;
 }
 /**
  * Theme Provider - The heart of the elegant theming system.
@@ -410,7 +397,6 @@ interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$1
  *   defaultMode="system"
  *   modeStorageKey="app-mode"
  *   presetStorageKey="app-preset"
- *   enablePresets={true}
  * >
  *   <App />
  * </ThemeProvider>
@@ -418,7 +404,7 @@ interface UnifiedThemeProviderProps<TCustomPresets extends CustomPresetsRecord$1
  *
  * @public
  */
-declare function ThemeProvider<const TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined>({ children, defaultMode, defaultPreset, enableTransitions, modeStorageKey, presetStorageKey, enablePresets, customPresets, includeBuiltInPresets, disableScript, deferRenderUntilReady, }: UnifiedThemeProviderProps<TCustomPresets>): react_jsx_runtime.JSX.Element | null;
+declare function ThemeProvider<const TCustomPresets extends CustomPresetsRecord$2 | undefined = undefined>({ children, defaultMode, defaultPreset, modeStorageKey, presetStorageKey, customPresets, }: UnifiedThemeProviderProps<TCustomPresets>): react_jsx_runtime.JSX.Element;
 /**
  * Hook for accessing the unified theming system.
  *
@@ -492,10 +478,10 @@ declare const ThemeToggle: react.ForwardRefExoticComponent<ThemeToggleProps & re
  */
 declare const ThemePresetButtons: ({ animation: animationOverrides, layout: layoutOverrides, renderPreset, renderColorBox, className, categories, maxPresets, showBuiltIn, showCustom, }: ThemePresetButtonsProps) => react_jsx_runtime.JSX.Element;
-type CustomPresetsRecord = Record<string, TweakCNThemePreset>;
-type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
-type ThemePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = BuiltInPresetId | CustomPresetId<TCustomPresets>;
-type LooseString = string & {};
+type CustomPresetsRecord$1 = Record<string, TweakCNThemePreset>;
+type CustomPresetId$1<TCustomPresets> = TCustomPresets extends CustomPresetsRecord$1 ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
+type ThemePresetId$1<TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined> = BuiltInPresetId | CustomPresetId$1<TCustomPresets>;
+type LooseString$1 = string & {};
 /**
  * Typed convenience wrapper around `useTheme()` that provides IntelliSense for preset IDs.
  *
@@ -504,8 +490,8 @@ type LooseString = string & {};
  *
  * The resulting `setThemePresetById()` still accepts any string, but VS Code will suggest known IDs first.
  */
-declare function useTypedTheme<const TCustomPresets extends CustomPresetsRecord | undefined = undefined>(customPresets?: TCustomPresets): {
-    setThemePresetById: (presetId: LooseString | ThemePresetId<TCustomPresets>) => void;
+declare function useTypedTheme<const TCustomPresets extends CustomPresetsRecord$1 | undefined = undefined>(customPresets?: TCustomPresets): {
+    setThemePresetById: (presetId: LooseString$1 | ThemePresetId$1<TCustomPresets>) => void;
     mode: Mode;
     resolvedMode: "light" | "dark";
     setMode: (mode: Mode) => void;
@@ -524,6 +510,59 @@ declare function useTypedTheme<const TCustomPresets extends CustomPresetsRecord
     customPresets: Record<string, TweakCNThemePreset>;
 };
+type CustomPresetsRecord = Record<string, TweakCNThemePreset>;
+type CustomPresetId<TCustomPresets> = TCustomPresets extends CustomPresetsRecord ? string extends keyof TCustomPresets ? never : Extract<keyof TCustomPresets, string> : never;
+type ThemePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = BuiltInPresetId | CustomPresetId<TCustomPresets>;
+type LooseString = string & {};
+/**
+ * Type helper to "register" your presets for autocomplete.
+ *
+ * Usage:
+ * `useThemeEngine<ThemePresets<typeof customPresets>>()`
+ */
+type ThemePresets<T> = T extends CustomPresetsRecord ? T : never;
+type ThemeEnginePresetId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = ThemePresetId<TCustomPresets>;
+type ThemeId<TCustomPresets extends CustomPresetsRecord | undefined = undefined> = ThemeEnginePresetId<TCustomPresets> | LooseString;
+/**
+ * DX-first hook for Theme Engine.
+ *
+ * Unifies:
+ * - mode controls (`light` | `dark` | `system`)
+ * - preset controls (apply/clear by ID)
+ *
+ * For typed preset ID autocomplete (built-in + your custom IDs):
+ * `useThemeEngine<ThemePresets<typeof customPresets>>()`
+ */
+declare function useThemeEngine<const TCustomPresets extends CustomPresetsRecord | undefined = undefined>(): {
+    darkMode: boolean;
+    mode: Mode;
+    resolvedMode: "light" | "dark";
+    setDarkMode: (mode: Mode) => void;
+    setMode: (mode: Mode) => void;
+    toggleDarkMode: (coordinates?: Coordinates) => void;
+    toggleMode: (coordinates?: Coordinates) => void;
+    applyThemeById: (themeId: ThemeId<TCustomPresets>) => void;
+    applyPresetById: (themeId: ThemeId<TCustomPresets>) => void;
+    clearTheme: () => void;
+    clearPreset: () => void;
+    currentTheme: {
+        presetId: string;
+        presetName: string;
+        colors: ThemePreset["colors"];
+        appliedAt: number;
+    } | null;
+    currentPreset: {
+        presetId: string;
+        presetName: string;
+        colors: ThemePreset["colors"];
+        appliedAt: number;
+    } | null;
+    isUsingDefaultPreset: boolean;
+    availablePresets: Record<string, TweakCNThemePreset>;
+    builtInPresets: Record<string, TweakCNThemePreset>;
+    customPresets: Record<string, TweakCNThemePreset>;
+};
 /**
  * Lightweight color utilities for theme-engine
  * Provides basic color manipulation without heavy dependencies
@@ -565,4 +604,4 @@ declare function validateCustomPresets(customPresets: Record<string, TweakCNThem
  */
 declare function logValidationResult(result: ValidationResult, context?: string): void;
-export { type BuiltInPresetId, type CompleteThemeSchema, type Coordinates, type Mode, type PresetProvider, type ThemePreset, ThemePresetButtons, type ThemePresetButtonsProps, type ThemePresetId, ThemeProvider, ThemeScript, ThemeToggle, type ThemeToggleProps, type TweakCNThemePreset, type ValidationResult, builtInPresetIds, formatColor, getPresetById, getPresetEntries, getPresetIds, getPresetLabels, getPresetsCount, logValidationResult, searchPresets, tweakcnPresets, useTheme, useTypedTheme, validateCustomPresets, validateTweakCNPreset, withAlpha };
+export { type BuiltInPresetId, type CompleteThemeSchema, type Coordinates, type Mode, type PresetProvider, type ThemeEnginePresetId, type ThemeId, type ThemePreset, ThemePresetButtons, type ThemePresetButtonsProps, type ThemePresetId$1 as ThemePresetId, type ThemePresets, ThemeProvider, ThemeScript, ThemeToggle, type ThemeToggleProps, type TweakCNThemePreset, type ValidationResult, builtInPresetIds, formatColor, getPresetById, getPresetEntries, getPresetIds, getPresetLabels, getPresetsCount, logValidationResult, searchPresets, tweakcnPresets, useTheme, useThemeEngine, useTypedTheme, validateCustomPresets, validateTweakCNPreset, withAlpha };

package/dist/index.js CHANGED Viewed

@@ -36,6 +36,7 @@ __export(index_exports, {
   searchPresets: () => searchPresets,
   tweakcnPresets: () => tweakcnPresets,
   useTheme: () => useTheme,
+  useThemeEngine: () => useThemeEngine,
   useTypedTheme: () => useTypedTheme,
   validateCustomPresets: () => validateCustomPresets,
   validateTweakCNPreset: () => validateTweakCNPreset,
@@ -3983,6 +3984,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;
         }
@@ -4255,23 +4279,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 = (0, import_react2.useMemo)(() => customPresets ?? {}, [customPresets]);
   const [mode, setMode] = (0, import_react2.useState)(() => {
     const stored = getStoredMode(modeStorageKey);
@@ -4285,9 +4326,7 @@ function ThemeProvider({
   });
   const availablePresets = (0, import_react2.useMemo)(() => {
     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";
@@ -4303,8 +4342,8 @@ function ThemeProvider({
       }
     }
     return merged;
-  }, [includeBuiltInPresets, normalizedCustomPresets]);
-  const builtInPresets = (0, import_react2.useMemo)(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
+  }, [normalizedCustomPresets]);
+  const builtInPresets = tweakcnPresets;
   const getAvailablePresetById = (0, import_react2.useCallback)(
     (id) => {
       return availablePresets[id] || null;
@@ -4312,12 +4351,8 @@ function ThemeProvider({
     [availablePresets]
   );
   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;
-    }
+    if (typeof window === "undefined") return;
     try {
       const stored = localStorage.getItem(presetStorageKey);
       const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
@@ -4370,10 +4405,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]);
   (0, import_react2.useEffect)(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -4452,7 +4485,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`);
@@ -4465,7 +4498,7 @@ function ThemeProvider({
         handleModeChange(newMode);
       }
     },
-    [resolvedMode, enableTransitions, handleModeChange]
+    [resolvedMode, handleModeChange]
   );
   (0, import_react2.useEffect)(() => {
     if (!currentPreset || typeof window === "undefined") return;
@@ -4480,7 +4513,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) {
@@ -4491,7 +4524,7 @@ function ThemeProvider({
         applyPresetColors(preset.colors, resolvedMode);
       }
     },
-    [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
+    [presetStorageKey, applyPresetColors, resolvedMode]
   );
   const setThemePresetById = (0, import_react2.useCallback)(
     (presetId) => {
@@ -4515,53 +4548,50 @@ function ThemeProvider({
     [getAvailablePresetById, applyPreset]
   );
   const clearPreset = (0, import_react2.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__ */ (0, import_jsx_runtime2.jsx)(ThemeScript, { presetStorageKey, defaultPreset }) : null;
-  if (!isReady && shouldDeferRenderUntilReady) {
-    return scriptElement;
-  }
+  }, [presetStorageKey, defaultPreset, getAvailablePresetById, applyPresetColors, resolvedMode]);
+  const scriptElement = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeScript, { presetStorageKey, defaultPreset });
   const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
     mode,
@@ -4817,7 +4847,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__ */ (0, import_jsx_runtime4.jsx)(
@@ -5014,6 +5044,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
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemePresetButtons,
@@ -5031,6 +5097,7 @@ function useTypedTheme(customPresets) {
   searchPresets,
   tweakcnPresets,
   useTheme,
+  useThemeEngine,
   useTypedTheme,
   validateCustomPresets,
   validateTweakCNPreset,