@easybits.cloud/html-tailwind-generator 0.1.0

package/src/iframeScript.ts

@@ -0,0 +1,261 @@
+/**
+ * JavaScript injected into the landing v3 iframe.
+ * Handles hover highlights, click selection, contentEditable text editing,
+ * postMessage communication with the parent editor,
+ * and incremental section injection from parent.
+ */
+export function getIframeScript(): string {
+  return `
+(function() {
+  let hoveredEl = null;
+  let selectedEl = null;
+  const OUTLINE_HOVER = '2px solid #3B82F6';
+  const OUTLINE_SELECTED = '2px solid #8B5CF6';
+
+  function getSectionId(el) {
+    let node = el;
+    while (node && node !== document.body) {
+      if (node.dataset && node.dataset.sectionId) {
+        return node.dataset.sectionId;
+      }
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  function getSectionElement(sectionId) {
+    return document.querySelector('[data-section-id="' + sectionId + '"]');
+  }
+
+  function getElementPath(el) {
+    const parts = [];
+    let node = el;
+    while (node && node !== document.body) {
+      let tag = node.tagName.toLowerCase();
+      if (node.id) { tag += '#' + node.id; }
+      const siblings = node.parentElement ? Array.from(node.parentElement.children).filter(function(c) { return c.tagName === node.tagName; }) : [];
+      if (siblings.length > 1) { tag += ':nth(' + siblings.indexOf(node) + ')'; }
+      parts.unshift(tag);
+      node = node.parentElement;
+    }
+    return parts.join(' > ');
+  }
+
+  function isTextElement(el) {
+    var textTags = ['H1','H2','H3','H4','H5','H6','P','SPAN','LI','A','BLOCKQUOTE','LABEL','TD','TH','FIGCAPTION','BUTTON'];
+    return textTags.indexOf(el.tagName) !== -1;
+  }
+
+  // Hover
+  document.addEventListener('mouseover', function(e) {
+    var el = e.target;
+    if (el === document.body || el === document.documentElement) return;
+    if (el === selectedEl) return;
+    if (hoveredEl && hoveredEl !== selectedEl) {
+      hoveredEl.style.outline = '';
+      hoveredEl.style.outlineOffset = '';
+    }
+    hoveredEl = el;
+    if (el !== selectedEl) {
+      el.style.outline = OUTLINE_HOVER;
+      el.style.outlineOffset = '-2px';
+    }
+  });
+
+  document.addEventListener('mouseout', function(e) {
+    if (hoveredEl && hoveredEl !== selectedEl) {
+      hoveredEl.style.outline = '';
+      hoveredEl.style.outlineOffset = '';
+    }
+    hoveredEl = null;
+  });
+
+  // Click — select element
+  document.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var el = e.target;
+
+    // Deselect previous
+    if (selectedEl) {
+      selectedEl.style.outline = '';
+      selectedEl.style.outlineOffset = '';
+    }
+
+    if (selectedEl === el) {
+      selectedEl = null;
+      window.parent.postMessage({ type: 'element-deselected' }, '*');
+      return;
+    }
+
+    selectedEl = el;
+
+    // Clear hover styles BEFORE capturing openTag (so it matches source HTML)
+    el.style.outline = '';
+    el.style.outlineOffset = '';
+    var openTag = el.outerHTML.substring(0, el.outerHTML.indexOf('>') + 1).substring(0, 120);
+
+    el.style.outline = OUTLINE_SELECTED;
+    el.style.outlineOffset = '-2px';
+
+    var rect = el.getBoundingClientRect();
+    var attrs = {};
+    if (el.tagName === 'IMG') {
+      attrs = { src: el.getAttribute('src') || '', alt: el.getAttribute('alt') || '' };
+    }
+    if (el.tagName === 'A') {
+      attrs = { href: el.getAttribute('href') || '', target: el.getAttribute('target') || '' };
+    }
+
+    window.parent.postMessage({
+      type: 'element-selected',
+      sectionId: getSectionId(el),
+      tagName: el.tagName,
+      rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
+      text: (el.textContent || '').substring(0, 200),
+      openTag: openTag,
+      elementPath: getElementPath(el),
+      isSectionRoot: el.dataset && el.dataset.sectionId ? true : false,
+      attrs: attrs,
+    }, '*');
+  }, true);
+
+  // Double-click — contentEditable for text
+  document.addEventListener('dblclick', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var el = e.target;
+    if (!isTextElement(el)) return;
+
+    el.contentEditable = 'true';
+    el.focus();
+    el.style.outline = '2px dashed #F59E0B';
+    el.style.outlineOffset = '-2px';
+
+    function onBlur() {
+      el.contentEditable = 'false';
+      el.style.outline = '';
+      el.style.outlineOffset = '';
+      el.removeEventListener('blur', onBlur);
+      el.removeEventListener('keydown', onKeydown);
+
+      var sid = getSectionId(el);
+      var sectionEl = sid ? getSectionElement(sid) : null;
+      window.parent.postMessage({
+        type: 'text-edited',
+        sectionId: sid,
+        elementPath: getElementPath(el),
+        newText: el.innerHTML,
+        sectionHtml: sectionEl ? sectionEl.innerHTML : null,
+      }, '*');
+
+      selectedEl = null;
+    }
+
+    function onKeydown(ev) {
+      if (ev.key === 'Escape') {
+        el.blur();
+      }
+    }
+
+    el.addEventListener('blur', onBlur);
+    el.addEventListener('keydown', onKeydown);
+  }, true);
+
+  // Listen for messages FROM parent (incremental section injection)
+  window.addEventListener('message', function(e) {
+    var msg = e.data;
+    if (!msg || !msg.action) return;
+
+    if (msg.action === 'add-section') {
+      var wrapper = document.createElement('div');
+      wrapper.setAttribute('data-section-id', msg.id);
+      wrapper.innerHTML = msg.html;
+      wrapper.style.animation = 'fadeInUp 0.4s ease-out';
+      document.body.appendChild(wrapper);
+      wrapper.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+
+    if (msg.action === 'update-section') {
+      var el = getSectionElement(msg.id);
+      if (el) { el.innerHTML = msg.html; }
+    }
+
+    if (msg.action === 'remove-section') {
+      var el = getSectionElement(msg.id);
+      if (el) { el.remove(); }
+    }
+
+    if (msg.action === 'reorder-sections') {
+      // msg.order = [id1, id2, id3, ...]
+      var order = msg.order;
+      for (var i = 0; i < order.length; i++) {
+        var el = getSectionElement(order[i]);
+        if (el) { document.body.appendChild(el); }
+      }
+    }
+
+    if (msg.action === 'update-attribute') {
+      var sectionEl = getSectionElement(msg.sectionId);
+      if (sectionEl) {
+        var target = null;
+        if (msg.elementPath) {
+          // Find element by matching path
+          var allEls = sectionEl.querySelectorAll(msg.tagName || '*');
+          for (var i = 0; i < allEls.length; i++) {
+            if (getElementPath(allEls[i]) === msg.elementPath) {
+              target = allEls[i];
+              break;
+            }
+          }
+        }
+        if (target) {
+          target.setAttribute(msg.attr, msg.value);
+          window.parent.postMessage({
+            type: 'section-html-updated',
+            sectionId: msg.sectionId,
+            sectionHtml: sectionEl.innerHTML,
+          }, '*');
+        }
+      }
+    }
+
+    if (msg.action === 'set-theme') {
+      if (msg.theme && msg.theme !== 'default') {
+        document.documentElement.setAttribute('data-theme', msg.theme);
+      } else {
+        document.documentElement.removeAttribute('data-theme');
+      }
+    }
+
+    if (msg.action === 'set-custom-css') {
+      var customStyle = document.getElementById('custom-theme-css');
+      if (!customStyle) {
+        customStyle = document.createElement('style');
+        customStyle.id = 'custom-theme-css';
+        document.head.appendChild(customStyle);
+      }
+      customStyle.textContent = msg.css || '';
+    }
+
+    if (msg.action === 'scroll-to-section') {
+      var el = getSectionElement(msg.id);
+      if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
+    }
+
+    if (msg.action === 'full-rewrite') {
+      // Fallback: rewrite everything
+      document.body.innerHTML = msg.html;
+    }
+  });
+
+  // Inject animation keyframe
+  var style = document.createElement('style');
+  style.textContent = '@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }';
+  document.head.appendChild(style);
+
+  // Notify parent we're ready
+  window.parent.postMessage({ type: 'ready' }, '*');
+})();
+`;
+}

