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

package/dist/{repository-BQkADJmK.js → repository-VBp-UNWc.js}

@@ -16795,6 +16795,7 @@ async function runRemoteOperation(root, operation, getSession, guard, signal) {
 }
 // src/repository.ts
 init_objectSpread2();
+var projectSourceLimit = 16777216;
 var emptyTree = "4b825dc642cb6eb9a060e54bf8d69288fbee4904";
 var textLimit = 1048576;
 var inScope = (path, scope) => !scope || path === scope || path.startsWith(scope + "/");
@@ -17170,13 +17171,31 @@ async function openRepository(root) {
 		}));
 		return blob.byteLength <= limit ? blob : null;
 	};
-	const readAsset = async (snapshot, change, version, md5ext, signal) => {
+	const comparisonSource = async (snapshot, comparison, version) => {
+		if (comparison.kind === "worktree") return version === "after" ? { kind: "worktree" } : snapshot.head ? {
+			kind: "tree",
+			ref: snapshot.head
+		} : null;
+		if (version === "after") return {
+			kind: "tree",
+			ref: comparison.commit
+		};
+		const parent = (await readCommit(_objectSpread2(_objectSpread2({}, options), {}, {
+			cache,
+			oid: comparison.commit
+		}))).commit.parent[0];
+		return parent ? {
+			kind: "tree",
+			ref: parent
+		} : null;
+	};
+	const readAsset = (snapshot, change, version, md5ext, signal) => readFolderAsset(snapshot, pathParts(change.path).slice(0, -1), () => sourceOf(snapshot, change, version), md5ext, signal);
+	const readFolderAsset = async (snapshot, folder, resolve, md5ext, signal) => {
 		if (signal.aborted) return null;
 		fs.clearReads();
 		await assertSnapshot(snapshot);
-		const source = await sourceOf(snapshot, change, version);
+		const source = await resolve();
 		if (!source) return null;
-		const folder = pathParts(change.path).slice(0, -1);
 		const settings = await readVersion(source, [...folder, "sb3-source.json"].join("/"), folderSettingsLimit);
 		const directory = assetsDirectoryParts(settings && new TextDecoder().decode(settings));
 		if (!directory || signal.aborted) return null;
@@ -17188,6 +17207,43 @@ async function openRepository(root) {
 		await fs.checkReads();
 		return bytes && !signal.aborted ? new Blob([bytes]) : null;
 	};
+	/** Reads the project file and the assets directory of both versions of a project folder. */
+	const readProject = async (snapshot, folder, comparison) => {
+		fs.clearReads();
+		await assertSnapshot(snapshot);
+		const parts = pathParts(folder);
+		const read = async (version) => {
+			const source = await comparisonSource(snapshot, comparison, version);
+			if (!source) return {
+				source: null,
+				assetsDirectory: "assets"
+			};
+			const bytes = await readVersion(source, [...parts, "project.source.json"].join("/"), projectSourceLimit);
+			const settings = await readVersion(source, [...parts, "sb3-source.json"].join("/"), folderSettingsLimit);
+			const directory = assetsDirectoryParts(settings && new TextDecoder().decode(settings));
+			let text = null;
+			if (bytes) try {
+				text = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+			} catch (_unused4) {
+				throw new GitPanelError("unsupported");
+			}
+			return {
+				source: text,
+				assetsDirectory: directory ? directory.join("/") : "assets"
+			};
+		};
+		const before = await read("before"), after = await read("after");
+		await assertSnapshot(snapshot);
+		await fs.checkReads();
+		return {
+			before: before.source,
+			after: after.source,
+			assetsDirectory: {
+				before: before.assetsDirectory,
+				after: after.assetsDirectory
+			}
+		};
+	};
 	const directoryAt = async (path) => {
 		let directory = root;
 		for (const part of pathParts(path)) directory = await directory.getDirectoryHandle(part);
@@ -17274,7 +17330,14 @@ async function openRepository(root) {
 		* commit changes the first parent with the commit. Each version's sb3-source.json names its assets directory.
 		* Reads never write, and resolve `null` for anything missing, invalid, larger than 10 MiB or changed since the snapshot.
 		*/
-		assetLoader: (snapshot, change) => ({ version, md5ext, signal }) => !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) : serial(() => readAsset(snapshot, change, version, md5ext, signal)).catch(() => null)
+		assetLoader: (snapshot, change) => ({ version, md5ext, signal }) => !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) : serial(() => readAsset(snapshot, change, version, md5ext, signal)).catch(() => null),
+		/**
+		* Reads the project file of a folder in both versions of a comparison, with each version's assets directory.
+		* `null` stands for a version without the file. Throws `changed` when the repository changed since the snapshot.
+		*/
+		readProject: (snapshot, folder, comparison) => serial(() => readProject(snapshot, folder, comparison)),
+		/** Reads the assets of a folder in both versions of a comparison, like `assetLoader`. */
+		projectAssetLoader: (snapshot, folder, comparison) => ({ version, md5ext, signal }) => !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) : serial(() => readFolderAsset(snapshot, pathParts(folder), () => comparisonSource(snapshot, comparison, version), md5ext, signal)).catch(() => null)
 	};
 }
 export { GitPanelError as n, createReadOnlyFs as r, openRepository as t };

