@oxy.so/bloom 6.1.0 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -713,6 +713,20 @@
         "default": "./lib/commonjs/page-header/index.js"
       }
     },
+    "./cover-header": {
+      "react-native": {
+        "types": "./lib/typescript/module/cover-header/index.d.ts",
+        "default": "./src/cover-header/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/cover-header/index.d.ts",
+        "default": "./lib/module/cover-header/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/cover-header/index.d.ts",
+        "default": "./lib/commonjs/cover-header/index.js"
+      }
+    },
     "./notification-center": {
       "react-native": {
         "types": "./lib/typescript/module/notification-center/index.d.ts",
@@ -3689,6 +3703,9 @@
       "page-header": [
         "./lib/typescript/module/page-header/index.d.ts"
       ],
+      "cover-header": [
+        "./lib/typescript/module/cover-header/index.d.ts"
+      ],
       "notification-center": [
         "./lib/typescript/module/notification-center/index.d.ts"
       ],

package/src/ai-profile-card/AiProfileCard.tsx

@@ -1,15 +1,5 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Image,
-  ScrollView,
-  StyleSheet,
-  View,
-  useWindowDimensions,
-  type ImageLoadEventData,
-  type ImageSourcePropType,
-  type LayoutChangeEvent,
-  type NativeSyntheticEvent,
-} from 'react-native';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
 
 import { Avatar } from '../avatar';
 import { Badge } from '../badge';
@@ -19,6 +9,7 @@ import { TABULAR } from '../chart-cards/primitives/ChartHeader';
 import { groupThousands } from '../chart-cards/primitives/format';
 import { useCountUp } from '../chart-cards/use-count-up';
 import { Chip } from '../chip';
+import { CoverHeader } from '../cover-header';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useMessages } from '../locale/messages';
 import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
@@ -37,7 +28,7 @@ import { formatCurrency } from '../locale/format-number';
  *   card      radius 24, 1px borderLight, no
  *             fill, clips its children
  *   cover     absolute over the top 165px, top corners 23, background-tertiary
- *             under the photo, `object-position: 50% 45%`
+ *             under the photo, `object-position: 50% 45%` — a `CoverHeader`
  *   content   column 15 apart, padding 124 top / 16 sides / 16 bottom
  *   avatar    80 disc, background-tertiary, initials 30 / 42.5 medium
  *             text-secondary — overlapping the cover's bottom edge by 41
@@ -59,56 +50,8 @@ import { formatCurrency } from '../locale/format-number';
 
 const COVER_HEIGHT = 165;
 const AVATAR_SIZE = 80;
