reflet-sdk 0.6.4 → 0.6.6

package/dist/feedback.d.ts

@@ -1,4 +1,4 @@
-import { c as ElementSelection, u as FeedbackContext, w as RefletUser } from "./types-DnaDEN9Y.js";
+import { c as ElementSelection, u as FeedbackContext, w as RefletUser } from "./types-B3XiHPqy.js";
 import { ReactNode, RefObject } from "react";
 //#region src/feedback/types.d.ts
 declare const ANNOTATION_TOOLS: readonly ["pen", "arrow", "rectangle", "text", "spotlight", "highlight", "blur"];
@@ -72,6 +72,8 @@ interface FeedbackTriggerProps {
   ref: RefObject<HTMLButtonElement | null>;
 }
 interface RefletFeedbackProps {
+  /** Hosts the team sign-in page. Defaults to https://www.reflet.app. */
+  appUrl?: string;
   baseUrl?: string;
   captureConsole?: boolean;
   captureOnOpen?: boolean;
@@ -94,6 +96,8 @@ interface RefletFeedbackProps {
   primaryColor?: string;
   publicKey?: string;
   renderTrigger?: (props: FeedbackTriggerProps) => ReactNode;
+  /** Shown once activated by the `reflet-team` URL parameter or a stored sign-in. Defaults to true. */
+  teamTools?: boolean;
   theme?: "auto" | "dark" | "light";
   user?: RefletUser;
   userToken?: string;
@@ -105,6 +109,8 @@ interface CaptureOptions {
   element?: Element;
   excludeSelectors?: string[];
   maxWidth?: number;
+  /** Edits the detached clone, never the live page. */
+  prepareClone?: (clone: Element) => void;
   /** Hard cap for one capture attempt before falling back. Default 10s. */
   timeout?: number;
 }

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":";;;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;EACA;;UAiDe;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;;;;UCiEe;;EAEf,UAAU;EACV;EACA;;EAEA;;;;;;;;;;wBAoHoB,gBACpB,UAAS,iBACR,QAAQ;wBAiDK,eAAe,OAAO;;;;wBC1HtB,sBAAsB,SAAS,UAAU;;;;wBCjMzC,mBAAmB;EACjC;IACE;;;wBCnEY,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;EACA;;UAiDe;EACf;EACA,KAAK,UAAU;;UAGA;;EAEf;EACA;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;;EAEjD;EACA;EACA,OAAO;EACP;;;;UC6De;;EAEf,UAAU;EACV;EACA;;EAEA,gBAAgB,OAAO;;EAEvB;;;;;;;;;;wBAoIoB,gBACpB,UAAS,iBACR,QAAQ;wBAkDK,eAAe,OAAO;;;;wBC7ItB,sBAAsB,SAAS,UAAU;;;;wBCjMzC,mBAAmB;EACjC;IACE;;;wBC3BY,eAAe,OAAO,sCAAmB,IAAA"}

package/dist/feedback.js

@@ -1,7 +1,10 @@
 "use client";
-import { n as Reflet } from "./client-DAdWdIFY.js";
-import { A as SquareIcon, B as collectPageContext, C as ChevronDownIcon, D as MoreIcon, E as HighlightIcon, F as UndoIcon, H as buildElementSelection, I as isDegenerate, J as captureViewport, L as normalizeRect, M as TargetIcon, N as TextIcon, O as PencilIcon, P as TrashIcon, R as DEFAULT_WIDGET_LABELS, S as CheckIcon, T as GripIcon, V as MAX_SELECTION_COMMENT_LENGTH, X as capturedViewportSize, Z as releaseCapture, _ as matchesHotkey, b as CameraIcon, c as useFloatingPosition, d as SelectionOutline, f as drawAnnotations, g as isSubmitEnter, h as stopClicksAtHost, i as submitWidgetFeedback, k as SpotlightIcon, m as listenToKeydown, n as createFeedbackTransport, o as ElementPicker, p as listenOnPageAndWidget, q as WIDGET_MARKER, t as attachPreparedScreenshots, v as ArrowIcon, w as CloseIcon, x as ChatIcon, y as BlurIcon, z as SDK_VERSION } from "./submit-Cd-g1Dtg.js";
-import { a as REFLET_Z_INDEX, t as RefletContext } from "./react-context-Caq1fodf.js";
+import { n as Reflet } from "./client-oFFfRxAM.js";
+import { A as SquareIcon, C as ChevronDownIcon, D as MoreIcon, E as HighlightIcon, F as UndoIcon, H as MAX_SELECTION_COMMENT_LENGTH, I as isDegenerate, J as maskSecrets, L as normalizeRect, M as TargetIcon, N as TextIcon, O as PencilIcon, P as TrashIcon, R as DEFAULT_WIDGET_LABELS, S as CheckIcon, T as GripIcon, U as buildElementSelection, V as collectPageContext, _ as matchesHotkey, b as CameraIcon, c as useFloatingPosition, d as drawAnnotations, et as WIDGET_MARKER, f as listenOnPageAndWidget, g as isSubmitEnter, h as stopClicksAtHost, i as submitWidgetFeedback, it as releaseCapture, k as SpotlightIcon, n as createFeedbackTransport, o as ElementPicker, p as listenToKeydown, rt as capturedViewportSize, t as attachPreparedScreenshots, tt as captureViewport, v as ArrowIcon, w as CloseIcon, x as ChatIcon, y as BlurIcon, z as SDK_VERSION } from "./submit-DYGZQVdG.js";
+import { t as RefletContext } from "./react-context-Kazo_JCz.js";
+import { t as hasTeamActivation } from "./team-activation-DCqh71bl.js";
+import { t as SelectionOutline } from "./selection-outline-NzAAAZXR.js";
+import { t as REFLET_Z_INDEX } from "./z-index-CwokqVq_.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";
@@ -666,42 +669,6 @@ function Annotator({ capture, labels, editor, note }) {
 	});
 }
 //#endregion
