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

package/README.ja.md

@@ -4,7 +4,7 @@
 
 TurboWarp Plus Editor のファイルメニューに、読み取り専用の「ローカル Git」を追加します。リポジトリルートを一度選び、配下の sb3-toolchain v1 作品フォルダをパネルから開きます。作品の編集と保存には Editor の project-folder 接続を使います。
 
-ステージ済み・未ステージ・未追跡の変更、現在のブランチ、HEAD、ローカルブランチと直近50件の履歴を表示します。ファイルを選ぶとテキスト差分またはバイナリのサイズを確認できます。作品データ（`project.source.json`）は、ホストがブロックの描画関数を渡していればステージ・スプライト別、スクリプト別のブロックで比べ、「テキスト」に切り替えると行単位の差分を表示します。コミットを選ぶと第一親との差分を表示します。作品を選んでいるときは、変更一覧と差分をそのフォルダに絞ります。
+ステージ済み・未ステージ・未追跡の変更、現在のブランチ、HEAD、ローカルブランチと直近50件の履歴を表示します。ファイルを選ぶとテキスト差分またはバイナリのサイズを確認できます。作品データ（`project.source.json`）は、ホストがブロックの描画関数を渡していればステージ・スプライト別、コード別のブロックで比べ、「テキスト」に切り替えると行単位の差分を表示します。ステージ・スプライトの見出しには、その版の現在のコスチューム（ステージは背景）のサムネイルを添えます。素材は比較する版から読みます（ステージ済みは HEAD とインデックス、未ステージはインデックスと作業ツリー、未追跡は作業ツリー、コミットは第一親とそのコミット）。素材のフォルダはその版の `sb3-source.json` の `assetsDirectory`（既定は `assets`）です。読めない版では名前だけを示します。コミットを選ぶと第一親との差分を表示します。作品を選んでいるときは、変更一覧と差分をそのフォルダに絞ります。
 
 パネルを開いている間は、2 秒ごと、ウィンドウにフォーカスが戻ったとき、対応環境では `FileSystemObserver` の通知でリポジトリを確認します。HEAD、インデックス、`packed-refs`、`config`、現在のブランチの参照、選択中の作品フォルダのファイル（作品を選んでいない場合は作業ツリー全体、5,000 件まで）のサイズと更新時刻を比べます。変更があり、差分やコミットを開いていなければ読み直します。差分・コミット・プルリクエストのレビューを開いている間は表示を保ち、**再取得** を案内します。Git がメタデータをロックしている間は確認を待ちます。**作品を再読込** では、Editor の未保存編集を確認してから同じ作品を開き直します。Git の閲覧には読み取り専用のアダプターを使い、インデックスの更新を無効にします。読み取り中にファイルや Git の状態が変わった場合は、外部操作の完了後に再取得します。
 
@@ -63,17 +63,23 @@ const diffFile = new Blob([patch], {type: 'text/x-diff'});
 
 `getBlockly` は読み込み済みの Scratch Blocks、`deserializeBlocks` と `VMBlocks` はホストの Scratch VM が提供するものを使います。表示用の VM ブロックコンテナーとワークスペースは差分ごとに新しく作ります。ホストに定義がない拡張ブロックやプレビュー非対応の mutation には描画不可と表示します。
 
-ブロックはステージまたはスプライト名とブロック ID で照合します。変更されたブロックとその入力を読み取り専用で並べ、追加・削除・入力値などの注釈を付けます。「元のスクリプト内で強調」を選ぶと、つながったスクリプトの中で対象を確認できます。オレンジの枠は変更された入力欄やフィールドを示します。画像・音声など、コード以外に変更があればその旨を表示します。切り戻す場合は、このコンポーネントの呼び出しを外します。
+ブロックはステージまたはスプライト名とブロック ID で照合します。変更されたブロックとその入力を読み取り専用で並べ、追加・削除・入力値などの注釈を付けます。「元のコード内で強調」を選ぶと、つながったコードの中で対象を確認できます。オレンジの枠は変更された入力欄やフィールドを示します。画像・音声など、コード以外に変更があればその旨を表示します。切り戻す場合は、このコンポーネントの呼び出しを外します。
 
 ### 編集画面のブロックと照合する
 
