@proulr/sdui-components 0.1.85 → 0.1.87

package/src/renderer/ui/story-editor-chrome.tsx

@@ -9,7 +9,7 @@ import {
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { AppLoadingSpinner } from './AppLoadingSpinner';
 import { StoryBackGlyph } from './story-glyphs';
 
@@ -19,16 +19,21 @@ export type StoryEditorTool = {
   icon: ReactNode;
 };
 
+/** Chrome sobre mídia: o visual fica compacto, o hit slop devolve os 44 de alvo. */
+const CHROME_HIT_SLOP = { top: 4, bottom: 4, left: 4, right: 4 };
+
 export function StoryEditorChrome({
   children,
   tools,
   caption,
   onChangeCaption,
+  backLabel,
+  captionPlaceholder,
   onBack,
   onToolPress,
   onPublish,
   publishing,
-  publishLabel = 'Compartilhar',
+  publishLabel,
   footerLeft,
   accessory,
   showCaption = true,
@@ -38,11 +43,14 @@ export function StoryEditorChrome({
   tools: StoryEditorTool[];
   caption: string;
   onChangeCaption: (value: string) => void;
+  /** Copy de produto vem do chamador (Rosetta) — primitivo SDUI não traduz. */
+  backLabel: string;
+  captionPlaceholder: string;
   onBack: () => void;
   onToolPress: (toolId: string) => void;
   onPublish: () => void;
   publishing?: boolean;
-  publishLabel?: string;
+  publishLabel: string;
   footerLeft?: ReactNode;
   accessory?: ReactNode;
   showCaption?: boolean;
@@ -71,8 +79,9 @@ export function StoryEditorChrome({
         <Pressable
           onPress={onBack}
           accessibilityRole="button"
-          accessibilityLabel="Voltar"
-          style={styles.topBtn}
+          accessibilityLabel={backLabel}
+          hitSlop={CHROME_HIT_SLOP}
+          style={({ pressed }) => [styles.topBtn, pressed && styles.pressedOverlay]}
         >
           <StoryBackGlyph />
         </Pressable>
@@ -86,7 +95,8 @@ export function StoryEditorChrome({
               onPress={() => onToolPress(tool.id)}
               accessibilityRole="button"
               accessibilityLabel={tool.label}
-              style={styles.toolItem}
+              hitSlop={CHROME_HIT_SLOP}
+              style={({ pressed }) => [styles.toolItem, pressed && styles.toolItemPressed]}
             >
               <View style={styles.toolIcon}>{tool.icon}</View>
               <Text style={styles.toolLabel}>{tool.label}</Text>
@@ -100,8 +110,9 @@ export function StoryEditorChrome({
           <TextInput
             value={caption}
             onChangeText={onChangeCaption}
-            placeholder="Adicione uma legenda..."
+            placeholder={captionPlaceholder}
             placeholderTextColor={m3Colors.onSurfaceVariant}
+            accessibilityLabel={captionPlaceholder}
             style={styles.captionInput}
             multiline
             maxLength={220}
@@ -118,7 +129,7 @@ export function StoryEditorChrome({
             style={({ pressed }) => [
               styles.publishBtn,
               publishing && styles.publishBtnDisabled,
-              pressed && !publishing && { opacity: 0.9 },
+              pressed && !publishing && styles.publishBtnPressed,
             ]}
           >
             {publishing ? (
@@ -150,13 +161,14 @@ const styles = StyleSheet.create({
     zIndex: 2,
   },
   topBtn: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
     backgroundColor: m3Colors.scrim,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  pressedOverlay: { backgroundColor: m3Colors.statePressed },
   bottomChrome: {
     position: 'absolute',
     left: 0,
@@ -178,6 +190,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.xs,
   },
+  toolItemPressed: { opacity: 0.7 },
   toolIcon: {
     width: 44,
     height: 44,
@@ -188,14 +201,12 @@ const styles = StyleSheet.create({
   },
   toolLabel: {
     color: m3Colors.onPrimary,
-    fontFamily: fonts.medium,
-    fontSize: 11,
+    ...m3Type.labelSmall,
     textAlign: 'center',
   },
   captionInput: {
+    ...m3Type.body,
     color: m3Colors.onPrimary,
-    fontFamily: fonts.regular,
-    fontSize: 15,
     minHeight: 40,
     maxHeight: 72,
     paddingHorizontal: spacing.md,
@@ -223,9 +234,12 @@ const styles = StyleSheet.create({
   publishBtnDisabled: {
     opacity: 0.6,
   },
+  publishBtnPressed: {
+    opacity: 0.88,
+  },
   publishLabel: {
+    ...m3Type.label,
     color: m3Colors.onPrimary,
     fontFamily: fonts.bold,
-    fontSize: 15,
   },
 });

package/src/renderer/ui/story-surface-picker.tsx

@@ -117,9 +117,8 @@ const styles = StyleSheet.create({
     minWidth: 0,
   },
   optionLabel: {
+    ...m3Type.titleSmall,
     color: m3Colors.onSurface,
-    fontFamily: fonts.semibold,
-    fontSize: 16,
   },
   optionHint: {
     color: m3Colors.onSurfaceVariant,