@oxy.so/bloom 6.1.0 → 6.2.1

package/src/chat-composer/create-suggestion-list.tsx

@@ -1,6 +1,7 @@
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useCardFill } from '../card/use-card-fill';
 import type { Surface as SurfaceComponent } from '../surface';
+import type { Loading as LoadingComponent } from '../loading';
 /**
  * The anchored list above the composer: `@mention`, `/command` and `:shortcode`
  * are ONE part with a `kind`, because the row geometry, the keyboard model and
@@ -14,6 +15,7 @@ import React from 'react';
 import { Image, Pressable, ScrollView, View } from 'react-native';
 
 import { RiHashtag } from '../icons/remix/RiHashtag';
+import { RiVerifiedBadgeFill } from '../icons/remix/RiVerifiedBadgeFill';
 import { useImageResolver } from '../image-resolver/context';
 import { useMessages } from '../locale/messages';
 import { useTheme } from '../theme/use-theme';
@@ -30,8 +32,9 @@ import type { ChatComposerSuggestion, SuggestionKind, SuggestionListProps } from
 import { dataHook, IS_WEB } from './web-hooks';
 
 /** Platform dependencies are bound once; shared rendering adds no wrapper. */
-export function createSuggestionList({ Surface }: {
+export function createSuggestionList({ Surface, Loading }: {
   Surface: typeof SurfaceComponent;
+  Loading: typeof LoadingComponent;
 }) {
 
   function isUrl(value: string): boolean {
@@ -111,11 +114,15 @@ export function createSuggestionList({ Surface }: {
     style,
     testID,
     accessibilityLabel,
+    loading = false,
+    showEmpty = false,
+    emptyLabel,
   }: SuggestionListProps) {
     const theme = useTheme();
     const palette = resolveChatComposerPalette(theme, useCardFill(style));
     const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-    if (suggestions.length === 0) return null;
+    const empty = !loading && suggestions.length === 0;
+    if (empty && !showEmpty) return null;
 
     // React Native's `Role` union has no `listbox`; react-native-web passes the
     // DOM `role` straight through, so it travels as a web-only prop.
@@ -144,6 +151,34 @@ export function createSuggestionList({ Surface }: {
             {header}
           </Text>
         ) : null}
+        {loading ? (
+          <View style={{ minHeight: SUGGESTION_ROW_HEIGHT, justifyContent: 'center', paddingLeft: 8, paddingRight: 8 }}>
+            <Loading
+              variant="inline"
+              size="sm"
+              color={palette.textSecondary}
+              text={messages.searchingSuggestions}
+              textStyle={{ color: palette.textSecondary }}
+              accessibilityLabel={messages.searchingSuggestions}
+              testID={testID ? `${testID}-loading` : undefined}
+            />
+          </View>
+        ) : empty ? (
+          <Text
+            variant="body-2-regular"
+            accessibilityRole="text"
+            style={{
+              color: palette.textSecondary,
+              minHeight: SUGGESTION_ROW_HEIGHT,
+              paddingLeft: 8,
+              paddingRight: 8,
+              paddingTop: 10,
+              paddingBottom: 10,
+            }}
+            testID={testID ? `${testID}-empty` : undefined}>
+            {emptyLabel ?? messages.noSuggestions[kind]}
+          </Text>
+        ) : (
         <ScrollView
           {...dataHook('bloomChatComposerScroll')}
           {...listRole}
@@ -167,9 +202,12 @@ export function createSuggestionList({ Surface }: {
               cursor: suggestion.disabled ? 'auto' : 'pointer',
               '--bloom-chat-composer-ring': palette.focusRing,
             };
-            const name = suggestion.handle
-              ? `${suggestion.label} ${suggestion.handle}`
-              : suggestion.label;
+            const verified = kind === 'mention' && suggestion.verified === true;
+            const name = [
+              suggestion.label,
+              verified ? messages.suggestionVerified : undefined,
+              suggestion.handle,
+            ].filter(Boolean).join(verified ? ', ' : ' ');
             return (
               <Pressable
                 key={suggestion.id}
@@ -186,9 +224,16 @@ export function createSuggestionList({ Surface }: {
                 <Leading kind={kind} suggestion={suggestion} />
                 <View style={{ flexShrink: 1, flexGrow: 1 }}>
                   <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
-                    <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
-                      {suggestion.label}
-                    </Text>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexShrink: 1 }}>
+                      <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text, flexShrink: 1 }}>
+                        {suggestion.label}
+                      </Text>
+                      {verified ? (
+                        <View testID={testID ? `${testID}-verified-${suggestion.id}` : undefined}>
+                          <RiVerifiedBadgeFill width={14} height={14} fill={palette.accent} />
+                        </View>
+                      ) : null}
+                    </View>
                     {suggestion.handle ? (
                       <Text
                         variant="body-2-regular"
@@ -211,6 +256,7 @@ export function createSuggestionList({ Surface }: {
             );
           })}
         </ScrollView>
+        )}
       </Surface>
     );
   }

package/src/chat-composer/messages.ts

@@ -46,6 +46,12 @@ export interface ChatComposerMessages {
   removeAttachment: (name: string) => string;
   /** `SuggestionList`'s name per kind. */
   suggestions: Record<SuggestionKind, string>;
+  /** A suggestion row's verified marker, as announced. */
+  suggestionVerified: string;
+  /** `SuggestionList` while its caller is still searching. */
+  searchingSuggestions: string;
+  /** `SuggestionList` when a finished search found nothing, per kind. */
+  noSuggestions: Record<SuggestionKind, string>;
   /** `AttachmentMenu`'s default rows. */
   attachmentItems: Record<AttachmentMenuItemId, string>;
 }
@@ -77,5 +83,8 @@ export const CHAT_COMPOSER_MESSAGES: MessageCatalog<ChatComposerMessages> = defi
   attachments: 'Attachments',
   removeAttachment: (name) => `Remove ${name}`,
   suggestions: { mention: 'People', command: 'Commands', emoji: 'Emoji' },
+  suggestionVerified: 'Verified',
+  searchingSuggestions: 'Searching…',
+  noSuggestions: { mention: 'No people found', command: 'No commands found', emoji: 'No emoji found' },
   attachmentItems: { gallery: 'Gallery', camera: 'Camera', file: 'File', location: 'Location', contact: 'Contact', poll: 'Poll', music: 'Music' },
 });

package/src/chat-composer/types.ts

@@ -66,6 +66,8 @@ export interface ChatComposerSuggestion {
   avatar?: string;
   /** The glyph itself, for `kind="emoji"`. */
   emoji?: string;
+  /** Draws the verified marker after the name, for `kind="mention"`. */
+  verified?: boolean;
   disabled?: boolean;
 }
 
@@ -91,6 +93,21 @@ export interface SuggestionListProps extends PartProps {
   maxHeight?: number;
   /** Accessible name of the listbox. Defaults to a name derived from `kind`. */
   accessibilityLabel?: string;
+  /**
+   * The caller is still searching. Draws a named, busy "Searching…" line in
+   * place of the rows, so a list that has nothing YET is not mistaken for one
+   * that found nothing. Default `false`.
+   */
+  loading?: boolean;
+  /**
+   * Draws a "No people found" line when a finished search is empty. Off by
+   * default, and an empty list draws nothing — right for a composer that shows
+   * the list only while it has rows; a picker the user opened on purpose wants
+   * the answer.
+   */
+  showEmpty?: boolean;
+  /** Replaces the localized empty line. */
+  emptyLabel?: string;
 }
 
 export interface ChatComposerLabels {

package/src/cover-header/CoverHeader.tsx

@@ -0,0 +1,75 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { CoverImage } from './CoverImage';
+import type { CoverHeaderProps } from './types';
+
+const DEFAULT_POSITION = { x: 0.5, y: 0.5 };
+
+/**
+ * A cover band with content rising into its bottom edge — a profile's banner
+ * and the avatar that overlaps it.
+ *
+ *   cover     absolute over the top `coverHeight`, clipped, background-tertiary
+ *             under the photo; the FIRST child
+ *   content   in flow, `paddingTop: coverHeight - overlap`; the LAST child
+ *
+ * The overlap is made by layout, not by moving anything: the band is taken out
+ * of flow and the content starts `overlap` short of its bottom edge. No
+ * negative margin, no transform, no zIndex. The content is the later sibling,
+ * so it paints over the band on iOS, Android and web alike, and the measured
+ * height is the real one — a list header or a sticky section after it starts
+ * exactly where the content ends.
+ */
+function CoverHeaderComponent({
+  coverSource,
+  coverPosition = DEFAULT_POSITION,
+  cover,
+  coverHeight = 170,
+  overlap = 45,
+  coverStyle,
+  contentStyle,
+  children,
+  style,
+  testID,
+}: CoverHeaderProps) {
+  const theme = useTheme();
+  const rise = Math.min(Math.max(overlap, 0), coverHeight);
+
+  return (
+    <View testID={testID} style={[{ position: 'relative', width: '100%' }, style]}>
+      <View
+        testID={testID ? `${testID}-cover` : undefined}
+        style={[
+          {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: coverHeight,
+            overflow: 'hidden',
+            backgroundColor: theme.colors.backgroundTertiary,
+          },
+          coverStyle,
+        ]}>
+        {cover ??
+          (coverSource ? (
+            <CoverImage
+              source={coverSource}
+              position={coverPosition}
+              testID={testID ? `${testID}-cover-image` : undefined}
+            />
+          ) : null)}
+      </View>
+      <View
+        testID={testID ? `${testID}-content` : undefined}
+        style={[{ position: 'relative', width: '100%' }, contentStyle, { paddingTop: coverHeight - rise }]}>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+export const CoverHeader = memo(CoverHeaderComponent);
+CoverHeader.displayName = 'CoverHeader';

package/src/cover-header/CoverImage.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Image,
+  StyleSheet,
+  View,
+  type ImageLoadEventData,
+  type ImageSourcePropType,
+  type LayoutChangeEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+
+/** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
+export function CoverImage({
+  source,
+  position,
+  testID,
+}: {
+  source: string | ImageSourcePropType;
+  position: { x: number; y: number };
+  testID?: string;
+}) {
+  const [box, setBox] = useState<{ width: number; height: number } | null>(null);
+  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
+  const resolved: ImageSourcePropType = typeof source === 'string' ? { uri: source } : source;
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setBox((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
+  }, []);
+  const onLoad = useCallback((event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    const s = event.nativeEvent?.source;
+    if (s && s.width > 0 && s.height > 0) setNatural({ width: s.width, height: s.height });
+  }, []);
+
+  const frame = useMemo(() => {
+    if (!box || !natural) return null;
+    const scale = Math.max(box.width / natural.width, box.height / natural.height);
+    const width = natural.width * scale;
+    const height = natural.height * scale;
+    return { width, height, left: (box.width - width) * position.x, top: (box.height - height) * position.y };
+  }, [box, natural, position.x, position.y]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} onLayout={onLayout} testID={testID ? `${testID}-frame` : undefined}>
+      <Image
+        testID={testID}
+        source={resolved}
+        onLoad={onLoad}
+        accessibilityIgnoresInvertColors
+        aria-hidden
+        resizeMode="cover"
+        style={
+          frame
+            ? { position: 'absolute', left: frame.left, top: frame.top, width: frame.width, height: frame.height }
+            : StyleSheet.absoluteFill
+        }
+      />
+    </View>
+  );
+}

package/src/cover-header/index.ts

@@ -0,0 +1,3 @@
+export { CoverHeader } from './CoverHeader';
+
+export type { CoverHeaderProps } from './types';

package/src/cover-header/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+
+export interface CoverHeaderProps {
+  /** Photo across the cover band. Without one the band shows `background-tertiary`. */
+  coverSource?: string | ImageSourcePropType | null;
+  /**
+   * Where the photo's crop sits, as fractions (`object-position`). Default
+   * `{ x: 0.5, y: 0.5 }` — centred, as `resizeMode="cover"`.
+   */
+  coverPosition?: { x: number; y: number };
+  /** Drawn in the band instead of the photo (an editor, a gradient, a video poster). */
+  cover?: ReactNode;
+  /** Height of the cover band. Default `170`. */
+  coverHeight?: number;
+  /**
+   * How far the content rises into the cover band. Default `45` — half a 90px
+   * avatar. Clamped to `0..coverHeight`.
+   */
+  overlap?: number;
+  /** The band's own style: corner radii, a different fill. */
+  coverStyle?: StyleProp<ViewStyle>;
+  /** The content column's style. Its `paddingTop` is the component's and is ignored. */
+  contentStyle?: StyleProp<ViewStyle>;
+  /** The content: the avatar row first, then whatever follows it. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  /** Also names the parts: `-cover`, `-cover-image`, `-content`. */
+  testID?: string;
+}

package/src/dialog/DialogBottomSheet.tsx

@@ -197,7 +197,7 @@ export function DialogBottomSheet({
     const maxHeightPercent: `${number}%` = `${Math.round(maxHeightRatio * 100)}%`;
     return [
       {
-        backgroundColor: 'transparent',
+        backgroundColor: theme.colors.background,
         ...surfaceStyle(SURFACE_SHAPES.sheet),
         maxHeight: maxHeightPercent,
       },

package/src/index.ts

@@ -198,6 +198,7 @@ export * from './calendar';
 export * from './stat-cards';
 export * from './recent-hires-card';
 export * from './ai-profile-card';
+export * from './cover-header';
 export * from './important-alerts-card';
 export * from './patient-info-card';
 export * from './sidebar';

package/src/index.web.ts

@@ -203,6 +203,7 @@ export * from './calendar';
 export * from './stat-cards';
 export * from './recent-hires-card';
 export * from './ai-profile-card';
+export * from './cover-header';
 export * from './important-alerts-card';
 export * from './patient-info-card';
 export * from './sidebar';

package/src/locale/translations/ar.ts

@@ -176,6 +176,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'المرفقات',
   removeAttachment: (name) => `إزالة ${name}`,
   suggestions: { mention: 'الأشخاص', command: 'الأوامر', emoji: 'رموز تعبيرية' },
+  suggestionVerified: 'موثّق',
+  searchingSuggestions: 'جارٍ البحث…',
+  noSuggestions: { mention: 'لم يتم العثور على أشخاص', command: 'لم يتم العثور على أوامر', emoji: 'لم يتم العثور على رموز تعبيرية' },
   attachmentItems: { gallery: 'المعرض', camera: 'الكاميرا', file: 'ملف', location: 'الموقع', contact: 'جهة اتصال', poll: 'استطلاع', music: 'موسيقى' },
 };
 

package/src/locale/translations/bn.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'সংযুক্তি',
   removeAttachment: (name) => `${name} সরান`,
   suggestions: { mention: 'লোকজন', command: 'কমান্ড', emoji: 'ইমোজি' },
+  suggestionVerified: 'যাচাইকৃত',
+  searchingSuggestions: 'খোঁজা হচ্ছে…',
+  noSuggestions: { mention: 'কাউকে পাওয়া যায়নি', command: 'কোনো কমান্ড পাওয়া যায়নি', emoji: 'কোনো ইমোজি পাওয়া যায়নি' },
   attachmentItems: { gallery: 'গ্যালারি', camera: 'ক্যামেরা', file: 'ফাইল', location: 'অবস্থান', contact: 'পরিচিতি', poll: 'পোল', music: 'সংগীত' },
 };
 

package/src/locale/translations/ca.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Fitxers adjunts',
   removeAttachment: (name) => `Treu ${name}`,
   suggestions: { mention: 'Persones', command: 'Ordres', emoji: 'Emoji' },
+  suggestionVerified: 'Verificat',
+  searchingSuggestions: 'Cercant…',
+  noSuggestions: { mention: "No s'ha trobat ningú", command: "No s'han trobat ordres", emoji: "No s'han trobat emojis" },
   attachmentItems: { gallery: 'Galeria', camera: 'Càmera', file: 'Fitxer', location: 'Ubicació', contact: 'Contacte', poll: 'Enquesta', music: 'Música' },
 };
 

package/src/locale/translations/de.ts

@@ -160,6 +160,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Anhänge',
   removeAttachment: (name) => `${name} entfernen`,
   suggestions: { mention: 'Personen', command: 'Befehle', emoji: 'Emoji' },
+  suggestionVerified: 'Verifiziert',
+  searchingSuggestions: 'Suche läuft…',
+  noSuggestions: { mention: 'Keine Personen gefunden', command: 'Keine Befehle gefunden', emoji: 'Keine Emojis gefunden' },
   attachmentItems: { gallery: 'Galerie', camera: 'Kamera', file: 'Datei', location: 'Standort', contact: 'Kontakt', poll: 'Umfrage', music: 'Musik' },
 };
 

package/src/locale/translations/es.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Archivos adjuntos',
   removeAttachment: (name) => `Quitar ${name}`,
   suggestions: { mention: 'Personas', command: 'Comandos', emoji: 'Emoji' },
+  suggestionVerified: 'Verificado',
+  searchingSuggestions: 'Buscando…',
+  noSuggestions: { mention: 'No se encontraron personas', command: 'No se encontraron comandos', emoji: 'No se encontraron emojis' },
   attachmentItems: { gallery: 'Galería', camera: 'Cámara', file: 'Archivo', location: 'Ubicación', contact: 'Contacto', poll: 'Encuesta', music: 'Música' },
 };
 

package/src/locale/translations/fr.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Pièces jointes',
   removeAttachment: (name) => `Retirer ${name}`,
   suggestions: { mention: 'Personnes', command: 'Commandes', emoji: 'Émoji' },
+  suggestionVerified: 'Vérifié',
+  searchingSuggestions: 'Recherche…',
+  noSuggestions: { mention: 'Aucune personne trouvée', command: 'Aucune commande trouvée', emoji: 'Aucun émoji trouvé' },
   attachmentItems: { gallery: 'Galerie', camera: 'Appareil photo', file: 'Fichier', location: 'Position', contact: 'Contact', poll: 'Sondage', music: 'Musique' },
 };
 

