reflet-sdk 0.6.2 → 0.6.3

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

@@ -809,7 +809,7 @@ function collectPageContext(options) {
 }
 //#endregion
 //#region src/feedback/types.ts
-const SDK_VERSION = "0.6.2";
+const SDK_VERSION = "0.6.3";
 const DEFAULT_WIDGET_LABELS = {
 	annotateHint: "Draw on the screenshot to point at the problem.",
 	attachElement: "Attach this element",
@@ -1665,7 +1665,6 @@ function stepAim(from, key, backwards) {
 //#region src/feedback/ui/picker.tsx
 const LABEL_HEIGHT = 24;
 const LABEL_GAP = 6;
-const NOTE_WIDTH = 300;
 const NOTE_GAP = 10;
 const EDGE_GAP = 12;
 function elementUnder(x, y) {
@@ -1682,35 +1681,69 @@ function describeTarget(element) {
 		region: describeRegion(element)
 	};
 }
-/**
-* Pins the note card to the element: below it, flipped above when the visible
-* viewport — what is left of the screen once a mobile keyboard is up — has no
-* room there. Measures against the part of the element actually on screen, so
-* picking a full-height section still leaves the card in view.
-*/
-function noteStyle(rect, view) {
-	const left = Math.min(Math.max(view.left + EDGE_GAP, rect.left), Math.max(view.left + EDGE_GAP, view.left + view.width - NOTE_WIDTH - EDGE_GAP));
-	const visibleTop = Math.max(rect.top, view.top + EDGE_GAP);
-	const visibleBottom = Math.min(rect.bottom, view.top + view.height - EDGE_GAP);
-	if (view.top + view.height - visibleBottom > visibleTop - view.top) return {
+function noteCardPosition(rect, view, card) {
+	const viewLeft = view.left + EDGE_GAP;
+	const viewRight = view.left + view.width - EDGE_GAP;
+	const viewTop = view.top + EDGE_GAP;
+	const viewBottom = view.top + view.height - EDGE_GAP;
+	const fitLeft = (left) => Math.max(viewLeft, Math.min(left, viewRight - card.width));
+	const fitTop = (top) => Math.max(viewTop, Math.min(top, viewBottom - card.height));
+	const below = rect.bottom + NOTE_GAP;
+	if (below >= viewTop && below + card.height <= viewBottom) return {
+		left: fitLeft(rect.left),
+		top: below
+	};
+	const above = rect.top - NOTE_GAP - card.height;
+	if (above >= viewTop && rect.top <= viewBottom) return {
+		left: fitLeft(rect.left),
+		top: above
+	};
+	const besideTop = fitTop(rect.top);
+	const right = rect.right + NOTE_GAP;
+	if (right + card.width <= viewRight) return {
+		left: right,
+		top: besideTop
+	};
+	const left = rect.left - NOTE_GAP - card.width;
+	if (left >= viewLeft) return {
 		left,
-		top: visibleBottom + NOTE_GAP
+		top: besideTop
 	};
 	return {
-		bottom: window.innerHeight - visibleTop + NOTE_GAP,
-		left
+		left: fitLeft(rect.left),
+		top: fitTop(Math.min(rect.bottom, viewBottom) - card.height)
 	};
 }
-function ElementPicker({ inspect, labels, onCancel, onPick }) {
+function labelTop(rect, view) {
+	const above = rect.top - LABEL_HEIGHT - LABEL_GAP;
+	if (above >= view.top) return above;
+	const below = rect.bottom + LABEL_GAP;
+	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);
 	const [note, setNote] = useState("");
+	const [noteSize, setNoteSize] = useState({
+		height: 0,
+		width: 0
+	});
 	const pickerRef = useRef(null);
+	const noteCardRef = useRef(null);
 	const noteRef = useRef(null);
 	const pinnedRef = useRef(false);
 	const [view, setView] = useState(visibleViewport);
 	const aimRef = useRef(null);
 	useEffect(() => onViewportChange(() => setView(visibleViewport())), []);
+	useLayoutEffect(() => {
+		const card = noteCardRef.current;
+		if (pinned && card) setNoteSize({
+			height: card.offsetHeight,
+			width: card.offsetWidth
+		});
+	}, [pinned]);
 	useEffect(() => {
 		pinnedRef.current = pinned !== null;
 		if (pinned) noteRef.current?.focus({ preventScroll: true });
@@ -1770,13 +1803,20 @@ function ElementPicker({ inspect, labels, onCancel, onPick }) {
 			}
 			onCancel();
 		};
+		const copyAimed = (event) => {
+			const aimed = aimRef.current;
+			if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c" && copy && aimed)) return false;
+			swallow(event);
+			copy.onCopy(aimed, "");
+			return true;
+		};
 		const onKeyDown = (event) => {
 			if (event.key === "Escape") {
 				swallow(event);
 				onEscape();
 				return;
 			}
-			if (pinnedRef.current || startsInWidget(event)) return;
+			if (pinnedRef.current || startsInWidget(event) || copyAimed(event)) return;
 			if (event.key === "Enter") {
 				swallow(event);
 				if (aimRef.current) pin(aimRef.current, event.shiftKey);
@@ -1820,10 +1860,14 @@ function ElementPicker({ inspect, labels, onCancel, onPick }) {
 			window.removeEventListener("scroll", onScroll, true);
 			document.body.style.cursor = previousCursor;
 		};
-	}, [inspect, onCancel]);
+	}, [
+		copy,
+		inspect,
+		onCancel
+	]);
 	const rect = (pinned ?? target)?.rect;
-	const labelAbove = rect ? rect.top > 30 : true;
 	return /* @__PURE__ */ jsxs("div", {
+		className: "picker",
 		ref: pickerRef,
 		children: [
 			rect && /* @__PURE__ */ jsx("div", {
@@ -1837,7 +1881,7 @@ function ElementPicker({ inspect, labels, onCancel, onPick }) {
 			}),
 			rect && target && !pinned && /* @__PURE__ */ jsxs("div", {
 				className: "picker-label",
-				style: { translate: `${Math.max(4, rect.left)}px ${labelAbove ? rect.top - LABEL_HEIGHT - LABEL_GAP : rect.bottom + LABEL_GAP}px` },
+				style: { translate: `${Math.max(4, rect.left)}px ${labelTop(rect, view)}px` },
 				children: [/* @__PURE__ */ jsx("strong", { children: target.componentName ? `<${target.componentName}>` : target.label }), target.region && /* @__PURE__ */ jsx("span", { children: target.region })]
 			}),
 			pinned ? /* @__PURE__ */ jsxs("form", {
@@ -1846,7 +1890,8 @@ function ElementPicker({ inspect, labels, onCancel, onPick }) {
 					event.preventDefault();
 					onPick(pinned.element, note.trim());
 				},
-				style: noteStyle(pinned.rect, view),
+				ref: noteCardRef,
+				style: noteCardPosition(pinned.rect, view, noteSize),
 				children: [
 					/* @__PURE__ */ jsxs("p", {
 						className: "picker-note-target",
@@ -1885,6 +1930,12 @@ function ElementPicker({ inspect, labels, onCancel, onPick }) {
 								type: "button",
 								children: inspect.label
 							}),
+							copy && /* @__PURE__ */ jsx("button", {
+								className: "picker-cancel",
+								onClick: () => copy.onCopy(pinned.element, note.trim()),
+								type: "button",
+								children: copy.label
+							}),
 							/* @__PURE__ */ jsx("button", {
 								"aria-label": labels.attachElement,
 								className: "submit",
@@ -1905,6 +1956,7 @@ function ElementPicker({ 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" }),
 						/* @__PURE__ */ jsx("kbd", { children: "Esc" })
 					]
 				}), /* @__PURE__ */ jsx("button", {
@@ -1920,4 +1972,4 @@ function ElementPicker({ 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 };
 
-//# sourceMappingURL=picker-DCoAFX5y.js.map
+//# sourceMappingURL=picker-Rh-hsxyX.js.map