@proulr/sdui-components 0.1.15 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {

package/src/bdc/components/discover.tsx

@@ -13,6 +13,7 @@ function layoutBlock(type: string, props: LayoutProps): BdcElement {
 
 type ChipProps = LayoutProps & {
   label: string;
+  glyph?: string;
   actionId?: string;
   actionParams?: Record<string, string>;
   active?: boolean;

package/src/bdc/components/inbox.tsx

@@ -0,0 +1,68 @@
+import type { BdcComponent, BdcElement } from '../jsx-runtime';
+
+type LayoutProps = {
+  id?: string;
+  gap?: number | string;
+  padding?: number | string;
+  style?: Record<string, unknown>;
+  children?: BdcElement[];
+};
+
+function layoutBlock(type: string, props: LayoutProps): BdcElement {
+  return { type, props: { ...props }, children: props.children ?? [] };
+}
+
+type SegmentedTabsProps = LayoutProps & {
+  segmentsRef?: string;
+  activeRef?: string;
+  actionPrefix?: string;
+};
+
+export const SegmentedTabs: BdcComponent = (props) =>
+  layoutBlock('segmented_tabs', props as SegmentedTabsProps);
+
+type EmptyStateProps = LayoutProps & {
+  title?: string;
+  titleRef?: string;
+  hint?: string;
+  hintRef?: string;
+};
+
+export const EmptyState: BdcComponent = (props) => layoutBlock('empty_state', props as EmptyStateProps);
+
+type InboxPersonRowProps = LayoutProps & {
+  variant: 'visit' | 'flash' | 'chat';
+  rowRef: string;
+  actionId?: string;
+  actionParams?: Record<string, string>;
+};
+
+export const InboxPersonRow: BdcComponent = (props) =>
+  layoutBlock('inbox_person_row', props as InboxPersonRowProps);
+
+type InboxSearchFieldProps = LayoutProps & {
+  placeholder?: string;
+  layout?: 'wide_only' | 'always';
+  segment?: string;
+};
+
+export const InboxSearchField: BdcComponent = (props) =>
+  layoutBlock('inbox_search_field', props as InboxSearchFieldProps);
+
+type InboxCapabilitiesProps = {
+  id?: string;
+  dataRef?: string;
+};
+
+function capabilityBlock(type: string, props: InboxCapabilitiesProps): BdcElement {
+  return { type, props: { ...props }, children: [] };
+}
+
+export const ChatInboxCapabilities: BdcComponent = (props) =>
+  capabilityBlock('chat_inbox_capabilities', props as InboxCapabilitiesProps);
+
+export const FlashInboxCapabilities: BdcComponent = (props) =>
+  capabilityBlock('flash_inbox_capabilities', props as InboxCapabilitiesProps);
+
+export const ProfileVisitsCapabilities: BdcComponent = (props) =>
+  capabilityBlock('profile_visits_capabilities', props as InboxCapabilitiesProps);

package/src/bdc/components/native-blocks.tsx

@@ -18,6 +18,7 @@ function nativeBlock(type: string, props: NativeBlockProps): BdcElement {
 
 export const FlashInboxList: BdcComponent = (props) => nativeBlock('flash_inbox_list', props);
 export const ChatInboxList: BdcComponent = (props) => nativeBlock('chat_inbox_list', props);
+export const ProfileVisitsList: BdcComponent = (props) => nativeBlock('profile_visits_list', props);
 export const ChatThread: BdcComponent = (props) => nativeBlock('chat_thread', props);
 export const SocialPostFeed: BdcComponent = (props) => nativeBlock('social_post_feed', props);
 export const ThoughtFeed: BdcComponent = (props) => nativeBlock('thought_feed', props);

package/src/bdc/index.ts

@@ -16,6 +16,15 @@ export {
   screenProps,
 } from './components/ui';
 export { Chip, ChipRow, DiscoverGrid, DiscoverMap, DiscoverProfileCard } from './components/discover';
+export {
+  ChatInboxCapabilities,
+  EmptyState,
+  FlashInboxCapabilities,
+  InboxPersonRow,
+  InboxSearchField,
+  ProfileVisitsCapabilities,
+  SegmentedTabs,
+} from './components/inbox';
 export { TextField } from './components/forms';
 export { ProfileCompletionBanner, StoryRail } from './components/social';
 export {
@@ -24,6 +33,7 @@ export {
   ChatInboxList,
   ChatThread,
   FlashInboxList,
+  ProfileVisitsList,
   NewPostComposer,
   NewStoryComposer,
   PostComments,

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -263,6 +263,7 @@ export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRender
 
 export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const label = readStringProp(block, 'label') ?? '';
+  const glyph = readStringProp(block, 'glyph');
   const actionId = readStringProp(block, 'action_id');
   const actionParams = readStringRecordProp(block, 'action_params');
   const active = readBooleanProp(block, 'active');
@@ -275,6 +276,11 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
       onPress={() => actionId && onAction(actionId, actionParams)}
       disabled={!actionId}
     >
+      {glyph ? (
+        <Text style={[styles.chipLabel, active && styles.chipLabelActive]} accessibilityElementsHidden>
+          {glyph}{' '}
+        </Text>
+      ) : null}
       <Text style={[styles.chipLabel, active && styles.chipLabelActive]}>{label}</Text>
     </Pressable>
   );
@@ -289,7 +295,9 @@ export function SduiChipRowBlock({ block, children }: SduiBlockRenderProps) {
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
+        style={styles.chipRowScroll}
         contentContainerStyle={[styles.chipRow, isHeader && styles.chipRowOnHeader]}
+        keyboardShouldPersistTaps="handled"
       >
         {children}
       </ScrollView>
@@ -433,17 +441,27 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontFamily: fonts.semibold,
   },
+  chipRowScroll: {
+    flexGrow: 0,
+    flexShrink: 0,
+    alignSelf: 'stretch',
+  },
   chipRow: {
     flexDirection: 'row',
-    gap: spacing.sm,
+    alignItems: 'center',
+    gap: spacing.xs,
     paddingHorizontal: spacing.sm,
+    paddingVertical: 0,
   },
   chipRowOnHeader: {
-    paddingHorizontal: 0,
+    paddingHorizontal: spacing.sm,
   },
   chip: {
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
+    paddingHorizontal: spacing.sm + 2,
+    paddingVertical: spacing.xs,
     borderRadius: m3Shape.cornerFull,
     backgroundColor: m3Colors.surfaceContainerHigh,
     borderWidth: 1,
@@ -459,8 +477,8 @@ const styles = StyleSheet.create({
   },
   chipLabel: {
     color: m3Colors.onSurface,
-    fontSize: 13,
-    fontFamily: fonts.medium,
+    fontSize: 12,
+    fontFamily: fonts.semibold,
   },
   chipLabelActive: {
     color: m3Colors.onPrimaryContainer,

package/src/renderer/blocks/SduiInboxBlocks.tsx

@@ -0,0 +1,292 @@
+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 { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
+import { useSduiHybridRenderer } from '../sdui-hybrid-renderer-context';
+import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
+
+function readStringProp(block: SduiBlock, key: string): string | undefined {
+  const value = block.props[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+function readStringRecordProp(block: SduiBlock, key: string): Record<string, string> | undefined {
+  const value = block.props[key];
+  if (!value || typeof value !== 'object') return undefined;
+  const entries = Object.entries(value as Record<string, unknown>).filter(
+    (entry): entry is [string, string] => typeof entry[1] === 'string',
+  );
+  return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+}
+
+type HubSegmentWire = { id: string; label: string; glyph?: string };
+
+function readHubSegments(data: Record<string, unknown>, ref?: string): HubSegmentWire[] {
+  const hub = resolveDataRef(data, ref?.split('.')[0] ?? 'hub');
+  if (!hub || typeof hub !== 'object') return [];
+  const segments = (hub as Record<string, unknown>).segments;
+  if (!Array.isArray(segments)) return [];
+  return segments.filter(
+    (item): item is HubSegmentWire =>
+      Boolean(item && typeof item === 'object' && typeof (item as HubSegmentWire).id === 'string'),
+  );
+}
+
+function readActiveSegment(data: Record<string, unknown>, ref?: string): string {
+  const value = resolveDataRefString(data, ref ?? 'hub.active_segment');
+  return value || 'chats';
+}
+
+export function SduiSegmentedTabsBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  if (hybrid.renderSegmentedTabs) {
+    return (
+      <>
+        {hybrid.renderSegmentedTabs({
+          block,
+          data,
+          onAction,
+          segmentsRef: readStringProp(block, 'segments_ref'),
+          activeRef: readStringProp(block, 'active_ref'),
+          actionPrefix: readStringProp(block, 'action_prefix') ?? 'select_segment_',
+        })}
+      </>
+    );
+  }
+
+  const segmentsRef = readStringProp(block, 'segments_ref') ?? 'hub.segments';
+  const activeRef = readStringProp(block, 'active_ref') ?? 'hub.active_segment';
+  const actionPrefix = readStringProp(block, 'action_prefix') ?? 'select_segment_';
+  const segments = readHubSegments(data, segmentsRef);
+  const active = readActiveSegment(data, activeRef);
+
+  return (
+    <View style={styles.segmentTrack} accessibilityRole="tablist">
+      {segments.map((segment) => {
+        const selected = segment.id === active;
+        return (
+          <Pressable
+            key={segment.id}
+            style={[styles.segment, selected && styles.segmentActive]}
+            onPress={() => onAction(`${actionPrefix}${segment.id}`)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+          >
+            {segment.glyph ? <Text style={styles.segmentGlyph}>{segment.glyph}</Text> : null}
+            <Text style={[styles.segmentLabel, selected && styles.segmentLabelActive]}>
+              {segment.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export function SduiEmptyStateBlock({ block, data }: 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'));
+
+  if (hybrid.renderEmptyState) {
+    return <>{hybrid.renderEmptyState({ title, hint })}</>;
+  }
+
+  return (
+    <Card style={styles.emptyCard}>
+      <Text style={styles.emptyTitle}>{title}</Text>
+      {hint ? <Text style={styles.emptyHint}>{hint}</Text> : null}
+    </Card>
+  );
+}
+
+export function SduiInboxPersonRowBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const variant = readStringProp(block, 'variant');
+  const rowRef = readStringProp(block, 'row_ref');
+  const actionId = readStringProp(block, 'action_id');
+  const actionParams = readStringRecordProp(block, 'action_params');
+
+  if (
+    hybrid.renderInboxPersonRow &&
+    variant &&
+    rowRef &&
+    (variant === 'visit' || variant === 'flash' || variant === 'chat')
+  ) {
+    return (
+      <>
+        {hybrid.renderInboxPersonRow({
+          block,
+          data,
+          onAction,
+          variant,
+          rowRef,
+          actionId,
+          actionParams,
+        })}
+      </>
+    );
+  }
+
+  const row = rowRef ? resolveDataRef(data, rowRef) : null;
+  if (!row || typeof row !== 'object') return null;
+  const record = row as Record<string, unknown>;
+  const title =
+    resolveDataRefString(data, `${rowRef}.viewer_name`) ||
+    resolveDataRefString(data, `${rowRef}.sender_name`) ||
+    resolveDataRefString(data, `${rowRef}.peer_display_name`) ||
+    'Alguém';
+
+  return (
+    <Pressable
+      onPress={() => actionId && onAction(actionId, actionParams)}
+      disabled={!actionId}
+    >
+      <Card style={styles.rowCard}>
+        <Text style={styles.rowTitle}>{title}</Text>
+        {typeof record.viewed_at === 'string' ? (
+          <Text style={styles.rowMeta}>Visualizou seu perfil</Text>
+        ) : null}
+      </Card>
+    </Pressable>
+  );
+}
+
+export function SduiInboxSearchFieldBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  const placeholder = readStringProp(block, 'placeholder') ?? 'Buscar…';
+  const layout = readStringProp(block, 'layout') ?? 'wide_only';
+  const segment = readStringProp(block, 'segment') ?? 'chats';
+  const activeSegment = readActiveSegment(data, 'hub.active_segment');
+
+  if (segment && activeSegment !== segment) return null;
+
+  if (hybrid.renderInboxSearchField) {
+    return (
+      <>
+        {hybrid.renderInboxSearchField({
+          block,
+          data,
+          onAction,
+          placeholder,
+          layout,
+          segment,
+        })}
+      </>
+    );
+  }
+
+  return null;
+}
+
+function CapabilitiesShell({
+  block,
+  data,
+  onAction,
+  rendererKey,
+}: SduiBlockRenderProps & {
+  rendererKey:
+    | 'renderChatInboxCapabilities'
+    | 'renderFlashInboxCapabilities'
+    | 'renderProfileVisitsCapabilities';
+}) {
+  const hybrid = useSduiHybridRenderer();
+  const renderer = hybrid[rendererKey];
+  if (typeof renderer !== 'function') return null;
+  return (
+    <>
+      {renderer({
+        block,
+        data,
+        onAction,
+        dataRef: readStringProp(block, 'data_ref'),
+      })}
+    </>
+  );
+}
+
+export function SduiChatInboxCapabilitiesBlock(props: SduiBlockRenderProps) {
+  return <CapabilitiesShell {...props} rendererKey="renderChatInboxCapabilities" />;
+}
+
+export function SduiFlashInboxCapabilitiesBlock(props: SduiBlockRenderProps) {
+  return <CapabilitiesShell {...props} rendererKey="renderFlashInboxCapabilities" />;
+}
+
+export function SduiProfileVisitsCapabilitiesBlock(props: SduiBlockRenderProps) {
+  return <CapabilitiesShell {...props} rendererKey="renderProfileVisitsCapabilities" />;
+}
+
+const styles = StyleSheet.create({
+  segmentTrack: {
+    flexDirection: 'row',
+    flexGrow: 0,
+    flexShrink: 0,
+    alignSelf: 'stretch',
+    gap: spacing.sm,
+    backgroundColor: m3Colors.surfaceContainerHigh,
+    borderRadius: m3Shape.cornerFull,
+    padding: spacing.xs,
+    marginHorizontal: spacing.sm,
+  },
+  segment: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.sm,
+    borderRadius: m3Shape.cornerFull,
+    minHeight: 40,
+  },
+  segmentActive: {
+    backgroundColor: m3Colors.primaryContainer,
+  },
+  segmentGlyph: {
+    fontSize: 14,
+  },
+  segmentLabel: {
+    color: m3Colors.onSurfaceVariant,
+    fontFamily: fonts.semibold,
+    fontSize: 14,
+  },
+  segmentLabelActive: {
+    color: m3Colors.onPrimaryContainer,
+  },
+  emptyCard: {
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.xxl,
+    marginHorizontal: spacing.sm,
+  },
+  emptyTitle: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 15,
+    fontFamily: fonts.medium,
+    textAlign: 'center',
+  },
+  emptyHint: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 13,
+    textAlign: 'center',
+  },
+  rowCard: {
+    padding: spacing.md,
+    marginHorizontal: spacing.sm,
+  },
+  rowTitle: {
+    color: m3Colors.onSurface,
+    fontSize: 16,
+    fontFamily: fonts.semibold,
+  },
+  rowMeta: {
+    color: m3Colors.onSurfaceVariant,
+    fontSize: 12,
+    marginTop: spacing.xs,
+  },
+});

package/src/renderer/blocks/SduiNativeDomainBlocks.tsx

@@ -20,6 +20,7 @@ function NativeBlockShell({
   rendererKey:
     | 'renderFlashInboxList'
     | 'renderChatInboxList'
+    | 'renderProfileVisitsList'
     | 'renderChatThread'
     | 'renderSocialPostFeed'
     | 'renderThoughtFeed'
@@ -75,6 +76,10 @@ export function SduiChatInboxListBlock(props: SduiBlockRenderProps) {
   return <NativeBlockShell {...props} rendererKey="renderChatInboxList" fallbackLabel="Chat" />;
 }
 
+export function SduiProfileVisitsListBlock(props: SduiBlockRenderProps) {
+  return <NativeBlockShell {...props} rendererKey="renderProfileVisitsList" fallbackLabel="Visitas" />;
+}
+
 export function SduiChatThreadBlock(props: SduiBlockRenderProps) {
   return <NativeBlockShell {...props} rendererKey="renderChatThread" fallbackLabel="Conversa" />;
 }

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

@@ -29,6 +29,15 @@ import {
   SduiProfileCompletionBannerBlock,
   SduiStoryRailBlock,
 } from './blocks/SduiSocialBlocks';
+import {
+  SduiChatInboxCapabilitiesBlock,
+  SduiEmptyStateBlock,
+  SduiFlashInboxCapabilitiesBlock,
+  SduiInboxPersonRowBlock,
+  SduiInboxSearchFieldBlock,
+  SduiProfileVisitsCapabilitiesBlock,
+  SduiSegmentedTabsBlock,
+} from './blocks/SduiInboxBlocks';
 import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
 import {
   SduiAlbumDetailBlock,
@@ -36,6 +45,7 @@ import {
   SduiChatInboxListBlock,
   SduiChatThreadBlock,
   SduiFlashInboxListBlock,
+  SduiProfileVisitsListBlock,
   SduiNewPostComposerBlock,
   SduiNewStoryComposerBlock,
   SduiPostCommentsBlock,
@@ -70,6 +80,13 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   toggle_row: SduiToggleRowBlock,
   chip: SduiChipBlock,
   chip_row: SduiChipRowBlock,
+  segmented_tabs: SduiSegmentedTabsBlock,
+  empty_state: SduiEmptyStateBlock,
+  inbox_person_row: SduiInboxPersonRowBlock,
+  inbox_search_field: SduiInboxSearchFieldBlock,
+  chat_inbox_capabilities: SduiChatInboxCapabilitiesBlock,
+  flash_inbox_capabilities: SduiFlashInboxCapabilitiesBlock,
+  profile_visits_capabilities: SduiProfileVisitsCapabilitiesBlock,
   discover_grid: SduiDiscoverGridBlock,
   discover_profile_card: SduiDiscoverProfileCardBlock,
   discover_map: SduiDiscoverMapBlock,
@@ -78,6 +95,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   profile_completion_banner: SduiProfileCompletionBannerBlock,
   flash_inbox_list: SduiFlashInboxListBlock,
   chat_inbox_list: SduiChatInboxListBlock,
+  profile_visits_list: SduiProfileVisitsListBlock,
   chat_thread: SduiChatThreadBlock,
   social_post_feed: SduiSocialPostFeedBlock,
   thought_feed: SduiThoughtFeedBlock,

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

@@ -56,6 +56,7 @@ export type SduiHybridRenderers = {
   onDiscoverMapCenterChange?: (coords: { lat: number; lng: number }) => void;
   renderFlashInboxList?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderChatInboxList?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderProfileVisitsList?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderChatThread?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderSocialPostFeed?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderThoughtFeed?: (props: SduiNativeBlockRenderProps) => ReactNode;
@@ -72,6 +73,35 @@ export type SduiHybridRenderers = {
   renderSocialProfile?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderSettingsHome?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderDiscoverBrowseLocation?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderSegmentedTabs?: (props: {
+    block: SduiBlock;
+    data: Record<string, unknown>;
+    onAction: (actionId: string, vars?: Record<string, string>) => void;
+    segmentsRef?: string;
+    activeRef?: string;
+    actionPrefix?: string;
+  }) => ReactNode;
+  renderEmptyState?: (props: { title: string; hint?: string }) => ReactNode;
+  renderInboxPersonRow?: (props: {
+    block: SduiBlock;
+    data: Record<string, unknown>;
+    onAction: (actionId: string, vars?: Record<string, string>) => void;
+    variant: 'visit' | 'flash' | 'chat';
+    rowRef: string;
+    actionId?: string;
+    actionParams?: Record<string, string>;
+  }) => ReactNode;
+  renderInboxSearchField?: (props: {
+    block: SduiBlock;
+    data: Record<string, unknown>;
+    onAction: (actionId: string, vars?: Record<string, string>) => void;
+    placeholder: string;
+    layout: string;
+    segment: string;
+  }) => ReactNode;
+  renderChatInboxCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderFlashInboxCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderProfileVisitsCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
 };
 
 const SduiHybridRendererContext = createContext<SduiHybridRenderers>({});