package/src/locale/translations/hi.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'अटैचमेंट',
   removeAttachment: (name) => `${name} हटाएं`,
   suggestions: { mention: 'लोग', command: 'कमांड', emoji: 'इमोजी' },
+  suggestionVerified: 'सत्यापित',
+  searchingSuggestions: 'खोज रहे हैं…',
+  noSuggestions: { mention: 'कोई व्यक्ति नहीं मिला', command: 'कोई कमांड नहीं मिला', emoji: 'कोई इमोजी नहीं मिला' },
   attachmentItems: { gallery: 'गैलरी', camera: 'कैमरा', file: 'फ़ाइल', location: 'लोकेशन', contact: 'संपर्क', poll: 'पोल', music: 'संगीत' },
 };
 

package/src/locale/translations/id.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Lampiran',
   removeAttachment: (name) => `Hapus ${name}`,
   suggestions: { mention: 'Orang', command: 'Perintah', emoji: 'Emoji' },
+  suggestionVerified: 'Terverifikasi',
+  searchingSuggestions: 'Mencari…',
+  noSuggestions: { mention: 'Orang tidak ditemukan', command: 'Perintah tidak ditemukan', emoji: 'Emoji tidak ditemukan' },
   attachmentItems: { gallery: 'Galeri', camera: 'Kamera', file: 'File', location: 'Lokasi', contact: 'Kontak', poll: 'Polling', music: 'Musik' },
 };
 

