reflet-sdk 0.6.2 → 0.6.4

package/CHANGELOG.md

@@ -5,6 +5,32 @@ 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.4] - 2026-10-04
+
+### Added
+
+- Click a screenshot thumbnail in the widget to open it full size, the same view the pencil opens.
+
+### Fixed
+
+- Picked-element highlights and devtools close-ups land on the element on Windows and Linux. A classic scrollbar used to shift them left, by up to its own width near the right edge.
+- Letter hotkeys work with macOS Option (⌥F types "ƒ") and on non-Latin keyboard layouts, for both the `hotkey` prop and the picker's ⌘C / Ctrl+C.
+- Pressing Enter to confirm Japanese, Chinese or Korean input no longer submits the picker note, the devtools note or a text annotation. Pressing Escape to cancel the input no longer closes the picker note, a text annotation, the devtools panel or a note pin either.
+- Right-click no longer picks an element, and the page's context menu no longer opens while picking.
+- "Open in editor" links work for Windows paths (`vscode://file/C:/…`), and devtools resolves `file:///C:/…`, Vite `/@fs/C:/…` and `/C:/…` source frames.
+- Devtools refuses Server Component chunks on another Windows drive as outside the repository.
+
+## [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-DgmM3RhW.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 { B as collectPageContext, G as resolveComponentStack, H as buildElementSelection, J as captureViewport, K as shortenSourcePath, M as TargetIcon, R as DEFAULT_WIDGET_LABELS, T as GripIcon, U as describeElement, W as getFiberFromNode, X as capturedViewportSize, Y as capturedFromCanvas, Z as releaseCapture, a as uploadImageBlob, c as useFloatingPosition, d as SelectionOutline, g as isSubmitEnter, j as Svg, l as onViewportChange, m as listenToKeydown, o as ElementPicker, p as listenOnPageAndWidget, r as deriveTitle, s as isWidgetOwned, u as visibleViewport, w as CloseIcon, z as SDK_VERSION } from "./submit-Cd-g1Dtg.js";
+import { a as REFLET_Z_INDEX } from "./react-context-Caq1fodf.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,8 +653,25 @@ 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}`;
+/** VS Code-family links want `/c:/dir/file.tsx` on Windows, `/dir/file.tsx` elsewhere. */
+const fileSchemeLink = (scheme) => (absolutePath, line, column) => {
+	const slashed = absolutePath.replaceAll("\\", "/");
+	const rooted = slashed.startsWith("/") ? slashed : `/${slashed}`;
+	return `${scheme}://file${encodeURI(rooted)}:${line}:${column}`;
+};
 const EDITOR_LINKS = {
 	cursor: fileSchemeLink("cursor"),
 	vscode: fileSchemeLink("vscode"),
@@ -758,6 +794,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 +831,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, {})
@@ -953,7 +990,7 @@ function DevtoolsSheet({ children, onClose, onPick, onSelectTab, side, tab, tabs
 	const isMoved = floating.position !== null;
 	const { rootRef } = floating;
 	useEffect(() => listenToKeydown(rootRef.current, (event) => {
-		if (event.key === "Escape") onClose();
+		if (event.key === "Escape" && !event.isComposing) onClose();
 	}), [onClose, rootRef]);
 	return /* @__PURE__ */ jsxs("aside", {
 		"aria-label": "Reflet devtools",
@@ -1000,7 +1037,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 +1113,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 {
@@ -3029,7 +3067,7 @@ const SNAPSHOT_MAX_WIDTH = 800;
 const OUTLINE_COLOR = "#4f46e5";
 const OUTLINE_WIDTH = 2;
 /** The element plus some room around it, grown to a readable minimum, kept inside the window. */
-function cropAround(rect) {
+function cropAround(rect, viewport) {
 	const grow = (start, length, limit) => {
 		const padded = Math.max(length + 64, MIN_CROP_SIZE);
 		const from = Math.max(0, start + length / 2 - padded / 2);
@@ -3039,8 +3077,8 @@ function cropAround(rect) {
 			to
 		};
 	};
-	const horizontal = grow(rect.left, rect.width, window.innerWidth);
-	const vertical = grow(rect.top, rect.height, window.innerHeight);
+	const horizontal = grow(rect.left, rect.width, viewport.width);
+	const vertical = grow(rect.top, rect.height, viewport.height);
 	return {
 		height: vertical.to - vertical.from,
 		width: horizontal.to - horizontal.from,
@@ -3068,8 +3106,9 @@ async function captureElementSnapshot(element) {
 	try {
 		const rect = box.getBoundingClientRect();
 		if (rect.width === 0 || rect.height === 0) return null;
-		const scale = page.width / window.innerWidth;
-		const crop = cropAround(rect);
+		const viewport = capturedViewportSize();
+		const scale = page.width / viewport.width;
+		const crop = cropAround(rect, viewport);
 		const canvas = document.createElement("canvas");
 		canvas.width = Math.round(crop.width * scale);
 		canvas.height = Math.round(crop.height * scale);
@@ -3301,6 +3340,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 +3379,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 +3399,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,
@@ -3408,7 +3463,7 @@ function NoteEditor({ initialText, noteId, onDone }) {
 		className: "dt-field",
 		onChange: (event) => setText(event.target.value),
 		onKeyDown: (event) => {
-			if (event.key === "Enter" && !event.shiftKey) {
+			if (isSubmitEnter(event.nativeEvent)) {
 				event.preventDefault();
 				save();
 			}
@@ -3855,7 +3910,7 @@ function NotePopover({ anchor, notes, onClose, onOpenCode }) {
 		};
 		const stopOutsidePress = listenOnPageAndWidget(popoverRef.current, "pointerdown", closeOnOutsidePress, true);
 		const stopKeys = listenToKeydown(popoverRef.current, (event) => {
-			if (event.key === "Escape") onClose();
+			if (event.key === "Escape" && !event.isComposing) onClose();
 		});
 		return () => {
 			stopOutsidePress();
@@ -3943,7 +3998,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 +4117,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 +4179,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 +4191,4 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 //#endregion
 export { DevtoolsLayer };
 
-//# sourceMappingURL=devtools-layer-DOECMj0S.js.map
+//# sourceMappingURL=devtools-layer-DgmM3RhW.js.map