@bugsession/react-native 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/index.js

@@ -3,31 +3,75 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BugSession = exports.safeUrl = exports.safeText = exports.SessionClock = exports.Collector = void 0;
+exports.BugSession = exports.safeUrl = exports.safeText = exports.Telemetry = exports.SessionClock = exports.Collector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
+const trigger_1 = require("./trigger");
 const core_1 = require("./core");
+const touches_1 = require("./touches");
 const capture_1 = require("./capture");
 var core_2 = require("./core");
 Object.defineProperty(exports, "Collector", { enumerable: true, get: function () { return core_2.Collector; } });
 Object.defineProperty(exports, "SessionClock", { enumerable: true, get: function () { return core_2.SessionClock; } });
+Object.defineProperty(exports, "Telemetry", { enumerable: true, get: function () { return core_2.Telemetry; } });
 Object.defineProperty(exports, "safeText", { enumerable: true, get: function () { return core_2.safeText; } });
 Object.defineProperty(exports, "safeUrl", { enumerable: true, get: function () { return core_2.safeUrl; } });
 const globals = globalThis;
 let options;
 let collector = null;
+const telemetry = new core_1.Telemetry();
+let installed = false;
+let preRecordEvents = [];
+const MAX_POST_RECORD_SECONDS = 30;
 let session = null;
 let state = 'idle';
-let restore = null;
 let currentScreen = 'Home';
 let rawFetch;
