@proulr/sdui-components 0.1.90 → 0.1.92

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.90",
+  "version": "0.1.92",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",

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/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

@@ -25,6 +25,8 @@ export const Chip: BdcComponent = (props) => layoutBlock('chip', props as ChipPr
 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/ui.tsx

@@ -11,6 +11,8 @@ type LayoutProps = {
   gap?: number | string;
   padding?: number | string;
   height?: number;
+  /** Spacer: ocupa o espaço livre do Row/Column pai (em vez de `height`). */
+  flex?: number;
   variant?: string;
   style?: StyleWire;
   children?: BdcElement[];
@@ -37,6 +39,8 @@ export const Spacer: BdcComponent = (props) => layoutBlock('spacer', props as La
 type TextProps = LayoutProps & {
   text?: string;
   variant?: 'headline' | 'title' | 'body' | 'label';
+  /** Torna o texto tocável (link) sem o min-height de um Button. */
+  actionId?: string;
 };
 
 export const Text: BdcComponent = (props) => layoutBlock('text', props as TextProps);
@@ -97,8 +101,12 @@ 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 }[]`. */
+  /** Caminho em `screen.data` para o array de tiles: `{ icon, value, label, action_id?, action_params? }[]`. */
   itemsRef?: string;
+  /** Tiles por linha (grade); padrão = todos numa linha só. */
+  columns?: number;
+  /** `start` = card alinhado à esquerda (valor em até 2 linhas); padrão centralizado. */
+  align?: 'center' | 'start';
 };
 
 /** Linha genérica de tiles de métrica (ícone + valor + rótulo). Reusável em qualquer tela. */

package/src/renderer/SduiScreenRenderer.tsx

@@ -8,6 +8,8 @@ import { SduiLayoutDebugFrame } from './sdui-layout-debug';
 type Props = {
   screen: SduiScreen;
   onAction: (actionId: string, vars?: Record<string, string>) => void;
+  /** Host já decidiu a coluna (ou a dispensou: tela self-managed / rail) — sem teto aqui. */
+  fillWidth?: boolean;
 };
 
 /** Blocos overlay (FAB etc.) — não competem por flex com o Scroll. */
@@ -38,9 +40,16 @@ const SduiScreenBlock = memo(function SduiScreenBlock({ block, data, onAction }:
   );
 });
 
-export const SduiScreenRenderer = memo(function SduiScreenRenderer({ screen, onAction }: Props) {
+export const SduiScreenRenderer = memo(function SduiScreenRenderer({
+  screen,
+  onAction,
+  fillWidth = false,
+}: Props) {
   return (
-    <SduiLayoutDebugFrame layer="renderer" style={styles.screen}>
+    <SduiLayoutDebugFrame
+      layer="renderer"
+      style={[styles.screen, fillWidth ? styles.screenFillWidth : null]}
+    >
       {screen.blocks.map((block) => (
         <SduiScreenBlock key={block.id} block={block} data={screen.data} onAction={onAction} />
       ))}
@@ -62,6 +71,10 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     backgroundColor: colors.bg,
   },
+  screenFillWidth: {
+    maxWidth: '100%',
+    alignSelf: 'stretch',
+  },
   block: { flex: 1, minHeight: 0 },
   overlayBlock: {
     ...StyleSheet.absoluteFill,

package/src/renderer/blocks/SduiContentBlocks.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Pressable, 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';
@@ -33,24 +33,100 @@ function toIcon(value: unknown): AppIconName | undefined {
 
 /* ── stat_tile_row ─────────────────────────────────────────────────────────── */
 
-type StatTile = { icon?: AppIconName; value: string; label: string };
+type StatTile = {
+  icon?: AppIconName;
+  value: string;
+  label: string;
+  actionId?: string;
+  actionParams?: Record<string, string>;
+};
+
+function chunk<T>(items: T[], size: number): T[][] {
+  const rows: T[][] = [];
+  for (let i = 0; i < items.length; i += size) rows.push(items.slice(i, i + size));
+  return rows;
+}
+
+function StatTileView({
+  tile,
+  card,
+  onAction,
+}: {
+  tile: StatTile;
+  card: boolean;
+  onAction: SduiBlockRenderProps['onAction'];
+}) {
+  const content = card ? (
+    <>
+      <View style={styles.cardHead}>
+        {tile.icon ? (
+          <View style={styles.cardIcon}>
+            <AppIcon name={tile.icon} size={16} color={m3Colors.primary} />
+          </View>
+        ) : null}
+        {tile.actionId ? <AppIcon name="arrow-up-right" size={16} color={m3Colors.onSurfaceVariant} /> : null}
+      </View>
+      <Text style={styles.cardValue} numberOfLines={2}>{tile.value}</Text>
+      <Text style={styles.label} numberOfLines={1}>{tile.label}</Text>
+    </>
+  ) : (
+    <>
+      {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>
+    </>
+  );
+  const tileStyle = card ? styles.card : styles.tile;
+  const actionId = tile.actionId;
+  if (!actionId) return <View style={tileStyle}>{content}</View>;
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={`${tile.label} ${tile.value}`.trim()}
+      onPress={() => onAction(actionId, tile.actionParams)}
+      style={({ pressed }) => [tileStyle, card && styles.cardLink, pressed && styles.pressed]}
+    >
+      {content}
+    </Pressable>
+  );
+}
 
 /** Tiles genéricos de métrica (ícone + valor + rótulo) — layout vem do wire, regra do BFF. */
-export function SduiStatTileRowBlock({ block, data }: SduiBlockRenderProps) {
+export function SduiStatTileRowBlock({ block, data, onAction }: 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) }))
+    .map((row) => ({
+      icon: toIcon(row.icon),
+      value: toText(row.value),
+      label: toText(row.label),
+      actionId: typeof row.action_id === 'string' && row.action_id ? row.action_id : undefined,
+      actionParams:
+        row.action_params && typeof row.action_params === 'object'
+          ? (row.action_params as Record<string, string>)
+          : undefined,
+    }))
     .filter((tile) => tile.value || tile.label);
   if (tiles.length === 0) return null;
 
+  const columnsProp = block.props.columns;
+  const columns =
+    typeof columnsProp === 'number' && Number.isInteger(columnsProp) && columnsProp > 0
+      ? columnsProp
+      : tiles.length;
+  const card = block.props.align === 'start';
+  const rows = chunk(tiles, columns);
+
   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 style={styles.grid} accessibilityRole="list">
+      {rows.map((row, rIndex) => (
+        <View key={`row-${rIndex}`} style={styles.row}>
+          {row.map((tile, index) => (
+            <StatTileView key={`${tile.label}-${index}`} tile={tile} card={card} onAction={onAction} />
+          ))}
+          {Array.from({ length: columns - row.length }, (_, pad) => (
+            <View key={`pad-${pad}`} style={styles.pad} />
+          ))}
         </View>
       ))}
     </View>
@@ -136,7 +212,9 @@ export function SduiVouchListBlock({ block, data }: SduiBlockRenderProps) {
 }
 
 const styles = StyleSheet.create({
+  grid: { gap: spacing.sm },
   row: { flexDirection: 'row', gap: spacing.sm },
+  pad: { flex: 1 },
   tile: {
     flex: 1,
     minHeight: 64,
@@ -152,6 +230,29 @@ const styles = StyleSheet.create({
   },
   value: { ...m3Type.title, color: m3Colors.onSurface, fontFamily: fonts.extrabold },
   label: { ...m3Type.labelSmall, color: m3Colors.onSurfaceVariant },
+  card: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 92,
+    borderRadius: m3Shape.cornerMedium,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderWidth: 1,
+    borderColor: m3Colors.outlineVariant,
+    gap: spacing.xs,
+    padding: spacing.sm + 4,
+  },
+  cardLink: { borderColor: m3Colors.outlineInteractive },
+  cardHead: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  cardIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: m3Shape.cornerSmall,
+    backgroundColor: m3Colors.surfaceContainerHighest,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardValue: { ...m3Type.body, color: m3Colors.onSurface, fontFamily: fonts.bold },
+  pressed: { opacity: 0.85 },
 
   groups: { gap: spacing.md },
   group: {

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -299,11 +299,12 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
 
 export function SduiChipRowBlock({ block, data, children, onAction }: SduiBlockRenderProps) {
   const itemsRef = readStringProp(block, 'items_ref');
+  const wrap = readStringProp(block, 'layout') === 'wrap';
   if (itemsRef) {
     const raw = resolveDataRef(data, itemsRef);
     const items = Array.isArray(raw) ? raw : [];
     return (
-      <ChipRow>
+      <ChipRow wrap={wrap}>
         {items.map((item, index) => {
           if (!item || typeof item !== 'object') return null;
           const row = item as Record<string, unknown>;
@@ -323,7 +324,7 @@ export function SduiChipRowBlock({ block, data, children, onAction }: SduiBlockR
               label={label}
               icon={glyph}
               tone={tone}
-              disabled={!actionId}
+              readOnly={!actionId}
               onPress={() => actionId && onAction(actionId, actionParams)}
             />
           );
@@ -331,7 +332,7 @@ export function SduiChipRowBlock({ block, data, children, onAction }: SduiBlockR
       </ChipRow>
     );
   }
-  return <ChipRow>{children}</ChipRow>;
+  return <ChipRow wrap={wrap}>{children}</ChipRow>;
 }
 
 export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderProps) {

package/src/renderer/blocks/SduiPrimitiveBlocks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { AppButton } from '../ui/AppButton';
 import { AppIcon, isAppIconName } from '../ui/app-icon';
@@ -22,16 +22,18 @@ export type SduiBlockRenderProps = {
 
 const textVariants = ['headline', 'title', 'body', 'label'] as const;
 
-export function SduiTextBlock({ block }: SduiBlockRenderProps) {
+export function SduiTextBlock({ block, onAction }: SduiBlockRenderProps) {
   const text = typeof block.props.text === 'string' ? block.props.text : '';
   const variant =
     typeof block.props.variant === 'string' &&
     (textVariants as readonly string[]).includes(block.props.variant)
       ? block.props.variant
       : 'body';
+  const actionId = typeof block.props.action_id === 'string' ? block.props.action_id : '';
 
-  return (
+  const label = (
     <Text
+      numberOfLines={actionId ? 1 : undefined}
       style={[
         { color: colors.onSurface },
         resolveTextStyleProps(block.props.style as Record<string, unknown>, variant),
@@ -40,6 +42,19 @@ export function SduiTextBlock({ block }: SduiBlockRenderProps) {
       {text}
     </Text>
   );
+  if (!actionId) return label;
+
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={text}
+      hitSlop={spacing.xs}
+      onPress={() => onAction(actionId)}
+      style={styles.textLink}
+    >
+      {label}
+    </Pressable>
+  );
 }
 
 export function SduiColumnBlock({ block, children }: SduiBlockRenderProps) {
@@ -164,6 +179,9 @@ export function SduiIconBlock({ block }: SduiBlockRenderProps) {
 }
 
 export function SduiSpacerBlock({ block }: SduiBlockRenderProps) {
+  if (typeof block.props.flex === 'number') {
+    return <View style={{ flex: block.props.flex, minWidth: 0 }} />;
+  }
   const height = typeof block.props.height === 'number' ? block.props.height : spacing.md;
   return <View style={{ height }} />;
 }
@@ -184,6 +202,7 @@ export function SduiUnknownBlock({ block }: SduiBlockRenderProps) {
 
 const styles = StyleSheet.create({
   scroll: { flex: 1, minHeight: 0 },
+  textLink: { flexShrink: 1, minWidth: 0 },
   banner: {
     padding: spacing.md,
     backgroundColor: colors.surface,

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

@@ -23,6 +23,7 @@ export function Chip({
   disabled,
   icon,
   testID,
+  readOnly,
 }: {
   label: string;
   active?: boolean;
@@ -32,6 +33,8 @@ export function Chip({
   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;
@@ -41,7 +44,7 @@ export function Chip({
       ? { backgroundColor: toneBorder, borderColor: toneColor }
       : { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder };
 
-  const textColor = disabled
+  const textColor = disabled && !readOnly
     ? m3Colors.onDisabled
     : active
       ? colors.headerStart
@@ -54,13 +57,14 @@ export function Chip({
   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,
+  },
 });