feat: enhance map renderer with catalog synchronization and reload functionality

- Added a "Reload Current Map" button to the left panel for refreshing the selected map after catalog edits.
- Updated catalog CSV handling to support non-authoritative `categorization` and `qualities` columns.
- Implemented automatic addition of newly observed shapes to the game catalog CSV during cache builds.
- Modified catalog entry handling to ensure proper boolean overrides for `roof` and `semitransparency`.
- Introduced `ensureShapeCatalogCoverage` function to maintain catalog integrity based on observed shapes.
- Enhanced the serialization of catalog entries to include new fields and proper formatting.
- Updated UI to reflect changes in reload state and button functionality.

map_renderer/.dockerignore

@@ -4,5 +4,3 @@ coverage/
 dist/
 .env
 .env.*
-STATIC/
-STATIC_REGRET/

map_renderer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:20-alpine AS base
 
 WORKDIR /app
 
@@ -6,6 +6,31 @@ COPY package.json package-lock.json* ./
 RUN npm ci --omit=dev --no-audit --no-fund
 
 COPY src ./src
+COPY Catalogs ./Catalogs
+
+ENV PORT=3000
+EXPOSE 3000
+
+FROM base AS dev
+
+CMD ["npm", "start"]
+
+FROM base AS precache
+
+COPY STATIC ./STATIC
+COPY STATIC_REGRET ./STATIC_REGRET
+RUN npm run build-cache
+
+FROM node:20-alpine AS production
+
+WORKDIR /app
+
+COPY --from=precache /app/package.json ./package.json
+COPY --from=precache /app/package-lock.json ./package-lock.json
+COPY --from=precache /app/node_modules ./node_modules
+COPY --from=precache /app/src ./src
+COPY --from=precache /app/Catalogs ./Catalogs
+COPY --from=precache /app/.cache ./.cache
 
 ENV PORT=3000
 EXPOSE 3000

map_renderer/README.md

@@ -1,13 +1,13 @@
 # Crusader Map Renderer
 
-Node web app that renders Crusader maps on the server and streams only finished PNG tiles to the browser.
+Node web app that decodes Crusader maps into cached sprite atlases plus scene JSON, then renders the scene directly in the browser.
 
 ## Goals
 
 - Keep Crusader source assets server-side.
 - Detect maps from `STATIC` and `STATIC_REGRET` automatically.
-- Build map render state on demand after the user selects a map.
-- Serve large maps as draggable and zoomable image tiles.
+- Build map scene caches on demand after the user selects a map.
+- Serve cached atlas images and scene JSON so the browser reconstructs the view client-side.
 - Run locally with Node or inside Docker.
 
 ## Local Run
@@ -25,7 +25,30 @@ Viewer behavior:
 - drag with the mouse or one finger to pan
 - use the scroll wheel to zoom directly at the pointer
 - pinch to zoom on touch devices
-- toggle roofs and editor-only elements independently before building
+- toggle roofs and editor-only elements independently without rebuilding; the client filters one full cached scene payload
+- inspect mode lets you pin a shape tooltip, hide a single instance, and restore hidden instances from the left panel
+- PNG export is generated in the browser from the cached scene instead of being rasterized server-side
+- hidden instances can be exported as JSON and each catalog CSV can be downloaded from the viewer
+- the left panel includes a `Reload Current Map` button that forces a fresh rebuild/load of the currently selected map after catalog edits
+- catalog CSV rows support `roof` and `semitransparency` boolean overrides; the catalog is authoritative for those properties, so blank means `false` and only explicit `true` turns them on
+- cache builds automatically add any newly observed shapes into the matching game catalog CSV without overwriting existing rows, then rewrite the file sorted by `shape_code`
+- catalog CSV rows also support non-authoritative `categorization` and `qualities` columns; cache builds auto-fill them when blank from the existing derived categorization and observed per-shape quality values
+
+## Cache Warming
+
+Build atlas and scene cache artifacts outside the request path:
+
+```powershell
+cd map_renderer
+npm run build-cache
+```
+
+Optional focused warmup:
+
+```powershell
+cd map_renderer
+npm run build-cache -- remorse 1
+```
 
 The app expects asset folders under the app root:
 
@@ -34,22 +57,32 @@ The app expects asset folders under the app root:
 
 ## Docker Run
 
-The Docker image excludes the Crusader assets on purpose. Mount them at runtime so they stay outside the image and are never served directly to clients.
+The `dev` image stays light and expects Crusader assets to be mounted at runtime.
 
 ```powershell
 cd map_renderer
-docker build -t crusader-map-renderer .
+docker build --target dev -t crusader-map-renderer:dev .
 docker run --rm -p 3000:3000 `
   -v ${PWD}/STATIC:/app/STATIC:ro `
   -v ${PWD}/STATIC_REGRET:/app/STATIC_REGRET:ro `
-  crusader-map-renderer
+  crusader-map-renderer:dev
 ```
 
 If only one game is available, mount only that folder.
 
+Production image with prebuilt cache artifacts and no raw `STATIC` assets in the final layer:
+
+```powershell
+cd map_renderer
+docker build --target production -t crusader-map-renderer:prod .
+docker run --rm -p 3000:3000 crusader-map-renderer:prod
+```
+
+The production target copies `STATIC` and `STATIC_REGRET` only into the intermediate precache stage, runs `npm run build-cache`, then ships just `src`, `Catalogs`, `node_modules`, and `.cache` in the final image.
+
 ## Docker Compose
 
-The compose file mounts `STATIC` and `STATIC_REGRET` from the host filesystem into the container as read-only volumes. They are excluded from the image build by `.dockerignore`, so the assets are never copied into the image.
+The compose file targets the lightweight `dev` image and mounts `STATIC` and `STATIC_REGRET` from the host filesystem as read-only volumes.
 
 ```powershell
 cd map_renderer
@@ -61,7 +94,10 @@ docker compose up --build
 - `GET /api/maps` returns the detected catalog.
 - `POST /api/builds` starts or reuses a build.
 - `GET /api/builds/:id` returns build status.
