@kubohiroya/turbowarp-plus-editor-git 0.10.0 → 0.11.0

package/dist/editor-block-locator.d.ts

@@ -0,0 +1,27 @@
+import type { ProjectBlockLocator, ScratchBlockLocationWorkspace } from './block-diff-location.js';
+/** The parts of a Scratch VM the locator reads to find a stage or sprite. */
+export interface LocatorVM {
+    runtime: {
+        targets: readonly {
+            id: string;
+            isOriginal?: boolean;
+            isStage: boolean;
+            getName(): string;
+        }[];
+    };
+    editingTarget?: {
+        id: string;
+    } | null;
+}
+export interface EditorBlockLocatorOptions {
+    vm: LocatorVM;
+    /** Opens the code of one stage or sprite in the Editor, as project search does. */
+    openTargetCode(targetId: string): void | Promise<void>;
+    /** The Editor's code workspace as it is now, or `null` while none is shown. */
+    getWorkspace(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+}
+/**
+ * Finds the stage or sprite of a compared version in the open project, opens its code and waits for the block,
+ * then centers and outlines it. The caller decides which version matches the open project.
+ */
+export declare function createEditorBlockLocator({ vm, openTargetCode, getWorkspace }: EditorBlockLocatorOptions): ProjectBlockLocator;

package/dist/file-diff-view.d.ts

@@ -3,16 +3,18 @@ import type { FileChange, FileDiff } from './repository.js';
 import type { labelsFor } from './messages.js';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
 import type { ProjectAssetLoader } from './project-assets.js';
+import type { ProjectBlockLocator } from './block-diff-location.js';
 /** Project sources are the files the panel opens as projects. */
 export declare const isProjectSource: (path: string) => boolean;
 /**
  * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
  */
-export declare function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset }: {
+export declare function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset, locateBlock }: {
     change: FileChange;
     diff: FileDiff | null;
     labels: ReturnType<typeof labelsFor>;
     locale: string;
     renderBlock?: ProjectBlockRenderer;
     loadAsset?: ProjectAssetLoader;
+    locateBlock?: ProjectBlockLocator;
 }): React.JSX.Element;

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 import type { GitConnectionSettings } from './connection-settings.js';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
+import type { ScratchBlockLocationWorkspace } from './block-diff-location.js';
+export { createScratchBlocksDiffLocator } from './block-diff-location.js';
+export { createEditorBlockLocator } from './editor-block-locator.js';
 export { createScratchBlocksDiffRenderer } from './scratch-block-diff-renderer.js';
 export type { ScratchBlockDiffRendererOptions, ScratchBlocksPort } from './scratch-block-diff-renderer.js';
 export { openRepository, createReadOnlyFs, GitPanelError } from './repository.js';
@@ -11,6 +14,28 @@ export interface GitHost {
     isProjectDirty(): boolean;
     isProjectRunning?(): boolean;
     subscribe?(listener: (event: 'loaded' | 'changed') => void): () => void;
+    /**
+     * Opens the panel as a tab of the host's layout, with the same shape as the layout package's DocumentPanelRequest.
+     * Returning `false` keeps the modal dialog.
+     */
+    openPanel?(request: GitPanelRequest): boolean;
+    /** Opens the code of one stage or sprite, so a diff can point at its block. Without it, no block is located. */
+    openTargetCode?(targetId: string): void | Promise<void>;
+    /** The Editor's code workspace as it is now. */
+    getWorkspace?(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+}
+export interface GitPanelRequest {
+    reference: {
+        providerId: string;
+        documentId: string;
+    };
+    filename: string;
+    title?: string;
+    transient?: boolean;
+    mount(element: HTMLElement, close: () => void): {
+        requestClose(): void;
+        dispose(): void;
+    };
 }
 export declare function mountGitPanel({ vm, document, host }: {
     vm: object;

package/dist/index.js

@@ -1,9 +1,9 @@
-import { a as gitHubRepositoryFromOrigin, c as projectPropertyLabel, g as useCostumeImage, h as useAssetImage, i as createGitHubPullRequests, l as ProjectSourceComparison, r as PullRequestError, s as organizeProjectChanges, t as createScratchBlocksDiffRenderer, u as ProjectSourceReview, y as parseProjectSource } from "./scratch-block-diff-renderer-DZR8ep-T.js";
+import { a as gitHubRepositoryFromOrigin, c as projectPropertyLabel, g as useCostumeImage, h as useAssetImage, i as createGitHubPullRequests, l as ProjectSourceComparison, n as createScratchBlocksDiffLocator, r as PullRequestError, s as organizeProjectChanges, t as createScratchBlocksDiffRenderer, u as ProjectSourceReview, y as parseProjectSource } from "./scratch-block-diff-renderer-CgAGfmAc.js";
 import { n as init_objectSpread2, r as __commonJSMin, t as _objectSpread2$1 } from "./objectSpread2-Dkd68nJH.js";
 import { i as createReadOnlyFs, r as GitPanelError, t as openRepository } from "./repository-CtvWYPQ8.js";
 import * as m from "react";
 import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { render, unmountComponentAtNode } from "react-dom";
+import { createPortal, render, unmountComponentAtNode } from "react-dom";
 // builtin:esm-external-require-react
 var require_builtin_esm_external_require_react = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	init_objectSpread2();
@@ -2684,7 +2684,7 @@ var isProjectSource = (path) => path.split("/").pop() === "project.source.json";
 /**
 * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
 */
-function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset }) {
+function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset, locateBlock }) {
 	var _change$oldMode, _change$newMode;
 	const [view, setView] = useState("blocks");
 	const names = locale.startsWith("ja") ? ja$3 : en$3;
@@ -2713,6 +2713,7 @@ function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset })
 		locale,
 		fallback: text,
 		loadAsset,
+		locateBlock,
 		before: change.before === null ? null : sources.before,
 		after: change.after === null ? null : sources.after
 	}) : text);
@@ -2965,7 +2966,7 @@ var show = (value) => {
 	return text.length > 400 ? text.slice(0, 400) + "…" : text;
 };
 /** The details of one selected row: its code, pictures or values in both versions, and the files behind it. */
-function ProjectElementView({ changes, selection, locale, renderBlock, onSelectFile }) {
+function ProjectElementView({ changes, selection, locale, renderBlock, onSelectFile, locateBlock }) {
 	var _element$properties2;
 	const labels = projectChangeLabels(locale);
 	const { element, target } = selection;
@@ -3000,7 +3001,8 @@ function ProjectElementView({ changes, selection, locale, renderBlock, onSelectF
 		target: {
 			isStage: target.isStage,
 			name: target.name
-		}
+		},
+		locateBlock
 	}), element.kind === "costumes" && /* @__PURE__ */ React.createElement("div", { className: "twgit-element-pictures" }, ["before", "after"].map((version) => {
 		var _element$md5ext3, _element$version;
 		return /* @__PURE__ */ React.createElement(Picture, {
@@ -3299,6 +3301,7 @@ function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 	}, labels[error]));
 }
 // src/pull-request-panel.tsx
+init_objectSpread2();
 var en = {
 	title: "Pull requests",
 	number: "Pull request number",
@@ -3344,7 +3347,7 @@ var ja = {
 function errorMessage(error, labels) {
 	return error instanceof PullRequestError ? labels[error.code] : labels.failed;
 }
-function PullRequests({ name, labels, locale, renderBlock }) {
+function PullRequests({ name, labels, locale, renderBlock, locateFor }) {
 	const client = useMemo(() => createGitHubPullRequests(name), [name]);
 	const [page, setPage] = useState(1);
 	const [listing, setListing] = useState();
@@ -3432,12 +3435,12 @@ function PullRequests({ name, labels, locale, renderBlock }) {
 	}, labels.onGitHub)), /* @__PURE__ */ React.createElement(ProjectSourceReview, {
 		title: pr.title,
 		description: pr.description,
-		files: pr.files,
+		files: locateFor ? pr.files.map((file) => "patch" in file ? _objectSpread2$1(_objectSpread2$1({}, file), {}, { locateBlock: locateFor(file.path, pr.head.sha) }) : file) : pr.files,
 		renderBlock,
 		locale
 	}))));
 }
