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

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 { n as GitPanelError, r as createReadOnlyFs, t as openRepository } from "./repository-VBp-UNWc.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,12 +2684,12 @@ 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;
 	const parsed = (diff === null || diff === void 0 ? void 0 : diff.patch) ? parseDiff(diff.patch)[0] : null;
-	const text = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, labels.mode, " · ", ((_change$oldMode = change.oldMode) === null || _change$oldMode === void 0 ? void 0 : _change$oldMode.toString(8)) || "—", " → ", ((_change$newMode = change.newMode) === null || _change$newMode === void 0 ? void 0 : _change$newMode.toString(8)) || "—"), diff && /* @__PURE__ */ React.createElement("p", null, diff.beforeSize, " → ", diff.afterSize, " ", labels.bytes), (diff === null || diff === void 0 ? void 0 : diff.binary) && /* @__PURE__ */ React.createElement("p", null, labels.binary), (diff === null || diff === void 0 ? void 0 : diff.tooLarge) && /* @__PURE__ */ React.createElement("p", null, labels.large), parsed && /* @__PURE__ */ React.createElement(index, {
+	const text = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("details", { className: "twgit-file-details" }, /* @__PURE__ */ React.createElement("summary", null, labels.details), /* @__PURE__ */ React.createElement("p", null, labels.mode, " · ", ((_change$oldMode = change.oldMode) === null || _change$oldMode === void 0 ? void 0 : _change$oldMode.toString(8)) || "—", " → ", ((_change$newMode = change.newMode) === null || _change$newMode === void 0 ? void 0 : _change$newMode.toString(8)) || "—"), diff && /* @__PURE__ */ React.createElement("p", null, diff.beforeSize, " → ", diff.afterSize, " ", labels.bytes)), (diff === null || diff === void 0 ? void 0 : diff.binary) && /* @__PURE__ */ React.createElement("p", null, labels.binary), (diff === null || diff === void 0 ? void 0 : diff.tooLarge) && /* @__PURE__ */ React.createElement("p", null, labels.large), parsed && /* @__PURE__ */ React.createElement(index, {
 		viewType: "unified",
 		diffType: parsed.type,
 		hunks: parsed.hunks
@@ -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);
@@ -2746,10 +2747,10 @@ var en$2 = {
 	file: "File name",
 	noImage: "No image",
 	groups: {
-		staged: "Staged",
-		unstaged: "Unstaged",
-		untracked: "Untracked",
-		commit: "Commit"
+		staged: "in the next record",
+		unstaged: "not yet recorded",
+		untracked: "new file",
+		commit: "in this record"
 	}
 };
 var ja$2 = {
@@ -2780,10 +2781,10 @@ var ja$2 = {
 	file: "ファイル名",
 	noImage: "画像なし",
 	groups: {
-		staged: "ステージ済み",
-		unstaged: "未ステージ",
-		untracked: "未追跡",
-		commit: "コミット"
+		staged: "次の記録に入る",
+		unstaged: "まだ記録していない",
+		untracked: "新しいファイル",
+		commit: "この記録"
 	}
 };
 var projectChangeLabels = (locale) => locale.startsWith("ja") ? ja$2 : en$2;
@@ -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, {
@@ -3039,15 +3041,15 @@ var messages = {
 		replace: "Replace the open project and discard its unsaved changes?",
 		dirty: "The Editor has unsaved changes.",
 		saved: "The Editor has no unsaved changes.",
-		staged: "Staged",
-		unstaged: "Unstaged",
-		untracked: "Untracked",
-		commit: "Commit changes",
-		history: "History",
-		worktree: "Working tree",
-		clean: "No changes in the selected folder.",
+		staged: "Changes in the next record",
+		unstaged: "Saved, not yet recorded",
+		untracked: "New files never recorded",
+		commit: "Changes in this record",
+		history: "Records (commits)",
+		worktree: "Saved files",
+		clean: "No saved changes in the selected folder.",
 		branches: "Local branches",
-		unborn: "No commits yet",
+		unborn: "No records yet",
 		detached: "Detached HEAD",
 		select: "Select a file to view its diff.",
 		binary: "Binary asset",
@@ -3061,16 +3063,33 @@ var messages = {
 		changed: "Files or Git state changed while reading. Refresh to read the current state.",
 		outdated: "The repository changed outside the Editor. Refresh to read the current state.",
 		unsupported: "This repository contains an entry the browser cannot represent.",
-		pullUnsafe: "Stop the project and clear unsaved or local Git changes before pulling.",
-		diverged: "Pull requires a fast-forward. Your local branch and files are intact.",
+		pullUnsafe: "Stop the project, and save or undo unsaved edits and unrecorded changes, before getting changes from GitHub (pull).",
+		diverged: "This branch and GitHub's have both gained records, so they cannot be combined here (pull only fast-forwards). Your branch and files are unchanged.",
 		session: "Reconnect GitHub for this repository and requested permission.",
-		pushUnknown: "The push result is unknown. Fetch and check the remote branch before retrying.",
-		pushRefresh: "The push succeeded. Fetch to refresh the local tracking branch.",
-		rollbackFailed: "Git could not restore all local changes. Check the working tree and Git status.",
-		remoteFailed: "The Git operation failed. Check the selected connection and retry.",
-		remoteDone: "Git operation completed.",
-		pulledProject: "Pull completed. Use Reload Project to open the updated files.",
-		confirmPush: "Push the current branch to its GitHub origin?",
+		pushUnknown: "It is unknown whether GitHub received the records. Check GitHub (fetch) before sending again.",
+		pushRefresh: "GitHub received the records. Check GitHub (fetch) to update the status.",
+		rollbackFailed: "Some local changes could not be restored. Check the files and the Git details.",
+		remoteFailed: "Could not complete the GitHub operation. Check the connection and try again.",
+		remoteDone: "The GitHub operation finished.",
+		pulledProject: "Got the changes from GitHub. Use Reload Project to open the updated files.",
+		confirmPush: "Send the records on this branch to GitHub (push)?",
+		details: "Git details",
+		branch: "Branch",
+		head: "HEAD",
+		groups: "Git groups",
+		added: "Added",
+		modified: "Changed",
+		deleted: "Deleted",
+		gitStaged: "Staged",
+		gitUnstaged: "Unstaged",
+		gitUntracked: "Untracked",
+		upstreamSame: "Same as GitHub",
+		upstreamAhead: "Ahead of GitHub",
+		upstreamBehind: "Behind GitHub",
+		upstreamDiverged: "Diverged from GitHub",
+		upstreamUnknown: "Not checked with GitHub yet",
+		records: "records",
+		checkedAt: "as of the last check",
 		failed: "Could not read the repository. Check folder access and refresh."
 	},
 	ja: {
@@ -3090,18 +3109,18 @@ var messages = {
 		reload: "作品を再読込",
 		up: "上のフォルダ",
 		browse: "リポジトリ内の作品を選択",
-		replace: "未保存の変更を破棄して、別の作品を開きますか？",
-		dirty: "Editor に未保存の変更があります。",
-		saved: "Editor に未保存の変更はありません。",
-		staged: "ステージ済み",
-		unstaged: "未ステージ",
-		untracked: "未追跡",
-		commit: "コミットの変更",
-		history: "履歴",
-		worktree: "作業ツリー",
-		clean: "対象フォルダに変更はありません。",
+		replace: "保存していない編集を破棄して、別の作品を開きますか？",
+		dirty: "Editor に保存していない編集があります。",
+		saved: "Editor に保存していない編集はありません。",
+		staged: "次の記録に入る変更",
+		unstaged: "保存したが、まだ記録していない変更",
+		untracked: "まだ記録したことのない新しいファイル",
+		commit: "この記録の変更",
+		history: "記録（コミット）の履歴",
+		worktree: "保存したファイル",
+		clean: "対象フォルダに、保存した変更はありません。",
 		branches: "ローカルブランチ",
-		unborn: "コミットはまだありません",
+		unborn: "まだ記録がありません",
 		detached: "ブランチ未選択の HEAD",
 		select: "ファイルを選ぶと差分を表示します。",
 		binary: "バイナリアセット",
@@ -3115,16 +3134,33 @@ var messages = {
 		changed: "読込中にファイルまたは Git の状態が変わりました。再取得してください。",
 		outdated: "Editor の外でリポジトリが変更されました。再取得すると最新の状態を読み込みます。",
 		unsupported: "ブラウザーで扱えない種類の Git エントリーがあります。",
-		pullUnsafe: "pull の前に実行を止め、未保存編集とローカルの Git 変更を解消してください。",
-		diverged: "fast-forward できません。ローカルブランチとファイルは保持されています。",
+		pullUnsafe: "GitHub から取り込む前に、実行を止め、保存していない編集とまだ記録していない変更をなくしてください。",
+		diverged: "このブランチと GitHub の両方に新しい記録があるため、ここでは取り込めません（pull は fast-forward のみ）。ブランチとファイルはそのままです。",
 		session: "このリポジトリと操作に必要な権限で GitHub に接続してください。",
-		pushUnknown: "push の結果が不明です。再試行する前に fetch でリモートブランチを確認してください。",
-		pushRefresh: "push は成功しました。fetch でローカルの追跡ブランチを更新してください。",
-		rollbackFailed: "Git がローカルの変更をすべて復元できませんでした。作業ツリーと Git の状態を確認してください。",
-		remoteFailed: "Git 操作に失敗しました。選択中の接続を確認して再試行してください。",
-		remoteDone: "Git 操作が完了しました。",
-		pulledProject: "pull が完了しました。「作品を再読込」で更新済みのファイルを開けます。",
-		confirmPush: "現在のブランチを GitHub の origin に push しますか？",
+		pushUnknown: "GitHub が記録を受け取ったか分かりません。送り直す前に「GitHub と確かめる」を使ってください。",
+		pushRefresh: "GitHub が記録を受け取りました。「GitHub と確かめる」で状態を更新してください。",
+		rollbackFailed: "一部のローカルの変更を元に戻せませんでした。ファイルと Git の詳細を確認してください。",
+		remoteFailed: "GitHub との操作を完了できませんでした。接続を確認して、もう一度試してください。",
+		remoteDone: "GitHub との操作が終わりました。",
+		pulledProject: "GitHub から取り込みました。「作品を再読込」で更新したファイルを開けます。",
+		confirmPush: "このブランチの記録を GitHub に送りますか（push）？",
+		details: "Git の詳細",
+		branch: "ブランチ",
+		head: "HEAD",
+		groups: "Git の区分",
+		added: "追加",
+		modified: "変更",
+		deleted: "削除",
+		gitStaged: "ステージ済み (staged)",
+		gitUnstaged: "未ステージ (unstaged)",
+		gitUntracked: "未追跡 (untracked)",
+		upstreamSame: "GitHub と同じ",
+		upstreamAhead: "GitHub より進んでいる",
+		upstreamBehind: "GitHub より遅れている",
+		upstreamDiverged: "GitHub と分かれている",
+		upstreamUnknown: "まだ GitHub と確かめていない",
+		records: "件",
+		checkedAt: "最後に確かめた時点",
 		failed: "リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。"
 	}
 };
@@ -3151,10 +3187,10 @@ var en$1 = {
 	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)"
 };
 var ja$1 = {
 	title: "GitHub 接続",
@@ -3177,10 +3213,10 @@ var ja$1 = {
 	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）"
 };
 function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 	const labels = locale.startsWith("ja") ? ja$1 : en$1;
@@ -3216,7 +3252,16 @@ function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 		if (!remote) throw new Error("INVALID_REMOTE");
 		await settings.connect(remote, allowPush);
 	});
-	return /* @__PURE__ */ React.createElement("details", { className: "twgit-connection" }, /* @__PURE__ */ React.createElement("summary", null, labels.title), !settings.modes.length ? /* @__PURE__ */ React.createElement("p", null, labels.unavailable) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, labels.mode, " ", /* @__PURE__ */ React.createElement("select", {
+	const connected = !!mode && state.status === "connected";
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, runOperation && connected && /* @__PURE__ */ React.createElement("span", { className: "twgit-sync" }, [
+		"fetch",
+		"pull",
+		"push"
+	].map((operation) => /* @__PURE__ */ React.createElement("button", {
+		key: operation,
+		disabled: busy || !readOrigin || operation === "push" && !write,
+		onClick: () => void run(() => runOperation(operation))
+	}, labels[operation]))), /* @__PURE__ */ React.createElement("details", { className: "twgit-connection" }, /* @__PURE__ */ React.createElement("summary", null, labels.title), /* @__PURE__ */ React.createElement("div", { className: "twgit-connection-body" }, !settings.modes.length ? /* @__PURE__ */ React.createElement("p", null, labels.unavailable) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", null, labels.mode, " ", /* @__PURE__ */ React.createElement("select", {
 		value: mode !== null && mode !== void 0 ? mode : "",
 		disabled: busy,
 		onChange: (event) => {
@@ -3250,20 +3295,13 @@ function ConnectionSettings({ settings, locale, readOrigin, runOperation }) {
 	}, labels.check), /* @__PURE__ */ React.createElement("button", {
 		disabled: busy,
 		onClick: () => void run(settings.disconnect)
-	}, labels.disconnect), runOperation && state.status === "connected" && [
-		"fetch",
-		"pull",
-		"push"
-	].map((operation) => /* @__PURE__ */ React.createElement("button", {
-		key: operation,
-		disabled: busy || !readOrigin || operation === "push" && !write,
-		onClick: () => void run(() => runOperation(operation))
-	}, labels[operation]))), error && /* @__PURE__ */ React.createElement("p", {
+	}, labels.disconnect))))), error && /* @__PURE__ */ React.createElement("p", {
 		className: "twgit-error",
 		role: "alert"
-	}, labels[error])));
+	}, labels[error]));
 }
 // src/pull-request-panel.tsx
