@proulr/sdui-components 0.1.55 → 0.1.57

package/package.json

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

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

@@ -1,6 +1,7 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 import {
+  LayoutAnimation,
   NativeSyntheticEvent,
   Platform,
   Pressable,
@@ -8,6 +9,7 @@ import {
   Text,
   TextInput,
   TextInputContentSizeChangeEventData,
+  UIManager,
   View,
   type StyleProp,
   type TextInputProps,
@@ -18,7 +20,13 @@ import { AppIcon } from './app-icon';
 import { ChromeGlassLayer } from './ChromeGlass';
 import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
 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;
@@ -196,10 +204,12 @@ export function ComposePillTextField({
       editable={editable}
       style={[
         styles.input,
+        isMultiline ? styles.inputMultiline : styles.inputSingleLine,
         {
           color: variantColors.text,
-          maxHeight: inputMaxHeight,
-          textAlignVertical: isMultiline ? 'top' : 'center',
+          ...(isMultiline
+            ? { maxHeight: inputMaxHeight, textAlignVertical: 'top' as const }
+            : { textAlignVertical: 'center' as const }),
         },
         style,
       ]}
@@ -216,6 +226,8 @@ export function ComposePillTextField({
   );
 }
 
+export type ComposePillEndActionPlacement = 'outside' | 'inside';
+
 export type ComposePillInputProps = {
   value: string;
   onChangeText: (text: string) => void;
@@ -226,14 +238,33 @@ export type ComposePillInputProps = {
   onFocus?: () => void;
   onBlur?: () => void;
   inputRef?: ComposePillTextInputRef;
+  /** Inside the pill (camera / location circle, etc.). */
   leading?: ReactNode;
+  /** Before the pill (avatar in comments). */
+  leadingOutside?: ReactNode;
   trailing?: ReactNode;
   endAction?: ReactNode;
+  /**
+   * `outside` — send circle beside the pill.
+   * `inside` — action nested in the pill.
+   * Implied `inside` when `actionSwap` is on.
+   */
+  endActionPlacement?: ComposePillEndActionPlacement;
+  /**
+   * System-wide Instagram composer: hide `trailing` when the field has text and
+   * show `endAction` in its place inside the pill (with a short layout animation).
+   */
+  actionSwap?: boolean;
   replyPreview?: ComposePillReplyPreview | null;
   style?: StyleProp<ViewStyle>;
   transparentWrap?: boolean;
-  /** Bare row without pill chrome — text field only grows inline (ex.: comentários). */
+  /** Bare row without pill chrome — text field only grows inline. */
   bare?: boolean;
+  /**
+   * Drop composer row insets — use when the pill sits inside an already-padded
+   * dock (profile quick message beside FABs).
+   */
+  flush?: boolean;
   rowAlignItems?: 'center' | 'flex-end';
   textInputProps?: Omit<
     ComposePillTextFieldProps,
@@ -345,15 +376,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"
@@ -375,18 +414,37 @@ export function ComposePillInput({
   onBlur,
   inputRef,
   leading,
+  leadingOutside,
   trailing,
   endAction,
+  endActionPlacement = 'outside',
+  actionSwap = false,
   replyPreview,
   style,
   transparentWrap = false,
   bare = false,
+  flush = false,
   rowAlignItems = bare ? 'center' : 'flex-end',
   textInputProps,
 }: ComposePillInputProps) {
   const layout = useComposePillLineLayout(value, { maxLines });
   const { isMultiline, pillHeight, resetLineCount } = layout;
   const variantColors = composePillVariantColors(variant);
+  const hasText = Boolean(value.trim());
+  const endActionInside = (actionSwap || endActionPlacement === 'inside') && !bare;
+  const visibleTrailing = actionSwap && hasText ? null : trailing;
+  const visibleEndAction = actionSwap && !hasText ? null : endAction;
+  const hadTextRef = useRef(hasText);
+
+  useEffect(() => {
+    if (!actionSwap) {
+      hadTextRef.current = hasText;
+      return;
+    }
+    if (hadTextRef.current === hasText) return;
+    hadTextRef.current = hasText;
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  }, [actionSwap, hasText]);
 
   const handleChange = useCallback(
     (text: string) => {
@@ -415,6 +473,14 @@ export function ComposePillInput({
     />
   );
 
+  const trailingSlot =
+    visibleTrailing || (endActionInside && visibleEndAction) ? (
+      <View style={[styles.trailingIcons, isMultiline && styles.trailingIconsExpanded]}>
+        {visibleTrailing}
+        {endActionInside ? visibleEndAction : null}
+      </View>
+    ) : null;
+
   return (
     <View
       style={[
@@ -426,12 +492,20 @@ export function ComposePillInput({
     >
       {replyPreview ? <ComposePillReplyBar preview={replyPreview} variant={variant} /> : null}
 
-      <View style={[styles.composerRow, { alignItems: rowAlignItems }]}>
+      <View
+        style={[
+          styles.composerRow,
+          flush && styles.composerRowFlush,
+          { alignItems: rowAlignItems },
+        ]}
+      >
+        {leadingOutside}
         {bare ? (
           <>
             {leading}
             {textField}
-            {trailing}
+            {visibleTrailing}
+            {!endActionInside ? visibleEndAction : null}
           </>
         ) : (
           <View
@@ -446,20 +520,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 ? visibleEndAction : null}
       </View>
     </View>
   );
@@ -525,6 +596,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     paddingTop: spacing.sm,
   },
+  composerRowFlush: {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    gap: 0,
+  },
   inputPill: {
     flex: 1,
     flexDirection: 'row',
@@ -532,6 +608,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,
@@ -563,9 +644,33 @@ const styles = StyleSheet.create({
     lineHeight: LINE_HEIGHT,
     fontFamily: fonts.regular,
     paddingHorizontal: spacing.xs,
+    zIndex: 1,
+  },
+  /** Single-line: match pill height so placeholder/caret sit optically centered with inset actions. */
+  inputSingleLine: {
+    height: PILL_MIN_HEIGHT,
+    minHeight: PILL_MIN_HEIGHT,
+    maxHeight: PILL_MIN_HEIGHT,
+    paddingTop: 0,
+    paddingBottom: 0,
+    ...Platform.select({
+      ios: {
+        // Multiline TextInput on iOS ignores textAlignVertical — pad to center the glyph.
+        paddingTop: Math.max(0, (PILL_MIN_HEIGHT - LINE_HEIGHT) / 2 - 1),
+        paddingBottom: Math.max(0, (PILL_MIN_HEIGHT - LINE_HEIGHT) / 2 + 1),
+      },
+      android: {
+        textAlignVertical: 'center',
+      },
+      default: {
+        paddingTop: VERTICAL_PAD,
+        paddingBottom: VERTICAL_PAD,
+      },
+    }),
+  },
+  inputMultiline: {
     paddingTop: VERTICAL_PAD,
     paddingBottom: VERTICAL_PAD,
-    zIndex: 1,
   },
   bareInput: {
     minHeight: 40,
@@ -573,12 +678,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 +689,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,