-- `GET /api/maps/:game/:mapId/metadata?buildId=...` returns map bounds and tile settings.
-- `GET /api/maps/:game/:mapId/tiles/:tileX/:tileY.png?buildId=...` returns rendered PNG tiles.
+- `GET /api/maps/:game/:mapId/metadata?buildId=...` returns map bounds and scene metadata.
+- `GET /api/maps/:game/:mapId/scene?buildId=...` returns the cached atlas-backed scene payload.
+- `GET /api/maps/:game/:mapId/atlases/:atlasId.png?buildId=...` returns a cached packed sprite atlas.
+- `GET /api/maps/:game/:mapId/inspect?buildId=...` returns the same per-instance shape metadata used for inspection.
+- `GET /api/catalogs/:game.csv` returns the source catalog CSV for that game.
 
 No raw Crusader asset files are exposed over HTTP.

map_renderer/compose.yaml

@@ -2,6 +2,7 @@ services:
   map-renderer:
     build:
       context: .
+      target: dev
     ports:
       - "3000:3000"
     environment:

map_renderer/package.json

@@ -6,7 +6,8 @@
   "description": "Server-side tiled Crusader map renderer for browser viewing.",
   "scripts": {
     "start": "node src/server.js",
-    "dev": "node --watch src/server.js"
+    "dev": "node --watch src/server.js",
+    "build-cache": "node src/build-cache.js"
   },
   "engines": {
     "node": ">=20"

map_renderer/phase-plan.md

@@ -19,18 +19,113 @@ Phase 1 implementation choice:
 
 Goal: promote editor-only content from "baked into the raster" to interactive overlay objects.
 
-- keep the base map rendered as a flat server-generated tile surface
-- extract editor-only objects into a standalone overlay data stream
-- render those overlay items in the client as positioned interactive markers or sprites above the base map
-- on hover, slightly scale the hovered item and show a tooltip with its decoded metadata payload
+- completed: keep the base map rendered as a flat server-generated tile surface
+- completed: extract editor-only objects into a standalone overlay data stream
+- completed: render editor-only overlay items in the client as positioned sprite overlays above the base map
+- completed: remove editor-only records from the base raster so overlay shapes are not duplicated in the map tiles
+- completed: fix overlay transparency so the sprite background stays transparent instead of fading black
+- completed: add an inspection mode checkbox that shows metadata for any rendered shape under the cursor, not just editor overlays
 - improve roof detection before or during the overlay split because the current roof filtering still lets some roofs render when they should not
 - identify occluding helper geometry such as invisible walls and render those semitransparently so they remain legible without hiding too much of the map beneath them
 - fix pipe rendering because pipes currently are not showing up correctly
 - investigate force-field rendering because they appear yellow instead of the expected blue semitransparent look; this may be a debug-shape choice issue or a palette/color-rendering issue
 - likely revisit ScummVM Crusader handling in `D:\source\scummvm` to confirm what editor/debug records carry and how best to decode them for display
 
+Current phase 2 status:
+
+- the server now builds three outputs from one map build: base raster tiles, editor-only overlay sprites, and a shared inspectable-shape metadata stream
+- editor-only shapes are interactive overlay sprites rendered from their original decoded frames rather than synthetic markers
+- when inspect mode is active, the cursor reports metadata for whichever rendered shape is currently under it, including base-map shapes
+
+Next steps:
+
+- use inspect mode on representative maps to identify which visible structures are true roofs versus normal geometry so roof filtering can be tightened with evidence
+- decide which helper/occluder families should stay semitransparent overlays and which should eventually be hidden or toggled separately
+- inspect broken pipe shapes and compare their metadata against ScummVM handling to determine why they currently render incorrectly
+- inspect force-field shapes and compare palette or translucency traits against expected in-game appearance
+
 Open questions for phase 2:
 
-- which editor-only families should become interactive overlays versus remain baked into the base render
-- what exact metadata fields are reliable enough to expose in the tooltip
+- which helper/editor families should stay as overlay sprites versus gain their own visibility toggles
+- what exact metadata fields are reliable enough to expose in the tooltip long-term
 - whether some editor-only entries should be clustered, filtered, or toggled by family to keep dense maps usable
+
+## Phase 3
+
+Goal: replace server-side full-map raster composition with a cached atlas-plus-scene-data pipeline that the client renders directly.
+
+- stop baking the playable map and editor-only items into one server-rendered visual surface
+- have the server decode every shape needed for a map build, including editor/debug/usecode shapes, and pack them into one or more cached atlas images
+- emit cached JSON scene data that tells the client which atlas sprite to draw, where to place it, what metadata it exposes, and how it should be identified in the UI
+- reuse the existing usecode shape catalog CSV files in `map_renderer/Catalogs` as part of the build pipeline so shape names and other catalog metadata flow into the exported scene data
+- keep the catalog CSV files inside the Docker image build context rather than mounting them separately in `compose.yaml`; they are local source assets and should be burned into the image
+- add an explicit npm cache-generation script that prebuilds atlas images and scene JSON for every map outside the web request path; this can be run manually or during Docker/container initialization
+- keep the live viewer on cached artifacts by default and regenerate only missing or stale atlas/map data on demand when a request needs them
+
+Phase 3 implementation choice:
+
+- the primary server artifact becomes cached render data per map build rather than cached raster tiles
+- cache artifacts are per-map for now; do not generate separate atlas/scene folders for roof/editor visibility modes because those filters will be applied entirely in the client from one full scene payload
+- each cached map build should include:
+	- atlas image data containing all decoded shape frames required for that map, including editor-only items
+	- scene JSON listing every shape instance with atlas coordinates, map placement, draw order or layer hints, ID, and enough metadata for the client to decide whether the instance is a roof, editor/debug object, helper geometry, or normal map geometry
+	- build metadata sufficient to validate cache freshness against source assets, decoding rules, and the catalog CSV inputs
+- atlas packing and scene serialization should deduplicate repeated shapes so the client draws many instances from a small packed sprite set instead of receiving repeated rendered pixels
+- cache invalidation should key off map inputs plus a content/version fingerprint that includes the relevant catalog CSV data so name edits and decoding changes invalidate stale cached outputs cleanly
+
+Phase 3 metadata proposal:
+
+- keep per-instance records compact and focused on placement/runtime state: instance ID, sprite ID, shape-definition ID, draw order, source, world coordinates, flags, map/NPC linkage, and screen rect
+- move repeated descriptive data into shared per-shape definitions in the same scene JSON: shape code, display name, description, family, roof/editor/helper traits, and visibility tags
+- keep sprite packing data separate from shape definitions so multiple frames can share one shape definition while still pointing at distinct packed atlas entries
+- this reduces JSON duplication while keeping the client fully self-sufficient for filtering, inspection, and export operations
+
+Phase 3 client/UI work:
+
+- replace the current base-map tile surface plus overlay composition with one client-side scene renderer driven entirely by cached atlas plus scene JSON
+- preserve inspect mode, but change click behavior so when inspect mode is enabled a clicked shape pins its tooltip in place until the same shape is clicked again or a different shape is selected
+- ensure the pinned tooltip text remains selectable and copyable
+- add an eye icon to the tooltip that hides the currently selected shape instance from the scene without deleting its metadata
+- add a left-panel section that lists hidden shapes by name and ID and allows restoring each hidden shape to visibility
+- add a button that exports the current hidden-shape instance list as JSON
+- add one export button for each shape database CSV so the current catalog sources can be downloaded directly from the viewer workflow
+- make the left column scroll independently from the map viewer
+- make the left column horizontally resizable, with the renderer always filling the remaining viewport width and height
+
+Phase 3 server/runtime work:
+
+- separate cache warming from the web server process with a dedicated npm script such as `npm run build-cache` or similar
+- optionally call that script during Docker initialization so containers can start warm without forcing atlas generation into the request-serving process
+- on normal requests, serve cached atlas and scene artifacts when present; if an artifact is absent or invalid, regenerate just the required map data and then serve it
+- keep the runtime response machine-friendly so the client can reconstruct scene state without server-rendered presentation assumptions
+
+-- add a production Docker build step that bakes the fully precached atlas images and scene JSON into the production image so the container can serve maps without the original `STATIC` source files present
+- ensure the Docker build step excludes raw `STATIC` input sources from the final image layers: only the compiled/packed atlas outputs and scene JSON should be included in the production image
+- keep the development image light and mount `STATIC` locally (or read from the workspace) so developers can iterate on source assets without rebuilding the image; the dev image should not precache by default
+
+Open questions for phase 3:
+
+- atlas artifacts stay strictly per-map for now
+- prefer compact per-instance records plus shared shape-definition metadata in the JSON payload
+- whether hidden-shape state should stay purely client-side for a session or also become part of URL/share state later
+- keep the scene renderer DOM/canvas based for now
+
+## Phase 4
+
+Goal: add guarded catalog-editing tools for shape naming once the atlas-plus-scene-data pipeline is stable.
+
+- add a shape-name editor UI that can update the usecode shape catalog CSV files from inside the map viewer workflow
+- keep catalog editing disabled in the default server mode so externally exposed viewers remain read-only
+- expose catalog editing only through a special server mode with a separate npm target if practical, for example a dedicated dev/admin run mode rather than the default `start` or `dev` targets
+- make Phase 4 build directly on the Phase 3 scene data so edits operate on stable shape IDs and catalog-backed names instead of ad hoc tooltip text
+
+Phase 4 implementation choice:
+
+- prefer explicit opt-in server modes such as a dedicated admin/edit target over runtime query flags so editing capability cannot be enabled accidentally
+- any catalog write path should validate CSV targets, preserve formatting conventions, and trigger cache invalidation for affected maps so renamed shapes show up in freshly generated atlas data
+
+Open questions for phase 4:
+
+- whether catalog edits should write directly to the CSV files or stage edits through a review queue first
+- whether editing should be limited to names only or eventually extend to richer catalog metadata
+- how much authentication or local-only binding is needed beyond the separate npm target if the editor is ever exposed outside a purely local workflow

map_renderer/src/build-cache.js

@@ -0,0 +1,67 @@
+import { BuildManager } from "./lib/build-manager.js";
+import { detectCatalog, getGameConfig } from "./lib/catalog.js";
+
+function parseArgs(argv) {
+  const parsed = {
+    game: null,
+    mapId: null
+  };
+
+  for (const arg of argv) {
+    if (arg.startsWith("--game=")) {
+      parsed.game = arg.slice("--game=".length);
+      continue;
+    }
+    if (arg.startsWith("--map=")) {
+      parsed.mapId = Number.parseInt(arg.slice("--map=".length), 10);
+      continue;
+    }
+    if (!parsed.game && Number.isNaN(Number(arg))) {
+      parsed.game = arg;
+      continue;
+    }
+    if (!Number.isNaN(Number(arg))) {
+      parsed.mapId = Number.parseInt(arg, 10);
+    }
+  }
+
+  return parsed;
+}
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  const catalog = detectCatalog();
+  const builds = new BuildManager(catalog);
+  const games = args.game ? catalog.games.filter((game) => game.id === args.game) : catalog.games;
+
+  if (!games.length) {
+    throw new Error(args.game ? `No detected catalog entry for game ${args.game}` : "No detected maps to cache");
+  }
+
+  for (const game of games) {
+    const gameConfig = getGameConfig(game.id);
+    if (!gameConfig) {
+      throw new Error(`Missing game config for ${game.id}`);
+    }
+    const maps = Number.isInteger(args.mapId) ? game.maps.filter((map) => map.id === args.mapId) : game.maps;
+    if (!maps.length) {
+      throw new Error(`No detected map ${args.mapId} for game ${game.id}`);
+    }
+
+    for (const map of maps) {
+      const label = `${game.id} map ${map.id}`;
+      console.log(`warming ${label}`);
+      const job = await builds.createOrReuseBuild(gameConfig, map.id);
+      await job.promise;
+      if (job.status !== "ready") {
+        throw new Error(`Cache build failed for ${label}: ${job.error ?? "unknown error"}`);
+      }
+      console.log(`ready ${label} fingerprint=${job.fingerprint} atlases=${job.metadata.sceneSummary.atlasCount}`);
+    }
+  }
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exitCode = 1;
+});