package/src/locale/translations/it.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Allegati',
   removeAttachment: (name) => `Rimuovi ${name}`,
   suggestions: { mention: 'Persone', command: 'Comandi', emoji: 'Emoji' },
+  suggestionVerified: 'Verificato',
+  searchingSuggestions: 'Ricerca in corso…',
+  noSuggestions: { mention: 'Nessuna persona trovata', command: 'Nessun comando trovato', emoji: 'Nessuna emoji trovata' },
   attachmentItems: { gallery: 'Galleria', camera: 'Fotocamera', file: 'File', location: 'Posizione', contact: 'Contatto', poll: 'Sondaggio', music: 'Musica' },
 };
 

package/src/locale/translations/ja.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: '添付ファイル',
   removeAttachment: (name) => `${name}を削除`,
   suggestions: { mention: 'ユーザー', command: 'コマンド', emoji: '絵文字' },
+  suggestionVerified: '認証済み',
+  searchingSuggestions: '検索中…',
+  noSuggestions: { mention: 'ユーザーが見つかりません', command: 'コマンドが見つかりません', emoji: '絵文字が見つかりません' },
   attachmentItems: { gallery: 'ギャラリー', camera: 'カメラ', file: 'ファイル', location: '位置情報', contact: '連絡先', poll: 'アンケート', music: '音楽' },
 };
 

