@kubohiroya/turbowarp-plus-editor-git 0.8.0 → 0.9.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 { n as GitPanelError, r as createReadOnlyFs, t as openRepository } from "./repository-VBp-UNWc.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,7 +2687,7 @@ 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, {
 		viewType: "unified",
@@ -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: "Staged",
+		unstaged: "Unstaged",
+		untracked: "Untracked",
+		commit: "Commit"
+	}
+};
+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: {
@@ -3385,6 +3685,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 +3766,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,
@@ -3503,18 +3821,37 @@ 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("span", null, !change.after ? "D" : !change.before ? "A" : "M"), " ", 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("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", {
 		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, /* @__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, {
+		changes: projectList,
+		selection,
+		locale,
+		renderBlock: host.renderReviewBlock,
+		onSelectFile: openFile
+	}) : state.selected ? /* @__PURE__ */ React.createElement(FileDiffView, {
 		change: state.selected,
 		diff: state.diff,
 		labels,

package/dist/project-assets.d.ts

@@ -15,5 +15,9 @@ export declare function currentCostume(target: ProjectTarget): {
     md5ext: string;
     type: string;
 } | null;
+/** The image type of an asset file name, or `undefined` for sounds and anything that is not an image. */
+export declare function assetImageType(md5ext: string): string | undefined;
+/** Loads one image asset of one version as an object URL, or `null` while it is unavailable or not an image. */
+export declare function useAssetImage(md5ext: string | undefined, version: ProjectVersion, loadAsset?: ProjectAssetLoader): string | null;
 /** Loads the current costume of one version of a target as an object URL for an image, or `null` while it is unavailable. */
 export declare function useCostumeImage(target: ProjectTarget | undefined, version: ProjectVersion, loadAsset?: ProjectAssetLoader): string | null;

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { ChangedFile, ProjectChangeList, ProjectElementChange, ProjectTargetChanges } from './project-change-model.js';
+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';
+declare const en: {
+    title: string;
+    stage: string;
+    code: (count: number) => string;
+    costumes: string;
+    backdrops: string;
+    sounds: string;
+    data: string;
+    settings: string;
+    project: string;
+    other: string;
+    added: string;
+    removed: string;
+    updated: string;
+    files: string;
+    before: string;
+    after: string;
+    absent: string;
+    loading: string;
+    unreadable: string;
+    fileList: string;
+    property: string;
+    format: string;
+    rate: string;
+    samples: string;
+    file: string;
+    noImage: string;
+    groups: Record<ChangeGroup, string>;
+};
+type Labels = typeof en;
+export declare const projectChangeLabels: (locale: string) => Labels;
+export interface ProjectChanges {
+    list: ProjectChangeList;
+    sources: {
+        before: string | null;
+        after: string | null;
+    };
+    loadAsset: ProjectAssetLoader;
+}
+/**
+ * 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.
+ */
+export declare function useProjectChanges(repository: Repository | null, snapshot: Snapshot | null, project: string | null, commit: string | null, changes: readonly FileChange[]): ProjectChanges | 'loading' | 'unreadable' | undefined;
+/** The change list arranged by the project's stage, sprites and elements, with files outside the project after them. */
+export declare function ProjectChangeListView({ changes, selected, locale, busy, onSelect, onSelectFile, fileList, fileListOpen, setFileListOpen }: {
+    changes: ProjectChanges;
+    selected: string | null;
+    locale: string;
+    busy: boolean;
+    onSelect(key: string): void;
+    onSelectFile(file: ChangedFile): void;
+    fileList: React.ReactNode;
+    fileListOpen: boolean;
+    setFileListOpen(open: boolean): void;
+}): React.JSX.Element;
+export declare function findElement(list: ProjectChangeList, key: string | null): {
+    element: ProjectElementChange;
+    target: ProjectTargetChanges;
+} | {
+    element: ProjectElementChange;
+    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 }: {
+    changes: ProjectChanges;
+    selection: {
+        element: ProjectElementChange;
+        target: ProjectTargetChanges | null;
+    };
+    locale: string;
+    renderBlock?: ProjectBlockRenderer;
+    onSelectFile(file: ChangedFile): void;
+}): React.JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+import type { ChangeGroup } from './repository.js';
+import type { ProjectSource, ProjectTarget } from './project-source-patch.js';
+/** One changed file of the repository, with the Git group it was listed under. A path can appear in several groups. */
+export interface ChangedFile {
+    path: string;
+    group: ChangeGroup;
+}
+export type ProjectElementKind = 'code' | 'costumes' | 'sounds' | 'data' | 'settings';
+export type ProjectChangeStatus = 'added' | 'removed' | 'updated';
+/** One row of the project-shaped change list: something a person recognizes in the Editor. */
+export interface ProjectElementChange {
+    /** Stable within one list, for React keys and selection. */
+    key: string;
+    kind: ProjectElementKind;
+    status: ProjectChangeStatus;
+    /** Costume or sound name; absent for code, data and settings rows. */
+    name?: string;
+    /** The costume or sound entry in each version, for costume and sound rows. */
+    before?: Record<string, unknown>;
+    after?: Record<string, unknown>;
+    /** Asset file names (`md5ext`) of each version, for costume and sound rows. */
+    md5ext?: {
+        before?: string;
+        after?: string;
+    };
+    /**
+     * Changed property keys, for data and settings rows (for example `variables`, `x`, `visible`), and for
+     * project-level rows (`monitors`, `extensions`, `meta`).
+     */
+    properties?: string[];
+    /** Number of changed code items (as counted by the review comparison), for code rows. */
+    scripts?: number;
+    /** The changed repository files behind this row, so the details view can show them with their Git groups. */
+    files: ChangedFile[];
+}
+export interface ProjectTargetChanges {
+    key: string;
+    name: string;
+    isStage: boolean;
+    status: ProjectChangeStatus;
+    before?: ProjectTarget;
+    after?: ProjectTarget;
+    /** In the order code, costumes, sounds, data, settings; costumes and sounds in their order in the target. */
+    elements: ProjectElementChange[];
+}
+export interface ProjectChangeList {
+    /** The stage first, then sprites in project order; removed targets after the existing ones. */
+    targets: ProjectTargetChanges[];
+    /** Project-level changes outside the targets (monitors, extensions, meta and other top-level keys). */
+    project: ProjectElementChange[];
+    /** Changed files that belong to no element: sb3-source.json, embedded-extensions.json, unreferenced assets and the rest. */
+    other: ChangedFile[];
+}
+export interface OrganizeProjectChangesInput {
+    /** The project folder relative to the repository root, `''` for the root. */
+    folder: string;
+    /** The project data of each version, `null` where the version has no project file. */
+    before: ProjectSource | null;
+    after: ProjectSource | null;
+    /** The assets directory of each version, relative to the folder (from sb3-source.json; `assets` by default). */
+    assetsDirectory: {
+        before: string;
+        after: string;
+    };
+    /** Every changed file in the folder, from all Git groups. */
+    files: readonly ChangedFile[];
+}
+/** The Japanese or English name of a project or target property key; unknown keys are returned as they are. */
+export declare function projectPropertyLabel(key: string, locale?: string): string;
+/** The asset file name of a costume or sound entry: `md5ext`, or `assetId.dataFormat`; `''` when it has neither. */
+export declare function assetFileName(entry: Record<string, unknown>): string;
+/** Arranges the changed files of one project folder by stage, sprite and element. Pure; reads nothing. */
+export declare function organizeProjectChanges(input: OrganizeProjectChangesInput): ProjectChangeList;

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

@@ -10,6 +10,8 @@ export type { ProjectBlockLocation, ProjectBlockLocator, ScratchBlockLocationWor
 export type { BlockPart } from './project-source-patch.js';
 export { createProjectSourceDiff } from './project-source-patch.js';
 export { currentCostume } from './project-assets.js';
+export { assetFileName, organizeProjectChanges, projectPropertyLabel } from './project-change-model.js';
+export type { ChangedFile, OrganizeProjectChangesInput, ProjectChangeList, ProjectChangeStatus, ProjectElementChange, ProjectElementKind, ProjectTargetChanges } from './project-change-model.js';
 export type { ProjectAssetLoader, ProjectVersion } from './project-assets.js';
 export { createScratchBlocksDiffRenderer } from './scratch-block-diff-renderer.js';
 export type { BlockPreviewView, BlockPreviewViewport, ProjectBlockRenderer, ProjectBlockRendering, ScratchBlockDiffRendererOptions, ScratchBlocksPort } from './scratch-block-diff-renderer.js';

package/dist/project-source-diff.js

@@ -1,4 +1,4 @@
-import { a as gitHubRepositoryFromOrigin, c as BlockPreview, d as currentCostume, f as compareProjectBlocks, i as createGitHubPullRequests, l as createPreviewSync, m as readProjectSourceDiff, n as createScratchBlocksDiffLocator, o as ProjectSourceComparison, p as createProjectSourceDiff, s as ProjectSourceReview, t as createScratchBlocksDiffRenderer, u as usePreviewSync } from "./scratch-block-diff-renderer-xS8OYsRl.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-DZR8ep-T.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
@@ -169,4 +169,4 @@ function ProjectSourceBlockDiff({ patch, beforeSource, renderBlock, locateBlock,
 		})
 	}, labels.more));
 }
-export { ProjectSourceBlockDiff, ProjectSourceComparison, ProjectSourceReview, createGitHubPullRequests, createPreviewSync, createProjectSourceDiff, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, currentCostume, gitHubRepositoryFromOrigin };
+export { ProjectSourceBlockDiff, ProjectSourceComparison, ProjectSourceReview, assetFileName, createGitHubPullRequests, createPreviewSync, createProjectSourceDiff, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, currentCostume, gitHubRepositoryFromOrigin, organizeProjectChanges, projectPropertyLabel };

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

@@ -32,7 +32,12 @@ 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;
+    /** Shows only the code of this stage or sprite, without the overview and the changes outside the code. */
+    target?: {
+        isStage: boolean;
+        name: string;
+    };
 }
 /** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
-export declare function ProjectSourceComparison({ before, after, renderBlock, locale, fallback, loadAsset }: ProjectSourceComparisonProps): React.JSX.Element;
+export declare function ProjectSourceComparison({ before, after, renderBlock, locale, fallback, loadAsset, target }: ProjectSourceComparisonProps): React.JSX.Element;
 export declare function ProjectSourceReview({ title, description, verification, files, renderBlock, locale }: ProjectSourceReviewProps): React.JSX.Element;