@brunoalz/smartgesti-site-editor 0.2.2 → 1.1.0

package/dist/editor/PageTabBar.js

@@ -1,37 +1,61 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-function g({
-  pages: i,
-  currentPageId: a,
-  onSelectPage: n,
-  onAddPage: d,
-  onRemovePage: l,
-  canRemovePage: s
+import { jsxs as t, jsx as r, Fragment as f } from "react/jsx-runtime";
+import { useState as $, useRef as M, useEffect as L, useMemo as c, useCallback as j } from "react";
+import { pluginRegistry as A } from "../engine/plugins/pluginRegistry.js";
+function R({
+  pages: n,
+  currentPageId: h,
+  onSelectPage: u,
+  onAddPage: k,
+  onRemovePage: v,
+  canRemovePage: y,
+  activePlugins: w,
+  onActivatePlugin: g,
+  onDeactivatePlugin: m
 }) {
-  return /* @__PURE__ */ t("div", { className: "flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2", children: [
-    /* @__PURE__ */ r("div", { className: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider", children: "Módulos:" }),
-    /* @__PURE__ */ t("div", { className: "flex-1 flex items-center gap-2 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600", children: [
-      i.map((e) => {
-        const o = e.id === a;
+  const [l, o] = $(!1), d = M(null);
+  L(() => {
+    if (!l) return;
+    const e = (a) => {
+      d.current && !d.current.contains(a.target) && o(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [l]);
+  const p = c(() => A.getAll(), []), N = c(
+    () => n.filter((e) => !e.pluginId),
+    [n]
+  ), x = c(
+    () => n.filter((e) => !!e.pluginId),
+    [n]
+  ), C = j(
+    (e, a) => {
+      a ? m(e) : g(e);
+    },
+    [g, m]
+  );
+  return /* @__PURE__ */ t("div", { className: "flex items-center border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-2.5", children: [
+    /* @__PURE__ */ t("div", { className: "flex-1 flex items-center gap-2 overflow-x-auto min-w-0 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 pr-2", children: [
+      N.map((e) => {
+        const a = e.id === h;
         return /* @__PURE__ */ t(
           "div",
           {
             className: `
-                group relative flex items-center gap-2 px-3 py-1.5
-                rounded-md cursor-pointer transition-all duration-150 flex-shrink-0
-                ${o ? "bg-blue-500 text-white shadow-sm" : "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}
+                group relative flex items-center gap-2 px-4 py-2
+                rounded-lg cursor-pointer transition-all duration-150 flex-shrink-0
+                ${a ? "bg-blue-500 text-white shadow-md shadow-blue-500/25" : "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700"}
               `,
-            onClick: () => n(e.id),
-            title: `Módulo: ${e.name} (${e.slug})`,
+            onClick: () => u(e.id),
+            title: `${e.name} (/${e.slug})`,
             children: [
               /* @__PURE__ */ t(
                 "svg",
                 {
-                  width: "14",
-                  height: "14",
+                  width: "15",
+                  height: "15",
                   viewBox: "0 0 16 16",
                   fill: "none",
                   stroke: "currentColor",
-                  strokeWidth: "2",
+                  strokeWidth: "1.5",
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   children: [
@@ -40,19 +64,19 @@ function g({
                   ]
                 }
               ),
-              /* @__PURE__ */ r("span", { className: "text-xs font-medium whitespace-nowrap", children: e.name }),
-              s(e.id) && /* @__PURE__ */ r(
+              /* @__PURE__ */ r("span", { className: "text-sm font-medium whitespace-nowrap", children: e.name }),
+              y(e.id) && /* @__PURE__ */ r(
                 "button",
                 {
-                  onClick: (h) => {
-                    h.stopPropagation(), l(e.id);
+                  onClick: (s) => {
+                    s.stopPropagation(), v(e.id);
                   },
                   className: `
-                    flex-shrink-0 w-4 h-4 rounded flex items-center justify-center
+                    flex-shrink-0 w-5 h-5 rounded flex items-center justify-center
                     transition-all duration-150
-                    ${o ? "opacity-70 hover:opacity-100 hover:bg-red-600" : "opacity-0 group-hover:opacity-70 hover:!opacity-100 hover:bg-red-500 hover:text-white"}
+                    ${a ? "opacity-60 hover:opacity-100 hover:bg-white/20" : "opacity-0 group-hover:opacity-60 hover:!opacity-100 hover:bg-red-500 hover:text-white"}
                   `,
-                  title: `Remover módulo ${e.name}`,
+                  title: `Remover ${e.name}`,
                   children: /* @__PURE__ */ r(
                     "svg",
                     {
@@ -73,25 +97,48 @@ function g({
           e.id
         );
       }),
+      x.length > 0 && /* @__PURE__ */ t(f, { children: [
+        /* @__PURE__ */ r("div", { className: "w-px h-6 bg-gray-200 dark:bg-gray-700 flex-shrink-0" }),
+        x.map((e) => {
+          const a = e.id === h;
+          return /* @__PURE__ */ t(
+            "div",
+            {
+              className: `
+                    flex items-center gap-2 px-4 py-2
+                    rounded-lg cursor-pointer transition-all duration-150 flex-shrink-0
+                    ${a ? "bg-purple-500 text-white shadow-md shadow-purple-500/25" : "bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/40"}
+                  `,
+              onClick: () => u(e.id),
+              title: `Plugin: ${e.name} (/${e.slug})`,
+              children: [
+                /* @__PURE__ */ r("span", { className: "text-sm flex-shrink-0", children: "🧩" }),
+                /* @__PURE__ */ r("span", { className: "text-sm font-medium whitespace-nowrap", children: e.name })
+              ]
+            },
+            e.id
+          );
+        })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex-shrink-0 ml-3 relative", ref: d, children: [
       /* @__PURE__ */ t(
         "button",
         {
-          onClick: d,
+          onClick: () => o((e) => !e),
           className: `
-            flex items-center justify-center gap-1.5 px-3 py-1.5
-            text-xs font-medium text-gray-600 dark:text-gray-400
-            bg-gray-100 dark:bg-gray-800
-            hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950 dark:hover:text-blue-400
-            border border-dashed border-gray-300 dark:border-gray-600
-            rounded-md transition-all duration-150 flex-shrink-0
+            flex items-center gap-2 px-4 py-2
+            text-sm font-medium rounded-lg transition-all duration-150
+            bg-blue-500 text-white hover:bg-blue-600
+            shadow-sm hover:shadow-md
           `,
-          title: "Adicionar novo módulo",
+          title: "Adicionar página ou ativar plugin",
           children: [
             /* @__PURE__ */ r(
               "svg",
               {
-                width: "14",
-                height: "14",
+                width: "16",
+                height: "16",
                 viewBox: "0 0 16 16",
                 fill: "none",
                 stroke: "currentColor",
@@ -100,14 +147,105 @@ function g({
                 children: /* @__PURE__ */ r("path", { d: "M8 3V13M3 8H13" })
               }
             ),
-            /* @__PURE__ */ r("span", { className: "whitespace-nowrap", children: "Novo Módulo" })
+            /* @__PURE__ */ r("span", { className: "whitespace-nowrap", children: "Adicionar" }),
+            /* @__PURE__ */ r(
+              "svg",
+              {
+                className: `w-3.5 h-3.5 transition-transform ${l ? "rotate-180" : ""}`,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
           ]
         }
-      )
+      ),
+      l && /* @__PURE__ */ t("div", { className: "absolute top-full right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden", children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            onClick: () => {
+              o(!1), k();
+            },
+            className: "w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors",
+            children: [
+              /* @__PURE__ */ r("div", { className: "w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ r(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  className: "text-blue-600 dark:text-blue-400",
+                  children: /* @__PURE__ */ r("path", { d: "M8 3V13M3 8H13" })
+                }
+              ) }),
+              /* @__PURE__ */ t("div", { children: [
+                /* @__PURE__ */ r("p", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: "Nova Página" }),
+                /* @__PURE__ */ r("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Criar uma página em branco" })
+              ] })
+            ]
+          }
+        ),
+        p.length > 0 && /* @__PURE__ */ t(f, { children: [
+          /* @__PURE__ */ r("div", { className: "border-t border-gray-200 dark:border-gray-700" }),
+          /* @__PURE__ */ r("div", { className: "px-4 py-2", children: /* @__PURE__ */ r("p", { className: "text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider", children: "Plugins" }) }),
+          p.map((e) => {
+            const { id: a, name: s, description: b } = e.manifest, i = w.includes(a);
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                className: "flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: `w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors ${i ? "bg-purple-100 dark:bg-purple-900/30" : "bg-gray-100 dark:bg-gray-800"}`,
+                      children: /* @__PURE__ */ r("span", { className: "text-base", children: "🧩" })
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ r("p", { className: "text-sm font-medium text-gray-800 dark:text-gray-200", children: s }),
+                    b && /* @__PURE__ */ r("p", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: b })
+                  ] }),
+                  /* @__PURE__ */ r(
+                    "button",
+                    {
+                      onClick: () => C(a, i),
+                      className: `
+                          relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors
+                          ${i ? "bg-purple-500" : "bg-gray-300 dark:bg-gray-600"}
+                        `,
+                      role: "switch",
+                      "aria-checked": i,
+                      "aria-label": `${i ? "Desativar" : "Ativar"} ${s}`,
+                      children: /* @__PURE__ */ r(
+                        "span",
+                        {
+                          className: `
+                            pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition-transform
+                            ${i ? "translate-x-5" : "translate-x-0"}
+                          `
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              a
+            );
+          })
+        ] })
+      ] })
     ] })
   ] });
 }
 export {
-  g as PageTabBar
+  R as PageTabBar
 };
 //# sourceMappingURL=PageTabBar.js.map

package/dist/editor/PageTabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTabBar.js","sources":["../../src/editor/PageTabBar.tsx"],"sourcesContent":["/**\n * PageTabBar - Barra de abas para navegação entre páginas\n * Componente inspirado em abas de browser para switching entre páginas do site\n */\n\nimport { SitePage } from \"@/engine/schema/siteDocument\";\n\nexport interface PageTabBarProps {\n  pages: SitePage[];\n  currentPageId: string;\n  onSelectPage: (id: string) => void;\n  onAddPage: () => void;\n  onRemovePage: (id: string) => void;\n  canRemovePage: (id: string) => boolean;\n}\n\nexport function PageTabBar({\n  pages,\n  currentPageId,\n  onSelectPage,\n  onAddPage,\n  onRemovePage,\n  canRemovePage,\n}: PageTabBarProps) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-3 py-2\">\n      <div className=\"text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider\">\n        Módulos:\n      </div>\n\n      {/* Container com scroll horizontal para módulos */}\n      <div className=\"flex-1 flex items-center gap-2 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600\">\n        {pages.map((page) => {\n          const isActive = page.id === currentPageId;\n\n          return (\n            <div\n              key={page.id}\n              className={`\n                group relative flex items-center gap-2 px-3 py-1.5\n                rounded-md cursor-pointer transition-all duration-150 flex-shrink-0\n                ${\n                  isActive\n                    ? \"bg-blue-500 text-white shadow-sm\"\n                    : \"bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700\"\n                }\n              `}\n              onClick={() => onSelectPage(page.id)}\n              title={`Módulo: ${page.name} (${page.slug})`}\n            >\n              {/* Ícone de módulo */}\n              <svg\n                width=\"14\"\n                height=\"14\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" />\n                <path d=\"M2 6h12M6 2v12\" />\n              </svg>\n\n              {/* Nome da página */}\n              <span className=\"text-xs font-medium whitespace-nowrap\">\n                {page.name}\n              </span>\n\n              {/* Botão de remover (apenas para páginas removíveis) */}\n              {canRemovePage(page.id) && (\n                <button\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onRemovePage(page.id);\n                  }}\n                  className={`\n                    flex-shrink-0 w-4 h-4 rounded flex items-center justify-center\n                    transition-all duration-150\n                    ${\n                      isActive\n                        ? \"opacity-70 hover:opacity-100 hover:bg-red-600\"\n                        : \"opacity-0 group-hover:opacity-70 hover:!opacity-100 hover:bg-red-500 hover:text-white\"\n                    }\n                  `}\n                  title={`Remover módulo ${page.name}`}\n                >\n                  <svg\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                  >\n                    <path d=\"M2 2L10 10M10 2L2 10\" />\n                  </svg>\n                </button>\n              )}\n            </div>\n          );\n        })}\n\n        {/* Botão de adicionar módulo */}\n        <button\n          onClick={onAddPage}\n          className=\"\n            flex items-center justify-center gap-1.5 px-3 py-1.5\n            text-xs font-medium text-gray-600 dark:text-gray-400\n            bg-gray-100 dark:bg-gray-800\n            hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-blue-950 dark:hover:text-blue-400\n            border border-dashed border-gray-300 dark:border-gray-600\n            rounded-md transition-all duration-150 flex-shrink-0\n          \"\n          title=\"Adicionar novo módulo\"\n        >\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          >\n            <path d=\"M8 3V13M3 8H13\" />\n          </svg>\n          <span className=\"whitespace-nowrap\">Novo Módulo</span>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":["PageTabBar","pages","currentPageId","onSelectPage","onAddPage","onRemovePage","canRemovePage","jsxs","jsx","page","isActive","e"],"mappings":";AAgBO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AACF,GAAoB;AAClB,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,6GACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,mFAAkF,UAAA,YAEjG;AAAA,IAGA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wHACZ,UAAA;AAAA,MAAAN,EAAM,IAAI,CAACQ,MAAS;AACnB,cAAMC,IAAWD,EAAK,OAAOP;AAE7B,eACE,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA;AAAA;AAAA,kBAIPG,IACI,qCACA,wGACN;AAAA;AAAA,YAEF,SAAS,MAAMP,EAAaM,EAAK,EAAE;AAAA,YACnC,OAAO,WAAWA,EAAK,IAAI,KAAKA,EAAK,IAAI;AAAA,YAGzC,UAAA;AAAA,cAAA,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,gBAAe;AAAA,kBAEf,UAAA;AAAA,oBAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,oBAChD,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAI3B,gBAAAA,EAAC,QAAA,EAAK,WAAU,yCACb,YAAK,MACR;AAAA,cAGCF,EAAcG,EAAK,EAAE,KACpB,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,CAACG,MAAM;AACd,oBAAAA,EAAE,gBAAA,GACFN,EAAaI,EAAK,EAAE;AAAA,kBACtB;AAAA,kBACA,WAAW;AAAA;AAAA;AAAA,sBAIPC,IACI,kDACA,uFACN;AAAA;AAAA,kBAEF,OAAO,kBAAkBD,EAAK,IAAI;AAAA,kBAElC,UAAA,gBAAAD;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAM;AAAA,sBACN,QAAO;AAAA,sBACP,SAAQ;AAAA,sBACR,MAAK;AAAA,sBACL,QAAO;AAAA,sBACP,aAAY;AAAA,sBACZ,eAAc;AAAA,sBAEd,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,uBAAA,CAAuB;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACjC;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,UA9DGC,EAAK;AAAA,QAAA;AAAA,MAkEhB,CAAC;AAAA,MAGD,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASH;AAAA,UACT,WAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQV,OAAM;AAAA,UAEN,UAAA;AAAA,YAAA,gBAAAI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,aAAY;AAAA,gBACZ,eAAc;AAAA,gBAEd,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,YAE3B,gBAAAA,EAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,cAAA,CAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PageTabBar.js","sources":["../../src/editor/PageTabBar.tsx"],"sourcesContent":["/**\n * PageTabBar - Barra de abas para navegação entre páginas e ativação de plugins\n *\n * Layout expandido:\n * ┌─────────────────────────────────────────────────────────────────┐\n * │  [Home]  [🧩 Blog]  [🧩 Post]                   [+ Adicionar] │\n * └─────────────────────────────────────────────────────────────────┘\n *\n * O botão [+ Adicionar] abre um dropdown com:\n * - Nova Página (cria página em branco)\n * - Seção Plugins com toggles para ativar/desativar\n */\n\nimport { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport { SitePage } from \"@/engine/schema/siteDocument\";\nimport { pluginRegistry } from \"../engine\";\n\nexport interface PageTabBarProps {\n  pages: SitePage[];\n  currentPageId: string;\n  onSelectPage: (id: string) => void;\n  onAddPage: () => void;\n  onRemovePage: (id: string) => void;\n  canRemovePage: (id: string) => boolean;\n  activePlugins: string[];\n  onActivatePlugin: (pluginId: string) => void;\n  onDeactivatePlugin: (pluginId: string) => void;\n}\n\nexport function PageTabBar({\n  pages,\n  currentPageId,\n  onSelectPage,\n  onAddPage,\n  onRemovePage,\n  canRemovePage,\n  activePlugins,\n  onActivatePlugin,\n  onDeactivatePlugin,\n}: PageTabBarProps) {\n  const [showMenu, setShowMenu] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  // Fechar dropdown ao clicar fora\n  useEffect(() => {\n    if (!showMenu) return;\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        setShowMenu(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [showMenu]);\n\n  const availablePlugins = useMemo(() => pluginRegistry.getAll(), []);\n\n  // Separar páginas: regulares vs plugins\n  const regularPages = useMemo(\n    () => pages.filter((p) => !p.pluginId),\n    [pages],\n  );\n  const pluginPages = useMemo(\n    () => pages.filter((p) => !!p.pluginId),\n    [pages],\n  );\n\n  const handleTogglePlugin = useCallback(\n    (pluginId: string, isActive: boolean) => {\n      if (isActive) {\n        onDeactivatePlugin(pluginId);\n      } else {\n        onActivatePlugin(pluginId);\n      }\n    },\n    [onActivatePlugin, onDeactivatePlugin],\n  );\n\n  return (\n    <div className=\"flex items-center border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-2.5\">\n      {/* ── Área scrollável: tabs de páginas ── */}\n      <div className=\"flex-1 flex items-center gap-2 overflow-x-auto min-w-0 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 pr-2\">\n        {/* Páginas regulares */}\n        {regularPages.map((page) => {\n          const isActive = page.id === currentPageId;\n          return (\n            <div\n              key={page.id}\n              className={`\n                group relative flex items-center gap-2 px-4 py-2\n                rounded-lg cursor-pointer transition-all duration-150 flex-shrink-0\n                ${\n                  isActive\n                    ? \"bg-blue-500 text-white shadow-md shadow-blue-500/25\"\n                    : \"bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700\"\n                }\n              `}\n              onClick={() => onSelectPage(page.id)}\n              title={`${page.name} (/${page.slug})`}\n            >\n              <svg\n                width=\"15\"\n                height=\"15\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              >\n                <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"2\" />\n                <path d=\"M2 6h12M6 2v12\" />\n              </svg>\n              <span className=\"text-sm font-medium whitespace-nowrap\">\n                {page.name}\n              </span>\n\n              {/* Botão de remover (hover) */}\n              {canRemovePage(page.id) && (\n                <button\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onRemovePage(page.id);\n                  }}\n                  className={`\n                    flex-shrink-0 w-5 h-5 rounded flex items-center justify-center\n                    transition-all duration-150\n                    ${\n                      isActive\n                        ? \"opacity-60 hover:opacity-100 hover:bg-white/20\"\n                        : \"opacity-0 group-hover:opacity-60 hover:!opacity-100 hover:bg-red-500 hover:text-white\"\n                    }\n                  `}\n                  title={`Remover ${page.name}`}\n                >\n                  <svg\n                    width=\"10\"\n                    height=\"10\"\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                  >\n                    <path d=\"M2 2L10 10M10 2L2 10\" />\n                  </svg>\n                </button>\n              )}\n            </div>\n          );\n        })}\n\n        {/* Páginas de plugins ativos */}\n        {pluginPages.length > 0 && (\n          <>\n            <div className=\"w-px h-6 bg-gray-200 dark:bg-gray-700 flex-shrink-0\" />\n            {pluginPages.map((page) => {\n              const isActive = page.id === currentPageId;\n              return (\n                <div\n                  key={page.id}\n                  className={`\n                    flex items-center gap-2 px-4 py-2\n                    rounded-lg cursor-pointer transition-all duration-150 flex-shrink-0\n                    ${\n                      isActive\n                        ? \"bg-purple-500 text-white shadow-md shadow-purple-500/25\"\n                        : \"bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-900/40\"\n                    }\n                  `}\n                  onClick={() => onSelectPage(page.id)}\n                  title={`Plugin: ${page.name} (/${page.slug})`}\n                >\n                  <span className=\"text-sm flex-shrink-0\">🧩</span>\n                  <span className=\"text-sm font-medium whitespace-nowrap\">\n                    {page.name}\n                  </span>\n                </div>\n              );\n            })}\n          </>\n        )}\n      </div>\n\n      {/* ── Botão \"+ Adicionar\" fixo no canto direito ── */}\n      <div className=\"flex-shrink-0 ml-3 relative\" ref={menuRef}>\n        <button\n          onClick={() => setShowMenu((prev) => !prev)}\n          className={`\n            flex items-center gap-2 px-4 py-2\n            text-sm font-medium rounded-lg transition-all duration-150\n            bg-blue-500 text-white hover:bg-blue-600\n            shadow-sm hover:shadow-md\n          `}\n          title=\"Adicionar página ou ativar plugin\"\n        >\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          >\n            <path d=\"M8 3V13M3 8H13\" />\n          </svg>\n          <span className=\"whitespace-nowrap\">Adicionar</span>\n          <svg\n            className={`w-3.5 h-3.5 transition-transform ${showMenu ? \"rotate-180\" : \"\"}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        </button>\n\n        {/* Dropdown */}\n        {showMenu && (\n          <div className=\"absolute top-full right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 z-50 overflow-hidden\">\n            {/* Nova Página */}\n            <button\n              onClick={() => {\n                setShowMenu(false);\n                onAddPage();\n              }}\n              className=\"w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors\"\n            >\n              <div className=\"w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0\">\n                <svg\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  className=\"text-blue-600 dark:text-blue-400\"\n                >\n                  <path d=\"M8 3V13M3 8H13\" />\n                </svg>\n              </div>\n              <div>\n                <p className=\"text-sm font-medium text-gray-800 dark:text-gray-200\">\n                  Nova Página\n                </p>\n                <p className=\"text-xs text-gray-500 dark:text-gray-400\">\n                  Criar uma página em branco\n                </p>\n              </div>\n            </button>\n\n            {/* Plugins */}\n            {availablePlugins.length > 0 && (\n              <>\n                <div className=\"border-t border-gray-200 dark:border-gray-700\" />\n                <div className=\"px-4 py-2\">\n                  <p className=\"text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider\">\n                    Plugins\n                  </p>\n                </div>\n                {availablePlugins.map((plugin) => {\n                  const { id, name, description } = plugin.manifest;\n                  const isActive = activePlugins.includes(id);\n\n                  return (\n                    <div\n                      key={id}\n                      className=\"flex items-center gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors\"\n                    >\n                      <div\n                        className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors ${\n                          isActive\n                            ? \"bg-purple-100 dark:bg-purple-900/30\"\n                            : \"bg-gray-100 dark:bg-gray-800\"\n                        }`}\n                      >\n                        <span className=\"text-base\">🧩</span>\n                      </div>\n                      <div className=\"flex-1 min-w-0\">\n                        <p className=\"text-sm font-medium text-gray-800 dark:text-gray-200\">\n                          {name}\n                        </p>\n                        {description && (\n                          <p className=\"text-xs text-gray-500 dark:text-gray-400 truncate\">\n                            {description}\n                          </p>\n                        )}\n                      </div>\n                      {/* Toggle switch */}\n                      <button\n                        onClick={() => handleTogglePlugin(id, isActive)}\n                        className={`\n                          relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors\n                          ${\n                            isActive\n                              ? \"bg-purple-500\"\n                              : \"bg-gray-300 dark:bg-gray-600\"\n                          }\n                        `}\n                        role=\"switch\"\n                        aria-checked={isActive}\n                        aria-label={`${isActive ? \"Desativar\" : \"Ativar\"} ${name}`}\n                      >\n                        <span\n                          className={`\n                            pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform transition-transform\n                            ${isActive ? \"translate-x-5\" : \"translate-x-0\"}\n                          `}\n                        />\n                      </button>\n                    </div>\n                  );\n                })}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["PageTabBar","pages","currentPageId","onSelectPage","onAddPage","onRemovePage","canRemovePage","activePlugins","onActivatePlugin","onDeactivatePlugin","showMenu","setShowMenu","useState","menuRef","useRef","useEffect","handleClick","e","availablePlugins","useMemo","pluginRegistry","regularPages","p","pluginPages","handleTogglePlugin","useCallback","pluginId","isActive","jsxs","page","jsx","Fragment","prev","plugin","id","name","description"],"mappings":"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"}

package/dist/editor/PropertyEditor/BlockPropertyEditor.d.ts

@@ -1,11 +1,13 @@
-import { Block, SiteDocumentV2 } from '../../engine';
-import { UploadConfig } from '../LandingPageEditorV2';
+import { Block, SiteDocument } from '../../engine';
+import { UploadConfig } from '../LandingPageEditor';
 interface BlockPropertyEditorProps {
     block: Block | null;
-    document?: SiteDocumentV2;
+    document?: SiteDocument;
     currentPageId?: string;
     onUpdate: (updates: Record<string, any>) => void;
     uploadConfig?: UploadConfig;
+    /** When set, the matching property group opens and scrolls into view */
+    focusedGroup?: string | null;
 }
 /**
  * Componente principal do editor de propriedades

package/dist/editor/PropertyEditor/BlockPropertyEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockPropertyEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/PropertyEditor/BlockPropertyEditor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,EAAE,cAAc,EAAoC,MAAM,cAAc,CAAC;AAIvF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,UAAU,wBAAwB;IAChC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gEA4H9B,CAAC"}
+{"version":3,"file":"BlockPropertyEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/PropertyEditor/BlockPropertyEditor.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,EAAE,YAAY,EAAsE,MAAM,cAAc,CAAC;AAKvH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,UAAU,wBAAwB;IAChC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,wEAAwE;IACxE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,gEAyI9B,CAAC"}

package/dist/editor/PropertyEditor/BlockPropertyEditor.js

@@ -1,129 +1,76 @@
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { memo as C, useMemo as y, useCallback as M } from "react";
-import "../../engine/schema/themeTokens.js";
-import { componentRegistry as B } from "../../engine/registry/registry.js";
-import "../../engine/registry/blocks/layout/container.js";
-import "../../engine/registry/blocks/layout/stack.js";
-import "../../engine/registry/blocks/layout/grid.js";
-import "../../engine/registry/blocks/layout/box.js";
-import "../../engine/registry/blocks/layout/spacer.js";
-import "../../engine/registry/blocks/content/heading.js";
-import "../../engine/registry/blocks/content/text.js";
-import "../../engine/registry/blocks/content/image.js";
-import "../../engine/registry/blocks/content/button.js";
-import "../../engine/registry/blocks/content/link.js";
-import "../../engine/registry/blocks/content/divider.js";
-import "../../engine/registry/blocks/content/badge.js";
-import "../../engine/registry/blocks/content/icon.js";
-import "../../engine/registry/blocks/content/avatar.js";
-import "../../engine/registry/blocks/content/video.js";
-import "../../engine/registry/blocks/content/socialLinks.js";
-import "../../engine/registry/blocks/composition/card.js";
-import "../../engine/registry/blocks/composition/section.js";
-import "../../engine/registry/blocks/sections/hero.js";
-import "../../engine/registry/blocks/sections/navbar.js";
-import "../../engine/registry/blocks/sections/footer.js";
-import "../../engine/registry/blocks/sections/feature.js";
-import "../../engine/registry/blocks/sections/featureGrid.js";
-import "../../engine/registry/blocks/sections/pricing.js";
-import "../../engine/registry/blocks/sections/pricingCard.js";
-import "../../engine/registry/blocks/sections/testimonial.js";
-import "../../engine/registry/blocks/sections/testimonialGrid.js";
-import "../../engine/registry/blocks/sections/faq.js";
-import "../../engine/registry/blocks/sections/faqItem.js";
-import "../../engine/registry/blocks/sections/cta.js";
-import "../../engine/registry/blocks/sections/stats.js";
-import "../../engine/registry/blocks/sections/statItem.js";
-import "../../engine/registry/blocks/sections/logoCloud.js";
-import "../../engine/registry/blocks/sections/countdown.js";
-import "../../engine/registry/blocks/sections/carousel.js";
-import "../../engine/registry/blocks/sections/blogCard.js";
-import "../../engine/registry/blocks/sections/blogCardGrid.js";
-import "../../engine/registry/blocks/sections/teamCard.js";
-import "../../engine/registry/blocks/sections/teamGrid.js";
-import "../../engine/registry/blocks/sections/courseCardGrid.js";
-import "../../engine/registry/blocks/sections/categoryCardGrid.js";
-import "../../engine/registry/blocks/forms/form.js";
-import "../../engine/registry/blocks/forms/input.js";
-import "../../engine/registry/blocks/forms/textarea.js";
-import "../../engine/registry/blocks/forms/select.js";
-import "../../engine/render/renderers/layout/index.js";
-import "../../engine/render/renderers/content/index.js";
-import "../../engine/render/renderers/composition/index.js";
-import "../../engine/render/renderers/sections/index.js";
-import "../../engine/render/renderers/forms/index.js";
-import "../../engine/export/exporters/layout/index.js";
-import "../../engine/export/exporters/content/index.js";
-import "../../engine/export/exporters/sections/index.js";
-import "../../engine/export/exporters/forms/index.js";
-import "../../engine/theme/defaultTheme.js";
-import { VariationSelector as E } from "./VariationSelector.js";
-import { BlockHeader as H } from "./BlockHeader.js";
-import { CollapsiblePropertyGroup as N } from "./CollapsiblePropertyGroup.js";
-const It = C(function({
-  block: t,
-  onUpdate: p,
-  uploadConfig: x
+import { jsx as p, jsxs as g } from "react/jsx-runtime";
+import { memo as S, useMemo as l, useCallback as j } from "react";
+import { VariationSelector as M } from "./VariationSelector.js";
+import { BlockHeader as O } from "./BlockHeader.js";
+import { CollapsiblePropertyGroup as W } from "./CollapsiblePropertyGroup.js";
+import { evaluateShowWhen as B } from "../../engine/shared/showWhen.js";
+import { componentRegistry as E } from "../../engine/registry/registry.js";
+import { pluginRegistry as R } from "../../engine/plugins/pluginRegistry.js";
+const I = S(function({
+  block: e,
+  document: i,
+  currentPageId: f,
+  onUpdate: n,
+  uploadConfig: x,
+  focusedGroup: v
 }) {
-  const i = y(() => t ? B.get(t.type) : null, [t]), l = y(() => {
-    if (!t || !i?.inspectorMeta) return {};
-    const o = t.props, r = i.defaultProps || {}, n = {};
-    for (const [s, e] of Object.entries(
-      i.inspectorMeta
+  const o = l(() => e ? E.get(e.type) : null, [e]), m = l(
+    () => ({ document: i, currentPageId: f }),
+    [i, f]
+  ), h = l(() => {
+    if (!e || !i) return /* @__PURE__ */ new Set();
+    const t = R.getEditorRestrictions(i, e.type);
+    return t?.lockedFields ? new Set(t.lockedFields) : /* @__PURE__ */ new Set();
+  }, [e, i]), y = l(() => {
+    if (!e || !o?.inspectorMeta) return {};
+    const t = e.props, r = o.defaultProps || {}, c = {};
+    for (const [a, s] of Object.entries(
+      o.inspectorMeta
     )) {
-      if (s === "logoHeight" && !o.logo)
+      if (s.showWhen && !B(s.showWhen, t, r, m))
         continue;
-      if (e.showWhen) {
-        const { field: d, equals: u, notEquals: f } = e.showWhen, g = o[d] ?? r[d];
-        if (u !== void 0 && g !== u || f !== void 0 && g === f)
-          continue;
-      }
-      const c = e.group || "Geral";
-      n[c] || (n[c] = []);
-      const a = o[s], P = e.inputType === "color" || e.inputType === "color-advanced", j = a === void 0 || P && a === "" ? r[s] : a;
-      n[c].push({
-        propName: s,
-        meta: e,
-        value: j
+      const d = s.group || "Geral";
+      c[d] || (c[d] = []);
+      const u = t[a], w = s.inputType === "color" || s.inputType === "color-advanced", C = u === void 0 || w && u === "" ? r[a] : u, F = h.has(a) ? { ...s, readOnly: !0 } : s;
+      c[d].push({
+        propName: a,
+        meta: F,
+        value: C
       });
     }
-    return n;
-  }, [t, i]);
-  if (!t)
-    return /* @__PURE__ */ m("div", { className: "p-4 text-center text-gray-500 dark:text-gray-400 text-sm", children: "Selecione um bloco para editar" });
-  if (!i)
-    return /* @__PURE__ */ h("div", { className: "p-4 text-center text-red-500 text-sm", children: [
-      "Tipo de bloco desconhecido: ",
-      t.type
-    ] });
-  const v = M((o, r) => {
-    p(o === "logo" && (r === void 0 || r === "") ? { [o]: r, logoHeight: 70 } : { [o]: r });
-  }, [p]);
-  return /* @__PURE__ */ h("div", { className: "p-3 space-y-4", children: [
-    /* @__PURE__ */ m(
-      H,
+    return c;
+  }, [e, o, m, h]), P = j((t, r) => {
+    n(t === "logo" && (r === void 0 || r === "") ? { [t]: r, logoHeight: 70 } : { [t]: r });
+  }, [n]);
+  return e ? o ? /* @__PURE__ */ g("div", { className: "p-3 space-y-4", children: [
+    /* @__PURE__ */ p(
+      O,
       {
-        type: t.type,
-        name: i.name,
-        description: i.description
+        type: e.type,
+        name: o.name,
+        description: o.description
       }
     ),
-    i.variations && /* @__PURE__ */ m(E, { block: t, onUpdate: p }),
-    Object.keys(l).length === 0 ? /* @__PURE__ */ m("div", { className: "text-center text-gray-500 dark:text-gray-400 text-xs py-4", children: "Nenhuma propriedade configurável" }) : Object.entries(l).map(([o, r]) => /* @__PURE__ */ m(
-      N,
+    o.variations && /* @__PURE__ */ p(M, { block: e, onUpdate: n }),
+    Object.keys(y).length === 0 ? /* @__PURE__ */ p("div", { className: "text-center text-gray-500 dark:text-gray-400 text-xs py-4", children: "Nenhuma propriedade configurável" }) : Object.entries(y).map(([t, r]) => /* @__PURE__ */ p(
+      W,
       {
-        groupName: o,
+        groupName: t,
         props: r,
-        onPropChange: v,
-        onMultiUpdate: p,
-        allProps: t?.props,
-        uploadConfig: x
+        onPropChange: P,
+        onMultiUpdate: n,
+        allProps: e?.props,
+        uploadConfig: x,
+        isFocused: t === v
       },
-      o
+      t
     ))
-  ] });
+  ] }) : /* @__PURE__ */ g("div", { className: "p-4 text-center text-red-500 text-sm", children: [
+    "Tipo de bloco desconhecido: ",
+    e.type
+  ] }) : /* @__PURE__ */ p("div", { className: "p-4 text-center text-gray-500 dark:text-gray-400 text-sm", children: "Selecione um bloco para editar" });
 });
 export {
-  It as BlockPropertyEditor
+  I as BlockPropertyEditor
 };
 //# sourceMappingURL=BlockPropertyEditor.js.map

package/dist/editor/PropertyEditor/BlockPropertyEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockPropertyEditor.js","sources":["../../../src/editor/PropertyEditor/BlockPropertyEditor.tsx"],"sourcesContent":["/**\n * Block Property Editor - Refatorado\n * Editor dinâmico de propriedades baseado em inspectorMeta\n */\n\nimport { memo, useMemo, useCallback } from \"react\";\nimport { Block, SiteDocumentV2, componentRegistry, InspectorMeta } from \"../../engine\";\nimport { VariationSelector } from \"./VariationSelector\";\nimport { BlockHeader } from \"./BlockHeader\";\nimport { CollapsiblePropertyGroup } from \"./CollapsiblePropertyGroup\";\nimport type { UploadConfig } from \"../LandingPageEditorV2\";\n\ninterface BlockPropertyEditorProps {\n  block: Block | null;\n  document?: SiteDocumentV2;\n  currentPageId?: string;\n  onUpdate: (updates: Record<string, any>) => void;\n  uploadConfig?: UploadConfig;\n}\n\n/**\n * Componente principal do editor de propriedades\n * Memoizado para performance\n */\nexport const BlockPropertyEditor = memo(function BlockPropertyEditor({\n  block,\n  onUpdate,\n  uploadConfig,\n}: BlockPropertyEditorProps) {\n  // Obter definição do bloco do registry\n  const blockDefinition = useMemo(() => {\n    if (!block) return null;\n    return componentRegistry.get(block.type);\n  }, [block]);\n\n  // Agrupar propriedades por grupo\n  const groupedProps = useMemo(() => {\n    if (!block || !blockDefinition?.inspectorMeta) return {};\n\n    const props = block.props as Record<string, any>;\n    const defaultProps = (blockDefinition.defaultProps || {}) as Record<string, any>;\n    const groups: Record<\n      string,\n      Array<{ propName: string; meta: InspectorMeta; value: any }>\n    > = {};\n\n    for (const [propName, meta] of Object.entries(\n      blockDefinition.inspectorMeta,\n    )) {\n      // Lógica condicional: só mostrar logoHeight se houver logo\n      if (propName === \"logoHeight\" && !props.logo) {\n        continue; // Pular este campo\n      }\n\n      // Lógica condicional genérica: showWhen\n      if (meta.showWhen) {\n        const { field, equals, notEquals } = meta.showWhen;\n        const fieldValue = props[field] ?? defaultProps[field];\n        // Suporta equals (mostrar quando igual) e notEquals (mostrar quando diferente)\n        if (equals !== undefined && fieldValue !== equals) {\n          continue; // Pular se não for igual ao valor esperado\n        }\n        if (notEquals !== undefined && fieldValue === notEquals) {\n          continue; // Pular se for igual ao valor que deve ser evitado\n        }\n      }\n\n      const group = meta.group || \"Geral\";\n      if (!groups[group]) {\n        groups[group] = [];\n      }\n\n      // Usar valor atual ou fallback para defaultProps\n      const currentValue = props[propName];\n      // Para campos de cor, também fazer fallback se o valor for string vazia\n      const isColorInput = meta.inputType === \"color\" || meta.inputType === \"color-advanced\";\n      const shouldUseFallback = currentValue === undefined || (isColorInput && currentValue === \"\");\n      const value = shouldUseFallback ? defaultProps[propName] : currentValue;\n\n      groups[group].push({\n        propName,\n        meta,\n        value,\n      });\n    }\n\n    return groups;\n  }, [block, blockDefinition]);\n\n  if (!block) {\n    return (\n      <div className=\"p-4 text-center text-gray-500 dark:text-gray-400 text-sm\">\n        Selecione um bloco para editar\n      </div>\n    );\n  }\n\n  if (!blockDefinition) {\n    return (\n      <div className=\"p-4 text-center text-red-500 text-sm\">\n        Tipo de bloco desconhecido: {block.type}\n      </div>\n    );\n  }\n\n  const handlePropChange = useCallback((propName: string, value: any) => {\n    // Se remover o logo (definir como undefined), resetar logoHeight para padrão\n    if (propName === \"logo\" && (value === undefined || value === \"\")) {\n      onUpdate({ [propName]: value, logoHeight: 70 });\n    } else {\n      onUpdate({ [propName]: value });\n    }\n  }, [onUpdate]);\n\n  return (\n    <div className=\"p-3 space-y-4\">\n      {/* Header com ícone centralizado */}\n      <BlockHeader\n        type={block.type}\n        name={blockDefinition.name}\n        description={blockDefinition.description}\n      />\n\n      {/* Seletor de variações (Hero/Navbar) */}\n      {blockDefinition.variations && (\n        <VariationSelector block={block} onUpdate={onUpdate} />\n      )}\n\n      {/* Propriedades agrupadas com collapse */}\n      {Object.keys(groupedProps).length === 0 ? (\n        <div className=\"text-center text-gray-500 dark:text-gray-400 text-xs py-4\">\n          Nenhuma propriedade configurável\n        </div>\n      ) : (\n        Object.entries(groupedProps).map(([groupName, props]) => (\n          <CollapsiblePropertyGroup\n            key={groupName}\n            groupName={groupName}\n            props={props}\n            onPropChange={handlePropChange}\n            onMultiUpdate={onUpdate}\n            allProps={block?.props as Record<string, any>}\n            uploadConfig={uploadConfig}\n          />\n        ))\n      )}\n    </div>\n  );\n});\n"],"names":["BlockPropertyEditor","memo","block","onUpdate","uploadConfig","blockDefinition","useMemo","componentRegistry","groupedProps","props","defaultProps","groups","propName","meta","field","equals","notEquals","fieldValue","group","currentValue","isColorInput","value","jsx","jsxs","handlePropChange","useCallback","BlockHeader","VariationSelector","groupName","CollapsiblePropertyGroup"],"mappings":"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"}
+{"version":3,"file":"BlockPropertyEditor.js","sources":["../../../src/editor/PropertyEditor/BlockPropertyEditor.tsx"],"sourcesContent":["/**\n * Block Property Editor - Refatorado\n * Editor dinâmico de propriedades baseado em inspectorMeta\n */\n\nimport { memo, useMemo, useCallback } from \"react\";\nimport { Block, SiteDocument, componentRegistry, InspectorMeta, evaluateShowWhen, pluginRegistry } from \"../../engine\";\nimport type { ShowWhenContext } from \"../../engine\";\nimport { VariationSelector } from \"./VariationSelector\";\nimport { BlockHeader } from \"./BlockHeader\";\nimport { CollapsiblePropertyGroup } from \"./CollapsiblePropertyGroup\";\nimport type { UploadConfig } from \"../LandingPageEditor\";\n\ninterface BlockPropertyEditorProps {\n  block: Block | null;\n  document?: SiteDocument;\n  currentPageId?: string;\n  onUpdate: (updates: Record<string, any>) => void;\n  uploadConfig?: UploadConfig;\n  /** When set, the matching property group opens and scrolls into view */\n  focusedGroup?: string | null;\n}\n\n/**\n * Componente principal do editor de propriedades\n * Memoizado para performance\n */\nexport const BlockPropertyEditor = memo(function BlockPropertyEditor({\n  block,\n  document,\n  currentPageId,\n  onUpdate,\n  uploadConfig,\n  focusedGroup,\n}: BlockPropertyEditorProps) {\n  // Obter definição do bloco do registry\n  const blockDefinition = useMemo(() => {\n    if (!block) return null;\n    return componentRegistry.get(block.type);\n  }, [block]);\n\n  // Contexto para cross-block showWhen\n  const showWhenContext = useMemo<ShowWhenContext>(\n    () => ({ document, currentPageId }),\n    [document, currentPageId],\n  );\n\n  // Obter restrições de edição do plugin (se houver)\n  const lockedFields = useMemo(() => {\n    if (!block || !document) return new Set<string>();\n    const restriction = pluginRegistry.getEditorRestrictions(document, block.type);\n    if (!restriction?.lockedFields) return new Set<string>();\n    return new Set(restriction.lockedFields);\n  }, [block, document]);\n\n  // Agrupar propriedades por grupo\n  const groupedProps = useMemo(() => {\n    if (!block || !blockDefinition?.inspectorMeta) return {};\n\n    const props = block.props as Record<string, any>;\n    const defaultProps = (blockDefinition.defaultProps || {}) as Record<string, any>;\n    const groups: Record<\n      string,\n      Array<{ propName: string; meta: InspectorMeta; value: any }>\n    > = {};\n\n    for (const [propName, meta] of Object.entries(\n      blockDefinition.inspectorMeta,\n    )) {\n      // Visibilidade condicional via showWhen\n      if (meta.showWhen) {\n        if (!evaluateShowWhen(meta.showWhen, props, defaultProps, showWhenContext)) {\n          continue;\n        }\n      }\n\n      const group = meta.group || \"Geral\";\n      if (!groups[group]) {\n        groups[group] = [];\n      }\n\n      // Usar valor atual ou fallback para defaultProps\n      const currentValue = props[propName];\n      // Para campos de cor, também fazer fallback se o valor for string vazia\n      const isColorInput = meta.inputType === \"color\" || meta.inputType === \"color-advanced\";\n      const shouldUseFallback = currentValue === undefined || (isColorInput && currentValue === \"\");\n      const value = shouldUseFallback ? defaultProps[propName] : currentValue;\n\n      // Aplicar readOnly de plugin restrictions\n      const effectiveMeta = lockedFields.has(propName)\n        ? { ...meta, readOnly: true }\n        : meta;\n\n      groups[group].push({\n        propName,\n        meta: effectiveMeta,\n        value,\n      });\n    }\n\n    return groups;\n  }, [block, blockDefinition, showWhenContext, lockedFields]);\n\n  // IMPORTANTE: todos os hooks devem ser chamados ANTES de qualquer early return\n  const handlePropChange = useCallback((propName: string, value: any) => {\n    // Se remover o logo (definir como undefined), resetar logoHeight para padrão\n    if (propName === \"logo\" && (value === undefined || value === \"\")) {\n      onUpdate({ [propName]: value, logoHeight: 70 });\n    } else {\n      onUpdate({ [propName]: value });\n    }\n  }, [onUpdate]);\n\n  if (!block) {\n    return (\n      <div className=\"p-4 text-center text-gray-500 dark:text-gray-400 text-sm\">\n        Selecione um bloco para editar\n      </div>\n    );\n  }\n\n  if (!blockDefinition) {\n    return (\n      <div className=\"p-4 text-center text-red-500 text-sm\">\n        Tipo de bloco desconhecido: {block.type}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-3 space-y-4\">\n      {/* Header com ícone centralizado */}\n      <BlockHeader\n        type={block.type}\n        name={blockDefinition.name}\n        description={blockDefinition.description}\n      />\n\n      {/* Seletor de variações (Hero/Navbar) */}\n      {blockDefinition.variations && (\n        <VariationSelector block={block} onUpdate={onUpdate} />\n      )}\n\n      {/* Propriedades agrupadas com collapse */}\n      {Object.keys(groupedProps).length === 0 ? (\n        <div className=\"text-center text-gray-500 dark:text-gray-400 text-xs py-4\">\n          Nenhuma propriedade configurável\n        </div>\n      ) : (\n        Object.entries(groupedProps).map(([groupName, props]) => (\n          <CollapsiblePropertyGroup\n            key={groupName}\n            groupName={groupName}\n            props={props}\n            onPropChange={handlePropChange}\n            onMultiUpdate={onUpdate}\n            allProps={block?.props as Record<string, any>}\n            uploadConfig={uploadConfig}\n            isFocused={groupName === focusedGroup}\n          />\n        ))\n      )}\n    </div>\n  );\n});\n"],"names":["BlockPropertyEditor","memo","block","document","currentPageId","onUpdate","uploadConfig","focusedGroup","blockDefinition","useMemo","componentRegistry","showWhenContext","lockedFields","restriction","pluginRegistry","groupedProps","props","defaultProps","groups","propName","meta","evaluateShowWhen","group","currentValue","isColorInput","value","effectiveMeta","handlePropChange","useCallback","jsxs","jsx","BlockHeader","VariationSelector","groupName","CollapsiblePropertyGroup"],"mappings":"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"}

package/dist/editor/PropertyEditor/CollapsiblePropertyGroup.d.ts

@@ -1,5 +1,5 @@
 import { InspectorMeta } from '../../engine';
-import { UploadConfig } from '../LandingPageEditorV2';
+import { UploadConfig } from '../LandingPageEditor';
 interface CollapsiblePropertyGroupProps {
     groupName: string;
     props: Array<{
@@ -14,6 +14,8 @@ interface CollapsiblePropertyGroupProps {
     allProps?: Record<string, any>;
     uploadConfig?: UploadConfig;
     defaultOpen?: boolean;
+    /** When true, opens the group and scrolls it into view */
+    isFocused?: boolean;
 }
 /**
  * Grupo de propriedades colapsável