@easybits.cloud/html-tailwind-generator 0.2.134 → 0.2.136

package/dist/components4.js

@@ -5,7 +5,7 @@ import {
 } from "./chunk-VV5I53WR.js";
 
 // src/components4/GrapesEditor.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2, forwardRef, useImperativeHandle } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3, forwardRef, useImperativeHandle } from "react";
 
 // src/components4/blocks.ts
 var LANDING_BLOCKS = [
@@ -1015,6 +1015,160 @@ function TailwindClassEditor({ editor, themeVersion = 0, themeColors = {} }) {
   ] });
 }
 
+// src/components4/ImageSrcEditor.tsx
+import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function readSrc(component) {
+  if (!component) return "";
+  const attrs = component.getAttributes?.() || {};
+  return attrs.src || "";
+}
+function readAlt(component) {
+  if (!component) return "";
+  const attrs = component.getAttributes?.() || {};
+  return attrs.alt || "";
+}
+function isImageComponent(component) {
+  if (!component) return false;
+  if (component.get?.("type") === "image") return true;
+  const el = component.getEl?.();
+  return el?.tagName === "IMG";
+}
+function isValidHttpUrl(value) {
+  if (!value) return false;
+  try {
+    const u = new URL(value);
+    return u.protocol === "http:" || u.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function ImageSrcEditor({ editor }) {
+  const [selectedComponent, setSelectedComponent] = useState2(null);
+  const [isImg, setIsImg] = useState2(false);
+  const [src, setSrc] = useState2("");
+  const [alt, setAlt] = useState2("");
+  const [previewError, setPreviewError] = useState2(false);
+  const apply = useCallback2((next) => {
+    if (!selectedComponent) return;
+    selectedComponent.addAttributes?.(next);
+    const el = selectedComponent.getEl?.();
+    if (el) {
+      if (next.src !== void 0) el.setAttribute("src", next.src);
+      if (next.alt !== void 0) el.setAttribute("alt", next.alt);
+    }
+    editor?.trigger("sidebar:change");
+  }, [editor, selectedComponent]);
+  const applySrc = useCallback2(() => {
+    if (!isValidHttpUrl(src)) return;
+    apply({ src });
+  }, [apply, src]);
+  const applyAlt = useCallback2(() => {
+    apply({ alt });
+  }, [apply, alt]);
+  useEffect2(() => {
+    if (!editor) return;
+    const onSelected = (component) => {
+      setSelectedComponent(component);
+      const img = isImageComponent(component);
+      setIsImg(img);
+      if (img) {
+        setSrc(readSrc(component));
+        setAlt(readAlt(component));
+        setPreviewError(false);
+      } else {
+        setSrc("");
+        setAlt("");
+      }
+    };
+    const onDeselected = () => {
+      setSelectedComponent(null);
+      setIsImg(false);
+      setSrc("");
+      setAlt("");
+    };
+    editor.on("component:selected", onSelected);
+    editor.on("component:deselected", onDeselected);
+    const current = editor.getSelected();
+    if (current) onSelected(current);
+    return () => {
+      editor.off("component:selected", onSelected);
+      editor.off("component:deselected", onDeselected);
+    };
+  }, [editor]);
+  if (!isImg) return null;
+  const urlValid = isValidHttpUrl(src);
+  return /* @__PURE__ */ jsxs2("div", { className: "p-3 border-b border-gray-800 bg-gray-900/50", children: [
+    /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-gray-400 font-bold uppercase tracking-wider mb-2", children: "Imagen" }),
+    src && !previewError && /* @__PURE__ */ jsx2("div", { className: "mb-2 rounded-md overflow-hidden border border-gray-700 bg-gray-950", style: { aspectRatio: "16 / 9" }, children: /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src,
+        alt: "",
+        className: "w-full h-full object-cover",
+        onError: () => setPreviewError(true),
+        onLoad: () => setPreviewError(false)
+      }
+    ) }),
+    /* @__PURE__ */ jsx2("label", { className: "block text-[10px] text-gray-500 uppercase tracking-wider mb-1", children: "URL" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 mb-2", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "text",
+          value: src,
+          onChange: (e) => {
+            setSrc(e.target.value);
+            setPreviewError(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") applySrc();
+          },
+          placeholder: "https://...",
+          className: "flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1.5 outline-none border border-transparent focus:border-brand-500 min-w-0"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: applySrc,
+          disabled: !urlValid,
+          title: "Aplicar URL",
+          className: "w-7 h-7 flex items-center justify-center rounded bg-brand-500 hover:bg-brand-600 transition-colors shrink-0 disabled:opacity-40 disabled:cursor-not-allowed",
+          children: /* @__PURE__ */ jsx2("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" }) })
+        }
+      )
+    ] }),
+    src && !urlValid && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-amber-500 mb-2", children: "URL inv\xE1lida \u2014 debe empezar con http:// o https://" }),
+    previewError && urlValid && /* @__PURE__ */ jsx2("p", { className: "text-[10px] text-red-400 mb-2", children: "No se pudo cargar la imagen desde esa URL." }),
+    /* @__PURE__ */ jsx2("label", { className: "block text-[10px] text-gray-500 uppercase tracking-wider mb-1", children: "Alt" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "text",
+          value: alt,
+          onChange: (e) => setAlt(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") applyAlt();
+          },
+          placeholder: "Descripci\xF3n...",
+          className: "flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1.5 outline-none border border-transparent focus:border-brand-500 min-w-0"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: applyAlt,
+          title: "Aplicar alt",
+          className: "w-7 h-7 flex items-center justify-center rounded bg-gray-700 hover:bg-gray-600 transition-colors shrink-0",
+          children: /* @__PURE__ */ jsx2("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("polyline", { points: "20 6 9 17 4 12" }) })
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/components4/grapesDarkCss.ts
 var GRAPES_DARK_CSS = `
 /* Dark theme for GrapesJS editor \u2014 matches EasyBits dark sidebar */
@@ -1118,7 +1272,7 @@ var GRAPES_DARK_CSS = `
 `;
 
 // src/components4/GrapesEditor.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var darkCssInjected = false;
 function injectDarkCss() {
   if (darkCssInjected || typeof document === "undefined") return;
@@ -1152,7 +1306,7 @@ var PANEL_TABS = [
 ];
 var GrapesEditor = forwardRef(
   ({ initialHtml, theme = "minimal", customColors: rawCustomColors, brandKits, onChange, onAiAction, onThemeChange, onBrandKitChange, initialBrandKitId, hiddenTabs = [], canvasStyles, devices, panelSide = "left", blocks: customBlocks, onVisibleSectionChange }, ref) => {
-    useEffect2(() => {
+    useEffect3(() => {
       injectDarkCss();
     }, []);
     const customColors = flattenColors(rawCustomColors);
@@ -1174,13 +1328,13 @@ var GrapesEditor = forwardRef(
     themeRef.current = theme;
     const customColorsRef = useRef2(customColors);
     customColorsRef.current = customColors;
-    const [activeBrandKitId, setActiveBrandKitId] = useState2(initialBrandKitId || null);
+    const [activeBrandKitId, setActiveBrandKitId] = useState3(initialBrandKitId || null);
     const visibleTabs = PANEL_TABS.filter((t) => !hiddenTabs.includes(t.id));
-    const [activePanel, setActivePanel] = useState2(
+    const [activePanel, setActivePanel] = useState3(
       () => visibleTabs.find((t) => t.id === "styles")?.id ?? visibleTabs[0]?.id ?? "styles"
     );
-    const [ready, setReady] = useState2(false);
-    const [themeVersion, setThemeVersion] = useState2(0);
+    const [ready, setReady] = useState3(false);
+    const [themeVersion, setThemeVersion] = useState3(0);
     useImperativeHandle(ref, () => ({
       getEditor: () => editorRef.current,
       getHtml: () => {
@@ -1316,7 +1470,7 @@ ${vars}
       }
       return null;
     }
-    useEffect2(() => {
+    useEffect3(() => {
       if (!editorContainerRef.current || editorRef.current) return;
       let mounted = true;
       (async () => {
@@ -1668,7 +1822,7 @@ ${html}` : html;
         editorRef.current = null;
       };
     }, []);
