reflet-sdk 0.6.0 → 0.6.2

package/dist/feedback.d.ts

@@ -1,4 +1,5 @@
 import { c as ElementSelection, u as FeedbackContext, w as RefletUser } from "./types-DnaDEN9Y.js";
+import { ReactNode, RefObject } from "react";
 //#region src/feedback/types.d.ts
 declare const ANNOTATION_TOOLS: readonly ["pen", "arrow", "rectangle", "text", "spotlight", "highlight", "blur"];
 type AnnotationTool = (typeof ANNOTATION_TOOLS)[number];
@@ -10,7 +11,6 @@ interface Annotation {
   color: string;
   end: Point;
   id: string;
-  /** Freehand path, in image pixels. Only set for the pen tool. */
   points?: Point[];
   start: Point;
   text?: string;
@@ -20,7 +20,6 @@ interface CapturedImage {
   blob: Blob;
   height: number;
   mimeType: string;
-  /** Object URL owned by the caller — revoke it when the capture is dropped. */
   objectUrl: string;
   width: number;
 }
@@ -67,28 +66,20 @@ interface FeedbackWidgetLabels {
   trigger: string;
   undo: string;
 }
+interface FeedbackTriggerProps {
+  onClick: () => void;
+  ref: RefObject<HTMLButtonElement | null>;
+}
 interface RefletFeedbackProps {
-  /** API base URL override. Falls back to the RefletProvider value. */
   baseUrl?: string;
-  /** Record console errors and warnings to attach to bug reports. */
   captureConsole?: boolean;
-  /** Take a screenshot of the viewport as soon as the panel opens. */
   captureOnOpen?: boolean;
-  /**
-   * Dev-only tools for your team: inspect an element's code, keep notes, read
-   * the board for the current page. Never loaded outside `NODE_ENV=development`.
-   */
   devtools?: boolean;
-  /** Let reporters hide the launcher for this many days. */
   dismissForDays?: number;
-  /** Render nothing when false — lets an app gate the widget per user. */
   enabled?: boolean;
-  /** Keyboard shortcut opening the panel. Set to null to disable. */
   hotkey?: string | null;
   labels?: Partial<FeedbackWidgetLabels>;
-  /** Extra fields merged into the reported context. */
   metadata?: Record<string, string>;
-  /** Distance in px from the viewport edges. */
   offset?: number;
   onClose?: () => void;
   onDismiss?: (result: {
@@ -101,6 +92,7 @@ interface RefletFeedbackProps {
   position?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
   primaryColor?: string;
   publicKey?: string;
+  renderTrigger?: (props: FeedbackTriggerProps) => ReactNode;
   theme?: "auto" | "dark" | "light";
   user?: RefletUser;
   userToken?: string;

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;;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"}
+{"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":";;;cAMM;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;EACf;EACA,KAAK,UAAU;;UAGA;EACf;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,QAAQ;EACjB,WAAW;EACX;EACA;EACA,aAAa;IAAU;;EACvB;EACA,YAAY;IAAU;;EACtB;EACA;EACA;EACA,iBAAiB,OAAO,yBAAyB;EACjD;EACA,OAAO;EACP;;;;UCmEe;;EAEf,UAAU;EACV;EACA;;EAEA;;;;;;;;;;wBA2GoB,gBACpB,UAAS,iBACR,QAAQ;wBAiDK,eAAe,OAAO;;;;wBCjHtB,sBAAsB,SAAS,UAAU;;;;wBCjMzC,mBAAmB;EACjC;IACE;;;wBCnEY,eAAe,OAAO,sCAAmB,IAAA"}

package/dist/feedback.js

@@ -1,6 +1,6 @@
 "use client";
 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 { 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, c as useFloatingPosition, d as SelectionOutline, f as drawAnnotations, g as ArrowIcon, h as stopClicksAtHost, i as createFeedbackTransport, j as TextIcon, m as listenToKeydown, o as submitWidgetFeedback, p as listenOnPageAndWidget, r as attachPreparedScreenshots, t as ElementPicker, v as CameraIcon, w as HighlightIcon, x as ChevronDownIcon, y as ChatIcon, z as MAX_SELECTION_COMMENT_LENGTH } from "./picker-DCoAFX5y.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";
@@ -1640,7 +1640,7 @@ function useWidgetState(props) {
 		setStep("compose");
 		return submission.submit({
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.6.0" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.6.2" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
 				selections
@@ -1705,94 +1705,141 @@ function useWidgetState(props) {
 	};
 }
 //#endregion
-//#region src/feedback/ui/floating/floating-widget.tsx
-function FloatingWidget({ hotkey, labels, position, state }) {
-	const [minimized, setMinimized] = useState(false);
-	const launcherRef = useRef(null);
-	const showPanel = state.isOpen && !minimized;
-	const floating = useFloatingPosition(position, showPanel);
-	const minimize = () => {
-		setMinimized(true);
-		requestAnimationFrame(() => launcherRef.current?.focus());
-	};
+//#region src/feedback/ui/floating/use-floating-widget-keyboard.ts
+function useFloatingWidgetKeyboard(options) {
+	const { anchorRef, hotkey, launcher, showPanel, state } = options;
 	useEffect(() => {
 		if (state.step === "compose") state.annotationTrigger?.button.focus({ preventScroll: true });
 	}, [state.step, state.annotationTrigger]);
+	const minimize = launcher.minimize;
 	useEffect(() => {
 		if (!showPanel || state.step !== "compose") return;
-		const onKeyDown = (event) => {
-			if (event.key === "Escape" && !event.defaultPrevented) {
-				setMinimized(true);
-				requestAnimationFrame(() => launcherRef.current?.focus());
-			}
-		};
-		return listenToKeydown(floating.rootRef.current, onKeyDown);
+		return listenToKeydown(anchorRef.current, (event) => {
+			if (event.key === "Escape" && !event.defaultPrevented) minimize();
+		});
 	}, [
-		floating.rootRef,
+		anchorRef,
+		minimize,
 		showPanel,
 		state.step
 	]);
-	const { close, isOpen, open } = state;
+	useWidgetHotkey({
+		anchorRef,
+		hotkey,
+		launcher,
+		state
+	});
+}
+function useWidgetHotkey({ anchorRef, hotkey, launcher, state }) {
+	const { close, isOpen } = state;
+	const open = launcher.triggerProps.onClick;
 	useEffect(() => {
 		if (!hotkey) return;
-		const toggleOnHotkey = (event) => {
+		return listenToKeydown(anchorRef.current, (event) => {
 			if (matchesHotkey(event, hotkey)) {
 				event.preventDefault();
 				if (isOpen) close();
 				else open();
 			}
-		};
-		return listenToKeydown(floating.rootRef.current, toggleOnHotkey, true);
+		}, true);
 	}, [
+		anchorRef,
 		close,
-		floating.rootRef,
 		hotkey,
 		isOpen,
 		open
 	]);
+}
+//#endregion
+//#region src/feedback/ui/floating/floating-widget.tsx
+function FloatingWidget({ config, launcher, state }) {
+	const { hotkey, position } = config;
+	const showPanel = state.isOpen && !launcher.minimized;
+	const floating = useFloatingPosition(position, showPanel);
+	useFloatingWidgetKeyboard({
+		anchorRef: floating.rootRef,
+		hotkey,
+		launcher,
+		showPanel,
+		state
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "root",
 		"data-editing": state.isOpen && (state.step === "picking" || state.step === "annotate"),
 		"data-moved": Boolean(floating.position),
 		"data-position": position,
 		ref: floating.rootRef,
-		children: [
-			/* @__PURE__ */ jsx("style", { children: floating.styles }),
-			showPanel && state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null),
-			showPanel ? /* @__PURE__ */ jsx(FeedbackPanel, {
-				floatingControls: /* @__PURE__ */ jsxs("div", {
-					className: "floating-controls",
-					children: [/* @__PURE__ */ jsx("button", {
-						"aria-label": labels.moveFeedback,
-						className: "icon-btn drag-handle",
-						title: labels.moveFeedback,
-						type: "button",
-						...floating.handleProps,
-						children: /* @__PURE__ */ jsx(GripIcon, {})
-					}), /* @__PURE__ */ jsx("button", {
-						"aria-label": labels.minimize,
-						className: "icon-btn",
-						onClick: minimize,
-						title: labels.minimize,
-						type: "button",
-						children: /* @__PURE__ */ jsx(CloseIcon, {})
-					})]
-				}),
-				labels,
+		children: [/* @__PURE__ */ jsx("style", { children: floating.styles }), /* @__PURE__ */ jsx(FloatingComposer, {
+			config,
+			launcher,
+			panel: {
+				floating,
+				showPanel,
 				state
-			}) : /* @__PURE__ */ jsx(Launcher, {
-				buttonRef: launcherRef,
-				isOpen: false,
-				label: state.isOpen ? labels.resume : labels.trigger,
-				onClick: () => {
-					setMinimized(false);
-					if (!state.isOpen) state.open();
-				}
-			})
-		]
+			}
+		})]
+	});
+}
+function FloatingComposer({ config, launcher, panel }) {
+	const { labels } = config;
+	const { floating, showPanel, state } = panel;
+	if (!showPanel) return launcher.custom ? null : /* @__PURE__ */ jsx(Launcher, {
+		buttonRef: launcher.triggerProps.ref,
+		isOpen: false,
+		label: state.isOpen ? labels.resume : labels.trigger,
+		onClick: launcher.triggerProps.onClick
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [state.step === "compose" && state.screenshots.map(({ id, selectedNode }) => selectedNode ? /* @__PURE__ */ jsx(SelectionOutline, { node: selectedNode }, id) : null), /* @__PURE__ */ jsx(FeedbackPanel, {
+		floatingControls: /* @__PURE__ */ jsx(FloatingControls, {
+			floating,
+			labels,
+			minimize: launcher.minimize
+		}),
+		labels,
+		state
+	})] });
+}
+function FloatingControls({ labels, floating, minimize }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "floating-controls",
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-label": labels.moveFeedback,
+			className: "icon-btn drag-handle",
+			title: labels.moveFeedback,
+			type: "button",
+			...floating.handleProps,
+			children: /* @__PURE__ */ jsx(GripIcon, {})
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": labels.minimize,
+			className: "icon-btn",
+			onClick: minimize,
+			title: labels.minimize,
+			type: "button",
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
 	});
 }
 //#endregion
+//#region src/feedback/ui/floating/use-widget-launcher.ts
+function useWidgetLauncher(state) {
+	const [minimized, setMinimized] = useState(false);
+	const triggerRef = useRef(null);
+	return {
+		minimize: () => {
+			setMinimized(true);
+			requestAnimationFrame(() => triggerRef.current?.focus());
+		},
+		minimized,
+		triggerProps: {
+			onClick: () => {
+				setMinimized(false);
+				if (!state.isOpen) state.open();
+			},
+			ref: triggerRef
+		}
+	};
+}
+//#endregion
 //#region src/feedback/ui/annotation/styles.ts
 const ANNOTATOR_STYLES = `
 .overlay { margin: 0; border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.annotatorOverlay}; display: flex; flex-direction: column; background: transparent; color: var(--rf-text); font: 13px/1.45 ui-sans-serif, system-ui, sans-serif; }
@@ -2252,7 +2299,7 @@ svg { flex-shrink: 0; }
 }
 .capture-halo { position: fixed; inset: 0; z-index: ${REFLET_Z_INDEX.captureHalo}; pointer-events: none; opacity: 0; transition: opacity 500ms var(--rf-ease); }
 .capture-halo[data-active="true"] { opacity: 1; transition-duration: 140ms; }
-.capture-halo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
+.capture-halo::before { content: ""; position: absolute; inset: 0; box-shadow: inset 14px 0 36px -16px var(--rf-accent), inset -14px 0 36px -16px var(--rf-accent), inset 0 0 4px 1px color-mix(in srgb, var(--rf-accent) 35%, transparent); }
 .capture-halo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rf-accent) 20%, transparent), transparent 5%, transparent 95%, color-mix(in srgb, var(--rf-accent) 20%, transparent)); }
 ${COMPOSER_STYLES}
 ${ANNOTATOR_STYLES}
@@ -2315,52 +2362,64 @@ function ShadowPortal({ children, offset, primaryColor, theme }) {
 }
 //#endregion
 //#region src/feedback/widget.tsx
-const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-D_0UL_Wd.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
+const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-DOECMj0S.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 = {
-		...DEFAULT_WIDGET_LABELS,
-		...props.labels
-	};
 	const state = useWidgetState(props);
-	const { isOpen } = state;
-	const showsWidget = enabled && !state.isDismissed;
-	const showsDevtools = useOwnsDevtools(devtools && DevtoolsLayer !== null, showsWidget) && DevtoolsLayer !== null;
+	const launcher = useWidgetLauncher(state);
+	const showsWidget = props.enabled !== false && !state.isDismissed;
+	const showsDevtools = useOwnsDevtools(props.devtools !== false && DevtoolsLayer !== null, showsWidget) && DevtoolsLayer !== null;
 	if (!(showsWidget || showsDevtools)) return null;
-	return /* @__PURE__ */ jsxs(ShadowPortal, {
-		offset,
+	return /* @__PURE__ */ jsxs(Fragment, { children: [showsWidget && props.renderTrigger?.(launcher.triggerProps), /* @__PURE__ */ jsxs(ShadowPortal, {
+		offset: props.offset ?? 20,
 		primaryColor: props.primaryColor,
-		theme,
-		children: [showsWidget && /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx("div", {
-				"aria-hidden": "true",
-				className: "capture-halo",
-				"data-active": state.isCapturing
-			}),
-			/* @__PURE__ */ jsx(FloatingWidget, {
-				hotkey,
-				labels,
-				position,
-				state
-			}),
-			/* @__PURE__ */ jsx(WidgetAnnotation, {
-				labels,
-				state
-			}),
-			isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
-				labels,
-				onCancel: () => state.setStep("compose"),
-				onPick: state.selectElement
-			})
-		] }), showsDevtools && /* @__PURE__ */ jsx(Suspense, {
+		theme: props.theme ?? "auto",
+		children: [showsWidget && /* @__PURE__ */ jsx(WidgetContents, {
+			launcher,
+			props,
+			state
+		}), showsDevtools && /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(DevtoolsLayer, {
-				isWidgetOpen: showsWidget && isOpen,
-				position,
+				isWidgetOpen: showsWidget && state.isOpen,
+				position: props.position ?? "bottom-right",
 				publicKey: state.publicKey
 			})
 		})]
-	});
+	})] });
+}
+function WidgetContents({ launcher, props, state }) {
+	const labels = {
+		...DEFAULT_WIDGET_LABELS,
+		...props.labels
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "capture-halo",
+			"data-active": state.isCapturing
+		}),
+		/* @__PURE__ */ jsx(FloatingWidget, {
+			config: {
+				hotkey: props.hotkey ?? null,
+				labels,
+				position: props.position ?? "bottom-right"
+			},
+			launcher: {
+				...launcher,
+				custom: Boolean(props.renderTrigger)
+			},
+			state
+		}),
+		/* @__PURE__ */ jsx(WidgetAnnotation, {
+			labels,
+			state
+		}),
+		state.isOpen && state.step === "picking" && /* @__PURE__ */ jsx(ElementPicker, {
+			labels,
+			onCancel: () => state.setStep("compose"),
+			onPick: state.selectElement
+		})
+	] });
 }
 function WidgetAnnotation({ labels, state }) {
 	const screenshot = state.activeScreenshot;