@proulr/sdui-components 0.1.88 → 0.1.91

package/src/renderer/lib/sdui-row-template.test.ts

@@ -0,0 +1,190 @@
+import { describe, expect, it } from 'vitest';
+import type { SduiBlockWire } from '@proulr/sdui-contract';
+import {
+  materializeRowTemplate,
+  readSduiRowTemplate,
+  readSduiRowTemplates,
+  resolveRowTemplateBindings,
+} from './sdui-row-template';
+
+const template: SduiBlockWire[] = [
+  {
+    id: '0.row_template.0.0',
+    type: 'column',
+    props: {
+      action_id: 'open_post_{{item.id}}',
+      tap_action: {
+        type: 'api_call',
+        path: '/v1/posts/{{item.id}}/like',
+        body: { comment: '{{item.author.name}} said {{item.body}}', tags: ['{{item.topic}}', 'static'] },
+      },
+    },
+    children: [
+      {
+        id: '0.row_template.0.0.0',
+        type: 'text',
+        props: { text: '{{item.author.name}}', fallback: '{{item.missing.deep}}' },
+        children: [],
+      },
+      {
+        id: '0.row_template.0.0.1',
+        type: 'icon',
+        props: { name: 'share', size: '{{item.likes}}' },
+        children: [],
+      },
+    ],
+  },
+];
+
+const item = {
+  id: 'p-7',
+  body: 'hello',
+  likes: 12,
+  topic: 'music',
+  author: { name: 'Ana' },
+};
+
+describe('materializeRowTemplate', () => {
+  it('resolves simple, nested, interpolated and multi bindings across all props', () => {
+    const rows = materializeRowTemplate({ row_template: template, item_key: 'id' }, item, 0);
+    const row = rows[0];
+    expect(row.props?.action_id).toBe('open_post_p-7');
+    const child = row.children?.[0];
+    expect(child?.props?.text).toBe('Ana');
+    expect(child?.props?.fallback).toBe('');
+    expect(row.children?.[1]?.props?.size).toBe('12');
+    expect(row.children?.[1]?.props?.name).toBe('share');
+  });
+
+  it('resolves bindings inside nested action payloads (objects and arrays)', () => {
+    const rows = materializeRowTemplate({ row_template: template, item_key: 'id' }, item, 3);
+    const tap = rows[0].props?.tap_action as {
+      path: string;
+      body: { comment: string; tags: string[] };
+    };
+    expect(tap.path).toBe('/v1/posts/p-7/like');
+    expect(tap.body.comment).toBe('Ana said hello');
+    expect(tap.body.tags).toEqual(['music', 'static']);
+  });
+
+  it('missing fields resolve to empty string; whole-placeholder and partial both work', () => {
+    const rows = materializeRowTemplate({ row_template: template, item_key: 'id' }, { id: 'x' }, 0);
+    expect(rows[0].children?.[0]?.props?.text).toBe('');
+    expect(rows[0].props?.action_id).toBe('open_post_x');
+  });
+
+  it('gives stable ids (template id + item_key value) recursively; falls back to index', () => {
+    const source = { row_template: template, item_key: 'id' };
+    const a = materializeRowTemplate(source, item, 0);
+    const b = materializeRowTemplate(source, item, 5);
+    expect(a[0].id).toBe('0.row_template.0.0@p-7');
+    expect(a[0].children?.[0].id).toBe('0.row_template.0.0.0@p-7');
+    expect(a[0].id).toBe(b[0].id);
+
+    const fallback = materializeRowTemplate(source, { body: 'no id' }, 7);
+    expect(fallback[0].id).toBe('0.row_template.0.0@7');
+
+    const dotKey = materializeRowTemplate({ row_template: template, item_key: 'author.name' }, item, 0);
+    expect(dotKey[0].id).toBe('0.row_template.0.0@Ana');
+  });
+
+  it('accepts a bare block array and deep-clones without mutating the template', () => {
+    const frozenProps = template[0].props;
+    const rows = materializeRowTemplate(template, item, 1);
+    expect(rows[0].props).not.toBe(frozenProps);
+    expect(template[0].props?.action_id).toBe('open_post_{{item.id}}');
+    expect(rows[0].props).not.toBe(template[0].props);
+    expect(rows[0].children?.[0]).not.toBe(template[0].children?.[0]);
+    // Bare array has no item_key → index fallback.
+    expect(rows[0].id).toBe('0.row_template.0.0@1');
+  });
+
+  it('tolerates empty/missing template parts', () => {
+    expect(materializeRowTemplate([], item, 0)).toEqual([]);
+    expect(materializeRowTemplate({ row_template: [], item_key: 'id' }, item, 0)).toEqual([]);
+    expect(
+      materializeRowTemplate({ row_template: [{ id: 'x', type: 'text' }], item_key: 'id' }, item, 0)[0],
+    ).toMatchObject({ id: 'x@p-7', props: {}, children: [] });
+  });
+});
+
+describe('resolveRowTemplateBindings', () => {
+  it('resolves strings, arrays, objects and leaves non-strings untouched', () => {
+    expect(resolveRowTemplateBindings('{{item.likes}} x {{item.nope}}', item)).toBe('12 x ');
+    expect(resolveRowTemplateBindings(42, item)).toBe(42);
+    expect(resolveRowTemplateBindings(null, item)).toBe(null);
+    expect(resolveRowTemplateBindings(['{{item.id}}'], item)).toEqual(['p-7']);
+    expect(resolveRowTemplateBindings({ k: { j: '{{item.id}}' }, n: 1 }, item)).toEqual({
+      k: { j: 'p-7' },
+      n: 1,
+    });
+  });
+
+  it('supports array index dot paths and whole-value objects via JSON', () => {
+    expect(resolveRowTemplateBindings('{{item.tags.1}}', { tags: ['a', 'b'] })).toBe('b');
+    expect(resolveRowTemplateBindings('{{item.a.b.c}}', {})).toBe('');
+  });
+});
+
+describe('readSduiRowTemplate', () => {
+  it('reads host block props and rejects non-template props', () => {
+    expect(
+      readSduiRowTemplate({ row_template: [], item_key: 'id', data_ref: 'x' })?.item_key,
+    ).toBe('id');
+    expect(readSduiRowTemplate({ data_ref: 'x' })).toBeUndefined();
+    expect(readSduiRowTemplate(undefined)).toBeUndefined();
+  });
+});
+
+describe('readSduiRowTemplates', () => {
+  it('falls back to the single template as a length-1 array (old hosts unchanged)', () => {
+    expect(
+      readSduiRowTemplates({ row_template: template, item_key: 'id', data_ref: 'social.posts' }),
+    ).toEqual([{ row_template: template, item_key: 'id' }]);
+    expect(
+      readSduiRowTemplates({ row_template: template, item_key: 'id', section: 'posts' }),
+    ).toEqual([{ row_template: template, item_key: 'id', section: 'posts' }]);
+  });
+
+  it('returns the ordered row_templates when a multi-template host carries them', () => {
+    const entries = [
+      { row_template: template, item_key: 'id', section: 'posts' },
+      { row_template: template, item_key: 'comment_id' },
+    ];
+    expect(
+      readSduiRowTemplates({
+        row_template: template,
+        item_key: 'id',
+        section: 'posts',
+        row_templates: entries,
+      }),
+    ).toEqual(entries);
+  });
+
+  it('rejects non-template props and ignores malformed row_templates (fallback to single)', () => {
+    expect(readSduiRowTemplates({ data_ref: 'x' })).toBeUndefined();
+    expect(readSduiRowTemplates(undefined)).toBeUndefined();
+    expect(
+      readSduiRowTemplates({
+        row_template: template,
+        item_key: 'id',
+        row_templates: [{ row_template: 'nope', item_key: 'id' }],
+      }),
+    ).toEqual([{ row_template: template, item_key: 'id' }]);
+  });
+
+  it('entries feed materializeRowTemplate directly (same source shape)', () => {
+    const entries = readSduiRowTemplates({
+      row_template: template,
+      item_key: 'id',
+      row_templates: [
+        { row_template: [{ id: 't0', type: 'text', props: { text: '{{item.body}}' } }], item_key: 'id' },
+        { row_template: [{ id: 't1', type: 'text', props: { text: '{{item.author.name}}' } }], item_key: 'id' },
+      ],
+    });
+    expect(entries).toHaveLength(2);
+    expect(materializeRowTemplate(entries?.[1] ?? [], item, 3)).toMatchObject([
+      { id: 't1@p-7', props: { text: 'Ana' } },
+    ]);
+  });
+});

