@getuserfeedback/react-native 3.0.81 → 3.0.90

package/dist/index.js

@@ -9,10 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { assertNoSegmentExternalIdsInValueArgument, CommandSettlementError, CommandSettlementTimeoutError, createFlowCommandHandleController, getFlowHandleFromSettlementDetail, getWidgetLayoutPlanNowMs, } from "@getuserfeedback/protocol/host";
+import { CommandSettlementError, CommandSettlementTimeoutError, createFlowCommandHandleController, getFlowHandleFromSettlementDetail, getWidgetLayoutPlanNowMs, } from "@getuserfeedback/protocol/host";
 import { parseWebViewTransportNativeMessage } from "@getuserfeedback/protocol/webview-transport";
 import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { useResolvedHostViewport } from "./host-viewport.js";
+import { createNativeProviderClient, parseRequiredString, } from "./native-provider-client.js";
 import { createProviderCommandEnvelope, REACT_NATIVE_LOADER_CLIENT_META, toCommandSettlementError, toReactNativeOneShotCommand, } from "./provider-command-helpers.js";
 import { useProviderCommandTransport } from "./provider-command-transport.js";
 import { createProviderWidgetHostLifecycleController, HIDDEN_PROVIDER_WIDGET_HOST_VISIBILITY, } from "./provider-widget-host-lifecycle.js";
@@ -136,13 +137,6 @@ const normalizeOptionalString = (value) => {
     const normalized = value.trim();
     return normalized.length > 0 ? normalized : undefined;
 };
-const resolveRequiredString = (name, value) => {
-    const normalized = normalizeOptionalString(value);
-    if (normalized === undefined) {
-        throw new Error(`${name} must be a non-empty string`);
-    }
-    return normalized;
-};
 const toJsonKey = (value) => JSON.stringify(value);
 const toStableHash = (value) => {
     const json = toJsonKey(value);
@@ -171,33 +165,6 @@ function resolveReactNativeComponents() {
         };
     }
 }
