@userflow-tech/react-native 0.1.1 → 0.3.0

package/src/authoring/chrome/ChromeTopBar.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Image, StyleSheet, Text, View, type LayoutChangeEvent } from 'react-native';
+
+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. */
+  onMeasureHeight?: (height: number) => void;
+  /** Error-tone labels wrap on narrow devices. Default 1. */
+  numberOfLines?: number;
+  /** Hide the bar from VoiceOver/TalkBack while a dialog is open above it. */
+  accessibilityElementsHidden?: boolean | undefined;
+  importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined;
+  testID?: string;
+}
+
+/**
+ * Full-bleed authoring top bar. Height comes from safe-area + content, not
+ * the Figma frame (that number already includes the status 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,
+  numberOfLines = 1,
+  accessibilityElementsHidden,
+  importantForAccessibility,
+  testID = 'userflow-chrome-top-bar',
+}: ChromeTopBarProps): React.ReactElement {
+  const insets = useUserflowSafeAreaInsets();
+
+  const onLayout = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      onMeasureHeight?.(event.nativeEvent.layout.height);
+    },
+    [onMeasureHeight],
+  );
+
+  return (
+    <View
+      accessibilityElementsHidden={accessibilityElementsHidden}
+      importantForAccessibility={importantForAccessibility}
+      testID={testID}
+      onLayout={onLayout}
+      style={[
+        styles.bar,
+        chromeShadows.card,
+        {
+          backgroundColor: tone === 'error' ? chromeColors.danger : chromeColors.primaryText,
+          paddingTop: insets.top + CONTENT_TOP_GAP,
+        },
+      ]}
+    >
+      <View style={styles.row}>
+        <View style={styles.slot}>{left}</View>
+        <View style={styles.labelRow} pointerEvents="none">
+          {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>
+        <View style={styles.slot}>{right}</View>
+      </View>
+    </View>
+  );
+}
+
+const SLOT = 40;
+/** 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: CONTENT_BOTTOM_GAP,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: SLOT,
+  },
+  slot: {
+    width: SLOT,
+    height: SLOT,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  labelRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: chromeSpace[8],
+    paddingHorizontal: chromeSpace[8],
+  },
+  label: {
+    color: chromeColors.invertedText,
+    textAlign: 'center',
+    flexShrink: 1,
+  },
+  logomark: {
+    // Figma `Warstwa_1` stacked-card mark. Not the Made-with-Userflow footer glyph.
+    width: 16,
+    height: 15,
+    tintColor: chromeColors.invertedText,
+  },
+});

package/src/authoring/chrome/DoubleTapBridge.tsx

@@ -0,0 +1,67 @@
+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';
+
+export interface DoubleTapBridgeProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Observes screen-wide touches for {@link doubleTapMonitor} without claiming
+ * the responder. Must wrap **both** host app content and authoring chrome —
+ * preview-bar taps never bubble through `TargetPressBridge`, which only
+ * wraps the app tree.
+ */
+export function DoubleTapBridge({ children }: DoubleTapBridgeProps): React.ReactElement {
+  const onTouchStart = React.useCallback((event: GestureResponderEvent) => {
+    isolateSync('double-tap', () => {
+      forEachChangedTouch(event, (identifier, pageX, pageY) => {
+        doubleTapMonitor.handleTouchStart(identifier, pageX, pageY);
+      });
+    });
+  }, []);
+
+  const onTouchEnd = React.useCallback((event: GestureResponderEvent) => {
+    isolateSync('double-tap', () => {
+      forEachChangedTouch(event, (identifier, pageX, pageY) => {
+        doubleTapMonitor.handleTouchEnd(identifier, pageX, pageY);
+      });
+    });
+  }, []);
+
+  const onTouchCancel = React.useCallback((event: GestureResponderEvent) => {
+    isolateSync('double-tap', () => {
+      const points = changedTouchPoints(event);
+      if (points.length === 0) {
+        doubleTapMonitor.cancelTouch();
+        return;
+      }
+      for (const touch of points) {
+        doubleTapMonitor.cancelTouch(touch.identifier);
+      }
+    });
+  }, []);
+
+  return (
+    <View
+      style={styles.root}
+      collapsable={false}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchCancel}
+      testID="userflow-double-tap-bridge"
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+});

package/src/authoring/chrome/doubleTapMonitor.ts