-
-/** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
-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>
-  );
-}
+/** Where the content starts: the avatar overlaps the cover's bottom edge by 41. */
+const CONTENT_TOP = 124;
 
 /**
  * The count-up headline, in its own component: the roll re-renders every frame
@@ -223,12 +166,14 @@ function AiProfileCardComponent({
   );
 
   return (
-    <View
+    <CoverHeader
       testID={testID}
+      coverSource={coverSource}
+      coverPosition={coverPosition}
+      coverHeight={COVER_HEIGHT}
+      overlap={COVER_HEIGHT - CONTENT_TOP}
       style={[
         {
-          position: 'relative',
-          width: '100%',
           minWidth: 0,
           overflow: 'hidden',
           borderRadius: 24,
@@ -236,195 +181,168 @@ function AiProfileCardComponent({
           borderColor: colors.border,
         },
         style,
-      ]}>
-      <View
-        testID={testID ? `${testID}-cover` : undefined}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: COVER_HEIGHT,
-          overflow: 'hidden',
-          borderTopLeftRadius: 23,
-          borderTopRightRadius: 23,
-          backgroundColor: colors.tertiary,
-        }}>
-        {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%',
-          flexDirection: 'column',
-          gap: 15,
-          paddingTop: 124,
-          paddingBottom: 16,
-          paddingLeft: 16,
-          paddingRight: 16,
-        }}>
-        <Avatar
-          testID={testID ? `${testID}-avatar` : undefined}
-          size={AVATAR_SIZE}
-          source={avatarSource ?? undefined}
-          initials={letters}
-          color="neutral"
-          alt={avatarSource ? name : undefined}
-          placeholderColor={colors.tertiary}
-          placeholderIcon={
-            <Text
-              allowFontScaling={false}
-              numberOfLines={1}
-              style={[styles.initials, { color: colors.textSecondary }]}>
-              {letters}
-            </Text>
-          }
-        />
-
-        <View style={{ position: 'relative', width: '100%', flexDirection: 'row', alignItems: 'flex-start', gap: 15 }}>
-          <View style={{ minWidth: 0, flex: 1, flexDirection: 'column', gap: 4 }}>
-            <Text variant="title-2-medium" numberOfLines={1} style={{ color: colors.text }}>
-              {name}
-            </Text>
-            {handle != null || badge != null ? (
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                {handle != null ? (
-                  <Text variant="headline-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
-                    {handle}
-                  </Text>
-                ) : null}
-                {badge != null ? (
-                  <Badge
-                    testID={testID ? `${testID}-badge` : undefined}
-                    content={badge}
-                    style={{ backgroundColor: colors.tertiary }}
-                    textStyle={{ color: colors.textSecondary }}
-                  />
-                ) : null}
-              </View>
-            ) : null}
-          </View>
-          {actions ? (
-            <View
-              testID={testID ? `${testID}-actions` : undefined}
-              style={{
-                position: 'absolute',
-                top: -34,
-                right: 4,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                gap: 10,
-              }}>
-              {actions}
-            </View>
-          ) : null}
-        </View>
+      ]}
+      coverStyle={{ borderTopLeftRadius: 23, borderTopRightRadius: 23 }}
+      contentStyle={{
+        flexDirection: 'column',
+        gap: 15,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+      }}>
+      <Avatar
+        testID={testID ? `${testID}-avatar` : undefined}
+        size={AVATAR_SIZE}
+        source={avatarSource ?? undefined}
+        initials={letters}
+        color="neutral"
+        alt={avatarSource ? name : undefined}
+        placeholderColor={colors.tertiary}
+        placeholderIcon={
+          <Text
+            allowFontScaling={false}
+            numberOfLines={1}
+            style={[styles.initials, { color: colors.textSecondary }]}>
+            {letters}
+          </Text>
+        }
+      />
 
-        <View style={{ width: '100%', flexDirection: 'column', gap: 8 }}>
-          <View style={{ flexDirection: 'column', gap: 2 }}>
-            <Text variant="body-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
-              {contributionsLabel}
-            </Text>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-              <RollingHeadline
-                value={contributions}
-                duration={countUpDuration}
-                format={format}
-                color={colors.text}
-                testID={testID ? `${testID}-headline` : undefined}
-              />
-              {delta != null ? (
-                <Chip
-                  size="md"
-                  testID={testID ? `${testID}-delta` : undefined}
-                  style={{ alignSelf: 'center', backgroundColor: colors.chip.background }}
-                  textStyle={{ color: colors.chip.foreground }}>
-                  {delta}
-                </Chip>
+      <View style={{ position: 'relative', width: '100%', flexDirection: 'row', alignItems: 'flex-start', gap: 15 }}>
+        <View style={{ minWidth: 0, flex: 1, flexDirection: 'column', gap: 4 }}>
+          <Text variant="title-2-medium" numberOfLines={1} style={{ color: colors.text }}>
+            {name}
+          </Text>
+          {handle != null || badge != null ? (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              {handle != null ? (
+                <Text variant="headline-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
+                  {handle}
+                </Text>
+              ) : null}
+              {badge != null ? (
+                <Badge
+                  testID={testID ? `${testID}-badge` : undefined}
+                  content={badge}
+                  style={{ backgroundColor: colors.tertiary }}
+                  textStyle={{ color: colors.textSecondary }}
+                />
               ) : null}
-            </View>
-          </View>
-
-          {stats && stats.length > 0 ? (
-            <View testID={testID ? `${testID}-stats` : undefined} style={{ flexDirection: 'column', gap: 8 }}>
-              {(wide ? [stats.map((_, i) => i)] : pairs(stats.length)).map((row) => (
-                <View key={row[0]} style={{ flexDirection: 'row', alignItems: 'stretch', gap: 8 }}>
-                  {row.map((i) => {
-                    const stat = stats[i]!;
-                    return (
-                      <View
-                        key={`${i}-${stat.label}`}
-                        testID={testID ? `${testID}-stat-${i}` : undefined}
-                        style={[styles.tile, { backgroundColor: colors.secondary }]}>
-                        <Text variant="body-medium" numberOfLines={1} style={{ width: '100%', color: colors.text }}>
-                          {stat.value}
-                        </Text>
-                        <Text
-                          variant="body-2-medium"
-                          numberOfLines={1}
-                          style={{ width: '100%', color: colors.textSecondary }}>
-                          {stat.label}
-                        </Text>
-                      </View>
-                    );
-                  })}
-                  {/* An odd tile keeps its half of the two-column grid. */}
-                  {!wide && row.length === 1 ? <View style={styles.tileSpacer} /> : null}
-                </View>
-              ))}
             </View>
           ) : null}
