@userflow-tech/react-native 0.1.0 → 0.2.0

package/lib/commonjs/surfaces/themeChrome.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.BUBBLE_CONTENT_PADDING = void 0;
 exports.resolveBubbleChrome = resolveBubbleChrome;
+/** Mobile modal/tooltip inset — tighter than web `modalPadding` (default 40). */
+const BUBBLE_CONTENT_PADDING = exports.BUBBLE_CONTENT_PADDING = 24;
 function readNumber(theme, key, fallback) {
   const value = theme[key];
   if (typeof value === 'number' && Number.isFinite(value)) return value;
@@ -31,7 +34,7 @@ function resolveBubbleChrome(theme, kind = 'modal') {
   const borderColor = readString(theme, 'bubbleBorderColor', 'transparent');
   // Web default tooltipNotchSize is 10.
   const notchSize = Math.max(0, readNumber(theme, 'tooltipNotchSize', 10));
-  const contentPadding = kind === 'tooltip' ? 24 : Math.max(0, readNumber(theme, 'modalPadding', 32));
+  const contentPadding = BUBBLE_CONTENT_PADDING;
 
   // Web often leaves `backgroundColor` empty and paints via `mainBackgroundColor`.
   // An empty string makes RN cards fully transparent (missing-target UI looks broken).

package/lib/commonjs/surfaces/themeChrome.js.map

@@ -1 +1 @@
-{"version":3,"names":["readNumber","theme","key","fallback","value","Number","isFinite","parsed","parseFloat","readString","length","resolveBubbleChrome","kind","borderRadius","borderWidth","Math","max","borderColor","notchSize","contentPadding","backgroundColor","borderStyle","shadowStyle","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","fillStyle","overflow","cardStyle"],"sourceRoot":"../../../src","sources":["surfaces/themeChrome.ts"],"mappings":";;;;;;AA8BA,SAASA,UAAUA,CAACC,KAAoB,EAAEC,GAAW,EAAEC,QAAgB,EAAU;EAC/E,MAAMC,KAAK,GAAGH,KAAK,CAACC,GAAG,CAAC;EACxB,IAAI,OAAOE,KAAK,KAAK,QAAQ,IAAIC,MAAM,CAACC,QAAQ,CAACF,KAAK,CAAC,EAAE,OAAOA,KAAK;EACrE,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC7B,MAAMG,MAAM,GAAGC,UAAU,CAACJ,KAAK,CAAC;IAChC,IAAIC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAAE,OAAOA,MAAM;EAC5C;EACA,OAAOJ,QAAQ;AACjB;AAEA,SAASM,UAAUA,CAACR,KAAoB,EAAEC,GAAW,EAAEC,QAAgB,EAAU;EAC/E,MAAMC,KAAK,GAAGH,KAAK,CAACC,GAAG,CAAC;EACxB,OAAO,OAAOE,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACM,MAAM,GAAG,CAAC,GAAGN,KAAK,GAAGD,QAAQ;AACzE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,mBAAmBA,CACjCV,KAAoB,EACpBW,IAAsB,GAAG,OAAO,EAClB;EACd,MAAMC,YAAY,GAAGb,UAAU,CAACC,KAAK,EAAE,oBAAoB,EAAE,EAAE,CAAC;EAChE,MAAMa,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEhB,UAAU,CAACC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;EAC1E,MAAMgB,WAAW,GAAGR,UAAU,CAACR,KAAK,EAAE,mBAAmB,EAAE,aAAa,CAAC;EACzE;EACA,MAAMiB,SAAS,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEhB,UAAU,CAACC,KAAK,EAAE,kBAAkB,EAAE,EAAE,CAAC,CAAC;EACxE,MAAMkB,cAAc,GAClBP,IAAI,KAAK,SAAS,GAAG,EAAE,GAAGG,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEhB,UAAU,CAACC,KAAK,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC;;EAE9E;EACA;EACA,MAAMmB,eAAe,GACnBX,UAAU,CAACR,KAAK,EAAE,iBAAiB,EAAE,EAAE,CAAC,IACxCQ,UAAU,CAACR,KAAK,EAAE,qBAAqB,EAAE,EAAE,CAAC,IAC5C,SAAS;;EAEX;EACA,MAAMoB,WAAsB,GAC1BP,WAAW,GAAG,CAAC,GACX;IACEA,WAAW;IACXG;EACF,CAAC,GACD,CAAC,CAAC;;EAER;EACA;EACA,MAAMK,WAAsB,GAAG;IAC7BC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,SAAoB,GAAG;IAC3BV,eAAe;IACfP,YAAY;IACZ,GAAGQ,WAAW;IACdU,QAAQ,EAAE;EACZ,CAAC;EAED,MAAMC,SAAoB,GAAG;IAC3B;IACA;IACA;IACA,IAAIpB,IAAI,KAAK,OAAO,GAChB;MACE,GAAGU,WAAW;MACdT,YAAY;MACZO,eAAe,EAAE,aAAa;MAC9BW,QAAQ,EAAE;IACZ,CAAC,GACD;MACEX,eAAe,EAAE,aAAa;MAC9BW,QAAQ,EAAE;IACZ,CAAC;EACP,CAAC;EAED,OAAO;IACLX,eAAe;IACfP,YAAY;IACZC,WAAW;IACXG,WAAW;IACXC,SAAS;IACTC,cAAc;IACda,SAAS;IACTF,SAAS;IACTR;EACF,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["BUBBLE_CONTENT_PADDING","exports","readNumber","theme","key","fallback","value","Number","isFinite","parsed","parseFloat","readString","length","resolveBubbleChrome","kind","borderRadius","borderWidth","Math","max","borderColor","notchSize","contentPadding","backgroundColor","borderStyle","shadowStyle","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","fillStyle","overflow","cardStyle"],"sourceRoot":"../../../src","sources":["surfaces/themeChrome.ts"],"mappings":";;;;;;;AAKA;AACO,MAAMA,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,EAAE;AA2BxC,SAASE,UAAUA,CAACC,KAAoB,EAAEC,GAAW,EAAEC,QAAgB,EAAU;EAC/E,MAAMC,KAAK,GAAGH,KAAK,CAACC,GAAG,CAAC;EACxB,IAAI,OAAOE,KAAK,KAAK,QAAQ,IAAIC,MAAM,CAACC,QAAQ,CAACF,KAAK,CAAC,EAAE,OAAOA,KAAK;EACrE,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC7B,MAAMG,MAAM,GAAGC,UAAU,CAACJ,KAAK,CAAC;IAChC,IAAIC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,EAAE,OAAOA,MAAM;EAC5C;EACA,OAAOJ,QAAQ;AACjB;AAEA,SAASM,UAAUA,CAACR,KAAoB,EAAEC,GAAW,EAAEC,QAAgB,EAAU;EAC/E,MAAMC,KAAK,GAAGH,KAAK,CAACC,GAAG,CAAC;EACxB,OAAO,OAAOE,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACM,MAAM,GAAG,CAAC,GAAGN,KAAK,GAAGD,QAAQ;AACzE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,mBAAmBA,CACjCV,KAAoB,EACpBW,IAAsB,GAAG,OAAO,EAClB;EACd,MAAMC,YAAY,GAAGb,UAAU,CAACC,KAAK,EAAE,oBAAoB,EAAE,EAAE,CAAC;EAChE,MAAMa,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEhB,UAAU,CAACC,KAAK,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC;EAC1E,MAAMgB,WAAW,GAAGR,UAAU,CAACR,KAAK,EAAE,mBAAmB,EAAE,aAAa,CAAC;EACzE;EACA,MAAMiB,SAAS,GAAGH,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEhB,UAAU,CAACC,KAAK,EAAE,kBAAkB,EAAE,EAAE,CAAC,CAAC;EACxE,MAAMkB,cAAc,GAAGrB,sBAAsB;;EAE7C;EACA;EACA,MAAMsB,eAAe,GACnBX,UAAU,CAACR,KAAK,EAAE,iBAAiB,EAAE,EAAE,CAAC,IACxCQ,UAAU,CAACR,KAAK,EAAE,qBAAqB,EAAE,EAAE,CAAC,IAC5C,SAAS;;EAEX;EACA,MAAMoB,WAAsB,GAC1BP,WAAW,GAAG,CAAC,GACX;IACEA,WAAW;IACXG;EACF,CAAC,GACD,CAAC,CAAC;;EAER;EACA;EACA,MAAMK,WAAsB,GAAG;IAC7BC,WAAW,EAAE,SAAS;IACtBC,YAAY,EAAE;MAAEC,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE,CAAC;IACrCC,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,CAAC;IACfC,SAAS,EAAE;EACb,CAAC;EAED,MAAMC,SAAoB,GAAG;IAC3BV,eAAe;IACfP,YAAY;IACZ,GAAGQ,WAAW;IACdU,QAAQ,EAAE;EACZ,CAAC;EAED,MAAMC,SAAoB,GAAG;IAC3B;IACA;IACA;IACA,IAAIpB,IAAI,KAAK,OAAO,GAChB;MACE,GAAGU,WAAW;MACdT,YAAY;MACZO,eAAe,EAAE,aAAa;MAC9BW,QAAQ,EAAE;IACZ,CAAC,GACD;MACEX,eAAe,EAAE,aAAa;MAC9BW,QAAQ,EAAE;IACZ,CAAC;EACP,CAAC;EAED,OAAO;IACLX,eAAe;IACfP,YAAY;IACZC,WAAW;IACXG,WAAW;IACXC,SAAS;IACTC,cAAc;IACda,SAAS;IACTF,SAAS;IACTR;EACF,CAAC;AACH","ignoreList":[]}

package/lib/commonjs/surfaces/tooltip/TooltipBubble.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TooltipBubble = TooltipBubble;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _CardFade = require("../CardFade.js");
 var _absoluteFill = require("../absoluteFill.js");
 var _TooltipNotch = require("./TooltipNotch.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -14,27 +15,66 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Tooltip chrome shell: diamond notch + card fill sharing one shadow family.
  *
  * Web draws card and notch as a single silhouette under `filter: drop-shadow`.
- * RN has no silhouette filter, so the card uses a dedicated shadow layer and
- * `elevation` on the fill (Android). The notch itself is not shadowed — a
- * second blurred shadow on the rotated square leaves a gray band at the pointer
- * base when it points up into the anchor. An inset fill diamond on top erases
- * that seam (and bordered stroke gaps) without clipping the outer tip.
+ * RN has no silhouette filter — on both platforms a view's shadow is derived
+ * from that view's own bounds, and the notch hangs at a negative offset
+ * *outside* the card's bounds. No shadow cast by the card or by the shell can
+ * ever reach it, so the diamond has to cast its own, and the two shadows
+ * together trace the card + tip outline.
+ *
+ * The order is what keeps that honest. A shadow is painted with its own layer,
+ * so only a layer drawn *before* the notch may cast a card-sized shadow —
+ * otherwise it lands on the exposed tip as a gray band. Hence: shadow layer,
+ * then notch, then the fill and seam cover, both silent.
+ *
+ * iOS gets `shadow*` on the notch (`elevation` is inert there); Android gets
+ * `elevation`, which is the only shadow it honors on a rotated view.
  */
 function TooltipBubble({
   chrome,
   notchPosition,
   style,
   onLayout,
-  children
+  children,
+  maxHeight,
+  showNotch: showNotchProp = true
 }) {
-  const showNotch = chrome.notchSize > 0;
+  const showNotch = showNotchProp && chrome.notchSize > 0;
   const bordered = chrome.borderWidth > 0;
+  // Only bordered themes need the diamond seam cover, to keep the stroke even
+  // where the notch meets the card. It is opaque and sits above the fill, so
+  // borderless themes must skip it or it paints over the card's own text.
+  const showSeamCover = showNotch && bordered;
+  // Borderless: a 2pt strip of fill color on the pointer edge covers the iOS
+  // hairline where `overflow: hidden` anti-aliases the card against the dim.
+  // Inset by the radius so it does not square off the corners. Bordered cards
+  // already have a stroke there — painting fill over it would hide the border.
+  const notchEdge = showNotch && !bordered ? protrudingNotchEdge(notchPosition) : null;
   // Web paints the notch with border color when bordered, otherwise the card
   // fill. Never use literal `transparent` — that hides the pointer entirely.
   const notchColor = bordered && chrome.borderColor !== 'transparent' ? chrome.borderColor : chrome.backgroundColor;
-  // Android draws by elevation, so every layer above the card shadow has to be
+  // Android draws by elevation, so every layer above the shadow layer has to be
   // raised with it or the opaque shadow layer paints over the card body.
   const elevation = chrome.shadowStyle.elevation ?? 0;
+  // Raising a layer on Android also makes it cast its own elevation shadow,
+  // painted directly beneath that layer, so anything above the notch has to
+  // give its shadow up. `shadowColor: 'transparent'` does that on both
+  // platforms — it is the one shadow prop Android honors (API 28+), and on iOS
+  // it cancels the shadow outright — so this needs no platform split.
+  const raisedSilent = {
+    elevation,
+    shadowColor: 'transparent'
+  };
+  // The one caster above the shadow layer. iOS reads this diamond's own
+  // bounds, and the 45° layer rotation carries the shadow with it, so the tip
+  // gets a shadow shaped like the tip.
+  const notchShadow = _reactNative.Platform.OS === 'ios' ? {
+    shadowColor: chrome.shadowStyle.shadowColor,
+    shadowOffset: chrome.shadowStyle.shadowOffset,
+    shadowOpacity: chrome.shadowStyle.shadowOpacity,
+    shadowRadius: chrome.shadowStyle.shadowRadius
+  } : {
+    elevation
+  };
   const notchProps = {
     notchSize: chrome.notchSize,
     ...(notchPosition.top !== undefined ? {
@@ -50,7 +90,7 @@ function TooltipBubble({
       right: notchPosition.right
     } : {})
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardFade.CardFade, {
     testID: "userflow-tooltip-card",
     accessibilityViewIsModal: true,
     pointerEvents: "auto",
@@ -58,37 +98,106 @@ function TooltipBubble({
     style: [styles.shell, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       pointerEvents: "none",
+      testID: "userflow-tooltip-card-shadow",
       style: [styles.cardShadow, chrome.shadowStyle, {
-        elevation: 0,
         borderRadius: chrome.borderRadius,
         backgroundColor: chrome.backgroundColor
       }]
     }), showNotch ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipNotch.TooltipNotch, {
       ...notchProps,
       notchColor: notchColor,
-      style: styles.notchLayer
+      style: [styles.notchLayer, notchShadow]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [chrome.fillStyle, styles.fill, {
-        elevation
-      }],
-      children: children
-    }), showNotch ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipNotch.TooltipNotch, {
+      testID: "userflow-tooltip-card-fill",
+      style: [chrome.fillStyle, styles.fill,
+      // Keep the opaque rounded skin unclipped so its top edge composites
+      // onto this layer instead of the dim. Content still clips inside.
+      styles.fillSkin, raisedSilent, maxHeight != null ? {
+        maxHeight
+      } : null],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        testID: "userflow-tooltip-card-fill-clip",
+        style: [styles.fillClip, {
+          borderRadius: chrome.borderRadius
+        }, maxHeight != null ? {
+          maxHeight
+        } : null],
+        children: children
+      })
+    }), notchEdge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      testID: "userflow-tooltip-notch-edge-cap",
+      style: [styles.notchSeamCover, edgeCapStyle(notchEdge, chrome.borderRadius, chrome.backgroundColor), raisedSilent]
+    }) : null, showSeamCover ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipNotch.TooltipNotch, {
       ...notchProps,
       notchColor: chrome.backgroundColor,
       inset: Math.max(chrome.borderWidth, 1),
-      style: [styles.notchSeamCover, {
-        elevation
-      }],
+      style: [styles.notchSeamCover, raisedSilent],
       testID: "userflow-tooltip-notch-seam"
     }) : null]
   });
 }
