evomeme 0.1.9 → 0.1.10-beta.13

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

@@ -0,0 +1,2520 @@
+import { errorT } from '../../language/index.js'
+import { t } from '../../language/index.js'
+import { installFeatureStyles } from '../../ui/controls.js'
+/**
+ * 地图编辑视图：负责 PixiJS/@pixi/tilemap 渲染、画笔交互和挂载实例。
+ * 可测试的数据与图层逻辑位于 model.js，对外导出入口位于 export.js。
+ */
+
+import {
+  AUTO_TERRAIN_ATLAS_SIDE,
+  ATLAS_CELL_SIZE,
+  ATLAS_COLUMNS,
+  GRID_BLOCK_SIZE,
+  MAJOR_GRID_SCREEN_WIDTH,
+  MAX_ATLAS_ZOOM,
+  MAX_EXPORT_SIDE,
+  MAX_GRID_SIDE,
+  MIN_ATLAS_ZOOM,
+  MIN_MINOR_GRID_CELL_SCREEN_SIZE,
+  MINOR_GRID_SCREEN_WIDTH,
+  TILE_DRAG_TYPE,
+  TILE_MAP_NODE_MIN_WIDTH,
+  TILE_MAP_NODE_WIDTH,
+  autoTerrainMaskAt,
+  autoTerrainTileIndex,
+  clampInteger,
+  createLayerId,
+  createPaletteFromSources,
+  normalizeCells,
+  normalizePalette,
+  normalizeSource,
+  normalizeTileMapData,
+  reorderLayersByVisualDrop,
+  safeName,
+  tileMapNodeHeightForWidth,
+} from '../../map/model.js'
+
+export {
+  TILE_MAP_FOOTER_HEIGHT,
+  TILE_MAP_NODE_HEIGHT,
+  TILE_MAP_NODE_MIN_HEIGHT,
+  createPaletteFromSources,
+  createTileMapItem,
+  isTileMapItem,
+  normalizeTileMapData,
+  normalizeTileMapItem,
+  reorderLayersByVisualDrop,
+  serializeTileMapItem,
+  tileMapContentAspectRatio,
+  tileMapNodeHeightForWidth,
+  tileMapSummary,
+  autoTerrainMaskAt,
+  autoTerrainTileIndex,
+} from '../../map/model.js'
+
+const mountedViews = new Map()
+let pixiRuntimePromise = null
+
+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(`${t('map.tileMapEditor.text001')}${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(`${t('map.tileMapEditor.text001')}${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(errorT('map.tileMapEditor.text002'))
+      }
+    })().catch((error) => {
+      pixiRuntimePromise = null
+      throw error
+    })
+  }
+  await pixiRuntimePromise
+}
+
+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 containedTileSetLayout(sourceWidth, sourceHeight, columns, rows, tileSize) {
+  const canvasWidth = columns * tileSize
+  const canvasHeight = rows * tileSize
+  const scale = Math.min(canvasWidth / sourceWidth, canvasHeight / sourceHeight)
+  const width = Math.max(1, Math.min(canvasWidth, Math.round(sourceWidth * scale)))
+  const height = Math.max(1, Math.min(canvasHeight, Math.round(sourceHeight * scale)))
+  return {
+    width,
+    height,
+    offsetX: Math.floor((canvasWidth - width) / 2),
+    offsetY: Math.floor((canvasHeight - height) / 2),
+    canvasWidth,
+    canvasHeight,
+  }
+}
+
+function drawTransparencyGrid(context, width, height) {
+  const size = 12
+  context.fillStyle = '#f0f2f5'
+  context.fillRect(0, 0, width, height)
+  context.fillStyle = '#cfd4da'
+  for (let y = 0; y < height; y += size) {
+    for (let x = 0; x < width; x += size) {
+      if ((Math.floor(x / size) + Math.floor(y / size)) % 2 === 0) continue
+      context.fillRect(x, y, size, size)
+    }
+  }
+}
+
+function loadHtmlImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.crossOrigin = 'anonymous'
+    image.decoding = 'async'
+    image.onload = () => resolve(image)
+    image.onerror = () => reject(new Error(errorT('map.tileMapEditor.text003')))
+    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 || t('map.tileMapEditor.text004'))
+    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 || t('map.tileMapEditor.text005'),
+    )
+    this.specLabel = makeElement(
+      'span',
+      'tile-map-footer-spec',
+      `${t('map.tileMapEditor.text006')}${this.map.cellSize}${t('map.tileMapEditor.text006.part1')}${this.map.cellSize}${t('map.tileMapEditor.text006.part2')}`,
+    )
+    dragHandle.append(mapName, this.specLabel)
+    dragHandle.title = t('map.tileMapEditor.text007')
+    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, t('map.tileMapEditor.text008')))
+    const addLayerButton = makeButton(t('map.tileMapEditor.text009'))
+    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(
+      t('map.tileMapEditor.text010'),
+      '<path d="m14.7 2.3 7 7-11 11H3v-7Z"/><path d="m13 4 7 7"/>',
+    )
+    this.terrainBrushButton = iconButton(
+      t('map.tileMapEditor.text011'),
+      '<path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4z"/><path d="m15 18 2 2 4-5"/>',
+    )
+    this.eraserButton = iconButton(
+      t('map.tileMapEditor.text012'),
+      '<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(
+      t('map.tileMapEditor.text013'),
+      '<path d="M9 7 4 12l5 5"/><path d="M20 17a7 7 0 0 0-7-7H4"/>',
+    )
+    this.redoButton = iconButton(
+      t('map.tileMapEditor.text014'),
+      '<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(
+      t('map.tileMapEditor.text015'),
+      this.map.columns,
+      1,
+      MAX_GRID_SIDE,
+    )
+    const rowsInput = this.numberField(
+      t('map.tileMapEditor.text016'),
+      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', t('map.tileMapEditor.text017'))
+    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(t('map.tileMapEditor.text018'))
+        return
+      }
+      try {
+        const reference = JSON.parse(raw)
+        if (!reference?.id) throw new Error(errorT('map.tileMapEditor.text019'))
+        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(
+          `${t('map.tileMapEditor.text020')}${MAX_EXPORT_SIDE}${t('map.tileMapEditor.text020.part1')}${MAX_EXPORT_SIDE}${t('map.tileMapEditor.text020.part2')}`,
+        )
+        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: `${t('map.tileMapEditor.text021')}${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(
+        `${t('map.tileMapEditor.text022')}${layer.name}${t('map.tileMapEditor.text022.part1')}`,
+      )
+    )
+      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 = `${t('map.tileMapEditor.text023')}${layer.name}${t('map.tileMapEditor.text023.part1')}`
+      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', t('map.tileMapEditor.text024'))
+      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
+        ? t('map.tileMapEditor.text025')
+        : `${t('map.tileMapEditor.text026')}${layer.name}${t('map.tileMapEditor.text026.part1')}`
+      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(t('map.tileMapEditor.text027'))
+      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 = t('map.tileMapEditor.text028')
+        return
+      }
+      this.paintAutoTerrainAt(layer, brushImage, point.x, point.y)
+    } else {
+      if (!this.map.activeBrush) {
+        if (this.selectedStatus) this.selectedStatus.textContent = t('map.tileMapEditor.text029')
+        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 = `${t('map.tileMapEditor.text006')}${this.map.cellSize}${t('map.tileMapEditor.text006.part1')}${this.map.cellSize}${t('map.tileMapEditor.text006.part2')}`
+    }
+  }
+
+  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(t('map.tileMapEditor.text030'))
+          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 = `${t('map.tileMapEditor.text031')}${this.map.activeBrush.columns}${t('map.tileMapEditor.text031.part1')}${this.map.activeBrush.rows}${t('map.tileMapEditor.text031.part2')}`
+          }
+          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(t('map.tileMapEditor.text032'))
+    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 ? t('map.tileMapEditor.text033') : t('map.tileMapEditor.text034'),
+      ),
+      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(t('map.tileMapEditor.text035'), initial.columns, 1, 8)
+    const rows = this.numberField(t('map.tileMapEditor.text036'), initial.rows, 1, 8)
+    const marginX = this.numberField(
+      t('map.tileMapEditor.text037'),
+      initial.marginX,
+      0,
+      image.naturalWidth - 1,
+      'px',
+    )
+    const marginY = this.numberField(
+      t('map.tileMapEditor.text038'),
+      initial.marginY,
+      0,
+      image.naturalHeight - 1,
+      'px',
+    )
+    const spacingX = this.numberField(
+      t('map.tileMapEditor.text039'),
+      initial.spacingX,
+      0,
+      image.naturalWidth - 1,
+      'px',
+    )
+    const spacingY = this.numberField(
+      t('map.tileMapEditor.text040'),
+      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(t('map.tileMapEditor.text041'))
+    const confirm = makeButton(
+      existing ? t('map.tileMapEditor.text042') : t('map.tileMapEditor.text043'),
+      '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)
+      const fit = valid
+        ? containedTileSetLayout(
+            availableWidth,
+            availableHeight,
+            cols,
+            rowCount,
+            this.map.cellSize,
+          )
+        : null
+      return {
+        columns: cols,
+        rows: rowCount,
+        marginX: mx,
+        marginY: my,
+        spacingX: sx,
+        spacingY: sy,
+        tileWidth,
+        tileHeight,
+        availableWidth,
+        availableHeight,
+        fit,
+        valid,
+      }
+    }
+
+    const drawPreview = () => {
+      const config = readConfig()
+      const maxWidth = 430
+      const maxHeight = 210
+      const targetWidth = config.fit?.canvasWidth || image.naturalWidth
+      const targetHeight = config.fit?.canvasHeight || image.naturalHeight
+      const scale = Math.min(maxWidth / targetWidth, maxHeight / targetHeight)
+      preview.width = Math.max(1, Math.round(targetWidth * scale))
+      preview.height = Math.max(1, Math.round(targetHeight * scale))
+      const context = preview.getContext('2d')
+      context.imageSmoothingEnabled = false
+      drawTransparencyGrid(context, preview.width, preview.height)
+      if (config.valid) {
+        const outputScaleX = preview.width / config.fit.canvasWidth
+        const outputScaleY = preview.height / config.fit.canvasHeight
+        const fittedScaleX = config.fit.width / config.availableWidth
+        const fittedScaleY = config.fit.height / config.availableHeight
+        for (let row = 0; row < config.rows; row += 1) {
+          for (let column = 0; column < config.columns; column += 1) {
+            const sourceX = config.marginX + column * (config.tileWidth + config.spacingX)
+            const sourceY = config.marginY + row * (config.tileHeight + config.spacingY)
+            const fittedLeft = config.fit.offsetX + column * config.tileWidth * fittedScaleX
+            const fittedTop = config.fit.offsetY + row * config.tileHeight * fittedScaleY
+            const fittedRight = config.fit.offsetX + (column + 1) * config.tileWidth * fittedScaleX
+            const fittedBottom = config.fit.offsetY + (row + 1) * config.tileHeight * fittedScaleY
+            context.drawImage(
+              image,
+              sourceX,
+              sourceY,
+              config.tileWidth,
+              config.tileHeight,
+              fittedLeft * outputScaleX,
+              fittedTop * outputScaleY,
+              (fittedRight - fittedLeft) * outputScaleX,
+              (fittedBottom - fittedTop) * outputScaleY,
+            )
+          }
+        }
+        context.strokeStyle = '#4fd1c5'
+        context.lineWidth = 1
+        for (let column = 0; column <= config.columns; column += 1) {
+          const x = Math.min(preview.width - 0.5, Math.max(0.5, column * preview.width / config.columns))
+          context.beginPath()
+          context.moveTo(x, 0)
+          context.lineTo(x, preview.height)
+          context.stroke()
+        }
+        for (let row = 0; row <= config.rows; row += 1) {
+          const y = Math.min(preview.height - 0.5, Math.max(0.5, row * preview.height / config.rows))
+          context.beginPath()
+          context.moveTo(0, y)
+          context.lineTo(preview.width, y)
+          context.stroke()
+        }
+        validation.textContent = `${t('map.tileMapEditor.text044')}${config.fit.canvasWidth} × ${config.fit.canvasHeight}${t('map.tileMapEditor.text044.part1')}${config.columns * config.rows}${t('map.tileMapEditor.text044.part2')}${this.map.cellSize} × ${this.map.cellSize}${t('map.tileMapEditor.text044.part3')}`
+      } else {
+        validation.textContent = t('map.tileMapEditor.text045')
+      }
+      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 = t('map.tileMapEditor.text046')
+      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(errorT('map.tileMapEditor.text047'))
+        }
+        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 || t('map.tileMapEditor.text048')} ${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 || t('map.tileMapEditor.text049'),
+            ...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 || t('map.tileMapEditor.text049'),
+            ...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
+          ? t('map.tileMapEditor.text042')
+          : t('map.tileMapEditor.text043')
+      }
+    })
+    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(
+        `${t('map.tileMapEditor.text050')}${MAX_EXPORT_SIDE}${t('map.tileMapEditor.text050.part1')}${MAX_EXPORT_SIDE}${t('map.tileMapEditor.text050.part2')}`,
+      )
+    }
+    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(errorT('map.tileMapEditor.text051')))),
+        '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) {
+  installFeatureStyles('tile-map-editor', mapStyles)
+  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 getMountedTileMapView(id) {
+  return mountedViews.get(id) || null
+}
+
+export function refreshTileMapGridScale(outerScale) {
+  for (const view of mountedViews.values()) view.setOuterScale(outerScale)
+}
+
+export function resizeTileMapView(id) {
+  mountedViews.get(id)?.scheduleRendererResize()
+}
+
+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)
+}
+
+const mapStyles = `
+.tile-map-editor {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: #0e131a;
+}
+
+.tile-map-drag-handle {
+  display: flex;
+  flex: 0 0 22px;
+  min-height: 22px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-block: 3px;
+  border-top: 1px solid var(--line);
+  background: rgba(26, 31, 39, 0.94);
+  cursor: grab;
+}
+
+.tile-map-footer-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tile-map-footer-spec {
+  flex: 0 0 auto;
+  color: rgba(215, 224, 234, 0.62);
+}
+
+.tile-map-drag-handle:active {
+  cursor: grabbing;
+}
+
+.tile-map-inspector {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tile-map-inspector button,
+.tile-map-inspector input {
+  font: inherit;
+}
+
+.tile-map-layer-section {
+  display: flex;
+  flex: 0 0 auto;
+  min-width: 0;
+  height: 320px;
+  min-height: 320px;
+  max-height: 320px;
+  flex-direction: column;
+  gap: 6px;
+  padding: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 7px;
+  background: rgba(9, 13, 18, 0.44);
+}
+
+.tile-map-layer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.tile-map-layer-header .tile-map-button {
+  min-height: 24px;
+  padding: 2px 7px;
+}
+
+.tile-map-layer-list {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  gap: 5px;
+  overflow-y: auto;
+}
+
+.tile-map-layer-item {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 14px 56px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.035);
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+}
+
+.tile-map-layer-item:hover {
+  background: rgba(255, 255, 255, 0.065);
+}
+
+.tile-map-layer-item.is-active {
+  border-color: rgba(61, 214, 198, 0.62);
+  background: rgba(61, 214, 198, 0.12);
+}
+
+.tile-map-layer-item.is-dragging {
+  opacity: 0.42;
+}
+
+.tile-map-layer-item.is-drop-before {
+  box-shadow: inset 0 2px 0 #3dd6c6;
+}
+
+.tile-map-layer-item.is-drop-after {
+  box-shadow: inset 0 -2px 0 #3dd6c6;
+}
+
+.tile-map-layer-drag-handle {
+  display: flex;
+  width: 14px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.42);
+  cursor: grab;
+  font-size: 18px;
+  line-height: 1;
+  user-select: none;
+}
+
+.tile-map-layer-drag-handle:hover {
+  color: #3dd6c6;
+}
+
+.tile-map-layer-drag-handle:active {
+  cursor: grabbing;
+}
+
+.tile-map-layer-thumbnail {
+  display: block;
+  width: 56px;
+  height: 40px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  background: #101720;
+  image-rendering: pixelated;
+}
+
+.tile-map-layer-name {
+  min-width: 0;
+  width: 100%;
+  padding: 4px 5px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text);
+  background: transparent;
+  font-size: 11px;
+}
+
+.tile-map-layer-name:focus {
+  border-color: rgba(61, 214, 198, 0.65);
+  outline: none;
+  background: rgba(0, 0, 0, 0.24);
+}
+
+.tile-map-layer-delete {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: var(--muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.tile-map-layer-delete:hover:not(:disabled) {
+  color: #ff8585;
+  background: rgba(255, 80, 80, 0.14);
+}
+
+.tile-map-layer-delete:disabled {
+  cursor: not-allowed;
+  opacity: 0.28;
+}
+
+.tile-map-grid-fields,
+.tile-map-slice-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tile-map-button {
+  min-height: 28px;
+  padding: 4px 9px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.055);
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.tile-map-button:hover:not(:disabled),
+.tile-map-button.is-active {
+  border-color: rgba(61, 214, 198, 0.65);
+  background: rgba(61, 214, 198, 0.16);
+}
+
+.tile-map-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.tile-map-button-primary {
+  border-color: rgba(61, 214, 198, 0.58);
+  background: rgba(61, 214, 198, 0.2);
+}
+
+.tile-map-inspector.is-image-over .tile-map-palette {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 2px rgba(61, 214, 198, 0.16);
+}
+
+.tile-map-palette {
+  position: relative;
+  width: 100%;
+  min-height: 0;
+  aspect-ratio: 1;
+  flex: 0 0 auto;
+  overflow: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  background: #0b1016;
+}
+
+.tile-map-tileset-canvas {
+  position: relative;
+  z-index: 1;
+  display: block;
+  min-width: 0;
+  max-width: none;
+  height: auto;
+  image-rendering: pixelated;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.tile-map-tileset-selection {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  display: block;
+  height: auto;
+  image-rendering: pixelated;
+  pointer-events: none;
+}
+
+.tile-map-tileset-canvas[hidden] {
+  display: none;
+}
+
+.tile-map-palette-empty {
+  position: absolute;
+  z-index: 0;
+  inset: auto 12px 14px;
+  margin: 0;
+  color: rgba(190, 201, 214, 0.38);
+  font-size: 11px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.tile-map-brush-context-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 112px;
+  padding: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 7px;
+  background: rgba(20, 24, 31, 0.98);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
+}
+
+.tile-map-brush-context-menu button {
+  width: 100%;
+  padding: 7px 9px;
+  border: 0;
+  border-radius: 5px;
+  color: #ff9292;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+}
+
+.tile-map-brush-context-menu button:hover {
+  background: rgba(255, 80, 80, 0.14);
+}
+
+.tile-map-tool-strip {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.tile-map-icon-button {
+  display: inline-flex;
+  min-width: 0;
+  height: 34px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.055);
+  cursor: pointer;
+}
+
+.tile-map-icon-button svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.tile-map-icon-button:hover:not(:disabled),
+.tile-map-icon-button.is-active {
+  border-color: rgba(61, 214, 198, 0.65);
+  color: var(--text);
+  background: rgba(61, 214, 198, 0.16);
+}
+
+.tile-map-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.tile-map-grid-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-left: 0;
+}
+
+.tile-map-zoom-label {
+  min-width: 38px;
+  color: var(--muted);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  text-align: center;
+}
+
+.tile-map-number-field {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.tile-map-number-field input {
+  width: 54px;
+  height: 27px;
+  padding: 3px 5px;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 5px;
+  outline: none;
+  color: var(--text);
+  background: rgba(0, 0, 0, 0.28);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+}
+
+.tile-map-number-field input:focus {
+  border-color: var(--accent);
+}
+
+.tile-map-unit {
+  margin-left: -2px;
+}
+
+.tile-map-stage {
+  position: relative;
+  width: 100%;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  background: #17202b;
+}
+
+.tile-map-pixi-canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  cursor: crosshair;
+}
+
+.tile-map-slice-overlay {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  background: rgba(4, 7, 10, 0.8);
+  backdrop-filter: blur(4px);
+}
+
+.tile-map-slice-dialog {
+  display: grid;
+  width: min(470px, 100%);
+  max-height: 100%;
+  gap: 12px;
+  padding: 16px;
+  overflow: auto;
+  border: 1px solid rgba(61, 214, 198, 0.32);
+  border-radius: 12px;
+  background: #1b222c;
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.48);
+}
+
+.tile-map-slice-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.tile-map-slice-head small {
+  color: var(--muted);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.tile-map-slice-preview {
+  display: block;
+  max-width: 100%;
+  max-height: 210px;
+  margin: 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  background: #0d1117;
+  image-rendering: pixelated;
+}
+
+.tile-map-slice-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+}
+
+.tile-map-slice-fields .tile-map-number-field {
+  justify-content: space-between;
+}
+
+.tile-map-slice-fields .tile-map-number-field input {
+  width: 74px;
+}
+
+.tile-map-slice-validation {
+  min-height: 18px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.tile-map-slice-validation.is-error {
+  color: var(--danger);
+}
+
+.tile-map-slice-actions {
+  justify-content: flex-end;
+}
+
+@media (max-width: 960px) {
+  .app {
+    display: block;
+  }
+}
+`