@getuserfeedback/react-native 3.0.48 → 3.0.56

package/dist/index.js

@@ -650,8 +650,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
                         (previousSheetHostLayoutUpdate === null || previousSheetHostLayoutUpdate === void 0 ? void 0 : previousSheetHostLayoutUpdate.transition.kind) === "timed" &&
                         previousSheetHostLayoutUpdate.size.height ===
                             sheetHostLayoutPlan.size.height
-                        ? previousSheetHostLayoutUpdate
-                        : sheetHostLayoutPlan.update;
+                        ? Object.assign(Object.assign({}, previousSheetHostLayoutUpdate), { size: sheetHostLayoutPlan.size }) : sheetHostLayoutPlan.update;
                 break;
             }
             case "timed":
@@ -699,6 +698,7 @@ export function GetUserFeedbackProvider({ autoInit = true, children, commandTime
         nativeView: NativeView,
         onRequestDismiss: handleWidgetHostDismiss,
         sheetHostLayoutUpdate,
+        transitionSequence: transitionPolicySequence,
     }, widgetHost));
 }
 export function useGetUserFeedbackNative() {

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

@@ -1,3 +1,4 @@
+import type { CoreCommandEnvelope } from "@getuserfeedback/protocol";
 import { type ReactElement } from "react";
 import { type CoreWebViewHostProps } from "./core-webview-host.js";
 import { type NativeCoreCommandChannel } from "./native-core-command-channel.js";
@@ -6,10 +7,17 @@ export type NativeRuntimeRootProps = {
     coreUrl: string;
     coreWebViewComponent?: CoreWebViewHostProps["webViewComponent"];
     coreWebViewProps?: CoreWebViewHostProps["webViewProps"];
+    instanceRegistrationEnvelope?: NativeRuntimeInstanceRegistrationEnvelope;
     onCommandChannelChange?: (channel: NativeCoreCommandChannel | null) => void;
     onError?: (error: Error) => void;
     onInvalidMessage?: (error: Error, value: unknown) => void;
     viewWebViewComponent?: NativeViewHostProjectionProps["webViewComponent"];
     viewWebViewProps?: NativeViewHostProjectionProps["webViewProps"];
 };
-export declare function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, onCommandChannelChange, onError, onInvalidMessage, viewWebViewComponent, viewWebViewProps, }: NativeRuntimeRootProps): ReactElement;
+type NativeRuntimeInstanceRegistrationEnvelope = Omit<CoreCommandEnvelope, "command"> & {
+    command: Extract<CoreCommandEnvelope["command"], {
+        kind: "init";
+    }>;
+};
+export declare function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, instanceRegistrationEnvelope, onCommandChannelChange, onError, onInvalidMessage, viewWebViewComponent, viewWebViewProps, }: NativeRuntimeRootProps): ReactElement;
+export {};

package/dist/native-runtime-root.js

@@ -3,43 +3,51 @@ import { CoreWebViewHost, } from "./core-webview-host.js";
 import { createNativeCoreCommandChannel, } from "./native-core-command-channel.js";
 import { NativeViewHostProjection, } from "./native-view-host-projection.js";
 import { createNativeViewRecordController, } from "./native-view-record-controller.js";
