rampkit-expo-dev 0.0.26 → 0.0.28

package/build/DeviceInfoCollector.d.ts

@@ -2,7 +2,7 @@
  * RampKit Device Info Collector
  * Collects device information using native modules for the /app-users endpoint
  */
-import { DeviceInfo } from "./types";
+import { DeviceInfo, RampKitContext } from "./types";
 /**
  * Get session start time
  */
@@ -19,3 +19,8 @@ export declare function collectDeviceInfo(): Promise<DeviceInfo>;
  * Reset session (call when app is fully restarted)
  */
 export declare function resetSession(): void;
+/**
+ * Build RampKit context from DeviceInfo for WebView template resolution
+ * This creates the device/user context that gets injected as window.rampkitContext
+ */
+export declare function buildRampKitContext(deviceInfo: DeviceInfo): RampKitContext;

package/build/DeviceInfoCollector.js

@@ -11,6 +11,7 @@ exports.getSessionStartTime = getSessionStartTime;
 exports.getSessionDurationSeconds = getSessionDurationSeconds;
 exports.collectDeviceInfo = collectDeviceInfo;
 exports.resetSession = resetSession;
+exports.buildRampKitContext = buildRampKitContext;
 const react_native_1 = require("react-native");
 const RampKitNative_1 = __importDefault(require("./RampKitNative"));
 const constants_1 = require("./constants");
@@ -198,3 +199,49 @@ function resetSession() {
     sessionId = null;
     sessionStartTime = null;
 }
+/**
+ * Build RampKit context from DeviceInfo for WebView template resolution
+ * This creates the device/user context that gets injected as window.rampkitContext
+ */
+function buildRampKitContext(deviceInfo) {
+    // Calculate days since install
+    const daysSinceInstall = calculateDaysSinceInstall(deviceInfo.installDate);
+    const device = {
+        platform: deviceInfo.platform,
+        model: deviceInfo.deviceModel,
+        locale: deviceInfo.deviceLocale,
+        language: deviceInfo.deviceLanguageCode || deviceInfo.deviceLocale.split("_")[0] || "en",
+        country: deviceInfo.regionCode || deviceInfo.deviceLocale.split("_")[1] || "US",
+        currencyCode: deviceInfo.deviceCurrencyCode || "USD",
+        currencySymbol: deviceInfo.deviceCurrencySymbol || "$",
+        appVersion: deviceInfo.appVersion || "1.0.0",
+        buildNumber: deviceInfo.buildNumber || "1",
+        bundleId: deviceInfo.bundleId || "",
+        interfaceStyle: deviceInfo.interfaceStyle,
+        timezone: deviceInfo.timezoneOffsetSeconds,
+        daysSinceInstall,
+    };
+    const user = {
+        id: deviceInfo.appUserId,
+        isNewUser: deviceInfo.isFirstLaunch,
+        hasAppleSearchAdsAttribution: deviceInfo.isAppleSearchAdsAttribution,
+        sessionId: deviceInfo.appSessionId,
+        installedAt: deviceInfo.installDate,
+    };
+    return { device, user };
+}
+/**
+ * Calculate days since install from install date string
+ */
+function calculateDaysSinceInstall(installDateString) {
+    try {
+        const installDate = new Date(installDateString);
+        const now = new Date();
+        const diffMs = now.getTime() - installDate.getTime();
+        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+        return Math.max(0, diffDays);
+    }
+    catch (_a) {
+        return 0;
+    }
+}

package/build/RampKit.js

@@ -205,6 +205,10 @@ class RampKitCore {
             const requiredScripts = Array.isArray(data.requiredScripts)
                 ? data.requiredScripts
                 : [];
+            // Build device/user context for template resolution
+            const rampkitContext = this.deviceInfo
+                ? (0, DeviceInfoCollector_1.buildRampKitContext)(this.deviceInfo)
+                : undefined;
             // Track onboarding started event
             const onboardingId = data.onboardingId || data.id || "unknown";
             EventManager_1.eventManager.trackOnboardingStarted(onboardingId, screens.length);
@@ -215,6 +219,7 @@ class RampKitCore {
                     screens,
                     variables,
                     requiredScripts,
+                    rampkitContext,
                 });
             }
             catch (_) { }