-    useEffect2(() => {
+    useEffect3(() => {
       const ed = editorRef.current;
       if (!ed) return;
       const doc = ed.Canvas.getDocument();
@@ -1691,52 +1845,55 @@ ${html}` : html;
       setTimeout(() => setThemeVersion((v) => v + 1), 100);
     }, [theme, customColors]);
     const sidebarBorder = panelSide === "right" ? "border-l" : "border-r";
-    const sidebar = /* @__PURE__ */ jsxs2("div", { className: `w-80 shrink-0 flex flex-col bg-black ${sidebarBorder} border-gray-700 overflow-hidden`, children: [
-      /* @__PURE__ */ jsx2("div", { className: "flex border-b border-gray-700", children: visibleTabs.map((tab) => /* @__PURE__ */ jsxs2(
+    const sidebar = /* @__PURE__ */ jsxs3("div", { className: `w-80 shrink-0 flex flex-col bg-black ${sidebarBorder} border-gray-700 overflow-hidden`, children: [
+      /* @__PURE__ */ jsx3("div", { className: "flex border-b border-gray-700", children: visibleTabs.map((tab) => /* @__PURE__ */ jsxs3(
         "button",
         {
           onClick: () => setActivePanel(tab.id),
           className: `flex-1 py-2.5 text-xs font-bold transition-colors ${activePanel === tab.id ? "bg-gray-800 text-white border-b-2 border-brand-500" : "text-gray-400 hover:text-gray-200 hover:bg-gray-800/50"}`,
           title: tab.label,
           children: [
-            /* @__PURE__ */ jsx2("span", { className: "block text-base mb-0.5", children: tab.icon }),
+            /* @__PURE__ */ jsx3("span", { className: "block text-base mb-0.5", children: tab.icon }),
             tab.label
           ]
         },
         tab.id
       )) }),
-      !hiddenTabs.includes("blocks") && /* @__PURE__ */ jsx2(
+      !hiddenTabs.includes("blocks") && /* @__PURE__ */ jsx3(
         "div",
         {
           ref: blocksRef,
           className: `flex-1 overflow-auto p-2 ${activePanel === "blocks" ? "" : "hidden"}`
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           ref: layersRef,
           className: `flex-1 overflow-auto ${activePanel === "layers" ? "" : "hidden"}`
         }
       ),
-      /* @__PURE__ */ jsx2("div", { className: `flex-1 overflow-auto ${activePanel === "styles" ? "" : "hidden"}`, children: ready && /* @__PURE__ */ jsx2(
-        TailwindClassEditor,
-        {
-          editor: editorRef.current,
-          themeVersion,
-          themeColors: (() => {
-            if (customColors && Object.keys(customColors).length) return customColors;
-            const t = LANDING_THEMES.find((t2) => t2.id === theme);
-            return t?.colors || {};
-          })()
-        }
-      ) }),
-      /* @__PURE__ */ jsxs2("div", { className: `flex-1 overflow-auto p-3 ${activePanel === "themes" ? "" : "hidden"}`, children: [
-        /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400 font-bold uppercase tracking-wider mb-3", children: "Temas" }),
-        /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: LANDING_THEMES.map((t) => {
+      /* @__PURE__ */ jsxs3("div", { className: `flex-1 overflow-auto ${activePanel === "styles" ? "" : "hidden"}`, children: [
+        ready && /* @__PURE__ */ jsx3(ImageSrcEditor, { editor: editorRef.current }),
+        ready && /* @__PURE__ */ jsx3(
+          TailwindClassEditor,
+          {
+            editor: editorRef.current,
+            themeVersion,
+            themeColors: (() => {
+              if (customColors && Object.keys(customColors).length) return customColors;
+              const t = LANDING_THEMES.find((t2) => t2.id === theme);
+              return t?.colors || {};
+            })()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: `flex-1 overflow-auto p-3 ${activePanel === "themes" ? "" : "hidden"}`, children: [
+        /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-400 font-bold uppercase tracking-wider mb-3", children: "Temas" }),
+        /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-2 gap-2", children: LANDING_THEMES.map((t) => {
           const isActive = theme === t.id;
           const displayColors = isActive && customColors && Object.keys(customColors).length ? { ...t.colors, ...customColors } : t.colors;
-          return /* @__PURE__ */ jsxs2(
+          return /* @__PURE__ */ jsxs3(
             "button",
             {
               onClick: () => {
@@ -1746,12 +1903,12 @@ ${html}` : html;
               },
               className: `flex flex-col items-center gap-1.5 p-2.5 rounded-xl border-2 transition-all ${isActive ? "border-brand-500 bg-brand-500/10" : "border-gray-700 hover:border-gray-500"}`,
               children: [
-                /* @__PURE__ */ jsxs2("div", { className: "flex gap-1", children: [
-                  /* @__PURE__ */ jsx2("div", { className: "w-5 h-5 rounded-full border border-gray-600", style: { background: displayColors.primary }, title: "Primary" }),
-                  /* @__PURE__ */ jsx2("div", { className: "w-5 h-5 rounded-full border border-gray-600", style: { background: displayColors.surface }, title: "Surface" }),
-                  /* @__PURE__ */ jsx2("div", { className: "w-5 h-5 rounded-full border border-gray-600", style: { background: displayColors.accent }, title: "Accent" })
+                /* @__PURE__ */ jsxs3("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ jsx3("div", { className: "w-5 h-5 rounded-full border border-gray-600", style: { background: displayColors.primary }, title: "Primary" }),
+                  /* @__PURE__ */ jsx3("div", { className: "w-5 h-5 rounded-full border border-gray-600", style: { background: displayColors.surface }, title: "Surface" }),
+                  /* @__PURE__ */ jsx3("div", { className: "w-5 h-5 rounded-full border border-gray-600", style: { background: displayColors.accent }, title: "Accent" })
                 ] }),
-                /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold text-gray-300", children: t.label })
+                /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-bold text-gray-300", children: t.label })
               ]
             },
             t.id
@@ -1776,12 +1933,12 @@ ${html}` : html;
             "on-secondary": "On Secondary",
             "on-accent": "On Accent"
           };
-          return /* @__PURE__ */ jsx2("div", { className: "mt-3 space-y-1", children: Object.entries(currentColors).map(([key, hex]) => /* @__PURE__ */ jsxs2(
+          return /* @__PURE__ */ jsx3("div", { className: "mt-3 space-y-1", children: Object.entries(currentColors).map(([key, hex]) => /* @__PURE__ */ jsxs3(
             "label",
             {
               className: "flex items-center gap-2 w-full px-2 py-1 rounded-lg hover:bg-gray-800 transition-colors group text-left cursor-pointer",
               children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "input",
                   {
                     type: "color",
@@ -1793,19 +1950,19 @@ ${html}` : html;
                     className: "w-4 h-4 rounded border border-gray-600 shrink-0 cursor-pointer p-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded"
                   }
                 ),
-                /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-gray-400 flex-1 truncate", children: COLOR_LABELS[key] || key }),
-                /* @__PURE__ */ jsx2("code", { className: "text-[10px] text-gray-500 group-hover:text-gray-300 font-mono", children: hex })
+                /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-400 flex-1 truncate", children: COLOR_LABELS[key] || key }),
+                /* @__PURE__ */ jsx3("code", { className: "text-[10px] text-gray-500 group-hover:text-gray-300 font-mono", children: hex })
               ]
             },
             key
           )) });
         })(),
