pixelweaver 0.1.0

package/src/lib/leveleditor/LevelEditorViewport.svelte

@@ -0,0 +1,1808 @@
+<!--
+  LevelEditorViewport -- interactive canvas for the tilemap / level editor.
+
+  Renders the current map-state on an HTML <canvas> with pan and zoom,
+  shows a hover highlight on the cell under the pointer, and paints a
+  placeholder tile on click into the active tile layer. Ships with a
+  header button that exports the map to Tiled JSON (.tmj).
+
+  Scope: this is just enough UI to render and paint. A real tile picker,
+  multi-tool support, layer controls, and entity/collision editing are
+  future work.
+-->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import DownloadIcon from '~icons/lucide/download';
+  import PlusIcon from '~icons/lucide/plus';
+  import TrashIcon from '~icons/lucide/trash-2';
+  import ChevronDownIcon from '~icons/lucide/chevron-down';
+  import ChevronUpIcon from '~icons/lucide/chevron-up';
+  import LayersIcon from '~icons/lucide/layers';
+  import MousePointerClickIcon from '~icons/lucide/mouse-pointer-click';
+  import BoxSelectIcon from '~icons/lucide/box-select';
+  import PentagonIcon from '~icons/lucide/pentagon';
+  import PaintbrushIcon from '~icons/lucide/paintbrush';
+  import { mapState, type TilePlacement, type EntityPlacement, type MapLayer } from './map-state.svelte.js';
+  import { exportTiledMap, buildTilesetSpritesheet, pixelBufferToPngBlob } from './tiled-export.js';
+  import { depthSort, type RenderItem } from './depth-sort.js';
+  import { screenToIso } from '../iso/iso-math.js';
+  import { ZOOM_STEPS } from '../canvas/zoom-utils.js';
+  import { tileSourceRegistry, tileRefId } from './tile-source-registry.svelte.js';
+  import { notificationState } from '../core/notification-state.svelte.js';
+  import { downloadCompanionFiles, type DownloadFileOptions } from '../export/download.js';
+  import { dispatch, undoLast, redoLast } from '../core/dispatcher.js';
+
+  // --- Local viewport state (not shared with the pixel canvas) ---
+
+  // Panning offset in screen pixels.
+  let panX = $state(0);
+  let panY = $state(0);
+  // Integer zoom (reuses the ZOOM_STEPS set used by the pixel canvas).
+  let zoom = $state(2);
+
+  // Cell currently under the cursor (null when pointer leaves the canvas).
+  let hoverCol = $state<number | null>(null);
+  let hoverRow = $state<number | null>(null);
+
+  // Whether the grid overlay is drawn. Toggled with the G key.
+  let showGrid = $state(true);
+
+  // --- Layer panel state ---
+
+  // Whether the layer list overlay is expanded in the viewport.
+  let layerPanelOpen = $state(true);
+  // Whether the "add layer" type dropdown is visible.
+  let addLayerDropdownOpen = $state(false);
+
+  // --- Layer drag-to-reorder state ---
+
+  let layerDragFromIndex = $state<number | null>(null);
+  let layerDragOverIndex = $state<number | null>(null);
+  // 'above' or 'below' relative to the hovered row (vertical list)
+  let layerDragInsertSide = $state<'above' | 'below' | null>(null);
+
+  // --- Canvas element ref and rAF loop ---
+
+  let canvasEl: HTMLCanvasElement;
+  let animFrameId: number;
+
+  // --- Active tool selection ---
+
+  // Active tool in the level editor
+  type LevelEditorTool = 'paint' | 'entity' | 'collision-rect' | 'collision-polygon';
+  let activeTool = $state<LevelEditorTool>('paint');
+
+  // Entity dragging state
+  let draggingEntity: { layerId: string; entityId: string; offsetX: number; offsetY: number; startX: number; startY: number } | null = null;
+
+  // Collision rect drawing state
+  let collisionDrawing = $state(false);
+  let collisionStartX = 0;
+  let collisionStartY = 0;
+  let collisionEndX = $state(0);
+  let collisionEndY = $state(0);
+
+  // Polygon drawing state (click-to-add-vertex, double-click to close)
+  let polygonPoints = $state<{ x: number; y: number }[]>([]);
+  let polygonPreviewX = $state(0);
+  let polygonPreviewY = $state(0);
+
+  // --- Pan / paint state ---
+
+  let isPanning = false;
+  let isErasing = false;
+  let panStartX = 0;
+  let panStartY = 0;
+  let panStartPanX = 0;
+  let panStartPanY = 0;
+
+  // Pan step in screen pixels per arrow-key press.
+  const PAN_STEP = 32;
+
+  // Cache of ImageData by tile-ref id, refreshed each frame so source edits
+  // propagate. Re-creating ImageData per cell each frame would be wasteful;
+  // re-creating once per ref keeps the per-tile draw call cheap.
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- render cache, not reactive
+  const imageDataCache = new Map<string, ImageData>();
+
+  // --- Derived state ---
+
+  // First tile layer (the one we paint into). We auto-create one on first
+  // paint if the user hasn't added any, so the viewport is usable from a
+  // fresh map. Using a getter keeps this reactive through mapState.
+  function firstTileLayerId(): string | null {
+    const layer = mapState.layers.find((l) => l.type === 'tile');
+    return layer ? layer.id : null;
+  }
+
+  // Count placed tiles across all tile layers -- used to drive the empty
+  // state overlay. Reading mapState.layers inside a $derived makes this
+  // reactive.
+  let placedTileCount = $derived.by(() => {
+    let n = 0;
+    for (const l of mapState.layers) {
+      if (l.type === 'tile' && l.tiles) n += l.tiles.size;
+    }
+    return n;
+  });
+
+  // Dismiss the persistent "no active tile" notification once a tile is selected.
+  $effect(() => {
+    if (mapState.activeTile) {
+      notificationState.dismiss('level-editor/no-active-tile');
+    }
+  });
+
+  // --- Zoom steps ---
+
+  function stepUp(current: number): number {
+    for (const step of ZOOM_STEPS) if (step > current) return step;
+    // ZOOM_STEPS is non-empty so the last element is always defined.
+    return ZOOM_STEPS[ZOOM_STEPS.length - 1] ?? current;
+  }
+
+  function stepDown(current: number): number {
+    for (let i = ZOOM_STEPS.length - 1; i >= 0; i--) {
+      const step = ZOOM_STEPS[i];
+      if (step !== undefined && step < current) return step;
+    }
+    return ZOOM_STEPS[0];
+  }
+
+  // --- Coordinate helpers ---
+
+  /**
+   * Convert a canvas-local screen position to a grid cell.
+   * Accounts for the current pan and zoom and the viewport's center origin
+   * (column 0, row 0 is anchored at the horizontal middle of the viewport).
+   */
+  function screenToCell(screenX: number, screenY: number): { col: number; row: number } {
+    const rect = canvasEl.getBoundingClientRect();
+    // World-space: undo centering, pan, and zoom.
+    const worldX = (screenX - rect.width / 2 - panX) / zoom;
+    const worldY = (screenY - panY) / zoom;
+    if (mapState.gridMode === 'ortho') {
+      return {
+        col: Math.floor(worldX / mapState.tileWidth),
+        row: Math.floor(worldY / mapState.tileHeight),
+      };
+    }
+    const { col, row } = screenToIso(worldX, worldY, mapState.tileWidth, mapState.tileHeight);
+    return { col: Math.floor(col), row: Math.floor(row) };
+  }
+
+  /**
+   * Convert a canvas-local screen position to world coordinates (not grid-snapped).
+   * Used for entity placement and collision shape drawing where free positioning
+   * is needed.
+   */
+  function screenToWorld(screenX: number, screenY: number): { x: number; y: number } {
+    const rect = canvasEl.getBoundingClientRect();
+    const x = (screenX - rect.width / 2 - panX) / zoom;
+    const y = (screenY - panY) / zoom;
+    return { x, y };
+  }
+
+  /** Find the entity under a world-space point (simple bounding box test). */
+  function hitTestEntity(worldX: number, worldY: number): { layerId: string; entity: EntityPlacement } | null {
+    // Check entity layers in reverse (top-most first)
+    for (let i = mapState.layers.length - 1; i >= 0; i--) {
+      const layer = mapState.layers[i];
+      if (!layer || !layer.visible || layer.type !== 'entity' || !layer.entities) continue;
+      for (let j = layer.entities.length - 1; j >= 0; j--) {
+        const entity = layer.entities[j];
+        if (!entity) continue;
+        const ew = mapState.tileWidth;
+        const eh = mapState.tileHeight;
+        if (worldX >= entity.x && worldX < entity.x + ew &&
+            worldY >= entity.y && worldY < entity.y + eh) {
+          return { layerId: layer.id, entity };
+        }
+      }
+    }
+    return null;
+  }
+
+  // --- Rendering ---
+
+  /** Resize the canvas backing store to match its CSS size (retina-aware). */
+  function resizeCanvas(): void {
+    const rect = canvasEl.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const w = Math.round(rect.width * dpr);
+    const h = Math.round(rect.height * dpr);
+    if (canvasEl.width !== w || canvasEl.height !== h) {
+      canvasEl.width = w;
+      canvasEl.height = h;
+    }
+  }
+
+  /**
+   * Draw a single iso tile diamond outline at the given (col, row).
+   * `screenX` / `screenY` is the top anchor of the diamond in viewport pixels.
+   */
+  function drawDiamond(
+    ctx: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    tw: number,
+    th: number,
+  ): void {
+    ctx.beginPath();
+    ctx.moveTo(cx, cy);                     // top
+    ctx.lineTo(cx + tw / 2, cy + th / 2);   // right
+    ctx.lineTo(cx, cy + th);                // bottom
+    ctx.lineTo(cx - tw / 2, cy + th / 2);   // left
+    ctx.closePath();
+  }
+
+  /**
+   * Draw an axis-aligned rectangle path at (cx, cy) -- the top-left of the
+   * cell -- with size (tw, th). Used for the orthogonal grid mode.
+   */
+  function drawCellRect(
+    ctx: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    tw: number,
+    th: number,
+  ): void {
+    ctx.beginPath();
+    ctx.rect(cx, cy, tw, th);
+  }
+
+  /**
+   * Compute the scaled screen-space anchor for a given (col,row), already
+   * multiplied by the current zoom (i.e. matching the tw/th the render loop
+   * uses). Branches on gridMode -- iso returns the diamond top, ortho
+   * returns the cell's top-left.
+   */
+  function cellScreenOffset(col: number, row: number, tw: number, th: number): { x: number; y: number } {
+    if (mapState.gridMode === 'ortho') {
+      return { x: col * tw, y: row * th };
+    }
+    return { x: (col - row) * (tw / 2), y: (col + row) * (th / 2) };
+  }
+
+  /**
+   * Path a single grid cell outline using the projection appropriate for
+   * the current grid mode. Caller is responsible for stroke/fill style.
+   */
+  function pathCell(
+    ctx: CanvasRenderingContext2D,
+    col: number,
+    row: number,
+    originX: number,
+    originY: number,
+    tw: number,
+    th: number,
+  ): void {
+    const { x, y } = cellScreenOffset(col, row, tw, th);
+    if (mapState.gridMode === 'ortho') {
+      drawCellRect(ctx, originX + x, originY + y, tw, th);
+    } else {
+      drawDiamond(ctx, originX + x, originY + y, tw, th);
+    }
+  }
+
+  /**
+   * Read a CSS custom property from :root at render time so that theme
+   * changes are picked up live without rebuilding the component.
+   */
+  function cssVar(name: string, fallback: string): string {
+    const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return v.length > 0 ? v : fallback;
+  }
+
+  /** Main render pass. */
+  function renderLoop(): void {
+    resizeCanvas();
+
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) {
+      animFrameId = requestAnimationFrame(renderLoop);
+      return;
+    }
+
+    const dpr = window.devicePixelRatio || 1;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+    const cssW = canvasEl.clientWidth;
+    const cssH = canvasEl.clientHeight;
+
+    // Background clear using the workspace canvas color.
+    ctx.fillStyle = cssVar('--bg-canvas', '#121212');
+    ctx.fillRect(0, 0, cssW, cssH);
+
+    // Origin: horizontally centered, vertically offset by pan.
+    const originX = cssW / 2 + panX;
+    const originY = panY;
+
+    const tw = mapState.tileWidth * zoom;
+    const th = mapState.tileHeight * zoom;
+
+    // Grid outline for all cells (when enabled). Cheap enough for the
+    // 20x20 default and gives the user a sense of map extents even when empty.
+    if (showGrid) {
+      const gridColor = cssVar('--border', '#3a3a3a');
+      ctx.strokeStyle = gridColor;
+      ctx.lineWidth = 1;
+
+      for (let row = 0; row < mapState.gridRows; row++) {
+        for (let col = 0; col < mapState.gridCols; col++) {
+          pathCell(ctx, col, row, originX, originY, tw, th);
+          ctx.stroke();
+        }
+      }
+    }
+
+    // Placed tiles: collect, depth-sort, draw. We try the tile source
+    // registry first; if a placement has a registered PixelBuffer we render
+    // its actual pixels, otherwise we fall back to a solid-color diamond
+    // (degraded render) so the user still sees where they painted.
+    const items: RenderItem[] = [];
+    let layerIndex = 0;
+    for (const layer of mapState.layers) {
+      if (layer.visible && layer.type === 'tile' && layer.tiles) {
+        for (const [key, placement] of layer.tiles.entries()) {
+          const [colStr, rowStr] = key.split(',') as [string, string];
+          const col = parseInt(colStr, 10);
+          const row = parseInt(rowStr, 10);
+          if (Number.isNaN(col) || Number.isNaN(row)) continue;
+          items.push({
+            type: 'tile',
+            col,
+            row,
+            height: placement.height,
+            layerIndex,
+            data: placement,
+          });
+        }
+      }
+      layerIndex++;
+    }
+
+    const sorted = depthSort(items);
+    const tileFill = cssVar('--accent', '#4a9eff');
+    const tileStroke = cssVar('--accent-hover', '#6ab4ff');
+
+    // Refresh the per-frame ImageData cache: re-fetch each unique buffer
+    // from the registry once so subsequent same-id placements reuse it.
+    imageDataCache.clear();
+
+    for (const item of sorted) {
+      const placement = item.data as TilePlacement;
+      const id = tileRefId(placement);
+      const buffer = tileSourceRegistry.get(id);
+      const { x, y } = cellScreenOffset(item.col, item.row, tw, th);
+
+      if (buffer) {
+        // Real tile render -- blit the PixelBuffer scaled by zoom. We use
+        // an offscreen canvas because putImageData ignores the ctx
+        // transform; drawImage respects it and lets us scale by zoom.
+        let imageData = imageDataCache.get(id);
+        if (!imageData) {
+          imageData = buffer.toImageData();
+          imageDataCache.set(id, imageData);
+        }
+        // Anchor: align tile center horizontally with cell anchor (iso top
+        // of diamond is centered horizontally; ortho cell anchor is the
+        // top-left, so we shift right by half a tile to keep the tile
+        // visually centered with its cell width).
+        const anchorX = mapState.gridMode === 'ortho'
+          ? originX + x
+          : originX + x - (buffer.width * zoom) / 2;
+        const anchorY = mapState.gridMode === 'ortho'
+          ? originY + y
+          : originY + y;
+        // Use a temporary canvas to apply nearest-neighbor scaling.
+        const tmp = document.createElement('canvas');
+        tmp.width = buffer.width;
+        tmp.height = buffer.height;
+        const tmpCtx = tmp.getContext('2d');
+        if (tmpCtx) {
+          tmpCtx.putImageData(imageData, 0, 0);
+          ctx.imageSmoothingEnabled = false;
+          ctx.drawImage(
+            tmp,
+            anchorX,
+            anchorY,
+            buffer.width * zoom,
+            buffer.height * zoom,
+          );
+        }
+      } else {
+        // Fallback diamond / cell -- the registry has nothing for this id.
+        ctx.fillStyle = tileFill;
+        ctx.strokeStyle = tileStroke;
+        ctx.lineWidth = 1.5;
+        if (mapState.gridMode === 'ortho') {
+          drawCellRect(ctx, originX + x, originY + y, tw, th);
+        } else {
+          drawDiamond(ctx, originX + x, originY + y, tw, th);
+        }
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+
+    // Entity rendering: draw sprites from entity layers
+    for (const layer of mapState.layers) {
+      if (!layer.visible || layer.type !== 'entity' || !layer.entities) continue;
+      for (const entity of layer.entities) {
+        // Try to get the sprite from the tile source registry
+        const id = tileRefId({ projectRef: entity.projectRef, canvasRef: entity.canvasRef, frameIndex: 0 });
+        const buffer = tileSourceRegistry.get(id);
+        // World to screen conversion
+        const sx = originX + entity.x * zoom;
+        const sy = originY + entity.y * zoom;
+        if (buffer) {
+          let imageData = imageDataCache.get(id);
+          if (!imageData) {
+            imageData = buffer.toImageData();
+            imageDataCache.set(id, imageData);
+          }
+          const tmp = document.createElement('canvas');
+          tmp.width = buffer.width;
+          tmp.height = buffer.height;
+          const tmpCtx = tmp.getContext('2d');
+          if (tmpCtx) {
+            tmpCtx.putImageData(imageData, 0, 0);
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(tmp, sx, sy, buffer.width * zoom, buffer.height * zoom);
+          }
+        } else {
+          // Fallback: draw a colored rectangle placeholder
+          ctx.fillStyle = 'rgba(255, 165, 0, 0.5)';
+          ctx.strokeStyle = 'rgba(255, 165, 0, 0.8)';
+          ctx.lineWidth = 2;
+          ctx.fillRect(sx, sy, mapState.tileWidth * zoom, mapState.tileHeight * zoom);
+          ctx.strokeRect(sx, sy, mapState.tileWidth * zoom, mapState.tileHeight * zoom);
+        }
+      }
+    }
+
+    // Collision shape rendering: draw as semi-transparent overlays
+    for (const layer of mapState.layers) {
+      if (!layer.visible || layer.type !== 'collision' || !layer.collisionShapes) continue;
+      ctx.fillStyle = 'rgba(0, 255, 100, 0.2)';
+      ctx.strokeStyle = 'rgba(0, 255, 100, 0.8)';
+      ctx.lineWidth = 2;
+      for (const shape of layer.collisionShapes) {
+        if (shape.type === 'rect' && shape.points.length >= 2) {
+          const p1 = shape.points[0];
+          const p2 = shape.points[1];
+          if (!p1 || !p2) continue;
+          const sx = originX + p1.x * zoom;
+          const sy = originY + p1.y * zoom;
+          const sw = (p2.x - p1.x) * zoom;
+          const sh = (p2.y - p1.y) * zoom;
+          ctx.fillRect(sx, sy, sw, sh);
+          ctx.strokeRect(sx, sy, sw, sh);
+        } else if (shape.type === 'polygon' && shape.points.length >= 3) {
+          ctx.beginPath();
+          const first = shape.points[0];
+          if (!first) continue;
+          ctx.moveTo(originX + first.x * zoom, originY + first.y * zoom);
+          for (let i = 1; i < shape.points.length; i++) {
+            const p = shape.points[i];
+            if (!p) continue;
+            ctx.lineTo(originX + p.x * zoom, originY + p.y * zoom);
+          }
+          ctx.closePath();
+          ctx.fill();
+          ctx.stroke();
+        }
+      }
+    }
+
+    // Collision drawing preview (rect in progress)
+    if (collisionDrawing) {
+      ctx.fillStyle = 'rgba(0, 255, 100, 0.15)';
+      ctx.strokeStyle = 'rgba(0, 255, 100, 0.6)';
+      ctx.lineWidth = 1;
+      ctx.setLineDash([6, 3]);
+      const sx = originX + collisionStartX * zoom;
+      const sy = originY + collisionStartY * zoom;
+      const sw = (collisionEndX - collisionStartX) * zoom;
+      const sh = (collisionEndY - collisionStartY) * zoom;
+      ctx.fillRect(sx, sy, sw, sh);
+      ctx.strokeRect(sx, sy, sw, sh);
+      ctx.setLineDash([]);
+    }
+
+    // Polygon drawing preview (vertices placed so far + line to cursor)
+    if (polygonPoints.length > 0) {
+      ctx.strokeStyle = 'rgba(100, 150, 255, 0.8)';
+      ctx.fillStyle = 'rgba(100, 150, 255, 0.2)';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      const first = polygonPoints[0];
+      if (first) {
+        ctx.moveTo(originX + first.x * zoom, originY + first.y * zoom);
+      }
+      for (let i = 1; i < polygonPoints.length; i++) {
+        const p = polygonPoints[i];
+        if (!p) continue;
+        ctx.lineTo(originX + p.x * zoom, originY + p.y * zoom);
+      }
+      // Line to cursor position
+      ctx.lineTo(originX + polygonPreviewX * zoom, originY + polygonPreviewY * zoom);
+      ctx.stroke();
+      // Draw vertices as dots
+      for (const p of polygonPoints) {
+        ctx.fillStyle = 'rgba(100, 150, 255, 0.9)';
+        ctx.beginPath();
+        ctx.arc(originX + p.x * zoom, originY + p.y * zoom, 4, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+
+    // Hover highlight on top of everything.
+    if (
+      hoverCol !== null &&
+      hoverRow !== null &&
+      hoverCol >= 0 &&
+      hoverCol < mapState.gridCols &&
+      hoverRow >= 0 &&
+      hoverRow < mapState.gridRows
+    ) {
+      ctx.strokeStyle = cssVar('--text-primary', '#e0e0e0');
+      ctx.lineWidth = 2;
+      pathCell(ctx, hoverCol, hoverRow, originX, originY, tw, th);
+      ctx.stroke();
+    }
+
+    animFrameId = requestAnimationFrame(renderLoop);
+  }
+
+  // --- Keyboard handler ---
+
+  /**
+   * Handle keyboard shortcuts when the canvas is focused.
+   * Arrow keys pan, +/- zoom, G toggles grid, Escape clears active tile.
+   */
+  function onKeyDown(e: KeyboardEvent): void {
+    // Undo/redo: intercept before the switch so modifier combos are handled first.
+    if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+      undoLast();
+      e.preventDefault();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) {
+      redoLast();
+      e.preventDefault();
+      return;
+    }
+    // Redo alternative: Ctrl+Y (common on Windows/Linux).
+    if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
+      redoLast();
+      e.preventDefault();
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowUp':
+        panY += PAN_STEP;
+        break;
+      case 'ArrowDown':
+        panY -= PAN_STEP;
+        break;
+      case 'ArrowLeft':
+        panX += PAN_STEP;
+        break;
+      case 'ArrowRight':
+        panX -= PAN_STEP;
+        break;
+      case '+':
+      case '=':
+        // Zoom in, pivoted around the viewport center.
+        zoom = stepUp(zoom);
+        break;
+      case '-':
+        // Zoom out, pivoted around the viewport center.
+        zoom = stepDown(zoom);
+        break;
+      case 'g':
+      case 'G':
+        showGrid = !showGrid;
+        break;
+      case 'Escape':
+        mapState.activeTile = null;
+        // Cancel in-progress collision drawing
+        polygonPoints = [];
+        collisionDrawing = false;
+        break;
+      // Number keys switch the active level-editor tool.
+      case '1':
+        activeTool = 'paint';
+        break;
+      case '2':
+        activeTool = 'entity';
+        break;
+      case '3':
+        activeTool = 'collision-rect';
+        break;
+      case '4':
+        activeTool = 'collision-polygon';
+        polygonPoints = [];
+        break;
+      default:
+        // Not a handled key -- let the event propagate normally.
+        return;
+    }
+    e.preventDefault();
+  }
+
+  // --- Pointer handlers ---
+
+  function onPointerDown(e: PointerEvent): void {
+    canvasEl.setPointerCapture(e.pointerId);
+
+    // Middle-click pans regardless of active tool.
+    if (e.button === 1) {
+      isPanning = true;
+      panStartX = e.clientX;
+      panStartY = e.clientY;
+      panStartPanX = panX;
+      panStartPanY = panY;
+      e.preventDefault();
+      return;
+    }
+
+    const rect = canvasEl.getBoundingClientRect();
+    const localX = e.clientX - rect.left;
+    const localY = e.clientY - rect.top;
+
+    if (activeTool === 'paint') {
+      if (e.button === 2) {
+        isErasing = true;
+        eraseAtEvent(e);
+        e.preventDefault();
+        return;
+      }
+      if (e.button === 0) {
+        paintAtEvent(e);
+      }
+    } else if (activeTool === 'entity') {
+      const world = screenToWorld(localX, localY);
+      if (e.button === 2) {
+        // Right-click: remove entity under cursor
+        const hit = hitTestEntity(world.x, world.y);
+        if (hit) {
+          dispatch({
+            type: 'remove_entity',
+            plugin: 'leveleditor/commands',
+            version: '1.0.0',
+            params: { layerId: hit.layerId, entityId: hit.entity.id },
+            id: crypto.randomUUID(),
+            timestamp: Date.now(),
+          });
+        }
+        e.preventDefault();
+        return;
+      }
+      if (e.button === 0) {
+        const hit = hitTestEntity(world.x, world.y);
+        if (hit) {
+          // Start dragging existing entity
+          draggingEntity = {
+            layerId: hit.layerId,
+            entityId: hit.entity.id,
+            offsetX: world.x - hit.entity.x,
+            offsetY: world.y - hit.entity.y,
+            startX: hit.entity.x,
+            startY: hit.entity.y,
+          };
+        } else {
+          // Place a new entity using activeTile as sprite source
+          if (!mapState.activeTile) {
+            notificationState.push({
+              id: 'level-editor/no-active-tile',
+              message: 'No active tile selected -- select a tile to place as entity.',
+              type: 'info',
+            });
+            return;
+          }
+          // Find the active entity layer or auto-create one
+          let layerId = mapState.layers.find(
+            (l) => l.id === mapState.activeLayerId && l.type === 'entity',
+          )?.id;
+          if (!layerId) {
+            layerId = mapState.layers.find((l) => l.type === 'entity')?.id;
+          }
+          if (!layerId) {
+            layerId = mapState.addLayer('Entities', 'entity').id;
+          }
+          dispatch({
+            type: 'place_entity',
+            plugin: 'leveleditor/commands',
+            version: '1.0.0',
+            params: {
+              layerId,
+              projectRef: mapState.activeTile.projectRef,
+              canvasRef: mapState.activeTile.canvasRef,
+              x: world.x,
+              y: world.y,
+              height: 0,
+              properties: {},
+            },
+            id: crypto.randomUUID(),
+            timestamp: Date.now(),
+          });
+        }
+      }
+    } else if (activeTool === 'collision-rect') {
+      if (e.button === 0) {
+        const world = screenToWorld(localX, localY);
+        collisionDrawing = true;
+        collisionStartX = world.x;
+        collisionStartY = world.y;
+        collisionEndX = world.x;
+        collisionEndY = world.y;
+      }
+    } else {
+      // activeTool === 'collision-polygon' -- the only remaining case
+      if (e.button === 0) {
+        const world = screenToWorld(localX, localY);
+        polygonPoints = [...polygonPoints, { x: world.x, y: world.y }];
+      }
+    }
+  }
+
+  /** Handle double-click to close polygon shapes. */
+  function onDblClick(_e: MouseEvent): void {
+    if (activeTool !== 'collision-polygon') return;
+    // The preceding pointerdown added a spurious vertex at the double-click
+    // location -- remove it before checking the minimum vertex count.
+    if (polygonPoints.length > 0) {
+      polygonPoints = polygonPoints.slice(0, -1);
+    }
+    if (polygonPoints.length < 3) return;
+    // Find the active collision layer or auto-create one
+    let layerId = mapState.layers.find(
+      (l) => l.id === mapState.activeLayerId && l.type === 'collision',
+    )?.id;
+    if (!layerId) {
+      layerId = mapState.layers.find((l) => l.type === 'collision')?.id;
+    }
+    if (!layerId) {
+      layerId = mapState.addLayer('Collision', 'collision').id;
+    }
+    dispatch({
+      type: 'add_collision_shape',
+      plugin: 'leveleditor/commands',
+      version: '1.0.0',
+      params: {
+        layerId,
+        type: 'polygon',
+        points: polygonPoints.map((p) => ({ x: p.x, y: p.y })),
+      },
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+    polygonPoints = [];
+  }
+
+  function onPointerMove(e: PointerEvent): void {
+    if (isPanning) {
+      panX = panStartPanX + (e.clientX - panStartX);
+      panY = panStartPanY + (e.clientY - panStartY);
+      return;
+    }
+
+    const rect = canvasEl.getBoundingClientRect();
+    const localX = e.clientX - rect.left;
+    const localY = e.clientY - rect.top;
+    const { col, row } = screenToCell(localX, localY);
+    hoverCol = col;
+    hoverRow = row;
+
+    if (activeTool === 'paint') {
+      // Drag-to-erase while right button is held.
+      if (isErasing) {
+        eraseAtEvent(e);
+        return;
+      }
+      // Drag-to-paint while left button is held.
+      if (e.buttons & 1) {
+        paintAtEvent(e);
+      }
+    } else if (activeTool === 'entity') {
+      // Update visual position while dragging (actual move_entity dispatched on release)
+      if (draggingEntity && (e.buttons & 1)) {
+        const world = screenToWorld(localX, localY);
+        const newX = world.x - draggingEntity.offsetX;
+        const newY = world.y - draggingEntity.offsetY;
+        // Direct mutation for smooth visual feedback; undoable command on release.
+        mapState.moveEntity(draggingEntity.layerId, draggingEntity.entityId, newX, newY);
+      }
+    } else if (activeTool === 'collision-rect') {
+      if (collisionDrawing) {
+        const world = screenToWorld(localX, localY);
+        collisionEndX = world.x;
+        collisionEndY = world.y;
+      }
+    } else {
+      // activeTool === 'collision-polygon' -- the only remaining case.
+      // Update preview line endpoint.
+      const world = screenToWorld(localX, localY);
+      polygonPreviewX = world.x;
+      polygonPreviewY = world.y;
+    }
+  }
+
+  function onPointerUp(e: PointerEvent): void {
+    canvasEl.releasePointerCapture(e.pointerId);
+
+    if (activeTool === 'entity' && draggingEntity) {
+      // Dispatch undoable move_entity with final position
+      const entity = mapState.getEntity(draggingEntity.layerId, draggingEntity.entityId);
+      if (entity) {
+        dispatch({
+          type: 'move_entity',
+          plugin: 'leveleditor/commands',
+          version: '1.0.0',
+          params: {
+            layerId: draggingEntity.layerId,
+            entityId: draggingEntity.entityId,
+            x: entity.x,
+            y: entity.y,
+            oldX: draggingEntity.startX,
+            oldY: draggingEntity.startY,
+          },
+          id: crypto.randomUUID(),
+          timestamp: Date.now(),
+        });
+      }
+      draggingEntity = null;
+    }
+
+    if (activeTool === 'collision-rect' && collisionDrawing) {
+      collisionDrawing = false;
+      // Only create a shape if the rect has meaningful size
+      const dx = Math.abs(collisionEndX - collisionStartX);
+      const dy = Math.abs(collisionEndY - collisionStartY);
+      if (dx > 1 || dy > 1) {
+        // Normalize so topLeft < bottomRight
+        const x1 = Math.min(collisionStartX, collisionEndX);
+        const y1 = Math.min(collisionStartY, collisionEndY);
+        const x2 = Math.max(collisionStartX, collisionEndX);
+        const y2 = Math.max(collisionStartY, collisionEndY);
+        // Find the active collision layer or auto-create one
+        let layerId = mapState.layers.find(
+          (l) => l.id === mapState.activeLayerId && l.type === 'collision',
+        )?.id;
+        if (!layerId) {
+          layerId = mapState.layers.find((l) => l.type === 'collision')?.id;
+        }
+        if (!layerId) {
+          layerId = mapState.addLayer('Collision', 'collision').id;
+        }
+        dispatch({
+          type: 'add_collision_shape',
+          plugin: 'leveleditor/commands',
+          version: '1.0.0',
+          params: {
+            layerId,
+            type: 'rect',
+            points: [{ x: x1, y: y1 }, { x: x2, y: y2 }],
+          },
+          id: crypto.randomUUID(),
+          timestamp: Date.now(),
+        });
+      }
+    }
+
+    isPanning = false;
+    isErasing = false;
+  }
+
+  function onPointerLeave(): void {
+    hoverCol = null;
+    hoverRow = null;
+  }
+
+  function onWheel(e: WheelEvent): void {
+    e.preventDefault();
+
+    // Zoom pivoted around the cursor: keep the world point under the cursor
+    // stable while zoom changes. Computing in centered coordinates (origin
+    // at horizontal midpoint) matches how render() positions the grid.
+    const rect = canvasEl.getBoundingClientRect();
+    const cx = e.clientX - rect.left - rect.width / 2;
+    const cy = e.clientY - rect.top;
+
+    const oldZoom = zoom;
+    const newZoom = e.deltaY < 0 ? stepUp(oldZoom) : stepDown(oldZoom);
+    if (newZoom === oldZoom) return;
+
+    // worldX = (cx - panX) / oldZoom; want worldX * newZoom + newPanX = cx
+    panX = cx - ((cx - panX) / oldZoom) * newZoom;
+    panY = cy - ((cy - panY) / oldZoom) * newZoom;
+    zoom = newZoom;
+  }
+
+  // --- Paint action ---
+
+  /**
+   * Paint mapState.activeTile at the cell under the pointer. If no active
+   * tile is selected the click is a no-op (with a one-shot notification),
+   * matching the design where the active tile is selected via a future
+   * tile picker UI.
+   */
+  function paintAtEvent(e: PointerEvent): void {
+    if (!mapState.activeTile) {
+      notificationState.push({
+        id: 'level-editor/no-active-tile',
+        message: 'No active tile selected.',
+        type: 'info',
+      });
+      return;
+    }
+
+    const rect = canvasEl.getBoundingClientRect();
+    const { col, row } = screenToCell(e.clientX - rect.left, e.clientY - rect.top);
+    if (col < 0 || col >= mapState.gridCols) return;
+    if (row < 0 || row >= mapState.gridRows) return;
+
+    // Use the active tile layer when available, otherwise fall back to the
+    // first tile layer. Auto-create one if the map has none at all.
+    let layerId = paintTargetLayerId();
+    if (!layerId) {
+      layerId = mapState.addLayer('Tiles', 'tile').id;
+    }
+    // Dispatch through the command system so the placement is undoable.
+    dispatch({
+      type: 'place_tile',
+      plugin: 'leveleditor/commands',
+      version: '1.0.0',
+      params: { layerId, col, row, tile: { ...mapState.activeTile } },
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  /**
+   * Erase the tile at the cell under the pointer. Operates on the first
+   * tile layer if one exists; no-op on an empty map.
+   */
+  function eraseAtEvent(e: PointerEvent): void {
+    const layerId = paintTargetLayerId();
+    if (!layerId) return;
+
+    const rect = canvasEl.getBoundingClientRect();
+    const { col, row } = screenToCell(e.clientX - rect.left, e.clientY - rect.top);
+    if (col < 0 || col >= mapState.gridCols) return;
+    if (row < 0 || row >= mapState.gridRows) return;
+
+    // Dispatch through the command system so the erasure is undoable.
+    dispatch({
+      type: 'remove_tile',
+      plugin: 'leveleditor/commands',
+      version: '1.0.0',
+      params: { layerId, col, row },
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  // --- Map property controls ---
+
+  // --- Layer management ---
+
+  /** Resolve the layer id to paint/erase on: active layer if it is a tile
+   *  layer, otherwise fall back to the first tile layer. */
+  function paintTargetLayerId(): string | null {
+    const active = mapState.layers.find((l) => l.id === mapState.activeLayerId);
+    if (active && active.type === 'tile') return active.id;
+    return firstTileLayerId();
+  }
+
+  function handleToggleLayerVisibility(e: MouseEvent, layer: MapLayer): void {
+    e.stopPropagation();
+    // Mutate through mapState -- the layer object is from the reactive array.
+    layer.visible = !layer.visible;
+  }
+
+  function handleSelectLayer(layer: MapLayer): void {
+    mapState.activeLayerId = layer.id;
+  }
+
+  function handleAddLayer(type: MapLayer['type']): void {
+    const namePrefix = type === 'tile' ? 'Tiles' : type === 'entity' ? 'Entities' : 'Collision';
+    const count = mapState.layers.filter((l) => l.type === type).length;
+    const name = count === 0 ? namePrefix : `${namePrefix} ${String(count + 1)}`;
+    mapState.addLayer(name, type);
+    addLayerDropdownOpen = false;
+  }
+
+  function handleDeleteActiveLayer(): void {
+    if (mapState.layers.length <= 1) return;
+    mapState.removeLayer(mapState.activeLayerId);
+  }
+
+  /** Dispatch an undoable move_layer command via the level editor plugin. */
+  function dispatchMoveLayer(fromIndex: number, toIndex: number): void {
+    if (fromIndex === toIndex) return;
+    if (fromIndex < 0 || fromIndex >= mapState.layers.length) return;
+    if (toIndex < 0 || toIndex >= mapState.layers.length) return;
+    dispatch({
+      type: 'move_layer',
+      plugin: 'leveleditor/commands',
+      version: '1.0.0',
+      params: { fromIndex, toIndex },
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  function handleMoveLayerUp(e: MouseEvent, index: number): void {
+    e.stopPropagation();
+    if (index <= 0) return;
+    dispatchMoveLayer(index, index - 1);
+  }
+
+  function handleMoveLayerDown(e: MouseEvent, index: number): void {
+    e.stopPropagation();
+    if (index >= mapState.layers.length - 1) return;
+    dispatchMoveLayer(index, index + 1);
+  }
+
+  // --- Layer drag-to-reorder handlers ---
+
+  function handleLayerDragPointerDown(e: PointerEvent, index: number): void {
+    if (e.button !== 0) return;
+    layerDragFromIndex = index;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handleLayerDragPointerMove(e: PointerEvent, index: number): void {
+    if (layerDragFromIndex === null) return;
+    if (layerDragFromIndex === index) {
+      // Check if the cursor left the element vertically
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      if (e.clientY < rect.top || e.clientY > rect.bottom) {
+        layerDragOverIndex = index;
+      }
+      return;
+    }
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    layerDragOverIndex = index;
+    layerDragInsertSide = e.clientY < midY ? 'above' : 'below';
+  }
+
+  function handleLayerDragPointerUp(): void {
+    if (layerDragFromIndex !== null && layerDragOverIndex !== null && layerDragInsertSide !== null) {
+      let toIndex = layerDragOverIndex;
+      if (layerDragInsertSide === 'below') {
+        toIndex = layerDragOverIndex + 1;
+      }
+      // Adjust for removal shift
+      if (layerDragFromIndex < toIndex) {
+        toIndex -= 1;
+      }
+      if (layerDragFromIndex !== toIndex && toIndex >= 0 && toIndex < mapState.layers.length) {
+        dispatchMoveLayer(layerDragFromIndex, toIndex);
+      }
+    }
+    layerDragFromIndex = null;
+    layerDragOverIndex = null;
+    layerDragInsertSide = null;
+  }
+
+  /** Badge label for layer types. */
+  function layerTypeBadge(type: MapLayer['type']): string {
+    switch (type) {
+      case 'tile': return 'T';
+      case 'entity': return 'E';
+      case 'collision': return 'C';
+    }
+  }
+
+  // --- Tiled export ---
+
+  async function handleExportTiled(): Promise<void> {
+    // Build the tileset spritesheet from all unique tiles in the map.
+    // When present, the .tmj references "tileset.png" so both files must
+    // be saved to the same directory for the Tiled editor to load them.
+    const spritesheetResult = buildTilesetSpritesheet(mapState);
+    const tiled = exportTiledMap(mapState, spritesheetResult);
+    const json = JSON.stringify(tiled, null, 2);
+
+    const files: DownloadFileOptions[] = [
+      {
+        blob: new Blob([json], { type: 'application/json' }),
+        filename: 'level.tmj',
+        filterName: 'Tiled Map',
+        filterExtensions: ['tmj'],
+      },
+    ];
+
+    // Include the tileset spritesheet PNG as a companion file (if tiles exist)
+    if (spritesheetResult) {
+      const pngBlob = await pixelBufferToPngBlob(spritesheetResult.spritesheet);
+      files.push({
+        blob: pngBlob,
+        filename: 'tileset.png',
+        filterName: 'PNG Image',
+        filterExtensions: ['png'],
+      });
+    }
+
+    await downloadCompanionFiles(files);
+  }
+
+  // --- Mount ---
+
+  onMount(() => {
+    // Center the grid horizontally on first layout. The grid is already
+    // centered by rendering (originX = width/2), so we only need to nudge
+    // it down to a comfortable offset from the top.
+    const rect = canvasEl.getBoundingClientRect();
+    if (rect.height > 0) {
+      panY = Math.round(rect.height * 0.15);
+    }
+
+    // Focus the canvas so keyboard shortcuts work immediately.
+    canvasEl.focus();
+
+    animFrameId = requestAnimationFrame(renderLoop);
+
+    return () => {
+      cancelAnimationFrame(animFrameId);
+    };
+  });
+</script>
+
+<div class="level-editor">
+  <div class="level-editor__header">
+    <span class="level-editor__title">Level Editor</span>
+    <div class="level-editor__tools">
+      <button
+        class="tool-btn"
+        class:tool-btn--active={activeTool === 'paint'}
+        title="Paint Tiles"
+        onclick={() => { activeTool = 'paint'; }}
+      ><PaintbrushIcon /></button>
+      <button
+        class="tool-btn"
+        class:tool-btn--active={activeTool === 'entity'}
+        title="Place Entities"
+        onclick={() => { activeTool = 'entity'; }}
+      ><MousePointerClickIcon /></button>
+      <button
+        class="tool-btn"
+        class:tool-btn--active={activeTool === 'collision-rect'}
+        title="Draw Collision Rect"
+        onclick={() => { activeTool = 'collision-rect'; }}
+      ><BoxSelectIcon /></button>
+      <button
+        class="tool-btn"
+        class:tool-btn--active={activeTool === 'collision-polygon'}
+        title="Draw Collision Polygon"
+        onclick={() => { activeTool = 'collision-polygon'; polygonPoints = []; }}
+      ><PentagonIcon /></button>
+    </div>
+    <div class="level-editor__actions">
+      <button
+        class="action-btn"
+        title="Export to Tiled (.tmj)"
+        aria-label="Export to Tiled"
+        onclick={handleExportTiled}
+      ><DownloadIcon /></button>
+    </div>
+  </div>
+
+  <div class="level-editor__viewport">
+    <canvas
+      bind:this={canvasEl}
+      class="level-editor__canvas"
+      tabindex="0"
+      role="application"
+      aria-label={`Level editor, ${String(mapState.gridCols)} by ${String(mapState.gridRows)} tile grid`}
+      onpointerdown={onPointerDown}
+      onpointermove={onPointerMove}
+      onpointerup={onPointerUp}
+      onpointerleave={onPointerLeave}
+      onwheel={onWheel}
+      onkeydown={onKeyDown}
+      ondblclick={onDblClick}
+      oncontextmenu={(e) => { e.preventDefault(); }}
+    ></canvas>
+
+    <!-- Layer management panel -- overlaid in the bottom-left of the viewport -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="layer-overlay"
+      onpointerdown={(e) => { e.stopPropagation(); }}
+      onpointermove={(e) => { e.stopPropagation(); }}
+      onpointerup={(e) => { e.stopPropagation(); }}
+    >
+      <button
+        class="layer-overlay__toggle"
+        title={layerPanelOpen ? 'Collapse layers' : 'Expand layers'}
+        aria-label={layerPanelOpen ? 'Collapse layers' : 'Expand layers'}
+        onclick={() => { layerPanelOpen = !layerPanelOpen; }}
+      >
+        <LayersIcon />
+        <span class="layer-overlay__toggle-label">Layers ({mapState.layers.length})</span>
+        <span class="layer-overlay__chevron" class:layer-overlay__chevron--collapsed={!layerPanelOpen}>
+          <ChevronDownIcon />
+        </span>
+      </button>
+
+      {#if layerPanelOpen}
+        <div class="layer-overlay__list" role="listbox" aria-label="Map layers">
+          {#each mapState.layers as layer, i (layer.id)}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="layer-overlay__row"
+              class:layer-overlay__row--active={layer.id === mapState.activeLayerId}
+              class:layer-overlay__row--dragging={layerDragFromIndex === i}
+              class:layer-overlay__row--drag-above={layerDragOverIndex === i && layerDragInsertSide === 'above'}
+              class:layer-overlay__row--drag-below={layerDragOverIndex === i && layerDragInsertSide === 'below'}
+              role="option"
+              aria-selected={layer.id === mapState.activeLayerId}
+              tabindex="0"
+              onclick={() => { handleSelectLayer(layer); }}
+              onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleSelectLayer(layer); } }}
+              onpointerdown={(e) => { handleLayerDragPointerDown(e, i); }}
+              onpointermove={(e) => { handleLayerDragPointerMove(e, i); }}
+              onpointerup={handleLayerDragPointerUp}
+            >
+              <!-- Visibility toggle (eye icon, matches sprite layer panel) -->
+              <button
+                class="layer-overlay__vis-btn"
+                title={layer.visible ? 'Hide' : 'Show'}
+                aria-label={layer.visible ? `Hide ${layer.name}` : `Show ${layer.name}`}
+                aria-pressed={layer.visible}
+                onclick={(e) => { handleToggleLayerVisibility(e, layer); }}
+              >
+                {#if layer.visible}
+                  <svg class="layer-overlay__icon" viewBox="0 0 16 16" width="14" height="14">
+                    <path d="M8 3C4 3 1 8 1 8s3 5 7 5 7-5 7-5-3-5-7-5z" fill="none" stroke="currentColor" stroke-width="1.5"/>
+                    <circle cx="8" cy="8" r="2" fill="currentColor"/>
+                  </svg>
+                {:else}
+                  <svg class="layer-overlay__icon" viewBox="0 0 16 16" width="14" height="14">
+                    <path d="M8 3C4 3 1 8 1 8s3 5 7 5 7-5 7-5-3-5-7-5z" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+                    <line x1="2" y1="2" x2="14" y2="14" stroke="currentColor" stroke-width="1.5"/>
+                  </svg>
+                {/if}
+              </button>
+
+              <span class="layer-overlay__name">{layer.name}</span>
+
+              <!-- Move up/down buttons -->
+              <button
+                class="layer-overlay__move-btn"
+                title="Move up"
+                aria-label={`Move ${layer.name} up`}
+                disabled={i === 0}
+                onclick={(e) => { handleMoveLayerUp(e, i); }}
+              ><ChevronUpIcon /></button>
+              <button
+                class="layer-overlay__move-btn"
+                title="Move down"
+                aria-label={`Move ${layer.name} down`}
+                disabled={i === mapState.layers.length - 1}
+                onclick={(e) => { handleMoveLayerDown(e, i); }}
+              ><ChevronDownIcon /></button>
+
+              <!-- Type badge -->
+              <span
+                class="layer-overlay__badge"
+                class:layer-overlay__badge--tile={layer.type === 'tile'}
+                class:layer-overlay__badge--entity={layer.type === 'entity'}
+                class:layer-overlay__badge--collision={layer.type === 'collision'}
+                title={layer.type}
+              >{layerTypeBadge(layer.type)}</span>
+            </div>
+          {/each}
+        </div>
+
+        <!-- Controls: add + delete -->
+        <div class="layer-overlay__controls">
+          <div class="layer-overlay__add-wrap">
+            <button
+              class="layer-overlay__ctrl-btn"
+              title="Add layer"
+              aria-label="Add layer"
+              onclick={() => { addLayerDropdownOpen = !addLayerDropdownOpen; }}
+            ><PlusIcon /></button>
+            {#if addLayerDropdownOpen}
+              <div class="layer-overlay__add-menu">
+                <button class="layer-overlay__add-option" onclick={() => { handleAddLayer('tile'); }}>Tile layer</button>
+                <button class="layer-overlay__add-option" onclick={() => { handleAddLayer('entity'); }}>Entity layer</button>
+                <button class="layer-overlay__add-option" onclick={() => { handleAddLayer('collision'); }}>Collision layer</button>
+              </div>
+            {/if}
+          </div>
+          <button
+            class="layer-overlay__ctrl-btn"
+            title="Delete active layer"
+            aria-label="Delete active layer"
+            disabled={mapState.layers.length <= 1}
+            onclick={handleDeleteActiveLayer}
+          ><TrashIcon /></button>
+        </div>
+      {/if}
+    </div>
+
+    {#if placedTileCount === 0}
+      <div class="level-editor__empty">
+        <p class="level-editor__empty-title">Empty map</p>
+        <p class="level-editor__empty-hint">
+          Click a cell to paint a tile, right-click to erase. Middle-click drag to pan, scroll to zoom.
+        </p>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .level-editor {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    user-select: none;
+  }
+
+  .level-editor__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .level-editor__title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .level-editor__actions {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  .action-btn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-xl);
+    padding: 0;
+    line-height: 1;
+  }
+
+  .action-btn:hover:not(:disabled) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .action-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .action-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Tool selector buttons in the header */
+  .level-editor__tools {
+    display: flex;
+    gap: 2px;
+    margin-left: 8px;
+  }
+
+  .tool-btn {
+    background: transparent;
+    border: 1px solid transparent;
+    color: var(--text-secondary);
+    padding: 4px 6px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .tool-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  .tool-btn--active {
+    background: var(--bg-active);
+    color: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .tool-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Viewport is the canvas host. Position relative so the empty-state
+     overlay can be absolutely positioned on top of the canvas. */
+  .level-editor__viewport {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    background: var(--bg-canvas);
+  }
+
+  .level-editor__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    touch-action: none;
+    outline: none;
+    cursor: crosshair;
+  }
+
+  /* Empty state sits on top of the canvas, non-interactive so clicks still
+     paint into the grid behind it. */
+  .level-editor__empty {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    pointer-events: none;
+    text-align: center;
+    padding: var(--space-5);
+  }
+
+  .level-editor__empty-title {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+
+  .level-editor__empty-hint {
+    margin: 0;
+    max-width: 320px;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    line-height: 1.4;
+  }
+
+  /* --- Layer overlay panel (bottom-left corner of the viewport) --- */
+
+  .layer-overlay {
+    position: absolute;
+    bottom: var(--space-3, 12px);
+    left: var(--space-3, 12px);
+    width: 180px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    font-size: var(--text-sm);
+  }
+
+  .layer-overlay__toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    width: 100%;
+    padding: 5px 8px;
+    background: var(--bg-toolbar);
+    border: none;
+    border-bottom: 1px solid var(--border);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .layer-overlay__toggle:hover {
+    color: var(--text-primary);
+  }
+
+  .layer-overlay__toggle :global(svg) {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+
+  .layer-overlay__toggle-label {
+    flex: 1;
+    text-align: left;
+  }
+
+  .layer-overlay__chevron {
+    display: flex;
+    align-items: center;
+    transition: transform 150ms ease;
+  }
+
+  .layer-overlay__chevron--collapsed {
+    transform: rotate(-90deg);
+  }
+
+  .layer-overlay__chevron :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Scrollable layer list */
+  .layer-overlay__list {
+    max-height: 160px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .layer-overlay__row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    padding: 3px 6px;
+    cursor: pointer;
+    border-bottom: 1px solid transparent;
+    transition: background 100ms ease;
+  }
+
+  .layer-overlay__row:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .layer-overlay__row:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .layer-overlay__row--active {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .layer-overlay__row--active:hover {
+    background: var(--accent-hover);
+  }
+
+  .layer-overlay__vis-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .layer-overlay__vis-btn:hover {
+    color: var(--accent);
+  }
+
+  .layer-overlay__row--active .layer-overlay__vis-btn:hover {
+    color: #ffffff;
+  }
+
+  .layer-overlay__icon {
+    display: block;
+  }
+
+  .layer-overlay__name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-xs);
+  }
+
+  .layer-overlay__badge {
+    flex-shrink: 0;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1;
+    padding: 1px 4px;
+    border-radius: 3px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .layer-overlay__badge--tile {
+    background: rgba(74, 158, 255, 0.2);
+    color: #6ab4ff;
+  }
+
+  .layer-overlay__badge--entity {
+    background: rgba(255, 170, 50, 0.2);
+    color: #ffbe6a;
+  }
+
+  .layer-overlay__badge--collision {
+    background: rgba(255, 80, 80, 0.2);
+    color: #ff8080;
+  }
+
+  .layer-overlay__row--active .layer-overlay__badge {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+  }
+
+  /* Move up/down buttons */
+  .layer-overlay__move-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 100ms ease;
+  }
+
+  .layer-overlay__row:hover .layer-overlay__move-btn {
+    opacity: 0.6;
+  }
+
+  .layer-overlay__move-btn:hover:not(:disabled) {
+    opacity: 1 !important;
+    color: var(--accent);
+  }
+
+  .layer-overlay__row--active .layer-overlay__move-btn:hover:not(:disabled) {
+    color: #ffffff;
+  }
+
+  .layer-overlay__move-btn:disabled {
+    opacity: 0 !important;
+    cursor: default;
+  }
+
+  .layer-overlay__row:hover .layer-overlay__move-btn:disabled {
+    opacity: 0.15 !important;
+  }
+
+  .layer-overlay__move-btn :global(svg) {
+    width: 10px;
+    height: 10px;
+  }
+
+  /* Drag-to-reorder: dim the source row */
+  .layer-overlay__row--dragging {
+    opacity: 0.35;
+  }
+
+  /* Insertion indicator: horizontal accent line shown above or below a row
+     during drag-to-reorder. Uses pseudo-elements positioned in the gap. */
+  .layer-overlay__row--drag-above::before,
+  .layer-overlay__row--drag-below::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--accent);
+    border-radius: 1px;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .layer-overlay__row--drag-above::before {
+    top: -1px;
+  }
+
+  .layer-overlay__row--drag-below::after {
+    bottom: -1px;
+  }
+
+  /* Add/delete controls bar */
+  .layer-overlay__controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    padding: 4px 6px;
+    border-top: 1px solid var(--border);
+    background: var(--bg-toolbar);
+  }
+
+  .layer-overlay__ctrl-btn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .layer-overlay__ctrl-btn:hover:not(:disabled) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .layer-overlay__ctrl-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .layer-overlay__ctrl-btn :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* "Add layer" dropdown positioned above the button */
+  .layer-overlay__add-wrap {
+    position: relative;
+  }
+
+  .layer-overlay__add-menu {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    white-space: nowrap;
+    z-index: 20;
+  }
+
+  .layer-overlay__add-option {
+    display: block;
+    width: 100%;
+    padding: 4px 12px;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: var(--text-xs);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .layer-overlay__add-option:hover {
+    background: var(--accent);
+    color: #ffffff;
+  }
+</style>