+init_objectSpread2();
 var en = {
 	title: "Pull requests",
 	number: "Pull request number",
@@ -3309,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();
@@ -3397,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(() => {
@@ -3436,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
@@ -3455,9 +3530,20 @@ var initial = {
 };
 var controllers = /* @__PURE__ */ new WeakMap();
 var watchInterval = 2e3;
-function GitPanel({ document, host, controller }) {
-	var _state$repository, _state$snapshot, _state$snapshot2, _state$snapshot3, _state$snapshot4, _state$snapshot5;
+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());
@@ -3515,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;
@@ -3565,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;
@@ -3612,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 () => {
@@ -3661,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), {}, {
@@ -3741,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;
@@ -3760,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", {
@@ -3789,7 +3900,10 @@ 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("strong", null, ((_state$snapshot = state.snapshot) === null || _state$snapshot === void 0 ? void 0 : _state$snapshot.branch) || (((_state$snapshot2 = state.snapshot) === null || _state$snapshot2 === void 0 ? void 0 : _state$snapshot2.head) ? labels.detached : labels.unborn)), /* @__PURE__ */ React.createElement("code", null, (_state$snapshot3 = state.snapshot) === null || _state$snapshot3 === void 0 || (_state$snapshot3 = _state$snapshot3.head) === null || _state$snapshot3 === void 0 ? void 0 : _state$snapshot3.slice(0, 12)), /* @__PURE__ */ React.createElement("span", { "data-git-dirty": "" }, dirty ? labels.dirty : labels.saved)), !review && host.connectionSettings && /* @__PURE__ */ React.createElement(ConnectionSettings, {
+	}, 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, {
 		settings: host.connectionSettings,
 		locale,
 		runOperation: host.connectionSettings.getSession ? remoteOperation : void 0,
@@ -3798,7 +3912,7 @@ function GitPanel({ document, host, controller }) {
 			const remote = await state.repository.readOrigin();
 			return epoch.current === ticket ? remote : void 0;
 		} : void 0
-	}), state.error && /* @__PURE__ */ React.createElement("p", {
+	}), state.snapshot && /* @__PURE__ */ React.createElement("details", { className: "twgit-git-details" }, /* @__PURE__ */ React.createElement("summary", null, labels.details), /* @__PURE__ */ React.createElement("div", { className: "twgit-connection-body" }, /* @__PURE__ */ React.createElement("p", null, labels.branch, " · ", /* @__PURE__ */ React.createElement("strong", null, state.snapshot.branch || (state.snapshot.head ? labels.detached : labels.unborn))), /* @__PURE__ */ React.createElement("p", null, labels.head, " · ", /* @__PURE__ */ React.createElement("code", null, (_state$snapshot$head$ = (_state$snapshot$head = state.snapshot.head) === null || _state$snapshot$head === void 0 ? void 0 : _state$snapshot$head.slice(0, 12)) !== null && _state$snapshot$head$ !== void 0 ? _state$snapshot$head$ : "—")), /* @__PURE__ */ React.createElement("p", null, labels.branches, " · ", state.snapshot.branches.join(", ") || "—"), /* @__PURE__ */ React.createElement("p", null, labels.groups, " · ", labels.gitStaged, " = ", labels.staged, " / ", labels.gitUnstaged, " = ", labels.unstaged, " / ", labels.gitUntracked, " = ", labels.untracked), /* @__PURE__ */ React.createElement("p", null, labels.permissions)))), state.error && /* @__PURE__ */ React.createElement("p", {
 		className: "twgit-error",
 		role: "alert"
 	}, state.error), state.notice && /* @__PURE__ */ React.createElement("p", {
@@ -3807,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("/"))
@@ -3828,7 +3943,7 @@ function GitPanel({ document, host, controller }) {
 			disabled: state.busy,
 			"aria-pressed": state.selected === change,
 			onClick: () => openFile(change)
-		}, /* @__PURE__ */ React.createElement("span", null, !change.after ? "D" : !change.before ? "A" : "M"), " ", change.path))))));
+		}, /* @__PURE__ */ React.createElement("small", { className: "twgit-change-kind" }, !change.after ? labels.deleted : !change.before ? labels.added : labels.modified), " ", change.path))))));
 		return projectList ? /* @__PURE__ */ React.createElement(ProjectChangeListView, {
 			changes: projectList,
 			selected: selection ? element : null,
@@ -3840,15 +3955,16 @@ function GitPanel({ document, host, controller }) {
 			fileListOpen,
 			setFileListOpen
 		}) : fileList;
-	})(), !state.changes.length && /* @__PURE__ */ React.createElement("p", null, labels.clean), /* @__PURE__ */ React.createElement("details", null, /* @__PURE__ */ React.createElement("summary", null, labels.branches), /* @__PURE__ */ React.createElement("ul", null, (_state$snapshot4 = state.snapshot) === null || _state$snapshot4 === void 0 ? void 0 : _state$snapshot4.branches.map((branch) => /* @__PURE__ */ React.createElement("li", { key: branch }, branch)))), /* @__PURE__ */ React.createElement("h3", null, labels.history), /* @__PURE__ */ React.createElement("ol", { className: "twgit-history" }, (_state$snapshot5 = state.snapshot) === null || _state$snapshot5 === void 0 ? void 0 : _state$snapshot5.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,
 		onClick: () => void selectCommit(commit.oid)
-	}, commit.message.split("\n")[0]), /* @__PURE__ */ React.createElement("small", null, /* @__PURE__ */ React.createElement("code", null, commit.oid.slice(0, 8)), " · ", commit.author, " · ", (/* @__PURE__ */ new Date(commit.timestamp * 1e3)).toLocaleString(locale)))))), /* @__PURE__ */ React.createElement("main", { className: "twgit-diff" }, selection && projectList ? /* @__PURE__ */ React.createElement(ProjectElementView, {
+	}, commit.message.split("\n")[0]), /* @__PURE__ */ React.createElement("small", null, commit.author, " · ", (/* @__PURE__ */ new Date(commit.timestamp * 1e3)).toLocaleString(locale)))))), /* @__PURE__ */ React.createElement("main", { className: "twgit-diff" }, selection && projectList ? /* @__PURE__ */ React.createElement(ProjectElementView, {
 		changes: projectList,
 		selection,
 		locale,
+		locateBlock: state.commit ? void 0 : locator,
 		renderBlock: host.renderReviewBlock,
 		onSelectFile: openFile
 	}) : state.selected ? /* @__PURE__ */ React.createElement(FileDiffView, {
@@ -3856,9 +3972,34 @@ 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("footer", null, labels.permissions)));
+	}) : /* @__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) {
+	switch (upstream.state) {
+		case "same": return labels.upstreamSame;
+		case "ahead": return `${labels.upstreamAhead} · ${upstream.ahead} ${labels.records}`;
+		case "behind": return `${labels.upstreamBehind} · ${upstream.behind} ${labels.records}`;
+		case "diverged": return `${labels.upstreamDiverged} · +${upstream.ahead} / −${upstream.behind}`;
+		default: return labels.upstreamUnknown;
+	}
 }
 function mountGitPanel({ vm, document, host }) {
 	var _document$defaultView2;
@@ -3871,6 +4012,7 @@ function mountGitPanel({ vm, document, host }) {
 	};
 	controllers.set(vm, controller);
 	render(/* @__PURE__ */ React.createElement(GitPanel, {
+		vm,
 		document,
 		host,
 		controller
@@ -3897,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 };