-
+        </View>
+        {actions ? (
           <View
+            testID={testID ? `${testID}-actions` : undefined}
             style={{
-              width: '100%',
+              position: 'absolute',
+              top: -34,
+              right: 4,
               flexDirection: 'row',
               alignItems: 'center',
-              justifyContent: 'space-between',
-              paddingTop: 6,
-              paddingLeft: 2,
+              justifyContent: 'flex-end',
+              gap: 10,
             }}>
-            <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
-              {activityLabel}
-            </Text>
-            {periods.length > 0 ? (
-              <SegmentedControl
-                label={messages.periodGroup(activityLabel)}
-                type="radio"
-                variant="plain"
-                value={selectedPeriod}
-                onValueChange={setPeriod}>
-                {periods.map((p) => (
-                  <SegmentedControlItem
-                    key={p.id}
-                    value={p.id}
-                    testID={testID ? `${testID}-period-${p.id}` : undefined}>
-                    <SegmentedControlItemText>{p.label}</SegmentedControlItemText>
-                  </SegmentedControlItem>
-                ))}
-              </SegmentedControl>
+            {actions}
+          </View>
+        ) : null}
+      </View>
+
+      <View style={{ width: '100%', flexDirection: 'column', gap: 8 }}>
+        <View style={{ flexDirection: 'column', gap: 2 }}>
+          <Text variant="body-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
+            {contributionsLabel}
+          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <RollingHeadline
+              value={contributions}
+              duration={countUpDuration}
+              format={format}
+              color={colors.text}
+              testID={testID ? `${testID}-headline` : undefined}
+            />
+            {delta != null ? (
+              <Chip
+                size="md"
+                testID={testID ? `${testID}-delta` : undefined}
+                style={{ alignSelf: 'center', backgroundColor: colors.chip.background }}
+                textStyle={{ color: colors.chip.foreground }}>
+                {delta}
+              </Chip>
             ) : null}
           </View>
+        </View>
 
-          {wide ? (
-            grid
-          ) : (
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flexGrow: 0 }}>
-              {grid}
-            </ScrollView>
-          )}
+        {stats && stats.length > 0 ? (
+          <View testID={testID ? `${testID}-stats` : undefined} style={{ flexDirection: 'column', gap: 8 }}>
+            {(wide ? [stats.map((_, i) => i)] : pairs(stats.length)).map((row) => (
+              <View key={row[0]} style={{ flexDirection: 'row', alignItems: 'stretch', gap: 8 }}>
+                {row.map((i) => {
+                  const stat = stats[i]!;
+                  return (
+                    <View
+                      key={`${i}-${stat.label}`}
+                      testID={testID ? `${testID}-stat-${i}` : undefined}
+                      style={[styles.tile, { backgroundColor: colors.secondary }]}>
+                      <Text variant="body-medium" numberOfLines={1} style={{ width: '100%', color: colors.text }}>
+                        {stat.value}
+                      </Text>
+                      <Text
+                        variant="body-2-medium"
+                        numberOfLines={1}
+                        style={{ width: '100%', color: colors.textSecondary }}>
+                        {stat.label}
+                      </Text>
+                    </View>
+                  );
+                })}
+                {/* An odd tile keeps its half of the two-column grid. */}
+                {!wide && row.length === 1 ? <View style={styles.tileSpacer} /> : null}
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingTop: 6,
+            paddingLeft: 2,
+          }}>
+          <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
+            {activityLabel}
+          </Text>
+          {periods.length > 0 ? (
+            <SegmentedControl
+              label={messages.periodGroup(activityLabel)}
+              type="radio"
+              variant="plain"
+              value={selectedPeriod}
+              onValueChange={setPeriod}>
+              {periods.map((p) => (
+                <SegmentedControlItem
+                  key={p.id}
+                  value={p.id}
+                  testID={testID ? `${testID}-period-${p.id}` : undefined}>
+                  <SegmentedControlItemText>{p.label}</SegmentedControlItemText>
+                </SegmentedControlItem>
+              ))}
+            </SegmentedControl>
+          ) : null}
         </View>
+
+        {wide ? (
+          grid
+        ) : (
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flexGrow: 0 }}>
+            {grid}
+          </ScrollView>
+        )}
       </View>
-    </View>
+    </CoverHeader>
   );
 }
 

package/src/chat-composer/SuggestionList.tsx

@@ -1,4 +1,5 @@
 import { Surface } from '../surface';
+import { Loading } from '../loading';
 import { createSuggestionList } from './create-suggestion-list';
 
-export const SuggestionList = createSuggestionList({ Surface });
+export const SuggestionList = createSuggestionList({ Surface, Loading });

package/src/chat-composer/SuggestionList.web.tsx

@@ -1,4 +1,5 @@
 import { Surface } from '../surface/index.web';
+import { Loading } from '../loading/index.web';
 import { createSuggestionList } from './create-suggestion-list';
 
-export const SuggestionList = createSuggestionList({ Surface });
+export const SuggestionList = createSuggestionList({ Surface, Loading });

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' },
 });