@oxy.so/bloom 4.19.1 → 4.21.0

package/src/ai-chat/AiChatControls.tsx

@@ -9,9 +9,11 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import type { Props as IconProps } from '../icons/shared';
+import { DISABLED_OPACITY } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useAiChatPlatform } from './context';
 import { dataHook, IS_WEB, type AiChatPalette } from './shared';
+import type { AiChatTurnAction } from './types';
 
 /**
  * The family's small interactive pieces, shared by the message, image, code
@@ -178,6 +180,8 @@ export function SurfaceAction({
   hoverBackground,
   palette,
   glyph,
+  active,
+  disabled = false,
   style,
   testID,
 }: {
@@ -194,11 +198,20 @@ export function SurfaceAction({
   hoverBackground: string;
   palette: AiChatPalette;
   glyph: (color: string) => React.ReactNode;
+  /**
+   * A toggle's state: `true` holds the hover surface and the primary glyph.
+   * Undefined for a plain button, which then carries no pressed state at all.
+   */
+  active?: boolean;
+  disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
+  const isToggle = active !== undefined;
   const tip = useHoverTooltip({ open: tooltipOpen, onOpenChange: onTooltipOpenChange });
-  const [hovered, setHovered] = useState(false);
+  const [hoveredRaw, setHovered] = useState(false);
+  const hovered = hoveredRaw && !disabled;
+  const lit = hovered || active === true;
   // A press focuses the control too; only keyboard focus should raise the tooltip.
   const pointerDown = useRef(false);
   const surface: WebCssStyle = {
@@ -207,7 +220,8 @@ export function SurfaceAction({
     alignItems: 'center',
     padding,
     borderRadius: radius,
-    backgroundColor: hovered ? hoverBackground : background,
+    backgroundColor: lit ? hoverBackground : background,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-ai-chat-ring': palette.ring,
   };
   return (
@@ -217,6 +231,12 @@ export function SurfaceAction({
         testID={testID}
         accessibilityRole="button"
         accessibilityLabel={label}
+        // BOTH spellings of the toggle state: react-native-web drops
+        // `accessibilityState` and React Native has no `aria-pressed`.
+        {...(isToggle ? { 'aria-pressed': active } : null)}
+        accessibilityState={{ disabled, ...(isToggle ? { selected: active } : null) }}
+        aria-disabled={disabled || undefined}
+        disabled={disabled}
         onPressIn={() => {
           pointerDown.current = true;
           tip.onHoverOut();
@@ -238,8 +258,43 @@ export function SurfaceAction({
         }}
         onBlur={() => tip.setOpen(false)}
         style={[surface, style]}>
-        {glyph(hovered ? palette.iconPrimary : palette.iconSecondary)}
+        {glyph(lit ? palette.iconPrimary : palette.iconSecondary)}
       </Pressable>
     </WithTooltip>
   );
 }
+
+/** The feedback row's button surface: 28 square, radius 8, p 6, tertiary → secondary-hover. */
+export function turnActionSurface(palette: AiChatPalette) {
+  return {
+    padding: 6,
+    radius: 8,
+    background: palette.tertiary,
+    hoverBackground: palette.secondaryHover,
+    palette,
+  };
+}
+
+/** One caller-supplied turn action, drawn as a feedback-row button. */
+export function TurnActionButton({
+  action,
+  palette,
+  testID,
+}: {
+  action: AiChatTurnAction;
+  palette: AiChatPalette;
+  testID?: string;
+}) {
+  const Icon = action.icon;
+  return (
+    <SurfaceAction
+      {...turnActionSurface(palette)}
+      testID={testID ? `${testID}-${action.key}` : undefined}
+      label={action.label}
+      onPress={action.onPress}
+      active={action.active}
+      disabled={action.disabled}
+      glyph={(color) => <Icon width={16} height={16} fill={color} />}
+    />
+  );
+}

package/src/ai-chat/AiChatFeedbackRowBase.tsx

@@ -5,9 +5,9 @@ import { RiCheckLine } from '../icons/remix/RiCheckLine';
 import { RiFileCopyLine } from '../icons/remix/RiFileCopyLine';
 import { RiThumbDownLine } from '../icons/remix/RiThumbDownLine';
 import { RiThumbUpLine } from '../icons/remix/RiThumbUpLine';
-import { SurfaceAction, SwapGlyph } from './AiChatControls';
+import { SurfaceAction, SwapGlyph, TurnActionButton, turnActionSurface } from './AiChatControls';
 import { CONFIRM_MS, useAiChatPalette, useAiChatWebCss } from './shared';
-import type { AiChatFeedbackRowProps } from './types';
+import type { AiChatCopyResult, AiChatFeedbackRowProps } from './types';
 
 const DEFAULT_LABELS = {
   like: 'Good response',
@@ -26,9 +26,12 @@ const DEFAULT_LABELS = {
  *   tooltip  a `sm` tooltip above, after a 200ms hover
  *   copy     the copy glyph blurs, scales to 75% and fades out as a check comes
  *            in (200ms ease-out); the tooltip is held open reading "Copied!"
- *            for 1.6s, then dismissed even if the pointer is still over it
+ *            for 1.6s, then dismissed even if the pointer is still over it — once
+ *            the copy HAPPENED: an async handler is waited for, and a `false`,
+ *            a throw or a rejection shows nothing
+ *   actions  the caller's extra buttons after copy, on the same surface
  */
-export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style, testID }: AiChatFeedbackRowProps) {
+export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, actions, labels, style, testID }: AiChatFeedbackRowProps) {
   useAiChatWebCss();
   const palette = useAiChatPalette();
   const l = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
@@ -36,16 +39,20 @@ export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style
   const [copyTooltipOpen, setCopyTooltipOpen] = useState(false);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(
-    () => () => {
+  // The latest press: a slower, earlier copy settling late must not confirm.
+  const attempt = useRef(0);
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
       if (timer.current) clearTimeout(timer.current);
-    },
-    [],
-  );
+    };
+  }, []);
 
-  const copy = () => {
+  const confirm = () => {
     if (timer.current) clearTimeout(timer.current);
-    onCopy?.();
     setCopied(true);
     setCopyTooltipOpen(true);
     timer.current = setTimeout(() => {
@@ -54,14 +61,28 @@ export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style
     }, CONFIRM_MS);
   };
 
-  const surface = {
-    padding: 6,
-    radius: 8,
-    background: palette.tertiary,
-    hoverBackground: palette.secondaryHover,
-    palette,
+  const copy = () => {
+    const id = ++attempt.current;
+    let result: AiChatCopyResult;
+    try {
+      result = onCopy?.();
+    } catch {
+      return;
+    }
+    if (isPromiseLike(result)) {
+      result.then(
+        (ok) => {
+          if (ok !== false && mounted.current && id === attempt.current) confirm();
+        },
+        () => undefined,
+      );
+      return;
+    }
+    if (result !== false) confirm();
   };
 
+  const surface = turnActionSurface(palette);
+
   return (
     <View testID={testID} style={[{ flexDirection: 'row', alignItems: 'center', gap: 6 }, style]}>
       <SurfaceAction
@@ -97,6 +118,13 @@ export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style
           </View>
         )}
       />
+      {actions?.map((action) => (
+        <TurnActionButton key={action.key} action={action} palette={palette} testID={testID} />
+      ))}
     </View>
   );
 }
+
+function isPromiseLike(value: unknown): value is PromiseLike<void | boolean> {
+  return typeof (value as PromiseLike<unknown> | null | undefined)?.then === 'function';
+}

package/src/ai-chat/AiChatMessages.tsx

@@ -3,6 +3,7 @@ import { View, type LayoutChangeEvent } from 'react-native';
 
 import { RiLinkM } from '../icons/remix/RiLinkM';
 import { Text } from '../typography';
+import { TurnActionButton } from './AiChatControls';
 import { AiChatFeedbackRowBase } from './AiChatFeedbackRowBase';
 import { RevealFade, RevealLine, RevealSequence, useRevealSlot } from './AiChatReveal';
 import { CARD_RADIUS, dataHook, IS_WEB, useAiChatPalette, useAiChatWebCss } from './shared';
@@ -23,6 +24,10 @@ import type {
  *   user       pushed right with a 6px bleed past the column (`-mr-1.5`), hugging
  *              its text up to half the column + 6; radius 16, background-primary,
  *              px 12 / py 11, shadow-card; body-regular text-primary, left-aligned
+ *   actions    under the user card, 8 below it and right-aligned: the feedback
+ *              row's buttons, 6 apart. On a web pointer they fade in (150ms)
+ *              while the turn is hovered or holds focus — opacity only, so they
+ *              stay tabbable and announced; always shown on native and touch
  *   assistant  full width, gap 8, body-regular text-primary; the feedback row last
  *   line       a paragraph; `secondary` tone for status lines
  *   bullets    disc markers outside a 21px indent, items 8 apart
@@ -55,12 +60,13 @@ function asBlocks(children: React.ReactNode): React.ReactNode {
   });
 }
 
