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

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

@@ -1,52 +1,6 @@
 import { n as init_objectSpread2, t as _objectSpread2 } from "./objectSpread2-Dkd68nJH.js";
-import { n as hasOnlyUnixLineEndings, r as hasOnlyWinLineEndings, t as createTwoFilesPatch } from "./libesm-OWRWzmu_.js";
+import { a as createTwoFilesPatch, i as isAssetName, n as assetsDirectoryParts, o as hasOnlyUnixLineEndings, r as folderSettingsLimit, s as hasOnlyWinLineEndings, t as assetLimit } from "./project-asset-paths-KV715791.js";
 import React, { useEffect, useMemo, useRef, useState } from "react";
-// src/block-diff-preview.tsx
-init_objectSpread2();
-function BlockPreview({ side, title, parts, marks, renderBlock, withContext, labels, onLocate, locationStatus }) {
-	const host = useRef(null);
-	const [status, setStatus] = useState("loading");
-	useEffect(() => {
-		if (!side || !host.current) return;
-		const container = host.current;
-		const abort = new AbortController();
-		let dispose;
-		setStatus("loading");
-		Promise.resolve().then(() => renderBlock(_objectSpread2(_objectSpread2({}, side), {}, {
-			container,
-			withContext,
-			parts,
-			marks,
-			signal: abort.signal
-		}))).then((cleanup) => {
-			if (abort.signal.aborted) cleanup === null || cleanup === void 0 || cleanup();
-			else {
-				dispose = cleanup;
-				setStatus("ready");
-			}
-		}, () => {
-			if (!abort.signal.aborted) setStatus("failed");
-		});
-		return () => {
-			abort.abort();
-			dispose === null || dispose === void 0 || dispose();
-		};
-	}, [
-		side,
-		renderBlock,
-		withContext,
-		parts,
-		marks
-	]);
-	return /* @__PURE__ */ React.createElement("div", { className: "twgit-block-diff-side" }, /* @__PURE__ */ React.createElement("h4", null, title), !side && /* @__PURE__ */ React.createElement("p", null, labels.absent), side && status === "loading" && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels.loading), side && status === "failed" && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels.unavailable), /* @__PURE__ */ React.createElement("div", {
-		ref: host,
-		className: "twgit-block-diff-preview"
-	}), side && onLocate && /* @__PURE__ */ React.createElement("button", {
-		type: "button",
-		"aria-label": `${title} · ${labels.locate}`,
-		onClick: onLocate
-	}, labels.locate), locationStatus && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels[locationStatus]));
-}
 // node_modules/diff/libesm/patch/line-endings.js
 function unixToWin(patch) {
 	if (Array.isArray(patch)) return patch.map((p) => unixToWin(p));
@@ -560,6 +514,7 @@ function applyStructuredPatch(source, patch, options = {}) {
 	return resultLines.join("\n");
 }
 // \0@oxc-project+runtime@0.156.0/helpers/esm/objectWithoutPropertiesLoose.js
+init_objectSpread2();
 function _objectWithoutPropertiesLoose(r, e) {
 	if (null == r) return {};
 	var t = {};
@@ -580,7 +535,6 @@ function _objectWithoutProperties(e, t) {
 	return i;
 }
 // src/project-source-patch.ts
-init_objectSpread2();
 var _excluded = ["blocks"];
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function readProject(source) {
@@ -698,6 +652,201 @@ function compareProjectBlocks(before, after) {
 		otherChanges: !equal(withoutBlocks(before), withoutBlocks(after))
 	};
 }
+// src/project-assets.ts
+var imageTypes = {
+	svg: "image/svg+xml",
+	png: "image/png",
+	jpg: "image/jpeg",
+	jpeg: "image/jpeg",
+	gif: "image/gif",
+	bmp: "image/bmp",
+	webp: "image/webp"
+};
+/** The costume a sprite shows, or the backdrop the stage shows, when the project data names an image file for it. */
+function currentCostume(target) {
+	const { costumes, currentCostume: index } = target;
+	if (!Array.isArray(costumes)) return null;
+	const costume = costumes[typeof index === "number" && Number.isInteger(index) && index >= 0 ? index : 0];
+	if (!isRecord(costume)) return null;
+	const md5ext = typeof costume.md5ext === "string" ? costume.md5ext : typeof costume.assetId === "string" && typeof costume.dataFormat === "string" ? costume.assetId + "." + costume.dataFormat : "";
+	const match = /^[0-9A-Za-z_-]{1,128}\.([0-9A-Za-z]{1,8})$/.exec(md5ext);
+	const type = match ? imageTypes[match[1].toLowerCase()] : void 0;
+	if (!type) return null;
+	return {
+		name: typeof costume.name === "string" ? costume.name : "",
+		md5ext,
+		type
+	};
+}
+var reads = /* @__PURE__ */ new WeakMap();
+function readAsset(loadAsset, version, md5ext) {
+	let cache = reads.get(loadAsset);
+	if (!cache) reads.set(loadAsset, cache = /* @__PURE__ */ new Map());
+	const key = version + ":" + md5ext;
+	let read = cache.get(key);
+	if (!read) {
+		read = loadAsset({
+			version,
+			md5ext,
+			signal: new AbortController().signal
+		}).catch(() => null);
+		cache.set(key, read);
+	}
+	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 : "";
+	const [image, setImage] = useState();
+	useEffect(() => {
+		if (!costume || !loadAsset) return;
+		let active = true;
+		let url;
+		readAsset(loadAsset, version, costume.md5ext).then((blob) => {
+			if (!blob || !active) return;
+			url = URL.createObjectURL(new Blob([blob], { type: costume.type }));
+			setImage({
+				key,
+				url
+			});
+		});
+		return () => {
+			active = false;
+			if (url) URL.revokeObjectURL(url);
+		};
+	}, [key, loadAsset]);
+	return (image === null || image === void 0 ? void 0 : image.key) === key ? image.url : null;
+}
+// src/block-diff-preview.tsx
+init_objectSpread2();
+function createPreviewSync() {
+	const members = /* @__PURE__ */ new Map();
+	let linked = true;
+	let moving = false;
+	const align = () => {
+		if (!linked || !members.size) return;
+		const views = [...members.keys()];
+		const fit = {
+			scale: Math.min(...views.map((view) => view.fit.scale)),
+			height: Math.max(...views.map((view) => view.fit.height))
+		};
+		for (const view of views) view.layout(fit);
+	};
+	return {
+		add(view) {
+			const stop = view.onChange(() => {
+				if (!linked || moving) return;
+				moving = true;
+				try {
+					const viewport = view.viewport();
+					for (const other of members.keys()) if (other !== view) other.setViewport(viewport);
+				} finally {
+					moving = false;
+				}
+			});
+			members.set(view, stop);
+			align();
+			return () => {
+				stop();
+				members.delete(view);
+			};
+		},
+		setLinked(value) {
+			if (linked === value) return;
+			linked = value;
+			align();
+		}
+	};
+}
+var linkLabels = {
+	en: "Move both versions together",
+	ja: "変更前と変更後を連動して動かす"
+};
+/** One sync group per comparison, with the checkbox that links or unlinks its previews. */
+function usePreviewSync(locale) {
+	const sync = useMemo(createPreviewSync, []);
+	const [linked, setLinked] = useState(true);
+	useEffect(() => sync.setLinked(linked), [sync, linked]);
+	return {
+		sync,
+		toggle: /* @__PURE__ */ React.createElement("label", { className: "twgit-block-diff-link" }, /* @__PURE__ */ React.createElement("input", {
+			type: "checkbox",
+			checked: linked,
+			onChange: (event) => setLinked(event.currentTarget.checked)
+		}), " ", locale.startsWith("ja") ? linkLabels.ja : linkLabels.en)
+	};
+}
+var rendering = (result) => typeof result === "function" ? { release: result } : {
+	release: result && (() => result.dispose()),
+	view: result === null || result === void 0 ? void 0 : result.view
+};
+function BlockPreview({ side, title, parts, marks, renderBlock, withContext, labels, onLocate, locationStatus, version, loadAsset, sync }) {
+	const host = useRef(null);
+	const watermark = useRef(null);
+	const [status, setStatus] = useState("loading");
+	const thumbnail = !!(side && version && loadAsset && currentCostume(side.target));
+	const image = useCostumeImage(thumbnail ? side.target : void 0, version !== null && version !== void 0 ? version : "after", loadAsset);
+	useEffect(() => {
+		if (!side || !host.current) return;
+		const container = host.current;
+		const abort = new AbortController();
+		let dispose;
+		setStatus("loading");
+		Promise.resolve().then(() => {
+			var _watermark$current;
+			return renderBlock(_objectSpread2(_objectSpread2({}, side), {}, {
+				container,
+				withContext,
+				parts,
+				marks,
+				signal: abort.signal,
+				watermark: thumbnail ? (_watermark$current = watermark.current) !== null && _watermark$current !== void 0 ? _watermark$current : void 0 : void 0
+			}));
+		}).then((result) => {
+			const { release, view } = rendering(result);
+			if (abort.signal.aborted) {
+				release === null || release === void 0 || release();
+				return;
+			}
+			const leave = view && (sync === null || sync === void 0 ? void 0 : sync.add(view));
+			dispose = () => {
+				leave === null || leave === void 0 || leave();
+				release === null || release === void 0 || release();
+			};
+			setStatus("ready");
+		}, () => {
+			if (!abort.signal.aborted) setStatus("failed");
+		});
+		return () => {
+			abort.abort();
+			dispose === null || dispose === void 0 || dispose();
+		};
+	}, [
+		side,
+		renderBlock,
+		withContext,
+		parts,
+		marks,
+		sync,
+		thumbnail
+	]);
+	return /* @__PURE__ */ React.createElement("div", { className: "twgit-block-diff-side" }, /* @__PURE__ */ React.createElement("h4", null, title), !side && /* @__PURE__ */ React.createElement("p", null, labels.absent), side && status === "loading" && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels.loading), side && status === "failed" && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels.unavailable), side && /* @__PURE__ */ React.createElement("div", {
+		ref: host,
+		className: "twgit-block-diff-preview"
+	}, thumbnail && /* @__PURE__ */ React.createElement("div", {
+		ref: watermark,
+		className: "twgit-block-diff-watermark",
+		"data-dockview-costume-thumbnail": ""
+	}, image && /* @__PURE__ */ React.createElement("img", {
+		src: image,
+		alt: ""
+	}))), side && onLocate && /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		"aria-label": `${title} · ${labels.locate}`,
+		onClick: onLocate
+	}, labels.locate), locationStatus && /* @__PURE__ */ React.createElement("p", { role: "status" }, labels[locationStatus]));
+}
 // src/project-source-review-model.ts
 init_objectSpread2();
 function scriptRoots(target) {
@@ -807,7 +956,9 @@ function compareProjectForReview(before, after) {
 				name,
 				isStage,
 				scripts,
-				properties
+				properties,
+				before: a,
+				after: b
 			});
 		}
 	}
