@proulr/sdui-components 0.1.88 → 0.1.90

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

@@ -96,6 +96,31 @@ 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 }[]`. */
+  itemsRef?: string;
+};
+
+/** 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;

package/src/renderer/SduiTemplateRow.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import type { SduiBlock, SduiBlockWire } from '@proulr/sdui-contract';
+import { renderBlockTree } from './sdui-component-registry';
+import { materializeRowTemplate, type SduiRowTemplateSource } from './lib/sdui-row-template';
+
+type Props = {
+  /** Props do bloco hospedeiro (`{ row_template, item_key, section }`) ou array nu de blocos do template. */
+  template: SduiRowTemplateSource | null | undefined;
+  /** Item vivo do feed (`screen.data[...]`). */
+  item: unknown;
+  /** Índice do item — fallback do sufixo de id quando `item_key` não resolve. */
+  index?: number;
+  /** `screen.data` repassado ao renderer de blocos. */
+  data?: Record<string, unknown>;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+};
+
+function toDomainBlock(block: SduiBlockWire): SduiBlock {
+  return {
+    id: block.id,
+    type: block.type,
+    props: block.props ?? {},
+    children: (block.children ?? []).map(toDomainBlock),
+  };
+}
+
+/**
+ * Renderiza **uma** linha de um row template wire-driven: materializa o subtree
+ * do bloco template para o item (bindings `{{item.*}}` + ids estáveis) e monta
+ * via registry de blocos do SDUI (`renderBlockTree`) — componentes genéricos,
+ * sem layout de linha hardcoded no híbrido.
+ *
+ * ```tsx
+ * {items.map((post, i) => (
+ *   <SduiTemplateRow
+ *     key={post.id}
+ *     template={readSduiRowTemplate(block.props)}
+ *     item={post}
+ *     index={i}
+ *     data={data}
+ *     onAction={onAction}
+ *   />
+ * ))}
+ * ```
+ */
+export function SduiTemplateRow({ template, item, index = 0, data = {}, onAction }: Props) {
+  const blocks = useMemo(
+    () => (template ? materializeRowTemplate(template, item, index) : []),
+    [template, item, index],
+  );
+  return (
+    <>
+      {blocks.map((block) => {
+        const domainBlock = toDomainBlock(block);
+        return (
+          <React.Fragment key={domainBlock.id}>
+            {renderBlockTree(domainBlock, data, onAction)}
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}

package/src/renderer/blocks/SduiContentBlocks.tsx

@@ -0,0 +1,198 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
+import { AppIcon } from '../ui/app-icon';
+import { isAppIconName, type AppIconName } from '../../catalog/app-icon-names';
+import { resolveDataRef } from '../lib/resolve-data-ref';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+function itemsFrom(
+  block: SduiBlockRenderProps['block'],
+  data: Record<string, unknown>,
+  fallback = '',
+): unknown[] {
+  const refProp = block.props.items_ref;
+  const ref = typeof refProp === 'string' && refProp ? refProp : fallback;
+  if (!ref) return [];
+  const raw = resolveDataRef(data, ref);
+  return Array.isArray(raw) ? raw : [];
+}
+
+function asRecord(item: unknown): Record<string, unknown> | null {
+  return item && typeof item === 'object' ? (item as Record<string, unknown>) : null;
+}
+
+function toText(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (value != null) return String(value);
+  return '';
+}
+
+function toIcon(value: unknown): AppIconName | undefined {
+  return typeof value === 'string' && isAppIconName(value) ? value : undefined;
+}
+
+/* ── stat_tile_row ─────────────────────────────────────────────────────────── */
+
+type StatTile = { icon?: AppIconName; value: string; label: string };
+
+/** Tiles genéricos de métrica (ícone + valor + rótulo) — layout vem do wire, regra do BFF. */
+export function SduiStatTileRowBlock({ block, data }: SduiBlockRenderProps) {
+  const tiles: StatTile[] = itemsFrom(block, data, 'stats')
+    .map(asRecord)
+    .filter((row): row is Record<string, unknown> => row !== null)
+    .map((row) => ({ icon: toIcon(row.icon), value: toText(row.value), label: toText(row.label) }))
+    .filter((tile) => tile.value || tile.label);
+  if (tiles.length === 0) return null;
+
+  return (
+    <View style={styles.row} accessibilityRole="list">
+      {tiles.map((tile, index) => (
+        <View key={`${tile.label}-${index}`} style={styles.tile}>
+          {tile.icon ? <AppIcon name={tile.icon} size={17} color={m3Colors.onSurfaceVariant} /> : null}
+          <Text style={styles.value} numberOfLines={1}>{tile.value}</Text>
+          <Text style={styles.label} numberOfLines={1}>{tile.label}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/* ── data_group_list ──────────────────────────────────────────────────────── */
+
+/** Grupos de detalhes (cabeçalho com ícone + linhas rótulo→valor). Reutilizável em qualquer tela. */
+export function SduiDataGroupListBlock({ block, data }: SduiBlockRenderProps) {
+  const groups = itemsFrom(block, data)
+    .map(asRecord)
+    .filter((g): g is Record<string, unknown> => g !== null)
+    .map((group) => {
+      const rowsRaw = Array.isArray(group.rows) ? group.rows : [];
+      const rows = rowsRaw
+        .map(asRecord)
+        .filter((r): r is Record<string, unknown> => r !== null)
+        .map((row) => ({ label: toText(row.label), value: toText(row.value) }))
+        .filter((row) => row.label || row.value);
+      return {
+        icon: toIcon(group.icon),
+        title: toText(group.title),
+        rows,
+      };
+    })
+    .filter((group) => group.rows.length > 0);
+  if (groups.length === 0) return null;
+
+  return (
+    <View style={styles.groups}>
+      {groups.map((group, gIndex) => (
+        <View key={`${group.title}-${gIndex}`} style={styles.group}>
+          <View style={styles.groupHead} accessibilityRole="header">
+            {group.icon ? <AppIcon name={group.icon} size={16} color={m3Colors.onSurface} /> : null}
+            <Text style={styles.groupTitle}>{group.title}</Text>
+          </View>
+          {group.rows.map((row, rIndex) => (
+            <View key={`${row.label}-${rIndex}`} style={styles.dataRow}>
+              <Text style={styles.dataLabel} numberOfLines={1}>{row.label}</Text>
+              <Text style={styles.dataValue}>{row.value}</Text>
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+/* ── vouch_list ───────────────────────────────────────────────────────────── */
+
+/** Cartões de citação/recomendação (cabeçalho + citações com autor). Reutilizável (depoimentos, reviews). */
+export function SduiVouchListBlock({ block, data }: SduiBlockRenderProps) {
+  const itemsRefProp = block.props.items_ref;
+  const itemsRef = typeof itemsRefProp === 'string' && itemsRefProp ? itemsRefProp : 'vouches';
+  const container = asRecord(resolveDataRef(data, itemsRef));
+  const header = container ? toText(container.header) : '';
+  const items = (container && Array.isArray(container.items) ? container.items : [])
+    .map(asRecord)
+    .filter((i): i is Record<string, unknown> => i !== null)
+    .map((item) => ({
+      quote: toText(item.quote),
+      author: toText(item.author_name),
+      meta: toText(item.meta),
+    }))
+    .filter((item) => item.quote);
+  if (!header && items.length === 0) return null;
+
+  return (
+    <View style={styles.vouchWrap}>
+      {header ? <Text style={styles.vouchHeader}>{header}</Text> : null}
+      {items.map((item, index) => (
+        <View key={`vouch-${index}`} style={styles.vouchCard}>
+          <Text style={styles.vouchQuote}>“{item.quote}”</Text>
+          <View style={styles.vouchFooter}>
+            <Text style={styles.vouchAuthor}>{item.author}</Text>
+            {item.meta ? <Text style={styles.vouchMeta}>{item.meta}</Text> : null}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', gap: spacing.sm },
+  tile: {
+    flex: 1,
+    minHeight: 64,
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 1,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.xs,
+  },
+  value: { ...m3Type.title, color: m3Colors.onSurface, fontFamily: fonts.extrabold },
+  label: { ...m3Type.labelSmall, color: m3Colors.onSurfaceVariant },
+
+  groups: { gap: spacing.md },
+  group: {
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    overflow: 'hidden',
+  },
+  groupHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  groupTitle: { ...m3Type.label, color: m3Colors.onSurface, fontFamily: fonts.bold },
+  dataRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: spacing.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  dataLabel: { ...m3Type.bodySmall, color: m3Colors.onSurfaceVariant, flexShrink: 0 },
+  dataValue: { ...m3Type.bodySmall, color: m3Colors.onSurface, fontFamily: fonts.semibold, flex: 1, textAlign: 'right' },
+
+  vouchWrap: { gap: spacing.sm },
+  vouchHeader: { ...m3Type.bodySmall, color: m3Colors.onSurfaceVariant },
+  vouchCard: {
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    padding: spacing.md,
+    gap: spacing.sm,
+  },
+  vouchQuote: { ...m3Type.body, color: m3Colors.onSurface },
+  vouchFooter: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: spacing.sm },
+  vouchAuthor: { ...m3Type.labelSmall, color: m3Colors.secondary, fontFamily: fonts.bold },
+  vouchMeta: { ...m3Type.labelSmall, color: m3Colors.onSurfaceVariant },
+});