@namiml/expo-sdk 3.4.12-dev.202610051759 → 3.4.12-dev.202610060208

package/dist/index.cjs

@@ -1939,6 +1939,12 @@ const PaywallProvider = ({ paywall, context, campaign, flow, onFirstFocusReady,
         setSafeAreaBottom: (bottom) => {
             providerRef.current?.setSafeAreaBottom(bottom);
         },
+        setSafeAreaLeft: (left) => {
+            providerRef.current?.setSafeAreaLeft(left);
+        },
+        setSafeAreaRight: (right) => {
+            providerRef.current?.setSafeAreaRight(right);
+        },
         setFullScreenPresentation: (full) => {
             providerRef.current?.setFullScreenPresentation(full);
         },
@@ -2329,6 +2335,117 @@ function isLinearGradient(value) {
         return false;
     return value.trim().toLowerCase().startsWith('linear-gradient(');
 }
+function splitGradientArgs(input) {
+    const out = [];
+    let current = '';
+    let depth = 0;
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[i];
+        if (ch === '(')
+            depth += 1;
+        if (ch === ')')
+            depth = Math.max(0, depth - 1);
+        if (ch === ',' && depth === 0) {
+            out.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim())
+        out.push(current.trim());
+    return out;
+}
+function parseAngleToken(token) {
+    const t = token.trim().toLowerCase();
+    if (t.endsWith('deg')) {
+        const num = parseFloat(t.replace('deg', '').trim());
+        return Number.isFinite(num) ? num : undefined;
+    }
+    if (t.startsWith('to ')) {
+        // CSS gradient directions
+        if (t.includes('right') && t.includes('top'))
+            return 45;
+        if (t.includes('right') && t.includes('bottom'))
+            return 135;
+        if (t.includes('left') && t.includes('bottom'))
+            return 225;
+        if (t.includes('left') && t.includes('top'))
+            return 315;
+        if (t.includes('right'))
+            return 90;
+        if (t.includes('left'))
+            return 270;
+        if (t.includes('bottom'))
+            return 180;
+        if (t.includes('top'))
+            return 0;
+    }
+    return undefined;
+}
+// NAM-3538: parse `linear-gradient(<angle|to side>?, <color> [pct%], ...)` for the
+// backgroundContainer overlay. Offsets are 0..1; stops without a % are spaced evenly.
+function parseLinearGradient(value) {
+    if (!isLinearGradient(value))
+        return undefined;
+    const trimmed = value.trim();
+    const open = trimmed.indexOf('(');
+    const close = trimmed.lastIndexOf(')');
+    if (open < 0 || close <= open)
+        return undefined;
+    const args = splitGradientArgs(trimmed.slice(open + 1, close));
+    if (!args.length)
+        return undefined;
+    let angle = 180;
+    const firstAngle = parseAngleToken(args[0]);
+    if (firstAngle !== undefined) {
+        angle = firstAngle;
+        args.shift();
+    }
+    const colors = [];
+    const offsets = [];
+    for (const arg of args) {
+        const match = arg.match(/^(.*?)(?:\s+(-?[\d.]+)%)?$/);
+        const color = parseColor((match?.[1] ?? arg).trim());
+        if (!color)
+            return undefined;
+        colors.push(color);
+        const pct = match?.[2] !== undefined ? parseFloat(match[2]) : NaN;
+        offsets.push(Number.isFinite(pct) ? Math.min(1, Math.max(0, pct / 100)) : undefined);
+    }
+    if (colors.length < 2)
+        return undefined;
+    if (offsets[0] === undefined)
+        offsets[0] = 0;
+    if (offsets[offsets.length - 1] === undefined)
+        offsets[offsets.length - 1] = 1;
+    let prev = 0;
+    for (let i = 1; i < offsets.length; i++) {
+        if (offsets[i] === undefined)
+            continue;
+        const gap = i - prev;
+        for (let j = prev + 1; j < i; j++) {
+            offsets[j] = offsets[prev] + ((offsets[i] - offsets[prev]) * (j - prev)) / gap;
+        }
+        prev = i;
+    }
+    return { angle, stops: colors.map((color, i) => ({ color, offset: offsets[i] })) };
+}
+// CSS gradient line for a w x h box: length |w*sin| + |h*cos|, centred on the box.
+function gradientLine(angleDeg, width, height) {
+    const theta = (angleDeg * Math.PI) / 180;
+    const length = Math.abs(width * Math.sin(theta)) + Math.abs(height * Math.cos(theta));
+    const dx = (Math.sin(theta) * length) / 2;
+    const dy = (-Math.cos(theta) * length) / 2;
+    const cx = width / 2;
+    const cy = height / 2;
+    return { x1: cx - dx, y1: cy - dy, x2: cx + dx, y2: cy + dy };
+}
+// NAM-3538: solid stand-in when SVG is unavailable (VegaOS) — the last stop keeps a
+// "darken toward the bottom" scrim as a uniform darken rather than nothing.
+function pickOverlayFallbackColor(spec) {
+    return spec.stops[spec.stops.length - 1]?.color;
+}
 function parseSize(value, scaleFactor = 1) {
     if (value === undefined || value === null)
         return undefined;
@@ -2788,6 +2905,15 @@ function valueFromSmartText(ctx, value, sku, block = null) {
     }
     return value;
 }
+// NAM-3538: the background container bypasses TemplateRenderer, so only its overlayColor
+// is run through conditionAttributes + smart text.
+function resolveOverlayColor(ctx, component) {
+    if (!component)
+        return undefined;
+    const resolved = component.conditionAttributes ? withOverrides(ctx, component) : component;
+    const value = valueFromSmartText(ctx, resolved.overlayColor);
+    return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
 function resolveComponentSmartText(component, ctx) {
     const smartTextSku = componentSmartTextSku(component);
     const replacements = buildSmartTextReplacements(ctx.state, ctx.flow, smartTextSku);
@@ -3109,14 +3235,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$6.fullWidth,
+                styles$7.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$6.inner,
+        styles$7.inner,
         {
             flexDirection: flexDir,
         },
@@ -3124,11 +3250,11 @@ const NamiContentContainer = ({ component, scaleFactor, onClose, }) => {
         contentAlignment,
     ], [flexDir, inner, contentAlignment]);
     if (!scrollEnabled) {
-        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$7.outer, outer], children: jsxRuntimeExports.jsx(reactNative.View, { style: [styles$7.scroll, innerContentStyle], 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 }) }));
+    return (jsxRuntimeExports.jsx(reactNative.View, { style: [styles$7.outer, outer], children: jsxRuntimeExports.jsx(reactNative.ScrollView, { style: styles$7.scroll, contentContainerStyle: innerContentStyle, showsVerticalScrollIndicator: false, scrollEnabled: true, children: renderedChildren }) }));
 };
