@proulr/sdui-components 0.1.88 → 0.1.91

package/src/bdc/components/media.test.ts

@@ -0,0 +1,268 @@
+import { describe, expect, it } from 'vitest';
+import { Avatar, ContentImage, IconButton, RowOverflowMenu, Video } from './media';
+import { compileBdcBlock, compileBdcToWire } from '../compile-bdc-to-wire';
+import { ListRowTemplate } from './list';
+import { SocialPostFeed } from './native-blocks';
+import { Column, Screen } from './ui';
+import type { BdcElement } from '../jsx-runtime';
+
+describe('Video (BDC)', () => {
+  it('emits video with binding path/poster and tokens; aliases normalized', () => {
+    const wire = compileBdcBlock(
+      Video({
+        pathRef: '{{item.video_path}}',
+        posterPath: '{{item.poster_path}}',
+        width: 480,
+        aspect: 'video',
+        corner: 'cornerMedium',
+        fit: 'contain',
+        testId: 'clip-video',
+      }),
+    );
+    expect(wire.type).toBe('video');
+    expect(wire.props).toEqual({
+      path: '{{item.video_path}}',
+      poster_path: '{{item.poster_path}}',
+      width: 480,
+      aspect: 'video',
+      corner: 'cornerMedium',
+      fit: 'contain',
+      test_id: 'clip-video',
+    });
+  });
+
+  it('drops undefined props and keeps poster absent when not authored', () => {
+    const node = Video({ path: 'clips/a.mp4' });
+    expect(node.type).toBe('video');
+    expect('poster_path' in node.props).toBe(false);
+    expect('width' in node.props).toBe(false);
+  });
+
+  it('composes into a row template with bindings verbatim', () => {
+    const host = SocialPostFeed({
+      children: [
+        ListRowTemplate({
+          itemKey: 'id',
+          children: [Video({ pathRef: '{{item.clip_path}}', aspect: 'story' })],
+        }),
+      ],
+    });
+    const wire = compileBdcToWire(Screen({ id: 'social.feed', children: [host] }));
+    const rows = wire.blocks[0]?.props?.row_template as BdcElement[];
+    expect(rows[0].type).toBe('video');
+    expect(rows[0].props.path).toBe('{{item.clip_path}}');
+  });
+});
+
+describe('RowOverflowMenu (BDC)', () => {
+  it('normalizes nested actions to snake_case action_id (arrays skip camelToSnake)', () => {
+    const wire = compileBdcBlock(
+      RowOverflowMenu({
+        actions: [
+          { actionId: 'delete_post_{{item.id}}', label: 'Excluir', icon: 'trash', destructive: true },
+          { actionId: 'bookmark_{{item.id}}', label: 'Salvar' },
+        ],
+        icon: 'overflow',
+        testId: 'post-menu',
+      }),
+    );
+    expect(wire.type).toBe('row_overflow_menu');
+    expect(wire.props).toEqual({
+      actions: [
+        { action_id: 'delete_post_{{item.id}}', label: 'Excluir', icon: 'trash', destructive: true },
+        { action_id: 'bookmark_{{item.id}}', label: 'Salvar' },
+      ],
+      icon: 'overflow',
+      test_id: 'post-menu',
+    });
+  });
+
+  it('accepts snake_case authoring and omits undefined keys per action', () => {
+    const node = RowOverflowMenu({ actions: [{ action_id: 'a', label: 'A' }] });
+    expect(node.props.actions).toEqual([{ action_id: 'a', label: 'A' }]);
+    expect('icon' in node.props).toBe(false);
+  });
+
+  it('keeps item bindings untouched inside label/action_id (template-safe)', () => {
+    const host = SocialPostFeed({
+      children: [
+        ListRowTemplate({
+          itemKey: 'id',
+          children: [
+            RowOverflowMenu({ actions: [{ actionId: 'report_{{item.id}}', label: '{{item.author.name}}' }], icon: 'overflow' }),
+          ],
+        }),
+      ],
+    });
+    const wire = compileBdcToWire(Screen({ id: 'social.feed', children: [host] }));
+    const rows = wire.blocks[0]?.props?.row_template as BdcElement[];
+    const actions = rows[0].props.actions as Record<string, unknown>[];
+    expect(actions[0].action_id).toBe('report_{{item.id}}');
+    expect(actions[0].label).toBe('{{item.author.name}}');
+  });
+});
+
+describe('registry wiring for new block types (static)', () => {
+  it('bdc media factories map to catalog block types video / row_overflow_menu', () => {
+    expect(Video({ path: 'a.mp4' }).type).toBe('video');
+    expect(RowOverflowMenu({ actions: [] }).type).toBe('row_overflow_menu');
+  });
+});
+
+describe('ContentImage (BDC)', () => {
+  it('emits content_image with path and tokens preserved verbatim', () => {
+    const node = ContentImage({
+      path: '{{item.media_path}}',
+      width: 96,
+      aspect: 'square',
+      corner: 'cornerMedium',
+      fit: 'cover',
+      blurFill: true,
+      testId: 'feed-image',
+    });
+    expect(node.type).toBe('content_image');
+    expect(node.props?.path).toBe('{{item.media_path}}');
+    expect(node.props.aspect).toBe('square');
+    expect(node.props.corner).toBe('cornerMedium');
+    expect(node.children).toEqual([]);
+  });
+
+  it('normalizes pathRef/path_ref aliases onto wire path', () => {
+    expect(ContentImage({ pathRef: 'posts/a.jpg' }).props?.path).toBe('posts/a.jpg');
+    expect(ContentImage({ path_ref: 'posts/b.jpg' }).props?.path).toBe('posts/b.jpg');
+    expect('pathRef' in ContentImage({ path: 'x' }).props).toBe(false);
+  });
+
+  it('compiles camel props to snake_case wire, keeping bindings untouched', () => {
+    const wire = compileBdcBlock(
+      ContentImage({
+        id: 'img',
+        path: '{{item.media_path}}',
+        blurFill: true,
+        testId: 'row-image',
+        fit: 'contain',
+      }),
+    );
+    expect(wire.type).toBe('content_image');
+    expect(wire.props).toEqual({
+      id: 'img',
+      path: '{{item.media_path}}',
+      blur_fill: true,
+      test_id: 'row-image',
+      fit: 'contain',
+    });
+  });
+
+  it('drops undefined props (no noise on the wire)', () => {
+    const node = ContentImage({ path: 'a.jpg', width: undefined });
+    expect('width' in node.props).toBe(false);
+    expect('blur_fill' in node.props).toBe(false);
+  });
+});
+
+describe('Avatar (BDC)', () => {
+  it('emits avatar with path alias, name, initials and size token', () => {
+    const node = Avatar({
+      pathRef: '{{item.author.avatar_path}}',
+      name: '{{item.author.name}}',
+      size: 'sm',
+      corner: 'cornerFull',
+    });
+    expect(node.type).toBe('avatar');
+    expect(node.props?.path).toBe('{{item.author.avatar_path}}');
+    expect(node.props.name).toBe('{{item.author.name}}');
+    expect(node.props.size).toBe('sm');
+
+    const wire = compileBdcBlock(node);
+    expect(wire.props?.path).toBe('{{item.author.avatar_path}}');
+    expect(wire.props?.corner).toBe('cornerFull');
+  });
+
+  it('supports initials-only authoring', () => {
+    const wire = compileBdcBlock(Avatar({ initials: 'AB', size: 'xs' }));
+    expect(wire.props).toEqual({ initials: 'AB', size: 'xs' });
+  });
+});
+
+describe('IconButton (BDC)', () => {
+  it('emits icon_button with binding in selected kept verbatim (stringly-typed rule)', () => {
+    const wire = compileBdcBlock(
+      IconButton({
+        icon: 'heart',
+        selectedIcon: 'heart-filled',
+        actionId: 'like_post_{{item.id}}',
+        selectedRef: '{{item.liked_by_me}}',
+        selectedColor: 'primary',
+        testId: 'like-btn',
+      }),
+    );
+    expect(wire.type).toBe('icon_button');
+    expect(wire.props).toEqual({
+      icon: 'heart',
+      selected_icon: 'heart-filled',
+      action_id: 'like_post_{{item.id}}',
+      selected: '{{item.liked_by_me}}',
+      selected_color: 'primary',
+      test_id: 'like-btn',
+    });
+  });
+
+  it('passes literal booleans through for selected', () => {
+    expect(compileBdcBlock(IconButton({ icon: 'heart', selected: true })).props?.selected).toBe(true);
+    expect(compileBdcBlock(IconButton({ icon: 'heart', selected: false })).props?.selected).toBe(false);
+  });
+
+  it('accepts snake_case authoring too', () => {
+    const wire = compileBdcBlock(
+      IconButton({ icon: 'heart', action_id: 'like', selected: 'false', test_id: 'x' }),
+    );
+    expect(wire.props?.action_id).toBe('like');
+    expect(wire.props?.selected).toBe('false');
+    expect(wire.props?.test_id).toBe('x');
+  });
+
+  it('composes into a social feed row template (bindings verbatim in the wire)', () => {
+    const host = SocialPostFeed({
+      dataRef: 'social.posts',
+      children: [
+        ListRowTemplate({
+          itemKey: 'id',
+          children: [
+            Column({
+              children: [
+                Avatar({
+                  pathRef: '{{item.author.avatar_path}}',
+                  name: '{{item.author.name}}',
+                  size: 'sm',
+                }),
+                ContentImage({ pathRef: '{{item.media_path}}', width: 96, aspect: 'square' }),
+                IconButton({
+                  icon: 'heart',
+                  selectedIcon: 'heart-filled',
+                  actionId: 'like_post_{{item.id}}',
+                  selectedRef: '{{item.liked_by_me}}',
+                }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const wire = compileBdcToWire(
+      Screen({ id: 'social.feed', data: { posts: [] }, children: [host] }),
+    );
+    const feed = wire.blocks[0];
+    expect(feed.children).toEqual([]);
+
+    const rows = feed.props?.row_template as unknown as BdcElement[];
+    expect(rows).toHaveLength(1);
+    const [avatar, image, like] = rows[0].children;
+    expect(avatar.type).toBe('avatar');
+    expect(avatar.props.path).toBe('{{item.author.avatar_path}}');
+    expect(image.props.path).toBe('{{item.media_path}}');
+    expect(like.props.selected).toBe('{{item.liked_by_me}}');
+    expect(like.props.action_id).toBe('like_post_{{item.id}}');
+    expect(like.props.selected_icon).toBe('heart-filled');
+  });
+});

package/src/bdc/components/media.tsx

@@ -0,0 +1,275 @@
+import type {
+  ColorToken,
+  ShapeToken,
+  SduiAvatarSizeToken,
+  SduiMediaAspectToken,
+  SduiMediaFitToken,
+  SduiSelectedFlag,
+} from '@proulr/sdui-contract';
+import type { BdcComponent } from '../jsx-runtime';
+
+/**
+ * Blocos genéricos de mídia/estado para row templates e layouts BFF.
+ *
+ * Nenhum deles conhece produto: o **path de mídia** vem de dados (bindings
+ * `{{item.*}}` em row templates são resolvidos pelo app em materialize time)
+ * e a transformação path → URL (download autenticado) é capability genérica
+ * fornecida pelo app via `SduiMediaResolver` (`@proulr/sdui-components/renderer`).
+ * A lib nunca cai em path/URL de produto: sem resolver ou com path vazio,
+ * `content_image` renderiza `null`; `avatar` cai em iniciais/glyph genérico.
+ */
+
+function definedProps(props: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key === 'children' || value === undefined) continue;
+    out[key] = value;
+  }
+  return out;
+}
+
+/** Lê string aceitando a forma camel ou snake do mesmo prop (autoria BFF tolerante). */
+function readStringAlias(props: Record<string, unknown>, ...keys: string[]): string | undefined {
+  for (const key of keys) {
+    const value = props[key];
+    if (typeof value === 'string') return value;
+  }
+  return undefined;
+}
+
+type ContentImageProps = {
+  id?: string;
+  /** Storage path (ex.: `posts/2026/a.jpg`) ou binding `{{item.media_path}}` no row template. */
+  path?: string;
+  /** Alias de autoria: mesmo valor de `path` (compacto em rows). */
+  pathRef?: string;
+  path_ref?: string;
+  width?: number;
+  height?: number;
+  /** Token de proporção — `square` | `portrait` | `story` | `video` | `wide`. */
+  aspect?: SduiMediaAspectToken;
+  /** Token de raio do tema (sem px/hex) — default `cornerMedium`. */
+  corner?: ShapeToken;
+  /** `cover` (default) | `contain`. */
+  fit?: SduiMediaFitToken;
+  /** Preenche o frame atrás de mídia `contain` (blur-fill genérico; app pode refinar). */
+  blurFill?: boolean;
+  testId?: string;
+};
+
+/**
+ * `<ContentImage path="{{item.media_path}}" aspect="square" corner="cornerMedium" fit="cover" />`
+ * → wire `content_image`:
+ * `{ path, width?, height?, aspect?, corner?, fit?, blur_fill?, test_id? }`
+ */
+export const ContentImage: BdcComponent = (props) => {
+  const raw = props as ContentImageProps & Record<string, unknown>;
+  const path = readStringAlias(raw, 'path', 'pathRef', 'path_ref');
+  const elementProps = definedProps({
+    id: raw.id,
+    width: raw.width,
+    height: raw.height,
+    aspect: raw.aspect,
+    corner: raw.corner,
+    fit: raw.fit,
+    blurFill: raw.blurFill ?? raw.blur_fill,
+    testId: raw.testId ?? raw.test_id,
+  });
+  if (path !== undefined) elementProps.path = path;
+  return { type: 'content_image', props: elementProps, children: [] };
+};
+
+type VideoProps = {
+  id?: string;
+  /** Storage path do vídeo (ex.: `clips/2026/a.mp4`) ou binding `{{item.video_path}}`. */
+  path?: string;
+  pathRef?: string;
+  path_ref?: string;
+  /** Storage path do poster/still (ou binding); exibido quando o app não pluga player. */
+  posterPath?: string;
+  poster_path?: string;
+  posterRef?: string;
+  poster_ref?: string;
+  width?: number;
+  height?: number;
+  /** Token de proporção — `square` | `portrait` | `story` | `video` | `wide`. */
+  aspect?: SduiMediaAspectToken;
+  /** Token de raio do tema (sem px/hex) — default `cornerMedium`. */
+  corner?: ShapeToken;
+  /** `cover` (default) | `contain`. */
+  fit?: SduiMediaFitToken;
+  testId?: string;
+};
+
+/**
+ * `<Video path="{{item.video_path}}" posterPath="{{item.poster_path}}" aspect="video" />`
+ * → wire `video`:
+ * `{ path, width?, height?, aspect?, corner?, fit?, poster_path?, test_id? }`
+ *
+ * O player em si é do **app** (expo-video): o renderer resolve `path`/
+ * `poster_path` via o mesmo `SduiMediaResolverContext` e delega a playback a
+ * um slot injetável (`SduiVideoPlayerProvider`). Sem slot, o bloco renderiza
+ * um **frame** com o poster (still) — nunca URL de produto hardcoded.
+ */
+export const Video: BdcComponent = (props) => {
+  const raw = props as VideoProps & Record<string, unknown>;
+  const path = readStringAlias(raw, 'path', 'pathRef', 'path_ref');
+  const posterPath = readStringAlias(raw, 'posterPath', 'poster_path', 'posterRef', 'poster_ref');
+  const elementProps = definedProps({
+    id: raw.id,
+    width: raw.width,
+    height: raw.height,
+    aspect: raw.aspect,
+    corner: raw.corner,
+    fit: raw.fit,
+    testId: raw.testId ?? raw.test_id,
+  });
+  if (path !== undefined) elementProps.path = path;
+  if (posterPath !== undefined) elementProps.poster_path = posterPath;
+  return { type: 'video', props: elementProps, children: [] };
+};
+
+type RowOverflowMenuActionProps = {
+  /** Action id do wire; binding `{{item.*}}` ok (template-safe). */
+  actionId?: string;
+  action_id?: string;
+  /** Rótulo da entrada (copy via Rosetta no BFF; binding ok). */
+  label?: string;
+  /** AppIconName kebab-case (catalog) — ex.: `trash`, `bookmark`. */
+  icon?: string;
+  /** Tint `error` do tema nesta entrada. */
+  destructive?: boolean;
+};
+
+type RowOverflowMenuProps = {
+  id?: string;
+  /** Entradas do menu, em ordem. */
+  actions?: RowOverflowMenuActionProps[];
+  /** AppIconName do trigger (default no renderer: `overflow`). */
+  icon?: string;
+  testId?: string;
+};
+
+/**
+ * `<RowOverflowMenu actions={[{ actionId: 'delete_post_{{item.id}}', label: 'Excluir', icon: 'trash', destructive: true }]} />`
+ * → wire `row_overflow_menu`:
+ * `{ actions: [{ action_id, label, icon?, destructive? }], icon?, test_id? }`
+ *
+ * Overflow genérico por linha: aninhados **não** passam por camelToSnake no
+ * compile — o factory já normaliza `action_id`. Toda copy vem do chamador
+ * (BFF); a lib não inventa strings.
+ */
+export const RowOverflowMenu: BdcComponent = (props) => {
+  const raw = props as RowOverflowMenuProps & Record<string, unknown>;
+  const actions = (raw.actions ?? []).map((action) => {
+    const entry = action as RowOverflowMenuActionProps;
+    return definedProps({
+      action_id: entry.actionId ?? entry.action_id,
+      label: entry.label,
+      icon: entry.icon,
+      destructive: entry.destructive,
+    });
+  });
+  const elementProps = definedProps({
+    id: raw.id,
+    icon: raw.icon,
+    testId: raw.testId ?? raw.test_id,
+  });
+  elementProps.actions = actions;
+  return { type: 'row_overflow_menu', props: elementProps, children: [] };
+};
+
+type AvatarProps = {
+  id?: string;
+  /** Storage path da foto (ou binding `{{item.author.avatar_path}}`). */
+  path?: string;
+  pathRef?: string;
+  path_ref?: string;
+  /** Nome de exibição — iniciais derivadas quando não há foto resolvível. */
+  name?: string;
+  /** Iniciais explícitas (override da derivação de `name`). */
+  initials?: string;
+  /** Token de tamanho — `xs` | `sm` | `md` | `lg` | `xl` (default `md`). */
+  size?: SduiAvatarSizeToken;
+  /** Token de raio — default `cornerFull` (círculo). */
+  corner?: ShapeToken;
+  testId?: string;
+};
+
+/**
+ * `<Avatar pathRef="{{item.author.avatar_path}}" name="{{item.author.name}}" size="sm" />`
+ * → wire `avatar`: `{ path?, name?, initials?, size?, corner?, test_id? }`
+ */
+export const Avatar: BdcComponent = (props) => {
+  const raw = props as AvatarProps & Record<string, unknown>;
+  const path = readStringAlias(raw, 'path', 'pathRef', 'path_ref');
+  const elementProps = definedProps({
+    id: raw.id,
+    name: raw.name,
+    initials: raw.initials,
+    size: raw.size,
+    corner: raw.corner,
+    testId: raw.testId ?? raw.test_id,
+  });
+  if (path !== undefined) elementProps.path = path;
+  return { type: 'avatar', props: elementProps, children: [] };
+};
+
+type IconButtonProps = {
+  id?: string;
+  /** AppIconName kebab-case (catalog) — ex.: `heart`. */
+  icon: string;
+  /** AppIconName do estado selecionado (ex.: `heart-filled`); sem ele, só tint. */
+  selectedIcon?: string;
+  selected_icon?: string;
+  actionId?: string;
+  /**
+   * Estado selecionado: `true`/`false` literal ou binding `{{item.liked_by_me}}`.
+   * Em row templates, materialize resolve booleanos para as **strings**
+   * `'true'`/`'false'` — o renderer trata `'true'`/`true` como selecionado
+   * (regra stringly-typed documentada em `docs/components.md`).
+   */
+  selected?: SduiSelectedFlag;
+  /** Alias de autoria: mesmo destino de `selected`. */
+  selectedRef?: string;
+  selected_ref?: string;
+  /** Px do glyph (default `feedAction`). */
+  size?: number;
+  /** ColorToken do estado default (ex.: `onSurfaceVariant`). */
+  color?: ColorToken;
+  /** ColorToken do estado selecionado (ex.: `primary`). */
+  selectedColor?: ColorToken;
+  selected_color?: ColorToken;
+  /** Rótulo de acessibilidade (copy via Rosetta no BFF). */
+  label?: string;
+  disabled?: boolean;
+  testId?: string;
+};
+
+/**
+ * `<IconButton icon="heart" selectedIcon="heart-filled" actionId="like_post_{{item.id}}" selectedRef="{{item.liked_by_me}}" />`
+ * → wire `icon_button`:
+ * `{ icon, selected_icon?, action_id?, selected?, size?, color?, selected_color?, label?, disabled?, test_id? }`
+ */
+export const IconButton: BdcComponent = (props) => {
+  const raw = props as IconButtonProps & Record<string, unknown>;
+  const selected = readStringAlias(raw, 'selected', 'selectedRef', 'selected_ref');
+  const elementProps = definedProps({
+    id: raw.id,
+    icon: raw.icon,
+    selectedIcon: readStringAlias(raw, 'selectedIcon', 'selected_icon'),
+    actionId: raw.actionId ?? raw.action_id,
+    size: raw.size,
+    color: raw.color,
+    selectedColor: readStringAlias(raw, 'selectedColor', 'selected_color'),
+    label: raw.label,
+    disabled: raw.disabled,
+    testId: raw.testId ?? raw.test_id,
+  });
+  if (selected !== undefined) {
+    elementProps.selected = selected;
+  } else if (typeof raw.selected === 'boolean') {
+    elementProps.selected = raw.selected;
+  }
+  return { type: 'icon_button', props: elementProps, children: [] };
+};

package/src/bdc/components/native-blocks.tsx

@@ -12,15 +12,21 @@ type NativeBlockProps = {
   profileIdRef?: string;
   /** Wire `settings_page` — id da página filha (about, privacy, …). */
   page?: string;
+  children?: BdcElement[];
 };
 
 function nativeBlock(type: string, props: NativeBlockProps): BdcElement {
-  return { type, props: { ...props }, children: [] };
+  const { children, ...rest } = props;
+  return { type, props: { ...rest }, children: children ?? [] };
 }
 
 export const ChatThread: BdcComponent = (props) => nativeBlock('chat_thread', props);
 export const SocialPostFeed: BdcComponent = (props) => nativeBlock('social_post_feed', props);
 export const ThoughtFeed: BdcComponent = (props) => nativeBlock('thought_feed', props);
+/**
+ * Hero nativo genérico do perfil (fotos + vidro + fade). Aceita blocos BDC como
+ * filhos, que o híbrido monta na sua folha rolável sobre a foto fixa.
+ */
 export const ProfileView: BdcComponent = (props) => nativeBlock('profile_view', props);
 export const ProfileSelf: BdcComponent = (props) => nativeBlock('profile_self', props);
 export const ProfileSetup: BdcComponent = (props) => nativeBlock('profile_setup', props);

package/src/bdc/components/ui.tsx

@@ -11,6 +11,8 @@ type LayoutProps = {
   gap?: number | string;
   padding?: number | string;
   height?: number;
+  /** Spacer: ocupa o espaço livre do Row/Column pai (em vez de `height`). */
+  flex?: number;
   variant?: string;
   style?: StyleWire;
   children?: BdcElement[];
@@ -37,6 +39,8 @@ export const Spacer: BdcComponent = (props) => layoutBlock('spacer', props as La
 type TextProps = LayoutProps & {
   text?: string;
   variant?: 'headline' | 'title' | 'body' | 'label';
+  /** Torna o texto tocável (link) sem o min-height de um Button. */
+  actionId?: string;
 };
 
 export const Text: BdcComponent = (props) => layoutBlock('text', props as TextProps);
@@ -96,6 +100,35 @@ type SectionHeaderProps = LayoutProps & {
 export const SectionHeader: BdcComponent = (props) =>
   layoutBlock('section_header', props as SectionHeaderProps);
 
+type StatTileRowProps = LayoutProps & {
+  /** Caminho em `screen.data` para o array de tiles: `{ icon, value, label, action_id?, action_params? }[]`. */
+  itemsRef?: string;
+  /** Tiles por linha (grade); padrão = todos numa linha só. */
+  columns?: number;
+  /** `start` = card alinhado à esquerda (valor em até 2 linhas); padrão centralizado. */
+  align?: 'center' | 'start';
+};
+
+/** Linha genérica de tiles de métrica (ícone + valor + rótulo). Reusável em qualquer tela. */
+export const StatTileRow: BdcComponent = (props) => layoutBlock('stat_tile_row', props as StatTileRowProps);
+
+type DataGroupListProps = LayoutProps & {
+  /** Caminho em `screen.data`: `{ title, icon, rows: { label, value }[] }[]`. */
+  itemsRef?: string;
+};
+
+/** Grupos de detalhes (cabeçalho com ícone + linhas rótulo→valor). Reusável. */
+export const DataGroupList: BdcComponent = (props) =>
+  layoutBlock('data_group_list', props as DataGroupListProps);
+
+type VouchListProps = LayoutProps & {
+  /** Caminho em `screen.data`: `{ header, items: { quote, author_name, meta }[] }`. */
+  itemsRef?: string;
+};
+
+/** Cartões de citação/recomendação (Vouches/depoimentos). Reusável. */
+export const VouchList: BdcComponent = (props) => layoutBlock('vouch_list', props as VouchListProps);
+
 type ListItemProps = LayoutProps & {
   title?: string;
   subtitle?: string;

package/src/bdc/index.ts

@@ -3,6 +3,7 @@ export {
   Button,
   Card,
   Column,
+  DataGroupList,
   Icon,
   InfoBanner,
   ListItem,
@@ -13,11 +14,15 @@ export {
   Scroll,
   SectionHeader,
   Spacer,
+  StatTileRow,
   Text,
   ToggleRow,
+  VouchList,
   screenProps,
 } from './components/ui';
 export { Chip, ChipRow, DiscoverGrid, DiscoverMap, DiscoverProfileCard } from './components/discover';
+export { Avatar, ContentImage, IconButton, RowOverflowMenu, Video } from './components/media';
+export { ListRowTemplate } from './components/list';
 export {
   ChatInboxCapabilities,
   EmptyState,

package/src/catalog/block-types.ts

@@ -9,6 +9,11 @@ export const SDUI_BLOCK_TYPES = [
   'spacer',
   'info_banner',
   'native_ad',
+  'content_image',
+  'video',
+  'avatar',
+  'icon_button',
+  'row_overflow_menu',
   'inbox_hub_chrome',
   'select_row',
 ] as const;