@crtobiasdelsud/portal-ui 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crtobiasdelsud/portal-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Componentes compartidos entre el portal (Next) y el CMS (Vite) — widgets, views, providers para adapters y article pool.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/EditorOutput/EditorOutput.jsx

@@ -57,7 +57,9 @@ function loadTwitterWidgets() {
 
 function EmbedIframe({ src, service, style }) {
   const safeSrc = sanitizeResourceUrl(src)
-  const ref = useRef(null)
+  const wrapRef = useRef(null)      // placeholder observado por IO
+  const contentRef = useRef(null)   // contenedor real del tweet/iframe (post-inView)
+  const [inView, setInView] = useState(false)
   const [autoHeight, setAutoHeight] = useState(null)
   const [twitterDone, setTwitterDone] = useState(false)
   if (!safeSrc) return null
@@ -68,10 +70,32 @@ function EmbedIframe({ src, service, style }) {
   // solo → altura exacta, sin blanco ni scroll.
   const tweetId = service === 'twitter' ? (String(src).match(/[?&]id=(\d+)/)?.[1] || null) : null
 
+  // Lazy load: difiere TODO (iframe src, widgets.js de Twitter, listener de
+  // Instagram MEASURE) hasta que el embed esté cerca del viewport. Sin esto,
+  // tweets / instagram / youtube debajo del fold cargan junto con la nota y
+  // pegan al LCP. El rootMargin de 400px precarga antes que el usuario llegue.
   useEffect(() => {
-    if (!tweetId) return
+    if (inView) return
+    if (typeof IntersectionObserver === 'undefined') { setInView(true); return }
+    const el = wrapRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some(e => e.isIntersecting)) {
+          setInView(true)
+          io.disconnect()
+        }
+      },
+      { rootMargin: '400px 0px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [inView])
+
+  useEffect(() => {
+    if (!inView || !tweetId) return
     let cancelled = false
-    const el = ref.current
+    const el = contentRef.current
     if (!el) return
     loadTwitterWidgets().then((twttr) => {
       if (cancelled || !twttr?.widgets || !el) return
@@ -81,16 +105,16 @@ function EmbedIframe({ src, service, style }) {
         .then(() => { if (!cancelled) setTwitterDone(true) })
     })
     return () => { cancelled = true }
-  }, [tweetId])
+  }, [inView, tweetId])
 
   useEffect(() => {
     // Servicios que se sabe que postean MEASURE: Instagram. (Twitter se maneja
     // arriba con widgets.js. TikTok no postea altura.)
-    if (service !== 'instagram') return
+    if (!inView || service !== 'instagram') return
 
     function handleMessage(event) {
       if (typeof event.origin !== 'string' || !event.origin.includes('instagram.com')) return
-      if (event.source !== ref.current?.contentWindow) return
+      if (event.source !== contentRef.current?.contentWindow) return
 
       let data = event.data
       if (typeof data === 'string') {
@@ -102,18 +126,24 @@ function EmbedIframe({ src, service, style }) {
 
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [service])
+  }, [inView, service])
+
+  // Placeholder antes de inView: ocupa el lugar (height del callsite) pero no
+  // dispara ningún fetch. Reserva el espacio → no genera CLS al "hidratar".
+  if (!inView) {
+    return <div ref={wrapRef} style={style} aria-hidden="true" />
+  }
 
   // Twitter via widget: contenedor que crece con el tweet. `minHeight` es solo
   // placeholder anti-CLS hasta que widgets.js mida; después el widget fija su
   // propia altura exacta. Si no hubo tweetId (URL rara), cae al iframe normal.
   if (tweetId) {
     const { height, ...rest } = style || {}
-    return <div ref={ref} style={{ ...rest, minHeight: twitterDone ? undefined : height }} />
+    return <div ref={contentRef} style={{ ...rest, minHeight: twitterDone ? undefined : height }} />
   }
 
   const finalStyle = autoHeight != null ? { ...style, height: autoHeight } : style
-  return <iframe ref={ref} src={safeSrc} style={finalStyle} allowFullScreen />
+  return <iframe ref={contentRef} src={safeSrc} style={finalStyle} allowFullScreen />
 }
 
 // Fixed class names for AMP (no CSS Modules hashing)

package/src/components/EditorOutputFull/EditorOutputFull.jsx

@@ -38,16 +38,39 @@ function resolveEmbedSrc({ service, embed, source }) {
 
 function EmbedIframe({ src, service, style }) {
   const safeSrc = sanitizeResourceUrl(src)
-  const ref = useRef(null)
+  const wrapRef = useRef(null)      // placeholder observado por IO
+  const contentRef = useRef(null)   // iframe real (post-inView)
+  const [inView, setInView] = useState(false)
   const [autoHeight, setAutoHeight] = useState(null)
   if (!safeSrc) return null
 
+  // Lazy load: difiere el iframe src y el listener de Instagram hasta que el
+  // embed esté cerca del viewport (400px de margen para precargar). Sin esto
+  // los embeds abajo del fold cargan junto con la nota y suben el LCP.
   useEffect(() => {
-    if (service !== 'instagram') return
+    if (inView) return
+    if (typeof IntersectionObserver === 'undefined') { setInView(true); return }
+    const el = wrapRef.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some(e => e.isIntersecting)) {
+          setInView(true)
+          io.disconnect()
+        }
+      },
+      { rootMargin: '400px 0px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [inView])
+
+  useEffect(() => {
+    if (!inView || service !== 'instagram') return
 
     function handleMessage(event) {
       if (typeof event.origin !== 'string' || !event.origin.includes('instagram.com')) return
-      if (event.source !== ref.current?.contentWindow) return
+      if (event.source !== contentRef.current?.contentWindow) return
 
       let data = event.data
       if (typeof data === 'string') {
@@ -59,10 +82,15 @@ function EmbedIframe({ src, service, style }) {
 
     window.addEventListener('message', handleMessage)
     return () => window.removeEventListener('message', handleMessage)
-  }, [service])
+  }, [inView, service])
+
+  // Placeholder antes de inView: ocupa el lugar pero no dispara fetch del iframe.
+  if (!inView) {
+    return <div ref={wrapRef} style={style} aria-hidden="true" />
+  }
 
   const finalStyle = autoHeight != null ? { ...style, height: autoHeight } : style
-  return <iframe ref={ref} src={safeSrc} style={finalStyle} allowFullScreen />
+  return <iframe ref={contentRef} src={safeSrc} style={finalStyle} allowFullScreen />
 }
 
 // Fixed class names for AMP (no CSS Modules hashing)

package/src/components/Hero/variants/V2/V2.module.scss

@@ -69,6 +69,11 @@
 // inline (color + peso) DENTRO de la misma caja, así no se ve corte entre
 // las dos partes del texto.
 .headline {
+  // INLINE a propósito: box-decoration-break: clone solo parte el fondo por
+  // renglón en cajas inline. En un h2 block-level el background es UN rectángulo
+  // macizo que cubre todas las líneas (el "bloque horrible"). Inline + clone hace
+  // que cada renglón sea su propia caja blanca ajustada al texto (efecto resaltador).
+  display: inline;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
   background: #fff;
@@ -77,7 +82,11 @@
   color: var(--text-color, #252523);
   font-size: 20px;
   font-weight: 800;
-  line-height: 1.55;
+  // Cada renglón es una caja blanca clonada (box-decoration-break). El hueco
+  // entre renglones es line-height − altura_de_fuente − 2·padding(3px). Con 1.55
+  // ese hueco caía a ~2px y las cajas se tocaban según el título; 1.9 garantiza
+  // ~9px parejo. Tablet/desktop ya tienen aire suficiente con 1.7.
+  line-height: 1.9;
 
   @include respond(tablet) {
     font-size: 30px;
@@ -127,15 +136,21 @@
 // ── Hero importante ──────────────────────────────────────────────────────
 .important {
   .mediaBox {
+    // aspect 16/9 (NO 16/7): con object-fit cover, una caja más ancha que la
+    // imagen (16:9) recorta arriba/abajo y corta la cabeza del sujeto. 16/9 iguala
+    // el ratio típico de la foto → no recorta en vertical y la imagen "ocupa más".
     @include respond(tablet) {
-      aspect-ratio: 16 / 7;
+      aspect-ratio: 16 / 9;
     }
-    // Desktop: V1 cap la imagen importante a 500px (sin esto el hero ocupa
-    // ~774px y rompe el ratio respecto a V1). Replicamos acá para que V2 y
-    // V1 tengan la misma altura en portada de escritorio.
+    // Desktop: el hero importante va a todo el ancho (banner), sin un hermano
+    // flex que defina el alto de la fila → el `height: 100%` heredado del base
+    // colapsa a 0 y la imagen (AspectImage en modo `fill`, absolute) desaparece.
+    // Le damos alto propio derivado del ancho con aspect-ratio 16/9; el tope alto
+    // (760px) sólo recorta en pantallas muy anchas para no desbordar la pantalla.
     @include respond(desktop) {
-      aspect-ratio: unset;
-      max-height: 500px;
+      height: auto;
+      aspect-ratio: 16 / 9;
+      max-height: 760px;
     }
   }
 

package/src/components/Hero/variants/V3/V3.module.scss

@@ -82,19 +82,12 @@
 // uppercase. El tamaño chico la hace funcionar como "etiqueta de sección".
 .volanta {
   color: var(--primary-color, #4bac48);
-  font-size: 14px;
+  // Mismo tamaño que el título (como en V2): antes tenía font-size propio chico
+  // (14/18/20) y quedaba diminuta al lado del headline de 32px. Hereda del h2.
+  font-size: inherit;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  white-space: nowrap;
-
-  @include respond(tablet) {
-    font-size: 18px;
-  }
-
-  @include respond(desktop) {
-    font-size: 20px;
-  }
 }
 
 .headline {
@@ -147,15 +140,21 @@
 // ── Hero importante ──────────────────────────────────────────────────────
 .important {
   .mediaBox {
+    // aspect 16/9 (NO 16/7): con object-fit cover, una caja más ancha que la
+    // imagen (16:9) recorta arriba/abajo y corta la cabeza del sujeto. 16/9 iguala
+    // el ratio típico de la foto → no recorta en vertical y la imagen "ocupa más".
     @include respond(tablet) {
-      aspect-ratio: 16 / 7;
+      aspect-ratio: 16 / 9;
     }
-    // Desktop: V1 cap la imagen importante a 500px (sin esto el hero ocupa
-    // ~774px y rompe el ratio respecto a V1). Replicamos acá para que V3 y
-    // V1 tengan la misma altura en portada de escritorio.
+    // Desktop: el hero importante va a todo el ancho (banner), sin un hermano
+    // flex que defina el alto de la fila → el `height: 100%` heredado del base
+    // colapsa a 0 y la imagen (AspectImage en modo `fill`, absolute) desaparece.
+    // Le damos alto propio derivado del ancho con aspect-ratio 16/9; el tope alto
+    // (760px) sólo recorta en pantallas muy anchas para no desbordar la pantalla.
     @include respond(desktop) {
-      aspect-ratio: unset;
-      max-height: 500px;
+      height: auto;
+      aspect-ratio: 16 / 9;
+      max-height: 760px;
     }
   }
 

package/src/utils/volanta.js

@@ -1,12 +1,21 @@
-// Helper compartido por cabezales, hero, bajada, etc. La volanta se renderiza
-// inline con el título separada por ". " (en cabezales el espacio lo da el
-// `margin-right` del CSS; en bajada/leeAdemas/loQueSeLee es un literal en JSX).
-// Si quien edita la nota ya cerró la volanta con un signo (".", "!", "?", "…"),
-// no agregamos otro punto — devolvemos el texto tal cual.
+// Helper compartido por cabezales, hero, bajada, etc. Normaliza la volanta
+// para que el render con el título siempre sea: «volanta + punto + espacio + titulo».
+// El espacio entre volanta y titulo lo provee el callsite (literal " " en JSX,
+// o `margin-right` en CSS).
+//
+// Normalización:
+// 1. Quita whitespace trailing ("postgres "        → "postgres").
+// 2. Colapsa whitespace entre la palabra y un signo final ("postgres ."  → "postgres.").
+// 3. Si no termina en signo de cierre (.!?…), agrega ".".
+//
+// Resultado: "Política." / "Política." (sin doble) / "EXCLUSIVO!" / "" .
 
-const SENTENCE_END = /[.!?…]\s*$/
+const SENTENCE_END = /[.!?…]$/
 
 export function volantaWithStop(volanta) {
   if (!volanta) return ''
-  return SENTENCE_END.test(volanta) ? volanta : `${volanta}.`
+  // Colapsa "palabra <space> . <space>" → "palabra.", y limpia trailing.
+  const clean = volanta.replace(/\s+([.!?…])\s*$/, '$1').trimEnd()
+  if (!clean) return ''
+  return SENTENCE_END.test(clean) ? clean : `${clean}.`
 }