@easybits.cloud/html-tailwind-generator 0.1.0

package/src/components/SectionList.tsx

@@ -0,0 +1,217 @@
+import { useRef, useState } from "react";
+import type { Section3 } from "../types";
+import { LANDING_THEMES, type CustomColors } from "../themes";
+
+interface SectionListProps {
+  sections: Section3[];
+  selectedSectionId: string | null;
+  theme: string;
+  customColors?: CustomColors;
+  onThemeChange: (themeId: string) => void;
+  onCustomColorChange?: (colors: Partial<CustomColors>) => void;
+  onSelect: (id: string) => void;
+  onOpenCode: (id: string) => void;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, label: string) => void;
+  onAdd: () => void;
+}
+
+export function SectionList({
+  sections,
+  selectedSectionId,
+  theme,
+  customColors,
+  onThemeChange,
+  onCustomColorChange,
+  onSelect,
+  onOpenCode,
+  onReorder,
+  onDelete,
+  onRename,
+  onAdd,
+}: SectionListProps) {
+  const sorted = [...sections].sort((a, b) => a.order - b.order);
+  const colorInputRef = useRef<HTMLInputElement>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingLabel, setEditingLabel] = useState("");
+
+  return (
+    <div className="w-56 shrink-0 flex flex-col bg-white border-r-2 border-gray-200 overflow-y-auto">
+      <div className="p-3 border-b border-gray-200">
+        <h3 className="text-xs font-black uppercase tracking-wider text-gray-500 mb-2">
+          Tema
+        </h3>
+        <div className="flex gap-1.5 flex-wrap">
+          {LANDING_THEMES.map((t) => (
+            <button
+              key={t.id}
+              onClick={() => onThemeChange(t.id)}
+              title={t.label}
+              className={`w-6 h-6 rounded-full border-2 transition-all ${
+                theme === t.id
+                  ? "border-black scale-110 shadow-sm"
+                  : "border-gray-300 hover:border-gray-400"
+              }`}
+              style={{ backgroundColor: t.colors.primary }}
+            />
+          ))}
+          {/* Custom color picker */}
+          <button
+            onClick={() => colorInputRef.current?.click()}
+            title="Color personalizado"
+            className={`w-6 h-6 rounded-full border-2 transition-all relative overflow-hidden ${
+              theme === "custom"
+                ? "border-black scale-110 shadow-sm"
+                : "border-gray-300 hover:border-gray-400"
+            }`}
+            style={theme === "custom" && customColors?.primary ? { backgroundColor: customColors.primary } : undefined}
+          >
+            {theme !== "custom" && (
+              <span className="absolute inset-0 rounded-full"
+                style={{ background: "conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444)" }}
+              />
+            )}
+          </button>
+          <input
+            ref={colorInputRef}
+            type="color"
+            value={customColors?.primary || "#6366f1"}
+            onChange={(e) => onCustomColorChange?.({ primary: e.target.value })}
+            className="sr-only"
+          />
+        </div>
+        {/* Multi-color pickers when custom theme is active */}
+        {theme === "custom" && (
+          <div className="flex items-center gap-2 mt-2">
+            {([
+              { key: "primary" as const, label: "Pri", fallback: "#6366f1" },
+              { key: "secondary" as const, label: "Sec", fallback: "#f59e0b" },
+              { key: "accent" as const, label: "Acc", fallback: "#06b6d4" },
+              { key: "surface" as const, label: "Sur", fallback: "#ffffff" },
+            ]).map((c) => (
+              <label key={c.key} className="flex flex-col items-center gap-0.5 cursor-pointer">
+                <input
+                  type="color"
+                  value={customColors?.[c.key] || c.fallback}
+                  onChange={(e) => onCustomColorChange?.({ [c.key]: e.target.value })}
+                  className="w-5 h-5 rounded border border-gray-300 cursor-pointer p-0 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded"
+                />
+                <span className="text-[9px] font-bold text-gray-400 uppercase">{c.label}</span>
+              </label>
+            ))}
+          </div>
+        )}
+      </div>
+      <div className="p-3 border-b border-gray-200">
+        <h3 className="text-xs font-black uppercase tracking-wider text-gray-500">
+          Secciones
+        </h3>
+      </div>
+
+      <div className="flex-1 overflow-y-auto py-1">
+        {sorted.map((section, i) => (
+          <div
+            key={section.id}
+            onClick={() => onSelect(section.id)}
+            className={`group flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors ${
+              selectedSectionId === section.id
+                ? "bg-blue-50 border-l-2 border-blue-500"
+                : "hover:bg-gray-50 border-l-2 border-transparent"
+            }`}
+          >
+            <span className="text-[10px] font-mono text-gray-400 w-4 text-right">
+              {i + 1}
+            </span>
+            {editingId === section.id ? (
+              <input
+                type="text"
+                value={editingLabel}
+                onChange={(e) => setEditingLabel(e.target.value)}
+                onBlur={() => {
+                  if (editingLabel.trim()) onRename(section.id, editingLabel.trim());
+                  setEditingId(null);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    if (editingLabel.trim()) onRename(section.id, editingLabel.trim());
+                    setEditingId(null);
+                  } else if (e.key === "Escape") {
+                    setEditingId(null);
+                  }
+                }}
+                className="text-sm font-bold flex-1 min-w-0 bg-transparent border-b border-blue-500 outline-none px-0 py-0"
+                autoFocus
+                onClick={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <span
+                className="text-sm font-bold truncate flex-1"
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  setEditingId(section.id);
+                  setEditingLabel(section.label);
+                }}
+              >
+                {section.label}
+              </span>
+            )}
+            <div className="opacity-0 group-hover:opacity-100 flex gap-0.5">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onOpenCode(section.id);
+                }}
+                className="w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200"
+                title="Editar HTML"
+              >
+                <svg className="w-3 h-3" viewBox="0 0 16 16" fill="currentColor"><path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/></svg>
+              </button>
+              {i > 0 && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onReorder(i, i - 1);
+                  }}
+                  className="w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 text-[10px]"
+                >
+                  ↑
+                </button>
+              )}
+              {i < sorted.length - 1 && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onReorder(i, i + 1);
+                  }}
+                  className="w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 text-[10px]"
+                >
+                  ↓
+                </button>
+              )}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete(section.id);
+                }}
+                className="w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-red-600 hover:bg-red-50 text-[10px]"
+                title="Eliminar seccion"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="p-3 border-t border-gray-200">
+        <button
+          onClick={onAdd}
+          className="w-full text-center py-2 text-sm font-bold text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+        >
+          + Agregar seccion
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { Canvas, type CanvasHandle } from "./Canvas";
+export { SectionList } from "./SectionList";
+export { FloatingToolbar } from "./FloatingToolbar";
+export { CodeEditor } from "./CodeEditor";

