@namiml/expo-sdk 3.4.7-dev.202607230540 → 3.4.7-dev.202607231604

package/dist/index.cjs

@@ -3081,14 +3081,14 @@ const NamiContentContainer = ({ component, scaleFactor, onClose, }) => {
     }, [component.verticalAlignment, component.horizontalAlignment, flexDir]);
     const renderedChildren = require$$0.useMemo(() => {
         return component.components?.map((comp, i) => (jsxRuntimeExports.jsx(reactNative.View, { style: [
-                styles$5.fullWidth,
+                styles$6.fullWidth,
                 i === 0
                     ? null
                     : childSpacingStyle(i, { spacing: component.spacing, direction }, scaleFactor),
             ], children: jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose, parentDirection: direction }) }, comp.id ?? i)));
     }, [component.components, component.spacing, direction, scaleFactor, onClose]);
     const innerContentStyle = require$$0.useMemo(() => [
-        styles$5.inner,
+        styles$6.inner,
         {
             flexDirection: flexDir,
         },
@@ -3096,11 +3096,11 @@ const NamiContentContainer = ({ component, scaleFactor, onClose, }) => {
         contentAlignment,
     ], [flexDir, inner, contentAlignment]);
     if (!scrollEnabled) {
-        return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$5.outer, outer], children: jsxRuntimeExports.jsx(reactNative.View, { style: [styles$5.scroll, innerContentStyle], children: renderedChildren }) }));
+        return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$6.outer, outer], children: jsxRuntimeExports.jsx(reactNative.View, { style: [styles$6.scroll, innerContentStyle], children: renderedChildren }) }));
     }
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$5.outer, outer], children: jsxRuntimeExports.jsx(reactNative.ScrollView, { style: styles$5.scroll, contentContainerStyle: innerContentStyle, showsVerticalScrollIndicator: false, scrollEnabled: true, children: renderedChildren }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$6.outer, outer], children: jsxRuntimeExports.jsx(reactNative.ScrollView, { style: styles$6.scroll, contentContainerStyle: innerContentStyle, showsVerticalScrollIndicator: false, scrollEnabled: true, children: renderedChildren }) }));
 };
-const styles$5 = reactNative.StyleSheet.create({
+const styles$6 = reactNative.StyleSheet.create({
     outer: {
         flex: 1,
         minHeight: 0,
@@ -3142,9 +3142,9 @@ const NamiBackgroundContainer = ({ component, scaleFactor, onClose }) => {
             return (jsxRuntimeExports.jsx(TemplateRenderer, { component: spacedComponent, scaleFactor: scaleFactor, onClose: onClose, parentDirection: direction }, comp.id ?? i));
         }) }));
     if (fillImageUrl) {
-        return (jsxRuntimeExports.jsx(reactNative.ImageBackground, { source: { uri: fillImageUrl }, resizeMode: 'cover', style: [containerStyle, styles$4.background, clipStyle], children: content }));
+        return (jsxRuntimeExports.jsx(reactNative.ImageBackground, { source: { uri: fillImageUrl }, resizeMode: 'cover', style: [containerStyle, styles$5.background, clipStyle], children: content }));
     }
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles$4.background, clipStyle], children: content }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles$5.background, clipStyle], children: content }));
 };
 function mergeRawMarginValue(existing, spacing) {
     if (existing == null)
@@ -3170,7 +3170,7 @@ function toNumericMargin(value) {
     const parsed = Number(trimmed);
     return Number.isFinite(parsed) ? parsed : null;
 }
-const styles$4 = reactNative.StyleSheet.create({
+const styles$5 = reactNative.StyleSheet.create({
     background: {
         ...reactNative.StyleSheet.absoluteFillObject,
     },
@@ -3185,9 +3185,9 @@ const NamiHeader = ({ components, scaleFactor, onClose }) => {
         ? components
         : components?.components ?? [components];
     const renderedList = require$$0.useMemo(() => list.map((comp, i) => (jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose }, comp.id ?? i))), [list, scaleFactor, onClose]);
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$3.header, { marginTop }], children: renderedList }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$4.header, { marginTop }], children: renderedList }));
 };
