@easybits.cloud/html-tailwind-generator 0.2.90 → 0.2.92

package/dist/{ViewportToggle-zUYxZgQ6.d.ts → ViewportToggle-CQgzTq_-.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { S as Section3, I as IframeMessage } from './types-BIpbpCJr.js';
+import { S as Section3, I as IframeMessage } from './types-BFNim4MH.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as CustomColors, a as LandingTheme } from './themes-CWFZ6GB-.js';
 

package/dist/{chunk-G4FYV7OF.js → chunk-AHGQBRAE.js}

@@ -1,7 +1,7 @@
 import {
   LANDING_THEMES,
   buildPreviewHtml
-} from "./chunk-DL5PA47F.js";
+} from "./chunk-HHEQOFNP.js";
 
 // src/components/Canvas.tsx
 import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from "react";
@@ -124,7 +124,7 @@ var Canvas = forwardRef(function Canvas2({ sections, theme, onMessage, iframeRec
         sessionStorage.setItem("landing-v3-iframe-scrollY", String(data.y));
         return;
       }
-      if (["element-selected", "text-edited", "element-deselected", "section-html-updated", "undo", "redo"].includes(
+      if (["element-selected", "element-contextmenu", "text-edited", "element-deselected", "section-html-updated", "undo", "redo"].includes(
         data.type
       )) {
         if (data.type === "section-html-updated" && data.sectionId && data.sectionHtml) {
@@ -358,6 +358,24 @@ var STYLE_PRESETS = [
   { 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." }
 ];
+var PaletteIcon = () => /* @__PURE__ */ jsxs3("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx3("circle", { cx: "13.5", cy: "6.5", r: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx3("circle", { cx: "17.5", cy: "10.5", r: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx3("circle", { cx: "8.5", cy: "7.5", r: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx3("circle", { cx: "6.5", cy: "12", r: "0.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx3("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 011.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" })
+] });
+var RulerIcon = () => /* @__PURE__ */ jsxs3("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx3("path", { d: "M21.3 15.3a2.4 2.4 0 010 3.4l-2.6 2.6a2.4 2.4 0 01-3.4 0L2.7 8.7a2.4 2.4 0 010-3.4l2.6-2.6a2.4 2.4 0 013.4 0z" }),
+  /* @__PURE__ */ jsx3("path", { d: "M14.5 12.5l2-2" }),
+  /* @__PURE__ */ jsx3("path", { d: "M11.5 9.5l2-2" }),
+  /* @__PURE__ */ jsx3("path", { d: "M8.5 6.5l2-2" }),
+  /* @__PURE__ */ jsx3("path", { d: "M17.5 15.5l2-2" })
+] });
+var LinkIcon = () => /* @__PURE__ */ jsxs3("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx3("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsx3("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })
+] });
 function FloatingToolbar({
   selection,
   iframeRect,
@@ -383,6 +401,7 @@ function FloatingToolbar({
   const fileInputRef = useRef3(null);
   const toolbarRef = useRef3(null);
   const [showTagPicker, setShowTagPicker] = useState3(false);
+  const [activeTab, setActiveTab] = useState3(null);
   const [imgSrc, setImgSrc] = useState3("");
   const [imgAlt, setImgAlt] = useState3("");
   const [linkHref, setLinkHref] = useState3("");
@@ -392,7 +411,8 @@ function FloatingToolbar({
     setRefImage(null);
     setRefImageName(null);
     setShowTagPicker(false);
-  }, [selection?.sectionId]);
+    setActiveTab(null);
+  }, [selection?.sectionId, selection?.elementPath]);
   useEffect2(() => {
     if (selection?.attrs) {
       setImgSrc(selection.attrs.src || "");
@@ -594,11 +614,205 @@ function FloatingToolbar({
     }
     return null;
   })();
+  const hasStyleTab = true;
+  const hasSizeTab = sizePresets && !selection.isSectionRoot;
+  const hasAttrsTab = hasAttrEditing;
+  function toggleTab(tab) {
+    setActiveTab((prev) => prev === tab ? null : tab);
+  }
+  function renderColorPanel() {
+    if (selection.isSectionRoot) {
+      if (hideStylePresets) return null;
+      return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 pt-1 pb-0.5", 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
+        ))
+      ] });
+    }
+    if (!onUpdateAttribute || selection.tagName === "IMG") return null;
+    const containerTags = ["DIV", "SECTION", "HEADER", "FOOTER", "NAV", "ASIDE", "MAIN", "ARTICLE"];
+    const isContainer = containerTags.includes(selection.tagName ?? "");
+    const TEXT_COLOR_PREFIXES = ["text-primary", "text-secondary", "text-accent", "text-on-surface", "text-on-primary", "text-on-surface-muted", "text-white", "text-black"];
+    const BG_COLOR_PREFIXES = ["bg-primary", "bg-primary-dark", "bg-secondary", "bg-accent", "bg-surface", "bg-surface-alt"];
+    const themeSwatches = themeColors ? [
+      { color: themeColors.primary, textCls: "text-primary", bgCls: "bg-primary", label: "Primary" },
+      { color: themeColors.secondary, textCls: "text-secondary", bgCls: "bg-secondary", label: "Secondary" },
+      { color: themeColors.accent, textCls: "text-accent", bgCls: "bg-accent", label: "Accent" },
+      { color: themeColors.surface, textCls: "text-on-surface", bgCls: "bg-surface", label: "Surface" }
+    ] : [];
+    const fixedSwatches = [
+      { color: "#ffffff", css: "#ffffff", label: "Blanco" },
+      { color: "#000000", css: "#000000", label: "Negro" },
+      { color: "transparent", css: "transparent", label: "Transparente" }
+    ];
+    const renderColorRow = (label, mode) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 pt-0.5 pb-0.5", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-500 uppercase tracking-wider mr-1 shrink-0 w-10", children: label }),
+      fixedSwatches.map(({ color, css, label: swatchLabel }) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: () => {
+            handleReplaceClass(mode === "text" ? TEXT_COLOR_PREFIXES : BG_COLOR_PREFIXES, "");
+            const cssProp = mode === "text" ? "color" : "background-color";
+            handleSetAttr("style", `${cssProp}: ${css}`);
+          },
+          className: "w-5 h-5 rounded-full border border-gray-600 hover:scale-125 transition-transform shrink-0",
+          style: color === "transparent" ? {
+            backgroundImage: "repeating-conic-gradient(#808080 0% 25%, #c0c0c0 0% 50%)",
+            backgroundSize: "8px 8px"
+          } : { backgroundColor: color },
+          title: swatchLabel
+        },
+        swatchLabel
+      )),
+      themeSwatches.map(({ color, textCls, bgCls, label: swatchLabel }) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: () => {
+            const prefixes = mode === "text" ? TEXT_COLOR_PREFIXES : BG_COLOR_PREFIXES;
+            const cls = mode === "text" ? textCls : bgCls;
+            handleReplaceClass(prefixes, cls);
+          },
+          className: "w-5 h-5 rounded-full border border-gray-600 hover:scale-125 transition-transform shrink-0",
+          style: { backgroundColor: color },
+          title: swatchLabel
+        },
+        swatchLabel
+      )),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "color",
+          onChange: (e) => {
+            handleReplaceClass(mode === "text" ? TEXT_COLOR_PREFIXES : BG_COLOR_PREFIXES, "");
+            const cssProp = mode === "text" ? "color" : "background-color";
+            handleSetAttr("style", `${cssProp}: ${e.target.value}`);
+          },
+          className: "w-5 h-5 rounded-full border border-gray-600 cursor-pointer shrink-0 p-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-0",
+          title: "Color personalizado"
+        }
+      )
+    ] }, mode);
+    return /* @__PURE__ */ jsxs3("div", { className: "pt-1 pb-0.5", children: [
+      renderColorRow("Color", "text"),
+      isContainer && renderColorRow("Fondo", "bg")
+    ] });
+  }
+  function renderSizePanel() {
+    if (!sizePresets || selection.isSectionRoot) return null;
+    const groups = Object.entries(sizePresets).filter(([k]) => k !== "currentClasses");
+    const labels = { width: "Ancho", maxW: "Max", padding: "Padding", margin: "Margin", textSize: "Texto", fontWeight: "Peso", imgSize: "Tama\xF1o", rounded: "Borde" };
+    return /* @__PURE__ */ jsx3("div", { className: "pt-1 pb-0.5", children: groups.map(([key, options]) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 pt-0.5 pb-0.5", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-gray-500 uppercase tracking-wider mr-1 shrink-0 w-10", children: labels[key] || key }),
+      options.map((opt) => {
+        const isActive = sizePresets.currentClasses.includes(opt.cls);
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => handleReplaceClass(opt.prefixes, opt.cls),
+            className: `px-2 py-0.5 text-[10px] font-mono font-bold rounded-md transition-colors whitespace-nowrap ${isActive ? "bg-blue-600 text-white" : "bg-gray-800 hover:bg-gray-700 text-gray-300"}`,
+            children: opt.label
+          },
+          opt.cls
+        );
+      })
+    ] }, key)) });
+  }
+  function renderAttrsPanel() {
+    if (!hasAttrEditing) return null;
+    return /* @__PURE__ */ jsxs3("div", { className: "pt-1 pb-0.5", children: [
+      isImg && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", 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 && /* @__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: "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"
+          }
+        )
+      ] })
+    ] });
+  }
   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",