-const styles$6 = reactNative.StyleSheet.create({
+const styles$7 = reactNative.StyleSheet.create({
     outer: {
         flex: 1,
         minHeight: 0,
@@ -3146,10 +3272,76 @@ const styles$6 = reactNative.StyleSheet.create({
     },
 });
 
+// react-native-svg may be missing on some runtimes (e.g. VegaOS); fall back to a solid color.
+let SvgComponent = null;
+let DefsComponent = null;
+let LinearGradientComponent = null;
+let StopComponent = null;
+let RectComponent = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const svg = require('react-native-svg');
+    SvgComponent = svg.default ?? svg.Svg ?? null;
+    DefsComponent = svg.Defs ?? null;
+    LinearGradientComponent = svg.LinearGradient ?? null;
+    StopComponent = svg.Stop ?? null;
+    RectComponent = svg.Rect ?? null;
+}
+catch {
+    SvgComponent = null;
+}
+const RADIUS_KEYS = [
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+];
+// NAM-3538: scrim painted above the background container's children, below the page content.
+const BackgroundOverlay = ({ color, radiusStyle }) => {
+    const [size, setSize] = require$$0.useState({ w: 0, h: 0 });
+    const radii = {};
+    RADIUS_KEYS.forEach((key) => {
+        if (radiusStyle[key] !== undefined)
+            radii[key] = radiusStyle[key];
+    });
+    const base = [styles$6.overlay, radii];
+    const solid = parseColor(color);
+    if (solid) {
+        return jsxRuntimeExports.jsx(reactNative.View, { pointerEvents: 'none', style: [...base, { backgroundColor: solid }] });
+    }
+    const spec = parseLinearGradient(color);
+    if (!spec)
+        return null;
+    const canRenderSvg = Boolean(SvgComponent && DefsComponent && LinearGradientComponent && StopComponent && RectComponent);
+    if (!canRenderSvg) {
+        return jsxRuntimeExports.jsx(reactNative.View, { pointerEvents: 'none', style: [...base, { backgroundColor: pickOverlayFallbackColor(spec) }] });
+    }
+    const Svg = SvgComponent;
+    const Defs = DefsComponent;
+    const Gradient = LinearGradientComponent;
+    const Stop = StopComponent;
+    const Rect = RectComponent;
+    const onLayout = (e) => {
+        const { width, height } = e.nativeEvent.layout;
+        setSize((prev) => (prev.w === width && prev.h === height ? prev : { w: width, h: height }));
+    };
+    return (jsxRuntimeExports.jsx(reactNative.View, { pointerEvents: 'none', style: base, onLayout: onLayout, children: size.w > 0 && size.h > 0 ? (jsxRuntimeExports.jsxs(Svg, { width: size.w, height: size.h, children: [jsxRuntimeExports.jsx(Defs, { children: jsxRuntimeExports.jsx(Gradient, { id: 'namiOverlay', gradientUnits: 'userSpaceOnUse', ...gradientLine(spec.angle, size.w, size.h), children: spec.stops.map((stop, i) => (jsxRuntimeExports.jsx(Stop, { offset: stop.offset, stopColor: stop.color }, i))) }) }), jsxRuntimeExports.jsx(Rect, { width: size.w, height: size.h, fill: 'url(#namiOverlay)' })] })) : null }));
+};
+const styles$6 = reactNative.StyleSheet.create({
+    overlay: {
+        ...reactNative.StyleSheet.absoluteFillObject,
+        overflow: 'hidden',
+    },
+});
+
 const NamiBackgroundContainer = ({ component, scaleFactor, onClose }) => {
+    const ctx = usePaywallContext();
+    const containerStyle = require$$0.useMemo(() => (component ? applyStyles(component, scaleFactor) : {}), [component, scaleFactor]);
+    // NAM-3538: only overlayColor is resolved here; the container itself skips TemplateRenderer.
+    const overlayColor = require$$0.useMemo(() => resolveOverlayColor(ctx, component), [ctx, component]);
     if (!component || component.hidden)
         return null;
-    const containerStyle = require$$0.useMemo(() => applyStyles(component, scaleFactor), [component, scaleFactor]);
     const fillImageUrl = resolveFillImageUrl(component.fillImage);
     const bgColor = parseColor(component.fillColor) ?? parseColor(component.fillColorFallback);
     // Only clip when the container is a filled "tile" with specific (non-all-corners)
@@ -3169,10 +3361,11 @@ const NamiBackgroundContainer = ({ component, scaleFactor, onClose }) => {
                 };
             return (jsxRuntimeExports.jsx(TemplateRenderer, { component: spacedComponent, scaleFactor: scaleFactor, onClose: onClose, parentDirection: direction }, comp.id ?? i));
         }) }));