-const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
-    if (typeof identifyInput === "string") {
-        assertNoSegmentExternalIdsInValueArgument({
-            argument: traitsOrOptions,
-            commandName: "identify",
-            valueArgumentName: "traits",
-            callShape: "identify(userId, traits, { externalIds })",
-        });
-        return {
-            kind: "identify",
-            userId: resolveRequiredString("userId", identifyInput),
-            traits: traitsOrOptions,
-            options,
-        };
-    }
-    assertNoSegmentExternalIdsInValueArgument({
-        argument: identifyInput,
-        commandName: "identify",
-        valueArgumentName: "traits",
-        callShape: "identify(traits, { externalIds })",
-    });
-    return {
-        kind: "identify",
-        traits: identifyInput,
-        options: options !== null && options !== void 0 ? options : traitsOrOptions,
-    };
-};
 export function GetUserFeedbackProvider({ autoInit = true, children, commandTimeoutMs = DEFAULT_COMMAND_TIMEOUT_MS, configureOptions, hostViewport, instanceId: instanceIdProp, initOptions, loaderUrl, onCommandError, onInvalidWebMessage, onWebMessage, source, webViewComponent, webViewProps, }) {
     var _a;
     const { View: NativeView } = useMemo(resolveReactNativeComponents, []);
@@ -383,7 +350,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         reportCommandError,
     };
     const flow = useCallback((flowId) => {
-        const normalizedFlowId = resolveRequiredString("flowId", flowId);
+        const normalizedFlowId = parseRequiredString("flowId", flowId);
         const existing = flowRunsRef.current.get(normalizedFlowId);
         if (existing) {
             return existing;
@@ -541,59 +508,32 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         disposeCommandTransport(new Error(PROVIDER_UNMOUNTED_ERROR_MESSAGE));
     }, [disposeCommandTransport]);
     const getNativeMessages = useCallback(() => nativeMessagesRef.current, [nativeMessagesRef]);
-    const contextValue = useMemo(() => ({
-        instanceId,
-        get nativeMessages() {
-            return getNativeMessages();
-        },
-        enqueueCommand,
-        configure: (opts, options) => enqueueCommand({ kind: "configure", opts }, options),
-        identify: ((identifyInput, traitsOrOptions, options) => enqueueCommand(toIdentifyCommandPayload(identifyInput, traitsOrOptions, options))),
-        track: (eventName, properties, options) => {
-            assertNoSegmentExternalIdsInValueArgument({
-                argument: properties,
-                commandName: "track",
-                valueArgumentName: "properties",
-                callShape: "track(eventName, properties, { externalIds })",
-            });
-            return enqueueCommand(Object.assign(Object.assign({ kind: "track", origin: "customer", event: resolveRequiredString("eventName", eventName) }, (properties === undefined ? {} : { properties })), ((options === null || options === void 0 ? void 0 : options.externalIds) === undefined
-                ? {}
-                : { context: { externalIds: options.externalIds } })));
-        },
-        open: (flowId, options, commandOptions) => {
-            const normalizedFlowId = resolveRequiredString("flowId", flowId);
-            return enqueueCommand({
-                kind: "open",
-                flowId: normalizedFlowId,
-                hideCloseButton: options === null || options === void 0 ? void 0 : options.hideCloseButton,
-            }, commandOptions);
-        },
-        prefetch: (flowId, options) => {
-            const normalizedFlowId = resolveRequiredString("flowId", flowId);
-            return enqueueCommand({
-                kind: "prefetch",
-                flowId: normalizedFlowId,
-            }, options);
-        },
-        prerender: (flowId, options, commandOptions) => {
-            const normalizedFlowId = resolveRequiredString("flowId", flowId);
-            return enqueueCommand({
-                kind: "prerender",
-                flowId: normalizedFlowId,
-                hideCloseButton: options === null || options === void 0 ? void 0 : options.hideCloseButton,
-            }, commandOptions);
-        },
-        flow,
-        close: (flowHandleId, options) => enqueueCommand(Object.assign({ kind: "close" }, (flowHandleId === undefined
-            ? {}
-            : {
-                flowHandleId: resolveRequiredString("flowHandleId", flowHandleId),
-            })), options),
-        reset: (options) => enqueueCommand({ kind: "reset" }, options),
-        updateHostContext: (context, options) => enqueueCommand({ kind: "updateHostContext", context }, options),
-        emitHostSignal: (name, data, options) => enqueueCommand(Object.assign({ kind: "emitHostSignal", name: resolveRequiredString("name", name) }, (data === undefined ? {} : { data })), options),
-        handleWebMessage,
-    }), [enqueueCommand, flow, getNativeMessages, handleWebMessage, instanceId]);
+    const contextValue = useMemo(() => {
+        const client = createNativeProviderClient({
+            dispatchCommand: enqueueCommand,
+            flow,
+            instanceId,
+        });
+        return {
+            close: client.close,
+            configure: client.configure,
+            emitHostSignal: client.emitHostSignal,
+            enqueueCommand,
+            flow: client.flow,
+            handleWebMessage,
+            identify: client.identify,
+            instanceId: client.instanceId,
+            get nativeMessages() {
+                return getNativeMessages();
+            },
+            open: client.open,
+            prefetch: client.prefetch,
+            prerender: client.prerender,
+            reset: client.reset,
+            track: client.track,
+            updateHostContext: client.updateHostContext,
+        };
+    }, [enqueueCommand, flow, getNativeMessages, handleWebMessage, instanceId]);
     const previousSheetHostLayoutUpdateRef = useRef(undefined);
     const consumedTransitionPolicySequenceRef = useRef(undefined);
     useEffect(() => {

package/dist/native-direct-command-session.js

@@ -1,7 +1,7 @@
 import { getFlowHandleFromSettlementDetail } from "@getuserfeedback/protocol/host";
 import { toCoreCommandPayload, } from "@getuserfeedback/protocol/internal/public-core-command";
-// TODO(migration): Route the public provider client through this core-ordered direct session.
-// [from=native-core-ordered-command-session] [to=native-provider-direct-session] [scope=slice] [principle=core-owned-flow-lifecycle] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=180]
+// TODO(migration): Route the public provider client through this core-ordered direct session after native per-view presentation is complete.
+// [from=native-view-presentation-behavior] [to=native-provider-direct-session] [scope=slice] [principle=core-owned-flow-lifecycle] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=190]
 export function createNativeDirectCommandSession(input) {
     const dispatchToCore = (envelope, command) => {
         const coreEnvelope = Object.assign(Object.assign({}, envelope), { command: toCoreCommandPayload(command) });

package/dist/native-provider-client.d.ts

@@ -0,0 +1,64 @@
+import type { AppEventExternalId, AppEventJsonValue, PublicCommandPayload } from "@getuserfeedback/protocol";
+import type { ConfigureOptions } from "@getuserfeedback/sdk";
+type IdentifyTraits = Record<string, unknown>;
+type TrackProperties = Record<string, AppEventJsonValue>;
+type OpenCommand = Extract<PublicCommandPayload, {
+    kind: "open";
+}>;
+type PrerenderCommand = Extract<PublicCommandPayload, {
+    kind: "prerender";
+}>;
+type NativeProviderClientCommand = Exclude<Extract<PublicCommandPayload, {
+    kind: "configure" | "identify" | "track" | "open" | "prefetch" | "prerender" | "close" | "reset" | "updateHostContext" | "emitHostSignal";
+}>, OpenCommand> | (Omit<OpenCommand, "container"> & {
+    container?: never;
+});
+type IdentifyOptions = {
+    externalIds?: AppEventExternalId[];
+};
+type TrackOptions = {
+    externalIds?: AppEventExternalId[];
+};
+type OpenOptions = Pick<OpenCommand, "hideCloseButton">;
+type PrerenderOptions = Pick<PrerenderCommand, "hideCloseButton">;
+type OpenFlowOptions = Pick<OpenCommand, "hideCloseButton" | "metadata">;
+type PrerenderFlowOptions = Pick<PrerenderCommand, "hideCloseButton">;
+type HostContext = Extract<PublicCommandPayload, {
+    kind: "updateHostContext";
+}>["context"];
+interface NativeProviderCommandOptions {
+    idempotencyKey?: string;
+}
+export interface ReactNativeFlowRun {
+    readonly flowId: string;
+    open: (options?: OpenFlowOptions) => Promise<void>;
+    prefetch: () => Promise<void>;
+    prerender: (options?: PrerenderFlowOptions) => Promise<void>;
+    close: () => Promise<void>;
+}
+export interface NativeProviderClient<TResult> {
+    readonly instanceId: string;
+    configure: (opts: ConfigureOptions, options?: NativeProviderCommandOptions) => Promise<TResult>;
+    identify: {
+        (userId: string, traits?: IdentifyTraits, options?: IdentifyOptions): Promise<TResult>;
+        (traits: IdentifyTraits, placeholder: undefined, options?: IdentifyOptions): Promise<TResult>;
+        (traits: IdentifyTraits, options?: IdentifyOptions): Promise<TResult>;
+    };
+    track: (eventName: string, properties?: TrackProperties, options?: TrackOptions) => Promise<TResult>;
+    open: (flowId: string, options?: OpenOptions, commandOptions?: NativeProviderCommandOptions) => Promise<TResult>;
+    prefetch: (flowId: string, options?: NativeProviderCommandOptions) => Promise<TResult>;
+    prerender: (flowId: string, options?: PrerenderOptions, commandOptions?: NativeProviderCommandOptions) => Promise<TResult>;
+    flow: (flowId: string) => ReactNativeFlowRun;
+    close: (flowHandleId?: string, options?: NativeProviderCommandOptions) => Promise<TResult>;
+    reset: (options?: NativeProviderCommandOptions) => Promise<TResult>;
+    updateHostContext: (context: HostContext, options?: NativeProviderCommandOptions) => Promise<TResult>;
+    emitHostSignal: (name: string, data?: unknown, options?: NativeProviderCommandOptions) => Promise<TResult>;
+}
+type NativeProviderClientOptions<TResult> = {
+    dispatchCommand: (command: NativeProviderClientCommand, options?: NativeProviderCommandOptions) => Promise<TResult>;
+    flow: (flowId: string) => ReactNativeFlowRun;
+    instanceId: string;
+};
+export declare const parseRequiredString: (name: string, value?: string) => string;
+export declare function createNativeProviderClient<TResult>({ dispatchCommand, flow, instanceId, }: NativeProviderClientOptions<TResult>): NativeProviderClient<TResult>;
+export {};

package/dist/native-provider-client.js

@@ -0,0 +1,76 @@
+import { assertNoSegmentExternalIdsInValueArgument } from "@getuserfeedback/protocol/host";
+export const parseRequiredString = (name, value) => {
+    const normalized = value === null || value === void 0 ? void 0 : value.trim();
+    if (!normalized) {
+        throw new Error(`${name} must be a non-empty string`);
+    }
+    return normalized;
+};
+const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
+    if (typeof identifyInput === "string") {
+        assertNoSegmentExternalIdsInValueArgument({
+            argument: traitsOrOptions,
+            commandName: "identify",
+            valueArgumentName: "traits",
+            callShape: "identify(userId, traits, { externalIds })",
+        });
+        return {
+            kind: "identify",
+            userId: parseRequiredString("userId", identifyInput),
+            traits: traitsOrOptions,
+            options,
+        };
+    }
+    assertNoSegmentExternalIdsInValueArgument({
+        argument: identifyInput,
+        commandName: "identify",
+        valueArgumentName: "traits",
+        callShape: "identify(traits, { externalIds })",
+    });
+    return {
+        kind: "identify",
+        traits: identifyInput,
+        options: options !== null && options !== void 0 ? options : traitsOrOptions,
+    };
+};
+export function createNativeProviderClient({ dispatchCommand, flow, instanceId, }) {
+    return {
+        instanceId,
+        configure: (opts, options) => dispatchCommand({ kind: "configure", opts }, options),
+        identify: ((identifyInput, traitsOrOptions, options) => dispatchCommand(toIdentifyCommandPayload(identifyInput, traitsOrOptions, options))),
+        track: (eventName, properties, options) => {
+            assertNoSegmentExternalIdsInValueArgument({
+                argument: properties,
+                commandName: "track",
+                valueArgumentName: "properties",
+                callShape: "track(eventName, properties, { externalIds })",
+            });
+            return dispatchCommand(Object.assign(Object.assign({ kind: "track", origin: "customer", event: parseRequiredString("eventName", eventName) }, (properties === undefined ? {} : { properties })), ((options === null || options === void 0 ? void 0 : options.externalIds) === undefined
+                ? {}
+                : { context: { externalIds: options.externalIds } })));
+        },
+        open: (flowId, options, commandOptions) => dispatchCommand({
+            kind: "open",
+            flowId: parseRequiredString("flowId", flowId),
+            hideCloseButton: options === null || options === void 0 ? void 0 : options.hideCloseButton,
+        }, commandOptions),
+        prefetch: (flowId, options) => dispatchCommand({
+            kind: "prefetch",
+            flowId: parseRequiredString("flowId", flowId),
+        }, options),
+        prerender: (flowId, options, commandOptions) => dispatchCommand({
+            kind: "prerender",
+            flowId: parseRequiredString("flowId", flowId),
+            hideCloseButton: options === null || options === void 0 ? void 0 : options.hideCloseButton,
+        }, commandOptions),
+        flow,
+        close: (flowHandleId, options) => dispatchCommand(Object.assign({ kind: "close" }, (flowHandleId === undefined
+            ? {}
+            : {
+                flowHandleId: parseRequiredString("flowHandleId", flowHandleId),
+            })), options),
+        reset: (options) => dispatchCommand({ kind: "reset" }, options),
+        updateHostContext: (context, options) => dispatchCommand({ kind: "updateHostContext", context }, options),
+        emitHostSignal: (name, data, options) => dispatchCommand(Object.assign({ kind: "emitHostSignal", name: parseRequiredString("name", name) }, (data === undefined ? {} : { data })), options),
+    };
+}

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

@@ -15,6 +15,7 @@ export type NativeRuntimeRootProps = {
     onInvalidMessage?: (error: Error, value: unknown) => void;
     onStartupTerminalError?: (error: Error) => void;
     startupCommandSettlementTimeoutMs?: number;
+    viewNativeViewComponent?: NativeViewHostProjectionProps["nativeViewComponent"];
     viewWebViewComponent?: NativeViewHostProjectionProps["webViewComponent"];
     viewWebViewProps?: NativeViewHostProjectionProps["webViewProps"];
 };
@@ -35,6 +36,6 @@ type NativeProviderRuntimeProps = Omit<NativeRuntimeRootProps, "onCommandSession
     instanceId: string;
     onCommandSessionChange?: (session: NativeDirectCommandSession | null) => void;
 };
-export declare function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, onCommandSessionChange, onError, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs, startupCommands, viewWebViewComponent, viewWebViewProps, }: NativeRuntimeRootProps): ReactElement;
+export declare function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, onCommandSessionChange, onError, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs, startupCommands, viewNativeViewComponent, viewWebViewComponent, viewWebViewProps, }: NativeRuntimeRootProps): ReactElement;
 export declare function NativeProviderRuntime({ initOptions, initialConfigureOptions, instanceId, onCommandSessionChange, onError, ...runtimeProps }: NativeProviderRuntimeProps): ReactElement;
 export {};

