rampkit-expo-dev 0.0.42 → 0.0.44

package/build/RampkitOverlay.d.ts

@@ -2,7 +2,7 @@ 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 injectedButtonAnimations = "\n(function(){\n  try {\n    if (window.__rkButtonAnimApplied) return true;\n    window.__rkButtonAnimApplied = true;\n    \n    // Add styles for button animations\n    var style = document.createElement('style');\n    style.id = 'rk-button-anim-style';\n    style.textContent = \n      '*.rk-pressed, .rk-pressed, [class*=\"rk-pressed\"] {' +\n      '  transform: scale(0.97) !important;' +\n      '  -webkit-transform: scale(0.97) !important;' +\n      '  opacity: 0.8 !important;' +\n      '  transform-origin: center center !important;' +\n      '  -webkit-transform-origin: center center !important;' +\n      '  transition: transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;' +\n      '  -webkit-transition: -webkit-transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;' +\n      '}' +\n      '*.rk-released, .rk-released, [class*=\"rk-released\"] {' +\n      '  transform: scale(1) !important;' +\n      '  -webkit-transform: scale(1) !important;' +\n      '  opacity: 1 !important;' +\n      '  transform-origin: center center !important;' +\n      '  -webkit-transform-origin: center center !important;' +\n      '  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;' +\n      '  -webkit-transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;' +\n      '}';\n    document.head.appendChild(style);\n    \n    // Find any interactive element in the parent chain\n    function findInteractive(el) {\n      var current = el;\n      for (var i = 0; i < 15 && current; i++) {\n        if (!current.tagName) { current = current.parentElement; continue; }\n        var tag = current.tagName.toLowerCase();\n        // Match common interactive elements\n        if (tag === 'button' || tag === 'a' || tag === 'input' || tag === 'select') return current;\n        // Match elements with click handlers or data attributes\n        if (current.onclick || current.hasAttribute('onclick')) return current;\n        if (current.hasAttribute('data-rampkit-action')) return current;\n        if (current.hasAttribute('data-rampkit-navigate')) return current;\n        if (current.hasAttribute('data-rampkit-tap')) return current;\n        // Match elements with role=\"button\" or tabindex\n        if (current.getAttribute('role') === 'button') return current;\n        if (current.hasAttribute('tabindex')) return current;\n        // Match common button classes\n        if (current.className && typeof current.className === 'string') {\n          var cls = current.className.toLowerCase();\n          if (cls.indexOf('btn') !== -1 || cls.indexOf('button') !== -1 || cls.indexOf('cta') !== -1 || cls.indexOf('interactive') !== -1) return current;\n        }\n        // Match elements with cursor pointer style\n        try {\n          var computed = window.getComputedStyle(current);\n          if (computed && computed.cursor === 'pointer') return current;\n        } catch(e) {}\n        current = current.parentElement;\n      }\n      return null;\n    }\n    \n    var pressed = null;\n    var releaseTimer = null;\n    \n    function onStart(e) {\n      try {\n        var target = findInteractive(e.target);\n        if (!target) return;\n        if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }\n        target.classList.remove('rk-released');\n        target.classList.add('rk-pressed');\n        pressed = target;\n      } catch(err) { console.log('[RK] touch error:', err); }\n    }\n    \n    function onEnd(e) {\n      try {\n        if (!pressed) return;\n        var t = pressed;\n        t.classList.remove('rk-pressed');\n        t.classList.add('rk-released');\n        releaseTimer = setTimeout(function() {\n          t.classList.remove('rk-released');\n          releaseTimer = null;\n        }, 300);\n        pressed = null;\n      } catch(err) {}\n    }\n    \n    function onCancel(e) {\n      try {\n        if (!pressed) return;\n        pressed.classList.remove('rk-pressed', 'rk-released');\n        pressed = null;\n        if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }\n      } catch(err) {}\n    }\n    \n    // Capture phase for immediate response\n    document.addEventListener('touchstart', onStart, { passive: true, capture: true });\n    document.addEventListener('touchend', onEnd, { passive: true, capture: true });\n    document.addEventListener('touchcancel', onCancel, { passive: true, capture: true });\n    document.addEventListener('mousedown', onStart, { passive: true, capture: true });\n    document.addEventListener('mouseup', onEnd, { passive: true, capture: true });\n    \n    console.log('[RK] Button animations initialized');\n  } catch (err) { console.log('[RK] Button anim error:', err); }\n  true;\n})();\n";
+export declare const injectedButtonAnimations = "\n(function(){\n  try {\n    if (window.__rkButtonAnimApplied) return true;\n    window.__rkButtonAnimApplied = true;\n    \n    var pressed = null;\n    var pressedOriginalTransform = '';\n    var pressedOriginalOpacity = '';\n    var pressedOriginalTransition = '';\n    var releaseTimer = null;\n    \n    // Find interactive element - very permissive, looks for any clickable-looking element\n    function findInteractive(el) {\n      var current = el;\n      for (var i = 0; i < 20 && current && current !== document.body && current !== document.documentElement; i++) {\n        if (!current || !current.tagName) { current = current.parentElement; continue; }\n        var tag = current.tagName.toLowerCase();\n        \n        // Skip tiny elements (likely icons inside buttons)\n        var rect = current.getBoundingClientRect();\n        if (rect.width < 20 || rect.height < 20) { current = current.parentElement; continue; }\n        \n        // Match standard interactive elements\n        if (tag === 'button' || tag === 'a' || tag === 'input' || tag === 'select') return current;\n        \n        // Match elements with any data attribute containing action/navigate/tap/click\n        var attrs = current.attributes;\n        if (attrs) {\n          for (var j = 0; j < attrs.length; j++) {\n            var attrName = attrs[j].name.toLowerCase();\n            if (attrName.indexOf('click') !== -1 || attrName.indexOf('tap') !== -1 || \n                attrName.indexOf('action') !== -1 || attrName.indexOf('navigate') !== -1 ||\n                attrName.indexOf('press') !== -1) {\n              return current;\n            }\n          }\n        }\n        \n        // Match elements with onclick\n        if (current.onclick || current.hasAttribute('onclick')) return current;\n        \n        // Match elements with role=\"button\" or tabindex\n        if (current.getAttribute('role') === 'button') return current;\n        \n        // Match any element with an ID containing button/btn/cta\n        var id = current.id || '';\n        if (id && (id.toLowerCase().indexOf('button') !== -1 || id.toLowerCase().indexOf('btn') !== -1 || id.toLowerCase().indexOf('cta') !== -1)) return current;\n        \n        // Match elements with button-like classes\n        var className = current.className;\n        if (className && typeof className === 'string') {\n          var cls = className.toLowerCase();\n          if (cls.indexOf('btn') !== -1 || cls.indexOf('button') !== -1 || cls.indexOf('cta') !== -1 || \n              cls.indexOf('clickable') !== -1 || cls.indexOf('tappable') !== -1 || cls.indexOf('pressable') !== -1) {\n            return current;\n          }\n        }\n        \n        // Match elements with cursor pointer\n        try {\n          var computed = window.getComputedStyle(current);\n          if (computed && computed.cursor === 'pointer') return current;\n        } catch(e) {}\n        \n        current = current.parentElement;\n      }\n      return null;\n    }\n    \n    function applyPressedStyle(el) {\n      if (!el || !el.style) return;\n      // Save original styles\n      pressedOriginalTransform = el.style.transform || '';\n      pressedOriginalOpacity = el.style.opacity || '';\n      pressedOriginalTransition = el.style.transition || '';\n      // Apply pressed style with inline styles for maximum specificity\n      el.style.transition = 'transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1)';\n      el.style.transform = 'scale(0.97)';\n      el.style.opacity = '0.8';\n    }\n    \n    function applyReleasedStyle(el) {\n      if (!el || !el.style) return;\n      // Apply spring-back animation\n      el.style.transition = 'transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1)';\n      el.style.transform = pressedOriginalTransform || 'scale(1)';\n      el.style.opacity = pressedOriginalOpacity || '1';\n    }\n    \n    function resetStyle(el) {\n      if (!el || !el.style) return;\n      el.style.transform = pressedOriginalTransform;\n      el.style.opacity = pressedOriginalOpacity;\n      el.style.transition = pressedOriginalTransition;\n    }\n    \n    function onTouchStart(e) {\n      try {\n        var target = findInteractive(e.target);\n        if (!target) return;\n        if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }\n        if (pressed && pressed !== target) { resetStyle(pressed); }\n        applyPressedStyle(target);\n        pressed = target;\n      } catch(err) {}\n    }\n    \n    function onTouchEnd(e) {\n      try {\n        if (!pressed) return;\n        var t = pressed;\n        applyReleasedStyle(t);\n        releaseTimer = setTimeout(function() {\n          resetStyle(t);\n          releaseTimer = null;\n        }, 300);\n        pressed = null;\n      } catch(err) {}\n    }\n    \n    function onTouchCancel(e) {\n      try {\n        if (!pressed) return;\n        resetStyle(pressed);\n        pressed = null;\n        if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }\n      } catch(err) {}\n    }\n    \n    // Use capture phase for immediate response before any other handlers\n    document.addEventListener('touchstart', onTouchStart, { passive: true, capture: true });\n    document.addEventListener('touchend', onTouchEnd, { passive: true, capture: true });\n    document.addEventListener('touchcancel', onTouchCancel, { passive: true, capture: true });\n    // Mouse events for testing\n    document.addEventListener('mousedown', onTouchStart, { passive: true, capture: true });\n    document.addEventListener('mouseup', onTouchEnd, { passive: true, capture: true });\n    \n  } catch (err) {}\n  true;\n})();\n";
 export type ScreenPayload = {
     id: string;
     html: string;

package/build/RampkitOverlay.js

@@ -175,113 +175,146 @@ exports.injectedVarsHandler = `
 `;
 // Button tap animation script - handles spring animations for interactive elements
 // Triggers on touchstart (not click) for immediate feedback
+// Uses inline styles for maximum compatibility
 exports.injectedButtonAnimations = `
 (function(){
   try {
     if (window.__rkButtonAnimApplied) return true;
     window.__rkButtonAnimApplied = true;
     
-    // Add styles for button animations
-    var style = document.createElement('style');
-    style.id = 'rk-button-anim-style';
-    style.textContent = 
-      '*.rk-pressed, .rk-pressed, [class*="rk-pressed"] {' +
-      '  transform: scale(0.97) !important;' +
-      '  -webkit-transform: scale(0.97) !important;' +
-      '  opacity: 0.8 !important;' +
-      '  transform-origin: center center !important;' +
-      '  -webkit-transform-origin: center center !important;' +
-      '  transition: transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1), -webkit-transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;' +
-      '  -webkit-transition: -webkit-transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1) !important;' +
-      '}' +
-      '*.rk-released, .rk-released, [class*="rk-released"] {' +
-      '  transform: scale(1) !important;' +
-      '  -webkit-transform: scale(1) !important;' +
-      '  opacity: 1 !important;' +
-      '  transform-origin: center center !important;' +
-      '  -webkit-transform-origin: center center !important;' +
-      '  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;' +
-      '  -webkit-transition: -webkit-transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;' +
-      '}';
-    document.head.appendChild(style);
+    var pressed = null;
+    var pressedOriginalTransform = '';
+    var pressedOriginalOpacity = '';
+    var pressedOriginalTransition = '';
+    var releaseTimer = null;
     
-    // Find any interactive element in the parent chain
+    // Find interactive element - very permissive, looks for any clickable-looking element
     function findInteractive(el) {
       var current = el;
-      for (var i = 0; i < 15 && current; i++) {
-        if (!current.tagName) { current = current.parentElement; continue; }
+      for (var i = 0; i < 20 && current && current !== document.body && current !== document.documentElement; i++) {
+        if (!current || !current.tagName) { current = current.parentElement; continue; }
         var tag = current.tagName.toLowerCase();
-        // Match common interactive elements
+        
+        // Skip tiny elements (likely icons inside buttons)
+        var rect = current.getBoundingClientRect();
+        if (rect.width < 20 || rect.height < 20) { current = current.parentElement; continue; }
+        
+        // Match standard interactive elements
         if (tag === 'button' || tag === 'a' || tag === 'input' || tag === 'select') return current;
-        // Match elements with click handlers or data attributes
+        
+        // Match elements with any data attribute containing action/navigate/tap/click
+        var attrs = current.attributes;
+        if (attrs) {
+          for (var j = 0; j < attrs.length; j++) {
+            var attrName = attrs[j].name.toLowerCase();
+            if (attrName.indexOf('click') !== -1 || attrName.indexOf('tap') !== -1 || 
+                attrName.indexOf('action') !== -1 || attrName.indexOf('navigate') !== -1 ||
+                attrName.indexOf('press') !== -1) {
+              return current;
+            }
+          }
+        }
+        
+        // Match elements with onclick
         if (current.onclick || current.hasAttribute('onclick')) return current;
-        if (current.hasAttribute('data-rampkit-action')) return current;
-        if (current.hasAttribute('data-rampkit-navigate')) return current;
-        if (current.hasAttribute('data-rampkit-tap')) return current;
+        
         // Match elements with role="button" or tabindex
         if (current.getAttribute('role') === 'button') return current;
-        if (current.hasAttribute('tabindex')) return current;
-        // Match common button classes
-        if (current.className && typeof current.className === 'string') {
-          var cls = current.className.toLowerCase();
-          if (cls.indexOf('btn') !== -1 || cls.indexOf('button') !== -1 || cls.indexOf('cta') !== -1 || cls.indexOf('interactive') !== -1) return current;
+        
+        // Match any element with an ID containing button/btn/cta
+        var id = current.id || '';
+        if (id && (id.toLowerCase().indexOf('button') !== -1 || id.toLowerCase().indexOf('btn') !== -1 || id.toLowerCase().indexOf('cta') !== -1)) return current;
+        
+        // Match elements with button-like classes
+        var className = current.className;
+        if (className && typeof className === 'string') {
+          var cls = className.toLowerCase();
+          if (cls.indexOf('btn') !== -1 || cls.indexOf('button') !== -1 || cls.indexOf('cta') !== -1 || 
+              cls.indexOf('clickable') !== -1 || cls.indexOf('tappable') !== -1 || cls.indexOf('pressable') !== -1) {
+            return current;
+          }
         }
-        // Match elements with cursor pointer style
+        
+        // Match elements with cursor pointer
         try {
           var computed = window.getComputedStyle(current);
           if (computed && computed.cursor === 'pointer') return current;
         } catch(e) {}
+        
         current = current.parentElement;
       }
       return null;
     }
     
-    var pressed = null;
-    var releaseTimer = null;
+    function applyPressedStyle(el) {
+      if (!el || !el.style) return;
+      // Save original styles
+      pressedOriginalTransform = el.style.transform || '';
+      pressedOriginalOpacity = el.style.opacity || '';
+      pressedOriginalTransition = el.style.transition || '';
+      // Apply pressed style with inline styles for maximum specificity
+      el.style.transition = 'transform 80ms cubic-bezier(0.25, 0.1, 0.25, 1), opacity 80ms cubic-bezier(0.25, 0.1, 0.25, 1)';
+      el.style.transform = 'scale(0.97)';
+      el.style.opacity = '0.8';
+    }
+    
+    function applyReleasedStyle(el) {
+      if (!el || !el.style) return;
+      // Apply spring-back animation
+      el.style.transition = 'transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 280ms cubic-bezier(0.34, 1.56, 0.64, 1)';
+      el.style.transform = pressedOriginalTransform || 'scale(1)';
+      el.style.opacity = pressedOriginalOpacity || '1';
+    }
+    
+    function resetStyle(el) {
+      if (!el || !el.style) return;
+      el.style.transform = pressedOriginalTransform;
+      el.style.opacity = pressedOriginalOpacity;
+      el.style.transition = pressedOriginalTransition;
+    }
     
-    function onStart(e) {
+    function onTouchStart(e) {
       try {
         var target = findInteractive(e.target);
         if (!target) return;
         if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }
-        target.classList.remove('rk-released');
-        target.classList.add('rk-pressed');
+        if (pressed && pressed !== target) { resetStyle(pressed); }
+        applyPressedStyle(target);
         pressed = target;
-      } catch(err) { console.log('[RK] touch error:', err); }
+      } catch(err) {}
     }
     
-    function onEnd(e) {
+    function onTouchEnd(e) {
       try {
         if (!pressed) return;
         var t = pressed;
-        t.classList.remove('rk-pressed');
-        t.classList.add('rk-released');
+        applyReleasedStyle(t);
         releaseTimer = setTimeout(function() {
-          t.classList.remove('rk-released');
+          resetStyle(t);
           releaseTimer = null;
         }, 300);
         pressed = null;
       } catch(err) {}
     }
     
-    function onCancel(e) {
+    function onTouchCancel(e) {
       try {
         if (!pressed) return;
-        pressed.classList.remove('rk-pressed', 'rk-released');
+        resetStyle(pressed);
         pressed = null;
         if (releaseTimer) { clearTimeout(releaseTimer); releaseTimer = null; }
       } catch(err) {}
     }
     
-    // Capture phase for immediate response
-    document.addEventListener('touchstart', onStart, { passive: true, capture: true });
-    document.addEventListener('touchend', onEnd, { passive: true, capture: true });
-    document.addEventListener('touchcancel', onCancel, { passive: true, capture: true });
-    document.addEventListener('mousedown', onStart, { passive: true, capture: true });
-    document.addEventListener('mouseup', onEnd, { passive: true, capture: true });
+    // Use capture phase for immediate response before any other handlers
+    document.addEventListener('touchstart', onTouchStart, { passive: true, capture: true });
+    document.addEventListener('touchend', onTouchEnd, { passive: true, capture: true });
+    document.addEventListener('touchcancel', onTouchCancel, { passive: true, capture: true });
+    // Mouse events for testing
+    document.addEventListener('mousedown', onTouchStart, { passive: true, capture: true });
+    document.addEventListener('mouseup', onTouchEnd, { passive: true, capture: true });
     
-    console.log('[RK] Button animations initialized');
-  } catch (err) { console.log('[RK] Button anim error:', err); }
+  } catch (err) {}
   true;
 })();
 `;
@@ -384,16 +417,177 @@ 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 + exports.injectedButtonAnimations, 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 + exports.injectedButtonAnimations, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler + exports.injectedButtonAnimations, 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
     }
 }
