@easybits.cloud/html-tailwind-generator 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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

@@ -41,7 +41,7 @@ COLOR SYSTEM — CRITICAL (READ CAREFULLY):
 - The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.
 - ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt
 - ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-primary, text-accent
-- CONTRAST RULE: on bg-primary or bg-primary-dark → use text-on-primary. On bg-surface or bg-surface-alt → use text-on-surface or text-on-surface-muted. NEVER put text-on-surface on bg-primary or vice versa.
+- CONTRAST RULE: on bg-primary or bg-primary-dark → use text-on-primary. On bg-surface or bg-surface-alt → use text-on-surface or text-on-surface-muted. NEVER put text-on-surface on bg-primary or vice versa. text-accent is decorative — use sparingly on bg-surface/bg-surface-alt only.
 - For gradients: from-primary to-primary-dark, from-surface to-surface-alt
 - For hover: hover:bg-primary-dark, hover:bg-primary-light
 

package/src/themes.ts

@@ -40,7 +40,7 @@ export const LANDING_THEMES: LandingTheme[] = [
       "primary-light": "#f4f4f5",
       "primary-dark": "#a1a1aa",
       secondary: "#71717a",
-      accent: "#e4e4e7",
+      accent: "#a78bfa",
       surface: "#09090b",
       "surface-alt": "#18181b",
       "on-surface": "#fafafa",