package/src/deploy.ts

@@ -0,0 +1,73 @@
+import { buildDeployHtml } from "./buildHtml";
+import type { Section3 } from "./types";
+import type { CustomColors } from "./themes";
+
+export interface DeployToS3Options {
+  /** The sections to deploy */
+  sections: Section3[];
+  /** Theme ID */
+  theme?: string;
+  /** Custom colors (when theme is "custom") */
+  customColors?: CustomColors;
+  /** S3-compatible upload function. Receives the HTML string, returns the URL */
+  upload: (html: string) => Promise<string>;
+}
+
+/**
+ * Deploy a landing page to any S3-compatible storage.
+ * The consumer provides their own upload function.
+ */
+export async function deployToS3(options: DeployToS3Options): Promise<string> {
+  const { sections, theme, customColors, upload } = options;
+  const html = buildDeployHtml(sections, theme, customColors);
+  return upload(html);
+}
+
+export interface DeployToEasyBitsOptions {
+  /** EasyBits API key */
+  apiKey: string;
+  /** Website slug (e.g. "my-landing" → my-landing.easybits.cloud) */
+  slug: string;
+  /** The sections to deploy */
+  sections: Section3[];
+  /** Theme ID */
+  theme?: string;
+  /** Custom colors (when theme is "custom") */
+  customColors?: CustomColors;
+  /** EasyBits API base URL (default: https://easybits.cloud) */
+  baseUrl?: string;
+}
+
+/**
+ * Deploy a landing page to EasyBits hosting (slug.easybits.cloud).
+ * Uses the EasyBits API to create/update a website.
+ */
+export async function deployToEasyBits(options: DeployToEasyBitsOptions): Promise<string> {
+  const {
+    apiKey,
+    slug,
+    sections,
+    theme,
+    customColors,
+    baseUrl = "https://easybits.cloud",
+  } = options;
+
+  const html = buildDeployHtml(sections, theme, customColors);
+
+  const res = await fetch(`${baseUrl}/api/v2/websites`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify({ slug, html }),
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ error: "Deploy failed" }));
+    throw new Error(error.error || "Deploy failed");
+  }
+
+  const data = await res.json();
+  return data.url || `https://${slug}.easybits.cloud`;
+}

package/src/generate.ts