-        brandKits && brandKits.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-400 font-bold uppercase tracking-wider mt-5 mb-3", children: "Brand Kits" }),
-          /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-2", children: brandKits.map((bk) => {
+        brandKits && brandKits.length > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-400 font-bold uppercase tracking-wider mt-5 mb-3", children: "Brand Kits" }),
+          /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-2 gap-2", children: brandKits.map((bk) => {
             const bkBase = flattenColors(bk.colors) || {};
             const displayColors = activeBrandKitId === bk.id && customColors && Object.keys(customColors).length ? { ...bkBase, ...customColors } : bkBase;
-            return /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsxs3(
               "button",
               {
                 onClick: () => {
@@ -1815,7 +1972,7 @@ ${html}` : html;
                 },
                 className: `flex flex-col items-center gap-1.5 p-2.5 rounded-xl border-2 transition-all ${activeBrandKitId === bk.id ? "border-brand-500 bg-brand-500/10" : "border-gray-700 hover:border-gray-500"}`,
                 children: [
-                  /* @__PURE__ */ jsx2("div", { className: "flex gap-1", children: ["primary", "surface", "accent"].map((key) => /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3("div", { className: "flex gap-1", children: ["primary", "surface", "accent"].map((key) => /* @__PURE__ */ jsx3(
                     "div",
                     {
                       className: "w-5 h-5 rounded-full border border-gray-600",
@@ -1823,7 +1980,7 @@ ${html}` : html;
                     },
                     key
                   )) }),
