rl-core-front 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.4.0",
+  "version": "0.5.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/_services/api/app-error-code.enum.ts

@@ -0,0 +1,23 @@
+/**
+ * Espelho do `AppErrorCode` do backend (core/filters/appErrorCode.enum.ts).
+ *
+ * Chave de protocolo, então continua string (§7): o valor é o que trafega no
+ * corpo do erro, e a tradução de cada um mora em `errors.codes.<CÓDIGO>` no
+ * dicionário de i18n.
+ *
+ * Só entra aqui o código que a interface precisa **reconhecer** para mudar de
+ * comportamento — mostrar a mensagem não exige nada disto, porque o
+ * `useRequest` já traduz pelo código que veio.
+ */
+export enum AppErrorCode {
+  /** Conta travada por excesso de tentativas. Só um admin reabre. */
+  ACCOUNT_LOCKED = "ACCOUNT_LOCKED",
+  /** Conta desativada por um administrador. */
+  ACCOUNT_INACTIVE = "ACCOUNT_INACTIVE",
+  /** E-mail/senha não conferem. */
+  INVALID_CREDENTIALS = "INVALID_CREDENTIALS",
+  /** Código de 2FA não confere. */
+  INVALID_TWO_FACTOR_CODE = "INVALID_TWO_FACTOR_CODE",
+  /** A janela entre a senha e o 2FA venceu — refazer o login resolve. */
+  PENDING_TOKEN_EXPIRED = "PENDING_TOKEN_EXPIRED",
+}

package/src/_services/api/schema.d.ts

@@ -528,6 +528,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/rbac/groups/managed": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["RbacController_managedGroups"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/rbac/groups/{id}": {
         parameters: {
             query?: never;
@@ -887,6 +903,7 @@ export interface components {
             /** @default true */
             isActive: boolean;
             roleIds?: string[];
+            groupIds?: string[];
         };
         UpdateUserCommand: {
             name?: string;
@@ -896,6 +913,7 @@ export interface components {
             /** @default true */
             isActive: boolean;
             roleIds?: string[];
+            groupIds?: string[];
         };
         ResourceResponse: {
             /** Format: uuid */
@@ -1049,6 +1067,8 @@ export interface components {
             type: components["schemas"]["GroupType"];
             /** Format: uuid */
             parentId?: string | null;
+            /** Format: uuid */
+            managerId?: string | null;
             isActive: boolean;
             roles?: components["schemas"]["RoleResponse"][];
         };
@@ -1062,6 +1082,8 @@ export interface components {
             type: "company" | "department" | "team";
             /** Format: uuid */
             parentId?: string;
+            /** Format: uuid */
+            managerId?: string | null;
             roleIds?: string[];
         };
         UpdateGroupCommand: {
@@ -1074,6 +1096,8 @@ export interface components {
             type: "company" | "department" | "team";
             /** Format: uuid */
             parentId?: string;
+            /** Format: uuid */
+            managerId?: string | null;
             roleIds?: string[];
             isActive?: boolean;
         };
@@ -2189,6 +2213,25 @@ export interface operations {
             };
         };
     };
+    RbacController_managedGroups: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GroupResponse"][];
+                };
+            };
+        };
+    };
     RbacController_group: {
         parameters: {
             query?: never;

package/src/_services/auth/index.ts

@@ -6,6 +6,8 @@ export type LoginStatus = "SETUP_REQUIRED" | "TOTP_REQUIRED";
 export interface LoginResponse {
   status: LoginStatus;
   pendingToken: string;
+  /** Segundos até a etapa do código vencer — alimenta o contador da tela. */
+  expiresInSeconds: number;
 }
 
 export interface TotpSetup {

package/src/_utils/password.ts

@@ -5,3 +5,43 @@
  */
 export const STRONG_PASSWORD_REGEX =
   /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>]).{8,}$/;
+
+/** Tamanho mínimo — o mesmo `{8,}` do regex acima, nomeado. */
+export const PASSWORD_MIN_LENGTH = 8;
+
+export interface PasswordRule {
+  /** Chave de i18n do texto da regra (`validation.rules.*`). */
+  key: string;
+  /** Parâmetros da tradução, quando o texto tem número. */
+  params?: Record<string, string | number>;
+  test: (value: string) => boolean;
+}
+
+/**
+ * As exigências do regex, uma a uma.
+ *
+ * O regex sozinho só sabe dizer "não passou", e uma senha recusada sem dizer o
+ * que falta obriga a pessoa a adivinhar. Aqui cada condição responde por si, e
+ * a tela mostra quais já foram cumpridas enquanto se digita.
+ *
+ * A lista é derivada do mesmo regex e existe **só para explicar**: quem valida
+ * de fato continua sendo `STRONG_PASSWORD_REGEX`, e o backend por último.
+ */
+export const PASSWORD_RULES: PasswordRule[] = [
+  {
+    key: "validation.rules.minLength",
+    params: { count: PASSWORD_MIN_LENGTH },
+    test: (value) => value.length >= PASSWORD_MIN_LENGTH,
+  },
+  { key: "validation.rules.lowercase", test: (value) => /[a-z]/.test(value) },
+  { key: "validation.rules.uppercase", test: (value) => /[A-Z]/.test(value) },
+  { key: "validation.rules.digit", test: (value) => /\d/.test(value) },
+  {
+    key: "validation.rules.special",
+    test: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value),
+  },
+];
+
+/** Quantas regras a senha já cumpre — base do medidor de força. */
+export const passwordScore = (value: string): number =>
+  PASSWORD_RULES.filter((rule) => rule.test(value)).length;