+    const overlay = overlayColor ? jsxRuntimeExports.jsx(BackgroundOverlay, { color: overlayColor, radiusStyle: containerStyle }) : null;
     if (fillImageUrl) {
-        return (jsxRuntimeExports.jsx(reactNative.ImageBackground, { source: { uri: fillImageUrl }, resizeMode: 'cover', style: [containerStyle, styles$5.background, clipStyle], children: content }));
+        return (jsxRuntimeExports.jsxs(reactNative.ImageBackground, { source: { uri: fillImageUrl }, resizeMode: 'cover', style: [containerStyle, styles$5.background, clipStyle], children: [content, overlay] }));
     }
-    return (jsxRuntimeExports.jsx(reactNative.View, { style: [containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles$5.background, clipStyle], children: content }));
+    return (jsxRuntimeExports.jsxs(reactNative.View, { style: [containerStyle, bgColor ? { backgroundColor: bgColor } : null, styles$5.background, clipStyle], children: [content, overlay] }));
 };
 function mergeRawMarginValue(existing, spacing) {
     if (existing == null)
@@ -3472,13 +3665,15 @@ const PaywallScreen = ({ paywall, onClose, onCommitted, holdInteractionUntilFocu
     const ctx = usePaywallContext();
     const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
     const focusReadyCtx = useFirstFocusReadyContext();
-    // Push the measured top and bottom safe-area insets into paywall state so
-    // templates can position chrome via ${state.safeAreaTop} (e.g. header
-    // topPadding, background topMargin) and ${state.safeAreaBottom} (e.g. a
-    // footer clear of the home indicator / gesture bar). Mirrors the native
-    // renderers, which measure the insets and set the same state. The full-bleed
-    // root lets the background extend under the system bars and nothing pads the
-    // footer, so the token is the only bottom offset — no double-padding.
+    // Push the measured safe-area insets into paywall state so templates can
+    // position chrome via ${state.safeAreaTop} (e.g. header topPadding,
+    // background topMargin), ${state.safeAreaBottom} (e.g. a footer clear of the
+    // home indicator / gesture bar) and ${state.safeAreaLeft} /
+    // ${state.safeAreaRight} (content clear of a landscape notch, cutout or
+    // side navigation bar). Mirrors the native renderers, which measure the
+    // insets and set the same state. The full-bleed root lets the background
+    // extend under the system bars and nothing pads the footer or the sides, so
+    // each token is the only offset on its edge — no double-padding.
     // Depend only on the inset values (stable per device/orientation) —
     // depending on ctx would re-run every render and loop through setState.
     require$$0.useEffect(() => {
@@ -3487,6 +3682,12 @@ const PaywallScreen = ({ paywall, onClose, onCommitted, holdInteractionUntilFocu
     require$$0.useEffect(() => {
         ctx.setSafeAreaBottom(insets.bottom);
     }, [insets.bottom]);
+    require$$0.useEffect(() => {
+        ctx.setSafeAreaLeft(insets.left);
+    }, [insets.left]);
+    require$$0.useEffect(() => {
+        ctx.setSafeAreaRight(insets.right);
+    }, [insets.right]);
     const scaleFactor = sdkCore.getDeviceScaleFactor(ctx.state.formFactor);
     const userInteractionEnabled = ctx.state.userInteractionEnabled !== false;
     const currentPageName = ctx.state.selectedPaywall === paywall