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

package/package.json

@@ -1,74 +1,77 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "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",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./components": "./src/components/index.ts",
-    "./images": "./src/images/index.ts",
-    "./generate": "./src/generate.ts",
-    "./refine": "./src/refine.ts",
-    "./deploy": "./src/deploy.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js"
+    },
+    "./images": {
+      "types": "./dist/images.d.ts",
+      "import": "./dist/images.js"
+    },
+    "./generate": {
+      "types": "./dist/generate.d.ts",
+      "import": "./dist/generate.js"
+    },
+    "./refine": {
+      "types": "./dist/refine.d.ts",
+      "import": "./dist/refine.js"
+    },
+    "./deploy": {
+      "types": "./dist/deploy.d.ts",
+      "import": "./dist/deploy.js"
+    }
   },
   "files": [
-    "src"
+    "dist"
   ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "tsup"
+  },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "ai": ">=4",
     "@ai-sdk/anthropic": ">=3",
     "@ai-sdk/openai": ">=1",
+    "@codemirror/autocomplete": ">=6",
+    "@codemirror/commands": ">=6",
     "@codemirror/lang-html": ">=6",
+    "@codemirror/language": ">=6",
+    "@codemirror/search": ">=6",
     "@codemirror/state": ">=6",
     "@codemirror/theme-one-dark": ">=6",
     "@codemirror/view": ">=6",
-    "@codemirror/commands": ">=6",
-    "@codemirror/search": ">=6",
-    "@codemirror/language": ">=6",
-    "@codemirror/autocomplete": ">=6",
+    "ai": ">=4",
+    "react": ">=18",
+    "react-dom": ">=18",
     "react-icons": ">=5"
   },
   "peerDependenciesMeta": {
-    "@codemirror/lang-html": {
-      "optional": true
-    },
-    "@codemirror/state": {
-      "optional": true
-    },
-    "@codemirror/theme-one-dark": {
-      "optional": true
-    },
-    "@codemirror/view": {
-      "optional": true
-    },
-    "@codemirror/commands": {
-      "optional": true
-    },
-    "@codemirror/search": {
-      "optional": true
-    },
-    "@codemirror/language": {
-      "optional": true
-    },
-    "@codemirror/autocomplete": {
-      "optional": true
-    },
-    "react-icons": {
-      "optional": true
-    },
-    "@ai-sdk/openai": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
+    "@codemirror/lang-html": { "optional": true },
+    "@codemirror/state": { "optional": true },
+    "@codemirror/theme-one-dark": { "optional": true },
+    "@codemirror/view": { "optional": true },
+    "@codemirror/commands": { "optional": true },
+    "@codemirror/search": { "optional": true },
+    "@codemirror/language": { "optional": true },
+    "@codemirror/autocomplete": { "optional": true },
+    "react-icons": { "optional": true },
+    "@ai-sdk/openai": { "optional": true },
+    "react-dom": { "optional": true }
   },
   "dependencies": {
     "nanoid": "^5.1.5"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
   }
 }

package/src/buildHtml.ts

