bug-widget-library 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/bug-widget-library.cjs +1 -1
  2. package/dist/bug-widget-library.cjs.map +1 -1
  3. package/dist/bug-widget-library.css +1 -1
  4. package/dist/bug-widget-library.js +621 -662
  5. package/dist/bug-widget-library.js.map +1 -1
  6. package/dist/components/KonvaEditor.d.ts.map +1 -1
  7. package/package.json +5 -6
package/dist/bug-widget-library.js CHANGED
@@ -1,113 +1,112 @@
1
- import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
2
- import i from "html2canvas";
3
- import { AlertCircle as a, ArrowUpRight as o, Bug as s, Camera as c, Check as l, CheckCircle2 as u, Circle as ee, Edit3 as d, Eraser as te, Eye as f, Loader2 as p, MousePointer as ne, Palette as m, Pencil as h, Redo2 as g, Sparkles as _, Square as v, Trash2 as y, Undo2 as re, X as b } from "lucide-react";
4
- import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
5
- import { Arrow as w, Circle as T, Image as E, Layer as D, Line as O, Rect as k, Stage as A, Transformer as ie } from "react-konva";
1
+ import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
2
+ import a from "html2canvas";
3
+ import { AlertCircle as o, ArrowUpRight as s, Bug as c, Camera as l, Check as u, CheckCircle2 as d, Circle as f, Edit3 as p, Eraser as m, Eye as h, Loader2 as g, MousePointer as _, Palette as v, Pencil as y, Redo2 as b, Sparkles as x, Square as S, Trash2 as C, Undo2 as w, X as T } from "lucide-react";
4
+ import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
6
5
  //#region src/components/Form.tsx
