reflet-sdk 0.6.3 → 0.6.5

package/dist/{picker-Rh-hsxyX.js → submit-MvVjNdYc.js}

@@ -172,6 +172,14 @@ function buildSnapdomOptions(options) {
 		reconcile: true
 	};
 }
+/** snapdom's `clip: "viewport"` box, same fallbacks: the layout viewport minus classic (Windows, Linux) scrollbars. */
+function capturedViewportSize() {
+	const root = document.documentElement;
+	return {
+		height: root.clientHeight || window.innerHeight,
+		width: root.clientWidth || window.innerWidth
+	};
+}
 function fitWithin(size, maxWidth) {
 	if (size.width <= maxWidth) return {
 		height: size.height,
@@ -809,7 +817,7 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-const SDK_VERSION = "0.6.3";
+const SDK_VERSION = "0.6.5";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
 	attachElement: "Attach this element",
@@ -835,6 +843,7 @@ const DEFAULT_WIDGET_LABELS = {
 	minimize: "Minimize feedback",
 	moreOptions: "More options",
 	moveFeedback: "Move feedback",
+	openScreenshot: "Open screenshot",
 	pickAnother: "Pick another",
 	pickElement: "Point at an element",
 	pickElementHint: "Pick the element you are talking about",
@@ -1038,6 +1047,46 @@ function BlurIcon() {
 	}), /* @__PURE__ */ jsx("path", { d: "M8 8h8v8H8z" })] });
 }
 //#endregion