package/src/renderer/lib/sdui-row-template.ts

@@ -0,0 +1,153 @@
+import type {
+  SduiBlockWire,
+  SduiRowTemplateEntryWireProps,
+  SduiRowTemplateSetWireProps,
+  SduiRowTemplateWireProps,
+} from '@proulr/sdui-contract';
+import { isSduiRowTemplateEntryWireProps, isSduiRowTemplateWireProps } from '@proulr/sdui-contract';
+
+/**
+ * Materialização de row templates (SDUI 100%): o BFF autorretrata o layout da
+ * linha no wire (`props.row_template` + `props.item_key`, via `<ListRowTemplate>`
+ * do BDC); o híbrido do app clona o subtree por item vivo de `screen.data` e
+ * resolve os bindings `{{item.campo}}` antes de passar ao renderer de blocos.
+ *
+ * Binding syntax: `{{item.field}}`, `{{item.a.b}}` (dot path; segmentos com
+ * `$`/`_`/letras/dígitos/`-`). Substituição em **qualquer** string de prop —
+ * incluindo `action_id` e payloads de action aninhados (objetos/arrays).
+ * Só `item.*` é suportado (não há `{{index}}`). Path não resolvido → string
+ * vazia.
+ *
+ * Ids estáveis: cada bloco clonado ganha sufixo `@<rowKey>`, onde `rowKey` é o
+ * valor de `item_key` do item (dot path; fallback = `index`). Duas renderizações
+ * do mesmo item produzem os mesmos ids (React keys / diffs estáveis).
+ */
+
+/** Fonte do template: ou o objeto de props do hospedeiro, ou só o array de blocos. */
+export type SduiRowTemplateSource =
+  | SduiBlockWire[]
+  | Pick<SduiRowTemplateWireProps, 'row_template' | 'item_key' | 'section'>;
+
+const BINDING_RE = /\{\{\s*item((?:\.[A-Za-z0-9_$-]+)*)\s*\}\}/g;
+
+function lookupDotPath(item: unknown, path: string): unknown {
+  if (path === '') return undefined;
+  let current: unknown = item;
+  for (const segment of path.split('.')) {
+    if (current == null) return undefined;
+    if (Array.isArray(current) && /^\d+$/.test(segment)) {
+      current = current[Number(segment)];
+      continue;
+    }
+    if (typeof current !== 'object') return undefined;
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current;
+}
+
+function stringifyBinding(value: unknown): string {
+  if (value == null) return '';
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return String(value);
+  }
+  return JSON.stringify(value) ?? '';
+}
+
+function resolveString(value: string, item: unknown): string {
+  return value.replace(BINDING_RE, (_match, path: string) =>
+    stringifyBinding(lookupDotPath(item, path.slice(1))),
+  );
+}
+
+/**
+ * Resolve bindings `{{item.*}}` em qualquer string de um valor profundo
+ * (strings, arrays, objetos; chaves não são tocadas). Retorna cópia — nunca
+ * muta a entrada.
+ */
+export function resolveRowTemplateBindings(value: unknown, item: unknown): unknown {
+  if (typeof value === 'string') return resolveString(value, item);
+  if (Array.isArray(value)) return value.map((entry) => resolveRowTemplateBindings(entry, item));
+  if (value && typeof value === 'object') {
+    const out: Record<string, unknown> = {};
+    for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
+      out[key] = resolveRowTemplateBindings(entry, item);
+    }
+    return out;
+  }
+  return value;
+}
+
+function materializeBlock(
+  block: SduiBlockWire,
+  item: unknown,
+  rowKey: string,
+): SduiBlockWire {
+  return {
+    id: `${block.id}@${rowKey}`,
+    type: block.type,
+    props: resolveRowTemplateBindings(block.props ?? {}, item) as Record<string, unknown>,
+    children: (block.children ?? []).map((child) => materializeBlock(child, item, rowKey)),
+  };
+}
+
+/** Lê o template promovido no `props` de um bloco hospedeiro (wire ou domain). */
+export function readSduiRowTemplate(
+  props: Record<string, unknown> | undefined,
+): SduiRowTemplateWireProps | undefined {
+  return isSduiRowTemplateWireProps(props) ? props : undefined;
+}
+
+/**
+ * Lê a lista **ordenada** de templates de um bloco hospedeiro multi-template:
+ * - `props.row_templates` presente e válido → esse array (um entry por
+ *   `<ListRowTemplate>`, cada um com seu `item_key`/`section`);
+ * - senão, fallback: o template único (`row_template` + `item_key` +
+ *   `section?`) como array de comprimento 1 — hosts antigos funcionam
+ *   inalterados;
+ * - props sem template → `undefined`.
+ */
+export function readSduiRowTemplates(
+  props: Record<string, unknown> | undefined,
+): SduiRowTemplateEntryWireProps[] | undefined {
+  if (!isSduiRowTemplateWireProps(props)) return undefined;
+  const set = props as SduiRowTemplateSetWireProps;
+  const templates = set.row_templates;
+  if (
+    Array.isArray(templates) &&
+    templates.length > 0 &&
+    templates.every(isSduiRowTemplateEntryWireProps)
+  ) {
+    return templates;
+  }
+  const single: SduiRowTemplateEntryWireProps = {
+    row_template: set.row_template,
+    item_key: set.item_key,
+  };
+  if (typeof set.section === 'string' && set.section) single.section = set.section;
+  return [single];
+}
+
+/**
+ * Clona profundamente os blocos do template e resolve `{{item.*}}` em todas as
+ * props (incl. action ids e payloads). `template` aceita o objeto
+ * `{ row_template, item_key, section }` (props do hospedeiro) ou o array nu de
+ * blocos. `index` é o fallback de `rowKey` quando `item_key` não resolve.
+ */
+export function materializeRowTemplate(
+  template: SduiRowTemplateSource,
+  item: unknown,
+  index = 0,
+): SduiBlockWire[] {
+  const blocks = Array.isArray(template) ? template : template.row_template ?? [];
+  const itemKey = Array.isArray(template) ? undefined : template.item_key;
+
+  let rowKey = '';
+  if (itemKey) {
+    const raw = lookupDotPath(item, itemKey);
+    if (raw != null && raw !== '') rowKey = stringifyBinding(raw);
+  }
+  if (!rowKey) rowKey = String(index);
+
+  return blocks.map((block) => materializeBlock(block, item, rowKey));
+}

