@proulr/sdui-components 0.1.85 → 0.1.87

package/package.json

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

package/src/bdc/components/discover.tsx

@@ -17,14 +17,11 @@ type ChipProps = LayoutProps & {
   actionId?: string;
   actionParams?: Record<string, string>;
   active?: boolean;
-  variant?: 'default' | 'on_header';
 };
 
 export const Chip: BdcComponent = (props) => layoutBlock('chip', props as ChipProps);
 
-type ChipRowProps = LayoutProps & {
-  variant?: 'default' | 'on_header';
-};
+type ChipRowProps = LayoutProps;
 
 export const ChipRow: BdcComponent = (props) => layoutBlock('chip_row', props as ChipRowProps);
 

package/src/bdc/components/forms.tsx

@@ -15,6 +15,7 @@ type TextFieldProps = LayoutProps & {
   placeholder?: string;
   dataRef?: string;
   submitActionId?: string;
+  changeActionId?: string;
 };
 
 export const TextField: BdcComponent = (props) => layoutBlock('text_field', props as TextFieldProps);
@@ -25,6 +26,9 @@ type SelectRowProps = LayoutProps & {
   optionsRef?: string;
   changeActionId?: string;
   disabled?: boolean;
+  /** Copy traduzida no BFF (Rosetta); o renderer não inventa rótulo. */
+  placeholder?: string;
+  confirmLabel?: string;
 };
 
 export const SelectRow: BdcComponent = (props) => layoutBlock('select_row', props as SelectRowProps);

package/src/bdc/components/inbox.tsx

@@ -26,6 +26,10 @@ type EmptyStateProps = LayoutProps & {
   titleRef?: string;
   hint?: string;
   hintRef?: string;
+  /** CTA da tela vazia — sem ação o bloco é só aviso, e o usuário não tem para onde ir. */
+  actionId?: string;
+  actionLabel?: string;
+  actionLabelRef?: string;
 };
 
 export const EmptyState: BdcComponent = (props) => layoutBlock('empty_state', props as EmptyStateProps);

package/src/renderer/SduiScreenRenderer.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import type { SduiScreen, SduiBlock } from '@proulr/sdui-contract';
-import { colors } from './theme/proulr-theme';
+import { SCREEN_CONTENT_MAX_WIDTH, colors } from './theme/proulr-theme';
 import { renderBlockTree } from './sdui-component-registry';
 import { SduiLayoutDebugFrame } from './sdui-layout-debug';
 
