@getuserfeedback/react-native 5.11.0 → 5.14.0

package/dist/native-provider.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { parseInitOptions } from "@getuserfeedback/protocol";
 import { createUniqueId } from "@getuserfeedback/protocol/host";
 import { createActionRegistry, } from "@getuserfeedback/sdk/internal/action-registry";
+import { resolveLinkRouter } from "@getuserfeedback/sdk/internal/link-router";
 import { createContext, createElement, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { NativeStandardFlowContainer } from "./flow-container.js";
 import { NativeFlowContainerContext, } from "./native-flow-container-context.js";
@@ -19,6 +20,7 @@ import { createNativeProviderClientController } from "./native-provider-client-c
 import { REACT_NATIVE_PINNED_CORE_URL } from "./native-runtime-endpoints.js";
 import { NativeProviderRuntime } from "./native-runtime-root.js";
 export { FlowContent, useFlowContainer } from "./flow-container.js";
+export { useFlow } from "./use-flow.js";
 const GetUserFeedbackContext = createContext(null);
 const toClientOptionsKey = (value) => {
     if (value === null || typeof value !== "object") {
@@ -37,6 +39,20 @@ const toClientOptionsKey = (value) => {
 const compareClientOptionsKeys = (left, right) => left < right ? -1 : left > right ? 1 : 0;
 const haveSameActionRegistrations = (left, right) => left.length === right.length &&
     left.every((identity, index) => identity === right[index]);
+const useNativeLinkRouter = (links) => {
+    const router = resolveLinkRouter(links);
+    const hasRouterRef = useRef(router !== undefined);
+    if (hasRouterRef.current !== (router !== undefined)) {
+        throw new Error("links.router presence cannot change after provider mount; keep the router configured for the provider lifetime");
+    }
+    const routerRef = useRef(router);
+    useLayoutEffect(() => {
+        routerRef.current = router;
+    }, [router]);
+    return {
+        getRouter: useCallback(() => routerRef.current, []),
+    };
+};
 const useNativeActionRegistry = (actions) => {
     const nextRegistry = createActionRegistry(actions);
     if (nextRegistry.getOpenUrlHandler() !== undefined) {
@@ -69,7 +85,7 @@ const toInitFlags = (flags) => {
     return normalizedFlags.length === 0 ? undefined : normalizedFlags;
 };
 const parseNativeInitOptions = (_a, hostActions) => {
-    var { actions: _actions, capabilities, flags } = _a, clientOptions = __rest(_a, ["actions", "capabilities", "flags"]);
+    var { actions: _actions, capabilities, flags, links: _links } = _a, clientOptions = __rest(_a, ["actions", "capabilities", "flags", "links"]);
     const normalizedFlags = toInitFlags(flags);
     const initOptions = parseInitOptions(Object.assign(Object.assign(Object.assign(Object.assign({}, clientOptions), (normalizedFlags === undefined ? {} : { flags: normalizedFlags })), (hostActions !== undefined && hostActions.length > 0
         ? { hostActions }
@@ -91,7 +107,8 @@ const parseNativeInitOptions = (_a, hostActions) => {
             : normalizedHostCapabilities });
 };
 export function GetUserFeedbackProvider({ children, clientOptions, instanceId: instanceIdProp, onError, webViewComponent, }) {
-    var _a, _b;
+    var _a;
+    var _b;
     const [instanceId] = useState(() => {
         const normalizedInstanceId = instanceIdProp === null || instanceIdProp === void 0 ? void 0 : instanceIdProp.trim();
         return normalizedInstanceId && normalizedInstanceId.length > 0
@@ -102,6 +119,7 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
     const [projection, setProjection] = useState(null);
     const contentOwnerRef = useRef(null);
     const actionRegistry = useNativeActionRegistry(clientOptions.actions);
+    const linkRouter = useNativeLinkRouter(clientOptions.links);
     const normalizedClientOptions = parseNativeInitOptions(clientOptions, actionRegistry.definitions);
     const clientOptionsKey = toClientOptionsKey(normalizedClientOptions);
     const coreUrl = (_b = (_a = normalizedClientOptions.runtimeEndpoints) === null || _a === void 0 ? void 0 : _a.coreUrl) !== null && _b !== void 0 ? _b : REACT_NATIVE_PINNED_CORE_URL;
@@ -148,9 +166,16 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
     const flowContainerContext = useMemo(() => ({
         client: controller.client,
         contentOwner,
+        flowRegistry: controller.flowRegistry,
+        projection,
+        registerContent,
+    }), [
+        contentOwner,
+        controller.client,
+        controller.flowRegistry,
         projection,
         registerContent,
-    }), [contentOwner, controller.client, projection, registerContent]);
+    ]);
     const controllerLifecycleTokensRef = useRef(new WeakMap());
     useEffect(() => {
         const lifecycleToken = {};
@@ -182,6 +207,7 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
         key: clientOptionsKey,
         getRuntimeConfiguration,
         getHostActionHandler: actionRegistry.getHandler,
+        getLinkRouter: linkRouter.getRouter,
         onCommandSessionChange: handleCommandSessionChange,
         onError: reportError,
         onHandleInvalidated: handleHandleInvalidated,

package/dist/native-runtime-root.d.ts

@@ -1,4 +1,5 @@
 import type { CoreCommandEnvelope } from "@getuserfeedback/protocol";
+import { type LinkRouter } from "@getuserfeedback/protocol/host";
 import type { EventHandleInvalidated } from "@getuserfeedback/protocol/internal/core-handle-invalidation";
 import type { ConfigureOptions, InitOptions } from "@getuserfeedback/sdk";
 import type { ActionRegistry } from "@getuserfeedback/sdk/internal/action-registry";
@@ -17,6 +18,10 @@ export type NativeRuntimeRootProps = {
         getHandler: ActionRegistry["getHandler"];
         instanceId: string;
     };
+    linkRouter?: {
+        getRouter: () => LinkRouter | undefined;
+        instanceId: string;
+    };
     onCommandSessionChange?: (session: NativeCoreCommandSession | null) => void;
     onError?: (error: Error) => void;
     onHandleInvalidated?: (message: EventHandleInvalidated) => void;
@@ -40,8 +45,9 @@ type NativeProviderRuntimeProps = Omit<NativeRuntimeRootProps, "createStartupCom
     instanceId: string;
     getRuntimeConfiguration?: () => ConfigureOptions;
     getHostActionHandler?: ActionRegistry["getHandler"];
+    getLinkRouter?: () => LinkRouter | undefined;
     onCommandSessionChange?: (session: NativeDirectCommandSession | null) => void;
 };
-export declare function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewComponent, createStartupCommand, hostActions, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, observeOpenRequest, onStartupTerminalError, startupCommandSettlementTimeoutMs, viewNativeViewComponent, viewWebViewComponent, }: NativeRuntimeRootProps): ReactElement;
-export declare function NativeProviderRuntime({ directSessionController, getHostActionHandler, getRuntimeConfiguration, initOptions, instanceId, onCommandSessionChange, onError, ...runtimeProps }: NativeProviderRuntimeProps): ReactElement;
+export declare function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewComponent, createStartupCommand, hostActions, linkRouter, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, observeOpenRequest, onStartupTerminalError, startupCommandSettlementTimeoutMs, viewNativeViewComponent, viewWebViewComponent, }: NativeRuntimeRootProps): ReactElement;
+export declare function NativeProviderRuntime({ directSessionController, getHostActionHandler, getLinkRouter, getRuntimeConfiguration, initOptions, instanceId, onCommandSessionChange, onError, ...runtimeProps }: NativeProviderRuntimeProps): ReactElement;
 export {};

package/dist/native-runtime-root.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { CommandSettlementError, CommandSettlementTimeoutError, } from "@getuserfeedback/protocol/host";
+import { BROWSER_NAVIGATION_AVAILABILITY_EVENT } from "@getuserfeedback/protocol/internal/navigation-rpc";
 import { createElement, Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import { CoreWebViewHost, } from "./core-webview-host.js";
 import { createNativeCoreCommandChannel } from "./native-core-command-channel.js";
@@ -20,7 +21,7 @@ import { createNativeViewRecordController, } from "./native-view-record-controll
 import { createProviderCommandEnvelope, REACT_NATIVE_CLIENT_META, } from "./provider-command-helpers.js";
 const DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS = 30000;
 const getEmptyRuntimeConfiguration = () => ({});
-export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewComponent, createStartupCommand, hostActions, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, observeOpenRequest, onStartupTerminalError, startupCommandSettlementTimeoutMs = DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS, viewNativeViewComponent, viewWebViewComponent, }) {
+export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewComponent, createStartupCommand, hostActions, linkRouter, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, observeOpenRequest, onStartupTerminalError, startupCommandSettlementTimeoutMs = DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS, viewNativeViewComponent, viewWebViewComponent, }) {
     const [coreHostRevision, setCoreHostRevision] = useState(0);
     const [session, setSession] = useState(null);
     const sessionRef = useRef(null);
@@ -42,6 +43,8 @@ export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewCo
     createStartupCommandRef.current = createStartupCommand;
     const hostActionsRef = useRef(hostActions);
     hostActionsRef.current = hostActions;
+    const linkRouterRef = useRef(linkRouter);
+    linkRouterRef.current = linkRouter;
     const reportError = useCallback((error) => {
         var _a;
         try {
@@ -84,8 +87,20 @@ export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewCo
         }
         const controller = createNativeViewRecordController({
             coreConnection,
+            getBrowserNavigationAvailability: linkRouterRef.current
+                ? () => {
+                    var _a;
+                    const available = ((_a = linkRouterRef.current) === null || _a === void 0 ? void 0 : _a.getRouter()) !== undefined;
+                    return {
+                        available,
+                        explicitTargetAvailable: available,
+                        hostActionLinkAvailable: false,
+                        type: BROWSER_NAVIGATION_AVAILABILITY_EVENT,
+                    };
+                }
+                : undefined,
             onError: reportError,
-            observeOpenRequest: (payload) => { var _a, _b; return (_b = (_a = observeOpenRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(observeOpenRequestRef, payload)) !== null && _b !== void 0 ? _b : { allowed: true }; },
+            observeOpenRequest: (payload) => { var _a; var _b; return (_b = (_a = observeOpenRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(observeOpenRequestRef, payload)) !== null && _b !== void 0 ? _b : { allowed: true }; },
         });
         const commandChannelOwner = createNativeCoreCommandChannel({
             coreConnection,
@@ -100,6 +115,16 @@ export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewCo
                     subscribeToViewActivity: controller.subscribe,
                 }
                 : undefined,
+            linkRouter: linkRouterRef.current
+                ? {
+                    getActiveViewIds: () => controller
+                        .getSnapshot()
+                        .filter((record) => record.isActive)
+                        .map((record) => record.viewId),
+                    getRouter: () => { var _a; return (_a = linkRouterRef.current) === null || _a === void 0 ? void 0 : _a.getRouter(); },
+                    instanceId: linkRouterRef.current.instanceId,
+                }
+                : undefined,
             onHostActionError: reportError,
             onSessionFailure: (error) => {
                 reportError(error);
@@ -140,10 +165,8 @@ export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewCo
         };
         const startupCommand = (_a = createStartupCommandRef.current) === null || _a === void 0 ? void 0 : _a.call(createStartupCommandRef);
         if (startupCommand) {
-            // TODO(architecture): Reconcile direct-runtime startup command settlement
-            // with view projection. Android smoke can project the opened view while the
-            // public open request still times out waiting for Core's settlement.
-            // [principle=one-authoritative-command-lifecycle] [scope=slice] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=2]
+            // TODO(testing): Run and record the authored direct-runtime open and embedded-close smoke path on Android and iOS devices as device evidence.
+            // [seam=native-direct-runtime] [layer=smoke] [workflow=test:react-native-expo-smoke:e2e] [priority=medium] [impact=medium] [risk=medium] [epic=runtime-neutral-view-host-orchestration] [epic_order=2]
             void commandSessionOwner.session
                 .dispatch(startupCommand, {
                 settlementTimeoutMs: startupCommandSettlementTimeoutMs,
@@ -257,7 +280,7 @@ export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewCo
         }));
 }
 export function NativeProviderRuntime(_a) {
-    var { directSessionController, getHostActionHandler, getRuntimeConfiguration = getEmptyRuntimeConfiguration, initOptions, instanceId, onCommandSessionChange, onError } = _a, runtimeProps = __rest(_a, ["directSessionController", "getHostActionHandler", "getRuntimeConfiguration", "initOptions", "instanceId", "onCommandSessionChange", "onError"]);
+    var { directSessionController, getHostActionHandler, getLinkRouter, getRuntimeConfiguration = getEmptyRuntimeConfiguration, initOptions, instanceId, onCommandSessionChange, onError } = _a, runtimeProps = __rest(_a, ["directSessionController", "getHostActionHandler", "getLinkRouter", "getRuntimeConfiguration", "initOptions", "instanceId", "onCommandSessionChange", "onError"]);
     const directSessionRef = useRef(null);
     useLayoutEffect(() => {
         directSessionController.beginAttachmentAttempt();
@@ -298,5 +321,7 @@ export function NativeProviderRuntime(_a) {
     }, [getRuntimeConfiguration, initOptions, instanceId]);
     return createElement(NativeRuntimeRoot, Object.assign(Object.assign({}, runtimeProps), { hostActions: getHostActionHandler
             ? { getHandler: getHostActionHandler, instanceId }
+            : undefined, linkRouter: getLinkRouter
+            ? { getRouter: getLinkRouter, instanceId }
             : undefined, onCommandSessionChange: handleCommandSessionChange, onError, onStartupTerminalError: handleStartupTerminalError, createStartupCommand }));
 }

package/dist/native-view-host-projection.js

@@ -36,8 +36,9 @@ export function NativeProjectedViewContent({ controller, onInvalidMessage, recor
     });
 }
 function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInvalidMessage, presentationMode, record, webViewComponent, }) {
-    var _a;
+    var _a, _b;
     const layoutTransactionId = (_a = record.size) === null || _a === void 0 ? void 0 : _a.layoutTransactionId;
+    const transitionSchedule = (_b = record.size) === null || _b === void 0 ? void 0 : _b.transitionSchedule;
     useLayoutEffect(() => {
         if (!layoutTransactionId) {
             return;
@@ -67,7 +68,12 @@ function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInva
             viewId: record.viewId,
         });
     });
-    return createElement(NativeViewPresentationSurface, { nativeViewComponent, presentationMode, record }, createElement(NativeProjectedViewContent, {
+    return createElement(NativeViewPresentationSurface, {
+        nativeViewComponent,
+        presentationMode,
+        record,
+        transitionSchedule,
+    }, createElement(NativeProjectedViewContent, {
         controller,
         onInvalidMessage,
         record,

package/dist/native-view-layout-transition.d.ts

@@ -0,0 +1,25 @@
+import { type WidgetLayoutTimedTransitionPolicy, type WidgetLayoutTransitionSchedule } from "@getuserfeedback/protocol/host";
+import { type ComponentType } from "react";
+export type NativeViewFrame = Readonly<{
+    bottomLeftRadius: number;
+    bottomRightRadius: number;
+    height: number;
+    topLeftRadius: number;
+    topRightRadius: number;
+    width: number;
+}>;
+export type NativeViewFrameSurfaceStyles = Readonly<{
+    border: Record<string, unknown>;
+    content: Record<string, unknown>;
+    frame: Record<string, unknown>;
+}>;
+export declare function useNativeViewFrameTransition(input: {
+    frame: NativeViewFrame | null;
+    nativeView: ComponentType<Record<string, unknown>>;
+    revision: number;
+    schedule?: WidgetLayoutTransitionSchedule;
+    styles: NativeViewFrameSurfaceStyles;
+    transitionPolicy?: WidgetLayoutTimedTransitionPolicy;
+}): NativeViewFrameSurfaceStyles & {
+    frameView: ComponentType<Record<string, unknown>>;
+};

package/dist/native-view-layout-transition.js

@@ -0,0 +1,244 @@
+import { resolveWidgetLayoutResumedEasing, resolveWidgetLayoutTransitionExecution, } from "@getuserfeedback/protocol/host";
+import { useLayoutEffect, useMemo, useRef, useState, } from "react";
+const resolveNativeAnimationRuntime = () => {
+    try {
+        const reactNativeModule = require("react-native");
+        return reactNativeModule.Animated
+            ? {
+                Animated: reactNativeModule.Animated,
+                Easing: reactNativeModule.Easing,
+            }
+            : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const FRAME_PROPERTIES = [
+    "width",
+    "height",
+    "topLeftRadius",
+    "topRightRadius",
+    "bottomLeftRadius",
+    "bottomRightRadius",
+];
+export function useNativeViewFrameTransition(input) {
+    const animationRuntime = useMemo(resolveNativeAnimationRuntime, []);
+    const animatedFrameView = useMemo(() => animationRuntime
+        ? animationRuntime.Animated.createAnimatedComponent(input.nativeView)
+        : input.nativeView, [animationRuntime, input.nativeView]);
+    const animatedValuesRef = useRef(null);
+    const previousFrameRef = useRef(null);
+    const presentedStylesRef = useRef(input.styles);
+    const consumedScheduleRef = useRef(undefined);
+    const activeScheduleRef = useRef(undefined);
+    const activeAnimationsRef = useRef([]);
+    const pendingStartRef = useRef(undefined);
+    const animationAttemptRef = useRef(0);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const latestInputRef = useRef(input);
+    latestInputRef.current = input;
+    const hasFrame = input.frame !== null;
+    if (animationRuntime && input.frame && animatedValuesRef.current === null) {
+        animatedValuesRef.current = {
+            bottomLeftRadius: new animationRuntime.Animated.Value(input.frame.bottomLeftRadius),
+            bottomRightRadius: new animationRuntime.Animated.Value(input.frame.bottomRightRadius),
+            height: new animationRuntime.Animated.Value(input.frame.height),
+            topLeftRadius: new animationRuntime.Animated.Value(input.frame.topLeftRadius),
+            topRightRadius: new animationRuntime.Animated.Value(input.frame.topRightRadius),
+            width: new animationRuntime.Animated.Value(input.frame.width),
+        };
+    }
+    const hasPendingSchedule = input.schedule !== undefined &&
+        consumedScheduleRef.current !== input.schedule;
+    const shouldUseAnimatedStyles = animationRuntime !== null &&
+        input.frame !== null &&
+        animatedValuesRef.current !== null &&
+        (hasPendingSchedule ||
+            (isAnimating && activeScheduleRef.current === input.schedule));
+    // Report revision and frame presence are the occurrence boundaries. The
+    // latter cancels active motion when a connection loses its measured frame.
+    // latestInputRef carries the complete snapshot without making styles effect keys.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: revision intentionally owns the occurrence
+    useLayoutEffect(() => {
+        const currentInput = latestInputRef.current;
+        const stopAnimations = () => {
+            var _a;
+            clearTimeout(pendingStartRef.current);
+            pendingStartRef.current = undefined;
+            for (const animation of activeAnimationsRef.current) {
+                (_a = animation.stop) === null || _a === void 0 ? void 0 : _a.call(animation);
+            }
+            activeAnimationsRef.current = [];
+        };
+        const frame = currentInput.frame;
+        const animatedValues = animatedValuesRef.current;
+        const previousFrame = previousFrameRef.current;
+        previousFrameRef.current = frame;
+        if (!animationRuntime || !frame || !animatedValues) {
+            animationAttemptRef.current += 1;
+            stopAnimations();
+            activeScheduleRef.current = undefined;
+            presentedStylesRef.current = currentInput.styles;
+            setIsAnimating(false);
+            return;
+        }
+        const schedule = currentInput.schedule;
+        const transitionPolicy = currentInput.transitionPolicy;
+        if (schedule === undefined ||
+            transitionPolicy === undefined ||
+            consumedScheduleRef.current === schedule ||
+            previousFrame === null) {
+            animationAttemptRef.current += 1;
+            stopAnimations();
+            activeScheduleRef.current = undefined;
+            presentedStylesRef.current = currentInput.styles;
+            for (const property of FRAME_PROPERTIES) {
+                animatedValues[property].setValue(frame[property]);
+            }
+            setIsAnimating(false);
+            return;
+        }
+        consumedScheduleRef.current = schedule;
+        const execution = resolveWidgetLayoutTransitionExecution({
+            durationMs: transitionPolicy.durationMs,
+            nowEpochMs: Date.now(),
+            schedule,
+        });
+        if (execution.isComplete) {
+            animationAttemptRef.current += 1;
+            stopAnimations();
+            activeScheduleRef.current = undefined;
+            presentedStylesRef.current = currentInput.styles;
+            for (const property of FRAME_PROPERTIES) {
+                animatedValues[property].setValue(frame[property]);
+            }
+            setIsAnimating(false);
+            return;
+        }
+        animationAttemptRef.current += 1;
+        const animationAttempt = animationAttemptRef.current;
+        stopAnimations();
+        activeScheduleRef.current = schedule;
+        setIsAnimating(true);
+        const startAnimations = () => {
+            if (animationAttemptRef.current !== animationAttempt) {
+                return;
+            }
+            pendingStartRef.current = undefined;
+            const liveFrame = {};
+            let remainingSamples = FRAME_PROPERTIES.length;
+            for (const property of FRAME_PROPERTIES) {
+                animatedValues[property].stopAnimation((value) => {
+                    var _a, _b;
+                    if (animationAttemptRef.current !== animationAttempt) {
+                        return;
+                    }
+                    liveFrame[property] = value;
+                    remainingSamples -= 1;
+                    if (remainingSamples !== 0) {
+                        return;
+                    }
+                    const currentExecution = resolveWidgetLayoutTransitionExecution({
+                        durationMs: transitionPolicy.durationMs,
+                        nowEpochMs: Date.now(),
+                        schedule,
+                    });
+                    if (currentExecution.isComplete) {
+                        presentedStylesRef.current = currentInput.styles;
+                        for (const frameProperty of FRAME_PROPERTIES) {
+                            animatedValues[frameProperty].setValue(frame[frameProperty]);
+                        }
+                        activeScheduleRef.current = undefined;
+                        setIsAnimating(false);
+                        return;
+                    }
+                    const elapsedProgress = Math.min(1, currentExecution.elapsedMs / transitionPolicy.durationMs);
+                    const resumedEasing = currentExecution.elapsedMs > 0
+                        ? resolveWidgetLayoutResumedEasing({
+                            easing: transitionPolicy.easing,
+                            elapsedProgress,
+                            remainingProgress: 0,
+                        })
+                        : undefined;
+                    if (resumedEasing) {
+                        for (const frameProperty of FRAME_PROPERTIES) {
+                            animatedValues[frameProperty].setValue(liveFrame[frameProperty] +
+                                (frame[frameProperty] - liveFrame[frameProperty]) *
+                                    resumedEasing.initialProgress);
+                        }
+                    }
+                    const easing = resumedEasing
+                        ? (remainingProgress) => resolveWidgetLayoutResumedEasing({
+                            easing: transitionPolicy.easing,
+                            elapsedProgress,
+                            remainingProgress,
+                        }).progress
+                        : (_b = (_a = animationRuntime.Easing) === null || _a === void 0 ? void 0 : _a.bezier) === null || _b === void 0 ? void 0 : _b.call(_a, ...transitionPolicy.easing);
+                    let remainingAnimations = FRAME_PROPERTIES.length;
+                    let allAnimationsFinished = true;
+                    const targetStyles = currentInput.styles;
+                    const animations = FRAME_PROPERTIES.map((frameProperty) => animationRuntime.Animated.timing(animatedValues[frameProperty], {
+                        duration: currentExecution.durationMs,
+                        easing,
+                        toValue: frame[frameProperty],
+                        useNativeDriver: false,
+                    }));
+                    activeAnimationsRef.current = animations;
+                    for (const animation of animations) {
+                        animation.start((result) => {
+                            if (animationAttemptRef.current !== animationAttempt) {
+                                return;
+                            }
+                            allAnimationsFinished && (allAnimationsFinished = (result === null || result === void 0 ? void 0 : result.finished) !== false);
+                            remainingAnimations -= 1;
+                            if (remainingAnimations !== 0) {
+                                return;
+                            }
+                            activeAnimationsRef.current = [];
+                            activeScheduleRef.current = undefined;
+                            if (allAnimationsFinished) {
+                                presentedStylesRef.current = targetStyles;
+                            }
+                            setIsAnimating(false);
+                        });
+                    }
+                });
+            }
+        };
+        // RN's timing delay starts a fresh duration after its timer fires. Own the
+        // wait so a late JS startup samples and resumes the original schedule.
+        if (execution.delayMs > 0) {
+            pendingStartRef.current = setTimeout(startAnimations, execution.delayMs);
+        }
+        else {
+            startAnimations();
+        }
+    }, [animationRuntime, input.revision, hasFrame]);
+    useLayoutEffect(() => () => {
+        var _a;
+        animationAttemptRef.current += 1;
+        clearTimeout(pendingStartRef.current);
+        pendingStartRef.current = undefined;
+        for (const animation of activeAnimationsRef.current) {
+            (_a = animation.stop) === null || _a === void 0 ? void 0 : _a.call(animation);
+        }
+        activeAnimationsRef.current = [];
+    }, []);
+    const animatedValues = animatedValuesRef.current;
+    if (!shouldUseAnimatedStyles || animatedValues === null) {
+        return Object.assign(Object.assign({}, input.styles), { frameView: animatedFrameView });
+    }
+    const radiusStyles = {
+        borderBottomLeftRadius: animatedValues.bottomLeftRadius,
+        borderBottomRightRadius: animatedValues.bottomRightRadius,
+        borderTopLeftRadius: animatedValues.topLeftRadius,
+        borderTopRightRadius: animatedValues.topRightRadius,
+    };
+    return {
+        border: Object.assign(Object.assign({}, presentedStylesRef.current.border), radiusStyles),
+        content: Object.assign(Object.assign({}, presentedStylesRef.current.content), radiusStyles),
+        frame: Object.assign(Object.assign(Object.assign({}, presentedStylesRef.current.frame), radiusStyles), { height: animatedValues.height, width: animatedValues.width }),
+        frameView: animatedFrameView,
+    };
+}

package/dist/native-view-presentation-surface.d.ts

@@ -1,9 +1,11 @@
+import type { WidgetLayoutTransitionSchedule } from "@getuserfeedback/protocol/host";
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import type { NativeViewRecord } from "./native-view-record-controller.js";
 export type NativeViewPresentationMode = "content" | "overlay";
-export declare function NativeViewPresentationSurface({ children, presentationMode, nativeViewComponent, record, }: {
+export declare function NativeViewPresentationSurface({ children, presentationMode, nativeViewComponent, record, transitionSchedule, }: {
     children?: ReactNode;
     presentationMode?: NativeViewPresentationMode;
     nativeViewComponent?: ComponentType<Record<string, unknown>>;
     record: NativeViewRecord;
+    transitionSchedule?: WidgetLayoutTransitionSchedule;
 }): ReactElement;

package/dist/native-view-presentation-surface.js

@@ -1,4 +1,5 @@
 import { createElement, } from "react";
+import { useNativeViewFrameTransition, } from "./native-view-layout-transition.js";
 import { toNativeWidgetCornerRadii } from "./native-widget-corner-radii.js";
 import { toNativeWidgetResolvedBorderStyle } from "./native-widget-frame-border.js";
 import { toNativeWidgetFrameShadow, toNativeWidgetSupportedBoxShadow, } from "./native-widget-frame-shadow.js";
@@ -55,16 +56,20 @@ const resolveNativeView = () => {
     }
     return reactNativeModule.View;
 };
-export function NativeViewPresentationSurface({ children, presentationMode = "overlay", nativeViewComponent, record, }) {
-    var _a, _b, _c;
+// TODO(architecture): Land native-host dismissal and controller dismissal in the same vertical slice.
+// [principle=host-adapter-boundary] [scope=slice]
+// [epic=runtime-neutral-view-host-orchestration] [epic_order=3] [priority=medium]
+export function NativeViewPresentationSurface({ children, presentationMode = "overlay", nativeViewComponent, record, transitionSchedule, }) {
+    var _a;
     const NativeView = nativeViewComponent !== null && nativeViewComponent !== void 0 ? nativeViewComponent : resolveNativeView();
     const isPresented = record.isActive && record.size !== null;
     const hostStyle = presentationMode === "content" && isPresented
-        ? Object.assign(Object.assign({}, CONTENT_HOST_SURFACE_STYLE), { height: (_a = record.size) === null || _a === void 0 ? void 0 : _a.height, width: (_b = record.size) === null || _b === void 0 ? void 0 : _b.width }) : Object.assign(Object.assign(Object.assign({}, HOST_SURFACE_STYLE), (((_c = record.size) === null || _c === void 0 ? void 0 : _c.placement) === "docked-top"
-        ? TOP_PLACEMENT_STYLE
-        : BOTTOM_PLACEMENT_STYLE)), (isPresented
-        ? PRESENTED_HOST_SURFACE_STYLE
-        : HIDDEN_HOST_SURFACE_STYLE));
+        ? CONTENT_HOST_SURFACE_STYLE
+        : Object.assign(Object.assign(Object.assign({}, HOST_SURFACE_STYLE), (((_a = record.size) === null || _a === void 0 ? void 0 : _a.placement) === "docked-top"
+            ? TOP_PLACEMENT_STYLE
+            : BOTTOM_PLACEMENT_STYLE)), (isPresented
+            ? PRESENTED_HOST_SURFACE_STYLE
+            : HIDDEN_HOST_SURFACE_STYLE));
     return createElement(NativeView, {
         accessibilityElementsHidden: !isPresented,
         importantForAccessibility: isPresented ? "auto" : "no-hide-descendants",
@@ -75,10 +80,11 @@ export function NativeViewPresentationSurface({ children, presentationMode = "ov
         children,
         nativeViewComponent,
         record,
+        transitionSchedule,
     }));
 }
-function NativeViewPresentationFrame({ children, nativeViewComponent, record, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+function NativeViewPresentationFrame({ children, nativeViewComponent, record, transitionSchedule, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const NativeView = nativeViewComponent !== null && nativeViewComponent !== void 0 ? nativeViewComponent : resolveNativeView();
     const isPresented = record.isActive && record.size !== null;
     const hasMeasuredFrame = isPresented || ((_a = record.size) === null || _a === void 0 ? void 0 : _a.layoutTransactionId) !== undefined;
@@ -100,17 +106,43 @@ function NativeViewPresentationFrame({ children, nativeViewComponent, record, })
         borderTopLeftRadius: cornerRadii.topLeft,
         borderTopRightRadius: cornerRadii.topRight,
     };
-    return createElement(NativeView, {
-        pointerEvents: isPresented ? "auto" : "none",
-        style: hasMeasuredFrame
+    const targetStyles = {
+        border: Object.assign(Object.assign(Object.assign(Object.assign({}, VIEW_FRAME_BORDER_OVERLAY_STYLE), cornerRadiusStyle), borderStyle), frameOverlayShadowStyle),
+        content: Object.assign(Object.assign({}, VIEW_FRAME_CONTENT_STYLE), cornerRadiusStyle),
+        frame: hasMeasuredFrame
             ? Object.assign(Object.assign(Object.assign(Object.assign({}, MEASURED_VIEW_FRAME_STYLE), cornerRadiusStyle), frameShadowStyle), { height: (_g = record.size) === null || _g === void 0 ? void 0 : _g.height, width: (_h = record.size) === null || _h === void 0 ? void 0 : _h.width }) : PREPARING_VIEW_FRAME_STYLE,
+    };
+    const frame = hasMeasuredFrame && record.size
+        ? {
+            bottomLeftRadius: cornerRadii.bottomLeft,
+            bottomRightRadius: cornerRadii.bottomRight,
+            height: record.size.height,
+            topLeftRadius: cornerRadii.topLeft,
+            topRightRadius: cornerRadii.topRight,
+            width: record.size.width,
+        }
+        : null;
+    const transition = useNativeViewFrameTransition({
+        frame,
+        nativeView: NativeView,
+        revision: record.layoutReportRevision,
+        schedule: transitionSchedule,
+        styles: targetStyles,
+        transitionPolicy: ((_k = (_j = record.size) === null || _j === void 0 ? void 0 : _j.transitionPolicy) === null || _k === void 0 ? void 0 : _k.kind) === "timed"
+            ? record.size.transitionPolicy
+            : undefined,
+    });
+    const FrameView = transition.frameView;
+    return createElement(FrameView, {
+        pointerEvents: isPresented ? "auto" : "none",
+        style: transition.frame,
         testID: `gx-native-view-frame-${record.viewId}`,
-    }, createElement(NativeView, {
-        style: Object.assign(Object.assign({}, VIEW_FRAME_CONTENT_STYLE), cornerRadiusStyle),
+    }, createElement(FrameView, {
+        style: transition.content,
         testID: `gx-native-view-frame-content-${record.viewId}`,
-    }, children), createElement(NativeView, {
+    }, children), createElement(FrameView, {
         pointerEvents: "none",
-        style: Object.assign(Object.assign(Object.assign(Object.assign({}, VIEW_FRAME_BORDER_OVERLAY_STYLE), cornerRadiusStyle), borderStyle), frameOverlayShadowStyle),
+        style: transition.border,
         testID: `gx-native-view-frame-border-${record.viewId}`,
     }));
 }

package/dist/native-view-record-controller.d.ts

@@ -1,10 +1,15 @@
+import { type WidgetLayoutTransitionSchedule } from "@getuserfeedback/protocol/host";
+import type { BrowserNavigationAvailabilityPayload } from "@getuserfeedback/protocol/internal/navigation-rpc";
 import { type EventViewSize } from "@getuserfeedback/protocol/internal/view-host-control-messages";
 import type { OpenRequestDispatcher } from "@getuserfeedback/sdk/internal/open-request-dispatcher";
 import type { CoreWebViewHostConnection } from "./core-webview-host-controller.js";
 import type { ViewWebViewHostConnection } from "./view-webview-host-controller.js";
-type NativeViewSizeReport = Omit<EventViewSize, "gen" | "t" | "viewId">;
+type NativeViewSizeReport = Omit<EventViewSize, "gen" | "t" | "viewId"> & {
+    transitionSchedule?: WidgetLayoutTransitionSchedule;
+};
 export type NativeViewRecord = Readonly<{
     allocationId: number;
+    flowId: string | null;
     generation: number;
     isActive: boolean;
     layoutReportRevision: number;
@@ -39,6 +44,7 @@ export type NativeViewRecordController = {
 type NativeOpenRequestObserver = (payload: Parameters<OpenRequestDispatcher["dispatch"]>[0]) => ReturnType<OpenRequestDispatcher["dispatch"]>;
 export declare function createNativeViewRecordController(input: {
     coreConnection: CoreWebViewHostConnection;
+    getBrowserNavigationAvailability?: () => BrowserNavigationAvailabilityPayload | undefined;
     onError: (error: Error) => void;
     observeOpenRequest?: NativeOpenRequestObserver;
 }): NativeViewRecordController;