package/src/_utils/permission.ts

@@ -0,0 +1,14 @@
+/**
+ * Os dois códigos que autorizam a mesma ação em alcances diferentes.
+ *
+ * `anyOrTeam("users:update")` → `["users:update:any", "users:update:team"]`.
+ *
+ * Espelha o helper de mesmo nome do backend (`core/auth/permissionScope.util`),
+ * como os enums do §7: são dois pacotes publicados separadamente, e o front não
+ * importa do outro. O que não pode divergir é o texto dos sufixos — e é
+ * justamente por isso que ele fica escrito num lugar só de cada lado.
+ */
+export const anyOrTeam = (action: string): [string, string] => [
+  `${action}:any`,
+  `${action}:team`,
+];

package/src/_utils/storage.ts

@@ -0,0 +1,64 @@
+/**
+ * Acesso ao `localStorage` que nunca derruba a tela.
+ *
+ * Ler `localStorage` **lança** — não devolve `null` — quando o navegador está
+ * com dados de site bloqueados: Chrome em "bloquear todos os cookies", Safari
+ * com prevenção de rastreamento em contexto de terceiros, políticas
+ * corporativas. Como quem lê são providers da raiz e o shell, um erro ali não
+ * degradava um pedaço da interface: derrubava a aplicação inteira, com tela
+ * branca no login e nenhuma pista para o usuário.
+ *
+ * O script anti-flash do `layout.tsx` já se protegia assim; aqui isso deixa de
+ * ser cuidado de um lugar só e vira a única porta de acesso.
+ *
+ * O que está guardado aqui é conveniência — tema, idioma, menu recolhido,
+ * colunas escondidas. Não poder ler significa cair no padrão, nunca falhar.
+ *
+ * Também cobre o servidor: no primeiro render do Next não existe `window`.
+ */
+const memory = new Map<string, string>();
+
+/**
+ * Espelho em memória para quando o navegador recusa o armazenamento.
+ *
+ * Sem ele, trocar o tema com cookies bloqueados não teria efeito nenhum dentro
+ * da própria sessão — a escrita se perdia e a leitura seguinte devolvia o valor
+ * antigo. Assim a preferência vale enquanto a aba está aberta; ela só não
+ * sobrevive ao recarregamento, que é o máximo possível nesse cenário.
+ */
+export const safeStorage = {
+  get(key: string): string | null {
+    try {
+      if (typeof window === "undefined") {
+        return null;
+      }
+      return window.localStorage.getItem(key);
+    } catch {
+      return memory.get(key) ?? null;
+    }
+  },
+
+  set(key: string, value: string): void {
+    try {
+      if (typeof window === "undefined") {
+        return;
+      }
+      window.localStorage.setItem(key, value);
+    } catch {
+      // Cota estourada ou armazenamento negado: guarda na sessão e segue.
+      memory.set(key, value);
+    }
+  },
+
+  remove(key: string): void {
+    try {
+      memory.delete(key);
+      if (typeof window === "undefined") {
+        return;
+      }
+      window.localStorage.removeItem(key);
+    } catch {
+      // Já saiu do espelho em memória; não há mais nada a fazer.
+    }
+  },
+};

package/src/_utils/user.ts

