@oondemand/oon-core-front 0.7.14 → 0.7.17

package/README.md

@@ -7,3 +7,22 @@ Para criar ou alterar um App, comece pela entrada curta distribuída pelo gerado
 `runtimeMode: "local"` troca o bootstrap de uso único por cookie HttpOnly, usa CSRF nas mutações, não persiste bearer no `localStorage`, reconhece `ativa_local` e exibe o banner de desenvolvimento desconectado com expiração e seleção dos perfis declarados no manifesto.
 
 O frontend inclui a rota pública `/ativacao` e um `ActivationProvider` que consulta `/ativacao/status` antes de liberar rotas privadas. Centrais `member` não ativas são enviadas para o assistente de ativação; estados `suspensa` e `revogada` usam páginas próprias. O código de ativação fica apenas em memória e é limpo após conclusão.
+
+
+## Kit de telas (Onda UX)
+
+Regras: uma tarefa por tela; lista → detalhe em painel lateral; uma ação principal; status com o vocabulário único; dados técnicos só em "Detalhes técnicos" (oon-docs, doc 20).
+
+```tsx
+import { CorePageHeader, CoreKpiGrid, CoreDataTable, CoreDetailDrawer, CoreStatusBadge, CoreTechnicalDetails } from "@oondemand/oon-core-front";
+
+<CorePageHeader title="Publicações" description="Acompanhe e destrave publicações." />
+<CoreDataTable label="Publicações" rows={rows} rowKey={(r) => r.id} onRowClick={setSelected} selectedKey={selected?.id}
+  search={{ value: q, onChange: setQ, placeholder: "Buscar App" }}
+  columns={[{ key: "app", header: "App" }, { key: "etapa", header: "Status", render: (r) => <CoreStatusBadge kind="publication" status={r.etapa} /> }]} />
+<CoreDetailDrawer open={!!selected} onClose={() => setSelected(null)} title={selected?.app} actions={<Button>Executar recuperação</Button>}>
+  <CoreTechnicalDetails items={[{ label: "Release", value: selected?.releaseId }]} />
+</CoreDetailDrawer>
+```
+
+Menu: `section` agrupa, `order` ordena e `requires` liga o item a uma condição de `registry.menuConditions` (hook). Cabeçalho: `registry.layoutSlots.organization` recebe o seletor de organização (`CoreOrganizationSwitcher`); um item de menu com `action: "profile"` aparece em "Meu perfil".

package/dist/{chunk-D37CYO7U.js → chunk-36IUVD5N.js}

