diff --git a/src/App.svelte b/src/App.svelte
index 6cd1bc9f3..6b3fcff87 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -35,6 +35,7 @@
   import Explorer from './components/editors/Explorer.svelte'
   import TextEditorWindow from './components/editors/TextEditorWindow.svelte'
   import FilePreviewWindow from './components/editors/FilePreviewWindow.svelte'
+  import ImageEditorWindow from './components/editors/ImageEditorWindow.svelte'
   import { previewWindows } from './lib/fileWindows'
   import ModelPreviewWindow from './components/editors/ModelPreviewWindow.svelte'
   import DungeonMinimap from './components/play/DungeonMinimap.svelte'
@@ -387,6 +388,8 @@ import { startMusicToolbox } from './lib/musicToolbox'
 {#await import('./components/editors/CodeWorkspace.svelte') then m}<m.default />{/await}
 {/if}
 <TextEditorWindow />
+<!-- 40-image (F13): the Image editor; renders nothing until an image is opened in it -->
+<ImageEditorWindow />
 <!-- R22 round 12: ONE INSTANCE PER OPEN PREVIEW. With the multi-window pref off the list
      never holds more than one, so this renders exactly what it always did. -->
 {#each $previewWindows as w, i (w.id)}
diff --git a/src/components/editors/Explorer.svelte b/src/components/editors/Explorer.svelte
index 27a2467cb..766a0f521 100644
--- a/src/components/editors/Explorer.svelte
+++ b/src/components/editors/Explorer.svelte
@@ -4783,6 +4783,19 @@
 							}
 						]
 					: []),
