@oxy.so/bloom 5.1.0 → 5.1.1

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

@@ -0,0 +1,219 @@
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useCardFill } from '../card/use-card-fill';
+import type { Surface as SurfaceComponent } 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 { 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';
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+export function createSuggestionList({ Surface }: {
+  Surface: typeof SurfaceComponent;
+}) {
+
+  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>
+    );
+  }
+
+  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>
+    );
+  }
+
+  return SuggestionList;
+}

package/src/chat-composer/create-voice-recorder.tsx

@@ -0,0 +1,301 @@
+import { useCardFill } from '../card/use-card-fill';
+import type { Surface as SurfaceComponent } 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 type { Button as ButtonComponent } 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 type { ComposerIconButton as ComposerIconButtonComponent } 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';
+
+/** Platform dependencies are bound once; shared rendering adds no wrapper. */
+export function createVoiceRecorder({ Surface, Button, ComposerIconButton }: {
+  Surface: typeof SurfaceComponent;
+  Button: typeof ButtonComponent;
+  ComposerIconButton: typeof ComposerIconButtonComponent;
+}) {
+
+  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>
+    );
+  }
+
+  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}
+
+        {onSend && state !== 'recording' ? (
+          <ComposerIconButton
+            icon={RiSendPlaneLine}
+            tone="accent"
+            accessibilityLabel={labels.send}
+            onPress={onSend}
+            iconSize={18}
+            testID={testID ? `${testID}-send` : undefined}
+          />
+        ) : null}
+      </Surface>
+    );
+  }
+
+  return VoiceRecorder;
+}

package/src/chat-composer/index.web.ts

@@ -3,16 +3,16 @@
 // Re-run `bun run generate:exports` (or any `bun run build`) after
 // changing that barrel or the set of web-forked subpaths.
 
-export { ChatComposer } from './ChatComposer';
-export { ComposerBanner } from './ComposerBanner';
-export { ComposerAttachmentStrip } from './ComposerAttachmentStrip';
+export { ChatComposer } from './ChatComposer.web';
+export { ComposerBanner } from './ComposerBanner.web';
+export { ComposerAttachmentStrip } from './ComposerAttachmentStrip.web';
 export { ComposerIconButton } from './ComposerIconButton.web';
