aether-engine 1.0.0

package/src/ui/SpriteEditor.tsx

@@ -0,0 +1,3241 @@
+import {
+	createEffect,
+	createRoot,
+	createSignal,
+	For,
+	onCleanup,
+	onMount,
+	Show,
+} from "solid-js";
+import {
+	type AetherEngine,
+	SpriteAnimator,
+	SpriteRenderer,
+	WebGLRenderer,
+} from "../index";
+import {
+	getActiveHistoryId,
+	getHistory,
+	getLatestHistoryId,
+	getNextHistoryId,
+	getPrevHistoryId,
+	pushHistory,
+	setActiveHistoryId,
+	truncateHistoryAfter,
+} from "../utils/idb";
+import { packAtlas } from "../utils/packer";
+import {
+	IconBucket,
+	IconCheck,
+	IconCircle,
+	IconCopy,
+	IconDown,
+	IconDuplicate,
+	IconEraser,
+	IconEye,
+	IconEyeOff,
+	IconFlipHorizontal,
+	IconFlipVertical,
+	IconLine,
+	IconMergeDown,
+	IconPan,
+	IconPaste,
+	IconPencil,
+	IconPlus,
+	IconRect,
+	IconSelect,
+	IconTrash,
+	IconUp,
+	IconX,
+} from "./Icons";
+
+type Tool =
+	| "pencil"
+	| "eraser"
+	| "fill"
+	| "line"
+	| "rect"
+	| "circle"
+	| "pan"
+	| "select";
+
+interface Layer {
+	id: string;
+	name: string;
+	visible: boolean;
+	opacity: number;
+}
+
+interface Frame {
+	id: string;
+	name?: string;
+	width?: number;
+	height?: number;
+	x?: number;
+	y?: number;
+	cels: Record<string, HTMLCanvasElement>;
+}
+
+interface Project {
+	id: string;
+	name: string;
+	width: number;
+	height: number;
+	frames: Frame[];
+	layers: Layer[];
+	activeFrameId: string;
+	activeLayerId: string;
+	isAtlas?: boolean;
+	metadata?: any;
+}
+
+const uid = () => Math.random().toString(36).substring(2, 9);
+const uDark = "#383838";
+const uHeader = "#2D2D2D";
+const uBorder = "#222222";
+const uActive = "#3C3C3C";
+const uAcc = "#3A72B0";
+const uBtn = "#4A4A4A";
+const uText = "#B4B4B4";
+const uActiveText = "#EEEEEE";
+
+export const {
+	projects,
+	setProjects,
+	activeProjId,
+	setActiveProjId,
+	tool,
+	setTool,
+	color,
+	setColor,
+	zoom,
+	setZoom,
+	panX,
+	setPanX,
+	panY,
+	setPanY,
+	saveStatus,
+	setSaveStatus,
+} = createRoot(() => {
+	const [projects, setProjects] = createSignal<Project[]>([]);
+	const [activeProjId, setActiveProjId] = createSignal<string>("");
+	const [tool, setTool] = createSignal<Tool>("pencil");
+	const [color, setColor] = createSignal<string>("#EEEEEE");
+	const [zoom, setZoom] = createSignal<number>(12);
+	const [panX, setPanX] = createSignal<number>(0);
+	const [panY, setPanY] = createSignal<number>(0);
+	const [saveStatus, setSaveStatus] = createSignal<string>("Ready");
+	return {
+		projects,
+		setProjects,
+		activeProjId,
+		setActiveProjId,
+		tool,
+		setTool,
+		color,
+		setColor,
+		zoom,
+		setZoom,
+		panX,
+		setPanX,
+		panY,
+		setPanY,
+		saveStatus,
+		setSaveStatus,
+	};
+});
+
+export function SpriteEditor(props: {
+	engine: AetherEngine;
+	onClose?: () => void;
+	embedded?: boolean;
+}) {
+	const [atlasViewMode, setAtlasViewMode] = createSignal<"subimage" | "atlas">(
+		"subimage",
+	);
+	const [atlasDataUri, setAtlasDataUri] = createSignal<string>("");
+	const [atlasMapW, setAtlasMapW] = createSignal<number>(32);
+	const [atlasMapH, setAtlasMapH] = createSignal<number>(32);
+
+	const [entities, setEntities] = createSignal<
+		{ id: number; renderer: SpriteRenderer; animator?: SpriteAnimator }[]
+	>([]);
+	const [targetEntity, setTargetEntity] = createSignal<number>(-1);
+
+	const [dialog, setDialog] = createSignal<{
+		title: string;
+		placeholder: string;
+		toggleText?: string;
+		onConfirm: (v: string, toggleValue?: boolean) => void;
+		onCancel?: () => void;
+	} | null>(null);
+	const [dialogToggle, setDialogToggle] = createSignal<boolean>(false);
+	let dialogInputRef!: HTMLInputElement;
+
+	const [_tick, setTick] = createSignal(0);
+
+	let compositeCanvasRef!: HTMLCanvasElement;
+	let previewCanvasRef!: HTMLCanvasElement;
+
+	const offscreenFrame = document.createElement("canvas");
+	const offscreenMap = document.createElement("canvas");
+
+	let isDrawing = false;
+	let startX = 0,
+		startY = 0;
+	let lastX = 0,
+		lastY = 0;
+	let isPanning = false;
+	let panStartX = 0,
+		panStartY = 0;
+
+	let currentHistoryId: number | null = null;
+	const setCurrentHistoryId = (id: number) => {
+		currentHistoryId = id;
+		setActiveHistoryId(id);
+	};
+
+	let isRestoringHistory = false;
+
+	interface SelectionBox {
+		x: number;
+		y: number;
+		w: number;
+		h: number;
+	}
+	const [selectionBox, setSelectionBox] = createSignal<SelectionBox | null>(
+		null,
+	);
+	let clipboardData: { w: number; h: number; data: Uint8ClampedArray } | null =
+		null;
+	let isMovingSelection = false;
+	let moveStartX = 0,
+		moveStartY = 0;
+	let movingImageData: ImageData | null = null;
+	let initialSelectionX = 0,
+		initialSelectionY = 0;
+
+	const captureState = () => {
+		return projects().map((p) => ({
+			id: p.id,
+			name: p.name,
+			width: p.width,
+			height: p.height,
+			isAtlas: p.isAtlas,
+			metadata: p.metadata,
+			activeFrameId: p.activeFrameId,
+			activeLayerId: p.activeLayerId,
+			layers: JSON.parse(JSON.stringify(p.layers)),
+			frames: p.frames.map((f) => {
+				const fW = f.width || p.width;
+				const fH = f.height || p.height;
+				const newCels: Record<string, Uint8ClampedArray> = {};
+				Object.keys(f.cels).forEach((lId) => {
+					const ctx = f.cels[lId].getContext("2d", {
+						willReadFrequently: true,
+					})!;
+					newCels[lId] = ctx.getImageData(0, 0, fW, fH).data;
+				});
+				return {
+					id: f.id,
+					name: f.name,
+					width: f.width,
+					height: f.height,
+					x: f.x,
+					y: f.y,
+					cels: newCels,
+				};
+			}),
+		}));
+	};
+
+	const loadState = (serialized: any[]) => {
+		const newProjects = serialized
+			.filter((p) => p.width > 0 && p.height > 0)
+			.map((p) => {
+				return {
+					...p,
+					frames: p.frames.map((f: any) => {
+						const fW = f.width || p.width;
+						const fH = f.height || p.height;
+						const newCels: Record<string, HTMLCanvasElement> = {};
+						Object.keys(f.cels).forEach((lId) => {
+							const cvs = initCel(fW, fH);
+							const ctx = cvs.getContext("2d", { willReadFrequently: true })!;
+							ctx.putImageData(new ImageData(f.cels[lId], fW, fH), 0, 0);
+							newCels[lId] = cvs;
+						});
+						return { ...f, cels: newCels, x: f.x, y: f.y };
+					}),
+				};
+			});
+		setProjects(newProjects);
+		if (newProjects.length > 0 && !activeProjId()) {
+			setActiveProjId(newProjects[newProjects.length - 1].id);
+		}
+
+		// Delay explicitly providing SolidJS physical execution time natively batching `<canvas>` `<For>` arrays safely into DOM!
+		setTimeout(() => syncToEngine(), 10);
+	};
+
+	const pushState = async () => {
+		if (isRestoringHistory) return;
+		const state = captureState();
+		if (currentHistoryId !== null) {
+			await truncateHistoryAfter(currentHistoryId);
+		}
+		setCurrentHistoryId(await pushHistory(state));
+	};
+
+	const initCel = (w: number, h: number) => {
+		const cvs = document.createElement("canvas");
+		cvs.width = w;
+		cvs.height = h;
+		return cvs;
+	};
+
+	const createProject = (
+		name: string,
+		w: number,
+		h: number,
+		isAtlas: boolean = false,
+	) => {
+		const layerId = uid();
+		const frameId = uid();
+		const proj: Project = {
+			id: uid(),
+			name,
+			width: w,
+			height: h,
+			isAtlas,
+			layers: [{ id: layerId, name: "Layer 1", visible: true, opacity: 1.0 }],
+			frames: [
+				{
+					id: frameId,
+					name: isAtlas ? "cell_0" : undefined,
+					width: w,
+					height: h,
+					cels: { [layerId]: initCel(w, h) },
+				},
+			],
+			activeFrameId: frameId,
+			activeLayerId: layerId,
+		};
+		setProjects((p) => [...p, proj]);
+		setActiveProjId(proj.id);
+	};
+
+	const loadProjectFromDisk = async (
+		name: string,
+		engineCols?: number,
+		engineRows?: number,
+		engineAtlasFrames?: { x: number; y: number; w: number; h: number }[],
+	): Promise<Project | null> => {
+		try {
+			const res = await fetch(
+				`/public/assets/sprites/${name}.json?t=${Date.now()}`,
+			);
+			let meta: any = {};
+			let cols = engineCols || 1;
+			let rows = engineRows || 1;
+			let isAtlasJSON = false;
+
+			if (res.ok) {
+				meta = await res.json();
+				isAtlasJSON =
+					meta.frames &&
+					!Array.isArray(meta.frames) &&
+					typeof meta.frames === "object";
+				cols = meta.columns || engineCols || 1;
+				rows = meta.rows || engineRows || 1;
+			}
+
+			const img = new Image();
+			img.src = `/public/assets/sprites/${name}.png`;
+			await new Promise((resolve, reject) => {
+				img.onload = resolve;
+				img.onerror = reject;
+			});
+
+			const projId = uid();
+			const layerId = uid();
+			const frames: Frame[] = [];
+
+			let pW = 32,
+				pH = 32;
+
+			if (isAtlasJSON) {
+				const keys = Object.keys(meta.frames);
+				if (keys.length > 0) {
+					pW =
+						meta.frames[keys[0]].sourceSize?.w || meta.frames[keys[0]].frame.w;
+					pH =
+						meta.frames[keys[0]].sourceSize?.h || meta.frames[keys[0]].frame.h;
+				}
+				keys.forEach((k) => {
+					const rect = meta.frames[k].frame;
+					const cvs = initCel(rect.w, rect.h);
+					const ctx = cvs.getContext("2d", { willReadFrequently: true })!;
+					ctx.drawImage(
+						img,
+						rect.x,
+						rect.y,
+						rect.w,
+						rect.h,
+						0,
+						0,
+						rect.w,
+						rect.h,
+					);
+					frames.push({
+						id: uid(),
+						name: k,
+						width: rect.w,
+						height: rect.h,
+						x: rect.x,
+						y: rect.y,
+						cels: { [layerId]: cvs },
+					});
+				});
+			} else if (engineAtlasFrames && engineAtlasFrames.length > 0) {
+				isAtlasJSON = true;
+				pW = engineAtlasFrames[0].w || 32;
+				pH = engineAtlasFrames[0].h || 32;
+				engineAtlasFrames.forEach((rect, i) => {
+					const cvs = initCel(rect.w, rect.h);
+					const ctx = cvs.getContext("2d", { willReadFrequently: true })!;
+					ctx.drawImage(
+						img,
+						rect.x,
+						rect.y,
+						rect.w,
+						rect.h,
+						0,
+						0,
+						rect.w,
+						rect.h,
+					);
+					frames.push({
+						id: uid(),
+						name: `cell_${i}`,
+						width: rect.w,
+						height: rect.h,
+						x: rect.x,
+						y: rect.y,
+						cels: { [layerId]: cvs },
+					});
+				});
+			} else {
+				pW = Math.floor(img.width / cols);
+				pH = Math.floor(img.height / rows);
+				for (let r = 0; r < rows; r++) {
+					for (let c = 0; c < cols; c++) {
+						const cvs = initCel(pW, pH);
+						const ctx = cvs.getContext("2d", { willReadFrequently: true })!;
+						ctx.drawImage(img, c * pW, r * pH, pW, pH, 0, 0, pW, pH);
+						frames.push({
+							id: uid(),
+							name: `cell_${r}_${c}`,
+							width: pW,
+							height: pH,
+							x: c * pW,
+							y: r * pH,
+							cels: { [layerId]: cvs },
+						});
+					}
+				}
+			}
+
+			return {
+				id: projId,
+				name,
+				width: pW,
+				height: pH,
+				isAtlas: isAtlasJSON,
+				metadata: {
+					...meta,
+					columns: cols,
+					rows: rows,
+					fullWidth: img.width,
+					fullHeight: img.height,
+				},
+				activeFrameId: frames[0]?.id || uid(),
+				activeLayerId: layerId,
+				layers: [{ id: layerId, name: "Layer 1", visible: true, opacity: 1.0 }],
+				frames,
+			};
+		} catch (e) {
+			console.error(`Failed to load ${name} from disk:`, e);
+			return null;
+		}
+	};
+
+	let editorRef!: HTMLDivElement;
+
+	onMount(async () => {
+		if (editorRef) {
+			let pinchAcc = 0;
+			editorRef.addEventListener(
+				"wheel",
+				(e: WheelEvent) => {
+					if (e.ctrlKey || e.metaKey) e.preventDefault();
+					pinchAcc -= e.deltaY; // Negative deltaY means zooming IN
+
+					const threshold = 5;
+					const steps = Math.trunc(pinchAcc / threshold);
+
+					if (Math.abs(steps) >= 1) {
+						setZoom((z) => Math.max(2, Math.min(60, z + steps)));
+						pinchAcc -= steps * threshold; // Preserve remainder for smoothness
+					}
+				},
+				{ passive: false },
+			);
+		}
+
+		const handleKey = async (e: KeyboardEvent) => {
+			if (document.activeElement?.tagName === "INPUT") return;
+
+			if (e.code === "KeyZ" && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault();
+				if (currentHistoryId === null || isRestoringHistory) return;
+				isRestoringHistory = true;
+				try {
+					if (e.shiftKey) {
+						const nextId = await getNextHistoryId(currentHistoryId);
+						if (nextId !== null) {
+							const state = await getHistory(nextId);
+							if (state) {
+								loadState(state);
+								setCurrentHistoryId(nextId);
+							}
+						}
+					} else {
+						const prevId = await getPrevHistoryId(currentHistoryId);
+						if (prevId !== null) {
+							const state = await getHistory(prevId);
+							if (state) {
+								loadState(state);
+								setCurrentHistoryId(prevId);
+							}
+						}
+					}
+				} finally {
+					isRestoringHistory = false;
+				}
+			}
+
+			if ((e.ctrlKey || e.metaKey) && e.code === "KeyV") {
+				e.preventDefault();
+				selectionAction("paste");
+			}
+			if (selectionBox()) {
+				if ((e.ctrlKey || e.metaKey) && e.code === "KeyC") {
+					e.preventDefault();
+					selectionAction("copy");
+				}
+				if ((e.ctrlKey || e.metaKey) && e.code === "KeyD") {
+					e.preventDefault();
+					selectionAction("duplicate");
+				}
+				if (e.code === "Delete" || e.code === "Backspace") {
+					e.preventDefault();
+					selectionAction("delete");
+				}
+			}
+		};
+		window.addEventListener("keydown", handleKey);
+		onCleanup(() => window.removeEventListener("keydown", handleKey));
+
+		const loadActiveAssets = async () => {
+			const all = props.engine.world.query(SpriteRenderer);
+			const uniqueSources = new Map<
+				string,
+				{
+					cols: number;
+					rows: number;
+					atlasFrames?: { x: number; y: number; w: number; h: number }[];
+					forceAtlasMode?: boolean;
+					engineUvRects?: { u: number; v: number; su: number; sv: number }[];
+				}
+			>();
+
+			for (const id of all) {
+				const rnd = props.engine.world.getComponent(id, SpriteRenderer);
+				const anim = props.engine.world.getComponent(id, SpriteAnimator);
+				if (rnd?.imageSrc?.includes("/public/assets/sprites/")) {
+					const n = rnd.imageSrc
+						.replace("/public/assets/sprites/", "")
+						.replace(".png", "");
+					if (!uniqueSources.has(n)) {
+						// Infer grid dimensions directly from engine uv payload or animator
+						let cols = Math.round(1.0 / rnd.uvScale[0]) || 1;
+						let rows = Math.round(1.0 / rnd.uvScale[1]) || 1;
+						let atlasFrames;
+
+						if (anim) {
+							if (anim.columns > 1 || anim.rows > 1) {
+								cols = Math.max(cols, anim.columns);
+								rows = Math.max(rows, anim.rows);
+							} else if (anim.atlasFrames && anim.atlasFrames.length > 0) {
+								atlasFrames = anim.atlasFrames;
+							}
+						}
+						uniqueSources.set(n, { cols, rows, atlasFrames });
+					}
+				}
+			}
+
+			// Note: Project purging explicitly disabled here to prevent spontaneous UI component collapse
+			// occurring uniquely when managing internally generated IDB entities (e.g. Atlases/unnamed_sprite).
+
+			if (uniqueSources.size > 0) {
+				const toLoad = Array.from(uniqueSources.entries()).filter(
+					([s, _data]) => !projects().find((p) => p.name === s),
+				);
+				if (toLoad.length > 0) {
+					const loaded = (
+						await Promise.all(
+							toLoad.map(([s, data]) =>
+								loadProjectFromDisk(s, data.cols, data.rows, data.atlasFrames),
+							),
+						)
+					).filter(Boolean) as Project[];
+					if (loaded.length > 0) {
+						setProjects((prev) => [...prev, ...loaded]);
+						if (!activeProjId()) setActiveProjId(loaded[loaded.length - 1].id);
+						pushState();
+					}
+				}
+			}
+			if (projects().length === 0) {
+				createProject("unnamed_sprite", 32, 32);
+			}
+		};
+
+		if (projects().length === 0) {
+			const savedId = await getActiveHistoryId();
+			let targetId = savedId !== null ? savedId : null;
+			let state = targetId !== null ? await getHistory(targetId) : null;
+
+			// Fallback to highest ID if active_history record went missing or was wiped
+			if (!state) {
+				targetId = await getLatestHistoryId();
+				if (targetId !== null) {
+					state = await getHistory(targetId);
+				}
+			}
+
+			if (state && targetId !== null) {
+				isRestoringHistory = true;
+				loadState(state);
+				setCurrentHistoryId(targetId);
+				isRestoringHistory = false;
+			}
+
+			// Sync missing active game assets ONLY when booting cleanly from cache or missing UI states!
+			setTimeout(loadActiveAssets, 500);
+		}
+
+		const pollEntities = () => {
+			const all = props.engine.world.query(SpriteRenderer);
+			const list = all.map((id) => ({
+				id,
+				renderer: props.engine.world.getComponent(id, SpriteRenderer)!,
+				animator: props.engine.world.getComponent(id, SpriteAnimator),
+			}));
+			setEntities((prev) => {
+				if (prev.length !== list.length) return list;
+				for (let i = 0; i < prev.length; i++)
+					if (prev[i].id !== list[i].id) return list;
+				return prev;
+			});
+			if (targetEntity() === -1 && list.length > 0) {
+				setTargetEntity(list[0].id);
+				const target = list[0];
+				if (target?.renderer?.imageSrc) {
+					const name = target.renderer.imageSrc
+						.replace("/public/assets/sprites/", "")
+						.replace(".png", "");
+					const proj = projects().find((p) => p.name === name);
+					if (proj && activeProjId() !== proj.id) setActiveProjId(proj.id);
+				}
+			}
+		};
+		pollEntities();
+		const interval = setInterval(pollEntities, 1000);
+		onCleanup(() => clearInterval(interval));
+	});
+
+	const activeProj = () => projects().find((p) => p.id === activeProjId());
+
+	const compositeFrame = (
+		proj: Project,
+		frameId: string,
+	): HTMLCanvasElement => {
+		const frame = proj.frames.find((f) => f.id === frameId);
+		if (!frame) return offscreenFrame;
+
+		const fW = frame.width || proj.width;
+		const fH = frame.height || proj.height;
+		offscreenFrame.width = fW;
+		offscreenFrame.height = fH;
+		const ctx = offscreenFrame.getContext("2d", { willReadFrequently: true })!;
+		ctx.clearRect(0, 0, fW, fH);
+
+		// draw bottom to top
+		const reversedLayers = [...proj.layers].reverse();
+		reversedLayers.forEach((l) => {
+			if (!l.visible) return;
+			const cel = frame.cels[l.id];
+			if (cel) {
+				ctx.globalAlpha = l.opacity;
+				ctx.drawImage(cel, 0, 0);
+				ctx.globalAlpha = 1.0;
+			}
+		});
+		return offscreenFrame;
+	};
+
+	const syncToEngine = () => {
+		const proj = activeProj();
+		if (!proj) return;
+
+		// Repaint composite viewport
+		if (compositeCanvasRef) {
+			const frame = proj.frames.find((f) => f.id === proj.activeFrameId);
+			const fW = frame?.width || proj.width;
+			const fH = frame?.height || proj.height;
+			compositeCanvasRef.width = fW * zoom();
+			compositeCanvasRef.height = fH * zoom();
+			const ctx = compositeCanvasRef.getContext("2d", {
+				willReadFrequently: true,
+			})!;
+			ctx.imageSmoothingEnabled = false;
+			ctx.clearRect(0, 0, fW * zoom(), fH * zoom());
+			const comp = compositeFrame(proj, proj.activeFrameId);
+			ctx.save();
+			ctx.scale(zoom(), zoom());
+			ctx.drawImage(comp, 0, 0);
+			ctx.restore();
+		}
+
+		if (targetEntity() === -1) return;
+		const target = entities().find((e) => e.id === targetEntity());
+		if (!target) return;
+
+		// Strict Source-of-Truth Validation Gate
+		// Entirely prevents the UI from overwriting unrelated textures on async activeProject drift!
+		const targetName = target.renderer?.imageSrc
+			?.replace("/public/assets/sprites/", "")
+			.replace(".png", "");
+		if (targetName !== proj.name) return;
+
+		if (proj.isAtlas) {
+			const hasExplicitLayout = proj.frames.every(
+				(f) => f.x !== undefined && f.y !== undefined,
+			);
+			if (hasExplicitLayout) {
+				let maxW = proj.metadata?.fullWidth || 0;
+				let maxH = proj.metadata?.fullHeight || 0;
+				if (!maxW || !maxH) {
+					proj.frames.forEach((f) => {
+						const rw = f.width || proj.width;
+						const rh = f.height || proj.height;
+						if (f.x !== undefined && f.x + rw > maxW) maxW = f.x + rw;
+						if (f.y !== undefined && f.y + rh > maxH) maxH = f.y + rh;
+					});
+				}
+
+				offscreenMap.width = maxW;
+				offscreenMap.height = maxH;
+				const ctx = offscreenMap.getContext("2d", {
+					willReadFrequently: true,
+				})!;
+				ctx.clearRect(0, 0, offscreenMap.width, offscreenMap.height);
+
+				const metaFrames: any = {};
+				proj.frames.forEach((fr) => {
+					const c = compositeFrame(proj, fr.id);
+					ctx.drawImage(c, fr.x!, fr.y!);
+					metaFrames[fr.name || fr.id] = {
+						frame: {
+							x: fr.x,
+							y: fr.y,
+							w: fr.width || proj.width,
+							h: fr.height || proj.height,
+						},
+						sourceSize: {
+							w: fr.width || proj.width,
+							h: fr.height || proj.height,
+						},
+					};
+
+					const thumbId = `thumb_${fr.id}`;
+					const cvs = document.getElementById(thumbId) as HTMLCanvasElement;
+					if (cvs) {
+						const tCtx = cvs.getContext("2d", { willReadFrequently: true })!;
+						tCtx.clearRect(0, 0, cvs.width, cvs.height);
+						tCtx.drawImage(c, 0, 0);
+					}
+				});
+
+				setAtlasMapW(offscreenMap.width);
+				setAtlasMapH(offscreenMap.height);
+				const uri = offscreenMap.toDataURL("image/png");
+				setAtlasDataUri(uri);
+				const _dataUri = uri;
+				meta.frames = metaFrames;
+				if (!meta.animations) meta.animations = {};
+			} else {
+				const inputs = proj.frames.map((fr) => {
+					const c = compositeFrame(proj, fr.id);
+
+					const thumbId = `thumb_${fr.id}`;
+					const tCvs = document.getElementById(thumbId) as HTMLCanvasElement;
+					if (tCvs) {
+						const tCtx = tCvs.getContext("2d", { willReadFrequently: true })!;
+						tCtx.clearRect(0, 0, tCvs.width, tCvs.height);
+						tCtx.drawImage(c, 0, 0);
+					}
+
+					const dup = document.createElement("canvas");
+					dup.width = c.width;
+					dup.height = c.height;
+					dup
+						.getContext("2d", { willReadFrequently: true })
+						?.drawImage(c, 0, 0);
+					return {
+						id: fr.name || fr.id,
+						width: fr.width || proj.width,
+						height: fr.height || proj.height,
+						data: dup,
+					};
+				});
+				const result = packAtlas(inputs);
+
+				offscreenMap.width = result.atlasCanvas.width;
+				offscreenMap.height = result.atlasCanvas.height;
+				const ctx = offscreenMap.getContext("2d", {
+					willReadFrequently: true,
+				})!;
+				ctx.clearRect(0, 0, offscreenMap.width, offscreenMap.height);
+				ctx.drawImage(result.atlasCanvas, 0, 0);
+
+				setAtlasMapW(offscreenMap.width);
+				setAtlasMapH(offscreenMap.height);
+				const uri = offscreenMap.toDataURL("image/png");
+				setAtlasDataUri(uri);
+				const _dataUri = uri;
+				meta.frames = result.meta.frames;
+				if (!meta.animations) meta.animations = {};
+			}
+		} else {
+			const inferredCols = proj.metadata?.columns || proj.frames.length;
+			const inferredRows =
+				proj.metadata?.rows || Math.ceil(proj.frames.length / inferredCols);
+
+			offscreenMap.width = inferredCols * proj.width;
+			offscreenMap.height = inferredRows * proj.height;
+			const mapCtx = offscreenMap.getContext("2d", {
+				willReadFrequently: true,
+			})!;
+			mapCtx.clearRect(0, 0, offscreenMap.width, offscreenMap.height);
+
+			proj.frames.forEach((fr, i) => {
+				const c = compositeFrame(proj, fr.id);
+				const gridX = i % inferredCols;
+				const gridY = Math.floor(i / inferredCols);
+				mapCtx.drawImage(c, gridX * proj.width, gridY * proj.height);
+
+				const thumbId = `thumb_${fr.id}`;
+				const cvs = document.getElementById(thumbId) as HTMLCanvasElement;
+				if (cvs) {
+					const ctx = cvs.getContext("2d", { willReadFrequently: true })!;
+					ctx.clearRect(0, 0, cvs.width, cvs.height);
+					ctx.drawImage(c, 0, 0);
+				}
+			});
+
+			setAtlasMapW(offscreenMap.width);
+			setAtlasMapH(offscreenMap.height);
+			setAtlasDataUri(offscreenMap.toDataURL("image/png"));
+
+			const renderSystems = props.engine
+				.getSystems()
+				.filter((s) => s instanceof WebGLRenderer) as WebGLRenderer[];
+			if (renderSystems.length > 0)
+				renderSystems[0].updateTexture(target.renderer, offscreenMap);
+
+			if (target.animator) {
+				target.animator.atlasFrames = undefined;
+				target.animator.atlasSize = undefined;
+				target.animator.columns = inferredCols;
+				target.animator.rows = inferredRows;
+				target.animator.addAnimation(
+					"preview",
+					proj.frames.map((_, i) => i),
+					4,
+				);
+				if (!target.animator.currentAnimation) {
+					target.animator.play("preview");
+				}
+			}
+		}
+		autoSaveToDisk();
+		setTick((t) => t + 1);
+	};
+
+	createEffect(() => {
+		zoom(); // subscribe
+		activeProjId();
+		atlasViewMode();
+		setTimeout(() => {
+			if (projects().length > 0) syncToEngine();
+		}, 10);
+	});
+
+	createEffect(() => {
+		const _bx = selectionBox();
+		if (!previewCanvasRef) return;
+		const pCtx = previewCanvasRef.getContext("2d", {
+			willReadFrequently: true,
+		});
+		if (!pCtx) return;
+		const proj = activeProj();
+		if (!proj) return;
+
+		if (!isDrawing && !isMovingSelection) {
+			pCtx.clearRect(0, 0, proj.width, proj.height);
+			// DOM Overlay natively handles crisp layout selection bounds instead
+		}
+	});
+
+	createEffect(() => {
+		const tId = targetEntity();
+		const projId = activeProjId();
+		if (tId === -1 || !projId) return;
+		const target = entities().find((e) => e.id === tId);
+		if (!target?.animator) return;
+
+		if (!target.animator.isPlaying && target.animator.currentAnimation) {
+			const anim = target.animator.animations.get(
+				target.animator.currentAnimation,
+			);
+			if (anim && target.animator.currentFrameIndex < anim.frames.length) {
+				const fData = anim.frames[target.animator.currentFrameIndex];
+				// fData is the requested index. Verify it exists in our project.
+				let outOfBounds = false;
+
+				setProjects((projs) =>
+					projs.map((p) => {
+						if (p.id !== projId) return p;
+						if (fData < p.frames.length) {
+							if (p.activeFrameId !== p.frames[fData].id) {
+								return { ...p, activeFrameId: p.frames[fData].id };
+							}
+						} else {
+							outOfBounds = true;
+						}
+						return p;
+					}),
+				);
+
+				if (outOfBounds) {
+					// Gracefully handle the orphaned index by shifting engine back to safe preview!
+					target.animator.currentAnimation = "preview";
+					target.animator.currentFrameIndex = 0;
+				}
+			}
+		}
+	});
+
+	createEffect(() => {
+		const proj = activeProj();
+		if (proj && entities().length > 0) {
+			const currentTarget = entities().find((e) => e.id === targetEntity());
+			const currentTargetName = currentTarget?.renderer?.imageSrc
+				?.replace("/public/assets/sprites/", "")
+				.replace(".png", "");
+
+			if (currentTargetName !== proj.name) {
+				const newTarget = entities().find((e) => {
+					if (!e.renderer?.imageSrc) return false;
+					return (
+						e.renderer.imageSrc
+							.replace("/public/assets/sprites/", "")
+							.replace(".png", "") === proj.name
+					);
+				});
+				if (newTarget) setTargetEntity(newTarget.id);
+			}
+		}
+	});
+
+	const getPos = (e: MouseEvent) => {
+		const rect = compositeCanvasRef.getBoundingClientRect();
+		// Localize mouse positions explicitly against the atlas grid
+		let x = Math.floor((e.clientX - rect.left) / zoom());
+		let y = Math.floor((e.clientY - rect.top) / zoom());
+		const proj = activeProj();
+
+		if (atlasViewMode() === "atlas" && proj) {
+			const activeF = proj.frames.find((f) => f.id === proj.activeFrameId);
+			if (proj.isAtlas) {
+				if (activeF && activeF.x !== undefined && activeF.y !== undefined) {
+					x -= activeF.x;
+					y -= activeF.y;
+				}
+			} else {
+				const inferredCols = proj.metadata?.columns || proj.frames.length;
+				const idx = proj.frames.findIndex((f) => f.id === proj.activeFrameId);
+				if (idx !== -1) {
+					const c = idx % inferredCols;
+					const rFrame = Math.floor(idx / inferredCols);
+					x -= c * proj.width;
+					y -= rFrame * proj.height;
+				}
+			}
+		}
+
+		return { x, y };
+	};
+
+	const drawBresenhamLine = (
+		ctx: CanvasRenderingContext2D,
+		x0: number,
+		y0: number,
+		x1: number,
+		y1: number,
+		col: string,
+	) => {
+		ctx.fillStyle = col;
+		const dx = Math.abs(x1 - x0),
+			sx = x0 < x1 ? 1 : -1;
+		const dy = -Math.abs(y1 - y0),
+			sy = y0 < y1 ? 1 : -1;
+		let err = dx + dy,
+			e2;
+		while (true) {
+			ctx.fillRect(x0, y0, 1, 1);
+			if (x0 === x1 && y0 === y1) break;
+			e2 = 2 * err;
+			if (e2 >= dy) {
+				err += dy;
+				x0 += sx;
+			}
+			if (e2 <= dx) {
+				err += dx;
+				y0 += sy;
+			}
+		}
+	};
+
+	const drawPixelCircle = (
+		ctx: CanvasRenderingContext2D,
+		xc: number,
+		yc: number,
+		r: number,
+		col: string,
+	) => {
+		ctx.fillStyle = col;
+		let x = 0,
+			y = r;
+		let d = 3 - 2 * r;
+		const plot = (cx: number, cy: number, px: number, py: number) => {
+			ctx.fillRect(cx + px, cy + py, 1, 1);
+			ctx.fillRect(cx - px, cy + py, 1, 1);
+			ctx.fillRect(cx + px, cy - py, 1, 1);
+			ctx.fillRect(cx - px, cy - py, 1, 1);
+			ctx.fillRect(cx + py, cy + px, 1, 1);
+			ctx.fillRect(cx - py, cy + px, 1, 1);
+			ctx.fillRect(cx + py, cy - px, 1, 1);
+			ctx.fillRect(cx - py, cy - px, 1, 1);
+		};
+		plot(xc, yc, x, y);
+		while (y >= x) {
+			x++;
+			if (d > 0) {
+				y--;
+				d = d + 4 * (x - y) + 10;
+			} else {
+				d = d + 4 * x + 6;
+			}
+			plot(xc, yc, x, y);
+		}
+	};
+
+	const hexToRgba = (hex: string) => {
+		const res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+		return res
+			? [parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16), 255]
+			: [0, 0, 0, 255];
+	};
+
+	const floodFill = (
+		ctx: CanvasRenderingContext2D,
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		hexColor: string,
+	) => {
+		const imageData = ctx.getImageData(0, 0, w, h);
+		const data = imageData.data;
+		const targetColor = hexToRgba(hexColor);
+
+		const startPos = (y * w + x) * 4;
+		const startR = data[startPos],
+			startG = data[startPos + 1],
+			startB = data[startPos + 2],
+			startA = data[startPos + 3];
+		if (
+			startR === targetColor[0] &&
+			startG === targetColor[1] &&
+			startB === targetColor[2] &&
+			startA === targetColor[3]
+		)
+			return;
+
+		const matchStartColor = (pos: number) =>
+			data[pos] === startR &&
+			data[pos + 1] === startG &&
+			data[pos + 2] === startB &&
+			data[pos + 3] === startA;
+		const colorPixel = (pos: number) => {
+			data[pos] = targetColor[0];
+			data[pos + 1] = targetColor[1];
+			data[pos + 2] = targetColor[2];
+			data[pos + 3] = targetColor[3];
+		};
+
+		const stack = [[x, y]];
+		while (stack.length) {
+			const [px, py] = stack.pop()!;
+			let pyy = py;
+			let pos = (pyy * w + px) * 4;
+			while (pyy-- >= 0 && matchStartColor(pos)) pos -= w * 4;
+			pos += w * 4;
+			pyy++;
+			let reachL = false,
+				reachR = false;
+			while (pyy++ < h - 1 && matchStartColor(pos)) {
+				colorPixel(pos);
+				if (px > 0) {
+					if (matchStartColor(pos - 4)) {
+						if (!reachL) {
+							stack.push([px - 1, pyy]);
+							reachL = true;
+						}
+					} else if (reachL) reachL = false;
+				}
+				if (px < w - 1) {
+					if (matchStartColor(pos + 4)) {
+						if (!reachR) {
+							stack.push([px + 1, pyy]);
+							reachR = true;
+						}
+					} else if (reachR) reachR = false;
+				}
+				pos += w * 4;
+			}
+		}
+		ctx.putImageData(imageData, 0, 0);
+	};
+
+	const getActiveCel = (proj: Project) => {
+		const f = proj.frames.find((f) => f.id === proj.activeFrameId);
+		if (!f) return null;
+		return f.cels[proj.activeLayerId];
+	};
+
+	const handlePointerDown = (e: MouseEvent) => {
+		if (e.button === 1 || tool() === "pan" || (e.button === 0 && e.shiftKey))
+			return;
+		const proj = activeProj();
+		if (!proj) return;
+
+		const { x, y } = getPos(e);
+
+		if (atlasViewMode() === "atlas") {
+			if (proj.isAtlas) {
+				const clickedFrame = proj.frames.find(
+					(f) =>
+						x >= f.x! &&
+						y >= f.y! &&
+						x <= f.x! + (f.width || proj.width) &&
+						y <= f.y! + (f.height || proj.height),
+				);
+				if (clickedFrame) {
+					setProjects((projs) =>
+						projs.map((p) =>
+							p.id === activeProjId()
+								? { ...p, activeFrameId: clickedFrame.id }
+								: p,
+						),
+					);
+					return;
+				}
+			} else {
+				const inferredCols = proj.metadata?.columns || proj.frames.length;
+				const c = Math.floor(x / proj.width);
+				const r = Math.floor(y / proj.height);
+				const idx = r * inferredCols + c;
+				if (idx >= 0 && idx < proj.frames.length) {
+					setProjects((projs) =>
+						projs.map((p) =>
+							p.id === activeProjId()
+								? { ...p, activeFrameId: proj.frames[idx].id }
+								: p,
+						),
+					);
+					return;
+				}
+			}
+		}
+
+		if (tool() === "select") {
+			const celCvs = getActiveCel(proj);
+			if (!celCvs) return;
+			const bx = selectionBox();
+			if (bx) {
+				const rx = bx.x;
+				const ry = bx.y;
+				if (x >= rx && x <= rx + bx.w && y >= ry && y <= ry + bx.h) {
+					isMovingSelection = true;
+					initialSelectionX = rx;
+					initialSelectionY = ry;
+					moveStartX = x;
+					moveStartY = y;
+					const ctx = celCvs.getContext("2d", { willReadFrequently: true })!;
+					movingImageData = ctx.getImageData(rx, ry, bx.w, bx.h);
+					ctx.clearRect(rx, ry, bx.w, bx.h);
+					syncToEngine();
+					return;
+				} else {
+					setSelectionBox(null);
+				}
+			}
+			setSelectionBox({ x, y, w: 1, h: 1 });
+		}
+
+		isDrawing = true;
+		startX = x;
+		startY = y;
+		lastX = x;
+		lastY = y;
+		handlePointerMove(e);
+	};
+
+	const handlePointerMove = (e: MouseEvent) => {
+		const proj = activeProj();
+		if (!proj) return;
+		const celCvs = getActiveCel(proj);
+		if (!celCvs) return;
+		const { x, y } = getPos(e);
+		const pCtx = previewCanvasRef.getContext("2d", {
+			willReadFrequently: true,
+		})!;
+
+		const t = tool();
+		if (t === "select") {
+			pCtx.clearRect(0, 0, proj.width, proj.height);
+			const bx = selectionBox();
+			if (isMovingSelection && bx && movingImageData) {
+				const dx = x - moveStartX;
+				const dy = y - moveStartY;
+				pCtx.putImageData(
+					movingImageData,
+					initialSelectionX + dx,
+					initialSelectionY + dy,
+				);
+			} else if (bx && isDrawing) {
+				const rx = Math.min(startX, x);
+				const ry = Math.min(startY, y);
+				const rw = Math.abs(x - startX) + 1;
+				const rh = Math.abs(y - startY) + 1;
+				setSelectionBox({ x: rx, y: ry, w: rw, h: rh });
+			}
+			return;
+		}
+
+		if (!isDrawing) return;
+		pCtx.clearRect(0, 0, proj.width, proj.height);
+
+		if (t === "pencil" || t === "eraser") {
+			const ctx = celCvs.getContext("2d", { willReadFrequently: true })!;
+			if (t === "pencil") {
+				drawBresenhamLine(ctx, lastX, lastY, x, y, color());
+			} else {
+				ctx.clearRect(x, y, 1, 1);
+			}
+			lastX = x;
+			lastY = y;
+			syncToEngine();
+		} else if (t === "line") {
+			drawBresenhamLine(pCtx, startX, startY, x, y, color());
+		} else if (t === "rect") {
+			pCtx.fillStyle = color();
+			const rx = Math.min(x, startX),
+				ry = Math.min(y, startY);
+			const rw = Math.abs(x - startX) + 1,
+				rh = Math.abs(y - startY) + 1;
+			pCtx.fillRect(rx, ry, rw, rh);
+		} else if (t === "circle") {
+			const radius = Math.round(
+				Math.sqrt((x - startX) ** 2 + (y - startY) ** 2),
+			);
+			drawPixelCircle(pCtx, startX, startY, radius, color());
+		}
+	};
+
+	const handlePointerUp = (e: MouseEvent) => {
+		const proj = activeProj();
+		if (!proj) return;
+		const celCvs = getActiveCel(proj);
+		if (!celCvs) return;
+		const t = tool();
+
+		if (t === "select") {
+			const { x, y } = getPos(e);
+			if (isMovingSelection && movingImageData && selectionBox()) {
+				const _bx = selectionBox()!;
+				const dx = x - moveStartX;
+				const dy = y - moveStartY;
+				const ctx = celCvs.getContext("2d", { willReadFrequently: true })!;
+
+				const tmpCanvas = document.createElement("canvas");
+				tmpCanvas.width = movingImageData.width;
+				tmpCanvas.height = movingImageData.height;
+				tmpCanvas
+					.getContext("2d", { willReadFrequently: true })
+					?.putImageData(movingImageData, 0, 0);
+				ctx.drawImage(
+					tmpCanvas,
+					initialSelectionX + dx,
+					initialSelectionY + dy,
+				);
+
+				const pCtx = previewCanvasRef.getContext("2d", {
+					willReadFrequently: true,
+				})!;
+				pCtx.clearRect(0, 0, proj.width, proj.height);
+
+				setSelectionBox({
+					x: initialSelectionX + dx,
+					y: initialSelectionY + dy,
+					w: movingImageData.width,
+					h: movingImageData.height,
+				});
+
+				isMovingSelection = false;
+				movingImageData = null;
+				syncToEngine();
+				pushState();
+			} else if (selectionBox() && isDrawing) {
+				const bx = selectionBox()!;
+				if (bx.w <= 1 && bx.h <= 1) {
+					setSelectionBox(null);
+				}
+				// Geometric alignment strictly normalized efficiently iteratively during Move natively
+			}
+			isDrawing = false;
+			return;
+		}
+
+		if (!isDrawing) return;
+		isDrawing = false;
+
+		if (t === "line" || t === "rect" || t === "circle" || t === "fill") {
+			const { x, y } = getPos(e);
+			const ctx = celCvs.getContext("2d", { willReadFrequently: true })!;
+			if (t === "fill") {
+				floodFill(ctx, x, y, proj.width, proj.height, color());
+			} else {
+				ctx.drawImage(previewCanvasRef, 0, 0);
+				const pCtx = previewCanvasRef.getContext("2d", {
+					willReadFrequently: true,
+				})!;
+				pCtx.clearRect(0, 0, proj.width, proj.height);
+			}
+			syncToEngine();
+		}
+
+		pushState();
+	};
+
+	const selectionAction = (action: string) => {
+		const proj = activeProj();
+		if (!proj) return;
+		const celCvs = getActiveCel(proj);
+		if (!celCvs) return;
+		const ctx = celCvs.getContext("2d", { willReadFrequently: true })!;
+		const bx = selectionBox();
+		if (!bx && action !== "paste") return;
+
+		if (action === "copy") {
+			clipboardData = {
+				w: bx?.w,
+				h: bx?.h,
+				data: ctx.getImageData(bx?.x, bx?.y, bx?.w, bx?.h).data,
+			};
+		} else if (action === "paste") {
+			if (!clipboardData) return;
+			const nw = clipboardData.w;
+			const nh = clipboardData.h;
+			const nx = 0;
+			const ny = 0;
+			const tmpCanvas = document.createElement("canvas");
+			tmpCanvas.width = nw;
+			tmpCanvas.height = nh;
+			tmpCanvas
+				.getContext("2d", { willReadFrequently: true })
+				?.putImageData(
+					new ImageData(new Uint8ClampedArray(clipboardData.data), nw, nh),
+					0,
+					0,
+				);
+			ctx.drawImage(tmpCanvas, nx, ny);
+			setSelectionBox({ x: nx, y: ny, w: nw, h: nh });
+			syncToEngine();
+			pushState();
+		} else if (action === "delete") {
+			ctx.clearRect(bx?.x, bx?.y, bx?.w, bx?.h);
+			syncToEngine();
+			pushState();
+		} else if (action === "duplicate") {
+			const img = ctx.getImageData(bx?.x, bx?.y, bx?.w, bx?.h);
+			const nx = bx?.x + 2;
+			const ny = bx?.y + 2;
+			const tmpCanvas = document.createElement("canvas");
+			tmpCanvas.width = bx?.w;
+			tmpCanvas.height = bx?.h;
+			tmpCanvas
+				.getContext("2d", { willReadFrequently: true })
+				?.putImageData(img, 0, 0);
+			ctx.drawImage(tmpCanvas, nx, ny);
+			setSelectionBox({ x: nx, y: ny, w: bx?.w, h: bx?.h });
+			syncToEngine();
+			pushState();
+		} else if (action === "flip_h" || action === "flip_v") {
+			const img = ctx.getImageData(bx?.x, bx?.y, bx?.w, bx?.h);
+			const tmpCvs = document.createElement("canvas");
+			tmpCvs.width = bx?.w;
+			tmpCvs.height = bx?.h;
+			const tCtx = tmpCvs.getContext("2d", { willReadFrequently: true })!;
+			tCtx.putImageData(img, 0, 0);
+
+			ctx.clearRect(bx?.x, bx?.y, bx?.w, bx?.h);
+			ctx.save();
+			ctx.translate(bx?.x + bx?.w / 2, bx?.y + bx?.h / 2);
+			if (action === "flip_h") ctx.scale(-1, 1);
+			if (action === "flip_v") ctx.scale(1, -1);
+			ctx.drawImage(tmpCvs, -bx?.w / 2, -bx?.h / 2);
+			ctx.restore();
+
+			syncToEngine();
+			pushState();
+		}
+	};
+
+	// Layer Actions
+	const addLayer = () => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const lId = uid();
+				p.layers.unshift({
+					id: lId,
+					name: `Layer ${p.layers.length + 1}`,
+					visible: true,
+					opacity: 1.0,
+				});
+				p.frames.forEach((f) => {
+					f.cels[lId] = initCel(f.width || p.width, f.height || p.height);
+				});
+				p.activeLayerId = lId;
+				return p;
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const toggleLayerVis = (lId: string) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const l = p.layers.find((x) => x.id === lId);
+				if (l) l.visible = !l.visible;
+				return p;
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const duplicateLayer = (lId: string) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const srcIdx = p.layers.findIndex((x) => x.id === lId);
+				if (srcIdx === -1) return p;
+				const srcL = p.layers[srcIdx];
+				const newId = uid();
+
+				const newL = { ...srcL, id: newId, name: `${srcL.name} Copy` };
+				p.layers.splice(srcIdx, 0, newL);
+
+				p.frames.forEach((f) => {
+					const newC = initCel(f.width || p.width, f.height || p.height);
+					newC
+						.getContext("2d", { willReadFrequently: true })
+						?.drawImage(f.cels[lId], 0, 0);
+					f.cels[newId] = newC;
+				});
+				p.activeLayerId = newId;
+				return { ...p, layers: [...p.layers] };
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const deleteLayer = (lId: string) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId() || p.layers.length <= 1) return p;
+				const srcIdx = p.layers.findIndex((x) => x.id === lId);
+				if (srcIdx === -1) return p;
+
+				p.layers.splice(srcIdx, 1);
+				p.frames.forEach((f) => {
+					delete f.cels[lId];
+				});
+				p.activeLayerId =
+					p.layers[Math.max(0, Math.min(srcIdx, p.layers.length - 1))].id;
+				return { ...p, layers: [...p.layers] };
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const moveLayer = (lId: string, dir: -1 | 1) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const idx = p.layers.findIndex((x) => x.id === lId);
+				if (idx === -1) return p;
+				const tIdx = idx + dir;
+				if (tIdx < 0 || tIdx >= p.layers.length) return p;
+
+				const newLayers = [...p.layers];
+				const tmp = newLayers[idx];
+				newLayers[idx] = newLayers[tIdx];
+				newLayers[tIdx] = tmp;
+				return { ...p, layers: newLayers };
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const mergeLayerDown = (lId: string) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId() || p.layers.length <= 1) return p;
+				const srcIdx = p.layers.findIndex((x) => x.id === lId);
+				if (srcIdx === -1 || srcIdx === p.layers.length - 1) return p; // Cannot merge the absolute bottom layer natively
+
+				const targetL = p.layers[srcIdx + 1];
+				p.frames.forEach((f) => {
+					const targetCtx = f.cels[targetL.id].getContext("2d", {
+						willReadFrequently: true,
+					})!;
+					targetCtx.save();
+					targetCtx.globalAlpha = p.layers[srcIdx].opacity;
+					targetCtx.drawImage(f.cels[lId], 0, 0);
+					targetCtx.restore();
+					delete f.cels[lId];
+				});
+
+				p.layers.splice(srcIdx, 1);
+				p.activeLayerId = targetL.id;
+				return { ...p, layers: [...p.layers] };
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	// Frame Actions
+	const addFrame = () => {
+		const pRef = activeProj();
+		if (!pRef) return;
+
+		if (pRef.isAtlas) {
+			setDialog({
+				title: "Enter new cell name:",
+				placeholder: `cell_${pRef.frames.length}`,
+				onConfirm: (fName) => {
+					applyNewFrame(fName);
+				},
+			});
+		} else {
+			applyNewFrame();
+		}
+	};
+
+	const applyNewFrame = (fName?: string) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const fId = uid();
+				const currF = p.frames.find((fr) => fr.id === p.activeFrameId);
+				const fW = currF?.width || p.width;
+				const fH = currF?.height || p.height;
+				const f: Frame = {
+					id: fId,
+					name: fName,
+					width: fW,
+					height: fH,
+					cels: {},
+				};
+				p.layers.forEach((l) => {
+					f.cels[l.id] = initCel(fW, fH);
+				});
+				p.frames.push(f);
+				p.activeFrameId = fId;
+				return p;
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const duplicateFrame = () => {
+		const pRef = activeProj();
+		if (!pRef || pRef.frames.length === 0) return;
+		const src = pRef.frames.find((f) => f.id === pRef.activeFrameId);
+		if (!src) return;
+
+		if (pRef.isAtlas) {
+			setDialog({
+				title: "Enter duplicate cell name:",
+				placeholder: `${src.name || "cell"}_copy`,
+				onConfirm: (fName) => applyDupeFrame(src.id, fName),
+			});
+		} else {
+			applyDupeFrame(src.id);
+		}
+	};
+
+	const applyDupeFrame = (srcId: string, fName?: string) => {
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const src = p.frames.find((f) => f.id === srcId);
+				if (!src) return p;
+				const fId = uid();
+				const f: Frame = {
+					id: fId,
+					name: fName,
+					width: src.width,
+					height: src.height,
+					cels: {},
+				};
+				p.layers.forEach((l) => {
+					const newC = initCel(src.width || p.width, src.height || p.height);
+					newC
+						.getContext("2d", { willReadFrequently: true })
+						?.drawImage(src.cels[l.id], 0, 0);
+					f.cels[l.id] = newC;
+				});
+				p.frames.push(f);
+				p.activeFrameId = fId;
+				return p;
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	const deleteFrame = () => {
+		const pRef = activeProj();
+		if (!pRef || pRef.frames.length <= 1) return; // Disallow implicitly deleting final context bounds
+
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId() || p.frames.length <= 1) return p;
+				const idx = p.frames.findIndex((f) => f.id === p.activeFrameId);
+				if (idx === -1) return p;
+				const updated = { ...p, frames: [...p.frames] };
+				updated.frames.splice(idx, 1);
+				updated.activeFrameId =
+					updated.frames[
+						Math.max(0, Math.min(idx, updated.frames.length - 1))
+					].id;
+				return updated;
+			}),
+		);
+		syncToEngine();
+		pushState();
+	};
+
+	let saveTimeout: any;
+	const autoSaveToDisk = () => {
+		clearTimeout(saveTimeout);
+		setSaveStatus("Saving...");
+		saveTimeout = setTimeout(async () => {
+			const proj = activeProj();
+			if (!proj) return;
+
+			let dataUri = "";
+			let meta = proj.metadata ? { ...proj.metadata } : {};
+
+			if (proj.isAtlas) {
+				const hasExplicitLayout = proj.frames.every(
+					(f) => f.x !== undefined && f.y !== undefined,
+				);
+				if (hasExplicitLayout) {
+					let maxW = proj.metadata?.fullWidth || 0;
+					let maxH = proj.metadata?.fullHeight || 0;
+					if (!maxW || !maxH) {
+						proj.frames.forEach((f) => {
+							const rw = f.width || proj.width;
+							const rh = f.height || proj.height;
+							if (f.x !== undefined && f.x + rw > maxW) maxW = f.x + rw;
+							if (f.y !== undefined && f.y + rh > maxH) maxH = f.y + rh;
+						});
+					}
+
+					offscreenMap.width = maxW;
+					offscreenMap.height = maxH;
+					const ctx = offscreenMap.getContext("2d", {
+						willReadFrequently: true,
+					})!;
+					ctx.clearRect(0, 0, offscreenMap.width, offscreenMap.height);
+
+					const metaFrames: any = {};
+					proj.frames.forEach((fr) => {
+						const c = compositeFrame(proj, fr.id);
+						ctx.drawImage(c, fr.x!, fr.y!);
+						metaFrames[fr.name || fr.id] = {
+							frame: {
+								x: fr.x,
+								y: fr.y,
+								w: fr.width || proj.width,
+								h: fr.height || proj.height,
+							},
+							sourceSize: {
+								w: fr.width || proj.width,
+								h: fr.height || proj.height,
+							},
+						};
+					});
+
+					setAtlasMapW(offscreenMap.width);
+					setAtlasMapH(offscreenMap.height);
+					const uri = offscreenMap.toDataURL("image/png");
+					setAtlasDataUri(uri);
+					dataUri = uri;
+					meta.frames = metaFrames;
+					if (!meta.animations) meta.animations = {};
+				} else {
+					const inputs = proj.frames.map((fr) => {
+						const c = compositeFrame(proj, fr.id);
+						const dup = document.createElement("canvas");
+						dup.width = c.width;
+						dup.height = c.height;
+						dup
+							.getContext("2d", { willReadFrequently: true })
+							?.drawImage(c, 0, 0);
+						return {
+							id: fr.name || fr.id,
+							width: fr.width || proj.width,
+							height: fr.height || proj.height,
+							data: dup,
+						};
+					});
+					const result = packAtlas(inputs);
+
+					offscreenMap.width = result.atlasCanvas.width;
+					offscreenMap.height = result.atlasCanvas.height;
+					const ctx = offscreenMap.getContext("2d", {
+						willReadFrequently: true,
+					})!;
+					ctx.clearRect(0, 0, offscreenMap.width, offscreenMap.height);
+					ctx.drawImage(result.atlasCanvas, 0, 0);
+
+					setAtlasMapW(offscreenMap.width);
+					setAtlasMapH(offscreenMap.height);
+					const uri = offscreenMap.toDataURL("image/png");
+					setAtlasDataUri(uri);
+					dataUri = uri;
+					meta.frames = result.meta.frames;
+					if (!meta.animations) meta.animations = {};
+				}
+			} else {
+				const cC = proj.metadata?.columns || proj.frames.length;
+				const cR = proj.metadata?.rows || Math.ceil(proj.frames.length / cC);
+
+				offscreenMap.width = cC * proj.width;
+				offscreenMap.height = cR * proj.height;
+				const mapCtx = offscreenMap.getContext("2d", {
+					willReadFrequently: true,
+				})!;
+				mapCtx.clearRect(0, 0, offscreenMap.width, offscreenMap.height);
+
+				proj.frames.forEach((fr, i) => {
+					const r = Math.floor(i / cC);
+					const c = i % cC;
+					const cv = compositeFrame(proj, fr.id);
+					mapCtx.drawImage(cv, c * proj.width, r * proj.height);
+				});
+
+				setAtlasMapW(offscreenMap.width);
+				setAtlasMapH(offscreenMap.height);
+				const uri = offscreenMap.toDataURL("image/png");
+				setAtlasDataUri(uri);
+				dataUri = uri;
+				meta = { ...proj.metadata, columns: cC, rows: cR };
+			}
+
+			try {
+				await fetch("/__aether_dev/save-sprite", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						name: proj.name,
+						png: dataUri,
+						metadata: meta,
+					}),
+				});
+				setSaveStatus("Saved");
+				setTimeout(() => setSaveStatus("Ready"), 2000);
+			} catch (err) {
+				console.error("Auto-save failed:", err);
+				setSaveStatus("Error");
+			}
+		}, 600);
+	};
+
+	const resizeCanvas = (newW: number, newH: number) => {
+		if (newW < 2 || newH < 2) return;
+		setProjects((projs) =>
+			projs.map((p) => {
+				if (p.id !== activeProjId()) return p;
+				const pCopy = { ...p };
+
+				if (pCopy.isAtlas) {
+					const activeFrIdx = pCopy.frames.findIndex(
+						(f) => f.id === pCopy.activeFrameId,
+					);
+					if (activeFrIdx > -1) {
+						pCopy.frames[activeFrIdx].width = Math.floor(newW);
+						pCopy.frames[activeFrIdx].height = Math.floor(newH);
+						Object.keys(pCopy.frames[activeFrIdx].cels).forEach((layerId) => {
+							const oldCel = pCopy.frames[activeFrIdx].cels[layerId];
+							const newCel = initCel(Math.floor(newW), Math.floor(newH));
+							newCel
+								.getContext("2d", { willReadFrequently: true })
+								?.drawImage(oldCel, 0, 0);
+							pCopy.frames[activeFrIdx].cels[layerId] = newCel;
+						});
+					}
+				} else {
+					pCopy.width = Math.floor(newW);
+					pCopy.height = Math.floor(newH);
+					pCopy.frames.forEach((f) => {
+						Object.keys(f.cels).forEach((layerId) => {
+							const oldCel = f.cels[layerId];
+							const newCel = initCel(pCopy.width, pCopy.height);
+							newCel
+								.getContext("2d", { willReadFrequently: true })
+								?.drawImage(oldCel, 0, 0);
+							f.cels[layerId] = newCel;
+						});
+					});
+				}
+				return pCopy;
+			}),
+		);
+		syncToEngine();
+	};
+
+	return (
+		<div
+			ref={editorRef}
+			style={
+				props.embedded
+					? {
+							width: "100%",
+							height: "100%",
+							display: "flex",
+							"flex-direction": "column",
+							"pointer-events": "auto",
+							"font-family": "Arial, sans-serif",
+							color: uActiveText,
+							background: uDark,
+						}
+					: {
+							position: "fixed",
+							top: "50%",
+							left: "50%",
+							transform: "translate(-50%, -50%)",
+							width: "900px",
+							height: "600px",
+							background: uDark,
+							padding: "5px",
+							"border-radius": "4px",
+							border: `1px solid ${uBorder}`,
+							"box-shadow": "0 10px 30px rgba(0,0,0,0.5)",
+							"font-family": "Arial, sans-serif",
+							"z-index": "9999",
+							display: "flex",
+							"flex-direction": "column",
+							color: uActiveText,
+							"pointer-events": "auto",
+						}
+			}
+		>
+			{/* Document Tabs */}
+			<div
+				style={{
+					display: "flex",
+					background: uHeader,
+					"border-bottom": `1px solid ${uBorder}`,
+					"margin-bottom": "5px",
+				}}
+			>
+				<For each={projects()}>
+					{(p) => (
+						<button
+							onClick={() => {
+								setActiveProjId(p.id);
+								const target = entities().find((e) => {
+									if (!e.renderer?.imageSrc) return false;
+									const n = e.renderer.imageSrc
+										.replace("/public/assets/sprites/", "")
+										.replace(".png", "");
+									return n === p.name;
+								});
+								if (target) setTargetEntity(target.id);
+								syncToEngine();
+							}}
+							style={{
+								padding: "6px 12px",
+								background: p.id === activeProjId() ? uActive : "transparent",
+								color: p.id === activeProjId() ? uActiveText : uText,
+								border: "none",
+								"border-right": `1px solid ${uBorder}`,
+								"border-top":
+									p.id === activeProjId()
+										? `2px solid ${uAcc}`
+										: "2px solid transparent",
+								cursor: "pointer",
+								"font-size": "12px",
+								"flex-shrink": 0,
+							}}
+						>
+							{p.name}
+						</button>
+					)}
+				</For>
+				<button
+					title="Create New SpriteSheet"
+					onClick={() => {
+						setDialogToggle(false);
+						setDialog({
+							title: "SpriteSheet/Atlas Name:",
+							placeholder: "new_sheet",
+							toggleText:
+								"Initialize as a Texture Atlas (variable cell sizes)?",
+							onConfirm: (name, isAtlas) => {
+								if (name && name.trim().length > 0) {
+									const n = name.trim();
+									createProject(n, 32, 32, isAtlas);
+									pushState();
+								}
+							},
+						});
+					}}
+					style={{
+						padding: "6px 12px",
+						background: "transparent",
+						color: uText,
+						border: "none",
+						"border-right": `1px solid ${uBorder}`,
+						"border-top": "2px solid transparent",
+						cursor: "pointer",
+						"font-size": "14px",
+						"font-weight": "bold",
+						"line-height": "14px",
+						"flex-shrink": 0,
+					}}
+				>
+					<IconPlus size={14} />
+				</button>
+			</div>
+
+			<Show when={activeProj()}>
+				{(() => {
+					const proj = activeProj()!;
+					return (
+						<div
+							style={{ display: "flex", flex: 1, "min-height": 0, gap: "5px" }}
+						>
+							{/* Left Toolbar (Tools & Color) */}
+							<div
+								style={{
+									display: "flex",
+									"flex-direction": "column",
+									gap: "2px",
+									background: uHeader,
+									padding: "5px",
+									"border-top": `1px solid ${uBorder}`,
+								}}
+							>
+								<button
+									onClick={() => setTool("pencil")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "pencil" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "pencil" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconPencil size={18} />
+								</button>
+								<button
+									onClick={() => setTool("eraser")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "eraser" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "eraser" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconEraser size={18} />
+								</button>
+								<button
+									onClick={() => setTool("fill")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "fill" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "fill" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconBucket size={18} />
+								</button>
+								<button
+									onClick={() => setTool("line")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "line" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "line" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconLine size={18} />
+								</button>
+								<button
+									onClick={() => setTool("rect")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "rect" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "rect" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconRect size={18} />
+								</button>
+								<button
+									onClick={() => setTool("circle")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "circle" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "circle" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconCircle size={18} />
+								</button>
+								<button
+									onClick={() => setTool("select")}
+									style={{
+										display: "inline-flex",
+										height: "32px",
+										width: "32px",
+										padding: "0",
+										margin: "0",
+										"align-items": "center",
+										"justify-content": "center",
+										background: tool() === "select" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "select" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+								>
+									<IconSelect size={18} />
+								</button>
+								<div style={{ margin: "5px 0" }}></div>
+								<button
+									onClick={() => setTool("pan")}
+									onDblClick={() => {
+										setPanX(0);
+										setPanY(0);
+									}}
+									style={{
+										padding: "8px 0",
+										background: tool() === "pan" ? uBtn : "transparent",
+										border: "none",
+										color: tool() === "pan" ? uActiveText : uText,
+										cursor: "pointer",
+									}}
+									title="Pan (Middle Click or Shift-Click) | Double-Click to Reset"
+								>
+									<IconPan size={18} />
+								</button>
+								<div
+									style={{ margin: "5px 0", "border-top": "1px solid #444" }}
+								></div>
+								<input
+									type="color"
+									value={color()}
+									onInput={(e) => setColor(e.currentTarget.value)}
+									style={{
+										width: "32px",
+										height: "32px",
+										padding: 0,
+										border: "none",
+										"border-radius": "4px",
+										cursor: "pointer",
+									}}
+								/>
+							</div>
+
+							{/* Center Workspace (Canvas) */}
+							<div
+								style={{
+									flex: 1,
+									"min-width": 0,
+									display: "flex",
+									"flex-direction": "column",
+									background: uHeader,
+									border: `1px solid ${uBorder}`,
+								}}
+							>
+								<div
+									style={{
+										background: uDark,
+										padding: "5px",
+										"border-bottom": `1px solid ${uBorder}`,
+										display: "flex",
+										"justify-content": "space-between",
+										"align-items": "center",
+										gap: "10px",
+									}}
+								>
+									<div
+										style={{
+											display: "flex",
+											gap: "10px",
+											"align-items": "center",
+										}}
+									>
+										<span style={{ "font-size": "11px", color: uText }}>
+											Zoom: {zoom()}x
+										</span>
+										<input
+											type="range"
+											min="2"
+											max="60"
+											value={zoom()}
+											onInput={(e) =>
+												setZoom(parseInt(e.currentTarget.value, 10))
+											}
+											style={{ width: "100px" }}
+										/>
+									</div>
+									<div
+										style={{
+											display: "flex",
+											gap: "5px",
+											"align-items": "center",
+											"font-size": "11px",
+											color: uText,
+										}}
+									>
+										<Show when={true}>
+											<div
+												style={{
+													display: "flex",
+													gap: "5px",
+													background: "#181818",
+													padding: "2px",
+													"border-radius": "3px",
+													border: `1px solid ${uBorder}`,
+												}}
+											>
+												<button
+													onClick={() => setAtlasViewMode("subimage")}
+													style={{
+														border: "none",
+														"border-radius": "2px",
+														background:
+															atlasViewMode() === "subimage"
+																? uActive
+																: "transparent",
+														color:
+															atlasViewMode() === "subimage"
+																? uActiveText
+																: uText,
+														cursor: "pointer",
+														"font-size": "11px",
+													}}
+												>
+													Cell View
+												</button>
+												<button
+													onClick={() => setAtlasViewMode("atlas")}
+													style={{
+														border: "none",
+														"border-radius": "2px",
+														background:
+															atlasViewMode() === "atlas"
+																? uActive
+																: "transparent",
+														color:
+															atlasViewMode() === "atlas" ? uActiveText : uText,
+														cursor: "pointer",
+														"font-size": "11px",
+													}}
+												>
+													Atlas Layout
+												</button>
+											</div>
+										</Show>
+										Grid Size:
+										<input
+											type="number"
+											min="2"
+											max="1024"
+											value={
+												proj.isAtlas
+													? proj.frames.find((f) => f.id === proj.activeFrameId)
+															?.width || proj.width
+													: proj.width
+											}
+											onInput={(e) =>
+												resizeCanvas(
+													parseInt(e.currentTarget.value, 10) || 32,
+													proj.isAtlas
+														? proj.frames.find(
+																(f) => f.id === proj.activeFrameId,
+															)?.height || proj.height
+														: proj.height,
+												)
+											}
+											style={{
+												width: "45px",
+												background: uBtn,
+												color: uActiveText,
+												border: `1px solid ${uBorder}`,
+												padding: "2px",
+											}}
+										/>
+										x
+										<input
+											type="number"
+											min="2"
+											max="1024"
+											value={
+												proj.isAtlas
+													? proj.frames.find((f) => f.id === proj.activeFrameId)
+															?.height || proj.height
+													: proj.height
+											}
+											onInput={(e) =>
+												resizeCanvas(
+													proj.isAtlas
+														? proj.frames.find(
+																(f) => f.id === proj.activeFrameId,
+															)?.width || proj.width
+														: proj.width,
+													parseInt(e.currentTarget.value, 10) || 32,
+												)
+											}
+											style={{
+												width: "45px",
+												background: uBtn,
+												color: uActiveText,
+												border: `1px solid ${uBorder}`,
+												padding: "2px",
+											}}
+										/>
+									</div>
+								</div>
+
+								<Show when={selectionBox() !== null}>
+									<div
+										style={{
+											background: uDark,
+											padding: "5px 10px",
+											"border-bottom": `1px solid ${uBorder}`,
+											display: "flex",
+											gap: "10px",
+											"align-items": "center",
+											"font-size": "11px",
+										}}
+									>
+										<span style={{ color: uActiveText, "font-weight": "bold" }}>
+											Selection
+										</span>
+										<div style={{ display: "flex", gap: "5px" }}>
+											<button
+												onClick={() => selectionAction("copy")}
+												title="Copy (Ctrl+C)"
+												style={{
+													display: "flex",
+													"align-items": "center",
+													gap: "4px",
+													background: uBtn,
+													color: uText,
+													border: `1px solid ${uBorder}`,
+													padding: "2px 6px",
+													cursor: "pointer",
+												}}
+											>
+												<IconCopy size={12} /> Copy
+											</button>
+											<button
+												onClick={() => selectionAction("paste")}
+												title="Paste (Ctrl+V)"
+												style={{
+													display: "flex",
+													"align-items": "center",
+													gap: "4px",
+													background: uBtn,
+													color: uText,
+													border: `1px solid ${uBorder}`,
+													padding: "2px 6px",
+													cursor: "pointer",
+												}}
+											>
+												<IconPaste size={12} /> Paste
+											</button>
+											<button
+												onClick={() => selectionAction("duplicate")}
+												title="Duplicate (Ctrl+D)"
+												style={{
+													display: "flex",
+													"align-items": "center",
+													gap: "4px",
+													background: uBtn,
+													color: uText,
+													border: `1px solid ${uBorder}`,
+													padding: "2px 6px",
+													cursor: "pointer",
+												}}
+											>
+												<IconDuplicate size={12} /> Duplicate
+											</button>
+											<button
+												onClick={() => selectionAction("delete")}
+												title="Delete (Del)"
+												style={{
+													display: "flex",
+													"align-items": "center",
+													gap: "4px",
+													background: uBtn,
+													color: "#f55",
+													border: `1px solid ${uBorder}`,
+													padding: "2px 6px",
+													cursor: "pointer",
+												}}
+											>
+												<IconTrash size={12} /> Delete
+											</button>
+											<span style={{ color: "#555" }}>|</span>
+											<button
+												onClick={() => selectionAction("flip_h")}
+												style={{
+													display: "flex",
+													"align-items": "center",
+													gap: "4px",
+													background: uBtn,
+													color: uText,
+													border: `1px solid ${uBorder}`,
+													padding: "2px 6px",
+													cursor: "pointer",
+												}}
+											>
+												<IconFlipHorizontal size={12} /> Flip H
+											</button>
+											<button
+												onClick={() => selectionAction("flip_v")}
+												style={{
+													display: "flex",
+													"align-items": "center",
+													gap: "4px",
+													background: uBtn,
+													color: uText,
+													border: `1px solid ${uBorder}`,
+													padding: "2px 6px",
+													cursor: "pointer",
+												}}
+											>
+												<IconFlipVertical size={12} /> Flip V
+											</button>
+											<span style={{ color: "#555" }}>|</span>
+											<button
+												onClick={() => setSelectionBox(null)}
+												style={{
+													background: "transparent",
+													color: uText,
+													border: "none",
+													cursor: "pointer",
+													"text-decoration": "underline",
+												}}
+											>
+												Deselect
+											</button>
+										</div>
+									</div>
+								</Show>
+
+								<div
+									onMouseDown={(e) => {
+										if (
+											e.button === 1 ||
+											tool() === "pan" ||
+											(e.button === 0 && e.shiftKey)
+										) {
+											isPanning = true;
+											panStartX = e.clientX;
+											panStartY = e.clientY;
+										}
+									}}
+									onMouseMove={(e) => {
+										if (isPanning) {
+											setPanX((px) => px + (e.clientX - panStartX));
+											setPanY((py) => py + (e.clientY - panStartY));
+											panStartX = e.clientX;
+											panStartY = e.clientY;
+										}
+									}}
+									onMouseUp={() => (isPanning = false)}
+									onMouseLeave={() => (isPanning = false)}
+									style={{
+										flex: 1,
+										display: "flex",
+										"justify-content": "center",
+										"align-items": "center",
+										background: "#181818",
+										position: "relative",
+										overflow: "hidden",
+									}}
+								>
+									<div
+										style={{
+											transform: `translate(${panX()}px, ${panY()}px)`,
+											width: `${(atlasViewMode() === "atlas" ? (proj.isAtlas ? atlasMapW() : proj.width * (proj.metadata?.columns || 1)) : proj.frames.find((f) => f.id === proj.activeFrameId)?.width || proj.width) * zoom()}px`,
+											height: `${(atlasViewMode() === "atlas" ? (proj.isAtlas ? atlasMapH() : proj.height * (proj.metadata?.rows || Math.ceil(proj.frames.length / (proj.metadata?.columns || 1)))) : proj.frames.find((f) => f.id === proj.activeFrameId)?.height || proj.height) * zoom()}px`,
+											position: "relative",
+											background: `repeating-conic-gradient(#333 0% 25%, #2a2a2a 0% 50%) 50% / 16px 16px`,
+											"box-shadow": "0 0 20px rgba(0,0,0,0.8)",
+										}}
+									>
+										<div
+											style={{
+												display: atlasViewMode() === "atlas" ? "none" : "block",
+												width: "100%",
+												height: "100%",
+											}}
+										>
+											{/* Composite Canvas (Behind) */}
+											<canvas
+												ref={compositeCanvasRef}
+												width={
+													(atlasViewMode() === "atlas"
+														? proj.isAtlas
+															? atlasMapW()
+															: proj.width * (proj.metadata?.columns || 1)
+														: proj.frames.find(
+																(f) => f.id === proj.activeFrameId,
+															)?.width || proj.width) * zoom()
+												}
+												height={
+													(atlasViewMode() === "atlas"
+														? proj.isAtlas
+															? atlasMapH()
+															: proj.height *
+																(proj.metadata?.rows ||
+																	Math.ceil(
+																		proj.frames.length /
+																			(proj.metadata?.columns || 1),
+																	))
+														: proj.frames.find(
+																(f) => f.id === proj.activeFrameId,
+															)?.height || proj.height) * zoom()
+												}
+												style={{
+													position: "absolute",
+													"pointer-events": "none",
+													"image-rendering": "pixelated",
+													width: "100%",
+													height: "100%",
+												}}
+											></canvas>
+
+											{/* Preview UI Overlay (Interactive) */}
+											<canvas
+												ref={previewCanvasRef}
+												width={
+													atlasViewMode() === "atlas"
+														? proj.isAtlas
+															? atlasMapW()
+															: proj.width * (proj.metadata?.columns || 1)
+														: proj.frames.find(
+																(f) => f.id === proj.activeFrameId,
+															)?.width || proj.width
+												}
+												height={
+													atlasViewMode() === "atlas"
+														? proj.isAtlas
+															? atlasMapH()
+															: proj.height *
+																(proj.metadata?.rows ||
+																	Math.ceil(
+																		proj.frames.length /
+																			(proj.metadata?.columns || 1),
+																	))
+														: proj.frames.find(
+																(f) => f.id === proj.activeFrameId,
+															)?.height || proj.height
+												}
+												onMouseDown={handlePointerDown}
+												onMouseMove={handlePointerMove}
+												onMouseUp={handlePointerUp}
+												onMouseLeave={handlePointerUp}
+												style={{
+													position: "absolute",
+													width: "100%",
+													height: "100%",
+													"image-rendering": "pixelated",
+													cursor: "crosshair",
+													"z-index": 2,
+												}}
+											></canvas>
+											<Show when={selectionBox()}>
+												{(_) => (
+													<div
+														style={{
+															position: "absolute",
+															left: `${((selectionBox()?.x || 0) / (proj.frames.find((f) => f.id === proj.activeFrameId)?.width || proj.width)) * 100}%`,
+															top: `${((selectionBox()?.y || 0) / (proj.frames.find((f) => f.id === proj.activeFrameId)?.height || proj.height)) * 100}%`,
+															width: `${((selectionBox()?.w || 0) / (proj.frames.find((f) => f.id === proj.activeFrameId)?.width || proj.width)) * 100}%`,
+															height: `${((selectionBox()?.h || 0) / (proj.frames.find((f) => f.id === proj.activeFrameId)?.height || proj.height)) * 100}%`,
+															border: "1px dashed #fff",
+															outline: "1px solid rgba(0,0,0,0.5)",
+															"box-sizing": "border-box",
+															"pointer-events": "none",
+															"z-index": 10,
+															"box-shadow": "inset 0 0 0 1px rgba(0,0,0,0.5)",
+														}}
+													/>
+												)}
+											</Show>
+										</div>
+										<Show when={atlasViewMode() === "atlas"}>
+											<img
+												src={atlasDataUri()}
+												style={{
+													position: "absolute",
+													width: "100%",
+													height: "100%",
+													"object-fit": "contain",
+													"image-rendering": "pixelated",
+													"pointer-events": "none",
+												}}
+											/>
+										</Show>
+									</div>
+								</div>
+
+								{/* Timeline Strip */}
+								<div
+									style={{
+										background: uDark,
+										"border-top": `1px solid ${uBorder}`,
+										padding: "5px",
+										display: "flex",
+										gap: "5px",
+										"overflow-x": "auto",
+										"align-items": "center",
+									}}
+								>
+									<div
+										style={{
+											display: "flex",
+											"flex-direction": "column",
+											gap: "2px",
+											"padding-right": "5px",
+											"border-right": `1px solid ${uBorder}`,
+										}}
+									>
+										<button
+											title="Delete Frame"
+											onClick={deleteFrame}
+											style={{
+												padding: "0",
+												background: "transparent",
+												color: proj.frames.length <= 1 ? "#884444" : "#ff5555",
+												border: "none",
+												cursor:
+													proj.frames.length <= 1 ? "not-allowed" : "pointer",
+												"font-size": "14px",
+												"font-weight": "bold",
+												"flex-shrink": 0,
+												"line-height": "16px",
+											}}
+										>
+											<IconTrash size={14} />
+										</button>
+										<button
+											title="Duplicate Frame"
+											onClick={duplicateFrame}
+											style={{
+												padding: "0",
+												background: "transparent",
+												color: uActiveText,
+												border: "none",
+												cursor: "pointer",
+												"font-size": "14px",
+												"font-weight": "bold",
+												"flex-shrink": 0,
+												"line-height": "16px",
+											}}
+										>
+											<IconDuplicate size={14} />
+										</button>
+									</div>
+									<button
+										title="Add Blank Frame"
+										onClick={addFrame}
+										style={{
+											padding: "10px",
+											background: uBtn,
+											color: uActiveText,
+											border: `1px solid ${uBorder}`,
+											cursor: "pointer",
+											"border-radius": "3px",
+											"font-weight": "bold",
+											"flex-shrink": 0,
+										}}
+									>
+										<IconPlus size={14} />
+									</button>
+									<For each={proj.frames}>
+										{(fr, i) => (
+											<div
+												onClick={() => {
+													setProjects((ps) =>
+														ps.map((p) =>
+															p.id === proj.id
+																? { ...p, activeFrameId: fr.id }
+																: p,
+														),
+													);
+													const target = entities().find(
+														(e) => e.id === targetEntity(),
+													);
+													if (target?.animator && !target.animator.isPlaying) {
+														const anim = target.animator.animations.get(
+															target.animator.currentAnimation,
+														);
+														const idxInAnim = anim
+															? anim.frames.indexOf(i())
+															: -1;
+														if (idxInAnim !== -1) {
+															target.animator.currentFrameIndex = idxInAnim;
+														} else {
+															target.animator.currentAnimation = "preview";
+															target.animator.currentFrameIndex = i();
+														}
+													}
+													syncToEngine();
+												}}
+												style={{
+													width: "40px",
+													height: "40px",
+													"flex-shrink": 0,
+													background: `repeating-conic-gradient(#333 0% 25%, #2a2a2a 0% 50%) 50% / 8px 8px`,
+													border: `2px solid ${fr.id === proj.activeFrameId ? uAcc : uBorder}`,
+													cursor: "pointer",
+													"border-radius": "3px",
+													overflow: "hidden",
+												}}
+											>
+												<canvas
+													id={`thumb_${fr.id}`}
+													width={
+														proj.isAtlas ? fr.width || proj.width : proj.width
+													}
+													height={
+														proj.isAtlas
+															? fr.height || proj.height
+															: proj.height
+													}
+													style={{
+														width: "100%",
+														height: "100%",
+														"object-fit": "contain",
+														"image-rendering": "pixelated",
+													}}
+												></canvas>
+											</div>
+										)}
+									</For>
+								</div>
+							</div>
+
+							{/* Right Panels (Layers / Options) */}
+							<div
+								style={{
+									width: "220px",
+									display: "flex",
+									"flex-direction": "column",
+									gap: "5px",
+								}}
+							>
+								<div
+									style={{
+										flex: 1,
+										background: uHeader,
+										border: `1px solid ${uBorder}`,
+										display: "flex",
+										"flex-direction": "column",
+									}}
+								>
+									<div
+										style={{
+											padding: "5px",
+											background: uDark,
+											"border-bottom": `1px solid ${uBorder}`,
+											"font-size": "12px",
+											"font-weight": "bold",
+											display: "flex",
+											"align-items": "center",
+											"justify-content": "space-between",
+										}}
+									>
+										Layers
+										<button
+											onClick={addLayer}
+											style={{
+												background: "transparent",
+												appearance: "none",
+												color: uText,
+												border: "none",
+												cursor: "pointer",
+											}}
+										>
+											<IconPlus size={14} />
+										</button>
+									</div>
+									<div
+										style={{
+											flex: 1,
+											"overflow-y": "auto",
+											padding: "5px",
+											display: "flex",
+											"flex-direction": "column",
+											gap: "2px",
+										}}
+									>
+										<For each={proj.layers}>
+											{(l) => (
+												<div
+													style={{
+														display: "flex",
+														"align-items": "center",
+														background:
+															l.id === proj.activeLayerId
+																? uBtn
+																: "transparent",
+														padding: "4px",
+														"border-radius": "3px",
+														cursor: "pointer",
+													}}
+													onClick={() =>
+														setProjects((ps) =>
+															ps.map((p) =>
+																p.id === proj.id
+																	? { ...p, activeLayerId: l.id }
+																	: p,
+															),
+														)
+													}
+												>
+													<button
+														onClick={(e) => {
+															e.stopPropagation();
+															toggleLayerVis(l.id);
+														}}
+														style={{
+															background: "transparent",
+															border: "none",
+															cursor: "pointer",
+															padding: "2px",
+															display: "flex",
+															"align-items": "center",
+															"justify-content": "center",
+															"border-radius": "3px",
+														}}
+													>
+														{l.visible ? (
+															<IconEye size={14} />
+														) : (
+															<IconEyeOff size={14} color="#555" />
+														)}
+													</button>
+													<span
+														style={{
+															"font-size": "11px",
+															flex: 1,
+															color:
+																l.id === proj.activeLayerId
+																	? uActiveText
+																	: uText,
+														}}
+													>
+														{l.name}
+													</span>
+													<Show when={l.id === proj.activeLayerId}>
+														<div
+															style={{
+																display: "flex",
+																gap: "2px",
+																"align-items": "center",
+															}}
+														>
+															<button
+																title="Move Up"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	moveLayer(l.id, -1);
+																}}
+																style={{
+																	background: "transparent",
+																	color:
+																		proj.layers.findIndex(
+																			(x) => x.id === l.id,
+																		) === 0
+																			? "#777"
+																			: uText,
+																	border: "none",
+																	cursor:
+																		proj.layers.findIndex(
+																			(x) => x.id === l.id,
+																		) === 0
+																			? "not-allowed"
+																			: "pointer",
+																	padding: "2px",
+																	display: "flex",
+																	"align-items": "center",
+																	"justify-content": "center",
+																	"border-radius": "3px",
+																}}
+															>
+																<IconUp size={14} />
+															</button>
+															<button
+																title="Move Down"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	moveLayer(l.id, 1);
+																}}
+																style={{
+																	background: "transparent",
+																	color:
+																		proj.layers.findIndex(
+																			(x) => x.id === l.id,
+																		) ===
+																		proj.layers.length - 1
+																			? "#777"
+																			: uText,
+																	border: "none",
+																	cursor:
+																		proj.layers.findIndex(
+																			(x) => x.id === l.id,
+																		) ===
+																		proj.layers.length - 1
+																			? "not-allowed"
+																			: "pointer",
+																	padding: "2px",
+																	display: "flex",
+																	"align-items": "center",
+																	"justify-content": "center",
+																	"border-radius": "3px",
+																}}
+															>
+																<IconDown size={14} />
+															</button>
+															<button
+																title="Merge Down"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	mergeLayerDown(l.id);
+																}}
+																style={{
+																	background: "transparent",
+																	color:
+																		proj.layers.findIndex(
+																			(x) => x.id === l.id,
+																		) ===
+																		proj.layers.length - 1
+																			? "#777"
+																			: uText,
+																	border: "none",
+																	cursor:
+																		proj.layers.findIndex(
+																			(x) => x.id === l.id,
+																		) ===
+																		proj.layers.length - 1
+																			? "not-allowed"
+																			: "pointer",
+																	padding: "2px",
+																	display: "flex",
+																	"align-items": "center",
+																	"justify-content": "center",
+																	"border-radius": "3px",
+																}}
+															>
+																<IconMergeDown size={14} />
+															</button>
+															<button
+																title="Duplicate Layer"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	duplicateLayer(l.id);
+																}}
+																style={{
+																	background: "transparent",
+																	color: uText,
+																	border: "none",
+																	cursor: "pointer",
+																	padding: "2px",
+																	display: "flex",
+																	"align-items": "center",
+																	"justify-content": "center",
+																	"border-radius": "3px",
+																}}
+															>
+																<IconDuplicate size={14} />
+															</button>
+															<button
+																title="Delete Layer"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	deleteLayer(l.id);
+																}}
+																style={{
+																	background: "transparent",
+																	color:
+																		proj.layers.length <= 1
+																			? "#884444"
+																			: "#ff5555",
+																	border: "none",
+																	cursor:
+																		proj.layers.length <= 1
+																			? "not-allowed"
+																			: "pointer",
+																	padding: "2px",
+																	display: "flex",
+																	"align-items": "center",
+																	"justify-content": "center",
+																	"border-radius": "3px",
+																}}
+															>
+																<IconTrash size={14} />
+															</button>
+														</div>
+													</Show>
+												</div>
+											)}
+										</For>
+									</div>
+								</div>
+
+								<div
+									style={{
+										flex: 1,
+										background: uHeader,
+										border: `1px solid ${uBorder}`,
+										padding: "5px",
+										"font-size": "11px",
+										color: uText,
+										display: "flex",
+										"flex-direction": "column",
+										gap: "10px",
+									}}
+								>
+									<div>
+										Target Engine Entity:
+										<select
+											value={targetEntity()}
+											onChange={(e) => {
+												const newId = parseInt(e.currentTarget.value, 10);
+												setTargetEntity(newId);
+												const target = entities().find((x) => x.id === newId);
+												if (target?.renderer?.imageSrc) {
+													const name = target.renderer.imageSrc
+														.replace("/public/assets/sprites/", "")
+														.replace(".png", "");
+													const proj = projects().find((p) => p.name === name);
+													if (proj) setActiveProjId(proj.id);
+												}
+											}}
+											style={{
+												width: "100%",
+												padding: "4px",
+												"margin-top": "5px",
+												background: "#282828",
+												color: uActiveText,
+												border: `1px solid ${uBorder}`,
+											}}
+										>
+											<For each={entities()}>
+												{(e) => <option value={e.id}>Entity #{e.id}</option>}
+											</For>
+										</select>
+									</div>
+
+									<div style={{ "border-top": `1px solid ${uBorder}` }}></div>
+
+									<span
+										style={{
+											color:
+												saveStatus() === "Saved"
+													? "#10b981"
+													: saveStatus() === "Error"
+														? "#ef4444"
+														: "#888",
+											"font-style": "italic",
+											"font-size": "10px",
+											"text-align": "center",
+											padding: "5px",
+										}}
+									>
+										{saveStatus() === "Ready" ? (
+											""
+										) : saveStatus() === "Saved" ? (
+											<div
+												style={{
+													display: "flex",
+													"justify-content": "center",
+													gap: "4px",
+													"align-items": "center",
+												}}
+											>
+												<IconCheck size={10} /> Saved to Disk
+											</div>
+										) : saveStatus() === "Error" ? (
+											<div
+												style={{
+													display: "flex",
+													"justify-content": "center",
+													gap: "4px",
+													"align-items": "center",
+												}}
+											>
+												<IconX size={10} /> Error Persisting
+											</div>
+										) : (
+											"Auto-saving to Server Disk..."
+										)}
+									</span>
+								</div>
+							</div>
+						</div>
+					);
+				})()}
+			</Show>
+
+			<Show when={dialog() !== null}>
+				<div
+					style={{
+						position: "absolute",
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0,
+						background: "rgba(0,0,0,0.8)",
+						display: "flex",
+						"align-items": "center",
+						"justify-content": "center",
+						"z-index": 99999,
+					}}
+				>
+					<div
+						style={{
+							background: uDark,
+							padding: "20px",
+							"border-radius": "8px",
+							border: `1px solid ${uBorder}`,
+							width: "300px",
+							"box-shadow": "0 10px 40px rgba(0,0,0,1)",
+						}}
+					>
+						<h3
+							style={{
+								margin: "0 0 15px 0",
+								color: uActiveText,
+								"font-size": "14px",
+							}}
+						>
+							{dialog()?.title}
+						</h3>
+						<input
+							type="text"
+							ref={(el) => {
+								dialogInputRef = el;
+								setTimeout(() => el.focus(), 10);
+							}}
+							value={dialog()?.placeholder}
+							onKeyDown={(e) => {
+								if (e.key === "Enter") {
+									const v = e.currentTarget.value || dialog()?.placeholder;
+									dialog()?.onConfirm(v, dialogToggle());
+									setDialog(null);
+								} else if (e.key === "Escape") {
+									if (dialog()?.onCancel) dialog()?.onCancel?.();
+									setDialog(null);
+								}
+							}}
+							style={{
+								width: "100%",
+								padding: "8px",
+								background: "#111",
+								color: "#ddd",
+								border: `1px solid ${uBorder}`,
+								"border-radius": "4px",
+								"box-sizing": "border-box",
+								"margin-bottom": "15px",
+							}}
+						/>
+						<Show when={dialog()?.toggleText}>
+							<label
+								style={{
+									display: "flex",
+									"align-items": "center",
+									gap: "10px",
+									color: "#ddd",
+									"font-size": "12px",
+									"margin-bottom": "15px",
+									cursor: "pointer",
+								}}
+							>
+								<input
+									type="checkbox"
+									checked={dialogToggle()}
+									onChange={(e) => setDialogToggle(e.currentTarget.checked)}
+								/>
+								{dialog()?.toggleText}
+							</label>
+						</Show>
+						<div
+							style={{
+								display: "flex",
+								"justify-content": "flex-end",
+								gap: "10px",
+							}}
+						>
+							<button
+								onClick={() => {
+									if (dialog()?.onCancel) dialog()?.onCancel?.();
+									setDialog(null);
+								}}
+								style={{
+									padding: "6px 12px",
+									background: "transparent",
+									color: uText,
+									border: "none",
+									cursor: "pointer",
+								}}
+							>
+								Cancel
+							</button>
+							<button
+								onClick={() => {
+									dialog()?.onConfirm(
+										dialogInputRef.value || dialog()?.placeholder,
+										dialogToggle(),
+									);
+									setDialog(null);
+								}}
+								style={{
+									padding: "6px 12px",
+									background: uAcc,
+									color: "#fff",
+									border: "none",
+									"border-radius": "4px",
+									cursor: "pointer",
+									"font-weight": "bold",
+								}}
+							>
+								OK
+							</button>
+						</div>
+					</div>
+				</div>
+			</Show>
+		</div>
+	);
+}