package/dist/repository.d.ts

@@ -19,6 +19,16 @@ export interface Commit {
     author: string;
     timestamp: number;
 }
+/**
+ * Two versions of a project folder as a person sees them: the last commit and the working tree, so changes split
+ * across the index and the working tree read as one; or one commit and its first parent.
+ */
+export type ProjectComparison = {
+    kind: 'worktree';
+} | {
+    kind: 'commit';
+    commit: string;
+};
 type Metadata = Map<string, Uint8Array | null>;
 export interface Snapshot {
     branch: string | undefined;
@@ -67,5 +77,19 @@ export declare function openRepository(root: FileSystemDirectoryHandle): Promise
      * Reads never write, and resolve `null` for anything missing, invalid, larger than 10 MiB or changed since the snapshot.
      */
     assetLoader: (snapshot: Snapshot, change: FileChange) => ProjectAssetLoader;
+    /**
+     * Reads the project file of a folder in both versions of a comparison, with each version's assets directory.
+     * `null` stands for a version without the file. Throws `changed` when the repository changed since the snapshot.
+     */
+    readProject: (snapshot: Snapshot, folder: string, comparison: ProjectComparison) => Promise<{
+        before: string | null;
+        after: string | null;
+        assetsDirectory: {
+            before: string;
+            after: string;
+        };
+    }>;
+    /** Reads the assets of a folder in both versions of a comparison, like `assetLoader`. */
+    projectAssetLoader: (snapshot: Snapshot, folder: string, comparison: ProjectComparison) => ProjectAssetLoader;
 }>;
 export type Repository = Awaited<ReturnType<typeof openRepository>>;

package/dist/repository.js

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

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

@@ -694,18 +694,23 @@ function readAsset(loadAsset, version, md5ext) {
 	}
 	return read;
 }
