@proulr/sdui-components 0.1.16 → 0.1.18

package/package.json

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

package/src/bdc/components/inbox.tsx

@@ -54,15 +54,46 @@ type InboxCapabilitiesProps = {
   dataRef?: string;
 };
 
-function capabilityBlock(type: string, props: InboxCapabilitiesProps): BdcElement {
+function leafBlock(type: string, props: Record<string, unknown>): BdcElement {
   return { type, props: { ...props }, children: [] };
 }
 
 export const ChatInboxCapabilities: BdcComponent = (props) =>
-  capabilityBlock('chat_inbox_capabilities', props as InboxCapabilitiesProps);
+  leafBlock('chat_inbox_capabilities', props as InboxCapabilitiesProps);
 
 export const FlashInboxCapabilities: BdcComponent = (props) =>
-  capabilityBlock('flash_inbox_capabilities', props as InboxCapabilitiesProps);
+  leafBlock('flash_inbox_capabilities', props as InboxCapabilitiesProps);
 
 export const ProfileVisitsCapabilities: BdcComponent = (props) =>
-  capabilityBlock('profile_visits_capabilities', props as InboxCapabilitiesProps);
+  leafBlock('profile_visits_capabilities', props as InboxCapabilitiesProps);
+
+export type FloatingCreateMenuActionProps = {
+  id: string;
+  label: string;
+  tone?: 'primary' | 'surface';
+  icon?: string;
+  actionId: string;
+};
+
+type FloatingCreateMenuProps = {
+  id?: string;
+  closedLabel?: string;
+  actions: FloatingCreateMenuActionProps[];
+};
+
+/** Overlay FAB “+” (sibling do Scroll) — ações via action_id do wire. */
+export const FloatingCreateMenu: BdcComponent = (props) => {
+  const menu = props as FloatingCreateMenuProps;
+  return leafBlock('floating_create_menu', {
+    ...(menu.id ? { id: menu.id } : {}),
+    closedLabel: menu.closedLabel,
+    // Nested objects não passam por camelToSnake — normaliza action_id aqui.
+    actions: (menu.actions ?? []).map((action) => ({
+      id: action.id,
+      label: action.label,
+      tone: action.tone,
+      icon: action.icon,
+      action_id: action.actionId,
+    })),
+  });
+};

package/src/bdc/index.ts

@@ -20,11 +20,13 @@ export {
   ChatInboxCapabilities,
   EmptyState,
   FlashInboxCapabilities,
+  FloatingCreateMenu,
   InboxPersonRow,
   InboxSearchField,
   ProfileVisitsCapabilities,
   SegmentedTabs,
 } from './components/inbox';
+export type { FloatingCreateMenuActionProps } from './components/inbox';
 export { TextField } from './components/forms';
 export { ProfileCompletionBanner, StoryRail } from './components/social';
 export {

package/src/renderer/SduiScreenRenderer.tsx

@@ -10,11 +10,20 @@ type Props = {
   onAction: (actionId: string, vars?: Record<string, string>) => void;
 };
 
+/** Blocos overlay (FAB etc.) — não competem por flex com o Scroll. */
+const OVERLAY_BLOCK_TYPES = new Set(['floating_create_menu']);
+
 export function SduiScreenRenderer({ screen, onAction }: Props) {
   return (
     <SduiLayoutDebugFrame layer="renderer" style={styles.screen}>
       {screen.blocks.map((block) => (
-        <SduiLayoutDebugFrame key={block.id} layer="block" extra={block.type} style={styles.block}>
+        <SduiLayoutDebugFrame
+          key={block.id}
+          layer="block"
+          extra={block.type}
+          style={OVERLAY_BLOCK_TYPES.has(block.type) ? styles.overlayBlock : styles.block}
+          pointerEvents={OVERLAY_BLOCK_TYPES.has(block.type) ? 'box-none' : undefined}
+        >
           {renderBlockTree(block, screen.data, onAction)}
         </SduiLayoutDebugFrame>
       ))}
@@ -25,4 +34,9 @@ export function SduiScreenRenderer({ screen, onAction }: Props) {
 const styles = StyleSheet.create({
   screen: { flex: 1, minHeight: 0, backgroundColor: colors.bg },
   block: { flex: 1, minHeight: 0 },
+  overlayBlock: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 20,
+    elevation: 20,
+  },
 });

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -295,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>
@@ -439,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,
@@ -465,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

@@ -221,9 +221,18 @@ export function SduiProfileVisitsCapabilitiesBlock(props: SduiBlockRenderProps)
   return <CapabilitiesShell {...props} rendererKey="renderProfileVisitsCapabilities" />;
 }
 
+export function SduiFloatingCreateMenuBlock(props: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  if (typeof hybrid.renderFloatingCreateMenu !== 'function') return null;
+  return <>{hybrid.renderFloatingCreateMenu(props)}</>;
+}
+
 const styles = StyleSheet.create({
   segmentTrack: {
     flexDirection: 'row',
+    flexGrow: 0,
+    flexShrink: 0,
+    alignSelf: 'stretch',
     gap: spacing.sm,
     backgroundColor: m3Colors.surfaceContainerHigh,
     borderRadius: m3Shape.cornerFull,

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

@@ -36,6 +36,7 @@ import {
   SduiInboxPersonRowBlock,
   SduiInboxSearchFieldBlock,
   SduiProfileVisitsCapabilitiesBlock,
+  SduiFloatingCreateMenuBlock,
   SduiSegmentedTabsBlock,
 } from './blocks/SduiInboxBlocks';
 import { SduiNativeAdBlock } from './blocks/SduiNativeAdBlock';
@@ -87,6 +88,7 @@ const REGISTRY: Record<string, SduiBlockComponent> = {
   chat_inbox_capabilities: SduiChatInboxCapabilitiesBlock,
   flash_inbox_capabilities: SduiFlashInboxCapabilitiesBlock,
   profile_visits_capabilities: SduiProfileVisitsCapabilitiesBlock,
+  floating_create_menu: SduiFloatingCreateMenuBlock,
   discover_grid: SduiDiscoverGridBlock,
   discover_profile_card: SduiDiscoverProfileCardBlock,
   discover_map: SduiDiscoverMapBlock,

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

@@ -102,6 +102,7 @@ export type SduiHybridRenderers = {
   renderChatInboxCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderFlashInboxCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderProfileVisitsCapabilities?: (props: SduiNativeBlockRenderProps) => ReactNode;
+  renderFloatingCreateMenu?: (props: SduiNativeBlockRenderProps) => ReactNode;
 };
 
 const SduiHybridRendererContext = createContext<SduiHybridRenderers>({});

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

@@ -73,15 +73,17 @@ export function SduiLayoutDebugFrame({
   layer,
   extra,
   style,
+  pointerEvents,
   children,
 }: {
   layer: SduiLayoutDebugLayer;
   extra?: string;
   style?: StyleProp<ViewStyle>;
+  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
   children: ReactNode;
 }) {
   return (
-    <View style={[sduiDebugViewStyle(layer), style]}>
+    <View style={[sduiDebugViewStyle(layer), style]} pointerEvents={pointerEvents}>
       <SduiLayoutDebugLabel layer={layer} extra={extra} />
       {children}
     </View>