@proulr/sdui-components 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.56",
+  "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,6 +20,10 @@ 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;
@@ -198,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,
       ]}
@@ -230,19 +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/mic circle beside the pill (legacy / story reply).
-   * `inside` — action nested in the pill (Instagram-style chat composer).
+   * `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,
@@ -392,20 +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 endActionInside = endActionPlacement === 'inside' && !bare;
+  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) => {
@@ -435,10 +474,10 @@ export function ComposePillInput({
   );
 
   const trailingSlot =
-    trailing || (endActionInside && endAction) ? (
+    visibleTrailing || (endActionInside && visibleEndAction) ? (
       <View style={[styles.trailingIcons, isMultiline && styles.trailingIconsExpanded]}>
-        {trailing}
-        {endActionInside ? endAction : null}
+        {visibleTrailing}
+        {endActionInside ? visibleEndAction : null}
       </View>
     ) : null;
 
@@ -453,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
@@ -483,7 +530,7 @@ export function ComposePillInput({
           </View>
         )}
 
-        {!endActionInside ? endAction : null}
+        {!endActionInside ? visibleEndAction : null}
       </View>
     </View>
   );
@@ -549,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',
@@ -592,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,