reflet-sdk 0.6.2 → 0.6.3

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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

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

package/dist/{devtools-layer-DOECMj0S.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-DCoAFX5y.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";
@@ -142,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);
@@ -449,6 +456,7 @@ function InboxPanel({ onOpenCode, onShowSelector }) {
 }
 //#endregion
 //#region src/devtools/client/notices.tsx
+const STATUS_VISIBLE_MS = 2400;
 let notices = [];
 let nextNoticeId = 1;
 const listeners = /* @__PURE__ */ new Set();
@@ -464,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);
@@ -479,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", {
@@ -634,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 = {
@@ -758,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,
@@ -794,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, {})
@@ -1000,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",
@@ -1076,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 {
@@ -3301,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));
@@ -3322,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) {
@@ -3336,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,
@@ -3943,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];
@@ -4062,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,
@@ -4116,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,
@@ -4127,4 +4185,4 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 //#endregion
 export { DevtoolsLayer };
 
-//# sourceMappingURL=devtools-layer-DOECMj0S.js.map
+//# sourceMappingURL=devtools-layer-DtO89RlJ.js.map