@proulr/sdui-components 0.1.87 → 0.1.90

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -13,7 +13,7 @@ import type { SduiBlock } from '@proulr/sdui-contract';
 import { TextField as UiTextField } from '../ui/TextField';
 import { Chip } from '../ui/Chip';
 import { ChipRow } from '../ui/ChipRow';
-import { AppIcon } from '../ui/app-icon';
+import { AppIcon, isAppIconName } from '../ui/app-icon';
 import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
 import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
@@ -280,6 +280,7 @@ export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRender
 export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const label = readStringProp(block, 'label') ?? '';
   const glyph = readStringProp(block, 'glyph');
+  const tone = readStringProp(block, 'tone');
   const actionId = readStringProp(block, 'action_id');
   const actionParams = readStringRecordProp(block, 'action_params');
   const active = readBooleanProp(block, 'active');
@@ -288,6 +289,7 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
     <Chip
       label={label}
       icon={glyph}
+      tone={tone === 'secondary' || tone === 'primary' ? tone : undefined}
       active={active}
       disabled={!actionId}
       onPress={() => actionId && onAction(actionId, actionParams)}
@@ -295,7 +297,40 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   );
 }
 
-export function SduiChipRowBlock({ children }: SduiBlockRenderProps) {
+export function SduiChipRowBlock({ block, data, children, onAction }: SduiBlockRenderProps) {
+  const itemsRef = readStringProp(block, 'items_ref');
+  if (itemsRef) {
+    const raw = resolveDataRef(data, itemsRef);
+    const items = Array.isArray(raw) ? raw : [];
+    return (
+      <ChipRow>
+        {items.map((item, index) => {
+          if (!item || typeof item !== 'object') return null;
+          const row = item as Record<string, unknown>;
+          const label = typeof row.label === 'string' ? row.label : '';
+          if (!label) return null;
+          const glyph = typeof row.glyph === 'string' && isAppIconName(row.glyph) ? row.glyph : undefined;
+          const toneRaw = row.tone;
+          const tone = toneRaw === 'secondary' || toneRaw === 'primary' ? toneRaw : undefined;
+          const actionId = typeof row.action_id === 'string' ? row.action_id : undefined;
+          const actionParams =
+            row.action_params && typeof row.action_params === 'object'
+              ? (row.action_params as Record<string, string>)
+              : undefined;
+          return (
+            <Chip
+              key={`${label}-${index}`}
+              label={label}
+              icon={glyph}
+              tone={tone}
+              disabled={!actionId}
+              onPress={() => actionId && onAction(actionId, actionParams)}
+            />
+          );
+        })}
+      </ChipRow>
+    );
+  }
   return <ChipRow>{children}</ChipRow>;
 }
 

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/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,