-let triggerPosition = null;
-const triggerSize = 58;
-function clampTriggerPosition(point, width, height) {
+// Status shown by the trigger's indicator; also reflects start()/stop() called directly by the app.
+let phase = { kind: 'idle' };
+let phaseTimer;
+const phaseListeners = new Set();
+function setPhase(next) {
+    phase = next;
+    clearTimeout(phaseTimer);
+    if (next.kind === 'sent' || next.kind === 'failed')
+        phaseTimer = setTimeout(() => setPhase({ kind: 'idle' }), next.kind === 'sent' ? 3000 : 6000);
+    phaseListeners.forEach(listener => listener());
+}
+function compact(values) {
+    return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== undefined && value !== null && value !== ''));
+}
+/**
+ * App and device facts for the recording's metadata. Native values (bundle id, hardware
+ * model) come from the capture module when available; values passed to configure() win.
+ */
+async function recordingContext() {
+    const constants = (react_native_1.Platform.constants ?? {});
+    const rn = constants.reactNativeVersion;
+    const screen = react_native_1.Dimensions.get('screen');
+    let locale;
+    let timeZone;
+    try {
+        ({ locale, timeZone } = Intl.DateTimeFormat().resolvedOptions());
+    }
+    catch { /* Intl unavailable */ }
+    const device = {
+        platform: react_native_1.Platform.OS,
+        osVersion: react_native_1.Platform.OS === 'android' ? constants.Release : String(react_native_1.Platform.Version),
+        screen: { width: Math.round(screen.width), height: Math.round(screen.height), scale: screen.scale },
+        locale, timeZone,
+        ...(react_native_1.Platform.OS === 'android' ? { model: constants.Model, manufacturer: constants.Manufacturer } : { idiom: constants.interfaceIdiom }),
+    };
+    const application = {
+        reactNative: rn ? `${rn.major}.${rn.minor}.${rn.patch}` : undefined,
+        jsEngine: globals.HermesInternal ? 'hermes' : 'jsc',
+        buildType: __DEV__ ? 'development' : 'release',
+    };
+    const native = await options.capture?.appContext?.().catch(() => null) ?? null;
     return {
-        left: Math.max(0, Math.min(point.left, Math.max(0, width - triggerSize))),
-        top: Math.max(0, Math.min(point.top, Math.max(0, height - triggerSize))),
+        device: compact({ ...device, ...native?.device, ...options.device }),
+        application: compact({ ...application, ...native?.application, ...options.application }),
     };
 }
 function authHeaders() {
@@ -54,42 +98,91 @@ async function request(path, data) {
         throw new Error(`Recorder ${response.status}: ${await response.text()}`);
     return response.json();
 }
-function install(c) {
-    const originalFetch = globalThis.fetch;
-    const wrappedFetch = (0, core_1.instrumentFetch)(rawFetch, c);
-    globalThis.fetch = wrappedFetch;
-    const originals = { log: console.log, warn: console.warn, error: console.error };
-    for (const level of ['log', 'warn', 'error']) {
+// Installed once at configure() for the app's lifetime, so events from before a
+// recording starts can be attached to it (see Telemetry).
+function install() {
+    installed = true;
+    // The recorder itself, and in development Metro's own symbolication and log requests.
+    (0, core_1.ignoreRequests)(url => (!!options && url.startsWith(options.recorderUrl)) || (__DEV__ && /\/(symbolicate|logs)(\?|$)/.test(url)));
+    globalThis.fetch = (0, core_1.instrumentFetch)(rawFetch, telemetry);
+    (0, core_1.instrumentXhr)(globalThis.XMLHttpRequest, telemetry);
+    for (const level of ['log', 'info', 'debug', 'warn', 'error']) {
+        const original = console[level];
         console[level] = (...args) => {
-            c.add(level === 'error' ? 'error' : 'log', { level, message: args.map(core_1.safeText).join(' '), source: 'console', stack: args.find(a => a instanceof Error)?.stack ? (0, core_1.safeText)(args.find(a => a instanceof Error).stack) : undefined });
-            originals[level](...args);
+            if (telemetry.active && !(level === 'error' && repeatsCapturedError(args))) {
+                const error = args.find((a) => a instanceof Error);
+                telemetry.add(level === 'error' ? 'error' : 'log', { level, message: args.map(core_1.safeText).join(' '), source: 'console', stack: error?.stack ? (0, core_1.safeText)(error.stack) : undefined, screen: currentScreen });
+            }
+            original(...args);
         };
     }
     const utils = globals.ErrorUtils;
     const handler = utils?.getGlobalHandler();
-    const onError = (error, fatal) => {
-        captureError(error, fatal ? 'fatal' : 'uncaught');
-        handler?.(error, fatal);
-    };
     if (utils && handler)
-        utils.setGlobalHandler(onError);
-    return () => {
-        if (globalThis.fetch === wrappedFetch)
-            globalThis.fetch = originalFetch;
-        for (const level of ['log', 'warn', 'error'])
-            console[level] = originals[level];
-        if (utils?.getGlobalHandler() === onError && handler)
-            utils.setGlobalHandler(handler);
-    };
+        utils.setGlobalHandler((error, fatal) => {
+            captureError(error, fatal ? 'fatal' : 'uncaught');
+            handler(error, fatal);
+        });
+    // React Native only tracks unhandled rejections in development, and reports them
+    // through ExceptionsManager rather than the global handler. Track them in every
+    // build, and keep React Native's development behavior (LogBox) by forwarding.
+    globals.HermesInternal?.enablePromiseRejectionTracker?.({
+        allRejections: true,
+        onUnhandled: (id, rejection) => {
+            captureError(rejection instanceof Error ? rejection : new Error(rejectionMessage(rejection)), 'unhandled-rejection');
+            if (__DEV__)
+                handler?.(new Error(`Uncaught (in promise, id: ${id}): "${rejectionMessage(rejection)}"`), false);
+        },
+        onHandled: id => {
+            if (__DEV__)
+                console.warn(`Promise rejection handled (id: ${id})`);
+        },
+    });
+}
+function rejectionMessage(rejection) {
+    if (rejection instanceof Error)
+        return rejection.toString();
+    if (typeof rejection === 'string')
+        return rejection;
+    try {
+        return JSON.stringify(rejection) ?? String(rejection);
+    }
+    catch {
+        return String(rejection);
+    }
+}
+// React Native also prints captured errors (such as unhandled rejections in development)
+// through console.error; those repeats are skipped for a moment after capture.
+const recentErrors = [];
+function repeatsCapturedError(args) {
+    const now = Date.now();
+    while (recentErrors.length && now - recentErrors[0].at > 2000)
+        recentErrors.shift();
+    if (!recentErrors.length)
+        return false;
+    const printed = args.map(a => a instanceof Error ? a.message : typeof a === 'string' ? a : '').join(' ');
+    return recentErrors.some(e => e.message.length > 8 && printed.includes(e.message));
 }
 function captureError(error, source = 'boundary') {
-    collector?.add('error', { source, message: (0, core_1.safeText)(error), stack: error instanceof Error ? (0, core_1.safeText)(error.stack ?? '') : undefined, screen: currentScreen });
+    if (!telemetry.active)
+        return;
+    const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+    if (message && repeatsCapturedError([message]))
+        return;
+    if (message)
+        recentErrors.push({ message: message.slice(0, 200), at: Date.now() });
+    telemetry.add('error', { source, message: (0, core_1.safeText)(error), stack: error instanceof Error ? (0, core_1.safeText)(error.stack ?? '') : undefined, screen: currentScreen });
 }
 exports.BugSession = {
     configure(config) {
         if (state !== 'idle')
             throw new Error('Cannot configure an active BugSession');
         options = { ...config, recorderUrl: config.recorderUrl.replace(/\/$/, '') };
+        telemetry.configure((config.preRecordSeconds ?? 60) * 1000);
+        if (!installed) {
+            rawFetch = globalThis.fetch.bind(globalThis);
+            install();
+        }
     },
     get status() { return state; },
     async start() {
@@ -104,7 +197,7 @@ exports.BugSession = {
         if (state !== 'idle')
             throw new Error(`BugSession is ${state}`);
         state = 'starting';
-        rawFetch = globalThis.fetch.bind(globalThis);
+        setPhase({ kind: 'starting' });
         let createdId = null;
         let audioStarted = false;
         const isIOS = react_native_1.Platform.OS === 'ios';
@@ -119,7 +212,8 @@ exports.BugSession = {
             const best = await calibrate(clock, async () => (await request('/clock')).monoMs);
             collector = new core_1.Collector(clock);
             const captureBackend = isIOS ? 'replaykit' : useNativeCapture ? 'mediaprojection' : 'adb';
-            const result = await request('/sessions/start', { device: options.device, application: options.application, captureBackend, startedAt: new Date(Date.now() - clock.now()).toISOString() });
+            const context = await recordingContext();
+            const result = await request('/sessions/start', { device: context.device, application: context.application, captureBackend, startedAt: new Date(Date.now() - clock.now()).toISOString() });
             createdId = result.id;
             const nativeStart = useNativeCapture ? await options.capture.start() : undefined;
             const audioStartMs = clock.now();
@@ -136,8 +230,9 @@ exports.BugSession = {
                 uncertaintyMs: best.rtt / 2, captureBackend,
                 ...(nativeClock ? { nativeOffsetMs: nativeClock.offset, nativeUncertaintyMs: nativeClock.rtt / 2 } : {}),
             };
-            restore = install(collector);
+            preRecordEvents = telemetry.begin(collector);
             state = 'recording';
+            setPhase({ kind: 'recording', startedAt: Date.now() });
             collector.add('navigation', { from: null, to: currentScreen });
             return session.id;
         }
@@ -148,9 +243,12 @@ exports.BugSession = {
                 await options.audio.stop().catch(() => null);
             if (createdId)
                 await request(`/sessions/${createdId}/abort`, {}).catch(() => { });
+            telemetry.end();
+            preRecordEvents = [];
             collector = null;
             session = null;
             state = 'idle';
+            setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) });
             throw error;
         }
     },
@@ -158,11 +256,24 @@ exports.BugSession = {
         if (state !== 'recording' || !session || !collector)
             throw new Error('No recording is active');
         state = 'stopping';
+        setPhase({ kind: 'uploading' });
         const c = collector;
         const active = session;
         c.add('session-stop', {});
-        restore?.();
-        restore = null;
+        const stoppedAtMs = c.clock.now();
+        const postRecordMs = Math.max(0, Math.min(options.postRecordSeconds ?? 5, MAX_POST_RECORD_SECONDS)) * 1000;
+        // Sent separately from `events` so recorders that predate pre/post-record support ignore them.
+        const before = preRecordEvents;
+        preRecordEvents = [];
+        // App events keep flowing to this session while media uploads; anything after Stop is
+        // reported separately as post-recording evidence.
+        const split = () => {
+            telemetry.end();
+            return {
+                events: c.events.filter(e => e.timestampMs <= stoppedAtMs),
+                after: c.events.filter(e => e.timestampMs > stoppedAtMs && e.timestampMs <= stoppedAtMs + postRecordMs).slice(0, 1000).map(e => ({ ...e, postRecording: true })),
+            };
+        };
         try {
             let media;
             if (active.captureBackend === 'replaykit') {
@@ -192,33 +303,76 @@ exports.BugSession = {
                 await options.audio.upload(`${options.recorderUrl}/sessions/${active.id}/audio`, uri, authHeaders());
                 media = { ...active, audioEndMs };
             }
-            return await request(`/sessions/${active.id}/stop`, {
-                durationMs: c.clock.now(), events: c.events, droppedEvents: c.dropped,
+            const remainingMs = stoppedAtMs + postRecordMs - c.clock.now();
+            if (remainingMs > 0)
+                await new Promise(resolve => setTimeout(resolve, remainingMs));
+            const { events, after } = split();
+            const result = await request(`/sessions/${active.id}/stop`, {
+                durationMs: stoppedAtMs, events, droppedEvents: c.dropped, preRecordEvents: before,
+                ...(after.length ? { postRecordEvents: after } : {}),
                 media,
             });
+            setPhase({ kind: 'sent' });
+            return result;
         }
         catch (error) {
             if (active.captureBackend !== 'adb')
                 await options.capture.cancel().catch(() => { });
             // Release the device recorder, but preserve partial files for recovery.
-            await request(`/sessions/${active.id}/abort`, { reason: (0, core_1.safeText)(error), events: c.events, media: active, durationMs: c.clock.now() }).catch(() => { });
+            const { events, after } = split();
+            await request(`/sessions/${active.id}/abort`, { reason: (0, core_1.safeText)(error), events, preRecordEvents: before, ...(after.length ? { postRecordEvents: after } : {}), media: active, durationMs: stoppedAtMs }).catch(() => { });
+            setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) });
             throw error;
         }
         finally {
+            telemetry.end();
             collector = null;
             session = null;
             state = 'idle';
         }
     },
     trackAction(action) {
-        collector?.add('action', { target: (0, core_1.safeText)(action.name), screen: (0, core_1.safeText)(action.screen ?? currentScreen) });
+        if (telemetry.active)
+            telemetry.add('action', { target: (0, core_1.safeText)(action.name), screen: (0, core_1.safeText)(action.screen ?? currentScreen) });
     },
     trackNavigation(screen) {
-        if (currentScreen !== screen)
-            collector?.add('navigation', { from: currentScreen, to: screen });
+        if (currentScreen !== screen && telemetry.active)
+            telemetry.add('navigation', { from: currentScreen, to: screen });
         currentScreen = screen;
     },
     captureError,
+    /**
+     * Wrap the app once (inside the navigator's container, around your screens) to record
+     * every tap automatically: position, current screen and the element's label when available.
+     */
+    Capture: (0, touches_1.createCapture)(() => telemetry.active ? tap => {
+        telemetry.add('action', { target: (0, core_1.safeText)(tap.label ?? `Tap at (${tap.x}, ${tap.y})`), screen: currentScreen, x: tap.x, y: tap.y, auto: true });
+    } : null),
+    Trigger: (0, trigger_1.createTrigger)({
+        getPhase: () => phase,
+        subscribe(listener) { phaseListeners.add(listener); return () => { phaseListeners.delete(listener); }; },
+        async toggle() {
+            if (state === 'recording')
+                await exports.BugSession.stop();
+            else if (state === 'idle')
+                await exports.BugSession.start();
+        },
+        fail(error) { if (phase.kind !== 'failed')
+            setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) }); },
+        onAudioLevel: listener => options?.capture?.onAudioLevel?.(listener) ?? null,
+        safeAreaInsets: async () => options?.capture?.safeAreaInsets ? options.capture.safeAreaInsets() : null,
+        annotate(annotation) { if (state === 'recording')
+            telemetry.add('annotation', { ...annotation, screen: currentScreen }); },
+    }),
+    /**
+     * Expo Router error boundary that reports render errors (which never reach the
+     * global error handler). In a route or layout file:
+     * `export const ErrorBoundary = BugSession.ErrorBoundary;`
+     */
+    ErrorBoundary({ error, retry }) {
+        react_1.default.useEffect(() => { captureError(error, 'render'); }, [error]);
+        return (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.boundary, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.boundaryTitle, children: "Something went wrong" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.boundaryMessage, children: error.message }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => { void retry(); }, style: styles.boundaryRetry, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.boundaryRetryText, children: "Try again" }) })] });
+    },
     /** Use with NavigationContainer.onStateChange for non-Expo React Navigation apps. */
     navigationListener(ref) {
         return () => { const route = ref.getCurrentRoute(); if (route)
@@ -227,79 +381,11 @@ exports.BugSession = {
     Touchable({ name, screen, onPress, ...props }) {
         return (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, onPress: e => { exports.BugSession.trackAction({ name, screen }); onPress?.(e); } });
     },
-    Trigger({ position = 'bottom-right', offset = 24, draggable = true, style, accessibilityLabel, children, onError }) {
-        const { width, height } = (0, react_native_1.useWindowDimensions)();
-        const [point, setPoint] = react_1.default.useState(() => triggerPosition
-            ? clampTriggerPosition(triggerPosition, width, height)
-            : clampTriggerPosition({
-                left: position.includes('right') ? width - triggerSize - offset : offset,
-                top: position.includes('bottom') ? height - triggerSize - offset : offset,
-            }, width, height));
-        const pointRef = react_1.default.useRef(point);
-        pointRef.current = point;
-        const drag = react_1.default.useRef(null);
-        if (!drag.current)
-            drag.current = new react_native_1.Animated.ValueXY();
-        const dragStart = react_1.default.useRef(point);
-        react_1.default.useEffect(() => {
-            const next = clampTriggerPosition(pointRef.current, width, height);
-            pointRef.current = next;
-            setPoint(next);
-            if (triggerPosition)
-                triggerPosition = next;
-            drag.current?.setValue({ x: 0, y: 0 });
-        }, [width, height]);
-        const responder = react_1.default.useMemo(() => react_native_1.PanResponder.create({
-            onStartShouldSetPanResponder: () => false,
-            onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
-            onPanResponderGrant: () => { dragStart.current = pointRef.current; },
-            onPanResponderMove: (_, gesture) => {
-                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
-                drag.current?.setValue({ x: next.left - dragStart.current.left, y: next.top - dragStart.current.top });
-            },
-            onPanResponderRelease: (_, gesture) => {
-                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
-                triggerPosition = next;
-                pointRef.current = next;
-                setPoint(next);
-                drag.current?.setValue({ x: 0, y: 0 });
-            },
-            onPanResponderTerminate: (_, gesture) => {
-                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
-                triggerPosition = next;
-                pointRef.current = next;
-                setPoint(next);
-                drag.current?.setValue({ x: 0, y: 0 });
-            },
-        }), [draggable, width, height]);
-        const [busy, setBusy] = react_1.default.useState(false);
-        const recording = state === 'recording';
-        const toggle = async () => {
-            if (busy)
-                return;
-            setBusy(true);
-            try {
-                if (state === 'recording')
-                    await exports.BugSession.stop();
-                else
-                    await exports.BugSession.start();
-            }
-            catch (error) {
-                onError?.(error);
-            }
-            finally {
-                setBusy(false);
-            }
-        };
-        return (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: styles.triggerLayer, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...(draggable ? responder.panHandlers : {}), style: [styles.triggerPosition, { left: point.left, top: point.top, transform: drag.current?.getTranslateTransform() }], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), accessibilityHint: draggable ? 'Drag to move the BugSession button' : undefined, accessibilityState: { busy, selected: recording }, disabled: busy, onPress: () => { void toggle(); }, style: [styles.trigger, recording && styles.triggerRecording, style], children: children ?? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.triggerMark, children: "b" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.triggerDot, recording && styles.triggerDotRecording] })] }) }) }) });
-    },
 };
 const styles = react_native_1.StyleSheet.create({
-    triggerLayer: { ...react_native_1.StyleSheet.absoluteFill, zIndex: 9999 },
-    triggerPosition: { position: 'absolute' },
-    trigger: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#173B34', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#000', shadowOpacity: 0.24, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
-    triggerRecording: { backgroundColor: '#B9382F' },
-    triggerMark: { color: '#F4F4EC', fontSize: 31, fontWeight: '800', lineHeight: 38 },
-    triggerDot: { position: 'absolute', right: 9, bottom: 9, width: 10, height: 10, borderRadius: 5, backgroundColor: '#D8F36A', borderWidth: 1, borderColor: '#173B34' },
-    triggerDotRecording: { backgroundColor: '#FFF', borderColor: '#B9382F' },
+    boundary: { flex: 1, justifyContent: 'center', padding: 24, gap: 12, backgroundColor: '#FFFFFF' },
+    boundaryTitle: { fontSize: 22, fontWeight: '700', color: '#111111' },
+    boundaryMessage: { fontSize: 15, color: '#555555' },
+    boundaryRetry: { alignSelf: 'flex-start', paddingVertical: 10, paddingHorizontal: 16, borderRadius: 8, backgroundColor: '#173B34' },
+    boundaryRetryText: { color: '#F4F4EC', fontWeight: '700' },
 });

