reflet-sdk 0.5.0 → 0.5.1

package/dist/feedback.d.ts.map

@@ -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;;UAce;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;;;;UC6De;;EAEf,UAAU;EACV;EACA;;EAEA;;;;;;;;;;wBA2GoB,gBACpB,UAAS,iBACR,QAAQ;wBAiDK,eAAe,OAAO;;;;wBCjHtB,sBAAsB,SAAS,UAAU;;;;wBCjMzC,mBAAmB;EACjC;IACE;;;wBCvEY,eAAe,OAAO,sCAAmB,IAAA"}
+{"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;;;wBCvEY,eAAe,OAAO,sCAAmB,IAAA"}

package/dist/feedback.js

@@ -1,6 +1,6 @@
 "use client";
 import { n as Reflet } from "./client-BWEBWk1k.js";
-import { A as TrashIcon, C as MoreIcon, E as SquareIcon, F as SDK_VERSION, G as capturedFromCanvas, I as collectPageContext, K as releaseCapture, L as MAX_SELECTION_COMMENT_LENGTH, M as isDegenerate, N as normalizeRect, O as TargetIcon, P as DEFAULT_WIDGET_LABELS, R as buildElementSelection, S as HighlightIcon, T as SpotlightIcon, U as WIDGET_MARKER, W as captureViewport, _ as ChatIcon, b as CloseIcon, d as SelectionOutline, f as drawAnnotations, g as CameraIcon, h as BlurIcon, j as UndoIcon, k as TextIcon, l as submitWidgetFeedback, m as ArrowIcon, o as attachPreparedScreenshots, p as listenToKeydown, r as useFloatingPosition, s as createFeedbackTransport, t as ElementPicker, v as CheckIcon, w as PencilIcon, x as GripIcon, y as ChevronDownIcon } from "./picker-DDDpVcfr.js";
+import { A as TrashIcon, C as MoreIcon, E as SquareIcon, F as SDK_VERSION, I as collectPageContext, K as releaseCapture, L as MAX_SELECTION_COMMENT_LENGTH, M as isDegenerate, N as normalizeRect, O as TargetIcon, P as DEFAULT_WIDGET_LABELS, R as buildElementSelection, S as HighlightIcon, T as SpotlightIcon, U as WIDGET_MARKER, W as captureViewport, _ as ChatIcon, b as CloseIcon, d as SelectionOutline, f as drawAnnotations, g as CameraIcon, h as BlurIcon, j as UndoIcon, k as TextIcon, l as submitWidgetFeedback, m as ArrowIcon, o as attachPreparedScreenshots, p as listenToKeydown, r as useFloatingPosition, s as createFeedbackTransport, t as ElementPicker, v as CheckIcon, w as PencilIcon, x as GripIcon, y as ChevronDownIcon } from "./picker-DFfC1uIY.js";
 import { n as RefletContext, t as REFLET_Z_INDEX } from "./z-index-CKxBgZTG.js";
 import { Suspense, lazy, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -743,45 +743,8 @@ function CaptureSlot({ labels, state }) {
 }
 //#endregion
 //#region src/feedback/core/element-capture.ts
-const MIN_CONTEXT_PADDING = 24;
-const MAX_CONTEXT_WIDTH = 2e3;
-const CLOSE_UP_MAX_WIDTH = 1200;
 const SELECTION_COLOR = "#4f46e5";
 const SELECTION_ANNOTATION_PREFIX = "selection-";
-const OUTLINE_COLOR = "#4f46e5";
-const OUTLINE_GLOW = "#ffffff";
-const OUTLINE_WIDTH = 3;
-const GLOW_WIDTH = 6;
-const DIM_OVERLAY = "rgba(15, 23, 42, 0.45)";
-/**
-* Tightest ancestor that keeps some breathing room around the pick — the zoom
-* stays zoomed instead of growing to a giant section. Only when nothing up
-* the tree clears the minimum does the widest candidate below the cap win.
-*/
-function contextRootFor(element) {
-	const target = element.getBoundingClientRect();
-	const coversAtLeast = (box, margin) => box.left <= target.left - margin && box.right >= target.right + margin && box.top <= target.top - margin && box.bottom >= target.bottom + margin;
-	let tightest = null;
-	let current = element.parentElement;
-	while (current && current !== document.documentElement) {
-		const box = current.getBoundingClientRect();
-		if (coversAtLeast(box, MIN_CONTEXT_PADDING)) return current;
-		tightest ??= box.width < MAX_CONTEXT_WIDTH ? current : null;
-		current = current.parentElement;
-	}
-	return tightest ?? element;
-}
-/** Where the picked element sits inside the context shot, in image pixels. */
-function closeUpGeometry(params) {
-	const scale = params.rootRect.width > 0 ? params.capture.width / params.rootRect.width : 1;
-	return {
-		height: Math.round(params.elementRect.height * scale),
-		scale,
-		width: Math.round(params.elementRect.width * scale),
-		x: Math.round((params.elementRect.left - params.rootRect.left) * scale),
-		y: Math.round((params.elementRect.top - params.rootRect.top) * scale)
-	};
-}
 function isSelectionAnnotation({ id }) {
 	return id.startsWith(SELECTION_ANNOTATION_PREFIX);
 }
@@ -802,70 +765,6 @@ function highlightFor(selection, capture) {
 		tool: "rectangle"
 	};
 }
