@oxy.so/bloom 5.0.0 → 5.1.1

package/src/chat-composer/ReactionPicker.tsx

@@ -1,103 +1,5 @@
-import { useSurfaceFill } from '../styles/surface-levels';
-import { useCardFill } from '../card/use-card-fill';
 import { Surface } from '../surface';
-/**
- * The quick reaction bar: six glyphs and a "+" that hands over to the full
- * `EmojiPicker`. It is its own part rather than a mode of the picker because it
- * is shown in a different place (over a message, above its menu) and must stay
- * one row tall at 390px.
- */
-import React from 'react';
-import { View } from 'react-native';
-
 import { Button } from '../button';
-import { RiAddLine } from '../icons/remix/RiAddLine';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import { REACTION_PICKER_EMOJIS, resolveChatComposerPalette } from './shared';
-import type { ReactionPickerProps } from './types';
-import { useChatComposerWebCss } from './web-hooks';
-import { useMessages } from '../locale/messages';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-
-const BOX = { small: 30, medium: 36 } as const;
-const GLYPH = { small: 'title-3-regular', medium: 'title-2-regular' } as const;
-
-export function ReactionPicker({
-  emojis = REACTION_PICKER_EMOJIS,
-  selected,
-  onSelectEmoji,
-  onMorePress,
-  moreLabel: moreLabelProp,
-  size = 'medium',
-  surface = true,
-  style,
-  testID,
-  accessibilityLabel: accessibilityLabelProp,
-  emojiLabel,
-}: ReactionPickerProps) {
-  const theme = useTheme();
-  const raisedFill = useCardFill(style);
-  const parentFill = useSurfaceFill();
-  const palette = resolveChatComposerPalette(theme, surface ? raisedFill : parentFill);
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  const moreLabel = moreLabelProp ?? messages.moreReactions;
-  const accessibilityLabel = accessibilityLabelProp ?? messages.quickReactions;
-  useChatComposerWebCss();
-  const box = BOX[size];
-
-  const Container = surface ? Surface : View;
-  const bar: WebCssStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 2,
-    alignSelf: 'flex-start',
-    borderRadius: 9999,
-    paddingLeft: 4,
-    paddingRight: 4,
-    paddingTop: 4,
-    paddingBottom: 4,
-    '--bloom-chat-composer-ring': palette.focusRing,
-  };
-
-  const cell: WebCssStyle = {
-    width: box, height: box, minWidth: box, minHeight: box, flexShrink: 0, padding: 0, borderRadius: 9999,
-  };
+import { createReactionPicker } from './create-reaction-picker';
 
-  return (
-    <Container
-      accessibilityLabel={accessibilityLabel}
-      style={[bar, style]}
-      testID={testID}>
-      {emojis.map((emoji) => {
-        const active = selected === emoji;
-        return (
-          <Button
-            key={emoji}
-            appearance="plain"
-            tone={active ? 'accent' : 'neutral'}
-            accessibilityLabel={emojiLabel ? emojiLabel(emoji) : emoji}
-            pressed={active}
-            onPress={() => onSelectEmoji?.(emoji)}
-            style={cell}
-            testID={testID ? `${testID}-${emoji}` : undefined}>
-            <Text variant={GLYPH[size]}>{emoji}</Text>
-          </Button>
-        );
-      })}
-      {onMorePress ? (
-        <Button
-          appearance="subtle"
-          tone="neutral"
-          accessibilityLabel={moreLabel}
-          onPress={onMorePress}
-          iconOnly
-          icon={RiAddLine}
-          iconSize={18}
-          style={cell}
-          testID={testID ? `${testID}-more` : undefined} />
-      ) : null}
-    </Container>
-  );
-}
+export const ReactionPicker = createReactionPicker({ Surface, Button });

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

@@ -0,0 +1,5 @@
+import { Surface } from '../surface/index.web';
+import { Button } from '../button/index.web';
+import { createReactionPicker } from './create-reaction-picker';
+
+export const ReactionPicker = createReactionPicker({ Surface, Button });

package/src/chat-composer/SuggestionList.tsx