-export function AiChatUserMessage({ children, animate = true, style, testID }: AiChatUserMessageProps) {
+export function AiChatUserMessageBase({ children, actions, animate = true, style, testID }: AiChatUserMessageProps) {
   useAiChatWebCss();
   const palette = useAiChatPalette();
   const [column, setColumn] = useState(0);
   return (
     <View
+      {...dataHook('bloomAiChatTurn')}
       testID={testID}
       onLayout={(event: LayoutChangeEvent) => setColumn(event.nativeEvent.layout.width)}
       style={[{ width: '100%', alignItems: 'flex-end' }, style]}>
@@ -80,6 +86,23 @@ export function AiChatUserMessage({ children, animate = true, style, testID }: A
         }}>
         <RevealSequence animate={animate}>{asBlocks(children)}</RevealSequence>
       </RevealFade>
+      {actions && actions.length > 0 ? (
+        <RevealFade animate={animate} style={{ marginTop: 8 }}>
+          <View
+            {...dataHook('bloomAiChatTurnActions')}
+            testID={testID ? `${testID}-actions` : undefined}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            {actions.map((action) => (
+              <TurnActionButton
+                key={action.key}
+                action={action}
+                palette={palette}
+                testID={testID ? `${testID}-actions` : undefined}
+              />
+            ))}
+          </View>
+        </RevealFade>
+      ) : null}
     </View>
   );
 }