@@ -49,7 +49,19 @@ export const SduiScreenRenderer = memo(function SduiScreenRenderer({ screen, onA
 });
 
 const styles = StyleSheet.create({
-  screen: { flex: 1, minHeight: 0, backgroundColor: colors.bg },
+  /**
+   * Teto de leitura também aqui: o shell aplica o mesmo token, mas o renderer
+   * pode ser montado direto (master-detail, wrappers futuros) — sem este clamp
+   * essas superfícies esticariam de ponta a ponta em desktop.
+   */
+  screen: {
+    flex: 1,
+    minHeight: 0,
+    width: '100%',
+    maxWidth: SCREEN_CONTENT_MAX_WIDTH,
+    alignSelf: 'center',
+    backgroundColor: colors.bg,
+  },
   block: { flex: 1, minHeight: 0 },
   overlayBlock: {
     ...StyleSheet.absoluteFill,

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -14,7 +14,7 @@ import { TextField as UiTextField } from '../ui/TextField';
 import { Chip } from '../ui/Chip';
 import { ChipRow } from '../ui/ChipRow';
 import { AppIcon } from '../ui/app-icon';
-import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
+import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
 import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
 import {
@@ -102,6 +102,7 @@ export function SduiDiscoverProfileCardBlock({ block, data, onAction }: SduiBloc
   }
 
   const age = profileAgeFromBirthDate(person.birth_date);
+  const distanceLabel = formatDistanceLabel(person.distance_m);
   const photoUri = person.photo_url ?? person.primary_photo_path ?? null;
   const presence = getPresenceStatus(person.last_seen);
   const online = presence === 'online';
@@ -151,7 +152,9 @@ export function SduiDiscoverProfileCardBlock({ block, data, onAction }: SduiBloc
         </Text>
         <View style={styles.distRow}>
           <PresenceDot status={presence} />
-          <Text style={styles.distText}>{formatDistanceLabel(person.distance_m)}</Text>
+          {distanceLabel ? (
+            <Text style={styles.distText}>{distanceLabel}</Text>
+          ) : null}
         </View>
       </View>
     </Pressable>
@@ -280,8 +283,6 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const actionId = readStringProp(block, 'action_id');
   const actionParams = readStringRecordProp(block, 'action_params');
   const active = readBooleanProp(block, 'active');
-  const variant = readStringProp(block, 'variant') ?? 'default';
-  const isHeader = variant === 'on_header';
 
   return (
     <Chip
@@ -289,17 +290,13 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
       icon={glyph}
       active={active}
       disabled={!actionId}
-      variant={isHeader ? 'onHeader' : 'default'}
       onPress={() => actionId && onAction(actionId, actionParams)}
     />
   );
 }
 
-export function SduiChipRowBlock({ block, children }: SduiBlockRenderProps) {
-  const variant = readStringProp(block, 'variant') ?? 'default';
-  const isHeader = variant === 'on_header';
-
-  return <ChipRow variant={isHeader ? 'onHeader' : 'default'}>{children}</ChipRow>;
+export function SduiChipRowBlock({ children }: SduiBlockRenderProps) {
+  return <ChipRow>{children}</ChipRow>;
 }
 
 export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderProps) {
@@ -307,7 +304,9 @@ export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderPro
   const placeholder = readStringProp(block, 'placeholder') ?? '';
   const dataRef = readStringProp(block, 'data_ref');
   const submitActionId = readStringProp(block, 'submit_action_id');
+  const changeActionId = readStringProp(block, 'change_action_id');
   const value = dataRef ? resolveDataRefString(data, dataRef) : '';
+  const [draft, setDraft] = useState(value);
 
   if (hybrid.renderTextField && dataRef) {
     return (
@@ -323,14 +322,19 @@ export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderPro
     );
   }
 
+  // Com change_action_id o wire é a fonte do valor; sem ele o input fica
+  // não-controlado e o texto digitado segue no payload do submit.
+  const binding = changeActionId && dataRef ? { value } : { defaultValue: value };
+
   return (
     <UiTextField
+      {...binding}
       placeholder={placeholder}
-      value={value}
-      onChangeText={() => {
-        // Hybrid: app-side state for text input until api_call wiring lands.
+      onChangeText={(next) => {
+        setDraft(next);
+        if (changeActionId) onAction(changeActionId, { value: next });
       }}
-      onSubmitEditing={() => submitActionId && onAction(submitActionId)}
+      onSubmitEditing={() => submitActionId && onAction(submitActionId, { value: draft })}
       returnKeyType={submitActionId ? 'search' : 'done'}
       autoCapitalize="words"
       autoCorrect={false}
@@ -440,34 +444,42 @@ const styles = StyleSheet.create({
     top: spacing.sm,
     left: spacing.sm,
     backgroundColor: m3Colors.primary,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
     borderRadius: m3Shape.cornerSmall,
   },
-  newBadgeText: { color: m3Colors.onPrimary, fontSize: 11, fontWeight: '700' },
+  newBadgeText: {
+    ...m3Type.labelSmall,
+    color: m3Colors.onPrimary,
+    fontFamily: fonts.bold,
+  },
   travelBadge: {
     position: 'absolute',
     top: spacing.sm,
     right: spacing.sm,
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 4,
+    gap: spacing.xs,
     backgroundColor: m3Colors.secondaryContainer,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
     borderRadius: m3Shape.cornerSmall,
   },
   travelBadgeOffset: {
     top: spacing.sm + 24,
   },
-  travelBadgeText: { color: m3Colors.onSecondaryContainer, fontSize: 11, fontWeight: '700' },
+  travelBadgeText: {
+    ...m3Type.labelSmall,
+    color: m3Colors.onSecondaryContainer,
+    fontFamily: fonts.bold,
+  },
   rightNowBadge: {
     position: 'absolute',
     top: spacing.sm,
     left: spacing.sm,
     width: 26,
     height: 26,
-    borderRadius: 13,
+    borderRadius: m3Shape.cornerFull,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: m3Colors.surfaceContainerHighest,
@@ -478,10 +490,17 @@ const styles = StyleSheet.create({
     left: spacing.sm + 52,
   },
   profileInfo: { position: 'absolute', left: spacing.sm, bottom: spacing.sm, right: spacing.sm },
-  profileName: { color: colors.white, fontSize: 13, fontWeight: '700' },
-  distRow: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 },
-  distText: { color: colors.textSecondary, fontSize: 11, fontWeight: '500' },
-  presenceDot: { width: 8, height: 8, borderRadius: 4 },
+  profileName: {
+    ...m3Type.label,
+    color: colors.white,
+    fontFamily: fonts.bold,
+  },
+  distRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm, marginTop: spacing.xs },
+  distText: {
+    ...m3Type.labelSmall,
+    color: colors.textSecondary,
+  },
+  presenceDot: { width: 8, height: 8, borderRadius: m3Shape.cornerFull },
   gridContent: {
     gap: GRID_GAP,
     paddingHorizontal: spacing.sm,
@@ -493,9 +512,8 @@ const styles = StyleSheet.create({
     marginHorizontal: spacing.sm,
   },
   loadMoreText: {
+    ...m3Type.label,
     color: m3Colors.primary,
-    fontSize: 14,
-    fontWeight: '600',
     fontFamily: fonts.semibold,
   },
   textField: {
@@ -513,24 +531,22 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     padding: spacing.lg,
-    backgroundColor: 'rgba(0,0,0,0.45)',
+    backgroundColor: colors.videoControlBackground,
     gap: spacing.sm,
   },
   mapTitle: {
+    ...m3Type.titleSmall,
     color: colors.white,
-    fontSize: 16,
-    fontFamily: fonts.semibold,
     textAlign: 'center',
   },
   mapCoords: {
+    ...m3Type.bodySmall,
     color: colors.textSecondary,
-    fontSize: 14,
-    fontFamily: fonts.regular,
     textAlign: 'center',
   },
   mapHint: {
+    ...m3Type.labelSmall,
     color: colors.textSecondary,
-    fontSize: 12,
     fontFamily: fonts.regular,
     textAlign: 'center',
   },

package/src/renderer/blocks/SduiInboxBlocks.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { Card } from '../ui/Card';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { AppButton } from '../ui/AppButton';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
 import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
@@ -85,21 +86,37 @@ export function SduiSegmentedTabsBlock({ block, data, onAction }: SduiBlockRende
   );
 }
 
-export function SduiEmptyStateBlock({ block, data }: SduiBlockRenderProps) {
+export function SduiEmptyStateBlock({ block, data, onAction }: SduiBlockRenderProps) {
   const hybrid = useSduiHybridRenderer();
   const title =
     readStringProp(block, 'title') || resolveDataRefString(data, readStringProp(block, 'title_ref'));
   const hint =
     readStringProp(block, 'hint') || resolveDataRefString(data, readStringProp(block, 'hint_ref'));
+  const actionLabel =
+    readStringProp(block, 'action_label') ||
+    resolveDataRefString(data, readStringProp(block, 'action_label_ref'));
+  const actionId = readStringProp(block, 'action_id');
 
   if (hybrid.renderEmptyState) {
-    return <>{hybrid.renderEmptyState({ title, hint })}</>;
+    return (
+      <>
+        {hybrid.renderEmptyState({
+          title,
+          hint,
+          actionLabel,
+          onAction: actionId ? () => onAction(actionId) : undefined,
+        })}
+      </>
+    );
   }
 
   return (
     <Card style={styles.emptyCard}>
       <Text style={styles.emptyTitle}>{title}</Text>
       {hint ? <Text style={styles.emptyHint}>{hint}</Text> : null}
+      {actionId && actionLabel ? (
+        <AppButton label={actionLabel} variant="primary" onPress={() => onAction(actionId)} />
+      ) : null}
     </Card>
   );
 }
@@ -262,7 +279,7 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm,
     paddingHorizontal: spacing.sm,
     borderRadius: m3Shape.cornerFull,
-    minHeight: 40,
+    minHeight: 44,
   },
   segmentActive: {
     backgroundColor: m3Colors.primaryContainer,
@@ -271,9 +288,9 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   segmentLabel: {
+    ...m3Type.label,
     color: m3Colors.onSurfaceVariant,
     fontFamily: fonts.semibold,
-    fontSize: 14,
   },
   segmentLabelActive: {
     color: m3Colors.onPrimaryContainer,
@@ -285,14 +302,13 @@ const styles = StyleSheet.create({
     marginHorizontal: spacing.sm,
   },
   emptyTitle: {
+    ...m3Type.label,
     color: m3Colors.onSurfaceVariant,
-    fontSize: 15,
-    fontFamily: fonts.medium,
     textAlign: 'center',
   },
   emptyHint: {
+    ...m3Type.bodySmall,
     color: m3Colors.onSurfaceVariant,
-    fontSize: 13,
     textAlign: 'center',
   },
   rowCard: {
@@ -300,13 +316,12 @@ const styles = StyleSheet.create({
     marginHorizontal: spacing.sm,
   },
   rowTitle: {
+    ...m3Type.titleSmall,
     color: m3Colors.onSurface,
-    fontSize: 16,
-    fontFamily: fonts.semibold,
   },
   rowMeta: {
+    ...m3Type.bodySmall,
     color: m3Colors.onSurfaceVariant,
-    fontSize: 12,
     marginTop: spacing.xs,
   },
 });

package/src/renderer/blocks/SduiLayoutBlocks.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { Card } from '../ui/Card';
 import { AppIcon } from '../ui/app-icon';
@@ -10,6 +10,7 @@ import {
   resolveDataRefString,
 } from '../lib/resolve-data-ref';
 import { SelectRow as UiSelectRow } from '../ui/SelectRow';
+import { ToggleRow as UiToggleRow } from '../ui/ToggleRow';
 import { resolveViewStyleProps } from '../theme/resolve-style-props';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
@@ -39,7 +40,12 @@ export function SduiSectionHeaderBlock({ block, onAction }: SduiBlockRenderProps
     <View style={styles.sectionHeaderRow}>
       <Text style={styles.sectionHeader}>{title}</Text>
       {actionLabel && actionId ? (
-        <Pressable onPress={() => onAction(actionId)} hitSlop={8}>
+        <Pressable
+          onPress={() => onAction(actionId)}
+          hitSlop={8}
+          accessibilityRole="button"
+          style={({ pressed }) => [styles.sectionActionWrap, pressed && styles.pressed]}
+        >
           <Text style={styles.sectionAction}>{actionLabel}</Text>
         </Pressable>
       ) : null}
@@ -80,7 +86,13 @@ export function SduiListItemBlock({ block, data, onAction }: SduiBlockRenderProp
   if (actionId) {
     return (
       <Pressable
-        style={[styles.listItem, showDivider && styles.listItemDivider]}
+        accessibilityRole="button"
+        testID={readStringProp(block, 'test_id')}
+        style={({ pressed }) => [
+          styles.listItem,
+          showDivider && styles.listItemDivider,
+          pressed && styles.pressed,
+        ]}
         onPress={() => onAction(actionId)}
       >
         {inner}
@@ -100,22 +112,16 @@ export function SduiToggleRowBlock({ block, data, onAction }: SduiBlockRenderPro
   const value = resolveDataRefBoolean(data, dataRef);
 
   return (
-    <View style={styles.toggleRow}>
-      <View style={styles.toggleCopy}>
-        <Text style={styles.toggleLabel}>{label}</Text>
-        {hint ? <Text style={styles.toggleHint}>{hint}</Text> : null}
-      </View>
-      <Switch
-        value={value}
-        disabled={disabled || !toggleActionId}
-        onValueChange={(next) => {
-          if (!toggleActionId) return;
-          onAction(toggleActionId, { value: String(next) });
-        }}
-        trackColor={{ false: m3Colors.surfaceContainerHighest, true: m3Colors.primary }}
-        thumbColor={m3Colors.onPrimary}
-      />
-    </View>
+    <UiToggleRow
+      label={label}
+      hint={hint}
+      value={value}
+      disabled={disabled || !toggleActionId}
+      onChange={(next) => {
+        if (!toggleActionId) return;
+        onAction(toggleActionId, { value: String(next) });
+      }}
+    />
   );
 }
 
@@ -134,6 +140,8 @@ export function SduiSelectRowBlock({ block, data, onAction }: SduiBlockRenderPro
       label={label}
       value={value || null}
       options={options}
+      placeholder={readStringProp(block, 'placeholder') ?? ''}
+      confirmLabel={readStringProp(block, 'confirm_label') ?? ''}
       onChange={(next) => {
         if (disabled || !changeActionId) return;
         onAction(changeActionId, { value: next });
@@ -155,48 +163,33 @@ const styles = StyleSheet.create({
     marginTop: spacing.xl,
   },
   sectionHeader: {
+    ...m3Type.titleSmall,
     color: colors.textSecondary,
-    fontSize: 14,
-    fontFamily: fonts.semibold,
+  },
+  sectionActionWrap: {
+    minHeight: 44,
+    justifyContent: 'center',
+    paddingLeft: spacing.md,
   },
   sectionAction: {
+    ...m3Type.label,
     color: colors.accentText,
-    fontSize: 13,
     fontFamily: fonts.semibold,
   },
+  pressed: { backgroundColor: m3Colors.surfaceContainerHigh },
   listItem: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: spacing.md,
+    minHeight: 48,
     paddingVertical: spacing.md,
   },
   listItemDivider: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.border,
+    borderBottomColor: m3Colors.divider,
   },
   listContent: { flex: 1 },
-  listTitle: { color: colors.textPrimary, fontSize: 15, fontFamily: fonts.semibold },
-  listSubtitle: { color: colors.textSecondary, fontSize: 13, marginTop: 2 },
+  listTitle: { ...m3Type.titleSmall, color: colors.textPrimary },
+  listSubtitle: { ...m3Type.bodySmall, color: colors.textSecondary, marginTop: 2 },
   trailingText: { ...m3Type.bodySmall, color: colors.textSecondary },
-  toggleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.md,
-    paddingVertical: spacing.xs,
-  },
-  toggleCopy: {
-    flex: 1,
-    gap: spacing.xs,
-  },
-  toggleLabel: {
-    color: m3Colors.onSurface,
-    fontSize: 15,
-    fontFamily: fonts.semibold,
-  },
-  toggleHint: {
-    color: m3Colors.onSurfaceVariant,
-    fontSize: 12,
-    lineHeight: 17,
-    fontFamily: fonts.regular,
-  },
 });

package/src/renderer/blocks/SduiNativeAdBlock.tsx

@@ -6,7 +6,7 @@ import {
   DEFAULT_NATIVE_AD_PLACEMENT,
   getNativeAdCatalog,
 } from '../ads/native-ad-catalog';
-import { colors, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { colors, fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
 type NativeAdModule = typeof import('react-native-google-mobile-ads');
@@ -220,10 +220,9 @@ const styles = StyleSheet.create({
     borderRadius: m3Shape.cornerSmall,
   },
   adBadgeText: {
+    ...m3Type.labelSmall,
     color: colors.onSurfaceVariant,
-    fontSize: 10,
-    fontWeight: '700',
-    letterSpacing: 0.4,
+    fontFamily: fonts.bold,
     textTransform: 'uppercase',
   },
   headline: {
@@ -231,17 +230,17 @@ const styles = StyleSheet.create({
     left: spacing.sm,
     right: spacing.sm,
     bottom: spacing.xl + spacing.sm,
+    ...m3Type.labelSmall,
     color: m3Colors.onSurface,
-    fontSize: 12,
-    fontWeight: '700',
+    fontFamily: fonts.bold,
   },
   cta: {
     position: 'absolute',
     left: spacing.sm,
     right: spacing.sm,
     bottom: spacing.sm,
+    ...m3Type.labelSmall,
     color: m3Colors.secondary,
-    fontSize: 11,
-    fontWeight: '600',
+    fontFamily: fonts.semibold,
   },
 });

package/src/renderer/blocks/SduiSocialBlocks.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { resolveDataRefString } from '../lib/resolve-data-ref';
 import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
@@ -14,15 +13,8 @@ export function SduiStoryRailBlock({ block }: SduiBlockRenderProps) {
   const hybrid = useSduiHybridRenderer();
   const surface = readStringProp(block, 'surface') === 'vibes' ? 'vibes' : 'discover';
 
-  if (hybrid.renderStoryRail) {
-    return <>{hybrid.renderStoryRail({ surface })}</>;
-  }
-
-  return (
-    <View style={styles.placeholder}>
-      <Text style={styles.placeholderText}>StoryRail ({surface})</Text>
-    </View>
-  );
+  if (!hybrid.renderStoryRail) return null;
+  return <>{hybrid.renderStoryRail({ surface })}</>;
 }
 
 export function SduiProfileCompletionBannerBlock({ block, data, onAction }: SduiBlockRenderProps) {
@@ -44,21 +36,6 @@ export function SduiProfileCompletionBannerBlock({ block, data, onAction }: Sdui
     );
   }
 
-  if (percent <= 0) return null;
-
-  return (
-    <View style={styles.placeholder}>
-      <Text style={styles.placeholderText}>Complete seu perfil ({percent}%)</Text>
-    </View>
-  );
+  // Sem hybrid registrado o slot fica vazio: o renderer não inventa UI nem copy.
+  return null;
 }
-
-const styles = StyleSheet.create({
-  placeholder: {
-    padding: 12,
-  },
-  placeholderText: {
-    color: '#A3A3A3',
-    fontSize: 13,
-  },
-});

package/src/renderer/lib/discover-profile-formatters.test.ts

@@ -29,6 +29,13 @@ describe('formatDistanceLabel', () => {
     expect(formatDistanceLabel(10, 'imperial')).toMatch(/ft$/);
     expect(formatDistanceLabel(2000, 'imperial')).toMatch(/mi$/);
   });
+
+  it('returns null when the visitor hides distance', () => {
+    expect(formatDistanceLabel(null)).toBeNull();
+    expect(formatDistanceLabel(undefined)).toBeNull();
+    expect(formatDistanceLabel(Number.NaN)).toBeNull();
+    expect(formatDistanceLabel(null, 'imperial')).toBeNull();
+  });
 });
 
 describe('getPresenceStatus', () => {

package/src/renderer/lib/discover-profile-formatters.ts

@@ -2,7 +2,8 @@ export type DiscoverNearbyProfileWire = {
   id: string;
   display_name: string | null;
   birth_date: string | null;
-  distance_m: number;
+  /** `null` = visitante ativou "ocultar distância" — o rótulo some, o resto do card fica. */
+  distance_m: number | null;
   primary_photo_path: string | null;
   photo_url?: string | null;
   is_online: boolean | null;
@@ -42,9 +43,11 @@ export function profileAgeFromBirthDate(birthDate: string | null | undefined): n
 }
 
 export function formatDistanceLabel(
-  distanceM: number,
+  distanceM: number | null | undefined,
   unit: 'metric' | 'imperial' = 'metric',
-): string {
+): string | null {
+  if (distanceM === null || distanceM === undefined || !Number.isFinite(distanceM)) return null;
+
   if (unit === 'imperial') {
     const feet = distanceM * 3.28084;
     if (feet < 528) return `${Math.round(feet)} ft`;

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

@@ -102,7 +102,12 @@ export type SduiHybridRenderers = {
     activeRef?: string;
     actionPrefix?: string;
   }) => ReactNode;
-  renderEmptyState?: (props: { title: string; hint?: string }) => ReactNode;
+  renderEmptyState?: (props: {
+    title: string;
+    hint?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+  }) => ReactNode;
   renderInboxPersonRow?: (props: {
     block: SduiBlock;
     data: Record<string, unknown>;