7
- function j(e) {
6
+ function k(e) {
8
7
  try {
9
8
  return new URL(e).hostname;
10
9
  } catch {
11
10
  return "project";
12
11
  }
13
12
  }
14
- var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots: o, onTriggerScreenshot: s, onEditScreenshot: l, onDeleteScreenshot: ee, onSubmitReport: te }) => {
15
- let { position: ne = "bottom-right", primaryColor: m = "#2563eb", title: h = "Report a Bug", subtitle: g = "Found an issue? Let us know with details and screenshots.", placeholderTitle: v = "e.g. Broken checkout button on cart page", placeholderDescription: re = "Describe what happened, steps to reproduce, and expected result..." } = i, w = ((e) => e === "bottom-left" || e === "top-left" || e === "left")(ne), [T, E] = r(""), [D, O] = r(""), [k, A] = r(!1), [ie, M] = r(!1), [ae, N] = r(null), [P, F] = r({}), [I, L] = r(null), R = j(e), oe = () => {
13
+ var A = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: r = {}, screenshots: a, onTriggerScreenshot: s, onEditScreenshot: c, onDeleteScreenshot: u, onSubmitReport: f }) => {
14
+ let { position: m = "bottom-right", primaryColor: _ = "#2563eb", title: v = "Report a Bug", subtitle: y = "Found an issue? Let us know with details and screenshots.", placeholderTitle: b = "e.g. Broken checkout button on cart page", placeholderDescription: S = "Describe what happened, steps to reproduce, and expected result..." } = r, w = ((e) => e === "bottom-left" || e === "top-left" || e === "left")(m), [A, j] = i(""), [M, N] = i(""), [P, F] = i(!1), [ee, I] = i(!1), [L, R] = i(null), [z, B] = i({}), [te, V] = i(null), H = k(e), U = () => {
16
15
  let e = {};
17
- return T.trim() || (e.title = "Title / bug name is required."), D.trim() || (e.description = "Description is required."), F(e), Object.keys(e).length === 0;
16
+ return A.trim() || (e.title = "Title / bug name is required."), M.trim() || (e.description = "Description is required."), B(e), Object.keys(e).length === 0;
18
17
  };
19
- return /* @__PURE__ */ C(x, { children: [
20
- /* @__PURE__ */ S("div", {
18
+ return /* @__PURE__ */ O(E, { children: [
19
+ /* @__PURE__ */ D("div", {
21
20
  "data-bugdrop-widget": "true",
22
21
  onClick: n,
23
22
  className: `fixed inset-0 z-[99990] bg-slate-900/40 backdrop-blur-sm transition-opacity duration-300 ${t ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`
24
23
  }),
25
- /* @__PURE__ */ C("aside", {
24
+ /* @__PURE__ */ O("aside", {
26
25
  "data-bugdrop-widget": "true",
27
26
  className: `fixed top-0 z-[99995] flex h-full w-full max-w-md flex-col bg-white shadow-2xl transition-all duration-300 ease-out sm:max-w-lg ${w ? "left-0 border-r border-slate-200" : "right-0 border-l border-slate-200"} ${w ? t ? "translate-x-0 opacity-100 pointer-events-auto" : "-translate-x-full opacity-0 pointer-events-none" : t ? "translate-x-0 opacity-100 pointer-events-auto" : "translate-x-full opacity-0 pointer-events-none"}`,
28
27
  role: "dialog",
29
28
  "aria-modal": "true",
30
- "aria-label": h,
31
- children: [/* @__PURE__ */ C("div", {
29
+ "aria-label": v,
30
+ children: [/* @__PURE__ */ O("div", {
32
31
  className: "flex shrink-0 items-center justify-between border-b border-slate-100 px-6 py-5",
33
- children: [/* @__PURE__ */ C("div", {
32
+ children: [/* @__PURE__ */ O("div", {
34
33
  className: "flex items-center gap-3",
35
- children: [/* @__PURE__ */ S("div", {
34
+ children: [/* @__PURE__ */ D("div", {
36
35
  className: "flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-md font-bold",
37
- style: { backgroundColor: m },
38
- children: /* @__PURE__ */ S(_, { className: "h-5 w-5" })
39
- }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("div", {
36
+ style: { backgroundColor: _ },
37
+ children: /* @__PURE__ */ D(x, { className: "h-5 w-5" })
38
+ }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ O("div", {
40
39
  className: "flex items-center gap-2",
41
- children: [/* @__PURE__ */ S("h2", {
40
+ children: [/* @__PURE__ */ D("h2", {
42
41
  className: "text-lg font-bold text-slate-800",
43
- children: h
44
- }), /* @__PURE__ */ S("span", {
42
+ children: v
43
+ }), /* @__PURE__ */ D("span", {
45
44
  className: "rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-semibold tracking-wider text-slate-500",
46
45
  title: e,
47
- children: R
46
+ children: H
48
47
  })]
49
- }), /* @__PURE__ */ S("p", {
48
+ }), /* @__PURE__ */ D("p", {
50
49
  className: "mt-0.5 text-xs text-slate-500",
51
- children: g
50
+ children: y
52
51
  })] })]
53
- }), /* @__PURE__ */ S("button", {
52
+ }), /* @__PURE__ */ D("button", {
54
53
  type: "button",
55
54
  onClick: n,
56
55
  className: "flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600",
57
- children: /* @__PURE__ */ S(b, { className: "h-5 w-5" })
56
+ children: /* @__PURE__ */ D(T, { className: "h-5 w-5" })
58
57
  })]
59
- }), /* @__PURE__ */ S("div", {
58
+ }), /* @__PURE__ */ D("div", {
60
59
  className: "flex-1 overflow-y-auto px-6 py-5",
61
- children: ie ? /* @__PURE__ */ C("div", {
60
+ children: ee ? /* @__PURE__ */ O("div", {
62
61
  className: "flex h-full flex-col items-center justify-center text-center py-10 animate-fadeIn",
63
62
  children: [
64
- /* @__PURE__ */ S("div", {
63
+ /* @__PURE__ */ D("div", {
65
64
  className: "flex h-16 w-16 items-center justify-center rounded-full text-white shadow-lg mb-4",
66
- style: { backgroundColor: m },
67
- children: /* @__PURE__ */ S(u, { className: "h-9 w-9" })
65
+ style: { backgroundColor: _ },
66
+ children: /* @__PURE__ */ D(d, { className: "h-9 w-9" })
68
67
  }),
69
- /* @__PURE__ */ S("h3", {
68
+ /* @__PURE__ */ D("h3", {
70
69
  className: "text-xl font-bold text-slate-800",
71
70
  children: "Bug Report Submitted!"
72
71
  }),
73
- /* @__PURE__ */ C("p", {
72
+ /* @__PURE__ */ O("p", {
74
73
  className: "mt-2 text-sm text-slate-500 max-w-xs",
75
74
  children: [
76
75
  "Thank you! Your bug report with ",
77
- o.length,
76
+ a.length,
78
77
  " screenshot",
79
- o.length === 1 ? "" : "s",
78
+ a.length === 1 ? "" : "s",
80
79
  " has been captured and logged."
81
80
  ]
82
81
  }),
83
- /* @__PURE__ */ C("div", {
82
+ /* @__PURE__ */ O("div", {
84
83
  className: "mt-8 flex flex-col sm:flex-row gap-3 w-full",
85
- children: [/* @__PURE__ */ S("button", {
84
+ children: [/* @__PURE__ */ D("button", {
86
85
  type: "button",
87
86
  onClick: () => {
88
- E(""), O(""), F({}), N(null), M(!1);
87
+ j(""), N(""), B({}), R(null), I(!1);
89
88
  },
90
89
  className: "flex-1 rounded-xl border border-slate-200 bg-white py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50",
91
90
  children: "Report Another Bug"
92
- }), /* @__PURE__ */ S("button", {
91
+ }), /* @__PURE__ */ D("button", {
93
92
  type: "button",
94
93
  onClick: n,
95
- style: { backgroundColor: m },
94
+ style: { backgroundColor: _ },
96
95
  className: "flex-1 rounded-xl py-2.5 text-sm font-semibold text-white shadow-md transition hover:brightness-110",
97
96
  children: "Close"
98
97
  })]
99
98
  })
100
99
  ]
101
- }) : /* @__PURE__ */ C("form", {
100
+ }) : /* @__PURE__ */ O("form", {
102
101
  onSubmit: async (t) => {
103
- if (t.preventDefault(), oe()) {
104
- A(!0), N(null);
102
+ if (t.preventDefault(), U()) {
103
+ F(!0), R(null);
105
104
  try {
106
- await te({
105
+ await f({
107
106
  projectUrl: e,
108
- title: T.trim(),
109
- description: D.trim(),
110
- screenshots: o,
107
+ title: A.trim(),
108
+ description: M.trim(),
109
+ screenshots: a,
111
110
  timestamp: (/* @__PURE__ */ new Date()).toISOString(),
112
111
  meta: {
113
112
  url: window.location.href,
@@ -118,184 +117,249 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
118
117
  height: window.innerHeight
119
118
  }
120
119
  }
121
- }), M(!0);
120
+ }), I(!0);
122
121
  } catch (e) {
123
- console.error("Failed to submit bug report:", e), N(e instanceof Error ? e.message : "Failed to submit bug report. Please try again.");
122
+ console.error("Failed to submit bug report:", e), R(e instanceof Error ? e.message : "Failed to submit bug report. Please try again.");
124
123
  } finally {
125
- A(!1);
124
+ F(!1);
126
125
  }
127
126
  }
128
127
  },
129
128
  className: "space-y-5",
130
129
  children: [
131
- /* @__PURE__ */ C("div", { children: [
132
- /* @__PURE__ */ C("label", {
130
+ /* @__PURE__ */ O("div", { children: [
131
+ /* @__PURE__ */ O("label", {
133
132
  className: "block text-xs font-bold tracking-wide uppercase text-slate-700",
134
- children: ["Bug Title / Name ", /* @__PURE__ */ S("span", {
133
+ children: ["Bug Title / Name ", /* @__PURE__ */ D("span", {
135
134
  className: "text-red-500",
136
135
  children: "*"
137
136
  })]
138
137
  }),
139
- /* @__PURE__ */ S("input", {
138
+ /* @__PURE__ */ D("input", {
140
139
  type: "text",
141
- value: T,
140
+ value: A,
142
141
  onChange: (e) => {
143
- E(e.target.value), P.title && F((e) => ({
142
+ j(e.target.value), z.title && B((e) => ({
144
143
  ...e,
145
144
  title: void 0
146
145
  }));
147
146
  },
148
- placeholder: v,
149
- className: `mt-1.5 w-full rounded-xl border px-3.5 py-2.5 text-sm transition focus:outline-none focus:ring-2 ${P.title ? "border-red-300 bg-red-50/50 text-red-900 focus:ring-red-400" : "border-slate-200 bg-white text-slate-800 focus:border-transparent focus:ring-blue-500"}`
147
+ placeholder: b,
148
+ className: `mt-1.5 w-full rounded-xl border px-3.5 py-2.5 text-sm transition focus:outline-none focus:ring-2 ${z.title ? "border-red-300 bg-red-50/50 text-red-900 focus:ring-red-400" : "border-slate-200 bg-white text-slate-800 focus:border-transparent focus:ring-blue-500"}`
150
149
  }),
151
- P.title && /* @__PURE__ */ C("p", {
150
+ z.title && /* @__PURE__ */ O("p", {
152
151
  className: "mt-1.5 flex items-center gap-1 text-xs text-red-600",
153
- children: [/* @__PURE__ */ S(a, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("span", { children: P.title })]
152
+ children: [/* @__PURE__ */ D(o, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", { children: z.title })]
154
153
  })
155
154
  ] }),
156
- /* @__PURE__ */ C("div", { children: [
157
- /* @__PURE__ */ C("label", {
155
+ /* @__PURE__ */ O("div", { children: [
156
+ /* @__PURE__ */ O("label", {
158
157
  className: "block text-xs font-bold tracking-wide uppercase text-slate-700",
159
- children: ["Description ", /* @__PURE__ */ S("span", {
158
+ children: ["Description ", /* @__PURE__ */ D("span", {
160
159
  className: "text-red-500",
161
160
  children: "*"
162
161
  })]
163
162
  }),
164
- /* @__PURE__ */ S("textarea", {
163
+ /* @__PURE__ */ D("textarea", {
165
164
  rows: 4,
166
- value: D,
165
+ value: M,
167
166
  onChange: (e) => {
168
- O(e.target.value), P.description && F((e) => ({
167
+ N(e.target.value), z.description && B((e) => ({
169
168
  ...e,
170
169
  description: void 0
171
170
  }));
172
171
  },
173
- placeholder: re,
174
- className: `mt-1.5 w-full rounded-xl border px-3.5 py-2.5 text-sm transition focus:outline-none focus:ring-2 ${P.description ? "border-red-300 bg-red-50/50 text-red-900 focus:ring-red-400" : "border-slate-200 bg-white text-slate-800 focus:border-transparent focus:ring-blue-500"}`
172
+ placeholder: S,
173
+ className: `mt-1.5 w-full rounded-xl border px-3.5 py-2.5 text-sm transition focus:outline-none focus:ring-2 ${z.description ? "border-red-300 bg-red-50/50 text-red-900 focus:ring-red-400" : "border-slate-200 bg-white text-slate-800 focus:border-transparent focus:ring-blue-500"}`
175
174
  }),
176
- P.description && /* @__PURE__ */ C("p", {
175
+ z.description && /* @__PURE__ */ O("p", {
177
176
  className: "mt-1.5 flex items-center gap-1 text-xs text-red-600",
178
- children: [/* @__PURE__ */ S(a, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("span", { children: P.description })]
177
+ children: [/* @__PURE__ */ D(o, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", { children: z.description })]
179
178
  })
180
179
  ] }),
181
- /* @__PURE__ */ C("div", { children: [
182
- /* @__PURE__ */ C("div", {
180
+ /* @__PURE__ */ O("div", { children: [
181
+ /* @__PURE__ */ O("div", {
183
182
  className: "flex items-center justify-between",
184
- children: [/* @__PURE__ */ C("label", {
183
+ children: [/* @__PURE__ */ O("label", {
185
184
  className: "block text-xs font-bold tracking-wide uppercase text-slate-700",
186
- children: ["Screenshots ", /* @__PURE__ */ S("span", {
185
+ children: ["Screenshots ", /* @__PURE__ */ D("span", {
187
186
  className: "text-slate-400 font-normal lowercase",
188
187
  children: "(optional)"
189
188
  })]
190
- }), /* @__PURE__ */ C("span", {
189
+ }), /* @__PURE__ */ O("span", {
191
190
  className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-600",
192
- children: [o.length, " / 3"]
191
+ children: [a.length, " / 3"]
193
192
  })]
194
193
  }),
195
- /* @__PURE__ */ S("p", {
194
+ /* @__PURE__ */ D("p", {
196
195
  className: "mt-1 text-xs text-slate-500",
197
196
  children: "Capture your screen and annotate with pencil, shapes, or arrows."
198
197
  }),
199
- o.length > 0 && /* @__PURE__ */ S("div", {
198
+ a.length > 0 && /* @__PURE__ */ D("div", {
200
199
  className: "mt-3 grid grid-cols-3 gap-2.5",
201
- children: o.map((e, t) => /* @__PURE__ */ C("div", {
200
+ children: a.map((e, t) => /* @__PURE__ */ O("div", {
202
201
  className: "group relative aspect-video overflow-hidden rounded-lg border border-slate-200 bg-slate-100 shadow-sm",
203
202
  children: [
204
- /* @__PURE__ */ S("img", {
203
+ /* @__PURE__ */ D("img", {
205
204
  src: e.dataUrl,
206
205
  alt: `Screenshot ${t + 1}`,
207
206
  className: "h-full w-full object-cover transition duration-200 group-hover:scale-105"
208
207
  }),
209
- /* @__PURE__ */ C("span", {
208
+ /* @__PURE__ */ O("span", {
210
209
  className: "absolute top-1 left-1 rounded bg-black/60 px-1 py-0.2 text-[10px] font-semibold text-white",
211
210
  children: ["#", t + 1]
212
211
  }),
213
- /* @__PURE__ */ C("div", {
212
+ /* @__PURE__ */ O("div", {
214
213
  className: "absolute inset-0 flex items-center justify-center gap-1.5 bg-black/50 opacity-0 backdrop-blur-[1px] transition-opacity duration-200 group-hover:opacity-100",
215
214
  children: [
216
- /* @__PURE__ */ S("button", {
215
+ /* @__PURE__ */ D("button", {
217
216
  type: "button",
218
- onClick: () => L(e.dataUrl),
217
+ onClick: () => V(e.dataUrl),
219
218
  title: "Preview screenshot",
220
219
  className: "flex h-7 w-7 items-center justify-center rounded-md bg-white/90 text-slate-700 shadow transition hover:bg-white hover:text-blue-600",
221
- children: /* @__PURE__ */ S(f, { className: "h-3.5 w-3.5" })
220
+ children: /* @__PURE__ */ D(h, { className: "h-3.5 w-3.5" })
222
221
  }),
223
- /* @__PURE__ */ S("button", {
222
+ /* @__PURE__ */ D("button", {
224
223
  type: "button",
225
- onClick: () => l(e),
224
+ onClick: () => c(e),
226
225
  title: "Re-edit / annotate",
227
226
  className: "flex h-7 w-7 items-center justify-center rounded-md bg-white/90 text-slate-700 shadow transition hover:bg-white hover:text-blue-600",
228
- children: /* @__PURE__ */ S(d, { className: "h-3.5 w-3.5" })
227
+ children: /* @__PURE__ */ D(p, { className: "h-3.5 w-3.5" })
229
228
  }),
230
- /* @__PURE__ */ S("button", {
229
+ /* @__PURE__ */ D("button", {
231
230
  type: "button",
232
- onClick: () => ee(e.id),
231
+ onClick: () => u(e.id),
233
232
  title: "Delete screenshot",
234
233
  className: "flex h-7 w-7 items-center justify-center rounded-md bg-red-600 text-white shadow transition hover:bg-red-700",
235
- children: /* @__PURE__ */ S(y, { className: "h-3.5 w-3.5" })
234
+ children: /* @__PURE__ */ D(C, { className: "h-3.5 w-3.5" })
236
235
  })
237
236
  ]
238
237
  })
239
238
  ]
240
239
  }, e.id))
241
240
  }),
242
- /* @__PURE__ */ S("div", {
241
+ /* @__PURE__ */ D("div", {
243
242
  className: "mt-3",
244
- children: o.length < 3 ? /* @__PURE__ */ C("button", {
243
+ children: a.length < 3 ? /* @__PURE__ */ O("button", {
245
244
  type: "button",
246
245
  onClick: s,
247
246
  className: "flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-300 bg-slate-50/70 py-3 text-xs font-semibold text-slate-600 transition hover:border-blue-400 hover:bg-blue-50/50 hover:text-blue-600",
248
- children: [/* @__PURE__ */ S(c, { className: "h-4 w-4 text-slate-500" }), /* @__PURE__ */ S("span", { children: o.length === 0 ? "Capture Screen & Annotate" : `Capture Another Screenshot (${3 - o.length} left)` })]
249
- }) : /* @__PURE__ */ S("div", {
247
+ children: [/* @__PURE__ */ D(l, { className: "h-4 w-4 text-slate-500" }), /* @__PURE__ */ D("span", { children: a.length === 0 ? "Capture Screen & Annotate" : `Capture Another Screenshot (${3 - a.length} left)` })]
248
+ }) : /* @__PURE__ */ D("div", {
250
249
  className: "rounded-lg bg-amber-50 p-2.5 text-center text-xs text-amber-700 border border-amber-200",
251
250
  children: "Maximum 3 screenshots attached. Delete one to take a new one."
252
251
  })
253
252
  })
254
253
  ] }),
255
- ae && /* @__PURE__ */ C("div", {
254
+ L && /* @__PURE__ */ O("div", {
256
255
  className: "rounded-xl border border-red-200 bg-red-50 px-3.5 py-2.5 text-xs text-red-700 flex items-start gap-2",
257
- children: [/* @__PURE__ */ S(a, { className: "h-4 w-4 shrink-0 mt-0.5" }), /* @__PURE__ */ S("span", { children: ae })]
256
+ children: [/* @__PURE__ */ D(o, { className: "h-4 w-4 shrink-0 mt-0.5" }), /* @__PURE__ */ D("span", { children: L })]
258
257
  }),
259
- /* @__PURE__ */ C("div", {
258
+ /* @__PURE__ */ O("div", {
260
259
  className: "pt-4 border-t border-slate-100 flex items-center justify-end gap-3",
261
- children: [/* @__PURE__ */ S("button", {
260
+ children: [/* @__PURE__ */ D("button", {
262
261
  type: "button",
263
262
  onClick: n,
264
263
  className: "rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50",
265
264
  children: "Cancel"
266
- }), /* @__PURE__ */ S("button", {
265
+ }), /* @__PURE__ */ D("button", {
267
266
  type: "submit",
268
- disabled: k,
269
- style: { backgroundColor: m },
267
+ disabled: P,
268
+ style: { backgroundColor: _ },
270
269
  className: "flex items-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold text-white shadow-md transition hover:brightness-110 active:scale-95 disabled:opacity-60",
271
- children: k ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S(p, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ S("span", { children: "Submitting..." })] }) : /* @__PURE__ */ S("span", { children: "Submit Bug Report" })
270
+ children: P ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(g, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ D("span", { children: "Submitting..." })] }) : /* @__PURE__ */ D("span", { children: "Submit Bug Report" })
272
271
  })]
273
272
  })
274
273
  ]
275
274
  })
276
275
  })]
277
276
  }),
278
- I && /* @__PURE__ */ S("div", {
277
+ te && /* @__PURE__ */ D("div", {
279
278
  "data-bugdrop-widget": "true",
280
- onClick: () => L(null),
279
+ onClick: () => V(null),
281
280
  className: "fixed inset-0 z-[100001] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm animate-fadeIn",
282
- children: /* @__PURE__ */ C("div", {
281
+ children: /* @__PURE__ */ O("div", {
283
282
  className: "relative max-h-[90vh] max-w-[90vw] overflow-hidden rounded-xl bg-slate-900 shadow-2xl",
284
283
  onClick: (e) => e.stopPropagation(),
285
- children: [/* @__PURE__ */ S("img", {
286
- src: I,
284
+ children: [/* @__PURE__ */ D("img", {
285
+ src: te,
287
286
  alt: "Screenshot Preview",
288
287
  className: "max-h-[85vh] w-auto rounded-xl object-contain"
289
- }), /* @__PURE__ */ S("button", {
288
+ }), /* @__PURE__ */ D("button", {
290
289
  type: "button",
291
- onClick: () => L(null),
290
+ onClick: () => V(null),
292
291
  className: "absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white shadow hover:bg-black/90",
293
- children: /* @__PURE__ */ S(b, { className: "h-4 w-4" })
292
+ children: /* @__PURE__ */ D(T, { className: "h-4 w-4" })
294
293
  })]
295
294
  })
296
295
  })
297
296
  ] });
298
- }, ae = [
297
+ }, j = null;
298
+ function M() {
299
+ return j ||= import("konva").then((e) => {
300
+ let t = e;
301
+ return t.default ?? t;
302
+ }).catch((e) => {
303
+ throw j = null, e;
304
+ }), j;
305
+ }
306
+ var N = typeof window < "u" ? n : t;
307
+ function P(e) {
308
+ let t = e, n = {
309
+ stroke: e.stroke,
310
+ strokeWidth: e.strokeWidth,
311
+ rotation: t.rotation ?? 0
312
+ };
313
+ switch (e.type) {
314
+ case "line": return {
315
+ ...n,
316
+ x: t.x ?? 0,
317
+ y: t.y ?? 0,
318
+ points: e.points,
319
+ tension: .5,
320
+ lineCap: "round",
321
+ lineJoin: "round",
322
+ globalCompositeOperation: e.tool === "eraser" ? "destination-out" : "source-over"
323
+ };
324
+ case "rectangle": return {
325
+ ...n,
326
+ x: e.x,
327
+ y: e.y,
328
+ width: e.width,
329
+ height: e.height
330
+ };
331
+ case "circle": return {
332
+ ...n,
333
+ x: e.x,
334
+ y: e.y,
335
+ radius: e.radius
336
+ };
337
+ case "arrow": return {
338
+ ...n,
339
+ x: t.x ?? 0,
340
+ y: t.y ?? 0,
341
+ points: e.points,
342
+ fill: e.fill,
343
+ pointerLength: 14,
344
+ pointerWidth: 14
345
+ };
346
+ default: return n;
347
+ }
348
+ }
349
+ function F(e, t, n) {
350
+ let r = {
351
+ ...P(t),
352
+ ...n
353
+ };
354
+ switch (t.type) {
355
+ case "line": return new e.Line(r);
356
+ case "rectangle": return new e.Rect(r);
357
+ case "circle": return new e.Circle(r);
358
+ case "arrow": return new e.Arrow(r);
359
+ default: return null;
360
+ }
361
+ }
362
+ var ee = [
299
363
  "#ef4444",
300
364
  "#f97316",
301
365
  "#eab308",
@@ -305,7 +369,7 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
305
369
  "#ec4899",
306
370
  "#000000",
307
371
  "#ffffff"
308
- ], N = [
372
+ ], I = [
309
373
  {
310
374
  label: "S",
311
375
  value: 3
@@ -322,642 +386,537 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
322
386
  label: "XL",
323
387
  value: 16
324
388
  }
325
- ], P = ({ imageSrc: i, onSave: a, onCancel: s, primaryColor: c = "#2563eb" }) => {
326
- let u = n(null), d = n(null), f = n(null), [p, _] = r(null), [j, M] = r(1), [P, F] = r({
389
+ ], L = [
390
+ {
391
+ id: "select",
392
+ title: "Select & Move / Resize",
393
+ Icon: _
394
+ },
395
+ {
396
+ id: "pencil",
397
+ title: "Pencil / Draw",
398
+ Icon: y
399
+ },
400
+ {
401
+ id: "eraser",
402
+ title: "Eraser (click or drag to erase)",
403
+ Icon: m
404
+ },
405
+ {
406
+ id: "rectangle",
407
+ title: "Rectangle (Resizable)",
408
+ Icon: S
409
+ },
410
+ {
411
+ id: "circle",
412
+ title: "Circle (Resizable)",
413
+ Icon: f
414
+ },
415
+ {
416
+ id: "arrow",
417
+ title: "Arrow (Resizable)",
418
+ Icon: s
419
+ }
420
+ ], R = [
421
+ "top-left",
422
+ "top-right",
423
+ "bottom-left",
424
+ "bottom-right",
425
+ "middle-left",
426
+ "middle-right",
427
+ "top-center",
428
+ "bottom-center"
429
+ ], z = ({ imageSrc: n, onSave: a, onCancel: o, primaryColor: s = "#2563eb" }) => {
430
+ let c = r(null), l = r(null), d = r(null), f = r(null), p = r(null), m = r(null), h = r(null), g = r(null), [_, y] = i(null), [x, S] = i(null), [k, A] = i(null), [j, z] = i(1), [B, te] = i({
327
431
  width: 800,
328
432
  height: 600
329
- }), [I, L] = r("pencil"), [R, oe] = r("#ef4444"), [z, se] = r(6), [B, V] = r(null), [H, U] = r([]), [W, G] = r(null), [ce, le] = r(!1), [K, ue] = r(null), [q, de] = r([[]]), [J, Y] = r(0);
433
+ }), [V, H] = i("pencil"), [U, ne] = i("#ef4444"), [W, re] = i(6), [G, K] = i(null), [q, J] = i([]), [Y, ie] = i([[]]), [X, Z] = i(0);
330
434
  t(() => {
435
+ let e = !1;
436
+ return M().then((t) => {
437
+ e || y(() => t);
438
+ }).catch(() => {
439
+ e || S("The annotation editor could not load. Check your connection and try again.");
440
+ }), () => {
441
+ e = !0;
442
+ };
443
+ }, []), t(() => {
331
444
  let e = new window.Image();
332
- e.crossOrigin = "anonymous", e.src = i, e.onload = () => {
333
- _(e);
445
+ return e.crossOrigin = "anonymous", e.onload = () => A(e), e.src = n, () => {
446
+ e.onload = null;
334
447
  };
335
- }, [i]);
336
- let X = e(() => {
337
- if (!u.current || !p) return;
338
- let e = Math.max(300, u.current.clientWidth - 48), t = Math.max(300, u.current.clientHeight - 120), n = Math.min(e / p.naturalWidth, t / p.naturalHeight, 1);
339
- M(n), F({
340
- width: Math.round(p.naturalWidth * n),
341
- height: Math.round(p.naturalHeight * n)
448
+ }, [n]);
449
+ let Q = e(() => {
450
+ if (!c.current || !k) return;
451
+ let e = Math.max(300, c.current.clientWidth - 48), t = Math.max(300, c.current.clientHeight - 120), n = Math.min(e / k.naturalWidth, t / k.naturalHeight, 1);
452
+ z(n), te({
453
+ width: Math.round(k.naturalWidth * n),
454
+ height: Math.round(k.naturalHeight * n)
342
455
  });
343
- }, [p]);
344
- t(() => (X(), window.addEventListener("resize", X), () => window.removeEventListener("resize", X)), [X]), t(() => {
345
- if (f.current && d.current) {
346
- if (B) {
347
- let e = d.current.findOne("#" + B);
348
- if (e) {
349
- f.current.nodes([e]), f.current.getLayer()?.batchDraw();
350
- return;
351
- }
352
- }
353
- f.current.nodes([]), f.current.getLayer()?.batchDraw();
354
- }
355
- }, [B, H]);
356
- let Z = e((e) => {
357
- de((t) => {
358
- let n = t.slice(0, J + 1);
359
- return n.push(e), n;
360
- }), Y((e) => e + 1);
361
- }, [J]), fe = e(() => {
362
- if (J > 0) {
363
- let e = J - 1;
364
- Y(e), U(q[e]), V(null);
365
- }
366
- }, [J, q]), Q = e(() => {
367
- if (J < q.length - 1) {
368
- let e = J + 1;
369
- Y(e), U(q[e]), V(null);
370
- }
371
- }, [J, q]), pe = () => {
372
- if (H.length === 0) return;
373
- let e = [];
374
- U(e), Z(e), V(null);
375
- }, me = e(() => {
376
- if (!B) return;
377
- let e = H.filter((e) => e.id !== B);
378
- U(e), Z(e), V(null);
379
- }, [
380
- B,
381
- H,
382
- Z
383
- ]);
384
- t(() => {
385
- let e = (e) => {
386
- e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || ((e.ctrlKey || e.metaKey) && e.key === "z" ? (e.shiftKey ? Q() : fe(), e.preventDefault()) : (e.ctrlKey || e.metaKey) && e.key === "y" ? (Q(), e.preventDefault()) : e.key === "Delete" || e.key === "Backspace" ? B && (me(), e.preventDefault()) : e.key === "Escape" && (V(null), e.preventDefault()));
456
+ }, [k]);
457
+ t(() => (Q(), window.addEventListener("resize", Q), () => window.removeEventListener("resize", Q)), [Q]), t(() => {
458
+ let e = l.current;
459
+ if (!_ || !k || !e) return;
460
+ let t = _, n = new t.Stage({
461
+ container: e,
462
+ width: 1,
463
+ height: 1
464
+ }), r = new t.Layer({ listening: !1 });
465
+ r.add(new t.Image({
466
+ name: "bg-image",
467
+ image: k,
468
+ width: k.naturalWidth,
469
+ height: k.naturalHeight
470
+ }));
471
+ let i = new t.Layer(), a = new t.Transformer({
472
+ rotateEnabled: !0,
473
+ enabledAnchors: R,
474
+ borderStroke: "#3b82f6",
475
+ borderDash: [4, 4],
476
+ anchorFill: "#ffffff",
477
+ anchorStroke: "#3b82f6",
478
+ anchorSize: 9,
479
+ anchorCornerRadius: 2,
480
+ boundBoxFunc: (e, t) => Math.abs(t.width) < 10 || Math.abs(t.height) < 10 ? e : t
481
+ });
482
+ i.add(a), n.add(r), n.add(i), n.on("pointerdown", (e) => g.current?.pointerDown(e)), n.on("pointermove", () => g.current?.pointerMove()), n.on("pointerup", () => g.current?.pointerUp());
483
+ let o = () => g.current?.pointerUp();
484
+ return window.addEventListener("pointerup", o), window.addEventListener("pointercancel", o), d.current = n, f.current = i, p.current = a, () => {
485
+ window.removeEventListener("pointerup", o), window.removeEventListener("pointercancel", o), h.current = null, m.current = null, n.destroy(), d.current = null, f.current = null, p.current = null;
387
486
  };
388
- return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
487
+ }, [_, k]), t(() => {
488
+ let e = d.current;
489
+ e && (e.size(B), e.scale({
490
+ x: j,
491
+ y: j
492
+ }));
389
493
  }, [
390
- me,
391
- Q,
392
- fe,
494
+ _,
495
+ k,
496
+ j,
393
497
  B
498
+ ]), t(() => {
499
+ let e = _, t = f.current, n = p.current;
500
+ if (!e || !t || !n) return;
501
+ n.nodes([]), t.find(".annotation").forEach((e) => e.destroy());
502
+ let r = V === "select";
503
+ q.forEach((n) => {
504
+ let i = n.type === "line" && n.tool === "eraser", a = F(e, n, {
505
+ id: n.id,
506
+ name: "annotation",
507
+ draggable: r && !i,
508
+ hitStrokeWidth: Math.max(n.strokeWidth, 12)
509
+ });
510
+ a && (a.on("dragend", () => g.current?.dragEnd(a, n.id)), a.on("transformend", () => g.current?.transformEnd(a, n.id)), t.add(a));
511
+ }), n.moveToTop();
512
+ }, [
513
+ _,
514
+ k,
515
+ q,
516
+ V
517
+ ]), t(() => {
518
+ let e = f.current, t = p.current;
519
+ if (!e || !t) return;
520
+ let n = G ? e.findOne("#" + G) : void 0;
521
+ if (!n) {
522
+ t.nodes([]);
523
+ return;
524
+ }
525
+ let r = n.getClassName() === "Line";
526
+ t.resizeEnabled(!r), t.rotateEnabled(!r), t.nodes([n]);
527
+ }, [
528
+ _,
529
+ k,
530
+ q,
531
+ V,
532
+ G
394
533
  ]);
395
- let he = (e) => {
396
- let t = d.current;
397
- if (!t || !p) return;
398
- let n = t.getPointerPosition();
399
- if (!n) return;
400
- let r = n.x / j, i = n.y / j;
401
- if (I === "select") {
402
- (e.target === t || e.target.hasName("bg-image")) && V(null);
534
+ let $ = (e) => {
535
+ J(e), ie([...Y.slice(0, X + 1), e]), Z(X + 1);
536
+ }, ae = () => {
537
+ if (X <= 0) return;
538
+ let e = X - 1;
539
+ Z(e), J(Y[e]), K(null);
540
+ }, oe = () => {
541
+ if (X >= Y.length - 1) return;
542
+ let e = X + 1;
543
+ Z(e), J(Y[e]), K(null);
544
+ }, se = () => {
545
+ q.length !== 0 && ($([]), K(null));
546
+ }, ce = () => {
547
+ G && ($(q.filter((e) => e.id !== G)), K(null));
548
+ }, le = () => {
549
+ let e = d.current?.getPointerPosition();
550
+ return e ? {
551
+ x: e.x / j,
552
+ y: e.y / j
553
+ } : null;
554
+ }, ue = (e) => {
555
+ let t = d.current, n = f.current, r = _;
556
+ if (!t || !n || !r || h.current) return;
557
+ let i = le();
558
+ if (!i) return;
559
+ let { x: a, y: o } = i, s = e.target, c = s === t ? "" : s.id(), l = c ? q.find((e) => e.id === c) : void 0;
560
+ if (V === "select") {
561
+ l ? (l.type !== "line" || l.tool !== "eraser") && K(l.id) : (s === t || s.hasName("bg-image")) && K(null);
403
562
  return;
404
563
  }
405
- if (I === "eraser") {
406
- let n = e.target;
407
- if (n !== t && !n.hasName("bg-image")) {
408
- let e = n.id();
409
- if (e) {
410
- let t = H.filter((t) => t.id !== e);
411
- U(t), Z(t), V(null);
412
- return;
413
- }
414
- }
564
+ if (V === "eraser" && l) {
565
+ $(q.filter((e) => e.id !== l.id)), K(null);
566
+ return;
415
567
  }
416
- V(null), le(!0), ue({
417
- x: r,
418
- y: i
419
- });
420
- let a = `shape_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
421
- if (I === "pencil" || I === "eraser") {
422
- let e = {
423
- id: a,
424
- type: "line",
425
- tool: I,
426
- points: [r, i],
427
- stroke: I === "eraser" ? "#ffffff" : R,
428
- strokeWidth: I === "eraser" ? z * 2.5 : z
429
- };
430
- G(e);
431
- } else I === "rectangle" ? G({
432
- id: a,
568
+ K(null);
569
+ let u = `shape_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`, p;
570
+ p = V === "pencil" || V === "eraser" ? {
571
+ id: u,
572
+ type: "line",
573
+ tool: V,
574
+ points: [a, o],
575
+ stroke: V === "eraser" ? "#ffffff" : U,
576
+ strokeWidth: V === "eraser" ? W * 2.5 : W
577
+ } : V === "rectangle" ? {
578
+ id: u,
433
579
  type: "rectangle",
434
- x: r,
435
- y: i,
580
+ x: a,
581
+ y: o,
436
582
  width: 0,
437
583
  height: 0,
438
- stroke: R,
439
- strokeWidth: z
440
- }) : I === "circle" ? G({
441
- id: a,
584
+ stroke: U,
585
+ strokeWidth: W
586
+ } : V === "circle" ? {
587
+ id: u,
442
588
  type: "circle",
443
- x: r,
444
- y: i,
589
+ x: a,
590
+ y: o,
445
591
  radius: 0,
446
- stroke: R,
447
- strokeWidth: z
448
- }) : I === "arrow" && G({
449
- id: a,
592
+ stroke: U,
593
+ strokeWidth: W
594
+ } : {
595
+ id: u,
450
596
  type: "arrow",
451
597
  points: [
452
- r,
453
- i,
454
- r,
455
- i
598
+ a,
599
+ o,
600
+ a,
601
+ o
456
602
  ],
457
- stroke: R,
458
- fill: R,
459
- strokeWidth: z
603
+ stroke: U,
604
+ fill: U,
605
+ strokeWidth: W
606
+ };
607
+ let g = F(r, p, {
608
+ listening: !1,
609
+ dash: p.type === "line" ? void 0 : [6, 4]
460
610
  });
461
- }, ge = () => {
462
- if (!ce || !W || !K || !d.current) return;
463
- let e = d.current.getPointerPosition();
611
+ g && (n.add(g), m.current = g, h.current = {
612
+ start: {
613
+ x: a,
614
+ y: o
615
+ },
616
+ data: p
617
+ });
618
+ }, de = () => {
619
+ let e = h.current;
464
620
  if (!e) return;
465
- let t = e.x / j, n = e.y / j;
466
- if (W.type === "line") G({
467
- ...W,
621
+ let t = le();
622
+ if (!t) return;
623
+ let { x: n, y: r } = t, { start: i, data: a } = e, o = a;
624
+ a.type === "line" ? o = {
625
+ ...a,
468
626
  points: [
469
- ...W.points,
470
- t,
471
- n
627
+ ...a.points,
628
+ n,
629
+ r
472
630
  ]
473
- });
474
- else if (W.type === "rectangle") {
475
- let e = Math.min(K.x, t), r = Math.min(K.y, n), i = Math.abs(t - K.x), a = Math.abs(n - K.y);
476
- G({
477
- ...W,
478
- x: e,
479
- y: r,
480
- width: i,
481
- height: a
482
- });
483
- } else if (W.type === "circle") {
484
- let e = Math.hypot(t - K.x, n - K.y);
485
- G({
486
- ...W,
487
- radius: e
488
- });
489
- } else W.type === "arrow" && G({
490
- ...W,
631
+ } : a.type === "rectangle" ? o = {
632
+ ...a,
633
+ x: Math.min(i.x, n),
634
+ y: Math.min(i.y, r),
635
+ width: Math.abs(n - i.x),
636
+ height: Math.abs(r - i.y)
637
+ } : a.type === "circle" ? o = {
638
+ ...a,
639
+ radius: Math.hypot(n - i.x, r - i.y)
640
+ } : a.type === "arrow" && (o = {
641
+ ...a,
491
642
  points: [
492
- K.x,
493
- K.y,
494
- t,
495
- n
643
+ i.x,
644
+ i.y,
645
+ n,
646
+ r
496
647
  ]
497
- });
498
- }, _e = () => {
499
- if (!ce || (le(!1), !W)) return;
500
- let e = !1;
501
- if (W.type === "line" && W.points.length >= 2) e = !0;
502
- else if (W.type === "rectangle" && W.width > 6 && W.height > 6) e = !0;
503
- else if (W.type === "circle" && W.radius > 5) e = !0;
504
- else if (W.type === "arrow") {
505
- let [t, n, r, i] = W.points;
506
- Math.hypot(r - t, i - n) > 10 && (e = !0);
507
- }
508
- if (e) {
509
- let e = [...H, W];
510
- U(e), Z(e), (W.type === "rectangle" || W.type === "circle" || W.type === "arrow") && (V(W.id), L("select"));
648
+ }), e.data = o, m.current?.setAttrs(P(o));
649
+ }, fe = () => {
650
+ let e = h.current;
651
+ if (!e) return;
652
+ h.current = null, m.current?.destroy(), m.current = null;
653
+ let t = e.data, n = !1;
654
+ if (t.type === "line") n = t.points.length >= 2;
655
+ else if (t.type === "rectangle") n = t.width > 6 && t.height > 6;
656
+ else if (t.type === "circle") n = t.radius > 5;
657
+ else if (t.type === "arrow") {
658
+ let [e, r, i, a] = t.points;
659
+ n = Math.hypot(i - e, a - r) > 10;
511
660
  }
512
- G(null), ue(null);
513
- }, ve = (e, t) => {
514
- let n = e.target, r = H.find((e) => e.id === t);
515
- if (r) {
516
- if (r.type === "rectangle") {
517
- let e = n.scaleX(), i = n.scaleY();
518
- n.scaleX(1), n.scaleY(1);
519
- let a = {
520
- ...r,
521
- x: n.x(),
522
- y: n.y(),
523
- width: Math.max(10, n.width() * e),
524
- height: Math.max(10, n.height() * i),
525
- rotation: n.rotation()
526
- }, o = H.map((e) => e.id === t ? a : e);
527
- U(o), Z(o);
528
- } else if (r.type === "circle") {
529
- let e = n.scaleX();
530
- n.scaleX(1), n.scaleY(1);
531
- let i = {
532
- ...r,
533
- x: n.x(),
534
- y: n.y(),
535
- radius: Math.max(6, r.radius * e),
536
- rotation: n.rotation()
537
- }, a = H.map((e) => e.id === t ? i : e);
538
- U(a), Z(a);
539
- } else if (r.type === "arrow") {
540
- let e = n.scaleX(), i = n.scaleY();
541
- n.scaleX(1), n.scaleY(1);
542
- let [a, o, s, c] = r.points, l = {
543
- ...r,
544
- x: n.x(),
545
- y: n.y(),
546
- points: [
547
- a,
548
- o,
549
- a + (s - a) * e,
550
- o + (c - o) * i
551
- ],
552
- rotation: n.rotation()
553
- }, u = H.map((e) => e.id === t ? l : e);
554
- U(u), Z(u);
555
- }
661
+ n && ($([...q, t]), (t.type === "rectangle" || t.type === "circle" || t.type === "arrow") && (K(t.id), H("select")));
662
+ }, pe = (e, t) => {
663
+ q.some((e) => e.id === t) && $(q.map((n) => n.id === t ? {
664
+ ...n,
665
+ x: e.x(),
666
+ y: e.y()
667
+ } : n));
668
+ }, me = (e, t) => {
669
+ let n = q.find((e) => e.id === t);
670
+ if (!n) return;
671
+ let r = e.scaleX(), i = e.scaleY();
672
+ e.scaleX(1), e.scaleY(1);
673
+ let a = null;
674
+ if (n.type === "rectangle") a = {
675
+ ...n,
676
+ x: e.x(),
677
+ y: e.y(),
678
+ width: Math.max(10, e.width() * r),
679
+ height: Math.max(10, e.height() * i),
680
+ rotation: e.rotation()
681
+ };
682
+ else if (n.type === "circle") a = {
683
+ ...n,
684
+ x: e.x(),
685
+ y: e.y(),
686
+ radius: Math.max(6, n.radius * r),
687
+ rotation: e.rotation()
688
+ };
689
+ else if (n.type === "arrow") {
690
+ let [t, o, s, c] = n.points;
691
+ a = {
692
+ ...n,
693
+ x: e.x(),
694
+ y: e.y(),
695
+ points: [
696
+ t,
697
+ o,
698
+ t + (s - t) * r,
699
+ o + (c - o) * i
700
+ ],
701
+ rotation: e.rotation()
702
+ };
556
703
  }
557
- }, $ = (e, t) => {
558
- let n = e.target;
559
- if (!H.find((e) => e.id === t)) return;
560
- let r = H.map((e) => e.id === t ? {
561
- ...e,
562
- x: n.x(),
563
- y: n.y()
564
- } : e);
565
- U(r), Z(r);
704
+ if (!a) return;
705
+ let o = a;
706
+ $(q.map((e) => e.id === t ? o : e));
566
707
  };
567
- return /* @__PURE__ */ C("div", {
568
- ref: u,
708
+ N(() => {
709
+ g.current = {
710
+ pointerDown: ue,
711
+ pointerMove: de,
712
+ pointerUp: fe,
713
+ dragEnd: pe,
714
+ transformEnd: me,
715
+ undo: ae,
716
+ redo: oe,
717
+ deleteSelected: ce,
718
+ hasSelection: () => G !== null,
719
+ clearSelection: () => K(null)
720
+ };
721
+ }), t(() => {
722
+ let e = (e) => {
723
+ let t = g.current;
724
+ if (!t || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
725
+ let n = e.ctrlKey || e.metaKey, r = e.key.toLowerCase();
726
+ n && r === "z" ? (e.shiftKey ? t.redo() : t.undo(), e.preventDefault()) : n && r === "y" ? (t.redo(), e.preventDefault()) : (e.key === "Delete" || e.key === "Backspace") && t.hasSelection() ? (t.deleteSelected(), e.preventDefault()) : e.key === "Escape" && (t.clearSelection(), e.preventDefault());
727
+ };
728
+ return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
729
+ }, []);
730
+ let he = () => {
731
+ let e = d.current;
732
+ e && (p.current?.nodes([]), K(null), a(e.toDataURL({
733
+ pixelRatio: 1 / j,
734
+ mimeType: "image/png"
735
+ })));
736
+ }, ge = (e) => {
737
+ H(e), e !== "select" && K(null);
738
+ }, _e = !!(k && _);
739
+ return /* @__PURE__ */ O("div", {
740
+ ref: c,
569
741
  className: "fixed inset-0 z-[100000] flex flex-col bg-slate-950/90 backdrop-blur-md select-none text-white overflow-hidden animate-fadeIn",
570
742
  style: { touchAction: "none" },
571
743
  children: [
572
- /* @__PURE__ */ C("div", {
744
+ /* @__PURE__ */ O("div", {
573
745
  className: "flex h-16 shrink-0 items-center justify-between border-b border-slate-800 bg-slate-900/90 px-4 sm:px-6",
574
- children: [/* @__PURE__ */ C("div", {
746
+ children: [/* @__PURE__ */ O("div", {
575
747
  className: "flex items-center gap-3",
576
- children: [/* @__PURE__ */ S("div", {
748
+ children: [/* @__PURE__ */ D("div", {
577
749
  className: "flex h-8 w-8 items-center justify-center rounded-lg text-white font-bold text-sm shadow",
578
- style: { backgroundColor: c },
750
+ style: { backgroundColor: s },
579
751
  children: "BD"
580
- }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
752
+ }), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h1", {
581
753
  className: "text-sm sm:text-base font-semibold leading-tight text-slate-100",
582
754
  children: "Screenshot Editor"
583
- }), /* @__PURE__ */ S("p", {
755
+ }), /* @__PURE__ */ D("p", {
584
756
  className: "text-xs text-slate-400 hidden sm:block",
585
757
  children: "Highlight issues with pencil, arrows, circles, and boxes"
586
758
  })] })]
587
- }), /* @__PURE__ */ C("div", {
759
+ }), /* @__PURE__ */ O("div", {
588
760
  className: "flex items-center gap-2 sm:gap-3",
589
761
  children: [
590
- /* @__PURE__ */ S("button", {
762
+ /* @__PURE__ */ D("button", {
591
763
  type: "button",
592
- onClick: fe,
593
- disabled: J <= 0,
764
+ onClick: ae,
765
+ disabled: X <= 0,
594
766
  title: "Undo (Ctrl+Z)",
595
767
  className: "flex h-9 w-9 items-center justify-center rounded-lg border border-slate-700 bg-slate-800 text-slate-200 transition hover:bg-slate-700 hover:text-white disabled:opacity-40 disabled:pointer-events-none",
596
- children: /* @__PURE__ */ S(re, { className: "h-4 w-4" })
768
+ children: /* @__PURE__ */ D(w, { className: "h-4 w-4" })
597
769
  }),
598
- /* @__PURE__ */ S("button", {
770
+ /* @__PURE__ */ D("button", {
599
771
  type: "button",
600
- onClick: Q,
601
- disabled: J >= q.length - 1,
772
+ onClick: oe,
773
+ disabled: X >= Y.length - 1,
602
774
  title: "Redo (Ctrl+Y)",
603
775
  className: "flex h-9 w-9 items-center justify-center rounded-lg border border-slate-700 bg-slate-800 text-slate-200 transition hover:bg-slate-700 hover:text-white disabled:opacity-40 disabled:pointer-events-none",
604
- children: /* @__PURE__ */ S(g, { className: "h-4 w-4" })
776
+ children: /* @__PURE__ */ D(b, { className: "h-4 w-4" })
605
777
  }),
606
- /* @__PURE__ */ C("button", {
778
+ /* @__PURE__ */ O("button", {
607
779
  type: "button",
608
- onClick: pe,
609
- disabled: H.length === 0,
780
+ onClick: se,
781
+ disabled: q.length === 0,
610
782
  title: "Clear all annotations",
611
783
  className: "flex h-9 items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-800 px-2.5 text-xs font-medium text-slate-300 transition hover:bg-slate-700 hover:text-white disabled:opacity-40 disabled:pointer-events-none",
612
- children: [/* @__PURE__ */ S(y, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("span", {
784
+ children: [/* @__PURE__ */ D(C, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", {
613
785
  className: "hidden md:inline",
614
786
  children: "Clear All"
615
787
  })]
616
788
  }),
617
- /* @__PURE__ */ S("div", { className: "h-5 w-px bg-slate-700 mx-1" }),
618
- /* @__PURE__ */ C("button", {
789
+ /* @__PURE__ */ D("div", { className: "h-5 w-px bg-slate-700 mx-1" }),
790
+ /* @__PURE__ */ O("button", {
619
791
  type: "button",
620
- onClick: s,
792
+ onClick: o,
621
793
  className: "flex h-9 items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-800 px-3 text-xs sm:text-sm font-medium text-slate-200 transition hover:bg-slate-700 hover:text-white",
622
- children: [/* @__PURE__ */ S(b, { className: "h-4 w-4" }), /* @__PURE__ */ S("span", { children: "Cancel" })]
794
+ children: [/* @__PURE__ */ D(T, { className: "h-4 w-4" }), /* @__PURE__ */ D("span", { children: "Cancel" })]
623
795
  }),
624
- /* @__PURE__ */ C("button", {
796
+ /* @__PURE__ */ O("button", {
625
797
  type: "button",
626
- onClick: () => {
627
- d.current && (V(null), setTimeout(() => {
628
- d.current && a(d.current.toDataURL({
629
- pixelRatio: 1 / j,
630
- mimeType: "image/png"
631
- }));
632
- }, 60));
633
- },
634
- style: { backgroundColor: c },
635
- className: "flex h-9 items-center gap-1.5 rounded-lg px-4 text-xs sm:text-sm font-semibold text-white shadow-md transition hover:brightness-110 active:scale-95",
636
- children: [/* @__PURE__ */ S(l, { className: "h-4 w-4" }), /* @__PURE__ */ S("span", { children: "Add to Report" })]
798
+ onClick: he,
799
+ disabled: !_e,
800
+ style: { backgroundColor: s },
801
+ className: "flex h-9 items-center gap-1.5 rounded-lg px-4 text-xs sm:text-sm font-semibold text-white shadow-md transition hover:brightness-110 active:scale-95 disabled:opacity-50 disabled:pointer-events-none",
802
+ children: [/* @__PURE__ */ D(u, { className: "h-4 w-4" }), /* @__PURE__ */ D("span", { children: "Add to Report" })]
637
803
  })
638
804
  ]
639
805
  })]
640
806
  }),
641
- /* @__PURE__ */ C("div", {
807
+ /* @__PURE__ */ O("div", {
642
808
  className: "absolute top-20 left-1/2 -translate-x-1/2 z-20 flex flex-wrap items-center justify-center gap-2 rounded-2xl border border-slate-700/80 bg-slate-900/95 p-2 shadow-2xl backdrop-blur-md",
643
809
  children: [
644
- /* @__PURE__ */ C("div", {
810
+ /* @__PURE__ */ D("div", {
645
811
  className: "flex items-center gap-1",
646
- children: [
647
- /* @__PURE__ */ S("button", {
648
- type: "button",
649
- onClick: () => L("select"),
650
- title: "Select & Move / Resize",
651
- className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${I === "select" ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
652
- children: /* @__PURE__ */ S(ne, { className: "h-4 w-4" })
653
- }),
654
- /* @__PURE__ */ S("button", {
655
- type: "button",
656
- onClick: () => {
657
- L("pencil"), V(null);
658
- },
659
- title: "Pencil / Draw",
660
- className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${I === "pencil" ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
661
- children: /* @__PURE__ */ S(h, { className: "h-4 w-4" })
662
- }),
663
- /* @__PURE__ */ S("button", {
664
- type: "button",
665
- onClick: () => {
666
- L("eraser"), V(null);
667
- },
668
- title: "Eraser (click or drag to erase)",
669
- className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${I === "eraser" ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
670
- children: /* @__PURE__ */ S(te, { className: "h-4 w-4" })
671
- }),
672
- /* @__PURE__ */ S("button", {
673
- type: "button",
674
- onClick: () => {
675
- L("rectangle"), V(null);
676
- },
677
- title: "Rectangle (Resizable)",
678
- className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${I === "rectangle" ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
679
- children: /* @__PURE__ */ S(v, { className: "h-4 w-4" })
680
- }),
681
- /* @__PURE__ */ S("button", {
682
- type: "button",
683
- onClick: () => {
684
- L("circle"), V(null);
685
- },
686
- title: "Circle (Resizable)",
687
- className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${I === "circle" ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
688
- children: /* @__PURE__ */ S(ee, { className: "h-4 w-4" })
689
- }),
690
- /* @__PURE__ */ S("button", {
691
- type: "button",
692
- onClick: () => {
693
- L("arrow"), V(null);
694
- },
695
- title: "Arrow (Resizable)",
696
- className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${I === "arrow" ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
697
- children: /* @__PURE__ */ S(o, { className: "h-4 w-4" })
698
- })
699
- ]
812
+ children: L.map(({ id: e, title: t, Icon: n }) => /* @__PURE__ */ D("button", {
813
+ type: "button",
814
+ onClick: () => ge(e),
815
+ title: t,
816
+ "aria-pressed": V === e,
817
+ className: `flex h-9 w-9 items-center justify-center rounded-xl transition ${V === e ? "bg-blue-600 text-white shadow-inner" : "text-slate-300 hover:bg-slate-800 hover:text-white"}`,
818
+ children: /* @__PURE__ */ D(n, { className: "h-4 w-4" })
819
+ }, e))
700
820
  }),
701
- /* @__PURE__ */ S("div", { className: "h-5 w-px bg-slate-700" }),
702
- /* @__PURE__ */ C("div", {
821
+ /* @__PURE__ */ D("div", { className: "h-5 w-px bg-slate-700" }),
822
+ /* @__PURE__ */ O("div", {
703
823
  className: "flex items-center gap-1.5 px-1",
704
- children: [ae.map((e) => /* @__PURE__ */ S("button", {
824
+ children: [ee.map((e) => /* @__PURE__ */ D("button", {
705
825
  type: "button",
706
- onClick: () => oe(e),
826
+ onClick: () => ne(e),
707
827
  title: e,
828
+ "aria-label": `Color ${e}`,
708
829
  style: { backgroundColor: e },
709
- className: `h-5 w-5 rounded-full border border-slate-700 transition-transform ${R === e ? "scale-125 ring-2 ring-white ring-offset-1 ring-offset-slate-900" : "hover:scale-110"}`
710
- }, e)), /* @__PURE__ */ C("label", {
830
+ className: `h-5 w-5 rounded-full border border-slate-700 transition-transform ${U === e ? "scale-125 ring-2 ring-white ring-offset-1 ring-offset-slate-900" : "hover:scale-110"}`
831
+ }, e)), /* @__PURE__ */ O("label", {
711
832
  title: "Custom Color",
712
833
  className: "relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-slate-600 bg-slate-800 text-slate-300 hover:text-white transition",
713
- children: [/* @__PURE__ */ S(m, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("input", {
834
+ children: [/* @__PURE__ */ D(v, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("input", {
714
835
  type: "color",
715
- value: R,
716
- onChange: (e) => oe(e.target.value),
836
+ value: U,
837
+ onChange: (e) => ne(e.target.value),
717
838
  className: "absolute inset-0 opacity-0 cursor-pointer"
718
839
  })]
719
840
  })]
720
841
  }),
721
- /* @__PURE__ */ S("div", { className: "h-5 w-px bg-slate-700" }),
722
- /* @__PURE__ */ S("div", {
842
+ /* @__PURE__ */ D("div", { className: "h-5 w-px bg-slate-700" }),
843
+ /* @__PURE__ */ D("div", {
723
844
  className: "flex items-center gap-1",
724
- children: N.map((e) => /* @__PURE__ */ S("button", {
845
+ children: I.map((e) => /* @__PURE__ */ D("button", {
725
846
  type: "button",
726
- onClick: () => se(e.value),
727
- className: `flex h-7 w-7 items-center justify-center rounded-lg text-xs font-semibold transition ${z === e.value ? "bg-slate-700 text-white ring-1 ring-slate-400" : "text-slate-400 hover:bg-slate-800 hover:text-white"}`,
847
+ onClick: () => re(e.value),
848
+ className: `flex h-7 w-7 items-center justify-center rounded-lg text-xs font-semibold transition ${W === e.value ? "bg-slate-700 text-white ring-1 ring-slate-400" : "text-slate-400 hover:bg-slate-800 hover:text-white"}`,
728
849
  children: e.label
729
850
  }, e.value))
730
851
  }),
731
- B && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", { className: "h-5 w-px bg-slate-700" }), /* @__PURE__ */ C("button", {
852
+ G && /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D("div", { className: "h-5 w-px bg-slate-700" }), /* @__PURE__ */ O("button", {
732
853
  type: "button",
733
- onClick: me,
854
+ onClick: ce,
734
855
  title: "Delete Selected Shape (Del / Backspace)",
735
856
  className: "flex h-8 items-center gap-1.5 rounded-xl bg-red-600/90 px-3 text-xs font-semibold text-white shadow hover:bg-red-600",
736
- children: [/* @__PURE__ */ S(y, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ S("span", { children: "Delete" })]
857
+ children: [/* @__PURE__ */ D(C, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ D("span", { children: "Delete" })]
737
858
  })] })
738
859
  ]
739
860
  }),
740
- /* @__PURE__ */ S("div", {
861
+ /* @__PURE__ */ D("div", {
741
862
  className: "relative flex flex-1 items-center justify-center p-4 overflow-hidden",
742
- children: p ? /* @__PURE__ */ S("div", {
863
+ children: x ? /* @__PURE__ */ D("p", {
864
+ className: "text-sm text-red-300",
865
+ children: x
866
+ }) : _e ? /* @__PURE__ */ D("div", {
743
867
  className: "relative shadow-2xl rounded-md overflow-hidden border border-slate-700 bg-slate-900",
744
868
  style: {
745
- width: P.width,
746
- height: P.height,
747
- cursor: I === "select" ? "default" : I === "eraser" ? "cell" : "crosshair"
869
+ width: B.width,
870
+ height: B.height,
871
+ cursor: V === "select" ? "default" : V === "eraser" ? "cell" : "crosshair"
748
872
  },
749
- children: /* @__PURE__ */ C(A, {
750
- ref: d,
751
- width: P.width,
752
- height: P.height,
753
- scaleX: j,
754
- scaleY: j,
755
- onMouseDown: he,
756
- onMouseMove: ge,
757
- onMouseUp: _e,
758
- onTouchStart: he,
759
- onTouchMove: ge,
760
- onTouchEnd: _e,
761
- children: [/* @__PURE__ */ S(D, {
762
- listening: !1,
763
- children: /* @__PURE__ */ S(E, {
764
- name: "bg-image",
765
- image: p,
766
- width: p.naturalWidth,
767
- height: p.naturalHeight
768
- })
769
- }), /* @__PURE__ */ C(D, { children: [
770
- H.map((e) => {
771
- let t = I === "select";
772
- return e.type === "line" ? /* @__PURE__ */ S(O, {
773
- id: e.id,
774
- points: e.points,
775
- stroke: e.stroke,
776
- strokeWidth: e.strokeWidth,
777
- tension: .5,
778
- lineCap: "round",
779
- lineJoin: "round",
780
- globalCompositeOperation: e.tool === "eraser" ? "destination-out" : "source-over",
781
- draggable: t && e.tool !== "eraser",
782
- onClick: () => {
783
- if (t && V(e.id), I === "eraser") {
784
- let t = H.filter((t) => t.id !== e.id);
785
- U(t), Z(t);
786
- }
787
- },
788
- onTap: () => {
789
- t && V(e.id);
790
- },
791
- onDragEnd: (t) => $(t, e.id)
792
- }, e.id) : e.type === "rectangle" ? /* @__PURE__ */ S(k, {
793
- id: e.id,
794
- x: e.x,
795
- y: e.y,
796
- width: e.width,
797
- height: e.height,
798
- stroke: e.stroke,
799
- strokeWidth: e.strokeWidth,
800
- rotation: e.rotation || 0,
801
- draggable: t,
802
- onClick: () => {
803
- if (t && V(e.id), I === "eraser") {
804
- let t = H.filter((t) => t.id !== e.id);
805
- U(t), Z(t);
806
- }
807
- },
808
- onTap: () => {
809
- t && V(e.id);
810
- },
811
- onTransformEnd: (t) => ve(t, e.id),
812
- onDragEnd: (t) => $(t, e.id)
813
- }, e.id) : e.type === "circle" ? /* @__PURE__ */ S(T, {
814
- id: e.id,
815
- x: e.x,
816
- y: e.y,
817
- radius: e.radius,
818
- stroke: e.stroke,
819
- strokeWidth: e.strokeWidth,
820
- rotation: e.rotation || 0,
821
- draggable: t,
822
- onClick: () => {
823
- if (t && V(e.id), I === "eraser") {
824
- let t = H.filter((t) => t.id !== e.id);
825
- U(t), Z(t);
826
- }
827
- },
828
- onTap: () => {
829
- t && V(e.id);
830
- },
831
- onTransformEnd: (t) => ve(t, e.id),
832
- onDragEnd: (t) => $(t, e.id)
833
- }, e.id) : e.type === "arrow" ? /* @__PURE__ */ S(w, {
834
- id: e.id,
835
- points: e.points,
836
- pointerLength: 14,
837
- pointerWidth: 14,
838
- stroke: e.stroke,
839
- fill: e.fill,
840
- strokeWidth: e.strokeWidth,
841
- rotation: e.rotation || 0,
842
- draggable: t,
843
- onClick: () => {
844
- if (t && V(e.id), I === "eraser") {
845
- let t = H.filter((t) => t.id !== e.id);
846
- U(t), Z(t);
847
- }
848
- },
849
- onTap: () => {
850
- t && V(e.id);
851
- },
852
- onTransformEnd: (t) => ve(t, e.id),
853
- onDragEnd: (t) => $(t, e.id)
854
- }, e.id) : null;
855
- }),
856
- W && /* @__PURE__ */ C(x, { children: [
857
- W.type === "line" && /* @__PURE__ */ S(O, {
858
- points: W.points,
859
- stroke: W.stroke,
860
- strokeWidth: W.strokeWidth,
861
- tension: .5,
862
- lineCap: "round",
863
- lineJoin: "round",
864
- globalCompositeOperation: W.tool === "eraser" ? "destination-out" : "source-over"
865
- }),
866
- W.type === "rectangle" && /* @__PURE__ */ S(k, {
867
- x: W.x,
868
- y: W.y,
869
- width: W.width,
870
- height: W.height,
871
- stroke: W.stroke,
872
- strokeWidth: W.strokeWidth,
873
- dash: [6, 4]
874
- }),
875
- W.type === "circle" && /* @__PURE__ */ S(T, {
876
- x: W.x,
877
- y: W.y,
878
- radius: W.radius,
879
- stroke: W.stroke,
880
- strokeWidth: W.strokeWidth,
881
- dash: [6, 4]
882
- }),
883
- W.type === "arrow" && /* @__PURE__ */ S(w, {
884
- points: W.points,
885
- pointerLength: 14,
886
- pointerWidth: 14,
887
- stroke: W.stroke,
888
- fill: W.fill,
889
- strokeWidth: W.strokeWidth,
890
- dash: [6, 4]
891
- })
892
- ] }),
893
- /* @__PURE__ */ S(ie, {
894
- ref: f,
895
- rotateEnabled: !0,
896
- enabledAnchors: [
897
- "top-left",
898
- "top-right",
899
- "bottom-left",
900
- "bottom-right",
901
- "middle-left",
902
- "middle-right",
903
- "top-center",
904
- "bottom-center"
905
- ],
906
- borderStroke: "#3b82f6",
907
- borderDash: [4, 4],
908
- anchorFill: "#ffffff",
909
- anchorStroke: "#3b82f6",
910
- anchorSize: 9,
911
- anchorCornerRadius: 2,
912
- boundBoxFunc: (e, t) => t.width < 10 || t.height < 10 ? e : t
913
- })
914
- ] })]
915
- })
916
- }) : /* @__PURE__ */ C("div", {
873
+ children: /* @__PURE__ */ D("div", { ref: l })
874
+ }) : /* @__PURE__ */ O("div", {
917
875
  className: "flex flex-col items-center gap-2 text-slate-400",
918
- children: [/* @__PURE__ */ S("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" }), /* @__PURE__ */ S("p", {
876
+ children: [/* @__PURE__ */ D("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" }), /* @__PURE__ */ D("p", {
919
877
  className: "text-sm",
920
878
  children: "Loading screenshot..."
921
879
  })]
922
880
  })
923
881
  }),
924
- /* @__PURE__ */ C("div", {
882
+ /* @__PURE__ */ O("div", {
925
883
  className: "flex h-10 shrink-0 items-center justify-between border-t border-slate-800 bg-slate-900/80 px-4 text-xs text-slate-400",
926
- children: [/* @__PURE__ */ C("div", {
884
+ children: [/* @__PURE__ */ O("div", {
927
885
  className: "flex items-center gap-4",
928
- children: [/* @__PURE__ */ C("span", { children: ["Active tool: ", /* @__PURE__ */ S("strong", {
886
+ children: [/* @__PURE__ */ O("span", { children: ["Active tool: ", /* @__PURE__ */ D("strong", {
929
887
  className: "text-slate-200 capitalize",
930
- children: I
931
- })] }), /* @__PURE__ */ C("span", {
888
+ children: V
889
+ })] }), /* @__PURE__ */ O("span", {
932
890
  className: "hidden sm:inline",
933
891
  children: [
934
892
  "Use ",
935
- /* @__PURE__ */ S("kbd", {
893
+ /* @__PURE__ */ D("kbd", {
936
894
  className: "rounded bg-slate-800 px-1 py-0.5 text-slate-300",
937
895
  children: "Ctrl+Z"
938
896
  }),
939
- " to undo, ",
940
- /* @__PURE__ */ S("kbd", {
897
+ " to undo,",
898
+ " ",
899
+ /* @__PURE__ */ D("kbd", {
941
900
  className: "rounded bg-slate-800 px-1 py-0.5 text-slate-300",
942
901
  children: "Del"
943
902
  }),
944
903
  " to remove selected shape"
945
904
  ]
946
905
  })]
947
- }), /* @__PURE__ */ S("div", { children: p && /* @__PURE__ */ C("span", { children: [
906
+ }), /* @__PURE__ */ D("div", { children: k && /* @__PURE__ */ O("span", { children: [
948
907
  "Original Resolution: ",
949
- p.naturalWidth,
908
+ k.naturalWidth,
950
909
  " x ",
951
- p.naturalHeight,
910
+ k.naturalHeight,
952
911
  "px"
953
912
  ] }) })]
954
913
  })
955
914
  ]
956
915
  });
957
- }, F = ({ projectUrl: e, onSubmit: t, uiSettings: n = {}, onSuccess: a, onError: o, isOpen: c, onToggle: l, className: u = "" }) => {
958
- let { position: ee = "bottom-right", primaryColor: d = "#2563eb", buttonSize: te = "md", buttonText: f, buttonIcon: p, zIndex: ne = 99990 } = n, [m, h] = r(!1), g = c === void 0 ? m : c, _ = (e) => {
959
- c === void 0 && h(e), l?.(e);
960
- }, [v, y] = r([]), [re, w] = r(!1), [T, E] = r(!1), [D, O] = r(null), k = (e) => {
916
+ }, B = ({ projectUrl: e, onSubmit: t, uiSettings: n = {}, onSuccess: r, onError: o, isOpen: s, onToggle: l, className: u = "" }) => {
917
+ let { position: d = "bottom-right", primaryColor: f = "#2563eb", buttonSize: p = "md", buttonText: m, buttonIcon: h, zIndex: g = 99990 } = n, [_, v] = i(!1), y = s === void 0 ? _ : s, b = (e) => {
918
+ s === void 0 && v(e), l?.(e);
919
+ }, [x, S] = i([]), [C, w] = i(!1), [k, j] = i(!1), [M, N] = i(null), P = (e) => {
961
920
  switch (e) {
962
921
  case "bottom-left": return "bottom-6 left-6";
963
922
  case "top-left": return "top-6 left-6";
@@ -966,7 +925,7 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
966
925
  case "right": return "top-1/2 -translate-y-1/2 right-4";
967
926
  default: return "bottom-6 right-6";
968
927
  }
969
- }, A = ((e) => {
928
+ }, F = ((e) => {
970
929
  switch (e) {
971
930
  case "sm": return {
972
931
  button: "h-10 px-3.5 gap-2 text-xs font-semibold rounded-full shadow-md",
@@ -981,40 +940,40 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
981
940
  icon: "h-5 w-5"
982
941
  };
983
942
  }
984
- })(te);
985
- return re ? null : /* @__PURE__ */ C(x, { children: [
986
- !T && /* @__PURE__ */ S("div", {
943
+ })(p);
944
+ return C ? null : /* @__PURE__ */ O(E, { children: [
945
+ !k && /* @__PURE__ */ D("div", {
987
946
  "data-bugdrop-widget": "true",
988
- className: `fixed ${k(ee)} ${u}`,
989
- style: { zIndex: ne },
990
- children: /* @__PURE__ */ C("button", {
947
+ className: `fixed ${P(d)} ${u}`,
948
+ style: { zIndex: g },
949
+ children: /* @__PURE__ */ O("button", {
991
950
  type: "button",
992
- onClick: () => _(!g),
993
- style: { backgroundColor: d },
994
- className: `group flex items-center justify-center text-white transition-all duration-200 hover:brightness-110 active:scale-95 ${A.button}`,
995
- "aria-label": g ? "Close bug report form" : "Open bug report form",
996
- title: g ? "Close Bug Report" : "Report a Bug",
951
+ onClick: () => b(!y),
952
+ style: { backgroundColor: f },
953
+ className: `group flex items-center justify-center text-white transition-all duration-200 hover:brightness-110 active:scale-95 ${F.button}`,
954
+ "aria-label": y ? "Close bug report form" : "Open bug report form",
955
+ title: y ? "Close Bug Report" : "Report a Bug",
997
956
  children: [
998
- g ? /* @__PURE__ */ S(b, { className: A.icon }) : p || /* @__PURE__ */ S(s, { className: A.icon }),
999
- f && /* @__PURE__ */ S("span", { children: f }),
1000
- v.length > 0 && !g && /* @__PURE__ */ S("span", {
957
+ y ? /* @__PURE__ */ D(T, { className: F.icon }) : h || /* @__PURE__ */ D(c, { className: F.icon }),
958
+ m && /* @__PURE__ */ D("span", { children: m }),
959
+ x.length > 0 && !y && /* @__PURE__ */ D("span", {
1001
960
  className: "flex h-5 w-5 items-center justify-center rounded-full bg-white text-[11px] font-bold text-slate-900 shadow",
1002
- children: v.length
961
+ children: x.length
1003
962
  })
1004
963
  ]
1005
964
  })
1006
965
  }),
1007
- !T && /* @__PURE__ */ S(M, {
966
+ !k && /* @__PURE__ */ D(A, {
1008
967
  projectUrl: e,
1009
- isOpen: g,
1010
- onClose: () => _(!1),
968
+ isOpen: y,
969
+ onClose: () => b(!1),
1011
970
  uiSettings: n,
1012
- screenshots: v,
971
+ screenshots: x,
1013
972
  onTriggerScreenshot: async () => {
1014
973
  w(!0);
1015
974
  try {
1016
975
  await new Promise((e) => setTimeout(e, 180));
1017
- let e = (await i(document.documentElement, {
976
+ let e = (await a(document.documentElement, {
1018
977
  useCORS: !0,
1019
978
  allowTaint: !0,
1020
979
  logging: !1,
@@ -1024,10 +983,10 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
1024
983
  windowHeight: document.documentElement.offsetHeight,
1025
984
  ignoreElements: (e) => e.getAttribute("data-bugdrop-widget") === "true" || e.classList.contains("bugdrop-ignore")
1026
985
  })).toDataURL("image/png");
1027
- O({
986
+ N({
1028
987
  dataUrl: e,
1029
988
  isNew: !0
1030
- }), E(!0);
989
+ }), j(!0);
1031
990
  } catch (e) {
1032
991
  console.error("Error taking screenshot:", e), alert("Could not capture screenshot. Please try again.");
1033
992
  } finally {
@@ -1035,50 +994,50 @@ var M = ({ projectUrl: e, isOpen: t, onClose: n, uiSettings: i = {}, screenshots
1035
994
  }
1036
995
  },
1037
996
  onEditScreenshot: (e) => {
1038
- O({
997
+ N({
1039
998
  id: e.id,
1040
999
  dataUrl: e.dataUrl,
1041
1000
  isNew: !1
1042
- }), E(!0);
1001
+ }), j(!0);
1043
1002
  },
1044
1003
  onDeleteScreenshot: (e) => {
1045
- y((t) => t.filter((t) => t.id !== e));
1004
+ S((t) => t.filter((t) => t.id !== e));
1046
1005
  },
1047
1006
  onSubmitReport: async (e) => {
1048
1007
  try {
1049
- await t(e), a?.(e);
1008
+ await t(e), r?.(e);
1050
1009
  } catch (e) {
1051
1010
  let t = e instanceof Error ? e : /* @__PURE__ */ Error("Failed to submit bug report");
1052
1011
  throw o?.(t), t;
1053
1012
  }
1054
1013
  }
1055
1014
  }),
1056
- T && D && /* @__PURE__ */ S(P, {
1057
- imageSrc: D.dataUrl,
1015
+ k && M && /* @__PURE__ */ D(z, {
1016
+ imageSrc: M.dataUrl,
1058
1017
  onSave: (e) => {
1059
- if (D?.isNew) {
1060
- if (v.length < 3) {
1018
+ if (M?.isNew) {
1019
+ if (x.length < 3) {
1061
1020
  let t = {
1062
1021
  id: `ss_${Date.now()}_${Math.random().toString(36).substring(2, 6)}`,
1063
1022
  dataUrl: e,
1064
1023
  createdAt: Date.now()
1065
1024
  };
1066
- y((e) => [...e, t]);
1025
+ S((e) => [...e, t]);
1067
1026
  }
1068
- } else D?.id && y((t) => t.map((t) => t.id === D.id ? {
1027
+ } else M?.id && S((t) => t.map((t) => t.id === M.id ? {
1069
1028
  ...t,
1070
1029
  dataUrl: e
1071
1030
  } : t));
1072
- E(!1), O(null), _(!0);
1031
+ j(!1), N(null), b(!0);
1073
1032
  },
1074
1033
  onCancel: () => {
1075
- E(!1), O(null), _(!0);
1034
+ j(!1), N(null), b(!0);
1076
1035
  },
1077
- primaryColor: d
1036
+ primaryColor: f
1078
1037
  })
1079
1038
  ] });
1080
1039
  };
1081
1040
  //#endregion
1082
- export { F as Widget };
1041
+ export { B as Widget };
1083
1042
 
1084
1043
  //# sourceMappingURL=bug-widget-library.js.map