-`locateBlock` に `createScratchBlocksDiffLocator(resolveWorkspace)` を渡すと、各版のプレビューに「編集画面で強調」が出ます。`resolveWorkspace` は指定された `version`、対象のステージ・スプライト、ブロック ID に対応するワークスペースを返します。ホストは作品と版を照合し、必要なら対象を切り替えてブロックが表示されるまで待ちます。一致する編集画面がなければ `null` を返します。削除済みのブロックは変更前のスクリプトを展開して確認できます。
+`locateBlock` に `createScratchBlocksDiffLocator(resolveWorkspace)` を渡すと、各版のプレビューに「編集画面で強調」が出ます。`resolveWorkspace` は指定された `version`、対象のステージ・スプライト、ブロック ID に対応するワークスペースを返します。ホストは作品と版を照合し、必要なら対象を切り替えてブロックが表示されるまで待ちます。一致する編集画面がなければ `null` を返します。削除済みのブロックは変更前のコードを展開して確認できます。
 
 ロケーターは一致したブロックを中央に移動し、差分ビューと同じ入力欄やフィールドを強調します。別の差分の選択・差分ファイルの切り替え・ビューの終了で強調を解除します。
 
+### 表示枠
+
+変更前・変更後の各枠は読み取り専用の作業領域です。Editor のコードエリアと同じ倍率でブロックを描き、枠の高さをブロックに合わせます（160〜420 px。枠の右下をドラッグすると高くできます）。ドラッグとスクロールバーで動かし、拡大縮小ボタンと Ctrl＋ホイール（トラックパッドのピンチ）で拡大縮小します。ホイールだけの操作は、レビュー全体のスクロールに使います。同じ比較の枠は拡大率・高さ・スクロール位置を連動させ、「変更前と変更後を連動して動かす」で切り離せます。
+
+`createScratchBlocksDiffRenderer` の `attachNavigation(workspace, blockly, watermark)` に、ホストのコードエリアと同じ操作部品を付ける関数を渡せます。TurboWarp Plus Editor は右下にコスチュームのサムネイル、ミニマップ、拡大縮小ボタンの列を並べます。`watermark` はその版の現在のコスチュームを表示する要素で、素材を読む `loadAsset` があるときに渡します。`attachNavigation` がなければ Scratch Blocks の拡大縮小ボタンを使います。独自の描画関数は `{dispose, view}` を返すと、`createPreviewSync` による連動に加われます。
+
 ## PR 単位でレビューする
 
-同じエントリの `ProjectSourceReview` は、作品ファイルを複数含む変更セットをまとめてレビューするためのビューです。`title`・`description`・`verification` には PR 作者が記した目的と確認観点を渡します。`files` に作品ファイルの `{path, patch, beforeSource?}` や、関連ファイルの `{path, status, summary?}` を渡します。ブロックを描画する `renderBlock` は個別差分ビューと共通です。
+同じエントリの `ProjectSourceReview` は、作品ファイルを複数含む変更セットをまとめてレビューするためのビューです。`title`・`description`・`verification` には PR 作者が記した目的と確認観点を渡します。`files` に作品ファイルの `{path, patch, beforeSource?, loadAsset?}` や、関連ファイルの `{path, status, summary?}` を渡します。ブロックを描画する `renderBlock` は個別差分ビューと共通です。
 
 ```tsx
 <ProjectSourceReview
@@ -89,13 +95,15 @@ const diffFile = new Blob([patch], {type: 'text/x-diff'});
 />
 ```
 
