diff --git a/docs/componentes-de-interfaz.md b/docs/componentes-de-interfaz.md
index de6b36c..9ed3355 100644
--- a/docs/componentes-de-interfaz.md
+++ b/docs/componentes-de-interfaz.md
@@ -332,3 +332,9 @@ Los módulos conectan este componente mediante `DeleteRecordDialog`, separado de
## IconPicker
`@repo/rdx-ui/components/icon-picker` presenta opciones visuales mediante botones con nombre accesible, tooltip nativo y `aria-pressed`. Recibe opciones (valor, etiqueta traducida e icono), valor actual, callback y estado deshabilitado. No conoce entidades ni endpoints. El catálogo de plantillas de activos aporta los iconos Lucide y valida sus claves; el componente admite teclado y distribución responsive.
+
+## Consulta compacta de plantillas
+
+Las fichas de plantillas de activos y recursos usan `FieldSections layout="rows"` y `TemplateFieldSummary`. Secciones plegables abiertas inicialmente, con títulos en mayúsculas de tamaño pequeño y color `muted-foreground`, sin tarjetas ni rellenos anidados. El indicador ocupa una anchura fija y los campos se alinean con el inicio del texto del título; filas compactas con nombre, tipo/unidad y obligatoriedad. Los campos desactivados conservan su aviso y los campos sin sección siguen visibles. En pantallas amplias se muestran dos columnas de secciones; en anchos menores, una. Cada fila adapta sus metadatos al ancho real de su sección.
+
+La ayuda de consulta usa `ContextHelp variant="plain"`: separación superior discreta, sin caja exterior ni fondo en el desplegable. Los formularios mantienen la presentación existente por defecto. `FormDialog.title` admite contenido React para colocar un icono decorativo junto al título sin una segunda cabecera repetida.
diff --git a/modules/assets/src/web/catalog/detail/ui/catalog-definition-dialog.tsx b/modules/assets/src/web/catalog/detail/ui/catalog-definition-dialog.tsx
index af34462..64002ab 100644
--- a/modules/assets/src/web/catalog/detail/ui/catalog-definition-dialog.tsx
+++ b/modules/assets/src/web/catalog/detail/ui/catalog-definition-dialog.tsx
@@ -1,5 +1,6 @@
import { FieldSections } from "@repo/rdx-ui/components/field-sections";
import { FormDialog } from "@repo/rdx-ui/components/form-dialog";
+import { TemplateFieldSummary } from "@repo/rdx-ui/components/template-field-summary";
import { useTranslation } from "react-i18next";
import type { CatalogItemDTO } from "../../../../common";
@@ -31,16 +32,21 @@ export function CatalogDefinitionDialog({
}
}}
open
- title={t("viewDefinition", { name: values.name })}
+ title={
+
+ {values.kind === "template" && (
+
+ )}
+ {t("viewDefinition", { name: values.name })}
+
+ }
wide={values.kind === "template"}
>
- {values.kind === "template" && values.icon && (
-
-
- {t(`templateIcon.options.${values.icon}`)}
-
- )}
+ {item.builtin &&
{t("protected")}
}
{values.description && (
{values.description}
)}
@@ -71,36 +77,29 @@ export function CatalogDefinitionDialog({
) : (
{
const field = items.find((entry) => entry.id === binding.fieldId);
return (
-
-
-
{field?.values.name}
- {field?.values.kind === "field" && (
-
- {t(field.values.type)}
- {field.values.unit ? ` · ${field.values.unit}` : ""}
-
- )}
- {field && !field.effectiveActive && (
-
{t("disabledField")}
- )}
-
-
{t(binding.required ? "required" : "optional")}
-
+ metadata={
+ field?.values.kind === "field"
+ ? [t(field.values.type), field.values.unit].filter(Boolean).join(" · ")
+ : ""
+ }
+ name={field?.values.name ?? binding.fieldId}
+ notice={field && !field.effectiveActive ? t("disabledField") : undefined}
+ requirement={t(binding.required ? "required" : "optional")}
+ />
);
}}
sections={values.sections}
ungroupedLabel={t("sections.ungrouped")}
/>
)}
- {item.builtin && {t("protected")}
}
-
+
);
diff --git a/modules/assets/src/web/catalog/shared/ui/catalog-help.tsx b/modules/assets/src/web/catalog/shared/ui/catalog-help.tsx
index 863dace..2520ccd 100644
--- a/modules/assets/src/web/catalog/shared/ui/catalog-help.tsx
+++ b/modules/assets/src/web/catalog/shared/ui/catalog-help.tsx
@@ -4,9 +4,11 @@ import { useTranslation } from "react-i18next";
export function CatalogHelp({
kind,
scope,
+ variant = "card",
}: {
kind: "field" | "template" | "relation";
scope: string;
+ variant?: "card" | "plain";
}) {
const { t } = useTranslation("assets");
@@ -18,6 +20,7 @@ export function CatalogHelp({
guidance={t(`${kind}Guidance`)}
scopeNote={t(scope === "global" ? "globalHelp" : "companyHelp")}
title={t("helpTitle")}
+ variant={variant}
/>
);
}
diff --git a/modules/resources/src/web/catalog/detail/ui/catalog-definition-dialog.tsx b/modules/resources/src/web/catalog/detail/ui/catalog-definition-dialog.tsx
index d64ff0f..b1d6b3c 100644
--- a/modules/resources/src/web/catalog/detail/ui/catalog-definition-dialog.tsx
+++ b/modules/resources/src/web/catalog/detail/ui/catalog-definition-dialog.tsx
@@ -1,5 +1,6 @@
import { FieldSections } from "@repo/rdx-ui/components/field-sections";
import { FormDialog } from "@repo/rdx-ui/components/form-dialog";
+import { TemplateFieldSummary } from "@repo/rdx-ui/components/template-field-summary";
import { useTranslation } from "react-i18next";
import type { CatalogItemDTO } from "../../../../common";
@@ -34,6 +35,7 @@ export function CatalogDefinitionDialog({
wide={values.kind === "template"}
>
+ {item.builtin &&
{t("protected")}
}
{values.description && (
{values.description}
)}
@@ -59,36 +61,29 @@ export function CatalogDefinitionDialog({
) : (
{
const field = items.find((entry) => entry.id === binding.fieldId);
return (
-
-
-
{field?.values.name}
- {field?.values.kind === "field" && (
-
- {t(field.values.type)}
- {field.values.unit ? ` · ${field.values.unit}` : ""}
-
- )}
- {field && !field.effectiveActive && (
-
{t("disabledField")}
- )}
-
-
{t(binding.required ? "required" : "optional")}
-
+ metadata={
+ field?.values.kind === "field"
+ ? [t(field.values.type), field.values.unit].filter(Boolean).join(" · ")
+ : ""
+ }
+ name={field?.values.name ?? binding.fieldId}
+ notice={field && !field.effectiveActive ? t("disabledField") : undefined}
+ requirement={t(binding.required ? "required" : "optional")}
+ />
);
}}
sections={values.sections}
ungroupedLabel={t("sections.ungrouped")}
/>
)}
- {item.builtin && {t("protected")}
}
-
+
);
diff --git a/modules/resources/src/web/catalog/shared/ui/catalog-help.tsx b/modules/resources/src/web/catalog/shared/ui/catalog-help.tsx
index 8566ea0..36288f4 100644
--- a/modules/resources/src/web/catalog/shared/ui/catalog-help.tsx
+++ b/modules/resources/src/web/catalog/shared/ui/catalog-help.tsx
@@ -1,7 +1,15 @@
import { ContextHelp } from "@repo/rdx-ui/components/context-help";
import { useTranslation } from "react-i18next";
-export function CatalogHelp({ kind, scope }: { kind: "field" | "template"; scope: string }) {
+export function CatalogHelp({
+ kind,
+ scope,
+ variant = "card",
+}: {
+ kind: "field" | "template";
+ scope: string;
+ variant?: "card" | "plain";
+}) {
const { t } = useTranslation("resources");
return (
@@ -12,6 +20,7 @@ export function CatalogHelp({ kind, scope }: { kind: "field" | "template"; scope
guidance={t(`${kind}Guidance`)}
scopeNote={t(scope === "global" ? "globalHelp" : "companyHelp")}
title={t("helpTitle")}
+ variant={variant}
/>
);
}
diff --git a/packages/rdx-ui/src/components/context-help.tsx b/packages/rdx-ui/src/components/context-help.tsx
index d073e92..d04e2d0 100644
--- a/packages/rdx-ui/src/components/context-help.tsx
+++ b/packages/rdx-ui/src/components/context-help.tsx
@@ -9,6 +9,7 @@ export function ContextHelp({
examplesLabel,
scopeNote,
icon = ,
+ variant = "card",
}: {
title: string;
description: string;
@@ -17,16 +18,25 @@ export function ContextHelp({
examplesLabel: string;
scopeNote?: string | undefined;
icon?: ReactNode;
+ variant?: "card" | "plain";
}) {
return (