@proulr/sdui-components 0.1.81 → 0.1.85

package/package.json

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

package/src/bdc/compile-bdc-to-wire.test.ts

@@ -177,5 +177,27 @@ describe('compileBdcToWire', () => {
     expect(block).toEqual({ id: '0', type: 'text', props: { text: 'x' } });
     expect(viaIndex(screen({ id: 'i' }, [])).screen_id).toBe('i');
   });
+
+  it('flattens _fragment children instead of dropping them', () => {
+    const wire = compileBdcToWire(
+      screen({ id: 'demo.fragment' }, [
+        {
+          type: 'column',
+          props: {},
+          children: [
+            {
+              type: '_fragment',
+              props: {},
+              children: [
+                { type: 'text', props: { text: 'a' }, children: [] },
+                { type: 'text', props: { text: 'b' }, children: [] },
+              ],
+            },
+          ],
+        },
+      ]),
+    );
+    expect(wire.blocks[0]?.children?.map((c) => c.props?.text)).toEqual(['a', 'b']);
+  });
 });
 

package/src/bdc/compile-bdc-to-wire.ts

@@ -61,6 +61,19 @@ export function compileBdcBlock(element: BdcElement, path = '0'): SduiBlockWire
   return mapBlock(element, path);
 }
 
+function flattenBlockChildren(children: BdcElement[]): BdcElement[] {
+  const out: BdcElement[] = [];
+  for (const child of children) {
+    if (child.type === '_text_node') continue;
+    if (child.type === '_fragment') {
+      out.push(...flattenBlockChildren(child.children));
+      continue;
+    }
+    out.push(child);
+  }
+  return out;
+}
+
 function mapBlock(element: BdcElement, path: string): SduiBlockWire {
   if (element.type === '_text_node') {
     return { id: path, type: 'text', props: { text: String(element.props.value ?? '') } };
@@ -76,9 +89,7 @@ function mapBlock(element: BdcElement, path: string): SduiBlockWire {
     props.text = textFromChildren(element.children);
   }
 
-  const blockChildren = element.children.filter(
-    (child) => child.type !== '_text_node' && child.type !== '_fragment',
-  );
+  const blockChildren = flattenBlockChildren(element.children);
 
   return {
     id: typeof element.props.id === 'string' ? element.props.id : path,
@@ -114,9 +125,9 @@ export function compileBdcToWire(root: BdcElement): SduiScreenWire {
 
   void rest;
 
-  const blocks = root.children
-    .filter((child) => child.type !== '_fragment')
-    .map((child, index) => mapBlock(child, String(index)));
+  const blocks = flattenBlockChildren(root.children).map((child, index) =>
+    mapBlock(child, String(index)),
+  );
 
   const compiledHeader = header ? mapHeaderToWire(header as Record<string, unknown>) : undefined;
   if (compiledHeader && headerSlot) {

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/theme/resolve-style-props.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { resolveTextStyleProps, resolveViewStyleProps } from './resolve-style-props';
+import { m3Colors, m3Shape, spacing } from './proulr-theme';
+
+vi.mock('react-native', () => ({
+  Platform: {
+    OS: 'web',
+    select: (spec: Record<string, unknown>) => spec.default ?? spec.web ?? spec.ios ?? {},
+  },
+}));
+
+describe('resolveViewStyleProps', () => {
+  it('resolves snake_case StyleWire tokens', () => {
+    const style = resolveViewStyleProps({
+      background_color: 'surfaceContainerHigh',
+      padding_horizontal: 'lg',
+      padding_vertical: 'md',
+      margin_top: 'sm',
+      gap: 'md',
+      border_radius: 'cornerExtraLarge',
+      border_width: 1,
+      border_color: 'outlineVariant',
+      align_items: 'center',
+      flex: 1,
+    }) as Record<string, unknown>;
+
+    expect(style.backgroundColor).toBe(m3Colors.surfaceContainerHigh);
+    expect(style.paddingHorizontal).toBe(spacing.lg);
+    expect(style.paddingVertical).toBe(spacing.md);
+    expect(style.marginTop).toBe(spacing.sm);
+    expect(style.gap).toBe(spacing.md);
+    expect(style.borderRadius).toBe(m3Shape.cornerExtraLarge);
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBe(m3Colors.outlineVariant);
+    expect(style.alignItems).toBe('center');
+    expect(style.flex).toBe(1);
+  });
+
+  it('accepts camelCase aliases without dropping values', () => {
+    const style = resolveViewStyleProps({
+      backgroundColor: 'primaryContainer',
+      paddingHorizontal: 'sm',
+      alignItems: 'flex-end',
+    } as Record<string, unknown>) as Record<string, unknown>;
+
+    expect(style.backgroundColor).toBe(m3Colors.primaryContainer);
+    expect(style.paddingHorizontal).toBe(spacing.sm);
+    expect(style.alignItems).toBe('flex-end');
+  });
+});
+
+describe('resolveTextStyleProps', () => {
+  it('resolves color and text_align from snake_case wire', () => {
+    const style = resolveTextStyleProps(
+      { color: 'primary', text_align: 'center', typography: 'titleSmall' },
+      'body',
+    ) as Record<string, unknown>;
+
+    expect(style.color).toBe(m3Colors.primary);
+    expect(style.textAlign).toBe('center');
+  });
+});

package/src/renderer/theme/resolve-style-props.ts

@@ -24,18 +24,23 @@ function resolveTypography(token: TypeToken | undefined): TextStyle | undefined
   return m3Type[token];
 }
 
-function snakeToCamel(key: string): string {
-  return key.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase());
+function camelToSnake(key: string): string {
+  return key.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`);
 }
 
+/**
+ * Canonical StyleWire is snake_case. Accept camelCase inputs from older wires
+ * without dropping underscore keys (previous normalize converted to camel and
+ * broke every `*_` token read).
+ */
 function normalizeStyleWire(style: StyleWire | Record<string, unknown> | undefined): StyleWire {
   if (!style) return {};
-  const normalized: StyleWire = {};
+  const normalized: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(style)) {
-    const camelKey = snakeToCamel(key) as keyof StyleWire;
-    (normalized as Record<string, unknown>)[camelKey] = value;
+    const snakeKey = key.includes('_') ? key : camelToSnake(key);
+    normalized[snakeKey] = value;
   }
-  return normalized;
+  return normalized as StyleWire;
 }
 
 export function resolveViewStyleProps(

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',
   },