@@ -0,0 +1,90 @@
+import {
+  TARGET_PRESS_TAP_SLOP,
+  type TouchIdentifier,
+  type TouchPoint,
+} from '../../anchors/targetPressMonitor';
+import { isDoubleTap, type TapSample } from '../doubleTap';
+
+export interface DoubleTapSubscription {
+  onDoubleTap: () => void;
+}
+
+/**
+ * Screen-wide double-tap observer. Never claims the responder — the host app
+ * keeps scrolling and tapping. Used by preview-mode chrome, which has no
+ * capture layer of its own.
+ *
+ * Distinct from `targetPressMonitor`: that singleton is bound to a tooltip
+ * target rect and fires `onPress`, not a double-tap toggle.
+ */
+export class DoubleTapMonitor {
+  private subscription: DoubleTapSubscription | null = null;
+  private touchStarts = new Map<TouchIdentifier, TouchPoint>();
+  private lastTap: TapSample | null = null;
+
+  set(subscription: DoubleTapSubscription | null): void {
+    this.subscription = subscription;
+    if (!subscription) {
+      this.touchStarts.clear();
+      this.lastTap = null;
+    }
+  }
+
+  /**
+   * 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();
+      return;
+    }
+    this.touchStarts.set(identifier, { pageX, pageY });
+  }
+
+  handleTouchEnd(identifier: TouchIdentifier, pageX: number, pageY: number): void {
+    const start = this.touchStarts.get(identifier) ?? null;
+    this.touchStarts.delete(identifier);
+    const sub = this.subscription;
+    if (!start || !sub) return;
+
+    const dx = pageX - start.pageX;
+    const dy = pageY - start.pageY;
+    if (dx * dx + dy * dy > TARGET_PRESS_TAP_SLOP * TARGET_PRESS_TAP_SLOP) {
+      this.lastTap = null;
+      return;
+    }
+
+    const sample: TapSample = { pageX, pageY, timestamp: Date.now() };
+    if (isDoubleTap(this.lastTap, sample)) {
+      this.lastTap = null;
+      sub.onDoubleTap();
+      return;
+    }
+    this.lastTap = sample;
+  }
+
+  cancelTouch(identifier?: TouchIdentifier): void {
+    if (identifier == null) {
+      this.touchStarts.clear();
+      return;
+    }
+    this.touchStarts.delete(identifier);
+  }
+
+  /** Test helper. */
+  resetForTests(): void {
+    this.subscription = null;
+    this.touchStarts.clear();
+    this.lastTap = null;
+  }
+}
+
+/** Shared singleton used by PreviewModeBanner and DoubleTapBridge. */
+export const doubleTapMonitor = new DoubleTapMonitor();

package/src/authoring/chrome/tokens.ts