package/dist/native-runtime-root.js

@@ -43,7 +43,7 @@ async function dispatchStartupCommands(input) {
         });
     }
 }
-export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, onCommandSessionChange, onError, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs = DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS, startupCommands, viewWebViewComponent, viewWebViewProps, }) {
+export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, onCommandSessionChange, onError, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs = DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS, startupCommands, viewNativeViewComponent, viewWebViewComponent, viewWebViewProps, }) {
     const [coreHostRevision, setCoreHostRevision] = useState(0);
     const [session, setSession] = useState(null);
     const sessionRef = useRef(null);
@@ -213,6 +213,7 @@ export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewPr
         : createElement(NativeViewHostProjection, {
             controller: session.controller,
             key: session.key,
+            nativeViewComponent: viewNativeViewComponent,
             onInvalidMessage,
             webViewComponent: viewWebViewComponent,
             webViewProps: viewWebViewProps,

package/dist/native-view-host-projection.d.ts

@@ -3,7 +3,8 @@ import type { NativeViewRecordController } from "./native-view-record-controller
 export type NativeViewHostProjectionProps = {
     controller: NativeViewRecordController;
     onInvalidMessage?: (error: Error, value: unknown) => void;
+    nativeViewComponent?: ComponentType<Record<string, unknown>>;
     webViewComponent?: ComponentType<Record<string, unknown>>;
     webViewProps?: Record<string, unknown>;
 };
-export declare function NativeViewHostProjection({ controller, onInvalidMessage, webViewComponent, webViewProps, }: NativeViewHostProjectionProps): ReactElement;
+export declare function NativeViewHostProjection({ controller, nativeViewComponent, onInvalidMessage, webViewComponent, webViewProps, }: NativeViewHostProjectionProps): ReactElement;

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

@@ -1,6 +1,7 @@
-import { createElement, Fragment, useCallback, useEffect, useRef, useSyncExternalStore, } from "react";
+import { createElement, Fragment, useCallback, useEffect, useMemo, useRef, useSyncExternalStore, } from "react";
+import { NativeViewPresentationSurface } from "./native-view-presentation-surface.js";
 import { ViewWebViewHost } from "./view-webview-host.js";
-function NativeViewHostProjectionEntry({ controller, onInvalidMessage, record, webViewComponent, webViewProps, }) {
+function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInvalidMessage, record, webViewComponent, webViewProps, }) {
     const detachConnectionRef = useRef(null);
     const detachConnection = useCallback(() => {
         const detach = detachConnectionRef.current;
@@ -8,15 +9,17 @@ function NativeViewHostProjectionEntry({ controller, onInvalidMessage, record, w
         detach === null || detach === void 0 ? void 0 : detach();
     }, []);
     const handleConnected = useCallback((connection) => {
-        detachConnection();
         const controllerDetach = controller.attachViewReadinessConnection({
             allocationId: record.allocationId,
             connection,
         });
-        detachConnectionRef.current = controllerDetach;
-    }, [controller, detachConnection, record.allocationId]);
+        if (controllerDetach) {
+            detachConnectionRef.current = controllerDetach;
+        }
+    }, [controller, record.allocationId]);
+    const presentedWebViewProps = useMemo(() => (Object.assign(Object.assign({}, webViewProps), { style: [webViewProps === null || webViewProps === void 0 ? void 0 : webViewProps.style, { flex: 1 }] })), [webViewProps]);
     useEffect(() => detachConnection, [detachConnection]);
-    return createElement(ViewWebViewHost, {
+    return createElement(NativeViewPresentationSurface, { nativeViewComponent, record }, createElement(ViewWebViewHost, {
         generation: record.generation,
         onConnected: handleConnected,
         onDisconnected: detachConnection,
@@ -24,13 +27,14 @@ function NativeViewHostProjectionEntry({ controller, onInvalidMessage, record, w
         srcdoc: record.srcdoc,
         viewId: record.viewId,
         webViewComponent,
-        webViewProps,
-    });
+        webViewProps: presentedWebViewProps,
+    }));
 }
-export function NativeViewHostProjection({ controller, onInvalidMessage, webViewComponent, webViewProps, }) {
+export function NativeViewHostProjection({ controller, nativeViewComponent, onInvalidMessage, webViewComponent, webViewProps, }) {
     const records = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     return createElement(Fragment, null, records.map((record) => createElement(NativeViewHostProjectionEntry, {
         controller,
+        nativeViewComponent,
         onInvalidMessage,
         record,
         webViewComponent,

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

@@ -0,0 +1,7 @@
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
+import type { NativeViewRecord } from "./native-view-record-controller.js";
+export declare function NativeViewPresentationSurface({ children, nativeViewComponent, record, }: {
+    children?: ReactNode;
+    nativeViewComponent?: ComponentType<Record<string, unknown>>;
+    record: NativeViewRecord;
+}): ReactElement;

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

@@ -0,0 +1,82 @@
+import { createElement, } from "react";
+import { toNativeWidgetCornerRadii } from "./native-widget-corner-radii.js";
+import { toNativeWidgetResolvedBorderStyle } from "./native-widget-frame-border.js";
+const HOST_SURFACE_STYLE = {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "flex-end",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+};
+const HIDDEN_HOST_SURFACE_STYLE = {
+    opacity: 0,
+};
+const PRESENTED_HOST_SURFACE_STYLE = {
+    zIndex: 2147483647,
+};
+const TOP_PLACEMENT_STYLE = {
+    justifyContent: "flex-start",
+};
+const BOTTOM_PLACEMENT_STYLE = {
+    justifyContent: "flex-end",
+};
+const PREPARING_VIEW_FRAME_STYLE = {
+    height: "100%",
+    width: "100%",
+};
+const PRESENTED_VIEW_FRAME_STYLE = {
+    maxHeight: "100%",
+    maxWidth: "100%",
+    overflow: "hidden",
+};
+const VIEW_FRAME_BORDER_OVERLAY_STYLE = {
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+};
+const resolveNativeView = () => {
+    const reactNativeModule = require("react-native");
+    if (!reactNativeModule.View) {
+        throw new Error("react-native must export View to present native views");
+    }
+    return reactNativeModule.View;
+};
+// TODO(migration): Project shadow appearance onto Core-owned native frames before layering and scoped dismissal.
+// [from=native-frame-border-shadow-projection] [to=native-frame-shadow-projection] [scope=slice] [principle=core-owned-flow-lifecycle] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=189]
+export function NativeViewPresentationSurface({ children, nativeViewComponent, record, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const NativeView = nativeViewComponent !== null && nativeViewComponent !== void 0 ? nativeViewComponent : resolveNativeView();
+    const isPresented = record.activationState === "active" && record.size !== null;
+    const cornerRadii = toNativeWidgetCornerRadii((_a = record.size) === null || _a === void 0 ? void 0 : _a.frameAppearance);
+    const borderStyle = toNativeWidgetResolvedBorderStyle(((_c = (_b = record.size) === null || _b === void 0 ? void 0 : _b.frameAppearance) === null || _c === void 0 ? void 0 : _c.kind) === "page"
+        ? record.size.frameAppearance.resolvedBorder
+        : undefined);
+    const cornerRadiusStyle = {
+        borderBottomLeftRadius: cornerRadii.bottomLeft,
+        borderBottomRightRadius: cornerRadii.bottomRight,
+        borderTopLeftRadius: cornerRadii.topLeft,
+        borderTopRightRadius: cornerRadii.topRight,
+    };
+    return createElement(NativeView, {
+        pointerEvents: isPresented ? "box-none" : "none",
+        style: Object.assign(Object.assign(Object.assign({}, HOST_SURFACE_STYLE), (((_d = record.size) === null || _d === void 0 ? void 0 : _d.placement) === "docked-top"
+            ? TOP_PLACEMENT_STYLE
+            : BOTTOM_PLACEMENT_STYLE)), (isPresented
+            ? PRESENTED_HOST_SURFACE_STYLE
+            : HIDDEN_HOST_SURFACE_STYLE)),
+        testID: `gx-native-view-presentation-${record.viewId}`,
+    }, createElement(NativeView, {
+        pointerEvents: isPresented ? "auto" : "none",
+        style: isPresented
+            ? Object.assign(Object.assign(Object.assign({}, PRESENTED_VIEW_FRAME_STYLE), cornerRadiusStyle), { height: (_e = record.size) === null || _e === void 0 ? void 0 : _e.height, width: (_f = record.size) === null || _f === void 0 ? void 0 : _f.width }) : PREPARING_VIEW_FRAME_STYLE,
+        testID: `gx-native-view-frame-${record.viewId}`,
+    }, children, createElement(NativeView, {
+        pointerEvents: "none",
+        style: Object.assign(Object.assign(Object.assign({}, VIEW_FRAME_BORDER_OVERLAY_STYLE), cornerRadiusStyle), borderStyle),
+        testID: `gx-native-view-frame-border-${record.viewId}`,
+    })));
+}

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

@@ -1,3 +1,4 @@
+import { type OpenRequestMetadata } from "@getuserfeedback/protocol/internal/core-view-host-actions";
 import { type EventViewSize } from "@getuserfeedback/protocol/internal/view-host-control-messages";
 import type { CoreWebViewHostConnection } from "./core-webview-host-controller.js";
 import type { ViewWebViewHostConnection } from "./view-webview-host-controller.js";
@@ -8,6 +9,7 @@ export type NativeViewRecord = Readonly<{
     activationState: NativeViewActivationState;
     generation: number;
     instanceId: string;
+    openRequest: Readonly<OpenRequestMetadata> | undefined;
     size: NativeViewSizeReport | null;
     srcdoc: string;
     viewId: string;

package/dist/native-view-record-controller.js

@@ -28,21 +28,26 @@ export function createNativeViewRecordController(input) {
             listener();
         }
     };
-    const ensurePendingActivation = (viewId) => {
+    const ensurePendingActivation = (viewId, openRequest) => {
         const existing = pendingActivations.get(viewId);
         if (existing) {
+            existing.openRequest = openRequest;
             return existing;
         }
-        const created = createViewActivationController();
+        const created = {
+            activation: createViewActivationController(),
+            openRequest,
+        };
         pendingActivations.set(viewId, created);
         return created;
     };
     const removeEntry = (entry) => {
-        var _a;
         if (entries.get(entry.viewId) !== entry) {
             return false;
         }
-        (_a = entry.viewReadinessDetach) === null || _a === void 0 ? void 0 : _a.call(entry);
+        const detachViewReadiness = entry.viewReadinessDetach;
+        entry.viewReadinessDetach = null;
+        detachViewReadiness === null || detachViewReadiness === void 0 ? void 0 : detachViewReadiness();
         entries.delete(entry.viewId);
         if (!disposed) {
             notify();
@@ -58,7 +63,8 @@ export function createNativeViewRecordController(input) {
         if (!preparation) {
             return;
         }
-        const activation = (_a = pendingActivations.get(action.viewId)) !== null && _a !== void 0 ? _a : createViewActivationController();
+        const pendingActivation = pendingActivations.get(action.viewId);
+        const activation = (_a = pendingActivation === null || pendingActivation === void 0 ? void 0 : pendingActivation.activation) !== null && _a !== void 0 ? _a : createViewActivationController();
         pendingActivations.delete(action.viewId);
         activation.startPrerender();
         nextAllocationId += 1;
@@ -67,6 +73,9 @@ export function createNativeViewRecordController(input) {
             allocationId: nextAllocationId,
             generation: action.gen,
             instanceId: action.instanceId,
+            openRequest: pendingActivation
+                ? pendingActivation.openRequest
+                : toOpenRequestMetadata(action.openRequest),
             preparation,
             preparationState: "claimed",
             size: null,
@@ -81,12 +90,19 @@ export function createNativeViewRecordController(input) {
         notify();
     };
     const handleActivate = (action) => {
-        var _a;
         const entry = entries.get(action.viewId);
-        const activation = (_a = entry === null || entry === void 0 ? void 0 : entry.activation) !== null && _a !== void 0 ? _a : ensurePendingActivation(action.viewId);
+        const openRequest = toOpenRequestMetadata(action.openRequest);
+        const activation = entry
+            ? entry.activation
+            : ensurePendingActivation(action.viewId, openRequest).activation;
         const previousState = activation.getState();
         activation.requestActivation();
-        if (entry && activation.getState() !== previousState) {
+        if (!entry) {
+            return;
+        }
+        const openRequestChanged = !areOpenRequestsEqual(entry.openRequest, openRequest);
+        entry.openRequest = openRequest;
+        if (activation.getState() !== previousState || openRequestChanged) {
             notify();
         }
     };
@@ -187,6 +203,12 @@ export function createNativeViewRecordController(input) {
                 connectionReadiness.release();
                 if (entry.viewReadinessDetach === detach) {
                     entry.viewReadinessDetach = null;
+                    if (entry.size !== null) {
+                        entry.size = null;
+                        if (!disposed && entries.get(viewId) === entry) {
+                            notify();
+                        }
+                    }
                 }
             };
             const attemptReadinessDelivery = (isRetry = false) => {
@@ -281,6 +303,10 @@ export function createNativeViewRecordController(input) {
             }
             entry.viewReadinessDetach = detach;
             previousDetach === null || previousDetach === void 0 ? void 0 : previousDetach();
+            if (entry.size !== null) {
+                entry.size = null;
+                notify();
+            }
             subscribed = true;
             for (const message of bufferedMessages) {
                 handleMessage(message);
@@ -332,11 +358,35 @@ function toRecord(entry) {
         allocationId: entry.allocationId,
         generation: entry.generation,
         instanceId: entry.instanceId,
+        openRequest: entry.openRequest,
         size: entry.size,
         srcdoc: entry.srcdoc,
         viewId: entry.viewId,
     });
 }
+function toOpenRequestMetadata(openRequest) {
+    return openRequest === undefined
+        ? undefined
+        : Object.freeze(Object.assign({}, openRequest));
+}
+function areOpenRequestsEqual(left, right) {
+    if (left === right) {
+        return true;
+    }
+    if (!left || !right || left.source !== right.source) {
+        return false;
+    }
+    if (left.source === "targeting" && right.source === "targeting") {
+        return left.flowId === right.flowId;
+    }
+    if (left.source !== "command" || right.source !== "command") {
+        return false;
+    }
+    return (left.flowId === right.flowId &&
+        left.requestId === right.requestId &&
+        left.flowHandleId === right.flowHandleId &&
+        left.hideCloseButton === right.hideCloseButton);
+}
 function toViewSizeReport(event) {
     return {
         width: event.width,

package/dist/native-widget-corner-radii.d.ts

@@ -0,0 +1,10 @@
+import type { WidgetFrameAppearance, WidgetFrameResolvedBorderRadius } from "@getuserfeedback/protocol/host";
+export type NativeWidgetCornerRadii = {
+    bottomLeft: number;
+    bottomRight: number;
+    topLeft: number;
+    topRight: number;
+};
+export declare function safeParseNativeWidgetCanonicalRadii(value: string): NativeWidgetCornerRadii | undefined;
+export declare function toNativeWidgetConservativeResolvedCornerRadii(resolved: WidgetFrameResolvedBorderRadius): NativeWidgetCornerRadii;
+export declare function toNativeWidgetCornerRadii(appearance?: WidgetFrameAppearance): NativeWidgetCornerRadii;

package/dist/native-widget-corner-radii.js

@@ -0,0 +1,54 @@
+const CLEARED_NATIVE_WIDGET_CORNER_RADII = {
+    bottomLeft: 0,
+    bottomRight: 0,
+    topLeft: 0,
+    topRight: 0,
+};
+const CANONICAL_PX_PATTERN = /^(?:0|[1-9]\d*)(?:\.\d+)?px$/;
+const safeParseCanonicalPx = (value) => {
+    if (!CANONICAL_PX_PATTERN.test(value)) {
+        return undefined;
+    }
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+};
+export function safeParseNativeWidgetCanonicalRadii(value) {
+    if (value.includes("/")) {
+        return undefined;
+    }
+    const radii = value.trim().split(/\s+/).map(safeParseCanonicalPx);
+    if (radii.length === 0 ||
+        radii.length > 4 ||
+        radii.some((radius) => radius === undefined)) {
+        return undefined;
+    }
+    const [topLeft, topRight = topLeft, bottomRight = topLeft, bottomLeft = topRight,] = radii;
+    if (topLeft === undefined ||
+        topRight === undefined ||
+        bottomRight === undefined ||
+        bottomLeft === undefined) {
+        return undefined;
+    }
+    return { bottomLeft, bottomRight, topLeft, topRight };
+}
+export function toNativeWidgetConservativeResolvedCornerRadii(resolved) {
+    // React Native exposes one scalar per corner, so use a smaller circle that
+    // does not exceed the authored ellipse on either axis.
+    return {
+        bottomLeft: Math.min(resolved.bottomLeft.horizontalPx, resolved.bottomLeft.verticalPx),
+        bottomRight: Math.min(resolved.bottomRight.horizontalPx, resolved.bottomRight.verticalPx),
+        topLeft: Math.min(resolved.topLeft.horizontalPx, resolved.topLeft.verticalPx),
+        topRight: Math.min(resolved.topRight.horizontalPx, resolved.topRight.verticalPx),
+    };
+}
+export function toNativeWidgetCornerRadii(appearance) {
+    var _a;
+    if (appearance === undefined || appearance.kind === "none") {
+        return Object.assign({}, CLEARED_NATIVE_WIDGET_CORNER_RADII);
+    }
+    const resolved = appearance.resolvedBorderRadius;
+    if (resolved !== undefined) {
+        return toNativeWidgetConservativeResolvedCornerRadii(resolved);
+    }
+    return ((_a = safeParseNativeWidgetCanonicalRadii(appearance.borderRadius)) !== null && _a !== void 0 ? _a : Object.assign({}, CLEARED_NATIVE_WIDGET_CORNER_RADII));
+}

package/dist/native-widget-frame-border.d.ts

@@ -0,0 +1,7 @@
+import type { WidgetFrameResolvedBorder } from "@getuserfeedback/protocol/host";
+export type NativeWidgetFrameBorderStyle = {
+    borderColor: string;
+    borderStyle: "dashed" | "dotted" | "solid";
+    borderWidth: number;
+};
+export declare function toNativeWidgetResolvedBorderStyle(border?: WidgetFrameResolvedBorder): NativeWidgetFrameBorderStyle;

package/dist/native-widget-frame-border.js

@@ -0,0 +1,21 @@
+const CLEARED_NATIVE_WIDGET_FRAME_BORDER_STYLE = {
+    borderColor: "transparent",
+    borderStyle: "solid",
+    borderWidth: 0,
+};
+export function toNativeWidgetResolvedBorderStyle(border) {
+    if (border === undefined ||
+        border.widthPx === 0 ||
+        border.style === "none" ||
+        border.style === "hidden") {
+        return Object.assign({}, CLEARED_NATIVE_WIDGET_FRAME_BORDER_STYLE);
+    }
+    const { alpha, blue, green, red } = border.color;
+    return {
+        borderColor: `rgba(${red}, ${green}, ${blue}, ${alpha})`,
+        borderStyle: border.style === "dashed" || border.style === "dotted"
+            ? border.style
+            : "solid",
+        borderWidth: border.widthPx,
+    };
+}

package/dist/native-widget-frame-shadow.d.ts

@@ -0,0 +1,30 @@
+import type { WidgetFrameResolvedBoxShadowLayer } from "@getuserfeedback/protocol/host";
+export type NativeWidgetFrameBoxShadowValue = {
+    blurRadius: number;
+    color: string;
+    inset: boolean;
+    offsetX: number;
+    offsetY: number;
+    spreadDistance: number;
+};
+type NativeWidgetFrameLegacyShadowStyle = {
+    elevation: number;
+    shadowColor: string;
+    shadowOffset: {
+        height: number;
+        width: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+};
+export type NativeWidgetFrameShadowProjection = {
+    kind: "clear";
+} | {
+    boxShadow: NativeWidgetFrameBoxShadowValue[];
+    fallbackStyle: NativeWidgetFrameLegacyShadowStyle;
+    kind: "resolved";
+};
+export type NativeWidgetBoxShadowSupport = "all" | "none" | "outset";
+export declare function toNativeWidgetFrameShadow(layers?: WidgetFrameResolvedBoxShadowLayer[]): NativeWidgetFrameShadowProjection;
+export declare function toNativeWidgetSupportedBoxShadow(shadow: NativeWidgetFrameShadowProjection, support?: NativeWidgetBoxShadowSupport): NativeWidgetFrameBoxShadowValue[] | undefined;
+export {};

package/dist/native-widget-frame-shadow.js

@@ -0,0 +1,49 @@
+const CLEARED_NATIVE_WIDGET_FRAME_SHADOW_STYLE = {
+    elevation: 0,
+    shadowColor: "transparent",
+    shadowOffset: { height: 0, width: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+};
+const toNativeWidgetFrameColor = (color) => `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha})`;
+const toNativeWidgetFrameBoxShadow = (layers) => layers.map((layer) => ({
+    blurRadius: layer.blurRadiusPx,
+    color: toNativeWidgetFrameColor(layer.color),
+    inset: layer.inset,
+    offsetX: layer.offsetXPx,
+    offsetY: layer.offsetYPx,
+    spreadDistance: layer.spreadRadiusPx,
+}));
+const toNativeWidgetFrameLegacyShadow = (layers) => {
+    const layer = layers.find((candidate) => !candidate.inset && candidate.color.alpha > 0);
+    if (layer === undefined) {
+        return Object.assign({}, CLEARED_NATIVE_WIDGET_FRAME_SHADOW_STYLE);
+    }
+    return {
+        elevation: Math.max(1, Math.ceil(layer.blurRadiusPx + Math.max(0, layer.spreadRadiusPx))),
+        shadowColor: `rgb(${layer.color.red}, ${layer.color.green}, ${layer.color.blue})`,
+        shadowOffset: { height: layer.offsetYPx, width: layer.offsetXPx },
+        shadowOpacity: layer.color.alpha,
+        shadowRadius: layer.blurRadiusPx,
+    };
+};
+export function toNativeWidgetFrameShadow(layers) {
+    if (layers === undefined) {
+        return { kind: "clear" };
+    }
+    return {
+        boxShadow: toNativeWidgetFrameBoxShadow(layers),
+        fallbackStyle: toNativeWidgetFrameLegacyShadow(layers),
+        kind: "resolved",
+    };
+}
+export function toNativeWidgetSupportedBoxShadow(shadow, support) {
+    if (shadow.kind !== "resolved" ||
+        support === undefined ||
+        support === "none") {
+        return undefined;
+    }
+    return support === "all"
+        ? shadow.boxShadow
+        : shadow.boxShadow.filter((layer) => !layer.inset);
+}

package/dist/provider-widget-border-radius.js

@@ -1,26 +1,13 @@
-const CANONICAL_PX_PATTERN = /^(?:0|[1-9]\d*)(?:\.\d+)?px$/;
+import { safeParseNativeWidgetCanonicalRadii } from "./native-widget-corner-radii.js";
 const CANONICAL_RADIUS_COMPONENT_PATTERN = /^((?:\d+(?:\.\d+)?|\.\d+))(px|%)$/;
-const safeParseCanonicalPx = (value) => {
-    if (!CANONICAL_PX_PATTERN.test(value)) {
-        return undefined;
-    }
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : undefined;
-};
 export function safeParseProviderWidgetCanonicalTopRadii(value) {
-    if (value.includes("/")) {
-        return undefined;
-    }
-    const radii = value.split(/\s+/).map(safeParseCanonicalPx);
-    if (radii.length === 0 ||
-        radii.length > 4 ||
-        radii.some((radius) => radius === undefined)) {
+    if (value !== value.trim()) {
         return undefined;
     }
-    const [topLeft, topRight = topLeft] = radii;
-    return topLeft === undefined || topRight === undefined
+    const radii = safeParseNativeWidgetCanonicalRadii(value);
+    return radii === undefined
         ? undefined
-        : { topLeft, topRight };
+        : { topLeft: radii.topLeft, topRight: radii.topRight };
 }
 const parseCanonicalRadiusComponent = (value) => {
     var _a;

package/dist/provider-widget-frame-appearance.d.ts

@@ -1,44 +1,15 @@
-import type { WidgetFrameAppearance, WidgetFrameResolvedBorder, WidgetFrameResolvedBoxShadowLayer } from "@getuserfeedback/protocol/host";
-export type ProviderWidgetFrameBorderStyle = {
-    borderColor: string;
-    borderStyle: "dashed" | "dotted" | "solid";
-    borderWidth: number;
-};
-type ProviderWidgetFrameBoxShadowValue = {
-    blurRadius: number;
-    color: string;
-    inset: boolean;
-    offsetX: number;
-    offsetY: number;
-    spreadDistance: number;
-};
-type ProviderWidgetFrameLegacyShadowStyle = {
-    elevation: number;
-    shadowColor: string;
-    shadowOffset: {
-        height: number;
-        width: number;
-    };
-    shadowOpacity: number;
-    shadowRadius: number;
-};
-export type ProviderWidgetFrameShadowProjection = {
-    kind: "clear";
-} | {
+import type { WidgetFrameAppearance } from "@getuserfeedback/protocol/host";
+import { type NativeWidgetFrameBorderStyle } from "./native-widget-frame-border.js";
+import { type NativeWidgetFrameShadowProjection } from "./native-widget-frame-shadow.js";
+type ProviderWidgetFrameShadowProjection = NativeWidgetFrameShadowProjection | {
     kind: "legacy";
-} | {
-    boxShadow: ProviderWidgetFrameBoxShadowValue[];
-    fallbackStyle: ProviderWidgetFrameLegacyShadowStyle;
-    kind: "resolved";
 };
 export type ProviderWidgetFrameAppearanceProjection = {
-    borderStyle?: ProviderWidgetFrameBorderStyle;
+    borderStyle?: NativeWidgetFrameBorderStyle;
     shadow: ProviderWidgetFrameShadowProjection;
     topLeftRadius: number;
     topRightRadius: number;
 };
-export declare function toProviderWidgetFrameShadow(layers?: WidgetFrameResolvedBoxShadowLayer[]): ProviderWidgetFrameShadowProjection;
-export declare function toProviderWidgetFrameBorderStyle(border?: WidgetFrameResolvedBorder): ProviderWidgetFrameBorderStyle;
 export declare function toProviderWidgetFrameAppearance(appearance?: WidgetFrameAppearance, nativeSheetSize?: {
     height: number;
     width: number;

package/dist/provider-widget-frame-appearance.js

@@ -1,71 +1,12 @@
+import { toNativeWidgetConservativeResolvedCornerRadii } from "./native-widget-corner-radii.js";
+import { toNativeWidgetResolvedBorderStyle, } from "./native-widget-frame-border.js";
+import { toNativeWidgetFrameShadow, } from "./native-widget-frame-shadow.js";
 import { resolveProviderWidgetCanonicalBorderRadius, safeParseProviderWidgetCanonicalTopRadii, } from "./provider-widget-border-radius.js";
 const LEGACY_WIDGET_SHEET_RADIUS = 24;
-const CLEARED_WIDGET_FRAME_BORDER_STYLE = {
-    borderColor: "transparent",
-    borderStyle: "solid",
-    borderWidth: 0,
+const toProviderWidgetConservativeResolvedTopRadii = (radius) => {
+    const resolved = toNativeWidgetConservativeResolvedCornerRadii(radius);
+    return { topLeft: resolved.topLeft, topRight: resolved.topRight };
 };
-const CLEARED_WIDGET_FRAME_SHADOW_STYLE = {
-    elevation: 0,
-    shadowColor: "transparent",
-    shadowOffset: { height: 0, width: 0 },
-    shadowOpacity: 0,
-    shadowRadius: 0,
-};
-const toProviderWidgetFrameColor = (color) => `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha})`;
-const toProviderWidgetFrameBoxShadow = (layers) => layers.map((layer) => ({
-    blurRadius: layer.blurRadiusPx,
-    color: toProviderWidgetFrameColor(layer.color),
-    inset: layer.inset,
-    offsetX: layer.offsetXPx,
-    offsetY: layer.offsetYPx,
-    spreadDistance: layer.spreadRadiusPx,
-}));
-const toProviderWidgetFrameLegacyShadow = (layers) => {
-    const layer = layers.find((candidate) => !candidate.inset && candidate.color.alpha > 0);
-    if (layer === undefined) {
-        return Object.assign({}, CLEARED_WIDGET_FRAME_SHADOW_STYLE);
-    }
-    return {
-        elevation: Math.max(1, Math.ceil(layer.blurRadiusPx + Math.max(0, layer.spreadRadiusPx))),
-        shadowColor: `rgb(${layer.color.red}, ${layer.color.green}, ${layer.color.blue})`,
-        shadowOffset: { height: layer.offsetYPx, width: layer.offsetXPx },
-        shadowOpacity: layer.color.alpha,
-        shadowRadius: layer.blurRadiusPx,
-    };
-};
-export function toProviderWidgetFrameShadow(layers) {
-    if (layers === undefined) {
-        return { kind: "clear" };
-    }
-    return {
-        boxShadow: toProviderWidgetFrameBoxShadow(layers),
-        fallbackStyle: toProviderWidgetFrameLegacyShadow(layers),
-        kind: "resolved",
-    };
-}
-const toProviderWidgetConservativeResolvedTopRadii = (radius) => ({
-    // React Native exposes one scalar per corner, so use a deliberately smaller
-    // circle that does not exceed the authored ellipse on either axis.
-    topLeft: Math.min(radius.topLeft.horizontalPx, radius.topLeft.verticalPx),
-    topRight: Math.min(radius.topRight.horizontalPx, radius.topRight.verticalPx),
-});
-export function toProviderWidgetFrameBorderStyle(border) {
-    if (border === undefined ||
-        border.widthPx === 0 ||
-        border.style === "none" ||
-        border.style === "hidden") {
-        return Object.assign({}, CLEARED_WIDGET_FRAME_BORDER_STYLE);
-    }
-    const { alpha, blue, green, red } = border.color;
-    return {
-        borderColor: `rgba(${red}, ${green}, ${blue}, ${alpha})`,
-        borderStyle: border.style === "dashed" || border.style === "dotted"
-            ? border.style
-            : "solid",
-        borderWidth: border.widthPx,
-    };
-}
 export function toProviderWidgetFrameAppearance(appearance, nativeSheetSize) {
     var _a, _b;
     if (appearance === undefined) {
@@ -77,8 +18,8 @@ export function toProviderWidgetFrameAppearance(appearance, nativeSheetSize) {
     }
     if (appearance.kind === "none") {
         return {
-            borderStyle: toProviderWidgetFrameBorderStyle(),
-            shadow: { kind: "clear" },
+            borderStyle: toNativeWidgetResolvedBorderStyle(),
+            shadow: toNativeWidgetFrameShadow(),
             topLeftRadius: 0,
             topRightRadius: 0,
         };
@@ -94,8 +35,8 @@ export function toProviderWidgetFrameAppearance(appearance, nativeSheetSize) {
             ? safeParseProviderWidgetCanonicalTopRadii(appearance.borderRadius)
             : toProviderWidgetConservativeResolvedTopRadii(appearance.resolvedBorderRadius);
     return {
-        borderStyle: toProviderWidgetFrameBorderStyle(appearance.resolvedBorder),
-        shadow: toProviderWidgetFrameShadow(appearance.resolvedBoxShadow),
+        borderStyle: toNativeWidgetResolvedBorderStyle(appearance.resolvedBorder),
+        shadow: toNativeWidgetFrameShadow(appearance.resolvedBoxShadow),
         topLeftRadius: (_a = radius === null || radius === void 0 ? void 0 : radius.topLeft) !== null && _a !== void 0 ? _a : 0,
         topRightRadius: (_b = radius === null || radius === void 0 ? void 0 : radius.topRight) !== null && _b !== void 0 ? _b : 0,
     };

package/dist/provider-widget-host-overlay.d.ts

@@ -1,12 +1,13 @@
 import { resolveWidgetLayoutTransitionExecution, type WidgetFrameAppearance, type WidgetLayoutComparableSizeUpdate, type WidgetLayoutSizeUpdate, type WidgetLayoutTimedCapableTransitionPlan, type WidgetLayoutTransitionPolicy, type WidgetLayoutTransitionSchedule } from "@getuserfeedback/protocol/host";
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
+import { type NativeWidgetBoxShadowSupport } from "./native-widget-frame-shadow.js";
 import type { WidgetHostProps } from "./widget-host.js";
 type NativeViewComponent = ComponentType<Record<string, unknown>>;
 type NativeReactVersion = {
     major?: unknown;
     minor?: unknown;
 };
-export type ProviderWidgetNativeBoxShadowSupport = "all" | "none" | "outset";
+export type ProviderWidgetNativeBoxShadowSupport = NativeWidgetBoxShadowSupport;
 export declare function toProviderWidgetResumedTransitionTiming(input: {
     durationMs: number;
     easing: readonly [number, number, number, number];

package/dist/provider-widget-host-overlay.js

@@ -1,5 +1,6 @@
 import { areWidgetFrameAppearancesEqual, planWidgetLayoutTransition, resolveWidgetLayoutResumedEasing, resolveWidgetLayoutTransitionExecution, toInstantWidgetLayoutSizeUpdate, } from "@getuserfeedback/protocol/host";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { toNativeWidgetSupportedBoxShadow, } from "./native-widget-frame-shadow.js";
 import { toProviderWidgetFrameAppearance } from "./provider-widget-frame-appearance.js";
 const HIDDEN_WIDGET_HOST_STYLE = {
     bottom: 0,
@@ -192,6 +193,10 @@ function resolveNativeBoxShadowSupport() {
         const reactNativeModule = require("react-native");
         // React Native exposes renderer capability to JavaScript process-wide.
         // There is no stable public API for querying the renderer of this View.
+        // TODO(architecture): Extract native box-shadow capability detection to
+        // native-widget-frame-shadow-support once the overlay diff fits the small-PR
+        // production line gate. [principle=architecture-gardening] [scope=slice]
+        // [priority=medium]
         const fabricUIManager = Reflect.get(globalThis, "nativeFabricUIManager");
         return toProviderWidgetNativeBoxShadowSupport({
             hasFabricUIManager: fabricUIManager !== undefined && fabricUIManager !== null,
@@ -289,13 +294,9 @@ export function toProviderWidgetSheetSurfaceStyles(input) {
         borderTopLeftRadius: appearance.topLeftRadius,
         borderTopRightRadius: appearance.topRightRadius,
     };
-    const nativeBoxShadow = appearance.shadow.kind !== "resolved" ||
-        input.nativeBoxShadowSupport === undefined ||
-        input.nativeBoxShadowSupport === "none"
+    const nativeBoxShadow = appearance.shadow.kind === "legacy"
         ? undefined
-        : input.nativeBoxShadowSupport === "all"
-            ? appearance.shadow.boxShadow
-            : appearance.shadow.boxShadow.filter((shadow) => !shadow.inset);
+        : toNativeWidgetSupportedBoxShadow(appearance.shadow, input.nativeBoxShadowSupport);
     const usesNativeBoxShadow = nativeBoxShadow !== undefined;
     const sheetShadowStyle = appearance.shadow.kind === "legacy"
         ? WIDGET_SHEET_LEGACY_FRAME_STYLE

package/dist/version.js

@@ -3,4 +3,4 @@ const reactNativeSdkVersion = typeof __GX_REACT_NATIVE_SDK_VERSION__ === "string
     : "";
 // Build scripts patch this fallback to the package version for published artifacts.
 // Source-linked workspace usage keeps the local fallback.
-export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "3.0.81";
+export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "3.0.90";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "3.0.81",
+  "version": "3.0.90",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",
@@ -44,8 +44,8 @@
     "lint": "biome check ."
   },
   "dependencies": {
-    "@getuserfeedback/protocol": "^3.20.0",
-    "@getuserfeedback/sdk": "^0.12.5",
+    "@getuserfeedback/protocol": "^3.21.0",
+    "@getuserfeedback/sdk": "^0.12.6",
     "robot3": "^1.2.0"
   },
   "peerDependencies": {