+				// 40-image (F13): an image in YOUR library opens in the Image editor (crop, rotate,
+				// resize, adjust, versions). A pack item is a reference to bytes on a CDN, so it
+				// has nothing to save into — copy it into the Library first.
+				...(item.kind === 'image' && !item.packEntry && !item.dataUrl
+					? [
+							{
+								label: 'Edit image…',
+								icon: 'square-pen',
+								tooltip: 'Crop, rotate, resize and adjust it; saving updates every texture made from it',
+								action: () => import('$lib/image/imageEditor').then((m) => m.openImageEditor(item.id))
+							}
+						]
+					: []),
 				...(item.kind === 'text'
 					? [
 							{
diff --git a/src/components/editors/FilePreviewWindow.svelte b/src/components/editors/FilePreviewWindow.svelte
index 9fc3eeb1a..c1cdd84bf 100644
--- a/src/components/editors/FilePreviewWindow.svelte
+++ b/src/components/editors/FilePreviewWindow.svelte
@@ -32,7 +32,7 @@
 		stepPreview,
 		clampPreviewOpacity
 	} from '$lib/filePreview';
-	import { activeFolder, explorerFolders, itemBlob } from '$lib/explorer';
+	import { activeFolder, explorerFolders, explorerItems, itemBlob } from '$lib/explorer';
 	// R22 round 13 P3: the arrows may walk into a MOUNTED project's folder, whose files are
 	// not in the library's blob store — `volumeBlob` reads them from the saved payload.
 	import { volumeOf, volumeFolders, volumeKey, volumeBlob } from '$lib/mountedVolumes';
@@ -209,6 +209,9 @@
 	 * Users popover makes for Watch when a peer is in another scene.
 	 */
 	const opacityApplies = $derived(face === 'image' || face === 'object');
+	/** 40-image (F13): an image in YOUR library can be edited — a pack card or a mounted
+	 * project's file has no record to save into */
+	const editable = $derived(face === 'image' && !!target?.itemId && $explorerItems.some((i: any) => i.id === target?.itemId));
 	const walkId = $derived(String(target?.itemId ?? target?.folderId ?? ''));
 	const place = $derived(previewPosition($previewSiblings.entries, walkId));
 	const canPrev = $derived(!!stepPreview($previewSiblings.entries, walkId, -1));
@@ -626,6 +629,16 @@
 				<button class="ui-button-quiet" title="Zoom in" onclick={() => (zoom = clamp(zoom * 1.25))}>＋</button>
 				<button class="ui-button-quiet" title="Reset" onclick={() => ((zoom = 1), (panX = 0), (panY = 0))}>1:1</button>
 			{/if}
+			{#if editable}
+				<button
+					id="preview-edit"
+					class="ui-button-quiet"
+					title="Edit image — crop, rotate, resize, adjust"
+					aria-label="Edit image"
+					onclick={() => import('$lib/image/imageEditor').then((m) => m.openImageEditor(String(target?.itemId)))}
+					><Icon name="square-pen" size={16} aria-hidden="true" /></button
+				>
+			{/if}
 			<button
 				id="preview-cog"
 				class="ui-button-quiet {cogOpen ? 'pv-cog-on' : ''}"
diff --git a/src/components/editors/ImageEditorWindow.svelte b/src/components/editors/ImageEditorWindow.svelte
new file mode 100644
index 000000000..35d9edb24
--- /dev/null
+++ b/src/components/editors/ImageEditorWindow.svelte
@@ -0,0 +1,1111 @@
+<script>
+	// 40-image (roadmap 40 F13) — THE IMAGE EDITOR. The UV editor's shape (WindowShell: a
+	// canvas you zoom and pan, a right-hand sidebar) holding an Explorer image: crop,
+	// rotate/flip, resize and brightness/contrast/saturation, then Save (same file, every
+	// texture made from it follows), Save as copy, and the image's own version history with
+	// Restore original. The pixel maths is `$lib/image/imageOps` (pure, vitest-covered) and
+	// what a save does to the library and the scene is `$lib/image/imageEditor`.
+	//
+	// TWO KINDS OF EDIT, deliberately: crop / rotate / flip / resize are APPLIED — the
+	// working image changes and the editor's own undo stack holds the one before — while
+	// the three adjustments are LIVE sliders over the working image, baked only at Save. A
+	// slider you can drag back to zero is easier than an Apply you have to undo, and
+	// adjusting after a crop must not need the crop re-done.
+	//
+	// The editor's undo (Ctrl+Z / Ctrl+Shift+Z) is LOCAL to the window and never touches the
+	// scene's history: an unsaved edit is not scene state. Save is the step that reaches the
+	// scene, and the material re-texturing it does is ONE scene undo entry.
+	import { tick, untrack } from 'svelte';
+	import Icon from '../ui/Icon.svelte';
+	import UiButton from '../ui/Button.svelte';
+	import Segmented from '../ui/Segmented.svelte';
+	import SliderRow from '../ui/SliderRow.svelte';
+	import DragRow from '../ui/DragRow.svelte';
+	import Toggle from '../ui/Toggle.svelte';
+	import WindowChrome from '../ui/WindowChrome.svelte';
+	import WindowShell from '../shared/WindowShell.svelte';
+	import ScrollStrip from '../ui/ScrollStrip.svelte';
+	import { dragWindow } from '$lib/dragWindow';
+	import { focusStack } from '$lib/windowFocus';
+	import { tabbable } from '$lib/windowTabs';
+	import { explorerItems, hiddenItems, itemBlob } from '$lib/explorer';
+	import { showToast } from '../../stores/appStore';
+	import { showChoice } from '$lib/confirmDialog';
+	import {
+		imageEditorTarget,
+		closeImageEditor,
+		openImageEditor,
+		decodeImage,
+		encodeImage,
+		rasterCanvas,
+		saveImage,
+		saveImageCopy,
+		restoreImageVersion
+	} from '$lib/image/imageEditor';
+	import { listImageVersions, imageVersionsTick } from '$lib/image/imageVersions';
+	import {
+		cropRaster,
+		rotateRaster,
+		flipRaster,
+		resizeRaster,
+		adjustRaster,
+		isIdentityAdjust,
+		clampRect,
+		aspectRect,
+		fitSize,
+		nearestPow2,
+		encodingFor,
+		MAX_SIDE
+	} from '$lib/image/imageOps';
+	import { texturesFromSource } from '$lib/materialsHandler';
+
+	/** @typedef {import('$lib/image/imageOps').Raster} Raster */
+
+	const target = $derived($imageEditorTarget);
+	const item = $derived.by(() => {
+		const id = target?.itemId;
+		if (!id) return null;
+		return $explorerItems.find((i) => i.id === id) ?? $hiddenItems.find((i) => i.id === id) ?? null;
+	});
+
+	/** the image as the editor is working on it (crop/rotate/resize applied) */
+	let work = $state.raw(/** @type {Raster | null} */ (null));
+	let undoStack = $state.raw(/** @type {Raster[]} */ ([]));
+	let redoStack = $state.raw(/** @type {Raster[]} */ ([]));
+	const UNDO_CAP = 24;
+	let brightness = $state(0);
+	let contrast = $state(0);
+	let saturation = $state(0);
+	let loading = $state(false);
+	let saving = $state(false);
+	let loadError = $state('');
+	/** what the file was decoded from: its mime type, for re-encoding in the same format */
+	let sourceType = $state('');
+	/** the record hash the working image was loaded from — a save elsewhere changes it */
+	let loadedHash = '';
+	let loadedFor = '';
+
+	const adjust = $derived({ brightness, contrast, saturation });
+	const adjusted = $derived(!isIdentityAdjust(adjust));
+	const dirty = $derived(undoStack.length > 0 || adjusted);
+	const encoding = $derived(item ? encodingFor(item.name, sourceType) : { type: 'image/png', name: '' });
+	const formatLabel = $derived(encoding.type.replace('image/', '').toUpperCase().replace('JPEG', 'JPG'));
+	const usedBy = $derived.by(() => {
+		void $explorerItems;
+		return item ? texturesFromSource(item.hash).length : 0;
+	});
+
+	// ---- load ---------------------------------------------------------------------------
+	$effect(() => {
+		const it = item;
+		if (!it) return;
+		// a new image, or this image's bytes changed under us (a save, a restore, a peer)
+		if (it.id === loadedFor && it.hash === loadedHash) return;
+		untrack(() => void load(it));
+	});
+
+	/** @param {any} it */
+	async function load(it) {
+		const reopen = it.id === loadedFor;
+		loadedFor = it.id;
+		loadedHash = it.hash;
+		loading = true;
+		loadError = '';
+		try {
+			const blob = await itemBlob(it.id);
+			if (!blob) throw new Error('missing');
+			sourceType = blob.type;
+			const raster = await decodeImage(blob);
+			if (loadedFor !== it.id) return; // another image was asked for meanwhile
+			work = raster;
+			undoStack = [];
+			redoStack = [];
+			brightness = contrast = saturation = 0;
+			resetResizeFields();
+			cropping = false;
+			if (!reopen) fit();
+		} catch {
+			loadError = 'This image could not be read on this device.';
+			work = null;
+		} finally {
+			loading = false;
+		}
+	}
+
+	// ---- the editor's own undo ----------------------------------------------------------
+	/** @param {Raster} next */
+	function commit(next) {
+		if (!work) return;
+		undoStack = [...undoStack, work].slice(-UNDO_CAP);
+		redoStack = [];
+		work = next;
+		resetResizeFields();
+	}
+	function undo() {
+		if (!undoStack.length || !work) return;
+		redoStack = [...redoStack, work];
+		work = undoStack[undoStack.length - 1];
+		undoStack = undoStack.slice(0, -1);
+		resetResizeFields();
+		cropping = false;
+	}
+	function redo() {
+		if (!redoStack.length || !work) return;
+		undoStack = [...undoStack, work];
+		work = redoStack[redoStack.length - 1];
+		redoStack = redoStack.slice(0, -1);
+		resetResizeFields();
+		cropping = false;
+	}
+
+	// ---- transforms ---------------------------------------------------------------------
+	/** @param {number} q */
+	function rotate(q) {
+		if (work) commit(rotateRaster(work, q));
+	}
+	/** @param {'h' | 'v'} axis */
+	function flip(axis) {
+		if (work) commit(flipRaster(work, axis));
+	}
+
+	// crop
+	let cropping = $state(false);
+	let aspect = $state('free');
+	/** @type {{x: number, y: number, w: number, h: number}} */
+	let crop = $state({ x: 0, y: 0, w: 1, h: 1 });
+	const aspectRatio = $derived(
+		aspect === 'square' ? 1 : aspect === 'original' && work ? work.width / work.height : 0
+	);
+	const ASPECTS = [
+		{ value: 'free', label: 'Free' },
+		{ value: 'square', label: '1:1' },
+		{ value: 'original', label: 'Original' }
+	];
+	function startCrop() {
+		if (!work) return;
+		cropping = true;
+		crop = aspectRatio ? aspectRect(work.width, work.height, aspectRatio) : { x: 0, y: 0, w: work.width, h: work.height };
+		wrapEl?.focus();
+		// the crop fields + Apply appear UNDER the button that opened them; on a phone's short
+		// stacked panel that was half under the bottom bar, so bring them into the panel's view
+		tick().then(() => document.getElementById('image-editor-crop-apply')?.scrollIntoView({ block: 'nearest' }));
+	}
+	/** @param {string} next */
+	function setAspect(next) {
+		aspect = next;
+		if (cropping && work) {
+			const r = next === 'square' ? 1 : next === 'original' ? work.width / work.height : 0;
+			if (r) crop = aspectRect(work.width, work.height, r);
+		}
+	}
+	function applyCrop() {
+		if (!work || !cropping) return;
+		const r = clampRect(crop, work.width, work.height);
+		cropping = false;
+		if (r.x === 0 && r.y === 0 && r.w === work.width && r.h === work.height) return;
+		commit(cropRaster(work, r));
+	}
+	/** @param {Partial<typeof crop>} patch */
+	function setCrop(patch) {
+		if (!work) return;
+		crop = clampRect({ ...crop, ...patch }, work.width, work.height);
+	}
+
+	// resize
+	let rw = $state(1);
+	let rh = $state(1);
+	let lockRatio = $state(true);
+	function resetResizeFields() {
+		if (!work) return;
+		rw = work.width;
+		rh = work.height;
+	}
+	/** @param {number} v */
+	function setRw(v) {
+		rw = Math.min(Math.max(Math.round(v), 1), MAX_SIDE);
+		if (lockRatio && work) rh = Math.min(Math.max(Math.round((rw * work.height) / work.width), 1), MAX_SIDE);
+	}
+	/** @param {number} v */
+	function setRh(v) {
+		rh = Math.min(Math.max(Math.round(v), 1), MAX_SIDE);
+		if (lockRatio && work) rw = Math.min(Math.max(Math.round((rh * work.width) / work.height), 1), MAX_SIDE);
+	}
+	/** @param {number} factor */
+	function scaleBy(factor) {
+		if (!work) return;
+		setRw(work.width * factor);
+		if (!lockRatio) setRh(work.height * factor);
+	}
+	function toPow2() {
+		if (!work) return;
+		rw = nearestPow2(work.width);
+		rh = nearestPow2(work.height);
+	}
+	const resizeChanged = $derived(!!work && (rw !== work.width || rh !== work.height));
+	function applyResize() {
+		if (!work || !resizeChanged) return;
+		commit(resizeRaster(work, rw, rh));
+	}
+
+	function resetAdjust() {
+		brightness = contrast = saturation = 0;
+	}
+
+	// ---- save ----------------------------------------------------------------------------
+	function baked() {
+		return work && adjusted ? adjustRaster(work, adjust) : work;
+	}
+	async function save() {
+		const r = baked();
+		if (!r || !item || saving || !dirty) return;
+		saving = true;
+		try {
+			const blob = await encodeImage(r, encoding);
+			const res = await saveImage(item.id, blob, { raster: r });
+			if (!res) return;
+			// the new bytes are now the starting point; the effect would reload them anyway,
+			// but doing it here keeps the view where it is instead of re-fitting
+			loadedHash = res.record?.hash ?? loadedHash;
+			work = r;
+			undoStack = [];
+			redoStack = [];
+			resetAdjust();
+			sourceType = blob.type;
+			showToast(
+				'Saved ' + item.name + (res.textures ? ' — updated ' + res.textures + ' texture' + (res.textures === 1 ? '' : 's') : '')
+			);
+		} catch {
+			showToast('Could not save the image');
+		} finally {
+			saving = false;
+		}
+	}
+	async function saveCopy() {
+		const r = baked();
+		if (!r || !item || saving) return;
+		saving = true;
+		try {
+			const blob = await encodeImage(r, encoding);
+			const record = await saveImageCopy(item.id, blob);
+			if (!record) return;
+			showToast('Saved a copy: ' + record.name);
+			// keep editing the copy — the original is untouched, and that is the point
+			loadedFor = '';
+			openImageEditor(record.id);
+		} catch {
+			showToast('Could not save the copy');
+		} finally {
+			saving = false;
+		}
+	}
+
+	// ---- versions --------------------------------------------------------------------------
+	let versions = $state.raw(/** @type {import('$lib/image/imageVersions').ImageVersion[]} */ ([]));
+	$effect(() => {
+		void $imageVersionsTick;
+		const id = item?.id;
+		const hash = item?.hash;
+		if (!id) return;
+		void hash;
+		listImageVersions(id).then((list) => {
+			if (item?.id === id) versions = list;
+		});
+	});
+	/** @param {string} hash @param {string} label */
+	async function restore(hash, label) {
+		if (!item) return;
+		if (dirty) {
+			const go = await showChoice({
+				title: 'Discard unsaved edits?',
+				message: 'Restoring "' + label + '" replaces the image and drops the edits you have not saved.',
+				choices: [{ value: 'restore', label: 'Restore ' + label }],
+				cancelLabel: 'Keep editing'
+			});
+			if (go !== 'restore') return;
+		}
+		saving = true;
+		try {
+			const res = await restoreImageVersion(item.id, hash);
+			if (res)
+				showToast(
+					'Restored ' + label + (res.textures ? ' — updated ' + res.textures + ' texture' + (res.textures === 1 ? '' : 's') : '')
+				);
+		} finally {
+			saving = false;
+		}
+	}
+	/** @param {number} at */
+	const when = (at) => new Date(at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+	/** @param {number} b */
+	const bytes = (b) => (b < 1048576 ? Math.max(1, Math.round(b / 1024)) + ' KB' : (b / 1048576).toFixed(1) + ' MB');
+
+	async function close() {
+		if (dirty) {
+			const go = await showChoice({
+				title: 'Close without saving?',
+				message: 'Your edits to ' + (item?.name ?? 'this image') + ' are not saved.',
+				choices: [{ value: 'close', label: 'Discard and close' }],
+				cancelLabel: 'Keep editing'
+			});
+			if (go !== 'close') return;
+		}
+		loadedFor = '';
+		work = null;
+		closeImageEditor();
+	}
+
+	// ---- the view: zoom, pan, draw -------------------------------------------------------
+	let wrapEl = $state(/** @type {HTMLDivElement | null} */ (null));
+	let canvasEl = $state(/** @type {HTMLCanvasElement | null} */ (null));
+	let viewW = $state(400);
+	let viewH = $state(300);
+	let zoom = $state(1);
+	let panX = $state(0);
+	let panY = $state(0);
+	const fitScale = $derived(work ? Math.min((viewW - 24) / work.width, (viewH - 24) / work.height) : 1);
+	const scale = $derived(fitScale * zoom);
+	const originX = $derived(work ? (viewW - work.width * scale) / 2 + panX : 0);
+	const originY = $derived(work ? (viewH - work.height * scale) / 2 + panY : 0);
+	/** image px -> view px */
+	const sx = (/** @type {number} */ x) => originX + x * scale;
+	const sy = (/** @type {number} */ y) => originY + y * scale;
+	/** view px -> image px */
+	const ix = (/** @type {number} */ x) => (x - originX) / scale;
+	const iy = (/** @type {number} */ y) => (y - originY) / scale;
+
+	function fit() {
+		zoom = 1;
+		panX = 0;
+		panY = 0;
+	}
+	/** 1 screen pixel = 1 image pixel */
+	function actualSize() {
+		zoom = 1 / (fitScale || 1);
+		panX = 0;
+		panY = 0;
+	}
+	/** zoom about a view point, keeping the image pixel under it put
+	 * @param {number} factor @param {number} [cx] @param {number} [cy] */
+	function zoomAt(factor, cx = viewW / 2, cy = viewH / 2) {
+		if (!work) return;
+		const px = ix(cx);
+		const py = iy(cy);
+		const next = Math.min(Math.max(zoom * factor, 0.1), 64);
+		zoom = next;
+		const s = fitScale * next;
+		// solve originX + px * s === cx for panX
+		panX = cx - px * s - (viewW - work.width * s) / 2;
+		panY = cy - py * s - (viewH - work.height * s) / 2;
+	}
+
+	/**
+	 * What is drawn: the working image with the live adjustment. A big image is adjusted
+	 * on a screen-sized copy while the sliders move (a 4K raster per tick would stutter),
+	 * and Save always bakes the full one — the two are the same function on the same input.
+	 */
+	const PREVIEW_MAX = 2048;
+	const previewBase = $derived.by(() => {
+		if (!work) return null;
+		const fit = fitSize(work.width, work.height, PREVIEW_MAX, PREVIEW_MAX);
+		return fit.scale < 1 ? resizeRaster(work, fit.width, fit.height) : work;
+	});
+	let shown = $state.raw(/** @type {HTMLCanvasElement | null} */ (null));
+	let adjustFrame = 0;
+	$effect(() => {
+		const base = previewBase;
+		const a = adjust;
+		cancelAnimationFrame(adjustFrame);
+		if (!base) {
+			shown = null;
+			return;
+		}
+		adjustFrame = requestAnimationFrame(() => {
+			shown = rasterCanvas(isIdentityAdjust(a) ? base : adjustRaster(base, a));
+		});
+	});
+
+	$effect(() => {
+		void [shown, viewW, viewH, zoom, panX, panY, cropping, crop, work];
+		draw();
+	});
+
+	function draw() {
+		const c = canvasEl;
+		if (!c) return;
+		const dpr = window.devicePixelRatio || 1;
+		const W = Math.max(1, Math.round(viewW * dpr));
+		const H = Math.max(1, Math.round(viewH * dpr));
+		if (c.width !== W) c.width = W;
+		if (c.height !== H) c.height = H;
+		const ctx = c.getContext('2d');
+		if (!ctx) return;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, viewW, viewH);
+		if (!work || !shown) return;
+		const x = sx(0);
+		const y = sy(0);
+		const w = work.width * scale;
+		const h = work.height * scale;
+		// transparency checker under the picture
+		const css = getComputedStyle(c);
+		const a = css.getPropertyValue('--surface-2').trim() || '#2a2f3a'; // tokens-ok: canvas fallback if the token is unset
+		const b = css.getPropertyValue('--surface-3').trim() || '#343a46'; // tokens-ok: canvas fallback if the token is unset
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(x, y, w, h);
+		ctx.clip();
+		const cell = 10;
+		for (let gy = Math.floor(y / cell) * cell; gy < y + h; gy += cell)
+			for (let gx = Math.floor(x / cell) * cell; gx < x + w; gx += cell) {
+				ctx.fillStyle = (Math.floor(gx / cell) + Math.floor(gy / cell)) % 2 ? a : b;
+				ctx.fillRect(gx, gy, cell, cell);
+			}
+		ctx.restore();
+		ctx.imageSmoothingEnabled = scale < 2;
+		ctx.imageSmoothingQuality = 'high';
+		ctx.drawImage(shown, x, y, w, h);
+		if (cropping) {
+			const cx = sx(crop.x);
+			const cy = sy(crop.y);
+			const cw = crop.w * scale;
+			const ch = crop.h * scale;
+			ctx.fillStyle = 'rgba(0, 0, 0, 0.55)'; // tokens-ok: canvas scrim outside the crop box
+			ctx.beginPath();
+			ctx.rect(x, y, w, h);
+			ctx.rect(cx, cy, cw, ch);
+			ctx.fill('evenodd');
+			const accent = css.getPropertyValue('--accent').trim() || '#e8916a'; // tokens-ok: canvas fallback if the token is unset
+			ctx.strokeStyle = accent;
+			ctx.lineWidth = 1.5;
+			ctx.strokeRect(cx + 0.5, cy + 0.5, cw - 1, ch - 1);
+			// rule-of-thirds guides
+			ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)'; // tokens-ok: canvas thirds guides over the picture
+			ctx.lineWidth = 1;
+			ctx.beginPath();
+			for (const f of [1 / 3, 2 / 3]) {
+				ctx.moveTo(cx + cw * f, cy);
+				ctx.lineTo(cx + cw * f, cy + ch);
+				ctx.moveTo(cx, cy + ch * f);
+				ctx.lineTo(cx + cw, cy + ch * f);
+			}
+			ctx.stroke();
+			ctx.fillStyle = accent;
+			for (const [hx, hy] of cropHandles()) ctx.fillRect(hx - 5, hy - 5, 10, 10);
+		}
+	}
+
+	/** the four corner handles of the crop box, in view px, in [nw, ne, sw, se] order */
+	function cropHandles() {
+		const x0 = sx(crop.x);
+		const y0 = sy(crop.y);
+		const x1 = sx(crop.x + crop.w);
+		const y1 = sy(crop.y + crop.h);
+		return [
+			[x0, y0],
+			[x1, y0],
+			[x0, y1],
+			[x1, y1]
+		];
+	}
+
+	/** @type {Map<number, {x: number, y: number}>} */
+	const pointers = new Map();
+	/** @type {null | {kind: 'pan' | 'pinch' | 'new' | 'move' | 'corner', corner?: number, sx: number, sy: number, crop: typeof crop, panX: number, panY: number, zoom: number, dist?: number, mid?: {x: number, y: number}}} */
+	let gesture = null;
+
+	/** @param {PointerEvent} e */
+	function local(e) {
+		const r = /** @type {HTMLElement} */ (wrapEl).getBoundingClientRect();
+		return { x: e.clientX - r.left, y: e.clientY - r.top };
+	}
+
+	/** @param {PointerEvent} e */
+	function onPointerDown(e) {
+		if (!work) return;
+		wrapEl?.focus();
+		const p = local(e);
+		pointers.set(e.pointerId, p);
+		/** @type {HTMLElement} */ (e.currentTarget).setPointerCapture(e.pointerId);
+		const base = { sx: p.x, sy: p.y, crop: { ...crop }, panX, panY, zoom };
+		if (pointers.size === 2) {
+			// a second finger turns whatever was happening into a pinch
+			const [a, b] = [...pointers.values()];
+			gesture = { kind: 'pinch', ...base, dist: Math.hypot(a.x - b.x, a.y - b.y), mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 } };
+			return;
+		}
+		if (e.button === 1 || e.button === 2 || !cropping) {
+			gesture = { kind: 'pan', ...base };
+			return;
+		}
+		const corner = cropHandles().findIndex(([hx, hy]) => Math.abs(hx - p.x) <= 12 && Math.abs(hy - p.y) <= 12);
+		if (corner >= 0) gesture = { kind: 'corner', corner, ...base };
+		else {
+			const inside = p.x >= sx(crop.x) && p.x <= sx(crop.x + crop.w) && p.y >= sy(crop.y) && p.y <= sy(crop.y + crop.h);
+			// a box still covering the whole picture has nowhere to move: a drag in it DRAWS a new one
+			const whole = crop.w >= work.width && crop.h >= work.height;
+			gesture = { kind: inside && !whole ? 'move' : 'new', ...base };
+		}
+		e.preventDefault();
+	}
+
+	/** @param {PointerEvent} e */
+	function onPointerMove(e) {
+		if (!pointers.has(e.pointerId) || !gesture || !work) return;
+		const p = local(e);
+		pointers.set(e.pointerId, p);
+		const g = gesture;
+		if (g.kind === 'pinch') {
+			const pts = [...pointers.values()];
+			if (pts.length < 2 || !g.dist || !g.mid) return;
+			const [a, b] = pts;
+			const d = Math.hypot(a.x - b.x, a.y - b.y);
+			const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+			zoom = g.zoom;
+			panX = g.panX + (mid.x - g.mid.x);
+			panY = g.panY + (mid.y - g.mid.y);
+			zoomAt(d / g.dist, mid.x, mid.y);
+			return;
+		}
+		const dx = p.x - g.sx;
+		const dy = p.y - g.sy;
+		if (g.kind === 'pan') {
+			panX = g.panX + dx;
+			panY = g.panY + dy;
+			return;
+		}
+		const ddx = dx / scale;
+		const ddy = dy / scale;
+		if (g.kind === 'move') {
+			const x = Math.min(Math.max(g.crop.x + ddx, 0), work.width - g.crop.w);
+			const y = Math.min(Math.max(g.crop.y + ddy, 0), work.height - g.crop.h);
+			crop = { ...g.crop, x: Math.round(x), y: Math.round(y) };
+			return;
+		}
+		// 'new' drags out from the press point; 'corner' drags one corner with the opposite fixed
+		let ax, ay, bx, by;
+		if (g.kind === 'new') {
+			ax = ix(g.sx);
+			ay = iy(g.sy);
+			bx = ix(p.x);
+			by = iy(p.y);
+		} else {
+			const c = g.crop;
+			const left = g.corner === 0 || g.corner === 2;
+			const top = g.corner === 0 || g.corner === 1;
+			ax = left ? c.x + c.w : c.x;
+			ay = top ? c.y + c.h : c.y;
+			bx = (left ? c.x : c.x + c.w) + ddx;
+			by = (top ? c.y : c.y + c.h) + ddy;
+		}
+		bx = Math.min(Math.max(bx, 0), work.width);
+		by = Math.min(Math.max(by, 0), work.height);
+		let w = bx - ax;
+		let h = by - ay;
+		if (aspectRatio) {
+			// hold the ratio by the longer pull, then keep it inside the image
+			const sw = Math.sign(w) || 1;
+			const sh = Math.sign(h) || 1;
+			let aw = Math.abs(w);
+			let ah = Math.abs(h);
+			if (aw / aspectRatio > ah) ah = aw / aspectRatio;
+			else aw = ah * aspectRatio;
+			const maxW = sw > 0 ? work.width - ax : ax;
+			const maxH = sh > 0 ? work.height - ay : ay;
+			const k = Math.min(1, maxW / aw, maxH / ah);
+			w = sw * aw * k;
+			h = sh * ah * k;
+		}
+		crop = clampRect({ x: ax, y: ay, w, h }, work.width, work.height);
+	}
+
+	/** @param {PointerEvent} e */
+	function onPointerUp(e) {
+		pointers.delete(e.pointerId);
+		if (pointers.size === 0) gesture = null;
+		else if (gesture?.kind === 'pinch') {
+			const [rest] = [...pointers.values()];
+			gesture = { kind: 'pan', sx: rest.x, sy: rest.y, crop: { ...crop }, panX, panY, zoom };
+		}
+	}
+
+	/** A panel switched in (Edit <-> Versions) starts at its top: the sidebar's scroller is
+	 *  SHARED by both, so it kept the Edit panel's offset and a short Versions list sat
+	 *  scrolled out of view (measured on a phone: rows 200 px above the visible area).
+	 *  @param {HTMLElement} node */
+	function fromTop(node) {
+		let el = node.parentElement;
+		while (el && !/auto|scroll/.test(getComputedStyle(el).overflowY)) el = el.parentElement;
+		if (el) el.scrollTop = 0;
+	}
+
+	/** wheel zoom about the cursor — a DIRECT non-passive listener, or the page zooms instead
+	 * @param {HTMLElement} node */
+	function surface(node) {
+		const onWheel = (/** @type {WheelEvent} */ e) => {
+			e.preventDefault();
+			const r = node.getBoundingClientRect();
+			zoomAt(e.deltaY < 0 ? 1.12 : 1 / 1.12, e.clientX - r.left, e.clientY - r.top);
+		};
+		const onMenu = (/** @type {Event} */ e) => e.preventDefault();
+		const ro = new ResizeObserver(() => {
+			// a hidden window measures zero: keep the last real size (the zero-is-not-a-width rule)
+			if (node.clientWidth > 0) viewW = node.clientWidth;
+			if (node.clientHeight > 0) viewH = node.clientHeight;
+		});
+		ro.observe(node);
+		node.addEventListener('wheel', onWheel, { passive: false });
+		node.addEventListener('contextmenu', onMenu);
+		return {
+			destroy() {
+				ro.disconnect();
+				node.removeEventListener('wheel', onWheel);
+				node.removeEventListener('contextmenu', onMenu);
+			}
+		};
+	}
+
+	/**
+	 * The window's keys, in CAPTURE on its own root (panel chrome swallows delegated
+	 * handlers): Ctrl+Z/Y are the EDITOR's undo and must not also undo the scene, Ctrl+S
+	 * saves, Enter applies a crop and Escape cancels one.
+	 * @param {HTMLElement} node */
+	function ownKeys(node) {
+		const onKey = (/** @type {KeyboardEvent} */ e) => {
+			const el = /** @type {HTMLElement} */ (e.target);
+			const typing = el?.tagName === 'INPUT' || el?.tagName === 'TEXTAREA' || el?.isContentEditable;
+			const mod = e.ctrlKey || e.metaKey;
+			const stop = () => {
+				e.preventDefault();
+				e.stopPropagation();
+			};
+			if (mod && e.code === 'KeyS') return stop(), void save();
+			if (typing) return;
+			if (mod && e.code === 'KeyZ') return stop(), e.shiftKey ? redo() : undo();
+			if (mod && e.code === 'KeyY') return stop(), redo();
+			if (cropping && e.key === 'Enter') return stop(), applyCrop();
+			if (cropping && e.key === 'Escape') return stop(), void (cropping = false);
+			if (e.key === 'Escape') return stop(), void close();
+			if (!mod && (e.key === '+' || e.key === '=')) return stop(), zoomAt(1.25);
+			if (!mod && e.key === '-') return stop(), zoomAt(1 / 1.25);
+			if (!mod && e.key === '0') return stop(), fit();
+		};
+		node.addEventListener('keydown', onKey, true);
+		return { destroy: () => node.removeEventListener('keydown', onKey, true) };
+	}
+
+	// come forward when asked for again
+	let winEl = $state(/** @type {HTMLDivElement | null} */ (null));
+	$effect(() => {
+		void target?.raise;
+		if (winEl) untrack(() => winEl?.focus?.());
+	});
+</script>
+
+{#snippet versionsPanel()}
+	<div class="ie-pane" id="image-editor-history" use:fromTop>
+		{#if versions.length && item}
+			{@const original = versions[0]}
+			<div class="ie-row">
+				<UiButton
+					id="image-editor-restore-original"
+					size="sm"
+					variant="outline"
+					icon="history"
+					full
+					disabled={saving || original.hash === item.hash}
+					title={original.hash === item.hash ? 'This image is already the original' : 'Put the original image back (your edits stay in this list)'}
+					onclick={() => restore(original.hash, 'Original')}>Restore original</UiButton
+				>
+			</div>
+			<ul class="ie-versions">
+				{#each [...versions].reverse() as v (v.hash)}
+					{@const current = v.hash === item.hash}
+					<li class="ie-version" class:ie-version-current={current} data-version={v.hash}>
+						{#if v.thumb}<img src={v.thumb} alt="" class="ie-version-thumb" />{:else}<span class="ie-version-thumb"></span>{/if}
+						<div class="ie-version-text">
+							<span class="ie-version-label">{v.label}{current ? ' · current' : ''}</span>
+							<span class="ie-version-meta">{when(v.at)}{v.width ? ' · ' + v.width + '×' + v.height : ''} · {bytes(v.size)}</span>
+						</div>
+						{#if !current}
+							<UiButton size="sm" variant="ghost" disabled={saving} onclick={() => restore(v.hash, v.label)}>Restore</UiButton>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+			<p class="ie-note">Kept on this device: the original and the last {19} saves. Peers get the saved image, not this list.</p>
+		{:else}
+			<p class="ie-note">No saved versions yet. The first Save keeps the original here, so you can always go back to it.</p>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet editPanel()}
+	<div class="ie-pane" id="image-editor-tools" use:fromTop>
+		<div class="ie-section">
+			<div class="ui-section-label">Rotate and flip</div>
+			<div class="ie-buttons">
+				<UiButton id="image-editor-rotate-ccw" variant="icon" size="sm" icon="rotate-ccw" label="Rotate left 90°" title="Rotate left 90°" disabled={!work} onclick={() => rotate(-1)} />
+				<UiButton id="image-editor-rotate-cw" variant="icon" size="sm" icon="rotate-cw" label="Rotate right 90°" title="Rotate right 90°" disabled={!work} onclick={() => rotate(1)} />
+				<UiButton id="image-editor-flip-h" variant="icon" size="sm" icon="flip-horizontal" label="Flip horizontally" title="Flip horizontally (mirror left and right)" disabled={!work} onclick={() => flip('h')} />
+				<UiButton id="image-editor-flip-v" variant="icon" size="sm" icon="flip-vertical" label="Flip vertically" title="Flip vertically (upside down)" disabled={!work} onclick={() => flip('v')} />
+			</div>
+		</div>
+
+		<div class="ie-section">
+			<div class="ui-section-label">Crop</div>
+			<Segmented id="image-editor-aspect" label="Crop shape" options={ASPECTS} value={aspect} onchange={setAspect} full />
+			{#if cropping}
+				<div class="ie-grid">
+					<DragRow id="image-editor-crop-x" label="X" value={crop.x} step={1} decimals={0} min={0} onchange={(v) => setCrop({ x: v })} />
+					<DragRow id="image-editor-crop-y" label="Y" value={crop.y} step={1} decimals={0} min={0} onchange={(v) => setCrop({ y: v })} />
+					<DragRow id="image-editor-crop-w" label="W" value={crop.w} step={1} decimals={0} min={1} onchange={(v) => setCrop({ w: v })} />
+					<DragRow id="image-editor-crop-h" label="H" value={crop.h} step={1} decimals={0} min={1} onchange={(v) => setCrop({ h: v })} />
+				</div>
+				<div class="ie-buttons">
+					<UiButton id="image-editor-crop-apply" size="sm" variant="secondary" icon="check" onclick={applyCrop}>Apply crop</UiButton>
+					<UiButton size="sm" variant="ghost" onclick={() => (cropping = false)}>Cancel</UiButton>
+				</div>
+				<p class="ie-note">Drag on the picture to draw the box, drag inside it to move it, drag a corner to resize. Enter applies, Esc cancels.</p>
+			{:else}
+				<UiButton id="image-editor-crop" size="sm" variant="outline" icon="crop" full disabled={!work} onclick={startCrop}>Crop…</UiButton>
+			{/if}
+		</div>
+
+		<div class="ie-section">
+			<div class="ui-section-label">Resize</div>
+			<div class="ie-grid">
+				<DragRow id="image-editor-width" label="W" value={rw} step={1} decimals={0} min={1} max={MAX_SIDE} onchange={setRw} />
+				<DragRow id="image-editor-height" label="H" value={rh} step={1} decimals={0} min={1} max={MAX_SIDE} onchange={setRh} />
+			</div>
+			<div class="ie-inline">
+				<Toggle id="image-editor-lock" checked={lockRatio} label="Keep proportions" onchange={(v) => (lockRatio = v)} />
+				<span class="ie-inline-label">Keep proportions</span>
+			</div>
+			<div class="ie-buttons">
+				<UiButton size="sm" variant="ghost" disabled={!work} onclick={() => scaleBy(0.5)}>50%</UiButton>
+				<UiButton size="sm" variant="ghost" disabled={!work} onclick={() => scaleBy(2)}>200%</UiButton>
+				<UiButton size="sm" variant="ghost" disabled={!work} title="Round each side to the nearest power of two — the size GPUs like textures to be" onclick={toPow2}>Power of 2</UiButton>
+			</div>
+			<UiButton id="image-editor-resize-apply" size="sm" variant="secondary" icon="scaling" full disabled={!resizeChanged} onclick={applyResize}>Apply resize</UiButton>
+		</div>
+
+		<div class="ie-section">
+			<div class="ui-section-label">Adjust</div>
+			<SliderRow id="image-editor-brightness" label="Brightness" min={-100} max={100} step={1} decimals={0} value={brightness} onchange={(v) => (brightness = v)} />
+			<SliderRow id="image-editor-contrast" label="Contrast" min={-100} max={100} step={1} decimals={0} value={contrast} onchange={(v) => (contrast = v)} />
+			<SliderRow id="image-editor-saturation" label="Saturation" min={-100} max={100} step={1} decimals={0} value={saturation} onchange={(v) => (saturation = v)} />
+			<UiButton size="sm" variant="warn-text" disabled={!adjusted} onclick={resetAdjust}>Reset adjustments</UiButton>
+		</div>
+	</div>
+{/snippet}
+
+{#if target}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		id="image-editor-window"
+		bind:this={winEl}
+		tabindex="-1"
+		class="ui-panel tp-ui tp-window fixed flex flex-col overflow-hidden outline-hidden"
+		use:dragWindow={{ key: 'imageEditor', defaultRect: { left: 180, top: 110 }, resizable: true, minW: 420, minH: 320 }}
+		use:focusStack={'imageEditor'}
+		use:tabbable={{ key: 'imageEditor', title: 'Image editor', openStore: imageEditorTarget, isOpen: (v) => !!v, close: () => void close(), minW: 420, minH: 320 }}
+		use:ownKeys
+		style="z-index: var(--z-window); width: 820px; height: 560px"
+	>
+		<WindowChrome
+			size="tool"
+			bare
+			body={false}
+			title="Image editor"
+			headerClass="ui-panel-header move-handle cursor-move select-none"
+			onclose={() => void close()}
+			closeAttrs={{ title: 'Close', id: 'image-editor-close' }}
+		>
+			{#snippet heading()}
+				<span class="wc-label">Image editor</span>
+				<span class="wc-sub ie-title" title={item?.name ?? ''}>{item?.name ?? ''}{dirty ? ' •' : ''}</span>
+				<span class="flex-1"></span>
+			{/snippet}
+		</WindowChrome>
+		<div class="flex min-h-0 flex-1 flex-col">
+			<WindowShell
+				key="imageEditor"
+				hidePrimary
+				secondaryDefaultOpen
+				secondaryDefaultWidth={248}
+				secondaryModes={[{ key: 'edit', icon: '✎', label: 'Edit' }, { key: 'history', icon: '⟲', label: 'Versions' }]}
+			>
+				{#snippet topbar()}
+					<div class="border-b border-border px-2 py-1">
+						<ScrollStrip label="Image editor tools" id="image-editor-toolbar">
+							<div class="flex shrink-0 items-center gap-1">
+								<UiButton id="image-editor-undo" variant="icon" size="sm" icon="undo-2" label="Undo (Ctrl+Z)" title="Undo (Ctrl+Z)" disabled={!undoStack.length} onclick={undo} />
+								<UiButton id="image-editor-redo" variant="icon" size="sm" icon="redo-2" label="Redo (Ctrl+Shift+Z)" title="Redo (Ctrl+Shift+Z)" disabled={!redoStack.length} onclick={redo} />
+								<span class="ie-sep"></span>
+								<UiButton variant="icon" size="sm" icon="zoom-out" label="Zoom out" title="Zoom out (-)" disabled={!work} onclick={() => zoomAt(1 / 1.25)} />
+								<span class="ie-zoom" id="image-editor-zoom">{Math.round(scale * 100)}%</span>
+								<UiButton variant="icon" size="sm" icon="zoom-in" label="Zoom in" title="Zoom in (+)" disabled={!work} onclick={() => zoomAt(1.25)} />
+								<UiButton size="sm" variant="ghost" disabled={!work} title="Fit the image in the window (0)" onclick={fit}>Fit</UiButton>
+								<UiButton size="sm" variant="ghost" disabled={!work} title="One screen pixel per image pixel" onclick={actualSize}>1:1</UiButton>
+								<span class="ie-sep"></span>
+								<span class="ie-info" id="image-editor-size">{work ? work.width + ' × ' + work.height : ''} · {formatLabel}</span>
+								{#if usedBy}
+									<span class="ie-info ie-used" title="Saving updates the texture on these materials for everyone in the session">
+										<Icon name="image" size={16} aria-hidden="true" />{usedBy} texture{usedBy === 1 ? '' : 's'}
+									</span>
+								{/if}
+								<span class="flex-1"></span>
+								<UiButton id="image-editor-save-copy" size="sm" variant="outline" icon="copy" disabled={!work || saving} title="Save the edit as a new image beside this one" onclick={saveCopy}>Save as copy</UiButton>
+								<UiButton id="image-editor-save" size="sm" variant="primary" icon="save" disabled={!dirty || saving} title="Save over this image (Ctrl+S) — its earlier version stays in Versions" onclick={save}>Save</UiButton>
+							</div>
+						</ScrollStrip>
+					</div>
+				{/snippet}
+
+				{#snippet main()}
+					<!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
+					<div
+						bind:this={wrapEl}
+						id="image-editor-canvas-wrap"
+						class="relative h-full w-full overflow-hidden bg-app outline-none"
+						class:ie-crop-cursor={cropping}
+						tabindex="-1"
+						use:surface
+						onpointerdown={onPointerDown}
+						onpointermove={onPointerMove}
+						onpointerup={onPointerUp}
+						onpointercancel={onPointerUp}
+					>
+						<canvas bind:this={canvasEl} id="image-editor-canvas" class="absolute inset-0 h-full w-full" style="touch-action: none"></canvas>
+						{#if loading}
+							<div class="ie-overlay">Loading…</div>
+						{:else if loadError}
+							<div class="ie-overlay">{loadError}</div>
+						{:else if !item}
+							<div class="ie-overlay">This image is no longer in the library.</div>
+						{/if}
+						{#if cropping}
+							<div id="image-editor-crop-badge" class="ie-badge">Crop {crop.w} × {crop.h} — Enter applies, Esc cancels</div>
+						{/if}
+					</div>
+				{/snippet}
+
+				{#snippet secondary(mode)}
+					{#if mode === 'history'}
+						{@render versionsPanel()}
+					{:else}
+						{@render editPanel()}
+					{/if}
+				{/snippet}
+			</WindowShell>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.ie-title {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.ie-pane {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: 6px 8px 12px;
+	}
+	.ie-section {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 8px 0;
+		border-bottom: 1px solid var(--border);
+	}
+	.ie-section:last-child {
+		border-bottom: 0;
+	}
+	.ie-buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px;
+	}
+	.ie-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 4px 8px;
+	}
+	.ie-inline {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	.ie-inline-label {
+		font-size: var(--fs-body);
+		color: var(--text-2);
+	}
+	.ie-note {
+		font-size: var(--fs-badge);
+		color: var(--text-faint);
+	}
+	.ie-sep {
+		width: 1px;
+		height: 18px;
+		margin: 0 2px;
+		background: var(--border);
+	}
+	.ie-zoom {
+		min-width: 3.5rem;
+		text-align: center;
+		font-size: var(--fs-badge);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-muted);
+	}
+	.ie-info {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		font-size: var(--fs-badge);
+		color: var(--text-muted);
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+	.ie-used {
+		color: var(--text-2);
+	}
+	.ie-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24px;
+		text-align: center;
+		font-size: var(--fs-body);
+		color: var(--text-muted);
+		pointer-events: none;
+	}
+	.ie-badge {
+		position: absolute;
+		left: 50%;
+		top: 8px;
+		transform: translateX(-50%);
+		border-radius: 4px;
+		background: color-mix(in srgb, var(--bg-app) 85%, transparent);
+		padding: 2px 8px;
+		font-size: var(--fs-badge);
+		color: var(--text-2);
+		pointer-events: none;
+		white-space: nowrap;
+	}
+	.ie-crop-cursor {
+		cursor: crosshair;
+	}
+	.ie-row {
+		padding: 6px 0;
+	}
+	.ie-versions {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.ie-version {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border-radius: 4px;
+		padding: 4px;
+	}
+	.ie-version-current {
+		background: var(--accent-soft);
+	}
+	.ie-version-thumb {
+		width: 40px;
+		height: 40px;
+		flex-shrink: 0;
+		border-radius: 3px;
+		border: 1px solid var(--border);
+		object-fit: cover;
+		background: var(--surface-2);
+	}
+	.ie-version-text {
+		display: flex;
+		min-width: 0;
+		flex: 1;
+		flex-direction: column;
+	}
+	.ie-version-label {
+		font-size: var(--fs-body);
+		color: var(--text);
+	}
+	.ie-version-meta {
+		font-size: var(--fs-badge);
+		color: var(--text-faint);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	/* PHONE: the editor is a full-width sheet between the top chrome and the Controls bar —
+	   it never covers Play or the selection toolbar (NOTES-38 #32). dragWindow positions with
+	   inline styles, so the sheet's own geometry has to win them. */
+	@media (max-width: 640px) {
+		#image-editor-window {
+			left: 0 !important;
+			right: 0 !important;
+			top: var(--connect-bottom, 56px) !important;
+			bottom: var(--controls-inset, 0px) !important;
+			width: 100vw !important;
+			height: auto !important;
+			max-width: none !important;
+			border-radius: 12px 12px 0 0;
+		}
+		#image-editor-window :global(.dw-resize) {
+			display: none;
+		}
+		/* a phone is too narrow for canvas + sidebar side by side (measured: a 232 px canvas
+		   beside a 158 px sidebar that clipped its own labels), so the panel STACKS under the
+		   canvas: canvas, then the Edit/Versions tabs as a row, then the panel. Order is pinned
+		   whichever side the sidebar was switched to on a desktop. */
+		#image-editor-window :global(.ws-root) {
+			flex-direction: column;
+		}
+		#image-editor-window :global(.ws-main) {
+			order: 1 !important;
+			flex: 1 1 0;
+			min-height: 160px;
+		}
+		#image-editor-window :global(.ws-tabs) {
+			order: 2 !important;
+			flex-direction: row;
+			width: 100%;
+			padding-top: 0;
+			border-top: 1px solid var(--border);
+		}
+		#image-editor-window :global(.ws-tab-btn) {
+			flex: 1 1 0;
+			height: 44px;
+		}
+		#image-editor-window :global(.ws-tabs .ws-resize),
+		#image-editor-window :global([data-ws-switch-side]) {
+			display: none;
+		}
+		#image-editor-window :global(.ws-panel-secondary) {
+			order: 3 !important;
+			width: 100% !important;
+			height: auto;
+			flex: 0 1 46%;
+			min-height: 0;
+			border-inline: 0;
+		}
+	}
+	/* on the phone shell the top bar (logo, bell, avatar) is 64 px tall and the bottom bar
+	   holds Play: the sheet sits between the two, so neither covers its header (the close
+	   button) and Play stays tappable — the Inspector's phone-shell rule (ui.css). */
+	:global(:root.phone-shell) #image-editor-window {
+		top: 64px !important;
+		bottom: var(--ps-bar-h) !important;
+	}
+</style>
diff --git a/src/components/menu/Inspector.svelte b/src/components/menu/Inspector.svelte
index 6d1105e9d..a3fa27360 100644
--- a/src/components/menu/Inspector.svelte
+++ b/src/components/menu/Inspector.svelte
@@ -3968,6 +3968,19 @@
 									role="presentation"
 									onclick={() => document.getElementById('texture-file')?.click()}
 								/>
+								<!-- 40-image (F13): edit the texture's image; saving it re-textures every
+								     material made from it, for every peer -->
+								<UiButton
+									id="texture-edit"
+									size="sm"
+									variant="outline"
+									icon="square-pen"
+									title="Edit this texture in the Image editor — crop, rotate, resize, adjust"
+									onclick={() => {
+										const uuid = matTargets[0]?.uuid;
+										if (uuid) import('$lib/image/imageEditor').then((m) => m.editMaterialTexture(uuid, 0));
+									}}>Edit</UiButton
+								>
 								<UiButton
 									size="sm"
 									variant="outline"
diff --git a/src/components/ui/Icon.svelte b/src/components/ui/Icon.svelte
index 3299833fb..c1bc5e709 100644
--- a/src/components/ui/Icon.svelte
+++ b/src/components/ui/Icon.svelte
@@ -54,6 +54,7 @@
 		Combine,
 		Compass,
 		Copy,
+		Crop,
 		CornerLeftUp,
 		Crosshair,
 		Download,
@@ -157,6 +158,7 @@
 		RotateCcw,
 		RotateCw,
 		Save,
+		Scaling,
 		Scissors,
 		ScrollText,
 		Search,
@@ -265,6 +267,7 @@
 		combine: Combine,
 		compass: Compass,
 		copy: Copy,
+		crop: Crop,
 		'corner-left-up': CornerLeftUp,
 		crosshair: Crosshair,
 		download: Download,
@@ -368,6 +371,7 @@
 		'rotate-ccw': RotateCcw,
 		'rotate-cw': RotateCw,
 		save: Save,
+		scaling: Scaling,
 		scissors: Scissors,
 		'scroll-text': ScrollText,
 		search: Search,
diff --git a/src/lib/commandsHandler.svelte.js b/src/lib/commandsHandler.svelte.js
index 0779a2f9f..b557fd3f0 100644
--- a/src/lib/commandsHandler.svelte.js
+++ b/src/lib/commandsHandler.svelte.js
@@ -575,7 +575,8 @@ export async function objectParameters(data) {
         let mesh = sceneObjects.getObjectByProperty('uuid', data.uuid);
         // UV2: `slot` addresses one material of an ARRAY. Absent (an older peer,
         // or any single-material object) means slot 0 = today's behaviour.
-        if (mesh) applyMap(mesh, data.map, data.slot ?? 0);
+        // 40-image: `source` (additive) = the library image the texture was made from
+        if (mesh) applyMap(mesh, data.map, data.slot ?? 0, typeof data.source === 'string' ? data.source : null);
     } else if (data.parameter == 'materialParam') {
         setMaterialParam(data.uuid, data.key, data.value, false);
     } else if (data.parameter == 'animation') {
diff --git a/src/lib/debugHooks.js b/src/lib/debugHooks.js
index 6160ac29e..cd63b575a 100644
--- a/src/lib/debugHooks.js
+++ b/src/lib/debugHooks.js
@@ -107,6 +107,9 @@ export const DEBUG_HOOKS = [
 	['animatedImports', () => import('./animatedImports')],
 	['fileHandler', () => import('./fileHandler.svelte')],
 	['fileWindows', () => import('./fileWindows')],
+	['imageEditor', () => import('./image/imageEditor')],
+	['imageOps', () => import('./image/imageOps')],
+	['imageVersions', () => import('./image/imageVersions')],
 	['sceneBounds', () => import('./sceneBounds')],
 	['cameraClip', () => import('./cameraClip')],
 	['ping', () => import('./ping')],
diff --git a/src/lib/explorerDrop.js b/src/lib/explorerDrop.js
index c9800b56c..956197d7d 100644
--- a/src/lib/explorerDrop.js
+++ b/src/lib/explorerDrop.js
@@ -132,7 +132,7 @@ export async function applyExplorerImage(uuid, payload, slot = 0) {
 	if (!item || item.kind !== 'image') return false;
 	const blob = await itemBlob(item.id);
 	if (!blob) return false;
-	await setObjectTexture(uuid, new File([blob], item.name, { type: blob.type || 'image/png' }), slot);
+	await setObjectTexture(uuid, new File([blob], item.name, { type: blob.type || 'image/png' }), slot, { source: item.hash });
 	return true;
 }
 
diff --git a/src/lib/image/imageEditor.js b/src/lib/image/imageEditor.js
new file mode 100644
index 000000000..2bcd5d552
--- /dev/null
+++ b/src/lib/image/imageEditor.js
@@ -0,0 +1,226 @@
+// 40-image (F13) — THE IMAGE EDITOR'S SIDE EFFECTS: opening it, decoding and encoding,
+// and what Save / Save as copy / Restore do to the library, the history and the scene.
+// The pixel maths is `imageOps.js` (a leaf) and the window is `ImageEditorWindow.svelte`.
+//
+// WHAT A SAVE IS: the SAME Explorer record with new bytes (`replaceItemBytes`) — its id,
+// folder, share flags and every reference stay put, and a shared file republishes its
+// new hash through the library's own sweep (the 24-C2 rule that made a text edit to a
+// shared file reach peers). Before the bytes are replaced, the outgoing ones are
+// recorded as a version, so nothing a save does is unrecoverable.
+//
+// WHAT A SAVE DOES TO THE SCENE: every material slot whose texture was made from this
+// image (`userData.mapSource` = its old hash) is re-textured from the new bytes through
+// `setObjectsTexture` — the replicated `map` message, one history entry per slot, ONE undo
+// step for the whole save. A texture that was painted over or picked from disk carries no
+// source and is left alone: it is no longer that image.
+
+import { writable, get } from 'svelte/store';
+import {
+	itemById,
+	itemBlob,
+	replaceItemBytes,
+	addItemFromBytes,
+	hashBytes,
+	nextCopyName,
+	explorerItems,
+	itemByHash
+} from '../explorer';
+import { setObjectsTexture, texturesFromSource, linkTextureSource, materialAt } from '../materialsHandler';
+import { beginHistoryBatch, endHistoryBatch } from '../history';
+import { withWireBatchAsync } from '../wireBatch';
+import { objectsGroup, pokeScene } from '../../stores/sceneStore';
+import { showToast } from '../../stores/appStore';
+import { recordImageVersion, imageVersionBlob } from './imageVersions';
+import { makeRaster, fitSize, encodingFor } from './imageOps';
+
+/**
+ * The open editor: which Explorer image, plus a `raise` counter so asking again for the
+ * same image brings the window forward instead of reloading it (the 21-I3 ruling the
+ * preview window keeps). null = closed.
+ * @type {import('svelte/store').Writable<{itemId: string, raise: number} | null>}
+ */
+export const imageEditorTarget = writable(null);
+
+/** Open the Image editor on an Explorer image. @param {string} itemId */
+export function openImageEditor(itemId) {
+	const item = itemById(itemId);
+	if (!item || item.kind !== 'image') {
+		showToast('Only an image can be edited here');
+		return false;
+	}
+	const now = get(imageEditorTarget);
+	imageEditorTarget.set({ itemId: item.id, raise: (now?.raise ?? 0) + 1 });
+	return true;
+}
+
+export function closeImageEditor() {
+	imageEditorTarget.set(null);
+}
+
+/**
+ * Edit the texture on one material slot. A texture made from a library image opens that
+ * image; one that came from anywhere else (picked from disk, an imported model, a paint
+ * stroke) is first put into the library as "<object> texture.webp" and LINKED, so saving
+ * it updates the material like any other.
+ * @param {string} uuid @param {number} [slot]
+ */
+export async function editMaterialTexture(uuid, slot = 0) {
+	const object = get(objectsGroup)?.getObjectByProperty('uuid', uuid);
+	const material = materialAt(object, slot);
+	const url = material?.userData?.mapDataUrl;
+	if (!material || !url) {
+		showToast('That material has no texture to edit');
+		return false;
+	}
+	const source = material.userData.mapSource;
+	const held = source ? itemByHash(source) : null;
+	if (held && held.kind === 'image') return openImageEditor(held.id);
+	const blob = await (await fetch(url)).blob();
+	const ext = blob.type === 'image/jpeg' ? 'jpg' : blob.type === 'image/png' ? 'png' : 'webp';
+	const base = String(object?.name || 'Object').replace(/[\\/:*?"<>|]+/g, ' ').trim() || 'Object';
+	const record = await addItemFromBytes(await blob.arrayBuffer(), `${base} texture.${ext}`, null, { imported: true });
+	if (!record) return false;
+	linkTextureSource(uuid, slot, record.hash);
+	pokeScene();
+	return openImageEditor(record.id);
+}
+
+// ---- decode / encode --------------------------------------------------------------
+
+/** Decode an image blob into a raster (alpha kept, colours un-premultiplied).
+ * @param {Blob} blob @returns {Promise<import('./imageOps').Raster>} */
+export async function decodeImage(blob) {
+	const bitmap = await createImageBitmap(blob, { premultiplyAlpha: 'none', colorSpaceConversion: 'none' });
+	try {
+		const canvas = document.createElement('canvas');
+		canvas.width = bitmap.width;
+		canvas.height = bitmap.height;
+		const ctx = canvas.getContext('2d', { willReadFrequently: true });
+		if (!ctx) throw new Error('no 2d context');
+		ctx.drawImage(bitmap, 0, 0);
+		const data = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+		return makeRaster(data.width, data.height, data.data);
+	} finally {
+		bitmap.close?.();
+	}
+}
+
+/** A canvas showing this raster. @param {import('./imageOps').Raster} raster */
+export function rasterCanvas(raster) {
+	const canvas = document.createElement('canvas');
+	canvas.width = raster.width;
+	canvas.height = raster.height;
+	const ctx = canvas.getContext('2d');
+	ctx?.putImageData(new ImageData(/** @type {Uint8ClampedArray<ArrayBuffer>} */ (raster.data), raster.width, raster.height), 0, 0);
+	return canvas;
+}
+
+/** Encode a raster in a file format. @param {import('./imageOps').Raster} raster
+ * @param {{type: string, quality?: number}} encoding @returns {Promise<Blob>} */
+export function encodeImage(raster, encoding) {
+	const canvas = rasterCanvas(raster);
+	return new Promise((resolve, reject) =>
+		canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('encode failed'))), encoding.type, encoding.quality)
+	);
+}
+
+/** A small preview dataURL for a version row. @param {import('./imageOps').Raster} raster */
+export function thumbOf(raster) {
+	const fit = fitSize(raster.width, raster.height, 96, 96);
+	const canvas = document.createElement('canvas');
+	canvas.width = fit.width;
+	canvas.height = fit.height;
+	canvas.getContext('2d')?.drawImage(rasterCanvas(raster), 0, 0, fit.width, fit.height);
+	return canvas.toDataURL('image/webp', 0.7);
+}
+
+/** @param {Blob} blob */
+async function thumbOfBlob(blob) {
+	try {
+		const raster = await decodeImage(blob);
+		return { thumb: thumbOf(raster), width: raster.width, height: raster.height };
+	} catch {
+		return { thumb: null, width: undefined, height: undefined };
+	}
+}
+
+// ---- save / copy / restore ----------------------------------------------------------
+
+/**
+ * Re-texture every material slot made from `oldHash` with `blob` (now `newHash`), as ONE
+ * undo step and one wire batch. @param {string} oldHash @param {Blob} blob @param {string} newHash
+ * @returns {Promise<number>} how many slots changed
+ */
+export async function retextureFromSource(oldHash, blob, newHash) {
+	const users = texturesFromSource(oldHash);
+	if (!users.length || oldHash === newHash) return 0;
+	/** @type {Map<number, string[]>} */
+	const bySlot = new Map();
+	for (const { uuid, slot } of users) bySlot.set(slot, [...(bySlot.get(slot) ?? []), uuid]);
+	let changed = 0;
+	beginHistoryBatch();
+	try {
+		await withWireBatchAsync(async () => {
+			for (const [slot, uuids] of bySlot) changed += await setObjectsTexture(uuids, blob, slot, { source: newHash });
+		});
+	} finally {
+		endHistoryBatch(`Update texture (${changed})`);
+	}
+	pokeScene();
+	return changed;
+}
+
+/**
+ * Replace an image's bytes, keeping both the old and the new state in its history, and
+ * carry the change into every texture made from it.
+ * @param {string} itemId @param {Blob} blob @param {{label?: string, raster?: import('./imageOps').Raster}} [opts]
+ * @returns {Promise<{record: any, textures: number} | null>}
+ */
+export async function saveImage(itemId, blob, opts = {}) {
+	const record = itemById(itemId);
+	if (!record) return null;
+	const oldHash = record.hash;
+	const old = await itemBlob(record.id);
+	// the outgoing bytes first: this is the step that makes every later one undoable
+	if (old) await recordImageVersion(record.id, old, { hash: oldHash, ...(await thumbOfBlob(old)) });
+	const buffer = await blob.arrayBuffer();
+	const newHash = await hashBytes(buffer);
+	if (newHash === oldHash) return { record, textures: 0 };
+	const updated = await replaceItemBytes(record.id, buffer, { type: blob.type });
+	const meta = opts.raster
+		? { thumb: thumbOf(opts.raster), width: opts.raster.width, height: opts.raster.height }
+		: await thumbOfBlob(blob);
+	await recordImageVersion(record.id, blob, { hash: newHash, label: opts.label ?? 'Edit', ...meta });
+	const textures = await retextureFromSource(oldHash, blob, newHash);
+	return { record: updated, textures };
+}
+
+/**
+ * Put an earlier version back. It is a save like any other (the current bytes are already
+ * in the history), so it is itself restorable and it re-textures the scene.
+ * @param {string} itemId @param {string} hash
+ */
+export async function restoreImageVersion(itemId, hash) {
+	const blob = await imageVersionBlob(itemId, hash);
+	if (!blob) {
+		showToast('That version is no longer on this device');
+		return null;
+	}
+	return saveImage(itemId, blob);
+}
+
+/**
+ * Save the edit as a NEW library image beside the original ("Brick copy.png"), leaving the
+ * original and every texture made from it untouched.
+ * @param {string} itemId @param {Blob} blob @param {string} [name]
+ */
+export async function saveImageCopy(itemId, blob, name) {
+	const record = itemById(itemId);
+	if (!record) return null;
+	const siblings = get(explorerItems)
+		.filter((item) => (item.folderId ?? null) === (record.folderId ?? null))
+		.map((item) => item.name);
+	const wanted = encodingFor(name || record.name, blob.type).name;
+	const copyName = nextCopyName(wanted, siblings);
+	return addItemFromBytes(await blob.arrayBuffer(), copyName, record.folderId ?? null, { allowDuplicate: true, type: blob.type });
+}
diff --git a/src/lib/image/imageOps.js b/src/lib/image/imageOps.js
new file mode 100644
index 000000000..b61bca508
--- /dev/null
+++ b/src/lib/image/imageOps.js
@@ -0,0 +1,296 @@
+// 40-image (roadmap 40 F13) — THE IMAGE EDITOR'S PIXEL MATHS, as a LEAF that imports
+// nothing. Every operation takes and returns a plain `{width, height, data}` raster
+// (`data` = RGBA bytes, row-major, the ImageData layout) and never mutates its input, so
+// the editor's undo stack can hold the previous raster as-is and vitest can drive the
+// whole thing with no canvas and no browser.
+//
+// WHY NOT `ctx.filter` / `drawImage` for the work: the canvas pipeline is fast but it is
+// not the SAME pipeline everywhere (Safari's canvas `filter` support arrived late, and
+// resampling quality is a per-browser choice), and the editor's promise is that what you
+// saw is what Save writes. Doing the arithmetic here makes the preview and the saved file
+// one function call apart, on every engine. The canvas is only used to DECODE and ENCODE.
+
+/** @typedef {{width: number, height: number, data: Uint8ClampedArray}} Raster */
+/** @typedef {{x: number, y: number, w: number, h: number}} Rect */
+/** @typedef {{brightness: number, contrast: number, saturation: number}} Adjust */
+
+/** the neutral adjustment — every slider at 0 */
+export const IDENTITY_ADJUST = Object.freeze({ brightness: 0, contrast: 0, saturation: 0 });
+
+/** the largest side the editor will produce (a resize past this is clamped) */
+export const MAX_SIDE = 8192;
+
+/** @param {number} width @param {number} height @param {Uint8ClampedArray} [data] @returns {Raster} */
+export function makeRaster(width, height, data) {
+	const w = Math.max(1, Math.round(width));
+	const h = Math.max(1, Math.round(height));
+	return { width: w, height: h, data: data ?? new Uint8ClampedArray(w * h * 4) };
+}
+
+/** @param {number} v @param {number} lo @param {number} hi */
+const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+
+/**
+ * A crop rectangle made legal for an image of this size: whole pixels, at least 1x1,
+ * entirely inside. A rect dragged backwards (negative w/h) is normalised first, so a
+ * drag from bottom-right to top-left crops the same box as the other way round.
+ * @param {Rect} rect @param {number} width @param {number} height @returns {Rect}
+ */
+export function clampRect(rect, width, height) {
+	let { x, y, w, h } = rect;
+	if (w < 0) (x += w), (w = -w);
+	if (h < 0) (y += h), (h = -h);
+	const x0 = clamp(Math.round(x), 0, width - 1);
+	const y0 = clamp(Math.round(y), 0, height - 1);
+	const x1 = clamp(Math.round(x + w), x0 + 1, width);
+	const y1 = clamp(Math.round(y + h), y0 + 1, height);
+	return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+
+/**
+ * The largest rect of aspect `ratio` (w/h) centred in a `width` x `height` image — what an
+ * aspect preset starts from. A ratio <= 0 (Free) returns the whole image.
+ * @param {number} width @param {number} height @param {number} ratio @returns {Rect}
+ */
+export function aspectRect(width, height, ratio) {
+	if (!(ratio > 0)) return { x: 0, y: 0, w: width, h: height };
+	let w = width;
+	let h = Math.round(w / ratio);
+	if (h > height) {
+		h = height;
+		w = Math.round(h * ratio);
+	}
+	w = Math.max(1, Math.min(w, width));
+	h = Math.max(1, Math.min(h, height));
+	return { x: Math.floor((width - w) / 2), y: Math.floor((height - h) / 2), w, h };
+}
+
+/** @param {Raster} img @param {Rect} rect @returns {Raster} */
+export function cropRaster(img, rect) {
+	const r = clampRect(rect, img.width, img.height);
+	const out = makeRaster(r.w, r.h);
+	for (let row = 0; row < r.h; row++) {
+		const from = ((r.y + row) * img.width + r.x) * 4;
+		out.data.set(img.data.subarray(from, from + r.w * 4), row * r.w * 4);
+	}
+	return out;
+}
+
+/**
+ * Rotate by quarter turns. +1 = 90 degrees CLOCKWISE as you look at the picture (the
+ * button every image editor puts on the right), -1 counter-clockwise; any integer works
+ * and 4 is the identity.
+ * @param {Raster} img @param {number} quarterTurns @returns {Raster}
+ */
+export function rotateRaster(img, quarterTurns) {
+	const q = ((Math.round(quarterTurns) % 4) + 4) % 4;
+	if (q === 0) return makeRaster(img.width, img.height, img.data.slice());
+	const { width: W, height: H } = img;
+	const out = q === 2 ? makeRaster(W, H) : makeRaster(H, W);
+	const OW = out.width;
+	const src = new Uint32Array(img.data.buffer, img.data.byteOffset, W * H);
+	const dst = new Uint32Array(out.data.buffer);
+	for (let y = 0; y < H; y++) {
+		for (let x = 0; x < W; x++) {
+			let nx, ny;
+			if (q === 1) (nx = H - 1 - y), (ny = x);
+			else if (q === 2) (nx = W - 1 - x), (ny = H - 1 - y);
+			else (nx = y), (ny = W - 1 - x);
+			dst[ny * OW + nx] = src[y * W + x];
+		}
+	}
+	return out;
+}
+
+/** Mirror. `'h'` swaps left and right, `'v'` top and bottom.
+ * @param {Raster} img @param {'h' | 'v'} axis @returns {Raster} */
+export function flipRaster(img, axis) {
+	const { width: W, height: H } = img;
+	const out = makeRaster(W, H);
+	const src = new Uint32Array(img.data.buffer, img.data.byteOffset, W * H);
+	const dst = new Uint32Array(out.data.buffer);
+	for (let y = 0; y < H; y++) {
+		for (let x = 0; x < W; x++) {
+			const nx = axis === 'h' ? W - 1 - x : x;
+			const ny = axis === 'v' ? H - 1 - y : y;
+			dst[ny * W + nx] = src[y * W + x];
+		}
+	}
+	return out;
+}
+
+/**
+ * Per-axis resampling weights: for every destination index, the source indices it reads
+ * and how much of each. SHRINKING averages the source span the destination pixel covers
+ * (an area filter — what keeps a 4x reduction from aliasing into noise); GROWING
+ * interpolates linearly between the two nearest source centres.
+ * @param {number} src @param {number} dst @returns {{idx: Int32Array, w: Float32Array, start: Int32Array}}
+ */
+function axisWeights(src, dst) {
+	const scale = src / dst;
+	/** @type {number[]} */ const idx = [];
+	/** @type {number[]} */ const w = [];
+	const start = new Int32Array(dst + 1);
+	for (let d = 0; d < dst; d++) {
+		start[d] = idx.length;
+		if (scale > 1) {
+			const a = d * scale;
+			const b = a + scale;
+			for (let s = Math.floor(a); s < Math.ceil(b) && s < src; s++) {
+				const cover = Math.min(b, s + 1) - Math.max(a, s);
+				if (cover > 0) idx.push(s), w.push(cover / scale);
+			}
+		} else {
+			const centre = (d + 0.5) * scale - 0.5;
+			const s0 = clamp(Math.floor(centre), 0, src - 1);
+			const s1 = Math.min(s0 + 1, src - 1);
+			const t = clamp(centre - s0, 0, 1);
+			if (s1 === s0) idx.push(s0), w.push(1);
+			else idx.push(s0, s1), w.push(1 - t, t);
+		}
+	}
+	start[dst] = idx.length;
+	return { idx: Int32Array.from(idx), w: Float32Array.from(w), start };
+}
+
+/**
+ * Resample to `width` x `height` (each clamped to 1..MAX_SIDE). Separable: rows first
+ * into a float buffer, then columns. Colour is weighted by ALPHA, so a transparent pixel
+ * cannot bleed its (meaningless) colour into the edge of an opaque neighbour — the dark
+ * halo every naive resize of a cut-out PNG grows.
+ * @param {Raster} img @param {number} width @param {number} height @returns {Raster}
+ */
+export function resizeRaster(img, width, height) {
+	const W = clamp(Math.round(width), 1, MAX_SIDE);
+	const H = clamp(Math.round(height), 1, MAX_SIDE);
+	if (W === img.width && H === img.height) return makeRaster(W, H, img.data.slice());
+	const sw = img.width;
+	const sh = img.height;
+	const xs = axisWeights(sw, W);
+	const ys = axisWeights(sh, H);
+	// premultiplied float rows: [r*a, g*a, b*a, a]
+	const mid = new Float32Array(W * sh * 4);
+	const s = img.data;
+	for (let y = 0; y < sh; y++) {
+		const row = y * sw * 4;
+		for (let x = 0; x < W; x++) {
+			let r = 0, g = 0, b = 0, a = 0;
+			for (let k = xs.start[x]; k < xs.start[x + 1]; k++) {
+				const p = row + xs.idx[k] * 4;
+				const wa = xs.w[k] * s[p + 3];
+				r += s[p] * wa;
+				g += s[p + 1] * wa;
+				b += s[p + 2] * wa;
+				a += wa;
+			}
+			const o = (y * W + x) * 4;
+			mid[o] = r;
+			mid[o + 1] = g;
+			mid[o + 2] = b;
+			mid[o + 3] = a;
+		}
+	}
+	const out = makeRaster(W, H);
+	const d = out.data;
+	for (let y = 0; y < H; y++) {
+		for (let x = 0; x < W; x++) {
+			let r = 0, g = 0, b = 0, a = 0;
+			for (let k = ys.start[y]; k < ys.start[y + 1]; k++) {
+				const p = (ys.idx[k] * W + x) * 4;
+				const wk = ys.w[k];
+				r += mid[p] * wk;
+				g += mid[p + 1] * wk;
+				b += mid[p + 2] * wk;
+				a += mid[p + 3] * wk;
+			}
+			const o = (y * W + x) * 4;
+			if (a > 0) {
+				d[o] = r / a;
+				d[o + 1] = g / a;
+				d[o + 2] = b / a;
+			}
+			d[o + 3] = a;
+		}
+	}
+	return out;
+}
+
+/** Is this adjustment a no-op? @param {Partial<Adjust> | null | undefined} adj */
+export function isIdentityAdjust(adj) {
+	return !adj || (!adj.brightness && !adj.contrast && !adj.saturation);
+}
+
+/**
+ * Brightness / contrast / saturation, each -100..100 with 0 = unchanged. The order is the
+ * one every photo tool uses — brightness shifts, contrast stretches about mid-grey, then
+ * saturation pulls toward or away from the pixel's own luma (Rec. 709 weights) — and the
+ * three are folded into ONE 256-entry table per stage where they can be, so a 4K image is
+ * one pass. Alpha is never touched.
+ * @param {Raster} img @param {Partial<Adjust>} adj @returns {Raster}
+ */
+export function adjustRaster(img, adj) {
+	const brightness = clamp(Number(adj?.brightness) || 0, -100, 100);
+	const contrast = clamp(Number(adj?.contrast) || 0, -100, 100);
+	const saturation = clamp(Number(adj?.saturation) || 0, -100, 100);
+	const out = makeRaster(img.width, img.height, img.data.slice());
+	if (!brightness && !contrast && !saturation) return out;
+	// the per-channel tone curve: brightness then contrast
+	const shift = brightness * 2.55;
+	const c = contrast * 2.55;
+	const factor = (259 * (c + 255)) / (255 * (259 - c));
+	const lut = new Float32Array(256);
+	for (let v = 0; v < 256; v++) lut[v] = factor * (v + shift - 128) + 128;
+	const sat = 1 + saturation / 100;
+	const d = out.data;
+	for (let i = 0; i < d.length; i += 4) {
+		let r = lut[d[i]];
+		let g = lut[d[i + 1]];
+		let b = lut[d[i + 2]];
+		if (saturation) {
+			const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+			r = l + (r - l) * sat;
+			g = l + (g - l) * sat;
+			b = l + (b - l) * sat;
+		}
+		d[i] = r; // Uint8ClampedArray rounds and clamps
+		d[i + 1] = g;
+		d[i + 2] = b;
+	}
+	return out;
+}
+
+/**
+ * Fit `width` x `height` inside `maxW` x `maxH` keeping the aspect, never enlarging.
+ * @param {number} width @param {number} height @param {number} maxW @param {number} maxH
+ * @returns {{width: number, height: number, scale: number}}
+ */
+export function fitSize(width, height, maxW, maxH) {
+	const scale = Math.min(1, maxW / width, maxH / height);
+	return { width: Math.max(1, Math.round(width * scale)), height: Math.max(1, Math.round(height * scale)), scale };
+}
+
+/** The power of two nearest `n` (ties go up) — the texture-friendly size. @param {number} n */
+export function nearestPow2(n) {
+	if (!(n >= 1)) return 1;
+	const lo = 2 ** Math.floor(Math.log2(n));
+	const hi = lo * 2;
+	return n - lo < hi - n ? lo : Math.min(hi, MAX_SIDE);
+}
+
+/**
+ * What a saved edit is encoded as: the file keeps its own format where a browser can
+ * write it (PNG, JPEG, WebP), and anything else (GIF, BMP) becomes PNG — a GIF encoder
+ * is not something a browser ships. Returns the mime type and the filename to match.
+ * @param {string} name @param {string} [mime]
+ * @returns {{type: string, name: string, quality?: number}}
+ */
+export function encodingFor(name, mime = '') {
+	const base = String(name || 'image');
+	const ext = (base.match(/\.([a-z0-9]+)$/i)?.[1] ?? '').toLowerCase();
+	const type = String(mime || '').toLowerCase();
+	if (ext === 'jpg' || ext === 'jpeg' || type === 'image/jpeg') return { type: 'image/jpeg', name: base, quality: 0.92 };
+	if (ext === 'webp' || type === 'image/webp') return { type: 'image/webp', name: base, quality: 0.92 };
+	if (ext === 'png' || type === 'image/png') return { type: 'image/png', name: base };
+	const stem = ext ? base.slice(0, -(ext.length + 1)) : base;
+	return { type: 'image/png', name: stem + '.png' };
+}
diff --git a/src/lib/image/imageVersions.js b/src/lib/image/imageVersions.js
new file mode 100644
index 000000000..aa32870ba
--- /dev/null
+++ b/src/lib/image/imageVersions.js
@@ -0,0 +1,89 @@
+// 40-image (F13) — PER-IMAGE VERSION HISTORY, a LEAF (svelte/store + idb only).
+//
+// An Explorer image is ONE record whose bytes a Save replaces in place (`replaceItemBytes`
+// keeps the id, so every folder, share row and reference stays put). What a save would
+// otherwise destroy is the bytes it replaced, so they land here first:
+//
+//   imgver:list:<itemId>          → [{hash, size, at, label, width, height, type, thumb}]
+//   imgver:blob:<itemId>:<hash>   → the Blob
+//
+// THE FIRST ENTRY IS THE ORIGINAL and is never pruned, so "Restore original" always
+// works however many edits follow; the rest keep the newest MAX_VERSIONS - 1. Blobs are
+// keyed by item AND hash so two images that happen to share bytes never share a history
+// entry — pruning one cannot reach into the other, and nothing needs reference counting.
+//
+// LOCAL BY DESIGN: the history is this device's record of its own edits. What reaches
+// peers is the saved image itself — a shared file republishes its new hash and every
+// texture made from it re-applies through the ordinary replicated `map` message.
+
+import { writable } from 'svelte/store';
+import { idbGet, idbPut, idbDelete } from '../idb';
+
+const LIST = 'imgver:list:';
+const BLOB = 'imgver:blob:';
+/** how many versions one image keeps, the Original included */
+export const MAX_VERSIONS = 20;
+
+/**
+ * @typedef {{hash: string, size: number, at: number, label: string, width?: number, height?: number, type?: string, thumb?: string | null}} ImageVersion
+ */
+
+/** bumped on every write, so a panel listing versions can re-read */
+export const imageVersionsTick = writable(0);
+
+/** @param {string} itemId @returns {Promise<ImageVersion[]>} oldest first, [0] = the original */
+export async function listImageVersions(itemId) {
+	const list = await idbGet(LIST + itemId);
+	return Array.isArray(list) ? list : [];
+}
+
+/**
+ * Remember `blob` as a version of this image. A hash already in the list is not added
+ * twice (re-saving restored bytes, or saving with no change). The FIRST version recorded
+ * is labelled Original whatever `meta.label` says.
+ * @param {string} itemId @param {Blob} blob
+ * @param {{hash: string, label?: string, width?: number, height?: number, thumb?: string | null}} meta
+ * @returns {Promise<ImageVersion[]>} the list after the write
+ */
+export async function recordImageVersion(itemId, blob, meta) {
+	const list = await listImageVersions(itemId);
+	if (!meta?.hash || list.some((v) => v.hash === meta.hash)) return list;
+	/** @type {ImageVersion} */
+	const entry = {
+		hash: meta.hash,
+		size: blob.size,
+		at: Date.now(),
+		label: list.length ? meta.label || 'Edit' : 'Original',
+		...(meta.width ? { width: meta.width, height: meta.height } : {}),
+		...(blob.type ? { type: blob.type } : {}),
+		thumb: meta.thumb ?? null
+	};
+	await idbPut(BLOB + itemId + ':' + meta.hash, blob);
+	const next = [...list, entry];
+	// keep the original, drop the oldest edits beyond the cap
+	while (next.length > MAX_VERSIONS) {
+		const [gone] = next.splice(1, 1);
+		await idbDelete(BLOB + itemId + ':' + gone.hash);
+	}
+	await idbPut(LIST + itemId, next);
+	imageVersionsTick.update((n) => n + 1);
+	return next;
+}
+
+/** @param {string} itemId @param {string} hash @returns {Promise<Blob | null>} */
+export async function imageVersionBlob(itemId, hash) {
+	return (await idbGet(BLOB + itemId + ':' + hash)) ?? null;
+}
+
+/** Drop one image's whole history (bytes included). @param {string} itemId */
+export async function forgetImageVersions(itemId) {
+	const list = await listImageVersions(itemId);
+	for (const v of list) await idbDelete(BLOB + itemId + ':' + v.hash);
+	await idbDelete(LIST + itemId);
+	imageVersionsTick.update((n) => n + 1);
+}
+
+/** Is this idb key one of ours? (the storage breakdown classifies by prefix) @param {string} key */
+export function isImageVersionKey(key) {
+	return String(key).startsWith(LIST) || String(key).startsWith(BLOB);
+}
diff --git a/src/lib/materialsHandler.js b/src/lib/materialsHandler.js
index 59c633e1c..1f400cedd 100644
--- a/src/lib/materialsHandler.js
+++ b/src/lib/materialsHandler.js
@@ -100,6 +100,8 @@ registerHistoryKind('material', (entry, state) => {
 	if (entry.param === 'type') {
 		switchMaterialType(entry.uuid, state.value, true);
 	} else if (entry.param === 'map') {
+		// 40-image: an undone/redone texture is no longer known to BE a library image, so it
+		// carries no source — a later image save must not paint over the step it reverted to
 		applyMap(object, state.value, entry.slot ?? 0);
 		broadcast({
 			type: 'objectParameters',
@@ -162,6 +164,9 @@ export function applyMaterials(object, payload, replicate = false) {
 	next.forEach((/** @type {any} */ material, /** @type {number} */ i) => {
 		const url = payload.mapDataUrls?.[i];
 		if (url) material.userData.mapDataUrl = url;
+		// 40-image: and which library image it came from (absent on an older peer's payload)
+		const source = payload.mapSources?.[i];
+		if (source) material.userData.mapSource = source;
 	});
 	object.material = next.length === 1 ? next[0] : next;
 	if (payload.groups && object.geometry) {
@@ -217,6 +222,7 @@ export function materialsPayload(object) {
 		...serialized,
 		// toJSON drops userData.mapDataUrl, and the Inspector/UV sidebar read it
 		mapDataUrls: materials.map((m) => m.userData?.mapDataUrl ?? null),
+		mapSources: materials.map((m) => m.userData?.mapSource ?? null),
 		groups: (object.geometry?.groups ?? []).map((/** @type {any} */ g) => ({
 			start: g.start,
 			count: g.count,
@@ -392,11 +398,19 @@ export function copyTextureParams(from, to) {
  * thumbnail. UV2: `slot` addresses a material ARRAY (an imported .obj/.mtl, a
  * merged mesh); omitted means slot 0, which for a single-material object is
  * exactly the old behaviour — so older peers' slot-less messages still land.
- * @param {any} object @param {string | null} dataURL @param {number} [slot]
+ *
+ * 40-image: `source` is the content HASH of the Explorer image the texture was made from,
+ * kept on `userData.mapSource` so saving that image in the Image editor can find every
+ * material showing it. Any write WITHOUT one (a paint stroke, an undo, a file picked from
+ * disk, an older peer) drops the link: the texture is no longer known to be that image,
+ * and a later save must not paint over it.
+ * @param {any} object @param {string | null} dataURL @param {number} [slot] @param {string | null} [source]
  */
-export function applyMap(object, dataURL, slot = 0) {
+export function applyMap(object, dataURL, slot = 0, source = null) {
 	const material = materialAt(object, slot);
 	if (!material || !('map' in material)) return;
+	if (source && dataURL != null) material.userData.mapSource = String(source);
+	else delete material.userData.mapSource;
 	if (dataURL == null) {
 		material.map?.dispose();
 		material.map = null;
@@ -429,7 +443,7 @@ export function applyMap(object, dataURL, slot = 0) {
 
 /** Downscale an image file to maxSize px and encode as a compact dataURL
  * (exported since 17-D2 — the OBJ/.mtl import path reuses it for its textures)
- * @param {File} file @param {number} maxSize */
+ * @param {File | Blob} file @param {number} maxSize */
 export async function downscaleImage(file, maxSize) {
 	const bitmap = await createImageBitmap(file);
 	const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));
@@ -442,6 +456,16 @@ export async function downscaleImage(file, maxSize) {
 	return webp.startsWith('data:image/webp') ? webp : canvas.toDataURL('image/jpeg', 0.85);
 }
 
+/**
+ * 40-image (F13, the user's image-large report): the texture is DOWNSCALED to 1024 px
+ * whatever comes in, so refusing a big file at 8 MB refused photos the path was already
+ * built to shrink. The only limit left is a decode-safety one — a file this size is not
+ * an image a phone can decode at all.
+ */
+export const MAX_TEXTURE_SOURCE_BYTES = 64 * 1024 * 1024;
+/** the longest side a texture is stored at (the dataURL rides the wire and every save) */
+export const TEXTURE_MAX_SIDE = 1024;
+
 /**
  * Set one image file as the texture of MANY objects (17-D1) and replicate.
  * The file is decoded and downscaled ONCE and the resulting dataURL applied per
@@ -451,18 +475,20 @@ export async function downscaleImage(file, maxSize) {
  * unreliable (the third `createImageBitmap` of one picked file can reject).
  * UV2: `slot` picks the material slot, so a multi-material mesh is no longer
  * refused — it used to toast "not supported yet" and skip.
- * @param {string[]} uuids @param {File} file @param {number} [slot]
+ * 40-image: `opts.source` = the content hash of the Explorer image `file` holds (see applyMap).
+ * @param {string[]} uuids @param {File | Blob} file @param {number} [slot] @param {{source?: string | null}} [opts]
  * @returns {Promise<number>} how many were textured
  */
-export async function setObjectsTexture(uuids, file, slot = 0) {
-	if (file.size > 8 * 1024 * 1024) {
-		showToast('Image is too large (max 8 MB)');
+export async function setObjectsTexture(uuids, file, slot = 0, opts = {}) {
+	if (file.size > MAX_TEXTURE_SOURCE_BYTES) {
+		showToast('That image is too big to read (' + Math.round(file.size / 1048576) + ' MB) — save it smaller first');
 		return 0;
 	}
+	const source = opts.source ? String(opts.source) : null;
 	/** @type {string} */
 	let dataURL;
 	try {
-		dataURL = await downscaleImage(file, 1024);
+		dataURL = await downscaleImage(file, TEXTURE_MAX_SIDE);
 	} catch (error) {
 		console.log(error);
 		showToast('Could not read the image file');
@@ -478,13 +504,15 @@ export async function setObjectsTexture(uuids, file, slot = 0) {
 			continue;
 		}
 		recordMaterialChange(uuid, 'map', null, material.userData?.mapDataUrl ?? null, dataURL, slot);
-		applyMap(object, dataURL, slot);
+		applyMap(object, dataURL, slot, source);
 		broadcast({
 			type: 'objectParameters',
 			parameter: 'map',
 			uuid: uuid,
 			map: dataURL,
-			...(slot ? { slot } : {})
+			...(slot ? { slot } : {}),
+			// additive: an older peer ignores it, and a message without it drops the link
+			...(source ? { source } : {})
 		});
 		applied++;
 	}
@@ -493,9 +521,50 @@ export async function setObjectsTexture(uuids, file, slot = 0) {
 }
 
 /** Set an image file as the object's texture and replicate
- * @param {string} uuid @param {File} file @param {number} [slot] */
-export async function setObjectTexture(uuid, file, slot = 0) {
-	await setObjectsTexture([uuid], file, slot);
+ * @param {string} uuid @param {File | Blob} file @param {number} [slot] @param {{source?: string | null}} [opts] */
+export async function setObjectTexture(uuid, file, slot = 0, opts = {}) {
+	await setObjectsTexture([uuid], file, slot, opts);
+}
+
+/**
+ * 40-image: every material slot in the scene whose texture was made from the library image
+ * with this content hash — what a save in the Image editor re-textures.
+ * @param {string} hash @returns {{uuid: string, slot: number}[]}
+ */
+export function texturesFromSource(hash) {
+	const want = String(hash ?? '');
+	/** @type {{uuid: string, slot: number}[]} */
+	const out = [];
+	if (!want) return out;
+	get(objectsGroup)?.traverse?.((/** @type {any} */ node) => {
+		materialsOf(node).forEach((/** @type {any} */ m, /** @type {number} */ slot) => {
+			if (m?.userData?.mapSource === want && m.userData.mapDataUrl) out.push({ uuid: node.uuid, slot });
+		});
+	});
+	return out;
+}
+
+/**
+ * 40-image: name the library image a texture already IS, without re-encoding it (the Image
+ * editor imported a texture that had no source). The texture is unchanged, so no history
+ * entry; the message carries the same pixels plus the link so every peer agrees.
+ * @param {string} uuid @param {number} slot @param {string} hash
+ */
+export function linkTextureSource(uuid, slot, hash) {
+	const object = objectOf(uuid);
+	const material = materialAt(object, slot);
+	const url = material?.userData?.mapDataUrl;
+	if (!material || !url || !hash) return false;
+	material.userData.mapSource = String(hash);
+	broadcast({
+		type: 'objectParameters',
+		parameter: 'map',
+		uuid,
+		map: url,
+		...(slot ? { slot } : {}),
+		source: String(hash)
+	});
+	return true;
 }
 
 /** @param {string} uuid @param {number} [slot] */
@@ -542,6 +611,7 @@ export function switchMaterialType(uuid, type, replicate = true) {
 		if ('map' in fresh && old.map) {
 			fresh.map = old.map;
 			fresh.userData.mapDataUrl = old.userData?.mapDataUrl;
+			if (old.userData?.mapSource) fresh.userData.mapSource = old.userData.mapSource;
 		}
 		fresh.transparent = old.transparent;
 		if ('wireframe' in fresh && old.wireframe !== undefined) fresh.wireframe = old.wireframe;
diff --git a/src/lib/storageUsage.js b/src/lib/storageUsage.js
index 8e27394e4..f34eccd5b 100644
--- a/src/lib/storageUsage.js
+++ b/src/lib/storageUsage.js
@@ -65,6 +65,7 @@ import { fmtBytes } from './transferLedger';
 import { loadPackCacheIndex, packCacheIndex, deletePackCache, clearPackCache } from './packCache';
 import { clearMeasuredDims } from './placementDims';
 import { PACKS_BASE, packs } from './packs';
+import { listImageVersions, forgetImageVersions, isImageVersionKey } from './image/imageVersions'; // 40-image
 
 /**
  * ONE formatter, not a fifth. The app already had four byte formatters (Explorer's
@@ -205,6 +206,11 @@ export const CATEGORIES = [
 		label: 'VR sleeve slots',
 		note: 'The objects on your VR forearm strip.'
 	},
+	{
+		key: 'imageversions',
+		label: 'Image versions',
+		note: 'Earlier states of images you edited in the Image editor (the original is always kept). Removing an image\'s versions keeps the image as it is now.'
+	},
 	{
 		key: 'other',
 		label: 'Other',
@@ -668,6 +674,28 @@ export async function scanStorage() {
 				continue;
 			}
 
+			// ---- 40-image: per-image version history ----------------------------------
+			// ONE row per image, from its list's recorded sizes (the never-read-blobs rule);
+			// the blob keys are covered by that row and skipped here.
+			if (isImageVersionKey(key)) {
+				if (key.startsWith('imgver:list:')) {
+					const itemId = key.slice('imgver:list:'.length);
+					const list = await listImageVersions(itemId);
+					const item = visible.get(itemId) ?? hidden.get(itemId);
+					push({
+						id: key,
+						category: 'imageversions',
+						label: item?.name ?? 'An image no longer in the library',
+						sub: list.length + ' version' + (list.length === 1 ? '' : 's'),
+						bytes: list.reduce((n, v) => n + (v.size || 0), 0),
+						removable: true,
+						kind: 'imgver',
+						ref: itemId
+					});
+				}
+				continue;
+			}
+
 			// ---- anything else --------------------------------------------------------
 			push({
 				id: key,
@@ -783,6 +811,9 @@ export async function reclaimRow(row) {
 			case 'packdims':
 				await clearMeasuredDims();
 				return row.bytes;
+			case 'imgver':
+				await forgetImageVersions(String(row.ref));
+				return row.bytes;
 			case 'raw':
 				// THE ONE DIRECT DELETE. Nothing in this build reads this key, so there is
 				// no index to keep consistent and no module to route through.
diff --git a/tests/e2e/image-editor.test.cjs b/tests/e2e/image-editor.test.cjs
new file mode 100644
index 000000000..9e44a67bc
--- /dev/null
+++ b/tests/e2e/image-editor.test.cjs
@@ -0,0 +1,441 @@
+// 40-image (roadmap 40 F13) — IMAGES: a big one becomes a texture, and the Image editor.
+//
+// The user's report (image-large.jpg): a phone photo picked as a texture was REFUSED with
+// "Image is too large (max 8 MB)" although the texture path shrinks every image to 1024 px.
+// And the ask: an Image editor (the UV window's canvas + a right sidebar) with crop,
+// rotate/flip, resize, brightness/contrast/saturation, Save, Save as copy, per-image
+// version history with Restore original — and textures made from an image follow its saves.
+//
+//   §1  a 14 MB photo through the Inspector's real file input becomes a 1024 px texture, on both peers
+//   §2  a library image textures a box and the box REMEMBERS it (mapSource, both peers)
+//   §3  the preview window's Edit button opens the editor on that image
+//   §4  rotate + the editor's own undo/redo (Ctrl+Z) never touch the scene's undo
+//   §5  a crop drawn with the real mouse, applied with Enter
+//   §6  brightness + Save: the same record, a version kept, the linked texture updated on BOTH
+//       peers, and the texture picked from disk (no link) left alone
+//   §7  Versions ▸ Restore original
+//   §8  Save as copy leaves the original and its texture alone
+//   §9  the Inspector's Edit on an unlinked texture puts it in the library and links it
+//   §10 closing with unsaved edits asks first
+//   §11 phone: the editor is a sheet that leaves Play uncovered, and a TOUCH drag crops
+//
+// Run: APP_URL='https://localhost:5395/' npm run e2e -- image-editor
+const h = require('./helpers.cjs');
+const zlib = require('zlib');
+
+/** a W x H PNG of random noise — incompressible, so it really is big */
+function noisePng(w, hh) {
+	const row = w * 3 + 1;
+	const raw = Buffer.alloc(row * hh);
+	for (let y = 0; y < hh; y++) {
+		raw[y * row] = 0;
+		require('crypto').randomFillSync(raw, y * row + 1, w * 3);
+	}
+	const chunk = (type, data) => {
+		const len = Buffer.alloc(4);
+		len.writeUInt32BE(data.length);
+		const body = Buffer.concat([Buffer.from(type), data]);
+		const crc = Buffer.alloc(4);
+		crc.writeUInt32BE(zlib.crc32(body) >>> 0);
+		return Buffer.concat([len, body, crc]);
+	};
+	const ihdr = Buffer.alloc(13);
+	ihdr.writeUInt32BE(w, 0);
+	ihdr.writeUInt32BE(hh, 4);
+	ihdr.set([8, 2, 0, 0, 0], 8);
+	return Buffer.concat([
+		Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]),
+		chunk('IHDR', ihdr),
+		chunk('IDAT', zlib.deflateSync(raw, { level: 1 })),
+		chunk('IEND', Buffer.alloc(0))
+	]);
+}
+
+/** wait until `fn` resolves truthy (or the time runs out) — the checks after it decide */
+async function until(fn, ms = 8000) {
+	const end = Date.now() + ms;
+	while (Date.now() < end) {
+		try {
+			if (await fn()) return true;
+		} catch {}
+		await new Promise((r) => setTimeout(r, 250));
+	}
+	return false;
+}
+
+/** run in the page with the debug stores */
+const S = (p, fn, arg) => p.page.evaluate(fn, arg);
+
+/** the width x height of a dataURL / blob url image, decoded in the page */
+const dims = (p, url) =>
+	S(
+		p,
+		(u) =>
+			new Promise((res) => {
+				const im = new Image();
+				im.onload = () => res([im.naturalWidth, im.naturalHeight]);
+				im.onerror = () => res([0, 0]);
+				im.src = u;
+			}),
+		url
+	);
+
+/** a box's slot-0 texture facts @param {any} p @param {string} uuid */
+const texOf = (p, uuid) =>
+	S(
+		p,
+		async (id) => {
+			const s = window.__stores;
+			const g = await new Promise((r) => s.objectsGroup.subscribe(r)());
+			const m = g.getObjectByProperty('uuid', id)?.material;
+			return { url: m?.userData?.mapDataUrl ?? null, source: m?.userData?.mapSource ?? null, hasMap: !!m?.map };
+		},
+		uuid
+	);
+
+const itemOf = (p, id) => S(p, (i) => {
+	const it = window.__stores.explorer.itemById(i);
+	return it && { id: it.id, name: it.name, hash: it.hash, folderId: it.folderId ?? null };
+}, id);
+
+const sizeText = (p) => p.page.locator('#image-editor-size').textContent();
+
+/** the first pixel of a library item's bytes */
+const firstPixel = (p, id) =>
+	S(
+		p,
+		async (i) => {
+			const blob = await window.__stores.explorer.itemBlob(i);
+			const bmp = await createImageBitmap(blob);
+			const c = document.createElement('canvas');
+			c.width = bmp.width;
+			c.height = bmp.height;
+			const ctx = c.getContext('2d');
+			ctx.drawImage(bmp, 0, 0);
+			return { w: bmp.width, h: bmp.height, px: Array.from(ctx.getImageData(0, 0, 1, 1).data) };
+		},
+		id
+	);
+
+/** image px -> page px, from the canvas and the editor's own fit rule (24 px margin, centred) */
+async function imageToPage(p, ix, iy, w, hh) {
+	const box = await p.page.locator('#image-editor-canvas-wrap').boundingBox();
+	const scale = Math.min((box.width - 24) / w, (box.height - 24) / hh);
+	const ox = box.x + (box.width - w * scale) / 2;
+	const oy = box.y + (box.height - hh * scale) / 2;
+	return { x: ox + ix * scale, y: oy + iy * scale };
+}
+
+h.run(async () => {
+	// the GPU backend: on software GL two pages plus a 14 MB photo starve the compositor (round trips ~1 s, measured)
+	const browser = await h.launch({ args: h.GPU_ARGS });
+	const A = await h.setupPage(browser, 'A', { context: { viewport: { width: 1440, height: 900 } } });
+	const B = await h.setupPage(browser, 'B', { context: { viewport: { width: 1280, height: 800 } } });
+	await S(A, () => window.__stores.explorer.loadExplorer());
+	await h.connect(B, A);
+	await A.page.waitForTimeout(1500);
+
+	// two boxes, created on A and replicated to B
+	await S(A, () => {
+		window.__stores.commandsHandler.sceneCommand('/create Box 1 1 1');
+		window.__stores.commandsHandler.sceneCommand('/create Box 1 1 1');
+	});
+	await A.page.waitForTimeout(900);
+	const [box1, box2] = await S(A, async () => {
+		const g = await new Promise((r) => window.__stores.objectsGroup.subscribe(r)());
+		const boxes = g.children.slice(-2);
+		boxes[1].position.set(2, 0, 0);
+		return boxes.map((b) => b.uuid);
+	});
+	await until(async () => !!(await texOf(B, box2)).hasMap || (await S(B, async (id) => {
+		const g = await new Promise((r) => window.__stores.objectsGroup.subscribe(r)());
+		return !!g.getObjectByProperty('uuid', id);
+	}, box2)), 8000);
+
+	// ---- §1 the big photo -------------------------------------------------------------
+	const big = noisePng(2400, 2000);
+	h.check(big.length > 8 * 1024 * 1024, `PREMISE: the photo is over the old 8 MB cap (${(big.length / 1048576).toFixed(1)} MB)`);
+	await S(A, (id) => window.__stores.objectActions.selectObject(id, true), box1);
+	await A.page.waitForTimeout(700);
+	await A.page.locator('#texture-file').setInputFiles({ name: 'photo.png', mimeType: 'image/png', buffer: big });
+	await until(async () => !!(await texOf(A, box1)).url, 20000);
+	const t1 = await texOf(A, box1);
+	const toasts = await S(A, () => document.body.innerText);
+	h.check(!/too large/i.test(toasts), 'no "too large" refusal');
+	h.check(!!t1.url && t1.hasMap, 'the photo became the texture');
+	const d1 = await dims(A, t1.url);
+	h.check(d1[0] === 1024 && d1[1] === 853, `it was shrunk to fit 1024 px, aspect kept (${d1.join('×')})`);
+	h.check(!t1.source, 'a file picked from disk carries no library link');
+	await until(async () => !!(await texOf(B, box1)).url, 10000);
+	h.check(!!(await texOf(B, box1)).url, 'the peer received the texture too');
+
+	// ---- §2 a library image textures box2, and the box remembers it ------------------
+	const quad = await S(A, async () => {
+		const c = document.createElement('canvas');
+		c.width = 64;
+		c.height = 48;
+		const ctx = c.getContext('2d');
+		ctx.fillStyle = '#c03030'; ctx.fillRect(0, 0, 32, 24);
+		ctx.fillStyle = '#30c030'; ctx.fillRect(32, 0, 32, 24);
+		ctx.fillStyle = '#3030c0'; ctx.fillRect(0, 24, 32, 24);
+		ctx.fillStyle = '#c0c030'; ctx.fillRect(32, 24, 32, 24);
+		const blob = await new Promise((r) => c.toBlob(r, 'image/png'));
+		const rec = await window.__stores.explorer.addItemFromBytes(await blob.arrayBuffer(), 'quad.png', null, { imported: true });
+		return { id: rec.id, hash: rec.hash };
+	});
+	await S(A, ({ uuid, id }) => window.__stores.explorerDrop.applyExplorerImage(uuid, { id }), { uuid: box2, id: quad.id });
+	await until(async () => (await texOf(A, box2)).source === quad.hash, 8000);
+	h.check((await texOf(A, box2)).source === quad.hash, 'the textured box remembers which library image it shows');
+	await until(async () => (await texOf(B, box2)).source === quad.hash, 10000);
+	h.check((await texOf(B, box2)).source === quad.hash, 'so does the peer (the link rides the map message)');
+	const before2 = await texOf(B, box2);
+
+	// ---- §3 the preview window's Edit button opens the editor ------------------------
+	await S(A, () => {
+		window.__stores.inspectorClose.set(true);
+		window.__stores.objectActions.deselectObject?.();
+	});
+	await A.page.waitForTimeout(400);
+	await S(A, async (id) => {
+		const s = window.__stores;
+		const blob = await s.explorer.itemBlob(id);
+		s.fileWindows.openFilePreview({ title: 'quad.png', kind: 'image', itemId: id, name: 'quad.png', url: URL.createObjectURL(blob) });
+	}, quad.id);
+	await A.page.locator('#preview-edit').waitFor({ timeout: 8000 });
+	await A.page.locator('#preview-edit').click({ timeout: 30000 });
+	await A.page.locator('#image-editor-window').waitFor({ timeout: 15000 }).catch(async () => {
+		console.log('  errors: ' + JSON.stringify(h.pageErrors(A).slice(-4)));
+		console.log('  console: ' + JSON.stringify(A.page.__console.filter((m) => m.type === 'error' || m.type === 'warning').slice(-8)));
+		console.log('  target: ' + JSON.stringify(await S(A, () => new Promise((r) => window.__stores.imageEditor.imageEditorTarget.subscribe(r)()))));
+		throw new Error('the editor window did not appear');
+	});
+	await until(async () => /64 × 48/.test((await sizeText(A)) ?? ''), 8000);
+	h.check(/64 × 48/.test((await sizeText(A)) ?? ''), `the editor opened on the image (${await sizeText(A)})`);
+	await S(A, () => window.__stores.fileWindows.previewWindows.set([]));
+	// the editor draws the picture (a canvas that stayed blank would read all-zero)
+	const alphaAt = () => S(A, () => {
+		const c = document.querySelector('#image-editor-canvas');
+		const ctx = c.getContext('2d');
+		const d = ctx.getImageData(Math.floor(c.width / 4), Math.floor(c.height / 2), 1, 1).data;
+		return d[3];
+	});
+	// the first draw lands on a frame after the bytes decode, so wait for it rather than sample once
+	await until(async () => (await alphaAt()) > 0, 4000);
+	const drawn = await alphaAt();
+	h.check(drawn > 0, 'the canvas shows the image');
+
+	// ---- §4 rotate + the editor's own undo ---------------------------------------------
+	const sceneUndo = () => S(A, () => new Promise((r) => window.__stores.history.undoStack.subscribe((v) => r(v.length))()));
+	const undoBefore = await sceneUndo();
+	await A.page.locator('#image-editor-rotate-cw').click();
+	h.check(/48 × 64/.test((await sizeText(A)) ?? ''), 'rotate turns 64×48 into 48×64');
+	await A.page.locator('#image-editor-canvas-wrap').click({ position: { x: 5, y: 5 } });
+	await A.page.keyboard.press('Control+z');
+	h.check(/64 × 48/.test((await sizeText(A)) ?? ''), 'Ctrl+Z undoes it inside the editor');
+	await A.page.keyboard.press('Control+Shift+z');
+	h.check(/48 × 64/.test((await sizeText(A)) ?? ''), 'Ctrl+Shift+Z redoes it');
+	await A.page.keyboard.press('Control+z');
+	h.check((await sceneUndo()) === undoBefore, `the scene's undo stack is untouched (${undoBefore} → ${await sceneUndo()})`);
+	h.check(!!(await texOf(A, box2)).hasMap, 'and the scene is untouched — no box lost its texture');
+
+	// ---- §5 crop with the real mouse --------------------------------------------------
+	await A.page.locator('#image-editor-crop').click();
+	const p0 = await imageToPage(A, 8, 8, 64, 48);
+	const p1 = await imageToPage(A, 40, 32, 64, 48);
+	// a press OUTSIDE the default full-image box starts a new one, so start just off the image first
+	await A.page.mouse.move(p0.x, p0.y);
+	await A.page.mouse.down();
+	await A.page.mouse.move((p0.x + p1.x) / 2, (p0.y + p1.y) / 2, { steps: 4 });
+	await A.page.mouse.move(p1.x, p1.y, { steps: 4 });
+	await A.page.mouse.up();
+	const cropText = await A.page.locator('#image-editor-crop-badge').textContent();
+	h.check(/Crop \d+ × \d+/.test(cropText ?? ''), `a crop box is showing (${cropText})`);
+	await A.page.keyboard.press('Enter');
+	const afterCrop = (await sizeText(A)) ?? '';
+	const [cw, ch] = (afterCrop.match(/(\d+) × (\d+)/) ?? []).slice(1).map(Number);
+	h.check(Math.abs(cw - 32) <= 1 && Math.abs(ch - 24) <= 1, `Enter applied the dragged crop (${afterCrop})`);
+
+	// ---- §6 brightness + Save -----------------------------------------------------------
+	const bright = A.page.locator('#image-editor-brightness');
+	await bright.click();
+	await bright.fill('40');
+	await bright.press('Enter');
+	await A.page.waitForTimeout(300);
+	const box1Before = await texOf(A, box1);
+	await A.page.locator('#image-editor-save').click();
+	await until(async () => (await itemOf(A, quad.id))?.hash !== quad.hash, 20000);
+	const saved = await itemOf(A, quad.id);
+	h.check(saved && saved.hash !== quad.hash, 'Save replaced the bytes');
+	h.check(saved?.id === quad.id && saved?.name === 'quad.png', 'in the SAME library record (id and name kept)');
+	const px = await firstPixel(A, quad.id);
+	h.check(Math.abs(px.w - 32) <= 1 && Math.abs(px.h - 24) <= 1, `the saved file is the cropped size (${px.w}×${px.h})`);
+	h.check(px.px[0] > 0xc0 + 40 && px.px[1] > 0x30 + 40, `the saved pixel is the red quadrant brightened (${px.px.slice(0, 3)})`);
+	const versions = await S(A, (id) => window.__stores.imageVersions.listImageVersions(id), quad.id);
+	h.check(versions.length === 2 && versions[0].label === 'Original' && versions[0].hash === quad.hash, `two versions, the first is the Original (${versions.map((v) => v.label)})`);
+	await until(async () => (await texOf(A, box2)).source === saved.hash, 8000);
+	const a2 = await texOf(A, box2);
+	h.check(a2.source === saved.hash, 'the linked box now names the new bytes');
+	h.check(JSON.stringify(await dims(A, a2.url)) === JSON.stringify([px.w, px.h]), 'and shows them (its texture is the cropped image)');
+	await until(async () => (await texOf(B, box2)).source === saved.hash, 10000);
+	const b2 = await texOf(B, box2);
+	h.check(b2.source === saved.hash && b2.url !== before2.url, 'the PEER\'s box updated too');
+	h.check((await texOf(A, box1)).url === box1Before.url, 'the texture picked from disk (no link) was left alone');
+
+	// ---- §7 Restore original ------------------------------------------------------------
+	await A.page.locator('[data-ws-mode="history"]').click();
+	await A.page.locator('#image-editor-restore-original').click();
+	await until(async () => (await itemOf(A, quad.id))?.hash === quad.hash, 20000);
+	h.check((await itemOf(A, quad.id))?.hash === quad.hash, 'Restore original put the original bytes back');
+	await until(async () => /64 × 48/.test((await sizeText(A)) ?? ''), 6000);
+	h.check(/64 × 48/.test((await sizeText(A)) ?? ''), 'the editor reloaded the original');
+	await until(async () => (await texOf(B, box2)).source === quad.hash, 10000);
+	h.check((await texOf(B, box2)).source === quad.hash, 'and the peer\'s texture went back with it');
+	const v2 = await S(A, (id) => window.__stores.imageVersions.listImageVersions(id), quad.id);
+	h.check(v2.length === 2, `restoring adds no duplicate version (${v2.length})`);
+	const current = await A.page.locator('.ie-version-current .ie-version-label').textContent();
+	h.check(/Original/.test(current ?? ''), `the Original row is marked current ("${current}")`);
+	await A.page.locator('[data-ws-mode="edit"]').click();
+
+	// ---- §8 Save as copy ---------------------------------------------------------------
+	await A.page.locator('#image-editor-flip-h').click();
+	await A.page.locator('#image-editor-save-copy').click();
+	await until(async () => !!(await S(A, () => window.__stores.explorer.allItems().find((i) => i.name === 'quad copy.png'))), 8000);
+	const copy = await S(A, () => {
+		const it = window.__stores.explorer.allItems().find((i) => i.name === 'quad copy.png');
+		return it && { id: it.id, hash: it.hash };
+	});
+	h.check(!!copy && copy.id !== quad.id, 'Save as copy made "quad copy.png" beside it');
+	h.check((await itemOf(A, quad.id))?.hash === quad.hash, 'the original image is unchanged');
+	h.check((await texOf(A, box2)).source === quad.hash, 'and so is the texture made from it');
+	const title = await A.page.locator('#image-editor-window .ie-title').textContent();
+	h.check(/quad copy\.png/.test(title ?? ''), `the editor carries on with the copy ("${title?.trim()}")`);
+
+	// ---- §9 the Inspector's Edit on an unlinked texture --------------------------------
+	await S(A, () => window.__stores.imageEditor.closeImageEditor());
+	await S(A, (id) => window.__stores.objectActions.selectObject(id, true), box1);
+	await A.page.waitForTimeout(600);
+	await A.page.locator('#texture-edit').click();
+	await A.page.locator('#image-editor-window').waitFor({ timeout: 8000 }).catch(async () => {
+		console.log('  console after Edit: ' + JSON.stringify(A.page.__console.filter((m) => m.type === 'error' || m.type === 'warning').slice(-6)));
+		console.log('  toasts: ' + (await S(A, () => document.querySelector('.toasts-stack')?.textContent?.slice(0, 300))));
+	});
+	const linked = await texOf(A, box1);
+	const made = await S(A, (hash) => {
+		const it = window.__stores.explorer.itemByHash(hash);
+		return it && { name: it.name, kind: it.kind };
+	}, linked.source);
+	h.check(!!linked.source && made?.kind === 'image', `the texture went into the library and is linked (${made?.name})`);
+	await until(async () => /1024 × 853/.test((await sizeText(A)) ?? ''), 8000);
+	h.check(/1024 × 853/.test((await sizeText(A)) ?? ''), 'and the editor opened on it');
+	await until(async () => (await texOf(B, box1)).source === linked.source, 10000);
+	h.check((await texOf(B, box1)).source === linked.source, 'the peer learned the link');
+
+	// ---- §10 closing with unsaved edits asks first --------------------------------------
+	await A.page.locator('#image-editor-rotate-cw').click();
+	await A.page.locator('#image-editor-close').click();
+	await A.page.locator('#confirm-dialog-close').waitFor({ timeout: 5000 });
+	await A.page.locator('#confirm-dialog-cancel').click();
+	h.check(await A.page.locator('#image-editor-window').isVisible(), '"Keep editing" keeps the window and the edit');
+	await A.page.locator('#image-editor-close').click();
+	await A.page.locator('#confirm-dialog-close').click();
+	await until(async () => !(await A.page.locator('#image-editor-window').count()), 4000);
+	h.check(!(await A.page.locator('#image-editor-window').count()), '"Discard and close" closes it');
+
+	// ---- §12 the storage breakdown names the version history and can reclaim it -------
+	const scan = await S(A, async (id) => {
+		const su = window.__stores.storageUsage;
+		const r = await su.scanStorage();
+		const cat = r.categories.find((c) => c.key === 'imageversions');
+		const row = cat?.rows.find((x) => x.ref === id);
+		const other = r.categories.find((c) => c.key === 'other')?.rows.some((x) => String(x.ref).startsWith('imgver:'));
+		let after = -1;
+		if (row) {
+			await su.reclaimRow(row);
+			after = (await window.__stores.imageVersions.listImageVersions(id)).length;
+		}
+		return { label: row?.label, bytes: row?.bytes ?? 0, other: !!other, after, image: !!window.__stores.explorer.itemById(id) };
+	}, quad.id);
+	h.check(scan.label === 'quad.png' && scan.bytes > 0, `Storage lists quad.png's versions as "Image versions" (${scan.label}, ${scan.bytes} B)`);
+	h.check(!scan.other, 'and none of their keys fall into "Other"');
+	h.check(scan.after === 0 && scan.image, 'reclaiming them forgets the history and keeps the image');
+
+	// ---- §11 phone: a sheet that leaves Play free, and a touch crop ----------------------
+	const P = await h.setupPage(browser, 'P', { context: { viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true, deviceScaleFactor: 2 } });
+	const pq = await S(P, async () => {
+		const c = document.createElement('canvas');
+		c.width = 80;
+		c.height = 60;
+		const ctx = c.getContext('2d');
+		ctx.fillStyle = '#3070d0';
+		ctx.fillRect(0, 0, 80, 60);
+		const blob = await new Promise((r) => c.toBlob(r, 'image/png'));
+		const rec = await window.__stores.explorer.addItemFromBytes(await blob.arrayBuffer(), 'phone.png', null, {});
+		window.__stores.imageEditor.openImageEditor(rec.id);
+		return rec.id;
+	});
+	await P.page.locator('#image-editor-window').waitFor({ timeout: 8000 });
+	await until(async () => /80 × 60/.test((await sizeText(P)) ?? ''), 8000);
+	// toasts (the quality governor's, on a phone) sit over the sheet's top; they are not under test
+	await S(P, () => document.querySelectorAll('.toasts-stack .tp-toast-x').forEach((b) => b.click()));
+	await P.page.waitForTimeout(300);
+	const win = await P.page.locator('#image-editor-window').boundingBox();
+	h.check(win && win.x <= 1 && win.width >= 388, `on a phone the editor is full width (${win?.x}, ${win?.width})`);
+	// the phone shell's Play lives in its bottom bar (#ps-play); the desktop pill is hidden there
+	const playSel = (await S(P, () => document.documentElement.classList.contains('phone-shell'))) ? '#ps-play' : '#play-button';
+	const play = await P.page.locator(playSel).boundingBox();
+	h.check(!!play && win.y + win.height <= play.y + 1, `it ends above Play (sheet bottom ${Math.round(win.y + win.height)}, ${playSel} top ${Math.round(play?.y ?? -1)})`);
+	const hitPlay = await S(P, (sel) => {
+		const b = document.querySelector(sel).getBoundingClientRect();
+		return !!document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2)?.closest(sel);
+	}, playSel);
+	h.check(hitPlay, 'Play is still the thing under a tap');
+	const head = await S(P, () => {
+		const b = document.querySelector('#image-editor-close').getBoundingClientRect();
+		return !!document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2)?.closest('#image-editor-close');
+	});
+	h.check(head, 'the top bar does not cover the editor\'s close button');
+	const stack = await S(P, () => {
+		const c = document.querySelector('#image-editor-canvas-wrap').getBoundingClientRect();
+		const p = document.querySelector('#image-editor-window .ws-panel-secondary').getBoundingClientRect();
+		return { cw: Math.round(c.width), below: p.top >= c.bottom - 1, pw: Math.round(p.width) };
+	});
+	h.check(stack.cw >= 380 && stack.below && stack.pw >= 380, `the panel stacks under a full-width canvas (canvas ${stack.cw} px, panel ${stack.pw} px, below: ${stack.below})`);
+	await P.page.locator('#image-editor-crop').tap();
+	await P.page.locator('#image-editor-crop-badge').waitFor({ timeout: 4000 });
+	await P.page.waitForTimeout(300); // crop mode re-lays the panel out; aim after it settles
+	const q0 = await imageToPage(P, 10, 10, 80, 60);
+	const q1 = await imageToPage(P, 50, 40, 80, 60);
+	const cdp = await P.ctx.newCDPSession(P.page);
+	const touch = (type, pt) => cdp.send('Input.dispatchTouchEvent', { type, touchPoints: pt ? [{ x: pt.x, y: pt.y, id: 1 }] : [] });
+	await touch('touchStart', q0);
+	for (let i = 1; i <= 6; i++) await touch('touchMove', { x: q0.x + ((q1.x - q0.x) * i) / 6, y: q0.y + ((q1.y - q0.y) * i) / 6 });
+	await touch('touchEnd');
+	await P.page.waitForTimeout(200);
+	const dragged = await P.page.locator('#image-editor-crop-badge').textContent();
+	h.check(/Crop 4\d × 3\d/.test(dragged ?? ''), `the touch drag drew a crop box (${dragged})`);
+	// entering crop mode brought Apply into the panel's view, clear of the bottom bar
+	const apply = await S(P, () => {
+		const b = document.querySelector('#image-editor-crop-apply').getBoundingClientRect();
+		return !!document.elementFromPoint(b.x + b.width / 2, b.y + b.height / 2)?.closest('#image-editor-crop-apply');
+	});
+	h.check(apply, 'Apply crop is in view and under a tap (not under the bottom bar)');
+	await P.page.locator('#image-editor-crop-apply').tap();
+	const phoneSize = (await sizeText(P)) ?? '';
+	const [pw, ph] = (phoneSize.match(/(\d+) × (\d+)/) ?? []).slice(1).map(Number);
+	h.check(Math.abs(pw - 40) <= 1 && Math.abs(ph - 30) <= 1, `a touch drag cropped the image (${phoneSize})`);
+	// the sidebar's scroller is shared by Edit and Versions: scrolled down in Edit, Versions
+	// must still open at its top (it opened scrolled past a short list, which read as empty)
+	await S(P, () => (document.querySelector('#image-editor-window .ws-panel-secondary .overflow-y-auto').scrollTop = 600));
+	await P.page.locator('[data-ws-mode="history"]').tap();
+	await P.page.waitForTimeout(300);
+	const vis = await S(P, () => {
+		const pane = document.querySelector('#image-editor-history').getBoundingClientRect();
+		const box = document.querySelector('#image-editor-window .ws-panel-secondary .overflow-y-auto').getBoundingClientRect();
+		return { pane: Math.round(pane.top), box: Math.round(box.top) };
+	});
+	h.check(vis.pane >= vis.box - 1, `Versions opens at its top after a scrolled Edit panel (pane top ${vis.pane}, scroller top ${vis.box})`);
+	void pq;
+
+	h.check(h.pageErrors(A).length === 0 && h.pageErrors(P).length === 0, 'no page errors');
+	await h.finish(browser);
+});
diff --git a/tests/unit/imageOps.test.js b/tests/unit/imageOps.test.js
new file mode 100644
index 000000000..20cc77e8b
--- /dev/null
+++ b/tests/unit/imageOps.test.js
@@ -0,0 +1,159 @@
+// 40-image (F13): the Image editor's pixel maths, with no canvas.
+import { describe, it, expect } from 'vitest';
+import {
+	makeRaster,
+	clampRect,
+	aspectRect,
+	cropRaster,
+	rotateRaster,
+	flipRaster,
+	resizeRaster,
+	adjustRaster,
+	isIdentityAdjust,
+	fitSize,
+	nearestPow2,
+	encodingFor,
+	MAX_SIDE
+} from '../../src/lib/image/imageOps.js';
+
+/** a W x H raster whose pixel (x, y) is [x, y, x + y, 255] — every pixel distinct and readable */
+/** @param {number} W @param {number} H */
+function grid(W, H) {
+	const img = makeRaster(W, H);
+	for (let y = 0; y < H; y++)
+		for (let x = 0; x < W; x++) img.data.set([x, y, x + y, 255], (y * W + x) * 4);
+	return img;
+}
+/** @param {import('../../src/lib/image/imageOps.js').Raster} img @param {number} x @param {number} y */
+const px = (img, x, y) => Array.from(img.data.subarray((y * img.width + x) * 4, (y * img.width + x) * 4 + 4));
+
+describe('clampRect / aspectRect', () => {
+	it('normalises a backwards drag and keeps the rect inside', () => {
+		expect(clampRect({ x: 10, y: 8, w: -6, h: -4 }, 20, 20)).toEqual({ x: 4, y: 4, w: 6, h: 4 });
+		expect(clampRect({ x: -5, y: -5, w: 100, h: 100 }, 20, 10)).toEqual({ x: 0, y: 0, w: 20, h: 10 });
+		expect(clampRect({ x: 3, y: 3, w: 0, h: 0 }, 20, 10)).toEqual({ x: 3, y: 3, w: 1, h: 1 });
+	});
+	it('fits the largest centred box of a ratio', () => {
+		expect(aspectRect(200, 100, 1)).toEqual({ x: 50, y: 0, w: 100, h: 100 });
+		expect(aspectRect(100, 200, 16 / 9)).toEqual({ x: 0, y: 72, w: 100, h: 56 });
+		expect(aspectRect(30, 20, 0)).toEqual({ x: 0, y: 0, w: 30, h: 20 });
+	});
+});
+
+describe('crop / rotate / flip', () => {
+	const img = grid(4, 3);
+	it('crops to exactly the rect', () => {
+		const out = cropRaster(img, { x: 1, y: 1, w: 2, h: 2 });
+		expect([out.width, out.height]).toEqual([2, 2]);
+		expect(px(out, 0, 0)).toEqual([1, 1, 2, 255]);
+		expect(px(out, 1, 1)).toEqual([2, 2, 4, 255]);
+	});
+	it('rotates clockwise: the top-left corner lands top-right', () => {
+		const cw = rotateRaster(img, 1);
+		expect([cw.width, cw.height]).toEqual([3, 4]);
+		expect(px(cw, 2, 0)).toEqual(px(img, 0, 0));
+		expect(px(cw, 0, 0)).toEqual(px(img, 0, 2)); // bottom-left comes to the top-left
+		const ccw = rotateRaster(img, -1);
+		expect(px(ccw, 0, 3)).toEqual(px(img, 0, 0)); // counter-clockwise: to the bottom-left
+	});
+	it('four quarter turns and two flips are the identity', () => {
+		let r = img;
+		for (let i = 0; i < 4; i++) r = rotateRaster(r, 1);
+		expect(Array.from(r.data)).toEqual(Array.from(img.data));
+		expect(Array.from(flipRaster(flipRaster(img, 'h'), 'h').data)).toEqual(Array.from(img.data));
+		expect(Array.from(rotateRaster(img, 2).data)).toEqual(Array.from(flipRaster(flipRaster(img, 'h'), 'v').data));
+	});
+	it('flips about the right axis', () => {
+		expect(px(flipRaster(img, 'h'), 0, 0)).toEqual(px(img, 3, 0));
+		expect(px(flipRaster(img, 'v'), 0, 0)).toEqual(px(img, 0, 2));
+	});
+	it('never mutates its input', () => {
+		const before = Array.from(img.data);
+		cropRaster(img, { x: 0, y: 0, w: 2, h: 2 });
+		rotateRaster(img, 1);
+		flipRaster(img, 'v');
+		resizeRaster(img, 9, 9);
+		adjustRaster(img, { brightness: 50 });
+		expect(Array.from(img.data)).toEqual(before);
+	});
+});
+
+describe('resize', () => {
+	it('an area shrink of a flat image keeps its colour', () => {
+		const flat = makeRaster(64, 64);
+		for (let i = 0; i < flat.data.length; i += 4) flat.data.set([200, 100, 50, 255], i);
+		const out = resizeRaster(flat, 7, 5);
+		expect([out.width, out.height]).toEqual([7, 5]);
+		for (let i = 0; i < out.data.length; i += 4) expect(Array.from(out.data.subarray(i, i + 4))).toEqual([200, 100, 50, 255]);
+	});
+	it('a 2x shrink of a checkerboard averages it (no aliasing)', () => {
+		const ck = makeRaster(8, 8);
+		for (let y = 0; y < 8; y++) for (let x = 0; x < 8; x++) ck.data.set((x + y) % 2 ? [255, 255, 255, 255] : [0, 0, 0, 255], (y * 8 + x) * 4);
+		const out = resizeRaster(ck, 4, 4);
+		for (let i = 0; i < out.data.length; i += 4) expect(Math.abs(out.data[i] - 128)).toBeLessThanOrEqual(1);
+	});
+	it('a transparent neighbour does not darken an opaque edge', () => {
+		const img = makeRaster(2, 1);
+		img.data.set([255, 255, 255, 255, 0, 0, 0, 0]); // white | transparent black
+		const out = resizeRaster(img, 1, 1);
+		expect(out.data[0]).toBe(255);
+		expect(out.data[3]).toBe(128);
+	});
+	it('clamps to MAX_SIDE and at least one pixel', () => {
+		const out = resizeRaster(makeRaster(2, 2), 0, MAX_SIDE * 2);
+		expect([out.width, out.height]).toEqual([1, MAX_SIDE]);
+	});
+	it('a grow interpolates between neighbours', () => {
+		const img = makeRaster(2, 1);
+		img.data.set([0, 0, 0, 255, 200, 200, 200, 255]);
+		const out = resizeRaster(img, 4, 1);
+		const reds = [0, 1, 2, 3].map((x) => out.data[x * 4]);
+		expect(reds[0]).toBe(0);
+		expect(reds[3]).toBe(200);
+		expect(reds[1]).toBeGreaterThan(0);
+		expect(reds[2]).toBeLessThan(200);
+	});
+});
+
+describe('adjust', () => {
+	const mid = makeRaster(1, 1);
+	mid.data.set([100, 150, 200, 77]);
+	it('zero is the identity and alpha is never touched', () => {
+		expect(isIdentityAdjust({ brightness: 0, contrast: 0, saturation: 0 })).toBe(true);
+		expect(Array.from(adjustRaster(mid, {}).data)).toEqual([100, 150, 200, 77]);
+		expect(adjustRaster(mid, { brightness: 40, contrast: 30, saturation: -50 }).data[3]).toBe(77);
+	});
+	it('brightness lifts every channel', () => {
+		const out = adjustRaster(mid, { brightness: 20 });
+		expect(Array.from(out.data.subarray(0, 3))).toEqual([151, 201, 251]);
+	});
+	it('contrast pushes away from mid-grey', () => {
+		const out = adjustRaster(mid, { contrast: 50 });
+		expect(out.data[0]).toBeLessThan(100);
+		expect(out.data[2]).toBeGreaterThan(200);
+	});
+	it('saturation -100 is grey at the pixel luma', () => {
+		const out = adjustRaster(mid, { saturation: -100 });
+		expect(out.data[0]).toBe(out.data[1]);
+		expect(out.data[1]).toBe(out.data[2]);
+		expect(Math.abs(out.data[0] - Math.round(0.2126 * 100 + 0.7152 * 150 + 0.0722 * 200))).toBeLessThanOrEqual(1);
+	});
+});
+
+describe('sizes and encodings', () => {
+	it('fits without enlarging', () => {
+		expect(fitSize(4000, 2000, 1000, 1000)).toEqual({ width: 1000, height: 500, scale: 0.25 });
+		expect(fitSize(100, 50, 1000, 1000).scale).toBe(1);
+	});
+	it('rounds to the nearest power of two', () => {
+		expect(nearestPow2(700)).toBe(512);
+		expect(nearestPow2(800)).toBe(1024);
+		expect(nearestPow2(768)).toBe(1024);
+	});
+	it('keeps a writable format and turns the rest into PNG', () => {
+		expect(encodingFor('a.JPG').type).toBe('image/jpeg');
+		expect(encodingFor('a.webp').type).toBe('image/webp');
+		expect(encodingFor('a.png')).toEqual({ type: 'image/png', name: 'a.png' });
+		expect(encodingFor('anim.gif')).toEqual({ type: 'image/png', name: 'anim.png' });
+	});
+});