@easybits.cloud/html-tailwind-generator 0.2.138 → 0.2.140

package/dist/components4.js

@@ -1177,7 +1177,7 @@ function ImageSrcEditor({ editor }) {
 }
 
 // src/components4/grapesDarkCss.ts
-var GRAPES_DARK_CSS = `
+var GRAPES_DARK_CSS_CLASSIC = `
 /* Dark theme for GrapesJS editor \u2014 matches EasyBits dark sidebar */
 
 /* Main editor background */
@@ -1277,16 +1277,184 @@ var GRAPES_DARK_CSS = `
 .gjs-rte-actionbar { background-color: #1f2937 !important; }
 .gjs-rte-action { color: #e5e7eb !important; }
 `;
+var DENIK_OVERRIDES = `
+/* \u2550\u2550\u2550 Denik variant overrides \u2550\u2550\u2550 */
+
+/* Editor chrome */
+.gjs-editor { background-color: white !important; }
+
+/* Block manager \u2014 flat list */
+.gjs-blocks-cs { background: transparent !important; }
+.gjs-block-categories { background: transparent !important; padding: 0 !important; }
+
+/* All blocks: horizontal row \u2014 [icon-box] [label] */
+.gjs-blocks-c .gjs-block.gjs-block {
+  background: transparent !important;
+  color: #e5e7eb !important;
+  border: none !important;
+  border-radius: 6px !important;
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  text-align: left !important;
+  gap: 10px !important;
+  padding: 0 10px !important;
+  margin: 0 !important;
+  width: 100% !important;
+  min-height: unset !important;
+  height: 24px !important;
+  box-shadow: none !important;
+  cursor: grab !important;
+}
+.gjs-blocks-c .gjs-block.gjs-block:hover { background: rgba(255,255,255,0.06) !important; }
+
+/* Icon box: 24x24 rounded square #2D2D2D \u2014 target BOTH class variants */
+.gjs-block .gjs-block__media,
+.gjs-block .gjs-block-media {
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  max-width: 24px !important;
+  min-height: 24px !important;
+  max-height: 24px !important;
+  line-height: 0 !important;
+  background: #2D2D2D !important;
+  border-radius: 5px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 4px !important;
+  flex-shrink: 0 !important;
+}
+.gjs-block .gjs-block__media svg,
+.gjs-block .gjs-block-media svg {
+  width: 14px !important;
+  height: 14px !important;
+  display: block !important;
+}
+.gjs-block svg { fill: #9ca3af !important; stroke: #9ca3af !important; }
+
+/* Label: 14px, left-aligned */
+.gjs-blocks-c .gjs-block .gjs-block-label {
+  color: #d1d5db !important;
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  text-align: left !important;
+  padding: 0 !important;
+  width: auto !important;
+  flex: 1 !important;
+  line-height: 24px !important;
+}
+
+/* Blocks container: vertical single-column list */
+.gjs-block-category:first-child .gjs-blocks-c { display: flex !important; gap: 12px !important; }
+.gjs-blocks-c {
+  flex-direction: column !important;
+  flex-wrap: nowrap !important;
+  gap: 8px !important;
+  padding: 4px 0 !important;
+  width: 100% !important;
+}
+/* Respect GrapesJS collapse: when inline style has display:none, honor it */
+.gjs-blocks-c[style*="none"] { display: none !important; }
+
+/* All categories: no border, transparent */
+.gjs-block-category {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: none !important;
+}
+
+/* \u2500\u2500\u2500 B\xE1sicos (first category): NOT collapsible, always open, flat \u2500\u2500\u2500 */
+.gjs-block-category:first-child .gjs-title {
+  background: transparent !important;
+  color: #9ca3af !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  padding: 14px 10px 6px !important;
+  border: none !important;
+  cursor: default !important;
+  pointer-events: none !important;
+}
+.gjs-block-category:first-child .gjs-caret-icon { display: none !important; }
+/* Force always open even if GrapesJS collapsed it */
+.gjs-block-category:first-child .gjs-blocks-c { display: flex !important; }
+
+/* \u2500\u2500\u2500 Secciones (all other categories): collapsible \u2500\u2500\u2500 */
+.gjs-block-category:not(:first-child) .gjs-title {
+  background: transparent !important;
+  color: #e5e7eb !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  padding: 8px 10px !important;
+  border: none !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  cursor: pointer !important;
+}
+.gjs-block-category:not(:first-child) .gjs-title:hover { background: rgba(255,255,255,0.04) !important; }
+.gjs-block-category:not(:first-child) .gjs-caret-icon { color: #6b7280 !important; margin-left: auto !important; font-size: 12px !important; }
+
+/* "Secciones" label above the section categories */
+.gjs-block-category:nth-child(2)::before {
+  content: 'Secciones';
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #9ca3af;
+  padding: 18px 10px 6px;
+}
+
+/* Section category title icons: colored cubes (override the title text with an icon prefix) */
+.gjs-block-category:not(:first-child) .gjs-title::before {
+  content: '';
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  border-radius: 5px;
+  background: #ec4899;
+}
+/* Per-category colors for the title icon */
+.gjs-block-category:nth-child(2) .gjs-title::before { background: #f472b6; }
+.gjs-block-category:nth-child(3) .gjs-title::before { background: #fb923c; }
+.gjs-block-category:nth-child(4) .gjs-title::before { background: #f87171; }
+.gjs-block-category:nth-child(5) .gjs-title::before { background: #facc15; }
+.gjs-block-category:nth-child(6) .gjs-title::before { background: #4ade80; }
+.gjs-block-category:nth-child(7) .gjs-title::before { background: #60a5fa; }
+.gjs-block-category:nth-child(8) .gjs-title::before { background: #c084fc; }
+.gjs-block-category:nth-child(9) .gjs-title::before { background: #a8a29e; }
+
+/* Section title: [icon] [text] ... [arrow] */
+.gjs-block-category:not(:first-child) .gjs-title { justify-content: flex-start !important; }
+.gjs-block-category:not(:first-child) .gjs-caret-icon { order: 99 !important; margin-left: auto !important; }
+
+/* Canvas \u2014 white floating frame with 32px margin */
+.gjs-cv-canvas { background-color: white !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; }
+.gjs-frame-wrapper { background: white !important; top: 32px !important; left: 32px !important; right: 32px !important; bottom: 32px !important; width: auto !important; height: auto !important; padding: 0 !important; }
+.gjs-frame { left: 0 !important; }
+`;
+var GRAPES_DARK_CSS_DENIK = GRAPES_DARK_CSS_CLASSIC + DENIK_OVERRIDES;
+function getGrapesCss(variant = "classic") {
+  return variant === "denik" ? GRAPES_DARK_CSS_DENIK : GRAPES_DARK_CSS_CLASSIC;
+}
 
 // src/components4/GrapesEditor.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var darkCssInjected = false;