@@ -1,78 +0,0 @@
-import type { Section3 } from "./types";
-import { getIframeScript } from "./iframeScript";
-import { buildThemeCss, buildSingleThemeCss, buildCustomTheme, type CustomColors } from "./themes";
-
-/**
- * Build the full HTML for the iframe preview (with editing script).
- */
-export function buildPreviewHtml(sections: Section3[], theme?: string): string {
-  const sorted = [...sections].sort((a, b) => a.order - b.order);
-  const body = sorted
-    .map((s) => `<div data-section-id="${s.id}">${s.html}</div>`)
-    .join("\n");
-
-  const dataTheme = theme && theme !== "default" ? ` data-theme="${theme}"` : "";
-  const { css, tailwindConfig } = buildThemeCss();
-
-  return `<!DOCTYPE html>
-<html lang="es"${dataTheme}>
-<head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1"/>
-<script src="https://cdn.tailwindcss.com"></script>
-<script>tailwind.config = ${tailwindConfig}</script>
-<style>
-${css}
-*{margin:0;padding:0;box-sizing:border-box}
-html{scroll-behavior:smooth}
-body{font-family:system-ui,-apple-system,sans-serif;background-color:var(--color-surface);color:var(--color-on-surface)}
-img{max-width:100%}
-[contenteditable="true"]{cursor:text}
-</style>
-</head>
-<body class="bg-surface text-on-surface">
-${body}
-<script>${getIframeScript()}</script>
-</body>
-</html>`;
-}
-
-/**
- * Build the deploy HTML (no editing script, clean output).
- */
-export function buildDeployHtml(sections: Section3[], theme?: string, customColors?: CustomColors): string {
-  const sorted = [...sections].sort((a, b) => a.order - b.order);
-  const body = sorted.map((s) => s.html).join("\n");
-
-  const isCustom = theme === "custom" && customColors;
-  const dataTheme = theme && theme !== "default" && !isCustom ? ` data-theme="${theme}"` : "";
-
-  // For custom theme, build CSS from the custom colors directly (no data-theme needed, inject as :root)
-  const { css: baseCss, tailwindConfig } = isCustom
-    ? (() => {
-        const ct = buildCustomTheme(customColors);
-        const vars = Object.entries(ct.colors).map(([k, v]) => `  --color-${k}: ${v};`).join("\n");
-        return { css: `:root {\n${vars}\n}`, tailwindConfig: buildSingleThemeCss("default").tailwindConfig };
-      })()
-    : buildSingleThemeCss(theme || "default");
-
-  return `<!DOCTYPE html>
-<html lang="es"${dataTheme}>
-<head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>Landing Page</title>
-<script src="https://cdn.tailwindcss.com"></script>
-<script>tailwind.config = ${tailwindConfig}</script>
-<style>
-${baseCss}
-*{margin:0;padding:0;box-sizing:border-box}
-html{scroll-behavior:smooth}
-body{font-family:system-ui,-apple-system,sans-serif;background-color:var(--color-surface);color:var(--color-on-surface)}
-</style>
-</head>
-<body class="bg-surface text-on-surface">
-${body}
-</body>
-</html>`;
-}

package/src/components/Canvas.tsx