+/**
+ * Evaluate a comparison condition against variables
+ * Supports: ==, !=, >, <, >=, <=, and truthy checks
+ */
+function evaluateCondition(condition, vars) {
+    condition = condition.trim();
+    // Match comparison operators: ==, !=, >=, <=, >, <
+    const comparisonMatch = condition.match(/^([A-Za-z_][A-Za-z0-9_.]*)\s*(==|!=|>=|<=|>|<)\s*(.+)$/);
+    if (comparisonMatch) {
+        const [, varName, operator, rawRight] = comparisonMatch;
+        const leftValue = vars.hasOwnProperty(varName) ? vars[varName] : undefined;
+        let rightValue = rawRight.trim();
+        // Parse right side - could be a quoted string or a number or a variable
+        if ((rightValue.startsWith('"') && rightValue.endsWith('"')) ||
+            (rightValue.startsWith("'") && rightValue.endsWith("'"))) {
+            // Quoted string literal
+            rightValue = rightValue.slice(1, -1);
+        }
+        else if (!isNaN(Number(rightValue))) {
+            // Numeric literal
+            rightValue = Number(rightValue);
+        }
+        else if (rightValue === "true") {
+            rightValue = true;
+        }
+        else if (rightValue === "false") {
+            rightValue = false;
+        }
+        else if (rightValue === "null") {
+            rightValue = null;
+        }
+        else if (vars.hasOwnProperty(rightValue)) {
+            // Variable reference
+            rightValue = vars[rightValue];
+        }
+        // Perform comparison
+        switch (operator) {
+            case "==":
+                return leftValue == rightValue;
+            case "!=":
+                return leftValue != rightValue;
+            case ">":
+                return Number(leftValue) > Number(rightValue);
+            case "<":
+                return Number(leftValue) < Number(rightValue);
+            case ">=":
+                return Number(leftValue) >= Number(rightValue);
+            case "<=":
+                return Number(leftValue) <= Number(rightValue);
+            default:
+                return false;
+        }
+    }
+    // Truthy check - just the variable name
+    const varName = condition.trim();
+    if (vars.hasOwnProperty(varName)) {
+        const value = vars[varName];
+        // Consider empty string as falsy
+        if (value === "")
+            return false;
+        return !!value;
+    }
+    // Unknown variable - treat as falsy
+    return false;
+}
+/**
+ * Parse a ternary value (the part after ? or after :)
+ * Returns the resolved value, handling both quoted strings and variable references
+ */
+function parseTernaryValue(value, vars) {
+    value = value.trim();
+    // Check if it's a quoted string
+    if ((value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))) {
+        return value.slice(1, -1);
+    }
+    // Otherwise treat as a variable reference
+    if (vars.hasOwnProperty(value)) {
+        const varValue = vars[value];
+        if (varValue === undefined || varValue === null)
+            return "";
+        if (typeof varValue === "boolean")
+            return varValue ? "true" : "false";
+        if (typeof varValue === "object")
+            return JSON.stringify(varValue);
+        return String(varValue);
+    }
+    // Return as-is if not found (could be a literal like a number)
+    return value;
+}
+/**
+ * Parse a ternary expression and find the colon that separates true/false values
+ * Handles nested quotes properly
+ */
+function splitTernary(expr) {
+    // Find the ? that starts the ternary
+    let questionIdx = -1;
+    let inQuote = false;
+    let quoteChar = "";
+    for (let i = 0; i < expr.length; i++) {
+        const char = expr[i];
+        const prevChar = i > 0 ? expr[i - 1] : "";
+        if ((char === '"' || char === "'") && prevChar !== "\\") {
+            if (!inQuote) {
+                inQuote = true;
+                quoteChar = char;
+            }
+            else if (char === quoteChar) {
+                inQuote = false;
+            }
+        }
+        if (!inQuote && char === "?") {
+            questionIdx = i;
+            break;
+        }
+    }
+    if (questionIdx === -1)
+        return null;
+    const condition = expr.slice(0, questionIdx).trim();
+    const rest = expr.slice(questionIdx + 1);
+    // Find the : that separates true/false values
+    let colonIdx = -1;
+    inQuote = false;
+    quoteChar = "";
+    for (let i = 0; i < rest.length; i++) {
+        const char = rest[i];
+        const prevChar = i > 0 ? rest[i - 1] : "";
+        if ((char === '"' || char === "'") && prevChar !== "\\") {
+            if (!inQuote) {
+                inQuote = true;
+                quoteChar = char;
+            }
+            else if (char === quoteChar) {
+                inQuote = false;
+            }
+        }
+        if (!inQuote && char === ":") {
+            colonIdx = i;
+            break;
+        }
+    }
+    if (colonIdx === -1)
+        return null;
+    const trueValue = rest.slice(0, colonIdx).trim();
+    const falseValue = rest.slice(colonIdx + 1).trim();
+    return { condition, trueValue, falseValue };
+}
 /**
  * Resolve device/user templates in a string
- * Replaces ${device.xxx} and ${user.xxx} with actual values from context
+ * Supports both simple variables ${varName} and conditional ternary expressions
+ * ${condition ? "trueValue" : "falseValue"}
+ *
+ * Supported operators in conditions:
+ * - == (equals)
+ * - != (not equals)
+ * - > (greater than)
+ * - < (less than)
+ * - >= (greater or equal)
+ * - <= (less or equal)
+ * - Truthy check (just variable name)
+ *
+ * Values can be:
+ * - Quoted strings: "hello" or 'hello'
+ * - Variable references: username
  */
 function resolveContextTemplates(text, context) {
     if (!text || !text.includes("${"))
@@ -413,8 +607,23 @@ function resolveContextTemplates(text, context) {
         });
     }
     console.log("[RampKit] Resolving templates with vars:", JSON.stringify(vars));
