@proulr/sdui-components 0.1.51 → 0.1.55

package/package.json

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

package/src/bdc/components/bdc-components.test.ts

@@ -6,12 +6,13 @@ import {
   DiscoverMap,
   DiscoverProfileCard,
 } from './discover';
-import { TextField } from './forms';
+import { SelectRow, TextField } from './forms';
 import {
   ChatInboxCapabilities,
   EmptyState,
   FlashInboxCapabilities,
   FloatingCreateMenu,
+  InboxHubChrome,
   InboxPersonRow,
   InboxSearchField,
   ProfileVisitsCapabilities,
@@ -28,6 +29,7 @@ import {
   DiscoverBrowseLocation,
   NewPostComposer,
   NewStoryComposer,
+  StoryViewersPanel,
   PostComments,
   ProfileOnboarding,
   ProfileReport,
@@ -85,6 +87,7 @@ describe('bdc discover/forms/social/inbox/native', () => {
     expect(DiscoverProfileCard({ profileRef: 'p' }).type).toBe('discover_profile_card');
     expect(DiscoverMap({}).type).toBe('discover_map');
     expect(TextField({ placeholder: 'x' }).type).toBe('text_field');
+    expect(SelectRow({ label: 'Pick', optionsRef: 'form_options.gender' }).type).toBe('select_row');
     expect(StoryRail({ surface: 'discover' }).type).toBe('story_rail');
     expect(ProfileCompletionBanner({}).type).toBe('profile_completion_banner');
   });
@@ -97,6 +100,11 @@ describe('bdc discover/forms/social/inbox/native', () => {
     expect(ChatInboxCapabilities({}).type).toBe('chat_inbox_capabilities');
     expect(FlashInboxCapabilities({}).type).toBe('flash_inbox_capabilities');
     expect(ProfileVisitsCapabilities({}).type).toBe('profile_visits_capabilities');
+    expect(InboxHubChrome({}).type).toBe('inbox_hub_chrome');
+    expect(InboxHubChrome({}).props).toMatchObject({
+      hub_ref: 'hub',
+      active_filter_ref: 'active_filter',
+    });
     const menu = FloatingCreateMenu({
       id: 'fab',
       closedLabel: '+',
@@ -123,6 +131,7 @@ describe('bdc discover/forms/social/inbox/native', () => {
       AlbumDetail,
       NewPostComposer,
       NewStoryComposer,
+      StoryViewersPanel,
       PostComments,
       SocialProfile,
       SettingsHome,

package/src/bdc/components/forms.tsx

@@ -18,3 +18,13 @@ type TextFieldProps = LayoutProps & {
 };
 
 export const TextField: BdcComponent = (props) => layoutBlock('text_field', props as TextFieldProps);
+
+type SelectRowProps = LayoutProps & {
+  label?: string;
+  dataRef?: string;
+  optionsRef?: string;
+  changeActionId?: string;
+  disabled?: boolean;
+};
+
+export const SelectRow: BdcComponent = (props) => layoutBlock('select_row', props as SelectRowProps);

package/src/bdc/components/inbox.tsx

@@ -81,6 +81,26 @@ type FloatingCreateMenuProps = {
   actions: FloatingCreateMenuActionProps[];
 };
 
+type InboxHubChromeProps = {
+  id?: string;
+  hubRef?: string;
+  activeFilterRef?: string;
+};
+
+/**
+ * Overlay do seletor/filtros do hub inbox (sibling do Scroll).
+ * Hybrid nativo: collapse + badges realtime; actions via onAction.
+ */
+export const InboxHubChrome: BdcComponent = (props) =>
+  leafBlock('inbox_hub_chrome', {
+    ...(typeof (props as InboxHubChromeProps).id === 'string'
+      ? { id: (props as InboxHubChromeProps).id }
+      : {}),
+    hub_ref: (props as InboxHubChromeProps).hubRef ?? 'hub',
+    active_filter_ref:
+      (props as InboxHubChromeProps).activeFilterRef ?? 'active_filter',
+  });
+
 /** Overlay FAB “+” (sibling do Scroll) — ações via action_id do wire. */
 export const FloatingCreateMenu: BdcComponent = (props) => {
   const menu = props as FloatingCreateMenuProps;

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

@@ -30,6 +30,7 @@ export const AlbumGrid: BdcComponent = (props) => nativeBlock('album_grid', prop
 export const AlbumDetail: BdcComponent = (props) => nativeBlock('album_detail', props);
 export const NewPostComposer: BdcComponent = (props) => nativeBlock('new_post_composer', props);
 export const NewStoryComposer: BdcComponent = (props) => nativeBlock('new_story_composer', props);
+export const StoryViewersPanel: BdcComponent = (props) => nativeBlock('story_viewers_panel', props);
 export const PostComments: BdcComponent = (props) => nativeBlock('post_comments', props);
 export const SocialProfile: BdcComponent = (props) => nativeBlock('social_profile', props);
 export const SettingsHome: BdcComponent = (props) => nativeBlock('settings_home', props);

package/src/bdc/index.ts

@@ -23,13 +23,14 @@ export {
   EmptyState,
   FlashInboxCapabilities,
   FloatingCreateMenu,
+  InboxHubChrome,
   InboxPersonRow,
   InboxSearchField,
   ProfileVisitsCapabilities,
   SegmentedTabs,
 } from './components/inbox';
 export type { FloatingCreateMenuActionProps } from './components/inbox';
-export { TextField } from './components/forms';
+export { TextField, SelectRow } from './components/forms';
 export { ProfileCompletionBanner, StoryRail } from './components/social';
 export {
   AlbumDetail,
@@ -37,6 +38,7 @@ export {
   ChatThread,
   NewPostComposer,
   NewStoryComposer,
+  StoryViewersPanel,
   PostComments,
   ProfileOnboarding,
   ProfileReport,

package/src/catalog/block-types.ts

@@ -9,6 +9,8 @@ export const SDUI_BLOCK_TYPES = [
   'spacer',
   'info_banner',
   'native_ad',
+  'inbox_hub_chrome',
+  'select_row',
 ] as const;
 
 export type SduiBlockType = (typeof SDUI_BLOCK_TYPES)[number];

package/src/catalog/catalog.test.ts

@@ -32,7 +32,9 @@ import {
 describe('block-types', () => {
   it('lists known block types', () => {
     expect(SDUI_BLOCK_TYPES).toContain('text');
+    expect(SDUI_BLOCK_TYPES).toContain('inbox_hub_chrome');
     expect(isKnownBlockType('button')).toBe(true);
+    expect(isKnownBlockType('inbox_hub_chrome')).toBe(true);
     expect(isKnownBlockType('unknown_block')).toBe(false);
   });
 });

package/src/renderer/SduiScreenRenderer.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 /** Blocos overlay (FAB etc.) — não competem por flex com o Scroll. */
-const OVERLAY_BLOCK_TYPES = new Set(['floating_create_menu']);
+const OVERLAY_BLOCK_TYPES = new Set(['floating_create_menu', 'inbox_hub_chrome']);
 
 export function SduiScreenRenderer({ screen, onAction }: Props) {
   return (

package/src/renderer/blocks/SduiInboxBlocks.tsx

@@ -227,6 +227,20 @@ export function SduiFloatingCreateMenuBlock(props: SduiBlockRenderProps) {
   return <>{hybrid.renderFloatingCreateMenu(props)}</>;
 }
 
+export function SduiInboxHubChromeBlock(props: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  if (typeof hybrid.renderInboxHubChrome !== 'function') return null;
+  return (
+    <>
+      {hybrid.renderInboxHubChrome({
+        ...props,
+        hubRef: readStringProp(props.block, 'hub_ref') ?? 'hub',
+        activeFilterRef: readStringProp(props.block, 'active_filter_ref') ?? 'active_filter',
+      })}
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   segmentTrack: {
     flexDirection: 'row',

package/src/renderer/blocks/SduiLayoutBlocks.tsx

@@ -5,9 +5,11 @@ import { Card } from '../ui/Card';
 import { AppIcon } from '../ui/app-icon';
 import { colors, fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';
 import {
+  resolveDataRef,
   resolveDataRefBoolean,
   resolveDataRefString,
 } from '../lib/resolve-data-ref';
+import { SelectRow as UiSelectRow } from '../ui/SelectRow';
 import { resolveViewStyleProps } from '../theme/resolve-style-props';
 import type { SduiBlockRenderProps } from './SduiPrimitiveBlocks';
 
@@ -117,6 +119,29 @@ export function SduiToggleRowBlock({ block, data, onAction }: SduiBlockRenderPro
   );
 }
 
+export function SduiSelectRowBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const label = readStringProp(block, 'label') ?? '';
+  const dataRef = readStringProp(block, 'data_ref');
+  const optionsRef = readStringProp(block, 'options_ref');
+  const changeActionId = readStringProp(block, 'change_action_id');
+  const disabled = readBooleanProp(block, 'disabled');
+  const value = dataRef ? resolveDataRefString(data, dataRef) : '';
+  const optionsRaw = optionsRef ? resolveDataRef(data, optionsRef) : [];
+  const options = Array.isArray(optionsRaw) ? optionsRaw.map(String) : [];
+
+  return (
+    <UiSelectRow
+      label={label}
+      value={value || null}
+      options={options}
+      onChange={(next) => {
+        if (disabled || !changeActionId) return;
+        onAction(changeActionId, { value: next });
+      }}
+    />
+  );
+}
+
 const styles = StyleSheet.create({
   card: {
     paddingVertical: spacing.xs,

package/src/renderer/blocks/SduiNativeDomainBlocks.tsx

@@ -30,6 +30,7 @@ function NativeBlockShell({
     | 'renderAlbumDetail'
     | 'renderNewPostComposer'
     | 'renderNewStoryComposer'
+    | 'renderStoryViewersPanel'
     | 'renderPostComments'
     | 'renderSocialProfile'
     | 'renderSettingsHome'
@@ -118,6 +119,12 @@ export function SduiNewStoryComposerBlock(props: SduiBlockRenderProps) {
   return <NativeBlockShell {...props} rendererKey="renderNewStoryComposer" fallbackLabel="Novo story" />;
 }
 
+export function SduiStoryViewersPanelBlock(props: SduiBlockRenderProps) {
+  return (
+    <NativeBlockShell {...props} rendererKey="renderStoryViewersPanel" fallbackLabel="Story viewers" />
+  );
+}
+
 export function SduiPostCommentsBlock(props: SduiBlockRenderProps) {
   return <NativeBlockShell {...props} rendererKey="renderPostComments" fallbackLabel="Comentários" />;
 }

package/src/renderer/index.ts

@@ -12,11 +12,13 @@ export {
 export {
   SduiChromeScrollProvider,
   useSduiChromeScroll,
+  useSduiChromeScrollOverlayRegistry,
 } from './sdui-chrome-scroll-context';
 export type {
   SduiChromeScrollConfig,
   SduiChromeScrollInsetProps,
   SduiChromeScrollInsets,
+  SduiChromeScrollOverlayContribution,
 } from './sdui-chrome-scroll-context';
 export type {
   SduiHybridDiscoverMapProps,

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

@@ -1,9 +1,18 @@
-import React, { createContext, useContext, type ReactElement, type ReactNode } from 'react';
-import type {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  RefreshControlProps,
-  ViewStyle,
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  Platform,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type RefreshControlProps,
+  type ViewStyle,
 } from 'react-native';
 
 export type SduiChromeScrollInsetProps = {
@@ -31,7 +40,74 @@ export type SduiChromeScrollConfig = {
   scrollViewProps?: Record<string, unknown>;
 };
 
+export type SduiChromeScrollOverlayContribution = {
+  /** Altura reservada abaixo do AppHeader (ex.: seletor + filtros do inbox). */
+  extraTopInset?: number;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+
+type OverlayRegistry = {
+  register: (id: string, contribution: SduiChromeScrollOverlayContribution) => () => void;
+};
+
 const SduiChromeScrollContext = createContext<SduiChromeScrollConfig | null>(null);
+const SduiChromeScrollOverlayRegistryContext = createContext<OverlayRegistry | null>(null);
+
+function mergeChromeScrollConfig(
+  base: SduiChromeScrollConfig,
+  overlays: Map<string, SduiChromeScrollOverlayContribution>,
+): SduiChromeScrollConfig {
+  let extraTop = 0;
+  const scrollHandlers: ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)[] = [];
+  if (base.onScroll) scrollHandlers.push(base.onScroll);
+
+  for (const contribution of overlays.values()) {
+    if (typeof contribution.extraTopInset === 'number' && contribution.extraTopInset > 0) {
+      extraTop = Math.max(extraTop, contribution.extraTopInset);
+    }
+    if (contribution.onScroll) scrollHandlers.push(contribution.onScroll);
+  }
+
+  if (extraTop <= 0 && scrollHandlers.length <= (base.onScroll ? 1 : 0)) {
+    return base;
+  }
+
+  const contentContainerStyle: ViewStyle = { ...base.contentContainerStyle };
+  let scrollInsetProps: SduiChromeScrollInsetProps = { ...base.scrollInsetProps };
+
+  if (extraTop > 0) {
+    // Paridade com buildSduiChromeScrollConfig(extraTopInset): iOS reserva header via contentInset.
+    const headerTop = base.chromeInsets.top;
+    const insetTop = headerTop + extraTop;
+    contentContainerStyle.paddingTop = Platform.OS === 'ios' ? extraTop : insetTop;
+    if (Platform.OS === 'ios') {
+      scrollInsetProps = {
+        contentInset: {
+          top: insetTop,
+          bottom: base.chromeInsets.bottom,
+        },
+        contentOffset: { x: 0, y: -insetTop },
+        automaticallyAdjustContentInsets: false,
+        scrollIndicatorInsets: {
+          top: insetTop,
+          bottom: base.chromeInsets.bottom,
+        },
+      };
+    }
+  }
+
+  return {
+    ...base,
+    contentContainerStyle,
+    scrollInsetProps,
+    onScroll:
+      scrollHandlers.length > 0
+        ? (event) => {
+            for (const handler of scrollHandlers) handler(event);
+          }
+        : undefined,
+  };
+}
 
 export function SduiChromeScrollProvider({
   value,
@@ -40,11 +116,43 @@ export function SduiChromeScrollProvider({
   value: SduiChromeScrollConfig;
   children: ReactNode;
 }) {
+  const [overlays, setOverlays] = useState(
+    () => new Map<string, SduiChromeScrollOverlayContribution>(),
+  );
+
+  const register = useCallback((id: string, contribution: SduiChromeScrollOverlayContribution) => {
+    setOverlays((prev) => {
+      const next = new Map(prev);
+      next.set(id, contribution);
+      return next;
+    });
+    return () => {
+      setOverlays((prev) => {
+        if (!prev.has(id)) return prev;
+        const next = new Map(prev);
+        next.delete(id);
+        return next;
+      });
+    };
+  }, []);
+
+  const registry = useMemo<OverlayRegistry>(() => ({ register }), [register]);
+  const merged = useMemo(() => mergeChromeScrollConfig(value, overlays), [overlays, value]);
+
   return (
-    <SduiChromeScrollContext.Provider value={value}>{children}</SduiChromeScrollContext.Provider>
+    <SduiChromeScrollOverlayRegistryContext.Provider value={registry}>
+      <SduiChromeScrollContext.Provider value={merged}>{children}</SduiChromeScrollContext.Provider>
+    </SduiChromeScrollOverlayRegistryContext.Provider>
   );
 }
 
 export function useSduiChromeScroll(): SduiChromeScrollConfig | null {
   return useContext(SduiChromeScrollContext);
 }
+
+/**
+ * Hybrids de overlay (ex.: inbox_hub_chrome) registram inset/onScroll sem especializar o shell.
+ */
+export function useSduiChromeScrollOverlayRegistry(): OverlayRegistry | null {
+  return useContext(SduiChromeScrollOverlayRegistryContext);
+}

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

@@ -16,6 +16,7 @@ import {
   SduiCardBlock,
   SduiListItemBlock,
   SduiSectionHeaderBlock,
+  SduiSelectRowBlock,
   SduiToggleRowBlock,
 } from './blocks/SduiLayoutBlocks';
 import {
@@ -38,6 +39,7 @@ import {
   SduiInboxSearchFieldBlock,
   SduiProfileVisitsCapabilitiesBlock,
   SduiFloatingCreateMenuBlock,
+  SduiInboxHubChromeBlock,
   SduiSegmentedTabsBlock,
 } from './blocks/SduiInboxBlocks';
 import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
@@ -48,6 +50,7 @@ import {
   SduiChatThreadBlock,
   SduiNewPostComposerBlock,
   SduiNewStoryComposerBlock,
+  SduiStoryViewersPanelBlock,
   SduiPostCommentsBlock,
   SduiProfileOnboardingBlock,
   SduiProfileSelfBlock,
@@ -85,6 +88,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   section_header: SduiSectionHeaderBlock,
   list_item: SduiListItemBlock,
   toggle_row: SduiToggleRowBlock,
+  select_row: SduiSelectRowBlock,
   chip: SduiChipBlock,
   chip_row: SduiChipRowBlock,
   segmented_tabs: SduiSegmentedTabsBlock,
@@ -95,6 +99,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   flash_inbox_capabilities: SduiFlashInboxCapabilitiesBlock,
   profile_visits_capabilities: SduiProfileVisitsCapabilitiesBlock,
   floating_create_menu: SduiFloatingCreateMenuBlock,
+  inbox_hub_chrome: SduiInboxHubChromeBlock,
   discover_grid: SduiDiscoverGridBlock,
   discover_profile_card: SduiDiscoverProfileCardBlock,
   discover_map: SduiDiscoverMapBlock,
@@ -113,6 +118,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   album_detail: SduiAlbumDetailBlock,
   new_post_composer: SduiNewPostComposerBlock,
   new_story_composer: SduiNewStoryComposerBlock,
+  story_viewers_panel: SduiStoryViewersPanelBlock,
   post_comments: SduiPostCommentsBlock,
   social_profile: SduiSocialProfileBlock,
   settings_home: SduiSettingsHomeBlock,

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

@@ -66,6 +66,7 @@ export type SduiHybridRenderers = {
   renderAlbumDetail?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderNewPostComposer?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderNewStoryComposer?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderStoryViewersPanel?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderPostComments?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderSocialProfile?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderSettingsHome?: (props: SduiNativeBlockRenderProps) => ReactNode;
@@ -105,6 +106,17 @@ export type SduiHybridRenderers = {
   renderFlashInboxCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderProfileVisitsCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderFloatingCreateMenu?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderInboxHubChrome?: (
+    props: SduiNativeBlockRenderProps & {
+      hubRef?: string;
+      activeFilterRef?: string;
+    },
+  ) => ReactNode;
+  /**
+   * Optional host wrap for screen body (ex.: InboxHubSduiProvider).
+   * Keeps domain providers out of the generic shell.
+   */
+  wrapScreenBody?: (children: ReactNode) => ReactNode;
 };
 
 const SduiHybridRendererContext = createContext<SduiHybridRenderers>({});

package/src/renderer/ui/story-surface-picker.tsx

@@ -12,23 +12,29 @@ export function StorySurfacePicker({
   visible,
   value,
   options,
+  title,
+  subtitle,
+  closeLabel,
   onClose,
   onSelect,
 }: {
   visible: boolean;
   value: string;
   options: StorySurfaceOption[];
+  title: string;
+  subtitle: string;
+  closeLabel: string;
   onClose: () => void;
   onSelect: (value: string) => void;
 }) {
   return (
     <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
       <View style={styles.backdrop}>
-        <Pressable style={styles.backdropPress} onPress={onClose} accessibilityLabel="Fechar" />
+        <Pressable style={styles.backdropPress} onPress={onClose} accessibilityLabel={closeLabel} />
         <View style={styles.sheet}>
           <View style={styles.handle} />
-          <Text style={styles.title}>Onde publicar</Text>
-          <Text style={styles.subtitle}>Escolha em qual superfície o story vai aparecer.</Text>
+          <Text style={styles.title}>{title}</Text>
+          <Text style={styles.subtitle}>{subtitle}</Text>
 
           {options.map((option) => {
             const selected = option.value === value;