rl-core-front 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/app-shell.tsx

@@ -36,6 +36,7 @@ import {
 } from "#core/components/ui";
 import { UserAvatar } from "#core/components/user-avatar";
 import { useAuth, useBrand, useI18n } from "#core/contexts";
+import { ForbiddenScreen } from "#core/features/errors/forbidden-screen";
 import { NotificationsCenter } from "#core/features/notifications/notifications-center";
 import { ForcePasswordChange } from "#core/features/profile/force-password-change";
 import { cn } from "#core/lib/utils";
@@ -115,9 +116,21 @@ export interface AppShellProps {
   children: React.ReactNode;
   /** Telas do projeto no menu, entre o dashboard e o grupo de administração. */
   navItems?: AppNavItem[];
+  /**
+   * O que mostrar quando a rota atual exige permissão que o usuário não tem.
+   *
+   * Padrão: a `ForbiddenScreen` do core. Passe outra para trocar a tela sem
+   * abrir mão do bloqueio — que é o ponto: esconder o item do menu não impede
+   * ninguém de digitar a URL.
+   */
+  forbidden?: React.ReactNode;
 }
 
-export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
+export function AppShell({
+  children,
+  navItems,
+  forbidden,
+}: AppShellProps): JSX.Element {
   const { user, loading, logout, hasPermission } = useAuth();
   const { t } = useI18n();
   const brand = useBrand();
@@ -159,6 +172,36 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [user, navItems],
   );
+  /**
+   * A rota atual exige permissão que o usuário não tem?
+   *
+   * Percorre **todas** as rotas conhecidas, não só as que sobreviveram ao
+   * filtro do menu: é justamente a que foi filtrada que precisa ser barrada
+   * aqui. Esconder o item nunca impediu ninguém de digitar a URL — sem este
+   * bloqueio a tela montava, chamava a API, tomava 403 e virava uma página
+   * vazia com um toast, em vez de dizer que falta acesso.
+   *
+   * Rota que não está em lista nenhuma passa: o shell não sabe o que ela exige,
+   * e chutar bloqueio esconderia tela legítima do projeto que não declarou
+   * `navItems`.
+   */
+  const routeBlocked = useMemo(() => {
+    const known: NavItem[] = [
+      DASHBOARD,
+      PROFILE,
+      ...ADMIN_CHILDREN,
+      ...(navItems ?? []).map((item) => ({
+        key: item.label,
+        href: item.href,
+        icon: item.icon,
+        perm: item.permission ?? null,
+      })),
+    ];
+    const current = known.find((item) => item.href === pathname);
+    return current ? !allows(current.perm) : false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user, navItems, pathname]);
+
   const adminActive = adminChildren.some((c) => pathname === c.href);
   const [adminOpen, setAdminOpen] = useState(adminActive);
 
@@ -379,8 +422,8 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
         )}
       >
         <div className="p-4 md:p-8">
-          <Breadcrumbs />
-          {children}
+          {!routeBlocked && <Breadcrumbs />}
+          {routeBlocked ? (forbidden ?? <ForbiddenScreen />) : children}
         </div>
       </main>
     </div>

package/src/components/ui/data-table.tsx

@@ -103,6 +103,15 @@ interface DataTableProps<T extends RowData> {
    * não os desmarca ao aplicar nem ao limpar: não são dele.
    */
   hiddenFilterFields?: string[];
+  /**
+   * Texto da tabela vazia, quando a listagem sabe algo que a tabela não sabe.
+   *
+   * Sem isto, "Nenhum registro" é a resposta para tudo — inclusive para
+   * listagem podada por permissão, onde os registros existem e é o alcance de
+   * quem olha que não chega neles. Uma tela vazia que não diz o motivo é
+   * indistinguível de bug, e manda o usuário procurar defeito onde não há.
+   */
+  emptyMessage?: string;
 }
 
 /** Extras que uma coluna pode declarar em `meta`. */