map_renderer/src/config.js

@@ -7,9 +7,12 @@ const __dirname = path.dirname(__filename);
 export const APP_ROOT = path.resolve(__dirname, "..");
 export const PUBLIC_ROOT = path.join(APP_ROOT, "src", "public");
 export const TILE_SIZE = Number.parseInt(process.env.TILE_SIZE ?? "1024", 10);
+export const ATLAS_MAX_SIZE = Number.parseInt(process.env.ATLAS_MAX_SIZE ?? "4096", 10);
 export const PORT = Number.parseInt(process.env.PORT ?? "3000", 10);
 export const CACHE_ROOT = path.join(APP_ROOT, ".cache");
 export const TILE_CACHE_ROOT = path.join(CACHE_ROOT, "tiles");
+export const SCENE_CACHE_ROOT = path.join(CACHE_ROOT, "scene-cache");
+export const CATALOG_ROOT = path.join(APP_ROOT, "Catalogs");
 export const GAMES = [
   {
     id: "remorse",

map_renderer/src/lib/atlas-packer.js

@@ -0,0 +1,105 @@
+import { ATLAS_MAX_SIZE } from "../config.js";
+
+function createAtlas(index, maxSize, padding) {
+  return {
+    id: `atlas-${index}`,
+    maxSize,
+    padding,
+    width: 0,
+    height: 0,
+    cursorX: padding,
+    cursorY: padding,
+    shelfHeight: 0,
+    sprites: []
+  };
+}
+
+function finalizeAtlas(atlas) {
+  return {
+    id: atlas.id,
+    width: Math.max(1, atlas.width + atlas.padding),
+    height: Math.max(1, atlas.height + atlas.padding),
+    sprites: atlas.sprites
+  };
+}
+
+function tryPlaceSprite(atlas, sprite) {
+  const paddedWidth = sprite.width + atlas.padding;
+  const paddedHeight = sprite.height + atlas.padding;
+
+  if (paddedWidth + atlas.padding > atlas.maxSize || paddedHeight + atlas.padding > atlas.maxSize) {
+    throw new Error(`Sprite ${sprite.id} exceeds atlas limit ${atlas.maxSize}`);
+  }
+
+  if (atlas.cursorX + sprite.width > atlas.maxSize - atlas.padding) {
+    atlas.cursorX = atlas.padding;
+    atlas.cursorY += atlas.shelfHeight + atlas.padding;
+    atlas.shelfHeight = 0;
+  }
+
+  if (atlas.cursorY + sprite.height > atlas.maxSize - atlas.padding) {
+    return null;
+  }
+
+  const placed = {
+    id: sprite.id,
+    x: atlas.cursorX,
+    y: atlas.cursorY,
+    width: sprite.width,
+    height: sprite.height
+  };
+
+  atlas.sprites.push(placed);
+  atlas.width = Math.max(atlas.width, atlas.cursorX + sprite.width);
+  atlas.height = Math.max(atlas.height, atlas.cursorY + sprite.height);
+  atlas.cursorX += paddedWidth;
+  atlas.shelfHeight = Math.max(atlas.shelfHeight, paddedHeight);
+  return placed;
+}
+
+export function packSprites(rawSprites, options = {}) {
+  const maxAtlasSize = options.maxAtlasSize ?? ATLAS_MAX_SIZE;
+  const padding = options.padding ?? 1;
+  const sprites = [...rawSprites].sort((left, right) => {
+    const leftMax = Math.max(left.width, left.height);
+    const rightMax = Math.max(right.width, right.height);
+    if (leftMax !== rightMax) {
+      return rightMax - leftMax;
+    }
+    const leftArea = left.width * left.height;
+    const rightArea = right.width * right.height;
+    if (leftArea !== rightArea) {
+      return rightArea - leftArea;
+    }
+    return left.id.localeCompare(right.id);
+  });
+
+  const atlases = [];
+  const placements = new Map();
+  let atlas = createAtlas(0, maxAtlasSize, padding);
+
+  for (const sprite of sprites) {
+    let placed = tryPlaceSprite(atlas, sprite);
+    if (!placed) {
+      atlases.push(finalizeAtlas(atlas));
+      atlas = createAtlas(atlases.length, maxAtlasSize, padding);
+      placed = tryPlaceSprite(atlas, sprite);
+    }
+    placements.set(sprite.id, {
+      atlasId: atlas.id,
+      x: placed.x,
+      y: placed.y,
+      width: placed.width,
+      height: placed.height
+    });
+  }
+
+  if (atlas.sprites.length || atlases.length === 0) {
+    atlases.push(finalizeAtlas(atlas));
+  }
+
+  return {
+    atlases,
+    placements
+  };
+}

map_renderer/src/lib/catalog.js

@@ -1,8 +1,258 @@
+import crypto from "node:crypto";
 import fs from "node:fs";
+import path from "node:path";
 
-import { GAMES } from "../config.js";
+import { CATALOG_ROOT, GAMES } from "../config.js";
 import { getMapSummaries, resolveStaticFile } from "./formats.js";
 
+const CATALOG_FILE_BY_GAME = {
+  remorse: "usecode_shape_catalog_remorse.csv",
+  regret: "usecode_shape_catalog_regret.csv"
+};
+
+const shapeCatalogCache = new Map();
+const CATALOG_HEADERS = ["shape_code", "human_readable_id", "description", "roof", "semitransparency", "categorization", "qualities"];
+
+function sha1(value) {
+  return crypto.createHash("sha1").update(value).digest("hex");
+}
+
+function parseCsvLine(line) {
+  const values = [];
+  let current = "";
+  let inQuotes = false;
+
+  for (let index = 0; index < line.length; index += 1) {
+    const char = line[index];
+    if (char === '"') {
+      if (inQuotes && line[index + 1] === '"') {
+        current += '"';
+        index += 1;
+      } else {
+        inQuotes = !inQuotes;
+      }
+      continue;
+    }
+    if (char === "," && !inQuotes) {
+      values.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  values.push(current);
+  return values;
+}
+
+function parseOptionalBoolean(value) {
+  const normalized = String(value ?? "").trim().toLowerCase();
+  if (!normalized) {
+    return null;
+  }
+  if (["true", "1", "yes", "y"].includes(normalized)) {
+    return true;
+  }
+  if (["false", "0", "no", "n"].includes(normalized)) {
+    return false;
+  }
+  return null;
+}
+
+function getRowValue(row, ...keys) {
+  for (const key of keys) {
+    if (Object.hasOwn(row, key)) {
+      return row[key];
+    }
+  }
+  return "";
+}
+
+function normalizeCatalogEntry(row) {
+  const shapeCode = Number.parseInt(String(getRowValue(row, "shape_code", "shapeCode", "ShapeCode")).trim(), 16);
+  if (!Number.isInteger(shapeCode)) {
+    return null;
+  }
+  return {
+    shapeCode,
+    shapeCodeHex: `0x${shapeCode.toString(16).padStart(4, "0")}`,
+    humanReadableId: String(getRowValue(row, "human_readable_id", "humanReadableId", "HumanReadableId")).trim(),
+    description: String(getRowValue(row, "description", "Description")).trim(),
+    roof: parseOptionalBoolean(getRowValue(row, "roof", "Roof")),
+    semitransparency: parseOptionalBoolean(getRowValue(row, "semitransparency", "semi_transparency", "Semitransparency", "SemiTransparency")),
+    categorization: String(getRowValue(row, "categorization", "category", "Categorization", "Category")).trim(),
+    qualities: String(getRowValue(row, "qualities", "quality_values", "Qualities", "QualityValues")).trim()
+  };
+}
+
+function parseCatalogCsv(text) {
+  const lines = text
+    .split(/\r?\n/u)
+    .map((line) => line.trimEnd())
+    .filter((line) => line.length > 0);
+  if (!lines.length) {
+    return new Map();
+  }
+
+  const headers = parseCsvLine(lines[0]).map((value) => value.trim());
+  const entries = new Map();
+  for (let lineIndex = 1; lineIndex < lines.length; lineIndex += 1) {
+    const values = parseCsvLine(lines[lineIndex]);
+    const row = {};
+    for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+      row[headers[headerIndex]] = values[headerIndex] ?? "";
+    }
+    const entry = normalizeCatalogEntry(row);
+    if (entry) {
+      entries.set(entry.shapeCode, entry);
+    }
+  }
+  return entries;
+}
+
+function formatOptionalBoolean(value) {
+  if (value === true) {
+    return "true";
+  }
+  if (value === false) {
+    return "false";
+  }
+  return "";
+}
+
+function escapeCsvValue(value) {
+  const text = String(value ?? "");
+  if (!/[",\r\n]/u.test(text)) {
+    return text;
+  }
+  return `"${text.replaceAll('"', '""')}"`;
+}
+
+function serializeCatalog(entries) {
+  const lines = [CATALOG_HEADERS.join(",")];
+  const sortedEntries = [...entries.values()].sort((left, right) => left.shapeCode - right.shapeCode);
+  for (const entry of sortedEntries) {
+    lines.push(
+      [
+        entry.shapeCodeHex,
+        entry.humanReadableId,
+        entry.description,
+        formatOptionalBoolean(entry.roof),
+        formatOptionalBoolean(entry.semitransparency),
+        entry.categorization,
+        entry.qualities
+      ]
+        .map(escapeCsvValue)
+        .join(",")
+    );
+  }
+  return `${lines.join("\n")}\n`;
+}
+
+function getCatalogPath(gameId) {
+  const fileName = CATALOG_FILE_BY_GAME[gameId];
+  if (!fileName) {
+    return null;
+  }
+  return path.join(CATALOG_ROOT, fileName);
+}
+
+export function getShapeCatalogFile(gameId) {
+  return getCatalogPath(gameId);
+}
+
+export function getShapeCatalog(gameId) {
+  const filePath = getCatalogPath(gameId);
+  if (!filePath || !fs.existsSync(filePath)) {
+    return {
+      filePath,
+      digest: "missing",
+      entries: new Map()
+    };
+  }
+
+  const stat = fs.statSync(filePath);
+  const stamp = `${stat.size}:${Math.trunc(stat.mtimeMs)}`;
+  const cached = shapeCatalogCache.get(gameId);
+  if (cached?.stamp === stamp) {
+    return cached.value;
+  }
+
+  const text = fs.readFileSync(filePath, "utf8");
+  const value = {
+    filePath,
+    digest: sha1(text),
+    entries: parseCatalogCsv(text)
+  };
+  shapeCatalogCache.set(gameId, { stamp, value });
+  return value;
+}
+
+export function ensureShapeCatalogCoverage(gameId, observedShapes) {
+  const filePath = getCatalogPath(gameId);
+  if (!filePath) {
+    return {
+      changed: false,
+      added: 0,
+      filePath: null
+    };
+  }
+
+  const existing = getShapeCatalog(gameId);
+  const entries = new Map(existing.entries);
+  let added = 0;
+  let updated = 0;
+
+  for (const observed of observedShapes) {
+    if (entries.has(observed.shapeCode)) {
+      const entry = entries.get(observed.shapeCode);
+      let changed = false;
+      if (!entry.categorization && observed.categorization) {
+        entry.categorization = observed.categorization;
+        changed = true;
+      }
+      if (!entry.qualities && observed.qualities) {
+        entry.qualities = observed.qualities;
+        changed = true;
+      }
+      if (changed) {
+        updated += 1;
+      }
+      continue;
+    }
+    entries.set(observed.shapeCode, {
+      shapeCode: observed.shapeCode,
+      shapeCodeHex: `0x${observed.shapeCode.toString(16).padStart(4, "0")}`,
+      humanReadableId: "",
+      description: observed.isEditor ? "Editor Object" : "",
+      roof: null,
+      semitransparency: null,
+      categorization: observed.categorization,
+      qualities: observed.qualities
+    });
+    added += 1;
+  }
+
+  if (!added && !updated) {
+    return {
+      changed: false,
+      added: 0,
+      updated: 0,
+      filePath
+    };
+  }
+
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  const serialized = serializeCatalog(entries);
+  fs.writeFileSync(filePath, serialized, "utf8");
+  shapeCatalogCache.delete(gameId);
+  return {
+    changed: true,
+    added,
+    updated,
+    filePath
+  };
+}
+
 export function detectCatalog() {
   const games = [];
   for (const game of GAMES) {

map_renderer/src/lib/sorting.js

@@ -294,6 +294,61 @@ function resolvePaintOrder(ordered, progress, checkpointEvery = 0) {
   return painted;
 }
 
+export function projectItemGeometry(items, archive, shapeInfos, options = {}) {
+  const { progress, checkpointEvery = 0, maxInvalidDetails = 20 } = options;
+  const projected = [];
+  let invalidItemCount = 0;
+  const invalidItems = [];
+
+  for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
+    const item = items[itemIndex];
+    try {
+      const decoded = archive.decodeFrame(item.shape, item.frame);
+      projected.push(buildSortNode(item, shapeInfos[item.shape], decoded.frame, decoded.pixels));
+    } catch (error) {
+      invalidItemCount += 1;
+      if (invalidItems.length < maxInvalidDetails) {
+        invalidItems.push({
+          shape: item.shape,
+          frame: item.frame,
+          x: item.x,
+          y: item.y,
+          z: item.z,
+          source: item.source,
+          reason: error instanceof Error ? error.message : String(error)
+        });
+      }
+    }
+
+    if (progress && checkpointEvery > 0 && (itemIndex + 1) % checkpointEvery === 0) {
+      progress(`project processed=${itemIndex + 1} valid=${projected.length} invalid=${invalidItemCount}`);
+    }
+  }
+
+  projected.sort((left, right) => {
+    if (left.sy_bot !== right.sy_bot) {
+      return left.sy_bot - right.sy_bot;
+    }
+    if (left.sx_bot !== right.sx_bot) {
+      return left.sx_bot - right.sx_bot;
+    }
+    if (left.item.shape !== right.item.shape) {
+      return left.item.shape - right.item.shape;
+    }
+    return left.item.frame - right.item.frame;
+  });
+
+  if (progress) {
+    progress(`project complete processed=${items.length} valid=${projected.length} invalid=${invalidItemCount}`);
+  }
+
+  return {
+    projected,
+    invalidItemCount,
+    invalidItems
+  };
+}
+
 export function prepareSortedItems(items, archive, shapeInfos, options = {}) {
   const { progress, checkpointEvery = 0, maxInvalidDetails = 20 } = options;
   const ordered = [];

map_renderer/src/public/app.css

@@ -1,5 +1,6 @@
 :root {
   color-scheme: light dark;
+  --panel-width: 360px;
   --bg: #f1ead6;
   --panel: rgba(255, 248, 232, 0.92);
   --card: rgba(255, 255, 255, 0.58);
@@ -9,7 +10,6 @@
   --accent: #0d6c7d;
   --accent-strong: #114f59;
   --viewport: #0e1218;
-  --tile-border: rgba(255, 255, 255, 0.04);
   --shadow: 0 18px 45px rgba(59, 40, 8, 0.16);
   --font-ui: "Segoe UI Variable Text", "Aptos", "Trebuchet MS", sans-serif;
 }
@@ -25,7 +25,6 @@
     --accent: #46a7bc;
     --accent-strong: #2a7b8d;
     --viewport: #06080d;
-    --tile-border: rgba(255, 255, 255, 0.03);
     --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
   }
 }
@@ -34,6 +33,11 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  min-height: 100%;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
@@ -46,8 +50,8 @@ body {
 
 .shell {
   display: grid;
-  grid-template-columns: 340px minmax(0, 1fr);
-  min-height: 100vh;
+  grid-template-columns: minmax(280px, var(--panel-width)) 12px minmax(0, 1fr);
+  height: 100vh;
 }
 
 .panel {
@@ -56,6 +60,22 @@ body {
   backdrop-filter: blur(16px);
   border-right: 1px solid var(--panel-border);
   box-shadow: var(--shadow);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.panel-resizer {
+  cursor: col-resize;
+  background:
+    linear-gradient(180deg, transparent 0%, rgba(17, 79, 89, 0.3) 15%, rgba(17, 79, 89, 0.3) 85%, transparent 100%),
+    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
+}
+
+.panel-resizer:hover,
+.panel-resizer.is-dragging {
+  background:
+    linear-gradient(180deg, transparent 0%, rgba(13, 108, 125, 0.56) 15%, rgba(13, 108, 125, 0.56) 85%, transparent 100%),
+    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
 }
 
 .panel h1 {
@@ -81,7 +101,10 @@ label {
 }
 
 select,
-.action-link {
+.action-link,
+.button-row button,
+.hidden-item-button,
+.tooltip-action {
   width: 100%;
   border-radius: 12px;
   border: 1px solid rgba(65, 48, 21, 0.18);
@@ -93,7 +116,6 @@ select,
   cursor: pointer;
   color: white;
   background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
-  text-decoration: none;
   text-align: center;
 }
 
@@ -109,6 +131,26 @@ select:disabled,
   gap: 8px;
 }
 
+.catalog-export-list {
+  display: grid;
+  gap: 8px;
+}
+
+.button-row button,
+.hidden-item-button,
+.tooltip-action {
+  cursor: pointer;
+  background: color-mix(in srgb, var(--card) 80%, white 20%);
+  color: var(--ink);
+}
+
+.button-row button:disabled,
+.hidden-item-button:disabled,
+.tooltip-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
 .toggle-grid,
 .status,
 .meta-panel {
@@ -145,6 +187,10 @@ select:disabled,
   font-weight: 700;
 }
 
+.action-link + .action-link {
+  margin-top: 2px;
+}
+
 .status {
   min-height: 92px;
 }
@@ -230,9 +276,33 @@ select:disabled,
   font-weight: 600;
 }
 
+.hidden-list {
+  display: grid;
+  gap: 10px;
+}
+
+.hidden-item {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(65, 48, 21, 0.08);
+  background: color-mix(in srgb, var(--card) 76%, transparent 24%);
+}
+
+.hidden-item-title {
+  font-weight: 700;
+}
+
+.hidden-item-meta {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
 .workspace {
   min-width: 0;
   padding: 18px;
+  height: 100vh;
 }
 
 .viewport {
@@ -241,30 +311,124 @@ select:disabled,
   height: calc(100vh - 36px);
   overflow: hidden;
   border-radius: 24px;
-  background: radial-gradient(circle at top left, rgba(255,255,255,0.04), transparent 26%), var(--viewport);
-  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), var(--shadow);
+  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 26%), var(--viewport);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--shadow);
   touch-action: none;
   cursor: grab;
   user-select: none;
 }
 
-.scene {
-  position: absolute;
-  left: 0;
-  top: 0;
-  transform-origin: top left;
-  will-change: transform;
-}
-
-.layer {
-  position: absolute;
-  inset: 0 auto auto 0;
-}
-
-.tile {
+.scene-canvas {
   position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
+}
+
+.overlay-tooltip {
+  position: absolute;
+  z-index: 6;
+  max-width: 340px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(8, 12, 18, 0.9);
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(124, 182, 214, 0.28);
+  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
+  pointer-events: auto;
+  backdrop-filter: blur(14px);
+  user-select: text;
+}
+
+.overlay-tooltip[hidden] {
+  display: none;
+}
+
+.tooltip-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.tooltip-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tooltip-action {
+  width: auto;
+  min-width: 0;
+  padding: 8px 10px;
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.18);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.tooltip-action svg {
+  display: block;
+}
+
+.tooltip-state {
+  display: inline-flex;
+  margin-top: 8px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(229, 192, 76, 0.18);
+  color: rgba(255, 225, 145, 0.96);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.tooltip-eyebrow {
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(138, 202, 221, 0.88);
+}
+
+.tooltip-title {
+  margin-top: 4px;
+  font-size: 0.98rem;
+  font-weight: 700;
+}
+
+.tooltip-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 10px;
+  margin: 10px 0 0;
+  font-size: 0.84rem;
+}
+
+.tooltip-grid dt {
+  color: rgba(176, 197, 212, 0.76);
+}
+
+.tooltip-grid dd {
+  margin: 0;
+  text-align: right;
+}
+
+.tooltip-notes {
+  margin: 10px 0 0;
+  padding-left: 18px;
+  color: rgba(214, 227, 237, 0.82);
+  font-size: 0.8rem;
+}
+
+.inspect-highlight {
+  position: absolute;
+  z-index: 4;
+  border: 2px solid rgba(255, 229, 107, 0.95);
+  background: rgba(255, 229, 107, 0.08);
+  box-shadow: 0 0 0 1px rgba(7, 12, 18, 0.82), 0 0 18px rgba(255, 229, 107, 0.28);
   pointer-events: none;
 }
 
@@ -282,6 +446,14 @@ select:disabled,
   cursor: grabbing;
 }
 
+.viewport.inspect-active {
+  cursor: crosshair;
+}
+
+.viewport.inspect-active.is-dragging {
+  cursor: grabbing;
+}
+
 .viewport-hint {
   position: absolute;
   top: 16px;
@@ -301,25 +473,43 @@ select:disabled,
   display: grid;
   place-items: center;
   padding: 24px;
-  color: rgba(255,255,255,0.72);
+  color: rgba(255, 255, 255, 0.72);
   text-align: center;
 }
 
 .empty-state.is-hidden {
-  display: none;
+  opacity: 0;
+  pointer-events: none;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 960px) {
+  .shell {
+    grid-template-columns: minmax(260px, 42vw) 10px minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 820px) {
   .shell {
     grid-template-columns: 1fr;
+    height: auto;
   }
 
   .panel {
     border-right: 0;
     border-bottom: 1px solid var(--panel-border);
+    max-height: none;
+  }
+
+  .panel-resizer {
+    display: none;
+  }
+
+  .workspace {
+    padding-top: 0;
+    height: auto;
   }
 
   .viewport {
     height: 70vh;
   }
-}
+}

map_renderer/src/public/index.html

@@ -8,9 +8,9 @@
   </head>
   <body>
     <div class="shell">
-      <aside class="panel">
+      <aside class="panel" id="side-panel">
         <h1>Crusader Map Renderer</h1>
-        <p class="lede">Server-rendered tiles only. Source assets stay on the server.</p>
+        <p class="lede">Cache-backed atlas scene renderer. Source assets stay server-side while the browser reconstructs each map from packed sprite atlases.</p>
 
         <form id="map-form" class="stack">
           <label for="map-select">Detected maps</label>
@@ -20,6 +20,7 @@
           <div class="toggle-grid">
             <label class="toggle"><input id="include-editor" type="checkbox" checked> Show editor-only elements</label>
             <label class="toggle"><input id="include-roofs" type="checkbox"> Show roofs</label>
+            <label class="toggle"><input id="inspect-shapes" type="checkbox"> Inspect shapes under cursor</label>
           </div>
         </form>
 
@@ -32,7 +33,14 @@
             <button id="zoom-fit" type="button" disabled>Fit</button>
           </div>
           <div id="zoom-label" class="muted">Zoom: --</div>
-          <a id="download-button" class="action-link is-disabled" aria-disabled="true" href="#">Download PNG</a>
+          <button id="reload-map-button" class="action-link is-disabled" type="button" aria-disabled="true">Reload Current Map</button>
+          <button id="download-button" class="action-link is-disabled" type="button" aria-disabled="true">Download PNG</button>
+          <button id="hidden-export-button" class="action-link is-disabled" type="button" aria-disabled="true">Export Hidden JSON</button>
+        </div>
+
+        <div class="stack controls">
+          <label>Catalog CSVs</label>
+          <div id="catalog-export-buttons" class="catalog-export-list"></div>
         </div>
 
         <div class="stack">
@@ -50,6 +58,14 @@
           </div>
         </div>
 
+        <div class="stack">
+          <label>Hidden Shapes</label>
+          <div id="hidden-panel" class="meta-panel">
+            <p id="hidden-empty" class="meta-empty">Hidden shapes will appear here and can be restored individually.</p>
+            <div id="hidden-list" class="hidden-list"></div>
+          </div>
+        </div>
+
         <div class="stack">
           <label>Map Metadata</label>
           <div id="meta" class="meta-panel">
@@ -58,12 +74,14 @@
         </div>
       </aside>
 
+      <div id="panel-resizer" class="panel-resizer" role="separator" aria-orientation="vertical" aria-label="Resize side panel"></div>
+
       <main class="workspace">
         <div id="viewport" class="viewport">
           <div id="viewport-hint" class="viewport-hint">Drag to pan. Scroll or pinch to zoom.</div>
-          <div id="scene" class="scene">
-            <div id="active-layer" class="layer"></div>
-          </div>
+          <canvas id="scene-canvas" class="scene-canvas"></canvas>
+          <div id="inspect-highlight" class="inspect-highlight" hidden></div>
+          <div id="overlay-tooltip" class="overlay-tooltip" hidden></div>
           <div id="empty-state" class="empty-state">Choose a detected map to build and view it.</div>
         </div>
       </main>
@@ -71,4 +89,4 @@
 
     <script type="module" src="/app.js"></script>
   </body>
-  </html>
+  </html>

map_renderer/src/server.js

@@ -3,7 +3,7 @@ import path from "node:path";
 
 import { PORT, PUBLIC_ROOT } from "./config.js";
 import { BuildManager } from "./lib/build-manager.js";
-import { detectCatalog, getGameConfig } from "./lib/catalog.js";
+import { detectCatalog, getGameConfig, getShapeCatalogFile } from "./lib/catalog.js";
 
 const app = express();
 const catalog = detectCatalog();
@@ -21,10 +21,6 @@ app.post("/api/builds", async (request, response) => {
   try {
     const game = String(request.body?.game ?? "");
     const mapId = Number.parseInt(String(request.body?.mapId ?? ""), 10);
-    const options = {
-      includeEditor: request.body?.includeEditor !== false,
-      includeRoofs: request.body?.includeRoofs === true
-    };
     const gameConfig = getGameConfig(game);
     if (!gameConfig) {
       response.status(400).json({ error: "Unknown game id" });
@@ -34,7 +30,7 @@ app.post("/api/builds", async (request, response) => {
       response.status(400).json({ error: "Invalid map id" });
       return;
     }
-    const job = await builds.createOrReuseBuild(gameConfig, mapId, options);
+    const job = await builds.createOrReuseBuild(gameConfig, mapId);
     response.status(202).json(builds.getPublicJob(job));
   } catch (error) {
     response.status(500).json({ error: error instanceof Error ? error.message : String(error) });
@@ -61,57 +57,70 @@ app.get("/api/maps/:game/:mapId/metadata", (request, response) => {
   }
 });
 
-app.get("/api/maps/:game/:mapId/tiles/:tileX/:tileY.png", async (request, response) => {
+app.get("/api/maps/:game/:mapId/scene", (request, response) => {
   try {
     const buildId = String(request.query.buildId ?? "");
     const mapId = Number.parseInt(request.params.mapId, 10);
-    const tileX = Number.parseInt(request.params.tileX, 10);
-    const tileY = Number.parseInt(request.params.tileY, 10);
-    if (!Number.isInteger(tileX) || !Number.isInteger(tileY) || tileX < 0 || tileY < 0) {
-      response.status(400).json({ error: "Invalid tile coordinates" });
-      return;
-    }
-    const png = await builds.renderTile(buildId, request.params.game, mapId, tileX, tileY, "png");
-    response.setHeader("Content-Type", "image/png");
-    response.setHeader("Cache-Control", "public, max-age=31536000, immutable");
-    response.end(png);
+    const scene = builds.getSceneData(buildId, request.params.game, mapId);
+    response.json(scene);
   } catch (error) {
     response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
   }
 });
 
-app.get("/api/maps/:game/:mapId/tiles/:tileX/:tileY.webp", async (request, response) => {
+app.get("/api/maps/:game/:mapId/inspect", (request, response) => {
   try {
     const buildId = String(request.query.buildId ?? "");
     const mapId = Number.parseInt(request.params.mapId, 10);
-    const tileX = Number.parseInt(request.params.tileX, 10);
-    const tileY = Number.parseInt(request.params.tileY, 10);
-    if (!Number.isInteger(tileX) || !Number.isInteger(tileY) || tileX < 0 || tileY < 0) {
-      response.status(400).json({ error: "Invalid tile coordinates" });
-      return;
-    }
-    const webp = await builds.renderTile(buildId, request.params.game, mapId, tileX, tileY, "webp");
-    response.setHeader("Content-Type", "image/webp");
-    response.setHeader("Cache-Control", "public, max-age=31536000, immutable");
-    response.end(webp);
+    const inspect = builds.getInspectData(buildId, request.params.game, mapId);
+    response.json(inspect);
   } catch (error) {
     response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
   }
 });
 
-app.get("/api/maps/:game/:mapId/download.png", async (request, response) => {
+app.get("/api/maps/:game/:mapId/overlays", (request, response) => {
   try {
     const buildId = String(request.query.buildId ?? "");
     const mapId = Number.parseInt(request.params.mapId, 10);
-    const filePath = await builds.renderFullMap(buildId, request.params.game, mapId);
-    response.setHeader("Content-Type", "image/png");
-    response.setHeader("Content-Disposition", `attachment; filename="${path.basename(filePath)}"`);
-    response.sendFile(path.resolve(filePath), { dotfiles: "allow" });
+    const overlays = builds.getOverlayData(buildId, request.params.game, mapId);
+    response.json(overlays);
   } catch (error) {
     response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
   }
 });
 
+app.get("/api/maps/:game/:mapId/atlases/:atlasId.png", (request, response) => {
+  try {
+    const buildId = String(request.query.buildId ?? "");
+    const mapId = Number.parseInt(request.params.mapId, 10);
+    const atlas = builds.getAtlas(buildId, request.params.game, mapId, request.params.atlasId);
+    response.setHeader("Content-Type", "image/png");
+    response.setHeader("Cache-Control", "public, max-age=31536000, immutable");
+    response.end(atlas);
+  } catch (error) {
+    response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
+  }
+});
+
+app.get("/api/catalogs/:game.csv", (request, response) => {
+  const filePath = getShapeCatalogFile(request.params.game);
+  if (!filePath) {
+    response.status(404).json({ error: "Unknown game id" });
+    return;
+  }
+  response.setHeader("Content-Type", "text/csv; charset=utf-8");
+  response.setHeader("Content-Disposition", `attachment; filename="${path.basename(filePath)}"`);
+  response.sendFile(path.resolve(filePath), { dotfiles: "allow" }, (error) => {
+    if (!error) {
+      return;
+    }
+    if (!response.headersSent) {
+      response.status(404).json({ error: "Catalog CSV not found" });
+    }
+  });
+});
+
 app.get("/api/health", (_request, response) => {
   response.json({ ok: true, games: catalog.games.length });
 });