reflet-sdk 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -5,6 +5,23 @@ All notable changes to `reflet-sdk` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.3] - 2026-10-04
+
+### Added
+
+- Copy an element straight from the devtools picker, React Grab style: aim at it and press ⌘C (Ctrl+C), or press Copy on the note card to include your note. The clipboard gets the element, its source location, owner components, selector and HTML.
+
+### Fixed
+
+- The element picker and its hover outline stay above every layer of the page, so elements inside a fixed sidebar or header are outlined instead of hidden under it.
+- The note card and hover label stay on screen when the picked element is taller than the window: the card tries below, above, then beside the element, and overlaps it only when nothing else fits.
+
+## [0.6.2] - 2026-10-04
+
+### Fixed
+
+- The devtools Board tab no longer dead-ends when nothing points at the current page: switch between "This page" and "Whole board", or click "Show the whole board" from the empty state, so feedback filed on other routes or other tenants' URLs stays reachable.
+
 ## [0.6.1] - 2026-10-04
 
 ### Fixed

package/README.md

@@ -190,7 +190,9 @@ turn it off.
   "View code" button, and Shift+click (or Shift+Enter) skips the note and opens
   the source file with the JSX element highlighted, ready to jump to in your
   editor. Locations come from React's debug stacks resolved through the dev
-  server's source maps, Server Components included.
+  server's source maps, Server Components included. Press ⌘C (Ctrl+C) on the
+  aimed element, or Copy on the note card, to put the element and its source on
+  the clipboard for a coding agent, without saving a note.
 - **Notes** — a note appears the moment you press Enter, as a numbered pin on
   its element, Figma-style; click the pin to read, edit or delete it, and find
   the same number on its card in the panel. Its source location and a
@@ -203,8 +205,9 @@ turn it off.
 - **Send to board** — notes become internal feedback: members see them with an
   "Internal" badge, the public board never does, and an admin can make one
   public from the dashboard.
-- **Board** — the board's feedback for the current route, with "Show on page",
-  the reporter's source location, and a code search for the element's text.
+- **Board** — the board's feedback for the current route, or the whole board,
+  with "Show on page", the reporter's source location, and a code search for
+  the element's text.
 
 Code view and the board go through one dev-only route that reads files from
 your repository and holds the board credential server-side.

package/dist/{devtools-layer-Cry67xS8.js → devtools-layer-DtO89RlJ.js}

@@ -1,6 +1,6 @@
 import { a as EDITORS, n as DEVTOOLS_REQUEST_HEADER, r as DEVTOOLS_ROUTE_BASE, t as DEVTOOLS_ENDPOINTS } from "./protocol-ClqTFzwR.js";
-import { A as TargetIcon, B as buildElementSelection, C as GripIcon, H as getFiberFromNode, I as DEFAULT_WIDGET_LABELS, J as releaseCapture, K as captureViewport, L as SDK_VERSION, R as collectPageContext, S as CloseIcon, U as resolveComponentStack, V as describeElement, W as shortenSourcePath, a as deriveTitle, c as useFloatingPosition, d as SelectionOutline, k as Svg, l as onViewportChange, m as listenToKeydown, n as isWidgetOwned, p as listenOnPageAndWidget, q as capturedFromCanvas, s as uploadImageBlob, t as ElementPicker, u as visibleViewport } from "./picker-C_apeUEq.js";
-import { t as REFLET_Z_INDEX } from "./z-index-BL0SGZEP.js";
+import { A as TargetIcon, B as buildElementSelection, C as GripIcon, H as getFiberFromNode, I as DEFAULT_WIDGET_LABELS, J as releaseCapture, K as captureViewport, L as SDK_VERSION, R as collectPageContext, S as CloseIcon, U as resolveComponentStack, V as describeElement, W as shortenSourcePath, a as deriveTitle, c as useFloatingPosition, d as SelectionOutline, k as Svg, l as onViewportChange, m as listenToKeydown, n as isWidgetOwned, p as listenOnPageAndWidget, q as capturedFromCanvas, s as uploadImageBlob, t as ElementPicker, u as visibleViewport } from "./picker-Rh-hsxyX.js";
+import { t as REFLET_Z_INDEX } from "./z-index-CIb4-3Fy.js";
 import * as G$1 from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -79,12 +79,13 @@ function callReflet(apiPath, init = {}) {
 		query: init.query
 	});
 }