package/src/images/enrichImages.ts

@@ -0,0 +1,127 @@
+import { searchImage } from "./pexels";
+
+interface ImageMatch {
+  query: string;
+  searchStr: string;
+  replaceStr: string;
+}
+
+const FAKE_DOMAINS = [
+  "images.unsplash.com",
+  "unsplash.com",
+  "via.placeholder.com",
+  "placeholder.com",
+  "placehold.co",
+  "placehold.it",
+  "placekitten.com",
+  "picsum.photos",
+  "loremflickr.com",
+  "source.unsplash.com",
+  "dummyimage.com",
+  "fakeimg.pl",
+  "example.com",
+  "img.freepik.com",
+  "cdn.pixabay.com",
+];
+
+/**
+ * Find all images in HTML that need Pexels enrichment.
+ * Two strategies:
+ * 1. data-image-query="..." — AI followed instructions
+ * 2. <img src="fake-url" — detect fake domains, use alt/class/nearby text as query
+ */
+export function findImageSlots(html: string): ImageMatch[] {
+  const matches: ImageMatch[] = [];
+  const seen = new Set<string>();
+
+  // 1. data-image-query="..."
+  const diqRegex = /data-image-query="([^"]+)"/g;
+  let m: RegExpExecArray | null;
+  while ((m = diqRegex.exec(html)) !== null) {
+    const query = m[1];
+    if (seen.has(query)) continue;
+    seen.add(query);
+    matches.push({
+      query,
+      searchStr: `data-image-query="${query}"`,
+      replaceStr: `src="{url}" data-enriched="true"`,
+    });
+  }
+
+  // 2. <img with fake/non-existent src URLs
+  const imgRegex = /<img\s[^>]*src="(https?:\/\/[^"]+)"[^>]*>/gi;
+  while ((m = imgRegex.exec(html)) !== null) {
+    const fullTag = m[0];
+    const srcUrl = m[1];
+
+    if (fullTag.includes("data-enriched")) continue;
+    if (srcUrl.includes("pexels.com")) continue;
+    if (seen.has(srcUrl)) continue;
+
+    // Check if domain is fake
+    let isFake = false;
+    try {
+      const domain = new URL(srcUrl).hostname;
+      isFake = FAKE_DOMAINS.some((d) => domain.includes(d));
+    } catch {
+      isFake = true;
+    }
+    if (!isFake) continue;
+
+    // Extract query: try alt, then class context, then URL path words
+    const altMatch = fullTag.match(/alt="([^"]*?)"/);
+    let query = altMatch?.[1]?.trim() || "";
+
+    if (!query) {
+      // Try to extract meaningful words from the URL path
+      try {
+        const path = new URL(srcUrl).pathname;
+        const words = path
+          .replace(/[^a-zA-Z]/g, " ")
+          .split(/\s+/)
+          .filter((w) => w.length > 2)
+          .slice(0, 4)
+          .join(" ");
+        if (words.length > 3) query = words;
+      } catch { /* ignore */ }
+    }
+
+    if (!query) query = "professional website hero image";
+
+    seen.add(srcUrl);
+    matches.push({
+      query,
+      searchStr: `src="${srcUrl}"`,
+      replaceStr: `src="{url}" data-enriched="true"`,
+    });
+  }
+
+  return matches;
+}
+
+/**
+ * Enrich all images in an HTML string with Pexels photos.
+ */
+export async function enrichImages(html: string, pexelsApiKey?: string): Promise<string> {
+  const slots = findImageSlots(html);
+  if (slots.length === 0) return html;
+
+  let result = html;
+  const promises = slots.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))}`;
+    const replacement = slot.replaceStr.replace("{url}", url);
+    result = result.replaceAll(slot.searchStr, replacement);
+  });
+
+  await Promise.allSettled(promises);
+
+  // Catch any remaining <img> tags without src (AI didn't follow instructions)
+  result = result.replace(/<img\s(?![^>]*\bsrc=)([^>]*?)>/gi, (_match, attrs) => {
+    const altMatch = attrs.match(/alt="([^"]*?)"/);
+    const query = altMatch?.[1] || "professional image";
+    return `<img src="https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}" ${attrs}>`;
+  });
+
+  return result;
+}

package/src/images/index.ts

@@ -0,0 +1,2 @@
+export { searchImage, type PexelsResult } from "./pexels";
+export { enrichImages, findImageSlots } from "./enrichImages";

package/src/images/pexels.ts

@@ -0,0 +1,27 @@
+export interface PexelsResult {
+  url: string;
+  photographer: string;
+  alt: string;
+}
+
+export async function searchImage(query: string, apiKey?: string): Promise<PexelsResult | null> {
+  const key = apiKey || process.env.PEXELS_API_KEY;
+  if (!key) return null;
+  try {
+    const res = await fetch(
+      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=1&orientation=landscape`,
+      { headers: { Authorization: key } }
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    const photo = data.photos?.[0];
+    if (!photo) return null;
+    return {
+      url: photo.src.large,
+      photographer: photo.photographer,
+      alt: photo.alt || query,
+    };
+  } catch {
+    return null;
+  }
+}