-                  /* @__PURE__ */ jsx2("span", { className: "text-[10px] font-bold text-gray-300 truncate max-w-full", children: bk.name })
+                  /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-bold text-gray-300 truncate max-w-full", children: bk.name })
                 ]
               },
               bk.id
@@ -1834,12 +1991,12 @@ ${html}` : html;
             if (!bk) return null;
             const baseColors = flattenColors(bk.colors) || {};
             const colors = customColors && Object.keys(customColors).length ? { ...baseColors, ...customColors } : baseColors;
-            return /* @__PURE__ */ jsx2("div", { className: "mt-3 space-y-1", children: Object.entries(colors).map(([key, hex]) => /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsx3("div", { className: "mt-3 space-y-1", children: Object.entries(colors).map(([key, hex]) => /* @__PURE__ */ jsxs3(
               "label",
               {
                 className: "flex items-center gap-2 w-full px-2 py-1 rounded-lg hover:bg-gray-800 transition-colors group text-left cursor-pointer",
                 children: [
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "input",
                     {
                       type: "color",
@@ -1851,8 +2008,8 @@ ${html}` : html;
                       className: "w-4 h-4 rounded border border-gray-600 shrink-0 cursor-pointer p-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded"
                     }
                   ),
-                  /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-gray-400 flex-1 truncate", children: key }),
-                  /* @__PURE__ */ jsx2("code", { className: "text-[10px] text-gray-500 group-hover:text-gray-300 font-mono", children: hex })
+                  /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-400 flex-1 truncate", children: key }),
+                  /* @__PURE__ */ jsx3("code", { className: "text-[10px] text-gray-500 group-hover:text-gray-300 font-mono", children: hex })
                 ]
               },
               key
@@ -1861,16 +2018,16 @@ ${html}` : html;
         ] })
       ] })
     ] });
-    const canvas = /* @__PURE__ */ jsx2("div", { ref: editorContainerRef, className: "flex-1 h-full bg-black" });
-    return /* @__PURE__ */ jsxs2("div", { className: "flex h-full w-full relative", children: [
-      panelSide === "right" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+    const canvas = /* @__PURE__ */ jsx3("div", { ref: editorContainerRef, className: "flex-1 h-full bg-black" });
+    return /* @__PURE__ */ jsxs3("div", { className: "flex h-full w-full relative", children: [
+      panelSide === "right" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         canvas,
         sidebar
-      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
         sidebar,
         canvas
       ] }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           className: `absolute inset-0 z-50 pointer-events-none bg-gray-950/40 backdrop-blur-[2px] transition-all duration-500 ${ready ? "opacity-0 invisible" : "opacity-100"}`
@@ -1883,6 +2040,7 @@ GrapesEditor.displayName = "GrapesEditor";
 var GrapesEditor_default = GrapesEditor;
 export {
   GrapesEditor_default as GrapesEditor,
+  ImageSrcEditor,
   LANDING_BLOCKS,
   TailwindClassEditor
 };