@easybits.cloud/html-tailwind-generator 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "AI-powered landing page generator with Tailwind CSS — canvas editor, streaming generation, and one-click deploy",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",

package/src/components/Canvas.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from "react";
 import type { Section3, IframeMessage } from "../types";
 import { buildPreviewHtml } from "../buildHtml";
 

package/src/components/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import React, { useEffect, useRef, useCallback, useState } from "react";
 import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, Decoration, type DecorationSet } from "@codemirror/view";
 import { EditorState, StateField, StateEffect } from "@codemirror/state";
 import { html } from "@codemirror/lang-html";

package/src/components/FloatingToolbar.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { HiSparkles } from "react-icons/hi2";
 import type { IframeMessage } from "../types";
 

package/src/components/SectionList.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import type { Section3 } from "../types";
 import { LANDING_THEMES, type CustomColors } from "../themes";
 

package/src/generate.ts

@@ -6,10 +6,10 @@ import { searchImage } from "./images/pexels";
 import { generateImage } from "./images/dalleImages";
 import type { Section3 } from "./types";
 
-function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
+async function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
   const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
   if (openaiKey) {
-    const { createOpenAI } = require("@ai-sdk/openai");
+    const { createOpenAI } = await import("@ai-sdk/openai");
     const openai = createOpenAI({ apiKey: openaiKey });
     return openai(opts.modelId || opts.defaultOpenai);
   }
@@ -172,7 +172,7 @@ export async function generateLanding(options: GenerateOptions): Promise<Section
   } = options;
 
   const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;
-  const model = resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai: "gpt-4o", defaultAnthropic: "claude-sonnet-4-6" });
+  const model = await resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai: "gpt-4o", defaultAnthropic: "claude-sonnet-4-6" });
 
   // Build prompt content (supports multimodal with reference image)
   const extra = extraInstructions ? `\nAdditional instructions: ${extraInstructions}` : "";

package/src/refine.ts

@@ -2,10 +2,10 @@ import { streamText } from "ai";
 import { createAnthropic } from "@ai-sdk/anthropic";
 import { enrichImages } from "./images/enrichImages";
 
-function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
+async function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {
   const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
   if (openaiKey) {
-    const { createOpenAI } = require("@ai-sdk/openai");
+    const { createOpenAI } = await import("@ai-sdk/openai");
     const openai = createOpenAI({ apiKey: openaiKey });
     return openai(opts.modelId || opts.defaultOpenai);
   }
@@ -83,7 +83,7 @@ export async function refineLanding(options: RefineOptions): Promise<string> {
   const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;
   const defaultOpenai = referenceImage ? "gpt-4o" : "gpt-4o-mini";
   const defaultAnthropic = referenceImage ? "claude-sonnet-4-6" : "claude-haiku-4-5-20251001";
-  const model = resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai, defaultAnthropic });
+  const model = await resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai, defaultAnthropic });
 
   // Build content (supports multimodal with reference image)
   const content: any[] = [];