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

package/dist/index.js

@@ -1,6 +1,6 @@
-import { a as gitHubRepositoryFromOrigin, i as createGitHubPullRequests, o as ProjectSourceComparison, r as PullRequestError, s as ProjectSourceReview, t as createScratchBlocksDiffRenderer } from "./scratch-block-diff-renderer-xS8OYsRl.js";
+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 { 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-BQkADJmK.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";
@@ -2669,12 +2669,12 @@ diffMatchPatch.DIFF_EQUAL;
 diffMatchPatch.DIFF_DELETE;
 diffMatchPatch.DIFF_INSERT;
 // src/file-diff-view.tsx
-var en$2 = {
+var en$3 = {
 	view: "Show changes as",
 	blocks: "Blocks",
 	text: "Text"
 };
-var ja$2 = {
+var ja$3 = {
 	view: "変更の表示",
 	blocks: "ブロック",
 	text: "テキスト"
@@ -2687,9 +2687,9 @@ var isProjectSource = (path) => path.split("/").pop() === "project.source.json";
 function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset }) {
 	var _change$oldMode, _change$newMode;
 	const [view, setView] = useState("blocks");
-	const names = locale.startsWith("ja") ? ja$2 : en$2;
+	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
@@ -2717,6 +2717,306 @@ function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset })
 		after: change.after === null ? null : sources.after
 	}) : text);
 }
