@getuserfeedback/react-native 3.0.80 → 3.0.90

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/use-native-direct-command-session-controller.d.ts

@@ -0,0 +1,2 @@
+import { type NativeDirectCommandSessionController } from "./native-direct-command-session-controller.js";
+export declare function useNativeDirectCommandSessionController(): NativeDirectCommandSessionController;

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

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+import { createNativeDirectCommandSessionController, } from "./native-direct-command-session-controller.js";
+export function useNativeDirectCommandSessionController() {
+    var _a;
+    const controllerRef = useRef(null);
+    (_a = controllerRef.current) !== null && _a !== void 0 ? _a : (controllerRef.current = createNativeDirectCommandSessionController());
+    const controller = controllerRef.current;
+    const lifecycleRevisionRef = useRef(0);
+    useEffect(() => {
+        lifecycleRevisionRef.current += 1;
+        const lifecycleRevision = lifecycleRevisionRef.current;
+        return () => {
+            queueMicrotask(() => {
+                if (lifecycleRevisionRef.current === lifecycleRevision) {
+                    controller.dispose(new Error("Native provider runtime unmounted"));
+                }
+            });
+        };
+    }, [controller]);
+    return controller;
+}