@userflow-tech/react-native 0.1.1 → 0.3.0

package/lib/module/surfaces/bannerWebView/bannerAutoRunSession.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["autoRunCompletedSessionIds","Set","shouldSkipBannerAutoRunEval","sessionId","has","markBannerAutoRunEvalComplete","add","clearBannerAutoRunEvalSession","delete","resetBannerAutoRunSessionsForTests","clear"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/bannerAutoRunSession.ts"],"mappings":";;AAAA;AACA,MAAMA,0BAA0B,GAAG,IAAIC,GAAG,CAAS,CAAC;AAEpD,OAAO,SAASC,2BAA2BA,CAACC,SAAiB,EAAW;EACtE,OAAOH,0BAA0B,CAACI,GAAG,CAACD,SAAS,CAAC;AAClD;AAEA,OAAO,SAASE,6BAA6BA,CAACF,SAAiB,EAAQ;EACrEH,0BAA0B,CAACM,GAAG,CAACH,SAAS,CAAC;AAC3C;AAEA,OAAO,SAASI,6BAA6BA,CAACJ,SAAiB,EAAQ;EACrEH,0BAA0B,CAACQ,MAAM,CAACL,SAAS,CAAC;AAC9C;;AAEA;AACA,OAAO,SAASM,kCAAkCA,CAAA,EAAS;EACzDT,0BAA0B,CAACU,KAAK,CAAC,CAAC;AACpC","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/bannerNeedsWebView.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { FlowActionType } from '@userflow-tech/protocol';
+import { themeHasPublishedCustomCss } from "./resolveCdnHost.js";
+let debugForceWebViewBanner = false;
+
+/** POC / local testing when the builder flag is not on the wire yet. */
+export function setDebugForceWebViewBanner(enabled) {
+  debugForceWebViewBanner = enabled;
+}
+
+/** @internal */
+export function resetDebugForceWebViewBannerForTests() {
+  debugForceWebViewBanner = false;
+}
+function bannerHasEvalJsAction(banner) {
+  return banner.buttons.some(button => button.actions.some(action => action.type === FlowActionType.EVAL_JS));
+}
+
+/**
+ * Use the WebView banner renderer when any button runs Evaluate JavaScript
+ * (needs the shared eval page), when the theme has published custom CSS
+ * (`.userflow-custom-container-*` / `.userflow-custom-button-*` via CDN),
+ * or when {@link setDebugForceWebViewBanner} is true.
+ */
+export function bannerNeedsWebView(banner, theme) {
+  if (debugForceWebViewBanner) {
+    return true;
+  }
+  if (theme != null && themeHasPublishedCustomCss(theme)) {
+    return true;
+  }
+  return bannerHasEvalJsAction(banner);
+}
+//# sourceMappingURL=bannerNeedsWebView.js.map

package/lib/module/surfaces/bannerWebView/bannerNeedsWebView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FlowActionType","themeHasPublishedCustomCss","debugForceWebViewBanner","setDebugForceWebViewBanner","enabled","resetDebugForceWebViewBannerForTests","bannerHasEvalJsAction","banner","buttons","some","button","actions","action","type","EVAL_JS","bannerNeedsWebView","theme"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/bannerNeedsWebView.ts"],"mappings":";;AACA,SAASA,cAAc,QAAQ,yBAAyB;AAExD,SAASC,0BAA0B,QAAQ,qBAAkB;AAE7D,IAAIC,uBAAuB,GAAG,KAAK;;AAEnC;AACA,OAAO,SAASC,0BAA0BA,CAACC,OAAgB,EAAQ;EACjEF,uBAAuB,GAAGE,OAAO;AACnC;;AAEA;AACA,OAAO,SAASC,oCAAoCA,CAAA,EAAS;EAC3DH,uBAAuB,GAAG,KAAK;AACjC;AAEA,SAASI,qBAAqBA,CAACC,MAAsB,EAAW;EAC9D,OAAOA,MAAM,CAACC,OAAO,CAACC,IAAI,CAAEC,MAAM,IAChCA,MAAM,CAACC,OAAO,CAACF,IAAI,CAAEG,MAAM,IAAKA,MAAM,CAACC,IAAI,KAAKb,cAAc,CAACc,OAAO,CACxE,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACR,MAAsB,EAAES,KAA4B,EAAW;EAChG,IAAId,uBAAuB,EAAE;IAC3B,OAAO,IAAI;EACb;EACA,IAAIc,KAAK,IAAI,IAAI,IAAIf,0BAA0B,CAACe,KAAK,CAAC,EAAE;IACtD,OAAO,IAAI;EACb;EACA,OAAOV,qBAAqB,CAACC,MAAM,CAAC;AACtC","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/bannerThemeStyles.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import { resolveBannerBackgroundColor, resolveBannerForegroundColor } from "../resolveBannerTheme.js";
+function readString(theme, key, fallback) {
+  const value = theme[key];
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return fallback;
+}
+function readNumber(theme, key, fallback) {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return fallback;
+}
+function readCssLength(theme, key, fallbackPx) {
+  const value = theme[key];
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return `${value}px`;
+  }
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return `${fallbackPx}px`;
+}
+function escapeHtmlAttribute(value) {
+  return value.replace(/&/g, '&').replace(/"/g, '"');
+}
+
+/** Inline CSS custom properties for banner WebView (subset of web `getThemeRootStyles`). */
+export function bannerThemeInlineStyles(theme) {
+  const bannerBg = resolveBannerBackgroundColor(theme);
+  const bannerFg = resolveBannerForegroundColor(theme);
+  const fontSize = typeof theme.fontSize === 'number' ? theme.fontSize : 16;
+  const lineHeight = readNumber(theme, 'lineHeight', Math.round(fontSize * 1.5));
+  return {
+    '--userflow-banner-background-color': bannerBg,
+    '--userflow-banner-foreground-color': bannerFg,
+    '--userflow-banner-hover-background-color': readString(theme, 'bannerHoverBackgroundColor', bannerBg),
+    '--userflow-banner-active-background-color': readString(theme, 'bannerActiveBackgroundColor', bannerBg),
+    '--userflow-banner-hover-foreground-color': readString(theme, 'bannerHoverForegroundColor', bannerFg),
+    '--userflow-banner-active-foreground-color': readString(theme, 'bannerActiveForegroundColor', bannerFg),
+    '--userflow-font-family': readString(theme, 'fontFamily', 'system-ui, sans-serif'),
+    '--userflow-font-size': `${fontSize}px`,
+    '--userflow-line-height': `${lineHeight}px`,
+    '--userflow-button-height': readCssLength(theme, 'buttonHeight', 32),
+    '--userflow-button-border-radius': readCssLength(theme, 'buttonBorderRadius', 6),
+    '--userflow-button-min-width': readCssLength(theme, 'buttonMinWidth', 0),
+    '--userflow-main-foreground-color': bannerFg,
+    '--userflow-link-color': readString(theme, 'linkColor', bannerFg),
+    '--userflow-h1-font-size': `${Math.round(fontSize * 1.25)}px`,
+    '--userflow-h2-font-size': `${Math.round(fontSize * 1.125)}px`,
+    '--userflow-font-weight-normal': '400',
+    '--userflow-font-weight-bold': '600'
+  };
+}
+export function bannerThemeStyleAttribute(theme) {
+  const entries = bannerThemeInlineStyles(theme);
+  return Object.entries(entries).map(([key, value]) => `${key}:${escapeHtmlAttribute(value)}`).join(';');
+}
+//# sourceMappingURL=bannerThemeStyles.js.map

package/lib/module/surfaces/bannerWebView/bannerThemeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveBannerBackgroundColor","resolveBannerForegroundColor","readString","theme","key","fallback","value","trim","readNumber","Number","isFinite","parsed","parseFloat","readCssLength","fallbackPx","escapeHtmlAttribute","replace","bannerThemeInlineStyles","bannerBg","bannerFg","fontSize","lineHeight","Math","round","bannerThemeStyleAttribute","entries","Object","map","join"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/bannerThemeStyles.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/bannerWebFrameCss.js

@@ -0,0 +1,148 @@
+"use strict";
+
+/**
+ * Banner + bubble-button subset of web `bubble-frame.styl` for custom-banner WebViews.
+ * Custom theme CSS targets the same class names as userflow.js.
+ */
+export const BANNER_WEB_FRAME_CSS = `
+.userflowjs-theme-root {
+  line-height: var(--userflow-line-height, 24px);
+  color: var(--userflow-main-foreground-color, inherit);
+  font-weight: var(--userflow-font-weight-normal, 400);
+}
+.userflowjs-theme-root, .userflowjs-theme-root button {
+  font-family: var(--userflow-font-family, system-ui, sans-serif);
+  font-size: var(--userflow-font-size, 16px);
+}
+.userflowjs-theme-root b, .userflowjs-theme-root strong {
+  font-weight: var(--userflow-font-weight-bold, 600);
+}
+.userflowjs-theme-root a {
+  color: var(--userflow-link-color, inherit);
+  text-decoration: underline;
+}
+.userflowjs-theme-root h1 {
+  font-size: var(--userflow-h1-font-size, 1.25em);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  margin: 0 0 16px;
+}
+.userflowjs-theme-root h2 {
+  font-size: var(--userflow-h2-font-size, 1.125em);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  margin: 0 0 16px;
+}
+.userflowjs-theme-root p {
+  margin: 0 0 16px;
+}
+.userflowjs-button-reset {
+  outline: 0;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.userflowjs-bubble-button-base {
+  display: inline-block;
+  padding: calc((var(--userflow-button-height, 32px) - var(--userflow-line-height, 24px)) / 2) var(--userflow-font-size, 16px);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0.375em;
+  font-size: var(--userflow-font-size, 16px);
+  font-weight: var(--userflow-font-weight-bold, 600);
+  height: var(--userflow-button-height, 32px);
+  line-height: var(--userflow-line-height, 24px);
+  border: 0;
+  cursor: pointer;
+}
+.userflowjs-bubble-button {
+  display: inline-flex;
+  align-items: center;
+}
+.userflowjs-bubble-button--primary,
+.userflowjs-bubble-button--default,
+.userflowjs-bubble-button--banner-primary,
+.userflowjs-bubble-button--banner-secondary {
+  font-family: var(--userflow-font-family, system-ui, sans-serif);
+  border-radius: var(--userflow-button-border-radius, 0.375em);
+  min-width: var(--userflow-button-min-width, 0);
+  white-space: normal;
+  max-width: 100%;
+}
+.userflowjs-bubble-button--banner-primary {
+  background-color: var(--userflow-banner-foreground-color);
+  color: var(--userflow-banner-background-color);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.userflowjs-bubble-button--banner-secondary {
+  background-color: var(--userflow-banner-background-color);
+  color: var(--userflow-banner-foreground-color);
+  border: 1px solid var(--userflow-banner-foreground-color);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.userflowjs-banner-root {
+  position: relative;
+  background: var(--userflow-banner-background-color);
+  color: var(--userflow-banner-foreground-color);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.userflowjs-banner-root--content-layout-START .userflowjs-banner-inner {
+  justify-content: flex-start;
+}
+.userflowjs-banner-root--content-layout-CENTER .userflowjs-banner-inner {
+  justify-content: center;
+}
+.userflowjs-banner-root--content-layout-SPACE_BETWEEN .userflowjs-banner-inner {
+  justify-content: space-between;
+}
+.userflowjs-banner-inner {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 8px;
+  margin: 0 8px;
+  min-width: 0;
+}
+.userflowjs-banner-content {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.userflowjs-banner-buttons {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.userflowjs-banner-start-spacer {
+  flex: 1 1 0;
+  max-width: var(--userflow-button-height, 32px);
+  height: var(--userflow-button-height, 32px);
+}
+.userflowjs-banner-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--userflow-button-height, 32px);
+  height: var(--userflow-button-height, 32px);
+  color: var(--userflow-banner-foreground-color);
+  background: transparent;
+  padding: 0;
+  border-radius: 4px;
+}
+.userflowjs-banner-close:hover {
+  background-color: var(--userflow-banner-hover-background-color, rgba(0,0,0,0.08));
+}
+`;
+//# sourceMappingURL=bannerWebFrameCss.js.map

package/lib/module/surfaces/bannerWebView/bannerWebFrameCss.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BANNER_WEB_FRAME_CSS"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/bannerWebFrameCss.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,OAAO,MAAMA,oBAAoB,GAAG;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/buildCustomBannerHtml.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import { interpolateVariables } from '@userflow-tech/core';
+import { BannerContentLayout } from '@userflow-tech/protocol';
+import { buildBootstrapHtml, wrapCode } from "../../evalJs/bootstrap.js";
+import { collectBannerAutoRunEvalCodes } from "./bannerAutoRunEvalJs.js";
+import { bannerThemeStyleAttribute } from "./bannerThemeStyles.js";
+import { BANNER_WEB_FRAME_CSS } from "./bannerWebFrameCss.js";
+import { buttonClassName } from "./buttonClassName.js";
+import { resolveCustomStylesheetUrl } from "./resolveCdnHost.js";
+import { richContentDocToHtml } from "./richContentDocToHtml.js";
+function contentLayoutClass(layout) {
+  switch (layout) {
+    case BannerContentLayout.CENTER:
+      return 'userflowjs-banner-root--content-layout-CENTER';
+    case BannerContentLayout.SPACE_BETWEEN:
+      return 'userflowjs-banner-root--content-layout-SPACE_BETWEEN';
+    case BannerContentLayout.START:
+    default:
+      return 'userflowjs-banner-root--content-layout-START';
+  }
+}
+function layoutMeasureScript() {
+  return `
+(function(){
+  function postLayout(){
+    var root=document.querySelector('.userflowjs-banner-root');
+    if(!root||!window.ReactNativeWebView||!window.ReactNativeWebView.postMessage)return;
+    var rectH=root.getBoundingClientRect().height;
+    var scrollH=root.scrollHeight;
+    var h=Math.ceil(Math.max(scrollH,rectH));
+    var vh=window.innerHeight||0;
+    if(vh>0&&h>=vh-2){
+      var sum=0;
+      for(var i=0;i<root.childNodes.length;i++){
+        var node=root.childNodes[i];
+        if(node&&node.nodeType===1){
+          var el=node;
+          sum+=el.scrollHeight||el.offsetHeight||0;
+        }
+      }
+      if(sum>0&&sum<h) h=Math.ceil(sum);
+    }
+    window.ReactNativeWebView.postMessage(JSON.stringify({__userflow:1,type:'bannerLayout',height:h}));
+  }
+  window.__userflowBannerLayout=postLayout;
+  if(typeof ResizeObserver!=='undefined'){
+    var root=document.querySelector('.userflowjs-banner-root');
+    if(root){new ResizeObserver(postLayout).observe(root);}
+  }
+  window.addEventListener('load',postLayout);
+  setTimeout(postLayout,0);
+})();
+`;
+}
+function bannerInteractionScript() {
+  return `
+(function(){
+  function post(msg){
+    if(window.ReactNativeWebView&&window.ReactNativeWebView.postMessage){
+      window.ReactNativeWebView.postMessage(JSON.stringify(Object.assign({__userflow:1},msg)));
+    }
+  }
+  document.addEventListener('click',function(ev){
+    var t=ev.target;
+    if(!t||!t.closest)return;
+    var btn=t.closest('[data-userflow-banner-button]');
+    if(btn){
+      ev.preventDefault();
+      post({type:'bannerButton',buttonId:btn.getAttribute('data-userflow-banner-button')});
+      return;
+    }
+    var close=t.closest('[data-userflow-banner-dismiss]');
+    if(close){
+      ev.preventDefault();
+      window.__userflowBannerEvalDismissed=true;
+      post({type:'bannerDismiss'});
+    }
+  });
+})();
+`;
+}
+
+/** Runs eval-only button scripts once the banner document (and `window.userflow`) exists. */
+function bannerAutoRunEvalScript(banner, lookupAttribute) {
+  const codes = collectBannerAutoRunEvalCodes(banner, lookupAttribute);
+  if (codes.length === 0) {
+    return '';
+  }
+  const runs = codes.map(code => wrapCode(code)).join('');
+  return `
+(function(){
+  if(window.__userflowBannerEvalDismissed||window.__userflowBannerEvalRan)return;
+  window.__userflowBannerEvalRan=true;
+  function run(){
+    if(window.__userflowBannerEvalDismissed)return;
+    ${runs}
+  }
+  if(document.readyState==='loading'){
+    document.addEventListener('DOMContentLoaded',run,{once:true});
+  }else{
+    run();
+  }
+})();
+`;
+}
+export function buildCustomBannerBodyHtml(session, lookupAttribute, serverEndpoint, options) {
+  const banner = session.version.banner;
+  const theme = session.version.theme;
+  const layoutClass = contentLayoutClass(banner.contentLayout);
+  const themeStyle = bannerThemeStyleAttribute(theme);
+  const customCssUrl = resolveCustomStylesheetUrl(serverEndpoint, theme);
+  const maxInner = banner.maxContentWidth != null ? ` style="max-width:${banner.maxContentWidth}px"` : '';
+  const contentHtml = richContentDocToHtml(banner.content, lookupAttribute);
+  const buttonsHtml = banner.buttons.map(button => {
+    const label = escapeAttr(interpolateVariables(button.text, lookupAttribute));
+    const classes = escapeAttr(buttonClassName(button.appearance));
+    return `<button type="button" class="${classes}" data-userflow-banner-button="${escapeAttr(button.id)}"><span class="userflowjs-bubble-button-text">${label}</span></button>`;
+  }).join('');
+  const closeHtml = session.version.closeDisabled ? '<div class="userflowjs-banner-start-spacer"></div>' : '<button type="button" class="userflowjs-banner-close userflowjs-button-reset" data-userflow-banner-dismiss="1" aria-label="Dismiss">×</button>';
+  const customLink = customCssUrl ? `<link rel="stylesheet" href="${escapeAttr(customCssUrl)}" />` : '';
+  return `
+<style>${BANNER_WEB_FRAME_CSS}</style>
+${customLink}
+<div class="userflowjs-banner-root userflowjs-theme-root ${layoutClass}" style="${themeStyle}">
+  <div class="userflowjs-banner-start-spacer"></div>
+  <div class="userflowjs-banner-inner"${maxInner}>
+    <div class="userflowjs-banner-content">${contentHtml}</div>
+    ${buttonsHtml ? `<div class="userflowjs-banner-buttons">${buttonsHtml}</div>` : ''}
+  </div>
+  ${closeHtml}
+</div>
+<script>${layoutMeasureScript()}${bannerInteractionScript()}${options?.skipAutoRunEval ? '' : bannerAutoRunEvalScript(banner, lookupAttribute)}</script>
+`;
+}
+export function buildCustomBannerHtml(context, session, lookupAttribute, serverEndpoint, options) {
+  const body = buildCustomBannerBodyHtml(session, lookupAttribute, serverEndpoint, options);
+  return buildBootstrapHtml(context, body);
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+//# sourceMappingURL=buildCustomBannerHtml.js.map

package/lib/module/surfaces/bannerWebView/buildCustomBannerHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["interpolateVariables","BannerContentLayout","buildBootstrapHtml","wrapCode","collectBannerAutoRunEvalCodes","bannerThemeStyleAttribute","BANNER_WEB_FRAME_CSS","buttonClassName","resolveCustomStylesheetUrl","richContentDocToHtml","contentLayoutClass","layout","CENTER","SPACE_BETWEEN","START","layoutMeasureScript","bannerInteractionScript","bannerAutoRunEvalScript","banner","lookupAttribute","codes","length","runs","map","code","join","buildCustomBannerBodyHtml","session","serverEndpoint","options","version","theme","layoutClass","contentLayout","themeStyle","customCssUrl","maxInner","maxContentWidth","contentHtml","content","buttonsHtml","buttons","button","label","escapeAttr","text","classes","appearance","id","closeHtml","closeDisabled","customLink","skipAutoRunEval","buildCustomBannerHtml","context","body","value","replace"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/buildCustomBannerHtml.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/buttonClassName.js

@@ -0,0 +1,9 @@
+"use strict";
+
+/** Mirrors web `TreeDoc.buttonClassName`. */
+export function buttonClassName(appearance) {
+  const value = appearance || 'default';
+  const known = value === 'primary' || value === 'PRIMARY' || value === 'default' || value === 'DEFAULT' || value === 'banner-primary' || value === 'banner-secondary';
+  return 'userflowjs-bubble-button ' + (known ? `userflowjs-bubble-button--${value.toLowerCase()}` : value);
+}
+//# sourceMappingURL=buttonClassName.js.map

package/lib/module/surfaces/bannerWebView/buttonClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonClassName","appearance","value","known","toLowerCase"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/buttonClassName.ts"],"mappings":";;AAAA;AACA,OAAO,SAASA,eAAeA,CAACC,UAAqC,EAAU;EAC7E,MAAMC,KAAK,GAAGD,UAAU,IAAI,SAAS;EACrC,MAAME,KAAK,GACTD,KAAK,KAAK,SAAS,IACnBA,KAAK,KAAK,SAAS,IACnBA,KAAK,KAAK,SAAS,IACnBA,KAAK,KAAK,SAAS,IACnBA,KAAK,KAAK,gBAAgB,IAC1BA,KAAK,KAAK,kBAAkB;EAC9B,OACE,2BAA2B,IAC1BC,KAAK,GAAG,6BAA6BD,KAAK,CAACE,WAAW,CAAC,CAAC,EAAE,GAAGF,KAAK,CAAC;AAExE","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/resolveCdnHost.js

@@ -0,0 +1,42 @@
+"use strict";
+
+/**
+ * Map the end-user websocket host to the theme stylesheet CDN host
+ * (same convention as web userflow.js).
+ */
+export function resolveCdnHost(serverEndpoint) {
+  const trimmed = serverEndpoint.replace(/\/$/, '');
+  let host = trimmed;
+  if (host.startsWith('https://')) {
+    host = host.slice('https://'.length);
+  } else if (host.startsWith('http://')) {
+    host = host.slice('http://'.length);
+  }
+  if (host.startsWith('e.')) {
+    return `cdn.${host.slice(2)}`;
+  }
+  if (host.includes('localhost') || host.includes('127.0.0.1')) {
+    return 'cdn.userflow.com';
+  }
+  return `cdn.${host}`;
+}
+export function themePublishedCssVersion(theme) {
+  const cssVersion = theme.cssVersion;
+  if (typeof cssVersion !== 'string' && typeof cssVersion !== 'number') {
+    return null;
+  }
+  const version = String(cssVersion);
+  return version ? version : null;
+}
+export function themeHasPublishedCustomCss(theme) {
+  return themePublishedCssVersion(theme) != null;
+}
+export function resolveCustomStylesheetUrl(serverEndpoint, theme) {
+  const version = themePublishedCssVersion(theme);
+  if (!version) {
+    return null;
+  }
+  const cdnHost = resolveCdnHost(serverEndpoint);
+  return `https://${cdnHost}/themes/${theme.id}/stylesheets/${version}/custom.css`;
+}
+//# sourceMappingURL=resolveCdnHost.js.map

package/lib/module/surfaces/bannerWebView/resolveCdnHost.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveCdnHost","serverEndpoint","trimmed","replace","host","startsWith","slice","length","includes","themePublishedCssVersion","theme","cssVersion","version","String","themeHasPublishedCustomCss","resolveCustomStylesheetUrl","cdnHost","id"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/resolveCdnHost.ts"],"mappings":";;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASA,cAAcA,CAACC,cAAsB,EAAU;EAC7D,MAAMC,OAAO,GAAGD,cAAc,CAACE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;EACjD,IAAIC,IAAI,GAAGF,OAAO;EAClB,IAAIE,IAAI,CAACC,UAAU,CAAC,UAAU,CAAC,EAAE;IAC/BD,IAAI,GAAGA,IAAI,CAACE,KAAK,CAAC,UAAU,CAACC,MAAM,CAAC;EACtC,CAAC,MAAM,IAAIH,IAAI,CAACC,UAAU,CAAC,SAAS,CAAC,EAAE;IACrCD,IAAI,GAAGA,IAAI,CAACE,KAAK,CAAC,SAAS,CAACC,MAAM,CAAC;EACrC;EACA,IAAIH,IAAI,CAACC,UAAU,CAAC,IAAI,CAAC,EAAE;IACzB,OAAO,OAAOD,IAAI,CAACE,KAAK,CAAC,CAAC,CAAC,EAAE;EAC/B;EACA,IAAIF,IAAI,CAACI,QAAQ,CAAC,WAAW,CAAC,IAAIJ,IAAI,CAACI,QAAQ,CAAC,WAAW,CAAC,EAAE;IAC5D,OAAO,kBAAkB;EAC3B;EACA,OAAO,OAAOJ,IAAI,EAAE;AACtB;AAEA,OAAO,SAASK,wBAAwBA,CAACC,KAAoB,EAAiB;EAC5E,MAAMC,UAAU,GAAGD,KAAK,CAACC,UAAU;EACnC,IAAI,OAAOA,UAAU,KAAK,QAAQ,IAAI,OAAOA,UAAU,KAAK,QAAQ,EAAE;IACpE,OAAO,IAAI;EACb;EACA,MAAMC,OAAO,GAAGC,MAAM,CAACF,UAAU,CAAC;EAClC,OAAOC,OAAO,GAAGA,OAAO,GAAG,IAAI;AACjC;AAEA,OAAO,SAASE,0BAA0BA,CAACJ,KAAoB,EAAW;EACxE,OAAOD,wBAAwB,CAACC,KAAK,CAAC,IAAI,IAAI;AAChD;AAEA,OAAO,SAASK,0BAA0BA,CACxCd,cAAsB,EACtBS,KAAoB,EACL;EACf,MAAME,OAAO,GAAGH,wBAAwB,CAACC,KAAK,CAAC;EAC/C,IAAI,CAACE,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EACA,MAAMI,OAAO,GAAGhB,cAAc,CAACC,cAAc,CAAC;EAC9C,OAAO,WAAWe,OAAO,WAAWN,KAAK,CAACO,EAAE,gBAAgBL,OAAO,aAAa;AAClF","ignoreList":[]}