package/src/index.ts

@@ -0,0 +1,57 @@
+// Types
+export type { Section3, IframeMessage } from "./types";
+export type { LandingTheme, CustomColors } from "./themes";
+
+// Themes
+export {
+  LANDING_THEMES,
+  buildCustomTheme,
+  buildCustomThemeCss,
+  buildThemeCss,
+  buildSingleThemeCss,
+} from "./themes";
+
+// HTML builders
+export { buildPreviewHtml, buildDeployHtml } from "./buildHtml";
+export { getIframeScript } from "./iframeScript";
+
+// Generation
+export {
+  generateLanding,
+  extractJsonObjects,
+  SYSTEM_PROMPT,
+  PROMPT_SUFFIX,
+  type GenerateOptions,
+} from "./generate";
+
+// Refinement
+export {
+  refineLanding,
+  REFINE_SYSTEM,
+  type RefineOptions,
+} from "./refine";
+
+// Deploy
+export {
+  deployToS3,
+  deployToEasyBits,
+  type DeployToS3Options,
+  type DeployToEasyBitsOptions,
+} from "./deploy";
+
+// Images
+export {
+  searchImage,
+  enrichImages,
+  findImageSlots,
+  type PexelsResult,
+} from "./images/index";
+
+// Components (re-exported for convenience)
+export {
+  Canvas,
+  type CanvasHandle,
+  SectionList,
+  FloatingToolbar,
+  CodeEditor,
+} from "./components/index";

