@proulr/sdui-components 0.1.88 → 0.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@proulr/sdui-contract": "^0.1.17",
+    "@proulr/sdui-contract": "^0.1.19",
     "react-native-qrcode-svg": "^6.3.21"
   },
   "peerDependencies": {

package/src/bdc/compile-bdc-row-template.test.ts

@@ -0,0 +1,179 @@
+import { describe, expect, it } from 'vitest';
+import { compileBdcToWire } from './compile-bdc-to-wire';
+import { ListRowTemplate } from './components/list';
+import { Button, Column, Screen, Text } from './components/ui';
+import { SocialPostFeed } from './components/native-blocks';
+import type { BdcElement } from './jsx-runtime';
+
+function screen(children: BdcElement[]): BdcElement {
+  return Screen({ id: 'social.feed', data: { posts: [{ id: 'p1' }] }, children });
+}
+
+describe('compileBdcToWire — row templates', () => {
+  it('hoists <ListRowTemplate> subtree into host props.row_template', () => {
+    const host = SocialPostFeed({
+      dataRef: 'social.posts',
+      children: [
+        ListRowTemplate({
+          itemKey: 'id',
+          section: 'posts',
+          children: [
+            Column({
+              children: [
+                Text({ text: '{{item.body}}' }),
+                Button({ actionId: 'open_post_{{item.id}}', label: 'Abrir' }),
+              ],
+            }),
+          ],
+        }),
+      ],
+    });
+
+    const wire = compileBdcToWire(screen([host]));
+    const feed = wire.blocks[0];
+
+    expect(feed.type).toBe('social_post_feed');
+    expect(feed.props).toMatchObject({
+      data_ref: 'social.posts',
+      item_key: 'id',
+      section: 'posts',
+    });
+
+    // Template element never reaches the wire as a child block.
+    expect(feed.children).toEqual([]);
+
+    const rows = feed.props?.row_template as BdcElement[];
+    expect(Array.isArray(rows)).toBe(true);
+    expect(rows).toHaveLength(1);
+    expect(rows[0]).toMatchObject({ type: 'column', id: '0.row_template.0.0' });
+    // Bindings stay verbatim in the wire — substitution happens at materialize time.
+    const inner = (rows[0] as unknown as BdcElement).children;
+    expect(inner[0].props.text).toBe('{{item.body}}');
+    expect(inner[1].props.action_id).toBe('open_post_{{item.id}}');
+  });
+
+  it('defaults item_key to "id" and omits section when not set', () => {
+    const wire = compileBdcToWire(
+      screen([
+        SocialPostFeed({
+          children: [ListRowTemplate({ children: [Text({ text: 'x' })] })],
+        }),
+      ]),
+    );
+    expect(wire.blocks[0]?.props).toMatchObject({ item_key: 'id' });
+    expect('section' in (wire.blocks[0]?.props ?? {})).toBe(false);
+  });
+
+  it('single-template host: wire is byte-identical to before (no row_templates key)', () => {
+    const host = SocialPostFeed({
+      dataRef: 'social.posts',
+      children: [
+        Text({ text: 'header' }),
+        ListRowTemplate({ itemKey: 'id', children: [Text({ text: 'a' })] }),
+      ],
+    });
+    const wire = compileBdcToWire(screen([host]));
+    const feed = wire.blocks[0];
+    expect(feed.children?.map((c) => c.props?.text)).toEqual(['header']);
+    expect(feed.props?.row_template).toHaveLength(1);
+    expect('row_templates' in (feed.props ?? {})).toBe(false);
+    expect(feed.props).toMatchObject({ item_key: 'id' });
+  });
+
+  it('multi-template host: row_templates is ordered (own item_key/section each), row_template stays the FIRST', () => {
+    const host = SocialPostFeed({
+      dataRef: 'social.posts',
+      children: [
+        ListRowTemplate({ itemKey: 'id', section: 'posts', children: [Text({ text: 'a' })] }),
+        ListRowTemplate({ itemKey: 'comment_id', section: 'comments', children: [Text({ text: 'b' })] }),
+      ],
+    });
+    const wire = compileBdcToWire(screen([host]));
+    const feed = wire.blocks[0];
+
+    // Backward compat: single-shape props describe the first template.
+    expect(feed.props).toMatchObject({ item_key: 'id', section: 'posts' });
+    expect(feed.props?.row_template).toHaveLength(1);
+    expect(((feed.props?.row_template as BdcElement[])[0]).props.text).toBe('a');
+
+    const set = feed.props?.row_templates as Record<string, unknown>[];
+    expect(Array.isArray(set)).toBe(true);
+    expect(set).toHaveLength(2);
+    expect(set[0]).toMatchObject({ item_key: 'id', section: 'posts' });
+    expect(set[1]).toMatchObject({ item_key: 'comment_id', section: 'comments' });
+    expect(set[1].row_template).toHaveLength(1);
+    expect((set[1].row_template as BdcElement[])[0].props.text).toBe('b');
+  });
+
+  it('template ids stay unique via host path + template index', () => {
+    const host = SocialPostFeed({
+      children: [
+        ListRowTemplate({ itemKey: 'id', children: [Text({ text: 'a' })] }),
+        ListRowTemplate({ itemKey: 'id', children: [Text({ text: 'b' }), Text({ text: 'c' })] }),
+      ],
+    });
+    const wire = compileBdcToWire(screen([host]));
+    const set = wire.blocks[0]?.props?.row_templates as { row_template: { id: string }[] }[];
+    const ids = set.flatMap((entry) => entry.row_template.map((block) => block.id));
+    expect(ids).toEqual(['0.row_template.0.0', '0.row_template.1.0', '0.row_template.1.1']);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it('template entry omits section when not set; item_key defaults to "id"', () => {
+    const host = SocialPostFeed({
+      children: [
+        ListRowTemplate({ children: [Text({ text: 'a' })] }),
+        ListRowTemplate({ itemKey: 'id', section: 'b', children: [Text({ text: 'b' })] }),
+      ],
+    });
+    const wire = compileBdcToWire(screen([host]));
+    const set = wire.blocks[0]?.props?.row_templates as Record<string, unknown>[];
+    expect(set[0]).toMatchObject({ item_key: 'id' });
+    expect('section' in set[0]).toBe(false);
+    expect(set[1]).toMatchObject({ item_key: 'id', section: 'b' });
+    // First template has no section → host-level `section` stays absent (compat).
+    expect('section' in (wire.blocks[0]?.props ?? {})).toBe(false);
+  });
+
+  it('flattens fragments wrapping template rows', () => {
+    const host = SocialPostFeed({
+      children: [
+        {
+          type: 'list_row_template',
+          props: { item_key: 'id' },
+          children: [
+            {
+              type: '_fragment',
+              props: {},
+              children: [{ type: 'text', props: { text: '{{item.a.b}}' }, children: [] }],
+            },
+          ],
+        },
+      ],
+    });
+    const wire = compileBdcToWire(screen([host]));
+    const rows = wire.blocks[0]?.props?.row_template;
+    expect(rows).toHaveLength(1);
+    expect((rows as unknown[])[0]).toMatchObject({ type: 'text', props: { text: '{{item.a.b}}' } });
+  });
+
+  it('supports templates inside any block (generic children handling), e.g. Column host', () => {
+    const host = Column({
+      children: [ListRowTemplate({ itemKey: 'id', children: [Text({ text: 'r' })] })],
+    });
+    const wire = compileBdcToWire(screen([host]));
+    expect(wire.blocks[0]?.props).toMatchObject({ item_key: 'id' });
+    expect(wire.blocks[0]?.props?.row_template).toHaveLength(1);
+    expect(wire.blocks[0]?.children).toEqual([]);
+  });
+
+  it('blocks without row_template compile exactly as before (backward compat)', () => {
+    const wire = compileBdcToWire(
+      screen([Column({ children: [Text({ text: 'plain' })] })]),
+    );
+    const col = wire.blocks[0];
+    expect(col.props).not.toHaveProperty('row_template');
+    expect(col.props).not.toHaveProperty('item_key');
+    expect(col.children).toHaveLength(1);
+  });
+});

package/src/bdc/compile-bdc-to-wire.ts

@@ -74,6 +74,57 @@ function flattenBlockChildren(children: BdcElement[]): BdcElement[] {
   return out;
 }
 
+/** Tipo BDC de `<ListRowTemplate>` — promoted para `props.row_template` do hospedeiro. */
+const LIST_ROW_TEMPLATE_TYPE = 'list_row_template';
+
+/** Um template promovido: blocos da linha + item_key/section próprios. */
+type RowTemplateEntry = {
+  row_template: SduiBlockWire[];
+  item_key: string;
+  section?: string;
+};
+
+function hoistRowTemplates(
+  blockChildren: BdcElement[],
+  props: Record<string, unknown>,
+  path: string,
+): BdcElement[] {
+  const templates = blockChildren.filter((child) => child.type === LIST_ROW_TEMPLATE_TYPE);
+  if (templates.length === 0) return blockChildren;
+
+  const entries: RowTemplateEntry[] = templates.map((template, templateIndex) => {
+    const rowBlocks: SduiBlockWire[] = [];
+    flattenBlockChildren(template.children).forEach((child, childIndex) => {
+      rowBlocks.push(mapBlock(child, `${path}.row_template.${templateIndex}.${childIndex}`));
+    });
+    const itemKey = template.props.item_key ?? template.props.itemKey;
+    const entry: RowTemplateEntry = {
+      row_template: rowBlocks,
+      item_key: typeof itemKey === 'string' && itemKey ? itemKey : 'id',
+    };
+    if (typeof template.props.section === 'string' && template.props.section) {
+      entry.section = template.props.section;
+    }
+    return entry;
+  });
+
+  // Backward compat: as props singulares descrevem SEMPRE o primeiro template —
+  // leitores antigos (`readSduiRowTemplate`) continuam funcionando inalterados.
+  props.row_template = entries[0].row_template;
+  props.item_key = entries[0].item_key;
+  if (entries[0].section !== undefined) {
+    props.section = entries[0].section;
+  }
+  // Host multi-template: lista ordenada, um entry por template (cada um com
+  // seu `item_key`/`section`). Hosts de template único mantém o wire idêntico
+  // (sem `row_templates`). Leitura: `readSduiRowTemplates` no renderer.
+  if (entries.length > 1) {
+    props.row_templates = entries;
+  }
+
+  return blockChildren.filter((child) => child.type !== LIST_ROW_TEMPLATE_TYPE);
+}
+
 function mapBlock(element: BdcElement, path: string): SduiBlockWire {
   if (element.type === '_text_node') {
     return { id: path, type: 'text', props: { text: String(element.props.value ?? '') } };
@@ -89,7 +140,7 @@ function mapBlock(element: BdcElement, path: string): SduiBlockWire {
     props.text = textFromChildren(element.children);
   }
 
-  const blockChildren = flattenBlockChildren(element.children);
+  const blockChildren = hoistRowTemplates(flattenBlockChildren(element.children), props, path);
 
   return {
     id: typeof element.props.id === 'string' ? element.props.id : path,

package/src/bdc/components/discover.tsx

@@ -14,6 +14,7 @@ function layoutBlock(type: string, props: LayoutProps): BdcElement {
 type ChipProps = LayoutProps & {
   label: string;
   glyph?: string;
+  tone?: 'primary' | 'secondary';
   actionId?: string;
   actionParams?: Record<string, string>;
   active?: boolean;
@@ -21,7 +22,10 @@ type ChipProps = LayoutProps & {
 
 export const Chip: BdcComponent = (props) => layoutBlock('chip', props as ChipProps);
 
-type ChipRowProps = LayoutProps;
+type ChipRowProps = LayoutProps & {
+  /** Caminho em `screen.data` para chips dinâmicos: `{ label, glyph?, tone?, actionId?, actionParams? }[]`. */
+  itemsRef?: string;
+};
 
 export const ChipRow: BdcComponent = (props) => layoutBlock('chip_row', props as ChipRowProps);
 

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

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { ListRowTemplate } from './list';
+import { Text } from './ui';
+import type { BdcElement } from '../jsx-runtime';
+
+function el(type: string, props: Record<string, unknown>, children: BdcElement[] = []): BdcElement {
+  return { type, props, children };
+}
+
+describe('ListRowTemplate (BDC)', () => {
+  it('normalizes itemKey to wire item_key with default id', () => {
+    const node = ListRowTemplate({ itemKey: 'post_id', children: [el('text', { text: 'x' })] });
+    expect(node.type).toBe('list_row_template');
+    expect(node.props.item_key).toBe('post_id');
+    expect(node.children).toHaveLength(1);
+
+    const defaulted = ListRowTemplate({});
+    expect(defaulted.props.item_key).toBe('id');
+    expect(defaulted.children).toEqual([]);
+  });
+
+  it('accepts snake_case item_key and hoists section only when set', () => {
+    const withSection = ListRowTemplate({ item_key: 'id', section: 'comments' });
+    expect(withSection.props.item_key).toBe('id');
+    expect(withSection.props.section).toBe('comments');
+
+    const withoutSection = ListRowTemplate({ item_key: 'id', section: '' });
+    expect('section' in withoutSection.props).toBe(false);
+  });
+
+  it('composes with BDC children', () => {
+    const row = Text({ text: '{{item.body}}' });
+    const node = ListRowTemplate({ itemKey: 'id', children: [row] });
+    expect(node.children[0]?.props.text).toBe('{{item.body}}');
+  });
+});

package/src/bdc/components/list.tsx

@@ -0,0 +1,62 @@
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+/**
+ * `<ListRowTemplate>` — marca de autoria (BFF) que transforma o subtree de
+ * filhos num **row template** do bloco hospedeiro (híbrido nativo: `SocialPostFeed`,
+ * `ThoughtFeed`, `PostComments`, `SocialProfile`, `ProfileView`, `ProfileSelf`,
+ * `StoryViewersPanel`, `RightNowFeed`, `AlbumGrid`, …).
+ *
+ * `compileBdcToWire` remove o elemento dos `children` do hospedeiro e promove
+ * no `props` dele (ver `SduiRowTemplateWireProps` em `@proulr/sdui-contract`):
+ *
+ * ```
+ * row_template: SduiBlockWire[]  // subtree compilado (wire normal, snake_case)
+ * item_key: string               // campo identificador de cada item (default 'id'; dot path ok)
+ * section?: string               // marcador opcional de seção (só quando definido)
+ * ```
+ *
+ * Bindings: qualquer string em props do subtree (texto, imagem, `actionId`,
+ * payloads de action aninhados) pode usar `{{item.campo}}` / `{{item.a.b}}`;
+ * o app resolve em `materializeRowTemplate` (renderer) por item vivo do
+ * `screen.data`. Path não resolvido → string vazia.
+ *
+ * **Multi-template:** cada `<ListRowTemplate>` carrega o **próprio**
+ * `item_key`/`section`. Com dois ou mais templates no mesmo hospedeiro, o
+ * `compileBdcToWire` emite `props.row_templates` (lista ordenada, um entry por
+ * template) e mantém `row_template`/`item_key`/`section` = primeiro template
+ * (backward compat; leitura via `readSduiRowTemplates` no renderer).
+ *
+ * Restrições documentadas:
+ * - deve ser **filho direto** do bloco hospedeiro;
+ * - `item_key`/`section` são **por template** (default `item_key` = `'id'`);
+ * - nunca chega ao wire como bloco renderizável (não registrar no renderer).
+ *
+ * @example
+ * <SocialPostFeed dataRef="social.posts">
+ *   <ListRowTemplate itemKey="id">
+ *     <Column>
+ *       <Text text="{{item.author.name}}" />
+ *       <Button label="Abrir" actionId="open_post_{{item.id}}" />
+ *     </Column>
+ *   </ListRowTemplate>
+ * </SocialPostFeed>
+ */
+type ListRowTemplateProps = {
+  id?: string;
+  /** Campo identificador de cada item vivo (ex.: `'id'`, `'post.id'`). Default `'id'`. */
+  itemKey?: string;
+  /** Aceita também a forma snake_case do wire. */
+  item_key?: string;
+  /** Marcador opcional de seção para feeds com múltiplas seções. */
+  section?: string;
+  children?: BdcElement[];
+};
+
+export const ListRowTemplate: BdcComponent = (props) => {
+  const { id, itemKey, item_key: itemKeySnake, section, children } = props as ListRowTemplateProps;
+  const itemKeyWire = itemKey ?? itemKeySnake ?? 'id';
+  const elementProps: Record<string, unknown> = { item_key: itemKeyWire };
+  if (typeof id === 'string') elementProps.id = id;
+  if (typeof section === 'string' && section) elementProps.section = section;
+  return { type: 'list_row_template', props: elementProps, children: children ?? [] };
+};

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');
+  });
+});