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

package/dist/messages.d.ts

@@ -51,6 +51,23 @@ export declare const messages: {
         remoteDone: string;
         pulledProject: string;
         confirmPush: string;
+        details: string;
+        branch: string;
+        head: string;
+        groups: string;
+        added: string;
+        modified: string;
+        deleted: string;
+        gitStaged: string;
+        gitUnstaged: string;
+        gitUntracked: string;
+        upstreamSame: string;
+        upstreamAhead: string;
+        upstreamBehind: string;
+        upstreamDiverged: string;
+        upstreamUnknown: string;
+        records: string;
+        checkedAt: string;
         failed: string;
     };
     ja: {
@@ -105,6 +122,23 @@ export declare const messages: {
         remoteDone: string;
         pulledProject: string;
         confirmPush: string;
+        details: string;
+        branch: string;
+        head: string;
+        groups: string;
+        added: string;
+        modified: string;
+        deleted: string;
+        gitStaged: string;
+        gitUnstaged: string;
+        gitUntracked: string;
+        upstreamSame: string;
+        upstreamAhead: string;
+        upstreamBehind: string;
+        upstreamDiverged: string;
+        upstreamUnknown: string;
+        records: string;
+        checkedAt: string;
         failed: string;
     };
 };

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/{repository-VBp-UNWc.js → repository-CtvWYPQ8.js}

@@ -14562,6 +14562,37 @@ async function fetch({ fs, http, onProgress, onMessage, onAuth, onAuthSuccess, o
 	}
 }
 /**
+* Find the merge base for a set of commits
+*
+* @param {object} args
+* @param {FsClient} args.fs - a file system client
+* @param {string} [args.dir] - The [working tree](dir-vs-gitdir.md) directory path
+* @param {string} [args.gitdir=join(dir,'.git')] - [required] The [git directory](dir-vs-gitdir.md) path
+* @param {string[]} args.oids - Which commits
+* @param {object} [args.cache] - a [cache](cache.md) object
+*
+*/
+async function findMergeBase({ fs, dir, gitdir = join(dir, ".git"), oids, cache = {} }) {
+	try {
+		assertParameter("fs", fs);
+		assertParameter("gitdir", gitdir);
+		assertParameter("oids", oids);
+		const fsp = new FileSystem(fs);
+		return await _findMergeBase({
+			fs: fsp,
+			cache,
+			gitdir: await discoverGitdir({
+				fsp,
+				dotgit: gitdir
+			}),
+			oids
+		});
+	} catch (err) {
+		err.caller = "git.findMergeBase";
+		throw err;
+	}
+}
+/**
 * Read an entry from the git config files.
 *
 * *Caveats:*
@@ -16800,6 +16831,9 @@ var emptyTree = "4b825dc642cb6eb9a060e54bf8d69288fbee4904";
 var textLimit = 1048576;
 var inScope = (path, scope) => !scope || path === scope || path.startsWith(scope + "/");
 var probeLimit = 5e3;
+/** Most commits read to count how far a branch is ahead of or behind its tracking branch. */
+var upstreamWalkLimit = 1e3;
+var trackingRef = (branchRef) => "refs/remotes/origin/" + branchRef.slice(11);
 var sameMetadata = (a, b) => a.size === b.size && [...a].every(([path, bytes]) => {
 	var _b$get;
 	return sameBytes(bytes, (_b$get = b.get(path)) !== null && _b$get !== void 0 ? _b$get : null);
@@ -16839,7 +16873,7 @@ async function openRepository(root) {
 		if (text.startsWith("ref: refs/heads/")) {
 			const ref = text.slice(5);
 			pathParts(ref);
-			paths.push("/.git/" + ref);
+			paths.push("/.git/" + ref, "/.git/" + trackingRef(ref));
 		} else if (!/^[0-9a-f]{40}$/.test(text)) throw new GitPanelError("invalid");
 		const result = /* @__PURE__ */ new Map();
 		for (const path of paths) {
@@ -16885,7 +16919,7 @@ async function openRepository(root) {
 			} catch (_unused) {
 				return "locked";
 			}
-			paths.push(".git/" + head.slice(5));
+			paths.push(".git/" + head.slice(5), ".git/" + trackingRef(head.slice(5)));
 		}
 		const lines = [];
 		for (const path of paths) {
@@ -16957,6 +16991,86 @@ async function openRepository(root) {
 			mode
 		}]));
 	};
