@proulr/sdui-components 0.1.88 → 0.1.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.88",
+  "version": "0.1.91",
   "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.test.ts

@@ -41,6 +41,17 @@ describe('compileBdcToWire', () => {
     expect(wire.blocks[0].props).toMatchObject({ action_id: 'go', label: 'Go' });
   });
 
+  it('keeps grid/wrap layout props of content blocks on the wire', () => {
+    const wire = compileBdcToWire(
+      screen({ id: 'demo.home' }, [
+        { type: 'stat_tile_row', props: { itemsRef: 'content.health', columns: 2, align: 'start' }, children: [] },
+        { type: 'chip_row', props: { itemsRef: 'content.tribes', layout: 'wrap' }, children: [] },
+      ]),
+    );
+    expect(wire.blocks[0].props).toMatchObject({ items_ref: 'content.health', columns: 2, align: 'start' });
+    expect(wire.blocks[1].props).toMatchObject({ items_ref: 'content.tribes', layout: 'wrap' });
+  });
+
   it('rejects non-screen roots', () => {
     expect(() =>
       compileBdcToWire({ type: 'stack', props: {}, children: [] }),

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/bdc-components.test.ts

@@ -55,6 +55,7 @@ import {
   Scroll,
   SectionHeader,
   Spacer,
+  StatTileRow,
   Text,
   ToggleRow,
   screenProps,
@@ -75,6 +76,10 @@ describe('bdc ui components', () => {
     expect(SectionHeader({ title: 'T' }).type).toBe('section_header');
     expect(ListItem({ title: 'Item' }).type).toBe('list_item');
     expect(ToggleRow({ label: 'On' }).type).toBe('toggle_row');
+    expect(StatTileRow({ itemsRef: 'content.health', columns: 2, align: 'start' })).toMatchObject({
+      type: 'stat_tile_row',
+      props: { itemsRef: 'content.health', columns: 2, align: 'start' },
+    });
     expect(screenProps({ id: 'x' })).toEqual({ id: 'x' });
   });
 });
@@ -83,6 +88,10 @@ describe('bdc discover/forms/social/inbox/native', () => {
   it('builds discover and form blocks', () => {
     expect(Chip({ label: 'All' }).type).toBe('chip');
     expect(ChipRow({}).type).toBe('chip_row');
+    expect(ChipRow({ itemsRef: 'content.tribes', layout: 'wrap' }).props).toMatchObject({
+      itemsRef: 'content.tribes',
+      layout: 'wrap',
+    });
     expect(DiscoverGrid({ itemsRef: 'items' }).type).toBe('discover_grid');
     expect(DiscoverProfileCard({ profileRef: 'p' }).type).toBe('discover_profile_card');
     expect(DiscoverMap({}).type).toBe('discover_map');

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,12 @@ 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;
+  /** `wrap` quebra em linhas (todas visíveis); padrão rola na horizontal. */
+  layout?: 'scroll' | 'wrap';
+};
 
 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 ?? [] };
+};