-/** Loads the current costume of one version of a target as an object URL for an image, or `null` while it is unavailable. */
-function useCostumeImage(target, version, loadAsset) {
-	const costume = target && loadAsset ? currentCostume(target) : null;
-	const key = costume ? version + ":" + costume.md5ext : "";
+/** The image type of an asset file name, or `undefined` for sounds and anything that is not an image. */
+function assetImageType(md5ext) {
+	const match = /^[0-9A-Za-z_-]{1,128}\.([0-9A-Za-z]{1,8})$/.exec(md5ext);
+	return match ? imageTypes[match[1].toLowerCase()] : void 0;
+}
+/** Loads one image asset of one version as an object URL, or `null` while it is unavailable or not an image. */
+function useAssetImage(md5ext, version, loadAsset) {
+	const type = md5ext ? assetImageType(md5ext) : void 0;
+	const key = md5ext && type && loadAsset ? version + ":" + md5ext : "";
 	const [image, setImage] = useState();
 	useEffect(() => {
-		if (!costume || !loadAsset) return;
+		if (!key || !loadAsset) return;
 		let active = true;
 		let url;
-		readAsset(loadAsset, version, costume.md5ext).then((blob) => {
+		readAsset(loadAsset, version, md5ext).then((blob) => {
 			if (!blob || !active) return;
-			url = URL.createObjectURL(new Blob([blob], { type: costume.type }));
+			url = URL.createObjectURL(new Blob([blob], { type }));
 			setImage({
 				key,
 				url
@@ -718,6 +723,11 @@ function useCostumeImage(target, version, loadAsset) {
 	}, [key, loadAsset]);
 	return (image === null || image === void 0 ? void 0 : image.key) === key ? image.url : null;
 }
+/** Loads the current costume of one version of a target as an object URL for an image, or `null` while it is unavailable. */
+function useCostumeImage(target, version, loadAsset) {
+	const costume = target && loadAsset ? currentCostume(target) : null;
+	return useAssetImage(costume === null || costume === void 0 ? void 0 : costume.md5ext, version, loadAsset);
+}
 // src/block-diff-preview.tsx
 init_objectSpread2();
 function createPreviewSync() {
@@ -968,6 +978,7 @@ function compareProjectForReview(before, after) {
 	};
 }
 // src/project-source-review.tsx
+init_objectSpread2();
 var ja = {
 	review: "変更レビュー",
 	fullDescription: "PR 本文を表示",
@@ -1149,15 +1160,26 @@ function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, review
 }
 var countScripts = (comparison) => comparison.targets.reduce((count, target) => count + target.scripts.length, 0);
 /** Compares two versions of a project.source.json by stage, sprite and code, as the pull request review does. */
-function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback, loadAsset }) {
+function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback, loadAsset, target }) {
 	const labels = locale.startsWith("ja") ? ja : en;
+	const only = target && JSON.stringify([target.isStage, target.isStage || target.name]);
 	const comparison = useMemo(() => {
+		let result;
 		try {
-			return compareProjectForReview(parseProjectSource(before), parseProjectSource(after));
+			result = compareProjectForReview(parseProjectSource(before), parseProjectSource(after));
 		} catch (_unused) {
 			return null;
 		}
-	}, [before, after]);
+		if (!only) return result;
+		return {
+			properties: [],
+			targets: result.targets.filter((item) => JSON.stringify([item.isStage, item.isStage || item.name]) === only).map((item) => _objectSpread2(_objectSpread2({}, item), {}, { properties: [] }))
+		};
+	}, [
+		before,
+		after,
+		only
+	]);
 	if (!comparison) return fallback === void 0 ? /* @__PURE__ */ React.createElement("p", { role: "alert" }, labels.invalid) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", {
 		role: "alert",
 		className: "twgit-review-unreadable"
@@ -1165,7 +1187,7 @@ function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fa
 	return /* @__PURE__ */ React.createElement("section", {
 		className: "twgit-block-diff twgit-review twgit-review-comparison",
 		"aria-label": labels.comparison
-	}, /* @__PURE__ */ React.createElement("header", { className: "twgit-review-overview" }, /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.targets), /* @__PURE__ */ React.createElement("dd", null, comparison.targets.length)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.scripts), /* @__PURE__ */ React.createElement("dd", null, countScripts(comparison))))), /* @__PURE__ */ React.createElement(ComparisonTargets, {
+	}, !only && /* @__PURE__ */ React.createElement("header", { className: "twgit-review-overview" }, /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.targets), /* @__PURE__ */ React.createElement("dd", null, comparison.targets.length)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.scripts), /* @__PURE__ */ React.createElement("dd", null, countScripts(comparison))))), /* @__PURE__ */ React.createElement(ComparisonTargets, {
 		comparison,
 		labels,
 		renderBlock,
@@ -1229,6 +1251,236 @@ function ProjectSourceReview({ title, description, verification, files, renderBl
 		}
 	}))));
 }
