@proulr/sdui-components 0.1.80 → 0.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

package/src/renderer/SduiScreenRenderer.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
-import type { SduiScreen } from '@proulr/sdui-contract';
+import type { SduiScreen, SduiBlock } from '@proulr/sdui-contract';
 import { colors } from './theme/proulr-theme';
 import { renderBlockTree } from './sdui-component-registry';
 import { SduiLayoutDebugFrame } from './sdui-layout-debug';
@@ -13,23 +13,40 @@ type Props = {
 /** Blocos overlay (FAB etc.) — não competem por flex com o Scroll. */
 const OVERLAY_BLOCK_TYPES = new Set(['floating_create_menu', 'inbox_hub_chrome']);
 
-export function SduiScreenRenderer({ screen, onAction }: Props) {
+type ScreenBlockProps = {
+  block: SduiBlock;
+  data: SduiScreen['data'];
+  onAction: Props['onAction'];
+};
+
+/**
+ * Bloco memoizado: re-renderiza só quando `block`/`data`/`onAction` mudam de
+ * identidade (novo wire). Re-renders do shell (header, insets, sheets) não
+ * reconstroem a árvore de todos os blocos — custo direto de INP no web.
+ */
+const SduiScreenBlock = memo(function SduiScreenBlock({ block, data, onAction }: ScreenBlockProps) {
+  const overlay = OVERLAY_BLOCK_TYPES.has(block.type);
+  return (
+    <SduiLayoutDebugFrame
+      layer="block"
+      extra={block.type}
+      style={overlay ? styles.overlayBlock : styles.block}
+      pointerEvents={overlay ? 'box-none' : undefined}
+    >
+      {renderBlockTree(block, data, onAction)}
+    </SduiLayoutDebugFrame>
+  );
+});
+
+export const SduiScreenRenderer = memo(function SduiScreenRenderer({ screen, onAction }: Props) {
   return (
     <SduiLayoutDebugFrame layer="renderer" style={styles.screen}>
       {screen.blocks.map((block) => (
-        <SduiLayoutDebugFrame
-          key={block.id}
-          layer="block"
-          extra={block.type}
-          style={OVERLAY_BLOCK_TYPES.has(block.type) ? styles.overlayBlock : styles.block}
-          pointerEvents={OVERLAY_BLOCK_TYPES.has(block.type) ? 'box-none' : undefined}
-        >
-          {renderBlockTree(block, screen.data, onAction)}
-        </SduiLayoutDebugFrame>
+        <SduiScreenBlock key={block.id} block={block} data={screen.data} onAction={onAction} />
       ))}
     </SduiLayoutDebugFrame>
   );
-}
+});
 
 const styles = StyleSheet.create({
   screen: { flex: 1, minHeight: 0, backgroundColor: colors.bg },

package/src/renderer/blocks/SduiNativeAdBlock.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { AppState, type AppStateStatus, StyleSheet, Text, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import {
   DEFAULT_NATIVE_AD_ASPECT_RATIO,
@@ -12,6 +12,13 @@ import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 type NativeAdModule = typeof import('react-native-google-mobile-ads');
 type LoadedNativeAd = Awaited<ReturnType<NativeAdModule['NativeAd']['createForAdRequest']>>;
 
+/**
+ * Ao voltar do segundo plano o `NativeMediaView` do Android costuma renderizar
+ * em branco e o ad expira (~1h). Recarrega quando falhou antes ou está mais
+ * velho que isto; abaixo do limiar são só app-switches rápidos.
+ */
+const NATIVE_AD_RESUME_RELOAD_MS = 30_000;
+
 function resolveBlockWidth(props: Record<string, unknown>): number | undefined {
   if (typeof props.width === 'number' && props.width > 0) return props.width;
   return undefined;
@@ -42,6 +49,10 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
   const [adsModule, setAdsModule] = useState<NativeAdModule | null>(null);
   const [nativeAd, setNativeAd] = useState<LoadedNativeAd | null>(null);
   const [failed, setFailed] = useState(false);
+  const [reloadToken, setReloadToken] = useState(0);
+
+  const loadedAtRef = useRef(0);
+  const failedRef = useRef(false);
 
   useEffect(() => {
     if (!catalog?.isEnabled()) return;
@@ -66,16 +77,22 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
           return;
         }
 
+        loadedAtRef.current = Date.now();
+        failedRef.current = false;
+        setFailed(false);
         setNativeAd(ad);
       } catch {
-        if (!cancelled) setFailed(true);
+        if (!cancelled) {
+          failedRef.current = true;
+          setFailed(true);
+        }
       }
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [catalog, placement]);
+  }, [catalog, placement, reloadToken]);
 
   useEffect(() => {
     if (!nativeAd) return;
@@ -84,6 +101,35 @@ export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
     };
   }, [nativeAd]);
 
+  useEffect(() => {
+    if (!catalog?.isEnabled()) return;
+
+    let backgroundSince: number | null = null;
+
+    const subscription = AppState.addEventListener('change', (state: AppStateStatus) => {
+      if (state === 'active') {
+        if (backgroundSince === null) return;
+        const backgroundMs = Date.now() - backgroundSince;
+        backgroundSince = null;
+        if (backgroundMs < 3_000) return;
+        const stale =
+          loadedAtRef.current === 0 ||
+          Date.now() - loadedAtRef.current > NATIVE_AD_RESUME_RELOAD_MS;
+        if (failedRef.current || stale) {
+          setReloadToken((token) => token + 1);
+        }
+        return;
+      }
+      if (backgroundSince === null) {
+        backgroundSince = Date.now();
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [catalog]);
+
   if (!catalog?.isEnabled()) {
     return null;
   }

package/src/renderer/ui/ChromeGlass.tsx

@@ -91,12 +91,24 @@ type ChromeGlassLayerProps = {
 /**
  * Camada de frost única do sistema (igual AppSideDrawer topo/base).
  * BlurView + `colors.chromeGlassOverlay` — sem cast cinza.
+ *
+ * Web: BlurView vira `backdrop-filter` em camada fixa sobre conteúdo que rola —
+ * repaint contínuo no scroll (custo direto de INP). Fallback: pílula OLED opaca
+ * (`colors.chromePillBackground`), mesmo visual do chrome sem glass.
  */
 export function ChromeGlassLayer({
   style,
   pointerEvents = 'none',
 }: ChromeGlassLayerProps) {
   const androidBlurProps = useAndroidBlurProps();
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        style={[absoluteFill, styles.webGlassFallback, style]}
+        pointerEvents={pointerEvents}
+      />
+    );
+  }
   return (
     <View style={[absoluteFill, style]} pointerEvents={pointerEvents}>
       <BlurView
@@ -132,6 +144,9 @@ const styles = StyleSheet.create({
   tint: {
     backgroundColor: colors.chromeGlassOverlay,
   },
+  webGlassFallback: {
+    backgroundColor: colors.chromePillBackground,
+  },
   shellTransparent: {
     backgroundColor: 'transparent',
   },