@@ -823,18 +974,18 @@ var ja = {
 	checks: "確認してほしいこと",
 	files: "変更ファイル",
 	targets: "影響するステージ・スプライト",
-	scripts: "スクリプトの比較",
+	scripts: "コードの変更",
+	scriptCount: (count) => `コードの変更 · ${count} か所`,
 	reviewed: "確認済み",
-	reviewedScripts: "スクリプト確認済み",
 	before: "変更前",
 	after: "変更後",
 	updated: "変更",
 	added: "追加",
 	removed: "削除",
 	reorganized: "再編",
-	absent: "この版にはスクリプトがありません",
-	loading: "スクリプトを描画中…",
-	unavailable: "このスクリプトを描画できません。",
+	absent: "この版にはこのコードがありません",
+	loading: "コードを描画中…",
+	unavailable: "このコードを描画できません。",
 	related: "関連ファイル",
 	properties: "コード以外の変更",
 	invalid: "この作品の差分を読み込めません。",
@@ -842,7 +993,7 @@ var ja = {
 	broadcast: "を受け取ったとき",
 	key: "キーが押されたとき",
 	click: "このスプライトが押されたとき",
-	script: "スクリプト",
+	script: "コード",
 	noChanges: "作品に内容の変更はありません。",
 	comparison: "作品の変更",
 	unreadable: "作品データとして読み込めないため、テキストの差分を表示します。"
@@ -853,18 +1004,18 @@ var en = {
 	checks: "Review checklist",
 	files: "Changed files",
 	targets: "Affected stages and sprites",
-	scripts: "Script comparisons",
+	scripts: "Code changes",
+	scriptCount: (count) => `Code changes · ${count}`,
 	reviewed: "Reviewed",
-	reviewedScripts: "Reviewed scripts",
 	before: "Before",
 	after: "After",
 	updated: "Changed",
 	added: "Added",
 	removed: "Removed",
 	reorganized: "Reorganized",
-	absent: "No script in this version",
-	loading: "Rendering script…",
-	unavailable: "This script could not be rendered.",
+	absent: "No code in this version",
+	loading: "Rendering code…",
+	unavailable: "This code could not be rendered.",
 	related: "Related file",
 	properties: "Changes outside the code",
 	invalid: "This project diff could not be read.",
@@ -872,7 +1023,7 @@ var en = {
 	broadcast: "received",
 	key: "When key pressed",
 	click: "When this sprite clicked",
-	script: "Script",
+	script: "Code",
 	noChanges: "No changes to the project contents.",
 	comparison: "Project changes",
 	unreadable: "This file could not be read as project data, so its text diff is shown."
@@ -906,8 +1057,9 @@ function scriptTitle(side, labels) {
 	}
 	return typeof block.opcode === "string" ? block.opcode : labels.script;
 }
-function ScriptComparison({ script, labels, reviewed = false, setReviewed, renderBlock }) {
+function ScriptComparison({ script, labels, reviewed = false, setReviewed, renderBlock, loadAsset }) {
 	const [open, setOpen] = useState(false);
+	const { sync, toggle } = usePreviewSync(labels === ja ? "ja" : "en");
 	const status = !script.before.length ? "added" : !script.after.length ? "removed" : script.before.length !== 1 || script.after.length !== 1 ? "reorganized" : "updated";
 	const beforeTitle = script.before[0] && scriptTitle(script.before[0], labels);
 	const afterTitle = script.after[0] && scriptTitle(script.after[0], labels);
@@ -922,13 +1074,16 @@ function ScriptComparison({ script, labels, reviewed = false, setReviewed, rende
 		marks: side.marks,
 		renderBlock,
 		withContext: true,
-		labels
+		labels,
+		version,
+		loadAsset,
+		sync
 	})) : /* @__PURE__ */ React.createElement(BlockPreview, {
 		title: labels[version],
 		renderBlock,
 		withContext: true,
 		labels
-	})))), setReviewed && /* @__PURE__ */ React.createElement("label", { className: "twgit-review-checked" }, /* @__PURE__ */ React.createElement("input", {
+	})))), toggle, setReviewed && /* @__PURE__ */ React.createElement("label", { className: "twgit-review-checked" }, /* @__PURE__ */ React.createElement("input", {
 		type: "checkbox",
 		checked: reviewed,
 		onChange: (event) => setReviewed(event.currentTarget.checked)
@@ -940,12 +1095,41 @@ function propertyNames(keys, labels) {
 		return (_properties$get = (_properties$get2 = properties.get(key)) === null || _properties$get2 === void 0 ? void 0 : _properties$get2[labels === ja ? 0 : 1]) !== null && _properties$get !== void 0 ? _properties$get : key;
 	}).join(" · ");
 }
-/** Lists the changed stages and sprites of one project file, each with its script comparisons. */
-function ComparisonTargets({ comparison, labels, renderBlock, review }) {
+/**
+* The current costume (the backdrop for the stage) of each version of a target that has one. A changed costume shows
+* before → after. Nothing is shown until an image is read, so the heading falls back to the name alone.
+*/
+function TargetThumbnails({ target, labels, loadAsset }) {
+	const images = {
+		before: useCostumeImage(target.before, "before", loadAsset),
+		after: useCostumeImage(target.after, "after", loadAsset)
+	};
+	const costumes = {
+		before: target.before && currentCostume(target.before),
+		after: target.after && currentCostume(target.after)
+	};
+	const changed = !!costumes.before && !!costumes.after && costumes.before.md5ext !== costumes.after.md5ext;
+	const shown = (changed ? ["before", "after"] : [images.after ? "after" : "before"]).filter((version) => images[version]);
+	if (!shown.length) return null;
+	return /* @__PURE__ */ React.createElement("span", { className: "twgit-review-thumbnails" }, shown.map((version, index) => {
+		var _costumes$version, _costumes$version$nam, _costumes$version2;
+		return /* @__PURE__ */ React.createElement(React.Fragment, { key: version }, index > 0 && /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true" }, "→"), /* @__PURE__ */ React.createElement("img", {
+			src: images[version],
+			title: ((_costumes$version = costumes[version]) === null || _costumes$version === void 0 ? void 0 : _costumes$version.name) || void 0,
+			alt: changed ? `${labels[version]}: ${(_costumes$version$nam = (_costumes$version2 = costumes[version]) === null || _costumes$version2 === void 0 ? void 0 : _costumes$version2.name) !== null && _costumes$version$nam !== void 0 ? _costumes$version$nam : ""}` : ""
+		}));
+	}));
+}
+/** Lists the changed stages and sprites of one project file, each with its code comparisons. */
+function ComparisonTargets({ comparison, labels, renderBlock, loadAsset, review }) {
 	return /* @__PURE__ */ React.createElement(React.Fragment, null, comparison.properties.length > 0 && /* @__PURE__ */ React.createElement("p", null, labels.properties, " · ", propertyNames(comparison.properties, labels)), !comparison.targets.length && !comparison.properties.length && /* @__PURE__ */ React.createElement("p", null, labels.noChanges), comparison.targets.map((target) => /* @__PURE__ */ React.createElement("section", {
 		className: "twgit-review-target",
 		key: JSON.stringify([target.isStage, target.name])
-	}, /* @__PURE__ */ React.createElement("h5", null, target.name, target.scripts.length > 0 && /* @__PURE__ */ React.createElement("small", null, labels.scripts, " · ", target.scripts.length)), target.properties.length > 0 && /* @__PURE__ */ React.createElement("p", null, labels.properties, " · ", propertyNames(target.properties, labels)), target.scripts.map((script) => {
+	}, /* @__PURE__ */ React.createElement("h5", null, /* @__PURE__ */ React.createElement(TargetThumbnails, {
+		target,
+		labels,
+		loadAsset
+	}), target.name, target.scripts.length > 0 && /* @__PURE__ */ React.createElement("small", null, labels.scriptCount(target.scripts.length))), target.properties.length > 0 && /* @__PURE__ */ React.createElement("p", null, labels.properties, " · ", propertyNames(target.properties, labels)), target.scripts.map((script) => {
 		const key = JSON.stringify([
 			review === null || review === void 0 ? void 0 : review.file,
 			target.isStage,
@@ -957,14 +1141,15 @@ function ComparisonTargets({ comparison, labels, renderBlock, review }) {
 			script,
 			labels,
 			renderBlock,
+			loadAsset,
 			reviewed: review === null || review === void 0 ? void 0 : review.keys.has(key),
 			setReviewed: review && ((value) => review.set(key, value))
 		});
 	}))));
 }
 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 script, as the pull request review does. */
-function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fallback }) {
+/** 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 }) {
 	const labels = locale.startsWith("ja") ? ja : en;
 	const comparison = useMemo(() => {
 		try {
@@ -983,7 +1168,8 @@ function ProjectSourceComparison({ before, after, renderBlock, locale = "en", fa
 	}, /* @__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
+		renderBlock,
+		loadAsset
 	}));
 }
 function ProjectSourceReview({ title, description, verification, files, renderBlock, locale = "en" }) {
@@ -1028,13 +1214,14 @@ function ProjectSourceReview({ title, description, verification, files, renderBl
 	return /* @__PURE__ */ React.createElement("section", {
 		className: "twgit-block-diff twgit-review",
 		"aria-label": labels.review
-	}, /* @__PURE__ */ React.createElement("header", { className: "twgit-review-overview" }, /* @__PURE__ */ React.createElement("p", null, labels.review), /* @__PURE__ */ React.createElement("h2", null, title), excerpt && /* @__PURE__ */ React.createElement("p", { className: "twgit-review-description" }, excerpt), /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.files), /* @__PURE__ */ React.createElement("dd", null, entries.length)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.targets), /* @__PURE__ */ React.createElement("dd", null, targets)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.scripts), /* @__PURE__ */ React.createElement("dd", null, scripts)), scripts > 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.reviewedScripts), /* @__PURE__ */ React.createElement("dd", null, reviewed.size, " / ", scripts))), longBody && /* @__PURE__ */ React.createElement("details", { className: "twgit-review-body" }, /* @__PURE__ */ React.createElement("summary", null, labels.fullDescription), /* @__PURE__ */ React.createElement("p", { className: "twgit-review-description" }, body)), !!(verification === null || verification === void 0 ? void 0 : verification.length) && /* @__PURE__ */ React.createElement("div", { className: "twgit-review-checklist" }, /* @__PURE__ */ React.createElement("h3", null, labels.checks), /* @__PURE__ */ React.createElement("ul", null, verification.map((item, index) => /* @__PURE__ */ React.createElement("li", { key: index }, item))))), /* @__PURE__ */ React.createElement("h3", { className: "twgit-review-files-title" }, labels.files), entries.map(({ file, comparison, invalid }) => /* @__PURE__ */ React.createElement("section", {
+	}, /* @__PURE__ */ React.createElement("header", { className: "twgit-review-overview" }, /* @__PURE__ */ React.createElement("p", null, labels.review), /* @__PURE__ */ React.createElement("h2", null, title), excerpt && /* @__PURE__ */ React.createElement("p", { className: "twgit-review-description" }, excerpt), /* @__PURE__ */ React.createElement("dl", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.files), /* @__PURE__ */ React.createElement("dd", null, entries.length)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.targets), /* @__PURE__ */ React.createElement("dd", null, targets)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.scripts), /* @__PURE__ */ React.createElement("dd", null, scripts)), scripts > 0 && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("dt", null, labels.reviewed), /* @__PURE__ */ React.createElement("dd", null, reviewed.size, " / ", scripts))), longBody && /* @__PURE__ */ React.createElement("details", { className: "twgit-review-body" }, /* @__PURE__ */ React.createElement("summary", null, labels.fullDescription), /* @__PURE__ */ React.createElement("p", { className: "twgit-review-description" }, body)), !!(verification === null || verification === void 0 ? void 0 : verification.length) && /* @__PURE__ */ React.createElement("div", { className: "twgit-review-checklist" }, /* @__PURE__ */ React.createElement("h3", null, labels.checks), /* @__PURE__ */ React.createElement("ul", null, verification.map((item, index) => /* @__PURE__ */ React.createElement("li", { key: index }, item))))), /* @__PURE__ */ React.createElement("h3", { className: "twgit-review-files-title" }, labels.files), entries.map(({ file, comparison, invalid }) => /* @__PURE__ */ React.createElement("section", {
 		key: file.path,
 		className: "twgit-review-file"
 	}, /* @__PURE__ */ React.createElement("header", null, /* @__PURE__ */ React.createElement("h4", null, file.previousPath ? file.previousPath + " → " + file.path : file.path), file.summary && /* @__PURE__ */ React.createElement("p", null, file.summary)), "status" in file && /* @__PURE__ */ React.createElement("p", null, labels.related, " · ", labels[file.status]), (invalid || file.unavailable) && /* @__PURE__ */ React.createElement("p", { role: "alert" }, labels.invalid), comparison && /* @__PURE__ */ React.createElement(ComparisonTargets, {
 		comparison,
 		labels,
 		renderBlock,
+		loadAsset: "loadAsset" in file ? file.loadAsset : void 0,
 		review: {
 			file: file.path,
 			keys: reviewed,
@@ -1065,25 +1252,29 @@ function repoPath(repository) {
 var invalidResponse = () => new PullRequestError("failed");
 var emptyProject = "{\"targets\":[]}\n";
 var sourceLimit = 1048576;
-async function readText(response, limit) {
+async function readBody(response, limit, chunk) {
 	if (Number(response.headers.get("Content-Length")) > limit || !response.body) throw invalidResponse();
 	const reader = response.body.getReader();
-	const decoder = new TextDecoder("utf-8", { fatal: true });
-	const chunks = [];
 	let length = 0;
 	try {
 		for (;;) {
 			const { done, value } = await reader.read();
-			if (done) return chunks.join("") + decoder.decode();
+			if (done) return;
 			length += value.byteLength;
 			if (length > limit) throw invalidResponse();
-			chunks.push(decoder.decode(value, { stream: true }));
+			chunk(value);
 		}
 	} catch (error) {
 		reader.cancel().catch(() => {});
 		throw error;
 	}
 }
+async function readText(response, limit) {
+	const decoder = new TextDecoder("utf-8", { fatal: true });
+	const chunks = [];
+	await readBody(response, limit, (value) => chunks.push(decoder.decode(value, { stream: true })));
+	return chunks.join("") + decoder.decode();
+}
 function readSummary(value) {
 	if (!isRecord(value) || !Number.isSafeInteger(value.number) || Number(value.number) < 1 || typeof value.title !== "string") throw invalidResponse();
 	return {
@@ -1129,6 +1320,63 @@ function contentPath(path) {
 	if (parts.some((part) => !part || part === "." || part === "..")) throw invalidResponse();
 	return parts.map(encodeURIComponent).join("/");
 }
+/**
+* Reads the assets of both versions of a project file from raw.githubusercontent.com, which does not count against the
+* API rate limit. Each version's sb3-source.json names its assets directory. Every read is capped, honors both its own
+* signal and the pull request's, and resolves `null` on any failure.
+*/
+function rawAssetLoader(versions, send, review) {
+	const directories = /* @__PURE__ */ new Map();
+	const get = (url, signal) => send(url, {
+		credentials: "omit",
+		redirect: "error",
+		signal
+	});
+	const folderUrl = ({ repository, sha, path }) => "https://raw.githubusercontent.com/" + repository.split("/").map(encodeURIComponent).join("/") + "/" + sha + "/" + contentPath(path).split("/").slice(0, -1).map((part) => part + "/").join("");
+	const readDirectory = async (folder, signal) => {
+		let settings = null;
+		try {
+			var _response$body;
+			const response = await get(folder + "sb3-source.json", signal);
+			if (response.ok) settings = await readText(response, folderSettingsLimit);
+			else (_response$body = response.body) === null || _response$body === void 0 || _response$body.cancel().catch(() => {});
+		} catch (error) {
+			if (signal.aborted) throw error;
+		}
+		return assetsDirectoryParts(settings);
+	};
+	return async ({ version, md5ext, signal: own }) => {
+		const location = versions[version];
+		if (!location || !isAssetName(md5ext)) return null;
+		try {
+			const signal = AbortSignal.any([own, review]);
+			if (signal.aborted) return null;
+			const folder = folderUrl(location);
+			let directory = directories.get(version);
+			if (!directory) {
+				directory = readDirectory(folder, signal);
+				directories.set(version, directory);
+				const pending = directory;
+				pending.catch(() => {
+					if (directories.get(version) === pending) directories.delete(version);
+				});
+			}
+			const parts = await directory;
+			if (!parts || signal.aborted) return null;
+			const response = await get(folder + parts.map(encodeURIComponent).join("/") + "/" + md5ext, signal);
+			if (!response.ok) {
+				var _response$body2;
+				(_response$body2 = response.body) === null || _response$body2 === void 0 || _response$body2.cancel().catch(() => {});
+				return null;
+			}
+			const chunks = [];
+			await readBody(response, assetLimit, (value) => chunks.push(value));
+			return signal.aborted ? null : new Blob(chunks);
+		} catch (_unused) {
+			return null;
+		}
+	};
+}
 function createGitHubPullRequests(repository, send = fetch) {
 	if (!validRepository(repository)) throw invalidResponse();
 	const api = "https://api.github.com";
@@ -1193,13 +1441,26 @@ function createGitHubPullRequests(repository, send = fetch) {
 					continue;
 				}
 				try {
-					var _file$previous, _pr$head$repository;
+					var _file$previous, _pr$head$repository, _file$previous2, _pr$head$repository2;
 					if (status !== "added" && !base) throw invalidResponse();
 					const [before, after] = await Promise.all([status === "added" ? emptyProject : source(repository, (_file$previous = file.previous) !== null && _file$previous !== void 0 ? _file$previous : file.path, base, signal), status === "removed" ? emptyProject : source((_pr$head$repository = pr.head.repository) !== null && _pr$head$repository !== void 0 ? _pr$head$repository : repository, file.path, pr.head.sha, signal)]);
+					const loadAsset = rawAssetLoader({
+						before: status === "added" ? null : {
+							repository,
+							sha: base,
+							path: (_file$previous2 = file.previous) !== null && _file$previous2 !== void 0 ? _file$previous2 : file.path
+						},
+						after: status === "removed" ? null : {
+							repository: (_pr$head$repository2 = pr.head.repository) !== null && _pr$head$repository2 !== void 0 ? _pr$head$repository2 : repository,
+							sha: pr.head.sha,
+							path: file.path
+						}
+					}, send, signal);
 					files.push({
 						path: file.path,
 						previousPath: file.previous,
-						patch: createProjectSourceDiff(before, after)
+						patch: createProjectSourceDiff(before, after),
+						loadAsset
 					});
 				} catch (error) {
 					if (signal.aborted) throw error;
@@ -1372,9 +1633,93 @@ function placeholderDefinition(element, opcode, type, blockly, locale) {
 	}
 	return definition;
 }
+var defaultScale = .675;
+var padding = 16;
+var minHeight = 160;
+var maxHeight = 420;
+/**
+* Sizes a preview frame to its blocks and reports scrolling and zooming, so both versions can move together.
+* The frame keeps a gutter on the right for the zoom buttons, and for the minimap and thumbnail when present.
+*/
+function createView(workspace, blockly, surface, frame, startScale, navigation) {
+	var _bounds$x, _bounds$y, _workspace$translate, _surface$ownerDocumen;
+	const bounds = workspace.getBlocksBoundingBox();
+	const left = (_bounds$x = bounds.x) !== null && _bounds$x !== void 0 ? _bounds$x : 0, top = (_bounds$y = bounds.y) !== null && _bounds$y !== void 0 ? _bounds$y : 0;
+	const gutter = navigation ? 150 : 56;
+	const width = frame.clientWidth || 400;
+	const scale = Math.max(.25, Math.min(startScale, (width - padding - gutter) / Math.max(1, bounds.width), 388 / Math.max(1, bounds.height)));
+	const fit = {
+		scale,
+		height: Math.min(maxHeight, Math.max(minHeight, Math.ceil(bounds.height * scale + 32)))
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	const translate = (_workspace$translate = workspace.translate) === null || _workspace$translate === void 0 ? void 0 : _workspace$translate.bind(workspace);
+	let quiet = false;
+	if (translate) workspace.translate = (x, y) => {
+		translate(x, y);
+		if (!quiet) for (const listener of listeners) listener();
+	};
+	const setViewport = ({ scale, x, y }) => {
+		if (!translate) return;
+		quiet = true;
+		try {
+			var _workspace$getMetrics, _metrics$absoluteLeft, _metrics$absoluteTop, _workspace$scrollbar;
+			workspace.scale = scale;
+			workspace.scrollX = x;
+			workspace.scrollY = y;
+			const metrics = (_workspace$getMetrics = workspace.getMetrics) === null || _workspace$getMetrics === void 0 ? void 0 : _workspace$getMetrics.call(workspace);
+			translate(x + ((_metrics$absoluteLeft = metrics === null || metrics === void 0 ? void 0 : metrics.absoluteLeft) !== null && _metrics$absoluteLeft !== void 0 ? _metrics$absoluteLeft : 0), y + ((_metrics$absoluteTop = metrics === null || metrics === void 0 ? void 0 : metrics.absoluteTop) !== null && _metrics$absoluteTop !== void 0 ? _metrics$absoluteTop : 0));
+			(_workspace$scrollbar = workspace.scrollbar) === null || _workspace$scrollbar === void 0 || _workspace$scrollbar.resize();
+		} finally {
+			quiet = false;
+		}
+	};
+	const layout = ({ scale, height }) => {
+		frame.style.height = height + "px";
+		blockly.svgResize(workspace);
+		setViewport({
+			scale,
+			x: padding - left * scale,
+			y: padding - top * scale
+		});
+	};
+	layout(fit);
+	const resize = new ((_surface$ownerDocumen = surface.ownerDocument.defaultView) !== null && _surface$ownerDocumen !== void 0 ? _surface$ownerDocumen : globalThis).ResizeObserver(() => blockly.svgResize(workspace));
+	resize.observe(surface);
+	const wheel = (event) => {
+		if (!event.ctrlKey) event.stopPropagation();
+	};
+	surface.addEventListener("wheel", wheel, { capture: true });
+	return {
+		api: {
+			fit,
+			layout,
+			setViewport,
+			viewport: () => {
+				var _workspace$scale, _workspace$scrollX, _workspace$scrollY;
+				return {
+					scale: (_workspace$scale = workspace.scale) !== null && _workspace$scale !== void 0 ? _workspace$scale : fit.scale,
+					x: (_workspace$scrollX = workspace.scrollX) !== null && _workspace$scrollX !== void 0 ? _workspace$scrollX : 0,
+					y: (_workspace$scrollY = workspace.scrollY) !== null && _workspace$scrollY !== void 0 ? _workspace$scrollY : 0
+				};
+			},
+			onChange(listener) {
+				listeners.add(listener);
+				return () => listeners.delete(listener);
+			}
+		},
+		dispose() {
+			frame.style.removeProperty("height");
+			listeners.clear();
+			resize.disconnect();
+			surface.removeEventListener("wheel", wheel, { capture: true });
+			if (translate) workspace.translate = translate;
+		}
+	};
+}
 /** Use the host's Scratch VM serializer and Scratch Blocks definitions in an isolated workspace. */
 function createScratchBlocksDiffRenderer(options) {
-	return async ({ container, target, id, withContext, parts = [], marks, signal }) => {
+	return async ({ container, target, id, withContext, parts = [], marks, signal, watermark }) => {
 		var _Object$values$find;
 		const blockly = await options.getBlockly();
 		if (signal.aborted) return;
@@ -1400,11 +1745,16 @@ function createScratchBlocksDiffRenderer(options) {
 		surface.className = "twgit-block-diff-surface";
 		container.append(surface);
 		let workspace;
+		let view;
+		let navigation;
+		const cleanups = [];
 		const placeholders = [];
 		const dispose = () => {
 			const active = blockly.getMainWorkspace();
+			for (const cleanup of cleanups.splice(0)) cleanup();
 			blockly.Events.disable();
 			try {
+				navigation === null || navigation === void 0 || navigation.dispose();
 				workspace === null || workspace === void 0 || workspace.dispose();
 			} finally {
 				if (active === workspace) blockly.mainWorkspace = main;
@@ -1415,7 +1765,7 @@ function createScratchBlocksDiffRenderer(options) {
 		};
 		blockly.Events.disable();
 		try {
-			var _main$options;
+			var _main$options$zoomOpt, _main$options, _main$options2, _options$attachNaviga;
 			for (const element of Array.from(dom.querySelectorAll("block,shadow"))) {
 				var _element$getAttribute2, _options$locale;
 				const opcode = (_element$getAttribute2 = element.getAttribute("type")) !== null && _element$getAttribute2 !== void 0 ? _element$getAttribute2 : "";
@@ -1429,10 +1779,20 @@ function createScratchBlocksDiffRenderer(options) {
 				blockly.defineBlocksWithJsonArray([placeholderDefinition(element, opcode, alias, blockly, (_options$locale = options.locale) !== null && _options$locale !== void 0 ? _options$locale : container.ownerDocument.documentElement.lang)]);
 				element.setAttribute("type", alias);
 			}
+			const startScale = (_main$options$zoomOpt = main === null || main === void 0 || (_main$options = main.options) === null || _main$options === void 0 || (_main$options = _main$options.zoomOptions) === null || _main$options === void 0 ? void 0 : _main$options.startScale) !== null && _main$options$zoomOpt !== void 0 ? _main$options$zoomOpt : defaultScale;
 			workspace = blockly.inject(surface, {
 				readOnly: true,
 				sounds: false,
-				media: main === null || main === void 0 || (_main$options = main.options) === null || _main$options === void 0 ? void 0 : _main$options.pathToMedia
+				media: main === null || main === void 0 || (_main$options2 = main.options) === null || _main$options2 === void 0 ? void 0 : _main$options2.pathToMedia,
+				scrollbars: true,
+				zoom: {
+					controls: true,
+					wheel: true,
+					startScale,
+					maxScale: 4,
+					minScale: .25,
+					scaleSpeed: 1.2
+				}
 			});
 			workspace.markFocused = () => {};
 			blockly.Xml.domToWorkspace(dom, workspace);
@@ -1447,10 +1807,13 @@ function createScratchBlocksDiffRenderer(options) {
 				const changed = workspace.getBlockById(id === root ? serializedRoot : id);
 				if (changed) markBlockLocation(changed, parts);
 			}
-			const bounds = workspace.getBlocksBoundingBox();
-			surface.style.width = Math.max(100, Math.ceil(bounds.width) + 48) + "px";
-			surface.style.height = Math.max(64, Math.ceil(bounds.height) + 48) + "px";
-			blockly.svgResize(workspace);
+			view = createView(workspace, blockly, surface, container, startScale, !!options.attachNavigation);
+			cleanups.push(view.dispose);
+			navigation = (_options$attachNaviga = options.attachNavigation) === null || _options$attachNaviga === void 0 ? void 0 : _options$attachNaviga.call(options, workspace, blockly, watermark);
+			if (navigation && watermark) {
+				watermark.dataset.navigation = "";
+				cleanups.push(() => delete watermark.dataset.navigation);
+			}
 		} catch (error) {
 			dispose();
 			throw error;
@@ -1458,7 +1821,10 @@ function createScratchBlocksDiffRenderer(options) {
 			blockly.mainWorkspace = main;
 			blockly.Events.enable();
 		}
-		return dispose;
+		return {
+			dispose,
+			view: view.api
+		};
 	};
 }
-export { gitHubRepositoryFromOrigin as a, compareProjectBlocks as c, BlockPreview as d, createGitHubPullRequests as i, createProjectSourceDiff as l, createScratchBlocksDiffLocator as n, ProjectSourceComparison as o, PullRequestError as r, ProjectSourceReview as s, createScratchBlocksDiffRenderer as t, readProjectSourceDiff as u };
+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 };