reflet-sdk 0.6.5 → 0.6.7

package/dist/{devtools-layer-CEjzYGBB.js → devtools-layer-OjTo9_eb.js}

@@ -1,93 +1,9 @@
-import { a as EDITORS, n as DEVTOOLS_REQUEST_HEADER, r as DEVTOOLS_ROUTE_BASE, t as DEVTOOLS_ENDPOINTS } from "./protocol-ClqTFzwR.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-MvVjNdYc.js";
-import { a as REFLET_Z_INDEX } from "./react-context-Caq1fodf.js";
+import { $ as shortenSourcePath, G as describeElement, Q as resolveComponentStack, R as DEFAULT_WIDGET_LABELS, U as buildElementSelection, V as collectPageContext, X as getFiberFromNode, a as uploadBlob, f as listenOnPageAndWidget, g as isSubmitEnter, it as releaseCapture, nt as capturedFromCanvas, o as ElementPicker, p as listenToKeydown, r as deriveTitle, rt as capturedViewportSize, s as isWidgetOwned, tt as captureViewport, z as SDK_VERSION } from "./submit-DZX0f2_0.js";
+import { t as SelectionOutline } from "./selection-outline-NzAAAZXR.js";
+import { A as announce, C as searchCode, D as openDatabase, E as describeStorageFailure, O as settle, S as probeDevRoute, T as committed, a as DevtoolsBar, b as fetchBoardFeedback, c as copyToClipboard, f as SessionWorkspaceProvider, g as devtoolsTransport, j as reportFailure, k as Notices, l as SESSIONS_STYLES, m as useWorkspaceLoader, n as DEVTOOLS_STYLES, o as DevtoolsBarButtons, r as DevtoolsSheet, t as SessionsPanel, u as RecordingLayer, v as callReflet, w as startBoardConnect, x as fetchSourceFile, y as disconnectBoard } from "./sessions-panel-CkxIekZX.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";
-//#region src/devtools/client/route/dev-route.ts
-const INBOX_PAGE_SIZE = 50;
-var DevRouteError = class extends Error {
-	status;
-	constructor(message, status) {
-		super(message);
-		this.name = "DevRouteError";
-		this.status = status;
-	}
-};
-function isBoardAccess(value) {
-	if (typeof value !== "object" || value === null || !("kind" in value)) return false;
-	switch (value.kind) {
-		case "secretKey": return true;
-		case "connected": return "organizationName" in value && typeof value.organizationName === "string";
-		case "disconnected": return "canConnect" in value && typeof value.canConnect === "boolean";
-		default: return false;
-	}
-}
-function isDevtoolsStatus(value) {
-	return typeof value === "object" && value !== null && "marker" in value && value.marker === "reflet-devtools" && "board" in value && isBoardAccess(value.board) && "editor" in value && EDITORS.some((known) => known === value.editor);
-}
-async function callDevRoute(endpoint, init = {}) {
-	const search = init.query ? `?${new URLSearchParams(init.query)}` : "";
-	const response = await fetch(`${DEVTOOLS_ROUTE_BASE}${endpoint}${search}`, {
-		body: init.body === void 0 ? void 0 : JSON.stringify(init.body),
-		headers: {
-			"Content-Type": "application/json",
-			[DEVTOOLS_REQUEST_HEADER]: "1"
-		},
-		method: init.method ?? "GET"
-	});
-	if (!response.ok) {
-		const body = await response.json().catch(() => null);
-		const routeError = typeof body === "object" && body !== null && "error" in body ? body.error : null;
-		throw new DevRouteError(typeof routeError === "string" ? routeError : `The Reflet dev route answered ${response.status}.`, response.status);
-	}
-	return await response.json();
-}
-async function probeDevRoute() {
-	try {
-		const status = await callDevRoute(DEVTOOLS_ENDPOINTS.status);
-		return isDevtoolsStatus(status) ? status : null;
-	} catch {
-		return null;
-	}
-}
-function startBoardConnect(publicKey) {
-	return callDevRoute(DEVTOOLS_ENDPOINTS.connectStart, {
-		body: { publicKey },
-		method: "POST"
-	});
-}
-function disconnectBoard() {
-	return callDevRoute(DEVTOOLS_ENDPOINTS.disconnect, {
-		body: {},
-		method: "POST"
-	});
-}
-function fetchSourceFile(request) {
-	const query = { file: request.fileName };
-	if (request.line !== null) query.line = String(request.line);
-	if (request.column !== null) query.column = String(request.column);
-	return callDevRoute(DEVTOOLS_ENDPOINTS.source, { query });
-}
-function searchCode(text) {
-	return callDevRoute(DEVTOOLS_ENDPOINTS.search, { query: { q: text } });
-}
-function callReflet(apiPath, init = {}) {
-	return callDevRoute(`${DEVTOOLS_ENDPOINTS.proxy}${apiPath}`, {
-		body: init.body,
-		method: init.body === void 0 ? "GET" : "POST",
-		query: init.query
-	});
-}
-function fetchBoardFeedback(pagePath) {
-	const query = {
-		limit: String(INBOX_PAGE_SIZE),
-		sortBy: "newest"
-	};
-	if (pagePath !== null) query.pagePath = pagePath;
-	return callReflet("/api/v1/feedback/list", { query });
-}
-//#endregion
 //#region src/devtools/client/copy-button.tsx
 const COPIED_FEEDBACK_MS = 1600;
 function CopyButton({ label, text, variant }) {
@@ -455,73 +371,6 @@ function InboxPanel({ onOpenCode, onShowSelector }) {
 	}, scope)] });
 }
 //#endregion