@@ -0,0 +1,19 @@
+/** Forma mínima que basta para rotular uma pessoa na interface. */
+export interface NamedUser {
+  name?: string | null;
+  lastName?: string | null;
+}
+
+/**
+ * Nome completo para exibição — espelha o getter `fullName` da entidade `User`
+ * do backend, inclusive no comportamento com sobrenome ausente.
+ *
+ * Existe para não haver três concatenações diferentes espalhadas pelas telas:
+ * quem mostra pessoa mostra o nome inteiro, e "Ana" e "Ana" deixam de ser a
+ * mesma linha numa lista de auditoria.
+ *
+ * Saudação é a exceção e continua usando só o primeiro nome — "Bem-vindo, Ana
+ * Paula de Souza" soa como carta de cobrança.
+ */
+export const fullName = (user?: NamedUser | null): string =>
+  [user?.name, user?.lastName].filter(Boolean).join(" ");

package/src/components/app-shell.tsx

@@ -17,6 +17,9 @@ import { usePathname, useRouter } from "next/navigation";
 import type { JSX } from "react";
 import { useEffect, useMemo, useState } from "react";
 
+import { anyOrTeam } from "#core/_utils/permission";
+import { safeStorage } from "#core/_utils/storage";
+import { fullName } from "#core/_utils/user";
 import { Breadcrumbs } from "#core/components/breadcrumbs";
 import { LanguageSelector } from "#core/components/language-selector";
 import { ThemeToggle } from "#core/components/theme-toggle";