-const styles$3 = reactNative.StyleSheet.create({
+const styles$4 = reactNative.StyleSheet.create({
     header: {
         display: 'flex',
         position: 'relative',
@@ -3202,9 +3202,9 @@ const NamiFooter = ({ components, scaleFactor, onClose }) => {
     const list = Array.isArray(components)
         ? components
         : components?.components ?? [components];
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$2.footer, children: list.map((comp, i) => (jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose }, comp.id ?? i))) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: styles$3.footer, children: list.map((comp, i) => (jsxRuntimeExports.jsx(TemplateRenderer, { component: comp, scaleFactor: scaleFactor, onClose: onClose }, comp.id ?? i))) }));
 };
-const styles$2 = reactNative.StyleSheet.create({
+const styles$3 = reactNative.StyleSheet.create({
     footer: {
         position: 'absolute',
         bottom: 0,
@@ -3215,6 +3215,196 @@ const styles$2 = reactNative.StyleSheet.create({
     },
 });
 
+/**
+ * NAM-403: full-page screenreader announcement helpers for the Vega/Kepler
+ * (and shared Expo) renderer. RN-free so the jest node environment can unit-test
+ * it (mirrors imageAccessibility.ts). See the TV Full-Page Announcement contract.
+ */
+// Reserved action functions whose buttons never trigger a full-page announcement
+// and always speak only their own label. Source of truth: utils/actionHandler.ts
+// (duplicated here to keep this module RN-free and node-testable).
+const TEXT_TYPES = new Set(['text', 'text-list']);
+// Subtrees never descended into during the page-text walk. Button labels are
+// announced on their own focus; media/decoration carry no announce-worthy text.
+const SKIP_SUBTREE_TYPES = new Set(['button', 'image', 'videoUrl', 'spacer', 'symbol']);
+function childrenOf(node) {
+    if (Array.isArray(node))
+        return node;
+    if (node && Array.isArray(node.components))
+        return node.components;
+    return [];
+}
+function collectNode(node, resolve, out) {
+    if (!node || typeof node !== 'object')
+        return;
+    if (Array.isArray(node)) {
+        for (const child of node)
+            collectNode(child, resolve, out);
+        return;
+    }
+    if (node.hidden === true)
+        return;
+    const type = node.component;
+    if (type && TEXT_TYPES.has(type)) {
+        if (type === 'text-list' && Array.isArray(node.texts)) {
+            for (const item of node.texts) {
+                const resolved = resolve(typeof item === 'string' ? item : String(item ?? '')).trim();
+                if (resolved)
+                    out.push(resolved);
+            }
+        }
+        else {
+            const raw = node.text ?? node.title;
+            const resolved = resolve(typeof raw === 'string' ? raw : raw == null ? '' : String(raw)).trim();
+            if (resolved)
+                out.push(resolved);
+        }
+        return; // text nodes have no announce-worthy descendants
+    }
+    if (type && SKIP_SUBTREE_TYPES.has(type))
+        return;
+    for (const child of childrenOf(node))
+        collectNode(child, resolve, out);
+}
+/**
+ * Walk a page (header -> contentContainer -> footer) in source order and join the
+ * resolved text of every `text` / `text-list` node. Skips images, media, spacers,
+ * symbols, button subtrees, and any node with `hidden: true` (and its children).
+ */
+function collectPageAnnouncementText(page, resolve) {
+    const out = [];
+    collectNode(page?.header, resolve, out);
+    collectNode(page?.contentContainer, resolve, out);
+    collectNode(page?.footer, resolve, out);
+    return out.join('. ');
+}
+
+function createAnnouncementMachine() {
+    let pageAnnounced = false;
+    let deferred = null;
+    return {
+        onFocus({ kind, ownLabel, videoPlaying, buildComposite }) {
+            if (videoPlaying) {
+                // Defer: the button is hidden from a11y during playback, so nothing is
+                // spoken now; the flush on video end says the composite (first primary
+                // focus) or the focused button's own label.
+                deferred = kind === 'primary' && !pageAnnounced ? buildComposite() : ownLabel;
+                if (kind === 'primary')
+                    pageAnnounced = true;
+                return null;
+            }
+            if (kind === 'auxiliary')
+                return null; // natural focus read handles it
+            if (pageAnnounced)
+                return null; // subsequent focus -> natural read
+            pageAnnounced = true;
+            return buildComposite();
+        },
+        onVideoStopped() {
+            if (deferred == null)
+                return null;
+            const text = deferred;
+            deferred = null;
+            return text;
+        },
+        reset() {
+            pageAnnounced = false;
+            deferred = null;
+        },
+    };
+}
+
+let state = {
+    playing: false,
+    muted: false,
+};
+const listeners = new Set();
+function getVideoControlState() {
+    return state;
+}
+function subscribeVideoControls(listener) {
+    listeners.add(listener);
+    listener(state);
+    return () => listeners.delete(listener);
+}
+
+const AnnouncementCtx = require$$0.createContext(null);
+// Re-announcing identical text will not fire the live region again; append an
+// alternating zero-width space (U+200B) so each announce is a distinct text value.
+const ZERO_WIDTH_SPACE = "\u200B";
+let toggle = false;
+function distinct(text) {
+    toggle = !toggle;
+    return toggle ? text : `${text}${ZERO_WIDTH_SPACE}`;
+}
+/**
+ * NAM-403: holds per-page announcement state and drives the assertive live region.
+ * Pure decision logic lives in announcementMachine; this provider wires it to
+ * React state, the video-controls subscription, and smart-text resolution.
+ * Reset per page via the `page` dependency.
+ */
+const AnnouncementProvider = ({ page, children, }) => {
+    const ctx = usePaywallContext();
+    const [liveRegionText, setLiveRegionText] = require$$0.useState('');
+    const [isVideoPlaying, setIsVideoPlaying] = require$$0.useState(() => getVideoControlState().playing);
+    const machineRef = require$$0.useRef(createAnnouncementMachine());
+    const prevPlayingRef = require$$0.useRef(getVideoControlState().playing);
+    const buildComposite = require$$0.useCallback((ownLabel) => {
+        const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, undefined);
+        const resolve = (v) => {
+            const out = interpolateSmartText(v ?? '', replacements);
+            return out == null ? '' : String(out);
+        };
+        const pageText = collectPageAnnouncementText(page, resolve);
+        return pageText ? `${pageText}. ${ownLabel}` : ownLabel;
+    }, [ctx.state, ctx.flow, page]);
+    const announceOnFocus = require$$0.useCallback((kind, ownLabel) => {
+        const text = machineRef.current.onFocus({
+            kind,
+            ownLabel,
+            videoPlaying: getVideoControlState().playing,
+            buildComposite: () => buildComposite(ownLabel),
+        });
+        if (text != null)
+            setLiveRegionText(distinct(text));
+    }, [buildComposite]);
+    // Track video playback; flush any deferred announcement when it ends.
+    require$$0.useEffect(() => subscribeVideoControls((state) => {
+        setIsVideoPlaying(state.playing);
+        if (prevPlayingRef.current && !state.playing) {
+            const text = machineRef.current.onVideoStopped();
+            if (text != null)
+                setLiveRegionText(distinct(text));
+        }
+        prevPlayingRef.current = state.playing;
+    }), []);
+    // Reset per page.
+    require$$0.useEffect(() => {
+        machineRef.current.reset();
+        setLiveRegionText('');
+    }, [page]);
+    const value = require$$0.useMemo(() => ({ isVideoPlaying, liveRegionText, announceOnFocus }), [isVideoPlaying, liveRegionText, announceOnFocus]);
+    return jsxRuntimeExports.jsx(AnnouncementCtx.Provider, { value: value, children: children });
+};
+function useAnnouncer() {
+    const ctx = require$$0.useContext(AnnouncementCtx);
+    if (!ctx)
+        throw new Error('useAnnouncer must be used within an AnnouncementProvider');
+    return ctx;
+}
+
+/**
+ * NAM-403: visually-hidden assertive live region used to speak the full-page
+ * composite announcement. Default (RN) path uses accessibilityLiveRegion, which
+ * TalkBack/VoiceView honor on focus-independent text changes. The Kepler override
+ * (A11yLiveRegion.kepler.tsx) uses Amazon's preferred aria-live prop. Empty text
+ * renders nothing to speak.
+ */
+const A11yLiveRegion = ({ text }) => (jsxRuntimeExports.jsx(reactNative.Text, { accessible: !!text, accessibilityLiveRegion: "assertive", style: styles$2.hidden, allowFontScaling: false, children: text }));
+const styles$2 = reactNative.StyleSheet.create({
+    hidden: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', left: -9999, opacity: 0 },
+});
+
 function buildImpressionPayload(impression) {
     const payload = { ...impression };
     const sessionId = sdkCore.storageService.getSessionId();
@@ -3387,8 +3577,16 @@ const PaywallScreen = ({ paywall, onClose, onCommitted, holdInteractionUntilFocu
     // its onPress fires only for taps on non-interactive/empty areas. TV has no
     // keyboard, so it renders the content without the Pressable.
     const isTelevision = ctx.state.formFactor === 'television';
-    const pageContent = (jsxRuntimeExports.jsxs(PageFocusWrapper, { ...pageFocusWrapperProps, children: [backgroundContainer && (jsxRuntimeExports.jsx(NamiBackgroundContainer, { component: backgroundContainer, scaleFactor: scaleFactor, onClose: onClose })), hasHeader && (jsxRuntimeExports.jsx(NamiHeader, { components: header, scaleFactor: scaleFactor, onClose: onClose })), contentContainer && (jsxRuntimeExports.jsx(NamiContentContainer, { component: contentContainer, scaleFactor: scaleFactor, onClose: onClose })), hasFooter && (jsxRuntimeExports.jsx(NamiFooter, { components: footer, scaleFactor: scaleFactor, onClose: onClose })), shouldHoldForFocus && !focusReady && (jsxRuntimeExports.jsx(reactNative.View, { pointerEvents: "none", style: [styles$1.waitingOverlay, { backgroundColor: waitingOverlayColor }] }))] }, `${paywall.id}:${page.name ?? currentPageName}`));
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$1.screen, { backgroundColor: bgColor }], pointerEvents: interactionEnabled ? 'auto' : 'none', children: isTelevision ? (pageContent) : (jsxRuntimeExports.jsx(reactNative.Pressable, { style: styles$1.screen, onPress: () => reactNative.Keyboard.dismiss(), accessible: false, children: pageContent })) }));
+    const pageContent = (jsxRuntimeExports.jsxs(PageFocusWrapper, { ...pageFocusWrapperProps, children: [jsxRuntimeExports.jsx(A11yLiveRegionMount, {}), backgroundContainer && (jsxRuntimeExports.jsx(NamiBackgroundContainer, { component: backgroundContainer, scaleFactor: scaleFactor, onClose: onClose })), hasHeader && (jsxRuntimeExports.jsx(NamiHeader, { components: header, scaleFactor: scaleFactor, onClose: onClose })), contentContainer && (jsxRuntimeExports.jsx(NamiContentContainer, { component: contentContainer, scaleFactor: scaleFactor, onClose: onClose })), hasFooter && (jsxRuntimeExports.jsx(NamiFooter, { components: footer, scaleFactor: scaleFactor, onClose: onClose })), shouldHoldForFocus && !focusReady && (jsxRuntimeExports.jsx(reactNative.View, { pointerEvents: "none", style: [styles$1.waitingOverlay, { backgroundColor: waitingOverlayColor }] }))] }, `${paywall.id}:${page.name ?? currentPageName}`));
+    return (jsxRuntimeExports.jsx(AnnouncementProvider, { page: page, children: jsxRuntimeExports.jsx(reactNative.View, { style: [styles$1.screen, { backgroundColor: bgColor }], pointerEvents: interactionEnabled ? 'auto' : 'none', children: isTelevision ? (pageContent) : (jsxRuntimeExports.jsx(reactNative.Pressable, { style: styles$1.screen, onPress: () => reactNative.Keyboard.dismiss(), accessible: false, children: pageContent })) }) }, `ann:${paywall.id}:${page.name ?? currentPageName}`));
+};
+/**
+ * NAM-403: renders the assertive live region using text from the announcer.
+ * Must live under AnnouncementProvider so it can read useAnnouncer().
+ */
+const A11yLiveRegionMount = () => {
+    const { liveRegionText } = useAnnouncer();
+    return jsxRuntimeExports.jsx(A11yLiveRegion, { text: liveRegionText });
 };
 const styles$1 = reactNative.StyleSheet.create({
     screen: { flex: 1 },