@@ -1,211 +1,4 @@
-import { useSurfaceFill } from '../styles/surface-levels';
-import { useCardFill } from '../card/use-card-fill';
 import { Surface } from '../surface';
-/**
- * The anchored list above the composer: `@mention`, `/command` and `:shortcode`
- * are ONE part with a `kind`, because the row geometry, the keyboard model and
- * the announced role are identical — only the leading slot differs.
- *
- * It is a listbox the composer's field OWNS: `activeIndex` arrives as a prop and
- * the arrow keys are handled on the input, never here. A list that kept its own
- * highlight would fight the field for it the first time a pointer moved.
- */
-import React from 'react';
-import { Image, Pressable, ScrollView, View } from 'react-native';
+import { createSuggestionList } from './create-suggestion-list';
 
-import { RiHashtag } from '../icons/remix/RiHashtag';
-import { useImageResolver } from '../image-resolver/context';
-import { useMessages } from '../locale/messages';
-import { useTheme } from '../theme/use-theme';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { Text } from '../typography';
-import {
-  PANEL_RADIUS,
-  SUGGESTION_MAX_HEIGHT,
-  SUGGESTION_ROW_HEIGHT,
-  resolveChatComposerPalette,
-} from './shared';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-import type { ChatComposerSuggestion, SuggestionKind, SuggestionListProps } from './types';
-import { dataHook, IS_WEB } from './web-hooks';
-
-function isUrl(value: string): boolean {
-  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
-}
-
-function Leading({
-  kind,
-  suggestion,
-}: {
-  kind: SuggestionKind;
-  suggestion: ChatComposerSuggestion;
-}) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme, useSurfaceFill());
-  const resolveImage = useImageResolver();
-
-  if (kind === 'emoji') {
-    return (
-      <Text variant="title-2-regular" style={{ width: 28, textAlign: 'center' }}>
-        {suggestion.emoji ?? suggestion.label}
-      </Text>
-    );
-  }
-  if (kind === 'mention') {
-    const uri =
-      suggestion.avatar === undefined
-        ? undefined
-        : isUrl(suggestion.avatar)
-          ? suggestion.avatar
-          : resolveImage?.(suggestion.avatar, 'thumb');
-    return uri ? (
-      <Image
-        source={{ uri }}
-        accessibilityIgnoresInvertColors
-        style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: palette.inset }}
-      />
-    ) : (
-      <View
-        style={{
-          width: 28,
-          height: 28,
-          borderRadius: 14,
-          backgroundColor: palette.inset,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
-          {suggestion.label.slice(0, 1).toUpperCase()}
-        </Text>
-      </View>
-    );
-  }
-  return (
-    <View
-      style={{
-        width: 28,
-        height: 28,
-        borderRadius: 8,
-        backgroundColor: palette.inset,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <RiHashtag width={16} height={16} fill={palette.iconSecondary} />
-    </View>
-  );
-}
-
-export function SuggestionList({
-  kind,
-  suggestions,
-  activeIndex = -1,
-  onSelectSuggestion,
-  onActiveIndexChange,
-  header,
-  maxHeight = SUGGESTION_MAX_HEIGHT,
-  style,
-  testID,
-  accessibilityLabel,
-}: SuggestionListProps) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme, useCardFill(style));
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  if (suggestions.length === 0) 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.
-  const listRole: Record<string, unknown> = IS_WEB ? { role: 'listbox' } : { accessibilityRole: 'list' };
-
-  const panel: WebCssStyle = {
-    borderRadius: PANEL_RADIUS,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 6,
-    paddingRight: 6,
-  };
-
-  return (
-    <Surface style={[panel, style]} testID={testID}>
-      {header ? (
-        <Text
-          variant="caption-1-medium"
-          style={{
-            color: palette.textSecondary,
-            paddingLeft: 8,
-            paddingRight: 8,
-            paddingTop: 2,
-            paddingBottom: 6,
-          }}>
-          {header}
-        </Text>
-      ) : null}
-      <ScrollView
-        {...dataHook('bloomChatComposerScroll')}
-        {...listRole}
-        accessibilityLabel={accessibilityLabel ?? messages.suggestions[kind]}
-        style={{ maxHeight }}
-        showsVerticalScrollIndicator={false}>
-        {suggestions.map((suggestion, index) => {
-          const active = index === activeIndex;
-          const row: WebCssStyle = {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 10,
-            minHeight: SUGGESTION_ROW_HEIGHT,
-            borderRadius: 10,
-            paddingLeft: 8,
-            paddingRight: 8,
-            paddingTop: 6,
-            paddingBottom: 6,
-            opacity: suggestion.disabled ? 0.5 : 1,
-            backgroundColor: active ? palette.hover : 'transparent',
-            cursor: suggestion.disabled ? 'auto' : 'pointer',
-            '--bloom-chat-composer-ring': palette.focusRing,
-          };
-          const name = suggestion.handle
-            ? `${suggestion.label} ${suggestion.handle}`
-            : suggestion.label;
-          return (
-            <Pressable
-              key={suggestion.id}
-              {...dataHook('bloomChatComposerRow')}
-              role="option"
-              accessibilityLabel={name}
-              aria-selected={active}
-              accessibilityState={{ selected: active, disabled: suggestion.disabled }}
-              disabled={suggestion.disabled}
-              onPress={() => onSelectSuggestion?.(suggestion, index)}
-              onHoverIn={() => onActiveIndexChange?.(index)}
-              style={row}
-              testID={testID ? `${testID}-row-${suggestion.id}` : undefined}>
-              <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>
-                  {suggestion.handle ? (
-                    <Text
-                      variant="body-2-regular"
-                      numberOfLines={1}
-                      style={{ color: palette.textSecondary, flexShrink: 1 }}>
-                      {suggestion.handle}
-                    </Text>
-                  ) : null}
-                </View>
-                {suggestion.description ? (
-                  <Text
-                    variant="caption-1-regular"
-                    numberOfLines={1}
-                    style={{ color: palette.textPlaceholder }}>
-                    {suggestion.description}
-                  </Text>
-                ) : null}
-              </View>
-            </Pressable>
-          );
-        })}
-      </ScrollView>
-    </Surface>
-  );
-}
+export const SuggestionList = createSuggestionList({ Surface });

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

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