-function PullRequestReviewPanel({ repository, locale, renderBlock }) {
+function PullRequestReviewPanel({ repository, locale, renderBlock, locateFor }) {
 	const labels = locale.startsWith("ja") ? ja : en;
 	const [origin, setOrigin] = useState();
 	useEffect(() => {
@@ -3471,7 +3474,44 @@ function PullRequestReviewPanel({ repository, locale, renderBlock }) {
 		name: origin.name,
 		labels,
 		locale,
-		renderBlock
+		renderBlock,
+		locateFor
+	});
+}
+// src/editor-block-locator.ts
+/**
+* Finds the stage or sprite of a compared version in the open project, opens its code and waits for the block,
+* then centers and outlines it. The caller decides which version matches the open project.
+*/
+function createEditorBlockLocator({ vm, openTargetCode, getWorkspace }) {
+	return createScratchBlocksDiffLocator(async ({ target, id: blockId, signal }) => {
+		const found = vm.runtime.targets.find((item) => target.isStage ? item.isStage : !item.isStage && item.isOriginal !== false && item.getName() === target.name);
+		if (!found || signal.aborted) return null;
+		await openTargetCode(found.id);
+		const deadline = Date.now() + waitLimit;
+		while (!signal.aborted) {
+			var _vm$editingTarget;
+			if (((_vm$editingTarget = vm.editingTarget) === null || _vm$editingTarget === void 0 ? void 0 : _vm$editingTarget.id) === found.id) {
+				const workspace = await getWorkspace();
+				if (signal.aborted) break;
+				if (workspace === null || workspace === void 0 ? void 0 : workspace.getBlockById(blockId)) return workspace;
+			}
+			if (Date.now() >= deadline) break;
+			await nextFrame(signal);
+		}
+		return null;
+	});
+}
+var waitLimit = 2e3;
+function nextFrame(signal) {
+	return new Promise((resolve) => {
+		const done = () => {
+			signal.removeEventListener("abort", done);
+			resolve();
+		};
+		signal.addEventListener("abort", done, { once: true });
+		if (typeof requestAnimationFrame === "function") requestAnimationFrame(done);
+		else setTimeout(done, 16);
 	});
 }
 // src/index.tsx
@@ -3490,9 +3530,20 @@ var initial = {
 };
 var controllers = /* @__PURE__ */ new WeakMap();
 var watchInterval = 2e3;
-function GitPanel({ document, host, controller }) {
-	var _state$repository, _state$snapshot$head$, _state$snapshot$head, _state$snapshot;
+function GitPanel({ vm, document, host, controller }) {
+	var _state$repository, _state$snapshot$head$, _state$snapshot$head, _state$snapshot2;
 	const [visible, setVisible] = useState(false);
+	const [slot, setSlot] = useState(null);
+	const shown = visible || slot !== null;
+	const locator = useMemo(() => slot && host.openTargetCode && host.getWorkspace ? createEditorBlockLocator({
+		vm,
+		openTargetCode: host.openTargetCode,
+		getWorkspace: host.getWorkspace
+	}) : void 0, [
+		slot !== null,
+		host,
+		vm
+	]);
 	const [review, setReview] = useState(false);
 	const [locale, setLocale] = useState(document.documentElement.lang || "en");
 	const [dirty, setDirty] = useState(host.isProjectDirty());
@@ -3550,8 +3601,34 @@ function GitPanel({ document, host, controller }) {
 		}
 	};
 	controller.open = (language) => {
+		var _host$openPanel;
 		setLocale(language);
-		setVisible(true);
+		if (!((_host$openPanel = host.openPanel) === null || _host$openPanel === void 0 ? void 0 : _host$openPanel.call(host, {
+			reference: {
+				providerId: "turbowarp-plus-git",
+				documentId: "local-git"
+			},
+			filename: "Git",
+			title: labelsFor(language).title,
+			transient: true,
+			mount(element, close) {
+				setVisible(false);
+				setSlot({
+					element,
+					close
+				});
+				return {
+					requestClose: close,
+					dispose() {
+						setSlot((previous) => (previous === null || previous === void 0 ? void 0 : previous.element) === element ? null : previous);
+					}
+				};
+			}
+		}))) setVisible(true);
+	};
+	const closePanel = () => {
+		if (slot) slot.close();
+		else setVisible(false);
 	};
 	controller.refresh = async (automatic = false) => {
 		if (!alive.current || !current.current.repository) return;
@@ -3600,7 +3677,7 @@ function GitPanel({ document, host, controller }) {
 	}, [host]);
 	useEffect(() => {
 		const repository = state.repository;
-		if (!visible || !repository) return;
+		if (!shown || !repository) return;
 		const view = document.defaultView;
 		let stopped = false;
 		let checking = false;
@@ -3647,19 +3724,19 @@ function GitPanel({ document, host, controller }) {
 			observer === null || observer === void 0 || observer.disconnect();
 		};
 	}, [
-		visible,
+		shown,
 		state.repository,
 		locale
 	]);
 	useEffect(() => {
 		var _dialog$current;
-		if (!visible) return;
+		if (!visible || slot) return;
 		const previous = document.activeElement;
 		(_dialog$current = dialog.current) === null || _dialog$current === void 0 || _dialog$current.focus();
 		return () => {
 			if (previous === null || previous === void 0 ? void 0 : previous.isConnected) previous.focus();
 		};
-	}, [visible]);
+	}, [visible, slot]);
 	const chooseRoot = async () => {
 		const view = document.defaultView;
 		await run(async () => {
@@ -3696,6 +3773,7 @@ function GitPanel({ document, host, controller }) {
 		} finally {
 			opening.current = false;
 		}
+		if (slot) controller.open(locale);
 		if (!alive.current) return {};
 		setDirty(host.isProjectDirty());
 		setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
@@ -3776,7 +3854,7 @@ function GitPanel({ document, host, controller }) {
 	const focusTrap = (event) => {
 		if (event.key === "Escape") {
 			event.stopPropagation();
-			setVisible(false);
+			closePanel();
 			return;
 		}
 		if (event.key !== "Tab") return;
@@ -3795,23 +3873,21 @@ function GitPanel({ document, host, controller }) {
 		state.snapshot,
 		state.selected
 	]);
-	if (!visible) return null;
+	if (!shown) return null;
 	const groups = state.commit ? ["commit"] : [
 		"staged",
 		"unstaged",
 		"untracked"
 	];
 	const projectList = typeof projectChanges === "object" ? projectChanges : null;
+	const projectFile = state.project === null ? null : [state.project, "project.source.json"].filter(Boolean).join("/");
+	const fileLocator = (change) => locator && change.path === projectFile && (change.group === "unstaged" || change.group === "untracked" || change.group === "staged" && !state.changes.some((item) => item.path === change.path && item.group === "unstaged")) ? locator : void 0;
+	const reviewLocator = (path, headSha) => {
+		var _state$snapshot;
+		return locator && path === projectFile && ((_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.head) === headSha && !state.changes.length ? locator : void 0;
+	};
 	const selection = projectList && !state.selected ? findElement(projectList.list, element) : null;
-	return /* @__PURE__ */ React.createElement("div", { className: "twgit-backdrop" }, /* @__PURE__ */ React.createElement("div", {
-		className: "twgit-panel",
-		ref: dialog,
-		tabIndex: -1,
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": labels.title,
-		onKeyDown: focusTrap
-	}, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, labels.title), /* @__PURE__ */ React.createElement("button", {
+	const content = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h2", null, labels.title), /* @__PURE__ */ React.createElement("button", {
 		onClick: chooseRoot,
 		disabled: state.busy
 	}, labels.choose), !review && /* @__PURE__ */ React.createElement("button", {
@@ -3824,7 +3900,7 @@ function GitPanel({ document, host, controller }) {
 		type: "button",
 		disabled: state.busy,
 		onClick: () => setReview(!review)
-	}, review ? labels.localChanges : labels.pullRequests), /* @__PURE__ */ React.createElement("button", { onClick: () => setVisible(false) }, labels.close)), /* @__PURE__ */ React.createElement("div", { className: "twgit-context" }, /* @__PURE__ */ React.createElement("span", null, labels.repository, " · ", ((_state$repository = state.repository) === null || _state$repository === void 0 ? void 0 : _state$repository.root.name) || "—"), /* @__PURE__ */ React.createElement("span", null, labels.project, " · ", state.project === null ? labels.none : state.project || labels.root), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved), state.snapshot && /* @__PURE__ */ React.createElement("span", {
+	}, review ? labels.localChanges : labels.pullRequests), /* @__PURE__ */ React.createElement("button", { onClick: closePanel }, labels.close)), /* @__PURE__ */ React.createElement("div", { className: "twgit-context" }, /* @__PURE__ */ React.createElement("span", null, labels.repository, " · ", ((_state$repository = state.repository) === null || _state$repository === void 0 ? void 0 : _state$repository.root.name) || "—"), /* @__PURE__ */ React.createElement("span", null, labels.project, " · ", state.project === null ? labels.none : state.project || labels.root), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved), state.snapshot && /* @__PURE__ */ React.createElement("span", {
 		"data-git-upstream": state.snapshot.upstream.state,
 		title: labels.checkedAt
 	}, upstreamText(state.snapshot, labels)), !review && host.connectionSettings && /* @__PURE__ */ React.createElement(ConnectionSettings, {
@@ -3845,7 +3921,8 @@ function GitPanel({ document, host, controller }) {
 	}, state.notice), state.busy && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels.loading), !state.repository && /* @__PURE__ */ React.createElement("p", null, labels.empty), review && state.repository && host.renderReviewBlock && /* @__PURE__ */ React.createElement(PullRequestReviewPanel, {
 		repository: state.repository,
 		locale,
-		renderBlock: host.renderReviewBlock
+		renderBlock: host.renderReviewBlock,
+		locateFor: reviewLocator
 	}), !review && state.repository && /* @__PURE__ */ React.createElement("div", { className: "twgit-content" }, /* @__PURE__ */ React.createElement("aside", null, state.browser && /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, labels.browse), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("code", null, state.browser.path || "/")), /* @__PURE__ */ React.createElement("button", {
 		disabled: state.busy || !state.browser.path,
 		onClick: () => void browse(state.browser.path.split("/").slice(0, -1).join("/"))
@@ -3878,7 +3955,7 @@ function GitPanel({ document, host, controller }) {
 			fileListOpen,
 			setFileListOpen
 		}) : fileList;
-	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.commits.map((commit) => /* @__PURE__ */ React.createElement("li", { key: commit.oid }, /* @__PURE__ */ React.createElement("button", {
+	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot2 = state.snapshot) === null || _state$snapshot2 === void 0 ? void 0 : _state$snapshot2.commits.map((commit) => /* @__PURE__ */ React.createElement("li", { key: commit.oid }, /* @__PURE__ */ React.createElement("button", {
 		disabled: state.busy,
 		"aria-pressed": state.commit === commit.oid,
 		title: commit.oid,
@@ -3887,6 +3964,7 @@ function GitPanel({ document, host, controller }) {
 		changes: projectList,
 		selection,
 		locale,
+		locateBlock: state.commit ? void 0 : locator,
 		renderBlock: host.renderReviewBlock,
 		onSelectFile: openFile
 	}) : state.selected ? /* @__PURE__ */ React.createElement(FileDiffView, {
@@ -3894,9 +3972,24 @@ function GitPanel({ document, host, controller }) {
 		diff: state.diff,
 		labels,
 		locale,
+		locateBlock: fileLocator(state.selected),
 		renderBlock: host.renderReviewBlock,
 		loadAsset
-	}) : /* @__PURE__ */ React.createElement("p", null, labels.select)))));
+	}) : /* @__PURE__ */ React.createElement("p", null, labels.select))));
+	if (slot) return createPortal(/* @__PURE__ */ React.createElement("div", {
+		className: "twgit-panel twgit-panel-tab",
+		role: "region",
+		"aria-label": labels.title
+	}, content), slot.element);
+	return /* @__PURE__ */ React.createElement("div", { className: "twgit-backdrop" }, /* @__PURE__ */ React.createElement("div", {
+		className: "twgit-panel",
+		ref: dialog,
+		tabIndex: -1,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": labels.title,
+		onKeyDown: focusTrap
+	}, content));
 }
 /** The GitHub relation in plain words, with the number of records where it helps. */
 function upstreamText({ upstream }, labels) {
@@ -3919,6 +4012,7 @@ function mountGitPanel({ vm, document, host }) {
 	};
 	controllers.set(vm, controller);
 	render(/* @__PURE__ */ React.createElement(GitPanel, {
+		vm,
 		document,
 		host,
 		controller
@@ -3945,4 +4039,4 @@ function renderGitMenu(createElement, { vm, locale = "en", MenuItem, MenuSection
 		}
 	}, labelsFor(locale).menu));
 }
-export { GitPanelError, createReadOnlyFs, createScratchBlocksDiffRenderer, mountGitPanel, openRepository, renderGitMenu };
+export { GitPanelError, createEditorBlockLocator, createReadOnlyFs, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, mountGitPanel, openRepository, renderGitMenu };

package/dist/project-change-list.d.ts

@@ -3,6 +3,7 @@ import type { ChangedFile, ProjectChangeList, ProjectElementChange, ProjectTarge
 import type { ProjectAssetLoader } from './project-assets.js';
 import type { ChangeGroup, FileChange, Repository, Snapshot } from './repository.js';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
+import type { ProjectBlockLocator } from './block-diff-location.js';
 declare const en: {
     title: string;
     stage: string;
@@ -68,7 +69,7 @@ export declare function findElement(list: ProjectChangeList, key: string | null)
     target: null;
 } | null;
 /** The details of one selected row: its code, pictures or values in both versions, and the files behind it. */
-export declare function ProjectElementView({ changes, selection, locale, renderBlock, onSelectFile }: {
+export declare function ProjectElementView({ changes, selection, locale, renderBlock, onSelectFile, locateBlock }: {
     changes: ProjectChanges;
     selection: {
         element: ProjectElementChange;
@@ -77,5 +78,6 @@ export declare function ProjectElementView({ changes, selection, locale, renderB
     locale: string;
     renderBlock?: ProjectBlockRenderer;
     onSelectFile(file: ChangedFile): void;
+    locateBlock?: ProjectBlockLocator;
 }): React.JSX.Element;
 export {};

package/dist/project-source-diff.js

@@ -1,4 +1,4 @@
-import { _ as compareProjectBlocks, a as gitHubRepositoryFromOrigin, b as readProjectSourceDiff, c as projectPropertyLabel, d as BlockPreview, f as createPreviewSync, i as createGitHubPullRequests, l as ProjectSourceComparison, m as currentCostume, n as createScratchBlocksDiffLocator, o as assetFileName, p as usePreviewSync, s as organizeProjectChanges, t as createScratchBlocksDiffRenderer, u as ProjectSourceReview, v as createProjectSourceDiff } from "./scratch-block-diff-renderer-DZR8ep-T.js";
+import { _ as compareProjectBlocks, a as gitHubRepositoryFromOrigin, b as readProjectSourceDiff, c as projectPropertyLabel, d as BlockPreview, f as createPreviewSync, i as createGitHubPullRequests, l as ProjectSourceComparison, m as currentCostume, n as createScratchBlocksDiffLocator, o as assetFileName, p as usePreviewSync, s as organizeProjectChanges, t as createScratchBlocksDiffRenderer, u as ProjectSourceReview, v as createProjectSourceDiff } from "./scratch-block-diff-renderer-CgAGfmAc.js";
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 // src/project-source-diff.tsx

package/dist/project-source-review.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
+import type { ProjectBlockLocator } from './block-diff-location.js';
 import type { ProjectAssetLoader } from './project-assets.js';
 export type ProjectSourceReviewFile = {
     path: string;
@@ -10,6 +11,8 @@ export type ProjectSourceReviewFile = {
     patch: string;
     beforeSource?: string;
     loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on this file's after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator;
 } | {
     status: 'added' | 'removed' | 'updated';
 });
@@ -32,6 +35,8 @@ export interface ProjectSourceComparisonProps {
     fallback?: React.ReactNode;
     /** Reads the images of both versions for thumbnails. Without it, stages and sprites are shown by name. */
     loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on the after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator;
     /** Shows only the code of this stage or sprite, without the overview and the changes outside the code. */
     target?: {
         isStage: boolean;
@@ -39,5 +44,5 @@ export interface ProjectSourceComparisonProps {
     };
 }
 /** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
-export declare function ProjectSourceComparison({ before, after, renderBlock, locale, fallback, loadAsset, target }: ProjectSourceComparisonProps): React.JSX.Element;
+export declare function ProjectSourceComparison({ before, after, renderBlock, locale, fallback, loadAsset, locateBlock, target }: ProjectSourceComparisonProps): React.JSX.Element;
 export declare function ProjectSourceReview({ title, description, verification, files, renderBlock, locale }: ProjectSourceReviewProps): React.JSX.Element;

package/dist/pull-request-panel.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
 import type { Repository } from './repository.js';
-export declare function PullRequestReviewPanel({ repository, locale, renderBlock }: {
+import type { ProjectBlockLocator } from './block-diff-location.js';
+export declare function PullRequestReviewPanel({ repository, locale, renderBlock, locateFor }: {
     repository: Repository;
     locale: string;
     renderBlock: ProjectBlockRenderer;
+    /** Returns a locator for a project file whose PR head matches the open project, or `undefined`. */
+    locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }): React.JSX.Element;

package/dist/{scratch-block-diff-renderer-DZR8ep-T.js → scratch-block-diff-renderer-CgAGfmAc.js}

@@ -1007,7 +1007,11 @@ var ja = {
 	script: "コード",
 	noChanges: "作品に内容の変更はありません。",
 	comparison: "作品の変更",
-	unreadable: "作品データとして読み込めないため、テキストの差分を表示します。"
+	unreadable: "作品データとして読み込めないため、テキストの差分を表示します。",
+	locate: "編集画面で強調",
+	locating: "編集画面でブロックを検索中…",
+	located: "編集画面で強調しました。",
+	missingLocation: "編集画面に該当する版またはブロックがありません。"
 };
 var en = {
 	review: "Change review",
@@ -1037,7 +1041,11 @@ var en = {
 	script: "Code",
 	noChanges: "No changes to the project contents.",
 	comparison: "Project changes",
-	unreadable: "This file could not be read as project data, so its text diff is shown."
+	unreadable: "This file could not be read as project data, so its text diff is shown.",
+	locate: "Highlight in Editor",
+	locating: "Finding the block in the Editor…",
+	located: "Highlighted in the Editor.",
+	missingLocation: "This version or block is unavailable in the Editor."
 };
 var properties = /* @__PURE__ */ new Map([
 	["variables", ["変数", "Variables"]],
@@ -1068,7 +1076,49 @@ function scriptTitle(side, labels) {
 	}
 	return typeof block.opcode === "string" ? block.opcode : labels.script;
 }
-function ScriptComparison({ script, labels, reviewed = false, setReviewed, renderBlock, loadAsset }) {
+var sideKey = (side) => JSON.stringify([
+	side.target.isStage,
+	side.target.name,
+	side.id
+]);
+/** Highlights the after version of a script in the Editor, one request per comparison, and cancels it on unmount. */
+function useBlockLocation(comparison, locateBlock) {
+	const request = useRef();
+	const [location, setLocation] = useState();
+	useEffect(() => () => {
+		var _request$current;
+		return (_request$current = request.current) === null || _request$current === void 0 ? void 0 : _request$current.abort();
+	}, [comparison, locateBlock]);
+	const locate = async (side) => {
+		var _request$current2;
+		if (!locateBlock) return;
+		(_request$current2 = request.current) === null || _request$current2 === void 0 || _request$current2.abort();
+		const controller = new AbortController();
+		request.current = controller;
+		const selected = {
+			comparison,
+			key: sideKey(side),
+			locator: locateBlock
+		};
+		setLocation(_objectSpread2(_objectSpread2({}, selected), {}, { status: "locating" }));
+		let found = false;
+		try {
+			found = await locateBlock({
+				target: side.target,
+				id: side.id,
+				version: "after",
+				parts: [],
+				signal: controller.signal
+			});
+		} catch (_unused) {}
+		if (!controller.signal.aborted) setLocation(_objectSpread2(_objectSpread2({}, selected), {}, { status: found ? "located" : "missingLocation" }));
+	};
+	return {
+		locate: locateBlock && ((side) => void locate(side)),
+		status: (side) => (location === null || location === void 0 ? void 0 : location.comparison) === comparison && location.locator === locateBlock && location.key === sideKey(side) ? location.status : void 0
+	};
+}
+function ScriptComparison({ script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location }) {
 	const [open, setOpen] = useState(false);
 	const { sync, toggle } = usePreviewSync(labels === ja ? "ja" : "en");
 	const status = !script.before.length ? "added" : !script.after.length ? "removed" : script.before.length !== 1 || script.after.length !== 1 ? "reorganized" : "updated";
@@ -1088,7 +1138,9 @@ function ScriptComparison({ script, labels, reviewed = false, setReviewed, rende
 		labels,
 		version,
 		loadAsset,
-		sync
+		sync,
+		onLocate: version === "after" && (location === null || location === void 0 ? void 0 : location.locate) ? () => location.locate(side) : void 0,
+		locationStatus: version === "after" ? location === null || location === void 0 ? void 0 : location.status(side) : void 0
 	})) : /* @__PURE__ */ React.createElement(BlockPreview, {
 		title: labels[version],
 		renderBlock,
@@ -1132,7 +1184,8 @@ function TargetThumbnails({ target, labels, loadAsset }) {
 	}));
 }
 /** Lists the changed stages and sprites of one project file, each with its code comparisons. */
-function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, review }) {
+function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, locateBlock, review }) {
+	const location = useBlockLocation(comparison, locateBlock);
 	return /* @__PURE__ */ React.createElement(React.Fragment, null, comparison.properties.length > 0 && /* @__PURE__ */ React.createElement("p", null, labels.properties, " · ", propertyNames(comparison.properties, labels)), !comparison.targets.length && !comparison.properties.length && /* @__PURE__ */ React.createElement("p", null, labels.noChanges), comparison.targets.map((target) => /* @__PURE__ */ React.createElement("section", {
 		className: "twgit-review-target",
 		key: JSON.stringify([target.isStage, target.name])
@@ -1153,6 +1206,7 @@ function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, review
 			labels,
 			renderBlock,
 			loadAsset,
+			location,
 			reviewed: review === null || review === void 0 ? void 0 : review.keys.has(key),
 			setReviewed: review && ((value) => review.set(key, value))
 		});
@@ -1160,14 +1214,14 @@ function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, review
 }
 var countScripts = (comparison) => comparison.targets.reduce((count, target) => count + target.scripts.length, 0);
 /** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
-function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback, loadAsset, target }) {
+function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback, loadAsset, locateBlock, target }) {
 	const labels = locale.startsWith("ja") ? ja : en;
 	const only = target && JSON.stringify([target.isStage, target.isStage || target.name]);
 	const comparison = useMemo(() => {
 		let result;
 		try {
 			result = compareProjectForReview(parseProjectSource(before), parseProjectSource(after));
-		} catch (_unused) {
+		} catch (_unused2) {
 			return null;
 		}
 		if (!only) return result;
@@ -1191,7 +1245,8 @@ function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fa
 		comparison,
 		labels,
 		renderBlock,
-		loadAsset
+		loadAsset,
+		locateBlock
 	}));
 }
 function ProjectSourceReview({ title, description, verification, files, renderBlock, locale = "en" }) {
@@ -1207,7 +1262,7 @@ function ProjectSourceReview({ title, description, verification, files, renderBl
 					properties: []
 				}
 			};
-		} catch (_unused2) {
+		} catch (_unused3) {
 			return {
 				file,
 				invalid: true
@@ -1244,6 +1299,7 @@ function ProjectSourceReview({ title, description, verification, files, renderBl
 		labels,
 		renderBlock,
 		loadAsset: "loadAsset" in file ? file.loadAsset : void 0,
+		locateBlock: "locateBlock" in file ? file.locateBlock : void 0,
 		review: {
 			file: file.path,
 			keys: reviewed,

package/dist/style.css

@@ -163,4 +163,6 @@
 .twgit-element-files { margin-top: 12px; }
 .twgit-panel .twgit-element span.twgit-element-name { width: auto; font-family: inherit; }
 .twgit-git-details > .twgit-connection-body { left: auto; right: 0; }
+/* In a layout tab the panel fills the tab and leaves the Editor beside it. */
+.twgit-panel.twgit-panel-tab { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-git",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",

package/src/editor-block-locator.ts

@@ -0,0 +1,55 @@
+import {createScratchBlocksDiffLocator} from './block-diff-location.js';
+import type {ProjectBlockLocator, ScratchBlockLocationWorkspace} from './block-diff-location.js';
+
+/** The parts of a Scratch VM the locator reads to find a stage or sprite. */
+export interface LocatorVM {
+    runtime: {targets: readonly {id: string; isOriginal?: boolean; isStage: boolean; getName(): string}[]};
+    editingTarget?: {id: string} | null;
+}
+
+export interface EditorBlockLocatorOptions {
+    vm: LocatorVM;
+    /** Opens the code of one stage or sprite in the Editor, as project search does. */
+    openTargetCode(targetId: string): void | Promise<void>;
+    /** The Editor's code workspace as it is now, or `null` while none is shown. */
+    getWorkspace(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+}
+
+/**
+ * Finds the stage or sprite of a compared version in the open project, opens its code and waits for the block,
+ * then centers and outlines it. The caller decides which version matches the open project.
+ */
+export function createEditorBlockLocator({vm, openTargetCode, getWorkspace}: EditorBlockLocatorOptions): ProjectBlockLocator {
+    return createScratchBlocksDiffLocator(async ({target, id: blockId, signal}) => {
+        const found = vm.runtime.targets.find(item => target.isStage ? item.isStage :
+            !item.isStage && item.isOriginal !== false && item.getName() === target.name);
+        if (!found || signal.aborted) return null;
+        await openTargetCode(found.id);
+        // The Editor switches targets and fills its workspace over the next frames.
+        const deadline = Date.now() + waitLimit;
+        while (!signal.aborted) {
+            if (vm.editingTarget?.id === found.id) {
+                const workspace = await getWorkspace();
+                if (signal.aborted) break;
+                if (workspace?.getBlockById(blockId)) return workspace;
+            }
+            if (Date.now() >= deadline) break;
+            await nextFrame(signal);
+        }
+        return null;
+    });
+}
+
+const waitLimit = 2000;
+
+function nextFrame(signal: AbortSignal) {
+    return new Promise<void>(resolve => {
+        const done = () => {
+            signal.removeEventListener('abort', done);
+            resolve();
+        };
+        signal.addEventListener('abort', done, {once: true});
+        if (typeof requestAnimationFrame === 'function') requestAnimationFrame(done);
+        else setTimeout(done, 16);
+    });
+}

package/src/file-diff-view.tsx

@@ -5,6 +5,7 @@ import type {FileChange, FileDiff} from './repository.js';
 import type {labelsFor} from './messages.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
 import type {ProjectAssetLoader} from './project-assets.js';
+import type {ProjectBlockLocator} from './block-diff-location.js';
 
 const en = {view: 'Show changes as', blocks: 'Blocks', text: 'Text'};
 const ja: typeof en = {view: '変更の表示', blocks: 'ブロック', text: 'テキスト'};
@@ -15,9 +16,9 @@ export const isProjectSource = (path: string) => path.split('/').pop() === 'proj
 /**
  * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
  */
-export function FileDiffView({change, diff, labels, locale, renderBlock, loadAsset}: {
+export function FileDiffView({change, diff, labels, locale, renderBlock, loadAsset, locateBlock}: {
     change: FileChange; diff: FileDiff | null; labels: ReturnType<typeof labelsFor>; locale: string;
-    renderBlock?: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+    renderBlock?: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader; locateBlock?: ProjectBlockLocator;
 }) {
     const [view, setView] = useState<'blocks' | 'text'>('blocks');
     const names = locale.startsWith('ja') ? ja : en;
@@ -40,7 +41,7 @@ export function FileDiffView({change, diff, labels, locale, renderBlock, loadAss
             {(['blocks', 'text'] as const).map(mode => <button key={mode} type="button" aria-pressed={view === mode}
                 data-git-view={mode} onClick={() => setView(mode)}>{names[mode]}</button>)}
         </div>}
-        {sources && view === 'blocks' ? <ProjectSourceComparison renderBlock={renderBlock!} locale={locale} fallback={text} loadAsset={loadAsset}
+        {sources && view === 'blocks' ? <ProjectSourceComparison renderBlock={renderBlock!} locale={locale} fallback={text} loadAsset={loadAsset} locateBlock={locateBlock}
             before={change.before === null ? null : sources.before} after={change.after === null ? null : sources.after}/> : text}
     </>;
 }

package/src/index.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
+import {createPortal, render, unmountComponentAtNode} from 'react-dom';
 import {FileDiffView} from './file-diff-view.js';
 import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
 import type {ChangedFile} from './project-change-model.js';
@@ -12,6 +12,11 @@ import type {GitConnectionSettings} from './connection-settings.js';
 import type {RemoteOperation} from './remote-operations.js';
 import {PullRequestReviewPanel} from './pull-request-panel.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import type {ScratchBlockLocationWorkspace} from './block-diff-location.js';
+export {createScratchBlocksDiffLocator} from './block-diff-location.js';
+export {createEditorBlockLocator} from './editor-block-locator.js';
+import {createEditorBlockLocator} from './editor-block-locator.js';
+import type {LocatorVM} from './editor-block-locator.js';
 
 export {createScratchBlocksDiffRenderer} from './scratch-block-diff-renderer.js';
 export type {ScratchBlockDiffRendererOptions, ScratchBlocksPort} from './scratch-block-diff-renderer.js';
@@ -26,6 +31,22 @@ export interface GitHost {
     isProjectDirty(): boolean;
     isProjectRunning?(): boolean;
     subscribe?(listener: (event: 'loaded' | 'changed') => void): () => void;
+    /**
+     * Opens the panel as a tab of the host's layout, with the same shape as the layout package's DocumentPanelRequest.
+     * Returning `false` keeps the modal dialog.
+     */
+    openPanel?(request: GitPanelRequest): boolean;
+    /** Opens the code of one stage or sprite, so a diff can point at its block. Without it, no block is located. */
+    openTargetCode?(targetId: string): void | Promise<void>;
+    /** The Editor's code workspace as it is now. */
+    getWorkspace?(): ScratchBlockLocationWorkspace | null | Promise<ScratchBlockLocationWorkspace | null>;
+}
+export interface GitPanelRequest {
+    reference: {providerId: string; documentId: string};
+    filename: string;
+    title?: string;
+    transient?: boolean;
+    mount(element: HTMLElement, close: () => void): {requestClose(): void; dispose(): void};
 }
 interface Controller {open(locale: string): void; refresh(automatic?: boolean): Promise<void>}
 interface State {
@@ -51,8 +72,14 @@ type ObserverWindow = Window & {FileSystemObserver?: new (callback: () => void)
 }};
 const watchInterval = 2000;
 
-function GitPanel({document, host, controller}: {document: Document; host: GitHost; controller: Controller}) {
+function GitPanel({vm, document, host, controller}: {vm: object; document: Document; host: GitHost; controller: Controller}) {
     const [visible, setVisible] = useState(false);
+    // A layout tab that holds the panel. The panel component stays mounted, so the repository survives closing the tab.
+    const [slot, setSlot] = useState<{element: HTMLElement; close(): void} | null>(null);
+    const shown = visible || slot !== null;
+    // Only a tab leaves the Editor visible, so only a tab offers to point at blocks in it.
+    const locator = useMemo(() => slot && host.openTargetCode && host.getWorkspace ? createEditorBlockLocator({
+        vm: vm as LocatorVM, openTargetCode: host.openTargetCode, getWorkspace: host.getWorkspace}) : undefined, [slot !== null, host, vm]);
     const [review, setReview] = useState(false);
     const [locale, setLocale] = useState(document.documentElement.lang || 'en');
     const [dirty, setDirty] = useState(host.isProjectDirty());
@@ -99,7 +126,21 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
             }
         }
     };
-    controller.open = language => {setLocale(language); setVisible(true);};
+    controller.open = language => {
+        setLocale(language);
+        const opened = host.openPanel?.({reference: {providerId: 'turbowarp-plus-git', documentId: 'local-git'},
+            filename: 'Git', title: labelsFor(language).title, transient: true,
+            mount(element, close) {
+                setVisible(false);
+                setSlot({element, close});
+                return {requestClose: close, dispose() {setSlot(previous => previous?.element === element ? null : previous);}};
+            }});
+        if (!opened) setVisible(true);
+    };
+    const closePanel = () => {
+        if (slot) slot.close();
+        else setVisible(false);
+    };
     controller.refresh = async (automatic = false) => {
         if (!alive.current || !current.current.repository) return;
         if (running.current) {
@@ -128,7 +169,7 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
     // While the panel is open, notice Git commands, agents and editors that change the repository outside the Editor.
     useEffect(() => {
         const repository = state.repository;
-        if (!visible || !repository) return;
+        if (!shown || !repository) return;
         const view = document.defaultView as ObserverWindow;
         let stopped = false;
         let checking = false;
@@ -177,13 +218,13 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
             document.removeEventListener('visibilitychange', onFocus);
             observer?.disconnect();
         };
-    }, [visible, state.repository, locale]);
+    }, [shown, state.repository, locale]);
     useEffect(() => {
-        if (!visible) return;
+        if (!visible || slot) return;
         const previous = document.activeElement as HTMLElement | null;
         dialog.current?.focus();
         return () => {if (previous?.isConnected) previous.focus();};
-    }, [visible]);
+    }, [visible, slot]);
     const chooseRoot = async () => {
         const view = document.defaultView as PickerWindow;
         await run(async () => {
@@ -208,6 +249,8 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
             const result = await host.openProject(directory, () => document.defaultView!.confirm(labels.replace));
             if (result === 'cancelled') return {};
         } finally {opening.current = false;}
+        // Loading the project brings its code to the front; keep the panel the person is working in in front of it.
+        if (slot) controller.open(locale);
         if (!alive.current) return {};
         setDirty(host.isProjectDirty());
         setState(previous => ({...previous, project: path, snapshot: null, changes: [], selected: null, diff: null, commit: null}));
@@ -256,7 +299,7 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
         });
     };
     const focusTrap = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'Escape') {event.stopPropagation(); setVisible(false); return;}
+        if (event.key === 'Escape') {event.stopPropagation(); closePanel(); return;}
         if (event.key !== 'Tab') return;
         const items = [...event.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), a[href], summary, [tabindex="0"]')]
             .filter(item => item.getClientRects().length > 0);
@@ -268,13 +311,19 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
     // One loader per selected change, so thumbnails read each asset once.
     const loadAsset = useMemo(() => state.repository && state.snapshot && state.selected ?
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
-    if (!visible) return null;
+    if (!shown) return null;
     const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
     const projectList = typeof projectChanges === 'object' ? projectChanges : null;
+    // The open project matches the working tree, so only the working-tree side of its project file can be located.
+    const projectFile = state.project === null ? null : [state.project, 'project.source.json'].filter(Boolean).join('/');
+    const fileLocator = (change: FileChange) => locator && change.path === projectFile &&
+        (change.group === 'unstaged' || change.group === 'untracked' ||
+            (change.group === 'staged' && !state.changes.some(item => item.path === change.path && item.group === 'unstaged'))) ?
+        locator : undefined;
+    const reviewLocator = (path: string, headSha: string) => locator && path === projectFile && state.snapshot?.head === headSha &&
+        !state.changes.length ? locator : undefined;
     const selection = projectList && !state.selected ? findElement(projectList.list, element) : null;
-    return <div className="twgit-backdrop">
-        <div className="twgit-panel" ref={dialog} tabIndex={-1} role="dialog" aria-modal="true" aria-label={labels.title}
-            onKeyDown={focusTrap}>
+    const content = <>
             <header>
                 <h2>{labels.title}</h2>
                 <button onClick={chooseRoot} disabled={state.busy}>{labels.choose}</button>
@@ -282,7 +331,7 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                 {!review && state.project !== null && <button disabled={state.busy} onClick={() => void openProject(state.project!)}>{labels.reload}</button>}
                 {state.repository && host.renderReviewBlock && <button type="button" disabled={state.busy}
                     onClick={() => setReview(!review)}>{review ? labels.localChanges : labels.pullRequests}</button>}
-                <button onClick={() => setVisible(false)}>{labels.close}</button>
+                <button onClick={closePanel}>{labels.close}</button>
             </header>
             <div className="twgit-context">
                 <span>{labels.repository} · {state.repository?.root.name || '—'}</span>
@@ -312,7 +361,8 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
             {state.busy && <p role="status">{labels.loading}</p>}
             {!state.repository && <p>{labels.empty}</p>}
             {review && state.repository && host.renderReviewBlock &&
-                <PullRequestReviewPanel repository={state.repository} locale={locale} renderBlock={host.renderReviewBlock}/>}
+                <PullRequestReviewPanel repository={state.repository} locale={locale} renderBlock={host.renderReviewBlock}
+                    locateFor={reviewLocator}/>}
             {!review && state.repository && <div className="twgit-content">
                 <aside>
                     {state.browser && <details>
@@ -350,12 +400,20 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                 </aside>
                 <main className="twgit-diff">
                     {selection && projectList ? <ProjectElementView changes={projectList} selection={selection} locale={locale}
+                        locateBlock={state.commit ? undefined : locator}
                         renderBlock={host.renderReviewBlock} onSelectFile={openFile}/> :
                         state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
+                            locateBlock={fileLocator(state.selected)}
                             renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
                 </main>
             </div>}
-        </div>
+    </>;
+    // In a tab the Editor stays usable beside the panel, so there is no backdrop, focus trap or Escape to close.
+    if (slot) return createPortal(<div className="twgit-panel twgit-panel-tab" role="region" aria-label={labels.title}>{content}</div>,
+        slot.element);
+    return <div className="twgit-backdrop">
+        <div className="twgit-panel" ref={dialog} tabIndex={-1} role="dialog" aria-modal="true" aria-label={labels.title}
+            onKeyDown={focusTrap}>{content}</div>
     </div>;
 }
 
@@ -376,7 +434,7 @@ export function mountGitPanel({vm, document, host}: {vm: object; document: Docum
     document.body.append(root);
     const controller: Controller = {open() {}, async refresh() {}};
     controllers.set(vm, controller);
-    render(<GitPanel document={document} host={host} controller={controller}/>, root);
+    render(<GitPanel vm={vm} document={document} host={host} controller={controller}/>, root);
     return {refresh: () => controller.refresh(), dispose() {
         if (controllers.get(vm) === controller) controllers.delete(vm);
         void host.connectionSettings?.disconnect().catch(() => {});

package/src/project-change-list.tsx

@@ -7,6 +7,7 @@ import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
 import {ProjectSourceComparison} from './project-source-review.js';
 import type {ChangeGroup, FileChange, Repository, Snapshot} from './repository.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import type {ProjectBlockLocator} from './block-diff-location.js';
 
 const en = {
     title: 'Changes by project element', stage: 'Stage', code: (count: number) => `Code · ${count} ${count === 1 ? 'change' : 'changes'}`,
@@ -164,9 +165,9 @@ const show = (value: unknown) => {
 };
 
 /** The details of one selected row: its code, pictures or values in both versions, and the files behind it. */
-export function ProjectElementView({changes, selection, locale, renderBlock, onSelectFile}: {
+export function ProjectElementView({changes, selection, locale, renderBlock, onSelectFile, locateBlock}: {
     changes: ProjectChanges; selection: {element: ProjectElementChange; target: ProjectTargetChanges | null}; locale: string;
-    renderBlock?: ProjectBlockRenderer; onSelectFile(file: ChangedFile): void;
+    renderBlock?: ProjectBlockRenderer; onSelectFile(file: ChangedFile): void; locateBlock?: ProjectBlockLocator;
 }) {
     const labels = projectChangeLabels(locale);
     const {element, target} = selection;
@@ -189,7 +190,7 @@ export function ProjectElementView({changes, selection, locale, renderBlock, onS
         <h3>{target && <span>{target.isStage ? labels.stage : target.name} · </span>}{elementTitle(element, target, labels, locale)}</h3>
         {element.kind === 'code' && target && renderBlock && <ProjectSourceComparison before={changes.sources.before}
             after={changes.sources.after} renderBlock={renderBlock} locale={locale} loadAsset={changes.loadAsset}
-            target={{isStage: target.isStage, name: target.name}}/>}
+            target={{isStage: target.isStage, name: target.name}} locateBlock={locateBlock}/>}
         {element.kind === 'costumes' && <div className="twgit-element-pictures">
             {(['before', 'after'] as const).map(version => <Picture key={version} md5ext={element.md5ext?.[version]} version={version}
                 loadAsset={changes.loadAsset} labels={labels} title={element[version]?.name === undefined ? labels[version] : `${labels[version]} · ${String(element[version]!.name)}`}/>)}

package/src/project-source-review.tsx

@@ -1,10 +1,12 @@
-import React, {useMemo, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {BlockPreview, usePreviewSync} from './block-diff-preview.js';
 import {isRecord, parseProjectSource, readProjectSourceDiff} from './project-source-patch.js';
 import type {BlockSide} from './project-source-patch.js';
 import {compareProjectForReview} from './project-source-review-model.js';
 import type {ScriptReview, TargetReview} from './project-source-review-model.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
+import type {ProjectBlockLocator} from './block-diff-location.js';
+import type {LocationStatus} from './block-diff-preview.js';
 import {currentCostume, useCostumeImage} from './project-assets.js';
 import type {ProjectAssetLoader, ProjectVersion} from './project-assets.js';
 
@@ -15,7 +17,9 @@ export type ProjectSourceReviewFile = {
     summary?: string;
     previousPath?: string;
     unavailable?: boolean;
-} & ({patch: string; beforeSource?: string; loadAsset?: ProjectAssetLoader} | {status: 'added' | 'removed' | 'updated'});
+} & ({patch: string; beforeSource?: string; loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on this file's after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator} | {status: 'added' | 'removed' | 'updated'});
 
 export interface ProjectSourceReviewProps {
     title: string;
@@ -37,7 +41,9 @@ const ja = {
     related: '関連ファイル', properties: 'コード以外の変更', invalid: 'この作品の差分を読み込めません。',
     flag: '緑の旗が押されたとき', broadcast: 'を受け取ったとき', key: 'キーが押されたとき',
     click: 'このスプライトが押されたとき', script: 'コード', noChanges: '作品に内容の変更はありません。',
-    comparison: '作品の変更', unreadable: '作品データとして読み込めないため、テキストの差分を表示します。'
+    comparison: '作品の変更', unreadable: '作品データとして読み込めないため、テキストの差分を表示します。',
+    locate: '編集画面で強調', locating: '編集画面でブロックを検索中…', located: '編集画面で強調しました。',
+    missingLocation: '編集画面に該当する版またはブロックがありません。'
 };
 const en: typeof ja = {
     review: 'Change review', fullDescription: 'Show full PR description', checks: 'Review checklist', files: 'Changed files', targets: 'Affected stages and sprites',
@@ -49,7 +55,9 @@ const en: typeof ja = {
     related: 'Related file', properties: 'Changes outside the code', invalid: 'This project diff could not be read.',
     flag: 'When green flag clicked', broadcast: 'received', key: 'When key pressed',
     click: 'When this sprite clicked', script: 'Code', noChanges: 'No changes to the project contents.',
-    comparison: 'Project changes', unreadable: 'This file could not be read as project data, so its text diff is shown.'
+    comparison: 'Project changes', unreadable: 'This file could not be read as project data, so its text diff is shown.',
+    locate: 'Highlight in Editor', locating: 'Finding the block in the Editor…', located: 'Highlighted in the Editor.',
+    missingLocation: 'This version or block is unavailable in the Editor.'
 };
 
 const properties = new Map<string, readonly [string, string]>([
@@ -74,9 +82,39 @@ function scriptTitle(side: BlockSide, labels: typeof ja) {
     return typeof block.opcode === 'string' ? block.opcode : labels.script;
 }
 
-function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset}: {
+type BlockLocation = {locate?(side: BlockSide): void; status(side: BlockSide): LocationStatus | undefined};
+const sideKey = (side: BlockSide) => JSON.stringify([side.target.isStage, side.target.name, side.id]);
+
+/** Highlights the after version of a script in the Editor, one request per comparison, and cancels it on unmount. */
+function useBlockLocation(comparison: Comparison, locateBlock?: ProjectBlockLocator): BlockLocation {
+    const request = useRef<AbortController>();
+    const [location, setLocation] = useState<{comparison: Comparison; key: string; locator: ProjectBlockLocator; status: LocationStatus}>();
+    useEffect(() => () => request.current?.abort(), [comparison, locateBlock]);
+    const locate = async (side: BlockSide) => {
+        if (!locateBlock) return;
+        request.current?.abort();
+        const controller = new AbortController();
+        request.current = controller;
+        const selected = {comparison, key: sideKey(side), locator: locateBlock};
+        setLocation({...selected, status: 'locating'});
+        let found = false;
+        try {
+            found = await locateBlock({target: side.target, id: side.id, version: 'after', parts: [], signal: controller.signal});
+        } catch {
+            // The host may replace the active project while resolving its workspace.
+        }
+        if (!controller.signal.aborted) setLocation({...selected, status: found ? 'located' : 'missingLocation'});
+    };
+    return {
+        locate: locateBlock && (side => void locate(side)),
+        status: side => location?.comparison === comparison && location.locator === locateBlock && location.key === sideKey(side) ?
+            location.status : undefined
+    };
+}
+
+function ScriptComparison({script, labels, reviewed = false, setReviewed, renderBlock, loadAsset, location}: {
     script: ScriptReview; labels: typeof ja; reviewed?: boolean; setReviewed?(value: boolean): void;
-    renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+    renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader; location?: BlockLocation;
 }) {
     const [open, setOpen] = useState(false);
     const {sync, toggle} = usePreviewSync(labels === ja ? 'ja' : 'en');
@@ -98,7 +136,9 @@ function ScriptComparison({script, labels, reviewed = false, setReviewed, render
                     {script[version].length ? script[version].map((side, index, sides) => <BlockPreview key={side.id} side={side}
                         title={sides.length > 1 ? `${labels[version]} ${index + 1}` : labels[version]}
                         marks={side.marks} renderBlock={renderBlock} withContext labels={labels}
-                        version={version} loadAsset={loadAsset} sync={sync}/>) :
+                        version={version} loadAsset={loadAsset} sync={sync}
+                        onLocate={version === 'after' && location?.locate ? () => location.locate!(side) : undefined}
+                        locationStatus={version === 'after' ? location?.status(side) : undefined}/>) :
                         <BlockPreview title={labels[version]} renderBlock={renderBlock} withContext labels={labels}/>}
                 </div>)}
             </div>
@@ -135,10 +175,12 @@ function TargetThumbnails({target, labels, loadAsset}: {target: TargetReview; la
 }
 
 /** Lists the changed stages and sprites of one project file, each with its code comparisons. */
-function ComparisonTargets({comparison, labels, renderBlock, loadAsset, review}: {
+function ComparisonTargets({comparison, labels, renderBlock, loadAsset, locateBlock, review}: {
     comparison: Comparison; labels: typeof ja; renderBlock: ProjectBlockRenderer; loadAsset?: ProjectAssetLoader;
+    locateBlock?: ProjectBlockLocator;
     review?: {file: string; keys: ReadonlySet<string>; set(key: string, value: boolean): void};
 }) {
+    const location = useBlockLocation(comparison, locateBlock);
     return <>
         {comparison.properties.length > 0 && <p>{labels.properties} · {propertyNames(comparison.properties, labels)}</p>}
         {!comparison.targets.length && !comparison.properties.length && <p>{labels.noChanges}</p>}
@@ -149,7 +191,7 @@ function ComparisonTargets({comparison, labels, renderBlock, loadAsset, review}:
             {target.scripts.map(script => {
                 const key = JSON.stringify([review?.file, target.isStage, target.name, script.id]);
                 return <ScriptComparison key={key} script={script} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}
-                    reviewed={review?.keys.has(key)} setReviewed={review && (value => review.set(key, value))}/>;
+                    location={location} reviewed={review?.keys.has(key)} setReviewed={review && (value => review.set(key, value))}/>;
             })}
         </section>)}
     </>;
@@ -168,12 +210,14 @@ export interface ProjectSourceComparisonProps {
     fallback?: React.ReactNode;
     /** Reads the images of both versions for thumbnails. Without it, stages and sprites are shown by name. */
     loadAsset?: ProjectAssetLoader;
+    /** Offers "Highlight in Editor" on the after version, which the caller has matched with the open project. */
+    locateBlock?: ProjectBlockLocator;
     /** Shows only the code of this stage or sprite, without the overview and the changes outside the code. */
     target?: {isStage: boolean; name: string};
 }
 
 /** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
-export function ProjectSourceComparison({before, after, renderBlock, locale = 'en', fallback, loadAsset, target}: ProjectSourceComparisonProps) {
+export function ProjectSourceComparison({before, after, renderBlock, locale = 'en', fallback, loadAsset, locateBlock, target}: ProjectSourceComparisonProps) {
     const labels = locale.startsWith('ja') ? ja : en;
     const only = target && JSON.stringify([target.isStage, target.isStage || target.name]);
     const comparison = useMemo(() => {
@@ -196,7 +240,8 @@ export function ProjectSourceComparison({before, after, renderBlock, locale = 'e
                 <div><dt>{labels.scripts}</dt><dd>{countScripts(comparison)}</dd></div>
             </dl>
         </header>}
-        <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}/>
+        <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock} loadAsset={loadAsset}
+            locateBlock={locateBlock}/>
     </section>;
 }
 
@@ -251,6 +296,7 @@ export function ProjectSourceReview({title, description, verification, files, re
             {(invalid || file.unavailable) && <p role="alert">{labels.invalid}</p>}
             {comparison && <ComparisonTargets comparison={comparison} labels={labels} renderBlock={renderBlock}
                 loadAsset={'loadAsset' in file ? file.loadAsset : undefined}
+                locateBlock={'locateBlock' in file ? file.locateBlock : undefined}
                 review={{file: file.path, keys: reviewed, set: setReviewed}}/>}
         </section>)}
     </section>;

package/src/pull-request-panel.tsx

@@ -4,6 +4,7 @@ import type {GitHubPullRequests} from './github-pull-requests.js';
 import {ProjectSourceReview} from './project-source-review.js';
 import type {ProjectBlockRenderer} from './scratch-block-diff-renderer.js';
 import type {Repository} from './repository.js';
+import type {ProjectBlockLocator} from './block-diff-location.js';
 
 const en = {
     title: 'Pull requests', number: 'Pull request number', openNumber: 'Open pull request',
@@ -37,8 +38,9 @@ type Result<T> = {data: T; error?: never} | {data?: never; error: string};
 type Listing = Awaited<ReturnType<GitHubPullRequests['list']>>;
 type Pull = Awaited<ReturnType<GitHubPullRequests['load']>>;
 
-function PullRequests({name, labels, locale, renderBlock}: {
+function PullRequests({name, labels, locale, renderBlock, locateFor}: {
     name: string; labels: typeof en; locale: string; renderBlock: ProjectBlockRenderer;
+    locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }) {
     const client = useMemo(() => createGitHubPullRequests(name), [name]);
     const [page, setPage] = useState(1);
@@ -108,14 +110,17 @@ function PullRequests({name, labels, locale, renderBlock}: {
                     <code title={pr.head.sha}>{pr.head.ref} → {pr.base.ref}</code>
                     <a href={pr.url} target="_blank" rel="noreferrer">{labels.onGitHub}</a>
                 </p>
-                <ProjectSourceReview title={pr.title} description={pr.description} files={pr.files} renderBlock={renderBlock} locale={locale}/>
+                <ProjectSourceReview title={pr.title} description={pr.description} files={locateFor ? pr.files.map(file => 'patch' in file ? {...file, locateBlock: locateFor(file.path, pr.head.sha)} : file) : pr.files}
+                    renderBlock={renderBlock} locale={locale}/>
             </>}
         </main>
     </div>;
 }
 
-export function PullRequestReviewPanel({repository, locale, renderBlock}: {
+export function PullRequestReviewPanel({repository, locale, renderBlock, locateFor}: {
     repository: Repository; locale: string; renderBlock: ProjectBlockRenderer;
+    /** Returns a locator for a project file whose PR head matches the open project, or `undefined`. */
+    locateFor?(path: string, headSha: string): ProjectBlockLocator | undefined;
 }) {
     const labels = locale.startsWith('ja') ? ja : en;
     const [origin, setOrigin] = useState<{repository: Repository; name: string | null; failed?: boolean}>();
@@ -130,5 +135,5 @@ export function PullRequestReviewPanel({repository, locale, renderBlock}: {
     }, [repository]);
     if (origin?.repository !== repository) return <p role="status" className="twgit-context">{labels.loading}</p>;
     if (!origin.name) return <p className="twgit-context" role="status">{origin.failed ? labels.failed : labels.noOrigin}</p>;
-    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock}/>;
+    return <PullRequests key={origin.name} name={origin.name} labels={labels} locale={locale} renderBlock={renderBlock} locateFor={locateFor}/>;
 }

package/src/style.css

@@ -55,3 +55,5 @@
 .twgit-element-files { margin-top: 12px; }
 .twgit-panel .twgit-element span.twgit-element-name { width: auto; font-family: inherit; }
 .twgit-git-details > .twgit-connection-body { left: auto; right: 0; }
+/* In a layout tab the panel fills the tab and leaves the Editor beside it. */
+.twgit-panel.twgit-panel-tab { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }