reflet-sdk 0.5.2 → 0.6.0

package/dist/devtools-next.js

@@ -1,4 +1,4 @@
-import { t as createDevtoolsHandler } from "./handler-CyR6Ht99.js";
+import { t as createDevtoolsHandler } from "./handler-C9tdKcl0.js";
 //#region src/devtools/server/next.ts
 /**
 * Route handlers for `app/api/reflet-devtools/[...path]/route.ts`. They answer

package/dist/devtools-vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"devtools-vite.d.ts","names":[],"sources":["../src/devtools/server/vite.ts"],"mappings":";;;;wBAiFgB,eAAe,UAAS,wBAA6B"}
+{"version":3,"file":"devtools-vite.d.ts","names":[],"sources":["../src/devtools/server/vite.ts"],"mappings":";;;;wBAyFgB,eAAe,UAAS,wBAA6B"}

package/dist/devtools-vite.js

@@ -1,5 +1,5 @@
 import { r as DEVTOOLS_ROUTE_BASE } from "./protocol-ClqTFzwR.js";
-import { n as errorResponse, t as createDevtoolsHandler } from "./handler-CyR6Ht99.js";
+import { n as isLoopbackAddress, r as errorResponse, t as createDevtoolsHandler } from "./handler-C9tdKcl0.js";
 import { loadEnv } from "vite";
 //#region src/devtools/server/vite.ts
 const MAX_BODY_BYTES = 1048576;
@@ -34,6 +34,10 @@ async function sendWebResponse(response, serverResponse) {
 	serverResponse.end(Buffer.from(await response.arrayBuffer()));
 }
 async function serveDevtoolsRequest(handler, request, serverResponse) {
+	if (!isLoopbackAddress(request.socket.remoteAddress)) {
+		await sendWebResponse(errorResponse("Reflet devtools only answers this machine.", 403), serverResponse);
+		return;
+	}
 	const method = request.method ?? "GET";
 	const body = method !== "GET" && method !== "HEAD" ? await readBody(request) : void 0;
 	if (body === null) {

package/dist/devtools-vite.js.map

@@ -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 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  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":";;;;AASA,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,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"}
+{"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.js

@@ -1,7 +1,7 @@
 "use client";
-import { n as Reflet } from "./client-BWEBWk1k.js";
-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-HLPIR-l6.js";
-import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-CKxBgZTG.js";
+import { n as Reflet } from "./client-DAdWdIFY.js";
+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";
+import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-BL0SGZEP.js";
 import { Suspense, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
@@ -1430,8 +1430,13 @@ const RESIZE_DEBOUNCE = 400;
 * page context describing what the reporter currently sees.
 */
 function useCaptureSync(enabled, refresh) {
+	const refreshRef = useRef(refresh);
+	useEffect(() => {
+		refreshRef.current = refresh;
+	});
 	useEffect(() => {
 		if (!enabled) return;
+		const runRefresh = () => refreshRef.current();
 		const history = window.history;
 		const originalPush = history.pushState;
 		const originalReplace = history.replaceState;
@@ -1439,19 +1444,19 @@ function useCaptureSync(enabled, refresh) {
 		const hadOwnReplace = Object.hasOwn(history, "replaceState");
 		history.pushState = function pushState(data, unused, url) {
 			const result = originalPush.call(history, data, unused, url);
-			refresh();
+			runRefresh();
 			return result;
 		};
 		history.replaceState = function replaceState(data, unused, url) {
 			const result = originalReplace.call(history, data, unused, url);
-			refresh();
+			runRefresh();
 			return result;
 		};
-		window.addEventListener("popstate", refresh);
+		window.addEventListener("popstate", runRefresh);
 		let resizeTimer;
 		const onResize = () => {
 			window.clearTimeout(resizeTimer);
-			resizeTimer = window.setTimeout(refresh, RESIZE_DEBOUNCE);
+			resizeTimer = window.setTimeout(runRefresh, RESIZE_DEBOUNCE);
 		};
 		window.addEventListener("resize", onResize);
 		return () => {
@@ -1459,11 +1464,11 @@ function useCaptureSync(enabled, refresh) {
 			else Reflect.deleteProperty(history, "pushState");
 			if (hadOwnReplace) history.replaceState = originalReplace;
 			else Reflect.deleteProperty(history, "replaceState");
-			window.removeEventListener("popstate", refresh);
+			window.removeEventListener("popstate", runRefresh);
 			window.clearTimeout(resizeTimer);
 			window.removeEventListener("resize", onResize);
 		};
-	}, [enabled, refresh]);
+	}, [enabled]);
 }
 //#endregion
 //#region src/feedback/ui/use-widget-state.ts
@@ -1635,7 +1640,7 @@ function useWidgetState(props) {
 		setStep("compose");
 		return submission.submit({
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.5.2" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.6.0" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
 				selections
@@ -2310,7 +2315,7 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
 }
 //#endregion
 //#region src/feedback/widget.tsx
-const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-N5ptXXK4.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
+const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-D_0UL_Wd.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
 function RefletFeedback(props) {
 	const { devtools = true, enabled = true, hotkey = null, offset = 20, position = "bottom-right", theme = "auto" } = props;
 	const labels = {