@@ -0,0 +1,274 @@
+import { streamText } from "ai";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { nanoid } from "nanoid";
+import { findImageSlots } from "./images/enrichImages";
+import { searchImage } from "./images/pexels";
+import type { Section3 } from "./types";
+
+export const SYSTEM_PROMPT = `You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.
+
+RULES:
+- Each section is a complete <section> tag with Tailwind CSS classes
+- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)
+- NO JavaScript, only HTML+Tailwind
+- Each section must be independent and self-contained
+- Responsive: mobile-first with sm/md/lg/xl breakpoints
+- All text content in Spanish unless the prompt specifies otherwise
+- Use real-looking content (not Lorem ipsum) — make it specific to the prompt
+
+IMAGES — CRITICAL:
+- Use <img data-image-query="english search query" alt="description" class="..."/>
+- NEVER include a src attribute — the system auto-replaces data-image-query with a real image URL
+- For avatar-like elements, use colored divs with initials instead of img tags (e.g. <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold">JD</div>)
+
+COLOR SYSTEM — CRITICAL (READ CAREFULLY):
+- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted, bg-secondary, text-secondary, bg-accent, text-accent
+- NEVER use hardcoded Tailwind color classes: NO bg-gray-*, bg-black, bg-white, bg-indigo-*, bg-blue-*, bg-purple-*, text-gray-*, text-black, text-white, etc.
+- 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.
+- For gradients: from-primary to-primary-dark, from-surface to-surface-alt
+- For hover: hover:bg-primary-dark, hover:bg-primary-light
+
+DESIGN PHILOSOPHY — what separates good from GREAT:
+- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.
+- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.
+- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)
+- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows
+- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.
+- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges
+- Each section should have a COMPLETELY DIFFERENT layout from the others
+
+HERO SECTION — your masterpiece:
+- Bento-grid or asymmetric layout, NOT a generic centered hero
+- Large headline block + smaller stat/metric cards in a grid
+- Real social proof: "2,847+ users", avatar stack (colored divs with initials), star ratings
+- Bold oversized headline (text-6xl/7xl font-black leading-none)
+- Tag/label above headline (uppercase, tracking-wider, text-xs)
+- 2 CTAs: primary (large, with → arrow) + secondary (ghost/outlined)
+- Real image via data-image-query
+- Min height: min-h-[90vh] with generous padding
+
+TAILWIND v3 NOTES:
+- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)
+- Borders: border + border-gray-200 for visible borders`;
+
+export const PROMPT_SUFFIX = `
+
+OUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.
+Each line: {"label": "Short Label", "html": "<section>...</section>"}
+
+Generate 7-9 sections. Always start with Hero and end with Footer.
+IMPORTANT: Make each section VISUALLY UNIQUE — different layouts, different background colors, different grid structures.
+Think like a premium design agency creating a $50K landing page.
+NO generic Bootstrap layouts. Use creative grids, bento layouts, overlapping elements, asymmetric columns.`;
+
+/**
+ * Extract complete JSON objects from accumulated text using brace-depth tracking.
+ */
+export function extractJsonObjects(text: string): [any[], string] {
+  const objects: any[] = [];
+  let remaining = text;
+
+  while (remaining.length > 0) {
+    remaining = remaining.trimStart();
+    if (!remaining.startsWith("{")) {
+      const nextBrace = remaining.indexOf("{");
+      if (nextBrace === -1) break;
+      remaining = remaining.slice(nextBrace);
+      continue;
+    }
+
+    let depth = 0;
+    let inString = false;
+    let escape = false;
+    let end = -1;
+
+    for (let i = 0; i < remaining.length; i++) {
+      const ch = remaining[i];
+      if (escape) { escape = false; continue; }
+      if (ch === "\\") { escape = true; continue; }
+      if (ch === '"') { inString = !inString; continue; }
+      if (inString) continue;
+      if (ch === "{") depth++;
+      if (ch === "}") { depth--; if (depth === 0) { end = i; break; } }
+    }
+
+    if (end === -1) break;
+
+    const candidate = remaining.slice(0, end + 1);
+    remaining = remaining.slice(end + 1);
+
+    try {
+      objects.push(JSON.parse(candidate));
+    } catch {
+      // malformed, skip
+    }
+  }
+
+  return [objects, remaining];
+}
+
+export interface GenerateOptions {
+  /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */
+  anthropicApiKey?: string;
+  /** Landing page description prompt */
+  prompt: string;
+  /** Reference image (base64 data URI) for vision-based generation */
+  referenceImage?: string;
+  /** Extra instructions appended to the prompt */
+  extraInstructions?: string;
+  /** Custom system prompt (overrides default SYSTEM_PROMPT) */
+  systemPrompt?: string;
+  /** Model ID (default: claude-sonnet-4-6) */
+  model?: string;
+  /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */
+  pexelsApiKey?: string;
+  /** Called when a new section is parsed from the stream */
+  onSection?: (section: Section3) => void;
+  /** Called when a section's images are enriched */
+  onImageUpdate?: (sectionId: string, html: string) => void;
+  /** Called when generation is complete */
+  onDone?: (sections: Section3[]) => void;
+  /** Called on error */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Generate a landing page with streaming AI + image enrichment.
+ * Returns all generated sections when complete.
+ */
+export async function generateLanding(options: GenerateOptions): Promise<Section3[]> {
+  const {
+    anthropicApiKey,
+    prompt,
+    referenceImage,
+    extraInstructions,
+    systemPrompt = SYSTEM_PROMPT,
+    model: modelId = "claude-sonnet-4-6",
+    pexelsApiKey,
+    onSection,
+    onImageUpdate,
+    onDone,
+    onError,
+  } = options;
+
+  const anthropic = anthropicApiKey
+    ? createAnthropic({ apiKey: anthropicApiKey })
+    : createAnthropic();
+
+  const model = anthropic(modelId);
+
+  // Build prompt content (supports multimodal with reference image)
+  const extra = extraInstructions ? `\nAdditional instructions: ${extraInstructions}` : "";
+  const content: any[] = [];
+  if (referenceImage) {
+    content.push({ type: "image", image: referenceImage });
+    content.push({
+      type: "text",
+      text: `Generate a landing page inspired by this reference image for: ${prompt}${extra}${PROMPT_SUFFIX}`,
+    });
+  } else {
+    content.push({
+      type: "text",
+      text: `Generate a landing page for: ${prompt}${extra}${PROMPT_SUFFIX}`,
+    });
+  }
+
+  const result = streamText({
+    model,
+    system: systemPrompt,
+    messages: [{ role: "user", content }],
+  });
+
+  const allSections: Section3[] = [];
+  const imagePromises: Promise<void>[] = [];
+  let sectionOrder = 0;
+  let buffer = "";
+
+  try {
+    for await (const chunk of result.textStream) {
+      buffer += chunk;
+
+      const [objects, remaining] = extractJsonObjects(buffer);
+      buffer = remaining;
+
+      for (const obj of objects) {
+        if (!obj.html || !obj.label) continue;
+
+        const section: Section3 = {
+          id: nanoid(8),
+          order: sectionOrder++,
+          html: obj.html,
+          label: obj.label,
+        };
+
+        allSections.push(section);
+        onSection?.(section);
+
+        // Enrich images with Pexels (non-blocking per section)
+        const slots = findImageSlots(section.html);
+        if (slots.length > 0) {
+          const sectionRef = section;
+          const slotsSnapshot = slots.map((s) => ({ ...s }));
+          imagePromises.push(
+            (async () => {
+              const results = await Promise.allSettled(
+                slotsSnapshot.map(async (slot) => {
+                  const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);
+                  const url = img?.url || `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;
+                  return { slot, url };
+                })
+              );
+              let html = sectionRef.html;
+              for (const r of results) {
+                if (r.status === "fulfilled" && r.value) {
+                  const { slot, url } = r.value;
+                  const replacement = slot.replaceStr.replace("{url}", url);
+                  html = html.replaceAll(slot.searchStr, replacement);
+                }
+              }
+              if (html !== sectionRef.html) {
+                sectionRef.html = html;
+                onImageUpdate?.(sectionRef.id, html);
+              }
+            })()
+          );
+        }
+      }
+    }
+
+    // Parse remaining buffer
+    if (buffer.trim()) {
+      let cleaned = buffer.trim();
+      if (cleaned.startsWith("```")) {
+        cleaned = cleaned
+          .replace(/^```(?:json)?\s*/, "")
+          .replace(/\s*```$/, "");
+      }
+      const [lastObjects] = extractJsonObjects(cleaned);
+      for (const obj of lastObjects) {
+        if (!obj.html || !obj.label) continue;
+        const section: Section3 = {
+          id: nanoid(8),
+          order: sectionOrder++,
+          html: obj.html,
+          label: obj.label,
+        };
+        allSections.push(section);
+        onSection?.(section);
+      }
+    }
+
+    // Wait for image enrichment
+    await Promise.allSettled(imagePromises);
+
+    onDone?.(allSections);
+    return allSections;
+  } catch (err: any) {
+    const error = err instanceof Error ? err : new Error(err?.message || "Generation failed");
+    onError?.(error);
+    throw error;
+  }
+}