@@ -0,0 +1,111 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+/**
+ * Authoring-chrome tokens from the Userflow React Native Figma file
+ * (`BojC6qdlFUytdD1bRsNLV8`). These are independent of end-user flow
+ * `ThemeFragment` — pairing / picker UI is not themed by the server.
+ *
+ * Typography omits `fontFamily` so RN uses SF Pro / Roboto.
+ */
+
+export const chromeColors = {
+  primaryText: '#132b39',
+  invertedText: '#ffffff',
+  blue500: '#1a57e6',
+  overlay: 'rgba(0, 0, 0, 0.2)',
+  /** Figma Colors/Effect/Focus Ring (`#2f69ee59`). */
+  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)',
+} as const;
+
+/**
+ * `chromeColors.overlay` split for TooltipCutout's composite-once contract
+ * (`backdropColor` + `backdropOpacity` rather than a single rgba string).
+ */
+export const chromeOverlay = { color: '#000000', opacity: 0.2 } as const;
+
+export const chromeSpace = {
+  0: 0,
+  8: 8,
+  12: 12,
+  16: 16,
+  20: 20,
+  24: 24,
+} as const;
+
+export const chromeRadius = {
+  md: 4,
+  lg: 8,
+  fullyRounded: 9999,
+} as const;
+
+export const chromeText = {
+  buttonLabel: { fontSize: 16, fontWeight: '600', lineHeight: 20 },
+  /** 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 },
+  tooltip: { fontSize: 14, fontWeight: '500', lineHeight: 16 },
+} as const satisfies Record<string, TextStyle>;
+
+/**
+ * Figma drop shadows approximated as RN `shadow*` + Android `elevation`.
+ * There is no shared chrome shadow helper — TooltipBubble's elevation pairing
+ * is tooltip-specific and is not reused here.
+ */
+export const chromeShadows = {
+  /** Shadow/Button — primary pill. */
+  button: {
+    shadowColor: chromeColors.shadowButton,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  /** Shadow/Button (Subtle) — secondary / icon pills. */
+  buttonSubtle: {
+    shadowColor: chromeColors.shadowButton,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.5,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  /** Shadow/Card — full-bleed top/bottom bars. */
+  card: {
+    shadowColor: chromeColors.primaryText,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  /** Shadow/Default (Subtle) — onboarding tooltip. */
+  tooltip: {
+    shadowColor: chromeColors.primaryText,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 12,
+    elevation: 4,
+  },
+  /**
+   * Dialog card. Carries the values ChromeDialog shipped with (shadowRadius 6 /
+   * elevation 6). Figma names this Shadow/Default (Subtle) — the same token as
+   * `tooltip` — but the radius-convention audit across chrome shadows is Phase 6.
+   */
+  dialog: {
+    shadowColor: chromeColors.primaryText,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 6,
+  },
+} as const satisfies Record<string, ViewStyle>;

package/src/authoring/doubleTap.ts

@@ -0,0 +1,27 @@
+export const DOUBLE_TAP_WINDOW_MS = 300;
+export const DOUBLE_TAP_SLOP = 40;
+
+export interface TapSample {
+  pageX: number;
+  pageY: number;
+  timestamp: number;
+}
+
+/**
+ * True when `next` lands close enough in space and time to `prev` to count as
+ * the second half of a double tap. Inclusive on both the time window and slop
+ * so a tap at exactly the boundary still toggles chrome rather than selecting.
+ */
+export function isDoubleTap(
+  prev: TapSample | null,
+  next: TapSample,
+  windowMs: number = DOUBLE_TAP_WINDOW_MS,
+  slop: number = DOUBLE_TAP_SLOP,
+): boolean {
+  if (prev == null) return false;
+  const dt = next.timestamp - prev.timestamp;
+  if (dt < 0 || dt > windowMs) return false;
+  const dx = next.pageX - prev.pageX;
+  const dy = next.pageY - prev.pageY;
+  return dx * dx + dy * dy <= slop * slop;
+}

package/src/authoring/elementPickerController.ts

@@ -0,0 +1,133 @@
+import type { HitRect, PickTarget } from './hitTest';
+
+export interface ElementPickerScreenshot {
+  dataUrl: string;
+  width: number;
+  height: number;
+  targetX1: number;
+  targetY1: number;
+  targetX2: number;
+  targetY2: number;
+}
+
+export interface ElementPickerResult {
+  target: PickTarget;
+  autoData: string;
+  text?: string | null;
+  rect: HitRect;
+  screenshot?: ElementPickerScreenshot;
+}
+
+export interface ElementPickerRequest {
+  /** Caller-supplied id (pairing `idempotency_key`). Minted when omitted. */
+  requestId?: string;
+  elementType?: string | null;
+  onResult: (result: ElementPickerResult) => void | Promise<void>;
+  onCancel?: () => void;
+}
+
+export interface ElementPickerState {
+  active: boolean;
+  requestId?: string;
+  elementType?: string | null;
+}
+
+export type ElementPickerListener = (state: ElementPickerState) => void;
+
+const IDLE: ElementPickerState = { active: false };
+
+interface ActiveRequest extends ElementPickerRequest {
+  requestId: string;
+}
+
+/**
+ * Module singleton for the in-app element picker. Pairing glue (and the QA
+ * harness) call {@link beginSelection}; {@link ElementPickerOverlay} reads
+ * state and commits/cancels.
+ */
+export class ElementPickerController {
+  private request: ActiveRequest | null = null;
+  private nextId = 1;
+  private readonly listeners = new Set<ElementPickerListener>();
+
+  getState(): ElementPickerState {
+    if (!this.request) return { ...IDLE };
+    return {
+      active: true,
+      requestId: this.request.requestId,
+      ...(this.request.elementType != null ? { elementType: this.request.elementType } : {}),
+    };
+  }
+
+  subscribe(listener: ElementPickerListener): () => void {
+    this.listeners.add(listener);
+    listener(this.getState());
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  beginSelection(request: ElementPickerRequest): void {
+    if (this.request) {
+      this.request.onCancel?.();
+    }
+    const requestId = request.requestId ?? `pick-${this.nextId++}`;
+    this.request = { ...request, requestId };
+    this.emit();
+  }
+
+  /**
+   * Deliver `result` to the active request. When `expectedId` is passed, a
+   * mismatch (stale Confirm after a newer `beginSelection`) is a no-op.
+   * Omitting `expectedId` is for synchronous tests/QA.
+   *
+   * If `onResult` returns a rejected promise (e.g. relay not connected), the
+   * request stays active so the overlay can retry. Ack timeouts should be
+   * swallowed by the caller of `onResult`, not thrown here.
+   */
+  async commit(result: ElementPickerResult, expectedId?: string): Promise<boolean> {
+    const req = this.request;
+    if (!req) return false;
+    if (expectedId != null && req.requestId !== expectedId) return false;
+    try {
+      await req.onResult(result);
+    } catch {
+      return this.request === req ? false : true;
+    }
+    if (this.request !== req) return true;
+    this.request = null;
+    this.emit();
+    return true;
+  }
+
+  cancel(): void {
+    const req = this.request;
+    this.request = null;
+    this.emit();
+    if (!req) return;
+    try {
+      req.onCancel?.();
+    } catch {
+      // Authoring callbacks must not break the host.
+    }
+  }
+
+  resetForTests(): void {
+    this.request = null;
+    this.nextId = 1;
+    this.listeners.clear();
+  }
+
+  private emit(): void {
+    const state = this.getState();
+    for (const listener of this.listeners) {
+      try {
+        listener(state);
+      } catch {
+        // listeners are infrastructure
+      }
+    }
+  }
+}
+
+export const elementPickerController = new ElementPickerController();