@dheme/next 1.5.0 → 1.7.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GenerateThemeRequest } from '@dheme/sdk';
+import { GenerateThemeRequest, GenerateThemeResponse } from '@dheme/sdk';
 export { ColorTokens, GenerateThemeRequest, GenerateThemeResponse, HSLColor } from '@dheme/sdk';
 import { DhemeProviderProps as DhemeProviderProps$1, ThemeMode } from '@dheme/react';
 export { ThemeActionsState, ThemeDataState, ThemeGenerator, ThemeGeneratorProps, ThemeMode, applyThemeCSSVariables, buildCacheKey, themeToCSS, useDhemeClient, useGenerateTheme, useTheme, useThemeActions } from '@dheme/react';
@@ -14,6 +14,11 @@ interface GenerateThemeStylesOptions {
     themeParams?: Omit<GenerateThemeRequest, 'theme'>;
     mode?: ThemeMode;
     baseUrl?: string;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely.
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 
 declare function DhemeProvider({ children, cookieSync, onThemeChange, onModeChange, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GenerateThemeRequest } from '@dheme/sdk';
+import { GenerateThemeRequest, GenerateThemeResponse } from '@dheme/sdk';
 export { ColorTokens, GenerateThemeRequest, GenerateThemeResponse, HSLColor } from '@dheme/sdk';
 import { DhemeProviderProps as DhemeProviderProps$1, ThemeMode } from '@dheme/react';
 export { ThemeActionsState, ThemeDataState, ThemeGenerator, ThemeGeneratorProps, ThemeMode, applyThemeCSSVariables, buildCacheKey, themeToCSS, useDhemeClient, useGenerateTheme, useTheme, useThemeActions } from '@dheme/react';
@@ -14,6 +14,11 @@ interface GenerateThemeStylesOptions {
     themeParams?: Omit<GenerateThemeRequest, 'theme'>;
     mode?: ThemeMode;
     baseUrl?: string;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely.
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 
 declare function DhemeProvider({ children, cookieSync, onThemeChange, onModeChange, theme: primaryColor, themeParams, ...props }: DhemeProviderProps): React.ReactElement;

package/dist/server.d.mts

@@ -10,6 +10,22 @@ interface DhemeScriptProps {
     defaultMode?: ThemeMode;
     baseUrl?: string;
     nonce?: string;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely. Useful for internal use cases with custom endpoints.
+     *
+     * @example
+     * // Call an internal proxy route without API key:
+     * onGenerateTheme={async (params) => {
+     *   const res = await fetch('/api/generate-theme/proxy', {
+     *     method: 'POST',
+     *     headers: { 'Content-Type': 'application/json' },
+     *     body: JSON.stringify(params),
+     *   });
+     *   return res.json();
+     * }}
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 interface GenerateThemeStylesOptions {
     /** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
@@ -18,9 +34,14 @@ interface GenerateThemeStylesOptions {
     themeParams?: Omit<GenerateThemeRequest, 'theme'>;
     mode?: ThemeMode;
     baseUrl?: string;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely.
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 
-declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl, nonce, }: DhemeScriptProps): Promise<React.ReactElement>;
+declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl, nonce, onGenerateTheme, }: DhemeScriptProps): Promise<React.ReactElement>;
 
 declare function generateThemeStyles(options: GenerateThemeStylesOptions): Promise<string>;
 

package/dist/server.d.ts

@@ -10,6 +10,22 @@ interface DhemeScriptProps {
     defaultMode?: ThemeMode;
     baseUrl?: string;
     nonce?: string;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely. Useful for internal use cases with custom endpoints.
+     *
+     * @example
+     * // Call an internal proxy route without API key:
+     * onGenerateTheme={async (params) => {
+     *   const res = await fetch('/api/generate-theme/proxy', {
+     *     method: 'POST',
+     *     headers: { 'Content-Type': 'application/json' },
+     *     body: JSON.stringify(params),
+     *   });
+     *   return res.json();
+     * }}
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 interface GenerateThemeStylesOptions {
     /** API key (obrigatório para uso externo; omitir para rotas internas sem autenticação) */
@@ -18,9 +34,14 @@ interface GenerateThemeStylesOptions {
     themeParams?: Omit<GenerateThemeRequest, 'theme'>;
     mode?: ThemeMode;
     baseUrl?: string;
+    /**
+     * Custom theme generation function. When provided, replaces the SDK client's
+     * generateTheme call entirely.
+     */
+    onGenerateTheme?: (params: GenerateThemeRequest) => Promise<GenerateThemeResponse>;
 }
 
-declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl, nonce, }: DhemeScriptProps): Promise<React.ReactElement>;
+declare function DhemeScript({ apiKey, theme, themeParams, defaultMode, baseUrl, nonce, onGenerateTheme, }: DhemeScriptProps): Promise<React.ReactElement>;
 
 declare function generateThemeStyles(options: GenerateThemeStylesOptions): Promise<string>;
 

package/dist/server.js

@@ -40,6 +40,7 @@ module.exports = __toCommonJS(server_exports);
 
 // src/components/DhemeScript.tsx
 var import_react = __toESM(require("react"));
+var import_script = __toESM(require("next/script"));
 var import_sdk = require("@dheme/sdk");
 var import_utils = require("@dheme/react/utils");
 
@@ -81,29 +82,40 @@ async function DhemeScript({
   themeParams,
   defaultMode = "light",
   baseUrl,
-  nonce
+  nonce,
+  onGenerateTheme
 }) {
   const params = { theme, ...themeParams };
   const cacheKey = (0, import_utils.buildCacheKey)(params);
   let themeData = themeCache.get(cacheKey);
   if (!themeData) {
-    const client = new import_sdk.DhemeClient({ apiKey, baseUrl });
-    const response = await client.generateTheme(params);
-    themeData = response.data;
+    if (onGenerateTheme) {
+      themeData = await onGenerateTheme(params);
+    } else {
+      const client = new import_sdk.DhemeClient({ apiKey, baseUrl });
+      const response = await client.generateTheme(params);
+      themeData = response.data;
+    }
     themeCache.set(cacheKey, themeData);
   }
   const lightCSS = (0, import_utils.themeToCSS)(themeData, "light");
   const darkCSS = (0, import_utils.themeToCSS)(themeData, "dark");
   const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
   const scriptContent = (0, import_utils.getNextBlockingScriptPayload)(defaultMode);
+  const styleProps = {
+    nonce,
+    precedence: "high",
+    dangerouslySetInnerHTML: { __html: styleContent }
+  };
   return import_react.default.createElement(
     import_react.default.Fragment,
     null,
-    import_react.default.createElement("style", {
-      nonce,
-      dangerouslySetInnerHTML: { __html: styleContent }
-    }),
-    import_react.default.createElement("script", {
+    import_react.default.createElement("style", styleProps),
+    // strategy="beforeInteractive" causes Next.js to inject this script into
+    // the HTML before any page JS runs — prevents dark/light mode flash.
+    import_react.default.createElement(import_script.default, {
+      id: "dheme-mode-detect",
+      strategy: "beforeInteractive",
       nonce,
       dangerouslySetInnerHTML: { __html: scriptContent }
     })
@@ -114,16 +126,21 @@ async function DhemeScript({
 var import_sdk2 = require("@dheme/sdk");
 var import_utils2 = require("@dheme/react/utils");
 async function generateThemeStyles(options) {
-  const { apiKey, theme, themeParams, mode = "light", baseUrl } = options;
+  const { apiKey, theme, themeParams, mode = "light", baseUrl, onGenerateTheme } = options;
   const params = { theme, ...themeParams };
   const cacheKey = (0, import_utils2.buildCacheKey)(params);
   const cached = themeCache.get(cacheKey);
   if (cached) {
     return (0, import_utils2.themeToCSS)(cached, mode);
   }
-  const client = new import_sdk2.DhemeClient({ apiKey, baseUrl });
-  const response = await client.generateTheme(params);
-  const data = response.data;
+  let data;
+  if (onGenerateTheme) {
+    data = await onGenerateTheme(params);
+  } else {
+    const client = new import_sdk2.DhemeClient({ apiKey, baseUrl });
+    const response = await client.generateTheme(params);
+    data = response.data;
+  }
   themeCache.set(cacheKey, data);
   return (0, import_utils2.themeToCSS)(data, mode);
 }

package/dist/server.mjs

@@ -1,5 +1,6 @@
 // src/components/DhemeScript.tsx
 import React from "react";
+import Script from "next/script";
 import { DhemeClient } from "@dheme/sdk";
 import { themeToCSS, buildCacheKey, getNextBlockingScriptPayload } from "@dheme/react/utils";
 
@@ -41,29 +42,40 @@ async function DhemeScript({
   themeParams,
   defaultMode = "light",
   baseUrl,
-  nonce
+  nonce,
+  onGenerateTheme
 }) {
   const params = { theme, ...themeParams };
   const cacheKey = buildCacheKey(params);
   let themeData = themeCache.get(cacheKey);
   if (!themeData) {
-    const client = new DhemeClient({ apiKey, baseUrl });
-    const response = await client.generateTheme(params);
-    themeData = response.data;
+    if (onGenerateTheme) {
+      themeData = await onGenerateTheme(params);
+    } else {
+      const client = new DhemeClient({ apiKey, baseUrl });
+      const response = await client.generateTheme(params);
+      themeData = response.data;
+    }
     themeCache.set(cacheKey, themeData);
   }
   const lightCSS = themeToCSS(themeData, "light");
   const darkCSS = themeToCSS(themeData, "dark");
   const styleContent = `:root{${lightCSS}}.dark{${darkCSS}}`;
   const scriptContent = getNextBlockingScriptPayload(defaultMode);
+  const styleProps = {
+    nonce,
+    precedence: "high",
+    dangerouslySetInnerHTML: { __html: styleContent }
+  };
   return React.createElement(
     React.Fragment,
     null,
-    React.createElement("style", {
-      nonce,
-      dangerouslySetInnerHTML: { __html: styleContent }
-    }),
-    React.createElement("script", {
+    React.createElement("style", styleProps),
+    // strategy="beforeInteractive" causes Next.js to inject this script into
+    // the HTML before any page JS runs — prevents dark/light mode flash.
+    React.createElement(Script, {
+      id: "dheme-mode-detect",
+      strategy: "beforeInteractive",
       nonce,
       dangerouslySetInnerHTML: { __html: scriptContent }
     })
@@ -74,16 +86,21 @@ async function DhemeScript({
 import { DhemeClient as DhemeClient2 } from "@dheme/sdk";
 import { themeToCSS as themeToCSS2, buildCacheKey as buildCacheKey2 } from "@dheme/react/utils";
 async function generateThemeStyles(options) {
-  const { apiKey, theme, themeParams, mode = "light", baseUrl } = options;
+  const { apiKey, theme, themeParams, mode = "light", baseUrl, onGenerateTheme } = options;
   const params = { theme, ...themeParams };
   const cacheKey = buildCacheKey2(params);
   const cached = themeCache.get(cacheKey);
   if (cached) {
     return themeToCSS2(cached, mode);
   }
-  const client = new DhemeClient2({ apiKey, baseUrl });
-  const response = await client.generateTheme(params);
-  const data = response.data;
+  let data;
+  if (onGenerateTheme) {
+    data = await onGenerateTheme(params);
+  } else {
+    const client = new DhemeClient2({ apiKey, baseUrl });
+    const response = await client.generateTheme(params);
+    data = response.data;
+  }
   themeCache.set(cacheKey, data);
   return themeToCSS2(data, mode);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dheme/next",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Next.js App Router bindings for Dheme SDK with server-side theme generation",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@dheme/sdk": "^1.1.0",
-    "@dheme/react": "^2.5.0"
+    "@dheme/react": "^2.7.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",