@proulr/sdui-components 0.1.50 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.50",
+  "version": "0.1.54",
   "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,
@@ -85,6 +86,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 +99,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: '+',

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/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,

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/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';
@@ -85,6 +87,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 +98,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,

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

@@ -105,6 +105,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/ChromeGlass.tsx

@@ -25,34 +25,23 @@ const absoluteFill: ViewStyle = {
 type ChromeGlassLayerProps = {
   style?: StyleProp<ViewStyle>;
   pointerEvents?: ViewProps['pointerEvents'];
-  /**
-   * When false, skip BlurView and keep the solid OLED pill base.
-   * Use on Android surfaces that animate (drawer slide) — BlurView + transform
-   * over image-heavy screens flashes black.
-   */
-  blurEnabled?: boolean;
 };
 
 /**
  * Camada de frost única do sistema (igual AppSideDrawer topo/base).
- * Solid `chromePillBackground` under BlurView so failed Android blur frames
- * never flash pure black. Overlay tint stays transparent (frost limpo).
+ * BlurView + `colors.chromeGlassOverlay` — sem cast cinza.
  */
 export function ChromeGlassLayer({
   style,
   pointerEvents = 'none',
-  blurEnabled = true,
 }: ChromeGlassLayerProps) {
   return (
     <View style={[absoluteFill, style]} pointerEvents={pointerEvents}>
-      <View style={[absoluteFill, styles.solidBase]} />
-      {blurEnabled ? (
-        <BlurView
-          intensity={CHROME_GLASS_BLUR_INTENSITY}
-          tint={CHROME_GLASS_BLUR_TINT}
-          style={StyleSheet.absoluteFill}
-        />
-      ) : null}
+      <BlurView
+        intensity={CHROME_GLASS_BLUR_INTENSITY}
+        tint={CHROME_GLASS_BLUR_TINT}
+        style={StyleSheet.absoluteFill}
+      />
       <View style={[absoluteFill, styles.tint]} />
     </View>
   );
@@ -62,31 +51,21 @@ type ChromeGlassShellProps = {
   children: ReactNode;
   style?: StyleProp<ViewStyle>;
   contentStyle?: StyleProp<ViewStyle>;
-  /** Forwarded to `ChromeGlassLayer` — disable during slide animations on Android. */
-  blurEnabled?: boolean;
 };
 
 /**
  * Pílula chrome com o mesmo glass do drawer (shell + blur + overlay).
  */
-export function ChromeGlassShell({
-  children,
-  style,
-  contentStyle,
-  blurEnabled = true,
-}: ChromeGlassShellProps) {
+export function ChromeGlassShell({ children, style, contentStyle }: ChromeGlassShellProps) {
   return (
     <View style={[chromePillStyles.shell, styles.shellTransparent, style]}>
-      <ChromeGlassLayer blurEnabled={blurEnabled} />
+      <ChromeGlassLayer />
       <View style={[styles.content, contentStyle]}>{children}</View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  solidBase: {
-    backgroundColor: colors.chromePillBackground,
-  },
   tint: {
     backgroundColor: colors.chromeGlassOverlay,
   },