package/src/chat-composer/VoiceRecorder.tsx

@@ -1,291 +1,6 @@
-import { useCardFill } from '../card/use-card-fill';
 import { Surface } from '../surface';
-/**
- * The bar while a voice message is being recorded, and after: a live meter
- * (`recording`), a hands-free one with explicit buttons (`locked`), and the
- * playable result (`preview`).
- *
- * Purely presentational, and deliberately so — the elapsed time, the levels and
- * the playback position all arrive as props. A recorder that owned a timer
- * would be reading the clock inside a component, which is the one thing every
- * relative time in this fleet is forbidden to do; it also makes the three
- * states impossible to screenshot.
- */
-import React, { useEffect, useState } from 'react';
-import { View, type LayoutChangeEvent } from 'react-native';
-import Animated, {
-  Easing,
-  cancelAnimation,
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated';
-
 import { Button } from '../button';
-import { RiArrowLeftSLine } from '../icons/remix/RiArrowLeftSLine';
-import { RiCloseLine } from '../icons/remix/RiCloseLine';
-import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
-import { RiLockLine } from '../icons/remix/RiLockLine';
-import { RiPauseFill } from '../icons/remix/RiPauseFill';
-import { RiPlayFill } from '../icons/remix/RiPlayFill';
-import { RiSendPlaneLine } from '../icons/remix/RiSendPlaneLine';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
 import { ComposerIconButton } from './ComposerIconButton';
-import {
-  BAR_PADDING,
-  BAR_RADIUS,
-  CONTROL_SIZE,
-  voiceRecorderLabels,
-  WAVE_BAR_GAP,
-  WAVE_BAR_WIDTH,
-  WAVE_HEIGHT,
-  formatRecordingTime,
-  resolveChatComposerPalette,
-  waveformBars,
-} from './shared';
-import type { VoiceRecorderProps } from './types';
-import { IS_WEB, useChatComposerWebCss } from './web-hooks';
-import { useMessages } from '../locale/messages';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-
-const EASE_IN_OUT = Easing.bezier(0.42, 0, 0.58, 1);
-
-/** The live "we are recording" dot. CSS keyframes on web, a reanimated loop on native. */
-function RecordDot({ color, active }: { color: string; active: boolean }) {
-  const reducedMotion = useReducedMotion();
-  const opacity = useSharedValue(1);
-  useEffect(() => {
-    if (IS_WEB || !active || reducedMotion) return;
-    opacity.value = withRepeat(
-      withSequence(
-        withTiming(0.25, { duration: 500, easing: EASE_IN_OUT }),
-        withTiming(1, { duration: 500, easing: EASE_IN_OUT }),
-      ),
-      -1,
-    );
-    return () => cancelAnimation(opacity);
-  }, [active, reducedMotion, opacity]);
-  const animated = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity]);
-
-  const base = { width: 8, height: 8, borderRadius: 4, backgroundColor: color };
-  if (IS_WEB) {
-    const web: WebCssStyle =
-      active && !reducedMotion
-        ? { ...base, animation: 'bloom-chat-composer-pulse 1000ms ease-in-out infinite' }
-        : base;
-    return <View style={web} />;
-  }
-  return <Animated.View style={[base, animated]} />;
-}
-
-/**
- * The meter. Bars are laid out from a MEASURED width rather than a fixed count,
- * so the same recorder reads correctly in a 390px column and a 900px one; the
- * oldest samples fall off the left as the array grows.
- */
-function Waveform({
-  amplitudes,
-  color,
-  dimColor,
-  progress,
-  testID,
-}: {
-  amplitudes: ReadonlyArray<number>;
-  color: string;
-  dimColor: string;
-  /** 0–1 playhead, for `preview`. Bars past it paint in `dimColor`. */
-  progress?: number;
-  testID?: string;
-}) {
-  const [width, setWidth] = useState(0);
-  const onLayout = (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width);
-  const slot = WAVE_BAR_WIDTH + WAVE_BAR_GAP;
-  const count = width > 0 ? Math.max(1, Math.floor(width / slot)) : 0;
-  const bars = count > 0 ? waveformBars(amplitudes, count) : [];
-  const played = progress === undefined ? bars.length : Math.round(bars.length * progress);
-
-  return (
-    <View
-      onLayout={onLayout}
-      style={{
-        flexGrow: 1,
-        flexShrink: 1,
-        height: WAVE_HEIGHT,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: WAVE_BAR_GAP,
-          }}
-      testID={testID}>
-      {bars.map((level, index) => (
-        <View
-          key={index}
-          style={{
-            width: WAVE_BAR_WIDTH,
-            height: Math.max(2, Math.round(level * WAVE_HEIGHT)),
-            borderRadius: WAVE_BAR_WIDTH,
-            backgroundColor: index < played ? color : dimColor,
-          }}
-        />
-      ))}
-    </View>
-  );
-}
-
-export function VoiceRecorder({
-  state,
-  seconds,
-  duration,
-  amplitudes = [],
-  playing = false,
-  onPlayToggle,
-  onCancel,
-  onDelete,
-  onSend,
-  onLock,
-  slideToCancel = !IS_WEB,
-  labels: labelOverrides,
-  style,
-  testID,
-  accessibilityLabel,
-}: VoiceRecorderProps) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme, useCardFill(style));
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  useChatComposerWebCss();
-  const labels = { ...voiceRecorderLabels(messages), ...labelOverrides };
-  const preview = state === 'preview';
-  const total = duration ?? seconds;
-
-  const bar: WebCssStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-    minHeight: CONTROL_SIZE + BAR_PADDING * 2,
-    borderRadius: BAR_RADIUS,
-    paddingLeft: 12,
-    paddingRight: BAR_PADDING,
-    paddingTop: BAR_PADDING,
-    paddingBottom: BAR_PADDING,
-    '--bloom-chat-composer-ring': palette.focusRing,
-  };
-
-  return (
-    <Surface
-      accessibilityLabel={accessibilityLabel ?? labels.recording}
-      style={[bar, style]}
-      testID={testID}>
-      {preview ? (
-        <>
-          {onDelete ? (
-            <ComposerIconButton
-              icon={RiDeleteBinLine}
-              accessibilityLabel={labels.delete}
-              onPress={onDelete}
-              size={32}
-              iconSize={18}
-              style={{ marginLeft: -6 }}
-              testID={testID ? `${testID}-delete` : undefined}
-            />
-          ) : null}
-          <ComposerIconButton
-            icon={playing ? RiPauseFill : RiPlayFill}
-            accessibilityLabel={playing ? labels.pause : labels.play}
-            onPress={onPlayToggle}
-            size={32}
-            iconSize={18}
-            style={{ backgroundColor: palette.inset }}
-            testID={testID ? `${testID}-play` : undefined}
-          />
-        </>
-      ) : (
-        <RecordDot color={palette.destructive} active />
-      )}
-
-      <Text
-        variant="body-2-medium"
-        style={{ color: palette.text, minWidth: 40 }}
-        testID={testID ? `${testID}-time` : undefined}>
-        {formatRecordingTime(seconds)}
-      </Text>
-
-      <Waveform
-        amplitudes={amplitudes}
-        color={preview ? palette.accent : palette.destructive}
-        dimColor={palette.border}
-        progress={preview && total > 0 ? Math.min(1, seconds / total) : undefined}
-        testID={testID ? `${testID}-wave` : undefined}
-      />
-
-      {preview ? (
-        <Text variant="caption-1-regular" style={{ color: palette.textSecondary }}>
-          {formatRecordingTime(total)}
-        </Text>
-      ) : null}
-
-      {state === 'recording' && slideToCancel ? (
-        <Button
-          appearance="plain"
-          tone="neutral"
-          accessibilityLabel={labels.cancel}
-          onPress={onCancel}
-          style={{ flexDirection: 'row', alignItems: 'center', gap: 2, height: 'auto', minHeight: 0, padding: 0 }}
-          testID={testID ? `${testID}-slide` : undefined}>
-          <RiArrowLeftSLine width={16} height={16} fill={palette.textSecondary} />
-          <Text variant="caption-1-regular" style={{ color: palette.textSecondary }}>
-            {labels.slideToCancel}
-          </Text>
-        </Button>
-      ) : null}
-
-      {state === 'recording' && !slideToCancel && onCancel ? (
-        <ComposerIconButton
-          icon={RiCloseLine}
-          accessibilityLabel={labels.cancel}
-          onPress={onCancel}
-          size={32}
-          iconSize={18}
-          testID={testID ? `${testID}-cancel` : undefined}
-        />
-      ) : null}
-
-      {state === 'recording' && onLock ? (
-        <ComposerIconButton
-          icon={RiLockLine}
-          accessibilityLabel={labels.lock}
-          onPress={onLock}
-          size={32}
-          iconSize={16}
-          style={{ backgroundColor: palette.inset }}
-          testID={testID ? `${testID}-lock` : undefined}
-        />
-      ) : null}
-
-      {state !== 'recording' && onCancel ? (
-        <ComposerIconButton
-          icon={RiCloseLine}
-          accessibilityLabel={labels.cancel}
-          onPress={onCancel}
-          size={32}
-          iconSize={18}
-          testID={testID ? `${testID}-cancel` : undefined}
-        />
-      ) : null}
+import { createVoiceRecorder } from './create-voice-recorder';
 
-      {onSend && state !== 'recording' ? (
-        <ComposerIconButton
-          icon={RiSendPlaneLine}
-          tone="accent"
-          accessibilityLabel={labels.send}
-          onPress={onSend}
-          iconSize={18}
-          testID={testID ? `${testID}-send` : undefined}
-        />
-      ) : null}
-    </Surface>
-  );
-}
+export const VoiceRecorder = createVoiceRecorder({ Surface, Button, ComposerIconButton });

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

@@ -0,0 +1,6 @@
+import { Surface } from '../surface/index.web';
+import { Button } from '../button/index.web';
+import { ComposerIconButton } from './ComposerIconButton.web';
+import { createVoiceRecorder } from './create-voice-recorder';
+
+export const VoiceRecorder = createVoiceRecorder({ Surface, Button, ComposerIconButton });