-//#region src/feedback/ui/devtools-owner.ts
-const claims = /* @__PURE__ */ new Map();
-const listeners = /* @__PURE__ */ new Set();
-function notify() {
-	for (const listener of listeners) listener();
-}
-function subscribe(listener) {
-	listeners.add(listener);
-	return () => listeners.delete(listener);
-}
-function currentOwner() {
-	for (const [token, claim] of claims) if (claim.hasWidget) return token;
-	return claims.keys().next().value;
-}
-/**
-* One devtools bar per page, however many RefletFeedback instances mount:
-* the one with a visible widget wins, so its bar can step aside for its panel.
-*/
-function useOwnsDevtools(wantsDevtools, hasWidget) {
-	const [token] = useState(() => Symbol("reflet-devtools"));
-	useEffect(() => {
-		if (!wantsDevtools) return;
-		claims.set(token, { hasWidget });
-		notify();
-		return () => {
-			claims.delete(token);
-			notify();
-		};
-	}, [
-		hasWidget,
-		token,
-		wantsDevtools
-	]);
-	return useSyncExternalStore(subscribe, () => currentOwner() === token, () => false);
-}
-//#endregion
 //#region src/feedback/ui/launcher.tsx
 function Launcher({ isOpen, label, onClick, buttonRef }) {
 	return /* @__PURE__ */ jsxs("button", {
@@ -1281,6 +1248,52 @@ function useWidgetLauncher(state) {
 	};
 }
 //#endregion
+//#region src/feedback/ui/page-ownership.ts
+function createPageOwnership(name) {
+	const claims = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	const notify = () => {
+		for (const listener of listeners) listener();
+	};
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => listeners.delete(listener);
+	};
+	const currentOwner = () => {
+		for (const [token, claim] of claims) if (claim.hasWidget) return token;
+		return claims.keys().next().value;
+	};
+	function useOwns(wants, hasWidget) {
+		const [token] = useState(() => Symbol(name));
+		useEffect(() => {
+			if (!wants) return;
+			claims.set(token, { hasWidget });
+			notify();
+			return () => {
+				claims.delete(token);
+				notify();
+			};
+		}, [
+			hasWidget,
+			token,
+			wants
+		]);
+		return useSyncExternalStore(subscribe, () => currentOwner() === token, () => false);
+	}
+	function useIsClaimed() {
+		return useSyncExternalStore(subscribe, () => claims.size > 0, () => false);
+	}
+	return {
+		useIsClaimed,
+		useOwns
+	};
+}
+const devtoolsOwnership = createPageOwnership("reflet-devtools");
+const teamToolsOwnership = createPageOwnership("reflet-team-tools");
+const useOwnsDevtools = devtoolsOwnership.useOwns;
+const useHasDevtoolsOnPage = devtoolsOwnership.useIsClaimed;
+const useOwnsTeamTools = teamToolsOwnership.useOwns;
+//#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; }
@@ -1822,8 +1835,7 @@ function serializeArgument(value) {
 	if (typeof value === "function") return "[function]";
 	return String(value);
 }
-function formatMessage(args) {
-	const message = args.map(serializeArgument).join(" ");
+function clip(message) {
 	return message.length > MAX_MESSAGE_LENGTH ? `${message.slice(0, 999)}…` : message;
 }
 /**
@@ -1838,7 +1850,7 @@ function startConsoleRecorder(options) {
 		if (!(active && message)) return;
 		buffer.push({
 			level,
-			message,
+			message: clip(maskSecrets(message)),
 			timestamp: Date.now()
 		});
 		if (buffer.length > limit) buffer.splice(0, buffer.length - limit);
@@ -1848,7 +1860,7 @@ function startConsoleRecorder(options) {
 	for (const method of RECORDED_METHODS) {
 		const original = console[method];
 		const wrapper = (...args) => {
-			push(method, formatMessage(args));
+			push(method, args.map(serializeArgument).join(" "));
 			Reflect.apply(original, console, args);
 		};
 		originals.set(method, original);
@@ -2291,7 +2303,7 @@ function useWidgetState(props) {
 		setStep("compose");
 		return submission.submit({
 			context: {
-				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.6.4" }),
+				...activeScreenshot?.context ?? collectPageContext({ sdkVersion: "0.6.6" }),
 				consoleEvents: consoleRef.current?.events(),
 				metadata: props.metadata,
 				selections
@@ -2357,31 +2369,67 @@ function useWidgetState(props) {
 }
 //#endregion
 //#region src/feedback/widget.tsx
-const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-DgmM3RhW.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
+const DevtoolsLayer = process.env.NODE_ENV === "development" ? lazy(() => import("./devtools-layer-B91EVgqg.js").then((module) => ({ default: module.DevtoolsLayer }))) : null;
+const TeamLayer = lazy(() => import("./team-layer-F-9BE4hc.js").then((module) => ({ default: module.TeamLayer })));
+const DEFAULT_APP_URL = "https://www.reflet.app";
+const ignoreChanges = () => () => void 0;
+/** Activation reads the URL and storage, which only exist in the browser: the server renders without team tools. */
+function useTeamToolsKey(options) {
+	const { props, publicKey } = options;
+	const hasDevtoolsOnPage = useHasDevtoolsOnPage();
+	const isActivated = useSyncExternalStore(ignoreChanges, () => props.teamTools !== false && publicKey !== null && hasTeamActivation(publicKey), () => false);
+	return useOwnsTeamTools(isActivated && !hasDevtoolsOnPage, options.hasWidget) ? publicKey : null;
+}
 function RefletFeedback(props) {
 	const state = useWidgetState(props);
 	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;
+	const teamToolsKey = useTeamToolsKey({
+		hasWidget: showsWidget,
+		props,
+		publicKey: state.publicKey
+	});
+	if (!(showsWidget || showsDevtools || teamToolsKey)) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [showsWidget && props.renderTrigger?.(launcher.triggerProps), /* @__PURE__ */ jsxs(ShadowPortal, {
 		offset: props.offset ?? 20,
 		primaryColor: props.primaryColor,
 		theme: props.theme ?? "auto",
-		children: [showsWidget && /* @__PURE__ */ jsx(WidgetContents, {
-			launcher,
-			props,
-			state
-		}), showsDevtools && /* @__PURE__ */ jsx(Suspense, {
-			fallback: null,
-			children: /* @__PURE__ */ jsx(DevtoolsLayer, {
-				isWidgetOpen: showsWidget && state.isOpen,
-				position: props.position ?? "bottom-right",
-				publicKey: state.publicKey
+		children: [
+			showsWidget && /* @__PURE__ */ jsx(WidgetContents, {
+				launcher,
+				props,
+				state
+			}),
+			showsDevtools && /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(DevtoolsLayer, {
+					isWidgetOpen: showsWidget && state.isOpen,
+					position: props.position ?? "bottom-right",
+					publicKey: state.publicKey
+				})
+			}),
+			teamToolsKey && /* @__PURE__ */ jsx(TeamTools, {
+				props,
+				publicKey: teamToolsKey
 			})
-		})]
+		]
 	})] });
 }
+function TeamTools({ props, publicKey }) {
+	const context = useContext(RefletContext);
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(TeamLayer, {
+			connection: {
+				apiUrl: props.baseUrl ?? context?.baseUrl ?? "https://harmless-clam-802.convex.site",
+				appUrl: props.appUrl ?? DEFAULT_APP_URL,
+				publicKey
+			},
+			position: props.position ?? "bottom-right"
+		})
+	});
+}
 function WidgetContents({ launcher, props, state }) {
 	const labels = {
 		...DEFAULT_WIDGET_LABELS,