-// TODO(architecture): Route protocol-owned init/bootstrap commands through the private native runtime channel without moving provider ownership.
-// [from=private-native-command-bootstrap-composition] [to=protocol-owned-native-command-bootstrap-routing] [scope=slice] [principle=preserve-provider-runtime] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=70]
-export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, onCommandChannelChange, onError, onInvalidMessage, viewWebViewComponent, viewWebViewProps, }) {
+// TODO(architecture): Compose provider-owned startup state with the private native runtime without changing the default loader-backed path.
+// [from=protocol-owned-native-command-bootstrap-routing] [to=provider-owned-native-registration-composition] [scope=slice] [principle=preserve-provider-runtime] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=80]
+export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewProps, instanceRegistrationEnvelope, onCommandChannelChange, onError, onInvalidMessage, viewWebViewComponent, viewWebViewProps, }) {
+    const [coreHostRevision, setCoreHostRevision] = useState(0);
     const [session, setSession] = useState(null);
     const sessionRef = useRef(null);
     const nextSessionKeyRef = useRef(0);
+    const registrationRetryAttemptedRef = useRef(false);
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
     const onCommandChannelChangeRef = useRef(onCommandChannelChange);
     onCommandChannelChangeRef.current = onCommandChannelChange;
     const onInvalidMessageRef = useRef(onInvalidMessage);
     onInvalidMessageRef.current = onInvalidMessage;
-    const notifyCommandChannelObserver = useCallback((observer, channel) => {
+    const instanceRegistrationEnvelopeRef = useRef(instanceRegistrationEnvelope);
+    instanceRegistrationEnvelopeRef.current = instanceRegistrationEnvelope;
+    const reportError = useCallback((error) => {
         var _a;
+        try {
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error instanceof Error ? error : new Error(String(error)));
+        }
+        catch (_b) {
+            // Error observers cannot change native runtime settlement.
+        }
+    }, []);
+    const notifyCommandChannelObserver = useCallback((observer, channel) => {
         try {
             observer === null || observer === void 0 ? void 0 : observer(channel);
         }
         catch (error) {
-            try {
-                (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error instanceof Error ? error : new Error(String(error)));
-            }
-            catch (_b) {
-                // Observer failures must not interrupt connection settlement.
-            }
+            reportError(error);
         }
-    }, []);
+    }, [reportError]);
     const handleConnected = useCallback((coreConnection) => {
         const previousSession = sessionRef.current;
         if (previousSession) {
             sessionRef.current = null;
             previousSession.commandChannelOwner.dispose();
             previousSession.controller.dispose();
+            setSession(null);
             notifyCommandChannelObserver(previousSession.observer, null);
         }
         const controller = createNativeViewRecordController({
             coreConnection,
-            onError: (error) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error); },
+            onError: reportError,
         });
         const commandChannelOwner = createNativeCoreCommandChannel({
             coreConnection,
@@ -51,11 +59,28 @@ export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewPr
             key: nextSessionKeyRef.current + 1,
             observer: onCommandChannelChangeRef.current,
         };
+        const registrationEnvelope = instanceRegistrationEnvelopeRef.current;
+        if (registrationEnvelope) {
+            try {
+                commandChannelOwner.channel.post(registrationEnvelope);
+            }
+            catch (error) {
+                commandChannelOwner.dispose();
+                controller.dispose();
+                if (!registrationRetryAttemptedRef.current) {
+                    registrationRetryAttemptedRef.current = true;
+                    setCoreHostRevision((revision) => revision + 1);
+                }
+                reportError(error);
+                return;
+            }
+        }
+        registrationRetryAttemptedRef.current = false;
         nextSessionKeyRef.current = nextSession.key;
         sessionRef.current = nextSession;
         setSession(nextSession);
         notifyCommandChannelObserver(nextSession.observer, commandChannelOwner.channel);
-    }, [notifyCommandChannelObserver]);
+    }, [notifyCommandChannelObserver, reportError]);
     const handleDisconnected = useCallback(() => {
         const currentSession = sessionRef.current;
         if (!currentSession) {
@@ -88,6 +113,7 @@ export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, coreWebViewPr
     }, [notifyCommandChannelObserver]);
     return createElement(Fragment, null, createElement(CoreWebViewHost, {
         coreUrl,
+        key: `${coreUrl}:${coreHostRevision}`,
         onConnected: handleConnected,
         onDisconnected: handleDisconnected,
         onInvalidMessage,

package/dist/provider-widget-border-radius.d.ts

@@ -0,0 +1,11 @@
+import type { WidgetFrameResolvedBorderRadius } from "@getuserfeedback/protocol/host";
+type ProviderWidgetFrameSize = {
+    height: number;
+    width: number;
+};
+export declare function safeParseProviderWidgetCanonicalTopRadii(value: string): {
+    topLeft: number;
+    topRight: number;
+} | undefined;
+export declare function resolveProviderWidgetCanonicalBorderRadius(value: string, frameSize: ProviderWidgetFrameSize): WidgetFrameResolvedBorderRadius | undefined;
+export {};

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

@@ -0,0 +1,115 @@
+const CANONICAL_PX_PATTERN = /^(?:0|[1-9]\d*)(?:\.\d+)?px$/;
+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)) {
+        return undefined;
+    }
+    const [topLeft, topRight = topLeft] = radii;
+    return topLeft === undefined || topRight === undefined
+        ? undefined
+        : { topLeft, topRight };
+}
+const parseCanonicalRadiusComponent = (value) => {
+    var _a;
+    const match = CANONICAL_RADIUS_COMPONENT_PATTERN.exec(value);
+    if (match === null) {
+        return undefined;
+    }
+    const parsed = Number.parseFloat((_a = match[1]) !== null && _a !== void 0 ? _a : "");
+    const unit = match[2];
+    return Number.isFinite(parsed) && (unit === "px" || unit === "%")
+        ? { unit, value: parsed }
+        : undefined;
+};
+const expandRadiusComponents = (values) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = values;
+    if (topLeft === undefined || values.length > 4) {
+        return undefined;
+    }
+    if (values.length === 1) {
+        return [topLeft, topLeft, topLeft, topLeft];
+    }
+    if (topRight === undefined) {
+        return undefined;
+    }
+    if (values.length === 2) {
+        return [topLeft, topRight, topLeft, topRight];
+    }
+    if (bottomRight === undefined) {
+        return undefined;
+    }
+    if (values.length === 3) {
+        return [topLeft, topRight, bottomRight, topRight];
+    }
+    return bottomLeft === undefined
+        ? undefined
+        : [topLeft, topRight, bottomRight, bottomLeft];
+};
+const parseCanonicalRadiusComponents = (value) => {
+    const components = value
+        .trim()
+        .split(/\s+/)
+        .map(parseCanonicalRadiusComponent);
+    return components.some((component) => component === undefined)
+        ? undefined
+        : expandRadiusComponents(components);
+};
+const resolveCanonicalRadiusComponent = (component, basis) => component.unit === "%" ? (component.value / 100) * basis : component.value;
+const toRadiusOverlapRatio = (limit, first, second) => {
+    const max = Math.max(first, second);
+    return max === 0 ? 1 : limit / max / (first / max + second / max);
+};
+export function resolveProviderWidgetCanonicalBorderRadius(value, frameSize) {
+    var _a, _b, _c;
+    if (!Number.isFinite(frameSize.width) ||
+        frameSize.width < 0 ||
+        !Number.isFinite(frameSize.height) ||
+        frameSize.height < 0) {
+        return undefined;
+    }
+    const axes = value.split("/");
+    if (axes.length > 2) {
+        return undefined;
+    }
+    const horizontal = parseCanonicalRadiusComponents((_a = axes[0]) !== null && _a !== void 0 ? _a : "");
+    const vertical = parseCanonicalRadiusComponents((_c = (_b = axes[1]) !== null && _b !== void 0 ? _b : axes[0]) !== null && _c !== void 0 ? _c : "");
+    if (horizontal === undefined || vertical === undefined) {
+        return undefined;
+    }
+    const resolveCorner = (index) => ({
+        horizontalPx: resolveCanonicalRadiusComponent(horizontal[index], frameSize.width),
+        verticalPx: resolveCanonicalRadiusComponent(vertical[index], frameSize.height),
+    });
+    const topLeft = resolveCorner(0);
+    const topRight = resolveCorner(1);
+    const bottomRight = resolveCorner(2);
+    const bottomLeft = resolveCorner(3);
+    if ([topLeft, topRight, bottomRight, bottomLeft].some((corner) => !Number.isFinite(corner.horizontalPx) ||
+        !Number.isFinite(corner.verticalPx))) {
+        return undefined;
+    }
+    const overlapScale = Math.min(1, toRadiusOverlapRatio(frameSize.width, topLeft.horizontalPx, topRight.horizontalPx), toRadiusOverlapRatio(frameSize.width, bottomLeft.horizontalPx, bottomRight.horizontalPx), toRadiusOverlapRatio(frameSize.height, topLeft.verticalPx, bottomLeft.verticalPx), toRadiusOverlapRatio(frameSize.height, topRight.verticalPx, bottomRight.verticalPx));
+    const scaleCorner = (corner) => ({
+        horizontalPx: corner.horizontalPx * overlapScale,
+        verticalPx: corner.verticalPx * overlapScale,
+    });
+    return {
+        topLeft: scaleCorner(topLeft),
+        topRight: scaleCorner(topRight),
+        bottomRight: scaleCorner(bottomRight),
+        bottomLeft: scaleCorner(bottomLeft),
+    };
+}

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

