@proulr/sdui-components 0.1.81 → 0.1.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.81",
+  "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/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',
   },