-    // Replace ${varName} patterns
-    return text.replace(/\$\{([A-Za-z_][A-Za-z0-9_.]*)\}/g, (match, varName) => {
+    // Match ${...} expressions - use a more permissive regex to capture full expressions
+    // including ternary operators with quotes
+    return text.replace(/\$\{([^}]+)\}/g, (match, innerExpr) => {
+        const expr = innerExpr.trim();
+        // Check if this is a ternary expression
+        const ternary = splitTernary(expr);
+        if (ternary) {
+            const { condition, trueValue, falseValue } = ternary;
+            const result = evaluateCondition(condition, vars);
+            const value = result
+                ? parseTernaryValue(trueValue, vars)
+                : parseTernaryValue(falseValue, vars);
+            console.log(`[RampKit] Ternary: ${condition} ? ${trueValue} : ${falseValue} => ${result} => "${value}"`);
+            return value;
+        }
+        // Simple variable substitution
+        const varName = expr;
         if (vars.hasOwnProperty(varName)) {
             const value = vars[varName];
             console.log(`[RampKit] Replacing ${match} with:`, value);
@@ -939,7 +1148,7 @@ function Overlay(props) {
                         opacity: pagerOpacity,
                         transform: [{ translateX: pagerTranslateX }],
                     },
-                ], 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.injectedButtonAnimations, 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: () => {
+                ], 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 + exports.injectedButtonAnimations, injectedJavaScript: exports.injectedNoSelect + exports.injectedVarsHandler + exports.injectedButtonAnimations, 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);

package/package.json

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