-//#region src/devtools/client/notices.tsx
-const STATUS_VISIBLE_MS = 2400;
-let notices = [];
-let nextNoticeId = 1;
-const listeners = /* @__PURE__ */ new Set();
-function publish(next) {
-	notices = next;
-	for (const listener of listeners) listener();
-}
-function dismissNotice(id) {
-	publish(notices.filter((notice) => notice.id !== id));
-}
-/** Same message twice replaces the first, so a failing retry never stacks up. */
-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);
-}
-function Notices() {
-	const current = useSyncExternalStore(subscribe, () => notices, () => notices);
-	if (current.length === 0) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "dt-notices",
-		children: current.map((notice) => /* @__PURE__ */ jsxs("div", {
-			className: "dt-notice glass",
-			"data-kind": notice.kind,
-			role: notice.kind === "failure" ? "alert" : "status",
-			children: [
-				/* @__PURE__ */ jsx("p", { children: notice.message }),
-				notice.retry && /* @__PURE__ */ jsx("button", {
-					className: "dt-btn",
-					onClick: () => {
-						dismissNotice(notice.id);
-						notice.retry?.();
-					},
-					type: "button",
-					children: "Retry"
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"aria-label": "Dismiss",
-					className: "icon-btn",
-					onClick: () => dismissNotice(notice.id),
-					type: "button",
-					children: /* @__PURE__ */ jsx(CloseIcon, {})
-				})
-			]
-		}, notice.id))
-	});
-}
-//#endregion
 //#region src/devtools/client/route/route-hint.tsx
 function MissingRouteHint({ purpose }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -652,586 +501,6 @@ function BoardTab({ canConnect, onOpenCode, onShowSelector, publicKey, refresh,
 		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
-/** 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"),
-	webstorm: (absolutePath, line, column) => `webstorm://open?${new URLSearchParams({
-		column: String(column),
-		file: absolutePath,
-		line: String(line)
-	})}`,
-	windsurf: fileSchemeLink("windsurf"),
-	zed: fileSchemeLink("zed")
-};
-function editorUrl(editor, absolutePath, line, column) {
-	return EDITOR_LINKS[editor](absolutePath, line ?? 1, (column ?? 0) + 1);
-}
-//#endregion
-//#region src/devtools/client/code/code-panel.tsx
-function markedRange(file) {
-	if (file.elementLines) return file.elementLines;
-	return file.line === null ? null : {
-		end: file.line,
-		start: file.line
-	};
-}
-function SourceView({ file }) {
-	const firstMarkedRef = useRef(null);
-	const marked = markedRange(file);
-	const lines = file.code.split("\n").map((text, index) => ({
-		number: index + 1,
-		text
-	}));
-	useEffect(() => {
-		firstMarkedRef.current?.scrollIntoView({ block: "center" });
-	}, []);
-	return /* @__PURE__ */ jsx("pre", {
-		className: "dt-code",
-		children: /* @__PURE__ */ jsx("code", {
-			className: "dt-code-lines",
-			children: lines.map(({ number, text }) => {
-				const isMarked = marked !== null && number >= marked.start && number <= marked.end;
-				return /* @__PURE__ */ jsxs("span", {
-					className: "dt-line",
-					"data-marked": isMarked,
-					ref: number === marked?.start ? firstMarkedRef : void 0,
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "dt-line-number",
-						children: number
-					}), /* @__PURE__ */ jsx("span", { children: text || " " })]
-				}, number);
-			})
-		})
-	});
-}
-function CodePanel({ editor, target }) {
-	const [state, setState] = useState({ kind: "loading" });
-	const { request } = target;
-	useEffect(() => {
-		let active = true;
-		fetchSourceFile(request).then((file) => active && setState({
-			file,
-			kind: "ready"
-		})).catch((error) => active && setState({
-			kind: "failed",
-			message: error instanceof Error ? error.message : "Could not read the file."
-		}));
-		return () => {
-			active = false;
-		};
-	}, [request]);
-	if (state.kind === "loading") return /* @__PURE__ */ jsxs("p", {
-		className: "dt-status",
-		children: [
-			"Opening ",
-			request.fileName,
-			"…"
-		]
-	});
-	if (state.kind === "failed") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
-		className: "dt-code-path",
-		children: request.fileName
-	}), /* @__PURE__ */ jsx("p", {
-		className: "dt-error",
-		children: state.message
-	})] });
-	const { file } = state;
-	const location = file.line === null ? file.path : `${file.path}:${file.line}`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "dt-code-head",
-		children: [
-			/* @__PURE__ */ jsx("p", {
-				className: "dt-card-title",
-				children: target.title
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "dt-code-path",
-				children: location
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "dt-actions",
-				children: [/* @__PURE__ */ jsx("a", {
-					className: "dt-btn",
-					"data-variant": "primary",
-					href: editorUrl(editor, file.absolutePath, file.line, file.column),
-					children: "Open in editor"
-				}), /* @__PURE__ */ jsx(CopyButton, {
-					label: "Copy path",
-					text: location
-				})]
-			})
-		]
-	}), /* @__PURE__ */ jsx(SourceView, { file })] });
-}
-//#endregion
-//#region src/devtools/client/devtools-icons.tsx
-function NotesIcon() {
-	return /* @__PURE__ */ jsx(Svg, { children: /* @__PURE__ */ jsx("path", { d: "M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01" }) });
-}
-function InboxIcon() {
-	return /* @__PURE__ */ jsxs(Svg, { children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })] });
-}
-//#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,
-		"aria-pressed": pressed,
-		className: "icon-btn",
-		onClick,
-		title: label,
-		type: "button",
-		children
-	});
-}
-function DevtoolsBar({ edge, noteCount, onPick, onToggleSheet, openTab, side }) {
-	const floating = useFloatingPosition(`${edge}-${side}`, false, {
-		anchorSelector: ".dt-bar",
-		persistKey: BAR_POSITION_KEY
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		"aria-label": "Reflet devtools",
-		className: "dt-bar glass",
-		"data-edge": edge,
-		"data-moved": floating.position !== null,
-		"data-side": side,
-		ref: floating.rootRef,
-		role: "toolbar",
-		children: [
-			/* @__PURE__ */ jsx("style", { children: floating.styles }),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Move devtools (double-click to reset)",
-				className: "icon-btn drag-handle dt-grip",
-				onDoubleClick: floating.resetPosition,
-				title: "Drag to move · double-click to reset",
-				type: "button",
-				...floating.handleProps,
-				children: /* @__PURE__ */ jsx(GripIcon, {})
-			}),
-			/* @__PURE__ */ jsx(BarButton, {
-				label: PICK_BUTTON_LABEL,
-				onClick: onPick,
-				pressed: false,
-				children: /* @__PURE__ */ jsx(TargetIcon, {})
-			}),
-			/* @__PURE__ */ jsxs(BarButton, {
-				label: "Dev notes",
-				onClick: () => onToggleSheet("notes"),
-				pressed: openTab === "notes",
-				children: [/* @__PURE__ */ jsx(NotesIcon, {}), noteCount > 0 && /* @__PURE__ */ jsx("span", {
-					className: "dt-count",
-					children: noteCount
-				})]
-			}),
-			/* @__PURE__ */ jsx(BarButton, {
-				label: "Board feedback",
-				onClick: () => onToggleSheet("inbox"),
-				pressed: openTab === "inbox",
-				children: /* @__PURE__ */ jsx(InboxIcon, {})
-			})
-		]
-	});
-}
-//#endregion
-//#region src/devtools/client/use-sheet-size.ts
-const SIZE_KEY = "reflet-devtools-sheet-size";
-const DEFAULT_WIDTH = 440;
-const MIN_WIDTH = 320;
-const MIN_HEIGHT = 240;
-const KEYBOARD_STEP = 24;
-const ARROW_DELTAS = {
-	ArrowDown: {
-		dx: 0,
-		dy: KEYBOARD_STEP
-	},
-	ArrowLeft: {
-		dx: -24,
-		dy: 0
-	},
-	ArrowRight: {
-		dx: KEYBOARD_STEP,
-		dy: 0
-	},
-	ArrowUp: {
-		dx: 0,
-		dy: -24
-	}
-};
-function readStoredSize() {
-	const fallback = {
-		height: null,
-		width: DEFAULT_WIDTH
-	};
-	try {
-		const stored = JSON.parse(localStorage.getItem(SIZE_KEY) ?? "null");
-		if (typeof stored === "object" && stored !== null && "width" in stored && typeof stored.width === "number" && "height" in stored && (stored.height === null || typeof stored.height === "number")) return {
-			height: stored.height,
-			width: stored.width
-		};
-	} catch {
-		return fallback;
-	}
-	return fallback;
-}
-/**
-* The stored size is the preference; what renders is that preference fitted
-* to today's window, so shrinking the window never loses the chosen size.
-*/
-function fitted(size, viewport) {
-	const maxWidth = viewport.width - 24;
-	const maxHeight = viewport.height - 24;
-	return {
-		height: size.height === null || size.height >= maxHeight ? null : Math.max(Math.min(MIN_HEIGHT, maxHeight), size.height),
-		width: Math.min(maxWidth, Math.max(MIN_WIDTH, size.width))
-	};
-}
-/**
-* Width grows away from the docked side, height grows downward from the top;
-* a height reaching the bottom of the window snaps back to full height.
-*/
-function useSheetSize(side) {
-	const [preference, setPreference] = useState(readStoredSize);
-	const [viewport, setViewport] = useState(visibleViewport);
-	const drag = useRef(null);
-	const widthDirection = side === "right" ? -1 : 1;
-	const size = fitted(preference, viewport);
-	useEffect(() => onViewportChange(() => setViewport(visibleViewport())), []);
-	useEffect(() => {
-		try {
-			localStorage.setItem(SIZE_KEY, JSON.stringify(preference));
-		} catch {}
-	}, [preference]);
-	const resize = (axis, from, dx, dy) => {
-		const fullHeight = viewport.height - 24;
-		setPreference(fitted({
-			height: axis === "width" ? from.height : (from.height ?? fullHeight) + dy,
-			width: axis === "height" ? from.width : from.width + dx * widthDirection
-		}, viewport));
-	};
-	const handleProps = (axis) => ({
-		onDoubleClick: () => setPreference((current) => ({
-			height: axis === "width" ? current.height : null,
-			width: axis === "height" ? current.width : DEFAULT_WIDTH
-		})),
-		onKeyDown: (event) => {
-			const delta = ARROW_DELTAS[event.key];
-			if (!delta) return;
-			event.preventDefault();
-			const sheetHeight = event.currentTarget.parentElement?.getBoundingClientRect().height ?? null;
-			resize(axis, {
-				height: size.height ?? sheetHeight,
-				width: size.width
-			}, delta.dx, delta.dy);
-		},
-		onLostPointerCapture: () => {
-			drag.current = null;
-		},
-		onPointerDown: (event) => {
-			if (event.button !== 0) return;
-			const sheet = event.currentTarget.parentElement?.getBoundingClientRect();
-			event.currentTarget.setPointerCapture(event.pointerId);
-			drag.current = {
-				axis,
-				size: {
-					height: sheet?.height ?? size.height,
-					width: size.width
-				},
-				x: event.clientX,
-				y: event.clientY
-			};
-		},
-		onPointerMove: (event) => {
-			const start = drag.current;
-			if (start && event.currentTarget.hasPointerCapture(event.pointerId)) resize(start.axis, start.size, event.clientX - start.x, event.clientY - start.y);
-		}
-	});
-	return {
-		handleProps,
-		size
-	};
-}
-//#endregion
-//#region src/devtools/client/devtools-sheet.tsx
-const FULL_HEIGHT = "calc(100dvh - 24px)";
-const TAB_LABELS = {
-	code: "Code",
-	inbox: "Board",
-	notes: "Notes"
-};
-const SHEET_POSITION_KEY = "reflet-devtools-sheet-position";
-function DevtoolsSheet({ children, onClose, onPick, onSelectTab, side, tab, tabs }) {
-	const { handleProps, size } = useSheetSize(side);
-	const floating = useFloatingPosition(`top-${side}`, false, {
-		anchorSelector: ".dt-sheet",
-		persistKey: SHEET_POSITION_KEY
-	});
-	const isMoved = floating.position !== null;
-	const { rootRef } = floating;
-	useEffect(() => listenToKeydown(rootRef.current, (event) => {
-		if (event.key === "Escape" && !event.isComposing) onClose();
-	}), [onClose, rootRef]);
-	return /* @__PURE__ */ jsxs("aside", {
-		"aria-label": "Reflet devtools",
-		className: "dt-sheet glass",
-		"data-moved": isMoved,
-		"data-side": side,
-		ref: rootRef,
-		style: {
-			height: size.height ?? (isMoved ? FULL_HEIGHT : void 0),
-			width: size.width
-		},
-		children: [
-			/* @__PURE__ */ jsxs("style", { children: [floating.styles, isMoved ? "" : `.dt-bar[data-moved="false"][data-side="${side}"] { ${side}: ${size.width + 24}px; }`] }),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Resize panel width (double-click to reset)",
-				className: "dt-resize",
-				"data-axis": "width",
-				type: "button",
-				...handleProps("width")
-			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Resize panel height (double-click for full height)",
-				className: "dt-resize",
-				"data-axis": "height",
-				type: "button",
-				...handleProps("height")
-			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Resize panel (double-click to reset)",
-				className: "dt-resize",
-				"data-axis": "both",
-				type: "button",
-				...handleProps("both")
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "dt-sheet-head",
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": "Move panel (double-click to dock it back)",
-						className: "dt-sheet-drag",
-						onDoubleClick: floating.resetPosition,
-						title: "Drag to move · double-click to dock",
-						type: "button",
-						...floating.handleProps
-					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": PICK_BUTTON_LABEL,
-						className: "icon-btn",
-						onClick: onPick,
-						title: "Pick an element",
-						type: "button",
-						children: /* @__PURE__ */ jsx(TargetIcon, {})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "dt-tabs",
-						role: "tablist",
-						children: tabs.map((option) => /* @__PURE__ */ jsx("button", {
-							"aria-selected": option === tab,
-							className: "dt-tab",
-							onClick: () => onSelectTab(option),
-							role: "tab",
-							type: "button",
-							children: TAB_LABELS[option]
-						}, option))
-					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": "Close devtools panel",
-						className: "icon-btn",
-						onClick: onClose,
-						title: "Close",
-						type: "button",
-						children: /* @__PURE__ */ jsx(CloseIcon, {})
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "dt-sheet-body",
-				role: "tabpanel",
-				children
-			}, tab)
-		]
-	});
-}
-//#endregion
-//#region src/devtools/client/devtools-styles.ts
-const MONO_FONT = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
-const DEVTOOLS_STYLES = `
-.dt { font: 13px/1.45 var(--rf-font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--rf-text); }
-.dt[data-recessed="true"] .dt-bar, .dt[data-recessed="true"] .dt-sheet { visibility: hidden; pointer-events: none; }
-.dt-pin {
-  position: fixed; z-index: ${REFLET_Z_INDEX.widgetRoot}; top: 0; left: 0;
-  display: flex; align-items: center; justify-content: center;
-  min-width: 24px; height: 24px; padding: 0 7px;
-  border-radius: 12px 12px 12px 3px; background: var(--rf-accent); color: var(--rf-accent-text);
-  font-size: 11.5px; font-weight: 650; box-shadow: 0 0 0 2px var(--rf-bg), var(--rf-shadow-low);
-  animation: dt-pin-in 260ms var(--rf-ease);
-  transition: scale 140ms var(--rf-ease), opacity 160ms var(--rf-ease);
-}
-.dt-pin:hover, .dt-pin[aria-expanded="true"] { scale: 1.12; }
-.dt-pin[data-sent="true"] { background: var(--rf-text-muted); }
-.dt-pin-badge { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px 10px 10px 3px; background: var(--rf-accent); color: var(--rf-accent-text); font-size: 10.5px; font-weight: 650; }
-.dt-card[data-sent="true"] .dt-pin-badge { background: var(--rf-text-muted); }
-.dt-pin[data-locating="true"] { animation: dt-pin-in 260ms var(--rf-ease), dt-pin-pulse 1.2s ease-in-out infinite; }
-@keyframes dt-pin-in { from { scale: .4; opacity: 0; } }
-@keyframes dt-pin-pulse { 50% { box-shadow: 0 0 0 2px var(--rf-bg), 0 0 0 6px color-mix(in srgb, var(--rf-accent) 30%, transparent); } }
-.dt-popover {
-  position: fixed; z-index: ${REFLET_Z_INDEX.widgetRoot}; width: 320px; max-height: calc(100dvh - 24px); overflow: auto;
-  inset-inline-end: auto; margin: 0; padding: 6px; border-radius: 14px; background: transparent; color: inherit;
-  animation: dt-popover-in 200ms var(--rf-ease);
-}
-.dt-popover.glass::before { animation: rf-fade 180ms var(--rf-ease); }
-.dt-popover .dt-card { background: transparent; }
-@keyframes dt-popover-in { from { transform: translateY(4px); } }
-@keyframes dt-notice-in { from { transform: translateY(-6px); } }
-.dt-notices {
-  position: fixed; z-index: ${REFLET_Z_INDEX.annotatorOverlay}; left: 50%; top: 16px; translate: -50% 0;
-  display: flex; flex-direction: column; gap: 6px; width: min(460px, calc(100vw - 24px));
-}
-.dt-notice {
-  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 {
-  --dt-edge-gap: calc(max(var(--rf-offset), 12px) + 48px);
-  position: fixed; z-index: ${REFLET_Z_INDEX.devtoolsBar};
-  display: flex; align-items: center; gap: 2px; padding: 3px;
-  border-radius: var(--rf-pill);
-}
-.dt-bar[data-moved="false"] { transition: left 260ms var(--rf-ease), right 260ms var(--rf-ease); }
-.dt-bar[data-side="left"] { left: calc(var(--rf-viewport-left, 0px) + max(12px, var(--rf-offset))); }
-.dt-bar[data-side="right"] { right: calc(var(--rf-viewport-right, 0px) + max(12px, var(--rf-offset))); }
-.dt-bar[data-edge="bottom"] { bottom: calc(var(--rf-viewport-bottom, 0px) + env(safe-area-inset-bottom) + var(--dt-edge-gap)); }
-.dt-bar[data-edge="top"] { top: calc(var(--rf-viewport-top, 0px) + env(safe-area-inset-top) + var(--dt-edge-gap)); }
-.dt-bar .icon-btn { position: relative; width: 34px; height: 34px; }
-.dt-bar .icon-btn.dt-grip { width: 22px; color: var(--rf-text-muted); opacity: .6; }
-.dt-bar .icon-btn.dt-grip:hover { opacity: 1; }
-.dt-bar .icon-btn[aria-pressed="true"] { background: var(--rf-bg-hover); color: var(--rf-text); }
-.dt-count {
-  position: absolute; top: 1px; right: 1px; display: flex; align-items: center; justify-content: center;
-  min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--rf-pill);
-  background: var(--rf-accent); color: var(--rf-accent-text); font-size: 9.5px; font-weight: 600;
-}
-.dt-sheet {
-  --dt-enter-x: 20px;
-  position: fixed; z-index: ${REFLET_Z_INDEX.widgetRoot}; top: 12px; bottom: 12px;
-  display: flex; flex-direction: column; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
-  border-radius: 16px; overflow: hidden;
-  animation: dt-sheet-slide 320ms var(--rf-ease);
-}
-.dt-sheet[data-side="left"] { --dt-enter-x: -20px; left: 12px; }
-.dt-sheet[data-side="right"] { right: 12px; }
-.dt-sheet.glass::before { animation: rf-fade 220ms var(--rf-ease); }
-.dt-sheet-head, .dt-sheet-body { animation: rf-fade 260ms 60ms var(--rf-ease) both; }
-@keyframes dt-sheet-slide { from { transform: translateX(var(--dt-enter-x)); box-shadow: none; } }
-.dt-resize { position: absolute; z-index: 2; padding: 0; touch-action: none; }
-.dt-resize:active:not(:disabled) { scale: 1; }
-.dt-resize:focus-visible { outline: none; }
-.dt-resize[data-axis="width"] { top: 16px; bottom: 16px; width: 10px; cursor: ew-resize; }
-.dt-sheet[data-side="right"] .dt-resize[data-axis="width"] { left: 0; }
-.dt-sheet[data-side="left"] .dt-resize[data-axis="width"] { right: 0; }
-.dt-resize[data-axis="height"] { left: 16px; right: 16px; bottom: 0; height: 10px; cursor: ns-resize; }
-.dt-resize[data-axis="both"] { bottom: 0; width: 16px; height: 16px; }
-.dt-sheet[data-side="right"] .dt-resize[data-axis="both"] { left: 0; cursor: nesw-resize; }
-.dt-sheet[data-side="left"] .dt-resize[data-axis="both"] { right: 0; cursor: nwse-resize; }
-.dt-resize[data-axis="width"]::after, .dt-resize[data-axis="height"]::after {
-  content: ""; position: absolute; border-radius: var(--rf-pill); background: var(--rf-text-muted);
-  opacity: 0; transition: opacity 160ms var(--rf-ease);
-}
-.dt-resize[data-axis="width"]::after { top: 50%; left: 3px; width: 4px; height: 36px; translate: 0 -50%; }
-.dt-resize[data-axis="height"]::after { left: 50%; top: 3px; width: 36px; height: 4px; translate: -50% 0; }
-.dt-resize:hover::after, .dt-resize:focus-visible::after, .dt-resize:active::after { opacity: .5; }
-.dt-sheet-head { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--rf-border); }
-.dt-sheet-head > :not(.dt-sheet-drag) { position: relative; z-index: 1; }
-.dt-sheet-head .icon-btn { width: 32px; height: 32px; }
-.dt-sheet .dt-sheet-drag { position: absolute; inset: 0; z-index: 0; padding: 0; border-radius: 0; cursor: grab; touch-action: none; }
-.dt-sheet .dt-sheet-drag::before { content: ""; position: absolute; top: 4px; left: 50%; width: 36px; height: 4px; translate: -50% 0; border-radius: var(--rf-pill); background: var(--rf-text-muted); opacity: .3; transition: opacity 160ms var(--rf-ease); }
-.dt-sheet .dt-sheet-drag:hover::before, .dt-sheet .dt-sheet-drag:active::before { opacity: .7; }
-.dt-sheet .dt-sheet-drag:active:not(:disabled) { cursor: grabbing; scale: 1; }
-.dt-sheet .dt-sheet-drag:focus-visible { outline-offset: -2px; }
-.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"], .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;
-  margin: auto -10px -10px; padding: 10px; border-top: 1px solid var(--rf-border); background: var(--rf-bg);
-}
-.dt-archived { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px dashed var(--rf-border); border-radius: 12px; }
-.dt-archived .dt-meta { flex: 1 1 100%; }
-.dt-group { margin: 6px 2px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rf-text-muted); }
-.dt-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--rf-bg-subtle); }
-.dt-card[data-sent="true"] { opacity: .7; }
-.dt-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
-.dt-card-title { min-width: 0; margin: 0; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
-.dt-meta { margin: 0; font-size: 11.5px; color: var(--rf-text-muted); overflow-wrap: anywhere; }
-.dt-note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
-.dt-chip { flex: none; padding: 1px 7px; border-radius: var(--rf-pill); background: var(--rf-bg-hover); color: var(--rf-text-muted); font-size: 10.5px; font-weight: 600; }
-.dt-chip[data-tone="accent"] { background: color-mix(in srgb, var(--rf-accent) 16%, transparent); color: var(--rf-accent); }
-.dt-source { padding: 0; font: 11.5px/1.4 ${MONO_FONT}; color: var(--rf-accent); text-align: left; overflow-wrap: anywhere; }
-.dt-source:hover { text-decoration: underline; }
-.dt-thumb { display: block; align-self: flex-start; max-width: 100%; height: auto; max-height: 132px; object-fit: contain; border-radius: 8px; box-shadow: var(--rf-shadow-inset); }
-.dt-actions { display: flex; flex-wrap: wrap; gap: 4px; }
-.dt-btn {
-  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
-  border-radius: var(--rf-pill); background: var(--rf-bg-hover); color: var(--rf-text);
-  font-size: 12px; font-weight: 500; text-decoration: none;
-}
-.dt-btn:hover { background: color-mix(in srgb, var(--rf-text) 12%, transparent); }
-.dt-btn[data-variant="primary"] { background: var(--rf-primary); color: var(--rf-primary-text); }
-.dt-btn[data-variant="danger"] { color: var(--rf-danger); }
-.dt-empty { margin: auto; padding: 24px 16px; color: var(--rf-text-muted); font-size: 12.5px; text-align: center; }
-.dt-empty p { margin: 0 0 8px; }
-.dt-empty code, .dt-hint code { padding: 1px 4px; border-radius: 4px; background: var(--rf-bg-hover); font: 11.5px ${MONO_FONT}; overflow-wrap: anywhere; }
-.dt-hint { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--rf-bg-subtle); color: var(--rf-text-muted); font-size: 12px; }
-.dt-error { margin: 0; color: var(--rf-danger); font-size: 12px; }
-.dt-status { margin: 0 auto 0 0; color: var(--rf-text-muted); font-size: 12px; }
-.dt-field {
-  width: 100%; padding: 7px 9px; border: 1px solid var(--rf-border); border-radius: 8px;
-  background: var(--rf-bg); color: var(--rf-text); font: inherit; resize: vertical;
-}
-.dt-field:focus { outline: 2px solid var(--rf-accent); outline-offset: 0; }
-.dt-search { display: flex; gap: 6px; }
-.dt-matches { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
-.dt-match { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 6px 8px; border-radius: 8px; text-align: left; }
-.dt-match:hover { background: var(--rf-bg-hover); }
-.dt-match code { font: 11.5px ${MONO_FONT}; color: var(--rf-accent); }
-.dt-match span { font: 11.5px ${MONO_FONT}; color: var(--rf-text-muted); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
-.dt-code-head { display: flex; flex-direction: column; gap: 6px; }
-.dt-code-path { margin: 0; font: 12px/1.4 ${MONO_FONT}; overflow-wrap: anywhere; }
-.dt-code { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 8px 0; border-radius: 10px; background: var(--rf-bg-subtle); font: 12px/1.6 ${MONO_FONT}; }
-.dt-code-lines { display: table; min-width: 100%; }
-.dt-line { display: table-row; white-space: pre; }
-.dt-line > span { display: table-cell; padding-right: 14px; }
-.dt-line > .dt-line-number { width: 1%; padding: 0 12px 0 10px; color: var(--rf-text-muted); text-align: right; user-select: none; }
-.dt-line[data-marked="true"] { background: color-mix(in srgb, var(--rf-accent) 16%, transparent); }
-.dt-line[data-marked="true"] > .dt-line-number { color: var(--rf-accent); }
-`;
 /**
 * @license bippy
 *
@@ -2998,50 +2267,228 @@ const $ = (e) => {
 };
 new Set([Z, ...Object.values(Q)].map((e) => $(e.name)));
 //#endregion
-//#region src/devtools/client/element-source.ts
-const MAX_FIBER_ASCENT = 12;
-const DEPENDENCY_FILE = /[\\/]node_modules[\\/]|^node_modules[\\/]/;
-const ROOTED_OR_BUNDLER_NAME = /^(?:\/|\[|[a-z][\w+.-]*:)/i;
-/**
-* Vite's maps list sources relative to the served module (`main.tsx` for
-* `/src/main.tsx`) and bippy hands them back as-is.
-*/
-function resolveAgainstModule(fileName, moduleUrl) {
-	if (!moduleUrl || ROOTED_OR_BUNDLER_NAME.test(fileName)) return fileName;
-	try {
-		return new URL(fileName, moduleUrl).pathname;
-	} catch {
-		return fileName;
-	}
+//#region src/devtools/client/element-source.ts
+const MAX_FIBER_ASCENT = 12;
+const DEPENDENCY_FILE = /[\\/]node_modules[\\/]|^node_modules[\\/]/;
+const ROOTED_OR_BUNDLER_NAME = /^(?:\/|\[|[a-z][\w+.-]*:)/i;
+/**
+* Vite's maps list sources relative to the served module (`main.tsx` for
+* `/src/main.tsx`) and bippy hands them back as-is.
+*/
+function resolveAgainstModule(fileName, moduleUrl) {
+	if (!moduleUrl || ROOTED_OR_BUNDLER_NAME.test(fileName)) return fileName;
+	try {
+		return new URL(fileName, moduleUrl).pathname;
+	} catch {
+		return fileName;
+	}
+}
+const SERVER_CREATION_FRAME = /\(((?:about|rsc):\/\/React\/Server\/[^\s)]+):(\d+):(\d+)\)/;
+/** The browser cannot map these; the dev route reads the server chunk's map from disk. */
+function serverCreationSite(fiber) {
+	const stack = fiber._debugStack instanceof Error ? fiber._debugStack.stack : void 0;
+	const match = stack ? SERVER_CREATION_FRAME.exec(stack) : null;
+	if (!match?.[1]) return null;
+	return {
+		column: Number(match[3]) - 1,
+		fileName: match[1],
+		line: Number(match[2])
+	};
+}
+/** Source-mapped through the dev server: React's own debug stacks point at bundled chunks. */
+async function locateElementSource(element) {
+	const hostFiber = getFiberFromNode(element);
+	let fiber = T$1(hostFiber) ? hostFiber : null;
+	for (let depth = 0; fiber && depth < MAX_FIBER_ASCENT; depth++) {
+		const serverSite = serverCreationSite(fiber);
+		if (serverSite) return serverSite;
+		const source = await Rt(fiber).catch(() => null);
+		if (source && Ht(source.fileName) && !DEPENDENCY_FILE.test(source.fileName)) return {
+			column: source.columnNumber ?? null,
+			fileName: resolveAgainstModule(source.fileName, It(fiber)?.fileName),
+			line: source.lineNumber ?? null
+		};
+		fiber = fiber.return;
+	}
+	return null;
+}
+//#endregion
+//#region src/devtools/client/code/editor-url.ts
+/** 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"),
+	webstorm: (absolutePath, line, column) => `webstorm://open?${new URLSearchParams({
+		column: String(column),
+		file: absolutePath,
+		line: String(line)
+	})}`,
+	windsurf: fileSchemeLink("windsurf"),
+	zed: fileSchemeLink("zed")
+};
+function editorUrl(editor, absolutePath, line, column) {
+	return EDITOR_LINKS[editor](absolutePath, line ?? 1, (column ?? 0) + 1);
+}
+//#endregion
+//#region src/devtools/client/code/code-panel.tsx
+function markedRange(file) {
+	if (file.elementLines) return file.elementLines;
+	return file.line === null ? null : {
+		end: file.line,
+		start: file.line
+	};
+}
+function SourceView({ file }) {
+	const firstMarkedRef = useRef(null);
+	const marked = markedRange(file);
+	const lines = file.code.split("\n").map((text, index) => ({
+		number: index + 1,
+		text
+	}));
+	useEffect(() => {
+		firstMarkedRef.current?.scrollIntoView({ block: "center" });
+	}, []);
+	return /* @__PURE__ */ jsx("pre", {
+		className: "dt-code",
+		children: /* @__PURE__ */ jsx("code", {
+			className: "dt-code-lines",
+			children: lines.map(({ number, text }) => {
+				const isMarked = marked !== null && number >= marked.start && number <= marked.end;
+				return /* @__PURE__ */ jsxs("span", {
+					className: "dt-line",
+					"data-marked": isMarked,
+					ref: number === marked?.start ? firstMarkedRef : void 0,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "dt-line-number",
+						children: number
+					}), /* @__PURE__ */ jsx("span", { children: text || " " })]
+				}, number);
+			})
+		})
+	});
+}
+function CodePanel({ editor, target }) {
+	const [state, setState] = useState({ kind: "loading" });
+	const { request } = target;
+	useEffect(() => {
+		let active = true;
+		fetchSourceFile(request).then((file) => active && setState({
+			file,
+			kind: "ready"
+		})).catch((error) => active && setState({
+			kind: "failed",
+			message: error instanceof Error ? error.message : "Could not read the file."
+		}));
+		return () => {
+			active = false;
+		};
+	}, [request]);
+	if (state.kind === "loading") return /* @__PURE__ */ jsxs("p", {
+		className: "dt-status",
+		children: [
+			"Opening ",
+			request.fileName,
+			"…"
+		]
+	});
+	if (state.kind === "failed") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+		className: "dt-code-path",
+		children: request.fileName
+	}), /* @__PURE__ */ jsx("p", {
+		className: "dt-error",
+		children: state.message
+	})] });
+	const { file } = state;
+	const location = file.line === null ? file.path : `${file.path}:${file.line}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "dt-code-head",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "dt-card-title",
+				children: target.title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "dt-code-path",
+				children: location
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dt-actions",
+				children: [/* @__PURE__ */ jsx("a", {
+					className: "dt-btn",
+					"data-variant": "primary",
+					href: editorUrl(editor, file.absolutePath, file.line, file.column),
+					children: "Open in editor"
+				}), /* @__PURE__ */ jsx(CopyButton, {
+					label: "Copy path",
+					text: location
+				})]
+			})
+		]
+	}), /* @__PURE__ */ jsx(SourceView, { file })] });
+}
+//#endregion
+//#region src/devtools/client/code/code-tab.tsx
+function titleFor(element) {
+	const owner = resolveComponentStack(getFiberFromNode(element))[0];
+	const label = describeElement(element);
+	return owner ? `<${owner}> ${label}` : label;
 }
-const SERVER_CREATION_FRAME = /\(((?:about|rsc):\/\/React\/Server\/[^\s)]+):(\d+):(\d+)\)/;
-/** The browser cannot map these; the dev route reads the server chunk's map from disk. */
-function serverCreationSite(fiber) {
-	const stack = fiber._debugStack instanceof Error ? fiber._debugStack.stack : void 0;
-	const match = stack ? SERVER_CREATION_FRAME.exec(stack) : null;
-	if (!match?.[1]) return null;
+function useCodeLookup(showCodeTab) {
+	const [codeLookup, setCodeLookup] = useState(null);
+	const openCode = useCallback((target) => {
+		setCodeLookup({
+			kind: "located",
+			target
+		});
+		showCodeTab("code");
+	}, [showCodeTab]);
 	return {
-		column: Number(match[3]) - 1,
-		fileName: match[1],
-		line: Number(match[2])
+		codeLookup,
+		inspectElement: useCallback((element) => {
+			const title = titleFor(element);
+			setCodeLookup({
+				element,
+				kind: "locating",
+				title
+			});
+			showCodeTab("code");
+			locateElementSource(element).catch(() => null).then((request) => setCodeLookup((current) => {
+				if (!(current?.kind === "locating" && current.element === element)) return current;
+				return request ? {
+					kind: "located",
+					target: {
+						request,
+						title
+					}
+				} : {
+					kind: "unlocated",
+					title
+				};
+			}));
+		}, [showCodeTab]),
+		openCode
 	};
 }
-/** Source-mapped through the dev server: React's own debug stacks point at bundled chunks. */
-async function locateElementSource(element) {
-	const hostFiber = getFiberFromNode(element);
-	let fiber = T$1(hostFiber) ? hostFiber : null;
-	for (let depth = 0; fiber && depth < MAX_FIBER_ASCENT; depth++) {
-		const serverSite = serverCreationSite(fiber);
-		if (serverSite) return serverSite;
-		const source = await Rt(fiber).catch(() => null);
-		if (source && Ht(source.fileName) && !DEPENDENCY_FILE.test(source.fileName)) return {
-			column: source.columnNumber ?? null,
-			fileName: resolveAgainstModule(source.fileName, It(fiber)?.fileName),
-			line: source.lineNumber ?? null
-		};
-		fiber = fiber.return;
-	}
-	return null;
+function CodeTab({ lookup, route }) {
+	if (route.kind === "missing") return /* @__PURE__ */ jsx(MissingRouteHint, { purpose: "read your source files here" });
+	if (lookup.kind === "locating" || route.kind === "checking") return /* @__PURE__ */ jsx("p", {
+		className: "dt-status",
+		children: "Locating the source…"
+	});
+	if (lookup.kind === "unlocated") return /* @__PURE__ */ jsxs("div", {
+		className: "dt-empty",
+		children: [/* @__PURE__ */ jsx("p", { children: lookup.title }), /* @__PURE__ */ jsx("p", { children: "React did not record where this element was written: it comes from a library, or this page is a production build." })]
+	});
+	const { request } = lookup.target;
+	return /* @__PURE__ */ jsx(CodePanel, {
+		editor: route.status.editor,
+		target: lookup.target
+	}, `${request.fileName}:${request.line}:${request.column}`);
 }
 //#endregion
 //#region src/devtools/client/find-on-page.ts
@@ -3137,28 +2584,16 @@ const SERVER_SNAPSHOT = {
 	notes: [],
 	status: "loading"
 };
-/** Executor form: the SDK targets ES2022, before `Promise.withResolvers`. */
-function settle(request) {
-	return new Promise((resolve, reject) => {
-		request.onsuccess = () => resolve(request.result);
-		request.onerror = () => reject(request.error);
-	});
-}
-function committed(transaction) {
-	return new Promise((resolve, reject) => {
-		transaction.oncomplete = () => resolve();
-		transaction.onerror = () => reject(transaction.error);
-		transaction.onabort = () => reject(transaction.error);
+function openNotesDatabase() {
+	return openDatabase({
+		name: DATABASE_NAME,
+		upgrade: (database) => {
+			database.createObjectStore(NOTES, { keyPath: "id" });
+			database.createObjectStore(PAYLOADS, { keyPath: "noteId" });
+		},
+		version: DATABASE_VERSION
 	});
 }
-function openDatabase() {
-	const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
-	request.onupgradeneeded = () => {
-		request.result.createObjectStore(NOTES, { keyPath: "id" });
-		request.result.createObjectStore(PAYLOADS, { keyPath: "noteId" });
-	};
-	return settle(request);
-}
 function newestFirst(notes) {
 	return [...notes].sort((a, b) => b.createdAt - a.createdAt);
 }
@@ -3174,9 +2609,6 @@ function pinNumbers(notes, pathname) {
 	const onPage = notes.filter((note) => isActiveNote(note) && isNoteOnPage(note, pathname)).sort((a, b) => a.createdAt - b.createdAt);
 	return new Map(onPage.map((note, index) => [note.id, index + 1]));
 }
-function describeFailure(error) {
-	return error instanceof Error ? error.message : "IndexedDB is unavailable in this browser.";
-}
 /**
 * The list is what IndexedDB holds with every in-flight change laid on top:
 * a change shows at once, a reload from another tab never drops it, and a
@@ -3205,7 +2637,7 @@ function createNoteStore() {
 		for (const listener of listeners) listener();
 	};
 	const connect = () => {
-		database ??= openDatabase();
+		database ??= openNotesDatabase();
 		return database;
 	};
 	/** Loads the notes and drops archives past their day, in one readwrite pass. */
@@ -3228,7 +2660,7 @@ function createNoteStore() {
 		} catch (error) {
 			stored = [];
 			publish({
-				error: describeFailure(error),
+				error: describeStorageFailure(error),
 				status: "failed"
 			});
 		}
@@ -3253,7 +2685,7 @@ function createNoteStore() {
 			channel?.postMessage("changed");
 		} catch (error) {
 			settleChange(null);
-			throw new Error(describeFailure(error));
+			throw new Error(describeStorageFailure(error));
 		}
 	};
 	const patchStoredNote = (transaction, noteId, patch) => {
@@ -3296,7 +2728,8 @@ function createNoteStore() {
 			});
 		},
 		readCloseUp: async (noteId) => {
-			return (await settle((await connect()).transaction(PAYLOADS, "readonly").objectStore(PAYLOADS).get(noteId)))?.closeUp ?? null;
+			const store = (await connect()).transaction(PAYLOADS, "readonly").objectStore(PAYLOADS);
+			return (await settle(store.get(noteId)))?.closeUp ?? null;
 		},
 		remove: (noteIds) => {
 			const removedIds = new Set(noteIds);
@@ -3631,7 +3064,7 @@ function reportContext(note) {
 }
 async function attachCloseUp(note, feedbackId, closeUp) {
 	const { uploadUrl } = await callReflet("/api/v1/feedback/screenshot/upload-url", { body: {} });
-	const storageId = await uploadImageBlob(uploadUrl, closeUp);
+	const storageId = await uploadBlob(uploadUrl, closeUp);
 	await callReflet("/api/v1/feedback/screenshot/save", { body: {
 		captureSource: "element",
 		feedbackId,
@@ -3992,6 +3425,84 @@ function useDevRoute() {
 	};
 }
 //#endregion
+//#region src/devtools/client/sessions/devtools-sessions.tsx
+const DEVTOOLS_TRANSPORT = devtoolsTransport();
+/** Sessions go through the dev route with the developer's own Connect token, never the secret key. */
+function useDevtoolsSessions(options) {
+	const { route } = options;
+	const isConnected = route.kind === "ready" && route.status.board.kind === "connected";
+	const state = useWorkspaceLoader({
+		onUnauthorized: options.onUnauthorized,
+		surface: "devtools",
+		transport: isConnected ? DEVTOOLS_TRANSPORT : null
+	});
+	const [open, setOpen] = useState(null);
+	return {
+		navigation: {
+			onOpen: setOpen,
+			open
+		},
+		state
+	};
+}
+function SessionsScope({ children, sessions }) {
+	const workspace = sessions.state.kind === "ready" ? sessions.state.workspace : null;
+	return /* @__PURE__ */ jsx(SessionWorkspaceProvider, {
+		workspace,
+		children
+	});
+}
+function ConnectHint({ onConnect }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dt-empty",
+		children: [/* @__PURE__ */ jsx("p", { children: "Sessions are saved under your Reflet account. Connect in the Board tab." }), /* @__PURE__ */ jsx("button", {
+			className: "dt-btn",
+			onClick: onConnect,
+			type: "button",
+			children: "Open the Board tab"
+		})]
+	});
+}
+function WorkspaceGate({ actions, sessions }) {
+	const { state } = sessions;
+	if (state.kind === "ready") return /* @__PURE__ */ jsx(SessionsPanel, {
+		navigation: sessions.navigation,
+		onStarted: actions.onStarted,
+		onWriteNote: actions.onWriteNote
+	});
+	if (state.kind === "failed") return /* @__PURE__ */ jsxs("div", {
+		className: "dt-empty",
+		role: "alert",
+		children: [/* @__PURE__ */ jsxs("p", { children: ["Sessions did not open: ", state.message] }), /* @__PURE__ */ jsx("button", {
+			className: "dt-btn",
+			onClick: state.retry,
+			type: "button",
+			children: "Try again"
+		})]
+	});
+	return /* @__PURE__ */ jsx("p", {
+		className: "dt-status",
+		children: "Opening your sessions…"
+	});
+}
+function SessionsTab({ actions, route, sessions }) {
+	if (route.kind === "checking") return /* @__PURE__ */ jsx("p", {
+		className: "dt-status",
+		children: "Connecting to the Reflet dev route…"
+	});
+	if (route.kind === "missing") return /* @__PURE__ */ jsx(MissingRouteHint, { purpose: "record sessions under your Reflet account" });
+	const { board } = route.status;
+	if (board.kind === "disconnected") return /* @__PURE__ */ jsx(ConnectHint, { onConnect: actions.onConnect });
+	if (board.kind === "secretKey") return /* @__PURE__ */ jsx("p", {
+		className: "dt-empty",
+		children: "Sessions are recorded under your own name, so they need Connect in the Board tab rather than REFLET_SECRET_KEY."
+	});
+	return /* @__PURE__ */ jsx(WorkspaceGate, {
+		actions,
+		sessions
+	});
+}
+//#endregion
 //#region src/devtools/client/devtools-layer.tsx
 const PICKER_LABELS = {
 	...DEFAULT_WIDGET_LABELS,
@@ -4000,32 +3511,17 @@ const PICKER_LABELS = {
 	elementNotePlaceholder: "What should change here?",
 	pickElementHint: "Pick an element to note or copy it"
 };
-function titleFor(element) {
-	const owner = resolveComponentStack(getFiberFromNode(element))[0];
-	const label = describeElement(element);
-	return owner ? `<${owner}> ${label}` : label;
-}
 function sendBlockedReason(route, canConnect) {
 	if (route.kind === "checking") return "Connecting to the Reflet dev route…";
 	if (route.kind === "missing") return "Add the Reflet dev route to send notes to your board.";
 	if (route.status.board.kind !== "disconnected") return null;
 	return canConnect ? "Connect to Reflet in the Board tab to send notes." : MISSING_SECRET_KEY_HINT;
 }
-function CodeTab({ lookup, route }) {
-	if (route.kind === "missing") return /* @__PURE__ */ jsx(MissingRouteHint, { purpose: "read your source files here" });
-	if (lookup.kind === "locating" || route.kind === "checking") return /* @__PURE__ */ jsx("p", {
-		className: "dt-status",
-		children: "Locating the source…"
-	});
-	if (lookup.kind === "unlocated") return /* @__PURE__ */ jsxs("div", {
-		className: "dt-empty",
-		children: [/* @__PURE__ */ jsx("p", { children: lookup.title }), /* @__PURE__ */ jsx("p", { children: "React did not record where this element was written: it comes from a library, or this page is a production build." })]
-	});
-	const { request } = lookup.target;
-	return /* @__PURE__ */ jsx(CodePanel, {
-		editor: route.status.editor,
-		target: lookup.target
-	}, `${request.fileName}:${request.line}:${request.column}`);
+function canConnectBoard(route, publicKey) {
+	return route.kind === "ready" && route.status.board.kind === "disconnected" && route.status.board.canConnect && publicKey !== null;
+}
+function unsentNoteCount(notes) {
+	return notes.notes.filter((note) => isActiveNote(note) && !note.sent).length;
 }
 /** Shown the moment it is added; source and close-up follow, best effort. */
 async function saveNote(note, element, canReadSource) {
@@ -4055,14 +3551,18 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 	const { refresh, route } = useDevRoute();
 	const notes = useNotes();
 	useResumeLocating(notes, route);
+	const sessions = useDevtoolsSessions({
+		onUnauthorized: refresh,
+		route
+	});
 	const [isPicking, setIsPicking] = useState(false);
 	const [openTab, setOpenTab] = useState(null);
-	const [codeLookup, setCodeLookup] = useState(null);
 	const [highlighted, setHighlighted] = useState(null);
+	const { codeLookup, inspectElement, openCode } = useCodeLookup(setOpenTab);
 	const edge = position.startsWith("top") ? "top" : "bottom";
 	const side = position.endsWith("right") ? "right" : "left";
 	const canReadSource = route.kind === "ready";
-	const canConnect = route.kind === "ready" && route.status.board.kind === "disconnected" && route.status.board.canConnect && publicKey !== null;
+	const canConnect = canConnectBoard(route, publicKey);
 	const isRecessed = isWidgetOpen || isPicking;
 	const closeSheet = useCallback(() => {
 		setOpenTab(null);
@@ -4070,13 +3570,6 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 	}, []);
 	const startPick = useCallback(() => setIsPicking(true), []);
 	const cancelPick = useCallback(() => setIsPicking(false), []);
-	const openCode = useCallback((target) => {
-		setCodeLookup({
-			kind: "located",
-			target
-		});
-		setOpenTab("code");
-	}, []);
 	const showSelector = useCallback((selector) => {
 		const element = findOnPage(selector);
 		setHighlighted(element);
@@ -4086,32 +3579,12 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 		});
 		return element !== null;
 	}, []);
-	const inspectElement = useCallback((element) => {
-		setIsPicking(false);
-		const title = titleFor(element);
-		setCodeLookup({
-			element,
-			kind: "locating",
-			title
-		});
-		setOpenTab("code");
-		locateElementSource(element).catch(() => null).then((request) => setCodeLookup((current) => {
-			if (!(current?.kind === "locating" && current.element === element)) return current;
-			return request ? {
-				kind: "located",
-				target: {
-					request,
-					title
-				}
-			} : {
-				kind: "unlocated",
-				title
-			};
-		}));
-	}, []);
 	const inspect = useMemo(() => ({
 		label: "View code",
-		onInspect: inspectElement
+		onInspect: (element) => {
+			setIsPicking(false);
+			inspectElement(element);
+		}
 	}), [inspectElement]);
 	const writeNote = useCallback((element, text) => {
 		setIsPicking(false);
@@ -4125,70 +3598,98 @@ function DevtoolsLayer({ isWidgetOpen, position, publicKey }) {
 			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,
-		"data-sheet-open": openTab !== null,
-		children: [
-			/* @__PURE__ */ jsx("style", { children: DEVTOOLS_STYLES }),
-			/* @__PURE__ */ jsx(NotePins, {
-				isVisible: !isRecessed,
-				notes,
-				onOpenCode: openCode
-			}),
-			openTab && /* @__PURE__ */ jsxs(DevtoolsSheet, {
-				onClose: closeSheet,
-				onPick: startPick,
-				onSelectTab: setOpenTab,
-				side,
-				tab: openTab,
-				tabs: codeLookup ? [
-					"notes",
-					"inbox",
-					"code"
-				] : ["notes", "inbox"],
-				children: [
-					openTab === "notes" && /* @__PURE__ */ jsx(NotesPanel, {
-						notes,
-						onOpenCode: openCode,
-						onShowSelector: showSelector,
-						sendBlockedReason: sendBlockedReason(route, canConnect)
-					}),
-					openTab === "inbox" && /* @__PURE__ */ jsx(BoardTab, {
-						canConnect,
-						onOpenCode: openCode,
-						onShowSelector: showSelector,
-						publicKey,
-						refresh,
-						route
-					}),
-					openTab === "code" && codeLookup && /* @__PURE__ */ jsx(CodeTab, {
-						lookup: codeLookup,
-						route
+	const tabs = codeLookup ? [
+		"notes",
+		"sessions",
+		"inbox",
+		"code"
+	] : [
+		"notes",
+		"sessions",
+		"inbox"
+	];
+	const writeNoteInstead = () => {
+		closeSheet();
+		startPick();
+	};
+	return /* @__PURE__ */ jsx(SessionsScope, {
+		sessions,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "dt",
+			"data-recessed": isRecessed,
+			"data-sheet-open": openTab !== null,
+			children: [
+				/* @__PURE__ */ jsx("style", { children: `${DEVTOOLS_STYLES}${SESSIONS_STYLES}` }),
+				/* @__PURE__ */ jsx(NotePins, {
+					isVisible: !isRecessed,
+					notes,
+					onOpenCode: openCode
+				}),
+				openTab && /* @__PURE__ */ jsxs(DevtoolsSheet, {
+					onClose: closeSheet,
+					onPick: startPick,
+					onSelectTab: setOpenTab,
+					side,
+					tab: openTab,
+					tabs,
+					children: [
+						openTab === "notes" && /* @__PURE__ */ jsx(NotesPanel, {
+							notes,
+							onOpenCode: openCode,
+							onShowSelector: showSelector,
+							sendBlockedReason: sendBlockedReason(route, canConnect)
+						}),
+						openTab === "inbox" && /* @__PURE__ */ jsx(BoardTab, {
+							canConnect,
+							onOpenCode: openCode,
+							onShowSelector: showSelector,
+							publicKey,
+							refresh,
+							route
+						}),
+						openTab === "sessions" && /* @__PURE__ */ jsx(SessionsTab, {
+							actions: {
+								onConnect: () => setOpenTab("inbox"),
+								onStarted: closeSheet,
+								onWriteNote: writeNoteInstead
+							},
+							route,
+							sessions
+						}),
+						openTab === "code" && codeLookup && /* @__PURE__ */ jsx(CodeTab, {
+							lookup: codeLookup,
+							route
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(DevtoolsBar, {
+					edge,
+					side,
+					children: /* @__PURE__ */ jsx(DevtoolsBarButtons, {
+						noteCount: unsentNoteCount(notes),
+						onPick: startPick,
+						onToggleSheet: (tab) => setOpenTab((current) => current === tab ? null : tab),
+						openTab
 					})
-				]
-			}),
-			/* @__PURE__ */ jsx(DevtoolsBar, {
-				edge,
-				noteCount: notes.notes.filter((note) => isActiveNote(note) && !note.sent).length,
-				onPick: startPick,
-				onToggleSheet: (tab) => setOpenTab((current) => current === tab ? null : tab),
-				openTab,
-				side
-			}),
-			openTab && /* @__PURE__ */ jsx(SelectionOutline, { node: highlighted }),
-			/* @__PURE__ */ jsx(Notices, {}),
-			isPicking && /* @__PURE__ */ jsx(ElementPicker, {
-				copy,
-				inspect,
-				labels: PICKER_LABELS,
-				onCancel: cancelPick,
-				onPick: writeNote
-			})
-		]
+				}),
+				openTab && /* @__PURE__ */ jsx(SelectionOutline, { node: highlighted }),
+				/* @__PURE__ */ jsx(Notices, {}),
+				sessions.state.kind === "ready" && /* @__PURE__ */ jsx(RecordingLayer, { onFinished: (target) => {
+					sessions.navigation.onOpen(target);
+					setOpenTab("sessions");
+				} }),
+				isPicking && /* @__PURE__ */ jsx(ElementPicker, {
+					copy,
+					inspect,
+					labels: PICKER_LABELS,
+					onCancel: cancelPick,
+					onPick: writeNote
+				})
+			]
+		})
 	});
 }
 //#endregion
 export { DevtoolsLayer };
 
-//# sourceMappingURL=devtools-layer-CEjzYGBB.js.map
+//# sourceMappingURL=devtools-layer-OjTo9_eb.js.map