@outcode/bug-reporter-web 0.1.0

package/dist/index.js

@@ -0,0 +1,1274 @@
+'use strict';
+
+var react = require('react');
+var bugReporterCore = require('@outcode/bug-reporter-core');
+var jsxRuntime = require('react/jsx-runtime');
+var html2canvas = require('html2canvas');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
+
+// src/BugReporterButton.tsx
+
+// src/theme.ts
+function cssVars(t) {
+  return {
+    "--canvas": t.canvas,
+    "--surface": t.surface,
+    "--panel": t.panel,
+    "--border": t.border,
+    "--border-strong": t.borderStrong,
+    "--text": t.text,
+    "--muted": t.muted,
+    "--faint": t.faint,
+    "--accent": t.accent,
+    "--accent-press": t.accentPress,
+    "--on-accent": t.onAccent,
+    "--ring": t.ring,
+    "--ok": t.ok,
+    "--ok-bg": t.okBg,
+    "--shadow": t.shadow
+  };
+}
+var FONT = "'Geist','Geist Fallback',-apple-system,system-ui,sans-serif";
+var MONO = "'Geist Mono',ui-monospace,monospace";
+var KEYFRAMES = `
+@keyframes ocbr-spin{to{transform:rotate(360deg);}}
+@keyframes ocbr-flash{0%{opacity:0;}18%{opacity:.92;}100%{opacity:0;}}
+@keyframes ocbr-ping{0%{transform:scale(1);opacity:.55;}80%,100%{transform:scale(1.9);opacity:0;}}
+@keyframes ocbr-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
+@keyframes ocbr-panel-in{from{transform:translateX(24px);opacity:0;}to{transform:translateX(0);opacity:1;}}
+@keyframes ocbr-fade{from{opacity:0;}to{opacity:1;}}
+@keyframes ocbr-pop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}
+`;
+var injected = false;
+function ensureKeyframes() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-ocbr", "");
+  el.textContent = KEYFRAMES;
+  document.head.appendChild(el);
+}
+function AnnotateToolbar({
+  tool,
+  color,
+  onTool,
+  onColor,
+  onUndo,
+  onClear,
+  onContinue
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 7,
+        background: "var(--panel)",
+        border: "1px solid var(--border)",
+        borderRadius: 14,
+        boxShadow: "var(--shadow)",
+        fontFamily: FONT,
+        width: "100%",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: bugReporterCore.ANNOTATION_TOOLS.map((t) => {
+          const active = tool === t.id;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: t.label,
+              onClick: () => onTool(t.id),
+              style: {
+                width: 36,
+                height: 36,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                borderRadius: 10,
+                background: active ? "var(--ring)" : "transparent",
+                color: active ? "var(--accent)" : "var(--muted)",
+                cursor: "pointer",
+                padding: 0
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: t.iconPath,
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            },
+            t.id
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 7,
+              padding: "0 4px",
+              borderLeft: "1px solid var(--border)",
+              borderRight: "1px solid var(--border)"
+            },
+            children: bugReporterCore.ANNOTATION_COLORS.map((c) => {
+              const active = color === c;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "color",
+                  onClick: () => onColor(c),
+                  style: {
+                    width: active ? 20 : 18,
+                    height: active ? 20 : 18,
+                    borderRadius: "50%",
+                    border: "2px solid var(--panel)",
+                    background: c,
+                    cursor: "pointer",
+                    padding: 0,
+                    boxShadow: active ? "0 0 0 2px var(--accent)" : "0 0 0 1px var(--border)"
+                  }
+                },
+                c
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Undo",
+              onClick: onUndo,
+              style: iconBtn,
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M9 14L4 9l5-5M4 9h11a5 5 0 010 10h-3",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", title: "Clear all", onClick: onClear, style: iconBtn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onContinue,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 7,
+              height: 36,
+              padding: "0 14px",
+              border: "none",
+              borderRadius: 10,
+              background: "var(--accent)",
+              color: "var(--on-accent)",
+              fontFamily: "inherit",
+              fontSize: 13.5,
+              fontWeight: 600,
+              cursor: "pointer"
+            },
+            children: [
+              "Continue",
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M5 12h14M13 6l6 6-6 6",
+                  stroke: "currentColor",
+                  strokeWidth: "2.2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var iconBtn = {
+  width: 36,
+  height: 36,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "none",
+  borderRadius: 10,
+  background: "transparent",
+  color: "var(--muted)",
+  cursor: "pointer",
+  padding: 0
+};
+
+// src/flatten.ts
+function rectOf(b, sx, sy) {
+  const x = Math.min(b.x0, b.x1) * sx;
+  const y = Math.min(b.y0, b.y1) * sy;
+  const w = Math.abs(b.x1 - b.x0) * sx;
+  const h = Math.abs(b.y1 - b.y0) * sy;
+  return { x, y, w, h };
+}
+function flattenAnnotations(src, shapes, dispW, dispH) {
+  return new Promise((resolve) => {
+    if (typeof document === "undefined") return resolve(src);
+    const img = new Image();
+    img.onerror = () => resolve(src);
+    img.onload = () => {
+      const natW = img.naturalWidth || dispW;
+      const natH = img.naturalHeight || dispH;
+      const sx = dispW ? natW / dispW : 1;
+      const sy = dispH ? natH / dispH : 1;
+      const canvas = document.createElement("canvas");
+      canvas.width = natW;
+      canvas.height = natH;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return resolve(src);
+      ctx.drawImage(img, 0, 0, natW, natH);
+      shapes.forEach((s) => {
+        if (s.type !== "blur") return;
+        const { x, y, w, h } = rectOf(s, sx, sy);
+        ctx.fillStyle = "#7A7D88";
+        ctx.fillRect(x, y, w, h);
+      });
+      const lw = 3.5 * ((sx + sy) / 2);
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      shapes.forEach((s) => {
+        ctx.strokeStyle = s.color;
+        ctx.fillStyle = s.color;
+        ctx.lineWidth = lw;
+        if (s.type === "pen") {
+          if (s.points.length < 2) return;
+          ctx.beginPath();
+          ctx.moveTo(s.points[0].x * sx, s.points[0].y * sy);
+          s.points.slice(1).forEach((p) => ctx.lineTo(p.x * sx, p.y * sy));
+          ctx.stroke();
+        } else if (s.type === "rect") {
+          const { x, y, w, h } = rectOf(s, sx, sy);
+          ctx.strokeRect(x, y, w, h);
+        } else if (s.type === "arrow") {
+          const x0 = s.x0 * sx;
+          const y0 = s.y0 * sy;
+          const x1 = s.x1 * sx;
+          const y1 = s.y1 * sy;
+          const ang = Math.atan2(y1 - y0, x1 - x0);
+          const hl = 15 * ((sx + sy) / 2);
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(x1 - hl * Math.cos(ang - Math.PI / 7), y1 - hl * Math.sin(ang - Math.PI / 7));
+          ctx.lineTo(x1, y1);
+          ctx.lineTo(x1 - hl * Math.cos(ang + Math.PI / 7), y1 - hl * Math.sin(ang + Math.PI / 7));
+          ctx.stroke();
+        } else if (s.type === "text" && s.text.trim()) {
+          const fs = 13 * sy;
+          ctx.font = `600 ${fs}px 'Geist',sans-serif`;
+          const padX = 8 * sx;
+          const padY = 4 * sy;
+          const tw = ctx.measureText(s.text).width;
+          const bx = s.x * sx;
+          const by = s.y * sy - (fs + padY * 2) / 2;
+          ctx.fillStyle = s.color;
+          const r = 6 * sy;
+          roundRect(ctx, bx, by, tw + padX * 2, fs + padY * 2, r);
+          ctx.fill();
+          ctx.fillStyle = "#ffffff";
+          ctx.textBaseline = "middle";
+          ctx.fillText(s.text, bx + padX, by + (fs + padY * 2) / 2);
+        }
+      });
+      resolve(canvas.toDataURL("image/png"));
+    };
+    img.src = src;
+  });
+}
+function roundRect(ctx, x, y, w, h, r) {
+  const rad = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rad, y);
+  ctx.arcTo(x + w, y, x + w, y + h, rad);
+  ctx.arcTo(x + w, y + h, x, y + h, rad);
+  ctx.arcTo(x, y + h, x, y, rad);
+  ctx.arcTo(x, y, x + w, y, rad);
+  ctx.closePath();
+}
+var PADDING = 24;
+var TOP_RESERVE = 150;
+var BOTTOM_RESERVE = 40;
+function AnnotateOverlay({ src, onCancel, onContinue }) {
+  const stageRef = react.useRef(null);
+  const idRef = react.useRef(0);
+  const [shapes, setShapes] = react.useState([]);
+  const [draft, setDraft] = react.useState(null);
+  const [tool, setTool] = react.useState("arrow");
+  const [color, setColor] = react.useState(bugReporterCore.ANNOTATION_COLORS[0]);
+  const [editingId, setEditingId] = react.useState(null);
+  const [dims, setDims] = react.useState({ width: 800, height: 480 });
+  const uid = () => `s${++idRef.current}`;
+  const recompute = react.useCallback((natW, natH) => {
+    const maxW = window.innerWidth - PADDING * 2;
+    const maxH = window.innerHeight - TOP_RESERVE - BOTTOM_RESERVE - PADDING * 2;
+    const aspect = natW / natH || 1.6;
+    let w = maxW;
+    let h = Math.round(maxW / aspect);
+    if (h > maxH) {
+      h = maxH;
+      w = Math.round(maxH * aspect);
+    }
+    setDims({ width: w, height: h });
+  }, []);
+  react.useEffect(() => {
+    const img = new Image();
+    img.onload = () => recompute(img.naturalWidth, img.naturalHeight);
+    img.onerror = () => recompute(1440, 900);
+    img.src = src;
+  }, [src, recompute]);
+  const getPt = (e) => {
+    const r = stageRef.current.getBoundingClientRect();
+    return {
+      x: Math.max(0, Math.min(r.width, e.clientX - r.left)),
+      y: Math.max(0, Math.min(r.height, e.clientY - r.top))
+    };
+  };
+  const onDown = (e) => {
+    if (!stageRef.current) return;
+    const p = getPt(e);
+    if (tool === "text") {
+      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) {
+          setEditingId(sh.id);
+          return;
+        }
+      }
+      const id = uid();
+      setShapes((s) => [...s, { id, type: "text", x: p.x, y: p.y, color, text: "" }]);
+      setEditingId(id);
+      return;
+    }
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    const d = tool === "pen" ? { id: uid(), type: "pen", color, points: [p] } : { id: uid(), type: tool, color, x0: p.x, y0: p.y, x1: p.x, y1: p.y };
+    setDraft(d);
+    setEditingId(null);
+  };
+  const onMove = (e) => {
+    setDraft((prev) => {
+      if (!prev) return prev;
+      const p = getPt(e);
+      if (prev.type === "pen") return { ...prev, points: [...prev.points, p] };
+      return { ...prev, x1: p.x, y1: p.y };
+    });
+  };
+  const onUp = () => {
+    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;
+    });
+  };
+  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 () => {
+    const flattened = await flattenAnnotations(src, shapes, dims.width, dims.height);
+    onContinue(flattened, shapes.length);
+  };
+  const all = draft ? [...shapes, draft] : shapes;
+  const svgEls = [];
+  const blurEls = [];
+  const labelEls = [];
+  all.forEach((sh) => {
+    if (sh.type === "blur") {
+      const x = Math.min(sh.x0, sh.x1);
+      const y = Math.min(sh.y0, sh.y1);
+      const w = Math.abs(sh.x1 - sh.x0);
+      const h = Math.abs(sh.y1 - sh.y0);
+      blurEls.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: x,
+              top: y,
+              width: w,
+              height: h,
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)",
+              background: "#7A7D88",
+              border: `1.5px dashed ${sh.color}`,
+              borderRadius: 5
+            }
+          },
+          sh.id
+        )
+      );
+    } else if (sh.type === "rect") {
+      const x = Math.min(sh.x0, sh.x1);
+      const y = Math.min(sh.y0, sh.y1);
+      svgEls.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x,
+            y,
+            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
+        )
+      );
+    } else if (sh.type === "pen") {
+      svgEls.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "polyline",
+          {
+            points: sh.points.map((p) => `${p.x},${p.y}`).join(" "),
+            fill: "none",
+            stroke: sh.color,
+            strokeWidth: 3.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          },
+          sh.id
+        )
+      );
+    } else if (sh.type === "arrow") {
+      const { x0, y0, x1, y1 } = sh;
+      const ang = Math.atan2(y1 - y0, x1 - x0);
+      const hl = 15;
+      svgEls.push(
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x0, y1: y0, x2: x1, y2: y1, stroke: sh.color, strokeWidth: 3.5, strokeLinecap: "round" }),
+          /* @__PURE__ */ jsxRuntime.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)
+      );
+    } else if (sh.type === "text") {
+      if (editingId === sh.id || !sh.text.trim()) return;
+      labelEls.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: sh.x,
+              top: sh.y,
+              transform: "translateY(-50%)",
+              background: sh.color,
+              color: "#fff",
+              padding: "3px 8px",
+              borderRadius: 6,
+              fontSize: 13,
+              fontWeight: 600,
+              fontFamily: FONT,
+              whiteSpace: "nowrap",
+              boxShadow: "0 1px 4px rgba(0,0,0,0.28)"
+            },
+            children: sh.text
+          },
+          sh.id
+        )
+      );
+    }
+  });
+  const editingShape = editingId != null ? shapes.find((s) => s.id === editingId && s.type === "text") : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483e3,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(8,10,18,0.92)",
+        fontFamily: FONT
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Cancel",
+            onClick: onCancel,
+            style: {
+              position: "absolute",
+              top: 18,
+              left: 18,
+              width: 36,
+              height: 36,
+              borderRadius: 9,
+              border: "1px solid rgba(255,255,255,0.18)",
+              background: "rgba(255,255,255,0.06)",
+              color: "#fff",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 24,
+              left: "50%",
+              transform: "translateX(-50%)",
+              background: "rgba(8,10,18,0.82)",
+              color: "#fff",
+              fontSize: 12,
+              fontWeight: 550,
+              padding: "6px 13px",
+              borderRadius: 999,
+              backdropFilter: "blur(6px)"
+            },
+            children: "Mark up the screenshot \u2014 draw, point, box, or blur sensitive data"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 62, left: "50%", transform: "translateX(-50%)", width: 600, maxWidth: "92vw", zIndex: 5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          AnnotateToolbar,
+          {
+            tool,
+            color,
+            onTool: setTool,
+            onColor: setColor,
+            onUndo: undo,
+            onClear: clearAll,
+            onContinue: handleContinue
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: dims.width, height: dims.height, marginTop: 70, borderRadius: 10, overflow: "hidden", boxShadow: "0 24px 70px rgba(0,0,0,0.5)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              alt: "Screenshot",
+              draggable: false,
+              style: { position: "absolute", inset: 0, width: dims.width, height: dims.height, objectFit: "contain", pointerEvents: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: blurEls }),
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "100%", height: "100%", style: { position: "absolute", inset: 0, overflow: "visible", pointerEvents: "none" }, children: svgEls }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: labelEls }),
+          editingShape && editingShape.type === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: (el) => {
+                if (el && document.activeElement !== el) el.focus();
+              },
+              value: editingShape.text,
+              placeholder: "Label\u2026",
+              onChange: (e) => updateText(editingShape.id, e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === "Escape") {
+                  e.preventDefault();
+                  commitText();
+                }
+              },
+              onBlur: commitText,
+              style: {
+                position: "absolute",
+                left: editingShape.x,
+                top: editingShape.y,
+                transform: "translateY(-50%)",
+                background: editingShape.color,
+                color: "#fff",
+                padding: "3px 8px",
+                borderRadius: 6,
+                fontSize: 13,
+                fontWeight: 600,
+                fontFamily: FONT,
+                border: "none",
+                outline: "none",
+                minWidth: 64,
+                boxShadow: "0 0 0 2px rgba(255,255,255,0.7),0 2px 10px rgba(0,0,0,0.3)",
+                zIndex: 30
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: stageRef,
+              onPointerDown: onDown,
+              onPointerMove: onMove,
+              onPointerUp: onUp,
+              onPointerCancel: onUp,
+              style: { position: "absolute", inset: 0, touchAction: "none", userSelect: "none", cursor: tool === "text" ? "text" : "crosshair" }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function BugReportForm(props) {
+  const [metaOpen, setMetaOpen] = react.useState(true);
+  const {
+    screenshotUrl,
+    annotationCount,
+    title,
+    description,
+    severity,
+    type,
+    meta,
+    backendName,
+    submitting,
+    error
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+        background: "var(--panel)",
+        color: "var(--text)",
+        fontFamily: FONT,
+        overflow: "hidden",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "16px 16px 14px", borderBottom: "1px solid var(--border)", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Back", onClick: props.onBack, style: hdrBtn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5l-7 7 7 7", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em" }, children: "New bug report" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--muted)", marginTop: 1 }, children: "Review & describe the issue" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", onClick: props.onClose, style: hdrBtn, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 18 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: 10, border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 54, height: 38, borderRadius: 6, background: "var(--canvas)", border: "1px solid var(--border)", overflow: "hidden", flexShrink: 0 }, children: screenshotUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: screenshotUrl, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 550 }, children: "Screenshot attached" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "var(--muted)", marginTop: 1, fontFamily: MONO }, children: [
+                annotationCount,
+                " annotation",
+                annotationCount === 1 ? "" : "s"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: props.onEditAnnotations, style: { fontSize: 12, fontWeight: 550, color: "var(--accent)", background: "none", border: "none", cursor: "pointer", padding: "6px 8px", borderRadius: 7 }, children: "Edit" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Summary", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              value: title,
+              onChange: (e) => props.onTitle(e.target.value),
+              placeholder: "Chart tooltip overflows on hover",
+              style: inputStyle
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "What happened?", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              value: description,
+              onChange: (e) => props.onDescription(e.target.value),
+              placeholder: "Steps to reproduce, expected vs actual\u2026",
+              style: { ...inputStyle, resize: "none", minHeight: 78, lineHeight: 1.5 }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Severity" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 6 }, children: bugReporterCore.SEVERITIES.map((s) => {
+              const active = severity === s.id;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => props.onSeverity(s.id),
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 5,
+                    padding: "9px 4px",
+                    borderRadius: 9,
+                    border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
+                    background: active ? "var(--ring)" : "var(--surface)",
+                    cursor: "pointer",
+                    fontFamily: "inherit"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 9, height: 9, borderRadius: "50%", background: s.color, opacity: active ? 1 : 0.55, boxShadow: active ? `0 0 0 3px color-mix(in srgb,${s.color} 22%,transparent)` : "none" } }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, fontWeight: active ? 600 : 550, color: active ? "var(--text)" : "var(--muted)" }, children: s.label })
+                  ]
+                },
+                s.id
+              );
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: bugReporterCore.REPORT_TYPES.map((t) => {
+              const active = type === t.id;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => props.onType(t.id),
+                  style: {
+                    padding: "7px 13px",
+                    borderRadius: 999,
+                    border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
+                    background: active ? "var(--accent)" : "var(--surface)",
+                    color: active ? "var(--on-accent)" : "var(--muted)",
+                    fontSize: 12.5,
+                    fontWeight: active ? 600 : 550,
+                    cursor: "pointer",
+                    fontFamily: "inherit"
+                  },
+                  children: t.label
+                },
+                t.id
+              );
+            }) })
+          ] }),
+          meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: "1px solid var(--border)", borderRadius: 10, overflow: "hidden", background: "var(--surface)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => setMetaOpen((o) => !o), style: { width: "100%", display: "flex", alignItems: "center", gap: 8, padding: "11px 12px", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit", color: "var(--text)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { color: "var(--muted)" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7h16M4 12h16M4 17h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, textAlign: "left", fontSize: 12.5, fontWeight: 600 }, children: "Auto-captured context" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 11, color: "var(--muted)", fontFamily: MONO }, children: [
+                meta.length,
+                " fields"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { color: "var(--muted)", transform: metaOpen ? "rotate(180deg)" : "rotate(0deg)", transition: "transform .18s" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            ] }),
+            metaOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid var(--border)", padding: "4px 12px 8px" }, children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "6px 0", borderBottom: "1px solid var(--border)", fontFamily: MONO, fontSize: 11.5 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--muted)", width: 62, flexShrink: 0 }, children: m.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, color: m.flag === "err" ? "#E5484D" : m.flag === "warn" ? "#F5A524" : "var(--text)", textAlign: "right", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: m.value })
+            ] }, i)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexShrink: 0, borderTop: "1px solid var(--border)", padding: "12px 16px 14px", display: "flex", flexDirection: "column", gap: 11, background: "var(--panel)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--muted)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 13l4 4L20 5", stroke: "var(--ok)", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { flex: 1 }, children: [
+              "Filing to ",
+              /* @__PURE__ */ jsxRuntime.jsx("b", { style: { color: "var(--text)", fontWeight: 600 }, children: backendName })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 5, fontFamily: MONO, fontSize: 11, color: "var(--ok)", background: "var(--ok-bg)", padding: "3px 8px", borderRadius: 999 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 6, height: 6, borderRadius: "50%", background: "var(--ok)" } }),
+              "connected"
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12.5, color: "#E5484D", fontWeight: 550 }, children: error }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: submitting || !title.trim(),
+              onClick: props.onSubmit,
+              style: {
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 9,
+                padding: 12,
+                borderRadius: 10,
+                border: "none",
+                background: "var(--accent)",
+                color: "var(--on-accent)",
+                fontSize: 14,
+                fontWeight: 600,
+                fontFamily: "inherit",
+                cursor: submitting || !title.trim() ? "default" : "pointer",
+                opacity: submitting || !title.trim() ? 0.85 : 1
+              },
+              children: [
+                submitting && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 15, height: 15, borderRadius: "50%", border: "2px solid var(--on-accent)", borderTopColor: "transparent", animation: "ocbr-spin .7s linear infinite", display: "inline-block" } }),
+                submitting ? "Filing report\u2026" : "Submit report"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Field({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 7 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
+    children
+  ] });
+}
+function Label({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { style: { fontSize: 12, fontWeight: 600, color: "var(--muted)", letterSpacing: "0.01em" }, children });
+}
+var hdrBtn = {
+  width: 30,
+  height: 30,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "1px solid var(--border)",
+  background: "var(--surface)",
+  borderRadius: 8,
+  cursor: "pointer",
+  color: "var(--muted)",
+  padding: 0
+};
+var inputStyle = {
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "10px 12px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  color: "var(--text)",
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: 9,
+  outline: "none"
+};
+var DEFAULTS = {
+  maxWidth: 1280,
+  format: "png",
+  quality: 0.92
+};
+function downscale(source, maxWidth) {
+  if (source.width <= maxWidth) return source;
+  const scale = maxWidth / source.width;
+  const target = document.createElement("canvas");
+  target.width = Math.round(source.width * scale);
+  target.height = Math.round(source.height * scale);
+  const ctx = target.getContext("2d");
+  if (!ctx) return source;
+  ctx.drawImage(source, 0, 0, target.width, target.height);
+  return target;
+}
+async function captureViewport(options) {
+  if (typeof document === "undefined" || typeof window === "undefined") return void 0;
+  const { maxWidth, format, quality } = { ...DEFAULTS, ...options };
+  try {
+    const canvas = await html2canvas__default.default(document.body, {
+      x: window.scrollX,
+      y: window.scrollY,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      useCORS: true,
+      allowTaint: true,
+      logging: false
+    });
+    const out = downscale(canvas, maxWidth);
+    const mime = format === "jpeg" ? "image/jpeg" : "image/png";
+    return out.toDataURL(mime, format === "jpeg" ? quality : void 0);
+  } catch {
+    return void 0;
+  }
+}
+function dataUrlToBase64(dataUrl) {
+  return dataUrl.replace(/^data:image\/\w+;base64,/, "");
+}
+
+// src/storage.ts
+function getDefaultWebStorage() {
+  try {
+    if (typeof localStorage === "undefined") return void 0;
+    const probe = "__outcode_bug_reporter_probe__";
+    localStorage.setItem(probe, "1");
+    localStorage.removeItem(probe);
+    return {
+      getItem: (key) => localStorage.getItem(key),
+      setItem: (key, value) => localStorage.setItem(key, value),
+      removeItem: (key) => localStorage.removeItem(key)
+    };
+  } catch {
+    return void 0;
+  }
+}
+function SuccessCard({ ticket, ticketTitle, backendName, onDone }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483100,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(8,10,18,0.5)",
+        animation: "ocbr-fade .25s",
+        fontFamily: FONT
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            width: 344,
+            maxWidth: "90vw",
+            background: "var(--panel)",
+            border: "1px solid var(--border)",
+            borderRadius: 18,
+            boxShadow: "var(--shadow)",
+            padding: 28,
+            textAlign: "center",
+            color: "var(--text)",
+            animation: "ocbr-pop .35s cubic-bezier(.2,1.1,.3,1)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 56, height: 56, borderRadius: "50%", background: "var(--ok-bg)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 13l5 5L20 6", stroke: "var(--ok)", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 18, fontWeight: 660, letterSpacing: "-0.01em" }, children: "Report filed" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 13.5, color: "var(--muted)", marginTop: 5, lineHeight: 1.45 }, children: [
+              "Tracked in ",
+              backendName,
+              " and routed to the right team automatically."
+            ] }),
+            ticket && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 9, margin: "18px 0", padding: 11, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, fontFamily: MONO, fontSize: 13 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--accent)", fontWeight: 600 }, children: ticket }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--faint)" }, children: "\xB7" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 180 }, children: ticketTitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8, marginTop: ticket ? 0 : 18 }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onDone, style: { flex: 1, padding: 11, borderRadius: 10, border: "1px solid var(--border)", background: "var(--surface)", color: "var(--text)", fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, cursor: "pointer" }, children: "Done" }) })
+          ]
+        }
+      )
+    }
+  );
+}
+function shortUA() {
+  if (typeof navigator === "undefined") return "\u2014";
+  const ua = navigator.userAgent;
+  const m = ua.match(/(Chrome|Firefox|Safari|Edg)\/[\d.]+/);
+  const os = /Mac/.test(ua) ? "macOS" : /Win/.test(ua) ? "Windows" : /Linux/.test(ua) ? "Linux" : "";
+  return [m ? m[0].replace("Edg", "Edge") : "Browser", os].filter(Boolean).join(" \xB7 ");
+}
+function buildMeta(config) {
+  const rows = [];
+  if (typeof location !== "undefined") rows.push({ label: "Route", value: location.pathname + location.search });
+  rows.push({ label: "Browser", value: shortUA() });
+  if (typeof window !== "undefined") rows.push({ label: "Viewport", value: `${window.innerWidth} \xD7 ${window.innerHeight} @${window.devicePixelRatio || 1}x` });
+  if (typeof navigator !== "undefined") {
+    let tz = "";
+    try {
+      tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    } catch {
+    }
+    rows.push({ label: "Locale", value: [navigator.language, tz].filter(Boolean).join(" \xB7 ") });
+  }
+  rows.push({ label: "Release", value: config.appVersion ? `${config.appName}@${config.appVersion}` : config.appName });
+  if (typeof navigator !== "undefined") {
+    if (navigator.language) rows.push({ label: "Language", value: navigator.language });
+    const conn = navigator.connection;
+    if (conn) {
+      const parts = [conn.type, conn.effectiveType, conn.saveData ? "data-saver" : void 0].filter(Boolean);
+      if (parts.length) rows.push({ label: "Connection", value: parts.join(" \xB7 ") });
+    }
+    if (typeof navigator.onLine === "boolean") rows.push({ label: "Online", value: navigator.onLine ? "online" : "offline" });
+    const mem = navigator.deviceMemory;
+    if (mem) rows.push({ label: "Memory", value: `${mem} GB` });
+    if (navigator.hardwareConcurrency) rows.push({ label: "CPU", value: `${navigator.hardwareConcurrency} cores` });
+  }
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    rows.push({ label: "Scheme", value: [dark ? "dark" : "light", reduced ? "reduced-motion" : void 0].filter(Boolean).join(" \xB7 ") });
+  }
+  if (typeof screen !== "undefined" && screen.width) {
+    rows.push({ label: "Screen", value: `${screen.width} \xD7 ${screen.height} \xB7 ${screen.colorDepth}-bit` });
+  }
+  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, label = "Report a bug", style }) {
+  const theme = react.useMemo(() => bugReporterCore.resolveTheme(config.theme), [config.theme]);
+  const backendName = config.backendName ?? "ClickUp";
+  const [step, setStep] = react.useState("idle");
+  const [screenshot, setScreenshot] = react.useState();
+  const [edited, setEdited] = react.useState();
+  const [annCount, setAnnCount] = react.useState(0);
+  const [title, setTitle] = react.useState("");
+  const [desc, setDesc] = react.useState("");
+  const [severity, setSeverity] = react.useState("medium");
+  const [type, setType] = react.useState("bug");
+  const [ticket, setTicket] = react.useState();
+  const [error, setError] = react.useState();
+  const [meta, setMeta] = react.useState([]);
+  react.useEffect(() => {
+    ensureKeyframes();
+    const storage = config.storage ?? getDefaultWebStorage();
+    if (storage) void new bugReporterCore.ReportQueue(storage).flush(config);
+  }, []);
+  const queue = react.useMemo(() => {
+    const storage = config.storage ?? getDefaultWebStorage();
+    return storage ? new bugReporterCore.ReportQueue(storage) : void 0;
+  }, [config.storage]);
+  const reset = () => {
+    setStep("idle");
+    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 captureViewport(config.screenshot);
+    setScreenshot(shot);
+    setStep("annotate");
+  };
+  const onContinue = (flattened, count) => {
+    setEdited(flattened);
+    setAnnCount(count);
+    setMeta(buildMeta(config));
+    setStep("form");
+    if (config.collectContext) {
+      void (async () => {
+        try {
+          const extra = bugReporterCore.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 ? dataUrlToBase64(shot) : void 0,
+      isReportingProblem: true,
+      severity,
+      type,
+      context: meta.map((m) => ({ label: m.label, value: m.value })),
+      metadata: { platform: "web", userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0 }
+    };
+    try {
+      const res = await bugReporterCore.submitReport(config, options);
+      if (res.success) {
+        setTicket(res.id);
+        setStep("done");
+      } else if (queue) {
+        await queue.enqueue(options);
+        setTicket(void 0);
+        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 submitting = step === "submitting";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...cssVars(theme), fontFamily: FONT }, children: [
+    step === "idle" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            bottom: 86,
+            right: 26,
+            background: "var(--panel)",
+            border: "1px solid var(--border)",
+            borderRadius: 11,
+            padding: "8px 13px",
+            fontSize: 12.5,
+            fontWeight: 600,
+            color: "var(--text)",
+            boxShadow: "var(--shadow)",
+            zIndex: 2147482900,
+            whiteSpace: "nowrap",
+            animation: "ocbr-float 3s ease-in-out infinite",
+            pointerEvents: "none"
+          },
+          children: "Spotted a bug? Tap \u2192"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          onClick: open,
+          style: {
+            position: "fixed",
+            bottom: 26,
+            right: 26,
+            width: 56,
+            height: 56,
+            borderRadius: "50%",
+            background: "var(--accent)",
+            border: "none",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 10px 28px rgba(40,40,90,0.34)",
+            zIndex: 2147482950,
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", inset: 0, borderRadius: "50%", border: "2px solid var(--accent)", animation: "ocbr-ping 1.9s ease-out infinite" } }),
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 11a4 4 0 018 0v3a4 4 0 01-8 0z", stroke: "#fff", strokeWidth: "1.7" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7.2", r: "2", stroke: "#fff", strokeWidth: "1.6" }),
+              /* @__PURE__ */ jsxRuntime.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" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    step === "capturing" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", inset: 0, background: "#fff", zIndex: 2147483200, animation: "ocbr-flash .7s ease-out forwards", pointerEvents: "none" } }),
+    step === "annotate" && screenshot && /* @__PURE__ */ jsxRuntime.jsx(AnnotateOverlay, { src: screenshot, onCancel: reset, onContinue }),
+    (step === "form" || step === "submitting") && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "fixed", inset: 0, zIndex: 2147483050, fontFamily: FONT }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: reset, style: { position: "absolute", inset: 0, background: "rgba(8,10,18,0.5)", animation: "ocbr-fade .25s" }, children: (edited ?? screenshot) && /* @__PURE__ */ jsxRuntime.jsx("img", { src: edited ?? screenshot, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", opacity: 0.25, filter: "blur(1px)" } }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: "min(400px, 100vw)",
+            boxShadow: "-14px 0 44px rgba(10,12,30,0.20)",
+            borderLeft: "1px solid var(--border)",
+            animation: "ocbr-panel-in .3s cubic-bezier(.2,.8,.2,1)"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            BugReportForm,
+            {
+              screenshotUrl: edited ?? screenshot,
+              annotationCount: annCount,
+              title,
+              description: desc,
+              severity,
+              type,
+              meta,
+              backendName,
+              submitting,
+              error,
+              onTitle: setTitle,
+              onDescription: setDesc,
+              onSeverity: setSeverity,
+              onType: setType,
+              onBack: () => setStep("annotate"),
+              onClose: reset,
+              onEditAnnotations: () => setStep("annotate"),
+              onSubmit: submit
+            }
+          )
+        }
+      )
+    ] }),
+    step === "done" && /* @__PURE__ */ jsxRuntime.jsx(
+      SuccessCard,
+      {
+        ticket,
+        ticketTitle: title.trim() || "Untitled report",
+        backendName,
+        onDone: reset
+      }
+    )
+  ] });
+}
+
+exports.AnnotateOverlay = AnnotateOverlay;
+exports.AnnotateToolbar = AnnotateToolbar;
+exports.BugReportForm = BugReportForm;
+exports.BugReporterButton = BugReporterButton;
+exports.SuccessCard = SuccessCard;
+exports.captureViewport = captureViewport;
+exports.cssVars = cssVars;
+exports.dataUrlToBase64 = dataUrlToBase64;
+exports.ensureKeyframes = ensureKeyframes;
+exports.flattenAnnotations = flattenAnnotations;
+exports.getDefaultWebStorage = getDefaultWebStorage;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map