@kubohiroya/turbowarp-plus-editor-git 0.7.0 → 0.8.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, i as createGitHubPullRequests, o as ProjectSourceComparison, r as PullRequestError, s as ProjectSourceReview, t as createScratchBlocksDiffRenderer } from "./scratch-block-diff-renderer-xS8OYsRl.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-BQkADJmK.js";
 import * as m from "react";
 import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
@@ -2684,7 +2684,7 @@ 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;
@@ -2712,6 +2712,7 @@ 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);
@@ -3438,6 +3439,11 @@ 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",
@@ -3513,7 +3519,8 @@ function GitPanel({ document, host, controller }) {
 		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 };

package/dist/project-asset-paths.d.ts

@@ -0,0 +1,12 @@
+/** The largest asset a thumbnail reads. */
+export declare const assetLimit: number;
+/** The largest sb3-source.json read to find the assets directory. */
+export declare const folderSettingsLimit: number;
+/** Asset names are plain `<md5>.<ext>` file names; anything else could address a path outside the assets directory. */
+export declare const isAssetName: (name: unknown) => name is string;
+/**
+ * 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.
+ */
+export declare function assetsDirectoryParts(settings: string | null): string[] | null;

package/dist/project-assets.d.ts

@@ -0,0 +1,19 @@
+import type { ProjectTarget } from './project-source-patch.js';
+export type ProjectVersion = 'before' | 'after';
+/**
+ * Reads one asset of one version of a project file by its `md5ext` name (for example `0123…cdef.svg`), from the
+ * assets directory of that project. Resolves `null` when that version has no readable file of that name.
+ */
+export type ProjectAssetLoader = (request: {
+    version: ProjectVersion;
+    md5ext: string;
+    signal: AbortSignal;
+}) => Promise<Blob | null>;
+/** The costume a sprite shows, or the backdrop the stage shows, when the project data names an image file for it. */
+export declare function currentCostume(target: ProjectTarget): {
+    name: string;
+    md5ext: string;
+    type: 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-source-diff.d.ts

@@ -9,8 +9,12 @@ export { createScratchBlocksDiffLocator } from './block-diff-location.js';
 export type { ProjectBlockLocation, ProjectBlockLocator, ScratchBlockLocationWorkspace } from './block-diff-location.js';
 export type { BlockPart } from './project-source-patch.js';
 export { createProjectSourceDiff } from './project-source-patch.js';
+export { currentCostume } from './project-assets.js';
+export type { ProjectAssetLoader, ProjectVersion } from './project-assets.js';
 export { createScratchBlocksDiffRenderer } from './scratch-block-diff-renderer.js';
-export type { ProjectBlockRenderer, ScratchBlockDiffRendererOptions, ScratchBlocksPort } from './scratch-block-diff-renderer.js';
+export type { BlockPreviewView, BlockPreviewViewport, ProjectBlockRenderer, ProjectBlockRendering, ScratchBlockDiffRendererOptions, ScratchBlocksPort } from './scratch-block-diff-renderer.js';
+export { createPreviewSync } from './block-diff-preview.js';
+export type { PreviewSync } from './block-diff-preview.js';
 export interface ProjectSourceBlockDiffProps {
     patch: string;
     /** Supply the original JSON if the unified patch omits context. */

package/dist/project-source-diff.js

@@ -1,4 +1,4 @@
-import { a as gitHubRepositoryFromOrigin, c as compareProjectBlocks, d as BlockPreview, i as createGitHubPullRequests, l as createProjectSourceDiff, n as createScratchBlocksDiffLocator, o as ProjectSourceComparison, s as ProjectSourceReview, t as createScratchBlocksDiffRenderer, u as readProjectSourceDiff } from "./scratch-block-diff-renderer-CLYoOIB2.js";
+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 { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 // src/project-source-diff.tsx
@@ -19,13 +19,13 @@ var en = {
 	properties: "Other block properties",
 	absent: "No block on this side",
 	omitted: (count) => `${count} unchanged blocks omitted from the change list`,
-	context: "Highlight in the surrounding script",
+	context: "Highlight in the surrounding code",
 	more: "Show more changes",
 	noChanges: "No block changes.",
 	locate: "Highlight in Editor",
 	locating: "Finding the block in the Editor…",
 	located: "Highlighted in the Editor.",
-	missingLocation: "This version or block is unavailable in the Editor. Open its surrounding script here.",
+	missingLocation: "This version or block is unavailable in the Editor. Open its surrounding code here.",
 	partLegend: "Orange outlines mark changed inputs and fields.",
 	otherChanges: "The project also has changes outside its block code.",
 	invalid: "This diff could not be read. Use a full-context project diff, or provide the original project.",
@@ -48,13 +48,13 @@ var ja = {
 	properties: "その他のブロック属性",
 	absent: "この側にはブロックがありません",
 	omitted: (count) => `変更のないブロック ${count} 個を一覧から省略`,
-	context: "元のスクリプト内で強調",
+	context: "元のコード内で強調",
 	more: "続きを表示",
 	noChanges: "ブロックの変更はありません。",
 	locate: "編集画面で強調",
 	locating: "編集画面でブロックを検索中…",
 	located: "編集画面で強調しました。",
-	missingLocation: "編集画面に該当する版またはブロックがありません。元のスクリプトをここで展開できます。",
+	missingLocation: "編集画面に該当する版またはブロックがありません。元のコードをここで展開できます。",
 	partLegend: "オレンジの枠は、変更された入力欄やフィールドです。",
 	otherChanges: "ブロックのコード以外にも作品の変更があります。",
 	invalid: "差分を読み込めません。全体の文脈を含む差分を使うか、変更前の作品を指定してください。",
@@ -75,6 +75,7 @@ var propertyLabels = /* @__PURE__ */ new Map([
 function ChangeCard({ change, renderBlock, labels, onLocate, location }) {
 	var _change$after;
 	const [withContext, setWithContext] = useState(false);
+	const { sync, toggle } = usePreviewSync(labels === en ? "en" : "ja");
 	const notes = [...new Set(change.fields.map((field) => {
 		var _propertyLabels$get;
 		return labels[(_propertyLabels$get = propertyLabels.get(field)) !== null && _propertyLabels$get !== void 0 ? _propertyLabels$get : "properties"];
@@ -89,8 +90,10 @@ function ChangeCard({ change, renderBlock, labels, onLocate, location }) {
 		labels,
 		parts: change.parts,
 		onLocate: onLocate && (() => onLocate(version)),
+		version,
+		sync,
 		locationStatus: (location === null || location === void 0 ? void 0 : location.version) === version ? location.status : void 0
-	}))), /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("input", {
+	}))), toggle, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement("input", {
 		type: "checkbox",
 		checked: withContext,
 		onChange: (event) => setWithContext(event.currentTarget.checked)
@@ -166,4 +169,4 @@ function ProjectSourceBlockDiff({ patch, beforeSource, renderBlock, locateBlock,
 		})
 	}, labels.more));
 }
-export { ProjectSourceBlockDiff, ProjectSourceComparison, ProjectSourceReview, createGitHubPullRequests, createProjectSourceDiff, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, gitHubRepositoryFromOrigin };
+export { ProjectSourceBlockDiff, ProjectSourceComparison, ProjectSourceReview, createGitHubPullRequests, createPreviewSync, createProjectSourceDiff, createScratchBlocksDiffLocator, createScratchBlocksDiffRenderer, currentCostume, gitHubRepositoryFromOrigin };

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

@@ -1,4 +1,4 @@
-import type { BlockSide, ProjectSource } from './project-source-patch.js';
+import type { BlockSide, ProjectSource, ProjectTarget } from './project-source-patch.js';
 import type { ScriptBlockMark } from './scratch-block-diff-renderer.js';
 export interface ScriptReviewSide extends BlockSide {
     marks: ScriptBlockMark[];
@@ -11,6 +11,9 @@ export interface ScriptReview {
 export interface TargetReview {
     name: string;
     isStage: boolean;
+    /** The stage or sprite in each version, absent where it does not exist. */
+    before?: ProjectTarget;
+    after?: ProjectTarget;
     scripts: ScriptReview[];
     properties: string[];
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { ProjectBlockRenderer } from './scratch-block-diff-renderer.js';
+import type { ProjectAssetLoader } from './project-assets.js';
 export type ProjectSourceReviewFile = {
     path: string;
     summary?: string;
@@ -8,6 +9,7 @@ export type ProjectSourceReviewFile = {
 } & ({
     patch: string;
     beforeSource?: string;
+    loadAsset?: ProjectAssetLoader;
 } | {
     status: 'added' | 'removed' | 'updated';
 });
@@ -28,7 +30,9 @@ export interface ProjectSourceComparisonProps {
     locale?: string;
     /** Shown after an explanation when either version cannot be read as a project. Without it, only an error is shown. */
     fallback?: React.ReactNode;
+    /** Reads the images of both versions for thumbnails. Without it, stages and sprites are shown by name. */
+    loadAsset?: ProjectAssetLoader;
 }
-/** Compares two versions of a project.source.json by stage, sprite and script, as the pull request review does. */
-export declare function ProjectSourceComparison({ before, after, renderBlock, locale, fallback }: ProjectSourceComparisonProps): React.JSX.Element;
+/** 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 ProjectSourceReview({ title, description, verification, files, renderBlock, locale }: ProjectSourceReviewProps): React.JSX.Element;

package/dist/{repository-DplMQiuo.js → repository-BQkADJmK.js}

@@ -1,5 +1,5 @@
 import { i as __toESM, n as init_objectSpread2, r as __commonJSMin, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
-import { t as createTwoFilesPatch } from "./libesm-OWRWzmu_.js";
+import { a as createTwoFilesPatch, i as isAssetName, n as assetsDirectoryParts, r as folderSettingsLimit, t as assetLimit } from "./project-asset-paths-KV715791.js";
 import { a as _OverloadYield, i as _wrapAsyncGenerator, o as _asyncIterator, r as createGitSmartHttp, t as GitSmartHttpError } from "./smart-http-BmHEkE7K.js";
 // node_modules/inherits/inherits_browser.js
 var require_inherits_browser = /* @__PURE__ */ __commonJSMin(((exports, module) => {
@@ -17055,7 +17055,8 @@ async function openRepository(root) {
 				after: (_b$oid = b === null || b === void 0 ? void 0 : b.oid) !== null && _b$oid !== void 0 ? _b$oid : null,
 				oldMode: (_a$mode = a === null || a === void 0 ? void 0 : a.mode) !== null && _a$mode !== void 0 ? _a$mode : null,
 				newMode: (_b$mode = b === null || b === void 0 ? void 0 : b.mode) !== null && _b$mode !== void 0 ? _b$mode : null,
-				worktree: false
+				worktree: false,
+				commit: oid
 			});
 		}
 		await assertSnapshot(snapshot);
@@ -17127,6 +17128,66 @@ async function openRepository(root) {
 			text
 		});
 	};
+	const sourceOf = async (snapshot, change, version) => {
+		if (change[version] === null) return null;
+		switch (change.group) {
+			case "staged": return version === "after" ? { kind: "index" } : snapshot.head ? {
+				kind: "tree",
+				ref: snapshot.head
+			} : null;
+			case "unstaged": return version === "after" ? { kind: "worktree" } : { kind: "index" };
+			case "untracked": return version === "after" ? { kind: "worktree" } : null;
+			case "commit": {
+				if (!change.commit) return null;
+				if (version === "after") return {
+					kind: "tree",
+					ref: change.commit
+				};
+				const parent = (await readCommit(_objectSpread2(_objectSpread2({}, options), {}, {
+					cache,
+					oid: change.commit
+				}))).commit.parent[0];
+				return parent ? {
+					kind: "tree",
+					ref: parent
+				} : null;
+			}
+		}
+	};
+	/** Reads one regular file of one version, or `null` when it is missing or larger than the limit. */
+	const readVersion = async (source, path, limit) => {
+		if (source.kind === "worktree") {
+			const stat = await fs.promises.stat("/" + path).catch(() => null);
+			if (!(stat === null || stat === void 0 ? void 0 : stat.isFile()) || stat.size > limit) return null;
+			const bytes = await readOptional(fs, "/" + path);
+			return bytes && bytes.byteLength <= limit ? bytes : null;
+		}
+		const entry = (await entries(source.kind === "tree" ? source.ref : null, path)).get(path);
+		if (!entry || entry.mode !== 33188 && entry.mode !== 33261) return null;
+		const { blob } = await readBlob(_objectSpread2(_objectSpread2({}, options), {}, {
+			cache,
+			oid: entry.oid
+		}));
+		return blob.byteLength <= limit ? blob : null;
+	};
+	const readAsset = async (snapshot, change, version, md5ext, signal) => {
+		if (signal.aborted) return null;
+		fs.clearReads();
+		await assertSnapshot(snapshot);
+		const source = await sourceOf(snapshot, change, version);
+		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;
+		const bytes = await readVersion(source, [
+			...folder,
+			...directory,
+			md5ext
+		].join("/"), assetLimit);
+		await fs.checkReads();
+		return bytes && !signal.aborted ? new Blob([bytes]) : null;
+	};
 	const directoryAt = async (path) => {
 		let directory = root;
 		for (const part of pathParts(path)) directory = await directory.getDirectoryHandle(part);
@@ -17206,7 +17267,14 @@ async function openRepository(root) {
 		}),
 		read: (scope) => serial(() => read(scope)),
 		readDiff: (snapshot, change) => serial(() => readDiff(snapshot, change)),
-		historyChanges: (snapshot, oid) => serial(() => historyChanges(snapshot, oid))
+		historyChanges: (snapshot, oid) => serial(() => historyChanges(snapshot, oid)),
+		/**
+		* Reads the assets of both versions of a selected project file, for thumbnails. Staged changes compare HEAD with
+		* the index, unstaged ones the index with the working tree, untracked ones nothing with the working tree, and
+		* 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)
 	};
 }
 export { GitPanelError as n, createReadOnlyFs as r, openRepository as t };

package/dist/repository.d.ts

@@ -1,4 +1,5 @@
 import type { GetRemoteSession, RemoteOperation } from './remote-operations.js';
+import type { ProjectAssetLoader } from './project-assets.js';
 export { createReadOnlyFs, GitPanelError } from './filesystem.js';
 export type ChangeGroup = 'staged' | 'unstaged' | 'untracked' | 'commit';
 export interface FileChange {
@@ -9,6 +10,8 @@ export interface FileChange {
     worktree: boolean;
     oldMode: number | null;
     newMode: number | null;
+    /** For `commit` changes, the commit compared with its first parent. */
+    commit?: string;
 }
 export interface Commit {
     oid: string;
@@ -57,5 +60,12 @@ export declare function openRepository(root: FileSystemDirectoryHandle): Promise
     read: (scope?: string) => Promise<Snapshot>;
     readDiff: (snapshot: Snapshot, change: FileChange) => Promise<FileDiff>;
     historyChanges: (snapshot: Snapshot, oid: string) => Promise<FileChange[]>;
+    /**
+     * Reads the assets of both versions of a selected project file, for thumbnails. Staged changes compare HEAD with
+     * the index, unstaged ones the index with the working tree, untracked ones nothing with the working tree, and
+     * 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: Snapshot, change: FileChange) => 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-DplMQiuo.js";
+export { n as GitPanelError, r as createReadOnlyFs, t as openRepository } from "./repository-BQkADJmK.js";