@@ -7,8 +7,9 @@ import {
   CoreTransactionalEmail,
   CoreUsersAccess,
   MissingRenderer,
+  coreInitials,
   resolveComponent
-} from "./chunk-EIFIGMY7.js";
+} from "./chunk-TWOOUSQ6.js";
 import {
   OON_RESERVED_ROUTES,
   defineOonNavigation,
@@ -589,7 +590,8 @@ import {
 } from "react-router-dom";
 
 // src/shell/DefaultShell.tsx
-import { Box as Box5, Button as Button3, Flex as Flex4, Spacer, Text as Text5 } from "@chakra-ui/react";
+import { Box as Box5, Button as Button3, Drawer, Flex as Flex4, IconButton, Image as Image2, Menu, Portal, Spacer, Text as Text5 } from "@chakra-ui/react";
+import { useState as useState6 } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 
 // src/shell/Sidebar.tsx
@@ -599,7 +601,8 @@ import { NavLink } from "react-router-dom";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function groupBySection(items) {
   const groups = /* @__PURE__ */ new Map();
-  for (const item of items) {
+  const ordered = items.map((item, index) => ({ item, index })).sort((a, b) => (a.item.order ?? Number.MAX_SAFE_INTEGER) - (b.item.order ?? Number.MAX_SAFE_INTEGER) || a.index - b.index).map(({ item }) => item);
+  for (const item of ordered) {
     const section = item.section ?? "Geral";
     if (!groups.has(section)) groups.set(section, []);
     groups.get(section).push(item);
@@ -680,14 +683,74 @@ function PlatformAppMenuItem({ item, appCode }) {
     launchError ? /* @__PURE__ */ jsx7(Text4, { role: "alert", px: 3, py: 1, fontSize: "10px", color: "red.600", children: launchError }) : null
   ] });
 }
-function Sidebar({ app, menu, registry }) {
+function useMenuConditions(registry) {
+  const entries = Object.entries(registry?.menuConditions ?? {}).sort(([a], [b]) => a.localeCompare(b));
+  const result = {};
+  for (const [name, useCondition] of entries) result[name] = useCondition();
+  return result;
+}
+function useVisibleMenu(menu, registry) {
   const { hasPermission } = useOonAuth();
-  const visible = menu.filter((item) => !item.hidden && hasPermission(item.permissions));
+  const conditions = useMenuConditions(registry);
+  return menu.filter((item) => !item.hidden && hasPermission(item.permissions) && (!item.requires || conditions[item.requires] === true));
+}
+function SidebarNav({ menu, registry, onNavigate, compact = false }) {
+  const visible = useVisibleMenu(menu, registry);
+  return /* @__PURE__ */ jsx7(Stack, { gap: 5, children: groupBySection(visible).map(([section, items]) => /* @__PURE__ */ jsxs5(Stack, { gap: 1, role: "group", "aria-label": section, children: [
+    /* @__PURE__ */ jsx7(
+      Text4,
+      {
+        display: compact ? { base: "none", lg: "block" } : "block",
+        fontSize: "10px",
+        fontWeight: "600",
+        color: "gray.500",
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        px: 3,
+        mb: 1,
+        children: section
+      }
+    ),
+    items.map((item) => {
+      const CustomMenuItem = resolveComponent(registry, item.renderer, "menuRenderers");
+      if (CustomMenuItem) return /* @__PURE__ */ jsx7(CustomMenuItem, { item }, item.href);
+      const appCode = launchAppCode(item.action);
+      if (appCode) return /* @__PURE__ */ jsx7(PlatformAppMenuItem, { item, appCode }, item.href);
+      return /* @__PURE__ */ jsx7(NavLink, { to: item.href, end: item.href === "/", title: item.label, onClick: onNavigate, children: ({ isActive }) => /* @__PURE__ */ jsxs5(
+        Flex3,
+        {
+          align: "center",
+          gap: 3,
+          px: 3,
+          py: "10px",
+          borderRadius: "9px",
+          fontSize: "14px",
+          fontWeight: isActive ? "600" : "500",
+          bg: isActive ? "brand.50" : "transparent",
+          color: isActive ? "brand.700" : "#374151",
+          borderLeftWidth: "3px",
+          borderLeftColor: isActive ? "brand.500" : "transparent",
+          transition: "all 0.15s ease",
+          _hover: { bg: isActive ? "brand.50" : "#F8F9FA", color: "brand.700" },
+          "aria-current": isActive ? "page" : void 0,
+          children: [
+            item.icon ? /* @__PURE__ */ jsx7(Box4, { flex: "0 0 auto", children: item.icon }) : null,
+            /* @__PURE__ */ jsx7(Text4, { lineClamp: 1, children: item.label }),
+            item.badge !== void 0 ? /* @__PURE__ */ jsx7(Box4, { ml: "auto", fontSize: "xs", fontWeight: "700", color: "brand.700", children: item.badge }) : null
+          ]
+        }
+      ) }, item.href);
+    })
+  ] }, section)) });
+}
+function Sidebar({ app, menu, registry }) {
   return /* @__PURE__ */ jsxs5(
     Box4,
     {
       as: "nav",
-      w: { base: "76px", lg: "248px" },
+      "aria-label": "Menu principal",
+      w: "248px",
+      display: { base: "none", lg: "block" },
       minH: "100vh",
       borderRightWidth: "1px",
       borderColor: "#E8ECEF",
@@ -716,56 +779,12 @@ function Sidebar({ app, menu, registry }) {
               children: "O"
             }
           ),
-          /* @__PURE__ */ jsxs5(Box4, { display: { base: "none", lg: "block" }, minW: 0, children: [
+          /* @__PURE__ */ jsxs5(Box4, { minW: 0, children: [
             /* @__PURE__ */ jsx7(Text4, { fontWeight: "700", fontSize: "sm", color: "#07262E", lineClamp: 1, children: app.name }),
             /* @__PURE__ */ jsx7(Text4, { fontSize: "10px", color: "gray.500", textTransform: "uppercase", letterSpacing: "0.08em", children: "Opera\xE7\xE3o digital" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx7(Stack, { gap: 5, children: groupBySection(visible).map(([section, items]) => /* @__PURE__ */ jsxs5(Stack, { gap: 1, children: [
-          /* @__PURE__ */ jsx7(
-            Text4,
-            {
-              display: { base: "none", lg: "block" },
-              fontSize: "10px",
-              fontWeight: "600",
-              color: "gray.400",
-              textTransform: "uppercase",
-              letterSpacing: "0.08em",
-              px: 3,
-              mb: 1,
-              children: section
-            }
-          ),
-          items.map((item) => {
-            const CustomMenuItem = resolveComponent(registry, item.renderer, "menuRenderers");
-            if (CustomMenuItem) return /* @__PURE__ */ jsx7(CustomMenuItem, { item }, item.href);
-            const appCode = launchAppCode(item.action);
-            if (appCode) return /* @__PURE__ */ jsx7(PlatformAppMenuItem, { item, appCode }, item.href);
-            return /* @__PURE__ */ jsx7(NavLink, { to: item.href, end: item.href === "/", title: item.label, children: ({ isActive }) => /* @__PURE__ */ jsxs5(
-              Flex3,
-              {
-                align: "center",
-                justify: { base: "center", lg: "flex-start" },
-                gap: 3,
-                px: { base: 2, lg: 3 },
-                py: "10px",
-                borderRadius: "9px",
-                fontSize: "13px",
-                fontWeight: isActive ? "600" : "500",
-                bg: isActive ? "brand.50" : "transparent",
-                color: isActive ? "brand.700" : "#46545C",
-                borderLeftWidth: "3px",
-                borderLeftColor: isActive ? "brand.500" : "transparent",
-                transition: "all 0.15s ease",
-                _hover: { bg: isActive ? "brand.50" : "#F8F9FA", color: "brand.700" },
-                children: [
-                  item.icon ? /* @__PURE__ */ jsx7(Box4, { flex: "0 0 auto", children: item.icon }) : /* @__PURE__ */ jsx7(Box4, { w: "7px", h: "7px", borderRadius: "full", bg: isActive ? "brand.500" : "gray.300" }),
-                  /* @__PURE__ */ jsx7(Text4, { display: { base: "none", lg: "block" }, lineClamp: 1, children: item.label })
-                ]
-              }
-            ) }, item.href);
-          })
-        ] }, section)) })
+        /* @__PURE__ */ jsx7(SidebarNav, { menu, registry })
       ]
     }
   );
@@ -774,7 +793,7 @@ function Sidebar({ app, menu, registry }) {
 // package.json
 var package_default = {
   name: "@oondemand/oon-core-front",
-  version: "0.7.14",
+  version: "0.7.17",
   repository: {
     type: "git",
     url: "git+https://github.com/oondemand/oon-platform.git",
@@ -956,7 +975,23 @@ function resolveSettingsHref(menu) {
   if (settingsPage) return settingsPage.href;
   return null;
 }
-function CoreTopbar({ app, menu }) {
+function MenuIcon() {
+  return /* @__PURE__ */ jsx8("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("path", { d: "M4 6h16M4 12h16M4 18h16", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) });
+}
+function MobileMenu({ app, menu, registry }) {
+  const [open, setOpen] = useState6(false);
+  return /* @__PURE__ */ jsxs6(Box5, { display: { base: "block", lg: "none" }, mr: 3, children: [
+    /* @__PURE__ */ jsx8(IconButton, { "aria-label": "Abrir menu", variant: "ghost", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx8(MenuIcon, {}) }),
+    /* @__PURE__ */ jsx8(Drawer.Root, { open, onOpenChange: (event) => setOpen(event.open), placement: "start", size: "xs", children: /* @__PURE__ */ jsxs6(Portal, { children: [
+      /* @__PURE__ */ jsx8(Drawer.Backdrop, {}),
+      /* @__PURE__ */ jsx8(Drawer.Positioner, { children: /* @__PURE__ */ jsxs6(Drawer.Content, { children: [
+        /* @__PURE__ */ jsx8(Drawer.Header, { children: /* @__PURE__ */ jsx8(Drawer.Title, { children: app.title ?? app.name }) }),
+        /* @__PURE__ */ jsx8(Drawer.Body, { px: 2, children: /* @__PURE__ */ jsx8(Box5, { as: "nav", "aria-label": "Menu principal", children: /* @__PURE__ */ jsx8(SidebarNav, { menu, registry, onNavigate: () => setOpen(false) }) }) })
+      ] }) })
+    ] }) })
+  ] });
+}
+function CoreTopbar({ app, menu, registry }) {
   const { user, logout, hasPermission } = useOonAuth();
   const navigate = useNavigate();
   const metadataQuery = useCoreMetadata();
@@ -984,6 +1019,9 @@ function CoreTopbar({ app, menu }) {
   const settingsHref = resolveSettingsHref(
     menu.filter((item) => hasPermission(item.permissions))
   );
+  const profileHref = menu.find((item) => item.action === "profile")?.href ?? null;
+  const OrganizationSlot = registry?.layoutSlots?.organization;
+  const avatar = user?.fotoPerfilUrl;
   const tenant = user?.tenant;
   const tenantLabel = String(tenant?.nome || tenant?.slug || "").trim();
   return /* @__PURE__ */ jsxs6(
@@ -1002,7 +1040,9 @@ function CoreTopbar({ app, menu }) {
       top: 0,
       zIndex: 10,
       children: [
-        /* @__PURE__ */ jsxs6(Box5, { minW: 0, title: details, children: [
+        /* @__PURE__ */ jsx8(MobileMenu, { app, menu, registry }),
+        /* @__PURE__ */ jsxs6(Box5, { minW: 0, title: `${versionParts.join(" \xB7 ")}
+${details}`, children: [
           /* @__PURE__ */ jsx8(
             Text5,
             {
@@ -1018,10 +1058,10 @@ function CoreTopbar({ app, menu }) {
           tenantLabel ? /* @__PURE__ */ jsxs6(Text5, { fontSize: "xs", fontWeight: "600", color: "brand.fg", lineHeight: "1.4", children: [
             "Tenant: ",
             tenantLabel
-          ] }) : null,
-          /* @__PURE__ */ jsx8(Text5, { fontSize: "10px", color: "text.muted", lineHeight: "1.35", children: versionParts.join(" \xB7 ") })
+          ] }) : null
         ] }),
         /* @__PURE__ */ jsx8(Spacer, {}),
+        OrganizationSlot ? /* @__PURE__ */ jsx8(Box5, { mr: 3, children: /* @__PURE__ */ jsx8(OrganizationSlot, { app, menu }) }) : null,
         user ? /* @__PURE__ */ jsxs6(Flex4, { align: "center", gap: 3, children: [
           /* @__PURE__ */ jsxs6(Box5, { textAlign: "right", display: { base: "none", md: "block" }, children: [
             /* @__PURE__ */ jsx8(Text5, { fontSize: "sm", fontWeight: "600", color: "text.primary", children: user.nome }),
@@ -1042,17 +1082,13 @@ function CoreTopbar({ app, menu }) {
               children: /* @__PURE__ */ jsx8(SettingsIcon, {})
             }
           ) : null,
-          /* @__PURE__ */ jsx8(
-            Button3,
-            {
-              size: "sm",
-              variant: "outline",
-              colorPalette: "brand",
-              borderRadius: "8px",
-              onClick: logout,
-              children: "Sair"
-            }
-          )
+          /* @__PURE__ */ jsxs6(Menu.Root, { positioning: { placement: "bottom-end" }, children: [
+            /* @__PURE__ */ jsx8(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8(Button3, { size: "sm", variant: "ghost", borderRadius: "full", px: 1, "aria-label": "Abrir menu do usu\xE1rio", children: avatar ? /* @__PURE__ */ jsx8(Image2, { src: avatar, alt: "", boxSize: "32px", borderRadius: "full", objectFit: "cover" }) : /* @__PURE__ */ jsx8(Flex4, { boxSize: "32px", borderRadius: "full", bg: "brand.100", color: "brand.700", align: "center", justify: "center", fontWeight: "700", fontSize: "xs", children: coreInitials(user.nome) }) }) }),
+            /* @__PURE__ */ jsx8(Portal, { children: /* @__PURE__ */ jsx8(Menu.Positioner, { children: /* @__PURE__ */ jsxs6(Menu.Content, { children: [
+              profileHref ? /* @__PURE__ */ jsx8(Menu.Item, { value: "perfil", onClick: () => navigate(profileHref), children: "Meu perfil" }) : null,
+              /* @__PURE__ */ jsx8(Menu.Item, { value: "sair", onClick: logout, children: "Sair" })
+            ] }) }) })
+          ] })
         ] }) : null
       ]
     }
@@ -1071,7 +1107,7 @@ function Slot({
     return Component ? /* @__PURE__ */ jsx8(Component, { app, menu }) : /* @__PURE__ */ jsx8(MissingRenderer, { renderer: slot });
   }
   if (name === "sidebar") return /* @__PURE__ */ jsx8(Sidebar, { app, menu, registry });
-  if (name === "topbar") return /* @__PURE__ */ jsx8(CoreTopbar, { app, menu });
+  if (name === "topbar") return /* @__PURE__ */ jsx8(CoreTopbar, { app, menu, registry });
   if (name === "footer" && slot === "core") {
     return /* @__PURE__ */ jsx8(Box5, { as: "footer", px: 6, py: 4, color: "gray.500", fontSize: "xs", borderTopWidth: "1px", children: "OonCore" });
   }
@@ -1244,7 +1280,7 @@ function AppAccessGuard({ children }) {
 }
 
 // src/security/LoginPage.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Box as Box7, Button as Button5, Flex as Flex6, Heading as Heading4, Input as Input3, SimpleGrid, Text as Text7, VStack as VStack4 } from "@chakra-ui/react";
 import { Link as Link2, Navigate as Navigate2, useLocation as useLocation4 } from "react-router-dom";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1275,13 +1311,13 @@ function tenantUrl(path, tenantId) {
 function LoginPage({ app, onboardingEnabled = false }) {
   const { status, login } = useOonAuth();
   const location = useLocation4();
-  const [email, setEmail] = useState6("");
-  const [password, setPassword] = useState6("");
-  const [submitting, setSubmitting] = useState6(false);
-  const [message, setMessage] = useState6(null);
-  const [tenants, setTenants] = useState6([]);
-  const [selectorMode, setSelectorMode] = useState6(false);
-  const [openingTenant, setOpeningTenant] = useState6(null);
+  const [email, setEmail] = useState7("");
+  const [password, setPassword] = useState7("");
+  const [submitting, setSubmitting] = useState7(false);
+  const [message, setMessage] = useState7(null);
+  const [tenants, setTenants] = useState7([]);
+  const [selectorMode, setSelectorMode] = useState7(false);
+  const [openingTenant, setOpeningTenant] = useState7(null);
   const redirect = safeRedirect(location.search);
   if (status === "authenticated" && !selectorMode) return /* @__PURE__ */ jsx12(Navigate2, { to: redirect, replace: true });
   if (status === "forbidden") return /* @__PURE__ */ jsx12(Navigate2, { to: "/acesso-negado", replace: true });
@@ -1369,16 +1405,16 @@ function LoginPage({ app, onboardingEnabled = false }) {
 }
 
 // src/security/FirstAccessPage.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { Box as Box8, Button as Button6, Flex as Flex7, Heading as Heading5, Input as Input4, Text as Text8, VStack as VStack5 } from "@chakra-ui/react";
 import { Navigate as Navigate3 } from "react-router-dom";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function FirstAccessPage() {
   const { status, completeFirstAccess } = useOonAuth();
-  const [password, setPassword] = useState7("");
-  const [confirm, setConfirm] = useState7("");
-  const [submitting, setSubmitting] = useState7(false);
-  const [message, setMessage] = useState7(null);
+  const [password, setPassword] = useState8("");
+  const [confirm, setConfirm] = useState8("");
+  const [submitting, setSubmitting] = useState8(false);
+  const [message, setMessage] = useState8(null);
   if (status === "authenticated") return /* @__PURE__ */ jsx13(Navigate3, { to: "/", replace: true });
   if (status === "unauthenticated") return /* @__PURE__ */ jsx13(Navigate3, { to: "/login", replace: true });
   if (status === "forbidden") return /* @__PURE__ */ jsx13(Navigate3, { to: "/acesso-negado", replace: true });
@@ -1422,7 +1458,7 @@ function FirstAccessPage() {
 }
 
 // src/security/ActivationPage.tsx
-import { useEffect as useEffect5, useState as useState8 } from "react";
+import { useEffect as useEffect5, useState as useState9 } from "react";
 import { Box as Box9, Button as Button7, Heading as Heading6, Input as Input5, Text as Text9, VStack as VStack6 } from "@chakra-ui/react";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function encodeBasicCredentials(email, password) {
@@ -1434,21 +1470,21 @@ function encodeBasicCredentials(email, password) {
 function ActivationPage() {
   const { http } = useOonApi();
   const activation = useActivation();
-  const [step, setStep] = useState8(1);
-  const [config, setConfig] = useState8(null);
-  const [code, setCode] = useState8("");
-  const [preview, setPreview] = useState8(null);
-  const [global, setGlobal] = useState8({});
-  const [app, setApp] = useState8({});
-  const [rootEmail, setRootEmail] = useState8("");
-  const [rootPassword, setRootPassword] = useState8("");
-  const [devName, setDevName] = useState8("");
-  const [devEmail, setDevEmail] = useState8("");
-  const [devPassword, setDevPassword] = useState8("");
-  const [showCodeFlow, setShowCodeFlow] = useState8(false);
-  const [devResult, setDevResult] = useState8(null);
-  const [error, setError] = useState8(null);
-  const [submitting, setSubmitting] = useState8(false);
+  const [step, setStep] = useState9(1);
+  const [config, setConfig] = useState9(null);
+  const [code, setCode] = useState9("");
+  const [preview, setPreview] = useState9(null);
+  const [global, setGlobal] = useState9({});
+  const [app, setApp] = useState9({});
+  const [rootEmail, setRootEmail] = useState9("");
+  const [rootPassword, setRootPassword] = useState9("");
+  const [devName, setDevName] = useState9("");
+  const [devEmail, setDevEmail] = useState9("");
+  const [devPassword, setDevPassword] = useState9("");
+  const [showCodeFlow, setShowCodeFlow] = useState9(false);
+  const [devResult, setDevResult] = useState9(null);
+  const [error, setError] = useState9(null);
+  const [submitting, setSubmitting] = useState9(false);
   useEffect5(() => {
     http.get("/ativacao/configuracao").then((response) => {
       setConfig(response.data);
@@ -2167,4 +2203,4 @@ export {
   appDefinitionToConfig,
   startOonApp
 };
-//# sourceMappingURL=chunk-D37CYO7U.js.map
+//# sourceMappingURL=chunk-36IUVD5N.js.map