-作品ファイルはステージ・スプライトごとに整理し、変更のあったスクリプトだけを比較項目にします。分割・結合したスクリプトも、両版に共通するブロック ID を使って一項目にまとめます。展開すると前後のスクリプトをブロックで表示し、編集箇所を枠で示します。変数、コスチュームなどの変更は別に示します。関連ファイルの要約はホストから渡した情報を表示します。
+作品ファイルはステージ・スプライトごとに整理し、変更のあったコードだけを比較項目にします。ひとかたまりのブロックは Editor のタブ名と同じく「コード」と呼び、見出しには「コードの変更 · N か所」と示します。各項目は帽子ブロックの名前で呼びます。分割・結合したコードも、両版に共通するブロック ID を使って一項目にまとめます。展開すると前後のコードをブロックで表示し、編集箇所を枠で示します。変数、コスチュームなどの変更は別に示します。関連ファイルの要約はホストから渡した情報を表示します。
+
+`loadAsset` は `({version, md5ext, signal}) => Promise<Blob | null>` の形で、`version`（`before`／`after`）の作品フォルダの素材を読みます。渡すと、ステージ・スプライトの見出しにその版の現在のコスチューム（ステージは背景）のサムネイルを添えます。変更前後でコスチュームが違えば「変更前 → 変更後」と並べます。関数がないとき、または画像を読めないときは名前だけを示します。`createGitHubPullRequests` が返す作品ファイルには、変更前（マージベース）と変更後（head）の素材を raw.githubusercontent.com から読む `loadAsset` が付きます。この読み込みは GitHub API の利用上限を消費せず、1 ファイル 10 MiB までです。
 
 確認済みの印は表示中の比較データに紐づくローカル状態です。PR 本文・ファイル差分の取得と GitHub へのレビュー送信は、呼び出し側が担当します。
 
 ### 2 つの版を直接比べる
 
-`ProjectSourceComparison` は、同じ比較を 1 つの作品ファイルについて表示します。変更前と変更後の `project.source.json` の文字列を `before`・`after` に渡します。ファイルがない側は `null` とし、すべてのスクリプトを追加または削除として示します。ローカル Git パネルは作業ツリーと履歴の差分にこのビューを使います。
+`ProjectSourceComparison` は、同じ比較を 1 つの作品ファイルについて表示します。変更前と変更後の `project.source.json` の文字列を `before`・`after` に渡します。ファイルがない側は `null` とし、すべてのコードを追加または削除として示します。`loadAsset` は `ProjectSourceReview` の作品ファイルと同じで、見出しのサムネイルに使います。ローカル Git パネルは作業ツリーと履歴の差分にこのビューを使います。
 
 ```tsx
 <ProjectSourceComparison before={beforeText} after={afterText} renderBlock={renderBlock} locale="ja"
@@ -103,3 +111,11 @@ const diffFile = new Blob([patch], {type: 'text/x-diff'});
 ```
 
 どちらかの版を作品として読めないときは理由を示し、`fallback` を表示します。`fallback` がなければエラーだけを示します。
+
+## 公開
+
+npm への公開は `.github/workflows/release.yml` が行う。`package.json` の版と同じ `v<版>` のタグを
+`main` のコミットに push すると、テストを通したうえで npm に入れるアーカイブを作り、GitHub Release に
+添付してから npm に公開し、`latest` と `next` をその版に向ける。認証はトークンではなく npm の
+Trusted Publisher（OIDC）で、provenance を付けて公開する。npm 側の設定にはこのワークフローの
+ファイル名をそのまま登録するため、改名するときは npm の設定も合わせる。

package/README.md

@@ -4,7 +4,7 @@
 
 Local Git adds a read-only panel to the TurboWarp Plus Editor File menu. Select the repository root once, then browse to an sb3-toolchain v1 project folder inside it. Project editing and saving are supplied by the Editor's project-folder integration.
 
-The panel separates staged, unstaged, and untracked changes. It shows the current branch, HEAD, local branches, and the latest 50 commits. Select a file to inspect its text diff or binary size. When the host supplies a block renderer, project data (`project.source.json`) is compared as blocks by stage, sprite and script, and **Text** switches to the line diff. Select a commit to compare its files with its first parent. The selected project limits the file list and diffs to that folder.
+The panel separates staged, unstaged, and untracked changes. It shows the current branch, HEAD, local branches, and the latest 50 commits. Select a file to inspect its text diff or binary size. When the host supplies a block renderer, project data (`project.source.json`) is compared as blocks by stage, sprite and code, and **Text** switches to the line diff. Each stage and sprite heading shows a thumbnail of its current costume (the backdrop for the stage) in each version. Assets are read from the compared versions: HEAD and the index for staged changes, the index and the working tree for unstaged changes, the working tree for untracked files, and the first parent and the commit for history. The assets folder is the `assetsDirectory` of that version's `sb3-source.json` (`assets` by default). When an asset cannot be read, only the name is shown. Pull request reviews read the same thumbnails from raw.githubusercontent.com at the merge base and head, without using the GitHub API rate limit. Select a commit to compare its files with its first parent. The selected project limits the file list and diffs to that folder.
 
 While the panel is open, it checks the repository every two seconds, when the window regains focus, and on `FileSystemObserver` notifications where available. It compares the sizes and modification times of HEAD, the index, `packed-refs`, `config`, the current branch ref, and the files in the selected project folder (the whole work tree when no project is selected, up to 5,000 files). When something changed and no diff or commit is open, the panel reads the repository again. While a diff, a commit or a pull request review is open, it keeps the view and asks you to **Refresh** instead. Checks wait while Git holds a lock on its metadata. **Reload Project** opens the selected project again using the Editor's unsaved-edit confirmation. Git inspection uses a read-only adapter and isomorphic-git with index refresh disabled. If the repository changes during a read, refresh after the other operation completes.
 