package/src/locale/translations/pt.ts

@@ -165,6 +165,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Anexos',
   removeAttachment: (name) => `Remover ${name}`,
   suggestions: { mention: 'Pessoas', command: 'Comandos', emoji: 'Emoji' },
+  suggestionVerified: 'Verificado',
+  searchingSuggestions: 'Pesquisando…',
+  noSuggestions: { mention: 'Nenhuma pessoa encontrada', command: 'Nenhum comando encontrado', emoji: 'Nenhum emoji encontrado' },
   attachmentItems: { gallery: 'Galeria', camera: 'Câmera', file: 'Arquivo', location: 'Localização', contact: 'Contato', poll: 'Enquete', music: 'Música' },
 };
 

package/src/locale/translations/ru.ts

@@ -163,6 +163,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Вложения',
   removeAttachment: (name) => `Удалить ${name}`,
   suggestions: { mention: 'Люди', command: 'Команды', emoji: 'Эмодзи' },
+  suggestionVerified: 'Подтверждён',
+  searchingSuggestions: 'Поиск…',
+  noSuggestions: { mention: 'Никого не найдено', command: 'Команды не найдены', emoji: 'Эмодзи не найдены' },
   attachmentItems: { gallery: 'Галерея', camera: 'Камера', file: 'Файл', location: 'Геопозиция', contact: 'Контакт', poll: 'Опрос', music: 'Музыка' },
 };
 

