review-lens-react 0.2.0 → 1.0.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.
- package/README.md +12 -7
- package/dist/review-lens-react.js +445 -417
- package/dist/review-lens-react.umd.cjs +1 -1
- package/dist/sheets/google-sheets-adapter.d.ts +2 -1
- package/dist/types.d.ts +2 -1
- package/package.json +5 -1
|
@@ -1,34 +1,35 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as st, useMemo as
|
|
1
|
+
import { jsx as r, jsxs as o, Fragment as re } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as st, useMemo as ie, useState as k, useCallback as W, useEffect as _, useContext as ot, useRef as We, useLayoutEffect as lt } from "react";
|
|
3
3
|
const ct = [
|
|
4
4
|
"https://www.googleapis.com/auth/spreadsheets",
|
|
5
5
|
"https://www.googleapis.com/auth/userinfo.email"
|
|
6
6
|
].join(" "), dt = "https://www.googleapis.com/oauth2/v3/userinfo";
|
|
7
7
|
function ht(e) {
|
|
8
|
-
const t = e.feedbackSheetName ?? "Feedback", n = e.messagesSheetName ?? "Messages",
|
|
8
|
+
const t = e.feedbackSheetName ?? "Feedback", n = e.messagesSheetName ?? "Messages", i = e.usersSheetName ?? "Users";
|
|
9
9
|
let s, c;
|
|
10
10
|
async function g() {
|
|
11
11
|
return s ?? (s = St(e.googleClientId)), s;
|
|
12
12
|
}
|
|
13
|
-
async function f(d, v) {
|
|
14
|
-
const
|
|
15
|
-
`https://sheets.googleapis.com/v4/spreadsheets/${
|
|
13
|
+
async function f(d, v, h) {
|
|
14
|
+
const b = await g(), C = await fetch(
|
|
15
|
+
`https://sheets.googleapis.com/v4/spreadsheets/${d}${v}`,
|
|
16
16
|
{
|
|
17
|
-
...
|
|
17
|
+
...h,
|
|
18
18
|
headers: {
|
|
19
|
-
Authorization: `Bearer ${
|
|
19
|
+
Authorization: `Bearer ${b}`,
|
|
20
20
|
"Content-Type": "application/json",
|
|
21
|
-
...
|
|
21
|
+
...h == null ? void 0 : h.headers
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
);
|
|
25
|
-
if (!
|
|
26
|
-
throw new Error(`Google Sheets request failed with ${
|
|
27
|
-
return
|
|
25
|
+
if (!C.ok)
|
|
26
|
+
throw new Error(`Google Sheets request failed with ${C.status}`);
|
|
27
|
+
return C.json();
|
|
28
28
|
}
|
|
29
|
-
async function
|
|
29
|
+
async function p(d, v) {
|
|
30
30
|
return (await f(
|
|
31
|
-
|
|
31
|
+
d,
|
|
32
|
+
`/values/${encodeURIComponent(v)}`
|
|
32
33
|
)).values ?? [];
|
|
33
34
|
}
|
|
34
35
|
return {
|
|
@@ -46,51 +47,59 @@ function ht(e) {
|
|
|
46
47
|
return { email: c };
|
|
47
48
|
},
|
|
48
49
|
async getPermissions(d) {
|
|
49
|
-
const [{ email: v },
|
|
50
|
+
const [{ email: v }, h] = await Promise.all([
|
|
51
|
+
this.getCurrentUser(),
|
|
52
|
+
p(e.usersSpreadsheetId, i)
|
|
53
|
+
]), b = ce(h), C = v.toLowerCase(), E = b.find(
|
|
50
54
|
(A) => {
|
|
51
|
-
var
|
|
52
|
-
return ((
|
|
55
|
+
var u;
|
|
56
|
+
return ((u = A.email) == null ? void 0 : u.toLowerCase()) === C && A.active !== "false" && (!A.projectKey || A.projectKey === d);
|
|
53
57
|
}
|
|
54
58
|
);
|
|
55
|
-
return gt((
|
|
59
|
+
return gt((E == null ? void 0 : E.role) ?? "designer");
|
|
56
60
|
},
|
|
57
61
|
async listFeedback(d) {
|
|
58
|
-
return ce(await
|
|
59
|
-
(
|
|
60
|
-
).sort((
|
|
62
|
+
return ce(await p(e.contentSpreadsheetId, t)).map(Re).filter((h) => h !== null).filter(
|
|
63
|
+
(h) => h.projectKey === d.projectKey && h.contentId === d.contentId && h.normalizedPath === d.normalizedPath
|
|
64
|
+
).sort((h, b) => b.createdAt.localeCompare(h.createdAt));
|
|
61
65
|
},
|
|
62
66
|
async createFeedback(d) {
|
|
63
|
-
const v = (/* @__PURE__ */ new Date()).toISOString(),
|
|
67
|
+
const v = (/* @__PURE__ */ new Date()).toISOString(), h = {
|
|
64
68
|
...d,
|
|
65
69
|
id: crypto.randomUUID(),
|
|
66
70
|
attachments: [],
|
|
67
71
|
createdAt: v,
|
|
68
72
|
updatedAt: v
|
|
69
73
|
};
|
|
70
|
-
return await f(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
return await f(
|
|
75
|
+
e.contentSpreadsheetId,
|
|
76
|
+
`/values/${encodeURIComponent(t)}:append?valueInputOption=RAW`,
|
|
77
|
+
{
|
|
78
|
+
method: "POST",
|
|
79
|
+
body: JSON.stringify({ values: [Te(h)] })
|
|
80
|
+
}
|
|
81
|
+
), h;
|
|
74
82
|
},
|
|
75
83
|
async updateFeedback(d, v) {
|
|
76
|
-
const
|
|
77
|
-
if (
|
|
84
|
+
const h = await p(e.contentSpreadsheetId, t), b = h[0] ?? Me, C = b.indexOf("id");
|
|
85
|
+
if (C === -1)
|
|
78
86
|
throw new Error(`Sheet ${t} is missing an id column`);
|
|
79
|
-
const
|
|
80
|
-
if (
|
|
87
|
+
const E = h.findIndex((w, N) => N > 0 && w[C] === d);
|
|
88
|
+
if (E < 1)
|
|
81
89
|
throw new Error(`Feedback ${d} was not found`);
|
|
82
|
-
const A = (/* @__PURE__ */ new Date()).toISOString(),
|
|
83
|
-
if (!
|
|
90
|
+
const A = (/* @__PURE__ */ new Date()).toISOString(), u = Re(De(b, h[E]));
|
|
91
|
+
if (!u)
|
|
84
92
|
throw new Error(`Feedback ${d} could not be parsed before updating`);
|
|
85
93
|
const R = {
|
|
86
|
-
...
|
|
94
|
+
...u,
|
|
87
95
|
...v,
|
|
88
96
|
updatedAt: A
|
|
89
|
-
}, y =
|
|
97
|
+
}, y = Te(R);
|
|
90
98
|
return await f(
|
|
91
|
-
|
|
99
|
+
e.contentSpreadsheetId,
|
|
100
|
+
`/values/${encodeURIComponent(t)}!A${E + 1}:${yt(
|
|
92
101
|
Me.length
|
|
93
|
-
)}${
|
|
102
|
+
)}${E + 1}?valueInputOption=RAW`,
|
|
94
103
|
{
|
|
95
104
|
method: "PUT",
|
|
96
105
|
body: JSON.stringify({ values: [y] })
|
|
@@ -98,7 +107,7 @@ function ht(e) {
|
|
|
98
107
|
), R;
|
|
99
108
|
},
|
|
100
109
|
async listMessages(d) {
|
|
101
|
-
return ce(await
|
|
110
|
+
return ce(await p(e.contentSpreadsheetId, n)).map(mt).filter((h) => h !== null).filter((h) => h.feedbackId === d).sort((h, b) => h.createdAt.localeCompare(b.createdAt));
|
|
102
111
|
},
|
|
103
112
|
async createMessage(d) {
|
|
104
113
|
const v = {
|
|
@@ -106,10 +115,14 @@ function ht(e) {
|
|
|
106
115
|
id: crypto.randomUUID(),
|
|
107
116
|
createdAt: (/* @__PURE__ */ new Date()).toISOString()
|
|
108
117
|
};
|
|
109
|
-
return await f(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
return await f(
|
|
119
|
+
e.contentSpreadsheetId,
|
|
120
|
+
`/values/${encodeURIComponent(n)}:append?valueInputOption=RAW`,
|
|
121
|
+
{
|
|
122
|
+
method: "POST",
|
|
123
|
+
body: JSON.stringify({ values: [pt(v)] })
|
|
124
|
+
}
|
|
125
|
+
), v;
|
|
113
126
|
}
|
|
114
127
|
};
|
|
115
128
|
}
|
|
@@ -143,7 +156,7 @@ const Me = [
|
|
|
143
156
|
"resolvedAt",
|
|
144
157
|
"resolvedBy"
|
|
145
158
|
], ut = ["id", "feedbackId", "body", "authorEmail", "createdAt"];
|
|
146
|
-
function
|
|
159
|
+
function Te(e) {
|
|
147
160
|
return [
|
|
148
161
|
e.id,
|
|
149
162
|
e.projectKey,
|
|
@@ -180,12 +193,12 @@ function pt(e) {
|
|
|
180
193
|
}
|
|
181
194
|
function ce(e) {
|
|
182
195
|
const [t, ...n] = e;
|
|
183
|
-
return t ? n.map((
|
|
196
|
+
return t ? n.map((i) => De(t, i)) : [];
|
|
184
197
|
}
|
|
185
198
|
function De(e, t) {
|
|
186
|
-
return Object.fromEntries(e.map((n,
|
|
199
|
+
return Object.fromEntries(e.map((n, i) => [n, t[i] ?? ""]));
|
|
187
200
|
}
|
|
188
|
-
function
|
|
201
|
+
function Re(e) {
|
|
189
202
|
return e.id ? {
|
|
190
203
|
id: e.id,
|
|
191
204
|
projectKey: e.projectKey,
|
|
@@ -194,13 +207,13 @@ function Te(e) {
|
|
|
194
207
|
originalUrl: e.originalUrl,
|
|
195
208
|
selector: e.selector,
|
|
196
209
|
selectorStrategy: e.selectorStrategy === "stable-attribute" ? "stable-attribute" : "css-path",
|
|
197
|
-
elementFingerprint:
|
|
210
|
+
elementFingerprint: ue(e.elementFingerprintJson, {
|
|
198
211
|
tagName: "",
|
|
199
212
|
width: 0,
|
|
200
213
|
height: 0
|
|
201
214
|
}),
|
|
202
|
-
createdCssSnapshot:
|
|
203
|
-
fixedCssSnapshot: e.fixedCssSnapshotJson ?
|
|
215
|
+
createdCssSnapshot: Be(e.createdCssSnapshotJson),
|
|
216
|
+
fixedCssSnapshot: e.fixedCssSnapshotJson ? Be(e.fixedCssSnapshotJson) : void 0,
|
|
204
217
|
comment: e.comment,
|
|
205
218
|
status: ft(e.status),
|
|
206
219
|
severity: bt(e.severity),
|
|
@@ -211,7 +224,7 @@ function Te(e) {
|
|
|
211
224
|
viewportPreset: wt(e.viewportPreset),
|
|
212
225
|
screenshotUrl: e.screenshotUrl || void 0,
|
|
213
226
|
screenshotThumbnailUrl: e.screenshotThumbnailUrl || void 0,
|
|
214
|
-
attachments:
|
|
227
|
+
attachments: ue(e.attachmentJson, []),
|
|
215
228
|
authorEmail: e.authorEmail,
|
|
216
229
|
createdAt: e.createdAt,
|
|
217
230
|
updatedAt: e.updatedAt,
|
|
@@ -230,15 +243,15 @@ function mt(e) {
|
|
|
230
243
|
createdAt: e.createdAt
|
|
231
244
|
};
|
|
232
245
|
}
|
|
233
|
-
function
|
|
246
|
+
function ue(e, t) {
|
|
234
247
|
try {
|
|
235
248
|
return e ? JSON.parse(e) : t;
|
|
236
249
|
} catch {
|
|
237
250
|
return t;
|
|
238
251
|
}
|
|
239
252
|
}
|
|
240
|
-
function
|
|
241
|
-
const t =
|
|
253
|
+
function Be(e) {
|
|
254
|
+
const t = ue(e, {});
|
|
242
255
|
return {
|
|
243
256
|
margin: t.margin ?? "",
|
|
244
257
|
marginTop: t.marginTop ?? "",
|
|
@@ -283,15 +296,15 @@ function wt(e) {
|
|
|
283
296
|
function yt(e) {
|
|
284
297
|
let t = e, n = "";
|
|
285
298
|
for (; t > 0; ) {
|
|
286
|
-
const
|
|
287
|
-
n = String.fromCharCode(65 +
|
|
299
|
+
const i = (t - 1) % 26;
|
|
300
|
+
n = String.fromCharCode(65 + i) + n, t = Math.floor((t - i) / 26);
|
|
288
301
|
}
|
|
289
302
|
return n;
|
|
290
303
|
}
|
|
291
304
|
async function St(e) {
|
|
292
305
|
return await kt(), new Promise((t, n) => {
|
|
293
306
|
var s;
|
|
294
|
-
const
|
|
307
|
+
const i = (s = window.google) == null ? void 0 : s.accounts.oauth2.initTokenClient({
|
|
295
308
|
client_id: e,
|
|
296
309
|
scope: ct,
|
|
297
310
|
callback: (c) => {
|
|
@@ -302,17 +315,17 @@ async function St(e) {
|
|
|
302
315
|
t(c.access_token);
|
|
303
316
|
}
|
|
304
317
|
});
|
|
305
|
-
|
|
318
|
+
i == null || i.requestAccessToken({ prompt: "" });
|
|
306
319
|
});
|
|
307
320
|
}
|
|
308
321
|
function kt() {
|
|
309
322
|
var e;
|
|
310
323
|
return (e = window.google) != null && e.accounts.oauth2 ? Promise.resolve() : new Promise((t, n) => {
|
|
311
|
-
const
|
|
324
|
+
const i = document.querySelector(
|
|
312
325
|
'script[src="https://accounts.google.com/gsi/client"]'
|
|
313
326
|
);
|
|
314
|
-
if (
|
|
315
|
-
|
|
327
|
+
if (i) {
|
|
328
|
+
i.addEventListener("load", () => t(), { once: !0 }), i.addEventListener("error", () => n(new Error("Google Identity failed to load")), {
|
|
316
329
|
once: !0
|
|
317
330
|
});
|
|
318
331
|
return;
|
|
@@ -325,12 +338,19 @@ function Ct(e) {
|
|
|
325
338
|
return new URL(e, window.location.href).pathname.replace(/\/+$/, "") || "/";
|
|
326
339
|
}
|
|
327
340
|
const ze = st(null);
|
|
328
|
-
function
|
|
329
|
-
const n =
|
|
330
|
-
googleClientId:
|
|
331
|
-
|
|
341
|
+
function Qt({ config: e, children: t }) {
|
|
342
|
+
const n = ie(() => e.adapter ? e.adapter : ht({
|
|
343
|
+
googleClientId: de(e.googleClientId, "googleClientId"),
|
|
344
|
+
contentSpreadsheetId: de(e.contentSpreadsheetId, "contentSpreadsheetId"),
|
|
345
|
+
usersSpreadsheetId: de(e.usersSpreadsheetId, "usersSpreadsheetId"),
|
|
332
346
|
feedbackSheetName: e.sheetName ?? "Feedback"
|
|
333
|
-
}), [
|
|
347
|
+
}), [
|
|
348
|
+
e.adapter,
|
|
349
|
+
e.contentSpreadsheetId,
|
|
350
|
+
e.googleClientId,
|
|
351
|
+
e.sheetName,
|
|
352
|
+
e.usersSpreadsheetId
|
|
353
|
+
]), i = e.currentUrl ?? window.location.href, s = (e.normalizeUrl ?? Ct)(i), [c, g] = k(), [f, p] = k([]), [d, v] = k([]), h = W(async () => {
|
|
334
354
|
const y = await n.listFeedback({
|
|
335
355
|
projectKey: e.projectKey,
|
|
336
356
|
contentId: e.contentId,
|
|
@@ -341,45 +361,45 @@ function Xt({ config: e, children: t }) {
|
|
|
341
361
|
_(() => {
|
|
342
362
|
let y = !0;
|
|
343
363
|
async function w() {
|
|
344
|
-
const [
|
|
364
|
+
const [N, B] = await Promise.all([
|
|
345
365
|
n.getCurrentUser(),
|
|
346
366
|
n.getPermissions(e.projectKey)
|
|
347
367
|
]);
|
|
348
|
-
y && (g(
|
|
368
|
+
y && (g(N), p(B), await h());
|
|
349
369
|
}
|
|
350
370
|
return w(), () => {
|
|
351
371
|
y = !1;
|
|
352
372
|
};
|
|
353
|
-
}, [n, e.projectKey,
|
|
373
|
+
}, [n, e.projectKey, h]);
|
|
354
374
|
const b = W(
|
|
355
375
|
async (y) => {
|
|
356
376
|
const w = await n.createFeedback(y);
|
|
357
|
-
return v((
|
|
377
|
+
return v((N) => [w, ...N]), w;
|
|
358
378
|
},
|
|
359
379
|
[n]
|
|
360
|
-
),
|
|
380
|
+
), C = W(
|
|
361
381
|
async (y, w) => {
|
|
362
|
-
const
|
|
382
|
+
const N = await n.updateFeedback(y, w);
|
|
363
383
|
return v(
|
|
364
|
-
(B) => B.map((D) => D.id === y ?
|
|
365
|
-
),
|
|
384
|
+
(B) => B.map((D) => D.id === y ? N : D)
|
|
385
|
+
), N;
|
|
366
386
|
},
|
|
367
387
|
[n]
|
|
368
|
-
),
|
|
388
|
+
), E = W(
|
|
369
389
|
(y) => n.listMessages(y),
|
|
370
390
|
[n]
|
|
371
391
|
), A = W(
|
|
372
392
|
(y) => n.createMessage(y),
|
|
373
393
|
[n]
|
|
374
|
-
),
|
|
394
|
+
), u = W(
|
|
375
395
|
async (y, w) => {
|
|
376
|
-
const
|
|
377
|
-
if (!
|
|
396
|
+
const N = e.uploadAttachment ?? n.uploadAttachment;
|
|
397
|
+
if (!N)
|
|
378
398
|
throw new Error("Review Lens attachment upload is not configured");
|
|
379
|
-
return
|
|
399
|
+
return N(y, w);
|
|
380
400
|
},
|
|
381
401
|
[n, e]
|
|
382
|
-
), R =
|
|
402
|
+
), R = ie(
|
|
383
403
|
() => ({
|
|
384
404
|
config: e,
|
|
385
405
|
adapter: n,
|
|
@@ -387,12 +407,12 @@ function Xt({ config: e, children: t }) {
|
|
|
387
407
|
permissions: f,
|
|
388
408
|
feedback: d,
|
|
389
409
|
normalizedPath: s,
|
|
390
|
-
refreshFeedback:
|
|
410
|
+
refreshFeedback: h,
|
|
391
411
|
createFeedback: b,
|
|
392
|
-
updateFeedback:
|
|
393
|
-
listMessages:
|
|
412
|
+
updateFeedback: C,
|
|
413
|
+
listMessages: E,
|
|
394
414
|
createMessage: A,
|
|
395
|
-
uploadAttachment:
|
|
415
|
+
uploadAttachment: u
|
|
396
416
|
}),
|
|
397
417
|
[
|
|
398
418
|
n,
|
|
@@ -402,14 +422,14 @@ function Xt({ config: e, children: t }) {
|
|
|
402
422
|
d,
|
|
403
423
|
s,
|
|
404
424
|
f,
|
|
405
|
-
|
|
425
|
+
h,
|
|
426
|
+
C,
|
|
406
427
|
E,
|
|
407
|
-
x,
|
|
408
428
|
A,
|
|
409
|
-
|
|
429
|
+
u
|
|
410
430
|
]
|
|
411
431
|
);
|
|
412
|
-
return /* @__PURE__ */
|
|
432
|
+
return /* @__PURE__ */ r(ze.Provider, { value: R, children: t });
|
|
413
433
|
}
|
|
414
434
|
function Nt() {
|
|
415
435
|
const e = ot(ze);
|
|
@@ -417,7 +437,7 @@ function Nt() {
|
|
|
417
437
|
throw new Error("useReviewLens must be used inside ReviewLensProvider");
|
|
418
438
|
return e;
|
|
419
439
|
}
|
|
420
|
-
function
|
|
440
|
+
function de(e, t) {
|
|
421
441
|
if (!e)
|
|
422
442
|
throw new Error(`review-lens-react requires config.${t} when no adapter is provided`);
|
|
423
443
|
return e;
|
|
@@ -434,8 +454,8 @@ function X(e) {
|
|
|
434
454
|
return {
|
|
435
455
|
selector: n.selector,
|
|
436
456
|
selectorStrategy: n.strategy,
|
|
437
|
-
fingerprint:
|
|
438
|
-
cssSnapshot:
|
|
457
|
+
fingerprint: It(e, t),
|
|
458
|
+
cssSnapshot: Lt(e, t),
|
|
439
459
|
rect: t
|
|
440
460
|
};
|
|
441
461
|
}
|
|
@@ -454,19 +474,19 @@ function At(e) {
|
|
|
454
474
|
const t = [];
|
|
455
475
|
let n = e;
|
|
456
476
|
for (; n && n.nodeType === Node.ELEMENT_NODE && n !== document.body; ) {
|
|
457
|
-
const
|
|
458
|
-
if (!
|
|
477
|
+
const i = n.parentElement, s = n.tagName.toLowerCase();
|
|
478
|
+
if (!i) {
|
|
459
479
|
t.unshift(s);
|
|
460
480
|
break;
|
|
461
481
|
}
|
|
462
|
-
const c = n.tagName, g = Array.from(
|
|
463
|
-
(
|
|
482
|
+
const c = n.tagName, g = Array.from(i.children).filter(
|
|
483
|
+
(p) => p.tagName === c
|
|
464
484
|
), f = g.indexOf(n) + 1;
|
|
465
|
-
t.unshift(g.length > 1 ? `${s}:nth-of-type(${f})` : s), n =
|
|
485
|
+
t.unshift(g.length > 1 ? `${s}:nth-of-type(${f})` : s), n = i;
|
|
466
486
|
}
|
|
467
487
|
return t.join(" > ");
|
|
468
488
|
}
|
|
469
|
-
function
|
|
489
|
+
function It(e, t) {
|
|
470
490
|
var n;
|
|
471
491
|
return {
|
|
472
492
|
tagName: e.tagName.toLowerCase(),
|
|
@@ -478,15 +498,15 @@ function Lt(e, t) {
|
|
|
478
498
|
height: Math.round(t.height)
|
|
479
499
|
};
|
|
480
500
|
}
|
|
481
|
-
function
|
|
501
|
+
function Lt(e, t) {
|
|
482
502
|
const n = window.getComputedStyle(e);
|
|
483
503
|
return {
|
|
484
|
-
margin:
|
|
504
|
+
margin: he(n.marginTop, n.marginRight, n.marginBottom, n.marginLeft),
|
|
485
505
|
marginTop: n.marginTop,
|
|
486
506
|
marginRight: n.marginRight,
|
|
487
507
|
marginBottom: n.marginBottom,
|
|
488
508
|
marginLeft: n.marginLeft,
|
|
489
|
-
padding:
|
|
509
|
+
padding: he(
|
|
490
510
|
n.paddingTop,
|
|
491
511
|
n.paddingRight,
|
|
492
512
|
n.paddingBottom,
|
|
@@ -496,7 +516,7 @@ function Ft(e, t) {
|
|
|
496
516
|
paddingRight: n.paddingRight,
|
|
497
517
|
paddingBottom: n.paddingBottom,
|
|
498
518
|
paddingLeft: n.paddingLeft,
|
|
499
|
-
border:
|
|
519
|
+
border: he(
|
|
500
520
|
n.borderTopWidth,
|
|
501
521
|
n.borderRightWidth,
|
|
502
522
|
n.borderBottomWidth,
|
|
@@ -516,13 +536,13 @@ function Ft(e, t) {
|
|
|
516
536
|
height: Math.round(t.height)
|
|
517
537
|
};
|
|
518
538
|
}
|
|
519
|
-
function
|
|
520
|
-
return e === t && t === n && n ===
|
|
539
|
+
function he(e, t, n, i) {
|
|
540
|
+
return e === t && t === n && n === i ? e : `${e} ${t} ${n} ${i}`;
|
|
521
541
|
}
|
|
522
542
|
function $e(e) {
|
|
523
543
|
return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&");
|
|
524
544
|
}
|
|
525
|
-
const
|
|
545
|
+
const Ft = [
|
|
526
546
|
{ label: "Desktop", value: "desktop" },
|
|
527
547
|
{ label: "Tablet", value: "tablet" },
|
|
528
548
|
{ label: "Mobile", value: "mobile" }
|
|
@@ -551,139 +571,139 @@ const Mt = [
|
|
|
551
571
|
accessibility: "Accessibility",
|
|
552
572
|
responsive: "Responsive"
|
|
553
573
|
};
|
|
554
|
-
function
|
|
574
|
+
function Zt({
|
|
555
575
|
open: e,
|
|
556
576
|
onOpenChange: t,
|
|
557
577
|
placement: n = "top-right",
|
|
558
|
-
showResolved:
|
|
578
|
+
showResolved: i = !1,
|
|
559
579
|
syncSelectionToUrl: s = !1,
|
|
560
|
-
responsivePresets: c =
|
|
580
|
+
responsivePresets: c = Ft
|
|
561
581
|
}) {
|
|
562
582
|
var Fe;
|
|
563
583
|
const {
|
|
564
584
|
adapter: g,
|
|
565
585
|
config: f,
|
|
566
|
-
currentUser:
|
|
586
|
+
currentUser: p,
|
|
567
587
|
feedback: d,
|
|
568
588
|
normalizedPath: v,
|
|
569
|
-
permissions:
|
|
589
|
+
permissions: h,
|
|
570
590
|
createFeedback: b,
|
|
571
|
-
updateFeedback:
|
|
572
|
-
listMessages:
|
|
591
|
+
updateFeedback: C,
|
|
592
|
+
listMessages: E,
|
|
573
593
|
createMessage: A,
|
|
574
|
-
uploadAttachment:
|
|
575
|
-
} = Nt(), [R, y] = k(), [w,
|
|
594
|
+
uploadAttachment: u
|
|
595
|
+
} = Nt(), [R, y] = k(), [w, N] = k(), [B, D] = k(""), [pe, Je] = k("medium"), [me, Ve] = k("visual"), [ge, fe] = k(""), [be, qe] = k(
|
|
576
596
|
((Fe = c[0]) == null ? void 0 : Fe.value) ?? "desktop"
|
|
577
|
-
), [S, H] = k(), [
|
|
578
|
-
const
|
|
579
|
-
return
|
|
580
|
-
}, [
|
|
581
|
-
() => d.filter((
|
|
597
|
+
), [S, H] = k(), [F, $] = k("review"), [Ge, ve] = k(!1), [j, we] = k("all"), [O, ye] = k("all"), [K, Se] = k("all"), [J, ke] = k("all"), [V, Ce] = k("all"), [Ye, Xe] = k(!1), [Qe, Ne] = k({}), [se, oe] = k(""), ee = We(null), M = !!p, T = h.includes("create"), xe = h.includes("reply"), Ee = h.includes("update"), Ze = h.includes("assign"), P = R ?? w, et = !!w, tt = !!(f.captureScreenshot && (f.uploadAttachment || g.uploadAttachment)), nt = ie(() => {
|
|
598
|
+
const a = d.map((m) => m.assigneeEmail).filter((m) => !!m);
|
|
599
|
+
return p != null && p.email && a.push(p.email), Array.from(new Set(a)).sort((m, l) => m.localeCompare(l));
|
|
600
|
+
}, [p == null ? void 0 : p.email, d]), I = ie(
|
|
601
|
+
() => d.filter((a) => i || a.status !== "resolved").filter((a) => j === "all" || a.status === j).filter((a) => O === "all" || a.severity === O).filter((a) => K === "all" || a.category === K).filter((a) => J === "all" || a.assigneeEmail === J).filter((a) => V === "all" || a.viewportPreset === V),
|
|
582
602
|
[
|
|
583
603
|
J,
|
|
584
604
|
K,
|
|
585
605
|
d,
|
|
586
606
|
O,
|
|
587
|
-
|
|
607
|
+
i,
|
|
588
608
|
j,
|
|
589
|
-
|
|
609
|
+
V
|
|
590
610
|
]
|
|
591
|
-
),
|
|
611
|
+
), rt = [
|
|
592
612
|
j,
|
|
593
613
|
O,
|
|
594
614
|
K,
|
|
595
615
|
J,
|
|
596
|
-
|
|
597
|
-
].filter((
|
|
616
|
+
V
|
|
617
|
+
].filter((a) => a !== "all").length;
|
|
598
618
|
_(() => {
|
|
599
|
-
e || (y(void 0),
|
|
619
|
+
e || (y(void 0), N(void 0), D(""), oe(""), $("review"));
|
|
600
620
|
}, [e]), _(() => {
|
|
601
|
-
|
|
602
|
-
}, [
|
|
603
|
-
!w ||
|
|
604
|
-
var
|
|
605
|
-
(m = (
|
|
621
|
+
M || (y(void 0), N(void 0));
|
|
622
|
+
}, [M]), _(() => {
|
|
623
|
+
!w || F !== "review" || window.requestAnimationFrame(() => {
|
|
624
|
+
var a, m, l;
|
|
625
|
+
(m = (a = ee.current) == null ? void 0 : a.scrollIntoView) == null || m.call(a, { block: "nearest" }), (l = ee.current) == null || l.focus();
|
|
606
626
|
});
|
|
607
|
-
}, [w,
|
|
627
|
+
}, [w, F]), _(() => {
|
|
608
628
|
if (!S)
|
|
609
629
|
return;
|
|
610
|
-
let
|
|
611
|
-
return
|
|
612
|
-
|
|
630
|
+
let a = !0;
|
|
631
|
+
return E(S.id).then((m) => {
|
|
632
|
+
a && Ne((l) => ({ ...l, [S.id]: m }));
|
|
613
633
|
}), () => {
|
|
614
|
-
|
|
634
|
+
a = !1;
|
|
615
635
|
};
|
|
616
|
-
}, [
|
|
636
|
+
}, [E, S]), _(() => {
|
|
617
637
|
if (!e || !s || S || d.length === 0)
|
|
618
638
|
return;
|
|
619
|
-
const
|
|
620
|
-
m &&
|
|
639
|
+
const a = new URL(window.location.href).searchParams.get("reviewLensFeedback"), m = d.find((l) => l.id === a);
|
|
640
|
+
m && q(m, { syncUrl: !1 });
|
|
621
641
|
}, [d, e, S, s]), _(() => {
|
|
622
642
|
if (!e)
|
|
623
643
|
return;
|
|
624
|
-
function
|
|
625
|
-
var
|
|
626
|
-
if (l.key === "Shift" &&
|
|
644
|
+
function a(l) {
|
|
645
|
+
var x;
|
|
646
|
+
if (l.key === "Shift" && ve(!0), l.key === "Escape") {
|
|
627
647
|
l.preventDefault(), t == null || t(!1);
|
|
628
648
|
return;
|
|
629
649
|
}
|
|
630
|
-
|
|
650
|
+
Jt(l.target) || ((l.key === "n" || l.key === "ArrowDown") && (l.preventDefault(), Ae(1)), (l.key === "p" || l.key === "ArrowUp") && (l.preventDefault(), Ae(-1)), l.key === "c" && (l.preventDefault(), $("review"), (x = ee.current) == null || x.focus()), l.key === "f" && S && Ee && (l.preventDefault(), Le(S)));
|
|
631
651
|
}
|
|
632
652
|
function m(l) {
|
|
633
|
-
l.key === "Shift" &&
|
|
653
|
+
l.key === "Shift" && ve(!1);
|
|
634
654
|
}
|
|
635
|
-
return window.addEventListener("keydown",
|
|
636
|
-
window.removeEventListener("keydown",
|
|
655
|
+
return window.addEventListener("keydown", a), window.addEventListener("keyup", m), () => {
|
|
656
|
+
window.removeEventListener("keydown", a), window.removeEventListener("keyup", m);
|
|
637
657
|
};
|
|
638
658
|
});
|
|
639
|
-
const le = W((
|
|
640
|
-
const m =
|
|
659
|
+
const le = W((a) => {
|
|
660
|
+
const m = a.target instanceof Element ? a.target : null;
|
|
641
661
|
if (m)
|
|
642
662
|
return m.closest("[data-review-lens-ui]") ? null : m;
|
|
643
|
-
const l = document.elementFromPoint(
|
|
663
|
+
const l = document.elementFromPoint(a.clientX, a.clientY);
|
|
644
664
|
return !l || l.closest("[data-review-lens-ui]") ? null : l;
|
|
645
665
|
}, []);
|
|
646
666
|
if (_(() => {
|
|
647
|
-
if (!e || !
|
|
667
|
+
if (!e || !M)
|
|
648
668
|
return;
|
|
649
|
-
function
|
|
650
|
-
const
|
|
651
|
-
y(
|
|
669
|
+
function a(l) {
|
|
670
|
+
const x = le(l);
|
|
671
|
+
y(x ? X(x) : void 0);
|
|
652
672
|
}
|
|
653
673
|
function m(l) {
|
|
654
|
-
const
|
|
655
|
-
|
|
674
|
+
const x = le(l);
|
|
675
|
+
x && (l.preventDefault(), l.stopPropagation(), N(X(x)), $("review"));
|
|
656
676
|
}
|
|
657
|
-
return window.addEventListener("mousemove",
|
|
658
|
-
window.removeEventListener("mousemove",
|
|
677
|
+
return window.addEventListener("mousemove", a, !0), window.addEventListener("click", m, !0), () => {
|
|
678
|
+
window.removeEventListener("mousemove", a, !0), window.removeEventListener("click", m, !0);
|
|
659
679
|
};
|
|
660
|
-
}, [
|
|
680
|
+
}, [M, le, e]), !e)
|
|
661
681
|
return null;
|
|
662
|
-
function
|
|
663
|
-
var
|
|
664
|
-
if (H(
|
|
682
|
+
function q(a, m = { syncUrl: !0 }) {
|
|
683
|
+
var x;
|
|
684
|
+
if (H(a), N(void 0), $("feedback"), s && m.syncUrl !== !1) {
|
|
665
685
|
const te = new URL(window.location.href);
|
|
666
|
-
te.searchParams.set("reviewLensFeedback",
|
|
686
|
+
te.searchParams.set("reviewLensFeedback", a.id), window.history.replaceState({}, "", te);
|
|
667
687
|
}
|
|
668
|
-
const l = z(
|
|
688
|
+
const l = z(a.selector);
|
|
669
689
|
if (!l) {
|
|
670
690
|
y(void 0);
|
|
671
691
|
return;
|
|
672
692
|
}
|
|
673
|
-
(
|
|
693
|
+
(x = l.scrollIntoView) == null || x.call(l, { behavior: "smooth", block: "center", inline: "center" }), window.requestAnimationFrame(() => {
|
|
674
694
|
y(X(l));
|
|
675
695
|
});
|
|
676
696
|
}
|
|
677
|
-
function
|
|
678
|
-
if (
|
|
697
|
+
function Ae(a) {
|
|
698
|
+
if (I.length === 0)
|
|
679
699
|
return;
|
|
680
|
-
const m = S ?
|
|
681
|
-
|
|
700
|
+
const m = S ? I.findIndex((x) => x.id === S.id) : -1, l = m < 0 ? a > 0 ? 0 : I.length - 1 : (m + a + I.length) % I.length;
|
|
701
|
+
q(I[l]);
|
|
682
702
|
}
|
|
683
|
-
async function
|
|
684
|
-
if (!w || !B.trim() || !
|
|
703
|
+
async function Ie() {
|
|
704
|
+
if (!w || !B.trim() || !p || !T)
|
|
685
705
|
return;
|
|
686
|
-
let
|
|
706
|
+
let a = await b({
|
|
687
707
|
projectKey: f.projectKey,
|
|
688
708
|
contentId: f.contentId,
|
|
689
709
|
normalizedPath: v,
|
|
@@ -694,98 +714,98 @@ function Qt({
|
|
|
694
714
|
createdCssSnapshot: w.cssSnapshot,
|
|
695
715
|
comment: B.trim(),
|
|
696
716
|
status: "open",
|
|
697
|
-
severity:
|
|
698
|
-
category:
|
|
699
|
-
assigneeEmail:
|
|
717
|
+
severity: pe,
|
|
718
|
+
category: me,
|
|
719
|
+
assigneeEmail: ge.trim() || void 0,
|
|
700
720
|
viewportWidth: window.innerWidth,
|
|
701
721
|
viewportHeight: window.innerHeight,
|
|
702
|
-
viewportPreset:
|
|
722
|
+
viewportPreset: be,
|
|
703
723
|
screenshotUrl: void 0,
|
|
704
724
|
screenshotThumbnailUrl: void 0,
|
|
705
|
-
authorEmail:
|
|
725
|
+
authorEmail: p.email
|
|
706
726
|
});
|
|
707
727
|
if (f.captureScreenshot)
|
|
708
728
|
try {
|
|
709
|
-
const m = await f.captureScreenshot(w), l = await
|
|
729
|
+
const m = await f.captureScreenshot(w), l = await u(a.id, {
|
|
710
730
|
type: "screenshot",
|
|
711
731
|
data: m,
|
|
712
|
-
createdBy:
|
|
732
|
+
createdBy: p.email
|
|
713
733
|
});
|
|
714
|
-
|
|
734
|
+
a = await C(a.id, {
|
|
715
735
|
attachments: [l],
|
|
716
736
|
screenshotUrl: l.url,
|
|
717
737
|
screenshotThumbnailUrl: l.thumbnailUrl
|
|
718
738
|
});
|
|
719
739
|
} catch {
|
|
720
740
|
}
|
|
721
|
-
D(""),
|
|
741
|
+
D(""), fe(""), N(void 0), y(void 0), $("feedback"), H(a);
|
|
722
742
|
}
|
|
723
|
-
async function
|
|
724
|
-
const l = (/* @__PURE__ */ new Date()).toISOString(),
|
|
743
|
+
async function it(a, m) {
|
|
744
|
+
const l = (/* @__PURE__ */ new Date()).toISOString(), x = m === "resolved" ? { status: m, resolvedAt: l, resolvedBy: p == null ? void 0 : p.email } : { status: m }, te = await C(a.id, x);
|
|
725
745
|
H(te);
|
|
726
746
|
}
|
|
727
|
-
async function Le(
|
|
728
|
-
const m = z(
|
|
729
|
-
if (!m || !
|
|
747
|
+
async function Le(a) {
|
|
748
|
+
const m = z(a.selector);
|
|
749
|
+
if (!m || !p)
|
|
730
750
|
return;
|
|
731
|
-
const l = X(m),
|
|
751
|
+
const l = X(m), x = await C(a.id, {
|
|
732
752
|
status: "fixed",
|
|
733
753
|
fixedCssSnapshot: l.cssSnapshot,
|
|
734
754
|
fixedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
735
|
-
fixedBy:
|
|
755
|
+
fixedBy: p.email
|
|
736
756
|
});
|
|
737
|
-
H(
|
|
757
|
+
H(x);
|
|
738
758
|
}
|
|
739
|
-
async function at(
|
|
740
|
-
if (!se.trim() || !
|
|
759
|
+
async function at(a) {
|
|
760
|
+
if (!se.trim() || !p || !xe)
|
|
741
761
|
return;
|
|
742
762
|
const m = await A({
|
|
743
|
-
feedbackId:
|
|
763
|
+
feedbackId: a.id,
|
|
744
764
|
body: se.trim(),
|
|
745
|
-
authorEmail:
|
|
765
|
+
authorEmail: p.email
|
|
746
766
|
});
|
|
747
|
-
|
|
767
|
+
Ne((l) => ({
|
|
748
768
|
...l,
|
|
749
|
-
[
|
|
769
|
+
[a.id]: [...l[a.id] ?? [], m]
|
|
750
770
|
})), oe("");
|
|
751
771
|
}
|
|
752
772
|
return /* @__PURE__ */ o("div", { className: "review-lens-root", "data-review-lens-ui": !0, children: [
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
/* @__PURE__ */
|
|
773
|
+
M && P ? /* @__PURE__ */ r($t, { target: P, locked: !!w }) : null,
|
|
774
|
+
M && w && R && Ge ? /* @__PURE__ */ r(_t, { from: w, to: R }) : null,
|
|
775
|
+
M ? /* @__PURE__ */ o(re, { children: [
|
|
776
|
+
/* @__PURE__ */ r(
|
|
757
777
|
Pt,
|
|
758
778
|
{
|
|
759
|
-
feedback:
|
|
779
|
+
feedback: I,
|
|
760
780
|
selectedFeedback: S,
|
|
761
|
-
onSelect:
|
|
781
|
+
onSelect: q
|
|
762
782
|
}
|
|
763
783
|
),
|
|
764
|
-
/* @__PURE__ */
|
|
784
|
+
/* @__PURE__ */ r(
|
|
765
785
|
Wt,
|
|
766
786
|
{
|
|
767
|
-
feedback:
|
|
787
|
+
feedback: I,
|
|
768
788
|
selectedFeedback: S,
|
|
769
|
-
onSelect:
|
|
789
|
+
onSelect: q
|
|
770
790
|
}
|
|
771
791
|
)
|
|
772
792
|
] }) : null,
|
|
773
793
|
/* @__PURE__ */ o("aside", { className: `review-lens-panel review-lens-panel--${n}`, "data-review-lens-ui": !0, children: [
|
|
774
794
|
/* @__PURE__ */ o("header", { className: "review-lens-panel__header", children: [
|
|
775
795
|
/* @__PURE__ */ o("div", { children: [
|
|
776
|
-
/* @__PURE__ */
|
|
777
|
-
/* @__PURE__ */
|
|
796
|
+
/* @__PURE__ */ r("p", { className: "review-lens-kicker", children: "Review Lens" }),
|
|
797
|
+
/* @__PURE__ */ r("h2", { children: F === "summary" ? "Summary" : F === "feedback" ? "Feedback" : w ? "Element locked" : "Inspecting" })
|
|
778
798
|
] }),
|
|
779
|
-
/* @__PURE__ */
|
|
799
|
+
/* @__PURE__ */ r("button", { type: "button", onClick: () => t == null ? void 0 : t(!1), children: "Close" })
|
|
780
800
|
] }),
|
|
781
801
|
/* @__PURE__ */ o("div", { className: "review-lens-panel__body", children: [
|
|
782
802
|
/* @__PURE__ */ o("div", { className: "review-lens-mode-switch", role: "tablist", "aria-label": "Review Lens mode", children: [
|
|
783
|
-
/* @__PURE__ */
|
|
803
|
+
/* @__PURE__ */ r(
|
|
784
804
|
"button",
|
|
785
805
|
{
|
|
786
806
|
type: "button",
|
|
787
807
|
role: "tab",
|
|
788
|
-
"aria-selected":
|
|
808
|
+
"aria-selected": F === "review",
|
|
789
809
|
onClick: () => $("review"),
|
|
790
810
|
children: "Review"
|
|
791
811
|
}
|
|
@@ -795,32 +815,32 @@ function Qt({
|
|
|
795
815
|
{
|
|
796
816
|
type: "button",
|
|
797
817
|
role: "tab",
|
|
798
|
-
"aria-selected":
|
|
818
|
+
"aria-selected": F === "feedback",
|
|
799
819
|
onClick: () => $("feedback"),
|
|
800
820
|
children: [
|
|
801
821
|
"Feedback ",
|
|
802
|
-
/* @__PURE__ */
|
|
822
|
+
/* @__PURE__ */ r("span", { children: I.length })
|
|
803
823
|
]
|
|
804
824
|
}
|
|
805
825
|
),
|
|
806
|
-
/* @__PURE__ */
|
|
826
|
+
/* @__PURE__ */ r(
|
|
807
827
|
"button",
|
|
808
828
|
{
|
|
809
829
|
type: "button",
|
|
810
830
|
role: "tab",
|
|
811
|
-
"aria-selected":
|
|
831
|
+
"aria-selected": F === "summary",
|
|
812
832
|
onClick: () => $("summary"),
|
|
813
833
|
children: "Summary"
|
|
814
834
|
}
|
|
815
835
|
)
|
|
816
836
|
] }),
|
|
817
|
-
|
|
837
|
+
F === "review" ? /* @__PURE__ */ o("div", { className: "review-lens-review-pane", role: "tabpanel", children: [
|
|
818
838
|
/* @__PURE__ */ o("div", { className: "review-lens-inspection", children: [
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
/* @__PURE__ */
|
|
822
|
-
/* @__PURE__ */
|
|
823
|
-
/* @__PURE__ */
|
|
839
|
+
M ? null : /* @__PURE__ */ r("p", { children: "Authenticate with Google to inspect this page." }),
|
|
840
|
+
M && P ? /* @__PURE__ */ o(re, { children: [
|
|
841
|
+
/* @__PURE__ */ r(Dt, { target: P }),
|
|
842
|
+
/* @__PURE__ */ r(_e, { title: "Accessibility", items: zt(P) }),
|
|
843
|
+
/* @__PURE__ */ r(
|
|
824
844
|
_e,
|
|
825
845
|
{
|
|
826
846
|
title: "Design tokens",
|
|
@@ -828,27 +848,27 @@ function Qt({
|
|
|
828
848
|
}
|
|
829
849
|
)
|
|
830
850
|
] }) : null,
|
|
831
|
-
|
|
851
|
+
M && !P ? /* @__PURE__ */ r("p", { children: "Move over the app to inspect." }) : null
|
|
832
852
|
] }),
|
|
833
|
-
et ? /* @__PURE__ */
|
|
853
|
+
et ? /* @__PURE__ */ r("div", { className: "review-lens-composer-panel", children: /* @__PURE__ */ o(
|
|
834
854
|
"form",
|
|
835
855
|
{
|
|
836
856
|
className: "review-lens-feedback-form",
|
|
837
|
-
onSubmit: (
|
|
838
|
-
|
|
857
|
+
onSubmit: (a) => {
|
|
858
|
+
a.preventDefault(), Ie();
|
|
839
859
|
},
|
|
840
860
|
children: [
|
|
841
|
-
/* @__PURE__ */
|
|
842
|
-
/* @__PURE__ */
|
|
861
|
+
/* @__PURE__ */ r("label", { htmlFor: "review-lens-comment", children: "New feedback" }),
|
|
862
|
+
/* @__PURE__ */ r(
|
|
843
863
|
"textarea",
|
|
844
864
|
{
|
|
845
865
|
ref: ee,
|
|
846
866
|
id: "review-lens-comment",
|
|
847
867
|
value: B,
|
|
848
868
|
disabled: !T,
|
|
849
|
-
onChange: (
|
|
850
|
-
onKeyDown: (
|
|
851
|
-
|
|
869
|
+
onChange: (a) => D(a.target.value),
|
|
870
|
+
onKeyDown: (a) => {
|
|
871
|
+
a.key === "Enter" && a.metaKey && (a.preventDefault(), Ie());
|
|
852
872
|
},
|
|
853
873
|
placeholder: T ? "Describe the UX issue..." : "You do not have permission to comment."
|
|
854
874
|
}
|
|
@@ -856,35 +876,35 @@ function Qt({
|
|
|
856
876
|
/* @__PURE__ */ o("div", { className: "review-lens-form-grid", children: [
|
|
857
877
|
/* @__PURE__ */ o("label", { children: [
|
|
858
878
|
"Severity",
|
|
859
|
-
/* @__PURE__ */
|
|
879
|
+
/* @__PURE__ */ r(
|
|
860
880
|
"select",
|
|
861
881
|
{
|
|
862
|
-
value:
|
|
863
|
-
onChange: (
|
|
882
|
+
value: pe,
|
|
883
|
+
onChange: (a) => Je(a.target.value),
|
|
864
884
|
disabled: !T,
|
|
865
|
-
children: je.map((
|
|
885
|
+
children: je.map((a) => /* @__PURE__ */ r("option", { value: a, children: Q[a] }, a))
|
|
866
886
|
}
|
|
867
887
|
)
|
|
868
888
|
] }),
|
|
869
889
|
/* @__PURE__ */ o("label", { children: [
|
|
870
890
|
"Type",
|
|
871
|
-
/* @__PURE__ */
|
|
891
|
+
/* @__PURE__ */ r(
|
|
872
892
|
"select",
|
|
873
893
|
{
|
|
874
|
-
value:
|
|
875
|
-
onChange: (
|
|
894
|
+
value: me,
|
|
895
|
+
onChange: (a) => Ve(a.target.value),
|
|
876
896
|
disabled: !T,
|
|
877
|
-
children: Oe.map((
|
|
897
|
+
children: Oe.map((a) => /* @__PURE__ */ r("option", { value: a, children: Z[a] }, a))
|
|
878
898
|
}
|
|
879
899
|
)
|
|
880
900
|
] }),
|
|
881
901
|
/* @__PURE__ */ o("label", { children: [
|
|
882
902
|
"Assignee",
|
|
883
|
-
/* @__PURE__ */
|
|
903
|
+
/* @__PURE__ */ r(
|
|
884
904
|
"input",
|
|
885
905
|
{
|
|
886
|
-
value:
|
|
887
|
-
onChange: (
|
|
906
|
+
value: ge,
|
|
907
|
+
onChange: (a) => fe(a.target.value),
|
|
888
908
|
disabled: !T,
|
|
889
909
|
placeholder: "optional@email.com"
|
|
890
910
|
}
|
|
@@ -892,128 +912,128 @@ function Qt({
|
|
|
892
912
|
] }),
|
|
893
913
|
/* @__PURE__ */ o("label", { children: [
|
|
894
914
|
"Viewport",
|
|
895
|
-
/* @__PURE__ */
|
|
915
|
+
/* @__PURE__ */ r(
|
|
896
916
|
"select",
|
|
897
917
|
{
|
|
898
|
-
value:
|
|
899
|
-
onChange: (
|
|
918
|
+
value: be,
|
|
919
|
+
onChange: (a) => qe(a.target.value),
|
|
900
920
|
disabled: !T,
|
|
901
|
-
children: c.map((
|
|
921
|
+
children: c.map((a) => /* @__PURE__ */ r("option", { value: a.value, children: a.label }, a.value))
|
|
902
922
|
}
|
|
903
923
|
)
|
|
904
924
|
] })
|
|
905
925
|
] }),
|
|
906
926
|
T ? /* @__PURE__ */ o("p", { className: "review-lens-feedback-form__hint", children: [
|
|
907
927
|
"Press ",
|
|
908
|
-
/* @__PURE__ */
|
|
928
|
+
/* @__PURE__ */ r("kbd", { children: "Command" }),
|
|
909
929
|
" + ",
|
|
910
|
-
/* @__PURE__ */
|
|
930
|
+
/* @__PURE__ */ r("kbd", { children: "Enter" }),
|
|
911
931
|
" to submit.",
|
|
912
932
|
tt ? " Screenshot capture runs after save." : ""
|
|
913
933
|
] }) : null,
|
|
914
|
-
/* @__PURE__ */
|
|
934
|
+
/* @__PURE__ */ r("div", { className: "review-lens-actions", children: /* @__PURE__ */ r("button", { type: "submit", disabled: !B.trim() || !T, children: "Save feedback" }) })
|
|
915
935
|
]
|
|
916
936
|
}
|
|
917
937
|
) }) : null
|
|
918
938
|
] }) : null,
|
|
919
|
-
|
|
920
|
-
/* @__PURE__ */
|
|
921
|
-
|
|
939
|
+
F === "feedback" ? /* @__PURE__ */ o("div", { className: "review-lens-comments", children: [
|
|
940
|
+
/* @__PURE__ */ r(
|
|
941
|
+
Mt,
|
|
922
942
|
{
|
|
923
943
|
open: Ye,
|
|
924
|
-
activeCount:
|
|
944
|
+
activeCount: rt,
|
|
925
945
|
statusFilter: j,
|
|
926
946
|
severityFilter: O,
|
|
927
947
|
categoryFilter: K,
|
|
928
948
|
assigneeFilter: J,
|
|
929
|
-
viewportFilter:
|
|
949
|
+
viewportFilter: V,
|
|
930
950
|
assignees: nt,
|
|
931
951
|
responsivePresets: c,
|
|
932
|
-
onStatusChange:
|
|
933
|
-
onSeverityChange:
|
|
934
|
-
onCategoryChange:
|
|
935
|
-
onAssigneeChange:
|
|
936
|
-
onViewportChange:
|
|
937
|
-
onToggle: () => Xe((
|
|
952
|
+
onStatusChange: we,
|
|
953
|
+
onSeverityChange: ye,
|
|
954
|
+
onCategoryChange: Se,
|
|
955
|
+
onAssigneeChange: ke,
|
|
956
|
+
onViewportChange: Ce,
|
|
957
|
+
onToggle: () => Xe((a) => !a),
|
|
938
958
|
onClear: () => {
|
|
939
|
-
|
|
959
|
+
we("all"), ye("all"), Se("all"), ke("all"), Ce("all");
|
|
940
960
|
}
|
|
941
961
|
}
|
|
942
962
|
),
|
|
943
963
|
/* @__PURE__ */ o("div", { className: "review-lens-list-panel", children: [
|
|
944
964
|
/* @__PURE__ */ o("div", { className: "review-lens-comments__header", children: [
|
|
945
|
-
/* @__PURE__ */
|
|
946
|
-
/* @__PURE__ */
|
|
965
|
+
/* @__PURE__ */ r("h3", { children: "All feedback" }),
|
|
966
|
+
/* @__PURE__ */ r("span", { children: I.length })
|
|
947
967
|
] }),
|
|
948
968
|
/* @__PURE__ */ o("div", { className: "review-lens-comments__list", children: [
|
|
949
|
-
|
|
950
|
-
|
|
969
|
+
I.length === 0 ? /* @__PURE__ */ r("p", { children: "No feedback for this view." }) : null,
|
|
970
|
+
I.map((a) => /* @__PURE__ */ r(
|
|
951
971
|
Tt,
|
|
952
972
|
{
|
|
953
|
-
item:
|
|
954
|
-
selected: (S == null ? void 0 : S.id) ===
|
|
955
|
-
onSelect:
|
|
973
|
+
item: a,
|
|
974
|
+
selected: (S == null ? void 0 : S.id) === a.id,
|
|
975
|
+
onSelect: q
|
|
956
976
|
},
|
|
957
|
-
|
|
977
|
+
a.id
|
|
958
978
|
))
|
|
959
979
|
] })
|
|
960
980
|
] }),
|
|
961
981
|
S ? /* @__PURE__ */ o("div", { className: "review-lens-selected-panel", children: [
|
|
962
|
-
/* @__PURE__ */
|
|
963
|
-
/* @__PURE__ */
|
|
982
|
+
/* @__PURE__ */ r("div", { className: "review-lens-selected-panel__label", children: "Selected feedback" }),
|
|
983
|
+
/* @__PURE__ */ r(
|
|
964
984
|
Rt,
|
|
965
985
|
{
|
|
966
986
|
item: S,
|
|
967
987
|
messages: Qe[S.id] ?? [],
|
|
968
988
|
messageDraft: se,
|
|
969
|
-
canReply:
|
|
970
|
-
canUpdate:
|
|
989
|
+
canReply: xe,
|
|
990
|
+
canUpdate: Ee,
|
|
971
991
|
canAssign: Ze,
|
|
972
992
|
onMessageDraftChange: oe,
|
|
973
993
|
onSubmitMessage: () => void at(S),
|
|
974
|
-
onStatusChange: (
|
|
975
|
-
onAssigneeChange: (
|
|
976
|
-
assigneeEmail:
|
|
994
|
+
onStatusChange: (a) => void it(S, a),
|
|
995
|
+
onAssigneeChange: (a) => void C(S.id, {
|
|
996
|
+
assigneeEmail: a.trim() || void 0
|
|
977
997
|
}).then(H),
|
|
978
998
|
onMarkFixed: () => void Le(S)
|
|
979
999
|
},
|
|
980
1000
|
S.id
|
|
981
1001
|
)
|
|
982
1002
|
] }) : /* @__PURE__ */ o("div", { className: "review-lens-selected-panel review-lens-selected-panel--empty", children: [
|
|
983
|
-
/* @__PURE__ */
|
|
984
|
-
/* @__PURE__ */
|
|
1003
|
+
/* @__PURE__ */ r("div", { className: "review-lens-selected-panel__label", children: "Selected feedback" }),
|
|
1004
|
+
/* @__PURE__ */ r("p", { children: "Select a feedback item above to review status, assignment, drift, and replies." })
|
|
985
1005
|
] })
|
|
986
1006
|
] }) : null,
|
|
987
|
-
|
|
1007
|
+
F === "summary" ? /* @__PURE__ */ r(Bt, { feedback: d }) : null
|
|
988
1008
|
] })
|
|
989
1009
|
] })
|
|
990
1010
|
] });
|
|
991
1011
|
}
|
|
992
|
-
function
|
|
1012
|
+
function Mt({
|
|
993
1013
|
open: e,
|
|
994
1014
|
activeCount: t,
|
|
995
1015
|
statusFilter: n,
|
|
996
|
-
severityFilter:
|
|
1016
|
+
severityFilter: i,
|
|
997
1017
|
categoryFilter: s,
|
|
998
1018
|
assigneeFilter: c,
|
|
999
1019
|
viewportFilter: g,
|
|
1000
1020
|
assignees: f,
|
|
1001
|
-
responsivePresets:
|
|
1021
|
+
responsivePresets: p,
|
|
1002
1022
|
onStatusChange: d,
|
|
1003
1023
|
onSeverityChange: v,
|
|
1004
|
-
onCategoryChange:
|
|
1024
|
+
onCategoryChange: h,
|
|
1005
1025
|
onAssigneeChange: b,
|
|
1006
|
-
onViewportChange:
|
|
1007
|
-
onToggle:
|
|
1026
|
+
onViewportChange: C,
|
|
1027
|
+
onToggle: E,
|
|
1008
1028
|
onClear: A
|
|
1009
1029
|
}) {
|
|
1010
1030
|
return /* @__PURE__ */ o("div", { className: "review-lens-filter-shell", children: [
|
|
1011
1031
|
/* @__PURE__ */ o("div", { className: "review-lens-filter-bar", children: [
|
|
1012
|
-
/* @__PURE__ */ o("button", { type: "button", "aria-expanded": e, onClick:
|
|
1032
|
+
/* @__PURE__ */ o("button", { type: "button", "aria-expanded": e, onClick: E, children: [
|
|
1013
1033
|
"Filters",
|
|
1014
|
-
t > 0 ? /* @__PURE__ */
|
|
1034
|
+
t > 0 ? /* @__PURE__ */ r("span", { children: t }) : null
|
|
1015
1035
|
] }),
|
|
1016
|
-
t > 0 ? /* @__PURE__ */
|
|
1036
|
+
t > 0 ? /* @__PURE__ */ r("button", { type: "button", onClick: A, children: "Clear" }) : null
|
|
1017
1037
|
] }),
|
|
1018
1038
|
e ? /* @__PURE__ */ o("div", { className: "review-lens-filters", children: [
|
|
1019
1039
|
/* @__PURE__ */ o("label", { children: [
|
|
@@ -1023,10 +1043,10 @@ function It({
|
|
|
1023
1043
|
{
|
|
1024
1044
|
"aria-label": "Filter status",
|
|
1025
1045
|
value: n,
|
|
1026
|
-
onChange: (
|
|
1046
|
+
onChange: (u) => d(u.target.value),
|
|
1027
1047
|
children: [
|
|
1028
|
-
/* @__PURE__ */
|
|
1029
|
-
He.map((
|
|
1048
|
+
/* @__PURE__ */ r("option", { value: "all", children: "All statuses" }),
|
|
1049
|
+
He.map((u) => /* @__PURE__ */ r("option", { value: u, children: ae[u] }, u))
|
|
1030
1050
|
]
|
|
1031
1051
|
}
|
|
1032
1052
|
)
|
|
@@ -1037,11 +1057,11 @@ function It({
|
|
|
1037
1057
|
"select",
|
|
1038
1058
|
{
|
|
1039
1059
|
"aria-label": "Filter severity",
|
|
1040
|
-
value:
|
|
1041
|
-
onChange: (
|
|
1060
|
+
value: i,
|
|
1061
|
+
onChange: (u) => v(u.target.value),
|
|
1042
1062
|
children: [
|
|
1043
|
-
/* @__PURE__ */
|
|
1044
|
-
je.map((
|
|
1063
|
+
/* @__PURE__ */ r("option", { value: "all", children: "All priorities" }),
|
|
1064
|
+
je.map((u) => /* @__PURE__ */ r("option", { value: u, children: Q[u] }, u))
|
|
1045
1065
|
]
|
|
1046
1066
|
}
|
|
1047
1067
|
)
|
|
@@ -1053,10 +1073,10 @@ function It({
|
|
|
1053
1073
|
{
|
|
1054
1074
|
"aria-label": "Filter type",
|
|
1055
1075
|
value: s,
|
|
1056
|
-
onChange: (
|
|
1076
|
+
onChange: (u) => h(u.target.value),
|
|
1057
1077
|
children: [
|
|
1058
|
-
/* @__PURE__ */
|
|
1059
|
-
Oe.map((
|
|
1078
|
+
/* @__PURE__ */ r("option", { value: "all", children: "All types" }),
|
|
1079
|
+
Oe.map((u) => /* @__PURE__ */ r("option", { value: u, children: Z[u] }, u))
|
|
1060
1080
|
]
|
|
1061
1081
|
}
|
|
1062
1082
|
)
|
|
@@ -1068,10 +1088,10 @@ function It({
|
|
|
1068
1088
|
{
|
|
1069
1089
|
"aria-label": "Filter assignee",
|
|
1070
1090
|
value: c,
|
|
1071
|
-
onChange: (
|
|
1091
|
+
onChange: (u) => b(u.target.value),
|
|
1072
1092
|
children: [
|
|
1073
|
-
/* @__PURE__ */
|
|
1074
|
-
f.map((
|
|
1093
|
+
/* @__PURE__ */ r("option", { value: "all", children: "All assignees" }),
|
|
1094
|
+
f.map((u) => /* @__PURE__ */ r("option", { value: u, children: u }, u))
|
|
1075
1095
|
]
|
|
1076
1096
|
}
|
|
1077
1097
|
)
|
|
@@ -1083,10 +1103,10 @@ function It({
|
|
|
1083
1103
|
{
|
|
1084
1104
|
"aria-label": "Filter viewport",
|
|
1085
1105
|
value: g,
|
|
1086
|
-
onChange: (
|
|
1106
|
+
onChange: (u) => C(u.target.value),
|
|
1087
1107
|
children: [
|
|
1088
|
-
/* @__PURE__ */
|
|
1089
|
-
|
|
1108
|
+
/* @__PURE__ */ r("option", { value: "all", children: "All viewports" }),
|
|
1109
|
+
p.map((u) => /* @__PURE__ */ r("option", { value: u.value, children: u.label }, u.value))
|
|
1090
1110
|
]
|
|
1091
1111
|
}
|
|
1092
1112
|
)
|
|
@@ -1099,7 +1119,7 @@ function Tt({
|
|
|
1099
1119
|
selected: t,
|
|
1100
1120
|
onSelect: n
|
|
1101
1121
|
}) {
|
|
1102
|
-
const
|
|
1122
|
+
const i = Ke(e);
|
|
1103
1123
|
return /* @__PURE__ */ o(
|
|
1104
1124
|
"article",
|
|
1105
1125
|
{
|
|
@@ -1115,20 +1135,20 @@ function Tt({
|
|
|
1115
1135
|
},
|
|
1116
1136
|
children: [
|
|
1117
1137
|
/* @__PURE__ */ o("div", { className: "review-lens-comment__header", children: [
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1138
|
+
/* @__PURE__ */ r("span", { children: ae[e.status] }),
|
|
1139
|
+
/* @__PURE__ */ r("strong", { children: Q[e.severity] })
|
|
1120
1140
|
] }),
|
|
1121
1141
|
/* @__PURE__ */ o("div", { className: "review-lens-comment__content", children: [
|
|
1122
|
-
/* @__PURE__ */
|
|
1142
|
+
/* @__PURE__ */ r("p", { children: e.comment }),
|
|
1123
1143
|
/* @__PURE__ */ o("span", { children: [
|
|
1124
1144
|
e.authorEmail,
|
|
1125
1145
|
e.assigneeEmail ? ` -> ${e.assigneeEmail}` : ""
|
|
1126
1146
|
] })
|
|
1127
1147
|
] }),
|
|
1128
1148
|
/* @__PURE__ */ o("div", { className: "review-lens-tags", children: [
|
|
1129
|
-
/* @__PURE__ */
|
|
1130
|
-
/* @__PURE__ */
|
|
1131
|
-
/* @__PURE__ */
|
|
1149
|
+
/* @__PURE__ */ r("span", { children: Z[e.category] }),
|
|
1150
|
+
/* @__PURE__ */ r("span", { children: e.viewportPreset }),
|
|
1151
|
+
/* @__PURE__ */ r("span", { children: i.label })
|
|
1132
1152
|
] })
|
|
1133
1153
|
]
|
|
1134
1154
|
}
|
|
@@ -1138,55 +1158,55 @@ function Rt({
|
|
|
1138
1158
|
item: e,
|
|
1139
1159
|
messages: t,
|
|
1140
1160
|
messageDraft: n,
|
|
1141
|
-
canReply:
|
|
1161
|
+
canReply: i,
|
|
1142
1162
|
canUpdate: s,
|
|
1143
1163
|
canAssign: c,
|
|
1144
1164
|
onMessageDraftChange: g,
|
|
1145
1165
|
onSubmitMessage: f,
|
|
1146
|
-
onStatusChange:
|
|
1166
|
+
onStatusChange: p,
|
|
1147
1167
|
onAssigneeChange: d,
|
|
1148
1168
|
onMarkFixed: v
|
|
1149
1169
|
}) {
|
|
1150
|
-
const
|
|
1170
|
+
const h = Ke(e);
|
|
1151
1171
|
return /* @__PURE__ */ o("section", { className: "review-lens-detail", "aria-label": "Selected feedback detail", children: [
|
|
1152
1172
|
/* @__PURE__ */ o("div", { className: "review-lens-detail__header", children: [
|
|
1153
1173
|
/* @__PURE__ */ o("h3", { children: [
|
|
1154
1174
|
Z[e.category],
|
|
1155
1175
|
" feedback"
|
|
1156
1176
|
] }),
|
|
1157
|
-
/* @__PURE__ */
|
|
1177
|
+
/* @__PURE__ */ r("strong", { children: Q[e.severity] })
|
|
1158
1178
|
] }),
|
|
1159
|
-
/* @__PURE__ */
|
|
1179
|
+
/* @__PURE__ */ r("blockquote", { children: e.comment }),
|
|
1160
1180
|
/* @__PURE__ */ o("dl", { className: "review-lens-detail-meta", children: [
|
|
1161
1181
|
/* @__PURE__ */ o("div", { children: [
|
|
1162
|
-
/* @__PURE__ */
|
|
1163
|
-
/* @__PURE__ */
|
|
1182
|
+
/* @__PURE__ */ r("dt", { children: "Target" }),
|
|
1183
|
+
/* @__PURE__ */ r("dd", { children: h.label })
|
|
1164
1184
|
] }),
|
|
1165
1185
|
/* @__PURE__ */ o("div", { children: [
|
|
1166
|
-
/* @__PURE__ */
|
|
1167
|
-
/* @__PURE__ */
|
|
1186
|
+
/* @__PURE__ */ r("dt", { children: "Viewport" }),
|
|
1187
|
+
/* @__PURE__ */ r("dd", { children: e.viewportPreset })
|
|
1168
1188
|
] }),
|
|
1169
1189
|
e.screenshotUrl ? /* @__PURE__ */ o("div", { children: [
|
|
1170
|
-
/* @__PURE__ */
|
|
1171
|
-
/* @__PURE__ */
|
|
1190
|
+
/* @__PURE__ */ r("dt", { children: "Evidence" }),
|
|
1191
|
+
/* @__PURE__ */ r("dd", { children: /* @__PURE__ */ r("a", { href: e.screenshotUrl, target: "_blank", rel: "noreferrer", children: "Screenshot" }) })
|
|
1172
1192
|
] }) : null
|
|
1173
1193
|
] }),
|
|
1174
1194
|
/* @__PURE__ */ o("div", { className: "review-lens-form-grid", children: [
|
|
1175
1195
|
/* @__PURE__ */ o("label", { children: [
|
|
1176
1196
|
"Status",
|
|
1177
|
-
/* @__PURE__ */
|
|
1197
|
+
/* @__PURE__ */ r(
|
|
1178
1198
|
"select",
|
|
1179
1199
|
{
|
|
1180
1200
|
value: e.status,
|
|
1181
1201
|
disabled: !s,
|
|
1182
|
-
onChange: (b) =>
|
|
1183
|
-
children: He.map((b) => /* @__PURE__ */
|
|
1202
|
+
onChange: (b) => p(b.target.value),
|
|
1203
|
+
children: He.map((b) => /* @__PURE__ */ r("option", { value: b, children: ae[b] }, b))
|
|
1184
1204
|
}
|
|
1185
1205
|
)
|
|
1186
1206
|
] }),
|
|
1187
1207
|
/* @__PURE__ */ o("label", { children: [
|
|
1188
1208
|
"Assignee",
|
|
1189
|
-
/* @__PURE__ */
|
|
1209
|
+
/* @__PURE__ */ r(
|
|
1190
1210
|
"input",
|
|
1191
1211
|
{
|
|
1192
1212
|
defaultValue: e.assigneeEmail ?? "",
|
|
@@ -1198,7 +1218,7 @@ function Rt({
|
|
|
1198
1218
|
] })
|
|
1199
1219
|
] }),
|
|
1200
1220
|
/* @__PURE__ */ o("div", { className: "review-lens-status-actions", children: [
|
|
1201
|
-
/* @__PURE__ */
|
|
1221
|
+
/* @__PURE__ */ r(
|
|
1202
1222
|
"button",
|
|
1203
1223
|
{
|
|
1204
1224
|
type: "button",
|
|
@@ -1208,61 +1228,61 @@ function Rt({
|
|
|
1208
1228
|
children: "Mark fixed"
|
|
1209
1229
|
}
|
|
1210
1230
|
),
|
|
1211
|
-
/* @__PURE__ */
|
|
1231
|
+
/* @__PURE__ */ r(
|
|
1212
1232
|
"button",
|
|
1213
1233
|
{
|
|
1214
1234
|
type: "button",
|
|
1215
1235
|
className: "review-lens-button-primary",
|
|
1216
1236
|
disabled: !s,
|
|
1217
|
-
onClick: () =>
|
|
1237
|
+
onClick: () => p("resolved"),
|
|
1218
1238
|
children: "Resolve"
|
|
1219
1239
|
}
|
|
1220
1240
|
)
|
|
1221
1241
|
] }),
|
|
1222
1242
|
/* @__PURE__ */ o("div", { className: "review-lens-thread", children: [
|
|
1223
1243
|
/* @__PURE__ */ o("div", { className: "review-lens-thread__header", children: [
|
|
1224
|
-
/* @__PURE__ */
|
|
1225
|
-
/* @__PURE__ */
|
|
1244
|
+
/* @__PURE__ */ r("h3", { children: "Thread" }),
|
|
1245
|
+
/* @__PURE__ */ r("span", { children: t.length })
|
|
1226
1246
|
] }),
|
|
1227
|
-
t.length === 0 ? /* @__PURE__ */
|
|
1247
|
+
t.length === 0 ? /* @__PURE__ */ r("p", { children: "No replies yet." }) : null,
|
|
1228
1248
|
t.map((b) => /* @__PURE__ */ o("div", { className: "review-lens-thread__message", children: [
|
|
1229
|
-
/* @__PURE__ */
|
|
1230
|
-
/* @__PURE__ */
|
|
1249
|
+
/* @__PURE__ */ r("p", { children: b.body }),
|
|
1250
|
+
/* @__PURE__ */ r("span", { children: b.authorEmail })
|
|
1231
1251
|
] }, b.id)),
|
|
1232
|
-
/* @__PURE__ */
|
|
1252
|
+
/* @__PURE__ */ r(
|
|
1233
1253
|
"textarea",
|
|
1234
1254
|
{
|
|
1235
1255
|
"aria-label": "Reply",
|
|
1236
1256
|
value: n,
|
|
1237
|
-
disabled: !
|
|
1257
|
+
disabled: !i,
|
|
1238
1258
|
onChange: (b) => g(b.target.value),
|
|
1239
|
-
placeholder:
|
|
1259
|
+
placeholder: i ? "Reply..." : "You do not have permission to reply."
|
|
1240
1260
|
}
|
|
1241
1261
|
),
|
|
1242
|
-
/* @__PURE__ */
|
|
1262
|
+
/* @__PURE__ */ r("div", { className: "review-lens-actions", children: /* @__PURE__ */ r("button", { type: "button", disabled: !n.trim() || !i, onClick: f, children: "Reply" }) })
|
|
1243
1263
|
] })
|
|
1244
1264
|
] });
|
|
1245
1265
|
}
|
|
1246
1266
|
function Bt({ feedback: e }) {
|
|
1247
1267
|
return /* @__PURE__ */ o("div", { className: "review-lens-summary", role: "tabpanel", children: [
|
|
1248
|
-
/* @__PURE__ */
|
|
1249
|
-
/* @__PURE__ */
|
|
1250
|
-
/* @__PURE__ */
|
|
1251
|
-
/* @__PURE__ */
|
|
1252
|
-
/* @__PURE__ */
|
|
1268
|
+
/* @__PURE__ */ r(G, { title: "Status", values: Y(e, (t) => ae[t.status]) }),
|
|
1269
|
+
/* @__PURE__ */ r(G, { title: "Severity", values: Y(e, (t) => Q[t.severity]) }),
|
|
1270
|
+
/* @__PURE__ */ r(G, { title: "Type", values: Y(e, (t) => Z[t.category]) }),
|
|
1271
|
+
/* @__PURE__ */ r(G, { title: "Assignee", values: Y(e, (t) => t.assigneeEmail ?? "Unassigned") }),
|
|
1272
|
+
/* @__PURE__ */ r(G, { title: "Viewport", values: Y(e, (t) => t.viewportPreset) })
|
|
1253
1273
|
] });
|
|
1254
1274
|
}
|
|
1255
1275
|
function G({ title: e, values: t }) {
|
|
1256
1276
|
return /* @__PURE__ */ o("section", { children: [
|
|
1257
|
-
/* @__PURE__ */
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1260
|
-
/* @__PURE__ */
|
|
1277
|
+
/* @__PURE__ */ r("h3", { children: e }),
|
|
1278
|
+
/* @__PURE__ */ r("dl", { children: t.map(([n, i]) => /* @__PURE__ */ o("div", { children: [
|
|
1279
|
+
/* @__PURE__ */ r("dt", { children: n }),
|
|
1280
|
+
/* @__PURE__ */ r("dd", { children: i })
|
|
1261
1281
|
] }, n)) })
|
|
1262
1282
|
] });
|
|
1263
1283
|
}
|
|
1264
1284
|
function $t({ target: e, locked: t }) {
|
|
1265
|
-
const n =
|
|
1285
|
+
const n = Gt(e), i = Ot(e.fingerprint);
|
|
1266
1286
|
return /* @__PURE__ */ o(
|
|
1267
1287
|
"div",
|
|
1268
1288
|
{
|
|
@@ -1274,7 +1294,7 @@ function $t({ target: e, locked: t }) {
|
|
|
1274
1294
|
height: n.margin.height
|
|
1275
1295
|
},
|
|
1276
1296
|
children: [
|
|
1277
|
-
/* @__PURE__ */
|
|
1297
|
+
/* @__PURE__ */ r(
|
|
1278
1298
|
"div",
|
|
1279
1299
|
{
|
|
1280
1300
|
className: "review-lens-highlight__border",
|
|
@@ -1286,7 +1306,7 @@ function $t({ target: e, locked: t }) {
|
|
|
1286
1306
|
}
|
|
1287
1307
|
}
|
|
1288
1308
|
),
|
|
1289
|
-
/* @__PURE__ */
|
|
1309
|
+
/* @__PURE__ */ r(
|
|
1290
1310
|
"div",
|
|
1291
1311
|
{
|
|
1292
1312
|
className: "review-lens-highlight__padding",
|
|
@@ -1298,7 +1318,7 @@ function $t({ target: e, locked: t }) {
|
|
|
1298
1318
|
}
|
|
1299
1319
|
}
|
|
1300
1320
|
),
|
|
1301
|
-
/* @__PURE__ */
|
|
1321
|
+
/* @__PURE__ */ r(
|
|
1302
1322
|
"div",
|
|
1303
1323
|
{
|
|
1304
1324
|
className: "review-lens-highlight__content",
|
|
@@ -1311,7 +1331,7 @@ function $t({ target: e, locked: t }) {
|
|
|
1311
1331
|
}
|
|
1312
1332
|
),
|
|
1313
1333
|
/* @__PURE__ */ o("div", { className: "review-lens-highlight__label", children: [
|
|
1314
|
-
/* @__PURE__ */
|
|
1334
|
+
/* @__PURE__ */ r("strong", { children: i }),
|
|
1315
1335
|
/* @__PURE__ */ o("span", { children: [
|
|
1316
1336
|
Math.round(e.rect.width),
|
|
1317
1337
|
" x ",
|
|
@@ -1323,20 +1343,20 @@ function $t({ target: e, locked: t }) {
|
|
|
1323
1343
|
);
|
|
1324
1344
|
}
|
|
1325
1345
|
function _t({ from: e, to: t }) {
|
|
1326
|
-
const n =
|
|
1327
|
-
return n.length === 0 ? null : /* @__PURE__ */
|
|
1346
|
+
const n = Kt(e.rect, t.rect);
|
|
1347
|
+
return n.length === 0 ? null : /* @__PURE__ */ r(re, { children: n.map((i) => /* @__PURE__ */ r(
|
|
1328
1348
|
"div",
|
|
1329
1349
|
{
|
|
1330
|
-
className: `review-lens-distance review-lens-distance--${
|
|
1350
|
+
className: `review-lens-distance review-lens-distance--${i.axis}`,
|
|
1331
1351
|
style: {
|
|
1332
|
-
top:
|
|
1333
|
-
left:
|
|
1334
|
-
width:
|
|
1335
|
-
height:
|
|
1352
|
+
top: i.top,
|
|
1353
|
+
left: i.left,
|
|
1354
|
+
width: i.width,
|
|
1355
|
+
height: i.height
|
|
1336
1356
|
},
|
|
1337
|
-
children: /* @__PURE__ */
|
|
1357
|
+
children: /* @__PURE__ */ r("span", { children: i.label })
|
|
1338
1358
|
},
|
|
1339
|
-
|
|
1359
|
+
i.key
|
|
1340
1360
|
)) });
|
|
1341
1361
|
}
|
|
1342
1362
|
function Pt({
|
|
@@ -1344,14 +1364,14 @@ function Pt({
|
|
|
1344
1364
|
selectedFeedback: t,
|
|
1345
1365
|
onSelect: n
|
|
1346
1366
|
}) {
|
|
1347
|
-
return /* @__PURE__ */
|
|
1367
|
+
return /* @__PURE__ */ r(re, { children: e.map((i) => /* @__PURE__ */ r(
|
|
1348
1368
|
Ut,
|
|
1349
1369
|
{
|
|
1350
|
-
feedback:
|
|
1351
|
-
selected: (t == null ? void 0 : t.id) ===
|
|
1370
|
+
feedback: i,
|
|
1371
|
+
selected: (t == null ? void 0 : t.id) === i.id,
|
|
1352
1372
|
onSelect: n
|
|
1353
1373
|
},
|
|
1354
|
-
|
|
1374
|
+
i.id
|
|
1355
1375
|
)) });
|
|
1356
1376
|
}
|
|
1357
1377
|
function Ut({
|
|
@@ -1359,12 +1379,12 @@ function Ut({
|
|
|
1359
1379
|
selected: t,
|
|
1360
1380
|
onSelect: n
|
|
1361
1381
|
}) {
|
|
1362
|
-
const
|
|
1382
|
+
const i = We(null);
|
|
1363
1383
|
return lt(() => {
|
|
1364
1384
|
let s = 0;
|
|
1365
1385
|
const c = () => {
|
|
1366
1386
|
s = 0;
|
|
1367
|
-
const f =
|
|
1387
|
+
const f = i.current, p = z(e.selector), d = p == null ? void 0 : p.getBoundingClientRect();
|
|
1368
1388
|
!f || !d || (f.style.top = `${d.top}px`, f.style.left = `${d.right}px`, f.hidden = d.bottom < 0 || d.top > window.innerHeight);
|
|
1369
1389
|
}, g = () => {
|
|
1370
1390
|
s || (s = window.requestAnimationFrame(c));
|
|
@@ -1372,10 +1392,10 @@ function Ut({
|
|
|
1372
1392
|
return c(), window.addEventListener("scroll", g, !0), window.addEventListener("resize", g), () => {
|
|
1373
1393
|
s && window.cancelAnimationFrame(s), window.removeEventListener("scroll", g, !0), window.removeEventListener("resize", g);
|
|
1374
1394
|
};
|
|
1375
|
-
}, [e.selector]), /* @__PURE__ */
|
|
1395
|
+
}, [e.selector]), /* @__PURE__ */ r(
|
|
1376
1396
|
"button",
|
|
1377
1397
|
{
|
|
1378
|
-
ref:
|
|
1398
|
+
ref: i,
|
|
1379
1399
|
type: "button",
|
|
1380
1400
|
className: t ? "review-lens-marker review-lens-marker--selected" : "review-lens-marker",
|
|
1381
1401
|
onClick: () => n(e),
|
|
@@ -1388,7 +1408,7 @@ function Wt({
|
|
|
1388
1408
|
selectedFeedback: t,
|
|
1389
1409
|
onSelect: n
|
|
1390
1410
|
}) {
|
|
1391
|
-
const
|
|
1411
|
+
const i = e.map((s) => {
|
|
1392
1412
|
const c = z(s.selector), g = c == null ? void 0 : c.getBoundingClientRect(), f = Math.max(
|
|
1393
1413
|
document.documentElement.scrollHeight,
|
|
1394
1414
|
document.body.scrollHeight,
|
|
@@ -1399,7 +1419,7 @@ function Wt({
|
|
|
1399
1419
|
top: Math.min(100, Math.max(0, (g.top + window.scrollY) / f * 100))
|
|
1400
1420
|
};
|
|
1401
1421
|
}).filter((s) => s !== null);
|
|
1402
|
-
return
|
|
1422
|
+
return i.length === 0 ? null : /* @__PURE__ */ r("div", { className: "review-lens-minimap", "data-review-lens-ui": !0, "aria-label": "Feedback map", children: i.map((s) => /* @__PURE__ */ r(
|
|
1403
1423
|
"button",
|
|
1404
1424
|
{
|
|
1405
1425
|
type: "button",
|
|
@@ -1424,16 +1444,16 @@ function Dt({ target: e }) {
|
|
|
1424
1444
|
["Color", e.cssSnapshot.color],
|
|
1425
1445
|
["Background", e.cssSnapshot.backgroundColor]
|
|
1426
1446
|
];
|
|
1427
|
-
return /* @__PURE__ */
|
|
1428
|
-
/* @__PURE__ */
|
|
1429
|
-
/* @__PURE__ */
|
|
1447
|
+
return /* @__PURE__ */ r("dl", { className: "review-lens-metrics", children: t.map(([n, i]) => /* @__PURE__ */ o("div", { children: [
|
|
1448
|
+
/* @__PURE__ */ r("dt", { children: n }),
|
|
1449
|
+
/* @__PURE__ */ r("dd", { children: i })
|
|
1430
1450
|
] }, n)) });
|
|
1431
1451
|
}
|
|
1432
1452
|
function _e({ title: e, items: t }) {
|
|
1433
1453
|
return /* @__PURE__ */ o("section", { className: "review-lens-insights", children: [
|
|
1434
|
-
/* @__PURE__ */
|
|
1435
|
-
t.length === 0 ? /* @__PURE__ */
|
|
1436
|
-
t.length > 0 ? /* @__PURE__ */
|
|
1454
|
+
/* @__PURE__ */ r("h3", { children: e }),
|
|
1455
|
+
t.length === 0 ? /* @__PURE__ */ r("p", { children: "No issues detected." }) : null,
|
|
1456
|
+
t.length > 0 ? /* @__PURE__ */ r("ul", { children: t.map((n) => /* @__PURE__ */ r("li", { children: n }, n)) }) : null
|
|
1437
1457
|
] });
|
|
1438
1458
|
}
|
|
1439
1459
|
function z(e) {
|
|
@@ -1451,28 +1471,36 @@ function Ke(e) {
|
|
|
1451
1471
|
return n.fingerprint.tagName !== e.elementFingerprint.tagName ? { label: "Element changed", level: "warning" } : Math.abs(n.fingerprint.width - e.elementFingerprint.width) > 2 || Math.abs(n.fingerprint.height - e.elementFingerprint.height) > 2 ? { label: "Size changed", level: "warning" } : n.cssSnapshot.fontSize !== e.createdCssSnapshot.fontSize || n.cssSnapshot.color !== e.createdCssSnapshot.color || n.cssSnapshot.padding !== e.createdCssSnapshot.padding ? { label: "Style changed", level: "warning" } : { label: "Target unchanged", level: "ok" };
|
|
1452
1472
|
}
|
|
1453
1473
|
function zt(e) {
|
|
1454
|
-
var
|
|
1474
|
+
var p;
|
|
1455
1475
|
const t = z(e.selector);
|
|
1456
1476
|
if (!t)
|
|
1457
1477
|
return ["Selected element is no longer available."];
|
|
1458
|
-
const n = [],
|
|
1459
|
-
c && !g && n.push("Interactive element has no accessible name."), c && (e.rect.width < 44 || e.rect.height < 44) && n.push("Tap target is smaller than 44 x 44."),
|
|
1460
|
-
const f = /^h[1-6]$/.test(
|
|
1461
|
-
return f > 1 && !document.querySelector(`h${f - 1}`) && n.push("Heading may skip the previous level."),
|
|
1478
|
+
const n = [], i = t.tagName.toLowerCase(), s = t.getAttribute("role"), c = ["button", "a", "input", "select", "textarea"].includes(i) || s === "button" || s === "link", g = t.getAttribute("aria-label") || t.getAttribute("title") || ((p = t.textContent) == null ? void 0 : p.trim());
|
|
1479
|
+
c && !g && n.push("Interactive element has no accessible name."), c && (e.rect.width < 44 || e.rect.height < 44) && n.push("Tap target is smaller than 44 x 44."), i === "img" && !t.getAttribute("alt") && n.push("Image is missing alt text.");
|
|
1480
|
+
const f = /^h[1-6]$/.test(i) ? Number(i.slice(1)) : 0;
|
|
1481
|
+
return f > 1 && !document.querySelector(`h${f - 1}`) && n.push("Heading may skip the previous level."), Vt(e.cssSnapshot.color, e.cssSnapshot.backgroundColor) && n.push("Text contrast may be low."), n;
|
|
1462
1482
|
}
|
|
1463
1483
|
function Ht(e, t = {}) {
|
|
1464
1484
|
const n = [];
|
|
1465
|
-
return U("Padding", e.padding, t.spacing, n), U("Margin", e.margin, t.spacing, n), U("Font size", e.fontSize, t.fontSize, n), U("Line height", e.lineHeight, t.lineHeight, n), U("Text color", e.color, t.color, n), U("Background", e.backgroundColor, t.color, n), U("Radius", e.borderRadius, t.radius, n), n;
|
|
1485
|
+
return U("Padding", e.padding, t.spacing, n, { allowComposite: !0 }), U("Margin", e.margin, t.spacing, n, { allowComposite: !0 }), U("Font size", e.fontSize, t.fontSize, n), U("Line height", e.lineHeight, t.lineHeight, n), U("Text color", e.color, t.color, n), U("Background", e.backgroundColor, t.color, n), U("Radius", e.borderRadius, t.radius, n, { allowComposite: !0 }), n;
|
|
1486
|
+
}
|
|
1487
|
+
function U(e, t, n, i, s = {}) {
|
|
1488
|
+
!n || n.length === 0 || !t || jt(t, n, s) || i.push(`${e} ${t} is outside configured tokens.`);
|
|
1466
1489
|
}
|
|
1467
|
-
function
|
|
1468
|
-
|
|
1490
|
+
function jt(e, t, n = {}) {
|
|
1491
|
+
if (t.includes(e))
|
|
1492
|
+
return !0;
|
|
1493
|
+
if (!n.allowComposite)
|
|
1494
|
+
return !1;
|
|
1495
|
+
const i = e.trim().split(/\s+/);
|
|
1496
|
+
return i.length > 1 && i.every((s) => t.includes(s));
|
|
1469
1497
|
}
|
|
1470
|
-
function
|
|
1471
|
-
const t = e.id ? `#${e.id}` : "", n = e.className ? `.${e.className.split(/\s+/).filter(Boolean).slice(0, 2).join(".")}` : "",
|
|
1472
|
-
return `${e.tagName}${t}${n}${
|
|
1498
|
+
function Ot(e) {
|
|
1499
|
+
const t = e.id ? `#${e.id}` : "", n = e.className ? `.${e.className.split(/\s+/).filter(Boolean).slice(0, 2).join(".")}` : "", i = e.ariaLabel ? `[aria-label="${e.ariaLabel}"]` : "";
|
|
1500
|
+
return `${e.tagName}${t}${n}${i}` || e.tagName;
|
|
1473
1501
|
}
|
|
1474
|
-
function
|
|
1475
|
-
const n = [],
|
|
1502
|
+
function Kt(e, t) {
|
|
1503
|
+
const n = [], i = (Math.max(e.left, t.left) + Math.min(e.right, t.right)) / 2, s = (Math.max(e.top, t.top) + Math.min(e.bottom, t.bottom)) / 2;
|
|
1476
1504
|
if (e.right <= t.left || t.right <= e.left) {
|
|
1477
1505
|
const c = e.right <= t.left ? e.right : t.right, g = e.right <= t.left ? t.left : e.left;
|
|
1478
1506
|
n.push({
|
|
@@ -1491,7 +1519,7 @@ function Ot(e, t) {
|
|
|
1491
1519
|
key: "vertical",
|
|
1492
1520
|
axis: "vertical",
|
|
1493
1521
|
top: c,
|
|
1494
|
-
left: Pe(
|
|
1522
|
+
left: Pe(i, 0, window.innerWidth),
|
|
1495
1523
|
width: 1,
|
|
1496
1524
|
height: Math.max(g - c, 1),
|
|
1497
1525
|
label: `${Math.round(g - c)}px`
|
|
@@ -1504,58 +1532,58 @@ function Pe(e, t, n) {
|
|
|
1504
1532
|
}
|
|
1505
1533
|
function Y(e, t) {
|
|
1506
1534
|
const n = /* @__PURE__ */ new Map();
|
|
1507
|
-
for (const
|
|
1508
|
-
const s = t(
|
|
1535
|
+
for (const i of e) {
|
|
1536
|
+
const s = t(i);
|
|
1509
1537
|
n.set(s, (n.get(s) ?? 0) + 1);
|
|
1510
1538
|
}
|
|
1511
|
-
return Array.from(n.entries()).sort((
|
|
1539
|
+
return Array.from(n.entries()).sort((i, s) => s[1] - i[1] || i[0].localeCompare(s[0]));
|
|
1512
1540
|
}
|
|
1513
|
-
function
|
|
1541
|
+
function Jt(e) {
|
|
1514
1542
|
return e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement || e instanceof HTMLElement && e.isContentEditable;
|
|
1515
1543
|
}
|
|
1516
|
-
function
|
|
1517
|
-
const n = Ue(e),
|
|
1518
|
-
return !n || !
|
|
1544
|
+
function Vt(e, t) {
|
|
1545
|
+
const n = Ue(e), i = Ue(t);
|
|
1546
|
+
return !n || !i || i.alpha === 0 ? !1 : qt(n, i) < 4.5;
|
|
1519
1547
|
}
|
|
1520
1548
|
function Ue(e) {
|
|
1521
1549
|
const t = e.match(/rgba?\(([^)]+)\)/);
|
|
1522
1550
|
if (!t)
|
|
1523
1551
|
return null;
|
|
1524
|
-
const [n,
|
|
1552
|
+
const [n, i, s, c = "1"] = t[1].split(",").map((g) => g.trim());
|
|
1525
1553
|
return {
|
|
1526
1554
|
red: Number(n),
|
|
1527
|
-
green: Number(
|
|
1555
|
+
green: Number(i),
|
|
1528
1556
|
blue: Number(s),
|
|
1529
1557
|
alpha: Number(c)
|
|
1530
1558
|
};
|
|
1531
1559
|
}
|
|
1532
1560
|
function qt(e, t) {
|
|
1533
|
-
const n = Math.max(ne(e), ne(t)),
|
|
1534
|
-
return (n + 0.05) / (
|
|
1561
|
+
const n = Math.max(ne(e), ne(t)), i = Math.min(ne(e), ne(t));
|
|
1562
|
+
return (n + 0.05) / (i + 0.05);
|
|
1535
1563
|
}
|
|
1536
1564
|
function ne(e) {
|
|
1537
1565
|
const t = [e.red, e.green, e.blue].map((n) => {
|
|
1538
|
-
const
|
|
1539
|
-
return
|
|
1566
|
+
const i = n / 255;
|
|
1567
|
+
return i <= 0.03928 ? i / 12.92 : ((i + 0.055) / 1.055) ** 2.4;
|
|
1540
1568
|
});
|
|
1541
1569
|
return t[0] * 0.2126 + t[1] * 0.7152 + t[2] * 0.0722;
|
|
1542
1570
|
}
|
|
1543
|
-
function
|
|
1571
|
+
function Gt(e) {
|
|
1544
1572
|
const t = {
|
|
1545
|
-
top:
|
|
1546
|
-
right:
|
|
1547
|
-
bottom:
|
|
1548
|
-
left:
|
|
1573
|
+
top: L(e.cssSnapshot.marginTop),
|
|
1574
|
+
right: L(e.cssSnapshot.marginRight),
|
|
1575
|
+
bottom: L(e.cssSnapshot.marginBottom),
|
|
1576
|
+
left: L(e.cssSnapshot.marginLeft)
|
|
1549
1577
|
}, n = {
|
|
1550
|
-
top:
|
|
1551
|
-
right:
|
|
1552
|
-
bottom:
|
|
1553
|
-
left:
|
|
1554
|
-
},
|
|
1555
|
-
top:
|
|
1556
|
-
right:
|
|
1557
|
-
bottom:
|
|
1558
|
-
left:
|
|
1578
|
+
top: L(e.cssSnapshot.borderTopWidth),
|
|
1579
|
+
right: L(e.cssSnapshot.borderRightWidth),
|
|
1580
|
+
bottom: L(e.cssSnapshot.borderBottomWidth),
|
|
1581
|
+
left: L(e.cssSnapshot.borderLeftWidth)
|
|
1582
|
+
}, i = {
|
|
1583
|
+
top: L(e.cssSnapshot.paddingTop),
|
|
1584
|
+
right: L(e.cssSnapshot.paddingRight),
|
|
1585
|
+
bottom: L(e.cssSnapshot.paddingBottom),
|
|
1586
|
+
left: L(e.cssSnapshot.paddingLeft)
|
|
1559
1587
|
}, s = {
|
|
1560
1588
|
top: e.rect.top,
|
|
1561
1589
|
left: e.rect.left,
|
|
@@ -1572,10 +1600,10 @@ function Vt(e) {
|
|
|
1572
1600
|
width: Math.max(s.width - n.left - n.right, 0),
|
|
1573
1601
|
height: Math.max(s.height - n.top - n.bottom, 0)
|
|
1574
1602
|
}, f = {
|
|
1575
|
-
top: g.top +
|
|
1576
|
-
left: g.left +
|
|
1577
|
-
width: Math.max(g.width -
|
|
1578
|
-
height: Math.max(g.height -
|
|
1603
|
+
top: g.top + i.top,
|
|
1604
|
+
left: g.left + i.left,
|
|
1605
|
+
width: Math.max(g.width - i.left - i.right, 0),
|
|
1606
|
+
height: Math.max(g.height - i.top - i.bottom, 0)
|
|
1579
1607
|
};
|
|
1580
1608
|
return {
|
|
1581
1609
|
margin: c,
|
|
@@ -1584,13 +1612,13 @@ function Vt(e) {
|
|
|
1584
1612
|
content: f
|
|
1585
1613
|
};
|
|
1586
1614
|
}
|
|
1587
|
-
function
|
|
1615
|
+
function L(e) {
|
|
1588
1616
|
const t = Number.parseFloat(e);
|
|
1589
1617
|
return Number.isFinite(t) ? t : 0;
|
|
1590
1618
|
}
|
|
1591
1619
|
export {
|
|
1592
|
-
|
|
1593
|
-
|
|
1620
|
+
Zt as ReviewLensOverlay,
|
|
1621
|
+
Qt as ReviewLensProvider,
|
|
1594
1622
|
X as buildElementTarget,
|
|
1595
1623
|
ht as createGoogleSheetsAdapter,
|
|
1596
1624
|
Ct as normalizeReviewUrl,
|