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

package/dist/chunk-XM3D3TTJ.js

@@ -0,0 +1,852 @@
+import {
+  LANDING_THEMES,
+  buildPreviewHtml
+} from "./chunk-5TYGSZAF.js";
+
+// src/components/Canvas.tsx
+import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Canvas = forwardRef(function Canvas2({ sections, theme, onMessage, iframeRectRef }, ref) {
+  const iframeRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const knownSectionsRef = useRef(/* @__PURE__ */ new Map());
+  const initializedRef = useRef(false);
+  const postToIframe = useCallback((msg) => {
+    iframeRef.current?.contentWindow?.postMessage(msg, "*");
+  }, []);
+  useImperativeHandle(ref, () => ({
+    scrollToSection(id) {
+      postToIframe({ action: "scroll-to-section", id });
+    },
+    postMessage(msg) {
+      postToIframe(msg);
+    }
+  }), [postToIframe]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe || initializedRef.current) return;
+    initializedRef.current = true;
+    const html2 = buildPreviewHtml([]);
+    const doc = iframe.contentDocument;
+    if (!doc) return;
+    doc.open();
+    doc.write(html2);
+    doc.close();
+  }, []);
+  const handleReady = useCallback(() => {
+    setReady(true);
+    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]);
+  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);
+    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) {
+        postToIframe({ action: "update-section", id: s.id, html: s.html });
+        known.set(s.id, s.html);
+      }
+    }
+    for (const id of known.keys()) {
+      if (!currentIds.has(id)) {
+        postToIframe({ action: "remove-section", id });
+        known.delete(id);
+      }
+    }
+    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]);
+  useEffect(() => {
+    if (!ready) return;
+    postToIframe({ action: "set-theme", theme: theme || "default" });
+  }, [theme, ready, postToIframe]);
+  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]);
+  useEffect(() => {
+    function handleMessage(e) {
+      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);
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onMessage, updateRect, handleReady]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 bg-gray-100 rounded-xl overflow-hidden border-2 border-gray-200 relative", children: [
+    /* @__PURE__ */ jsx(
+      "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 && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/80", children: /* @__PURE__ */ jsx("span", { className: "w-6 h-6 border-2 border-gray-400 border-t-gray-800 rounded-full animate-spin" }) })
+  ] });
+});
+
+// src/components/SectionList.tsx
+import { useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SectionList({
+  sections,
+  selectedSectionId,
+  theme,
+  customColors,
+  onThemeChange,
+  onCustomColorChange,
+  onSelect,
+  onOpenCode,
+  onReorder,
+  onDelete,
+  onRename,
+  onAdd
+}) {
+  const sorted = [...sections].sort((a, b) => a.order - b.order);
+  const colorInputRef = useRef2(null);
+  const [editingId, setEditingId] = useState2(null);
+  const [editingLabel, setEditingLabel] = useState2("");
+  return /* @__PURE__ */ jsxs2("div", { className: "w-56 shrink-0 flex flex-col bg-white border-r-2 border-gray-200 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "p-3 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "text-xs font-black uppercase tracking-wider text-gray-500 mb-2", children: "Tema" }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5 flex-wrap", children: [
+        LANDING_THEMES.map((t) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            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 }
+          },
+          t.id
+        )),
+        /* @__PURE__ */ jsx2(
+          "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 } : void 0,
+            children: theme !== "custom" && /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "absolute inset-0 rounded-full",
+                style: { background: "conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444)" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: colorInputRef,
+            type: "color",
+            value: customColors?.primary || "#6366f1",
+            onChange: (e) => onCustomColorChange?.({ primary: e.target.value }),
+            className: "sr-only"
+          }
+        )
+      ] }),
+      theme === "custom" && /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 mt-2", children: [
+        { key: "primary", label: "Pri", fallback: "#6366f1" },
+        { key: "secondary", label: "Sec", fallback: "#f59e0b" },
+        { key: "accent", label: "Acc", fallback: "#06b6d4" },
+        { key: "surface", label: "Sur", fallback: "#ffffff" }
+      ].map((c) => /* @__PURE__ */ jsxs2("label", { className: "flex flex-col items-center gap-0.5 cursor-pointer", children: [
+        /* @__PURE__ */ jsx2(
+          "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"
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "text-[9px] font-bold text-gray-400 uppercase", children: c.label })
+      ] }, c.key)) })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "p-3 border-b border-gray-200", children: /* @__PURE__ */ jsx2("h3", { className: "text-xs font-black uppercase tracking-wider text-gray-500", children: "Secciones" }) }),
+    /* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto py-1", children: sorted.map((section, i) => /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        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"}`,
+        children: [
+          /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-mono text-gray-400 w-4 text-right", children: i + 1 }),
+          editingId === section.id ? /* @__PURE__ */ jsx2(
+            "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: true,
+              onClick: (e) => e.stopPropagation()
+            }
+          ) : /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: "text-sm font-bold truncate flex-1",
+              onDoubleClick: (e) => {
+                e.stopPropagation();
+                setEditingId(section.id);
+                setEditingLabel(section.label);
+              },
+              children: section.label
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "opacity-0 group-hover:opacity-100 flex gap-0.5", children: [
+            /* @__PURE__ */ jsx2(
+              "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",
+                children: /* @__PURE__ */ jsx2("svg", { className: "w-3 h-3", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("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" }) })
+              }
+            ),
+            i > 0 && /* @__PURE__ */ jsx2(
+              "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]",
+                children: "\u2191"
+              }
+            ),
+            i < sorted.length - 1 && /* @__PURE__ */ jsx2(
+              "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]",
+                children: "\u2193"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "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",
+                children: "\u2715"
+              }
+            )
+          ] })
+        ]
+      },
+      section.id
+    )) }),
+    /* @__PURE__ */ jsx2("div", { className: "p-3 border-t border-gray-200", children: /* @__PURE__ */ jsx2(
+      "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",
+        children: "+ Agregar seccion"
+      }
+    ) })
+  ] });
+}
+
+// src/components/FloatingToolbar.tsx
+import { useState as useState3, useRef as useRef3, useEffect as useEffect2 } from "react";
+import { HiSparkles } from "react-icons/hi2";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var STYLE_PRESETS = [
+  { label: "Minimal", icon: "\u25CB", instruction: "Redisena esta seccion con estetica minimal: mucho espacio en blanco, tipografia limpia, sin bordes ni sombras innecesarias. Manten el mismo contenido." },
+  { label: "Cards", icon: "\u25A6", instruction: "Redisena esta seccion usando layout de cards en grid: cada item en su propia card con padding, sombra sutil y bordes redondeados. Manten el mismo contenido." },
+  { label: "Bold", icon: "\u25A0", instruction: "Redisena esta seccion con estilo bold/brutalist: tipografia grande y gruesa, colores de alto contraste, bordes solidos, sin gradientes. Manten el mismo contenido." },
+  { label: "Glass", icon: "\u25C7", instruction: "Redisena esta seccion con glassmorphism: fondos translucidos con backdrop-blur, bordes sutiles blancos, sombras suaves. Usa un fondo oscuro o con gradiente detras. Manten el mismo contenido." },
+  { label: "Dark", icon: "\u25CF", instruction: "Redisena esta seccion con fondo oscuro (#111 o similar), texto claro, acentos de color vibrantes. Manten el mismo contenido." }
+];
+function FloatingToolbar({
+  selection,
+  iframeRect,
+  onRefine,
+  onMoveUp,
+  onMoveDown,
+  onDelete,
+  onClose,
+  onViewCode,
+  onUpdateAttribute,
+  isRefining
+}) {
+  const [prompt, setPrompt] = useState3("");
+  const [showCode, setShowCode] = useState3(false);
+  const [refImage, setRefImage] = useState3(null);
+  const [refImageName, setRefImageName] = useState3(null);
+  const inputRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const toolbarRef = useRef3(null);
+  const [imgSrc, setImgSrc] = useState3("");
+  const [imgAlt, setImgAlt] = useState3("");
+  const [linkHref, setLinkHref] = useState3("");
+  useEffect2(() => {
+    setPrompt("");
+    setShowCode(false);
+    setRefImage(null);
+    setRefImageName(null);
+  }, [selection?.sectionId]);
+  useEffect2(() => {
+    if (selection?.attrs) {
+      setImgSrc(selection.attrs.src || "");
+      setImgAlt(selection.attrs.alt || "");
+      setLinkHref(selection.attrs.href || "");
+    }
+  }, [selection?.attrs, selection?.elementPath]);
+  useEffect2(() => {
+    function handleKey(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [onClose]);
+  if (!selection || !selection.rect || !iframeRect) return null;
+  const toolbarWidth = toolbarRef.current?.offsetWidth || 480;
+  const toolbarHeight = toolbarRef.current?.offsetHeight || 60;
+  const top = iframeRect.top + selection.rect.top + selection.rect.height + 8;
+  const left = iframeRect.left + selection.rect.left;
+  const clampedLeft = Math.max(8, Math.min(left, window.innerWidth - toolbarWidth - 8));
+  const showAbove = top + toolbarHeight + 8 > window.innerHeight;
+  const finalTop = Math.max(8, showAbove ? iframeRect.top + selection.rect.top - toolbarHeight - 8 : top);
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!prompt.trim() || isRefining) return;
+    onRefine(prompt.trim(), refImage || void 0);
+    setPrompt("");
+    setRefImage(null);
+    setRefImageName(null);
+  }
+  function handleFileSelect(e) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setRefImageName(file.name);
+    const reader = new FileReader();
+    reader.onload = () => {
+      setRefImage(reader.result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  }
+  function handleSetAttr(attr, value) {
+    if (!selection?.sectionId || !selection?.elementPath || !onUpdateAttribute) return;
+    onUpdateAttribute(selection.sectionId, selection.elementPath, attr, value);
+  }
+  const isImg = selection.tagName === "IMG";
+  const isLink = selection.tagName === "A";
+  const hasAttrEditing = (isImg || isLink) && onUpdateAttribute;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: toolbarRef,
+      className: "fixed z-50 flex flex-col gap-1.5 bg-gray-900 text-white rounded-xl shadow-2xl px-2 py-1.5 border border-gray-700",
+      style: { top: finalTop, left: clampedLeft, maxWidth: "min(480px, calc(100vw - 16px))" },
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+          selection.tagName && /* @__PURE__ */ jsx3("span", { className: "px-2 py-0.5 rounded-md bg-blue-600 text-[10px] font-mono font-bold uppercase tracking-wider shrink-0", children: selection.tagName.toLowerCase() }),
+          /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "flex items-center gap-1 flex-1", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: prompt,
+                onChange: (e) => setPrompt(e.target.value),
+                placeholder: refImage ? "Instruccion + imagen..." : "Editar con AI...",
+                disabled: isRefining,
+                className: "bg-transparent text-sm text-white placeholder:text-gray-500 outline-none w-40 md:w-56 px-2 py-1"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: () => fileInputRef.current?.click(),
+                disabled: isRefining,
+                className: `w-7 h-7 flex items-center justify-center rounded-lg transition-colors shrink-0 ${refImage ? "bg-blue-600 text-white" : "hover:bg-gray-800 text-gray-400 hover:text-white"}`,
+                title: refImage ? `Imagen: ${refImageName}` : "Adjuntar imagen de referencia",
+                children: /* @__PURE__ */ jsx3("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", d: "M1 5.25A2.25 2.25 0 013.25 3h13.5A2.25 2.25 0 0119 5.25v9.5A2.25 2.25 0 0116.75 17H3.25A2.25 2.25 0 011 14.75v-9.5zm1.5 5.81V14.75c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75v-2.06l-2.22-2.22a.75.75 0 00-1.06 0L8.56 16.1l-3.28-3.28a.75.75 0 00-1.06 0l-1.72 1.72zm12-4.06a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z", clipRule: "evenodd" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/*",
+                onChange: handleFileSelect,
+                className: "hidden"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "submit",
+                disabled: !prompt.trim() || isRefining,
+                className: "w-7 h-7 flex items-center justify-center rounded-lg bg-blue-500 hover:bg-blue-600 disabled:opacity-30 transition-colors",
+                children: isRefining ? /* @__PURE__ */ jsx3("span", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }) : /* @__PURE__ */ jsx3(HiSparkles, { className: "w-3.5 h-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "w-px h-5 bg-gray-700" }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => {
+                const tag = selection.tagName?.toLowerCase();
+                const text = selection.text?.substring(0, 80);
+                const prompt2 = selection.isSectionRoot ? "Genera una variante completamente diferente de esta seccion. Manten el mismo contenido/informacion pero cambia radicalmente el layout, la estructura visual, y el estilo. Sorprendeme con un diseno creativo e inesperado." : `Modifica SOLO el elemento <${tag}> que contiene "${text}". Genera una variante visual diferente de ESE elemento (diferente estilo, layout, tipografia). NO modifiques ningun otro elemento de la seccion.`;
+                onRefine(prompt2, refImage || void 0);
+              },
+              disabled: isRefining,
+              className: "px-2.5 py-1 text-[11px] font-bold rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-30 transition-colors whitespace-nowrap shrink-0",
+              title: "Generar variante",
+              children: "\u2726 Variante"
+            }
+          ),
+          selection.isSectionRoot && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "w-px h-5 bg-gray-700" }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: onMoveUp,
+                className: "w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs",
+                title: "Mover arriba",
+                children: "\u2191"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: onMoveDown,
+                className: "w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs",
+                title: "Mover abajo",
+                children: "\u2193"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: onViewCode,
+              className: "w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs font-mono text-gray-400 hover:text-white",
+              title: "Ver codigo",
+              children: "</>"
+            }
+          ),
+          selection.isSectionRoot && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "w-px h-5 bg-gray-700" }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: onDelete,
+                className: "w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-900/50 text-red-400 transition-colors",
+                title: "Eliminar seccion",
+                children: /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx3("polyline", { points: "3 6 5 6 21 6" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3("div", { className: "w-px h-5 bg-gray-700" }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: onClose,
+              className: "w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 text-gray-400 hover:text-white transition-colors",
+              title: "Cerrar (ESC)",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        refImage && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 pt-0.5 pb-0.5 border-t border-gray-700/50", children: [
+          /* @__PURE__ */ jsx3("img", { src: refImage, alt: "Referencia", className: "w-10 h-10 rounded object-cover border border-gray-600" }),
+          /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-400 truncate flex-1", children: refImageName }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => {
+                setRefImage(null);
+                setRefImageName(null);
+              },
+              className: "text-[10px] text-gray-500 hover:text-white px-1",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        selection.isSectionRoot && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50", children: [
+          /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-500 uppercase tracking-wider mr-1 shrink-0", children: "Estilo" }),
+          STYLE_PRESETS.map((preset) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: () => onRefine(preset.instruction),
+              disabled: isRefining,
+              className: "px-2 py-0.5 text-[11px] font-medium rounded-md bg-gray-800 hover:bg-gray-700 disabled:opacity-30 transition-colors whitespace-nowrap",
+              title: preset.label,
+              children: [
+                /* @__PURE__ */ jsx3("span", { className: "mr-1", children: preset.icon }),
+                preset.label
+              ]
+            },
+            preset.label
+          ))
+        ] }),
+        isImg && hasAttrEditing && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0", children: "src" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "text",
+                value: imgSrc,
+                onChange: (e) => setImgSrc(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleSetAttr("src", imgSrc);
+                },
+                className: "flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0",
+                placeholder: "URL de imagen..."
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: () => handleSetAttr("src", imgSrc),
+                className: "px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0",
+                children: "Set"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0", children: "alt" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "text",
+                value: imgAlt,
+                onChange: (e) => setImgAlt(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") handleSetAttr("alt", imgAlt);
+                },
+                className: "flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0",
+                placeholder: "Alt text..."
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: () => handleSetAttr("alt", imgAlt),
+                className: "px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0",
+                children: "Set"
+              }
+            )
+          ] })
+        ] }),
+        isLink && hasAttrEditing && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50", children: [
+          /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0", children: "href" }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "text",
+              value: linkHref,
+              onChange: (e) => setLinkHref(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleSetAttr("href", linkHref);
+              },
+              className: "flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0",
+              placeholder: "URL del enlace..."
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: () => handleSetAttr("href", linkHref),
+              className: "px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0",
+              children: "Set"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/CodeEditor.tsx
+import { useEffect as useEffect3, useRef as useRef4, useCallback as useCallback2, useState as useState4 } from "react";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, Decoration } 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";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function formatHtml(html2) {
+  let result = html2.replace(/>\s*</g, ">\n<");
+  const lines = result.split("\n");
+  const output = [];
+  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");
+}
+var flashLineEffect = StateEffect.define();
+var clearFlashEffect = StateEffect.define();
+var flashLineDeco = Decoration.line({ class: "cm-flash-line" });
+var flashLineField = StateField.define({
+  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, target) {
+  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 (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 })
+      ]
+    });
+    setTimeout(() => {
+      view.dispatch({ effects: clearFlashEffect.of(null) });
+    }, 2e3);
+  }
+}
+function CodeEditor({ code, label, scrollToText, onSave, onClose }) {
+  const containerRef = useRef4(null);
+  const viewRef = useRef4(null);
+  const [stats, setStats] = useState4({ lines: 0, kb: "0.0" });
+  const onSaveRef = useRef4(onSave);
+  const onCloseRef = useRef4(onClose);
+  onSaveRef.current = onSave;
+  onCloseRef.current = onClose;
+  const updateStats = useCallback2((doc) => {
+    setStats({ lines: doc.lines, kb: (doc.length / 1024).toFixed(1) });
+  }, []);
+  useEffect3(() => {
+    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();
+    };
+  }, []);
+  useEffect3(() => {
+    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 /* @__PURE__ */ jsxs4("div", { className: "flex flex-col h-full bg-[#0d1117]", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-800 shrink-0", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx4("span", { className: "px-2 py-0.5 rounded bg-orange-600/20 text-orange-400 text-[10px] font-mono font-bold uppercase tracking-wider", children: "HTML" }),
+        /* @__PURE__ */ jsx4("span", { className: "text-sm font-bold text-gray-300", children: label })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx4(
+          "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",
+            children: "Formatear"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "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",
+            children: "Guardar"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "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",
+            children: "Cerrar"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { ref: containerRef, className: "flex-1 overflow-hidden" }),
+    /* @__PURE__ */ jsxs4("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", children: [
+      /* @__PURE__ */ jsxs4("span", { children: [
+        stats.lines,
+        " lineas"
+      ] }),
+      /* @__PURE__ */ jsx4("span", { children: "Tab = indentar \xB7 Cmd+S = guardar \xB7 Esc = cerrar" }),
+      /* @__PURE__ */ jsxs4("span", { children: [
+        stats.kb,
+        " KB"
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  Canvas,
+  SectionList,
+  FloatingToolbar,
+  CodeEditor
+};
+//# sourceMappingURL=chunk-XM3D3TTJ.js.map