@easybits.cloud/html-tailwind-generator 0.1.0

package/LICENSE

@@ -0,0 +1,131 @@
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose.  However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software.  Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.  For example:
+
+> Required Notice: Copyright EasyBits (https://easybits.cloud)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for
+the benefit of public knowledge, personal study, private
+entertainment, hobby projects, amateur pursuits, or religious
+observance, without any anticipated commercial application,
+is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution,
+public research organization, public safety or health
+organization, environmental protection organization,
+or government institution is use for a permitted purpose
+regardless of the source of funding or obligations resulting
+from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else.  These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or done anything with the software
+not covered by your licenses, your licenses can nonetheless
+continue if you come into full compliance with these terms,
+and take practical steps to correct past violations, within
+32 days of receiving notice.  Otherwise, all your licenses
+end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization.  **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

package/README.md

@@ -0,0 +1,178 @@
+# @easybits.cloud/html-tailwind-generator
+
+AI-powered landing page generator with Tailwind CSS. Canvas editor, streaming AI generation, one-click deploy.
+
+Built and maintained by [EasyBits](https://easybits.cloud).
+
+## Features
+
+- **AI Generation** — Streaming landing page creation with Claude (Sonnet for generation, Haiku for refinement)
+- **Canvas Editor** — iframe-based preview with click-to-select, inline text editing, section reorder
+- **Floating Toolbar** — AI prompt input, style presets (Minimal, Cards, Bold, Glass, Dark), reference image support
+- **Code Editor** — CodeMirror 6 with HTML syntax, flash highlight on scroll-to-code, format, Cmd+S
+- **Theme System** — 5 preset themes (Neutral, Dark, Slate, Midnight, Warm) + custom multi-color picker
+- **Image Enrichment** — Auto-replace placeholder images with Pexels stock photos
+- **Deploy** — To EasyBits hosting (`slug.easybits.cloud`) or any S3-compatible storage
+
+## Install
+
+```bash
+npm install @easybits.cloud/html-tailwind-generator
+```
+
+## Quick Start
+
+### Generate a landing page (server-side)
+
+```ts
+import { generateLanding } from "@easybits.cloud/html-tailwind-generator/generate";
+
+const sections = await generateLanding({
+  anthropicApiKey: "sk-ant-...",
+  pexelsApiKey: "...",           // optional, for stock photos
+  prompt: "SaaS de gestión de proyectos para equipos remotos",
+  onSection(section) {
+    console.log("New section:", section.label);
+  },
+  onImageUpdate(id, html) {
+    console.log("Images enriched for", id);
+  },
+});
+
+console.log(`Generated ${sections.length} sections`);
+```
+
+### Refine a section
+
+```ts
+import { refineLanding } from "@easybits.cloud/html-tailwind-generator/refine";
+
+const html = await refineLanding({
+  anthropicApiKey: "sk-ant-...",
+  currentHtml: sections[0].html,
+  instruction: "Make it more minimal with more whitespace",
+  onChunk(accumulated) {
+    // Stream partial HTML to UI
+  },
+});
+```
+
+### Use the editor components (React)
+
+```tsx
+import { Canvas, SectionList, FloatingToolbar, CodeEditor } from "@easybits.cloud/html-tailwind-generator/components";
+import type { Section3, IframeMessage } from "@easybits.cloud/html-tailwind-generator";
+
+function MyEditor() {
+  const [sections, setSections] = useState<Section3[]>([]);
+  const canvasRef = useRef<CanvasHandle>(null);
+  const iframeRectRef = useRef<DOMRect | null>(null);
+
+  return (
+    <div className="flex h-screen">
+      <SectionList
+        sections={sections}
+        selectedSectionId={null}
+        theme="default"
+        onThemeChange={(id) => {/* ... */}}
+        onSelect={(id) => canvasRef.current?.scrollToSection(id)}
+        onOpenCode={(id) => {/* ... */}}
+        onReorder={(from, to) => {/* ... */}}
+        onDelete={(id) => {/* ... */}}
+        onRename={(id, label) => {/* ... */}}
+        onAdd={() => {/* ... */}}
+      />
+      <Canvas
+        ref={canvasRef}
+        sections={sections}
+        theme="default"
+        onMessage={(msg: IframeMessage) => {/* ... */}}
+        iframeRectRef={iframeRectRef}
+      />
+    </div>
+  );
+}
+```
+
+### Build HTML for deploy
+
+```ts
+import { buildDeployHtml } from "@easybits.cloud/html-tailwind-generator";
+
+const html = buildDeployHtml(sections, "midnight");
+// → Complete HTML with Tailwind CDN, theme CSS, all sections
+```
+
+### Deploy
+
+```ts
+// Option 1: Deploy to EasyBits (zero config)
+import { deployToEasyBits } from "@easybits.cloud/html-tailwind-generator/deploy";
+
+const url = await deployToEasyBits({
+  apiKey: "eb_...",
+  slug: "my-landing",
+  sections,
+  theme: "midnight",
+});
+// → https://my-landing.easybits.cloud
+
+// Option 2: Deploy to S3 / R2 / Tigris (bring your own storage)
+import { deployToS3 } from "@easybits.cloud/html-tailwind-generator/deploy";
+
+const url = await deployToS3({
+  sections,
+  theme: "midnight",
+  upload: async (html) => {
+    await s3.putObject({ Bucket: "my-bucket", Key: "index.html", Body: html });
+    return "https://my-bucket.s3.amazonaws.com/index.html";
+  },
+});
+```
+
+## Exports
+
+| Path | Description |
+|------|-------------|
+| `@easybits.cloud/html-tailwind-generator` | Everything (types, themes, builders, generate, refine, deploy, images, components) |
+| `@easybits.cloud/html-tailwind-generator/generate` | `generateLanding`, `extractJsonObjects`, `SYSTEM_PROMPT` |
+| `@easybits.cloud/html-tailwind-generator/refine` | `refineLanding`, `REFINE_SYSTEM` |
+| `@easybits.cloud/html-tailwind-generator/deploy` | `deployToEasyBits`, `deployToS3` |
+| `@easybits.cloud/html-tailwind-generator/images` | `searchImage`, `enrichImages`, `findImageSlots` |
+| `@easybits.cloud/html-tailwind-generator/components` | `Canvas`, `SectionList`, `FloatingToolbar`, `CodeEditor` |
+
+## Theme System
+
+The generator uses a semantic color system with CSS custom properties:
+
+- `bg-primary`, `text-primary`, `bg-primary-light`, `bg-primary-dark`
+- `bg-surface`, `bg-surface-alt`, `text-on-surface`, `text-on-surface-muted`
+- `text-on-primary`, `bg-secondary`, `bg-accent`
+
+5 built-in themes + custom colors with auto-derived light/dark/contrast variants.
+
+## Peer Dependencies
+
+**Required:**
+- `react` >= 18
+- `ai` >= 4 (Vercel AI SDK)
+- `@ai-sdk/anthropic` >= 3
+
+**Optional (for editor components):**
+- `react-dom`, `react-icons`
+- `@codemirror/*` packages (for CodeEditor)
+
+## TODO
+
+> These are planned improvements — contributions welcome for noncommercial use.
+
+- [ ] **Inline Tailwind CSS build** — Replace CDN `<script src="tailwindcss.com">` with `@tailwindcss/standalone` or PostCSS to generate only used CSS as `<style>`. Faster load, no external dependency, production-ready.
+- [ ] **DALL-E image generation** — Add `openaiApiKey` option to generate unique images instead of Pexels stock. Sections with `data-image-query` could use AI-generated images for cases where stock photos don't fit.
+- [ ] **tsup build** — Add a proper build step (ESM + CJS + types) for npm publish. Currently exported as raw TypeScript source, which works for monorepo consumers but not for external npm users.
+- [ ] **i18n** — Component labels are in Spanish. Add a `locale` prop or i18n system for English and other languages.
+- [ ] **Tests** — Unit tests for `extractJsonObjects`, `findImageSlots`, `buildDeployHtml`, `buildCustomTheme`.
+- [ ] **Storybook** — Visual stories for Canvas, SectionList, FloatingToolbar, CodeEditor.
+
+## License
+
+[PolyForm Noncommercial 1.0.0](./LICENSE) — Free for personal, educational, and noncommercial use. Commercial use requires permission from [EasyBits](https://easybits.cloud).

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@easybits.cloud/html-tailwind-generator",
+  "version": "0.1.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",
+  "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"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "ai": ">=4",
+    "@ai-sdk/anthropic": ">=3",
+    "@codemirror/lang-html": ">=6",
+    "@codemirror/state": ">=6",
+    "@codemirror/theme-one-dark": ">=6",
+    "@codemirror/view": ">=6",
+    "@codemirror/commands": ">=6",
+    "@codemirror/search": ">=6",
+    "@codemirror/language": ">=6",
+    "@codemirror/autocomplete": ">=6",
+    "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 },
+    "react-dom": { "optional": true }
+  },
+  "dependencies": {
+    "nanoid": "^5.1.5"
+  }
+}

package/src/buildHtml.ts

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,162 @@
+import { 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>
+  );
+});