@userflow-tech/react-native 0.5.0 → 0.7.0

package/src/surfaces/TooltipSurface.tsx

@@ -23,7 +23,8 @@ import { autoAnchorRegistry } from '../anchors/AutoAnchorRegistry';
 import { addAnimationFrameCallback, removeAnimationFrameCallback } from '../anchors/animationFrame';
 import { isAppActive, subscribeAppActive } from '../anchors/appActive';
 import { fiberScanRoot } from '../anchors/fiber/FiberScanRoot';
-import type { AnyFiber } from '../anchors/fiber/fiberInternals';
+import { type AnyFiber, fiberFromPublicInstance } from '../anchors/fiber/fiberInternals';
+import type { Point } from '../anchors/fiber/presentedModal';
 import { clipToScrollViewports } from '../anchors/fiber/visibleRect';
 import {
   clearFiberAnchorCache,
@@ -37,6 +38,7 @@ import { scrollAnchorIntoView } from '../anchors/scrollAnchorIntoView';
 import { getScrollPadding } from '../anchors/scrollConfig';
 import { targetPressMonitor } from '../anchors/targetPressMonitor';
 import { RichContentRenderer } from '../content/RichContentRenderer';
+import { resolveContentFontFamily } from '../content/resolveContentFontFamily';
 import type { LookupAttribute } from '../content/types';
 
 import { CardFade } from './CardFade';
@@ -81,6 +83,7 @@ import {
   tooltipSideGap,
   tooltipVerticalGap,
 } from './tooltip/resolveSideCardWidth';
+import { locateTargetOrigin, offsetRect } from './tooltip/targetOrigin';
 import { TargetSearchSchedule } from './tooltip/targetSearchSchedule';
 
 export interface TooltipSurfaceProps {
@@ -156,6 +159,7 @@ export function TooltipSurface({
 }: TooltipSurfaceProps): React.ReactElement | null {
   const version = session.version;
   const chrome = resolveBubbleChrome(theme, 'tooltip');
+  const contentFontFamily = resolveContentFontFamily(theme);
   const progress = resolveStepProgress(version, currentStep.id);
   const showClose = !version.closeDisabled;
   const backdropOpacity = parseBackdropOpacity(theme.backdropOpacity);
@@ -199,6 +203,12 @@ export function TooltipSurface({
   const [missingMode, setMissingMode] = React.useState<MissingMode>('waiting');
   /** True after at least one *failed* measure for the current step/anchor. */
   const [measureAttempted, setMeasureAttempted] = React.useState(false);
+  /**
+   * True while a natively presented modal hides the target, or the target is
+   * in a sheet that cannot be placed. The step waits without counting the
+   * target as missing, and draws nothing over the modal.
+   */
+  const [concealed, setConcealed] = React.useState(false);
   /**
    * False only after a same-step `resetNonce` bump (preview restart) until one
    * frame has passed, so dialog teardown cannot 0-size FLAG.
@@ -236,7 +246,15 @@ export function TooltipSurface({
   const resolveEpochRef = React.useRef(0);
   /** Latest resolved host fiber (for scroll-ancestor walk + rAF remeasure). */
   const hostFiberRef = React.useRef<AnyFiber | null>(null);
-  /** Target rect clipped to scroll viewports, for tap detection only. */
+  /**
+   * Window position of the host's measure space, from the last resolve. Not
+   * zero only inside a native sheet, whose content measures and receives
+   * touches relative to the sheet.
+   */
+  const measureOriginRef = React.useRef<Point>({ x: 0, y: 0 });
+  /** `targetRef` in the host's measure space. */
+  const measuredRef = React.useRef<Rect | null>(null);
+  /** Target rect clipped to scroll viewports, for tap detection only. In measure space, as touches are. */
   const clippedPressRef = React.useRef<Rect | null>(null);
   const clipGenRef = React.useRef(0);
   const hostMeasureRef = React.useRef<
@@ -261,6 +279,8 @@ export function TooltipSurface({
   insetsRef.current = layoutInsets;
   const missingModeRef = React.useRef(missingMode);
   missingModeRef.current = missingMode;
+  const concealedRef = React.useRef(concealed);
+  concealedRef.current = concealed;
   const behaviorRef = React.useRef(behavior);
   behaviorRef.current = behavior;
   const draftModeRef = React.useRef(session.draftMode);
@@ -290,6 +310,7 @@ export function TooltipSurface({
     warnedSidePlacementStepRef.current = null;
     targetStepIdRef.current = null;
     targetRef.current = null;
+    measuredRef.current = null;
     // Drop the previous card's measured size and side so the next step does not
     // inherit a wrapped 115×400 LEFT into `fits(currentPlacement)`.
     const nextPlacement = desiredPlacementRef.current ?? 'BELOW';
@@ -298,6 +319,7 @@ export function TooltipSurface({
     setBubbleSize({ width: 280, height: 160 });
     setMissingMode('waiting');
     setMeasureAttempted(false);
+    setConcealed(false);
     setTarget(null);
     const prev = targetingIdentityRef.current;
     const sameIdentity = prev.stepId === currentStep.id && prev.targetKey === targetKey;
@@ -317,10 +339,13 @@ export function TooltipSurface({
     return () => clearTimeout(handle);
   }, [resolveArmed]);
 
-  const applyTarget = React.useCallback((next: Rect | null) => {
+  /** `next` is in window coordinates; `measured` is the same rect in the host's measure space. */
+  const applyTarget = React.useCallback((next: Rect | null, measured: Rect | null = next) => {
     if (!mountedRef.current) return;
+    if (next != null) setConcealed(false);
     targetStepIdRef.current = next == null ? null : currentStepIdRef.current;
-    if (rectsEqual(targetRef.current, next)) return;
+    if (rectsEqual(targetRef.current, next) && rectsEqual(measuredRef.current, measured)) return;
+    measuredRef.current = measured;
     if (next == null) {
       // The anchor went away (unmount / navigation), so whatever scroll position
       // the user had settled on no longer applies. Treat its next appearance as
@@ -330,15 +355,15 @@ export function TooltipSurface({
     }
     targetRef.current = next;
     setTarget(next);
-    if (next == null) {
+    if (next == null || measured == null) {
       clippedPressRef.current = null;
       return;
     }
-    clippedPressRef.current = next;
+    clippedPressRef.current = measured;
     const fiber = hostFiberRef.current;
     const gen = (clipGenRef.current += 1);
     if (!fiber) return;
-    void clipToScrollViewports(fiber, next).then((clipped) => {
+    void clipToScrollViewports(fiber, measured).then((clipped) => {
       if (clipGenRef.current !== gen) return;
       clippedPressRef.current = clipped;
     });
@@ -362,10 +387,28 @@ export function TooltipSurface({
     hostMeasureRef.current = null;
     hostScrollIntoViewRef.current = undefined;
     fiberCacheIdRef.current = null;
+    setConcealed(false);
     markMeasureAttempted();
     applyTarget(null);
   }, [applyTarget, markMeasureAttempted]);
 
+  /**
+   * Forget the resolved host while a natively presented modal hides it. Unlike
+   * {@link dropHost} the target is not gone: the missing-target timer does not
+   * run, so opening a sheet mid-step cannot flag or end the flow, and the
+   * tooltip comes back when the sheet closes.
+   */
+  const concealHost = React.useCallback(() => {
+    resolveEpochRef.current += 1;
+    measureInFlightRef.current = false;
+    hostFiberRef.current = null;
+    hostMeasureRef.current = null;
+    hostScrollIntoViewRef.current = undefined;
+    fiberCacheIdRef.current = null;
+    setConcealed(true);
+    applyTarget(null);
+  }, [applyTarget]);
+
   const effectiveViewport = React.useCallback(() => {
     const windowSize = Dimensions.get('window');
     const scrollPadding = getScrollPadding();
@@ -384,8 +427,9 @@ export function TooltipSurface({
     );
   }, []);
 
+  /** `rect` is in window coordinates; `measured` is the same rect in the host's measure space. */
   const maybeScrollIntoView = React.useCallback(
-    (rect: Rect) => {
+    (rect: Rect, measured: Rect) => {
       // Scrolling the app to reveal a target we are fading away from is visible.
       if (exitingRef.current) return;
       if (scrollSettledRef.current) return;
@@ -406,8 +450,9 @@ export function TooltipSurface({
             ? { scrollIntoView: hostScrollIntoViewRef.current }
             : {}),
         };
+        // Scroll containers are measured in the same space as the host.
         scrollAnchorIntoView({
-          rect,
+          rect: measured,
           host,
           fiber: hostFiberRef.current,
         });
@@ -418,6 +463,31 @@ export function TooltipSurface({
     [effectiveViewport],
   );
 
+  /** Measure callback for both the resolve and the rAF remeasure of `epoch`'s host. */
+  const onHostMeasured = React.useCallback(
+    (epoch: number, x: number, y: number, width: number, height: number) => {
+      if (resolveEpochRef.current !== epoch) {
+        measureInFlightRef.current = false;
+        return;
+      }
+      measureInFlightRef.current = false;
+      if (!mountedRef.current) return;
+
+      if (width <= 0 || height <= 0) {
+        const cacheId = fiberCacheIdRef.current;
+        if (cacheId) invalidateFiberAnchor(cacheId);
+        dropHost();
+        return;
+      }
+
+      const measured: Rect = { x, y, width, height };
+      const rect = offsetRect(measured, measureOriginRef.current);
+      maybeScrollIntoView(rect, measured);
+      applyTarget(rect, measured);
+    },
+    [applyTarget, dropHost, maybeScrollIntoView],
+  );
+
   /**
    * Resolve the anchor host (registry / fiber scan). Driven by
    * {@link TargetSearchSchedule} — intentionally NOT on every animation frame.
@@ -448,26 +518,25 @@ export function TooltipSurface({
     if (measureInFlightRef.current) return;
     const epoch = resolveEpochRef.current;
     measureInFlightRef.current = true;
-    resolution.host.measureInWindow((x, y, width, height) => {
-      if (resolveEpochRef.current !== epoch) {
+    const { host } = resolution;
+    const placedFiber = resolution.fiber ?? fiberFromPublicInstance(host.node);
+    // Refreshed per resolve, not per frame: a sheet moves rarely, and the
+    // lookup walks the whole tree.
+    locateTargetOrigin(placedFiber, (origin) => {
+      if (resolveEpochRef.current !== epoch || !mountedRef.current) {
         measureInFlightRef.current = false;
         return;
       }
-      measureInFlightRef.current = false;
-      if (!mountedRef.current) return;
-
-      if (width <= 0 || height <= 0) {
-        const cacheId = fiberCacheIdRef.current;
-        if (cacheId) invalidateFiberAnchor(cacheId);
-        dropHost();
+      if (!origin) {
+        concealHost();
         return;
       }
-
-      const rect: Rect = { x, y, width, height };
-      maybeScrollIntoView(rect);
-      applyTarget(rect);
+      measureOriginRef.current = origin;
+      host.measureInWindow((x, y, width, height) => {
+        onHostMeasured(epoch, x, y, width, height);
+      });
     });
-  }, [anchorId, applyTarget, decodedAutoData, dropHost, isAuto, maybeScrollIntoView]);
+  }, [anchorId, concealHost, decodedAutoData, dropHost, isAuto, onHostMeasured]);
 
   /**
    * Live re-measure of an already-resolved host. Driven by the shared rAF hub
@@ -482,25 +551,9 @@ export function TooltipSurface({
     const epoch = resolveEpochRef.current;
     measureInFlightRef.current = true;
     measure((x, y, width, height) => {
-      if (resolveEpochRef.current !== epoch) {
-        measureInFlightRef.current = false;
-        return;
-      }
-      measureInFlightRef.current = false;
-      if (!mountedRef.current) return;
-
-      if (width <= 0 || height <= 0) {
-        const cacheId = fiberCacheIdRef.current;
-        if (cacheId) invalidateFiberAnchor(cacheId);
-        dropHost();
-        return;
-      }
-
-      const rect: Rect = { x, y, width, height };
-      maybeScrollIntoView(rect);
-      applyTarget(rect);
+      onHostMeasured(epoch, x, y, width, height);
     });
-  }, [applyTarget, dropHost, maybeScrollIntoView]);
+  }, [onHostMeasured]);
 
   const resolveTargetRef = React.useRef(resolveTarget);
   resolveTargetRef.current = resolveTarget;
@@ -519,7 +572,8 @@ export function TooltipSurface({
     }
     const search = new TargetSearchSchedule(() => resolveTargetRef.current());
     searchRef.current = search;
-    search.setMode(targetRef.current ? 'anchored' : 'missing');
+    // A concealed target keeps the steady poll, so the tooltip is back soon after the modal closes.
+    search.setMode(targetRef.current || concealedRef.current ? 'anchored' : 'missing');
 
     const trigger = () => search.trigger();
     const unsubscribers = [
@@ -554,8 +608,8 @@ export function TooltipSurface({
   }, [resolveArmed, searchStopped, currentStep.id, targetKey]);
 
   React.useEffect(() => {
-    searchRef.current?.setMode(target ? 'anchored' : 'missing');
-  }, [target]);
+    searchRef.current?.setMode(target || concealed ? 'anchored' : 'missing');
+  }, [target, concealed]);
 
   // rAF tracking while a host is resolved (and we are not paused after report).
   React.useEffect(() => {
@@ -590,7 +644,7 @@ export function TooltipSurface({
       return;
     }
 
-    if (!measureAttempted) {
+    if (!measureAttempted || concealed) {
       return;
     }
 
@@ -606,6 +660,7 @@ export function TooltipSurface({
   }, [
     target,
     measureAttempted,
+    concealed,
     engine,
     currentStep.id,
     theme.tooltipMissingBehavior,
@@ -870,6 +925,11 @@ export function TooltipSurface({
     return null;
   }
 
+  // A native modal hides the target: nothing over it, not even the blocker.
+  if (isMissing && concealed) {
+    return null;
+  }
+
   const showBranding = session.flow.company.flowBranding;
   const contentPadding = chrome.contentPadding;
   // Modal only while the host is trapped too. Otherwise VoiceOver would skip
@@ -915,6 +975,7 @@ export function TooltipSurface({
                 <Text
                   style={{
                     color: theme.fontColor,
+                    fontFamily: contentFontFamily,
                     fontSize: theme.fontSize,
                     marginTop: 12,
                     textAlign: 'center',
@@ -962,11 +1023,21 @@ export function TooltipSurface({
         {showMissingUi ? (
           <View testID="userflow-tooltip-missing">
             <Text
-              style={[styles.missingTitle, { color: theme.fontColor, fontSize: theme.fontSize }]}
+              style={[
+                styles.missingTitle,
+                { color: theme.fontColor, fontFamily: contentFontFamily, fontSize: theme.fontSize },
+              ]}
             >
               Target not found
             </Text>
-            <Text style={{ color: theme.fontColor, fontSize: theme.fontSize, opacity: 0.8 }}>
+            <Text
+              style={{
+                color: theme.fontColor,
+                fontFamily: contentFontFamily,
+                fontSize: theme.fontSize,
+                opacity: 0.8,
+              }}
+            >
               This step's anchor is missing. Close to continue, or wait if the screen is still
               loading.
             </Text>

package/src/surfaces/bannerWebView/BannerWebViewBar.tsx

@@ -34,7 +34,6 @@ import {
   resolveBannerBarBorderRadius,
 } from '../bannerBarLayout';
 import { bannerOverlayShadowStyle } from '../bannerBarTokens';
-import { resolveBannerBackgroundColor } from '../resolveBannerTheme';
 import { useUserflowSafeAreaInsets } from '../safeArea';
 
 import { collectBannerAutoRunEvalCodes } from './bannerAutoRunEvalJs';
@@ -311,15 +310,18 @@ export function BannerWebViewBar({
   const frameStyle = bannerFrameStyle(banner);
   const overlayEdge = banner.embedMode === BannerEmbedMode.BODY_LAST ? 'bottom' : 'top';
   const barRadius = resolveBannerBarBorderRadius(banner);
-  const backgroundColor = resolveBannerBackgroundColor(session.version.theme);
+  // Custom CSS paints the card, often with its own radius. The theme color
+  // (brand blue when banner tokens are unset) would otherwise fill the
+  // status-bar pad and the corners outside that radius.
+  const shellBackground = 'transparent';
   const webStyle: ViewStyle = {
     width: '100%',
     height: contentHeight,
-    backgroundColor,
+    backgroundColor: shellBackground,
   };
   const debugging = typeof __DEV__ !== 'undefined' && __DEV__ ? true : undefined;
   const insetChrome = safeAreaEdge
-    ? bannerPushLayoutChrome(safeAreaEdge, insets, backgroundColor)
+    ? bannerPushLayoutChrome(safeAreaEdge, insets, shellBackground)
     : null;
   const insetChromeOutsideFade = insetChrome != null && fadeIn;
 

package/src/surfaces/bannerWebView/bannerNeedsWebView.ts

@@ -1,38 +1,6 @@
-import type { BannerFragment, ThemeFragment } from '@userflow-tech/protocol';
-import { FlowActionType } from '@userflow-tech/protocol';
+import type { BannerFragment } from '@userflow-tech/protocol';
 
-import { themeHasPublishedCustomCss } from './resolveCdnHost';
-
-let debugForceWebViewBanner = false;
-
-/** POC / local testing when the builder flag is not on the wire yet. */
-export function setDebugForceWebViewBanner(enabled: boolean): void {
-  debugForceWebViewBanner = enabled;
-}
-
-/** @internal */
-export function resetDebugForceWebViewBannerForTests(): void {
-  debugForceWebViewBanner = false;
-}
-
-function bannerHasEvalJsAction(banner: BannerFragment): boolean {
-  return banner.buttons.some((button) =>
-    button.actions.some((action) => action.type === FlowActionType.EVAL_JS),
-  );
-}
-
-/**
- * Use the WebView banner renderer when any button runs Evaluate JavaScript
- * (needs the shared eval page), when the theme has published custom CSS
- * (`.userflow-custom-container-*` / `.userflow-custom-button-*` via CDN),
- * or when {@link setDebugForceWebViewBanner} is true.
- */
-export function bannerNeedsWebView(banner: BannerFragment, theme?: ThemeFragment | null): boolean {
-  if (debugForceWebViewBanner) {
-    return true;
-  }
-  if (theme != null && themeHasPublishedCustomCss(theme)) {
-    return true;
-  }
-  return bannerHasEvalJsAction(banner);
+/** Use the WebView banner renderer when the builder enabled custom banners. */
+export function bannerNeedsWebView(banner: BannerFragment): boolean {
+  return banner.customBannerEnabled === true;
 }

package/src/surfaces/bannerWebView/bannerThemeStyles.ts

@@ -1,5 +1,6 @@
 import type { ThemeFragment } from '@userflow-tech/protocol';
 
+import { contentFontFamilyCss } from '../../content/resolveContentFontFamily';
 import { resolveBannerBackgroundColor, resolveBannerForegroundColor } from '../resolveBannerTheme';
 
 function readString(theme: ThemeFragment, key: string, fallback: string): string {
@@ -68,7 +69,7 @@ export function bannerThemeInlineStyles(theme: ThemeFragment): Record<string, st
       'bannerActiveForegroundColor',
       bannerFg,
     ),
-    '--userflow-font-family': readString(theme, 'fontFamily', 'system-ui, sans-serif'),
+    '--userflow-font-family': contentFontFamilyCss(theme),
     '--userflow-font-size': `${fontSize}px`,
     '--userflow-line-height': `${lineHeight}px`,
     '--userflow-button-height': readCssLength(theme, 'buttonHeight', 32),

package/src/surfaces/bannerWebView/bannerWebViewHeight.ts

@@ -0,0 +1,32 @@
+/**
+ * Height the native WebView should use for a custom banner.
+ *
+ * Custom CSS often sizes the card with `min-height` and takes the copy and
+ * buttons out of flow (`position: absolute`). The WebView is created shorter
+ * than that card, so a root that only looks as tall as the viewport because of
+ * `min-height` must not be replaced with the close button's box.
+ *
+ * When the root really is stretching to fill a taller viewport (`height: 100%`),
+ * fall back to in-flow content, and never below `min-height`.
+ */
+export function resolveBannerWebViewHeight(
+  rectHeight: number,
+  scrollHeight: number,
+  viewportHeight: number,
+  minHeight: number,
+  contentHeight: number,
+): number {
+  const rect = rectHeight > 0 ? rectHeight : 0;
+  const scroll = scrollHeight > 0 ? scrollHeight : 0;
+  let height = Math.ceil(Math.max(rect, scroll));
+  const floor = minHeight > 0 ? Math.ceil(minHeight) : 0;
+  if (viewportHeight > 0 && height >= viewportHeight - 2 && height > floor + 1) {
+    if (contentHeight > 0 && contentHeight < height) {
+      height = Math.ceil(contentHeight > floor ? contentHeight : floor);
+    }
+  }
+  if (floor > height) {
+    height = floor;
+  }
+  return height;
+}

package/src/surfaces/bannerWebView/buildCustomBannerHtml.ts

@@ -2,6 +2,10 @@ import { interpolateVariables } from '@userflow-tech/core';
 import type { BannerFragment, BannerSessionFragment } from '@userflow-tech/protocol';
 import { BannerContentLayout } from '@userflow-tech/protocol';
 
+import {
+  bannerContentFontLockCss,
+  contentFontFaceCss,
+} from '../../content/resolveContentFontFamily';
 import { buildBootstrapHtml, wrapCode } from '../../evalJs/bootstrap';
 import type { EvalJsContext } from '../../evalJs/types';
 
@@ -27,26 +31,45 @@ function contentLayoutClass(layout: BannerContentLayout): string {
 }
 
 function layoutMeasureScript(): string {
+  // Inlined on purpose. Hermes' Function#toString is not the source text, so
+  // interpolating resolveBannerWebViewHeight.toString() ships a dead function.
+  // Keep this body in sync with resolveBannerWebViewHeight.
   return `
 (function(){
+  function resolveBannerWebViewHeight(rectHeight,scrollHeight,viewportHeight,minHeight,contentHeight){
+    var rect=rectHeight>0?rectHeight:0;
+    var scroll=scrollHeight>0?scrollHeight:0;
+    var height=Math.ceil(Math.max(rect,scroll));
+    var floor=minHeight>0?Math.ceil(minHeight):0;
+    if(viewportHeight>0&&height>=viewportHeight-2&&height>floor+1){
+      if(contentHeight>0&&contentHeight<height){
+        height=Math.ceil(contentHeight>floor?contentHeight:floor);
+      }
+    }
+    if(floor>height) height=floor;
+    return height;
+  }
   function postLayout(){
     var root=document.querySelector('.userflowjs-banner-root');
     if(!root||!window.ReactNativeWebView||!window.ReactNativeWebView.postMessage)return;
     var rectH=root.getBoundingClientRect().height;
     var scrollH=root.scrollHeight;
-    var h=Math.ceil(Math.max(scrollH,rectH));
+    var minH=parseFloat(window.getComputedStyle(root).minHeight);
+    if(!(minH>0)) minH=0;
     var vh=window.innerHeight||0;
-    if(vh>0&&h>=vh-2){
-      var sum=0;
-      for(var i=0;i<root.childNodes.length;i++){
-        var node=root.childNodes[i];
-        if(node&&node.nodeType===1){
-          var el=node;
-          sum+=el.scrollHeight||el.offsetHeight||0;
-        }
-      }
-      if(sum>0&&sum<h) h=Math.ceil(sum);
+    var inFlow=0;
+    var all=0;
+    for(var i=0;i<root.childNodes.length;i++){
+      var node=root.childNodes[i];
+      if(!node||node.nodeType!==1) continue;
+      var box=node.scrollHeight||node.offsetHeight||0;
+      all+=box;
+      var cs=window.getComputedStyle(node);
+      if(cs.display==='none'||cs.position==='absolute'||cs.position==='fixed') continue;
+      inFlow+=box;
     }
+    var content=inFlow>0?inFlow:all;
+    var h=resolveBannerWebViewHeight(rectH,scrollH,vh,minH,content);
     window.ReactNativeWebView.postMessage(JSON.stringify({__userflow:1,type:'bannerLayout',height:h}));
   }
   window.__userflowBannerLayout=postLayout;
@@ -54,8 +77,18 @@ function layoutMeasureScript(): string {
     var root=document.querySelector('.userflowjs-banner-root');
     if(root){new ResizeObserver(postLayout).observe(root);}
   }
+  var links=document.querySelectorAll('link[rel="stylesheet"]');
+  for(var s=0;s<links.length;s++){
+    links[s].addEventListener('load',postLayout);
+    links[s].addEventListener('error',postLayout);
+  }
   window.addEventListener('load',postLayout);
+  // Custom CSS is often still applying on the first pass. A short WebView
+  // then clamps used height, so min-height never changes the box and
+  // ResizeObserver does not fire. Measure again after the stylesheet can apply.
   setTimeout(postLayout,0);
+  setTimeout(postLayout,60);
+  setTimeout(postLayout,250);
 })();
 `;
 }
@@ -171,6 +204,8 @@ export function buildCustomBannerBodyHtml(
   const theme = session.version.theme;
   const layoutClass = contentLayoutClass(banner.contentLayout);
   const themeStyle = bannerThemeStyleAttribute(theme);
+  const fontFaceCss = contentFontFaceCss(theme);
+  const fontLockCss = bannerContentFontLockCss(theme);
   const customCssUrl = resolveCustomStylesheetUrl(serverEndpoint, theme);
   const innerMaxWidth = resolveBannerInnerMaxWidth(banner);
   const maxInner =
@@ -200,8 +235,9 @@ export function buildCustomBannerBodyHtml(
     : '';
 
   return `
-<style>${BANNER_WEB_FRAME_CSS}</style>
+<style>${fontFaceCss}${BANNER_WEB_FRAME_CSS}</style>
 ${customLink}
+<style>${fontLockCss}</style>
 <div class="userflowjs-banner-root userflowjs-theme-root ${layoutClass}" style="${themeStyle}">
   <div class="userflowjs-banner-start-spacer"></div>
   <div class="userflowjs-banner-inner"${maxInner}>

package/src/surfaces/tooltip/TooltipHighlight.tsx

@@ -90,16 +90,14 @@ export function buildHighlightRings(rect: HighlightRect, chrome: HighlightChrome
 
 function strokeGlow(chrome: HighlightChrome): ViewStyle {
   const blur = Math.max(chrome.radius, 6);
-  const glow: ViewStyle = {
+  // Built in one literal: React Native 0.88 types ViewStyle as readonly.
+  return {
     shadowColor: chrome.color,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: Math.min(0.45, chrome.opacity),
     shadowRadius: blur,
+    ...(Platform?.OS !== 'ios' ? { boxShadow: `0px 0px ${blur}px 0px ${chrome.glowColor}` } : null),
   };
-  if (Platform?.OS !== 'ios') {
-    glow.boxShadow = `0px 0px ${blur}px 0px ${chrome.glowColor}`;
-  }
-  return glow;
 }
 
 function ringFrame(

package/src/surfaces/tooltip/targetOrigin.ts

@@ -0,0 +1,74 @@
+import { fiberScanRoot } from '../../anchors/fiber/FiberScanRootStore';
+import type { AnyFiber } from '../../anchors/fiber/fiberInternals';
+import {
+  locatePresentedModal,
+  measureOriginOf,
+  type Point,
+} from '../../anchors/fiber/presentedModal';
+import { getFiberAnchorScreenKey } from '../../anchors/fiberAnchorCache';
+import { hasWindowOverlayHost } from '../../runtime/WindowOverlayHost';
+
+import type { Rect } from './inferTooltipPlacement';
+
+const ZERO: Point = { x: 0, y: 0 };
+
+/**
+ * How long "nothing is presented" is trusted on the same screen. The lookup
+ * walks the whole fiber tree (1.4ms for 2,200 fibers in a debug build), and
+ * an anchored tooltip resolves four times a second. Expo Router and native
+ * stack modals change the screen, which skips this wait; a React Native
+ * `<Modal>` over the target is noticed within it.
+ */
+export const NO_MODAL_TRUST_MS = 1000;
+
+let noModalSince: { at: number; screenKey: string | null } | null = null;
+
+/**
+ * Where a tooltip target's measured rects sit in the window. `done` gets the
+ * window position of `(0, 0)` in the target's measure space, or null when the
+ * tooltip cannot point at it: a natively presented modal covers the target,
+ * or the target is inside a modal that cannot be placed (see
+ * `presentedModal.ts`). Also null when the target has no fiber to place.
+ *
+ * Without the window host, flow chrome is drawn in the root view under any
+ * native modal, as before, and `done` runs synchronously with zero.
+ */
+export function locateTargetOrigin(
+  fiber: AnyFiber | null,
+  done: (origin: Point | null) => void,
+): void {
+  if (!hasWindowOverlayHost()) {
+    done(ZERO);
+    return;
+  }
+  const screenKey = getFiberAnchorScreenKey();
+  const now = Date.now();
+  if (
+    noModalSince &&
+    noModalSince.screenKey === screenKey &&
+    now - noModalSince.at < NO_MODAL_TRUST_MS
+  ) {
+    done(ZERO);
+    return;
+  }
+  locatePresentedModal(fiberScanRoot.getFiber()).then(
+    (modal) => {
+      noModalSince = modal == null ? { at: now, screenKey } : null;
+      done(modal == null ? ZERO : fiber ? measureOriginOf(fiber, modal) : null);
+    },
+    () => {
+      noModalSince = null;
+      done(null);
+    },
+  );
+}
+
+export function offsetRect(rect: Rect, origin: Point): Rect {
+  if (origin.x === 0 && origin.y === 0) return rect;
+  return { ...rect, x: rect.x + origin.x, y: rect.y + origin.y };
+}
+
+/** @internal Forgets the cached "nothing is presented" between tests. */
+export function resetTargetOriginForTests(): void {
+  noModalSince = null;
+}