-function drawZoneOverlay(context, zone) {
-	context.save();
-	context.fillStyle = DIM_OVERLAY;
-	context.beginPath();
-	context.rect(0, 0, context.canvas.width, context.canvas.height);
-	context.rect(zone.x, zone.y, zone.width, zone.height);
-	context.fill("evenodd");
-	for (const [color, width] of [[OUTLINE_GLOW, GLOW_WIDTH], [OUTLINE_COLOR, OUTLINE_WIDTH]]) {
-		context.strokeStyle = color;
-		context.lineWidth = width * zone.scale;
-		context.strokeRect(zone.x, zone.y, zone.width, zone.height);
-	}
-	context.restore();
-}
-function drawCloseUp(capture, zone) {
-	return new Promise((resolve) => {
-		const canvas = document.createElement("canvas");
-		canvas.width = capture.width;
-		canvas.height = capture.height;
-		const context = canvas.getContext("2d");
-		const image = new Image();
-		image.onload = () => {
-			if (!context) {
-				resolve(null);
-				return;
-			}
-			context.drawImage(image, 0, 0, capture.width, capture.height);
-			drawZoneOverlay(context, zone);
-			resolve(capturedFromCanvas(canvas, CLOSE_UP_MAX_WIDTH));
-		};
-		image.onerror = () => resolve(null);
-		image.src = capture.objectUrl;
-	});
-}
-/**
-* Zoomed view of the picked zone: the surrounding area captured for context,
-* everything outside the selection dimmed and the zone framed with a glowing
-* outline — unambiguous to eyes and vision models alike.
-* Falls back to the plain context shot when the overlay cannot be drawn.
-*/
-async function captureElementCloseUp(element) {
-	try {
-		const root = contextRootFor(element);
-		const rootRect = root.getBoundingClientRect();
-		const elementRect = element.getBoundingClientRect();
-		const capture = await captureViewport({
-			element: root,
-			maxWidth: CLOSE_UP_MAX_WIDTH
-		});
-		if (!capture || root === element) return capture;
-		const outlined = await drawCloseUp(capture, closeUpGeometry({
-			capture,
-			elementRect,
-			rootRect
-		}));
-		if (outlined) {
-			releaseCapture(capture);
-			return outlined;
-		}
-		return capture;
-	} catch {
-		return null;
-	}
-}
 //#endregion
 //#region src/feedback/ui/annotation/screenshot-preview.tsx
 function ScreenshotPreview({ annotations, capture }) {
@@ -1372,7 +1271,6 @@ function useFeedbackSubmission(options) {
 //#region src/feedback/ui/state/use-screenshot-drafts.ts
 function releaseDraft(draft) {
 	releaseCapture(draft?.image);
-	releaseCapture(draft?.closeUp);
 }
 function useScreenshotDrafts(captureFailed, onError) {
 	const [screenshots, setScreenshots] = useState([]);
@@ -1474,9 +1372,12 @@ function useScreenshotDrafts(captureFailed, onError) {
 			}
 		} : item));
 	}, []);
+	const activeScreenshot = screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null;
+	const firstCapture = pendingCapture ?? screenshots[0];
 	return {
-		activeScreenshot: screenshots.find(({ id }) => id === activeId) ?? screenshots.at(-1) ?? null,
+		activeScreenshot,
 		cancelPendingCapture,
+		canRefreshAutomatically: screenshots.length <= 1 && firstCapture?.source === "automatic" && (activeScreenshot?.annotations.length ?? 0) === 0 && !screenshots.some((draft) => draft.selection),
 		pendingCapture,
 		refreshAutomatic,
 		removeCapture,
@@ -1645,9 +1546,7 @@ function useWidgetState(props) {
 		partialUploadMessage: props.labels?.attachmentUploadFailed ?? DEFAULT_WIDGET_LABELS.attachmentUploadFailed
 	});
 	const { resetSubmission } = submission;
-	const firstCapture = gallery.pendingCapture ?? gallery.screenshots[0];
-	const canRefreshAutomatically = gallery.screenshots.length <= 1 && firstCapture?.source === "automatic";
-	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && canRefreshAutomatically && annotations.length === 0 && !gallery.screenshots.some((draft) => draft.selection) && props.captureOnOpen !== false, refreshAutomatic);
+	useCaptureSync(isOpen && !submission.isEditingDisabled && step === "compose" && gallery.canRefreshAutomatically && props.captureOnOpen !== false, refreshAutomatic);
 	const reset = useCallback(() => {
 		if (successTimer.current) clearTimeout(successTimer.current);
 		setAnnotationTrigger(null);
@@ -1700,21 +1599,18 @@ function useWidgetState(props) {
 		setStep("compose");
 		const pick = ++pickRef.current;
 		const context = collectPageContext({ sdkVersion: SDK_VERSION });
-		const [fresh, closeUp] = await Promise.all([captureViewport().catch(() => null), captureElementCloseUp(element).catch(() => null)]);
+		const fresh = await captureViewport().catch(() => null);
 		if (pickRef.current !== pick) {
 			releaseCapture(fresh);
-			releaseCapture(closeUp);
 			return;
 		}
 		setIsElementCapturing(false);
 		if (!fresh) {
-			releaseCapture(closeUp);
 			setError(captureFailed);
 			return;
 		}
 		storeScreenshot({
 			annotations: [highlightFor(picked, fresh)],
-			closeUp,
 			context,
 			id: crypto.randomUUID(),
 			image: fresh,
@@ -1738,7 +1634,7 @@ function useWidgetState(props) {
 		setStep("compose");
 		return submission.submit({
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.5.0" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.5.1" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
 				selections
@@ -2410,7 +2306,7 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
 }
 //#endregion
 //#region src/feedback/widget.tsx
-const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-BYGuFmhg.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
+const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-EyK7n9w3.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 = {