package/src/locale/translations/tr.ts

@@ -159,6 +159,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: 'Ekler',
   removeAttachment: (name) => `Kaldır: ${name}`,
   suggestions: { mention: 'Kişiler', command: 'Komutlar', emoji: 'Emoji' },
+  suggestionVerified: 'Doğrulanmış',
+  searchingSuggestions: 'Aranıyor…',
+  noSuggestions: { mention: 'Kişi bulunamadı', command: 'Komut bulunamadı', emoji: 'Emoji bulunamadı' },
   attachmentItems: { gallery: 'Galeri', camera: 'Kamera', file: 'Dosya', location: 'Konum', contact: 'Kişi', poll: 'Anket', music: 'Müzik' },
 };
 

package/src/locale/translations/zh.ts

@@ -158,6 +158,9 @@ const CHAT_COMPOSER_MESSAGES: Translations['CHAT_COMPOSER_MESSAGES'] = {
   attachments: '附件',
   removeAttachment: (name) => `移除 ${name}`,
   suggestions: { mention: '用户', command: '命令', emoji: '表情' },
+  suggestionVerified: '已认证',
+  searchingSuggestions: '正在搜索…',
+  noSuggestions: { mention: '未找到用户', command: '未找到命令', emoji: '未找到表情' },
   attachmentItems: { gallery: '相册', camera: '相机', file: '文件', location: '位置', contact: '联系人', poll: '投票', music: '音乐' },
 };
 