+// src/project-change-model.ts
+init_objectSpread2();
+var targetDataKeys = [
+	"variables",
+	"lists",
+	"broadcasts"
+];
+var nonSettingKeys = /* @__PURE__ */ new Set([
+	"blocks",
+	"costumes",
+	"sounds",
+	...targetDataKeys
+]);
+var propertyLabels = /* @__PURE__ */ new Map([
+	["variables", ["変数", "Variables"]],
+	["lists", ["リスト", "Lists"]],
+	["broadcasts", ["メッセージ", "Broadcast messages"]],
+	["costumes", ["コスチューム・背景", "Costumes and backdrops"]],
+	["sounds", ["音", "Sounds"]],
+	["blocks", ["コード", "Code"]],
+	["x", ["X 座標", "X position"]],
+	["y", ["Y 座標", "Y position"]],
+	["size", ["大きさ", "Size"]],
+	["direction", ["向き", "Direction"]],
+	["visible", ["表示状態", "Visibility"]],
+	["currentCostume", ["表示するコスチューム", "Selected costume"]],
+	["layerOrder", ["重なり順", "Layer order"]],
+	["volume", ["音量", "Volume"]],
+	["comments", ["コメント", "Comments"]],
+	["draggable", ["ドラッグ可否", "Draggable"]],
+	["rotationStyle", ["回転方法", "Rotation style"]],
+	["tempo", ["テンポ", "Tempo"]],
+	["videoTransparency", ["ビデオの透明度", "Video transparency"]],
+	["videoState", ["ビデオの状態", "Video state"]],
+	["textToSpeechLanguage", ["音声合成の言語", "Text to speech language"]],
+	["monitors", ["モニター", "Monitors"]],
+	["extensions", ["拡張機能", "Extensions"]],
+	["meta", ["作品の情報", "Project metadata"]]
+]);
+/** The Japanese or English name of a project or target property key; unknown keys are returned as they are. */
+function projectPropertyLabel(key, locale = "en") {
+	var _propertyLabels$get, _propertyLabels$get2;
+	return (_propertyLabels$get = (_propertyLabels$get2 = propertyLabels.get(key)) === null || _propertyLabels$get2 === void 0 ? void 0 : _propertyLabels$get2[locale.startsWith("ja") ? 0 : 1]) !== null && _propertyLabels$get !== void 0 ? _propertyLabels$get : key;
+}
+/** The asset file name of a costume or sound entry: `md5ext`, or `assetId.dataFormat`; `''` when it has neither. */
+function assetFileName(entry) {
+	if (typeof entry.md5ext === "string") return entry.md5ext;
+	return typeof entry.assetId === "string" && typeof entry.dataFormat === "string" ? entry.assetId + "." + entry.dataFormat : "";
+}
+function joinPath(...parts) {
+	return parts.flatMap((part) => part.split("/")).filter((part) => part !== "" && part !== ".").join("/");
+}
+function statusOf(before, after) {
+	return before === void 0 ? "added" : after === void 0 ? "removed" : "updated";
+}
+function entriesOf(target, kind) {
+	const list = target === null || target === void 0 ? void 0 : target[kind];
+	return Array.isArray(list) ? list.filter(isRecord) : [];
+}
+function nameOf(entry) {
+	return typeof entry.name === "string" ? entry.name : "";
+}
+/** Pairs the entries of two versions by name (repeated names pair in order): after's order first, then removed ones. */
+function pairEntries(before, after) {
+	var _remaining$get;
+	const remaining = /* @__PURE__ */ new Map();
+	for (const entry of before) {
+		const queue = remaining.get(nameOf(entry));
+		if (queue) queue.push(entry);
+		else remaining.set(nameOf(entry), [entry]);
+	}
+	const pairs = [];
+	for (const entry of after) pairs.push({
+		name: nameOf(entry),
+		before: (_remaining$get = remaining.get(nameOf(entry))) === null || _remaining$get === void 0 ? void 0 : _remaining$get.shift(),
+		after: entry
+	});
+	for (const entry of before) {
+		const queue = remaining.get(nameOf(entry));
+		if ((queue === null || queue === void 0 ? void 0 : queue[0]) === entry) pairs.push({
+			name: nameOf(entry),
+			before: queue.shift()
+		});
+	}
+	return pairs;
+}
+function changedKeys(before, after, skip) {
+	return [.../* @__PURE__ */ new Set([...Object.keys(after), ...Object.keys(before)])].filter((key) => !skip(key) && !equal(before[key], after[key]));
+}
+/** Arranges the changed files of one project folder by stage, sprite and element. Pure; reads nothing. */
+function organizeProjectChanges(input) {
+	const { folder, files, assetsDirectory } = input;
+	const normalize = (project) => project === null ? { targets: [] } : _objectSpread2(_objectSpread2({}, project), {}, { targets: project.targets.map((target) => {
+		var _target$blocks;
+		return _objectSpread2(_objectSpread2({}, target), {}, { blocks: (_target$blocks = target.blocks) !== null && _target$blocks !== void 0 ? _target$blocks : {} });
+	}) });
+	const before = normalize(input.before), after = normalize(input.after);
+	const projectPath = joinPath(folder, "project.source.json");
+	const projectFiles = files.filter((file) => file.path === projectPath);
+	const explained = /* @__PURE__ */ new Set();
+	let projectUsed = false;
+	const useProject = () => {
+		projectUsed = true;
+		return [...projectFiles];
+	};
+	const filesAt = (paths) => {
+		const wanted = new Set(paths.filter((path) => path !== void 0));
+		const found = files.filter((file) => wanted.has(file.path));
+		for (const file of found) explained.add(file.path);
+		return found;
+	};
+	const review = compareProjectForReview(before, after);
+	const scripts = new Map(review.targets.map((target) => {
+		var _target$after;
+		return [targetKey((_target$after = target.after) !== null && _target$after !== void 0 ? _target$after : target.before), target.scripts.length];
+	}));
+	const oldTargets = new Map(before.targets.map((target) => [targetKey(target), target]));
+	const newTargets = new Map(after.targets.map((target) => [targetKey(target), target]));
+	const keys = [...new Set([...after.targets, ...before.targets].map(targetKey))];
+	keys.sort((a, b) => Number(b === "stage") - Number(a === "stage"));
+	const targets = [];
+	for (const key of keys) {
+		var _scripts$get;
+		const a = oldTargets.get(key), b = newTargets.get(key);
+		const status = statusOf(a, b);
+		const elements = [];
+		const count = (_scripts$get = scripts.get(key)) !== null && _scripts$get !== void 0 ? _scripts$get : 0;
+		if (count) elements.push({
+			key: JSON.stringify([
+				key,
+				"code",
+				""
+			]),
+			kind: "code",
+			status,
+			scripts: count,
+			files: useProject()
+		});
+		for (const kind of ["costumes", "sounds"]) {
+			const seen = /* @__PURE__ */ new Map();
+			for (const pair of pairEntries(entriesOf(a, kind), entriesOf(b, kind))) {
+				var _seen$get;
+				const md5ext = {
+					before: pair.before && assetFileName(pair.before) || void 0,
+					after: pair.after && assetFileName(pair.after) || void 0
+				};
+				const differs = !equal(pair.before, pair.after);
+				const assets = filesAt([md5ext.before && joinPath(folder, assetsDirectory.before, md5ext.before), md5ext.after && joinPath(folder, assetsDirectory.after, md5ext.after)]);
+				if (!differs && !assets.length) continue;
+				const repeat = (_seen$get = seen.get(pair.name)) !== null && _seen$get !== void 0 ? _seen$get : 0;
+				seen.set(pair.name, repeat + 1);
+				elements.push({
+					key: JSON.stringify(repeat ? [
+						key,
+						kind,
+						pair.name,
+						repeat
+					] : [
+						key,
+						kind,
+						pair.name
+					]),
+					kind,
+					status: statusOf(pair.before, pair.after),
+					name: pair.name,
+					before: pair.before,
+					after: pair.after,
+					md5ext,
+					files: [...differs ? useProject() : [], ...assets]
+				});
+			}
+		}
+		if (a && b) {
+			const oldFields = a, newFields = b;
+			const data = changedKeys(oldFields, newFields, (property) => !targetDataKeys.includes(property));
+			if (data.length) elements.push({
+				key: JSON.stringify([
+					key,
+					"data",
+					""
+				]),
+				kind: "data",
+				status,
+				properties: data,
+				files: useProject()
+			});
+			const settings = changedKeys(oldFields, newFields, (property) => nonSettingKeys.has(property));
+			if (settings.length) elements.push({
+				key: JSON.stringify([
+					key,
+					"settings",
+					""
+				]),
+				kind: "settings",
+				status,
+				properties: settings,
+				files: useProject()
+			});
+		} else projectUsed = true;
+		if (status !== "updated" || elements.length) {
+			const { name, isStage } = b !== null && b !== void 0 ? b : a;
+			targets.push({
+				key,
+				name,
+				isStage,
+				status,
+				before: a,
+				after: b,
+				elements
+			});
+		}
+	}
+	const project = changedKeys(before, after, (key) => key === "targets").map((property) => ({
+		key: JSON.stringify([
+			"project",
+			"settings",
+			property
+		]),
+		kind: "settings",
+		status: statusOf(before[property], after[property]),
+		properties: [property],
+		files: useProject()
+	}));
+	if (projectUsed) explained.add(projectPath);
+	return {
+		targets,
+		project,
+		other: files.filter((file) => !explained.has(file.path))
+	};
+}
 // src/github-pull-requests.ts
 init_objectSpread2();
 var PullRequestError = class extends Error {
@@ -1827,4 +2079,4 @@ function createScratchBlocksDiffRenderer(options) {
 		};
 	};
 }