package/dist/tap-label.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Best-effort name for the touched element: walks up from the touched host component
+ * reading accessibility labels, test IDs, titles and visible text. Never reads input
+ * values. React internals differ between renderers, so every failure yields undefined.
+ */
+export declare function tapLabel(event: unknown): string | undefined;

package/dist/tap-label.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tapLabel = tapLabel;
+const LABEL_DEPTH = 12;
+const PRESSABLE_DEPTH = 4;
+const DESCENDANT_BUDGET = 40;
+function text(value) {
+    if (typeof value === 'string' || typeof value === 'number')
+        return String(value).trim() || undefined;
+    if (Array.isArray(value)) {
+        const joined = value.map(text).filter(Boolean).join(' ');
+        return joined || undefined;
+    }
+    return undefined;
+}
+/**
+ * Best-effort name for the touched element: walks up from the touched host component
+ * reading accessibility labels, test IDs, titles and visible text. Never reads input
+ * values. React internals differ between renderers, so every failure yields undefined.
+ */
+function tapLabel(event) {
+    try {
+        const native = event;
+        const target = native?._targetInst ?? native?.target?.__internalInstanceHandle;
+        let fiber = target;
+        for (let depth = 0; fiber && depth < LABEL_DEPTH; depth++, fiber = fiber.return) {
+            const label = ownLabel(fiber.memoizedProps);
+            if (label)
+                return label.slice(0, 80);
+            // A tap on a button's padding targets the button itself; its text is inside it.
+            if (depth < PRESSABLE_DEPTH && pressable(fiber.memoizedProps)) {
+                const inner = descendantText(fiber.child);
+                if (inner)
+                    return inner.slice(0, 80);
+            }
+        }
+    }
+    catch { /* renderer internals unavailable */ }
+    return undefined;
+}
+function ownLabel(props) {
+    if (!props || typeof props !== 'object')
+        return undefined;
+    return text(props.accessibilityLabel) ?? text(props['aria-label']) ?? text(props.title)
+        ?? (typeof props.placeholder === 'string' ? props.placeholder : undefined)
+        ?? (props.editable === undefined && props.value === undefined ? text(props.children) : undefined)
+        ?? text(props.testID);
+}
+function pressable(props) {
+    if (!props || typeof props !== 'object')
+        return false;
+    const role = props.accessibilityRole ?? props.role;
+    return typeof props.onPress === 'function' || typeof props.onClick === 'function' || role === 'button' || role === 'link'
+        || typeof props.onResponderRelease === 'function';
+}
+/** First readable text inside a pressable, breadth-first and bounded; never input values. */
+function descendantText(first) {
+    const queue = [];
+    for (let f = first; f; f = f.sibling)
+        queue.push(f);
+    for (let visited = 0; queue.length && visited < DESCENDANT_BUDGET; visited++) {
+        const fiber = queue.shift();
+        const props = fiber.memoizedProps;
+        if (props && typeof props === 'object' && props.editable === undefined && props.value === undefined) {
+            const label = text(props.accessibilityLabel) ?? text(props.children);
+            if (label)
+                return label;
+        }
+        for (let f = fiber.child; f; f = f.sibling)
+            queue.push(f);
+    }
+    return undefined;
+}

