@proulr/sdui-components 0.1.88 → 0.1.91

package/src/renderer/blocks/SduiMediaBlocks.tsx

@@ -0,0 +1,348 @@
+import React, { useState } from 'react';
+import { Image, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  computeSduiMediaFrame,
+  deriveSduiInitials,
+  parseSduiAvatarProps,
+  parseSduiContentImageProps,
+  parseSduiIconButtonProps,
+  parseSduiRowOverflowMenuProps,
+  parseSduiVideoProps,
+} from '../lib/sdui-media-block-props';
+import { useSduiMediaResolver, useSduiMediaUri } from '../sdui-media-resolver-context';
+import { useSduiVideoPlayer } from '../sdui-video-player-context';
+import { AppIcon } from '../ui/app-icon';
+import { APP_ICON_SIZE } from '../ui/app-icon-size-catalog';
+import { colors, fonts, m3Colors, m3Elevation, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { resolveViewStyleProps } from '../theme/resolve-style-props';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+/**
+ * Blocos genéricos de mídia/estado para row templates e telas BFF-authored:
+ * `content_image`, `video`, `avatar`, `icon_button`, `row_overflow_menu`.
+ * Layout 100% no wire; path de mídia
+ * 100% em dados (`{{item.*}}`); resolução path → URL é capability do app via
+ * `SduiMediaResolver`. Zero hex aqui — só tokens do tema.
+ */
+
+function cornerPx(token: keyof typeof m3Shape | undefined): number | undefined {
+  return token ? m3Shape[token] : undefined;
+}
+
+function m3Color(token: string | undefined, fallback: string): string {
+  const value = token ? m3Colors[token as keyof typeof m3Colors] : undefined;
+  return value ?? fallback;
+}
+
+export function SduiContentImageBlock({ block }: SduiBlockRenderProps) {
+  const parsed = parseSduiContentImageProps(block.props);
+  const resolver = useSduiMediaResolver();
+  const { uri, settled } = useSduiMediaUri(parsed.path);
+
+  // Capability ausente ou path vazio (binding não resolvido) → renderizar nada.
+  // Nunca cair em path/URL de produto hardcoded.
+  if (!resolver || !parsed.path) return null;
+  if (settled && !uri) return null;
+
+  const frame = computeSduiMediaFrame(parsed.width, parsed.height, parsed.aspectRatio);
+  const containerStyle = [
+    styles.mediaShell,
+    {
+      width: frame.width,
+      height: frame.height,
+      aspectRatio: frame.aspectRatio,
+      ...(frame.stretch ? { alignSelf: 'stretch' as const } : null),
+      borderRadius: cornerPx(parsed.corner ?? 'cornerMedium'),
+    },
+    resolveViewStyleProps(block.props.style as Record<string, unknown>),
+  ];
+
+  if (!uri) {
+    // Placeholder de tamanho estável (mesmo frame do futuro image) — anti-flicker.
+    return <View style={containerStyle} testID={parsed.testId} />;
+  }
+
+  const fillBehind = parsed.blurFill && parsed.fit === 'contain';
+  return (
+    <View style={containerStyle} testID={parsed.testId}>
+      {fillBehind ? (
+        <>
+          <Image source={{ uri }} resizeMode="cover" style={StyleSheet.absoluteFill} />
+          <View style={[StyleSheet.absoluteFill, styles.blurVeil]} pointerEvents="none" />
+        </>
+      ) : null}
+      <Image
+        source={{ uri }}
+        resizeMode={parsed.fit === 'contain' ? 'contain' : 'cover'}
+        style={StyleSheet.absoluteFill}
+      />
+    </View>
+  );
+}
+
+export function SduiVideoBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const parsed = parseSduiVideoProps(block.props);
+  const resolver = useSduiMediaResolver();
+  const player = useSduiVideoPlayer();
+  const { uri, pending, settled } = useSduiMediaUri(parsed.path);
+  const { uri: posterUri } = useSduiMediaUri(parsed.posterPath ?? '');
+
+  // Capability ausente ou path vazio (binding não resolvido) → renderizar nada.
+  if (!resolver || !parsed.path) return null;
+
+  // Slot do app (expo-video etc.): a lib só entrega URI resolvida + frame do wire.
+  if (player) {
+    return <>{player({ block, data, onAction, parsed, uri, pending, settled, posterUri })}</>;
+  }
+
+  // Default sem player: FRAME com poster/still (ou placeholder estável com
+  // glyph `play`). Anti-flicker: mesmo frame do wire em todos os estados.
+  const frame = computeSduiMediaFrame(parsed.width, parsed.height, parsed.aspectRatio);
+  const containerStyle = [
+    styles.mediaShell,
+    {
+      width: frame.width,
+      height: frame.height,
+      aspectRatio: frame.aspectRatio,
+      ...(frame.stretch ? { alignSelf: 'stretch' as const } : null),
+      borderRadius: cornerPx(parsed.corner ?? 'cornerMedium'),
+    },
+    resolveViewStyleProps(block.props.style as Record<string, unknown>),
+  ];
+
+  if (settled && !uri && !posterUri) return null;
+
+  return (
+    <View style={containerStyle} testID={parsed.testId}>
+      {posterUri ? (
+        <Image
+          source={{ uri: posterUri }}
+          resizeMode={parsed.fit === 'contain' ? 'contain' : 'cover'}
+          style={StyleSheet.absoluteFill}
+        />
+      ) : null}
+      <View style={[StyleSheet.absoluteFill, styles.videoStillCenter]} pointerEvents="none">
+        <AppIcon name="play" size={APP_ICON_SIZE.fab} color={m3Colors.onSurface} />
+      </View>
+    </View>
+  );
+}
+
+export function SduiRowOverflowMenuBlock({ block, onAction }: SduiBlockRenderProps) {
+  const parsed = parseSduiRowOverflowMenuProps(block.props);
+  const [open, setOpen] = useState(false);
+
+  // Sem entradas válidas → o trigger não abriria nada; não renderiza.
+  if (parsed.actions.length === 0) return null;
+
+  const pressAction = (actionId: string) => {
+    setOpen(false);
+    onAction(actionId);
+  };
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setOpen(true)}
+        accessibilityRole="button"
+        testID={parsed.testId}
+        style={({ pressed }) => [
+          styles.iconButton,
+          pressed && styles.iconButtonPressed,
+          resolveViewStyleProps(block.props.style as Record<string, unknown>),
+        ]}
+      >
+        <AppIcon
+          name={parsed.triggerIcon}
+          size={APP_ICON_SIZE.feedAction}
+          color={m3Colors.onSurfaceVariant}
+        />
+      </Pressable>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <View style={styles.overflowOverlay}>
+          <Pressable style={StyleSheet.absoluteFill} onPress={() => setOpen(false)} />
+          <View style={styles.overflowMenu}>
+            {parsed.actions.map((action) => (
+              <Pressable
+                key={action.actionId}
+                onPress={() => pressAction(action.actionId)}
+                accessibilityRole="button"
+                accessibilityLabel={action.label}
+                style={({ pressed }) => [
+                  styles.overflowMenuItem,
+                  pressed && styles.overflowMenuItemPressed,
+                ]}
+              >
+                {action.icon ? (
+                  <AppIcon
+                    name={action.icon}
+                    size={APP_ICON_SIZE.feedAction}
+                    color={action.destructive ? m3Colors.error : m3Colors.onSurfaceVariant}
+                  />
+                ) : null}
+                <Text
+                  style={[
+                    styles.overflowMenuLabel,
+                    action.destructive && { color: m3Colors.error },
+                  ]}
+                >
+                  {action.label}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+export function SduiAvatarBlock({ block }: SduiBlockRenderProps) {
+  const parsed = parseSduiAvatarProps(block.props);
+  const { uri } = useSduiMediaUri(parsed.path);
+  const initials = (parsed.initials?.trim() || deriveSduiInitials(parsed.name)).slice(0, 2);
+  const sizeStyle = {
+    width: parsed.sizePx,
+    height: parsed.sizePx,
+    borderRadius: cornerPx(parsed.corner),
+  };
+
+  if (parsed.path && uri) {
+    return (
+      <View style={[styles.avatarShell, sizeStyle]} testID={parsed.testId}>
+        <Image source={{ uri }} style={StyleSheet.absoluteFill} resizeMode="cover" />
+      </View>
+    );
+  }
+
+  // Sem foto resolvível (path vazio, sem resolver, pendente sem iniciais?) →
+  // placeholder genérico: iniciais derivadas de dados ou glyph do catalog.
+  // Nunca um path de produto fallback.
+  if (initials) {
+    return (
+      <View
+        style={[styles.avatarShell, styles.avatarInitials, sizeStyle]}
+        testID={parsed.testId}
+        accessibilityLabel={parsed.name}
+      >
+        <Text
+          style={[
+            styles.avatarInitialsText,
+            { fontSize: Math.max(10, Math.round(parsed.sizePx * 0.36)) },
+          ]}
+        >
+          {initials}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.avatarShell, styles.avatarFallback, sizeStyle]} testID={parsed.testId}>
+      <AppIcon name="profile" size={Math.round(parsed.sizePx * 0.55)} color={m3Colors.onSurfaceVariant} />
+    </View>
+  );
+}
+
+export function SduiIconButtonBlock({ block, onAction }: SduiBlockRenderProps) {
+  const parsed = parseSduiIconButtonProps(block.props);
+  if (!parsed.icon) return null;
+
+  const glyphSize = parsed.size ?? APP_ICON_SIZE.feedAction;
+  const name = parsed.selected && parsed.selectedIcon ? parsed.selectedIcon : parsed.icon;
+  const tint = parsed.selected
+    ? m3Color(parsed.selectedColor, m3Colors.primary)
+    : m3Color(parsed.color, m3Colors.onSurfaceVariant);
+  const pressableSize = glyphSize + spacing.xs * 2;
+
+  return (
+    <Pressable
+      onPress={() => parsed.actionId && onAction(parsed.actionId)}
+      disabled={parsed.disabled || !parsed.actionId}
+      accessibilityRole="button"
+      accessibilityLabel={parsed.label}
+      accessibilityState={{ disabled: parsed.disabled, selected: parsed.selected }}
+      testID={parsed.testId}
+      style={({ pressed }) => [
+        styles.iconButton,
+        { width: pressableSize, height: pressableSize },
+        pressed && styles.iconButtonPressed,
+        parsed.disabled && styles.iconButtonDisabled,
+        resolveViewStyleProps(block.props.style as Record<string, unknown>),
+      ]}
+    >
+      <AppIcon name={name} size={glyphSize} color={tint} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  mediaShell: {
+    overflow: 'hidden',
+    backgroundColor: m3Colors.surfaceContainerHigh,
+  },
+  /** Véu OLED sobre o cover de trás no blur-fill (o app pode trocar pelo
+   * MediaBlurFillImage canônico com blur real; a estrutura é a mesma). */
+  blurVeil: {
+    backgroundColor: colors.blackAlpha62,
+  },
+  avatarShell: {
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: m3Colors.surfaceContainerHigh,
+  },
+  avatarInitials: {
+    backgroundColor: m3Colors.secondaryContainer,
+  },
+  avatarInitialsText: {
+    ...m3Type.labelSmall,
+    fontFamily: fonts.bold,
+    color: m3Colors.onSecondaryContainer,
+  },
+  avatarFallback: {
+    backgroundColor: m3Colors.surfaceContainerHighest,
+  },
+  iconButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonPressed: {
+    backgroundColor: colors.whiteAlpha12,
+    borderRadius: m3Shape.cornerFull,
+  },
+  iconButtonDisabled: {
+    opacity: 0.4,
+  },
+  videoStillCenter: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overflowOverlay: {
+    flex: 1,
+    backgroundColor: colors.blackAlpha62,
+    justifyContent: 'flex-end',
+  },
+  overflowMenu: {
+    margin: spacing.md,
+    paddingVertical: spacing.xs,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderRadius: m3Shape.cornerLarge,
+    ...m3Elevation.level3,
+  },
+  overflowMenuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  overflowMenuItemPressed: {
+    backgroundColor: colors.whiteAlpha12,
+  },
+  overflowMenuLabel: {
+    ...m3Type.body,
+    color: m3Colors.onSurface,
+  },
+});

package/src/renderer/blocks/SduiNativeDomainBlocks.tsx

@@ -14,6 +14,7 @@ function NativeBlockShell({
   block,
   data,
   onAction,
+  children,
   rendererKey,
   fallbackLabel,
 }: SduiBlockRenderProps & {
@@ -53,6 +54,7 @@ function NativeBlockShell({
           block,
           data,
           onAction,
+          children,
           dataRef: readStringProp(block, 'data_ref'),
           conversationIdRef: readStringProp(block, 'conversation_id_ref'),
           peerIdRef: readStringProp(block, 'peer_id_ref'),

package/src/renderer/blocks/SduiPrimitiveBlocks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { AppButton } from '../ui/AppButton';
 import { AppIcon, isAppIconName } from '../ui/app-icon';
@@ -22,16 +22,18 @@ export type SduiBlockRenderProps = {
 
 const textVariants = ['headline', 'title', 'body', 'label'] as const;
 
-export function SduiTextBlock({ block }: SduiBlockRenderProps) {
+export function SduiTextBlock({ block, onAction }: SduiBlockRenderProps) {
   const text = typeof block.props.text === 'string' ? block.props.text : '';
   const variant =
     typeof block.props.variant === 'string' &&
     (textVariants as readonly string[]).includes(block.props.variant)
       ? block.props.variant
       : 'body';
+  const actionId = typeof block.props.action_id === 'string' ? block.props.action_id : '';
 
-  return (
+  const label = (
     <Text
+      numberOfLines={actionId ? 1 : undefined}
       style={[
         { color: colors.onSurface },
         resolveTextStyleProps(block.props.style as Record<string, unknown>, variant),
@@ -40,6 +42,19 @@ export function SduiTextBlock({ block }: SduiBlockRenderProps) {
       {text}
     </Text>
   );
+  if (!actionId) return label;
+
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={text}
+      hitSlop={spacing.xs}
+      onPress={() => onAction(actionId)}
+      style={styles.textLink}
+    >
+      {label}
+    </Pressable>
+  );
 }
 
 export function SduiColumnBlock({ block, children }: SduiBlockRenderProps) {
@@ -164,6 +179,9 @@ export function SduiIconBlock({ block }: SduiBlockRenderProps) {
 }
 
 export function SduiSpacerBlock({ block }: SduiBlockRenderProps) {
+  if (typeof block.props.flex === 'number') {
+    return <View style={{ flex: block.props.flex, minWidth: 0 }} />;
+  }
   const height = typeof block.props.height === 'number' ? block.props.height : spacing.md;
   return <View style={{ height }} />;
 }
@@ -184,6 +202,7 @@ export function SduiUnknownBlock({ block }: SduiBlockRenderProps) {
 
 const styles = StyleSheet.create({
   scroll: { flex: 1, minHeight: 0 },
+  textLink: { flexShrink: 1, minWidth: 0 },
   banner: {
     padding: spacing.md,
     backgroundColor: colors.surface,

package/src/renderer/index.ts

@@ -1,4 +1,12 @@
 export { SduiScreenRenderer } from './SduiScreenRenderer';
+export { SduiTemplateRow } from './SduiTemplateRow';
+export {
+  materializeRowTemplate,
+  readSduiRowTemplate,
+  readSduiRowTemplates,
+  resolveRowTemplateBindings,
+} from './lib/sdui-row-template';
+export type { SduiRowTemplateSource } from './lib/sdui-row-template';
 export {
   resolveSduiBlockComponent,
   registerSduiBlockComponent,
@@ -9,6 +17,46 @@ export {
   SduiHybridRendererProvider,
   useSduiHybridRenderer,
 } from './sdui-hybrid-renderer-context';
+export {
+  SduiMediaResolverProvider,
+  useSduiMediaResolver,
+  useSduiMediaUri,
+} from './sdui-media-resolver-context';
+export { invokeSduiMediaResolver } from './lib/sdui-media-uri';
+export type { SduiMediaResolver } from './lib/sdui-media-uri';
+export {
+  SDUI_MEDIA_ASPECT_RATIOS,
+  SDUI_AVATAR_SIZES,
+  SDUI_ROW_OVERFLOW_DEFAULT_ICON,
+  computeSduiMediaFrame,
+  deriveSduiInitials,
+  parseSduiAvatarProps,
+  parseSduiContentImageProps,
+  parseSduiIconButtonProps,
+  parseSduiRowOverflowMenuProps,
+  parseSduiVideoProps,
+} from './lib/sdui-media-block-props';
+export type {
+  SduiAvatarParsed,
+  SduiContentImageParsed,
+  SduiIconButtonParsed,
+  SduiMediaFrame,
+  SduiRowOverflowMenuActionParsed,
+  SduiRowOverflowMenuParsed,
+  SduiVideoParsed,
+} from './lib/sdui-media-block-props';
+export {
+  SduiAvatarBlock,
+  SduiContentImageBlock,
+  SduiIconButtonBlock,
+  SduiRowOverflowMenuBlock,
+  SduiVideoBlock,
+} from './blocks/SduiMediaBlocks';
+export {
+  SduiVideoPlayerProvider,
+  useSduiVideoPlayer,
+} from './sdui-video-player-context';
+export type { SduiVideoPlayer, SduiVideoPlayerProps } from './sdui-video-player-context';
 export {
   SduiChromeScrollProvider,
   useSduiChromeScroll,