@merittdev/horus-lens 0.5.1 → 0.6.0

package/dist/react-native.js

@@ -0,0 +1,2105 @@
+import {
+  DEFAULT_ENDPOINT,
+  InitiateReportResponseSchema,
+  RingBuffer,
+  SDK_VERSION,
+  Transport,
+  installConsole
+} from "./chunk-XGZ7BZTS.js";
+
+// ../react-native/dist/index.js
+import { AppState as AppState2 } from "react-native";
+import {
+  Appearance,
+  Dimensions,
+  I18nManager,
+  PixelRatio,
+  Platform
+} from "react-native";
+import { AppState, Platform as Platform2 } from "react-native";
+import { releaseCapture } from "react-native-view-shot";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import {
+  ActivityIndicator as ActivityIndicator2,
+  I18nManager as I18nManager2,
+  PanResponder as PanResponder2,
+  Pressable as Pressable3,
+  Text as Text3,
+  View as View3,
+  useWindowDimensions as useWindowDimensions2
+} from "react-native";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import {
+  ActivityIndicator,
+  Image as Image2,
+  KeyboardAvoidingView,
+  Modal,
+  Platform as Platform3,
+  Pressable as Pressable2,
+  ScrollView as ScrollView2,
+  Share,
+  StyleSheet as StyleSheet2,
+  Text as Text2,
+  TextInput as TextInput2,
+  View as View2
+} from "react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Image,
+  PanResponder,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  useWindowDimensions
+} from "react-native";
+import Svg, {
+  Circle,
+  G,
+  Ellipse,
+  Line,
+  Path,
+  Polygon,
+  Rect,
+  Text as SvgText
+} from "react-native-svg";
+import { captureRef } from "react-native-view-shot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import Svg2, { Circle as Circle2, Path as Path2 } from "react-native-svg";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function collectNativeEnv(origin, route, language) {
+  const viewport = Dimensions.get("window");
+  const screen = Dimensions.get("screen");
+  const locale = Intl.DateTimeFormat().resolvedOptions();
+  const theme = Appearance.getColorScheme();
+  return {
+    url: `${origin}${route}`,
+    route,
+    userAgent: `ReactNative (${Platform.OS} ${Platform.Version})`,
+    os: `${Platform.OS} ${Platform.Version}`,
+    device: "mobile",
+    viewport: { width: viewport.width, height: viewport.height },
+    screen: { width: screen.width, height: screen.height },
+    devicePixelRatio: PixelRatio.get(),
+    language: language ?? locale.locale,
+    timezone: locale.timeZone,
+    ...theme === "light" || theme === "dark" ? { theme } : {},
+    capturedAt: Date.now()
+  };
+}
+function nativeDetails() {
+  return {
+    framework: "react-native",
+    platform: Platform.OS,
+    platformVersion: String(Platform.Version),
+    rtl: I18nManager.isRTL
+  };
+}
+function sanitizeUrl(value) {
+  const withoutQuery = value.split(/[?#]/, 1)[0] ?? "";
+  return withoutQuery.replace(/^((?:[a-z][a-z\d+.-]*:)?\/\/)[^/]*@/i, "$1");
+}
+function installFetch(buffer) {
+  const original = globalThis.fetch;
+  const dispatch = original.bind(globalThis);
+  let active = true;
+  const wrapped = async (input, init) => {
+    let url = "";
+    let method = "GET";
+    try {
+      url = sanitizeUrl(
+        typeof input === "string" ? input : "url" in input ? input.url : input.href
+      );
+      method = (init?.method ?? (typeof input === "object" && "method" in input ? input.method : "GET")).toUpperCase();
+    } catch {
+    }
+    const startedAt = Date.now();
+    const entry = {
+      method,
+      url,
+      startedAt,
+      requestType: "fetch",
+      status: null,
+      ok: null,
+      durationMs: null
+    };
+    try {
+      const response = await dispatch(input, init);
+      entry.status = response.status;
+      entry.ok = response.ok;
+      return response;
+    } catch (error) {
+      entry.error = "Network request failed";
+      throw error;
+    } finally {
+      entry.durationMs = Math.max(0, Date.now() - startedAt);
+      if (active) buffer.push(entry);
+    }
+  };
+  globalThis.fetch = wrapped;
+  return () => {
+    active = false;
+    if (globalThis.fetch === wrapped) globalThis.fetch = original;
+  };
+}
+function imageUri(uri) {
+  return uri.startsWith("/") ? `file://${uri}` : uri;
+}
+function releaseImage(uri) {
+  if (!uri.startsWith("file:")) return;
+  releaseCapture(Platform2.OS === "ios" ? uri.replace(/^file:\/\//, "") : uri);
+}
+function validateImage(image, dataOnly = false) {
+  if (!/^data:image\/(?:png|jpeg);base64,[A-Za-z0-9+/=]+$/.test(image.uri) && (dataOnly || !/^file:\/\/\/[^?#]+\.(?:png|jpe?g)$/i.test(image.uri)) || image.uri.length > 8e6 || !Number.isFinite(image.width) || !Number.isFinite(image.height) || image.width <= 0 || image.height <= 0) {
+    throw new Error("Invalid captured image");
+  }
+}
+var NativeRecording = class {
+  constructor(capture, route) {
+    this.capture = capture;
+    this.route = route;
+  }
+  capture;
+  route;
+  frames = [];
+  timer;
+  pending = null;
+  generation = 0;
+  active = false;
+  startedAt = 0;
+  bytes = 0;
+  failure;
+  snapshot() {
+    return {
+      active: this.active,
+      frameCount: this.frames.length,
+      durationMs: this.active ? Date.now() - this.startedAt : this.frames.length > 1 ? this.frames[this.frames.length - 1].timestamp - this.frames[0].timestamp : 0,
+      error: this.failure
+    };
+  }
+  start() {
+    this.discard();
+    this.active = true;
+    this.startedAt = Date.now();
+    void this.tick();
+    this.timer = setInterval(() => {
+      void this.tick();
+    }, 1e3);
+  }
+  halt() {
+    this.active = false;
+    if (this.timer) clearInterval(this.timer);
+    this.timer = void 0;
+  }
+  async tick() {
+    if (!this.active) return;
+    if (Date.now() - this.startedAt >= 3e4 || this.frames.length >= 30) {
+      this.halt();
+      this.generation++;
+      return;
+    }
+    if (this.pending) return;
+    if (AppState.currentState !== "active") {
+      this.halt();
+      return;
+    }
+    const generation = this.generation;
+    const timestamp = Date.now();
+    const route = this.route();
+    const pending = (async () => {
+      try {
+        const image = await this.capture("replay");
+        if (generation !== this.generation) return;
+        if (!image || route !== this.route() || AppState.currentState !== "active") {
+          this.halt();
+          return;
+        }
+        validateImage(image, true);
+        if (this.bytes + image.uri.length > 6e6) {
+          this.halt();
+          return;
+        }
+        this.frames.push({ ...image, timestamp, route });
+        this.bytes += image.uri.length;
+      } catch {
+        if (generation !== this.generation) return;
+        this.failure = "Could not capture the screen recording.";
+        this.halt();
+      }
+    })();
+    this.pending = pending;
+    await pending;
+    if (this.pending === pending) this.pending = null;
+  }
+  async stop() {
+    this.halt();
+    if (this.pending) {
+      let timeout;
+      await Promise.race([
+        this.pending,
+        new Promise((resolve) => {
+          timeout = setTimeout(() => {
+            this.generation++;
+            this.failure = "Screen capture did not finish in time.";
+            resolve();
+          }, 5e3);
+        })
+      ]);
+      if (timeout) clearTimeout(timeout);
+    }
+    return this.frames.map((frame) => ({ ...frame }));
+  }
+  discard() {
+    this.halt();
+    this.generation++;
+    this.frames = [];
+    this.bytes = 0;
+    this.failure = void 0;
+  }
+};
+function encodeVisualReplay(frames, origin) {
+  if (!frames.length) return [];
+  for (const frame of frames) validateImage(frame, true);
+  const first = frames[0];
+  const element = (id, tagName, attributes, childNodes = []) => ({ id, type: 2, tagName, attributes, childNodes });
+  const node = {
+    type: 0,
+    id: 1,
+    childNodes: [
+      { type: 1, id: 2, name: "html", publicId: "", systemId: "" },
+      element(3, "html", {}, [
+        element(4, "head", {}, [
+          element(5, "style", {}, [
+            {
+              type: 3,
+              id: 6,
+              textContent: "html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff}img{display:block;width:100%;height:100%;object-fit:contain}"
+            }
+          ])
+        ]),
+        element(7, "body", {}, [
+          element(8, "img", { src: first.uri, alt: "Native screen recording" })
+        ])
+      ])
+    ]
+  };
+  const events = [
+    {
+      type: 4,
+      timestamp: first.timestamp,
+      data: {
+        href: origin + first.route,
+        width: first.width,
+        height: first.height
+      }
+    },
+    {
+      type: 2,
+      timestamp: first.timestamp,
+      data: { node, initialOffset: { top: 0, left: 0 } }
+    }
+  ];
+  for (const frame of frames.slice(1)) {
+    events.push({
+      type: 3,
+      timestamp: frame.timestamp,
+      data: {
+        source: 0,
+        texts: [],
+        removes: [],
+        adds: [],
+        attributes: [{ id: 8, attributes: { src: frame.uri } }]
+      }
+    });
+  }
+  events.push({
+    type: 5,
+    timestamp: Math.max(
+      first.timestamp + 1e3,
+      frames[frames.length - 1].timestamp + 1e3
+    ),
+    data: { tag: "native-recording-end", payload: { frames: frames.length } }
+  });
+  return events;
+}
+var activeClient = null;
+var NativeLensClient = class {
+  constructor(config) {
+    this.config = config;
+    if (!config.accessId.startsWith("lai_"))
+      throw new Error("[lens] A public lai_ access id is required");
+    const origin = new URL(config.origin);
+    if (!["https:", "http:"].includes(origin.protocol) || !origin.host || origin.username || origin.password || origin.pathname !== "/" || origin.search || origin.hash) {
+      throw new Error(
+        "[lens] origin must be an HTTP(S) site origin without a path"
+      );
+    }
+    this.origin = origin.origin;
+    this.app = config.app ?? {};
+    this.rawFetch = globalThis.fetch.bind(globalThis);
+    if (config.captureScreen)
+      this.recording = new NativeRecording(
+        config.captureScreen,
+        () => this.route
+      );
+  }
+  config;
+  origin;
+  transport;
+  lifecycle = new AbortController();
+  logs = new RingBuffer(200);
+  requests = new RingBuffer(100);
+  errors = new RingBuffer(30);
+  breadcrumbs = new RingBuffer(30);
+  teardowns = [];
+  started = false;
+  submitting = false;
+  retryCapture;
+  route = "/";
+  language;
+  app;
+  recording;
+  rawFetch;
+  start() {
+    if (this.started) return;
+    if (activeClient)
+      throw new Error(
+        "[lens] Only one native Lens client can capture at a time"
+      );
+    this.lifecycle = new AbortController();
+    this.transport = new Transport({
+      accessId: this.config.accessId,
+      endpoint: (this.config.endpoint ?? DEFAULT_ENDPOINT).replace(/\/+$/, ""),
+      origin: this.origin,
+      fetch: this.rawFetch,
+      signal: this.lifecycle.signal,
+      requestTimeoutMs: 2e4
+    });
+    activeClient = this;
+    try {
+      if (this.config.captureConsole)
+        this.teardowns.push(installConsole(this.logs, this.errors));
+      if (this.config.captureNetwork !== false)
+        this.teardowns.push(installFetch(this.requests));
+      this.addBreadcrumb("app-state", AppState2.currentState ?? "unknown");
+      const subscription = AppState2.addEventListener(
+        "change",
+        (state) => this.addBreadcrumb("app-state", state)
+      );
+      this.teardowns.push(() => subscription.remove());
+      this.started = true;
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
+  }
+  stop() {
+    this.lifecycle.abort();
+    for (const teardown of this.teardowns.reverse()) teardown();
+    this.teardowns = [];
+    this.started = false;
+    if (activeClient === this) activeClient = null;
+    this.logs.clear();
+    this.requests.clear();
+    this.errors.clear();
+    this.breadcrumbs.clear();
+    this.recording?.discard();
+    this.retryCapture = void 0;
+  }
+  async captureScreen() {
+    if (!this.started || !this.config.captureScreen) return null;
+    const route = this.route;
+    const signal = this.lifecycle.signal;
+    let expired = false;
+    let timeout;
+    let abort = () => {
+    };
+    const operation = this.config.captureScreen("screenshot").then((captured) => {
+      const image2 = captured ? { ...captured, uri: imageUri(captured.uri) } : null;
+      if (expired || signal.aborted || route !== this.route) {
+        if (image2) releaseImage(image2.uri);
+        return null;
+      }
+      return image2;
+    });
+    let image;
+    try {
+      image = await Promise.race([
+        operation,
+        new Promise((_resolve, reject) => {
+          abort = () => reject(new Error("Capture session ended"));
+          signal.addEventListener("abort", abort);
+          if (signal.aborted) abort();
+          timeout = setTimeout(
+            () => reject(new Error("Screen capture timed out")),
+            5e3
+          );
+        })
+      ]);
+    } finally {
+      expired = true;
+      if (timeout) clearTimeout(timeout);
+      signal.removeEventListener("abort", abort);
+    }
+    if (signal.aborted || !this.started || activeClient !== this || route !== this.route)
+      return null;
+    if (image) validateImage(image);
+    return image;
+  }
+  startRecording() {
+    if (!this.started || this.submitting || !this.recording)
+      throw new Error("Screen recording is unavailable");
+    this.retryCapture = void 0;
+    this.recording.start();
+  }
+  async stopRecording() {
+    return this.recording?.stop() ?? [];
+  }
+  discardDraft() {
+    this.retryCapture = void 0;
+    this.recording?.discard();
+  }
+  discardRecording() {
+    this.recording?.discard();
+    if (this.retryCapture) this.retryCapture.replay = [];
+  }
+  getRecording() {
+    const state = this.recording?.snapshot() ?? {
+      active: false,
+      frameCount: 0,
+      durationMs: 0,
+      error: void 0
+    };
+    const frames = this.retryCapture?.replay;
+    return frames?.length && !state.active && !state.frameCount ? {
+      ...state,
+      frameCount: frames.length,
+      durationMs: frames[frames.length - 1].timestamp - frames[0].timestamp
+    } : state;
+  }
+  getContext() {
+    return collectNativeEnv(this.origin, this.route, this.language);
+  }
+  setRoute(route, language) {
+    const pathname = route.split(/[?#]/, 1)[0] ?? "/";
+    const next = pathname.startsWith("/") && !pathname.startsWith("//") ? pathname : "/";
+    if (next !== this.route) this.addBreadcrumb("navigation", next);
+    this.route = next;
+    this.language = language;
+  }
+  setApp(app) {
+    this.app = {
+      ...this.app,
+      ...app,
+      extra: { ...this.app.extra, ...app.extra }
+    };
+  }
+  captureError(error, componentStack) {
+    if (!this.started) return;
+    this.errors.push({
+      message: error.message.slice(0, 2e3),
+      stack: [error.stack, componentStack].filter(Boolean).join("\n").slice(0, 8e3),
+      source: "react-boundary",
+      timestamp: Date.now()
+    });
+  }
+  addBreadcrumb(type, value) {
+    this.breadcrumbs.push({
+      type,
+      value: value.slice(0, 300),
+      timestamp: Date.now()
+    });
+  }
+  async submitReport(input = {}) {
+    if (!this.started) throw new Error("[lens] Capture is disabled");
+    if (this.submitting)
+      throw new Error("[lens] A report is already being submitted");
+    this.submitting = true;
+    const transport = this.transport;
+    const signal = this.lifecycle.signal;
+    try {
+      const include = input.include ?? {};
+      const frames = await this.stopRecording();
+      const redacted = input.annotations?.some(
+        (annotation) => annotation.kind === "blur"
+      );
+      let capture = {
+        console: include.console === false ? [] : this.logs.drain(),
+        network: include.network === false ? [] : this.requests.drain(),
+        screenshot: include.screenshot === false ? void 0 : input.screenshot ?? await this.captureScreen() ?? void 0,
+        replay: include.replay === false || redacted ? [] : frames,
+        metadata: {
+          comment: input.comment?.slice(0, 2e3),
+          annotations: input.annotations?.slice(0, 100) ?? [],
+          target: input.target,
+          env: collectNativeEnv(this.origin, this.route, this.language),
+          app: {
+            ...this.app,
+            extra: {
+              ...this.app.extra,
+              ...nativeDetails(),
+              breadcrumbs: this.breadcrumbs.drain(),
+              nativeReplay: {
+                format: "visual-frames",
+                frameCount: include.replay === false || redacted ? 0 : frames.length,
+                sampledFramesPerSecond: 1
+              }
+            }
+          },
+          errors: include.errors === false ? [] : this.errors.drain().map((entry) => ({
+            ...entry,
+            message: entry.message.slice(0, 2e3),
+            stack: entry.stack?.slice(0, 8e3)
+          })),
+          consoleTail: [],
+          networkTail: [],
+          trigger: input.trigger ?? "api",
+          sdk: {
+            name: "@merittdev/horus-lens/react-native",
+            version: SDK_VERSION
+          }
+        }
+      };
+      if (this.retryCapture) {
+        const saved = this.retryCapture;
+        capture = {
+          ...capture,
+          console: include.console === false ? [] : saved.console,
+          network: include.network === false ? [] : saved.network,
+          replay: include.replay === false || redacted ? [] : saved.replay,
+          screenshot: include.screenshot === false ? void 0 : input.screenshot ?? saved.screenshot,
+          metadata: {
+            ...saved.metadata,
+            comment: input.comment?.slice(0, 2e3),
+            annotations: input.annotations?.slice(0, 100) ?? saved.metadata.annotations,
+            target: input.target,
+            errors: include.errors === false ? [] : saved.metadata.errors
+          }
+        };
+      }
+      this.logs.clear();
+      this.requests.clear();
+      this.errors.clear();
+      this.breadcrumbs.clear();
+      this.recording?.discard();
+      try {
+        if (this.config.beforeSend) {
+          const redacted2 = this.config.beforeSend(capture);
+          if (!redacted2)
+            throw new Error("[lens] Report cancelled by beforeSend");
+          capture = redacted2;
+        }
+        if (signal.aborted) throw new Error("Capture session ended");
+      } catch (error) {
+        this.retryCapture = void 0;
+        throw error;
+      }
+      this.retryCapture = capture;
+      capture.metadata.consoleTail = capture.console.slice(-50);
+      capture.metadata.networkTail = capture.network.slice(-30);
+      if (capture.metadata.app?.extra)
+        capture.metadata.app.extra.nativeReplay = {
+          format: "visual-frames",
+          frameCount: capture.replay.length,
+          sampledFramesPerSecond: 1
+        };
+      const payloads = [
+        ...capture.console.length ? [{ kind: "console", entries: capture.console }] : [],
+        ...capture.network.length ? [{ kind: "network", entries: capture.network }] : []
+      ].map(({ kind, entries }) => ({
+        kind,
+        contentType: "application/json",
+        blob: new Blob([JSON.stringify(entries)], { type: "application/json" })
+      }));
+      if (capture.screenshot) {
+        validateImage(capture.screenshot);
+        const response = await this.rawFetch(capture.screenshot.uri, {
+          signal
+        });
+        if (!response.ok)
+          throw new Error("Could not read the captured screenshot");
+        const blob = await response.blob();
+        if (blob.size > 8e6)
+          throw new Error("Captured screenshot is too large");
+        payloads.push({
+          kind: "screenshot",
+          contentType: capture.screenshot.uri.startsWith("data:image/png;") || /\.png$/i.test(capture.screenshot.uri) ? "image/png" : "image/jpeg",
+          blob
+        });
+      }
+      if (capture.replay.length) {
+        payloads.push({
+          kind: "replay",
+          contentType: "application/json",
+          blob: new Blob(
+            [JSON.stringify(encodeVisualReplay(capture.replay, this.origin))],
+            { type: "application/json" }
+          )
+        });
+      }
+      if (signal.aborted) throw new Error("Capture session ended");
+      const initiated = InitiateReportResponseSchema.parse(
+        await transport.initiate(
+          payloads.map(({ kind, contentType }) => ({ kind, contentType }))
+        )
+      );
+      const uploaded = [];
+      for (const payload of payloads) {
+        const upload = initiated.uploads.find(
+          (item) => item.kind === payload.kind
+        );
+        if (!upload)
+          throw new Error(`[lens] Missing upload slot for ${payload.kind}`);
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 2e4);
+        try {
+          await transport.uploadAsset(upload, payload.blob, controller.signal);
+        } finally {
+          clearTimeout(timeout);
+        }
+        uploaded.push({
+          kind: payload.kind,
+          key: upload.key,
+          byteSize: payload.blob.size
+        });
+      }
+      await transport.finalize(initiated.reportId, capture.metadata, uploaded);
+      this.retryCapture = void 0;
+      return { reportId: initiated.reportId };
+    } finally {
+      this.submitting = false;
+    }
+  }
+};
+var tools = [
+  ["rect", "Rectangle"],
+  ["ellipse", "Ellipse"],
+  ["arrow", "Arrow"],
+  ["line", "Line"],
+  ["pencil", "Draw"],
+  ["highlighter", "Highlight"],
+  ["text", "Text"],
+  ["step", "Step"],
+  ["blur", "Redact"],
+  ["crop", "Crop"],
+  ["target", "Target"]
+];
+var colors = [
+  "#ef4444",
+  "#f59e0b",
+  "#22c55e",
+  "#3b82f6",
+  "#ffffff",
+  "#171717"
+];
+function bounds(a, b) {
+  return {
+    x: Math.min(a.x, b.x),
+    y: Math.min(a.y, b.y),
+    width: Math.abs(b.x - a.x),
+    height: Math.abs(b.y - a.y)
+  };
+}
+function shape(tool, points, color, text, n) {
+  const a = points[0], b = points[points.length - 1];
+  if (!a || !b) return null;
+  const common = { color, strokeWidth: tool === "highlighter" ? 18 : 3 };
+  if (tool === "text")
+    return {
+      ...common,
+      kind: "text",
+      ...a,
+      text: text.trim().slice(0, 300) || "Note",
+      fontSize: 20
+    };
+  if (tool === "step") return { ...common, kind: "step", ...a, n };
+  if (tool === "pencil" || tool === "highlighter")
+    return points.length < 2 ? null : { ...common, kind: tool, points: [...points] };
+  if (tool === "arrow" || tool === "line")
+    return { ...common, kind: tool, x1: a.x, y1: a.y, x2: b.x, y2: b.y };
+  if (tool === "rect" || tool === "ellipse" || tool === "blur")
+    return { ...common, kind: tool, ...bounds(a, b) };
+  return null;
+}
+function AnnotationShapes({
+  annotations
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((a, i) => {
+    const color = a.color ?? "#ef4444", stroke = a.strokeWidth ?? 3;
+    if (a.kind === "rect")
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: a.x,
+          y: a.y,
+          width: a.width,
+          height: a.height,
+          fill: "none",
+          stroke: color,
+          strokeWidth: stroke
+        },
+        i
+      );
+    if (a.kind === "ellipse")
+      return /* @__PURE__ */ jsx(
+        Ellipse,
+        {
+          cx: a.x + a.width / 2,
+          cy: a.y + a.height / 2,
+          rx: a.width / 2,
+          ry: a.height / 2,
+          fill: "none",
+          stroke: color,
+          strokeWidth: stroke
+        },
+        i
+      );
+    if (a.kind === "blur")
+      return /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: a.x,
+          y: a.y,
+          width: a.width,
+          height: a.height,
+          fill: "#171717"
+        },
+        i
+      );
+    if (a.kind === "line" || a.kind === "arrow") {
+      const angle = Math.atan2(a.y2 - a.y1, a.x2 - a.x1), length = 13;
+      const head = `${a.x2},${a.y2} ${a.x2 - length * Math.cos(angle - 0.5)},${a.y2 - length * Math.sin(angle - 0.5)} ${a.x2 - length * Math.cos(angle + 0.5)},${a.y2 - length * Math.sin(angle + 0.5)}`;
+      return /* @__PURE__ */ jsxs(G, { children: [
+        /* @__PURE__ */ jsx(
+          Line,
+          {
+            x1: a.x1,
+            y1: a.y1,
+            x2: a.x2,
+            y2: a.y2,
+            stroke: color,
+            strokeWidth: stroke,
+            strokeLinecap: "round"
+          }
+        ),
+        a.kind === "arrow" && /* @__PURE__ */ jsx(Polygon, { points: head, fill: color })
+      ] }, i);
+    }
+    if (a.kind === "pencil" || a.kind === "highlighter")
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          d: a.points.map((p, index) => `${index ? "L" : "M"}${p.x} ${p.y}`).join(" "),
+          fill: "none",
+          stroke: color,
+          strokeWidth: stroke,
+          strokeOpacity: a.kind === "highlighter" ? 0.35 : 1,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        i
+      );
+    if (a.kind === "text")
+      return /* @__PURE__ */ jsx(
+        SvgText,
+        {
+          x: a.x,
+          y: a.y,
+          fill: color,
+          fontSize: a.fontSize ?? 20,
+          fontWeight: "600",
+          children: a.text
+        },
+        i
+      );
+    if (a.kind === "step")
+      return /* @__PURE__ */ jsxs(G, { children: [
+        /* @__PURE__ */ jsx(Circle, { cx: a.x, cy: a.y, r: 13, fill: color }),
+        /* @__PURE__ */ jsx(
+          SvgText,
+          {
+            x: a.x,
+            y: a.y + 5,
+            fill: "#fff",
+            fontSize: 15,
+            fontWeight: "700",
+            textAnchor: "middle",
+            children: a.n
+          }
+        )
+      ] }, i);
+    return null;
+  }) });
+}
+function AnnotationEditor({
+  image,
+  initial = [],
+  initialTarget,
+  initialCrop,
+  onDone,
+  onCancel
+}) {
+  const [marks, setMarks] = useState(initial);
+  const [draft, setDraft] = useState(null);
+  const [tool, setTool] = useState("rect");
+  const [color, setColor] = useState(colors[0]);
+  const [text, setText] = useState("");
+  const [crop, setCrop] = useState(initialCrop ?? null);
+  const [target, setTarget] = useState(
+    initialTarget
+  );
+  const [exporting, setExporting] = useState(false);
+  const [error, setError] = useState("");
+  const canvas = useRef(null);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const points = useRef([]);
+  const screen = useWindowDimensions();
+  const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
+  const scale = Math.min(
+    Math.max(1, (stageSize.width || screen.width) - 32) / image.width,
+    Math.max(1, (stageSize.height || screen.height - 260) - 16) / image.height
+  );
+  const shownCrop = exporting ? crop : null;
+  const responder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => !exporting,
+      onMoveShouldSetPanResponder: () => !exporting,
+      onPanResponderGrant: (event) => {
+        const { locationX, locationY } = event.nativeEvent;
+        points.current = [
+          {
+            x: Math.max(0, Math.min(image.width, locationX / scale)),
+            y: Math.max(0, Math.min(image.height, locationY / scale))
+          }
+        ];
+        setDraft(
+          shape(
+            tool,
+            points.current,
+            color,
+            text,
+            marks.filter((a) => a.kind === "step").length + 1
+          )
+        );
+      },
+      onPanResponderMove: (event) => {
+        const { locationX, locationY } = event.nativeEvent;
+        const p = {
+          x: Math.max(0, Math.min(image.width, locationX / scale)),
+          y: Math.max(0, Math.min(image.height, locationY / scale))
+        };
+        if (tool === "pencil" || tool === "highlighter") {
+          if (points.current.length < 500) points.current.push(p);
+        } else points.current = [points.current[0], p];
+        setDraft(
+          shape(
+            tool,
+            points.current,
+            color,
+            text,
+            marks.filter((a) => a.kind === "step").length + 1
+          )
+        );
+      },
+      onPanResponderRelease: (event) => {
+        const first = points.current[0];
+        if (first && tool !== "text" && tool !== "step") {
+          const { locationX, locationY } = event.nativeEvent;
+          const endpoint = {
+            x: Math.max(0, Math.min(image.width, locationX / scale)),
+            y: Math.max(0, Math.min(image.height, locationY / scale))
+          };
+          points.current = tool === "pencil" || tool === "highlighter" ? [...points.current, endpoint].slice(0, 500) : [first, endpoint];
+        }
+        const a = points.current[0], b = points.current[points.current.length - 1];
+        if (a && b) {
+          if (tool === "crop") {
+            const rect = bounds(a, b);
+            if (rect.width > 8 && rect.height > 8) setCrop(rect);
+          } else if (tool === "target") {
+            const rect = bounds(a, b);
+            setTarget({
+              tagName: "Native screen region",
+              boundingRect: {
+                ...rect,
+                width: Math.max(24, rect.width),
+                height: Math.max(24, rect.height)
+              }
+            });
+          } else {
+            const next = shape(
+              tool,
+              points.current,
+              color,
+              text,
+              marks.filter((a2) => a2.kind === "step").length + 1
+            );
+            if (next && marks.length < 100) setMarks([...marks, next]);
+          }
+        }
+        setDraft(null);
+        points.current = [];
+      },
+      onPanResponderTerminate: () => {
+        setDraft(null);
+        points.current = [];
+      }
+    }),
+    [color, exporting, image.height, image.width, marks, scale, text, tool]
+  );
+  async function done() {
+    if (exporting) return;
+    setExporting(true);
+    setError("");
+    try {
+      await new Promise(
+        (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+      );
+      if (!mounted.current) return;
+      const uri = await captureRef(canvas, {
+        format: "png",
+        result: "tmpfile",
+        useRenderInContext: true
+      });
+      if (!mounted.current) {
+        releaseImage(imageUri(uri));
+        return;
+      }
+      onDone({
+        image: {
+          uri: imageUri(uri),
+          width: crop?.width ?? image.width,
+          height: crop?.height ?? image.height
+        },
+        annotations: marks,
+        target,
+        crop
+      });
+    } catch {
+      if (mounted.current)
+        setError("Could not save the annotated screenshot. Try again.");
+    } finally {
+      if (mounted.current) setExporting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(View, { style: s.page, children: [
+    /* @__PURE__ */ jsxs(View, { style: s.header, children: [
+      /* @__PURE__ */ jsx(Text, { style: s.title, children: "Annotate screenshot" }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Cancel annotations",
+          disabled: exporting,
+          onPress: onCancel,
+          children: /* @__PURE__ */ jsx(Text, { style: s.link, children: "Cancel" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Save annotations",
+          disabled: exporting,
+          onPress: () => {
+            void done();
+          },
+          children: /* @__PURE__ */ jsx(Text, { style: s.link, children: exporting ? "Saving\u2026" : "Done" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        style: s.tools,
+        contentContainerStyle: s.row,
+        showsHorizontalScrollIndicator: false,
+        children: tools.map(([value, label]) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `Annotation tool: ${label}`,
+            accessibilityState: { selected: tool === value },
+            disabled: exporting,
+            onPress: () => setTool(value),
+            style: [s.tool, tool === value && s.selected],
+            children: /* @__PURE__ */ jsx(Text, { style: tool === value ? s.selectedText : s.toolText, children: label })
+          },
+          value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs(View, { style: s.row, children: [
+      colors.map((value) => /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: `Annotation color ${value}`,
+          disabled: exporting,
+          onPress: () => setColor(value),
+          style: [
+            s.swatch,
+            { backgroundColor: value, borderWidth: color === value ? 3 : 1 }
+          ]
+        },
+        value
+      )),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Undo annotation",
+          disabled: exporting,
+          onPress: () => {
+            if (crop) setCrop(null);
+            else setMarks(marks.slice(0, -1));
+          },
+          children: /* @__PURE__ */ jsx(Text, { style: s.link, children: "Undo" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear annotations",
+          disabled: exporting,
+          onPress: () => {
+            setMarks([]);
+            setCrop(null);
+            setTarget(void 0);
+          },
+          children: /* @__PURE__ */ jsx(Text, { style: s.link, children: "Clear" })
+        }
+      )
+    ] }),
+    tool === "text" && /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        accessibilityLabel: "Annotation text",
+        placeholder: "Text for the annotation",
+        value: text,
+        onChangeText: setText,
+        maxLength: 300,
+        style: s.textInput
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: s.stage,
+        onLayout: ({ nativeEvent: { layout } }) => {
+          setStageSize(
+            (current) => current.width === layout.width && current.height === layout.height ? current : { width: layout.width, height: layout.height }
+          );
+        },
+        children: /* @__PURE__ */ jsxs(
+          View,
+          {
+            ref: canvas,
+            collapsable: false,
+            style: {
+              width: (shownCrop?.width ?? image.width) * scale,
+              height: (shownCrop?.height ?? image.height) * scale,
+              overflow: "hidden",
+              backgroundColor: "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                View,
+                {
+                  style: {
+                    position: "absolute",
+                    left: -(shownCrop?.x ?? 0) * scale,
+                    top: -(shownCrop?.y ?? 0) * scale,
+                    width: image.width * scale,
+                    height: image.height * scale
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Image,
+                      {
+                        source: { uri: image.uri },
+                        style: {
+                          width: image.width * scale,
+                          height: image.height * scale
+                        },
+                        resizeMode: "stretch"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Svg,
+                      {
+                        pointerEvents: "none",
+                        style: StyleSheet.absoluteFill,
+                        width: image.width * scale,
+                        height: image.height * scale,
+                        viewBox: `0 0 ${image.width} ${image.height}`,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            AnnotationShapes,
+                            {
+                              annotations: [...marks, ...draft ? [draft] : []]
+                            }
+                          ),
+                          !exporting && crop && /* @__PURE__ */ jsx(
+                            Rect,
+                            {
+                              ...crop,
+                              fill: "none",
+                              stroke: "#3b82f6",
+                              strokeWidth: 2,
+                              strokeDasharray: "6 4"
+                            }
+                          ),
+                          target?.boundingRect && /* @__PURE__ */ jsx(
+                            Rect,
+                            {
+                              ...target.boundingRect,
+                              fill: "none",
+                              stroke: "#22c55e",
+                              strokeWidth: 2,
+                              strokeDasharray: "4 4"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              !exporting && /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: StyleSheet.absoluteFill,
+                  ...responder.panHandlers,
+                  accessibilityLabel: "Screenshot annotation canvas"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: s.hint, children: error || (tool === "target" ? "Mark the native screen region related to the issue." : tool === "blur" ? "Redaction permanently covers screenshot pixels and removes earlier recording frames." : "Draw on the screenshot. Changes are attached when you submit.") })
+  ] });
+}
+var s = StyleSheet.create({
+  page: {
+    flex: 1,
+    backgroundColor: "#f4f4f5",
+    paddingTop: 24,
+    paddingBottom: 20
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  title: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#171717",
+    textAlign: "left"
+  },
+  link: { fontSize: 14, fontWeight: "600", color: "#171717" },
+  tools: { flexGrow: 0, maxHeight: 48 },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  },
+  tool: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: "#fff",
+    borderRadius: 8
+  },
+  selected: { backgroundColor: "#171717" },
+  toolText: { fontSize: 13, color: "#171717" },
+  selectedText: { fontSize: 13, color: "#fff" },
+  swatch: { width: 24, height: 24, borderRadius: 12, borderColor: "#a1a1aa" },
+  stage: {
+    flex: 1,
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  },
+  hint: {
+    paddingHorizontal: 16,
+    fontSize: 12,
+    lineHeight: 18,
+    color: "#525252"
+  },
+  textInput: {
+    marginHorizontal: 16,
+    backgroundColor: "#fff",
+    borderRadius: 8,
+    padding: 12,
+    color: "#171717"
+  }
+});
+function ReportPanel({
+  client,
+  visible,
+  close,
+  screenshot,
+  baseScreenshot,
+  crop,
+  annotations,
+  target,
+  updateScreenshot,
+  record,
+  changed,
+  onSubmitted
+}) {
+  const [comment, setComment] = useState2("");
+  const [pending, setPending] = useState2(false);
+  const [message, setMessage] = useState2("");
+  const [reportId, setReportId] = useState2("");
+  const [editing, setEditing] = useState2(false);
+  const [include, setInclude] = useState2({
+    screenshot: true,
+    replay: true,
+    console: true,
+    network: true,
+    errors: true
+  });
+  useEffect2(() => {
+    if (!visible) setEditing(false);
+    else setReportId("");
+  }, [visible]);
+  const env = client.getContext();
+  const recording = client.getRecording();
+  const redacted = annotations.some((a) => a.kind === "blur");
+  async function submit() {
+    if (!comment.trim() && !screenshot && !recording.frameCount || pending)
+      return;
+    setPending(true);
+    setMessage("");
+    try {
+      const result = await client.submitReport({
+        comment: comment.trim(),
+        trigger: "user",
+        include,
+        screenshot: screenshot ?? void 0,
+        annotations,
+        target
+      });
+      setReportId(result.reportId);
+      setComment("");
+      onSubmitted();
+    } catch {
+      setMessage(
+        "Could not submit the report. Check your connection and project settings, then retry."
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+  return /* @__PURE__ */ jsx2(
+    Modal,
+    {
+      visible,
+      animationType: "slide",
+      presentationStyle: "pageSheet",
+      onRequestClose: close,
+      children: editing && baseScreenshot ? /* @__PURE__ */ jsx2(
+        AnnotationEditor,
+        {
+          image: baseScreenshot,
+          initial: annotations,
+          initialTarget: target,
+          initialCrop: crop,
+          onDone: (result) => {
+            updateScreenshot(result);
+            setEditing(false);
+          },
+          onCancel: () => setEditing(false)
+        }
+      ) : /* @__PURE__ */ jsx2(
+        KeyboardAvoidingView,
+        {
+          style: styles.page,
+          behavior: Platform3.OS === "ios" ? "padding" : void 0,
+          children: /* @__PURE__ */ jsxs2(
+            ScrollView2,
+            {
+              contentContainerStyle: styles.content,
+              keyboardShouldPersistTaps: "handled",
+              children: [
+                /* @__PURE__ */ jsxs2(View2, { style: styles.header, children: [
+                  /* @__PURE__ */ jsx2(Text2, { accessibilityRole: "header", style: styles.title, children: "Report an issue" }),
+                  /* @__PURE__ */ jsx2(
+                    Pressable2,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityLabel: "Close report panel",
+                      onPress: close,
+                      hitSlop: 12,
+                      children: /* @__PURE__ */ jsx2(Text2, { style: styles.link, children: "Close" })
+                    }
+                  )
+                ] }),
+                reportId ? /* @__PURE__ */ jsxs2(View2, { style: styles.success, children: [
+                  /* @__PURE__ */ jsx2(Text2, { style: styles.successMark, children: "\u2713" }),
+                  /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: "Report submitted" }),
+                  /* @__PURE__ */ jsx2(Text2, { style: styles.description, children: "The team can see the full context." }),
+                  /* @__PURE__ */ jsx2(Text2, { selectable: true, style: styles.reportId, children: reportId }),
+                  /* @__PURE__ */ jsx2(
+                    Pressable2,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityLabel: "Share report ID",
+                      style: [styles.secondary, styles.successAction],
+                      onPress: () => {
+                        void Share.share({ message: reportId });
+                      },
+                      children: /* @__PURE__ */ jsx2(Text2, { style: styles.link, children: "Share report ID" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2(
+                    Pressable2,
+                    {
+                      accessibilityRole: "button",
+                      style: [styles.secondary, styles.successAction],
+                      onPress: () => {
+                        setReportId("");
+                        close();
+                      },
+                      children: /* @__PURE__ */ jsx2(Text2, { style: styles.link, children: "Done" })
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                  /* @__PURE__ */ jsx2(
+                    TextInput2,
+                    {
+                      accessibilityLabel: "Issue description",
+                      placeholder: "What's wrong? Describe the issue\u2026",
+                      multiline: true,
+                      maxLength: 2e3,
+                      editable: !pending,
+                      value: comment,
+                      onChangeText: (value) => {
+                        setComment(value);
+                        setMessage("");
+                      },
+                      style: styles.input,
+                      textAlignVertical: "top"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(Text2, { style: styles.context, children: [
+                    env.route,
+                    " \xB7 ",
+                    env.os,
+                    " \xB7 ",
+                    env.viewport.width,
+                    "\xD7",
+                    env.viewport.height
+                  ] }),
+                  screenshot && /* @__PURE__ */ jsxs2(
+                    Pressable2,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityLabel: "Annotate captured screenshot",
+                      disabled: pending,
+                      onPress: () => setEditing(true),
+                      style: styles.preview,
+                      children: [
+                        /* @__PURE__ */ jsx2(
+                          Image2,
+                          {
+                            source: { uri: screenshot.uri },
+                            style: [
+                              styles.previewImage,
+                              {
+                                width: Math.min(
+                                  144,
+                                  160 * screenshot.width / screenshot.height
+                                )
+                              }
+                            ],
+                            resizeMode: "contain"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(View2, { style: styles.previewDetails, children: [
+                          /* @__PURE__ */ jsx2(Text2, { style: styles.previewTitle, children: "Screenshot" }),
+                          /* @__PURE__ */ jsx2(Text2, { style: styles.previewLabel, children: "Tap to annotate" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(View2, { style: styles.chips, children: [
+                    !!annotations.length && /* @__PURE__ */ jsxs2(Text2, { style: styles.chip, children: [
+                      annotations.length,
+                      " annotation",
+                      annotations.length === 1 ? "" : "s"
+                    ] }),
+                    target && /* @__PURE__ */ jsx2(
+                      Pressable2,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Remove target region",
+                        disabled: pending,
+                        onPress: () => {
+                          if (screenshot)
+                            updateScreenshot({
+                              image: screenshot,
+                              annotations,
+                              crop
+                            });
+                        },
+                        children: /* @__PURE__ */ jsx2(Text2, { style: styles.chip, children: "Target region \xD7" })
+                      }
+                    ),
+                    !!recording.frameCount && /* @__PURE__ */ jsx2(
+                      Pressable2,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Discard recording",
+                        disabled: pending,
+                        onPress: () => {
+                          client.discardRecording();
+                          changed();
+                        },
+                        children: /* @__PURE__ */ jsxs2(Text2, { style: styles.chip, children: [
+                          "Recording \xB7 ",
+                          Math.round(recording.durationMs / 1e3),
+                          "s \xB7",
+                          " ",
+                          recording.frameCount,
+                          " frames \xD7"
+                        ] })
+                      }
+                    )
+                  ] }),
+                  redacted && !!recording.frameCount && /* @__PURE__ */ jsx2(Text2, { style: styles.description, children: "Earlier recording frames will be excluded because the screenshot was redacted." }),
+                  !!recording.error && /* @__PURE__ */ jsx2(Text2, { accessibilityRole: "alert", style: styles.description, children: recording.error }),
+                  /* @__PURE__ */ jsx2(View2, { style: styles.chips, children: [
+                    "screenshot",
+                    "replay",
+                    "console",
+                    "network",
+                    "errors"
+                  ].map((key) => /* @__PURE__ */ jsx2(
+                    Pressable2,
+                    {
+                      accessibilityRole: "checkbox",
+                      accessibilityLabel: `Include ${key}`,
+                      accessibilityState: {
+                        checked: include[key] && !(key === "replay" && redacted),
+                        disabled: pending || key === "replay" && redacted
+                      },
+                      disabled: pending || key === "replay" && redacted,
+                      onPress: () => setInclude({ ...include, [key]: !include[key] }),
+                      style: [
+                        styles.toggle,
+                        include[key] && !(key === "replay" && redacted) && styles.toggleOn
+                      ],
+                      children: /* @__PURE__ */ jsxs2(
+                        Text2,
+                        {
+                          style: include[key] && !(key === "replay" && redacted) ? styles.toggleTextOn : styles.toggleText,
+                          children: [
+                            include[key] && !(key === "replay" && redacted) ? "\u2713 " : "",
+                            key === "replay" ? "Recording" : key === "console" ? "Logs" : key[0].toUpperCase() + key.slice(1)
+                          ]
+                        }
+                      )
+                    },
+                    key
+                  )) }),
+                  /* @__PURE__ */ jsxs2(View2, { style: styles.actions, children: [
+                    /* @__PURE__ */ jsx2(
+                      Pressable2,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Annotate screenshot",
+                        disabled: !baseScreenshot || pending,
+                        onPress: () => setEditing(true),
+                        style: [
+                          styles.secondary,
+                          (!baseScreenshot || pending) && styles.disabled
+                        ],
+                        children: /* @__PURE__ */ jsx2(Text2, { style: styles.link, children: "Annotate" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      Pressable2,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Record steps",
+                        disabled: pending || !baseScreenshot,
+                        onPress: record,
+                        style: [
+                          styles.secondary,
+                          (!baseScreenshot || pending) && styles.disabled
+                        ],
+                        children: /* @__PURE__ */ jsx2(Text2, { style: styles.link, children: "Record steps" })
+                      }
+                    )
+                  ] }),
+                  !!message && /* @__PURE__ */ jsx2(
+                    Text2,
+                    {
+                      accessibilityRole: "alert",
+                      accessibilityLiveRegion: "polite",
+                      style: styles.description,
+                      children: message
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(View2, { style: styles.actions, children: [
+                    /* @__PURE__ */ jsx2(
+                      Pressable2,
+                      {
+                        accessibilityRole: "button",
+                        disabled: pending,
+                        onPress: close,
+                        style: styles.secondary,
+                        children: /* @__PURE__ */ jsx2(Text2, { style: styles.link, children: "Cancel" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      Pressable2,
+                      {
+                        accessibilityRole: "button",
+                        accessibilityLabel: "Submit report",
+                        accessibilityState: {
+                          disabled: pending || !comment.trim() && !screenshot && !recording.frameCount,
+                          busy: pending
+                        },
+                        disabled: pending || !comment.trim() && !screenshot && !recording.frameCount,
+                        onPress: () => {
+                          void submit();
+                        },
+                        style: [styles.button, pending && styles.disabled],
+                        children: pending ? /* @__PURE__ */ jsx2(ActivityIndicator, { color: "#fff" }) : /* @__PURE__ */ jsx2(Text2, { style: styles.buttonText, children: "Submit" })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var styles = StyleSheet2.create({
+  page: { flex: 1, backgroundColor: "#fff" },
+  content: {
+    padding: 24,
+    paddingTop: 32,
+    paddingBottom: 48,
+    gap: 16,
+    alignItems: "stretch"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 16
+  },
+  title: { fontSize: 20, fontWeight: "600", color: "#171717", flexShrink: 1 },
+  description: { fontSize: 13, lineHeight: 20, color: "#525252" },
+  context: { fontSize: 12, color: "#71717a" },
+  input: {
+    minHeight: 100,
+    borderWidth: 1,
+    borderColor: "#d4d4d4",
+    borderRadius: 12,
+    padding: 14,
+    fontSize: 16,
+    color: "#171717"
+  },
+  button: {
+    flex: 1,
+    backgroundColor: "#171717",
+    padding: 14,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonText: { color: "#fff", fontSize: 14, fontWeight: "600" },
+  disabled: { opacity: 0.5 },
+  link: { color: "#171717", fontSize: 14, fontWeight: "500" },
+  launcher: {
+    position: "absolute",
+    end: 16,
+    bottom: 82,
+    width: 48,
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 24,
+    backgroundColor: "#171717",
+    zIndex: 9999,
+    elevation: 8
+  },
+  recording: {
+    position: "absolute",
+    end: 16,
+    bottom: 82,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 14,
+    borderRadius: 24,
+    backgroundColor: "#171717",
+    zIndex: 9999,
+    elevation: 8
+  },
+  preview: {
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+    backgroundColor: "#fafafa",
+    borderRadius: 10,
+    overflow: "hidden",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: 12,
+    gap: 16
+  },
+  previewImage: { height: 160, borderRadius: 4 },
+  previewDetails: { flex: 1, gap: 6, paddingTop: 4 },
+  previewTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#171717",
+    textAlign: "left"
+  },
+  previewLabel: {
+    fontSize: 12,
+    color: "#525252",
+    textAlign: "left"
+  },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  chip: {
+    fontSize: 12,
+    color: "#525252",
+    backgroundColor: "#f4f4f5",
+    padding: 8,
+    borderRadius: 8
+  },
+  actions: { flexDirection: "row", gap: 10 },
+  secondary: {
+    flex: 1,
+    padding: 14,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    backgroundColor: "#f4f4f5"
+  },
+  toggle: {
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: "#f4f4f5"
+  },
+  toggleOn: { backgroundColor: "#e4e4e7" },
+  toggleText: { color: "#71717a", fontSize: 12 },
+  toggleTextOn: { color: "#171717", fontSize: 12 },
+  success: { alignItems: "stretch", gap: 16, paddingVertical: 24 },
+  successAction: { flex: 0 },
+  successMark: { fontSize: 32, color: "#16a34a" },
+  reportId: { color: "#525252", fontSize: 12 }
+});
+function LensIcon({
+  color = "#ffffff",
+  size = 24
+}) {
+  return /* @__PURE__ */ jsxs3(Svg2, { width: size, height: size, viewBox: "0 0 24 24", accessible: false, children: [
+    /* @__PURE__ */ jsx3(
+      Circle2,
+      {
+        cx: "12",
+        cy: "12",
+        r: "9",
+        stroke: color,
+        strokeWidth: "1.7",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Circle2,
+      {
+        cx: "12",
+        cy: "12",
+        r: "5",
+        stroke: color,
+        strokeWidth: "1.7",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Path2,
+      {
+        d: "M9 10a3 3 0 0 1 3-2",
+        stroke: color,
+        strokeWidth: "1.7",
+        strokeLinecap: "round",
+        fill: "none"
+      }
+    )
+  ] });
+}
+var LensContext = createContext({
+  client: null,
+  open: () => {
+  },
+  close: () => {
+  }
+});
+function Lens(props) {
+  const [client, setClient] = useState3(null);
+  const [visible, setVisible] = useState3(false);
+  const [opening, setOpening] = useState3(false);
+  const [screenshot, setScreenshot] = useState3(null);
+  const [baseScreenshot, setBaseScreenshot] = useState3(
+    null
+  );
+  const [crop, setCrop] = useState3(null);
+  const ownedImages = useRef2(/* @__PURE__ */ new Set());
+  const releaseImages = useCallback(() => {
+    for (const uri of ownedImages.current) releaseImage(uri);
+    ownedImages.current.clear();
+  }, []);
+  const [annotations, setAnnotations] = useState3([]);
+  const [target, setTarget] = useState3();
+  const [recording, setRecording] = useState3({
+    active: false,
+    frameCount: 0,
+    durationMs: 0,
+    error: void 0
+  });
+  const beforeSend = useRef2(props.beforeSend), captureScreen = useRef2(props.captureScreen);
+  beforeSend.current = props.beforeSend;
+  captureScreen.current = props.captureScreen;
+  const openGeneration = useRef2(0);
+  const openingRef = useRef2(false);
+  const stopping = useRef2(false);
+  const draftRoute = useRef2(props.route ?? "/");
+  const hasScreenCapture = !!props.captureScreen;
+  const window = useWindowDimensions2();
+  const windowRef = useRef2(window);
+  windowRef.current = window;
+  const positionRef = useRef2({ x: 0, y: 0 });
+  const dragStart = useRef2({ x: 0, y: 0 });
+  const [position, setPosition] = useState3({ x: 0, y: 0 });
+  const openAction = useRef2(() => {
+  });
+  const dragPoint = useRef2({ x: 0, y: 0 });
+  const drag = useMemo2(() => {
+    const move = (pageX, pageY) => {
+      const { width, height } = windowRef.current;
+      const baseX = I18nManager2.isRTL ? 16 : width - 64;
+      const dx = pageX - dragPoint.current.x, dy = pageY - dragPoint.current.y;
+      const next = {
+        x: Math.max(
+          16 - baseX,
+          Math.min(width - 64 - baseX, dragStart.current.x + dx)
+        ),
+        y: Math.max(
+          48 - (height - 130),
+          Math.min(34, dragStart.current.y + dy)
+        )
+      };
+      positionRef.current = next;
+      setPosition(next);
+      return Math.abs(dx) + Math.abs(dy);
+    };
+    return PanResponder2.create({
+      onStartShouldSetPanResponder: () => !openingRef.current,
+      onPanResponderGrant: (event) => {
+        dragStart.current = positionRef.current;
+        dragPoint.current = {
+          x: event.nativeEvent.pageX,
+          y: event.nativeEvent.pageY
+        };
+      },
+      onPanResponderMove: (event) => {
+        move(event.nativeEvent.pageX, event.nativeEvent.pageY);
+      },
+      onPanResponderRelease: (event) => {
+        const distance = move(event.nativeEvent.pageX, event.nativeEvent.pageY);
+        if (distance <= 8) openAction.current();
+      }
+    });
+  }, []);
+  useEffect3(() => {
+    openGeneration.current++;
+    openingRef.current = false;
+    releaseImages();
+    setVisible(false);
+    setOpening(false);
+    setScreenshot(null);
+    setBaseScreenshot(null);
+    setCrop(null);
+    setAnnotations([]);
+    setTarget(void 0);
+    if (!props.enabled) {
+      setClient(null);
+      return;
+    }
+    let disposed = false;
+    const instance = new NativeLensClient({
+      accessId: props.accessId,
+      origin: props.origin,
+      endpoint: props.endpoint,
+      captureConsole: props.captureConsole,
+      captureNetwork: props.captureNetwork,
+      beforeSend: (capture) => beforeSend.current ? beforeSend.current(capture) : capture,
+      captureScreen: hasScreenCapture ? async (purpose) => {
+        const captured = await captureScreen.current?.(purpose) ?? null;
+        const image = captured ? { ...captured, uri: imageUri(captured.uri) } : null;
+        if (disposed) {
+          if (image?.uri.startsWith("file:"))
+            releaseImage(imageUri(image.uri));
+          return null;
+        }
+        if (image?.uri.startsWith("file:"))
+          ownedImages.current.add(image.uri);
+        return image;
+      } : void 0
+    });
+    instance.start();
+    setClient(instance);
+    return () => {
+      openGeneration.current++;
+      disposed = true;
+      instance.stop();
+      releaseImages();
+    };
+  }, [
+    props.enabled,
+    props.accessId,
+    props.origin,
+    props.endpoint,
+    props.captureConsole,
+    props.captureNetwork,
+    hasScreenCapture,
+    releaseImages
+  ]);
+  useEffect3(() => {
+    const route = props.route ?? "/";
+    if (route !== draftRoute.current && !client?.getRecording().active) {
+      releaseImages();
+      setScreenshot(null);
+      setBaseScreenshot(null);
+      setCrop(null);
+      setAnnotations([]);
+      setTarget(void 0);
+      client?.discardDraft();
+    }
+    draftRoute.current = route;
+    client?.setRoute(route, props.language);
+  }, [client, props.route, props.language, releaseImages]);
+  useEffect3(() => {
+    if (props.app) client?.setApp(props.app);
+  }, [client, props.app]);
+  useEffect3(() => {
+    if (!client) return;
+    let wasActive = false;
+    const timer = setInterval(() => {
+      const state = client.getRecording();
+      if (state.active || wasActive) setRecording(state);
+      if (wasActive && !state.active && !stopping.current) setVisible(true);
+      wasActive = state.active;
+    }, 250);
+    return () => clearInterval(timer);
+  }, [client]);
+  const close = useCallback(() => {
+    openGeneration.current++;
+    openingRef.current = false;
+    setOpening(false);
+    setVisible(false);
+  }, []);
+  const open = useCallback(() => {
+    if (!client || openingRef.current || client.getRecording().active) return;
+    openingRef.current = true;
+    const generation = ++openGeneration.current;
+    setOpening(true);
+    void (async () => {
+      let image = null;
+      try {
+        if (!baseScreenshot) image = await client.captureScreen();
+      } catch (error) {
+        console.warn(
+          "[issue capture] Screenshot unavailable",
+          error instanceof Error ? error.message : String(error)
+        );
+      }
+      if (generation !== openGeneration.current) return;
+      if (!baseScreenshot) {
+        setBaseScreenshot(image);
+        setScreenshot(image);
+      }
+      openingRef.current = false;
+      setOpening(false);
+      setRecording(client.getRecording());
+      setVisible(true);
+    })();
+  }, [baseScreenshot, client]);
+  useEffect3(() => {
+    openAction.current = open;
+  }, [open]);
+  const context = useMemo2(
+    () => ({ client, open, close }),
+    [client, open, close]
+  );
+  const active = props.enabled && client;
+  const stop = () => {
+    if (!client || stopping.current) return;
+    stopping.current = true;
+    void client.stopRecording().then(() => {
+      setRecording(client.getRecording());
+      setVisible(true);
+    }).finally(() => {
+      stopping.current = false;
+    });
+  };
+  const clearDraft = () => {
+    releaseImages();
+    setScreenshot(null);
+    setBaseScreenshot(null);
+    setCrop(null);
+    setAnnotations([]);
+    setTarget(void 0);
+    setRecording(client?.getRecording() ?? recording);
+  };
+  return /* @__PURE__ */ jsxs4(LensContext.Provider, { value: context, children: [
+    props.children,
+    active && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      props.showButton !== false && (recording.active ? /* @__PURE__ */ jsxs4(View3, { style: styles.recording, children: [
+        /* @__PURE__ */ jsxs4(Text3, { style: styles.buttonText, children: [
+          "\u25CF Recording ",
+          Math.floor(recording.durationMs / 1e3),
+          "s"
+        ] }),
+        /* @__PURE__ */ jsx4(
+          Pressable3,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Stop recording",
+            onPress: stop,
+            children: /* @__PURE__ */ jsx4(Text3, { style: styles.buttonText, children: "Stop" })
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx4(
+        View3,
+        {
+          style: [
+            styles.launcher,
+            {
+              transform: [
+                { translateX: position.x },
+                { translateY: position.y }
+              ]
+            }
+          ],
+          accessible: true,
+          accessibilityRole: "button",
+          accessibilityLabel: "Report an issue",
+          accessibilityHint: "Drag to move",
+          accessibilityState: { busy: opening },
+          onAccessibilityTap: open,
+          ...drag.panHandlers,
+          children: /* @__PURE__ */ jsx4(
+            View3,
+            {
+              style: {
+                width: 48,
+                height: 48,
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: opening ? /* @__PURE__ */ jsx4(ActivityIndicator2, { color: "#fff" }) : /* @__PURE__ */ jsx4(LensIcon, {})
+            }
+          )
+        }
+      )),
+      /* @__PURE__ */ jsx4(
+        ReportPanel,
+        {
+          client,
+          visible,
+          close,
+          screenshot,
+          baseScreenshot,
+          crop,
+          annotations,
+          target,
+          updateScreenshot: (result) => {
+            if (result.image.uri.startsWith("file:"))
+              ownedImages.current.add(result.image.uri);
+            if (screenshot?.uri.startsWith("file:") && screenshot.uri !== baseScreenshot?.uri && screenshot.uri !== result.image.uri) {
+              releaseImage(screenshot.uri);
+              ownedImages.current.delete(screenshot.uri);
+            }
+            setCrop(result.crop);
+            setScreenshot(result.image);
+            setAnnotations(result.annotations);
+            setTarget(result.target);
+          },
+          record: () => {
+            client.startRecording();
+            setRecording(client.getRecording());
+            setVisible(false);
+          },
+          changed: () => setRecording(client.getRecording()),
+          onSubmitted: clearDraft
+        },
+        `${props.accessId}:${props.origin}:${props.endpoint ?? ""}`
+      )
+    ] })
+  ] });
+}
+var LensProvider = Lens;
+function useLens() {
+  const { client, open, close } = useContext(LensContext);
+  return {
+    active: client !== null,
+    open: () => {
+      if (client) open();
+    },
+    close,
+    identify: (user) => client?.setApp({ user }),
+    setApp: (app) => client?.setApp(app),
+    captureError: (error, componentStack) => client?.captureError(error, componentStack),
+    record: () => client?.startRecording(),
+    stopRecording: () => client?.stopRecording() ?? Promise.resolve([]),
+    report: async (input) => client ? client.submitReport({ ...input, trigger: input?.trigger ?? "api" }) : null
+  };
+}
+export {
+  Lens,
+  LensProvider,
+  NativeLensClient,
+  useLens
+};
+//# sourceMappingURL=react-native.js.map