package/src/ai-chat/bindAiChat.tsx

@@ -4,7 +4,7 @@ import { AiChatContainerBase } from './AiChatContainer';
 import { AiChatFeedbackRowBase } from './AiChatFeedbackRowBase';
 import { AiChatGalleryPanelBase } from './AiChatGalleryPanelBase';
 import { AiChatImageGenerationBase } from './AiChatImageGenerationBase';
-import { AiChatAssistantMessageBase } from './AiChatMessages';
+import { AiChatAssistantMessageBase, AiChatUserMessageBase } from './AiChatMessages';
 import { AiChatPlatformContext, type AiChatPlatform } from './context';
 import type {
   AiChatAssistantMessageProps,
@@ -12,6 +12,7 @@ import type {
   AiChatFeedbackRowProps,
   AiChatGalleryPanelProps,
   AiChatImageGenerationProps,
+  AiChatUserMessageProps,
 } from './types';
 
 /**
@@ -29,6 +30,15 @@ export function bindAiChat(platform: AiChatPlatform) {
   }
   AiChatFeedbackRow.displayName = 'AiChatFeedbackRow';
 
+  function AiChatUserMessage(props: AiChatUserMessageProps) {
+    return (
+      <AiChatPlatformContext.Provider value={platform}>
+        <AiChatUserMessageBase {...props} />
+      </AiChatPlatformContext.Provider>
+    );
+  }
+  AiChatUserMessage.displayName = 'AiChatUserMessage';
+
   function AiChatAssistantMessage(props: AiChatAssistantMessageProps) {
     return (
       <AiChatPlatformContext.Provider value={platform}>
@@ -65,5 +75,12 @@ export function bindAiChat(platform: AiChatPlatform) {
   }
   AiChatContainer.displayName = 'AiChatContainer';
 
-  return { AiChatFeedbackRow, AiChatAssistantMessage, AiChatImageGeneration, AiChatGalleryPanel, AiChatContainer };
+  return {
+    AiChatFeedbackRow,
+    AiChatUserMessage,
+    AiChatAssistantMessage,
+    AiChatImageGeneration,
+    AiChatGalleryPanel,
+    AiChatContainer,
+  };
 }

package/src/ai-chat/index.ts

@@ -4,6 +4,7 @@ export {
   AiChatFeedbackRow,
   AiChatGalleryPanel,
   AiChatImageGeneration,
+  AiChatUserMessage,
 } from './AiChat';
 export { AiChatCodePanel } from './AiChatCodePanel';
 export { AiChatThread } from './AiChatContainer';
@@ -13,7 +14,6 @@ export {
   AiChatLinkChip,
   AiChatMessageLine,
   AiChatStrong,
-  AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
@@ -27,6 +27,7 @@ export type {
   AiChatCodePanelProps,
   AiChatContainerLabels,
   AiChatContainerProps,
+  AiChatCopyResult,
   AiChatFeedbackLabels,
   AiChatFeedbackRowProps,
   AiChatGalleryPanelLabels,
@@ -46,5 +47,6 @@ export type {
   AiChatStrongProps,
   AiChatThreadHandle,
   AiChatThreadProps,
+  AiChatTurnAction,
   AiChatUserMessageProps,
 } from './types';

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

@@ -9,6 +9,7 @@ export {
   AiChatFeedbackRow,
   AiChatGalleryPanel,
   AiChatImageGeneration,
+  AiChatUserMessage,
 } from './AiChat.web';
 export { AiChatCodePanel } from './AiChatCodePanel';
 export { AiChatThread } from './AiChatContainer';
@@ -18,7 +19,6 @@ export {
   AiChatLinkChip,
   AiChatMessageLine,
   AiChatStrong,
-  AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
@@ -32,6 +32,7 @@ export type {
   AiChatCodePanelProps,
   AiChatContainerLabels,
   AiChatContainerProps,
+  AiChatCopyResult,
   AiChatFeedbackLabels,
   AiChatFeedbackRowProps,
   AiChatGalleryPanelLabels,
@@ -51,5 +52,6 @@ export type {
   AiChatStrongProps,
   AiChatThreadHandle,
   AiChatThreadProps,
+  AiChatTurnAction,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/shared.ts

@@ -176,7 +176,7 @@ const STYLE_ID = 'bloom-ai-chat-web-css';
  * - the split-flap countdown's two leaves (`flap-fall` / `flap-rise`);
  * - the generated image's feathered radial reveal, a registered `--bloom-ai-reveal`
  *   percentage transitioning 0% → 132% over 1550ms;
- * - the resize grip's hover reveal;
+ * - the resize grip's hover reveal, and a user turn's actions (pointer only);
  * - the composer field's placeholder colour;
  * - a document-scrolled thread out of the browser's scroll anchoring.
  */
@@ -260,6 +260,14 @@ export const AI_CHAT_WEB_CSS = `
 [data-bloom-ai-chat-grip-pill="dragging"] { opacity: 1; }
 [data-bloom-ai-chat-grip] { cursor: col-resize; touch-action: none; outline: none; }
 [data-bloom-ai-chat-dragging="on"] { cursor: col-resize; user-select: none; }
+@media (hover: hover) {
+  [data-bloom-ai-chat-turn] [data-bloom-ai-chat-turn-actions] {
+    opacity: 0;
+    transition: opacity ${TRANSITION_MS}ms ease;
+  }
+  [data-bloom-ai-chat-turn]:hover [data-bloom-ai-chat-turn-actions],
+  [data-bloom-ai-chat-turn]:focus-within [data-bloom-ai-chat-turn-actions] { opacity: 1; }
+}
 [data-bloom-ai-chat-chip] {
   display: inline-flex;
   max-width: calc(100% - 4px);
@@ -275,7 +283,8 @@ export const AI_CHAT_WEB_CSS = `
   [data-bloom-ai-chat-control],
   [data-bloom-ai-chat-tile] [data-bloom-ai-chat-scrim],
   [data-bloom-ai-chat-tile-image],
-  [data-bloom-ai-chat-grip] [data-bloom-ai-chat-grip-pill] { transition: none; }
+  [data-bloom-ai-chat-grip] [data-bloom-ai-chat-grip-pill],
+  [data-bloom-ai-chat-turn] [data-bloom-ai-chat-turn-actions] { transition: none; }
   [data-bloom-ai-chat-flap] { animation-duration: 1ms; animation-delay: 0ms; }
 }
 `;

package/src/ai-chat/types.ts

@@ -30,14 +30,47 @@ export interface AiChatFeedbackLabels {
   copied?: string;
 }
 
+/**
+ * What a copy handler reports. `void` (or `true`) is a copy that happened;
+ * `false` is one that did not. A promise is waited for: the confirmation shows
+ * once it resolves, and never if it resolves `false` or rejects.
+ */
+export type AiChatCopyResult = void | boolean | Promise<void | boolean>;
+
+/**
+ * One extra action on a turn — read aloud, regenerate, edit. Drawn with the
+ * feedback row's own button: a 16px glyph on a 28px square, a tooltip naming it.
+ */
+export interface AiChatTurnAction {
+  /** Stable React key, and the suffix of the button's `testID`. */
+  key: string;
+  /** The accessible name, and the tooltip's copy. */
+  label: string;
+  /** A Bloom icon component (`RiVolumeUpLine`, not `<RiVolumeUpLine />`). */
+  icon: AiChatIconComponent;
+  onPress: () => void;
+  /**
+   * Makes the action a TOGGLE (read aloud while it is speaking): `true` paints
+   * the hover surface and the primary glyph, and announces it pressed. Leave it
+   * undefined for a plain button — `false` announces "not pressed".
+   */
+  active?: boolean;
+  /** Dimmed to the shared disabled opacity, unfocusable, announced disabled. */
+  disabled?: boolean;
+}
+
 export interface AiChatFeedbackRowProps {
   onLike?: () => void;
   onDislike?: () => void;
   /**
-   * Copy handler. The glyph swaps to a check and the tooltip reads "Copied!" for
-   * 1.6s either way.
+   * Copy handler. The glyph swaps to a check and the tooltip reads "Copied!"
+   * for 1.6s once the copy has happened: at once for a handler that returns
+   * nothing (or `true`), after the promise resolves for an async one, and not
+   * at all when it returns or resolves `false`, throws or rejects.
    */
-  onCopy?: () => void;
+  onCopy?: () => AiChatCopyResult;
+  /** More buttons after copy, in order — read aloud, regenerate… */
+  actions?: ReadonlyArray<AiChatTurnAction>;
   labels?: AiChatFeedbackLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -50,6 +83,13 @@ export interface AiChatFeedbackRowProps {
 export interface AiChatUserMessageProps {
   /** `AiChatMessageLine`s — or a string, wrapped in one. */
   children: ReactNode;
+  /**
+   * Buttons under the card, right-aligned — copy, edit. On a web pointer they
+   * fade in while the turn is hovered or holds focus; they stay in the tab order
+   * and the accessibility tree throughout, and on native (and touch web) they
+   * are always shown.
+   */
+  actions?: ReadonlyArray<AiChatTurnAction>;
   /** Skip the blur-in (a turn restored from history). Default `true`. */
   animate?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -64,7 +104,7 @@ export interface AiChatAssistantMessageProps {
   children: ReactNode;
   /** The like / dislike / copy row under the reply. Default `true`. */
   feedback?: boolean;
-  /** Feedback handlers and labels. */
+  /** Feedback handlers, extra `actions` and labels. */
   feedbackProps?: Omit<AiChatFeedbackRowProps, 'style' | 'testID'>;
   /** Skip the staggered blur-in. Default `true`. */
   animate?: boolean;
@@ -141,7 +181,7 @@ export interface AiChatImageGenerationProps {
   /** Feedback handlers under the landed image. */
   onLike?: () => void;
   onDislike?: () => void;
-  onCopy?: () => void;
+  onCopy?: () => AiChatCopyResult;
   labels?: AiChatImageGenerationLabels;
   feedbackLabels?: AiChatFeedbackLabels;
   style?: StyleProp<ViewStyle>;

package/src/button/Button.tsx

@@ -4,6 +4,7 @@ import { resolveIconSlot } from '../icons/render-icon';
 import {
   ActivityIndicator,
   Linking,
+  Platform,
   Pressable,
   StyleSheet,
   View,
@@ -80,6 +81,42 @@ const SQUARE_HIT_SLOP = {
   lg: { top: 0, bottom: 0, left: 0, right: 0 },
 } as const satisfies Record<ButtonResolvedSize, NonNullable<ButtonProps['hitSlop']>>;
 
+type HitSlop = { top: number; bottom: number; left: number; right: number };
+
+/**
+ * Android's floor is 48dp (Material), 4dp above the 44 the tables above reach —
+ * so on Android every target grows 2dp at its top and bottom: `lg` (44dp tall,
+ * no slack) reaches 48, and every smaller size clears 48 the same way. Squares
+ * also grow 2dp at the sides, since they already take all-round slack; row
+ * buttons and links do not, because side slack steals presses from a
+ * neighbour. Two stacked buttons keep 4dp of every 8dp gap between them.
+ */
+const ANDROID_TARGET_EXTRA = 2;
+
+function growVertical(slop: HitSlop): HitSlop {
+  return { ...slop, top: slop.top + ANDROID_TARGET_EXTRA, bottom: slop.bottom + ANDROID_TARGET_EXTRA };
+}
+
+function growAllRound(slop: HitSlop): HitSlop {
+  return {
+    top: slop.top + ANDROID_TARGET_EXTRA,
+    bottom: slop.bottom + ANDROID_TARGET_EXTRA,
+    left: slop.left + ANDROID_TARGET_EXTRA,
+    right: slop.right + ANDROID_TARGET_EXTRA,
+  };
+}
+
+function mapSizes(
+  table: Record<ButtonResolvedSize, HitSlop>,
+  grow: (slop: HitSlop) => HitSlop,
+): Record<ButtonResolvedSize, HitSlop> {
+  return { xs: grow(table.xs), sm: grow(table.sm), md: grow(table.md), lg: grow(table.lg) };
+}
+
+const ANDROID_SIZE_HIT_SLOP = mapSizes(SIZE_HIT_SLOP, growVertical);
+const ANDROID_SQUARE_HIT_SLOP = mapSizes(SQUARE_HIT_SLOP, growAllRound);
+const ANDROID_LINK_HIT_SLOP = growVertical(LINK_HIT_SLOP);
+
 // ---------------------------------------------------------------------------
 //  The button renders ONE node — the same shape the web fork renders (one
 //  `<button>`), so a caller's layout `className` lands on the box its parent
@@ -286,11 +323,12 @@ const ButtonComponent: React.FC<ButtonProps> = ({
     [geometry, paint.foreground, isLink, underlineMode, hovered, disabled],
   );
 
+  const android = Platform.OS === 'android';
   const defaultHitSlop = isSquare
-    ? SQUARE_HIT_SLOP[size]
+    ? (android ? ANDROID_SQUARE_HIT_SLOP : SQUARE_HIT_SLOP)[size]
     : isLink
-      ? LINK_HIT_SLOP
-      : SIZE_HIT_SLOP[size];
+      ? (android ? ANDROID_LINK_HIT_SLOP : LINK_HIT_SLOP)
+      : (android ? ANDROID_SIZE_HIT_SLOP : SIZE_HIT_SLOP)[size];
 
   const IconFromProp = icon != null && isIconComponent(icon) ? icon : null;
   const iconNode = IconFromProp ? (