+//#region src/feedback/ui/keyboard.ts
+const APPLE_PLATFORM = /Mac|iPhone|iPad/;
+const LATIN_LETTER_OR_DIGIT = /^[a-z0-9]$/i;
+const LETTER = /^[a-z]$/;
+const DIGIT = /^\d$/;
+const IME_PROCESSING_KEY_CODE = 229;
+function isApplePlatform(platform = typeof navigator === "undefined" ? "" : navigator.platform) {
+	return APPLE_PLATFORM.test(platform);
+}
+function physicalCodeFor(key) {
+	if (LETTER.test(key)) return `Key${key.toUpperCase()}`;
+	return DIGIT.test(key) ? `Digit${key}` : null;
+}
+/**
+* ⌥F types "ƒ" on macOS and Ctrl+C types "с" on a Cyrillic layout: when the
+* layout produced no Latin character, the physical key is what was meant.
+*/
+function pressesKey(event, key) {
+	if (event.key.toLowerCase() === key) return true;
+	return !LATIN_LETTER_OR_DIGIT.test(event.key) && event.code !== "" && event.code === physicalCodeFor(key);
+}
+function matchesHotkey(event, hotkey, platform) {
+	const parts = hotkey.toLowerCase().split("+").map((part) => part.trim());
+	const key = parts.at(-1);
+	if (!(key && pressesKey(event, key))) return false;
+	const isApple = isApplePlatform(platform);
+	const wantsMod = parts.includes("mod");
+	const expected = {
+		alt: parts.includes("alt") || parts.includes("option"),
+		ctrl: parts.includes("ctrl") || wantsMod && !isApple,
+		meta: parts.includes("meta") || parts.includes("cmd") || wantsMod && isApple,
+		shift: parts.includes("shift")
+	};
+	return event.altKey === expected.alt && event.ctrlKey === expected.ctrl && event.metaKey === expected.meta && event.shiftKey === expected.shift;
+}
+/** Enter that sends, not the Enter that confirms an IME composition (Japanese, Chinese, Korean input). */
+function isSubmitEnter(event) {
+	return event.key === "Enter" && !event.shiftKey && !event.isComposing && event.keyCode !== IME_PROCESSING_KEY_CODE;
+}
+//#endregion
 //#region src/feedback/ui/widget-events.ts
 const REPLAYED_EVENTS = [
 	"keydown",
@@ -1510,104 +1559,6 @@ function useFloatingPosition(corner = "bottom-right", isPanelOpen = false, { anc
 	};
 }
 //#endregion
-//#region src/feedback/core/submission/upload-screenshots.ts
-async function uploadImage(transport, image) {
-	const { uploadUrl } = await transport.getScreenshotUploadUrl();
-	return transport.uploadImage(uploadUrl, image);
-}
-async function prepareScreenshot(transport, screenshot, index) {
-	const { image, annotations, context } = screenshot;
-	const annotated = annotations.length > 0 ? await renderAnnotatedImage(image, annotations) : null;
-	if (annotations.length > 0 && !annotated) throw new Error("Could not render your annotations. Please try again.");
-	try {
-		const storageId = await uploadImage(transport, image);
-		return {
-			annotatedStorageId: annotated ? await uploadImage(transport, annotated) : void 0,
-			annotations: annotations.length > 0 ? toWireAnnotations(annotations) : void 0,
-			captureSource: "widget",
-			filename: `screenshot-${index + 1}.png`,
-			height: image.height,
-			mimeType: image.mimeType,
-			pageUrl: context.url,
-			size: image.blob.size,
-			storageId,
-			width: image.width
-		};
-	} finally {
-		releaseCapture(annotated);
-	}
-}
-async function uploadScreenshots(transport, submission) {
-	return (await Promise.allSettled(submission.screenshots.map((screenshot, index) => prepareScreenshot(transport, screenshot, index)))).map((result) => {
-		if (result.status === "rejected") throw result.reason;
-		return result.value;
-	});
-}
-//#endregion
-//#region src/feedback/core/submit.ts
-const MAX_TITLE_LENGTH = 100;
-const NEWLINE = /\r?\n/;
-function deriveTitle(message) {
-	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
-	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
-	const clipped = firstLine.slice(0, 99);
-	const lastSpace = clipped.lastIndexOf(" ");
-	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
-}
-function buildDescription(params) {
-	const { email, isAnonymous, message } = params;
-	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
-	return `${message.trim()}${contact}`;
-}
-async function attachPreparedScreenshots(transport, result) {
-	const results = await Promise.allSettled(result.pendingScreenshots.map((screenshot) => transport.saveScreenshot({
-		...screenshot,
-		feedbackId: result.feedbackId
-	})));
-	const pendingScreenshots = result.pendingScreenshots.filter((_, index) => results[index]?.status === "rejected");
-	return {
-		feedbackId: result.feedbackId,
-		pendingScreenshots
-	};
-}
-async function createReportWithScreenshots(transport, submission, pendingScreenshots) {
-	const { feedbackId } = await transport.create({
-		context: submission.context,
-		description: buildDescription(submission),
-		title: deriveTitle(submission.message)
-	});
-	return attachPreparedScreenshots(transport, {
-		feedbackId,
-		pendingScreenshots
-	});
-}
-async function submitWidgetFeedback(transport, submission) {
-	if (!deriveTitle(submission.message)) throw new Error("Please describe your feedback before sending it.");
-	return createReportWithScreenshots(transport, submission, await uploadScreenshots(transport, submission));
-}
-function isStorageResponse(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
-}
-async function uploadImageBlob(uploadUrl, image) {
-	const response = await fetch(uploadUrl, {
-		body: image.blob,
-		headers: { "Content-Type": image.mimeType },
-		method: "POST"
-	});
-	if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
-	const payload = await response.json();
-	if (!isStorageResponse(payload)) throw new Error("Screenshot upload returned no storage id");
-	return payload.storageId;
-}
-function createFeedbackTransport(client) {
-	return {
-		create: (params) => client.create(params),
-		getScreenshotUploadUrl: () => client.getScreenshotUploadUrl(),
-		saveScreenshot: (params) => client.saveScreenshot(params),
-		uploadImage: uploadImageBlob
-	};
-}
-//#endregion
 //#region src/feedback/ui/floating/element-walk.ts
 const ARROW_SIBLING = {
 	ArrowLeft: "previousElementSibling",
@@ -1721,7 +1672,6 @@ function labelTop(rect, view) {
 	if (below + LABEL_HEIGHT <= view.top + view.height) return below;
 	return Math.max(rect.top, view.top) + LABEL_GAP;
 }
-const APPLE_PLATFORM = /Mac|iPhone|iPad/;
 function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 	const [target, setTarget] = useState(null);
 	const [pinned, setPinned] = useState(null);
@@ -1781,7 +1731,8 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 		const onPointerUp = (event) => {
 			if (startsInWidget(event)) return;
 			swallow(event);
-			if (pinnedRef.current) return;
+			const isPrimaryPress = event.button === 0;
+			if (pinnedRef.current || !isPrimaryPress) return;
 			const element = elementUnder(event.clientX, event.clientY);
 			if (element) pin(element, event.shiftKey);
 		};
@@ -1805,12 +1756,13 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 		};
 		const copyAimed = (event) => {
 			const aimed = aimRef.current;
-			if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c" && copy && aimed)) return false;
+			if (!(copy && aimed && matchesHotkey(event, "mod+c"))) return false;
 			swallow(event);
 			copy.onCopy(aimed, "");
 			return true;
 		};
 		const onKeyDown = (event) => {
+			if (event.isComposing) return;
 			if (event.key === "Escape") {
 				swallow(event);
 				onEscape();
@@ -1842,6 +1794,7 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 		window.addEventListener("mousedown", swallow, true);
 		window.addEventListener("mouseup", swallow, true);
 		window.addEventListener("click", swallow, true);
+		window.addEventListener("contextmenu", swallow, true);
 		const stopListeningToKeys = listenToKeydown(pickerRef.current, onKeyDown, true);
 		window.addEventListener("scroll", onScroll, {
 			capture: true,
@@ -1856,6 +1809,7 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 			window.removeEventListener("mousedown", swallow, true);
 			window.removeEventListener("mouseup", swallow, true);
 			window.removeEventListener("click", swallow, true);
+			window.removeEventListener("contextmenu", swallow, true);
 			stopListeningToKeys();
 			window.removeEventListener("scroll", onScroll, true);
 			document.body.style.cursor = previousCursor;
@@ -1902,10 +1856,11 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 						maxLength: MAX_SELECTION_COMMENT_LENGTH,
 						onChange: (event) => setNote(event.target.value),
 						onKeyDown: (event) => {
-							if (event.key === "Enter" && !event.shiftKey) {
-								event.preventDefault();
-								onPick(pinned.element, note.trim());
-							}
+							if (!isSubmitEnter(event.nativeEvent)) return;
+							event.preventDefault();
+							const trimmedNote = note.trim();
+							if (copy && !trimmedNote) copy.onCopy(pinned.element, "");
+							else onPick(pinned.element, trimmedNote);
 						},
 						placeholder: labels.elementNotePlaceholder,
 						ref: noteRef,
@@ -1956,7 +1911,7 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 						/* @__PURE__ */ jsx("kbd", { children: "Tab" }),
 						/* @__PURE__ */ jsx("kbd", { children: "Enter" }),
 						inspect && /* @__PURE__ */ jsx("kbd", { children: "⇧ Click" }),
-						copy && /* @__PURE__ */ jsx("kbd", { children: APPLE_PLATFORM.test(navigator.userAgent) ? "⌘C" : "Ctrl C" }),
+						copy && /* @__PURE__ */ jsx("kbd", { children: isApplePlatform() ? "⌘C" : "Ctrl C" }),
 						/* @__PURE__ */ jsx("kbd", { children: "Esc" })
 					]
 				}), /* @__PURE__ */ jsx("button", {
@@ -1970,6 +1925,104 @@ function ElementPicker({ copy, inspect, labels, onCancel, onPick }) {
 	});
 }
 //#endregion
-export { TargetIcon as A, buildElementSelection as B, GripIcon as C, SpotlightIcon as D, PencilIcon as E, normalizeRect as F, WIDGET_MARKER as G, getFiberFromNode as H, DEFAULT_WIDGET_LABELS as I, releaseCapture as J, captureViewport as K, SDK_VERSION as L, TrashIcon as M, UndoIcon as N, SquareIcon as O, isDegenerate as P, collectPageContext as R, CloseIcon as S, MoreIcon as T, resolveComponentStack as U, describeElement as V, shortenSourcePath as W, BlurIcon as _, deriveTitle as a, CheckIcon as b, useFloatingPosition as c, SelectionOutline as d, drawAnnotations as f, ArrowIcon as g, stopClicksAtHost as h, createFeedbackTransport as i, TextIcon as j, Svg as k, onViewportChange as l, listenToKeydown as m, isWidgetOwned as n, submitWidgetFeedback as o, listenOnPageAndWidget as p, capturedFromCanvas as q, attachPreparedScreenshots as r, uploadImageBlob as s, ElementPicker as t, visibleViewport as u, CameraIcon as v, HighlightIcon as w, ChevronDownIcon as x, ChatIcon as y, MAX_SELECTION_COMMENT_LENGTH as z };
+//#region src/feedback/core/submission/upload-screenshots.ts
+async function uploadImage(transport, image) {
+	const { uploadUrl } = await transport.getScreenshotUploadUrl();
+	return transport.uploadImage(uploadUrl, image);
+}
+async function prepareScreenshot(transport, screenshot, index) {
+	const { image, annotations, context } = screenshot;
+	const annotated = annotations.length > 0 ? await renderAnnotatedImage(image, annotations) : null;
+	if (annotations.length > 0 && !annotated) throw new Error("Could not render your annotations. Please try again.");
+	try {
+		const storageId = await uploadImage(transport, image);
+		return {
+			annotatedStorageId: annotated ? await uploadImage(transport, annotated) : void 0,
+			annotations: annotations.length > 0 ? toWireAnnotations(annotations) : void 0,
+			captureSource: "widget",
+			filename: `screenshot-${index + 1}.png`,
+			height: image.height,
+			mimeType: image.mimeType,
+			pageUrl: context.url,
+			size: image.blob.size,
+			storageId,
+			width: image.width
+		};
+	} finally {
+		releaseCapture(annotated);
+	}
+}
+async function uploadScreenshots(transport, submission) {
+	return (await Promise.allSettled(submission.screenshots.map((screenshot, index) => prepareScreenshot(transport, screenshot, index)))).map((result) => {
+		if (result.status === "rejected") throw result.reason;
+		return result.value;
+	});
+}
+//#endregion
+//#region src/feedback/core/submit.ts
+const MAX_TITLE_LENGTH = 100;
+const NEWLINE = /\r?\n/;
+function deriveTitle(message) {
+	const firstLine = message.split(NEWLINE).map((line) => line.trim()).find(Boolean) ?? "";
+	if (firstLine.length <= MAX_TITLE_LENGTH) return firstLine;
+	const clipped = firstLine.slice(0, 99);
+	const lastSpace = clipped.lastIndexOf(" ");
+	return `${(lastSpace > 0 ? clipped.slice(0, lastSpace) : clipped).trimEnd()}…`;
+}
+function buildDescription(params) {
+	const { email, isAnonymous, message } = params;
+	const contact = isAnonymous && email ? `\n\n---\nContact: ${email}` : "";
+	return `${message.trim()}${contact}`;
+}
+async function attachPreparedScreenshots(transport, result) {
+	const results = await Promise.allSettled(result.pendingScreenshots.map((screenshot) => transport.saveScreenshot({
+		...screenshot,
+		feedbackId: result.feedbackId
+	})));
+	const pendingScreenshots = result.pendingScreenshots.filter((_, index) => results[index]?.status === "rejected");
+	return {
+		feedbackId: result.feedbackId,
+		pendingScreenshots
+	};
+}
+async function createReportWithScreenshots(transport, submission, pendingScreenshots) {
+	const { feedbackId } = await transport.create({
+		context: submission.context,
+		description: buildDescription(submission),
+		title: deriveTitle(submission.message)
+	});
+	return attachPreparedScreenshots(transport, {
+		feedbackId,
+		pendingScreenshots
+	});
+}
+async function submitWidgetFeedback(transport, submission) {
+	if (!deriveTitle(submission.message)) throw new Error("Please describe your feedback before sending it.");
+	return createReportWithScreenshots(transport, submission, await uploadScreenshots(transport, submission));
+}
+function isStorageResponse(value) {
+	return typeof value === "object" && value !== null && typeof Reflect.get(value, "storageId") === "string";
+}
+async function uploadImageBlob(uploadUrl, image) {
+	const response = await fetch(uploadUrl, {
+		body: image.blob,
+		headers: { "Content-Type": image.mimeType },
+		method: "POST"
+	});
+	if (!response.ok) throw new Error(`Screenshot upload failed (${response.status})`);
+	const payload = await response.json();
+	if (!isStorageResponse(payload)) throw new Error("Screenshot upload returned no storage id");
+	return payload.storageId;
+}
+function createFeedbackTransport(client) {
+	return {
+		create: (params) => client.create(params),
+		getScreenshotUploadUrl: () => client.getScreenshotUploadUrl(),
+		saveScreenshot: (params) => client.saveScreenshot(params),
+		uploadImage: uploadImageBlob
+	};
+}
+//#endregion
+export { SquareIcon as A, collectPageContext as B, ChevronDownIcon as C, MoreIcon as D, HighlightIcon as E, UndoIcon as F, resolveComponentStack as G, buildElementSelection as H, isDegenerate as I, captureViewport as J, shortenSourcePath as K, normalizeRect as L, TargetIcon as M, TextIcon as N, PencilIcon as O, TrashIcon as P, DEFAULT_WIDGET_LABELS as R, CheckIcon as S, GripIcon as T, describeElement as U, MAX_SELECTION_COMMENT_LENGTH as V, getFiberFromNode as W, capturedViewportSize as X, capturedFromCanvas as Y, releaseCapture as Z, matchesHotkey as _, uploadImageBlob as a, CameraIcon as b, useFloatingPosition as c, SelectionOutline as d, drawAnnotations as f, isSubmitEnter as g, stopClicksAtHost as h, submitWidgetFeedback as i, Svg as j, SpotlightIcon as k, onViewportChange as l, listenToKeydown as m, createFeedbackTransport as n, ElementPicker as o, listenOnPageAndWidget as p, WIDGET_MARKER as q, deriveTitle as r, isWidgetOwned as s, attachPreparedScreenshots as t, visibleViewport as u, ArrowIcon as v, CloseIcon as w, ChatIcon as x, BlurIcon as y, SDK_VERSION as z };
 
-//# sourceMappingURL=picker-Rh-hsxyX.js.map
+//# sourceMappingURL=submit-MvVjNdYc.js.map