@proulr/sdui-components 0.1.0

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

@@ -0,0 +1,75 @@
+export type DiscoverNearbyProfileWire = {
+  id: string;
+  display_name: string | null;
+  birth_date: string | null;
+  distance_m: number;
+  primary_photo_path: string | null;
+  photo_url?: string | null;
+  is_online: boolean | null;
+  last_seen?: string | null;
+  is_creator?: boolean | null;
+  has_new_media?: boolean | null;
+};
+
+export type DiscoverGridProfileItemWire = {
+  kind: 'profile';
+  id: string;
+  person: DiscoverNearbyProfileWire;
+};
+
+export type DiscoverGridAdItemWire = {
+  kind: 'ad';
+  id: string;
+  placement?: string;
+};
+
+export type DiscoverGridItemWire = DiscoverGridProfileItemWire | DiscoverGridAdItemWire;
+
+export function profileAgeFromBirthDate(birthDate: string | null | undefined): number | null {
+  if (!birthDate) return null;
+  const born = new Date(birthDate);
+  if (Number.isNaN(born.getTime())) return null;
+  const today = new Date();
+  let age = today.getFullYear() - born.getFullYear();
+  const monthDelta = today.getMonth() - born.getMonth();
+  if (monthDelta < 0 || (monthDelta === 0 && today.getDate() < born.getDate())) {
+    age -= 1;
+  }
+  return age >= 0 ? age : null;
+}
+
+export function formatDistanceLabel(distanceM: number): string {
+  if (distanceM < 1000) return `${Math.round(distanceM)} m`;
+  const km = distanceM / 1000;
+  return km < 10 ? `${km.toFixed(1)} km` : `${Math.round(km)} km`;
+}
+
+export type PresenceStatus = 'online' | 'recent' | 'offline';
+
+export function getPresenceStatus(lastSeen?: string | null): PresenceStatus {
+  if (!lastSeen) return 'offline';
+  const seenAt = new Date(lastSeen).getTime();
+  if (Number.isNaN(seenAt)) return 'offline';
+  const deltaMs = Date.now() - seenAt;
+  if (deltaMs <= 5 * 60 * 1000) return 'online';
+  if (deltaMs <= 24 * 60 * 60 * 1000) return 'recent';
+  return 'offline';
+}
+
+export function isDiscoverGridItem(value: unknown): value is DiscoverGridItemWire {
+  if (!value || typeof value !== 'object') return false;
+  const kind = (value as { kind?: unknown }).kind;
+  return kind === 'profile' || kind === 'ad';
+}
+
+export function readDiscoverGridItems(data: Record<string, unknown>, ref: string): DiscoverGridItemWire[] {
+  const raw = ref.split('.').reduce<unknown>((acc, key) => {
+    if (acc && typeof acc === 'object' && key in (acc as Record<string, unknown>)) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, data);
+
+  if (!Array.isArray(raw)) return [];
+  return raw.filter(isDiscoverGridItem);
+}

package/src/renderer/lib/resolve-data-ref.ts

@@ -0,0 +1,21 @@
+export function resolveDataRef(data: Record<string, unknown>, ref?: unknown): unknown {
+  if (typeof ref !== 'string' || !ref) return undefined;
+
+  return ref.split('.').reduce<unknown>((acc, key) => {
+    if (acc && typeof acc === 'object' && key in (acc as Record<string, unknown>)) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, data);
+}
+
+export function resolveDataRefString(data: Record<string, unknown>, ref?: unknown): string {
+  const value = resolveDataRef(data, ref);
+  if (value == null) return '';
+  return String(value);
+}
+
+export function resolveDataRefBoolean(data: Record<string, unknown>, ref?: unknown): boolean {
+  const value = resolveDataRef(data, ref);
+  return value === true || value === 'true' || value === 1 || value === '1';
+}

package/src/renderer/sdui-chrome-scroll-context.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import type { ViewStyle } from 'react-native';
+
+export type SduiChromeScrollInsetProps = {
+  contentInset?: { top: number; bottom: number };
+  contentOffset?: { x: number; y: number };
+  automaticallyAdjustContentInsets?: boolean;
+  scrollIndicatorInsets?: { top: number; bottom: number };
+};
+
+export type SduiChromeScrollInsets = {
+  top: number;
+  bottom: number;
+  headerHeight: number;
+  tabBarHeight: number;
+};
+
+export type SduiChromeScrollConfig = {
+  scrollInsetProps: SduiChromeScrollInsetProps;
+  contentContainerStyle: ViewStyle;
+  chromeInsets: SduiChromeScrollInsets;
+};
+
+const SduiChromeScrollContext = createContext<SduiChromeScrollConfig | null>(null);
+
+export function SduiChromeScrollProvider({
+  value,
+  children,
+}: {
+  value: SduiChromeScrollConfig;
+  children: ReactNode;
+}) {
+  return (
+    <SduiChromeScrollContext.Provider value={value}>{children}</SduiChromeScrollContext.Provider>
+  );
+}
+
+export function useSduiChromeScroll(): SduiChromeScrollConfig | null {
+  return useContext(SduiChromeScrollContext);
+}

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

@@ -0,0 +1,129 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import {
+  SduiButtonBlock,
+  SduiColumnBlock,
+  SduiInfoBannerBlock,
+  SduiRowBlock,
+  SduiScrollBlock,
+  SduiSpacerBlock,
+  SduiTextBlock,
+  SduiUnknownBlock,
+  type SduiBlockRenderProps,
+} from './blocks/SduiPrimitiveBlocks';
+import {
+  SduiCardBlock,
+  SduiListItemBlock,
+  SduiSectionHeaderBlock,
+  SduiToggleRowBlock,
+} from './blocks/SduiLayoutBlocks';
+import {
+  SduiChipBlock,
+  SduiChipRowBlock,
+  SduiDiscoverGridBlock,
+  SduiDiscoverMapBlock,
+  SduiDiscoverProfileCardBlock,
+  SduiTextFieldBlock,
+} from './blocks/SduiDiscoverBlocks';
+import {
+  SduiProfileCompletionBannerBlock,
+  SduiStoryRailBlock,
+} from './blocks/SduiSocialBlocks';
+import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
+import {
+  SduiAlbumDetailBlock,
+  SduiAlbumGridBlock,
+  SduiChatInboxListBlock,
+  SduiChatThreadBlock,
+  SduiFlashInboxListBlock,
+  SduiNewPostComposerBlock,
+  SduiPostCommentsBlock,
+  SduiProfileOnboardingBlock,
+  SduiProfileSelfBlock,
+  SduiProfileSetupBlock,
+  SduiProfileViewBlock,
+  SduiSocialPostFeedBlock,
+  SduiSocialProfileBlock,
+  SduiSettingsHomeBlock,
+  SduiDiscoverBrowseLocationBlock,
+  SduiThoughtFeedBlock,
+  SduiVerticalVideoPagerBlock,
+} from './blocks/SduiNativeDomainBlocks';
+
+export type { SduiBlockRenderProps };
+
+type SduiBlockComponent = ComponentType<SduiBlockRenderProps>;
+
+const REGISTRY: Record<string, SduiBlockComponent> = {
+  text: SduiTextBlock,
+  column: SduiColumnBlock,
+  row: SduiRowBlock,
+  scroll: SduiScrollBlock,
+  button: SduiButtonBlock,
+  spacer: SduiSpacerBlock,
+  info_banner: SduiInfoBannerBlock,
+  native_ad: SduiNativeAdBlock,
+  card: SduiCardBlock,
+  section_header: SduiSectionHeaderBlock,
+  list_item: SduiListItemBlock,
+  toggle_row: SduiToggleRowBlock,
+  chip: SduiChipBlock,
+  chip_row: SduiChipRowBlock,
+  discover_grid: SduiDiscoverGridBlock,
+  discover_profile_card: SduiDiscoverProfileCardBlock,
+  discover_map: SduiDiscoverMapBlock,
+  text_field: SduiTextFieldBlock,
+  story_rail: SduiStoryRailBlock,
+  profile_completion_banner: SduiProfileCompletionBannerBlock,
+  flash_inbox_list: SduiFlashInboxListBlock,
+  chat_inbox_list: SduiChatInboxListBlock,
+  chat_thread: SduiChatThreadBlock,
+  social_post_feed: SduiSocialPostFeedBlock,
+  thought_feed: SduiThoughtFeedBlock,
+  vertical_video_pager: SduiVerticalVideoPagerBlock,
+  profile_view: SduiProfileViewBlock,
+  profile_self: SduiProfileSelfBlock,
+  profile_setup: SduiProfileSetupBlock,
+  profile_onboarding: SduiProfileOnboardingBlock,
+  album_grid: SduiAlbumGridBlock,
+  album_detail: SduiAlbumDetailBlock,
+  new_post_composer: SduiNewPostComposerBlock,
+  post_comments: SduiPostCommentsBlock,
+  social_profile: SduiSocialProfileBlock,
+  settings_home: SduiSettingsHomeBlock,
+  discover_browse_location: SduiDiscoverBrowseLocationBlock,
+};
+
+export function resolveSduiBlockComponent(type: string): SduiBlockComponent {
+  return REGISTRY[type] ?? SduiUnknownBlock;
+}
+
+export function registerSduiBlockComponent(type: string, component: SduiBlockComponent) {
+  REGISTRY[type] = component;
+}
+
+export type BlockNodeProps = {
+  block: SduiBlock;
+  data: Record<string, unknown>;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+};
+
+export function renderBlockTree(
+  block: SduiBlock,
+  data: Record<string, unknown>,
+  onAction: BlockNodeProps['onAction'],
+): ReactNode {
+  const Component = resolveSduiBlockComponent(block.type);
+  const childNodes = block.children.map((child) => (
+    <BlockNode key={child.id} block={child} data={data} onAction={onAction} />
+  ));
+  return (
+    <Component block={block} data={data} onAction={onAction}>
+      {childNodes}
+    </Component>
+  );
+}
+
+function BlockNode({ block, data, onAction }: BlockNodeProps) {
+  return <>{renderBlockTree(block, data, onAction)}</>;
+}

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

@@ -0,0 +1,91 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import type { SduiBlock } from '@proulr/sdui-contract';
+import type { DiscoverNearbyProfileWire } from './lib/discover-profile-formatters';
+
+export type SduiHybridStoryRailProps = {
+  surface: 'discover' | 'vibes';
+};
+
+export type SduiHybridProfileCompletionBannerProps = {
+  percent: number;
+  onDismiss: () => void;
+  onComplete: () => void;
+};
+
+export type SduiHybridDiscoverMapProps = {
+  center: { lat: number; lng: number };
+  label: string;
+  height: number;
+  onCenterChange: (coords: { lat: number; lng: number }) => void;
+  centerMoveToken: number;
+};
+
+export type SduiHybridDiscoverProfileCardProps = {
+  person: DiscoverNearbyProfileWire;
+  width: number;
+  onPress: () => void;
+};
+
+export type SduiNativeBlockRenderProps = {
+  block: SduiBlock;
+  data: Record<string, unknown>;
+  onAction: (actionId: string, vars?: Record<string, string>) => void;
+  dataRef?: string;
+  conversationIdRef?: string;
+  peerIdRef?: string;
+  peerNameRef?: string;
+  handleRef?: string;
+  postIdRef?: string;
+  albumIdRef?: string;
+  profileIdRef?: string;
+};
+
+export type SduiHybridRenderers = {
+  renderStoryRail?: (props: SduiHybridStoryRailProps) => ReactNode;
+  renderProfileCompletionBanner?: (props: SduiHybridProfileCompletionBannerProps) => ReactNode;
+  renderDiscoverMap?: (props: SduiHybridDiscoverMapProps) => ReactNode;
+  renderDiscoverProfileCard?: (props: SduiHybridDiscoverProfileCardProps) => ReactNode;
+  renderTextField?: (props: {
+    dataRef: string;
+    placeholder: string;
+    value: string;
+    submitActionId?: string;
+    onSubmit: () => void;
+  }) => ReactNode;
+  onDiscoverMapCenterChange?: (coords: { lat: number; lng: number }) => void;
+  renderFlashInboxList?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderChatInboxList?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderChatThread?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderSocialPostFeed?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderThoughtFeed?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderVerticalVideoPager?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderProfileView?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderProfileSelf?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderProfileSetup?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderProfileOnboarding?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderAlbumGrid?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderAlbumDetail?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderNewPostComposer?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderPostComments?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderSocialProfile?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderSettingsHome?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderDiscoverBrowseLocation?: (props: SduiNativeBlockRenderProps) => ReactNode;
+};
+
+const SduiHybridRendererContext = createContext<SduiHybridRenderers>({});
+
+export function SduiHybridRendererProvider({
+  value,
+  children,
+}: {
+  value: SduiHybridRenderers;
+  children: ReactNode;
+}) {
+  return (
+    <SduiHybridRendererContext.Provider value={value}>{children}</SduiHybridRendererContext.Provider>
+  );
+}
+
+export function useSduiHybridRenderer(): SduiHybridRenderers {
+  return useContext(SduiHybridRendererContext);
+}

package/src/renderer/sdui-layout-debug.tsx

@@ -0,0 +1,107 @@
+import React, { type ReactNode } from 'react';
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+/** Desligado por padrão. Ative com EXPO_PUBLIC_SDUI_LAYOUT_DEBUG=true no .env */
+export const SDUI_LAYOUT_DEBUG =
+  typeof __DEV__ !== 'undefined' &&
+  __DEV__ &&
+  process.env.EXPO_PUBLIC_SDUI_LAYOUT_DEBUG === 'true';
+
+export type SduiLayoutDebugLayer = 'renderer' | 'block' | 'column' | 'scroll' | 'native';
+
+const LAYER_STYLES: Record<
+  SduiLayoutDebugLayer,
+  { borderColor: string; backgroundColor: string; label: string }
+> = {
+  renderer: {
+    borderColor: '#34C759',
+    backgroundColor: 'rgba(52,199,89,0.10)',
+    label: 'SduiScreenRenderer',
+  },
+  block: {
+    borderColor: '#007AFF',
+    backgroundColor: 'rgba(0,122,255,0.08)',
+    label: 'block root',
+  },
+  column: {
+    borderColor: '#5856D6',
+    backgroundColor: 'rgba(88,86,214,0.08)',
+    label: 'Column',
+  },
+  scroll: {
+    borderColor: '#32ADE6',
+    backgroundColor: 'rgba(50,173,230,0.08)',
+    label: 'Scroll',
+  },
+  native: {
+    borderColor: '#AF52DE',
+    backgroundColor: 'rgba(175,82,222,0.10)',
+    label: 'NativeBlockShell',
+  },
+};
+
+export function sduiDebugViewStyle(layer: SduiLayoutDebugLayer): ViewStyle {
+  if (!SDUI_LAYOUT_DEBUG) return {};
+  const layerStyle = LAYER_STYLES[layer];
+  return {
+    borderWidth: 2,
+    borderColor: layerStyle.borderColor,
+    backgroundColor: layerStyle.backgroundColor,
+  };
+}
+
+export function SduiLayoutDebugLabel({
+  layer,
+  extra,
+}: {
+  layer: SduiLayoutDebugLayer;
+  extra?: string;
+}) {
+  if (!SDUI_LAYOUT_DEBUG) return null;
+  const layerStyle = LAYER_STYLES[layer];
+  return (
+    <View style={styles.labelHost} pointerEvents="none">
+      <Text style={styles.labelText}>
+        {layerStyle.label}
+        {extra ? ` · ${extra}` : ''}
+      </Text>
+    </View>
+  );
+}
+
+export function SduiLayoutDebugFrame({
+  layer,
+  extra,
+  style,
+  children,
+}: {
+  layer: SduiLayoutDebugLayer;
+  extra?: string;
+  style?: StyleProp<ViewStyle>;
+  children: ReactNode;
+}) {
+  return (
+    <View style={[sduiDebugViewStyle(layer), style]}>
+      <SduiLayoutDebugLabel layer={layer} extra={extra} />
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  labelHost: {
+    position: 'absolute',
+    top: 2,
+    left: 2,
+    zIndex: 9999,
+    backgroundColor: 'rgba(0,0,0,0.82)',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  labelText: {
+    color: '#FFFFFF',
+    fontSize: 10,
+    fontWeight: '700',
+  },
+});

package/src/renderer/theme/proulr-theme.ts

@@ -0,0 +1,164 @@
+import { Platform, ViewStyle } from 'react-native';
+
+/** Proulr UI theme — Night Stalker OLED. */
+
+export const m3Colors = {
+  primary: '#D946EF',
+  onPrimary: '#FFFFFF',
+  primaryContainer: 'rgba(217,70,239,0.22)',
+  onPrimaryContainer: '#F0ABFC',
+  secondary: '#00E5FF',
+  onSecondary: '#000000',
+  secondaryContainer: 'rgba(0,229,255,0.18)',
+  onSecondaryContainer: '#84FFFF',
+  tertiary: '#FF2D55',
+  onTertiary: '#FFFFFF',
+  tertiaryContainer: 'rgba(255,45,85,0.20)',
+  onTertiaryContainer: '#FF8FA8',
+  surface: '#000000',
+  onSurface: '#FFFFFF',
+  onSurfaceVariant: '#A3A3A3',
+  surfaceContainer: '#0A0A0A',
+  surfaceContainerHigh: '#141414',
+  surfaceContainerHighest: '#222222',
+  outline: '#1A1A1A',
+  outlineVariant: '#2A2A2A',
+  error: '#FF4444',
+  onError: '#FFFFFF',
+  errorContainer: 'rgba(255,68,68,0.22)',
+  onErrorContainer: '#FF8A80',
+  inverseSurface: '#FFFFFF',
+  inverseOnSurface: '#000000',
+  scrim: 'rgba(0,0,0,0.78)',
+  online: '#34FF88',
+} as const;
+
+export const m3Shape = {
+  cornerExtraSmall: 4,
+  cornerSmall: 8,
+  cornerMedium: 12,
+  cornerLarge: 16,
+  cornerExtraLarge: 24,
+  cornerFull: 999,
+} as const;
+
+export const m3Type = {
+  display: { fontFamily: 'Montserrat_800ExtraBold', fontSize: 57, lineHeight: 64 },
+  headline: { fontFamily: 'Montserrat_700Bold', fontSize: 28, lineHeight: 36 },
+  title: { fontFamily: 'Montserrat_600SemiBold', fontSize: 22, lineHeight: 28 },
+  titleSmall: { fontFamily: 'Montserrat_600SemiBold', fontSize: 16, lineHeight: 24 },
+  body: { fontFamily: 'Montserrat_400Regular', fontSize: 16, lineHeight: 24 },
+  bodySmall: { fontFamily: 'Montserrat_400Regular', fontSize: 14, lineHeight: 20 },
+  label: { fontFamily: 'Montserrat_500Medium', fontSize: 14, lineHeight: 20 },
+  labelSmall: { fontFamily: 'Montserrat_500Medium', fontSize: 12, lineHeight: 16 },
+} as const;
+
+export const colors = {
+  bg: '#000000',
+  surface: '#0A0A0A',
+  surface2: '#141414',
+  border: '#1A1A1A',
+  borderStrong: '#2A2A2A',
+  textPrimary: '#FFFFFF',
+  textSecondary: '#A3A3A3',
+  textMuted: '#666666',
+  white: '#FFFFFF',
+  textOnAccent: '#FFFFFF',
+  accent: '#D946EF',
+  accentSoft: 'rgba(217,70,239,0.22)',
+  accentText: '#F0ABFC',
+  highlight: '#00E5FF',
+  highlightSoft: 'rgba(0,229,255,0.18)',
+  headerStart: '#2D0A35',
+  headerEnd: '#D946EF',
+  online: '#34FF88',
+  onlineSoft: 'rgba(52,255,136,0.18)',
+  danger: '#FF4444',
+  dangerSoft: 'rgba(255,68,68,0.22)',
+  overlay: 'rgba(0,0,0,0.78)',
+  surfaceGlass: 'rgba(255,255,255,0.06)',
+  primary: m3Colors.primary,
+  onSurface: m3Colors.onSurface,
+  onSurfaceVariant: m3Colors.onSurfaceVariant,
+};
+
+export const radius = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  pill: 999,
+};
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+export const gradients = {
+  brand: ['#7A0D8A', '#D946EF'] as const,
+  header: ['#2D0A35', '#D946EF'] as const,
+  headerGlow: ['rgba(217,70,239,0.20)', 'rgba(217,70,239,0)'] as const,
+  neonBorder: [colors.headerEnd, colors.accent] as const,
+};
+
+export const fonts = {
+  regular: 'Montserrat_400Regular',
+  medium: 'Montserrat_500Medium',
+  semibold: 'Montserrat_600SemiBold',
+  bold: 'Montserrat_700Bold',
+  extrabold: 'Montserrat_800ExtraBold',
+};
+
+export const shadows = {
+  card: Platform.select<ViewStyle>({
+    ios: {
+      shadowColor: '#D946EF',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.12,
+      shadowRadius: 12,
+    },
+    android: { elevation: 3 },
+    default: {},
+  }),
+  elevated: Platform.select<ViewStyle>({
+    ios: {
+      shadowColor: '#00E5FF',
+      shadowOffset: { width: 0, height: 6 },
+      shadowOpacity: 0.14,
+      shadowRadius: 16,
+    },
+    android: { elevation: 6 },
+    default: {},
+  }),
+  subtle: Platform.select<ViewStyle>({
+    ios: {
+      shadowColor: '#000000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.4,
+      shadowRadius: 6,
+    },
+    android: { elevation: 2 },
+    default: {},
+  }),
+};
+
+export const m3Elevation = {
+  level0: {},
+  level1: shadows.subtle,
+  level2: shadows.card,
+  level3: shadows.elevated,
+} as const;
+
+export const cardStyle = {
+  backgroundColor: m3Colors.surfaceContainer,
+  borderRadius: m3Shape.cornerLarge,
+  padding: spacing.sm,
+  borderWidth: 1,
+  borderColor: m3Colors.outlineVariant,
+  ...m3Elevation.level2,
+} as const;