+
+/** Pixel-thick cover for the fill hairline on the pointer's card edge. */
+const EDGE_CAP_THICKNESS = 2;
+
+/**
+ * The pointer hangs *outside* the card, so its edge offset is negative.
+ * Along-edge alignment (the other axis) is positive and must be ignored.
+ */
+function protrudingNotchEdge(position) {
+  if (position.top != null && position.top < 0) return 'top';
+  if (position.bottom != null && position.bottom < 0) return 'bottom';
+  if (position.left != null && position.left < 0) return 'left';
+  if (position.right != null && position.right < 0) return 'right';
+  return null;
+}
+function edgeCapStyle(edge, borderRadius, backgroundColor) {
+  const inset = borderRadius;
+  const along = {
+    position: 'absolute',
+    backgroundColor
+  };
+  switch (edge) {
+    case 'top':
+      return {
+        ...along,
+        top: 0,
+        left: inset,
+        right: inset,
+        height: EDGE_CAP_THICKNESS
+      };
+    case 'bottom':
+      return {
+        ...along,
+        bottom: 0,
+        left: inset,
+        right: inset,
+        height: EDGE_CAP_THICKNESS
+      };
+    case 'left':
+      return {
+        ...along,
+        left: 0,
+        top: inset,
+        bottom: inset,
+        width: EDGE_CAP_THICKNESS
+      };
+    case 'right':
+      return {
+        ...along,
+        right: 0,
+        top: inset,
+        bottom: inset,
+        width: EDGE_CAP_THICKNESS
+      };
+  }
+}
 const styles = _reactNative.StyleSheet.create({
   shell: {
     position: 'relative',
     backgroundColor: 'transparent',
     overflow: 'visible',
-    maxHeight: '80%',
     flexShrink: 1
   },
   cardShadow: {
@@ -99,7 +208,19 @@ const styles = _reactNative.StyleSheet.create({
     zIndex: 1
   },
   fill: {
-    zIndex: 2
+    zIndex: 2,
+    minHeight: 0,
+    flexShrink: 1
+  },
+  fillSkin: {
+    overflow: 'visible'
+  },
+  fillClip: {
+    overflow: 'hidden',
+    minHeight: 0,
+    flexShrink: 1
+    // Do not set flexGrow / flex: 1. The card sizes to its content; grow in an
+    // auto-height parent collapses the fill to 0 and leaves only the notch.
   },
   notchSeamCover: {
     zIndex: 3

package/lib/commonjs/surfaces/tooltip/TooltipBubble.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_absoluteFill","_TooltipNotch","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TooltipBubble","chrome","notchPosition","style","onLayout","children","showNotch","notchSize","bordered","borderWidth","notchColor","borderColor","backgroundColor","elevation","shadowStyle","notchProps","top","undefined","bottom","left","right","jsxs","View","testID","accessibilityViewIsModal","pointerEvents","styles","shell","jsx","cardShadow","borderRadius","TooltipNotch","notchLayer","fillStyle","fill","inset","Math","max","notchSeamCover","StyleSheet","create","position","overflow","maxHeight","flexShrink","ABSOLUTE_FILL","zIndex"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipBubble.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_CardFade","_absoluteFill","_TooltipNotch","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TooltipBubble","chrome","notchPosition","style","onLayout","children","maxHeight","showNotch","showNotchProp","notchSize","bordered","borderWidth","showSeamCover","notchEdge","protrudingNotchEdge","notchColor","borderColor","backgroundColor","elevation","shadowStyle","raisedSilent","shadowColor","notchShadow","Platform","OS","shadowOffset","shadowOpacity","shadowRadius","notchProps","top","undefined","bottom","left","right","jsxs","CardFade","testID","accessibilityViewIsModal","pointerEvents","styles","shell","jsx","View","cardShadow","borderRadius","TooltipNotch","notchLayer","fillStyle","fill","fillSkin","fillClip","notchSeamCover","edgeCapStyle","inset","Math","max","EDGE_CAP_THICKNESS","position","edge","along","height","width","StyleSheet","create","overflow","flexShrink","ABSOLUTE_FILL","zIndex","minHeight"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipBubble.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/surfaces/tooltip/TooltipCutout.js

@@ -7,19 +7,62 @@ exports.TooltipCutout = TooltipCutout;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _absoluteFill = require("../absoluteFill.js");
+var _surfaceInteractionConfig = require("../surfaceInteractionConfig.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** No hole yet: collapses the top/left/right bands, leaving one full-screen band. */
+const NO_HOLE = {
+  top: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+
+/**
+ * Intersect the hole with the screen, or drop it when the target is off-screen.
+ *
+ * Targets are measured before `scrollAnchorIntoView` has brought them in, so an
+ * unclamped rect can sit above the viewport. The bands then disagree — the top
+ * one collapses while the side ones still paint at y=0 — and leave phantom dim
+ * blocks pinned to the top edge that reflow as the scroll settles.
+ */
+function clampToScreen(rect, screenWidth, screenHeight) {
+  if (rect == null) {
+    return null;
+  }
+  const top = Math.max(0, rect.top);
+  const left = Math.max(0, rect.left);
+  const bottom = Math.min(screenHeight, rect.top + rect.height);
+  const right = Math.min(screenWidth, rect.left + rect.width);
+  if (bottom <= top || right <= left) {
+    return null;
+  }
+  return {
+    top,
+    left,
+    width: right - left,
+    height: bottom - top
+  };
+}
+
 /**
  * Four-block dimmed cutout around the padded target (web tooltip backdrop).
  *
- * Dim bands use `pointerEvents="none"` so touches reach the app — React Native
- * cannot block taps while allowing scroll the way web's `mousedown`-only
- * swallow does. When `targetBlocked`, only the hole (target) is covered with a
- * transparent `pointerEvents="auto"` layer.
+ * When surface interaction blocking is enabled (default), dim bands use
+ * `pointerEvents="auto"` so taps outside the hole are swallowed. The target
+ * hole stays open for guided-tour taps unless `targetBlocked` seals it.
+ *
+ * When blocking is disabled (`Userflow.setSurfaceInteractionBlocking(false)`),
+ * bands revert to `pointerEvents="none"` so the host app stays scrollable and
+ * tappable — legacy pass-through behavior. The `targetBlocked` hole seal is
+ * unchanged and still mounts when set.
  *
- * MVP note: each block uses its own translucent opacity. That matches non-overlapping
- * tiles well, but can look slightly uneven vs web’s single shadow-hole when other
- * translucent overlays stack. Acceptable for Phase 3; a single masked layer can come later.
+ * The bands are opaque and share one translucent parent, so the dim is composited
+ * once. Per-band opacity looks identical while the tiles truly abut, but any frame
+ * where two of them overlap darkens twice: going from no hole to a measured one
+ * grows the top band while the bottom band still covers the screen, which painted a
+ * doubled rectangle over the upper screen until the geometry settled. Group opacity
+ * makes overlap invisible instead of relying on the four rects always agreeing.
  */
 function TooltipCutout({
   targetRect,
@@ -31,59 +74,69 @@ function TooltipCutout({
     width: sw,
     height: sh
   } = _reactNative.Dimensions.get('window');
+  const hole = clampToScreen(targetRect, sw, sh);
   const {
     top,
     left,
     width,
     height
-  } = targetRect;
+  } = hole ?? NO_HOLE;
   const right = left + width;
   const bottom = top + height;
   const blockStyle = {
-    backgroundColor: backdropColor,
-    opacity: backdropOpacity
+    backgroundColor: backdropColor
   };
+  const blockInteraction = (0, _surfaceInteractionConfig.getSurfaceInteractionBlocking)();
+  const bandPointerEvents = blockInteraction ? 'auto' : 'none';
+  const dimPointerEvents = blockInteraction ? 'box-none' : 'none';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: _absoluteFill.ABSOLUTE_FILL,
     pointerEvents: "box-none",
     testID: "userflow-tooltip-cutout",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-top",
-      style: [styles.block, blockStyle, {
-        top: 0,
-        left: 0,
-        width: sw,
-        height: Math.max(0, top)
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-left",
-      style: [styles.block, blockStyle, {
-        top: Math.max(0, top),
-        left: 0,
-        width: Math.max(0, left),
-        height: Math.max(0, height)
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-right",
-      style: [styles.block, blockStyle, {
-        top: Math.max(0, top),
-        left: Math.max(0, right),
-        width: Math.max(0, sw - right),
-        height: Math.max(0, height)
-      }]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      pointerEvents: "none",
-      testID: "userflow-tooltip-cutout-bottom",
-      style: [styles.block, blockStyle, {
-        top: Math.max(0, bottom),
-        left: 0,
-        width: sw,
-        height: Math.max(0, sh - bottom)
-      }]
-    }), targetBlocked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      pointerEvents: dimPointerEvents,
+      testID: "userflow-tooltip-cutout-dim",
+      style: [_absoluteFill.ABSOLUTE_FILL, {
+        opacity: backdropOpacity
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-top",
+        style: [styles.block, blockStyle, {
+          top: 0,
+          left: 0,
+          width: sw,
+          height: Math.max(0, top)
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-left",
+        style: [styles.block, blockStyle, {
+          top: Math.max(0, top),
+          left: 0,
+          width: Math.max(0, left),
+          height: Math.max(0, height)
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-right",
+        style: [styles.block, blockStyle, {
+          top: Math.max(0, top),
+          left: Math.max(0, right),
+          width: Math.max(0, sw - right),
+          height: Math.max(0, height)
+        }]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: bandPointerEvents,
+        testID: "userflow-tooltip-cutout-bottom",
+        style: [styles.block, blockStyle, {
+          top: Math.max(0, bottom),
+          left: 0,
+          width: sw,
+          height: Math.max(0, sh - bottom)
+        }]
+      })]
+    }), targetBlocked && hole != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       pointerEvents: "auto",
       testID: "userflow-tooltip-target-block",
       style: [styles.block, {

package/lib/commonjs/surfaces/tooltip/TooltipCutout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_absoluteFill","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TooltipCutout","targetRect","backdropColor","backdropOpacity","targetBlocked","width","sw","height","sh","Dimensions","top","left","right","bottom","blockStyle","backgroundColor","opacity","jsxs","View","style","ABSOLUTE_FILL","pointerEvents","testID","children","jsx","styles","block","Math","max","StyleSheet","create","position"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipCutout.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_absoluteFill","_surfaceInteractionConfig","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NO_HOLE","top","left","width","height","clampToScreen","rect","screenWidth","screenHeight","Math","max","bottom","min","right","TooltipCutout","targetRect","backdropColor","backdropOpacity","targetBlocked","sw","sh","Dimensions","hole","blockStyle","backgroundColor","blockInteraction","getSurfaceInteractionBlocking","bandPointerEvents","dimPointerEvents","jsxs","View","style","ABSOLUTE_FILL","pointerEvents","testID","children","opacity","jsx","styles","block","StyleSheet","create","position"],"sourceRoot":"../../../../src","sources":["surfaces/tooltip/TooltipCutout.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/surfaces/tooltip/TooltipHighlight.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipHighlight = TooltipHighlight;
+exports.buildHighlightRings = buildHighlightRings;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _resolveHighlightChrome = require("../resolveHighlightChrome.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Mobile focus ring for the tooltip hole (mockup: thin brand stroke + soft
+ * halo). Web uses one CSS `box-shadow`; RN approximates that with a 2px
+ * stroke, one translucent band, and a real blur where the platform can
+ * paint a colored shadow (`shadow*` on iOS, `boxShadow` on RN 0.76+).
+ *
+ * Ring chrome is passed as a style array so `StyleSheet.create` numeric IDs
+ * are not object-spread (that drops `position: 'absolute'` on device).
+ */
+function TooltipHighlight({
+  targetRect,
+  chrome
+}) {
+  if (!(0, _resolveHighlightChrome.isHighlightVisible)(chrome)) return null;
+  const rings = buildHighlightRings(targetRect, chrome);
+  if (rings.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    pointerEvents: "none",
+    testID: "userflow-tooltip-highlight",
+    children: rings.map(ring => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      testID: ring.testID,
+      style: ring.style
+    }, ring.testID))
+  });
+}
+function buildHighlightRings(rect, chrome) {
+  if (rect.width <= 0 || rect.height <= 0) return [];
+  const inset = chrome.type === 'INSIDE';
+  const rings = [];
+  let consumed = 0;
+  if (chrome.strokeWidth > 0) {
+    const frame = ringFrame(rect, chrome.strokeWidth, consumed, inset, chrome.borderRadius);
+    if (frame) {
+      rings.push({
+        testID: 'userflow-tooltip-highlight-stroke',
+        style: [styles.ring, frame, {
+          borderWidth: chrome.strokeWidth,
+          borderColor: chrome.color,
+          ...strokeGlow(chrome)
+        }]
+      });
+      consumed += chrome.strokeWidth;
+    }
+  }
+  if (chrome.radius > 0) {
+    const frame = ringFrame(rect, chrome.radius, consumed, inset, chrome.borderRadius);
+    if (frame) {
+      rings.push({
+        testID: 'userflow-tooltip-highlight-glow',
+        style: [styles.ring, frame, {
+          borderWidth: chrome.radius,
+          borderColor: chrome.glowColor
+        }]
+      });
+    }
+  }
+  return rings;
+}
+function strokeGlow(chrome) {
+  const blur = Math.max(chrome.radius, 6);
+  const glow = {
+    shadowColor: chrome.color,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: Math.min(0.45, chrome.opacity),
+    shadowRadius: blur
+  };
+  if (_reactNative.Platform?.OS !== 'ios') {
+    glow.boxShadow = `0px 0px ${blur}px 0px ${chrome.glowColor}`;
+  }
+  return glow;
+}
+function ringFrame(rect, borderWidth, alreadyConsumed, inset, cornerRadius) {
+  if (borderWidth <= 0) return null;
+  const {
+    top,
+    left,
+    width,
+    height
+  } = rect;
+  if (inset) {
+    const nextWidth = width - alreadyConsumed * 2;
+    const nextHeight = height - alreadyConsumed * 2;
+    if (nextWidth < borderWidth * 2 || nextHeight < borderWidth * 2) return null;
+    return {
+      top: top + alreadyConsumed,
+      left: left + alreadyConsumed,
+      width: nextWidth,
+      height: nextHeight,
+      borderRadius: Math.max(0, cornerRadius - alreadyConsumed)
+    };
+  }
+  const outset = alreadyConsumed + borderWidth;
+  return {
+    top: top - outset,
+    left: left - outset,
+    width: width + outset * 2,
+    height: height + outset * 2,
+    borderRadius: cornerRadius + outset
+  };
+}
+const styles = _reactNative.StyleSheet.create({
+  ring: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    overflow: 'visible'
+  }
+});
+//# sourceMappingURL=TooltipHighlight.js.map