+	/**
+	* Compares `refs/heads/<branch>` with `refs/remotes/origin/<branch>` from local refs only. Counts by painting
+	* commits from both tips in committer-time order until every queued commit is reachable from both, like
+	* `git rev-list --left-right --count`, reading at most `upstreamWalkLimit` commits.
+	*/
+	const upstreamRelation = async (branch, head) => {
+		const unknown = {
+			state: "unknown",
+			ahead: 0,
+			behind: 0
+		};
+		if (!branch || !head) return unknown;
+		pathParts(trackingRef("refs/heads/" + branch));
+		try {
+			const remote = await resolveRef(_objectSpread2(_objectSpread2({}, options), {}, { ref: trackingRef("refs/heads/" + branch) }));
+			if (remote === head) return {
+				state: "same",
+				ahead: 0,
+				behind: 0
+			};
+			const bases = await findMergeBase(_objectSpread2(_objectSpread2({}, options), {}, {
+				cache,
+				oids: [head, remote]
+			}));
+			const hasAhead = !bases.includes(head), hasBehind = !bases.includes(remote);
+			const local = 1, tracking = 2, both = 3;
+			const flags = /* @__PURE__ */ new Map([[head, local], [remote, tracking]]);
+			const time = async (oid) => (await readCommit(_objectSpread2(_objectSpread2({}, options), {}, {
+				cache,
+				oid
+			}))).commit;
+			const queue = [];
+			const enqueue = async (oid) => {
+				const commit = await time(oid);
+				queue.push({
+					oid,
+					time: commit.committer.timestamp,
+					parents: commit.parent
+				});
+			};
+			await enqueue(head);
+			await enqueue(remote);
+			let read = 2;
+			let complete = true;
+			while (queue.some((item) => flags.get(item.oid) !== both)) {
+				if (read >= 1e3) {
+					complete = false;
+					break;
+				}
+				queue.sort((a, b) => b.time - a.time);
+				const item = queue.shift();
+				const flag = flags.get(item.oid);
+				for (const parent of item.parents) {
+					var _flags$get;
+					const previous = (_flags$get = flags.get(parent)) !== null && _flags$get !== void 0 ? _flags$get : 0;
+					if ((previous | flag) === previous) continue;
+					flags.set(parent, previous | flag);
+					if (!queue.some((entry) => entry.oid === parent)) {
+						await enqueue(parent);
+						read++;
+					}
+				}
+			}
+			let ahead = 0, behind = 0;
+			for (const flag of flags.values()) if (flag === local) ahead++;
+			else if (flag === tracking) behind++;
+			if (!complete) {
+				ahead = hasAhead ? upstreamWalkLimit : 0;
+				behind = hasBehind ? upstreamWalkLimit : 0;
+			}
+			return {
+				state: hasAhead && hasBehind ? "diverged" : hasAhead ? "ahead" : hasBehind ? "behind" : "same",
+				ahead: hasAhead ? Math.max(ahead, 1) : 0,
+				behind: hasBehind ? Math.max(behind, 1) : 0
+			};
+		} catch (error) {
+			if (errorCode(error) === "NotFoundError") return unknown;
+			throw error;
+		}
+	};
 	const assertSnapshot = async (snapshot) => {
 		if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError("changed");
 	};
@@ -16985,6 +17099,7 @@ async function openRepository(root) {
 			author: commit.author.name,
 			timestamp: commit.author.timestamp
 		})) : [];
