From 6f5f1e1182725ba9ba477cd60a0d7bd6c28124de Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Sun, 19 Apr 2026 23:41:07 +0200
Subject: [PATCH 01/12] feat: implement map resizing functionality with new
 hooks and controls

Co-authored-by: Copilot <copilot@github.com>
---
 .../editor/MapCanvas/MapResizeControls.tsx    | 183 ++++++++++
 src/components/editor/MapCanvas/index.tsx     | 323 ++----------------
 .../editor/MapCanvas/use-map-resize.ts        | 146 ++++++++
 src/types/map-canvas.ts                       |  43 ++-
 4 files changed, 401 insertions(+), 294 deletions(-)
 create mode 100644 src/components/editor/MapCanvas/MapResizeControls.tsx
 create mode 100644 src/components/editor/MapCanvas/use-map-resize.ts

diff --git a/src/components/editor/MapCanvas/MapResizeControls.tsx b/src/components/editor/MapCanvas/MapResizeControls.tsx
new file mode 100644
index 0000000..c6e598a
--- /dev/null
+++ b/src/components/editor/MapCanvas/MapResizeControls.tsx
@@ -0,0 +1,183 @@
+import type { MapResizeControlsProps } from "@/types/map-canvas";
+import { RESIZE_CURSORS } from "./resize-utils";
+
+const MAP_RESIZE_GUTTER = 14;
+const MAP_RESIZE_RAIL_SIZE = 10;
+const MAP_RESIZE_BADGE_OFFSET = 6;
+
+export function MapResizeControls({
+  canvasW,
+  canvasH,
+  previewWidth,
+  previewHeight,
+  activeHandle,
+  hoveredHandle,
+  mapResizePreview,
+  isResizing,
+  onHoverHandleChange,
+  onBeginMapResize,
+}: MapResizeControlsProps) {
+  const sizeLabel = `${previewWidth} × ${previewHeight}`;
+  const rightGripActive = activeHandle === "e" || activeHandle === "se";
+  const bottomGripActive = activeHandle === "s" || activeHandle === "se";
+  const rightGripHovered = hoveredHandle === "e" || hoveredHandle === "se";
+  const bottomGripHovered = hoveredHandle === "s" || hoveredHandle === "se";
+  const cornerGripActive = activeHandle === "se";
+  const cornerGripHovered = hoveredHandle === "se";
+
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: canvasW,
+          width: MAP_RESIZE_GUTTER,
+          height: canvasH,
+          cursor: RESIZE_CURSORS.e,
+          touchAction: "none",
+        }}
+        onContextMenu={(event) => event.preventDefault()}
+        onPointerEnter={() => onHoverHandleChange("e")}
+        onPointerLeave={() => {
+          if (!isResizing) {
+            onHoverHandleChange(null);
+          }
+        }}
+        onPointerDown={(event) => onBeginMapResize("e", event)}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 4,
+            bottom: 4,
+            left: (MAP_RESIZE_GUTTER - MAP_RESIZE_RAIL_SIZE) / 2,
+            width: MAP_RESIZE_RAIL_SIZE,
+            borderRadius: 999,
+            background: rightGripActive
+              ? "rgba(251, 146, 60, 0.45)"
+              : rightGripHovered
+                ? "rgba(251, 146, 60, 0.24)"
+                : "rgba(148, 163, 184, 0.28)",
+            border: rightGripHovered
+              ? "1px solid rgba(251, 146, 60, 0.35)"
+              : "1px solid rgba(255, 255, 255, 0.18)",
+            boxShadow: rightGripHovered
+              ? "0 0 10px rgba(251, 146, 60, 0.18)"
+              : "none",
+            transition:
+              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+          }}
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: canvasH,
+          left: 0,
+          width: canvasW,
+          height: MAP_RESIZE_GUTTER,
+          cursor: RESIZE_CURSORS.s,
+          touchAction: "none",
+        }}
+        onContextMenu={(event) => event.preventDefault()}
+        onPointerEnter={() => onHoverHandleChange("s")}
+        onPointerLeave={() => {
+          if (!isResizing) {
+            onHoverHandleChange(null);
+          }
+        }}
+        onPointerDown={(event) => onBeginMapResize("s", event)}
+      >
+        <div
+          style={{
+            position: "absolute",
+            left: 4,
+            right: 4,
+            top: (MAP_RESIZE_GUTTER - MAP_RESIZE_RAIL_SIZE) / 2,
+            height: MAP_RESIZE_RAIL_SIZE,
+            borderRadius: 999,
+            background: bottomGripActive
+              ? "rgba(251, 146, 60, 0.45)"
+              : bottomGripHovered
+                ? "rgba(251, 146, 60, 0.24)"
+                : "rgba(148, 163, 184, 0.28)",
+            border: bottomGripHovered
+              ? "1px solid rgba(251, 146, 60, 0.35)"
+              : "1px solid rgba(255, 255, 255, 0.18)",
+            boxShadow: bottomGripHovered
+              ? "0 0 10px rgba(251, 146, 60, 0.18)"
+              : "none",
+            transition:
+              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+          }}
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: canvasH,
+          left: canvasW,
+          width: MAP_RESIZE_GUTTER,
+          height: MAP_RESIZE_GUTTER,
+          cursor: RESIZE_CURSORS.se,
+          touchAction: "none",
+        }}
+        onContextMenu={(event) => event.preventDefault()}
+        onPointerEnter={() => onHoverHandleChange("se")}
+        onPointerLeave={() => {
+          if (!isResizing) {
+            onHoverHandleChange(null);
+          }
+        }}
+        onPointerDown={(event) => onBeginMapResize("se", event)}
+      >
+        <div
+          style={{
+            position: "absolute",
+            inset: 2,
+            borderRadius: 4,
+            background: cornerGripActive
+              ? "rgba(251, 146, 60, 0.45)"
+              : cornerGripHovered
+                ? "rgba(251, 146, 60, 0.24)"
+                : "rgba(148, 163, 184, 0.28)",
+            border: cornerGripHovered
+              ? "1px solid rgba(251, 146, 60, 0.35)"
+              : "1px solid rgba(255, 255, 255, 0.18)",
+            boxShadow: cornerGripHovered
+              ? "0 0 12px rgba(251, 146, 60, 0.2)"
+              : "none",
+            transition:
+              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+          }}
+        />
+      </div>
+      {mapResizePreview && (
+        <div
+          aria-live="polite"
+          style={{
+            position: "absolute",
+            top: Math.max(0, canvasH - MAP_RESIZE_GUTTER - 24),
+            left: Math.max(0, canvasW - 70 - MAP_RESIZE_BADGE_OFFSET),
+            minWidth: 70,
+            padding: "2px 6px",
+            borderRadius: 999,
+            background: "rgba(15, 23, 42, 0.88)",
+            color: "rgba(248, 250, 252, 0.95)",
+            border: "1px solid rgba(251, 146, 60, 0.35)",
+            fontSize: 11,
+            lineHeight: 1.4,
+            textAlign: "center",
+            pointerEvents: "none",
+          }}
+        >
+          {sizeLabel}
+        </div>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/MapCanvas/index.tsx b/src/components/editor/MapCanvas/index.tsx
index 50a2d80..b55cc68 100644
--- a/src/components/editor/MapCanvas/index.tsx
+++ b/src/components/editor/MapCanvas/index.tsx
@@ -20,12 +20,7 @@ import {
   isHexagonalMap,
 } from "@/lib/map-geometry";
 import { isTextObject } from "@/lib/text-objects";
-import type {
-  MapCanvasProps,
-  MapResizeAction,
-  MapResizeHandle,
-  MapResizePreview,
-} from "@/types/map-canvas";
+import type { MapCanvasProps } from "@/types/map-canvas";
 import { RESIZE_CURSORS } from "./resize-utils";
 import {
   tilesetImageCache,
@@ -46,25 +41,12 @@ import {
   drawLiveObjectPlacementPreview,
   drawMapObjects,
 } from "./draw-map-objects";
+import { MapResizeControls } from "./MapResizeControls";
 import { TextObjectEditorOverlay } from "./TextObjectEditorOverlay";
+import { useMapResize } from "./use-map-resize";
 import { useSceneInteraction } from "./use-scene-interaction";
 
 const MAP_RESIZE_GUTTER = 14;
-const MAP_RESIZE_RAIL_SIZE = 10;
-const MAP_RESIZE_BADGE_OFFSET = 6;
-
-function clampMapDimension(value: number, fallback: number): number {
-  if (!Number.isFinite(value)) return fallback;
-  return Math.min(256, Math.max(1, Math.round(value)));
-}
-
-function getResizeDeltaInTiles(delta: number, scaledTile: number): number {
-  if (scaledTile <= 0) return 0;
-  if (delta >= 0) {
-    return Math.floor(delta / scaledTile);
-  }
-  return Math.ceil(delta / scaledTile);
-}
 
 export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
   const {
@@ -117,20 +99,26 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
   const lowerBgCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const upperBgCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const [imagesReady, setImagesReady] = useState(0);
-  const mapResizeActionRef = useRef<MapResizeAction | null>(null);
-  const [activeMapResizeHandle, setActiveMapResizeHandle] =
-    useState<MapResizeHandle | null>(null);
-  const [hoveredMapResizeHandle, setHoveredMapResizeHandle] =
-    useState<MapResizeHandle | null>(null);
-  const [mapResizePreview, setMapResizePreview] =
-    useState<MapResizePreview | null>(null);
 
   const tileSize = map.tileSize;
   const mapW = map.widthInTiles;
   const mapH = map.heightInTiles;
-  const previewMapW = mapResizePreview?.width ?? mapW;
-  const previewMapH = mapResizePreview?.height ?? mapH;
   const scaledTile = tileSize * zoom;
+  const {
+    activeMapResizeHandle,
+    hoveredMapResizeHandle,
+    mapResizePreview,
+    previewWidth: previewMapW,
+    previewHeight: previewMapH,
+    beginMapResize,
+    isResizing,
+    setHoveredMapResizeHandle,
+  } = useMapResize({
+    mapWidth: mapW,
+    mapHeight: mapH,
+    scaledTile,
+    onResizeMap,
+  });
   const previewMap = {
     ...map,
     widthInTiles: previewMapW,
@@ -154,107 +142,6 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
     [map, zoom],
   );
 
-  const endMapResize = useCallback(
-    (commit: boolean) => {
-      const action = mapResizeActionRef.current;
-      if (!action) return;
-
-      mapResizeActionRef.current = null;
-      setActiveMapResizeHandle(null);
-      setHoveredMapResizeHandle(null);
-      setMapResizePreview(null);
-
-      if (
-        commit &&
-        (action.nextWidth !== action.origWidth ||
-          action.nextHeight !== action.origHeight)
-      ) {
-        onResizeMap(action.nextWidth, action.nextHeight);
-      }
-    },
-    [onResizeMap],
-  );
-
-  const updateMapResizePreview = useCallback(
-    (clientX: number, clientY: number) => {
-      const action = mapResizeActionRef.current;
-      if (!action) return;
-
-      const deltaTilesX = getResizeDeltaInTiles(
-        clientX - action.startClientX,
-        scaledTile,
-      );
-      const deltaTilesY = getResizeDeltaInTiles(
-        clientY - action.startClientY,
-        scaledTile,
-      );
-      const nextWidth = clampMapDimension(
-        action.origWidth +
-          (action.handle === "e" || action.handle === "se" ? deltaTilesX : 0),
-        action.origWidth,
-      );
-      const nextHeight = clampMapDimension(
-        action.origHeight +
-          (action.handle === "s" || action.handle === "se" ? deltaTilesY : 0),
-        action.origHeight,
-      );
-
-      action.nextWidth = nextWidth;
-      action.nextHeight = nextHeight;
-      setMapResizePreview({ width: nextWidth, height: nextHeight });
-    },
-    [scaledTile],
-  );
-
-  const beginMapResize = useCallback(
-    (handle: MapResizeHandle, e: React.PointerEvent<HTMLDivElement>) => {
-      if (e.button !== 0) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-      mapResizeActionRef.current = {
-        handle,
-        startClientX: e.clientX,
-        startClientY: e.clientY,
-        origWidth: mapW,
-        origHeight: mapH,
-        nextWidth: mapW,
-        nextHeight: mapH,
-      };
-      setActiveMapResizeHandle(handle);
-      setHoveredMapResizeHandle(handle);
-      setMapResizePreview({ width: mapW, height: mapH });
-    },
-    [mapW, mapH],
-  );
-
-  useEffect(() => {
-    if (!activeMapResizeHandle) return;
-
-    function handleWindowPointerMove(e: PointerEvent) {
-      e.preventDefault();
-      updateMapResizePreview(e.clientX, e.clientY);
-    }
-
-    function handleWindowPointerUp(e: PointerEvent) {
-      if (e.button !== 0) return;
-      endMapResize(true);
-    }
-
-    function handleWindowPointerCancel() {
-      endMapResize(false);
-    }
-
-    window.addEventListener("pointermove", handleWindowPointerMove);
-    window.addEventListener("pointerup", handleWindowPointerUp);
-    window.addEventListener("pointercancel", handleWindowPointerCancel);
-    return () => {
-      window.removeEventListener("pointermove", handleWindowPointerMove);
-      window.removeEventListener("pointerup", handleWindowPointerUp);
-      window.removeEventListener("pointercancel", handleWindowPointerCancel);
-    };
-  }, [activeMapResizeHandle, endMapResize, updateMapResizePreview]);
-
   // ---------------------------------------------------------------------------
   // Image loading
   // ---------------------------------------------------------------------------
@@ -997,17 +884,6 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
   const checkSize = 8 * zoom;
   const wrapperWidth = canvasW + MAP_RESIZE_GUTTER;
   const wrapperHeight = canvasH + MAP_RESIZE_GUTTER;
-  const sizeLabel = `${previewMapW} × ${previewMapH}`;
-  const rightGripActive =
-    activeMapResizeHandle === "e" || activeMapResizeHandle === "se";
-  const bottomGripActive =
-    activeMapResizeHandle === "s" || activeMapResizeHandle === "se";
-  const rightGripHovered =
-    hoveredMapResizeHandle === "e" || hoveredMapResizeHandle === "se";
-  const bottomGripHovered =
-    hoveredMapResizeHandle === "s" || hoveredMapResizeHandle === "se";
-  const cornerGripActive = activeMapResizeHandle === "se";
-  const cornerGripHovered = hoveredMapResizeHandle === "se";
 
   return (
     <div
@@ -1097,157 +973,18 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
           />
         )}
       </div>
-      <div
-        aria-hidden="true"
-        style={{
-          position: "absolute",
-          top: 0,
-          left: canvasW,
-          width: MAP_RESIZE_GUTTER,
-          height: canvasH,
-          cursor: RESIZE_CURSORS.e,
-          touchAction: "none",
-        }}
-        onContextMenu={(e) => e.preventDefault()}
-        onPointerEnter={() => setHoveredMapResizeHandle("e")}
-        onPointerLeave={() => {
-          if (!mapResizeActionRef.current) {
-            setHoveredMapResizeHandle(null);
-          }
-        }}
-        onPointerDown={(e) => beginMapResize("e", e)}
-      >
-        <div
-          style={{
-            position: "absolute",
-            top: 4,
-            bottom: 4,
-            left: (MAP_RESIZE_GUTTER - MAP_RESIZE_RAIL_SIZE) / 2,
-            width: MAP_RESIZE_RAIL_SIZE,
-            borderRadius: 999,
-            background: rightGripActive
-              ? "rgba(251, 146, 60, 0.45)"
-              : rightGripHovered
-                ? "rgba(251, 146, 60, 0.24)"
-                : "rgba(148, 163, 184, 0.28)",
-            border: rightGripHovered
-              ? "1px solid rgba(251, 146, 60, 0.35)"
-              : "1px solid rgba(255, 255, 255, 0.18)",
-            boxShadow: rightGripHovered
-              ? "0 0 10px rgba(251, 146, 60, 0.18)"
-              : "none",
-            transition:
-              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
-          }}
-        />
-      </div>
-      <div
-        aria-hidden="true"
-        style={{
-          position: "absolute",
-          top: canvasH,
-          left: 0,
-          width: canvasW,
-          height: MAP_RESIZE_GUTTER,
-          cursor: RESIZE_CURSORS.s,
-          touchAction: "none",
-        }}
-        onContextMenu={(e) => e.preventDefault()}
-        onPointerEnter={() => setHoveredMapResizeHandle("s")}
-        onPointerLeave={() => {
-          if (!mapResizeActionRef.current) {
-            setHoveredMapResizeHandle(null);
-          }
-        }}
-        onPointerDown={(e) => beginMapResize("s", e)}
-      >
-        <div
-          style={{
-            position: "absolute",
-            left: 4,
-            right: 4,
-            top: (MAP_RESIZE_GUTTER - MAP_RESIZE_RAIL_SIZE) / 2,
-            height: MAP_RESIZE_RAIL_SIZE,
-            borderRadius: 999,
-            background: bottomGripActive
-              ? "rgba(251, 146, 60, 0.45)"
-              : bottomGripHovered
-                ? "rgba(251, 146, 60, 0.24)"
-                : "rgba(148, 163, 184, 0.28)",
-            border: bottomGripHovered
-              ? "1px solid rgba(251, 146, 60, 0.35)"
-              : "1px solid rgba(255, 255, 255, 0.18)",
-            boxShadow: bottomGripHovered
-              ? "0 0 10px rgba(251, 146, 60, 0.18)"
-              : "none",
-            transition:
-              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
-          }}
-        />
-      </div>
-      <div
-        aria-hidden="true"
-        style={{
-          position: "absolute",
-          top: canvasH,
-          left: canvasW,
-          width: MAP_RESIZE_GUTTER,
-          height: MAP_RESIZE_GUTTER,
-          cursor: RESIZE_CURSORS.se,
-          touchAction: "none",
-        }}
-        onContextMenu={(e) => e.preventDefault()}
-        onPointerEnter={() => setHoveredMapResizeHandle("se")}
-        onPointerLeave={() => {
-          if (!mapResizeActionRef.current) {
-            setHoveredMapResizeHandle(null);
-          }
-        }}
-        onPointerDown={(e) => beginMapResize("se", e)}
-      >
-        <div
-          style={{
-            position: "absolute",
-            inset: 2,
-            borderRadius: 4,
-            background: cornerGripActive
-              ? "rgba(251, 146, 60, 0.45)"
-              : cornerGripHovered
-                ? "rgba(251, 146, 60, 0.24)"
-                : "rgba(148, 163, 184, 0.28)",
-            border: cornerGripHovered
-              ? "1px solid rgba(251, 146, 60, 0.35)"
-              : "1px solid rgba(255, 255, 255, 0.18)",
-            boxShadow: cornerGripHovered
-              ? "0 0 12px rgba(251, 146, 60, 0.2)"
-              : "none",
-            transition:
-              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
-          }}
-        />
-      </div>
-      {mapResizePreview && (
-        <div
-          aria-live="polite"
-          style={{
-            position: "absolute",
-            top: Math.max(0, canvasH - MAP_RESIZE_GUTTER - 24),
-            left: Math.max(0, canvasW - 70 - MAP_RESIZE_BADGE_OFFSET),
-            minWidth: 70,
-            padding: "2px 6px",
-            borderRadius: 999,
-            background: "rgba(15, 23, 42, 0.88)",
-            color: "rgba(248, 250, 252, 0.95)",
-            border: "1px solid rgba(251, 146, 60, 0.35)",
-            fontSize: 11,
-            lineHeight: 1.4,
-            textAlign: "center",
-            pointerEvents: "none",
-          }}
-        >
-          {sizeLabel}
-        </div>
-      )}
+      <MapResizeControls
+        canvasW={canvasW}
+        canvasH={canvasH}
+        previewWidth={previewMapW}
+        previewHeight={previewMapH}
+        activeHandle={activeMapResizeHandle}
+        hoveredHandle={hoveredMapResizeHandle}
+        mapResizePreview={mapResizePreview}
+        isResizing={isResizing}
+        onHoverHandleChange={setHoveredMapResizeHandle}
+        onBeginMapResize={beginMapResize}
+      />
     </div>
   );
 });
diff --git a/src/components/editor/MapCanvas/use-map-resize.ts b/src/components/editor/MapCanvas/use-map-resize.ts
new file mode 100644
index 0000000..80690de
--- /dev/null
+++ b/src/components/editor/MapCanvas/use-map-resize.ts
@@ -0,0 +1,146 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { UseMapResizeParams, UseMapResizeReturn } from "@/types/map-canvas";
+
+function clampMapDimension(value: number, fallback: number): number {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.min(256, Math.max(1, Math.round(value)));
+}
+
+function getResizeDeltaInTiles(delta: number, scaledTile: number): number {
+  if (scaledTile <= 0) return 0;
+  if (delta >= 0) {
+    return Math.floor(delta / scaledTile);
+  }
+  return Math.ceil(delta / scaledTile);
+}
+
+export function useMapResize({
+  mapWidth,
+  mapHeight,
+  scaledTile,
+  onResizeMap,
+}: UseMapResizeParams): UseMapResizeReturn {
+  const mapResizeActionRef = useRef<UseMapResizeReturn["mapResizeActionRef"]["current"]>(null);
+  const [activeMapResizeHandle, setActiveMapResizeHandle] =
+    useState<UseMapResizeReturn["activeMapResizeHandle"]>(null);
+  const [hoveredMapResizeHandle, setHoveredMapResizeHandle] =
+    useState<UseMapResizeReturn["hoveredMapResizeHandle"]>(null);
+  const [mapResizePreview, setMapResizePreview] =
+    useState<UseMapResizeReturn["mapResizePreview"]>(null);
+
+  const endMapResize = useCallback(
+    (commit: boolean) => {
+      const action = mapResizeActionRef.current;
+      if (!action) return;
+
+      mapResizeActionRef.current = null;
+      setActiveMapResizeHandle(null);
+      setHoveredMapResizeHandle(null);
+      setMapResizePreview(null);
+
+      if (
+        commit &&
+        (action.nextWidth !== action.origWidth ||
+          action.nextHeight !== action.origHeight)
+      ) {
+        onResizeMap(action.nextWidth, action.nextHeight);
+      }
+    },
+    [onResizeMap],
+  );
+
+  const updateMapResizePreview = useCallback(
+    (clientX: number, clientY: number) => {
+      const action = mapResizeActionRef.current;
+      if (!action) return;
+
+      const deltaTilesX = getResizeDeltaInTiles(
+        clientX - action.startClientX,
+        scaledTile,
+      );
+      const deltaTilesY = getResizeDeltaInTiles(
+        clientY - action.startClientY,
+        scaledTile,
+      );
+      const nextWidth = clampMapDimension(
+        action.origWidth +
+          (action.handle === "e" || action.handle === "se" ? deltaTilesX : 0),
+        action.origWidth,
+      );
+      const nextHeight = clampMapDimension(
+        action.origHeight +
+          (action.handle === "s" || action.handle === "se" ? deltaTilesY : 0),
+        action.origHeight,
+      );
+
+      action.nextWidth = nextWidth;
+      action.nextHeight = nextHeight;
+      setMapResizePreview({ width: nextWidth, height: nextHeight });
+    },
+    [scaledTile],
+  );
+
+  const beginMapResize = useCallback(
+    (
+      handle: UseMapResizeReturn["activeMapResizeHandle"],
+      event: Parameters<UseMapResizeReturn["beginMapResize"]>[1],
+    ) => {
+      if (!handle || event.button !== 0) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      mapResizeActionRef.current = {
+        handle,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+        origWidth: mapWidth,
+        origHeight: mapHeight,
+        nextWidth: mapWidth,
+        nextHeight: mapHeight,
+      };
+      setActiveMapResizeHandle(handle);
+      setHoveredMapResizeHandle(handle);
+      setMapResizePreview({ width: mapWidth, height: mapHeight });
+    },
+    [mapHeight, mapWidth],
+  );
+
+  useEffect(() => {
+    if (!activeMapResizeHandle) return;
+
+    function handleWindowPointerMove(event: PointerEvent) {
+      event.preventDefault();
+      updateMapResizePreview(event.clientX, event.clientY);
+    }
+
+    function handleWindowPointerUp(event: PointerEvent) {
+      if (event.button !== 0) return;
+      endMapResize(true);
+    }
+
+    function handleWindowPointerCancel() {
+      endMapResize(false);
+    }
+
+    window.addEventListener("pointermove", handleWindowPointerMove);
+    window.addEventListener("pointerup", handleWindowPointerUp);
+    window.addEventListener("pointercancel", handleWindowPointerCancel);
+    return () => {
+      window.removeEventListener("pointermove", handleWindowPointerMove);
+      window.removeEventListener("pointerup", handleWindowPointerUp);
+      window.removeEventListener("pointercancel", handleWindowPointerCancel);
+    };
+  }, [activeMapResizeHandle, endMapResize, updateMapResizePreview]);
+
+  return {
+    activeMapResizeHandle,
+    hoveredMapResizeHandle,
+    mapResizeActionRef,
+    mapResizePreview,
+    previewWidth: mapResizePreview?.width ?? mapWidth,
+    previewHeight: mapResizePreview?.height ?? mapHeight,
+    beginMapResize,
+    isResizing: activeMapResizeHandle !== null,
+    setHoveredMapResizeHandle,
+  };
+}
\ No newline at end of file
diff --git a/src/types/map-canvas.ts b/src/types/map-canvas.ts
index 3ad50a4..4cdd74e 100644
--- a/src/types/map-canvas.ts
+++ b/src/types/map-canvas.ts
@@ -1,4 +1,10 @@
-import type { RefObject } from "react";
+import type {
+  Dispatch,
+  MutableRefObject,
+  PointerEvent as ReactPointerEvent,
+  RefObject,
+  SetStateAction,
+} from "react";
 import type {
   EditorState,
   ImageLayer,
@@ -40,6 +46,41 @@ export interface MapResizeAction {
   nextHeight: number;
 }
 
+export interface UseMapResizeParams {
+  mapWidth: number;
+  mapHeight: number;
+  scaledTile: number;
+  onResizeMap: (width: number, height: number) => void;
+}
+
+export interface UseMapResizeReturn {
+  activeMapResizeHandle: MapResizeHandle | null;
+  hoveredMapResizeHandle: MapResizeHandle | null;
+  mapResizeActionRef: MutableRefObject<MapResizeAction | null>;
+  mapResizePreview: MapResizePreview | null;
+  previewWidth: number;
+  previewHeight: number;
+  beginMapResize: (
+    handle: MapResizeHandle,
+    event: ReactPointerEvent<HTMLDivElement>,
+  ) => void;
+  isResizing: boolean;
+  setHoveredMapResizeHandle: Dispatch<SetStateAction<MapResizeHandle | null>>;
+}
+
+export interface MapResizeControlsProps {
+  canvasW: number;
+  canvasH: number;
+  previewWidth: number;
+  previewHeight: number;
+  activeHandle: MapResizeHandle | null;
+  hoveredHandle: MapResizeHandle | null;
+  mapResizePreview: MapResizePreview | null;
+  isResizing: boolean;
+  onHoverHandleChange: (handle: MapResizeHandle | null) => void;
+  onBeginMapResize: UseMapResizeReturn["beginMapResize"];
+}
+
 export interface MapCanvasProps {
   map: TileMapData;
   layers: TileLayer[];

From 8be6d0666edba66fc8bc065eab8eb33f45e86659 Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Sun, 19 Apr 2026 23:41:16 +0200
Subject: [PATCH 02/12] fix: add missing newlines at the end of
 MapResizeControls and use-map-resize files

---
 src/components/editor/MapCanvas/MapResizeControls.tsx |  2 +-
 src/components/editor/MapCanvas/use-map-resize.ts     | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/MapCanvas/MapResizeControls.tsx b/src/components/editor/MapCanvas/MapResizeControls.tsx
index c6e598a..623c2e2 100644
--- a/src/components/editor/MapCanvas/MapResizeControls.tsx
+++ b/src/components/editor/MapCanvas/MapResizeControls.tsx
@@ -180,4 +180,4 @@ export function MapResizeControls({
       )}
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapCanvas/use-map-resize.ts b/src/components/editor/MapCanvas/use-map-resize.ts
index 80690de..5a278e9 100644
--- a/src/components/editor/MapCanvas/use-map-resize.ts
+++ b/src/components/editor/MapCanvas/use-map-resize.ts
@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { UseMapResizeParams, UseMapResizeReturn } from "@/types/map-canvas";
+import type {
+  UseMapResizeParams,
+  UseMapResizeReturn,
+} from "@/types/map-canvas";
 
 function clampMapDimension(value: number, fallback: number): number {
   if (!Number.isFinite(value)) return fallback;
@@ -20,7 +23,8 @@ export function useMapResize({
   scaledTile,
   onResizeMap,
 }: UseMapResizeParams): UseMapResizeReturn {
-  const mapResizeActionRef = useRef<UseMapResizeReturn["mapResizeActionRef"]["current"]>(null);
+  const mapResizeActionRef =
+    useRef<UseMapResizeReturn["mapResizeActionRef"]["current"]>(null);
   const [activeMapResizeHandle, setActiveMapResizeHandle] =
     useState<UseMapResizeReturn["activeMapResizeHandle"]>(null);
   const [hoveredMapResizeHandle, setHoveredMapResizeHandle] =
@@ -143,4 +147,4 @@ export function useMapResize({
     isResizing: activeMapResizeHandle !== null,
     setHoveredMapResizeHandle,
   };
-}
\ No newline at end of file
+}

From 7fb53b69a6f497fcf0538f7cd876c5b2d7fc3c6e Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 13:03:13 +0200
Subject: [PATCH 03/12] feat: add image editor shape tools and shared utilities

- Implemented line, rectangle, and contour drawing tools in `image-editor-shape-tools.ts`.
- Added Bresenham's line algorithm and pixel manipulation functions in `image-editor-tools-shared.ts`.
- Created utility functions for property cloning and remapping layer IDs in `project-import.ts`.
- Defined application shell props and image editor hook internals types.
- Introduced crop state and rectangle types for image editing.
- Developed layers panel types for managing layer interactions and state.
- Expanded map panel types for enhanced map editing capabilities, including clipboard actions and history controls.

Co-authored-by: Copilot <copilot@github.com>
---
 TODO.txt                                      |    2 +-
 build_output.txt                              |  219 ++
 src/App.tsx                                   |  721 +----
 src/components/app/AppShell.tsx               |  651 +++++
 .../editor/LayersPanel/DeleteLayerDialog.tsx  |   41 +
 .../editor/LayersPanel/LayersTree.tsx         |  101 +
 src/components/editor/LayersPanel/index.tsx   |  196 +-
 .../MapCanvas/scene-interaction-handlers.ts   |  731 +++++
 .../editor/MapCanvas/use-scene-interaction.ts |  994 +------
 src/components/editor/MapPanel.tsx            | 2575 +++--------------
 .../editor/MapPanel/MapPanelDialogs.tsx       |  119 +
 .../editor/MapPanel/MapPanelTabs.tsx          |  180 ++
 .../editor/MapPanel/MapPanelToolbar.tsx       |  342 +++
 .../editor/MapPanel/MapPanelWorkspace.tsx     |  155 +
 .../MapPanel/use-map-panel-canvas-actions.ts  |  531 ++++
 .../use-map-panel-clipboard-actions.ts        |  931 ++++++
 .../tools/ImageEditor/ImageCanvas.tsx         |  185 +-
 .../ImageEditor/ImageCanvasResizeControls.tsx |  184 ++
 src/hooks/use-image-editor-frame-actions.ts   |  370 +++
 src/hooks/use-image-editor-layer-actions.ts   |  563 ++++
 src/hooks/use-image-editor-palette-actions.ts |  337 +++
 src/hooks/use-image-editor.ts                 | 1669 +----------
 src/lib/image-editor-crop-tools.ts            |  251 ++
 src/lib/image-editor-document.ts              |  447 +++
 src/lib/image-editor-selection-tools.ts       |  537 ++++
 src/lib/image-editor-shape-tools.ts           |  284 ++
 src/lib/image-editor-tools-shared.ts          |  220 ++
 src/lib/image-editor-tools.ts                 | 1709 ++---------
 src/lib/project-import.ts                     |   55 +
 src/types/app.ts                              |   18 +
 src/types/image-editor-hook-internals.ts      |   28 +
 src/types/image-editor-tools.ts               |   19 +
 src/types/image-editor-ui.ts                  |   16 +
 src/types/index.ts                            |    1 +
 src/types/layers-panel.ts                     |   54 +
 src/types/map-canvas.ts                       |  135 +-
 src/types/map-panel.ts                        |  238 ++
 37 files changed, 8613 insertions(+), 7196 deletions(-)
 create mode 100644 build_output.txt
 create mode 100644 src/components/app/AppShell.tsx
 create mode 100644 src/components/editor/LayersPanel/DeleteLayerDialog.tsx
 create mode 100644 src/components/editor/LayersPanel/LayersTree.tsx
 create mode 100644 src/components/editor/MapCanvas/scene-interaction-handlers.ts
 create mode 100644 src/components/editor/MapPanel/MapPanelDialogs.tsx
 create mode 100644 src/components/editor/MapPanel/MapPanelTabs.tsx
 create mode 100644 src/components/editor/MapPanel/MapPanelToolbar.tsx
 create mode 100644 src/components/editor/MapPanel/MapPanelWorkspace.tsx
 create mode 100644 src/components/editor/MapPanel/use-map-panel-canvas-actions.ts
 create mode 100644 src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts
 create mode 100644 src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx
 create mode 100644 src/hooks/use-image-editor-frame-actions.ts
 create mode 100644 src/hooks/use-image-editor-layer-actions.ts
 create mode 100644 src/hooks/use-image-editor-palette-actions.ts
 create mode 100644 src/lib/image-editor-crop-tools.ts
 create mode 100644 src/lib/image-editor-document.ts
 create mode 100644 src/lib/image-editor-selection-tools.ts
 create mode 100644 src/lib/image-editor-shape-tools.ts
 create mode 100644 src/lib/image-editor-tools-shared.ts
 create mode 100644 src/lib/project-import.ts
 create mode 100644 src/types/app.ts
 create mode 100644 src/types/image-editor-hook-internals.ts
 create mode 100644 src/types/image-editor-tools.ts
 create mode 100644 src/types/layers-panel.ts
 create mode 100644 src/types/map-panel.ts

diff --git a/TODO.txt b/TODO.txt
index 346549c..5837322 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,5 +1,5 @@
 Refactor files longer than 1000 lines of code
-
+Enabled drag and drop from desktop to tile layer
 Add Isometric map type
 
 Import Options
diff --git a/build_output.txt b/build_output.txt
new file mode 100644
index 0000000..d03107f
--- /dev/null
+++ b/build_output.txt
@@ -0,0 +1,219 @@
+$ tsc -b && vite build
+src/components/app/AppShell.tsx(454,41): error TS18047: 'state.project' is possibly 'null'.
+src/components/app/AppShell.tsx(457,24): error TS18047: 'state.project' is possibly 'null'.
+src/lib/image-editor-tools.ts(8,15): error TS2300: Duplicate identifier 'Color'.
+src/lib/image-editor-tools.ts(8,22): error TS2300: Duplicate identifier 'ImageEditorTool'.
+src/lib/image-editor-tools.ts(9,15): error TS2300: Duplicate identifier 'StrokeState'.
+src/lib/image-editor-tools.ts(9,28): error TS2300: Duplicate identifier 'ToolContext'.
+src/lib/image-editor-tools.ts(11,3): error TS2440: Import declaration conflicts with local declaration of 'bresenhamLine'.
+src/lib/image-editor-tools.ts(12,3): error TS2440: Import declaration conflicts with local declaration of 'drawBrush'.
+src/lib/image-editor-tools.ts(13,3): error TS2440: Import declaration conflicts with local declaration of 'getPixel'.
+src/lib/image-editor-tools.ts(14,3): error TS2440: Import declaration conflicts with local declaration of 'setPixel'.
+src/lib/image-editor-tools.ts(17,3): error TS2440: Import declaration conflicts with local declaration of 'commitFloatingSelection'.
+src/lib/image-editor-tools.ts(18,3): error TS2440: Import declaration conflicts with local declaration of 'copySelectionPixels'.
+src/lib/image-editor-tools.ts(19,3): error TS2440: Import declaration conflicts with local declaration of 'drawFloatingOnOverlay'.
+src/lib/image-editor-tools.ts(20,3): error TS2440: Import declaration conflicts with local declaration of 'getResizeHandleCursor'.
+src/lib/image-editor-tools.ts(21,3): error TS2440: Import declaration conflicts with local declaration of 'getSelectionState'.
+src/lib/image-editor-tools.ts(22,3): error TS2440: Import declaration conflicts with local declaration of 'hitTestResizeHandle'.
+src/lib/image-editor-tools.ts(23,3): error TS2440: Import declaration conflicts with local declaration of 'pasteSelectionPixels'.
+src/lib/image-editor-tools.ts(24,3): error TS2440: Import declaration conflicts with local declaration of 'resetSelectionState'.
+src/lib/image-editor-tools.ts(25,3): error TS2440: Import declaration conflicts with local declaration of 'selectionDown'.
+src/lib/image-editor-tools.ts(26,3): error TS2440: Import declaration conflicts with local declaration of 'selectionMove'.
+src/lib/image-editor-tools.ts(27,3): error TS2440: Import declaration conflicts with local declaration of 'selectionUp'.
+src/lib/image-editor-tools.ts(30,3): error TS2440: Import declaration conflicts with local declaration of 'cropDown'.
+src/lib/image-editor-tools.ts(31,3): error TS2440: Import declaration conflicts with local declaration of 'cropMove'.
+src/lib/image-editor-tools.ts(32,3): error TS2440: Import declaration conflicts with local declaration of 'cropUp'.
+src/lib/image-editor-tools.ts(33,3): error TS2440: Import declaration conflicts with local declaration of 'getCropState'.
+src/lib/image-editor-tools.ts(34,3): error TS2440: Import declaration conflicts with local declaration of 'hitTestCropHandle'.
+src/lib/image-editor-tools.ts(35,3): error TS2440: Import declaration conflicts with local declaration of 'resetCropState'.
+src/lib/image-editor-tools.ts(38,3): error TS2440: Import declaration conflicts with local declaration of 'contourDown'.
+src/lib/image-editor-tools.ts(39,3): error TS2440: Import declaration conflicts with local declaration of 'contourMove'.
+src/lib/image-editor-tools.ts(40,3): error TS2440: Import declaration conflicts with local declaration of 'contourUp'.
+src/lib/image-editor-tools.ts(41,3): error TS2440: Import declaration conflicts with local declaration of 'lineDown'.
+src/lib/image-editor-tools.ts(42,3): error TS2440: Import declaration conflicts with local declaration of 'lineMove'.
+src/lib/image-editor-tools.ts(43,3): error TS2440: Import declaration conflicts with local declaration of 'lineUp'.
+src/lib/image-editor-tools.ts(44,3): error TS2440: Import declaration conflicts with local declaration of 'rectangleDown'.
+src/lib/image-editor-tools.ts(45,3): error TS2440: Import declaration conflicts with local declaration of 'rectangleMove'.
+src/lib/image-editor-tools.ts(46,3): error TS2440: Import declaration conflicts with local declaration of 'rectangleUp'.
+src/lib/image-editor-tools.ts(50,3): error TS2323: Cannot redeclare exported variable 'bresenhamLine'.
+src/lib/image-editor-tools.ts(50,3): error TS2484: Export declaration conflicts with exported declaration of 'bresenhamLine'.
+src/lib/image-editor-tools.ts(51,3): error TS2323: Cannot redeclare exported variable 'constrainAngle'.
+src/lib/image-editor-tools.ts(51,3): error TS2484: Export declaration conflicts with exported declaration of 'constrainAngle'.
+src/lib/image-editor-tools.ts(52,3): error TS2323: Cannot redeclare exported variable 'constrainSquare'.
+src/lib/image-editor-tools.ts(52,3): error TS2484: Export declaration conflicts with exported declaration of 'constrainSquare'.
+src/lib/image-editor-tools.ts(53,3): error TS2323: Cannot redeclare exported variable 'createStrokeState'.
+src/lib/image-editor-tools.ts(53,3): error TS2484: Export declaration conflicts with exported declaration of 'createStrokeState'.
+src/lib/image-editor-tools.ts(54,3): error TS2323: Cannot redeclare exported variable 'drawBrush'.
+src/lib/image-editor-tools.ts(54,3): error TS2484: Export declaration conflicts with exported declaration of 'drawBrush'.
+src/lib/image-editor-tools.ts(55,3): error TS2323: Cannot redeclare exported variable 'drawSquareBrush'.
+src/lib/image-editor-tools.ts(55,3): error TS2484: Export declaration conflicts with exported declaration of 'drawSquareBrush'.
+src/lib/image-editor-tools.ts(56,3): error TS2323: Cannot redeclare exported variable 'getPixel'.
+src/lib/image-editor-tools.ts(56,3): error TS2484: Export declaration conflicts with exported declaration of 'getPixel'.
+src/lib/image-editor-tools.ts(57,3): error TS2323: Cannot redeclare exported variable 'setPixel'.
+src/lib/image-editor-tools.ts(57,3): error TS2484: Export declaration conflicts with exported declaration of 'setPixel'.
+src/lib/image-editor-tools.ts(60,3): error TS2323: Cannot redeclare exported variable 'commitFloatingSelection'.
+src/lib/image-editor-tools.ts(60,3): error TS2484: Export declaration conflicts with exported declaration of 'commitFloatingSelection'.
+src/lib/image-editor-tools.ts(61,3): error TS2323: Cannot redeclare exported variable 'copySelectionPixels'.
+src/lib/image-editor-tools.ts(61,3): error TS2484: Export declaration conflicts with exported declaration of 'copySelectionPixels'.
+src/lib/image-editor-tools.ts(62,3): error TS2323: Cannot redeclare exported variable 'drawFloatingOnOverlay'.
+src/lib/image-editor-tools.ts(62,3): error TS2484: Export declaration conflicts with exported declaration of 'drawFloatingOnOverlay'.
+src/lib/image-editor-tools.ts(63,3): error TS2323: Cannot redeclare exported variable 'getResizeHandleCursor'.
+src/lib/image-editor-tools.ts(63,3): error TS2484: Export declaration conflicts with exported declaration of 'getResizeHandleCursor'.
+src/lib/image-editor-tools.ts(64,3): error TS2323: Cannot redeclare exported variable 'getSelectionState'.
+src/lib/image-editor-tools.ts(64,3): error TS2484: Export declaration conflicts with exported declaration of 'getSelectionState'.
+src/lib/image-editor-tools.ts(65,3): error TS2323: Cannot redeclare exported variable 'hitTestResizeHandle'.
+src/lib/image-editor-tools.ts(65,3): error TS2484: Export declaration conflicts with exported declaration of 'hitTestResizeHandle'.
+src/lib/image-editor-tools.ts(66,3): error TS2323: Cannot redeclare exported variable 'pasteSelectionPixels'.
+src/lib/image-editor-tools.ts(66,3): error TS2484: Export declaration conflicts with exported declaration of 'pasteSelectionPixels'.
+src/lib/image-editor-tools.ts(67,3): error TS2323: Cannot redeclare exported variable 'resetSelectionState'.
+src/lib/image-editor-tools.ts(67,3): error TS2484: Export declaration conflicts with exported declaration of 'resetSelectionState'.
+src/lib/image-editor-tools.ts(68,3): error TS2323: Cannot redeclare exported variable 'selectionDown'.
+src/lib/image-editor-tools.ts(68,3): error TS2484: Export declaration conflicts with exported declaration of 'selectionDown'.
+src/lib/image-editor-tools.ts(69,3): error TS2323: Cannot redeclare exported variable 'selectionMove'.
+src/lib/image-editor-tools.ts(69,3): error TS2484: Export declaration conflicts with exported declaration of 'selectionMove'.
+src/lib/image-editor-tools.ts(70,3): error TS2323: Cannot redeclare exported variable 'selectionUp'.
+src/lib/image-editor-tools.ts(70,3): error TS2484: Export declaration conflicts with exported declaration of 'selectionUp'.
+src/lib/image-editor-tools.ts(73,3): error TS2323: Cannot redeclare exported variable 'cropDown'.
+src/lib/image-editor-tools.ts(73,3): error TS2484: Export declaration conflicts with exported declaration of 'cropDown'.
+src/lib/image-editor-tools.ts(74,3): error TS2323: Cannot redeclare exported variable 'cropMove'.
+src/lib/image-editor-tools.ts(74,3): error TS2484: Export declaration conflicts with exported declaration of 'cropMove'.
+src/lib/image-editor-tools.ts(75,3): error TS2323: Cannot redeclare exported variable 'cropUp'.
+src/lib/image-editor-tools.ts(75,3): error TS2484: Export declaration conflicts with exported declaration of 'cropUp'.
+src/lib/image-editor-tools.ts(76,3): error TS2323: Cannot redeclare exported variable 'getCropState'.
+src/lib/image-editor-tools.ts(76,3): error TS2484: Export declaration conflicts with exported declaration of 'getCropState'.
+src/lib/image-editor-tools.ts(77,3): error TS2323: Cannot redeclare exported variable 'hitTestCropHandle'.
+src/lib/image-editor-tools.ts(77,3): error TS2484: Export declaration conflicts with exported declaration of 'hitTestCropHandle'.
+src/lib/image-editor-tools.ts(78,3): error TS2323: Cannot redeclare exported variable 'resetCropState'.
+src/lib/image-editor-tools.ts(78,3): error TS2484: Export declaration conflicts with exported declaration of 'resetCropState'.
+src/lib/image-editor-tools.ts(81,3): error TS2323: Cannot redeclare exported variable 'contourDown'.
+src/lib/image-editor-tools.ts(81,3): error TS2484: Export declaration conflicts with exported declaration of 'contourDown'.
+src/lib/image-editor-tools.ts(82,3): error TS2323: Cannot redeclare exported variable 'contourMove'.
+src/lib/image-editor-tools.ts(82,3): error TS2484: Export declaration conflicts with exported declaration of 'contourMove'.
+src/lib/image-editor-tools.ts(83,3): error TS2323: Cannot redeclare exported variable 'contourUp'.
+src/lib/image-editor-tools.ts(83,3): error TS2484: Export declaration conflicts with exported declaration of 'contourUp'.
+src/lib/image-editor-tools.ts(84,3): error TS2323: Cannot redeclare exported variable 'lineDown'.
+src/lib/image-editor-tools.ts(84,3): error TS2484: Export declaration conflicts with exported declaration of 'lineDown'.
+src/lib/image-editor-tools.ts(85,3): error TS2323: Cannot redeclare exported variable 'lineMove'.
+src/lib/image-editor-tools.ts(85,3): error TS2484: Export declaration conflicts with exported declaration of 'lineMove'.
+src/lib/image-editor-tools.ts(86,3): error TS2323: Cannot redeclare exported variable 'lineUp'.
+src/lib/image-editor-tools.ts(86,3): error TS2484: Export declaration conflicts with exported declaration of 'lineUp'.
+src/lib/image-editor-tools.ts(87,3): error TS2323: Cannot redeclare exported variable 'rectangleDown'.
+src/lib/image-editor-tools.ts(87,3): error TS2484: Export declaration conflicts with exported declaration of 'rectangleDown'.
+src/lib/image-editor-tools.ts(88,3): error TS2323: Cannot redeclare exported variable 'rectangleMove'.
+src/lib/image-editor-tools.ts(88,3): error TS2484: Export declaration conflicts with exported declaration of 'rectangleMove'.
+src/lib/image-editor-tools.ts(89,3): error TS2323: Cannot redeclare exported variable 'rectangleUp'.
+src/lib/image-editor-tools.ts(89,3): error TS2484: Export declaration conflicts with exported declaration of 'rectangleUp'.
+src/lib/image-editor-tools.ts(92,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(108,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(129,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(133,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(166,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(197,17): error TS2323: Cannot redeclare exported variable 'pencilDown'.
+src/lib/image-editor-tools.ts(197,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(213,17): error TS2323: Cannot redeclare exported variable 'pencilMove'.
+src/lib/image-editor-tools.ts(213,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(229,17): error TS2323: Cannot redeclare exported variable 'pencilUp'.
+src/lib/image-editor-tools.ts(229,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(249,17): error TS2323: Cannot redeclare exported variable 'eraserDown'.
+src/lib/image-editor-tools.ts(249,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(264,17): error TS2323: Cannot redeclare exported variable 'eraserMove'.
+src/lib/image-editor-tools.ts(264,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(283,17): error TS2323: Cannot redeclare exported variable 'eraserUp'.
+src/lib/image-editor-tools.ts(283,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(292,17): error TS2323: Cannot redeclare exported variable 'moveDown'.
+src/lib/image-editor-tools.ts(292,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(306,17): error TS2323: Cannot redeclare exported variable 'moveMove'.
+src/lib/image-editor-tools.ts(306,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(323,17): error TS2323: Cannot redeclare exported variable 'moveUp'.
+src/lib/image-editor-tools.ts(323,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(333,17): error TS2323: Cannot redeclare exported variable 'paintBucketDown'.
+src/lib/image-editor-tools.ts(333,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(368,17): error TS2323: Cannot redeclare exported variable 'blurDown'.
+src/lib/image-editor-tools.ts(368,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(380,17): error TS2323: Cannot redeclare exported variable 'blurMove'.
+src/lib/image-editor-tools.ts(380,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(397,17): error TS2323: Cannot redeclare exported variable 'blurUp'.
+src/lib/image-editor-tools.ts(397,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(406,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(458,17): error TS2323: Cannot redeclare exported variable 'dispatchDown'.
+src/lib/image-editor-tools.ts(458,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(499,17): error TS2323: Cannot redeclare exported variable 'dispatchMove'.
+src/lib/image-editor-tools.ts(499,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(537,17): error TS2323: Cannot redeclare exported variable 'dispatchUp'.
+src/lib/image-editor-tools.ts(537,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(584,15): error TS2300: Duplicate identifier 'Color'.
+src/lib/image-editor-tools.ts(584,22): error TS2300: Duplicate identifier 'ImageEditorTool'.
+src/lib/image-editor-tools.ts(588,3): error TS2300: Duplicate identifier 'StrokeState'.
+src/lib/image-editor-tools.ts(589,3): error TS2300: Duplicate identifier 'ToolContext'.
+src/lib/image-editor-tools.ts(597,17): error TS2323: Cannot redeclare exported variable 'bresenhamLine'.
+src/lib/image-editor-tools.ts(630,17): error TS2323: Cannot redeclare exported variable 'setPixel'.
+src/lib/image-editor-tools.ts(682,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(698,17): error TS2323: Cannot redeclare exported variable 'getPixel'.
+src/lib/image-editor-tools.ts(713,17): error TS2323: Cannot redeclare exported variable 'drawBrush'.
+src/lib/image-editor-tools.ts(743,17): error TS2323: Cannot redeclare exported variable 'drawSquareBrush'.
+src/lib/image-editor-tools.ts(765,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(787,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(795,17): error TS2323: Cannot redeclare exported variable 'createStrokeState'.
+src/lib/image-editor-tools.ts(817,17): error TS2323: Cannot redeclare exported variable 'constrainAngle'.
+src/lib/image-editor-tools.ts(842,17): error TS2323: Cannot redeclare exported variable 'constrainSquare'.
+src/lib/image-editor-tools.ts(858,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(889,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(919,17): error TS2323: Cannot redeclare exported variable 'pencilDown'.
+src/lib/image-editor-tools.ts(919,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(935,17): error TS2323: Cannot redeclare exported variable 'pencilMove'.
+src/lib/image-editor-tools.ts(935,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(950,17): error TS2323: Cannot redeclare exported variable 'pencilUp'.
+src/lib/image-editor-tools.ts(950,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(974,17): error TS2323: Cannot redeclare exported variable 'eraserDown'.
+src/lib/image-editor-tools.ts(974,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(988,17): error TS2323: Cannot redeclare exported variable 'eraserMove'.
+src/lib/image-editor-tools.ts(988,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(1005,17): error TS2323: Cannot redeclare exported variable 'eraserUp'.
+src/lib/image-editor-tools.ts(1005,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(1040,17): error TS2323: Cannot redeclare exported variable 'getSelectionState'.
+src/lib/image-editor-tools.ts(1044,17): error TS2323: Cannot redeclare exported variable 'resetSelectionState'.
+src/lib/image-editor-tools.ts(1095,17): error TS2323: Cannot redeclare exported variable 'commitFloatingSelection'.
+src/lib/image-editor-tools.ts(1143,17): error TS2323: Cannot redeclare exported variable 'hitTestResizeHandle'.
+src/lib/image-editor-tools.ts(1172,17): error TS2323: Cannot redeclare exported variable 'getResizeHandleCursor'.
+src/lib/image-editor-tools.ts(1192,17): error TS2323: Cannot redeclare exported variable 'drawFloatingOnOverlay'.
+src/lib/image-editor-tools.ts(1217,17): error TS2323: Cannot redeclare exported variable 'selectionDown'.
+src/lib/image-editor-tools.ts(1273,17): error TS2323: Cannot redeclare exported variable 'selectionMove'.
+src/lib/image-editor-tools.ts(1387,17): error TS2323: Cannot redeclare exported variable 'selectionUp'.
+src/lib/image-editor-tools.ts(1479,17): error TS2323: Cannot redeclare exported variable 'copySelectionPixels'.
+src/lib/image-editor-tools.ts(1493,17): error TS2323: Cannot redeclare exported variable 'pasteSelectionPixels'.
+src/lib/image-editor-tools.ts(1564,17): error TS2323: Cannot redeclare exported variable 'getCropState'.
+src/lib/image-editor-tools.ts(1568,17): error TS2323: Cannot redeclare exported variable 'resetCropState'.
+src/lib/image-editor-tools.ts(1598,17): error TS2323: Cannot redeclare exported variable 'hitTestCropHandle'.
+src/lib/image-editor-tools.ts(1625,17): error TS2323: Cannot redeclare exported variable 'cropDown'.
+src/lib/image-editor-tools.ts(1658,17): error TS2323: Cannot redeclare exported variable 'cropMove'.
+src/lib/image-editor-tools.ts(1735,17): error TS2323: Cannot redeclare exported variable 'cropUp'.
+src/lib/image-editor-tools.ts(1765,17): error TS2323: Cannot redeclare exported variable 'moveDown'.
+src/lib/image-editor-tools.ts(1765,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(1779,17): error TS2323: Cannot redeclare exported variable 'moveMove'.
+src/lib/image-editor-tools.ts(1779,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(1796,17): error TS2323: Cannot redeclare exported variable 'moveUp'.
+src/lib/image-editor-tools.ts(1796,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(1810,17): error TS2323: Cannot redeclare exported variable 'paintBucketDown'.
+src/lib/image-editor-tools.ts(1810,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(1853,17): error TS2323: Cannot redeclare exported variable 'lineDown'.
+src/lib/image-editor-tools.ts(1865,17): error TS2323: Cannot redeclare exported variable 'lineMove'.
+src/lib/image-editor-tools.ts(1898,17): error TS2323: Cannot redeclare exported variable 'lineUp'.
+src/lib/image-editor-tools.ts(1959,17): error TS2323: Cannot redeclare exported variable 'rectangleDown'.
+src/lib/image-editor-tools.ts(1971,17): error TS2323: Cannot redeclare exported variable 'rectangleMove'.
+src/lib/image-editor-tools.ts(2000,17): error TS2323: Cannot redeclare exported variable 'rectangleUp'.
+src/lib/image-editor-tools.ts(2064,17): error TS2323: Cannot redeclare exported variable 'contourDown'.
+src/lib/image-editor-tools.ts(2076,17): error TS2323: Cannot redeclare exported variable 'contourMove'.
+src/lib/image-editor-tools.ts(2105,17): error TS2323: Cannot redeclare exported variable 'contourUp'.
+src/lib/image-editor-tools.ts(2142,17): error TS2323: Cannot redeclare exported variable 'blurDown'.
+src/lib/image-editor-tools.ts(2142,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(2154,17): error TS2323: Cannot redeclare exported variable 'blurMove'.
+src/lib/image-editor-tools.ts(2154,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(2169,17): error TS2323: Cannot redeclare exported variable 'blurUp'.
+src/lib/image-editor-tools.ts(2169,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(2178,10): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(2239,17): error TS2323: Cannot redeclare exported variable 'dispatchDown'.
+src/lib/image-editor-tools.ts(2239,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(2280,17): error TS2323: Cannot redeclare exported variable 'dispatchMove'.
+src/lib/image-editor-tools.ts(2280,17): error TS2393: Duplicate function implementation.
+src/lib/image-editor-tools.ts(2318,17): error TS2323: Cannot redeclare exported variable 'dispatchUp'.
+src/lib/image-editor-tools.ts(2318,17): error TS2393: Duplicate function implementation.
diff --git a/src/App.tsx b/src/App.tsx
index a9fa2b1..5c4eda7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,6 @@
 import {
   useEffect,
   useState,
-  useCallback,
-  lazy,
-  Suspense,
-  useRef,
 } from "react";
 import { TooltipProvider } from "@/components/ui/Tooltip";
 import {
@@ -14,106 +10,25 @@ import {
   hasUnsavedChanges,
 } from "@/lib/store";
 import { useAutoSave } from "@/hooks/use-auto-save";
-import { useEditorStore } from "@/hooks/use-editor-store";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import {
-  saveProject,
   listProjects,
   getProject,
   loadProjectPrefs,
   loadLastProjectId,
 } from "@/lib/db";
 import {
-  exportProject,
-  exportMap,
-  importMap,
-  exportTileset,
-  importTileset,
-  downloadFile,
-  readFileAsUint8Array,
-} from "@/lib/format";
-import {
-  generateMapId,
-  generateLayerId,
-  generateLayerGroupId,
-  generateObjectId,
-  generateTilesetId,
-} from "@/lib/ids";
-import { findLastLayerId, getAllGroupIds, getAllLayerIds } from "@/lib/layers";
-import { clearTileEditorContext } from "@/lib/tile-editor-context";
+} from "@/lib/db";
 import {
   hydrateZoomStoreForProject,
   saveCurrentProjectPrefs,
 } from "@/lib/project-prefs";
 import { getActiveTilesetTileSize } from "@/lib/project";
 import { zoomStore } from "@/lib/zoom-store";
-import type {
-  ImageLayer,
-  LayerGroup,
-  TilesetGroupId,
-  MapGroupId,
-  MapObject,
-  ObjectLayer,
-  PropertyValue,
-  TileLayer,
-  TileRef,
-  Tileset,
-  TilesetId,
-  LayerId,
-  LayerGroupId,
-  ObjectId,
-  ToolName,
-} from "@/types";
-import type { EditorWorkspaceTab } from "@/types/editor-layout";
-
-import { toast } from "sonner";
+import type { ToolName } from "@/types";
 import { Toaster } from "@/components/ui/Sonner";
-import { Toolbar } from "@/components/layout/Toolbar";
-const SettingsDialog = lazy(() =>
-  import("@/components/dialogs/SettingsDialog").then((m) => ({
-    default: m.SettingsDialog,
-  })),
-);
-const ProjectDialog = lazy(() =>
-  import("@/components/dialogs/ProjectDialog").then((m) => ({
-    default: m.ProjectDialog,
-  })),
-);
-const AboutDialog = lazy(() =>
-  import("@/components/dialogs/AboutDialog").then((m) => ({
-    default: m.AboutDialog,
-  })),
-);
-const KeyboardShortcutsDialog = lazy(() =>
-  import("@/components/dialogs/KeyboardShortcutsDialog").then((m) => ({
-    default: m.KeyboardShortcutsDialog,
-  })),
-);
-const FindReplaceDialog = lazy(() =>
-  import("@/components/dialogs/FindReplaceDialog").then((m) => ({
-    default: m.FindReplaceDialog,
-  })),
-);
-const BugReportDialog = lazy(() =>
-  import("@/components/dialogs/BugReportDialog").then((m) => ({
-    default: m.BugReportDialog,
-  })),
-);
-const ToolDrawer = lazy(() =>
-  import("@/components/tools/ToolDrawer").then((m) => ({
-    default: m.ToolDrawer,
-  })),
-);
-import { TilesetPanel } from "@/components/editor/TilesetPanel";
-import { MapPanel } from "@/components/editor/MapPanel";
-import { LayersPanel } from "@/components/editor/LayersPanel";
-import { ObjectsPanel } from "@/components/editor/ObjectsPanel";
-import { ImageLayerPropertiesPanel } from "./components/editor/ImageLayerPropertiesPanel";
-import {
-  CompactEditorShell,
-  DesktopEditorLayout,
-  EditorWorkspaceDrawer,
-} from "@/components/editor/Layout/EditorLayouts";
+import { AppShell } from "@/components/app/AppShell";
+
 
 // Hoisted static JSX: avoids re-creation on every render (rendering-hoist-jsx)
 const loadingScreen = (
@@ -124,62 +39,9 @@ const loadingScreen = (
   </div>
 );
 
-const emptyProjectMessage = (
-  <main className="flex flex-1 min-h-0 items-center justify-center text-muted-foreground text-sm">
-    Open or create a project to get started
-  </main>
-);
-
-const NARROW_LAYOUT_BREAKPOINT = 768;
-
 // Init-once guard: prevents double-init in React StrictMode (advanced-init-once)
 let storeInitStarted = false;
 
-function clonePropertyValues(
-  values: Record<string, PropertyValue> = {},
-): Record<string, PropertyValue> {
-  return Object.fromEntries(
-    Object.entries(values).map(([key, value]) => [key, { ...value }]),
-  );
-}
-
-function remapLayerTreeId(
-  id: LayerId | LayerGroupId,
-  layerIdMap: ReadonlyMap<string, LayerId>,
-  groupIdMap: ReadonlyMap<string, LayerGroupId>,
-): LayerId | LayerGroupId {
-  return (layerIdMap.get(id as string) ??
-    groupIdMap.get(id as string) ??
-    id) as LayerId | LayerGroupId;
-}
-
-function remapTileEntries(
-  tiles: TileLayer["tiles"],
-  tilesetIdMap: ReadonlyMap<string, TilesetId>,
-): TileLayer["tiles"] {
-  return Object.fromEntries(
-    Object.entries(tiles).map(([coordinate, ref]) => [
-      coordinate,
-      {
-        ...ref,
-        tilesetId: tilesetIdMap.get(ref.tilesetId as string) ?? ref.tilesetId,
-      } satisfies TileRef,
-    ]),
-  );
-}
-
-function cloneImportedTileset(
-  tileset: Tileset,
-  tilesetIdMap: ReadonlyMap<string, TilesetId>,
-  groupId: TilesetGroupId,
-): Tileset {
-  return {
-    ...tileset,
-    id: tilesetIdMap.get(tileset.id as string) ?? tileset.id,
-    groupId,
-  };
-}
-
 function App() {
   const [ready, setReady] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
@@ -433,35 +295,6 @@ function App() {
     return () => window.removeEventListener("beforeunload", handleBeforeUnload);
   }, []);
 
-  // Listen for the Find and Replace custom event from keyboard shortcuts
-  useEffect(() => {
-    function handleOpenFindReplace() {
-      setFindReplaceOpen(true);
-    }
-    window.addEventListener("open-find-replace", handleOpenFindReplace);
-    return () =>
-      window.removeEventListener("open-find-replace", handleOpenFindReplace);
-  }, [setFindReplaceOpen]);
-
-  // Listen for map-tile "Open in Image Editor" event dispatched by MapPanel
-  useEffect(() => {
-    function handleOpenImageEditor() {
-      setActiveTool("image-editor");
-    }
-    window.addEventListener("open-image-editor", handleOpenImageEditor);
-    return () =>
-      window.removeEventListener("open-image-editor", handleOpenImageEditor);
-  }, [setActiveTool]);
-
-  // Show toast when project is saved
-  useEffect(() => {
-    function handleSaveEnd() {
-      toast.success("Project saved");
-    }
-    window.addEventListener("project-save-end", handleSaveEnd);
-    return () => window.removeEventListener("project-save-end", handleSaveEnd);
-  }, []);
-
   if (!ready) {
     return loadingScreen;
   }
@@ -489,550 +322,4 @@ function App() {
   );
 }
 
-// Separated so it can call useEditorStore after initialization
-function AppShell({
-  settingsOpen,
-  setSettingsOpen,
-  projectDialogOpen,
-  setProjectDialogOpen,
-  aboutOpen,
-  setAboutOpen,
-  shortcutsOpen,
-  setShortcutsOpen,
-  findReplaceOpen,
-  setFindReplaceOpen,
-  bugReportOpen,
-  setBugReportOpen,
-  activeTool,
-  setActiveTool,
-}: {
-  settingsOpen: boolean;
-  setSettingsOpen: (v: boolean) => void;
-  projectDialogOpen: boolean;
-  setProjectDialogOpen: (v: boolean) => void;
-  aboutOpen: boolean;
-  setAboutOpen: (v: boolean) => void;
-  shortcutsOpen: boolean;
-  setShortcutsOpen: (v: boolean) => void;
-  findReplaceOpen: boolean;
-  setFindReplaceOpen: (v: boolean) => void;
-  bugReportOpen: boolean;
-  setBugReportOpen: (v: boolean) => void;
-  activeTool: ToolName | null;
-  setActiveTool: (v: ToolName | null) => void;
-}) {
-  const { state, setState } = useEditorStore();
-  const hasProject = state.project !== null;
-  const editorHostRef = useRef<HTMLElement>(null);
-  const [editorWidth, setEditorWidth] = useState<number | null>(null);
-  const [workspaceOpen, setWorkspaceOpen] = useState(false);
-  const [workspaceTab, setWorkspaceTab] =
-    useState<EditorWorkspaceTab>("layers");
-
-  const activeLayerKind =
-    state.project !== null &&
-    state.activeLayerId !== null &&
-    (state.project.objectLayers ?? []).some((l) => l.id === state.activeLayerId)
-      ? "object"
-      : state.project !== null &&
-          state.activeLayerId !== null &&
-          (state.project.imageLayers ?? []).some(
-            (l) => l.id === state.activeLayerId,
-          )
-        ? "image"
-        : state.project !== null &&
-            state.activeLayerId !== null &&
-            state.project.layers.some((l) => l.id === state.activeLayerId)
-          ? "tile"
-          : null;
-  const showDetailsPanel =
-    activeLayerKind === "object" || activeLayerKind === "image";
-  const detailsTabLabel =
-    activeLayerKind === "object"
-      ? "Objects"
-      : activeLayerKind === "image"
-        ? "Properties"
-        : null;
-  const detailsPanel =
-    activeLayerKind === "object" ? (
-      <ObjectsPanel />
-    ) : activeLayerKind === "image" ? (
-      <ImageLayerPropertiesPanel />
-    ) : null;
-
-  const isCompactLayout =
-    hasProject &&
-    editorWidth !== null &&
-    editorWidth < NARROW_LAYOUT_BREAKPOINT;
-
-  const workspaceDrawerOpen = isCompactLayout && workspaceOpen;
-  const activeWorkspaceTab = showDetailsPanel ? workspaceTab : "layers";
-
-  const setEditorHostNode = useCallback((node: HTMLElement | null) => {
-    editorHostRef.current = node;
-    setEditorWidth(node?.clientWidth ?? null);
-  }, []);
-
-  useEffect(() => {
-    const container = editorHostRef.current;
-    if (!hasProject || !container) return;
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      setEditorWidth(entry.contentRect.width);
-    });
-
-    observer.observe(container);
-
-    return () => observer.disconnect();
-  }, [hasProject]);
-
-  const handleExportProject = useCallback(async () => {
-    if (!state.project) return;
-    await saveProject(state.project);
-    const data = await exportProject(state.project);
-    downloadFile(data, `${state.project.name}.2dp`);
-  }, [state.project]);
-
-  const handleNewProject = useCallback(() => {
-    setProjectDialogOpen(true);
-  }, [setProjectDialogOpen]);
-
-  // --- Map Import/Export ---
-
-  const handleExportMap = useCallback(async () => {
-    if (!state.project || !state.activeMapId) return;
-    const map = state.project.maps.find((m) => m.id === state.activeMapId);
-    if (!map) return;
-    const projectLayerGroups = state.project.layerGroups ?? [];
-    const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
-    const allGroupIds = getAllGroupIds(map.layerOrder, projectLayerGroups);
-    // js-set-map-lookups: O(1) membership check instead of O(n) .includes()
-    const layerIdSet = new Set<string>(allLayerIds as string[]);
-    const groupIdSet = new Set<string>(allGroupIds as string[]);
-    const layers = state.project.layers.filter((l) =>
-      layerIdSet.has(l.id as string),
-    );
-    const imageLayers = (state.project.imageLayers ?? []).filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    );
-    const layerGroups = projectLayerGroups.filter((group) =>
-      groupIdSet.has(group.id as string),
-    );
-    const objectLayers = (state.project.objectLayers ?? []).filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    );
-    const data = await exportMap(
-      map,
-      layers,
-      state.project.tilesets,
-      state.project.overrideTilesets ?? [],
-      imageLayers,
-      layerGroups,
-      objectLayers,
-      state.project.objects ?? [],
-    );
-    downloadFile(data, `${map.name}.2dm`);
-  }, [state.project, state.activeMapId]);
-
-  const handleImportMap = useCallback(() => {
-    if (!state.project) return;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".2dm";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      try {
-        const currentProject = state.project;
-        if (!currentProject) return;
-
-        const raw = await readFileAsUint8Array(file);
-        const {
-          map,
-          layers,
-          tilesets,
-          overrideTilesets,
-          imageLayers: importedImageLayers,
-          layerGroups: importedLayerGroups,
-          objectLayers: importedObjLayers,
-          objects: importedObjects,
-        } = await importMap(raw);
-
-        const targetMapGroupId =
-          state.activeMapGroupId ?? currentProject.mapGroups[0]?.id;
-        const targetTilesetGroupId =
-          state.activeTilesetGroupId ?? currentProject.tilesetGroups[0]?.id;
-        if (!targetMapGroupId || !targetTilesetGroupId) return;
-
-        const newMapId = generateMapId();
-        const layerIdMap = new Map<string, LayerId>();
-        const groupIdMap = new Map<string, LayerGroupId>();
-        const objectIdMap = new Map<string, ObjectId>();
-        const tilesetIdMap = new Map<string, TilesetId>();
-
-        for (const layer of layers) {
-          layerIdMap.set(layer.id as string, generateLayerId());
-        }
-        for (const layer of importedImageLayers) {
-          layerIdMap.set(layer.id as string, generateLayerId());
-        }
-        for (const layer of importedObjLayers) {
-          layerIdMap.set(layer.id as string, generateLayerId());
-        }
-        for (const group of importedLayerGroups) {
-          groupIdMap.set(group.id as string, generateLayerGroupId());
-        }
-        for (const object of importedObjects) {
-          objectIdMap.set(object.id as string, generateObjectId());
-        }
-
-        const reservedTilesetIds = new Set(
-          [
-            ...currentProject.tilesets,
-            ...(currentProject.overrideTilesets ?? []),
-          ].map((tileset) => tileset.id as string),
-        );
-        const reserveImportedTilesetId = (tilesetId: TilesetId): TilesetId => {
-          const existingId = tilesetIdMap.get(tilesetId as string);
-          if (existingId) return existingId;
-
-          const nextId = reservedTilesetIds.has(tilesetId as string)
-            ? generateTilesetId()
-            : tilesetId;
-          reservedTilesetIds.add(nextId as string);
-          tilesetIdMap.set(tilesetId as string, nextId);
-          return nextId;
-        };
-
-        for (const tileset of tilesets) {
-          reserveImportedTilesetId(tileset.id);
-        }
-        for (const tileset of overrideTilesets) {
-          reserveImportedTilesetId(tileset.id);
-        }
-
-        const remappedTilesets = tilesets.map((tileset) =>
-          cloneImportedTileset(
-            tileset,
-            tilesetIdMap,
-            targetTilesetGroupId as TilesetGroupId,
-          ),
-        );
-        const remappedOverrideTilesets = overrideTilesets.map((tileset) =>
-          cloneImportedTileset(
-            tileset,
-            tilesetIdMap,
-            targetTilesetGroupId as TilesetGroupId,
-          ),
-        );
-        const remappedLayers: TileLayer[] = layers.map((layer) => ({
-          ...layer,
-          id: layerIdMap.get(layer.id as string) ?? layer.id,
-          mapId: newMapId,
-          tiles: remapTileEntries(layer.tiles, tilesetIdMap),
-        }));
-        const remappedImageLayers: ImageLayer[] = importedImageLayers.map(
-          (layer) => ({
-            ...layer,
-            id: layerIdMap.get(layer.id as string) ?? layer.id,
-            mapId: newMapId,
-          }),
-        );
-        const remappedObjectLayers: ObjectLayer[] = importedObjLayers.map(
-          (layer) => ({
-            ...layer,
-            id: layerIdMap.get(layer.id as string) ?? layer.id,
-            mapId: newMapId,
-            objectOrder: layer.objectOrder.map(
-              (objectId) => objectIdMap.get(objectId as string) ?? objectId,
-            ),
-          }),
-        );
-        const remappedLayerGroups: LayerGroup[] = importedLayerGroups.map(
-          (group) => ({
-            ...group,
-            id: groupIdMap.get(group.id as string) ?? group.id,
-            mapId: newMapId,
-            childOrder: group.childOrder.map((id) =>
-              remapLayerTreeId(id, layerIdMap, groupIdMap),
-            ),
-          }),
-        );
-        const remappedObjects: MapObject[] = importedObjects.map((object) => ({
-          ...object,
-          id: objectIdMap.get(object.id as string) ?? object.id,
-          layerId: (layerIdMap.get(object.layerId as string) ??
-            object.layerId) as LayerId,
-          points: object.points.map((point) => ({ ...point })),
-          properties: clonePropertyValues(object.properties),
-        }));
-        const remappedMap = {
-          ...map,
-          id: newMapId,
-          groupId: targetMapGroupId as MapGroupId,
-          layerOrder: map.layerOrder.map((id) =>
-            remapLayerTreeId(id, layerIdMap, groupIdMap),
-          ),
-          properties: clonePropertyValues(map.properties),
-          createdAt: Date.now(),
-        };
-
-        setState((draft) => {
-          if (!draft.project) return;
-          if (!draft.project.imageLayers) draft.project.imageLayers = [];
-          if (!draft.project.layerGroups) draft.project.layerGroups = [];
-          if (!draft.project.objectLayers) draft.project.objectLayers = [];
-          if (!draft.project.objects) draft.project.objects = [];
-          if (!draft.project.overrideTilesets)
-            draft.project.overrideTilesets = [];
-
-          for (const tileset of remappedTilesets) {
-            draft.project.tilesets.push(tileset);
-          }
-          for (const tileset of remappedOverrideTilesets) {
-            draft.project.overrideTilesets.push(tileset);
-          }
-
-          draft.project.maps.push(remappedMap);
-
-          for (const layer of remappedLayers) {
-            draft.project.layers.push(layer);
-          }
-          for (const layer of remappedImageLayers) {
-            draft.project.imageLayers.push(layer);
-          }
-          for (const group of remappedLayerGroups) {
-            draft.project.layerGroups.push(group);
-          }
-          for (const layer of remappedObjectLayers) {
-            draft.project.objectLayers.push(layer);
-          }
-          for (const object of remappedObjects) {
-            draft.project.objects.push(object);
-          }
-
-          draft.activeMapId = newMapId;
-          draft.activeLayerId =
-            findLastLayerId(
-              remappedMap.layerOrder,
-              remappedLayers,
-              remappedLayerGroups,
-              remappedImageLayers,
-              remappedObjectLayers,
-            ) ?? null;
-          draft.activeMapGroupId = targetMapGroupId as MapGroupId;
-        });
-      } catch (err) {
-        console.error("[Import Map] Failed:", err);
-        alert("Failed to import map. The file may be corrupted.");
-      }
-    };
-    input.click();
-  }, [
-    state.project,
-    state.activeMapGroupId,
-    state.activeTilesetGroupId,
-    setState,
-  ]);
-
-  // --- Tileset Import/Export ---
-
-  const handleExportTileset = useCallback(async () => {
-    if (!state.project || !state.activeTilesetId) return;
-    const tileset = state.project.tilesets.find(
-      (t) => t.id === state.activeTilesetId,
-    );
-    if (!tileset) return;
-    const data = await exportTileset(tileset);
-    downloadFile(data, `${tileset.name}.2dt`);
-  }, [state.project, state.activeTilesetId]);
-
-  const handleImportTileset = useCallback(() => {
-    if (!state.project) return;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".2dt";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      try {
-        const raw = await readFileAsUint8Array(file);
-        const tileset = await importTileset(raw, state.tileSize);
-
-        // Assign to current or first tileset group
-        const targetGroupId =
-          state.activeTilesetGroupId ?? state.project!.tilesetGroups[0]?.id;
-        if (!targetGroupId) return;
-
-        // Check if tileset already exists (by ID)
-        const exists = state.project!.tilesets.some((t) => t.id === tileset.id);
-
-        setState((draft) => {
-          if (!draft.project) return;
-          if (!exists) {
-            draft.project.tilesets.push({
-              ...tileset,
-              groupId: targetGroupId as TilesetGroupId,
-            });
-          }
-          draft.activeTilesetId = tileset.id;
-          draft.activeTilesetGroupId = targetGroupId as TilesetGroupId;
-          draft.tileSize = getActiveTilesetTileSize(
-            draft.project,
-            draft.activeTilesetId,
-          );
-          draft.selectedTile = null;
-        });
-      } catch (err) {
-        console.error("[Import Tileset] Failed:", err);
-        alert("Failed to import tileset. The file may be corrupted.");
-      }
-    };
-    input.click();
-  }, [state.project, state.activeTilesetGroupId, state.tileSize, setState]);
-
-  const activeWorkspaceSummary =
-    activeLayerKind === "object"
-      ? "Objects open alongside the map"
-      : activeLayerKind === "image"
-        ? "Image properties open alongside the map"
-        : "Layers stay one tap away";
-
-  const handleOpenWorkspace = useCallback(() => {
-    setWorkspaceTab(showDetailsPanel ? "details" : "layers");
-    setWorkspaceOpen(true);
-  }, [showDetailsPanel]);
-
-  const workspaceButtonLabel = showDetailsPanel
-    ? (detailsTabLabel ?? "Details")
-    : "Layers";
-  const handleOpenTool = useCallback(
-    (tool: ToolName) => {
-      if (tool === "image-editor") {
-        clearTileEditorContext();
-      }
-
-      setActiveTool(tool);
-    },
-    [setActiveTool],
-  );
-
-  return (
-    <div className="flex h-full flex-col">
-      <Toolbar
-        onNewProject={handleNewProject}
-        onSaveProject={() => {
-          const project = state.project;
-          if (project) {
-            markEditorSaved();
-            void saveProject({ ...project, updatedAt: Date.now() });
-          }
-        }}
-        onImportProject={() => setProjectDialogOpen(true)}
-        onImportMap={handleImportMap}
-        onImportTileset={handleImportTileset}
-        onExportProject={handleExportProject}
-        onExportMap={handleExportMap}
-        onExportTileset={handleExportTileset}
-        onOpenSettings={() => setSettingsOpen(true)}
-        onAbout={() => setAboutOpen(true)}
-        onKeyboardShortcuts={() => setShortcutsOpen(true)}
-        onSubmitBug={() => setBugReportOpen(true)}
-        onFindReplace={() => setFindReplaceOpen(true)}
-        onOpenTool={handleOpenTool}
-      />
-
-      {hasProject ? (
-        <main ref={setEditorHostNode} className="flex-1 min-h-0">
-          {isCompactLayout ? (
-            <>
-              <CompactEditorShell
-                tilesetPanel={<TilesetPanel />}
-                mapPanel={<MapPanel />}
-                workspaceSummary={activeWorkspaceSummary}
-                workspaceButtonLabel={workspaceButtonLabel}
-                workspaceOpen={workspaceDrawerOpen}
-                onOpenWorkspace={handleOpenWorkspace}
-              />
-
-              <EditorWorkspaceDrawer
-                open={workspaceDrawerOpen}
-                activeTab={activeWorkspaceTab}
-                onOpenChange={setWorkspaceOpen}
-                onTabChange={setWorkspaceTab}
-                layersPanel={<LayersPanel />}
-                detailsPanel={detailsPanel}
-                detailsTabLabel={detailsTabLabel}
-                showDetailsPanel={showDetailsPanel}
-              />
-            </>
-          ) : (
-            <DesktopEditorLayout
-              tilesetPanel={<TilesetPanel />}
-              mapPanel={<MapPanel />}
-              layersPanel={<LayersPanel />}
-              detailsPanel={detailsPanel}
-              showDetailsPanel={showDetailsPanel}
-            />
-          )}
-        </main>
-      ) : (
-        emptyProjectMessage
-      )}
-
-      {settingsOpen && (
-        <Suspense>
-          <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
-        </Suspense>
-      )}
-      {projectDialogOpen && (
-        <Suspense>
-          <ProjectDialog
-            open={projectDialogOpen}
-            onOpenChange={setProjectDialogOpen}
-            onProjectLoaded={() => setProjectDialogOpen(false)}
-          />
-        </Suspense>
-      )}
-      {aboutOpen && (
-        <Suspense>
-          <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
-        </Suspense>
-      )}
-      {shortcutsOpen && (
-        <Suspense>
-          <KeyboardShortcutsDialog
-            open={shortcutsOpen}
-            onOpenChange={setShortcutsOpen}
-          />
-        </Suspense>
-      )}
-      {findReplaceOpen && (
-        <Suspense>
-          <FindReplaceDialog
-            open={findReplaceOpen}
-            onOpenChange={setFindReplaceOpen}
-          />
-        </Suspense>
-      )}
-      {bugReportOpen && (
-        <Suspense>
-          <BugReportDialog
-            open={bugReportOpen}
-            onOpenChange={setBugReportOpen}
-          />
-        </Suspense>
-      )}
-      <Suspense>
-        <ToolDrawer
-          activeTool={activeTool}
-          onClose={() => setActiveTool(null)}
-        />
-      </Suspense>
-    </div>
-  );
-}
-
 export default App;
diff --git a/src/components/app/AppShell.tsx b/src/components/app/AppShell.tsx
new file mode 100644
index 0000000..5d253d9
--- /dev/null
+++ b/src/components/app/AppShell.tsx
@@ -0,0 +1,651 @@
+import { useCallback, useEffect, useRef, useState, lazy, Suspense } from "react";
+import { toast } from "sonner";
+import { Toolbar } from "@/components/layout/Toolbar";
+import { TilesetPanel } from "@/components/editor/TilesetPanel";
+import { MapPanel } from "@/components/editor/MapPanel";
+import { LayersPanel } from "@/components/editor/LayersPanel";
+import { ObjectsPanel } from "@/components/editor/ObjectsPanel";
+import { ImageLayerPropertiesPanel } from "@/components/editor/ImageLayerPropertiesPanel";
+import {
+  CompactEditorShell,
+  DesktopEditorLayout,
+  EditorWorkspaceDrawer,
+} from "@/components/editor/Layout/EditorLayouts";
+import { useEditorStore } from "@/hooks/use-editor-store";
+import {
+  exportProject,
+  exportMap,
+  importMap,
+  exportTileset,
+  importTileset,
+  downloadFile,
+  readFileAsUint8Array,
+} from "@/lib/format";
+import { saveProject } from "@/lib/db";
+import {
+  generateMapId,
+  generateLayerId,
+  generateLayerGroupId,
+  generateObjectId,
+  generateTilesetId,
+} from "@/lib/ids";
+import { findLastLayerId, getAllGroupIds, getAllLayerIds } from "@/lib/layers";
+import { clearTileEditorContext } from "@/lib/tile-editor-context";
+import { getActiveTilesetTileSize } from "@/lib/project";
+import {
+  cloneImportedTileset,
+  clonePropertyValues,
+  remapLayerTreeId,
+  remapTileEntries,
+} from "@/lib/project-import";
+import type {
+  ImageLayer,
+  LayerGroup,
+  LayerGroupId,
+  LayerId,
+  MapGroupId,
+  MapObject,
+  ObjectId,
+  ObjectLayer,
+  TileLayer,
+  TilesetGroupId,
+  TilesetId,
+} from "@/types";
+import type { EditorWorkspaceTab } from "@/types/editor-layout";
+import type { AppShellProps } from "@/types/app";
+import { markEditorSaved } from "@/lib/store";
+
+const SettingsDialog = lazy(() =>
+  import("@/components/dialogs/SettingsDialog").then((module) => ({
+    default: module.SettingsDialog,
+  })),
+);
+const ProjectDialog = lazy(() =>
+  import("@/components/dialogs/ProjectDialog").then((module) => ({
+    default: module.ProjectDialog,
+  })),
+);
+const AboutDialog = lazy(() =>
+  import("@/components/dialogs/AboutDialog").then((module) => ({
+    default: module.AboutDialog,
+  })),
+);
+const KeyboardShortcutsDialog = lazy(() =>
+  import("@/components/dialogs/KeyboardShortcutsDialog").then((module) => ({
+    default: module.KeyboardShortcutsDialog,
+  })),
+);
+const FindReplaceDialog = lazy(() =>
+  import("@/components/dialogs/FindReplaceDialog").then((module) => ({
+    default: module.FindReplaceDialog,
+  })),
+);
+const BugReportDialog = lazy(() =>
+  import("@/components/dialogs/BugReportDialog").then((module) => ({
+    default: module.BugReportDialog,
+  })),
+);
+const ToolDrawer = lazy(() =>
+  import("@/components/tools/ToolDrawer").then((module) => ({
+    default: module.ToolDrawer,
+  })),
+);
+
+const emptyProjectMessage = (
+  <main className="flex flex-1 min-h-0 items-center justify-center text-muted-foreground text-sm">
+    Open or create a project to get started
+  </main>
+);
+
+const NARROW_LAYOUT_BREAKPOINT = 768;
+
+export function AppShell({
+  settingsOpen,
+  setSettingsOpen,
+  projectDialogOpen,
+  setProjectDialogOpen,
+  aboutOpen,
+  setAboutOpen,
+  shortcutsOpen,
+  setShortcutsOpen,
+  findReplaceOpen,
+  setFindReplaceOpen,
+  bugReportOpen,
+  setBugReportOpen,
+  activeTool,
+  setActiveTool,
+}: AppShellProps) {
+  const { state, setState } = useEditorStore();
+  const hasProject = state.project !== null;
+  const editorHostRef = useRef<HTMLElement>(null);
+  const [editorWidth, setEditorWidth] = useState<number | null>(null);
+  const [workspaceOpen, setWorkspaceOpen] = useState(false);
+  const [workspaceTab, setWorkspaceTab] =
+    useState<EditorWorkspaceTab>("layers");
+
+  const activeLayerKind =
+    state.project !== null &&
+    state.activeLayerId !== null &&
+    (state.project.objectLayers ?? []).some((layer) => layer.id === state.activeLayerId)
+      ? "object"
+      : state.project !== null &&
+          state.activeLayerId !== null &&
+          (state.project.imageLayers ?? []).some(
+            (layer) => layer.id === state.activeLayerId,
+          )
+        ? "image"
+        : state.project !== null &&
+            state.activeLayerId !== null &&
+            state.project.layers.some((layer) => layer.id === state.activeLayerId)
+          ? "tile"
+          : null;
+  const showDetailsPanel =
+    activeLayerKind === "object" || activeLayerKind === "image";
+  const detailsTabLabel =
+    activeLayerKind === "object"
+      ? "Objects"
+      : activeLayerKind === "image"
+        ? "Properties"
+        : null;
+  const detailsPanel =
+    activeLayerKind === "object" ? (
+      <ObjectsPanel />
+    ) : activeLayerKind === "image" ? (
+      <ImageLayerPropertiesPanel />
+    ) : null;
+
+  const isCompactLayout =
+    hasProject &&
+    editorWidth !== null &&
+    editorWidth < NARROW_LAYOUT_BREAKPOINT;
+
+  const workspaceDrawerOpen = isCompactLayout && workspaceOpen;
+  const activeWorkspaceTab = showDetailsPanel ? workspaceTab : "layers";
+
+  const setEditorHostNode = useCallback((node: HTMLElement | null) => {
+    editorHostRef.current = node;
+    setEditorWidth(node?.clientWidth ?? null);
+  }, []);
+
+  useEffect(() => {
+    const container = editorHostRef.current;
+    if (!hasProject || !container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      setEditorWidth(entry.contentRect.width);
+    });
+
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, [hasProject]);
+
+  const handleExportProject = useCallback(async () => {
+    if (!state.project) return;
+    await saveProject(state.project);
+    const data = await exportProject(state.project);
+    downloadFile(data, `${state.project.name}.2dp`);
+  }, [state.project]);
+
+  const handleNewProject = useCallback(() => {
+    setProjectDialogOpen(true);
+  }, [setProjectDialogOpen]);
+
+  const handleExportMap = useCallback(async () => {
+    if (!state.project || !state.activeMapId) return;
+    const map = state.project.maps.find((entry) => entry.id === state.activeMapId);
+    if (!map) return;
+    const projectLayerGroups = state.project.layerGroups ?? [];
+    const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
+    const allGroupIds = getAllGroupIds(map.layerOrder, projectLayerGroups);
+    const layerIdSet = new Set<string>(allLayerIds as string[]);
+    const groupIdSet = new Set<string>(allGroupIds as string[]);
+    const layers = state.project.layers.filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    );
+    const imageLayers = (state.project.imageLayers ?? []).filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    );
+    const layerGroups = projectLayerGroups.filter((group) =>
+      groupIdSet.has(group.id as string),
+    );
+    const objectLayers = (state.project.objectLayers ?? []).filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    );
+    const data = await exportMap(
+      map,
+      layers,
+      state.project.tilesets,
+      state.project.overrideTilesets ?? [],
+      imageLayers,
+      layerGroups,
+      objectLayers,
+      state.project.objects ?? [],
+    );
+    downloadFile(data, `${map.name}.2dm`);
+  }, [state.project, state.activeMapId]);
+
+  const handleImportMap = useCallback(() => {
+    if (!state.project) return;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".2dm";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const currentProject = state.project;
+        if (!currentProject) return;
+
+        const raw = await readFileAsUint8Array(file);
+        const {
+          map,
+          layers,
+          tilesets,
+          overrideTilesets,
+          imageLayers: importedImageLayers,
+          layerGroups: importedLayerGroups,
+          objectLayers: importedObjectLayers,
+          objects: importedObjects,
+        } = await importMap(raw);
+
+        const targetMapGroupId =
+          state.activeMapGroupId ?? currentProject.mapGroups[0]?.id;
+        const targetTilesetGroupId =
+          state.activeTilesetGroupId ?? currentProject.tilesetGroups[0]?.id;
+        if (!targetMapGroupId || !targetTilesetGroupId) return;
+
+        const newMapId = generateMapId();
+        const layerIdMap = new Map<string, LayerId>();
+        const groupIdMap = new Map<string, LayerGroupId>();
+        const objectIdMap = new Map<string, ObjectId>();
+        const tilesetIdMap = new Map<string, TilesetId>();
+
+        for (const layer of layers) {
+          layerIdMap.set(layer.id as string, generateLayerId());
+        }
+        for (const layer of importedImageLayers) {
+          layerIdMap.set(layer.id as string, generateLayerId());
+        }
+        for (const layer of importedObjectLayers) {
+          layerIdMap.set(layer.id as string, generateLayerId());
+        }
+        for (const group of importedLayerGroups) {
+          groupIdMap.set(group.id as string, generateLayerGroupId());
+        }
+        for (const object of importedObjects) {
+          objectIdMap.set(object.id as string, generateObjectId());
+        }
+
+        const reservedTilesetIds = new Set(
+          [
+            ...currentProject.tilesets,
+            ...(currentProject.overrideTilesets ?? []),
+          ].map((tileset) => tileset.id as string),
+        );
+        const reserveImportedTilesetId = (tilesetId: TilesetId): TilesetId => {
+          const existingId = tilesetIdMap.get(tilesetId as string);
+          if (existingId) return existingId;
+
+          const nextId = reservedTilesetIds.has(tilesetId as string)
+            ? generateTilesetId()
+            : tilesetId;
+          reservedTilesetIds.add(nextId as string);
+          tilesetIdMap.set(tilesetId as string, nextId);
+          return nextId;
+        };
+
+        for (const tileset of tilesets) {
+          reserveImportedTilesetId(tileset.id);
+        }
+        for (const tileset of overrideTilesets) {
+          reserveImportedTilesetId(tileset.id);
+        }
+
+        const remappedTilesets = tilesets.map((tileset) =>
+          cloneImportedTileset(
+            tileset,
+            tilesetIdMap,
+            targetTilesetGroupId as TilesetGroupId,
+          ),
+        );
+        const remappedOverrideTilesets = overrideTilesets.map((tileset) =>
+          cloneImportedTileset(
+            tileset,
+            tilesetIdMap,
+            targetTilesetGroupId as TilesetGroupId,
+          ),
+        );
+        const remappedLayers: TileLayer[] = layers.map((layer) => ({
+          ...layer,
+          id: layerIdMap.get(layer.id as string) ?? layer.id,
+          mapId: newMapId,
+          tiles: remapTileEntries(layer.tiles, tilesetIdMap),
+        }));
+        const remappedImageLayers: ImageLayer[] = importedImageLayers.map(
+          (layer) => ({
+            ...layer,
+            id: layerIdMap.get(layer.id as string) ?? layer.id,
+            mapId: newMapId,
+          }),
+        );
+        const remappedObjectLayers: ObjectLayer[] = importedObjectLayers.map(
+          (layer) => ({
+            ...layer,
+            id: layerIdMap.get(layer.id as string) ?? layer.id,
+            mapId: newMapId,
+            objectOrder: layer.objectOrder.map(
+              (objectId) => objectIdMap.get(objectId as string) ?? objectId,
+            ),
+          }),
+        );
+        const remappedLayerGroups: LayerGroup[] = importedLayerGroups.map(
+          (group) => ({
+            ...group,
+            id: groupIdMap.get(group.id as string) ?? group.id,
+            mapId: newMapId,
+            childOrder: group.childOrder.map((id) =>
+              remapLayerTreeId(id, layerIdMap, groupIdMap),
+            ),
+          }),
+        );
+        const remappedObjects: MapObject[] = importedObjects.map((object) => ({
+          ...object,
+          id: objectIdMap.get(object.id as string) ?? object.id,
+          layerId: (layerIdMap.get(object.layerId as string) ??
+            object.layerId) as LayerId,
+          points: object.points.map((point) => ({ ...point })),
+          properties: clonePropertyValues(object.properties),
+        }));
+        const remappedMap = {
+          ...map,
+          id: newMapId,
+          groupId: targetMapGroupId as MapGroupId,
+          layerOrder: map.layerOrder.map((id) =>
+            remapLayerTreeId(id, layerIdMap, groupIdMap),
+          ),
+          properties: clonePropertyValues(map.properties),
+          createdAt: Date.now(),
+        };
+
+        setState((draft) => {
+          if (!draft.project) return;
+          if (!draft.project.imageLayers) draft.project.imageLayers = [];
+          if (!draft.project.layerGroups) draft.project.layerGroups = [];
+          if (!draft.project.objectLayers) draft.project.objectLayers = [];
+          if (!draft.project.objects) draft.project.objects = [];
+          if (!draft.project.overrideTilesets) {
+            draft.project.overrideTilesets = [];
+          }
+
+          for (const tileset of remappedTilesets) {
+            draft.project.tilesets.push(tileset);
+          }
+          for (const tileset of remappedOverrideTilesets) {
+            draft.project.overrideTilesets.push(tileset);
+          }
+
+          draft.project.maps.push(remappedMap);
+
+          for (const layer of remappedLayers) {
+            draft.project.layers.push(layer);
+          }
+          for (const layer of remappedImageLayers) {
+            draft.project.imageLayers.push(layer);
+          }
+          for (const group of remappedLayerGroups) {
+            draft.project.layerGroups.push(group);
+          }
+          for (const layer of remappedObjectLayers) {
+            draft.project.objectLayers.push(layer);
+          }
+          for (const object of remappedObjects) {
+            draft.project.objects.push(object);
+          }
+
+          draft.activeMapId = newMapId;
+          draft.activeLayerId =
+            findLastLayerId(
+              remappedMap.layerOrder,
+              remappedLayers,
+              remappedLayerGroups,
+              remappedImageLayers,
+              remappedObjectLayers,
+            ) ?? null;
+          draft.activeMapGroupId = targetMapGroupId as MapGroupId;
+        });
+      } catch (error) {
+        console.error("[Import Map] Failed:", error);
+        alert("Failed to import map. The file may be corrupted.");
+      }
+    };
+    input.click();
+  }, [
+    state.project,
+    state.activeMapGroupId,
+    state.activeTilesetGroupId,
+    setState,
+  ]);
+
+  const handleExportTileset = useCallback(async () => {
+    if (!state.project || !state.activeTilesetId) return;
+    const tileset = state.project.tilesets.find(
+      (entry) => entry.id === state.activeTilesetId,
+    );
+    if (!tileset) return;
+    const data = await exportTileset(tileset);
+    downloadFile(data, `${tileset.name}.2dt`);
+  }, [state.project, state.activeTilesetId]);
+
+  const handleImportTileset = useCallback(() => {
+    if (!state.project) return;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".2dt";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const project = state.project;
+        if (!project) return;
+
+        const raw = await readFileAsUint8Array(file);
+        const tileset = await importTileset(raw, state.tileSize);
+        const targetGroupId =
+          state.activeTilesetGroupId ?? project.tilesetGroups[0]?.id;
+        if (!targetGroupId) return;
+
+        const exists = project.tilesets.some((entry) => entry.id === tileset.id);
+
+        setState((draft) => {
+          if (!draft.project) return;
+          if (!exists) {
+            draft.project.tilesets.push({
+              ...tileset,
+              groupId: targetGroupId as TilesetGroupId,
+            });
+          }
+          draft.activeTilesetId = tileset.id;
+          draft.activeTilesetGroupId = targetGroupId as TilesetGroupId;
+          draft.tileSize = getActiveTilesetTileSize(
+            draft.project,
+            draft.activeTilesetId,
+          );
+          draft.selectedTile = null;
+        });
+      } catch (error) {
+        console.error("[Import Tileset] Failed:", error);
+        alert("Failed to import tileset. The file may be corrupted.");
+      }
+    };
+    input.click();
+  }, [state.project, state.activeTilesetGroupId, state.tileSize, setState]);
+
+  const activeWorkspaceSummary =
+    activeLayerKind === "object"
+      ? "Objects open alongside the map"
+      : activeLayerKind === "image"
+        ? "Image properties open alongside the map"
+        : "Layers stay one tap away";
+
+  const handleOpenWorkspace = useCallback(() => {
+    setWorkspaceTab(showDetailsPanel ? "details" : "layers");
+    setWorkspaceOpen(true);
+  }, [showDetailsPanel]);
+
+  const workspaceButtonLabel = showDetailsPanel
+    ? (detailsTabLabel ?? "Details")
+    : "Layers";
+  const handleOpenTool = useCallback(
+    (tool: AppShellProps["activeTool"] extends infer ActiveTool
+      ? Exclude<ActiveTool, null>
+      : never) => {
+      if (tool === "image-editor") {
+        clearTileEditorContext();
+      }
+
+      setActiveTool(tool);
+    },
+    [setActiveTool],
+  );
+
+  useEffect(() => {
+    function handleOpenFindReplace() {
+      setFindReplaceOpen(true);
+    }
+    window.addEventListener("open-find-replace", handleOpenFindReplace);
+    return () =>
+      window.removeEventListener("open-find-replace", handleOpenFindReplace);
+  }, [setFindReplaceOpen]);
+
+  useEffect(() => {
+    function handleOpenImageEditor() {
+      setActiveTool("image-editor");
+    }
+    window.addEventListener("open-image-editor", handleOpenImageEditor);
+    return () =>
+      window.removeEventListener("open-image-editor", handleOpenImageEditor);
+  }, [setActiveTool]);
+
+  useEffect(() => {
+    function handleSaveEnd() {
+      toast.success("Project saved");
+    }
+    window.addEventListener("project-save-end", handleSaveEnd);
+    return () => window.removeEventListener("project-save-end", handleSaveEnd);
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col">
+      <Toolbar
+        onNewProject={handleNewProject}
+        onSaveProject={() => {
+          const project = state.project;
+          if (project) {
+            markEditorSaved();
+            void saveProject({ ...project, updatedAt: Date.now() });
+          }
+        }}
+        onImportProject={() => setProjectDialogOpen(true)}
+        onImportMap={handleImportMap}
+        onImportTileset={handleImportTileset}
+        onExportProject={handleExportProject}
+        onExportMap={handleExportMap}
+        onExportTileset={handleExportTileset}
+        onOpenSettings={() => setSettingsOpen(true)}
+        onAbout={() => setAboutOpen(true)}
+        onKeyboardShortcuts={() => setShortcutsOpen(true)}
+        onSubmitBug={() => setBugReportOpen(true)}
+        onFindReplace={() => setFindReplaceOpen(true)}
+        onOpenTool={handleOpenTool}
+      />
+
+      {hasProject ? (
+        <main ref={setEditorHostNode} className="flex-1 min-h-0">
+          {isCompactLayout ? (
+            <>
+              <CompactEditorShell
+                tilesetPanel={<TilesetPanel />}
+                mapPanel={<MapPanel />}
+                workspaceSummary={activeWorkspaceSummary}
+                workspaceButtonLabel={workspaceButtonLabel}
+                workspaceOpen={workspaceDrawerOpen}
+                onOpenWorkspace={handleOpenWorkspace}
+              />
+
+              <EditorWorkspaceDrawer
+                open={workspaceDrawerOpen}
+                activeTab={activeWorkspaceTab}
+                onOpenChange={setWorkspaceOpen}
+                onTabChange={setWorkspaceTab}
+                layersPanel={<LayersPanel />}
+                detailsPanel={detailsPanel}
+                detailsTabLabel={detailsTabLabel}
+                showDetailsPanel={showDetailsPanel}
+              />
+            </>
+          ) : (
+            <DesktopEditorLayout
+              tilesetPanel={<TilesetPanel />}
+              mapPanel={<MapPanel />}
+              layersPanel={<LayersPanel />}
+              detailsPanel={detailsPanel}
+              showDetailsPanel={showDetailsPanel}
+            />
+          )}
+        </main>
+      ) : (
+        emptyProjectMessage
+      )}
+
+      {settingsOpen && (
+        <Suspense>
+          <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+        </Suspense>
+      )}
+      {projectDialogOpen && (
+        <Suspense>
+          <ProjectDialog
+            open={projectDialogOpen}
+            onOpenChange={setProjectDialogOpen}
+            onProjectLoaded={() => setProjectDialogOpen(false)}
+          />
+        </Suspense>
+      )}
+      {aboutOpen && (
+        <Suspense>
+          <AboutDialog open={aboutOpen} onOpenChange={setAboutOpen} />
+        </Suspense>
+      )}
+      {shortcutsOpen && (
+        <Suspense>
+          <KeyboardShortcutsDialog
+            open={shortcutsOpen}
+            onOpenChange={setShortcutsOpen}
+          />
+        </Suspense>
+      )}
+      {findReplaceOpen && (
+        <Suspense>
+          <FindReplaceDialog
+            open={findReplaceOpen}
+            onOpenChange={setFindReplaceOpen}
+          />
+        </Suspense>
+      )}
+      {bugReportOpen && (
+        <Suspense>
+          <BugReportDialog
+            open={bugReportOpen}
+            onOpenChange={setBugReportOpen}
+          />
+        </Suspense>
+      )}
+      <Suspense>
+        <ToolDrawer activeTool={activeTool} onClose={() => setActiveTool(null)} />
+      </Suspense>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/LayersPanel/DeleteLayerDialog.tsx b/src/components/editor/LayersPanel/DeleteLayerDialog.tsx
new file mode 100644
index 0000000..9d61be7
--- /dev/null
+++ b/src/components/editor/LayersPanel/DeleteLayerDialog.tsx
@@ -0,0 +1,41 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/AlertDialog";
+import type { DeleteLayerDialogProps } from "@/types/layers-panel";
+
+export function DeleteLayerDialog({
+  deleteTarget,
+  onOpenChange,
+  onDelete,
+}: DeleteLayerDialogProps) {
+  return (
+    <AlertDialog
+      open={!!deleteTarget}
+      onOpenChange={onOpenChange}
+    >
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Delete {deleteTarget?.isGroup ? "layer group" : "layer"}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete &quot;{deleteTarget?.name}&quot;
+            {deleteTarget?.isGroup && " and all layers inside it"}. This action
+            cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onMouseDown={onDelete}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/LayersPanel/LayersTree.tsx b/src/components/editor/LayersPanel/LayersTree.tsx
new file mode 100644
index 0000000..1d676a3
--- /dev/null
+++ b/src/components/editor/LayersPanel/LayersTree.tsx
@@ -0,0 +1,101 @@
+import { GroupRow } from "./GroupRow";
+import { LayerRow } from "./LayerRow";
+import type { LayersTreeProps } from "@/types/layers-panel";
+
+export function LayersTree({
+  treeNodes,
+  activeLayerId,
+  renamingId,
+  renameValue,
+  dragId,
+  dropIndicator,
+  onRenameValueChange,
+  onDoubleClick,
+  onCommitRename,
+  onCancelRename,
+  onSelectLayer,
+  onToggleExpand,
+  onToggleVisibility,
+  onToggleLock,
+  onMoveItem,
+  onDeleteTarget,
+  onDuplicateLayer,
+  onDuplicateGroup,
+  onDragStart,
+  onDragEnd,
+  onDragOverRow,
+  onDrop,
+}: LayersTreeProps) {
+  return (
+    <div className="px-2 pb-4">
+      {treeNodes.map((node) => {
+        if (node.type === "group") {
+          return (
+            <GroupRow
+              key={node.group.id}
+              group={node.group}
+              depth={node.depth}
+              parentGroupId={node.parentGroupId}
+              renamingId={renamingId}
+              renameValue={renameValue}
+              onRenameValueChange={onRenameValueChange}
+              onDoubleClick={onDoubleClick}
+              onCommitRename={onCommitRename}
+              onCancelRename={onCancelRename}
+              onToggleExpand={onToggleExpand}
+              onToggleVisibility={onToggleVisibility}
+              onToggleLock={onToggleLock}
+              onMove={onMoveItem}
+              onDelete={(id, name) =>
+                onDeleteTarget({ id, name, isGroup: true })
+              }
+              onDuplicate={onDuplicateGroup}
+              isDragging={dragId === node.group.id}
+              dropIndicator={
+                dropIndicator?.targetId === node.group.id
+                  ? dropIndicator.position
+                  : null
+              }
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              onDragOver={onDragOverRow}
+              onDrop={onDrop}
+            />
+          );
+        }
+
+        return (
+          <LayerRow
+            key={node.layer.id}
+            layer={node.layer}
+            depth={node.depth}
+            parentGroupId={node.parentGroupId}
+            isActive={node.layer.id === activeLayerId}
+            renamingId={renamingId}
+            renameValue={renameValue}
+            onRenameValueChange={onRenameValueChange}
+            onDoubleClick={onDoubleClick}
+            onCommitRename={onCommitRename}
+            onCancelRename={onCancelRename}
+            onSelect={onSelectLayer}
+            onToggleVisibility={onToggleVisibility}
+            onToggleLock={onToggleLock}
+            onMove={onMoveItem}
+            onDelete={(id, name) => onDeleteTarget({ id, name, isGroup: false })}
+            onDuplicate={onDuplicateLayer}
+            isDragging={dragId === node.layer.id}
+            dropIndicator={
+              dropIndicator?.targetId === node.layer.id
+                ? dropIndicator.position
+                : null
+            }
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            onDragOver={onDragOverRow}
+            onDrop={onDrop}
+          />
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/LayersPanel/index.tsx b/src/components/editor/LayersPanel/index.tsx
index 5794589..f920291 100644
--- a/src/components/editor/LayersPanel/index.tsx
+++ b/src/components/editor/LayersPanel/index.tsx
@@ -1,16 +1,6 @@
 import { useState, useRef } from "react";
 import { Plus } from "lucide-react";
 import { Button } from "@/components/ui/Button";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/AlertDialog";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { AddLayerDialog } from "@/components/dialogs/AddLayerDialog";
 import { useEditorStore } from "@/hooks/use-editor-store";
@@ -38,19 +28,20 @@ import type {
   LayerType,
   MapObject,
 } from "@/types";
-import { GroupRow } from "./GroupRow";
-import { LayerRow } from "./LayerRow";
+import { LayersTree } from "./LayersTree";
+import { DeleteLayerDialog } from "./DeleteLayerDialog";
+import type {
+  LayerDropIndicator,
+  LayersPanelDeleteTarget,
+} from "@/types/layers-panel";
 
 export function LayersPanel() {
   const { state, setState } = useEditorStore();
   const project = state.project;
 
   const [addLayerOpen, setAddLayerOpen] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<{
-    id: string;
-    name: string;
-    isGroup: boolean;
-  } | null>(null);
+  const [deleteTarget, setDeleteTarget] =
+    useState<LayersPanelDeleteTarget | null>(null);
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
 
@@ -60,10 +51,8 @@ export function LayersPanel() {
   // ---- Drag & Drop state ----
   const [dragId, setDragId] = useState<string | null>(null);
   const [dragIsGroup, setDragIsGroup] = useState(false);
-  const [dropIndicator, setDropIndicator] = useState<{
-    targetId: string;
-    position: "above" | "below" | "inside";
-  } | null>(null);
+  const [dropIndicator, setDropIndicator] =
+    useState<LayerDropIndicator | null>(null);
 
   if (!project) return null;
 
@@ -1008,115 +997,30 @@ export function LayersPanel() {
       </div>
 
       <ScrollArea className="flex-1 min-h-0">
-        <div className="px-2 pb-4">
-          {treeNodes.map((node) => {
-            if (node.type === "group") {
-              return (
-                <GroupRow
-                  key={node.group.id}
-                  group={node.group}
-                  depth={node.depth}
-                  parentGroupId={node.parentGroupId}
-                  renamingId={renamingId}
-                  renameValue={renameValue}
-                  onRenameValueChange={setRenameValue}
-                  onDoubleClick={handleDoubleClick}
-                  onCommitRename={commitRename}
-                  onCancelRename={() => setRenamingId(null)}
-                  onToggleExpand={handleToggleExpand}
-                  onToggleVisibility={handleToggleVisibility}
-                  onToggleLock={handleToggleLock}
-                  onMove={handleMoveItem}
-                  onDelete={(id, name) =>
-                    setDeleteTarget({ id, name, isGroup: true })
-                  }
-                  onDuplicate={handleDuplicateGroup}
-                  isDragging={dragId === node.group.id}
-                  dropIndicator={
-                    dropIndicator?.targetId === node.group.id
-                      ? dropIndicator.position
-                      : null
-                  }
-                  onDragStart={handleDragStart}
-                  onDragEnd={handleDragEnd}
-                  onDragOver={handleDragOverRow}
-                  onDrop={handleDrop}
-                />
-              );
-            } else if (
-              node.type === "imageLayer" ||
-              node.type === "objectLayer"
-            ) {
-              return (
-                <LayerRow
-                  key={node.layer.id}
-                  layer={node.layer}
-                  depth={node.depth}
-                  parentGroupId={node.parentGroupId}
-                  isActive={node.layer.id === state.activeLayerId}
-                  renamingId={renamingId}
-                  renameValue={renameValue}
-                  onRenameValueChange={setRenameValue}
-                  onDoubleClick={handleDoubleClick}
-                  onCommitRename={commitRename}
-                  onCancelRename={() => setRenamingId(null)}
-                  onSelect={handleSelectLayer}
-                  onToggleVisibility={handleToggleVisibility}
-                  onToggleLock={handleToggleLock}
-                  onMove={handleMoveItem}
-                  onDelete={(id, name) =>
-                    setDeleteTarget({ id, name, isGroup: false })
-                  }
-                  onDuplicate={handleDuplicateLayer}
-                  isDragging={dragId === node.layer.id}
-                  dropIndicator={
-                    dropIndicator?.targetId === node.layer.id
-                      ? dropIndicator.position
-                      : null
-                  }
-                  onDragStart={handleDragStart}
-                  onDragEnd={handleDragEnd}
-                  onDragOver={handleDragOverRow}
-                  onDrop={handleDrop}
-                />
-              );
-            } else {
-              return (
-                <LayerRow
-                  key={node.layer.id}
-                  layer={node.layer}
-                  depth={node.depth}
-                  parentGroupId={node.parentGroupId}
-                  isActive={node.layer.id === state.activeLayerId}
-                  renamingId={renamingId}
-                  renameValue={renameValue}
-                  onRenameValueChange={setRenameValue}
-                  onDoubleClick={handleDoubleClick}
-                  onCommitRename={commitRename}
-                  onCancelRename={() => setRenamingId(null)}
-                  onSelect={handleSelectLayer}
-                  onToggleVisibility={handleToggleVisibility}
-                  onToggleLock={handleToggleLock}
-                  onMove={handleMoveItem}
-                  onDelete={(id, name) =>
-                    setDeleteTarget({ id, name, isGroup: false })
-                  }
-                  onDuplicate={handleDuplicateLayer}
-                  isDragging={dragId === node.layer.id}
-                  dropIndicator={
-                    dropIndicator?.targetId === node.layer.id
-                      ? dropIndicator.position
-                      : null
-                  }
-                  onDragStart={handleDragStart}
-                  onDragEnd={handleDragEnd}
-                  onDragOver={handleDragOverRow}
-                  onDrop={handleDrop}
-                />
-              );
-            }
-          })}
-        </div>
+        <LayersTree
+          treeNodes={treeNodes}
+          activeLayerId={state.activeLayerId}
+          renamingId={renamingId}
+          renameValue={renameValue}
+          dragId={dragId}
+          dropIndicator={dropIndicator}
+          onRenameValueChange={setRenameValue}
+          onDoubleClick={handleDoubleClick}
+          onCommitRename={commitRename}
+          onCancelRename={() => setRenamingId(null)}
+          onSelectLayer={handleSelectLayer}
+          onToggleExpand={handleToggleExpand}
+          onToggleVisibility={handleToggleVisibility}
+          onToggleLock={handleToggleLock}
+          onMoveItem={handleMoveItem}
+          onDeleteTarget={setDeleteTarget}
+          onDuplicateLayer={handleDuplicateLayer}
+          onDuplicateGroup={handleDuplicateGroup}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+          onDragOverRow={handleDragOverRow}
+          onDrop={handleDrop}
+        />
       </ScrollArea>
 
       {/* Add layer dialog */}
@@ -1138,29 +1042,15 @@ export function LayersPanel() {
       />
 
       {/* Delete confirmation */}
-      <AlertDialog
-        open={!!deleteTarget}
-        onOpenChange={(o) => !o && setDeleteTarget(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Delete {deleteTarget?.isGroup ? "layer group" : "layer"}?
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete &quot;{deleteTarget?.name}&quot;
-              {deleteTarget?.isGroup && " and all layers inside it"}. This
-              action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onMouseDown={handleDelete}>
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <DeleteLayerDialog
+        deleteTarget={deleteTarget}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeleteTarget(null);
+          }
+        }}
+        onDelete={handleDelete}
+      />
     </div>
   );
 }
diff --git a/src/components/editor/MapCanvas/scene-interaction-handlers.ts b/src/components/editor/MapCanvas/scene-interaction-handlers.ts
new file mode 100644
index 0000000..d5748a1
--- /dev/null
+++ b/src/components/editor/MapCanvas/scene-interaction-handlers.ts
@@ -0,0 +1,731 @@
+import type { TileRef } from "@/types";
+import type {
+  SceneInteractionHandlerContext,
+  ScenePointerDownEvent,
+  ScenePointerPosition,
+  ScenePointerUpEvent,
+} from "@/types/map-canvas";
+import { computeResize, RESIZE_CURSORS } from "./resize-utils";
+import {
+  getBoxObjectHandlePositions,
+  isBoxObjectType,
+  pointHitsObjectBody,
+} from "./object-utils";
+import {
+  pointInImageLayer,
+  resizeImageLayerFromHandle,
+} from "./image-layer-transform";
+
+export function commitPolygonObject(
+  points: { x: number; y: number }[],
+  onCreateObject: SceneInteractionHandlerContext["onCreateObject"],
+  setIsDrawingPolygon: SceneInteractionHandlerContext["setIsDrawingPolygon"],
+  setPolygonPoints: SceneInteractionHandlerContext["setPolygonPoints"],
+  setPolygonCursorPos: SceneInteractionHandlerContext["setPolygonCursorPos"],
+  lastClickRef: SceneInteractionHandlerContext["lastClickRef"],
+): void {
+  const minX = Math.min(...points.map((point) => point.x));
+  const minY = Math.min(...points.map((point) => point.y));
+  const maxX = Math.max(...points.map((point) => point.x));
+  const maxY = Math.max(...points.map((point) => point.y));
+  const relativePoints = points.map((point) => ({
+    x: point.x - minX,
+    y: point.y - minY,
+  }));
+
+  onCreateObject(
+    "polygon",
+    minX,
+    minY,
+    maxX - minX,
+    maxY - minY,
+    relativePoints,
+  );
+  setIsDrawingPolygon(false);
+  setPolygonPoints([]);
+  setPolygonCursorPos(null);
+  lastClickRef.current = null;
+}
+
+function commitPolygonVertexUpdate(
+  context: SceneInteractionHandlerContext,
+): void {
+  if (!context.livePolyVertex) return;
+
+  const activeObject = context.objects.find(
+    (object) => object.id === context.livePolyVertex?.objectId,
+  );
+  if (activeObject) {
+    const newPoints = activeObject.points.map((point, index) =>
+      index === context.livePolyVertex?.vertexIndex
+        ? {
+            x: context.livePolyVertex.x,
+            y: context.livePolyVertex.y,
+          }
+        : point,
+    );
+    context.onUpdatePolygonPoints(context.livePolyVertex.objectId, newPoints);
+  }
+  context.setLivePolyVertex(null);
+}
+
+function finishObjectPlacement(context: SceneInteractionHandlerContext): boolean {
+  if (context.currentTool !== "select" || !context.objectPlaceRef.current) {
+    return false;
+  }
+
+  if (
+    context.liveObjectPlace &&
+    (context.liveObjectPlace.width > 2 || context.liveObjectPlace.height > 2)
+  ) {
+    context.onCreateObject(
+      context.liveObjectPlace.type,
+      context.liveObjectPlace.x,
+      context.liveObjectPlace.y,
+      context.liveObjectPlace.width,
+      context.liveObjectPlace.height,
+      [],
+    );
+  }
+  context.objectPlaceRef.current = null;
+  context.setLiveObjectPlace(null);
+  return true;
+}
+
+function finishObjectResize(context: SceneInteractionHandlerContext): boolean {
+  if (context.currentTool !== "select" || !context.objectResizeRef.current) {
+    return false;
+  }
+
+  if (context.liveObjectResize) {
+    context.onResizeObject(
+      context.liveObjectResize.objectId,
+      context.liveObjectResize.x,
+      context.liveObjectResize.y,
+      context.liveObjectResize.width,
+      context.liveObjectResize.height,
+    );
+    context.setLiveObjectResize(null);
+  }
+  context.objectResizeRef.current = null;
+  return true;
+}
+
+function finishPolyVertexDrag(context: SceneInteractionHandlerContext): boolean {
+  if (context.currentTool !== "select" || !context.polyVertexDragRef.current) {
+    return false;
+  }
+
+  commitPolygonVertexUpdate(context);
+  context.polyVertexDragRef.current = null;
+  return true;
+}
+
+function finishObjectDrag(context: SceneInteractionHandlerContext): boolean {
+  if (context.currentTool !== "select" || !context.objectDragRef.current) {
+    return false;
+  }
+
+  if (context.liveObjectPos) {
+    context.onMoveObject(
+      context.liveObjectPos.objectId,
+      context.liveObjectPos.x,
+      context.liveObjectPos.y,
+    );
+    context.setLiveObjectPos(null);
+  }
+  context.objectDragRef.current = null;
+  context.setIsMoving(false);
+  return true;
+}
+
+function finishImageResize(context: SceneInteractionHandlerContext): boolean {
+  if (context.currentTool !== "select" || !context.imageResizeRef.current) {
+    return false;
+  }
+
+  if (context.liveImageResize) {
+    context.onResizeImageLayer(
+      context.liveImageResize.layerId,
+      context.liveImageResize.x,
+      context.liveImageResize.y,
+      context.liveImageResize.width,
+      context.liveImageResize.height,
+    );
+    context.setLiveImageResize(null);
+  }
+  context.imageResizeRef.current = null;
+  context.setResizingHandle(null);
+  return true;
+}
+
+function finishImageDrag(context: SceneInteractionHandlerContext): boolean {
+  if (context.currentTool !== "select" || !context.imageDragRef.current) {
+    return false;
+  }
+
+  if (context.liveImagePos) {
+    context.onMoveImageLayer(
+      context.liveImagePos.layerId,
+      context.liveImagePos.x,
+      context.liveImagePos.y,
+    );
+    context.setLiveImagePos(null);
+  }
+  context.imageDragRef.current = null;
+  context.setIsMoving(false);
+  return true;
+}
+
+function finishSelectionInteraction(
+  context: SceneInteractionHandlerContext,
+): boolean {
+  if (context.currentTool !== "select" || !context.selActionRef.current) {
+    return false;
+  }
+
+  const action = context.selActionRef.current;
+  if (action.type === "move" && context.liveSelection) {
+    const movedX = context.liveSelection.x !== action.orig.x;
+    const movedY = context.liveSelection.y !== action.orig.y;
+    if (movedX || movedY) {
+      context.onMoveTiles(
+        action.orig,
+        context.liveSelection.x,
+        context.liveSelection.y,
+      );
+    }
+  }
+  context.onSelectionChange(context.liveSelection);
+  context.setLiveSelection(null);
+  context.setIsMoving(false);
+  context.setMoveTilesSnapshot(null);
+  context.selActionRef.current = null;
+  return true;
+}
+
+function finishPainting(context: SceneInteractionHandlerContext): void {
+  if (!context.isPaintingRef.current) return;
+
+  context.isPaintingRef.current = false;
+  context.onPaintEnd();
+}
+
+export function handleScenePointerDown(
+  event: ScenePointerDownEvent,
+  context: SceneInteractionHandlerContext,
+): void {
+  if (event.button === 1 || event.button === 2) return;
+
+  if (context.currentTool === "select") {
+    if (context.pendingObjectType) {
+      if (context.pendingObjectType === "polygon") {
+        const px = event.x / context.zoom;
+        const py = event.y / context.zoom;
+        const now = Date.now();
+        const last = context.lastClickRef.current;
+        const isDoubleClick =
+          last !== null &&
+          now - last.time < 400 &&
+          Math.hypot(event.x - last.x, event.y - last.y) < 12;
+        context.lastClickRef.current = { time: now, x: event.x, y: event.y };
+
+        if (!context.isDrawingPolygon) {
+          context.setIsDrawingPolygon(true);
+          context.setPolygonPoints([{ x: px, y: py }]);
+          context.setPolygonCursorPos({ x: px, y: py });
+        } else {
+          const first = context.polygonPoints[0];
+          const distToFirst = Math.hypot(
+            (px - first.x) * context.zoom,
+            (py - first.y) * context.zoom,
+          );
+          if (context.polygonPoints.length >= 3 && distToFirst < 15) {
+            commitPolygonObject(
+              context.polygonPoints,
+              context.onCreateObject,
+              context.setIsDrawingPolygon,
+              context.setPolygonPoints,
+              context.setPolygonCursorPos,
+              context.lastClickRef,
+            );
+          } else if (isDoubleClick && context.polygonPoints.length >= 3) {
+            commitPolygonObject(
+              context.polygonPoints,
+              context.onCreateObject,
+              context.setIsDrawingPolygon,
+              context.setPolygonPoints,
+              context.setPolygonCursorPos,
+              context.lastClickRef,
+            );
+          } else if (isDoubleClick && context.polygonPoints.length === 2) {
+            commitPolygonObject(
+              [...context.polygonPoints, { x: px, y: py }],
+              context.onCreateObject,
+              context.setIsDrawingPolygon,
+              context.setPolygonPoints,
+              context.setPolygonCursorPos,
+              context.lastClickRef,
+            );
+          } else {
+            context.setPolygonPoints((prev) => [...prev, { x: px, y: py }]);
+          }
+        }
+        return;
+      }
+
+      if (context.pendingObjectType === "point") {
+        const px = event.x / context.zoom;
+        const py = event.y / context.zoom;
+        context.onCreateObject("point", px, py, 0, 0, []);
+        return;
+      }
+
+      context.objectPlaceRef.current = {
+        type: context.pendingObjectType,
+        startX: event.x,
+        startY: event.y,
+      };
+      const px = event.x / context.zoom;
+      const py = event.y / context.zoom;
+      context.setLiveObjectPlace({
+        type: context.pendingObjectType,
+        x: px,
+        y: py,
+        width: 0,
+        height: 0,
+      });
+      return;
+    }
+
+    const activeObject = context.objects.find(
+      (object) => object.id === context.activeObjectId,
+    );
+    if (activeObject && isBoxObjectType(activeObject)) {
+      const handles = getBoxObjectHandlePositions(
+        activeObject,
+        context.zoom,
+        context.getObjectInteractionOverrides(activeObject),
+      );
+      for (const [handle, cx, cy] of handles) {
+        if (Math.abs(event.x - cx) <= 8 && Math.abs(event.y - cy) <= 8) {
+          context.objectResizeRef.current = {
+            objectId: activeObject.id,
+            handle,
+            startX: event.x,
+            startY: event.y,
+            origX: activeObject.x,
+            origY: activeObject.y,
+            origWidth: activeObject.width,
+            origHeight: activeObject.height,
+          };
+          return;
+        }
+      }
+    }
+
+    if (activeObject && activeObject.type === "polygon") {
+      const objectX = activeObject.x * context.zoom;
+      const objectY = activeObject.y * context.zoom;
+      for (let index = 0; index < activeObject.points.length; index += 1) {
+        const vx = objectX + activeObject.points[index].x * context.zoom;
+        const vy = objectY + activeObject.points[index].y * context.zoom;
+        if (Math.abs(event.x - vx) <= 8 && Math.abs(event.y - vy) <= 8) {
+          context.polyVertexDragRef.current = {
+            objectId: activeObject.id,
+            vertexIndex: index,
+            startX: event.x,
+            startY: event.y,
+            origPoint: { ...activeObject.points[index] },
+          };
+          return;
+        }
+      }
+    }
+
+    const isObjectLayer = context.objectLayers.some(
+      (layer) => layer.id === context.activeLayerId,
+    );
+    if (isObjectLayer) {
+      const layerObjects = context.objects
+        .filter(
+          (object) => object.layerId === context.activeLayerId && object.visible,
+        )
+        .reverse();
+      for (const object of layerObjects) {
+        if (pointHitsObjectBody(object, event.x, event.y, context.zoom)) {
+          const now = Date.now();
+          const lastObjectClick = context.lastObjectClickRef.current;
+          const isObjectDoubleClick =
+            lastObjectClick !== null &&
+            lastObjectClick.objectId === object.id &&
+            now - lastObjectClick.time < 400 &&
+            Math.hypot(event.x - lastObjectClick.x, event.y - lastObjectClick.y) < 12;
+          context.lastObjectClickRef.current = {
+            time: now,
+            x: event.x,
+            y: event.y,
+            objectId: object.id,
+          };
+
+          if (isObjectDoubleClick) {
+            context.onDoubleClickObject?.(object.id);
+            context.lastObjectClickRef.current = null;
+            return;
+          }
+
+          context.onSelectObject(object.id);
+          if (!object.locked) {
+            context.objectDragRef.current = {
+              objectId: object.id,
+              startX: event.x,
+              startY: event.y,
+              origX: object.x,
+              origY: object.y,
+            };
+            context.setIsMoving(true);
+          }
+          return;
+        }
+      }
+      context.onSelectObject(null);
+      return;
+    }
+
+    const resizeHandle = context.hitTestResizeHandle(event.x, event.y);
+    if (resizeHandle) {
+      const resizeImageLayer = context.imageLayers.find(
+        (layer) => layer.id === context.activeLayerId,
+      );
+      if (resizeImageLayer) {
+        context.imageResizeRef.current = {
+          layerId: resizeImageLayer.id,
+          handle: resizeHandle,
+          startX: event.x,
+          startY: event.y,
+          origX: resizeImageLayer.x,
+          origY: resizeImageLayer.y,
+          origWidth: resizeImageLayer.width,
+          origHeight: resizeImageLayer.height,
+          rotation: resizeImageLayer.rotation ?? 0,
+          flipX: resizeImageLayer.flipX ?? false,
+          flipY: resizeImageLayer.flipY ?? false,
+        };
+        context.setResizingHandle(resizeHandle);
+        return;
+      }
+    }
+
+    const activeImageLayer = context.imageLayers.find(
+      (layer) => layer.id === context.activeLayerId,
+    );
+    if (activeImageLayer) {
+      const interactiveLayer = context.getInteractiveImageLayer(activeImageLayer);
+      if (
+        pointInImageLayer(interactiveLayer, {
+          x: event.x / context.zoom,
+          y: event.y / context.zoom,
+        })
+      ) {
+        context.imageDragRef.current = {
+          layerId: activeImageLayer.id,
+          startX: event.x,
+          startY: event.y,
+          origX: interactiveLayer.x,
+          origY: interactiveLayer.y,
+        };
+        context.setIsMoving(true);
+        return;
+      }
+    }
+
+    const selectionPos = context.getClampedGridPos(event.x, event.y);
+    if (!selectionPos) return;
+
+    if (
+      context.renderedSelection &&
+      context.isInsideSelection(event.x, event.y, context.renderedSelection)
+    ) {
+      const activeLayer = context.layers.find(
+        (layer) => layer.id === context.activeLayerId,
+      );
+      const tileSnapshot: { dx: number; dy: number; ref: TileRef }[] = [];
+      if (activeLayer) {
+        for (let dy = 0; dy < context.renderedSelection.height; dy += 1) {
+          for (let dx = 0; dx < context.renderedSelection.width; dx += 1) {
+            const key = `${context.renderedSelection.x + dx},${context.renderedSelection.y + dy}`;
+            const ref = activeLayer.tiles[key];
+            if (ref) {
+              tileSnapshot.push({ dx, dy, ref });
+            }
+          }
+        }
+      }
+      context.selActionRef.current = {
+        type: "move",
+        offsetX: selectionPos.x - context.renderedSelection.x,
+        offsetY: selectionPos.y - context.renderedSelection.y,
+        orig: { ...context.renderedSelection },
+        tiles: tileSnapshot,
+      };
+      context.setMoveTilesSnapshot(tileSnapshot);
+      context.setIsMoving(true);
+      return;
+    }
+
+    context.selActionRef.current = {
+      type: "draw",
+      startX: selectionPos.x,
+      startY: selectionPos.y,
+    };
+    context.setLiveSelection({
+      x: selectionPos.x,
+      y: selectionPos.y,
+      width: 1,
+      height: 1,
+    });
+    return;
+  }
+
+  const pos = context.getGridPos(event.x, event.y);
+  if (!pos) return;
+
+  context.isPaintingRef.current = true;
+  context.onPaintTile(pos.x, pos.y);
+}
+
+export function handleScenePointerMove(
+  event: ScenePointerPosition,
+  context: SceneInteractionHandlerContext,
+): void {
+  context.lastPointerPosRef.current = event;
+  const pos = context.getGridPos(event.x, event.y);
+  context.drawOverlayPreview(event, pos);
+
+  if (context.isDrawingPolygon) {
+    context.setPolygonCursorPos({
+      x: event.x / context.zoom,
+      y: event.y / context.zoom,
+    });
+  }
+
+  if (context.currentTool === "select") {
+    const placeAction = context.objectPlaceRef.current;
+    if (placeAction) {
+      const startPx = placeAction.startX / context.zoom;
+      const startPy = placeAction.startY / context.zoom;
+      const curPx = event.x / context.zoom;
+      const curPy = event.y / context.zoom;
+      context.setLiveObjectPlace({
+        type: placeAction.type,
+        x: Math.min(startPx, curPx),
+        y: Math.min(startPy, curPy),
+        width: Math.abs(curPx - startPx),
+        height: Math.abs(curPy - startPy),
+      });
+      return;
+    }
+
+    const objectResize = context.objectResizeRef.current;
+    if (objectResize) {
+      const rdx = (event.x - objectResize.startX) / context.zoom;
+      const rdy = (event.y - objectResize.startY) / context.zoom;
+      const result = computeResize(
+        objectResize.handle,
+        objectResize.origX,
+        objectResize.origY,
+        objectResize.origWidth,
+        objectResize.origHeight,
+        rdx,
+        rdy,
+        context.shiftKeyRef.current,
+      );
+      context.setLiveObjectResize({ objectId: objectResize.objectId, ...result });
+      return;
+    }
+
+    const polyVertexDrag = context.polyVertexDragRef.current;
+    if (polyVertexDrag) {
+      const dx = (event.x - polyVertexDrag.startX) / context.zoom;
+      const dy = (event.y - polyVertexDrag.startY) / context.zoom;
+      context.setLivePolyVertex({
+        objectId: polyVertexDrag.objectId,
+        vertexIndex: polyVertexDrag.vertexIndex,
+        x: polyVertexDrag.origPoint.x + dx,
+        y: polyVertexDrag.origPoint.y + dy,
+      });
+      return;
+    }
+
+    const objectDrag = context.objectDragRef.current;
+    if (objectDrag) {
+      const dx = (event.x - objectDrag.startX) / context.zoom;
+      const dy = (event.y - objectDrag.startY) / context.zoom;
+      context.setLiveObjectPos({
+        objectId: objectDrag.objectId,
+        x: Math.round(objectDrag.origX + dx),
+        y: Math.round(objectDrag.origY + dy),
+      });
+      return;
+    }
+
+    const resizeAction = context.imageResizeRef.current;
+    if (resizeAction) {
+      const result = resizeImageLayerFromHandle(
+        {
+          x: resizeAction.origX,
+          y: resizeAction.origY,
+          width: resizeAction.origWidth,
+          height: resizeAction.origHeight,
+          rotation: resizeAction.rotation,
+          flipX: resizeAction.flipX,
+          flipY: resizeAction.flipY,
+        },
+        resizeAction.handle,
+        {
+          x: event.x / context.zoom,
+          y: event.y / context.zoom,
+        },
+        context.shiftKeyRef.current,
+      );
+      context.setLiveImageResize({ layerId: resizeAction.layerId, ...result });
+      return;
+    }
+
+    const imageDrag = context.imageDragRef.current;
+    if (imageDrag) {
+      const dx = (event.x - imageDrag.startX) / context.zoom;
+      const dy = (event.y - imageDrag.startY) / context.zoom;
+      context.setLiveImagePos({
+        layerId: imageDrag.layerId,
+        x: Math.round(imageDrag.origX + dx),
+        y: Math.round(imageDrag.origY + dy),
+      });
+      return;
+    }
+
+    const action = context.selActionRef.current;
+    if (!action) {
+      const handle = context.hitTestResizeHandle(event.x, event.y);
+      context.setHoveredHandle(handle);
+
+      const isObjectLayerActive = context.objectLayers.some(
+        (layer) => layer.id === context.activeLayerId,
+      );
+      if (isObjectLayerActive && !handle) {
+        let objectCursor: string | null = null;
+        const activeObject = context.objects.find(
+          (object) => object.id === context.activeObjectId,
+        );
+
+        if (activeObject && isBoxObjectType(activeObject)) {
+          const handles = getBoxObjectHandlePositions(
+            activeObject,
+            context.zoom,
+            context.getObjectInteractionOverrides(activeObject),
+          );
+          for (const [handleId, cx, cy] of handles) {
+            if (Math.abs(event.x - cx) <= 8 && Math.abs(event.y - cy) <= 8) {
+              objectCursor = RESIZE_CURSORS[handleId];
+              break;
+            }
+          }
+        }
+
+        if (!objectCursor && activeObject && activeObject.type === "polygon") {
+          const objectX = activeObject.x * context.zoom;
+          const objectY = activeObject.y * context.zoom;
+          for (const point of activeObject.points) {
+            const vx = objectX + point.x * context.zoom;
+            const vy = objectY + point.y * context.zoom;
+            if (Math.abs(event.x - vx) <= 8 && Math.abs(event.y - vy) <= 8) {
+              objectCursor = "pointer";
+              break;
+            }
+          }
+        }
+
+        if (!objectCursor) {
+          const layerObjects = context.objects
+            .filter(
+              (object) => object.layerId === context.activeLayerId && object.visible,
+            )
+            .reverse();
+          for (const object of layerObjects) {
+            if (pointHitsObjectBody(object, event.x, event.y, context.zoom)) {
+              objectCursor = object.locked ? "not-allowed" : "move";
+              break;
+            }
+          }
+        }
+
+        context.setHoveredObjectCursor(objectCursor);
+      } else if (!isObjectLayerActive) {
+        context.setHoveredObjectCursor(null);
+      }
+      return;
+    }
+
+    const selectionPos = context.getClampedGridPos(event.x, event.y);
+    if (!selectionPos) return;
+
+    if (action.type === "draw") {
+      const x1 = Math.min(action.startX, Math.max(0, Math.min(selectionPos.x, context.mapW - 1)));
+      const y1 = Math.min(action.startY, Math.max(0, Math.min(selectionPos.y, context.mapH - 1)));
+      const x2 = Math.max(action.startX, Math.max(0, Math.min(selectionPos.x, context.mapW - 1)));
+      const y2 = Math.max(action.startY, Math.max(0, Math.min(selectionPos.y, context.mapH - 1)));
+      context.setLiveSelection({
+        x: x1,
+        y: y1,
+        width: x2 - x1 + 1,
+        height: y2 - y1 + 1,
+      });
+    } else {
+      const newX = Math.max(0, Math.min(selectionPos.x - action.offsetX, context.mapW - action.orig.width));
+      const newY = Math.max(0, Math.min(selectionPos.y - action.offsetY, context.mapH - action.orig.height));
+      context.setLiveSelection({ ...action.orig, x: newX, y: newY });
+    }
+    return;
+  }
+
+  if (!context.isPaintingRef.current) return;
+  if (context.currentTool === "fill") return;
+  if (!pos) return;
+
+  context.onPaintTile(pos.x, pos.y);
+}
+
+export function handleScenePointerUp(
+  event: ScenePointerUpEvent | undefined,
+  context: SceneInteractionHandlerContext,
+): void {
+  if (event?.button === 1) return;
+  if (finishObjectPlacement(context)) return;
+  if (finishObjectResize(context)) return;
+  if (finishPolyVertexDrag(context)) return;
+  if (finishObjectDrag(context)) return;
+  if (finishImageResize(context)) return;
+  if (finishImageDrag(context)) return;
+  if (finishSelectionInteraction(context)) return;
+
+  finishPainting(context);
+}
+
+export function handleScenePointerLeave(
+  context: SceneInteractionHandlerContext,
+): void {
+  context.lastPointerPosRef.current = null;
+  context.fillPreviewCacheRef.current.tileKey = null;
+  context.fillPreviewCacheRef.current.region = [];
+  context.clearOverlay();
+
+  if (finishObjectPlacement(context)) return;
+  if (finishObjectResize(context)) return;
+  if (finishPolyVertexDrag(context)) return;
+  if (finishObjectDrag(context)) return;
+  if (finishImageResize(context)) return;
+  if (finishImageDrag(context)) return;
+  if (finishSelectionInteraction(context)) return;
+
+  finishPainting(context);
+}
\ No newline at end of file
diff --git a/src/components/editor/MapCanvas/use-scene-interaction.ts b/src/components/editor/MapCanvas/use-scene-interaction.ts
index 1081d56..0c88246 100644
--- a/src/components/editor/MapCanvas/use-scene-interaction.ts
+++ b/src/components/editor/MapCanvas/use-scene-interaction.ts
@@ -4,17 +4,21 @@
  * object drag/resize/placement, and polygon drawing.
  */
 
-import { useRef, useEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import type {
   ImageLayer,
   MapObject,
   ObjectType,
-  TileLayer,
   TileRef,
-  EditorState,
   MapSelection,
 } from "@/types";
 import type {
+  FillPreviewCacheState,
+  ObjectInteractionOverride,
+  ScenePointerDownEvent,
+  SceneInteractionHandlerContext,
+  ScenePointerPosition,
+  ScenePointerUpEvent,
   ImageDragAction,
   ImageResizeAction,
   ObjectDragAction,
@@ -32,39 +36,22 @@ import {
   getMapCellPolygon,
   getMapPixelSize,
 } from "@/lib/map-geometry";
-import { computeResize, RESIZE_CURSORS } from "./resize-utils";
 import {
   getImageLayerHandlePositions,
-  pointInImageLayer,
-  resizeImageLayerFromHandle,
 } from "./image-layer-transform";
-import {
-  getBoxObjectHandlePositions,
-  pointHitsObjectBody,
-  isBoxObjectType,
-} from "./object-utils";
 import { getTileImage } from "./texture-cache";
 import { getFillRegion } from "@/lib/terrain";
 import { createTileStamp, isMultiTileStamp } from "@/lib/tile-stamp";
+import {
+  commitPolygonObject,
+  handleScenePointerDown,
+  handleScenePointerLeave,
+  handleScenePointerMove,
+  handleScenePointerUp,
+} from "./scene-interaction-handlers";
 
 export type { UseSceneInteractionReturn } from "@/types/map-canvas";
 
-function getObjectInteractionOverrides(
-  object: MapObject,
-  liveObjectPos: UseSceneInteractionReturn["liveObjectPos"],
-  liveObjectResize: UseSceneInteractionReturn["liveObjectResize"],
-) {
-  const resize =
-    liveObjectResize?.objectId === object.id ? liveObjectResize : null;
-  const drag = liveObjectPos?.objectId === object.id ? liveObjectPos : null;
-  return {
-    x: resize?.x ?? drag?.x,
-    y: resize?.y ?? drag?.y,
-    width: resize?.width,
-    height: resize?.height,
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Hook
 // ---------------------------------------------------------------------------
@@ -107,14 +94,7 @@ export function useSceneInteraction({
 }: UseSceneInteractionParams): UseSceneInteractionReturn {
   const isPaintingRef = useRef(false);
   const lastPointerPosRef = useRef<{ x: number; y: number } | null>(null);
-  const fillPreviewCacheRef = useRef<{
-    tileKey: string | null;
-    layer: TileLayer | null;
-    fillMode: EditorState["fillMode"];
-    selectedTile: TileRef | null;
-    activeFillTerrain: EditorState["activeFillTerrain"];
-    region: [number, number][];
-  }>({
+  const fillPreviewCacheRef = useRef<FillPreviewCacheState>({
     tileKey: null,
     layer: null,
     fillMode,
@@ -567,6 +547,21 @@ export function useSceneInteraction({
     [getInteractiveImageLayer, zoom],
   );
 
+  const getObjectInteractionOverrides = useCallback(
+    (object: MapObject): ObjectInteractionOverride => {
+      const resize =
+        liveObjectResize?.objectId === object.id ? liveObjectResize : null;
+      const drag = liveObjectPos?.objectId === object.id ? liveObjectPos : null;
+      return {
+        x: resize?.x ?? drag?.x,
+        y: resize?.y ?? drag?.y,
+        width: resize?.width,
+        height: resize?.height,
+      };
+    },
+    [liveObjectPos, liveObjectResize],
+  );
+
   const handleHitSize = 12;
   const hitTestResizeHandle = useCallback(
     (globalX: number, globalY: number): ResizeHandle | null => {
@@ -632,26 +627,14 @@ export function useSceneInteraction({
       if (e.key === "Enter" && polygonPoints.length >= 3) {
         e.preventDefault();
         e.stopPropagation();
-        const minX = Math.min(...polygonPoints.map((p) => p.x));
-        const minY = Math.min(...polygonPoints.map((p) => p.y));
-        const maxX = Math.max(...polygonPoints.map((p) => p.x));
-        const maxY = Math.max(...polygonPoints.map((p) => p.y));
-        const relativePoints = polygonPoints.map((p) => ({
-          x: p.x - minX,
-          y: p.y - minY,
-        }));
-        onCreateObject(
-          "polygon",
-          minX,
-          minY,
-          maxX - minX,
-          maxY - minY,
-          relativePoints,
+        commitPolygonObject(
+          polygonPoints,
+          onCreateObject,
+          setIsDrawingPolygon,
+          setPolygonPoints,
+          setPolygonCursorPos,
+          lastClickRef,
         );
-        setIsDrawingPolygon(false);
-        setPolygonPoints([]);
-        setPolygonCursorPos(null);
-        lastClickRef.current = null;
       }
     }
 
@@ -663,814 +646,149 @@ export function useSceneInteraction({
   // Pointer handlers
   // ---------------------------------------------------------------------------
 
-  const handlePointerDown = useCallback(
-    (e: { x: number; y: number; button?: number }) => {
-      // Ignore middle mouse button (1) — reserved for panning
-      // Ignore right mouse button (2) — reserved for the context menu
-      if (e.button === 1 || e.button === 2) return;
-
-      if (currentTool === "select") {
-        // --- Object placement mode ---
-        if (pendingObjectType) {
-          if (pendingObjectType === "polygon") {
-            const px = e.x / zoom;
-            const py = e.y / zoom;
-
-            // Detect double-click manually
-            const now = Date.now();
-            const last = lastClickRef.current;
-            const isDoubleClick =
-              last !== null &&
-              now - last.time < 400 &&
-              Math.hypot(e.x - last.x, e.y - last.y) < 12;
-            lastClickRef.current = { time: now, x: e.x, y: e.y };
-
-            if (!isDrawingPolygon) {
-              setIsDrawingPolygon(true);
-              setPolygonPoints([{ x: px, y: py }]);
-              setPolygonCursorPos({ x: px, y: py });
-            } else {
-              const closePolygon = (pts: { x: number; y: number }[]) => {
-                const minX = Math.min(...pts.map((p) => p.x));
-                const minY = Math.min(...pts.map((p) => p.y));
-                const maxX = Math.max(...pts.map((p) => p.x));
-                const maxY = Math.max(...pts.map((p) => p.y));
-                const relativePoints = pts.map((p) => ({
-                  x: p.x - minX,
-                  y: p.y - minY,
-                }));
-                onCreateObject(
-                  "polygon",
-                  minX,
-                  minY,
-                  maxX - minX,
-                  maxY - minY,
-                  relativePoints,
-                );
-                setIsDrawingPolygon(false);
-                setPolygonPoints([]);
-                setPolygonCursorPos(null);
-                lastClickRef.current = null;
-              };
-
-              const first = polygonPoints[0];
-              const distToFirst = Math.hypot(
-                (px - first.x) * zoom,
-                (py - first.y) * zoom,
-              );
-              if (polygonPoints.length >= 3 && distToFirst < 15) {
-                closePolygon(polygonPoints);
-              } else if (isDoubleClick && polygonPoints.length >= 3) {
-                closePolygon(polygonPoints);
-              } else if (isDoubleClick && polygonPoints.length === 2) {
-                const pts = [...polygonPoints, { x: px, y: py }];
-                closePolygon(pts);
-              } else {
-                setPolygonPoints((prev) => [...prev, { x: px, y: py }]);
-              }
-            }
-            return;
-          }
-          if (pendingObjectType === "point") {
-            const px = e.x / zoom;
-            const py = e.y / zoom;
-            onCreateObject("point", px, py, 0, 0, []);
-            return;
-          }
-          // Rectangle/Ellipse: start click-drag
-          objectPlaceRef.current = {
-            type: pendingObjectType,
-            startX: e.x,
-            startY: e.y,
-          };
-          const px = e.x / zoom;
-          const py = e.y / zoom;
-          setLiveObjectPlace({
-            type: pendingObjectType,
-            x: px,
-            y: py,
-            width: 0,
-            height: 0,
-          });
-          return;
-        }
-
-        // --- Object resize handle hit test ---
-        const activeObj = objects.find((o) => o.id === activeObjectId);
-        if (activeObj && isBoxObjectType(activeObj)) {
-          const handles = getBoxObjectHandlePositions(
-            activeObj,
-            zoom,
-            getObjectInteractionOverrides(
-              activeObj,
-              liveObjectPos,
-              liveObjectResize,
-            ),
-          );
-          const hSize = 8;
-          for (const [handle, cx, cy] of handles) {
-            if (Math.abs(e.x - cx) <= hSize && Math.abs(e.y - cy) <= hSize) {
-              objectResizeRef.current = {
-                objectId: activeObj.id,
-                handle,
-                startX: e.x,
-                startY: e.y,
-                origX: activeObj.x,
-                origY: activeObj.y,
-                origWidth: activeObj.width,
-                origHeight: activeObj.height,
-              };
-              return;
-            }
-          }
-        }
-
-        // --- Polygon vertex drag hit test ---
-        if (activeObj && activeObj.type === "polygon") {
-          const aox = activeObj.x * zoom;
-          const aoy = activeObj.y * zoom;
-          for (let i = 0; i < activeObj.points.length; i++) {
-            const vx = aox + activeObj.points[i].x * zoom;
-            const vy = aoy + activeObj.points[i].y * zoom;
-            if (Math.abs(e.x - vx) <= 8 && Math.abs(e.y - vy) <= 8) {
-              polyVertexDragRef.current = {
-                objectId: activeObj.id,
-                vertexIndex: i,
-                startX: e.x,
-                startY: e.y,
-                origPoint: { ...activeObj.points[i] },
-              };
-              return;
-            }
-          }
-        }
-
-        // --- Object body hit test ---
-        const isObjLayer = objectLayers.some((l) => l.id === activeLayerId);
-        if (isObjLayer) {
-          const layerObjects = objects
-            .filter((o) => o.layerId === activeLayerId && o.visible)
-            .reverse();
-          for (const obj of layerObjects) {
-            if (pointHitsObjectBody(obj, e.x, e.y, zoom)) {
-              const now = Date.now();
-              const lastObjClick = lastObjectClickRef.current;
-              const isObjDoubleClick =
-                lastObjClick !== null &&
-                lastObjClick.objectId === obj.id &&
-                now - lastObjClick.time < 400 &&
-                Math.hypot(e.x - lastObjClick.x, e.y - lastObjClick.y) < 12;
-              lastObjectClickRef.current = {
-                time: now,
-                x: e.x,
-                y: e.y,
-                objectId: obj.id,
-              };
-
-              if (isObjDoubleClick) {
-                onDoubleClickObject?.(obj.id);
-                lastObjectClickRef.current = null;
-                return;
-              }
-
-              onSelectObject(obj.id);
-              if (!obj.locked) {
-                objectDragRef.current = {
-                  objectId: obj.id,
-                  startX: e.x,
-                  startY: e.y,
-                  origX: obj.x,
-                  origY: obj.y,
-                };
-                setIsMoving(true);
-              }
-              return;
-            }
-          }
-          onSelectObject(null);
-          return;
-        }
-
-        // --- Image layer resize handle hit test ---
-        const resizeHandle = hitTestResizeHandle(e.x, e.y);
-        if (resizeHandle) {
-          const resizeImgLayer = imageLayers.find(
-            (l) => l.id === activeLayerId,
-          );
-          if (resizeImgLayer) {
-            imageResizeRef.current = {
-              layerId: resizeImgLayer.id,
-              handle: resizeHandle,
-              startX: e.x,
-              startY: e.y,
-              origX: resizeImgLayer.x,
-              origY: resizeImgLayer.y,
-              origWidth: resizeImgLayer.width,
-              origHeight: resizeImgLayer.height,
-              rotation: resizeImgLayer.rotation ?? 0,
-              flipX: resizeImgLayer.flipX ?? false,
-              flipY: resizeImgLayer.flipY ?? false,
-            };
-            setResizingHandle(resizeHandle);
-            return;
-          }
-        }
-
-        // --- Image layer drag ---
-        const activeImgLayer = imageLayers.find((l) => l.id === activeLayerId);
-        if (activeImgLayer) {
-          const interactiveLayer = getInteractiveImageLayer(activeImgLayer);
-          if (
-            pointInImageLayer(interactiveLayer, {
-              x: e.x / zoom,
-              y: e.y / zoom,
-            })
-          ) {
-            imageDragRef.current = {
-              layerId: activeImgLayer.id,
-              startX: e.x,
-              startY: e.y,
-              origX: interactiveLayer.x,
-              origY: interactiveLayer.y,
-            };
-            setIsMoving(true);
-            return;
-          }
-        }
-
-        const selectionPos = getClampedGridPos(e.x, e.y);
-        if (!selectionPos) return;
-        const gx = selectionPos.x;
-        const gy = selectionPos.y;
-
-        if (
-          renderedSelection &&
-          isInsideSelection(e.x, e.y, renderedSelection)
-        ) {
-          const activeLayer = layers.find((l) => l.id === activeLayerId);
-          const tileSnapshot: { dx: number; dy: number; ref: TileRef }[] = [];
-          if (activeLayer) {
-            for (let dy = 0; dy < renderedSelection.height; dy++) {
-              for (let dx = 0; dx < renderedSelection.width; dx++) {
-                const key = `${renderedSelection.x + dx},${renderedSelection.y + dy}`;
-                const ref = activeLayer.tiles[key];
-                if (ref) tileSnapshot.push({ dx, dy, ref });
-              }
-            }
-          }
-          selActionRef.current = {
-            type: "move",
-            offsetX: gx - renderedSelection.x,
-            offsetY: gy - renderedSelection.y,
-            orig: { ...renderedSelection },
-            tiles: tileSnapshot,
-          };
-          setMoveTilesSnapshot(tileSnapshot);
-          setIsMoving(true);
-          return;
-        }
-
-        // Start drawing a new selection
-        selActionRef.current = { type: "draw", startX: gx, startY: gy };
-        setLiveSelection({ x: gx, y: gy, width: 1, height: 1 });
-        return;
-      }
-
-      const pos = getGridPos(e.x, e.y);
-      if (!pos) return;
-      isPaintingRef.current = true;
-      onPaintTile(pos.x, pos.y);
-    },
-    [
+  const handlerContext = useMemo<SceneInteractionHandlerContext>(
+    () => ({
+      activeLayerId,
+      activeObjectId,
+      clearOverlay,
+      currentTool,
+      drawOverlayPreview,
+      fillPreviewCacheRef,
       getClampedGridPos,
       getGridPos,
-      onPaintTile,
-      currentTool,
-      renderedSelection,
-      isInsideSelection,
-      layers,
-      activeLayerId,
-      imageLayers,
-      zoom,
       getInteractiveImageLayer,
+      getObjectInteractionOverrides,
       hitTestResizeHandle,
-      pendingObjectType,
-      objects,
-      activeObjectId,
+      imageDragRef,
+      imageLayers,
+      imageResizeRef,
+      isDrawingPolygon,
+      isInsideSelection,
+      isPaintingRef,
+      lastClickRef,
+      lastObjectClickRef,
+      lastPointerPosRef,
+      layers,
+      liveImagePos,
+      liveImageResize,
+      liveObjectPlace,
+      liveObjectPos,
+      liveObjectResize,
+      livePolyVertex,
+      liveSelection,
+      mapH,
+      mapW,
+      objectDragRef,
       objectLayers,
+      objectPlaceRef,
+      objects,
+      objectResizeRef,
       onCreateObject,
-      onSelectObject,
       onDoubleClickObject,
-      isDrawingPolygon,
+      onMoveImageLayer,
+      onMoveObject,
+      onMoveTiles,
+      onPaintEnd,
+      onPaintTile,
+      onResizeImageLayer,
+      onResizeObject,
+      onSelectionChange,
+      onSelectObject,
+      onUpdatePolygonPoints,
+      pendingObjectType,
+      polygonCursorPos,
       polygonPoints,
-      liveObjectPos,
-      liveObjectResize,
-    ],
-  );
-
-  const handlePointerMove = useCallback(
-    (e: { x: number; y: number }) => {
-      lastPointerPosRef.current = e;
-      const pos = getGridPos(e.x, e.y);
-      drawOverlayPreview(e, pos);
-
-      if (isDrawingPolygon) {
-        setPolygonCursorPos({ x: e.x / zoom, y: e.y / zoom });
-      }
-
-      if (currentTool === "select") {
-        // Object placement rubber-banding
-        const placeAction = objectPlaceRef.current;
-        if (placeAction) {
-          const startPx = placeAction.startX / zoom;
-          const startPy = placeAction.startY / zoom;
-          const curPx = e.x / zoom;
-          const curPy = e.y / zoom;
-          setLiveObjectPlace({
-            type: placeAction.type,
-            x: Math.min(startPx, curPx),
-            y: Math.min(startPy, curPy),
-            width: Math.abs(curPx - startPx),
-            height: Math.abs(curPy - startPy),
-          });
-          return;
-        }
-
-        // Object resize
-        const objResize = objectResizeRef.current;
-        if (objResize) {
-          const rdx = (e.x - objResize.startX) / zoom;
-          const rdy = (e.y - objResize.startY) / zoom;
-          const result = computeResize(
-            objResize.handle,
-            objResize.origX,
-            objResize.origY,
-            objResize.origWidth,
-            objResize.origHeight,
-            rdx,
-            rdy,
-            shiftKeyRef.current,
-          );
-          setLiveObjectResize({ objectId: objResize.objectId, ...result });
-          return;
-        }
-
-        // Polygon vertex drag
-        const pvDrag = polyVertexDragRef.current;
-        if (pvDrag) {
-          const dx = (e.x - pvDrag.startX) / zoom;
-          const dy = (e.y - pvDrag.startY) / zoom;
-          setLivePolyVertex({
-            objectId: pvDrag.objectId,
-            vertexIndex: pvDrag.vertexIndex,
-            x: pvDrag.origPoint.x + dx,
-            y: pvDrag.origPoint.y + dy,
-          });
-          return;
-        }
-
-        // Object dragging
-        const objDrag = objectDragRef.current;
-        if (objDrag) {
-          const dx = (e.x - objDrag.startX) / zoom;
-          const dy = (e.y - objDrag.startY) / zoom;
-          setLiveObjectPos({
-            objectId: objDrag.objectId,
-            x: Math.round(objDrag.origX + dx),
-            y: Math.round(objDrag.origY + dy),
-          });
-          return;
-        }
-
-        // Image layer resize
-        const resizeAction = imageResizeRef.current;
-        if (resizeAction) {
-          const result = resizeImageLayerFromHandle(
-            {
-              x: resizeAction.origX,
-              y: resizeAction.origY,
-              width: resizeAction.origWidth,
-              height: resizeAction.origHeight,
-              rotation: resizeAction.rotation,
-              flipX: resizeAction.flipX,
-              flipY: resizeAction.flipY,
-            },
-            resizeAction.handle,
-            {
-              x: e.x / zoom,
-              y: e.y / zoom,
-            },
-            shiftKeyRef.current,
-          );
-          setLiveImageResize({ layerId: resizeAction.layerId, ...result });
-          return;
-        }
-
-        // Image layer dragging
-        const imgDrag = imageDragRef.current;
-        if (imgDrag) {
-          const dx = (e.x - imgDrag.startX) / zoom;
-          const dy = (e.y - imgDrag.startY) / zoom;
-          setLiveImagePos({
-            layerId: imgDrag.layerId,
-            x: Math.round(imgDrag.origX + dx),
-            y: Math.round(imgDrag.origY + dy),
-          });
-          return;
-        }
-
-        const action = selActionRef.current;
-        if (!action) {
-          // Hover cursor feedback for image layer resize handles
-          const handle = hitTestResizeHandle(e.x, e.y);
-          setHoveredHandle(handle);
-
-          // Hover cursor feedback for object layer
-          const isObjLayerActive = objectLayers.some(
-            (l) => l.id === activeLayerId,
-          );
-          if (isObjLayerActive && !handle) {
-            let objCursor: string | null = null;
-
-            const activeObj = objects.find((o) => o.id === activeObjectId);
-            if (activeObj && isBoxObjectType(activeObj)) {
-              const objHandles = getBoxObjectHandlePositions(
-                activeObj,
-                zoom,
-                getObjectInteractionOverrides(
-                  activeObj,
-                  liveObjectPos,
-                  liveObjectResize,
-                ),
-              );
-              const hSize = 8;
-              for (const [h, cx, cy] of objHandles) {
-                if (
-                  Math.abs(e.x - cx) <= hSize &&
-                  Math.abs(e.y - cy) <= hSize
-                ) {
-                  objCursor = RESIZE_CURSORS[h];
-                  break;
-                }
-              }
-            }
-
-            if (!objCursor && activeObj && activeObj.type === "polygon") {
-              const aox = activeObj.x * zoom;
-              const aoy = activeObj.y * zoom;
-              for (const pt of activeObj.points) {
-                const vx = aox + pt.x * zoom;
-                const vy = aoy + pt.y * zoom;
-                if (Math.abs(e.x - vx) <= 8 && Math.abs(e.y - vy) <= 8) {
-                  objCursor = "pointer";
-                  break;
-                }
-              }
-            }
-
-            if (!objCursor) {
-              const layerObjects = objects
-                .filter((o) => o.layerId === activeLayerId && o.visible)
-                .reverse();
-              for (const obj of layerObjects) {
-                if (pointHitsObjectBody(obj, e.x, e.y, zoom)) {
-                  objCursor = obj.locked ? "not-allowed" : "move";
-                  break;
-                }
-              }
-            }
-
-            setHoveredObjectCursor(objCursor);
-          } else if (!isObjLayerActive) {
-            setHoveredObjectCursor(null);
-          }
-
-          return;
-        }
-
-        const selectionPos = getClampedGridPos(e.x, e.y);
-        if (!selectionPos) return;
-        const gx = selectionPos.x;
-        const gy = selectionPos.y;
-
-        if (action.type === "draw") {
-          const x1 = Math.min(
-            action.startX,
-            Math.max(0, Math.min(gx, mapW - 1)),
-          );
-          const y1 = Math.min(
-            action.startY,
-            Math.max(0, Math.min(gy, mapH - 1)),
-          );
-          const x2 = Math.max(
-            action.startX,
-            Math.max(0, Math.min(gx, mapW - 1)),
-          );
-          const y2 = Math.max(
-            action.startY,
-            Math.max(0, Math.min(gy, mapH - 1)),
-          );
-          setLiveSelection({
-            x: x1,
-            y: y1,
-            width: x2 - x1 + 1,
-            height: y2 - y1 + 1,
-          });
-        } else if (action.type === "move") {
-          const newX = Math.max(
-            0,
-            Math.min(gx - action.offsetX, mapW - action.orig.width),
-          );
-          const newY = Math.max(
-            0,
-            Math.min(gy - action.offsetY, mapH - action.orig.height),
-          );
-          setLiveSelection({ ...action.orig, x: newX, y: newY });
-        }
-        return;
-      }
-
-      if (!isPaintingRef.current) return;
-      if (currentTool === "fill") return; // fill = single-click only
-      if (!pos) return;
-      onPaintTile(pos.x, pos.y);
-    },
+      polyVertexDragRef,
+      renderedSelection,
+      selActionRef,
+      setHoveredHandle,
+      setHoveredObjectCursor,
+      setIsDrawingPolygon,
+      setIsMoving,
+      setLiveImagePos,
+      setLiveImageResize,
+      setLiveObjectPlace,
+      setLiveObjectPos,
+      setLiveObjectResize,
+      setLivePolyVertex,
+      setLiveSelection,
+      setMoveTilesSnapshot,
+      setPolygonCursorPos,
+      setPolygonPoints,
+      setResizingHandle,
+      shiftKeyRef,
+      zoom,
+    }),
     [
-      getClampedGridPos,
-      getGridPos,
+      activeLayerId,
+      activeObjectId,
+      clearOverlay,
       currentTool,
-      onPaintTile,
       drawOverlayPreview,
-      mapW,
-      mapH,
-      zoom,
+      getClampedGridPos,
+      getGridPos,
+      getInteractiveImageLayer,
+      getObjectInteractionOverrides,
       hitTestResizeHandle,
-      objects,
-      objectLayers,
-      activeLayerId,
-      activeObjectId,
+      imageLayers,
       isDrawingPolygon,
-      liveObjectPos,
-      liveObjectResize,
-    ],
-  );
-
-  const handlePointerUp = useCallback(
-    (e?: { button?: number }) => {
-      if (e?.button === 1) return;
-
-      if (currentTool === "select" && objectPlaceRef.current) {
-        if (
-          liveObjectPlace &&
-          (liveObjectPlace.width > 2 || liveObjectPlace.height > 2)
-        ) {
-          onCreateObject(
-            liveObjectPlace.type,
-            liveObjectPlace.x,
-            liveObjectPlace.y,
-            liveObjectPlace.width,
-            liveObjectPlace.height,
-            [],
-          );
-        }
-        objectPlaceRef.current = null;
-        setLiveObjectPlace(null);
-        return;
-      }
-
-      if (currentTool === "select" && objectResizeRef.current) {
-        if (liveObjectResize) {
-          onResizeObject(
-            liveObjectResize.objectId,
-            liveObjectResize.x,
-            liveObjectResize.y,
-            liveObjectResize.width,
-            liveObjectResize.height,
-          );
-          setLiveObjectResize(null);
-        }
-        objectResizeRef.current = null;
-        return;
-      }
-
-      if (currentTool === "select" && polyVertexDragRef.current) {
-        if (livePolyVertex) {
-          const activeObj = objects.find(
-            (o) => o.id === livePolyVertex.objectId,
-          );
-          if (activeObj) {
-            const newPoints = activeObj.points.map((p, i) =>
-              i === livePolyVertex.vertexIndex
-                ? { x: livePolyVertex.x, y: livePolyVertex.y }
-                : p,
-            );
-            onUpdatePolygonPoints(livePolyVertex.objectId, newPoints);
-          }
-          setLivePolyVertex(null);
-        }
-        polyVertexDragRef.current = null;
-        return;
-      }
-
-      if (currentTool === "select" && objectDragRef.current) {
-        if (liveObjectPos) {
-          onMoveObject(
-            liveObjectPos.objectId,
-            liveObjectPos.x,
-            liveObjectPos.y,
-          );
-          setLiveObjectPos(null);
-        }
-        objectDragRef.current = null;
-        setIsMoving(false);
-        return;
-      }
-
-      if (currentTool === "select" && imageResizeRef.current) {
-        if (liveImageResize) {
-          onResizeImageLayer(
-            liveImageResize.layerId,
-            liveImageResize.x,
-            liveImageResize.y,
-            liveImageResize.width,
-            liveImageResize.height,
-          );
-          setLiveImageResize(null);
-        }
-        imageResizeRef.current = null;
-        setResizingHandle(null);
-        return;
-      }
-
-      if (currentTool === "select" && imageDragRef.current) {
-        if (liveImagePos) {
-          onMoveImageLayer(
-            liveImagePos.layerId,
-            liveImagePos.x,
-            liveImagePos.y,
-          );
-          setLiveImagePos(null);
-        }
-        imageDragRef.current = null;
-        setIsMoving(false);
-        return;
-      }
-
-      if (currentTool === "select" && selActionRef.current) {
-        const action = selActionRef.current;
-        if (action.type === "move" && liveSelection) {
-          const movedX = liveSelection.x !== action.orig.x;
-          const movedY = liveSelection.y !== action.orig.y;
-          if (movedX || movedY) {
-            onMoveTiles(action.orig, liveSelection.x, liveSelection.y);
-          }
-        }
-        onSelectionChange(liveSelection);
-        setLiveSelection(null);
-        setIsMoving(false);
-        setMoveTilesSnapshot(null);
-        selActionRef.current = null;
-        return;
-      }
-
-      isPaintingRef.current = false;
-      onPaintEnd();
-    },
-    [
-      onPaintEnd,
-      currentTool,
-      liveSelection,
-      onSelectionChange,
-      onMoveTiles,
+      isInsideSelection,
+      layers,
       liveImagePos,
-      onMoveImageLayer,
       liveImageResize,
-      onResizeImageLayer,
       liveObjectPlace,
-      onCreateObject,
-      liveObjectResize,
-      onResizeObject,
       liveObjectPos,
-      onMoveObject,
+      liveObjectResize,
       livePolyVertex,
+      liveSelection,
+      mapH,
+      mapW,
+      objectLayers,
       objects,
+      onCreateObject,
+      onDoubleClickObject,
+      onMoveImageLayer,
+      onMoveObject,
+      onMoveTiles,
+      onPaintEnd,
+      onPaintTile,
+      onResizeImageLayer,
+      onResizeObject,
+      onSelectionChange,
+      onSelectObject,
       onUpdatePolygonPoints,
+      pendingObjectType,
+      polygonCursorPos,
+      polygonPoints,
+      renderedSelection,
+      zoom,
     ],
   );
 
-  const handlePointerLeave = useCallback(() => {
-    lastPointerPosRef.current = null;
-    fillPreviewCacheRef.current.tileKey = null;
-    fillPreviewCacheRef.current.region = [];
-    clearOverlay();
+  const handlePointerDown = useCallback(
+    (event: ScenePointerDownEvent) => {
+      handleScenePointerDown(event, handlerContext);
+    },
+    [handlerContext],
+  );
 
-    if (currentTool === "select" && objectPlaceRef.current) {
-      objectPlaceRef.current = null;
-      setLiveObjectPlace(null);
-      return;
-    }
-    if (currentTool === "select" && objectResizeRef.current) {
-      if (liveObjectResize) {
-        onResizeObject(
-          liveObjectResize.objectId,
-          liveObjectResize.x,
-          liveObjectResize.y,
-          liveObjectResize.width,
-          liveObjectResize.height,
-        );
-        setLiveObjectResize(null);
-      }
-      objectResizeRef.current = null;
-      return;
-    }
-    if (currentTool === "select" && polyVertexDragRef.current) {
-      if (livePolyVertex) {
-        const activeObj = objects.find((o) => o.id === livePolyVertex.objectId);
-        if (activeObj) {
-          const newPoints = activeObj.points.map((p, i) =>
-            i === livePolyVertex.vertexIndex
-              ? { x: livePolyVertex.x, y: livePolyVertex.y }
-              : p,
-          );
-          onUpdatePolygonPoints(livePolyVertex.objectId, newPoints);
-        }
-        setLivePolyVertex(null);
-      }
-      polyVertexDragRef.current = null;
-      return;
-    }
-    if (currentTool === "select" && objectDragRef.current) {
-      if (liveObjectPos) {
-        onMoveObject(liveObjectPos.objectId, liveObjectPos.x, liveObjectPos.y);
-        setLiveObjectPos(null);
-      }
-      objectDragRef.current = null;
-      setIsMoving(false);
-      return;
-    }
-    if (currentTool === "select" && imageResizeRef.current) {
-      if (liveImageResize) {
-        onResizeImageLayer(
-          liveImageResize.layerId,
-          liveImageResize.x,
-          liveImageResize.y,
-          liveImageResize.width,
-          liveImageResize.height,
-        );
-        setLiveImageResize(null);
-      }
-      imageResizeRef.current = null;
-      setResizingHandle(null);
-      return;
-    }
-    if (currentTool === "select" && imageDragRef.current) {
-      if (liveImagePos) {
-        onMoveImageLayer(liveImagePos.layerId, liveImagePos.x, liveImagePos.y);
-        setLiveImagePos(null);
-      }
-      imageDragRef.current = null;
-      setIsMoving(false);
-      return;
-    }
-    if (currentTool === "select" && selActionRef.current) {
-      const action = selActionRef.current;
-      if (action.type === "move" && liveSelection) {
-        const movedX = liveSelection.x !== action.orig.x;
-        const movedY = liveSelection.y !== action.orig.y;
-        if (movedX || movedY) {
-          onMoveTiles(action.orig, liveSelection.x, liveSelection.y);
-        }
-      }
-      onSelectionChange(liveSelection);
-      setLiveSelection(null);
-      setIsMoving(false);
-      setMoveTilesSnapshot(null);
-      selActionRef.current = null;
-      return;
-    }
-    if (isPaintingRef.current) {
-      isPaintingRef.current = false;
-      onPaintEnd();
-    }
-  }, [
-    onPaintEnd,
-    currentTool,
-    liveSelection,
-    onSelectionChange,
-    onMoveTiles,
-    liveImagePos,
-    onMoveImageLayer,
-    liveImageResize,
-    onResizeImageLayer,
-    liveObjectPos,
-    onMoveObject,
-    liveObjectResize,
-    onResizeObject,
-    livePolyVertex,
-    objects,
-    onUpdatePolygonPoints,
-    clearOverlay,
-  ]);
+  const handlePointerMove = useCallback(
+    (event: ScenePointerPosition) => {
+      handleScenePointerMove(event, handlerContext);
+    },
+    [handlerContext],
+  );
+
+  const handlePointerUp = useCallback(
+    (event?: ScenePointerUpEvent) => {
+      handleScenePointerUp(event, handlerContext);
+    },
+    [handlerContext],
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    handleScenePointerLeave(handlerContext);
+  }, [handlerContext]);
 
   return {
     overlayCanvasRef,
diff --git a/src/components/editor/MapPanel.tsx b/src/components/editor/MapPanel.tsx
index 3164fc1..5d01fb2 100644
--- a/src/components/editor/MapPanel.tsx
+++ b/src/components/editor/MapPanel.tsx
@@ -5,140 +5,52 @@ import {
   useCallback,
   useSyncExternalStore,
 } from "react";
-import {
-  Plus,
-  ZoomIn,
-  ZoomOut,
-  X,
-  BoxSelect,
-  Paintbrush,
-  PaintBucket,
-  Eraser,
-  Settings,
-  Trash2,
-  RotateCcw,
-  RotateCw,
-  FlipHorizontal2,
-  FlipVertical2,
-  RefreshCw,
-  Scissors,
-  Undo2,
-  Redo2,
-} from "lucide-react";
-import { MapCanvas } from "./MapCanvas";
-import { MapCanvasContextMenuContent } from "./MapPanel/MapCanvasContextMenuContent";
+import { MapPanelDialogs } from "./MapPanel/MapPanelDialogs";
+import { MapPanelTabs } from "./MapPanel/MapPanelTabs";
+import { MapPanelToolbar } from "./MapPanel/MapPanelToolbar";
+import { MapPanelWorkspace } from "./MapPanel/MapPanelWorkspace";
 import { useMapCanvasContextMenu } from "./MapPanel/use-map-canvas-context-menu";
-import type { MapCanvasImperativeHandle } from "@/types/map-canvas";
-import { Button } from "@/components/ui/Button";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/Tabs";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/Select";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/Tooltip";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/DropdownMenu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/AlertDialog";
-import {
-  ContextMenu,
-  ContextMenuItem,
-  ContextMenuContent,
-  ContextMenuTrigger,
-} from "@/components/ui/ContextMenu";
-import { FillTerrainDialog } from "@/components/dialogs/FillTerrainDialog";
-import { MapOptionsDialog } from "@/components/dialogs/MapOptionsDialog";
-import { NewMapDialog } from "@/components/dialogs/NewMapDialog";
-import { NewMapGroupDialog } from "@/components/dialogs/NewMapGroupDialog";
-import { ObjectPropertiesDialogManager } from "@/components/editor/ObjectPropertiesDialogManager";
+import { useMapPanelCanvasActions } from "./MapPanel/use-map-panel-canvas-actions";
+import { useMapPanelClipboardActions } from "./MapPanel/use-map-panel-clipboard-actions";
 import { useEditorStore } from "@/hooks/use-editor-store";
 import { useTextObjectEditing } from "@/hooks/use-text-object-editing";
 import { useCanvasNavigation } from "@/hooks/use-canvas-navigation";
 import {
   generateMapId,
   generateMapGroupId,
-  generateAssetId,
   generateLayerId,
   generateLayerGroupId,
-  generateObjectId,
 } from "@/lib/ids";
-import { getAsset, saveAsset } from "@/lib/db";
 import {
   flattenLayerTree,
   flattenImageLayers,
   flattenObjectLayers,
+  findLastLayerId,
   getAllLayerIds,
   isLayerEffectivelyLocked,
-  findLastLayerId,
 } from "@/lib/layers";
+import { getGeometryForNewMapType } from "@/lib/map-geometry";
+import { zoomStore } from "@/lib/zoom-store";
+import type { MapCanvasImperativeHandle } from "@/types/map-canvas";
 import {
-  BRUSH_SIZES,
+  DEFAULT_NEW_MAP_TYPE,
+  type EditorState,
   type EditorTool,
-  type MapGroupId,
-  type MapId,
-  type LayerId,
+  type ImageLayer,
+  type LayerGroup,
   type LayerGroupId,
-  type TileMapData,
-  type TileLayer,
-  type TileRef,
+  type LayerId,
   type MapGroup,
-  type LayerGroup,
-  type TerrainTile,
-  type MapSelection,
-  type ImageLayer,
-  type MapObject,
+  type MapGroupId,
+  type MapId,
+  type NewMapType,
   type ObjectId,
-  type ObjectType,
   type PropertyValue,
-  DEFAULT_NEW_MAP_TYPE,
-  type NewMapType,
+  type TerrainTile,
+  type TileLayer,
+  type TileMapData,
+  type TileRef,
 } from "@/types";
-import type { OrientAction } from "@/types/map-panel-context-menu";
-import type {
-  ImageLayerClipboard,
-  TileClipboard,
-} from "@/types/editor-helpers";
-import { getGeometryForNewMapType } from "@/lib/map-geometry";
-import { getFillRegion, pickWeightedTile } from "@/lib/terrain";
-import {
-  areTileRefsEqual,
-  createTileStamp,
-  getTileStampRef,
-  isMultiTileStamp,
-} from "@/lib/tile-stamp";
-import { getClipboard, setClipboard } from "@/lib/tile-clipboard";
-import {
-  getImageLayerClipboard,
-  setImageLayerClipboard,
-} from "@/lib/image-layer-clipboard";
-import { setImageLayerEditorContext } from "@/lib/image-layer-editor-context";
-import { setTileEditorContext } from "@/lib/tile-editor-context";
-import {
-  clampTextObjectBounds,
-  getDefaultTextObjectProperties,
-} from "@/lib/text-objects";
-import { zoomStore } from "@/lib/zoom-store";
-import { TEXT_OBJECT_DEFAULTS } from "@/types";
 
 function clampMapDimension(value: number, fallback: number): number {
   if (!Number.isFinite(value)) return fallback;
@@ -154,53 +66,6 @@ function getAdjacentItemId<T extends { id: string }>(
   return items[index + 1]?.id ?? items[index - 1]?.id ?? null;
 }
 
-const IMAGE_LAYER_PASTE_OFFSET = 16;
-
-function cloneArrayBuffer(data: ArrayBuffer): ArrayBuffer {
-  return data.slice(0);
-}
-
-function insertLayerAfter(
-  refId: string,
-  newId: string,
-  topOrder: (LayerId | LayerGroupId)[],
-  groups: LayerGroup[],
-): boolean {
-  const topIdx = (topOrder as string[]).indexOf(refId);
-  if (topIdx !== -1) {
-    topOrder.splice(topIdx + 1, 0, newId as LayerId | LayerGroupId);
-    return true;
-  }
-
-  for (const group of groups) {
-    const idx = (group.childOrder as string[]).indexOf(refId);
-    if (idx !== -1) {
-      group.childOrder.splice(idx + 1, 0, newId as LayerId | LayerGroupId);
-      return true;
-    }
-  }
-
-  return false;
-}
-
-function removeLayerFromOrders(
-  layerId: string,
-  topOrder: (LayerId | LayerGroupId)[],
-  groups: LayerGroup[],
-): void {
-  const removeFromOrder = (order: (LayerId | LayerGroupId)[]) => {
-    const index = (order as string[]).indexOf(layerId);
-    if (index !== -1) {
-      order.splice(index, 1);
-    }
-  };
-
-  removeFromOrder(topOrder);
-  for (const group of groups) {
-    removeFromOrder(group.childOrder);
-  }
-}
-
 export function MapPanel() {
   "use no memo";
 
@@ -213,22 +78,11 @@ export function MapPanel() {
   const projectId = project?.id ?? null;
 
   const containerRef = useRef<HTMLDivElement>(null);
-  /** Track clipboard content so Paste can be enabled for tiles and image layers. */
-  const [hasTileClipboard, setHasTileClipboard] = useState(
-    () => getClipboard() !== null,
-  );
-  const [hasImageLayerClipboard, setHasImageLayerClipboard] = useState(
-    () => getImageLayerClipboard() !== null,
-  );
-  // --- Paint buffer for instant visual feedback ---
-  // Tile changes are written here during a stroke.
-  // The buffer is flushed to the store (single undo step) on pointer-up.
-  // paintBufferVersion is only incremented on commit (pointer-up), not during stroke.
-  const [paintBuffer] = useState(() => new Map<string, TileRef | null>());
-  const [paintBufferVersion, setPaintBufferVersion] = useState(0);
-  // Imperative handle to MapCanvas — bypasses React for per-tile drawing during strokes
   const mapCanvasRef = useRef<MapCanvasImperativeHandle | null>(null);
+  const renameInputRef = useRef<HTMLInputElement>(null);
 
+  const [paintBuffer] = useState(() => new Map<string, TileRef | null>());
+  const [paintBufferVersion, setPaintBufferVersion] = useState(0);
   const [deleteTarget, setDeleteTarget] = useState<{
     type: "map" | "group";
     id: string;
@@ -240,28 +94,29 @@ export function MapPanel() {
   const [newMapName, setNewMapName] = useState("Untitled Map");
   const [newMapWidth, setNewMapWidth] = useState(20);
   const [newMapHeight, setNewMapHeight] = useState(15);
-  const [newMapType, setNewMapType] =
-    useState<NewMapType>(DEFAULT_NEW_MAP_TYPE);
+  const [newMapType, setNewMapType] = useState<NewMapType>(
+    DEFAULT_NEW_MAP_TYPE,
+  );
   const [mapOptionsOpen, setMapOptionsOpen] = useState(false);
   const [fillTerrainDialogOpen, setFillTerrainDialogOpen] = useState(false);
   const [renamingTabId, setRenamingTabId] = useState<MapId | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [propsObjectId, setPropsObjectId] = useState<ObjectId | null>(null);
-  const renameInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     zoomStore.setActiveMap(projectId ? state.activeMapId : null);
   }, [projectId, state.activeMapId]);
 
-  // Ctrl+Wheel zoom and middle-mouse pan
   const handleSetMapZoom = useCallback((newZoom: number) => {
     zoomStore.setMapZoom(newZoom);
   }, []);
+
   useCanvasNavigation(containerRef, mapZoom, handleSetMapZoom);
 
-  // Derived values needed by hooks (computed before early return)
-  const activeMap = project?.maps.find((m) => m.id === state.activeMapId);
-  const activeLayer = project?.layers.find((l) => l.id === state.activeLayerId);
+  const activeMap = project?.maps.find((map) => map.id === state.activeMapId);
+  const activeLayer = project?.layers.find(
+    (layer) => layer.id === state.activeLayerId,
+  );
   const activeLayerEffectivelyLocked =
     !!activeMap &&
     !!activeLayer &&
@@ -297,18 +152,16 @@ export function MapPanel() {
   const activeImageLayer =
     flatImageLayers.find((layer) => layer.id === state.activeLayerId) ?? null;
   const activeObject =
-    (project?.objects ?? []).find(
-      (obj) =>
-        obj.id === state.activeObjectId && obj.layerId === state.activeLayerId,
+    projectObjects.find(
+      (object) =>
+        object.id === state.activeObjectId &&
+        object.layerId === state.activeLayerId,
     ) ?? null;
   const activeObjectLayer = activeObject
-    ? (flatObjectLayers.find((layer) => layer.id === activeObject.layerId) ??
-      null)
+    ? flatObjectLayers.find((layer) => layer.id === activeObject.layerId) ?? null
     : null;
-  const textObjectEditing = useTextObjectEditing(
-    project?.objects ?? [],
-    setState,
-  );
+  const textObjectEditing = useTextObjectEditing(projectObjects, setState);
+
   const {
     contextMenuTileRef,
     hoverTileRef,
@@ -334,1296 +187,74 @@ export function MapPanel() {
     },
   });
 
-  const setExclusiveTileClipboard = useCallback(
-    (data: TileClipboard | null) => {
-      setClipboard(data);
-      setImageLayerClipboard(null);
-    },
-    [],
-  );
-
-  const setExclusiveImageLayerClipboard = useCallback(
-    (data: ImageLayerClipboard | null) => {
-      setImageLayerClipboard(data);
-      setClipboard(null);
-    },
-    [],
-  );
-
-  // Paint tile handler — called by MapCanvas on pointer events.
-  // Paint/erase write to a lightweight buffer for instant rendering;
-  // the buffer is flushed to the store on pointer-up (handlePaintEnd).
-  const handlePaintTile = useCallback(
-    (gx: number, gy: number) => {
-      if (!activeMap || !activeLayer) return;
-      // Check effective lock state (including group inheritance)
-      const effectivelyLocked = isLayerEffectivelyLocked(
-        activeLayer.id,
-        activeMap.layerOrder,
-        project?.layers ?? [],
-        project?.layerGroups ?? [],
-      );
-      if (effectivelyLocked) return;
-
-      const selectedStamp = state.selectedTile
-        ? createTileStamp(state.selectedTile, state.tileSize)
-        : null;
-
-      if (state.currentTool === "paint") {
-        if (!selectedStamp) return;
-
-        if (isMultiTileStamp(selectedStamp)) {
-          for (const cell of selectedStamp.cells) {
-            const tx = gx + cell.dx;
-            const ty = gy + cell.dy;
-            if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles)
-              continue;
-            const ref = { ...cell.ref };
-            paintBuffer.set(`${tx},${ty}`, ref);
-            mapCanvasRef.current?.drawBufferTile(tx, ty, ref);
-          }
-        } else {
-          const brushNum = parseInt(state.brushSize);
-          const ref = selectedStamp.cells[0].ref;
-
-          for (let dy = 0; dy < brushNum; dy++) {
-            for (let dx = 0; dx < brushNum; dx++) {
-              const tx = gx + dx;
-              const ty = gy + dy;
-              if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles)
-                continue;
-              paintBuffer.set(`${tx},${ty}`, { ...ref });
-              // Draw directly onto the paint canvas — no React re-render
-              mapCanvasRef.current?.drawBufferTile(tx, ty, ref);
-            }
-          }
-        }
-      } else if (state.currentTool === "erase") {
-        const brushNum = parseInt(state.brushSize);
-        for (let dy = 0; dy < brushNum; dy++) {
-          for (let dx = 0; dx < brushNum; dx++) {
-            const tx = gx + dx;
-            const ty = gy + dy;
-            if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles)
-              continue;
-            const key = `${tx},${ty}`;
-            const committedRef = activeLayer.tiles[key] ?? null;
-            const bufferedRef = paintBuffer.has(key)
-              ? paintBuffer.get(key)
-              : undefined;
-            const effectiveRef =
-              bufferedRef === undefined ? committedRef : bufferedRef;
-
-            if (effectiveRef === null && committedRef === null) {
-              paintBuffer.delete(key);
-              continue;
-            }
-
-            if (committedRef === null) {
-              paintBuffer.delete(key);
-            } else {
-              paintBuffer.set(key, null);
-            }
-
-            // Clear the active-layer canvas cell so the composite matches the
-            // active layer's buffered state during the drag.
-            mapCanvasRef.current?.eraseBufferTile(tx, ty);
-          }
-        }
-      } else if (state.currentTool === "fill") {
-        const isTerrain = state.fillMode === "fillTerrain";
-        const toFill = getFillRegion({
-          map: activeMap,
-          layer: activeLayer,
-          mapWidth: activeMap.widthInTiles,
-          mapHeight: activeMap.heightInTiles,
-          startX: gx,
-          startY: gy,
-          fillMode: state.fillMode,
-          selectedTile: state.selectedTile,
-          activeFillTerrain: state.activeFillTerrain,
-        });
-
-        if (toFill.length === 0) return;
-
-        // Apply fill — single setState call = one undo step
-        setState((draft) => {
-          const layer = draft.project?.layers.find(
-            (l) => l.id === state.activeLayerId,
-          );
-          if (!layer) return;
-
-          if (isTerrain && state.activeFillTerrain) {
-            // Terrain fill: each position gets a weighted-random tile
-            for (const [x, y] of toFill) {
-              const picked = pickWeightedTile(state.activeFillTerrain);
-              if (picked) {
-                layer.tiles[`${x},${y}`] = {
-                  tilesetId: picked.tilesetId,
-                  sx: picked.sx,
-                  sy: picked.sy,
-                  sw: picked.sw,
-                  sh: picked.sh,
-                };
-              }
-            }
-          } else if (selectedStamp) {
-            // Plain fill: single-tile fills write one tile, multi-tile fills repeat
-            // the selected stamp with alignment anchored to map origin.
-            let changed = false;
-            for (const [x, y] of toFill) {
-              const key = `${x},${y}`;
-              const nextRef = { ...getTileStampRef(selectedStamp, x, y) };
-              if (areTileRefsEqual(layer.tiles[key] ?? null, nextRef)) {
-                continue;
-              }
-              layer.tiles[key] = nextRef;
-              changed = true;
-            }
-
-            if (!changed) return;
-          }
-        });
-      }
-    },
-    [
-      activeMap,
-      activeLayer,
-      state.currentTool,
-      state.selectedTile,
-      state.tileSize,
-      state.brushSize,
-      state.fillMode,
-      state.activeFillTerrain,
-      state.activeLayerId,
-      setState,
-      paintBuffer,
-      project?.layers,
-      project?.layerGroups,
-    ],
-  );
-
-  // Flush paint buffer into a single store update (one undo step per stroke)
-  const handlePaintEnd = useCallback(() => {
-    if (paintBuffer.size === 0) return;
-
-    const entries = Array.from(paintBuffer.entries());
-    paintBuffer.clear();
-
-    setState((draft) => {
-      const layer = draft.project?.layers.find(
-        (l) => l.id === state.activeLayerId,
-      );
-      if (!layer) return;
-      for (const [key, ref] of entries) {
-        if (ref === null) {
-          delete layer.tiles[key];
-        } else {
-          layer.tiles[key] = ref;
-        }
-      }
-    });
-
-    // paintBufferVersion bump redraws the active-layer canvas from committed
-    // state after the buffered stroke is applied.
-    setPaintBufferVersion((v) => v + 1);
-  }, [setState, state.activeLayerId, paintBuffer]);
-
-  const handleSelectionChange = useCallback(
-    (sel: MapSelection | null) => {
-      setState((draft) => {
-        draft.mapSelection = sel;
-      });
-    },
-    [setState],
-  );
-
-  // Move tiles from a source selection rect to a new position on the active layer.
-  // This is a single undo step.
-  const handleMoveTiles = useCallback(
-    (src: MapSelection, destX: number, destY: number) => {
-      setState((draft) => {
-        const layer = draft.project?.layers.find(
-          (l) => l.id === state.activeLayerId,
-        );
-        if (!layer) return;
-
-        // 1. Snapshot all tiles inside the source rect
-        const snapshot: { dx: number; dy: number; ref: TileRef }[] = [];
-        for (let dy = 0; dy < src.height; dy++) {
-          for (let dx = 0; dx < src.width; dx++) {
-            const key = `${src.x + dx},${src.y + dy}`;
-            const ref = layer.tiles[key];
-            if (ref) snapshot.push({ dx, dy, ref: { ...ref } });
-          }
-        }
-
-        // 2. Clear the source rect
-        for (let dy = 0; dy < src.height; dy++) {
-          for (let dx = 0; dx < src.width; dx++) {
-            delete layer.tiles[`${src.x + dx},${src.y + dy}`];
-          }
-        }
-
-        // 3. Write tiles at the destination
-        for (const { dx, dy, ref } of snapshot) {
-          const key = `${destX + dx},${destY + dy}`;
-          layer.tiles[key] = ref;
-        }
-      });
-    },
-    [setState, state.activeLayerId],
-  );
-
-  // Move an image layer to a new pixel position
-  const handleMoveImageLayer = useCallback(
-    (layerId: string, x: number, y: number) => {
-      setState((draft) => {
-        const imgLayer = (draft.project?.imageLayers ?? []).find(
-          (l) => l.id === layerId,
-        );
-        if (imgLayer) {
-          imgLayer.x = x;
-          imgLayer.y = y;
-        }
-      });
-    },
-    [setState],
-  );
-
-  // Resize an image layer to new position and dimensions
-  const handleResizeImageLayer = useCallback(
-    (layerId: string, x: number, y: number, width: number, height: number) => {
-      setState((draft) => {
-        const imgLayer = (draft.project?.imageLayers ?? []).find(
-          (l) => l.id === layerId,
-        );
-        if (imgLayer) {
-          imgLayer.x = x;
-          imgLayer.y = y;
-          imgLayer.width = width;
-          imgLayer.height = height;
-        }
-      });
-    },
-    [setState],
-  );
-
-  // Create a new map object (called from MapCanvas after click-drag placement)
-  const handleCreateObject = useCallback(
-    (
-      type: ObjectType,
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-      points: { x: number; y: number }[],
-    ) => {
-      if (!state.activeLayerId) return;
-      const objectId = generateObjectId();
-      const isText = type === "text";
-      const textBounds = isText
-        ? clampTextObjectBounds(width, height)
-        : { width, height };
-      const objCount = (project?.objects ?? []).filter(
-        (o) => o.layerId === state.activeLayerId,
-      ).length;
-      setState((draft) => {
-        if (!draft.project) return;
-        if (!draft.project.objects) draft.project.objects = [];
-        const newObj: MapObject = {
-          id: objectId,
-          layerId: state.activeLayerId!,
-          name: `${type.charAt(0).toUpperCase() + type.slice(1)} ${objCount + 1}`,
-          type,
-          x,
-          y,
-          width: textBounds.width,
-          height: textBounds.height,
-          rotation: 0,
-          points,
-          visible: true,
-          locked: false,
-          properties: isText ? getDefaultTextObjectProperties() : {},
-        };
-        draft.project.objects.push(newObj);
-        // Add to object layer's objectOrder
-        const layer = (draft.project.objectLayers ?? []).find(
-          (l) => l.id === state.activeLayerId,
-        );
-        if (layer) {
-          layer.objectOrder.push(objectId);
-        }
-        draft.activeObjectId = objectId;
-        draft.pendingObjectType = null;
-      });
-      if (isText) {
-        textObjectEditing.startEditing(objectId, TEXT_OBJECT_DEFAULTS.text);
-      }
-    },
-    [setState, state.activeLayerId, project?.objects, textObjectEditing],
-  );
-
-  // Cancel pending object placement (e.g. Escape during polygon drawing)
-  const handleCancelPendingObject = useCallback(() => {
-    setState((draft) => {
-      draft.pendingObjectType = null;
-    });
-  }, [setState]);
-
-  // Move a map object to a new position
-  const handleMoveObject = useCallback(
-    (objectId: string, x: number, y: number) => {
-      setState((draft) => {
-        const obj = (draft.project?.objects ?? []).find(
-          (o) => o.id === objectId,
-        );
-        if (obj) {
-          obj.x = x;
-          obj.y = y;
-        }
-      });
-    },
-    [setState],
-  );
-
-  // Resize a map object
-  const handleResizeObject = useCallback(
-    (objectId: string, x: number, y: number, width: number, height: number) => {
-      setState((draft) => {
-        const obj = (draft.project?.objects ?? []).find(
-          (o) => o.id === objectId,
-        );
-        if (obj) {
-          const textBounds =
-            obj.type === "text"
-              ? clampTextObjectBounds(width, height)
-              : { width, height };
-          obj.x = x;
-          obj.y = y;
-          obj.width = textBounds.width;
-          obj.height = textBounds.height;
-        }
-      });
-    },
-    [setState],
-  );
-
-  // Update polygon points
-  const handleUpdatePolygonPoints = useCallback(
-    (objectId: string, points: { x: number; y: number }[]) => {
-      setState((draft) => {
-        const obj = (draft.project?.objects ?? []).find(
-          (o) => o.id === objectId,
-        );
-        if (obj) {
-          obj.points = points;
-        }
-      });
-    },
-    [setState],
-  );
-
-  // ---------------------------------------------------------------------------
-  // Open tile in Image Editor
-  // ---------------------------------------------------------------------------
-
-  const handleOpenInImageEditor = useCallback(() => {
-    if (!contextMenuTileRef.current || !activeLayer || !activeMap || !project)
-      return;
-
-    const { x, y } = contextMenuTileRef.current;
-    const tileRef = activeLayer.tiles[`${x},${y}`];
-    if (!tileRef) return;
-
-    // Search both regular and override tilesets
-    const allTilesets = [
-      ...project.tilesets,
-      ...(project.overrideTilesets ?? []),
-    ];
-    const tileset = allTilesets.find((t) => t.id === tileRef.tilesetId);
-    if (!tileset) return;
-
-    setTileEditorContext({
-      tilesetId: tileRef.tilesetId,
-      assetId: tileset.assetId,
-      sx: tileRef.sx,
-      sy: tileRef.sy,
-      sw: tileRef.sw,
-      sh: tileRef.sh,
-      layerId: activeLayer.id,
-      tileX: x,
-      tileY: y,
-    });
-
-    window.dispatchEvent(new CustomEvent("open-image-editor"));
-  }, [contextMenuTileRef, activeLayer, activeMap, project]);
-
-  const handleOpenImageLayerInEditor = useCallback(() => {
-    if (
-      !activeImageLayer ||
-      !hasContextMenuImageLayer ||
-      activeImageLayer.locked
-    )
-      return;
-
-    setImageLayerEditorContext({
-      layerId: activeImageLayer.id,
-      assetId: activeImageLayer.assetId,
-      width: activeImageLayer.width,
-      height: activeImageLayer.height,
-    });
-
-    window.dispatchEvent(new CustomEvent("open-image-editor"));
-  }, [activeImageLayer, hasContextMenuImageLayer]);
-
-  const handleEditInImageEditor = useCallback(() => {
-    if (activeImageLayer) {
-      handleOpenImageLayerInEditor();
-      return;
-    }
-
-    handleOpenInImageEditor();
-  }, [activeImageLayer, handleOpenImageLayerInEditor, handleOpenInImageEditor]);
-
-  // ---------------------------------------------------------------------------
-  // Copy / Cut / Paste tile operations
-  // ---------------------------------------------------------------------------
-
-  /**
-   * Copy tiles to the clipboard.
-   * - If a map selection exists, copies the full selection.
-   * - If called from the context menu with no selection, copies a brush-sized
-   *   region at the right-clicked tile.
-   * - If neither applies (keyboard shortcut, no selection), falls back to
-   *   copying the currently selected tileset tile(s) with the brush size.
-   */
-  const handleCopyTiles = useCallback(
-    (fromContextMenu = false) => {
-      // Priority 1: active map selection
-      if (state.mapSelection && activeLayer) {
-        const sel = state.mapSelection;
-        const tiles: TileClipboard["tiles"] = [];
-        for (let dy = 0; dy < sel.height; dy++) {
-          for (let dx = 0; dx < sel.width; dx++) {
-            const ref = activeLayer.tiles[`${sel.x + dx},${sel.y + dy}`];
-            if (ref) tiles.push({ dx, dy, ref: { ...ref } });
-          }
-        }
-        setExclusiveTileClipboard({
-          tiles,
-          width: sel.width,
-          height: sel.height,
-        });
-        return;
-      }
-
-      // Priority 2: context menu position + brush size
-      if (
-        fromContextMenu &&
-        contextMenuTileRef.current &&
-        activeLayer &&
-        activeMap
-      ) {
-        const { x, y } = contextMenuTileRef.current;
-        const brushNum = parseInt(state.brushSize);
-        const tiles: TileClipboard["tiles"] = [];
-        for (let dy = 0; dy < brushNum; dy++) {
-          for (let dx = 0; dx < brushNum; dx++) {
-            const ref = activeLayer.tiles[`${x + dx},${y + dy}`];
-            if (ref) tiles.push({ dx, dy, ref: { ...ref } });
-          }
-        }
-        setExclusiveTileClipboard({
-          tiles,
-          width: brushNum,
-          height: brushNum,
-        });
-        return;
-      }
-
-      // Priority 3 (keyboard fallback): copy from selected tileset tile
-      if (!fromContextMenu && state.selectedTile) {
-        const stamp = createTileStamp(state.selectedTile, state.tileSize);
-        setExclusiveTileClipboard({
-          tiles: stamp.cells.map((cell) => ({
-            dx: cell.dx,
-            dy: cell.dy,
-            ref: { ...cell.ref },
-          })),
-          width: stamp.width,
-          height: stamp.height,
-        });
-      }
-    },
-    [
-      state.mapSelection,
-      state.brushSize,
-      state.selectedTile,
-      state.tileSize,
-      activeLayer,
-      activeMap,
-      contextMenuTileRef,
-      setExclusiveTileClipboard,
-    ],
-  );
-
-  /**
-   * Cut tiles from the active layer (copy + erase source).
-   * When no selection, uses the brush-sized region at the right-clicked tile.
-   * Not usable without a map/tile context.
-   */
-  const handleCutTiles = useCallback(
-    (fromContextMenu = false) => {
-      if (!activeLayer || !activeMap) return;
-      if (activeLayer.locked) return;
-
-      let region: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-      } | null = null;
-
-      if (state.mapSelection) {
-        region = state.mapSelection;
-      } else if (fromContextMenu && contextMenuTileRef.current) {
-        const brushNum = parseInt(state.brushSize);
-        region = {
-          x: contextMenuTileRef.current.x,
-          y: contextMenuTileRef.current.y,
-          width: brushNum,
-          height: brushNum,
-        };
-      }
-
-      if (!region) return;
-
-      // Snapshot for clipboard
-      const tiles: TileClipboard["tiles"] = [];
-      for (let dy = 0; dy < region.height; dy++) {
-        for (let dx = 0; dx < region.width; dx++) {
-          const ref = activeLayer.tiles[`${region.x + dx},${region.y + dy}`];
-          if (ref) tiles.push({ dx, dy, ref: { ...ref } });
-        }
-      }
-      setExclusiveTileClipboard({
-        tiles,
-        width: region.width,
-        height: region.height,
-      });
-
-      // Erase source
-      const r = region;
-      setState((draft) => {
-        const layer = draft.project?.layers.find(
-          (l) => l.id === state.activeLayerId,
-        );
-        if (!layer) return;
-        for (let dy = 0; dy < r.height; dy++) {
-          for (let dx = 0; dx < r.width; dx++) {
-            delete layer.tiles[`${r.x + dx},${r.y + dy}`];
-          }
-        }
-      });
-    },
-    [
-      activeLayer,
-      activeMap,
-      contextMenuTileRef,
-      state.mapSelection,
-      state.brushSize,
-      state.activeLayerId,
-      setState,
-      setExclusiveTileClipboard,
-    ],
-  );
-
-  /**
-   * Paste clipboard tiles onto the active tile layer.
-   * - Context menu paste: places at the right-clicked tile position.
-   * - Keyboard paste: places at the current selection's top-left, or (0, 0).
-   * After pasting, switches to the select tool and creates a selection over
-   * the pasted region so the result is immediately visible.
-   */
-  const handlePasteTiles = useCallback(
-    (fromContextMenu = false) => {
-      const clipboard = getClipboard();
-      if (!clipboard || !activeMap || !activeLayer) return;
-      if (activeLayer.locked) return;
-
-      const destPos =
-        fromContextMenu && contextMenuTileRef.current
-          ? contextMenuTileRef.current
-          : hoverTileRef.current
-            ? hoverTileRef.current
-            : state.mapSelection
-              ? { x: state.mapSelection.x, y: state.mapSelection.y }
-              : { x: 0, y: 0 };
-
-      setState((draft) => {
-        const layer = draft.project?.layers.find(
-          (l) => l.id === state.activeLayerId,
-        );
-        if (!layer) return;
-        for (const { dx, dy, ref } of clipboard.tiles) {
-          const tx = destPos.x + dx;
-          const ty = destPos.y + dy;
-          if (
-            tx < 0 ||
-            ty < 0 ||
-            tx >= activeMap.widthInTiles ||
-            ty >= activeMap.heightInTiles
-          )
-            continue;
-          layer.tiles[`${tx},${ty}`] = { ...ref };
-        }
-        // Show pasted region as active selection
-        draft.mapSelection = {
-          x: destPos.x,
-          y: destPos.y,
-          width: clipboard.width,
-          height: clipboard.height,
-        };
-        draft.currentTool = "select";
-      });
-    },
-    [
-      activeMap,
-      activeLayer,
-      contextMenuTileRef,
-      hoverTileRef,
-      state.mapSelection,
-      state.activeLayerId,
-      setState,
-    ],
-  );
-
-  const handleCopyImageLayer = useCallback(async () => {
-    if (!activeImageLayer) return;
-
-    const asset = await getAsset(activeImageLayer.assetId);
-    if (!asset) return;
-
-    setExclusiveImageLayerClipboard({
-      name: activeImageLayer.name,
-      x: activeImageLayer.x,
-      y: activeImageLayer.y,
-      width: activeImageLayer.width,
-      height: activeImageLayer.height,
-      rotation: activeImageLayer.rotation ?? 0,
-      flipX: activeImageLayer.flipX ?? false,
-      flipY: activeImageLayer.flipY ?? false,
-      opacity: activeImageLayer.opacity ?? 100,
-      mimeType: asset.mimeType,
-      data: cloneArrayBuffer(asset.data),
-      operation: "copy",
-    });
-  }, [activeImageLayer, setExclusiveImageLayerClipboard]);
-
-  const handleCutImageLayer = useCallback(async () => {
-    if (!activeImageLayer || activeImageLayer.locked) return;
-
-    const asset = await getAsset(activeImageLayer.assetId);
-    if (!asset) return;
-
-    setExclusiveImageLayerClipboard({
-      name: activeImageLayer.name,
-      x: activeImageLayer.x,
-      y: activeImageLayer.y,
-      width: activeImageLayer.width,
-      height: activeImageLayer.height,
-      rotation: activeImageLayer.rotation ?? 0,
-      flipX: activeImageLayer.flipX ?? false,
-      flipY: activeImageLayer.flipY ?? false,
-      opacity: activeImageLayer.opacity ?? 100,
-      mimeType: asset.mimeType,
-      data: cloneArrayBuffer(asset.data),
-      operation: "cut",
-    });
-
-    setState((draft) => {
-      if (!draft.project) return;
-
-      const map = draft.project.maps.find(
-        (entry) => entry.id === state.activeMapId,
-      );
-      if (!map) return;
-
-      const groups = draft.project.layerGroups ?? [];
-      removeLayerFromOrders(activeImageLayer.id, map.layerOrder, groups);
-      draft.project.imageLayers = (draft.project.imageLayers ?? []).filter(
-        (layer) => layer.id !== activeImageLayer.id,
-      );
-
-      if (draft.activeLayerId === activeImageLayer.id) {
-        draft.activeLayerId =
-          findLastLayerId(
-            map.layerOrder,
-            draft.project.layers,
-            groups,
-            draft.project.imageLayers ?? [],
-            draft.project.objectLayers ?? [],
-          ) ?? null;
-      }
-    });
-  }, [
+  const {
+    handleCancelPendingObject,
+    handleCreateObject,
+    handleEditInImageEditor,
+    handleMoveImageLayer,
+    handleMoveObject,
+    handleMoveTiles,
+    handlePaintEnd,
+    handlePaintTile,
+    handleResizeImageLayer,
+    handleResizeObject,
+    handleSelectionChange,
+    handleUpdatePolygonPoints,
+  } = useMapPanelCanvasActions({
     activeImageLayer,
-    setExclusiveImageLayerClipboard,
+    activeLayer,
+    activeMap,
+    contextMenuTileRef,
+    hasContextMenuImageLayer,
+    layerGroups,
+    mapCanvasRef,
+    paintBuffer,
+    project,
+    setPaintBufferVersion,
     setState,
-    state.activeMapId,
-  ]);
-
-  const handlePasteImageLayer = useCallback(async () => {
-    if (!activeMap) return;
-
-    const clipboard = getImageLayerClipboard();
-    if (!clipboard) return;
-
-    const newLayerId = generateLayerId();
-    const newAssetId = generateAssetId();
-    await saveAsset(
-      newAssetId,
-      cloneArrayBuffer(clipboard.data),
-      clipboard.mimeType,
-    );
-
-    setState((draft) => {
-      if (!draft.project) return;
-
-      const map = draft.project.maps.find((entry) => entry.id === activeMap.id);
-      if (!map) return;
-
-      const groups = draft.project.layerGroups ?? [];
-      const nextLayer: ImageLayer = {
-        id: newLayerId,
-        mapId: activeMap.id,
-        name:
-          clipboard.operation === "copy"
-            ? `${clipboard.name} copy`
-            : clipboard.name,
-        type: "image",
-        visible: true,
-        locked: false,
-        assetId: newAssetId,
-        x: clipboard.x + IMAGE_LAYER_PASTE_OFFSET,
-        y: clipboard.y + IMAGE_LAYER_PASTE_OFFSET,
-        width: clipboard.width,
-        height: clipboard.height,
-        rotation: clipboard.rotation,
-        flipX: clipboard.flipX,
-        flipY: clipboard.flipY,
-        opacity: clipboard.opacity,
-      };
-
-      const imageLayers =
-        draft.project.imageLayers ?? (draft.project.imageLayers = []);
-      imageLayers.push(nextLayer);
-
-      const inserted = draft.activeLayerId
-        ? insertLayerAfter(
-            draft.activeLayerId,
-            newLayerId,
-            map.layerOrder,
-            groups,
-          )
-        : false;
-      if (!inserted) {
-        map.layerOrder.push(newLayerId);
-      }
-
-      draft.activeLayerId = newLayerId;
-      draft.currentTool = "select";
-    });
-
-    if (clipboard.operation === "cut") {
-      setExclusiveImageLayerClipboard({
-        ...clipboard,
-        operation: "copy",
-      });
-    }
-  }, [activeMap, setExclusiveImageLayerClipboard, setState]);
-
-  const handleCopySelection = useCallback(
-    async (fromContextMenu = false) => {
-      if (activeImageLayer) {
-        await handleCopyImageLayer();
-        return;
-      }
-
-      handleCopyTiles(fromContextMenu);
-    },
-    [activeImageLayer, handleCopyImageLayer, handleCopyTiles],
-  );
-
-  const handleCutSelection = useCallback(
-    async (fromContextMenu = false) => {
-      if (activeImageLayer) {
-        await handleCutImageLayer();
-        return;
-      }
-
-      handleCutTiles(fromContextMenu);
-    },
-    [activeImageLayer, handleCutImageLayer, handleCutTiles],
-  );
-
-  const handlePasteSelection = useCallback(
-    async (fromContextMenu = false) => {
-      if (getImageLayerClipboard()) {
-        await handlePasteImageLayer();
-        return;
-      }
-
-      handlePasteTiles(fromContextMenu);
-    },
-    [handlePasteImageLayer, handlePasteTiles],
-  );
-
-  const handleDeleteTiles = useCallback(
-    (fromContextMenu = false) => {
-      if (!activeLayer || !activeMap) return;
-
-      const effectivelyLocked = isLayerEffectivelyLocked(
-        activeLayer.id,
-        activeMap.layerOrder,
-        project?.layers ?? [],
-        project?.layerGroups ?? [],
-      );
-      if (effectivelyLocked) return;
-
-      let region: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-      } | null = null;
-
-      if (state.mapSelection) {
-        region = state.mapSelection;
-      } else if (
-        fromContextMenu &&
-        contextMenuTileRef.current &&
-        hasContextMenuTile
-      ) {
-        region = {
-          x: contextMenuTileRef.current.x,
-          y: contextMenuTileRef.current.y,
-          width: 1,
-          height: 1,
-        };
-      }
-
-      if (!region) return;
-
-      const r = region;
-      setState((draft) => {
-        const layer = draft.project?.layers.find(
-          (l) => l.id === state.activeLayerId,
-        );
-        if (!layer) return;
-        for (let dy = 0; dy < r.height; dy++) {
-          for (let dx = 0; dx < r.width; dx++) {
-            delete layer.tiles[`${r.x + dx},${r.y + dy}`];
-          }
-        }
-      });
-    },
-    [
-      activeLayer,
-      activeMap,
-      contextMenuTileRef,
-      hasContextMenuTile,
-      project?.layers,
-      project?.layerGroups,
-      setState,
-      state.mapSelection,
-      state.activeLayerId,
-    ],
-  );
-
-  const handleDeleteImageLayer = useCallback(() => {
-    if (!activeImageLayer || !activeMap || activeImageLayer.locked) return;
-
-    setState((draft) => {
-      if (!draft.project) return;
-
-      const map = draft.project.maps.find((entry) => entry.id === activeMap.id);
-      if (!map) return;
-
-      const groups = draft.project.layerGroups ?? [];
-      removeLayerFromOrders(activeImageLayer.id, map.layerOrder, groups);
-      draft.project.imageLayers = (draft.project.imageLayers ?? []).filter(
-        (layer) => layer.id !== activeImageLayer.id,
-      );
-
-      if (draft.activeLayerId === activeImageLayer.id) {
-        draft.activeLayerId =
-          findLastLayerId(
-            map.layerOrder,
-            draft.project.layers,
-            groups,
-            draft.project.imageLayers ?? [],
-            draft.project.objectLayers ?? [],
-          ) ?? null;
-      }
-
-      draft.mapSelection = null;
-    });
-  }, [activeImageLayer, activeMap, setState]);
-
-  const handleDeleteObject = useCallback(() => {
-    if (!activeObject || !activeObjectLayer) return;
-    if (activeObject.locked || activeObjectLayer.locked) return;
-
-    setState((draft) => {
-      if (!draft.project) return;
-
-      draft.project.objects = (draft.project.objects ?? []).filter(
-        (obj) => obj.id !== activeObject.id,
-      );
-
-      const layer = (draft.project.objectLayers ?? []).find(
-        (entry) => entry.id === activeObject.layerId,
-      );
-      if (layer) {
-        layer.objectOrder = layer.objectOrder.filter(
-          (objectId) => objectId !== activeObject.id,
-        );
-      }
-
-      if (draft.activeObjectId === activeObject.id) {
-        draft.activeObjectId = null;
-      }
-    });
-  }, [activeObject, activeObjectLayer, setState]);
-
-  const handleDeleteSelection = useCallback(
-    (fromContextMenu = false) => {
-      if (state.currentTool !== "select") return;
-
-      if (activeObject) {
-        handleDeleteObject();
-        return;
-      }
-
-      if (activeImageLayer) {
-        handleDeleteImageLayer();
-        return;
-      }
-
-      handleDeleteTiles(fromContextMenu);
-    },
-    [
-      activeImageLayer,
-      activeObject,
-      handleDeleteImageLayer,
-      handleDeleteObject,
-      handleDeleteTiles,
-      state.currentTool,
-    ],
-  );
-
-  // ---------------------------------------------------------------------------
-  // Orientation operations (rotate / flip) on a tile or selection
-  // ---------------------------------------------------------------------------
-
-  const handleOrientTiles = useCallback(
-    (action: OrientAction, fromContextMenu = false) => {
-      if (!activeLayer || !activeMap) return;
-      const effectivelyLocked = isLayerEffectivelyLocked(
-        activeLayer.id,
-        activeMap.layerOrder,
-        project?.layers ?? [],
-        project?.layerGroups ?? [],
-      );
-      if (effectivelyLocked) return;
-
-      let region: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-      } | null = null;
-
-      if (state.mapSelection) {
-        region = state.mapSelection;
-      } else if (fromContextMenu && contextMenuTileRef.current) {
-        region = {
-          x: contextMenuTileRef.current.x,
-          y: contextMenuTileRef.current.y,
-          width: 1,
-          height: 1,
-        };
-      }
-
-      if (!region) return;
-
-      const r = region;
-      const rotated = action === "rotateLeft" || action === "rotateRight";
-      const nextWidth = rotated ? r.height : r.width;
-      const nextHeight = rotated ? r.width : r.height;
-
-      if (
-        r.x + nextWidth > activeMap.widthInTiles ||
-        r.y + nextHeight > activeMap.heightInTiles
-      ) {
-        return;
-      }
-
-      setState((draft) => {
-        const layer = draft.project?.layers.find(
-          (l) => l.id === state.activeLayerId,
-        );
-        if (!layer) return;
-
-        const snapshot: TileClipboard["tiles"] = [];
-        for (let dy = 0; dy < r.height; dy++) {
-          for (let dx = 0; dx < r.width; dx++) {
-            const ref = layer.tiles[`${r.x + dx},${r.y + dy}`];
-            if (ref) snapshot.push({ dx, dy, ref: { ...ref } });
-          }
-        }
-
-        for (let dy = 0; dy < r.height; dy++) {
-          for (let dx = 0; dx < r.width; dx++) {
-            delete layer.tiles[`${r.x + dx},${r.y + dy}`];
-          }
-        }
-
-        for (const { dx, dy, ref } of snapshot) {
-          let nextDx = dx;
-          let nextDy = dy;
-
-          if (action === "rotateLeft") {
-            nextDx = dy;
-            nextDy = r.width - 1 - dx;
-          } else if (action === "rotateRight") {
-            nextDx = r.height - 1 - dy;
-            nextDy = dx;
-          } else if (action === "flipH") {
-            nextDx = r.width - 1 - dx;
-          } else if (action === "flipV") {
-            nextDy = r.height - 1 - dy;
-          }
-
-          const nextRef: TileRef = { ...ref };
-          const rot = nextRef.rotation ?? 0;
-          const fX = nextRef.flipX ?? false;
-          const fY = nextRef.flipY ?? false;
-          if (action === "rotateLeft") {
-            nextRef.rotation = ((rot - 90 + 360) % 360) as 0 | 90 | 180 | 270;
-          } else if (action === "rotateRight") {
-            nextRef.rotation = ((rot + 90) % 360) as 0 | 90 | 180 | 270;
-          } else if (action === "flipH") {
-            nextRef.flipX = !fX;
-          } else if (action === "flipV") {
-            nextRef.flipY = !fY;
-          }
-
-          layer.tiles[`${r.x + nextDx},${r.y + nextDy}`] = nextRef;
-        }
-
-        if (draft.mapSelection) {
-          draft.mapSelection = {
-            x: r.x,
-            y: r.y,
-            width: nextWidth,
-            height: nextHeight,
-          };
-        }
-      });
-    },
-    [
-      activeLayer,
-      activeMap,
-      contextMenuTileRef,
-      state.mapSelection,
-      state.activeLayerId,
-      setState,
-      project?.layers,
-      project?.layerGroups,
-    ],
-  );
-
-  const handleOrientImageLayer = useCallback(
-    (action: OrientAction) => {
-      if (!activeImageLayer || activeImageLayer.locked) return;
-
-      setState((draft) => {
-        const layer = (draft.project?.imageLayers ?? []).find(
-          (entry) => entry.id === activeImageLayer.id,
-        );
-        if (!layer) return;
-
-        const rotation = layer.rotation ?? 0;
-        const flipX = layer.flipX ?? false;
-        const flipY = layer.flipY ?? false;
-
-        if (action === "rotateLeft") {
-          layer.rotation = ((rotation - 90 + 360) % 360) as 0 | 90 | 180 | 270;
-          return;
-        }
-
-        if (action === "rotateRight") {
-          layer.rotation = ((rotation + 90) % 360) as 0 | 90 | 180 | 270;
-          return;
-        }
-
-        if (action === "flipH") {
-          layer.flipX = !flipX;
-          return;
-        }
-
-        if (action === "flipV") {
-          layer.flipY = !flipY;
-        }
-      });
-    },
-    [activeImageLayer, setState],
-  );
-
-  const handleOrientSelection = useCallback(
-    (action: OrientAction, fromContextMenu = false) => {
-      if (activeImageLayer) {
-        handleOrientImageLayer(action);
-        return;
-      }
-
-      handleOrientTiles(action, fromContextMenu);
-    },
-    [activeImageLayer, handleOrientImageLayer, handleOrientTiles],
-  );
-
-  // Keep clipboard availability in sync with module-level clipboard stores.
-  useEffect(() => {
-    const onTileClipboardChange = () => {
-      setHasTileClipboard(getClipboard() !== null);
-    };
-    const onImageClipboardChange = () => {
-      setHasImageLayerClipboard(getImageLayerClipboard() !== null);
-    };
-
-    window.addEventListener("tile-clipboard-change", onTileClipboardChange);
-    window.addEventListener(
-      "image-layer-clipboard-change",
-      onImageClipboardChange,
-    );
-
-    return () => {
-      window.removeEventListener(
-        "tile-clipboard-change",
-        onTileClipboardChange,
-      );
-      window.removeEventListener(
-        "image-layer-clipboard-change",
-        onImageClipboardChange,
-      );
-    };
-  }, []);
+    state,
+    textObjectEditing,
+  });
 
-  // Listen for keyboard shortcut events dispatched by use-keyboard-shortcuts
-  useEffect(() => {
-    const onCopy = () => {
-      void handleCopySelection(false);
-    };
-    const onCut = () => {
-      void handleCutSelection(false);
-    };
-    const onPaste = () => {
-      void handlePasteSelection(false);
-    };
-    const onDeleteSelection = () => {
-      handleDeleteSelection(false);
-    };
-    window.addEventListener("tile-copy", onCopy);
-    window.addEventListener("tile-cut", onCut);
-    window.addEventListener("tile-paste", onPaste);
-    window.addEventListener("map-delete-selection", onDeleteSelection);
-    return () => {
-      window.removeEventListener("tile-copy", onCopy);
-      window.removeEventListener("tile-cut", onCut);
-      window.removeEventListener("tile-paste", onPaste);
-      window.removeEventListener("map-delete-selection", onDeleteSelection);
-    };
-  }, [
+  const {
+    canCopy,
+    canCut,
+    canCutToolbar,
+    canDeleteSelection,
+    canEditInImageEditor,
+    canOrientContextMenu,
+    canOrientToolbar,
+    canPaste,
     handleCopySelection,
     handleCutSelection,
     handleDeleteSelection,
+    handleOrientSelection,
     handlePasteSelection,
-  ]);
-
-  // Derived flags for context menu item enablement
-  const isTileLayerActive = !!activeLayer && !activeLayer.locked;
-  const isImageLayerActive = !!activeImageLayer;
-  const isImageLayerEditable = !!activeImageLayer && !activeImageLayer.locked;
-  const canCopy = !!activeMap && (!!activeLayer || isImageLayerActive);
-  const canCut = !!activeMap && (isTileLayerActive || isImageLayerEditable);
-  const canCutToolbar =
-    isImageLayerEditable || (canCut && !!state.mapSelection);
-  const canPaste =
-    !!activeMap &&
-    (hasImageLayerClipboard || (hasTileClipboard && isTileLayerActive));
-  const canOpenTileInEditor =
-    !!activeMap && !!activeLayer && hasContextMenuTile;
-  const canOpenImageLayerInEditor =
-    !!activeMap &&
-    !!activeImageLayer &&
-    activeImageLayer.visible &&
-    !activeImageLayer.locked &&
-    hasContextMenuImageLayer;
-  const canEditInImageEditor = activeImageLayer
-    ? canOpenImageLayerInEditor
-    : canOpenTileInEditor;
-  const isSelectTool = state.currentTool === "select";
-  const canDeleteObject =
-    isSelectTool &&
-    !!activeObject &&
-    !!activeObjectLayer &&
-    !activeObject.locked &&
-    !activeObjectLayer.locked;
-  const canDeleteImageLayer =
-    isSelectTool && !!activeImageLayer && !activeImageLayer.locked;
-  const canDeleteTiles =
-    isSelectTool &&
-    !!state.mapSelection &&
-    !!activeLayer &&
-    !activeLayerEffectivelyLocked;
-  const canDeleteContextTile =
-    isSelectTool &&
-    !!activeLayer &&
-    !activeLayerEffectivelyLocked &&
-    hasContextMenuTile;
-  const canDeleteSelection =
-    canDeleteObject ||
-    canDeleteImageLayer ||
-    canDeleteTiles ||
-    canDeleteContextTile;
-  const canOrientToolbar =
-    isSelectTool &&
-    ((!!state.mapSelection && isTileLayerActive) ||
-      (!!activeImageLayer && !activeImageLayer.locked));
-  /** Context-menu orient: only when select tool is active AND there's a tile, selection, or active image layer */
-  const canOrientContextMenu =
-    isSelectTool &&
-    ((!!activeLayer &&
-      !activeLayer.locked &&
-      (!!state.mapSelection || hasContextMenuTile)) ||
-      (!!activeImageLayer &&
-        !activeImageLayer.locked &&
-        hasContextMenuImageLayer));
+  } = useMapPanelClipboardActions({
+    activeImageLayer,
+    activeLayer,
+    activeLayerEffectivelyLocked,
+    activeMap,
+    activeObject,
+    activeObjectLayer,
+    contextMenuTileRef,
+    hasContextMenuImageLayer,
+    hasContextMenuTile,
+    hoverTileRef,
+    project,
+    setState,
+    state,
+  });
 
   if (!project) return null;
+  const currentProject = project;
 
-  const activeGroup = project.mapGroups.find(
-    (g) => g.id === state.activeMapGroupId,
+  const activeGroup = currentProject.mapGroups.find(
+    (group) => group.id === state.activeMapGroupId,
   );
-  const groupMaps = project.maps.filter(
-    (m) => m.groupId === state.activeMapGroupId,
+  const groupMaps = currentProject.maps.filter(
+    (map) => map.groupId === state.activeMapGroupId,
   );
-
-  // Create a virtual map with all flattened layer IDs in correct tree order.
-  // getAllLayerIds walks the tree and returns all leaf IDs (tile + image) in order.
   const flatAllIds = activeMap
     ? getAllLayerIds(activeMap.layerOrder, layerGroups)
     : [];
@@ -1643,6 +274,7 @@ export function MapPanel() {
 
   function handleCreateMap() {
     if (!activeGroup) return;
+
     const name = newMapName.trim() || "Untitled Map";
     const mapId = generateMapId();
     const layerId = generateLayerId();
@@ -1650,6 +282,7 @@ export function MapPanel() {
 
     setState((draft) => {
       if (!draft.project) return;
+
       const map: TileMapData = {
         id: mapId,
         name,
@@ -1671,6 +304,7 @@ export function MapPanel() {
         locked: false,
         tiles: {},
       };
+
       draft.project.maps.push(map);
       draft.project.layers.push(layer);
       draft.activeMapId = mapId;
@@ -1684,32 +318,33 @@ export function MapPanel() {
     if (value === "__add__") {
       setAddGroupOpen(true);
       setNewGroupName("");
-    } else {
-      setState((draft) => {
-        draft.activeMapGroupId = value as MapGroupId;
-        const firstInGroup = draft.project?.maps.find(
-          (m) => m.groupId === value,
-        );
-        draft.activeMapId = firstInGroup?.id ?? null;
-        draft.activeLayerId = null;
-        if (firstInGroup) {
-          draft.activeLayerId =
-            findLastLayerId(
-              firstInGroup.layerOrder,
-              draft.project?.layers ?? [],
-              draft.project?.layerGroups ?? [],
-            ) ?? null;
-        }
-      });
+      return;
     }
+
+    setState((draft) => {
+      draft.activeMapGroupId = value as MapGroupId;
+      const firstInGroup = draft.project?.maps.find(
+        (map) => map.groupId === value,
+      );
+      draft.activeMapId = firstInGroup?.id ?? null;
+      draft.activeLayerId = firstInGroup
+        ? (findLastLayerId(
+            firstInGroup.layerOrder,
+            draft.project?.layers ?? [],
+            draft.project?.layerGroups ?? [],
+          ) ?? null)
+        : null;
+    });
   }
 
   function handleCreateGroup() {
     const name = newGroupName.trim();
     if (!name) return;
+
     const id = generateMapGroupId();
     setState((draft) => {
       if (!draft.project) return;
+
       const group: MapGroup = {
         id,
         name,
@@ -1725,29 +360,34 @@ export function MapPanel() {
 
   function handleDeleteConfirm() {
     if (!deleteTarget) return;
+
     if (deleteTarget.type === "map") {
       setState((draft) => {
         if (!draft.project) return;
-        const map = draft.project.maps.find((m) => m.id === deleteTarget.id);
+
+        const map = draft.project.maps.find((entry) => entry.id === deleteTarget.id);
         const mapsInGroup = map
-          ? draft.project.maps.filter((m) => m.groupId === map.groupId)
+          ? draft.project.maps.filter((entry) => entry.groupId === map.groupId)
           : [];
         const nextMapId = getAdjacentItemId(mapsInGroup, deleteTarget.id);
+
         if (map) {
           draft.project.layers = draft.project.layers.filter(
-            (l) => l.mapId !== deleteTarget.id,
+            (layer) => layer.mapId !== deleteTarget.id,
           );
           draft.project.imageLayers = (draft.project.imageLayers ?? []).filter(
-            (l) => l.mapId !== deleteTarget.id,
+            (layer) => layer.mapId !== deleteTarget.id,
           );
         }
+
         draft.project.maps = draft.project.maps.filter(
-          (m) => m.id !== deleteTarget.id,
+          (entry) => entry.id !== deleteTarget.id,
         );
+
         if (draft.activeMapId === deleteTarget.id) {
           draft.activeMapId = nextMapId as MapId | null;
           const nextMap = nextMapId
-            ? draft.project.maps.find((m) => m.id === nextMapId)
+            ? draft.project.maps.find((entry) => entry.id === nextMapId)
             : null;
           draft.activeLayerId = nextMap
             ? (findLastLayerId(
@@ -1761,22 +401,23 @@ export function MapPanel() {
     } else {
       setState((draft) => {
         if (!draft.project) return;
+
         const mapsInGroup = draft.project.maps.filter(
-          (m) => m.groupId === deleteTarget.id,
+          (map) => map.groupId === deleteTarget.id,
         );
         for (const map of mapsInGroup) {
           draft.project.layers = draft.project.layers.filter(
-            (l) => l.mapId !== map.id,
+            (layer) => layer.mapId !== map.id,
           );
           draft.project.imageLayers = (draft.project.imageLayers ?? []).filter(
-            (l) => l.mapId !== map.id,
+            (layer) => layer.mapId !== map.id,
           );
         }
         draft.project.maps = draft.project.maps.filter(
-          (m) => m.groupId !== deleteTarget.id,
+          (map) => map.groupId !== deleteTarget.id,
         );
         draft.project.mapGroups = draft.project.mapGroups.filter(
-          (g) => g.id !== deleteTarget.id,
+          (group) => group.id !== deleteTarget.id,
         );
         if (draft.activeMapGroupId === deleteTarget.id) {
           draft.activeMapGroupId = draft.project.mapGroups[0]?.id ?? null;
@@ -1785,6 +426,7 @@ export function MapPanel() {
         }
       });
     }
+
     setDeleteTarget(null);
   }
 
@@ -1796,41 +438,49 @@ export function MapPanel() {
 
   function commitRename() {
     if (!renamingTabId) return;
+
     const name = renameValue.trim();
     if (name) {
       setState((draft) => {
         if (!draft.project) return;
-        const m = draft.project.maps.find((m) => m.id === renamingTabId);
-        if (m) m.name = name;
+        const map = draft.project.maps.find((entry) => entry.id === renamingTabId);
+        if (map) {
+          map.name = name;
+        }
       });
     }
     setRenamingTabId(null);
   }
 
   function handleDuplicateMap(sourceMap: TileMapData) {
-    if (!project) return;
     const newMapId = generateMapId();
-
-    // Build an ID mapping for layers and layer groups so we can remap layerOrder / childOrder
     const oldLayerIds = new Set<string>();
     const oldGroupIds = new Set<string>();
 
-    // Collect all layer IDs belonging to this map
-    for (const l of project.layers) {
-      if (l.mapId === sourceMap.id) oldLayerIds.add(l.id);
+    for (const layer of currentProject.layers) {
+      if (layer.mapId === sourceMap.id) {
+        oldLayerIds.add(layer.id);
+      }
     }
-    for (const il of project.imageLayers ?? []) {
-      if (il.mapId === sourceMap.id) oldLayerIds.add(il.id);
+    for (const layer of currentProject.imageLayers ?? []) {
+      if (layer.mapId === sourceMap.id) {
+        oldLayerIds.add(layer.id);
+      }
     }
-    for (const g of project.layerGroups ?? []) {
-      if (g.mapId === sourceMap.id) oldGroupIds.add(g.id);
+    for (const group of currentProject.layerGroups ?? []) {
+      if (group.mapId === sourceMap.id) {
+        oldGroupIds.add(group.id);
+      }
     }
 
     const layerIdMap = new Map<string, LayerId>();
     const groupIdMap = new Map<string, LayerGroupId>();
-
-    for (const id of oldLayerIds) layerIdMap.set(id, generateLayerId());
-    for (const id of oldGroupIds) groupIdMap.set(id, generateLayerGroupId());
+    for (const id of oldLayerIds) {
+      layerIdMap.set(id, generateLayerId());
+    }
+    for (const id of oldGroupIds) {
+      groupIdMap.set(id, generateLayerGroupId());
+    }
 
     const remapId = (id: LayerId | LayerGroupId): LayerId | LayerGroupId =>
       (layerIdMap.get(id) ?? groupIdMap.get(id) ?? id) as
@@ -1840,7 +490,6 @@ export function MapPanel() {
     setState((draft) => {
       if (!draft.project) return;
 
-      // Duplicate the map
       const newMap: TileMapData = {
         id: newMapId,
         name: `${sourceMap.name}_copy`,
@@ -1852,72 +501,69 @@ export function MapPanel() {
         heightInTiles: sourceMap.heightInTiles,
         tileSize: sourceMap.tileSize,
         properties: Object.fromEntries(
-          Object.entries(sourceMap.properties ?? {}).map(
-            ([key, propertyValue]) => [key, { ...propertyValue }],
-          ),
+          Object.entries(sourceMap.properties ?? {}).map(([key, value]) => [
+            key,
+            { ...value },
+          ]),
         ),
         layerOrder: sourceMap.layerOrder.map(remapId),
         createdAt: Date.now(),
       };
       draft.project.maps.push(newMap);
 
-      // Duplicate layers
-      for (const l of project.layers) {
-        if (l.mapId !== sourceMap.id) continue;
-        const newLayerId = layerIdMap.get(l.id)!;
+      for (const layer of currentProject.layers) {
+        if (layer.mapId !== sourceMap.id) continue;
+        const newLayerId = layerIdMap.get(layer.id)!;
         const newLayer: TileLayer = {
           id: newLayerId,
           mapId: newMapId,
-          name: l.name,
-          type: l.type,
-          visible: l.visible,
-          locked: l.locked,
-          tiles: { ...l.tiles },
+          name: layer.name,
+          type: layer.type,
+          visible: layer.visible,
+          locked: layer.locked,
+          tiles: { ...layer.tiles },
         };
         draft.project.layers.push(newLayer);
       }
 
-      // Duplicate image layers
-      for (const il of project.imageLayers ?? []) {
-        if (il.mapId !== sourceMap.id) continue;
-        const newLayerId = layerIdMap.get(il.id)!;
+      for (const layer of currentProject.imageLayers ?? []) {
+        if (layer.mapId !== sourceMap.id) continue;
+        const newLayerId = layerIdMap.get(layer.id)!;
         const newImageLayer: ImageLayer = {
           id: newLayerId,
           mapId: newMapId,
-          name: il.name,
+          name: layer.name,
           type: "image",
-          visible: il.visible,
-          locked: il.locked,
-          assetId: il.assetId,
-          x: il.x,
-          y: il.y,
-          width: il.width,
-          height: il.height,
-          rotation: il.rotation ?? 0,
-          flipX: il.flipX ?? false,
-          flipY: il.flipY ?? false,
-          opacity: il.opacity ?? 100,
+          visible: layer.visible,
+          locked: layer.locked,
+          assetId: layer.assetId,
+          x: layer.x,
+          y: layer.y,
+          width: layer.width,
+          height: layer.height,
+          rotation: layer.rotation ?? 0,
+          flipX: layer.flipX ?? false,
+          flipY: layer.flipY ?? false,
+          opacity: layer.opacity ?? 100,
         };
         draft.project.imageLayers.push(newImageLayer);
       }
 
-      // Duplicate layer groups
-      for (const g of project.layerGroups ?? []) {
-        if (g.mapId !== sourceMap.id) continue;
-        const newGroupId = groupIdMap.get(g.id)!;
+      for (const group of currentProject.layerGroups ?? []) {
+        if (group.mapId !== sourceMap.id) continue;
+        const newGroupId = groupIdMap.get(group.id)!;
         const newGroup: LayerGroup = {
           id: newGroupId,
           mapId: newMapId,
-          name: g.name,
-          visible: g.visible,
-          locked: g.locked,
-          expanded: g.expanded,
-          childOrder: g.childOrder.map(remapId),
+          name: group.name,
+          visible: group.visible,
+          locked: group.locked,
+          expanded: group.expanded,
+          childOrder: group.childOrder.map(remapId),
         };
         draft.project.layerGroups.push(newGroup);
       }
 
-      // Switch to the new map
       draft.activeMapId = newMapId;
       draft.activeLayerId =
         findLastLayerId(
@@ -1940,14 +586,15 @@ export function MapPanel() {
 
     setState((draft) => {
       if (!draft.project) return;
-      const map = draft.project.maps.find((m) => m.id === state.activeMapId);
+      const map = draft.project.maps.find((entry) => entry.id === state.activeMapId);
       if (!map) return;
+
       map.widthInTiles = nextWidth;
       map.heightInTiles = nextHeight;
       if (properties) {
         map.properties = properties;
       }
-      // Trim tiles outside bounds
+
       for (const layer of draft.project.layers) {
         if (layer.mapId !== map.id) continue;
         for (const key of Object.keys(layer.tiles)) {
@@ -1969,685 +616,177 @@ export function MapPanel() {
     setMapOptionsOpen(false);
   }
 
-  const toolIcons: Record<EditorTool, typeof Paintbrush> = {
-    select: BoxSelect,
-    paint: Paintbrush,
-    erase: Eraser,
-    fill: PaintBucket,
-  };
+  function handleSelectTool(tool: EditorTool) {
+    setState((draft) => {
+      draft.currentTool = tool;
+    });
+  }
+
+  function handleSelectBrushTool(
+    tool: "paint" | "erase",
+    size: EditorState["brushSize"],
+  ) {
+    setState((draft) => {
+      draft.currentTool = tool;
+      draft.brushSize = size;
+    });
+  }
+
+  function handleSelectFillMode(mode: EditorState["fillMode"]) {
+    setState((draft) => {
+      draft.currentTool = "fill";
+      draft.fillMode = mode;
+    });
+    if (mode === "fillTerrain") {
+      setFillTerrainDialogOpen(true);
+    }
+  }
+
+  function handleSelectMap(mapId: MapId) {
+    setState((draft) => {
+      draft.activeMapId = mapId;
+      const map = draft.project?.maps.find((entry) => entry.id === mapId);
+      draft.activeLayerId = map
+        ? (findLastLayerId(
+            map.layerOrder,
+            draft.project?.layers ?? [],
+            draft.project?.layerGroups ?? [],
+          ) ?? null)
+        : null;
+    });
+  }
+
+  function handleOpenObjectProperties(objectId: ObjectId) {
+    setPropsObjectId(objectId);
+  }
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Map toolbar */}
-      <div className="flex items-center gap-1 px-1 py-0.5 border-b border-border bg-card shrink-0 flex-wrap min-h-10">
-        {/* Select tool (no brush size dropdown) */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={state.currentTool === "select" ? "default" : "ghost"}
-              size="icon"
-              className="h-6 w-6"
-              onMouseDown={() =>
-                setState((draft) => {
-                  draft.currentTool = "select";
-                })
-              }
-            >
-              <BoxSelect className="h-3.5 w-3.5" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Select Tool (S)</TooltipContent>
-        </Tooltip>
-
-        {/* Paint tool with brush size dropdown */}
-        {(["paint"] as EditorTool[]).map((tool) => {
-          const Icon = toolIcons[tool];
-          const isActive = state.currentTool === tool;
-          return (
-            <DropdownMenu key={tool}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant={isActive ? "default" : "ghost"}
-                      size="icon"
-                      className="h-6 w-6"
-                    >
-                      <Icon className="h-3.5 w-3.5" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {tool.charAt(0).toUpperCase() + tool.slice(1)} Tool
-                </TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent>
-                {BRUSH_SIZES.map((size) => (
-                  <DropdownMenuItem
-                    key={size}
-                    onMouseDown={() =>
-                      setState((draft) => {
-                        draft.currentTool = tool;
-                        draft.brushSize = size;
-                      })
-                    }
-                  >
-                    {size}
-                    {state.currentTool === tool &&
-                      state.brushSize === size &&
-                      " ✓"}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          );
-        })}
-
-        {/* Fill tool dropdown — "Fill" (single tile) or "Fill Terrain" (weighted random) */}
-        <DropdownMenu>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant={state.currentTool === "fill" ? "default" : "ghost"}
-                  size="icon"
-                  className="h-6 w-6"
-                >
-                  <PaintBucket className="h-3.5 w-3.5" />
-                </Button>
-              </DropdownMenuTrigger>
-            </TooltipTrigger>
-            <TooltipContent>Fill Tool</TooltipContent>
-          </Tooltip>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              onMouseDown={() =>
-                setState((draft) => {
-                  draft.currentTool = "fill";
-                  draft.fillMode = "fill";
-                })
-              }
-            >
-              Fill
-              {state.currentTool === "fill" &&
-                state.fillMode === "fill" &&
-                " ✓"}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onMouseDown={() => {
-                setState((draft) => {
-                  draft.currentTool = "fill";
-                  draft.fillMode = "fillTerrain";
-                });
-                setFillTerrainDialogOpen(true);
-              }}
-            >
-              Fill Terrain
-              {state.currentTool === "fill" &&
-                state.fillMode === "fillTerrain" &&
-                " ✓"}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        {/* Erase tool with brush size dropdown */}
-        {(["erase"] as EditorTool[]).map((tool) => {
-          const Icon = toolIcons[tool];
-          const isActive = state.currentTool === tool;
-          return (
-            <DropdownMenu key={tool}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant={isActive ? "default" : "ghost"}
-                      size="icon"
-                      className="h-6 w-6"
-                    >
-                      <Icon className="h-3.5 w-3.5" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {tool.charAt(0).toUpperCase() + tool.slice(1)} Tool
-                </TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent>
-                {BRUSH_SIZES.map((size) => (
-                  <DropdownMenuItem
-                    key={size}
-                    onMouseDown={() =>
-                      setState((draft) => {
-                        draft.currentTool = tool;
-                        draft.brushSize = size;
-                      })
-                    }
-                  >
-                    {size}
-                    {state.currentTool === tool &&
-                      state.brushSize === size &&
-                      " ✓"}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          );
-        })}
-
-        <div className="w-px h-4 bg-border mx-0.5" />
-
-        {/* Cut */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6"
-              disabled={!canCutToolbar}
-              onMouseDown={() => {
-                void handleCutSelection(false);
-              }}
-            >
-              <Scissors className="h-3.5 w-3.5" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Cut (Ctrl+X)</TooltipContent>
-        </Tooltip>
-
-        {/* Orientation dropdown — active only when select tool is chosen */}
-        <DropdownMenu>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  disabled={!canOrientToolbar}
-                >
-                  <RefreshCw className="h-3.5 w-3.5" />
-                </Button>
-              </DropdownMenuTrigger>
-            </TooltipTrigger>
-            <TooltipContent>Orientation (select tool only)</TooltipContent>
-          </Tooltip>
-          <DropdownMenuContent>
-            <DropdownMenuItem
-              disabled={!canOrientToolbar}
-              onMouseDown={() => handleOrientSelection("rotateLeft")}
-            >
-              <RotateCcw className="h-3.5 w-3.5" />
-              Rotate Left 90°
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              disabled={!canOrientToolbar}
-              onMouseDown={() => handleOrientSelection("rotateRight")}
-            >
-              <RotateCw className="h-3.5 w-3.5" />
-              Rotate Right 90°
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              disabled={!canOrientToolbar}
-              onMouseDown={() => handleOrientSelection("flipH")}
-            >
-              <FlipHorizontal2 className="h-3.5 w-3.5" />
-              Flip Horizontal
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              disabled={!canOrientToolbar}
-              onMouseDown={() => handleOrientSelection("flipV")}
-            >
-              <FlipVertical2 className="h-3.5 w-3.5" />
-              Flip Vertical
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-        <div className="w-px h-4 bg-border mx-0.5" />
-
-        {/* Zoom */}
-        <div className="flex items-center gap-0.5">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onMouseDown={() => handleZoom(-1)}
-              >
-                <ZoomOut className="h-3.5 w-3.5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Zoom Out</TooltipContent>
-          </Tooltip>
-          <span className="text-[10px] text-muted-foreground w-8 text-center">
-            {Math.round(mapZoom * 100)}%
-          </span>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onMouseDown={() => handleZoom(1)}
-              >
-                <ZoomIn className="h-3.5 w-3.5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Zoom In</TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="w-px h-4 bg-border mx-0.5" />
-
-        {/* Undo / Redo */}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6"
-              disabled={!controls.canBack()}
-              onMouseDown={() => controls.back()}
-            >
-              <Undo2 className="h-3.5 w-3.5" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Undo (Ctrl+Z)</TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6"
-              disabled={!controls.canForward()}
-              onMouseDown={() => controls.forward()}
-            >
-              <Redo2 className="h-3.5 w-3.5" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>Redo (Ctrl+Shift+Z)</TooltipContent>
-        </Tooltip>
-
-        <div className="w-px h-4 bg-border mx-0.5" />
-
-        {/* Map options */}
-        {activeMap && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onMouseDown={() => setMapOptionsOpen(true)}
-              >
-                <Settings className="h-3.5 w-3.5" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Map Options</TooltipContent>
-          </Tooltip>
-        )}
-
-        <span className="text-[10px] text-muted-foreground ml-auto">
-          {state.currentTool === "fill"
-            ? state.fillMode === "fillTerrain"
-              ? "FILL TERRAIN"
-              : "FILL"
-            : state.currentTool.toUpperCase()}{" "}
-          {state.currentTool !== "fill" &&
-            state.currentTool !== "select" &&
-            state.brushSize}
-        </span>
-      </div>
-
-      {/* Group selector + Map tabs + Add */}
-      <div className="flex items-center gap-1 px-1 py-0.5 border-b border-border bg-card shrink-0">
-        <Select
-          value={state.activeMapGroupId ?? ""}
-          onValueChange={handleGroupChange}
-        >
-          <SelectTrigger className="h-6 w-25 text-xs shrink-0">
-            <SelectValue placeholder="Group" />
-          </SelectTrigger>
-          <SelectContent>
-            {project.mapGroups.map((g) => (
-              <SelectItem key={g.id} value={g.id}>
-                {g.name}
-              </SelectItem>
-            ))}
-            <SelectItem value="__add__">+ Add Group</SelectItem>
-          </SelectContent>
-        </Select>
-
-        {activeGroup && project.mapGroups.length > 1 && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6 shrink-0 text-destructive"
-                onMouseDown={() =>
-                  setDeleteTarget({
-                    type: "group",
-                    id: activeGroup.id,
-                    name: activeGroup.name,
-                  })
-                }
-              >
-                <Trash2 className="h-3 w-3" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Delete Group</TooltipContent>
-          </Tooltip>
-        )}
-
-        {groupMaps.length > 0 && (
-          <div className="flex-1 min-w-0 overflow-x-auto">
-            <Tabs
-              value={state.activeMapId ?? ""}
-              onValueChange={(v) =>
-                setState((draft) => {
-                  draft.activeMapId = v as MapId;
-                  const map = draft.project?.maps.find((m) => m.id === v);
-                  if (map) {
-                    draft.activeLayerId =
-                      findLastLayerId(
-                        map.layerOrder,
-                        draft.project?.layers ?? [],
-                        draft.project?.layerGroups ?? [],
-                      ) ?? null;
-                  }
-                })
-              }
-            >
-              <TabsList
-                variant="editor"
-                className="h-8 rounded-none bg-transparent p-0"
-                scrollable
-              >
-                {groupMaps.map((m) => (
-                  <div
-                    key={m.id}
-                    data-state={
-                      state.activeMapId === m.id ? "active" : "inactive"
-                    }
-                    className="group/tab -mb-px flex h-7 min-w-0 items-center rounded-t-sm border border-transparent border-b-border/70 bg-muted/20 text-muted-foreground transition-colors hover:bg-background/70 hover:text-foreground data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground"
-                  >
-                    {renamingTabId === m.id ? (
-                      <input
-                        ref={renameInputRef}
-                        id={`rename-map-tab-${m.id}`}
-                        name={`rename-map-tab-${m.id}`}
-                        aria-label={`Rename map ${m.name}`}
-                        className="mx-1 h-6 w-28 rounded border border-primary bg-background px-1 text-xs"
-                        value={renameValue}
-                        onChange={(e) => setRenameValue(e.target.value)}
-                        onBlur={commitRename}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") commitRename();
-                          if (e.key === "Escape") setRenamingTabId(null);
-                        }}
-                      />
-                    ) : (
-                      <ContextMenu>
-                        <ContextMenuTrigger asChild>
-                          <div>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <div>
-                                  <TabsTrigger
-                                    value={m.id}
-                                    className="h-7 min-w-0 rounded-none px-2 text-[11px]"
-                                    onDoubleClick={() =>
-                                      handleTabDoubleClick(m)
-                                    }
-                                  >
-                                    <span className="max-w-40 truncate">
-                                      {m.name}
-                                    </span>
-                                  </TabsTrigger>
-                                </div>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                Double Click to Rename
-                              </TooltipContent>
-                            </Tooltip>
-                          </div>
-                        </ContextMenuTrigger>
-                        <ContextMenuContent>
-                          <ContextMenuItem
-                            onMouseDown={() => handleTabDoubleClick(m)}
-                          >
-                            Rename
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            onMouseDown={() => handleDuplicateMap(m)}
-                          >
-                            Duplicate
-                          </ContextMenuItem>
-                        </ContextMenuContent>
-                      </ContextMenu>
-                    )}
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <button
-                          type="button"
-                          aria-label={`Close map ${m.name}`}
-                          className="mr-1 flex h-5 w-5 flex-none items-center justify-center rounded-sm text-muted-foreground/80 opacity-0 transition hover:bg-muted hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/tab:opacity-100 group-data-[state=active]/tab:opacity-100 group-hover/tab:pointer-events-auto group-data-[state=active]/tab:pointer-events-auto pointer-events-none"
-                          onMouseDown={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setDeleteTarget({
-                              type: "map",
-                              id: m.id,
-                              name: m.name,
-                            });
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </TooltipTrigger>
-                      <TooltipContent>Close Map</TooltipContent>
-                    </Tooltip>
-                  </div>
-                ))}
-              </TabsList>
-            </Tabs>
-          </div>
-        )}
-
-        {!groupMaps.length && <div className="flex-1" />}
-
-        <Button
-          variant="default"
-          size="sm"
-          className="h-6 px-2 text-[10px] shrink-0"
-          onMouseDown={handleAddMap}
-        >
-          <Plus className="h-3.5 w-3.5" />
-          Add Map
-        </Button>
-      </div>
-
-      {/* Map canvas area */}
-      <ContextMenu>
-        <ContextMenuTrigger asChild>
-          <div
-            ref={containerRef}
-            className="flex-1 overflow-auto min-h-0"
-            onContextMenu={handleMapContextMenu}
-            onMouseMove={handleMapMouseMove}
-            onMouseLeave={clearHoverTile}
-          >
-            {activeMap && flatMap ? (
-              <MapCanvas
-                map={flatMap as TileMapData}
-                layers={flatLayers}
-                tilesets={[
-                  ...project.tilesets,
-                  ...(project.overrideTilesets ?? []),
-                ]}
-                zoom={mapZoom}
-                activeLayerId={state.activeLayerId}
-                currentTool={state.currentTool}
-                fillMode={state.fillMode}
-                activeFillTerrain={state.activeFillTerrain}
-                canPreviewFill={!activeLayerEffectivelyLocked}
-                brushSize={state.brushSize}
-                selectedTileSize={state.tileSize}
-                selectedTile={state.selectedTile}
-                onResizeMap={handleSaveMapOptions}
-                onPaintTile={handlePaintTile}
-                onPaintEnd={handlePaintEnd}
-                paintBuffer={paintBuffer}
-                paintBufferVersion={paintBufferVersion}
-                imperativeRef={mapCanvasRef}
-                mapSelection={state.mapSelection}
-                onSelectionChange={handleSelectionChange}
-                onMoveTiles={handleMoveTiles}
-                imageLayers={flatImageLayers}
-                onMoveImageLayer={handleMoveImageLayer}
-                onResizeImageLayer={handleResizeImageLayer}
-                objectLayers={flatObjectLayers}
-                objects={flatObjects}
-                activeObjectId={state.activeObjectId}
-                pendingObjectType={state.pendingObjectType}
-                onCreateObject={handleCreateObject}
-                onCancelPendingObject={handleCancelPendingObject}
-                onMoveObject={handleMoveObject}
-                onResizeObject={handleResizeObject}
-                onUpdatePolygonPoints={handleUpdatePolygonPoints}
-                onSelectObject={(id) =>
-                  setState((draft) => {
-                    draft.activeObjectId = id as ObjectId | null;
-                  })
-                }
-                editingTextObject={textObjectEditing.editing}
-                onEditingTextChange={textObjectEditing.updateText}
-                onCommitTextEditing={textObjectEditing.commitEditing}
-                onCancelTextEditing={textObjectEditing.cancelEditing}
-                onDoubleClickObject={(id) => {
-                  setPropsObjectId(id as ObjectId);
-                }}
-              />
-            ) : (
-              <div className="flex items-center justify-center h-full text-muted-foreground text-xs">
-                {groupMaps.length === 0
-                  ? "Click + to create a map"
-                  : "Select a map tab"}
-              </div>
-            )}
-          </div>
-        </ContextMenuTrigger>
-        <MapCanvasContextMenuContent
-          canCopy={canCopy}
-          canCut={canCut}
-          canDeleteSelection={canDeleteSelection}
-          canPaste={canPaste}
-          canEditInImageEditor={canEditInImageEditor}
-          canOrientContextMenu={canOrientContextMenu}
-          hasContextMenuObject={hasContextMenuObject}
-          onCopy={() => {
-            void handleCopySelection(true);
-          }}
-          onCut={() => {
-            void handleCutSelection(true);
-          }}
-          onDelete={() => {
-            handleDeleteSelection(true);
-          }}
-          onPaste={() => {
-            void handlePasteSelection(true);
-          }}
-          onEditInImageEditor={handleEditInImageEditor}
-          onEditObjectProperties={() => {
-            if (contextMenuObjectId) {
-              setPropsObjectId(contextMenuObjectId);
-            }
-          }}
-          onOrientSelection={(action) => {
-            handleOrientSelection(action, true);
-          }}
-        />
-      </ContextMenu>
-
-      <NewMapDialog
-        open={addMapOpen}
-        onOpenChange={setAddMapOpen}
-        name={newMapName}
-        width={newMapWidth}
-        height={newMapHeight}
-        mapType={newMapType}
-        tileSize={state.tileSize}
-        onNameChange={setNewMapName}
-        onWidthChange={setNewMapWidth}
-        onHeightChange={setNewMapHeight}
-        onMapTypeChange={setNewMapType}
-        onCreate={handleCreateMap}
+    <div className="flex h-full flex-col">
+      <MapPanelToolbar
+        activeMap={activeMap}
+        canCutToolbar={canCutToolbar}
+        canOrientToolbar={canOrientToolbar}
+        controls={controls}
+        mapZoom={mapZoom}
+        onCut={() => handleCutSelection(false)}
+        onOpenMapOptions={() => setMapOptionsOpen(true)}
+        onOrientSelection={handleOrientSelection}
+        onSelectBrushTool={handleSelectBrushTool}
+        onSelectFillMode={handleSelectFillMode}
+        onSelectTool={handleSelectTool}
+        onZoom={handleZoom}
+        state={state}
+      />
+
+      <MapPanelTabs
+        activeGroup={activeGroup}
+        groupMaps={groupMaps}
+        onAddMap={handleAddMap}
+        onCancelRename={() => setRenamingTabId(null)}
+        onCommitRename={commitRename}
+        onDuplicateMap={handleDuplicateMap}
+        onGroupChange={handleGroupChange}
+        onRequestDeleteTarget={(target) => setDeleteTarget(target)}
+        onSelectMap={handleSelectMap}
+        onStartRenamingTab={handleTabDoubleClick}
+        project={currentProject}
+        renameInputRef={renameInputRef}
+        renameValue={renameValue}
+        renamingTabId={renamingTabId}
+        setRenameValue={setRenameValue}
+        state={state}
+      />
+
+      <MapPanelWorkspace
+        activeLayerEffectivelyLocked={activeLayerEffectivelyLocked}
+        activeMap={activeMap}
+        canCopy={canCopy}
+        canCut={canCut}
+        canDeleteSelection={canDeleteSelection}
+        canEditInImageEditor={canEditInImageEditor}
+        canOrientContextMenu={canOrientContextMenu}
+        canPaste={canPaste}
+        clearHoverTile={clearHoverTile}
+        containerRef={containerRef}
+        contextMenuObjectId={contextMenuObjectId}
+        flatImageLayers={flatImageLayers}
+        flatLayers={flatLayers}
+        flatMap={flatMap}
+        flatObjectLayers={flatObjectLayers}
+        flatObjects={flatObjects}
+        groupMaps={groupMaps}
+        handleMapContextMenu={handleMapContextMenu}
+        handleMapMouseMove={handleMapMouseMove}
+        hasContextMenuObject={hasContextMenuObject}
+        mapCanvasRef={mapCanvasRef}
+        mapZoom={mapZoom}
+        onCancelPendingObject={handleCancelPendingObject}
+        onCopySelection={handleCopySelection}
+        onCreateObject={handleCreateObject}
+        onCutSelection={handleCutSelection}
+        onDeleteSelection={handleDeleteSelection}
+        onEditInImageEditor={handleEditInImageEditor}
+        onMoveImageLayer={handleMoveImageLayer}
+        onMoveObject={handleMoveObject}
+        onMoveTiles={handleMoveTiles}
+        onOpenObjectProperties={handleOpenObjectProperties}
+        onOrientSelection={handleOrientSelection}
+        onPaintEnd={handlePaintEnd}
+        onPaintTile={handlePaintTile}
+        onPasteSelection={handlePasteSelection}
+        onResizeImageLayer={handleResizeImageLayer}
+        onResizeMap={handleSaveMapOptions}
+        onResizeObject={handleResizeObject}
+        onSelectObject={(objectId) => {
+          setState((draft) => {
+            draft.activeObjectId = objectId;
+          });
+        }}
+        onSelectionChange={handleSelectionChange}
+        onUpdatePolygonPoints={handleUpdatePolygonPoints}
+        paintBuffer={paintBuffer}
+        paintBufferVersion={paintBufferVersion}
+        project={currentProject}
+        state={state}
+        textObjectEditing={textObjectEditing}
       />
 
-      {/* Map options dialog */}
-      {activeMap && (
-        <MapOptionsDialog
-          key={`${activeMap.id}-${mapOptionsOpen ? "open" : "closed"}`}
-          open={mapOptionsOpen}
-          onOpenChange={setMapOptionsOpen}
-          map={activeMap}
-          onSave={handleUpdateMapOptions}
-        />
-      )}
-
-      {/* Fill terrain dialog */}
-      <FillTerrainDialog
-        open={fillTerrainDialogOpen}
-        onOpenChange={setFillTerrainDialogOpen}
-        onApply={(tiles: TerrainTile[]) => {
+      <MapPanelDialogs
+        activeMap={activeMap}
+        addGroupOpen={addGroupOpen}
+        addMapOpen={addMapOpen}
+        deleteTarget={deleteTarget}
+        fillTerrainDialogOpen={fillTerrainDialogOpen}
+        mapOptionsOpen={mapOptionsOpen}
+        newGroupName={newGroupName}
+        newMapHeight={newMapHeight}
+        newMapName={newMapName}
+        newMapType={newMapType}
+        newMapWidth={newMapWidth}
+        onApplyTerrainFill={(tiles: TerrainTile[]) => {
           setState((draft) => {
             draft.currentTool = "fill";
             draft.fillMode = "fillTerrain";
             draft.activeFillTerrain = tiles;
           });
         }}
-      />
-
-      <NewMapGroupDialog
-        open={addGroupOpen}
-        onOpenChange={setAddGroupOpen}
-        name={newGroupName}
-        onNameChange={setNewGroupName}
-        onCreate={handleCreateGroup}
-      />
-
-      {/* Delete confirmation */}
-      <AlertDialog
-        open={!!deleteTarget}
-        onOpenChange={(o) => !o && setDeleteTarget(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete {deleteTarget?.type}?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete "{deleteTarget?.name}"
-              {deleteTarget?.type === "group" && " and all maps in it"}. This
-              action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onMouseDown={handleDeleteConfirm}>
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* Object properties dialog (opened by double-clicking object on canvas) */}
-      <ObjectPropertiesDialogManager
-        objectId={propsObjectId}
-        open={!!propsObjectId}
-        onOpenChange={(open) => !open && setPropsObjectId(null)}
+        onCreateGroup={handleCreateGroup}
+        onCreateMap={handleCreateMap}
+        onDeleteConfirm={handleDeleteConfirm}
+        onUpdateMapOptions={handleUpdateMapOptions}
+        propsObjectId={propsObjectId}
+        setAddGroupOpen={setAddGroupOpen}
+        setAddMapOpen={setAddMapOpen}
+        setDeleteTarget={setDeleteTarget}
+        setFillTerrainDialogOpen={setFillTerrainDialogOpen}
+        setMapOptionsOpen={setMapOptionsOpen}
+        setNewGroupName={setNewGroupName}
+        setNewMapHeight={setNewMapHeight}
+        setNewMapName={setNewMapName}
+        setNewMapType={setNewMapType}
+        setNewMapWidth={setNewMapWidth}
+        setPropsObjectId={setPropsObjectId}
+        state={state}
       />
     </div>
   );
diff --git a/src/components/editor/MapPanel/MapPanelDialogs.tsx b/src/components/editor/MapPanel/MapPanelDialogs.tsx
new file mode 100644
index 0000000..ff4a90f
--- /dev/null
+++ b/src/components/editor/MapPanel/MapPanelDialogs.tsx
@@ -0,0 +1,119 @@
+import { FillTerrainDialog } from "@/components/dialogs/FillTerrainDialog";
+import { MapOptionsDialog } from "@/components/dialogs/MapOptionsDialog";
+import { NewMapDialog } from "@/components/dialogs/NewMapDialog";
+import { NewMapGroupDialog } from "@/components/dialogs/NewMapGroupDialog";
+import { ObjectPropertiesDialogManager } from "@/components/editor/ObjectPropertiesDialogManager";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/AlertDialog";
+import type { MapPanelDialogsProps } from "@/types/map-panel";
+
+export function MapPanelDialogs({
+  activeMap,
+  addGroupOpen,
+  addMapOpen,
+  deleteTarget,
+  fillTerrainDialogOpen,
+  mapOptionsOpen,
+  newGroupName,
+  newMapHeight,
+  newMapName,
+  newMapType,
+  newMapWidth,
+  onApplyTerrainFill,
+  onCreateGroup,
+  onCreateMap,
+  onDeleteConfirm,
+  onUpdateMapOptions,
+  propsObjectId,
+  setAddGroupOpen,
+  setAddMapOpen,
+  setDeleteTarget,
+  setFillTerrainDialogOpen,
+  setMapOptionsOpen,
+  setNewGroupName,
+  setNewMapHeight,
+  setNewMapName,
+  setNewMapType,
+  setNewMapWidth,
+  setPropsObjectId,
+  state,
+}: MapPanelDialogsProps) {
+  return (
+    <>
+      <NewMapDialog
+        open={addMapOpen}
+        onOpenChange={setAddMapOpen}
+        name={newMapName}
+        width={newMapWidth}
+        height={newMapHeight}
+        mapType={newMapType}
+        tileSize={state.tileSize}
+        onNameChange={setNewMapName}
+        onWidthChange={setNewMapWidth}
+        onHeightChange={setNewMapHeight}
+        onMapTypeChange={setNewMapType}
+        onCreate={onCreateMap}
+      />
+
+      {activeMap && (
+        <MapOptionsDialog
+          key={`${activeMap.id}-${mapOptionsOpen ? "open" : "closed"}`}
+          open={mapOptionsOpen}
+          onOpenChange={setMapOptionsOpen}
+          map={activeMap}
+          onSave={onUpdateMapOptions}
+        />
+      )}
+
+      <FillTerrainDialog
+        open={fillTerrainDialogOpen}
+        onOpenChange={setFillTerrainDialogOpen}
+        onApply={onApplyTerrainFill}
+      />
+
+      <NewMapGroupDialog
+        open={addGroupOpen}
+        onOpenChange={setAddGroupOpen}
+        name={newGroupName}
+        onNameChange={setNewGroupName}
+        onCreate={onCreateGroup}
+      />
+
+      <AlertDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {deleteTarget?.type}?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete "{deleteTarget?.name}"
+              {deleteTarget?.type === "group" && " and all maps in it"}. This
+              action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onMouseDown={onDeleteConfirm}>
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <ObjectPropertiesDialogManager
+        objectId={propsObjectId}
+        open={!!propsObjectId}
+        onOpenChange={(open) => !open && setPropsObjectId(null)}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/MapPanel/MapPanelTabs.tsx b/src/components/editor/MapPanel/MapPanelTabs.tsx
new file mode 100644
index 0000000..6616992
--- /dev/null
+++ b/src/components/editor/MapPanel/MapPanelTabs.tsx
@@ -0,0 +1,180 @@
+import { Plus, Trash2, X } from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/ContextMenu";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/Tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import type { MapPanelTabsProps } from "@/types/map-panel";
+
+export function MapPanelTabs({
+  activeGroup,
+  groupMaps,
+  onAddMap,
+  onCancelRename,
+  onCommitRename,
+  onDuplicateMap,
+  onGroupChange,
+  onRequestDeleteTarget,
+  onSelectMap,
+  onStartRenamingTab,
+  project,
+  renameInputRef,
+  renameValue,
+  renamingTabId,
+  setRenameValue,
+  state,
+}: MapPanelTabsProps) {
+  return (
+    <div className="flex shrink-0 items-center gap-1 border-b border-border bg-card px-1 py-0.5">
+      <Select
+        value={state.activeMapGroupId ?? ""}
+        onValueChange={onGroupChange}
+      >
+        <SelectTrigger className="h-6 w-25 shrink-0 text-xs">
+          <SelectValue placeholder="Group" />
+        </SelectTrigger>
+        <SelectContent>
+          {project.mapGroups.map((group) => (
+            <SelectItem key={group.id} value={group.id}>
+              {group.name}
+            </SelectItem>
+          ))}
+          <SelectItem value="__add__">+ Add Group</SelectItem>
+        </SelectContent>
+      </Select>
+
+      {activeGroup && project.mapGroups.length > 1 && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6 shrink-0 text-destructive"
+              onMouseDown={() =>
+                onRequestDeleteTarget({
+                  type: "group",
+                  id: activeGroup.id,
+                  name: activeGroup.name,
+                })
+              }
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Delete Group</TooltipContent>
+        </Tooltip>
+      )}
+
+      {groupMaps.length > 0 && (
+        <div className="min-w-0 flex-1 overflow-x-auto">
+          <Tabs
+            value={state.activeMapId ?? ""}
+            onValueChange={(value) => onSelectMap(value as never)}
+          >
+            <TabsList
+              variant="editor"
+              className="h-8 rounded-none bg-transparent p-0"
+              scrollable
+            >
+              {groupMaps.map((map) => (
+                <div
+                  key={map.id}
+                  data-state={state.activeMapId === map.id ? "active" : "inactive"}
+                  className="group/tab -mb-px flex h-7 min-w-0 items-center rounded-t-sm border border-transparent border-b-border/70 bg-muted/20 text-muted-foreground transition-colors hover:bg-background/70 hover:text-foreground data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground"
+                >
+                  {renamingTabId === map.id ? (
+                    <input
+                      ref={renameInputRef}
+                      id={`rename-map-tab-${map.id}`}
+                      name={`rename-map-tab-${map.id}`}
+                      aria-label={`Rename map ${map.name}`}
+                      className="mx-1 h-6 w-28 rounded border border-primary bg-background px-1 text-xs"
+                      value={renameValue}
+                      onChange={(event) => setRenameValue(event.target.value)}
+                      onBlur={onCommitRename}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") onCommitRename();
+                        if (event.key === "Escape") onCancelRename();
+                      }}
+                    />
+                  ) : (
+                    <ContextMenu>
+                      <ContextMenuTrigger asChild>
+                        <div>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <div>
+                                <TabsTrigger
+                                  value={map.id}
+                                  className="h-7 min-w-0 rounded-none px-2 text-[11px]"
+                                  onDoubleClick={() => onStartRenamingTab(map)}
+                                >
+                                  <span className="max-w-40 truncate">{map.name}</span>
+                                </TabsTrigger>
+                              </div>
+                            </TooltipTrigger>
+                            <TooltipContent>Double Click to Rename</TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </ContextMenuTrigger>
+                      <ContextMenuContent>
+                        <ContextMenuItem onMouseDown={() => onStartRenamingTab(map)}>
+                          Rename
+                        </ContextMenuItem>
+                        <ContextMenuItem onMouseDown={() => onDuplicateMap(map)}>
+                          Duplicate
+                        </ContextMenuItem>
+                      </ContextMenuContent>
+                    </ContextMenu>
+                  )}
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        aria-label={`Close map ${map.name}`}
+                        className="pointer-events-none mr-1 flex h-5 w-5 flex-none items-center justify-center rounded-sm text-muted-foreground/80 opacity-0 transition hover:bg-muted hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/tab:pointer-events-auto group-hover/tab:opacity-100 group-data-[state=active]/tab:pointer-events-auto group-data-[state=active]/tab:opacity-100"
+                        onMouseDown={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          onRequestDeleteTarget({
+                            type: "map",
+                            id: map.id,
+                            name: map.name,
+                          });
+                        }}
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Close Map</TooltipContent>
+                  </Tooltip>
+                </div>
+              ))}
+            </TabsList>
+          </Tabs>
+        </div>
+      )}
+
+      {!groupMaps.length && <div className="flex-1" />}
+
+      <Button
+        variant="default"
+        size="sm"
+        className="h-6 shrink-0 px-2 text-[10px]"
+        onMouseDown={onAddMap}
+      >
+        <Plus className="h-3.5 w-3.5" />
+        Add Map
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/MapPanel/MapPanelToolbar.tsx b/src/components/editor/MapPanel/MapPanelToolbar.tsx
new file mode 100644
index 0000000..26201c1
--- /dev/null
+++ b/src/components/editor/MapPanel/MapPanelToolbar.tsx
@@ -0,0 +1,342 @@
+import {
+  BoxSelect,
+  Eraser,
+  FlipHorizontal2,
+  FlipVertical2,
+  Paintbrush,
+  PaintBucket,
+  Redo2,
+  RefreshCw,
+  RotateCcw,
+  RotateCw,
+  Scissors,
+  Settings,
+  Undo2,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/DropdownMenu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { BRUSH_SIZES } from "@/types";
+import type { MapPanelToolbarProps } from "@/types/map-panel";
+
+const brushTools = ["paint"] as const;
+const eraseTools = ["erase"] as const;
+const toolIcons = {
+  select: BoxSelect,
+  paint: Paintbrush,
+  erase: Eraser,
+  fill: PaintBucket,
+} as const;
+
+export function MapPanelToolbar({
+  activeMap,
+  canCutToolbar,
+  canOrientToolbar,
+  controls,
+  mapZoom,
+  onCut,
+  onOpenMapOptions,
+  onOrientSelection,
+  onSelectBrushTool,
+  onSelectFillMode,
+  onSelectTool,
+  onZoom,
+  state,
+}: MapPanelToolbarProps) {
+  return (
+    <div className="flex min-h-10 shrink-0 flex-wrap items-center gap-1 border-b border-border bg-card px-1 py-0.5">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={state.currentTool === "select" ? "default" : "ghost"}
+            size="icon"
+            className="h-6 w-6"
+            onMouseDown={() => onSelectTool("select")}
+          >
+            <BoxSelect className="h-3.5 w-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Select Tool (S)</TooltipContent>
+      </Tooltip>
+
+      {brushTools.map((tool) => {
+        const Icon = toolIcons[tool];
+        const isActive = state.currentTool === tool;
+
+        return (
+          <DropdownMenu key={tool}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={isActive ? "default" : "ghost"}
+                    size="icon"
+                    className="h-6 w-6"
+                  >
+                    <Icon className="h-3.5 w-3.5" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                {tool.charAt(0).toUpperCase() + tool.slice(1)} Tool
+              </TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent>
+              {BRUSH_SIZES.map((size) => (
+                <DropdownMenuItem
+                  key={size}
+                  onMouseDown={() => onSelectBrushTool(tool, size)}
+                >
+                  {size}
+                  {state.currentTool === tool && state.brushSize === size && " ✓"}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      })}
+
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant={state.currentTool === "fill" ? "default" : "ghost"}
+                size="icon"
+                className="h-6 w-6"
+              >
+                <PaintBucket className="h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Fill Tool</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent>
+          <DropdownMenuItem onMouseDown={() => onSelectFillMode("fill")}>
+            Fill
+            {state.currentTool === "fill" && state.fillMode === "fill" && " ✓"}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onMouseDown={() => onSelectFillMode("fillTerrain")}
+          >
+            Fill Terrain
+            {state.currentTool === "fill" &&
+              state.fillMode === "fillTerrain" &&
+              " ✓"}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {eraseTools.map((tool) => {
+        const Icon = toolIcons[tool];
+        const isActive = state.currentTool === tool;
+
+        return (
+          <DropdownMenu key={tool}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={isActive ? "default" : "ghost"}
+                    size="icon"
+                    className="h-6 w-6"
+                  >
+                    <Icon className="h-3.5 w-3.5" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>
+                {tool.charAt(0).toUpperCase() + tool.slice(1)} Tool
+              </TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent>
+              {BRUSH_SIZES.map((size) => (
+                <DropdownMenuItem
+                  key={size}
+                  onMouseDown={() => onSelectBrushTool(tool, size)}
+                >
+                  {size}
+                  {state.currentTool === tool && state.brushSize === size && " ✓"}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      })}
+
+      <div className="mx-0.5 h-4 w-px bg-border" />
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            disabled={!canCutToolbar}
+            onMouseDown={() => {
+              void onCut();
+            }}
+          >
+            <Scissors className="h-3.5 w-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Cut (Ctrl+X)</TooltipContent>
+      </Tooltip>
+
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                disabled={!canOrientToolbar}
+              >
+                <RefreshCw className="h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>Orientation (select tool only)</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent>
+          <DropdownMenuItem
+            disabled={!canOrientToolbar}
+            onMouseDown={() => onOrientSelection("rotateLeft")}
+          >
+            <RotateCcw className="h-3.5 w-3.5" />
+            Rotate Left 90°
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!canOrientToolbar}
+            onMouseDown={() => onOrientSelection("rotateRight")}
+          >
+            <RotateCw className="h-3.5 w-3.5" />
+            Rotate Right 90°
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            disabled={!canOrientToolbar}
+            onMouseDown={() => onOrientSelection("flipH")}
+          >
+            <FlipHorizontal2 className="h-3.5 w-3.5" />
+            Flip Horizontal
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!canOrientToolbar}
+            onMouseDown={() => onOrientSelection("flipV")}
+          >
+            <FlipVertical2 className="h-3.5 w-3.5" />
+            Flip Vertical
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div className="mx-0.5 h-4 w-px bg-border" />
+
+      <div className="flex items-center gap-0.5">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onMouseDown={() => onZoom(-1)}
+            >
+              <ZoomOut className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Zoom Out</TooltipContent>
+        </Tooltip>
+        <span className="w-8 text-center text-[10px] text-muted-foreground">
+          {Math.round(mapZoom * 100)}%
+        </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onMouseDown={() => onZoom(1)}
+            >
+              <ZoomIn className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Zoom In</TooltipContent>
+        </Tooltip>
+      </div>
+
+      <div className="mx-0.5 h-4 w-px bg-border" />
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            disabled={!controls.canBack()}
+            onMouseDown={() => controls.back()}
+          >
+            <Undo2 className="h-3.5 w-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Undo (Ctrl+Z)</TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            disabled={!controls.canForward()}
+            onMouseDown={() => controls.forward()}
+          >
+            <Redo2 className="h-3.5 w-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Redo (Ctrl+Shift+Z)</TooltipContent>
+      </Tooltip>
+
+      <div className="mx-0.5 h-4 w-px bg-border" />
+
+      {activeMap && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onMouseDown={onOpenMapOptions}
+            >
+              <Settings className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Map Options</TooltipContent>
+        </Tooltip>
+      )}
+
+      <span className="ml-auto text-[10px] text-muted-foreground">
+        {state.currentTool === "fill"
+          ? state.fillMode === "fillTerrain"
+            ? "FILL TERRAIN"
+            : "FILL"
+          : state.currentTool.toUpperCase()}{" "}
+        {state.currentTool !== "fill" &&
+          state.currentTool !== "select" &&
+          state.brushSize}
+      </span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/MapPanel/MapPanelWorkspace.tsx b/src/components/editor/MapPanel/MapPanelWorkspace.tsx
new file mode 100644
index 0000000..e2663d1
--- /dev/null
+++ b/src/components/editor/MapPanel/MapPanelWorkspace.tsx
@@ -0,0 +1,155 @@
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+} from "@/components/ui/ContextMenu";
+import { MapCanvas } from "@/components/editor/MapCanvas";
+import { MapCanvasContextMenuContent } from "./MapCanvasContextMenuContent";
+import type { MapPanelWorkspaceProps } from "@/types/map-panel";
+import type { ObjectId, TileMapData } from "@/types";
+
+export function MapPanelWorkspace({
+  activeLayerEffectivelyLocked,
+  activeMap,
+  canCopy,
+  canCut,
+  canDeleteSelection,
+  canEditInImageEditor,
+  canOrientContextMenu,
+  canPaste,
+  clearHoverTile,
+  containerRef,
+  contextMenuObjectId,
+  flatImageLayers,
+  flatLayers,
+  flatMap,
+  flatObjectLayers,
+  flatObjects,
+  groupMaps,
+  handleMapContextMenu,
+  handleMapMouseMove,
+  hasContextMenuObject,
+  mapCanvasRef,
+  mapZoom,
+  onCancelPendingObject,
+  onCopySelection,
+  onCreateObject,
+  onCutSelection,
+  onDeleteSelection,
+  onEditInImageEditor,
+  onMoveImageLayer,
+  onMoveObject,
+  onMoveTiles,
+  onOpenObjectProperties,
+  onOrientSelection,
+  onPaintEnd,
+  onPaintTile,
+  onPasteSelection,
+  onResizeImageLayer,
+  onResizeMap,
+  onResizeObject,
+  onSelectObject,
+  onSelectionChange,
+  onUpdatePolygonPoints,
+  paintBuffer,
+  paintBufferVersion,
+  project,
+  state,
+  textObjectEditing,
+}: MapPanelWorkspaceProps) {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          ref={containerRef}
+          className="min-h-0 flex-1 overflow-auto"
+          onContextMenu={handleMapContextMenu}
+          onMouseMove={handleMapMouseMove}
+          onMouseLeave={clearHoverTile}
+        >
+          {activeMap && flatMap ? (
+            <MapCanvas
+              map={flatMap as TileMapData}
+              layers={flatLayers}
+              tilesets={[
+                ...project.tilesets,
+                ...(project.overrideTilesets ?? []),
+              ]}
+              zoom={mapZoom}
+              activeLayerId={state.activeLayerId}
+              currentTool={state.currentTool}
+              fillMode={state.fillMode}
+              activeFillTerrain={state.activeFillTerrain}
+              canPreviewFill={!activeLayerEffectivelyLocked}
+              brushSize={state.brushSize}
+              selectedTileSize={state.tileSize}
+              selectedTile={state.selectedTile}
+              onResizeMap={onResizeMap}
+              onPaintTile={onPaintTile}
+              onPaintEnd={onPaintEnd}
+              paintBuffer={paintBuffer}
+              paintBufferVersion={paintBufferVersion}
+              imperativeRef={mapCanvasRef}
+              mapSelection={state.mapSelection}
+              onSelectionChange={onSelectionChange}
+              onMoveTiles={onMoveTiles}
+              imageLayers={flatImageLayers}
+              onMoveImageLayer={onMoveImageLayer}
+              onResizeImageLayer={onResizeImageLayer}
+              objectLayers={flatObjectLayers}
+              objects={flatObjects}
+              activeObjectId={state.activeObjectId}
+              pendingObjectType={state.pendingObjectType}
+              onCreateObject={onCreateObject}
+              onCancelPendingObject={onCancelPendingObject}
+              onMoveObject={onMoveObject}
+              onResizeObject={onResizeObject}
+              onUpdatePolygonPoints={onUpdatePolygonPoints}
+              onSelectObject={(id) => onSelectObject(id as ObjectId | null)}
+              editingTextObject={textObjectEditing.editing}
+              onEditingTextChange={textObjectEditing.updateText}
+              onCommitTextEditing={textObjectEditing.commitEditing}
+              onCancelTextEditing={textObjectEditing.cancelEditing}
+              onDoubleClickObject={(id) => onOpenObjectProperties(id as ObjectId)}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+              {groupMaps.length === 0
+                ? "Click + to create a map"
+                : "Select a map tab"}
+            </div>
+          )}
+        </div>
+      </ContextMenuTrigger>
+      <MapCanvasContextMenuContent
+        canCopy={canCopy}
+        canCut={canCut}
+        canDeleteSelection={canDeleteSelection}
+        canPaste={canPaste}
+        canEditInImageEditor={canEditInImageEditor}
+        canOrientContextMenu={canOrientContextMenu}
+        hasContextMenuObject={hasContextMenuObject}
+        onCopy={() => {
+          void onCopySelection(true);
+        }}
+        onCut={() => {
+          void onCutSelection(true);
+        }}
+        onDelete={() => {
+          onDeleteSelection(true);
+        }}
+        onPaste={() => {
+          void onPasteSelection(true);
+        }}
+        onEditInImageEditor={onEditInImageEditor}
+        onEditObjectProperties={() => {
+          if (contextMenuObjectId) {
+            onOpenObjectProperties(contextMenuObjectId);
+          }
+        }}
+        onOrientSelection={(action) => {
+          onOrientSelection(action, true);
+        }}
+      />
+    </ContextMenu>
+  );
+}
\ No newline at end of file
diff --git a/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts b/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts
new file mode 100644
index 0000000..6e7d38d
--- /dev/null
+++ b/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts
@@ -0,0 +1,531 @@
+import { useCallback } from "react";
+import {
+  generateObjectId,
+} from "@/lib/ids";
+import {
+  areTileRefsEqual,
+  createTileStamp,
+  getTileStampRef,
+  isMultiTileStamp,
+} from "@/lib/tile-stamp";
+import { getFillRegion, pickWeightedTile } from "@/lib/terrain";
+import {
+  clampTextObjectBounds,
+  getDefaultTextObjectProperties,
+} from "@/lib/text-objects";
+import { setImageLayerEditorContext } from "@/lib/image-layer-editor-context";
+import { setTileEditorContext } from "@/lib/tile-editor-context";
+import { isLayerEffectivelyLocked } from "@/lib/layers";
+import type { MapCanvasProps } from "@/types/map-canvas";
+import type {
+  MapObject,
+  ObjectType,
+  TileRef,
+} from "@/types";
+import { TEXT_OBJECT_DEFAULTS as textObjectDefaults } from "@/types";
+import type {
+  MapPanelCanvasActionParams,
+  MapPanelCanvasActionResult,
+} from "@/types/map-panel";
+
+export function useMapPanelCanvasActions({
+  activeImageLayer,
+  activeLayer,
+  activeMap,
+  contextMenuTileRef,
+  hasContextMenuImageLayer,
+  layerGroups,
+  mapCanvasRef,
+  paintBuffer,
+  project,
+  setPaintBufferVersion,
+  setState,
+  state,
+  textObjectEditing,
+}: MapPanelCanvasActionParams): MapPanelCanvasActionResult {
+  const handlePaintTile = useCallback(
+    (gx: number, gy: number) => {
+      if (!activeMap || !activeLayer) return;
+
+      const effectivelyLocked = isLayerEffectivelyLocked(
+        activeLayer.id,
+        activeMap.layerOrder,
+        project?.layers ?? [],
+        layerGroups,
+      );
+      if (effectivelyLocked) return;
+
+      const selectedStamp = state.selectedTile
+        ? createTileStamp(state.selectedTile, state.tileSize)
+        : null;
+
+      if (state.currentTool === "paint") {
+        if (!selectedStamp) return;
+
+        if (isMultiTileStamp(selectedStamp)) {
+          for (const cell of selectedStamp.cells) {
+            const tx = gx + cell.dx;
+            const ty = gy + cell.dy;
+            if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles) {
+              continue;
+            }
+
+            const ref = { ...cell.ref };
+            paintBuffer.set(`${tx},${ty}`, ref);
+            mapCanvasRef.current?.drawBufferTile(tx, ty, ref);
+          }
+        } else {
+          const brushNum = parseInt(state.brushSize);
+          const ref = selectedStamp.cells[0].ref;
+
+          for (let dy = 0; dy < brushNum; dy++) {
+            for (let dx = 0; dx < brushNum; dx++) {
+              const tx = gx + dx;
+              const ty = gy + dy;
+              if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles) {
+                continue;
+              }
+
+              paintBuffer.set(`${tx},${ty}`, { ...ref });
+              mapCanvasRef.current?.drawBufferTile(tx, ty, ref);
+            }
+          }
+        }
+
+        return;
+      }
+
+      if (state.currentTool === "erase") {
+        const brushNum = parseInt(state.brushSize);
+
+        for (let dy = 0; dy < brushNum; dy++) {
+          for (let dx = 0; dx < brushNum; dx++) {
+            const tx = gx + dx;
+            const ty = gy + dy;
+            if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles) {
+              continue;
+            }
+
+            const key = `${tx},${ty}`;
+            const committedRef = activeLayer.tiles[key] ?? null;
+            const bufferedRef = paintBuffer.has(key)
+              ? paintBuffer.get(key)
+              : undefined;
+            const effectiveRef =
+              bufferedRef === undefined ? committedRef : bufferedRef;
+
+            if (effectiveRef === null && committedRef === null) {
+              paintBuffer.delete(key);
+              continue;
+            }
+
+            if (committedRef === null) {
+              paintBuffer.delete(key);
+            } else {
+              paintBuffer.set(key, null);
+            }
+
+            mapCanvasRef.current?.eraseBufferTile(tx, ty);
+          }
+        }
+
+        return;
+      }
+
+      if (state.currentTool !== "fill") {
+        return;
+      }
+
+      const isTerrain = state.fillMode === "fillTerrain";
+      const toFill = getFillRegion({
+        map: activeMap,
+        layer: activeLayer,
+        mapWidth: activeMap.widthInTiles,
+        mapHeight: activeMap.heightInTiles,
+        startX: gx,
+        startY: gy,
+        fillMode: state.fillMode,
+        selectedTile: state.selectedTile,
+        activeFillTerrain: state.activeFillTerrain,
+      });
+
+      if (toFill.length === 0) return;
+
+      setState((draft) => {
+        const layer = draft.project?.layers.find(
+          (candidate) => candidate.id === state.activeLayerId,
+        );
+        if (!layer) return;
+
+        if (isTerrain && state.activeFillTerrain) {
+          for (const [x, y] of toFill) {
+            const picked = pickWeightedTile(state.activeFillTerrain);
+            if (!picked) continue;
+
+            layer.tiles[`${x},${y}`] = {
+              tilesetId: picked.tilesetId,
+              sx: picked.sx,
+              sy: picked.sy,
+              sw: picked.sw,
+              sh: picked.sh,
+            };
+          }
+
+          return;
+        }
+
+        if (!selectedStamp) return;
+
+        let changed = false;
+        for (const [x, y] of toFill) {
+          const key = `${x},${y}`;
+          const nextRef = { ...getTileStampRef(selectedStamp, x, y) };
+          if (areTileRefsEqual(layer.tiles[key] ?? null, nextRef)) {
+            continue;
+          }
+
+          layer.tiles[key] = nextRef;
+          changed = true;
+        }
+
+        if (!changed) return;
+      });
+    },
+    [
+      activeLayer,
+      activeMap,
+      layerGroups,
+      mapCanvasRef,
+      paintBuffer,
+      project?.layers,
+      setState,
+      state.activeFillTerrain,
+      state.activeLayerId,
+      state.brushSize,
+      state.currentTool,
+      state.fillMode,
+      state.selectedTile,
+      state.tileSize,
+    ],
+  );
+
+  const handlePaintEnd = useCallback(() => {
+    if (paintBuffer.size === 0) return;
+
+    const entries = Array.from(paintBuffer.entries());
+    paintBuffer.clear();
+
+    setState((draft) => {
+      const layer = draft.project?.layers.find(
+        (candidate) => candidate.id === state.activeLayerId,
+      );
+      if (!layer) return;
+
+      for (const [key, ref] of entries) {
+        if (ref === null) {
+          delete layer.tiles[key];
+        } else {
+          layer.tiles[key] = ref;
+        }
+      }
+    });
+
+    setPaintBufferVersion((value) => value + 1);
+  }, [paintBuffer, setPaintBufferVersion, setState, state.activeLayerId]);
+
+  const handleSelectionChange = useCallback(
+    (selection: Parameters<MapCanvasProps["onSelectionChange"]>[0]) => {
+      setState((draft) => {
+        draft.mapSelection = selection;
+      });
+    },
+    [setState],
+  );
+
+  const handleMoveTiles = useCallback(
+    (
+      source: Parameters<MapCanvasProps["onMoveTiles"]>[0],
+      destX: Parameters<MapCanvasProps["onMoveTiles"]>[1],
+      destY: Parameters<MapCanvasProps["onMoveTiles"]>[2],
+    ) => {
+      setState((draft) => {
+        const layer = draft.project?.layers.find(
+          (candidate) => candidate.id === state.activeLayerId,
+        );
+        if (!layer) return;
+
+        const snapshot: { dx: number; dy: number; ref: TileRef }[] = [];
+        for (let dy = 0; dy < source.height; dy++) {
+          for (let dx = 0; dx < source.width; dx++) {
+            const key = `${source.x + dx},${source.y + dy}`;
+            const ref = layer.tiles[key];
+            if (ref) {
+              snapshot.push({ dx, dy, ref: { ...ref } });
+            }
+          }
+        }
+
+        for (let dy = 0; dy < source.height; dy++) {
+          for (let dx = 0; dx < source.width; dx++) {
+            delete layer.tiles[`${source.x + dx},${source.y + dy}`];
+          }
+        }
+
+        for (const { dx, dy, ref } of snapshot) {
+          layer.tiles[`${destX + dx},${destY + dy}`] = ref;
+        }
+      });
+    },
+    [setState, state.activeLayerId],
+  );
+
+  const handleMoveImageLayer = useCallback(
+    (
+      layerId: Parameters<MapCanvasProps["onMoveImageLayer"]>[0],
+      x: Parameters<MapCanvasProps["onMoveImageLayer"]>[1],
+      y: Parameters<MapCanvasProps["onMoveImageLayer"]>[2],
+    ) => {
+      setState((draft) => {
+        const imageLayer = (draft.project?.imageLayers ?? []).find(
+          (candidate) => candidate.id === layerId,
+        );
+        if (!imageLayer) return;
+
+        imageLayer.x = x;
+        imageLayer.y = y;
+      });
+    },
+    [setState],
+  );
+
+  const handleResizeImageLayer = useCallback(
+    (
+      layerId: Parameters<MapCanvasProps["onResizeImageLayer"]>[0],
+      x: Parameters<MapCanvasProps["onResizeImageLayer"]>[1],
+      y: Parameters<MapCanvasProps["onResizeImageLayer"]>[2],
+      width: Parameters<MapCanvasProps["onResizeImageLayer"]>[3],
+      height: Parameters<MapCanvasProps["onResizeImageLayer"]>[4],
+    ) => {
+      setState((draft) => {
+        const imageLayer = (draft.project?.imageLayers ?? []).find(
+          (candidate) => candidate.id === layerId,
+        );
+        if (!imageLayer) return;
+
+        imageLayer.x = x;
+        imageLayer.y = y;
+        imageLayer.width = width;
+        imageLayer.height = height;
+      });
+    },
+    [setState],
+  );
+
+  const handleCreateObject = useCallback(
+    (
+      type: ObjectType,
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      points: { x: number; y: number }[],
+    ) => {
+      const activeLayerId = state.activeLayerId;
+      if (!activeLayerId) return;
+
+      const objectId = generateObjectId();
+      const isText = type === "text";
+      const textBounds = isText
+        ? clampTextObjectBounds(width, height)
+        : { width, height };
+      const objectCount = (project?.objects ?? []).filter(
+        (object) => object.layerId === activeLayerId,
+      ).length;
+
+      setState((draft) => {
+        if (!draft.project) return;
+        if (!draft.project.objects) {
+          draft.project.objects = [];
+        }
+
+        const newObject: MapObject = {
+          id: objectId,
+          layerId: activeLayerId,
+          name: `${type.charAt(0).toUpperCase() + type.slice(1)} ${objectCount + 1}`,
+          type,
+          x,
+          y,
+          width: textBounds.width,
+          height: textBounds.height,
+          rotation: 0,
+          points,
+          visible: true,
+          locked: false,
+          properties: isText ? getDefaultTextObjectProperties() : {},
+        };
+
+        draft.project.objects.push(newObject);
+
+        const layer = (draft.project.objectLayers ?? []).find(
+          (candidate) => candidate.id === activeLayerId,
+        );
+        if (layer) {
+          layer.objectOrder.push(objectId);
+        }
+
+        draft.activeObjectId = objectId;
+        draft.pendingObjectType = null;
+      });
+
+      if (isText) {
+        textObjectEditing.startEditing(objectId, textObjectDefaults.text);
+      }
+    },
+    [project?.objects, setState, state.activeLayerId, textObjectEditing],
+  );
+
+  const handleCancelPendingObject = useCallback(() => {
+    setState((draft) => {
+      draft.pendingObjectType = null;
+    });
+  }, [setState]);
+
+  const handleMoveObject = useCallback(
+    (
+      objectId: Parameters<MapCanvasProps["onMoveObject"]>[0],
+      x: Parameters<MapCanvasProps["onMoveObject"]>[1],
+      y: Parameters<MapCanvasProps["onMoveObject"]>[2],
+    ) => {
+      setState((draft) => {
+        const object = (draft.project?.objects ?? []).find(
+          (candidate) => candidate.id === objectId,
+        );
+        if (!object) return;
+
+        object.x = x;
+        object.y = y;
+      });
+    },
+    [setState],
+  );
+
+  const handleResizeObject = useCallback(
+    (
+      objectId: Parameters<MapCanvasProps["onResizeObject"]>[0],
+      x: Parameters<MapCanvasProps["onResizeObject"]>[1],
+      y: Parameters<MapCanvasProps["onResizeObject"]>[2],
+      width: Parameters<MapCanvasProps["onResizeObject"]>[3],
+      height: Parameters<MapCanvasProps["onResizeObject"]>[4],
+    ) => {
+      setState((draft) => {
+        const object = (draft.project?.objects ?? []).find(
+          (candidate) => candidate.id === objectId,
+        );
+        if (!object) return;
+
+        const textBounds =
+          object.type === "text"
+            ? clampTextObjectBounds(width, height)
+            : { width, height };
+        object.x = x;
+        object.y = y;
+        object.width = textBounds.width;
+        object.height = textBounds.height;
+      });
+    },
+    [setState],
+  );
+
+  const handleUpdatePolygonPoints = useCallback(
+    (
+      objectId: Parameters<MapCanvasProps["onUpdatePolygonPoints"]>[0],
+      points: Parameters<MapCanvasProps["onUpdatePolygonPoints"]>[1],
+    ) => {
+      setState((draft) => {
+        const object = (draft.project?.objects ?? []).find(
+          (candidate) => candidate.id === objectId,
+        );
+        if (!object) return;
+
+        object.points = points;
+      });
+    },
+    [setState],
+  );
+
+  const handleOpenInImageEditor = useCallback(() => {
+    if (!contextMenuTileRef.current || !activeLayer || !activeMap || !project) {
+      return;
+    }
+
+    const { x, y } = contextMenuTileRef.current;
+    const tileRef = activeLayer.tiles[`${x},${y}`];
+    if (!tileRef) return;
+
+    const allTilesets = [
+      ...project.tilesets,
+      ...(project.overrideTilesets ?? []),
+    ];
+    const tileset = allTilesets.find(
+      (candidate) => candidate.id === tileRef.tilesetId,
+    );
+    if (!tileset) return;
+
+    setTileEditorContext({
+      tilesetId: tileRef.tilesetId,
+      assetId: tileset.assetId,
+      sx: tileRef.sx,
+      sy: tileRef.sy,
+      sw: tileRef.sw,
+      sh: tileRef.sh,
+      layerId: activeLayer.id,
+      tileX: x,
+      tileY: y,
+    });
+
+    window.dispatchEvent(new CustomEvent("open-image-editor"));
+  }, [activeLayer, activeMap, contextMenuTileRef, project]);
+
+  const handleOpenImageLayerInEditor = useCallback(() => {
+    if (
+      !activeImageLayer ||
+      !hasContextMenuImageLayer ||
+      activeImageLayer.locked
+    ) {
+      return;
+    }
+
+    setImageLayerEditorContext({
+      layerId: activeImageLayer.id,
+      assetId: activeImageLayer.assetId,
+      width: activeImageLayer.width,
+      height: activeImageLayer.height,
+    });
+
+    window.dispatchEvent(new CustomEvent("open-image-editor"));
+  }, [activeImageLayer, hasContextMenuImageLayer]);
+
+  const handleEditInImageEditor = useCallback(() => {
+    if (activeImageLayer) {
+      handleOpenImageLayerInEditor();
+      return;
+    }
+
+    handleOpenInImageEditor();
+  }, [activeImageLayer, handleOpenImageLayerInEditor, handleOpenInImageEditor]);
+
+  return {
+    handleCancelPendingObject,
+    handleCreateObject,
+    handleEditInImageEditor,
+    handleMoveImageLayer,
+    handleMoveObject,
+    handleMoveTiles,
+    handlePaintEnd,
+    handlePaintTile,
+    handleResizeImageLayer,
+    handleResizeObject,
+    handleSelectionChange,
+    handleUpdatePolygonPoints,
+  };
+}
\ No newline at end of file
diff --git a/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts b/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts
new file mode 100644
index 0000000..861b2e6
--- /dev/null
+++ b/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts
@@ -0,0 +1,931 @@
+import { useCallback, useEffect, useState } from "react";
+import { getAsset, saveAsset } from "@/lib/db";
+import {
+  generateAssetId,
+  generateLayerId,
+} from "@/lib/ids";
+import {
+  findLastLayerId,
+  isLayerEffectivelyLocked,
+} from "@/lib/layers";
+import { getImageLayerClipboard, setImageLayerClipboard } from "@/lib/image-layer-clipboard";
+import { getClipboard, setClipboard } from "@/lib/tile-clipboard";
+import {
+  createTileStamp,
+} from "@/lib/tile-stamp";
+import type { OrientAction } from "@/types/map-panel-context-menu";
+import type {
+  ImageLayer,
+  LayerGroup,
+  LayerGroupId,
+  LayerId,
+  TileRef,
+} from "@/types";
+import type {
+  ImageLayerClipboard,
+  TileClipboard,
+} from "@/types/editor-helpers";
+import type {
+  MapPanelClipboardActionParams,
+  MapPanelClipboardActionResult,
+} from "@/types/map-panel";
+
+const IMAGE_LAYER_PASTE_OFFSET = 16;
+
+function cloneArrayBuffer(data: ArrayBuffer): ArrayBuffer {
+  return data.slice(0);
+}
+
+function insertLayerAfter(
+  refId: string,
+  newId: string,
+  topOrder: (LayerId | LayerGroupId)[],
+  groups: LayerGroup[],
+): boolean {
+  const topIndex = (topOrder as string[]).indexOf(refId);
+  if (topIndex !== -1) {
+    topOrder.splice(topIndex + 1, 0, newId as LayerId | LayerGroupId);
+    return true;
+  }
+
+  for (const group of groups) {
+    const groupIndex = (group.childOrder as string[]).indexOf(refId);
+    if (groupIndex === -1) continue;
+
+    group.childOrder.splice(groupIndex + 1, 0, newId as LayerId | LayerGroupId);
+    return true;
+  }
+
+  return false;
+}
+
+function removeLayerFromOrders(
+  layerId: string,
+  topOrder: (LayerId | LayerGroupId)[],
+  groups: LayerGroup[],
+) {
+  const removeFromOrder = (order: (LayerId | LayerGroupId)[]) => {
+    const index = (order as string[]).indexOf(layerId);
+    if (index !== -1) {
+      order.splice(index, 1);
+    }
+  };
+
+  removeFromOrder(topOrder);
+  for (const group of groups) {
+    removeFromOrder(group.childOrder);
+  }
+}
+
+export function useMapPanelClipboardActions({
+  activeImageLayer,
+  activeLayer,
+  activeLayerEffectivelyLocked,
+  activeMap,
+  activeObject,
+  activeObjectLayer,
+  contextMenuTileRef,
+  hasContextMenuImageLayer,
+  hasContextMenuTile,
+  hoverTileRef,
+  project,
+  setState,
+  state,
+}: MapPanelClipboardActionParams): MapPanelClipboardActionResult {
+  const [hasTileClipboard, setHasTileClipboard] = useState(
+    () => getClipboard() !== null,
+  );
+  const [hasImageLayerClipboard, setHasImageLayerClipboard] = useState(
+    () => getImageLayerClipboard() !== null,
+  );
+
+  const setExclusiveTileClipboard = useCallback((data: TileClipboard | null) => {
+    setClipboard(data);
+    setImageLayerClipboard(null);
+  }, []);
+
+  const setExclusiveImageLayerClipboard = useCallback(
+    (data: ImageLayerClipboard | null) => {
+      setImageLayerClipboard(data);
+      setClipboard(null);
+    },
+    [],
+  );
+
+  const handleCopyTiles = useCallback(
+    (fromContextMenu = false) => {
+      if (state.mapSelection && activeLayer) {
+        const selection = state.mapSelection;
+        const tiles: TileClipboard["tiles"] = [];
+        for (let dy = 0; dy < selection.height; dy++) {
+          for (let dx = 0; dx < selection.width; dx++) {
+            const ref = activeLayer.tiles[`${selection.x + dx},${selection.y + dy}`];
+            if (ref) {
+              tiles.push({ dx, dy, ref: { ...ref } });
+            }
+          }
+        }
+
+        setExclusiveTileClipboard({
+          tiles,
+          width: selection.width,
+          height: selection.height,
+        });
+        return;
+      }
+
+      if (
+        fromContextMenu &&
+        contextMenuTileRef.current &&
+        activeLayer &&
+        activeMap
+      ) {
+        const { x, y } = contextMenuTileRef.current;
+        const brushNum = parseInt(state.brushSize);
+        const tiles: TileClipboard["tiles"] = [];
+        for (let dy = 0; dy < brushNum; dy++) {
+          for (let dx = 0; dx < brushNum; dx++) {
+            const ref = activeLayer.tiles[`${x + dx},${y + dy}`];
+            if (ref) {
+              tiles.push({ dx, dy, ref: { ...ref } });
+            }
+          }
+        }
+
+        setExclusiveTileClipboard({
+          tiles,
+          width: brushNum,
+          height: brushNum,
+        });
+        return;
+      }
+
+      if (!fromContextMenu && state.selectedTile) {
+        const stamp = createTileStamp(state.selectedTile, state.tileSize);
+        setExclusiveTileClipboard({
+          tiles: stamp.cells.map((cell) => ({
+            dx: cell.dx,
+            dy: cell.dy,
+            ref: { ...cell.ref },
+          })),
+          width: stamp.width,
+          height: stamp.height,
+        });
+      }
+    },
+    [
+      activeLayer,
+      activeMap,
+      contextMenuTileRef,
+      setExclusiveTileClipboard,
+      state.brushSize,
+      state.mapSelection,
+      state.selectedTile,
+      state.tileSize,
+    ],
+  );
+
+  const handleCutTiles = useCallback(
+    (fromContextMenu = false) => {
+      if (!activeLayer || !activeMap || activeLayer.locked) return;
+
+      let region: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      } | null = null;
+
+      if (state.mapSelection) {
+        region = state.mapSelection;
+      } else if (fromContextMenu && contextMenuTileRef.current) {
+        const brushNum = parseInt(state.brushSize);
+        region = {
+          x: contextMenuTileRef.current.x,
+          y: contextMenuTileRef.current.y,
+          width: brushNum,
+          height: brushNum,
+        };
+      }
+
+      if (!region) return;
+
+      const tiles: TileClipboard["tiles"] = [];
+      for (let dy = 0; dy < region.height; dy++) {
+        for (let dx = 0; dx < region.width; dx++) {
+          const ref = activeLayer.tiles[`${region.x + dx},${region.y + dy}`];
+          if (ref) {
+            tiles.push({ dx, dy, ref: { ...ref } });
+          }
+        }
+      }
+
+      setExclusiveTileClipboard({
+        tiles,
+        width: region.width,
+        height: region.height,
+      });
+
+      setState((draft) => {
+        const layer = draft.project?.layers.find(
+          (candidate) => candidate.id === state.activeLayerId,
+        );
+        if (!layer) return;
+
+        for (let dy = 0; dy < region.height; dy++) {
+          for (let dx = 0; dx < region.width; dx++) {
+            delete layer.tiles[`${region.x + dx},${region.y + dy}`];
+          }
+        }
+      });
+    },
+    [
+      activeLayer,
+      activeMap,
+      contextMenuTileRef,
+      setExclusiveTileClipboard,
+      setState,
+      state.activeLayerId,
+      state.brushSize,
+      state.mapSelection,
+    ],
+  );
+
+  const handlePasteTiles = useCallback(
+    (fromContextMenu = false) => {
+      const clipboard = getClipboard();
+      if (!clipboard || !activeMap || !activeLayer || activeLayer.locked) {
+        return;
+      }
+
+      const destination =
+        fromContextMenu && contextMenuTileRef.current
+          ? contextMenuTileRef.current
+          : hoverTileRef.current
+            ? hoverTileRef.current
+            : state.mapSelection
+              ? { x: state.mapSelection.x, y: state.mapSelection.y }
+              : { x: 0, y: 0 };
+
+      setState((draft) => {
+        const layer = draft.project?.layers.find(
+          (candidate) => candidate.id === state.activeLayerId,
+        );
+        if (!layer) return;
+
+        for (const { dx, dy, ref } of clipboard.tiles) {
+          const tx = destination.x + dx;
+          const ty = destination.y + dy;
+          if (
+            tx < 0 ||
+            ty < 0 ||
+            tx >= activeMap.widthInTiles ||
+            ty >= activeMap.heightInTiles
+          ) {
+            continue;
+          }
+
+          layer.tiles[`${tx},${ty}`] = { ...ref };
+        }
+
+        draft.mapSelection = {
+          x: destination.x,
+          y: destination.y,
+          width: clipboard.width,
+          height: clipboard.height,
+        };
+        draft.currentTool = "select";
+      });
+    },
+    [
+      activeLayer,
+      activeMap,
+      contextMenuTileRef,
+      hoverTileRef,
+      setState,
+      state.activeLayerId,
+      state.mapSelection,
+    ],
+  );
+
+  const handleCopyImageLayer = useCallback(async () => {
+    if (!activeImageLayer) return;
+
+    const asset = await getAsset(activeImageLayer.assetId);
+    if (!asset) return;
+
+    setExclusiveImageLayerClipboard({
+      name: activeImageLayer.name,
+      x: activeImageLayer.x,
+      y: activeImageLayer.y,
+      width: activeImageLayer.width,
+      height: activeImageLayer.height,
+      rotation: activeImageLayer.rotation ?? 0,
+      flipX: activeImageLayer.flipX ?? false,
+      flipY: activeImageLayer.flipY ?? false,
+      opacity: activeImageLayer.opacity ?? 100,
+      mimeType: asset.mimeType,
+      data: cloneArrayBuffer(asset.data),
+      operation: "copy",
+    });
+  }, [activeImageLayer, setExclusiveImageLayerClipboard]);
+
+  const handleCutImageLayer = useCallback(async () => {
+    if (!activeImageLayer || activeImageLayer.locked) return;
+
+    const asset = await getAsset(activeImageLayer.assetId);
+    if (!asset) return;
+
+    setExclusiveImageLayerClipboard({
+      name: activeImageLayer.name,
+      x: activeImageLayer.x,
+      y: activeImageLayer.y,
+      width: activeImageLayer.width,
+      height: activeImageLayer.height,
+      rotation: activeImageLayer.rotation ?? 0,
+      flipX: activeImageLayer.flipX ?? false,
+      flipY: activeImageLayer.flipY ?? false,
+      opacity: activeImageLayer.opacity ?? 100,
+      mimeType: asset.mimeType,
+      data: cloneArrayBuffer(asset.data),
+      operation: "cut",
+    });
+
+    setState((draft) => {
+      if (!draft.project) return;
+
+      const map = draft.project.maps.find(
+        (candidate) => candidate.id === state.activeMapId,
+      );
+      if (!map) return;
+
+      const groups = draft.project.layerGroups ?? [];
+      removeLayerFromOrders(activeImageLayer.id, map.layerOrder, groups);
+      draft.project.imageLayers = (draft.project.imageLayers ?? []).filter(
+        (layer) => layer.id !== activeImageLayer.id,
+      );
+
+      if (draft.activeLayerId === activeImageLayer.id) {
+        draft.activeLayerId =
+          findLastLayerId(
+            map.layerOrder,
+            draft.project.layers,
+            groups,
+            draft.project.imageLayers ?? [],
+            draft.project.objectLayers ?? [],
+          ) ?? null;
+      }
+    });
+  }, [
+    activeImageLayer,
+    setExclusiveImageLayerClipboard,
+    setState,
+    state.activeMapId,
+  ]);
+
+  const handlePasteImageLayer = useCallback(async () => {
+    if (!activeMap) return;
+
+    const clipboard = getImageLayerClipboard();
+    if (!clipboard) return;
+
+    const newLayerId = generateLayerId();
+    const newAssetId = generateAssetId();
+    await saveAsset(
+      newAssetId,
+      cloneArrayBuffer(clipboard.data),
+      clipboard.mimeType,
+    );
+
+    setState((draft) => {
+      if (!draft.project) return;
+
+      const map = draft.project.maps.find(
+        (candidate) => candidate.id === activeMap.id,
+      );
+      if (!map) return;
+
+      const groups = draft.project.layerGroups ?? [];
+      const nextLayer: ImageLayer = {
+        id: newLayerId,
+        mapId: activeMap.id,
+        name:
+          clipboard.operation === "copy"
+            ? `${clipboard.name} copy`
+            : clipboard.name,
+        type: "image",
+        visible: true,
+        locked: false,
+        assetId: newAssetId,
+        x: clipboard.x + IMAGE_LAYER_PASTE_OFFSET,
+        y: clipboard.y + IMAGE_LAYER_PASTE_OFFSET,
+        width: clipboard.width,
+        height: clipboard.height,
+        rotation: clipboard.rotation,
+        flipX: clipboard.flipX,
+        flipY: clipboard.flipY,
+        opacity: clipboard.opacity,
+      };
+
+      const imageLayers =
+        draft.project.imageLayers ?? (draft.project.imageLayers = []);
+      imageLayers.push(nextLayer);
+
+      const inserted = draft.activeLayerId
+        ? insertLayerAfter(draft.activeLayerId, newLayerId, map.layerOrder, groups)
+        : false;
+      if (!inserted) {
+        map.layerOrder.push(newLayerId);
+      }
+
+      draft.activeLayerId = newLayerId;
+      draft.currentTool = "select";
+    });
+
+    if (clipboard.operation === "cut") {
+      setExclusiveImageLayerClipboard({
+        ...clipboard,
+        operation: "copy",
+      });
+    }
+  }, [activeMap, setExclusiveImageLayerClipboard, setState]);
+
+  const handleCopySelection = useCallback(
+    async (fromContextMenu = false) => {
+      if (activeImageLayer) {
+        await handleCopyImageLayer();
+        return;
+      }
+
+      handleCopyTiles(fromContextMenu);
+    },
+    [activeImageLayer, handleCopyImageLayer, handleCopyTiles],
+  );
+
+  const handleCutSelection = useCallback(
+    async (fromContextMenu = false) => {
+      if (activeImageLayer) {
+        await handleCutImageLayer();
+        return;
+      }
+
+      handleCutTiles(fromContextMenu);
+    },
+    [activeImageLayer, handleCutImageLayer, handleCutTiles],
+  );
+
+  const handlePasteSelection = useCallback(
+    async (fromContextMenu = false) => {
+      if (getImageLayerClipboard()) {
+        await handlePasteImageLayer();
+        return;
+      }
+
+      handlePasteTiles(fromContextMenu);
+    },
+    [handlePasteImageLayer, handlePasteTiles],
+  );
+
+  const handleDeleteTiles = useCallback(
+    (fromContextMenu = false) => {
+      if (!activeLayer || !activeMap) return;
+
+      const effectivelyLocked = isLayerEffectivelyLocked(
+        activeLayer.id,
+        activeMap.layerOrder,
+        project?.layers ?? [],
+        project?.layerGroups ?? [],
+      );
+      if (effectivelyLocked) return;
+
+      let region: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      } | null = null;
+
+      if (state.mapSelection) {
+        region = state.mapSelection;
+      } else if (
+        fromContextMenu &&
+        contextMenuTileRef.current &&
+        hasContextMenuTile
+      ) {
+        region = {
+          x: contextMenuTileRef.current.x,
+          y: contextMenuTileRef.current.y,
+          width: 1,
+          height: 1,
+        };
+      }
+
+      if (!region) return;
+
+      setState((draft) => {
+        const layer = draft.project?.layers.find(
+          (candidate) => candidate.id === state.activeLayerId,
+        );
+        if (!layer) return;
+
+        for (let dy = 0; dy < region.height; dy++) {
+          for (let dx = 0; dx < region.width; dx++) {
+            delete layer.tiles[`${region.x + dx},${region.y + dy}`];
+          }
+        }
+      });
+    },
+    [
+      activeLayer,
+      activeMap,
+      contextMenuTileRef,
+      hasContextMenuTile,
+      project?.layerGroups,
+      project?.layers,
+      setState,
+      state.activeLayerId,
+      state.mapSelection,
+    ],
+  );
+
+  const handleDeleteImageLayer = useCallback(() => {
+    if (!activeImageLayer || !activeMap || activeImageLayer.locked) return;
+
+    setState((draft) => {
+      if (!draft.project) return;
+
+      const map = draft.project.maps.find(
+        (candidate) => candidate.id === activeMap.id,
+      );
+      if (!map) return;
+
+      const groups = draft.project.layerGroups ?? [];
+      removeLayerFromOrders(activeImageLayer.id, map.layerOrder, groups);
+      draft.project.imageLayers = (draft.project.imageLayers ?? []).filter(
+        (layer) => layer.id !== activeImageLayer.id,
+      );
+
+      if (draft.activeLayerId === activeImageLayer.id) {
+        draft.activeLayerId =
+          findLastLayerId(
+            map.layerOrder,
+            draft.project.layers,
+            groups,
+            draft.project.imageLayers ?? [],
+            draft.project.objectLayers ?? [],
+          ) ?? null;
+      }
+
+      draft.mapSelection = null;
+    });
+  }, [activeImageLayer, activeMap, setState]);
+
+  const handleDeleteObject = useCallback(() => {
+    if (!activeObject || !activeObjectLayer) return;
+    if (activeObject.locked || activeObjectLayer.locked) return;
+
+    setState((draft) => {
+      if (!draft.project) return;
+
+      draft.project.objects = (draft.project.objects ?? []).filter(
+        (object) => object.id !== activeObject.id,
+      );
+
+      const layer = (draft.project.objectLayers ?? []).find(
+        (candidate) => candidate.id === activeObject.layerId,
+      );
+      if (layer) {
+        layer.objectOrder = layer.objectOrder.filter(
+          (objectId) => objectId !== activeObject.id,
+        );
+      }
+
+      if (draft.activeObjectId === activeObject.id) {
+        draft.activeObjectId = null;
+      }
+    });
+  }, [activeObject, activeObjectLayer, setState]);
+
+  const handleDeleteSelection = useCallback(
+    (fromContextMenu = false) => {
+      if (state.currentTool !== "select") return;
+
+      if (activeObject) {
+        handleDeleteObject();
+        return;
+      }
+
+      if (activeImageLayer) {
+        handleDeleteImageLayer();
+        return;
+      }
+
+      handleDeleteTiles(fromContextMenu);
+    },
+    [
+      activeImageLayer,
+      activeObject,
+      handleDeleteImageLayer,
+      handleDeleteObject,
+      handleDeleteTiles,
+      state.currentTool,
+    ],
+  );
+
+  const handleOrientTiles = useCallback(
+    (action: OrientAction, fromContextMenu = false) => {
+      if (!activeLayer || !activeMap) return;
+
+      const effectivelyLocked = isLayerEffectivelyLocked(
+        activeLayer.id,
+        activeMap.layerOrder,
+        project?.layers ?? [],
+        project?.layerGroups ?? [],
+      );
+      if (effectivelyLocked) return;
+
+      let region: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      } | null = null;
+
+      if (state.mapSelection) {
+        region = state.mapSelection;
+      } else if (fromContextMenu && contextMenuTileRef.current) {
+        region = {
+          x: contextMenuTileRef.current.x,
+          y: contextMenuTileRef.current.y,
+          width: 1,
+          height: 1,
+        };
+      }
+
+      if (!region) return;
+
+      const rotated = action === "rotateLeft" || action === "rotateRight";
+      const nextWidth = rotated ? region.height : region.width;
+      const nextHeight = rotated ? region.width : region.height;
+      if (
+        region.x + nextWidth > activeMap.widthInTiles ||
+        region.y + nextHeight > activeMap.heightInTiles
+      ) {
+        return;
+      }
+
+      setState((draft) => {
+        const layer = draft.project?.layers.find(
+          (candidate) => candidate.id === state.activeLayerId,
+        );
+        if (!layer) return;
+
+        const snapshot: TileClipboard["tiles"] = [];
+        for (let dy = 0; dy < region.height; dy++) {
+          for (let dx = 0; dx < region.width; dx++) {
+            const ref = layer.tiles[`${region.x + dx},${region.y + dy}`];
+            if (ref) {
+              snapshot.push({ dx, dy, ref: { ...ref } });
+            }
+          }
+        }
+
+        for (let dy = 0; dy < region.height; dy++) {
+          for (let dx = 0; dx < region.width; dx++) {
+            delete layer.tiles[`${region.x + dx},${region.y + dy}`];
+          }
+        }
+
+        for (const { dx, dy, ref } of snapshot) {
+          let nextDx = dx;
+          let nextDy = dy;
+
+          if (action === "rotateLeft") {
+            nextDx = dy;
+            nextDy = region.width - 1 - dx;
+          } else if (action === "rotateRight") {
+            nextDx = region.height - 1 - dy;
+            nextDy = dx;
+          } else if (action === "flipH") {
+            nextDx = region.width - 1 - dx;
+          } else if (action === "flipV") {
+            nextDy = region.height - 1 - dy;
+          }
+
+          const nextRef: TileRef = { ...ref };
+          const rotation = nextRef.rotation ?? 0;
+          const flipX = nextRef.flipX ?? false;
+          const flipY = nextRef.flipY ?? false;
+          if (action === "rotateLeft") {
+            nextRef.rotation = ((rotation - 90 + 360) % 360) as 0 | 90 | 180 | 270;
+          } else if (action === "rotateRight") {
+            nextRef.rotation = ((rotation + 90) % 360) as 0 | 90 | 180 | 270;
+          } else if (action === "flipH") {
+            nextRef.flipX = !flipX;
+          } else if (action === "flipV") {
+            nextRef.flipY = !flipY;
+          }
+
+          layer.tiles[`${region.x + nextDx},${region.y + nextDy}`] = nextRef;
+        }
+
+        if (draft.mapSelection) {
+          draft.mapSelection = {
+            x: region.x,
+            y: region.y,
+            width: nextWidth,
+            height: nextHeight,
+          };
+        }
+      });
+    },
+    [
+      activeLayer,
+      activeMap,
+      contextMenuTileRef,
+      project?.layerGroups,
+      project?.layers,
+      setState,
+      state.activeLayerId,
+      state.mapSelection,
+    ],
+  );
+
+  const handleOrientImageLayer = useCallback(
+    (action: OrientAction) => {
+      if (!activeImageLayer || activeImageLayer.locked) return;
+
+      setState((draft) => {
+        const layer = (draft.project?.imageLayers ?? []).find(
+          (entry) => entry.id === activeImageLayer.id,
+        );
+        if (!layer) return;
+
+        const rotation = layer.rotation ?? 0;
+        const flipX = layer.flipX ?? false;
+        const flipY = layer.flipY ?? false;
+
+        if (action === "rotateLeft") {
+          layer.rotation = ((rotation - 90 + 360) % 360) as 0 | 90 | 180 | 270;
+          return;
+        }
+
+        if (action === "rotateRight") {
+          layer.rotation = ((rotation + 90) % 360) as 0 | 90 | 180 | 270;
+          return;
+        }
+
+        if (action === "flipH") {
+          layer.flipX = !flipX;
+          return;
+        }
+
+        if (action === "flipV") {
+          layer.flipY = !flipY;
+        }
+      });
+    },
+    [activeImageLayer, setState],
+  );
+
+  const handleOrientSelection = useCallback(
+    (action: OrientAction, fromContextMenu = false) => {
+      if (activeImageLayer) {
+        handleOrientImageLayer(action);
+        return;
+      }
+
+      handleOrientTiles(action, fromContextMenu);
+    },
+    [activeImageLayer, handleOrientImageLayer, handleOrientTiles],
+  );
+
+  useEffect(() => {
+    const onTileClipboardChange = () => {
+      setHasTileClipboard(getClipboard() !== null);
+    };
+    const onImageClipboardChange = () => {
+      setHasImageLayerClipboard(getImageLayerClipboard() !== null);
+    };
+
+    window.addEventListener("tile-clipboard-change", onTileClipboardChange);
+    window.addEventListener(
+      "image-layer-clipboard-change",
+      onImageClipboardChange,
+    );
+
+    return () => {
+      window.removeEventListener("tile-clipboard-change", onTileClipboardChange);
+      window.removeEventListener(
+        "image-layer-clipboard-change",
+        onImageClipboardChange,
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    const onCopy = () => {
+      void handleCopySelection(false);
+    };
+    const onCut = () => {
+      void handleCutSelection(false);
+    };
+    const onPaste = () => {
+      void handlePasteSelection(false);
+    };
+    const onDelete = () => {
+      handleDeleteSelection(false);
+    };
+
+    window.addEventListener("tile-copy", onCopy);
+    window.addEventListener("tile-cut", onCut);
+    window.addEventListener("tile-paste", onPaste);
+    window.addEventListener("map-delete-selection", onDelete);
+
+    return () => {
+      window.removeEventListener("tile-copy", onCopy);
+      window.removeEventListener("tile-cut", onCut);
+      window.removeEventListener("tile-paste", onPaste);
+      window.removeEventListener("map-delete-selection", onDelete);
+    };
+  }, [
+    handleCopySelection,
+    handleCutSelection,
+    handleDeleteSelection,
+    handlePasteSelection,
+  ]);
+
+  const isTileLayerActive = !!activeLayer && !activeLayer.locked;
+  const isImageLayerActive = !!activeImageLayer;
+  const isImageLayerEditable = !!activeImageLayer && !activeImageLayer.locked;
+  const canCopy = !!activeMap && (!!activeLayer || isImageLayerActive);
+  const canCut = !!activeMap && (isTileLayerActive || isImageLayerEditable);
+  const canCutToolbar =
+    isImageLayerEditable || (canCut && !!state.mapSelection);
+  const canPaste =
+    !!activeMap &&
+    (hasImageLayerClipboard || (hasTileClipboard && isTileLayerActive));
+  const canOpenTileInEditor =
+    !!activeMap && !!activeLayer && hasContextMenuTile;
+  const canOpenImageLayerInEditor =
+    !!activeMap &&
+    !!activeImageLayer &&
+    activeImageLayer.visible &&
+    !activeImageLayer.locked &&
+    hasContextMenuImageLayer;
+  const canEditInImageEditor = activeImageLayer
+    ? canOpenImageLayerInEditor
+    : canOpenTileInEditor;
+  const isSelectTool = state.currentTool === "select";
+  const canDeleteObject =
+    isSelectTool &&
+    !!activeObject &&
+    !!activeObjectLayer &&
+    !activeObject.locked &&
+    !activeObjectLayer.locked;
+  const canDeleteImageLayer =
+    isSelectTool && !!activeImageLayer && !activeImageLayer.locked;
+  const canDeleteTiles =
+    isSelectTool &&
+    !!state.mapSelection &&
+    !!activeLayer &&
+    !activeLayerEffectivelyLocked;
+  const canDeleteContextTile =
+    isSelectTool &&
+    !!activeLayer &&
+    !activeLayerEffectivelyLocked &&
+    hasContextMenuTile;
+  const canDeleteSelection =
+    canDeleteObject ||
+    canDeleteImageLayer ||
+    canDeleteTiles ||
+    canDeleteContextTile;
+  const canOrientToolbar =
+    isSelectTool &&
+    ((!!state.mapSelection && isTileLayerActive) ||
+      (!!activeImageLayer && !activeImageLayer.locked));
+  const canOrientContextMenu =
+    isSelectTool &&
+    ((!!activeLayer &&
+      !activeLayer.locked &&
+      (!!state.mapSelection || hasContextMenuTile)) ||
+      (!!activeImageLayer &&
+        !activeImageLayer.locked &&
+        hasContextMenuImageLayer));
+
+  return {
+    canCopy,
+    canCut,
+    canCutToolbar,
+    canDeleteSelection,
+    canEditInImageEditor,
+    canOrientContextMenu,
+    canOrientToolbar,
+    canPaste,
+    handleCopySelection,
+    handleCutSelection,
+    handleDeleteSelection,
+    handleOrientSelection,
+    handlePasteSelection,
+  };
+}
\ No newline at end of file
diff --git a/src/components/tools/ImageEditor/ImageCanvas.tsx b/src/components/tools/ImageEditor/ImageCanvas.tsx
index 6ce2b92..84f0fb6 100644
--- a/src/components/tools/ImageEditor/ImageCanvas.tsx
+++ b/src/components/tools/ImageEditor/ImageCanvas.tsx
@@ -13,6 +13,7 @@ import type {
   ImageCanvasResizeHandle,
   ImageCanvasResizePreview,
 } from "@/types/image-editor-ui";
+import { ImageCanvasResizeControls } from "./ImageCanvasResizeControls";
 import {
   createStrokeState,
   dispatchDown,
@@ -31,10 +32,6 @@ import {
   drawFloatingOnOverlay,
 } from "@/lib/image-editor-tools";
 
-const IMAGE_RESIZE_GUTTER = 14;
-const IMAGE_RESIZE_RAIL_SIZE = 10;
-const IMAGE_RESIZE_BADGE_OFFSET = 6;
-
 function clampCanvasDimension(value: number, fallback: number): number {
   if (!Number.isFinite(value)) return fallback;
   return Math.min(1024, Math.max(1, Math.round(value)));
@@ -878,19 +875,8 @@ export function ImageCanvas({
   const previewHeight = resizePreview?.height ?? height;
   const previewPixelW = previewWidth * zoom;
   const previewPixelH = previewHeight * zoom;
-  const wrapperWidth = previewPixelW + IMAGE_RESIZE_GUTTER;
-  const wrapperHeight = previewPixelH + IMAGE_RESIZE_GUTTER;
-  const sizeLabel = `${previewWidth} × ${previewHeight}`;
-  const rightGripActive =
-    activeResizeHandle === "e" || activeResizeHandle === "se";
-  const bottomGripActive =
-    activeResizeHandle === "s" || activeResizeHandle === "se";
-  const rightGripHovered =
-    hoveredResizeHandle === "e" || hoveredResizeHandle === "se";
-  const bottomGripHovered =
-    hoveredResizeHandle === "s" || hoveredResizeHandle === "se";
-  const cornerGripActive = activeResizeHandle === "se";
-  const cornerGripHovered = hoveredResizeHandle === "se";
+  const wrapperWidth = previewPixelW + 14;
+  const wrapperHeight = previewPixelH + 14;
 
   return (
     <div
@@ -1006,160 +992,17 @@ export function ImageCanvas({
           />
         </div>
 
-        <div
-          aria-hidden="true"
-          style={{
-            position: "absolute",
-            top: 0,
-            left: previewPixelW,
-            width: IMAGE_RESIZE_GUTTER,
-            height: previewPixelH,
-            cursor: "ew-resize",
-            touchAction: "none",
-          }}
-          onContextMenu={(e) => e.preventDefault()}
-          onPointerEnter={() => setHoveredResizeHandle("e")}
-          onPointerLeave={() => {
-            if (!resizeActionRef.current) {
-              setHoveredResizeHandle(null);
-            }
-          }}
-          onPointerDown={(e) => beginCanvasResize("e", e)}
-        >
-          <div
-            style={{
-              position: "absolute",
-              top: 4,
-              bottom: 4,
-              left: (IMAGE_RESIZE_GUTTER - IMAGE_RESIZE_RAIL_SIZE) / 2,
-              width: IMAGE_RESIZE_RAIL_SIZE,
-              borderRadius: 999,
-              background: rightGripActive
-                ? "rgba(251, 146, 60, 0.45)"
-                : rightGripHovered
-                  ? "rgba(251, 146, 60, 0.24)"
-                  : "rgba(148, 163, 184, 0.28)",
-              border: rightGripHovered
-                ? "1px solid rgba(251, 146, 60, 0.35)"
-                : "1px solid rgba(255, 255, 255, 0.18)",
-              boxShadow: rightGripHovered
-                ? "0 0 10px rgba(251, 146, 60, 0.18)"
-                : "none",
-              transition:
-                "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
-            }}
-          />
-        </div>
-
-        <div
-          aria-hidden="true"
-          style={{
-            position: "absolute",
-            top: previewPixelH,
-            left: 0,
-            width: previewPixelW,
-            height: IMAGE_RESIZE_GUTTER,
-            cursor: "ns-resize",
-            touchAction: "none",
-          }}
-          onContextMenu={(e) => e.preventDefault()}
-          onPointerEnter={() => setHoveredResizeHandle("s")}
-          onPointerLeave={() => {
-            if (!resizeActionRef.current) {
-              setHoveredResizeHandle(null);
-            }
-          }}
-          onPointerDown={(e) => beginCanvasResize("s", e)}
-        >
-          <div
-            style={{
-              position: "absolute",
-              left: 4,
-              right: 4,
-              top: (IMAGE_RESIZE_GUTTER - IMAGE_RESIZE_RAIL_SIZE) / 2,
-              height: IMAGE_RESIZE_RAIL_SIZE,
-              borderRadius: 999,
-              background: bottomGripActive
-                ? "rgba(251, 146, 60, 0.45)"
-                : bottomGripHovered
-                  ? "rgba(251, 146, 60, 0.24)"
-                  : "rgba(148, 163, 184, 0.28)",
-              border: bottomGripHovered
-                ? "1px solid rgba(251, 146, 60, 0.35)"
-                : "1px solid rgba(255, 255, 255, 0.18)",
-              boxShadow: bottomGripHovered
-                ? "0 0 10px rgba(251, 146, 60, 0.18)"
-                : "none",
-              transition:
-                "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
-            }}
-          />
-        </div>
-
-        <div
-          aria-hidden="true"
-          style={{
-            position: "absolute",
-            top: previewPixelH,
-            left: previewPixelW,
-            width: IMAGE_RESIZE_GUTTER,
-            height: IMAGE_RESIZE_GUTTER,
-            cursor: "nwse-resize",
-            touchAction: "none",
-          }}
-          onContextMenu={(e) => e.preventDefault()}
-          onPointerEnter={() => setHoveredResizeHandle("se")}
-          onPointerLeave={() => {
-            if (!resizeActionRef.current) {
-              setHoveredResizeHandle(null);
-            }
-          }}
-          onPointerDown={(e) => beginCanvasResize("se", e)}
-        >
-          <div
-            style={{
-              position: "absolute",
-              inset: 2,
-              borderRadius: 4,
-              background: cornerGripActive
-                ? "rgba(251, 146, 60, 0.45)"
-                : cornerGripHovered
-                  ? "rgba(251, 146, 60, 0.24)"
-                  : "rgba(148, 163, 184, 0.28)",
-              border: cornerGripHovered
-                ? "1px solid rgba(251, 146, 60, 0.35)"
-                : "1px solid rgba(255, 255, 255, 0.18)",
-              boxShadow: cornerGripHovered
-                ? "0 0 12px rgba(251, 146, 60, 0.2)"
-                : "none",
-              transition:
-                "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
-            }}
-          />
-        </div>
-
-        {resizePreview && (
-          <div
-            aria-live="polite"
-            style={{
-              position: "absolute",
-              top: Math.max(0, previewPixelH - IMAGE_RESIZE_GUTTER - 24),
-              left: Math.max(0, previewPixelW - 70 - IMAGE_RESIZE_BADGE_OFFSET),
-              minWidth: 70,
-              padding: "2px 6px",
-              borderRadius: 999,
-              background: "rgba(15, 23, 42, 0.88)",
-              color: "rgba(248, 250, 252, 0.95)",
-              border: "1px solid rgba(251, 146, 60, 0.35)",
-              fontSize: 11,
-              lineHeight: 1.4,
-              textAlign: "center",
-              pointerEvents: "none",
-            }}
-          >
-            {sizeLabel}
-          </div>
-        )}
+        <ImageCanvasResizeControls
+          previewPixelW={previewPixelW}
+          previewPixelH={previewPixelH}
+          activeResizeHandle={activeResizeHandle}
+          hoveredResizeHandle={hoveredResizeHandle}
+          resizePreview={resizePreview}
+          hasActiveResizeAction={resizeActionRef.current !== null}
+          onPointerEnterHandle={setHoveredResizeHandle}
+          onPointerLeaveHandle={() => setHoveredResizeHandle(null)}
+          onBeginResize={beginCanvasResize}
+        />
       </div>
     </div>
   );
diff --git a/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx b/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx
new file mode 100644
index 0000000..216e757
--- /dev/null
+++ b/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx
@@ -0,0 +1,184 @@
+import type { ImageCanvasResizeControlsProps } from "@/types/image-editor-ui";
+
+const IMAGE_RESIZE_GUTTER = 14;
+const IMAGE_RESIZE_RAIL_SIZE = 10;
+const IMAGE_RESIZE_BADGE_OFFSET = 6;
+
+export function ImageCanvasResizeControls({
+  previewPixelW,
+  previewPixelH,
+  activeResizeHandle,
+  hoveredResizeHandle,
+  resizePreview,
+  hasActiveResizeAction,
+  onPointerEnterHandle,
+  onPointerLeaveHandle,
+  onBeginResize,
+}: ImageCanvasResizeControlsProps) {
+  const sizeLabel = resizePreview
+    ? `${resizePreview.width} × ${resizePreview.height}`
+    : null;
+  const rightGripActive =
+    activeResizeHandle === "e" || activeResizeHandle === "se";
+  const bottomGripActive =
+    activeResizeHandle === "s" || activeResizeHandle === "se";
+  const rightGripHovered =
+    hoveredResizeHandle === "e" || hoveredResizeHandle === "se";
+  const bottomGripHovered =
+    hoveredResizeHandle === "s" || hoveredResizeHandle === "se";
+  const cornerGripActive = activeResizeHandle === "se";
+  const cornerGripHovered = hoveredResizeHandle === "se";
+
+  const handlePointerLeave = () => {
+    if (!hasActiveResizeAction) {
+      onPointerLeaveHandle();
+    }
+  };
+
+  return (
+    <>
+      <div
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: previewPixelW,
+          width: IMAGE_RESIZE_GUTTER,
+          height: previewPixelH,
+          cursor: "ew-resize",
+          touchAction: "none",
+        }}
+        onContextMenu={(event) => event.preventDefault()}
+        onPointerEnter={() => onPointerEnterHandle("e")}
+        onPointerLeave={handlePointerLeave}
+        onPointerDown={(event) => onBeginResize("e", event)}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 4,
+            bottom: 4,
+            left: (IMAGE_RESIZE_GUTTER - IMAGE_RESIZE_RAIL_SIZE) / 2,
+            width: IMAGE_RESIZE_RAIL_SIZE,
+            borderRadius: 999,
+            background: rightGripActive
+              ? "rgba(251, 146, 60, 0.45)"
+              : rightGripHovered
+                ? "rgba(251, 146, 60, 0.24)"
+                : "rgba(148, 163, 184, 0.28)",
+            border: rightGripHovered
+              ? "1px solid rgba(251, 146, 60, 0.35)"
+              : "1px solid rgba(255, 255, 255, 0.18)",
+            boxShadow: rightGripHovered
+              ? "0 0 10px rgba(251, 146, 60, 0.18)"
+              : "none",
+            transition:
+              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+          }}
+        />
+      </div>
+
+      <div
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: previewPixelH,
+          left: 0,
+          width: previewPixelW,
+          height: IMAGE_RESIZE_GUTTER,
+          cursor: "ns-resize",
+          touchAction: "none",
+        }}
+        onContextMenu={(event) => event.preventDefault()}
+        onPointerEnter={() => onPointerEnterHandle("s")}
+        onPointerLeave={handlePointerLeave}
+        onPointerDown={(event) => onBeginResize("s", event)}
+      >
+        <div
+          style={{
+            position: "absolute",
+            left: 4,
+            right: 4,
+            top: (IMAGE_RESIZE_GUTTER - IMAGE_RESIZE_RAIL_SIZE) / 2,
+            height: IMAGE_RESIZE_RAIL_SIZE,
+            borderRadius: 999,
+            background: bottomGripActive
+              ? "rgba(251, 146, 60, 0.45)"
+              : bottomGripHovered
+                ? "rgba(251, 146, 60, 0.24)"
+                : "rgba(148, 163, 184, 0.28)",
+            border: bottomGripHovered
+              ? "1px solid rgba(251, 146, 60, 0.35)"
+              : "1px solid rgba(255, 255, 255, 0.18)",
+            boxShadow: bottomGripHovered
+              ? "0 0 10px rgba(251, 146, 60, 0.18)"
+              : "none",
+            transition:
+              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+          }}
+        />
+      </div>
+
+      <div
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: previewPixelH,
+          left: previewPixelW,
+          width: IMAGE_RESIZE_GUTTER,
+          height: IMAGE_RESIZE_GUTTER,
+          cursor: "nwse-resize",
+          touchAction: "none",
+        }}
+        onContextMenu={(event) => event.preventDefault()}
+        onPointerEnter={() => onPointerEnterHandle("se")}
+        onPointerLeave={handlePointerLeave}
+        onPointerDown={(event) => onBeginResize("se", event)}
+      >
+        <div
+          style={{
+            position: "absolute",
+            inset: 2,
+            borderRadius: 4,
+            background: cornerGripActive
+              ? "rgba(251, 146, 60, 0.45)"
+              : cornerGripHovered
+                ? "rgba(251, 146, 60, 0.24)"
+                : "rgba(148, 163, 184, 0.28)",
+            border: cornerGripHovered
+              ? "1px solid rgba(251, 146, 60, 0.35)"
+              : "1px solid rgba(255, 255, 255, 0.18)",
+            boxShadow: cornerGripHovered
+              ? "0 0 12px rgba(251, 146, 60, 0.2)"
+              : "none",
+            transition:
+              "background 120ms ease, border-color 120ms ease, box-shadow 120ms ease",
+          }}
+        />
+      </div>
+
+      {resizePreview && sizeLabel && (
+        <div
+          aria-live="polite"
+          style={{
+            position: "absolute",
+            top: Math.max(0, previewPixelH - IMAGE_RESIZE_GUTTER - 24),
+            left: Math.max(0, previewPixelW - 70 - IMAGE_RESIZE_BADGE_OFFSET),
+            minWidth: 70,
+            padding: "2px 6px",
+            borderRadius: 999,
+            background: "rgba(15, 23, 42, 0.88)",
+            color: "rgba(248, 250, 252, 0.95)",
+            border: "1px solid rgba(251, 146, 60, 0.35)",
+            fontSize: 11,
+            lineHeight: 1.4,
+            textAlign: "center",
+            pointerEvents: "none",
+          }}
+        >
+          {sizeLabel}
+        </div>
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/hooks/use-image-editor-frame-actions.ts b/src/hooks/use-image-editor-frame-actions.ts
new file mode 100644
index 0000000..0652bb1
--- /dev/null
+++ b/src/hooks/use-image-editor-frame-actions.ts
@@ -0,0 +1,370 @@
+import { useCallback } from "react";
+import { v4 as uuidv4 } from "uuid";
+import * as pixelHistory from "@/lib/image-editor-history";
+import {
+  actionLog,
+  frameOpRedoStack,
+  frameOpUndoStack,
+  getLeafLayerIds,
+  layerDataKey,
+  moduleLayerFrameData,
+  paletteRedoStack,
+  redoLog,
+} from "@/lib/image-editor-document";
+import type { Frame, FrameId } from "@/types/image-editor";
+import type { ImageEditorFrameActionsParams } from "@/types/image-editor-hook-internals";
+import type { FrameMoveDirection } from "@/types/image-editor-hook-internals";
+
+export function useImageEditorFrameActions({
+  state,
+  setState,
+}: ImageEditorFrameActionsParams) {
+  const addFrame = useCallback(() => {
+    if (!state) return;
+
+    const newId = uuidv4() as FrameId;
+    const newFrame: Frame = {
+      id: newId,
+      name: `Frame ${state.frames.length + 1}`,
+      duration: 100,
+    };
+
+    const allLayerIds = getLeafLayerIds(
+      state.layerOrder,
+      state.layers,
+      state.imageLayers,
+      state.layerGroups,
+      true,
+    );
+    const savedLayerData = new Map<string, ImageData>();
+    for (const layerId of allLayerIds) {
+      const blank = new ImageData(state.width, state.height);
+      moduleLayerFrameData.set(layerDataKey(newId, layerId), blank);
+      savedLayerData.set(
+        layerId,
+        new ImageData(
+          new Uint8ClampedArray(blank.data),
+          blank.width,
+          blank.height,
+        ),
+      );
+    }
+
+    frameOpUndoStack.push({
+      type: "add",
+      frameId: newId,
+      frame: { ...newFrame },
+      index: state.frames.length,
+      layerData: savedLayerData,
+      prevFrameIndex: state.currentFrameIndex,
+    });
+    frameOpRedoStack.length = 0;
+    redoLog.length = 0;
+    paletteRedoStack.length = 0;
+    actionLog.push("frame");
+
+    setState((draft) => {
+      draft.frames.push(newFrame);
+      draft.currentFrameIndex = draft.frames.length - 1;
+    });
+  }, [state, setState]);
+
+  const duplicateFrame = useCallback(() => {
+    if (!state) return;
+
+    const sourceFrame = state.frames[state.currentFrameIndex];
+    if (!sourceFrame) return;
+
+    const newId = uuidv4() as FrameId;
+    const newFrame: Frame = {
+      id: newId,
+      name: `${sourceFrame.name} copy`,
+      duration: sourceFrame.duration,
+    };
+
+    const allLayerIds = getLeafLayerIds(
+      state.layerOrder,
+      state.layers,
+      state.imageLayers,
+      state.layerGroups,
+      true,
+    );
+    const savedLayerData = new Map<string, ImageData>();
+    for (const layerId of allLayerIds) {
+      const sourceData = moduleLayerFrameData.get(
+        layerDataKey(sourceFrame.id, layerId),
+      );
+      const copiedData = sourceData
+        ? new ImageData(
+            new Uint8ClampedArray(sourceData.data),
+            sourceData.width,
+            sourceData.height,
+          )
+        : new ImageData(state.width, state.height);
+      moduleLayerFrameData.set(layerDataKey(newId, layerId), copiedData);
+      savedLayerData.set(
+        layerId,
+        new ImageData(
+          new Uint8ClampedArray(copiedData.data),
+          copiedData.width,
+          copiedData.height,
+        ),
+      );
+    }
+
+    const insertIndex = state.currentFrameIndex + 1;
+    frameOpUndoStack.push({
+      type: "duplicate",
+      frameId: newId,
+      frame: { ...newFrame },
+      index: insertIndex,
+      layerData: savedLayerData,
+      prevFrameIndex: state.currentFrameIndex,
+    });
+    frameOpRedoStack.length = 0;
+    redoLog.length = 0;
+    paletteRedoStack.length = 0;
+    actionLog.push("frame");
+
+    setState((draft) => {
+      draft.frames.splice(draft.currentFrameIndex + 1, 0, newFrame);
+      draft.currentFrameIndex += 1;
+    });
+  }, [state, setState]);
+
+  const deleteFrame = useCallback(() => {
+    if (!state || state.frames.length <= 1) return;
+
+    const frameToDelete = state.frames[state.currentFrameIndex];
+    if (!frameToDelete) return;
+
+    const allLayerIds = getLeafLayerIds(
+      state.layerOrder,
+      state.layers,
+      state.imageLayers,
+      state.layerGroups,
+      true,
+    );
+    const savedLayerData = new Map<string, ImageData>();
+    for (const layerId of allLayerIds) {
+      const data = moduleLayerFrameData.get(layerDataKey(frameToDelete.id, layerId));
+      if (data) {
+        savedLayerData.set(
+          layerId,
+          new ImageData(
+            new Uint8ClampedArray(data.data),
+            data.width,
+            data.height,
+          ),
+        );
+      } else {
+        savedLayerData.set(layerId, new ImageData(state.width, state.height));
+      }
+    }
+
+    frameOpUndoStack.push({
+      type: "delete",
+      frameId: frameToDelete.id,
+      frame: { ...frameToDelete },
+      index: state.currentFrameIndex,
+      layerData: savedLayerData,
+      prevFrameIndex: state.currentFrameIndex,
+    });
+    frameOpRedoStack.length = 0;
+    redoLog.length = 0;
+    paletteRedoStack.length = 0;
+    actionLog.push("frame");
+
+    for (const layerId of allLayerIds) {
+      moduleLayerFrameData.delete(layerDataKey(frameToDelete.id, layerId));
+    }
+    pixelHistory.clearAllHistoryForFrame(frameToDelete.id);
+
+    setState((draft) => {
+      draft.frames.splice(draft.currentFrameIndex, 1);
+      if (draft.currentFrameIndex >= draft.frames.length) {
+        draft.currentFrameIndex = draft.frames.length - 1;
+      }
+    });
+  }, [state, setState]);
+
+  const moveFrame = useCallback(
+    (direction: FrameMoveDirection) => {
+      if (!state) return;
+
+      const { currentFrameIndex, frames } = state;
+      const targetIndex =
+        direction === "left" ? currentFrameIndex - 1 : currentFrameIndex + 1;
+      if (targetIndex < 0 || targetIndex >= frames.length) return;
+
+      setState((draft) => {
+        const temp = draft.frames[currentFrameIndex];
+        draft.frames[currentFrameIndex] = draft.frames[targetIndex];
+        draft.frames[targetIndex] = temp;
+        draft.currentFrameIndex = targetIndex;
+      });
+    },
+    [state, setState],
+  );
+
+  const setCurrentFrame = useCallback(
+    (index: number) => {
+      setState((draft) => {
+        draft.currentFrameIndex = Math.max(
+          0,
+          Math.min(index, draft.frames.length - 1),
+        );
+      });
+    },
+    [setState],
+  );
+
+  const setFrameDuration = useCallback(
+    (frameIndex: number, duration: number) => {
+      setState((draft) => {
+        if (draft.frames[frameIndex]) {
+          draft.frames[frameIndex].duration = duration;
+        }
+      });
+    },
+    [setState],
+  );
+
+  const undoFrameOp = useCallback((): boolean => {
+    if (frameOpUndoStack.length === 0) return false;
+
+    const operation = frameOpUndoStack.pop();
+    if (!operation) return false;
+
+    switch (operation.type) {
+      case "add":
+      case "duplicate": {
+        const savedLayerData = new Map<string, ImageData>();
+        for (const [layerId, imageData] of operation.layerData) {
+          const current = moduleLayerFrameData.get(
+            layerDataKey(operation.frameId, layerId),
+          );
+          savedLayerData.set(
+            layerId,
+            current
+              ? new ImageData(
+                  new Uint8ClampedArray(current.data),
+                  current.width,
+                  current.height,
+                )
+              : imageData,
+          );
+          moduleLayerFrameData.delete(layerDataKey(operation.frameId, layerId));
+        }
+        frameOpRedoStack.push({ ...operation, layerData: savedLayerData });
+        pixelHistory.clearAllHistoryForFrame(operation.frameId);
+        setState((draft) => {
+          const index = draft.frames.findIndex(
+            (frame) => frame.id === operation.frameId,
+          );
+          if (index >= 0) {
+            draft.frames.splice(index, 1);
+          }
+          draft.currentFrameIndex = Math.min(
+            operation.prevFrameIndex,
+            draft.frames.length - 1,
+          );
+        });
+        return true;
+      }
+      case "delete": {
+        for (const [layerId, imageData] of operation.layerData) {
+          moduleLayerFrameData.set(
+            layerDataKey(operation.frameId, layerId),
+            new ImageData(
+              new Uint8ClampedArray(imageData.data),
+              imageData.width,
+              imageData.height,
+            ),
+          );
+        }
+        frameOpRedoStack.push(operation);
+        setState((draft) => {
+          const index = Math.min(operation.index, draft.frames.length);
+          draft.frames.splice(index, 0, operation.frame);
+          draft.currentFrameIndex = index;
+        });
+        return true;
+      }
+    }
+  }, [setState]);
+
+  const redoFrameOp = useCallback((): boolean => {
+    if (frameOpRedoStack.length === 0) return false;
+
+    const operation = frameOpRedoStack.pop();
+    if (!operation) return false;
+
+    switch (operation.type) {
+      case "add":
+      case "duplicate": {
+        for (const [layerId, imageData] of operation.layerData) {
+          moduleLayerFrameData.set(
+            layerDataKey(operation.frameId, layerId),
+            new ImageData(
+              new Uint8ClampedArray(imageData.data),
+              imageData.width,
+              imageData.height,
+            ),
+          );
+        }
+        frameOpUndoStack.push(operation);
+        setState((draft) => {
+          const index = Math.min(operation.index, draft.frames.length);
+          draft.frames.splice(index, 0, operation.frame);
+          draft.currentFrameIndex = index;
+        });
+        return true;
+      }
+      case "delete": {
+        const savedLayerData = new Map<string, ImageData>();
+        for (const [layerId, imageData] of operation.layerData) {
+          const current = moduleLayerFrameData.get(
+            layerDataKey(operation.frameId, layerId),
+          );
+          savedLayerData.set(
+            layerId,
+            current
+              ? new ImageData(
+                  new Uint8ClampedArray(current.data),
+                  current.width,
+                  current.height,
+                )
+              : imageData,
+          );
+          moduleLayerFrameData.delete(layerDataKey(operation.frameId, layerId));
+        }
+        frameOpUndoStack.push({ ...operation, layerData: savedLayerData });
+        pixelHistory.clearAllHistoryForFrame(operation.frameId);
+        setState((draft) => {
+          const index = draft.frames.findIndex(
+            (frame) => frame.id === operation.frameId,
+          );
+          if (index >= 0) {
+            draft.frames.splice(index, 1);
+            if (draft.currentFrameIndex >= draft.frames.length) {
+              draft.currentFrameIndex = draft.frames.length - 1;
+            }
+          }
+        });
+        return true;
+      }
+    }
+  }, [setState]);
+
+  return {
+    addFrame,
+    duplicateFrame,
+    deleteFrame,
+    moveFrame,
+    setCurrentFrame,
+    setFrameDuration,
+    undoFrameOp,
+    redoFrameOp,
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/use-image-editor-layer-actions.ts b/src/hooks/use-image-editor-layer-actions.ts
new file mode 100644
index 0000000..894bd7a
--- /dev/null
+++ b/src/hooks/use-image-editor-layer-actions.ts
@@ -0,0 +1,563 @@
+import { useCallback } from "react";
+import { v4 as uuidv4 } from "uuid";
+import * as pixelHistory from "@/lib/image-editor-history";
+import {
+  insertAfterInOrder,
+  layerDataKey,
+  moduleLayerFrameData,
+} from "@/lib/image-editor-document";
+import { getImageEditorStore, isImageEditorStoreReady } from "@/lib/image-editor-store";
+import type {
+  ImageEditorGroupId,
+  ImageEditorImageLayer,
+  ImageEditorLayerGroup,
+  ImageEditorLayerId,
+  ImageEditorRasterLayer,
+} from "@/types/image-editor";
+import type {
+  ImageEditorLayerActionsParams,
+  LayerDropPosition,
+  LayerMoveDirection,
+} from "@/types/image-editor-hook-internals";
+
+export function useImageEditorLayerActions({
+  state,
+  setState,
+}: ImageEditorLayerActionsParams) {
+  const addRasterLayer = useCallback(
+    (name?: string) => {
+      if (!state) return;
+
+      const newId = uuidv4() as ImageEditorLayerId;
+      const layerCount = state.layers.length + state.imageLayers.length;
+      const layerName = name ?? `Layer ${layerCount + 1}`;
+
+      for (const frame of state.frames) {
+        moduleLayerFrameData.set(
+          layerDataKey(frame.id, newId),
+          new ImageData(state.width, state.height),
+        );
+      }
+
+      setState((draft) => {
+        const newLayer: ImageEditorRasterLayer = {
+          id: newId,
+          name: layerName,
+          visible: true,
+          locked: false,
+          type: "tile",
+        };
+        draft.layers.push(newLayer);
+        if (draft.activeLayerId) {
+          insertAfterInOrder(
+            draft.activeLayerId as string,
+            newId,
+            draft.layerOrder,
+            draft.layerGroups,
+          );
+        } else {
+          draft.layerOrder.push(newId);
+        }
+        draft.activeLayerId = newId;
+      });
+    },
+    [state, setState],
+  );
+
+  const addImageEditorImageLayer = useCallback(
+    (name?: string) => {
+      if (!state) return;
+
+      const fileInput = document.createElement("input");
+      fileInput.type = "file";
+      fileInput.accept = "image/png,image/jpeg,image/webp,image/gif";
+
+      fileInput.onchange = () => {
+        const file = fileInput.files?.[0];
+        if (!file) return;
+
+        const image = new Image();
+        const url = URL.createObjectURL(file);
+
+        image.onload = () => {
+          URL.revokeObjectURL(url);
+          if (!isImageEditorStoreReady()) return;
+
+          const currentState = getImageEditorStore().getState();
+          const canvas = document.createElement("canvas");
+          canvas.width = currentState.width;
+          canvas.height = currentState.height;
+          const context = canvas.getContext("2d");
+          if (!context) return;
+          context.imageSmoothingEnabled = false;
+          context.drawImage(image, 0, 0, currentState.width, currentState.height);
+          const imageData = context.getImageData(
+            0,
+            0,
+            currentState.width,
+            currentState.height,
+          );
+
+          const newId = uuidv4() as ImageEditorLayerId;
+          const baseName = name ?? file.name.replace(/\.[^/.]+$/, "") ?? "Image";
+
+          for (const frame of currentState.frames) {
+            moduleLayerFrameData.set(
+              layerDataKey(frame.id, newId),
+              new ImageData(
+                new Uint8ClampedArray(imageData.data),
+                imageData.width,
+                imageData.height,
+              ),
+            );
+          }
+
+          getImageEditorStore().setState((draft) => {
+            const newLayer: ImageEditorImageLayer = {
+              id: newId,
+              name: baseName,
+              visible: true,
+              locked: false,
+              type: "image",
+            };
+            draft.imageLayers.push(newLayer);
+            if (draft.activeLayerId) {
+              insertAfterInOrder(
+                draft.activeLayerId as string,
+                newId,
+                draft.layerOrder,
+                draft.layerGroups,
+              );
+            } else {
+              draft.layerOrder.push(newId);
+            }
+            draft.activeLayerId = newId;
+          });
+        };
+
+        image.onerror = () => {
+          URL.revokeObjectURL(url);
+        };
+
+        image.src = url;
+      };
+
+      fileInput.click();
+    },
+    [state],
+  );
+
+  const addImageEditorLayerGroup = useCallback(
+    (name?: string) => {
+      if (!state) return;
+
+      const newId = uuidv4() as ImageEditorGroupId;
+      setState((draft) => {
+        const newGroup: ImageEditorLayerGroup = {
+          id: newId,
+          name: name ?? "Group",
+          visible: true,
+          locked: false,
+          expanded: true,
+          childOrder: [],
+        };
+        draft.layerGroups.push(newGroup);
+        draft.layerOrder.push(newId);
+      });
+    },
+    [state, setState],
+  );
+
+  const deleteImageEditorLayer = useCallback(
+    (id: string) => {
+      if (!state) return;
+
+      for (const frame of state.frames) {
+        moduleLayerFrameData.delete(layerDataKey(frame.id, id));
+      }
+      pixelHistory.clearAllHistoryForFrame(id);
+
+      setState((draft) => {
+        draft.layerOrder = draft.layerOrder.filter(
+          (entry) => (entry as string) !== id,
+        ) as typeof draft.layerOrder;
+        for (const group of draft.layerGroups) {
+          group.childOrder = group.childOrder.filter(
+            (entry) => (entry as string) !== id,
+          ) as typeof group.childOrder;
+        }
+        draft.layers = draft.layers.filter((layer) => (layer.id as string) !== id);
+        draft.imageLayers = draft.imageLayers.filter(
+          (layer) => (layer.id as string) !== id,
+        );
+        if ((draft.activeLayerId as string) === id) {
+          const remaining = draft.layerOrder;
+          draft.activeLayerId =
+            remaining.length > 0
+              ? (remaining[remaining.length - 1] as ImageEditorLayerId)
+              : null;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const deleteImageEditorGroup = useCallback(
+    (groupId: string) => {
+      if (!state) return;
+
+      setState((draft) => {
+        const group = draft.layerGroups.find((entry) => (entry.id as string) === groupId);
+        if (!group) return;
+
+        function collectDescendants(
+          order: (ImageEditorLayerId | ImageEditorGroupId)[],
+        ): { layerIds: string[]; groupIds: string[] } {
+          const layerIds: string[] = [];
+          const groupIds: string[] = [];
+          for (const id of order) {
+            const nestedGroup = draft.layerGroups.find(
+              (entry) => (entry.id as string) === (id as string),
+            );
+            if (nestedGroup) {
+              groupIds.push(nestedGroup.id as string);
+              const child = collectDescendants(nestedGroup.childOrder);
+              layerIds.push(...child.layerIds);
+              groupIds.push(...child.groupIds);
+            } else {
+              layerIds.push(id as string);
+            }
+          }
+          return { layerIds, groupIds };
+        }
+
+        const { layerIds, groupIds } = collectDescendants(group.childOrder);
+        const allGroupIds = [groupId, ...groupIds];
+
+        draft.layers = draft.layers.filter(
+          (layer) => !layerIds.includes(layer.id as string),
+        );
+        draft.imageLayers = draft.imageLayers.filter(
+          (layer) => !layerIds.includes(layer.id as string),
+        );
+        draft.layerGroups = draft.layerGroups.filter(
+          (entry) => !allGroupIds.includes(entry.id as string),
+        );
+        draft.layerOrder = draft.layerOrder.filter(
+          (entry) => !allGroupIds.includes(entry as string),
+        ) as typeof draft.layerOrder;
+        for (const entry of draft.layerGroups) {
+          entry.childOrder = entry.childOrder.filter(
+            (childId) => !allGroupIds.includes(childId as string),
+          ) as typeof entry.childOrder;
+        }
+
+        if (
+          draft.activeLayerId &&
+          layerIds.includes(draft.activeLayerId as string)
+        ) {
+          const remaining = draft.layerOrder;
+          draft.activeLayerId =
+            remaining.length > 0
+              ? (remaining[remaining.length - 1] as ImageEditorLayerId)
+              : null;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const renameImageEditorLayer = useCallback(
+    (id: string, name: string) => {
+      if (!state || !name.trim()) return;
+
+      setState((draft) => {
+        const layer = draft.layers.find((entry) => (entry.id as string) === id);
+        if (layer) {
+          layer.name = name;
+          return;
+        }
+
+        const imageLayer = draft.imageLayers.find(
+          (entry) => (entry.id as string) === id,
+        );
+        if (imageLayer) {
+          imageLayer.name = name;
+          return;
+        }
+
+        const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+        if (group) {
+          group.name = name;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const toggleImageEditorLayerVisible = useCallback(
+    (id: string, isGroup: boolean) => {
+      if (!state) return;
+
+      setState((draft) => {
+        if (isGroup) {
+          const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+          if (group) {
+            group.visible = !group.visible;
+          }
+          return;
+        }
+
+        const layer = draft.layers.find((entry) => (entry.id as string) === id);
+        if (layer) {
+          layer.visible = !layer.visible;
+          return;
+        }
+
+        const imageLayer = draft.imageLayers.find(
+          (entry) => (entry.id as string) === id,
+        );
+        if (imageLayer) {
+          imageLayer.visible = !imageLayer.visible;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const toggleImageEditorLayerLocked = useCallback(
+    (id: string, isGroup: boolean) => {
+      if (!state) return;
+
+      setState((draft) => {
+        if (isGroup) {
+          const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+          if (group) {
+            group.locked = !group.locked;
+          }
+          return;
+        }
+
+        const layer = draft.layers.find((entry) => (entry.id as string) === id);
+        if (layer) {
+          layer.locked = !layer.locked;
+          return;
+        }
+
+        const imageLayer = draft.imageLayers.find(
+          (entry) => (entry.id as string) === id,
+        );
+        if (imageLayer) {
+          imageLayer.locked = !imageLayer.locked;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const setActiveImageEditorLayer = useCallback(
+    (id: string) => {
+      if (!state) return;
+      setState((draft) => {
+        draft.activeLayerId = id as ImageEditorLayerId;
+      });
+    },
+    [state, setState],
+  );
+
+  const toggleImageEditorGroupExpanded = useCallback(
+    (id: string) => {
+      if (!state) return;
+      setState((draft) => {
+        const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+        if (group) {
+          group.expanded = !group.expanded;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const moveImageEditorLayerItem = useCallback(
+    (id: string, direction: LayerMoveDirection, parentGroupId: string | null) => {
+      if (!state) return;
+
+      setState((draft) => {
+        let order: (ImageEditorLayerId | ImageEditorGroupId)[];
+        if (parentGroupId) {
+          const group = draft.layerGroups.find(
+            (entry) => (entry.id as string) === parentGroupId,
+          );
+          if (!group) return;
+          order = group.childOrder;
+        } else {
+          order = draft.layerOrder;
+        }
+
+        const index = (order as string[]).indexOf(id);
+        if (index === -1) return;
+        const targetIndex = direction === "up" ? index + 1 : index - 1;
+        if (targetIndex < 0 || targetIndex >= order.length) return;
+
+        const temp = order[index];
+        order[index] = order[targetIndex];
+        order[targetIndex] = temp;
+      });
+    },
+    [state, setState],
+  );
+
+  const duplicateImageEditorLayer = useCallback(
+    (id: string) => {
+      if (!state) return;
+
+      const newId = uuidv4() as ImageEditorLayerId;
+      for (const frame of state.frames) {
+        const sourceData = moduleLayerFrameData.get(layerDataKey(frame.id, id));
+        moduleLayerFrameData.set(
+          layerDataKey(frame.id, newId),
+          sourceData
+            ? new ImageData(
+                new Uint8ClampedArray(sourceData.data),
+                sourceData.width,
+                sourceData.height,
+              )
+            : new ImageData(state.width, state.height),
+        );
+      }
+
+      setState((draft) => {
+        const layer = draft.layers.find((entry) => (entry.id as string) === id);
+        if (layer) {
+          const copy: ImageEditorRasterLayer = {
+            ...layer,
+            id: newId,
+            name: `${layer.name} copy`,
+          };
+          draft.layers.push(copy);
+          insertAfterInOrder(id, newId, draft.layerOrder, draft.layerGroups);
+          draft.activeLayerId = newId;
+          return;
+        }
+
+        const imageLayer = draft.imageLayers.find(
+          (entry) => (entry.id as string) === id,
+        );
+        if (imageLayer) {
+          const copy: ImageEditorImageLayer = {
+            ...imageLayer,
+            id: newId,
+            name: `${imageLayer.name} copy`,
+          };
+          draft.imageLayers.push(copy);
+          insertAfterInOrder(id, newId, draft.layerOrder, draft.layerGroups);
+          draft.activeLayerId = newId;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const duplicateImageEditorGroup = useCallback(
+    (id: string) => {
+      if (!state) return;
+
+      const newGroupId = uuidv4() as ImageEditorGroupId;
+      setState((draft) => {
+        const sourceGroup = draft.layerGroups.find((entry) => (entry.id as string) === id);
+        if (!sourceGroup) return;
+
+        const copy: ImageEditorLayerGroup = {
+          ...sourceGroup,
+          id: newGroupId,
+          name: `${sourceGroup.name} copy`,
+          childOrder: [...sourceGroup.childOrder],
+        };
+        draft.layerGroups.push(copy);
+        insertAfterInOrder(id, newGroupId, draft.layerOrder, draft.layerGroups);
+      });
+    },
+    [state, setState],
+  );
+
+  const moveImageEditorLayerIntoOrder = useCallback(
+    (
+      dragId: string,
+      targetId: string,
+      position: LayerDropPosition,
+    ) => {
+      if (!state) return;
+
+      setState((draft) => {
+        const removeFromOrder = (
+          order: (ImageEditorLayerId | ImageEditorGroupId)[],
+        ) => {
+          const index = (order as string[]).indexOf(dragId);
+          if (index !== -1) {
+            order.splice(index, 1);
+          }
+        };
+
+        removeFromOrder(draft.layerOrder);
+        for (const group of draft.layerGroups) {
+          removeFromOrder(group.childOrder);
+        }
+
+        if (position === "inside") {
+          const targetGroup = draft.layerGroups.find(
+            (entry) => (entry.id as string) === targetId,
+          );
+          if (targetGroup) {
+            targetGroup.childOrder.push(
+              dragId as ImageEditorLayerId | ImageEditorGroupId,
+            );
+            targetGroup.expanded = true;
+          }
+          return;
+        }
+
+        let targetOrder: (ImageEditorLayerId | ImageEditorGroupId)[] | null = null;
+        if ((draft.layerOrder as string[]).includes(targetId)) {
+          targetOrder = draft.layerOrder;
+        } else {
+          for (const group of draft.layerGroups) {
+            if ((group.childOrder as string[]).includes(targetId)) {
+              targetOrder = group.childOrder;
+              break;
+            }
+          }
+        }
+
+        if (targetOrder) {
+          const targetIndex = (targetOrder as string[]).indexOf(targetId);
+          if (targetIndex !== -1) {
+            const insertIndex = position === "above" ? targetIndex + 1 : targetIndex;
+            targetOrder.splice(
+              insertIndex,
+              0,
+              dragId as ImageEditorLayerId | ImageEditorGroupId,
+            );
+          }
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  return {
+    addRasterLayer,
+    addImageEditorImageLayer,
+    addImageEditorLayerGroup,
+    deleteImageEditorLayer,
+    deleteImageEditorGroup,
+    renameImageEditorLayer,
+    toggleImageEditorLayerVisible,
+    toggleImageEditorLayerLocked,
+    setActiveImageEditorLayer,
+    toggleImageEditorGroupExpanded,
+    moveImageEditorLayerItem,
+    duplicateImageEditorLayer,
+    duplicateImageEditorGroup,
+    moveImageEditorLayerIntoOrder,
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/use-image-editor-palette-actions.ts b/src/hooks/use-image-editor-palette-actions.ts
new file mode 100644
index 0000000..e34b8cc
--- /dev/null
+++ b/src/hooks/use-image-editor-palette-actions.ts
@@ -0,0 +1,337 @@
+import { useCallback } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { parseAsePalette, writeAsePalette } from "@/lib/ase-palette";
+import {
+  downloadBlob,
+  getActivePaletteIndex,
+  paletteRedoStack,
+  paletteUndoStack,
+  snapshotPaletteLibrary,
+} from "@/lib/image-editor-document";
+import { getImageEditorStore, isImageEditorStoreReady } from "@/lib/image-editor-store";
+import {
+  parseGpl,
+  parseHex,
+  parseJascPal,
+  parsePaintNetTxt,
+  parsePng,
+  writeGpl,
+  writeHex,
+  writeJascPal,
+  writePaintNetTxt,
+  writePng,
+} from "@/lib/palette-formats";
+import { parsePhotoshopAse, writePhotoshopAse } from "@/lib/photoshop-ase";
+import { DEFAULT_PALETTE_COLORS, getActivePalette } from "@/types/image-editor";
+import type {
+  Color,
+  Palette,
+  PaletteId,
+} from "@/types/image-editor";
+import type {
+  PaletteExportFormat,
+  PngSwatchSize,
+} from "@/types/image-editor-hook";
+import type { ImageEditorPaletteActionsParams } from "@/types/image-editor-hook-internals";
+import { actionLog, frameOpRedoStack, redoLog } from "@/lib/image-editor-document";
+
+export function useImageEditorPaletteActions({
+  state,
+  setState,
+}: ImageEditorPaletteActionsParams) {
+  const addPaletteColor = useCallback(
+    (color: Color) => {
+      if (state) {
+        paletteUndoStack.push(snapshotPaletteLibrary(state));
+        paletteRedoStack.length = 0;
+        frameOpRedoStack.length = 0;
+        redoLog.length = 0;
+        actionLog.push("palette");
+      }
+      setState((draft) => {
+        draft.palettes[getActivePaletteIndex(draft)].colors.push(color);
+      });
+    },
+    [state, setState],
+  );
+
+  const removePaletteColor = useCallback(
+    (index: number) => {
+      if (state) {
+        paletteUndoStack.push(snapshotPaletteLibrary(state));
+        paletteRedoStack.length = 0;
+        frameOpRedoStack.length = 0;
+        redoLog.length = 0;
+        actionLog.push("palette");
+      }
+      setState((draft) => {
+        draft.palettes[getActivePaletteIndex(draft)].colors.splice(index, 1);
+      });
+    },
+    [state, setState],
+  );
+
+  const updatePaletteColor = useCallback(
+    (index: number, color: Color) => {
+      setState((draft) => {
+        const palette = draft.palettes[getActivePaletteIndex(draft)];
+        if (palette.colors[index]) {
+          palette.colors[index] = color;
+        }
+      });
+    },
+    [setState],
+  );
+
+  const resetPalette = useCallback(() => {
+    if (state) {
+      paletteUndoStack.push(snapshotPaletteLibrary(state));
+      paletteRedoStack.length = 0;
+      frameOpRedoStack.length = 0;
+      redoLog.length = 0;
+      actionLog.push("palette");
+    }
+    setState((draft) => {
+      const palette = draft.palettes[getActivePaletteIndex(draft)];
+      palette.colors = [...DEFAULT_PALETTE_COLORS];
+    });
+  }, [state, setState]);
+
+  const importPalette = useCallback(
+    async (file: File) => {
+      const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+      let colors: Color[] = [];
+
+      if (ext === "aseprite") {
+        colors = parseAsePalette(await file.arrayBuffer());
+      } else if (ext === "ase") {
+        const buffer = await file.arrayBuffer();
+        const signature = new DataView(buffer).getUint32(0, false);
+        colors = signature === 0x41534546
+          ? parsePhotoshopAse(buffer)
+          : parseAsePalette(buffer);
+      } else if (ext === "gpl") {
+        colors = parseGpl(await file.text());
+      } else if (ext === "pal") {
+        colors = parseJascPal(await file.text());
+      } else if (ext === "txt") {
+        colors = parsePaintNetTxt(await file.text());
+      } else if (ext === "hex") {
+        colors = parseHex(await file.text());
+      } else if (ext === "png") {
+        colors = await parsePng(await file.arrayBuffer());
+      }
+
+      if (colors.length === 0) return;
+
+      if (isImageEditorStoreReady()) {
+        const currentState = getImageEditorStore().getState();
+        paletteUndoStack.push(snapshotPaletteLibrary(currentState));
+        paletteRedoStack.length = 0;
+        frameOpRedoStack.length = 0;
+        redoLog.length = 0;
+        actionLog.push("palette");
+      }
+
+      const paletteName = file.name.replace(/\.[^.]+$/, "");
+      const newId = uuidv4() as PaletteId;
+      setState((draft) => {
+        draft.palettes.push({
+          id: newId,
+          name: paletteName,
+          colors,
+        });
+        draft.activePaletteId = newId;
+      });
+    },
+    [setState],
+  );
+
+  const exportPalette = useCallback(
+    async (
+      format: PaletteExportFormat = "ase",
+      swatchSize: PngSwatchSize = 16,
+    ) => {
+      if (!state) return;
+
+      const activePalette = getActivePalette(state);
+      const baseName = activePalette.name || "palette";
+      const colors = activePalette.colors;
+
+      let blob: Blob;
+      let filename: string;
+
+      if (format === "ase") {
+        const buffer = writePhotoshopAse(colors);
+        blob = new Blob([buffer], { type: "application/octet-stream" });
+        filename = `${baseName}.ase`;
+      } else if (format === "aseprite") {
+        const buffer = writeAsePalette(colors);
+        blob = new Blob([buffer], { type: "application/octet-stream" });
+        filename = `${baseName}.aseprite`;
+      } else if (format === "gpl") {
+        blob = new Blob([writeGpl(colors, baseName)], { type: "text/plain" });
+        filename = `${baseName}.gpl`;
+      } else if (format === "pal") {
+        blob = new Blob([writeJascPal(colors)], { type: "text/plain" });
+        filename = `${baseName}.pal`;
+      } else if (format === "txt") {
+        blob = new Blob([writePaintNetTxt(colors, baseName)], {
+          type: "text/plain",
+        });
+        filename = `${baseName}.txt`;
+      } else if (format === "hex") {
+        blob = new Blob([writeHex(colors)], { type: "text/plain" });
+        filename = `${baseName}.hex`;
+      } else {
+        blob = await writePng(colors, swatchSize);
+        filename = `${baseName}-${swatchSize}px.png`;
+      }
+
+      downloadBlob(blob, filename);
+    },
+    [state],
+  );
+
+  const switchPalette = useCallback(
+    (id: PaletteId) => {
+      setState((draft) => {
+        if (draft.palettes.some((palette) => palette.id === id)) {
+          draft.activePaletteId = id;
+        }
+      });
+    },
+    [setState],
+  );
+
+  const renamePalette = useCallback(
+    (id: PaletteId, name: string) => {
+      if (state) {
+        paletteUndoStack.push(snapshotPaletteLibrary(state));
+        paletteRedoStack.length = 0;
+        frameOpRedoStack.length = 0;
+        redoLog.length = 0;
+        actionLog.push("palette");
+      }
+      setState((draft) => {
+        const palette = draft.palettes.find((entry) => entry.id === id);
+        if (palette) {
+          palette.name = name;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const deletePalette = useCallback(
+    (id: PaletteId) => {
+      if (!state || state.palettes.length <= 1) return;
+
+      paletteUndoStack.push(snapshotPaletteLibrary(state));
+      paletteRedoStack.length = 0;
+      frameOpRedoStack.length = 0;
+      redoLog.length = 0;
+      actionLog.push("palette");
+      setState((draft) => {
+        const index = draft.palettes.findIndex((palette) => palette.id === id);
+        if (index < 0) return;
+
+        draft.palettes.splice(index, 1);
+        if (draft.activePaletteId === id) {
+          draft.activePaletteId =
+            draft.palettes[Math.min(index, draft.palettes.length - 1)].id;
+        }
+      });
+    },
+    [state, setState],
+  );
+
+  const duplicatePalette = useCallback(
+    (id: PaletteId) => {
+      if (!state) return;
+
+      const source = state.palettes.find((palette) => palette.id === id);
+      if (!source) return;
+
+      paletteUndoStack.push(snapshotPaletteLibrary(state));
+      paletteRedoStack.length = 0;
+      frameOpRedoStack.length = 0;
+      redoLog.length = 0;
+      actionLog.push("palette");
+
+      const newId = uuidv4() as PaletteId;
+      const sourceColors = source.colors.map((color) => ({ ...color }));
+      setState((draft) => {
+        const sourceIndex = draft.palettes.findIndex((palette) => palette.id === id);
+        draft.palettes.splice(sourceIndex + 1, 0, {
+          id: newId,
+          name: `${source.name} (copy)`,
+          colors: sourceColors,
+        });
+        draft.activePaletteId = newId;
+      });
+    },
+    [state, setState],
+  );
+
+  const reorderPaletteColors = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (!state || fromIndex === toIndex) return;
+
+      paletteUndoStack.push(snapshotPaletteLibrary(state));
+      paletteRedoStack.length = 0;
+      frameOpRedoStack.length = 0;
+      redoLog.length = 0;
+      actionLog.push("palette");
+
+      setState((draft) => {
+        const palette = draft.palettes[getActivePaletteIndex(draft)];
+        const colors = palette.colors;
+        if (
+          fromIndex < 0 ||
+          fromIndex >= colors.length ||
+          toIndex < 0 ||
+          toIndex >= colors.length
+        ) {
+          return;
+        }
+
+        const [moved] = colors.splice(fromIndex, 1);
+        colors.splice(toIndex, 0, moved);
+      });
+    },
+    [state, setState],
+  );
+
+  const restorePaletteLibrary = useCallback(
+    (palettes: Palette[]) => {
+      if (!isImageEditorStoreReady() || palettes.length === 0) return;
+
+      paletteUndoStack.length = 0;
+      paletteRedoStack.length = 0;
+      setState((draft) => {
+        draft.palettes = palettes.map((palette) => ({
+          ...palette,
+          colors: palette.colors.map((color) => ({ ...color })),
+        }));
+        draft.activePaletteId = palettes[0].id;
+      });
+    },
+    [setState],
+  );
+
+  return {
+    addPaletteColor,
+    removePaletteColor,
+    updatePaletteColor,
+    resetPalette,
+    importPalette,
+    exportPalette,
+    switchPalette,
+    renamePalette,
+    deletePalette,
+    duplicatePalette,
+    reorderPaletteColors,
+    restorePaletteLibrary,
+  };
+}
\ No newline at end of file
diff --git a/src/hooks/use-image-editor.ts b/src/hooks/use-image-editor.ts
index 9f00d2d..313ec29 100644
--- a/src/hooks/use-image-editor.ts
+++ b/src/hooks/use-image-editor.ts
@@ -12,481 +12,49 @@ import {
   useRef,
   useSyncExternalStore,
 } from "react";
-import { v4 as uuidv4 } from "uuid";
+import { useImageEditorFrameActions } from "@/hooks/use-image-editor-frame-actions";
+import { useImageEditorLayerActions } from "@/hooks/use-image-editor-layer-actions";
+import { useImageEditorPaletteActions } from "@/hooks/use-image-editor-palette-actions";
 import {
   initImageEditorStore,
   getImageEditorStore,
   isImageEditorStoreReady,
-  destroyImageEditorStore,
   subscribeToImageEditorStoreInstance,
 } from "@/lib/image-editor-store";
-import { getPendingImageLayerEditorRequest } from "@/lib/image-layer-editor-context";
-import { getPendingTileEditorRequest } from "@/lib/tile-editor-context";
 import * as pixelHistory from "@/lib/image-editor-history";
-import { resetCropState, resetSelectionState } from "@/lib/image-editor-tools";
-import { parseAsePalette, writeAsePalette } from "@/lib/ase-palette";
-import { parsePhotoshopAse, writePhotoshopAse } from "@/lib/photoshop-ase";
 import {
-  parseGpl,
-  parseJascPal,
-  parsePaintNetTxt,
-  parseHex,
-  parsePng,
-  writeGpl,
-  writeJascPal,
-  writePaintNetTxt,
-  writeHex,
-  writePng,
-} from "@/lib/palette-formats";
+  actionLog,
+  canvasToPngBlob,
+  captureResizeSnapshot,
+  clearEditorSelectionState,
+  computeComposite,
+  computeCompositeAboveLayer,
+  computeCompositeBelowLayer,
+  downloadBlob,
+  ensureStoreReady,
+  frameOpRedoStack,
+  getLeafLayerIds,
+  hasUnsavedImageChanges as hasUnsavedDocumentChanges,
+  layerDataKey,
+  markSavePoint as markDocumentSavePoint,
+  moduleLayerFrameData,
+  paletteRedoStack,
+  paletteUndoStack,
+  redoLog,
+  resetImageEditorDocumentState,
+  resizeRedoStack,
+  resizeUndoStack,
+  restoreResizeSnapshot,
+  snapshotPaletteLibrary,
+} from "@/lib/image-editor-document";
 import type {
-  Frame,
   FrameId,
   Color,
   Palette,
   ImageEditorTool,
   ImageEditorState,
-  PaletteId,
   PixelSelection,
-  ImageEditorLayerId,
-  ImageEditorGroupId,
-  ImageEditorRasterLayer,
-  ImageEditorImageLayer,
-  ImageEditorLayerGroup,
 } from "@/types/image-editor";
-import { DEFAULT_PALETTE_COLORS, getActivePalette } from "@/types/image-editor";
-import type {
-  FrameOperation,
-  PaletteExportFormat,
-  PaletteLibrarySnapshot,
-  PngSwatchSize,
-  ResizeOperation,
-  ResizeSnapshot,
-  UndoableActionType,
-} from "@/types/image-editor-hook";
-
-// ---------------------------------------------------------------------------
-// Module-level per-layer pixel data — survives component unmount/remount.
-// Key format: "${frameId}:${layerId}"
-// ---------------------------------------------------------------------------
-
-const moduleLayerFrameData: Map<string, ImageData> = new Map();
-let savedDocumentFingerprint: string | null = null;
-
-function hashPixelBuffer(data: Uint8ClampedArray): string {
-  let hash = 2166136261;
-  for (let index = 0; index < data.length; index += 1) {
-    hash ^= data[index]!;
-    hash = Math.imul(hash, 16777619);
-  }
-  return (hash >>> 0).toString(36);
-}
-
-function buildSaveFingerprint(state: ImageEditorState | null): string | null {
-  if (!state) return null;
-
-  const allLayerIds = getLeafLayerIds(
-    state.layerOrder,
-    state.layers,
-    state.imageLayers,
-    state.layerGroups,
-    true,
-  );
-
-  const parts: string[] = [
-    `size:${state.width}x${state.height}`,
-    `fps:${state.fps}`,
-    `frames:${state.frames
-      .map((frame) => `${frame.id}:${frame.duration}`)
-      .join(",")}`,
-    `layers:${state.layers
-      .map((layer) => `${layer.id}:${layer.visible ? 1 : 0}`)
-      .join(",")}`,
-    `images:${state.imageLayers
-      .map((layer) => `${layer.id}:${layer.visible ? 1 : 0}`)
-      .join(",")}`,
-    `groups:${state.layerGroups
-      .map(
-        (group) =>
-          `${group.id}:${group.visible ? 1 : 0}:${group.childOrder.join(".")}`,
-      )
-      .join(",")}`,
-    `order:${state.layerOrder.join(",")}`,
-  ];
-
-  for (const frame of state.frames) {
-    for (const layerId of allLayerIds) {
-      const imageData = moduleLayerFrameData.get(
-        layerDataKey(frame.id, layerId),
-      );
-      parts.push(
-        `${frame.id}:${layerId}:${imageData ? hashPixelBuffer(imageData.data) : "empty"}`,
-      );
-    }
-  }
-
-  return parts.join("|");
-}
-
-async function canvasToPngBlob(
-  canvas: HTMLCanvasElement,
-): Promise<Blob | null> {
-  return new Promise((resolve) => {
-    canvas.toBlob(resolve, "image/png");
-  });
-}
-
-function downloadBlob(blob: Blob, filename: string): void {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.click();
-  URL.revokeObjectURL(url);
-}
-
-/** Build the map key for a frame + layer combination. */
-function layerDataKey(frameId: string, layerId: string): string {
-  return `${frameId}:${layerId}`;
-}
-
-function cloneImageData(imageData: ImageData): ImageData {
-  return new ImageData(
-    new Uint8ClampedArray(imageData.data),
-    imageData.width,
-    imageData.height,
-  );
-}
-
-/**
- * Return all leaf (non-group) layer IDs in bottom-to-top render order,
- * respecting group visibility. Pass `ignoreVisibility = true` to include
- * hidden layers (needed for resize, delete, etc.).
- */
-function getLeafLayerIds(
-  order: readonly (ImageEditorLayerId | ImageEditorGroupId)[],
-  layers: readonly ImageEditorRasterLayer[],
-  imageLayers: readonly ImageEditorImageLayer[],
-  groups: readonly ImageEditorLayerGroup[],
-  ignoreVisibility = false,
-  parentVisible = true,
-): string[] {
-  const result: string[] = [];
-  for (const id of order) {
-    const group = groups.find((g) => (g.id as string) === (id as string));
-    if (group) {
-      const childVis = ignoreVisibility || (parentVisible && group.visible);
-      result.push(
-        ...getLeafLayerIds(
-          group.childOrder,
-          layers,
-          imageLayers,
-          groups,
-          ignoreVisibility,
-          childVis,
-        ),
-      );
-    } else {
-      const layer =
-        layers.find((l) => (l.id as string) === (id as string)) ??
-        imageLayers.find((l) => (l.id as string) === (id as string));
-      if (layer) {
-        if (ignoreVisibility || (parentVisible && layer.visible)) {
-          result.push(id as string);
-        }
-      }
-    }
-  }
-  return result;
-}
-
-function getDocumentLayerDataKeys(state: ImageEditorState): string[] {
-  const keys: string[] = [];
-  const allLayerIds = getLeafLayerIds(
-    state.layerOrder,
-    state.layers,
-    state.imageLayers,
-    state.layerGroups,
-    true,
-  );
-
-  for (const frame of state.frames) {
-    for (const layerId of allLayerIds) {
-      keys.push(layerDataKey(frame.id, layerId));
-    }
-  }
-
-  return keys;
-}
-
-function captureResizeSnapshot(state: ImageEditorState): ResizeSnapshot {
-  const layerData = new Map<string, ImageData>();
-
-  for (const key of getDocumentLayerDataKeys(state)) {
-    const current = moduleLayerFrameData.get(key);
-    layerData.set(
-      key,
-      current
-        ? cloneImageData(current)
-        : new ImageData(state.width, state.height),
-    );
-  }
-
-  return {
-    width: state.width,
-    height: state.height,
-    layerData,
-  };
-}
-
-function clearEditorSelectionState(): void {
-  resetSelectionState();
-  resetCropState();
-}
-
-function restoreResizeSnapshot(snapshot: ResizeSnapshot): void {
-  const store = getImageEditorStore();
-  const currentState = store.getState();
-
-  for (const key of getDocumentLayerDataKeys(currentState)) {
-    if (!snapshot.layerData.has(key)) {
-      moduleLayerFrameData.delete(key);
-    }
-  }
-
-  for (const [key, imageData] of snapshot.layerData) {
-    moduleLayerFrameData.set(key, cloneImageData(imageData));
-  }
-
-  clearEditorSelectionState();
-  store.setState((draft) => {
-    draft.width = snapshot.width;
-    draft.height = snapshot.height;
-    draft.selection = null;
-    draft.pixelDataVersion = (draft.pixelDataVersion ?? 0) + 1;
-  });
-}
-
-/**
- * Composite all visible layers for the given frame into a single ImageData.
- * Layers are blended bottom-to-top (index 0 = bottom, last = top).
- */
-function computeComposite(frameId: string, state: ImageEditorState): ImageData {
-  const { width, height } = state;
-  const visibleIds = getLeafLayerIds(
-    state.layerOrder,
-    state.layers,
-    state.imageLayers,
-    state.layerGroups,
-  );
-
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d", { willReadFrequently: true })!;
-
-  for (const layerId of visibleIds) {
-    const data = moduleLayerFrameData.get(layerDataKey(frameId, layerId));
-    if (!data) continue;
-    const tmp = document.createElement("canvas");
-    tmp.width = width;
-    tmp.height = height;
-    const tCtx = tmp.getContext("2d")!;
-    tCtx.putImageData(data, 0, 0);
-    ctx.drawImage(tmp, 0, 0);
-  }
-
-  return ctx.getImageData(0, 0, width, height);
-}
-
-/**
- * Composite all visible layers BELOW `activeLayerId` into one ImageData.
- * Used to render the background reference canvas in the image editor.
- */
-function computeCompositeBelowLayer(
-  frameId: string,
-  activeLayerId: string,
-  state: ImageEditorState,
-): ImageData {
-  const { width, height } = state;
-  const allVisible = getLeafLayerIds(
-    state.layerOrder,
-    state.layers,
-    state.imageLayers,
-    state.layerGroups,
-  );
-  const activeIdx = allVisible.indexOf(activeLayerId);
-  const belowIds = activeIdx > 0 ? allVisible.slice(0, activeIdx) : [];
-
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d", { willReadFrequently: true })!;
-
-  for (const layerId of belowIds) {
-    const data = moduleLayerFrameData.get(layerDataKey(frameId, layerId));
-    if (!data) continue;
-    const tmp = document.createElement("canvas");
-    tmp.width = width;
-    tmp.height = height;
-    const tCtx = tmp.getContext("2d")!;
-    tCtx.putImageData(data, 0, 0);
-    ctx.drawImage(tmp, 0, 0);
-  }
-
-  return ctx.getImageData(0, 0, width, height);
-}
-
-/**
- * Composite all visible layers ABOVE `activeLayerId` into one ImageData.
- * Used to render the foreground overlay canvas in the image editor.
- */
-function computeCompositeAboveLayer(
-  frameId: string,
-  activeLayerId: string,
-  state: ImageEditorState,
-): ImageData {
-  const { width, height } = state;
-  const allVisible = getLeafLayerIds(
-    state.layerOrder,
-    state.layers,
-    state.imageLayers,
-    state.layerGroups,
-  );
-  const activeIdx = allVisible.indexOf(activeLayerId);
-  const aboveIds =
-    activeIdx >= 0 && activeIdx < allVisible.length - 1
-      ? allVisible.slice(activeIdx + 1)
-      : [];
-
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d", { willReadFrequently: true })!;
-
-  for (const layerId of aboveIds) {
-    const data = moduleLayerFrameData.get(layerDataKey(frameId, layerId));
-    if (!data) continue;
-    const tmp = document.createElement("canvas");
-    tmp.width = width;
-    tmp.height = height;
-    const tCtx = tmp.getContext("2d")!;
-    tCtx.putImageData(data, 0, 0);
-    ctx.drawImage(tmp, 0, 0);
-  }
-
-  return ctx.getImageData(0, 0, width, height);
-}
-
-// ---------------------------------------------------------------------------
-// Frame operation undo/redo stacks
-// ---------------------------------------------------------------------------
-
-const frameOpUndoStack: FrameOperation[] = [];
-const frameOpRedoStack: FrameOperation[] = [];
-
-// ---------------------------------------------------------------------------
-// Palette undo/redo history
-// ---------------------------------------------------------------------------
-
-const paletteUndoStack: PaletteLibrarySnapshot[] = [];
-const paletteRedoStack: PaletteLibrarySnapshot[] = [];
-
-// ---------------------------------------------------------------------------
-// Document resize undo/redo history
-// ---------------------------------------------------------------------------
-
-const resizeUndoStack: ResizeOperation[] = [];
-const resizeRedoStack: ResizeOperation[] = [];
-
-function snapshotPaletteLibrary(s: ImageEditorState): PaletteLibrarySnapshot {
-  return {
-    palettes: s.palettes.map((p) => ({
-      ...p,
-      colors: p.colors.map((c) => ({ ...c })),
-    })),
-    activePaletteId: s.activePaletteId,
-  };
-}
-
-function getActivePaletteIndex(s: ImageEditorState): number {
-  const idx = s.palettes.findIndex((p) => p.id === s.activePaletteId);
-  return idx >= 0 ? idx : 0;
-}
-
-// ---------------------------------------------------------------------------
-// Unified action ordering log (maintains chronological undo/redo order)
-// ---------------------------------------------------------------------------
-
-const actionLog: UndoableActionType[] = [];
-const redoLog: UndoableActionType[] = [];
-
-// ---------------------------------------------------------------------------
-// Layer helper
-// ---------------------------------------------------------------------------
-
-/**
- * Insert newId immediately after refId in whichever order array contains refId.
- * Falls back to appending at the top level if refId is not found.
- */
-function insertAfterInOrder(
-  refId: string,
-  newId: ImageEditorLayerId | ImageEditorGroupId,
-  topOrder: (ImageEditorLayerId | ImageEditorGroupId)[],
-  groups: ImageEditorLayerGroup[],
-) {
-  const topIdx = (topOrder as string[]).indexOf(refId);
-  if (topIdx !== -1) {
-    topOrder.splice(topIdx + 1, 0, newId);
-    return;
-  }
-  for (const g of groups) {
-    const idx = (g.childOrder as string[]).indexOf(refId);
-    if (idx !== -1) {
-      g.childOrder.splice(idx + 1, 0, newId);
-      return;
-    }
-  }
-  topOrder.push(newId);
-}
-
-/**
- * Ensure the image editor store is initialized.
- * If it's already ready, this is a no-op.
- * Otherwise creates a default 16×16 canvas.
- */
-function ensureStoreReady() {
-  if (isImageEditorStoreReady()) return;
-
-  const pendingTileRequest = getPendingTileEditorRequest();
-  const pendingImageLayerRequest = getPendingImageLayerEditorRequest();
-  const w = pendingTileRequest?.context.sw
-    ? pendingTileRequest.context.sw
-    : pendingImageLayerRequest?.context.width &&
-        pendingImageLayerRequest.context.width > 0
-      ? pendingImageLayerRequest.context.width
-      : 16;
-  const h = pendingTileRequest?.context.sh
-    ? pendingTileRequest.context.sh
-    : pendingImageLayerRequest?.context.height &&
-        pendingImageLayerRequest.context.height > 0
-      ? pendingImageLayerRequest.context.height
-      : 16;
-  initImageEditorStore(w, h);
-
-  const store = getImageEditorStore();
-  const s = store.getState();
-  // Initialize blank pixel data for the first layer of the first frame
-  if (s.frames.length > 0 && s.layers.length > 0) {
-    const key = layerDataKey(s.frames[0].id, s.layers[0].id);
-    if (!moduleLayerFrameData.has(key)) {
-      moduleLayerFrameData.set(key, new ImageData(w, h));
-    }
-  }
-
-  if (savedDocumentFingerprint === null) {
-    savedDocumentFingerprint = buildSaveFingerprint(s);
-  }
-}
 
 // ---------------------------------------------------------------------------
 // Hook
@@ -545,20 +113,7 @@ export function useImageEditor() {
 
   const initProject = useCallback(
     (width: number, height: number, initialPalettes?: Palette[]) => {
-      // Tear down any previous instance
-      destroyImageEditorStore();
-      pixelHistory.clearAllHistory();
-      moduleLayerFrameData.clear();
-      paletteUndoStack.length = 0;
-      paletteRedoStack.length = 0;
-      frameOpUndoStack.length = 0;
-      frameOpRedoStack.length = 0;
-      resizeUndoStack.length = 0;
-      resizeRedoStack.length = 0;
-      actionLog.length = 0;
-      redoLog.length = 0;
-      savedDocumentFingerprint = null;
-
+      resetImageEditorDocumentState();
       initImageEditorStore(width, height, initialPalettes);
 
       // Create initial blank ImageData for the first layer of frame 1
@@ -791,346 +346,8 @@ export function useImageEditor() {
     return pixelHistory.redo(key, data);
   }, [getCurrentFrameId, state?.activeLayerId]);
 
-  // -----------------------------------------------------------------------
-  // Frame management
-  // -----------------------------------------------------------------------
-
-  const addFrame = useCallback(() => {
-    if (!state) return;
-    const newId = uuidv4() as FrameId;
-    const newFrame: Frame = {
-      id: newId,
-      name: `Frame ${state.frames.length + 1}`,
-      duration: 100,
-    };
-
-    // Create blank pixel data for every leaf layer in the new frame
-    const allLayerIds = getLeafLayerIds(
-      state.layerOrder,
-      state.layers,
-      state.imageLayers,
-      state.layerGroups,
-      true,
-    );
-    const savedLayerData = new Map<string, ImageData>();
-    for (const layerId of allLayerIds) {
-      const blank = new ImageData(state.width, state.height);
-      moduleLayerFrameData.set(layerDataKey(newId, layerId), blank);
-      savedLayerData.set(
-        layerId,
-        new ImageData(
-          new Uint8ClampedArray(blank.data),
-          blank.width,
-          blank.height,
-        ),
-      );
-    }
-
-    // Record for undo
-    frameOpUndoStack.push({
-      type: "add",
-      frameId: newId,
-      frame: { ...newFrame },
-      index: state.frames.length,
-      layerData: savedLayerData,
-      prevFrameIndex: state.currentFrameIndex,
-    });
-    frameOpRedoStack.length = 0;
-    redoLog.length = 0;
-    paletteRedoStack.length = 0;
-    actionLog.push("frame");
-
-    setState((d) => {
-      d.frames.push(newFrame);
-      d.currentFrameIndex = d.frames.length - 1;
-    });
-  }, [state, setState]);
-
-  const duplicateFrame = useCallback(() => {
-    if (!state) return;
-    const srcFrame = state.frames[state.currentFrameIndex];
-    if (!srcFrame) return;
-
-    const newId = uuidv4() as FrameId;
-    const newFrame: Frame = {
-      id: newId,
-      name: `${srcFrame.name} copy`,
-      duration: srcFrame.duration,
-    };
-
-    // Deep copy per-layer pixel data from the source frame
-    const allLayerIds = getLeafLayerIds(
-      state.layerOrder,
-      state.layers,
-      state.imageLayers,
-      state.layerGroups,
-      true,
-    );
-    const savedLayerData = new Map<string, ImageData>();
-    for (const layerId of allLayerIds) {
-      const srcData = moduleLayerFrameData.get(
-        layerDataKey(srcFrame.id, layerId),
-      );
-      const copyData = srcData
-        ? new ImageData(
-            new Uint8ClampedArray(srcData.data),
-            srcData.width,
-            srcData.height,
-          )
-        : new ImageData(state.width, state.height);
-      moduleLayerFrameData.set(layerDataKey(newId, layerId), copyData);
-      savedLayerData.set(
-        layerId,
-        new ImageData(
-          new Uint8ClampedArray(copyData.data),
-          copyData.width,
-          copyData.height,
-        ),
-      );
-    }
-
-    const insertIndex = state.currentFrameIndex + 1;
-
-    // Record for undo
-    frameOpUndoStack.push({
-      type: "duplicate",
-      frameId: newId,
-      frame: { ...newFrame },
-      index: insertIndex,
-      layerData: savedLayerData,
-      prevFrameIndex: state.currentFrameIndex,
-    });
-    frameOpRedoStack.length = 0;
-    redoLog.length = 0;
-    paletteRedoStack.length = 0;
-    actionLog.push("frame");
-
-    setState((d) => {
-      d.frames.splice(d.currentFrameIndex + 1, 0, newFrame);
-      d.currentFrameIndex = d.currentFrameIndex + 1;
-    });
-  }, [state, setState]);
-
-  const deleteFrame = useCallback(() => {
-    if (!state || state.frames.length <= 1) return;
-    const frameToDelete = state.frames[state.currentFrameIndex];
-    if (!frameToDelete) return;
-
-    // Save per-layer pixel data before deleting
-    const allLayerIds = getLeafLayerIds(
-      state.layerOrder,
-      state.layers,
-      state.imageLayers,
-      state.layerGroups,
-      true,
-    );
-    const savedLayerData = new Map<string, ImageData>();
-    for (const layerId of allLayerIds) {
-      const data = moduleLayerFrameData.get(
-        layerDataKey(frameToDelete.id, layerId),
-      );
-      if (data) {
-        savedLayerData.set(
-          layerId,
-          new ImageData(
-            new Uint8ClampedArray(data.data),
-            data.width,
-            data.height,
-          ),
-        );
-      } else {
-        savedLayerData.set(layerId, new ImageData(state.width, state.height));
-      }
-    }
-
-    frameOpUndoStack.push({
-      type: "delete",
-      frameId: frameToDelete.id,
-      frame: { ...frameToDelete },
-      index: state.currentFrameIndex,
-      layerData: savedLayerData,
-      prevFrameIndex: state.currentFrameIndex,
-    });
-    frameOpRedoStack.length = 0;
-    redoLog.length = 0;
-    paletteRedoStack.length = 0;
-    actionLog.push("frame");
-
-    // Delete all layer entries for this frame
-    for (const layerId of allLayerIds) {
-      moduleLayerFrameData.delete(layerDataKey(frameToDelete.id, layerId));
-    }
-    pixelHistory.clearAllHistoryForFrame(frameToDelete.id);
-
-    setState((d) => {
-      d.frames.splice(d.currentFrameIndex, 1);
-      if (d.currentFrameIndex >= d.frames.length) {
-        d.currentFrameIndex = d.frames.length - 1;
-      }
-    });
-  }, [state, setState]);
-
-  /**
-   * Move the current frame one position left or right in the frames array.
-   * The currentFrameIndex follows the moved frame.
-   */
-  const moveFrame = useCallback(
-    (direction: "left" | "right") => {
-      if (!state) return;
-      const { currentFrameIndex, frames } = state;
-      const targetIndex =
-        direction === "left" ? currentFrameIndex - 1 : currentFrameIndex + 1;
-      if (targetIndex < 0 || targetIndex >= frames.length) return;
-      setState((d) => {
-        const temp = d.frames[currentFrameIndex];
-        d.frames[currentFrameIndex] = d.frames[targetIndex];
-        d.frames[targetIndex] = temp;
-        d.currentFrameIndex = targetIndex;
-      });
-    },
-    [state, setState],
-  );
-
-  const setCurrentFrame = useCallback(
-    (index: number) => {
-      setState((d) => {
-        d.currentFrameIndex = Math.max(0, Math.min(index, d.frames.length - 1));
-      });
-    },
-    [setState],
-  );
-
-  const setFrameDuration = useCallback(
-    (frameIndex: number, duration: number) => {
-      setState((d) => {
-        if (d.frames[frameIndex]) {
-          d.frames[frameIndex].duration = duration;
-        }
-      });
-    },
-    [setState],
-  );
-
-  const undoFrameOp = useCallback((): boolean => {
-    if (frameOpUndoStack.length === 0) return false;
-    const op = frameOpUndoStack.pop()!;
-
-    switch (op.type) {
-      case "add":
-      case "duplicate": {
-        // Undo add/duplicate: capture current layer data then remove the frame
-        const savedLayerData = new Map<string, ImageData>();
-        for (const [layerId, imgData] of op.layerData) {
-          const current = moduleLayerFrameData.get(
-            layerDataKey(op.frameId, layerId),
-          );
-          savedLayerData.set(
-            layerId,
-            current
-              ? new ImageData(
-                  new Uint8ClampedArray(current.data),
-                  current.width,
-                  current.height,
-                )
-              : imgData,
-          );
-          moduleLayerFrameData.delete(layerDataKey(op.frameId, layerId));
-        }
-        frameOpRedoStack.push({ ...op, layerData: savedLayerData });
-        pixelHistory.clearAllHistoryForFrame(op.frameId);
-        setState((d) => {
-          const idx = d.frames.findIndex((f) => f.id === op.frameId);
-          if (idx >= 0) d.frames.splice(idx, 1);
-          d.currentFrameIndex = Math.min(
-            op.prevFrameIndex,
-            d.frames.length - 1,
-          );
-        });
-        return true;
-      }
-      case "delete": {
-        // Undo delete: re-insert the frame with its layer data
-        for (const [layerId, imgData] of op.layerData) {
-          moduleLayerFrameData.set(
-            layerDataKey(op.frameId, layerId),
-            new ImageData(
-              new Uint8ClampedArray(imgData.data),
-              imgData.width,
-              imgData.height,
-            ),
-          );
-        }
-        frameOpRedoStack.push(op);
-        setState((d) => {
-          const idx = Math.min(op.index, d.frames.length);
-          d.frames.splice(idx, 0, op.frame);
-          d.currentFrameIndex = idx;
-        });
-        return true;
-      }
-    }
-  }, [setState]);
-
-  const redoFrameOp = useCallback((): boolean => {
-    if (frameOpRedoStack.length === 0) return false;
-    const op = frameOpRedoStack.pop()!;
-
-    switch (op.type) {
-      case "add":
-      case "duplicate": {
-        // Redo add/duplicate: re-insert the frame with its layer data
-        for (const [layerId, imgData] of op.layerData) {
-          moduleLayerFrameData.set(
-            layerDataKey(op.frameId, layerId),
-            new ImageData(
-              new Uint8ClampedArray(imgData.data),
-              imgData.width,
-              imgData.height,
-            ),
-          );
-        }
-        frameOpUndoStack.push(op);
-        setState((d) => {
-          const idx = Math.min(op.index, d.frames.length);
-          d.frames.splice(idx, 0, op.frame);
-          d.currentFrameIndex = idx;
-        });
-        return true;
-      }
-      case "delete": {
-        // Redo delete: re-remove the frame
-        const savedLayerData = new Map<string, ImageData>();
-        for (const [layerId, imgData] of op.layerData) {
-          const current = moduleLayerFrameData.get(
-            layerDataKey(op.frameId, layerId),
-          );
-          savedLayerData.set(
-            layerId,
-            current
-              ? new ImageData(
-                  new Uint8ClampedArray(current.data),
-                  current.width,
-                  current.height,
-                )
-              : imgData,
-          );
-          moduleLayerFrameData.delete(layerDataKey(op.frameId, layerId));
-        }
-        frameOpUndoStack.push({ ...op, layerData: savedLayerData });
-        pixelHistory.clearAllHistoryForFrame(op.frameId);
-        setState((d) => {
-          const idx = d.frames.findIndex((f) => f.id === op.frameId);
-          if (idx >= 0) {
-            d.frames.splice(idx, 1);
-            if (d.currentFrameIndex >= d.frames.length) {
-              d.currentFrameIndex = d.frames.length - 1;
-            }
-          }
-        });
-        return true;
-      }
-    }
-  }, [setState]);
+  const frameActions = useImageEditorFrameActions({ state, setState });
+  const { undoFrameOp, redoFrameOp } = frameActions;
 
   // -----------------------------------------------------------------------
   // Unified undo / redo
@@ -1326,294 +543,7 @@ export function useImageEditor() {
     [setState],
   );
 
-  // -----------------------------------------------------------------------
-  // Palette management
-  // -----------------------------------------------------------------------
-
-  const addPaletteColor = useCallback(
-    (color: Color) => {
-      if (state) {
-        paletteUndoStack.push(snapshotPaletteLibrary(state));
-        paletteRedoStack.length = 0;
-        frameOpRedoStack.length = 0;
-        redoLog.length = 0;
-        actionLog.push("palette");
-      }
-      setState((d) => {
-        d.palettes[getActivePaletteIndex(d)].colors.push(color);
-      });
-    },
-    [state, setState],
-  );
-
-  const removePaletteColor = useCallback(
-    (index: number) => {
-      if (state) {
-        paletteUndoStack.push(snapshotPaletteLibrary(state));
-        paletteRedoStack.length = 0;
-        frameOpRedoStack.length = 0;
-        redoLog.length = 0;
-        actionLog.push("palette");
-      }
-      setState((d) => {
-        d.palettes[getActivePaletteIndex(d)].colors.splice(index, 1);
-      });
-    },
-    [state, setState],
-  );
-
-  const updatePaletteColor = useCallback(
-    (index: number, color: Color) => {
-      setState((d) => {
-        const palette = d.palettes[getActivePaletteIndex(d)];
-        if (palette.colors[index]) {
-          palette.colors[index] = color;
-        }
-      });
-    },
-    [setState],
-  );
-
-  const resetPalette = useCallback(() => {
-    if (state) {
-      paletteUndoStack.push(snapshotPaletteLibrary(state));
-      paletteRedoStack.length = 0;
-      frameOpRedoStack.length = 0;
-      redoLog.length = 0;
-      actionLog.push("palette");
-    }
-    setState((d) => {
-      const palette = d.palettes[getActivePaletteIndex(d)];
-      palette.colors = [...DEFAULT_PALETTE_COLORS];
-    });
-  }, [state, setState]);
-
-  const importPalette = useCallback(
-    async (file: File) => {
-      const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
-      let colors: Color[] = [];
-
-      if (ext === "aseprite") {
-        colors = parseAsePalette(await file.arrayBuffer());
-      } else if (ext === "ase") {
-        // Auto-detect: Adobe ASE starts with "ASEF" (0x41534546);
-        // Aseprite files have magic 0xa5e0 at offset 4.
-        const buf = await file.arrayBuffer();
-        const sig = new DataView(buf).getUint32(0, false);
-        if (sig === 0x41534546) {
-          colors = parsePhotoshopAse(buf);
-        } else {
-          colors = parseAsePalette(buf);
-        }
-      } else if (ext === "gpl") {
-        colors = parseGpl(await file.text());
-      } else if (ext === "pal") {
-        colors = parseJascPal(await file.text());
-      } else if (ext === "txt") {
-        colors = parsePaintNetTxt(await file.text());
-      } else if (ext === "hex") {
-        colors = parseHex(await file.text());
-      } else if (ext === "png") {
-        colors = await parsePng(await file.arrayBuffer());
-      }
-
-      if (colors.length === 0) return;
-
-      // Snapshot current palette library before applying import
-      if (isImageEditorStoreReady()) {
-        const s = getImageEditorStore().getState();
-        paletteUndoStack.push(snapshotPaletteLibrary(s));
-        paletteRedoStack.length = 0;
-        frameOpRedoStack.length = 0;
-        redoLog.length = 0;
-        actionLog.push("palette");
-      }
-
-      const paletteName = file.name.replace(/\.[^.]+$/, "");
-      const newId = uuidv4() as PaletteId;
-      setState((d) => {
-        d.palettes.push({
-          id: newId,
-          name: paletteName,
-          colors,
-        });
-        d.activePaletteId = newId;
-      });
-    },
-    [setState],
-  );
-
-  const exportPalette = useCallback(
-    async (
-      format: PaletteExportFormat = "ase",
-      swatchSize: PngSwatchSize = 16,
-    ) => {
-      if (!state) return;
-      const activePalette = getActivePalette(state);
-      const baseName = activePalette.name || "palette";
-      const colors = activePalette.colors;
-
-      let blob: Blob;
-      let filename: string;
-
-      if (format === "ase") {
-        const buffer = writePhotoshopAse(colors);
-        blob = new Blob([buffer], { type: "application/octet-stream" });
-        filename = `${baseName}.ase`;
-      } else if (format === "aseprite") {
-        const buffer = writeAsePalette(colors);
-        blob = new Blob([buffer], { type: "application/octet-stream" });
-        filename = `${baseName}.aseprite`;
-      } else if (format === "gpl") {
-        blob = new Blob([writeGpl(colors, baseName)], { type: "text/plain" });
-        filename = `${baseName}.gpl`;
-      } else if (format === "pal") {
-        blob = new Blob([writeJascPal(colors)], { type: "text/plain" });
-        filename = `${baseName}.pal`;
-      } else if (format === "txt") {
-        blob = new Blob([writePaintNetTxt(colors, baseName)], {
-          type: "text/plain",
-        });
-        filename = `${baseName}.txt`;
-      } else if (format === "hex") {
-        blob = new Blob([writeHex(colors)], { type: "text/plain" });
-        filename = `${baseName}.hex`;
-      } else {
-        // png
-        blob = await writePng(colors, swatchSize);
-        filename = `${baseName}-${swatchSize}px.png`;
-      }
-
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(url);
-    },
-    [state],
-  );
-
-  const switchPalette = useCallback(
-    (id: PaletteId) => {
-      setState((d) => {
-        if (d.palettes.some((p) => p.id === id)) {
-          d.activePaletteId = id;
-        }
-      });
-    },
-    [setState],
-  );
-
-  const renamePalette = useCallback(
-    (id: PaletteId, name: string) => {
-      if (state) {
-        paletteUndoStack.push(snapshotPaletteLibrary(state));
-        paletteRedoStack.length = 0;
-        frameOpRedoStack.length = 0;
-        redoLog.length = 0;
-        actionLog.push("palette");
-      }
-      setState((d) => {
-        const p = d.palettes.find((p) => p.id === id);
-        if (p) p.name = name;
-      });
-    },
-    [state, setState],
-  );
-
-  const deletePalette = useCallback(
-    (id: PaletteId) => {
-      if (!state || state.palettes.length <= 1) return;
-      paletteUndoStack.push(snapshotPaletteLibrary(state));
-      paletteRedoStack.length = 0;
-      frameOpRedoStack.length = 0;
-      redoLog.length = 0;
-      actionLog.push("palette");
-      setState((d) => {
-        const idx = d.palettes.findIndex((p) => p.id === id);
-        if (idx < 0) return;
-        d.palettes.splice(idx, 1);
-        if (d.activePaletteId === id) {
-          d.activePaletteId =
-            d.palettes[Math.min(idx, d.palettes.length - 1)].id;
-        }
-      });
-    },
-    [state, setState],
-  );
-
-  const duplicatePalette = useCallback(
-    (id: PaletteId) => {
-      if (!state) return;
-      const src = state.palettes.find((p) => p.id === id);
-      if (!src) return;
-      paletteUndoStack.push(snapshotPaletteLibrary(state));
-      paletteRedoStack.length = 0;
-      frameOpRedoStack.length = 0;
-      redoLog.length = 0;
-      actionLog.push("palette");
-      const newId = uuidv4() as PaletteId;
-      const srcName = src.name;
-      const srcColors = src.colors.map((c) => ({ ...c }));
-      setState((d) => {
-        const srcIdx = d.palettes.findIndex((p) => p.id === id);
-        const copy = {
-          id: newId,
-          name: `${srcName} (copy)`,
-          colors: srcColors,
-        };
-        d.palettes.splice(srcIdx + 1, 0, copy);
-        d.activePaletteId = newId;
-      });
-    },
-    [state, setState],
-  );
-
-  const reorderPaletteColors = useCallback(
-    (fromIndex: number, toIndex: number) => {
-      if (!state || fromIndex === toIndex) return;
-      paletteUndoStack.push(snapshotPaletteLibrary(state));
-      paletteRedoStack.length = 0;
-      frameOpRedoStack.length = 0;
-      redoLog.length = 0;
-      actionLog.push("palette");
-      setState((d) => {
-        const palette = d.palettes[getActivePaletteIndex(d)];
-        const colors = palette.colors;
-        if (
-          fromIndex < 0 ||
-          fromIndex >= colors.length ||
-          toIndex < 0 ||
-          toIndex >= colors.length
-        )
-          return;
-        const [moved] = colors.splice(fromIndex, 1);
-        colors.splice(toIndex, 0, moved);
-      });
-    },
-    [state, setState],
-  );
-
-  /**
-   * Restore the full palette library (e.g. from saved project).
-   * Clears palette undo/redo since this is an external load, not a user edit.
-   */
-  const restorePaletteLibrary = useCallback(
-    (palettes: Palette[]) => {
-      if (!isImageEditorStoreReady() || palettes.length === 0) return;
-      paletteUndoStack.length = 0;
-      paletteRedoStack.length = 0;
-      setState((d) => {
-        d.palettes = palettes.map((p) => ({
-          ...p,
-          colors: p.colors.map((c) => ({ ...c })),
-        }));
-        d.activePaletteId = palettes[0].id;
-      });
-    },
-    [setState],
-  );
+  const paletteActions = useImageEditorPaletteActions({ state, setState });
 
   // -----------------------------------------------------------------------
   // Animation playback
@@ -1774,505 +704,14 @@ export function useImageEditor() {
   }, [state]);
 
   const markSavePoint = useCallback(() => {
-    savedDocumentFingerprint = buildSaveFingerprint(state);
+    markDocumentSavePoint(state);
   }, [state]);
 
   const hasUnsavedImageChanges = useCallback((): boolean => {
-    const currentFingerprint = buildSaveFingerprint(state);
-    if (!currentFingerprint) return false;
-    return currentFingerprint !== savedDocumentFingerprint;
+    return hasUnsavedDocumentChanges(state);
   }, [state]);
 
-  // -----------------------------------------------------------------------
-  // Layer management
-  // -----------------------------------------------------------------------
-
-  const addRasterLayer = useCallback(
-    (name?: string) => {
-      if (!state) return;
-      const newId = uuidv4() as ImageEditorLayerId;
-      const layerCount = state.layers.length + state.imageLayers.length;
-      const layerName = name ?? `Layer ${layerCount + 1}`;
-
-      // Create blank pixel data for this layer across all existing frames
-      for (const frame of state.frames) {
-        moduleLayerFrameData.set(
-          layerDataKey(frame.id, newId),
-          new ImageData(state.width, state.height),
-        );
-      }
-
-      setState((draft) => {
-        const newLayer: ImageEditorRasterLayer = {
-          id: newId,
-          name: layerName,
-          visible: true,
-          locked: false,
-          type: "tile",
-        };
-        draft.layers.push(newLayer);
-        if (draft.activeLayerId) {
-          insertAfterInOrder(
-            draft.activeLayerId as string,
-            newId,
-            draft.layerOrder,
-            draft.layerGroups,
-          );
-        } else {
-          draft.layerOrder.push(newId);
-        }
-        draft.activeLayerId = newId;
-      });
-    },
-    [state, setState],
-  );
-
-  const addImageEditorImageLayer = useCallback(
-    (name?: string) => {
-      if (!state) return;
-
-      // Open file picker — the actual layer creation happens after file load
-      const fileInput = document.createElement("input");
-      fileInput.type = "file";
-      fileInput.accept = "image/png,image/jpeg,image/webp,image/gif";
-
-      fileInput.onchange = () => {
-        const file = fileInput.files?.[0];
-        if (!file) return;
-
-        const img = new Image();
-        const url = URL.createObjectURL(file);
-
-        img.onload = () => {
-          URL.revokeObjectURL(url);
-
-          // Get fresh state in case things changed while file picker was open
-          if (!isImageEditorStoreReady()) return;
-          const s = getImageEditorStore().getState();
-
-          // Render image at canvas dimensions (scale to fit)
-          const canvas = document.createElement("canvas");
-          canvas.width = s.width;
-          canvas.height = s.height;
-          const ctx = canvas.getContext("2d")!;
-          ctx.imageSmoothingEnabled = false;
-          ctx.drawImage(img, 0, 0, s.width, s.height);
-          const imageData = ctx.getImageData(0, 0, s.width, s.height);
-
-          const newId = uuidv4() as ImageEditorLayerId;
-          const baseName =
-            name ?? file.name.replace(/\.[^/.]+$/, "") ?? "Image";
-
-          // Store pixel data for all existing frames
-          for (const frame of s.frames) {
-            moduleLayerFrameData.set(
-              layerDataKey(frame.id, newId),
-              new ImageData(
-                new Uint8ClampedArray(imageData.data),
-                imageData.width,
-                imageData.height,
-              ),
-            );
-          }
-
-          getImageEditorStore().setState((draft) => {
-            const newLayer: ImageEditorImageLayer = {
-              id: newId,
-              name: baseName,
-              visible: true,
-              locked: false,
-              type: "image",
-            };
-            draft.imageLayers.push(newLayer);
-            if (draft.activeLayerId) {
-              insertAfterInOrder(
-                draft.activeLayerId as string,
-                newId,
-                draft.layerOrder,
-                draft.layerGroups,
-              );
-            } else {
-              draft.layerOrder.push(newId);
-            }
-            draft.activeLayerId = newId;
-          });
-        };
-
-        img.onerror = () => {
-          URL.revokeObjectURL(url);
-        };
-
-        img.src = url;
-      };
-
-      fileInput.click();
-    },
-    [state],
-  );
-
-  const addImageEditorLayerGroup = useCallback(
-    (name?: string) => {
-      if (!state) return;
-      const newId = uuidv4() as ImageEditorGroupId;
-      setState((draft) => {
-        const newGroup: ImageEditorLayerGroup = {
-          id: newId,
-          name: name ?? "Group",
-          visible: true,
-          locked: false,
-          expanded: true,
-          childOrder: [],
-        };
-        draft.layerGroups.push(newGroup);
-        draft.layerOrder.push(newId);
-      });
-    },
-    [state, setState],
-  );
-
-  const deleteImageEditorLayer = useCallback(
-    (id: string) => {
-      if (!state) return;
-      // Clean up pixel data for all frames
-      for (const frame of state.frames) {
-        moduleLayerFrameData.delete(layerDataKey(frame.id, id));
-      }
-      pixelHistory.clearAllHistoryForFrame(id);
-      setState((draft) => {
-        draft.layerOrder = draft.layerOrder.filter(
-          (o) => (o as string) !== id,
-        ) as typeof draft.layerOrder;
-        for (const g of draft.layerGroups) {
-          g.childOrder = g.childOrder.filter(
-            (o) => (o as string) !== id,
-          ) as typeof g.childOrder;
-        }
-        draft.layers = draft.layers.filter((l) => (l.id as string) !== id);
-        draft.imageLayers = draft.imageLayers.filter(
-          (l) => (l.id as string) !== id,
-        );
-        if ((draft.activeLayerId as string) === id) {
-          const remaining = draft.layerOrder;
-          draft.activeLayerId =
-            remaining.length > 0
-              ? (remaining[remaining.length - 1] as ImageEditorLayerId)
-              : null;
-        }
-      });
-    },
-    [state, setState],
-  );
-
-  const deleteImageEditorGroup = useCallback(
-    (groupId: string) => {
-      if (!state) return;
-      setState((draft) => {
-        const group = draft.layerGroups.find(
-          (g) => (g.id as string) === groupId,
-        );
-        if (!group) return;
-
-        // Collect all descendant IDs
-        function collectDescendants(
-          order: (ImageEditorLayerId | ImageEditorGroupId)[],
-        ): { layerIds: string[]; groupIds: string[] } {
-          const layerIds: string[] = [];
-          const groupIds: string[] = [];
-          for (const id of order) {
-            const g = draft.layerGroups.find(
-              (x) => (x.id as string) === (id as string),
-            );
-            if (g) {
-              groupIds.push(g.id as string);
-              const child = collectDescendants(g.childOrder);
-              layerIds.push(...child.layerIds);
-              groupIds.push(...child.groupIds);
-            } else {
-              layerIds.push(id as string);
-            }
-          }
-          return { layerIds, groupIds };
-        }
-
-        const { layerIds, groupIds } = collectDescendants(group.childOrder);
-        const allGroupIds = [groupId, ...groupIds];
-
-        draft.layers = draft.layers.filter(
-          (l) => !layerIds.includes(l.id as string),
-        );
-        draft.imageLayers = draft.imageLayers.filter(
-          (l) => !layerIds.includes(l.id as string),
-        );
-        draft.layerGroups = draft.layerGroups.filter(
-          (g) => !allGroupIds.includes(g.id as string),
-        );
-        draft.layerOrder = draft.layerOrder.filter(
-          (o) => !allGroupIds.includes(o as string),
-        ) as typeof draft.layerOrder;
-        for (const g of draft.layerGroups) {
-          g.childOrder = g.childOrder.filter(
-            (o) => !allGroupIds.includes(o as string),
-          ) as typeof g.childOrder;
-        }
-
-        if (
-          draft.activeLayerId &&
-          layerIds.includes(draft.activeLayerId as string)
-        ) {
-          const remaining = draft.layerOrder;
-          draft.activeLayerId =
-            remaining.length > 0
-              ? (remaining[remaining.length - 1] as ImageEditorLayerId)
-              : null;
-        }
-      });
-    },
-    [state, setState],
-  );
-
-  const renameImageEditorLayer = useCallback(
-    (id: string, name: string) => {
-      if (!state || !name.trim()) return;
-      setState((draft) => {
-        const layer = draft.layers.find((l) => (l.id as string) === id);
-        if (layer) {
-          layer.name = name;
-          return;
-        }
-        const imgLayer = draft.imageLayers.find((l) => (l.id as string) === id);
-        if (imgLayer) {
-          imgLayer.name = name;
-          return;
-        }
-        const group = draft.layerGroups.find((g) => (g.id as string) === id);
-        if (group) group.name = name;
-      });
-    },
-    [state, setState],
-  );
-
-  const toggleImageEditorLayerVisible = useCallback(
-    (id: string, isGroup: boolean) => {
-      if (!state) return;
-      setState((draft) => {
-        if (isGroup) {
-          const group = draft.layerGroups.find((g) => (g.id as string) === id);
-          if (group) group.visible = !group.visible;
-        } else {
-          const layer = draft.layers.find((l) => (l.id as string) === id);
-          if (layer) {
-            layer.visible = !layer.visible;
-            return;
-          }
-          const imgLayer = draft.imageLayers.find(
-            (l) => (l.id as string) === id,
-          );
-          if (imgLayer) imgLayer.visible = !imgLayer.visible;
-        }
-      });
-    },
-    [state, setState],
-  );
-
-  const toggleImageEditorLayerLocked = useCallback(
-    (id: string, isGroup: boolean) => {
-      if (!state) return;
-      setState((draft) => {
-        if (isGroup) {
-          const group = draft.layerGroups.find((g) => (g.id as string) === id);
-          if (group) group.locked = !group.locked;
-        } else {
-          const layer = draft.layers.find((l) => (l.id as string) === id);
-          if (layer) {
-            layer.locked = !layer.locked;
-            return;
-          }
-          const imgLayer = draft.imageLayers.find(
-            (l) => (l.id as string) === id,
-          );
-          if (imgLayer) imgLayer.locked = !imgLayer.locked;
-        }
-      });
-    },
-    [state, setState],
-  );
-
-  const setActiveImageEditorLayer = useCallback(
-    (id: string) => {
-      if (!state) return;
-      setState((draft) => {
-        draft.activeLayerId = id as ImageEditorLayerId;
-      });
-    },
-    [state, setState],
-  );
-
-  const toggleImageEditorGroupExpanded = useCallback(
-    (id: string) => {
-      if (!state) return;
-      setState((draft) => {
-        const group = draft.layerGroups.find((g) => (g.id as string) === id);
-        if (group) group.expanded = !group.expanded;
-      });
-    },
-    [state, setState],
-  );
-
-  const moveImageEditorLayerItem = useCallback(
-    (id: string, direction: "up" | "down", parentGroupId: string | null) => {
-      if (!state) return;
-      setState((draft) => {
-        let order: (ImageEditorLayerId | ImageEditorGroupId)[];
-        if (parentGroupId) {
-          const group = draft.layerGroups.find(
-            (g) => (g.id as string) === parentGroupId,
-          );
-          if (!group) return;
-          order = group.childOrder;
-        } else {
-          order = draft.layerOrder;
-        }
-        const idx = (order as string[]).indexOf(id);
-        if (idx === -1) return;
-        // "up" = higher position visually = higher index in data
-        const targetIdx = direction === "up" ? idx + 1 : idx - 1;
-        if (targetIdx < 0 || targetIdx >= order.length) return;
-        const temp = order[idx]!;
-        order[idx] = order[targetIdx]!;
-        order[targetIdx] = temp;
-      });
-    },
-    [state, setState],
-  );
-
-  const duplicateImageEditorLayer = useCallback(
-    (id: string) => {
-      if (!state) return;
-      const newId = uuidv4() as ImageEditorLayerId;
-
-      // Copy pixel data for all frames
-      for (const frame of state.frames) {
-        const srcData = moduleLayerFrameData.get(layerDataKey(frame.id, id));
-        moduleLayerFrameData.set(
-          layerDataKey(frame.id, newId),
-          srcData
-            ? new ImageData(
-                new Uint8ClampedArray(srcData.data),
-                srcData.width,
-                srcData.height,
-              )
-            : new ImageData(state.width, state.height),
-        );
-      }
-
-      setState((draft) => {
-        const layer = draft.layers.find((l) => (l.id as string) === id);
-        if (layer) {
-          const copy: ImageEditorRasterLayer = {
-            ...layer,
-            id: newId,
-            name: `${layer.name} copy`,
-          };
-          draft.layers.push(copy);
-          insertAfterInOrder(id, newId, draft.layerOrder, draft.layerGroups);
-          draft.activeLayerId = newId;
-          return;
-        }
-        const imgLayer = draft.imageLayers.find((l) => (l.id as string) === id);
-        if (imgLayer) {
-          const copy: ImageEditorImageLayer = {
-            ...imgLayer,
-            id: newId,
-            name: `${imgLayer.name} copy`,
-          };
-          draft.imageLayers.push(copy);
-          insertAfterInOrder(id, newId, draft.layerOrder, draft.layerGroups);
-          draft.activeLayerId = newId;
-        }
-      });
-    },
-    [state, setState],
-  );
-
-  const duplicateImageEditorGroup = useCallback(
-    (id: string) => {
-      if (!state) return;
-      const newGroupId = uuidv4() as ImageEditorGroupId;
-      setState((draft) => {
-        const srcGroup = draft.layerGroups.find((g) => (g.id as string) === id);
-        if (!srcGroup) return;
-        const copy: ImageEditorLayerGroup = {
-          ...srcGroup,
-          id: newGroupId,
-          name: `${srcGroup.name} copy`,
-          childOrder: [...srcGroup.childOrder],
-        };
-        draft.layerGroups.push(copy);
-        insertAfterInOrder(id, newGroupId, draft.layerOrder, draft.layerGroups);
-      });
-    },
-    [state, setState],
-  );
-
-  const moveImageEditorLayerIntoOrder = useCallback(
-    (
-      dragId: string,
-      targetId: string,
-      position: "above" | "below" | "inside",
-    ) => {
-      if (!state) return;
-      setState((draft) => {
-        const removeFromOrder = (
-          order: (ImageEditorLayerId | ImageEditorGroupId)[],
-        ) => {
-          const idx = (order as string[]).indexOf(dragId);
-          if (idx !== -1) order.splice(idx, 1);
-        };
-        removeFromOrder(draft.layerOrder);
-        for (const g of draft.layerGroups) {
-          removeFromOrder(g.childOrder);
-        }
-
-        if (position === "inside") {
-          const targetGroup = draft.layerGroups.find(
-            (g) => (g.id as string) === targetId,
-          );
-          if (targetGroup) {
-            targetGroup.childOrder.push(
-              dragId as ImageEditorLayerId | ImageEditorGroupId,
-            );
-            targetGroup.expanded = true;
-          }
-        } else {
-          let targetOrder: (ImageEditorLayerId | ImageEditorGroupId)[] | null =
-            null;
-          if ((draft.layerOrder as string[]).includes(targetId)) {
-            targetOrder = draft.layerOrder;
-          } else {
-            for (const g of draft.layerGroups) {
-              if ((g.childOrder as string[]).includes(targetId)) {
-                targetOrder = g.childOrder;
-                break;
-              }
-            }
-          }
-          if (targetOrder) {
-            const targetIdx = (targetOrder as string[]).indexOf(targetId);
-            if (targetIdx !== -1) {
-              const insertIdx =
-                position === "above" ? targetIdx + 1 : targetIdx;
-              targetOrder.splice(
-                insertIdx,
-                0,
-                dragId as ImageEditorLayerId | ImageEditorGroupId,
-              );
-            }
-          }
-        }
-      });
-    },
-    [state, setState],
-  );
+  const layerActions = useImageEditorLayerActions({ state, setState });
 
   return {
     state,
@@ -2301,15 +740,7 @@ export function useImageEditor() {
     canUndo,
     canRedo,
 
-    // Frame management
-    addFrame,
-    duplicateFrame,
-    deleteFrame,
-    moveFrame,
-    undoFrameOp,
-    redoFrameOp,
-    setCurrentFrame,
-    setFrameDuration,
+    ...frameActions,
 
     // Tool state
     setTool,
@@ -2325,19 +756,7 @@ export function useImageEditor() {
     markSavePoint,
     hasUnsavedImageChanges,
 
-    // Palette
-    addPaletteColor,
-    removePaletteColor,
-    updatePaletteColor,
-    resetPalette,
-    importPalette,
-    exportPalette,
-    switchPalette,
-    renamePalette,
-    deletePalette,
-    duplicatePalette,
-    reorderPaletteColors,
-    restorePaletteLibrary,
+    ...paletteActions,
 
     // Playback
     playAnimation,
@@ -2348,20 +767,6 @@ export function useImageEditor() {
     exportGif,
     exportSpriteSheet,
 
-    // Layers
-    addRasterLayer,
-    addImageEditorImageLayer,
-    addImageEditorLayerGroup,
-    deleteImageEditorLayer,
-    deleteImageEditorGroup,
-    renameImageEditorLayer,
-    toggleImageEditorLayerVisible,
-    toggleImageEditorLayerLocked,
-    setActiveImageEditorLayer,
-    toggleImageEditorGroupExpanded,
-    moveImageEditorLayerItem,
-    duplicateImageEditorLayer,
-    duplicateImageEditorGroup,
-    moveImageEditorLayerIntoOrder,
+    ...layerActions,
   };
 }
diff --git a/src/lib/image-editor-crop-tools.ts b/src/lib/image-editor-crop-tools.ts
new file mode 100644
index 0000000..5293c48
--- /dev/null
+++ b/src/lib/image-editor-crop-tools.ts
@@ -0,0 +1,251 @@
+import type {
+  ImageEditorResizeHandle as ResizeHandle,
+  StrokeState,
+  ToolContext,
+} from "@/types/image-editor-internals";
+import type { CropRect, CropState } from "@/types/image-editor-tools";
+
+function createCropState(): CropState {
+  return {
+    rect: null,
+    dragging: false,
+    resizingHandle: null,
+    dragOffsetX: 0,
+    dragOffsetY: 0,
+    resizeStartX: 0,
+    resizeStartY: 0,
+    resizeStartRect: null,
+  };
+}
+
+let cropState: CropState = createCropState();
+
+export function getCropState(): CropState {
+  return cropState;
+}
+
+export function resetCropState(): void {
+  cropState = createCropState();
+}
+
+function clampCropRect(tc: ToolContext, rect: CropRect): CropRect {
+  const x = Math.max(0, Math.min(tc.width - 1, rect.x));
+  const y = Math.max(0, Math.min(tc.height - 1, rect.y));
+  const width = Math.max(1, Math.min(rect.width, tc.width - x));
+  const height = Math.max(1, Math.min(rect.height, tc.height - y));
+  return { x, y, width, height };
+}
+
+function isInsideCropRect(x: number, y: number, rect: CropRect): boolean {
+  return (
+    x >= rect.x &&
+    y >= rect.y &&
+    x < rect.x + rect.width &&
+    y < rect.y + rect.height
+  );
+}
+
+const HANDLE_SIZE = 2;
+
+export function hitTestCropHandle(x: number, y: number): ResizeHandle {
+  const rect = cropState.rect;
+  if (!rect) return null;
+
+  const handleSize = HANDLE_SIZE;
+  const rectX = rect.x;
+  const rectY = rect.y;
+  const rectWidth = rect.width;
+  const rectHeight = rect.height;
+
+  if (Math.abs(x - rectX) <= handleSize && Math.abs(y - rectY) <= handleSize) {
+    return "nw";
+  }
+  if (
+    Math.abs(x - (rectX + rectWidth)) <= handleSize &&
+    Math.abs(y - rectY) <= handleSize
+  ) {
+    return "ne";
+  }
+  if (
+    Math.abs(x - rectX) <= handleSize &&
+    Math.abs(y - (rectY + rectHeight)) <= handleSize
+  ) {
+    return "sw";
+  }
+  if (
+    Math.abs(x - (rectX + rectWidth)) <= handleSize &&
+    Math.abs(y - (rectY + rectHeight)) <= handleSize
+  ) {
+    return "se";
+  }
+  if (
+    Math.abs(y - rectY) <= handleSize &&
+    x > rectX + handleSize &&
+    x < rectX + rectWidth - handleSize
+  ) {
+    return "n";
+  }
+  if (
+    Math.abs(y - (rectY + rectHeight)) <= handleSize &&
+    x > rectX + handleSize &&
+    x < rectX + rectWidth - handleSize
+  ) {
+    return "s";
+  }
+  if (
+    Math.abs(x - rectX) <= handleSize &&
+    y > rectY + handleSize &&
+    y < rectY + rectHeight - handleSize
+  ) {
+    return "w";
+  }
+  if (
+    Math.abs(x - (rectX + rectWidth)) <= handleSize &&
+    y > rectY + handleSize &&
+    y < rectY + rectHeight - handleSize
+  ) {
+    return "e";
+  }
+
+  return null;
+}
+
+export function cropDown(
+  _tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  strokeState.active = true;
+
+  if (cropState.rect) {
+    const handle = hitTestCropHandle(x, y);
+    if (handle) {
+      cropState.resizingHandle = handle;
+      cropState.resizeStartX = x;
+      cropState.resizeStartY = y;
+      cropState.resizeStartRect = { ...cropState.rect };
+      return;
+    }
+
+    if (isInsideCropRect(x, y, cropState.rect)) {
+      cropState.dragging = true;
+      cropState.dragOffsetX = x - cropState.rect.x;
+      cropState.dragOffsetY = y - cropState.rect.y;
+      return;
+    }
+  }
+
+  strokeState.startX = x;
+  strokeState.startY = y;
+  cropState.rect = null;
+  cropState.dragging = false;
+  cropState.resizingHandle = null;
+}
+
+export function cropMove(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): CropRect | null {
+  if (!strokeState.active) return cropState.rect;
+
+  if (cropState.resizingHandle && cropState.resizeStartRect) {
+    const handle = cropState.resizingHandle;
+    const startRect = cropState.resizeStartRect;
+    const dx = x - cropState.resizeStartX;
+    const dy = y - cropState.resizeStartY;
+
+    let nextX = startRect.x;
+    let nextY = startRect.y;
+    let nextWidth = startRect.width;
+    let nextHeight = startRect.height;
+
+    if (handle.includes("w")) {
+      nextX = startRect.x + dx;
+      nextWidth = startRect.width - dx;
+    }
+    if (handle.includes("e")) {
+      nextWidth = startRect.width + dx;
+    }
+    if (handle.includes("n")) {
+      nextY = startRect.y + dy;
+      nextHeight = startRect.height - dy;
+    }
+    if (handle.includes("s")) {
+      nextHeight = startRect.height + dy;
+    }
+
+    if (nextWidth < 1) {
+      nextWidth = 1;
+      if (handle.includes("w")) {
+        nextX = startRect.x + startRect.width - 1;
+      }
+    }
+    if (nextHeight < 1) {
+      nextHeight = 1;
+      if (handle.includes("n")) {
+        nextY = startRect.y + startRect.height - 1;
+      }
+    }
+
+    cropState.rect = clampCropRect(tc, {
+      x: nextX,
+      y: nextY,
+      width: nextWidth,
+      height: nextHeight,
+    });
+    return cropState.rect;
+  }
+
+  if (cropState.dragging && cropState.rect) {
+    cropState.rect = clampCropRect(tc, {
+      x: x - cropState.dragOffsetX,
+      y: y - cropState.dragOffsetY,
+      width: cropState.rect.width,
+      height: cropState.rect.height,
+    });
+    return cropState.rect;
+  }
+
+  const minX = Math.min(strokeState.startX, x);
+  const minY = Math.min(strokeState.startY, y);
+  const maxX = Math.max(strokeState.startX, x);
+  const maxY = Math.max(strokeState.startY, y);
+
+  cropState.rect = clampCropRect(tc, {
+    x: minX,
+    y: minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY),
+  });
+
+  return cropState.rect;
+}
+
+export function cropUp(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): CropRect | null {
+  if (!strokeState.active) return cropState.rect;
+  strokeState.active = false;
+
+  const rect = cropMove(tc, x, y, {
+    ...strokeState,
+    active: true,
+  });
+
+  cropState.dragging = false;
+  cropState.resizingHandle = null;
+  cropState.resizeStartRect = null;
+
+  if (!rect || rect.width < 1 || rect.height < 1) {
+    cropState.rect = null;
+    return null;
+  }
+
+  return rect;
+}
\ No newline at end of file
diff --git a/src/lib/image-editor-document.ts b/src/lib/image-editor-document.ts
new file mode 100644
index 0000000..6cef2a7
--- /dev/null
+++ b/src/lib/image-editor-document.ts
@@ -0,0 +1,447 @@
+import {
+  destroyImageEditorStore,
+  getImageEditorStore,
+  initImageEditorStore,
+  isImageEditorStoreReady,
+  subscribeToImageEditorStoreInstance,
+} from "@/lib/image-editor-store";
+import * as pixelHistory from "@/lib/image-editor-history";
+import { resetCropState, resetSelectionState } from "@/lib/image-editor-tools";
+import { getPendingImageLayerEditorRequest } from "@/lib/image-layer-editor-context";
+import { getPendingTileEditorRequest } from "@/lib/tile-editor-context";
+import type {
+  ImageEditorGroupId,
+  ImageEditorImageLayer,
+  ImageEditorLayerGroup,
+  ImageEditorLayerId,
+  ImageEditorRasterLayer,
+  ImageEditorState,
+} from "@/types/image-editor";
+import type {
+  FrameOperation,
+  PaletteLibrarySnapshot,
+  ResizeOperation,
+  ResizeSnapshot,
+  UndoableActionType,
+} from "@/types/image-editor-hook";
+
+export const moduleLayerFrameData: Map<string, ImageData> = new Map();
+
+export const frameOpUndoStack: FrameOperation[] = [];
+export const frameOpRedoStack: FrameOperation[] = [];
+
+export const paletteUndoStack: PaletteLibrarySnapshot[] = [];
+export const paletteRedoStack: PaletteLibrarySnapshot[] = [];
+
+export const resizeUndoStack: ResizeOperation[] = [];
+export const resizeRedoStack: ResizeOperation[] = [];
+
+export const actionLog: UndoableActionType[] = [];
+export const redoLog: UndoableActionType[] = [];
+
+let savedDocumentFingerprint: string | null = null;
+
+function hashPixelBuffer(data: Uint8ClampedArray): string {
+  let hash = 2166136261;
+  for (let index = 0; index < data.length; index += 1) {
+    hash ^= data[index]!;
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+function buildSaveFingerprint(state: ImageEditorState | null): string | null {
+  if (!state) return null;
+
+  const allLayerIds = getLeafLayerIds(
+    state.layerOrder,
+    state.layers,
+    state.imageLayers,
+    state.layerGroups,
+    true,
+  );
+
+  const parts: string[] = [
+    `size:${state.width}x${state.height}`,
+    `fps:${state.fps}`,
+    `frames:${state.frames.map((frame) => `${frame.id}:${frame.duration}`).join(",")}`,
+    `layers:${state.layers
+      .map((layer) => `${layer.id}:${layer.visible ? 1 : 0}`)
+      .join(",")}`,
+    `images:${state.imageLayers
+      .map((layer) => `${layer.id}:${layer.visible ? 1 : 0}`)
+      .join(",")}`,
+    `groups:${state.layerGroups
+      .map(
+        (group) =>
+          `${group.id}:${group.visible ? 1 : 0}:${group.childOrder.join(".")}`,
+      )
+      .join(",")}`,
+    `order:${state.layerOrder.join(",")}`,
+  ];
+
+  for (const frame of state.frames) {
+    for (const layerId of allLayerIds) {
+      const imageData = moduleLayerFrameData.get(layerDataKey(frame.id, layerId));
+      parts.push(
+        `${frame.id}:${layerId}:${imageData ? hashPixelBuffer(imageData.data) : "empty"}`,
+      );
+    }
+  }
+
+  return parts.join("|");
+}
+
+export async function canvasToPngBlob(
+  canvas: HTMLCanvasElement,
+): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve, "image/png");
+  });
+}
+
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+export function layerDataKey(frameId: string, layerId: string): string {
+  return `${frameId}:${layerId}`;
+}
+
+export function cloneImageData(imageData: ImageData): ImageData {
+  return new ImageData(
+    new Uint8ClampedArray(imageData.data),
+    imageData.width,
+    imageData.height,
+  );
+}
+
+export function getLeafLayerIds(
+  order: readonly (ImageEditorLayerId | ImageEditorGroupId)[],
+  layers: readonly ImageEditorRasterLayer[],
+  imageLayers: readonly ImageEditorImageLayer[],
+  groups: readonly ImageEditorLayerGroup[],
+  ignoreVisibility = false,
+  parentVisible = true,
+): string[] {
+  const result: string[] = [];
+
+  for (const id of order) {
+    const group = groups.find((entry) => (entry.id as string) === (id as string));
+    if (group) {
+      const childVisible = ignoreVisibility || (parentVisible && group.visible);
+      result.push(
+        ...getLeafLayerIds(
+          group.childOrder,
+          layers,
+          imageLayers,
+          groups,
+          ignoreVisibility,
+          childVisible,
+        ),
+      );
+      continue;
+    }
+
+    const layer =
+      layers.find((entry) => (entry.id as string) === (id as string)) ??
+      imageLayers.find((entry) => (entry.id as string) === (id as string));
+    if (layer && (ignoreVisibility || (parentVisible && layer.visible))) {
+      result.push(id as string);
+    }
+  }
+
+  return result;
+}
+
+export function getDocumentLayerDataKeys(state: ImageEditorState): string[] {
+  const keys: string[] = [];
+  const allLayerIds = getLeafLayerIds(
+    state.layerOrder,
+    state.layers,
+    state.imageLayers,
+    state.layerGroups,
+    true,
+  );
+
+  for (const frame of state.frames) {
+    for (const layerId of allLayerIds) {
+      keys.push(layerDataKey(frame.id, layerId));
+    }
+  }
+
+  return keys;
+}
+
+export function captureResizeSnapshot(state: ImageEditorState): ResizeSnapshot {
+  const layerData = new Map<string, ImageData>();
+
+  for (const key of getDocumentLayerDataKeys(state)) {
+    const current = moduleLayerFrameData.get(key);
+    layerData.set(
+      key,
+      current ? cloneImageData(current) : new ImageData(state.width, state.height),
+    );
+  }
+
+  return {
+    width: state.width,
+    height: state.height,
+    layerData,
+  };
+}
+
+export function clearEditorSelectionState(): void {
+  resetSelectionState();
+  resetCropState();
+}
+
+export function restoreResizeSnapshot(snapshot: ResizeSnapshot): void {
+  const store = getImageEditorStore();
+  const currentState = store.getState();
+
+  for (const key of getDocumentLayerDataKeys(currentState)) {
+    if (!snapshot.layerData.has(key)) {
+      moduleLayerFrameData.delete(key);
+    }
+  }
+
+  for (const [key, imageData] of snapshot.layerData) {
+    moduleLayerFrameData.set(key, cloneImageData(imageData));
+  }
+
+  clearEditorSelectionState();
+  store.setState((draft) => {
+    draft.width = snapshot.width;
+    draft.height = snapshot.height;
+    draft.selection = null;
+    draft.pixelDataVersion = (draft.pixelDataVersion ?? 0) + 1;
+  });
+}
+
+export function computeComposite(
+  frameId: string,
+  state: ImageEditorState,
+): ImageData {
+  const { width, height } = state;
+  const visibleIds = getLeafLayerIds(
+    state.layerOrder,
+    state.layers,
+    state.imageLayers,
+    state.layerGroups,
+  );
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return new ImageData(width, height);
+  }
+
+  for (const layerId of visibleIds) {
+    const data = moduleLayerFrameData.get(layerDataKey(frameId, layerId));
+    if (!data) continue;
+
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempContext = tempCanvas.getContext("2d");
+    if (!tempContext) continue;
+    tempContext.putImageData(data, 0, 0);
+    context.drawImage(tempCanvas, 0, 0);
+  }
+
+  return context.getImageData(0, 0, width, height);
+}
+
+export function computeCompositeBelowLayer(
+  frameId: string,
+  activeLayerId: string,
+  state: ImageEditorState,
+): ImageData {
+  const { width, height } = state;
+  const allVisible = getLeafLayerIds(
+    state.layerOrder,
+    state.layers,
+    state.imageLayers,
+    state.layerGroups,
+  );
+  const activeIndex = allVisible.indexOf(activeLayerId);
+  const belowIds = activeIndex > 0 ? allVisible.slice(0, activeIndex) : [];
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return new ImageData(width, height);
+  }
+
+  for (const layerId of belowIds) {
+    const data = moduleLayerFrameData.get(layerDataKey(frameId, layerId));
+    if (!data) continue;
+
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempContext = tempCanvas.getContext("2d");
+    if (!tempContext) continue;
+    tempContext.putImageData(data, 0, 0);
+    context.drawImage(tempCanvas, 0, 0);
+  }
+
+  return context.getImageData(0, 0, width, height);
+}
+
+export function computeCompositeAboveLayer(
+  frameId: string,
+  activeLayerId: string,
+  state: ImageEditorState,
+): ImageData {
+  const { width, height } = state;
+  const allVisible = getLeafLayerIds(
+    state.layerOrder,
+    state.layers,
+    state.imageLayers,
+    state.layerGroups,
+  );
+  const activeIndex = allVisible.indexOf(activeLayerId);
+  const aboveIds =
+    activeIndex >= 0 && activeIndex < allVisible.length - 1
+      ? allVisible.slice(activeIndex + 1)
+      : [];
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    return new ImageData(width, height);
+  }
+
+  for (const layerId of aboveIds) {
+    const data = moduleLayerFrameData.get(layerDataKey(frameId, layerId));
+    if (!data) continue;
+
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempContext = tempCanvas.getContext("2d");
+    if (!tempContext) continue;
+    tempContext.putImageData(data, 0, 0);
+    context.drawImage(tempCanvas, 0, 0);
+  }
+
+  return context.getImageData(0, 0, width, height);
+}
+
+export function snapshotPaletteLibrary(
+  state: ImageEditorState,
+): PaletteLibrarySnapshot {
+  return {
+    palettes: state.palettes.map((palette) => ({
+      ...palette,
+      colors: palette.colors.map((color) => ({ ...color })),
+    })),
+    activePaletteId: state.activePaletteId,
+  };
+}
+
+export function getActivePaletteIndex(state: ImageEditorState): number {
+  const index = state.palettes.findIndex(
+    (palette) => palette.id === state.activePaletteId,
+  );
+  return index >= 0 ? index : 0;
+}
+
+export function insertAfterInOrder(
+  refId: string,
+  newId: ImageEditorLayerId | ImageEditorGroupId,
+  topOrder: (ImageEditorLayerId | ImageEditorGroupId)[],
+  groups: ImageEditorLayerGroup[],
+): void {
+  const topIndex = (topOrder as string[]).indexOf(refId);
+  if (topIndex !== -1) {
+    topOrder.splice(topIndex + 1, 0, newId);
+    return;
+  }
+
+  for (const group of groups) {
+    const childIndex = (group.childOrder as string[]).indexOf(refId);
+    if (childIndex !== -1) {
+      group.childOrder.splice(childIndex + 1, 0, newId);
+      return;
+    }
+  }
+
+  topOrder.push(newId);
+}
+
+export function ensureStoreReady(): void {
+  if (isImageEditorStoreReady()) return;
+
+  const pendingTileRequest = getPendingTileEditorRequest();
+  const pendingImageLayerRequest = getPendingImageLayerEditorRequest();
+  const width = pendingTileRequest?.context.sw
+    ? pendingTileRequest.context.sw
+    : pendingImageLayerRequest?.context.width &&
+        pendingImageLayerRequest.context.width > 0
+      ? pendingImageLayerRequest.context.width
+      : 16;
+  const height = pendingTileRequest?.context.sh
+    ? pendingTileRequest.context.sh
+    : pendingImageLayerRequest?.context.height &&
+        pendingImageLayerRequest.context.height > 0
+      ? pendingImageLayerRequest.context.height
+      : 16;
+
+  initImageEditorStore(width, height);
+
+  const store = getImageEditorStore();
+  const state = store.getState();
+  if (state.frames.length > 0 && state.layers.length > 0) {
+    const key = layerDataKey(state.frames[0].id, state.layers[0].id);
+    if (!moduleLayerFrameData.has(key)) {
+      moduleLayerFrameData.set(key, new ImageData(width, height));
+    }
+  }
+
+  if (savedDocumentFingerprint === null) {
+    savedDocumentFingerprint = buildSaveFingerprint(state);
+  }
+}
+
+export function markSavePoint(state: ImageEditorState | null): void {
+  savedDocumentFingerprint = buildSaveFingerprint(state);
+}
+
+export function hasUnsavedImageChanges(
+  state: ImageEditorState | null,
+): boolean {
+  const currentFingerprint = buildSaveFingerprint(state);
+  if (!currentFingerprint) return false;
+  return currentFingerprint !== savedDocumentFingerprint;
+}
+
+export function resetImageEditorDocumentState(): void {
+  destroyImageEditorStore();
+  pixelHistory.clearAllHistory();
+  moduleLayerFrameData.clear();
+  paletteUndoStack.length = 0;
+  paletteRedoStack.length = 0;
+  frameOpUndoStack.length = 0;
+  frameOpRedoStack.length = 0;
+  resizeUndoStack.length = 0;
+  resizeRedoStack.length = 0;
+  actionLog.length = 0;
+  redoLog.length = 0;
+  savedDocumentFingerprint = null;
+}
+
+export { getImageEditorStore, isImageEditorStoreReady, subscribeToImageEditorStoreInstance };
\ No newline at end of file
diff --git a/src/lib/image-editor-selection-tools.ts b/src/lib/image-editor-selection-tools.ts
new file mode 100644
index 0000000..8ac8bb3
--- /dev/null
+++ b/src/lib/image-editor-selection-tools.ts
@@ -0,0 +1,537 @@
+import type {
+  ImageEditorResizeHandle as ResizeHandle,
+  SelectionState,
+  StrokeState,
+  ToolContext,
+} from "@/types/image-editor-internals";
+
+function createSelectionState(): SelectionState {
+  return {
+    floatingPixels: null,
+    floatingX: 0,
+    floatingY: 0,
+    displayWidth: 0,
+    displayHeight: 0,
+    sourceRect: null,
+    draggingFloating: false,
+    resizingHandle: null,
+    resizeStartX: 0,
+    resizeStartY: 0,
+    resizeStartBounds: { x: 0, y: 0, w: 0, h: 0 },
+    canvasSnapshot: null,
+    dragOffsetX: 0,
+    dragOffsetY: 0,
+    committed: false,
+  };
+}
+
+let selectionState: SelectionState = createSelectionState();
+
+export function getSelectionState(): SelectionState {
+  return selectionState;
+}
+
+export function resetSelectionState(): void {
+  selectionState = createSelectionState();
+}
+
+function getScaledFloating(): ImageData | null {
+  const state = selectionState;
+  if (!state.floatingPixels) return null;
+
+  const displayWidth = Math.max(1, Math.round(state.displayWidth));
+  const displayHeight = Math.max(1, Math.round(state.displayHeight));
+
+  if (
+    displayWidth === state.floatingPixels.width &&
+    displayHeight === state.floatingPixels.height
+  ) {
+    return state.floatingPixels;
+  }
+
+  const sourceCanvas = document.createElement("canvas");
+  sourceCanvas.width = state.floatingPixels.width;
+  sourceCanvas.height = state.floatingPixels.height;
+  const sourceContext = sourceCanvas.getContext("2d");
+  if (!sourceContext) return null;
+  sourceContext.putImageData(state.floatingPixels, 0, 0);
+
+  const destinationCanvas = document.createElement("canvas");
+  destinationCanvas.width = displayWidth;
+  destinationCanvas.height = displayHeight;
+  const destinationContext = destinationCanvas.getContext("2d");
+  if (!destinationContext) return null;
+  destinationContext.imageSmoothingEnabled = false;
+  destinationContext.drawImage(sourceCanvas, 0, 0, displayWidth, displayHeight);
+
+  return destinationContext.getImageData(0, 0, displayWidth, displayHeight);
+}
+
+export function commitFloatingSelection(tc: ToolContext): void {
+  const state = selectionState;
+  if (!state.floatingPixels) return;
+
+  const scaled = getScaledFloating();
+  if (!scaled) return;
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  const floatingX = Math.round(state.floatingX);
+  const floatingY = Math.round(state.floatingY);
+
+  for (let py = 0; py < scaled.height; py += 1) {
+    for (let px = 0; px < scaled.width; px += 1) {
+      const sourceIndex = (py * scaled.width + px) * 4;
+      const alpha = scaled.data[sourceIndex + 3];
+      if (alpha === 0) continue;
+
+      const targetX = floatingX + px;
+      const targetY = floatingY + py;
+      if (
+        targetX < 0 ||
+        targetY < 0 ||
+        targetX >= tc.width ||
+        targetY >= tc.height
+      ) {
+        continue;
+      }
+
+      const destinationIndex = (targetY * tc.width + targetX) * 4;
+      imageData.data[destinationIndex] = scaled.data[sourceIndex];
+      imageData.data[destinationIndex + 1] = scaled.data[sourceIndex + 1];
+      imageData.data[destinationIndex + 2] = scaled.data[sourceIndex + 2];
+      imageData.data[destinationIndex + 3] = scaled.data[sourceIndex + 3];
+    }
+  }
+
+  tc.ctx.putImageData(imageData, 0, 0);
+  state.committed = true;
+}
+
+function isInsideFloating(x: number, y: number): boolean {
+  const state = selectionState;
+  if (!state.floatingPixels) return false;
+
+  return (
+    x >= state.floatingX &&
+    y >= state.floatingY &&
+    x < state.floatingX + state.displayWidth &&
+    y < state.floatingY + state.displayHeight
+  );
+}
+
+const HANDLE_SIZE = 2;
+
+export function hitTestResizeHandle(x: number, y: number): ResizeHandle {
+  const state = selectionState;
+  if (!state.floatingPixels) return null;
+
+  const floatingX = state.floatingX;
+  const floatingY = state.floatingY;
+  const displayWidth = state.displayWidth;
+  const displayHeight = state.displayHeight;
+  const handleSize = HANDLE_SIZE;
+
+  if (Math.abs(x - floatingX) <= handleSize && Math.abs(y - floatingY) <= handleSize) {
+    return "nw";
+  }
+  if (
+    Math.abs(x - (floatingX + displayWidth)) <= handleSize &&
+    Math.abs(y - floatingY) <= handleSize
+  ) {
+    return "ne";
+  }
+  if (
+    Math.abs(x - floatingX) <= handleSize &&
+    Math.abs(y - (floatingY + displayHeight)) <= handleSize
+  ) {
+    return "sw";
+  }
+  if (
+    Math.abs(x - (floatingX + displayWidth)) <= handleSize &&
+    Math.abs(y - (floatingY + displayHeight)) <= handleSize
+  ) {
+    return "se";
+  }
+
+  if (
+    Math.abs(y - floatingY) <= handleSize &&
+    x > floatingX + handleSize &&
+    x < floatingX + displayWidth - handleSize
+  ) {
+    return "n";
+  }
+  if (
+    Math.abs(y - (floatingY + displayHeight)) <= handleSize &&
+    x > floatingX + handleSize &&
+    x < floatingX + displayWidth - handleSize
+  ) {
+    return "s";
+  }
+  if (
+    Math.abs(x - floatingX) <= handleSize &&
+    y > floatingY + handleSize &&
+    y < floatingY + displayHeight - handleSize
+  ) {
+    return "w";
+  }
+  if (
+    Math.abs(x - (floatingX + displayWidth)) <= handleSize &&
+    y > floatingY + handleSize &&
+    y < floatingY + displayHeight - handleSize
+  ) {
+    return "e";
+  }
+
+  return null;
+}
+
+export function getResizeHandleCursor(handle: ResizeHandle): string {
+  switch (handle) {
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+    case "n":
+    case "s":
+      return "ns-resize";
+    case "e":
+    case "w":
+      return "ew-resize";
+    default:
+      return "";
+  }
+}
+
+export function drawFloatingOnOverlay(tc: ToolContext): void {
+  const state = selectionState;
+  if (!state.floatingPixels) return;
+
+  const displayWidth = Math.max(1, Math.round(state.displayWidth));
+  const displayHeight = Math.max(1, Math.round(state.displayHeight));
+  const floatingX = Math.round(state.floatingX);
+  const floatingY = Math.round(state.floatingY);
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+
+  const sourceCanvas = document.createElement("canvas");
+  sourceCanvas.width = state.floatingPixels.width;
+  sourceCanvas.height = state.floatingPixels.height;
+  const sourceContext = sourceCanvas.getContext("2d");
+  if (!sourceContext) return;
+  sourceContext.putImageData(state.floatingPixels, 0, 0);
+
+  tc.overlayCtx.imageSmoothingEnabled = false;
+  tc.overlayCtx.drawImage(sourceCanvas, floatingX, floatingY, displayWidth, displayHeight);
+}
+
+export function selectionDown(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  strokeState.active = true;
+
+  if (selectionState.floatingPixels) {
+    const handle = hitTestResizeHandle(x, y);
+    if (handle) {
+      selectionState.resizingHandle = handle;
+      selectionState.resizeStartX = x;
+      selectionState.resizeStartY = y;
+      selectionState.resizeStartBounds = {
+        x: selectionState.floatingX,
+        y: selectionState.floatingY,
+        w: selectionState.displayWidth,
+        h: selectionState.displayHeight,
+      };
+      selectionState.canvasSnapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+      return;
+    }
+
+    if (isInsideFloating(x, y)) {
+      selectionState.draggingFloating = true;
+      selectionState.dragOffsetX = x - selectionState.floatingX;
+      selectionState.dragOffsetY = y - selectionState.floatingY;
+      selectionState.canvasSnapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+      return;
+    }
+
+    commitFloatingSelection(tc);
+    resetSelectionState();
+  }
+
+  strokeState.startX = x;
+  strokeState.startY = y;
+  selectionState.draggingFloating = false;
+  selectionState.resizingHandle = null;
+}
+
+export function selectionMove(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): { x: number; y: number; width: number; height: number } | null {
+  if (!strokeState.active) return null;
+
+  if (selectionState.resizingHandle && selectionState.floatingPixels) {
+    const dx = x - selectionState.resizeStartX;
+    const dy = y - selectionState.resizeStartY;
+    const bounds = selectionState.resizeStartBounds;
+    const handle = selectionState.resizingHandle;
+
+    let nextX = bounds.x;
+    let nextY = bounds.y;
+    let nextWidth = bounds.w;
+    let nextHeight = bounds.h;
+
+    if (handle.includes("w")) {
+      nextX = bounds.x + dx;
+      nextWidth = bounds.w - dx;
+    }
+    if (handle.includes("e")) {
+      nextWidth = bounds.w + dx;
+    }
+    if (handle.includes("n")) {
+      nextY = bounds.y + dy;
+      nextHeight = bounds.h - dy;
+    }
+    if (handle.includes("s")) {
+      nextHeight = bounds.h + dy;
+    }
+
+    if (
+      tc.shiftKey &&
+      (handle === "nw" || handle === "ne" || handle === "sw" || handle === "se")
+    ) {
+      const aspectRatio =
+        selectionState.floatingPixels.width / selectionState.floatingPixels.height;
+      if (nextWidth / aspectRatio > nextHeight) {
+        nextHeight = Math.round(nextWidth / aspectRatio);
+      } else {
+        nextWidth = Math.round(nextHeight * aspectRatio);
+      }
+      if (handle.includes("n")) {
+        nextY = bounds.y + bounds.h - nextHeight;
+      }
+      if (handle.includes("w")) {
+        nextX = bounds.x + bounds.w - nextWidth;
+      }
+    }
+
+    if (nextWidth < 1) {
+      nextWidth = 1;
+      if (handle.includes("w")) {
+        nextX = bounds.x + bounds.w - 1;
+      }
+    }
+    if (nextHeight < 1) {
+      nextHeight = 1;
+      if (handle.includes("n")) {
+        nextY = bounds.y + bounds.h - 1;
+      }
+    }
+
+    selectionState.floatingX = nextX;
+    selectionState.floatingY = nextY;
+    selectionState.displayWidth = nextWidth;
+    selectionState.displayHeight = nextHeight;
+
+    if (selectionState.canvasSnapshot) {
+      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
+    }
+    drawFloatingOnOverlay(tc);
+
+    return {
+      x: nextX,
+      y: nextY,
+      width: nextWidth,
+      height: nextHeight,
+    };
+  }
+
+  if (selectionState.draggingFloating && selectionState.floatingPixels) {
+    selectionState.floatingX = x - selectionState.dragOffsetX;
+    selectionState.floatingY = y - selectionState.dragOffsetY;
+
+    if (selectionState.canvasSnapshot) {
+      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
+    }
+    drawFloatingOnOverlay(tc);
+
+    return {
+      x: selectionState.floatingX,
+      y: selectionState.floatingY,
+      width: selectionState.displayWidth,
+      height: selectionState.displayHeight,
+    };
+  }
+
+  const minX = Math.min(strokeState.startX, x);
+  const minY = Math.min(strokeState.startY, y);
+  const maxX = Math.max(strokeState.startX, x);
+  const maxY = Math.max(strokeState.startY, y);
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+export function selectionUp(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): { x: number; y: number; width: number; height: number } | null {
+  if (!strokeState.active) return null;
+  strokeState.active = false;
+
+  if (selectionState.resizingHandle && selectionState.floatingPixels) {
+    selectionState.resizingHandle = null;
+    if (selectionState.canvasSnapshot) {
+      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
+    }
+    drawFloatingOnOverlay(tc);
+    return {
+      x: selectionState.floatingX,
+      y: selectionState.floatingY,
+      width: selectionState.displayWidth,
+      height: selectionState.displayHeight,
+    };
+  }
+
+  if (selectionState.draggingFloating && selectionState.floatingPixels) {
+    selectionState.draggingFloating = false;
+    if (selectionState.canvasSnapshot) {
+      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
+    }
+    drawFloatingOnOverlay(tc);
+    return {
+      x: selectionState.floatingX,
+      y: selectionState.floatingY,
+      width: selectionState.displayWidth,
+      height: selectionState.displayHeight,
+    };
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+
+  const minX = Math.min(strokeState.startX, x);
+  const minY = Math.min(strokeState.startY, y);
+  const maxX = Math.max(strokeState.startX, x);
+  const maxY = Math.max(strokeState.startY, y);
+  const selectionWidth = maxX - minX;
+  const selectionHeight = maxY - minY;
+
+  if (selectionWidth < 1 || selectionHeight < 1) return null;
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  const floatingPixels = new ImageData(selectionWidth, selectionHeight);
+
+  for (let py = 0; py < selectionHeight; py += 1) {
+    for (let px = 0; px < selectionWidth; px += 1) {
+      const sourceX = minX + px;
+      const sourceY = minY + py;
+      if (
+        sourceX < 0 ||
+        sourceY < 0 ||
+        sourceX >= tc.width ||
+        sourceY >= tc.height
+      ) {
+        continue;
+      }
+
+      const sourceIndex = (sourceY * tc.width + sourceX) * 4;
+      const destinationIndex = (py * selectionWidth + px) * 4;
+      floatingPixels.data[destinationIndex] = imageData.data[sourceIndex];
+      floatingPixels.data[destinationIndex + 1] = imageData.data[sourceIndex + 1];
+      floatingPixels.data[destinationIndex + 2] = imageData.data[sourceIndex + 2];
+      floatingPixels.data[destinationIndex + 3] = imageData.data[sourceIndex + 3];
+
+      imageData.data[sourceIndex] = 0;
+      imageData.data[sourceIndex + 1] = 0;
+      imageData.data[sourceIndex + 2] = 0;
+      imageData.data[sourceIndex + 3] = 0;
+    }
+  }
+
+  tc.ctx.putImageData(imageData, 0, 0);
+
+  selectionState.floatingPixels = floatingPixels;
+  selectionState.floatingX = minX;
+  selectionState.floatingY = minY;
+  selectionState.displayWidth = selectionWidth;
+  selectionState.displayHeight = selectionHeight;
+  selectionState.sourceRect = {
+    x: minX,
+    y: minY,
+    width: selectionWidth,
+    height: selectionHeight,
+  };
+  selectionState.committed = false;
+
+  drawFloatingOnOverlay(tc);
+
+  return {
+    x: minX,
+    y: minY,
+    width: selectionWidth,
+    height: selectionHeight,
+  };
+}
+
+export function copySelectionPixels(): ImageData | null {
+  const scaled = getScaledFloating();
+  if (!scaled) return null;
+
+  return new ImageData(
+    new Uint8ClampedArray(scaled.data),
+    scaled.width,
+    scaled.height,
+  );
+}
+
+export function pasteSelectionPixels(
+  tc: ToolContext,
+  pixels: ImageData,
+  fitTo?: { width: number; height: number },
+): { x: number; y: number; width: number; height: number } {
+  if (selectionState.floatingPixels) {
+    commitFloatingSelection(tc);
+    resetSelectionState();
+  }
+
+  selectionState.floatingPixels = new ImageData(
+    new Uint8ClampedArray(pixels.data),
+    pixels.width,
+    pixels.height,
+  );
+  selectionState.floatingX = 0;
+  selectionState.floatingY = 0;
+
+  let displayWidth = pixels.width;
+  let displayHeight = pixels.height;
+  if (fitTo && (pixels.width > fitTo.width || pixels.height > fitTo.height)) {
+    const scale = Math.min(
+      fitTo.width / pixels.width,
+      fitTo.height / pixels.height,
+    );
+    displayWidth = Math.max(1, Math.round(pixels.width * scale));
+    displayHeight = Math.max(1, Math.round(pixels.height * scale));
+  }
+
+  selectionState.displayWidth = displayWidth;
+  selectionState.displayHeight = displayHeight;
+  selectionState.committed = false;
+
+  drawFloatingOnOverlay(tc);
+
+  return { x: 0, y: 0, width: displayWidth, height: displayHeight };
+}
\ No newline at end of file
diff --git a/src/lib/image-editor-shape-tools.ts b/src/lib/image-editor-shape-tools.ts
new file mode 100644
index 0000000..d7ae000
--- /dev/null
+++ b/src/lib/image-editor-shape-tools.ts
@@ -0,0 +1,284 @@
+import type { Color } from "@/types/image-editor";
+import type { StrokeState, ToolContext } from "@/types/image-editor-internals";
+import {
+  bresenhamLine,
+  constrainAngle,
+  constrainSquare,
+  drawBrush,
+  setPixel,
+} from "./image-editor-tools-shared";
+
+export function lineDown(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  strokeState.active = true;
+  strokeState.startX = x;
+  strokeState.startY = y;
+  strokeState.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+}
+
+export function lineMove(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  if (!strokeState.active || !strokeState.snapshot) return;
+
+  let endX = x;
+  let endY = y;
+  if (tc.shiftKey) {
+    [endX, endY] = constrainAngle(strokeState.startX, strokeState.startY, x, y);
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+  const overlayImageData = tc.overlayCtx.createImageData(tc.width, tc.height);
+
+  const points = bresenhamLine(strokeState.startX, strokeState.startY, endX, endY);
+  for (const [px, py] of points) {
+    drawBrush(
+      overlayImageData.data,
+      tc.width,
+      tc.height,
+      px,
+      py,
+      tc.brushSize,
+      tc.color,
+    );
+  }
+
+  tc.overlayCtx.putImageData(overlayImageData, 0, 0);
+}
+
+export function lineUp(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  if (!strokeState.active) return;
+
+  let endX = x;
+  let endY = y;
+  if (tc.shiftKey) {
+    [endX, endY] = constrainAngle(strokeState.startX, strokeState.startY, x, y);
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  const points = bresenhamLine(strokeState.startX, strokeState.startY, endX, endY);
+  for (const [px, py] of points) {
+    drawBrush(
+      imageData.data,
+      tc.width,
+      tc.height,
+      px,
+      py,
+      tc.brushSize,
+      tc.color,
+    );
+  }
+
+  tc.ctx.putImageData(imageData, 0, 0);
+  strokeState.active = false;
+  strokeState.snapshot = null;
+}
+
+function drawFilledRect(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  color: Color,
+): void {
+  const minX = Math.min(x0, x1);
+  const maxX = Math.max(x0, x1);
+  const minY = Math.min(y0, y1);
+  const maxY = Math.max(y0, y1);
+
+  for (let py = minY; py <= maxY; py += 1) {
+    for (let px = minX; px <= maxX; px += 1) {
+      setPixel(data, width, height, px, py, color);
+    }
+  }
+}
+
+export function rectangleDown(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  strokeState.active = true;
+  strokeState.startX = x;
+  strokeState.startY = y;
+  strokeState.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+}
+
+export function rectangleMove(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  if (!strokeState.active) return;
+
+  let endX = x;
+  let endY = y;
+  if (tc.shiftKey) {
+    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+  const overlayImageData = tc.overlayCtx.createImageData(tc.width, tc.height);
+  drawFilledRect(
+    overlayImageData.data,
+    tc.width,
+    tc.height,
+    strokeState.startX,
+    strokeState.startY,
+    endX,
+    endY,
+    tc.color,
+  );
+  tc.overlayCtx.putImageData(overlayImageData, 0, 0);
+}
+
+export function rectangleUp(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  if (!strokeState.active) return;
+
+  let endX = x;
+  let endY = y;
+  if (tc.shiftKey) {
+    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  drawFilledRect(
+    imageData.data,
+    tc.width,
+    tc.height,
+    strokeState.startX,
+    strokeState.startY,
+    endX,
+    endY,
+    tc.color,
+  );
+  tc.ctx.putImageData(imageData, 0, 0);
+
+  strokeState.active = false;
+  strokeState.snapshot = null;
+}
+
+function drawRectOutline(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  color: Color,
+): void {
+  const minX = Math.min(x0, x1);
+  const maxX = Math.max(x0, x1);
+  const minY = Math.min(y0, y1);
+  const maxY = Math.max(y0, y1);
+
+  for (let px = minX; px <= maxX; px += 1) {
+    setPixel(data, width, height, px, minY, color);
+    setPixel(data, width, height, px, maxY, color);
+  }
+  for (let py = minY; py <= maxY; py += 1) {
+    setPixel(data, width, height, minX, py, color);
+    setPixel(data, width, height, maxX, py, color);
+  }
+}
+
+export function contourDown(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  strokeState.active = true;
+  strokeState.startX = x;
+  strokeState.startY = y;
+  strokeState.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+}
+
+export function contourMove(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  if (!strokeState.active) return;
+
+  let endX = x;
+  let endY = y;
+  if (tc.shiftKey) {
+    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+  const overlayImageData = tc.overlayCtx.createImageData(tc.width, tc.height);
+  drawRectOutline(
+    overlayImageData.data,
+    tc.width,
+    tc.height,
+    strokeState.startX,
+    strokeState.startY,
+    endX,
+    endY,
+    tc.color,
+  );
+  tc.overlayCtx.putImageData(overlayImageData, 0, 0);
+}
+
+export function contourUp(
+  tc: ToolContext,
+  x: number,
+  y: number,
+  strokeState: StrokeState,
+): void {
+  if (!strokeState.active) return;
+
+  let endX = x;
+  let endY = y;
+  if (tc.shiftKey) {
+    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+  }
+
+  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  drawRectOutline(
+    imageData.data,
+    tc.width,
+    tc.height,
+    strokeState.startX,
+    strokeState.startY,
+    endX,
+    endY,
+    tc.color,
+  );
+  tc.ctx.putImageData(imageData, 0, 0);
+
+  strokeState.active = false;
+  strokeState.snapshot = null;
+}
\ No newline at end of file
diff --git a/src/lib/image-editor-tools-shared.ts b/src/lib/image-editor-tools-shared.ts
new file mode 100644
index 0000000..a359997
--- /dev/null
+++ b/src/lib/image-editor-tools-shared.ts
@@ -0,0 +1,220 @@
+import type { Color } from "@/types/image-editor";
+import type { StrokeState } from "@/types/image-editor-internals";
+
+/** Bresenham line: returns every pixel along (x0,y0)->(x1,y1). */
+export function bresenhamLine(
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+): [number, number][] {
+  const points: [number, number][] = [];
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const sx = x0 < x1 ? 1 : -1;
+  const sy = y0 < y1 ? 1 : -1;
+  let err = dx - dy;
+
+  let cx = x0;
+  let cy = y0;
+
+  while (true) {
+    points.push([cx, cy]);
+    if (cx === x1 && cy === y1) break;
+    const e2 = 2 * err;
+    if (e2 > -dy) {
+      err -= dy;
+      cx += sx;
+    }
+    if (e2 < dx) {
+      err += dx;
+      cy += sy;
+    }
+  }
+
+  return points;
+}
+
+/** Blend a single pixel into an ImageData buffer using source-over alpha. */
+export function setPixel(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  x: number,
+  y: number,
+  color: Color,
+): void {
+  if (x < 0 || y < 0 || x >= width || y >= height) return;
+
+  const index = (y * width + x) * 4;
+  if (color.a <= 0) return;
+
+  if (color.a >= 255) {
+    data[index] = color.r;
+    data[index + 1] = color.g;
+    data[index + 2] = color.b;
+    data[index + 3] = 255;
+    return;
+  }
+
+  const destinationRed = data[index]!;
+  const destinationGreen = data[index + 1]!;
+  const destinationBlue = data[index + 2]!;
+  const destinationAlpha = data[index + 3]! / 255;
+  const sourceAlpha = color.a / 255;
+  const outputAlpha = sourceAlpha + destinationAlpha * (1 - sourceAlpha);
+
+  if (outputAlpha <= 0) {
+    data[index] = 0;
+    data[index + 1] = 0;
+    data[index + 2] = 0;
+    data[index + 3] = 0;
+    return;
+  }
+
+  const sourceWeight = sourceAlpha / outputAlpha;
+  const destinationWeight =
+    (destinationAlpha * (1 - sourceAlpha)) / outputAlpha;
+
+  data[index] = Math.round(
+    color.r * sourceWeight + destinationRed * destinationWeight,
+  );
+  data[index + 1] = Math.round(
+    color.g * sourceWeight + destinationGreen * destinationWeight,
+  );
+  data[index + 2] = Math.round(
+    color.b * sourceWeight + destinationBlue * destinationWeight,
+  );
+  data[index + 3] = Math.round(outputAlpha * 255);
+}
+
+/** Get pixel color from ImageData. Returns transparent black if out of bounds. */
+export function getPixel(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  x: number,
+  y: number,
+): Color {
+  if (x < 0 || y < 0 || x >= width || y >= height) {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  }
+
+  const index = (y * width + x) * 4;
+  return {
+    r: data[index],
+    g: data[index + 1],
+    b: data[index + 2],
+    a: data[index + 3],
+  };
+}
+
+/** Draw a filled circle at (cx,cy) with given brush radius. */
+export function drawBrush(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  cx: number,
+  cy: number,
+  size: number,
+  color: Color,
+): void {
+  if (size <= 1) {
+    setPixel(data, width, height, cx, cy, color);
+    return;
+  }
+
+  const radius = size / 2;
+  const radiusSquared = radius * radius;
+  const startX = Math.floor(cx - radius + 0.5);
+  const startY = Math.floor(cy - radius + 0.5);
+  const endX = Math.ceil(cx + radius - 0.5);
+  const endY = Math.ceil(cy + radius - 0.5);
+
+  for (let py = startY; py <= endY; py += 1) {
+    for (let px = startX; px <= endX; px += 1) {
+      const dx = px - cx;
+      const dy = py - cy;
+      if (dx * dx + dy * dy <= radiusSquared) {
+        setPixel(data, width, height, px, py, color);
+      }
+    }
+  }
+}
+
+export function drawSquareBrush(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  cx: number,
+  cy: number,
+  size: number,
+  color: Color,
+): void {
+  if (size <= 1) {
+    setPixel(data, width, height, cx, cy, color);
+    return;
+  }
+
+  const radius = Math.floor(size / 2);
+  for (let py = cy - radius; py <= cy + radius; py += 1) {
+    for (let px = cx - radius; px <= cx + radius; px += 1) {
+      setPixel(data, width, height, px, py, color);
+    }
+  }
+}
+
+export function createStrokeState(): StrokeState {
+  return {
+    startX: 0,
+    startY: 0,
+    lastX: 0,
+    lastY: 0,
+    snapshot: null,
+    path: [],
+    moveOffsetX: 0,
+    moveOffsetY: 0,
+    active: false,
+  };
+}
+
+/**
+ * Snap the endpoint to the nearest 45 degree angle increment from the start point.
+ * Used by the line tool when shift is held.
+ */
+export function constrainAngle(
+  sx: number,
+  sy: number,
+  ex: number,
+  ey: number,
+): [number, number] {
+  const dx = ex - sx;
+  const dy = ey - sy;
+  const distance = Math.sqrt(dx * dx + dy * dy);
+  if (distance === 0) return [ex, ey];
+
+  const angle = Math.atan2(dy, dx);
+  const snap = Math.PI / 4;
+  const snapped = Math.round(angle / snap) * snap;
+
+  return [
+    sx + Math.round(distance * Math.cos(snapped)),
+    sy + Math.round(distance * Math.sin(snapped)),
+  ];
+}
+
+/**
+ * Constrain a rectangle to a square by using the larger dimension.
+ * Used by rectangle/contour tools when shift is held.
+ */
+export function constrainSquare(
+  sx: number,
+  sy: number,
+  ex: number,
+  ey: number,
+): [number, number] {
+  const dx = ex - sx;
+  const dy = ey - sy;
+  const size = Math.max(Math.abs(dx), Math.abs(dy));
+  return [sx + size * Math.sign(dx || 1), sy + size * Math.sign(dy || 1)];
+}
\ No newline at end of file
diff --git a/src/lib/image-editor-tools.ts b/src/lib/image-editor-tools.ts
index 84005ed..55244da 100644
--- a/src/lib/image-editor-tools.ts
+++ b/src/lib/image-editor-tools.ts
@@ -1,110 +1,82 @@
 /**
  * Drawing tool implementations for the pixel-art image editor.
  *
- * Each tool exports onDown / onMove / onUp handlers that operate on
- * raw ImageData pixels via getImageData / putImageData.
- *
- * Coordinate space: all x,y are in *pixel* coordinates (NOT zoomed).
+ * Public API remains stable from this module; larger tool families live in
+ * focused peer modules and are re-exported here.
  */
 
 import type { Color, ImageEditorTool } from "@/types/image-editor";
-import type {
-  ImageEditorResizeHandle as ResizeHandle,
-  SelectionState,
-  StrokeState,
-  ToolContext,
-} from "@/types/image-editor-internals";
-
-// ---------------------------------------------------------------------------
-// Common helpers
-// ---------------------------------------------------------------------------
-
-/** Bresenham line: returns every pixel along (x0,y0)→(x1,y1). */
-export function bresenhamLine(
-  x0: number,
-  y0: number,
-  x1: number,
-  y1: number,
-): [number, number][] {
-  const points: [number, number][] = [];
-  const dx = Math.abs(x1 - x0);
-  const dy = Math.abs(y1 - y0);
-  const sx = x0 < x1 ? 1 : -1;
-  const sy = y0 < y1 ? 1 : -1;
-  let err = dx - dy;
-
-  let cx = x0;
-  let cy = y0;
-
-  while (true) {
-    points.push([cx, cy]);
-    if (cx === x1 && cy === y1) break;
-    const e2 = 2 * err;
-    if (e2 > -dy) {
-      err -= dy;
-      cx += sx;
-    }
-    if (e2 < dx) {
-      err += dx;
-      cy += sy;
-    }
-  }
-  return points;
-}
-
-/** Blend a single pixel into an ImageData buffer using source-over alpha. */
-export function setPixel(
-  data: Uint8ClampedArray,
-  width: number,
-  height: number,
-  x: number,
-  y: number,
-  color: Color,
-): void {
-  if (x < 0 || y < 0 || x >= width || y >= height) return;
-  const i = (y * width + x) * 4;
-  if (color.a <= 0) return;
-
-  if (color.a >= 255) {
-    data[i] = color.r;
-    data[i + 1] = color.g;
-    data[i + 2] = color.b;
-    data[i + 3] = 255;
-    return;
-  }
-
-  const destinationRed = data[i]!;
-  const destinationGreen = data[i + 1]!;
-  const destinationBlue = data[i + 2]!;
-  const destinationAlpha = data[i + 3]! / 255;
-  const sourceAlpha = color.a / 255;
-  const outputAlpha = sourceAlpha + destinationAlpha * (1 - sourceAlpha);
-
-  if (outputAlpha <= 0) {
-    data[i] = 0;
-    data[i + 1] = 0;
-    data[i + 2] = 0;
-    data[i + 3] = 0;
-    return;
-  }
-
-  const sourceWeight = sourceAlpha / outputAlpha;
-  const destinationWeight =
-    (destinationAlpha * (1 - sourceAlpha)) / outputAlpha;
+import type { StrokeState, ToolContext } from "@/types/image-editor-internals";
+import {
+  bresenhamLine,
+  getPixel,
+  setPixel,
+} from "./image-editor-tools-shared";
+import {
+  selectionDown,
+  selectionMove,
+  selectionUp,
+} from "./image-editor-selection-tools";
+import {
+  cropDown,
+  cropMove,
+  cropUp,
+} from "./image-editor-crop-tools";
+import {
+  contourDown,
+  contourMove,
+  contourUp,
+  lineDown,
+  lineMove,
+  lineUp,
+  rectangleDown,
+  rectangleMove,
+  rectangleUp,
+} from "./image-editor-shape-tools";
+
+export {
+  bresenhamLine,
+  constrainAngle,
+  constrainSquare,
+  createStrokeState,
+  drawBrush,
+  drawSquareBrush,
+  getPixel,
+  setPixel,
+} from "./image-editor-tools-shared";
+export {
+  commitFloatingSelection,
+  copySelectionPixels,
+  drawFloatingOnOverlay,
+  getResizeHandleCursor,
+  getSelectionState,
+  hitTestResizeHandle,
+  pasteSelectionPixels,
+  resetSelectionState,
+  selectionDown,
+  selectionMove,
+  selectionUp,
+} from "./image-editor-selection-tools";
+export {
+  cropDown,
+  cropMove,
+  cropUp,
+  getCropState,
+  hitTestCropHandle,
+  resetCropState,
+} from "./image-editor-crop-tools";
+export {
+  contourDown,
+  contourMove,
+  contourUp,
+  lineDown,
+  lineMove,
+  lineUp,
+  rectangleDown,
+  rectangleMove,
+  rectangleUp,
+} from "./image-editor-shape-tools";
 
-  data[i] = Math.round(
-    color.r * sourceWeight + destinationRed * destinationWeight,
-  );
-  data[i + 1] = Math.round(
-    color.g * sourceWeight + destinationGreen * destinationWeight,
-  );
-  data[i + 2] = Math.round(
-    color.b * sourceWeight + destinationBlue * destinationWeight,
-  );
-  data[i + 3] = Math.round(outputAlpha * 255);
-}
-
-/** Clear a single pixel to full transparency. Bounds-checked. */
 function clearPixel(
   data: Uint8ClampedArray,
   width: number,
@@ -113,79 +85,12 @@ function clearPixel(
   y: number,
 ): void {
   if (x < 0 || y < 0 || x >= width || y >= height) return;
-  const i = (y * width + x) * 4;
-  data[i] = 0;
-  data[i + 1] = 0;
-  data[i + 2] = 0;
-  data[i + 3] = 0;
-}
 
-/** Get pixel color from ImageData. Returns transparent black if out of bounds. */
-export function getPixel(
-  data: Uint8ClampedArray,
-  width: number,
-  height: number,
-  x: number,
-  y: number,
-): Color {
-  if (x < 0 || y < 0 || x >= width || y >= height) {
-    return { r: 0, g: 0, b: 0, a: 0 };
-  }
-  const i = (y * width + x) * 4;
-  return { r: data[i], g: data[i + 1], b: data[i + 2], a: data[i + 3] };
-}
-
-/** Draw a filled circle at (cx,cy) with given brush radius. */
-export function drawBrush(
-  data: Uint8ClampedArray,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  size: number,
-  color: Color,
-): void {
-  if (size <= 1) {
-    setPixel(data, width, height, cx, cy, color);
-    return;
-  }
-  const radius = size / 2;
-  const r2 = radius * radius;
-  const startX = Math.floor(cx - radius + 0.5);
-  const startY = Math.floor(cy - radius + 0.5);
-  const endX = Math.ceil(cx + radius - 0.5);
-  const endY = Math.ceil(cy + radius - 0.5);
-  for (let py = startY; py <= endY; py++) {
-    for (let px = startX; px <= endX; px++) {
-      const dx = px - cx;
-      const dy = py - cy;
-      if (dx * dx + dy * dy <= r2) {
-        setPixel(data, width, height, px, py, color);
-      }
-    }
-  }
-}
-
-export function drawSquareBrush(
-  data: Uint8ClampedArray,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  size: number,
-  color: Color,
-): void {
-  if (size <= 1) {
-    setPixel(data, width, height, cx, cy, color);
-    return;
-  }
-
-  const radius = Math.floor(size / 2);
-  for (let py = cy - radius; py <= cy + radius; py++) {
-    for (let px = cx - radius; px <= cx + radius; px++) {
-      setPixel(data, width, height, px, py, color);
-    }
-  }
+  const index = (y * width + x) * 4;
+  data[index] = 0;
+  data[index + 1] = 0;
+  data[index + 2] = 0;
+  data[index + 3] = 0;
 }
 
 function clearSquareBrush(
@@ -202,85 +107,17 @@ function clearSquareBrush(
   }
 
   const radius = Math.floor(size / 2);
-  for (let py = cy - radius; py <= cy + radius; py++) {
-    for (let px = cx - radius; px <= cx + radius; px++) {
+  for (let py = cy - radius; py <= cy + radius; py += 1) {
+    for (let px = cx - radius; px <= cx + radius; px += 1) {
       clearPixel(data, width, height, px, py);
     }
   }
 }
 
-/** Check if two colors match exactly. */
 function colorsEqual(a: Color, b: Color): boolean {
   return a.r === b.r && a.g === b.g && a.b === b.b && a.a === b.a;
 }
 
-// ---------------------------------------------------------------------------
-// Tool state — persisted across onDown / onMove / onUp calls
-// ---------------------------------------------------------------------------
-
-export function createStrokeState(): StrokeState {
-  return {
-    startX: 0,
-    startY: 0,
-    lastX: 0,
-    lastY: 0,
-    snapshot: null,
-    path: [],
-    moveOffsetX: 0,
-    moveOffsetY: 0,
-    active: false,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Shift-constraint helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Snap the endpoint to the nearest 45° angle increment from the start point.
- * Used by the line tool when shift is held.
- */
-export function constrainAngle(
-  sx: number,
-  sy: number,
-  ex: number,
-  ey: number,
-): [number, number] {
-  const dx = ex - sx;
-  const dy = ey - sy;
-  const dist = Math.sqrt(dx * dx + dy * dy);
-  if (dist === 0) return [ex, ey];
-
-  const angle = Math.atan2(dy, dx);
-  const snap = Math.PI / 4; // 45°
-  const snapped = Math.round(angle / snap) * snap;
-
-  return [
-    sx + Math.round(dist * Math.cos(snapped)),
-    sy + Math.round(dist * Math.sin(snapped)),
-  ];
-}
-
-/**
- * Constrain a rectangle to a square by using the larger dimension.
- * Used by rectangle/contour tools when shift is held.
- */
-export function constrainSquare(
-  sx: number,
-  sy: number,
-  ex: number,
-  ey: number,
-): [number, number] {
-  const dx = ex - sx;
-  const dy = ey - sy;
-  const size = Math.max(Math.abs(dx), Math.abs(dy));
-  return [sx + size * Math.sign(dx || 1), sy + size * Math.sign(dy || 1)];
-}
-
-// ---------------------------------------------------------------------------
-// Pencil tool
-// ---------------------------------------------------------------------------
-
 function drawSquareBrushOnce(
   data: Uint8ClampedArray,
   width: number,
@@ -293,6 +130,7 @@ function drawSquareBrushOnce(
 ): void {
   if (size <= 1) {
     if (cx < 0 || cy < 0 || cx >= width || cy >= height) return;
+
     const index = cy * width + cx;
     if (visited.has(index)) return;
     visited.add(index);
@@ -301,9 +139,10 @@ function drawSquareBrushOnce(
   }
 
   const radius = Math.floor(size / 2);
-  for (let py = cy - radius; py <= cy + radius; py++) {
-    for (let px = cx - radius; px <= cx + radius; px++) {
+  for (let py = cy - radius; py <= cy + radius; py += 1) {
+    for (let px = cx - radius; px <= cx + radius; px += 1) {
       if (px < 0 || py < 0 || px >= width || py >= height) continue;
+
       const index = py * width + px;
       if (visited.has(index)) continue;
       visited.add(index);
@@ -312,22 +151,23 @@ function drawSquareBrushOnce(
   }
 }
 
-function renderPencilStroke(tc: ToolContext, ss: StrokeState): void {
-  if (!ss.snapshot || ss.path.length === 0) return;
+function renderPencilStroke(tc: ToolContext, strokeState: StrokeState): void {
+  if (!strokeState.snapshot || strokeState.path.length === 0) return;
 
-  const imgData = tc.ctx.createImageData(tc.width, tc.height);
-  imgData.data.set(ss.snapshot.data);
+  const imageData = tc.ctx.createImageData(tc.width, tc.height);
+  imageData.data.set(strokeState.snapshot.data);
 
   const visited = new Set<number>();
 
-  for (let pathIndex = 0; pathIndex < ss.path.length; pathIndex += 1) {
-    const [startX, startY] = ss.path[pathIndex]!;
-    const [endX, endY] = ss.path[pathIndex + 1] ?? ss.path[pathIndex]!;
+  for (let pathIndex = 0; pathIndex < strokeState.path.length; pathIndex += 1) {
+    const [startX, startY] = strokeState.path[pathIndex]!;
+    const [endX, endY] =
+      strokeState.path[pathIndex + 1] ?? strokeState.path[pathIndex]!;
     const points = bresenhamLine(startX, startY, endX, endY);
 
     for (const [px, py] of points) {
       drawSquareBrushOnce(
-        imgData.data,
+        imageData.data,
         tc.width,
         tc.height,
         px,
@@ -339,1241 +179,189 @@ function renderPencilStroke(tc: ToolContext, ss: StrokeState): void {
     }
   }
 
-  tc.ctx.putImageData(imgData, 0, 0);
+  tc.ctx.putImageData(imageData, 0, 0);
 }
 
 export function pencilDown(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = true;
-  ss.startX = x;
-  ss.startY = y;
-  ss.lastX = x;
-  ss.lastY = y;
-  ss.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  ss.path = [[x, y]];
-  renderPencilStroke(tc, ss);
+  strokeState.active = true;
+  strokeState.startX = x;
+  strokeState.startY = y;
+  strokeState.lastX = x;
+  strokeState.lastY = y;
+  strokeState.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  strokeState.path = [[x, y]];
+  renderPencilStroke(tc, strokeState);
 }
 
 export function pencilMove(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  if (!ss.active || !ss.snapshot) return;
-  if (ss.lastX !== x || ss.lastY !== y) {
-    ss.path.push([x, y]);
+  if (!strokeState.active || !strokeState.snapshot) return;
+
+  if (strokeState.lastX !== x || strokeState.lastY !== y) {
+    strokeState.path.push([x, y]);
   }
-  renderPencilStroke(tc, ss);
-  ss.lastX = x;
-  ss.lastY = y;
+  renderPencilStroke(tc, strokeState);
+  strokeState.lastX = x;
+  strokeState.lastY = y;
 }
 
 export function pencilUp(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  if (ss.active && ss.snapshot) {
-    if (ss.lastX !== x || ss.lastY !== y) {
-      ss.path.push([x, y]);
-      ss.lastX = x;
-      ss.lastY = y;
+  if (strokeState.active && strokeState.snapshot) {
+    if (strokeState.lastX !== x || strokeState.lastY !== y) {
+      strokeState.path.push([x, y]);
+      strokeState.lastX = x;
+      strokeState.lastY = y;
     }
-    renderPencilStroke(tc, ss);
+    renderPencilStroke(tc, strokeState);
   }
 
-  ss.active = false;
-  ss.snapshot = null;
-  ss.path = [];
+  strokeState.active = false;
+  strokeState.snapshot = null;
+  strokeState.path = [];
 }
 
-// ---------------------------------------------------------------------------
-// Eraser tool
-// ---------------------------------------------------------------------------
-
 export function eraserDown(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = true;
-  ss.lastX = x;
-  ss.lastY = y;
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  clearSquareBrush(imgData.data, tc.width, tc.height, x, y, tc.brushSize);
-  tc.ctx.putImageData(imgData, 0, 0);
+  strokeState.active = true;
+  strokeState.lastX = x;
+  strokeState.lastY = y;
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  clearSquareBrush(imageData.data, tc.width, tc.height, x, y, tc.brushSize);
+  tc.ctx.putImageData(imageData, 0, 0);
 }
 
 export function eraserMove(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  if (!ss.active) return;
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const points = bresenhamLine(ss.lastX, ss.lastY, x, y);
+  if (!strokeState.active) return;
+
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  const points = bresenhamLine(strokeState.lastX, strokeState.lastY, x, y);
   for (const [px, py] of points) {
-    clearSquareBrush(imgData.data, tc.width, tc.height, px, py, tc.brushSize);
+    clearSquareBrush(imageData.data, tc.width, tc.height, px, py, tc.brushSize);
   }
-  tc.ctx.putImageData(imgData, 0, 0);
-  ss.lastX = x;
-  ss.lastY = y;
+  tc.ctx.putImageData(imageData, 0, 0);
+
+  strokeState.lastX = x;
+  strokeState.lastY = y;
 }
 
 export function eraserUp(
   _tc: ToolContext,
   _x: number,
   _y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = false;
-}
-
-// ---------------------------------------------------------------------------
-// Selection tool
-// ---------------------------------------------------------------------------
-
-/**
- * Extended stroke state for the selection tool.
- * Stored in a module-level variable so it persists across stroke cycles.
- */
-let selectionState: SelectionState = {
-  floatingPixels: null,
-  floatingX: 0,
-  floatingY: 0,
-  displayWidth: 0,
-  displayHeight: 0,
-  sourceRect: null,
-  draggingFloating: false,
-  resizingHandle: null,
-  resizeStartX: 0,
-  resizeStartY: 0,
-  resizeStartBounds: { x: 0, y: 0, w: 0, h: 0 },
-  canvasSnapshot: null,
-  dragOffsetX: 0,
-  dragOffsetY: 0,
-  committed: false,
-};
-
-export function getSelectionState(): SelectionState {
-  return selectionState;
-}
-
-export function resetSelectionState(): void {
-  selectionState = {
-    floatingPixels: null,
-    floatingX: 0,
-    floatingY: 0,
-    displayWidth: 0,
-    displayHeight: 0,
-    sourceRect: null,
-    draggingFloating: false,
-    resizingHandle: null,
-    resizeStartX: 0,
-    resizeStartY: 0,
-    resizeStartBounds: { x: 0, y: 0, w: 0, h: 0 },
-    canvasSnapshot: null,
-    dragOffsetX: 0,
-    dragOffsetY: 0,
-    committed: false,
-  };
+  strokeState.active = false;
 }
 
-/** Get the scaled floating selection as an ImageData at display dimensions. */
-function getScaledFloating(): ImageData | null {
-  const ss = selectionState;
-  if (!ss.floatingPixels) return null;
-
-  const dw = Math.max(1, Math.round(ss.displayWidth));
-  const dh = Math.max(1, Math.round(ss.displayHeight));
-
-  // If no resize needed, return original
-  if (dw === ss.floatingPixels.width && dh === ss.floatingPixels.height) {
-    return ss.floatingPixels;
-  }
-
-  // Nearest-neighbor scale using offscreen canvas
-  const srcCanvas = document.createElement("canvas");
-  srcCanvas.width = ss.floatingPixels.width;
-  srcCanvas.height = ss.floatingPixels.height;
-  const srcCtx = srcCanvas.getContext("2d")!;
-  srcCtx.putImageData(ss.floatingPixels, 0, 0);
-
-  const dstCanvas = document.createElement("canvas");
-  dstCanvas.width = dw;
-  dstCanvas.height = dh;
-  const dstCtx = dstCanvas.getContext("2d")!;
-  dstCtx.imageSmoothingEnabled = false;
-  dstCtx.drawImage(srcCanvas, 0, 0, dw, dh);
-
-  return dstCtx.getImageData(0, 0, dw, dh);
-}
-
-/** Commit the floating selection onto the main canvas. */
-export function commitFloatingSelection(tc: ToolContext): void {
-  const ss = selectionState;
-  if (!ss.floatingPixels) return;
-
-  const scaled = getScaledFloating();
-  if (!scaled) return;
-
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const fx = Math.round(ss.floatingX);
-  const fy = Math.round(ss.floatingY);
-
-  for (let py = 0; py < scaled.height; py++) {
-    for (let px = 0; px < scaled.width; px++) {
-      const si = (py * scaled.width + px) * 4;
-      const a = scaled.data[si + 3];
-      if (a === 0) continue;
-      const tx = fx + px;
-      const ty = fy + py;
-      if (tx < 0 || ty < 0 || tx >= tc.width || ty >= tc.height) continue;
-      const di = (ty * tc.width + tx) * 4;
-      imgData.data[di] = scaled.data[si];
-      imgData.data[di + 1] = scaled.data[si + 1];
-      imgData.data[di + 2] = scaled.data[si + 2];
-      imgData.data[di + 3] = scaled.data[si + 3];
-    }
-  }
-
-  tc.ctx.putImageData(imgData, 0, 0);
-  ss.committed = true;
-}
-
-/** Check if a point is inside the floating selection bounds */
-function isInsideFloating(x: number, y: number): boolean {
-  const ss = selectionState;
-  if (!ss.floatingPixels) return false;
-  const dw = ss.displayWidth;
-  const dh = ss.displayHeight;
-  return (
-    x >= ss.floatingX &&
-    y >= ss.floatingY &&
-    x < ss.floatingX + dw &&
-    y < ss.floatingY + dh
-  );
-}
-
-/** Detect which resize handle (if any) is under the given point. */
-const HANDLE_SIZE = 2; // pixels in canvas space
-
-export function hitTestResizeHandle(x: number, y: number): ResizeHandle {
-  const ss = selectionState;
-  if (!ss.floatingPixels) return null;
-
-  const fx = ss.floatingX;
-  const fy = ss.floatingY;
-  const dw = ss.displayWidth;
-  const dh = ss.displayHeight;
-  const hs = HANDLE_SIZE;
-
-  // Corners first (higher priority)
-  if (Math.abs(x - fx) <= hs && Math.abs(y - fy) <= hs) return "nw";
-  if (Math.abs(x - (fx + dw)) <= hs && Math.abs(y - fy) <= hs) return "ne";
-  if (Math.abs(x - fx) <= hs && Math.abs(y - (fy + dh)) <= hs) return "sw";
-  if (Math.abs(x - (fx + dw)) <= hs && Math.abs(y - (fy + dh)) <= hs)
-    return "se";
-
-  // Edges
-  if (Math.abs(y - fy) <= hs && x > fx + hs && x < fx + dw - hs) return "n";
-  if (Math.abs(y - (fy + dh)) <= hs && x > fx + hs && x < fx + dw - hs)
-    return "s";
-  if (Math.abs(x - fx) <= hs && y > fy + hs && y < fy + dh - hs) return "w";
-  if (Math.abs(x - (fx + dw)) <= hs && y > fy + hs && y < fy + dh - hs)
-    return "e";
-
-  return null;
-}
-
-/** Get cursor CSS name for a resize handle */
-export function getResizeHandleCursor(handle: ResizeHandle): string {
-  switch (handle) {
-    case "nw":
-    case "se":
-      return "nwse-resize";
-    case "ne":
-    case "sw":
-      return "nesw-resize";
-    case "n":
-    case "s":
-      return "ns-resize";
-    case "e":
-    case "w":
-      return "ew-resize";
-    default:
-      return "";
-  }
-}
-
-/** Draw the floating selection (scaled) on the overlay canvas with resize handles */
-export function drawFloatingOnOverlay(tc: ToolContext): void {
-  const ss = selectionState;
-  if (!ss.floatingPixels) return;
-
-  const dw = Math.max(1, Math.round(ss.displayWidth));
-  const dh = Math.max(1, Math.round(ss.displayHeight));
-  const fx = Math.round(ss.floatingX);
-  const fy = Math.round(ss.floatingY);
-
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-
-  // Draw scaled floating pixels
-  const srcCanvas = document.createElement("canvas");
-  srcCanvas.width = ss.floatingPixels.width;
-  srcCanvas.height = ss.floatingPixels.height;
-  const srcCtx = srcCanvas.getContext("2d")!;
-  srcCtx.putImageData(ss.floatingPixels, 0, 0);
-
-  tc.overlayCtx.imageSmoothingEnabled = false;
-  tc.overlayCtx.drawImage(srcCanvas, fx, fy, dw, dh);
-
-  // NOTE: Marching ants border and resize handles are drawn by the
-  // screen-resolution selection canvas in ImageCanvas.tsx for crisp rendering.
-}
-
-export function selectionDown(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  ss.active = true;
-
-  if (selectionState.floatingPixels) {
-    // Check for resize handle first
-    const handle = hitTestResizeHandle(x, y);
-    if (handle) {
-      selectionState.resizingHandle = handle;
-      selectionState.resizeStartX = x;
-      selectionState.resizeStartY = y;
-      selectionState.resizeStartBounds = {
-        x: selectionState.floatingX,
-        y: selectionState.floatingY,
-        w: selectionState.displayWidth,
-        h: selectionState.displayHeight,
-      };
-      selectionState.canvasSnapshot = tc.ctx.getImageData(
-        0,
-        0,
-        tc.width,
-        tc.height,
-      );
-      return;
-    }
-
-    // Click inside floating selection — start dragging
-    if (isInsideFloating(x, y)) {
-      selectionState.draggingFloating = true;
-      selectionState.dragOffsetX = x - selectionState.floatingX;
-      selectionState.dragOffsetY = y - selectionState.floatingY;
-      selectionState.canvasSnapshot = tc.ctx.getImageData(
-        0,
-        0,
-        tc.width,
-        tc.height,
-      );
-      return;
-    }
-
-    // Click outside — commit floating selection
-    commitFloatingSelection(tc);
-    resetSelectionState();
-  }
-
-  // Start drawing a new selection rectangle
-  ss.startX = x;
-  ss.startY = y;
-  selectionState.draggingFloating = false;
-  selectionState.resizingHandle = null;
-}
-
-export function selectionMove(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): { x: number; y: number; width: number; height: number } | null {
-  if (!ss.active) return null;
-
-  // Resizing the floating selection
-  if (selectionState.resizingHandle && selectionState.floatingPixels) {
-    const dx = x - selectionState.resizeStartX;
-    const dy = y - selectionState.resizeStartY;
-    const b = selectionState.resizeStartBounds;
-    const handle = selectionState.resizingHandle;
-
-    let nx = b.x,
-      ny = b.y,
-      nw = b.w,
-      nh = b.h;
-
-    if (handle.includes("w")) {
-      nx = b.x + dx;
-      nw = b.w - dx;
-    }
-    if (handle.includes("e")) {
-      nw = b.w + dx;
-    }
-    if (handle.includes("n")) {
-      ny = b.y + dy;
-      nh = b.h - dy;
-    }
-    if (handle.includes("s")) {
-      nh = b.h + dy;
-    }
-
-    // Shift-constrain: preserve original aspect ratio on corner handles
-    if (
-      tc.shiftKey &&
-      selectionState.floatingPixels &&
-      (handle === "nw" || handle === "ne" || handle === "sw" || handle === "se")
-    ) {
-      const ar =
-        selectionState.floatingPixels.width /
-        selectionState.floatingPixels.height;
-      if (nw / ar > nh) {
-        nh = Math.round(nw / ar);
-      } else {
-        nw = Math.round(nh * ar);
-      }
-      if (handle.includes("n")) {
-        ny = b.y + b.h - nh;
-      }
-      if (handle.includes("w")) {
-        nx = b.x + b.w - nw;
-      }
-    }
-
-    // Enforce minimum size
-    if (nw < 1) {
-      nw = 1;
-      if (handle.includes("w")) nx = b.x + b.w - 1;
-    }
-    if (nh < 1) {
-      nh = 1;
-      if (handle.includes("n")) ny = b.y + b.h - 1;
-    }
-
-    selectionState.floatingX = nx;
-    selectionState.floatingY = ny;
-    selectionState.displayWidth = nw;
-    selectionState.displayHeight = nh;
-
-    if (selectionState.canvasSnapshot) {
-      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
-    }
-
-    drawFloatingOnOverlay(tc);
-
-    return { x: nx, y: ny, width: nw, height: nh };
-  }
-
-  // Dragging the floating selection
-  if (selectionState.draggingFloating && selectionState.floatingPixels) {
-    selectionState.floatingX = x - selectionState.dragOffsetX;
-    selectionState.floatingY = y - selectionState.dragOffsetY;
-
-    if (selectionState.canvasSnapshot) {
-      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
-    }
-
-    drawFloatingOnOverlay(tc);
-
-    return {
-      x: selectionState.floatingX,
-      y: selectionState.floatingY,
-      width: selectionState.displayWidth,
-      height: selectionState.displayHeight,
-    };
-  }
-
-  // Drawing a new selection rectangle
-  // NOTE: marching ants drawn by screen-resolution canvas in ImageCanvas.tsx
-  const minX = Math.min(ss.startX, x);
-  const minY = Math.min(ss.startY, y);
-  const maxX = Math.max(ss.startX, x);
-  const maxY = Math.max(ss.startY, y);
-  const selW = maxX - minX;
-  const selH = maxY - minY;
-
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-
-  return { x: minX, y: minY, width: selW, height: selH };
-}
-
-export function selectionUp(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): { x: number; y: number; width: number; height: number } | null {
-  if (!ss.active) return null;
-  ss.active = false;
-
-  // Finished resizing
-  if (selectionState.resizingHandle && selectionState.floatingPixels) {
-    selectionState.resizingHandle = null;
-    if (selectionState.canvasSnapshot) {
-      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
-    }
-    drawFloatingOnOverlay(tc);
-    return {
-      x: selectionState.floatingX,
-      y: selectionState.floatingY,
-      width: selectionState.displayWidth,
-      height: selectionState.displayHeight,
-    };
-  }
-
-  // Finished dragging floating selection
-  if (selectionState.draggingFloating && selectionState.floatingPixels) {
-    selectionState.draggingFloating = false;
-    if (selectionState.canvasSnapshot) {
-      tc.ctx.putImageData(selectionState.canvasSnapshot, 0, 0);
-    }
-    drawFloatingOnOverlay(tc);
-    return {
-      x: selectionState.floatingX,
-      y: selectionState.floatingY,
-      width: selectionState.displayWidth,
-      height: selectionState.displayHeight,
-    };
-  }
-
-  // Finished drawing a new selection rectangle
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-
-  const minX = Math.min(ss.startX, x);
-  const minY = Math.min(ss.startY, y);
-  const maxX = Math.max(ss.startX, x);
-  const maxY = Math.max(ss.startY, y);
-  const selW = maxX - minX;
-  const selH = maxY - minY;
-
-  if (selW < 1 || selH < 1) return null;
-
-  // "Lift" the selected pixels into a floating selection
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const floatingPixels = new ImageData(selW, selH);
-
-  for (let py = 0; py < selH; py++) {
-    for (let px = 0; px < selW; px++) {
-      const sx = minX + px;
-      const sy = minY + py;
-      if (sx < 0 || sy < 0 || sx >= tc.width || sy >= tc.height) continue;
-      const si = (sy * tc.width + sx) * 4;
-      const di = (py * selW + px) * 4;
-      floatingPixels.data[di] = imgData.data[si];
-      floatingPixels.data[di + 1] = imgData.data[si + 1];
-      floatingPixels.data[di + 2] = imgData.data[si + 2];
-      floatingPixels.data[di + 3] = imgData.data[si + 3];
-
-      // Clear the source area
-      imgData.data[si] = 0;
-      imgData.data[si + 1] = 0;
-      imgData.data[si + 2] = 0;
-      imgData.data[si + 3] = 0;
-    }
-  }
-
-  tc.ctx.putImageData(imgData, 0, 0);
-
-  selectionState.floatingPixels = floatingPixels;
-  selectionState.floatingX = minX;
-  selectionState.floatingY = minY;
-  selectionState.displayWidth = selW;
-  selectionState.displayHeight = selH;
-  selectionState.sourceRect = { x: minX, y: minY, width: selW, height: selH };
-  selectionState.committed = false;
-
-  // Show floating on overlay with handles
-  drawFloatingOnOverlay(tc);
-
-  return { x: minX, y: minY, width: selW, height: selH };
-}
-
-/** Copy the current floating selection to a buffer (for Ctrl+C). Returns a scaled copy or null. */
-export function copySelectionPixels(): ImageData | null {
-  const scaled = getScaledFloating();
-  if (!scaled) return null;
-  return new ImageData(
-    new Uint8ClampedArray(scaled.data),
-    scaled.width,
-    scaled.height,
-  );
-}
-
-/** Paste pixels as a new floating selection (for Ctrl+V or image import).
- *  When `fitTo` is provided and the image exceeds those dimensions,
- *  the display size is scaled down to fit so the user can see and
- *  resize the whole image. */
-export function pasteSelectionPixels(
-  tc: ToolContext,
-  pixels: ImageData,
-  fitTo?: { width: number; height: number },
-): { x: number; y: number; width: number; height: number } {
-  // If there's an existing floating selection, commit it first
-  if (selectionState.floatingPixels) {
-    commitFloatingSelection(tc);
-    resetSelectionState();
-  }
-
-  selectionState.floatingPixels = new ImageData(
-    new Uint8ClampedArray(pixels.data),
-    pixels.width,
-    pixels.height,
-  );
-  selectionState.floatingX = 0;
-  selectionState.floatingY = 0;
-
-  // When fitTo is specified and the image exceeds the canvas, scale the
-  // display dimensions down so the whole image is visible and the user
-  // can resize / reposition it before committing.
-  let displayWidth = pixels.width;
-  let displayHeight = pixels.height;
-  if (fitTo && (pixels.width > fitTo.width || pixels.height > fitTo.height)) {
-    const scale = Math.min(
-      fitTo.width / pixels.width,
-      fitTo.height / pixels.height,
-    );
-    displayWidth = Math.max(1, Math.round(pixels.width * scale));
-    displayHeight = Math.max(1, Math.round(pixels.height * scale));
-  }
-
-  selectionState.displayWidth = displayWidth;
-  selectionState.displayHeight = displayHeight;
-  selectionState.committed = false;
-
-  // Show on overlay with handles
-  drawFloatingOnOverlay(tc);
-
-  return { x: 0, y: 0, width: displayWidth, height: displayHeight };
-}
-
-// ---------------------------------------------------------------------------
-// Crop tool
-// ---------------------------------------------------------------------------
-
-type CropRect = { x: number; y: number; width: number; height: number };
-
-type CropState = {
-  rect: CropRect | null;
-  dragging: boolean;
-  resizingHandle: ResizeHandle;
-  dragOffsetX: number;
-  dragOffsetY: number;
-  resizeStartX: number;
-  resizeStartY: number;
-  resizeStartRect: CropRect | null;
-};
-
-let cropState: CropState = {
-  rect: null,
-  dragging: false,
-  resizingHandle: null,
-  dragOffsetX: 0,
-  dragOffsetY: 0,
-  resizeStartX: 0,
-  resizeStartY: 0,
-  resizeStartRect: null,
-};
-
-export function getCropState(): CropState {
-  return cropState;
-}
-
-export function resetCropState(): void {
-  cropState = {
-    rect: null,
-    dragging: false,
-    resizingHandle: null,
-    dragOffsetX: 0,
-    dragOffsetY: 0,
-    resizeStartX: 0,
-    resizeStartY: 0,
-    resizeStartRect: null,
-  };
-}
-
-function clampCropRect(tc: ToolContext, rect: CropRect): CropRect {
-  const x = Math.max(0, Math.min(tc.width - 1, rect.x));
-  const y = Math.max(0, Math.min(tc.height - 1, rect.y));
-  const width = Math.max(1, Math.min(rect.width, tc.width - x));
-  const height = Math.max(1, Math.min(rect.height, tc.height - y));
-  return { x, y, width, height };
-}
-
-function isInsideCropRect(x: number, y: number, rect: CropRect): boolean {
-  return (
-    x >= rect.x &&
-    y >= rect.y &&
-    x < rect.x + rect.width &&
-    y < rect.y + rect.height
-  );
-}
-
-export function hitTestCropHandle(x: number, y: number): ResizeHandle {
-  const rect = cropState.rect;
-  if (!rect) return null;
-
-  const hs = HANDLE_SIZE;
-  const rx = rect.x;
-  const ry = rect.y;
-  const rw = rect.width;
-  const rh = rect.height;
-
-  if (Math.abs(x - rx) <= hs && Math.abs(y - ry) <= hs) return "nw";
-  if (Math.abs(x - (rx + rw)) <= hs && Math.abs(y - ry) <= hs) return "ne";
-  if (Math.abs(x - rx) <= hs && Math.abs(y - (ry + rh)) <= hs) return "sw";
-  if (Math.abs(x - (rx + rw)) <= hs && Math.abs(y - (ry + rh)) <= hs) {
-    return "se";
-  }
-  if (Math.abs(y - ry) <= hs && x > rx + hs && x < rx + rw - hs) return "n";
-  if (Math.abs(y - (ry + rh)) <= hs && x > rx + hs && x < rx + rw - hs) {
-    return "s";
-  }
-  if (Math.abs(x - rx) <= hs && y > ry + hs && y < ry + rh - hs) return "w";
-  if (Math.abs(x - (rx + rw)) <= hs && y > ry + hs && y < ry + rh - hs) {
-    return "e";
-  }
-  return null;
-}
-
-export function cropDown(
-  _tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  ss.active = true;
-
-  if (cropState.rect) {
-    const handle = hitTestCropHandle(x, y);
-    if (handle) {
-      cropState.resizingHandle = handle;
-      cropState.resizeStartX = x;
-      cropState.resizeStartY = y;
-      cropState.resizeStartRect = { ...cropState.rect };
-      return;
-    }
-
-    if (isInsideCropRect(x, y, cropState.rect)) {
-      cropState.dragging = true;
-      cropState.dragOffsetX = x - cropState.rect.x;
-      cropState.dragOffsetY = y - cropState.rect.y;
-      return;
-    }
-  }
-
-  ss.startX = x;
-  ss.startY = y;
-  cropState.rect = null;
-  cropState.dragging = false;
-  cropState.resizingHandle = null;
-}
-
-export function cropMove(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): CropRect | null {
-  if (!ss.active) return cropState.rect;
-
-  if (cropState.resizingHandle && cropState.resizeStartRect) {
-    const handle = cropState.resizingHandle;
-    const startRect = cropState.resizeStartRect;
-    const dx = x - cropState.resizeStartX;
-    const dy = y - cropState.resizeStartY;
-
-    let nextX = startRect.x;
-    let nextY = startRect.y;
-    let nextWidth = startRect.width;
-    let nextHeight = startRect.height;
-
-    if (handle.includes("w")) {
-      nextX = startRect.x + dx;
-      nextWidth = startRect.width - dx;
-    }
-    if (handle.includes("e")) {
-      nextWidth = startRect.width + dx;
-    }
-    if (handle.includes("n")) {
-      nextY = startRect.y + dy;
-      nextHeight = startRect.height - dy;
-    }
-    if (handle.includes("s")) {
-      nextHeight = startRect.height + dy;
-    }
-
-    if (nextWidth < 1) {
-      nextWidth = 1;
-      if (handle.includes("w")) nextX = startRect.x + startRect.width - 1;
-    }
-    if (nextHeight < 1) {
-      nextHeight = 1;
-      if (handle.includes("n")) nextY = startRect.y + startRect.height - 1;
-    }
-
-    cropState.rect = clampCropRect(tc, {
-      x: nextX,
-      y: nextY,
-      width: nextWidth,
-      height: nextHeight,
-    });
-    return cropState.rect;
-  }
-
-  if (cropState.dragging && cropState.rect) {
-    cropState.rect = clampCropRect(tc, {
-      x: x - cropState.dragOffsetX,
-      y: y - cropState.dragOffsetY,
-      width: cropState.rect.width,
-      height: cropState.rect.height,
-    });
-    return cropState.rect;
-  }
-
-  const minX = Math.min(ss.startX, x);
-  const minY = Math.min(ss.startY, y);
-  const maxX = Math.max(ss.startX, x);
-  const maxY = Math.max(ss.startY, y);
-
-  cropState.rect = clampCropRect(tc, {
-    x: minX,
-    y: minY,
-    width: Math.max(1, maxX - minX),
-    height: Math.max(1, maxY - minY),
-  });
-
-  return cropState.rect;
-}
-
-export function cropUp(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): CropRect | null {
-  if (!ss.active) return cropState.rect;
-  ss.active = false;
-
-  const rect = cropMove(tc, x, y, {
-    ...ss,
-    active: true,
-  });
-
-  cropState.dragging = false;
-  cropState.resizingHandle = null;
-  cropState.resizeStartRect = null;
-
-  if (!rect || rect.width < 1 || rect.height < 1) {
-    cropState.rect = null;
-    return null;
-  }
-
-  return rect;
-}
-
-// ---------------------------------------------------------------------------
-// Move tool
-// ---------------------------------------------------------------------------
-
 export function moveDown(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = true;
-  ss.startX = x;
-  ss.startY = y;
-  ss.moveOffsetX = 0;
-  ss.moveOffsetY = 0;
-  ss.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  strokeState.active = true;
+  strokeState.startX = x;
+  strokeState.startY = y;
+  strokeState.moveOffsetX = 0;
+  strokeState.moveOffsetY = 0;
+  strokeState.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
 }
 
 export function moveMove(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  if (!ss.active || !ss.snapshot) return;
-  const dx = x - ss.startX;
-  const dy = y - ss.startY;
-  ss.moveOffsetX = dx;
-  ss.moveOffsetY = dy;
+  if (!strokeState.active || !strokeState.snapshot) return;
+
+  const dx = x - strokeState.startX;
+  const dy = y - strokeState.startY;
+  strokeState.moveOffsetX = dx;
+  strokeState.moveOffsetY = dy;
 
-  // Clear and redraw offset
   tc.ctx.clearRect(0, 0, tc.width, tc.height);
-  tc.ctx.putImageData(ss.snapshot, dx, dy);
+  tc.ctx.putImageData(strokeState.snapshot, dx, dy);
 }
 
 export function moveUp(
   _tc: ToolContext,
   _x: number,
   _y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = false;
-  ss.snapshot = null;
+  strokeState.active = false;
+  strokeState.snapshot = null;
 }
 
-// ---------------------------------------------------------------------------
-// Paint bucket (flood fill)
-// ---------------------------------------------------------------------------
-
 export function paintBucketDown(tc: ToolContext, x: number, y: number): void {
   if (x < 0 || y < 0 || x >= tc.width || y >= tc.height) return;
 
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const data = imgData.data;
-  const w = tc.width;
-  const h = tc.height;
-
-  const targetColor = getPixel(data, w, h, x, y);
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  const data = imageData.data;
+  const targetColor = getPixel(data, tc.width, tc.height, x, y);
   const fillColor = tc.color;
 
   if (fillColor.a <= 0) return;
   if (fillColor.a >= 255 && colorsEqual(targetColor, fillColor)) return;
 
-  // Scanline flood fill
   const stack: [number, number][] = [[x, y]];
-  const visited = new Uint8Array(w * h);
+  const visited = new Uint8Array(tc.width * tc.height);
 
   while (stack.length > 0) {
     const [cx, cy] = stack.pop()!;
-    if (cx < 0 || cy < 0 || cx >= w || cy >= h) continue;
-    const idx = cy * w + cx;
-    if (visited[idx]) continue;
-    visited[idx] = 1;
+    if (cx < 0 || cy < 0 || cx >= tc.width || cy >= tc.height) continue;
 
-    const c = getPixel(data, w, h, cx, cy);
-    if (!colorsEqual(c, targetColor)) continue;
+    const index = cy * tc.width + cx;
+    if (visited[index]) continue;
+    visited[index] = 1;
 
-    setPixel(data, w, h, cx, cy, fillColor);
+    const currentColor = getPixel(data, tc.width, tc.height, cx, cy);
+    if (!colorsEqual(currentColor, targetColor)) continue;
 
+    setPixel(data, tc.width, tc.height, cx, cy, fillColor);
     stack.push([cx + 1, cy]);
     stack.push([cx - 1, cy]);
     stack.push([cx, cy + 1]);
     stack.push([cx, cy - 1]);
   }
 
-  tc.ctx.putImageData(imgData, 0, 0);
-}
-
-// ---------------------------------------------------------------------------
-// Line tool
-// ---------------------------------------------------------------------------
-
-export function lineDown(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  ss.active = true;
-  ss.startX = x;
-  ss.startY = y;
-  ss.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-}
-
-export function lineMove(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  if (!ss.active || !ss.snapshot) return;
-
-  let endX = x,
-    endY = y;
-  if (tc.shiftKey) {
-    [endX, endY] = constrainAngle(ss.startX, ss.startY, x, y);
-  }
-
-  // Restore snapshot, then draw preview line on overlay
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-  const overlayImgData = tc.overlayCtx.createImageData(tc.width, tc.height);
-
-  const points = bresenhamLine(ss.startX, ss.startY, endX, endY);
-  for (const [px, py] of points) {
-    drawBrush(
-      overlayImgData.data,
-      tc.width,
-      tc.height,
-      px,
-      py,
-      tc.brushSize,
-      tc.color,
-    );
-  }
-  tc.overlayCtx.putImageData(overlayImgData, 0, 0);
-}
-
-export function lineUp(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  if (!ss.active) return;
-
-  let endX = x,
-    endY = y;
-  if (tc.shiftKey) {
-    [endX, endY] = constrainAngle(ss.startX, ss.startY, x, y);
-  }
-
-  // Commit line to the main canvas
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const points = bresenhamLine(ss.startX, ss.startY, endX, endY);
-  for (const [px, py] of points) {
-    drawBrush(
-      imgData.data,
-      tc.width,
-      tc.height,
-      px,
-      py,
-      tc.brushSize,
-      tc.color,
-    );
-  }
-  tc.ctx.putImageData(imgData, 0, 0);
-
-  ss.active = false;
-  ss.snapshot = null;
-}
-
-// ---------------------------------------------------------------------------
-// Rectangle tool (filled)
-// ---------------------------------------------------------------------------
-
-function drawFilledRect(
-  data: Uint8ClampedArray,
-  width: number,
-  height: number,
-  x0: number,
-  y0: number,
-  x1: number,
-  y1: number,
-  color: Color,
-): void {
-  const minX = Math.min(x0, x1);
-  const maxX = Math.max(x0, x1);
-  const minY = Math.min(y0, y1);
-  const maxY = Math.max(y0, y1);
-  for (let py = minY; py <= maxY; py++) {
-    for (let px = minX; px <= maxX; px++) {
-      setPixel(data, width, height, px, py, color);
-    }
-  }
-}
-
-export function rectangleDown(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  ss.active = true;
-  ss.startX = x;
-  ss.startY = y;
-  ss.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-}
-
-export function rectangleMove(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  if (!ss.active) return;
-
-  let endX = x,
-    endY = y;
-  if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(ss.startX, ss.startY, x, y);
-  }
-
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-  const overlayImgData = tc.overlayCtx.createImageData(tc.width, tc.height);
-  drawFilledRect(
-    overlayImgData.data,
-    tc.width,
-    tc.height,
-    ss.startX,
-    ss.startY,
-    endX,
-    endY,
-    tc.color,
-  );
-  tc.overlayCtx.putImageData(overlayImgData, 0, 0);
-}
-
-export function rectangleUp(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  if (!ss.active) return;
-
-  let endX = x,
-    endY = y;
-  if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(ss.startX, ss.startY, x, y);
-  }
-
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  drawFilledRect(
-    imgData.data,
-    tc.width,
-    tc.height,
-    ss.startX,
-    ss.startY,
-    endX,
-    endY,
-    tc.color,
-  );
-  tc.ctx.putImageData(imgData, 0, 0);
-
-  ss.active = false;
-  ss.snapshot = null;
-}
-
-// ---------------------------------------------------------------------------
-// Contour tool (outline rectangle)
-// ---------------------------------------------------------------------------
-
-function drawRectOutline(
-  data: Uint8ClampedArray,
-  width: number,
-  height: number,
-  x0: number,
-  y0: number,
-  x1: number,
-  y1: number,
-  color: Color,
-): void {
-  const minX = Math.min(x0, x1);
-  const maxX = Math.max(x0, x1);
-  const minY = Math.min(y0, y1);
-  const maxY = Math.max(y0, y1);
-
-  // Top and bottom edges
-  for (let px = minX; px <= maxX; px++) {
-    setPixel(data, width, height, px, minY, color);
-    setPixel(data, width, height, px, maxY, color);
-  }
-  // Left and right edges
-  for (let py = minY; py <= maxY; py++) {
-    setPixel(data, width, height, minX, py, color);
-    setPixel(data, width, height, maxX, py, color);
-  }
-}
-
-export function contourDown(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  ss.active = true;
-  ss.startX = x;
-  ss.startY = y;
-  ss.snapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  tc.ctx.putImageData(imageData, 0, 0);
 }
 
-export function contourMove(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  if (!ss.active) return;
-
-  let endX = x,
-    endY = y;
-  if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(ss.startX, ss.startY, x, y);
-  }
-
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-  const overlayImgData = tc.overlayCtx.createImageData(tc.width, tc.height);
-  drawRectOutline(
-    overlayImgData.data,
-    tc.width,
-    tc.height,
-    ss.startX,
-    ss.startY,
-    endX,
-    endY,
-    tc.color,
-  );
-  tc.overlayCtx.putImageData(overlayImgData, 0, 0);
-}
-
-export function contourUp(
-  tc: ToolContext,
-  x: number,
-  y: number,
-  ss: StrokeState,
-): void {
-  if (!ss.active) return;
-
-  let endX = x,
-    endY = y;
-  if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(ss.startX, ss.startY, x, y);
-  }
-
-  tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
-
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  drawRectOutline(
-    imgData.data,
-    tc.width,
-    tc.height,
-    ss.startX,
-    ss.startY,
-    endX,
-    endY,
-    tc.color,
-  );
-  tc.ctx.putImageData(imgData, 0, 0);
-
-  ss.active = false;
-  ss.snapshot = null;
-}
-
-// ---------------------------------------------------------------------------
-// Blur tool
-// ---------------------------------------------------------------------------
-
 export function blurDown(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = true;
-  ss.lastX = x;
-  ss.lastY = y;
+  strokeState.active = true;
+  strokeState.lastX = x;
+  strokeState.lastY = y;
   applyBlurAt(tc, x, y);
 }
 
@@ -1581,124 +369,119 @@ export function blurMove(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  if (!ss.active) return;
-  const points = bresenhamLine(ss.lastX, ss.lastY, x, y);
+  if (!strokeState.active) return;
+
+  const points = bresenhamLine(strokeState.lastX, strokeState.lastY, x, y);
   for (const [px, py] of points) {
     applyBlurAt(tc, px, py);
   }
-  ss.lastX = x;
-  ss.lastY = y;
+
+  strokeState.lastX = x;
+  strokeState.lastY = y;
 }
 
 export function blurUp(
   _tc: ToolContext,
   _x: number,
   _y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): void {
-  ss.active = false;
+  strokeState.active = false;
 }
 
 function applyBlurAt(tc: ToolContext, cx: number, cy: number): void {
-  const imgData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const data = imgData.data;
-  const w = tc.width;
-  const h = tc.height;
-
+  const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+  const data = imageData.data;
   const brushRadius = Math.max(0, tc.blurSize - 1);
   const kernelRadius = Math.max(1, tc.blurSize);
   const intensity = Math.max(1, Math.min(100, tc.blurIntensity)) / 100;
+  const original = new Uint8ClampedArray(data);
 
-  // Copy original data for reading
-  const orig = new Uint8ClampedArray(data);
-
-  for (let dy = -brushRadius; dy <= brushRadius; dy++) {
-    for (let dx = -brushRadius; dx <= brushRadius; dx++) {
+  for (let dy = -brushRadius; dy <= brushRadius; dy += 1) {
+    for (let dx = -brushRadius; dx <= brushRadius; dx += 1) {
       const px = cx + dx;
       const py = cy + dy;
-      if (px < 0 || py < 0 || px >= w || py >= h) continue;
+      if (px < 0 || py < 0 || px >= tc.width || py >= tc.height) continue;
 
-      // Variable-size box blur kernel around (px, py)
-      let r = 0,
-        g = 0,
-        b = 0,
-        a = 0,
-        count = 0;
-      for (let ky = -kernelRadius; ky <= kernelRadius; ky++) {
-        for (let kx = -kernelRadius; kx <= kernelRadius; kx++) {
+      let red = 0;
+      let green = 0;
+      let blue = 0;
+      let alpha = 0;
+      let count = 0;
+
+      for (let ky = -kernelRadius; ky <= kernelRadius; ky += 1) {
+        for (let kx = -kernelRadius; kx <= kernelRadius; kx += 1) {
           const nx = px + kx;
           const ny = py + ky;
-          if (nx < 0 || ny < 0 || nx >= w || ny >= h) continue;
-          const ni = (ny * w + nx) * 4;
-          r += orig[ni];
-          g += orig[ni + 1];
-          b += orig[ni + 2];
-          a += orig[ni + 3];
-          count++;
+          if (nx < 0 || ny < 0 || nx >= tc.width || ny >= tc.height) continue;
+
+          const neighborIndex = (ny * tc.width + nx) * 4;
+          red += original[neighborIndex];
+          green += original[neighborIndex + 1];
+          blue += original[neighborIndex + 2];
+          alpha += original[neighborIndex + 3];
+          count += 1;
         }
       }
 
-      const i = (py * w + px) * 4;
-      // Blend between original and blurred by intensity
-      data[i] = Math.round(orig[i] * (1 - intensity) + (r / count) * intensity);
-      data[i + 1] = Math.round(
-        orig[i + 1] * (1 - intensity) + (g / count) * intensity,
+      const index = (py * tc.width + px) * 4;
+      data[index] = Math.round(
+        original[index] * (1 - intensity) + (red / count) * intensity,
+      );
+      data[index + 1] = Math.round(
+        original[index + 1] * (1 - intensity) + (green / count) * intensity,
       );
-      data[i + 2] = Math.round(
-        orig[i + 2] * (1 - intensity) + (b / count) * intensity,
+      data[index + 2] = Math.round(
+        original[index + 2] * (1 - intensity) + (blue / count) * intensity,
       );
-      data[i + 3] = Math.round(
-        orig[i + 3] * (1 - intensity) + (a / count) * intensity,
+      data[index + 3] = Math.round(
+        original[index + 3] * (1 - intensity) + (alpha / count) * intensity,
       );
     }
   }
 
-  tc.ctx.putImageData(imgData, 0, 0);
+  tc.ctx.putImageData(imageData, 0, 0);
 }
 
-// ---------------------------------------------------------------------------
-// Dispatch helpers
-// ---------------------------------------------------------------------------
-
 export function dispatchDown(
   tool: ImageEditorTool,
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): null {
   switch (tool) {
     case "selection":
-      selectionDown(tc, x, y, ss);
+      selectionDown(tc, x, y, strokeState);
       return null;
     case "crop":
-      cropDown(tc, x, y, ss);
+      cropDown(tc, x, y, strokeState);
       return null;
     case "pencil":
-      pencilDown(tc, x, y, ss);
+      pencilDown(tc, x, y, strokeState);
       return null;
     case "eraser":
-      eraserDown(tc, x, y, ss);
+      eraserDown(tc, x, y, strokeState);
       return null;
     case "move":
-      moveDown(tc, x, y, ss);
+      moveDown(tc, x, y, strokeState);
       return null;
     case "paint-bucket":
       paintBucketDown(tc, x, y);
       return null;
     case "line":
-      lineDown(tc, x, y, ss);
+      lineDown(tc, x, y, strokeState);
       return null;
     case "rectangle":
-      rectangleDown(tc, x, y, ss);
+      rectangleDown(tc, x, y, strokeState);
       return null;
     case "contour":
-      contourDown(tc, x, y, ss);
+      contourDown(tc, x, y, strokeState);
       return null;
     case "blur":
-      blurDown(tc, x, y, ss);
+      blurDown(tc, x, y, strokeState);
       return null;
   }
 }
@@ -1708,33 +491,33 @@ export function dispatchMove(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): { x: number; y: number; width: number; height: number } | null {
   switch (tool) {
     case "selection":
-      return selectionMove(tc, x, y, ss);
+      return selectionMove(tc, x, y, strokeState);
     case "crop":
-      return cropMove(tc, x, y, ss);
+      return cropMove(tc, x, y, strokeState);
     case "pencil":
-      pencilMove(tc, x, y, ss);
+      pencilMove(tc, x, y, strokeState);
       return null;
     case "eraser":
-      eraserMove(tc, x, y, ss);
+      eraserMove(tc, x, y, strokeState);
       return null;
     case "move":
-      moveMove(tc, x, y, ss);
+      moveMove(tc, x, y, strokeState);
       return null;
     case "line":
-      lineMove(tc, x, y, ss);
+      lineMove(tc, x, y, strokeState);
       return null;
     case "rectangle":
-      rectangleMove(tc, x, y, ss);
+      rectangleMove(tc, x, y, strokeState);
       return null;
     case "contour":
-      contourMove(tc, x, y, ss);
+      contourMove(tc, x, y, strokeState);
       return null;
     case "blur":
-      blurMove(tc, x, y, ss);
+      blurMove(tc, x, y, strokeState);
       return null;
     default:
       return null;
@@ -1746,35 +529,35 @@ export function dispatchUp(
   tc: ToolContext,
   x: number,
   y: number,
-  ss: StrokeState,
+  strokeState: StrokeState,
 ): { x: number; y: number; width: number; height: number } | null {
   switch (tool) {
     case "selection":
-      return selectionUp(tc, x, y, ss);
+      return selectionUp(tc, x, y, strokeState);
     case "crop":
-      return cropUp(tc, x, y, ss);
+      return cropUp(tc, x, y, strokeState);
     case "pencil":
-      pencilUp(tc, x, y, ss);
+      pencilUp(tc, x, y, strokeState);
       return null;
     case "eraser":
-      eraserUp(tc, x, y, ss);
+      eraserUp(tc, x, y, strokeState);
       return null;
     case "move":
-      moveUp(tc, x, y, ss);
+      moveUp(tc, x, y, strokeState);
       return null;
     case "paint-bucket":
       return null;
     case "line":
-      lineUp(tc, x, y, ss);
+      lineUp(tc, x, y, strokeState);
       return null;
     case "rectangle":
-      rectangleUp(tc, x, y, ss);
+      rectangleUp(tc, x, y, strokeState);
       return null;
     case "contour":
-      contourUp(tc, x, y, ss);
+      contourUp(tc, x, y, strokeState);
       return null;
     case "blur":
-      blurUp(tc, x, y, ss);
+      blurUp(tc, x, y, strokeState);
       return null;
     default:
       return null;
diff --git a/src/lib/project-import.ts b/src/lib/project-import.ts
new file mode 100644
index 0000000..ba7e2a5
--- /dev/null
+++ b/src/lib/project-import.ts
@@ -0,0 +1,55 @@
+import type {
+  LayerGroupId,
+  LayerId,
+  PropertyValue,
+  TileLayer,
+  TileRef,
+  Tileset,
+  TilesetGroupId,
+  TilesetId,
+} from "@/types";
+
+export function clonePropertyValues(
+  values: Record<string, PropertyValue> = {},
+): Record<string, PropertyValue> {
+  return Object.fromEntries(
+    Object.entries(values).map(([key, value]) => [key, { ...value }]),
+  );
+}
+
+export function remapLayerTreeId(
+  id: LayerId | LayerGroupId,
+  layerIdMap: ReadonlyMap<string, LayerId>,
+  groupIdMap: ReadonlyMap<string, LayerGroupId>,
+): LayerId | LayerGroupId {
+  return (layerIdMap.get(id as string) ??
+    groupIdMap.get(id as string) ??
+    id) as LayerId | LayerGroupId;
+}
+
+export function remapTileEntries(
+  tiles: TileLayer["tiles"],
+  tilesetIdMap: ReadonlyMap<string, TilesetId>,
+): TileLayer["tiles"] {
+  return Object.fromEntries(
+    Object.entries(tiles).map(([coordinate, ref]) => [
+      coordinate,
+      {
+        ...ref,
+        tilesetId: tilesetIdMap.get(ref.tilesetId as string) ?? ref.tilesetId,
+      } satisfies TileRef,
+    ]),
+  );
+}
+
+export function cloneImportedTileset(
+  tileset: Tileset,
+  tilesetIdMap: ReadonlyMap<string, TilesetId>,
+  groupId: TilesetGroupId,
+): Tileset {
+  return {
+    ...tileset,
+    id: tilesetIdMap.get(tileset.id as string) ?? tileset.id,
+    groupId,
+  };
+}
\ No newline at end of file
diff --git a/src/types/app.ts b/src/types/app.ts
new file mode 100644
index 0000000..af3f847
--- /dev/null
+++ b/src/types/app.ts
@@ -0,0 +1,18 @@
+import type { ToolName } from "@/types";
+
+export interface AppShellProps {
+  settingsOpen: boolean;
+  setSettingsOpen: (value: boolean) => void;
+  projectDialogOpen: boolean;
+  setProjectDialogOpen: (value: boolean) => void;
+  aboutOpen: boolean;
+  setAboutOpen: (value: boolean) => void;
+  shortcutsOpen: boolean;
+  setShortcutsOpen: (value: boolean) => void;
+  findReplaceOpen: boolean;
+  setFindReplaceOpen: (value: boolean) => void;
+  bugReportOpen: boolean;
+  setBugReportOpen: (value: boolean) => void;
+  activeTool: ToolName | null;
+  setActiveTool: (value: ToolName | null) => void;
+}
\ No newline at end of file
diff --git a/src/types/image-editor-hook-internals.ts b/src/types/image-editor-hook-internals.ts
new file mode 100644
index 0000000..17ef0db
--- /dev/null
+++ b/src/types/image-editor-hook-internals.ts
@@ -0,0 +1,28 @@
+import type { ImageEditorState } from "./image-editor";
+
+export type ImageEditorStateUpdater = (draft: ImageEditorState) => void;
+
+export type ImageEditorSetState = (
+  updater: ImageEditorStateUpdater,
+) => void;
+
+export type FrameMoveDirection = "left" | "right";
+
+export type LayerMoveDirection = "up" | "down";
+
+export type LayerDropPosition = "above" | "below" | "inside";
+
+export interface ImageEditorFrameActionsParams {
+  state: ImageEditorState | null;
+  setState: ImageEditorSetState;
+}
+
+export interface ImageEditorPaletteActionsParams {
+  state: ImageEditorState | null;
+  setState: ImageEditorSetState;
+}
+
+export interface ImageEditorLayerActionsParams {
+  state: ImageEditorState | null;
+  setState: ImageEditorSetState;
+}
\ No newline at end of file
diff --git a/src/types/image-editor-tools.ts b/src/types/image-editor-tools.ts
new file mode 100644
index 0000000..41dd72f
--- /dev/null
+++ b/src/types/image-editor-tools.ts
@@ -0,0 +1,19 @@
+import type { ImageEditorResizeHandle } from "./image-editor-internals";
+
+export interface CropRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface CropState {
+  rect: CropRect | null;
+  dragging: boolean;
+  resizingHandle: ImageEditorResizeHandle;
+  dragOffsetX: number;
+  dragOffsetY: number;
+  resizeStartX: number;
+  resizeStartY: number;
+  resizeStartRect: CropRect | null;
+}
\ No newline at end of file
diff --git a/src/types/image-editor-ui.ts b/src/types/image-editor-ui.ts
index c38d5d3..761e769 100644
--- a/src/types/image-editor-ui.ts
+++ b/src/types/image-editor-ui.ts
@@ -7,6 +7,7 @@ import type {
   PaletteId,
   PixelSelection,
 } from "./image-editor";
+import type { PointerEvent as ReactPointerEvent } from "react";
 import type { PaletteExportFormat, PngSwatchSize } from "./image-editor-hook";
 
 export interface ToolSidebarProps {
@@ -97,6 +98,21 @@ export interface ImageCanvasResizePreview {
   height: number;
 }
 
+export interface ImageCanvasResizeControlsProps {
+  previewPixelW: number;
+  previewPixelH: number;
+  activeResizeHandle: ImageCanvasResizeHandle;
+  hoveredResizeHandle: ImageCanvasResizeHandle;
+  resizePreview: ImageCanvasResizePreview | null;
+  hasActiveResizeAction: boolean;
+  onPointerEnterHandle: (handle: Exclude<ImageCanvasResizeHandle, null>) => void;
+  onPointerLeaveHandle: () => void;
+  onBeginResize: (
+    handle: Exclude<ImageCanvasResizeHandle, null>,
+    event: ReactPointerEvent<HTMLDivElement>,
+  ) => void;
+}
+
 export interface ImageCanvasProps {
   width: number;
   height: number;
diff --git a/src/types/index.ts b/src/types/index.ts
index f63e33a..49e3e94 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -14,3 +14,4 @@ export * from "./image-editor-internals";
 export * from "./api-keys";
 export * from "./ai-assets";
 export * from "./text-object";
+export * from "./map-panel";
diff --git a/src/types/layers-panel.ts b/src/types/layers-panel.ts
new file mode 100644
index 0000000..b88407e
--- /dev/null
+++ b/src/types/layers-panel.ts
@@ -0,0 +1,54 @@
+import type { DragEvent } from "react";
+import type { LayerTreeNode } from "@/types/editor-helpers";
+
+export type LayerDropPosition = "above" | "below" | "inside";
+
+export interface LayerDropIndicator {
+  targetId: string;
+  position: LayerDropPosition;
+}
+
+export interface LayersPanelDeleteTarget {
+  id: string;
+  name: string;
+  isGroup: boolean;
+}
+
+export interface LayersTreeProps {
+  treeNodes: LayerTreeNode[];
+  activeLayerId: string | null;
+  renamingId: string | null;
+  renameValue: string;
+  dragId: string | null;
+  dropIndicator: LayerDropIndicator | null;
+  onRenameValueChange: (value: string) => void;
+  onDoubleClick: (id: string, name: string) => void;
+  onCommitRename: () => void;
+  onCancelRename: () => void;
+  onSelectLayer: (layerId: string) => void;
+  onToggleExpand: (groupId: string) => void;
+  onToggleVisibility: (id: string, isGroup: boolean) => void;
+  onToggleLock: (id: string, isGroup: boolean) => void;
+  onMoveItem: (
+    id: string,
+    direction: "up" | "down",
+    parentGroupId: string | null,
+  ) => void;
+  onDeleteTarget: (target: LayersPanelDeleteTarget) => void;
+  onDuplicateLayer: (layerId: string) => void;
+  onDuplicateGroup: (groupId: string) => void;
+  onDragStart: (id: string, isGroup: boolean) => void;
+  onDragEnd: () => void;
+  onDragOverRow: (
+    event: DragEvent,
+    targetId: string,
+    targetIsGroup: boolean,
+  ) => void;
+  onDrop: (event: DragEvent) => void;
+}
+
+export interface DeleteLayerDialogProps {
+  deleteTarget: LayersPanelDeleteTarget | null;
+  onOpenChange: (open: boolean) => void;
+  onDelete: () => void;
+}
\ No newline at end of file
diff --git a/src/types/map-canvas.ts b/src/types/map-canvas.ts
index 4cdd74e..abde45e 100644
--- a/src/types/map-canvas.ts
+++ b/src/types/map-canvas.ts
@@ -219,6 +219,135 @@ export interface PolyVertexDragAction {
   origPoint: { x: number; y: number };
 }
 
+export interface FillPreviewCacheState {
+  tileKey: string | null;
+  layer: TileLayer | null;
+  fillMode: EditorState["fillMode"];
+  selectedTile: TileRef | null;
+  activeFillTerrain: EditorState["activeFillTerrain"];
+  region: [number, number][];
+}
+
+export interface ScenePointerPosition {
+  x: number;
+  y: number;
+}
+
+export interface ScenePointerDownEvent extends ScenePointerPosition {
+  button?: number;
+}
+
+export interface ScenePointerUpEvent {
+  button?: number;
+}
+
+export interface ObjectInteractionOverride {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+}
+
+export interface SceneInteractionHandlerContext {
+  activeLayerId: UseSceneInteractionParams["activeLayerId"];
+  activeObjectId: UseSceneInteractionParams["activeObjectId"];
+  clearOverlay: () => void;
+  currentTool: UseSceneInteractionParams["currentTool"];
+  drawOverlayPreview: (
+    pointer: ScenePointerPosition | null,
+    pointerGridPos?: ScenePointerPosition | null,
+  ) => void;
+  fillPreviewCacheRef: MutableRefObject<FillPreviewCacheState>;
+  getClampedGridPos: (
+    globalX: number,
+    globalY: number,
+  ) => ScenePointerPosition | null;
+  getGridPos: (
+    globalX: number,
+    globalY: number,
+  ) => ScenePointerPosition | null;
+  getInteractiveImageLayer: (imgLayer: ImageLayer) => ImageLayer;
+  getObjectInteractionOverrides: (
+    object: MapObject,
+  ) => ObjectInteractionOverride;
+  hitTestResizeHandle: (
+    globalX: number,
+    globalY: number,
+  ) => ResizeHandle | null;
+  imageDragRef: MutableRefObject<ImageDragAction | null>;
+  imageLayers: UseSceneInteractionParams["imageLayers"];
+  imageResizeRef: MutableRefObject<ImageResizeAction | null>;
+  isDrawingPolygon: UseSceneInteractionReturn["isDrawingPolygon"];
+  isInsideSelection: (
+    globalX: number,
+    globalY: number,
+    selection: MapSelection,
+  ) => boolean;
+  isPaintingRef: MutableRefObject<boolean>;
+  lastClickRef: MutableRefObject<{
+    time: number;
+    x: number;
+    y: number;
+  } | null>;
+  lastObjectClickRef: MutableRefObject<{
+    time: number;
+    x: number;
+    y: number;
+    objectId: string;
+  } | null>;
+  lastPointerPosRef: MutableRefObject<ScenePointerPosition | null>;
+  layers: UseSceneInteractionParams["layers"];
+  liveImagePos: UseSceneInteractionReturn["liveImagePos"];
+  liveImageResize: UseSceneInteractionReturn["liveImageResize"];
+  liveObjectPlace: UseSceneInteractionReturn["liveObjectPlace"];
+  liveObjectPos: UseSceneInteractionReturn["liveObjectPos"];
+  liveObjectResize: UseSceneInteractionReturn["liveObjectResize"];
+  livePolyVertex: UseSceneInteractionReturn["livePolyVertex"];
+  liveSelection: UseSceneInteractionReturn["liveSelection"];
+  mapH: number;
+  mapW: number;
+  objectDragRef: MutableRefObject<ObjectDragAction | null>;
+  objectLayers: UseSceneInteractionParams["objectLayers"];
+  objectPlaceRef: MutableRefObject<ObjectPlaceAction | null>;
+  objects: UseSceneInteractionParams["objects"];
+  objectResizeRef: MutableRefObject<ObjectResizeAction | null>;
+  onCreateObject: UseSceneInteractionParams["onCreateObject"];
+  onDoubleClickObject?: UseSceneInteractionParams["onDoubleClickObject"];
+  onMoveImageLayer: UseSceneInteractionParams["onMoveImageLayer"];
+  onMoveObject: UseSceneInteractionParams["onMoveObject"];
+  onMoveTiles: UseSceneInteractionParams["onMoveTiles"];
+  onPaintEnd: UseSceneInteractionParams["onPaintEnd"];
+  onPaintTile: UseSceneInteractionParams["onPaintTile"];
+  onResizeImageLayer: UseSceneInteractionParams["onResizeImageLayer"];
+  onResizeObject: UseSceneInteractionParams["onResizeObject"];
+  onSelectionChange: UseSceneInteractionParams["onSelectionChange"];
+  onSelectObject: UseSceneInteractionParams["onSelectObject"];
+  onUpdatePolygonPoints: UseSceneInteractionParams["onUpdatePolygonPoints"];
+  pendingObjectType: UseSceneInteractionParams["pendingObjectType"];
+  polygonPoints: UseSceneInteractionReturn["polygonPoints"];
+  polygonCursorPos: UseSceneInteractionReturn["polygonCursorPos"];
+  polyVertexDragRef: MutableRefObject<PolyVertexDragAction | null>;
+  renderedSelection: MapSelection | null;
+  selActionRef: MutableRefObject<SelectionAction | null>;
+  setHoveredHandle: Dispatch<SetStateAction<ResizeHandle | null>>;
+  setHoveredObjectCursor: Dispatch<SetStateAction<string | null>>;
+  setIsDrawingPolygon: Dispatch<SetStateAction<boolean>>;
+  setIsMoving: Dispatch<SetStateAction<boolean>>;
+  setLiveImagePos: Dispatch<SetStateAction<UseSceneInteractionReturn["liveImagePos"]>>;
+  setLiveImageResize: Dispatch<SetStateAction<UseSceneInteractionReturn["liveImageResize"]>>;
+  setLiveObjectPlace: Dispatch<SetStateAction<UseSceneInteractionReturn["liveObjectPlace"]>>;
+  setLiveObjectPos: Dispatch<SetStateAction<UseSceneInteractionReturn["liveObjectPos"]>>;
+  setLiveObjectResize: Dispatch<SetStateAction<UseSceneInteractionReturn["liveObjectResize"]>>;
+  setLivePolyVertex: Dispatch<SetStateAction<UseSceneInteractionReturn["livePolyVertex"]>>;
+  setLiveSelection: Dispatch<SetStateAction<MapSelection | null>>;
+  setMoveTilesSnapshot: Dispatch<SetStateAction<UseSceneInteractionReturn["moveTilesSnapshot"]>>;
+  setPolygonCursorPos: Dispatch<SetStateAction<UseSceneInteractionReturn["polygonCursorPos"]>>;
+  setPolygonPoints: Dispatch<SetStateAction<UseSceneInteractionReturn["polygonPoints"]>>;
+  setResizingHandle: Dispatch<SetStateAction<ResizeHandle | null>>;
+  shiftKeyRef: MutableRefObject<boolean>;
+  zoom: UseSceneInteractionParams["zoom"];
+}
+
 export interface UseSceneInteractionParams {
   map: TileMapData;
   layers: TileLayer[];
@@ -297,8 +426,8 @@ export interface UseSceneInteractionReturn {
   resizingHandle: ResizeHandle | null;
   hoveredHandle: ResizeHandle | null;
   hoveredObjectCursor: string | null;
-  handlePointerDown: (e: { x: number; y: number; button?: number }) => void;
-  handlePointerMove: (e: { x: number; y: number }) => void;
-  handlePointerUp: (e?: { button?: number }) => void;
+  handlePointerDown: (e: ScenePointerDownEvent) => void;
+  handlePointerMove: (e: ScenePointerPosition) => void;
+  handlePointerUp: (e?: ScenePointerUpEvent) => void;
   handlePointerLeave: () => void;
 }
diff --git a/src/types/map-panel.ts b/src/types/map-panel.ts
new file mode 100644
index 0000000..cde8e72
--- /dev/null
+++ b/src/types/map-panel.ts
@@ -0,0 +1,238 @@
+import type {
+  Dispatch,
+  RefObject,
+  SetStateAction,
+} from "react";
+import type {
+  EditorState,
+  EditorTool,
+  FillMode,
+  ImageLayer,
+  MapGroup,
+  MapId,
+  MapObject,
+  ObjectId,
+  ObjectLayer,
+  PropertyValue,
+  TerrainTile,
+  TileLayer,
+  TileMapData,
+} from "./schema";
+import type { NewMapType } from "./map-geometry";
+import type {
+  MapCanvasImperativeHandle,
+  MapCanvasProps,
+} from "./map-canvas";
+import type {
+  MapCanvasContextMenuTile,
+  OrientAction,
+} from "./map-panel-context-menu";
+import type { TextObjectEditingState } from "./text-object";
+
+export interface MapPanelDeleteTarget {
+  type: "map" | "group";
+  id: string;
+  name: string;
+}
+
+export interface MapPanelHistoryControls {
+  canBack: () => boolean;
+  canForward: () => boolean;
+  back: () => void;
+  forward: () => void;
+}
+
+export interface MapPanelTextObjectEditingController {
+  editing: TextObjectEditingState | null;
+  startEditing: (objectId: ObjectId | string, text?: string) => void;
+  updateText: (text: string) => void;
+  commitEditing: () => void;
+  cancelEditing: () => void;
+}
+
+export interface MapPanelToolbarProps {
+  activeMap: TileMapData | undefined;
+  canCutToolbar: boolean;
+  canOrientToolbar: boolean;
+  controls: MapPanelHistoryControls;
+  mapZoom: number;
+  onCut: () => Promise<void> | void;
+  onOpenMapOptions: () => void;
+  onOrientSelection: (action: OrientAction) => void;
+  onSelectBrushTool: (
+    tool: Extract<EditorTool, "paint" | "erase">,
+    size: EditorState["brushSize"],
+  ) => void;
+  onSelectFillMode: (mode: FillMode) => void;
+  onSelectTool: (tool: EditorTool) => void;
+  onZoom: (direction: 1 | -1) => void;
+  state: EditorState;
+}
+
+export interface MapPanelTabsProps {
+  activeGroup: MapGroup | undefined;
+  groupMaps: TileMapData[];
+  onAddMap: () => void;
+  onCancelRename: () => void;
+  onCommitRename: () => void;
+  onDuplicateMap: (map: TileMapData) => void;
+  onGroupChange: (value: string) => void;
+  onRequestDeleteTarget: (target: MapPanelDeleteTarget) => void;
+  onSelectMap: (mapId: MapId) => void;
+  onStartRenamingTab: (map: TileMapData) => void;
+  project: NonNullable<EditorState["project"]>;
+  renameInputRef: RefObject<HTMLInputElement | null>;
+  renameValue: string;
+  renamingTabId: MapId | null;
+  setRenameValue: Dispatch<SetStateAction<string>>;
+  state: EditorState;
+}
+
+export interface MapPanelWorkspaceProps {
+  activeLayerEffectivelyLocked: boolean;
+  activeMap: TileMapData | undefined;
+  canCopy: boolean;
+  canCut: boolean;
+  canDeleteSelection: boolean;
+  canEditInImageEditor: boolean;
+  canOrientContextMenu: boolean;
+  canPaste: boolean;
+  clearHoverTile: () => void;
+  containerRef: RefObject<HTMLDivElement | null>;
+  contextMenuObjectId: ObjectId | null;
+  flatImageLayers: ImageLayer[];
+  flatLayers: TileLayer[];
+  flatMap: TileMapData | null;
+  flatObjectLayers: ObjectLayer[];
+  flatObjects: MapObject[];
+  groupMaps: TileMapData[];
+  handleMapContextMenu: (event: React.MouseEvent<HTMLDivElement>) => void;
+  handleMapMouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
+  hasContextMenuObject: boolean;
+  mapCanvasRef: RefObject<MapCanvasImperativeHandle | null>;
+  mapZoom: number;
+  onCancelPendingObject: NonNullable<MapCanvasProps["onCancelPendingObject"]>;
+  onCopySelection: (fromContextMenu?: boolean) => Promise<void>;
+  onCreateObject: MapCanvasProps["onCreateObject"];
+  onCutSelection: (fromContextMenu?: boolean) => Promise<void>;
+  onDeleteSelection: (fromContextMenu?: boolean) => void;
+  onEditInImageEditor: () => void;
+  onOpenObjectProperties: (objectId: ObjectId) => void;
+  onMoveImageLayer: MapCanvasProps["onMoveImageLayer"];
+  onMoveObject: MapCanvasProps["onMoveObject"];
+  onMoveTiles: MapCanvasProps["onMoveTiles"];
+  onOrientSelection: (action: OrientAction, fromContextMenu?: boolean) => void;
+  onPaintEnd: MapCanvasProps["onPaintEnd"];
+  onPaintTile: MapCanvasProps["onPaintTile"];
+  onPasteSelection: (fromContextMenu?: boolean) => Promise<void>;
+  onResizeImageLayer: MapCanvasProps["onResizeImageLayer"];
+  onResizeMap: MapCanvasProps["onResizeMap"];
+  onResizeObject: MapCanvasProps["onResizeObject"];
+  onSelectObject: (objectId: ObjectId | null) => void;
+  onSelectionChange: MapCanvasProps["onSelectionChange"];
+  onUpdatePolygonPoints: MapCanvasProps["onUpdatePolygonPoints"];
+  paintBuffer: MapCanvasProps["paintBuffer"];
+  paintBufferVersion: number;
+  project: NonNullable<EditorState["project"]>;
+  state: EditorState;
+  textObjectEditing: MapPanelTextObjectEditingController;
+}
+
+export interface MapPanelDialogsProps {
+  activeMap: TileMapData | undefined;
+  addGroupOpen: boolean;
+  addMapOpen: boolean;
+  deleteTarget: MapPanelDeleteTarget | null;
+  fillTerrainDialogOpen: boolean;
+  mapOptionsOpen: boolean;
+  newGroupName: string;
+  newMapHeight: number;
+  newMapName: string;
+  newMapType: NewMapType;
+  newMapWidth: number;
+  onApplyTerrainFill: (tiles: TerrainTile[]) => void;
+  onCreateGroup: () => void;
+  onCreateMap: () => void;
+  onDeleteConfirm: () => void;
+  onUpdateMapOptions: (
+    width: number,
+    height: number,
+    properties: Record<string, PropertyValue>,
+  ) => void;
+  propsObjectId: ObjectId | null;
+  setAddGroupOpen: Dispatch<SetStateAction<boolean>>;
+  setAddMapOpen: Dispatch<SetStateAction<boolean>>;
+  setDeleteTarget: Dispatch<SetStateAction<MapPanelDeleteTarget | null>>;
+  setFillTerrainDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setMapOptionsOpen: Dispatch<SetStateAction<boolean>>;
+  setNewGroupName: Dispatch<SetStateAction<string>>;
+  setNewMapHeight: Dispatch<SetStateAction<number>>;
+  setNewMapName: Dispatch<SetStateAction<string>>;
+  setNewMapType: Dispatch<SetStateAction<NewMapType>>;
+  setNewMapWidth: Dispatch<SetStateAction<number>>;
+  setPropsObjectId: Dispatch<SetStateAction<ObjectId | null>>;
+  state: EditorState;
+}
+
+export interface MapPanelCanvasActionParams {
+  activeImageLayer: ImageLayer | null;
+  activeLayer: TileLayer | undefined;
+  activeMap: TileMapData | undefined;
+  contextMenuTileRef: React.MutableRefObject<MapCanvasContextMenuTile | null>;
+  hasContextMenuImageLayer: boolean;
+  layerGroups: NonNullable<EditorState["project"]>["layerGroups"];
+  mapCanvasRef: RefObject<MapCanvasImperativeHandle | null>;
+  paintBuffer: Map<string, MapCanvasProps["paintBuffer"] extends Map<string, infer TValue> ? TValue : never>;
+  project: EditorState["project"];
+  setPaintBufferVersion: Dispatch<SetStateAction<number>>;
+  setState: ReturnType<typeof import("@/lib/store").getEditorStore>["setState"];
+  state: EditorState;
+  textObjectEditing: MapPanelTextObjectEditingController;
+}
+
+export interface MapPanelCanvasActionResult {
+  handleCancelPendingObject: NonNullable<MapCanvasProps["onCancelPendingObject"]>;
+  handleCreateObject: MapCanvasProps["onCreateObject"];
+  handleEditInImageEditor: () => void;
+  handleMoveImageLayer: MapCanvasProps["onMoveImageLayer"];
+  handleMoveObject: MapCanvasProps["onMoveObject"];
+  handleMoveTiles: MapCanvasProps["onMoveTiles"];
+  handlePaintEnd: MapCanvasProps["onPaintEnd"];
+  handlePaintTile: MapCanvasProps["onPaintTile"];
+  handleResizeImageLayer: MapCanvasProps["onResizeImageLayer"];
+  handleResizeObject: MapCanvasProps["onResizeObject"];
+  handleSelectionChange: MapCanvasProps["onSelectionChange"];
+  handleUpdatePolygonPoints: MapCanvasProps["onUpdatePolygonPoints"];
+}
+
+export interface MapPanelClipboardActionParams {
+  activeImageLayer: ImageLayer | null;
+  activeLayer: TileLayer | undefined;
+  activeLayerEffectivelyLocked: boolean;
+  activeMap: TileMapData | undefined;
+  activeObject: MapObject | null;
+  activeObjectLayer: ObjectLayer | null;
+  contextMenuTileRef: React.MutableRefObject<MapCanvasContextMenuTile | null>;
+  hasContextMenuImageLayer: boolean;
+  hasContextMenuTile: boolean;
+  hoverTileRef: React.MutableRefObject<MapCanvasContextMenuTile | null>;
+  project: EditorState["project"];
+  setState: ReturnType<typeof import("@/lib/store").getEditorStore>["setState"];
+  state: EditorState;
+}
+
+export interface MapPanelClipboardActionResult {
+  canCopy: boolean;
+  canCut: boolean;
+  canCutToolbar: boolean;
+  canDeleteSelection: boolean;
+  canEditInImageEditor: boolean;
+  canOrientContextMenu: boolean;
+  canOrientToolbar: boolean;
+  canPaste: boolean;
+  handleCopySelection: (fromContextMenu?: boolean) => Promise<void>;
+  handleCutSelection: (fromContextMenu?: boolean) => Promise<void>;
+  handleDeleteSelection: (fromContextMenu?: boolean) => void;
+  handleOrientSelection: (action: OrientAction, fromContextMenu?: boolean) => void;
+  handlePasteSelection: (fromContextMenu?: boolean) => Promise<void>;
+}
\ No newline at end of file

From c263cea2b182072240d6ebfedb48d44ebbf2c085 Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 13:03:32 +0200
Subject: [PATCH 04/12] Refactor code for improved readability and consistency

- Cleaned up import statements across multiple files for better organization.
- Reformatted state management and function calls to enhance clarity.
- Adjusted line breaks and indentation for improved code style.
- Ensured consistent use of arrow functions and callback structures.
- Removed unnecessary comments and streamlined code logic.
---
 src/App.tsx                                   |  9 +--
 src/components/app/AppShell.tsx               | 40 +++++++++---
 .../editor/LayersPanel/DeleteLayerDialog.tsx  |  7 +-
 .../editor/LayersPanel/LayersTree.tsx         |  6 +-
 src/components/editor/LayersPanel/index.tsx   |  5 +-
 .../MapCanvas/scene-interaction-handlers.ts   | 65 +++++++++++++++----
 .../editor/MapCanvas/use-scene-interaction.ts |  4 +-
 src/components/editor/MapPanel.tsx            | 20 ++++--
 .../editor/MapPanel/MapPanelDialogs.tsx       |  2 +-
 .../editor/MapPanel/MapPanelTabs.tsx          | 30 +++++++--
 .../editor/MapPanel/MapPanelToolbar.tsx       | 14 ++--
 .../editor/MapPanel/MapPanelWorkspace.tsx     | 11 ++--
 .../MapPanel/use-map-panel-canvas-actions.ts  | 17 ++---
 .../use-map-panel-clipboard-actions.ts        | 51 +++++++++------
 .../ImageEditor/ImageCanvasResizeControls.tsx |  2 +-
 src/hooks/use-image-editor-frame-actions.ts   |  6 +-
 src/hooks/use-image-editor-layer-actions.ts   | 64 ++++++++++++------
 src/hooks/use-image-editor-palette-actions.ts | 30 +++++----
 src/lib/image-editor-crop-tools.ts            |  2 +-
 src/lib/image-editor-document.ts              | 18 +++--
 src/lib/image-editor-selection-tools.ts       | 41 +++++++++---
 src/lib/image-editor-shape-tools.ts           | 44 +++++++++++--
 src/lib/image-editor-tools-shared.ts          |  2 +-
 src/lib/image-editor-tools.ts                 | 12 +---
 src/lib/project-import.ts                     |  2 +-
 src/types/app.ts                              |  2 +-
 src/types/image-editor-hook-internals.ts      |  6 +-
 src/types/image-editor-tools.ts               |  2 +-
 src/types/image-editor-ui.ts                  |  4 +-
 src/types/layers-panel.ts                     |  2 +-
 src/types/map-canvas.ts                       | 41 ++++++++----
 src/types/map-panel.ts                        | 29 +++++----
 32 files changed, 389 insertions(+), 201 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5c4eda7..d2021f0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,4 @@
-import {
-  useEffect,
-  useState,
-} from "react";
+import { useEffect, useState } from "react";
 import { TooltipProvider } from "@/components/ui/Tooltip";
 import {
   initEditorStore,
@@ -17,8 +14,7 @@ import {
   loadProjectPrefs,
   loadLastProjectId,
 } from "@/lib/db";
-import {
-} from "@/lib/db";
+import {} from "@/lib/db";
 import {
   hydrateZoomStoreForProject,
   saveCurrentProjectPrefs,
@@ -29,7 +25,6 @@ import type { ToolName } from "@/types";
 import { Toaster } from "@/components/ui/Sonner";
 import { AppShell } from "@/components/app/AppShell";
 
-
 // Hoisted static JSX: avoids re-creation on every render (rendering-hoist-jsx)
 const loadingScreen = (
   <div className="flex h-full items-center justify-center">
diff --git a/src/components/app/AppShell.tsx b/src/components/app/AppShell.tsx
index 5d253d9..a9445c8 100644
--- a/src/components/app/AppShell.tsx
+++ b/src/components/app/AppShell.tsx
@@ -1,4 +1,11 @@
-import { useCallback, useEffect, useRef, useState, lazy, Suspense } from "react";
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  lazy,
+  Suspense,
+} from "react";
 import { toast } from "sonner";
 import { Toolbar } from "@/components/layout/Toolbar";
 import { TilesetPanel } from "@/components/editor/TilesetPanel";
@@ -126,7 +133,9 @@ export function AppShell({
   const activeLayerKind =
     state.project !== null &&
     state.activeLayerId !== null &&
-    (state.project.objectLayers ?? []).some((layer) => layer.id === state.activeLayerId)
+    (state.project.objectLayers ?? []).some(
+      (layer) => layer.id === state.activeLayerId,
+    )
       ? "object"
       : state.project !== null &&
           state.activeLayerId !== null &&
@@ -136,7 +145,9 @@ export function AppShell({
         ? "image"
         : state.project !== null &&
             state.activeLayerId !== null &&
-            state.project.layers.some((layer) => layer.id === state.activeLayerId)
+            state.project.layers.some(
+              (layer) => layer.id === state.activeLayerId,
+            )
           ? "tile"
           : null;
   const showDetailsPanel =
@@ -195,7 +206,9 @@ export function AppShell({
 
   const handleExportMap = useCallback(async () => {
     if (!state.project || !state.activeMapId) return;
-    const map = state.project.maps.find((entry) => entry.id === state.activeMapId);
+    const map = state.project.maps.find(
+      (entry) => entry.id === state.activeMapId,
+    );
     if (!map) return;
     const projectLayerGroups = state.project.layerGroups ?? [];
     const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
@@ -457,7 +470,9 @@ export function AppShell({
           state.activeTilesetGroupId ?? project.tilesetGroups[0]?.id;
         if (!targetGroupId) return;
 
-        const exists = project.tilesets.some((entry) => entry.id === tileset.id);
+        const exists = project.tilesets.some(
+          (entry) => entry.id === tileset.id,
+        );
 
         setState((draft) => {
           if (!draft.project) return;
@@ -499,9 +514,11 @@ export function AppShell({
     ? (detailsTabLabel ?? "Details")
     : "Layers";
   const handleOpenTool = useCallback(
-    (tool: AppShellProps["activeTool"] extends infer ActiveTool
-      ? Exclude<ActiveTool, null>
-      : never) => {
+    (
+      tool: AppShellProps["activeTool"] extends infer ActiveTool
+        ? Exclude<ActiveTool, null>
+        : never,
+    ) => {
       if (tool === "image-editor") {
         clearTileEditorContext();
       }
@@ -644,8 +661,11 @@ export function AppShell({
         </Suspense>
       )}
       <Suspense>
-        <ToolDrawer activeTool={activeTool} onClose={() => setActiveTool(null)} />
+        <ToolDrawer
+          activeTool={activeTool}
+          onClose={() => setActiveTool(null)}
+        />
       </Suspense>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/LayersPanel/DeleteLayerDialog.tsx b/src/components/editor/LayersPanel/DeleteLayerDialog.tsx
index 9d61be7..45f3c92 100644
--- a/src/components/editor/LayersPanel/DeleteLayerDialog.tsx
+++ b/src/components/editor/LayersPanel/DeleteLayerDialog.tsx
@@ -16,10 +16,7 @@ export function DeleteLayerDialog({
   onDelete,
 }: DeleteLayerDialogProps) {
   return (
-    <AlertDialog
-      open={!!deleteTarget}
-      onOpenChange={onOpenChange}
-    >
+    <AlertDialog open={!!deleteTarget} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
@@ -38,4 +35,4 @@ export function DeleteLayerDialog({
       </AlertDialogContent>
     </AlertDialog>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/LayersPanel/LayersTree.tsx b/src/components/editor/LayersPanel/LayersTree.tsx
index 1d676a3..4a31dbb 100644
--- a/src/components/editor/LayersPanel/LayersTree.tsx
+++ b/src/components/editor/LayersPanel/LayersTree.tsx
@@ -81,7 +81,9 @@ export function LayersTree({
             onToggleVisibility={onToggleVisibility}
             onToggleLock={onToggleLock}
             onMove={onMoveItem}
-            onDelete={(id, name) => onDeleteTarget({ id, name, isGroup: false })}
+            onDelete={(id, name) =>
+              onDeleteTarget({ id, name, isGroup: false })
+            }
             onDuplicate={onDuplicateLayer}
             isDragging={dragId === node.layer.id}
             dropIndicator={
@@ -98,4 +100,4 @@ export function LayersTree({
       })}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/LayersPanel/index.tsx b/src/components/editor/LayersPanel/index.tsx
index f920291..87b6696 100644
--- a/src/components/editor/LayersPanel/index.tsx
+++ b/src/components/editor/LayersPanel/index.tsx
@@ -51,8 +51,9 @@ export function LayersPanel() {
   // ---- Drag & Drop state ----
   const [dragId, setDragId] = useState<string | null>(null);
   const [dragIsGroup, setDragIsGroup] = useState(false);
-  const [dropIndicator, setDropIndicator] =
-    useState<LayerDropIndicator | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<LayerDropIndicator | null>(
+    null,
+  );
 
   if (!project) return null;
 
diff --git a/src/components/editor/MapCanvas/scene-interaction-handlers.ts b/src/components/editor/MapCanvas/scene-interaction-handlers.ts
index d5748a1..e47f4b0 100644
--- a/src/components/editor/MapCanvas/scene-interaction-handlers.ts
+++ b/src/components/editor/MapCanvas/scene-interaction-handlers.ts
@@ -69,7 +69,9 @@ function commitPolygonVertexUpdate(
   context.setLivePolyVertex(null);
 }
 
-function finishObjectPlacement(context: SceneInteractionHandlerContext): boolean {
+function finishObjectPlacement(
+  context: SceneInteractionHandlerContext,
+): boolean {
   if (context.currentTool !== "select" || !context.objectPlaceRef.current) {
     return false;
   }
@@ -111,7 +113,9 @@ function finishObjectResize(context: SceneInteractionHandlerContext): boolean {
   return true;
 }
 
-function finishPolyVertexDrag(context: SceneInteractionHandlerContext): boolean {
+function finishPolyVertexDrag(
+  context: SceneInteractionHandlerContext,
+): boolean {
   if (context.currentTool !== "select" || !context.polyVertexDragRef.current) {
     return false;
   }
@@ -349,7 +353,8 @@ export function handleScenePointerDown(
     if (isObjectLayer) {
       const layerObjects = context.objects
         .filter(
-          (object) => object.layerId === context.activeLayerId && object.visible,
+          (object) =>
+            object.layerId === context.activeLayerId && object.visible,
         )
         .reverse();
       for (const object of layerObjects) {
@@ -360,7 +365,10 @@ export function handleScenePointerDown(
             lastObjectClick !== null &&
             lastObjectClick.objectId === object.id &&
             now - lastObjectClick.time < 400 &&
-            Math.hypot(event.x - lastObjectClick.x, event.y - lastObjectClick.y) < 12;
+            Math.hypot(
+              event.x - lastObjectClick.x,
+              event.y - lastObjectClick.y,
+            ) < 12;
           context.lastObjectClickRef.current = {
             time: now,
             x: event.x,
@@ -420,7 +428,8 @@ export function handleScenePointerDown(
       (layer) => layer.id === context.activeLayerId,
     );
     if (activeImageLayer) {
-      const interactiveLayer = context.getInteractiveImageLayer(activeImageLayer);
+      const interactiveLayer =
+        context.getInteractiveImageLayer(activeImageLayer);
       if (
         pointInImageLayer(interactiveLayer, {
           x: event.x / context.zoom,
@@ -540,7 +549,10 @@ export function handleScenePointerMove(
         rdy,
         context.shiftKeyRef.current,
       );
-      context.setLiveObjectResize({ objectId: objectResize.objectId, ...result });
+      context.setLiveObjectResize({
+        objectId: objectResize.objectId,
+        ...result,
+      });
       return;
     }
 
@@ -648,7 +660,8 @@ export function handleScenePointerMove(
         if (!objectCursor) {
           const layerObjects = context.objects
             .filter(
-              (object) => object.layerId === context.activeLayerId && object.visible,
+              (object) =>
+                object.layerId === context.activeLayerId && object.visible,
             )
             .reverse();
           for (const object of layerObjects) {
@@ -670,10 +683,22 @@ export function handleScenePointerMove(
     if (!selectionPos) return;
 
     if (action.type === "draw") {
-      const x1 = Math.min(action.startX, Math.max(0, Math.min(selectionPos.x, context.mapW - 1)));
-      const y1 = Math.min(action.startY, Math.max(0, Math.min(selectionPos.y, context.mapH - 1)));
-      const x2 = Math.max(action.startX, Math.max(0, Math.min(selectionPos.x, context.mapW - 1)));
-      const y2 = Math.max(action.startY, Math.max(0, Math.min(selectionPos.y, context.mapH - 1)));
+      const x1 = Math.min(
+        action.startX,
+        Math.max(0, Math.min(selectionPos.x, context.mapW - 1)),
+      );
+      const y1 = Math.min(
+        action.startY,
+        Math.max(0, Math.min(selectionPos.y, context.mapH - 1)),
+      );
+      const x2 = Math.max(
+        action.startX,
+        Math.max(0, Math.min(selectionPos.x, context.mapW - 1)),
+      );
+      const y2 = Math.max(
+        action.startY,
+        Math.max(0, Math.min(selectionPos.y, context.mapH - 1)),
+      );
       context.setLiveSelection({
         x: x1,
         y: y1,
@@ -681,8 +706,20 @@ export function handleScenePointerMove(
         height: y2 - y1 + 1,
       });
     } else {
-      const newX = Math.max(0, Math.min(selectionPos.x - action.offsetX, context.mapW - action.orig.width));
-      const newY = Math.max(0, Math.min(selectionPos.y - action.offsetY, context.mapH - action.orig.height));
+      const newX = Math.max(
+        0,
+        Math.min(
+          selectionPos.x - action.offsetX,
+          context.mapW - action.orig.width,
+        ),
+      );
+      const newY = Math.max(
+        0,
+        Math.min(
+          selectionPos.y - action.offsetY,
+          context.mapH - action.orig.height,
+        ),
+      );
       context.setLiveSelection({ ...action.orig, x: newX, y: newY });
     }
     return;
@@ -728,4 +765,4 @@ export function handleScenePointerLeave(
   if (finishSelectionInteraction(context)) return;
 
   finishPainting(context);
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapCanvas/use-scene-interaction.ts b/src/components/editor/MapCanvas/use-scene-interaction.ts
index 0c88246..9d5ae5c 100644
--- a/src/components/editor/MapCanvas/use-scene-interaction.ts
+++ b/src/components/editor/MapCanvas/use-scene-interaction.ts
@@ -36,9 +36,7 @@ import {
   getMapCellPolygon,
   getMapPixelSize,
 } from "@/lib/map-geometry";
-import {
-  getImageLayerHandlePositions,
-} from "./image-layer-transform";
+import { getImageLayerHandlePositions } from "./image-layer-transform";
 import { getTileImage } from "./texture-cache";
 import { getFillRegion } from "@/lib/terrain";
 import { createTileStamp, isMultiTileStamp } from "@/lib/tile-stamp";
diff --git a/src/components/editor/MapPanel.tsx b/src/components/editor/MapPanel.tsx
index 5d01fb2..7cc6ef8 100644
--- a/src/components/editor/MapPanel.tsx
+++ b/src/components/editor/MapPanel.tsx
@@ -94,9 +94,8 @@ export function MapPanel() {
   const [newMapName, setNewMapName] = useState("Untitled Map");
   const [newMapWidth, setNewMapWidth] = useState(20);
   const [newMapHeight, setNewMapHeight] = useState(15);
-  const [newMapType, setNewMapType] = useState<NewMapType>(
-    DEFAULT_NEW_MAP_TYPE,
-  );
+  const [newMapType, setNewMapType] =
+    useState<NewMapType>(DEFAULT_NEW_MAP_TYPE);
   const [mapOptionsOpen, setMapOptionsOpen] = useState(false);
   const [fillTerrainDialogOpen, setFillTerrainDialogOpen] = useState(false);
   const [renamingTabId, setRenamingTabId] = useState<MapId | null>(null);
@@ -158,7 +157,8 @@ export function MapPanel() {
         object.layerId === state.activeLayerId,
     ) ?? null;
   const activeObjectLayer = activeObject
-    ? flatObjectLayers.find((layer) => layer.id === activeObject.layerId) ?? null
+    ? (flatObjectLayers.find((layer) => layer.id === activeObject.layerId) ??
+      null)
     : null;
   const textObjectEditing = useTextObjectEditing(projectObjects, setState);
 
@@ -365,7 +365,9 @@ export function MapPanel() {
       setState((draft) => {
         if (!draft.project) return;
 
-        const map = draft.project.maps.find((entry) => entry.id === deleteTarget.id);
+        const map = draft.project.maps.find(
+          (entry) => entry.id === deleteTarget.id,
+        );
         const mapsInGroup = map
           ? draft.project.maps.filter((entry) => entry.groupId === map.groupId)
           : [];
@@ -443,7 +445,9 @@ export function MapPanel() {
     if (name) {
       setState((draft) => {
         if (!draft.project) return;
-        const map = draft.project.maps.find((entry) => entry.id === renamingTabId);
+        const map = draft.project.maps.find(
+          (entry) => entry.id === renamingTabId,
+        );
         if (map) {
           map.name = name;
         }
@@ -586,7 +590,9 @@ export function MapPanel() {
 
     setState((draft) => {
       if (!draft.project) return;
-      const map = draft.project.maps.find((entry) => entry.id === state.activeMapId);
+      const map = draft.project.maps.find(
+        (entry) => entry.id === state.activeMapId,
+      );
       if (!map) return;
 
       map.widthInTiles = nextWidth;
diff --git a/src/components/editor/MapPanel/MapPanelDialogs.tsx b/src/components/editor/MapPanel/MapPanelDialogs.tsx
index ff4a90f..d3accf2 100644
--- a/src/components/editor/MapPanel/MapPanelDialogs.tsx
+++ b/src/components/editor/MapPanel/MapPanelDialogs.tsx
@@ -116,4 +116,4 @@ export function MapPanelDialogs({
       />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapPanel/MapPanelTabs.tsx b/src/components/editor/MapPanel/MapPanelTabs.tsx
index 6616992..1b96e19 100644
--- a/src/components/editor/MapPanel/MapPanelTabs.tsx
+++ b/src/components/editor/MapPanel/MapPanelTabs.tsx
@@ -6,7 +6,13 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/ContextMenu";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/Tabs";
 import {
   Tooltip,
@@ -88,7 +94,9 @@ export function MapPanelTabs({
               {groupMaps.map((map) => (
                 <div
                   key={map.id}
-                  data-state={state.activeMapId === map.id ? "active" : "inactive"}
+                  data-state={
+                    state.activeMapId === map.id ? "active" : "inactive"
+                  }
                   className="group/tab -mb-px flex h-7 min-w-0 items-center rounded-t-sm border border-transparent border-b-border/70 bg-muted/20 text-muted-foreground transition-colors hover:bg-background/70 hover:text-foreground data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground"
                 >
                   {renamingTabId === map.id ? (
@@ -118,19 +126,27 @@ export function MapPanelTabs({
                                   className="h-7 min-w-0 rounded-none px-2 text-[11px]"
                                   onDoubleClick={() => onStartRenamingTab(map)}
                                 >
-                                  <span className="max-w-40 truncate">{map.name}</span>
+                                  <span className="max-w-40 truncate">
+                                    {map.name}
+                                  </span>
                                 </TabsTrigger>
                               </div>
                             </TooltipTrigger>
-                            <TooltipContent>Double Click to Rename</TooltipContent>
+                            <TooltipContent>
+                              Double Click to Rename
+                            </TooltipContent>
                           </Tooltip>
                         </div>
                       </ContextMenuTrigger>
                       <ContextMenuContent>
-                        <ContextMenuItem onMouseDown={() => onStartRenamingTab(map)}>
+                        <ContextMenuItem
+                          onMouseDown={() => onStartRenamingTab(map)}
+                        >
                           Rename
                         </ContextMenuItem>
-                        <ContextMenuItem onMouseDown={() => onDuplicateMap(map)}>
+                        <ContextMenuItem
+                          onMouseDown={() => onDuplicateMap(map)}
+                        >
                           Duplicate
                         </ContextMenuItem>
                       </ContextMenuContent>
@@ -177,4 +193,4 @@ export function MapPanelTabs({
       </Button>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapPanel/MapPanelToolbar.tsx b/src/components/editor/MapPanel/MapPanelToolbar.tsx
index 26201c1..447169f 100644
--- a/src/components/editor/MapPanel/MapPanelToolbar.tsx
+++ b/src/components/editor/MapPanel/MapPanelToolbar.tsx
@@ -100,7 +100,9 @@ export function MapPanelToolbar({
                   onMouseDown={() => onSelectBrushTool(tool, size)}
                 >
                   {size}
-                  {state.currentTool === tool && state.brushSize === size && " ✓"}
+                  {state.currentTool === tool &&
+                    state.brushSize === size &&
+                    " ✓"}
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>
@@ -128,9 +130,7 @@ export function MapPanelToolbar({
             Fill
             {state.currentTool === "fill" && state.fillMode === "fill" && " ✓"}
           </DropdownMenuItem>
-          <DropdownMenuItem
-            onMouseDown={() => onSelectFillMode("fillTerrain")}
-          >
+          <DropdownMenuItem onMouseDown={() => onSelectFillMode("fillTerrain")}>
             Fill Terrain
             {state.currentTool === "fill" &&
               state.fillMode === "fillTerrain" &&
@@ -168,7 +168,9 @@ export function MapPanelToolbar({
                   onMouseDown={() => onSelectBrushTool(tool, size)}
                 >
                   {size}
-                  {state.currentTool === tool && state.brushSize === size && " ✓"}
+                  {state.currentTool === tool &&
+                    state.brushSize === size &&
+                    " ✓"}
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>
@@ -339,4 +341,4 @@ export function MapPanelToolbar({
       </span>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapPanel/MapPanelWorkspace.tsx b/src/components/editor/MapPanel/MapPanelWorkspace.tsx
index e2663d1..249cf8d 100644
--- a/src/components/editor/MapPanel/MapPanelWorkspace.tsx
+++ b/src/components/editor/MapPanel/MapPanelWorkspace.tsx
@@ -1,7 +1,4 @@
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-} from "@/components/ui/ContextMenu";
+import { ContextMenu, ContextMenuTrigger } from "@/components/ui/ContextMenu";
 import { MapCanvas } from "@/components/editor/MapCanvas";
 import { MapCanvasContextMenuContent } from "./MapCanvasContextMenuContent";
 import type { MapPanelWorkspaceProps } from "@/types/map-panel";
@@ -109,7 +106,9 @@ export function MapPanelWorkspace({
               onEditingTextChange={textObjectEditing.updateText}
               onCommitTextEditing={textObjectEditing.commitEditing}
               onCancelTextEditing={textObjectEditing.cancelEditing}
-              onDoubleClickObject={(id) => onOpenObjectProperties(id as ObjectId)}
+              onDoubleClickObject={(id) =>
+                onOpenObjectProperties(id as ObjectId)
+              }
             />
           ) : (
             <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
@@ -152,4 +151,4 @@ export function MapPanelWorkspace({
       />
     </ContextMenu>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts b/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts
index 6e7d38d..51ffde3 100644
--- a/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts
+++ b/src/components/editor/MapPanel/use-map-panel-canvas-actions.ts
@@ -1,7 +1,5 @@
 import { useCallback } from "react";
-import {
-  generateObjectId,
-} from "@/lib/ids";
+import { generateObjectId } from "@/lib/ids";
 import {
   areTileRefsEqual,
   createTileStamp,
@@ -17,11 +15,7 @@ import { setImageLayerEditorContext } from "@/lib/image-layer-editor-context";
 import { setTileEditorContext } from "@/lib/tile-editor-context";
 import { isLayerEffectivelyLocked } from "@/lib/layers";
 import type { MapCanvasProps } from "@/types/map-canvas";
-import type {
-  MapObject,
-  ObjectType,
-  TileRef,
-} from "@/types";
+import type { MapObject, ObjectType, TileRef } from "@/types";
 import { TEXT_OBJECT_DEFAULTS as textObjectDefaults } from "@/types";
 import type {
   MapPanelCanvasActionParams,
@@ -82,7 +76,10 @@ export function useMapPanelCanvasActions({
             for (let dx = 0; dx < brushNum; dx++) {
               const tx = gx + dx;
               const ty = gy + dy;
-              if (tx >= activeMap.widthInTiles || ty >= activeMap.heightInTiles) {
+              if (
+                tx >= activeMap.widthInTiles ||
+                ty >= activeMap.heightInTiles
+              ) {
                 continue;
               }
 
@@ -528,4 +525,4 @@ export function useMapPanelCanvasActions({
     handleSelectionChange,
     handleUpdatePolygonPoints,
   };
-}
\ No newline at end of file
+}
diff --git a/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts b/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts
index 861b2e6..1637cbf 100644
--- a/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts
+++ b/src/components/editor/MapPanel/use-map-panel-clipboard-actions.ts
@@ -1,18 +1,13 @@
 import { useCallback, useEffect, useState } from "react";
 import { getAsset, saveAsset } from "@/lib/db";
+import { generateAssetId, generateLayerId } from "@/lib/ids";
+import { findLastLayerId, isLayerEffectivelyLocked } from "@/lib/layers";
 import {
-  generateAssetId,
-  generateLayerId,
-} from "@/lib/ids";
-import {
-  findLastLayerId,
-  isLayerEffectivelyLocked,
-} from "@/lib/layers";
-import { getImageLayerClipboard, setImageLayerClipboard } from "@/lib/image-layer-clipboard";
+  getImageLayerClipboard,
+  setImageLayerClipboard,
+} from "@/lib/image-layer-clipboard";
 import { getClipboard, setClipboard } from "@/lib/tile-clipboard";
-import {
-  createTileStamp,
-} from "@/lib/tile-stamp";
+import { createTileStamp } from "@/lib/tile-stamp";
 import type { OrientAction } from "@/types/map-panel-context-menu";
 import type {
   ImageLayer,
@@ -99,10 +94,13 @@ export function useMapPanelClipboardActions({
     () => getImageLayerClipboard() !== null,
   );
 
-  const setExclusiveTileClipboard = useCallback((data: TileClipboard | null) => {
-    setClipboard(data);
-    setImageLayerClipboard(null);
-  }, []);
+  const setExclusiveTileClipboard = useCallback(
+    (data: TileClipboard | null) => {
+      setClipboard(data);
+      setImageLayerClipboard(null);
+    },
+    [],
+  );
 
   const setExclusiveImageLayerClipboard = useCallback(
     (data: ImageLayerClipboard | null) => {
@@ -119,7 +117,8 @@ export function useMapPanelClipboardActions({
         const tiles: TileClipboard["tiles"] = [];
         for (let dy = 0; dy < selection.height; dy++) {
           for (let dx = 0; dx < selection.width; dx++) {
-            const ref = activeLayer.tiles[`${selection.x + dx},${selection.y + dy}`];
+            const ref =
+              activeLayer.tiles[`${selection.x + dx},${selection.y + dy}`];
             if (ref) {
               tiles.push({ dx, dy, ref: { ...ref } });
             }
@@ -432,7 +431,12 @@ export function useMapPanelClipboardActions({
       imageLayers.push(nextLayer);
 
       const inserted = draft.activeLayerId
-        ? insertLayerAfter(draft.activeLayerId, newLayerId, map.layerOrder, groups)
+        ? insertLayerAfter(
+            draft.activeLayerId,
+            newLayerId,
+            map.layerOrder,
+            groups,
+          )
         : false;
       if (!inserted) {
         map.layerOrder.push(newLayerId);
@@ -717,7 +721,11 @@ export function useMapPanelClipboardActions({
           const flipX = nextRef.flipX ?? false;
           const flipY = nextRef.flipY ?? false;
           if (action === "rotateLeft") {
-            nextRef.rotation = ((rotation - 90 + 360) % 360) as 0 | 90 | 180 | 270;
+            nextRef.rotation = ((rotation - 90 + 360) % 360) as
+              | 0
+              | 90
+              | 180
+              | 270;
           } else if (action === "rotateRight") {
             nextRef.rotation = ((rotation + 90) % 360) as 0 | 90 | 180 | 270;
           } else if (action === "flipH") {
@@ -815,7 +823,10 @@ export function useMapPanelClipboardActions({
     );
 
     return () => {
-      window.removeEventListener("tile-clipboard-change", onTileClipboardChange);
+      window.removeEventListener(
+        "tile-clipboard-change",
+        onTileClipboardChange,
+      );
       window.removeEventListener(
         "image-layer-clipboard-change",
         onImageClipboardChange,
@@ -928,4 +939,4 @@ export function useMapPanelClipboardActions({
     handleOrientSelection,
     handlePasteSelection,
   };
-}
\ No newline at end of file
+}
diff --git a/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx b/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx
index 216e757..30c4a20 100644
--- a/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx
+++ b/src/components/tools/ImageEditor/ImageCanvasResizeControls.tsx
@@ -181,4 +181,4 @@ export function ImageCanvasResizeControls({
       )}
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/hooks/use-image-editor-frame-actions.ts b/src/hooks/use-image-editor-frame-actions.ts
index 0652bb1..c2a57d2 100644
--- a/src/hooks/use-image-editor-frame-actions.ts
+++ b/src/hooks/use-image-editor-frame-actions.ts
@@ -147,7 +147,9 @@ export function useImageEditorFrameActions({
     );
     const savedLayerData = new Map<string, ImageData>();
     for (const layerId of allLayerIds) {
-      const data = moduleLayerFrameData.get(layerDataKey(frameToDelete.id, layerId));
+      const data = moduleLayerFrameData.get(
+        layerDataKey(frameToDelete.id, layerId),
+      );
       if (data) {
         savedLayerData.set(
           layerId,
@@ -367,4 +369,4 @@ export function useImageEditorFrameActions({
     undoFrameOp,
     redoFrameOp,
   };
-}
\ No newline at end of file
+}
diff --git a/src/hooks/use-image-editor-layer-actions.ts b/src/hooks/use-image-editor-layer-actions.ts
index 894bd7a..303e064 100644
--- a/src/hooks/use-image-editor-layer-actions.ts
+++ b/src/hooks/use-image-editor-layer-actions.ts
@@ -6,7 +6,10 @@ import {
   layerDataKey,
   moduleLayerFrameData,
 } from "@/lib/image-editor-document";
-import { getImageEditorStore, isImageEditorStoreReady } from "@/lib/image-editor-store";
+import {
+  getImageEditorStore,
+  isImageEditorStoreReady,
+} from "@/lib/image-editor-store";
 import type {
   ImageEditorGroupId,
   ImageEditorImageLayer,
@@ -90,7 +93,13 @@ export function useImageEditorLayerActions({
           const context = canvas.getContext("2d");
           if (!context) return;
           context.imageSmoothingEnabled = false;
-          context.drawImage(image, 0, 0, currentState.width, currentState.height);
+          context.drawImage(
+            image,
+            0,
+            0,
+            currentState.width,
+            currentState.height,
+          );
           const imageData = context.getImageData(
             0,
             0,
@@ -99,7 +108,8 @@ export function useImageEditorLayerActions({
           );
 
           const newId = uuidv4() as ImageEditorLayerId;
-          const baseName = name ?? file.name.replace(/\.[^/.]+$/, "") ?? "Image";
+          const baseName =
+            name ?? file.name.replace(/\.[^/.]+$/, "") ?? "Image";
 
           for (const frame of currentState.frames) {
             moduleLayerFrameData.set(
@@ -186,7 +196,9 @@ export function useImageEditorLayerActions({
             (entry) => (entry as string) !== id,
           ) as typeof group.childOrder;
         }
-        draft.layers = draft.layers.filter((layer) => (layer.id as string) !== id);
+        draft.layers = draft.layers.filter(
+          (layer) => (layer.id as string) !== id,
+        );
         draft.imageLayers = draft.imageLayers.filter(
           (layer) => (layer.id as string) !== id,
         );
@@ -207,7 +219,9 @@ export function useImageEditorLayerActions({
       if (!state) return;
 
       setState((draft) => {
-        const group = draft.layerGroups.find((entry) => (entry.id as string) === groupId);
+        const group = draft.layerGroups.find(
+          (entry) => (entry.id as string) === groupId,
+        );
         if (!group) return;
 
         function collectDescendants(
@@ -286,7 +300,9 @@ export function useImageEditorLayerActions({
           return;
         }
 
-        const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+        const group = draft.layerGroups.find(
+          (entry) => (entry.id as string) === id,
+        );
         if (group) {
           group.name = name;
         }
@@ -301,7 +317,9 @@ export function useImageEditorLayerActions({
 
       setState((draft) => {
         if (isGroup) {
-          const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+          const group = draft.layerGroups.find(
+            (entry) => (entry.id as string) === id,
+          );
           if (group) {
             group.visible = !group.visible;
           }
@@ -331,7 +349,9 @@ export function useImageEditorLayerActions({
 
       setState((draft) => {
         if (isGroup) {
-          const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+          const group = draft.layerGroups.find(
+            (entry) => (entry.id as string) === id,
+          );
           if (group) {
             group.locked = !group.locked;
           }
@@ -369,7 +389,9 @@ export function useImageEditorLayerActions({
     (id: string) => {
       if (!state) return;
       setState((draft) => {
-        const group = draft.layerGroups.find((entry) => (entry.id as string) === id);
+        const group = draft.layerGroups.find(
+          (entry) => (entry.id as string) === id,
+        );
         if (group) {
           group.expanded = !group.expanded;
         }
@@ -379,7 +401,11 @@ export function useImageEditorLayerActions({
   );
 
   const moveImageEditorLayerItem = useCallback(
-    (id: string, direction: LayerMoveDirection, parentGroupId: string | null) => {
+    (
+      id: string,
+      direction: LayerMoveDirection,
+      parentGroupId: string | null,
+    ) => {
       if (!state) return;
 
       setState((draft) => {
@@ -464,7 +490,9 @@ export function useImageEditorLayerActions({
 
       const newGroupId = uuidv4() as ImageEditorGroupId;
       setState((draft) => {
-        const sourceGroup = draft.layerGroups.find((entry) => (entry.id as string) === id);
+        const sourceGroup = draft.layerGroups.find(
+          (entry) => (entry.id as string) === id,
+        );
         if (!sourceGroup) return;
 
         const copy: ImageEditorLayerGroup = {
@@ -481,11 +509,7 @@ export function useImageEditorLayerActions({
   );
 
   const moveImageEditorLayerIntoOrder = useCallback(
-    (
-      dragId: string,
-      targetId: string,
-      position: LayerDropPosition,
-    ) => {
+    (dragId: string, targetId: string, position: LayerDropPosition) => {
       if (!state) return;
 
       setState((draft) => {
@@ -516,7 +540,8 @@ export function useImageEditorLayerActions({
           return;
         }
 
-        let targetOrder: (ImageEditorLayerId | ImageEditorGroupId)[] | null = null;
+        let targetOrder: (ImageEditorLayerId | ImageEditorGroupId)[] | null =
+          null;
         if ((draft.layerOrder as string[]).includes(targetId)) {
           targetOrder = draft.layerOrder;
         } else {
@@ -531,7 +556,8 @@ export function useImageEditorLayerActions({
         if (targetOrder) {
           const targetIndex = (targetOrder as string[]).indexOf(targetId);
           if (targetIndex !== -1) {
-            const insertIndex = position === "above" ? targetIndex + 1 : targetIndex;
+            const insertIndex =
+              position === "above" ? targetIndex + 1 : targetIndex;
             targetOrder.splice(
               insertIndex,
               0,
@@ -560,4 +586,4 @@ export function useImageEditorLayerActions({
     duplicateImageEditorGroup,
     moveImageEditorLayerIntoOrder,
   };
-}
\ No newline at end of file
+}
diff --git a/src/hooks/use-image-editor-palette-actions.ts b/src/hooks/use-image-editor-palette-actions.ts
index e34b8cc..4135a2c 100644
--- a/src/hooks/use-image-editor-palette-actions.ts
+++ b/src/hooks/use-image-editor-palette-actions.ts
@@ -8,7 +8,10 @@ import {
   paletteUndoStack,
   snapshotPaletteLibrary,
 } from "@/lib/image-editor-document";
-import { getImageEditorStore, isImageEditorStoreReady } from "@/lib/image-editor-store";
+import {
+  getImageEditorStore,
+  isImageEditorStoreReady,
+} from "@/lib/image-editor-store";
 import {
   parseGpl,
   parseHex,
@@ -23,17 +26,17 @@ import {
 } from "@/lib/palette-formats";
 import { parsePhotoshopAse, writePhotoshopAse } from "@/lib/photoshop-ase";
 import { DEFAULT_PALETTE_COLORS, getActivePalette } from "@/types/image-editor";
-import type {
-  Color,
-  Palette,
-  PaletteId,
-} from "@/types/image-editor";
+import type { Color, Palette, PaletteId } from "@/types/image-editor";
 import type {
   PaletteExportFormat,
   PngSwatchSize,
 } from "@/types/image-editor-hook";
 import type { ImageEditorPaletteActionsParams } from "@/types/image-editor-hook-internals";
-import { actionLog, frameOpRedoStack, redoLog } from "@/lib/image-editor-document";
+import {
+  actionLog,
+  frameOpRedoStack,
+  redoLog,
+} from "@/lib/image-editor-document";
 
 export function useImageEditorPaletteActions({
   state,
@@ -107,9 +110,10 @@ export function useImageEditorPaletteActions({
       } else if (ext === "ase") {
         const buffer = await file.arrayBuffer();
         const signature = new DataView(buffer).getUint32(0, false);
-        colors = signature === 0x41534546
-          ? parsePhotoshopAse(buffer)
-          : parseAsePalette(buffer);
+        colors =
+          signature === 0x41534546
+            ? parsePhotoshopAse(buffer)
+            : parseAsePalette(buffer);
       } else if (ext === "gpl") {
         colors = parseGpl(await file.text());
       } else if (ext === "pal") {
@@ -262,7 +266,9 @@ export function useImageEditorPaletteActions({
       const newId = uuidv4() as PaletteId;
       const sourceColors = source.colors.map((color) => ({ ...color }));
       setState((draft) => {
-        const sourceIndex = draft.palettes.findIndex((palette) => palette.id === id);
+        const sourceIndex = draft.palettes.findIndex(
+          (palette) => palette.id === id,
+        );
         draft.palettes.splice(sourceIndex + 1, 0, {
           id: newId,
           name: `${source.name} (copy)`,
@@ -334,4 +340,4 @@ export function useImageEditorPaletteActions({
     reorderPaletteColors,
     restorePaletteLibrary,
   };
-}
\ No newline at end of file
+}
diff --git a/src/lib/image-editor-crop-tools.ts b/src/lib/image-editor-crop-tools.ts
index 5293c48..1c3bf51 100644
--- a/src/lib/image-editor-crop-tools.ts
+++ b/src/lib/image-editor-crop-tools.ts
@@ -248,4 +248,4 @@ export function cropUp(
   }
 
   return rect;
-}
\ No newline at end of file
+}
diff --git a/src/lib/image-editor-document.ts b/src/lib/image-editor-document.ts
index 6cef2a7..e2f8e95 100644
--- a/src/lib/image-editor-document.ts
+++ b/src/lib/image-editor-document.ts
@@ -82,7 +82,9 @@ function buildSaveFingerprint(state: ImageEditorState | null): string | null {
 
   for (const frame of state.frames) {
     for (const layerId of allLayerIds) {
-      const imageData = moduleLayerFrameData.get(layerDataKey(frame.id, layerId));
+      const imageData = moduleLayerFrameData.get(
+        layerDataKey(frame.id, layerId),
+      );
       parts.push(
         `${frame.id}:${layerId}:${imageData ? hashPixelBuffer(imageData.data) : "empty"}`,
       );
@@ -132,7 +134,9 @@ export function getLeafLayerIds(
   const result: string[] = [];
 
   for (const id of order) {
-    const group = groups.find((entry) => (entry.id as string) === (id as string));
+    const group = groups.find(
+      (entry) => (entry.id as string) === (id as string),
+    );
     if (group) {
       const childVisible = ignoreVisibility || (parentVisible && group.visible);
       result.push(
@@ -185,7 +189,9 @@ export function captureResizeSnapshot(state: ImageEditorState): ResizeSnapshot {
     const current = moduleLayerFrameData.get(key);
     layerData.set(
       key,
-      current ? cloneImageData(current) : new ImageData(state.width, state.height),
+      current
+        ? cloneImageData(current)
+        : new ImageData(state.width, state.height),
     );
   }
 
@@ -444,4 +450,8 @@ export function resetImageEditorDocumentState(): void {
   savedDocumentFingerprint = null;
 }
 
-export { getImageEditorStore, isImageEditorStoreReady, subscribeToImageEditorStoreInstance };
\ No newline at end of file
+export {
+  getImageEditorStore,
+  isImageEditorStoreReady,
+  subscribeToImageEditorStoreInstance,
+};
diff --git a/src/lib/image-editor-selection-tools.ts b/src/lib/image-editor-selection-tools.ts
index 8ac8bb3..6e40e5a 100644
--- a/src/lib/image-editor-selection-tools.ts
+++ b/src/lib/image-editor-selection-tools.ts
@@ -131,7 +131,10 @@ export function hitTestResizeHandle(x: number, y: number): ResizeHandle {
   const displayHeight = state.displayHeight;
   const handleSize = HANDLE_SIZE;
 
-  if (Math.abs(x - floatingX) <= handleSize && Math.abs(y - floatingY) <= handleSize) {
+  if (
+    Math.abs(x - floatingX) <= handleSize &&
+    Math.abs(y - floatingY) <= handleSize
+  ) {
     return "nw";
   }
   if (
@@ -223,7 +226,13 @@ export function drawFloatingOnOverlay(tc: ToolContext): void {
   sourceContext.putImageData(state.floatingPixels, 0, 0);
 
   tc.overlayCtx.imageSmoothingEnabled = false;
-  tc.overlayCtx.drawImage(sourceCanvas, floatingX, floatingY, displayWidth, displayHeight);
+  tc.overlayCtx.drawImage(
+    sourceCanvas,
+    floatingX,
+    floatingY,
+    displayWidth,
+    displayHeight,
+  );
 }
 
 export function selectionDown(
@@ -246,7 +255,12 @@ export function selectionDown(
         w: selectionState.displayWidth,
         h: selectionState.displayHeight,
       };
-      selectionState.canvasSnapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+      selectionState.canvasSnapshot = tc.ctx.getImageData(
+        0,
+        0,
+        tc.width,
+        tc.height,
+      );
       return;
     }
 
@@ -254,7 +268,12 @@ export function selectionDown(
       selectionState.draggingFloating = true;
       selectionState.dragOffsetX = x - selectionState.floatingX;
       selectionState.dragOffsetY = y - selectionState.floatingY;
-      selectionState.canvasSnapshot = tc.ctx.getImageData(0, 0, tc.width, tc.height);
+      selectionState.canvasSnapshot = tc.ctx.getImageData(
+        0,
+        0,
+        tc.width,
+        tc.height,
+      );
       return;
     }
 
@@ -307,7 +326,8 @@ export function selectionMove(
       (handle === "nw" || handle === "ne" || handle === "sw" || handle === "se")
     ) {
       const aspectRatio =
-        selectionState.floatingPixels.width / selectionState.floatingPixels.height;
+        selectionState.floatingPixels.width /
+        selectionState.floatingPixels.height;
       if (nextWidth / aspectRatio > nextHeight) {
         nextHeight = Math.round(nextWidth / aspectRatio);
       } else {
@@ -451,9 +471,12 @@ export function selectionUp(
       const sourceIndex = (sourceY * tc.width + sourceX) * 4;
       const destinationIndex = (py * selectionWidth + px) * 4;
       floatingPixels.data[destinationIndex] = imageData.data[sourceIndex];
-      floatingPixels.data[destinationIndex + 1] = imageData.data[sourceIndex + 1];
-      floatingPixels.data[destinationIndex + 2] = imageData.data[sourceIndex + 2];
-      floatingPixels.data[destinationIndex + 3] = imageData.data[sourceIndex + 3];
+      floatingPixels.data[destinationIndex + 1] =
+        imageData.data[sourceIndex + 1];
+      floatingPixels.data[destinationIndex + 2] =
+        imageData.data[sourceIndex + 2];
+      floatingPixels.data[destinationIndex + 3] =
+        imageData.data[sourceIndex + 3];
 
       imageData.data[sourceIndex] = 0;
       imageData.data[sourceIndex + 1] = 0;
@@ -534,4 +557,4 @@ export function pasteSelectionPixels(
   drawFloatingOnOverlay(tc);
 
   return { x: 0, y: 0, width: displayWidth, height: displayHeight };
-}
\ No newline at end of file
+}
diff --git a/src/lib/image-editor-shape-tools.ts b/src/lib/image-editor-shape-tools.ts
index d7ae000..7bf94ad 100644
--- a/src/lib/image-editor-shape-tools.ts
+++ b/src/lib/image-editor-shape-tools.ts
@@ -37,7 +37,12 @@ export function lineMove(
   tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
   const overlayImageData = tc.overlayCtx.createImageData(tc.width, tc.height);
 
-  const points = bresenhamLine(strokeState.startX, strokeState.startY, endX, endY);
+  const points = bresenhamLine(
+    strokeState.startX,
+    strokeState.startY,
+    endX,
+    endY,
+  );
   for (const [px, py] of points) {
     drawBrush(
       overlayImageData.data,
@@ -70,7 +75,12 @@ export function lineUp(
   tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
 
   const imageData = tc.ctx.getImageData(0, 0, tc.width, tc.height);
-  const points = bresenhamLine(strokeState.startX, strokeState.startY, endX, endY);
+  const points = bresenhamLine(
+    strokeState.startX,
+    strokeState.startY,
+    endX,
+    endY,
+  );
   for (const [px, py] of points) {
     drawBrush(
       imageData.data,
@@ -133,7 +143,12 @@ export function rectangleMove(
   let endX = x;
   let endY = y;
   if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+    [endX, endY] = constrainSquare(
+      strokeState.startX,
+      strokeState.startY,
+      x,
+      y,
+    );
   }
 
   tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
@@ -162,7 +177,12 @@ export function rectangleUp(
   let endX = x;
   let endY = y;
   if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+    [endX, endY] = constrainSquare(
+      strokeState.startX,
+      strokeState.startY,
+      x,
+      y,
+    );
   }
 
   tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
@@ -232,7 +252,12 @@ export function contourMove(
   let endX = x;
   let endY = y;
   if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+    [endX, endY] = constrainSquare(
+      strokeState.startX,
+      strokeState.startY,
+      x,
+      y,
+    );
   }
 
   tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
@@ -261,7 +286,12 @@ export function contourUp(
   let endX = x;
   let endY = y;
   if (tc.shiftKey) {
-    [endX, endY] = constrainSquare(strokeState.startX, strokeState.startY, x, y);
+    [endX, endY] = constrainSquare(
+      strokeState.startX,
+      strokeState.startY,
+      x,
+      y,
+    );
   }
 
   tc.overlayCtx.clearRect(0, 0, tc.width, tc.height);
@@ -281,4 +311,4 @@ export function contourUp(
 
   strokeState.active = false;
   strokeState.snapshot = null;
-}
\ No newline at end of file
+}
diff --git a/src/lib/image-editor-tools-shared.ts b/src/lib/image-editor-tools-shared.ts
index a359997..20a442b 100644
--- a/src/lib/image-editor-tools-shared.ts
+++ b/src/lib/image-editor-tools-shared.ts
@@ -217,4 +217,4 @@ export function constrainSquare(
   const dy = ey - sy;
   const size = Math.max(Math.abs(dx), Math.abs(dy));
   return [sx + size * Math.sign(dx || 1), sy + size * Math.sign(dy || 1)];
-}
\ No newline at end of file
+}
diff --git a/src/lib/image-editor-tools.ts b/src/lib/image-editor-tools.ts
index 55244da..7eecd99 100644
--- a/src/lib/image-editor-tools.ts
+++ b/src/lib/image-editor-tools.ts
@@ -7,21 +7,13 @@
 
 import type { Color, ImageEditorTool } from "@/types/image-editor";
 import type { StrokeState, ToolContext } from "@/types/image-editor-internals";
-import {
-  bresenhamLine,
-  getPixel,
-  setPixel,
-} from "./image-editor-tools-shared";
+import { bresenhamLine, getPixel, setPixel } from "./image-editor-tools-shared";
 import {
   selectionDown,
   selectionMove,
   selectionUp,
 } from "./image-editor-selection-tools";
-import {
-  cropDown,
-  cropMove,
-  cropUp,
-} from "./image-editor-crop-tools";
+import { cropDown, cropMove, cropUp } from "./image-editor-crop-tools";
 import {
   contourDown,
   contourMove,
diff --git a/src/lib/project-import.ts b/src/lib/project-import.ts
index ba7e2a5..20a8275 100644
--- a/src/lib/project-import.ts
+++ b/src/lib/project-import.ts
@@ -52,4 +52,4 @@ export function cloneImportedTileset(
     id: tilesetIdMap.get(tileset.id as string) ?? tileset.id,
     groupId,
   };
-}
\ No newline at end of file
+}
diff --git a/src/types/app.ts b/src/types/app.ts
index af3f847..30e3feb 100644
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -15,4 +15,4 @@ export interface AppShellProps {
   setBugReportOpen: (value: boolean) => void;
   activeTool: ToolName | null;
   setActiveTool: (value: ToolName | null) => void;
-}
\ No newline at end of file
+}
diff --git a/src/types/image-editor-hook-internals.ts b/src/types/image-editor-hook-internals.ts
index 17ef0db..00d71db 100644
--- a/src/types/image-editor-hook-internals.ts
+++ b/src/types/image-editor-hook-internals.ts
@@ -2,9 +2,7 @@ import type { ImageEditorState } from "./image-editor";
 
 export type ImageEditorStateUpdater = (draft: ImageEditorState) => void;
 
-export type ImageEditorSetState = (
-  updater: ImageEditorStateUpdater,
-) => void;
+export type ImageEditorSetState = (updater: ImageEditorStateUpdater) => void;
 
 export type FrameMoveDirection = "left" | "right";
 
@@ -25,4 +23,4 @@ export interface ImageEditorPaletteActionsParams {
 export interface ImageEditorLayerActionsParams {
   state: ImageEditorState | null;
   setState: ImageEditorSetState;
-}
\ No newline at end of file
+}
diff --git a/src/types/image-editor-tools.ts b/src/types/image-editor-tools.ts
index 41dd72f..780ed90 100644
--- a/src/types/image-editor-tools.ts
+++ b/src/types/image-editor-tools.ts
@@ -16,4 +16,4 @@ export interface CropState {
   resizeStartX: number;
   resizeStartY: number;
   resizeStartRect: CropRect | null;
-}
\ No newline at end of file
+}
diff --git a/src/types/image-editor-ui.ts b/src/types/image-editor-ui.ts
index 761e769..dff4525 100644
--- a/src/types/image-editor-ui.ts
+++ b/src/types/image-editor-ui.ts
@@ -105,7 +105,9 @@ export interface ImageCanvasResizeControlsProps {
   hoveredResizeHandle: ImageCanvasResizeHandle;
   resizePreview: ImageCanvasResizePreview | null;
   hasActiveResizeAction: boolean;
-  onPointerEnterHandle: (handle: Exclude<ImageCanvasResizeHandle, null>) => void;
+  onPointerEnterHandle: (
+    handle: Exclude<ImageCanvasResizeHandle, null>,
+  ) => void;
   onPointerLeaveHandle: () => void;
   onBeginResize: (
     handle: Exclude<ImageCanvasResizeHandle, null>,
diff --git a/src/types/layers-panel.ts b/src/types/layers-panel.ts
index b88407e..58512e6 100644
--- a/src/types/layers-panel.ts
+++ b/src/types/layers-panel.ts
@@ -51,4 +51,4 @@ export interface DeleteLayerDialogProps {
   deleteTarget: LayersPanelDeleteTarget | null;
   onOpenChange: (open: boolean) => void;
   onDelete: () => void;
-}
\ No newline at end of file
+}
diff --git a/src/types/map-canvas.ts b/src/types/map-canvas.ts
index abde45e..695e769 100644
--- a/src/types/map-canvas.ts
+++ b/src/types/map-canvas.ts
@@ -262,10 +262,7 @@ export interface SceneInteractionHandlerContext {
     globalX: number,
     globalY: number,
   ) => ScenePointerPosition | null;
-  getGridPos: (
-    globalX: number,
-    globalY: number,
-  ) => ScenePointerPosition | null;
+  getGridPos: (globalX: number, globalY: number) => ScenePointerPosition | null;
   getInteractiveImageLayer: (imgLayer: ImageLayer) => ImageLayer;
   getObjectInteractionOverrides: (
     object: MapObject,
@@ -333,16 +330,34 @@ export interface SceneInteractionHandlerContext {
   setHoveredObjectCursor: Dispatch<SetStateAction<string | null>>;
   setIsDrawingPolygon: Dispatch<SetStateAction<boolean>>;
   setIsMoving: Dispatch<SetStateAction<boolean>>;
-  setLiveImagePos: Dispatch<SetStateAction<UseSceneInteractionReturn["liveImagePos"]>>;
-  setLiveImageResize: Dispatch<SetStateAction<UseSceneInteractionReturn["liveImageResize"]>>;
-  setLiveObjectPlace: Dispatch<SetStateAction<UseSceneInteractionReturn["liveObjectPlace"]>>;
-  setLiveObjectPos: Dispatch<SetStateAction<UseSceneInteractionReturn["liveObjectPos"]>>;
-  setLiveObjectResize: Dispatch<SetStateAction<UseSceneInteractionReturn["liveObjectResize"]>>;
-  setLivePolyVertex: Dispatch<SetStateAction<UseSceneInteractionReturn["livePolyVertex"]>>;
+  setLiveImagePos: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["liveImagePos"]>
+  >;
+  setLiveImageResize: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["liveImageResize"]>
+  >;
+  setLiveObjectPlace: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["liveObjectPlace"]>
+  >;
+  setLiveObjectPos: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["liveObjectPos"]>
+  >;
+  setLiveObjectResize: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["liveObjectResize"]>
+  >;
+  setLivePolyVertex: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["livePolyVertex"]>
+  >;
   setLiveSelection: Dispatch<SetStateAction<MapSelection | null>>;
-  setMoveTilesSnapshot: Dispatch<SetStateAction<UseSceneInteractionReturn["moveTilesSnapshot"]>>;
-  setPolygonCursorPos: Dispatch<SetStateAction<UseSceneInteractionReturn["polygonCursorPos"]>>;
-  setPolygonPoints: Dispatch<SetStateAction<UseSceneInteractionReturn["polygonPoints"]>>;
+  setMoveTilesSnapshot: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["moveTilesSnapshot"]>
+  >;
+  setPolygonCursorPos: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["polygonCursorPos"]>
+  >;
+  setPolygonPoints: Dispatch<
+    SetStateAction<UseSceneInteractionReturn["polygonPoints"]>
+  >;
   setResizingHandle: Dispatch<SetStateAction<ResizeHandle | null>>;
   shiftKeyRef: MutableRefObject<boolean>;
   zoom: UseSceneInteractionParams["zoom"];
diff --git a/src/types/map-panel.ts b/src/types/map-panel.ts
index cde8e72..99e856f 100644
--- a/src/types/map-panel.ts
+++ b/src/types/map-panel.ts
@@ -1,8 +1,4 @@
-import type {
-  Dispatch,
-  RefObject,
-  SetStateAction,
-} from "react";
+import type { Dispatch, RefObject, SetStateAction } from "react";
 import type {
   EditorState,
   EditorTool,
@@ -19,10 +15,7 @@ import type {
   TileMapData,
 } from "./schema";
 import type { NewMapType } from "./map-geometry";
-import type {
-  MapCanvasImperativeHandle,
-  MapCanvasProps,
-} from "./map-canvas";
+import type { MapCanvasImperativeHandle, MapCanvasProps } from "./map-canvas";
 import type {
   MapCanvasContextMenuTile,
   OrientAction,
@@ -182,7 +175,12 @@ export interface MapPanelCanvasActionParams {
   hasContextMenuImageLayer: boolean;
   layerGroups: NonNullable<EditorState["project"]>["layerGroups"];
   mapCanvasRef: RefObject<MapCanvasImperativeHandle | null>;
-  paintBuffer: Map<string, MapCanvasProps["paintBuffer"] extends Map<string, infer TValue> ? TValue : never>;
+  paintBuffer: Map<
+    string,
+    MapCanvasProps["paintBuffer"] extends Map<string, infer TValue>
+      ? TValue
+      : never
+  >;
   project: EditorState["project"];
   setPaintBufferVersion: Dispatch<SetStateAction<number>>;
   setState: ReturnType<typeof import("@/lib/store").getEditorStore>["setState"];
@@ -191,7 +189,9 @@ export interface MapPanelCanvasActionParams {
 }
 
 export interface MapPanelCanvasActionResult {
-  handleCancelPendingObject: NonNullable<MapCanvasProps["onCancelPendingObject"]>;
+  handleCancelPendingObject: NonNullable<
+    MapCanvasProps["onCancelPendingObject"]
+  >;
   handleCreateObject: MapCanvasProps["onCreateObject"];
   handleEditInImageEditor: () => void;
   handleMoveImageLayer: MapCanvasProps["onMoveImageLayer"];
@@ -233,6 +233,9 @@ export interface MapPanelClipboardActionResult {
   handleCopySelection: (fromContextMenu?: boolean) => Promise<void>;
   handleCutSelection: (fromContextMenu?: boolean) => Promise<void>;
   handleDeleteSelection: (fromContextMenu?: boolean) => void;
-  handleOrientSelection: (action: OrientAction, fromContextMenu?: boolean) => void;
+  handleOrientSelection: (
+    action: OrientAction,
+    fromContextMenu?: boolean,
+  ) => void;
   handlePasteSelection: (fromContextMenu?: boolean) => Promise<void>;
-}
\ No newline at end of file
+}

From 3d0a8e10fc82053e235ad53579f0cac43966c8f6 Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 13:15:07 +0200
Subject: [PATCH 05/12] feat: implement drag and drop functionality for image
 tileset creation

Co-authored-by: Copilot <copilot@github.com>
---
 TODO.txt                               |  2 +-
 src/components/editor/TilesetPanel.tsx | 68 ++++++++++++++++++++++++--
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index 5837322..ec829c6 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,5 +1,5 @@
-Refactor files longer than 1000 lines of code
 Enabled drag and drop from desktop to tile layer
+
 Add Isometric map type
 
 Import Options
diff --git a/src/components/editor/TilesetPanel.tsx b/src/components/editor/TilesetPanel.tsx
index 92ed729..c6acd1a 100644
--- a/src/components/editor/TilesetPanel.tsx
+++ b/src/components/editor/TilesetPanel.tsx
@@ -3,6 +3,7 @@ import {
   useState,
   useEffect,
   useCallback,
+  type DragEvent,
   useSyncExternalStore,
 } from "react";
 import { Plus, Save, ZoomIn, ZoomOut, Trash2, X } from "lucide-react";
@@ -100,6 +101,7 @@ export function TilesetPanel() {
   const [newGroupName, setNewGroupName] = useState("");
   const [renamingTabId, setRenamingTabId] = useState<TilesetId | null>(null);
   const [renameValue, setRenameValue] = useState("");
+  const [isDropTargetActive, setIsDropTargetActive] = useState(false);
   const renameInputRef = useRef<HTMLInputElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -155,9 +157,9 @@ export function TilesetPanel() {
     fileInputRef.current?.click();
   }
 
-  async function handleFileSelected(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
+  async function createTilesetFromFile(file: File | null | undefined) {
     if (!file || !activeGroup) return;
+    if (!file.type.startsWith("image/")) return;
 
     const buffer = await file.arrayBuffer();
     const assetId = generateAssetId();
@@ -190,10 +192,54 @@ export function TilesetPanel() {
       draft.project.tilesets.push(tileset);
       syncActiveTilesetState(draft, tilesetId);
     });
+  }
+
+  async function handleFileSelected(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    await createTilesetFromFile(file);
 
     if (fileInputRef.current) fileInputRef.current.value = "";
   }
 
+  function hasImageData(dataTransfer: DataTransfer): boolean {
+    const itemList = Array.from(dataTransfer.items ?? []);
+    if (
+      itemList.some(
+        (item) => item.kind === "file" && item.type.startsWith("image/"),
+      )
+    ) {
+      return true;
+    }
+
+    return Array.from(dataTransfer.files ?? []).some((file) =>
+      file.type.startsWith("image/"),
+    );
+  }
+
+  function handleCanvasDragOver(e: DragEvent<HTMLDivElement>) {
+    if (!hasImageData(e.dataTransfer)) return;
+
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setIsDropTargetActive(true);
+  }
+
+  function handleCanvasDragLeave(e: DragEvent<HTMLDivElement>) {
+    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+    setIsDropTargetActive(false);
+  }
+
+  async function handleCanvasDrop(e: DragEvent<HTMLDivElement>) {
+    const file = Array.from(e.dataTransfer.files).find((candidate) =>
+      candidate.type.startsWith("image/"),
+    );
+    if (!file) return;
+
+    e.preventDefault();
+    setIsDropTargetActive(false);
+    await createTilesetFromFile(file);
+  }
+
   function handleGroupChange(value: string) {
     if (value === "__add__") {
       setAddGroupOpen(true);
@@ -578,8 +624,11 @@ export function TilesetPanel() {
 
       {/* Tileset canvas area — uses the shared TilesetCanvas component */}
       <div
-        className="flex-1 min-h-0 flex flex-col overflow-hidden"
+        className="relative flex-1 min-h-0 flex flex-col overflow-hidden"
         onContextMenu={(e) => e.preventDefault()}
+        onDragOver={handleCanvasDragOver}
+        onDragLeave={handleCanvasDragLeave}
+        onDrop={handleCanvasDrop}
       >
         <TilesetCanvas
           assetId={activeTileset?.assetId ?? null}
@@ -596,15 +645,26 @@ export function TilesetPanel() {
               : "Select a tileset tab"
           }
         />
+        {isDropTargetActive && (
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center border-2 border-dashed border-primary bg-background/80">
+            <span className="rounded-md bg-background/90 px-3 py-2 text-xs font-medium text-foreground shadow-sm">
+              Drop an image to create a tileset
+            </span>
+          </div>
+        )}
       </div>
 
       {/* Hidden file input */}
       <input
         ref={fileInputRef}
+        id="tileset-file-input"
+        name="tileset-file-input"
         type="file"
         accept="image/*"
         className="hidden"
-        onChange={handleFileSelected}
+        onChange={(e) => {
+          void handleFileSelected(e);
+        }}
       />
 
       <NewTilesetGroupDialog

From 86e6039bfc9bbe1b1135bf6d112bdabb5529979e Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 13:33:00 +0200
Subject: [PATCH 06/12] feat: add isometric map type and update related
 functionalities

---
 TODO.txt                                  |   5 +-
 src/components/editor/MapCanvas/index.tsx |  14 +--
 src/lib/map-geometry.ts                   | 100 +++++++++++++++++++---
 src/lib/project.ts                        |   2 +-
 src/types/map-geometry.ts                 |   4 +-
 5 files changed, 101 insertions(+), 24 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index ec829c6..9873543 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,8 +1,5 @@
-Enabled drag and drop from desktop to tile layer
-
-Add Isometric map type
-
 Import Options
+
 Export Options
 
 AI Asset Generation:
diff --git a/src/components/editor/MapCanvas/index.tsx b/src/components/editor/MapCanvas/index.tsx
index b55cc68..201de6a 100644
--- a/src/components/editor/MapCanvas/index.tsx
+++ b/src/components/editor/MapCanvas/index.tsx
@@ -17,7 +17,7 @@ import {
   getMapCellOrigin,
   getMapCellPolygon,
   getMapPixelSize,
-  isHexagonalMap,
+  isOffsetMap,
 } from "@/lib/map-geometry";
 import { isTextObject } from "@/lib/text-objects";
 import type { MapCanvasProps } from "@/types/map-canvas";
@@ -127,7 +127,7 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
   const previewPixelSize = getMapPixelSize(previewMap, zoom);
   const canvasW = Math.ceil(previewPixelSize.width);
   const canvasH = Math.ceil(previewPixelSize.height);
-  const isHexMap = isHexagonalMap(map);
+  const usesPolygonCells = isOffsetMap(map);
 
   const traceCellPath = useCallback(
     (ctx: CanvasRenderingContext2D, x: number, y: number) => {
@@ -222,7 +222,7 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
         if (!img) return;
         ctx.imageSmoothingEnabled = false;
         const bounds = getMapCellBounds(map, zoom, gx, gy);
-        if (!isHexMap) {
+        if (!usesPolygonCells) {
           ctx.clearRect(bounds.x, bounds.y, bounds.width, bounds.height);
         }
         drawTileWithOrientation(ctx, img, ref, bounds.x, bounds.y, scaledTile);
@@ -233,7 +233,7 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
         const ctx = canvas.getContext("2d");
         if (!ctx) return;
         ctx.imageSmoothingEnabled = false;
-        if (isHexMap) return;
+        if (usesPolygonCells) return;
         const bounds = getMapCellBounds(map, zoom, gx, gy);
         ctx.clearRect(bounds.x, bounds.y, bounds.width, bounds.height);
       },
@@ -550,7 +550,7 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
     // ---- Grid ----
     ctx.strokeStyle = "rgba(255, 165, 0, 0.15)";
     ctx.lineWidth = 1;
-    if (isHexMap) {
+    if (usesPolygonCells) {
       for (let y = 0; y < mapH; y++) {
         for (let x = 0; x < mapW; x++) {
           traceCellPath(ctx, x, y);
@@ -575,7 +575,7 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
 
     // ---- Selection overlay ----
     if (currentTool === "select" && renderedSelection) {
-      if (isHexMap) {
+      if (usesPolygonCells) {
         for (let dy = 0; dy < renderedSelection.height; dy++) {
           for (let dx = 0; dx < renderedSelection.width; dx++) {
             const tx = renderedSelection.x + dx;
@@ -761,7 +761,7 @@ export const MapCanvas = memo(function MapCanvas(props: MapCanvasProps) {
   }, [
     canvasW,
     canvasH,
-    isHexMap,
+    usesPolygonCells,
     map,
     scaledTile,
     mapW,
diff --git a/src/lib/map-geometry.ts b/src/lib/map-geometry.ts
index db126aa..f520e53 100644
--- a/src/lib/map-geometry.ts
+++ b/src/lib/map-geometry.ts
@@ -26,6 +26,8 @@ export const NEW_MAP_TYPE_OPTIONS = [
   { value: "orthogonal", label: "Orthogonal" },
   { value: "hexagonal-row", label: "Hexagonal (Staggered Rows)" },
   { value: "hexagonal-column", label: "Hexagonal (Staggered Columns)" },
+  { value: "isometric-row", label: "Isometric (Staggered Rows)" },
+  { value: "isometric-column", label: "Isometric (Staggered Columns)" },
 ] as const satisfies readonly { value: NewMapType; label: string }[];
 
 export function getGeometryForNewMapType(mapType: NewMapType): TileMapGeometry {
@@ -42,6 +44,18 @@ export function getGeometryForNewMapType(mapType: NewMapType): TileMapGeometry {
         staggerAxis: "x",
         staggerIndex: DEFAULT_HEX_STAGGER_INDEX,
       };
+    case "isometric-row":
+      return {
+        orientation: "staggered",
+        staggerAxis: "y",
+        staggerIndex: DEFAULT_HEX_STAGGER_INDEX,
+      };
+    case "isometric-column":
+      return {
+        orientation: "staggered",
+        staggerAxis: "x",
+        staggerIndex: DEFAULT_HEX_STAGGER_INDEX,
+      };
     default:
       return {
         orientation: "orthogonal",
@@ -53,6 +67,14 @@ export function isHexagonalMap(map: TileMapGeometryLike): boolean {
   return map.orientation === "hexagonal";
 }
 
+export function isStaggeredMap(map: TileMapGeometryLike): boolean {
+  return map.orientation === "staggered";
+}
+
+export function isOffsetMap(map: TileMapGeometryLike): boolean {
+  return isHexagonalMap(map) || isStaggeredMap(map);
+}
+
 export function isStaggeredIndex(
   index: number,
   map: Pick<TileMapGeometryLike, "staggerIndex">,
@@ -69,6 +91,18 @@ function hasShiftedIndex(
   return map.staggerIndex === "even" ? count >= 1 : count >= 2;
 }
 
+function getMapStepRatio(map: TileMapGeometryLike): number {
+  if (isHexagonalMap(map)) {
+    return HEX_STEP_RATIO;
+  }
+
+  if (isStaggeredMap(map)) {
+    return HALF_TILE_RATIO;
+  }
+
+  return 1;
+}
+
 export function getMapCellOrigin(
   map: TileMapGeometryLike,
   zoom: number,
@@ -77,22 +111,24 @@ export function getMapCellOrigin(
 ): MapPoint {
   const scaledTile = map.tileSize * zoom;
 
-  if (!isHexagonalMap(map)) {
+  if (!isOffsetMap(map)) {
     return {
       x: x * scaledTile,
       y: y * scaledTile,
     };
   }
 
+  const step = scaledTile * getMapStepRatio(map);
+
   if (map.staggerAxis === "y") {
     return {
       x: x * scaledTile + (isStaggeredIndex(y, map) ? scaledTile / 2 : 0),
-      y: y * scaledTile * HEX_STEP_RATIO,
+      y: y * step,
     };
   }
 
   return {
-    x: x * scaledTile * HEX_STEP_RATIO,
+    x: x * step,
     y: y * scaledTile + (isStaggeredIndex(x, map) ? scaledTile / 2 : 0),
   };
 }
@@ -123,7 +159,7 @@ export function getMapCellPolygon(
   const origin = getMapCellOrigin(map, zoom, x, y);
   const scaledTile = map.tileSize * zoom;
 
-  if (!isHexagonalMap(map)) {
+  if (!isOffsetMap(map)) {
     return [
       { x: origin.x, y: origin.y },
       { x: origin.x + scaledTile, y: origin.y },
@@ -132,6 +168,15 @@ export function getMapCellPolygon(
     ];
   }
 
+  if (isStaggeredMap(map)) {
+    return [
+      { x: origin.x + scaledTile * HALF_TILE_RATIO, y: origin.y },
+      { x: origin.x + scaledTile, y: origin.y + scaledTile * HALF_TILE_RATIO },
+      { x: origin.x + scaledTile * HALF_TILE_RATIO, y: origin.y + scaledTile },
+      { x: origin.x, y: origin.y + scaledTile * HALF_TILE_RATIO },
+    ];
+  }
+
   if (map.staggerAxis === "y") {
     return [
       { x: origin.x + scaledTile * HALF_TILE_RATIO, y: origin.y },
@@ -165,24 +210,26 @@ export function getMapPixelSize(
     return { width: 0, height: 0 };
   }
 
-  if (!isHexagonalMap(map)) {
+  if (!isOffsetMap(map)) {
     return {
       width: widthInTiles * scaledTile,
       height: heightInTiles * scaledTile,
     };
   }
 
+  const step = scaledTile * getMapStepRatio(map);
+
   if (map.staggerAxis === "y") {
     return {
       width:
         widthInTiles * scaledTile +
         (hasShiftedIndex(heightInTiles, map) ? scaledTile / 2 : 0),
-      height: scaledTile + (heightInTiles - 1) * scaledTile * HEX_STEP_RATIO,
+      height: scaledTile + (heightInTiles - 1) * step,
     };
   }
 
   return {
-    width: scaledTile + (widthInTiles - 1) * scaledTile * HEX_STEP_RATIO,
+    width: scaledTile + (widthInTiles - 1) * step,
     height:
       heightInTiles * scaledTile +
       (hasShiftedIndex(widthInTiles, map) ? scaledTile / 2 : 0),
@@ -214,7 +261,7 @@ export function getMapCellAtPoint(
 ): MapCell | null {
   const scaledTile = map.tileSize * zoom;
 
-  if (!isHexagonalMap(map)) {
+  if (!isOffsetMap(map)) {
     const x = Math.floor(point.x / scaledTile);
     const y = Math.floor(point.y / scaledTile);
 
@@ -227,9 +274,10 @@ export function getMapCellAtPoint(
 
   const xCandidates = new Set<number>();
   const yCandidates = new Set<number>();
+  const step = scaledTile * getMapStepRatio(map);
 
   if (map.staggerAxis === "y") {
-    const approxY = Math.floor(point.y / (scaledTile * HEX_STEP_RATIO));
+    const approxY = Math.floor(point.y / step);
 
     for (let y = approxY - 1; y <= approxY + 1; y++) {
       if (y < 0 || y >= map.heightInTiles) continue;
@@ -244,7 +292,7 @@ export function getMapCellAtPoint(
       }
     }
   } else {
-    const approxX = Math.floor(point.x / (scaledTile * HEX_STEP_RATIO));
+    const approxX = Math.floor(point.x / step);
 
     for (let x = approxX - 1; x <= approxX + 1; x++) {
       if (x < 0 || x >= map.widthInTiles) continue;
@@ -279,13 +327,43 @@ export function getAdjacentMapCells(
 ): MapCell[] {
   let candidates: MapCell[];
 
-  if (!isHexagonalMap(map)) {
+  if (!isOffsetMap(map)) {
     candidates = [
       { x: x + 1, y },
       { x: x - 1, y },
       { x, y: y + 1 },
       { x, y: y - 1 },
     ];
+  } else if (isStaggeredMap(map) && map.staggerAxis === "y") {
+    const shifted = isStaggeredIndex(y, map);
+    candidates = shifted
+      ? [
+          { x, y: y - 1 },
+          { x: x + 1, y: y - 1 },
+          { x, y: y + 1 },
+          { x: x + 1, y: y + 1 },
+        ]
+      : [
+          { x: x - 1, y: y - 1 },
+          { x, y: y - 1 },
+          { x: x - 1, y: y + 1 },
+          { x, y: y + 1 },
+        ];
+  } else if (isStaggeredMap(map)) {
+    const shifted = isStaggeredIndex(x, map);
+    candidates = shifted
+      ? [
+          { x: x - 1, y },
+          { x: x - 1, y: y + 1 },
+          { x: x + 1, y },
+          { x: x + 1, y: y + 1 },
+        ]
+      : [
+          { x: x - 1, y: y - 1 },
+          { x: x - 1, y },
+          { x: x + 1, y: y - 1 },
+          { x: x + 1, y },
+        ];
   } else if (map.staggerAxis === "y") {
     const shifted = isStaggeredIndex(y, map);
     candidates = shifted
diff --git a/src/lib/project.ts b/src/lib/project.ts
index e9157e0..094a7b3 100644
--- a/src/lib/project.ts
+++ b/src/lib/project.ts
@@ -31,7 +31,7 @@ export function normalizeTileset(
 export function normalizeTileMap(map: TileMapData): TileMapData {
   map.orientation = map.orientation ?? "orthogonal";
 
-  if (map.orientation === "hexagonal") {
+  if (map.orientation === "hexagonal" || map.orientation === "staggered") {
     map.staggerAxis = map.staggerAxis ?? DEFAULT_HEX_STAGGER_AXIS;
     map.staggerIndex = map.staggerIndex ?? DEFAULT_HEX_STAGGER_INDEX;
   } else {
diff --git a/src/types/map-geometry.ts b/src/types/map-geometry.ts
index 69bb1e6..0388963 100644
--- a/src/types/map-geometry.ts
+++ b/src/types/map-geometry.ts
@@ -1,10 +1,12 @@
-export const MAP_ORIENTATIONS = ["orthogonal", "hexagonal"] as const;
+export const MAP_ORIENTATIONS = ["orthogonal", "hexagonal", "staggered"] as const;
 export type MapOrientation = (typeof MAP_ORIENTATIONS)[number];
 
 export const NEW_MAP_TYPES = [
   "orthogonal",
   "hexagonal-row",
   "hexagonal-column",
+  "isometric-row",
+  "isometric-column",
 ] as const;
 export type NewMapType = (typeof NEW_MAP_TYPES)[number];
 

From 059249657bb682d3388944887639d031c817d6e7 Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 13:33:39 +0200
Subject: [PATCH 07/12] style: format MAP_ORIENTATIONS for improved readability

---
 src/types/map-geometry.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/types/map-geometry.ts b/src/types/map-geometry.ts
index 0388963..cce3e16 100644
--- a/src/types/map-geometry.ts
+++ b/src/types/map-geometry.ts
@@ -1,4 +1,8 @@
-export const MAP_ORIENTATIONS = ["orthogonal", "hexagonal", "staggered"] as const;
+export const MAP_ORIENTATIONS = [
+  "orthogonal",
+  "hexagonal",
+  "staggered",
+] as const;
 export type MapOrientation = (typeof MAP_ORIENTATIONS)[number];
 
 export const NEW_MAP_TYPES = [

From 699d40a52bd6fa123466fb946aaaebfffa4d1103 Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 16:04:55 +0200
Subject: [PATCH 08/12] feat: implement import/export functionality with dialog
 and related actions

Co-authored-by: Copilot <copilot@github.com>
---
 TODO.txt                                      |   7 +-
 src/components/app/AppShell.tsx               | 118 +++++-
 src/components/dialogs/ImportExportDialog.tsx | 364 ++++++++++++++++++
 src/components/dialogs/ProjectDialog.tsx      |  77 +---
 src/components/layout/Toolbar.tsx             |  73 +---
 src/lib/project-session.ts                    |  87 +++++
 src/types/components.ts                       |   8 +-
 src/types/dialogs.ts                          |  13 +
 src/types/import-export.ts                    |  16 +
 src/types/index.ts                            |   1 +
 10 files changed, 616 insertions(+), 148 deletions(-)
 create mode 100644 src/components/dialogs/ImportExportDialog.tsx
 create mode 100644 src/lib/project-session.ts
 create mode 100644 src/types/import-export.ts

diff --git a/TODO.txt b/TODO.txt
index 9873543..3d1c095 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,6 +1,9 @@
 Import Options
-
 Export Options
+  - Show a map selection
+
+Allow quick export bottom right
+Dragging a supported tileset/map into the canvas should automatically load it.
 
 AI Asset Generation:
   AI Generation not working currently
@@ -15,8 +18,8 @@ Update README.md
 Ad Marketplace for selling/buying tilesets etc.
 
 Exploration:
-  Universal lpc spritesheet generator
   Ogmo Editor
+  Universal lpc spritesheet generator
   LDTK
   Pixelorama
   PixiEditor
diff --git a/src/components/app/AppShell.tsx b/src/components/app/AppShell.tsx
index a9445c8..60b1265 100644
--- a/src/components/app/AppShell.tsx
+++ b/src/components/app/AppShell.tsx
@@ -22,6 +22,7 @@ import { useEditorStore } from "@/hooks/use-editor-store";
 import {
   exportProject,
   exportMap,
+  importProject,
   importMap,
   exportTileset,
   importTileset,
@@ -39,6 +40,7 @@ import {
 import { findLastLayerId, getAllGroupIds, getAllLayerIds } from "@/lib/layers";
 import { clearTileEditorContext } from "@/lib/tile-editor-context";
 import { getActiveTilesetTileSize } from "@/lib/project";
+import { openProjectInEditor } from "@/lib/project-session";
 import {
   cloneImportedTileset,
   clonePropertyValues,
@@ -60,6 +62,7 @@ import type {
 } from "@/types";
 import type { EditorWorkspaceTab } from "@/types/editor-layout";
 import type { AppShellProps } from "@/types/app";
+import type { ImportExportDialogMode } from "@/types/import-export";
 import { markEditorSaved } from "@/lib/store";
 
 const SettingsDialog = lazy(() =>
@@ -92,6 +95,11 @@ const BugReportDialog = lazy(() =>
     default: module.BugReportDialog,
   })),
 );
+const ImportExportDialog = lazy(() =>
+  import("@/components/dialogs/ImportExportDialog").then((module) => ({
+    default: module.ImportExportDialog,
+  })),
+);
 const ToolDrawer = lazy(() =>
   import("@/components/tools/ToolDrawer").then((module) => ({
     default: module.ToolDrawer,
@@ -129,6 +137,9 @@ export function AppShell({
   const [workspaceOpen, setWorkspaceOpen] = useState(false);
   const [workspaceTab, setWorkspaceTab] =
     useState<EditorWorkspaceTab>("layers");
+  const [importExportDialogOpen, setImportExportDialogOpen] = useState(false);
+  const [importExportDialogMode, setImportExportDialogMode] =
+    useState<ImportExportDialogMode>("import");
 
   const activeLayerKind =
     state.project !== null &&
@@ -200,10 +211,40 @@ export function AppShell({
     downloadFile(data, `${state.project.name}.2dp`);
   }, [state.project]);
 
+  const handleImportProject = useCallback(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".2dp";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const raw = await readFileAsUint8Array(file);
+        const project = await importProject(raw);
+        await saveProject(project);
+        openProjectInEditor(project);
+      } catch (error) {
+        console.error("[Import Project] Failed:", error);
+        alert("Failed to import project. The file may be corrupted.");
+      }
+    };
+    input.click();
+  }, []);
+
   const handleNewProject = useCallback(() => {
     setProjectDialogOpen(true);
   }, [setProjectDialogOpen]);
 
+  const handleOpenImportDialog = useCallback(() => {
+    setImportExportDialogMode("import");
+    setImportExportDialogOpen(true);
+  }, []);
+
+  const handleOpenExportDialog = useCallback(() => {
+    setImportExportDialogMode("export");
+    setImportExportDialogOpen(true);
+  }, []);
+
   const handleExportMap = useCallback(async () => {
     if (!state.project || !state.activeMapId) return;
     const map = state.project.maps.find(
@@ -565,12 +606,8 @@ export function AppShell({
             void saveProject({ ...project, updatedAt: Date.now() });
           }
         }}
-        onImportProject={() => setProjectDialogOpen(true)}
-        onImportMap={handleImportMap}
-        onImportTileset={handleImportTileset}
-        onExportProject={handleExportProject}
-        onExportMap={handleExportMap}
-        onExportTileset={handleExportTileset}
+        onOpenImportDialog={handleOpenImportDialog}
+        onOpenExportDialog={handleOpenExportDialog}
         onOpenSettings={() => setSettingsOpen(true)}
         onAbout={() => setAboutOpen(true)}
         onKeyboardShortcuts={() => setShortcutsOpen(true)}
@@ -660,6 +697,75 @@ export function AppShell({
           />
         </Suspense>
       )}
+      {importExportDialogOpen && (
+        <Suspense>
+          <ImportExportDialog
+            open={importExportDialogOpen}
+            onOpenChange={setImportExportDialogOpen}
+            mode={importExportDialogMode}
+            projectAction={{
+              enabled:
+                importExportDialogMode === "import"
+                  ? true
+                  : Boolean(state.project),
+              onSelect:
+                importExportDialogMode === "import"
+                  ? handleImportProject
+                  : () => {
+                      void handleExportProject();
+                    },
+              disabledReason:
+                importExportDialogMode === "export" && !state.project
+                  ? "Open a project first"
+                  : undefined,
+            }}
+            mapAction={{
+              enabled:
+                importExportDialogMode === "import"
+                  ? Boolean(state.project)
+                  : Boolean(state.project && state.activeMapId),
+              onSelect:
+                importExportDialogMode === "import"
+                  ? handleImportMap
+                  : () => {
+                      void handleExportMap();
+                    },
+              disabledReason:
+                importExportDialogMode === "import"
+                  ? state.project
+                    ? undefined
+                    : "Open a project first"
+                  : state.project
+                    ? state.activeMapId
+                      ? undefined
+                      : "Open a map first"
+                    : "Open a project first",
+            }}
+            tilesetAction={{
+              enabled:
+                importExportDialogMode === "import"
+                  ? Boolean(state.project)
+                  : Boolean(state.project && state.activeTilesetId),
+              onSelect:
+                importExportDialogMode === "import"
+                  ? handleImportTileset
+                  : () => {
+                      void handleExportTileset();
+                    },
+              disabledReason:
+                importExportDialogMode === "import"
+                  ? state.project
+                    ? undefined
+                    : "Open a project first"
+                  : state.project
+                    ? state.activeTilesetId
+                      ? undefined
+                      : "Open a tileset first"
+                    : "Open a project first",
+            }}
+          />
+        </Suspense>
+      )}
       <Suspense>
         <ToolDrawer
           activeTool={activeTool}
diff --git a/src/components/dialogs/ImportExportDialog.tsx b/src/components/dialogs/ImportExportDialog.tsx
new file mode 100644
index 0000000..290487d
--- /dev/null
+++ b/src/components/dialogs/ImportExportDialog.tsx
@@ -0,0 +1,364 @@
+import { useState } from "react";
+import { Download, Upload } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/Dialog";
+import { ScrollArea } from "@/components/ui/ScrollArea";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
+import { cn } from "@/lib/utils";
+import type {
+  ImportExportAssetType,
+  ImportExportDialogMode,
+  ImportExportOptionAction,
+  ImportExportOptionDefinition,
+} from "@/types";
+import type { ImportExportDialogProps } from "@/types/dialogs";
+
+const optionDefinitions: ImportExportOptionDefinition[] = [
+  {
+    assetType: "project",
+    label: "2D Tiler Project (.2dp)",
+    description: "Import or export Native 2D Tiler project files.",
+    supportedNow: true,
+  },
+  {
+    assetType: "project",
+    label: "Tiled Project (.tiled-project)",
+    description: "Tiled multi-map project container.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "2D Tiler Map (.2dm)",
+    description: "Import or export Native 2D Tiler map files.",
+    supportedNow: true,
+  },
+  {
+    assetType: "map",
+    label: "Image: PNG/JPG/WebP",
+    description: "Raster image export and import targets.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Tiled XML Map File (.tmx, .xml)",
+    description: "Tiled XML tile map format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Tiled JSON Map File (.tmj, .json)",
+    description: "Tiled JSON tile map format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Tiled JavaScript Map File (.js)",
+    description: "Tiled JavaScript export format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Tiled Lua File (.lua)",
+    description: "Tiled Lua export format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Tiled CSV File (.csv)",
+    description: "Tiled CSV tile layer format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Godot 4 Scene File (.tscn)",
+    description: "Godot 4 scene export target.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Unity",
+    description: "Unity map export target.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "GameMaker room File (.room.gmx)",
+    description: "GameMaker room file target.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "GameMaker Studio 2 file (.yy)",
+    description: "GameMaker Studio 2 room data.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Defold Tile Map (.tilemap)",
+    description: "Defold tile map resource.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Defold Collection (.collection)",
+    description: "Defold collection scene target.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "tIDE Map Format (.tide)",
+    description: "tIDE map export format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "tBIN Map Format (.tbin)",
+    description: "tIDE binary map export format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "map",
+    label: "Mappy FMP (.fmp)",
+    description: "Mappy FMP export format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "2D Tiler Tileset (.2dt)",
+    description: "Import or export native 2D Tiler tileset files.",
+    supportedNow: true,
+  },
+  {
+    assetType: "tileset",
+    label: "Image: PNG/JPG/WebP",
+    description: "Raster image tileset target.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "Tiled XML Tileset File (.tsx, .xml)",
+    description: "Tiled XML tileset format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "Tiled JSON Tileset File (.tsj, .json)",
+    description: "Tiled JSON tileset format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "Tiled Lua File (.lua)",
+    description: "Tiled Lua tileset format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "Unity (.asset)",
+    description: "Unity tileset asset target.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "Godot (.tres)",
+    description: "Godot tileset resource format.",
+    supportedNow: false,
+  },
+  {
+    assetType: "tileset",
+    label: "RPG Maker",
+    description: "RPG Maker tileset target.",
+    supportedNow: false,
+  },
+];
+
+const assetTabs: ImportExportAssetType[] = ["project", "map", "tileset"];
+
+function getActionForAssetType(
+  assetType: ImportExportAssetType,
+  actions: Pick<
+    ImportExportDialogProps,
+    "projectAction" | "mapAction" | "tilesetAction"
+  >,
+): ImportExportOptionAction {
+  if (assetType === "project") return actions.projectAction;
+  if (assetType === "map") return actions.mapAction;
+  return actions.tilesetAction;
+}
+
+function getModeCopy(mode: ImportExportDialogMode) {
+  if (mode === "import") {
+    return {
+      title: "Import assets",
+      icon: Upload,
+    };
+  }
+
+  return {
+    title: "Export assets",
+    icon: Download,
+  };
+}
+
+export function ImportExportDialog({
+  open,
+  onOpenChange,
+  mode,
+  projectAction,
+  mapAction,
+  tilesetAction,
+}: ImportExportDialogProps) {
+  const [activeTab, setActiveTab] = useState<ImportExportAssetType>("project");
+  const modeCopy = getModeCopy(mode);
+  const ModeIcon = modeCopy.icon;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-h-[calc(100vh-2.5rem)] grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-0 overflow-hidden p-0 sm:max-w-3xl"
+        showCloseButton
+      >
+        <DialogHeader className="gap-3 border-b border-border bg-linear-to-r from-secondary/70 via-background to-background px-6 py-5 pr-14">
+          <div className="flex items-start gap-3">
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-2xl border border-border-visible bg-background/80 text-foreground shadow-sm">
+              <ModeIcon className="size-4" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+                {mode === "import" ? "File intake" : "File delivery"}
+              </div>
+              <DialogTitle>{modeCopy.title}</DialogTitle>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) =>
+            setActiveTab(value as ImportExportAssetType)
+          }
+          className="min-h-0 flex-1 overflow-hidden"
+        >
+          <div className="border-b border-border bg-background px-6 pt-4">
+            <TabsList variant="line" className="w-full justify-start">
+              {assetTabs.map((assetType) => (
+                <TabsTrigger
+                  key={assetType}
+                  value={assetType}
+                  className="capitalize"
+                >
+                  {assetType}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+
+          {assetTabs.map((assetType) => {
+            const assetOptions = optionDefinitions.filter(
+              (option) => option.assetType === assetType,
+            );
+            const action = getActionForAssetType(assetType, {
+              projectAction,
+              mapAction,
+              tilesetAction,
+            });
+
+            return (
+              <TabsContent
+                key={assetType}
+                value={assetType}
+                className="min-h-0 flex-1 overflow-hidden"
+              >
+                <ScrollArea className="h-full min-h-0">
+                  <div className="space-y-3 px-6 py-5">
+                    {assetOptions.map((option) => {
+                      const isEnabled =
+                        option.supportedNow &&
+                        action.enabled &&
+                        Boolean(action.onSelect);
+                      const statusLabel = option.supportedNow
+                        ? isEnabled
+                          ? mode === "import"
+                            ? "Import now"
+                            : "Export now"
+                          : (action.disabledReason ?? "Unavailable")
+                        : "Coming Soon";
+
+                      return (
+                        <button
+                          key={option.label}
+                          type="button"
+                          disabled={!isEnabled}
+                          onClick={() => {
+                            if (!isEnabled) return;
+                            action.onSelect?.();
+                            onOpenChange(false);
+                          }}
+                          aria-label={`${mode === "import" ? "Import" : "Export"} ${option.label}`}
+                          className={cn(
+                            "flex w-full items-start justify-between gap-4 rounded-2xl border px-4 py-4 text-left transition-colors",
+                            isEnabled
+                              ? "border-border-visible bg-background shadow-sm hover:border-primary/50 hover:bg-secondary/60 focus-visible:border-primary focus-visible:outline-none"
+                              : option.supportedNow
+                                ? "cursor-not-allowed border-border/70 bg-muted/20 text-muted-foreground"
+                                : "cursor-not-allowed border-dashed border-border-visible bg-secondary/25 text-muted-foreground",
+                          )}
+                        >
+                          <div className="min-w-0 space-y-1">
+                            <div
+                              className={cn(
+                                "text-sm font-medium",
+                                isEnabled
+                                  ? "text-foreground"
+                                  : "text-muted-foreground",
+                              )}
+                            >
+                              {option.label}
+                            </div>
+                            <p
+                              className={cn(
+                                "text-xs leading-5",
+                                isEnabled
+                                  ? "text-muted-foreground"
+                                  : "text-muted-foreground/80",
+                              )}
+                            >
+                              {option.description}
+                            </p>
+                          </div>
+                          <span
+                            className={cn(
+                              "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.08em]",
+                              isEnabled
+                                ? "border-primary/40 bg-primary/10 text-foreground"
+                                : option.supportedNow
+                                  ? "border-border-visible bg-background/80 text-muted-foreground"
+                                  : "border-border-visible bg-background/80 text-muted-foreground",
+                            )}
+                          >
+                            {statusLabel}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </ScrollArea>
+              </TabsContent>
+            );
+          })}
+        </Tabs>
+
+        <DialogFooter
+          className="border-t border-border px-6 py-4"
+          showCloseButton
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/dialogs/ProjectDialog.tsx b/src/components/dialogs/ProjectDialog.tsx
index 8c1669e..a62b90b 100644
--- a/src/components/dialogs/ProjectDialog.tsx
+++ b/src/components/dialogs/ProjectDialog.tsx
@@ -31,16 +31,8 @@ import {
   deleteProject,
   getProject,
   saveProject,
-  saveProjectPrefs,
-  loadProjectPrefs,
   deleteProjectPrefs,
-  saveLastProjectId,
 } from "@/lib/db";
-import {
-  buildProjectPrefsFromState,
-  hydrateZoomStoreForProject,
-} from "@/lib/project-prefs";
-import { getEditorStore, markEditorSaved } from "@/lib/store";
 import {
   generateProjectId,
   generateTilesetGroupId,
@@ -52,7 +44,7 @@ import {
   readFileAsUint8Array,
   importProject,
 } from "@/lib/format";
-import { getActiveTilesetTileSize } from "@/lib/project";
+import { openProjectInEditor } from "@/lib/project-session";
 import type { Project } from "@/types";
 import type { ProjectDialogProps } from "@/types/dialogs";
 import type { ProjectRecord } from "@/types/persistence";
@@ -127,72 +119,7 @@ export function ProjectDialog({
   }
 
   function openProject(project: Project) {
-    const store = getEditorStore();
-    const currentState = store.getState();
-
-    if (currentState.project) {
-      const currentPrefs = buildProjectPrefsFromState(currentState);
-      if (currentPrefs) {
-        saveProjectPrefs(currentState.project.id, currentPrefs);
-      }
-    }
-
-    const prefs = loadProjectPrefs(project.id);
-
-    store.setState((draft) => {
-      draft.project = project;
-
-      if (prefs) {
-        const tilesetGroupIds = new Set(
-          project.tilesetGroups.map((g) => g.id as string),
-        );
-        const tilesetIds = new Set(project.tilesets.map((t) => t.id as string));
-        const mapGroupIds = new Set(
-          project.mapGroups.map((g) => g.id as string),
-        );
-        const mapIds = new Set(project.maps.map((m) => m.id as string));
-        const layerIds = new Set(project.layers.map((l) => l.id as string));
-
-        draft.activeTilesetGroupId =
-          prefs.activeTilesetGroupId &&
-          tilesetGroupIds.has(prefs.activeTilesetGroupId)
-            ? (prefs.activeTilesetGroupId as typeof draft.activeTilesetGroupId)
-            : (project.tilesetGroups[0]?.id ?? null);
-        draft.activeTilesetId =
-          prefs.activeTilesetId && tilesetIds.has(prefs.activeTilesetId)
-            ? (prefs.activeTilesetId as typeof draft.activeTilesetId)
-            : null;
-        draft.activeMapGroupId =
-          prefs.activeMapGroupId && mapGroupIds.has(prefs.activeMapGroupId)
-            ? (prefs.activeMapGroupId as typeof draft.activeMapGroupId)
-            : (project.mapGroups[0]?.id ?? null);
-        draft.activeMapId =
-          prefs.activeMapId && mapIds.has(prefs.activeMapId)
-            ? (prefs.activeMapId as typeof draft.activeMapId)
-            : null;
-        draft.activeLayerId =
-          prefs.activeLayerId && layerIds.has(prefs.activeLayerId)
-            ? (prefs.activeLayerId as typeof draft.activeLayerId)
-            : null;
-      } else {
-        draft.activeTilesetGroupId = project.tilesetGroups[0]?.id ?? null;
-        draft.activeMapGroupId = project.mapGroups[0]?.id ?? null;
-        draft.activeTilesetId = null;
-        draft.activeMapId = null;
-        draft.activeLayerId = null;
-      }
-
-      draft.tileSize = getActiveTilesetTileSize(project, draft.activeTilesetId);
-    });
-    markEditorSaved();
-    const nextState = store.getState();
-    hydrateZoomStoreForProject(
-      project,
-      prefs,
-      nextState.activeMapId,
-      nextState.activeTilesetId,
-    );
-    saveLastProjectId(project.id);
+    openProjectInEditor(project);
     onOpenChange(false);
     onProjectLoaded();
   }
diff --git a/src/components/layout/Toolbar.tsx b/src/components/layout/Toolbar.tsx
index 6ea6004..2c8713d 100644
--- a/src/components/layout/Toolbar.tsx
+++ b/src/components/layout/Toolbar.tsx
@@ -8,9 +8,6 @@ import {
   MenubarMenu,
   MenubarSeparator,
   MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
   MenubarTrigger,
 } from "@/components/ui/Menubar";
 import { cn } from "@/lib/utils";
@@ -22,12 +19,8 @@ import type { ToolbarProps } from "@/types";
 export const Toolbar = memo(function Toolbar({
   onNewProject,
   onSaveProject,
-  onImportProject,
-  onImportMap,
-  onImportTileset,
-  onExportProject,
-  onExportMap,
-  onExportTileset,
+  onOpenImportDialog,
+  onOpenExportDialog,
   onOpenSettings,
   onAbout,
   onKeyboardShortcuts,
@@ -75,56 +68,18 @@ export const Toolbar = memo(function Toolbar({
               <MenubarShortcut>⌘S</MenubarShortcut>
             </MenubarItem>
             <MenubarSeparator />
-            <MenubarSub>
-              <MenubarSubTrigger className="cursor-pointer">
-                Import
-              </MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem
-                  onMouseDown={onImportProject}
-                  className="cursor-pointer"
-                >
-                  2d Tiler Project (.2dp)
-                </MenubarItem>
-                <MenubarItem
-                  onMouseDown={onImportMap}
-                  className="cursor-pointer"
-                >
-                  Map
-                </MenubarItem>
-                <MenubarItem
-                  onMouseDown={onImportTileset}
-                  className="cursor-pointer"
-                >
-                  Tileset
-                </MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarSub>
-              <MenubarSubTrigger className="cursor-pointer">
-                Export
-              </MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem
-                  onMouseDown={onExportProject}
-                  className="cursor-pointer"
-                >
-                  2d Tiler Project (.2dp)
-                </MenubarItem>
-                <MenubarItem
-                  onMouseDown={onExportMap}
-                  className="cursor-pointer"
-                >
-                  Map
-                </MenubarItem>
-                <MenubarItem
-                  onMouseDown={onExportTileset}
-                  className="cursor-pointer"
-                >
-                  Tileset
-                </MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
+            <MenubarItem
+              onMouseDown={onOpenImportDialog}
+              className="cursor-pointer"
+            >
+              Import
+            </MenubarItem>
+            <MenubarItem
+              onMouseDown={onOpenExportDialog}
+              className="cursor-pointer"
+            >
+              Export
+            </MenubarItem>
             <MenubarSeparator />
             <MenubarItem
               onMouseDown={onOpenSettings}
diff --git a/src/lib/project-session.ts b/src/lib/project-session.ts
new file mode 100644
index 0000000..be35537
--- /dev/null
+++ b/src/lib/project-session.ts
@@ -0,0 +1,87 @@
+import {
+  loadProjectPrefs,
+  saveLastProjectId,
+  saveProjectPrefs,
+} from "@/lib/db";
+import {
+  buildProjectPrefsFromState,
+  hydrateZoomStoreForProject,
+} from "@/lib/project-prefs";
+import { getActiveTilesetTileSize } from "@/lib/project";
+import { getEditorStore, markEditorSaved } from "@/lib/store";
+import type { Project } from "@/types";
+
+export function openProjectInEditor(project: Project) {
+  const store = getEditorStore();
+  const currentState = store.getState();
+
+  if (currentState.project) {
+    const currentPrefs = buildProjectPrefsFromState(currentState);
+    if (currentPrefs) {
+      saveProjectPrefs(currentState.project.id, currentPrefs);
+    }
+  }
+
+  const prefs = loadProjectPrefs(project.id);
+
+  store.setState((draft) => {
+    draft.project = project;
+
+    if (prefs) {
+      const tilesetGroupIds = new Set(
+        project.tilesetGroups.map((group) => group.id as string),
+      );
+      const tilesetIds = new Set(
+        project.tilesets.map((tileset) => tileset.id as string),
+      );
+      const mapGroupIds = new Set(
+        project.mapGroups.map((group) => group.id as string),
+      );
+      const mapIds = new Set(project.maps.map((map) => map.id as string));
+      const layerIds = new Set(
+        project.layers.map((layer) => layer.id as string),
+      );
+
+      draft.activeTilesetGroupId =
+        prefs.activeTilesetGroupId &&
+        tilesetGroupIds.has(prefs.activeTilesetGroupId)
+          ? (prefs.activeTilesetGroupId as typeof draft.activeTilesetGroupId)
+          : (project.tilesetGroups[0]?.id ?? null);
+      draft.activeTilesetId =
+        prefs.activeTilesetId && tilesetIds.has(prefs.activeTilesetId)
+          ? (prefs.activeTilesetId as typeof draft.activeTilesetId)
+          : null;
+      draft.activeMapGroupId =
+        prefs.activeMapGroupId && mapGroupIds.has(prefs.activeMapGroupId)
+          ? (prefs.activeMapGroupId as typeof draft.activeMapGroupId)
+          : (project.mapGroups[0]?.id ?? null);
+      draft.activeMapId =
+        prefs.activeMapId && mapIds.has(prefs.activeMapId)
+          ? (prefs.activeMapId as typeof draft.activeMapId)
+          : null;
+      draft.activeLayerId =
+        prefs.activeLayerId && layerIds.has(prefs.activeLayerId)
+          ? (prefs.activeLayerId as typeof draft.activeLayerId)
+          : null;
+    } else {
+      draft.activeTilesetGroupId = project.tilesetGroups[0]?.id ?? null;
+      draft.activeMapGroupId = project.mapGroups[0]?.id ?? null;
+      draft.activeTilesetId = null;
+      draft.activeMapId = null;
+      draft.activeLayerId = null;
+    }
+
+    draft.tileSize = getActiveTilesetTileSize(project, draft.activeTilesetId);
+  });
+
+  markEditorSaved();
+
+  const nextState = store.getState();
+  hydrateZoomStoreForProject(
+    project,
+    prefs,
+    nextState.activeMapId,
+    nextState.activeTilesetId,
+  );
+  saveLastProjectId(project.id);
+}
diff --git a/src/types/components.ts b/src/types/components.ts
index 266aebc..8a04758 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -131,12 +131,8 @@ export type ToolName = "image-editor" | "ai-assets";
 export interface ToolbarProps {
   onNewProject: () => void;
   onSaveProject: () => void;
-  onImportProject: () => void;
-  onImportMap: () => void;
-  onImportTileset: () => void;
-  onExportProject: () => void;
-  onExportMap: () => void;
-  onExportTileset: () => void;
+  onOpenImportDialog: () => void;
+  onOpenExportDialog: () => void;
   onOpenSettings: () => void;
   onAbout: () => void;
   onKeyboardShortcuts: () => void;
diff --git a/src/types/dialogs.ts b/src/types/dialogs.ts
index 38ab23b..751fc45 100644
--- a/src/types/dialogs.ts
+++ b/src/types/dialogs.ts
@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
 import type { ToolName } from "./components";
+import type {
+  ImportExportDialogMode,
+  ImportExportOptionAction,
+} from "./import-export";
 import type { NewMapType } from "./map-geometry";
 import type {
   MapObject,
@@ -38,6 +42,15 @@ export interface KeyboardShortcutsDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
+export interface ImportExportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  mode: ImportExportDialogMode;
+  projectAction: ImportExportOptionAction;
+  mapAction: ImportExportOptionAction;
+  tilesetAction: ImportExportOptionAction;
+}
+
 export type AddLayerDialogLayerType = "tile" | "group" | "image" | "object";
 
 export interface AddLayerDialogLayerTypeOption {
diff --git a/src/types/import-export.ts b/src/types/import-export.ts
new file mode 100644
index 0000000..aa882a4
--- /dev/null
+++ b/src/types/import-export.ts
@@ -0,0 +1,16 @@
+export type ImportExportDialogMode = "import" | "export";
+
+export type ImportExportAssetType = "project" | "map" | "tileset";
+
+export interface ImportExportOptionAction {
+  enabled: boolean;
+  onSelect?: () => void;
+  disabledReason?: string;
+}
+
+export interface ImportExportOptionDefinition {
+  assetType: ImportExportAssetType;
+  label: string;
+  description: string;
+  supportedNow: boolean;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 49e3e94..fdca040 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -3,6 +3,7 @@ export * from "./map-geometry";
 export * from "./image-editor";
 export * from "./components";
 export * from "./dialogs";
+export * from "./import-export";
 export * from "./editor-layout";
 export * from "./map-canvas";
 export * from "./image-editor-ui";

From 2901d536ddb5cc396cf77d3423b8a1c08e74fdcd Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 16:36:57 +0200
Subject: [PATCH 09/12] feat: enhance import/export functionality with improved
 UI and support for multiple asset types

Co-authored-by: Copilot <copilot@github.com>
---
 TODO.txt                                      |  12 +-
 components.json                               |   5 +-
 src/components/app/AppShell.tsx               | 335 +++++++++++++--
 src/components/dialogs/BugReportDialog.tsx    |  10 +-
 src/components/dialogs/ImportExportDialog.tsx | 389 +++++++++++++++++-
 src/components/layout/Toolbar.tsx             |   2 +-
 src/lib/format.ts                             |  38 +-
 src/types/import-export.ts                    | 103 +++++
 8 files changed, 831 insertions(+), 63 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index 3d1c095..6807960 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,9 +1,14 @@
-Import Options
+Export should potentially handle thousands of maps
 Export Options
   - Show a map selection
+  - Do the rest of the options
+Import Options
+  - Should show which group to import to (if more than one)
+  - Do the rest of the options
 
 Allow quick export bottom right
-Dragging a supported tileset/map into the canvas should automatically load it.
+Upgrade to Vite8
+
 
 AI Asset Generation:
   AI Generation not working currently
@@ -17,6 +22,9 @@ AI Asset Generation:
 Update README.md
 Ad Marketplace for selling/buying tilesets etc.
 
+Add Tileset/Add Map buttons or dragging and dropping should support all formats
+Add link to github top right
+
 Exploration:
   Ogmo Editor
   Universal lpc spritesheet generator
diff --git a/components.json b/components.json
index 2dad51b..233815e 100644
--- a/components.json
+++ b/components.json
@@ -17,8 +17,5 @@
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
-  },
-  "registries": {
-    "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/app/AppShell.tsx b/src/components/app/AppShell.tsx
index 60b1265..1d58f09 100644
--- a/src/components/app/AppShell.tsx
+++ b/src/components/app/AppShell.tsx
@@ -20,6 +20,9 @@ import {
 } from "@/components/editor/Layout/EditorLayouts";
 import { useEditorStore } from "@/hooks/use-editor-store";
 import {
+  buildDownloadFilename,
+  createZipArchive,
+  sanitizeDownloadSegment,
   exportProject,
   exportMap,
   importProject,
@@ -49,14 +52,20 @@ import {
 } from "@/lib/project-import";
 import type {
   ImageLayer,
+  ImportExportArchiveEntry,
+  ImportExportAssetGroup,
   LayerGroup,
   LayerGroupId,
   LayerId,
+  MapId,
   MapGroupId,
   MapObject,
   ObjectId,
   ObjectLayer,
+  Project,
   TileLayer,
+  TileMapData,
+  Tileset,
   TilesetGroupId,
   TilesetId,
 } from "@/types";
@@ -114,6 +123,139 @@ const emptyProjectMessage = (
 
 const NARROW_LAYOUT_BREAKPOINT = 768;
 
+function getMapExportData(project: Project, map: TileMapData) {
+  const projectLayerGroups = project.layerGroups ?? [];
+  const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
+  const allGroupIds = getAllGroupIds(map.layerOrder, projectLayerGroups);
+  const layerIdSet = new Set<string>(allLayerIds as string[]);
+  const groupIdSet = new Set<string>(allGroupIds as string[]);
+
+  return {
+    layers: project.layers.filter((layer) => layerIdSet.has(layer.id as string)),
+    imageLayers: (project.imageLayers ?? []).filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    ),
+    layerGroups: projectLayerGroups.filter((group) =>
+      groupIdSet.has(group.id as string),
+    ),
+    objectLayers: (project.objectLayers ?? []).filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    ),
+  };
+}
+
+function getReferencedThumbnailTilesets(
+  projectTilesets: Tileset[],
+  layers: TileLayer[],
+) {
+  const referencedTilesetIds = new Set<TilesetId>();
+
+  for (const layer of layers) {
+    for (const ref of Object.values(layer.tiles)) {
+      referencedTilesetIds.add(ref.tilesetId);
+    }
+  }
+
+  return projectTilesets
+    .filter((tileset) => referencedTilesetIds.has(tileset.id))
+    .map((tileset) => ({
+      id: tileset.id,
+      assetId: tileset.assetId,
+    }));
+}
+
+function buildMapExportGroups(project: Project): ImportExportAssetGroup[] {
+  const projectTilesets = [
+    ...project.tilesets,
+    ...(project.overrideTilesets ?? []),
+  ];
+
+  return [...project.mapGroups]
+    .sort((left, right) => left.order - right.order)
+    .map((group) => ({
+      id: group.id,
+      name: group.name,
+      assets: project.maps
+        .filter((map) => map.groupId === group.id)
+        .map((map) => {
+          const mapExportData = getMapExportData(project, map);
+
+          return {
+            id: map.id,
+            name: map.name,
+            groupId: group.id,
+            groupName: group.name,
+            subtitle: `${map.widthInTiles} × ${map.heightInTiles} tiles`,
+            thumbnail: {
+              kind: "map" as const,
+              orientation: map.orientation,
+              staggerAxis: map.staggerAxis,
+              staggerIndex: map.staggerIndex,
+              tileSize: map.tileSize,
+              widthInTiles: map.widthInTiles,
+              heightInTiles: map.heightInTiles,
+              layers: mapExportData.layers.map((layer) => ({
+                id: layer.id,
+                visible: layer.visible,
+                tiles: layer.tiles,
+              })),
+              tilesets: getReferencedThumbnailTilesets(
+                projectTilesets,
+                mapExportData.layers,
+              ),
+            },
+          };
+        }),
+    }))
+    .filter((group) => group.assets.length > 0);
+}
+
+function buildTilesetExportGroups(project: Project): ImportExportAssetGroup[] {
+  return [...project.tilesetGroups]
+    .sort((left, right) => left.order - right.order)
+    .map((group) => ({
+      id: group.id,
+      name: group.name,
+      assets: project.tilesets
+        .filter((tileset) => tileset.groupId === group.id)
+        .map((tileset) => ({
+          id: tileset.id,
+          name: tileset.name,
+          groupId: group.id,
+          groupName: group.name,
+          subtitle: `${tileset.imageWidth} × ${tileset.imageHeight} px`,
+          thumbnail: {
+            kind: "tileset" as const,
+            assetId: tileset.assetId,
+            tileSize: tileset.tileSize,
+            imageWidth: tileset.imageWidth,
+            imageHeight: tileset.imageHeight,
+          },
+        })),
+    }))
+    .filter((group) => group.assets.length > 0);
+}
+
+function getUniqueArchivePath(path: string, usedPaths: Set<string>): string {
+  if (!usedPaths.has(path)) {
+    usedPaths.add(path);
+    return path;
+  }
+
+  const extensionIndex = path.lastIndexOf(".");
+  const baseName = extensionIndex >= 0 ? path.slice(0, extensionIndex) : path;
+  const extension = extensionIndex >= 0 ? path.slice(extensionIndex) : "";
+  let suffix = 2;
+
+  while (usedPaths.has(`${baseName} (${suffix})${extension}`)) {
+    suffix += 1;
+  }
+
+  const nextPath = `${baseName} (${suffix})${extension}`;
+  usedPaths.add(nextPath);
+  return nextPath;
+}
+
 export function AppShell({
   settingsOpen,
   setSettingsOpen,
@@ -245,41 +387,75 @@ export function AppShell({
     setImportExportDialogOpen(true);
   }, []);
 
+  const handleExportMaps = useCallback(
+    async (selectedMapIds: string[]) => {
+      if (!state.project || selectedMapIds.length === 0) return;
+
+      const selectedIdSet = new Set(selectedMapIds as MapId[]);
+      const selectedMaps = state.project.maps.filter((map) =>
+        selectedIdSet.has(map.id),
+      );
+      if (selectedMaps.length === 0) return;
+
+      if (selectedMaps.length === 1) {
+        const map = selectedMaps[0];
+        const mapExportData = getMapExportData(state.project, map);
+        const data = await exportMap(
+          map,
+          mapExportData.layers,
+          state.project.tilesets,
+          state.project.overrideTilesets ?? [],
+          mapExportData.imageLayers,
+          mapExportData.layerGroups,
+          mapExportData.objectLayers,
+          state.project.objects ?? [],
+        );
+        downloadFile(data, buildDownloadFilename(map.name, ".2dm"));
+        return;
+      }
+
+      const groupNames = new Map(
+        state.project.mapGroups.map((group) => [group.id, group.name]),
+      );
+      const usedPaths = new Set<string>();
+      const entries: ImportExportArchiveEntry[] = [];
+
+      for (const map of selectedMaps) {
+        const mapExportData = getMapExportData(state.project, map);
+        const data = await exportMap(
+          map,
+          mapExportData.layers,
+          state.project.tilesets,
+          state.project.overrideTilesets ?? [],
+          mapExportData.imageLayers,
+          mapExportData.layerGroups,
+          mapExportData.objectLayers,
+          state.project.objects ?? [],
+        );
+        const folderName = sanitizeDownloadSegment(
+          groupNames.get(map.groupId) ?? "Ungrouped",
+          "Ungrouped",
+        );
+        const fileName = buildDownloadFilename(map.name, ".2dm");
+        entries.push({
+          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
+          data,
+        });
+      }
+
+      const archive = createZipArchive(entries);
+      downloadFile(
+        archive,
+        buildDownloadFilename(`${state.project.name} maps`, ".zip"),
+      );
+    },
+    [state.project],
+  );
+
   const handleExportMap = useCallback(async () => {
-    if (!state.project || !state.activeMapId) return;
-    const map = state.project.maps.find(
-      (entry) => entry.id === state.activeMapId,
-    );
-    if (!map) return;
-    const projectLayerGroups = state.project.layerGroups ?? [];
-    const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
-    const allGroupIds = getAllGroupIds(map.layerOrder, projectLayerGroups);
-    const layerIdSet = new Set<string>(allLayerIds as string[]);
-    const groupIdSet = new Set<string>(allGroupIds as string[]);
-    const layers = state.project.layers.filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    );
-    const imageLayers = (state.project.imageLayers ?? []).filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    );
-    const layerGroups = projectLayerGroups.filter((group) =>
-      groupIdSet.has(group.id as string),
-    );
-    const objectLayers = (state.project.objectLayers ?? []).filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    );
-    const data = await exportMap(
-      map,
-      layers,
-      state.project.tilesets,
-      state.project.overrideTilesets ?? [],
-      imageLayers,
-      layerGroups,
-      objectLayers,
-      state.project.objects ?? [],
-    );
-    downloadFile(data, `${map.name}.2dm`);
-  }, [state.project, state.activeMapId]);
+    if (!state.activeMapId) return;
+    await handleExportMaps([state.activeMapId]);
+  }, [handleExportMaps, state.activeMapId]);
 
   const handleImportMap = useCallback(() => {
     if (!state.project) return;
@@ -483,15 +659,64 @@ export function AppShell({
     setState,
   ]);
 
+  const handleExportTilesets = useCallback(
+    async (selectedTilesetIds: string[]) => {
+      if (!state.project || selectedTilesetIds.length === 0) return;
+
+      const selectedIdSet = new Set(selectedTilesetIds as TilesetId[]);
+      const selectedTilesets = state.project.tilesets.filter((tileset) =>
+        selectedIdSet.has(tileset.id),
+      );
+      if (selectedTilesets.length === 0) return;
+
+      if (selectedTilesets.length === 1) {
+        const tileset = selectedTilesets[0];
+        const data = await exportTileset(tileset);
+        downloadFile(data, buildDownloadFilename(tileset.name, ".2dt"));
+        return;
+      }
+
+      const groupNames = new Map(
+        state.project.tilesetGroups.map((group) => [group.id, group.name]),
+      );
+      const usedPaths = new Set<string>();
+      const entries: ImportExportArchiveEntry[] = [];
+
+      for (const tileset of selectedTilesets) {
+        const data = await exportTileset(tileset);
+        const folderName = sanitizeDownloadSegment(
+          groupNames.get(tileset.groupId) ?? "Ungrouped",
+          "Ungrouped",
+        );
+        const fileName = buildDownloadFilename(tileset.name, ".2dt");
+        entries.push({
+          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
+          data,
+        });
+      }
+
+      const archive = createZipArchive(entries);
+      downloadFile(
+        archive,
+        buildDownloadFilename(`${state.project.name} tilesets`, ".zip"),
+      );
+    },
+    [state.project],
+  );
+
   const handleExportTileset = useCallback(async () => {
-    if (!state.project || !state.activeTilesetId) return;
-    const tileset = state.project.tilesets.find(
-      (entry) => entry.id === state.activeTilesetId,
-    );
-    if (!tileset) return;
-    const data = await exportTileset(tileset);
-    downloadFile(data, `${tileset.name}.2dt`);
-  }, [state.project, state.activeTilesetId]);
+    if (!state.activeTilesetId) return;
+    await handleExportTilesets([state.activeTilesetId]);
+  }, [handleExportTilesets, state.activeTilesetId]);
+
+  const mapExportGroups =
+    importExportDialogOpen && state.project
+      ? buildMapExportGroups(state.project)
+      : [];
+  const tilesetExportGroups =
+    importExportDialogOpen && state.project
+      ? buildTilesetExportGroups(state.project)
+      : [];
 
   const handleImportTileset = useCallback(() => {
     if (!state.project) return;
@@ -730,6 +955,19 @@ export function AppShell({
                   : () => {
                       void handleExportMap();
                     },
+              exportSelection:
+                importExportDialogMode === "export" && state.project
+                  ? {
+                      groups: mapExportGroups,
+                      initialSelectedIds: state.activeMapId
+                        ? [state.activeMapId]
+                        : [],
+                      helperText:
+                        "Choose one or more maps. Multiple selections are exported as a zip grouped by map group.",
+                      emptyLabel: "This project has no maps to export yet.",
+                      onSubmit: (selectedIds) => handleExportMaps(selectedIds),
+                    }
+                  : undefined,
               disabledReason:
                 importExportDialogMode === "import"
                   ? state.project
@@ -752,6 +990,19 @@ export function AppShell({
                   : () => {
                       void handleExportTileset();
                     },
+              exportSelection:
+                importExportDialogMode === "export" && state.project
+                  ? {
+                      groups: tilesetExportGroups,
+                      initialSelectedIds: state.activeTilesetId
+                        ? [state.activeTilesetId]
+                        : [],
+                      helperText:
+                        "Choose one or more tilesets. Multiple selections are exported as a zip grouped by tileset group.",
+                      emptyLabel: "This project has no tilesets to export yet.",
+                      onSubmit: (selectedIds) => handleExportTilesets(selectedIds),
+                    }
+                  : undefined,
               disabledReason:
                 importExportDialogMode === "import"
                   ? state.project
diff --git a/src/components/dialogs/BugReportDialog.tsx b/src/components/dialogs/BugReportDialog.tsx
index f6d113b..d8419cd 100644
--- a/src/components/dialogs/BugReportDialog.tsx
+++ b/src/components/dialogs/BugReportDialog.tsx
@@ -52,18 +52,19 @@ export function BugReportDialog({ open, onOpenChange }: BugReportDialogProps) {
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle className="text-primary">
-            Submit a Bug Report
+            Submit a Bug or Feature Request
           </DialogTitle>
           <DialogDescription>
-            Describe the issue you encountered and we'll look into it.
+            Describe the issue you encountered or the feature you would like to
+            see, and we'll look into it.
           </DialogDescription>
         </DialogHeader>
 
         {submitted ? (
           <div className="space-y-4 py-2">
             <p className="text-sm text-muted-foreground">
-              Thank you! Your bug report has been submitted. We'll investigate
-              the issue.
+              Thank you! Your bug or feature request has been submitted. We'll
+              investigate the issue.
             </p>
             <Button
               variant="outline"
@@ -95,7 +96,6 @@ export function BugReportDialog({ open, onOpenChange }: BugReportDialogProps) {
               <textarea
                 id="bug-description"
                 className="flex min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                placeholder="What happened? What did you expect to happen?"
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
                 required
diff --git a/src/components/dialogs/ImportExportDialog.tsx b/src/components/dialogs/ImportExportDialog.tsx
index 290487d..4b0b097 100644
--- a/src/components/dialogs/ImportExportDialog.tsx
+++ b/src/components/dialogs/ImportExportDialog.tsx
@@ -1,9 +1,11 @@
-import { useState } from "react";
-import { Download, Upload } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Check, Download, Upload } from "lucide-react";
+import { drawTileWithOrientation } from "@/components/editor/MapCanvas/texture-cache";
+import { getAssetUrl } from "@/lib/db";
+import { getMapCellBounds, getMapPixelSize } from "@/lib/map-geometry";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -12,10 +14,15 @@ import { ScrollArea } from "@/components/ui/ScrollArea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
 import { cn } from "@/lib/utils";
 import type {
+  ImportExportAssetCardProps,
+  ImportExportAssetPickerProps,
   ImportExportAssetType,
   ImportExportDialogMode,
+  ImportExportMapThumbnailProps,
   ImportExportOptionAction,
   ImportExportOptionDefinition,
+  ImportExportSelectableAssetId,
+  ImportExportTilesetThumbnailProps,
 } from "@/types";
 import type { ImportExportDialogProps } from "@/types/dialogs";
 
@@ -206,6 +213,293 @@ function getModeCopy(mode: ImportExportDialogMode) {
   };
 }
 
+function getInitialSelectedIds(action: ImportExportOptionAction) {
+  return action.exportSelection?.initialSelectedIds ?? [];
+}
+
+function createSelectedIdsState(
+  actions: Pick<ImportExportDialogProps, "mapAction" | "tilesetAction">,
+) {
+  return {
+    project: [] as ImportExportSelectableAssetId[],
+    map: getInitialSelectedIds(actions.mapAction),
+    tileset: getInitialSelectedIds(actions.tilesetAction),
+  };
+}
+
+function getAvailableSelectionIds(action: ImportExportOptionAction) {
+  return new Set(
+    (action.exportSelection?.groups ?? []).flatMap((group) =>
+      group.assets.map((asset) => asset.id),
+    ),
+  );
+}
+
+function syncSelectedIds(
+  action: ImportExportOptionAction,
+  selectedIds: ImportExportSelectableAssetId[],
+) {
+  const availableIds = getAvailableSelectionIds(action);
+  return selectedIds.filter((selectedId) => availableIds.has(selectedId));
+}
+
+function MapThumbnail({ thumbnail, alt }: ImportExportMapThumbnailProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const size = 68;
+    const padding = 6;
+    const context = canvas.getContext("2d");
+    if (!context) return;
+    const drawingContext = context;
+
+    canvas.width = size;
+    canvas.height = size;
+    drawingContext.clearRect(0, 0, size, size);
+    drawingContext.fillStyle = "#10131a";
+    drawingContext.fillRect(0, 0, size, size);
+    drawingContext.fillStyle = "#17202b";
+    for (let y = 0; y < size; y += 8) {
+      for (let x = 0; x < size; x += 8) {
+        if ((x / 8 + y / 8) % 2 === 0) {
+          drawingContext.fillRect(x, y, 8, 8);
+        }
+      }
+    }
+
+    let cancelled = false;
+
+    async function drawPreview() {
+      const loadedImages = new Map<string, HTMLImageElement>();
+
+      for (const tileset of thumbnail.tilesets) {
+        const url = await getAssetUrl(tileset.assetId);
+        if (!url || cancelled) continue;
+
+        try {
+          const image = new Image();
+          image.src = url;
+          await image.decode();
+          if (!cancelled) {
+            loadedImages.set(tileset.id, image);
+          }
+        } catch {
+          // Ignore missing or invalid preview sources.
+        } finally {
+          URL.revokeObjectURL(url);
+        }
+      }
+
+      if (cancelled) return;
+
+      const mapPixelSize = getMapPixelSize(thumbnail, 1);
+      const scale = Math.min(
+        (size - padding * 2) / Math.max(mapPixelSize.width, 1),
+        (size - padding * 2) / Math.max(mapPixelSize.height, 1),
+      );
+      const renderScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+      const offsetX = (size - mapPixelSize.width * renderScale) / 2;
+      const offsetY = (size - mapPixelSize.height * renderScale) / 2;
+
+      for (const layer of thumbnail.layers) {
+        if (!layer.visible) continue;
+
+        for (const [position, ref] of Object.entries(layer.tiles)) {
+          const [x, y] = position.split(",").map((value) => Number(value));
+          if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+
+          const image = loadedImages.get(ref.tilesetId);
+          if (!image) continue;
+
+          const bounds = getMapCellBounds(thumbnail, 1, x, y);
+          drawTileWithOrientation(
+            drawingContext,
+            image,
+            ref,
+            offsetX + bounds.x * renderScale,
+            offsetY + bounds.y * renderScale,
+            thumbnail.tileSize * renderScale,
+          );
+        }
+      }
+
+      drawingContext.strokeStyle = "rgba(255,255,255,0.08)";
+      drawingContext.strokeRect(0.5, 0.5, size - 1, size - 1);
+    }
+
+    void drawPreview();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [thumbnail]);
+
+  return (
+    <div
+      role="img"
+      aria-label={alt}
+      className="flex size-17 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border-visible bg-background shadow-sm"
+    >
+      <canvas ref={canvasRef} width={68} height={68} className="size-17" />
+    </div>
+  );
+}
+
+function TilesetThumbnail({
+  thumbnail,
+  alt,
+}: ImportExportTilesetThumbnailProps) {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let objectUrl: string | null = null;
+
+    async function loadPreview() {
+      const url = await getAssetUrl(thumbnail.assetId);
+      if (cancelled || !url) return;
+
+      objectUrl = url;
+      setImageUrl(url);
+    }
+
+    void loadPreview();
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [thumbnail.assetId]);
+
+  return (
+    <div className="relative flex size-17 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border-visible bg-[#10131a] shadow-sm">
+      <div className="absolute inset-0 bg-[linear-gradient(45deg,#17202b_25%,transparent_25%,transparent_75%,#17202b_75%,#17202b),linear-gradient(45deg,#17202b_25%,transparent_25%,transparent_75%,#17202b_75%,#17202b)] bg-size-[16px_16px] bg-position-[0_0,8px_8px] opacity-70" />
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt={alt}
+          className="relative z-10 max-h-full max-w-full object-contain p-1"
+        />
+      ) : (
+        <div className="relative z-10 text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+          Preview
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ExportAssetCard({
+  asset,
+  selected,
+  onToggle,
+}: ImportExportAssetCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => onToggle(asset.id)}
+      aria-pressed={selected}
+      aria-label={`${selected ? "Deselect" : "Select"} ${asset.name}`}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition-colors focus-visible:outline-none",
+        selected
+          ? "border-primary bg-primary/8 shadow-sm focus-visible:border-primary"
+          : "border-border-visible bg-background hover:border-primary/40 hover:bg-secondary/40 focus-visible:border-primary",
+      )}
+    >
+      {asset.thumbnail.kind === "map" ? (
+        <MapThumbnail thumbnail={asset.thumbnail} alt={`${asset.name} preview`} />
+      ) : (
+        <TilesetThumbnail
+          thumbnail={asset.thumbnail}
+          alt={`${asset.name} preview`}
+        />
+      )}
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex items-start justify-between gap-3">
+          <div className="truncate text-sm font-medium text-foreground">
+            {asset.name}
+          </div>
+          <span
+            className={cn(
+              "inline-flex size-5 shrink-0 items-center justify-center rounded-full border",
+              selected
+                ? "border-primary bg-primary text-primary-foreground"
+                : "border-border-visible bg-background text-transparent",
+            )}
+          >
+            <Check className="size-3" />
+          </span>
+        </div>
+        <p className="text-xs leading-5 text-muted-foreground">
+          {asset.subtitle}
+        </p>
+      </div>
+    </button>
+  );
+}
+
+function ExportAssetPicker({
+  assetType,
+  selection,
+  selectedIds,
+  onToggleAsset,
+}: ImportExportAssetPickerProps) {
+  return (
+    <section className="space-y-4 rounded-2xl border border-border-visible bg-secondary/30 px-4 py-4">
+      <div className="space-y-1">
+        <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+          {assetType === "map" ? "Map selection" : "Tileset selection"}
+        </div>
+        <p className="text-sm text-foreground">
+          {selection.helperText ?? "Choose which assets to export."}
+        </p>
+        <p className="text-xs text-muted-foreground">
+          {selectedIds.length === 1
+            ? "1 asset selected"
+            : `${selectedIds.length} assets selected`}
+        </p>
+      </div>
+
+      {selection.groups.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-border-visible bg-background/80 px-4 py-6 text-sm text-muted-foreground">
+          {selection.emptyLabel ?? "Nothing is available to export yet."}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {selection.groups.map((group) => (
+            <section key={group.id} className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <h3 className="text-sm font-medium text-foreground">
+                  {group.name}
+                </h3>
+                <span className="text-[10px] font-mono uppercase tracking-[0.14em] text-muted-foreground">
+                  {group.assets.length} assets
+                </span>
+              </div>
+              <div className="grid gap-3 sm:grid-cols-2">
+                {group.assets.map((asset) => (
+                  <ExportAssetCard
+                    key={asset.id}
+                    asset={asset}
+                    selected={selectedIds.includes(asset.id)}
+                    onToggle={onToggleAsset}
+                  />
+                ))}
+              </div>
+            </section>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
 export function ImportExportDialog({
   open,
   onOpenChange,
@@ -215,9 +509,65 @@ export function ImportExportDialog({
   tilesetAction,
 }: ImportExportDialogProps) {
   const [activeTab, setActiveTab] = useState<ImportExportAssetType>("project");
+  const [selectedIdsByAssetType, setSelectedIdsByAssetType] = useState(() =>
+    createSelectedIdsState({ mapAction, tilesetAction }),
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const modeCopy = getModeCopy(mode);
   const ModeIcon = modeCopy.icon;
 
+  useEffect(() => {
+    if (!open || mode !== "export") return;
+
+    setSelectedIdsByAssetType({
+      project: [],
+      map: syncSelectedIds(mapAction, getInitialSelectedIds(mapAction)),
+      tileset: syncSelectedIds(
+        tilesetAction,
+        getInitialSelectedIds(tilesetAction),
+      ),
+    });
+  }, [mode, open, mapAction, tilesetAction]);
+
+  async function handleActionSelect(
+    action: ImportExportOptionAction,
+    selectedIds: ImportExportSelectableAssetId[],
+  ) {
+    setIsSubmitting(true);
+
+    try {
+      if (mode === "export" && action.exportSelection) {
+        await action.exportSelection.onSubmit(selectedIds);
+      } else {
+        await action.onSelect?.();
+      }
+
+      onOpenChange(false);
+    } catch (error) {
+      console.error("[ImportExportDialog] Action failed:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  function handleToggleAsset(
+    assetType: ImportExportAssetType,
+    assetId: ImportExportSelectableAssetId,
+  ) {
+    setSelectedIdsByAssetType((currentState) => {
+      const nextSelectedIds = currentState[assetType].includes(assetId)
+        ? currentState[assetType].filter(
+            (currentAssetId) => currentAssetId !== assetId,
+          )
+        : [...currentState[assetType], assetId];
+
+      return {
+        ...currentState,
+        [assetType]: nextSelectedIds,
+      };
+    });
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
@@ -268,6 +618,9 @@ export function ImportExportDialog({
               mapAction,
               tilesetAction,
             });
+            const exportSelection =
+              mode === "export" ? action.exportSelection : undefined;
+            const selectedIds = selectedIdsByAssetType[assetType] ?? [];
 
             return (
               <TabsContent
@@ -277,17 +630,38 @@ export function ImportExportDialog({
               >
                 <ScrollArea className="h-full min-h-0">
                   <div className="space-y-3 px-6 py-5">
+                    {exportSelection ? (
+                      <ExportAssetPicker
+                        assetType={assetType}
+                        selection={exportSelection}
+                        selectedIds={selectedIds}
+                        onToggleAsset={(assetId) =>
+                          handleToggleAsset(assetType, assetId)
+                        }
+                      />
+                    ) : null}
+
                     {assetOptions.map((option) => {
+                      const hasSelection =
+                        exportSelection === undefined || selectedIds.length > 0;
                       const isEnabled =
                         option.supportedNow &&
                         action.enabled &&
-                        Boolean(action.onSelect);
+                        Boolean(
+                          exportSelection ? exportSelection.onSubmit : action.onSelect,
+                        ) &&
+                        hasSelection &&
+                        !isSubmitting;
                       const statusLabel = option.supportedNow
                         ? isEnabled
                           ? mode === "import"
                             ? "Import now"
-                            : "Export now"
-                          : (action.disabledReason ?? "Unavailable")
+                            : exportSelection && selectedIds.length > 1
+                              ? `${selectedIds.length} selected`
+                              : "Export now"
+                          : exportSelection && !hasSelection
+                            ? "Select at least one"
+                            : (action.disabledReason ?? "Unavailable")
                         : "Coming Soon";
 
                       return (
@@ -297,8 +671,7 @@ export function ImportExportDialog({
                           disabled={!isEnabled}
                           onClick={() => {
                             if (!isEnabled) return;
-                            action.onSelect?.();
-                            onOpenChange(false);
+                            void handleActionSelect(action, selectedIds);
                           }}
                           aria-label={`${mode === "import" ? "Import" : "Export"} ${option.label}`}
                           className={cn(
diff --git a/src/components/layout/Toolbar.tsx b/src/components/layout/Toolbar.tsx
index 2c8713d..18312c3 100644
--- a/src/components/layout/Toolbar.tsx
+++ b/src/components/layout/Toolbar.tsx
@@ -162,7 +162,7 @@ export const Toolbar = memo(function Toolbar({
             </MenubarItem>
             <MenubarSeparator />
             <MenubarItem onMouseDown={onSubmitBug} className="cursor-pointer">
-              Submit Bug
+              Submit Bug/Feature
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
diff --git a/src/lib/format.ts b/src/lib/format.ts
index bb45221..a72283e 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -13,10 +13,11 @@
  */
 
 import { encode, decode } from "@msgpack/msgpack";
-import { zlibSync, unzlibSync } from "fflate";
+import { zlibSync, unzlibSync, zipSync } from "fflate";
 import type {
   Project,
   AssetId,
+  ImportExportArchiveEntry,
   TileMapData,
   TileLayer,
   Tileset,
@@ -99,6 +100,41 @@ function decompressPack<T>(data: Uint8Array): T {
   return decode(decompressed) as unknown as T;
 }
 
+export function sanitizeDownloadSegment(
+  value: string,
+  fallback = "untitled",
+): string {
+  const normalized = value
+    .trim()
+    .replace(/[<>:"/\\|?*]/g, "-")
+    .split("")
+    .filter((character) => {
+      const charCode = character.charCodeAt(0);
+      return charCode >= 32;
+    })
+    .join("")
+    .replace(/\s+/g, " ")
+    .replace(/^[. ]+|[. ]+$/g, "");
+
+  return normalized.length > 0 ? normalized : fallback;
+}
+
+export function buildDownloadFilename(baseName: string, extension: string): string {
+  return `${sanitizeDownloadSegment(baseName)}${extension}`;
+}
+
+export function createZipArchive(
+  entries: ImportExportArchiveEntry[],
+): Uint8Array {
+  const archiveEntries: Record<string, Uint8Array> = {};
+
+  for (const entry of entries) {
+    archiveEntries[entry.path.replace(/\\/g, "/")] = entry.data;
+  }
+
+  return zipSync(archiveEntries, { level: 6 });
+}
+
 // ---------------------------------------------------------------------------
 // Project (.2dp)
 // ---------------------------------------------------------------------------
diff --git a/src/types/import-export.ts b/src/types/import-export.ts
index aa882a4..da7b883 100644
--- a/src/types/import-export.ts
+++ b/src/types/import-export.ts
@@ -1,11 +1,114 @@
+import type {
+  AssetId,
+  TileLayer,
+  TileSize,
+  TilesetId,
+} from "./schema";
+import type {
+  MapOrientation,
+  MapStaggerAxis,
+  MapStaggerIndex,
+} from "./map-geometry";
+
 export type ImportExportDialogMode = "import" | "export";
 
 export type ImportExportAssetType = "project" | "map" | "tileset";
 
+export type ImportExportSelectableAssetId = string;
+
+export interface ImportExportMapThumbnailTileset {
+  id: TilesetId;
+  assetId: AssetId;
+}
+
+export interface ImportExportMapThumbnailLayer {
+  id: string;
+  visible: boolean;
+  tiles: TileLayer["tiles"];
+}
+
+export interface ImportExportMapThumbnail {
+  kind: "map";
+  orientation: MapOrientation;
+  staggerAxis?: MapStaggerAxis;
+  staggerIndex?: MapStaggerIndex;
+  tileSize: TileSize;
+  widthInTiles: number;
+  heightInTiles: number;
+  layers: ImportExportMapThumbnailLayer[];
+  tilesets: ImportExportMapThumbnailTileset[];
+}
+
+export interface ImportExportTilesetThumbnail {
+  kind: "tileset";
+  assetId: AssetId;
+  tileSize: TileSize;
+  imageWidth: number;
+  imageHeight: number;
+}
+
+export type ImportExportAssetThumbnail =
+  | ImportExportMapThumbnail
+  | ImportExportTilesetThumbnail;
+
+export interface ImportExportSelectableAsset {
+  id: ImportExportSelectableAssetId;
+  name: string;
+  groupId: string;
+  groupName: string;
+  subtitle: string;
+  thumbnail: ImportExportAssetThumbnail;
+}
+
+export interface ImportExportAssetGroup {
+  id: string;
+  name: string;
+  assets: ImportExportSelectableAsset[];
+}
+
+export interface ImportExportSelectionConfig {
+  groups: ImportExportAssetGroup[];
+  initialSelectedIds: ImportExportSelectableAssetId[];
+  emptyLabel?: string;
+  helperText?: string;
+  onSubmit: (
+    selectedIds: ImportExportSelectableAssetId[],
+  ) => void | Promise<void>;
+}
+
+export interface ImportExportArchiveEntry {
+  path: string;
+  data: Uint8Array;
+}
+
+export interface ImportExportAssetPickerProps {
+  assetType: ImportExportAssetType;
+  selection: ImportExportSelectionConfig;
+  selectedIds: ImportExportSelectableAssetId[];
+  onToggleAsset: (assetId: ImportExportSelectableAssetId) => void;
+}
+
+export interface ImportExportAssetCardProps {
+  asset: ImportExportSelectableAsset;
+  selected: boolean;
+  onToggle: (assetId: ImportExportSelectableAssetId) => void;
+}
+
+export interface ImportExportMapThumbnailProps {
+  thumbnail: ImportExportMapThumbnail;
+  alt: string;
+}
+
+export interface ImportExportTilesetThumbnailProps {
+  thumbnail: ImportExportTilesetThumbnail;
+  alt: string;
+}
+
 export interface ImportExportOptionAction {
   enabled: boolean;
   onSelect?: () => void;
   disabledReason?: string;
+  exportSelection?: ImportExportSelectionConfig;
 }
 
 export interface ImportExportOptionDefinition {

From fd45b2de1b862f235cf836d2331e72543b23e9f3 Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 16:38:00 +0200
Subject: [PATCH 10/12] style: format code for improved readability in various
 components

---
 src/components/app/AppShell.tsx               | 7 +++++--
 src/components/dialogs/ImportExportDialog.tsx | 9 +++++++--
 src/lib/format.ts                             | 5 ++++-
 src/types/import-export.ts                    | 7 +------
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/app/AppShell.tsx b/src/components/app/AppShell.tsx
index 1d58f09..7959614 100644
--- a/src/components/app/AppShell.tsx
+++ b/src/components/app/AppShell.tsx
@@ -131,7 +131,9 @@ function getMapExportData(project: Project, map: TileMapData) {
   const groupIdSet = new Set<string>(allGroupIds as string[]);
 
   return {
-    layers: project.layers.filter((layer) => layerIdSet.has(layer.id as string)),
+    layers: project.layers.filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    ),
     imageLayers: (project.imageLayers ?? []).filter((layer) =>
       layerIdSet.has(layer.id as string),
     ),
@@ -1000,7 +1002,8 @@ export function AppShell({
                       helperText:
                         "Choose one or more tilesets. Multiple selections are exported as a zip grouped by tileset group.",
                       emptyLabel: "This project has no tilesets to export yet.",
-                      onSubmit: (selectedIds) => handleExportTilesets(selectedIds),
+                      onSubmit: (selectedIds) =>
+                        handleExportTilesets(selectedIds),
                     }
                   : undefined,
               disabledReason:
diff --git a/src/components/dialogs/ImportExportDialog.tsx b/src/components/dialogs/ImportExportDialog.tsx
index 4b0b097..7768a54 100644
--- a/src/components/dialogs/ImportExportDialog.tsx
+++ b/src/components/dialogs/ImportExportDialog.tsx
@@ -413,7 +413,10 @@ function ExportAssetCard({
       )}
     >
       {asset.thumbnail.kind === "map" ? (
-        <MapThumbnail thumbnail={asset.thumbnail} alt={`${asset.name} preview`} />
+        <MapThumbnail
+          thumbnail={asset.thumbnail}
+          alt={`${asset.name} preview`}
+        />
       ) : (
         <TilesetThumbnail
           thumbnail={asset.thumbnail}
@@ -648,7 +651,9 @@ export function ImportExportDialog({
                         option.supportedNow &&
                         action.enabled &&
                         Boolean(
-                          exportSelection ? exportSelection.onSubmit : action.onSelect,
+                          exportSelection
+                            ? exportSelection.onSubmit
+                            : action.onSelect,
                         ) &&
                         hasSelection &&
                         !isSubmitting;
diff --git a/src/lib/format.ts b/src/lib/format.ts
index a72283e..ce4f745 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -119,7 +119,10 @@ export function sanitizeDownloadSegment(
   return normalized.length > 0 ? normalized : fallback;
 }
 
-export function buildDownloadFilename(baseName: string, extension: string): string {
+export function buildDownloadFilename(
+  baseName: string,
+  extension: string,
+): string {
   return `${sanitizeDownloadSegment(baseName)}${extension}`;
 }
 
diff --git a/src/types/import-export.ts b/src/types/import-export.ts
index da7b883..2712306 100644
--- a/src/types/import-export.ts
+++ b/src/types/import-export.ts
@@ -1,9 +1,4 @@
-import type {
-  AssetId,
-  TileLayer,
-  TileSize,
-  TilesetId,
-} from "./schema";
+import type { AssetId, TileLayer, TileSize, TilesetId } from "./schema";
 import type {
   MapOrientation,
   MapStaggerAxis,

From 6ad799cce4323935269e7a0b987aeb87e7ac6c8e Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 20:11:14 +0200
Subject: [PATCH 11/12] feat: enhance import/export dialog with asset selection
 and search functionality

Co-authored-by: Copilot <copilot@github.com>
---
 TODO.txt                                      |   3 +-
 build_output.txt                              | 219 ---------------
 src/components/dialogs/ImportExportDialog.tsx | 256 +++++++++++++++++-
 src/types/import-export.ts                    |   6 +
 4 files changed, 256 insertions(+), 228 deletions(-)
 delete mode 100644 build_output.txt

diff --git a/TODO.txt b/TODO.txt
index 6807960..3fc073a 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,6 +1,4 @@
-Export should potentially handle thousands of maps
 Export Options
-  - Show a map selection
   - Do the rest of the options
 Import Options
   - Should show which group to import to (if more than one)
@@ -46,6 +44,7 @@ Exploration:
   Keep Notes
 
 Text Layer custom fonts not working
+Custom Animations i.e. water moving
 
 Allow palette importing from Lospec: https://api.2dtiler.com/lospec_palettes
   - https://lospec.com/palette-list/load?colorNumberFilterType=any&page=0&tag=&sortingType=newest
diff --git a/build_output.txt b/build_output.txt
deleted file mode 100644
index d03107f..0000000
--- a/build_output.txt
+++ /dev/null
@@ -1,219 +0,0 @@
-$ tsc -b && vite build
-src/components/app/AppShell.tsx(454,41): error TS18047: 'state.project' is possibly 'null'.
-src/components/app/AppShell.tsx(457,24): error TS18047: 'state.project' is possibly 'null'.
-src/lib/image-editor-tools.ts(8,15): error TS2300: Duplicate identifier 'Color'.
-src/lib/image-editor-tools.ts(8,22): error TS2300: Duplicate identifier 'ImageEditorTool'.
-src/lib/image-editor-tools.ts(9,15): error TS2300: Duplicate identifier 'StrokeState'.
-src/lib/image-editor-tools.ts(9,28): error TS2300: Duplicate identifier 'ToolContext'.
-src/lib/image-editor-tools.ts(11,3): error TS2440: Import declaration conflicts with local declaration of 'bresenhamLine'.
-src/lib/image-editor-tools.ts(12,3): error TS2440: Import declaration conflicts with local declaration of 'drawBrush'.
-src/lib/image-editor-tools.ts(13,3): error TS2440: Import declaration conflicts with local declaration of 'getPixel'.
-src/lib/image-editor-tools.ts(14,3): error TS2440: Import declaration conflicts with local declaration of 'setPixel'.
-src/lib/image-editor-tools.ts(17,3): error TS2440: Import declaration conflicts with local declaration of 'commitFloatingSelection'.
-src/lib/image-editor-tools.ts(18,3): error TS2440: Import declaration conflicts with local declaration of 'copySelectionPixels'.
-src/lib/image-editor-tools.ts(19,3): error TS2440: Import declaration conflicts with local declaration of 'drawFloatingOnOverlay'.
-src/lib/image-editor-tools.ts(20,3): error TS2440: Import declaration conflicts with local declaration of 'getResizeHandleCursor'.
-src/lib/image-editor-tools.ts(21,3): error TS2440: Import declaration conflicts with local declaration of 'getSelectionState'.
-src/lib/image-editor-tools.ts(22,3): error TS2440: Import declaration conflicts with local declaration of 'hitTestResizeHandle'.
-src/lib/image-editor-tools.ts(23,3): error TS2440: Import declaration conflicts with local declaration of 'pasteSelectionPixels'.
-src/lib/image-editor-tools.ts(24,3): error TS2440: Import declaration conflicts with local declaration of 'resetSelectionState'.
-src/lib/image-editor-tools.ts(25,3): error TS2440: Import declaration conflicts with local declaration of 'selectionDown'.
-src/lib/image-editor-tools.ts(26,3): error TS2440: Import declaration conflicts with local declaration of 'selectionMove'.
-src/lib/image-editor-tools.ts(27,3): error TS2440: Import declaration conflicts with local declaration of 'selectionUp'.
-src/lib/image-editor-tools.ts(30,3): error TS2440: Import declaration conflicts with local declaration of 'cropDown'.
-src/lib/image-editor-tools.ts(31,3): error TS2440: Import declaration conflicts with local declaration of 'cropMove'.
-src/lib/image-editor-tools.ts(32,3): error TS2440: Import declaration conflicts with local declaration of 'cropUp'.
-src/lib/image-editor-tools.ts(33,3): error TS2440: Import declaration conflicts with local declaration of 'getCropState'.
-src/lib/image-editor-tools.ts(34,3): error TS2440: Import declaration conflicts with local declaration of 'hitTestCropHandle'.
-src/lib/image-editor-tools.ts(35,3): error TS2440: Import declaration conflicts with local declaration of 'resetCropState'.
-src/lib/image-editor-tools.ts(38,3): error TS2440: Import declaration conflicts with local declaration of 'contourDown'.
-src/lib/image-editor-tools.ts(39,3): error TS2440: Import declaration conflicts with local declaration of 'contourMove'.
-src/lib/image-editor-tools.ts(40,3): error TS2440: Import declaration conflicts with local declaration of 'contourUp'.
-src/lib/image-editor-tools.ts(41,3): error TS2440: Import declaration conflicts with local declaration of 'lineDown'.
-src/lib/image-editor-tools.ts(42,3): error TS2440: Import declaration conflicts with local declaration of 'lineMove'.
-src/lib/image-editor-tools.ts(43,3): error TS2440: Import declaration conflicts with local declaration of 'lineUp'.
-src/lib/image-editor-tools.ts(44,3): error TS2440: Import declaration conflicts with local declaration of 'rectangleDown'.
-src/lib/image-editor-tools.ts(45,3): error TS2440: Import declaration conflicts with local declaration of 'rectangleMove'.
-src/lib/image-editor-tools.ts(46,3): error TS2440: Import declaration conflicts with local declaration of 'rectangleUp'.
-src/lib/image-editor-tools.ts(50,3): error TS2323: Cannot redeclare exported variable 'bresenhamLine'.
-src/lib/image-editor-tools.ts(50,3): error TS2484: Export declaration conflicts with exported declaration of 'bresenhamLine'.
-src/lib/image-editor-tools.ts(51,3): error TS2323: Cannot redeclare exported variable 'constrainAngle'.
-src/lib/image-editor-tools.ts(51,3): error TS2484: Export declaration conflicts with exported declaration of 'constrainAngle'.
-src/lib/image-editor-tools.ts(52,3): error TS2323: Cannot redeclare exported variable 'constrainSquare'.
-src/lib/image-editor-tools.ts(52,3): error TS2484: Export declaration conflicts with exported declaration of 'constrainSquare'.
-src/lib/image-editor-tools.ts(53,3): error TS2323: Cannot redeclare exported variable 'createStrokeState'.
-src/lib/image-editor-tools.ts(53,3): error TS2484: Export declaration conflicts with exported declaration of 'createStrokeState'.
-src/lib/image-editor-tools.ts(54,3): error TS2323: Cannot redeclare exported variable 'drawBrush'.
-src/lib/image-editor-tools.ts(54,3): error TS2484: Export declaration conflicts with exported declaration of 'drawBrush'.
-src/lib/image-editor-tools.ts(55,3): error TS2323: Cannot redeclare exported variable 'drawSquareBrush'.
-src/lib/image-editor-tools.ts(55,3): error TS2484: Export declaration conflicts with exported declaration of 'drawSquareBrush'.
-src/lib/image-editor-tools.ts(56,3): error TS2323: Cannot redeclare exported variable 'getPixel'.
-src/lib/image-editor-tools.ts(56,3): error TS2484: Export declaration conflicts with exported declaration of 'getPixel'.
-src/lib/image-editor-tools.ts(57,3): error TS2323: Cannot redeclare exported variable 'setPixel'.
-src/lib/image-editor-tools.ts(57,3): error TS2484: Export declaration conflicts with exported declaration of 'setPixel'.
-src/lib/image-editor-tools.ts(60,3): error TS2323: Cannot redeclare exported variable 'commitFloatingSelection'.
-src/lib/image-editor-tools.ts(60,3): error TS2484: Export declaration conflicts with exported declaration of 'commitFloatingSelection'.
-src/lib/image-editor-tools.ts(61,3): error TS2323: Cannot redeclare exported variable 'copySelectionPixels'.
-src/lib/image-editor-tools.ts(61,3): error TS2484: Export declaration conflicts with exported declaration of 'copySelectionPixels'.
-src/lib/image-editor-tools.ts(62,3): error TS2323: Cannot redeclare exported variable 'drawFloatingOnOverlay'.
-src/lib/image-editor-tools.ts(62,3): error TS2484: Export declaration conflicts with exported declaration of 'drawFloatingOnOverlay'.
-src/lib/image-editor-tools.ts(63,3): error TS2323: Cannot redeclare exported variable 'getResizeHandleCursor'.
-src/lib/image-editor-tools.ts(63,3): error TS2484: Export declaration conflicts with exported declaration of 'getResizeHandleCursor'.
-src/lib/image-editor-tools.ts(64,3): error TS2323: Cannot redeclare exported variable 'getSelectionState'.
-src/lib/image-editor-tools.ts(64,3): error TS2484: Export declaration conflicts with exported declaration of 'getSelectionState'.
-src/lib/image-editor-tools.ts(65,3): error TS2323: Cannot redeclare exported variable 'hitTestResizeHandle'.
-src/lib/image-editor-tools.ts(65,3): error TS2484: Export declaration conflicts with exported declaration of 'hitTestResizeHandle'.
-src/lib/image-editor-tools.ts(66,3): error TS2323: Cannot redeclare exported variable 'pasteSelectionPixels'.
-src/lib/image-editor-tools.ts(66,3): error TS2484: Export declaration conflicts with exported declaration of 'pasteSelectionPixels'.
-src/lib/image-editor-tools.ts(67,3): error TS2323: Cannot redeclare exported variable 'resetSelectionState'.
-src/lib/image-editor-tools.ts(67,3): error TS2484: Export declaration conflicts with exported declaration of 'resetSelectionState'.
-src/lib/image-editor-tools.ts(68,3): error TS2323: Cannot redeclare exported variable 'selectionDown'.
-src/lib/image-editor-tools.ts(68,3): error TS2484: Export declaration conflicts with exported declaration of 'selectionDown'.
-src/lib/image-editor-tools.ts(69,3): error TS2323: Cannot redeclare exported variable 'selectionMove'.
-src/lib/image-editor-tools.ts(69,3): error TS2484: Export declaration conflicts with exported declaration of 'selectionMove'.
-src/lib/image-editor-tools.ts(70,3): error TS2323: Cannot redeclare exported variable 'selectionUp'.
-src/lib/image-editor-tools.ts(70,3): error TS2484: Export declaration conflicts with exported declaration of 'selectionUp'.
-src/lib/image-editor-tools.ts(73,3): error TS2323: Cannot redeclare exported variable 'cropDown'.
-src/lib/image-editor-tools.ts(73,3): error TS2484: Export declaration conflicts with exported declaration of 'cropDown'.
-src/lib/image-editor-tools.ts(74,3): error TS2323: Cannot redeclare exported variable 'cropMove'.
-src/lib/image-editor-tools.ts(74,3): error TS2484: Export declaration conflicts with exported declaration of 'cropMove'.
-src/lib/image-editor-tools.ts(75,3): error TS2323: Cannot redeclare exported variable 'cropUp'.
-src/lib/image-editor-tools.ts(75,3): error TS2484: Export declaration conflicts with exported declaration of 'cropUp'.
-src/lib/image-editor-tools.ts(76,3): error TS2323: Cannot redeclare exported variable 'getCropState'.
-src/lib/image-editor-tools.ts(76,3): error TS2484: Export declaration conflicts with exported declaration of 'getCropState'.
-src/lib/image-editor-tools.ts(77,3): error TS2323: Cannot redeclare exported variable 'hitTestCropHandle'.
-src/lib/image-editor-tools.ts(77,3): error TS2484: Export declaration conflicts with exported declaration of 'hitTestCropHandle'.
-src/lib/image-editor-tools.ts(78,3): error TS2323: Cannot redeclare exported variable 'resetCropState'.
-src/lib/image-editor-tools.ts(78,3): error TS2484: Export declaration conflicts with exported declaration of 'resetCropState'.
-src/lib/image-editor-tools.ts(81,3): error TS2323: Cannot redeclare exported variable 'contourDown'.
-src/lib/image-editor-tools.ts(81,3): error TS2484: Export declaration conflicts with exported declaration of 'contourDown'.
-src/lib/image-editor-tools.ts(82,3): error TS2323: Cannot redeclare exported variable 'contourMove'.
-src/lib/image-editor-tools.ts(82,3): error TS2484: Export declaration conflicts with exported declaration of 'contourMove'.
-src/lib/image-editor-tools.ts(83,3): error TS2323: Cannot redeclare exported variable 'contourUp'.
-src/lib/image-editor-tools.ts(83,3): error TS2484: Export declaration conflicts with exported declaration of 'contourUp'.
-src/lib/image-editor-tools.ts(84,3): error TS2323: Cannot redeclare exported variable 'lineDown'.
-src/lib/image-editor-tools.ts(84,3): error TS2484: Export declaration conflicts with exported declaration of 'lineDown'.
-src/lib/image-editor-tools.ts(85,3): error TS2323: Cannot redeclare exported variable 'lineMove'.
-src/lib/image-editor-tools.ts(85,3): error TS2484: Export declaration conflicts with exported declaration of 'lineMove'.
-src/lib/image-editor-tools.ts(86,3): error TS2323: Cannot redeclare exported variable 'lineUp'.
-src/lib/image-editor-tools.ts(86,3): error TS2484: Export declaration conflicts with exported declaration of 'lineUp'.
-src/lib/image-editor-tools.ts(87,3): error TS2323: Cannot redeclare exported variable 'rectangleDown'.
-src/lib/image-editor-tools.ts(87,3): error TS2484: Export declaration conflicts with exported declaration of 'rectangleDown'.
-src/lib/image-editor-tools.ts(88,3): error TS2323: Cannot redeclare exported variable 'rectangleMove'.
-src/lib/image-editor-tools.ts(88,3): error TS2484: Export declaration conflicts with exported declaration of 'rectangleMove'.
-src/lib/image-editor-tools.ts(89,3): error TS2323: Cannot redeclare exported variable 'rectangleUp'.
-src/lib/image-editor-tools.ts(89,3): error TS2484: Export declaration conflicts with exported declaration of 'rectangleUp'.
-src/lib/image-editor-tools.ts(92,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(108,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(129,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(133,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(166,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(197,17): error TS2323: Cannot redeclare exported variable 'pencilDown'.
-src/lib/image-editor-tools.ts(197,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(213,17): error TS2323: Cannot redeclare exported variable 'pencilMove'.
-src/lib/image-editor-tools.ts(213,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(229,17): error TS2323: Cannot redeclare exported variable 'pencilUp'.
-src/lib/image-editor-tools.ts(229,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(249,17): error TS2323: Cannot redeclare exported variable 'eraserDown'.
-src/lib/image-editor-tools.ts(249,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(264,17): error TS2323: Cannot redeclare exported variable 'eraserMove'.
-src/lib/image-editor-tools.ts(264,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(283,17): error TS2323: Cannot redeclare exported variable 'eraserUp'.
-src/lib/image-editor-tools.ts(283,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(292,17): error TS2323: Cannot redeclare exported variable 'moveDown'.
-src/lib/image-editor-tools.ts(292,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(306,17): error TS2323: Cannot redeclare exported variable 'moveMove'.
-src/lib/image-editor-tools.ts(306,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(323,17): error TS2323: Cannot redeclare exported variable 'moveUp'.
-src/lib/image-editor-tools.ts(323,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(333,17): error TS2323: Cannot redeclare exported variable 'paintBucketDown'.
-src/lib/image-editor-tools.ts(333,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(368,17): error TS2323: Cannot redeclare exported variable 'blurDown'.
-src/lib/image-editor-tools.ts(368,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(380,17): error TS2323: Cannot redeclare exported variable 'blurMove'.
-src/lib/image-editor-tools.ts(380,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(397,17): error TS2323: Cannot redeclare exported variable 'blurUp'.
-src/lib/image-editor-tools.ts(397,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(406,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(458,17): error TS2323: Cannot redeclare exported variable 'dispatchDown'.
-src/lib/image-editor-tools.ts(458,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(499,17): error TS2323: Cannot redeclare exported variable 'dispatchMove'.
-src/lib/image-editor-tools.ts(499,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(537,17): error TS2323: Cannot redeclare exported variable 'dispatchUp'.
-src/lib/image-editor-tools.ts(537,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(584,15): error TS2300: Duplicate identifier 'Color'.
-src/lib/image-editor-tools.ts(584,22): error TS2300: Duplicate identifier 'ImageEditorTool'.
-src/lib/image-editor-tools.ts(588,3): error TS2300: Duplicate identifier 'StrokeState'.
-src/lib/image-editor-tools.ts(589,3): error TS2300: Duplicate identifier 'ToolContext'.
-src/lib/image-editor-tools.ts(597,17): error TS2323: Cannot redeclare exported variable 'bresenhamLine'.
-src/lib/image-editor-tools.ts(630,17): error TS2323: Cannot redeclare exported variable 'setPixel'.
-src/lib/image-editor-tools.ts(682,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(698,17): error TS2323: Cannot redeclare exported variable 'getPixel'.
-src/lib/image-editor-tools.ts(713,17): error TS2323: Cannot redeclare exported variable 'drawBrush'.
-src/lib/image-editor-tools.ts(743,17): error TS2323: Cannot redeclare exported variable 'drawSquareBrush'.
-src/lib/image-editor-tools.ts(765,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(787,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(795,17): error TS2323: Cannot redeclare exported variable 'createStrokeState'.
-src/lib/image-editor-tools.ts(817,17): error TS2323: Cannot redeclare exported variable 'constrainAngle'.
-src/lib/image-editor-tools.ts(842,17): error TS2323: Cannot redeclare exported variable 'constrainSquare'.
-src/lib/image-editor-tools.ts(858,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(889,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(919,17): error TS2323: Cannot redeclare exported variable 'pencilDown'.
-src/lib/image-editor-tools.ts(919,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(935,17): error TS2323: Cannot redeclare exported variable 'pencilMove'.
-src/lib/image-editor-tools.ts(935,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(950,17): error TS2323: Cannot redeclare exported variable 'pencilUp'.
-src/lib/image-editor-tools.ts(950,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(974,17): error TS2323: Cannot redeclare exported variable 'eraserDown'.
-src/lib/image-editor-tools.ts(974,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(988,17): error TS2323: Cannot redeclare exported variable 'eraserMove'.
-src/lib/image-editor-tools.ts(988,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(1005,17): error TS2323: Cannot redeclare exported variable 'eraserUp'.
-src/lib/image-editor-tools.ts(1005,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(1040,17): error TS2323: Cannot redeclare exported variable 'getSelectionState'.
-src/lib/image-editor-tools.ts(1044,17): error TS2323: Cannot redeclare exported variable 'resetSelectionState'.
-src/lib/image-editor-tools.ts(1095,17): error TS2323: Cannot redeclare exported variable 'commitFloatingSelection'.
-src/lib/image-editor-tools.ts(1143,17): error TS2323: Cannot redeclare exported variable 'hitTestResizeHandle'.
-src/lib/image-editor-tools.ts(1172,17): error TS2323: Cannot redeclare exported variable 'getResizeHandleCursor'.
-src/lib/image-editor-tools.ts(1192,17): error TS2323: Cannot redeclare exported variable 'drawFloatingOnOverlay'.
-src/lib/image-editor-tools.ts(1217,17): error TS2323: Cannot redeclare exported variable 'selectionDown'.
-src/lib/image-editor-tools.ts(1273,17): error TS2323: Cannot redeclare exported variable 'selectionMove'.
-src/lib/image-editor-tools.ts(1387,17): error TS2323: Cannot redeclare exported variable 'selectionUp'.
-src/lib/image-editor-tools.ts(1479,17): error TS2323: Cannot redeclare exported variable 'copySelectionPixels'.
-src/lib/image-editor-tools.ts(1493,17): error TS2323: Cannot redeclare exported variable 'pasteSelectionPixels'.
-src/lib/image-editor-tools.ts(1564,17): error TS2323: Cannot redeclare exported variable 'getCropState'.
-src/lib/image-editor-tools.ts(1568,17): error TS2323: Cannot redeclare exported variable 'resetCropState'.
-src/lib/image-editor-tools.ts(1598,17): error TS2323: Cannot redeclare exported variable 'hitTestCropHandle'.
-src/lib/image-editor-tools.ts(1625,17): error TS2323: Cannot redeclare exported variable 'cropDown'.
-src/lib/image-editor-tools.ts(1658,17): error TS2323: Cannot redeclare exported variable 'cropMove'.
-src/lib/image-editor-tools.ts(1735,17): error TS2323: Cannot redeclare exported variable 'cropUp'.
-src/lib/image-editor-tools.ts(1765,17): error TS2323: Cannot redeclare exported variable 'moveDown'.
-src/lib/image-editor-tools.ts(1765,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(1779,17): error TS2323: Cannot redeclare exported variable 'moveMove'.
-src/lib/image-editor-tools.ts(1779,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(1796,17): error TS2323: Cannot redeclare exported variable 'moveUp'.
-src/lib/image-editor-tools.ts(1796,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(1810,17): error TS2323: Cannot redeclare exported variable 'paintBucketDown'.
-src/lib/image-editor-tools.ts(1810,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(1853,17): error TS2323: Cannot redeclare exported variable 'lineDown'.
-src/lib/image-editor-tools.ts(1865,17): error TS2323: Cannot redeclare exported variable 'lineMove'.
-src/lib/image-editor-tools.ts(1898,17): error TS2323: Cannot redeclare exported variable 'lineUp'.
-src/lib/image-editor-tools.ts(1959,17): error TS2323: Cannot redeclare exported variable 'rectangleDown'.
-src/lib/image-editor-tools.ts(1971,17): error TS2323: Cannot redeclare exported variable 'rectangleMove'.
-src/lib/image-editor-tools.ts(2000,17): error TS2323: Cannot redeclare exported variable 'rectangleUp'.
-src/lib/image-editor-tools.ts(2064,17): error TS2323: Cannot redeclare exported variable 'contourDown'.
-src/lib/image-editor-tools.ts(2076,17): error TS2323: Cannot redeclare exported variable 'contourMove'.
-src/lib/image-editor-tools.ts(2105,17): error TS2323: Cannot redeclare exported variable 'contourUp'.
-src/lib/image-editor-tools.ts(2142,17): error TS2323: Cannot redeclare exported variable 'blurDown'.
-src/lib/image-editor-tools.ts(2142,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(2154,17): error TS2323: Cannot redeclare exported variable 'blurMove'.
-src/lib/image-editor-tools.ts(2154,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(2169,17): error TS2323: Cannot redeclare exported variable 'blurUp'.
-src/lib/image-editor-tools.ts(2169,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(2178,10): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(2239,17): error TS2323: Cannot redeclare exported variable 'dispatchDown'.
-src/lib/image-editor-tools.ts(2239,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(2280,17): error TS2323: Cannot redeclare exported variable 'dispatchMove'.
-src/lib/image-editor-tools.ts(2280,17): error TS2393: Duplicate function implementation.
-src/lib/image-editor-tools.ts(2318,17): error TS2323: Cannot redeclare exported variable 'dispatchUp'.
-src/lib/image-editor-tools.ts(2318,17): error TS2393: Duplicate function implementation.
diff --git a/src/components/dialogs/ImportExportDialog.tsx b/src/components/dialogs/ImportExportDialog.tsx
index 7768a54..cbaa91b 100644
--- a/src/components/dialogs/ImportExportDialog.tsx
+++ b/src/components/dialogs/ImportExportDialog.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
-import { Check, Download, Upload } from "lucide-react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Check, Download, Search, Upload, X } from "lucide-react";
 import { drawTileWithOrientation } from "@/components/editor/MapCanvas/texture-cache";
 import { getAssetUrl } from "@/lib/db";
 import { getMapCellBounds, getMapPixelSize } from "@/lib/map-geometry";
@@ -10,11 +10,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/Dialog";
+import { Input } from "@/components/ui/Input";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
 import { cn } from "@/lib/utils";
 import type {
   ImportExportAssetCardProps,
+  ImportExportFlatSelectableAsset,
   ImportExportAssetPickerProps,
   ImportExportAssetType,
   ImportExportDialogMode,
@@ -186,6 +188,7 @@ const optionDefinitions: ImportExportOptionDefinition[] = [
 ];
 
 const assetTabs: ImportExportAssetType[] = ["project", "map", "tileset"];
+const LARGE_SELECTOR_THRESHOLD = 10;
 
 function getActionForAssetType(
   assetType: ImportExportAssetType,
@@ -243,6 +246,26 @@ function syncSelectedIds(
   return selectedIds.filter((selectedId) => availableIds.has(selectedId));
 }
 
+function getSelectionAssetCount(
+  selection: ImportExportAssetPickerProps["selection"],
+) {
+  return selection.groups.reduce(
+    (count, group) => count + group.assets.length,
+    0,
+  );
+}
+
+function flattenSelectionAssets(
+  selection: ImportExportAssetPickerProps["selection"],
+) {
+  return selection.groups.flatMap((group) =>
+    group.assets.map<ImportExportFlatSelectableAsset>((asset) => ({
+      ...asset,
+      searchText: `${asset.name} ${group.name} ${asset.subtitle}`.toLowerCase(),
+    })),
+  );
+}
+
 function MapThumbnail({ thumbnail, alt }: ImportExportMapThumbnailProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -452,7 +475,11 @@ function ExportAssetPicker({
   selection,
   selectedIds,
   onToggleAsset,
+  onSelectAssets,
+  onDeselectAssets,
 }: ImportExportAssetPickerProps) {
+  const totalAssetCount = getSelectionAssetCount(selection);
+
   return (
     <section className="space-y-4 rounded-2xl border border-border-visible bg-secondary/30 px-4 py-4">
       <div className="space-y-1">
@@ -462,17 +489,21 @@ function ExportAssetPicker({
         <p className="text-sm text-foreground">
           {selection.helperText ?? "Choose which assets to export."}
         </p>
-        <p className="text-xs text-muted-foreground">
-          {selectedIds.length === 1
-            ? "1 asset selected"
-            : `${selectedIds.length} assets selected`}
-        </p>
       </div>
 
       {selection.groups.length === 0 ? (
         <div className="rounded-2xl border border-dashed border-border-visible bg-background/80 px-4 py-6 text-sm text-muted-foreground">
           {selection.emptyLabel ?? "Nothing is available to export yet."}
         </div>
+      ) : totalAssetCount > LARGE_SELECTOR_THRESHOLD ? (
+        <LargeExportAssetPicker
+          assetType={assetType}
+          selection={selection}
+          selectedIds={selectedIds}
+          onToggleAsset={onToggleAsset}
+          onSelectAssets={onSelectAssets}
+          onDeselectAssets={onDeselectAssets}
+        />
       ) : (
         <div className="space-y-4">
           {selection.groups.map((group) => (
@@ -503,6 +534,177 @@ function ExportAssetPicker({
   );
 }
 
+function LargeExportAssetPicker({
+  assetType,
+  selection,
+  selectedIds,
+  onToggleAsset,
+  onSelectAssets,
+  onDeselectAssets,
+}: ImportExportAssetPickerProps) {
+  const searchInputId = useId();
+  const [query, setQuery] = useState("");
+  const flatAssets = useMemo(
+    () => flattenSelectionAssets(selection),
+    [selection],
+  );
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const filteredAssets = useMemo(
+    () =>
+      normalizedQuery.length === 0
+        ? flatAssets
+        : flatAssets.filter((asset) =>
+            asset.searchText.includes(normalizedQuery),
+          ),
+    [flatAssets, normalizedQuery],
+  );
+  const filteredAssetIds = filteredAssets.map((asset) => asset.id);
+  const filteredSelectedCount = filteredAssetIds.filter((assetId) =>
+    selectedIdSet.has(assetId),
+  ).length;
+  const isFiltered = normalizedQuery.length > 0;
+
+  return (
+    <div className="">
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+        <div className="flex flex-wrap gap-2">
+          <button
+            type="button"
+            onClick={() => onSelectAssets(filteredAssetIds)}
+            className="rounded-full border border-border-visible bg-background px-3 py-1.5 text-[11px] font-mono uppercase tracking-[0.08em] text-foreground transition-colors hover:border-primary/50 hover:bg-secondary/50 focus-visible:border-primary focus-visible:outline-none"
+          >
+            {isFiltered ? "Select filtered" : "Select all"}
+          </button>
+          <button
+            type="button"
+            onClick={() => onDeselectAssets(filteredAssetIds)}
+            className="rounded-full border border-border-visible bg-background px-3 py-1.5 text-[11px] font-mono uppercase tracking-[0.08em] text-foreground transition-colors hover:border-primary/50 hover:bg-secondary/50 focus-visible:border-primary focus-visible:outline-none"
+          >
+            {isFiltered ? "Clear filtered" : "Clear all"}
+          </button>
+          {isFiltered ? (
+            <button
+              type="button"
+              onClick={() => {
+                setQuery("");
+                onSelectAssets(flatAssets.map((asset) => asset.id));
+              }}
+              className="rounded-full border border-border-visible bg-background px-3 py-1.5 text-[11px] font-mono uppercase tracking-[0.08em] text-foreground transition-colors hover:border-primary/50 hover:bg-secondary/50 focus-visible:border-primary focus-visible:outline-none"
+            >
+              Select all assets
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="relative my-2">
+          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            id={searchInputId}
+            name={searchInputId}
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={`Search by ${assetType === "map" ? "map" : "tileset"} or group name`}
+            className="pl-10 pr-10"
+          />
+          {query.length > 0 ? (
+            <button
+              type="button"
+              onClick={() => setQuery("")}
+              aria-label="Clear search"
+              className="absolute right-2 top-1/2 inline-flex size-7 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+            >
+              <X className="size-4" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground">
+        <div>
+          {filteredAssets.length === 1
+            ? "1 result"
+            : `${filteredAssets.length} results`}
+          {isFiltered ? `, ${filteredSelectedCount} selected in view` : ""}
+        </div>
+        <div>
+          {selectedIds.length === 1
+            ? "1 asset selected"
+            : `${selectedIds.length} assets selected`}
+        </div>
+      </div>
+
+      {filteredAssets.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-border-visible bg-background px-4 py-6 text-sm text-muted-foreground">
+          No matching {assetType === "map" ? "maps" : "tilesets"} found.
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-2xl border border-border-visible bg-background shadow-sm">
+          <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-border-visible bg-secondary/40 px-4 py-2 text-[10px] font-mono uppercase tracking-[0.14em] text-muted-foreground sm:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_auto]">
+            <span>{assetType === "map" ? "Map" : "Tileset"}</span>
+            <span className="hidden sm:block">Group</span>
+            <span className="text-right">Status</span>
+          </div>
+          <ScrollArea className="h-50">
+            <div className="divide-y divide-border-visible">
+              {filteredAssets.map((asset) => {
+                const isSelected = selectedIdSet.has(asset.id);
+
+                return (
+                  <button
+                    key={asset.id}
+                    type="button"
+                    onClick={() => onToggleAsset(asset.id)}
+                    aria-pressed={isSelected}
+                    aria-label={`${isSelected ? "Deselect" : "Select"} ${asset.name}`}
+                    className={cn(
+                      "grid w-full grid-cols-[minmax(0,1fr)_auto] gap-3 px-4 py-3 text-left transition-colors focus-visible:outline-none sm:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_auto]",
+                      isSelected
+                        ? "bg-primary/8"
+                        : "hover:bg-secondary/50 focus-visible:bg-secondary/50",
+                    )}
+                  >
+                    <div className="min-w-0 space-y-1">
+                      <div className="truncate text-sm font-medium text-foreground">
+                        {asset.name}
+                      </div>
+                      <div className="sm:hidden">
+                        <span className="inline-flex max-w-full rounded-full border border-border-visible bg-secondary/50 px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.08em] text-muted-foreground">
+                          <span className="truncate">{asset.groupName}</span>
+                        </span>
+                      </div>
+                    </div>
+                    <div className="hidden min-w-0 items-center sm:flex">
+                      <span className="truncate rounded-full border border-border-visible bg-secondary/50 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.08em] text-muted-foreground">
+                        {asset.groupName}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-end">
+                      <span
+                        className={cn(
+                          "inline-flex size-6 shrink-0 items-center justify-center rounded-full border",
+                          isSelected
+                            ? "border-primary bg-primary text-primary-foreground"
+                            : "border-border-visible bg-background text-transparent",
+                        )}
+                      >
+                        <Check className="size-3.5" />
+                      </span>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ImportExportDialog({
   open,
   onOpenChange,
@@ -571,6 +773,40 @@ export function ImportExportDialog({
     });
   }
 
+  function handleSelectAssets(
+    assetType: ImportExportAssetType,
+    assetIds: ImportExportSelectableAssetId[],
+  ) {
+    if (assetIds.length === 0) return;
+
+    setSelectedIdsByAssetType((currentState) => {
+      const nextSelectedIdSet = new Set(currentState[assetType]);
+
+      for (const assetId of assetIds) {
+        nextSelectedIdSet.add(assetId);
+      }
+
+      return {
+        ...currentState,
+        [assetType]: [...nextSelectedIdSet],
+      };
+    });
+  }
+
+  function handleDeselectAssets(
+    assetType: ImportExportAssetType,
+    assetIds: ImportExportSelectableAssetId[],
+  ) {
+    if (assetIds.length === 0) return;
+
+    setSelectedIdsByAssetType((currentState) => ({
+      ...currentState,
+      [assetType]: currentState[assetType].filter(
+        (currentAssetId) => !assetIds.includes(currentAssetId),
+      ),
+    }));
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
@@ -641,6 +877,12 @@ export function ImportExportDialog({
                         onToggleAsset={(assetId) =>
                           handleToggleAsset(assetType, assetId)
                         }
+                        onSelectAssets={(assetIds) =>
+                          handleSelectAssets(assetType, assetIds)
+                        }
+                        onDeselectAssets={(assetIds) =>
+                          handleDeselectAssets(assetType, assetIds)
+                        }
                       />
                     ) : null}
 
diff --git a/src/types/import-export.ts b/src/types/import-export.ts
index 2712306..e7aff01 100644
--- a/src/types/import-export.ts
+++ b/src/types/import-export.ts
@@ -61,6 +61,10 @@ export interface ImportExportAssetGroup {
   assets: ImportExportSelectableAsset[];
 }
 
+export interface ImportExportFlatSelectableAsset extends ImportExportSelectableAsset {
+  searchText: string;
+}
+
 export interface ImportExportSelectionConfig {
   groups: ImportExportAssetGroup[];
   initialSelectedIds: ImportExportSelectableAssetId[];
@@ -81,6 +85,8 @@ export interface ImportExportAssetPickerProps {
   selection: ImportExportSelectionConfig;
   selectedIds: ImportExportSelectableAssetId[];
   onToggleAsset: (assetId: ImportExportSelectableAssetId) => void;
+  onSelectAssets: (assetIds: ImportExportSelectableAssetId[]) => void;
+  onDeselectAssets: (assetIds: ImportExportSelectableAssetId[]) => void;
 }
 
 export interface ImportExportAssetCardProps {

From 267764d0edbf742ac7b274e5bc3d1078d991bfbd Mon Sep 17 00:00:00 2001
From: Werner Bihl <wernerbihl@gmail.com>
Date: Mon, 20 Apr 2026 21:07:51 +0200
Subject: [PATCH 12/12] feat: add import/export functionality for raster images

- Implemented functions to handle importing raster images from files, including support for various formats (PNG, JPG, WEBP, BMP, GIF).
- Added functionality to render tilesets and maps to canvas, supporting multiple layer types and visibility settings.
- Introduced encoding methods for exporting canvas content as raster images in specified formats, including handling transparency and quality settings.
- Created utility functions for managing raster file types, MIME types, and image loading.

Co-authored-by: Copilot <copilot@github.com>
---
 TODO.txt                                      |    2 +
 src/components/app/AppShell.tsx               |  700 +----------
 .../app/use-import-export-actions.ts          | 1061 +++++++++++++++++
 src/components/dialogs/ImportExportDialog.tsx |  403 ++++++-
 src/lib/import-export-raster.ts               |  475 ++++++++
 src/types/import-export.ts                    |   75 +-
 6 files changed, 1974 insertions(+), 742 deletions(-)
 create mode 100644 src/components/app/use-import-export-actions.ts
 create mode 100644 src/lib/import-export-raster.ts

diff --git a/TODO.txt b/TODO.txt
index 3fc073a..518ca6c 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,3 +1,5 @@
+Tilesets and Map tabs should have an option to "Delete" when you open the right click context menu. It should do the same action as clicking the close button. 
+
 Export Options
   - Do the rest of the options
 Import Options
diff --git a/src/components/app/AppShell.tsx b/src/components/app/AppShell.tsx
index 7959614..6f59ab4 100644
--- a/src/components/app/AppShell.tsx
+++ b/src/components/app/AppShell.tsx
@@ -7,6 +7,7 @@ import {
   Suspense,
 } from "react";
 import { toast } from "sonner";
+import { useImportExportActions } from "@/components/app/use-import-export-actions";
 import { Toolbar } from "@/components/layout/Toolbar";
 import { TilesetPanel } from "@/components/editor/TilesetPanel";
 import { MapPanel } from "@/components/editor/MapPanel";
@@ -19,56 +20,8 @@ import {
   EditorWorkspaceDrawer,
 } from "@/components/editor/Layout/EditorLayouts";
 import { useEditorStore } from "@/hooks/use-editor-store";
-import {
-  buildDownloadFilename,
-  createZipArchive,
-  sanitizeDownloadSegment,
-  exportProject,
-  exportMap,
-  importProject,
-  importMap,
-  exportTileset,
-  importTileset,
-  downloadFile,
-  readFileAsUint8Array,
-} from "@/lib/format";
 import { saveProject } from "@/lib/db";
-import {
-  generateMapId,
-  generateLayerId,
-  generateLayerGroupId,
-  generateObjectId,
-  generateTilesetId,
-} from "@/lib/ids";
-import { findLastLayerId, getAllGroupIds, getAllLayerIds } from "@/lib/layers";
 import { clearTileEditorContext } from "@/lib/tile-editor-context";
-import { getActiveTilesetTileSize } from "@/lib/project";
-import { openProjectInEditor } from "@/lib/project-session";
-import {
-  cloneImportedTileset,
-  clonePropertyValues,
-  remapLayerTreeId,
-  remapTileEntries,
-} from "@/lib/project-import";
-import type {
-  ImageLayer,
-  ImportExportArchiveEntry,
-  ImportExportAssetGroup,
-  LayerGroup,
-  LayerGroupId,
-  LayerId,
-  MapId,
-  MapGroupId,
-  MapObject,
-  ObjectId,
-  ObjectLayer,
-  Project,
-  TileLayer,
-  TileMapData,
-  Tileset,
-  TilesetGroupId,
-  TilesetId,
-} from "@/types";
 import type { EditorWorkspaceTab } from "@/types/editor-layout";
 import type { AppShellProps } from "@/types/app";
 import type { ImportExportDialogMode } from "@/types/import-export";
@@ -123,141 +76,6 @@ const emptyProjectMessage = (
 
 const NARROW_LAYOUT_BREAKPOINT = 768;
 
-function getMapExportData(project: Project, map: TileMapData) {
-  const projectLayerGroups = project.layerGroups ?? [];
-  const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
-  const allGroupIds = getAllGroupIds(map.layerOrder, projectLayerGroups);
-  const layerIdSet = new Set<string>(allLayerIds as string[]);
-  const groupIdSet = new Set<string>(allGroupIds as string[]);
-
-  return {
-    layers: project.layers.filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    ),
-    imageLayers: (project.imageLayers ?? []).filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    ),
-    layerGroups: projectLayerGroups.filter((group) =>
-      groupIdSet.has(group.id as string),
-    ),
-    objectLayers: (project.objectLayers ?? []).filter((layer) =>
-      layerIdSet.has(layer.id as string),
-    ),
-  };
-}
-
-function getReferencedThumbnailTilesets(
-  projectTilesets: Tileset[],
-  layers: TileLayer[],
-) {
-  const referencedTilesetIds = new Set<TilesetId>();
-
-  for (const layer of layers) {
-    for (const ref of Object.values(layer.tiles)) {
-      referencedTilesetIds.add(ref.tilesetId);
-    }
-  }
-
-  return projectTilesets
-    .filter((tileset) => referencedTilesetIds.has(tileset.id))
-    .map((tileset) => ({
-      id: tileset.id,
-      assetId: tileset.assetId,
-    }));
-}
-
-function buildMapExportGroups(project: Project): ImportExportAssetGroup[] {
-  const projectTilesets = [
-    ...project.tilesets,
-    ...(project.overrideTilesets ?? []),
-  ];
-
-  return [...project.mapGroups]
-    .sort((left, right) => left.order - right.order)
-    .map((group) => ({
-      id: group.id,
-      name: group.name,
-      assets: project.maps
-        .filter((map) => map.groupId === group.id)
-        .map((map) => {
-          const mapExportData = getMapExportData(project, map);
-
-          return {
-            id: map.id,
-            name: map.name,
-            groupId: group.id,
-            groupName: group.name,
-            subtitle: `${map.widthInTiles} × ${map.heightInTiles} tiles`,
-            thumbnail: {
-              kind: "map" as const,
-              orientation: map.orientation,
-              staggerAxis: map.staggerAxis,
-              staggerIndex: map.staggerIndex,
-              tileSize: map.tileSize,
-              widthInTiles: map.widthInTiles,
-              heightInTiles: map.heightInTiles,
-              layers: mapExportData.layers.map((layer) => ({
-                id: layer.id,
-                visible: layer.visible,
-                tiles: layer.tiles,
-              })),
-              tilesets: getReferencedThumbnailTilesets(
-                projectTilesets,
-                mapExportData.layers,
-              ),
-            },
-          };
-        }),
-    }))
-    .filter((group) => group.assets.length > 0);
-}
-
-function buildTilesetExportGroups(project: Project): ImportExportAssetGroup[] {
-  return [...project.tilesetGroups]
-    .sort((left, right) => left.order - right.order)
-    .map((group) => ({
-      id: group.id,
-      name: group.name,
-      assets: project.tilesets
-        .filter((tileset) => tileset.groupId === group.id)
-        .map((tileset) => ({
-          id: tileset.id,
-          name: tileset.name,
-          groupId: group.id,
-          groupName: group.name,
-          subtitle: `${tileset.imageWidth} × ${tileset.imageHeight} px`,
-          thumbnail: {
-            kind: "tileset" as const,
-            assetId: tileset.assetId,
-            tileSize: tileset.tileSize,
-            imageWidth: tileset.imageWidth,
-            imageHeight: tileset.imageHeight,
-          },
-        })),
-    }))
-    .filter((group) => group.assets.length > 0);
-}
-
-function getUniqueArchivePath(path: string, usedPaths: Set<string>): string {
-  if (!usedPaths.has(path)) {
-    usedPaths.add(path);
-    return path;
-  }
-
-  const extensionIndex = path.lastIndexOf(".");
-  const baseName = extensionIndex >= 0 ? path.slice(0, extensionIndex) : path;
-  const extension = extensionIndex >= 0 ? path.slice(extensionIndex) : "";
-  let suffix = 2;
-
-  while (usedPaths.has(`${baseName} (${suffix})${extension}`)) {
-    suffix += 1;
-  }
-
-  const nextPath = `${baseName} (${suffix})${extension}`;
-  usedPaths.add(nextPath);
-  return nextPath;
-}
-
 export function AppShell({
   settingsOpen,
   setSettingsOpen,
@@ -348,423 +166,23 @@ export function AppShell({
     return () => observer.disconnect();
   }, [hasProject]);
 
-  const handleExportProject = useCallback(async () => {
-    if (!state.project) return;
-    await saveProject(state.project);
-    const data = await exportProject(state.project);
-    downloadFile(data, `${state.project.name}.2dp`);
-  }, [state.project]);
-
-  const handleImportProject = useCallback(() => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".2dp";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      try {
-        const raw = await readFileAsUint8Array(file);
-        const project = await importProject(raw);
-        await saveProject(project);
-        openProjectInEditor(project);
-      } catch (error) {
-        console.error("[Import Project] Failed:", error);
-        alert("Failed to import project. The file may be corrupted.");
-      }
-    };
-    input.click();
-  }, []);
-
   const handleNewProject = useCallback(() => {
     setProjectDialogOpen(true);
   }, [setProjectDialogOpen]);
-
-  const handleOpenImportDialog = useCallback(() => {
-    setImportExportDialogMode("import");
-    setImportExportDialogOpen(true);
-  }, []);
-
-  const handleOpenExportDialog = useCallback(() => {
-    setImportExportDialogMode("export");
-    setImportExportDialogOpen(true);
-  }, []);
-
-  const handleExportMaps = useCallback(
-    async (selectedMapIds: string[]) => {
-      if (!state.project || selectedMapIds.length === 0) return;
-
-      const selectedIdSet = new Set(selectedMapIds as MapId[]);
-      const selectedMaps = state.project.maps.filter((map) =>
-        selectedIdSet.has(map.id),
-      );
-      if (selectedMaps.length === 0) return;
-
-      if (selectedMaps.length === 1) {
-        const map = selectedMaps[0];
-        const mapExportData = getMapExportData(state.project, map);
-        const data = await exportMap(
-          map,
-          mapExportData.layers,
-          state.project.tilesets,
-          state.project.overrideTilesets ?? [],
-          mapExportData.imageLayers,
-          mapExportData.layerGroups,
-          mapExportData.objectLayers,
-          state.project.objects ?? [],
-        );
-        downloadFile(data, buildDownloadFilename(map.name, ".2dm"));
-        return;
-      }
-
-      const groupNames = new Map(
-        state.project.mapGroups.map((group) => [group.id, group.name]),
-      );
-      const usedPaths = new Set<string>();
-      const entries: ImportExportArchiveEntry[] = [];
-
-      for (const map of selectedMaps) {
-        const mapExportData = getMapExportData(state.project, map);
-        const data = await exportMap(
-          map,
-          mapExportData.layers,
-          state.project.tilesets,
-          state.project.overrideTilesets ?? [],
-          mapExportData.imageLayers,
-          mapExportData.layerGroups,
-          mapExportData.objectLayers,
-          state.project.objects ?? [],
-        );
-        const folderName = sanitizeDownloadSegment(
-          groupNames.get(map.groupId) ?? "Ungrouped",
-          "Ungrouped",
-        );
-        const fileName = buildDownloadFilename(map.name, ".2dm");
-        entries.push({
-          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
-          data,
-        });
-      }
-
-      const archive = createZipArchive(entries);
-      downloadFile(
-        archive,
-        buildDownloadFilename(`${state.project.name} maps`, ".zip"),
-      );
-    },
-    [state.project],
-  );
-
-  const handleExportMap = useCallback(async () => {
-    if (!state.activeMapId) return;
-    await handleExportMaps([state.activeMapId]);
-  }, [handleExportMaps, state.activeMapId]);
-
-  const handleImportMap = useCallback(() => {
-    if (!state.project) return;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".2dm";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      try {
-        const currentProject = state.project;
-        if (!currentProject) return;
-
-        const raw = await readFileAsUint8Array(file);
-        const {
-          map,
-          layers,
-          tilesets,
-          overrideTilesets,
-          imageLayers: importedImageLayers,
-          layerGroups: importedLayerGroups,
-          objectLayers: importedObjectLayers,
-          objects: importedObjects,
-        } = await importMap(raw);
-
-        const targetMapGroupId =
-          state.activeMapGroupId ?? currentProject.mapGroups[0]?.id;
-        const targetTilesetGroupId =
-          state.activeTilesetGroupId ?? currentProject.tilesetGroups[0]?.id;
-        if (!targetMapGroupId || !targetTilesetGroupId) return;
-
-        const newMapId = generateMapId();
-        const layerIdMap = new Map<string, LayerId>();
-        const groupIdMap = new Map<string, LayerGroupId>();
-        const objectIdMap = new Map<string, ObjectId>();
-        const tilesetIdMap = new Map<string, TilesetId>();
-
-        for (const layer of layers) {
-          layerIdMap.set(layer.id as string, generateLayerId());
-        }
-        for (const layer of importedImageLayers) {
-          layerIdMap.set(layer.id as string, generateLayerId());
-        }
-        for (const layer of importedObjectLayers) {
-          layerIdMap.set(layer.id as string, generateLayerId());
-        }
-        for (const group of importedLayerGroups) {
-          groupIdMap.set(group.id as string, generateLayerGroupId());
-        }
-        for (const object of importedObjects) {
-          objectIdMap.set(object.id as string, generateObjectId());
-        }
-
-        const reservedTilesetIds = new Set(
-          [
-            ...currentProject.tilesets,
-            ...(currentProject.overrideTilesets ?? []),
-          ].map((tileset) => tileset.id as string),
-        );
-        const reserveImportedTilesetId = (tilesetId: TilesetId): TilesetId => {
-          const existingId = tilesetIdMap.get(tilesetId as string);
-          if (existingId) return existingId;
-
-          const nextId = reservedTilesetIds.has(tilesetId as string)
-            ? generateTilesetId()
-            : tilesetId;
-          reservedTilesetIds.add(nextId as string);
-          tilesetIdMap.set(tilesetId as string, nextId);
-          return nextId;
-        };
-
-        for (const tileset of tilesets) {
-          reserveImportedTilesetId(tileset.id);
-        }
-        for (const tileset of overrideTilesets) {
-          reserveImportedTilesetId(tileset.id);
-        }
-
-        const remappedTilesets = tilesets.map((tileset) =>
-          cloneImportedTileset(
-            tileset,
-            tilesetIdMap,
-            targetTilesetGroupId as TilesetGroupId,
-          ),
-        );
-        const remappedOverrideTilesets = overrideTilesets.map((tileset) =>
-          cloneImportedTileset(
-            tileset,
-            tilesetIdMap,
-            targetTilesetGroupId as TilesetGroupId,
-          ),
-        );
-        const remappedLayers: TileLayer[] = layers.map((layer) => ({
-          ...layer,
-          id: layerIdMap.get(layer.id as string) ?? layer.id,
-          mapId: newMapId,
-          tiles: remapTileEntries(layer.tiles, tilesetIdMap),
-        }));
-        const remappedImageLayers: ImageLayer[] = importedImageLayers.map(
-          (layer) => ({
-            ...layer,
-            id: layerIdMap.get(layer.id as string) ?? layer.id,
-            mapId: newMapId,
-          }),
-        );
-        const remappedObjectLayers: ObjectLayer[] = importedObjectLayers.map(
-          (layer) => ({
-            ...layer,
-            id: layerIdMap.get(layer.id as string) ?? layer.id,
-            mapId: newMapId,
-            objectOrder: layer.objectOrder.map(
-              (objectId) => objectIdMap.get(objectId as string) ?? objectId,
-            ),
-          }),
-        );
-        const remappedLayerGroups: LayerGroup[] = importedLayerGroups.map(
-          (group) => ({
-            ...group,
-            id: groupIdMap.get(group.id as string) ?? group.id,
-            mapId: newMapId,
-            childOrder: group.childOrder.map((id) =>
-              remapLayerTreeId(id, layerIdMap, groupIdMap),
-            ),
-          }),
-        );
-        const remappedObjects: MapObject[] = importedObjects.map((object) => ({
-          ...object,
-          id: objectIdMap.get(object.id as string) ?? object.id,
-          layerId: (layerIdMap.get(object.layerId as string) ??
-            object.layerId) as LayerId,
-          points: object.points.map((point) => ({ ...point })),
-          properties: clonePropertyValues(object.properties),
-        }));
-        const remappedMap = {
-          ...map,
-          id: newMapId,
-          groupId: targetMapGroupId as MapGroupId,
-          layerOrder: map.layerOrder.map((id) =>
-            remapLayerTreeId(id, layerIdMap, groupIdMap),
-          ),
-          properties: clonePropertyValues(map.properties),
-          createdAt: Date.now(),
-        };
-
-        setState((draft) => {
-          if (!draft.project) return;
-          if (!draft.project.imageLayers) draft.project.imageLayers = [];
-          if (!draft.project.layerGroups) draft.project.layerGroups = [];
-          if (!draft.project.objectLayers) draft.project.objectLayers = [];
-          if (!draft.project.objects) draft.project.objects = [];
-          if (!draft.project.overrideTilesets) {
-            draft.project.overrideTilesets = [];
-          }
-
-          for (const tileset of remappedTilesets) {
-            draft.project.tilesets.push(tileset);
-          }
-          for (const tileset of remappedOverrideTilesets) {
-            draft.project.overrideTilesets.push(tileset);
-          }
-
-          draft.project.maps.push(remappedMap);
-
-          for (const layer of remappedLayers) {
-            draft.project.layers.push(layer);
-          }
-          for (const layer of remappedImageLayers) {
-            draft.project.imageLayers.push(layer);
-          }
-          for (const group of remappedLayerGroups) {
-            draft.project.layerGroups.push(group);
-          }
-          for (const layer of remappedObjectLayers) {
-            draft.project.objectLayers.push(layer);
-          }
-          for (const object of remappedObjects) {
-            draft.project.objects.push(object);
-          }
-
-          draft.activeMapId = newMapId;
-          draft.activeLayerId =
-            findLastLayerId(
-              remappedMap.layerOrder,
-              remappedLayers,
-              remappedLayerGroups,
-              remappedImageLayers,
-              remappedObjectLayers,
-            ) ?? null;
-          draft.activeMapGroupId = targetMapGroupId as MapGroupId;
-        });
-      } catch (error) {
-        console.error("[Import Map] Failed:", error);
-        alert("Failed to import map. The file may be corrupted.");
-      }
-    };
-    input.click();
-  }, [
-    state.project,
-    state.activeMapGroupId,
-    state.activeTilesetGroupId,
+  const {
+    handleOpenImportDialog,
+    handleOpenExportDialog,
+    projectAction,
+    mapAction,
+    tilesetAction,
+  } = useImportExportActions({
+    state,
     setState,
-  ]);
-
-  const handleExportTilesets = useCallback(
-    async (selectedTilesetIds: string[]) => {
-      if (!state.project || selectedTilesetIds.length === 0) return;
-
-      const selectedIdSet = new Set(selectedTilesetIds as TilesetId[]);
-      const selectedTilesets = state.project.tilesets.filter((tileset) =>
-        selectedIdSet.has(tileset.id),
-      );
-      if (selectedTilesets.length === 0) return;
-
-      if (selectedTilesets.length === 1) {
-        const tileset = selectedTilesets[0];
-        const data = await exportTileset(tileset);
-        downloadFile(data, buildDownloadFilename(tileset.name, ".2dt"));
-        return;
-      }
-
-      const groupNames = new Map(
-        state.project.tilesetGroups.map((group) => [group.id, group.name]),
-      );
-      const usedPaths = new Set<string>();
-      const entries: ImportExportArchiveEntry[] = [];
-
-      for (const tileset of selectedTilesets) {
-        const data = await exportTileset(tileset);
-        const folderName = sanitizeDownloadSegment(
-          groupNames.get(tileset.groupId) ?? "Ungrouped",
-          "Ungrouped",
-        );
-        const fileName = buildDownloadFilename(tileset.name, ".2dt");
-        entries.push({
-          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
-          data,
-        });
-      }
-
-      const archive = createZipArchive(entries);
-      downloadFile(
-        archive,
-        buildDownloadFilename(`${state.project.name} tilesets`, ".zip"),
-      );
-    },
-    [state.project],
-  );
-
-  const handleExportTileset = useCallback(async () => {
-    if (!state.activeTilesetId) return;
-    await handleExportTilesets([state.activeTilesetId]);
-  }, [handleExportTilesets, state.activeTilesetId]);
-
-  const mapExportGroups =
-    importExportDialogOpen && state.project
-      ? buildMapExportGroups(state.project)
-      : [];
-  const tilesetExportGroups =
-    importExportDialogOpen && state.project
-      ? buildTilesetExportGroups(state.project)
-      : [];
-
-  const handleImportTileset = useCallback(() => {
-    if (!state.project) return;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = ".2dt";
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (!file) return;
-      try {
-        const project = state.project;
-        if (!project) return;
-
-        const raw = await readFileAsUint8Array(file);
-        const tileset = await importTileset(raw, state.tileSize);
-        const targetGroupId =
-          state.activeTilesetGroupId ?? project.tilesetGroups[0]?.id;
-        if (!targetGroupId) return;
-
-        const exists = project.tilesets.some(
-          (entry) => entry.id === tileset.id,
-        );
-
-        setState((draft) => {
-          if (!draft.project) return;
-          if (!exists) {
-            draft.project.tilesets.push({
-              ...tileset,
-              groupId: targetGroupId as TilesetGroupId,
-            });
-          }
-          draft.activeTilesetId = tileset.id;
-          draft.activeTilesetGroupId = targetGroupId as TilesetGroupId;
-          draft.tileSize = getActiveTilesetTileSize(
-            draft.project,
-            draft.activeTilesetId,
-          );
-          draft.selectedTile = null;
-        });
-      } catch (error) {
-        console.error("[Import Tileset] Failed:", error);
-        alert("Failed to import tileset. The file may be corrupted.");
-      }
-    };
-    input.click();
-  }, [state.project, state.activeTilesetGroupId, state.tileSize, setState]);
+    importExportDialogMode,
+    importExportDialogOpen,
+    setImportExportDialogMode,
+    setImportExportDialogOpen,
+  });
 
   const activeWorkspaceSummary =
     activeLayerKind === "object"
@@ -930,93 +348,9 @@ export function AppShell({
             open={importExportDialogOpen}
             onOpenChange={setImportExportDialogOpen}
             mode={importExportDialogMode}
-            projectAction={{
-              enabled:
-                importExportDialogMode === "import"
-                  ? true
-                  : Boolean(state.project),
-              onSelect:
-                importExportDialogMode === "import"
-                  ? handleImportProject
-                  : () => {
-                      void handleExportProject();
-                    },
-              disabledReason:
-                importExportDialogMode === "export" && !state.project
-                  ? "Open a project first"
-                  : undefined,
-            }}
-            mapAction={{
-              enabled:
-                importExportDialogMode === "import"
-                  ? Boolean(state.project)
-                  : Boolean(state.project && state.activeMapId),
-              onSelect:
-                importExportDialogMode === "import"
-                  ? handleImportMap
-                  : () => {
-                      void handleExportMap();
-                    },
-              exportSelection:
-                importExportDialogMode === "export" && state.project
-                  ? {
-                      groups: mapExportGroups,
-                      initialSelectedIds: state.activeMapId
-                        ? [state.activeMapId]
-                        : [],
-                      helperText:
-                        "Choose one or more maps. Multiple selections are exported as a zip grouped by map group.",
-                      emptyLabel: "This project has no maps to export yet.",
-                      onSubmit: (selectedIds) => handleExportMaps(selectedIds),
-                    }
-                  : undefined,
-              disabledReason:
-                importExportDialogMode === "import"
-                  ? state.project
-                    ? undefined
-                    : "Open a project first"
-                  : state.project
-                    ? state.activeMapId
-                      ? undefined
-                      : "Open a map first"
-                    : "Open a project first",
-            }}
-            tilesetAction={{
-              enabled:
-                importExportDialogMode === "import"
-                  ? Boolean(state.project)
-                  : Boolean(state.project && state.activeTilesetId),
-              onSelect:
-                importExportDialogMode === "import"
-                  ? handleImportTileset
-                  : () => {
-                      void handleExportTileset();
-                    },
-              exportSelection:
-                importExportDialogMode === "export" && state.project
-                  ? {
-                      groups: tilesetExportGroups,
-                      initialSelectedIds: state.activeTilesetId
-                        ? [state.activeTilesetId]
-                        : [],
-                      helperText:
-                        "Choose one or more tilesets. Multiple selections are exported as a zip grouped by tileset group.",
-                      emptyLabel: "This project has no tilesets to export yet.",
-                      onSubmit: (selectedIds) =>
-                        handleExportTilesets(selectedIds),
-                    }
-                  : undefined,
-              disabledReason:
-                importExportDialogMode === "import"
-                  ? state.project
-                    ? undefined
-                    : "Open a project first"
-                  : state.project
-                    ? state.activeTilesetId
-                      ? undefined
-                      : "Open a tileset first"
-                    : "Open a project first",
-            }}
+            projectAction={projectAction}
+            mapAction={mapAction}
+            tilesetAction={tilesetAction}
           />
         </Suspense>
       )}
diff --git a/src/components/app/use-import-export-actions.ts b/src/components/app/use-import-export-actions.ts
new file mode 100644
index 0000000..18b1bc5
--- /dev/null
+++ b/src/components/app/use-import-export-actions.ts
@@ -0,0 +1,1061 @@
+import { useCallback, useMemo } from "react";
+import { downloadBlob } from "@/lib/image-editor-document";
+import {
+  buildDownloadFilename,
+  createZipArchive,
+  downloadFile,
+  exportMap,
+  exportProject,
+  exportTileset,
+  importMap,
+  importProject,
+  importTileset,
+  readFileAsUint8Array,
+  sanitizeDownloadSegment,
+} from "@/lib/format";
+import {
+  encodeCanvasAsRaster,
+  getRasterFileExtension,
+  importRasterAssetFromFile,
+  pickRasterImageFile,
+  renderMapToCanvas,
+  renderTilesetToCanvas,
+} from "@/lib/import-export-raster";
+import {
+  generateLayerGroupId,
+  generateLayerId,
+  generateMapId,
+  generateObjectId,
+  generateTilesetId,
+} from "@/lib/ids";
+import { findLastLayerId, getAllGroupIds, getAllLayerIds } from "@/lib/layers";
+import { getActiveTilesetTileSize } from "@/lib/project";
+import { openProjectInEditor } from "@/lib/project-session";
+import {
+  cloneImportedTileset,
+  clonePropertyValues,
+  remapLayerTreeId,
+  remapTileEntries,
+} from "@/lib/project-import";
+import { saveProject } from "@/lib/db";
+import type { EditorTravels } from "@/types/editor-store";
+import type {
+  EditorState,
+  ImageLayer,
+  ImportExportArchiveEntry,
+  ImportExportAssetGroup,
+  ImportExportDialogMode,
+  ImportExportOptionAction,
+  ImportExportOptionId,
+  ImportExportRasterExportOptions,
+  LayerGroup,
+  LayerGroupId,
+  LayerId,
+  MapId,
+  MapGroupId,
+  MapObject,
+  ObjectId,
+  ObjectLayer,
+  Project,
+  TileLayer,
+  TileMapData,
+  Tileset,
+  TilesetGroupId,
+  TilesetId,
+} from "@/types";
+
+interface UseImportExportActionsParams {
+  state: EditorState;
+  setState: EditorTravels["setState"];
+  importExportDialogMode: ImportExportDialogMode;
+  importExportDialogOpen: boolean;
+  setImportExportDialogMode: (mode: ImportExportDialogMode) => void;
+  setImportExportDialogOpen: (open: boolean) => void;
+}
+
+export function useImportExportActions({
+  state,
+  setState,
+  importExportDialogMode,
+  importExportDialogOpen,
+  setImportExportDialogMode,
+  setImportExportDialogOpen,
+}: UseImportExportActionsParams) {
+  const handleExportProject = useCallback(async () => {
+    if (!state.project) return;
+    await saveProject(state.project);
+    const data = await exportProject(state.project);
+    downloadFile(data, `${state.project.name}.2dp`);
+  }, [state.project]);
+
+  const handleImportProject = useCallback(async () => {
+    const file = await pickFile(".2dp");
+    if (!file) return;
+
+    try {
+      const raw = await readFileAsUint8Array(file);
+      const project = await importProject(raw);
+      await saveProject(project);
+      openProjectInEditor(project);
+    } catch (error) {
+      console.error("[Import Project] Failed:", error);
+      alert("Failed to import project. The file may be corrupted.");
+    }
+  }, []);
+
+  const handleOpenImportDialog = useCallback(() => {
+    setImportExportDialogMode("import");
+    setImportExportDialogOpen(true);
+  }, [setImportExportDialogMode, setImportExportDialogOpen]);
+
+  const handleOpenExportDialog = useCallback(() => {
+    setImportExportDialogMode("export");
+    setImportExportDialogOpen(true);
+  }, [setImportExportDialogMode, setImportExportDialogOpen]);
+
+  const handleExportNativeMaps = useCallback(
+    async (selectedMapIds: string[]) => {
+      if (!state.project || selectedMapIds.length === 0) return;
+
+      const selectedIdSet = new Set(selectedMapIds as MapId[]);
+      const selectedMaps = state.project.maps.filter((map) =>
+        selectedIdSet.has(map.id),
+      );
+      if (selectedMaps.length === 0) return;
+
+      if (selectedMaps.length === 1) {
+        const map = selectedMaps[0];
+        const mapExportData = getMapExportData(state.project, map);
+        const data = await exportMap(
+          map,
+          mapExportData.layers,
+          state.project.tilesets,
+          state.project.overrideTilesets ?? [],
+          mapExportData.imageLayers,
+          mapExportData.layerGroups,
+          mapExportData.objectLayers,
+          state.project.objects ?? [],
+        );
+        downloadFile(data, buildDownloadFilename(map.name, ".2dm"));
+        return;
+      }
+
+      const groupNames = new Map(
+        state.project.mapGroups.map((group) => [group.id, group.name]),
+      );
+      const usedPaths = new Set<string>();
+      const entries: ImportExportArchiveEntry[] = [];
+
+      for (const map of selectedMaps) {
+        const mapExportData = getMapExportData(state.project, map);
+        const data = await exportMap(
+          map,
+          mapExportData.layers,
+          state.project.tilesets,
+          state.project.overrideTilesets ?? [],
+          mapExportData.imageLayers,
+          mapExportData.layerGroups,
+          mapExportData.objectLayers,
+          state.project.objects ?? [],
+        );
+        const folderName = sanitizeDownloadSegment(
+          groupNames.get(map.groupId) ?? "Ungrouped",
+          "Ungrouped",
+        );
+        const fileName = buildDownloadFilename(map.name, ".2dm");
+        entries.push({
+          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
+          data,
+        });
+      }
+
+      const archive = createZipArchive(entries);
+      downloadFile(
+        archive,
+        buildDownloadFilename(`${state.project.name} maps`, ".zip"),
+      );
+    },
+    [state.project],
+  );
+
+  const handleExportRasterMaps = useCallback(
+    async (
+      selectedMapIds: string[],
+      rasterExportOptions?: ImportExportRasterExportOptions,
+    ) => {
+      if (
+        !state.project ||
+        selectedMapIds.length === 0 ||
+        !rasterExportOptions
+      ) {
+        return;
+      }
+
+      const selectedIdSet = new Set(selectedMapIds as MapId[]);
+      const selectedMaps = state.project.maps.filter((map) =>
+        selectedIdSet.has(map.id),
+      );
+      if (selectedMaps.length === 0) return;
+
+      const allTilesets = [
+        ...state.project.tilesets,
+        ...(state.project.overrideTilesets ?? []),
+      ];
+
+      if (selectedMaps.length === 1) {
+        const map = selectedMaps[0];
+        const mapExportData = getMapExportData(state.project, map);
+        const canvas = await renderMapToCanvas(
+          map,
+          mapExportData.layers,
+          mapExportData.imageLayers,
+          mapExportData.layerGroups,
+          allTilesets,
+          mapExportData.objectLayers,
+          mapExportData.objects,
+        );
+        const blob = await encodeCanvasAsRaster(canvas, rasterExportOptions);
+        downloadBlob(
+          blob,
+          buildDownloadFilename(
+            map.name,
+            getRasterFileExtension(rasterExportOptions.fileType),
+          ),
+        );
+        return;
+      }
+
+      const groupNames = new Map(
+        state.project.mapGroups.map((group) => [group.id, group.name]),
+      );
+      const usedPaths = new Set<string>();
+      const entries: ImportExportArchiveEntry[] = [];
+
+      for (const map of selectedMaps) {
+        const mapExportData = getMapExportData(state.project, map);
+        const canvas = await renderMapToCanvas(
+          map,
+          mapExportData.layers,
+          mapExportData.imageLayers,
+          mapExportData.layerGroups,
+          allTilesets,
+          mapExportData.objectLayers,
+          mapExportData.objects,
+        );
+        const blob = await encodeCanvasAsRaster(canvas, rasterExportOptions);
+        const folderName = sanitizeDownloadSegment(
+          groupNames.get(map.groupId) ?? "Ungrouped",
+          "Ungrouped",
+        );
+        const fileName = buildDownloadFilename(
+          map.name,
+          getRasterFileExtension(rasterExportOptions.fileType),
+        );
+        entries.push({
+          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
+          data: new Uint8Array(await blob.arrayBuffer()),
+        });
+      }
+
+      const archive = createZipArchive(entries);
+      downloadFile(
+        archive,
+        buildDownloadFilename(`${state.project.name} maps`, ".zip"),
+      );
+    },
+    [state.project],
+  );
+
+  const handleImportNativeMap = useCallback(async () => {
+    if (!state.project) return;
+
+    const file = await pickFile(".2dm");
+    if (!file) return;
+
+    try {
+      const currentProject = state.project;
+      const raw = await readFileAsUint8Array(file);
+      const {
+        map,
+        layers,
+        tilesets,
+        overrideTilesets,
+        imageLayers: importedImageLayers,
+        layerGroups: importedLayerGroups,
+        objectLayers: importedObjectLayers,
+        objects: importedObjects,
+      } = await importMap(raw);
+
+      const targetMapGroupId =
+        state.activeMapGroupId ?? currentProject.mapGroups[0]?.id;
+      const targetTilesetGroupId =
+        state.activeTilesetGroupId ?? currentProject.tilesetGroups[0]?.id;
+      if (!targetMapGroupId || !targetTilesetGroupId) return;
+
+      const newMapId = generateMapId();
+      const layerIdMap = new Map<string, LayerId>();
+      const groupIdMap = new Map<string, LayerGroupId>();
+      const objectIdMap = new Map<string, ObjectId>();
+      const tilesetIdMap = new Map<string, TilesetId>();
+
+      for (const layer of layers) {
+        layerIdMap.set(layer.id as string, generateLayerId());
+      }
+      for (const layer of importedImageLayers) {
+        layerIdMap.set(layer.id as string, generateLayerId());
+      }
+      for (const layer of importedObjectLayers) {
+        layerIdMap.set(layer.id as string, generateLayerId());
+      }
+      for (const group of importedLayerGroups) {
+        groupIdMap.set(group.id as string, generateLayerGroupId());
+      }
+      for (const object of importedObjects) {
+        objectIdMap.set(object.id as string, generateObjectId());
+      }
+
+      const reservedTilesetIds = new Set(
+        [
+          ...currentProject.tilesets,
+          ...(currentProject.overrideTilesets ?? []),
+        ].map((tileset) => tileset.id as string),
+      );
+      const reserveImportedTilesetId = (tilesetId: TilesetId): TilesetId => {
+        const existingId = tilesetIdMap.get(tilesetId as string);
+        if (existingId) return existingId;
+
+        const nextId = reservedTilesetIds.has(tilesetId as string)
+          ? generateTilesetId()
+          : tilesetId;
+        reservedTilesetIds.add(nextId as string);
+        tilesetIdMap.set(tilesetId as string, nextId);
+        return nextId;
+      };
+
+      for (const tileset of tilesets) {
+        reserveImportedTilesetId(tileset.id);
+      }
+      for (const tileset of overrideTilesets) {
+        reserveImportedTilesetId(tileset.id);
+      }
+
+      const remappedTilesets = tilesets.map((tileset) =>
+        cloneImportedTileset(
+          tileset,
+          tilesetIdMap,
+          targetTilesetGroupId as TilesetGroupId,
+        ),
+      );
+      const remappedOverrideTilesets = overrideTilesets.map((tileset) =>
+        cloneImportedTileset(
+          tileset,
+          tilesetIdMap,
+          targetTilesetGroupId as TilesetGroupId,
+        ),
+      );
+      const remappedLayers: TileLayer[] = layers.map((layer) => ({
+        ...layer,
+        id: layerIdMap.get(layer.id as string) ?? layer.id,
+        mapId: newMapId,
+        tiles: remapTileEntries(layer.tiles, tilesetIdMap),
+      }));
+      const remappedImageLayers: ImageLayer[] = importedImageLayers.map(
+        (layer) => ({
+          ...layer,
+          id: layerIdMap.get(layer.id as string) ?? layer.id,
+          mapId: newMapId,
+        }),
+      );
+      const remappedObjectLayers: ObjectLayer[] = importedObjectLayers.map(
+        (layer) => ({
+          ...layer,
+          id: layerIdMap.get(layer.id as string) ?? layer.id,
+          mapId: newMapId,
+          objectOrder: layer.objectOrder.map(
+            (objectId) => objectIdMap.get(objectId as string) ?? objectId,
+          ),
+        }),
+      );
+      const remappedLayerGroups: LayerGroup[] = importedLayerGroups.map(
+        (group) => ({
+          ...group,
+          id: groupIdMap.get(group.id as string) ?? group.id,
+          mapId: newMapId,
+          childOrder: group.childOrder.map((id) =>
+            remapLayerTreeId(id, layerIdMap, groupIdMap),
+          ),
+        }),
+      );
+      const remappedObjects: MapObject[] = importedObjects.map((object) => ({
+        ...object,
+        id: objectIdMap.get(object.id as string) ?? object.id,
+        layerId: (layerIdMap.get(object.layerId as string) ??
+          object.layerId) as LayerId,
+        points: object.points.map((point) => ({ ...point })),
+        properties: clonePropertyValues(object.properties),
+      }));
+      const remappedMap = {
+        ...map,
+        id: newMapId,
+        groupId: targetMapGroupId as MapGroupId,
+        layerOrder: map.layerOrder.map((id) =>
+          remapLayerTreeId(id, layerIdMap, groupIdMap),
+        ),
+        properties: clonePropertyValues(map.properties),
+        createdAt: Date.now(),
+      };
+
+      setState((draft) => {
+        if (!draft.project) return;
+        if (!draft.project.imageLayers) draft.project.imageLayers = [];
+        if (!draft.project.layerGroups) draft.project.layerGroups = [];
+        if (!draft.project.objectLayers) draft.project.objectLayers = [];
+        if (!draft.project.objects) draft.project.objects = [];
+        if (!draft.project.overrideTilesets) {
+          draft.project.overrideTilesets = [];
+        }
+
+        for (const tileset of remappedTilesets) {
+          draft.project.tilesets.push(tileset);
+        }
+        for (const tileset of remappedOverrideTilesets) {
+          draft.project.overrideTilesets.push(tileset);
+        }
+
+        draft.project.maps.push(remappedMap);
+
+        for (const layer of remappedLayers) {
+          draft.project.layers.push(layer);
+        }
+        for (const layer of remappedImageLayers) {
+          draft.project.imageLayers.push(layer);
+        }
+        for (const group of remappedLayerGroups) {
+          draft.project.layerGroups.push(group);
+        }
+        for (const layer of remappedObjectLayers) {
+          draft.project.objectLayers.push(layer);
+        }
+        for (const object of remappedObjects) {
+          draft.project.objects.push(object);
+        }
+
+        draft.activeMapId = newMapId;
+        draft.activeLayerId =
+          findLastLayerId(
+            remappedMap.layerOrder,
+            remappedLayers,
+            remappedLayerGroups,
+            remappedImageLayers,
+            remappedObjectLayers,
+          ) ?? null;
+        draft.activeMapGroupId = targetMapGroupId as MapGroupId;
+      });
+    } catch (error) {
+      console.error("[Import Map] Failed:", error);
+      alert("Failed to import map. The file may be corrupted.");
+    }
+  }, [
+    setState,
+    state.activeMapGroupId,
+    state.activeTilesetGroupId,
+    state.project,
+  ]);
+
+  const handleImportRasterMap = useCallback(async () => {
+    if (!state.project) return;
+
+    const file = await pickRasterImageFile();
+    if (!file) return;
+
+    try {
+      const importedAsset = await importRasterAssetFromFile(file);
+      const targetMapGroupId =
+        state.activeMapGroupId ?? state.project.mapGroups[0]?.id;
+      if (!targetMapGroupId) return;
+
+      const mapId = generateMapId();
+      const layerId = generateLayerId();
+      const tileSize = state.tileSize;
+      const widthInTiles = Math.max(
+        1,
+        Math.ceil(importedAsset.width / tileSize),
+      );
+      const heightInTiles = Math.max(
+        1,
+        Math.ceil(importedAsset.height / tileSize),
+      );
+
+      setState((draft) => {
+        if (!draft.project) return;
+        if (!draft.project.imageLayers) draft.project.imageLayers = [];
+
+        const map: TileMapData = {
+          id: mapId,
+          name: importedAsset.name,
+          groupId: targetMapGroupId as MapGroupId,
+          orientation: "orthogonal",
+          widthInTiles,
+          heightInTiles,
+          tileSize,
+          properties: {},
+          layerOrder: [layerId],
+          createdAt: Date.now(),
+        };
+
+        const imageLayer: ImageLayer = {
+          id: layerId,
+          mapId,
+          name: importedAsset.name,
+          type: "image",
+          visible: true,
+          locked: false,
+          assetId: importedAsset.assetId,
+          x: 0,
+          y: 0,
+          width: importedAsset.width,
+          height: importedAsset.height,
+          rotation: 0,
+          flipX: false,
+          flipY: false,
+          opacity: 100,
+        };
+
+        draft.project.maps.push(map);
+        draft.project.imageLayers.push(imageLayer);
+        draft.activeMapId = mapId;
+        draft.activeMapGroupId = targetMapGroupId as MapGroupId;
+        draft.activeLayerId = layerId;
+        draft.currentTool = "select";
+      });
+    } catch (error) {
+      console.error("[Import Map Image] Failed:", error);
+      alert("Failed to import the image as a map.");
+    }
+  }, [setState, state.activeMapGroupId, state.project, state.tileSize]);
+
+  const handleExportNativeTilesets = useCallback(
+    async (selectedTilesetIds: string[]) => {
+      if (!state.project || selectedTilesetIds.length === 0) return;
+
+      const selectedIdSet = new Set(selectedTilesetIds as TilesetId[]);
+      const selectedTilesets = state.project.tilesets.filter((tileset) =>
+        selectedIdSet.has(tileset.id),
+      );
+      if (selectedTilesets.length === 0) return;
+
+      if (selectedTilesets.length === 1) {
+        const tileset = selectedTilesets[0];
+        const data = await exportTileset(tileset);
+        downloadFile(data, buildDownloadFilename(tileset.name, ".2dt"));
+        return;
+      }
+
+      const groupNames = new Map(
+        state.project.tilesetGroups.map((group) => [group.id, group.name]),
+      );
+      const usedPaths = new Set<string>();
+      const entries: ImportExportArchiveEntry[] = [];
+
+      for (const tileset of selectedTilesets) {
+        const data = await exportTileset(tileset);
+        const folderName = sanitizeDownloadSegment(
+          groupNames.get(tileset.groupId) ?? "Ungrouped",
+          "Ungrouped",
+        );
+        const fileName = buildDownloadFilename(tileset.name, ".2dt");
+        entries.push({
+          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
+          data,
+        });
+      }
+
+      const archive = createZipArchive(entries);
+      downloadFile(
+        archive,
+        buildDownloadFilename(`${state.project.name} tilesets`, ".zip"),
+      );
+    },
+    [state.project],
+  );
+
+  const handleExportRasterTilesets = useCallback(
+    async (
+      selectedTilesetIds: string[],
+      rasterExportOptions?: ImportExportRasterExportOptions,
+    ) => {
+      if (
+        !state.project ||
+        selectedTilesetIds.length === 0 ||
+        !rasterExportOptions
+      ) {
+        return;
+      }
+
+      const selectedIdSet = new Set(selectedTilesetIds as TilesetId[]);
+      const selectedTilesets = state.project.tilesets.filter((tileset) =>
+        selectedIdSet.has(tileset.id),
+      );
+      if (selectedTilesets.length === 0) return;
+
+      if (selectedTilesets.length === 1) {
+        const tileset = selectedTilesets[0];
+        const canvas = await renderTilesetToCanvas(tileset);
+        const blob = await encodeCanvasAsRaster(canvas, rasterExportOptions);
+        downloadBlob(
+          blob,
+          buildDownloadFilename(
+            tileset.name,
+            getRasterFileExtension(rasterExportOptions.fileType),
+          ),
+        );
+        return;
+      }
+
+      const groupNames = new Map(
+        state.project.tilesetGroups.map((group) => [group.id, group.name]),
+      );
+      const usedPaths = new Set<string>();
+      const entries: ImportExportArchiveEntry[] = [];
+
+      for (const tileset of selectedTilesets) {
+        const canvas = await renderTilesetToCanvas(tileset);
+        const blob = await encodeCanvasAsRaster(canvas, rasterExportOptions);
+        const folderName = sanitizeDownloadSegment(
+          groupNames.get(tileset.groupId) ?? "Ungrouped",
+          "Ungrouped",
+        );
+        const fileName = buildDownloadFilename(
+          tileset.name,
+          getRasterFileExtension(rasterExportOptions.fileType),
+        );
+        entries.push({
+          path: getUniqueArchivePath(`${folderName}/${fileName}`, usedPaths),
+          data: new Uint8Array(await blob.arrayBuffer()),
+        });
+      }
+
+      const archive = createZipArchive(entries);
+      downloadFile(
+        archive,
+        buildDownloadFilename(`${state.project.name} tilesets`, ".zip"),
+      );
+    },
+    [state.project],
+  );
+
+  const handleImportNativeTileset = useCallback(async () => {
+    if (!state.project) return;
+
+    const file = await pickFile(".2dt");
+    if (!file) return;
+
+    try {
+      const project = state.project;
+      const raw = await readFileAsUint8Array(file);
+      const tileset = await importTileset(raw, state.tileSize);
+      const targetGroupId =
+        state.activeTilesetGroupId ?? project.tilesetGroups[0]?.id;
+      if (!targetGroupId) return;
+
+      const exists = project.tilesets.some((entry) => entry.id === tileset.id);
+
+      setState((draft) => {
+        if (!draft.project) return;
+        if (!exists) {
+          draft.project.tilesets.push({
+            ...tileset,
+            groupId: targetGroupId as TilesetGroupId,
+          });
+        }
+        draft.activeTilesetId = tileset.id;
+        draft.activeTilesetGroupId = targetGroupId as TilesetGroupId;
+        draft.tileSize = getActiveTilesetTileSize(
+          draft.project,
+          draft.activeTilesetId,
+        );
+        draft.selectedTile = null;
+      });
+    } catch (error) {
+      console.error("[Import Tileset] Failed:", error);
+      alert("Failed to import tileset. The file may be corrupted.");
+    }
+  }, [setState, state.activeTilesetGroupId, state.project, state.tileSize]);
+
+  const handleImportRasterTileset = useCallback(async () => {
+    if (!state.project) return;
+
+    const file = await pickRasterImageFile();
+    if (!file) return;
+
+    try {
+      const importedAsset = await importRasterAssetFromFile(file);
+      const targetGroupId =
+        state.activeTilesetGroupId ?? state.project.tilesetGroups[0]?.id;
+      if (!targetGroupId) return;
+
+      const tilesetId = generateTilesetId();
+
+      setState((draft) => {
+        if (!draft.project) return;
+
+        draft.project.tilesets.push({
+          id: tilesetId,
+          name: importedAsset.name,
+          groupId: targetGroupId as TilesetGroupId,
+          tileSize: draft.tileSize,
+          assetId: importedAsset.assetId,
+          imageWidth: importedAsset.width,
+          imageHeight: importedAsset.height,
+          createdAt: Date.now(),
+        });
+
+        draft.activeTilesetId = tilesetId;
+        draft.activeTilesetGroupId = targetGroupId as TilesetGroupId;
+        draft.tileSize = getActiveTilesetTileSize(draft.project, tilesetId);
+        draft.selectedTile = null;
+      });
+    } catch (error) {
+      console.error("[Import Tileset Image] Failed:", error);
+      alert("Failed to import the image as a tileset.");
+    }
+  }, [setState, state.activeTilesetGroupId, state.project]);
+
+  const handleMapActionSelect = useCallback(
+    async (optionId: ImportExportOptionId) => {
+      if (optionId === "map-image") {
+        await handleImportRasterMap();
+        return;
+      }
+
+      await handleImportNativeMap();
+    },
+    [handleImportNativeMap, handleImportRasterMap],
+  );
+
+  const handleTilesetActionSelect = useCallback(
+    async (optionId: ImportExportOptionId) => {
+      if (optionId === "tileset-image") {
+        await handleImportRasterTileset();
+        return;
+      }
+
+      await handleImportNativeTileset();
+    },
+    [handleImportNativeTileset, handleImportRasterTileset],
+  );
+
+  const handleMapExportSubmit = useCallback(
+    async (
+      selectedIds: string[],
+      optionId: ImportExportOptionId,
+      rasterExportOptions?: ImportExportRasterExportOptions,
+    ) => {
+      if (optionId === "map-image") {
+        await handleExportRasterMaps(selectedIds, rasterExportOptions);
+        return;
+      }
+
+      await handleExportNativeMaps(selectedIds);
+    },
+    [handleExportNativeMaps, handleExportRasterMaps],
+  );
+
+  const handleTilesetExportSubmit = useCallback(
+    async (
+      selectedIds: string[],
+      optionId: ImportExportOptionId,
+      rasterExportOptions?: ImportExportRasterExportOptions,
+    ) => {
+      if (optionId === "tileset-image") {
+        await handleExportRasterTilesets(selectedIds, rasterExportOptions);
+        return;
+      }
+
+      await handleExportNativeTilesets(selectedIds);
+    },
+    [handleExportNativeTilesets, handleExportRasterTilesets],
+  );
+
+  const mapExportGroups = useMemo(
+    () =>
+      importExportDialogOpen && state.project
+        ? buildMapExportGroups(state.project)
+        : [],
+    [importExportDialogOpen, state.project],
+  );
+
+  const tilesetExportGroups = useMemo(
+    () =>
+      importExportDialogOpen && state.project
+        ? buildTilesetExportGroups(state.project)
+        : [],
+    [importExportDialogOpen, state.project],
+  );
+
+  const projectAction: ImportExportOptionAction = useMemo(
+    () => ({
+      enabled:
+        importExportDialogMode === "import" ? true : Boolean(state.project),
+      onSelect:
+        importExportDialogMode === "import"
+          ? () => handleImportProject()
+          : () => handleExportProject(),
+      disabledReason:
+        importExportDialogMode === "export" && !state.project
+          ? "Open a project first"
+          : undefined,
+    }),
+    [
+      handleExportProject,
+      handleImportProject,
+      importExportDialogMode,
+      state.project,
+    ],
+  );
+
+  const mapAction: ImportExportOptionAction = useMemo(
+    () => ({
+      enabled:
+        importExportDialogMode === "import"
+          ? Boolean(state.project)
+          : Boolean(state.project && state.activeMapId),
+      onSelect:
+        importExportDialogMode === "import" ? handleMapActionSelect : undefined,
+      exportSelection:
+        importExportDialogMode === "export" && state.project
+          ? {
+              groups: mapExportGroups,
+              initialSelectedIds: state.activeMapId ? [state.activeMapId] : [],
+              helperText:
+                "Choose one or more maps. Multiple selections are exported as a zip grouped by map group.",
+              emptyLabel: "This project has no maps to export yet.",
+              onSubmit: handleMapExportSubmit,
+            }
+          : undefined,
+      disabledReason:
+        importExportDialogMode === "import"
+          ? state.project
+            ? undefined
+            : "Open a project first"
+          : state.project
+            ? state.activeMapId
+              ? undefined
+              : "Open a map first"
+            : "Open a project first",
+    }),
+    [
+      handleMapActionSelect,
+      handleMapExportSubmit,
+      importExportDialogMode,
+      mapExportGroups,
+      state.activeMapId,
+      state.project,
+    ],
+  );
+
+  const tilesetAction: ImportExportOptionAction = useMemo(
+    () => ({
+      enabled:
+        importExportDialogMode === "import"
+          ? Boolean(state.project)
+          : Boolean(state.project && state.activeTilesetId),
+      onSelect:
+        importExportDialogMode === "import"
+          ? handleTilesetActionSelect
+          : undefined,
+      exportSelection:
+        importExportDialogMode === "export" && state.project
+          ? {
+              groups: tilesetExportGroups,
+              initialSelectedIds: state.activeTilesetId
+                ? [state.activeTilesetId]
+                : [],
+              helperText:
+                "Choose one or more tilesets. Multiple selections are exported as a zip grouped by tileset group.",
+              emptyLabel: "This project has no tilesets to export yet.",
+              onSubmit: handleTilesetExportSubmit,
+            }
+          : undefined,
+      disabledReason:
+        importExportDialogMode === "import"
+          ? state.project
+            ? undefined
+            : "Open a project first"
+          : state.project
+            ? state.activeTilesetId
+              ? undefined
+              : "Open a tileset first"
+            : "Open a project first",
+    }),
+    [
+      handleTilesetActionSelect,
+      handleTilesetExportSubmit,
+      importExportDialogMode,
+      state.activeTilesetId,
+      state.project,
+      tilesetExportGroups,
+    ],
+  );
+
+  return {
+    handleOpenImportDialog,
+    handleOpenExportDialog,
+    projectAction,
+    mapAction,
+    tilesetAction,
+  };
+}
+
+async function pickFile(accept: string): Promise<File | null> {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = accept;
+    input.onchange = () => resolve(input.files?.[0] ?? null);
+    input.click();
+  });
+}
+
+function getMapExportData(project: Project, map: TileMapData) {
+  const projectLayerGroups = project.layerGroups ?? [];
+  const allLayerIds = getAllLayerIds(map.layerOrder, projectLayerGroups);
+  const allGroupIds = getAllGroupIds(map.layerOrder, projectLayerGroups);
+  const layerIdSet = new Set<string>(allLayerIds as string[]);
+  const groupIdSet = new Set<string>(allGroupIds as string[]);
+
+  const objectLayers = (project.objectLayers ?? []).filter((layer) =>
+    layerIdSet.has(layer.id as string),
+  );
+  const objectLayerIdSet = new Set(
+    objectLayers.map((layer) => layer.id as string),
+  );
+
+  return {
+    layers: project.layers.filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    ),
+    imageLayers: (project.imageLayers ?? []).filter((layer) =>
+      layerIdSet.has(layer.id as string),
+    ),
+    layerGroups: projectLayerGroups.filter((group) =>
+      groupIdSet.has(group.id as string),
+    ),
+    objectLayers,
+    objects: (project.objects ?? []).filter((object) =>
+      objectLayerIdSet.has(object.layerId as string),
+    ),
+  };
+}
+
+function getReferencedThumbnailTilesets(
+  projectTilesets: Tileset[],
+  layers: TileLayer[],
+) {
+  const referencedTilesetIds = new Set<TilesetId>();
+
+  for (const layer of layers) {
+    for (const ref of Object.values(layer.tiles)) {
+      referencedTilesetIds.add(ref.tilesetId);
+    }
+  }
+
+  return projectTilesets
+    .filter((tileset) => referencedTilesetIds.has(tileset.id))
+    .map((tileset) => ({
+      id: tileset.id,
+      assetId: tileset.assetId,
+    }));
+}
+
+function buildMapExportGroups(project: Project): ImportExportAssetGroup[] {
+  const projectTilesets = [
+    ...project.tilesets,
+    ...(project.overrideTilesets ?? []),
+  ];
+
+  return [...project.mapGroups]
+    .sort((left, right) => left.order - right.order)
+    .map((group) => ({
+      id: group.id,
+      name: group.name,
+      assets: project.maps
+        .filter((map) => map.groupId === group.id)
+        .map((map) => {
+          const mapExportData = getMapExportData(project, map);
+
+          return {
+            id: map.id,
+            name: map.name,
+            groupId: group.id,
+            groupName: group.name,
+            subtitle: `${map.widthInTiles} × ${map.heightInTiles} tiles`,
+            thumbnail: {
+              kind: "map" as const,
+              orientation: map.orientation,
+              staggerAxis: map.staggerAxis,
+              staggerIndex: map.staggerIndex,
+              tileSize: map.tileSize,
+              widthInTiles: map.widthInTiles,
+              heightInTiles: map.heightInTiles,
+              layers: mapExportData.layers.map((layer) => ({
+                id: layer.id,
+                visible: layer.visible,
+                tiles: layer.tiles,
+              })),
+              tilesets: getReferencedThumbnailTilesets(
+                projectTilesets,
+                mapExportData.layers,
+              ),
+            },
+          };
+        }),
+    }))
+    .filter((group) => group.assets.length > 0);
+}
+
+function buildTilesetExportGroups(project: Project): ImportExportAssetGroup[] {
+  return [...project.tilesetGroups]
+    .sort((left, right) => left.order - right.order)
+    .map((group) => ({
+      id: group.id,
+      name: group.name,
+      assets: project.tilesets
+        .filter((tileset) => tileset.groupId === group.id)
+        .map((tileset) => ({
+          id: tileset.id,
+          name: tileset.name,
+          groupId: group.id,
+          groupName: group.name,
+          subtitle: `${tileset.imageWidth} × ${tileset.imageHeight} px`,
+          thumbnail: {
+            kind: "tileset" as const,
+            assetId: tileset.assetId,
+            tileSize: tileset.tileSize,
+            imageWidth: tileset.imageWidth,
+            imageHeight: tileset.imageHeight,
+          },
+        })),
+    }))
+    .filter((group) => group.assets.length > 0);
+}
+
+function getUniqueArchivePath(path: string, usedPaths: Set<string>): string {
+  if (!usedPaths.has(path)) {
+    usedPaths.add(path);
+    return path;
+  }
+
+  const extensionIndex = path.lastIndexOf(".");
+  const baseName = extensionIndex >= 0 ? path.slice(0, extensionIndex) : path;
+  const extension = extensionIndex >= 0 ? path.slice(extensionIndex) : "";
+  let suffix = 2;
+
+  while (usedPaths.has(`${baseName} (${suffix})${extension}`)) {
+    suffix += 1;
+  }
+
+  const nextPath = `${baseName} (${suffix})${extension}`;
+  usedPaths.add(nextPath);
+  return nextPath;
+}
diff --git a/src/components/dialogs/ImportExportDialog.tsx b/src/components/dialogs/ImportExportDialog.tsx
index cbaa91b..dc0a4c1 100644
--- a/src/components/dialogs/ImportExportDialog.tsx
+++ b/src/components/dialogs/ImportExportDialog.tsx
@@ -1,7 +1,13 @@
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Check, Download, Search, Upload, X } from "lucide-react";
 import { drawTileWithOrientation } from "@/components/editor/MapCanvas/texture-cache";
+import { Button } from "@/components/ui/Button";
 import { getAssetUrl } from "@/lib/db";
+import {
+  DEFAULT_RASTER_EXPORT_OPTIONS,
+  supportsRasterQuality,
+  supportsRasterTransparency,
+} from "@/lib/import-export-raster";
 import { getMapCellBounds, getMapPixelSize } from "@/lib/map-geometry";
 import {
   Dialog,
@@ -11,7 +17,17 @@ import {
   DialogTitle,
 } from "@/components/ui/Dialog";
 import { Input } from "@/components/ui/Input";
+import { Label } from "@/components/ui/Label";
 import { ScrollArea } from "@/components/ui/ScrollArea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/Select";
+import { Slider } from "@/components/ui/Slider";
+import { Switch } from "@/components/ui/Switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/Tabs";
 import { cn } from "@/lib/utils";
 import type {
@@ -21,6 +37,9 @@ import type {
   ImportExportAssetType,
   ImportExportDialogMode,
   ImportExportMapThumbnailProps,
+  ImportExportRasterExportOptions,
+  ImportExportRasterFileType,
+  ImportExportOptionId,
   ImportExportOptionAction,
   ImportExportOptionDefinition,
   ImportExportSelectableAssetId,
@@ -30,156 +49,182 @@ import type { ImportExportDialogProps } from "@/types/dialogs";
 
 const optionDefinitions: ImportExportOptionDefinition[] = [
   {
+    id: "project-native",
     assetType: "project",
     label: "2D Tiler Project (.2dp)",
     description: "Import or export Native 2D Tiler project files.",
     supportedNow: true,
   },
   {
+    id: "project-tiled",
     assetType: "project",
     label: "Tiled Project (.tiled-project)",
     description: "Tiled multi-map project container.",
     supportedNow: false,
   },
   {
+    id: "map-native",
     assetType: "map",
     label: "2D Tiler Map (.2dm)",
     description: "Import or export Native 2D Tiler map files.",
     supportedNow: true,
   },
   {
+    id: "map-image",
     assetType: "map",
-    label: "Image: PNG/JPG/WebP",
+    label: "Image: PNG/JPG/WebP/BMP/GIF",
     description: "Raster image export and import targets.",
-    supportedNow: false,
+    supportedNow: true,
   },
   {
+    id: "map-tiled-xml",
     assetType: "map",
     label: "Tiled XML Map File (.tmx, .xml)",
     description: "Tiled XML tile map format.",
     supportedNow: false,
   },
   {
+    id: "map-tiled-json",
     assetType: "map",
     label: "Tiled JSON Map File (.tmj, .json)",
     description: "Tiled JSON tile map format.",
     supportedNow: false,
   },
   {
+    id: "map-tiled-js",
     assetType: "map",
     label: "Tiled JavaScript Map File (.js)",
     description: "Tiled JavaScript export format.",
     supportedNow: false,
   },
   {
+    id: "map-tiled-lua",
     assetType: "map",
     label: "Tiled Lua File (.lua)",
     description: "Tiled Lua export format.",
     supportedNow: false,
   },
   {
+    id: "map-tiled-csv",
     assetType: "map",
     label: "Tiled CSV File (.csv)",
     description: "Tiled CSV tile layer format.",
     supportedNow: false,
   },
   {
+    id: "map-godot",
     assetType: "map",
     label: "Godot 4 Scene File (.tscn)",
     description: "Godot 4 scene export target.",
     supportedNow: false,
   },
   {
+    id: "map-unity",
     assetType: "map",
     label: "Unity",
     description: "Unity map export target.",
     supportedNow: false,
   },
   {
+    id: "map-gamemaker-room",
     assetType: "map",
     label: "GameMaker room File (.room.gmx)",
     description: "GameMaker room file target.",
     supportedNow: false,
   },
   {
+    id: "map-gamemaker-studio-2",
     assetType: "map",
     label: "GameMaker Studio 2 file (.yy)",
     description: "GameMaker Studio 2 room data.",
     supportedNow: false,
   },
   {
+    id: "map-defold-tilemap",
     assetType: "map",
     label: "Defold Tile Map (.tilemap)",
     description: "Defold tile map resource.",
     supportedNow: false,
   },
   {
+    id: "map-defold-collection",
     assetType: "map",
     label: "Defold Collection (.collection)",
     description: "Defold collection scene target.",
     supportedNow: false,
   },
   {
+    id: "map-tide",
     assetType: "map",
     label: "tIDE Map Format (.tide)",
     description: "tIDE map export format.",
     supportedNow: false,
   },
   {
+    id: "map-tbin",
     assetType: "map",
     label: "tBIN Map Format (.tbin)",
     description: "tIDE binary map export format.",
     supportedNow: false,
   },
   {
+    id: "map-mappy-fmp",
     assetType: "map",
     label: "Mappy FMP (.fmp)",
     description: "Mappy FMP export format.",
     supportedNow: false,
   },
   {
+    id: "tileset-native",
     assetType: "tileset",
     label: "2D Tiler Tileset (.2dt)",
     description: "Import or export native 2D Tiler tileset files.",
     supportedNow: true,
   },
   {
+    id: "tileset-image",
     assetType: "tileset",
-    label: "Image: PNG/JPG/WebP",
+    label: "Image: PNG/JPG/WebP/BMP/GIF",
     description: "Raster image tileset target.",
-    supportedNow: false,
+    supportedNow: true,
   },
   {
+    id: "tileset-tiled-xml",
     assetType: "tileset",
     label: "Tiled XML Tileset File (.tsx, .xml)",
     description: "Tiled XML tileset format.",
     supportedNow: false,
   },
   {
+    id: "tileset-tiled-json",
     assetType: "tileset",
     label: "Tiled JSON Tileset File (.tsj, .json)",
     description: "Tiled JSON tileset format.",
     supportedNow: false,
   },
   {
+    id: "tileset-tiled-lua",
     assetType: "tileset",
     label: "Tiled Lua File (.lua)",
     description: "Tiled Lua tileset format.",
     supportedNow: false,
   },
   {
+    id: "tileset-unity",
     assetType: "tileset",
     label: "Unity (.asset)",
     description: "Unity tileset asset target.",
     supportedNow: false,
   },
   {
+    id: "tileset-godot",
     assetType: "tileset",
     label: "Godot (.tres)",
     description: "Godot tileset resource format.",
     supportedNow: false,
   },
   {
+    id: "tileset-rpg-maker",
     assetType: "tileset",
     label: "RPG Maker",
     description: "RPG Maker tileset target.",
@@ -189,6 +234,186 @@ const optionDefinitions: ImportExportOptionDefinition[] = [
 
 const assetTabs: ImportExportAssetType[] = ["project", "map", "tileset"];
 const LARGE_SELECTOR_THRESHOLD = 10;
+const RASTER_EXPORT_FORMAT_OPTIONS: {
+  value: ImportExportRasterFileType;
+  label: string;
+}[] = [
+  { value: "png", label: "PNG" },
+  { value: "jpg", label: "JPG" },
+  { value: "webp", label: "WebP" },
+  { value: "bmp", label: "BMP" },
+  { value: "gif", label: "GIF" },
+];
+
+function isRasterImageOption(optionId: ImportExportOptionId) {
+  return optionId === "map-image" || optionId === "tileset-image";
+}
+
+function createInitialRasterExportOptionsState() {
+  return {
+    map: { ...DEFAULT_RASTER_EXPORT_OPTIONS },
+    tileset: { ...DEFAULT_RASTER_EXPORT_OPTIONS },
+  } satisfies Record<"map" | "tileset", ImportExportRasterExportOptions>;
+}
+
+function getRasterExportButtonLabel(format: ImportExportRasterFileType) {
+  if (format === "jpg") return "Export as JPG";
+  if (format === "webp") return "Export as WebP";
+  return `Export as ${format.toUpperCase()}`;
+}
+
+interface RasterExportOptionsPanelProps {
+  options: ImportExportRasterExportOptions;
+  disabled: boolean;
+  onOptionsChange: (options: ImportExportRasterExportOptions) => void;
+  onExport: (options: ImportExportRasterExportOptions) => void;
+}
+
+function RasterExportOptionsPanel({
+  options,
+  disabled,
+  onOptionsChange,
+  onExport,
+}: RasterExportOptionsPanelProps) {
+  const formatSelectId = useId();
+  const qualitySliderId = useId();
+  const transparencySwitchId = useId();
+  const qualitySupported = supportsRasterQuality(options.fileType);
+  const transparencySupported = supportsRasterTransparency(options.fileType);
+
+  return (
+    <section className="space-y-4 rounded-2xl border border-primary/30 bg-primary/6 px-4 py-4">
+      <div className="space-y-1">
+        <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+          Export settings
+        </div>
+        <p className="text-sm text-foreground">
+          Choose the raster file type and any format-specific options.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor={formatSelectId} className="text-xs">
+            File type
+          </Label>
+          <Select
+            name={formatSelectId}
+            value={options.fileType}
+            onValueChange={(value) => {
+              const fileType = value as ImportExportRasterFileType;
+              onOptionsChange({
+                ...options,
+                fileType,
+                transparency: supportsRasterTransparency(fileType)
+                  ? options.transparency
+                  : false,
+              });
+            }}
+          >
+            <SelectTrigger
+              id={formatSelectId}
+              className="h-10 w-full rounded-xl px-3"
+            >
+              <SelectValue placeholder="Choose a file type" />
+            </SelectTrigger>
+            <SelectContent>
+              {RASTER_EXPORT_FORMAT_OPTIONS.map((formatOption) => (
+                <SelectItem key={formatOption.value} value={formatOption.value}>
+                  {formatOption.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {qualitySupported ? (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <Label htmlFor={qualitySliderId} className="text-xs">
+                Compression quality
+              </Label>
+              <span className="text-[10px] font-mono uppercase tracking-[0.08em] text-muted-foreground">
+                {Math.round(options.quality)}%
+              </span>
+            </div>
+            <Slider
+              id={qualitySliderId}
+              name={qualitySliderId}
+              min={1}
+              max={100}
+              step={1}
+              value={[options.quality]}
+              onValueChange={(value) => {
+                const [quality = DEFAULT_RASTER_EXPORT_OPTIONS.quality] = value;
+                onOptionsChange({ ...options, quality });
+              }}
+            />
+            <p className="text-xs text-muted-foreground">
+              Lower quality creates smaller files. Higher quality preserves more
+              detail.
+            </p>
+          </div>
+        ) : transparencySupported ? (
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-3">
+              <Label htmlFor={transparencySwitchId} className="text-xs">
+                Enable Transparency
+              </Label>
+              <Switch
+                id={transparencySwitchId}
+                name={transparencySwitchId}
+                checked={options.transparency}
+                onCheckedChange={(checked) =>
+                  onOptionsChange({ ...options, transparency: checked })
+                }
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              If transparency is disabled, transparent areas will be filled with
+              white in the exported image.
+            </p>
+          </div>
+        ) : (
+          <div></div>
+        )}
+      </div>
+
+      {transparencySupported &&
+      !qualitySupported ? null : transparencySupported ? (
+        <div className="flex items-center justify-between gap-3 rounded-2xl border border-border-visible bg-background/80 px-4 py-3">
+          <div className="space-y-1">
+            <Label htmlFor={transparencySwitchId} className="text-xs">
+              Enable transparency
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              If transparency is disabled, transparent areas will be filled with
+              white in the exported image.
+            </p>
+          </div>
+          <Switch
+            id={transparencySwitchId}
+            name={transparencySwitchId}
+            checked={options.transparency}
+            onCheckedChange={(checked) =>
+              onOptionsChange({ ...options, transparency: checked })
+            }
+          />
+        </div>
+      ) : null}
+
+      <div className="flex justify-end">
+        <Button
+          type="button"
+          onClick={() => onExport(options)}
+          disabled={disabled}
+        >
+          {getRasterExportButtonLabel(options.fileType)}
+        </Button>
+      </div>
+    </section>
+  );
+}
 
 function getActionForAssetType(
   assetType: ImportExportAssetType,
@@ -645,7 +870,9 @@ function LargeExportAssetPicker({
         <div className="overflow-hidden rounded-2xl border border-border-visible bg-background shadow-sm">
           <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-3 border-b border-border-visible bg-secondary/40 px-4 py-2 text-[10px] font-mono uppercase tracking-[0.14em] text-muted-foreground sm:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_auto]">
             <span>{assetType === "map" ? "Map" : "Tileset"}</span>
-            <span className="hidden sm:block">Group</span>
+            <span className="hidden px-2 text-left sm:block sm:justify-self-start">
+              Group
+            </span>
             <span className="text-right">Status</span>
           </div>
           <ScrollArea className="h-50">
@@ -677,8 +904,8 @@ function LargeExportAssetPicker({
                         </span>
                       </div>
                     </div>
-                    <div className="hidden min-w-0 items-center sm:flex">
-                      <span className="truncate rounded-full border border-border-visible bg-secondary/50 px-2 py-1 font-mono text-[10px] uppercase tracking-[0.08em] text-muted-foreground">
+                    <div className="hidden min-w-0 sm:flex sm:justify-self-start sm:items-start sm:justify-start">
+                      <span className="truncate rounded-full border border-border-visible bg-secondary/50 px-2 py-1 text-left font-mono text-[10px] uppercase tracking-[0.08em] text-muted-foreground">
                         {asset.groupName}
                       </span>
                     </div>
@@ -717,6 +944,10 @@ export function ImportExportDialog({
   const [selectedIdsByAssetType, setSelectedIdsByAssetType] = useState(() =>
     createSelectedIdsState({ mapAction, tilesetAction }),
   );
+  const [expandedRasterOptionId, setExpandedRasterOptionId] =
+    useState<ImportExportOptionId | null>(null);
+  const [rasterExportOptionsByAssetType, setRasterExportOptionsByAssetType] =
+    useState(createInitialRasterExportOptionsState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const modeCopy = getModeCopy(mode);
   const ModeIcon = modeCopy.icon;
@@ -734,17 +965,32 @@ export function ImportExportDialog({
     });
   }, [mode, open, mapAction, tilesetAction]);
 
+  useEffect(() => {
+    if (!open) {
+      setExpandedRasterOptionId(null);
+      setRasterExportOptionsByAssetType(
+        createInitialRasterExportOptionsState(),
+      );
+    }
+  }, [open]);
+
   async function handleActionSelect(
     action: ImportExportOptionAction,
     selectedIds: ImportExportSelectableAssetId[],
+    optionId: ImportExportOptionId,
+    rasterExportOptions?: ImportExportRasterExportOptions,
   ) {
     setIsSubmitting(true);
 
     try {
       if (mode === "export" && action.exportSelection) {
-        await action.exportSelection.onSubmit(selectedIds);
+        await action.exportSelection.onSubmit(
+          selectedIds,
+          optionId,
+          rasterExportOptions,
+        );
       } else {
-        await action.onSelect?.();
+        await action.onSelect?.(optionId, rasterExportOptions);
       }
 
       onOpenChange(false);
@@ -860,6 +1106,10 @@ export function ImportExportDialog({
             const exportSelection =
               mode === "export" ? action.exportSelection : undefined;
             const selectedIds = selectedIdsByAssetType[assetType] ?? [];
+            const rasterExportOptions =
+              assetType === "project"
+                ? null
+                : rasterExportOptionsByAssetType[assetType];
 
             return (
               <TabsContent
@@ -887,6 +1137,8 @@ export function ImportExportDialog({
                     ) : null}
 
                     {assetOptions.map((option) => {
+                      const isRasterOption =
+                        mode === "export" && isRasterImageOption(option.id);
                       const hasSelection =
                         exportSelection === undefined || selectedIds.length > 0;
                       const isEnabled =
@@ -912,59 +1164,96 @@ export function ImportExportDialog({
                         : "Coming Soon";
 
                       return (
-                        <button
-                          key={option.label}
-                          type="button"
-                          disabled={!isEnabled}
-                          onClick={() => {
-                            if (!isEnabled) return;
-                            void handleActionSelect(action, selectedIds);
-                          }}
-                          aria-label={`${mode === "import" ? "Import" : "Export"} ${option.label}`}
-                          className={cn(
-                            "flex w-full items-start justify-between gap-4 rounded-2xl border px-4 py-4 text-left transition-colors",
-                            isEnabled
-                              ? "border-border-visible bg-background shadow-sm hover:border-primary/50 hover:bg-secondary/60 focus-visible:border-primary focus-visible:outline-none"
-                              : option.supportedNow
-                                ? "cursor-not-allowed border-border/70 bg-muted/20 text-muted-foreground"
-                                : "cursor-not-allowed border-dashed border-border-visible bg-secondary/25 text-muted-foreground",
-                          )}
-                        >
-                          <div className="min-w-0 space-y-1">
-                            <div
-                              className={cn(
-                                "text-sm font-medium",
-                                isEnabled
-                                  ? "text-foreground"
-                                  : "text-muted-foreground",
-                              )}
-                            >
-                              {option.label}
-                            </div>
-                            <p
-                              className={cn(
-                                "text-xs leading-5",
-                                isEnabled
-                                  ? "text-muted-foreground"
-                                  : "text-muted-foreground/80",
-                              )}
-                            >
-                              {option.description}
-                            </p>
-                          </div>
-                          <span
+                        <div key={option.id} className="space-y-3">
+                          <button
+                            type="button"
+                            disabled={!isEnabled}
+                            onClick={() => {
+                              if (!isEnabled) return;
+                              if (isRasterOption) {
+                                setExpandedRasterOptionId((currentValue) =>
+                                  currentValue === option.id ? null : option.id,
+                                );
+                                return;
+                              }
+                              void handleActionSelect(
+                                action,
+                                selectedIds,
+                                option.id,
+                              );
+                            }}
+                            aria-label={`${mode === "import" ? "Import" : "Export"} ${option.label}`}
                             className={cn(
-                              "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.08em]",
+                              "flex w-full items-start justify-between gap-4 rounded-2xl border px-4 py-4 text-left transition-colors",
                               isEnabled
-                                ? "border-primary/40 bg-primary/10 text-foreground"
+                                ? "border-border-visible bg-background shadow-sm hover:border-primary/50 hover:bg-secondary/60 focus-visible:border-primary focus-visible:outline-none"
                                 : option.supportedNow
-                                  ? "border-border-visible bg-background/80 text-muted-foreground"
-                                  : "border-border-visible bg-background/80 text-muted-foreground",
+                                  ? "cursor-not-allowed border-border/70 bg-muted/20 text-muted-foreground"
+                                  : "cursor-not-allowed border-dashed border-border-visible bg-secondary/25 text-muted-foreground",
                             )}
                           >
-                            {statusLabel}
-                          </span>
-                        </button>
+                            <div className="min-w-0 space-y-1">
+                              <div
+                                className={cn(
+                                  "text-sm font-medium",
+                                  isEnabled
+                                    ? "text-foreground"
+                                    : "text-muted-foreground",
+                                )}
+                              >
+                                {option.label}
+                              </div>
+                              <p
+                                className={cn(
+                                  "text-xs leading-5",
+                                  isEnabled
+                                    ? "text-muted-foreground"
+                                    : "text-muted-foreground/80",
+                                )}
+                              >
+                                {option.description}
+                              </p>
+                            </div>
+                            <span
+                              className={cn(
+                                "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-mono uppercase tracking-[0.08em]",
+                                isEnabled
+                                  ? "border-primary/40 bg-primary/10 text-foreground"
+                                  : option.supportedNow
+                                    ? "border-border-visible bg-background/80 text-muted-foreground"
+                                    : "border-border-visible bg-background/80 text-muted-foreground",
+                              )}
+                            >
+                              {statusLabel}
+                            </span>
+                          </button>
+
+                          {isRasterOption &&
+                          expandedRasterOptionId === option.id &&
+                          rasterExportOptions ? (
+                            <RasterExportOptionsPanel
+                              options={rasterExportOptions}
+                              disabled={!isEnabled}
+                              onOptionsChange={(nextOptions) =>
+                                setRasterExportOptionsByAssetType(
+                                  (currentValue) => ({
+                                    ...currentValue,
+                                    [assetType]: nextOptions,
+                                  }),
+                                )
+                              }
+                              onExport={(nextOptions) => {
+                                if (!isEnabled) return;
+                                void handleActionSelect(
+                                  action,
+                                  selectedIds,
+                                  option.id,
+                                  nextOptions,
+                                );
+                              }}
+                            />
+                          ) : null}
+                        </div>
                       );
                     })}
                   </div>
diff --git a/src/lib/import-export-raster.ts b/src/lib/import-export-raster.ts
new file mode 100644
index 0000000..bf6b44b
--- /dev/null
+++ b/src/lib/import-export-raster.ts
@@ -0,0 +1,475 @@
+import {
+  drawImageLayerWithOrientation,
+  drawTileWithOrientation,
+} from "@/components/editor/MapCanvas/texture-cache";
+import { drawMapObjects } from "@/components/editor/MapCanvas/draw-map-objects";
+import { getAsset, saveAsset } from "@/lib/db";
+import { generateAssetId } from "@/lib/ids";
+import { getMapCellOrigin, getMapPixelSize } from "@/lib/map-geometry";
+import type {
+  AssetId,
+  ImportExportRasterAsset,
+  ImportExportRasterExportOptions,
+  ImportExportRasterFileType,
+  ImportExportRenderableLayer,
+  ImageLayer,
+  LayerGroup,
+  LayerId,
+  LayerGroupId,
+  MapObject,
+  ObjectLayer,
+  TileLayer,
+  TileMapData,
+  TileRef,
+  Tileset,
+} from "@/types";
+
+export const RASTER_IMAGE_IMPORT_ACCEPT =
+  "image/png,image/jpeg,image/webp,image/bmp,image/gif";
+
+export const DEFAULT_RASTER_EXPORT_OPTIONS: ImportExportRasterExportOptions = {
+  fileType: "png",
+  quality: 92,
+  transparency: true,
+};
+
+const RASTER_MIME_TYPES: Record<ImportExportRasterFileType, string> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  gif: "image/gif",
+};
+
+const RASTER_FILE_EXTENSIONS: Record<ImportExportRasterFileType, string> = {
+  png: ".png",
+  jpg: ".jpg",
+  webp: ".webp",
+  bmp: ".bmp",
+  gif: ".gif",
+};
+
+const OPAQUE_BACKGROUND = "#ffffff";
+
+export function getRasterFileExtension(
+  format: ImportExportRasterFileType,
+): string {
+  return RASTER_FILE_EXTENSIONS[format];
+}
+
+export function getRasterMimeType(format: ImportExportRasterFileType): string {
+  return RASTER_MIME_TYPES[format];
+}
+
+export function supportsRasterQuality(
+  format: ImportExportRasterFileType,
+): boolean {
+  return format === "jpg" || format === "webp";
+}
+
+export function supportsRasterTransparency(
+  format: ImportExportRasterFileType,
+): boolean {
+  return format === "png" || format === "webp" || format === "gif";
+}
+
+export async function pickRasterImageFile(): Promise<File | null> {
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = RASTER_IMAGE_IMPORT_ACCEPT;
+    input.onchange = () => resolve(input.files?.[0] ?? null);
+    input.click();
+  });
+}
+
+export async function importRasterAssetFromFile(
+  file: File,
+): Promise<ImportExportRasterAsset> {
+  const mimeType = normalizeRasterMimeType(file);
+  const buffer = await file.arrayBuffer();
+  const image = await loadImageFromBlob(new Blob([buffer], { type: mimeType }));
+  const assetId = generateAssetId();
+  await saveAsset(assetId, buffer, mimeType);
+
+  return {
+    assetId,
+    fileName: file.name,
+    name: file.name.replace(/\.[^/.]+$/, "") || "Imported Image",
+    mimeType,
+    width: image.naturalWidth,
+    height: image.naturalHeight,
+  };
+}
+
+export async function renderTilesetToCanvas(
+  tileset: Tileset,
+): Promise<HTMLCanvasElement> {
+  const image = await loadImageFromAssetId(tileset.assetId);
+  if (!image) {
+    throw new Error("Unable to load tileset image asset.");
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Unable to create 2D canvas context.");
+  }
+
+  context.imageSmoothingEnabled = false;
+  context.drawImage(image, 0, 0);
+  return canvas;
+}
+
+export async function renderMapToCanvas(
+  map: TileMapData,
+  layers: TileLayer[],
+  imageLayers: ImageLayer[],
+  layerGroups: LayerGroup[],
+  tilesets: Tileset[],
+  objectLayers: ObjectLayer[] = [],
+  objects: MapObject[] = [],
+): Promise<HTMLCanvasElement> {
+  const pixelSize = getMapPixelSize(map, 1);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.ceil(pixelSize.width));
+  canvas.height = Math.max(1, Math.ceil(pixelSize.height));
+
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Unable to create 2D canvas context.");
+  }
+
+  context.imageSmoothingEnabled = false;
+
+  const tilesetImageEntries = await Promise.all(
+    tilesets.map(
+      async (tileset) =>
+        [tileset.id, await loadImageFromAssetId(tileset.assetId)] as const,
+    ),
+  );
+  const tilesetImageMap = new Map(tilesetImageEntries);
+
+  const imageLayerAssetIds = [
+    ...new Set(imageLayers.map((layer) => layer.assetId)),
+  ];
+  const imageLayerEntries = await Promise.all(
+    imageLayerAssetIds.map(
+      async (assetId) =>
+        [assetId, await loadImageFromAssetId(assetId)] as const,
+    ),
+  );
+  const imageLayerMap = new Map(imageLayerEntries);
+
+  const orderedLayers = flattenRenderableLayers(
+    map.layerOrder,
+    layers,
+    imageLayers,
+    layerGroups,
+  );
+
+  for (const entry of orderedLayers) {
+    if (entry.kind === "image") {
+      if (!entry.layer.visible) continue;
+      const image = imageLayerMap.get(entry.layer.assetId);
+      if (!image) continue;
+      context.save();
+      context.globalAlpha =
+        Math.max(0, Math.min(100, entry.layer.opacity ?? 100)) / 100;
+      drawImageLayerWithOrientation(context, image, entry.layer);
+      context.restore();
+      continue;
+    }
+
+    if (!entry.layer.visible) continue;
+
+    for (const [position, ref] of Object.entries(entry.layer.tiles) as [
+      string,
+      TileRef,
+    ][]) {
+      const image = tilesetImageMap.get(ref.tilesetId);
+      if (!image) continue;
+
+      const [x, y] = position.split(",").map((value) => Number(value));
+      if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+      const origin = getMapCellOrigin(map, 1, x, y);
+      drawTileWithOrientation(
+        context,
+        image,
+        ref,
+        origin.x,
+        origin.y,
+        map.tileSize,
+      );
+    }
+  }
+
+  drawMapObjects(context, objectLayers, objects, null, null, null, null, 1);
+
+  return canvas;
+}
+
+export async function encodeCanvasAsRaster(
+  canvas: HTMLCanvasElement,
+  options: ImportExportRasterExportOptions,
+): Promise<Blob> {
+  const requiresOpaqueBackground =
+    !options.transparency || !supportsRasterTransparency(options.fileType);
+  const workingCanvas = requiresOpaqueBackground
+    ? copyCanvasWithBackground(canvas, OPAQUE_BACKGROUND)
+    : canvas;
+
+  switch (options.fileType) {
+    case "png":
+      return canvasToBlob(workingCanvas, getRasterMimeType("png"));
+    case "jpg":
+      return canvasToBlob(
+        workingCanvas,
+        getRasterMimeType("jpg"),
+        normalizeRasterQuality(options.quality),
+      );
+    case "webp":
+      return canvasToBlob(
+        workingCanvas,
+        getRasterMimeType("webp"),
+        normalizeRasterQuality(options.quality),
+      );
+    case "gif":
+      return encodeGif(workingCanvas, options.transparency);
+    case "bmp":
+      return encodeBmp(workingCanvas);
+    default:
+      throw new Error("Unsupported raster export format.");
+  }
+}
+
+function flattenRenderableLayers(
+  layerOrder: readonly (LayerId | LayerGroupId)[],
+  layers: readonly TileLayer[],
+  imageLayers: readonly ImageLayer[],
+  groups: readonly LayerGroup[],
+  parentVisible = true,
+  parentLocked = false,
+): ImportExportRenderableLayer[] {
+  const tileLayerMap = new Map(
+    layers.map((layer) => [layer.id as string, layer]),
+  );
+  const imageLayerMap = new Map(
+    imageLayers.map((layer) => [layer.id as string, layer]),
+  );
+  const groupMap = new Map(groups.map((group) => [group.id as string, group]));
+
+  function visit(
+    nextLayerOrder: readonly (LayerId | LayerGroupId)[],
+    nextParentVisible: boolean,
+    nextParentLocked: boolean,
+  ): ImportExportRenderableLayer[] {
+    const orderedLayers: ImportExportRenderableLayer[] = [];
+
+    for (const id of nextLayerOrder) {
+      const group = groupMap.get(id as string);
+      if (group) {
+        orderedLayers.push(
+          ...visit(
+            group.childOrder,
+            nextParentVisible && group.visible,
+            nextParentLocked || group.locked,
+          ),
+        );
+        continue;
+      }
+
+      const tileLayer = tileLayerMap.get(id as string);
+      if (tileLayer) {
+        orderedLayers.push({
+          kind: "tile",
+          layer: {
+            ...tileLayer,
+            visible: nextParentVisible && tileLayer.visible,
+            locked: nextParentLocked || tileLayer.locked,
+          },
+        });
+        continue;
+      }
+
+      const imageLayer = imageLayerMap.get(id as string);
+      if (imageLayer) {
+        orderedLayers.push({
+          kind: "image",
+          layer: {
+            ...imageLayer,
+            visible: nextParentVisible && imageLayer.visible,
+            locked: nextParentLocked || imageLayer.locked,
+          },
+        });
+      }
+    }
+
+    return orderedLayers;
+  }
+
+  return visit(layerOrder, parentVisible, parentLocked);
+}
+
+async function loadImageFromAssetId(
+  assetId: AssetId,
+): Promise<HTMLImageElement | null> {
+  const record = await getAsset(assetId);
+  if (!record) return null;
+  return loadImageFromBlob(new Blob([record.data], { type: record.mimeType }));
+}
+
+function normalizeRasterMimeType(file: File): string {
+  if (file.type) return file.type;
+
+  const lowerName = file.name.toLowerCase();
+  if (lowerName.endsWith(".jpg") || lowerName.endsWith(".jpeg")) {
+    return getRasterMimeType("jpg");
+  }
+  if (lowerName.endsWith(".webp")) {
+    return getRasterMimeType("webp");
+  }
+  if (lowerName.endsWith(".bmp")) {
+    return getRasterMimeType("bmp");
+  }
+  if (lowerName.endsWith(".gif")) {
+    return getRasterMimeType("gif");
+  }
+  return getRasterMimeType("png");
+}
+
+async function loadImageFromBlob(blob: Blob): Promise<HTMLImageElement> {
+  const objectUrl = URL.createObjectURL(blob);
+
+  try {
+    const image = new Image();
+    image.src = objectUrl;
+    await image.decode();
+    return image;
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+
+function normalizeRasterQuality(quality: number): number {
+  return Math.max(0, Math.min(100, quality)) / 100;
+}
+
+function copyCanvasWithBackground(
+  canvas: HTMLCanvasElement,
+  background: string,
+): HTMLCanvasElement {
+  const copy = document.createElement("canvas");
+  copy.width = canvas.width;
+  copy.height = canvas.height;
+  const context = copy.getContext("2d");
+
+  if (!context) {
+    throw new Error("Unable to create 2D canvas context.");
+  }
+
+  context.imageSmoothingEnabled = false;
+  context.fillStyle = background;
+  context.fillRect(0, 0, copy.width, copy.height);
+  context.drawImage(canvas, 0, 0);
+  return copy;
+}
+
+function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality?: number,
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          resolve(blob);
+          return;
+        }
+
+        reject(new Error(`Failed to encode canvas as ${mimeType}.`));
+      },
+      mimeType,
+      quality,
+    );
+  });
+}
+
+async function encodeGif(
+  canvas: HTMLCanvasElement,
+  transparency: boolean,
+): Promise<Blob> {
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Unable to create 2D canvas context.");
+  }
+
+  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+  const rgba = new Uint8Array(imageData.data);
+  const { GIFEncoder, quantize, applyPalette } = await import("gifenc");
+  const palette = quantize(rgba, 256);
+  const indexed = applyPalette(rgba, palette);
+  const gif = GIFEncoder();
+  gif.writeFrame(indexed, canvas.width, canvas.height, {
+    palette,
+    delay: 0,
+    transparent: transparency,
+  });
+  gif.finish();
+  return new Blob([new Uint8Array(gif.bytes())], {
+    type: getRasterMimeType("gif"),
+  });
+}
+
+function encodeBmp(canvas: HTMLCanvasElement): Blob {
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Unable to create 2D canvas context.");
+  }
+
+  const { width, height } = canvas;
+  const imageData = context.getImageData(0, 0, width, height);
+  const rowSize = Math.ceil((width * 3) / 4) * 4;
+  const pixelArraySize = rowSize * height;
+  const fileSize = 54 + pixelArraySize;
+  const buffer = new ArrayBuffer(fileSize);
+  const bytes = new Uint8Array(buffer);
+  const view = new DataView(buffer);
+
+  bytes[0] = 0x42;
+  bytes[1] = 0x4d;
+  view.setUint32(2, fileSize, true);
+  view.setUint32(10, 54, true);
+  view.setUint32(14, 40, true);
+  view.setInt32(18, width, true);
+  view.setInt32(22, height, true);
+  view.setUint16(26, 1, true);
+  view.setUint16(28, 24, true);
+  view.setUint32(34, pixelArraySize, true);
+  view.setInt32(38, 2835, true);
+  view.setInt32(42, 2835, true);
+
+  const pixelData = imageData.data;
+  let offset = 54;
+
+  for (let y = height - 1; y >= 0; y -= 1) {
+    const rowStart = y * width * 4;
+    for (let x = 0; x < width; x += 1) {
+      const sourceIndex = rowStart + x * 4;
+      bytes[offset] = pixelData[sourceIndex + 2];
+      bytes[offset + 1] = pixelData[sourceIndex + 1];
+      bytes[offset + 2] = pixelData[sourceIndex];
+      offset += 3;
+    }
+
+    while ((offset - 54) % rowSize !== 0) {
+      bytes[offset] = 0;
+      offset += 1;
+    }
+  }
+
+  return new Blob([buffer], { type: getRasterMimeType("bmp") });
+}
diff --git a/src/types/import-export.ts b/src/types/import-export.ts
index e7aff01..3fcff08 100644
--- a/src/types/import-export.ts
+++ b/src/types/import-export.ts
@@ -1,4 +1,10 @@
-import type { AssetId, TileLayer, TileSize, TilesetId } from "./schema";
+import type {
+  AssetId,
+  ImageLayer,
+  TileLayer,
+  TileSize,
+  TilesetId,
+} from "./schema";
 import type {
   MapOrientation,
   MapStaggerAxis,
@@ -9,6 +15,65 @@ export type ImportExportDialogMode = "import" | "export";
 
 export type ImportExportAssetType = "project" | "map" | "tileset";
 
+export type ImportExportOptionId =
+  | "project-native"
+  | "project-tiled"
+  | "map-native"
+  | "map-image"
+  | "map-tiled-xml"
+  | "map-tiled-json"
+  | "map-tiled-js"
+  | "map-tiled-lua"
+  | "map-tiled-csv"
+  | "map-godot"
+  | "map-unity"
+  | "map-gamemaker-room"
+  | "map-gamemaker-studio-2"
+  | "map-defold-tilemap"
+  | "map-defold-collection"
+  | "map-tide"
+  | "map-tbin"
+  | "map-mappy-fmp"
+  | "tileset-native"
+  | "tileset-image"
+  | "tileset-tiled-xml"
+  | "tileset-tiled-json"
+  | "tileset-tiled-lua"
+  | "tileset-unity"
+  | "tileset-godot"
+  | "tileset-rpg-maker";
+
+export type ImportExportRasterFileType = "png" | "jpg" | "webp" | "bmp" | "gif";
+
+export interface ImportExportRasterExportOptions {
+  fileType: ImportExportRasterFileType;
+  quality: number;
+  transparency: boolean;
+}
+
+export interface ImportExportRasterAsset {
+  assetId: AssetId;
+  fileName: string;
+  name: string;
+  mimeType: string;
+  width: number;
+  height: number;
+}
+
+export interface ImportExportRenderableTileLayer {
+  kind: "tile";
+  layer: TileLayer;
+}
+
+export interface ImportExportRenderableImageLayer {
+  kind: "image";
+  layer: ImageLayer;
+}
+
+export type ImportExportRenderableLayer =
+  | ImportExportRenderableTileLayer
+  | ImportExportRenderableImageLayer;
+
 export type ImportExportSelectableAssetId = string;
 
 export interface ImportExportMapThumbnailTileset {
@@ -72,6 +137,8 @@ export interface ImportExportSelectionConfig {
   helperText?: string;
   onSubmit: (
     selectedIds: ImportExportSelectableAssetId[],
+    optionId: ImportExportOptionId,
+    rasterExportOptions?: ImportExportRasterExportOptions,
   ) => void | Promise<void>;
 }
 
@@ -107,12 +174,16 @@ export interface ImportExportTilesetThumbnailProps {
 
 export interface ImportExportOptionAction {
   enabled: boolean;
-  onSelect?: () => void;
+  onSelect?: (
+    optionId: ImportExportOptionId,
+    rasterExportOptions?: ImportExportRasterExportOptions,
+  ) => void | Promise<void>;
   disabledReason?: string;
   exportSelection?: ImportExportSelectionConfig;
 }
 
 export interface ImportExportOptionDefinition {
+  id: ImportExportOptionId;
   assetType: ImportExportAssetType;
   label: string;
   description: string;