@@ -1,162 +0,0 @@
-import React, { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from "react";
-import type { Section3, IframeMessage } from "../types";
-import { buildPreviewHtml } from "../buildHtml";
-
-export interface CanvasHandle {
-  scrollToSection: (id: string) => void;
-  postMessage: (msg: Record<string, unknown>) => void;
-}
-
-interface CanvasProps {
-  sections: Section3[];
-  theme?: string;
-  onMessage: (msg: IframeMessage) => void;
-  iframeRectRef: React.MutableRefObject<DOMRect | null>;
-}
-
-export const Canvas = forwardRef<CanvasHandle, CanvasProps>(function Canvas({ sections, theme, onMessage, iframeRectRef }, ref) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [ready, setReady] = useState(false);
-  // Track what the iframe currently has so we can diff
-  const knownSectionsRef = useRef<Map<string, string>>(new Map());
-  const initializedRef = useRef(false);
-
-  // Post a message to the iframe
-  const postToIframe = useCallback((msg: Record<string, unknown>) => {
-    iframeRef.current?.contentWindow?.postMessage(msg, "*");
-  }, []);
-
-  useImperativeHandle(ref, () => ({
-    scrollToSection(id: string) {
-      postToIframe({ action: "scroll-to-section", id });
-    },
-    postMessage(msg: Record<string, unknown>) {
-      postToIframe(msg);
-    },
-  }), [postToIframe]);
-
-  // Initial write: set up the iframe shell (empty body + script + tailwind)
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe || initializedRef.current) return;
-    initializedRef.current = true;
-
-    const html = buildPreviewHtml([]);
-    const doc = iframe.contentDocument;
-    if (!doc) return;
-    doc.open();
-    doc.write(html);
-    doc.close();
-  }, []);
-
-  // Handle "ready" from iframe — then inject current sections
-  const handleReady = useCallback(() => {
-    setReady(true);
-    // Inject all current sections
-    const sorted = [...sections].sort((a, b) => a.order - b.order);
-    for (const s of sorted) {
-      postToIframe({ action: "add-section", id: s.id, html: s.html });
-      knownSectionsRef.current.set(s.id, s.html);
-    }
-  }, [sections, postToIframe]);
-
-  // Incremental diff: detect added/updated/removed sections
-  useEffect(() => {
-    if (!ready) return;
-
-    const known = knownSectionsRef.current;
-    const currentIds = new Set(sections.map((s) => s.id));
-    const sorted = [...sections].sort((a, b) => a.order - b.order);
-
-    // Add new sections
-    for (const s of sorted) {
-      if (!known.has(s.id)) {
-        postToIframe({ action: "add-section", id: s.id, html: s.html });
-        known.set(s.id, s.html);
-      } else if (known.get(s.id) !== s.html) {
-        // Update changed sections
-        postToIframe({ action: "update-section", id: s.id, html: s.html });
-        known.set(s.id, s.html);
-      }
-    }
-
-    // Remove deleted sections
-    for (const id of known.keys()) {
-      if (!currentIds.has(id)) {
-        postToIframe({ action: "remove-section", id });
-        known.delete(id);
-      }
-    }
-
-    // Reorder if needed
-    const knownOrder = [...known.keys()];
-    const desiredOrder = sorted.map((s) => s.id);
-    if (JSON.stringify(knownOrder) !== JSON.stringify(desiredOrder)) {
-      postToIframe({ action: "reorder-sections", order: desiredOrder });
-    }
-  }, [sections, ready, postToIframe]);
-
-  // Send theme changes to iframe
-  useEffect(() => {
-    if (!ready) return;
-    postToIframe({ action: "set-theme", theme: theme || "default" });
-  }, [theme, ready, postToIframe]);
-
-  // Update iframe rect on resize/scroll
-  const updateRect = useCallback(() => {
-    if (iframeRef.current) {
-      iframeRectRef.current = iframeRef.current.getBoundingClientRect();
-    }
-  }, [iframeRectRef]);
-
-  useEffect(() => {
-    updateRect();
-    window.addEventListener("resize", updateRect);
-    window.addEventListener("scroll", updateRect, true);
-    return () => {
-      window.removeEventListener("resize", updateRect);
-      window.removeEventListener("scroll", updateRect, true);
-    };
-  }, [updateRect]);
-
-  // Listen for postMessage from iframe
-  useEffect(() => {
-    function handleMessage(e: MessageEvent) {
-      const data = e.data;
-      if (!data || typeof data.type !== "string") return;
-
-      if (data.type === "ready") {
-        handleReady();
-        return;
-      }
-
-      if (
-        ["element-selected", "text-edited", "element-deselected", "section-html-updated"].includes(
-          data.type
-        )
-      ) {
-        updateRect();
-        onMessage(data as IframeMessage);
-      }
-    }
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [onMessage, updateRect, handleReady]);
-
-  return (
-    <div className="flex-1 bg-gray-100 rounded-xl overflow-hidden border-2 border-gray-200 relative">
-      <iframe
-        ref={iframeRef}
-        title="Landing preview"
-        className="w-full h-full border-0"
-        sandbox="allow-scripts allow-same-origin"
-        style={{ minHeight: "calc(100vh - 120px)" }}
-      />
-      {!ready && sections.length > 0 && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/80">
-          <span className="w-6 h-6 border-2 border-gray-400 border-t-gray-800 rounded-full animate-spin" />
-        </div>
-      )}
-    </div>
-  );
-});

package/src/components/CodeEditor.tsx