+		const upstream = await upstreamRelation(branch || void 0, head);
 		const matrix = await statusMatrix(_objectSpread2(_objectSpread2({}, options), {}, {
 			cache,
 			refresh: false,
@@ -17033,7 +17148,8 @@ async function openRepository(root) {
 			changes,
 			scope,
 			metadata: before,
-			probe: fingerprint
+			probe: fingerprint,
+			upstream
 		};
 	};
 	const historyChanges = async (snapshot, oid) => {
@@ -17340,4 +17456,4 @@ async function openRepository(root) {
 		projectAssetLoader: (snapshot, folder, comparison) => ({ version, md5ext, signal }) => !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) : serial(() => readFolderAsset(snapshot, pathParts(folder), () => comparisonSource(snapshot, comparison, version), md5ext, signal)).catch(() => null)
 	};
 }
-export { GitPanelError as n, createReadOnlyFs as r, openRepository as t };
+export { createReadOnlyFs as i, upstreamWalkLimit as n, GitPanelError as r, openRepository as t };

package/dist/repository.d.ts

@@ -40,6 +40,21 @@ export interface Snapshot {
     metadata: Metadata;
     /** Size and time fingerprint taken before the read. Compare it with `probe(scope)` to see later changes. */
     probe: string;
+    /**
+     * How the current branch stands against `refs/remotes/origin/<branch>` as of the last fetch, from local refs only.
+     * `unknown` when there is no current branch or no tracking ref yet.
+     */
+    upstream: UpstreamRelation;
+}
+export interface UpstreamRelation {
+    state: 'same' | 'ahead' | 'behind' | 'diverged' | 'unknown';
+    /**
+     * Commits on the local branch that the tracking branch lacks, and the reverse. Zero when unknown. Counting reads at
+     * most `upstreamWalkLimit` (1000) commits; past that, a side that has commits of its own reports exactly that limit,
+     * meaning "this many or more". The state itself comes from the merge base and stays exact.
+     */
+    ahead: number;
+    behind: number;
 }
 export interface FileDiff {
     binary: boolean;
@@ -56,6 +71,8 @@ export interface FileDiff {
     afterSize: number;
     tooLarge: boolean;
 }
+/** Most commits read to count how far a branch is ahead of or behind its tracking branch. */
+export declare const upstreamWalkLimit = 1000;
 export declare function openRepository(root: FileSystemDirectoryHandle): Promise<{
     root: FileSystemDirectoryHandle;
     openProject: (path: string) => Promise<FileSystemDirectoryHandle>;

package/dist/repository.js

@@ -1 +1 @@
-export { n as GitPanelError, r as createReadOnlyFs, t as openRepository } from "./repository-VBp-UNWc.js";
+export { r as GitPanelError, i as createReadOnlyFs, t as openRepository, n as upstreamWalkLimit } from "./repository-CtvWYPQ8.js";

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

@@ -116,14 +116,24 @@
 .twgit-panel button:focus-visible, .twgit-panel summary:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
 .twgit-panel button[aria-pressed="true"] { color: HighlightText; background: Highlight; }
 .twgit-context { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 8px 16px; }
-.twgit-connection { margin: 0 16px 8px; max-height: 45%; overflow: auto; }
+.twgit-context { align-items: center; }
+.twgit-connection, .twgit-git-details { position: relative; }
+.twgit-connection > summary, .twgit-git-details > summary { cursor: pointer; }
+/* Settings and Git details open over the list, so the list and the diff stay where they are. */
+.twgit-connection-body { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: min(440px, 80vw); max-height: 60vh;
+    overflow: auto; padding: 10px 12px; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 6px;
+    box-shadow: 0 8px 24px #0004; }
+.twgit-connection-body > p { margin: 4px 0; overflow-wrap: anywhere; }
+.twgit-sync { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.twgit-change-kind { display: inline-block; min-width: 2.6em; font-size: 11px; opacity: .8; }
+.twgit-file-details { font-size: 12px; margin-bottom: 6px; }
+.twgit-file-details > p { margin: 2px 0; }
 .twgit-content { display: grid; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); flex: 1; min-height: 0; }
 .twgit-panel aside { padding: 0 14px 14px; overflow: auto; border-right: 1px solid GrayText; }
 .twgit-panel aside ul { list-style: none; padding: 0; margin: 4px 0; }
 .twgit-panel aside li { overflow-wrap: anywhere; }
 .twgit-panel summary { cursor: pointer; }
 .twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
-.twgit-file span { display: inline-block; width: 1.4em; font-family: monospace; }
 .twgit-diff { padding: 0 16px 16px; min-width: 0; overflow: auto; }
 .twgit-diff .diff { font-size: 12px; }
 .twgit-history { list-style: none; margin: 0; padding: 0; }
@@ -152,4 +162,7 @@
 .twgit-element-values td { font-family: ui-monospace, monospace; }
 .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.9.0",
+  "version": "0.11.0",
   "description": "Read-only local Git panel for TurboWarp Plus Editor",
   "type": "module",
   "license": "MPL-2.0",

package/src/connection-settings.tsx

@@ -28,7 +28,7 @@ const en = {
     unavailable: 'No GitHub connection is configured.', changed: 'Switching disconnects the current session.',
     error: 'GitHub connection failed. Retry using the selected connection.',
     invalid: 'The selected repository needs a GitHub HTTPS origin.',
-    allowPush: 'Authorize push', fetch: 'Fetch', pull: 'Pull (fast-forward only)', push: 'Push'
+    allowPush: 'Allow sending to GitHub (push)', fetch: 'Check GitHub (fetch)', pull: 'Get from GitHub (pull)', push: 'Send to GitHub (push)'
 };
 const ja: typeof en = {
     title: 'GitHub 接続', mode: '接続方式', select: '接続方式を選択',
@@ -39,7 +39,7 @@ const ja: typeof en = {
     unavailable: 'GitHub 接続先が設定されていません。', changed: '方式を切り替えると現在のセッションを切断します。',
     error: 'GitHub 接続に失敗しました。選択中の方式で再試行してください。',
     invalid: '選択したリポジトリには GitHub の HTTPS リモート origin が必要です。',
-    allowPush: 'push を許可する', fetch: 'Fetch', pull: 'Pull（fast-forward のみ）', push: 'Push'
+    allowPush: 'GitHub に送ることを許可する（push）', fetch: 'GitHub と確かめる（fetch）', pull: 'GitHub から取り込む（pull）', push: 'GitHub に送る（push）'
 };
 
 export function ConnectionSettings({settings, locale, readOrigin, runOperation}: {
@@ -69,8 +69,15 @@ export function ConnectionSettings({settings, locale, readOrigin, runOperation}:
         if (!remote) throw new Error('INVALID_REMOTE');
         await settings.connect(remote, allowPush);
     });
-    return <details className="twgit-connection">
+    const connected = !!mode && state.status === 'connected';
+    // Sync sits beside the GitHub status; the settings open over the list instead of pushing it down.
+    return <>
+        {runOperation && connected && <span className="twgit-sync">{(['fetch', 'pull', 'push'] as const).map(operation =>
+            <button key={operation} disabled={busy || !readOrigin || (operation === 'push' && !write)}
+                onClick={() => void run(() => runOperation(operation))}>{labels[operation]}</button>)}</span>}
+    <details className="twgit-connection">
         <summary>{labels.title}</summary>
+        <div className="twgit-connection-body">
         {!settings.modes.length ? <p>{labels.unavailable}</p> : <>
             <label>{labels.mode} <select value={mode ?? ''} disabled={busy}
                 onChange={event => {const choice = event.currentTarget.value as Mode; void run(() => settings.select(choice));}}>
@@ -93,11 +100,10 @@ export function ConnectionSettings({settings, locale, readOrigin, runOperation}:
                 {state.status !== 'disconnected' && <button disabled={busy}
                     onClick={() => void run(settings.refresh)}>{labels.check}</button>}
                 <button disabled={busy} onClick={() => void run(settings.disconnect)}>{labels.disconnect}</button>
-                {runOperation && state.status === 'connected' && (['fetch', 'pull', 'push'] as const).map(operation =>
-                    <button key={operation} disabled={busy || !readOrigin || (operation === 'push' && !write)}
-                        onClick={() => void run(() => runOperation(operation))}>{labels[operation]}</button>)}
             </>}
-            {error && <p className="twgit-error" role="alert">{labels[error]}</p>}
         </>}
-    </details>;
+        </div>
+    </details>
+        {error && <p className="twgit-error" role="alert">{labels[error]}</p>}
+    </>;
 }

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);
+    });
+}