+// src/project-change-list.tsx
+var en$2 = {
+	title: "Changes by project element",
+	stage: "Stage",
+	code: (count) => `Code · ${count} ${count === 1 ? "change" : "changes"}`,
+	costumes: "Costume",
+	backdrops: "Backdrop",
+	sounds: "Sound",
+	data: "Variables and messages",
+	settings: "Other settings",
+	project: "Whole project",
+	other: "Files outside the project",
+	added: "Added",
+	removed: "Removed",
+	updated: "Changed",
+	files: "Files and Git groups",
+	before: "Before",
+	after: "After",
+	absent: "Not in this version",
+	loading: "Reading the project changes…",
+	unreadable: "The project data could not be read, so the changes are listed by file.",
+	fileList: "List by file",
+	property: "Item",
+	format: "Format",
+	rate: "Sample rate",
+	samples: "Samples",
+	file: "File name",
+	noImage: "No image",
+	groups: {
+		staged: "in the next record",
+		unstaged: "not yet recorded",
+		untracked: "new file",
+		commit: "in this record"
+	}
+};
+var ja$2 = {
+	title: "作品の要素ごとの変更",
+	stage: "ステージ",
+	code: (count) => `コード · ${count} か所`,
+	costumes: "コスチューム",
+	backdrops: "背景",
+	sounds: "音",
+	data: "変数・リスト・メッセージ",
+	settings: "そのほかの設定",
+	project: "作品全体",
+	other: "作品に属さないファイル",
+	added: "追加",
+	removed: "削除",
+	updated: "変更",
+	files: "ファイルと Git の区分",
+	before: "変更前",
+	after: "変更後",
+	absent: "この版にはありません",
+	loading: "作品の変更を読み込み中…",
+	unreadable: "作品データを読み込めないため、ファイル単位で一覧にします。",
+	fileList: "ファイル単位の一覧",
+	property: "項目",
+	format: "形式",
+	rate: "サンプリング周波数",
+	samples: "サンプル数",
+	file: "ファイル名",
+	noImage: "画像なし",
+	groups: {
+		staged: "次の記録に入る",
+		unstaged: "まだ記録していない",
+		untracked: "新しいファイル",
+		commit: "この記録"
+	}
+};
+var projectChangeLabels = (locale) => locale.startsWith("ja") ? ja$2 : en$2;
+/**
+* Reads the selected project folder in the last commit and the working tree (or a commit and its parent) and arranges
+* the changed files by stage, sprite and element. `undefined` while there is no project; `'loading'` and `'unreadable'`
+* tell the panel to keep the list by file.
+*/
+function useProjectChanges(repository, snapshot, project, commit, changes) {
+	const [result, setResult] = useState();
+	const active = !!repository && !!snapshot && project !== null && changes.length > 0;
+	useEffect(() => {
+		if (!repository || !snapshot || project === null || !changes.length) return;
+		let current = true;
+		const comparison = commit ? {
+			kind: "commit",
+			commit
+		} : { kind: "worktree" };
+		repository.readProject(snapshot, project, comparison).then((read) => {
+			if (!current) return;
+			let list;
+			try {
+				list = organizeProjectChanges({
+					folder: project,
+					before: read.before === null ? null : parseProjectSource(read.before),
+					after: read.after === null ? null : parseProjectSource(read.after),
+					assetsDirectory: read.assetsDirectory,
+					files: changes.map(({ path, group }) => ({
+						path,
+						group
+					}))
+				});
+			} catch (_unused) {
+				setResult({
+					changes,
+					value: "unreadable"
+				});
+				return;
+			}
+			setResult({
+				changes,
+				value: {
+					list,
+					sources: {
+						before: read.before,
+						after: read.after
+					},
+					loadAsset: repository.projectAssetLoader(snapshot, project, comparison)
+				}
+			});
+		}, () => {
+			if (current) setResult({
+				changes,
+				value: "unreadable"
+			});
+		});
+		return () => {
+			current = false;
+		};
+	}, [
+		repository,
+		snapshot,
+		project,
+		commit,
+		changes
+	]);
+	if (!active) return void 0;
+	if ((result === null || result === void 0 ? void 0 : result.changes) === changes || result && typeof result.value === "object") return result.value;
+	return "loading";
+}
+function TargetHeading({ target, labels, loadAsset }) {
+	const version = target.after ? "after" : "before";
+	const image = useCostumeImage(target[version], version, loadAsset);
+	return /* @__PURE__ */ React.createElement("h4", { className: "twgit-element-target" }, image ? /* @__PURE__ */ React.createElement("img", {
+		src: image,
+		alt: ""
+	}) : /* @__PURE__ */ React.createElement("span", { className: "twgit-element-thumbnail" }), /* @__PURE__ */ React.createElement("span", null, target.isStage ? labels.stage : target.name), target.status !== "updated" && /* @__PURE__ */ React.createElement("small", { className: "twgit-review-status" }, labels[target.status]));
+}
+function elementTitle(element, target, labels, locale) {
+	switch (element.kind) {
+		case "code":
+			var _element$scripts;
+			return labels.code((_element$scripts = element.scripts) !== null && _element$scripts !== void 0 ? _element$scripts : 0);
+		case "costumes":
+			var _element$name;
+			return `${(target === null || target === void 0 ? void 0 : target.isStage) ? labels.backdrops : labels.costumes} · ${(_element$name = element.name) !== null && _element$name !== void 0 ? _element$name : ""}`;
+		case "sounds":
+			var _element$name2;
+			return `${labels.sounds} · ${(_element$name2 = element.name) !== null && _element$name2 !== void 0 ? _element$name2 : ""}`;
+		default: {
+			var _element$properties;
+			const names = ((_element$properties = element.properties) !== null && _element$properties !== void 0 ? _element$properties : []).map((key) => projectPropertyLabel(key, locale)).join("・");
+			return target ? `${element.kind === "data" ? labels.data : labels.settings} · ${names}` : names;
+		}
+	}
+}
+function ElementRow({ element, target, labels, locale, loadAsset, selected, busy, onSelect }) {
+	var _element$md5ext, _element$md5ext2;
+	const version = ((_element$md5ext = element.md5ext) === null || _element$md5ext === void 0 ? void 0 : _element$md5ext.after) ? "after" : "before";
+	const image = useAssetImage(element.kind === "costumes" ? (_element$md5ext2 = element.md5ext) === null || _element$md5ext2 === void 0 ? void 0 : _element$md5ext2[version] : void 0, version, loadAsset);
+	return /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("button", {
+		className: "twgit-file twgit-element",
+		"data-git-element": element.kind,
+		disabled: busy,
+		"aria-pressed": selected,
+		onClick: onSelect
+	}, element.kind === "costumes" && (image ? /* @__PURE__ */ React.createElement("img", {
+		src: image,
+		alt: ""
+	}) : /* @__PURE__ */ React.createElement("span", { className: "twgit-element-thumbnail" })), /* @__PURE__ */ React.createElement("span", { className: "twgit-element-name" }, elementTitle(element, target, labels, locale)), element.status !== "updated" && /* @__PURE__ */ React.createElement("small", { className: "twgit-review-status" }, labels[element.status])));
+}
+/** The change list arranged by the project's stage, sprites and elements, with files outside the project after them. */
+function ProjectChangeListView({ changes, selected, locale, busy, onSelect, onSelectFile, fileList, fileListOpen, setFileListOpen }) {
+	const labels = projectChangeLabels(locale);
+	const { list, loadAsset } = changes;
+	return /* @__PURE__ */ React.createElement("section", {
+		className: "twgit-element-list",
+		"aria-label": labels.title
+	}, list.targets.map((target) => /* @__PURE__ */ React.createElement("section", { key: target.key }, /* @__PURE__ */ React.createElement(TargetHeading, {
+		target,
+		labels,
+		loadAsset
+	}), /* @__PURE__ */ React.createElement("ul", null, target.elements.map((element) => /* @__PURE__ */ React.createElement(ElementRow, {
+		key: element.key,
+		element,
+		target,
+		labels,
+		locale,
+		loadAsset,
+		selected: selected === element.key,
+		busy,
+		onSelect: () => onSelect(element.key)
+	}))))), list.project.length > 0 && /* @__PURE__ */ React.createElement("section", null, /* @__PURE__ */ React.createElement("h4", { className: "twgit-element-target" }, /* @__PURE__ */ React.createElement("span", null, labels.project)), /* @__PURE__ */ React.createElement("ul", null, list.project.map((element) => /* @__PURE__ */ React.createElement(ElementRow, {
+		key: element.key,
+		element,
+		target: null,
+		labels,
+		locale,
+		loadAsset,
+		selected: selected === element.key,
+		busy,
+		onSelect: () => onSelect(element.key)
+	})))), list.other.length > 0 && /* @__PURE__ */ React.createElement("section", null, /* @__PURE__ */ React.createElement("h4", { className: "twgit-element-target" }, /* @__PURE__ */ React.createElement("span", null, labels.other)), /* @__PURE__ */ React.createElement("ul", null, list.other.map((file) => /* @__PURE__ */ React.createElement("li", { key: file.group + ":" + file.path }, /* @__PURE__ */ React.createElement("button", {
+		className: "twgit-file",
+		"data-git-other": file.group,
+		disabled: busy,
+		onClick: () => onSelectFile(file)
+	}, file.path, " ", /* @__PURE__ */ React.createElement("small", null, labels.groups[file.group])))))), /* @__PURE__ */ React.createElement("details", {
+		className: "twgit-file-list",
+		open: fileListOpen,
+		onToggle: (event) => setFileListOpen(event.currentTarget.open)
+	}, /* @__PURE__ */ React.createElement("summary", null, labels.fileList), fileList));
+}
+function findElement(list, key) {
+	if (key === null) return null;
+	for (const target of list.targets) {
+		const element = target.elements.find((item) => item.key === key);
+		if (element) return {
+			element,
+			target
+		};
+	}
+	const element = list.project.find((item) => item.key === key);
+	return element ? {
+		element,
+		target: null
+	} : null;
+}
+function Picture({ md5ext, version, loadAsset, labels, title }) {
+	const image = useAssetImage(md5ext, version, loadAsset);
+	return /* @__PURE__ */ React.createElement("figure", { className: "twgit-element-picture" }, /* @__PURE__ */ React.createElement("figcaption", null, title), !md5ext ? /* @__PURE__ */ React.createElement("p", null, labels.absent) : image ? /* @__PURE__ */ React.createElement("img", {
+		src: image,
+		alt: title
+	}) : /* @__PURE__ */ React.createElement("p", null, labels.noImage));
+}
+var show = (value) => {
+	if (value === void 0) return "—";
+	const text = typeof value === "string" ? value : JSON.stringify(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 }) {
+	var _element$properties2;
+	const labels = projectChangeLabels(locale);
+	const { element, target } = selection;
+	const record = (version) => {
+		if (element.kind === "costumes" || element.kind === "sounds") return element[version];
+		if (!target) {
+			const source = changes.sources[version];
+			try {
+				return source === null ? void 0 : parseProjectSource(source);
+			} catch (_unused2) {
+				return;
+			}
+		}
+		return target[version];
+	};
+	const rows = element.kind === "sounds" ? [
+		["name", "name"],
+		["dataFormat", labels.format],
+		["rate", labels.rate],
+		["sampleCount", labels.samples],
+		["md5ext", labels.file]
+	] : ((_element$properties2 = element.properties) !== null && _element$properties2 !== void 0 ? _element$properties2 : []).map((key) => [key, projectPropertyLabel(key, locale)]);
+	return /* @__PURE__ */ React.createElement("section", {
+		className: "twgit-element-view",
+		"aria-label": elementTitle(element, target, labels, locale)
+	}, /* @__PURE__ */ React.createElement("h3", null, target && /* @__PURE__ */ React.createElement("span", null, target.isStage ? labels.stage : target.name, " · "), elementTitle(element, target, labels, locale)), element.kind === "code" && target && renderBlock && /* @__PURE__ */ React.createElement(ProjectSourceComparison, {
+		before: changes.sources.before,
+		after: changes.sources.after,
+		renderBlock,
+		locale,
+		loadAsset: changes.loadAsset,
+		target: {
+			isStage: target.isStage,
+			name: target.name
+		}
+	}), 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, {
+			key: version,
+			md5ext: (_element$md5ext3 = element.md5ext) === null || _element$md5ext3 === void 0 ? void 0 : _element$md5ext3[version],
+			version,
+			loadAsset: changes.loadAsset,
+			labels,
+			title: ((_element$version = element[version]) === null || _element$version === void 0 ? void 0 : _element$version.name) === void 0 ? labels[version] : `${labels[version]} · ${String(element[version].name)}`
+		});
+	})), element.kind !== "code" && element.kind !== "costumes" && /* @__PURE__ */ React.createElement("table", { className: "twgit-element-values" }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", null, labels.property), /* @__PURE__ */ React.createElement("th", null, labels.before), /* @__PURE__ */ React.createElement("th", null, labels.after))), /* @__PURE__ */ React.createElement("tbody", null, rows.map(([key, name]) => /* @__PURE__ */ React.createElement("tr", { key }, /* @__PURE__ */ React.createElement("th", { scope: "row" }, name), /* @__PURE__ */ React.createElement("td", null, record("before") ? show(record("before")[key]) : labels.absent), /* @__PURE__ */ React.createElement("td", null, record("after") ? show(record("after")[key]) : labels.absent))))), /* @__PURE__ */ React.createElement("details", { className: "twgit-element-files" }, /* @__PURE__ */ React.createElement("summary", null, labels.files), /* @__PURE__ */ React.createElement("ul", null, element.files.map((file) => /* @__PURE__ */ React.createElement("li", { key: file.group + ":" + file.path }, /* @__PURE__ */ React.createElement("button", {
+		className: "twgit-file",
+		type: "button",
+		onClick: () => onSelectFile(file)
+	}, file.path, " ", /* @__PURE__ */ React.createElement("small", null, labels.groups[file.group])))))));
+}
 // src/messages.ts
 var messages = {
 	en: {
@@ -2739,15 +3039,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",
@@ -2761,16 +3061,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: {
@@ -2790,18 +3107,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: "バイナリアセット",
@@ -2815,16 +3132,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: "リポジトリを読み込めませんでした。フォルダへのアクセスを確認し、再取得してください。"
 	}
 };
@@ -2851,10 +3185,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 接続",
@@ -2877,10 +3211,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;
@@ -2916,7 +3250,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) => {
@@ -2950,18 +3293,10 @@ 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
 var en = {
@@ -3156,7 +3491,7 @@ 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;
+	var _state$repository, _state$snapshot$head$, _state$snapshot$head, _state$snapshot;
 	const [visible, setVisible] = useState(false);
 	const [review, setReview] = useState(false);
 	const [locale, setLocale] = useState(document.documentElement.lang || "en");
@@ -3385,6 +3720,22 @@ function GitPanel({ document, host, controller }) {
 		selected,
 		diff: await state.repository.readDiff(state.snapshot, selected)
 	}));