-export { gitHubRepositoryFromOrigin as a, BlockPreview as c, currentCostume as d, compareProjectBlocks as f, createGitHubPullRequests as i, createPreviewSync as l, readProjectSourceDiff as m, createScratchBlocksDiffLocator as n, ProjectSourceComparison as o, createProjectSourceDiff as p, PullRequestError as r, ProjectSourceReview as s, createScratchBlocksDiffRenderer as t, usePreviewSync as u };
+export { compareProjectBlocks as _, gitHubRepositoryFromOrigin as a, readProjectSourceDiff as b, projectPropertyLabel as c, BlockPreview as d, createPreviewSync as f, useCostumeImage as g, useAssetImage as h, createGitHubPullRequests as i, ProjectSourceComparison as l, currentCostume as m, createScratchBlocksDiffLocator as n, assetFileName as o, usePreviewSync as p, PullRequestError as r, organizeProjectChanges as s, createScratchBlocksDiffRenderer as t, ProjectSourceReview as u, createProjectSourceDiff as v, parseProjectSource as y };

package/dist/style.css

@@ -135,4 +135,21 @@
 .twgit-view-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
 .twgit-review-unreadable { margin: 6px 0; padding: 8px; background: color-mix(in srgb, #d9822b 16%, Canvas); }
 .twgit-review-comparison .twgit-review-overview dl { margin: 4px 0 8px; }
+.twgit-element-list > section { margin: 6px 0 10px; }
+.twgit-element-target { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 14px; }
+.twgit-element-target img, .twgit-element img, .twgit-element-thumbnail { width: 28px; height: 28px; object-fit: contain; flex: none; }
+.twgit-element-thumbnail { display: inline-block; border-radius: 4px; background: color-mix(in srgb, CanvasText 8%, Canvas); }
+.twgit-panel .twgit-element { display: flex; align-items: center; gap: 6px; padding-inline-start: 10px; }
+.twgit-element-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.twgit-file-list { margin-top: 10px; }
+.twgit-element-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.twgit-element-picture { margin: 0; padding: 10px; border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas); border-radius: 6px; }
+.twgit-element-picture img { display: block; max-width: 100%; max-height: 260px; margin: 8px auto 0; object-fit: contain;
+    background: repeating-conic-gradient(color-mix(in srgb, CanvasText 6%, Canvas) 0 25%, Canvas 0 50%) 0 0 / 16px 16px; }
+.twgit-element-values { border-collapse: collapse; width: 100%; font-size: 13px; }
+.twgit-element-values th, .twgit-element-values td { text-align: start; vertical-align: top; padding: 6px 8px;
+    border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, Canvas); overflow-wrap: anywhere; }
+.twgit-element-values td { font-family: ui-monospace, monospace; }
+.twgit-element-files { margin-top: 12px; }
+.twgit-panel .twgit-element span.twgit-element-name { width: auto; font-family: inherit; }
 /*$vite$:1*/