package/dist/touches.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type ViewProps } from 'react-native';
+export type TapSink = (tap: {
+    label?: string;
+    x: number;
+    y: number;
+}) => void;
+/**
+ * Wraps the app once and records every tap (position, screen and the element's label
+ * when one can be read), so testers' steps appear in the timeline without per-button code.
+ * It only observes touches; it never becomes the responder or blocks gestures.
+ */
+export declare function createCapture(sink: () => TapSink | null): ({ children, style, ...props }: ViewProps & {
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/touches.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCapture = createCapture;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const tap_label_1 = require("./tap-label");
+const TAP_MAX_MOVE = 10;
+const TAP_MAX_MS = 800;
+/**
+ * Wraps the app once and records every tap (position, screen and the element's label
+ * when one can be read), so testers' steps appear in the timeline without per-button code.
+ * It only observes touches; it never becomes the responder or blocks gestures.
+ */
+function createCapture(sink) {
+    return function Capture({ children, style, ...props }) {
+        const start = (0, react_1.useRef)(null);
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, style: [styles.fill, style], onTouchStartCapture: e => {
+                props.onTouchStartCapture?.(e);
+                start.current = e.nativeEvent.touches.length > 1 ? null : { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY, at: Date.now() };
+            }, onTouchEndCapture: e => {
+                props.onTouchEndCapture?.(e);
+                const began = start.current;
+                start.current = null;
+                const add = sink();
+                if (!began || !add)
+                    return;
+                const { pageX, pageY } = e.nativeEvent;
+                if (Math.hypot(pageX - began.x, pageY - began.y) > TAP_MAX_MOVE || Date.now() - began.at > TAP_MAX_MS)
+                    return;
+                add({ label: (0, tap_label_1.tapLabel)(e), x: Math.round(pageX), y: Math.round(pageY) });
+            }, children: children });
+    };
+}
+const styles = react_native_1.StyleSheet.create({ fill: { flex: 1 } });