package/lib/module/surfaces/bannerWebView/richContentDocToHtml.js

@@ -0,0 +1,79 @@
+"use strict";
+
+import { interpolateVariables } from '@userflow-tech/core';
+import { deserializeRichContentDoc, isText, stringifyPlaintextDoc } from "../../content/deserialize.js";
+function escapeHtml(text) {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function inlineNodesToHtml(nodes, lookupAttribute) {
+  let html = '';
+  for (const node of nodes) {
+    if (isText(node)) {
+      let text = node.text;
+      if (node.silent) {
+        continue;
+      }
+      text = interpolateVariables(text, lookupAttribute);
+      let chunk = escapeHtml(text);
+      if (node.bold) {
+        chunk = `<strong>${chunk}</strong>`;
+      }
+      if (node.italic) {
+        chunk = `<em>${chunk}</em>`;
+      }
+      if (node.underline) {
+        chunk = `<u>${chunk}</u>`;
+      }
+      if (node.code) {
+        chunk = `<code>${chunk}</code>`;
+      }
+      html += chunk;
+      continue;
+    }
+    if (node.type === 'link') {
+      const href = escapeHtml(stringifyPlaintextDoc(node.href, {
+        lookupAttribute
+      }));
+      const inner = inlineNodesToHtml(node.children, lookupAttribute);
+      const target = node.target === 'new' ? ' target="_blank" rel="noopener noreferrer"' : '';
+      html += `<a href="${href}"${target}>${inner}</a>`;
+      continue;
+    }
+    if (node.type === 'attribute') {
+      const value = lookupAttribute(node.attributeName ?? '') ?? node.fallback ?? '';
+      html += escapeHtml(value);
+    }
+  }
+  return html;
+}
+function blockToHtml(node, lookupAttribute) {
+  switch (node.type) {
+    case 'paragraph':
+      return `<p>${inlineNodesToHtml(node.children, lookupAttribute)}</p>`;
+    case 'heading1':
+      return `<h1>${inlineNodesToHtml(node.children, lookupAttribute)}</h1>`;
+    case 'heading2':
+      return `<h2>${inlineNodesToHtml(node.children, lookupAttribute)}</h2>`;
+    case 'quote':
+      return `<blockquote>${inlineNodesToHtml(node.children, lookupAttribute)}</blockquote>`;
+    case 'unordered-list':
+      return `<ul>${node.children.map(item => `<li>${inlineNodesToHtml(item.children, lookupAttribute)}</li>`).join('')}</ul>`;
+    case 'ordered-list':
+      return `<ol>${node.children.map(item => `<li>${inlineNodesToHtml(item.children, lookupAttribute)}</li>`).join('')}</ol>`;
+    case 'code-block':
+      return `<pre><code>${inlineNodesToHtml(node.children, lookupAttribute)}</code></pre>`;
+    case 'container':
+      {
+        const extra = node.className ? ` ${escapeHtml(node.className)}` : '';
+        const inner = node.children.map(child => blockToHtml(child, lookupAttribute)).join('');
+        return `<div class="p-like${extra}">${inner}</div>`;
+      }
+    default:
+      return '';
+  }
+}
+export function richContentDocToHtml(content, lookupAttribute) {
+  const doc = typeof content === 'string' || content == null ? deserializeRichContentDoc(content) : content;
+  return doc.children.map(block => blockToHtml(block, lookupAttribute)).join('');
+}
+//# sourceMappingURL=richContentDocToHtml.js.map

package/lib/module/surfaces/bannerWebView/richContentDocToHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["interpolateVariables","deserializeRichContentDoc","isText","stringifyPlaintextDoc","escapeHtml","text","replace","inlineNodesToHtml","nodes","lookupAttribute","html","node","silent","chunk","bold","italic","underline","code","type","href","inner","children","target","value","attributeName","fallback","blockToHtml","map","item","join","extra","className","child","richContentDocToHtml","content","doc","block"],"sourceRoot":"../../../../src","sources":["surfaces/bannerWebView/richContentDocToHtml.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/surfaces/cardTransition.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import * as React from 'react';
+import { Animated } from 'react-native';
+
+/** Outgoing card leaves fast; the incoming one gets web's `opacity 250ms` feel. */
+export const CARD_EXIT_MS = 120;
+export const CARD_ENTER_MS = 200;
+const CardTransitionContext = /*#__PURE__*/React.createContext(null);
+export const CardTransitionProvider = CardTransitionContext.Provider;
+
+/**
+ * Phase of the surrounding step transition, or `null` outside one.
+ *
+ * Surfaces use this to hold side effects while they fade out: an exiting card is
+ * still mounted for `CARD_EXIT_MS`, and anything it measures or arms in that
+ * window belongs to a step the user has already left.
+ */
+export function useCardTransitionPhase() {
+  return React.useContext(CardTransitionContext);
+}
+
+/**
+ * Fade for a surface's card chrome, so step swaps move the card alone and leave
+ * the backdrop and cutout steady (same as web, where `FlowChrome` animates the
+ * bubble alone).
+ *
+ * Each card owns its value and starts the fade from its own mount rather than
+ * sharing one animation across the swap. Cards can appear well after the step
+ * changes — `TooltipSurface` renders nothing until its anchor measures — and a
+ * shared animation would already have finished by then, leaving the card at the
+ * stale JS value of 0 forever, since native-driven animations never write back
+ * to JS.
+ *
+ * Returns `null` outside a flow transition (unit tests), leaving opacity alone.
+ */
+export function useCardOpacity() {
+  const phase = React.useContext(CardTransitionContext);
+  const opacityRef = React.useRef(null);
+  if (phase != null && opacityRef.current == null) {
+    opacityRef.current = new Animated.Value(phase === 'exiting' ? 1 : 0);
+  }
+  const opacity = opacityRef.current;
+  React.useLayoutEffect(() => {
+    if (phase == null || opacity == null) {
+      return;
+    }
+    const exiting = phase === 'exiting';
+    // Pin the start point: a native-driven ramp is computed from the JS value,
+    // which the previous native animation left behind.
+    opacity.setValue(exiting ? 1 : 0);
+    const animation = Animated.timing(opacity, {
+      toValue: exiting ? 0 : 1,
+      duration: exiting ? CARD_EXIT_MS : CARD_ENTER_MS,
+      useNativeDriver: true
+    });
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [opacity, phase]);
+  return opacity;
+}
+//# sourceMappingURL=cardTransition.js.map

package/lib/module/surfaces/cardTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Animated","CARD_EXIT_MS","CARD_ENTER_MS","CardTransitionContext","createContext","CardTransitionProvider","Provider","useCardTransitionPhase","useContext","useCardOpacity","phase","opacityRef","useRef","current","Value","opacity","useLayoutEffect","exiting","setValue","animation","timing","toValue","duration","useNativeDriver","start","stop"],"sourceRoot":"../../../src","sources":["surfaces/cardTransition.ts"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,YAAY,GAAG,GAAG;AAC/B,OAAO,MAAMC,aAAa,GAAG,GAAG;AAIhC,MAAMC,qBAAqB,gBAAGJ,KAAK,CAACK,aAAa,CAA6B,IAAI,CAAC;AAEnF,OAAO,MAAMC,sBAAsB,GAAGF,qBAAqB,CAACG,QAAQ;;AAEpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAA,EAA+B;EACnE,OAAOR,KAAK,CAACS,UAAU,CAACL,qBAAqB,CAAC;AAChD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,cAAcA,CAAA,EAA0B;EACtD,MAAMC,KAAK,GAAGX,KAAK,CAACS,UAAU,CAACL,qBAAqB,CAAC;EACrD,MAAMQ,UAAU,GAAGZ,KAAK,CAACa,MAAM,CAAwB,IAAI,CAAC;EAC5D,IAAIF,KAAK,IAAI,IAAI,IAAIC,UAAU,CAACE,OAAO,IAAI,IAAI,EAAE;IAC/CF,UAAU,CAACE,OAAO,GAAG,IAAIb,QAAQ,CAACc,KAAK,CAACJ,KAAK,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;EACtE;EACA,MAAMK,OAAO,GAAGJ,UAAU,CAACE,OAAO;EAElCd,KAAK,CAACiB,eAAe,CAAC,MAAM;IAC1B,IAAIN,KAAK,IAAI,IAAI,IAAIK,OAAO,IAAI,IAAI,EAAE;MACpC;IACF;IACA,MAAME,OAAO,GAAGP,KAAK,KAAK,SAAS;IACnC;IACA;IACAK,OAAO,CAACG,QAAQ,CAACD,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,MAAME,SAAS,GAAGnB,QAAQ,CAACoB,MAAM,CAACL,OAAO,EAAE;MACzCM,OAAO,EAAEJ,OAAO,GAAG,CAAC,GAAG,CAAC;MACxBK,QAAQ,EAAEL,OAAO,GAAGhB,YAAY,GAAGC,aAAa;MAChDqB,eAAe,EAAE;IACnB,CAAC,CAAC;IACFJ,SAAS,CAACK,KAAK,CAAC,CAAC;IACjB,OAAO,MAAM;MACXL,SAAS,CAACM,IAAI,CAAC,CAAC;IAClB,CAAC;EACH,CAAC,EAAE,CAACV,OAAO,EAAEL,KAAK,CAAC,CAAC;EAEpB,OAAOK,OAAO;AAChB","ignoreList":[]}