evomeme 0.1.7 → 0.1.9-beta.14

package/dist/canvas-public/tile-map-editor.js

@@ -0,0 +1,2120 @@
+/**
+ * 地图绘制元素：负责地图数据、PixiJS/@pixi/tilemap 渲染、图片切分、画笔交互与 PNG 导出。
+ * 画布主程序只负责创建、挂载和持久化这个元素。
+ */
+
+export const TILE_MAP_NODE_WIDTH = 820
+export const TILE_MAP_FOOTER_HEIGHT = 22
+export const TILE_MAP_NODE_HEIGHT = 637
+export const TILE_MAP_NODE_MIN_WIDTH = 620
+export const TILE_MAP_NODE_MIN_HEIGHT = 487
+
+const MAP_VERSION = 1
+const DEFAULT_COLUMNS = 16
+const DEFAULT_ROWS = 12
+const DEFAULT_CELL_SIZE = 128
+const MAX_GRID_SIDE = 256
+const MAX_EXPORT_SIDE = 16384
+const GRID_BLOCK_SIZE = 4
+const MIN_MINOR_GRID_CELL_SCREEN_SIZE = 8
+const MINOR_GRID_SCREEN_WIDTH = 1.25
+const MAJOR_GRID_SCREEN_WIDTH = 2.5
+const ATLAS_COLUMNS = 8
+const ATLAS_MIN_ROWS = 8
+// Keep every atlas tile at 128px internally so the 8-column preview remains sharp when zoomed.
+const ATLAS_CELL_SIZE = 128
+const MIN_ATLAS_ZOOM = 0.5
+const MAX_ATLAS_ZOOM = 4
+const TILE_DRAG_TYPE = 'application/x-canvas-image'
+const AUTO_TERRAIN_ATLAS_SIDE = 4
+// SVG atlas order for the four quarter-cells: top-left, top-right, bottom-left, bottom-right.
+const AUTO_TERRAIN_TILE_INDEX_BY_MASK = [12, 13, 0, 3, 8, 1, 14, 5, 15, 4, 11, 2, 9, 10, 7, 6]
+const mountedViews = new Map()
+let pixiRuntimePromise = null
+
+export function reorderLayersByVisualDrop(layers, draggedLayerId, targetLayerId, placeAfter = false) {
+  const original = Array.isArray(layers) ? layers : []
+  if (!draggedLayerId || !targetLayerId || draggedLayerId === targetLayerId) return original
+
+  // Layers are painted bottom-to-top, while the inspector lists them top-to-bottom.
+  const visualOrder = [...original].reverse()
+  const draggedIndex = visualOrder.findIndex((layer) => layer.id === draggedLayerId)
+  const targetExists = visualOrder.some((layer) => layer.id === targetLayerId)
+  if (draggedIndex < 0 || !targetExists) return original
+
+  const [draggedLayer] = visualOrder.splice(draggedIndex, 1)
+  const targetIndex = visualOrder.findIndex((layer) => layer.id === targetLayerId)
+  visualOrder.splice(targetIndex + (placeAfter ? 1 : 0), 0, draggedLayer)
+  return visualOrder.reverse()
+}
+
+function loadScriptOnce(src) {
+  const existing = document.querySelector(`script[data-tile-map-runtime="${src}"]`)
+  if (existing) {
+    if (existing.dataset.loaded === 'true') return Promise.resolve()
+    return new Promise((resolve, reject) => {
+      existing.addEventListener('load', resolve, { once: true })
+      existing.addEventListener('error', () => reject(new Error(`无法加载 ${src}`)), { once: true })
+    })
+  }
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = src
+    script.dataset.tileMapRuntime = src
+    script.addEventListener('load', () => {
+      script.dataset.loaded = 'true'
+      resolve()
+    }, { once: true })
+    script.addEventListener('error', () => reject(new Error(`无法加载 ${src}`)), { once: true })
+    document.head.appendChild(script)
+  })
+}
+
+async function ensurePixiRuntime() {
+  if (globalThis.PIXI?.Application && globalThis.PIXI?.tilemap?.CompositeTilemap) return
+  if (!pixiRuntimePromise) {
+    pixiRuntimePromise = (async () => {
+      if (!globalThis.PIXI?.Application) await loadScriptOnce('/vendor/pixi.min.js')
+      if (!globalThis.PIXI?.tilemap?.CompositeTilemap) await loadScriptOnce('/vendor/pixi-tilemap.js')
+      if (!globalThis.PIXI?.Application || !globalThis.PIXI?.tilemap?.CompositeTilemap) {
+        throw new Error('PixiJS 地图渲染器初始化失败')
+      }
+    })().catch((error) => {
+      pixiRuntimePromise = null
+      throw error
+    })
+  }
+  await pixiRuntimePromise
+}
+
+function clampInteger(value, minimum, maximum, fallback) {
+  const parsed = Math.round(Number(value))
+  if (!Number.isFinite(parsed)) return fallback
+  return Math.min(maximum, Math.max(minimum, parsed))
+}
+
+function safeName(value, fallback) {
+  const text = String(value || '').trim()
+  return text || fallback
+}
+
+function normalizeSource(value) {
+  if (!value || typeof value !== 'object') return null
+  const assetId = String(value.assetId || '').trim()
+  const id = String(value.id || '').trim()
+  if (!assetId || !id) return null
+  const naturalWidth = clampInteger(value.naturalWidth, 1, 32768, 1)
+  const naturalHeight = clampInteger(value.naturalHeight, 1, 32768, 1)
+  const columns = clampInteger(value.columns, 1, 256, 1)
+  const rows = clampInteger(value.rows, 1, 256, 1)
+  const marginX = clampInteger(value.marginX, 0, naturalWidth - 1, 0)
+  const marginY = clampInteger(value.marginY, 0, naturalHeight - 1, 0)
+  const spacingX = clampInteger(value.spacingX, 0, naturalWidth - 1, 0)
+  const spacingY = clampInteger(value.spacingY, 0, naturalHeight - 1, 0)
+  const availableWidth = naturalWidth - marginX * 2 - spacingX * (columns - 1)
+  const availableHeight = naturalHeight - marginY * 2 - spacingY * (rows - 1)
+  const tileWidth = clampInteger(value.tileWidth, 1, naturalWidth, Math.max(1, Math.floor(availableWidth / columns)))
+  const tileHeight = clampInteger(value.tileHeight, 1, naturalHeight, Math.max(1, Math.floor(availableHeight / rows)))
+  return {
+    id,
+    assetId,
+    name: safeName(value.name, '地砖图片'),
+    naturalWidth,
+    naturalHeight,
+    columns,
+    rows,
+    marginX,
+    marginY,
+    spacingX,
+    spacingY,
+    tileWidth,
+    tileHeight,
+    paletteHidden: value.paletteHidden === true,
+  }
+}
+
+function normalizeBrush(value, sources) {
+  if (!value || typeof value !== 'object') return null
+  if (Array.isArray(value.tiles) && value.tiles.length) {
+    const sourceMap = new Map(sources.map((source) => [source.id, source]))
+    const columns = clampInteger(value.columns, 1, ATLAS_COLUMNS, 1)
+    const rows = clampInteger(value.rows, 1, MAX_GRID_SIDE, 1)
+    const tiles = value.tiles.slice(0, columns * rows).map((tile) => {
+      if (!tile || typeof tile !== 'object') return null
+      const source = sourceMap.get(String(tile.sourceId || ''))
+      if (!source) return null
+      return {
+        sourceId: source.id,
+        tileIndex: clampInteger(tile.tileIndex, 0, source.columns * source.rows - 1, 0),
+      }
+    })
+    while (tiles.length < columns * rows) tiles.push(null)
+    const firstTile = tiles.find(Boolean)
+    if (firstTile) {
+      return {
+        sourceId: firstTile.sourceId,
+        tileIndex: firstTile.tileIndex,
+        columns,
+        rows,
+        atlasIndex: Number.isFinite(Number(value.atlasIndex))
+          ? clampInteger(value.atlasIndex, 0, Number.MAX_SAFE_INTEGER, 0)
+          : null,
+        tiles,
+      }
+    }
+  }
+  const source = sources.find((candidate) => candidate.id === value.sourceId)
+  if (!source) return null
+  const tileIndex = clampInteger(value.tileIndex, 0, source.columns * source.rows - 1, 0)
+  const startColumn = tileIndex % source.columns
+  const startRow = Math.floor(tileIndex / source.columns)
+  const columns = clampInteger(value.columns, 1, source.columns - startColumn, 1)
+  const rows = clampInteger(value.rows, 1, source.rows - startRow, 1)
+  return { sourceId: source.id, tileIndex, columns, rows }
+}
+
+function normalizeCells(value, columns, rows, sources) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {}
+  const sourceMap = new Map(sources.map((source) => [source.id, source]))
+  const cells = {}
+  for (const [key, cell] of Object.entries(value)) {
+    const match = /^(\d+),(\d+)$/.exec(key)
+    if (!match || !cell || typeof cell !== 'object') continue
+    const x = Number(match[1])
+    const y = Number(match[2])
+    if (x < 0 || y < 0 || x >= columns || y >= rows) continue
+    const source = sourceMap.get(String(cell.sourceId || ''))
+    if (!source) continue
+    const tileIndex = clampInteger(cell.tileIndex, 0, source.columns * source.rows - 1, 0)
+    cells[`${x},${y}`] = { sourceId: source.id, tileIndex }
+  }
+  return cells
+}
+
+export function autoTerrainTileIndex(mask) {
+  return AUTO_TERRAIN_TILE_INDEX_BY_MASK[clampInteger(mask, 0, 15, 0)]
+}
+
+export function autoTerrainMaskAt(occupiedCells, x, y) {
+  const matches = (cellX, cellY) => occupiedCells?.has?.(`${cellX},${cellY}`) || occupiedCells?.[`${cellX},${cellY}`] === true
+  if (matches(x, y)) return 15
+  const north = matches(x, y - 1)
+  const east = matches(x + 1, y)
+  const south = matches(x, y + 1)
+  const west = matches(x - 1, y)
+  return (north || west || matches(x - 1, y - 1) ? 8 : 0) |
+    (north || east || matches(x + 1, y - 1) ? 4 : 0) |
+    (south || west || matches(x - 1, y + 1) ? 2 : 0) |
+    (south || east || matches(x + 1, y + 1) ? 1 : 0)
+}
+
+function createLayerId() {
+  return `layer_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`
+}
+
+function normalizeLayers(value, legacyCells, columns, rows, sources) {
+  const rawLayers = Array.isArray(value) ? value : []
+  const seenIds = new Set()
+  const layers = rawLayers.map((rawLayer, index) => {
+    if (!rawLayer || typeof rawLayer !== 'object') return null
+    let id = String(rawLayer.id || `layer-${index + 1}`).trim()
+    if (!id || seenIds.has(id)) id = createLayerId()
+    seenIds.add(id)
+    return {
+      id,
+      name: safeName(rawLayer.name, `图层 ${index + 1}`),
+      cells: normalizeCells(rawLayer.cells, columns, rows, sources),
+    }
+  }).filter(Boolean)
+  if (layers.length) return layers
+  return [{
+    id: 'layer-1',
+    name: '图层 1',
+    cells: normalizeCells(legacyCells, columns, rows, sources),
+  }]
+}
+
+function paintedCellCount(map) {
+  return map.layers.reduce((count, layer) => count + Object.keys(layer.cells).length, 0)
+}
+
+export function createPaletteFromSources(sources, brushImages = [], cellSize = DEFAULT_CELL_SIZE) {
+  const cells = {}
+  const sourceMap = new Map(sources.map((source) => [source.id, source]))
+  const placedSourceIds = new Set()
+  let cursorX = 0
+  let cursorY = 0
+  let shelfHeight = 0
+
+  const placeRectangle = (columns, rows, tiles) => {
+    if (cursorX > 0 && cursorX + columns > ATLAS_COLUMNS) {
+      cursorX = 0
+      cursorY += shelfHeight
+      shelfHeight = 0
+    }
+    for (let row = 0; row < rows; row += 1) {
+      for (let column = 0; column < columns; column += 1) {
+        const tile = tiles[row * columns + column]
+        if (!tile) continue
+        cells[`${cursorX + column},${cursorY + row}`] = tile
+      }
+    }
+    cursorX += columns
+    shelfHeight = Math.max(shelfHeight, rows)
+  }
+
+  for (const brushImage of brushImages) {
+    const tiles = brushImage.tileSourceIds.map((sourceId) => {
+      const source = sourceMap.get(sourceId)
+      placedSourceIds.add(sourceId)
+      if (!source || source.paletteHidden) return null
+      return { sourceId, tileIndex: 0 }
+    })
+    placeRectangle(brushImage.columns, brushImage.rows, tiles)
+  }
+
+  for (const source of sources) {
+    if (placedSourceIds.has(source.id) || source.paletteHidden) continue
+    const tiles = []
+    for (let tileIndex = 0; tileIndex < source.columns * source.rows; tileIndex += 1) {
+      tiles.push({ sourceId: source.id, tileIndex })
+    }
+    placeRectangle(Math.min(source.columns, ATLAS_COLUMNS), source.rows, tiles)
+  }
+  return {
+    version: 1,
+    layout: 'brush-images',
+    columns: ATLAS_COLUMNS,
+    rows: Math.max(ATLAS_MIN_ROWS, cursorY + shelfHeight),
+    cellSize,
+    cells,
+  }
+}
+
+function normalizePalette(value, sources, brushImages, cellSize) {
+  if (!value || typeof value !== 'object' || value.layout !== 'brush-images') {
+    return createPaletteFromSources(sources, brushImages, cellSize)
+  }
+  const rows = clampInteger(value.rows, ATLAS_MIN_ROWS, 65535, ATLAS_MIN_ROWS)
+  return {
+    version: 1,
+    layout: 'brush-images',
+    columns: ATLAS_COLUMNS,
+    rows,
+    cellSize,
+    cells: normalizeCells(value.cells, ATLAS_COLUMNS, rows, sources),
+  }
+}
+
+function normalizeBrushImage(value) {
+  if (!value || typeof value !== 'object') return null
+  const assetId = String(value.assetId || '').trim()
+  const sourceAssetId = String(value.sourceAssetId || '').trim()
+  const tileSourceIds = Array.isArray(value.tileSourceIds)
+    ? value.tileSourceIds.map(String).filter(Boolean)
+    : []
+  if (!assetId || !tileSourceIds.length) return null
+  return {
+    type: 'map_brush_image',
+    id: String(value.id || assetId),
+    assetId,
+    sourceAssetId,
+    name: safeName(value.name, '地砖图集'),
+    columns: clampInteger(value.columns, 1, 8, 1),
+    rows: clampInteger(value.rows, 1, 8, 1),
+    marginX: clampInteger(value.marginX, 0, 32767, 0),
+    marginY: clampInteger(value.marginY, 0, 32767, 0),
+    spacingX: clampInteger(value.spacingX, 0, 32767, 0),
+    spacingY: clampInteger(value.spacingY, 0, 32767, 0),
+    tileSourceIds,
+  }
+}
+
+export function normalizeTileMapData(value) {
+  const source = value && typeof value === 'object' ? value : {}
+  const columns = clampInteger(source.columns, 1, MAX_GRID_SIDE, DEFAULT_COLUMNS)
+  const rows = clampInteger(source.rows, 1, MAX_GRID_SIDE, DEFAULT_ROWS)
+  const cellSize = clampInteger(source.cellSize, 8, 512, DEFAULT_CELL_SIZE)
+  const sources = Array.isArray(source.sources)
+    ? source.sources.map(normalizeSource).filter(Boolean)
+    : []
+  const rawBrushImages = Array.isArray(source.brushImages) && source.brushImages.length
+    ? source.brushImages
+    : source.tilesets
+  const brushImages = Array.isArray(rawBrushImages)
+    ? rawBrushImages.map(normalizeBrushImage).filter(Boolean)
+    : []
+  const activeBrush = normalizeBrush(source.activeBrush, sources)
+  const layers = normalizeLayers(source.layers, source.cells, columns, rows, sources)
+  const requestedLayerId = String(source.activeLayerId || '')
+  const activeLayerId = layers.some((layer) => layer.id === requestedLayerId)
+    ? requestedLayerId
+    : layers[layers.length - 1].id
+  return {
+    version: MAP_VERSION,
+    columns,
+    rows,
+    cellSize,
+    activeTool: ['brush', 'terrain', 'eraser'].includes(source.activeTool) ? source.activeTool : 'brush',
+    activeBrush: activeBrush || (sources[0] ? { sourceId: sources[0].id, tileIndex: 0 } : null),
+    activeTerrainBrushId: brushImages.some((brushImage) => (
+      brushImage.id === source.activeTerrainBrushId &&
+      brushImage.columns === AUTO_TERRAIN_ATLAS_SIDE &&
+      brushImage.rows === AUTO_TERRAIN_ATLAS_SIDE
+    )) ? source.activeTerrainBrushId : null,
+    sources,
+    brushImages,
+    palette: normalizePalette(source.palette, sources, brushImages, cellSize),
+    layers,
+    activeLayerId,
+  }
+}
+
+export function createTileMapItem({ id, x, y, name = '地图', folderName = '地图', cellSize = DEFAULT_CELL_SIZE }) {
+  return {
+    id,
+    type: 'tile_map',
+    name: safeName(name, '地图'),
+    folderName: safeName(folderName, '地图'),
+    x: Number(x) - TILE_MAP_NODE_WIDTH / 2,
+    y: Number(y) - 18,
+    width: TILE_MAP_NODE_WIDTH,
+    height: TILE_MAP_NODE_HEIGHT,
+    tileMap: normalizeTileMapData({ cellSize }),
+  }
+}
+
+export function tileMapContentAspectRatio(item) {
+  const map = item?.tileMap || item || {}
+  const columns = clampInteger(map.columns, 1, MAX_GRID_SIDE, DEFAULT_COLUMNS)
+  const rows = clampInteger(map.rows, 1, MAX_GRID_SIDE, DEFAULT_ROWS)
+  return columns / rows
+}
+
+export function tileMapNodeHeightForWidth(item, width) {
+  const safeWidth = Math.max(1, Number(width) || TILE_MAP_NODE_WIDTH)
+  return Math.round(safeWidth / tileMapContentAspectRatio(item) + TILE_MAP_FOOTER_HEIGHT)
+}
+
+export function isTileMapItem(item) {
+  return Boolean(item && item.type === 'tile_map')
+}
+
+export function normalizeTileMapItem(item, index = 0) {
+  const fileParts = String(item?.tileMapFile || '').replace(/\\/g, '/').split('/').filter(Boolean)
+  const fileFolderName = fileParts.length > 1 ? fileParts[fileParts.length - 2] : ''
+  const tileMap = normalizeTileMapData(item?.tileMap)
+  const width = Math.max(TILE_MAP_NODE_MIN_WIDTH, Number(item?.width) || TILE_MAP_NODE_WIDTH)
+  return {
+    ...item,
+    type: 'tile_map',
+    name: safeName(item?.name, '地图'),
+    folderName: safeName(item?.folderName || fileFolderName, '地图'),
+    x: Number.isFinite(Number(item?.x)) ? Number(item.x) : 60 + (index % 3) * 860,
+    y: Number.isFinite(Number(item?.y)) ? Number(item.y) : 60 + Math.floor(index / 3) * 660,
+    width,
+    height: tileMapNodeHeightForWidth(tileMap, width),
+    tileMap,
+  }
+}
+
+export function serializeTileMapItem(item) {
+  const normalized = normalizeTileMapItem(item)
+  return {
+    id: normalized.id,
+    type: 'tile_map',
+    name: normalized.name,
+    x: normalized.x,
+    y: normalized.y,
+    width: normalized.width,
+    height: normalized.height,
+    ...(normalized.tileMapFile ? { tileMapFile: normalized.tileMapFile } : {}),
+    ...(normalized.tileMapMetaFile ? { tileMapMetaFile: normalized.tileMapMetaFile } : {}),
+    folderName: normalized.folderName,
+    references: (
+      normalized.tileMap.brushImages.length
+        ? normalized.tileMap.brushImages.map((brushImage) => brushImage.sourceAssetId)
+        : normalized.tileMap.sources.map((source) => source.assetId)
+    ).filter((id, index, ids) => id && ids.indexOf(id) === index).map((id) => ({
+      id,
+      role: 'map-brush-image',
+    })),
+    tileMap: normalized.tileMap,
+  }
+}
+
+export function tileMapSummary(item) {
+  const map = normalizeTileMapData(item?.tileMap)
+  return {
+    dimensions: `${map.columns} × ${map.rows} 格`,
+    outputSize: `${map.columns * map.cellSize} × ${map.rows * map.cellSize} px`,
+    sources: String(map.sources.length),
+    paintedCells: String(paintedCellCount(map)),
+  }
+}
+
+function makeElement(tagName, className, text) {
+  const element = document.createElement(tagName)
+  if (className) element.className = className
+  if (text !== undefined) element.textContent = text
+  return element
+}
+
+function makeButton(text, className = 'tile-map-button') {
+  const button = makeElement('button', className, text)
+  button.type = 'button'
+  return button
+}
+
+function sourceTileFrame(source, tileIndex) {
+  const column = tileIndex % source.columns
+  const row = Math.floor(tileIndex / source.columns)
+  return {
+    x: source.marginX + column * (source.tileWidth + source.spacingX),
+    y: source.marginY + row * (source.tileHeight + source.spacingY),
+    width: source.tileWidth,
+    height: source.tileHeight,
+  }
+}
+
+function suggestedSplit(width, height) {
+  if (width === height) return { columns: 1, rows: 1 }
+  if (width > height && width % height === 0 && width / height <= 32) {
+    return { columns: width / height, rows: 1 }
+  }
+  if (height > width && height % width === 0 && height / width <= 32) {
+    return { columns: 1, rows: height / width }
+  }
+  return { columns: 1, rows: 1 }
+}
+
+function loadHtmlImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.decoding = 'async'
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error('无法读取拖入的图片'))
+    image.src = url
+  })
+}
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
+
+function safeFileStem(name) {
+  return safeName(name, 'tile-map')
+    .replace(/[\\/:*?"<>|]+/g, '-')
+    .replace(/\s+/g, '-')
+    .slice(0, 80)
+}
+
+class TileMapView {
+  constructor(container, item, callbacks) {
+    this.container = container
+    this.item = item
+    this.map = item.tileMap = normalizeTileMapData(item.tileMap)
+    this.callbacks = callbacks
+    this.app = null
+    this.backgroundLayer = null
+    this.tileLayer = null
+    this.gridLayer = null
+    this.hoverLayer = null
+    this.baseTextureCache = new Map()
+    this.imageCache = new Map()
+    this.renderSequence = 0
+    this.disposed = false
+    this.painting = false
+    this.strokeChanged = false
+    this.strokeBefore = null
+    this.outerScale = 1
+    this.history = []
+    this.future = []
+    this.resizeObserver = null
+    this.resizeFrame = 0
+    this.inspectorRoot = null
+    this.selectedStatus = null
+    this.stageHost = null
+    this.palette = null
+    this.tilesetCanvas = null
+    this.tilesetSelectionCanvas = null
+    this.brushContextMenu = null
+    this.paletteEmpty = null
+    this.atlasCells = []
+    this.atlasDrag = null
+    this.atlasZoom = 1
+    this.atlasZoomLabel = null
+    this.paletteRenderSequence = 0
+    this.layerRenderSequence = 0
+    this.layerList = null
+    this.draggedLayerId = null
+    this.undoButton = null
+    this.redoButton = null
+    this.brushButton = null
+    this.terrainBrushButton = null
+    this.eraserButton = null
+    this.specLabel = null
+  }
+
+  activate() {
+    this.callbacks.onActivate?.(this.item.id)
+  }
+
+  reportError(error) {
+    const message = String(error?.message || error || '地图操作失败')
+    if (this.selectedStatus) this.selectedStatus.textContent = message
+    this.callbacks.onError?.(message)
+  }
+
+  activeLayer() {
+    return this.map.layers.find((layer) => layer.id === this.map.activeLayerId) || this.map.layers[0]
+  }
+
+  layerSnapshot() {
+    return {
+      activeLayerId: this.map.activeLayerId,
+      layers: this.map.layers.map((layer) => ({ ...layer, cells: { ...layer.cells } })),
+    }
+  }
+
+  restoreLayerSnapshot(snapshot) {
+    this.map.layers = snapshot.layers.map((layer) => ({ ...layer, cells: { ...layer.cells } }))
+    this.map.activeLayerId = this.map.layers.some((layer) => layer.id === snapshot.activeLayerId)
+      ? snapshot.activeLayerId
+      : this.map.layers[this.map.layers.length - 1].id
+  }
+
+  notifyChange() {
+    this.item.tileMap = this.map
+    this.updateHeaderSummary()
+    this.callbacks.onChange?.(this.item.id, this.map)
+  }
+
+  build() {
+    const root = makeElement('div', 'tile-map-editor')
+    root.dataset.tileMapEditor = this.item.id
+    this.stageHost = makeElement('div', 'tile-map-stage')
+    const dragHandle = makeElement('div', 'canvas-node-caption tile-map-drag-handle')
+    const mapName = makeElement('span', 'tile-map-footer-name', this.item.folderName || this.item.name || '地图')
+    this.specLabel = makeElement(
+      'span',
+      'tile-map-footer-spec',
+      `瓦片规格 ${this.map.cellSize} × ${this.map.cellSize} px`,
+    )
+    dragHandle.append(mapName, this.specLabel)
+    dragHandle.title = '拖拽移动地图元素'
+    root.append(this.stageHost, dragHandle)
+    this.container.appendChild(root)
+
+    root.addEventListener('pointerdown', (event) => {
+      this.activate()
+      if (event.button === 0 && !event.target.closest('.tile-map-drag-handle')) event.stopPropagation()
+    })
+    void this.mountPixi()
+  }
+
+  mountInspector(container) {
+    this.closeBrushContextMenu()
+    this.inspectorRoot?.remove()
+    this.atlasDrag = null
+
+    const root = makeElement('section', 'tile-map-inspector')
+    root.dataset.tileMapInspector = this.item.id
+    this.inspectorRoot = root
+
+    const iconButton = (label, paths) => {
+      const button = makeButton('', 'tile-map-icon-button')
+      button.title = label
+      button.setAttribute('aria-label', label)
+      button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${paths}</svg>`
+      return button
+    }
+
+    const layerSection = makeElement('section', 'tile-map-layer-section')
+    const layerHeader = makeElement('div', 'tile-map-layer-header')
+    layerHeader.appendChild(makeElement('strong', null, '图层'))
+    const addLayerButton = makeButton('+ 新建图层')
+    this.layerList = makeElement('div', 'tile-map-layer-list')
+    layerHeader.appendChild(addLayerButton)
+    layerSection.append(layerHeader, this.layerList)
+
+    const toolActions = makeElement('div', 'tile-map-tool-strip')
+    this.brushButton = iconButton('画笔', '<path d="m14.7 2.3 7 7-11 11H3v-7Z"/><path d="m13 4 7 7"/>')
+    this.terrainBrushButton = iconButton('自动地形画笔', '<path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4z"/><path d="m15 18 2 2 4-5"/>')
+    this.eraserButton = iconButton('橡皮', '<path d="m7 21-4-4a2 2 0 0 1 0-3L13.5 3.5a2 2 0 0 1 3 0l4 4a2 2 0 0 1 0 3L10 21Z"/><path d="m6.5 10 7 7"/><path d="M7 21h14"/>')
+    this.undoButton = iconButton('撤销', '<path d="M9 7 4 12l5 5"/><path d="M20 17a7 7 0 0 0-7-7H4"/>')
+    this.redoButton = iconButton('重做', '<path d="m15 7 5 5-5 5"/><path d="M4 17a7 7 0 0 1 7-7h9"/>')
+    toolActions.append(this.brushButton, this.terrainBrushButton, this.eraserButton, this.undoButton, this.redoButton)
+
+    const gridFields = makeElement('div', 'tile-map-grid-fields')
+    const columnsInput = this.numberField('列', this.map.columns, 1, MAX_GRID_SIDE)
+    const rowsInput = this.numberField('行', this.map.rows, 1, MAX_GRID_SIDE)
+    gridFields.append(columnsInput.label, rowsInput.label)
+
+    this.palette = makeElement('div', 'tile-map-palette')
+    this.tilesetCanvas = document.createElement('canvas')
+    this.tilesetCanvas.className = 'tile-map-tileset-canvas'
+    this.tilesetCanvas.tabIndex = 0
+    this.tilesetSelectionCanvas = document.createElement('canvas')
+    this.tilesetSelectionCanvas.className = 'tile-map-tileset-selection'
+    this.tilesetSelectionCanvas.setAttribute('aria-hidden', 'true')
+    this.paletteEmpty = makeElement('p', 'tile-map-palette-empty', '将画布图片拖入此处以添加画笔')
+    this.palette.append(this.paletteEmpty, this.tilesetCanvas, this.tilesetSelectionCanvas)
+
+    this.selectedStatus = null
+    root.append(
+      this.palette,
+      toolActions,
+      gridFields,
+      layerSection,
+    )
+    container.appendChild(root)
+
+    for (const control of root.querySelectorAll('button, input')) {
+      control.addEventListener('pointerdown', (event) => event.stopPropagation())
+    }
+
+    const openDroppedImage = async (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      root.classList.remove('is-image-over')
+      const raw = event.dataTransfer?.getData(TILE_DRAG_TYPE)
+      if (!raw) {
+        this.reportError('请从画布上的图片拖入地图')
+        return
+      }
+      try {
+        const reference = JSON.parse(raw)
+        if (!reference?.id) throw new Error('拖入的图片信息无效')
+        await this.openSliceDialog(reference)
+      } catch (error) {
+        this.reportError(error)
+      }
+    }
+    root.addEventListener('dragenter', (event) => {
+      if (!event.dataTransfer?.types?.includes(TILE_DRAG_TYPE)) return
+      event.preventDefault()
+      root.classList.add('is-image-over')
+    })
+    root.addEventListener('dragover', (event) => {
+      if (!event.dataTransfer?.types?.includes(TILE_DRAG_TYPE)) return
+      event.preventDefault()
+      event.dataTransfer.dropEffect = 'copy'
+    })
+    root.addEventListener('dragleave', (event) => {
+      if (!root.contains(event.relatedTarget)) root.classList.remove('is-image-over')
+    })
+    root.addEventListener('drop', openDroppedImage)
+
+    this.brushButton.addEventListener('click', () => this.setTool('brush'))
+    this.terrainBrushButton.addEventListener('click', () => this.setTool('terrain'))
+    this.eraserButton.addEventListener('click', () => this.setTool('eraser'))
+    this.undoButton.addEventListener('click', () => this.undo())
+    this.redoButton.addEventListener('click', () => this.redo())
+    addLayerButton.addEventListener('click', () => this.addLayer())
+
+    const commitGrid = () => {
+      const columns = clampInteger(columnsInput.input.value, 1, MAX_GRID_SIDE, this.map.columns)
+      const rows = clampInteger(rowsInput.input.value, 1, MAX_GRID_SIDE, this.map.rows)
+      const cellSize = this.map.cellSize
+      if (columns * cellSize > MAX_EXPORT_SIDE || rows * cellSize > MAX_EXPORT_SIDE) {
+        this.reportError(`导出尺寸不能超过 ${MAX_EXPORT_SIDE} × ${MAX_EXPORT_SIDE} px`)
+        columnsInput.input.value = String(this.map.columns)
+        rowsInput.input.value = String(this.map.rows)
+        return
+      }
+      const changed = columns !== this.map.columns || rows !== this.map.rows || cellSize !== this.map.cellSize
+      if (!changed) return
+      this.map.columns = columns
+      this.map.rows = rows
+      this.map.cellSize = cellSize
+      this.map.layers = this.map.layers.map((layer) => ({
+        ...layer,
+        cells: normalizeCells(layer.cells, columns, rows, this.map.sources),
+      }))
+      this.future = []
+      this.lockNodeAspectRatio()
+      this.scheduleRendererResize()
+      void this.renderTiles()
+      this.notifyChange()
+    }
+    columnsInput.input.addEventListener('change', commitGrid)
+    rowsInput.input.addEventListener('change', commitGrid)
+
+    this.setTool(this.map.activeTool, false)
+    this.bindTilesetSelection()
+    this.setAtlasZoom(this.atlasZoom)
+    this.renderPalette()
+    this.renderLayerList()
+    this.updateHeaderSummary()
+    this.updateHistoryButtons()
+  }
+
+  numberField(labelText, value, minimum, maximum, suffix = '') {
+    const label = makeElement('label', 'tile-map-number-field')
+    label.appendChild(makeElement('span', null, labelText))
+    const input = document.createElement('input')
+    input.type = 'number'
+    input.min = String(minimum)
+    input.max = String(maximum)
+    input.step = '1'
+    input.value = String(value)
+    label.appendChild(input)
+    if (suffix) label.appendChild(makeElement('span', 'tile-map-unit', suffix))
+    return { label, input }
+  }
+
+  addLayer() {
+    this.pushHistory(this.layerSnapshot())
+    const layer = {
+      id: createLayerId(),
+      name: `图层 ${this.map.layers.length + 1}`,
+      cells: {},
+    }
+    this.map.layers.push(layer)
+    this.map.activeLayerId = layer.id
+    this.future = []
+    this.renderLayerList()
+    this.renderTiles()
+    this.notifyChange()
+  }
+
+  deleteLayer(layerId) {
+    if (this.map.layers.length <= 1) return
+    const index = this.map.layers.findIndex((layer) => layer.id === layerId)
+    if (index < 0) return
+    const layer = this.map.layers[index]
+    if (Object.keys(layer.cells).length && !window.confirm(`确定删除“${layer.name}”及其中的所有地砖？`)) return
+    this.pushHistory(this.layerSnapshot())
+    this.map.layers.splice(index, 1)
+    if (this.map.activeLayerId === layerId) {
+      this.map.activeLayerId = this.map.layers[Math.min(index, this.map.layers.length - 1)].id
+    }
+    this.future = []
+    this.renderLayerList()
+    this.renderTiles()
+    this.notifyChange()
+  }
+
+  selectLayer(layerId) {
+    if (layerId === this.map.activeLayerId || !this.map.layers.some((layer) => layer.id === layerId)) return
+    this.map.activeLayerId = layerId
+    this.renderLayerList()
+    this.notifyChange()
+  }
+
+  renameLayer(layerId, value) {
+    const layer = this.map.layers.find((candidate) => candidate.id === layerId)
+    if (!layer) return
+    const name = safeName(value, layer.name)
+    if (name === layer.name) {
+      this.renderLayerList()
+      return
+    }
+    this.pushHistory(this.layerSnapshot())
+    layer.name = name
+    this.future = []
+    this.renderLayerList()
+    this.notifyChange()
+  }
+
+  clearLayerDragStyles() {
+    if (!this.layerList) return
+    for (const row of this.layerList.children) {
+      row.classList.remove('is-dragging', 'is-drop-before', 'is-drop-after')
+    }
+  }
+
+  reorderLayer(draggedLayerId, targetLayerId, placeAfter) {
+    const reordered = reorderLayersByVisualDrop(this.map.layers, draggedLayerId, targetLayerId, placeAfter)
+    if (reordered === this.map.layers || reordered.every((layer, index) => layer === this.map.layers[index])) return
+    this.pushHistory(this.layerSnapshot())
+    this.map.layers = reordered
+    this.future = []
+    this.renderLayerList()
+    this.renderTiles()
+    this.notifyChange()
+  }
+
+  renderLayerList() {
+    if (!this.layerList) return
+    this.layerList.replaceChildren()
+    for (const layer of [...this.map.layers].reverse()) {
+      const row = makeElement('div', 'tile-map-layer-item')
+      row.classList.toggle('is-active', layer.id === this.map.activeLayerId)
+      row.dataset.layerId = layer.id
+      row.tabIndex = 0
+
+      const reorderHandle = makeElement('span', 'tile-map-layer-drag-handle', '⠿')
+      reorderHandle.draggable = true
+      reorderHandle.title = `拖拽调整“${layer.name}”的顺序`
+      reorderHandle.setAttribute('aria-label', reorderHandle.title)
+      reorderHandle.addEventListener('pointerdown', (event) => event.stopPropagation())
+      reorderHandle.addEventListener('click', (event) => event.stopPropagation())
+      reorderHandle.addEventListener('dragstart', (event) => {
+        this.draggedLayerId = layer.id
+        row.classList.add('is-dragging')
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('text/plain', layer.id)
+      })
+      reorderHandle.addEventListener('dragend', () => {
+        this.draggedLayerId = null
+        this.clearLayerDragStyles()
+      })
+
+      const thumbnail = document.createElement('canvas')
+      thumbnail.className = 'tile-map-layer-thumbnail'
+      thumbnail.width = 112
+      thumbnail.height = 72
+      thumbnail.setAttribute('aria-hidden', 'true')
+
+      const name = document.createElement('input')
+      name.type = 'text'
+      name.className = 'tile-map-layer-name'
+      name.value = layer.name
+      name.maxLength = 80
+      name.setAttribute('aria-label', '图层名称')
+      name.addEventListener('pointerdown', (event) => event.stopPropagation())
+      name.addEventListener('click', (event) => event.stopPropagation())
+      name.addEventListener('focus', () => {
+        if (this.map.activeLayerId === layer.id) return
+        this.map.activeLayerId = layer.id
+        for (const item of this.layerList?.children || []) {
+          item.classList.toggle('is-active', item.dataset.layerId === layer.id)
+        }
+        this.notifyChange()
+      })
+      name.addEventListener('change', () => this.renameLayer(layer.id, name.value))
+      name.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') name.blur()
+      })
+
+      const remove = makeButton('×', 'tile-map-layer-delete')
+      remove.disabled = this.map.layers.length <= 1
+      remove.title = remove.disabled ? '至少保留一个图层' : `删除“${layer.name}”`
+      remove.setAttribute('aria-label', remove.title)
+      remove.addEventListener('pointerdown', (event) => event.stopPropagation())
+      remove.addEventListener('click', (event) => {
+        event.stopPropagation()
+        this.deleteLayer(layer.id)
+      })
+
+      row.append(reorderHandle, thumbnail, name, remove)
+      row.addEventListener('click', () => this.selectLayer(layer.id))
+      row.addEventListener('dragover', (event) => {
+        if (!this.draggedLayerId || this.draggedLayerId === layer.id) return
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'move'
+        const placeAfter = event.clientY >= row.getBoundingClientRect().top + row.offsetHeight / 2
+        this.clearLayerDragStyles()
+        row.classList.add(placeAfter ? 'is-drop-after' : 'is-drop-before')
+        const draggedRow = this.layerList?.querySelector(`[data-layer-id="${CSS.escape(this.draggedLayerId)}"]`)
+        draggedRow?.classList.add('is-dragging')
+      })
+      row.addEventListener('drop', (event) => {
+        if (!this.draggedLayerId || this.draggedLayerId === layer.id) return
+        event.preventDefault()
+        const draggedLayerId = this.draggedLayerId
+        const placeAfter = event.clientY >= row.getBoundingClientRect().top + row.offsetHeight / 2
+        this.draggedLayerId = null
+        this.clearLayerDragStyles()
+        this.reorderLayer(draggedLayerId, layer.id, placeAfter)
+      })
+      row.addEventListener('keydown', (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && event.target === row) {
+          event.preventDefault()
+          this.selectLayer(layer.id)
+        }
+      })
+      this.layerList.appendChild(row)
+    }
+    void this.renderLayerThumbnails()
+  }
+
+  async renderLayerThumbnails() {
+    if (!this.layerList) return
+    const sequence = ++this.layerRenderSequence
+    const sourceMap = new Map(this.map.sources.map((source) => [source.id, source]))
+    const usedSourceIds = [...new Set(this.map.layers.flatMap((layer) => (
+      Object.values(layer.cells).map((cell) => cell.sourceId)
+    )))]
+    const loaded = new Map()
+    await Promise.all(usedSourceIds.map(async (sourceId) => {
+      const source = sourceMap.get(sourceId)
+      if (!source) return
+      try {
+        loaded.set(sourceId, await this.htmlImageForSource(source))
+      } catch {
+        /* Missing assets stay transparent in the thumbnail. */
+      }
+    }))
+    if (this.disposed || sequence !== this.layerRenderSequence || !this.layerList) return
+
+    for (const row of this.layerList.children) {
+      const layer = this.map.layers.find((candidate) => candidate.id === row.dataset.layerId)
+      const canvas = row.querySelector('.tile-map-layer-thumbnail')
+      if (!layer || !canvas) continue
+      const context = canvas.getContext('2d')
+      context.imageSmoothingEnabled = false
+      context.clearRect(0, 0, canvas.width, canvas.height)
+      context.fillStyle = '#101720'
+      context.fillRect(0, 0, canvas.width, canvas.height)
+      const scale = Math.min(canvas.width / this.map.columns, canvas.height / this.map.rows)
+      const tileWidth = Math.max(0.5, scale)
+      const tileHeight = Math.max(0.5, scale)
+      const offsetX = (canvas.width - this.map.columns * scale) / 2
+      const offsetY = (canvas.height - this.map.rows * scale) / 2
+      for (const [key, cell] of Object.entries(layer.cells)) {
+        const source = sourceMap.get(cell.sourceId)
+        const image = loaded.get(cell.sourceId)
+        if (!source || !image) continue
+        const [x, y] = key.split(',').map(Number)
+        const frame = sourceTileFrame(source, cell.tileIndex)
+        context.drawImage(
+          image,
+          frame.x,
+          frame.y,
+          frame.width,
+          frame.height,
+          offsetX + x * scale,
+          offsetY + y * scale,
+          tileWidth,
+          tileHeight,
+        )
+      }
+    }
+  }
+
+  async mountPixi() {
+    await ensurePixiRuntime()
+    const PIXI = globalThis.PIXI
+    const CompositeTilemap = PIXI?.tilemap?.CompositeTilemap
+    if (!PIXI?.Application || !CompositeTilemap) {
+      this.reportError('PixiJS 地图渲染器未加载')
+      return
+    }
+    try {
+      const app = new PIXI.Application()
+      await app.init({
+        resizeTo: this.stageHost,
+        preference: 'webgl',
+        backgroundColor: 0x10151c,
+        antialias: false,
+        roundPixels: true,
+        autoDensity: true,
+        resolution: Math.min(2, window.devicePixelRatio || 1),
+      })
+      if (this.disposed) {
+        app.destroy(true)
+        return
+      }
+      this.app = app
+      app.canvas.classList.add('tile-map-pixi-canvas')
+      app.canvas.style.touchAction = 'none'
+      this.stageHost.prepend(app.canvas)
+      this.backgroundLayer = new PIXI.Graphics()
+      this.tileLayer = new PIXI.Container()
+      this.gridLayer = new PIXI.Graphics()
+      this.hoverLayer = new PIXI.Graphics()
+      app.stage.sortableChildren = true
+      this.backgroundLayer.zIndex = 0
+      this.gridLayer.zIndex = 10
+      this.tileLayer.zIndex = 20
+      this.hoverLayer.zIndex = 30
+      app.stage.addChild(this.backgroundLayer, this.tileLayer, this.gridLayer, this.hoverLayer)
+      this.bindPixiPointerEvents(app.canvas)
+      this.resizeObserver = new ResizeObserver(() => this.scheduleRendererResize())
+      this.resizeObserver.observe(this.stageHost)
+      this.resizeRendererToHost()
+      await this.renderTiles()
+    } catch (error) {
+      this.reportError(error)
+    }
+  }
+
+  bindPixiPointerEvents(canvas) {
+    canvas.addEventListener('contextmenu', (event) => event.preventDefault())
+    canvas.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      this.activate()
+      this.painting = true
+      this.strokeChanged = false
+      this.strokeBefore = this.layerSnapshot()
+      canvas.setPointerCapture?.(event.pointerId)
+      this.paintAtEvent(event)
+    })
+    canvas.addEventListener('pointermove', (event) => {
+      const point = this.eventCell(event)
+      this.drawHover(point)
+      if (!this.painting) return
+      event.preventDefault()
+      this.paintAtEvent(event)
+    })
+    const finish = (event) => {
+      if (!this.painting) return
+      this.painting = false
+      if (this.strokeChanged && this.strokeBefore) {
+        this.pushHistory(this.strokeBefore)
+        this.future = []
+        this.renderLayerList()
+        this.notifyChange()
+      }
+      this.strokeBefore = null
+      this.strokeChanged = false
+    }
+    canvas.addEventListener('pointerup', finish)
+    canvas.addEventListener('pointercancel', finish)
+    canvas.addEventListener('pointerleave', () => {
+      this.hoverLayer?.clear()
+      finish()
+    })
+  }
+
+  clientToScreen(clientX, clientY) {
+    if (!this.app?.screen || !this.app.canvas) return null
+    const rect = this.app.canvas.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return null
+    // The outer canvas world is CSS-scaled. Convert visual client coordinates
+    // back to Pixi's logical renderer coordinates before applying world transforms.
+    return {
+      x: (clientX - rect.left) * this.app.screen.width / rect.width,
+      y: (clientY - rect.top) * this.app.screen.height / rect.height,
+    }
+  }
+
+  eventCell(event) {
+    if (!this.app) return null
+    const screenPoint = this.clientToScreen(event.clientX, event.clientY)
+    if (!screenPoint) return null
+    const cellWidth = this.app.screen.width / this.map.columns
+    const cellHeight = this.app.screen.height / this.map.rows
+    const x = Math.floor(screenPoint.x / cellWidth)
+    const y = Math.floor(screenPoint.y / cellHeight)
+    if (x < 0 || y < 0 || x >= this.map.columns || y >= this.map.rows) return null
+    return { x, y }
+  }
+
+  paintAtEvent(event) {
+    const point = this.eventCell(event)
+    if (!point) return
+    const key = `${point.x},${point.y}`
+    const layer = this.activeLayer()
+    const erase = this.map.activeTool === 'eraser'
+    if (erase) {
+      if (!layer.cells[key]) return
+      delete layer.cells[key]
+    } else if (this.map.activeTool === 'terrain') {
+      const brushImage = this.activeTerrainBrushImage()
+      if (!brushImage) {
+        if (this.selectedStatus) this.selectedStatus.textContent = '请先在颜料盘中选择一个完整的 4×4 地形图集'
+        return
+      }
+      this.paintAutoTerrainAt(layer, brushImage, point.x, point.y)
+    } else {
+      if (!this.map.activeBrush) {
+        if (this.selectedStatus) this.selectedStatus.textContent = '请先在左侧栏导入图片并选择地砖'
+        return
+      }
+      const brush = this.map.activeBrush
+      const brushColumns = brush.columns || 1
+      const brushRows = brush.rows || 1
+      const primarySource = this.map.sources.find((candidate) => candidate.id === brush.sourceId)
+      const sourceMap = new Map(this.map.sources.map((source) => [source.id, source]))
+      const sourceColumn = primarySource ? brush.tileIndex % primarySource.columns : 0
+      const sourceRow = primarySource ? Math.floor(brush.tileIndex / primarySource.columns) : 0
+      let changed = false
+      for (let brushY = 0; brushY < brushRows; brushY += 1) {
+        for (let brushX = 0; brushX < brushColumns; brushX += 1) {
+          const brushTile = Array.isArray(brush.tiles)
+            ? brush.tiles[brushY * brushColumns + brushX]
+            : primarySource
+              ? {
+                  sourceId: primarySource.id,
+                  tileIndex: (sourceRow + brushY) * primarySource.columns + sourceColumn + brushX,
+                }
+              : null
+          if (!brushTile || !sourceMap.has(brushTile.sourceId)) continue
+          const targetX = point.x + brushX
+          const targetY = point.y + brushY
+          if (targetX >= this.map.columns || targetY >= this.map.rows) continue
+          const targetKey = `${targetX},${targetY}`
+          const next = {
+            sourceId: brushTile.sourceId,
+            tileIndex: brushTile.tileIndex,
+          }
+          const current = layer.cells[targetKey]
+          if (current?.sourceId === next.sourceId && current?.tileIndex === next.tileIndex) continue
+          layer.cells[targetKey] = next
+          changed = true
+        }
+      }
+      if (!changed) return
+    }
+    this.strokeChanged = true
+    this.renderTiles()
+    this.updateHeaderSummary()
+  }
+
+  activeTerrainBrushImage() {
+    const sourceIds = new Set(this.map.sources.map((source) => source.id))
+    return this.map.brushImages.find((brushImage) => (
+      brushImage.id === this.map.activeTerrainBrushId &&
+      brushImage.columns === AUTO_TERRAIN_ATLAS_SIDE &&
+      brushImage.rows === AUTO_TERRAIN_ATLAS_SIDE &&
+      brushImage.tileSourceIds.length >= AUTO_TERRAIN_ATLAS_SIDE ** 2 &&
+      brushImage.tileSourceIds.slice(0, AUTO_TERRAIN_ATLAS_SIDE ** 2).every((sourceId) => sourceIds.has(sourceId))
+    )) || null
+  }
+
+  terrainBrushImageForTile(tile) {
+    if (!tile?.sourceId) return null
+    return this.map.brushImages.find((brushImage) => (
+      brushImage.columns === AUTO_TERRAIN_ATLAS_SIDE &&
+      brushImage.rows === AUTO_TERRAIN_ATLAS_SIDE &&
+      brushImage.tileSourceIds.length >= AUTO_TERRAIN_ATLAS_SIDE ** 2 &&
+      brushImage.tileSourceIds.includes(tile.sourceId)
+    )) || null
+  }
+
+  paintAutoTerrainAt(layer, brushImage, terrainX, terrainY) {
+    const pureTerrainSourceId = brushImage.tileSourceIds[autoTerrainTileIndex(15)]
+    if (!pureTerrainSourceId) return
+    const occupiedCells = new Set(
+      Object.entries(layer.cells)
+        .filter(([, cell]) => cell.sourceId === pureTerrainSourceId)
+        .map(([key]) => key),
+    )
+    occupiedCells.add(`${terrainX},${terrainY}`)
+    for (let y = terrainY - 1; y <= terrainY + 1; y += 1) {
+      for (let x = terrainX - 1; x <= terrainX + 1; x += 1) {
+        if (x < 0 || y < 0 || x >= this.map.columns || y >= this.map.rows) continue
+        const key = `${x},${y}`
+        const mask = autoTerrainMaskAt(occupiedCells, x, y)
+        if (!mask) continue
+        const tileSourceId = brushImage.tileSourceIds[autoTerrainTileIndex(mask)]
+        if (!tileSourceId || !this.map.sources.some((source) => source.id === tileSourceId)) continue
+        layer.cells[key] = { sourceId: tileSourceId, tileIndex: 0 }
+      }
+    }
+  }
+
+  setTool(tool, notify = true) {
+    this.map.activeTool = ['brush', 'terrain', 'eraser'].includes(tool) ? tool : 'brush'
+    this.brushButton?.classList.toggle('is-active', this.map.activeTool === 'brush')
+    this.terrainBrushButton?.classList.toggle('is-active', this.map.activeTool === 'terrain')
+    this.eraserButton?.classList.toggle('is-active', this.map.activeTool === 'eraser')
+    this.drawAtlasSelection()
+    if (notify) this.notifyChange()
+  }
+
+  pushHistory(snapshot) {
+    this.history.push(snapshot)
+    if (this.history.length > 50) this.history.shift()
+    this.updateHistoryButtons()
+  }
+
+  undo() {
+    const previous = this.history.pop()
+    if (!previous) return
+    this.future.push(this.layerSnapshot())
+    this.restoreLayerSnapshot(previous)
+    this.renderTiles()
+    this.renderLayerList()
+    this.notifyChange()
+    this.updateHistoryButtons()
+  }
+
+  redo() {
+    const next = this.future.pop()
+    if (!next) return
+    this.history.push(this.layerSnapshot())
+    this.restoreLayerSnapshot(next)
+    this.renderTiles()
+    this.renderLayerList()
+    this.notifyChange()
+    this.updateHistoryButtons()
+  }
+
+  updateHistoryButtons() {
+    if (this.undoButton) this.undoButton.disabled = !this.history.length
+    if (this.redoButton) this.redoButton.disabled = !this.future.length
+  }
+
+  updateHeaderSummary() {
+    if (this.specLabel) {
+      this.specLabel.textContent = `瓦片规格 ${this.map.cellSize} × ${this.map.cellSize} px`
+    }
+  }
+
+  drawGrid() {
+    if (!this.app?.screen || !this.gridLayer || !this.backgroundLayer) return
+    const width = this.app.screen.width
+    const height = this.app.screen.height
+    const cellWidth = width / this.map.columns
+    const cellHeight = height / this.map.rows
+    this.backgroundLayer.clear()
+    this.backgroundLayer.rect(0, 0, width, height).fill({ color: 0x17202b, alpha: 1 })
+    this.gridLayer.clear()
+    const scaleX = Math.max(0.0001, Math.abs(this.outerScale || 1))
+    const scaleY = scaleX
+    const renderResolution = Math.max(1, Number(this.app.renderer?.resolution) || 1)
+    const renderPixel = 1 / renderResolution
+    const pixelAlignedStrip = (center, requestedSize) => {
+      const size = Math.max(renderPixel, Math.ceil(requestedSize * renderResolution) / renderResolution)
+      return {
+        start: Math.round((center - size / 2) * renderResolution) / renderResolution,
+        size,
+      }
+    }
+    // Filled strips are stable under fractional WebGL transforms. A nominal
+    // 1px stroke can fall fully between samples with antialiasing disabled.
+    // Clamp and snap each strip to physical renderer pixels before outer CSS scaling.
+    const minorWidth = Math.max(renderPixel, MINOR_GRID_SCREEN_WIDTH / scaleX)
+    const minorHeight = Math.max(renderPixel, MINOR_GRID_SCREEN_WIDTH / scaleY)
+    const showMinorGrid = Math.min(cellWidth, cellHeight) * scaleX >= MIN_MINOR_GRID_CELL_SCREEN_SIZE
+    if (showMinorGrid) {
+      for (let x = 1; x < this.map.columns; x += 1) {
+        if (x % GRID_BLOCK_SIZE === 0) continue
+        const strip = pixelAlignedStrip(x * cellWidth, minorWidth)
+        this.gridLayer.rect(strip.start, 0, strip.size, height)
+      }
+      for (let y = 1; y < this.map.rows; y += 1) {
+        if (y % GRID_BLOCK_SIZE === 0) continue
+        const strip = pixelAlignedStrip(y * cellHeight, minorHeight)
+        this.gridLayer.rect(0, strip.start, width, strip.size)
+      }
+      this.gridLayer.fill({ color: 0x718096, alpha: 0.32 })
+    }
+
+    const majorWidth = Math.max(renderPixel, MAJOR_GRID_SCREEN_WIDTH / scaleX)
+    const majorHeight = Math.max(renderPixel, MAJOR_GRID_SCREEN_WIDTH / scaleY)
+    for (let x = 0; x <= this.map.columns; x += GRID_BLOCK_SIZE) {
+      const strip = pixelAlignedStrip(x * cellWidth, majorWidth)
+      this.gridLayer.rect(strip.start, 0, strip.size, height)
+    }
+    if (this.map.columns % GRID_BLOCK_SIZE !== 0) {
+      const strip = pixelAlignedStrip(width, majorWidth)
+      this.gridLayer.rect(strip.start, 0, strip.size, height)
+    }
+    for (let y = 0; y <= this.map.rows; y += GRID_BLOCK_SIZE) {
+      const strip = pixelAlignedStrip(y * cellHeight, majorHeight)
+      this.gridLayer.rect(0, strip.start, width, strip.size)
+    }
+    if (this.map.rows % GRID_BLOCK_SIZE !== 0) {
+      const strip = pixelAlignedStrip(height, majorHeight)
+      this.gridLayer.rect(0, strip.start, width, strip.size)
+    }
+    this.gridLayer.fill({ color: 0xa0aec0, alpha: 0.56 })
+  }
+
+  setOuterScale(value) {
+    const next = Math.max(0.01, Math.abs(Number(value) || 1))
+    if (Math.abs(next - this.outerScale) < 0.0001) return
+    this.outerScale = next
+    this.drawGrid()
+  }
+
+  drawHover(point) {
+    if (!this.app?.screen || !this.hoverLayer) return
+    this.hoverLayer.clear()
+    if (!point) return
+    const color = this.map.activeTool === 'eraser' ? 0xff6b6b : 0x4fd1c5
+    const brushColumns = this.map.activeTool === 'brush' ? this.map.activeBrush?.columns || 1 : 1
+    const brushRows = this.map.activeTool === 'brush' ? this.map.activeBrush?.rows || 1 : 1
+    const cellWidth = this.app.screen.width / this.map.columns
+    const cellHeight = this.app.screen.height / this.map.rows
+    const width = Math.min(brushColumns, this.map.columns - point.x) * cellWidth
+    const height = Math.min(brushRows, this.map.rows - point.y) * cellHeight
+    this.hoverLayer
+      .rect(point.x * cellWidth, point.y * cellHeight, width, height)
+      .fill({ color, alpha: 0.22 })
+      .stroke({ color, alpha: 0.9, width: 2 / Math.max(0.2, this.outerScale || 1) })
+  }
+
+  scheduleRendererResize() {
+    if (this.resizeFrame || this.disposed) return
+    this.resizeFrame = requestAnimationFrame(() => {
+      this.resizeFrame = 0
+      this.resizeRendererToHost()
+    })
+  }
+
+  resizeRendererToHost() {
+    if (!this.app?.renderer || !this.stageHost) return
+    const width = Math.max(1, Math.round(this.stageHost.clientWidth))
+    const height = Math.max(1, Math.round(this.stageHost.clientHeight))
+    if (this.app.screen.width !== width || this.app.screen.height !== height) {
+      this.app.renderer.resize(width, height)
+    }
+    this.layoutMapToStage()
+  }
+
+  layoutMapToStage() {
+    if (!this.app) return
+    this.drawGrid()
+    this.resizeRenderedTiles()
+  }
+
+  resizeRenderedTiles() {
+    if (!this.app?.screen || !this.tileLayer) return
+    const cellWidth = this.app.screen.width / this.map.columns
+    const cellHeight = this.app.screen.height / this.map.rows
+    for (const mapLayer of this.tileLayer.children) {
+      for (const sourceLayer of mapLayer.children || []) {
+        const sourceWidth = Number(sourceLayer.tileMapSourceWidth)
+        const sourceHeight = Number(sourceLayer.tileMapSourceHeight)
+        if (sourceWidth > 0 && sourceHeight > 0) {
+          sourceLayer.scale.set(cellWidth / sourceWidth, cellHeight / sourceHeight)
+        }
+      }
+    }
+  }
+
+  lockNodeAspectRatio() {
+    const width = Math.max(TILE_MAP_NODE_MIN_WIDTH, this.container.offsetWidth || Number(this.item.width) || TILE_MAP_NODE_WIDTH)
+    const height = tileMapNodeHeightForWidth(this.map, width)
+    this.item.width = Math.round(width)
+    this.item.height = height
+    this.container.style.width = `${this.item.width}px`
+    this.container.style.height = `${height}px`
+    this.container.classList.add('is-manual-size')
+  }
+
+  async sourceBaseTexture(source) {
+    if (this.baseTextureCache.has(source.id)) return this.baseTextureCache.get(source.id)
+    const PIXI = globalThis.PIXI
+    const url = this.callbacks.resolveImageUrl(source.assetId)
+    const promise = PIXI.Assets.load(url).then((texture) => {
+      if (texture?.source) texture.source.scaleMode = 'nearest'
+      return texture
+    })
+    this.baseTextureCache.set(source.id, promise)
+    return promise
+  }
+
+  async renderTiles() {
+    if (!this.app?.screen || !this.tileLayer) return
+    const sequence = ++this.renderSequence
+    const layerEntries = this.map.layers.map((layer) => Object.entries(layer.cells))
+    const sourceMap = new Map(this.map.sources.map((source) => [source.id, source]))
+    const usedSourceIds = [...new Set(layerEntries.flatMap((entries) => entries.map(([, cell]) => cell.sourceId)))]
+    const prepared = new Map()
+    await Promise.all(usedSourceIds.map(async (sourceId) => {
+      const source = sourceMap.get(sourceId)
+      if (!source) return
+      try {
+        prepared.set(sourceId, await this.sourceBaseTexture(source))
+      } catch {
+        /* A missing source remains empty until the asset is restored. */
+      }
+    }))
+    if (this.disposed || sequence !== this.renderSequence || !this.tileLayer) return
+    for (const child of this.tileLayer.removeChildren()) child.destroy?.({ children: true })
+    const CompositeTilemap = globalThis.PIXI.tilemap.CompositeTilemap
+    const cellWidth = this.app.screen.width / this.map.columns
+    const cellHeight = this.app.screen.height / this.map.rows
+    for (const entries of layerEntries) {
+      const mapLayer = new globalThis.PIXI.Container()
+      const layerSourceIds = [...new Set(entries.map(([, cell]) => cell.sourceId))]
+      for (const sourceId of layerSourceIds) {
+        const source = sourceMap.get(sourceId)
+        const texture = prepared.get(sourceId)
+        if (!source || !texture) continue
+        const sourceLayer = new CompositeTilemap()
+        sourceLayer.roundPixels = true
+        sourceLayer.tileMapSourceWidth = source.tileWidth
+        sourceLayer.tileMapSourceHeight = source.tileHeight
+        sourceLayer.scale.set(cellWidth / source.tileWidth, cellHeight / source.tileHeight)
+        for (const [key, cell] of entries) {
+          if (cell.sourceId !== sourceId) continue
+          const [x, y] = key.split(',').map(Number)
+          const frame = sourceTileFrame(source, cell.tileIndex)
+          sourceLayer.tile(texture, x * source.tileWidth, y * source.tileHeight, {
+            u: frame.x,
+            v: frame.y,
+            tileWidth: source.tileWidth,
+            tileHeight: source.tileHeight,
+          })
+        }
+        mapLayer.addChild(sourceLayer)
+      }
+      this.tileLayer.addChild(mapLayer)
+    }
+  }
+
+  setAtlasZoom(value) {
+    this.atlasZoom = Math.min(MAX_ATLAS_ZOOM, Math.max(MIN_ATLAS_ZOOM, Number(value) || 1))
+    if (this.tilesetCanvas) this.tilesetCanvas.style.width = `${this.atlasZoom * 100}%`
+    if (this.tilesetSelectionCanvas) this.tilesetSelectionCanvas.style.width = `${this.atlasZoom * 100}%`
+    if (this.atlasZoomLabel) this.atlasZoomLabel.textContent = `${Math.round(this.atlasZoom * 100)}%`
+  }
+
+  bindTilesetSelection() {
+    const canvas = this.tilesetCanvas
+    if (!canvas) return
+    canvas.addEventListener('contextmenu', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      this.closeBrushContextMenu()
+      const cell = this.atlasCellAtEvent(event)
+      const bounds = this.atlasSelectionBounds()
+      if (!cell || !bounds) return
+      if (
+        cell.column < bounds.startColumn || cell.column > bounds.endColumn ||
+        cell.row < bounds.startRow || cell.row > bounds.endRow
+      ) return
+      this.openBrushContextMenu(event.clientX, event.clientY, bounds)
+    })
+    canvas.addEventListener('pointerdown', (event) => {
+      if (event.button !== 0) return
+      this.closeBrushContextMenu()
+      const cell = this.atlasCellAtEvent(event)
+      if (!cell?.tile) return
+      event.preventDefault()
+      event.stopPropagation()
+      this.activate()
+      if (this.map.activeTool === 'terrain') {
+        const brushImage = this.terrainBrushImageForTile(cell.tile)
+        const bounds = brushImage ? this.terrainBrushPaletteBounds(brushImage) : null
+        if (!brushImage || !bounds) {
+          this.reportError('自动地形画笔只能选择完整导入的 4×4 图集')
+          return
+        }
+        this.map.activeTerrainBrushId = brushImage.id
+        this.drawAtlasSelection()
+        this.notifyChange()
+        return
+      }
+      this.atlasDrag = {
+        pointerId: event.pointerId,
+        startColumn: cell.column,
+        startRow: cell.row,
+        endColumn: cell.column,
+        endRow: cell.row,
+      }
+      canvas.setPointerCapture?.(event.pointerId)
+      this.drawAtlasSelection()
+    })
+    canvas.addEventListener('pointermove', (event) => {
+      if (!this.atlasDrag || this.atlasDrag.pointerId !== event.pointerId) return
+      const cell = this.atlasCellAtEvent(event)
+      if (!cell) return
+      this.atlasDrag.endColumn = cell.column
+      this.atlasDrag.endRow = cell.row
+      this.drawAtlasSelection()
+    })
+    const finish = (event, commit) => {
+      if (!this.atlasDrag || this.atlasDrag.pointerId !== event.pointerId) return
+      const drag = this.atlasDrag
+      this.atlasDrag = null
+      if (commit) {
+        const startColumn = Math.min(drag.startColumn, drag.endColumn)
+        const startRow = Math.min(drag.startRow, drag.endRow)
+        const endColumn = Math.max(drag.startColumn, drag.endColumn)
+        const endRow = Math.max(drag.startRow, drag.endRow)
+        const columns = endColumn - startColumn + 1
+        const rows = endRow - startRow + 1
+        const tiles = []
+        for (let row = startRow; row <= endRow; row += 1) {
+          for (let column = startColumn; column <= endColumn; column += 1) {
+            const tile = this.atlasCells[row * ATLAS_COLUMNS + column]
+            tiles.push(tile ? { sourceId: tile.sourceId, tileIndex: tile.tileIndex } : null)
+          }
+        }
+        const firstTile = tiles.find(Boolean)
+        if (firstTile) {
+          this.map.activeBrush = {
+            sourceId: firstTile.sourceId,
+            tileIndex: firstTile.tileIndex,
+            columns,
+            rows,
+            atlasIndex: startRow * ATLAS_COLUMNS + startColumn,
+            tiles,
+          }
+          this.setTool('brush', false)
+          if (this.selectedStatus) {
+            this.selectedStatus.textContent = `已选择 ${this.map.activeBrush.columns}×${this.map.activeBrush.rows} 画笔`
+          }
+          this.notifyChange()
+        }
+      }
+      this.drawAtlasSelection()
+    }
+    canvas.addEventListener('pointerup', (event) => finish(event, true))
+    canvas.addEventListener('pointercancel', (event) => finish(event, false))
+  }
+
+  atlasCellAtEvent(event) {
+    const canvas = this.tilesetCanvas
+    if (!canvas || !this.atlasCells.length) return null
+    const rect = canvas.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0) return null
+    const column = Math.floor((event.clientX - rect.left) * canvas.width / rect.width / ATLAS_CELL_SIZE)
+    const row = Math.floor((event.clientY - rect.top) * canvas.height / rect.height / ATLAS_CELL_SIZE)
+    const atlasRows = canvas.height / ATLAS_CELL_SIZE
+    if (column < 0 || column >= ATLAS_COLUMNS || row < 0 || row >= atlasRows) return null
+    return {
+      tile: this.atlasCells[row * ATLAS_COLUMNS + column] || null,
+      column,
+      row,
+    }
+  }
+
+  atlasSelectionBounds(brush = this.atlasDrag || this.map.activeBrush) {
+    if (!this.atlasDrag && this.map.activeTool === 'terrain') {
+      return this.terrainBrushPaletteBounds(this.activeTerrainBrushImage())
+    }
+    if (!brush) return null
+    if (this.atlasDrag && brush === this.atlasDrag) {
+      return {
+        startColumn: Math.min(brush.startColumn, brush.endColumn),
+        startRow: Math.min(brush.startRow, brush.endRow),
+        endColumn: Math.max(brush.startColumn, brush.endColumn),
+        endRow: Math.max(brush.startRow, brush.endRow),
+      }
+    }
+    const savedAtlasIndex = Number(brush.atlasIndex)
+    const fallbackAtlasIndex = this.atlasCells.findIndex((tile) => (
+      tile?.sourceId === brush.sourceId && tile.tileIndex === brush.tileIndex
+    ))
+    const atlasIndex = brush.atlasIndex !== null && brush.atlasIndex !== undefined &&
+      Number.isInteger(savedAtlasIndex) && savedAtlasIndex >= 0
+      ? savedAtlasIndex
+      : fallbackAtlasIndex
+    if (atlasIndex < 0) return null
+    const startColumn = atlasIndex % ATLAS_COLUMNS
+    const startRow = Math.floor(atlasIndex / ATLAS_COLUMNS)
+    return {
+      startColumn,
+      startRow,
+      endColumn: startColumn + (brush.columns || 1) - 1,
+      endRow: startRow + (brush.rows || 1) - 1,
+    }
+  }
+
+  terrainBrushPaletteBounds(brushImage) {
+    if (!brushImage || brushImage.columns !== AUTO_TERRAIN_ATLAS_SIDE || brushImage.rows !== AUTO_TERRAIN_ATLAS_SIDE) {
+      return null
+    }
+    const sourceIds = new Set(brushImage.tileSourceIds.slice(0, AUTO_TERRAIN_ATLAS_SIDE ** 2))
+    const positions = []
+    for (let index = 0; index < this.atlasCells.length; index += 1) {
+      if (!sourceIds.has(this.atlasCells[index]?.sourceId)) continue
+      positions.push({ column: index % ATLAS_COLUMNS, row: Math.floor(index / ATLAS_COLUMNS) })
+    }
+    if (positions.length !== AUTO_TERRAIN_ATLAS_SIDE ** 2) return null
+    const startColumn = Math.min(...positions.map((position) => position.column))
+    const startRow = Math.min(...positions.map((position) => position.row))
+    const endColumn = Math.max(...positions.map((position) => position.column))
+    const endRow = Math.max(...positions.map((position) => position.row))
+    if (
+      endColumn - startColumn + 1 !== AUTO_TERRAIN_ATLAS_SIDE ||
+      endRow - startRow + 1 !== AUTO_TERRAIN_ATLAS_SIDE
+    ) return null
+    return { startColumn, startRow, endColumn, endRow }
+  }
+
+  drawAtlasSelection() {
+    const canvas = this.tilesetSelectionCanvas
+    if (!canvas) return
+    const context = canvas.getContext('2d')
+    context.clearRect(0, 0, canvas.width, canvas.height)
+    const bounds = this.atlasSelectionBounds()
+    if (!bounds) return
+    const atlasLineScale = ATLAS_CELL_SIZE / 32
+    const x = bounds.startColumn * ATLAS_CELL_SIZE
+    const y = bounds.startRow * ATLAS_CELL_SIZE
+    const width = (bounds.endColumn - bounds.startColumn + 1) * ATLAS_CELL_SIZE
+    const height = (bounds.endRow - bounds.startRow + 1) * ATLAS_CELL_SIZE
+    const autoTerrain = this.map.activeTool === 'terrain' && !this.atlasDrag
+    context.fillStyle = autoTerrain ? 'rgba(61, 214, 198, 0.18)' : 'rgba(255, 55, 55, 0.18)'
+    context.strokeStyle = autoTerrain ? '#3dd6c6' : '#ff3535'
+    context.lineWidth = 3 * atlasLineScale
+    context.fillRect(x, y, width, height)
+    context.strokeRect(
+      x + 1.5 * atlasLineScale,
+      y + 1.5 * atlasLineScale,
+      width - 3 * atlasLineScale,
+      height - 3 * atlasLineScale,
+    )
+  }
+
+  closeBrushContextMenu() {
+    if (!this.brushContextMenu) return
+    document.removeEventListener('pointerdown', this.brushContextMenu._outsideHandler, true)
+    this.brushContextMenu.remove()
+    this.brushContextMenu = null
+  }
+
+  openBrushContextMenu(clientX, clientY, bounds) {
+    this.closeBrushContextMenu()
+    const menu = makeElement('div', 'tile-map-brush-context-menu')
+    const remove = makeButton('删除画笔')
+    menu.appendChild(remove)
+    document.body.appendChild(menu)
+    const rect = menu.getBoundingClientRect()
+    menu.style.left = `${Math.max(8, Math.min(clientX, window.innerWidth - rect.width - 8))}px`
+    menu.style.top = `${Math.max(8, Math.min(clientY, window.innerHeight - rect.height - 8))}px`
+    menu._outsideHandler = (event) => {
+      if (!menu.contains(event.target)) this.closeBrushContextMenu()
+    }
+    document.addEventListener('pointerdown', menu._outsideHandler, true)
+    remove.addEventListener('click', async () => {
+      this.closeBrushContextMenu()
+      try {
+        await this.deleteBrushesInBounds(bounds)
+      } catch (error) {
+        this.reportError(error)
+      }
+    })
+    this.brushContextMenu = menu
+  }
+
+  async deleteBrushesInBounds(bounds) {
+    const deletedSourceIds = new Set()
+    const nextPaletteCells = { ...this.map.palette.cells }
+    for (let row = bounds.startRow; row <= bounds.endRow; row += 1) {
+      for (let column = bounds.startColumn; column <= bounds.endColumn; column += 1) {
+        const key = `${column},${row}`
+        const tile = nextPaletteCells[key]
+        if (!tile) continue
+        deletedSourceIds.add(tile.sourceId)
+        delete nextPaletteCells[key]
+      }
+    }
+    if (!deletedSourceIds.size) return
+
+    const visibleSourceIds = new Set(Object.values(nextPaletteCells).map((tile) => tile.sourceId))
+    const emptiedBrushImages = this.map.brushImages.filter((brushImage) => (
+      !brushImage.tileSourceIds.some((sourceId) => visibleSourceIds.has(sourceId))
+    ))
+    const invalidatedTerrainBrushIds = new Set(this.map.brushImages
+      .filter((brushImage) => (
+        brushImage.columns === AUTO_TERRAIN_ATLAS_SIDE &&
+        brushImage.rows === AUTO_TERRAIN_ATLAS_SIDE &&
+        brushImage.tileSourceIds.some((sourceId) => deletedSourceIds.has(sourceId))
+      ))
+      .map((brushImage) => brushImage.id))
+    const deletedSources = this.map.sources.filter((source) => deletedSourceIds.has(source.id))
+    await this.callbacks.deleteTileset?.({
+      map_id: this.item.id,
+      tile_ids: deletedSources.map((source) => source.assetId),
+      tileset_ids: emptiedBrushImages.map((brushImage) => brushImage.assetId),
+    })
+
+    this.map.layers = this.map.layers.map((layer) => ({
+      ...layer,
+      cells: Object.fromEntries(Object.entries(layer.cells).filter(([, cell]) => (
+        !deletedSourceIds.has(cell.sourceId)
+      ))),
+    }))
+    this.map.sources = this.map.sources.flatMap((source) => {
+      if (!deletedSourceIds.has(source.id)) return [source]
+      this.baseTextureCache.delete(source.id)
+      this.imageCache.delete(source.id)
+      return []
+    })
+    const emptiedIds = new Set(emptiedBrushImages.map((brushImage) => brushImage.id))
+    this.map.brushImages = this.map.brushImages.filter((brushImage) => !emptiedIds.has(brushImage.id))
+    this.map.palette = { ...this.map.palette, cells: nextPaletteCells }
+    this.map.activeBrush = null
+    if (invalidatedTerrainBrushIds.has(this.map.activeTerrainBrushId)) this.map.activeTerrainBrushId = null
+    this.atlasDrag = null
+    this.history = []
+    this.future = []
+    await this.renderPalette()
+    await this.renderTiles()
+    this.renderLayerList()
+    this.updateHistoryButtons()
+    this.notifyChange()
+  }
+
+  async renderPalette() {
+    const canvas = this.tilesetCanvas
+    if (!this.palette || !canvas) return
+    const sequence = ++this.paletteRenderSequence
+    if (this.paletteEmpty) this.paletteEmpty.hidden = false
+    this.map.palette = normalizePalette(
+      this.map.palette,
+      this.map.sources,
+      this.map.brushImages,
+      this.map.cellSize,
+    )
+    const atlasRows = this.map.palette.rows
+    this.atlasCells = Array.from({ length: atlasRows * ATLAS_COLUMNS }, (_, index) => {
+      const column = index % ATLAS_COLUMNS
+      const row = Math.floor(index / ATLAS_COLUMNS)
+      return this.map.palette.cells[`${column},${row}`] || null
+    })
+    canvas.width = ATLAS_COLUMNS * ATLAS_CELL_SIZE
+    canvas.height = atlasRows * ATLAS_CELL_SIZE
+    if (this.tilesetSelectionCanvas) {
+      this.tilesetSelectionCanvas.width = canvas.width
+      this.tilesetSelectionCanvas.height = canvas.height
+    }
+    this.setAtlasZoom(this.atlasZoom)
+    const context = canvas.getContext('2d')
+    context.imageSmoothingEnabled = false
+    context.clearRect(0, 0, canvas.width, canvas.height)
+
+    const sourceMap = new Map(this.map.sources.map((source) => [source.id, source]))
+    const loadedImages = new Map()
+    await Promise.all(this.map.sources.map(async (source) => {
+      try {
+        loadedImages.set(source.id, await this.htmlImageForSource(source))
+      } catch {
+        /* Missing source images leave empty atlas cells. */
+      }
+    }))
+    if (this.disposed || sequence !== this.paletteRenderSequence) return
+    for (let atlasIndex = 0; atlasIndex < this.atlasCells.length; atlasIndex += 1) {
+      const tile = this.atlasCells[atlasIndex]
+      if (!tile) continue
+      const source = sourceMap.get(tile.sourceId)
+      const image = loadedImages.get(tile.sourceId)
+      if (!source || !image) continue
+      const frame = sourceTileFrame(source, tile.tileIndex)
+      context.drawImage(
+        image,
+        frame.x,
+        frame.y,
+        frame.width,
+        frame.height,
+        (atlasIndex % ATLAS_COLUMNS) * ATLAS_CELL_SIZE,
+        Math.floor(atlasIndex / ATLAS_COLUMNS) * ATLAS_CELL_SIZE,
+        ATLAS_CELL_SIZE,
+        ATLAS_CELL_SIZE,
+      )
+    }
+
+    const atlasLineScale = ATLAS_CELL_SIZE / 32
+    const atlasLineOffset = atlasLineScale / 2
+    context.strokeStyle = 'rgba(255,255,255,0.28)'
+    context.lineWidth = atlasLineScale
+    for (let column = 0; column <= ATLAS_COLUMNS; column += 1) {
+      context.beginPath()
+      context.moveTo(column * ATLAS_CELL_SIZE + atlasLineOffset, 0)
+      context.lineTo(column * ATLAS_CELL_SIZE + atlasLineOffset, atlasRows * ATLAS_CELL_SIZE)
+      context.stroke()
+    }
+    for (let row = 0; row <= atlasRows; row += 1) {
+      context.beginPath()
+      context.moveTo(0, row * ATLAS_CELL_SIZE + atlasLineOffset)
+      context.lineTo(ATLAS_COLUMNS * ATLAS_CELL_SIZE, row * ATLAS_CELL_SIZE + atlasLineOffset)
+      context.stroke()
+    }
+
+    this.drawAtlasSelection()
+  }
+
+  async openSliceDialog(reference) {
+    const url = reference.url || this.callbacks.resolveImageUrl(reference.id)
+    const image = await loadHtmlImage(url)
+    if (this.disposed) return
+      const existing = this.map.brushImages.find((brushImage) => (
+        brushImage.sourceAssetId === reference.id || brushImage.assetId === reference.id
+    ))
+    const guessed = suggestedSplit(image.naturalWidth, image.naturalHeight)
+    const initial = existing || {
+      columns: guessed.columns,
+      rows: guessed.rows,
+      marginX: 0,
+      marginY: 0,
+      spacingX: 0,
+      spacingY: 0,
+    }
+    const overlay = makeElement('div', 'tile-map-slice-overlay')
+    const dialog = makeElement('form', 'tile-map-slice-dialog')
+    const head = makeElement('div', 'tile-map-slice-head')
+    head.append(
+      makeElement('div', null, existing ? '重新切分画笔图片' : '切分画笔图片'),
+      makeElement('small', null, `${image.naturalWidth} × ${image.naturalHeight} px`),
+    )
+    const preview = document.createElement('canvas')
+    preview.className = 'tile-map-slice-preview'
+    const fields = makeElement('div', 'tile-map-slice-fields')
+      const columns = this.numberField('列数', initial.columns, 1, 8)
+      const rows = this.numberField('行数', initial.rows, 1, 8)
+    const marginX = this.numberField('横向边距', initial.marginX, 0, image.naturalWidth - 1, 'px')
+    const marginY = this.numberField('纵向边距', initial.marginY, 0, image.naturalHeight - 1, 'px')
+    const spacingX = this.numberField('横向间隔', initial.spacingX, 0, image.naturalWidth - 1, 'px')
+    const spacingY = this.numberField('纵向间隔', initial.spacingY, 0, image.naturalHeight - 1, 'px')
+    fields.append(columns.label, rows.label, marginX.label, marginY.label, spacingX.label, spacingY.label)
+    const validation = makeElement('div', 'tile-map-slice-validation')
+    const actions = makeElement('div', 'tile-map-slice-actions')
+    const cancel = makeButton('取消')
+    const confirm = makeButton(existing ? '更新画笔' : '加入画笔', 'tile-map-button tile-map-button-primary')
+    confirm.type = 'submit'
+    actions.append(cancel, confirm)
+    dialog.append(head, preview, fields, validation, actions)
+    overlay.appendChild(dialog)
+    this.inspectorRoot?.appendChild(overlay)
+
+    const readConfig = () => {
+        const cols = clampInteger(columns.input.value, 1, 8, 1)
+        const rowCount = clampInteger(rows.input.value, 1, 8, 1)
+      const mx = clampInteger(marginX.input.value, 0, image.naturalWidth - 1, 0)
+      const my = clampInteger(marginY.input.value, 0, image.naturalHeight - 1, 0)
+      const sx = clampInteger(spacingX.input.value, 0, image.naturalWidth - 1, 0)
+      const sy = clampInteger(spacingY.input.value, 0, image.naturalHeight - 1, 0)
+      const availableWidth = image.naturalWidth - mx * 2 - sx * (cols - 1)
+      const availableHeight = image.naturalHeight - my * 2 - sy * (rowCount - 1)
+      const tileWidth = availableWidth / cols
+      const tileHeight = availableHeight / rowCount
+        const valid = tileWidth >= 1 && tileHeight >= 1 && Number.isInteger(tileWidth) && Number.isInteger(tileHeight)
+      return { columns: cols, rows: rowCount, marginX: mx, marginY: my, spacingX: sx, spacingY: sy, tileWidth, tileHeight, valid }
+    }
+
+    const drawPreview = () => {
+      const config = readConfig()
+      const maxWidth = 430
+      const maxHeight = 210
+      const scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight, 1)
+      preview.width = Math.max(1, Math.round(image.naturalWidth * scale))
+      preview.height = Math.max(1, Math.round(image.naturalHeight * scale))
+      const context = preview.getContext('2d')
+      context.clearRect(0, 0, preview.width, preview.height)
+      context.drawImage(image, 0, 0, preview.width, preview.height)
+      if (config.valid) {
+        context.strokeStyle = '#4fd1c5'
+        context.lineWidth = 1
+        for (let row = 0; row < config.rows; row += 1) {
+          for (let column = 0; column < config.columns; column += 1) {
+            context.strokeRect(
+              (config.marginX + column * (config.tileWidth + config.spacingX)) * scale,
+              (config.marginY + row * (config.tileHeight + config.spacingY)) * scale,
+              config.tileWidth * scale,
+              config.tileHeight * scale,
+            )
+          }
+        }
+        validation.textContent = `将切成 ${config.columns * config.rows} 块，每块 ${config.tileWidth} × ${config.tileHeight} px`
+      } else {
+          validation.textContent = '当前边距或间隔无法整除图片，请调整参数'
+      }
+      validation.classList.toggle('is-error', !config.valid)
+      confirm.disabled = !config.valid
+    }
+    for (const input of dialog.querySelectorAll('input')) input.addEventListener('input', drawPreview)
+    cancel.addEventListener('click', () => overlay.remove())
+    overlay.addEventListener('pointerdown', (event) => event.stopPropagation())
+    dialog.addEventListener('submit', async (event) => {
+      event.preventDefault()
+      const config = readConfig()
+      if (!config.valid) return
+      confirm.disabled = true
+      confirm.textContent = '处理中…'
+      try {
+        const result = await this.callbacks.processTileset?.({
+          map_id: this.item.id,
+          source_id: reference.id,
+          columns: config.columns,
+          rows: config.rows,
+          margin_x: config.marginX,
+          margin_y: config.marginY,
+          spacing_x: config.spacingX,
+          spacing_y: config.spacingY,
+          tile_size: this.map.cellSize,
+        })
+        if (!result?.tileset?.id || !Array.isArray(result.tiles) || !result.tiles.length) {
+          throw new Error('图集没有产生可用瓦片')
+        }
+        const previousSourceIds = new Set(existing?.tileSourceIds || [])
+        const nextSources = result.tiles.map((tile, index) => normalizeSource({
+          id: `tile_source_${String(tile.id).replace(/[^a-zA-Z0-9_-]/g, '_')}`,
+          assetId: tile.id,
+          name: `${reference.name || '地砖图片'} ${index + 1}`,
+          naturalWidth: this.map.cellSize,
+          naturalHeight: this.map.cellSize,
+          columns: 1,
+          rows: 1,
+          marginX: 0,
+          marginY: 0,
+          spacingX: 0,
+          spacingY: 0,
+          tileWidth: this.map.cellSize,
+          tileHeight: this.map.cellSize,
+        })).filter(Boolean)
+        const nextSourceIds = nextSources.map((source) => source.id)
+        this.map.sources = [
+          ...this.map.sources.filter((source) => !previousSourceIds.has(source.id)),
+          ...nextSources,
+        ]
+        if (existing) {
+          const brushImageIndex = this.map.brushImages.findIndex((candidate) => candidate.id === existing.id)
+          this.map.brushImages[brushImageIndex] = {
+            ...existing,
+            type: 'map_brush_image',
+            assetId: result.tileset.id,
+            sourceAssetId: reference.id,
+            name: reference.name || '地砖图集',
+            ...config,
+            tileSourceIds: nextSourceIds,
+          }
+          for (const layer of this.map.layers) {
+            for (const [key, cell] of Object.entries(layer.cells)) {
+              if (!previousSourceIds.has(cell.sourceId)) continue
+              const oldIndex = existing.tileSourceIds.indexOf(cell.sourceId)
+              if (oldIndex < 0 || !nextSources[oldIndex]) delete layer.cells[key]
+              else layer.cells[key] = { sourceId: nextSources[oldIndex].id, tileIndex: 0 }
+            }
+          }
+        } else {
+          this.map.brushImages.push({
+            type: 'map_brush_image',
+            id: `tileset_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`,
+            assetId: result.tileset.id,
+            sourceAssetId: reference.id,
+            name: reference.name || '地砖图集',
+            ...config,
+            tileSourceIds: nextSourceIds,
+          })
+        }
+        this.map.palette = createPaletteFromSources(
+          this.map.sources,
+          this.map.brushImages,
+          this.map.cellSize,
+        )
+        const source = nextSources[0]
+        this.map.activeBrush = source ? { sourceId: source.id, tileIndex: 0 } : null
+        this.map.activeTool = 'brush'
+        for (const sourceId of previousSourceIds) {
+          this.baseTextureCache.delete(sourceId)
+          this.imageCache.delete(sourceId)
+        }
+        overlay.remove()
+        this.setTool('brush', false)
+        this.renderPalette()
+        this.renderLayerList()
+        this.renderTiles()
+        this.notifyChange()
+      } catch (error) {
+        this.reportError(error)
+        confirm.disabled = false
+        confirm.textContent = existing ? '更新画笔' : '加入画笔'
+      }
+    })
+    drawPreview()
+  }
+
+  async htmlImageForSource(source) {
+    if (this.imageCache.has(source.id)) return this.imageCache.get(source.id)
+    const promise = loadHtmlImage(this.callbacks.resolveImageUrl(source.assetId))
+    this.imageCache.set(source.id, promise)
+    return promise
+  }
+
+  async exportPng() {
+    const width = this.map.columns * this.map.cellSize
+    const height = this.map.rows * this.map.cellSize
+    if (width > MAX_EXPORT_SIDE || height > MAX_EXPORT_SIDE) {
+      throw new Error(`PNG 尺寸不能超过 ${MAX_EXPORT_SIDE} × ${MAX_EXPORT_SIDE} px`)
+    }
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+    const context = canvas.getContext('2d')
+    context.imageSmoothingEnabled = false
+    const sourceMap = new Map(this.map.sources.map((source) => [source.id, source]))
+    const loaded = new Map()
+    await Promise.all(this.map.sources.map(async (source) => {
+      loaded.set(source.id, await this.htmlImageForSource(source))
+    }))
+    for (const layer of this.map.layers) {
+      for (const [key, cell] of Object.entries(layer.cells)) {
+        const source = sourceMap.get(cell.sourceId)
+        const image = loaded.get(cell.sourceId)
+        if (!source || !image) continue
+        const [x, y] = key.split(',').map(Number)
+        const frame = sourceTileFrame(source, cell.tileIndex)
+        context.drawImage(
+          image,
+          frame.x,
+          frame.y,
+          frame.width,
+          frame.height,
+          x * this.map.cellSize,
+          y * this.map.cellSize,
+          this.map.cellSize,
+          this.map.cellSize,
+        )
+      }
+    }
+    const blob = await new Promise((resolve, reject) => {
+      canvas.toBlob((value) => value ? resolve(value) : reject(new Error('PNG 导出失败')), 'image/png')
+    })
+    downloadBlob(blob, `${safeFileStem(this.item.name)}.png`)
+  }
+
+  destroy() {
+    this.disposed = true
+    this.closeBrushContextMenu()
+    this.renderSequence += 1
+    this.layerRenderSequence += 1
+    this.resizeObserver?.disconnect()
+    if (this.resizeFrame) cancelAnimationFrame(this.resizeFrame)
+    this.resizeFrame = 0
+    this.inspectorRoot?.remove()
+    this.inspectorRoot = null
+    if (this.app) {
+      try {
+        this.app.destroy(true, { children: true, texture: false, textureSource: false })
+      } catch {
+        /* Pixi may already be disposed during a canvas re-render. */
+      }
+    }
+    this.app = null
+  }
+}
+
+export function mountTileMapNode(container, item, callbacks) {
+  const previous = mountedViews.get(item.id)
+  previous?.destroy()
+  const view = new TileMapView(container, item, callbacks)
+  mountedViews.set(item.id, view)
+  view.build()
+  return view
+}
+
+export function mountTileMapInspector(container, item) {
+  const view = mountedViews.get(item.id)
+  if (!view) return false
+  view.mountInspector(container)
+  return true
+}
+
+export function refreshTileMapGridScale(outerScale) {
+  for (const view of mountedViews.values()) view.setOuterScale(outerScale)
+}
+
+export function resizeTileMapView(id) {
+  mountedViews.get(id)?.scheduleRendererResize()
+}
+
+export async function exportTileMapPng(id) {
+  const view = mountedViews.get(id)
+  if (!view) throw new Error('地图编辑器尚未加载')
+  await view.exportPng()
+  if (view.selectedStatus) view.selectedStatus.textContent = 'PNG 已导出'
+}
+
+export function disposeTileMapViews() {
+  for (const view of mountedViews.values()) view.destroy()
+  mountedViews.clear()
+}
+
+export function disposeTileMapView(id) {
+  const view = mountedViews.get(id)
+  if (!view) return
+  view.destroy()
+  mountedViews.delete(id)
+}