@@ -223,6 +228,7 @@ class RampKitCore {
                 screens,
                 variables,
                 requiredScripts,
+                rampkitContext,
                 onOnboardingFinished: (payload) => {
                     var _a;
                     // Track onboarding completed

package/build/RampkitOverlay.d.ts

@@ -1,6 +1,8 @@
+import { RampKitContext } from "./types";
 export declare const injectedHardening = "\n(function(){\n  try {\n    var meta = document.querySelector('meta[name=\"viewport\"]');\n    if (!meta) { meta = document.createElement('meta'); meta.name = 'viewport'; document.head.appendChild(meta); }\n    meta.setAttribute('content','width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover');\n    var style = document.createElement('style');\n    style.textContent='html,body{overflow-x:hidden!important;} html,body,*{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-ms-user-select:none!important;touch-action: pan-y;} *{-webkit-tap-highlight-color: rgba(0,0,0,0)!important;} ::selection{background: transparent!important;} ::-moz-selection{background: transparent!important;} a,img{-webkit-user-drag:none!important;user-drag:none!important;-webkit-touch-callout:none!important} input,textarea{caret-color:transparent!important;-webkit-user-select:none!important;user-select:none!important}';\n    document.head.appendChild(style);\n    var prevent=function(e){e.preventDefault&&e.preventDefault();};\n    document.addEventListener('gesturestart',prevent,{passive:false});\n    document.addEventListener('gesturechange',prevent,{passive:false});\n    document.addEventListener('gestureend',prevent,{passive:false});\n    document.addEventListener('dblclick',prevent,{passive:false});\n    document.addEventListener('wheel',function(e){ if(e.ctrlKey) e.preventDefault(); },{passive:false});\n    document.addEventListener('touchmove',function(e){ if(e.scale && e.scale !== 1) e.preventDefault(); },{passive:false});\n    document.addEventListener('selectstart',prevent,{passive:false,capture:true});\n    document.addEventListener('contextmenu',prevent,{passive:false,capture:true});\n    document.addEventListener('copy',prevent,{passive:false,capture:true});\n    document.addEventListener('cut',prevent,{passive:false,capture:true});\n    document.addEventListener('paste',prevent,{passive:false,capture:true});\n    document.addEventListener('dragstart',prevent,{passive:false,capture:true});\n    // Belt-and-suspenders: aggressively clear any attempted selection\n    var clearSel=function(){\n      try{var sel=window.getSelection&&window.getSelection(); if(sel&&sel.removeAllRanges) sel.removeAllRanges();}catch(_){} }\n    document.addEventListener('selectionchange',clearSel,{passive:true,capture:true});\n    document.onselectstart=function(){ clearSel(); return false; };\n    try{ document.documentElement.style.webkitUserSelect='none'; document.documentElement.style.userSelect='none'; }catch(_){ }\n    try{ document.body.style.webkitUserSelect='none'; document.body.style.userSelect='none'; }catch(_){ }\n    var __selTimer = setInterval(clearSel, 160);\n    window.addEventListener('pagehide',function(){ try{ clearInterval(__selTimer); }catch(_){} });\n    // Continuously enforce no-select on all elements and new nodes\n    var enforceNoSelect = function(el){\n      try{\n        el.style && (el.style.webkitUserSelect='none', el.style.userSelect='none', el.style.webkitTouchCallout='none');\n        el.setAttribute && (el.setAttribute('unselectable','on'), el.setAttribute('contenteditable','false'));\n      }catch(_){}\n    }\n    try{\n      var all=document.getElementsByTagName('*');\n      for(var i=0;i<all.length;i++){ enforceNoSelect(all[i]); }\n      var obs = new MutationObserver(function(muts){\n        for(var j=0;j<muts.length;j++){\n          var m=muts[j];\n          if(m.type==='childList'){\n            m.addedNodes && m.addedNodes.forEach && m.addedNodes.forEach(function(n){ if(n && n.nodeType===1){ enforceNoSelect(n); var q=n.getElementsByTagName? n.getElementsByTagName('*'): []; for(var k=0;k<q.length;k++){ enforceNoSelect(q[k]); }}});\n          } else if(m.type==='attributes'){\n            enforceNoSelect(m.target);\n          }\n        }\n      });\n      obs.observe(document.documentElement,{ childList:true, subtree:true, attributes:true, attributeFilter:['contenteditable','style'] });\n    }catch(_){ }\n  } catch(_) {}\n})(); true;\n";
 export declare const injectedNoSelect = "\n(function(){\n  try {\n    if (window.__rkNoSelectApplied) return true;\n    window.__rkNoSelectApplied = true;\n    var style = document.getElementById('rk-no-select-style');\n    if (!style) {\n      style = document.createElement('style');\n      style.id = 'rk-no-select-style';\n      style.innerHTML = \"\n        * {\n          user-select: none !important;\n          -webkit-user-select: none !important;\n          -webkit-touch-callout: none !important;\n        }\n        ::selection {\n          background: transparent !important;\n        }\n      \";\n      document.head.appendChild(style);\n    }\n    var prevent = function(e){ if(e && e.preventDefault) e.preventDefault(); return false; };\n    document.addEventListener('contextmenu', prevent, { passive: false, capture: true });\n    document.addEventListener('selectstart', prevent, { passive: false, capture: true });\n  } catch (_) {}\n  true;\n})();\n";
 export declare const injectedVarsHandler = "\n(function(){\n  try {\n    if (window.__rkVarsHandlerApplied) return true;\n    window.__rkVarsHandlerApplied = true;\n    \n    // Handler function that updates variables and notifies the page\n    window.__rkHandleVarsUpdate = function(vars) {\n      if (!vars || typeof vars !== 'object') return;\n      // Update the global variables object\n      window.__rampkitVariables = vars;\n      // Dispatch a custom event that the page's JS can listen to for re-rendering\n      try {\n        document.dispatchEvent(new CustomEvent('rampkit:vars-updated', { detail: vars }));\n      } catch(e) {}\n      // Also try calling a global handler if the page defined one\n      try {\n        if (typeof window.onRampkitVarsUpdate === 'function') {\n          window.onRampkitVarsUpdate(vars);\n        }\n      } catch(e) {}\n    };\n    \n    // Listen for message events from React Native\n    document.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n    \n    // Also listen on window for compatibility\n    window.addEventListener('message', function(event) {\n      try {\n        var data = event.data;\n        if (data && data.type === 'rampkit:variables' && data.vars) {\n          window.__rkHandleVarsUpdate(data.vars);\n        }\n      } catch(e) {}\n    }, false);\n  } catch (_) {}\n  true;\n})();\n";
+export declare const injectedTemplateResolver = "\n(function(){\n  try {\n    if (window.__rkTemplateResolverApplied) return true;\n    window.__rkTemplateResolverApplied = true;\n    \n    // Build variable map from context\n    function buildVarMap() {\n      var vars = {};\n      var ctx = window.rampkitContext || { device: {}, user: {} };\n      var state = window.__rampkitVariables || {};\n      \n      // Device vars (device.xxx)\n      if (ctx.device) {\n        Object.keys(ctx.device).forEach(function(key) {\n          vars['device.' + key] = ctx.device[key];\n        });\n      }\n      \n      // User vars (user.xxx)\n      if (ctx.user) {\n        Object.keys(ctx.user).forEach(function(key) {\n          vars['user.' + key] = ctx.user[key];\n        });\n      }\n      \n      // State vars (varName - no prefix)\n      Object.keys(state).forEach(function(key) {\n        vars[key] = state[key];\n      });\n      \n      return vars;\n    }\n    \n    // Format a value for display\n    function formatValue(value) {\n      if (value === undefined || value === null) return '';\n      if (typeof value === 'boolean') return value ? 'true' : 'false';\n      if (typeof value === 'object') return JSON.stringify(value);\n      return String(value);\n    }\n    \n    // Resolve templates in a single text node\n    function resolveTextNode(node, vars) {\n      var text = node.textContent;\n      if (!text || text.indexOf('${') === -1) return;\n      \n      var resolved = text.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {\n        if (vars.hasOwnProperty(varName)) {\n          return formatValue(vars[varName]);\n        }\n        return match; // Keep original if var not found\n      });\n      \n      if (resolved !== text) {\n        node.textContent = resolved;\n      }\n    }\n    \n    // Resolve templates in all text nodes\n    function resolveAllTemplates() {\n      var vars = buildVarMap();\n      var walker = document.createTreeWalker(\n        document.body,\n        NodeFilter.SHOW_TEXT,\n        null,\n        false\n      );\n      \n      var node;\n      while (node = walker.nextNode()) {\n        resolveTextNode(node, vars);\n      }\n      \n      // Also resolve in attribute values that might contain templates\n      var allElements = document.body.getElementsByTagName('*');\n      for (var i = 0; i < allElements.length; i++) {\n        var el = allElements[i];\n        for (var j = 0; j < el.attributes.length; j++) {\n          var attr = el.attributes[j];\n          if (attr.value && attr.value.indexOf('${') !== -1) {\n            var resolvedAttr = attr.value.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {\n              if (vars.hasOwnProperty(varName)) {\n                return formatValue(vars[varName]);\n              }\n              return match;\n            });\n            if (resolvedAttr !== attr.value) {\n              el.setAttribute(attr.name, resolvedAttr);\n            }\n          }\n        }\n      }\n    }\n    \n    // Run on DOMContentLoaded\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', resolveAllTemplates);\n    } else {\n      // DOM already ready, run immediately\n      resolveAllTemplates();\n    }\n    \n    // Also run after a short delay to catch dynamically added content\n    setTimeout(resolveAllTemplates, 100);\n    \n    // Expose for manual re-resolution\n    window.rampkitResolveTemplates = resolveAllTemplates;\n    \n    // Re-resolve when variables update\n    document.addEventListener('rampkit:vars-updated', function() {\n      setTimeout(resolveAllTemplates, 0);\n    });\n    \n  } catch(e) {\n    console.log('[Rampkit] Template resolver error:', e);\n  }\n  true;\n})();\n";
 export type ScreenPayload = {
     id: string;
     html: string;
@@ -12,6 +14,7 @@ export declare function showRampkitOverlay(opts: {
     screens: ScreenPayload[];
     variables?: Record<string, any>;
     requiredScripts?: string[];
+    rampkitContext?: RampKitContext;
     onClose?: () => void;
     onOnboardingFinished?: (payload?: any) => void;
     onShowPaywall?: (payload?: any) => void;
@@ -27,12 +30,14 @@ export declare function preloadRampkitOverlay(opts: {
     screens: ScreenPayload[];
     variables?: Record<string, any>;
     requiredScripts?: string[];
+    rampkitContext?: RampKitContext;
 }): void;
 declare function Overlay(props: {
     onboardingId: string;
     screens: ScreenPayload[];
     variables?: Record<string, any>;
     requiredScripts?: string[];
+    rampkitContext?: RampKitContext;
     prebuiltDocs?: string[];
     onRequestClose: () => void;
     onOnboardingFinished?: (payload?: any) => void;

package/build/RampkitOverlay.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
+exports.injectedTemplateResolver = exports.injectedVarsHandler = exports.injectedNoSelect = exports.injectedHardening = void 0;
 exports.showRampkitOverlay = showRampkitOverlay;
 exports.hideRampkitOverlay = hideRampkitOverlay;
 exports.closeRampkitOverlay = closeRampkitOverlay;
@@ -173,6 +173,128 @@ exports.injectedVarsHandler = `
   true;
 })();
 `;
+// Template resolution script that replaces ${device.xxx} and ${user.xxx} with actual values
+// This runs on DOMContentLoaded and can be re-triggered via window.rampkitResolveTemplates()
+exports.injectedTemplateResolver = `
+(function(){
+  try {
+    if (window.__rkTemplateResolverApplied) return true;
+    window.__rkTemplateResolverApplied = true;
+    
+    // Build variable map from context
+    function buildVarMap() {
+      var vars = {};
+      var ctx = window.rampkitContext || { device: {}, user: {} };
+      var state = window.__rampkitVariables || {};
+      
+      // Device vars (device.xxx)
+      if (ctx.device) {
+        Object.keys(ctx.device).forEach(function(key) {
+          vars['device.' + key] = ctx.device[key];
+        });
+      }
+      
+      // User vars (user.xxx)
+      if (ctx.user) {
+        Object.keys(ctx.user).forEach(function(key) {
+          vars['user.' + key] = ctx.user[key];
+        });
+      }
+      
+      // State vars (varName - no prefix)
+      Object.keys(state).forEach(function(key) {
+        vars[key] = state[key];
+      });
+      
+      return vars;
+    }
+    
+    // Format a value for display
+    function formatValue(value) {
+      if (value === undefined || value === null) return '';
+      if (typeof value === 'boolean') return value ? 'true' : 'false';
+      if (typeof value === 'object') return JSON.stringify(value);
+      return String(value);
+    }
+    
+    // Resolve templates in a single text node
+    function resolveTextNode(node, vars) {
+      var text = node.textContent;
+      if (!text || text.indexOf('\${') === -1) return;
+      
+      var resolved = text.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {
+        if (vars.hasOwnProperty(varName)) {
+          return formatValue(vars[varName]);
+        }
+        return match; // Keep original if var not found
+      });
+      
+      if (resolved !== text) {
+        node.textContent = resolved;
+      }
+    }
+    
+    // Resolve templates in all text nodes
+    function resolveAllTemplates() {
+      var vars = buildVarMap();
+      var walker = document.createTreeWalker(
+        document.body,
+        NodeFilter.SHOW_TEXT,
+        null,
+        false
+      );
+      
+      var node;
+      while (node = walker.nextNode()) {
+        resolveTextNode(node, vars);
+      }
+      
+      // Also resolve in attribute values that might contain templates
+      var allElements = document.body.getElementsByTagName('*');
+      for (var i = 0; i < allElements.length; i++) {
+        var el = allElements[i];
+        for (var j = 0; j < el.attributes.length; j++) {
+          var attr = el.attributes[j];
+          if (attr.value && attr.value.indexOf('\${') !== -1) {
+            var resolvedAttr = attr.value.replace(/\\$\\{([A-Za-z_][A-Za-z0-9_\\.]*)\\}/g, function(match, varName) {
+              if (vars.hasOwnProperty(varName)) {
+                return formatValue(vars[varName]);
+              }
+              return match;
+            });
+            if (resolvedAttr !== attr.value) {
+              el.setAttribute(attr.name, resolvedAttr);
+            }
+          }
+        }
+      }
+    }
+    
+    // Run on DOMContentLoaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', resolveAllTemplates);
+    } else {
+      // DOM already ready, run immediately
+      resolveAllTemplates();
+    }
+    
+    // Also run after a short delay to catch dynamically added content
+    setTimeout(resolveAllTemplates, 100);
+    
+    // Expose for manual re-resolution
+    window.rampkitResolveTemplates = resolveAllTemplates;
+    
+    // Re-resolve when variables update
+    document.addEventListener('rampkit:vars-updated', function() {
+      setTimeout(resolveAllTemplates, 0);
+    });
+    
+  } catch(e) {
+    console.log('[Rampkit] Template resolver error:', e);
+  }
+  true;
+})();
+`;
 function performRampkitHaptic(event) {
     if (!event || event.action !== "haptic") {
         // Backwards compatible default
@@ -229,7 +351,7 @@ function showRampkitOverlay(opts) {
     if (sibling)
         return; // already visible
     const prebuiltDocs = preloadCache.get(opts.onboardingId);
-    sibling = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsx)(Overlay, { onboardingId: opts.onboardingId, screens: opts.screens, variables: opts.variables, requiredScripts: opts.requiredScripts, prebuiltDocs: prebuiltDocs, onRequestClose: () => {
+    sibling = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsx)(Overlay, { onboardingId: opts.onboardingId, screens: opts.screens, variables: opts.variables, requiredScripts: opts.requiredScripts, rampkitContext: opts.rampkitContext, prebuiltDocs: prebuiltDocs, onRequestClose: () => {
             var _a;
             activeCloseHandler = null;
             hideRampkitOverlay();
@@ -261,7 +383,7 @@ function preloadRampkitOverlay(opts) {
     try {
         if (preloadCache.has(opts.onboardingId))
             return;
-        const docs = opts.screens.map((s) => buildHtmlDocument(s, opts.variables, opts.requiredScripts));
+        const docs = opts.screens.map((s) => buildHtmlDocument(s, opts.variables, opts.requiredScripts, opts.rampkitContext));
         preloadCache.set(opts.onboardingId, docs);
         // Mount a hidden WebView to warm up the WebView process and cache
         if (preloadSibling)
@@ -273,14 +395,14 @@ function preloadRampkitOverlay(opts) {
                 opacity: 0,
                 top: -1000,
                 left: -1000,
-            }, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { originWhitelist: ["*"], source: { html: docs[0] || "<html></html>" }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, hideKeyboardAccessoryView: true }) }));
+            }, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { originWhitelist: ["*"], source: { html: docs[0] || "<html></html>" }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler + exports.injectedTemplateResolver, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, hideKeyboardAccessoryView: true }) }));
         preloadSibling = new react_native_root_siblings_1.default((0, jsx_runtime_1.jsx)(HiddenPreloader, {}));
     }
     catch (e) {
         // best-effort preloading; ignore errors
     }
 }
-function buildHtmlDocument(screen, variables, requiredScripts) {
+function buildHtmlDocument(screen, variables, requiredScripts, rampkitContext) {
     const css = screen.css || "";
     const html = screen.html || "";
     const js = screen.js || "";
@@ -315,6 +437,31 @@ function buildHtmlDocument(screen, variables, requiredScripts) {
             return "";
         }
     })();
+    // Default context if not provided
+    const context = rampkitContext || {
+        device: {
+            platform: "unknown",
+            model: "unknown",
+            locale: "en_US",
+            language: "en",
+            country: "US",
+            currencyCode: "USD",
+            currencySymbol: "$",
+            appVersion: "1.0.0",
+            buildNumber: "1",
+            bundleId: "",
+            interfaceStyle: "light",
+            timezone: 0,
+            daysSinceInstall: 0,
+        },
+        user: {
+            id: "",
+            isNewUser: true,
+            hasAppleSearchAdsAttribution: false,
+            sessionId: "",
+            installedAt: new Date().toISOString(),
+        },
+    };
     return `<!doctype html>
 <html>
 <head>
@@ -328,6 +475,9 @@ ${scripts}
 <body>
 ${html}
 <script>
+// Device and user context for template resolution
+window.rampkitContext = ${JSON.stringify(context)};
+// State variables from onboarding
 window.__rampkitVariables = ${JSON.stringify(variables || {})};
 ${js}
 </script>
@@ -452,11 +602,38 @@ function Overlay(props) {
             .replace(/`/g, "\\`");
         return `(function(){try{document.dispatchEvent(new MessageEvent('message',{data:${json}}));}catch(e){}})();`;
     }
+    // Build a script that directly sets variables and triggers updates
+    // This is more reliable than dispatching events which may not be caught
+    function buildDirectVarsScript(vars) {
+        const json = JSON.stringify(vars)
+            .replace(/\\/g, "\\\\")
+            .replace(/`/g, "\\`");
+        return `(function(){
+      try {
+        var newVars = ${json};
+        // Directly update the global variables object
+        window.__rampkitVariables = newVars;
+        // Call the handler if available
+        if (typeof window.__rkHandleVarsUpdate === 'function') {
+          window.__rkHandleVarsUpdate(newVars);
+        }
+        // Dispatch custom event for any listeners
+        try {
+          document.dispatchEvent(new CustomEvent('rampkit:vars-updated', {detail: newVars}));
+        } catch(e) {}
+        // Call global callback if defined
+        if (typeof window.onRampkitVarsUpdate === 'function') {
+          window.onRampkitVarsUpdate(newVars);
+        }
+      } catch(e) {
+        console.log('[Rampkit] buildDirectVarsScript error:', e);
+      }
+    })();`;
+    }
     function sendVarsToWebView(i, isInitialLoad = false) {
         const wv = webviewsRef.current[i];
         if (!wv)
             return;
-        const payload = { type: "rampkit:variables", vars: varsRef.current };
         if (__DEV__)
             console.log("[Rampkit] sendVarsToWebView", i, varsRef.current, { isInitialLoad });
         // Only update the stale filter timestamp during initial page load,
@@ -466,8 +643,10 @@ function Overlay(props) {
         if (isInitialLoad) {
             lastInitSendRef.current[i] = Date.now();
         }
+        // Use direct variable setting instead of MessageEvent dispatch
+        // This is more reliable as it doesn't depend on event listeners being set up
         // @ts-ignore: injectJavaScript exists on WebView instance
-        wv.injectJavaScript(buildDispatchScript(payload));
+        wv.injectJavaScript(buildDirectVarsScript(varsRef.current));
     }
     function broadcastVars() {
         if (__DEV__)
@@ -475,14 +654,12 @@ function Overlay(props) {
                 recipients: webviewsRef.current.length,
                 vars: varsRef.current,
             });
+        const script = buildDirectVarsScript(varsRef.current);
         for (let i = 0; i < webviewsRef.current.length; i++) {
             const wv = webviewsRef.current[i];
             if (wv) {
                 // @ts-ignore: injectJavaScript exists on WebView instance
-                wv.injectJavaScript(buildDispatchScript({
-                    type: "rampkit:variables",
-                    vars: varsRef.current,
-                }));
+                wv.injectJavaScript(script);
             }
         }
     }
@@ -498,7 +675,7 @@ function Overlay(props) {
         return () => sub.remove();
     }, [index, handleRequestClose]);
     const docs = (0, react_1.useMemo)(() => props.prebuiltDocs ||
-        props.screens.map((s) => buildHtmlDocument(s, props.variables, props.requiredScripts)), [props.prebuiltDocs, props.screens, props.variables, props.requiredScripts]);
+        props.screens.map((s) => buildHtmlDocument(s, props.variables, props.requiredScripts, props.rampkitContext)), [props.prebuiltDocs, props.screens, props.variables, props.requiredScripts, props.rampkitContext]);
     react_1.default.useEffect(() => {
         try {
             console.log("[Rampkit] Overlay mounted: docs=", docs.length);
@@ -627,7 +804,7 @@ function Overlay(props) {
             styles.root,
             !visible && styles.invisible,
             visible && { opacity: overlayOpacity },
-        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true, onLoadEnd: () => {
+        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler + exports.injectedTemplateResolver, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, hideKeyboardAccessoryView: true, onLoadEnd: () => {
                             setLoadedCount((c) => c + 1);
                             if (i === 0) {
                                 setFirstPageLoaded(true);
@@ -655,28 +832,22 @@ function Overlay(props) {
                                     typeof data.vars === "object") {
                                     if (__DEV__)
                                         console.log("[Rampkit] received variables from page", i, data.vars);
-                                    const now = Date.now();
-                                    const lastInit = lastInitSendRef.current[i] || 0;
-                                    const filtered = {};
+                                    // Accept all variable updates from pages without filtering.
+                                    // The previous filter was too aggressive and blocked legitimate
+                                    // user interactions that happened within 600ms of page load.
+                                    // We now trust that pages send correct variable updates.
                                     let changed = false;
+                                    const newVars = {};
                                     for (const [key, value] of Object.entries(data.vars)) {
                                         const hasHostVal = Object.prototype.hasOwnProperty.call(varsRef.current, key);
                                         const hostVal = varsRef.current[key];
-                                        if (now - lastInit < 600 &&
-                                            hasHostVal &&
-                                            hostVal !== undefined &&
-                                            value !== hostVal) {
-                                            if (__DEV__)
-                                                console.log("[Rampkit] ignore stale var from page", i, key, value, "kept", hostVal);
-                                            continue;
-                                        }
                                         if (!hasHostVal || hostVal !== value) {
-                                            filtered[key] = value;
+                                            newVars[key] = value;
                                             changed = true;
                                         }
                                     }
                                     if (changed) {
-                                        varsRef.current = { ...varsRef.current, ...filtered };
+                                        varsRef.current = { ...varsRef.current, ...newVars };
                                         broadcastVars();
                                     }
                                     return;

package/build/index.d.ts

@@ -6,10 +6,10 @@ import { RampKitCore } from "./RampKit";
 export declare const RampKit: RampKitCore;
 export { getRampKitUserId } from "./userId";
 export { eventManager } from "./EventManager";
-export { collectDeviceInfo, getSessionDurationSeconds, getSessionStartTime, } from "./DeviceInfoCollector";
+export { collectDeviceInfo, getSessionDurationSeconds, getSessionStartTime, buildRampKitContext, } from "./DeviceInfoCollector";
 export { default as RampKitNative } from "./RampKitNative";
 export type { NativeDeviceInfo, NativeLaunchData } from "./RampKitNative";
 export { Haptics, StoreReview, Notifications, TransactionObserver } from "./RampKitNative";
 export type { ImpactStyle, NotificationType, NotificationOptions, NotificationPermissionResult } from "./RampKitNative";
-export type { DeviceInfo, RampKitEvent, EventDevice, EventContext, RampKitConfig, RampKitEventName, AppSessionStartedProperties, AppSessionEndedProperties, AppBackgroundedProperties, AppForegroundedProperties, OnboardingStartedProperties, OnboardingScreenViewedProperties, OnboardingQuestionAnsweredProperties, OnboardingCompletedProperties, OnboardingAbandonedProperties, ScreenViewProperties, CtaTapProperties, NotificationsPromptShownProperties, NotificationsResponseProperties, PaywallShownProperties, PaywallPrimaryActionTapProperties, PaywallClosedProperties, PurchaseStartedProperties, PurchaseCompletedProperties, PurchaseFailedProperties, } from "./types";
+export type { DeviceInfo, RampKitEvent, EventDevice, EventContext, RampKitConfig, RampKitEventName, RampKitContext, RampKitDeviceContext, RampKitUserContext, AppSessionStartedProperties, AppSessionEndedProperties, AppBackgroundedProperties, AppForegroundedProperties, OnboardingStartedProperties, OnboardingScreenViewedProperties, OnboardingQuestionAnsweredProperties, OnboardingCompletedProperties, OnboardingAbandonedProperties, ScreenViewProperties, CtaTapProperties, NotificationsPromptShownProperties, NotificationsResponseProperties, PaywallShownProperties, PaywallPrimaryActionTapProperties, PaywallClosedProperties, PurchaseStartedProperties, PurchaseCompletedProperties, PurchaseFailedProperties, } from "./types";
 export { SDK_VERSION, CAPABILITIES } from "./constants";

package/build/index.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CAPABILITIES = exports.SDK_VERSION = exports.TransactionObserver = exports.Notifications = exports.StoreReview = exports.Haptics = exports.RampKitNative = exports.getSessionStartTime = exports.getSessionDurationSeconds = exports.collectDeviceInfo = exports.eventManager = exports.getRampKitUserId = exports.RampKit = void 0;
+exports.CAPABILITIES = exports.SDK_VERSION = exports.TransactionObserver = exports.Notifications = exports.StoreReview = exports.Haptics = exports.RampKitNative = exports.buildRampKitContext = exports.getSessionStartTime = exports.getSessionDurationSeconds = exports.collectDeviceInfo = exports.eventManager = exports.getRampKitUserId = exports.RampKit = void 0;
 const RampKit_1 = require("./RampKit");
 // Main SDK singleton instance
 exports.RampKit = RampKit_1.RampKitCore.instance;
@@ -22,6 +22,7 @@ var DeviceInfoCollector_1 = require("./DeviceInfoCollector");
 Object.defineProperty(exports, "collectDeviceInfo", { enumerable: true, get: function () { return DeviceInfoCollector_1.collectDeviceInfo; } });
 Object.defineProperty(exports, "getSessionDurationSeconds", { enumerable: true, get: function () { return DeviceInfoCollector_1.getSessionDurationSeconds; } });
 Object.defineProperty(exports, "getSessionStartTime", { enumerable: true, get: function () { return DeviceInfoCollector_1.getSessionStartTime; } });
+Object.defineProperty(exports, "buildRampKitContext", { enumerable: true, get: function () { return DeviceInfoCollector_1.buildRampKitContext; } });
 // Export native module for direct access
 var RampKitNative_1 = require("./RampKitNative");
 Object.defineProperty(exports, "RampKitNative", { enumerable: true, get: function () { return __importDefault(RampKitNative_1).default; } });

package/build/types.d.ts

@@ -176,3 +176,56 @@ export interface RampKitConfig {
     onShowPaywall?: (payload?: any) => void;
     showPaywall?: (payload?: any) => void;
 }
+/**
+ * Device context variables available in templates as ${device.xxx}
+ */
+export interface RampKitDeviceContext {
+    /** Platform: "iOS", "Android", or "iPadOS" */
+    platform: string;
+    /** Device model: "iPhone 15 Pro", "Pixel 7", etc. */
+    model: string;
+    /** Full locale identifier: "en_US", "fr_FR", etc. */
+    locale: string;
+    /** Language code: "en", "fr", etc. */
+    language: string;
+    /** Country/region code: "US", "FR", etc. */
+    country: string;
+    /** Currency code: "USD", "EUR", etc. */
+    currencyCode: string;
+    /** Currency symbol: "$", "€", etc. */
+    currencySymbol: string;
+    /** App version string: "1.0.0" */
+    appVersion: string;
+    /** Build number: "123" */
+    buildNumber: string;
+    /** Bundle identifier: "com.example.app" */
+    bundleId: string;
+    /** Interface style: "light" or "dark" */
+    interfaceStyle: string;
+    /** Timezone offset in seconds from GMT */
+    timezone: number;
+    /** Days since app was first installed */
+    daysSinceInstall: number;
+}
+/**
+ * User context variables available in templates as ${user.xxx}
+ */
+export interface RampKitUserContext {
+    /** Unique user identifier */
+    id: string;
+    /** Whether this is the user's first session */
+    isNewUser: boolean;
+    /** Whether user came from Apple Search Ads */
+    hasAppleSearchAdsAttribution: boolean;
+    /** Current session identifier */
+    sessionId: string;
+    /** ISO date string when app was first installed */
+    installedAt: string;
+}
+/**
+ * Full context object injected into WebView as window.rampkitContext
+ */
+export interface RampKitContext {
+    device: RampKitDeviceContext;
+    user: RampKitUserContext;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rampkit-expo-dev",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "The Expo SDK for RampKit. Build, test, and personalize app onboardings with instant updates.",
   "main": "build/index.js",
   "types": "build/index.d.ts",