package/src/refine.ts

@@ -0,0 +1,115 @@
+import { streamText } from "ai";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { enrichImages } from "./images/enrichImages";
+
+export const REFINE_SYSTEM = `You are an expert HTML/Tailwind CSS developer. You receive the current HTML of a landing page section and a user instruction.
+
+RULES:
+- Return ONLY the modified HTML — no full page, no <html>/<head>/<body> tags
+- Use Tailwind CSS classes (CDN loaded)
+- You may use inline styles for specific adjustments
+- Images: use data-image-query="english search query" for new images
+- Keep all text in its original language unless asked to translate
+- Be creative — don't just make minimal changes, improve the design
+- Return raw HTML only — no markdown fences, no explanations
+
+COLOR SYSTEM — CRITICAL:
+- 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 colors: NO bg-gray-*, bg-black, bg-white, text-gray-*, text-black, text-white, etc.
+- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.
+- CONTRAST RULE: on bg-primary/bg-primary-dark → text-on-primary. On bg-surface/bg-surface-alt → text-on-surface/text-on-surface-muted. Never mismatch.
+
+TAILWIND v3 NOTES:
+- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)
+- Borders: border + border-gray-200 for visible borders`;
+
+export interface RefineOptions {
+  /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */
+  anthropicApiKey?: string;
+  /** Current HTML of the section being refined */
+  currentHtml: string;
+  /** User instruction for refinement */
+  instruction: string;
+  /** Reference image (base64 data URI) for vision-based refinement */
+  referenceImage?: string;
+  /** Custom system prompt (overrides default REFINE_SYSTEM) */
+  systemPrompt?: string;
+  /** Model ID (default: claude-haiku-4-5-20251001, claude-sonnet-4-6 when referenceImage is provided) */
+  model?: string;
+  /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */
+  pexelsApiKey?: string;
+  /** Called with accumulated HTML as it streams */
+  onChunk?: (html: string) => void;
+  /** Called when refinement is complete with final enriched HTML */
+  onDone?: (html: string) => void;
+  /** Called on error */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Refine a landing page section with streaming AI.
+ * Returns the final enriched HTML.
+ */
+export async function refineLanding(options: RefineOptions): Promise<string> {
+  const {
+    anthropicApiKey,
+    currentHtml,
+    instruction,
+    referenceImage,
+    systemPrompt = REFINE_SYSTEM,
+    model: modelId,
+    pexelsApiKey,
+    onChunk,
+    onDone,
+    onError,
+  } = options;
+
+  const anthropic = anthropicApiKey
+    ? createAnthropic({ apiKey: anthropicApiKey })
+    : createAnthropic();
+
+  // Use Haiku for speed, Sonnet for vision
+  const defaultModel = referenceImage ? "claude-sonnet-4-6" : "claude-haiku-4-5-20251001";
+  const model = anthropic(modelId || defaultModel);
+
+  // Build content (supports multimodal with reference image)
+  const content: any[] = [];
+  if (referenceImage) {
+    content.push({ type: "image", image: referenceImage });
+  }
+  content.push({
+    type: "text",
+    text: `Current HTML:\n${currentHtml}\n\nInstruction: ${instruction}\n\nReturn the updated HTML.`,
+  });
+
+  const result = streamText({
+    model,
+    system: systemPrompt,
+    messages: [{ role: "user", content }],
+  });
+
+  try {
+    let accumulated = "";
+
+    for await (const chunk of result.textStream) {
+      accumulated += chunk;
+      onChunk?.(accumulated);
+    }
+
+    // Clean up markdown fences if present
+    let html = accumulated.trim();
+    if (html.startsWith("```")) {
+      html = html.replace(/^```(?:html|xml)?\s*/, "").replace(/\s*```$/, "");
+    }
+
+    // Enrich images
+    html = await enrichImages(html, pexelsApiKey);
+
+    onDone?.(html);
+    return html;
+  } catch (err: any) {
+    const error = err instanceof Error ? err : new Error(err?.message || "Refine failed");
+    onError?.(error);
+    throw error;
+  }
+}