package/package.json

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

package/src/index.tsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {render, unmountComponentAtNode} from 'react-dom';
 import {FileDiffView} from './file-diff-view.js';
+import {findElement, ProjectChangeListView, ProjectElementView, projectChangeLabels, useProjectChanges} from './project-change-list.js';
+import type {ChangedFile} from './project-change-model.js';
 import {openRepository} from './repository.js';
 import type {Repository, Snapshot, FileChange, FileDiff, ChangeGroup} from './repository.js';
 import {labelsFor} from './messages.js';
@@ -214,6 +216,20 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
     });
     const selectFile = (selected: FileChange) => run(async () => ({selected,
         diff: await state.repository!.readDiff(state.snapshot!, selected)}));
+    // A selected stage or sprite element replaces the file diff; picking a file goes back to it.
+    const [element, setElement] = useState<string | null>(null);
+    const [fileListOpen, setFileListOpen] = useState(false);
+    const projectChanges = useProjectChanges(state.repository, state.snapshot, state.project, state.commit, state.changes);
+    const openFile = (file: ChangedFile | FileChange) => {
+        const change = state.changes.find(item => item.path === file.path && item.group === file.group);
+        if (!change) return;
+        setElement(null);
+        void selectFile(change);
+    };
+    const openElement = (key: string) => {
+        setElement(key);
+        setState(previous => ({...previous, selected: null, diff: null}));
+    };
     const selectCommit = (commit: string) => run(async () => ({commit,
         changes: await state.repository!.historyChanges(state.snapshot!, commit), selected: null, diff: null}));
     const remoteOperation = async (operation: RemoteOperation) => {
@@ -254,6 +270,8 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
         state.repository.assetLoader(state.snapshot, state.selected) : undefined, [state.repository, state.snapshot, state.selected]);
     if (!visible) return null;
     const groups: ChangeGroup[] = state.commit ? ['commit'] : ['staged', 'unstaged', 'untracked'];
