@userflow-tech/react-native 0.2.0 → 0.3.1

package/lib/module/runtime/EmbedBannerPlaceholder.js

@@ -0,0 +1,94 @@
+"use strict";
+
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { elementPickerController } from "../authoring/elementPickerController.js";
+import { BannerSurface } from "../surfaces/BannerSurface.js";
+import { bannerOverlayHostPadding } from "../surfaces/bannerBarLayout.js";
+import { useUserflowSafeAreaInsets } from "../surfaces/safeArea.js";
+import { SdkErrorBoundary } from "./SdkErrorBoundary.js";
+import { BannerEngineContext } from "./bannerEngineContext.js";
+import { embedBannerPlaceholderId, warnBannerOnce } from "./bannerPlacement.js";
+import { registerEmbedBannerPlaceholder } from "./embedBannerRegistry.js";
+import { useBannerSession } from "./useBannerSession.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Host slot for an element-mode banner (`ELEMENT_BEFORE`, `ELEMENT_AFTER`,
+ * `ELEMENT_FIRST`, `ELEMENT_LAST`). Mount it where the bar should appear.
+ * Until a matching banner is active the slot renders nothing, so it takes no
+ * space and is not visible. Top and bottom bars ignore this slot.
+ * `overlay: false` keeps the bar in layout; `overlay: true` paints it over
+ * the content below the slot.
+ */
+export function EmbedBannerPlaceholder({
+  id
+}) {
+  const engine = React.useContext(BannerEngineContext);
+  const placeholderId = id.trim();
+  const session = useBannerSession(engine);
+  const insets = useUserflowSafeAreaInsets();
+  const [pickerActive, setPickerActive] = React.useState(() => elementPickerController.getState().active);
+  React.useEffect(() => {
+    return elementPickerController.subscribe(next => {
+      setPickerActive(next.active);
+    });
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!placeholderId) {
+      warnBannerOnce('embed-banner-empty-id', 'Userflow: EmbedBannerPlaceholder requires an id');
+      return;
+    }
+    return registerEmbedBannerPlaceholder(placeholderId);
+  }, [placeholderId]);
+  React.useEffect(() => {
+    if (engine) return;
+    warnBannerOnce('embed-banner-outside-provider', 'Userflow: EmbedBannerPlaceholder must be rendered inside UserflowProvider');
+  }, [engine]);
+
+  // No host view until a banner is actually shown. An empty slot would still
+  // participate in flex gap and stretch layout.
+  if (!engine || !placeholderId || pickerActive || !session) return null;
+  const banner = session.version.banner ?? null;
+  if (!banner || embedBannerPlaceholderId(banner) !== placeholderId) return null;
+  const bar = /*#__PURE__*/_jsx(BannerSurface, {
+    session: session,
+    onActions: actions => engine.handleActions(actions),
+    onDismiss: endReason => {
+      void engine.endBanner(endReason);
+    }
+  });
+  return /*#__PURE__*/_jsx(SdkErrorBoundary, {
+    scope: "banner",
+    resetKey: session.id,
+    children: banner.overlay !== false ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      testID: "userflow-embed-banner",
+      style: styles.overlaySlot,
+      children: /*#__PURE__*/_jsx(View, {
+        pointerEvents: "box-none",
+        style: [styles.overlayBar, bannerOverlayHostPadding(insets)],
+        children: bar
+      })
+    }) : /*#__PURE__*/_jsx(View, {
+      testID: "userflow-embed-banner",
+      style: styles.slot,
+      children: bar
+    })
+  });
+}
+const styles = StyleSheet.create({
+  slot: {
+    alignSelf: 'stretch'
+  },
+  overlaySlot: {
+    height: 0,
+    alignSelf: 'stretch'
+  },
+  overlayBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0
+  }
+});
+//# sourceMappingURL=EmbedBannerPlaceholder.js.map