-function injectDarkCss() {
-  if (darkCssInjected || typeof document === "undefined") return;
-  darkCssInjected = true;
+var injectedVariants = /* @__PURE__ */ new Set();
+function injectDarkCss(variant) {
+  if (typeof document === "undefined") return;
+  if (injectedVariants.has(variant)) return;
+  injectedVariants.add(variant);
   const style = document.createElement("style");
-  style.setAttribute("data-grapes-dark", "");
-  style.textContent = GRAPES_DARK_CSS;
+  style.setAttribute("data-grapes-css", variant);
+  style.textContent = getGrapesCss(variant);
   document.head.appendChild(style);
 }
 function flattenColors(colors) {
@@ -1305,17 +1473,27 @@ function flattenColors(colors) {
   }
   return Object.keys(out).length ? out : void 0;
 }
-var PANEL_TABS = [
-  { id: "blocks", label: "Bloques", icon: "\u229E" },
-  { id: "layers", label: "Capas", icon: "\u2630" },
-  { id: "styles", label: "Estilos", icon: "\u25D1" },
-  { id: "themes", label: "Temas", icon: "\u25C8" }
-];
+function getPanelTabs(variant) {
+  if (variant === "denik") {
+    return [
+      { id: "blocks", label: "+ Secci\xF3n", icon: "\u229E" },
+      { id: "layers", label: "Capas", icon: "\u25C7" },
+      { id: "styles", label: "Estilos", icon: "\u25D1" },
+      { id: "themes", label: "Temas", icon: "\u25C8" }
+    ];
+  }
+  return [
+    { id: "blocks", label: "Bloques", icon: "\u229E" },
+    { id: "layers", label: "Capas", icon: "\u2630" },
+    { id: "styles", label: "Estilos", icon: "\u25D1" },
+    { id: "themes", label: "Temas", icon: "\u25C8" }
+  ];
+}
 var GrapesEditor = forwardRef(
-  ({ initialHtml, theme = "minimal", customColors: rawCustomColors, brandKits, onChange, onAiAction, onThemeChange, onBrandKitChange, initialBrandKitId, hiddenTabs = [], canvasStyles, devices, panelSide = "left", blocks: customBlocks, onVisibleSectionChange }, ref) => {
+  ({ initialHtml, theme = "minimal", customColors: rawCustomColors, brandKits, onChange, onAiAction, onThemeChange, onBrandKitChange, initialBrandKitId, hiddenTabs = [], canvasStyles, devices, panelSide = "left", blocks: customBlocks, onVisibleSectionChange, editorVariant = "classic" }, ref) => {
     useEffect3(() => {
-      injectDarkCss();
-    }, []);
+      injectDarkCss(editorVariant);
+    }, [editorVariant]);
     const customColors = flattenColors(rawCustomColors);
     const editorContainerRef = useRef3(null);
     const blocksRef = useRef3(null);
@@ -1336,7 +1514,7 @@ var GrapesEditor = forwardRef(
     const customColorsRef = useRef3(customColors);
     customColorsRef.current = customColors;
     const [activeBrandKitId, setActiveBrandKitId] = useState3(initialBrandKitId || null);
-    const visibleTabs = PANEL_TABS.filter((t) => !hiddenTabs.includes(t.id));
+    const visibleTabs = getPanelTabs(editorVariant).filter((t) => !hiddenTabs.includes(t.id));
     const [activePanel, setActivePanel] = useState3(
       () => visibleTabs.find((t) => t.id === "styles")?.id ?? visibleTabs[0]?.id ?? "styles"
     );
@@ -1587,7 +1765,7 @@ ${vars}
           }
         });
         editor.on("component:selected", () => {
-          setActivePanel("styles");
+          if (!hiddenTabs.includes("styles")) setActivePanel("styles");
         });
         editor.on("component:deselected", () => {
         });
