MasterStyles: Documentos que por fin tienen el aspecto correcto

Tus documentos acaban de recibir una mejora visual. Los bloques de código se renderizan con resaltado de sintaxis, los diagramas de Mermaid son legibles para todo el mundo y las imágenes de cabecera cambian en función de tu contenido.

Qué fallaba

MasterStyles tenía una deficiencia de renderizado. Los bloques de código delimitados en HTML, JavaScript o Python se mostraban como texto plano: sin resaltado de sintaxis ni estructura visual. Los diagramas de Mermaid usaban temas de color que incumplían las normativas de accesibilidad. Los documentos parpadeaban durante la carga. Las imágenes de cabecera eran marcadores de posición estáticos sin importar el contenido.

Estos problemas se acumulaban. Un documento bien estructurado parecía amateur al renderizarse.

Qué ha cambiado

Bloques de código con resaltado de sintaxis

Los bloques de código delimitados ahora se renderizan con el resaltado de sintaxis adecuado en HTML, JavaScript y Python. La función edge convert-md-to-html se encarga de la detección de lenguajes y aplica un resaltado adaptado al tema antes de que el contenido llegue a tu navegador.

No hace falta configuración. Escribe tus bloques de código como siempre: el proceso de renderizado se encarga del resto.

Diagramas de Mermaid accesibles

Cada diagrama de Mermaid (diagramas de flujo, de secuencia, ERD, C4) se renderiza ahora con temas de color accesibles y de alto contraste. Esto se aplica tanto a los tipos de variables de Markdown como de HTML.

Los probamos frente a las ratios de contraste de las WCAG. Elementos oscuros sobre fondos claros, texto de etiquetas claro y codificación de colores distinguibles. Se acabó el tener que esforzarse para leer las etiquetas de los nodos con bajo contraste.

Imágenes de cabecera dinámicas

Las imágenes de cabecera ahora cambian según el tema de tu variable. El sistema recurre a un catálogo almacenado en mvpl_parameters, haciendo coincidir el tema de la variable con imágenes relevantes. Un documento de estrategia recibe una cabecera distinta a la de una especificación técnica.

Se acabó el parpadeo

El componente HtmlSandbox ahora aplica un debounce en las pasadas de contraste durante la carga. Anteriormente, el flujo de renderizado parpadeaba entre estados a medida que el CSS se cargaba de forma asíncrona. Ahora, el CSS se carga en paralelo mediante el hook useAllCss() con el almacenamiento en caché HTTP habilitado. El resultado: un renderizado fluido desde el primer fotograma.

Por qué es importante

Más allá de eso, los documentos son el resultado principal del trabajo asistido por IA en Masterminds. Si el resultado renderizado parece poco profesional, toda la plataforma da esa impresión, por muy bueno que sea el contenido de la IA.

Esta versión cierra esa brecha:

• Los documentos cargados de código ahora son fáciles de escanear y tienen aspecto profesional
• Los documentos cargados de diagramas funcionan para todo el mundo, incluidos los usuarios con deficiencias visuales
• Las primeras impresiones son fluidas: sin artefactos de carga ni parpadeos

Notas técnicas (para ingenieros de software)

• Flujo de renderizado: La función edge convert-md-to-html gestiona la detección y el resaltado de bloques delimitados
• Fuente de verdad del CSS: src/index.css con 3 variantes (sin ámbito, con ámbito .mm-doc-root, puntos de ruptura responsivos)
• Flujo de compilación de CSS: scripts/build-mm-html-style.mjs genera 4 archivos de salida: NUNCA edites public/mm_html_style*.css directamente
• Temas de Mermaid: Se aplican valores predeterminados accesibles tanto en el prerrenderizado de la función edge como en el renderizado del navegador
• Catálogo de imágenes de cabecera: Almacenado en mvpl_parameters mediante la migración 20260211190000_add_masterstyles_hero_images_parameter.sql
• Debounce de contraste: HtmlSandbox.tsx aplica un debounce en la pasada de contraste para evitar parpadeos durante la carga en paralelo del CSS

Qué será lo próximo

• Temas personalizados por espacio de trabajo (planificado)
• Exportación a PDF con el renderizado de MasterStyles (en fase de diseño)
• Anotaciones colaborativas en documentos renderizados (en fase de concepto)