package/dist/trigger.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type IndicatorPhase = {
+    kind: 'idle';
+} | {
+    kind: 'starting';
+} | {
+    kind: 'recording';
+    startedAt: number;
+} | {
+    kind: 'uploading';
+} | {
+    kind: 'sent';
+} | {
+    kind: 'failed';
+    message: string;
+};
+export type Annotation = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    screenWidth: number;
+    screenHeight: number;
+    points: number;
+};
+/** What the trigger needs from the SDK; injected to avoid a circular import. */
+export type TriggerController = {
+    getPhase(): IndicatorPhase;
+    subscribe(listener: () => void): () => void;
+    toggle(): Promise<void>;
+    fail(error: unknown): void;
+    annotate(annotation: Annotation): void;
+    onAudioLevel(listener: (level: number) => void): (() => void) | null;
+    safeAreaInsets(): Promise<{
+        top: number;
+        bottom: number;
+    } | null>;
+};
+export type BugSessionTriggerProps = {
+    /** Initial screen edge (left/right) and half (top/bottom) of the side tab. */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Initial distance in points between the tab and the top or bottom safe area. */
+    offset?: number;
+    /** Drag the tab along either edge; it snaps to the nearer side. */
+    draggable?: boolean;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    /** Replaces the idle tab's record mark. */
+    children?: React.ReactNode;
+    onError?: (error: unknown) => void;
+    /** Stops automatically so the upload stays under the recorder's limit. Defaults to 150. */
+    maxDurationSeconds?: number;
+};
+export declare function createTrigger(controller: TriggerController): ({ position, offset, draggable, style, accessibilityLabel, children, onError, maxDurationSeconds }: BugSessionTriggerProps) => React.JSX.Element;