@@ -1,11 +1,46 @@
-import type { WidgetFrameAppearance } from "@getuserfeedback/protocol/host";
+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";
+} | {
+    kind: "legacy";
+} | {
+    boxShadow: ProviderWidgetFrameBoxShadowValue[];
+    fallbackStyle: ProviderWidgetFrameLegacyShadowStyle;
+    kind: "resolved";
+};
 export type ProviderWidgetFrameAppearanceProjection = {
-    shadowPolicy: "clear" | "legacy";
+    borderStyle?: ProviderWidgetFrameBorderStyle;
+    shadow: ProviderWidgetFrameShadowProjection;
     topLeftRadius: number;
     topRightRadius: number;
 };
-export declare function safeParseProviderWidgetCanonicalTopRadii(value: string): {
-    topLeft: number;
-    topRight: number;
-} | undefined;
-export declare function toProviderWidgetFrameAppearance(appearance?: WidgetFrameAppearance): ProviderWidgetFrameAppearanceProjection;
+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;
+}): ProviderWidgetFrameAppearanceProjection;
+export {};

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

@@ -1,46 +1,101 @@
+import { resolveProviderWidgetCanonicalBorderRadius, safeParseProviderWidgetCanonicalTopRadii, } from "./provider-widget-border-radius.js";
 const LEGACY_WIDGET_SHEET_RADIUS = 24;
-const CANONICAL_PX_PATTERN = /^(?:0|[1-9]\d*)(?:\.\d+)?px$/;
-const safeParseCanonicalPx = (value) => {
-    if (!CANONICAL_PX_PATTERN.test(value)) {
-        return undefined;
+const CLEARED_WIDGET_FRAME_BORDER_STYLE = {
+    borderColor: "transparent",
+    borderStyle: "solid",
+    borderWidth: 0,
+};
+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);
     }
