@proulr/sdui-components 0.1.11 → 0.1.13

package/package.json

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

package/src/renderer/ads/native-ad-catalog.ts

@@ -1,11 +1,21 @@
+import type { ReactElement } from 'react';
+
 export type NativeAdPlacementConfig = {
   aspectRatio?: number;
 };
 
+export type NativeAdWebSlotProps = {
+  placement: string;
+  width?: number;
+  aspectRatio: number;
+};
+
 export type NativeAdCatalog = {
   isEnabled: () => boolean;
   resolveAdUnitId: (placement: string, testNativeUnitId: string) => string;
   getPlacementConfig?: (placement: string) => NativeAdPlacementConfig | undefined;
+  /** Web-only: AdSense (ou outro). Mobile ignora. */
+  renderWebSlot?: (props: NativeAdWebSlotProps) => ReactElement | null;
 };
 
 let nativeAdCatalog: NativeAdCatalog | null = null;

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -126,6 +126,11 @@ export function SduiDiscoverProfileCardBlock({ block, data, onAction }: SduiBloc
           <Text style={styles.newBadgeText}>Novo</Text>
         </View>
       ) : null}
+      {person.traveling ? (
+        <View style={[styles.travelBadge, person.has_new_media ? styles.travelBadgeOffset : null]}>
+          <Text style={styles.travelBadgeText}>Viajando</Text>
+        </View>
+      ) : null}
       <View style={styles.profileInfo}>
         <Text style={styles.profileName} numberOfLines={1}>
           {person.display_name ?? 'Alguém'}
@@ -394,6 +399,19 @@ const styles = StyleSheet.create({
     borderRadius: m3Shape.cornerSmall,
   },
   newBadgeText: { color: m3Colors.onPrimary, fontSize: 11, fontWeight: '700' },
+  travelBadge: {
+    position: 'absolute',
+    top: spacing.sm,
+    right: spacing.sm,
+    backgroundColor: m3Colors.secondaryContainer,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: m3Shape.cornerSmall,
+  },
+  travelBadgeOffset: {
+    top: spacing.sm + 24,
+  },
+  travelBadgeText: { color: m3Colors.onSecondaryContainer, fontSize: 11, fontWeight: '700' },
   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 },

package/src/renderer/blocks/SduiNativeAdBlock.web.tsx

@@ -1,6 +1,41 @@
+import {
+  DEFAULT_NATIVE_AD_ASPECT_RATIO,
+  DEFAULT_NATIVE_AD_PLACEMENT,
+  getNativeAdCatalog,
+} from '../ads/native-ad-catalog';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
-/** Web stub — native ads require a native build. */
-export function SduiNativeAdBlock(_props: SduiBlockRenderProps) {
-  return null;
+function resolveBlockWidth(props: Record<string, unknown>): number | undefined {
+  if (typeof props.width === 'number' && props.width > 0) return props.width;
+  return undefined;
+}
+
+function resolvePlacement(props: Record<string, unknown>): string {
+  return typeof props.placement === 'string' && props.placement.length > 0
+    ? props.placement
+    : DEFAULT_NATIVE_AD_PLACEMENT;
+}
+
+function resolveAspectRatio(placement: string, props: Record<string, unknown>): number {
+  if (typeof props.aspect_ratio === 'number' && props.aspect_ratio > 0) {
+    return props.aspect_ratio;
+  }
+
+  const catalog = getNativeAdCatalog();
+  const placementConfig = catalog?.getPlacementConfig?.(placement);
+  return placementConfig?.aspectRatio ?? DEFAULT_NATIVE_AD_ASPECT_RATIO;
+}
+
+/** Web — AdSense via `catalog.renderWebSlot` (configurado no app). */
+export function SduiNativeAdBlock({ block }: SduiBlockRenderProps) {
+  const catalog = getNativeAdCatalog();
+  if (!catalog?.isEnabled() || !catalog.renderWebSlot) {
+    return null;
+  }
+
+  const placement = resolvePlacement(block.props);
+  const width = resolveBlockWidth(block.props);
+  const aspectRatio = resolveAspectRatio(placement, block.props);
+
+  return catalog.renderWebSlot({ placement, width, aspectRatio });
 }

package/src/renderer/index.ts

@@ -50,6 +50,10 @@ export {
   DEFAULT_NATIVE_AD_PLACEMENT,
   DEFAULT_NATIVE_AD_ASPECT_RATIO,
 } from './ads/native-ad-catalog';
-export type { NativeAdCatalog, NativeAdPlacementConfig } from './ads/native-ad-catalog';
+export type {
+  NativeAdCatalog,
+  NativeAdPlacementConfig,
+  NativeAdWebSlotProps,
+} from './ads/native-ad-catalog';
 export * from './ui';
 export { brToISO, isValidDateBR, maskDateBR } from './lib/brazilian-date-input';

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

@@ -9,6 +9,7 @@ export type DiscoverNearbyProfileWire = {
   last_seen?: string | null;
   is_creator?: boolean | null;
   has_new_media?: boolean | null;
+  traveling?: boolean | null;
 };
 
 export type DiscoverGridProfileItemWire = {
@@ -38,7 +39,17 @@ export function profileAgeFromBirthDate(birthDate: string | null | undefined): n
   return age >= 0 ? age : null;
 }
 
-export function formatDistanceLabel(distanceM: number): string {
+export function formatDistanceLabel(
+  distanceM: number,
+  unit: 'metric' | 'imperial' = 'metric',
+): string {
+  if (unit === 'imperial') {
+    const feet = distanceM * 3.28084;
+    if (feet < 528) return `${Math.round(feet)} ft`;
+    const miles = distanceM / 1609.34;
+    return miles < 10 ? `${miles.toFixed(1)} mi` : `${Math.round(miles)} mi`;
+  }
+
   if (distanceM < 1000) return `${Math.round(distanceM)} m`;
   const km = distanceM / 1000;
   return km < 10 ? `${km.toFixed(1)} km` : `${Math.round(km)} km`;

package/src/renderer/ui/compose-pill-input.tsx

@@ -235,6 +235,10 @@ export type ComposePillInputProps = {
   /** Bare row without pill chrome — text field only grows inline (ex.: comentários). */
   bare?: boolean;
   rowAlignItems?: 'center' | 'flex-end';
+  textInputProps?: Omit<
+    ComposePillTextFieldProps,
+    'value' | 'onChangeText' | 'variant' | 'maxLines' | 'inputRef' | 'layout' | 'editable'
+  >;
 };
 
 function composePillVariantColors(variant: ComposePillVariant) {
@@ -378,6 +382,7 @@ export function ComposePillInput({
   transparentWrap = false,
   bare = false,
   rowAlignItems = bare ? 'center' : 'flex-end',
+  textInputProps,
 }: ComposePillInputProps) {
   const layout = useComposePillLineLayout(value, { maxLines });
   const { isMultiline, pillHeight, resetLineCount } = layout;
@@ -406,6 +411,7 @@ export function ComposePillInput({
       onBlur={onBlur}
       editable={!disabled}
       style={bare ? styles.bareInput : undefined}
+      {...textInputProps}
     />
   );