package/src/renderer/sdui-component-registry.tsx

@@ -31,6 +31,13 @@ import {
   SduiProfileCompletionBannerBlock,
   SduiStoryRailBlock,
 } from './blocks/SduiSocialBlocks';
+import {
+  SduiAvatarBlock,
+  SduiContentImageBlock,
+  SduiIconButtonBlock,
+  SduiRowOverflowMenuBlock,
+  SduiVideoBlock,
+} from './blocks/SduiMediaBlocks';
 import {
   SduiChatInboxCapabilitiesBlock,
   SduiEmptyStateBlock,
@@ -44,6 +51,7 @@ import {
 } from './blocks/SduiInboxBlocks';
 import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
 import { SduiQrCodeBlock } from './blocks/SduiQrCodeBlock';
+import { SduiStatTileRowBlock, SduiDataGroupListBlock, SduiVouchListBlock } from './blocks/SduiContentBlocks';
 import {
   SduiAlbumDetailBlock,
   SduiAlbumGridBlock,
@@ -88,11 +96,19 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   native_ad: SduiNativeAdBlock,
   card: SduiCardBlock,
   section_header: SduiSectionHeaderBlock,
+  stat_tile_row: SduiStatTileRowBlock,
+  data_group_list: SduiDataGroupListBlock,
+  vouch_list: SduiVouchListBlock,
   list_item: SduiListItemBlock,
   toggle_row: SduiToggleRowBlock,
   select_row: SduiSelectRowBlock,
   chip: SduiChipBlock,
   chip_row: SduiChipRowBlock,
+  content_image: SduiContentImageBlock,
+  video: SduiVideoBlock,
+  avatar: SduiAvatarBlock,
+  icon_button: SduiIconButtonBlock,
+  row_overflow_menu: SduiRowOverflowMenuBlock,
   segmented_tabs: SduiSegmentedTabsBlock,
   empty_state: SduiEmptyStateBlock,
   inbox_person_row: SduiInboxPersonRowBlock,

package/src/renderer/sdui-hybrid-renderer-context.tsx

@@ -46,6 +46,8 @@ export type SduiNativeBlockRenderProps = {
   block: SduiBlock;
   data: Record<string, unknown>;
   onAction: (actionId: string, vars?: Record<string, string>) => void;
+  /** Nós SDUI já compilados dos blocos filhos do bloco nativo (ex.: corpo do hero). */
+  children?: ReactNode;
   dataRef?: string;
   conversationIdRef?: string;
   peerIdRef?: string;

package/src/renderer/sdui-media-resolver-context.tsx

@@ -0,0 +1,84 @@
+import React, { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { invokeSduiMediaResolver, type SduiMediaResolver } from './lib/sdui-media-uri';
+
+export type { SduiMediaResolver };
+
+/**
+ * Contexto genérico de resolução de mídia (capability do app, não do BFF):
+ * o app provê `(path) => URL` com **download autenticado** (+ signed só se GET
+ * ok). Blocos de mídia do renderer (`content_image`, `avatar`) só consomem
+ * este contexto — a lib nunca conhece buckets, tokens nem paths de produto.
+ *
+ * ```tsx
+ * // proulr-app (shell genérico, fora do RootNavigator):
+ * <SduiMediaResolverProvider resolveMediaUrl={(path) => authenticatedDownloadUrl(path)}>
+ *   <SduiScreenRenderer ... />
+ * </SduiMediaResolverProvider>
+ * ```
+ */
+const SduiMediaResolverContext = createContext<SduiMediaResolver | null>(null);
+
+export function SduiMediaResolverProvider({
+  resolveMediaUrl,
+  children,
+}: {
+  resolveMediaUrl: SduiMediaResolver | null;
+  children: ReactNode;
+}) {
+  return (
+    <SduiMediaResolverContext.Provider value={resolveMediaUrl}>
+      {children}
+    </SduiMediaResolverContext.Provider>
+  );
+}
+
+/** Resolver fornecido pelo app, ou `null` quando a capability está desligada. */
+export function useSduiMediaResolver(): SduiMediaResolver | null {
+  return useContext(SduiMediaResolverContext);
+}
+
+/**
+ * Uri resolvida para um path de mídia. Estados:
+ * - `uri`: URL pronta para o componente de imagem (ou `null`);
+ * - `pending`: resolver assíncrono ainda em voo — o bloco mantém placeholder
+ *   de tamanho estável (anti-flicker: sem animação de opacidade no mount);
+ * - `settled`: a resolução terminou (sucesso, vazio ou erro). Antes do primeiro
+ *   settle, `settled=false` — o bloco mantém placeholder em vez de colapsar
+ *   (o `useEffect` roda pós-mount; sem este flag renderizaria `null` por um
+ *   frame e causaria flicker de layout).
+ * Sem resolver / path vazio / resolução vazia / erro → `uri: null, settled: true`.
+ */
+export function useSduiMediaUri(path: string): {
+  uri: string | null;
+  pending: boolean;
+  settled: boolean;
+} {
+  const resolver = useSduiMediaResolver();
+  const [state, setState] = useState<{ uri: string | null; pending: boolean; settled: boolean }>({
+    uri: null,
+    pending: false,
+    settled: false,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+    const result = invokeSduiMediaResolver(resolver, path);
+    if (result === null) {
+      setState({ uri: null, pending: false, settled: true });
+      return;
+    }
+    if (typeof result === 'string') {
+      setState({ uri: result, pending: false, settled: true });
+      return;
+    }
+    setState({ uri: null, pending: true, settled: false });
+    result.then((uri) => {
+      if (!cancelled) setState({ uri, pending: false, settled: true });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [resolver, path]);
+
+  return state;
+}

package/src/renderer/sdui-video-player-context.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import type { SduiVideoParsed } from './lib/sdui-media-block-props';
+
+/**
+ * Slot injetável de playback de vídeo (capability do **app**, não da lib):
+ * o bloco `video` do renderer resolve `path`/`poster_path` via o mesmo
+ * `SduiMediaResolverContext` (download autenticado continua no app) e delega
+ * a renderização do player a este contexto — o app pluga `expo-video` quando
+ * quiser. **Sem provider**, o bloco renderiza um frame estático com o poster
+ * (still via resolver) — nunca URL/path de produto hardcoded.
+ *
+ * ```tsx
+ * // proulr-app (shell genérico):
+ * <SduiVideoPlayerProvider renderVideoPlayer={ExpoVideoPlayerSlot}>
+ *   <SduiScreenRenderer ... />
+ * </SduiVideoPlayerProvider>
+ * ```
+ */
+export type SduiVideoPlayerProps = {
+  block: SduiBlock;
+  data: Record<string, unknown>;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+  /** Frame já dimensionado pela lib (width/height/aspect/corner/testId do wire). */
+  parsed: SduiVideoParsed;
+  /** URI do vídeo resolvida pelo `SduiMediaResolver` (null enquanto pendente/sem resolver). */
+  uri: string | null;
+  pending: boolean;
+  settled: boolean;
+  /** URI do poster resolvida (null quando não há `poster_path` ou não resolve). */
+  posterUri: string | null;
+};
+
+export type SduiVideoPlayer = (props: SduiVideoPlayerProps) => ReactNode;
+
+const SduiVideoPlayerContext = createContext<SduiVideoPlayer | null>(null);
+
+export function SduiVideoPlayerProvider({
+  renderVideoPlayer,
+  children,
+}: {
+  renderVideoPlayer: SduiVideoPlayer | null;
+  children: ReactNode;
+}) {
+  return (
+    <SduiVideoPlayerContext.Provider value={renderVideoPlayer}>
+      {children}
+    </SduiVideoPlayerContext.Provider>
+  );
+}
+
+/** Player fornecido pelo app, ou `null` → o bloco usa o frame de poster default. */
+export function useSduiVideoPlayer(): SduiVideoPlayer | null {
+  return useContext(SduiVideoPlayerContext);
+}

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

@@ -59,6 +59,8 @@ export function resolveViewStyleProps(
     borderColor: resolveColor(style.border_color),
     opacity: style.opacity,
     flex: style.flex,
+    // Sem isso um filho `flex` de Row não encolhe abaixo do conteúdo e estoura a linha.
+    minWidth: style.flex != null ? 0 : undefined,
     alignItems: style.align_items,
   };
 }

package/src/renderer/ui/Chip.tsx

@@ -18,36 +18,53 @@ const CHIP_HIT_SLOP = { top: 4, bottom: 4, left: 2, right: 2 };
 export function Chip({
   label,
   active,
+  tone,
   onPress,
   disabled,
   icon,
   testID,
+  readOnly,
 }: {
   label: string;
   active?: boolean;
+  /** Cor de destaque da pílula de conteúdo: 'primary' (realce) ou 'secondary' (relacionado). */
+  tone?: 'primary' | 'secondary';
   onPress?: () => void;
   disabled?: boolean;
   icon?: string;
   testID?: string;
+  /** Tag de conteúdo sem ação: não é botão nem aparece esmaecida como desabilitada. */
+  readOnly?: boolean;
 }) {
+  const toneColor = tone === 'secondary' ? m3Colors.secondary : m3Colors.primary;
+  const toneBorder = tone === 'secondary' ? m3Colors.secondaryContainer : m3Colors.primaryContainer;
   const containerStyle = active
     ? { backgroundColor: m3Colors.inverseSurface, borderColor: m3Colors.inverseSurface }
-    : { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder };
+    : tone
+      ? { backgroundColor: toneBorder, borderColor: toneColor }
+      : { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder };
 
-  const textColor = disabled ? m3Colors.onDisabled : active ? colors.headerStart : colors.textOnAccent;
+  const textColor = disabled && !readOnly
+    ? m3Colors.onDisabled
+    : active
+      ? colors.headerStart
+      : tone
+        ? toneColor
+        : colors.textOnAccent;
   const iconName = icon && isAppIconName(icon) ? icon : null;
   const focus = useFocusRing();
 
   return (
     <Pressable
       testID={testID}
-      accessibilityRole="button"
+      accessibilityRole={readOnly ? 'text' : 'button'}
       accessibilityLabel={label}
-      accessibilityState={{ selected: Boolean(active), disabled: Boolean(disabled) }}
-      onPress={onPress}
-      onFocus={focus.onFocus}
-      onBlur={focus.onBlur}
-      disabled={disabled}
+      accessibilityState={readOnly ? undefined : { selected: Boolean(active), disabled: Boolean(disabled) }}
+      onPress={readOnly ? undefined : onPress}
+      onFocus={readOnly ? undefined : focus.onFocus}
+      onBlur={readOnly ? undefined : focus.onBlur}
+      focusable={!readOnly}
+      disabled={disabled || readOnly}
       hitSlop={CHIP_HIT_SLOP}
       style={({ pressed }) => [
         styles.chip,

package/src/renderer/ui/ChipRow.tsx

@@ -4,17 +4,23 @@ import { spacing } from '../theme/proulr-theme';
 
 type ChipRowProps = {
   children: React.ReactNode;
+  /** Quebra em várias linhas (todas visíveis) em vez de rolar para o lado. */
+  wrap?: boolean;
 };
 
 /**
  * Linha horizontal de pílulas — a mesma fileira do Caçar, do hub do chat e de
  * qualquer seletor de opções. O encaixe horizontal é do invólucro que chama.
  */
-export function ChipRow({ children }: ChipRowProps) {
+export function ChipRow({ children, wrap = false }: ChipRowProps) {
   if (!children) {
     return <View style={styles.content} />;
   }
 
+  if (wrap) {
+    return <View style={styles.wrap}>{children}</View>;
+  }
+
   return (
     <ScrollView
       horizontal
@@ -41,4 +47,11 @@ const styles = StyleSheet.create({
     gap: spacing.xs,
     paddingHorizontal: spacing.sm,
   },
+  wrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    gap: spacing.xs,
+  },
 });