@userflow-tech/react-native 0.5.0 → 0.6.0

package/src/anchors/fiber/detectAppFontFamily.ts

@@ -0,0 +1,400 @@
+/**
+ * Host-app font used when a theme is still on the default CSS stack.
+ *
+ * React Native does not inherit `fontFamily` from a parent view, so the family
+ * actually in use is the one set on `Text`. The primary font is whichever
+ * family appears on the most visible host text under the scan root (the SDK
+ * overlay is a sibling and is not walked). Embedded banners are inside that
+ * root; their hosts use a `userflow-` testID and are not votes, or the bar's
+ * own text would win. Text with no family counts as the platform font. Icon
+ * faces are not content. Nested text with no family does not vote: the
+ * ancestor text already does, and a child run must not add another vote for
+ * that family or for the platform font.
+ *
+ * A finished walk is cached until the visible screen changes, the reported
+ * screen changes, or `Userflow.reset()`. A walk that hits the node cap is not
+ * cached. Failures return null.
+ */
+import { getCurrentScreenLocation } from '../../screenTracker';
+
+import { fiberScanRoot } from './FiberScanRootStore';
+import {
+  type AnyFiber,
+  MAX_ANCESTOR_WALK,
+  getHostTypeName,
+  getLiveHostProps,
+  getReturn,
+  getStateNode,
+} from './fiberInternals';
+import { isFiberOnVisibleScreen, isScreenHostFiber } from './visibleScreens';
+import { walkVisibleFibers } from './walkVisibleFibers';
+
+const TEXT_HOST_NAMES = new Set(['Text', 'RCTText', 'RCTVirtualText']);
+
+/** SDK hosts inside the scan root (embedded banners). Not the app's font. */
+const SDK_HOST_TEST_ID_PREFIX = 'userflow-';
+
+/** Cycle guard for nested-text inheritance. Real trees are only a few levels deep. */
+const MAX_FONT_ANCESTORS = 50;
+
+const CSS_GENERIC_FAMILIES = new Set([
+  'sans-serif',
+  'serif',
+  'monospace',
+  'system-ui',
+  'ui-sans-serif',
+  'ui-serif',
+  'ui-monospace',
+  'ui-rounded',
+  'cursive',
+  'fantasy',
+  'emoji',
+  'math',
+  'fangsong',
+  'inherit',
+  'initial',
+  'unset',
+]);
+
+/** Short vector-icon families. Matched after stripping spaces and punctuation. */
+const ICON_FONT_EXACT = new Set([
+  'feather',
+  'antdesign',
+  'entypo',
+  'fontisto',
+  'simplelineicons',
+  'octicons',
+  'zocial',
+  'foundation',
+  'evilicons',
+]);
+
+interface FontCache {
+  instance: object;
+  /** null: countable text voted for the platform font, or nothing voted. */
+  family: string | null;
+  /** Visible screens this tally belongs to. Empty when the tree has none. */
+  screens: AnyFiber[];
+  /** `updateScreen` / router identity at tally time. Null before the first report. */
+  screenKey: string | null;
+}
+
+let cache: FontCache | null = null;
+
+/** Drop the cached app font. Called from `Userflow.reset()`. */
+export function resetDetectedAppFont(): void {
+  cache = null;
+}
+
+/**
+ * Family to apply, or null when the app font is the platform face or could
+ * not be read. Never throws.
+ */
+export function detectAppFontFamily(): string | null {
+  try {
+    const instance = fiberScanRoot.getInstance();
+    if (!instance || typeof instance !== 'object') return null;
+
+    const root = fiberScanRoot.getFiber();
+    if (!root) return null;
+    if (cache?.instance === instance && cacheStillCurrent(cache, root)) return cache.family;
+
+    const tally = tallyHostText(root);
+    if (tally.truncated) {
+      if (!tally.voted) return null;
+      return pickMajority(tally.counts);
+    }
+
+    const family = tally.voted ? pickMajority(tally.counts) : null;
+    cache = { instance, family, screens: tally.screens, screenKey: reportedScreenKey() };
+    return family;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Faces that appear in the builder's default system stack. A comma-separated
+ * list made only of these and generic keywords is that default, not a custom
+ * font. A single concrete name is still kept, including `Roboto`.
+ */
+const DEFAULT_STACK_FACES = new Set([
+  'blinkmacsystemfont',
+  'segoe ui',
+  'roboto',
+  'helvetica',
+  'arial',
+  'apple color emoji',
+  'segoe ui emoji',
+  'segoe ui symbol',
+]);
+
+/**
+ * A single React Native family name. CSS stacks and generic keywords are not
+ * usable as a host `fontFamily` — RN treats the whole string as one face.
+ * Theme stacks are parsed by {@link themeConcreteFontFamily}.
+ */
+export function concreteFontFamily(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const name = unwrapFontName(value);
+  if (!name || name.includes(',') || name.startsWith('-')) return undefined;
+  if (CSS_GENERIC_FAMILIES.has(name.toLowerCase())) return undefined;
+  return name;
+}
+
+/**
+ * Family a theme author chose. A single concrete name is kept. A comma-separated
+ * list keeps the first family that is not a generic or a default-stack face,
+ * so `"Source Sans Pro", sans-serif` stays Source Sans Pro and the system
+ * stack still resolves to undefined.
+ */
+export function themeConcreteFontFamily(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const parts = splitCssFamilies(value);
+  if (parts.length === 0) return undefined;
+  if (parts.length === 1) return concreteFontFamily(parts[0]);
+  for (const part of parts) {
+    const name = concreteFontFamily(part);
+    if (!name || DEFAULT_STACK_FACES.has(name.toLowerCase())) continue;
+    return name;
+  }
+  return undefined;
+}
+
+/**
+ * Split a CSS `font-family` list. A quote that opens a family is wrapping and
+ * is removed; a quote inside a name stays, so `Foo"Bar` is one family.
+ * Commas inside wrapping quotes are not separators.
+ */
+export function splitCssFamilies(value: string): string[] {
+  const parts: string[] = [];
+  let current = '';
+  let quote: '"' | "'" | null = null;
+  for (const char of value) {
+    if (quote) {
+      if (char === quote) quote = null;
+      else current += char;
+      continue;
+    }
+    if ((char === '"' || char === "'") && current.trim() === '') {
+      quote = char;
+      continue;
+    }
+    if (char === ',') {
+      const name = current.trim();
+      if (name) parts.push(name);
+      current = '';
+      continue;
+    }
+    current += char;
+  }
+  const name = current.trim();
+  if (name) parts.push(name);
+  return parts;
+}
+
+/** Generic keywords and vendor-prefixed faces stay unquoted in CSS. */
+export function isBareCssFamily(name: string): boolean {
+  return name.startsWith('-') || CSS_GENERIC_FAMILIES.has(name.toLowerCase());
+}
+
+export function isIconFontFamily(name: string): boolean {
+  const key = name.toLowerCase().replace(/[^a-z0-9]/g, '');
+  if (ICON_FONT_EXACT.has(key)) return true;
+  return (
+    key.startsWith('fontawesome') ||
+    key.startsWith('ionicons') ||
+    key.startsWith('materialcommunityicons') ||
+    key.startsWith('materialicons') ||
+    key.startsWith('materialsymbols')
+  );
+}
+
+interface Tally {
+  voted: boolean;
+  truncated: boolean;
+  screens: AnyFiber[];
+  counts: Map<string | null, number>;
+}
+
+function tallyHostText(root: AnyFiber): Tally {
+  const counts = new Map<string | null, number>();
+  const screens: AnyFiber[] = [];
+  let voted = false;
+  const { truncated } = walkVisibleFibers(root, (fiber) => {
+    try {
+      if (isScreenHostFiber(fiber)) screens.push(fiber);
+      if (!isTextHost(fiber)) return;
+      const vote = voteFor(fiber, root);
+      if (vote === 'skip') return;
+      voted = true;
+      counts.set(vote, (counts.get(vote) ?? 0) + 1);
+    } catch {
+      // One unreadable node is not a vote.
+    }
+  });
+  return { voted, truncated, screens, counts };
+}
+
+/** Usable family, null for the platform font, or skip for an icon face. */
+function voteFor(fiber: AnyFiber, root: AnyFiber): string | null | 'skip' {
+  if (isUnderSdkHost(fiber, root)) return 'skip';
+  const own = classifyFamily(readFontFamily(fiber));
+  if (own.kind === 'icon') return 'skip';
+  if (own.kind === 'family') return own.name;
+  if (own.kind === 'unusable') return null;
+  // No family of its own. The ancestor text node casts the vote for this run.
+  if (hasAncestorText(fiber, root)) return 'skip';
+  return null;
+}
+
+function hasAncestorText(fiber: AnyFiber, root: AnyFiber): boolean {
+  let parent = getReturn(fiber);
+  for (let depth = 0; parent && parent !== root && depth < MAX_FONT_ANCESTORS; depth += 1) {
+    if (isTextHost(parent)) return true;
+    parent = getReturn(parent);
+  }
+  return false;
+}
+
+function cacheStillCurrent(cached: FontCache, root: AnyFiber): boolean {
+  if (cached.screenKey !== reportedScreenKey()) return false;
+  if (cached.screens.length === 0) return true;
+  return cached.screens.every((screen) => screenStillCurrent(screen, root));
+}
+
+function screenStillCurrent(screen: AnyFiber, root: AnyFiber): boolean {
+  if (!isFiberOnVisibleScreen(screen)) return false;
+  let current: AnyFiber = screen;
+  for (let depth = 0; current && depth < MAX_ANCESTOR_WALK; depth += 1) {
+    if (current === root) return true;
+    current = getReturn(current);
+  }
+  return false;
+}
+
+function reportedScreenKey(): string | null {
+  const location = getCurrentScreenLocation();
+  if (!location) return null;
+  const key = 'path' in location ? location.path : location.screen;
+  return key || null;
+}
+
+type Classified =
+  | { kind: 'absent' }
+  | { kind: 'icon' }
+  | { kind: 'family'; name: string }
+  | { kind: 'unusable' };
+
+function classifyFamily(raw: string | undefined): Classified {
+  if (!raw) return { kind: 'absent' };
+  if (isIconFontFamily(raw)) return { kind: 'icon' };
+  const concrete = concreteFontFamily(raw);
+  if (!concrete) return { kind: 'unusable' };
+  return { kind: 'family', name: concrete };
+}
+
+function pickMajority(counts: Map<string | null, number>): string | null {
+  const platform = counts.get(null) ?? 0;
+  let bestName: string | null = null;
+  let bestCount = 0;
+  for (const [name, count] of counts) {
+    if (name == null) continue;
+    if (bestName == null || count > bestCount || (count === bestCount && name < bestName)) {
+      bestName = name;
+      bestCount = count;
+    }
+  }
+  if (bestName == null || platform > bestCount) return null;
+  return bestName;
+}
+
+function isUnderSdkHost(fiber: AnyFiber, root: AnyFiber): boolean {
+  let parent = getReturn(fiber);
+  for (let depth = 0; parent && parent !== root && depth < MAX_FONT_ANCESTORS; depth += 1) {
+    try {
+      const testID = getLiveHostProps(parent)?.testID;
+      if (typeof testID === 'string' && testID.startsWith(SDK_HOST_TEST_ID_PREFIX)) {
+        return true;
+      }
+    } catch {
+      // An unreadable ancestor is not an SDK host.
+    }
+    parent = getReturn(parent);
+  }
+  return false;
+}
+
+function isTextHost(fiber: AnyFiber): boolean {
+  const typeName = getHostTypeName(fiber);
+  if (typeName && TEXT_HOST_NAMES.has(typeName)) return true;
+  const elementType = fiber?.elementType;
+  if (typeof elementType === 'string' && TEXT_HOST_NAMES.has(elementType)) return true;
+  try {
+    const node = getStateNode(fiber) as {
+      viewConfig?: { uiViewClassName?: unknown };
+      __viewConfig?: { uiViewClassName?: unknown };
+    } | null;
+    const className = node?.viewConfig?.uiViewClassName ?? node?.__viewConfig?.uiViewClassName;
+    return typeof className === 'string' && TEXT_HOST_NAMES.has(className);
+  } catch {
+    return false;
+  }
+}
+
+function readFontFamily(fiber: AnyFiber): string | undefined {
+  try {
+    const flat = flattenFontStyle(getLiveHostProps(fiber)?.style);
+    const family = flat?.fontFamily;
+    if (typeof family !== 'string') return undefined;
+    const trimmed = family.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function flattenFontStyle(style: unknown): { fontFamily?: unknown } | null {
+  if (style == null || style === false) return null;
+  if (typeof style === 'number') return flattenRegisteredStyle(style);
+  if (Array.isArray(style)) {
+    let family: unknown;
+    for (const entry of style) {
+      const flat = flattenFontStyle(entry);
+      if (flat && flat.fontFamily != null) family = flat.fontFamily;
+    }
+    return { fontFamily: family };
+  }
+  if (typeof style === 'object') return style as { fontFamily?: unknown };
+  return null;
+}
+
+/**
+ * StyleSheet ids are numbers. Resolve them only when one shows up so tests
+ * that pass plain style objects do not load react-native.
+ */
+function flattenRegisteredStyle(styleId: number): { fontFamily?: unknown } | null {
+  try {
+    // Lazy require so unit tests that pass plain style objects do not load RN.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+    const { StyleSheet } = require('react-native') as {
+      StyleSheet?: { flatten?: (style: number) => { fontFamily?: unknown } | null | undefined };
+    };
+    const flat = StyleSheet?.flatten?.(styleId);
+    return flat ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function unwrapFontName(value: string): string {
+  const trimmed = value.trim();
+  if (trimmed.length >= 2) {
+    const first = trimmed[0];
+    const last = trimmed[trimmed.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return trimmed.slice(1, -1).trim();
+    }
+  }
+  return trimmed;
+}

package/src/anchors/fiber/visibleScreens.ts

@@ -64,6 +64,11 @@ function isScreenFiber(fiber: AnyFiber): boolean {
   return type !== undefined && SCREEN_TYPES.has(type);
 }
 
+/** Host screen the walk can key a cache on (`RNSScreen`, `RNSModalScreen`). */
+export function isScreenHostFiber(fiber: AnyFiber): boolean {
+  return isScreenFiber(fiber);
+}
+
 function isStackContainer(fiber: AnyFiber): boolean {
   const type = getHostTypeName(fiber);
   return type !== undefined && STACK_CONTAINER_TYPES.has(type);

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,
@@ -563,23 +564,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 {
-  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,
-  };
+  const style: TextStyle = {};
+  if (node.bold) style.fontWeight = '700';
+  if (node.italic) style.fontStyle = 'italic';
+  const decoration = textDecoration(node);
+  if (decoration) style.textDecorationLine = decoration;
+  if (node.small) style.fontSize = 12;
+  else if (node.sup) style.fontSize = 10;
+  if (node.color) style.color = node.color;
+  return style;
 }
 
 /** View wrapper so inline code padding/radius work reliably on Android. */

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/index.ts

@@ -22,6 +22,7 @@ import type {
 
 import './anchors/autoAnchor';
 import { anchorChangeTicker } from './anchors/anchorChangeTicker';
+import { resetDetectedAppFont } from './anchors/fiber/detectAppFontFamily';
 import { notifyAnchorScreenChange } from './anchors/resolveAnchorHost';
 import {
   setCustomScrollIntoView as setCustomScrollIntoViewConfig,
@@ -493,6 +494,7 @@ export const Userflow = {
   },
   /** Clears the current user identity and disconnects from Userflow. */
   async reset(): Promise<void> {
+    resetDetectedAppFont();
     resetClientConditionEngine();
     resetFlowSessionEngine();
     resetBannerSessionEngine();

package/src/runtime/BannerHost.tsx

@@ -49,15 +49,15 @@ export function BannerHost({
   if (edgeFilter && edge !== edgeFilter) return null;
 
   const floats = banner.overlay !== false;
-  const usesWebView = bannerNeedsWebView(banner, session.version.theme);
-  // Custom-css / eval WebViews paint in the overlay host (same as userflow.js). A second
+  const usesWebView = bannerNeedsWebView(banner);
+  // Custom banner WebViews paint in the overlay host (same as userflow.js). A second
   // WKWebView in the flow slot often fails to load after the first banner dismisses.
   const hostAsOverlay = floats || usesWebView;
   if ((placement === 'overlay') !== hostAsOverlay) return null;
 
   const pushLayoutEdge = placement === 'flow' && !hostAsOverlay ? edge : null;
   // Builder overlay:true floats below the status bar. Push-layout WebViews in the overlay
-  // host still paint safe-area chrome (overlay:false + custom CSS).
+  // host still paint safe-area chrome (overlay:false + custom banner).
   const overlaySafeEdge = hostAsOverlay && !floats ? edge : null;
 
   const surface = (