@proulr/sdui-components 0.1.86 → 0.1.88

package/src/renderer/lib/discover-profile-formatters.ts

@@ -2,7 +2,8 @@ export type DiscoverNearbyProfileWire = {
   id: string;
   display_name: string | null;
   birth_date: string | null;
-  distance_m: number;
+  /** `null` = visitante ativou "ocultar distância" — o rótulo some, o resto do card fica. */
+  distance_m: number | null;
   primary_photo_path: string | null;
   photo_url?: string | null;
   is_online: boolean | null;
@@ -42,9 +43,11 @@ export function profileAgeFromBirthDate(birthDate: string | null | undefined): n
 }
 
 export function formatDistanceLabel(
-  distanceM: number,
+  distanceM: number | null | undefined,
   unit: 'metric' | 'imperial' = 'metric',
-): string {
+): string | null {
+  if (distanceM === null || distanceM === undefined || !Number.isFinite(distanceM)) return null;
+
   if (unit === 'imperial') {
     const feet = distanceM * 3.28084;
     if (feet < 528) return `${Math.round(feet)} ft`;

package/src/renderer/sdui-hybrid-renderer-context.tsx

@@ -102,7 +102,12 @@ export type SduiHybridRenderers = {
     activeRef?: string;
     actionPrefix?: string;
   }) => ReactNode;
-  renderEmptyState?: (props: { title: string; hint?: string }) => ReactNode;
+  renderEmptyState?: (props: {
+    title: string;
+    hint?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+  }) => ReactNode;
   renderInboxPersonRow?: (props: {
     block: SduiBlock;
     data: Record<string, unknown>;

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

@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { colors, m3Colors } from './proulr-theme';
+
+vi.mock('react-native', () => ({
+  Platform: {
+    OS: 'web',
+    select: (spec: Record<string, unknown>) => spec.default ?? spec.web ?? spec.ios ?? {},
+  },
+}));
+
+type Rgb = { r: number; g: number; b: number; a: number };
+
+function parseColor(input: string): Rgb {
+  const value = input.trim();
+  const rgba = /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/.exec(value);
+  if (rgba) {
+    return { r: +rgba[1], g: +rgba[2], b: +rgba[3], a: +rgba[4] };
+  }
+  const hex = value.replace('#', '');
+  const full =
+    hex.length === 3
+      ? hex.split('').map((c) => c + c).join('')
+      : hex.slice(0, 6);
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16),
+    a: hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1,
+  };
+}
+
+/** Tema é OLED puro: qualquer rgba translúcido compõe sobre #000000. */
+function compositeOnBlack(input: string): Rgb {
+  const { r, g, b, a } = parseColor(input);
+  if (a >= 1) return { r, g, b, a: 1 };
+  return { r: r * a, g: g * a, b: b * a, a: 1 };
+}
+
+function relativeLuminance(color: Rgb): number {
+  const channel = (value: number) => {
+    const s = value / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}
+
+function contrastRatio(foreground: string, background: string): number {
+  const fg = relativeLuminance(compositeOnBlack(foreground));
+  const bg = relativeLuminance(compositeOnBlack(background));
+  const [high, low] = fg >= bg ? [fg, bg] : [bg, fg];
+  return (high + 0.05) / (low + 0.05);
+}
+
+const TEXT_PAIRS: [string, string, string][] = [
+  ['onPrimary / primaryFill', m3Colors.onPrimary, m3Colors.primaryFill],
+  ['onError / errorFill', m3Colors.onError, m3Colors.errorFill],
+  ['onSuccess / success', m3Colors.onSuccess, m3Colors.success],
+  ['onSurface / surface', m3Colors.onSurface, m3Colors.surface],
+  ['onSurface / surfaceContainer', m3Colors.onSurface, m3Colors.surfaceContainer],
+  ['onSurface / surfaceContainerHigh', m3Colors.onSurface, m3Colors.surfaceContainerHigh],
+  ['onSurface / surfaceContainerHighest', m3Colors.onSurface, m3Colors.surfaceContainerHighest],
+  ['onSurfaceVariant / surfaceContainerHigh', m3Colors.onSurfaceVariant, m3Colors.surfaceContainerHigh],
+  ['onPrimaryContainer / primaryContainer', m3Colors.onPrimaryContainer, m3Colors.primaryContainer],
+  ['onSecondaryContainer / secondaryContainer', m3Colors.onSecondaryContainer, m3Colors.secondaryContainer],
+  ['onTertiaryContainer / tertiaryContainer', m3Colors.onTertiaryContainer, m3Colors.tertiaryContainer],
+  ['onErrorContainer / errorContainer', m3Colors.onErrorContainer, m3Colors.errorContainer],
+  ['textPrimary / bg', colors.textPrimary, colors.bg],
+  ['textSecondary / bg', colors.textSecondary, colors.bg],
+  ['textMuted / bg', colors.textMuted, colors.bg],
+  ['textMuted / surface2', colors.textMuted, colors.surface2],
+];
+
+/** WCAG 1.4.11: bordas, foco e indicadores que carregam significado. */
+const GRAPHIC_PAIRS: [string, string, string][] = [
+  ['outlineInteractive / bg', m3Colors.outlineInteractive, colors.bg],
+  ['focus / bg', m3Colors.focus, colors.bg],
+  ['primary (foreground) / bg', m3Colors.primary, colors.bg],
+  ['secondary (foreground) / bg', m3Colors.secondary, colors.bg],
+  ['error (foreground) / bg', m3Colors.error, colors.bg],
+  ['online / bg', m3Colors.online, colors.bg],
+  ['presenceRecent / bg', m3Colors.presenceRecent, colors.bg],
+  ['onPrimary / primary (glyph) ', m3Colors.onPrimary, m3Colors.primary],
+];
+
+describe('proulr-theme contraste WCAG', () => {
+  it.each(TEXT_PAIRS)('%s ≥ 4.5:1', (_label, foreground, background) => {
+    expect(contrastRatio(foreground, background)).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it.each(GRAPHIC_PAIRS)('%s ≥ 3:1', (_label, foreground, background) => {
+    expect(contrastRatio(foreground, background)).toBeGreaterThanOrEqual(3);
+  });
+
+  it('expõe tokens de estado usados pelos primitivos', () => {
+    expect(m3Colors.disabledContainer).toBeTruthy();
+    expect(m3Colors.onDisabled).toBeTruthy();
+    expect(m3Colors.divider).toBeTruthy();
+    expect(m3Colors.focus).toBeTruthy();
+    expect(m3Colors.primaryFill).toBeTruthy();
+    expect(m3Colors.errorFill).toBeTruthy();
+  });
+
+  it('rótulo desabilitado continua legível sobre o fundo desabilitado', () => {
+    expect(contrastRatio(m3Colors.onDisabled, m3Colors.disabledContainer)).toBeGreaterThanOrEqual(3);
+  });
+});

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

@@ -7,6 +7,9 @@ export const m3Colors = {
   onPrimary: '#FFFFFF',
   primaryContainer: 'rgba(217,70,239,0.22)',
   onPrimaryContainer: '#F0ABFC',
+  /** Fundo de CTA/bolha com rótulo claro. Branco sobre #D946EF = 3.46:1 (reprova
+   * AA em texto); #A622D6 mantém o matiz da marca e chega a 5.5:1. */
+  primaryFill: '#A622D6',
   secondary: '#00E5FF',
   onSecondary: '#000000',
   secondaryContainer: 'rgba(0,229,255,0.18)',
@@ -23,8 +26,19 @@ export const m3Colors = {
   surfaceContainerHighest: '#222222',
   outline: '#1A1A1A',
   outlineVariant: '#2A2A2A',
+  /** Fronteira de componente interativo (botão outline, campo, chip, slider) —
+   * #1A1A1A dá 1.21:1 e some no OLED; 3:1 é o piso de WCAG 1.4.11. */
+  outlineInteractive: '#5C5C5C',
+  /** Divisória de lista/seção: decorativa, então fora do piso de 1.4.11. */
+  divider: '#242424',
+  /** Anel de foco (teclado / web). Ciano de marca = 13.6:1 sobre preto. */
+  focus: '#00E5FF',
+  disabledContainer: '#1F1F1F',
+  onDisabled: '#7A7A7A',
   error: '#FF4444',
   onError: '#FFFFFF',
+  /** Fundo sólido de ação destrutiva: branco sobre #FF4444 = 3.41:1; #C81E1E = 5.7:1. */
+  errorFill: '#C81E1E',
   errorContainer: 'rgba(255,68,68,0.22)',
   onErrorContainer: '#FF8A80',
   inverseSurface: '#FFFFFF',
@@ -32,8 +46,14 @@ export const m3Colors = {
   scrim: 'rgba(0,0,0,0.78)',
   storyInteractionScrim: 'rgba(0,0,0,0.48)',
   online: '#34FF88',
+  /** Verde de presença reaproveitado como feedback positivo (salvo / concluído). */
+  success: '#34FF88',
+  onSuccess: '#00382E',
   /** Saiu recentemente (≤24h) — laranja, distinto do online verde e do ciano de marca. */
   presenceRecent: '#FF9F0A',
+  /** States de interação sobre fundo sólido — em vez de opacity no botão inteiro. */
+  stateHovered: 'rgba(255,255,255,0.08)',
+  statePressed: 'rgba(255,255,255,0.14)',
 } as const;
 
 /** Accent/soft por reação Flash (conteúdo) — fonte única, sem hex solto nos apps. */
@@ -67,15 +87,17 @@ export const m3Shape = {
   cornerFull: 999,
 } as const;
 
+/** Tracking por estilo: Montserrat é geométrica — fecha nos tamanhos de display,
+ * abre nas labels pequenas para continuar legível em tela de baixa DPI. */
 export const m3Type = {
-  display: { fontFamily: 'Montserrat_800ExtraBold', fontSize: 57, lineHeight: 64 },
-  headline: { fontFamily: 'Montserrat_700Bold', fontSize: 28, lineHeight: 36 },
-  title: { fontFamily: 'Montserrat_600SemiBold', fontSize: 22, lineHeight: 28 },
-  titleSmall: { fontFamily: 'Montserrat_600SemiBold', fontSize: 16, lineHeight: 24 },
-  body: { fontFamily: 'Montserrat_400Regular', fontSize: 16, lineHeight: 24 },
-  bodySmall: { fontFamily: 'Montserrat_400Regular', fontSize: 14, lineHeight: 20 },
-  label: { fontFamily: 'Montserrat_500Medium', fontSize: 14, lineHeight: 20 },
-  labelSmall: { fontFamily: 'Montserrat_500Medium', fontSize: 12, lineHeight: 16 },
+  display: { fontFamily: 'Montserrat_800ExtraBold', fontSize: 57, lineHeight: 64, letterSpacing: -1 },
+  headline: { fontFamily: 'Montserrat_700Bold', fontSize: 28, lineHeight: 36, letterSpacing: -0.5 },
+  title: { fontFamily: 'Montserrat_600SemiBold', fontSize: 22, lineHeight: 28, letterSpacing: -0.3 },
+  titleSmall: { fontFamily: 'Montserrat_600SemiBold', fontSize: 16, lineHeight: 24, letterSpacing: 0 },
+  body: { fontFamily: 'Montserrat_400Regular', fontSize: 16, lineHeight: 24, letterSpacing: 0.15 },
+  bodySmall: { fontFamily: 'Montserrat_400Regular', fontSize: 14, lineHeight: 20, letterSpacing: 0.2 },
+  label: { fontFamily: 'Montserrat_500Medium', fontSize: 14, lineHeight: 20, letterSpacing: 0.4 },
+  labelSmall: { fontFamily: 'Montserrat_500Medium', fontSize: 12, lineHeight: 16, letterSpacing: 0.5 },
 } as const;
 
 export const colors = {
@@ -84,9 +106,14 @@ export const colors = {
   surface2: '#141414',
   border: '#1A1A1A',
   borderStrong: '#2A2A2A',
+  /** Borda de componente interativo — ≥3:1 sobre preto (WCAG 1.4.11). */
+  borderInteractive: '#5C5C5C',
+  divider: '#242424',
   textPrimary: '#FFFFFF',
   textSecondary: '#A3A3A3',
-  textMuted: '#666666',
+  /** #666666 dava 3.66:1 e reprova AA em texto corrido; #828282 = 5.4:1 no preto,
+   * 4.8:1 sobre surface2, onde hints costumam sentar. */
+  textMuted: '#828282',
   white: '#FFFFFF',
   textOnAccent: '#FFFFFF',
   accent: '#D946EF',
@@ -102,8 +129,15 @@ export const colors = {
   presenceRecent: '#FF9F0A',
   presenceRecentSoft: 'rgba(255,159,10,0.22)',
   danger: '#FF4444',
+  /** Fundo sólido destrutivo — branco sobre #FF4444 = 3.41:1; aqui = 5.7:1. */
+  dangerFill: '#C81E1E',
   dangerSoft: 'rgba(255,68,68,0.22)',
   dangerSoft18: 'rgba(239,68,68,0.18)',
+  success: '#34FF88',
+  onSuccess: '#00382E',
+  focus: '#00E5FF',
+  disabled: '#1F1F1F',
+  onDisabled: '#7A7A7A',
   overlay: 'rgba(0,0,0,0.78)',
   surfaceGlass: 'rgba(255,255,255,0.06)',
   /** Pílula / chrome sem BlurView — preto OLED. */
@@ -120,6 +154,7 @@ export const colors = {
   scrollbarThumb: 'rgba(255, 255, 255, 0.28)',
   scrollbarThumbHover: 'rgba(255, 255, 255, 0.45)',
   primary: '#D946EF',
+  primaryFill: '#A622D6',
   primarySoft18: 'rgba(217,70,239,0.18)',
   primarySoft35: 'rgba(217,70,239,0.35)',
   onSurface: '#FFFFFF',
@@ -171,6 +206,13 @@ export const colors = {
   surfaceElevated95: 'rgba(28,28,30,0.95)',
 } as const;
 
+/**
+ * Coluna de leitura do corpo em viewport largo. Acima disso a linha de texto
+ * passa de ~100 caracteres e o grid perde ritmo — é teto de leitura, não de
+ * inset (quem se autogereia, ex. rail do Vibes, tem a própria coluna).
+ */
+export const SCREEN_CONTENT_MAX_WIDTH = 880;
+
 export const spacing = {
   xs: 4,
   sm: 8,

package/src/renderer/ui/AppButton.tsx

@@ -1,6 +1,15 @@
 import { Pressable, StyleSheet, Text } from 'react-native';
-import { fonts, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Elevation, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { AppLoadingSpinner } from './AppLoadingSpinner';
+import { FOCUS_RING_STYLE, useFocusRing } from './focus-ring';
+
+type AppButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
+
+const FILL_BY_VARIANT: Partial<Record<AppButtonVariant, string>> = {
+  primary: m3Colors.primaryFill,
+  secondary: m3Colors.surfaceContainerHigh,
+  danger: m3Colors.errorFill,
+};
 
 export function AppButton({
   label,
@@ -9,54 +18,66 @@ export function AppButton({
   disabled,
   loading,
   compact,
+  fullWidth,
   testID,
+  accessibilityLabel,
 }: {
   label: string;
   onPress: () => void;
-  variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger';
+  variant?: AppButtonVariant;
   disabled?: boolean;
   loading?: boolean;
   compact?: boolean;
+  fullWidth?: boolean;
   testID?: string;
+  accessibilityLabel?: string;
 }) {
-  const isPrimary = variant === 'primary';
-  const isSecondary = variant === 'secondary';
-  const isOutline = variant === 'outline';
-  const isDanger = variant === 'danger';
-  const labelColor =
-    isPrimary || isDanger || isSecondary
-      ? m3Colors.onPrimary
-      : isOutline || variant === 'ghost'
-        ? m3Colors.primary
-        : m3Colors.onPrimary;
+  const focus = useFocusRing();
+  const inactive = Boolean(disabled) || Boolean(loading);
+  const isTextonlyVariant = variant === 'outline' || variant === 'ghost';
+
+  const backgroundColor = inactive
+    ? isTextonlyVariant
+      ? 'transparent'
+      : m3Colors.disabledContainer
+    : (FILL_BY_VARIANT[variant] ?? 'transparent');
+
+  // Rótulo por estado, nunca por opacity composta no botão inteiro.
+  const labelColor = inactive
+    ? m3Colors.onDisabled
+    : isTextonlyVariant
+      ? m3Colors.primary
+      : m3Colors.onPrimary;
 
   return (
     <Pressable
       testID={testID}
       accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled: inactive, busy: Boolean(loading) }}
       onPress={onPress}
-      disabled={disabled || loading}
+      onFocus={focus.onFocus}
+      onBlur={focus.onBlur}
+      disabled={inactive}
       style={({ pressed }) => [
         styles.btn,
         compact && styles.btnCompact,
-        isPrimary && { backgroundColor: m3Colors.primary },
-        isSecondary && { backgroundColor: m3Colors.surfaceContainerHigh },
-        isDanger && { backgroundColor: m3Colors.error },
-        isOutline && {
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-          borderColor: m3Colors.outline,
+        fullWidth && styles.btnFullWidth,
+        { backgroundColor },
+        variant === 'outline' && {
+          borderColor: inactive ? m3Colors.outlineVariant : m3Colors.outlineInteractive,
         },
-        variant === 'ghost' && { backgroundColor: 'transparent' },
-        (disabled || loading) && { opacity: 0.38 },
-        pressed && { opacity: 0.85 },
-        (isPrimary || isSecondary) && m3Elevation.level1,
+        focus.focused && !inactive && FOCUS_RING_STYLE,
+        pressed && !inactive && styles.pressed,
+        !inactive && (variant === 'primary' || variant === 'secondary') && m3Elevation.level1,
       ]}
     >
       {loading ? (
         <AppLoadingSpinner color={labelColor} />
       ) : (
-        <Text style={[styles.btnText, { color: labelColor }]}>{label}</Text>
+        <Text style={[styles.btnText, { color: labelColor }]} numberOfLines={1}>
+          {label}
+        </Text>
       )}
     </Pressable>
   );
@@ -64,12 +85,17 @@ export function AppButton({
 
 const styles = StyleSheet.create({
   btn: {
-    height: 48,
+    minHeight: 48,
+    minWidth: 64,
     borderRadius: m3Shape.cornerFull,
     alignItems: 'center',
     justifyContent: 'center',
     paddingHorizontal: spacing.xl,
+    borderWidth: 2,
+    borderColor: 'transparent',
   },
-  btnCompact: { height: 40, paddingHorizontal: spacing.sm },
-  btnText: { fontSize: 14, fontFamily: fonts.medium, letterSpacing: 0.1 },
+  btnCompact: { minHeight: 44, paddingHorizontal: spacing.lg },
+  btnFullWidth: { alignSelf: 'stretch' },
+  pressed: { opacity: 0.85 },
+  btnText: { ...m3Type.label },
 });

package/src/renderer/ui/AppChromeIconButton.tsx

@@ -11,6 +11,9 @@ type AppChromeIconButtonProps = {
   size?: number;
   /** Header chrome pill — circular bordered target. */
   variant?: 'header' | 'plain';
+  /** Optional background for dense surfaces (banner close, sheet dismiss). */
+  backgroundColor?: string;
+  testID?: string;
 };
 
 export function AppChromeIconButton({
@@ -21,17 +24,22 @@ export function AppChromeIconButton({
   color = m3Colors.primary,
   size = APP_ICON_SIZE.chromeHeader,
   variant = 'header',
+  backgroundColor,
+  testID,
 }: AppChromeIconButtonProps) {
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled || !onPress}
-      hitSlop={8}
       accessibilityRole="button"
       accessibilityLabel={label}
-      style={[
+      accessibilityState={{ disabled: Boolean(disabled) }}
+      testID={testID}
+      style={({ pressed }) => [
         variant === 'header' ? styles.headerBtn : styles.plainBtn,
+        pressed && styles.pressed,
         disabled && styles.disabled,
+        backgroundColor ? { backgroundColor } : null,
       ]}
     >
       <AppIcon name={icon} color={color} size={size} />
@@ -41,21 +49,25 @@ export function AppChromeIconButton({
 
 const styles = StyleSheet.create({
   headerBtn: {
-    width: 45,
-    height: 45,
-    borderRadius: 22.5,
+    width: 44,
+    height: 44,
+    borderRadius: 22,
     borderWidth: 2,
     borderColor: 'rgba(255,255,255,0.22)',
     margin: spacing.xs,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  /** 44×44: `plain` também é usado como botão de fechar em banner e sheet. */
   plainBtn: {
-    width: 40,
-    height: 40,
+    minWidth: 44,
+    minHeight: 44,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  pressed: {
+    opacity: 0.75,
+  },
   disabled: {
     opacity: 0.4,
   },

package/src/renderer/ui/AuthStepShell.tsx

@@ -92,9 +92,8 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.xs,
   },
   backLabel: {
+    ...m3Type.label,
     color: colors.textMuted,
-    fontSize: 14,
-    fontFamily: fonts.medium,
   },
   pressed: {
     opacity: 0.6,

package/src/renderer/ui/Chip.tsx

@@ -1,55 +1,65 @@
 import { Pressable, StyleSheet, Text } from 'react-native';
-import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
+import { colors, fonts, m3Colors, m3Shape, m3Type, spacing } from '../theme/proulr-theme';
 import { AppIcon, isAppIconName } from './app-icon';
+import { FOCUS_RING_STYLE, useFocusRing } from './focus-ring';
 
+/**
+ * (44 − 36) / 2 — o alvo de toque mínimo vem do slop, não da altura visual: a
+ * pílula continua compacta na linha do chrome e continua alcançando 44 pt.
+ */
+const CHIP_HIT_SLOP = { top: 4, bottom: 4, left: 2, right: 2 };
+
+/**
+ * Pílula do sistema (padrão nascido no chip de filtros do Caçar) — uma só
+ * superfície para filtro, seletor e tag em qualquer breakpoint. Antes havia um
+ * `variant: 'default'` retangular para "conteúdo" e outro para "header", o que
+ * fazia a mesma linha de filtros trocar de aparência entre tela pequena e grande.
+ */
 export function Chip({
   label,
   active,
   onPress,
-  variant = 'default',
   disabled,
   icon,
+  testID,
 }: {
   label: string;
   active?: boolean;
   onPress?: () => void;
-  variant?: 'default' | 'onHeader';
   disabled?: boolean;
   icon?: string;
+  testID?: string;
 }) {
-  const isHeader = variant === 'onHeader';
-
   const containerStyle = active
-    ? isHeader
-      ? { backgroundColor: m3Colors.onPrimary, borderColor: m3Colors.onPrimary }
-      : { backgroundColor: m3Colors.secondaryContainer, borderColor: m3Colors.outline }
-    : isHeader
-      ? { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder }
-      : { backgroundColor: m3Colors.surfaceContainerHigh, borderColor: m3Colors.outline };
-
-  const textColor = active
-    ? isHeader
-      ? colors.headerStart
-      : m3Colors.onSecondaryContainer
-    : isHeader
-      ? colors.textOnAccent
-      : m3Colors.onSurfaceVariant;
+    ? { backgroundColor: m3Colors.inverseSurface, borderColor: m3Colors.inverseSurface }
+    : { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder };
 
+  const textColor = disabled ? m3Colors.onDisabled : active ? colors.headerStart : colors.textOnAccent;
   const iconName = icon && isAppIconName(icon) ? icon : null;
+  const focus = useFocusRing();
 
   return (
     <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ selected: Boolean(active), disabled: Boolean(disabled) }}
       onPress={onPress}
+      onFocus={focus.onFocus}
+      onBlur={focus.onBlur}
       disabled={disabled}
-      style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}
+      hitSlop={CHIP_HIT_SLOP}
+      style={({ pressed }) => [
+        styles.chip,
+        containerStyle,
+        pressed && !disabled && styles.chipPressed,
+        focus.focused && !disabled && FOCUS_RING_STYLE,
+      ]}
     >
-      {iconName ? <AppIcon name={iconName} size={isHeader ? 14 : 15} color={textColor} /> : null}
+      {iconName ? <AppIcon name={iconName} size={14} color={textColor} /> : null}
       <Text
-        style={{
-          color: textColor,
-          fontSize: isHeader ? 12 : 13,
-          fontFamily: fonts.semibold,
-        }}
+        style={{ ...m3Type.labelSmall, color: textColor, fontFamily: fonts.semibold }}
+        numberOfLines={1}
       >
         {label}
       </Text>
@@ -61,15 +71,12 @@ const styles = StyleSheet.create({
   chip: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'center',
     gap: spacing.xs,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: spacing.sm,
-    borderRadius: m3Shape.cornerSmall,
-    borderWidth: 1,
-  },
-  chipOnHeader: {
-    borderRadius: m3Shape.cornerFull,
+    minHeight: 36,
     paddingHorizontal: spacing.sm + 2,
-    paddingVertical: spacing.xs,
+    borderRadius: m3Shape.cornerFull,
+    borderWidth: 1,
   },
+  chipPressed: { opacity: 0.85 },
 });

package/src/renderer/ui/ChipRow.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import { CHROME_HORIZONTAL_INSET } from '../theme/chrome-layout';
 import { spacing } from '../theme/proulr-theme';
 
 type ChipRowProps = {
   children: React.ReactNode;
-  variant?: 'default' | 'onHeader';
 };
 
-/** Horizontal filter chip scroller — single chrome style for Discover, inbox, etc. */
-export function ChipRow({ children, variant = 'default' }: ChipRowProps) {
-  const isHeader = variant === 'onHeader';
-
+/**
+ * Linha horizontal de pílulas — a mesma fileira do Caçar, do hub do chat e de
+ * qualquer seletor de opções. O encaixe horizontal é do invólucro que chama.
+ */
+export function ChipRow({ children }: ChipRowProps) {
   if (!children) {
-    return <View style={[styles.content, isHeader && styles.contentOnHeader]} />;
+    return <View style={styles.content} />;
   }
 
   return (
@@ -21,7 +20,7 @@ export function ChipRow({ children, variant = 'default' }: ChipRowProps) {
       horizontal
       showsHorizontalScrollIndicator={false}
       style={styles.scroll}
-      contentContainerStyle={[styles.content, isHeader && styles.contentOnHeader]}
+      contentContainerStyle={styles.content}
       keyboardShouldPersistTaps="handled"
       nestedScrollEnabled
     >
@@ -41,10 +40,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: spacing.xs,
     paddingHorizontal: spacing.sm,
-    paddingVertical: 0,
-  },
-  contentOnHeader: {
-    paddingLeft: CHROME_HORIZONTAL_INSET,
-    paddingRight: CHROME_HORIZONTAL_INSET,
   },
 });

package/src/renderer/ui/HintText.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, type TextProps } from 'react-native';
-import { fonts, m3Colors, spacing } from '../theme/proulr-theme';
+import { m3Colors, m3Type, spacing } from '../theme/proulr-theme';
 
 type HintTextProps = TextProps & {
   spaced?: boolean;
@@ -11,10 +11,8 @@ export function HintText({ spaced, style, ...props }: HintTextProps) {
 
 const styles = StyleSheet.create({
   hint: {
+    ...m3Type.bodySmall,
     color: m3Colors.onSurfaceVariant,
-    fontSize: 12,
-    lineHeight: 17,
-    fontFamily: fonts.regular,
   },
   spaced: {
     marginTop: spacing.sm,