@userflow-tech/react-native 0.2.0 → 0.3.0

package/src/authoring/chrome/ChromeBottomSheet.tsx

@@ -3,22 +3,36 @@ import { StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
 
 import { useUserflowSafeAreaInsets } from '../../surfaces/safeArea';
 
+import { ChromeIcon, type ChromeIconName } from './ChromeIcon';
 import { chromeColors, chromeShadows, chromeSpace, chromeText } from './tokens';
 
+export interface ChromeBottomSheetIcon {
+  name: ChromeIconName;
+  tintColor: string;
+}
+
 export interface ChromeBottomSheetProps {
   children: React.ReactNode;
   helperText?: string | undefined;
+  /** Shown beside the helper. Top-aligned so a two-line warning stays even. */
+  helperIcon?: ChromeBottomSheetIcon;
+  tone?: 'default' | 'error';
   onMeasureHeight?: (height: number) => void;
   testID?: string;
 }
 
 /**
- * Full-bleed authoring bottom bar. Content is top-aligned; bottom padding
- * includes the home-indicator inset.
+ * Full-bleed authoring bottom bar. Content is top-aligned.
+ *
+ * On the Pro Max reference the actions end 48pt above the screen edge: 14pt
+ * above the 34pt home indicator. Without a bottom inset (iPhone 8, Android
+ * button nav) the bar falls back to its 24pt top padding so it stays balanced.
  */
 export function ChromeBottomSheet({
   children,
   helperText,
+  helperIcon,
+  tone = 'default',
   onMeasureHeight,
   testID = 'userflow-chrome-bottom-sheet',
 }: ChromeBottomSheetProps): React.ReactElement {
@@ -35,27 +49,54 @@ export function ChromeBottomSheet({
     <View
       testID={testID}
       onLayout={onLayout}
-      style={[styles.bar, chromeShadows.card, { paddingBottom: chromeSpace[24] + insets.bottom }]}
+      style={[
+        styles.bar,
+        chromeShadows.card,
+        {
+          backgroundColor: tone === 'error' ? chromeColors.danger : chromeColors.primaryText,
+          paddingBottom: Math.max(chromeSpace[24], insets.bottom + GAP_ABOVE_HOME_INDICATOR),
+        },
+      ]}
     >
       {helperText ? (
-        <Text style={[chromeText.labelSmBold, styles.helper, { color: chromeColors.invertedText }]}>
-          {helperText}
-        </Text>
+        <View style={styles.helperRow}>
+          {helperIcon ? (
+            <ChromeIcon
+              name={helperIcon.name}
+              size={16}
+              testID="userflow-chrome-bottom-sheet-icon"
+              tintColor={helperIcon.tintColor}
+            />
+          ) : null}
+          <Text
+            style={[chromeText.labelSmBold, styles.helper, { color: chromeColors.invertedText }]}
+          >
+            {helperText}
+          </Text>
+        </View>
       ) : null}
       <View style={styles.row}>{children}</View>
     </View>
   );
 }
 
+const GAP_ABOVE_HOME_INDICATOR = 14;
+
 const styles = StyleSheet.create({
   bar: {
-    backgroundColor: chromeColors.primaryText,
     paddingTop: chromeSpace[24],
     paddingHorizontal: chromeSpace[24],
     gap: chromeSpace[16],
   },
-  helper: {
+  helperRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
     alignSelf: 'stretch',
+    gap: chromeSpace[8],
+  },
+  helper: {
+    flex: 1,
+    flexShrink: 1,
     textAlign: 'center',
   },
   row: {

package/src/authoring/chrome/ChromeButton.tsx

@@ -33,7 +33,9 @@ export function ChromeButton({
   flex = false,
 }: ChromeButtonProps): React.ReactElement {
   const iconOnly = variant === 'icon';
-  const tint = variant === 'primary' ? chromeColors.invertedText : chromeColors.blue500;
+  const primary = variant === 'primary';
+  const disabledPrimary = disabled && primary;
+  const tint = primary ? chromeColors.invertedText : chromeColors.blue500;
 
   return (
     <Pressable
@@ -44,10 +46,10 @@ export function ChromeButton({
       testID={testID}
       style={({ pressed }) => [
         iconOnly ? styles.icon : styles.pill,
-        variant === 'primary' ? styles.primary : styles.secondary,
-        variant === 'primary' ? chromeShadows.button : chromeShadows.buttonSubtle,
+        disabledPrimary ? styles.disabled : primary ? styles.primary : styles.secondary,
+        disabledPrimary ? null : primary ? chromeShadows.button : chromeShadows.buttonSubtle,
         flex ? styles.flex : null,
-        { opacity: disabled ? 0.5 : pressed ? 0.75 : 1 },
+        { opacity: disabledPrimary ? 1 : disabled ? 0.5 : pressed ? 0.75 : 1 },
       ]}
     >
       {icon ? (
@@ -88,6 +90,9 @@ const styles = StyleSheet.create({
   primary: {
     backgroundColor: chromeColors.blue500,
   },
+  disabled: {
+    backgroundColor: chromeColors.disabledFill,
+  },
   secondary: {
     backgroundColor: chromeColors.white,
     borderWidth: 1,

package/src/authoring/chrome/ChromeIcon.tsx

@@ -3,13 +3,22 @@ import { Image, type ImageStyle, type StyleProp } from 'react-native';
 
 import arrowLeftFromBracket from './icons/arrow-left-from-bracket.png';
 import arrowRotateLeft from './icons/arrow-rotate-left.png';
+import circleExclamation from './icons/circle-exclamation.png';
+import triangleExclamation from './icons/triangle-exclamation.png';
 import xmark from './icons/xmark.png';
 
-export type ChromeIconName = 'arrow-left-from-bracket' | 'arrow-rotate-left' | 'xmark';
+export type ChromeIconName =
+  | 'arrow-left-from-bracket'
+  | 'arrow-rotate-left'
+  | 'circle-exclamation'
+  | 'triangle-exclamation'
+  | 'xmark';
 
 const SOURCES: Record<ChromeIconName, number> = {
   'arrow-left-from-bracket': arrowLeftFromBracket,
   'arrow-rotate-left': arrowRotateLeft,
+  'circle-exclamation': circleExclamation,
+  'triangle-exclamation': triangleExclamation,
   xmark,
 };
 

package/src/authoring/chrome/ChromeTopBar.tsx

@@ -3,14 +3,22 @@ import { Image, StyleSheet, Text, View, type LayoutChangeEvent } from 'react-nat
 
 import { useUserflowSafeAreaInsets } from '../../surfaces/safeArea';
 
+import { ChromeIcon, type ChromeIconName } from './ChromeIcon';
 import logomark from './icons/userflow-logomark.png';
 import { chromeColors, chromeShadows, chromeSpace, chromeText } from './tokens';
 
 export type ChromeTopBarTone = 'default' | 'error';
 
+export interface ChromeTopBarIcon {
+  name: ChromeIconName;
+  tintColor: string;
+}
+
 export interface ChromeTopBarProps {
   label: string;
   tone?: ChromeTopBarTone;
+  /** Replaces the logomark. Warning and error selection states use this. */
+  icon?: ChromeTopBarIcon;
   left?: React.ReactNode;
   right?: React.ReactNode;
   /** Laid-out height of the bar including safe-area padding. */
@@ -25,14 +33,16 @@ export interface ChromeTopBarProps {
 
 /**
  * Full-bleed authoring top bar. Height comes from safe-area + content, not
- * the 120pt Figma frame (that number already includes the status bar).
+ * the Figma frame (that number already includes the status bar).
  *
- * Measured on the Pro Max reference: 4pt below the status bar, 16pt above
- * the bottom edge of the bar.
+ * On the Pro Max reference the 16pt label starts 13pt below the status bar
+ * and ends 24pt above the bottom edge. The 40pt controls are taller than
+ * that label, so the outer padding is what remains after centering them.
  */
 export function ChromeTopBar({
   label,
   tone = 'default',
+  icon,
   left,
   right,
   onMeasureHeight,
@@ -68,13 +78,22 @@ export function ChromeTopBar({
       <View style={styles.row}>
         <View style={styles.slot}>{left}</View>
         <View style={styles.labelRow} pointerEvents="none">
-          <Image
-            accessibilityIgnoresInvertColors
-            source={logomark}
-            style={styles.logomark}
-            testID="userflow-chrome-logomark"
-          />
-          <Text numberOfLines={numberOfLines} style={[chromeText.barTitle, styles.label]}>
+          {icon ? (
+            <ChromeIcon
+              name={icon.name}
+              size={16}
+              testID="userflow-chrome-top-bar-icon"
+              tintColor={icon.tintColor}
+            />
+          ) : (
+            <Image
+              accessibilityIgnoresInvertColors
+              source={logomark}
+              style={styles.logomark}
+              testID="userflow-chrome-logomark"
+            />
+          )}
+          <Text numberOfLines={numberOfLines} style={[chromeText.labelSmBold, styles.label]}>
             {label}
           </Text>
         </View>
@@ -85,13 +104,18 @@ export function ChromeTopBar({
 }
 
 const SLOT = 40;
-/** Gap between the status-bar inset and the content row (Figma: 5pt / we use 4). */
-const CONTENT_TOP_GAP = 4;
+/** Figma: 13pt from the status-bar inset to the 16pt label, 24pt below it. */
+const LABEL_LINE_HEIGHT = 16;
+const LABEL_GAP_BELOW_STATUS_BAR = 13;
+const LABEL_GAP_ABOVE_BAR_EDGE = 24;
+const SLOT_SLACK = (SLOT - LABEL_LINE_HEIGHT) / 2;
+const CONTENT_TOP_GAP = LABEL_GAP_BELOW_STATUS_BAR - SLOT_SLACK;
+const CONTENT_BOTTOM_GAP = LABEL_GAP_ABOVE_BAR_EDGE - SLOT_SLACK;
 
 const styles = StyleSheet.create({
   bar: {
     paddingHorizontal: chromeSpace[24],
-    paddingBottom: chromeSpace[16],
+    paddingBottom: CONTENT_BOTTOM_GAP,
   },
   row: {
     flexDirection: 'row',
@@ -119,8 +143,8 @@ const styles = StyleSheet.create({
   },
   logomark: {
     // Figma `Warstwa_1` stacked-card mark. Not the Made-with-Userflow footer glyph.
-    width: 24,
-    height: 22,
+    width: 16,
+    height: 15,
     tintColor: chromeColors.invertedText,
   },
 });

package/src/authoring/chrome/DoubleTapBridge.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyleSheet, View, type GestureResponderEvent } from 'react-native';
 
 import { changedTouchPoints, forEachChangedTouch } from '../../runtime/changedTouchPoints';
+import { isolateSync } from '../../runtime/isolateCall';
 
 import { doubleTapMonitor } from './doubleTapMonitor';
 
@@ -17,26 +18,32 @@ export interface DoubleTapBridgeProps {
  */
 export function DoubleTapBridge({ children }: DoubleTapBridgeProps): React.ReactElement {
   const onTouchStart = React.useCallback((event: GestureResponderEvent) => {
-    forEachChangedTouch(event, (identifier, pageX, pageY) => {
-      doubleTapMonitor.handleTouchStart(identifier, pageX, pageY);
+    isolateSync('double-tap', () => {
+      forEachChangedTouch(event, (identifier, pageX, pageY) => {
+        doubleTapMonitor.handleTouchStart(identifier, pageX, pageY);
+      });
     });
   }, []);
 
   const onTouchEnd = React.useCallback((event: GestureResponderEvent) => {
-    forEachChangedTouch(event, (identifier, pageX, pageY) => {
-      doubleTapMonitor.handleTouchEnd(identifier, pageX, pageY);
+    isolateSync('double-tap', () => {
+      forEachChangedTouch(event, (identifier, pageX, pageY) => {
+        doubleTapMonitor.handleTouchEnd(identifier, pageX, pageY);
+      });
     });
   }, []);
 
   const onTouchCancel = React.useCallback((event: GestureResponderEvent) => {
-    const points = changedTouchPoints(event);
-    if (points.length === 0) {
-      doubleTapMonitor.cancelTouch();
-      return;
-    }
-    for (const touch of points) {
-      doubleTapMonitor.cancelTouch(touch.identifier);
-    }
+    isolateSync('double-tap', () => {
+      const points = changedTouchPoints(event);
+      if (points.length === 0) {
+        doubleTapMonitor.cancelTouch();
+        return;
+      }
+      for (const touch of points) {
+        doubleTapMonitor.cancelTouch(touch.identifier);
+      }
+    });
   }, []);
 
   return (

package/src/authoring/chrome/doubleTapMonitor.ts

@@ -30,6 +30,16 @@ export class DoubleTapMonitor {
     }
   }
 
+  /**
+   * Drop `subscription` only when it is still the active one. A later owner
+   * (preview bar after the picker leaves navigate mode) must survive cleanup.
+   */
+  clearIfCurrent(subscription: DoubleTapSubscription): void {
+    if (this.subscription === subscription) {
+      this.set(null);
+    }
+  }
+
   handleTouchStart(identifier: TouchIdentifier, pageX: number, pageY: number): void {
     if (!this.subscription) {
       this.touchStarts.clear();

package/src/authoring/chrome/tokens.ts

@@ -17,6 +17,12 @@ export const chromeColors = {
   focusRing: 'rgba(47, 105, 238, 0.35)',
   bgMiddle: '#f4f8fb',
   danger: '#57000e',
+  /** Figma Colors/Accent/Warning (`#f0c000`). */
+  warningAccent: '#f0c000',
+  /** Figma Colors/Accent/Danger (`#eb1e47`). */
+  dangerAccent: '#eb1e47',
+  /** Figma Primitive Colors/Gray/150 — disabled primary pill. */
+  disabledFill: '#c3d5e0',
   white: '#ffffff',
   /** Figma Shadow/Button. Opacity is applied in `chromeShadows`. */
   shadowButton: 'rgb(54, 107, 214)',
@@ -44,9 +50,8 @@ export const chromeRadius = {
 } as const;
 
 export const chromeText = {
-  barTitle: { fontSize: 16, fontWeight: '600', lineHeight: 20 },
   buttonLabel: { fontSize: 16, fontWeight: '600', lineHeight: 20 },
-  /** Figma Labels/SM Bold — bottom-sheet helper copy (3869:521). */
+  /** Figma Labels/SM Bold — header title and bottom-sheet helper copy. */
   labelSmBold: { fontSize: 14, fontWeight: '600', lineHeight: 16 },
   dialogTitle: { fontSize: 18, fontWeight: '500', lineHeight: 24 },
   dialogBody: { fontSize: 16, fontWeight: '400', lineHeight: 24 },

package/src/authoring/elementPickerController.ts

@@ -1,6 +1,4 @@
-import type { AutoAnchorInstance } from '../anchors/AutoAnchorRegistry';
-
-import type { HitRect } from './hitTest';
+import type { HitRect, PickTarget } from './hitTest';
 
 export interface ElementPickerScreenshot {
   dataUrl: string;
@@ -13,7 +11,7 @@ export interface ElementPickerScreenshot {
 }
 
 export interface ElementPickerResult {
-  instance: AutoAnchorInstance;
+  target: PickTarget;
   autoData: string;
   text?: string | null;
   rect: HitRect;

package/src/authoring/fingerprintFromInstance.ts

@@ -10,10 +10,16 @@ import {
 import { Dimensions, Platform } from 'react-native';
 
 import { autoAnchorRegistry, type AutoAnchorInstance } from '../anchors/AutoAnchorRegistry';
+import type { AnyFiber } from '../anchors/fiber/fiberInternals';
+import { fiberPathFromHost } from '../anchors/fiber/fiberPath';
+import { fibersMatch, resolveFiberPath } from '../anchors/fiber/resolveFiberPath';
+import { createVisibleInstanceFilter } from '../anchors/isInstanceOnVisibleScreen';
 import * as semanticMatcher from '../anchors/semanticMatcher';
 import type { MatchMissReason } from '../anchors/semanticMatcher';
 import { getCurrentScreenLocation } from '../screenTracker';
 
+import type { PickTarget } from './hitTest';
+
 function deriveIdentityStrength(inst: AutoAnchorInstance): IdentityStrength {
   const hasId = !!(
     inst.userflowId ||
@@ -81,7 +87,7 @@ export function fingerprintFromInstance(inst: AutoAnchorInstance): MobileFingerp
     ...(inst.ordinal !== undefined ? { ordinal: inst.ordinal } : {}),
     ...(inst.siblingIndex !== undefined ? { siblingIndex: inst.siblingIndex } : {}),
     isPressable: inst.isPressable,
-    ambiguous: inst.ambiguous,
+    ambiguous: autoAnchorRegistry.isAmbiguousAmong(inst, createVisibleInstanceFilter()),
     identityStrength: deriveIdentityStrength(inst),
   };
 }
@@ -136,12 +142,16 @@ export type PickerFingerprintSuccess = {
 export type PickerFingerprintValidation = PickerFingerprintSuccess | PickerFingerprintFailure;
 
 /**
- * Encode `inst` and run the play-time matcher. Confirm may proceed only on a
- * unique hit of this same instance.
+ * Encode `inst` and run the play-time matcher over visible screens only — the
+ * same pool as the visible pass in `resolveAutoAnchorHost`. Confirm may proceed
+ * only on a unique hit of this same instance. A copy still mounted on a covered
+ * screen does not count.
  */
 export function validatePickerFingerprint(inst: AutoAnchorInstance): PickerFingerprintValidation {
   const autoData = encodeInstanceAutoData(inst);
-  const match = semanticMatcher.matchAutoData(autoData);
+  const match = semanticMatcher.matchAutoData(autoData, {
+    instanceFilter: createVisibleInstanceFilter(),
+  });
   if (!match.instance) {
     return { ok: false, reason: match.reason ?? 'no-candidates' };
   }
@@ -150,3 +160,159 @@ export function validatePickerFingerprint(inst: AutoAnchorInstance): PickerFinge
   }
   return { ok: true, autoData };
 }
+
+function fiberIdentityStrength(descriptor: {
+  testID?: string;
+  nativeID?: string;
+  accessibilityLabel?: string;
+  childText?: string;
+}): IdentityStrength {
+  if (descriptor.testID || descriptor.nativeID) return 'id';
+  if (descriptor.childText || descriptor.accessibilityLabel) return 'content';
+  return 'structural';
+}
+
+/**
+ * Envelope for a host the Babel plugin never registered. The minimal
+ * fingerprint lets an older SDK replay a `testID` through the exact-id path.
+ * `resolver: 'fiber'` is what current builds use for everything else.
+ */
+export function autoDataFromFiberTarget(
+  fiber: AnyFiber,
+  descriptor: {
+    kind: string;
+    role: MobileFingerprint['role'];
+    isPressable: boolean;
+    testID?: string;
+    nativeID?: string;
+    accessibilityLabel?: string;
+    childText?: string;
+  },
+): MobileAutoData {
+  const path = fiberPathFromHost(fiber);
+  const selector = descriptor.testID
+    ? descriptor.testID
+    : (path?.segments.map((segment) => segment.hostKind ?? segment.displayName).join(' > ') ??
+      descriptor.kind);
+  const strength = fiberIdentityStrength(descriptor);
+  const { screenId, screenName } = screenFromLocation();
+  const device = deviceMetadata();
+  const manualId = descriptor.testID ?? descriptor.nativeID;
+  return {
+    version: MOBILE_AUTODATA_VERSION,
+    platform: 'react-native',
+    selector,
+    displayName: descriptor.kind,
+    ...(manualId ? { anchorId: manualId, manualId } : {}),
+    resolver: 'fiber',
+    ...(path ? { fiberPath: path } : {}),
+    fingerprint: {
+      version: MOBILE_FINGERPRINT_VERSION,
+      structuralPath: selector,
+      templatePath: selector,
+      kind: descriptor.kind,
+      role: descriptor.role,
+      ...(manualId ? { manualId } : {}),
+      ...(descriptor.testID ? { testID: descriptor.testID } : {}),
+      ...(descriptor.nativeID ? { nativeID: descriptor.nativeID } : {}),
+      ...(descriptor.childText ? { childText: descriptor.childText } : {}),
+      ...(descriptor.accessibilityLabel
+        ? { accessibilityLabel: descriptor.accessibilityLabel }
+        : {}),
+      ancestors: [],
+      previousSiblings: [],
+      nextSiblings: [],
+      isPressable: descriptor.isPressable,
+      identityStrength: strength,
+    },
+    screenId,
+    ...(screenName ? { screenName } : {}),
+    platformData: {
+      ...(descriptor.testID ? { testID: descriptor.testID } : {}),
+      ...(descriptor.accessibilityLabel
+        ? { accessibilityLabel: descriptor.accessibilityLabel }
+        : {}),
+      ...(descriptor.childText ? { childText: descriptor.childText } : {}),
+      isPressable: descriptor.isPressable,
+    },
+    ...(device ? { device } : {}),
+  };
+}
+
+export function encodeFiberTargetAutoData(
+  fiber: AnyFiber,
+  descriptor: Parameters<typeof autoDataFromFiberTarget>[1],
+): string {
+  return encodeMobileAutoData(autoDataFromFiberTarget(fiber, descriptor));
+}
+
+/**
+ * Confirm may proceed only when replaying the pick hits this same host.
+ * Registry targets use the scored matcher; fiber targets use the fiber path.
+ */
+export function validatePickerTarget(target: PickTarget): PickerFingerprintValidation {
+  if (target.source === 'registry') return validatePickerFingerprint(target.instance);
+  const autoData = encodeFiberTargetAutoData(target.fiber, target.descriptor);
+  const decoded = autoDataFromFiberTarget(target.fiber, target.descriptor);
+  if (!decoded.fiberPath) return { ok: false, reason: 'no-fingerprint' };
+  const match = resolveFiberPath(decoded.fiberPath);
+  if (match.status === 'ambiguous') return { ok: false, reason: 'not-unique' };
+  if (match.status !== 'found') return { ok: false, reason: 'no-candidates' };
+  if (!fibersMatch(match.fiber, target.fiber)) return { ok: false, reason: 'wrong-instance' };
+  return { ok: true, autoData };
+}
+
+/** True when a fiber pick has no id and no content — Confirm still works, with advice. */
+export function fiberTargetNeedsIdAdvice(target: PickTarget): boolean {
+  if (target.source !== 'fiber') return false;
+  const strength = fiberIdentityStrength(target.descriptor);
+  return strength === 'structural';
+}
+
+export type PickerSelectionWarningReason = 'not-unique' | 'low-confidence';
+
+export type PickerSelectionAssessment =
+  | { kind: 'ok'; autoData: string }
+  | { kind: 'warning'; reason: PickerSelectionWarningReason; autoData: string }
+  | { kind: 'error'; reason: 'unresolvable' };
+
+/**
+ * Classify a stamped element for the picker chrome.
+ *
+ * A unique play-time hit can still be a warning: look-alike twins the matcher
+ * can still tell apart (`ambiguous`), or a structural-only identity that may
+ * break if the layout changes. Twins on a covered screen do not count. Any
+ * miss, including twins the matcher cannot separate, blocks confirm.
+ *
+ * Not-unique wins when both warnings apply. Call after live content is current;
+ * this refreshes it via {@link validatePickerFingerprint}.
+ */
+export function assessPickerSelection(inst: AutoAnchorInstance): PickerSelectionAssessment {
+  const validated = validatePickerFingerprint(inst);
+  if (!validated.ok) {
+    return { kind: 'error', reason: 'unresolvable' };
+  }
+  if (autoAnchorRegistry.isAmbiguousAmong(inst, createVisibleInstanceFilter())) {
+    return { kind: 'warning', reason: 'not-unique', autoData: validated.autoData };
+  }
+  if (deriveIdentityStrength(inst) === 'structural') {
+    return { kind: 'warning', reason: 'low-confidence', autoData: validated.autoData };
+  }
+  return { kind: 'ok', autoData: validated.autoData };
+}
+
+/**
+ * {@link assessPickerSelection} for any pick. Fiber picks resolve fail-closed,
+ * so twins the fiber path cannot separate are errors, never warnings.
+ */
+export function assessPickerTarget(target: PickTarget): PickerSelectionAssessment {
+  if (target.source === 'registry') return assessPickerSelection(target.instance);
+  const validated = validatePickerTarget(target);
+  if (!validated.ok) {
+    return { kind: 'error', reason: 'unresolvable' };
+  }
+  if (fiberTargetNeedsIdAdvice(target)) {
+    return { kind: 'warning', reason: 'low-confidence', autoData: validated.autoData };
+  }
+  return { kind: 'ok', autoData: validated.autoData };
+}