@userflow-tech/react-native 0.5.0 → 0.7.0

package/src/authoring/hitTest.ts

@@ -17,11 +17,16 @@ import {
 } from '../anchors/fiber/fiberInternals';
 import { createLazyHostFiberIndex, lookupHostFiber } from '../anchors/fiber/indexHostFibers';
 import { measureHostFiber } from '../anchors/fiber/measureHostFiber';
+import {
+  isOutsideModal,
+  locatePresentedModal,
+  rectInWindow,
+  type PresentedModal,
+} from '../anchors/fiber/presentedModal';
 import { readHostText } from '../anchors/fiber/readHostContent';
 import {
   clipToScrollViewports,
   fiberIsUnder,
-  topmostVisibleModalHost,
   type VisibleRect,
 } from '../anchors/fiber/visibleRect';
 import { isFiberOnVisibleScreen } from '../anchors/fiber/visibleScreens';
@@ -61,7 +66,17 @@ export interface HitCandidate {
 
 export type MeasureInstance = (inst: AutoAnchorInstance) => Promise<HitRect | null>;
 export type InstanceFilter = (inst: AutoAnchorInstance) => boolean;
-export type HostAtPoint = (x: number, y: number) => Promise<AnyFiber | null>;
+/**
+ * Why a tap on a presented modal found nothing: the modal cannot be placed in
+ * the window, or the tap was outside it.
+ */
+export type ModalMiss = 'unplaceable' | 'outside';
+
+export type HostAtPoint = (
+  x: number,
+  y: number,
+  presented?: PresentedModal | null,
+) => Promise<AnyFiber | null>;
 
 const MEASURE_TIMEOUT_MS = 400;
 
@@ -259,10 +274,14 @@ function targetForHost(
  * {@link FiberScanRoot}. Hosts above it (the provider's own wrappers) are never
  * resolvable at play time. Empty when `host` is on a covered screen: its
  * ancestors above the navigator are not what was tapped.
+ *
+ * The walk also stops at `boundary`, a presented modal: hosts above it are
+ * drawn beneath the modal, not around what was tapped.
  */
 export function candidateChain(
   host: AnyFiber,
   byFiber: Map<AnyFiber, AutoAnchorInstance>,
+  boundary?: AnyFiber | null,
 ): PickTarget[] {
   const chain: PickTarget[] = [];
   if (!isFiberOnVisibleScreen(host)) return chain;
@@ -281,6 +300,7 @@ export function candidateChain(
       seenFibers.add(target.fiber);
       chain.push(target);
     }
+    if (boundary && (current === boundary || current === getAlternate(boundary))) break;
     current = getReturn(current);
   }
   return chain;
@@ -335,16 +355,30 @@ export function defaultCandidateIndex(candidates: HitCandidate[]): number {
   return index >= 0 ? index : 0;
 }
 
+function targetFiber(target: PickTarget): AnyFiber | null {
+  return target.source === 'fiber'
+    ? target.fiber
+    : fiberFromPublicInstanceSafe(target.instance.ref.current);
+}
+
 async function clipCandidate(candidate: HitCandidate): Promise<HitCandidate | null> {
-  const fiber =
-    candidate.target.source === 'fiber'
-      ? candidate.target.fiber
-      : fiberFromPublicInstanceSafe(candidate.target.instance.ref.current);
+  const fiber = targetFiber(candidate.target);
   const clipped = await clipToScrollViewports(fiber, candidate.rect as VisibleRect);
   if (!clipped) return null;
   return { ...candidate, rect: clipped, area: areaOf(clipped) };
 }
 
+/** `candidate` in window coordinates. A presented modal's content is measured in the modal's space. */
+function candidateInWindow(
+  candidate: HitCandidate,
+  presented: PresentedModal | null,
+): HitCandidate {
+  if (!presented) return candidate;
+  const fiber = targetFiber(candidate.target);
+  if (fiber && !fiberIsUnder(fiber, presented.host)) return candidate;
+  return { ...candidate, rect: rectInWindow(candidate.rect, presented) };
+}
+
 /**
  * Hit-test window coordinates.
  *
@@ -353,6 +387,12 @@ async function clipCandidate(candidate: HitCandidate): Promise<HitCandidate | nu
  * lands on a covered screen. A visible native hit with no identifiable
  * ancestor returns no candidates: geometry ignores stacking order and would
  * offer whatever lies underneath the tap.
+ *
+ * While a modal is presented, only its content is a candidate, and candidate
+ * rects come back in window coordinates. A modal that cannot be placed in the
+ * window yields no candidates rather than a guess, and so does a tap outside
+ * the modal, on the screen it covers. Both call `onModalMiss` so the caller
+ * can say why.
  */
 export async function hitTestAt(
   x: number,
@@ -362,6 +402,7 @@ export async function hitTestAt(
     measure?: MeasureInstance;
     instances?: AutoAnchorInstance[];
     hostAtPoint?: HostAtPoint;
+    onModalMiss?: (miss: ModalMiss) => void;
   },
 ): Promise<HitCandidate[]> {
   const filter = opts?.instanceFilter ?? createVisibleInstanceFilter();
@@ -369,21 +410,33 @@ export async function hitTestAt(
   const pool = (opts?.instances ?? autoAnchorRegistry.allInstances()).filter(filter);
   autoAnchorRegistry.refreshLiveContent(pool);
 
+  const presented = await locatePresentedModal(fiberScanRoot.getFiber());
+  if (presented && !presented.origin) {
+    opts?.onModalMiss?.('unplaceable');
+    return [];
+  }
+  if (presented && isOutsideModal(x, y, presented)) {
+    opts?.onModalMiss?.('outside');
+    return [];
+  }
+
   const injected = opts?.hostAtPoint;
   const locate = injected ?? (opts?.measure === undefined ? hostAtPoint : null);
   if (locate) {
     try {
-      const host = await locate(x, y);
+      const host = await locate(x, y, presented);
       if (host && isFiberOnVisibleScreen(host)) {
-        const chain = candidateChain(host, registryMap(pool));
-        return chain.length > 0 ? candidatesFromChain(chain, measure) : [];
+        const chain = candidateChain(host, registryMap(pool), presented?.host);
+        if (chain.length === 0) return [];
+        const candidates = await candidatesFromChain(chain, measure);
+        return candidates.map((candidate) => candidateInWindow(candidate, presented));
       }
     } catch {
       // Native hit-testing is optional; geometry still runs.
     }
   }
 
-  return geometryHits(x, y, pool, measure);
+  return geometryHits(x, y, pool, measure, presented);
 }
 
 async function geometryHits(
@@ -391,9 +444,10 @@ async function geometryHits(
   y: number,
   pool: AutoAnchorInstance[],
   measure: MeasureInstance,
+  presented: PresentedModal | null,
 ): Promise<HitCandidate[]> {
   const root = fiberScanRoot.getFiber();
-  const modal = root ? topmostVisibleModalHost(root) : null;
+  const modal = presented?.host ?? null;
   const byFiber = registryMap(pool);
 
   const scoped = modal
@@ -426,14 +480,35 @@ async function geometryHits(
       if (!raw) return null;
       const clipped = await clipCandidate({ target, rect: raw, area: areaOf(raw) });
       if (!clipped) return null;
-      if (!pointInRect(x, y, clipped.rect)) return null;
-      return clipped;
+      const placed = candidateInWindow(clipped, presented);
+      if (!pointInRect(x, y, placed.rect)) return null;
+      return placed;
     }),
   );
 
   return measured.filter((c): c is HitCandidate => c != null).sort((a, b) => a.area - b.area);
 }
 
+/**
+ * `candidates` measured again, for when the screen may have moved under a
+ * selection: the keyboard opening or closing resizes or moves a sheet. Null
+ * when one can no longer be measured, or its modal can no longer be placed,
+ * so the caller drops the selection rather than keep a stale rect.
+ */
+export async function remeasureCandidates(
+  candidates: HitCandidate[],
+  measure: MeasureInstance = measureInstanceRect,
+): Promise<HitCandidate[] | null> {
+  const presented = await locatePresentedModal(fiberScanRoot.getFiber());
+  if (presented && !presented.origin) return null;
+  const measured = await candidatesFromChain(
+    candidates.map((candidate) => candidate.target),
+    measure,
+  );
+  if (measured.length !== candidates.length) return null;
+  return measured.map((candidate) => candidateInWindow(candidate, presented));
+}
+
 /** Cycle to the next-larger containing candidate (wraps). */
 export function nextContainingIndex(candidates: HitCandidate[], currentIndex: number): number {
   if (candidates.length === 0) return -1;

package/src/authoring/hostAtPoint.ts

@@ -11,9 +11,10 @@
  *   (see `FindNodeAtPointTest.overlappingViewsWithParentPointerEventsNone`).
  * - Scroll views subtract `contentOffset` in `getContentOriginOffset`, so
  *   content scrolled out of the viewport is not a hit.
- * - Modal content lives under `ModalHostView` in the same shadow tree, but
- *   its frame is relative to the modal window. If the root hit misses the
- *   visible modal's subtree, retry rooted at that modal.
+ * - Content of a presented modal (`RNSModalScreen`, `ModalHostView`) lives in
+ *   the same shadow tree, but Fabric lays it out relative to the modal. While
+ *   one is presented, everything else is drawn beneath it, so only the modal is
+ *   hit, with the point moved into its space (see `presentedModal.ts`).
  * - Screens a navigator covers stay laid out in the shadow tree, on top of the
  *   visible one, and react-native-screens clears their zIndex, so the
  *   last-mounted sibling wins. After visiting a later tab, a tap on an earlier
@@ -33,7 +34,11 @@ import {
 import { nearestHostDescendant } from '../anchors/fiber/findAnchorFiber';
 import { createHostFiberIndex } from '../anchors/fiber/indexHostFibers';
 import { measureHostFiber } from '../anchors/fiber/measureHostFiber';
-import { fiberIsUnder, topmostVisibleModalHost } from '../anchors/fiber/visibleRect';
+import {
+  locatePresentedModal,
+  type Point,
+  type PresentedModal,
+} from '../anchors/fiber/presentedModal';
 import { isFiberOnVisibleScreen, screensCoveringFiber } from '../anchors/fiber/visibleScreens';
 
 const HIT_TIMEOUT_MS = 400;
@@ -167,11 +172,20 @@ function originInParent(
   }, none);
 }
 
-async function hitFabric(rootHost: AnyFiber, x: number, y: number): Promise<AnyFiber | null> {
+/**
+ * `rootOrigin` is where `rootHost` sits in the point's space, for a root that
+ * `measureInWindow` cannot place: a presented modal, whose space is its own.
+ */
+async function hitFabric(
+  rootHost: AnyFiber,
+  x: number,
+  y: number,
+  rootOrigin?: Point,
+): Promise<AnyFiber | null> {
   const manager = fabricManager();
   const node = shadowNodeFromHost(rootHost);
   if (!manager || node == null) return null;
-  const origin = await measureOrigin(rootHost);
+  const origin = rootOrigin ?? (await measureOrigin(rootHost));
   if (!origin) return null;
   const inParent = await originInParent(manager, node);
   const handle = await withTimeout<unknown>((settle) => {
@@ -199,25 +213,43 @@ async function hitPaper(rootHost: AnyFiber, x: number, y: number): Promise<AnyFi
   return index.byNativeTag.get(nativeTag) ?? null;
 }
 
-async function hitUnder(rootHost: AnyFiber, x: number, y: number): Promise<AnyFiber | null> {
-  const fabric = await hitFabric(rootHost, x, y);
+/**
+ * `inModalSpace`: the point is in a presented modal's own space. Paper's
+ * lookup takes window points, so it would land elsewhere there (and
+ * bridgeless logs an error when it finds nothing).
+ */
+async function hitUnder(
+  rootHost: AnyFiber,
+  x: number,
+  y: number,
+  rootOrigin: Point | undefined,
+  inModalSpace: boolean,
+): Promise<AnyFiber | null> {
+  const fabric = await hitFabric(rootHost, x, y, rootOrigin);
   if (fabric) return fabric;
+  if (inModalSpace) return null;
   return hitPaper(rootHost, x, y);
 }
 
-/** {@link hitUnder}, re-hit from the visible screen while the hit lands on a covered one. */
+/**
+ * {@link hitUnder}, re-hit from the visible screen while the hit lands on a
+ * covered one. A `rootOrigin` means the point is in a presented modal's space;
+ * screens inside the modal measure in that space too.
+ */
 async function hitOnVisibleScreen(
   rootHost: AnyFiber,
   x: number,
   y: number,
+  rootOrigin?: Point,
 ): Promise<AnyFiber | null> {
-  let hit = await hitUnder(rootHost, x, y);
+  const inModalSpace = rootOrigin !== undefined;
+  let hit = await hitUnder(rootHost, x, y, rootOrigin, inModalSpace);
   for (let attempt = 0; hit && attempt < MAX_COVERED_SCREEN_RETRIES; attempt += 1) {
     const screens = screensCoveringFiber(hit);
     if (screens.length === 0) return hit;
     let next: AnyFiber | null = null;
     for (const screen of screens) {
-      next = await hitUnder(screen, x, y);
+      next = await hitUnder(screen, x, y, undefined, inModalSpace);
       if (next) break;
     }
     hit = next;
@@ -226,22 +258,36 @@ async function hitOnVisibleScreen(
   return hit && isFiberOnVisibleScreen(hit) ? hit : null;
 }
 
+const MODAL_SPACE_ORIGIN: Point = { x: 0, y: 0 };
+
 /**
  * Host fiber drawn on top at window coordinates, or null when neither Fabric
  * nor Paper hit-testing is available.
+ *
+ * While a modal is presented, only its content can be hit, and nothing is
+ * when the modal cannot be placed in the window. Pass `presented` when the
+ * caller has already looked it up.
  */
-export async function hostAtPoint(x: number, y: number): Promise<AnyFiber | null> {
+export async function hostAtPoint(
+  x: number,
+  y: number,
+  presented?: PresentedModal | null,
+): Promise<AnyFiber | null> {
   const root = fiberScanRoot.getFiber();
   if (!root) return null;
-  const rootHost = nearestHostDescendant(root);
-  if (!rootHost) return null;
 
-  let hit = await hitOnVisibleScreen(rootHost, x, y);
-  const modal = topmostVisibleModalHost(root);
-  const modalHost = modal ? nearestHostDescendant(modal) : null;
-  if (modalHost && (!hit || !fiberIsUnder(hit, modal))) {
-    const modalHit = await hitOnVisibleScreen(modalHost, x, y);
-    if (modalHit) hit = modalHit;
+  const modal = presented === undefined ? await locatePresentedModal(root) : presented;
+  if (modal) {
+    if (!modal.origin) return null;
+    return hitOnVisibleScreen(
+      modal.host,
+      x - modal.origin.x,
+      y - modal.origin.y,
+      modal.modalSpace ? MODAL_SPACE_ORIGIN : undefined,
+    );
   }
-  return hit;
+
+  const rootHost = nearestHostDescendant(root);
+  if (!rootHost) return null;
+  return hitOnVisibleScreen(rootHost, x, y);
 }

package/src/content/BannerStepButton.tsx

@@ -14,6 +14,7 @@ import {
 } from '../surfaces/resolveBannerTheme';
 
 import { resolveBannerButtonChrome } from './resolveBannerButtonChrome';
+import { resolveContentFontFamily } from './resolveContentFontFamily';
 import { stepButtonContainerStyle } from './resolveStepButtonChrome';
 
 export interface BannerStepButtonProps {
@@ -57,7 +58,7 @@ export function BannerStepButton({
           styles.label,
           {
             color: chrome.fontColor,
-            fontFamily: theme.fontFamily || undefined,
+            fontFamily: resolveContentFontFamily(theme),
             fontSize: chrome.fontSize,
             fontWeight: chrome.fontWeight,
             ...labelMetrics(chrome.lineHeight),

package/src/content/RichContentRenderer.tsx

@@ -19,6 +19,7 @@ import {
 } from './deserialize';
 import { resolveImageFrame } from './imageLayout';
 import { migrateFlowBlocksIntoContent } from './migrateFlowBlocks';
+import { resolveContentFontFamily } from './resolveContentFontFamily';
 import {
   ROOT_CONTENT_GAP,
   WEB_CODE_BG_ALPHA,
@@ -292,7 +293,8 @@ function TextBlock({
     | Heading1Element
     | Heading2Element
     | { align?: TextAlign | null; children: RichContentInlineNode[] };
-  style: TextStyle;
+  // React Native 0.88's StyleSheet.flatten can return null or undefined.
+  style: TextStyle | null | undefined;
   accessibilityRole?: 'header' | 'text';
 }): React.ReactElement {
   return (
@@ -563,22 +565,27 @@ function RenderedButton({
 }
 
 function baseText(theme: ThemeFragment): TextStyle {
+  const fontFamily = resolveContentFontFamily(theme);
   return {
     color: theme.fontColor,
-    fontFamily: theme.fontFamily || undefined,
     fontSize: theme.fontSize,
+    // Omit the key when unset. An explicit `undefined` is flattened to null,
+    // and RN treats that as "use the default face" rather than keeping a
+    // family set earlier on the same run.
+    ...(fontFamily != null ? { fontFamily } : {}),
   };
 }
 
 function markStyle(node: AbstractRichContentTextFormatting): TextStyle {
+  const decoration = textDecoration(node);
+  const fontSize = node.small ? 12 : node.sup ? 10 : undefined;
+  // Built in one literal: React Native 0.88 types TextStyle as readonly.
   return {
-    fontWeight: node.bold ? '700' : undefined,
-    fontStyle: node.italic ? 'italic' : undefined,
-    textDecorationLine: textDecoration(node),
-    fontSize: node.small ? 12 : node.sup ? 10 : undefined,
-    color: node.color || undefined,
-    // Inline `code` uses View chrome via RenderedText / RenderedAttribute.
-    fontFamily: node.code ? monoFontFamily() : undefined,
+    ...(node.bold ? { fontWeight: '700' as const } : null),
+    ...(node.italic ? { fontStyle: 'italic' as const } : null),
+    ...(decoration ? { textDecorationLine: decoration } : null),
+    ...(fontSize != null ? { fontSize } : null),
+    ...(node.color ? { color: node.color } : null),
   };
 }
 

package/src/content/StepButton.tsx

@@ -9,6 +9,7 @@ import type { TextStyle } from 'react-native';
 import { Platform, Pressable, StyleSheet, Text } from 'react-native';
 
 import { isPrimaryButtonAppearance } from './buttonAppearance';
+import { resolveContentFontFamily } from './resolveContentFontFamily';
 import { resolveStepButtonChrome, stepButtonContainerStyle } from './resolveStepButtonChrome';
 
 export interface StepButtonProps {
@@ -45,7 +46,7 @@ export function StepButton({
           styles.label,
           {
             color: chrome.fontColor,
-            fontFamily: theme.fontFamily || undefined,
+            fontFamily: resolveContentFontFamily(theme),
             fontSize: chrome.fontSize,
             fontWeight: chrome.fontWeight,
             ...labelMetrics(chrome.lineHeight),

package/src/content/resolveContentFontFamily.ts

@@ -0,0 +1,119 @@
+/**
+ * Font family for SDK content text.
+ *
+ * A single concrete theme family is kept. A comma-separated custom list keeps
+ * the first family that is not part of the default system stack. That stack,
+ * generics, and empty values use the detected app font, or omit `fontFamily`
+ * so the platform face renders with no warning.
+ */
+import type { ThemeFragment } from '@userflow-tech/protocol';
+
+import {
+  concreteFontFamily,
+  detectAppFontFamily,
+  isBareCssFamily,
+  isIconFontFamily,
+  splitCssFamilies,
+  themeConcreteFontFamily,
+} from '../anchors/fiber/detectAppFontFamily';
+
+export type AppFontDetector = () => string | null;
+
+const CSS_FONT_FALLBACK = 'system-ui, sans-serif';
+
+export function resolveContentFontFamily(
+  theme: ThemeFragment,
+  detect: AppFontDetector = detectAppFontFamily,
+): string | undefined {
+  return explicitThemeFamily(theme) ?? detectedFamily(detect);
+}
+
+/**
+ * CSS `font-family` for banner WebViews. Names are quoted so a multi-word
+ * family stays one face. A substituted app face keeps a platform fallback for
+ * when the WebView cannot resolve it.
+ */
+export function contentFontFamilyCss(
+  theme: ThemeFragment,
+  detect: AppFontDetector = detectAppFontFamily,
+): string {
+  const authored = explicitThemeCss(theme);
+  if (authored) return authored;
+  const family = detectedFamily(detect);
+  if (!family) return CSS_FONT_FALLBACK;
+  return `${quoteCssFamily(family)}, ${CSS_FONT_FALLBACK}`;
+}
+
+/**
+ * `@font-face` rule that publishes the native family name inside the WebView.
+ *
+ * One regular face only. A weight range would make that static file match
+ * bold, and an italic rule with the same upright source would match italic,
+ * so the WebView would not synthesize either. `local()` is the family native
+ * text already uses. A `file://` source is not included: iOS treats that URL
+ * as a navigation and replaces the banner page.
+ */
+export function contentFontFaceCss(
+  theme: ThemeFragment,
+  detect: AppFontDetector = detectAppFontFamily,
+): string {
+  const family = resolvedFamily(theme, detect);
+  if (!family) return '';
+  const quoted = quoteCssFamily(family);
+  return `@font-face{font-family:${quoted};src:local(${quoted});font-weight:400;font-style:normal;font-display:swap;}`;
+}
+
+/**
+ * Re-applies the banner face after theme custom.css. Equal-specificity rules
+ * in that stylesheet would otherwise replace it with a web font the WebView
+ * has not loaded. Code stays mono, including `<strong>`, `<em>`, and `<u>`
+ * wrapped inside `<code>`.
+ */
+export function bannerContentFontLockCss(
+  theme: ThemeFragment,
+  detect: AppFontDetector = detectAppFontFamily,
+): string {
+  const family = contentFontFamilyCss(theme, detect);
+  return (
+    `.userflowjs-banner-root,.userflowjs-banner-root *:not(code):not(pre){font-family:${family};}` +
+    `.userflowjs-banner-root code,.userflowjs-banner-root pre,` +
+    `.userflowjs-banner-root code *,.userflowjs-banner-root pre *{font-family:ui-monospace,Menlo,monospace;}`
+  );
+}
+
+function resolvedFamily(theme: ThemeFragment, detect: AppFontDetector): string | undefined {
+  return explicitThemeFamily(theme) ?? detectedFamily(detect);
+}
+
+function explicitThemeFamily(theme: ThemeFragment): string | undefined {
+  return themeConcreteFontFamily(theme.fontFamily);
+}
+
+/** Authored theme list, quoted so a multi-word family stays one face. */
+function explicitThemeCss(theme: ThemeFragment): string | undefined {
+  const native = explicitThemeFamily(theme);
+  if (!native) return undefined;
+  const parts = splitCssFamilies(theme.fontFamily);
+  if (parts.length <= 1) return quoteCssFamily(native);
+  return parts.map((part) => (isBareCssFamily(part) ? part : quoteCssFamily(part))).join(', ');
+}
+
+function detectedFamily(detect: AppFontDetector): string | undefined {
+  try {
+    const detected = detect();
+    if (typeof detected !== 'string') return undefined;
+    const concrete = concreteFontFamily(detected);
+    if (!concrete || isIconFontFamily(concrete)) return undefined;
+    return concrete;
+  } catch {
+    return undefined;
+  }
+}
+
+function quoteCssFamily(name: string): string {
+  return `"${escapeCssFamily(name)}"`;
+}
+
+function escapeCssFamily(name: string): string {
+  return name.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}

package/src/deepLinking.ts

@@ -27,7 +27,8 @@ export interface DeepLinkingDeps {
   startFlowWithToken: DeepLinkStartFlowWithToken;
   /** Optional Linking overrides for tests. */
   linking?: {
-    getInitialURL: () => Promise<string | null>;
+    // React Native 0.88 adds undefined to the result.
+    getInitialURL: () => Promise<string | null | undefined>;
     addEventListener: (
       type: 'url',
       handler: (event: { url: string }) => void,