@@ -43,7 +46,8 @@ interface NavItem {
   key: string;
   href: string;
   icon: React.ComponentType<{ className?: string }>;
-  perm: string | null;
+  /** Uma permissão, ou várias das quais basta ter uma. */
+  perm: string | string[] | null;
 }
 
 /**
@@ -66,8 +70,13 @@ export interface AppNavItem {
   label: string;
   href: string;
   icon: React.ComponentType<{ className?: string }>;
-  /** Permissão exigida para o item aparecer. Ausente, aparece para todos. */
-  permission?: string | null;
+  /**
+   * Permissão exigida para o item aparecer. Ausente, aparece para todos.
+   *
+   * Uma lista significa "qualquer uma destas" — é o que permite a mesma tela
+   * atender dois escopos, como `users:read:any` e `users:read:team`.
+   */
+  permission?: string | string[] | null;
 }
 
 const DASHBOARD: NavItem = {
@@ -83,7 +92,14 @@ const PROFILE: NavItem = {
   perm: null,
 };
 const ADMIN_CHILDREN: NavItem[] = [
-  { key: "nav.users", href: "/usuarios", icon: Users, perm: "users:read:any" },
+  {
+    key: "nav.users",
+    href: "/usuarios",
+    icon: Users,
+    // Gerente entra pela mesma porta: a lista que ele recebe já vem podada à
+    // equipe dele.
+    perm: anyOrTeam("users:read"),
+  },
   { key: "nav.rbac", href: "/rbac", icon: ShieldCheck, perm: "roles:read:any" },
   { key: "nav.logs", href: "/logs", icon: ScrollText, perm: "audit:read:any" },
   // Restrito a administradores — só quem tem audit:read-trail:any (só Super Admin) vê este item.
@@ -109,13 +125,21 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
   const pathname = usePathname();
 
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [collapsed, setCollapsed] = useState<boolean>(() => {
-    if (typeof window === "undefined") {return false;}
-    return localStorage.getItem(COLLAPSE_KEY) === "1";
-  });
+  const [collapsed, setCollapsed] = useState<boolean>(
+    () => safeStorage.get(COLLAPSE_KEY) === "1",
+  );
+
+  const allows = (perm: string | string[] | null): boolean => {
+    if (!perm) {
+      return true;
+    }
+    return Array.isArray(perm)
+      ? perm.some((code) => hasPermission(code))
+      : hasPermission(perm);
+  };
 
   const adminChildren = useMemo(
-    () => ADMIN_CHILDREN.filter((c) => !c.perm || hasPermission(c.perm)),
+    () => ADMIN_CHILDREN.filter((c) => allows(c.perm)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [user],
   );
@@ -125,7 +149,7 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
   const projectItems = useMemo<NavItem[]>(
     () =>
       (navItems ?? [])
-        .filter((item) => !item.permission || hasPermission(item.permission))
+        .filter((item) => allows(item.permission ?? null))
         .map((item) => ({
           key: item.label,
           href: item.href,
@@ -161,7 +185,7 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
   const toggleCollapsed = (): void =>
     setCollapsed((v) => {
       const next = !v;
-      localStorage.setItem(COLLAPSE_KEY, next ? "1" : "0");
+      safeStorage.set(COLLAPSE_KEY, next ? "1" : "0");
       return next;
     });
 
@@ -296,7 +320,7 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
               />
               <div className="hidden text-left sm:block">
                 <p className="text-sm font-semibold leading-tight">
-                  {user?.name}
+                  {fullName(user)}
                 </p>
                 <p className="text-xs text-muted-foreground">
                   {user?.roles?.[0] ?? ""}
@@ -306,7 +330,7 @@ export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-48">
-            <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
+            <DropdownMenuLabel>{fullName(user)}</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem onClick={() => router.push("/perfil")}>
               <User className="h-4 w-4" />

package/src/components/password-field.tsx

@@ -3,37 +3,64 @@
 import { Eye, EyeOff } from "lucide-react";
 import { forwardRef, InputHTMLAttributes, useState } from "react";
 
-import { Input } from "#core/components/ui";
+import { Input, PasswordRequirements } from "#core/components/ui";
 import { cn } from "#core/lib/utils";
 
 interface PasswordFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   error?: boolean;
+  /**
+   * Valor atual do campo. Presente, o campo mostra as exigências de senha
+   * logo abaixo — **só enquanto está em foco**.
+   *
+   * A lista some ao sair do campo de propósito: são cinco linhas, e em tela
+   * com dois campos de senha elas dobrariam de tamanho e empurrariam o botão
+   * para fora da vista. Enquanto se digita é quando a lista serve; depois,
+   * quem avisa que algo está errado é a mensagem de validação.
+   *
+   * A visibilidade é `focus-within` no CSS, e não estado: o olho de
+   * mostrar/ocultar vive dentro do campo, e clicar nele tiraria o foco do
+   * input — com estado, a lista piscaria a cada clique.
+   */
+  rulesFor?: string;
 }
 
 export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
-  function PasswordField({ className, error, ...props }, ref) {
+  function PasswordField({ className, error, rulesFor, ...props }, ref) {
     const [show, setShow] = useState(false);
     return (
-      <div className="relative">
-        <Input
-          ref={ref}
-          type={show ? "text" : "password"}
-          className={cn(
-            "pr-10",
-            error && "border-destructive focus-visible:ring-destructive",
-            className,
-          )}
-          {...props}
-        />
-        <button
-          type="button"
-          tabIndex={-1}
-          onClick={() => setShow((s) => !s)}
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
-          aria-label={show ? "ocultar senha" : "mostrar senha"}
-        >
-          {show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-        </button>
+      <div className="group">
+        <div className="relative">
+          <Input
+            ref={ref}
+            type={show ? "text" : "password"}
+            className={cn(
+              "pr-10",
+              error && "border-destructive focus-visible:ring-destructive",
+              className,
+            )}
+            {...props}
+          />
+          <button
+            type="button"
+            tabIndex={-1}
+            onClick={() => setShow((s) => !s)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={show ? "ocultar senha" : "mostrar senha"}
+          >
+            {show ? (
+              <EyeOff className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+
+        {rulesFor !== undefined && (
+          <PasswordRequirements
+            value={rulesFor}
+            className="mt-2 hidden group-focus-within:flex"
+          />
+        )}
       </div>
     );
   },

package/src/components/ui/alert.tsx

@@ -7,8 +7,8 @@ const alertVariants = cva("rounded-md border px-3 py-2 text-sm", {
   variants: {
     variant: {
       info: "border-primary/30 bg-primary/10 text-primary",
-      success: "border-success/30 bg-success/10 text-success",
-      warning: "border-warning/30 bg-warning/10 text-warning",
+      success: "border-success/30 bg-success/10 text-success-strong",
+      warning: "border-warning/30 bg-warning/10 text-warning-strong",
       error: "border-destructive/30 bg-destructive/10 text-destructive",
     },
   },
@@ -18,10 +18,39 @@ const alertVariants = cva("rounded-md border px-3 py-2 text-sm", {
 export interface AlertProps
   extends
     React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {}
+    VariantProps<typeof alertVariants> {
+  /**
+   * Ícone à esquerda, alinhado à primeira linha do texto.
+   *
+   * Existe porque telas passaram a remontar o aviso à mão só para ter um ícone
+   * — e a cópia não acompanhou a correção de contraste das cores. Sem ícone, o
+   * componente renderiza exatamente como antes.
+   */
+  icon?: React.ReactNode;
+}
 
-export function Alert({ variant, className, ...props }: AlertProps): React.JSX.Element {
+export function Alert({
+  variant,
+  className,
+  icon,
+  children,
+  ...props
+}: AlertProps): React.JSX.Element {
   return (
-    <div className={cn(alertVariants({ variant }), className)} {...props} />
+    <div
+      className={cn(
+        alertVariants({ variant }),
+        icon && "flex items-start gap-2",
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className="mt-0.5 shrink-0 [&>svg]:h-4 [&>svg]:w-4" aria-hidden>
+          {icon}
+        </span>
+      )}
+      {icon ? <span>{children}</span> : children}
+    </div>
   );
 }

package/src/components/ui/badge.tsx

@@ -11,8 +11,8 @@ const badgeVariants = cva(
         default: "border-transparent bg-primary/10 text-primary",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
         destructive: "border-transparent bg-destructive/10 text-destructive",
-        success: "border-transparent bg-success/15 text-success",
-        warning: "border-transparent bg-warning/15 text-warning",
+        success: "border-transparent bg-success/15 text-success-strong",
+        warning: "border-transparent bg-warning/15 text-warning-strong",
         outline: "text-foreground",
       },
     },

package/src/components/ui/index.ts

@@ -18,11 +18,13 @@ export * from "./filter-rule";
 export * from "./filter-sheet";
 export * from "./input";
 export * from "./label";
+export * from "./password-requirements";
 export * from "./row-actions";
 export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
 export * from "./sheet";
+export * from "./simple-select";
 export * from "./sonner";
 export * from "./spinner";
 export * from "./switch";

package/src/components/ui/password-requirements.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Check, Circle } from "lucide-react";
+import type { JSX } from "react";
+
+import {
+  PASSWORD_RULES,
+  passwordScore,
+} from "#core/_utils/password";
+import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface PasswordRequirementsProps {
+  /** Valor atual do campo de senha. */
+  value: string;
+  /** Esconde a barra de força e deixa só a lista. */
+  hideStrength?: boolean;
+  className?: string;
+}
+
+/** Cor da barra por faixa de força — cheia, porque aqui é preenchimento. */
+const STRENGTH_COLOR = (score: number, total: number): string => {
+  if (score === total) {
+    return "bg-success";
+  }
+  if (score >= total - 1) {
+    return "bg-warning";
+  }
+  return "bg-destructive";
+};
+
+/**
+ * Lista viva das exigências de senha, marcando o que já foi cumprido.
+ *
+ * Substitui a mensagem única de erro ("mín. 8 caracteres com maiúscula,
+ * minúscula, número e símbolo"), que só aparecia depois de errar e obrigava a
+ * pessoa a comparar a frase inteira com o que digitou para achar o que faltava.
+ *
+ * Não valida nada: quem decide é o schema Yup da tela, com o mesmo regex. Isto
+ * é a explicação em forma de lista — por isso mora em `components/ui` e não
+ * conhece formulário nenhum.
+ */
+export function PasswordRequirements({
+  value,
+  hideStrength = false,
+  className,
+}: PasswordRequirementsProps): JSX.Element {
+  const { t } = useI18n();
+  const total = PASSWORD_RULES.length;
+  const score = passwordScore(value);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {!hideStrength && (
+        <div
+          className="h-1.5 w-full overflow-hidden rounded-full bg-track"
+          role="progressbar"
+          aria-valuenow={score}
+          aria-valuemin={0}
+          aria-valuemax={total}
+          aria-label={t("validation.rules.strength")}
+        >
+          <div
+            className={cn(
+              "h-full rounded-full transition-all duration-300",
+              STRENGTH_COLOR(score, total),
+            )}
+            style={{ width: `${(score / total) * 100}%` }}
+          />
+        </div>
+      )}
+
+      {/*
+        `list-none` com ícone próprio, e não marcador nativo: o ✓/○ é o que
+        carrega o estado. `aria-live` para quem usa leitor de tela perceber a
+        regra sendo cumprida enquanto digita.
+      */}
+      <ul className="flex flex-col gap-1" aria-live="polite">
+        {PASSWORD_RULES.map((rule) => {
+          const ok = rule.test(value);
+          return (
+            <li
+              key={rule.key}
+              className={cn(
+                "flex items-start gap-2 text-xs transition-colors",
+                ok ? "text-success-strong" : "text-muted-foreground",
+              )}
+            >
+              <span className="mt-0.5 shrink-0" aria-hidden>
+                {ok ? (
+                  <Check className="h-3.5 w-3.5" />
+                ) : (
+                  <Circle className="h-3.5 w-3.5" />
+                )}
+              </span>
+              {/* Sem truncamento: a regra tem que caber inteira, quebrando linha
+                  se precisar — cortada, ela deixa de dizer o que exige. */}
+              <span className="min-w-0 flex-1">{t(rule.key, rule.params)}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}