package/lib/module/runtime/EmbedBannerPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","elementPickerController","BannerSurface","bannerOverlayHostPadding","useUserflowSafeAreaInsets","SdkErrorBoundary","BannerEngineContext","embedBannerPlaceholderId","warnBannerOnce","registerEmbedBannerPlaceholder","useBannerSession","jsx","_jsx","EmbedBannerPlaceholder","id","engine","useContext","placeholderId","trim","session","insets","pickerActive","setPickerActive","useState","getState","active","useEffect","subscribe","next","useLayoutEffect","banner","version","bar","onActions","actions","handleActions","onDismiss","endReason","endBanner","scope","resetKey","children","overlay","pointerEvents","testID","style","styles","overlaySlot","overlayBar","slot","create","alignSelf","height","position","left","right","top"],"sourceRoot":"../../../src","sources":["runtime/EmbedBannerPlaceholder.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/runtime/SdkErrorBoundary.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import * as React from 'react';
+import { reportSdkError } from "./reportSdkError.js";
+/**
+ * Contains React render/lifecycle errors in SDK UI so they cannot unmount the
+ * host app tree. Event handlers and async work are not covered — those use
+ * {@link isolateSync} / {@link isolateAsync}.
+ */
+export class SdkErrorBoundary extends React.Component {
+  state = {
+    hasError: false,
+    resetKey: this.props.resetKey,
+    failedKeys: []
+  };
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.resetKey === state.resetKey) {
+      return null;
+    }
+    const nextKey = props.resetKey ?? '';
+    if (nextKey !== '' && state.failedKeys.includes(nextKey)) {
+      return {
+        hasError: true,
+        resetKey: props.resetKey
+      };
+    }
+    return {
+      hasError: false,
+      resetKey: props.resetKey
+    };
+  }
+  componentDidCatch(error, info) {
+    reportSdkError(this.props.scope, error, info.componentStack);
+    this.props.onError?.(error);
+    const key = this.props.resetKey;
+    if (!key) {
+      return;
+    }
+    this.setState(prev => prev.failedKeys.includes(key) ? null : {
+      failedKeys: [...prev.failedKeys, key]
+    });
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+//# sourceMappingURL=SdkErrorBoundary.js.map

package/lib/module/runtime/SdkErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","reportSdkError","SdkErrorBoundary","Component","state","hasError","resetKey","props","failedKeys","getDerivedStateFromError","getDerivedStateFromProps","nextKey","includes","componentDidCatch","error","info","scope","componentStack","onError","key","setState","prev","render","children"],"sourceRoot":"../../../src","sources":["runtime/SdkErrorBoundary.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,cAAc,QAAQ,qBAAkB;AAuBjD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,SAASF,KAAK,CAACG,SAAS,CAGnD;EACSC,KAAK,GAA0B;IACtCC,QAAQ,EAAE,KAAK;IACfC,QAAQ,EAAE,IAAI,CAACC,KAAK,CAACD,QAAQ;IAC7BE,UAAU,EAAE;EACd,CAAC;EAED,OAAOC,wBAAwBA,CAAA,EAAmC;IAChE,OAAO;MAAEJ,QAAQ,EAAE;IAAK,CAAC;EAC3B;EAEA,OAAOK,wBAAwBA,CAC7BH,KAA4B,EAC5BH,KAA4B,EACW;IACvC,IAAIG,KAAK,CAACD,QAAQ,KAAKF,KAAK,CAACE,QAAQ,EAAE;MACrC,OAAO,IAAI;IACb;IACA,MAAMK,OAAO,GAAGJ,KAAK,CAACD,QAAQ,IAAI,EAAE;IACpC,IAAIK,OAAO,KAAK,EAAE,IAAIP,KAAK,CAACI,UAAU,CAACI,QAAQ,CAACD,OAAO,CAAC,EAAE;MACxD,OAAO;QAAEN,QAAQ,EAAE,IAAI;QAAEC,QAAQ,EAAEC,KAAK,CAACD;MAAS,CAAC;IACrD;IACA,OAAO;MAAED,QAAQ,EAAE,KAAK;MAAEC,QAAQ,EAAEC,KAAK,CAACD;IAAS,CAAC;EACtD;EAESO,iBAAiBA,CAACC,KAAY,EAAEC,IAAqB,EAAQ;IACpEd,cAAc,CAAC,IAAI,CAACM,KAAK,CAACS,KAAK,EAAEF,KAAK,EAAEC,IAAI,CAACE,cAAc,CAAC;IAC5D,IAAI,CAACV,KAAK,CAACW,OAAO,GAAGJ,KAAK,CAAC;IAC3B,MAAMK,GAAG,GAAG,IAAI,CAACZ,KAAK,CAACD,QAAQ;IAC/B,IAAI,CAACa,GAAG,EAAE;MACR;IACF;IACA,IAAI,CAACC,QAAQ,CAAEC,IAAI,IACjBA,IAAI,CAACb,UAAU,CAACI,QAAQ,CAACO,GAAG,CAAC,GAAG,IAAI,GAAG;MAAEX,UAAU,EAAE,CAAC,GAAGa,IAAI,CAACb,UAAU,EAAEW,GAAG;IAAE,CACjF,CAAC;EACH;EAESG,MAAMA,CAAA,EAAoB;IACjC,IAAI,IAAI,CAAClB,KAAK,CAACC,QAAQ,EAAE;MACvB,OAAO,IAAI;IACb;IACA,OAAO,IAAI,CAACE,KAAK,CAACgB,QAAQ;EAC5B;AACF","ignoreList":[]}

package/lib/module/runtime/TargetPressBridge.js

@@ -2,8 +2,11 @@
 
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
+import { elementTapMonitor } from "../anchors/elementTapMonitor.js";
+import { touchBelongsToEvent, touchTargetFiber } from "../anchors/fiber/touchTargetFiber.js";
 import { targetPressMonitor } from "../anchors/targetPressMonitor.js";
 import { changedTouchPoints, forEachChangedTouch } from "./changedTouchPoints.js";
+import { isolateSync } from "./isolateCall.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Wraps app content so tooltip target taps can be observed without stealing
@@ -12,7 +15,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * The Userflow overlay is a sibling above the app, so hole Pressables would
  * intercept presses. Instead we hit-test bubbled `onTouchStart` / `onTouchEnd`
- * against the rect registered by {@link TooltipSurface}.
+ * against the rect registered by {@link TooltipSurface}, and — while an
+ * element click condition is tracked — against the fiber under the finger.
  *
  * Preview-chrome double taps are observed by `DoubleTapBridge` around the
  * whole provider tree — this bridge never sees overlay touches.
@@ -23,24 +27,38 @@ export function TargetPressBridge({
   children
 }) {
   const onTouchStart = React.useCallback(event => {
-    forEachChangedTouch(event, (identifier, pageX, pageY) => {
-      targetPressMonitor.handleTouchStart(identifier, pageX, pageY);
+    isolateSync('target-press', () => {
+      const observingTaps = elementTapMonitor.subscriberCount > 0;
+      forEachChangedTouch(event, (identifier, pageX, pageY) => {
+        targetPressMonitor.handleTouchStart(identifier, pageX, pageY);
+        if (!observingTaps || !touchBelongsToEvent(event, identifier)) return;
+        elementTapMonitor.handleTouchStart(identifier, pageX, pageY, touchTargetFiber(event, identifier));
+      });
     });
   }, []);
   const onTouchEnd = React.useCallback(event => {
-    forEachChangedTouch(event, (identifier, pageX, pageY) => {
-      targetPressMonitor.handleTouchEnd(identifier, pageX, pageY);
+    isolateSync('target-press', () => {
+      const observingTaps = elementTapMonitor.subscriberCount > 0;
+      forEachChangedTouch(event, (identifier, pageX, pageY) => {
+        targetPressMonitor.handleTouchEnd(identifier, pageX, pageY);
+        if (!observingTaps) return;
+        elementTapMonitor.handleTouchEnd(identifier, pageX, pageY);
+      });
     });
   }, []);
   const onTouchCancel = React.useCallback(event => {
-    const points = changedTouchPoints(event);
-    if (points.length === 0) {
-      targetPressMonitor.cancelTouch();
-      return;
-    }
-    for (const touch of points) {
-      targetPressMonitor.cancelTouch(touch.identifier);
-    }
+    isolateSync('target-press', () => {
+      const points = changedTouchPoints(event);
+      if (points.length === 0) {
+        targetPressMonitor.cancelTouch();
+        elementTapMonitor.cancelTouch();
+        return;
+      }
+      for (const touch of points) {
+        targetPressMonitor.cancelTouch(touch.identifier);
+        elementTapMonitor.cancelTouch(touch.identifier);
+      }
+    });
   }, []);
   return /*#__PURE__*/_jsx(View, {
     style: styles.root,

package/lib/module/runtime/TargetPressBridge.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","targetPressMonitor","changedTouchPoints","forEachChangedTouch","jsx","_jsx","TargetPressBridge","children","onTouchStart","useCallback","event","identifier","pageX","pageY","handleTouchStart","onTouchEnd","handleTouchEnd","onTouchCancel","points","length","cancelTouch","touch","style","styles","root","collapsable","testID","create","flex"],"sourceRoot":"../../../src","sources":["runtime/TargetPressBridge.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAoC,cAAc;AAE3E,SAASC,kBAAkB,QAAQ,kCAA+B;AAElE,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAC;EAAEC;AAAiC,CAAC,EAAsB;EAC1F,MAAMC,YAAY,GAAGV,KAAK,CAACW,WAAW,CAAEC,KAA4B,IAAK;IACvEP,mBAAmB,CAACO,KAAK,EAAE,CAACC,UAAU,EAAEC,KAAK,EAAEC,KAAK,KAAK;MACvDZ,kBAAkB,CAACa,gBAAgB,CAACH,UAAU,EAAEC,KAAK,EAAEC,KAAK,CAAC;IAC/D,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,UAAU,GAAGjB,KAAK,CAACW,WAAW,CAAEC,KAA4B,IAAK;IACrEP,mBAAmB,CAACO,KAAK,EAAE,CAACC,UAAU,EAAEC,KAAK,EAAEC,KAAK,KAAK;MACvDZ,kBAAkB,CAACe,cAAc,CAACL,UAAU,EAAEC,KAAK,EAAEC,KAAK,CAAC;IAC7D,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,aAAa,GAAGnB,KAAK,CAACW,WAAW,CAAEC,KAA4B,IAAK;IACxE,MAAMQ,MAAM,GAAGhB,kBAAkB,CAACQ,KAAK,CAAC;IACxC,IAAIQ,MAAM,CAACC,MAAM,KAAK,CAAC,EAAE;MACvBlB,kBAAkB,CAACmB,WAAW,CAAC,CAAC;MAChC;IACF;IACA,KAAK,MAAMC,KAAK,IAAIH,MAAM,EAAE;MAC1BjB,kBAAkB,CAACmB,WAAW,CAACC,KAAK,CAACV,UAAU,CAAC;IAClD;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEN,IAAA,CAACL,IAAI;IACHsB,KAAK,EAAEC,MAAM,CAACC,IAAK;IACnBC,WAAW,EAAE,KAAM;IACnBjB,YAAY,EAAEA,YAAa;IAC3BO,UAAU,EAAEA,UAAW;IACvBE,aAAa,EAAEA,aAAc;IAC7BS,MAAM,EAAC,8BAA8B;IAAAnB,QAAA,EAEpCA;EAAQ,CACL,CAAC;AAEX;AAEA,MAAMgB,MAAM,GAAGxB,UAAU,CAAC4B,MAAM,CAAC;EAC/BH,IAAI,EAAE;IACJI,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","View","elementTapMonitor","touchBelongsToEvent","touchTargetFiber","targetPressMonitor","changedTouchPoints","forEachChangedTouch","isolateSync","jsx","_jsx","TargetPressBridge","children","onTouchStart","useCallback","event","observingTaps","subscriberCount","identifier","pageX","pageY","handleTouchStart","onTouchEnd","handleTouchEnd","onTouchCancel","points","length","cancelTouch","touch","style","styles","root","collapsable","testID","create","flex"],"sourceRoot":"../../../src","sources":["runtime/TargetPressBridge.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/runtime/UserflowOverlay.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import * as React from 'react';
+import { ElementPickerOverlay } from "../authoring/ElementPickerOverlay.js";
+import { elementPickerController } from "../authoring/elementPickerController.js";
+import { EvalJsHost } from "../evalJs/EvalJsHost.js";
+import { PreviewModeBanner } from "../pairing/PreviewModeBanner.js";
+import { getPairingController } from "../pairing/pairingRuntime.js";
+import { usePairingState } from "../pairing/usePairingState.js";
+import { usePreviewBarHold } from "../pairing/usePreviewBarHold.js";
+import { BannerHost } from "./BannerHost.js";
+import { FlowRenderer } from "./FlowRenderer.js";
+import { useFlowSessionState } from "./useFlowSessionState.js";
+import { getUserflowCore } from "./userflowCore.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SDK overlay chrome: preview banner, active flow surface, element picker.
+ * Mounted inside {@link SdkErrorBoundary} so a render throw here cannot
+ * unmount host children of {@link UserflowProvider}.
+ */
+export function UserflowOverlay({
+  engine,
+  bannerEngine,
+  onTrapChange
+}) {
+  const pairingState = usePairingState();
+  const {
+    session,
+    currentStep
+  } = useFlowSessionState(engine);
+  const [previewConfirming, setPreviewConfirming] = React.useState(false);
+  const [pickerActive, setPickerActive] = React.useState(() => elementPickerController.getState().active);
+  React.useEffect(() => {
+    return elementPickerController.subscribe(next => {
+      setPickerActive(next.active);
+    });
+  }, []);
+  const previewHeld = usePreviewBarHold(pairingState, pickerActive);
+  const trapHostAccessibility = React.useMemo(() => {
+    // Picking hides flow chrome, so the host must stay in the accessibility tree.
+    if (pickerActive) {
+      return false;
+    }
+    if (previewConfirming) {
+      return true;
+    }
+    if (!session || !currentStep) {
+      return false;
+    }
+    const appearance = String(currentStep.appearance).toUpperCase();
+    if (appearance === 'HIDDEN') {
+      return false;
+    }
+    if (appearance !== 'TOOLTIP') {
+      return true;
+    }
+    return currentStep.tooltipTargetBlocked;
+  }, [pickerActive, previewConfirming, session, currentStep]);
+  React.useLayoutEffect(() => {
+    onTrapChange(trapHostAccessibility);
+    return () => {
+      // Release whenever this overlay unmounts — including when
+      // SdkErrorBoundary replaces it with null and onError never runs.
+      onTrapChange(false);
+    };
+  }, [onTrapChange, trapHostAccessibility]);
+  const onExitPreview = React.useCallback(() => {
+    void getPairingController(getUserflowCore()).exitPreview();
+  }, []);
+  const onRestartPreview = React.useCallback(() => {
+    void getPairingController(getUserflowCore()).restartPreview();
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(EvalJsHost, {
+      suppressed: pickerActive
+    }), /*#__PURE__*/_jsx(PreviewModeBanner, {
+      onConfirmingChange: setPreviewConfirming,
+      onExit: onExitPreview,
+      held: previewHeld,
+      onRestart: onRestartPreview,
+      state: pairingState,
+      suppressed: pickerActive
+    }), /*#__PURE__*/_jsx(BannerHost, {
+      engine: bannerEngine,
+      hidden: pickerActive
+    }), pickerActive ? null : /*#__PURE__*/_jsx(FlowRenderer, {
+      engine: engine,
+      previewRestartGeneration: pairingState.previewRestartGeneration
+    }), /*#__PURE__*/_jsx(ElementPickerOverlay, {})]
+  });
+}
+//# sourceMappingURL=UserflowOverlay.js.map

package/lib/module/runtime/UserflowOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ElementPickerOverlay","elementPickerController","EvalJsHost","PreviewModeBanner","getPairingController","usePairingState","usePreviewBarHold","BannerHost","FlowRenderer","useFlowSessionState","getUserflowCore","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","UserflowOverlay","engine","bannerEngine","onTrapChange","pairingState","session","currentStep","previewConfirming","setPreviewConfirming","useState","pickerActive","setPickerActive","getState","active","useEffect","subscribe","next","previewHeld","trapHostAccessibility","useMemo","appearance","String","toUpperCase","tooltipTargetBlocked","useLayoutEffect","onExitPreview","useCallback","exitPreview","onRestartPreview","restartPreview","children","suppressed","onConfirmingChange","onExit","held","onRestart","state","hidden","previewRestartGeneration"],"sourceRoot":"../../../src","sources":["runtime/UserflowOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/runtime/UserflowProvider.js

@@ -3,21 +3,62 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { FiberScanRoot } from "../anchors/fiber/FiberScanRoot.js";
-import { ElementPickerOverlay } from "../authoring/ElementPickerOverlay.js";
 import { DoubleTapBridge } from "../authoring/chrome/DoubleTapBridge.js";
 import { elementPickerController } from "../authoring/elementPickerController.js";
-import { PreviewModeBanner } from "../pairing/PreviewModeBanner.js";
-import { getPairingController } from "../pairing/pairingRuntime.js";
-import { usePairingState } from "../pairing/usePairingState.js";
 import { ABSOLUTE_FILL } from "../surfaces/absoluteFill.js";
+import { getSafeAreaInsetsContext, useParentSafeAreaInsets, useUserflowSafeAreaInsets } from "../surfaces/safeArea.js";
 import { SurfaceLayoutInsetsProvider } from "../surfaces/surfaceLayoutInsets.js";
-import { FlowRenderer } from "./FlowRenderer.js";
+import { BannerHost } from "./BannerHost.js";
+import { SdkErrorBoundary } from "./SdkErrorBoundary.js";
 import { TargetPressBridge } from "./TargetPressBridge.js";
+import { UserflowOverlay } from "./UserflowOverlay.js";
+import { getBannerSessionEngine } from "./bannerEngine.js";
+import { BannerEngineContext } from "./bannerEngineContext.js";
+import { bannerEdge } from "./bannerPlacement.js";
 import { getFlowSessionEngine } from "./flowEngine.js";
-import { useFlowSessionState } from "./useFlowSessionState.js";
+import { isolateSync } from "./isolateCall.js";
+import { useBannerSession } from "./useBannerSession.js";
 import { getUserflowCore } from "./userflowCore.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const UserflowContext = /*#__PURE__*/React.createContext(null);
+function overlayResetKeyFromEngine(engine) {
+  const session = engine.getFlowSession();
+  if (!session) {
+    return '';
+  }
+  // `ForceGoToStep` updates displayedStepId without rewriting session.currentStep.
+  return `${session.id}:${engine.getCurrentStep()?.id ?? ''}`;
+}
+
+/**
+ * Session/step identity for retrying a crashed overlay. Lives in an effect so a
+ * throw cannot unmount host children (session hooks run inside the overlay
+ * boundary instead).
+ */
+function useOverlayErrorBoundaryResetKey(engine) {
+  const [resetKey, setResetKey] = React.useState(() => {
+    try {
+      return overlayResetKeyFromEngine(engine);
+    } catch {
+      return '';
+    }
+  });
+  React.useEffect(() => {
+    const apply = next => {
+      setResetKey(next);
+    };
+    isolateSync('overlay-reset-key', () => {
+      apply(overlayResetKeyFromEngine(engine));
+    });
+    return engine.on(() => {
+      isolateSync('overlay-reset-key', () => {
+        apply(overlayResetKeyFromEngine(engine));
+      });
+    });
+  }, [engine]);
+  return resetKey;
+}
+
 /**
  * Mount once at the application root, above the navigation container
  * (for example the root `_layout.tsx` or `App` component), after
@@ -29,6 +70,10 @@ const UserflowContext = /*#__PURE__*/React.createContext(null);
  * We deliberately do not use RN `<Modal>` — it is the wrong primitive for
  * non-modal tooltips (WS6).
  *
+ * Overlay render errors are contained by {@link SdkErrorBoundary}; host
+ * children are never inside that boundary. See
+ * `packages/react-native/docs/isolation.md`.
+ *
  * **Expo Router:** also mount `UserflowExpoRouterScreenTracker` from
  * `@userflow-tech/react-native/expo-router` under this provider so pathname and
  * navigation-state changes and path-like NAVIGATE actions are wired. The tracker
@@ -40,82 +85,110 @@ const UserflowContext = /*#__PURE__*/React.createContext(null);
  */
 export function UserflowProvider({
   children,
-  engine: engineProp
+  engine: engineProp,
+  bannerEngine: bannerEngineProp
 }) {
   const engine = engineProp ?? getFlowSessionEngine(getUserflowCore());
+  const bannerEngine = bannerEngineProp ?? getBannerSessionEngine(getUserflowCore());
   const contextValue = React.useMemo(() => ({
     engine
   }), [engine]);
-  const pairingState = usePairingState();
-  const {
-    session,
-    currentStep
-  } = useFlowSessionState(engine);
-  const [previewConfirming, setPreviewConfirming] = React.useState(false);
+  const overlayResetKey = useOverlayErrorBoundaryResetKey(engine);
+  const [trapHostAccessibility, setTrapHostAccessibility] = React.useState(false);
+  const onTrapChange = React.useCallback(trap => {
+    setTrapHostAccessibility(trap);
+  }, []);
+  const onOverlayError = React.useCallback(() => {
+    setTrapHostAccessibility(false);
+  }, []);
+  const bannerSession = useBannerSession(bannerEngine);
+  const safeInsets = useUserflowSafeAreaInsets();
   const [pickerActive, setPickerActive] = React.useState(() => elementPickerController.getState().active);
   React.useEffect(() => {
     return elementPickerController.subscribe(next => {
       setPickerActive(next.active);
     });
   }, []);
-  const trapHostAccessibility = React.useMemo(() => {
-    if (previewConfirming) {
-      return true;
-    }
-    if (!session || !currentStep) {
-      return false;
-    }
-    const appearance = String(currentStep.appearance).toUpperCase();
-    if (appearance === 'HIDDEN') {
-      return false;
-    }
-    if (appearance !== 'TOOLTIP') {
-      return true;
-    }
-    return currentStep.tooltipTargetBlocked;
-  }, [previewConfirming, session, currentStep]);
-  const onExitPreview = React.useCallback(() => {
-    void getPairingController(getUserflowCore()).exitPreview();
-  }, []);
-  const onRestartPreview = React.useCallback(() => {
-    void getPairingController(getUserflowCore()).restartPreview();
-  }, []);
-  return /*#__PURE__*/_jsx(UserflowContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(SurfaceLayoutInsetsProvider, {
-      children: /*#__PURE__*/_jsx(DoubleTapBridge, {
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.root,
-          collapsable: false,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.appContent,
-            testID: "userflow-app-content",
-            importantForAccessibility: trapHostAccessibility ? 'no-hide-descendants' : undefined,
-            accessibilityElementsHidden: trapHostAccessibility ? true : undefined,
-            children: /*#__PURE__*/_jsx(TargetPressBridge, {
-              children: /*#__PURE__*/_jsx(FiberScanRoot, {
-                children: children
+  const banner = bannerSession?.version.banner ?? null;
+  const flowEdge = banner && banner.overlay === false && !pickerActive ? bannerEdge(banner.embedMode) : null;
+  const hostInsets = flowEdge === 'top' || flowEdge === 'bottom' ? {
+    ...safeInsets,
+    top: flowEdge === 'top' ? 0 : safeInsets.top,
+    bottom: flowEdge === 'bottom' ? 0 : safeInsets.bottom
+  } : null;
+  const appContent = /*#__PURE__*/_jsx(View, {
+    style: styles.appContent,
+    testID: "userflow-app-content",
+    importantForAccessibility: trapHostAccessibility ? 'no-hide-descendants' : undefined,
+    accessibilityElementsHidden: trapHostAccessibility ? true : undefined,
+    children: /*#__PURE__*/_jsx(TargetPressBridge, {
+      children: /*#__PURE__*/_jsx(FiberScanRoot, {
+        children: children
+      })
+    })
+  });
+  return /*#__PURE__*/_jsx(BannerEngineContext.Provider, {
+    value: bannerEngine,
+    children: /*#__PURE__*/_jsx(UserflowContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/_jsx(SurfaceLayoutInsetsProvider, {
+        children: /*#__PURE__*/_jsx(DoubleTapBridge, {
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.root,
+            collapsable: false,
+            testID: "userflow-root",
+            children: [/*#__PURE__*/_jsx(BannerHost, {
+              engine: bannerEngine,
+              placement: "flow",
+              edge: "top",
+              hidden: pickerActive
+            }), /*#__PURE__*/_jsx(HostSafeArea, {
+              insets: hostInsets,
+              children: appContent
+            }), /*#__PURE__*/_jsx(BannerHost, {
+              engine: bannerEngine,
+              placement: "flow",
+              edge: "bottom",
+              hidden: pickerActive
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.overlay,
+              pointerEvents: "box-none",
+              children: /*#__PURE__*/_jsx(SdkErrorBoundary, {
+                scope: "overlay",
+                resetKey: overlayResetKey,
+                onError: onOverlayError,
+                children: /*#__PURE__*/_jsx(UserflowOverlay, {
+                  engine: engine,
+                  bannerEngine: bannerEngine,
+                  onTrapChange: onTrapChange
+                })
               })
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.overlay,
-            pointerEvents: "box-none",
-            children: [/*#__PURE__*/_jsx(PreviewModeBanner, {
-              onConfirmingChange: setPreviewConfirming,
-              onExit: onExitPreview,
-              onRestart: onRestartPreview,
-              state: pairingState,
-              suppressed: pickerActive
-            }), /*#__PURE__*/_jsx(FlowRenderer, {
-              engine: engine,
-              previewRestartGeneration: pairingState.previewRestartGeneration
-            }), /*#__PURE__*/_jsx(ElementPickerOverlay, {})]
-          })]
+            })]
+          })
         })
       })
     })
   });
 }
+function HostSafeArea({
+  insets,
+  children
+}) {
+  const Context = getSafeAreaInsetsContext();
+  // Re-provide only when a parent already supplied insets, or when a banner
+  // override applies. Supplying a value with no parent would hide the host's
+  // own missing SafeAreaProvider from its useSafeAreaInsets() calls.
+  const parent = useParentSafeAreaInsets();
+  if (!Context || insets == null && parent == null) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: insets ?? parent,
+    children: children
+  });
+}
 
 /** Access the flow session engine from inside {@link UserflowProvider}. */
 export function useUserflow() {