@proulr/sdui-components 0.1.54 → 0.1.56

package/package.json

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

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

@@ -29,6 +29,7 @@ import {
   DiscoverBrowseLocation,
   NewPostComposer,
   NewStoryComposer,
+  StoryViewersPanel,
   PostComments,
   ProfileOnboarding,
   ProfileReport,
@@ -130,6 +131,7 @@ describe('bdc discover/forms/social/inbox/native', () => {
       AlbumDetail,
       NewPostComposer,
       NewStoryComposer,
+      StoryViewersPanel,
       PostComments,
       SocialProfile,
       SettingsHome,

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

@@ -38,6 +38,7 @@ export {
   ChatThread,
   NewPostComposer,
   NewStoryComposer,
+  StoryViewersPanel,
   PostComments,
   ProfileOnboarding,
   ProfileReport,

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/sdui-component-registry.tsx

@@ -50,6 +50,7 @@ import {
   SduiChatThreadBlock,
   SduiNewPostComposerBlock,
   SduiNewStoryComposerBlock,
+  SduiStoryViewersPanelBlock,
   SduiPostCommentsBlock,
   SduiProfileOnboardingBlock,
   SduiProfileSelfBlock,
@@ -117,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;

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

@@ -19,6 +19,8 @@ import { ChromeGlassLayer } from './ChromeGlass';
 import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
 const ACTION_BUTTON_SIZE = 48;
+/** Filled action circle when nested inside the pill (Instagram-style composer). */
+const ACTION_BUTTON_SIZE_INSET = 36;
 const FONT_SIZE = 16;
 const LINE_HEIGHT = 25;
 const MAX_LINES_DEFAULT = 4;
@@ -216,6 +218,8 @@ export function ComposePillTextField({
   );
 }
 
+export type ComposePillEndActionPlacement = 'outside' | 'inside';
+
 export type ComposePillInputProps = {
   value: string;
   onChangeText: (text: string) => void;
@@ -229,6 +233,11 @@ export type ComposePillInputProps = {
   leading?: ReactNode;
   trailing?: ReactNode;
   endAction?: ReactNode;
+  /**
+   * `outside` — send/mic circle beside the pill (legacy / story reply).
+   * `inside` — action nested in the pill (Instagram-style chat composer).
+   */
+  endActionPlacement?: ComposePillEndActionPlacement;
   replyPreview?: ComposePillReplyPreview | null;
   style?: StyleProp<ViewStyle>;
   transparentWrap?: boolean;
@@ -345,15 +354,23 @@ export function ComposePillActionButton({
   children,
   onPress,
   disabled,
+  inset = false,
 }: {
   label: string;
   children: ReactNode;
   onPress?: () => void;
   disabled?: boolean;
+  /** Smaller filled circle for use inside the composer pill. */
+  inset?: boolean;
 }) {
+  const size = inset ? ACTION_BUTTON_SIZE_INSET : ACTION_BUTTON_SIZE;
   return (
     <Pressable
-      style={[styles.actionButton, disabled && styles.actionButtonDisabled]}
+      style={[
+        styles.actionButton,
+        { width: size, height: size, borderRadius: size / 2 },
+        disabled && styles.actionButtonDisabled,
+      ]}
       onPress={onPress}
       disabled={disabled || !onPress}
       accessibilityRole="button"
@@ -377,6 +394,7 @@ export function ComposePillInput({
   leading,
   trailing,
   endAction,
+  endActionPlacement = 'outside',
   replyPreview,
   style,
   transparentWrap = false,
@@ -387,6 +405,7 @@ export function ComposePillInput({
   const layout = useComposePillLineLayout(value, { maxLines });
   const { isMultiline, pillHeight, resetLineCount } = layout;
   const variantColors = composePillVariantColors(variant);
+  const endActionInside = endActionPlacement === 'inside' && !bare;
 
   const handleChange = useCallback(
     (text: string) => {
@@ -415,6 +434,14 @@ export function ComposePillInput({
     />
   );
 
+  const trailingSlot =
+    trailing || (endActionInside && endAction) ? (
+      <View style={[styles.trailingIcons, isMultiline && styles.trailingIconsExpanded]}>
+        {trailing}
+        {endActionInside ? endAction : null}
+      </View>
+    ) : null;
+
   return (
     <View
       style={[
@@ -446,20 +473,17 @@ export function ComposePillInput({
                 borderWidth: variant === 'overlay' || variant === 'chrome' ? 1 : 0,
               },
               variantColors.useChromeGlass && styles.inputPillGlass,
+              endActionInside && styles.inputPillWithInsetAction,
             ]}
           >
             {variantColors.useChromeGlass ? <ChromeGlassLayer /> : null}
             {leading}
             {textField}
-            {trailing ? (
-              <View style={[styles.trailingIcons, isMultiline && styles.trailingIconsExpanded]}>
-                {trailing}
-              </View>
-            ) : null}
+            {trailingSlot}
           </View>
         )}
 
-        {endAction}
+        {!endActionInside ? endAction : null}
       </View>
     </View>
   );
@@ -532,6 +556,11 @@ const styles = StyleSheet.create({
     paddingRight: spacing.xs,
     overflow: 'hidden',
   },
+  inputPillWithInsetAction: {
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    gap: spacing.xs,
+  },
   inputPillGlass: {},
   inputPillSingle: {
     borderRadius: m3Shape.cornerFull,
@@ -573,12 +602,10 @@ const styles = StyleSheet.create({
     paddingBottom: spacing.xs,
   },
   actionButton: {
-    width: ACTION_BUTTON_SIZE,
-    height: ACTION_BUTTON_SIZE,
-    borderRadius: ACTION_BUTTON_SIZE / 2,
     backgroundColor: m3Colors.primary,
     alignItems: 'center',
     justifyContent: 'center',
+    zIndex: 1,
   },
   actionButtonDisabled: {
     opacity: 0.45,
@@ -586,3 +613,4 @@ const styles = StyleSheet.create({
 });
 
 export const COMPOSE_PILL_ACTION_BUTTON_SIZE = ACTION_BUTTON_SIZE;
+export const COMPOSE_PILL_ACTION_BUTTON_SIZE_INSET = ACTION_BUTTON_SIZE_INSET;

package/src/renderer/ui/index.ts

@@ -116,9 +116,11 @@ export {
   ComposePillReplyBar,
   ComposePillTextField,
   COMPOSE_PILL_ACTION_BUTTON_SIZE,
+  COMPOSE_PILL_ACTION_BUTTON_SIZE_INSET,
   countComposePillLines,
   pillHeightForLineCount,
   useComposePillLineLayout,
+  type ComposePillEndActionPlacement,
   type ComposePillInputProps,
   type ComposePillLineLayout,
   type ComposePillLineLayoutState,

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;