@proulr/sdui-components 0.1.71 → 0.1.75

package/package.json

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

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -71,7 +71,7 @@ function readProfile(data: Record<string, unknown>, ref?: string): DiscoverNearb
 
 function PresenceDot({ status }: { status: ReturnType<typeof getPresenceStatus> }) {
   const dotColor =
-    status === 'online' ? m3Colors.online : status === 'recent' ? m3Colors.secondary : m3Colors.outline;
+    status === 'online' ? m3Colors.online : status === 'recent' ? m3Colors.presenceRecent : m3Colors.outline;
   return <View style={[styles.presenceDot, { backgroundColor: dotColor }]} />;
 }
 

package/src/renderer/blocks/SduiPrimitiveBlocks.tsx

@@ -89,9 +89,15 @@ export function SduiScrollBlock({ block, children }: SduiBlockRenderProps) {
     ? { paddingHorizontal: padding, gap }
     : { padding, gap };
 
+  const scrollViewProps = chromeScroll?.scrollViewProps ?? {};
+  const { ref: scrollRef, ...restScrollViewProps } = scrollViewProps as {
+    ref?: React.Ref<ScrollView>;
+  } & Record<string, unknown>;
+
   return (
     <SduiLayoutDebugFrame layer="scroll" style={{ flex: 1, minHeight: 0, alignSelf: 'stretch' }}>
       <ScrollView
+        ref={scrollRef}
         style={[
           styles.scroll,
           resolveViewStyleProps(block.props.style as Record<string, unknown>),
@@ -105,7 +111,7 @@ export function SduiScrollBlock({ block, children }: SduiBlockRenderProps) {
             : blockContentStyle
         }
         {...(chromeScroll?.scrollInsetProps ?? {})}
-        {...(chromeScroll?.scrollViewProps ?? {})}
+        {...restScrollViewProps}
         onScroll={chromeScroll?.onScroll}
         scrollEventThrottle={chromeScroll?.onScroll || chromeScroll?.scrollViewProps ? 16 : undefined}
         refreshControl={chromeScroll?.refreshControl}

package/src/renderer/theme/proulr-theme.ts

@@ -32,6 +32,8 @@ export const m3Colors = {
   scrim: 'rgba(0,0,0,0.78)',
   storyInteractionScrim: 'rgba(0,0,0,0.48)',
   online: '#34FF88',
+  /** Saiu recentemente (≤24h) — laranja, distinto do online verde e do ciano de marca. */
+  presenceRecent: '#FF9F0A',
 } as const;
 
 /** Accent/soft por reação Flash (conteúdo) — fonte única, sem hex solto nos apps. */
@@ -96,6 +98,9 @@ export const colors = {
   headerEnd: '#D946EF',
   online: '#34FF88',
   onlineSoft: 'rgba(52,255,136,0.18)',
+  /** Presence: recently active (not online). */
+  presenceRecent: '#FF9F0A',
+  presenceRecentSoft: 'rgba(255,159,10,0.22)',
   danger: '#FF4444',
   dangerSoft: 'rgba(255,68,68,0.22)',
   dangerSoft18: 'rgba(239,68,68,0.18)',

package/src/renderer/ui/TextField.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import {
+  Platform,
   Pressable,
   StyleSheet,
   StyleProp,
@@ -11,6 +12,14 @@ import {
 import { AppIcon, type AppIconName } from './app-icon';
 import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
 
+const webInputLock =
+  Platform.OS === 'web'
+    ? ({
+        WebkitTextFillColor: m3Colors.onSurface,
+        caretColor: m3Colors.onSurface,
+      } as object)
+    : null;
+
 export function TextField(
   props: TextInputProps & {
     containerStyle?: StyleProp<ViewStyle>;
@@ -18,11 +27,12 @@ export function TextField(
     inputRef?: React.Ref<TextInput>;
   },
 ) {
-  const { containerStyle, focused, inputRef, ...rest } = props;
+  const { containerStyle, focused, inputRef, style, multiline, ...rest } = props;
   return (
     <View
       style={[
         styles.field,
+        multiline && styles.fieldMultiline,
         focused && { borderColor: m3Colors.primary, borderWidth: 2 },
         containerStyle,
       ]}
@@ -30,7 +40,9 @@ export function TextField(
       <TextInput
         ref={inputRef}
         placeholderTextColor={m3Colors.onSurfaceVariant}
-        style={styles.fieldInput}
+        multiline={multiline}
+        textAlignVertical={multiline ? 'top' : 'center'}
+        style={[styles.fieldInput, multiline && styles.fieldInputMultiline, webInputLock, style]}
         {...rest}
       />
     </View>
@@ -51,7 +63,7 @@ export function PasswordField(
       <TextInput
         ref={inputRef}
         placeholderTextColor={m3Colors.onSurfaceVariant}
-        style={[styles.fieldInput, styles.passwordInput]}
+        style={[styles.fieldInput, styles.passwordInput, webInputLock]}
         secureTextEntry={!visible}
         {...rest}
       />
@@ -82,7 +94,18 @@ const styles = StyleSheet.create({
     paddingHorizontal: spacing.sm,
     justifyContent: 'center',
   },
+  fieldMultiline: {
+    minHeight: 128,
+    justifyContent: 'flex-start',
+    paddingVertical: spacing.md,
+  },
   fieldInput: { color: m3Colors.onSurface, fontSize: 16, fontFamily: fonts.regular },
+  fieldInputMultiline: {
+    fontSize: 18,
+    lineHeight: 26,
+    minHeight: 96,
+    width: '100%',
+  },
   passwordField: { flexDirection: 'row', alignItems: 'center', paddingRight: spacing.sm },
   passwordInput: { flex: 1 },
   passwordToggle: {

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

@@ -219,6 +219,8 @@ export function ComposePillTextField({
             outlineStyle: 'none',
             resize: 'none',
             overflow: 'hidden',
+            WebkitTextFillColor: variantColors.text,
+            caretColor: variantColors.text,
           } as object)
         : {})}
       {...rest}

package/src/renderer/ui/compose-text-area.tsx

@@ -8,7 +8,7 @@ export function ComposeTextArea(props: TextInputProps) {
       placeholder="O que está acontecendo?"
       placeholderTextColor={m3Colors.onSurfaceVariant}
       multiline
-      style={styles.input}
+      style={[styles.input, Platform.OS === 'web' ? styles.inputWeb : null]}
       {...(Platform.OS === 'android' ? { includeFontPadding: false } : {})}
       {...props}
     />
@@ -56,6 +56,12 @@ const styles = StyleSheet.create({
     textAlignVertical: 'top',
     paddingTop: spacing.xs,
   },
+  // Samsung/Xiaomi force-dark can leave caret text black on OLED — lock fill color on web.
+  inputWeb: {
+    WebkitTextFillColor: m3Colors.onSurface,
+    caretColor: m3Colors.onSurface,
+    outlineStyle: 'none',
+  } as object,
   previewWrap: {
     position: 'relative',
     marginTop: spacing.xs,