lf-pagebuilder-vue 0.0.8 → 0.0.9

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as W, ref as C, computed as Y, createElementBlock as d, openBlock as i, createCommentVNode as S, createElementVNode as t, withModifiers as le, withDirectives as O, vModelText as Q, normalizeClass as G, toDisplayString as v, Fragment as A, renderList as N, vModelSelect as H, vModelCheckbox as ne, createBlock as ue, createTextVNode as T, unref as q, onMounted as ae, createVNode as L, watch as oe, nextTick as ve, withCtx as ce, vShow as xe, reactive as he } from "vue";
+import { defineComponent as W, ref as C, computed as Y, createElementBlock as d, openBlock as i, createCommentVNode as S, createElementVNode as t, withModifiers as le, withDirectives as O, vModelText as Q, normalizeClass as G, toDisplayString as v, Fragment as A, renderList as V, vModelSelect as J, vModelCheckbox as ne, createBlock as ue, createTextVNode as E, unref as q, onMounted as ae, createVNode as L, watch as oe, nextTick as ve, withCtx as ce, vShow as xe, reactive as he } from "vue";
 import { listComponents as we } from "libreria-astro-lefebvre";
 import { QuillEditor as ye } from "@vueup/vue-quill";
 import me from "vuedraggable";
@@ -32,43 +32,43 @@ const Ce = W({
   setup(e) {
     const o = e.renderApiDomain || "http://localhost:8003", b = C(""), $ = C(!1), p = C(!1), u = C(null), s = Y({
       get() {
-        var g, l;
-        const P = (g = e.globalPageConfiguration) == null ? void 0 : g.find((r) => r.section === e.sectionSelected);
-        return ((l = P == null ? void 0 : P.config) == null ? void 0 : l.width) || "";
+        var g, n;
+        const P = (g = e.globalPageConfiguration) == null ? void 0 : g.find((a) => a.section === e.sectionSelected);
+        return ((n = P == null ? void 0 : P.config) == null ? void 0 : n.width) || "";
       },
       set(P) {
-        var l;
-        const g = (l = e.globalPageConfiguration) == null ? void 0 : l.find((r) => r.section === e.sectionSelected);
+        var n;
+        const g = (n = e.globalPageConfiguration) == null ? void 0 : n.find((a) => a.section === e.sectionSelected);
         g && (g.config || (g.config = {}), g.config.width = P);
       }
     }), m = () => {
       const P = {
         pageConfig: e.globalPageConfiguration,
         paramsConfig: e.parametersPageConfiguration
-      }, g = JSON.stringify(P), l = new CustomEvent("lf-pagebuilder:export", {
+      }, g = JSON.stringify(P), n = new CustomEvent("lf-pagebuilder:export", {
         detail: { ...P, inputId: e.inputId }
       });
-      document.dispatchEvent(l);
-      const r = window.open("", "Preview", "width='100vw',height='100vh'");
-      r && (r.document.body.innerText = g, r.document.close());
+      document.dispatchEvent(n);
+      const a = window.open("", "Preview", "width='100vw',height='100vh'");
+      a && (a.document.body.innerText = g, a.document.close());
     }, w = () => {
       const P = {
         pageConfig: e.globalPageConfiguration,
         paramsConfig: e.parametersPageConfiguration
       }, g = JSON.stringify(P);
       I(g);
-      const l = new CustomEvent("lf-pagebuilder:save", {
+      const n = new CustomEvent("lf-pagebuilder:save", {
         detail: { ...P, inputId: e.inputId }
       });
-      if (document.dispatchEvent(l), e.inputId) {
-        const r = document.getElementById(e.inputId);
-        r && (r.value = g);
+      if (document.dispatchEvent(n), e.inputId) {
+        const a = document.getElementById(e.inputId);
+        a && (a.value = g);
       }
       if (p.value = !0, setTimeout(() => {
         p.value = !1;
       }, 3e3), e.submitForm && u.value) {
-        const r = u.value.closest("form");
-        r && r.submit();
+        const a = u.value.closest("form");
+        a && a.submit();
       }
     }, I = (P) => {
       const g = e.inputId ? `pageBuilderConfig_${e.inputId}` : "pageBuilderConfig";
@@ -86,24 +86,24 @@ const Ce = W({
             "Content-Type": "application/json"
           },
           body: g
-        }).then((l) => l.text()).then((l) => {
-          const r = window.open("", "Preview", "width='100vw',height='100vh'");
-          if (!r) return;
-          const j = new DOMParser().parseFromString(l, "text/html"), B = [];
-          function U(J, _ = 0) {
-            if (!J || J.nodeType !== 1) return;
-            const ee = J.tagName.toLowerCase();
+        }).then((n) => n.text()).then((n) => {
+          const a = window.open("", "Preview", "width='100vw',height='100vh'");
+          if (!a) return;
+          const j = new DOMParser().parseFromString(n, "text/html"), B = [];
+          function N(H, _ = 0) {
+            if (!H || H.nodeType !== 1) return;
+            const ee = H.tagName.toLowerCase();
             ["h1", "h2", "h3", "h4", "h5", "h6", "a", "p", "article", "section", "header", "footer"].includes(ee) && B.push({
               tag: ee,
-              text: (J.textContent || "").trim().slice(0, 80),
+              text: (H.textContent || "").trim().slice(0, 80),
               depth: _
-            }), Array.from(J.children).forEach((te) => U(te, _ + 1));
+            }), Array.from(H.children).forEach((te) => N(te, _ + 1));
           }
-          U(j.body);
+          N(j.body);
           let X = '<h2>Estructura SEO</h2><ul style="font-family:monospace">';
-          B.forEach((J) => {
-            X += `<li style="margin-left:${J.depth * 20}px"><b>${J.tag}</b>: ${J.text}</li>`;
-          }), X += "</ul>", r.document.body.innerHTML = X, r.document.close();
+          B.forEach((H) => {
+            X += `<li style="margin-left:${H.depth * 20}px"><b>${H.tag}</b>: ${H.text}</li>`;
+          }), X += "</ul>", a.document.body.innerHTML = X, a.document.close();
         });
       },
       importConfig: b,
@@ -119,13 +119,13 @@ const Ce = W({
             "Content-Type": "application/json"
           },
           body: g
-        }).then((l) => l.text()).then((l) => {
-          const r = window.open("", "Preview", "width='100vw',height='100vh'");
-          r && (r.document.body.innerHTML = l, r.document.querySelectorAll("script").forEach((j) => {
-            var U;
-            const B = r.document.createElement("script");
-            j.src ? B.src = j.src : B.textContent = j.textContent, (U = j.parentNode) == null || U.replaceChild(B, j);
-          }), r.document.close());
+        }).then((n) => n.text()).then((n) => {
+          const a = window.open("", "Preview", "width='100vw',height='100vh'");
+          a && (a.document.body.innerHTML = n, a.document.querySelectorAll("script").forEach((j) => {
+            var N;
+            const B = a.document.createElement("script");
+            j.src ? B.src = j.src : B.textContent = j.textContent, (N = j.parentNode) == null || N.replaceChild(B, j);
+          }), a.document.close());
         });
       },
       importFunction: () => {
@@ -136,8 +136,8 @@ const Ce = W({
       loadFromLocalStorage: () => {
         const P = e.inputId ? `pageBuilderConfig_${e.inputId}` : "pageBuilderConfig", g = localStorage.getItem(P);
         if (g && e.importConfigurationFunction) {
-          const l = JSON.parse(g);
-          e.importConfigurationFunction(l);
+          const n = JSON.parse(g);
+          e.importConfigurationFunction(n);
         }
       },
       toggleExpandScreen: () => {
@@ -157,10 +157,10 @@ const Ce = W({
 }, ke = { ref: "componentRoot" }, Se = {
   key: 0,
   class: "flex justify-end items-center w-full p-3 gap-3"
-}, Fe = { class: "flex justify-end items-center p-2 gap-3 bg-gradient-to-l from-lime-50 to-green-100 border border-lime-400 rounded-lg w-auto" }, Pe = { class: "flex justify-between gap-3 px-5 py-3 bg-white mx-3 rounded-xl border border-slate-200 mb-6 sticky top-2 z-9999 shadow-lg backdrop-blur-sm" }, je = { class: "flex gap-2" }, Me = { class: "flex gap-2" }, Ie = ["value"], Ae = ["value"], Be = { value: "full" }, Ee = { value: "1/2" }, Te = { value: "1/3" }, De = { value: "2/3" }, Oe = { value: "1/4" }, Re = { value: "3/4" }, Ne = { value: "1/5" }, Ve = { value: "2/5" }, Ue = { value: "3/5" }, ze = { value: "4/5" }, qe = { key: 0 }, Le = { key: 1 }, Ge = { class: "flex items-center gap-2" }, Je = {
+}, Fe = { class: "flex justify-end items-center p-2 gap-3 bg-gradient-to-l from-lime-50 to-green-100 border border-lime-400 rounded-lg w-auto" }, Pe = { class: "flex justify-between gap-3 px-5 py-3 bg-white mx-3 rounded-xl border border-slate-200 mb-6 sticky top-2 z-9999 shadow-lg backdrop-blur-sm" }, je = { class: "flex gap-2" }, Me = { class: "flex gap-2" }, Ie = ["value"], Ae = ["value"], Be = { value: "full" }, Ee = { value: "1/2" }, Te = { value: "1/3" }, De = { value: "2/3" }, Oe = { value: "1/4" }, Re = { value: "3/4" }, Ve = { value: "1/5" }, ze = { value: "2/5" }, Ne = { value: "3/5" }, Ue = { value: "4/5" }, qe = { key: 0 }, Le = { key: 1 }, Ge = { class: "flex items-center gap-2" }, He = {
   key: 1,
   class: "bg-white border border-slate-200 rounded-2xl p-5 mx-3 mb-6 shadow-lg"
-}, He = { class: "flex flex-row gap-4 w-full" }, We = { class: "border border-slate-200 rounded-xl p-5 w-full bg-gradient-to-br from-slate-50 to-white" }, Ye = { class: "flex flex-col gap-3 border-b border-slate-200 pb-4 w-full" }, Ke = { class: "mb-3" }, Qe = { class: "flex items-center gap-3 cursor-pointer group" }, Xe = { class: "mb-3" }, Ze = { class: "flex items-center gap-3 cursor-pointer group" }, _e = { class: "mb-3" }, et = { class: "mb-3" }, tt = { class: "mb-3" }, ot = { class: "border border-slate-200 rounded-xl p-5 w-full bg-gradient-to-br from-slate-50 to-white" }, nt = { class: "flex justify-between items-center mb-4" }, lt = { class: "flex flex-col gap-3 border-b border-slate-200 pb-4 w-full" }, at = { class: "mb-3" }, rt = { class: "mb-3" }, st = { class: "mb-3" };
+}, Je = { class: "flex flex-row gap-4 w-full" }, We = { class: "border border-slate-200 rounded-xl p-5 w-full bg-gradient-to-br from-slate-50 to-white" }, Ye = { class: "flex flex-col gap-3 border-b border-slate-200 pb-4 w-full" }, Ke = { class: "mb-3" }, Qe = { class: "flex items-center gap-3 cursor-pointer group" }, Xe = { class: "mb-3" }, Ze = { class: "flex items-center gap-3 cursor-pointer group" }, _e = { class: "mb-3" }, et = { class: "mb-3" }, tt = { class: "mb-3" }, ot = { class: "border border-slate-200 rounded-xl p-5 w-full bg-gradient-to-br from-slate-50 to-white" }, nt = { class: "flex justify-between items-center mb-4" }, lt = { class: "flex flex-col gap-3 border-b border-slate-200 pb-4 w-full" }, at = { class: "mb-3" }, rt = { class: "mb-3" }, st = { class: "mb-3" };
 function it(e, o, b, $, p, u) {
   return i(), d("div", ke, [
     e.debugMode ? (i(), d("div", Se, [
@@ -219,7 +219,7 @@ function it(e, o, b, $, p, u) {
           onChange: o[6] || (o[6] = (s) => e.$emit("update:sectionSelected", s.target.value)),
           class: "bg-white border border-slate-200 rounded-lg px-3 py-1.5 cursor-pointer text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition-colors"
         }, [
-          (i(!0), d(A, null, N(e.availableSections, (s, m) => (i(), d("option", {
+          (i(!0), d(A, null, V(e.availableSections, (s, m) => (i(), d("option", {
             key: m,
             value: s
           }, v(s), 9, Ae))), 128))
@@ -238,12 +238,12 @@ function it(e, o, b, $, p, u) {
           t("option", De, "Sección " + v(e.sectionSelected) + " ocupa 2/3 del ancho de la página", 1),
           t("option", Oe, "Sección " + v(e.sectionSelected) + " ocupa 1/4 del ancho de la página", 1),
           t("option", Re, "Sección " + v(e.sectionSelected) + " ocupa 3/4 del ancho de la página", 1),
-          t("option", Ne, "Sección " + v(e.sectionSelected) + " ocupa 1/5 del ancho de la página", 1),
-          t("option", Ve, "Sección " + v(e.sectionSelected) + " ocupa 2/5 del ancho de la página", 1),
-          t("option", Ue, "Sección " + v(e.sectionSelected) + " ocupa 3/5 del ancho de la página", 1),
-          t("option", ze, "Sección " + v(e.sectionSelected) + " ocupa 4/5 del ancho de la página", 1)
+          t("option", Ve, "Sección " + v(e.sectionSelected) + " ocupa 1/5 del ancho de la página", 1),
+          t("option", ze, "Sección " + v(e.sectionSelected) + " ocupa 2/5 del ancho de la página", 1),
+          t("option", Ne, "Sección " + v(e.sectionSelected) + " ocupa 3/5 del ancho de la página", 1),
+          t("option", Ue, "Sección " + v(e.sectionSelected) + " ocupa 4/5 del ancho de la página", 1)
         ], 512), [
-          [H, e.sectionWidth]
+          [J, e.sectionWidth]
         ]),
         t("button", {
           type: "button",
@@ -283,8 +283,8 @@ function it(e, o, b, $, p, u) {
         }, "◳")
       ])
     ]),
-    e.showAdvancedConfig && e.parametersPageConfiguration ? (i(), d("div", Je, [
-      t("div", He, [
+    e.showAdvancedConfig && e.parametersPageConfiguration ? (i(), d("div", He, [
+      t("div", Je, [
         t("div", We, [
           o[38] || (o[38] = t("h2", { class: "text-lg font-bold mb-4 text-slate-700" }, "Configuración Avanzada", -1)),
           o[39] || (o[39] = t("h3", { class: "font-semibold mb-3 text-slate-600" }, "Configuración Global", -1)),
@@ -389,7 +389,7 @@ function it(e, o, b, $, p, u) {
                 t("option", { value: "index, follow" }, "Index Follow", -1),
                 t("option", { value: "noindex, nofollow" }, "Noindex Nofollow", -1)
               ])], 544), [
-                [H, e.parametersPageConfiguration.seo.robots]
+                [J, e.parametersPageConfiguration.seo.robots]
               ])
             ]),
             t("div", rt, [
@@ -470,7 +470,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           }, "❌")
         ]),
         t("form", null, [
-          (i(!0), d(A, null, N(e.object.fields, (u, s) => (i(), d("div", {
+          (i(!0), d(A, null, V(e.object.fields, (u, s) => (i(), d("div", {
             key: s,
             class: "mb-4"
           }, [
@@ -478,7 +478,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
               for: `${e.object.id}-${u.name}-${s}`,
               class: "block text-sm font-medium mb-1"
             }, [
-              T(v(u.label) + " ", 1),
+              E(v(u.label) + " ", 1),
               u.mandatory ? (i(), d("span", bt, "*")) : S("", !0)
             ], 8, mt),
             u.type === "text" ? (i(), d("input", {
@@ -532,7 +532,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
                 disabled: "",
                 value: ""
               }, "Seleccione una opción", -1)),
-              (i(!0), d(A, null, N(u.options || [], (m, w) => (i(), d("option", {
+              (i(!0), d(A, null, V(u.options || [], (m, w) => (i(), d("option", {
                 key: w,
                 value: m
               }, v(m), 9, vt))), 128))
@@ -625,97 +625,97 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
     }), s = Y(() => {
       if (!$.value)
         return [];
-      const c = u.value.find((n) => n.id === $.value);
+      const c = u.value.find((l) => l.id === $.value);
       return c ? c.filters : [];
-    }), m = (c, n) => {
-      p.value[c] = n;
+    }), m = (c, l) => {
+      p.value[c] = l;
     }, w = () => {
       p.value = {};
     }, I = async () => {
       b.value = !0;
-      const c = u.value.find((a) => a.id === $.value);
+      const c = u.value.find((r) => r.id === $.value);
       if (!c) {
         console.error("Origen no encontrado"), b.value = !1;
         return;
       }
-      const n = new URL(c.apiUrl);
-      Object.keys(p.value).forEach((a) => {
-        p.value[a] && n.searchParams.append(a, p.value[a]);
+      const l = new URL(c.apiUrl);
+      Object.keys(p.value).forEach((r) => {
+        p.value[r] && l.searchParams.append(r, p.value[r]);
       });
       try {
-        const f = await (await fetch(n.toString(), {
+        const f = await (await fetch(l.toString(), {
           method: "GET",
           headers: {
             Accept: "text/xml, application/xml"
           }
-        })).text(), P = new DOMParser().parseFromString(f, "text/xml"), g = Array.from(P.querySelectorAll("item")).map((l) => {
-          const r = {};
-          return Array.from(l.children).forEach((F) => {
+        })).text(), P = new DOMParser().parseFromString(f, "text/xml"), g = Array.from(P.querySelectorAll("item")).map((n) => {
+          const a = {};
+          return Array.from(n.children).forEach((F) => {
             F.children.length > 0 ? Array.from(F.children).forEach((j) => {
               const B = `${F.nodeName}_${j.nodeName}`;
-              r[B] = j.textContent || "";
-            }) : r[F.nodeName] = F.textContent || "";
-          }), r;
+              a[B] = j.textContent || "";
+            }) : a[F.nodeName] = F.textContent || "";
+          }), a;
         });
         o.onSubmit(g);
-      } catch (a) {
-        console.error("Error al aplicar filtros:", a), o.onSubmit([]);
+      } catch (r) {
+        console.error("Error al aplicar filtros:", r), o.onSubmit([]);
       } finally {
-        const a = {
+        const r = {
           name: c.name,
-          url: n.toString()
+          url: l.toString()
         };
-        o.updateFeedCriteria(a), b.value = !1;
+        o.updateFeedCriteria(r), b.value = !1;
       }
     };
-    return (c, n) => (i(), d("div", ht, [
+    return (c, l) => (i(), d("div", ht, [
       t("div", null, [
-        n[1] || (n[1] = t("label", { class: "block text-sm font-semibold text-slate-600 mb-2" }, "Seleccionar origen:", -1)),
+        l[1] || (l[1] = t("label", { class: "block text-sm font-semibold text-slate-600 mb-2" }, "Seleccionar origen:", -1)),
         O(t("select", {
-          "onUpdate:modelValue": n[0] || (n[0] = (a) => $.value = a),
+          "onUpdate:modelValue": l[0] || (l[0] = (r) => $.value = r),
           class: "w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg shadow-sm focus:border-emerald-400 focus:ring-2 focus:ring-emerald-500/20 transition-all duration-200 disabled:bg-slate-100 disabled:cursor-not-allowed cursor-pointer",
           onChange: w,
           disabled: b.value
         }, [
-          (i(!0), d(A, null, N(u.value, (a) => (i(), d("option", {
-            key: a.id,
-            value: a.id
-          }, v(a.name), 9, yt))), 128))
+          (i(!0), d(A, null, V(u.value, (r) => (i(), d("option", {
+            key: r.id,
+            value: r.id
+          }, v(r.name), 9, yt))), 128))
         ], 40, wt), [
-          [H, $.value]
+          [J, $.value]
         ])
       ]),
       t("div", Ct, [
         s.value.length > 0 ? (i(), d("div", $t, [
-          (i(!0), d(A, null, N(s.value, (a) => (i(), d("div", {
-            key: a.id,
+          (i(!0), d(A, null, V(s.value, (r) => (i(), d("div", {
+            key: r.id,
             class: "bg-gradient-to-br from-slate-50 to-white p-4 rounded-xl border border-slate-200"
           }, [
-            t("label", kt, v(a.label) + ":", 1),
-            a.type === "select" ? (i(), d("select", {
+            t("label", kt, v(r.label) + ":", 1),
+            r.type === "select" ? (i(), d("select", {
               key: 0,
               class: "w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg shadow-sm focus:border-emerald-400 focus:ring-2 focus:ring-emerald-500/20 transition-all duration-200 disabled:bg-slate-100 disabled:cursor-not-allowed cursor-pointer",
-              onChange: (f) => m(a.id, f.target.value),
+              onChange: (f) => m(r.id, f.target.value),
               disabled: b.value
             }, [
-              n[2] || (n[2] = t("option", { value: "" }, "Seleccionar...", -1)),
-              (i(!0), d(A, null, N(a.options, (f) => (i(), d("option", {
+              l[2] || (l[2] = t("option", { value: "" }, "Seleccionar...", -1)),
+              (i(!0), d(A, null, V(r.options, (f) => (i(), d("option", {
                 key: f,
                 value: f
               }, v(f), 9, Ft))), 128))
-            ], 40, St)) : a.type === "date" ? (i(), d("input", {
+            ], 40, St)) : r.type === "date" ? (i(), d("input", {
               key: 1,
               type: "date",
               class: "w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg shadow-sm focus:border-emerald-400 focus:ring-2 focus:ring-emerald-500/20 transition-all duration-200 disabled:bg-slate-100 disabled:cursor-not-allowed",
-              onChange: (f) => m(a.id, f.target.value),
+              onChange: (f) => m(r.id, f.target.value),
               disabled: b.value
-            }, null, 40, Pt)) : a.type === "text" ? (i(), d("input", {
+            }, null, 40, Pt)) : r.type === "text" ? (i(), d("input", {
               key: 2,
               type: "text",
               class: "w-full px-3 py-2.5 bg-white border border-slate-200 rounded-lg shadow-sm focus:border-emerald-400 focus:ring-2 focus:ring-emerald-500/20 transition-all duration-200 disabled:bg-slate-100 disabled:cursor-not-allowed",
-              onInput: (f) => m(a.id, f.target.value),
+              onInput: (f) => m(r.id, f.target.value),
               disabled: b.value,
-              placeholder: a.label
+              placeholder: r.label
             }, null, 40, jt)) : S("", !0)
           ]))), 128))
         ])) : S("", !0),
@@ -726,15 +726,15 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           disabled: b.value
         }, [
           b.value ? (i(), d("span", It, "⏳")) : (i(), d("span", At, "🔍")),
-          T(" " + v(b.value ? "Conectando con el feed..." : "Aplicar Filtros"), 1)
+          E(" " + v(b.value ? "Conectando con el feed..." : "Aplicar Filtros"), 1)
         ], 8, Mt)
       ])
     ]));
   }
-}), Et = { class: "fixed top-0 left-0 w-full h-full bg-gradient-to-br from-slate-50 via-white to-slate-100 flex flex-col z-9999 p-6" }, Tt = { class: "w-full flex justify-between items-center mb-4" }, Dt = { class: "w-full flex-1 bg-white/60 rounded-2xl flex gap-5 p-5 overflow-hidden backdrop-blur-sm border border-slate-200 shadow-inner" }, Ot = { class: "flex-1 flex flex-col gap-5" }, Rt = { class: "flex flex-col bg-white rounded-2xl shadow-lg border border-slate-200 p-5 overflow-y-auto" }, Nt = {
+}), Et = { class: "fixed top-0 left-0 w-full h-full bg-gradient-to-br from-slate-50 via-white to-slate-100 flex flex-col z-9999 p-6" }, Tt = { class: "w-full flex justify-between items-center mb-4" }, Dt = { class: "w-full flex-1 bg-white/60 rounded-2xl flex gap-5 p-5 overflow-hidden backdrop-blur-sm border border-slate-200 shadow-inner" }, Ot = { class: "flex-1 flex flex-col gap-5" }, Rt = { class: "flex flex-col bg-white rounded-2xl shadow-lg border border-slate-200 p-5 overflow-y-auto" }, Vt = {
   key: 0,
   class: "mb-4 p-4 bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl border border-emerald-200 w-full flex-shrink-0 text-sm font-medium text-emerald-700"
-}, Vt = { class: "list-none mt-3 space-y-2 text-slate-600" }, Ut = { class: "flex items-start gap-2" }, zt = { class: "font-semibold text-slate-700" }, qt = { class: "flex items-start gap-2" }, Lt = { class: "font-semibold text-slate-700" }, Gt = { class: "font-semibold text-slate-700" }, Jt = { class: "flex items-start gap-2" }, Ht = { class: "flex flex-wrap gap-2 mt-1" }, Wt = { class: "font-semibold text-slate-700" }, Yt = { class: "text-emerald-600" }, Kt = { class: "flex flex-col gap-4 w-full" }, Qt = { class: "flex items-center gap-3 cursor-pointer group" }, Xt = {
+}, zt = { class: "list-none mt-3 space-y-2 text-slate-600" }, Nt = { class: "flex items-start gap-2" }, Ut = { class: "font-semibold text-slate-700" }, qt = { class: "flex items-start gap-2" }, Lt = { class: "font-semibold text-slate-700" }, Gt = { class: "font-semibold text-slate-700" }, Ht = { class: "flex items-start gap-2" }, Jt = { class: "flex flex-wrap gap-2 mt-1" }, Wt = { class: "font-semibold text-slate-700" }, Yt = { class: "text-emerald-600" }, Kt = { class: "flex flex-col gap-4 w-full" }, Qt = { class: "flex items-center gap-3 cursor-pointer group" }, Xt = {
   key: 0,
   class: "flex flex-col gap-4 ml-8 p-4 bg-gradient-to-br from-slate-50 to-white rounded-xl border border-slate-200"
 }, Zt = { class: "flex flex-col gap-2" }, _t = { class: "flex flex-col gap-2" }, eo = { class: "flex-1 flex flex-col bg-white rounded-2xl shadow-lg border border-slate-200 p-5 overflow-y-auto" }, to = { class: "flex-1 flex flex-col bg-white rounded-2xl shadow-lg border border-slate-200 p-5 overflow-y-auto" }, oo = {
@@ -777,13 +777,13 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       b.value = g;
     }, c = (g) => {
       $.value = g;
-    }, n = () => {
-      const g = o.object.fields.filter((l) => l.mappedTo).map((l) => {
-        var r;
+    }, l = () => {
+      const g = o.object.fields.filter((n) => n.mappedTo).map((n) => {
+        var a;
         return {
-          fieldName: l.name,
-          mappedTo: l.mappedTo,
-          value: ((r = $.value) == null ? void 0 : r[l.mappedTo]) ?? null
+          fieldName: n.name,
+          mappedTo: n.mappedTo,
+          value: ((a = $.value) == null ? void 0 : a[n.mappedTo]) ?? null
         };
       });
       w.value = {
@@ -791,9 +791,9 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         dynamicUpdate: p.value,
         elementCount: u.value,
         orientation: s.value,
-        mapping: g.map(({ fieldName: l, mappedTo: r }) => ({ fieldName: l, mappedTo: r }))
+        mapping: g.map(({ fieldName: n, mappedTo: a }) => ({ fieldName: n, mappedTo: a }))
       }, o.updateObjectByFeedContent && o.updateObjectByFeedContent(g, w.value), o.toggleFeedSection();
-    }, a = (g) => {
+    }, r = (g) => {
       m.value = g;
     }, f = () => {
       var g;
@@ -810,80 +810,80 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         dynamicUpdate: p.value,
         elementCount: u.value,
         orientation: s.value
-      }, o.updateObjectByFeedContent && o.updateObjectByFeedContent(((g = w.value.mapping) == null ? void 0 : g.map((l) => ({
-        fieldName: l.fieldName,
-        mappedTo: l.mappedTo,
+      }, o.updateObjectByFeedContent && o.updateObjectByFeedContent(((g = w.value.mapping) == null ? void 0 : g.map((n) => ({
+        fieldName: n.fieldName,
+        mappedTo: n.mappedTo,
         value: null
       }))) || [], w.value));
     };
     return ae(() => {
       f();
-    }), (g, l) => (i(), d("div", Et, [
+    }), (g, n) => (i(), d("div", Et, [
       t("div", Tt, [
-        l[5] || (l[5] = t("h2", { class: "text-2xl font-bold bg-gradient-to-r from-slate-700 to-slate-500 bg-clip-text text-transparent flex items-center gap-3" }, [
-          t("span", { class: "text-3xl" }, "🍺"),
-          T(" Configuración de Feed ")
+        n[5] || (n[5] = t("h2", { class: "text-xl font-bold bg-gradient-to-r from-slate-700 to-slate-500 bg-clip-text text-transparent flex items-center gap-3" }, [
+          t("span", { class: "text-xl" }, "🍺"),
+          E(" Configuración de Feed ")
         ], -1)),
         t("button", {
-          onClick: l[0] || (l[0] = //@ts-ignore
-          (...r) => e.toggleFeedSection && e.toggleFeedSection(...r)),
+          onClick: n[0] || (n[0] = //@ts-ignore
+          (...a) => e.toggleFeedSection && e.toggleFeedSection(...a)),
           class: "cursor-pointer group w-10 h-10 flex items-center justify-center bg-white hover:bg-red-50 border border-red-200 hover:border-red-400 text-red-400 hover:text-red-600 rounded-full font-semibold shadow-sm hover:shadow-lg transition-all duration-200"
-        }, [...l[4] || (l[4] = [
+        }, [...n[4] || (n[4] = [
           t("span", { class: "text-lg" }, "✕", -1)
         ])])
       ]),
       t("div", Dt, [
         t("div", Ot, [
           t("div", Rt, [
-            w.value && w.value.dynamicUpdate ? (i(), d("div", Nt, [
+            w.value && w.value.dynamicUpdate ? (i(), d("div", Vt, [
               t("div", { class: "flex justify-between items-start" }, [
-                l[8] || (l[8] = t("p", { class: "flex items-center gap-2" }, [
+                n[8] || (n[8] = t("p", { class: "flex items-center gap-2" }, [
                   t("span", { class: "text-emerald-500" }, "✓"),
-                  T(" Hay un criterio de feed establecido: ")
+                  E(" Hay un criterio de feed establecido: ")
                 ], -1)),
                 t("div", { class: "flex items-center gap-2" }, [
                   t("button", {
                     onClick: P,
                     class: "cursor-pointer px-3 py-1.5 bg-white hover:bg-emerald-50 text-emerald-500 hover:text-emerald-600 border border-emerald-200 hover:border-emerald-300 rounded-lg text-xs font-semibold transition-all duration-200 flex items-center gap-1 shadow-sm"
-                  }, [...l[6] || (l[6] = [
+                  }, [...n[6] || (n[6] = [
                     t("span", null, "💾", -1),
-                    T(" Guardar ", -1)
+                    E(" Guardar ", -1)
                   ])]),
                   t("button", {
                     onClick: R,
                     class: "cursor-pointer px-3 py-1.5 bg-white hover:bg-red-50 text-red-500 hover:text-red-600 border border-red-200 hover:border-red-300 rounded-lg text-xs font-semibold transition-all duration-200 flex items-center gap-1 shadow-sm"
-                  }, [...l[7] || (l[7] = [
+                  }, [...n[7] || (n[7] = [
                     t("span", null, "✕", -1),
-                    T(" Borrar ", -1)
+                    E(" Borrar ", -1)
                   ])])
                 ])
               ]),
-              t("ul", Vt, [
-                t("li", Ut, [
-                  l[9] || (l[9] = t("span", { class: "text-emerald-400" }, "→", -1)),
-                  l[10] || (l[10] = T(" Conectar con ", -1)),
-                  t("span", zt, v(w.value.name), 1)
+              t("ul", zt, [
+                t("li", Nt, [
+                  n[9] || (n[9] = t("span", { class: "text-emerald-400" }, "→", -1)),
+                  n[10] || (n[10] = E(" Conectar con ", -1)),
+                  t("span", Ut, v(w.value.name), 1)
                 ]),
                 t("li", qt, [
-                  l[11] || (l[11] = t("span", { class: "text-emerald-400" }, "→", -1)),
-                  l[12] || (l[12] = T(" Recuperar ", -1)),
+                  n[11] || (n[11] = t("span", { class: "text-emerald-400" }, "→", -1)),
+                  n[12] || (n[12] = E(" Recuperar ", -1)),
                   t("span", Lt, v(w.value.elementCount), 1),
-                  l[13] || (l[13] = T(" items (", -1)),
+                  n[13] || (n[13] = E(" items (", -1)),
                   t("span", Gt, v(w.value.orientation), 1),
-                  l[14] || (l[14] = T(")", -1))
+                  n[14] || (n[14] = E(")", -1))
                 ]),
-                t("li", Jt, [
-                  l[17] || (l[17] = t("span", { class: "text-emerald-400" }, "→", -1)),
+                t("li", Ht, [
+                  n[17] || (n[17] = t("span", { class: "text-emerald-400" }, "→", -1)),
                   t("div", null, [
-                    l[16] || (l[16] = T(" Mapeo: ", -1)),
-                    t("div", Ht, [
-                      (i(!0), d(A, null, N(w.value.mapping, (r, F) => (i(), d("span", {
+                    n[16] || (n[16] = E(" Mapeo: ", -1)),
+                    t("div", Jt, [
+                      (i(!0), d(A, null, V(w.value.mapping, (a, F) => (i(), d("span", {
                         key: F,
                         class: "inline-flex items-center gap-1 px-2 py-0.5 bg-white rounded-full text-xs border border-slate-200"
                       }, [
-                        t("span", Wt, v(r.fieldName), 1),
-                        l[15] || (l[15] = t("span", { class: "text-slate-400" }, "←", -1)),
-                        t("span", Yt, v(r.mappedTo), 1)
+                        t("span", Wt, v(a.fieldName), 1),
+                        n[15] || (n[15] = t("span", { class: "text-slate-400" }, "←", -1)),
+                        t("span", Yt, v(a.mappedTo), 1)
                       ]))), 128))
                     ])
                   ])
@@ -894,19 +894,28 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
               t("label", Qt, [
                 O(t("input", {
                   type: "checkbox",
-                  "onUpdate:modelValue": l[1] || (l[1] = (r) => p.value = r),
+                  "onUpdate:modelValue": n[1] || (n[1] = (a) => p.value = a),
                   class: "w-5 h-5 text-emerald-500 border-2 border-slate-300 rounded focus:ring-emerald-500 cursor-pointer"
                 }, null, 512), [
                   [ne, p.value]
                 ]),
-                l[18] || (l[18] = t("span", { class: "font-medium text-slate-700 group-hover:text-slate-900 transition-colors" }, "Actualizar dinámicamente según criterios del feed", -1))
+                n[18] || (n[18] = t("span", { class: "font-medium text-slate-700 group-hover:text-slate-900 transition-colors" }, "Actualizar dinámicamente según criterios del feed", -1))
               ]),
               p.value ? (i(), d("div", Xt, [
+                n[22] || (n[22] = t("div", { class: "p-3 bg-gradient-to-r from-amber-50 to-yellow-50 rounded-lg border border-amber-200 text-sm text-amber-700" }, [
+                  t("div", { class: "flex items-start gap-2" }, [
+                    t("span", { class: "text-amber-500 mt-0.5" }, "ℹ️"),
+                    t("p", null, [
+                      t("strong", null, "Nota:"),
+                      E(" Los valores que verás al relacionar campos son solo un ejemplo de referencia. En el momento de renderizar, se mostrarán los datos reales obtenidos del feed según los criterios configurados. ")
+                    ])
+                  ])
+                ], -1)),
                 t("div", Zt, [
-                  l[19] || (l[19] = t("label", { class: "text-sm font-semibold text-slate-600" }, "Cantidad de elementos:", -1)),
+                  n[19] || (n[19] = t("label", { class: "text-sm font-semibold text-slate-600" }, "Cantidad de elementos:", -1)),
                   O(t("input", {
                     type: "number",
-                    "onUpdate:modelValue": l[2] || (l[2] = (r) => u.value = r),
+                    "onUpdate:modelValue": n[2] || (n[2] = (a) => u.value = a),
                     min: "1",
                     class: "w-32 px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition-colors"
                   }, null, 512), [
@@ -919,99 +928,99 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
                   ])
                 ]),
                 t("div", _t, [
-                  l[21] || (l[21] = t("label", { class: "text-sm font-semibold text-slate-600" }, "Orientación:", -1)),
+                  n[21] || (n[21] = t("label", { class: "text-sm font-semibold text-slate-600" }, "Orientación:", -1)),
                   O(t("select", {
-                    "onUpdate:modelValue": l[3] || (l[3] = (r) => s.value = r),
+                    "onUpdate:modelValue": n[3] || (n[3] = (a) => s.value = a),
                     class: "w-48 px-3 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-white transition-colors cursor-pointer"
-                  }, [...l[20] || (l[20] = [
+                  }, [...n[20] || (n[20] = [
                     t("option", {
                       value: "horizontal",
                       selected: ""
                     }, "Horizontal", -1),
                     t("option", { value: "vertical" }, "Vertical", -1)
                   ])], 512), [
-                    [H, s.value]
+                    [J, s.value]
                   ])
                 ])
               ])) : S("", !0)
             ])
           ]),
           t("div", eo, [
-            l[22] || (l[22] = t("h3", { class: "text-lg font-bold mb-5 text-slate-700 pb-2 flex items-center gap-2 border-b border-slate-100" }, [
+            n[23] || (n[23] = t("h3", { class: "text-lg font-bold mb-5 text-slate-700 pb-2 flex items-center gap-2 border-b border-slate-100" }, [
               t("span", { class: "text-xl" }, "🔍"),
-              T(" Orígenes y Filtros ")
+              E(" Orígenes y Filtros ")
             ], -1)),
             L(Bt, {
               onSubmit: I,
-              updateFeedCriteria: a,
+              updateFeedCriteria: r,
               isProduction: e.isProduction
             }, null, 8, ["isProduction"])
           ])
         ]),
         t("div", to, [
-          l[24] || (l[24] = t("h3", { class: "text-lg font-bold mb-5 text-slate-700 pb-2 flex items-center gap-2 border-b border-slate-100" }, [
+          n[25] || (n[25] = t("h3", { class: "text-lg font-bold mb-5 text-slate-700 pb-2 flex items-center gap-2 border-b border-slate-100" }, [
             t("span", { class: "text-xl" }, "📰"),
-            T(" Noticias ")
+            E(" Contenidos ")
           ], -1)),
-          !b.value || b.value.length === 0 ? (i(), d("div", oo, [...l[23] || (l[23] = [
+          !b.value || b.value.length === 0 ? (i(), d("div", oo, [...n[24] || (n[24] = [
             t("span", { class: "text-5xl mb-3 opacity-50" }, "📭", -1),
-            t("p", { class: "text-sm font-medium" }, "No hay noticias disponibles", -1),
-            t("p", { class: "text-xs mt-1 text-slate-300" }, "Selecciona un origen para cargar noticias", -1)
+            t("p", { class: "text-sm font-medium" }, "No hay contenidos disponibles", -1),
+            t("p", { class: "text-xs mt-1 text-slate-300" }, "Selecciona un origen para cargar contenidos", -1)
           ])])) : (i(), d("ul", no, [
-            (i(!0), d(A, null, N(b.value, (r, F) => (i(), d("li", {
+            (i(!0), d(A, null, V(b.value, (a, F) => (i(), d("li", {
               key: F,
               class: "p-4 bg-gradient-to-br from-slate-50 to-white rounded-xl shadow-sm hover:shadow-md cursor-pointer hover:scale-[1.01] transition-all duration-200 border border-slate-200 hover:border-emerald-300",
-              onClick: (j) => c(r)
+              onClick: (j) => c(a)
             }, [
-              t("h4", ao, v(r.title || r.titulo || "Sin título"), 1),
-              t("p", ro, v(r.description || r.descripcion || r.content || "Sin descripción"), 1)
+              t("h4", ao, v(a.title || a.titulo || "Sin título"), 1),
+              t("p", ro, v(a.description || a.descripcion || a.content || "Sin descripción"), 1)
             ], 8, lo))), 128))
           ]))
         ]),
         t("div", so, [
-          l[30] || (l[30] = t("h3", { class: "text-lg font-bold mb-5 text-slate-700 pb-2 flex items-center gap-2 border-b border-slate-100" }, [
+          n[31] || (n[31] = t("h3", { class: "text-lg font-bold mb-5 text-slate-700 pb-2 flex items-center gap-2 border-b border-slate-100" }, [
             t("span", { class: "text-xl" }, "🔗"),
-            T(" Relacionar Noticia ")
+            E(" Relacionar Contenido ")
           ], -1)),
           $.value ? (i(), d("div", uo, [
-            (i(!0), d(A, null, N(e.object.fields, (r, F) => (i(), d("div", {
+            (i(!0), d(A, null, V(e.object.fields, (a, F) => (i(), d("div", {
               key: F,
               class: "p-4 bg-gradient-to-br from-slate-50 to-white rounded-xl border border-slate-200"
             }, [
               t("label", co, [
-                l[26] || (l[26] = t("span", { class: "text-base" }, "⚙️", -1)),
-                T(" " + v(r.name), 1)
+                n[27] || (n[27] = t("span", { class: "text-base" }, "⚙️", -1)),
+                E(" " + v(a.name), 1)
               ]),
               O(t("select", {
-                "onUpdate:modelValue": (j) => r.mappedTo = j,
+                "onUpdate:modelValue": (j) => a.mappedTo = j,
                 class: "w-full px-3 py-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition-all bg-white cursor-pointer"
               }, [
-                l[27] || (l[27] = t("option", { value: "" }, "-- Seleccionar campo --", -1)),
-                (i(!0), d(A, null, N($.value, (j, B) => (i(), d("option", {
+                n[28] || (n[28] = t("option", { value: "" }, "-- Seleccionar campo --", -1)),
+                (i(!0), d(A, null, V($.value, (j, B) => (i(), d("option", {
                   key: B,
                   value: B
                 }, v(B), 9, bo))), 128))
               ], 8, mo), [
-                [H, r.mappedTo]
+                [J, a.mappedTo]
               ]),
-              r.mappedTo ? (i(), d("div", go, [
-                l[28] || (l[28] = t("span", { class: "text-xs font-semibold text-emerald-600 uppercase tracking-wide" }, "Vista previa:", -1)),
-                t("p", fo, v($.value[r.mappedTo]), 1)
+              a.mappedTo ? (i(), d("div", go, [
+                n[29] || (n[29] = t("span", { class: "text-xs font-semibold text-emerald-600 uppercase tracking-wide" }, "Vista previa:", -1)),
+                t("p", fo, v($.value[a.mappedTo]), 1)
               ])) : S("", !0)
             ]))), 128)),
             t("button", {
-              onClick: n,
+              onClick: l,
               class: "cursor-pointer w-full mt-4 px-5 py-3 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-[1.01] flex items-center justify-center gap-2"
-            }, [...l[29] || (l[29] = [
+            }, [...n[30] || (n[30] = [
               t("span", { class: "text-lg" }, "✓", -1),
               t("span", null, "Alimentar el componente", -1)
             ])])
-          ])) : (i(), d("div", io, [...l[25] || (l[25] = [
+          ])) : (i(), d("div", io, [...n[26] || (n[26] = [
             t("span", { class: "text-5xl mb-3 opacity-50" }, "👆", -1),
             t("p", { class: "text-sm font-medium text-center" }, [
-              T("Selecciona una noticia"),
+              E("Selecciona un contenido"),
               t("br"),
-              T("para relacionar")
+              E("para relacionar")
             ], -1)
           ])]))
         ])
@@ -1030,14 +1039,14 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
 }, Fo = { class: "mt-2 flex items-center" }, Po = { class: "font-medium text-slate-700" }, jo = { key: 0 }, Mo = { key: 1 }, Io = {
   key: 0,
   class: "mt-3 p-3 bg-gradient-to-r from-sky-50 to-blue-50 rounded-lg text-sm text-slate-600 border border-sky-100"
-}, Ao = { class: "mt-3 flex gap-1.5 flex-wrap" }, Bo = { class: "absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-100 bg-gradient-to-br from-white/90 via-slate-50/95 to-slate-100/90 backdrop-blur-[2px] z-99 transition-all duration-300 rounded-xl" }, Eo = { class: "flex justify-center h-full items-center p-4 gap-3" }, To = {
+}, Ao = { class: "mt-3 flex gap-1.5 flex-wrap" }, Bo = { class: "absolute top-0 left-0 w-full h-full opacity-0 group-hover:opacity-100 bg-gradient-to-br from-white/90 via-slate-50/95 to-slate-100/90 backdrop-blur-[2px] z-99 transition-all duration-300 rounded-xl" }, Eo = { class: "absolute top-2 right-2 group/info z-10" }, To = { class: "absolute top-6 right-0 w-64 p-3 bg-white rounded-lg shadow-lg border border-slate-200 opacity-0 invisible group-hover/info:opacity-100 group-hover/info:visible transition-all duration-200 text-xs text-slate-600 leading-relaxed" }, Do = { class: "flex justify-center h-full items-center p-4 gap-3" }, Oo = {
   key: 0,
   title: "Mover componente",
   class: "handle cursor-grab flex items-center bg-white border border-slate-200 px-4 py-2 rounded-xl hover:bg-slate-700 hover:border-slate-700 hover:text-white shadow-sm hover:shadow-md transition-all duration-200 group/btn"
-}, Do = {
+}, Ro = {
   key: 1,
   class: "flex-1 flex justify-center items-center"
-}, Oo = { class: "flex flex-col items-center" }, Ro = {
+}, Vo = { class: "flex flex-col items-center" }, zo = {
   key: 0,
   class: "text-[10px] mt-0.5 opacity-70"
 }, No = ["id"], be = /* @__PURE__ */ W({
@@ -1065,12 +1074,12 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
   },
   setup(e) {
     const o = e, b = Math.random().toString(36).substring(2, 15), $ = C(!1), p = C(!1), u = C(null), s = C(null), m = C(!1), w = C(!1);
-    oe(() => o.isComponentMode, (l) => {
-      l || I();
+    oe(() => o.isComponentMode, (n) => {
+      n || I();
     }), oe(() => o.object, () => {
       I();
-    }, { deep: !0 }), oe(m, async (l) => {
-      l && (await ve(), g());
+    }, { deep: !0 }), oe(m, async (n) => {
+      n && (await ve(), g());
     });
     const I = () => {
       u.value && clearTimeout(u.value), u.value = setTimeout(() => {
@@ -1078,63 +1087,63 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       }, 500);
     }, c = () => {
       if (o.isComponentMode) return;
-      const l = new IntersectionObserver((r) => {
-        r.forEach((F) => {
-          F.isIntersecting && !m.value && (m.value = !0, l.disconnect());
+      const n = new IntersectionObserver((a) => {
+        a.forEach((F) => {
+          F.isIntersecting && !m.value && (m.value = !0, n.disconnect());
         });
       }, { threshold: 0.1 });
-      s.value && l.observe(s.value);
-    }, n = (l, r) => {
-      const F = (o.object.fields || []).find((j) => j.name === l);
-      F && (F.example_value = r);
-    }, a = (l, r) => {
-      l.forEach((F) => {
-        F.value !== void 0 && n(F.fieldName, F.value);
-      }), o.object.repeat_data = r;
+      s.value && n.observe(s.value);
+    }, l = (n, a) => {
+      const F = (o.object.fields || []).find((j) => j.name === n);
+      F && (F.example_value = a);
+    }, r = (n, a) => {
+      n.forEach((F) => {
+        F.value !== void 0 && l(F.fieldName, F.value);
+      }), o.object.repeat_data = a;
     }, f = () => {
       p.value = !p.value;
     }, R = () => {
       w.value = !w.value;
     }, P = () => {
-      g(!0).then((l) => {
-        const r = window.open("", "Preview", "width=1200,height=800");
-        if (!r) {
+      g(!0).then((n) => {
+        const a = window.open("", "Preview", "width=1200,height=800");
+        if (!a) {
           alert("El navegador bloqueó la ventana emergente. Por favor, permite los popups para este sitio.");
           return;
         }
-        r.document.body.innerHTML = l, r.document.querySelectorAll("script").forEach((j) => {
-          var U;
-          const B = r.document.createElement("script");
-          j.src ? B.src = j.src : B.textContent = j.textContent, (U = j.parentNode) == null || U.replaceChild(B, j);
-        }), r.document.close();
+        a.document.body.innerHTML = n, a.document.querySelectorAll("script").forEach((j) => {
+          var N;
+          const B = a.document.createElement("script");
+          j.src ? B.src = j.src : B.textContent = j.textContent, (N = j.parentNode) == null || N.replaceChild(B, j);
+        }), a.document.close();
       });
-    }, g = (l = !1) => {
+    }, g = (n = !1) => {
       var j;
       if (!((j = o.object) != null && j.category) || o.object.category === "Repetidor") {
         const B = '<div style="color:white; padding: 1em 2em;background-color:#001978;border-radius:1em;border:4px solid #711978;">Componente que contiene elementos repetidos: TODO: GENERAR PREVIEW DE REPETIDORES</div>';
-        if (l)
+        if (n)
           return Promise.resolve(B);
-        const U = document.getElementById(b);
-        return U && (U.innerHTML = B), Promise.resolve("");
+        const N = document.getElementById(b);
+        return N && (N.innerHTML = B), Promise.resolve("");
       }
-      const r = o.renderApiDomain ? o.renderApiDomain + "/api/preview-comp/" : "http://localhost:8003/api/preview-comp/", F = JSON.stringify({ obj: o.object }, null, 2);
-      return fetch(r, {
+      const a = o.renderApiDomain ? o.renderApiDomain + "/api/preview-comp/" : "http://localhost:8003/api/preview-comp/", F = JSON.stringify({ obj: o.object }, null, 2);
+      return fetch(a, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: F
       }).then((B) => B.text()).then((B) => {
-        if (l)
+        if (n)
           return B;
-        const U = document.getElementById(b);
-        return U && (U.innerHTML = B), "";
+        const N = document.getElementById(b);
+        return N && (N.innerHTML = B), "";
       });
     };
     return ae(() => {
       c();
-    }), (l, r) => (i(), d("div", null, [
+    }), (n, a) => (i(), d("div", null, [
       w.value ? (i(), ue(po, {
         key: 0,
-        updateObjectByFeedContent: a,
+        updateObjectByFeedContent: r,
         toggleFeedSection: R,
         object: e.object,
         isProduction: e.isProduction
@@ -1148,7 +1157,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           t("span", vo, v(e.object.component_name), 1),
           t("div", xo, [
             t("div", ho, [
-              r[8] || (r[8] = t("div", { class: "handle cursor-grab text-slate-400 hover:text-slate-600 text-lg transition-colors" }, [
+              a[8] || (a[8] = t("div", { class: "handle cursor-grab text-slate-400 hover:text-slate-600 text-lg transition-colors" }, [
                 t("svg", {
                   class: "w-5 h-5",
                   fill: "currentColor",
@@ -1162,7 +1171,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             e.fullwidthMode ? (i(), d("div", yo, [
               t("div", {
                 class: "bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white rounded-lg px-4 py-1.5 text-xs font-medium cursor-pointer shadow-sm hover:shadow transition-all duration-200",
-                onClick: r[0] || (r[0] = (F) => {
+                onClick: a[0] || (a[0] = (F) => {
                   var j;
                   return (j = e.addComponentToColumn) == null ? void 0 : j.call(e, e.object);
                 })
@@ -1173,12 +1182,12 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
               e.insideComponentBox ? S("", !0) : (i(), d("div", ko, [
                 t("div", {
                   title: "Previsualizar Dummy",
-                  onClick: r[1] || (r[1] = (F) => P()),
+                  onClick: a[1] || (a[1] = (F) => P()),
                   class: "p-1.5 rounded-md hover:bg-white hover:shadow-sm cursor-pointer transition-all duration-200 text-base"
                 }, "🔍"),
                 t("div", {
                   title: "Editar configuración",
-                  onClick: r[2] || (r[2] = (F) => p.value = !p.value),
+                  onClick: a[2] || (a[2] = (F) => p.value = !p.value),
                   class: "p-1.5 rounded-md hover:bg-white hover:shadow-sm cursor-pointer transition-all duration-200 text-base"
                 }, "⚙️"),
                 t("div", {
@@ -1186,13 +1195,13 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
                   onClick: R,
                   class: "p-1.5 rounded-md hover:bg-white hover:shadow-sm cursor-pointer transition-all duration-200 text-base flex items-center gap-1"
                 }, [
-                  r[9] || (r[9] = T("⚡ ", -1)),
+                  a[9] || (a[9] = E("⚡ ", -1)),
                   e.object.repeat_data ? (i(), d("span", So, v(e.object.repeat_data.elementCount), 1)) : S("", !0)
                 ]),
                 e.removeComponent ? (i(), d("div", {
                   key: 0,
                   title: "Eliminar componente",
-                  onClick: r[3] || (r[3] = (F) => e.removeComponent(e.object, e.section || "")),
+                  onClick: a[3] || (a[3] = (F) => e.removeComponent(e.object, e.section || "")),
                   class: "p-1.5 rounded-md hover:bg-red-50 hover:shadow-sm cursor-pointer transition-all duration-200 text-base"
                 }, "🗑️")) : S("", !0)
               ]))
@@ -1207,7 +1216,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             t("span", Po, v(e.object.name), 1),
             t("button", {
               type: "button",
-              onClick: r[4] || (r[4] = (F) => $.value = !$.value),
+              onClick: a[4] || (a[4] = (F) => $.value = !$.value),
               class: "ms-2 cursor-pointer text-xs text-slate-400 hover:text-slate-600 transition-colors w-5 h-5 rounded-full hover:bg-slate-100 flex items-center justify-center"
             }, [
               $.value ? (i(), d("span", Mo, "▲")) : (i(), d("span", jo, "▼"))
@@ -1215,7 +1224,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           ]),
           $.value ? (i(), d("div", Io, v(e.object.description), 1)) : S("", !0),
           t("div", Ao, [
-            (i(!0), d(A, null, N(e.object.tags, (F, j) => (i(), d("span", {
+            (i(!0), d(A, null, V(e.object.tags, (F, j) => (i(), d("span", {
               key: j,
               class: "bg-slate-50 text-slate-500 px-2.5 py-1 rounded-full text-[11px] font-medium border border-slate-100 hover:border-slate-200 hover:bg-slate-100 transition-colors cursor-default"
             }, v(F), 1))), 128))
@@ -1223,7 +1232,23 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         ], 64)) : m.value ? (i(), d(A, { key: 1 }, [
           t("div", Bo, [
             t("div", Eo, [
-              e.insideComponentBox && !e.fullwidthMode || !e.insideComponentBox ? (i(), d("div", To, [...r[10] || (r[10] = [
+              a[10] || (a[10] = t("div", { class: "w-5 h-5 rounded-full bg-slate-100 hover:bg-sky-100 border border-slate-200 hover:border-sky-300 flex items-center justify-center cursor-help transition-colors duration-200" }, [
+                t("svg", {
+                  class: "w-3 h-3 text-slate-400 group-hover/info:text-sky-500",
+                  fill: "currentColor",
+                  viewBox: "0 0 20 20"
+                }, [
+                  t("path", {
+                    "fill-rule": "evenodd",
+                    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+                    "clip-rule": "evenodd"
+                  })
+                ])
+              ], -1)),
+              t("div", To, v(e.object.description), 1)
+            ]),
+            t("div", Do, [
+              e.insideComponentBox && !e.fullwidthMode || !e.insideComponentBox ? (i(), d("div", Oo, [...a[11] || (a[11] = [
                 t("div", { class: "flex flex-col items-center" }, [
                   t("svg", {
                     class: "w-6 h-6 mb-1 text-slate-400 group-hover/btn:text-white",
@@ -1235,15 +1260,15 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
                   t("span", { class: "text-xs font-medium" }, "Mover")
                 ], -1)
               ])])) : S("", !0),
-              e.insideComponentBox && e.fullwidthMode ? (i(), d("div", Do, [
+              e.insideComponentBox && e.fullwidthMode ? (i(), d("div", Ro, [
                 t("div", {
                   title: "Agregar componente a la columna",
-                  onClick: r[5] || (r[5] = (F) => {
+                  onClick: a[5] || (a[5] = (F) => {
                     var j;
                     return (j = e.addComponentToColumn) == null ? void 0 : j.call(e, e.object);
                   }),
                   class: "cursor-pointer flex items-center bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white px-6 py-3 rounded-xl shadow-md hover:shadow-lg transition-all duration-200"
-                }, [...r[11] || (r[11] = [
+                }, [...a[12] || (a[12] = [
                   t("div", { class: "flex flex-col items-center" }, [
                     t("span", { class: "text-2xl mb-1" }, "🚀"),
                     t("span", { class: "text-sm font-medium" }, "Seleccionar")
@@ -1253,9 +1278,9 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
               e.insideComponentBox ? S("", !0) : (i(), d(A, { key: 2 }, [
                 t("div", {
                   title: "Configurar componente",
-                  onClick: r[6] || (r[6] = (F) => p.value = !p.value),
+                  onClick: a[6] || (a[6] = (F) => p.value = !p.value),
                   class: "cursor-pointer flex items-center bg-white border border-slate-200 px-4 py-2 rounded-xl hover:bg-slate-700 hover:border-slate-700 hover:text-white shadow-sm hover:shadow-md transition-all duration-200 group/btn"
-                }, [...r[12] || (r[12] = [
+                }, [...a[13] || (a[13] = [
                   t("div", { class: "flex flex-col items-center" }, [
                     t("span", { class: "text-xl mb-1" }, "⚙️"),
                     t("span", { class: "text-xs font-medium" }, "Configurar")
@@ -1266,18 +1291,18 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
                   onClick: R,
                   class: "cursor-pointer flex items-center bg-white border border-slate-200 px-4 py-2 rounded-xl hover:bg-amber-500 hover:border-amber-500 hover:text-white shadow-sm hover:shadow-md transition-all duration-200 group/btn"
                 }, [
-                  t("div", Oo, [
-                    r[13] || (r[13] = t("span", { class: "text-xl mb-1" }, "⚡", -1)),
-                    r[14] || (r[14] = t("span", { class: "text-xs font-medium" }, "Beber de contenido", -1)),
-                    e.object.repeat_data && e.object.repeat_data.dynamicUpdate ? (i(), d("span", Ro, "Carga " + v(e.object.repeat_data.elementCount) + " elementos", 1)) : S("", !0)
+                  t("div", Vo, [
+                    a[14] || (a[14] = t("span", { class: "text-xl mb-1" }, "⚡", -1)),
+                    a[15] || (a[15] = t("span", { class: "text-xs font-medium" }, "Beber de contenido", -1)),
+                    e.object.repeat_data && e.object.repeat_data.dynamicUpdate ? (i(), d("span", zo, "Carga " + v(e.object.repeat_data.elementCount) + " elementos", 1)) : S("", !0)
                   ])
                 ]),
                 e.removeComponent ? (i(), d("div", {
                   key: 0,
                   title: "Eliminar componente",
-                  onClick: r[7] || (r[7] = (F) => e.removeComponent(e.object, e.section || "")),
+                  onClick: a[7] || (a[7] = (F) => e.removeComponent(e.object, e.section || "")),
                   class: "cursor-pointer flex items-center bg-white border border-slate-200 px-4 py-2 rounded-xl hover:bg-red-500 hover:border-red-500 hover:text-white shadow-sm hover:shadow-md transition-all duration-200 group/btn"
-                }, [...r[15] || (r[15] = [
+                }, [...a[16] || (a[16] = [
                   t("div", { class: "flex flex-col items-center" }, [
                     t("span", { class: "text-xl mb-1" }, "🗑️"),
                     t("span", { class: "text-xs font-medium" }, "Eliminar")
@@ -1299,19 +1324,19 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       ], 2)
     ]));
   }
-}), Vo = { class: "absolute top-1 left-2 px-2 flex gap-3 items-center" }, Uo = {
+}), Uo = { class: "absolute top-1 left-2 px-2 flex gap-3 items-center" }, qo = {
   key: 0,
   class: "text-[10px] font-medium text-slate-400 bg-white/80 backdrop-blur-sm px-2 py-0.5 rounded-full shadow-sm"
-}, zo = { class: "text-slate-600" }, qo = {
+}, Lo = { class: "text-slate-600" }, Go = {
   key: 1,
   class: "text-[10px] font-medium text-slate-400 bg-white/80 backdrop-blur-sm px-2 py-0.5 rounded-full shadow-sm"
-}, Lo = { class: "text-slate-600" }, Go = {
+}, Ho = { class: "text-slate-600" }, Jo = {
   key: 2,
   class: "text-[10px] font-medium text-slate-400 bg-white/80 backdrop-blur-sm px-2 py-0.5 rounded-full shadow-sm"
-}, Jo = { class: "text-slate-600" }, Ho = {
+}, Wo = { class: "text-slate-600" }, Yo = {
   key: 0,
   class: "my-4 w-full rounded-xl bg-white border border-slate-200 p-4 z-10 hidden group-hover:block shadow-lg"
-}, Wo = { class: "p-4 bg-gradient-to-br from-slate-50 to-white rounded-lg w-full" }, Yo = { class: "flex flex-col" }, Ko = ["for"], Qo = ["id"], Xo = ["value"], Zo = { class: "flex flex-col" }, _o = ["for"], en = ["id"], tn = ["value"], on = { class: "flex flex-col" }, nn = ["for"], ln = ["id"], an = ["value"], rn = { class: "absolute bottom-0 flex flex-col gap-1 w-full opacity-0 transition-all duration-300 group-hover:opacity-100" }, sn = { class: "flex justify-between gap-2 bg-white/90 backdrop-blur-sm rounded-t-xl px-3 py-1.5 shadow-sm border border-b-0 border-slate-200" }, dn = { class: "flex gap-1" }, un = /* @__PURE__ */ W({
+}, Ko = { class: "p-4 bg-gradient-to-br from-slate-50 to-white rounded-lg w-full" }, Qo = { class: "flex flex-col" }, Xo = ["for"], Zo = ["id"], _o = ["value"], en = { class: "flex flex-col" }, tn = ["for"], on = ["id"], nn = ["value"], ln = { class: "flex flex-col" }, an = ["for"], rn = ["id"], sn = ["value"], dn = { class: "absolute bottom-0 flex flex-col gap-1 w-full opacity-0 transition-all duration-300 group-hover:opacity-100" }, un = { class: "flex justify-between gap-2 bg-white/90 backdrop-blur-sm rounded-t-xl px-3 py-1.5 shadow-sm border border-b-0 border-slate-200" }, cn = { class: "flex gap-1" }, mn = /* @__PURE__ */ W({
   __name: "ColConfig",
   props: {
     globalPageConfiguration: Array,
@@ -1357,106 +1382,106 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         { label: "Fila (componentes unos al lado de otros)", value: "flex-row" }
       ]
     }, $ = C(""), p = C(""), u = C(""), s = C(!1), m = Y(() => {
-      var n, a, f, R;
-      const I = (n = o.globalPageConfiguration) == null ? void 0 : n.find(
+      var l, r, f, R;
+      const I = (l = o.globalPageConfiguration) == null ? void 0 : l.find(
         (P) => P.section === o.section
-      ), c = (R = (f = (a = I == null ? void 0 : I.rows) == null ? void 0 : a[o.rowIndex]) == null ? void 0 : f.columns) == null ? void 0 : R[o.columnIndex];
+      ), c = (R = (f = (r = I == null ? void 0 : I.rows) == null ? void 0 : r[o.rowIndex]) == null ? void 0 : f.columns) == null ? void 0 : R[o.columnIndex];
       return (c == null ? void 0 : c.config) || {};
     }), w = (I, c) => {
       var R;
-      const n = $.value || b.width[0].value, a = p.value || b.gap[0].value, f = u.value || "";
-      (R = o.updateColConfig) == null || R.call(o, I, c, o.section || "", n, a, f), s.value = !1;
+      const l = $.value || b.width[0].value, r = p.value || b.gap[0].value, f = u.value || "";
+      (R = o.updateColConfig) == null || R.call(o, I, c, o.section || "", l, r, f), s.value = !1;
     };
     return (I, c) => (i(), d(A, null, [
-      t("div", Vo, [
-        m.value.width !== void 0 ? (i(), d("span", Uo, [
-          c[12] || (c[12] = T(" Ancho: ", -1)),
-          t("span", zo, v(m.value.width), 1)
+      t("div", Uo, [
+        m.value.width !== void 0 ? (i(), d("span", qo, [
+          c[12] || (c[12] = E(" Ancho: ", -1)),
+          t("span", Lo, v(m.value.width), 1)
         ])) : S("", !0),
-        m.value.gap !== void 0 ? (i(), d("span", qo, [
-          c[13] || (c[13] = T(" Gap: ", -1)),
-          t("span", Lo, v(m.value.gap), 1)
+        m.value.gap !== void 0 ? (i(), d("span", Go, [
+          c[13] || (c[13] = E(" Gap: ", -1)),
+          t("span", Ho, v(m.value.gap), 1)
         ])) : S("", !0),
-        m.value.flexDirection !== void 0 ? (i(), d("span", Go, [
-          c[14] || (c[14] = T(" Flex: ", -1)),
-          t("span", Jo, v(m.value.flexDirection), 1)
+        m.value.flexDirection !== void 0 ? (i(), d("span", Jo, [
+          c[14] || (c[14] = E(" Flex: ", -1)),
+          t("span", Wo, v(m.value.flexDirection), 1)
         ])) : S("", !0)
       ]),
-      s.value ? (i(), d("div", Ho, [
-        t("div", Wo, [
+      s.value ? (i(), d("div", Yo, [
+        t("div", Ko, [
           t("form", {
             onSubmit: c[4] || (c[4] = le(() => {
             }, ["prevent"])),
             class: "flex gap-5 w-full justify-center items-end flex-wrap"
           }, [
-            t("div", Yo, [
+            t("div", Qo, [
               t("label", {
                 for: `colwidth-${e.rowIndex}-${e.columnIndex}`,
                 class: "block text-sm font-medium text-slate-600 mb-1.5"
-              }, "Ancho:", 8, Ko),
+              }, "Ancho:", 8, Xo),
               O(t("select", {
-                "onUpdate:modelValue": c[0] || (c[0] = (n) => $.value = n),
+                "onUpdate:modelValue": c[0] || (c[0] = (l) => $.value = l),
                 id: `colwidth-${e.rowIndex}-${e.columnIndex}`,
                 class: "block w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-white hover:border-slate-300 transition-colors"
               }, [
                 c[15] || (c[15] = t("option", { value: "" }, "Selecciona...", -1)),
-                (i(!0), d(A, null, N(b.width, (n) => (i(), d("option", {
-                  key: n.value,
-                  value: n.value
-                }, v(n.label), 9, Xo))), 128))
-              ], 8, Qo), [
-                [H, $.value]
+                (i(!0), d(A, null, V(b.width, (l) => (i(), d("option", {
+                  key: l.value,
+                  value: l.value
+                }, v(l.label), 9, _o))), 128))
+              ], 8, Zo), [
+                [J, $.value]
               ])
             ]),
-            t("div", Zo, [
+            t("div", en, [
               t("label", {
                 for: `colgap-${e.rowIndex}-${e.columnIndex}`,
                 class: "block text-sm font-medium text-slate-600 mb-1.5"
-              }, "Gap:", 8, _o),
+              }, "Gap:", 8, tn),
               O(t("select", {
-                "onUpdate:modelValue": c[1] || (c[1] = (n) => p.value = n),
+                "onUpdate:modelValue": c[1] || (c[1] = (l) => p.value = l),
                 id: `colgap-${e.rowIndex}-${e.columnIndex}`,
                 class: "block w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-white hover:border-slate-300 transition-colors"
               }, [
                 c[16] || (c[16] = t("option", { value: "" }, "Selecciona...", -1)),
-                (i(!0), d(A, null, N(b.gap, (n) => (i(), d("option", {
-                  key: n.value,
-                  value: n.value
-                }, v(n.label), 9, tn))), 128))
-              ], 8, en), [
-                [H, p.value]
+                (i(!0), d(A, null, V(b.gap, (l) => (i(), d("option", {
+                  key: l.value,
+                  value: l.value
+                }, v(l.label), 9, nn))), 128))
+              ], 8, on), [
+                [J, p.value]
               ])
             ]),
-            t("div", on, [
+            t("div", ln, [
               t("label", {
                 for: `flexdir-${e.rowIndex}-${e.columnIndex}`,
                 class: "block text-sm font-medium text-slate-600 mb-1.5"
-              }, "Dirección:", 8, nn),
+              }, "Dirección:", 8, an),
               O(t("select", {
-                "onUpdate:modelValue": c[2] || (c[2] = (n) => u.value = n),
+                "onUpdate:modelValue": c[2] || (c[2] = (l) => u.value = l),
                 id: `flexdir-${e.rowIndex}-${e.columnIndex}`,
                 class: "block w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-white hover:border-slate-300 transition-colors"
               }, [
                 c[17] || (c[17] = t("option", { value: "" }, "Selecciona...", -1)),
-                (i(!0), d(A, null, N(b.flexDirection, (n) => (i(), d("option", {
-                  key: n.value,
-                  value: n.value
-                }, v(n.label), 9, an))), 128))
-              ], 8, ln), [
-                [H, u.value]
+                (i(!0), d(A, null, V(b.flexDirection, (l) => (i(), d("option", {
+                  key: l.value,
+                  value: l.value
+                }, v(l.label), 9, sn))), 128))
+              ], 8, rn), [
+                [J, u.value]
               ])
             ]),
             t("button", {
               type: "button",
               class: "bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white px-5 py-2 rounded-lg font-medium shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer",
-              onClick: c[3] || (c[3] = (n) => {
+              onClick: c[3] || (c[3] = (l) => {
                 w(e.rowIndex, e.columnIndex), s.value = !1;
               })
             }, " Guardar ")
           ], 32)
         ])
       ])) : S("", !0),
-      t("div", rn, [
+      t("div", dn, [
         t("div", {
           class: G(["flex flex-row", { "justify-between": e.section && e.section !== "Sidebar", "justify-center": e.section === "Sidebar" }])
         }, [
@@ -1464,44 +1489,44 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             key: 0,
             type: "button",
             title: "Añadir columna a la izquierda",
-            onClick: c[5] || (c[5] = (n) => {
-              var a;
-              return (a = e.addCol) == null ? void 0 : a.call(e, e.rowIndex, e.columnIndex, e.section, "left");
+            onClick: c[5] || (c[5] = (l) => {
+              var r;
+              return (r = e.addCol) == null ? void 0 : r.call(e, e.rowIndex, e.columnIndex, e.section, "left");
             }),
             class: "ms-2 bg-white px-3 py-1 cursor-pointer rounded-t-lg border border-b-0 border-slate-200 hover:bg-emerald-500 hover:border-emerald-500 hover:text-white text-slate-600 transition-all duration-200 shadow-sm hover:shadow-md font-medium"
           }, "+")) : S("", !0),
-          t("div", sn, [
+          t("div", un, [
             t("button", {
               type: "button",
               title: "Configurar columna",
-              onClick: c[6] || (c[6] = (n) => s.value = !s.value),
+              onClick: c[6] || (c[6] = (l) => s.value = !s.value),
               class: G(["px-2.5 py-1 rounded-lg cursor-pointer transition-all duration-200", s.value ? "bg-amber-100 text-amber-700 shadow-sm" : "bg-slate-100 text-slate-600 hover:bg-amber-500 hover:text-white"])
             }, "⚙️", 2),
-            t("div", dn, [
+            t("div", cn, [
               e.section && e.section !== "Sidebar" ? (i(), d("span", {
                 key: 0,
                 title: "Mover columna a la izquierda",
-                onClick: c[7] || (c[7] = (n) => {
-                  var a;
-                  return (a = e.moveCol) == null ? void 0 : a.call(e, e.rowIndex, e.columnIndex, e.section, "left");
+                onClick: c[7] || (c[7] = (l) => {
+                  var r;
+                  return (r = e.moveCol) == null ? void 0 : r.call(e, e.rowIndex, e.columnIndex, e.section, "left");
                 }),
                 class: "bg-slate-100 px-2.5 py-1 cursor-pointer rounded-lg transition-all duration-200 text-slate-400 hover:bg-blue-500 hover:text-white"
               }, "◁")) : S("", !0),
               e.fullwidthMode ? (i(), d("span", {
                 key: 1,
                 title: "Añadir componente",
-                onClick: c[8] || (c[8] = (n) => {
-                  var a;
-                  return (a = e.addComponentFunction) == null ? void 0 : a.call(e, e.rowIndex, e.columnIndex, e.section || "");
+                onClick: c[8] || (c[8] = (l) => {
+                  var r;
+                  return (r = e.addComponentFunction) == null ? void 0 : r.call(e, e.rowIndex, e.columnIndex, e.section || "");
                 }),
                 class: "bg-slate-100 px-2.5 py-1 cursor-pointer rounded-lg transition-all duration-200 text-slate-400 hover:bg-violet-500 hover:text-white"
               }, " 📦 ")) : S("", !0),
               e.section && e.section !== "Sidebar" ? (i(), d("span", {
                 key: 2,
                 title: "Mover columna a la derecha",
-                onClick: c[9] || (c[9] = (n) => {
-                  var a;
-                  return (a = e.moveCol) == null ? void 0 : a.call(e, e.rowIndex, e.columnIndex, e.section, "right");
+                onClick: c[9] || (c[9] = (l) => {
+                  var r;
+                  return (r = e.moveCol) == null ? void 0 : r.call(e, e.rowIndex, e.columnIndex, e.section, "right");
                 }),
                 class: "bg-slate-100 px-2.5 py-1 cursor-pointer rounded-lg transition-all duration-200 text-slate-400 hover:bg-blue-500 hover:text-white"
               }, "▷ ")) : S("", !0)
@@ -1509,9 +1534,9 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             t("button", {
               type: "button",
               title: "Eliminar columna",
-              onClick: c[10] || (c[10] = (n) => {
-                var a;
-                return (a = e.removeCol) == null ? void 0 : a.call(e, e.rowIndex, e.columnIndex, e.section || "");
+              onClick: c[10] || (c[10] = (l) => {
+                var r;
+                return (r = e.removeCol) == null ? void 0 : r.call(e, e.rowIndex, e.columnIndex, e.section || "");
               }),
               class: "bg-slate-100 px-2.5 py-1 rounded-lg cursor-pointer transition-all duration-200 text-slate-600 hover:bg-red-500 hover:text-white"
             }, "🗑️")
@@ -1520,9 +1545,9 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             key: 1,
             type: "button",
             title: "Añadir columna a la derecha",
-            onClick: c[11] || (c[11] = (n) => {
-              var a;
-              return (a = e.addCol) == null ? void 0 : a.call(e, e.rowIndex, e.columnIndex, e.section, "right");
+            onClick: c[11] || (c[11] = (l) => {
+              var r;
+              return (r = e.addCol) == null ? void 0 : r.call(e, e.rowIndex, e.columnIndex, e.section, "right");
             }),
             class: "me-2 bg-white px-3 py-1 cursor-pointer rounded-t-lg border border-b-0 border-slate-200 hover:bg-emerald-500 hover:border-emerald-500 hover:text-white text-slate-600 transition-all duration-200 shadow-sm hover:shadow-md font-medium"
           }, "+")) : S("", !0)
@@ -1530,19 +1555,19 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       ])
     ], 64));
   }
-}), cn = { class: "absolute -top-1 px-2 gap-4 w-full justify-between hidden css-pb-row-config" }, mn = { class: "flex gap-1.5" }, bn = { class: "flex gap-4 items-center" }, gn = { class: "inline-block" }, fn = {
+}), bn = { class: "absolute -top-1 px-2 gap-4 w-full justify-between hidden group-hover/row:flex css-pb-row-config" }, gn = { class: "flex gap-1.5" }, fn = { class: "flex gap-4 items-center" }, pn = { class: "inline-block" }, vn = {
   key: 0,
   class: "text-xs font-medium text-slate-400 bg-slate-50 px-2 py-1 rounded-full"
-}, pn = { class: "text-slate-600" }, vn = {
+}, xn = { class: "text-slate-600" }, hn = {
   key: 1,
   class: "text-xs font-medium text-slate-400 bg-slate-50 px-2 py-1 rounded-full"
-}, xn = { class: "text-slate-600" }, hn = {
+}, wn = { class: "text-slate-600" }, yn = {
   key: 2,
   class: "text-xs font-medium text-slate-400 bg-slate-50 px-2 py-1 rounded-full"
-}, wn = { class: "text-slate-600" }, yn = { class: "flex gap-1.5" }, Cn = {
+}, Cn = { class: "text-slate-600" }, $n = { class: "flex gap-1.5" }, kn = {
   key: 0,
   class: "z-1"
-}, $n = { class: "p-5 bg-white rounded-xl shadow-lg border border-slate-100 w-full mt-8" }, kn = { class: "flex flex-col" }, Sn = ["for"], Fn = ["id"], Pn = ["value"], jn = { class: "flex flex-col" }, Mn = ["for"], In = ["id"], An = ["value"], Bn = { class: "flex flex-col" }, En = ["for"], Tn = ["id"], Dn = ["value"], On = /* @__PURE__ */ W({
+}, Sn = { class: "p-5 bg-white rounded-xl shadow-lg border border-slate-100 w-full mt-8" }, Fn = { class: "flex flex-col" }, Pn = ["for"], jn = ["id"], Mn = ["value"], In = { class: "flex flex-col" }, An = ["for"], Bn = ["id"], En = ["value"], Tn = { class: "flex flex-col" }, Dn = ["for"], On = ["id"], Rn = ["value"], Vn = /* @__PURE__ */ W({
   __name: "RowConfig",
   props: {
     rowIndex: {
@@ -1584,24 +1609,24 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         { label: "4/5", value: "4/5" }
       ]
     }, $ = C(""), p = C(""), u = C(""), s = C(!1), m = C(!1), w = Y(() => {
-      var n, a;
-      const c = (n = o.globalPageConfiguration) == null ? void 0 : n.find(
+      var l, r;
+      const c = (l = o.globalPageConfiguration) == null ? void 0 : l.find(
         (f) => f.section === o.section
       );
-      return (a = c == null ? void 0 : c.rows) != null && a[o.rowIndex] ? c.rows[o.rowIndex].config || {} : {};
+      return (r = c == null ? void 0 : c.rows) != null && r[o.rowIndex] ? c.rows[o.rowIndex].config || {} : {};
     }), I = (c) => {
       var R;
-      const n = $.value || b.padding[0].value, a = p.value || b.gap[0].value, f = u.value || b.width[0].value;
-      (R = o.updateRowConfig) == null || R.call(o, c, o.section || "", n, a, f), s.value = !1;
+      const l = $.value || b.padding[0].value, r = p.value || b.gap[0].value, f = u.value || b.width[0].value;
+      (R = o.updateRowConfig) == null || R.call(o, c, o.section || "", l, r, f), s.value = !1;
     };
-    return (c, n) => (i(), d(A, null, [
-      t("div", cn, [
+    return (c, l) => (i(), d(A, null, [
+      t("div", bn, [
         t("div", null, [
-          t("div", mn, [
+          t("div", gn, [
             t("button", {
               type: "button",
               title: "Agregar fila",
-              onClick: n[0] || (n[0] = (a) => {
+              onClick: l[0] || (l[0] = (r) => {
                 var f;
                 (f = e.addRow) == null || f.call(e, e.rowIndex, e.section || ""), m.value = !1;
               }),
@@ -1610,7 +1635,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             t("button", {
               type: "button",
               title: "Mover fila hacia arriba",
-              onClick: n[1] || (n[1] = (a) => {
+              onClick: l[1] || (l[1] = (r) => {
                 var f;
                 (f = e.moveRow) == null || f.call(e, e.rowIndex, e.section || "", "up"), m.value = !1;
               }),
@@ -1619,7 +1644,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             t("button", {
               type: "button",
               title: "Mover fila hacia abajo",
-              onClick: n[2] || (n[2] = (a) => {
+              onClick: l[2] || (l[2] = (r) => {
                 var f;
                 (f = e.moveRow) == null || f.call(e, e.rowIndex, e.section || "", "down"), m.value = !1;
               }),
@@ -1627,34 +1652,34 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             }, "▽")
           ])
         ]),
-        t("div", bn, [
-          t("div", gn, [
+        t("div", fn, [
+          t("div", pn, [
             t("button", {
               type: "button",
               title: "Configurar la fila",
-              onClick: n[3] || (n[3] = (a) => s.value = !s.value),
+              onClick: l[3] || (l[3] = (r) => s.value = !s.value),
               class: G(["cursor-pointer rounded-b-lg border border-t-0 px-3 py-1 transition-all duration-200 shadow-sm hover:shadow-md", s.value ? "bg-amber-100 border-amber-300 text-amber-700" : "bg-white border-slate-200 text-slate-600 hover:bg-amber-500 hover:border-amber-500 hover:text-white"])
             }, "⚙️", 2)
           ]),
-          w.value.padding !== void 0 ? (i(), d("span", fn, [
-            n[10] || (n[10] = T(" Padding: ", -1)),
-            t("span", pn, v(w.value.padding), 1)
+          w.value.padding !== void 0 ? (i(), d("span", vn, [
+            l[10] || (l[10] = E(" Padding: ", -1)),
+            t("span", xn, v(w.value.padding), 1)
           ])) : S("", !0),
-          w.value.gap !== void 0 ? (i(), d("span", vn, [
-            n[11] || (n[11] = T(" Gap: ", -1)),
-            t("span", xn, v(w.value.gap), 1)
+          w.value.gap !== void 0 ? (i(), d("span", hn, [
+            l[11] || (l[11] = E(" Gap: ", -1)),
+            t("span", wn, v(w.value.gap), 1)
           ])) : S("", !0),
-          w.value.width !== void 0 ? (i(), d("span", hn, [
-            n[12] || (n[12] = T(" Ancho: ", -1)),
-            t("span", wn, v(w.value.width), 1)
+          w.value.width !== void 0 ? (i(), d("span", yn, [
+            l[12] || (l[12] = E(" Ancho: ", -1)),
+            t("span", Cn, v(w.value.width), 1)
           ])) : S("", !0)
         ]),
         t("div", null, [
-          t("div", yn, [
+          t("div", $n, [
             t("button", {
               type: "button",
               title: "Eliminar fila",
-              onClick: n[4] || (n[4] = (a) => {
+              onClick: l[4] || (l[4] = (r) => {
                 var f;
                 (f = e.removeRow) == null || f.call(e, e.rowIndex, e.section || ""), m.value = !1;
               }),
@@ -1663,74 +1688,74 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           ])
         ])
       ]),
-      s.value ? (i(), d("div", Cn, [
-        t("div", $n, [
+      s.value ? (i(), d("div", kn, [
+        t("div", Sn, [
           t("form", {
-            onSubmit: n[9] || (n[9] = le(() => {
+            onSubmit: l[9] || (l[9] = le(() => {
             }, ["prevent"])),
             class: "flex gap-6 w-full justify-center items-end flex-wrap"
           }, [
-            t("div", kn, [
+            t("div", Fn, [
               t("label", {
                 for: `padding-${e.rowIndex}`,
                 class: "block text-sm font-medium text-slate-600 mb-1.5"
-              }, "Padding:", 8, Sn),
+              }, "Padding:", 8, Pn),
               O(t("select", {
-                "onUpdate:modelValue": n[5] || (n[5] = (a) => $.value = a),
+                "onUpdate:modelValue": l[5] || (l[5] = (r) => $.value = r),
                 id: `padding-${e.rowIndex}`,
                 class: "block w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-slate-50 hover:bg-white transition-colors"
               }, [
-                n[13] || (n[13] = t("option", { value: "" }, "Selecciona...", -1)),
-                (i(!0), d(A, null, N(b.padding, (a) => (i(), d("option", {
-                  key: a.value,
-                  value: a.value
-                }, v(a.label), 9, Pn))), 128))
-              ], 8, Fn), [
-                [H, $.value]
+                l[13] || (l[13] = t("option", { value: "" }, "Selecciona...", -1)),
+                (i(!0), d(A, null, V(b.padding, (r) => (i(), d("option", {
+                  key: r.value,
+                  value: r.value
+                }, v(r.label), 9, Mn))), 128))
+              ], 8, jn), [
+                [J, $.value]
               ])
             ]),
-            t("div", jn, [
+            t("div", In, [
               t("label", {
                 for: `gap-${e.rowIndex}`,
                 class: "block text-sm font-medium text-slate-600 mb-1.5"
-              }, "Gap:", 8, Mn),
+              }, "Gap:", 8, An),
               O(t("select", {
-                "onUpdate:modelValue": n[6] || (n[6] = (a) => p.value = a),
+                "onUpdate:modelValue": l[6] || (l[6] = (r) => p.value = r),
                 id: `gap-${e.rowIndex}`,
                 class: "block w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-slate-50 hover:bg-white transition-colors"
               }, [
-                n[14] || (n[14] = t("option", { value: "" }, "Selecciona...", -1)),
-                (i(!0), d(A, null, N(b.gap, (a) => (i(), d("option", {
-                  key: a.value,
-                  value: a.value
-                }, v(a.label), 9, An))), 128))
-              ], 8, In), [
-                [H, p.value]
+                l[14] || (l[14] = t("option", { value: "" }, "Selecciona...", -1)),
+                (i(!0), d(A, null, V(b.gap, (r) => (i(), d("option", {
+                  key: r.value,
+                  value: r.value
+                }, v(r.label), 9, En))), 128))
+              ], 8, Bn), [
+                [J, p.value]
               ])
             ]),
-            t("div", Bn, [
+            t("div", Tn, [
               t("label", {
                 for: `width-${e.rowIndex}`,
                 class: "block text-sm font-medium text-slate-600 mb-1.5"
-              }, "Ancho:", 8, En),
+              }, "Ancho:", 8, Dn),
               O(t("select", {
-                "onUpdate:modelValue": n[7] || (n[7] = (a) => u.value = a),
+                "onUpdate:modelValue": l[7] || (l[7] = (r) => u.value = r),
                 id: `width-${e.rowIndex}`,
                 class: "block w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 bg-slate-50 hover:bg-white transition-colors"
               }, [
-                n[15] || (n[15] = t("option", { value: "" }, "Selecciona...", -1)),
-                (i(!0), d(A, null, N(b.width, (a) => (i(), d("option", {
-                  key: a.value,
-                  value: a.value
-                }, v(a.label), 9, Dn))), 128))
-              ], 8, Tn), [
-                [H, u.value]
+                l[15] || (l[15] = t("option", { value: "" }, "Selecciona...", -1)),
+                (i(!0), d(A, null, V(b.width, (r) => (i(), d("option", {
+                  key: r.value,
+                  value: r.value
+                }, v(r.label), 9, Rn))), 128))
+              ], 8, On), [
+                [J, u.value]
               ])
             ]),
             t("button", {
               type: "button",
               class: "bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-white px-5 py-2 rounded-lg font-medium shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer",
-              onClick: n[8] || (n[8] = (a) => {
+              onClick: l[8] || (l[8] = (r) => {
                 I(e.rowIndex), m.value = !1;
               })
             }, " Guardar ")
@@ -1739,7 +1764,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       ])) : S("", !0)
     ], 64));
   }
-}), Rn = ["id"], Nn = { class: "flex flex-row w-full gap-3 mt-6" }, Vn = ["id"], Un = /* @__PURE__ */ W({
+}), zn = ["id"], Nn = { class: "flex flex-row w-full gap-3 mt-6" }, Un = ["id"], qn = /* @__PURE__ */ W({
   __name: "BodySection",
   props: {
     isComponentMode: Boolean,
@@ -1770,12 +1795,12 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       );
       return (p == null ? void 0 : p.rows) || [];
     });
-    return (p, u) => (i(!0), d(A, null, N($.value, (s, m) => (i(), d("div", {
+    return (p, u) => (i(!0), d(A, null, V($.value, (s, m) => (i(), d("div", {
       key: "row-" + m,
       id: "row-" + e.sectionSelected + "-" + m,
       class: "flex flex-col gap-3 w-full p-5 bg-white border border-slate-200 rounded-2xl js-row relative items-center hover:border-slate-300 hover:shadow-lg transition-all duration-300 css-pb-row group/row"
     }, [
-      L(On, {
+      L(Vn, {
         moveRow: e.moveRow,
         addRow: e.addRow,
         removeRow: e.removeRow,
@@ -1785,7 +1810,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         section: e.sectionSelected
       }, null, 8, ["moveRow", "addRow", "removeRow", "globalPageConfiguration", "updateRowConfig", "rowIndex", "section"]),
       t("div", Nn, [
-        (i(!0), d(A, null, N(s.columns, (w, I) => (i(), d("div", {
+        (i(!0), d(A, null, V(s.columns, (w, I) => (i(), d("div", {
           class: G([
             "hover:shadow-md overflow-hidden dragging-zone border relative border-slate-200 shadow-sm w-full p-5 pt-10 min-h-[200px] rounded-xl flex flex-col gap-3 items-center before:content-['Columna'] before:absolute before:text-slate-300 before:text-7xl before:font-bold before:bottom-4 before:left-2 before:-rotate-12 before:opacity-30 before:duration-300 before:transition-opacity group hover:before:opacity-50 transition-all duration-300",
             b.value ? "bg-gradient-to-b from-emerald-50 to-emerald-100 border-emerald-300 shadow-emerald-100" : "bg-gradient-to-b from-slate-50 to-slate-100"
@@ -1814,7 +1839,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             ]),
             _: 1
           }, 8, ["list"]),
-          L(un, {
+          L(mn, {
             section: e.sectionSelected,
             globalPageConfiguration: e.globalPageConfiguration,
             updateColConfig: e.updateColConfig,
@@ -1826,11 +1851,11 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             rowIndex: m,
             columnIndex: I
           }, null, 8, ["section", "globalPageConfiguration", "updateColConfig", "addComponentFunction", "fullwidthMode", "addCol", "removeCol", "moveCol", "rowIndex", "columnIndex"])
-        ], 10, Vn))), 128))
+        ], 10, Un))), 128))
       ])
-    ], 8, Rn))), 128));
+    ], 8, zn))), 128));
   }
-}), zn = { class: "flex justify-between items-center mb-4" }, qn = { class: "text-xs" }, Ln = { class: "flex flex-wrap gap-2 mb-4 bg-white border border-slate-200 p-4 rounded-xl shadow-sm" }, Gn = ["value", "checked"], Jn = { class: "my-3" }, Hn = { class: "relative" }, Wn = { class: "component-library dragging-zone w-full p-5 min-h-[200px] border border-slate-200 bg-white rounded-xl flex flex-col gap-4 items-center shadow-sm" }, Yn = {
+}), Ln = { class: "flex justify-between items-center mb-4" }, Gn = { class: "text-xs" }, Hn = { class: "flex flex-wrap gap-2 mb-4 bg-white border border-slate-200 p-4 rounded-xl shadow-sm" }, Jn = ["value", "checked"], Wn = { class: "my-3" }, Yn = { class: "relative" }, Kn = { class: "component-library dragging-zone w-full p-5 min-h-[200px] border border-slate-200 bg-white rounded-xl flex flex-col gap-4 items-center shadow-sm" }, Qn = {
   key: 0,
   class: "text-center py-8 text-slate-400"
 }, de = /* @__PURE__ */ W({
@@ -1860,25 +1885,25 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       "Título",
       "SEO"
     ], $ = Y(() => !o.excludedCategories || o.excludedCategories.length === 0 ? b : b.filter((c) => !o.excludedCategories.includes(c))), p = C(!0), u = C([]), s = C(""), m = Y(() => {
-      const c = s.value.toLowerCase(), n = Object.values(o.components), a = (f) => (f.name.toLowerCase() + f.description.toLowerCase() + f.tags.join(" ").toLowerCase()).includes(c);
-      return u.value.length > 0 ? n.filter(
-        (f) => u.value.includes(f.category) && a(f)
-      ) : n.filter(a);
+      const c = s.value.toLowerCase(), l = Object.values(o.components), r = (f) => (f.name.toLowerCase() + f.description.toLowerCase() + f.tags.join(" ").toLowerCase()).includes(c);
+      return u.value.length > 0 ? l.filter(
+        (f) => u.value.includes(f.category) && r(f)
+      ) : l.filter(r);
     }), w = (c) => {
       s.value = c.target.value;
     }, I = (c) => {
-      const n = c.target, a = n.value;
-      n.checked ? u.value.includes(a) || u.value.push(a) : u.value = u.value.filter((f) => f !== a);
+      const l = c.target, r = l.value;
+      l.checked ? u.value.includes(r) || u.value.push(r) : u.value = u.value.filter((f) => f !== r);
     };
-    return (c, n) => (i(), d(A, null, [
-      n[6] || (n[6] = t("h1", { class: "text-center text-2xl font-semibold mb-4 text-slate-700 tracking-tight" }, "Componentes", -1)),
-      t("div", zn, [
+    return (c, l) => (i(), d(A, null, [
+      l[6] || (l[6] = t("h1", { class: "text-center text-2xl font-semibold mb-4 text-slate-700 tracking-tight" }, "Componentes", -1)),
+      t("div", Ln, [
         t("button", {
           type: "button",
-          onClick: n[0] || (n[0] = (a) => p.value = !p.value),
+          onClick: l[0] || (l[0] = (r) => p.value = !p.value),
           class: "mb-3 px-4 py-2 bg-white rounded-lg border border-slate-200 hover:border-slate-300 hover:shadow-sm transition-all duration-200 cursor-pointer text-slate-600 font-medium flex items-center gap-2"
         }, [
-          n[2] || (n[2] = t("svg", {
+          l[2] || (l[2] = t("svg", {
             class: "w-4 h-4",
             fill: "none",
             stroke: "currentColor",
@@ -1891,38 +1916,38 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
               d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
             })
           ], -1)),
-          n[3] || (n[3] = t("span", null, "Filtros", -1)),
-          t("span", qn, v(p.value ? "▲" : "▼"), 1)
+          l[3] || (l[3] = t("span", null, "Filtros", -1)),
+          t("span", Gn, v(p.value ? "▲" : "▼"), 1)
         ]),
         t("button", {
           type: "button",
           class: G([[e.isComponentMode ? "bg-gradient-to-r from-slate-600 to-slate-700 border-slate-700 text-white shadow-md" : "bg-white hover:bg-slate-100"], "cursor-pointer border border-slate-200 rounded-lg py-1.5 px-3 text-sm font-medium transition-all duration-200"]),
-          onClick: n[1] || (n[1] = (a) => {
+          onClick: l[1] || (l[1] = (r) => {
             var f;
             return (f = e.toggleComponentModeFunction) == null ? void 0 : f.call(e);
           })
         }, v(e.isComponentMode ? "⚒️ Modo Configuración" : "👁️ Modo Visual"), 3)
       ]),
-      O(t("div", Ln, [
-        (i(!0), d(A, null, N($.value, (a) => (i(), d("label", {
-          key: a,
-          class: G(["flex items-center gap-2 text-xs bg-slate-50 hover:bg-slate-100 px-3 py-2 rounded-lg cursor-pointer transition-colors duration-200 border border-transparent hover:border-slate-200", { "bg-emerald-50 border-emerald-200 text-emerald-700": u.value.includes(a) }])
+      O(t("div", Hn, [
+        (i(!0), d(A, null, V($.value, (r) => (i(), d("label", {
+          key: r,
+          class: G(["flex items-center gap-2 text-xs bg-slate-50 hover:bg-slate-100 px-3 py-2 rounded-lg cursor-pointer transition-colors duration-200 border border-transparent hover:border-slate-200", { "bg-emerald-50 border-emerald-200 text-emerald-700": u.value.includes(r) }])
         }, [
           t("input", {
             type: "checkbox",
-            value: a,
-            checked: u.value.includes(a),
+            value: r,
+            checked: u.value.includes(r),
             onInput: I,
             class: "w-4 h-4 rounded border-slate-300 text-emerald-500 focus:ring-emerald-500"
-          }, null, 40, Gn),
-          T(" " + v(a), 1)
+          }, null, 40, Jn),
+          E(" " + v(r), 1)
         ], 2))), 128))
       ], 512), [
         [xe, p.value]
       ]),
-      t("div", Jn, [
-        t("div", Hn, [
-          n[4] || (n[4] = t("svg", {
+      t("div", Wn, [
+        t("div", Yn, [
+          l[4] || (l[4] = t("svg", {
             class: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400",
             fill: "none",
             stroke: "currentColor",
@@ -1943,18 +1968,18 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           }, null, 32)
         ])
       ]),
-      t("div", Wn, [
+      t("div", Kn, [
         L(q(me), {
           class: "w-full flex flex-col gap-4",
           list: m.value,
           group: { name: "draggingGroup", pull: "clone", put: !1 },
           itemKey: "name",
-          clone: (a) => JSON.parse(JSON.stringify(a))
+          clone: (r) => JSON.parse(JSON.stringify(r))
         }, {
-          item: ce(({ element: a }) => [
+          item: ce(({ element: r }) => [
             L(be, {
               renderApiDomain: e.renderApiDomain,
-              object: a,
+              object: r,
               "is-component-mode": e.isComponentMode,
               fullwidthMode: e.fullwidthMode,
               columnToInsert: e.columnToInsert,
@@ -1965,7 +1990,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
           ]),
           _: 1
         }, 8, ["list", "clone"]),
-        m.value.length === 0 ? (i(), d("div", Yn, [...n[5] || (n[5] = [
+        m.value.length === 0 ? (i(), d("div", Qn, [...l[5] || (l[5] = [
           t("svg", {
             class: "w-12 h-12 mx-auto mb-3 opacity-50",
             fill: "none",
@@ -1985,10 +2010,10 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       ])
     ], 64));
   }
-}), Kn = { class: "flex flex-col w-full transition-all duration-300 lf-page-builder bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen" }, Qn = { class: "relative flex flex-row flex-wrap" }, Xn = { class: "w-full flex justify-end py-4 pe-4" }, Zn = { class: "w-3/4" }, _n = {
+}), Xn = { class: "flex flex-col w-full transition-all duration-300 lf-page-builder bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen" }, Zn = { class: "relative flex flex-row flex-wrap" }, _n = { class: "w-full flex justify-end py-4 pe-4" }, el = { class: "w-3/4" }, tl = {
   key: 1,
   class: "w-1/4 px-3 overflow-y-auto h-screen sticky top-0"
-}, ll = /* @__PURE__ */ W({
+}, rl = /* @__PURE__ */ W({
   __name: "Pagebuilder",
   props: {
     isProduction: { type: Boolean },
@@ -2002,7 +2027,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       "Repetidor",
       // Siempre excluido
       ...o.excludeComponentTypes ?? []
-    ], m = b ? "https://render-api.lefebvre.es" : "https://led-dev-astro-render-api-dev.eu.els.local", w = C(!0), I = C(void 0), c = C([]), n = C({ rowIndex: null, columnIndex: null, section: null }), a = C(!1), f = C(!1), R = Y(() => {
+    ], m = b ? "https://render-api.lefebvre.es" : "https://led-dev-astro-render-api-dev.eu.els.local", w = C(!0), I = C(void 0), c = C([]), l = C({ rowIndex: null, columnIndex: null, section: null }), r = C(!1), f = C(!1), R = Y(() => {
       const y = we();
       if (s.length === 0)
         return y;
@@ -2046,9 +2071,9 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
       }
     ]);
     ae(() => {
-      l();
+      n();
     });
-    const l = () => {
+    const n = () => {
       if (c.value = ["Header", "Footer", "Body", "Sidebar"], I.value = "Body", u) {
         const y = document.getElementById(u);
         if (y) {
@@ -2062,27 +2087,27 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
             }
         }
       }
-    }, r = () => {
+    }, a = () => {
       f.value = !f.value;
     }, F = () => {
       w.value = !w.value;
     }, j = (y, h, x, k, M) => {
       var D;
-      const E = g.find((V) => V.section === h);
-      (D = E == null ? void 0 : E.rows) != null && D[y] && (E.rows[y].config = {
+      const T = g.find((z) => z.section === h);
+      (D = T == null ? void 0 : T.rows) != null && D[y] && (T.rows[y].config = {
         padding: x,
         gap: k,
         width: M
       });
-    }, B = (y, h, x, k, M, E) => {
-      var V, z, K;
+    }, B = (y, h, x, k, M, T) => {
+      var z, U, K;
       const D = g.find((Z) => Z.section === x);
-      (K = (z = (V = D == null ? void 0 : D.rows) == null ? void 0 : V[y]) == null ? void 0 : z.columns) != null && K[h] && (D.rows[y].columns[h].config = {
+      (K = (U = (z = D == null ? void 0 : D.rows) == null ? void 0 : z[y]) == null ? void 0 : U.columns) != null && K[h] && (D.rows[y].columns[h].config = {
         width: k,
         gap: M,
-        flexDirection: E
+        flexDirection: T
       });
-    }, U = async (y, h) => {
+    }, N = async (y, h) => {
       const x = g.find((k) => k.section === h);
       if (x) {
         const k = {
@@ -2102,62 +2127,62 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
     }, X = (y, h) => {
       const x = g.find((k) => k.section === h);
       !(x != null && x.rows) || x.rows.length <= 1 || x.rows.splice(y, 1);
-    }, J = (y, h, x = "down") => {
-      var V;
-      const k = g.find((z) => z.section === h);
-      if (!((V = k == null ? void 0 : k.rows) != null && V[y]) || x === "up" && y === 0 || x === "down" && y === k.rows.length - 1)
+    }, H = (y, h, x = "down") => {
+      var z;
+      const k = g.find((U) => U.section === h);
+      if (!((z = k == null ? void 0 : k.rows) != null && z[y]) || x === "up" && y === 0 || x === "down" && y === k.rows.length - 1)
         return;
-      const M = k.rows, E = M.splice(y, 1)[0], D = x === "down" ? y + 1 : y - 1;
-      M.splice(D, 0, E);
+      const M = k.rows, T = M.splice(y, 1)[0], D = x === "down" ? y + 1 : y - 1;
+      M.splice(D, 0, T);
     }, _ = async (y, h, x, k = "right") => {
       var D;
-      const M = k === "left" ? h : h + 1, E = g.find((V) => V.section === x);
-      (D = E == null ? void 0 : E.rows) != null && D[y] && E.rows[y].columns.splice(M, 0, {
+      const M = k === "left" ? h : h + 1, T = g.find((z) => z.section === x);
+      (D = T == null ? void 0 : T.rows) != null && D[y] && T.rows[y].columns.splice(M, 0, {
         config: {},
         components: []
-      }), await new Promise((V) => {
+      }), await new Promise((z) => {
         setTimeout(() => {
-          const z = document.getElementById(`col-${x}-${y}-${M}`);
-          z ? (z.scrollIntoView({ behavior: "smooth", block: "center" }), z.classList.add("selected-delay"), setTimeout(() => {
-            z.classList.remove("selected-delay"), V();
-          }, 3e3)) : V();
+          const U = document.getElementById(`col-${x}-${y}-${M}`);
+          U ? (U.scrollIntoView({ behavior: "smooth", block: "center" }), U.classList.add("selected-delay"), setTimeout(() => {
+            U.classList.remove("selected-delay"), z();
+          }, 3e3)) : z();
         }, 0);
       });
     }, ee = (y, h, x) => {
-      var E, D;
-      const k = g.find((V) => V.section === x), M = (D = (E = k == null ? void 0 : k.rows) == null ? void 0 : E[y]) == null ? void 0 : D.columns;
+      var T, D;
+      const k = g.find((z) => z.section === x), M = (D = (T = k == null ? void 0 : k.rows) == null ? void 0 : T[y]) == null ? void 0 : D.columns;
       !M || M.length <= 1 || M.splice(h, 1);
     }, te = (y, h, x, k = "right") => {
-      var z;
+      var U;
       const M = g.find((K) => K.section === x);
-      if (!((z = M == null ? void 0 : M.rows) != null && z[y]) || k === "left" && h === 0 || k === "right" && h === M.rows[y].columns.length - 1)
+      if (!((U = M == null ? void 0 : M.rows) != null && U[y]) || k === "left" && h === 0 || k === "right" && h === M.rows[y].columns.length - 1)
         return;
-      const E = M.rows[y].columns, D = E.splice(h, 1)[0], V = k === "right" ? h + 1 : h - 1;
-      E.splice(V, 0, D);
+      const T = M.rows[y].columns, D = T.splice(h, 1)[0], z = k === "right" ? h + 1 : h - 1;
+      T.splice(z, 0, D);
     }, ge = (y, h) => {
       var k;
       const x = g.find((M) => M.section === h);
       (k = x == null ? void 0 : x.rows) == null || k.forEach((M) => {
-        M.columns.forEach((E) => {
-          const D = E.components.indexOf(y);
-          D !== -1 && E.components.splice(D, 1);
+        M.columns.forEach((T) => {
+          const D = T.components.indexOf(y);
+          D !== -1 && T.components.splice(D, 1);
         });
       });
     }, fe = (y, h, x) => {
-      a.value = !0, n.value = { rowIndex: y, columnIndex: h, section: x };
+      r.value = !0, l.value = { rowIndex: y, columnIndex: h, section: x };
     }, re = (y) => {
-      var M, E, D, V;
-      const { rowIndex: h, columnIndex: x, section: k } = n.value;
+      var M, T, D, z;
+      const { rowIndex: h, columnIndex: x, section: k } = l.value;
       if (h !== null && x !== null) {
-        const z = JSON.parse(JSON.stringify(y)), K = g.find((pe) => pe.section === k), Z = (V = (D = (E = (M = K == null ? void 0 : K.rows) == null ? void 0 : M[h]) == null ? void 0 : E.columns) == null ? void 0 : D[x]) == null ? void 0 : V.components;
-        Z == null || Z.push(z);
+        const U = JSON.parse(JSON.stringify(y)), K = g.find((pe) => pe.section === k), Z = (z = (D = (T = (M = K == null ? void 0 : K.rows) == null ? void 0 : M[h]) == null ? void 0 : T.columns) == null ? void 0 : D[x]) == null ? void 0 : z.components;
+        Z == null || Z.push(U);
       }
-      a.value = !1;
+      r.value = !1;
     }, se = (y) => {
       const h = typeof y == "string" ? JSON.parse(y) : y;
       g.length = 0, g.push(...h.pageConfig || []), h.paramsConfig && (P.value = { ...P.value, ...h.paramsConfig });
     };
-    return (y, h) => (i(), d("div", Kn, [
+    return (y, h) => (i(), d("div", Xn, [
       L(dt, {
         sectionSelected: I.value,
         "onUpdate:sectionSelected": h[0] || (h[0] = (x) => I.value = x),
@@ -2167,7 +2192,7 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         availableSections: c.value,
         importConfigurationFunction: se,
         isComponentMode: f.value,
-        toggleComponentModeFunction: r,
+        toggleComponentModeFunction: a,
         fullwidthMode: w.value,
         toggleFullwidthMode: F,
         renderApiDomain: q(m),
@@ -2175,38 +2200,38 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         debugMode: q($),
         submitForm: q(p)
       }, null, 8, ["sectionSelected", "parametersPageConfiguration", "globalPageConfiguration", "availableSections", "isComponentMode", "fullwidthMode", "renderApiDomain", "inputId", "debugMode", "submitForm"]),
-      t("div", Qn, [
+      t("div", Zn, [
         w.value ? (i(), d("div", {
           key: 0,
-          class: G(["w-full overflow-y-auto fixed top-0 left-0 h-full bg-gradient-to-br from-slate-100 via-white to-slate-50 z-9999 px-4 flex justify-start flex flex-col items-center backdrop-blur-sm", a.value ? "" : "hidden"])
+          class: G(["w-full overflow-y-auto fixed top-0 left-0 h-full bg-gradient-to-br from-slate-100 via-white to-slate-50 z-9999 px-4 flex justify-start flex flex-col items-center backdrop-blur-sm", r.value ? "" : "hidden"])
         }, [
-          t("div", Xn, [
+          t("div", _n, [
             t("div", {
               class: "cursor-pointer w-10 h-10 flex items-center justify-center rounded-full bg-white shadow-md hover:shadow-lg hover:bg-red-50 text-slate-400 hover:text-red-500 transition-all duration-200 text-xl font-light",
-              onClick: h[2] || (h[2] = (x) => a.value = !1)
+              onClick: h[2] || (h[2] = (x) => r.value = !1)
             }, "✕")
           ]),
-          t("div", Zn, [
+          t("div", el, [
             L(de, {
               renderApiDomain: q(m),
               isComponentMode: f.value,
               fullwidthMode: w.value,
-              columnToInsert: n.value,
+              columnToInsert: l.value,
               addComponentToColumn: re,
-              toggleComponentModeFunction: r,
+              toggleComponentModeFunction: a,
               isProduction: q(b),
               components: R.value,
               excludedCategories: s
             }, null, 8, ["renderApiDomain", "isComponentMode", "fullwidthMode", "columnToInsert", "isProduction", "components"])
           ])
-        ], 2)) : (i(), d("div", _n, [
+        ], 2)) : (i(), d("div", tl, [
           L(de, {
             renderApiDomain: q(m),
             isComponentMode: f.value,
             fullwidthMode: w.value,
-            columnToInsert: n.value,
+            columnToInsert: l.value,
             addComponentToColumn: re,
-            toggleComponentModeFunction: r,
+            toggleComponentModeFunction: a,
             isProduction: q(b),
             components: R.value,
             excludedCategories: s
@@ -2215,20 +2240,20 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
         t("div", {
           class: G([w.value ? "w-full px-4" : "w-3/4 ps-3", "flex flex-col gap-5"])
         }, [
-          L(Un, {
+          L(qn, {
             globalPageConfiguration: g,
             isComponentMode: f.value,
             removeComponent: ge,
             addComponentFunction: fe,
             fullwidthMode: w.value,
             addCol: _,
-            addRow: U,
+            addRow: N,
             removeRow: X,
             removeCol: ee,
             moveCol: te,
             updateRowConfig: j,
             updateColConfig: B,
-            moveRow: J,
+            moveRow: H,
             sectionSelected: I.value,
             renderApiDomain: q(m),
             isProduction: q(b)
@@ -2239,15 +2264,15 @@ const dt = /* @__PURE__ */ $e(Ce, [["render", it]]), ut = {
   }
 });
 export {
-  Un as BodySection,
-  un as ColConfig,
+  qn as BodySection,
+  mn as ColConfig,
   de as ComponentsBox,
   po as FeedComponent,
   ie as FieldsForm,
   dt as GlobalConfig,
   be as InitialComponent,
-  ll as Pagebuilder,
-  On as RowConfig,
+  rl as Pagebuilder,
+  Vn as RowConfig,
   Bt as SourceFilter,
-  ll as default
+  rl as default
 };