@@ -1853,15 +2031,23 @@ ${html}` : html;
       setTimeout(() => setThemeVersion((v) => v + 1), 100);
     }, [theme, customColors]);
     const sidebarBorder = panelSide === "right" ? "border-l" : "border-r";
-    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(
+    const sidebarContainerClass = editorVariant === "denik" ? `w-60 shrink-0 flex flex-col bg-[#11151A] ${sidebarBorder} border-gray-700 overflow-hidden` : `w-80 shrink-0 flex flex-col bg-black ${sidebarBorder} border-gray-700 overflow-hidden`;
+    const tabsRowClass = editorVariant === "denik" ? "flex gap-0 px-3 py-3" : "flex border-b border-gray-700";
+    const tabButtonClass = (isActive) => {
+      if (editorVariant === "denik") {
+        return `px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2 rounded-full ${isActive ? "bg-[#2A2B31] text-white" : "text-gray-400 hover:text-gray-200"}`;
+      }
+      return `flex-1 py-2.5 text-xs font-bold transition-colors ${isActive ? "bg-gray-800 text-white border-b-2 border-brand-500" : "text-gray-400 hover:text-gray-200 hover:bg-gray-800/50"}`;
+    };
+    const sidebar = /* @__PURE__ */ jsxs3("div", { className: sidebarContainerClass, children: [
+      /* @__PURE__ */ jsx3("div", { className: tabsRowClass, 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"}`,
+          className: tabButtonClass(activePanel === tab.id),
           title: tab.label,
           children: [
-            /* @__PURE__ */ jsx3("span", { className: "block text-base mb-0.5", children: tab.icon }),
+            editorVariant === "denik" ? /* @__PURE__ */ jsx3("span", { className: "text-sm", children: tab.icon }) : /* @__PURE__ */ jsx3("span", { className: "block text-base mb-0.5", children: tab.icon }),
             tab.label
           ]
         },
@@ -1881,7 +2067,7 @@ ${html}` : html;
           className: `flex-1 overflow-auto ${activePanel === "layers" ? "" : "hidden"}`
         }
       ),
-      /* @__PURE__ */ jsxs3("div", { className: `flex-1 overflow-auto ${activePanel === "styles" ? "" : "hidden"}`, children: [
+      !hiddenTabs.includes("styles") && /* @__PURE__ */ jsxs3("div", { className: `flex-1 overflow-auto ${activePanel === "styles" ? "" : "hidden"}`, children: [
         ready && /* @__PURE__ */ jsx3(ImageSrcEditor, { editor: editorRef.current }),
         ready && /* @__PURE__ */ jsx3(
           TailwindClassEditor,
@@ -1896,7 +2082,7 @@ ${html}` : html;
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs3("div", { className: `flex-1 overflow-auto p-3 ${activePanel === "themes" ? "" : "hidden"}`, children: [
+      !hiddenTabs.includes("themes") && /* @__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;
@@ -2026,7 +2212,8 @@ ${html}` : html;
         ] })
       ] })
     ] });
-    const canvas = /* @__PURE__ */ jsx3("div", { ref: editorContainerRef, className: "flex-1 h-full bg-black" });
+    const canvasClass = editorVariant === "denik" ? "flex-1 h-full bg-white relative" : "flex-1 h-full bg-black";
+    const canvas = /* @__PURE__ */ jsx3("div", { ref: editorContainerRef, className: canvasClass });
     return /* @__PURE__ */ jsxs3("div", { className: "flex h-full w-full relative", children: [
       panelSide === "right" ? /* @__PURE__ */ jsxs3(Fragment, { children: [
         canvas,