@@ -1,239 +0,0 @@
-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";
-import { oneDark } from "@codemirror/theme-one-dark";
-import { defaultKeymap, indentWithTab, history, historyKeymap } from "@codemirror/commands";
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
-import { bracketMatching, foldGutter, foldKeymap } from "@codemirror/language";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-
-interface CodeEditorProps {
-  code: string;
-  label: string;
-  scrollToText?: string;
-  onSave: (code: string) => void;
-  onClose: () => void;
-}
-
-function formatHtml(html: string): string {
-  let result = html.replace(/>\s*</g, ">\n<");
-  const lines = result.split("\n");
-  const output: string[] = [];
-  let indent = 0;
-  for (const raw of lines) {
-    const line = raw.trim();
-    if (!line) continue;
-    const isClosing = /^<\//.test(line);
-    const isSelfClosing =
-      /\/>$/.test(line) ||
-      /^<(img|br|hr|input|meta|link|col|area|base|embed|source|track|wbr)\b/i.test(line);
-    const hasInlineClose = /^<[^/][^>]*>.*<\//.test(line);
-    if (isClosing) indent = Math.max(0, indent - 1);
-    output.push("  ".repeat(indent) + line);
-    if (!isClosing && !isSelfClosing && !hasInlineClose && /^<[a-zA-Z]/.test(line)) {
-      indent++;
-    }
-  }
-  return output.join("\n");
-}
-
-// Flash highlight effect for scroll-to-code
-const flashLineEffect = StateEffect.define<{ from: number; to: number }>();
-const clearFlashEffect = StateEffect.define<null>();
-
-const flashLineDeco = Decoration.line({ class: "cm-flash-line" });
-
-const flashLineField = StateField.define<DecorationSet>({
-  create: () => Decoration.none,
-  update(decos, tr) {
-    for (const e of tr.effects) {
-      if (e.is(flashLineEffect)) {
-        return Decoration.set([flashLineDeco.range(e.value.from)]);
-      }
-      if (e.is(clearFlashEffect)) {
-        return Decoration.none;
-      }
-    }
-    return decos;
-  },
-  provide: (f) => EditorView.decorations.from(f),
-});
-
-
-function scrollToTarget(view: EditorView, target?: string) {
-  if (!target) return;
-  const docText = view.state.doc.toString();
-  const normalized = target.replace(/"/g, "'");
-  let idx = docText.indexOf(normalized);
-  if (idx === -1) idx = docText.indexOf(target);
-
-  // If exact match fails, extract tag+class and search line by line
-  if (idx === -1) {
-    const tagMatch = target.match(/^<(\w+)/);
-    const classMatch = target.match(/class=["']([^"']*?)["']/);
-    if (tagMatch) {
-      const searchTag = tagMatch[0];
-      const searchClass = classMatch ? classMatch[1].split(" ")[0] : null;
-      for (let i = 1; i <= view.state.doc.lines; i++) {
-        const line = view.state.doc.line(i);
-        if (line.text.includes(searchTag) && (!searchClass || line.text.includes(searchClass))) {
-          idx = line.from;
-          break;
-        }
-      }
-    }
-  }
-
-  if (idx !== -1) {
-    const line = view.state.doc.lineAt(idx);
-    view.dispatch({
-      selection: { anchor: line.from },
-      effects: [
-        EditorView.scrollIntoView(line.from, { y: "center" }),
-        flashLineEffect.of({ from: line.from, to: line.to }),
-      ],
-    });
-    // Clear flash after 2s
-    setTimeout(() => {
-      view.dispatch({ effects: clearFlashEffect.of(null) });
-    }, 2000);
-  }
-}
-
-export function CodeEditor({ code, label, scrollToText, onSave, onClose }: CodeEditorProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const viewRef = useRef<EditorView | null>(null);
-  const [stats, setStats] = useState({ lines: 0, kb: "0.0" });
-
-  const onSaveRef = useRef(onSave);
-  const onCloseRef = useRef(onClose);
-  onSaveRef.current = onSave;
-  onCloseRef.current = onClose;
-
-  const updateStats = useCallback((doc: { length: number; lines: number }) => {
-    setStats({ lines: doc.lines, kb: (doc.length / 1024).toFixed(1) });
-  }, []);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const initialDoc = code.includes("\n") ? code : formatHtml(code);
-
-    const state = EditorState.create({
-      doc: initialDoc,
-      extensions: [
-        lineNumbers(),
-        highlightActiveLine(),
-        highlightActiveLineGutter(),
-        bracketMatching(),
-        closeBrackets(),
-        foldGutter(),
-        highlightSelectionMatches(),
-        html(),
-        oneDark,
-        history(),
-        EditorView.lineWrapping,
-        keymap.of([
-          { key: "Mod-s", run: (v) => { onSaveRef.current(v.state.doc.toString()); return true; } },
-          { key: "Escape", run: () => { onCloseRef.current(); return true; } },
-          indentWithTab,
-          ...closeBracketsKeymap,
-          ...searchKeymap,
-          ...foldKeymap,
-          ...historyKeymap,
-          ...defaultKeymap,
-        ]),
-        EditorView.updateListener.of((update) => {
-          if (update.docChanged) {
-            updateStats(update.state.doc);
-          }
-        }),
-        flashLineField,
-        EditorView.theme({
-          "&": { height: "100%", fontSize: "13px" },
-          ".cm-scroller": { overflow: "auto", fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace" },
-          ".cm-content": { padding: "8px 0" },
-          ".cm-gutters": { borderRight: "1px solid #21262d" },
-          ".cm-flash-line": { backgroundColor: "rgba(250, 204, 21, 0.25)", transition: "background-color 2s ease-out" },
-        }),
-      ],
-    });
-
-    const view = new EditorView({ state, parent: containerRef.current });
-    viewRef.current = view;
-
-    updateStats(view.state.doc);
-    scrollToTarget(view, scrollToText);
-    view.focus();
-
-    return () => { view.destroy(); };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Re-scroll when scrollToText changes while editor is already open
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view || !scrollToText) return;
-    scrollToTarget(view, scrollToText);
-  }, [scrollToText]);
-
-  function handleFormat() {
-    const view = viewRef.current;
-    if (!view) return;
-    const formatted = formatHtml(view.state.doc.toString());
-    view.dispatch({
-      changes: { from: 0, to: view.state.doc.length, insert: formatted },
-    });
-  }
-
-  function handleSave() {
-    const view = viewRef.current;
-    if (!view) return;
-    onSave(view.state.doc.toString());
-  }
-
-  return (
-    <div className="flex flex-col h-full bg-[#0d1117]">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-800 shrink-0">
-        <div className="flex items-center gap-3">
-          <span className="px-2 py-0.5 rounded bg-orange-600/20 text-orange-400 text-[10px] font-mono font-bold uppercase tracking-wider">
-            HTML
-          </span>
-          <span className="text-sm font-bold text-gray-300">{label}</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={handleFormat}
-            className="px-3 py-1.5 text-xs font-bold rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors"
-          >
-            Formatear
-          </button>
-          <button
-            onClick={handleSave}
-            className="px-4 py-1.5 text-xs font-bold rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors"
-          >
-            Guardar
-          </button>
-          <button
-            onClick={onClose}
-            className="px-3 py-1.5 text-xs font-bold rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors"
-          >
-            Cerrar
-          </button>
-        </div>
-      </div>
-
-      {/* Editor */}
-      <div ref={containerRef} className="flex-1 overflow-hidden" />
-
-      {/* Footer */}
-      <div className="flex items-center justify-between px-4 py-1.5 border-t border-gray-800 text-[10px] text-gray-500 font-mono shrink-0">
-        <span>{stats.lines} lineas</span>
-        <span>Tab = indentar &middot; Cmd+S = guardar &middot; Esc = cerrar</span>
-        <span>{stats.kb} KB</span>
-      </div>
-    </div>
-  );
-}