-async function fetchBoardFeedbackForPage(pagePath) {
-	return (await callReflet("/api/v1/feedback/list", { query: {
+function fetchBoardFeedback(pagePath) {
+	const query = {
 		limit: String(INBOX_PAGE_SIZE),
-		pagePath,
 		sortBy: "newest"
-	} })).items;
+	};
+	if (pagePath !== null) query.pagePath = pagePath;
+	return callReflet("/api/v1/feedback/list", { query });
 }
 //#endregion
 //#region src/devtools/client/copy-button.tsx
@@ -141,16 +142,23 @@ function selectionLines(selection) {
 	if (selection.html) lines.push("HTML:", ...fenced("html", selection.html));
 	return lines;
 }
+function elementContext(note) {
+	return [`Page: ${note.capturedContext.url ?? "unknown"}`, ...selectionLines(note.selection)];
+}
 function notesToPrompt(notes) {
 	const sections = notes.map((note, index) => [
 		`## Note ${index + 1}`,
 		note.note || "(no comment)",
 		"",
-		`Page: ${note.capturedContext.url ?? "unknown"}`,
-		...selectionLines(note.selection)
+		...elementContext(note)
 	].join("\n"));
 	return [NOTES_BRIEF, ...sections].join("\n\n");
 }
+/** No brief: pasted into a prompt the developer writes around it. */
+function noteAsContext(note) {
+	const context = elementContext(note).join("\n");
+	return note.note ? `${note.note}\n\n${context}` : context;
+}
 function boardFeedbackToPrompt(item) {
 	const selections = item.context?.selections ?? [];
 	const comments = selections.map((selection) => selection.comment).filter(Boolean);
@@ -352,17 +360,26 @@ function FeedbackCard({ item, onOpenCode, onShowSelector }) {
 }
 //#endregion
 //#region src/devtools/client/inbox/inbox-panel.tsx
-function useBoardFeedbackForPage() {
+const INBOX_SCOPES = ["page", "board"];
+const SCOPE_LABELS = {
+	board: "Whole board",
+	page: "This page"
+};
+const EMPTY_SCOPE_MESSAGES = {
+	board: "The board has no feedback yet.",
+	page: "Nothing on the board points at this page yet."
+};
+function useBoardFeedback(scope) {
 	const [state, setState] = useState({ kind: "loading" });
 	const load = useCallback(async () => {
-		const pagePath = window.location.pathname;
+		const pagePath = scope === "page" ? window.location.pathname : null;
 		setState({ kind: "loading" });
 		try {
-			const items = await fetchBoardFeedbackForPage(pagePath);
+			const page = await fetchBoardFeedback(pagePath);
 			setState({
-				items,
 				kind: "ready",
-				pagePath
+				page,
+				place: pagePath ?? "the board"
 			});
 		} catch (error) {
 			setState({
@@ -370,7 +387,7 @@ function useBoardFeedbackForPage() {
 				message: error instanceof Error ? error.message : "Could not reach the board."
 			});
 		}
-	}, []);
+	}, [scope]);
 	useEffect(() => {
 		load();
 	}, [load]);
@@ -379,14 +396,14 @@ function useBoardFeedbackForPage() {
 		state
 	};
 }
-function InboxPanel({ onOpenCode, onShowSelector }) {
-	const { load, state } = useBoardFeedbackForPage();
+function BoardFeedbackList({ onOpenCode, onShowSelector, onShowWholeBoard, scope }) {
+	const { load, state } = useBoardFeedback(scope);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "dt-card-head",
 			children: [/* @__PURE__ */ jsx("p", {
 				className: "dt-status",
-				children: state.kind === "ready" ? `${state.items.length} on ${state.pagePath}` : "Board feedback on this page"
+				children: state.kind === "ready" ? `${state.page.total} on ${state.place}` : "Board feedback"
 			}), /* @__PURE__ */ jsx("button", {
 				className: "dt-btn",
 				disabled: state.kind === "loading",
@@ -403,19 +420,43 @@ function InboxPanel({ onOpenCode, onShowSelector }) {
 			className: "dt-error",
 			children: state.message
 		}),
-		state.kind === "ready" && state.items.length === 0 && /* @__PURE__ */ jsx("div", {
+		state.kind === "ready" && state.page.items.length === 0 && /* @__PURE__ */ jsxs("div", {
 			className: "dt-empty",
-			children: /* @__PURE__ */ jsx("p", { children: "Nothing on the board points at this page yet." })
+			children: [/* @__PURE__ */ jsx("p", { children: EMPTY_SCOPE_MESSAGES[scope] }), scope === "page" && /* @__PURE__ */ jsx("button", {
+				className: "dt-btn",
+				onClick: onShowWholeBoard,
+				type: "button",
+				children: "Show the whole board"
+			})]
 		}),
-		state.kind === "ready" && state.items.map((item) => /* @__PURE__ */ jsx(FeedbackCard, {
+		state.kind === "ready" && state.page.items.map((item) => /* @__PURE__ */ jsx(FeedbackCard, {
 			item,
 			onOpenCode,
 			onShowSelector
 		}, item.id))
 	] });
 }
+function InboxPanel({ onOpenCode, onShowSelector }) {
+	const [scope, setScope] = useState("page");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "dt-tabs",
+		children: INBOX_SCOPES.map((option) => /* @__PURE__ */ jsx("button", {
+			"aria-pressed": option === scope,
+			className: "dt-tab",
+			onClick: () => setScope(option),
+			type: "button",
+			children: SCOPE_LABELS[option]
+		}, option))
+	}), /* @__PURE__ */ jsx(BoardFeedbackList, {
+		onOpenCode,
+		onShowSelector,
+		onShowWholeBoard: () => setScope("board"),
+		scope
+	}, scope)] });
+}
 //#endregion
 //#region src/devtools/client/notices.tsx
+const STATUS_VISIBLE_MS = 2400;
 let notices = [];
 let nextNoticeId = 1;
 const listeners = /* @__PURE__ */ new Set();
@@ -431,10 +472,20 @@ function reportFailure(action, error, retry) {
 	const message = `${action}: ${error instanceof Error ? error.message : "Unknown error."}`;
 	publish([...notices.filter((notice) => notice.message !== message), {
 		id: nextNoticeId++,
+		kind: "failure",
 		message,
 		retry
 	}]);
 }
+function announce(message) {
+	const id = nextNoticeId++;
+	publish([...notices.filter((notice) => notice.message !== message), {
+		id,
+		kind: "status",
+		message
+	}]);
+	setTimeout(() => dismissNotice(id), STATUS_VISIBLE_MS);
+}
 function subscribe(listener) {
 	listeners.add(listener);
 	return () => listeners.delete(listener);
@@ -446,7 +497,8 @@ function Notices() {
 		className: "dt-notices",
 		children: current.map((notice) => /* @__PURE__ */ jsxs("div", {
 			className: "dt-notice glass",
-			role: "alert",
+			"data-kind": notice.kind,
+			role: notice.kind === "failure" ? "alert" : "status",
 			children: [
 				/* @__PURE__ */ jsx("p", { children: notice.message }),
 				notice.retry && /* @__PURE__ */ jsx("button", {
@@ -601,6 +653,18 @@ function BoardTab({ canConnect, onOpenCode, onShowSelector, publicKey, refresh,
 	}), inbox] });
 }
 //#endregion
+//#region src/devtools/client/clipboard.ts
+/**
+* Safari only lets a page write the clipboard inside the key press or click
+* itself, while the text waits on a source-map lookup: the write starts now
+* and the text follows.
+*/
+async function copyToClipboard(text) {
+	if (!window.isSecureContext) throw new Error("The clipboard needs HTTPS or localhost.");
+	const blob = text.then((value) => new Blob([value], { type: "text/plain" }));
+	await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]);
+}
+//#endregion
 //#region src/devtools/client/code/editor-url.ts
 const fileSchemeLink = (scheme) => (absolutePath, line, column) => `${scheme}://file${encodeURI(absolutePath)}:${line}:${column}`;
 const EDITOR_LINKS = {
@@ -725,6 +789,7 @@ function InboxIcon() {
 //#endregion
 //#region src/devtools/client/devtools-bar.tsx
 const BAR_POSITION_KEY = "reflet-devtools-bar-position";
+const PICK_BUTTON_LABEL = "Pick an element: note it, copy it, or Shift+click to open its code";
 function BarButton({ children, label, onClick, pressed }) {
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": label,
@@ -761,7 +826,7 @@ function DevtoolsBar({ edge, noteCount, onPick, onToggleSheet, openTab, side })
 				children: /* @__PURE__ */ jsx(GripIcon, {})
 			}),
 			/* @__PURE__ */ jsx(BarButton, {
-				label: "Pick an element: note it, or Shift+click to open its code",
+				label: PICK_BUTTON_LABEL,
 				onClick: onPick,
 				pressed: false,
 				children: /* @__PURE__ */ jsx(TargetIcon, {})
@@ -776,7 +841,7 @@ function DevtoolsBar({ edge, noteCount, onPick, onToggleSheet, openTab, side })
 				})]
 			}),
 			/* @__PURE__ */ jsx(BarButton, {
-				label: "Board feedback on this page",
+				label: "Board feedback",
 				onClick: () => onToggleSheet("inbox"),
 				pressed: openTab === "inbox",
 				children: /* @__PURE__ */ jsx(InboxIcon, {})
@@ -967,7 +1032,7 @@ function DevtoolsSheet({ children, onClose, onPick, onSelectTab, side, tab, tabs
 						...floating.handleProps
 					}),
 					/* @__PURE__ */ jsx("button", {
-						"aria-label": "Pick an element: note it, or Shift+click to open its code",
+						"aria-label": PICK_BUTTON_LABEL,
 						className: "icon-btn",
 						onClick: onPick,
 						title: "Pick an element",
@@ -1043,6 +1108,7 @@ const DEVTOOLS_STYLES = `
   display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 12px;
   color: var(--rf-danger); font-size: 12.5px; animation: dt-notice-in 220ms var(--rf-ease);
 }
+.dt-notice[data-kind="status"] { color: var(--rf-text); }
 .dt-notice p { flex: 1; margin: 0; overflow-wrap: anywhere; }
 .dt-notice .icon-btn { width: 30px; height: 30px; }
 .dt-bar {
@@ -1105,7 +1171,7 @@ const DEVTOOLS_STYLES = `
 .dt-tabs { display: flex; gap: 2px; margin-right: auto; }
 .dt-tab { height: 30px; padding: 0 11px; border-radius: var(--rf-pill); color: var(--rf-text-muted); font-weight: 500; }
 .dt-tab:hover { color: var(--rf-text); }
-.dt-tab[aria-selected="true"] { background: var(--rf-bg-hover); color: var(--rf-text); }
+.dt-tab[aria-selected="true"], .dt-tab[aria-pressed="true"] { background: var(--rf-bg-hover); color: var(--rf-text); }
 .dt-sheet-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
 .dt-sheet-foot {
   position: sticky; bottom: -10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
@@ -3268,6 +3334,24 @@ async function describeSource(source, canReadSource) {
 	}
 	return withPosition(shortenSourcePath(source.fileName), source);
 }
+async function locateSource(element, canReadSource) {
+	const source = await locateElementSource(element).catch(() => null);
+	if (!source) return null;
+	return {
+		source,
+		sourceLocation: await describeSource(source, canReadSource)
+	};
+}
+function withSource(note, located) {
+	return {
+		...note,
+		selection: {
+			...note.selection,
+			sourceLocation: located.sourceLocation
+		},
+		source: located.source
+	};
+}
 /** `crypto.randomUUID` only exists in secure contexts; a phone on the LAN IP is not one. */
 function newNoteId() {
 	const randomBytes = crypto.getRandomValues(/* @__PURE__ */ new Uint8Array(8));
@@ -3289,6 +3373,12 @@ function draftNote(element, note) {
 		source: null
 	};
 }
+/** The whole note in one go, source included: a copy has no stored note to fill in later. */
+async function draftLocatedNote(element, note, canReadSource) {
+	const draft = draftNote(element, note);
+	const located = await locateSource(element, canReadSource);
+	return located ? withSource(draft, located) : draft;
+}
 const locateAttempts = /* @__PURE__ */ new Set();
 /** Once per note per page load: a note whose source cannot be found is not retried in a loop. */
 function hasTriedToLocate(noteId) {
@@ -3303,17 +3393,9 @@ async function enrichNote(noteId, element, canReadSource) {
 	noteStore.setActivity(noteId, "locating");
 	let closeUp = null;
 	try {
-		const [source, snapshot] = await Promise.all([locateElementSource(element).catch(() => null), captureElementSnapshot(element).catch(() => null)]);
+		const [located, snapshot] = await Promise.all([locateSource(element, canReadSource), captureElementSnapshot(element).catch(() => null)]);
 		closeUp = snapshot;
-		const sourceLocation = source ? await describeSource(source, canReadSource) : null;
-		if (source && sourceLocation) await noteStore.patch(noteId, (note) => ({
-			...note,
-			selection: {
-				...note.selection,
-				sourceLocation
-			},
-			source
-		}));
+		if (located) await noteStore.patch(noteId, (note) => withSource(note, located));
 		if (closeUp) await noteStore.attachCloseUp(noteId, {
 			blob: closeUp.blob,
 			height: closeUp.height,
@@ -3910,7 +3992,7 @@ const PICKER_LABELS = {
 	attachElement: "Save note",
 	elementNote: "Dev note",
 	elementNotePlaceholder: "What should change here?",
-	pickElementHint: "Pick an element to note it"
+	pickElementHint: "Pick an element to note or copy it"
 };
 function titleFor(element) {
 	const owner = resolveComponentStack(getFiberFromNode(element))[0];
@@ -4029,6 +4111,14 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 		setIsPicking(false);
 		saveNote(draftNote(element, text), element, canReadSource);
 	}, [canReadSource]);
+	const copy = useMemo(() => ({
+		label: "Copy",
+		onCopy: (element, text) => {
+			setIsPicking(false);
+			const title = titleFor(element);
+			copyToClipboard(draftLocatedNote(element, text, canReadSource).then(noteAsContext)).then(() => announce(`Copied ${title}`)).catch((error) => reportFailure(`${title} was not copied`, error));
+		}
+	}), [canReadSource]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dt",
 		"data-recessed": isRecessed,
@@ -4083,6 +4173,7 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 			openTab && /* @__PURE__ */ jsx(SelectionOutline, { node: highlighted }),
 			/* @__PURE__ */ jsx(Notices, {}),
 			isPicking && /* @__PURE__ */ jsx(ElementPicker, {
+				copy,
 				inspect,
 				labels: PICKER_LABELS,
 				onCancel: cancelPick,
@@ -4094,4 +4185,4 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 //#endregion
 export { DevtoolsLayer };
 
-//# sourceMappingURL=devtools-layer-Cry67xS8.js.map
+//# sourceMappingURL=devtools-layer-DtO89RlJ.js.map