@@ -154,6 +163,7 @@ export function DataTable<T extends RowData>({
   enableSorting = true,
   filters,
   hiddenFilterFields,
+  emptyMessage,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
@@ -232,6 +242,13 @@ export function DataTable<T extends RowData>({
         : 0
       : activeFilterCount(filters.values, hiddenFilterFields);
 
+  // Vazio com filtro aplicado não é "não há registros", é "não há *estes*
+  // registros" — e a diferença decide se o usuário vai limpar o filtro ou
+  // procurar um bug.
+  const emptyText =
+    emptyMessage ??
+    (activeFilters > 0 ? t("table.emptyFiltered") : t("table.empty"));
+
   return (
     <div>
       <div className="mb-3 flex items-center justify-between gap-2">
@@ -323,7 +340,7 @@ export function DataTable<T extends RowData>({
                   colSpan={colSpan}
                   className="h-24 text-center text-muted-foreground"
                 >
-                  {t("table.empty")}
+                  {emptyText}
                 </TableCell>
               </TableRow>
             )}

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Maximize2, Minimize2, X } from "lucide-react";
+import { Expand, Shrink, X } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "#core/lib/utils";
@@ -83,6 +83,53 @@ const expandedWidth = (className?: string): string => {
   return WIDTH_SCALE[Math.min(index + EXPAND_STEPS, last)];
 };
 
+/**
+ * Cabeçalho e rodapé vêm antes de `DialogContent`/`DialogForm` porque os dois
+ * procuram por eles entre os próprios filhos. A busca é pelo `displayName`, e
+ * não pela referência do componente: o pacote é publicado em código-fonte e
+ * resolvido por subpath (`#core/*`), então o consumidor pode acabar com outra
+ * instância do módulo — aí `child.type === DialogHeader` é falso mesmo sendo o
+ * mesmo componente, e o cabeçalho cai silenciosamente no corpo, desalinhado.
+ */
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn(
+      "flex min-w-0 flex-col space-y-1.5 text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
+  <div
+    className={cn(
+      "flex shrink-0 flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-end",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+/** Acha um filho pelo `displayName` — ver a nota acima. */
+const indexOfChild = (
+  items: React.ReactNode[],
+  displayName: string,
+): number =>
+  items.findIndex(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type as { displayName?: string })?.displayName === displayName,
+  );
+
 export interface DialogContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   /**
@@ -98,19 +145,30 @@ export interface DialogContentProps
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, expandable = true, ...props }, ref) => {
+>(({ className, children, expandable = true, onOpenAutoFocus, ...props }, ref) => {
   // Reinicia a cada montagem: o Radix desmonta o conteúdo ao fechar, então
   // reabrir traz o modal no tamanho normal — modal pequeno que volta ampliado
   // surpreende quem o abriu.
   const [expanded, setExpanded] = React.useState(false);
 
+  // O cabeçalho sai da lista para dividir a primeira linha com os botões; o
+  // resto segue na ordem em que o chamador escreveu.
+  const items = React.Children.toArray(children);
+  const headerAt = indexOfChild(items, "DialogHeader");
+  const header = headerAt >= 0 ? items[headerAt] : null;
+  const body = headerAt >= 0 ? items.filter((_, i) => i !== headerAt) : items;
+
   return (
     <DialogPortal>
       <DialogOverlay />
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-y-auto",
+          // `flex flex-col` + `overflow-hidden`: o scroll é do corpo, não do
+          // modal inteiro. Com `overflow-y-auto` aqui, título e botões rolavam
+          // junto e sumiam — quem descia até o fim de uma lista longa perdia o
+          // "Salvar" de vista.
+          "fixed left-[50%] top-[50%] z-50 flex flex-col translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-hidden",
           "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-xl",
           DEFAULT_WIDTH,
           className,
@@ -118,31 +176,56 @@ const DialogContent = React.forwardRef<
           // o chamador declarou, e só enquanto estiver ampliado.
           expanded && expandedWidth(className),
         )}
+        onOpenAutoFocus={(event) => {
+          onOpenAutoFocus?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          // O Radix foca o primeiro elemento focável, e desde que os botões de
+          // ampliar/fechar entraram no cabeçalho esse primeiro passou a ser o
+          // de ampliar — abrir o modal e teclar Enter maximizava a janela em
+          // vez de enviar o formulário. Quando há campo, o foco é dele.
+          const conteudo = event.target as HTMLElement | null;
+          const primeiroCampo = conteudo?.querySelector<HTMLElement>(
+            "form input:not([type='hidden']), form textarea, form select",
+          );
+          if (primeiroCampo) {
+            event.preventDefault();
+            primeiroCampo.focus();
+          }
+        }}
         {...props}
       >
-        {children}
-        <div className="absolute right-4 top-4 flex items-center gap-2">
-          {expandable && (
-            <button
-              type="button"
-              onClick={() => setExpanded((value) => !value)}
-              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
-            >
-              {expanded ? (
-                <Minimize2 className="h-4 w-4" />
-              ) : (
-                <Maximize2 className="h-4 w-4" />
-              )}
-              <span className="sr-only">
-                {expanded ? "Restaurar" : "Ampliar"}
-              </span>
-            </button>
-          )}
-          <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
-            <X className="h-4 w-4" />
-            <span className="sr-only">Fechar</span>
-          </DialogPrimitive.Close>
+        {/* Título e botões na mesma linha de um flex, em vez de os botões
+            flutuarem `absolute`: posicionados por coordenada eles nunca
+            batiam com a altura do título — mudava o tamanho da fonte e o
+            alinhamento saía. Aqui `items-center` resolve sozinho. */}
+        <div className="flex shrink-0 items-center justify-between gap-4 border-b border-border pb-4">
+          <div className="min-w-0 flex-1">{header}</div>
+          <div className="flex items-center gap-2">
+            {expandable && (
+              <button
+                type="button"
+                onClick={() => setExpanded((value) => !value)}
+                className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {expanded ? (
+                  <Shrink className="h-4 w-4" />
+                ) : (
+                  <Expand className="h-4 w-4" />
+                )}
+                <span className="sr-only">
+                  {expanded ? "Restaurar" : "Ampliar"}
+                </span>
+              </button>
+            )}
+            <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Fechar</span>
+            </DialogPrimitive.Close>
+          </div>
         </div>
+        {body}
       </DialogPrimitive.Content>
     </DialogPortal>
   );
@@ -152,48 +235,49 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 /**
  * Corpo do modal como formulário — é o que faz o `Enter` submeter.
  * O `preventDefault` fica aqui porque, sem ele, o Enter recarrega a página.
- * O `DialogFooter` com o botão `type="submit"` precisa ficar dentro deste form.
+ *
+ * O `DialogFooter` é separado dos demais filhos e fica **fora da área
+ * rolável**, ainda dentro do `<form>`. As duas metades importam: fora do
+ * scroll porque `sticky` deixa o conteúdo correr por baixo dos botões — com
+ * fundo próprio ele só disfarça, e qualquer filho com fundo ou `z-index`
+ * atravessa; dentro do `<form>` porque é lá que mora o `type="submit"`, e
+ * tirá-lo dali quebraria o Enter, que é a razão de este componente existir.
+ *
+ * A separação é feita aqui, e não pedida ao chamador, para os oito modais que
+ * já existem continuarem escritos como estão.
  */
 const DialogForm = React.forwardRef<
   HTMLFormElement,
   React.ComponentPropsWithoutRef<"form">
->(({ className, onSubmit, ...props }, ref) => (
-  <form
-    ref={ref}
-    onSubmit={(e) => {
-      e.preventDefault();
-      onSubmit?.(e);
-    }}
-    className={cn("flex flex-col gap-4", className)}
-    {...props}
-  />
-));
-DialogForm.displayName = "DialogForm";
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
-  <div
-    className={cn("flex flex-col space-y-1.5 text-left", className)}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
+>(({ className, onSubmit, children, ...props }, ref) => {
+  const items = React.Children.toArray(children);
+  const footerAt = indexOfChild(items, "DialogFooter");
+  const hasFooter = footerAt >= 0;
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
+  return (
+    <form
+      ref={ref}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+      }}
+      className={cn("flex min-h-0 flex-1 flex-col gap-4", className)}
+      {...props}
+    >
+      {/* `min-h-0` é o que permite encolher dentro do flex e ativar o scroll:
+          sem ele o corpo assume a altura do conteúdo e estoura o modal. */}
+      {/* `px-1` reserva a folga que o anel de foco ocupa: o `ring` é
+          desenhado fora da borda do input, e sem essa margem o container
+          de scroll corta o anel do primeiro e do último campo.
+          `-mx-1` devolve o recuo para o conteúdo seguir alinhado. */}
+      <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-1 [scrollbar-width:thin]">
+        {hasFooter ? items.slice(0, footerAt) : items}
+      </div>
+      {hasFooter && items.slice(footerAt)}
+    </form>
+  );
+});
+DialogForm.displayName = "DialogForm";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,

package/src/components/ui/sheet.tsx

@@ -45,7 +45,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
         <X className="h-4 w-4" />
         <span className="sr-only">Fechar</span>
       </DialogPrimitive.Close>

package/src/features/errors/error-state.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { JSX } from "react";
+
+import { Button } from "#core/components/ui";
+
+export interface ErrorStateProps {
+  icon: LucideIcon;
+  code: string;
+  title: string;
+  description: string;
+  /** Ação principal. Sem ela a tela é só o aviso — usado onde não há para onde voltar. */
+  action?: { label: string; onClick: () => void };
+}
+
+/**
+ * O corpo comum das telas de erro (403, 404).
+ *
+ * Existe para as duas não divergirem: são a mesma peça com ícone e texto
+ * diferentes, e escritas separadas elas viram dois desenhos parecidos-mas-não-
+ * iguais na primeira vez que alguém ajusta só uma.
+ *
+ * Não depende do `AppShell`: a 404 do Next é capturada na raiz do app, fora da
+ * área autenticada, e uma tela de erro que só funciona logado não serve para o
+ * caso mais comum — link velho aberto por quem nem sessão tem.
+ */
+export function ErrorState({
+  icon: Icon,
+  code,
+  title,
+  description,
+  action,
+}: ErrorStateProps): JSX.Element {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-6 text-center">
+      <div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+        <Icon className="h-8 w-8 text-muted-foreground" />
+      </div>
+
+      <p className="mb-2 font-mono text-sm text-muted-foreground">{code}</p>
+      <h1 className="mb-3 text-2xl font-bold">{title}</h1>
+      <p className="mb-8 max-w-md text-sm text-muted-foreground">
+        {description}
+      </p>
+
+      {action && <Button onClick={action.onClick}>{action.label}</Button>}
+    </div>
+  );
+}

package/src/features/errors/forbidden-screen.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ShieldOff } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { JSX } from "react";
+
+import { useI18n } from "#core/contexts";
+import { ErrorState } from "#core/features/errors/error-state";
+
+/**
+ * 403 — a pessoa está autenticada, mas a tela não é dela.
+ *
+ * Diz que **falta permissão**, e não que a página não existe: quem chegou aqui
+ * costuma ter recebido o link de alguém, e "peça acesso a um administrador" é a
+ * única instrução acionável. Fingir 404 esconderia o motivo e transformaria um
+ * pedido de acesso de um minuto em suporte.
+ *
+ * O `AppShell` a mostra sozinho quando a rota exige permissão que falta; o
+ * projeto troca por outra passando `forbidden` ao shell.
+ */
+export function ForbiddenScreen(): JSX.Element {
+  const { t } = useI18n();
+  const router = useRouter();
+
+  return (
+    <ErrorState
+      icon={ShieldOff}
+      code="403"
+      title={t("errors.forbiddenTitle")}
+      description={t("errors.forbiddenDescription")}
+      action={{
+        label: t("errors.backToDashboard"),
+        onClick: () => router.push("/dashboard"),
+      }}
+    />
+  );
+}