+    const projectList = typeof projectChanges === 'object' ? projectChanges : null;
+    const selection = projectList && !state.selected ? findElement(projectList.list, element) : null;
     return <div className="twgit-backdrop">
         <div className="twgit-panel" ref={dialog} tabIndex={-1} role="dialog" aria-modal="true" aria-label={labels.title}
             onKeyDown={focusTrap}>
@@ -297,15 +315,22 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                             onClick={() => void browse([state.browser!.path, name].filter(Boolean).join('/'))}>{name}/</button></li>)}</ul>
                     </details>}
                     <h3><button disabled={state.busy} onClick={() => void controller.refresh()}>{labels.worktree}</button></h3>
-                    {groups.map(group => <section key={group}>
-                        <h3>{labels[group]} · {state.changes.filter(change => change.group === group).length}</h3>
-                        <ul>{state.changes.filter(change => change.group === group).map(change => <li key={change.path}>
-                            <button className="twgit-file" data-git-group={group} disabled={state.busy}
-                                aria-pressed={state.selected === change} onClick={() => void selectFile(change)}>
-                                <span>{!change.after ? 'D' : !change.before ? 'A' : 'M'}</span> {change.path}
-                            </button>
-                        </li>)}</ul>
-                    </section>)}
+                    {projectChanges === 'loading' && <p role="status">{projectChangeLabels(locale).loading}</p>}
+                    {projectChanges === 'unreadable' && <p>{projectChangeLabels(locale).unreadable}</p>}
+                    {(() => {
+                        const fileList = groups.map(group => <section key={group}>
+                            <h3>{labels[group]} · {state.changes.filter(change => change.group === group).length}</h3>
+                            <ul>{state.changes.filter(change => change.group === group).map(change => <li key={change.path}>
+                                <button className="twgit-file" data-git-group={group} disabled={state.busy}
+                                    aria-pressed={state.selected === change} onClick={() => openFile(change)}>
+                                    <span>{!change.after ? 'D' : !change.before ? 'A' : 'M'}</span> {change.path}
+                                </button>
+                            </li>)}</ul>
+                        </section>);
+                        return projectList ? <ProjectChangeListView changes={projectList} selected={selection ? element : null}
+                            locale={locale} busy={state.busy} onSelect={openElement} onSelectFile={openFile} fileList={fileList}
+                            fileListOpen={fileListOpen} setFileListOpen={setFileListOpen}/> : fileList;
+                    })()}
                     {!state.changes.length && <p>{labels.clean}</p>}
                     <details><summary>{labels.branches}</summary><ul>{state.snapshot?.branches.map(branch => <li key={branch}>{branch}</li>)}</ul></details>
                     <h3>{labels.history}</h3>