+	const [element, setElement] = useState(null);
+	const [fileListOpen, setFileListOpen] = useState(false);
+	const projectChanges = useProjectChanges(state.repository, state.snapshot, state.project, state.commit, state.changes);
+	const openFile = (file) => {
+		const change = state.changes.find((item) => item.path === file.path && item.group === file.group);
+		if (!change) return;
+		setElement(null);
+		selectFile(change);
+	};
+	const openElement = (key) => {
+		setElement(key);
+		setState((previous) => _objectSpread2$1(_objectSpread2$1({}, previous), {}, {
+			selected: null,
+			diff: null
+		}));
+	};
 	const selectCommit = (commit) => run(async () => ({
 		commit,
 		changes: await state.repository.historyChanges(state.snapshot, commit),
@@ -3450,6 +3801,8 @@ function GitPanel({ document, host, controller }) {
 		"unstaged",
 		"untracked"
 	];
+	const projectList = typeof projectChanges === "object" ? projectChanges : null;
+	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,
@@ -3471,7 +3824,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: () => 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", {
+		"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,
@@ -3480,7 +3836,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", {
@@ -3503,25 +3859,54 @@ function GitPanel({ document, host, controller }) {
 	}, name, "/"))))), /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement("button", {
 		disabled: state.busy,
 		onClick: () => void controller.refresh()
-	}, labels.worktree)), groups.map((group) => /* @__PURE__ */ React.createElement("section", { key: group }, /* @__PURE__ */ React.createElement("h3", null, labels[group], " · ", state.changes.filter((change) => change.group === group).length), /* @__PURE__ */ React.createElement("ul", null, state.changes.filter((change) => change.group === group).map((change) => /* @__PURE__ */ React.createElement("li", { key: change.path }, /* @__PURE__ */ React.createElement("button", {
-		className: "twgit-file",
-		"data-git-group": group,
-		disabled: state.busy,
-		"aria-pressed": state.selected === change,
-		onClick: () => void selectFile(change)
-	}, /* @__PURE__ */ React.createElement("span", null, !change.after ? "D" : !change.before ? "A" : "M"), " ", change.path)))))), !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", {
+	}, labels.worktree)), projectChanges === "loading" && /* @__PURE__ */ React.createElement("p", { role: "status" }, projectChangeLabels(locale).loading), projectChanges === "unreadable" && /* @__PURE__ */ React.createElement("p", null, projectChangeLabels(locale).unreadable), (() => {
+		const fileList = groups.map((group) => /* @__PURE__ */ React.createElement("section", { key: group }, /* @__PURE__ */ React.createElement("h3", null, labels[group], " · ", state.changes.filter((change) => change.group === group).length), /* @__PURE__ */ React.createElement("ul", null, state.changes.filter((change) => change.group === group).map((change) => /* @__PURE__ */ React.createElement("li", { key: change.path }, /* @__PURE__ */ React.createElement("button", {
+			className: "twgit-file",
+			"data-git-group": group,
+			disabled: state.busy,
+			"aria-pressed": state.selected === change,
+			onClick: () => openFile(change)
+		}, /* @__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,
+			locale,
+			busy: state.busy,
+			onSelect: openElement,
+			onSelectFile: openFile,
+			fileList,
+			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", {
 		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" }, state.selected ? /* @__PURE__ */ React.createElement(FileDiffView, {
+	}, 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,
+		renderBlock: host.renderReviewBlock,
+		onSelectFile: openFile
+	}) : state.selected ? /* @__PURE__ */ React.createElement(FileDiffView, {
 		change: state.selected,
 		diff: state.diff,
 		labels,
 		locale,
 		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)))));
+}
+/** 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;