@proulr/sdui-components 0.1.73 → 0.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.73",
+  "version": "0.1.76",
   "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/Skeleton.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import { View, type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+
+const PULSE_DURATION_MS = 900;
+const PULSE_MIN_OPACITY = 0.45;
+
+/**
+ * Pulso de opacidade compartilhado por cada bloco de skeleton. Respeita o
+ * "reduzir movimento" do sistema (fica estatico). Como `react-native-reanimated`
+ * ja e usado nos primitivos do pacote (ex.: RangeSlider), importamos direto.
+ */
+function usePulseStyle() {
+  const progress = useSharedValue(PULSE_MIN_OPACITY);
+
+  useEffect(() => {
+    progress.value = withRepeat(
+      withTiming(1, {
+        duration: PULSE_DURATION_MS,
+        easing: Easing.inOut(Easing.ease),
+        reduceMotion: ReduceMotion.System,
+      }),
+      -1,
+      true,
+    );
+  }, [progress]);
+
+  return useAnimatedStyle(() => ({ opacity: progress.value }));
+}
+
+export type SkeletonProps = {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Bloco tonal com shimmer — base de qualquer skeleton. */
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  radius = m3Shape.cornerSmall,
+  style,
+}: SkeletonProps) {
+  const pulse = usePulseStyle();
+  return (
+    <Animated.View
+      accessibilityRole="none"
+      style={[
+        { width, height, borderRadius: radius, backgroundColor: m3Colors.surfaceContainerHigh },
+        pulse,
+        style,
+      ]}
+    />
+  );
+}
+
+export type SkeletonCircleProps = {
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Placeholder circular (avatar). */
+export function SkeletonCircle({ size = 48, style }: SkeletonCircleProps) {
+  return <Skeleton width={size} height={size} radius={size / 2} style={style} />;
+}
+
+export type SkeletonTextProps = {
+  lines?: number;
+  lineHeight?: number;
+  gap?: number;
+  /** Largura da ultima linha (efeito paragrafo). */
+  lastLineWidth?: DimensionValue;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Bloco de linhas de texto (ultima linha mais curta). */
+export function SkeletonText({
+  lines = 3,
+  lineHeight = 12,
+  gap = spacing.xs,
+  lastLineWidth = '60%',
+  style,
+}: SkeletonTextProps) {
+  return (
+    <View style={[{ gap }, style]}>
+      {Array.from({ length: Math.max(1, lines) }).map((_, index) => {
+        const isLast = index === lines - 1;
+        return (
+          <Skeleton
+            key={index}
+            height={lineHeight}
+            width={isLast && lines > 1 ? lastLineWidth : '100%'}
+            radius={m3Shape.cornerFull}
+          />
+        );
+      })}
+    </View>
+  );
+}

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>;
@@ -33,7 +42,7 @@ export function TextField(
         placeholderTextColor={m3Colors.onSurfaceVariant}
         multiline={multiline}
         textAlignVertical={multiline ? 'top' : 'center'}
-        style={[styles.fieldInput, multiline && styles.fieldInputMultiline, style]}
+        style={[styles.fieldInput, multiline && styles.fieldInputMultiline, webInputLock, style]}
         {...rest}
       />
     </View>
@@ -54,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}
       />

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,

package/src/renderer/ui/index.ts

@@ -59,6 +59,14 @@ export { ProgressBar } from './ProgressBar';
 export { RangeSlider, type RangeSliderProps } from './RangeSlider';
 export { SectionHeader } from './SectionHeader';
 export { SelectRow, MultiSelectRow } from './SelectRow';
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
+  type SkeletonProps,
+  type SkeletonCircleProps,
+  type SkeletonTextProps,
+} from './Skeleton';
 export { StatRow } from './StatRow';
 export { ToggleRow } from './ToggleRow';
 export { PasswordField, TextField } from './TextField';