@@ -316,8 +341,10 @@ function GitPanel({document, host, controller}: {document: Document; host: GitHo
                     </li>)}</ol>
                 </aside>
                 <main className="twgit-diff">
-                    {state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
-                        renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
+                    {selection && projectList ? <ProjectElementView changes={projectList} selection={selection} locale={locale}
+                        renderBlock={host.renderReviewBlock} onSelectFile={openFile}/> :
+                        state.selected ? <FileDiffView change={state.selected} diff={state.diff} labels={labels} locale={locale}
+                            renderBlock={host.renderReviewBlock} loadAsset={loadAsset}/> : <p>{labels.select}</p>}
                 </main>
             </div>}
             <footer>{labels.permissions}</footer>

package/src/project-assets.ts

@@ -43,18 +43,24 @@ function readAsset(loadAsset: ProjectAssetLoader, version: ProjectVersion, md5ex
     return read;
 }
 
-/** Loads the current costume of one version of a target as an object URL for an image, or `null` while it is unavailable. */
-export function useCostumeImage(target: ProjectTarget | undefined, version: ProjectVersion, loadAsset?: ProjectAssetLoader): string | null {
-    const costume = target && loadAsset ? currentCostume(target) : null;
-    const key = costume ? version + ':' + costume.md5ext : '';
+/** The image type of an asset file name, or `undefined` for sounds and anything that is not an image. */
+export function assetImageType(md5ext: string): string | undefined {
+    const match = /^[0-9A-Za-z_-]{1,128}\.([0-9A-Za-z]{1,8})$/.exec(md5ext);
+    return match ? imageTypes[match[1].toLowerCase()] : undefined;
+}
+
+/** Loads one image asset of one version as an object URL, or `null` while it is unavailable or not an image. */
+export function useAssetImage(md5ext: string | undefined, version: ProjectVersion, loadAsset?: ProjectAssetLoader): string | null {
+    const type = md5ext ? assetImageType(md5ext) : undefined;
+    const key = md5ext && type && loadAsset ? version + ':' + md5ext : '';
     const [image, setImage] = useState<{key: string; url: string}>();
     useEffect(() => {
-        if (!costume || !loadAsset) return;
+        if (!key || !loadAsset) return;
         let active = true;
         let url: string | undefined;
-        void readAsset(loadAsset, version, costume.md5ext).then(blob => {
+        void readAsset(loadAsset, version, md5ext!).then(blob => {
             if (!blob || !active) return;
-            url = URL.createObjectURL(new Blob([blob], {type: costume.type}));
+            url = URL.createObjectURL(new Blob([blob], {type}));
             setImage({key, url});
         });
         return () => {
@@ -64,3 +70,9 @@ export function useCostumeImage(target: ProjectTarget | undefined, version: Proj
     }, [key, loadAsset]);
     return image?.key === key ? image.url : 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 function useCostumeImage(target: ProjectTarget | undefined, version: ProjectVersion, loadAsset?: ProjectAssetLoader): string | null {
+    const costume = target && loadAsset ? currentCostume(target) : null;
+    return useAssetImage(costume?.md5ext, version, loadAsset);
+}