@@ -34,3 +34,11 @@ Each receive-pack POST carries a new UUID v4 in `Git-Push-Id`. A browser replay
 `npm test` runs the local Git tests and a headless Smart HTTP fixture on IPv4 loopback using `git-http-backend`. The fixture uses disposable repositories and test credentials. [Proxy, authentication and CORS contract](https://github.com/kubohiroya/turbowarp-plus-editor/issues/315).
 
 When the Editor host supplies connection settings, the Local Git panel offers fetch, fast-forward pull and push for the current branch and its existing GitHub HTTPS `origin`. Authorize push when connecting to enable the explicit push action. Fetch updates Git metadata. Pull requires a stopped project, a clean worktree, and regular non-executable files. Pull stages the changes, rechecks the local state, and then applies them. Reopen the project from the panel after a successful pull.
+
+## Release
+
+`.github/workflows/release.yml` publishes to npm. Push a `v<version>` tag that names the
+`package.json` version on a `main` commit: the workflow runs the tests, packs the archive, attaches it
+to the GitHub Release, publishes it to npm and points `latest` and `next` at it. It authenticates with
+npm Trusted Publishing (OIDC), not a token, and publishes with provenance. The npm settings name this
+workflow file, so rename both together.

package/dist/block-diff-preview.d.ts

@@ -1,9 +1,21 @@
 import React from 'react';
 import type { BlockPart, BlockSide } from './project-source-patch.js';
-import type { ProjectBlockRenderer, ScriptBlockMark } from './scratch-block-diff-renderer.js';
+import type { BlockPreviewView, ProjectBlockRenderer, ScriptBlockMark } from './scratch-block-diff-renderer.js';
+import type { ProjectAssetLoader, ProjectVersion } from './project-assets.js';
 export type LocationStatus = 'locating' | 'located' | 'missingLocation';
 type PreviewLabels = Record<'absent' | 'loading' | 'unavailable', string> & Partial<Record<LocationStatus | 'locate', string>>;
-export declare function BlockPreview({ side, title, parts, marks, renderBlock, withContext, labels, onLocate, locationStatus }: {
+/** Keeps the previews of one comparison at the same zoom, height and scroll position while they are linked. */
+export interface PreviewSync {
+    add(view: BlockPreviewView): () => void;
+    setLinked(linked: boolean): void;
+}
+export declare function createPreviewSync(): PreviewSync;
+/** One sync group per comparison, with the checkbox that links or unlinks its previews. */
+export declare function usePreviewSync(locale: string): {
+    sync: PreviewSync;
+    toggle: React.JSX.Element;
+};
+export declare function BlockPreview({ side, title, parts, marks, renderBlock, withContext, labels, onLocate, locationStatus, version, loadAsset, sync }: {
     side?: BlockSide;
     title: string;
     parts?: readonly BlockPart[];
@@ -13,5 +25,9 @@ export declare function BlockPreview({ side, title, parts, marks, renderBlock, w
     labels: PreviewLabels;
     onLocate?: () => void;
     locationStatus?: LocationStatus;
+    /** Which version this preview shows, for its costume thumbnail. */
+    version?: ProjectVersion;
+    loadAsset?: ProjectAssetLoader;
+    sync?: PreviewSync;
 }): React.JSX.Element;
 export {};

package/dist/file-diff-view.d.ts

@@ -2,15 +2,17 @@ import React from 'react';
 import type { FileChange, FileDiff } from './repository.js';
 import type { labelsFor } from './messages.js';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
+import type { ProjectAssetLoader } from './project-assets.js';
 /** Project sources are the files the panel opens as projects. */
 export declare const isProjectSource: (path: string) => boolean;
 /**
  * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
  */
-export declare function FileDiffView({ change, diff, labels, locale, renderBlock }: {
+export declare function FileDiffView({ change, diff, labels, locale, renderBlock, loadAsset }: {
     change: FileChange;
     diff: FileDiff | null;
     labels: ReturnType<typeof labelsFor>;
     locale: string;
     renderBlock?: ProjectBlockRenderer;
+    loadAsset?: ProjectAssetLoader;
 }): React.JSX.Element;

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-CLYoOIB2.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-DplMQiuo.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: "テキスト"
@@ -2684,10 +2684,10 @@ var isProjectSource = (path) => path.split("/").pop() === "project.source.json";
 /**
 * Shows one changed file. Project sources are compared as blocks by default, with their text diff one switch away.
 */
-function FileDiffView({ change, diff, labels, locale, renderBlock }) {
+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",
@@ -2712,10 +2712,311 @@ function FileDiffView({ change, diff, labels, locale, renderBlock }) {
 		renderBlock,
 		locale,
 		fallback: text,
+		loadAsset,
 		before: change.before === null ? null : sources.before,
 		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: {
@@ -3384,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),
@@ -3438,12 +3755,19 @@ function GitPanel({ document, host, controller }) {
 			first === null || first === void 0 || first.focus();
 		}
 	};
+	const loadAsset = useMemo(() => state.repository && state.snapshot && state.selected ? state.repository.assetLoader(state.snapshot, state.selected) : void 0, [
+		state.repository,
+		state.snapshot,
+		state.selected
+	]);
 	if (!visible) return null;
 	const groups = state.commit ? ["commit"] : [
 		"staged",
 		"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,
@@ -3497,23 +3821,43 @@ 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,
 		locale,
-		renderBlock: host.renderReviewBlock
+		renderBlock: host.renderReviewBlock,
+		loadAsset
 	}) : /* @__PURE__ */ React.createElement("p", null, labels.select))), /* @__PURE__ */ React.createElement("footer", null, labels.permissions)));
 }
 function mountGitPanel({ vm, document, host }) {

package/dist/{libesm-OWRWzmu_.js → project-asset-paths-KV715791.js}

@@ -736,4 +736,26 @@ function splitLines(text) {
 	else result.push(result.pop().slice(0, -1));
 	return result;
 }
-export { hasOnlyUnixLineEndings as n, hasOnlyWinLineEndings as r, createTwoFilesPatch as t };
+// src/project-asset-paths.ts
+/** The largest asset a thumbnail reads. */
+var assetLimit = 10485760;
+/** The largest sb3-source.json read to find the assets directory. */
+var folderSettingsLimit = 1048576;
+/** Asset names are plain `<md5>.<ext>` file names; anything else could address a path outside the assets directory. */
+var isAssetName = (name) => typeof name === "string" && /^[0-9A-Za-z_-]{1,128}\.[0-9A-Za-z]{1,8}$/.test(name);
+/**
+* The assets directory named by one version of a project folder's `sb3-source.json`, as path segments relative to the
+* folder. `assets` when that file or its `assetsDirectory` field is missing or unreadable. `null` when the field names
+* anything other than a plain relative path inside the folder.
+*/
+function assetsDirectoryParts(settings) {
+	let value = "assets";
+	if (settings !== null) try {
+		const parsed = JSON.parse(settings);
+		if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed) && "assetsDirectory" in parsed) value = parsed.assetsDirectory;
+	} catch (_unused) {}
+	if (typeof value !== "string" || value.length > 1024) return null;
+	const parts = value.split("/");
+	return parts.every((part) => part && part !== "." && part !== ".." && part.toLowerCase() !== ".git" && !/[\\\0-\x1f\x7f]/.test(part)) ? parts : null;
+}
+export { createTwoFilesPatch as a, isAssetName as i, assetsDirectoryParts as n, hasOnlyUnixLineEndings as o, folderSettingsLimit as r, hasOnlyWinLineEndings as s, assetLimit as t };