jfs-components 0.0.78 → 0.0.84

package/src/components/AppBar/AppBar.tsx

@@ -8,6 +8,14 @@ import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 type AppBarType = 'MainPage' | 'SubPage'
 
+// SubPage "slot wrap" geometry, taken directly from the Figma design
+// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
+// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
+// item so it fills / shrinks responsively within that box.
+const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192
+const SUBPAGE_MIDDLE_HEIGHT = 32
+const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21
+
 export type AppBarProps = {
   /**
    * Type of the App Bar.
@@ -26,8 +34,19 @@ export type AppBarProps = {
   /**
    * Slot for the middle content.
    * Often used for "Page Title" in SubPage.
+   *
+   * On `SubPage` this is rendered as an absolutely-centered box (matching the
+   * Figma "slot wrap"): it stays centered in the bar regardless of how wide
+   * the leading/actions slots are, and its content fills/shrinks responsively
+   * within {@link middleSlotWidth}.
    */
   middleSlot?: React.ReactNode;
+  /**
+   * Width of the centered `SubPage` middle slot, in px.
+   * Defaults to the Figma value (192). Has no effect on `MainPage`.
+   * @default 192
+   */
+  middleSlotWidth?: number;
   /**
    * Slot for the actions on the right.
    */
@@ -52,6 +71,7 @@ export default function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
+  middleSlotWidth = SUBPAGE_MIDDLE_DEFAULT_WIDTH,
   actionsSlot,
   modes: propModes = EMPTY_MODES,
   onLeadingPress,
@@ -160,13 +180,39 @@ export default function AppBar({
     ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
     : null
 
-  // When there is no middleSlot we want leading & actions pinned to the
-  // outer edges, so we apply `space-between` at the wrapper. With a middle
-  // slot present, the middle (flex: 1) absorbs the remaining space, so
-  // `space-between` is a no-op.
+  // SubPage centers its middle slot via absolute positioning (see Figma
+  // "slot wrap"), so it never participates in the row flow. Only MainPage
+  // keeps the legacy in-flow middle slot.
+  const hasInFlowMiddle = isMain && !!processedMiddle
+
+  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
+  // remaining space, so leading & actions sit at the edges naturally. In all
+  // other cases we pin leading & actions to the outer edges with
+  // `space-between`; the SubPage middle floats above, centered.
   const wrapperStyle: ViewStyle = {
     ...containerStyle,
-    justifyContent: processedMiddle ? 'flex-start' : 'space-between',
+    justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between',
+  }
+
+  // Absolutely-centered middle box for SubPage, mirroring the Figma geometry.
+  // `left/top: 50%` + a negative translate keeps it centered regardless of the
+  // bar width, while the fixed width clips overly-wide content (overflow:
+  // hidden) instead of letting it bleed under the leading/actions slots.
+  const subPageMiddleStyle: ViewStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: middleSlotWidth,
+    height: SUBPAGE_MIDDLE_HEIGHT,
+    transform: [
+      { translateX: -middleSlotWidth / 2 },
+      { translateY: -SUBPAGE_MIDDLE_HEIGHT / 2 },
+    ],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SUBPAGE_MIDDLE_PADDING_HORIZONTAL,
+    overflow: 'hidden',
   }
 
   return (
@@ -183,14 +229,12 @@ export default function AppBar({
       </View>
 
       {/*
-       * Middle Section — rendered as an in-flow flex item (`flex: 1`) so it
-       * occupies the space between leading and actions but never overflows
-       * past them. This fixes wide children (e.g. <LinearProgress /> with
-       * width: '100%') stretching edge-to-edge under the leading/actions.
-       * `minWidth: 0` is required so the flex item can shrink below its
-       * content's intrinsic width on platforms that respect it (web).
+       * MainPage in-flow middle — occupies the space between leading and
+       * actions (`flex: 1`) without overflowing. `minWidth: 0` lets the flex
+       * item shrink below its content's intrinsic width on platforms that
+       * respect it (web).
        */}
-      {processedMiddle && (
+      {hasInFlowMiddle && (
         <View
           style={{
             flex: 1,
@@ -209,6 +253,29 @@ export default function AppBar({
       <View style={actionsStyle}>
         {processedActions}
       </View>
+
+      {/*
+       * SubPage middle — absolutely centered "slot wrap". The inner wrapper is
+       * a responsive `flex: 1` item (matching Figma's `flex-[1_0_0] min-w-px`)
+       * so its content fills / shrinks within the fixed-width box.
+       */}
+      {isSub && processedMiddle && (
+        <View style={subPageMiddleStyle} pointerEvents="box-none">
+          <View
+            style={{
+              flex: 1,
+              minWidth: 1,
+              height: '100%',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            pointerEvents="box-none"
+          >
+            {processedMiddle}
+          </View>
+        </View>
+      )}
     </View>
   )
 }

package/src/components/Attached/Attached.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+export type AttachedPosition =
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right'
+
+export type AttachedProps = Omit<ViewProps, 'children'> & {
+  /**
+   * Main content the badge attaches to (the Figma "main slot"). Any node —
+   * typically an `IconCapsule`, `Avatar`, image, etc. `modes` are cascaded to
+   * every child via {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * The element attached on top of `children` (the Figma "slot"). Centered on
+   * the anchor point given by `position` so it straddles the edge/corner.
+   * `modes` are cascaded into it as well.
+   */
+  badge?: React.ReactNode
+  /**
+   * Enforces a fixed square size (in px) on the `badge` slot, regardless of
+   * what node is passed. The badge is wrapped in a box of
+   * `badgeSize × badgeSize` with `overflow: 'hidden'`, and the badge content is
+   * stretched to fill it. Use this to guarantee the design-token size even when
+   * a consumer drops in an arbitrary node (e.g. an `Image`) whose intrinsic
+   * size/aspect-ratio would otherwise win.
+   *
+   * When omitted, the badge keeps its own intrinsic size (legacy behavior).
+   */
+  badgeSize?: number
+  /**
+   * Corner radius used to clip the `badge` box. Only applies when `badgeSize`
+   * is set. Anything that overflows the rounded box (e.g. a non-square image)
+   * is clipped.
+   * @default badgeSize / 2 (a full circle)
+   */
+  badgeRadius?: number
+  /**
+   * Anchor point for the `badge` relative to the main content.
+   * @default 'bottom-right'
+   */
+  position?: AttachedPosition
+  /**
+   * How the anchor point is computed for diagonal (corner) positions:
+   * - `false` (default): treat the main content as a **square** — corner
+   *   anchors sit on the bounding-box corners.
+   * - `true`: treat the main content as a **circle** inscribed in its bounding
+   *   box — corner anchors sit on the circle's circumference (the 45° point),
+   *   so badges hug round content like a circular `IconCapsule` or `Avatar`.
+   *
+   * Edge (`top`/`bottom`/`left`/`right`) and `center` anchors are unaffected,
+   * since the circle meets the bounding box at those points.
+   * @default false
+   */
+  circular?: boolean
+  /** Mode configuration cascaded to the token resolver and all children. */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+type Size = { width: number; height: number }
+
+const ZERO_SIZE: Size = { width: 0, height: 0 }
+
+/**
+ * Fraction (0 | 0.5 | 1) of the main content's width/height at which the badge
+ * center should sit, derived from the `position` anchor.
+ */
+function resolveAnchorFractions(position: AttachedPosition): { fx: number; fy: number } {
+  const fx = position.includes('left') ? 0 : position.includes('right') ? 1 : 0.5
+  const fy = position.startsWith('top') ? 0 : position.startsWith('bottom') ? 1 : 0.5
+  return { fx, fy }
+}
+
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+/**
+ * Stretches the immediate badge child/children to fill the enforced badge box.
+ * Merges `{ width: '100%', height: '100%' }` into each top-level element's
+ * `style` so an arbitrary node (e.g. an `Image` with its own width/aspectRatio)
+ * fills the fixed `badgeSize` box instead of laying out at its intrinsic size.
+ * The wrapping box's `overflow: 'hidden'` clips anything that still overflows.
+ */
+function forceBadgeFill(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child
+    const childStyle = (child.props as any)?.style
+    return React.cloneElement(child as React.ReactElement<any>, {
+      style: [FILL_STYLE, childStyle],
+    })
+  })
+}
+
+function Attached({
+  children,
+  badge,
+  badgeSize,
+  badgeRadius,
+  position = 'bottom-right',
+  circular = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: AttachedProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const [mainSize, setMainSize] = useState<Size>(ZERO_SIZE)
+  const [measuredBadgeSize, setMeasuredBadgeSize] = useState<Size>(ZERO_SIZE)
+
+  const onMainLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout
+    setMainSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+  }, [])
+
+  const onBadgeLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout
+    setMeasuredBadgeSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+  }, [])
+
+  const mainChildren = useMemo(
+    () => (children != null ? cloneChildrenWithModes(children, modes) : null),
+    [children, modes]
+  )
+  const badgeChildren = useMemo(
+    () => (badge != null ? cloneChildrenWithModes(badge, modes) : null),
+    [badge, modes]
+  )
+
+  // When a fixed size is requested, the badge is wrapped in a clipped box and
+  // its content is force-stretched to fill it (see `forceBadgeFill`).
+  const badgeBoxStyle = useMemo<ViewStyle | null>(() => {
+    if (badgeSize == null) return null
+    return {
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: badgeRadius ?? badgeSize / 2,
+      overflow: 'hidden',
+    }
+  }, [badgeSize, badgeRadius])
+
+  const badgePlacement = useMemo<ViewStyle>(() => {
+    const { fx, fy } = resolveAnchorFractions(position)
+    const measured = mainSize.width > 0 && measuredBadgeSize.width > 0
+
+    let anchorX: number
+    let anchorY: number
+    if (circular) {
+      // Project the anchor onto the circle inscribed in the bounding box, so
+      // corner badges land on the circumference (45°) instead of the box corner.
+      const cx = mainSize.width / 2
+      const cy = mainSize.height / 2
+      const radius = Math.min(mainSize.width, mainSize.height) / 2
+      const dx = (fx - 0.5) * 2 // -1 | 0 | 1
+      const dy = (fy - 0.5) * 2 // -1 | 0 | 1
+      const len = Math.hypot(dx, dy) || 1 // 'center' → 0, guard against /0
+      anchorX = cx + (dx / len) * radius
+      anchorY = cy + (dy / len) * radius
+    } else {
+      anchorX = mainSize.width * fx
+      anchorY = mainSize.height * fy
+    }
+
+    return {
+      position: 'absolute',
+      left: anchorX - measuredBadgeSize.width / 2,
+      top: anchorY - measuredBadgeSize.height / 2,
+      // Hide until both elements are measured to avoid a one-frame flash at (0,0).
+      opacity: measured ? 1 : 0,
+    }
+  }, [position, circular, mainSize, measuredBadgeSize])
+
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <View onLayout={onMainLayout}>{mainChildren}</View>
+      {badgeChildren != null && (
+        <View style={badgePlacement} onLayout={onBadgeLayout} pointerEvents="box-none">
+          {badgeBoxStyle != null ? (
+            <View style={badgeBoxStyle}>{forceBadgeFill(badgeChildren)}</View>
+          ) : (
+            badgeChildren
+          )}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = {
+  // alignSelf flex-start so the wrapper hugs the main content; anchors are then
+  // computed relative to the content size rather than a stretched parent.
+  container: { position: 'relative', alignSelf: 'flex-start' } as ViewStyle,
+}
+
+/** Fill style merged into badge content when `badgeSize` enforces a fixed box. */
+const FILL_STYLE = { width: '100%', height: '100%' } as ViewStyle
+
+export default React.memo(Attached)

package/src/components/Card/Card.tsx

@@ -11,6 +11,11 @@ import { EMPTY_MODES } from '../../utils/react-utils';
 const CardContext = createContext<{ modes?: Record<string, any> }>({});
 
 export interface CardProps {
+    /**
+     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
+     * Sits above the media slot, with its own padding.
+     */
+    header?: React.ReactNode;
     /**
      * The content to be rendered in the media slot (e.g. an Image).
      * This content is wrapped in a container that respects the `aspectRatio`.
@@ -39,9 +44,11 @@ export interface CardProps {
  * Card component implementation from Figma node 765:6186.
  * 
  * Supports a `media` slot (with aspect ratio) and a content area.
+ * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
+ * (with aspect ratio) and a content area.
  * Usage:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
@@ -49,6 +56,7 @@ export interface CardProps {
  * ```
  */
 export function Card({
+    header,
     media,
     children,
     modes = EMPTY_MODES,
@@ -74,6 +82,11 @@ export function Card({
         ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
         : media;
 
+    // Clone header to pass modes if it's a valid element
+    const headerWithModes = isValidElement(header)
+        ? cloneElement(header as any, { modes: { ...(header.props as any).modes, ...modes } })
+        : header;
+
     const containerStyle: ViewStyle = {
         backgroundColor,
         borderColor,
@@ -85,6 +98,15 @@ export function Card({
         overflow: 'hidden', // Ensure border radius clips content
     };
 
+    // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
+    const headerWrapperStyle: ViewStyle = {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        paddingHorizontal: 12,
+        paddingVertical: 16,
+    };
+
     const mediaWrapperStyle: ViewStyle = {
         width: '100%',
         aspectRatio: mediaAspectRatio,
@@ -104,6 +126,11 @@ export function Card({
     return (
         <CardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
+                {header && (
+                    <View style={headerWrapperStyle}>
+                        {headerWithModes}
+                    </View>
+                )}
                 {media && (
                     <View style={mediaWrapperStyle}>
                         {mediaWithModes}

package/src/components/Checkbox/Checkbox.tsx

@@ -55,12 +55,21 @@ function useFocusVisible() {
 const MIN_TOUCH_TARGET = 44
 
 const touchTargetStyle: ViewStyle = {
-  minWidth: MIN_TOUCH_TARGET,
-  minHeight: MIN_TOUCH_TARGET,
   alignItems: 'center',
   justifyContent: 'center',
 }
 
+/**
+ * Expands the tappable region to the 44pt minimum without changing layout.
+ * `hitSlop` extends the press-responder bounds beyond the visual box on both
+ * native and web (react-native-web ≥ 0.19), so the Pressable keeps its natural
+ * checkbox-sized footprint and sibling alignment stays intact.
+ */
+function invisibleTouchHitSlop(checkboxSize: number) {
+  const slop = Math.max(0, Math.ceil((MIN_TOUCH_TARGET - checkboxSize) / 2))
+  return { top: slop, bottom: slop, left: slop, right: slop }
+}
+
 export interface CheckboxProps {
   /** Whether the checkbox is checked (controlled) */
   checked?: boolean
@@ -216,9 +225,12 @@ function Checkbox({
     ? (disabledActiveMark as string)
     : (selectedMarkColor as string)
 
+  const hitSlop = invisibleTouchHitSlop(size as number)
+
   return (
     <Pressable
       style={[touchTargetStyle, style]}
+      hitSlop={hitSlop}
       onPress={handlePress}
       disabled={disabled}
       onHoverIn={() => setIsHovered(true)}

package/src/components/Drawer/Drawer.tsx

@@ -439,6 +439,10 @@ function Drawer({
               style={[styles.content, contentStyle]}
               contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
               showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+              // Let a tap on an input inside the sheet focus it on the FIRST tap
+              // even while the keyboard is already open (default 'never' would
+              // eat that tap just to dismiss the keyboard).
+              keyboardShouldPersistTaps="handled"
               animatedProps={animatedScrollProps}
               alwaysBounceVertical={false}
               overScrollMode="always"

package/src/components/DropdownInput/DropdownInput.tsx

@@ -117,8 +117,9 @@ export type DropdownInputProps = {
      */
     menuMaxHeight?: number
     /**
-     * Pixel offset between the trigger and the popup. Defaults to 4 so the
-     * popup visually peeks below the input.
+     * Pixel gap between the trigger and the popup. When omitted, it defaults
+     * to the `formField/gap` design token so the menu sits the same distance
+     * below the input as the rest of the field's internal spacing.
      */
     menuOffset?: number
     /**
@@ -325,7 +326,7 @@ function DropdownInput({
     supportText,
     errorMessage,
     menuMaxHeight = 240,
-    menuOffset = 6,
+    menuOffset,
     matchTriggerWidth = true,
     closeOnBackdropPress = true,
     modes: propModes = EMPTY_MODES,
@@ -422,11 +423,30 @@ function DropdownInput({
     const tokens = useFormFieldTokens(modes)
     const chevron = useChevronTokens(modes)
 
+    // Gap between the input and the popup. Falls back to the `formField/gap`
+    // token so the menu's offset matches the field's own internal spacing.
+    const effectiveMenuOffset = menuOffset ?? tokens.gap
+
     // ---------------- Layout / measurement ----------------
     const triggerRef = useRef<View>(null)
     const [triggerRect, setTriggerRect] = useState<Rect | null>(null)
     const insets = useSafeAreaInsets()
 
+    // Android coordinate-space bridge.
+    //
+    // The popup lives inside a `statusBarTranslucent` Modal, whose window is
+    // laid out from the PHYSICAL top of the screen (behind the status bar).
+    // The trigger, however, is rendered inside the app's content area (Expo
+    // Router / react-native-screens under edge-to-edge), so its
+    // `measureInWindow` Y is relative to the content area — it does NOT include
+    // the status bar height. Feeding that Y straight into the Modal would place
+    // the popup one status-bar-height too high, landing it on top of the input.
+    //
+    // Adding `insets.top` converts the trigger's content-relative Y into the
+    // Modal's full-screen coordinate space. iOS/web share a single coordinate
+    // space for the Modal and the trigger, so no shift is needed there.
+    const windowTopOffset = Platform.OS === 'android' ? insets.top : 0
+
     const measure = useCallback(() => {
         if (!triggerRef.current) return
         triggerRef.current.measureInWindow((x, y, width, height) => {
@@ -503,7 +523,7 @@ function DropdownInput({
             menuSize?.height ?? menuMaxHeight,
             menuMaxHeight
         )
-        const needed = desiredHeight + menuOffset + 8
+        const needed = desiredHeight + effectiveMenuOffset + 8
         if (placement === 'top') {
             return spaceAbove >= needed || spaceAbove >= spaceBelow
                 ? 'top'
@@ -523,7 +543,7 @@ function DropdownInput({
         windowHeight,
         menuSize?.height,
         menuMaxHeight,
-        menuOffset,
+        effectiveMenuOffset,
         insets.top,
         insets.bottom,
     ])
@@ -544,15 +564,18 @@ function DropdownInput({
         if (leftPos > maxLeft) leftPos = maxLeft
         if (leftPos < minLeft) leftPos = minLeft
 
+        // Trigger top expressed in the Modal's (full-screen) coordinate space.
+        const triggerTop = triggerRect.y + windowTopOffset
+
         let topPos: number
         if (computedPlacement === 'top') {
             const desiredHeight = menuSize?.height ?? menuMaxHeight
-            topPos = triggerRect.y - desiredHeight - menuOffset
+            topPos = triggerTop - desiredHeight - effectiveMenuOffset
             if (topPos < insets.top + screenPadding) {
                 topPos = insets.top + screenPadding
             }
         } else {
-            topPos = triggerRect.y + triggerRect.height + menuOffset
+            topPos = triggerTop + triggerRect.height + effectiveMenuOffset
         }
 
         const style: ViewStyle = {
@@ -569,7 +592,8 @@ function DropdownInput({
         triggerRect,
         computedPlacement,
         menuSize,
-        menuOffset,
+        effectiveMenuOffset,
+        windowTopOffset,
         menuMaxHeight,
         matchTriggerWidth,
         windowWidth,
@@ -779,22 +803,32 @@ function DropdownInput({
             )}
 
             {/*
-              IMPORTANT: do NOT pass `statusBarTranslucent` to this Modal.
-              On Android, a `statusBarTranslucent` Modal opens its own window
-              that spans the entire screen (origin at screen-top, including
-              the status bar), but `measureInWindow` on the trigger returns
-              coordinates relative to the *activity* window — which on a
-              default Android setup starts BELOW the status bar. The two
-              coordinate spaces then differ by `StatusBar.currentHeight`, so
-              `triggerRect.y + triggerRect.height + menuOffset` lands roughly
-              one status-bar-height ABOVE the visible input, making the
-              popup overlap the input row. Leaving `statusBarTranslucent`
-              off keeps the Modal's window aligned with the activity
-              window, which is what every measurement here assumes.
+              IMPORTANT: this Modal MUST be `statusBarTranslucent` (and
+              `navigationBarTranslucent`) on Android.
+
+              The app runs edge-to-edge (Expo SDK 54+ / Android 15 enforce it
+              and it cannot be disabled). That means the activity window spans
+              the entire physical screen, so `measureInWindow` on the trigger
+              returns a `y` measured from the very TOP of the screen — the
+              status bar height is INCLUDED.
+
+              A non-translucent Modal, however, opens a window whose content
+              area starts BELOW the status bar, so `top: 0` inside it maps to
+              screen-Y = statusBarHeight. Every `top` we compute is then
+              shifted UP by one status-bar-height relative to the trigger,
+              which (because the input row height is roughly a status bar tall)
+              drops the popup right on top of the input.
+
+              Making the Modal translucent gives it a full-screen window whose
+              origin matches the edge-to-edge activity window, so the
+              `measureInWindow` coordinates and the popup's absolute `top`/
+              `left` finally live in the same coordinate space.
             */}
             <Modal
                 visible={isOpen}
                 transparent
+                statusBarTranslucent
+                navigationBarTranslucent
                 animationType="fade"
                 onRequestClose={closeMenu}
             >