@outcode/bug-reporter-native 0.1.0

package/dist/index.mjs

@@ -0,0 +1,786 @@
+import React2, { createContext, useRef, useState, useEffect, useCallback, useContext, useMemo } from 'react';
+import { StyleSheet, View, ScrollView, TouchableOpacity, Image, Dimensions, PanResponder, Modal, Text, TextInput, ActivityIndicator, Animated, Easing, Platform, InteractionManager, PixelRatio, Appearance } from 'react-native';
+import Svg3, { Path, Polyline, Rect, G, Line, Circle } from 'react-native-svg';
+import { ANNOTATION_TOOLS, ANNOTATION_COLORS, SEVERITIES, REPORT_TYPES, resolveTheme, getReportQueue, normalizeContext, submitReport } from '@outcode/bug-reporter-core';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { captureRef, captureScreen } from 'react-native-view-shot';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/BugReporterButton.tsx
+function AnnotateToolbar({ t, tool, color, onTool, onColor, onUndo }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.bar,
+        { backgroundColor: t.panel, borderColor: t.border, shadowColor: "#000" }
+      ],
+      children: /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.row, children: [
+        ANNOTATION_TOOLS.map((tl) => {
+          const active = tool === tl.id;
+          return /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: () => onTool(tl.id),
+              style: [styles.iconBtn, { backgroundColor: active ? t.ring : "transparent" }],
+              children: /* @__PURE__ */ jsx(Svg3, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: tl.iconPath, stroke: active ? t.accent : t.muted, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) })
+            },
+            tl.id
+          );
+        }),
+        /* @__PURE__ */ jsx(View, { style: [styles.divider, { backgroundColor: t.border }] }),
+        ANNOTATION_COLORS.map((c) => {
+          const active = color === c;
+          return /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: () => onColor(c),
+              style: {
+                width: active ? 22 : 20,
+                height: active ? 22 : 20,
+                borderRadius: 11,
+                marginHorizontal: 3,
+                backgroundColor: c,
+                borderWidth: 2,
+                borderColor: active ? t.accent : t.border
+              }
+            },
+            c
+          );
+        }),
+        /* @__PURE__ */ jsx(View, { style: [styles.divider, { backgroundColor: t.border }] }),
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onUndo, style: styles.iconBtn, children: /* @__PURE__ */ jsx(Svg3, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: "M9 14L4 9l5-5M4 9h11a5 5 0 010 10h-3", stroke: t.muted, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+      ] })
+    }
+  );
+}
+var styles = StyleSheet.create({
+  bar: {
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingVertical: 7,
+    paddingHorizontal: 7,
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.28,
+    shadowRadius: 24,
+    elevation: 10
+  },
+  row: { flexDirection: "row", alignItems: "center", gap: 2 },
+  iconBtn: { width: 36, height: 36, borderRadius: 10, alignItems: "center", justifyContent: "center" },
+  divider: { width: 1, height: 24, marginHorizontal: 6 }
+});
+var HEADER_H = 50;
+function pointsStr(points) {
+  return points.map((p) => `${p.x},${p.y}`).join(" ");
+}
+function hitTestText(shapes, p) {
+  for (let i = shapes.length - 1; i >= 0; i--) {
+    const sh = shapes[i];
+    if (sh.type !== "text") continue;
+    const w = Math.max(48, sh.text.length * 8 + 24);
+    if (p.x >= sh.x - 8 && p.x <= sh.x + w && p.y >= sh.y - 20 && p.y <= sh.y + 10) return sh.id;
+  }
+  return null;
+}
+function AnnotateOverlay({ t, visible, src, onCancel, onContinue }) {
+  const insets = useSafeAreaInsets();
+  const stageContainerRef = useRef(null);
+  const idRef = useRef(0);
+  const [shapes, setShapes] = useState([]);
+  const [draft, setDraft] = useState(null);
+  const [tool, setTool] = useState("arrow");
+  const [color, setColor] = useState(ANNOTATION_COLORS[0]);
+  const [editingId, setEditingId] = useState(null);
+  const [dims, setDims] = useState({ width: 320, height: 480 });
+  const toolRef = useRef(tool);
+  const colorRef = useRef(color);
+  const shapesRef = useRef(shapes);
+  const startRef = useRef(null);
+  toolRef.current = tool;
+  colorRef.current = color;
+  shapesRef.current = shapes;
+  useEffect(() => {
+    if (!visible || !src) return;
+    Image.getSize(
+      src,
+      (w, h) => {
+        const win = Dimensions.get("window");
+        const maxW = win.width - 32;
+        const maxH = win.height - 230;
+        const aspect = w / h || 0.6;
+        let dw = maxW;
+        let dh = Math.round(maxW / aspect);
+        if (dh > maxH) {
+          dh = maxH;
+          dw = Math.round(maxH * aspect);
+        }
+        setDims({ width: dw, height: dh });
+      },
+      () => setDims({ width: Dimensions.get("window").width - 32, height: 480 })
+    );
+  }, [visible, src]);
+  const startDraw = useCallback((x, y) => {
+    const tl = toolRef.current;
+    const c = colorRef.current;
+    if (tl === "text") {
+      const hit = hitTestText(shapesRef.current, { x, y });
+      if (hit) {
+        setEditingId(hit);
+        return;
+      }
+      const id = `s${++idRef.current}`;
+      setShapes((s) => [...s, { id, type: "text", x, y, color: c, text: "" }]);
+      setEditingId(id);
+      return;
+    }
+    setEditingId(null);
+    startRef.current = { x, y };
+    setDraft(
+      tl === "pen" ? { id: `s${++idRef.current}`, type: "pen", color: c, points: [{ x, y }] } : { id: `s${++idRef.current}`, type: tl, color: c, x0: x, y0: y, x1: x, y1: y }
+    );
+  }, []);
+  const moveDraw = useCallback((x, y) => {
+    setDraft((prev) => {
+      if (!prev) return prev;
+      if (prev.type === "pen") return { ...prev, points: [...prev.points, { x, y }] };
+      if (prev.type === "text") return prev;
+      return { ...prev, x1: x, y1: y };
+    });
+  }, []);
+  const endDraw = useCallback(() => {
+    setDraft((d) => {
+      if (!d) return null;
+      const keep = d.type === "pen" ? d.points.length > 1 : d.type === "text" ? false : Math.abs(d.x1 - d.x0) > 5 || Math.abs(d.y1 - d.y0) > 5;
+      if (keep) setShapes((s) => [...s, d]);
+      return null;
+    });
+    startRef.current = null;
+  }, []);
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => startDraw(e.nativeEvent.locationX, e.nativeEvent.locationY),
+      onPanResponderMove: (e) => moveDraw(e.nativeEvent.locationX, e.nativeEvent.locationY),
+      onPanResponderRelease: endDraw,
+      onPanResponderTerminate: endDraw
+    })
+  ).current;
+  const undo = () => {
+    setShapes((s) => s.slice(0, -1));
+    setDraft(null);
+  };
+  const clearAll = () => {
+    setShapes([]);
+    setDraft(null);
+    setEditingId(null);
+  };
+  const updateText = (id, val) => setShapes((s) => s.map((sh) => sh.id === id && sh.type === "text" ? { ...sh, text: val } : sh));
+  const commitText = () => setShapes((s) => {
+    setEditingId(null);
+    return s.filter((sh) => !(sh.type === "text" && !sh.text.trim()));
+  });
+  const handleContinue = async () => {
+    commitText();
+    const count = shapes.filter((sh) => !(sh.type === "text" && !sh.text.trim())).length;
+    try {
+      const uri = await captureRef(stageContainerRef, { format: "png", result: "data-uri", quality: 1 });
+      onContinue(typeof uri === "string" ? uri : src, count);
+    } catch {
+      onContinue(src, count);
+    }
+  };
+  const all = draft ? [...shapes, draft] : shapes;
+  const editingShape = editingId != null ? shapes.find((s) => s.id === editingId) : void 0;
+  return /* @__PURE__ */ jsx(Modal, { visible, animationType: "fade", transparent: true, statusBarTranslucent: true, onRequestClose: onCancel, children: /* @__PURE__ */ jsxs(View, { style: styles2.screen, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles2.header, { paddingTop: insets.top + 8, height: HEADER_H + insets.top }], children: [
+      /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onCancel, style: styles2.hdrGhost, children: /* @__PURE__ */ jsx(Text, { style: styles2.hdrGhostText, children: "Back" }) }),
+      /* @__PURE__ */ jsx(Text, { style: styles2.hdrTitle, children: "Annotate" }),
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: clearAll, style: styles2.hdrGhost, children: /* @__PURE__ */ jsx(Text, { style: [styles2.hdrGhostText, { color: "#FF6B6B" }], children: "Delete" }) }),
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: handleContinue, style: [styles2.hdrPrimary, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx(Text, { style: { color: t.onAccent, fontWeight: "600", fontSize: 13.5 }, children: "Continue" }) })
+      ] })
+    ] }),
+    editingShape && /* @__PURE__ */ jsxs(View, { style: [styles2.editBar, { top: HEADER_H + insets.top + 6, backgroundColor: t.panel, borderColor: t.border }], children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          autoFocus: true,
+          value: editingShape.text,
+          placeholder: "Type a label, then Done",
+          placeholderTextColor: t.faint,
+          onChangeText: (v) => updateText(editingShape.id, v),
+          onSubmitEditing: commitText,
+          style: { flex: 1, color: t.text, fontSize: 15, paddingVertical: 6 }
+        },
+        editingShape.id
+      ),
+      /* @__PURE__ */ jsx(TouchableOpacity, { onPress: commitText, style: [styles2.editDone, { backgroundColor: t.accent }], children: /* @__PURE__ */ jsx(Text, { style: { color: t.onAccent, fontWeight: "600", fontSize: 13 }, children: "Done" }) })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles2.stageWrap, children: /* @__PURE__ */ jsxs(View, { ref: stageContainerRef, collapsable: false, style: [styles2.stage, { width: dims.width, height: dims.height }], children: [
+      /* @__PURE__ */ jsx(Image, { source: { uri: src }, style: { width: dims.width, height: dims.height }, resizeMode: "contain" }),
+      all.map((sh) => {
+        if (sh.type !== "blur") return null;
+        return /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "none",
+            style: {
+              position: "absolute",
+              left: Math.min(sh.x0, sh.x1),
+              top: Math.min(sh.y0, sh.y1),
+              width: Math.abs(sh.x1 - sh.x0),
+              height: Math.abs(sh.y1 - sh.y0),
+              backgroundColor: "#7A7D88",
+              borderWidth: 1.5,
+              borderColor: sh.color,
+              borderRadius: 5
+            }
+          },
+          sh.id
+        );
+      }),
+      /* @__PURE__ */ jsx(Svg3, { width: dims.width, height: dims.height, style: StyleSheet.absoluteFill, pointerEvents: "none", children: all.map((sh) => {
+        if (sh.type === "pen") {
+          return /* @__PURE__ */ jsx(Polyline, { points: pointsStr(sh.points), fill: "none", stroke: sh.color, strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" }, sh.id);
+        }
+        if (sh.type === "rect") {
+          return /* @__PURE__ */ jsx(Rect, { x: Math.min(sh.x0, sh.x1), y: Math.min(sh.y0, sh.y1), width: Math.abs(sh.x1 - sh.x0), height: Math.abs(sh.y1 - sh.y0), rx: 4, fill: "none", stroke: sh.color, strokeWidth: 3 }, sh.id);
+        }
+        if (sh.type === "arrow") {
+          const { x0, y0, x1, y1 } = sh;
+          const ang = Math.atan2(y1 - y0, x1 - x0);
+          const hl = 15;
+          return /* @__PURE__ */ jsxs(G, { children: [
+            /* @__PURE__ */ jsx(Line, { x1: x0, y1: y0, x2: x1, y2: y1, stroke: sh.color, strokeWidth: 3.5, strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx(Polyline, { points: `${x1 - hl * Math.cos(ang - Math.PI / 7)},${y1 - hl * Math.sin(ang - Math.PI / 7)} ${x1},${y1} ${x1 - hl * Math.cos(ang + Math.PI / 7)},${y1 - hl * Math.sin(ang + Math.PI / 7)}`, fill: "none", stroke: sh.color, strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" })
+          ] }, sh.id);
+        }
+        return null;
+      }) }),
+      all.map((sh) => {
+        if (sh.type !== "text" || !sh.text.trim()) return null;
+        return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: { position: "absolute", left: sh.x, top: sh.y - 13, backgroundColor: sh.color, paddingHorizontal: 8, paddingVertical: 3, borderRadius: 6 }, children: /* @__PURE__ */ jsx(Text, { style: { color: "#fff", fontSize: 13, fontWeight: "600" }, children: sh.text }) }, sh.id);
+      }),
+      /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, ...pan.panHandlers })
+    ] }) }),
+    /* @__PURE__ */ jsx(View, { style: [styles2.toolbarWrap, { bottom: insets.bottom + 18 }], children: /* @__PURE__ */ jsx(AnnotateToolbar, { t, tool, color, onTool: setTool, onColor: setColor, onUndo: undo }) })
+  ] }) });
+}
+var styles2 = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: "rgba(8,10,18,0.94)" },
+  header: { position: "absolute", top: 0, left: 0, right: 0, flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 14, zIndex: 6 },
+  hdrTitle: { color: "#fff", fontSize: 15, fontWeight: "600" },
+  hdrGhost: { paddingHorizontal: 10, paddingVertical: 8 },
+  hdrGhostText: { color: "#fff", fontSize: 14, fontWeight: "500" },
+  hdrPrimary: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 10 },
+  editBar: { position: "absolute", left: 16, right: 16, flexDirection: "row", alignItems: "center", gap: 8, paddingLeft: 12, paddingRight: 6, paddingVertical: 4, borderRadius: 12, borderWidth: 1, zIndex: 7 },
+  editDone: { paddingHorizontal: 14, paddingVertical: 7, borderRadius: 9 },
+  stageWrap: { flex: 1, alignItems: "center", justifyContent: "center" },
+  stage: { borderRadius: 10, overflow: "hidden", backgroundColor: "#000" },
+  toolbarWrap: { position: "absolute", left: 16, right: 16, alignItems: "center" }
+});
+var BugReporterCaptureRefContext = createContext(null);
+var CurrentRefContext = createContext(null);
+function BugReporterCaptureRefProvider({ children }) {
+  const [currentRef, setCurrentRef] = useState(null);
+  const setRef = useCallback((ref) => {
+    setCurrentRef(() => ref);
+  }, []);
+  return /* @__PURE__ */ jsx(BugReporterCaptureRefContext.Provider, { value: setRef, children: /* @__PURE__ */ jsx(CurrentRefContext.Provider, { value: currentRef, children }) });
+}
+function useSetBugReporterCaptureRef(ref) {
+  const setRef = useContext(BugReporterCaptureRefContext);
+  React2.useEffect(() => {
+    setRef?.(ref);
+    return () => setRef?.(null);
+  }, [setRef, ref]);
+}
+function useBugReporterCaptureRef() {
+  return useContext(CurrentRefContext);
+}
+function BugReporterScreenCaptureView({
+  children,
+  style
+}) {
+  const ref = useRef(null);
+  useSetBugReporterCaptureRef(ref);
+  return /* @__PURE__ */ jsx(View, { ref, collapsable: false, style: [{ flex: 1 }, style], children });
+}
+function BugReportForm(props) {
+  const { t } = props;
+  const [metaOpen, setMetaOpen] = useState(true);
+  const canSubmit = props.title.trim().length > 0 && !props.submitting;
+  return /* @__PURE__ */ jsxs(View, { style: [styles3.root, { backgroundColor: t.panel }], children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles3.header, { borderBottomColor: t.border }], children: [
+      /* @__PURE__ */ jsx(TouchableOpacity, { onPress: props.onBack, style: [styles3.hdrBtn, { borderColor: t.border, backgroundColor: t.surface }], children: /* @__PURE__ */ jsx(Svg3, { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: "M15 5l-7 7 7 7", stroke: t.muted, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles3.title, { color: t.text }], children: "New bug report" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles3.subtitle, { color: t.muted }], children: "Review & describe the issue" })
+      ] }),
+      /* @__PURE__ */ jsx(TouchableOpacity, { onPress: props.onClose, style: [styles3.hdrBtn, { borderColor: t.border, backgroundColor: t.surface }], children: /* @__PURE__ */ jsx(Svg3, { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: "M6 6l12 12M18 6L6 18", stroke: t.muted, strokeWidth: 2.2, strokeLinecap: "round" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(ScrollView, { style: { flex: 1 }, contentContainerStyle: { padding: 16, gap: 18 }, keyboardShouldPersistTaps: "handled", children: [
+      /* @__PURE__ */ jsxs(View, { style: [styles3.shotRow, { borderColor: t.border, backgroundColor: t.surface }], children: [
+        /* @__PURE__ */ jsx(View, { style: { width: 54, height: 38, borderRadius: 6, overflow: "hidden", backgroundColor: t.canvas, borderWidth: 1, borderColor: t.border }, children: props.screenshotUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: props.screenshotUrl }, style: { width: "100%", height: "100%" }, resizeMode: "cover" }) : null }),
+        /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Text, { style: { fontSize: 13, fontWeight: "500", color: t.text }, children: "Screenshot attached" }),
+          /* @__PURE__ */ jsxs(Text, { style: { fontSize: 12, color: t.muted, marginTop: 1 }, children: [
+            props.annotationCount,
+            " annotation",
+            props.annotationCount === 1 ? "" : "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: props.onEditAnnotations, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontWeight: "500", color: t.accent }, children: "Edit" }) })
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { gap: 7 }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles3.label, { color: t.muted }], children: "Summary" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: props.title,
+            onChangeText: props.onTitle,
+            placeholder: "Chart tooltip overflows on hover",
+            placeholderTextColor: t.faint,
+            style: [styles3.input, { color: t.text, backgroundColor: t.surface, borderColor: t.border }]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { gap: 7 }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles3.label, { color: t.muted }], children: "What happened?" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: props.description,
+            onChangeText: props.onDescription,
+            placeholder: "Steps to reproduce, expected vs actual\u2026",
+            placeholderTextColor: t.faint,
+            multiline: true,
+            style: [styles3.input, styles3.textArea, { color: t.text, backgroundColor: t.surface, borderColor: t.border }]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles3.label, { color: t.muted }], children: "Severity" }),
+        /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: 6 }, children: SEVERITIES.map((s) => {
+          const active = props.severity === s.id;
+          return /* @__PURE__ */ jsxs(
+            TouchableOpacity,
+            {
+              onPress: () => props.onSeverity(s.id),
+              style: [styles3.sev, { borderColor: active ? t.accent : t.border, backgroundColor: active ? t.ring : t.surface }],
+              children: [
+                /* @__PURE__ */ jsx(View, { style: { width: 9, height: 9, borderRadius: 5, backgroundColor: s.color, opacity: active ? 1 : 0.55 } }),
+                /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontWeight: active ? "600" : "500", color: active ? t.text : t.muted }, children: s.label })
+              ]
+            },
+            s.id
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: { gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles3.label, { color: t.muted }], children: "Type" }),
+        /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", flexWrap: "wrap", gap: 6 }, children: REPORT_TYPES.map((rt) => {
+          const active = props.type === rt.id;
+          return /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              onPress: () => props.onType(rt.id),
+              style: { paddingVertical: 7, paddingHorizontal: 13, borderRadius: 999, borderWidth: 1, borderColor: active ? t.accent : t.border, backgroundColor: active ? t.accent : t.surface },
+              children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12.5, fontWeight: active ? "600" : "500", color: active ? t.onAccent : t.muted }, children: rt.label })
+            },
+            rt.id
+          );
+        }) })
+      ] }),
+      props.meta.length > 0 && /* @__PURE__ */ jsxs(View, { style: { borderWidth: 1, borderColor: t.border, borderRadius: 10, overflow: "hidden", backgroundColor: t.surface }, children: [
+        /* @__PURE__ */ jsxs(TouchableOpacity, { onPress: () => setMetaOpen((o) => !o), style: { flexDirection: "row", alignItems: "center", gap: 8, padding: 11 }, children: [
+          /* @__PURE__ */ jsx(Svg3, { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: "M4 7h16M4 12h16M4 17h10", stroke: t.muted, strokeWidth: 2, strokeLinecap: "round" }) }),
+          /* @__PURE__ */ jsx(Text, { style: { flex: 1, fontSize: 12.5, fontWeight: "600", color: t.text }, children: "Auto-captured context" }),
+          /* @__PURE__ */ jsxs(Text, { style: { fontSize: 11, color: t.muted }, children: [
+            props.meta.length,
+            " fields"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { style: { color: t.muted, fontSize: 11 }, children: metaOpen ? "\u25B2" : "\u25BC" })
+        ] }),
+        metaOpen && /* @__PURE__ */ jsx(View, { style: { borderTopWidth: 1, borderTopColor: t.border, paddingHorizontal: 12, paddingBottom: 8 }, children: props.meta.map((m, i) => /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 6, borderBottomWidth: 1, borderBottomColor: t.border }, children: [
+          /* @__PURE__ */ jsx(Text, { style: { color: t.muted, width: 64, fontSize: 11.5 }, children: m.label }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: { flex: 1, textAlign: "right", fontSize: 11.5, color: m.flag === "err" ? "#E5484D" : m.flag === "warn" ? "#F5A524" : t.text }, children: m.value })
+        ] }, i)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: [styles3.footer, { borderTopColor: t.border, backgroundColor: t.panel }], children: [
+      /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(Svg3, { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: "M4 13l4 4L20 5", stroke: t.ok, strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round" }) }),
+        /* @__PURE__ */ jsxs(Text, { style: { flex: 1, fontSize: 12, color: t.muted }, children: [
+          "Filing to ",
+          /* @__PURE__ */ jsx(Text, { style: { color: t.text, fontWeight: "600" }, children: props.backendName })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 5, backgroundColor: t.okBg, paddingHorizontal: 8, paddingVertical: 3, borderRadius: 999 }, children: [
+          /* @__PURE__ */ jsx(View, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: t.ok } }),
+          /* @__PURE__ */ jsx(Text, { style: { fontSize: 11, color: t.ok }, children: "connected" })
+        ] })
+      ] }),
+      props.error ? /* @__PURE__ */ jsx(Text, { style: { fontSize: 12.5, color: "#E5484D", fontWeight: "500" }, children: props.error }) : null,
+      /* @__PURE__ */ jsx(TouchableOpacity, { disabled: !canSubmit, onPress: props.onSubmit, style: [styles3.submit, { backgroundColor: t.accent, opacity: canSubmit ? 1 : 0.85 }], children: props.submitting ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: t.onAccent }) : /* @__PURE__ */ jsx(Text, { style: { color: t.onAccent, fontSize: 14, fontWeight: "600" }, children: "Submit report" }) })
+    ] })
+  ] });
+}
+var styles3 = StyleSheet.create({
+  root: { flex: 1, overflow: "hidden" },
+  header: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 16, paddingTop: 16, paddingBottom: 14, borderBottomWidth: 1 },
+  hdrBtn: { width: 30, height: 30, borderRadius: 8, borderWidth: 1, alignItems: "center", justifyContent: "center" },
+  title: { fontSize: 15, fontWeight: "600" },
+  subtitle: { fontSize: 12, marginTop: 1 },
+  shotRow: { flexDirection: "row", alignItems: "center", gap: 12, padding: 10, borderWidth: 1, borderRadius: 10 },
+  label: { fontSize: 12, fontWeight: "600" },
+  input: { borderWidth: 1, borderRadius: 9, paddingHorizontal: 12, paddingVertical: 10, fontSize: 14 },
+  textArea: { minHeight: 78, textAlignVertical: "top" },
+  sev: { flex: 1, alignItems: "center", gap: 5, paddingVertical: 9, paddingHorizontal: 4, borderRadius: 9, borderWidth: 1 },
+  footer: { borderTopWidth: 1, paddingHorizontal: 16, paddingTop: 12, paddingBottom: 14, gap: 11 },
+  submit: { paddingVertical: 12, borderRadius: 10, alignItems: "center", justifyContent: "center" }
+});
+var CAPTURE_DELAY_MS = 400;
+var CAPTURE_TIMEOUT_MS = 8e3;
+function viewShotOptions(result, options) {
+  const format = options?.format === "jpeg" ? "jpg" : "png";
+  const quality = options?.quality ?? (format === "jpg" ? 0.92 : 1);
+  return { format, quality, result };
+}
+function waitForLayout() {
+  return new Promise((resolve) => {
+    InteractionManager.runAfterInteractions(() => {
+      setTimeout(resolve, CAPTURE_DELAY_MS);
+    });
+  });
+}
+function doCapture(viewRef, options) {
+  const view = viewRef?.current;
+  if (!view) return Promise.resolve(void 0);
+  return captureRef(viewRef, viewShotOptions("data-uri", options)).then((uri) => typeof uri === "string" ? uri : void 0).catch(() => void 0);
+}
+async function captureViewBase64(viewRef, options) {
+  await waitForLayout();
+  if (!viewRef) return void 0;
+  try {
+    const base64 = await captureRef(viewRef, viewShotOptions("base64", options));
+    return typeof base64 === "string" ? base64 : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function withTimeout(p, ms) {
+  return Promise.race([
+    p,
+    new Promise((_, reject) => setTimeout(() => reject(new Error("Capture timeout")), ms))
+  ]);
+}
+function imageUriFromCapture(uri) {
+  if (uri.startsWith("data:")) return uri;
+  if (uri.startsWith("file://")) return uri;
+  if (uri.startsWith("/")) {
+    return Platform.OS === "android" ? "file://" + uri : uri;
+  }
+  return uri;
+}
+async function captureScreenDataUri(options) {
+  await waitForLayout();
+  for (const resultType of ["data-uri", "tmpfile"]) {
+    try {
+      const uri = await withTimeout(
+        captureScreen(viewShotOptions(resultType, options)),
+        CAPTURE_TIMEOUT_MS
+      );
+      if (typeof uri === "string" && uri.length > 0) {
+        return imageUriFromCapture(uri);
+      }
+    } catch {
+    }
+  }
+  return void 0;
+}
+async function captureViewDataUri(viewRef, options) {
+  try {
+    let dataUri = await captureScreenDataUri(options);
+    if (!dataUri && viewRef?.current) {
+      dataUri = await doCapture(viewRef, options);
+      if (!dataUri) {
+        await new Promise((r) => setTimeout(r, 150));
+        dataUri = await doCapture(viewRef, options);
+      }
+    }
+    return dataUri;
+  } catch {
+    return void 0;
+  }
+}
+function dataUrlToBase64(dataUrl) {
+  return dataUrl.replace(/^data:image\/\w+;base64,/, "");
+}
+function SuccessCard({ t, ticket, ticketTitle, backendName, onDone }) {
+  return /* @__PURE__ */ jsx(View, { style: styles4.backdrop, children: /* @__PURE__ */ jsxs(View, { style: [styles4.card, { backgroundColor: t.panel, borderColor: t.border }], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles4.check, { backgroundColor: t.okBg }], children: /* @__PURE__ */ jsx(Svg3, { width: 27, height: 27, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: "M4 13l5 5L20 6", stroke: t.ok, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+    /* @__PURE__ */ jsx(Text, { style: [styles4.title, { color: t.text }], children: "Report filed" }),
+    /* @__PURE__ */ jsxs(Text, { style: [styles4.sub, { color: t.muted }], children: [
+      "Tracked in ",
+      backendName,
+      " automatically."
+    ] }),
+    ticket ? /* @__PURE__ */ jsxs(View, { style: [styles4.ticket, { backgroundColor: t.surface, borderColor: t.border }], children: [
+      /* @__PURE__ */ jsx(Text, { style: { color: t.accent, fontWeight: "600", fontSize: 13 }, children: ticket }),
+      /* @__PURE__ */ jsx(Text, { style: { color: t.faint }, children: "\xB7" }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: { color: t.muted, fontSize: 13, flexShrink: 1 }, children: ticketTitle })
+    ] }) : null,
+    /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: 8, marginTop: ticket ? 0 : 16 }, children: /* @__PURE__ */ jsx(TouchableOpacity, { onPress: onDone, style: [styles4.btn, { borderWidth: 1, borderColor: t.border, backgroundColor: t.surface }], children: /* @__PURE__ */ jsx(Text, { style: { color: t.text, fontSize: 13.5, fontWeight: "600" }, children: "Done" }) }) })
+  ] }) });
+}
+var styles4 = StyleSheet.create({
+  backdrop: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "rgba(8,10,18,0.55)", padding: 24 },
+  card: { width: 312, maxWidth: "100%", borderWidth: 1, borderRadius: 18, padding: 26, alignItems: "center" },
+  check: { width: 54, height: 54, borderRadius: 27, alignItems: "center", justifyContent: "center", marginBottom: 15 },
+  title: { fontSize: 17, fontWeight: "600" },
+  sub: { fontSize: 13, marginTop: 5, textAlign: "center", lineHeight: 19 },
+  ticket: { flexDirection: "row", alignItems: "center", gap: 9, marginVertical: 16, paddingVertical: 11, paddingHorizontal: 11, borderWidth: 1, borderRadius: 10, alignSelf: "stretch", justifyContent: "center" },
+  btn: { flex: 1, paddingVertical: 11, borderRadius: 10, alignItems: "center" }
+});
+function buildMeta(config) {
+  const rows = [];
+  rows.push({ label: "Platform", value: `${Platform.OS} ${String(Platform.Version)}` });
+  rows.push({ label: "Release", value: config.appVersion ? `${config.appName}@${config.appVersion}` : config.appName });
+  const di = config.deviceInfo ?? {};
+  if (di.model) rows.push({ label: "Device", value: String(di.model) });
+  const win = Dimensions.get("window");
+  const scr = Dimensions.get("screen");
+  rows.push({ label: "Viewport", value: `${Math.round(win.width)} \xD7 ${Math.round(win.height)}` });
+  rows.push({ label: "Screen", value: `${Math.round(scr.width)} \xD7 ${Math.round(scr.height)} @${PixelRatio.get()}x` });
+  rows.push({ label: "Font scale", value: String(PixelRatio.getFontScale()) });
+  rows.push({ label: "Orientation", value: win.width > win.height ? "landscape" : "portrait" });
+  const scheme = Appearance.getColorScheme();
+  if (scheme) rows.push({ label: "Scheme", value: scheme });
+  try {
+    const opts = Intl.DateTimeFormat().resolvedOptions();
+    if (opts.locale) rows.push({ label: "Language", value: opts.locale });
+    if (opts.timeZone) rows.push({ label: "Timezone", value: opts.timeZone });
+  } catch {
+  }
+  const diag = config.collectDiagnostics?.();
+  const crumbs = diag?.breadcrumbs ?? [];
+  const errs = crumbs.filter((b) => b.level === "error").length;
+  const warns = crumbs.filter((b) => b.level === "warn").length;
+  if (errs || warns) rows.push({ label: "Console", value: `${errs} error${errs === 1 ? "" : "s"} \xB7 ${warns} warning${warns === 1 ? "" : "s"}`, flag: errs ? "err" : "warn" });
+  if (diag?.lastFailedApiCall) rows.push({ label: "Network", value: "1 failed request", flag: "warn" });
+  return rows;
+}
+function BugReporterButton({ config, captureRef: captureRef3, label = "Report a bug" }) {
+  const theme = useMemo(() => resolveTheme(config.theme), [config.theme]);
+  const backendName = config.backendName ?? "ClickUp";
+  const contextRef = useBugReporterCaptureRef();
+  const effectiveRef = captureRef3 ?? contextRef;
+  const [step, setStep] = useState("idle");
+  const [flash, setFlash] = useState(false);
+  const [screenshot, setScreenshot] = useState();
+  const [edited, setEdited] = useState();
+  const [annCount, setAnnCount] = useState(0);
+  const [title, setTitle] = useState("");
+  const [desc, setDesc] = useState("");
+  const [severity, setSeverity] = useState("medium");
+  const [type, setType] = useState("bug");
+  const [ticket, setTicket] = useState();
+  const [error, setError] = useState();
+  const [meta, setMeta] = useState([]);
+  const ping = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(ping, { toValue: 1, duration: 1900, easing: Easing.out(Easing.ease), useNativeDriver: true })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [ping]);
+  const initial = Dimensions.get("window");
+  const pan = useRef(new Animated.ValueXY({ x: initial.width - FAB_SIZE - 22, y: initial.height - FAB_SIZE - 120 })).current;
+  const dragging = useRef(false);
+  const openRef = useRef(() => {
+  });
+  const fabPan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
+      onPanResponderGrant: () => {
+        dragging.current = false;
+        pan.extractOffset();
+      },
+      onPanResponderMove: (_e, g) => {
+        if (Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5) dragging.current = true;
+        pan.setValue({ x: g.dx, y: g.dy });
+      },
+      onPanResponderRelease: () => {
+        pan.flattenOffset();
+        if (!dragging.current) {
+          openRef.current();
+          return;
+        }
+        const win = Dimensions.get("window");
+        const cx = pan.x._value;
+        const cy = pan.y._value;
+        const targetX = cx + FAB_SIZE / 2 < win.width / 2 ? 22 : win.width - FAB_SIZE - 22;
+        const targetY = Math.max(60, Math.min(cy, win.height - FAB_SIZE - 90));
+        Animated.spring(pan, { toValue: { x: targetX, y: targetY }, useNativeDriver: false, friction: 7, tension: 40 }).start();
+      }
+    })
+  ).current;
+  useEffect(() => {
+    void getReportQueue(config)?.flush(config);
+  }, []);
+  const queue = getReportQueue(config);
+  const reset = () => {
+    setStep("idle");
+    setFlash(false);
+    setScreenshot(void 0);
+    setEdited(void 0);
+    setAnnCount(0);
+    setTitle("");
+    setDesc("");
+    setSeverity("medium");
+    setType("bug");
+    setTicket(void 0);
+    setError(void 0);
+  };
+  const open = async () => {
+    if (step !== "idle") return;
+    setStep("capturing");
+    const shot = await captureViewDataUri(effectiveRef ?? void 0, config.screenshot);
+    setScreenshot(shot);
+    setFlash(true);
+    setTimeout(() => {
+      setFlash(false);
+      setStep("annotate");
+    }, 220);
+  };
+  openRef.current = open;
+  const onContinue = (flattened, count) => {
+    setEdited(flattened);
+    setAnnCount(count);
+    setMeta(buildMeta(config));
+    setStep("form");
+    if (config.collectContext) {
+      void (async () => {
+        try {
+          const extra = normalizeContext(await config.collectContext());
+          if (extra.length) setMeta((m) => [...m, ...extra]);
+        } catch {
+        }
+      })();
+    }
+  };
+  const submit = async () => {
+    if (!title.trim()) return;
+    setStep("submitting");
+    setError(void 0);
+    const shot = edited ?? screenshot;
+    const options = {
+      title: title.trim(),
+      description: desc.trim(),
+      screenshotBase64: shot?.startsWith("data:") ? dataUrlToBase64(shot) : void 0,
+      isReportingProblem: true,
+      severity,
+      type,
+      context: meta.map((m) => ({ label: m.label, value: m.value })),
+      metadata: { platform: Platform.OS, osVersion: Platform.Version?.toString() }
+    };
+    try {
+      const res = await submitReport(config, options);
+      if (res.success) {
+        setTicket(res.id);
+        setStep("done");
+      } else if (queue) {
+        await queue.enqueue(options);
+        setStep("done");
+      } else {
+        setError(res.message || "Submission failed.");
+        setStep("form");
+      }
+    } catch (e) {
+      if (queue) {
+        await queue.enqueue(options);
+        setStep("done");
+      } else {
+        setError(e instanceof Error ? e.message : "Submission failed.");
+        setStep("form");
+      }
+    }
+  };
+  const pingStyle = {
+    transform: [{ scale: ping.interpolate({ inputRange: [0, 1], outputRange: [1, 1.9] }) }],
+    opacity: ping.interpolate({ inputRange: [0, 0.8, 1], outputRange: [0.55, 0, 0] })
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    step === "idle" && /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: label,
+        ...fabPan.panHandlers,
+        style: [styles5.fab, { backgroundColor: theme.accent, transform: pan.getTranslateTransform() }],
+        children: [
+          /* @__PURE__ */ jsx(Animated.View, { style: [styles5.ping, { borderColor: theme.accent }, pingStyle], pointerEvents: "none" }),
+          /* @__PURE__ */ jsxs(Svg3, { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", children: [
+            /* @__PURE__ */ jsx(Path, { d: "M8 11a4 4 0 018 0v3a4 4 0 01-8 0z", stroke: "#fff", strokeWidth: 1.7 }),
+            /* @__PURE__ */ jsx(Circle, { cx: 12, cy: 7.2, r: 2, stroke: "#fff", strokeWidth: 1.6 }),
+            /* @__PURE__ */ jsx(Path, { d: "M10.4 5.6L9 4.2M13.6 5.6L15 4.2M8 12H5.4M8 15H5.6M16 12h2.6M16 15h2.4M8.4 17.6l-1.8 1.8M15.6 17.6l1.8 1.8", stroke: "#fff", strokeWidth: 1.5, strokeLinecap: "round" })
+          ] })
+        ]
+      }
+    ),
+    flash && /* @__PURE__ */ jsx(Modal, { transparent: true, animationType: "none", children: /* @__PURE__ */ jsx(View, { style: styles5.flash, pointerEvents: "none" }) }),
+    step === "annotate" && screenshot && /* @__PURE__ */ jsx(AnnotateOverlay, { t: theme, visible: true, src: screenshot, onCancel: reset, onContinue }),
+    /* @__PURE__ */ jsx(Modal, { visible: step === "form" || step === "submitting", transparent: true, animationType: "slide", onRequestClose: reset, children: /* @__PURE__ */ jsxs(View, { style: styles5.sheetBackdrop, children: [
+      /* @__PURE__ */ jsx(TouchableOpacity, { style: StyleSheet.absoluteFill, activeOpacity: 1, onPress: reset }),
+      /* @__PURE__ */ jsx(View, { style: styles5.sheet, children: /* @__PURE__ */ jsx(
+        BugReportForm,
+        {
+          t: theme,
+          screenshotUrl: edited ?? screenshot,
+          annotationCount: annCount,
+          title,
+          description: desc,
+          severity,
+          type,
+          meta,
+          backendName,
+          submitting: step === "submitting",
+          error,
+          onTitle: setTitle,
+          onDescription: setDesc,
+          onSeverity: setSeverity,
+          onType: setType,
+          onBack: () => setStep("annotate"),
+          onClose: reset,
+          onEditAnnotations: () => setStep("annotate"),
+          onSubmit: submit
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Modal, { visible: step === "done", transparent: true, animationType: "fade", onRequestClose: reset, children: /* @__PURE__ */ jsx(
+      SuccessCard,
+      {
+        t: theme,
+        ticket,
+        ticketTitle: title.trim() || "Untitled report",
+        backendName,
+        onDone: reset
+      }
+    ) })
+  ] });
+}
+var FAB_SIZE = 56;
+var styles5 = StyleSheet.create({
+  fab: { position: "absolute", top: 0, left: 0, width: FAB_SIZE, height: FAB_SIZE, borderRadius: FAB_SIZE / 2, alignItems: "center", justifyContent: "center", shadowColor: "#000", shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.34, shadowRadius: 18, elevation: 8, zIndex: 9999 },
+  ping: { position: "absolute", width: FAB_SIZE, height: FAB_SIZE, borderRadius: FAB_SIZE / 2, borderWidth: 2 },
+  flash: { flex: 1, backgroundColor: "#fff" },
+  sheetBackdrop: { flex: 1, justifyContent: "flex-end", backgroundColor: "rgba(8,10,18,0.5)" },
+  sheet: { height: "92%", borderTopLeftRadius: 26, borderTopRightRadius: 26, overflow: "hidden" }
+});
+
+export { AnnotateOverlay, AnnotateToolbar, BugReportForm, BugReporterButton, BugReporterCaptureRefProvider, BugReporterScreenCaptureView, SuccessCard, captureScreenDataUri, captureViewBase64, captureViewDataUri, dataUrlToBase64, useBugReporterCaptureRef, useSetBugReporterCaptureRef };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map