+      className: "fixed z-50 flex flex-col 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(600px, calc(100vw - 16px))" },
       children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
@@ -723,15 +937,6 @@ function FloatingToolbar({
               }
             )
           ] }),
-          /* @__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(
@@ -791,201 +996,56 @@ function FloatingToolbar({
             }
           )
         ] }),
-        selection.isSectionRoot && !hideStylePresets && /* @__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(
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 pt-1 border-t border-gray-700/50", children: [
+          hasStyleTab && /* @__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,
+              onClick: () => toggleTab("style"),
+              className: `flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-medium transition-colors ${activeTab === "style" ? "bg-blue-600 text-white" : "bg-gray-800 hover:bg-gray-700 text-gray-400"}`,
+              title: "Estilo",
               children: [
-                /* @__PURE__ */ jsx3("span", { className: "mr-1", children: preset.icon }),
-                preset.label
+                /* @__PURE__ */ jsx3(PaletteIcon, {}),
+                /* @__PURE__ */ jsx3("span", { children: "Estilo" })
               ]
-            },
-            preset.label
-          ))
-        ] }),
-        !selection.isSectionRoot && onUpdateAttribute && selection.tagName !== "IMG" && (() => {
-          const containerTags = ["DIV", "SECTION", "HEADER", "FOOTER", "NAV", "ASIDE", "MAIN", "ARTICLE"];
-          const isContainer = containerTags.includes(selection.tagName ?? "");
-          const TEXT_COLOR_PREFIXES = ["text-primary", "text-secondary", "text-accent", "text-on-surface", "text-on-primary", "text-on-surface-muted", "text-white", "text-black"];
-          const BG_COLOR_PREFIXES = ["bg-primary", "bg-primary-dark", "bg-secondary", "bg-accent", "bg-surface", "bg-surface-alt"];
-          const themeSwatches = themeColors ? [
-            { color: themeColors.primary, textCls: "text-primary", bgCls: "bg-primary", label: "Primary" },
-            { color: themeColors.secondary, textCls: "text-secondary", bgCls: "bg-secondary", label: "Secondary" },
-            { color: themeColors.accent, textCls: "text-accent", bgCls: "bg-accent", label: "Accent" },
-            { color: themeColors.surface, textCls: "text-on-surface", bgCls: "bg-surface", label: "Surface" }
-          ] : [];
-          const fixedSwatches = [
-            { color: "#ffffff", css: "#ffffff", label: "Blanco" },
-            { color: "#000000", css: "#000000", label: "Negro" },
-            { color: "transparent", css: "transparent", label: "Transparente" }
-          ];
-          const renderColorRow = (label, mode) => /* @__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 w-10", children: label }),
-            fixedSwatches.map(({ color, css, label: swatchLabel }) => /* @__PURE__ */ jsx3(
-              "button",
-              {
-                onClick: () => {
-                  handleReplaceClass(mode === "text" ? TEXT_COLOR_PREFIXES : BG_COLOR_PREFIXES, "");
-                  const cssProp = mode === "text" ? "color" : "background-color";
-                  handleSetAttr("style", `${cssProp}: ${css}`);
-                },
-                className: "w-5 h-5 rounded-full border border-gray-600 hover:scale-125 transition-transform shrink-0",
-                style: color === "transparent" ? {
-                  backgroundImage: "repeating-conic-gradient(#808080 0% 25%, #c0c0c0 0% 50%)",
-                  backgroundSize: "8px 8px"
-                } : { backgroundColor: color },
-                title: swatchLabel
-              },
-              swatchLabel
-            )),
-            themeSwatches.map(({ color, textCls, bgCls, label: swatchLabel }) => /* @__PURE__ */ jsx3(
-              "button",
-              {
-                onClick: () => {
-                  const prefixes = mode === "text" ? TEXT_COLOR_PREFIXES : BG_COLOR_PREFIXES;
-                  const cls = mode === "text" ? textCls : bgCls;
-                  handleReplaceClass(prefixes, cls);
-                },
-                className: "w-5 h-5 rounded-full border border-gray-600 hover:scale-125 transition-transform shrink-0",
-                style: { backgroundColor: color },
-                title: swatchLabel
-              },
-              swatchLabel
-            )),
-            /* @__PURE__ */ jsx3(
-              "input",
-              {
-                type: "color",
-                onChange: (e) => {
-                  handleReplaceClass(mode === "text" ? TEXT_COLOR_PREFIXES : BG_COLOR_PREFIXES, "");
-                  const cssProp = mode === "text" ? "color" : "background-color";
-                  handleSetAttr("style", `${cssProp}: ${e.target.value}`);
-                },
-                className: "w-5 h-5 rounded-full border border-gray-600 cursor-pointer shrink-0 p-0 bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-0",
-                title: "Color personalizado"
-              }
-            )
-          ] }, mode);
-          return isContainer ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-            renderColorRow("Color", "text"),
-            renderColorRow("Fondo", "bg")
-          ] }) : renderColorRow("Color", "text");
-        })(),
-        sizePresets && !selection.isSectionRoot && (() => {
-          const groups = Object.entries(sizePresets).filter(([k]) => k !== "currentClasses");
-          const labels = { width: "Ancho", maxW: "Max", padding: "Padding", margin: "Margin", textSize: "Texto", fontWeight: "Peso", imgSize: "Tama\xF1o", rounded: "Borde" };
-          return groups.map(([key, options]) => /* @__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 w-10", children: labels[key] || key }),
-            options.map((opt) => {
-              const isActive = sizePresets.currentClasses.includes(opt.cls);
-              return /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  onClick: () => handleReplaceClass(opt.prefixes, opt.cls),
-                  className: `px-2 py-0.5 text-[10px] font-mono font-bold rounded-md transition-colors whitespace-nowrap ${isActive ? "bg-blue-600 text-white" : "bg-gray-800 hover:bg-gray-700 text-gray-300"}`,
-                  children: opt.label
-                },
-                opt.cls
-              );
-            }),
-            /* @__PURE__ */ jsx3(
-              "input",
-              {
-                type: "text",
-                placeholder: "clase...",
-                className: "w-16 bg-gray-800 text-[10px] font-mono text-white rounded-md px-1.5 py-0.5 outline-none placeholder:text-gray-600 ml-1",
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") {
-                    const val = e.target.value.trim();
-                    if (val) {
-                      handleReplaceClass(options[0].prefixes, val);
-                      e.target.value = "";
-                    }
-                  }
-                }
-              }
-            )
-          ] }, key));
-        })(),
-        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",
+            }
+          ),
+          hasSizeTab && /* @__PURE__ */ jsxs3(
+            "button",
             {
-              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..."
+              onClick: () => toggleTab("size"),
+              className: `flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-medium transition-colors ${activeTab === "size" ? "bg-blue-600 text-white" : "bg-gray-800 hover:bg-gray-700 text-gray-400"}`,
+              title: "Tama\xF1o",
+              children: [
+                /* @__PURE__ */ jsx3(RulerIcon, {}),
+                /* @__PURE__ */ jsx3("span", { children: "Tama\xF1o" })
+              ]
+            }
+          ),
+          hasAttrsTab && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              onClick: () => toggleTab("attrs"),
+              className: `flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-medium transition-colors ${activeTab === "attrs" ? "bg-blue-600 text-white" : "bg-gray-800 hover:bg-gray-700 text-gray-400"}`,
+              title: "Atributos",
+              children: [
+                /* @__PURE__ */ jsx3(LinkIcon, {}),
+                /* @__PURE__ */ jsx3("span", { children: "Attrs" })
+              ]
             }
           ),
           /* @__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"
+              onClick: onViewCode,
+              className: "flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-medium bg-gray-800 hover:bg-gray-700 text-gray-400 transition-colors font-mono",
+              title: "Ver c\xF3digo",
+              children: "</>"
             }
           )
-        ] })
+        ] }),
+        activeTab === "style" && renderColorPanel(),
+        activeTab === "size" && renderSizePanel(),
+        activeTab === "attrs" && renderAttrsPanel()
       ]
     }
   );
@@ -1309,4 +1369,4 @@ export {
   ViewportToggle,
   useUndoStack
 };
-//# sourceMappingURL=chunk-G4FYV7OF.js.map
+//# sourceMappingURL=chunk-AHGQBRAE.js.map