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

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