-export { SuggestionList } from './SuggestionList';
-export { VoiceRecorder } from './VoiceRecorder';
-export { AttachmentMenu } from './AttachmentMenu';
-export { EmojiPicker } from './EmojiPicker';
-export { ReactionPicker } from './ReactionPicker';
-export { MessageContextMenu } from './MessageContextMenu';
+export { SuggestionList } from './SuggestionList.web';
+export { VoiceRecorder } from './VoiceRecorder.web';
+export { AttachmentMenu } from './AttachmentMenu.web';
+export { EmojiPicker } from './EmojiPicker.web';
+export { ReactionPicker } from './ReactionPicker.web';
+export { MessageContextMenu } from './MessageContextMenu.web';
 export {
   ATTACHMENT_MENU_ITEMS,
   EMOJI_CATEGORY_ICONS,

package/src/earnings/EarningsSummary.tsx

@@ -118,13 +118,20 @@ function EarningsSummaryComponent({
 
   // The chart's active bar is OWNED here: the headline has to be able to say
   // which amount it is showing, and only this component knows the strings.
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selection, setSelection] = useState<{ period: string | undefined; index: number | null } | null>(null);
+  const currentPeriod = current?.id;
+  // A controlled prop change must clear selection before the new headline paints.
+  if (selection && selection.period !== currentPeriod) setSelection(null);
+  const activeIndex = selection?.period === currentPeriod ? selection?.index ?? null : null;
+  const setActiveIndex = useCallback((index: number | null) => {
+    setSelection({ period: currentPeriod, index });
+  }, [currentPeriod]);
   const changePeriod = useCallback(
     (id: string) => {
       setActiveIndex(null);
       setPeriodId(id);
     },
-    [setPeriodId],
+    [setPeriodId, setActiveIndex],
   );
 
   const { width, onLayout } = useContainerWidth();

package/src/field/Field.tsx

@@ -40,6 +40,7 @@ const FieldComponent = function Field({
   description,
   error,
   required = false,
+  requiredLabel,
   disabled = false,
   multiple = false,
   nativeID,
@@ -94,7 +95,7 @@ const FieldComponent = function Field({
         }
       >
         {label != null ? (
-          <Label nativeID={labelID} htmlFor={multiple ? null : base} required={required} disabled={disabled}>
+          <Label nativeID={labelID} htmlFor={multiple ? null : base} required={required} requiredLabel={requiredLabel} disabled={disabled}>
             {label}
           </Label>
         ) : null}

package/src/field/types.ts

@@ -14,6 +14,8 @@ export interface FieldProps {
   error?: string | null;
   /** Mark the field's label with a required asterisk. */
   required?: boolean;
+  /** Accessible name of the required marker; defaults to the current locale. */
+  requiredLabel?: string;
   /**
    * Disables the label/description styling AND, for a control that reads the
    * field context, the control itself.

package/src/floating/types.ts

@@ -167,6 +167,7 @@ export interface FloatingPanelProps extends FloatingPositionProps {
  * is inherent to `asChild` rather than something this type can fix.
  */
 export interface TriggerHandleProps {
+  accessibilityHint?: string;
   onPress: (event: GestureResponderEvent) => void;
   onLongPress?: (event: GestureResponderEvent) => void;
   disabled?: boolean;

package/src/item/Item.tsx

@@ -132,6 +132,18 @@ const ItemComponent = function Item({
     </View>
   );
 
+  const stateRole = role ?? accessibilityRole;
+  const selectedAria =
+    selected == null
+      ? null
+      : stateRole === 'option'
+        ? { 'aria-selected': selected }
+        : stateRole === 'radio' || stateRole === 'checkbox'
+          ? { 'aria-checked': selected }
+          : (stateRole == null || stateRole === 'button') && (onPress || onLongPress)
+            ? { 'aria-pressed': selected }
+            : null;
+
   if (onPress || onLongPress) {
     // `radio` and `checkbox` are roles BOTH platforms have, so they travel on
     // `accessibilityRole` as well rather than being web-only like `option`.
@@ -143,16 +155,6 @@ const ItemComponent = function Item({
     // toggle a PRESSED one, and `menuitem`/`listitem` carry neither, so those
     // emit nothing. React Native keeps reading `accessibilityState` below,
     // which is why both are set.
-    const selectedAria =
-      selected == null
-        ? null
-        : role === 'option'
-          ? { 'aria-selected': selected }
-          : role === 'radio' || role === 'checkbox'
-            ? { 'aria-checked': selected }
-            : role == null
-              ? { 'aria-pressed': selected }
-              : null;
     const handlePress = disabled || !onPress ? undefined : onPress;
     const handleLongPress = disabled || !onLongPress ? undefined : onLongPress;
     return (
@@ -192,7 +194,7 @@ const ItemComponent = function Item({
 
   return (
     <View
-      accessibilityRole={accessibilityRole ?? 'none'}
+      accessibilityRole={accessibilityRole ?? (role === 'radio' || role === 'checkbox' ? role : 'none')}
       {...(role ? { role } : {})}
       accessibilityLabel={
         accessibilityLabel ?? (typeof title === 'string' ? title : undefined)
@@ -203,6 +205,9 @@ const ItemComponent = function Item({
       // this the non-pressable row announced nothing. React Native folds
       // `aria-disabled` back into `accessibilityState`.
       aria-disabled={disabled || undefined}
+      accessibilityState={{ disabled, selected, expanded }}
+      aria-expanded={expanded}
+      {...selectedAria}
       style={disabled ? styles.disabled : undefined}>
       {content}
     </View>

package/src/job-board/JobCard.tsx

@@ -1,3 +1,4 @@
+import { InteractionBoundary } from '../overlay/InteractionBoundary';
 import React, { memo, useEffect, useMemo } from 'react';
 import { Pressable, StyleSheet, View, type TextStyle } from 'react-native';
 
@@ -365,7 +366,9 @@ function JobCardComponent({
 
   const hasOwnActions = onTake !== undefined || onPass !== undefined;
   const actionRow =
-    actions ??
+    actions != null ? (
+      <InteractionBoundary disabled={inert}>{actions}</InteractionBoundary>
+    ) :
     (!hasOwnActions ? null : (
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }} testID={id('actions')}>
         {onPass && !closed ? (