package/src/surface/SurfacePaint.tsx

@@ -1,7 +1,7 @@
 import { surfaceStyle } from '../shapes/surface-style';
 import type { SurfaceShape } from '../shapes/corner-types';
-import React, { memo, useEffect } from 'react';
-import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { Platform, StyleSheet, View, type LayoutChangeEvent, type ViewStyle } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 import { useSvgIdPrefix } from '../styles/svg-id';
 import { StyledView } from '../styles/styled-primitives';
@@ -47,6 +47,13 @@ export const SurfacePaint = memo(function SurfacePaint({
   const resolvedFill = resolveSurfaceTint(fill ?? 'transparent');
   const id = useSvgIdPrefix('bloom-surface');
   const isWeb = Platform.OS === 'web';
+  const [nativeSize, setNativeSize] = useState<{ width: number; height: number } | null>(null);
+  const onNativeLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
+    setNativeSize(previous => previous?.width === width && previous.height === height
+      ? previous : { width, height });
+  }, []);
   useSurfaceRefraction(isWeb);
   useEffect(() => {
     if (isWeb) adoptStyleSheet('bloom-surface-paint-web-css', WEB_PAINT_CSS);
@@ -67,17 +74,20 @@ export const SurfacePaint = memo(function SurfacePaint({
   return (
     <View
       testID={testID}
+      onLayout={onNativeLayout}
       pointerEvents="none"
       style={[StyleSheet.absoluteFill, geometry, { overflow: 'hidden' }]}
     >
+      {/* Android SVG percentage paths cache canvas dimensions after first paint.
+          Update the actual Rect geometry when this backing View changes size. */}
       <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
         <Defs>
           {sheen ? <LinearGradient id={`${id}-sheen`} x1="0" y1="0" x2="0" y2="1">
             {optics.sheen.map(stop => <Stop key={stop.offset} offset={String(stop.offset)} stopColor={stop.color} stopOpacity={stop.opacity} />)}
           </LinearGradient> : null}
         </Defs>
-        {fill !== undefined ? <Rect x="0" y="0" width="100%" height="100%" fill={base.color} fillOpacity={base.opacity} /> : null}
-        {sheen ? <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id}-sheen)`} /> : null}
+        {fill !== undefined ? <Rect x="0" y="0" width={nativeSize?.width ?? '100%'} height={nativeSize?.height ?? '100%'} fill={base.color} fillOpacity={base.opacity} /> : null}
+        {sheen ? <Rect x="0" y="0" width={nativeSize?.width ?? '100%'} height={nativeSize?.height ?? '100%'} fill={`url(#${id}-sheen)`} /> : null}
       </Svg>
       <View pointerEvents="none" style={[StyleSheet.absoluteFill, geometry, { boxShadow: optics.rim }]} />
     </View>