-    const parsed = Number.parseFloat(value);
-    return Number.isFinite(parsed) ? parsed : undefined;
+    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 safeParseProviderWidgetCanonicalTopRadii(value) {
-    if (value.includes("/")) {
-        return undefined;
+export function toProviderWidgetFrameShadow(layers) {
+    if (layers === undefined) {
+        return { kind: "clear" };
     }
-    const radii = value.split(/\s+/).map(safeParseCanonicalPx);
-    if (radii.length === 0 ||
-        radii.length > 4 ||
-        radii.some((radius) => radius === undefined)) {
-        return undefined;
+    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 [topLeft, topRight = topLeft] = radii;
-    return topLeft === undefined || topRight === undefined
-        ? undefined
-        : { topLeft, topRight };
+    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) {
+export function toProviderWidgetFrameAppearance(appearance, nativeSheetSize) {
     var _a, _b;
     if (appearance === undefined) {
         return {
-            shadowPolicy: "legacy",
+            shadow: { kind: "legacy" },
             topLeftRadius: LEGACY_WIDGET_SHEET_RADIUS,
             topRightRadius: LEGACY_WIDGET_SHEET_RADIUS,
         };
     }
     if (appearance.kind === "none") {
         return {
-            shadowPolicy: "clear",
+            borderStyle: toProviderWidgetFrameBorderStyle(),
+            shadow: { kind: "clear" },
             topLeftRadius: 0,
             topRightRadius: 0,
         };
     }
-    const radius = safeParseProviderWidgetCanonicalTopRadii(appearance.borderRadius);
+    // Percentage radii depend on the host-owned sheet box, which can differ from
+    // the view's reported plan. Browser-only expressions keep the structured fallback.
+    const nativeResolvedRadius = nativeSheetSize === undefined || !appearance.borderRadius.includes("%")
+        ? undefined
+        : resolveProviderWidgetCanonicalBorderRadius(appearance.borderRadius, nativeSheetSize);
+    const radius = nativeResolvedRadius !== undefined
+        ? toProviderWidgetConservativeResolvedTopRadii(nativeResolvedRadius)
+        : appearance.resolvedBorderRadius === undefined
+            ? safeParseProviderWidgetCanonicalTopRadii(appearance.borderRadius)
+            : toProviderWidgetConservativeResolvedTopRadii(appearance.resolvedBorderRadius);
     return {
-        shadowPolicy: "clear",
+        borderStyle: toProviderWidgetFrameBorderStyle(appearance.resolvedBorder),
+        shadow: toProviderWidgetFrameShadow(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

@@ -2,6 +2,19 @@ import { type WidgetFrameAppearance, type WidgetLayoutComparableSizeUpdate, type
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 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 declare function toProviderWidgetNativeBoxShadowSupport(input: {
+    hasFabricUIManager: boolean;
+    platform: {
+        os?: unknown;
+        version?: unknown;
+    };
+    reactNativeVersion?: NativeReactVersion;
+}): ProviderWidgetNativeBoxShadowSupport;
 export declare function toProviderWidgetSheetHostViewport(viewport: WidgetHostProps["hostViewport"], flowSize?: {
     height?: number;
 }): WidgetHostProps["hostViewport"];
@@ -28,16 +41,19 @@ export declare function toProviderWidgetSheetSurfaceStyles(input: {
     frameAppearance?: WidgetFrameAppearance;
     isVisible: boolean;
     sheetHostLayoutUpdate: WidgetLayoutComparableSizeUpdate | undefined;
+    nativeBoxShadowSupport?: ProviderWidgetNativeBoxShadowSupport;
 }): {
-    contentStyle: unknown;
-    sheetStyle: unknown;
+    contentStyle: Record<string, unknown>;
+    frameStyle: Record<string, unknown>;
+    sheetStyle: Record<string, unknown>;
 };
-export declare function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, }: {
+export declare function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, transitionSequence, }: {
     children?: ReactNode;
     frameAppearance?: WidgetFrameAppearance;
     isVisible: boolean;
     nativeView: NativeViewComponent;
     onRequestDismiss: () => void;
     sheetHostLayoutUpdate: WidgetLayoutComparableSizeUpdate | undefined;
+    transitionSequence?: number;
 }): ReactElement;
 export {};

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

@@ -51,6 +51,13 @@ const WIDGET_SHEET_CONTENT_BASE_STYLE = {
     flex: 1,
     overflow: "hidden",
 };
+const WIDGET_SHEET_FRAME_OVERLAY_STYLE = {
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+};
 const WIDGET_SHEET_DRAG_HANDLE_TOUCH_STYLE = {
     alignItems: "center",
     elevation: 19,
@@ -127,6 +134,60 @@ function resolveNativeAnimationRuntime() {
         return null;
     }
 }
+export function toProviderWidgetNativeBoxShadowSupport(input) {
+    var _a, _b;
+    if (!input.hasFabricUIManager) {
+        return "none";
+    }
+    const major = (_a = input.reactNativeVersion) === null || _a === void 0 ? void 0 : _a.major;
+    const minor = (_b = input.reactNativeVersion) === null || _b === void 0 ? void 0 : _b.minor;
+    const supportsBoxShadow = typeof major === "number" &&
+        Number.isInteger(major) &&
+        (major > 0 ||
+            (major === 0 &&
+                typeof minor === "number" &&
+                Number.isInteger(minor) &&
+                minor >= 76));
+    if (!supportsBoxShadow) {
+        return "none";
+    }
+    if (input.platform.os === "ios") {
+        return "all";
+    }
+    if (input.platform.os !== "android") {
+        return "none";
+    }
+    const androidApiLevel = input.platform.version;
+    if (typeof androidApiLevel !== "number" ||
+        !Number.isInteger(androidApiLevel)) {
+        return "none";
+    }
+    return androidApiLevel >= 29
+        ? "all"
+        : androidApiLevel >= 28
+            ? "outset"
+            : "none";
+}
+function resolveNativeBoxShadowSupport() {
+    var _a, _b, _c, _d;
+    try {
+        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.
+        const fabricUIManager = Reflect.get(globalThis, "nativeFabricUIManager");
+        return toProviderWidgetNativeBoxShadowSupport({
+            hasFabricUIManager: fabricUIManager !== undefined && fabricUIManager !== null,
+            platform: {
+                os: (_a = reactNativeModule.Platform) === null || _a === void 0 ? void 0 : _a.OS,
+                version: (_b = reactNativeModule.Platform) === null || _b === void 0 ? void 0 : _b.Version,
+            },
+            reactNativeVersion: (_d = (_c = reactNativeModule.Platform) === null || _c === void 0 ? void 0 : _c.constants) === null || _d === void 0 ? void 0 : _d.reactNativeVersion,
+        });
+    }
+    catch (_e) {
+        return "none";
+    }
+}
 function toResponderPageY(event) {
     var _a, _b, _c;
     const nativeEvent = event === null || event === void 0 ? void 0 : event.nativeEvent;
@@ -205,98 +266,184 @@ export function toProviderWidgetHostStyle({ isVisible, webViewStyle, }) {
 export function toProviderWidgetSheetSurfaceStyles(input) {
     var _a;
     const sheetHostViewport = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.size;
-    const appearance = toProviderWidgetFrameAppearance(input.frameAppearance);
+    const appearance = toProviderWidgetFrameAppearance(input.frameAppearance, sheetHostViewport);
     const radiusStyle = {
         borderTopLeftRadius: appearance.topLeftRadius,
         borderTopRightRadius: appearance.topRightRadius,
     };
-    const frameStyle = appearance.shadowPolicy === "legacy"
+    const nativeBoxShadow = appearance.shadow.kind !== "resolved" ||
+        input.nativeBoxShadowSupport === undefined ||
+        input.nativeBoxShadowSupport === "none"
+        ? undefined
+        : input.nativeBoxShadowSupport === "all"
+            ? appearance.shadow.boxShadow
+            : appearance.shadow.boxShadow.filter((shadow) => !shadow.inset);
+    const usesNativeBoxShadow = nativeBoxShadow !== undefined;
+    const sheetShadowStyle = appearance.shadow.kind === "legacy"
         ? WIDGET_SHEET_LEGACY_FRAME_STYLE
-        : WIDGET_SHEET_CLEARED_FRAME_STYLE;
+        : appearance.shadow.kind === "resolved" && !usesNativeBoxShadow
+            ? appearance.shadow.fallbackStyle
+            : WIDGET_SHEET_CLEARED_FRAME_STYLE;
+    const frameShadowStyle = nativeBoxShadow === undefined ? {} : { boxShadow: nativeBoxShadow };
     return {
         contentStyle: Object.assign(Object.assign({}, WIDGET_SHEET_CONTENT_BASE_STYLE), radiusStyle),
+        frameStyle: input.isVisible && sheetHostViewport !== undefined
+            ? Object.assign(Object.assign(Object.assign(Object.assign({}, WIDGET_SHEET_FRAME_OVERLAY_STYLE), radiusStyle), appearance.borderStyle), frameShadowStyle) : HIDDEN_WIDGET_HOST_STYLE,
         sheetStyle: input.isVisible && sheetHostViewport !== undefined
-            ? Object.assign(Object.assign(Object.assign(Object.assign({}, WIDGET_SHEET_LAYOUT_STYLE), radiusStyle), frameStyle), { height: sheetHostViewport.height }) : HIDDEN_WIDGET_HOST_STYLE,
+            ? Object.assign(Object.assign(Object.assign(Object.assign({}, WIDGET_SHEET_LAYOUT_STYLE), radiusStyle), sheetShadowStyle), { height: sheetHostViewport.height }) : HIDDEN_WIDGET_HOST_STYLE,
     };
 }
 function useProviderWidgetSheetPresentation(input) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const animationRuntime = useMemo(resolveNativeAnimationRuntime, []);
-    const animatedHeightRef = useRef(null);
-    const animationRef = useRef(null);
-    const previousHeightRef = useRef(undefined);
-    const animatedSheetView = useMemo(() => animationRuntime
+    const animatedValuesRef = useRef(null);
+    const animationRef = useRef([]);
+    const consumedTransitionSequenceRef = useRef(undefined);
+    const previousFrameRef = useRef(undefined);
+    const animatedSurfaceView = useMemo(() => animationRuntime
         ? animationRuntime.Animated.createAnimatedComponent(input.nativeView)
         : input.nativeView, [animationRuntime, input.nativeView]);
     const sheetHostViewport = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.size;
     const height = sheetHostViewport === null || sheetHostViewport === void 0 ? void 0 : sheetHostViewport.height;
+    const topLeftRadius = input.surfaceStyles.sheetStyle.borderTopLeftRadius;
+    const topRightRadius = input.surfaceStyles.sheetStyle.borderTopRightRadius;
+    const frame = useMemo(() => height !== undefined &&
+        typeof topLeftRadius === "number" &&
+        typeof topRightRadius === "number"
+        ? { height, topLeftRadius, topRightRadius }
+        : undefined, [height, topLeftRadius, topRightRadius]);
     const shouldUseAnimatedStyle = animationRuntime !== null &&
         input.isVisible &&
-        height !== undefined &&
+        frame !== undefined &&
+        previousFrameRef.current !== undefined &&
         ((_b = input.sheetHostLayoutUpdate) === null || _b === void 0 ? void 0 : _b.transition.kind) === "timed";
-    const sheetView = animationRuntime ? animatedSheetView : input.nativeView;
-    if (animationRuntime &&
-        height !== undefined &&
-        animatedHeightRef.current === null) {
-        animatedHeightRef.current = new animationRuntime.Animated.Value(height);
+    const surfaceView = animationRuntime ? animatedSurfaceView : input.nativeView;
+    if (animationRuntime && frame && animatedValuesRef.current === null) {
+        animatedValuesRef.current = {
+            height: new animationRuntime.Animated.Value(frame.height),
+            topLeftRadius: new animationRuntime.Animated.Value(frame.topLeftRadius),
+            topRightRadius: new animationRuntime.Animated.Value(frame.topRightRadius),
+        };
     }
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f;
-        if (!animationRuntime || height === undefined) {
-            (_b = (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop) === null || _b === void 0 ? void 0 : _b.call(_a);
-            animationRef.current = null;
-            previousHeightRef.current = height;
+        var _a, _b, _c;
+        const stopAnimations = (property) => {
+            var _a, _b;
+            const retained = [];
+            for (const animation of animationRef.current) {
+                if (property === undefined || animation.property === property) {
+                    (_b = (_a = animation.handle).stop) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
+                else {
+                    retained.push(animation);
+                }
+            }
+            animationRef.current = retained;
+        };
+        if (!animationRuntime || !frame || !input.isVisible) {
+            stopAnimations();
+            previousFrameRef.current = undefined;
             return;
         }
-        const animatedHeight = animatedHeightRef.current;
-        if (!animatedHeight) {
+        const animatedValues = animatedValuesRef.current;
+        if (!animatedValues) {
             return;
         }
-        const previousHeight = previousHeightRef.current;
-        previousHeightRef.current = height;
-        const transition = (_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition;
-        const activeAnimation = animationRef.current;
-        (_d = activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation.stop) === null || _d === void 0 ? void 0 : _d.call(activeAnimation);
-        animationRef.current = null;
-        if (previousHeight === undefined || (transition === null || transition === void 0 ? void 0 : transition.kind) !== "timed") {
-            animatedHeight.setValue(height);
+        const previousFrame = previousFrameRef.current;
+        previousFrameRef.current = frame;
+        const transition = (_a = input.sheetHostLayoutUpdate) === null || _a === void 0 ? void 0 : _a.transition;
+        const hasNewTransitionPolicy = input.transitionSequence !== undefined &&
+            consumedTransitionSequenceRef.current !== input.transitionSequence;
+        const shouldAnimate = (transition === null || transition === void 0 ? void 0 : transition.kind) === "timed" && hasNewTransitionPolicy;
+        if (hasNewTransitionPolicy) {
+            consumedTransitionSequenceRef.current = input.transitionSequence;
+        }
+        if (previousFrame === undefined || (transition === null || transition === void 0 ? void 0 : transition.kind) === "instant") {
+            stopAnimations();
+            animatedValues.height.setValue(frame.height);
+            animatedValues.topLeftRadius.setValue(frame.topLeftRadius);
+            animatedValues.topRightRadius.setValue(frame.topRightRadius);
             return;
         }
-        if (previousHeight === height && !activeAnimation) {
-            animatedHeight.setValue(height);
+        const values = {
+            height: animatedValues.height,
+            topLeftRadius: animatedValues.topLeftRadius,
+            topRightRadius: animatedValues.topRightRadius,
+        };
+        if (!shouldAnimate) {
+            for (const property of [
+                "height",
+                "topLeftRadius",
+                "topRightRadius",
+            ]) {
+                if (previousFrame[property] !== frame[property]) {
+                    stopAnimations(property);
+                    values[property].setValue(frame[property]);
+                }
+            }
             return;
         }
         const easing = transition.easing.kind === "cubic-bezier"
-            ? (_f = (_e = animationRuntime.Easing) === null || _e === void 0 ? void 0 : _e.bezier) === null || _f === void 0 ? void 0 : _f.call(_e, ...transition.easing.points)
+            ? (_c = (_b = animationRuntime.Easing) === null || _b === void 0 ? void 0 : _b.bezier) === null || _c === void 0 ? void 0 : _c.call(_b, ...transition.easing.points)
             : undefined;
-        const animation = animationRuntime.Animated.timing(animatedHeight, {
-            toValue: height,
-            duration: transition.durationMs,
-            easing,
-            useNativeDriver: false,
+        const animate = (property, value, toValue) => ({
+            handle: animationRuntime.Animated.timing(value, {
+                toValue,
+                duration: transition.durationMs,
+                easing,
+                useNativeDriver: false,
+            }),
+            property,
         });
-        animationRef.current = animation;
-        animation.start();
-        return () => {
-            var _a;
-            (_a = animation.stop) === null || _a === void 0 ? void 0 : _a.call(animation);
-            if (animationRef.current === animation) {
-                animationRef.current = null;
+        const activeProperties = new Set(animationRef.current.map((animation) => animation.property));
+        const animations = [];
+        for (const property of [
+            "height",
+            "topLeftRadius",
+            "topRightRadius",
+        ]) {
+            if (previousFrame[property] !== frame[property] ||
+                activeProperties.has(property)) {
+                stopAnimations(property);
+                animations.push(animate(property, values[property], frame[property]));
             }
-        };
-    }, [animationRuntime, height, (_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition]);
-    if (!shouldUseAnimatedStyle) {
-        return {
-            sheetView,
-            style: input.staticStyle,
-        };
+        }
+        animationRef.current.push(...animations);
+        for (const animation of animations) {
+            animation.handle.start(() => {
+                animationRef.current = animationRef.current.filter((candidate) => candidate !== animation);
+            });
+        }
+    }, [
+        animationRuntime,
+        frame,
+        input.isVisible,
+        (_c = input.sheetHostLayoutUpdate) === null || _c === void 0 ? void 0 : _c.transition,
+        input.transitionSequence,
+    ]);
+    useEffect(() => () => {
+        var _a, _b;
+        for (const animation of animationRef.current) {
+            (_b = (_a = animation.handle).stop) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        animationRef.current = [];
+    }, []);
+    const animatedValues = animatedValuesRef.current;
+    if (!shouldUseAnimatedStyle || animatedValues === null) {
+        return Object.assign(Object.assign({}, input.surfaceStyles), { surfaceView });
     }
+    const animatedRadiusStyle = {
+        borderTopLeftRadius: animatedValues.topLeftRadius,
+        borderTopRightRadius: animatedValues.topRightRadius,
+    };
     return {
-        sheetView,
-        style: Object.assign(Object.assign({}, input.staticStyle), { height: (_d = animatedHeightRef.current) !== null && _d !== void 0 ? _d : height }),
+        contentStyle: Object.assign(Object.assign({}, input.surfaceStyles.contentStyle), animatedRadiusStyle),
+        frameStyle: Object.assign(Object.assign({}, input.surfaceStyles.frameStyle), animatedRadiusStyle),
+        sheetStyle: Object.assign(Object.assign(Object.assign({}, input.surfaceStyles.sheetStyle), animatedRadiusStyle), { height: animatedValues.height }),
+        surfaceView,
     };
 }
-export function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, }) {
+export function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible, nativeView, onRequestDismiss, sheetHostLayoutUpdate, transitionSequence, }) {
     const dragStartYRef = useRef(undefined);
     const handleDragGrant = useCallback((event) => {
         dragStartYRef.current = toResponderPageY(event);
@@ -350,16 +497,19 @@ export function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible
     const sheetHostViewport = sheetHostLayoutUpdate === null || sheetHostLayoutUpdate === void 0 ? void 0 : sheetHostLayoutUpdate.size;
     const isSheetVisible = isVisible && sheetHostViewport !== undefined;
     const pointerEvents = isSheetVisible ? "auto" : "none";
+    const nativeBoxShadowSupport = useMemo(resolveNativeBoxShadowSupport, []);
     const surfaceStyles = toProviderWidgetSheetSurfaceStyles({
         frameAppearance,
         isVisible,
         sheetHostLayoutUpdate,
+        nativeBoxShadowSupport,
     });
     const sheetPresentation = useProviderWidgetSheetPresentation({
         isVisible,
         nativeView,
         sheetHostLayoutUpdate,
-        staticStyle: surfaceStyles.sheetStyle,
+        surfaceStyles,
+        transitionSequence,
     });
     return createElement(nativeView, {
         pointerEvents,
@@ -373,18 +523,22 @@ export function ProviderWidgetHostOverlay({ children, frameAppearance, isVisible
             ? WIDGET_SHEET_BACKDROP_STYLE
             : HIDDEN_WIDGET_HOST_STYLE,
         testID: "gx-widget-host-backdrop",
-    }), createElement(sheetPresentation.sheetView, {
+    }), createElement(sheetPresentation.surfaceView, {
         pointerEvents,
-        style: sheetPresentation.style,
+        style: sheetPresentation.sheetStyle,
         testID: "gx-widget-host-sheet",
-    }, createElement(nativeView, {
+    }, createElement(sheetPresentation.surfaceView, {
         pointerEvents,
-        style: surfaceStyles.contentStyle,
+        style: sheetPresentation.contentStyle,
         testID: "gx-widget-host-sheet-content",
     }, children, isSheetVisible
         ? createElement(nativeView, Object.assign(Object.assign({}, dragHandleGestureProps), { style: WIDGET_SHEET_DRAG_HANDLE_TOUCH_STYLE, testID: "gx-widget-host-drag-handle" }), createElement(nativeView, {
             style: WIDGET_SHEET_DRAG_HANDLE_INDICATOR_STYLE,
             testID: "gx-widget-host-drag-handle-indicator",
         }))
-        : null)));
+        : null), createElement(sheetPresentation.surfaceView, {
+        pointerEvents: "none",
+        style: sheetPresentation.frameStyle,
+        testID: "gx-widget-host-sheet-frame",
+    })));
 }

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.48";
+export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "3.0.56";

package/dist/view-webview-bridge-adapter.js

@@ -1,4 +1,4 @@
-import { VIEW_HOST_BOOTSTRAP_GLOBAL_KEY, VIEW_HOST_BOOTSTRAP_PROTOCOL_VERSION, VIEW_HOST_BOOTSTRAP_READY_EVENT_NAME, VIEW_HOST_BOOTSTRAP_REQUIRED_FRAGMENT, } from "@getuserfeedback/protocol/internal/view-host-bootstrap";
+import { VIEW_HOST_BOOTSTRAP_CAPABILITIES, VIEW_HOST_BOOTSTRAP_GLOBAL_KEY, VIEW_HOST_BOOTSTRAP_PROTOCOL_VERSION, VIEW_HOST_BOOTSTRAP_READY_EVENT_NAME, VIEW_HOST_BOOTSTRAP_REQUIRED_FRAGMENT, } from "@getuserfeedback/protocol/internal/view-host-bootstrap";
 import { parseWebViewConnectionBridgeMessage, } from "./webview-connection-bridge-message.js";
 import { buildWebViewConnectionBridgeScript, } from "./webview-connection-bridge-script.js";
 import { buildWebViewConnectionHostMessageScript, serializeForJavaScript, } from "./webview-connection-host-message-script.js";
@@ -21,6 +21,11 @@ const buildViewHostBootstrapScript = () => {
     const bridgeGlobalKey = serializeForJavaScript(VIEW_WEBVIEW_BRIDGE_GLOBAL_KEY);
     const bootstrapGlobalKey = serializeForJavaScript(VIEW_HOST_BOOTSTRAP_GLOBAL_KEY);
     const bootstrapProtocolVersion = serializeForJavaScript(VIEW_HOST_BOOTSTRAP_PROTOCOL_VERSION);
+    const bootstrapCapabilities = serializeForJavaScript([
+        VIEW_HOST_BOOTSTRAP_CAPABILITIES.RESOLVED_FRAME_BORDER,
+        VIEW_HOST_BOOTSTRAP_CAPABILITIES.RESOLVED_FRAME_BORDER_RADIUS,
+        VIEW_HOST_BOOTSTRAP_CAPABILITIES.RESOLVED_FRAME_BOX_SHADOW,
+    ]);
     const bootstrapReadyEventName = serializeForJavaScript(VIEW_HOST_BOOTSTRAP_READY_EVENT_NAME);
     const inactiveConnectionMessage = serializeForJavaScript(VIEW_WEBVIEW_BRIDGE_CONFIG.inactiveConnectionMessage);
     return `
@@ -28,6 +33,7 @@ const buildViewHostBootstrapScript = () => {
   var bridge = window[${bridgeGlobalKey}];
   window[${bootstrapGlobalKey}] = {
     protocolVersion: ${bootstrapProtocolVersion},
+    capabilities: ${bootstrapCapabilities},
     createViewHostConnection: function (options) {
       var config = options.config;
       var transport = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "3.0.48",
+  "version": "3.0.56",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",
@@ -44,8 +44,8 @@
     "lint": "biome check ."
   },
   "dependencies": {
-    "@getuserfeedback/protocol": "^3.12.3",
-    "@getuserfeedback/sdk": "^0.10.13",
+    "@getuserfeedback/protocol": "^3.15.0",
+    "@getuserfeedback/sdk": "^0.10.18",
     "robot3": "^1.2.0"
   },
   "peerDependencies": {