reflet-sdk 0.5.1 → 0.6.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/CHANGELOG.md +22 -0
- package/README.md +24 -4
- package/dist/{client-BWEBWk1k.js → client-DAdWdIFY.js} +17 -13
- package/dist/client-DAdWdIFY.js.map +1 -0
- package/dist/{client-w4Rkl10y.d.ts → client-DF1fdsSC.d.ts} +3 -1
- package/dist/{client-w4Rkl10y.d.ts.map → client-DF1fdsSC.d.ts.map} +1 -1
- package/dist/{devtools-layer-EyK7n9w3.js → devtools-layer-D_0UL_Wd.js} +2879 -2717
- package/dist/devtools-layer-D_0UL_Wd.js.map +1 -0
- package/dist/devtools-next.d.ts +1 -1
- package/dist/devtools-next.d.ts.map +1 -1
- package/dist/devtools-next.js +1 -1
- package/dist/devtools-vite.d.ts +1 -1
- package/dist/devtools-vite.d.ts.map +1 -1
- package/dist/devtools-vite.js +7 -3
- package/dist/devtools-vite.js.map +1 -1
- package/dist/feedback.d.ts.map +1 -1
- package/dist/feedback.js +51 -34
- package/dist/feedback.js.map +1 -1
- package/dist/{handler-CHP0m7KF.js → handler-C9tdKcl0.js} +335 -46
- package/dist/handler-C9tdKcl0.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/{options-7KtQZJj8.d.ts → options-CIBazDPp.d.ts} +3 -1
- package/dist/options-CIBazDPp.d.ts.map +1 -0
- package/dist/{picker-DFfC1uIY.js → picker-C7TkZcBE.js} +60 -44
- package/dist/picker-C7TkZcBE.js.map +1 -0
- package/dist/{protocol-Bn6Bg_0r.js → protocol-ClqTFzwR.js} +4 -1
- package/dist/protocol-ClqTFzwR.js.map +1 -0
- package/dist/react.d.ts +1 -1
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +43 -49
- package/dist/react.js.map +1 -1
- package/dist/{z-index-CKxBgZTG.js → z-index-BL0SGZEP.js} +7 -7
- package/dist/z-index-BL0SGZEP.js.map +1 -0
- package/package.json +3 -2
- package/dist/client-BWEBWk1k.js.map +0 -1
- package/dist/devtools-layer-EyK7n9w3.js.map +0 -1
- package/dist/handler-CHP0m7KF.js.map +0 -1
- package/dist/options-7KtQZJj8.d.ts.map +0 -1
- package/dist/picker-DFfC1uIY.js.map +0 -1
- package/dist/protocol-Bn6Bg_0r.js.map +0 -1
- package/dist/z-index-CKxBgZTG.js.map +0 -1
package/dist/devtools-next.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools-next.d.ts","names":[],"sources":["../src/devtools/server/handler.ts","../src/devtools/server/next.ts"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"devtools-next.d.ts","names":[],"sources":["../src/devtools/server/handler.ts","../src/devtools/server/next.ts"],"mappings":";;KA8BY,mBAAmB,SAAS,YAAY,QAAQ;;;iBCzB3C;EACf,KAAK;EACL,MAAM;;;;;;wBAOQ,oBACd,UAAS,wBACR;qBAcU,KAAG;qBACH,MAAI"}
|
package/dist/devtools-next.js
CHANGED
package/dist/devtools-vite.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as DevtoolsServerOptions } from "./options-
|
|
1
|
+
import { t as DevtoolsServerOptions } from "./options-CIBazDPp.js";
|
|
2
2
|
import { Plugin } from "vite";
|
|
3
3
|
//#region src/devtools/server/vite.d.ts
|
|
4
4
|
/** Serves the Reflet devtools route from the Vite dev server; never part of a build. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools-vite.d.ts","names":[],"sources":["../src/devtools/server/vite.ts"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"devtools-vite.d.ts","names":[],"sources":["../src/devtools/server/vite.ts"],"mappings":";;;;wBAyFgB,eAAe,UAAS,wBAA6B"}
|
package/dist/devtools-vite.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as DEVTOOLS_ROUTE_BASE } from "./protocol-
|
|
2
|
-
import { n as errorResponse, t as createDevtoolsHandler } from "./handler-
|
|
1
|
+
import { r as DEVTOOLS_ROUTE_BASE } from "./protocol-ClqTFzwR.js";
|
|
2
|
+
import { n as isLoopbackAddress, r as errorResponse, t as createDevtoolsHandler } from "./handler-C9tdKcl0.js";
|
|
3
3
|
import { loadEnv } from "vite";
|
|
4
4
|
//#region src/devtools/server/vite.ts
|
|
5
5
|
const MAX_BODY_BYTES = 1048576;
|
|
@@ -15,7 +15,7 @@ async function readBody(request) {
|
|
|
15
15
|
return size > MAX_BODY_BYTES ? null : Buffer.concat(chunks).toString("utf8");
|
|
16
16
|
}
|
|
17
17
|
function toWebRequest(request, method, body) {
|
|
18
|
-
const origin =
|
|
18
|
+
const origin = `${"encrypted" in request.socket && request.socket.encrypted === true ? "https" : "http"}://${request.headers.host ?? "localhost"}`;
|
|
19
19
|
const url = new URL(request.originalUrl ?? request.url ?? "/", origin);
|
|
20
20
|
const headers = new Headers();
|
|
21
21
|
for (const [name, value] of Object.entries(request.headers)) {
|
|
@@ -34,6 +34,10 @@ async function sendWebResponse(response, serverResponse) {
|
|
|
34
34
|
serverResponse.end(Buffer.from(await response.arrayBuffer()));
|
|
35
35
|
}
|
|
36
36
|
async function serveDevtoolsRequest(handler, request, serverResponse) {
|
|
37
|
+
if (!isLoopbackAddress(request.socket.remoteAddress)) {
|
|
38
|
+
await sendWebResponse(errorResponse("Reflet devtools only answers this machine.", 403), serverResponse);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
37
41
|
const method = request.method ?? "GET";
|
|
38
42
|
const body = method !== "GET" && method !== "HEAD" ? await readBody(request) : void 0;
|
|
39
43
|
if (body === null) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"devtools-vite.js","names":[],"sources":["../src/devtools/server/vite.ts"],"sourcesContent":["import type { ServerResponse } from \"node:http\";\nimport { type Connect, loadEnv, type Plugin } from \"vite\";\nimport { DEVTOOLS_ROUTE_BASE } from \"../protocol\";\nimport { createDevtoolsHandler, type DevtoolsHandler } from \"./handler\";\nimport { errorResponse } from \"./json-response\";\nimport type { DevtoolsServerOptions } from \"./options\";\n\nexport type { DevtoolsServerOptions } from \"./options\";\n\nconst MAX_BODY_BYTES = 1_048_576;\nconst ENV_PREFIX = \"REFLET_\";\n\nasync function readBody(\n request: Connect.IncomingMessage\n): Promise<string | null> {\n const chunks: Buffer[] = [];\n let size = 0;\n for await (const chunk of request) {\n const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk));\n size += buffer.length;\n // Keep draining: leaving the loop early destroys the socket before the 413 is sent.\n if (size <= MAX_BODY_BYTES) {\n chunks.push(buffer);\n }\n }\n return size > MAX_BODY_BYTES ? null : Buffer.concat(chunks).toString(\"utf8\");\n}\n\nfunction toWebRequest(\n request: Connect.IncomingMessage,\n method: string,\n body: string | undefined\n): Request {\n const origin =
|
|
1
|
+
{"version":3,"file":"devtools-vite.js","names":[],"sources":["../src/devtools/server/vite.ts"],"sourcesContent":["import type { ServerResponse } from \"node:http\";\nimport { type Connect, loadEnv, type Plugin } from \"vite\";\nimport { DEVTOOLS_ROUTE_BASE } from \"../protocol\";\nimport { createDevtoolsHandler, type DevtoolsHandler } from \"./handler\";\nimport { errorResponse } from \"./json-response\";\nimport type { DevtoolsServerOptions } from \"./options\";\nimport { isLoopbackAddress } from \"./request-guard\";\n\nexport type { DevtoolsServerOptions } from \"./options\";\n\nconst MAX_BODY_BYTES = 1_048_576;\nconst ENV_PREFIX = \"REFLET_\";\n\nasync function readBody(\n request: Connect.IncomingMessage\n): Promise<string | null> {\n const chunks: Buffer[] = [];\n let size = 0;\n for await (const chunk of request) {\n const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk));\n size += buffer.length;\n // Keep draining: leaving the loop early destroys the socket before the 413 is sent.\n if (size <= MAX_BODY_BYTES) {\n chunks.push(buffer);\n }\n }\n return size > MAX_BODY_BYTES ? null : Buffer.concat(chunks).toString(\"utf8\");\n}\n\nfunction toWebRequest(\n request: Connect.IncomingMessage,\n method: string,\n body: string | undefined\n): Request {\n const isTls =\n \"encrypted\" in request.socket && request.socket.encrypted === true;\n const protocol = isTls ? \"https\" : \"http\";\n const origin = `${protocol}://${request.headers.host ?? \"localhost\"}`;\n const url = new URL(request.originalUrl ?? request.url ?? \"/\", origin);\n const headers = new Headers();\n for (const [name, value] of Object.entries(request.headers)) {\n if (name.startsWith(\":\") || value === undefined) {\n continue;\n }\n for (const item of Array.isArray(value) ? value : [value]) {\n headers.append(name, item);\n }\n }\n return new Request(url, { body, headers, method });\n}\n\nasync function sendWebResponse(\n response: Response,\n serverResponse: ServerResponse\n): Promise<void> {\n serverResponse.statusCode = response.status;\n for (const [name, value] of response.headers) {\n serverResponse.setHeader(name, value);\n }\n serverResponse.end(Buffer.from(await response.arrayBuffer()));\n}\n\nasync function serveDevtoolsRequest(\n handler: DevtoolsHandler,\n request: Connect.IncomingMessage,\n serverResponse: ServerResponse\n): Promise<void> {\n if (!isLoopbackAddress(request.socket.remoteAddress)) {\n await sendWebResponse(\n errorResponse(\"Reflet devtools only answers this machine.\", 403),\n serverResponse\n );\n return;\n }\n const method = request.method ?? \"GET\";\n const hasBody = method !== \"GET\" && method !== \"HEAD\";\n const body = hasBody ? await readBody(request) : undefined;\n if (body === null) {\n await sendWebResponse(\n errorResponse(\"Reflet devtools requests are limited to 1 MB.\", 413),\n serverResponse\n );\n return;\n }\n const response = await handler(toWebRequest(request, method, body));\n await sendWebResponse(response, serverResponse);\n}\n\n/** Serves the Reflet devtools route from the Vite dev server; never part of a build. */\nexport function refletDevtools(options: DevtoolsServerOptions = {}): Plugin {\n let handler: DevtoolsHandler | null = null;\n\n return {\n apply: \"serve\",\n configResolved(config) {\n const env = loadEnv(config.mode, config.envDir, ENV_PREFIX);\n handler = createDevtoolsHandler(\n { ...options, root: options.root ?? config.root },\n { ...process.env, ...env }\n );\n },\n configureServer(server) {\n server.middlewares.use(DEVTOOLS_ROUTE_BASE, (request, response, next) => {\n if (!handler) {\n next();\n return;\n }\n serveDevtoolsRequest(handler, request, response).catch(next);\n });\n },\n name: \"reflet-devtools\",\n };\n}\n"],"mappings":";;;;AAUA,MAAM,iBAAiB;AACvB,MAAM,aAAa;AAEnB,eAAe,SACb,SACwB;CACxB,MAAM,SAAmB,CAAC;CAC1B,IAAI,OAAO;CACX,WAAW,MAAM,SAAS,SAAS;EACjC,MAAM,SAAS,OAAO,SAAS,KAAK,IAAI,QAAQ,OAAO,KAAK,OAAO,KAAK,CAAC;EACzE,QAAQ,OAAO;EAEf,IAAI,QAAQ,gBACV,OAAO,KAAK,MAAM;CAEtB;CACA,OAAO,OAAO,iBAAiB,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,SAAS,MAAM;AAC7E;AAEA,SAAS,aACP,SACA,QACA,MACS;CAIT,MAAM,SAAS,GAFb,eAAe,QAAQ,UAAU,QAAQ,OAAO,cAAc,OACvC,UAAU,OACR,KAAK,QAAQ,QAAQ,QAAQ;CACxD,MAAM,MAAM,IAAI,IAAI,QAAQ,eAAe,QAAQ,OAAO,KAAK,MAAM;CACrE,MAAM,UAAU,IAAI,QAAQ;CAC5B,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,QAAQ,OAAO,GAAG;EAC3D,IAAI,KAAK,WAAW,GAAG,KAAK,UAAU,KAAA,GACpC;EAEF,KAAK,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,GACtD,QAAQ,OAAO,MAAM,IAAI;CAE7B;CACA,OAAO,IAAI,QAAQ,KAAK;EAAE;EAAM;EAAS;CAAO,CAAC;AACnD;AAEA,eAAe,gBACb,UACA,gBACe;CACf,eAAe,aAAa,SAAS;CACrC,KAAK,MAAM,CAAC,MAAM,UAAU,SAAS,SACnC,eAAe,UAAU,MAAM,KAAK;CAEtC,eAAe,IAAI,OAAO,KAAK,MAAM,SAAS,YAAY,CAAC,CAAC;AAC9D;AAEA,eAAe,qBACb,SACA,SACA,gBACe;CACf,IAAI,CAAC,kBAAkB,QAAQ,OAAO,aAAa,GAAG;EACpD,MAAM,gBACJ,cAAc,8CAA8C,GAAG,GAC/D,cACF;EACA;CACF;CACA,MAAM,SAAS,QAAQ,UAAU;CAEjC,MAAM,OADU,WAAW,SAAS,WAAW,SACxB,MAAM,SAAS,OAAO,IAAI,KAAA;CACjD,IAAI,SAAS,MAAM;EACjB,MAAM,gBACJ,cAAc,iDAAiD,GAAG,GAClE,cACF;EACA;CACF;CAEA,MAAM,gBAAgB,MADC,QAAQ,aAAa,SAAS,QAAQ,IAAI,CAAC,GAClC,cAAc;AAChD;;AAGA,SAAgB,eAAe,UAAiC,CAAC,GAAW;CAC1E,IAAI,UAAkC;CAEtC,OAAO;EACL,OAAO;EACP,eAAe,QAAQ;GACrB,MAAM,MAAM,QAAQ,OAAO,MAAM,OAAO,QAAQ,UAAU;GAC1D,UAAU,sBACR;IAAE,GAAG;IAAS,MAAM,QAAQ,QAAQ,OAAO;GAAK,GAChD;IAAE,GAAG,QAAQ;IAAK,GAAG;GAAI,CAC3B;EACF;EACA,gBAAgB,QAAQ;GACtB,OAAO,YAAY,IAAI,sBAAsB,SAAS,UAAU,SAAS;IACvE,IAAI,CAAC,SAAS;KACZ,KAAK;KACL;IACF;IACA,qBAAqB,SAAS,SAAS,QAAQ,CAAC,CAAC,MAAM,IAAI;GAC7D,CAAC;EACH;EACA,MAAM;CACR;AACF"}
|
package/dist/feedback.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feedback.d.ts","names":[],"sources":["../src/feedback/types.ts","../src/feedback/core/capture.ts","../src/feedback/core/element-selector.ts","../src/feedback/core/page-context.ts","../src/feedback/widget.tsx"],"mappings":";;cAKM;KAUM,yBAAyB;UAEpB;EACf;EACA;;UAGe;EACf;EACA,KAAK;EACL;;EAEA,SAAS;EACT,OAAO;EACP;EACA,MAAM;;UAGS;EACf,MAAM;EACN;EACA;;EAEA;EACA;;UAae;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;UAgDe;;EAEf;;EAEA;;EAEA;;;;;EAKA;;EAEA;;EAEA;;EAEA;EACA,SAAS,QAAQ;;EAEjB,WAAW;;EAEX;EACA;EACA,aAAa;IAAU;;EACvB;EACA,YAAY;IAAU;;EACtB;EACA;EACA;EACA;EACA,OAAO;EACP;;;;UC8De;;EAEf,UAAU;EACV;EACA;;EAEA;;;;;;;;;;wBA2GoB,gBACpB,UAAS,iBACR,QAAQ;wBAiDK,eAAe,OAAO;;;;wBCjHtB,sBAAsB,SAAS,UAAU;;;;wBCjMzC,mBAAmB;EACjC;IACE;;;
|
|
1
|
+
{"version":3,"file":"feedback.d.ts","names":[],"sources":["../src/feedback/types.ts","../src/feedback/core/capture.ts","../src/feedback/core/element-selector.ts","../src/feedback/core/page-context.ts","../src/feedback/widget.tsx"],"mappings":";;cAKM;KAUM,yBAAyB;UAEpB;EACf;EACA;;UAGe;EACf;EACA,KAAK;EACL;;EAEA,SAAS;EACT,OAAO;EACP;EACA,MAAM;;UAGS;EACf,MAAM;EACN;EACA;;EAEA;EACA;;UAae;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;UAgDe;;EAEf;;EAEA;;EAEA;;;;;EAKA;;EAEA;;EAEA;;EAEA;EACA,SAAS,QAAQ;;EAEjB,WAAW;;EAEX;EACA;EACA,aAAa;IAAU;;EACvB;EACA,YAAY;IAAU;;EACtB;EACA;EACA;EACA;EACA,OAAO;EACP;;;;UC8De;;EAEf,UAAU;EACV;EACA;;EAEA;;;;;;;;;;wBA2GoB,gBACpB,UAAS,iBACR,QAAQ;wBAiDK,eAAe,OAAO;;;;wBCjHtB,sBAAsB,SAAS,UAAU;;;;wBCjMzC,mBAAmB;EACjC;IACE;;;wBCtEY,eAAe,OAAO,sCAAmB,IAAA"}
|
package/dist/feedback.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { n as Reflet } from "./client-
|
|
3
|
-
import { A as
|
|
4
|
-
import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-
|
|
2
|
+
import { n as Reflet } from "./client-DAdWdIFY.js";
|
|
3
|
+
import { A as TargetIcon, B as buildElementSelection, C as GripIcon, D as SpotlightIcon, E as PencilIcon, F as normalizeRect, G as WIDGET_MARKER, I as DEFAULT_WIDGET_LABELS, J as releaseCapture, K as captureViewport, L as SDK_VERSION, M as TrashIcon, N as UndoIcon, O as SquareIcon, P as isDegenerate, R as collectPageContext, S as CloseIcon, T as MoreIcon, _ as BlurIcon, b as CheckIcon, d as SelectionOutline, f as drawAnnotations, g as ArrowIcon, h as stopClicksAtHost, j as TextIcon, l as submitWidgetFeedback, m as listenToKeydown, o as attachPreparedScreenshots, p as listenOnPageAndWidget, r as useFloatingPosition, s as createFeedbackTransport, t as ElementPicker, v as CameraIcon, w as HighlightIcon, x as ChevronDownIcon, y as ChatIcon, z as MAX_SELECTION_COMMENT_LENGTH } from "./picker-C7TkZcBE.js";
|
|
4
|
+
import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-BL0SGZEP.js";
|
|
5
5
|
import { Suspense, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { Slider } from "@base-ui/react/slider";
|
|
@@ -163,11 +163,11 @@ function useDetailsPopover() {
|
|
|
163
163
|
setOpen(false);
|
|
164
164
|
summaryRef.current?.focus();
|
|
165
165
|
};
|
|
166
|
-
|
|
166
|
+
const stopOutsidePress = listenOnPageAndWidget(detailsRef.current, "pointerdown", dismissOutside);
|
|
167
167
|
const stopListeningToKeys = listenToKeydown(detailsRef.current, dismissWithEscape, true);
|
|
168
168
|
window.addEventListener("resize", reposition);
|
|
169
169
|
return () => {
|
|
170
|
-
|
|
170
|
+
stopOutsidePress();
|
|
171
171
|
stopListeningToKeys();
|
|
172
172
|
window.removeEventListener("resize", reposition);
|
|
173
173
|
};
|
|
@@ -1416,7 +1416,8 @@ function useWidgetConfig(props) {
|
|
|
1416
1416
|
]),
|
|
1417
1417
|
dismissalKey: `reflet-feedback-dismissed:${publicKey ?? "default"}:${user?.id ?? "anonymous"}`,
|
|
1418
1418
|
dismissForDays: dismissalDuration(props.dismissForDays),
|
|
1419
|
-
isAnonymous: !(user || userToken)
|
|
1419
|
+
isAnonymous: !(user || userToken),
|
|
1420
|
+
publicKey: publicKey ?? null
|
|
1420
1421
|
};
|
|
1421
1422
|
}
|
|
1422
1423
|
//#endregion
|
|
@@ -1429,8 +1430,13 @@ const RESIZE_DEBOUNCE = 400;
|
|
|
1429
1430
|
* page context describing what the reporter currently sees.
|
|
1430
1431
|
*/
|
|
1431
1432
|
function useCaptureSync(enabled, refresh) {
|
|
1433
|
+
const refreshRef = useRef(refresh);
|
|
1434
|
+
useEffect(() => {
|
|
1435
|
+
refreshRef.current = refresh;
|
|
1436
|
+
});
|
|
1432
1437
|
useEffect(() => {
|
|
1433
1438
|
if (!enabled) return;
|
|
1439
|
+
const runRefresh = () => refreshRef.current();
|
|
1434
1440
|
const history = window.history;
|
|
1435
1441
|
const originalPush = history.pushState;
|
|
1436
1442
|
const originalReplace = history.replaceState;
|
|
@@ -1438,19 +1444,19 @@ function useCaptureSync(enabled, refresh) {
|
|
|
1438
1444
|
const hadOwnReplace = Object.hasOwn(history, "replaceState");
|
|
1439
1445
|
history.pushState = function pushState(data, unused, url) {
|
|
1440
1446
|
const result = originalPush.call(history, data, unused, url);
|
|
1441
|
-
|
|
1447
|
+
runRefresh();
|
|
1442
1448
|
return result;
|
|
1443
1449
|
};
|
|
1444
1450
|
history.replaceState = function replaceState(data, unused, url) {
|
|
1445
1451
|
const result = originalReplace.call(history, data, unused, url);
|
|
1446
|
-
|
|
1452
|
+
runRefresh();
|
|
1447
1453
|
return result;
|
|
1448
1454
|
};
|
|
1449
|
-
window.addEventListener("popstate",
|
|
1455
|
+
window.addEventListener("popstate", runRefresh);
|
|
1450
1456
|
let resizeTimer;
|
|
1451
1457
|
const onResize = () => {
|
|
1452
1458
|
window.clearTimeout(resizeTimer);
|
|
1453
|
-
resizeTimer = window.setTimeout(
|
|
1459
|
+
resizeTimer = window.setTimeout(runRefresh, RESIZE_DEBOUNCE);
|
|
1454
1460
|
};
|
|
1455
1461
|
window.addEventListener("resize", onResize);
|
|
1456
1462
|
return () => {
|
|
@@ -1458,11 +1464,11 @@ function useCaptureSync(enabled, refresh) {
|
|
|
1458
1464
|
else Reflect.deleteProperty(history, "pushState");
|
|
1459
1465
|
if (hadOwnReplace) history.replaceState = originalReplace;
|
|
1460
1466
|
else Reflect.deleteProperty(history, "replaceState");
|
|
1461
|
-
window.removeEventListener("popstate",
|
|
1467
|
+
window.removeEventListener("popstate", runRefresh);
|
|
1462
1468
|
window.clearTimeout(resizeTimer);
|
|
1463
1469
|
window.removeEventListener("resize", onResize);
|
|
1464
1470
|
};
|
|
1465
|
-
}, [enabled
|
|
1471
|
+
}, [enabled]);
|
|
1466
1472
|
}
|
|
1467
1473
|
//#endregion
|
|
1468
1474
|
//#region src/feedback/ui/use-widget-state.ts
|
|
@@ -1500,7 +1506,7 @@ function matchesHotkey(event, hotkey, platform = typeof navigator === "undefined
|
|
|
1500
1506
|
return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
|
|
1501
1507
|
}
|
|
1502
1508
|
function useWidgetState(props) {
|
|
1503
|
-
const { client, dismissalKey, dismissForDays, isAnonymous } = useWidgetConfig(props);
|
|
1509
|
+
const { client, dismissalKey, dismissForDays, isAnonymous, publicKey } = useWidgetConfig(props);
|
|
1504
1510
|
const [isOpen, setIsOpen] = useState(false);
|
|
1505
1511
|
const [annotationTrigger, setAnnotationTrigger] = useState(null);
|
|
1506
1512
|
const [step, setStep] = useState("compose");
|
|
@@ -1634,7 +1640,7 @@ function useWidgetState(props) {
|
|
|
1634
1640
|
setStep("compose");
|
|
1635
1641
|
return submission.submit({
|
|
1636
1642
|
context: {
|
|
1637
|
-
...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.
|
|
1643
|
+
...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.6.0" }),
|
|
1638
1644
|
consoleEvents: consoleRef.current?.events(),
|
|
1639
1645
|
metadata: props.metadata,
|
|
1640
1646
|
selections
|
|
@@ -1680,6 +1686,7 @@ function useWidgetState(props) {
|
|
|
1680
1686
|
message,
|
|
1681
1687
|
open,
|
|
1682
1688
|
pendingCapture: gallery.pendingCapture,
|
|
1689
|
+
publicKey,
|
|
1683
1690
|
removeCapture: gallery.removeCapture,
|
|
1684
1691
|
requestSubmit,
|
|
1685
1692
|
retakeCapture: gallery.retakeCapture,
|
|
@@ -2093,6 +2100,7 @@ const PICKER_STYLES = `
|
|
|
2093
2100
|
//#region src/feedback/ui/styles.ts
|
|
2094
2101
|
const WIDGET_STYLES = `
|
|
2095
2102
|
:host {
|
|
2103
|
+
pointer-events: auto;
|
|
2096
2104
|
--rf-offset: 20px;
|
|
2097
2105
|
--rf-bg: #ffffff;
|
|
2098
2106
|
--rf-bg-subtle: rgb(55 53 47 / 4%);
|
|
@@ -2281,6 +2289,7 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
|
|
|
2281
2289
|
useEffect(() => {
|
|
2282
2290
|
const host = document.createElement("div");
|
|
2283
2291
|
host.setAttribute(WIDGET_MARKER, "");
|
|
2292
|
+
stopClicksAtHost(host);
|
|
2284
2293
|
const root = host.attachShadow({ mode: "open" });
|
|
2285
2294
|
const style = document.createElement("style");
|
|
2286
2295
|
style.textContent = WIDGET_STYLES;
|
|
@@ -2306,7 +2315,7 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
|
|
|
2306
2315
|
}
|
|
2307
2316
|
//#endregion
|
|
2308
2317
|
//#region src/feedback/widget.tsx
|
|
2309
|
-
const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-
|
|
2318
|
+
const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-D_0UL_Wd.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
|
|
2310
2319
|
function RefletFeedback(props) {
|
|
2311
2320
|
const { devtools = true, enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
|
|
2312
2321
|
const labels = {
|
|
@@ -2334,25 +2343,9 @@ function RefletFeedback(props) {
|
|
|
2334
2343
|
position,
|
|
2335
2344
|
state
|
|
2336
2345
|
}),
|
|
2337
|
-
|
|
2338
|
-
capture: state.activeScreenshot.image,
|
|
2339
|
-
editor: {
|
|
2340
|
-
annotations: state.annotations,
|
|
2341
|
-
onChange: state.setAnnotations,
|
|
2342
|
-
onDone: () => state.setStep("compose"),
|
|
2343
|
-
onRetake: state.activeScreenshot.selection ? void 0 : () => {
|
|
2344
|
-
state.setStep("compose");
|
|
2345
|
-
if (state.activeScreenshot) state.retakeCapture(state.activeScreenshot.id);
|
|
2346
|
-
},
|
|
2347
|
-
trigger: state.annotationTrigger?.thumbnail
|
|
2348
|
-
},
|
|
2346
|
+
/* @__PURE__ */ jsx(WidgetAnnotation, {
|
|
2349
2347
|
labels,
|
|
2350
|
-
|
|
2351
|
-
comment: state.activeScreenshot.selection.comment ?? "",
|
|
2352
|
-
onChange: (comment) => {
|
|
2353
|
-
if (state.activeScreenshot) state.setSelectionComment(state.activeScreenshot.id, comment);
|
|
2354
|
-
}
|
|
2355
|
-
}
|
|
2348
|
+
state
|
|
2356
2349
|
}),
|
|
2357
2350
|
isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
|
|
2358
2351
|
labels,
|
|
@@ -2363,11 +2356,35 @@ function RefletFeedback(props) {
|
|
|
2363
2356
|
fallback: null,
|
|
2364
2357
|
children: /* @__PURE__ */ jsx(DevtoolsLayer, {
|
|
2365
2358
|
isWidgetOpen: showsWidget && isOpen,
|
|
2366
|
-
position
|
|
2359
|
+
position,
|
|
2360
|
+
publicKey: state.publicKey
|
|
2367
2361
|
})
|
|
2368
2362
|
})]
|
|
2369
2363
|
});
|
|
2370
2364
|
}
|
|
2365
|
+
function WidgetAnnotation({ labels, state }) {
|
|
2366
|
+
const screenshot = state.activeScreenshot;
|
|
2367
|
+
if (!(state.isOpen && state.step === "annotate" && screenshot !== null && screenshot)) return null;
|
|
2368
|
+
const retake = () => {
|
|
2369
|
+
state.setStep("compose");
|
|
2370
|
+
state.retakeCapture(screenshot.id);
|
|
2371
|
+
};
|
|
2372
|
+
return /* @__PURE__ */ jsx(Annotator, {
|
|
2373
|
+
capture: screenshot.image,
|
|
2374
|
+
editor: {
|
|
2375
|
+
annotations: state.annotations,
|
|
2376
|
+
onChange: state.setAnnotations,
|
|
2377
|
+
onDone: () => state.setStep("compose"),
|
|
2378
|
+
onRetake: screenshot.selection ? void 0 : retake,
|
|
2379
|
+
trigger: state.annotationTrigger?.thumbnail
|
|
2380
|
+
},
|
|
2381
|
+
labels,
|
|
2382
|
+
note: screenshot.selection && {
|
|
2383
|
+
comment: screenshot.selection.comment ?? "",
|
|
2384
|
+
onChange: (comment) => state.setSelectionComment(screenshot.id, comment)
|
|
2385
|
+
}
|
|
2386
|
+
});
|
|
2387
|
+
}
|
|
2371
2388
|
//#endregion
|
|
2372
2389
|
export { RefletFeedback, buildElementSelection, captureViewport, collectPageContext, releaseCapture };
|
|
2373
2390
|
|