package/src/features/errors/not-found-screen.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { FileQuestion } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { JSX } from "react";
+
+import { useI18n } from "#core/contexts";
+import { ErrorState } from "#core/features/errors/error-state";
+
+/**
+ * 404 no tema do sistema.
+ *
+ * O projeto adota criando `src/app/not-found.tsx` com uma linha
+ * (`export { NotFoundScreen as default } from "rl-core-front"`) — ou escreve a
+ * própria no lugar, já que `not-found.tsx` é rota especial do Next e pertence
+ * ao projeto. Sem isso vale a página padrão do Next: fundo branco, texto em
+ * inglês, ignorando tema e marca.
+ */
+export function NotFoundScreen(): JSX.Element {
+  const { t } = useI18n();
+  const router = useRouter();
+
+  return (
+    <ErrorState
+      icon={FileQuestion}
+      code="404"
+      title={t("errors.notFoundTitle")}
+      description={t("errors.notFoundDescription")}
+      action={{
+        label: t("errors.backToDashboard"),
+        onClick: () => router.push("/dashboard"),
+      }}
+    />
+  );
+}

package/src/features/rbac/components/permission-matrix.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+
+import { Badge, Checkbox, Input } from "#core/components/ui";
+import { useI18n } from "#core/contexts";
+import { Permission } from "#core/features/rbac/services/rbac.service";
+
+/** Uma área do sistema com tudo que se pode fazer nela. */
+interface ResourceGroup {
+  name: string;
+  label: string;
+  permissions: Permission[];
+}
+
+export interface PermissionMatrixProps {
+  /** Catálogo inteiro, como `/rbac/permissions` devolve. */
+  permissions: Permission[];
+  /** Ids marcados. */
+  value: string[];
+  onChange: (permissionIds: string[]) => void;
+  /** Somente leitura: usado no cartão de resumo do papel. */
+  readOnly?: boolean;
+}
+
+/**
+ * As permissões de um papel na forma como se pensa nelas: **uma área por
+ * bloco, e dentro dela o que se pode fazer ali**.
+ *
+ * Substitui a lista chapada de checkboxes com o código cru (`users:read:any`),
+ * que obrigava a ler 48 strings técnicas numa caixa de 240px para montar um
+ * papel — e que só piora, porque cada feature nova do projeto acrescenta a sua
+ * leva. Agrupar por recurso é o que mantém a tela legível quando o catálogo
+ * dobra de tamanho.
+ *
+ * Os rótulos saem da descrição que o backend já manda, com o nome cru de
+ * reserva: catálogo estendido pelo projeto (`finance`, `funkos`) aparece aqui
+ * sem precisar de tradução no core.
+ */
+export function PermissionMatrix({
+  permissions,
+  value,
+  onChange,
+  readOnly,
+}: PermissionMatrixProps): JSX.Element {
+  const { t } = useI18n();
+  const [search, setSearch] = useState("");
+  const [collapsed, setCollapsed] = useState<string[]>([]);
+
+  const groups = useMemo<ResourceGroup[]>(
+    () => groupByResource(permissions),
+    [permissions],
+  );
+
+  const visible = useMemo<ResourceGroup[]>(() => {
+    const term = search.trim().toLowerCase();
+    if (!term) {
+      return groups;
+    }
+    // Busca pelo nome da área e pelo código: quem já sabe o que procura
+    // digita `finance`, quem não sabe procura "Financeiro".
+    return groups
+      .map((group) => ({
+        ...group,
+        permissions: group.label.toLowerCase().includes(term)
+          ? group.permissions
+          : group.permissions.filter((p) =>
+              `${p.code} ${p.description ?? ""}`.toLowerCase().includes(term),
+            ),
+      }))
+      .filter((group) => group.permissions.length > 0);
+  }, [groups, search]);
+
+  const toggle = (id: string): void =>
+    onChange(
+      value.includes(id) ? value.filter((x) => x !== id) : [...value, id],
+    );
+
+  const toggleGroup = (group: ResourceGroup): void => {
+    const ids = group.permissions.map((p) => p.id);
+    const allOn = ids.every((id) => value.includes(id));
+    onChange(
+      allOn
+        ? value.filter((id) => !ids.includes(id))
+        : [...value, ...ids.filter((id) => !value.includes(id))],
+    );
+  };
+
+  const toggleCollapse = (name: string): void =>
+    setCollapsed((c) =>
+      c.includes(name) ? c.filter((x) => x !== name) : [...c, name],
+    );
+
+  return (
+    <div className="space-y-3">
+      {!readOnly && (
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("rbac.searchPermissions")}
+        />
+      )}
+
+      {/* Sem scroll próprio: quem rola é o corpo do modal. Dois scrolls
+          aninhados prendem a roda do mouse no de dentro. */}
+      <div className="space-y-2">
+        {visible.map((group) => {
+          const ids = group.permissions.map((p) => p.id);
+          const selected = ids.filter((id) => value.includes(id)).length;
+          const isCollapsed = collapsed.includes(group.name);
+
+          return (
+            <div
+              key={group.name}
+              className="rounded-md border border-border bg-card"
+            >
+              <div className="flex items-center gap-2 px-3 py-2">
+                {!readOnly && (
+                  <Checkbox
+                    checked={selected === ids.length}
+                    onCheckedChange={() => toggleGroup(group)}
+                    aria-label={group.label}
+                  />
+                )}
+                <button
+                  type="button"
+                  onClick={() => toggleCollapse(group.name)}
+                  className="flex flex-1 items-center gap-2 text-left"
+                >
+                  <span className="text-sm font-medium">{group.label}</span>
+                  <Badge variant="outline" className="font-mono text-xs">
+                    {selected}/{ids.length}
+                  </Badge>
+                  <ChevronDown
+                    className={`ml-auto h-4 w-4 text-muted-foreground transition-transform ${
+                      isCollapsed ? "-rotate-90" : ""
+                    }`}
+                  />
+                </button>
+              </div>
+
+              {!isCollapsed && (
+                <div className="grid grid-cols-1 gap-1 border-t border-border px-3 py-2 sm:grid-cols-2">
+                  {group.permissions.map((p) => (
+                    <label
+                      key={p.id}
+                      className="flex cursor-pointer items-start gap-2 rounded px-1 py-1 text-sm hover:bg-muted/50"
+                    >
+                      <Checkbox
+                        checked={value.includes(p.id)}
+                        onCheckedChange={() => toggle(p.id)}
+                        disabled={readOnly}
+                        className="mt-0.5"
+                      />
+                      <span className="flex flex-col">
+                        <span>{actionLabel(p)}</span>
+                        <span className="font-mono text-xs text-muted-foreground">
+                          {p.code}
+                        </span>
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {visible.length === 0 && (
+          <p className="py-6 text-center text-sm text-muted-foreground">
+            {t("rbac.noPermissionsFound")}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Agrupa por recurso, caindo no prefixo do código quando a relação não veio.
+ *
+ * O fallback existe porque `code` é a única parte que **sempre** chega: uma
+ * permissão órfã (resource apagado) sumiria da tela em vez de aparecer para
+ * ser corrigida, e uma permissão invisível continua valendo no backend.
+ */
+const groupByResource = (permissions: Permission[]): ResourceGroup[] => {
+  const map = new Map<string, ResourceGroup>();
+
+  for (const permission of permissions) {
+    const name = permission.resource?.name ?? permission.code.split(":")[0];
+    const label =
+      permission.resource?.description?.trim() || name;
+
+    const group = map.get(name) ?? { name, label, permissions: [] };
+    group.permissions.push(permission);
+    map.set(name, group);
+  }
+
+  return [...map.values()].sort((a, b) => a.label.localeCompare(b.label));
+};
+
+/** "Ler/visualizar · Apenas recursos próprios" — ação e alcance, nesta ordem. */
+const actionLabel = (permission: Permission): string => {
+  const [, action, scope] = permission.code.split(":");
+  const actionText = permission.action?.description?.trim() || action;
+  const scopeText = permission.scope?.description?.trim() || scope;
+  return `${actionText} · ${scopeText}`;
+};

package/src/features/rbac/panels/definitions-panel.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
+import { useAuth, useI18n } from "#core/contexts";
+import { ActionsPanel } from "#core/features/rbac/panels/actions-panel";
+import { PermissionsPanel } from "#core/features/rbac/panels/permissions-panel";
+import { ResourcesPanel } from "#core/features/rbac/panels/resources-panel";
+import { ScopesPanel } from "#core/features/rbac/panels/scopes-panel";
+
+/**
+ * A mecânica do RBAC — as peças de que um código `resource:action:scope` é
+ * feito, mais o catálogo de permissões montado com elas.
+ *
+ * As quatro viviam como abas irmãs de "Papéis", o que punha a manutenção do
+ * modelo no mesmo nível do trabalho de todo dia: quem entra para dar acesso a
+ * alguém não deveria esbarrar em "Resources" e "Scopes" no caminho. Aqui elas
+ * continuam inteiras, mas atrás de uma porta só.
+ */
+export function DefinitionsPanel(): JSX.Element {
+  const { t } = useI18n();
+  const { hasPermission } = useAuth();
+
+  const tabs = [
+    {
+      value: "permissions",
+      label: t("rbac.tabs.permissions"),
+      perm: "permissions:read:any",
+      panel: <PermissionsPanel />,
+    },
+    {
+      value: "resources",
+      label: t("rbac.tabs.resources"),
+      perm: "resources:read:any",
+      panel: <ResourcesPanel />,
+    },
+    {
+      value: "actions",
+      label: t("rbac.tabs.actions"),
+      perm: "actions:read:any",
+      panel: <ActionsPanel />,
+    },
+    {
+      value: "scopes",
+      label: t("rbac.tabs.scopes"),
+      perm: "scopes:read:any",
+      panel: <ScopesPanel />,
+    },
+  ].filter((tab) => hasPermission(tab.perm));
+
+  if (tabs.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{t("rbac.definitionsHint")}</p>
+      <Tabs defaultValue={tabs[0].value}>
+        <TabsList>
+          {tabs.map((tab) => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tabs.map((tab) => (
+          <TabsContent key={tab.value} value={tab.value}>
+            {tab.panel}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+}

package/src/features/rbac/panels/index.ts

@@ -1,6 +1,7 @@
 // Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
 export * from "./actions-panel";
 export * from "./catalog-panel";
+export * from "./definitions-panel";
 export * from "./groups-panel";
 export * from "./permissions-panel";
 export * from "./resources-panel";

package/src/features/rbac/panels/roles-panel.tsx

@@ -1,15 +1,17 @@
 "use client";
 
+import { yupResolver } from "@hookform/resolvers/yup";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 import type { JSX } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
 
 import {
   Badge,
   Button,
   Card,
   CardContent,
-  Checkbox,
   Dialog,
   DialogContent,
   DialogFooter,
@@ -21,6 +23,7 @@ import {
   Label,
 } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
+import { PermissionMatrix } from "#core/features/rbac/components/permission-matrix";
 import {
   Permission,
   rbacService,
@@ -29,6 +32,12 @@ import {
 import { useConfirm } from "#core/hooks/use-confirm";
 import { RequestOperation, useRequest } from "#core/hooks/use-request";
 
+interface RoleFormValues {
+  name: string;
+  description?: string;
+  permissionIds: string[];
+}
+
 export function RolesPanel(): JSX.Element {
   const { run, loading } = useRequest();
   const { t } = useI18n();
@@ -38,12 +47,29 @@ export function RolesPanel(): JSX.Element {
   const [perms, setPerms] = useState<Permission[]>([]);
   const [open, setOpen] = useState(false);
   const [editing, setEditing] = useState<Role | null>(null);
-  const [form, setForm] = useState({
-    name: "",
-    description: "",
-    permissionIds: [] as string[],
+
+  // Mesmo padrão das outras telas do core (react-hook-form + Yup): o erro sai
+  // sob o campo, e não como toast da API depois da viagem até o servidor.
+  const schema = yup.object({
+    name: yup.string().trim().required(t("validation.required")),
+    description: yup.string().optional(),
+    permissionIds: yup.array().of(yup.string().required()).required(),
   });
 
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<RoleFormValues>({
+    resolver: yupResolver(schema),
+    defaultValues: { name: "", description: "", permissionIds: [] },
+  });
+
+  const permissionIds = watch("permissionIds");
+
   const load = async (): Promise<void> => {
     const [r, p] = await Promise.all([
       run(() => rbacService.listRoles()),
@@ -59,12 +85,12 @@ export function RolesPanel(): JSX.Element {
 
   const openNew = (): void => {
     setEditing(null);
-    setForm({ name: "", description: "", permissionIds: [] });
+    reset({ name: "", description: "", permissionIds: [] });
     setOpen(true);
   };
   const openEdit = (role: Role): void => {
     setEditing(role);
-    setForm({
+    reset({
       name: role.name,
       description: role.description ?? "",
       permissionIds: (role.permissions ?? []).map((p) => p.id),
@@ -72,12 +98,12 @@ export function RolesPanel(): JSX.Element {
     setOpen(true);
   };
 
-  const save = async (): Promise<void> => {
+  const save = async (values: RoleFormValues): Promise<void> => {
     const res = editing
-      ? await run(() => rbacService.updateRole(editing.id, form), {
+      ? await run(() => rbacService.updateRole(editing.id, values), {
           success: RequestOperation.Update,
         })
-      : await run(() => rbacService.createRole(form), {
+      : await run(() => rbacService.createRole(values), {
           success: RequestOperation.Create,
         });
     if (res) {
@@ -106,13 +132,6 @@ export function RolesPanel(): JSX.Element {
 
   const canManage =
     hasPermission("roles:update:any") || hasPermission("roles:delete:any");
-  const togglePerm = (id: string): void =>
-    setForm((f) => ({
-      ...f,
-      permissionIds: f.permissionIds.includes(id)
-        ? f.permissionIds.filter((x) => x !== id)
-        : [...f.permissionIds, id],
-    }));
 
   return (
     <div>
@@ -122,6 +141,7 @@ export function RolesPanel(): JSX.Element {
           {t("common.create")}
         </Button>
       )}
+
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {roles.map((role) => (
           <Card key={role.id}>
@@ -152,62 +172,52 @@ export function RolesPanel(): JSX.Element {
                   </div>
                 )}
               </div>
-              <p className="mb-2 text-sm text-muted-foreground">
+              <p className="mb-3 text-sm text-muted-foreground">
                 {role.description}
               </p>
-              <div className="flex flex-wrap gap-1">
-                {(role.permissions ?? []).map((p) => (
-                  <Badge key={p.id} variant="outline">
-                    {p.code}
-                  </Badge>
-                ))}
-              </div>
+              <RoleSummary role={role} />
             </CardContent>
           </Card>
         ))}
       </div>
 
       <Dialog open={open} onOpenChange={(o) => !o && setOpen(false)}>
-        <DialogContent className="max-w-lg">
+        <DialogContent className="max-w-3xl">
           <DialogHeader>
             <DialogTitle>
               {editing ? t("common.edit") : t("common.create")}
             </DialogTitle>
           </DialogHeader>
-          <DialogForm onSubmit={() => void save()}>
-            <Field label={t("users.name")}>
-              <Input
-                value={form.name}
-                onChange={(e) => setForm({ ...form, name: e.target.value })}
-              />
-            </Field>
-            <Field label="Descrição">
-              <Input
-                value={form.description}
-                onChange={(e) =>
-                  setForm({ ...form, description: e.target.value })
+          <DialogForm onSubmit={handleSubmit((values) => void save(values))}>
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <Field label={t("rbac.roleName")} error={errors.name?.message}>
+                <Input {...register("name")} />
+              </Field>
+              <Field
+                label={t("common.description")}
+                error={errors.description?.message}
+              >
+                <Input {...register("description")} />
+              </Field>
+            </div>
+
+            <div className="space-y-2">
+              <Label>{t("rbac.screensAndPermissions")}</Label>
+              <PermissionMatrix
+                permissions={perms}
+                value={permissionIds}
+                onChange={(ids) =>
+                  setValue("permissionIds", ids, { shouldDirty: true })
                 }
               />
-            </Field>
-            <div className="space-y-2">
-              <Label>{t("dashboard.permissions")}</Label>
-              <div className="flex max-h-60 flex-col gap-2 overflow-y-auto rounded-md border border-border p-3">
-                {perms.map((p) => (
-                  <label
-                    key={p.id}
-                    className="flex cursor-pointer items-center gap-2 text-sm"
-                  >
-                    <Checkbox
-                      checked={form.permissionIds.includes(p.id)}
-                      onCheckedChange={() => togglePerm(p.id)}
-                    />
-                    {p.code}
-                  </label>
-                ))}
-              </div>
             </div>
+
             <DialogFooter className="gap-2">
-              <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
                 {t("common.cancel")}
               </Button>
               <Button type="submit" disabled={loading}>
@@ -222,3 +232,49 @@ export function RolesPanel(): JSX.Element {
     </div>
   );
 }
+
+/**
+ * Resumo do papel: as **áreas** que ele alcança, não os códigos.
+ *
+ * O cartão listava uma badge por permissão — no Super Admin, que tem todas,
+ * isso é uma parede de 48 códigos que não se lê e empurra os outros papéis
+ * para fora da tela.
+ */
+function RoleSummary({ role }: { role: Role }): JSX.Element {
+  const { t } = useI18n();
+  const permissions = useMemo(() => role.permissions ?? [], [role.permissions]);
+
+  const resources = useMemo(() => {
+    const names = new Set(
+      permissions.map((p) => p.resource?.description?.trim() || p.code.split(":")[0]),
+    );
+    return [...names].sort((a, b) => a.localeCompare(b));
+  }, [permissions]);
+
+  if (permissions.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">{t("rbac.noPermissions")}</p>
+    );
+  }
+
+  const shown = resources.slice(0, 6);
+  const rest = resources.length - shown.length;
+
+  return (
+    <div className="space-y-2">
+      <p className="text-xs text-muted-foreground">
+        {t("rbac.permissionCount")
+          .replace("{count}", String(permissions.length))
+          .replace("{screens}", String(resources.length))}
+      </p>
+      <div className="flex flex-wrap gap-1">
+        {shown.map((name) => (
+          <Badge key={name} variant="outline">
+            {name}
+          </Badge>
+        ))}
+        {rest > 0 && <Badge variant="outline">+{rest}</Badge>}
+      </div>
+    </div>
+  );
+}

package/src/features/rbac/rbac-screen.tsx

@@ -5,14 +5,23 @@ import type { JSX } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "#core/components/ui";
 import { useAuth, useI18n } from "#core/contexts";
 import {
-  ActionsPanel,
+  DefinitionsPanel,
   GroupsPanel,
-  PermissionsPanel,
-  ResourcesPanel,
   RolesPanel,
-  ScopesPanel,
 } from "#core/features/rbac/panels";
 
+/**
+ * Controle de acesso, organizado pelo que se vem fazer aqui.
+ *
+ * **Papéis** é o trabalho de todo dia — é onde se decide que telas cada tipo de
+ * pessoa alcança. **Grupos** é o organograma, para quem usa escopo de equipe.
+ * **Definições** é a mecânica (recursos, ações, escopos e o catálogo de
+ * permissões), que o seed já preenche e quase nunca se toca.
+ *
+ * Eram seis abas no mesmo nível, três delas CRUD do modelo relacional com
+ * rótulo em inglês: a tarefa comum ficava do lado da manutenção rara, e a tela
+ * pedia que se soubesse o desenho do RBAC antes de conceder um acesso.
+ */
 export function RbacScreen(): JSX.Element {
   const { t } = useI18n();
   const { hasPermission } = useAuth();
@@ -20,41 +29,30 @@ export function RbacScreen(): JSX.Element {
   const tabs = [
     {
       value: "roles",
-      label: "Papéis",
-      perm: "roles:read:any",
+      label: t("rbac.tabs.roles"),
+      perm: ["roles:read:any"],
       panel: <RolesPanel />,
     },
-    {
-      value: "permissions",
-      label: t("dashboard.permissions"),
-      perm: "permissions:read:any",
-      panel: <PermissionsPanel />,
-    },
     {
       value: "groups",
-      label: "Grupos",
-      perm: "groups:read:any",
+      label: t("rbac.tabs.groups"),
+      perm: ["groups:read:any"],
       panel: <GroupsPanel />,
     },
     {
-      value: "resources",
-      label: "Resources",
-      perm: "resources:read:any",
-      panel: <ResourcesPanel />,
-    },
-    {
-      value: "actions",
-      label: "Actions",
-      perm: "actions:read:any",
-      panel: <ActionsPanel />,
-    },
-    {
-      value: "scopes",
-      label: "Scopes",
-      perm: "scopes:read:any",
-      panel: <ScopesPanel />,
+      value: "definitions",
+      label: t("rbac.tabs.definitions"),
+      // Aparece para quem alcança qualquer uma das quatro de dentro: exigir as
+      // quatro esconderia a aba de quem administra só o catálogo.
+      perm: [
+        "permissions:read:any",
+        "resources:read:any",
+        "actions:read:any",
+        "scopes:read:any",
+      ],
+      panel: <DefinitionsPanel />,
     },
-  ].filter((x) => hasPermission(x.perm));
+  ].filter((tab) => tab.perm.some((code) => hasPermission(code)));
 
   return (
     <div>
@@ -62,15 +60,15 @@ export function RbacScreen(): JSX.Element {
       {tabs.length > 0 && (
         <Tabs defaultValue={tabs[0].value}>
           <TabsList>
-            {tabs.map((x) => (
-              <TabsTrigger key={x.value} value={x.value}>
-                {x.label}
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab.value} value={tab.value}>
+                {tab.label}
               </TabsTrigger>
             ))}
           </TabsList>
-          {tabs.map((x) => (
-            <TabsContent key={x.value} value={x.value}>
-              {x.panel}
+          {tabs.map((tab) => (
+            <TabsContent key={tab.value} value={tab.value}>
+              {tab.panel}
             </TabsContent>
           ))}
         </Tabs>

package/src/i18n/messages/en.ts

@@ -93,6 +93,7 @@ export const en: Messages = {
     results: "results",
     perPage: "per page",
     empty: "No records",
+    emptyFiltered: "No records match this filter",
   },
   filters: {
     button: "Filters",
@@ -170,6 +171,7 @@ export const en: Messages = {
     no: "No",
     actions: "Actions",
     loading: "Loading...",
+    description: "Description",
     language: "Language",
     theme: "Theme",
     light: "Light",
@@ -295,6 +297,23 @@ export const en: Messages = {
     title: "Roles & Permissions",
     manager: "Manager",
     noManager: "No manager",
+    tabs: {
+      roles: "Roles",
+      groups: "Groups",
+      definitions: "Definitions",
+      permissions: "Permissions",
+      resources: "Areas",
+      actions: "Actions",
+      scopes: "Scopes",
+    },
+    roleName: "Role name",
+    screensAndPermissions: "Areas and permissions",
+    searchPermissions: "Search area or permission…",
+    noPermissionsFound: "No permissions found",
+    noPermissions: "No permissions granted",
+    permissionCount: "{count} permissions across {screens} areas",
+    definitionsHint:
+      "The building blocks of a permission code. The seed creates them — only touch this when adding a new resource.",
   },
   validation: {
     required: "Required field",
@@ -312,6 +331,13 @@ export const en: Messages = {
     },
   },
   errors: {
+    notFoundTitle: "Page not found",
+    notFoundDescription:
+      "The address you opened does not exist or has moved. Check the link and try again.",
+    forbiddenTitle: "You don't have access to this area",
+    forbiddenDescription:
+      "Your account lacks permission to open this screen. Ask a system administrator for access.",
+    backToDashboard: "Back to home",
     unexpected: "Unexpected error",
     codes: {
       ACCOUNT_INACTIVE:

package/src/i18n/messages/pt.ts

@@ -95,6 +95,7 @@ export const pt = {
     results: "resultados",
     perPage: "por página",
     empty: "Nenhum registro",
+    emptyFiltered: "Nenhum registro para este filtro",
   },
   filters: {
     button: "Filtros",
@@ -172,6 +173,7 @@ export const pt = {
     no: "Não",
     actions: "Ações",
     loading: "Carregando...",
+    description: "Descrição",
     language: "Idioma",
     theme: "Tema",
     light: "Claro",
@@ -298,6 +300,24 @@ export const pt = {
     title: "Papéis & Permissões",
     manager: "Gerente",
     noManager: "Sem gerente",
+    tabs: {
+      roles: "Papéis",
+      groups: "Grupos",
+      definitions: "Definições",
+      permissions: "Permissões",
+      resources: "Áreas",
+      actions: "Ações",
+      scopes: "Alcances",
+    },
+    roleName: "Nome do papel",
+    screensAndPermissions: "Áreas e permissões",
+    searchPermissions: "Buscar área ou permissão…",
+    noPermissionsFound: "Nenhuma permissão encontrada",
+    noPermissions: "Nenhuma permissão concedida",
+    // `{count}` e `{screens}` são trocados no componente.
+    permissionCount: "{count} permissões em {screens} áreas",
+    definitionsHint:
+      "As peças que formam um código de permissão. O seed já as cria — mexa aqui só ao acrescentar um recurso novo.",
   },
   validation: {
     required: "Campo obrigatório",
@@ -318,6 +338,13 @@ export const pt = {
     codeShort: "Código muito curto",
   },
   errors: {
+    notFoundTitle: "Página não encontrada",
+    notFoundDescription:
+      "O endereço que você abriu não existe ou foi movido. Confira o link e tente de novo.",
+    forbiddenTitle: "Você não tem acesso a esta área",
+    forbiddenDescription:
+      "Sua conta não tem permissão para abrir esta tela. Peça acesso a um administrador do sistema.",
+    backToDashboard: "Voltar para o início",
     unexpected: "Erro inesperado",
     // Texto por `errorCode` do backend. Só entra aqui o código cuja mensagem é
     // fixa — quando o servidor manda dado dinâmico (tentativas restantes, por

package/src/index.ts

@@ -13,6 +13,10 @@
 // ---------------------------------------------------------------------------
 export { AuditScreen } from "#core/features/audit/audit-screen";
 export { DashboardScreen } from "#core/features/dashboard/dashboard-screen";
+export type { ErrorStateProps } from "#core/features/errors/error-state";
+export { ErrorState } from "#core/features/errors/error-state";
+export { ForbiddenScreen } from "#core/features/errors/forbidden-screen";
+export { NotFoundScreen } from "#core/features/errors/not-found-screen";
 export { LoginScreen } from "#core/features/login/login-screen";
 export { LogsScreen } from "#core/features/logs/logs-screen";
 export { ProfileScreen } from "#core/features/profile/profile-screen";