diff --git a/src/server/api_media_routes.cpp b/src/server/api_media_routes.cpp
index 2bdd740..27f314b 100644
--- a/src/server/api_media_routes.cpp
+++ b/src/server/api_media_routes.cpp
@@ -138,6 +138,44 @@ void ApiServer::registerMediaRoutes(httplib::Server& svr)
     res.body = FileUtil::readBinary(*path);
   });
 
+  svr.Get(R"(/api/maps/([^/]+)/image/base$)", [this](const httplib::Request& req, httplib::Response& res) {
+    HttpUtil::addCors(res);
+    const std::string id = req.matches[1];
+    const auto path = map_store_.baseImagePath(id);
+    if (!path)
+      return HttpUtil::jsonError(res, 404, "map base image not found");
+    res.set_header("Content-Type", HttpUtil::contentTypeForPath(*path));
+    res.body = FileUtil::readBinary(*path);
+  });
+
+  svr.Post(R"(/api/maps/([^/]+)/image/composite$)", [this](const httplib::Request& req, httplib::Response& res) {
+    HttpUtil::addCors(res);
+    const std::string id = req.matches[1];
+    if (!req.form.has_file("file"))
+      return HttpUtil::jsonError(res, 400, "file is required");
+    const auto& file = req.form.get_file("file");
+    std::string err;
+    if (!map_store_.saveCompositeImageFile(id, file.content, err))
+      return HttpUtil::jsonError(res, 400, err);
+    const auto updated = map_store_.find(id);
+    res.set_header("Content-Type", "application/json; charset=utf-8");
+    res.body = updated ? updated->dump() : nlohmann::json::object().dump();
+  });
+
+  svr.Post(R"(/api/maps/([^/]+)/image/base$)", [this](const httplib::Request& req, httplib::Response& res) {
+    HttpUtil::addCors(res);
+    const std::string id = req.matches[1];
+    if (!req.form.has_file("file"))
+      return HttpUtil::jsonError(res, 400, "file is required");
+    const auto& file = req.form.get_file("file");
+    std::string err;
+    if (!map_store_.saveBaseImageFile(id, file.content, err))
+      return HttpUtil::jsonError(res, 400, err);
+    const auto updated = map_store_.find(id);
+    res.set_header("Content-Type", "application/json; charset=utf-8");
+    res.body = updated ? updated->dump() : nlohmann::json::object().dump();
+  });
+
   svr.Post(R"(/api/maps/([^/]+)/image$)", [this](const httplib::Request& req, httplib::Response& res) {
     HttpUtil::addCors(res);
     const std::string id = req.matches[1];
diff --git a/src/storage/map_store.cpp b/src/storage/map_store.cpp
index d8e062b..8ff5caf 100644
--- a/src/storage/map_store.cpp
+++ b/src/storage/map_store.cpp
@@ -11,6 +11,8 @@ namespace lm {
 
 namespace {
 
+constexpr const char* kBaseImageName = "map_base.png";
+
 constexpr const char* kMapSelect =
     "SELECT id, name, description, site_id, created_by, width, height, resolution, "
     "origin_x, origin_y, origin_yaw, image_file, yaml_file, zones_json, created_at, updated_at "
@@ -220,7 +222,14 @@ bool MapStore::update(const std::string& id, const nlohmann::json& payload, std:
       merged[key] = payload[key];
   }
   if (payload.contains("zones"))
+  {
+    if (!payload["zones"].is_array())
+    {
+      err = "zones must be an array";
+      return false;
+    }
     merged["zones"] = payload["zones"];
+  }
 
   const std::string now = IdUtil::nowIso8601();
   const std::string zones_str = merged.value("zones", nlohmann::json::array()).dump();
@@ -307,6 +316,14 @@ std::optional<std::filesystem::path> MapStore::imagePath(const std::string& id)
   return path;
 }
 
+std::optional<std::filesystem::path> MapStore::baseImagePath(const std::string& id) const
+{
+  const auto base = mapDir(id) / kBaseImageName;
+  if (std::filesystem::exists(base))
+    return base;
+  return imagePath(id);
+}
+
 std::optional<std::filesystem::path> MapStore::yamlPath(const std::string& id) const
 {
   const auto map = find(id);
@@ -338,6 +355,13 @@ bool MapStore::saveImageFile(const std::string& id,
     return false;
   }
 
+  const auto base_path = mapDir(id) / kBaseImageName;
+  if (!FileUtil::writeBinaryAtomic(base_path, bytes))
+  {
+    err = "failed to write base image file";
+    return false;
+  }
+
   const std::string now = IdUtil::nowIso8601();
   std::lock_guard<std::mutex> lock(mu_);
   sqlite3_stmt* stmt = nullptr;
@@ -360,6 +384,99 @@ bool MapStore::saveImageFile(const std::string& id,
   return ok;
 }
 
+bool MapStore::saveCompositeImageFile(const std::string& id, const std::string& bytes, std::string& err)
+{
+  const auto map = find(id);
+  if (!map)
+  {
+    err = "map not found";
+    return false;
+  }
+  const std::string filename = map->value("image_file", "map.png");
+  if (filename.empty())
+  {
+    err = "map has no image file";
+    return false;
+  }
+
+  std::error_code ec;
+  std::filesystem::create_directories(mapDir(id), ec);
+  const auto path = mapDir(id) / filename;
+  if (!FileUtil::writeBinaryAtomic(path, bytes))
+  {
+    err = "failed to write composite image file";
+    return false;
+  }
+
+  const auto base_path = mapDir(id) / kBaseImageName;
+  if (!std::filesystem::exists(base_path))
+  {
+    if (!FileUtil::writeBinaryAtomic(base_path, bytes))
+    {
+      err = "failed to initialize base image file";
+      return false;
+    }
+  }
+
+  const std::string now = IdUtil::nowIso8601();
+  std::lock_guard<std::mutex> lock(mu_);
+  sqlite3_stmt* stmt = nullptr;
+  if (sqlite3_prepare_v2(db_.handle(),
+                         "UPDATE maps SET updated_at = ?2 WHERE id = ?1",
+                         -1,
+                         &stmt,
+                         nullptr) != SQLITE_OK)
+  {
+    err = sqlite3_errmsg(db_.handle());
+    return false;
+  }
+  sqlite3_bind_text(stmt, 1, id.c_str(), -1, SQLITE_TRANSIENT);
+  sqlite3_bind_text(stmt, 2, now.c_str(), -1, SQLITE_TRANSIENT);
+  const bool ok = sqlite3_step(stmt) == SQLITE_DONE;
+  if (!ok)
+    err = sqlite3_errmsg(db_.handle());
+  sqlite3_finalize(stmt);
+  return ok;
+}
+
+bool MapStore::saveBaseImageFile(const std::string& id, const std::string& bytes, std::string& err)
+{
+  if (!find(id))
+  {
+    err = "map not found";
+    return false;
+  }
+
+  std::error_code ec;
+  std::filesystem::create_directories(mapDir(id), ec);
+  const auto path = mapDir(id) / kBaseImageName;
+  if (!FileUtil::writeBinaryAtomic(path, bytes))
+  {
+    err = "failed to write base image file";
+    return false;
+  }
+
+  const std::string now = IdUtil::nowIso8601();
+  std::lock_guard<std::mutex> lock(mu_);
+  sqlite3_stmt* stmt = nullptr;
+  if (sqlite3_prepare_v2(db_.handle(),
+                         "UPDATE maps SET updated_at = ?2 WHERE id = ?1",
+                         -1,
+                         &stmt,
+                         nullptr) != SQLITE_OK)
+  {
+    err = sqlite3_errmsg(db_.handle());
+    return false;
+  }
+  sqlite3_bind_text(stmt, 1, id.c_str(), -1, SQLITE_TRANSIENT);
+  sqlite3_bind_text(stmt, 2, now.c_str(), -1, SQLITE_TRANSIENT);
+  const bool ok = sqlite3_step(stmt) == SQLITE_DONE;
+  if (!ok)
+    err = sqlite3_errmsg(db_.handle());
+  sqlite3_finalize(stmt);
+  return ok;
+}
+
 bool MapStore::saveYamlFile(const std::string& id, const std::string& yaml_text, std::string& err)
 {
   if (!find(id))
diff --git a/src/storage/map_store.hpp b/src/storage/map_store.hpp
index 0a61657..8088ca4 100644
--- a/src/storage/map_store.hpp
+++ b/src/storage/map_store.hpp
@@ -24,8 +24,14 @@ public:
 
   std::filesystem::path mapDir(const std::string& id) const;
   std::optional<std::filesystem::path> imagePath(const std::string& id) const;
+  /** Scan/original floor plan (map_base.png); falls back to composite image if missing. */
+  std::optional<std::filesystem::path> baseImagePath(const std::string& id) const;
   std::optional<std::filesystem::path> yamlPath(const std::string& id) const;
   bool saveImageFile(const std::string& id, const std::string& filename, const std::string& bytes, std::string& err);
+  /** Save flattened composite (map.png) without touching map_base.png. */
+  bool saveCompositeImageFile(const std::string& id, const std::string& bytes, std::string& err);
+  /** Save base scan layer (map_base.png) only. */
+  bool saveBaseImageFile(const std::string& id, const std::string& bytes, std::string& err);
   bool saveYamlFile(const std::string& id, const std::string& yaml_text, std::string& err);
 
 private:
diff --git a/www/app.js b/www/app.js
index 133346a..64cf8fc 100644
--- a/www/app.js
+++ b/www/app.js
@@ -10,6 +10,7 @@ const pageConfigEl = el("pageConfig");
 const pageMapsEl = el("pageMaps");
 const pageMissionsEl = el("pageMissions");
 const pageIntegrationsEl = el("pageIntegrations");
+const pageSoundsEl = el("pageSounds");
 const pageMonitoringEl = el("pageMonitoring");
 const pageHelpEl = el("pageHelp");
 const contentEl = document.querySelector(".content");
@@ -124,7 +125,7 @@ const state = {
 };
 
 function setActivePage(page) {
-  const valid = ["dashboard", "config", "maps", "missions", "integrations", "monitoring", "help"];
+  const valid = ["dashboard", "config", "maps", "missions", "sounds", "integrations", "monitoring", "help"];
   let p = valid.includes(page) ? page : "missions";
   if (window.AuthApp && !window.AuthApp.canAccessPage(p)) {
     const fallback = valid.find((v) => window.AuthApp.canAccessPage(v));
@@ -135,6 +136,7 @@ function setActivePage(page) {
   if (pageConfigEl) pageConfigEl.hidden = p !== "config";
   if (pageMapsEl) pageMapsEl.hidden = p !== "maps";
   if (pageMissionsEl) pageMissionsEl.hidden = p !== "missions";
+  if (pageSoundsEl) pageSoundsEl.hidden = p !== "sounds";
   if (pageIntegrationsEl) pageIntegrationsEl.hidden = p !== "integrations";
   if (pageMonitoringEl) pageMonitoringEl.hidden = p !== "monitoring";
   if (pageHelpEl) pageHelpEl.hidden = p !== "help";
@@ -145,6 +147,7 @@ function setActivePage(page) {
     contentEl.classList.toggle("content--config", p === "config");
     contentEl.classList.toggle("content--maps", p === "maps");
     contentEl.classList.toggle("content--missions", p === "missions");
+    contentEl.classList.toggle("content--sounds", p === "sounds");
     contentEl.classList.toggle("content--integrations", p === "integrations");
     contentEl.classList.toggle("content--monitoring", p === "monitoring");
     contentEl.classList.toggle("content--help", p === "help");
@@ -152,6 +155,8 @@ function setActivePage(page) {
   if (p === "missions" && window.MissionsApp) window.MissionsApp.onPageShow();
   else if (window.MissionsApp?.onPageHide) window.MissionsApp.onPageHide();
   if (p === "maps" && window.MapsApp) window.MapsApp.onPageShow();
+  if (p === "sounds" && window.SoundsApp) window.SoundsApp.onPageShow();
+  else if (window.SoundsApp?.onPageHide) window.SoundsApp.onPageHide();
   if (p === "dashboard" && window.DashboardApp) window.DashboardApp.onPageShow();
   else if (window.DashboardApp?.onPageHide) window.DashboardApp.onPageHide();
   if (p === "integrations" && window.IntegrationsApp) window.IntegrationsApp.onPageShow();
diff --git a/www/auth.js b/www/auth.js
index 7b14e97..07142d2 100644
--- a/www/auth.js
+++ b/www/auth.js
@@ -149,6 +149,7 @@
       dashboard: "dashboard",
       maps: "maps",
       missions: "missions",
+      sounds: "integrations",
       integrations: "integrations",
     };
     const resource = map[page];
diff --git a/www/i18n.js b/www/i18n.js
index 0b1883b..fd454a8 100644
--- a/www/i18n.js
+++ b/www/i18n.js
@@ -72,6 +72,7 @@
       "nav.dashboardsList": "Dashboards",
       "nav.missions": "Missions",
       "nav.maps": "Maps",
+      "nav.sounds": "Sounds",
       "nav.build-robot": "Build Robot",
       "nav.monitoring-log": "System log",
       "nav.integrations": "Tích hợp",
@@ -403,8 +404,94 @@
       "maps.editor.statusWorldIdle": "— m",
       "maps.editor.statusWorld": "X {x}, Y {y} m",
       "maps.editor.objectTypesNone": "Chưa chọn object-type",
+      "maps.editor.objectType.wall": "Walls",
+      "maps.editor.objectType.floor": "Floors",
+      "maps.editor.objectType.position": "Positions",
+      "maps.editor.objectType.forbidden": "Forbidden zones",
+      "maps.editor.objectType.preferred": "Preferred zones",
+      "maps.editor.objectType.unpreferred": "Unpreferred zones",
+      "maps.editor.objectType.speed": "Speed zones",
+      "maps.editor.objectType.sound": "Sound zones",
+      "maps.editor.objectType.directional": "Directional zones",
+      "maps.editor.objectType.directionalLine": "Directional lines",
+      "maps.editor.objectType.planner": "Planner zones",
+      "maps.editor.objectType.io": "I/O zones",
+      "maps.editor.filter.walls": "Walls",
+      "maps.editor.filter.floors": "Floors",
+      "maps.editor.filter.positions": "Positions",
+      "maps.editor.filter.forbidden": "Forbidden",
+      "maps.editor.filter.preferred": "Preferred",
+      "maps.editor.filter.unpreferred": "Unpreferred",
+      "maps.editor.filter.speed": "Speed",
+      "maps.editor.filter.sound": "Sound",
+      "maps.editor.tool.draw": "Vẽ — line hoặc polygon (walls, zones…)",
+      "maps.editor.tool.select": "Chọn object",
+      "maps.editor.tool.erase": "Tẩy object",
+      "maps.editor.tool.eraser": "Tẩy pixel — xóa noise trên floor plan (Walls/Floors layer)",
+      "maps.editor.tool.eraseShape": "Xóa line/shape đã vẽ",
+      "maps.editor.tool.eraseSelection": "Xóa vùng chọn — tẩy pixel trong khung",
+      "maps.editor.tool.confirmDraw": "Xác nhận hình vẽ",
+      "maps.editor.drawNeedMorePoints": "Cần thêm điểm trước khi xác nhận (wall ≥ 2, polygon ≥ 3).",
+      "maps.editor.position.title": "Position",
+      "maps.editor.position.name": "Tên",
+      "maps.editor.position.x": "X (m)",
+      "maps.editor.position.y": "Y (m)",
+      "maps.editor.position.yaw": "Hướng (°)",
+      "maps.editor.position.hint": "Click map và kéo để đặt hướng, rồi xác nhận.",
+      "maps.editor.position.invalid": "Nhập X, Y và hướng hợp lệ.",
+      "maps.editor.speed.title": "Speed zone",
+      "maps.editor.speed.limit": "Giới hạn tốc độ (m/s)",
+      "maps.editor.speed.hint": "Robot giảm tốc trong vùng này (0.1–1.5 m/s).",
+      "maps.editor.speed.invalid": "Nhập tốc độ hợp lệ (0.1–1.5 m/s).",
+      "maps.editor.sound.title": "Sound zone",
+      "maps.editor.sound.select": "Sound",
+      "maps.editor.sound.noSound": "— Chọn sound —",
+      "maps.editor.sound.manage": "Quản lý sounds tại Setup → Sounds",
+      "maps.editor.sound.invalid": "Chọn một sound.",
+      "maps.editor.directional.title": "Directional zone",
+      "maps.editor.directional.direction": "Hướng",
+      "maps.editor.directional.degOption": "{deg}°",
+      "maps.editor.directional.shapeHint": "Robot không được di chuyển ngược hướng mũi tên (bước 45°).",
+      "maps.editor.directional.lineWidth": "Độ rộng line (px)",
+      "maps.editor.directional.reversed": "Đảo hướng",
+      "maps.editor.directional.lineHint": "Hướng theo line từ điểm đầu đến điểm cuối.",
+      "maps.editor.directional.lineWidthInvalid": "Nhập độ rộng line hợp lệ (≥ 2 px).",
+      "maps.editor.planner.title": "Planner zone",
+      "maps.editor.planner.noLocalization": "No localization (chỉ encoder)",
+      "maps.editor.planner.lookAhead": "Look-ahead (thu hẹp field of view)",
+      "maps.editor.planner.ignoreObstacles": "Ignore obstacles",
+      "maps.editor.planner.pathDeviation": "Path deviation (m)",
+      "maps.editor.planner.pathTimeout": "Path timeout (s)",
+      "maps.editor.io.title": "I/O zone",
+      "maps.editor.io.module": "I/O module",
+      "maps.editor.io.plcRegister": "PLC register",
+      "maps.editor.io.plcValue": "Giá trị",
+      "maps.editor.io.plcMode": "PLC mode",
+      "maps.editor.io.plcModeSet": "Set",
+      "maps.editor.io.plcModeAdd": "Add",
+      "maps.editor.io.plcModeSubtract": "Subtract",
+      "maps.editor.io.hint": "Robot kích hoạt I/O khi vào vùng này.",
+      "maps.editor.io.moduleRequired": "Nhập tên I/O module.",
       "maps.menu.save": "Lưu map",
 
+      "sounds.title": "Sounds",
+      "sounds.subtitle": "Setup → Sounds — upload và quản lý âm thanh robot cho sound zones.",
+      "sounds.create": "Tạo sound",
+      "sounds.createTitle": "Tạo sound",
+      "sounds.editTitle": "Sửa sound",
+      "sounds.empty": "Chưa có sound. Tạo mới để dùng trong sound zones.",
+      "sounds.name": "Tên",
+      "sounds.description": "Mô tả",
+      "sounds.enabled": "Bật",
+      "sounds.file": "File âm thanh",
+      "sounds.noFile": "Chưa có file",
+      "sounds.upload": "Upload file…",
+      "sounds.play": "Phát",
+      "sounds.playFailed": "Không phát được file.",
+      "sounds.fileMeta": "{name} · {duration}",
+      "sounds.nameRequired": "Nhập tên sound.",
+      "sounds.deleteConfirm": "Xóa sound này?",
+
       "missions.title": "Missions",
       "missions.subtitle": "Setup → Missions — danh sách nhiệm vụ robot.",
       "missions.create": "Tạo mission",
@@ -592,6 +679,7 @@
       "nav.dashboardsList": "Dashboards",
       "nav.missions": "Missions",
       "nav.maps": "Maps",
+      "nav.sounds": "Sounds",
       "nav.build-robot": "Build Robot",
       "nav.monitoring-log": "System log",
       "nav.integrations": "Integrations",
@@ -923,8 +1011,94 @@
       "maps.editor.statusWorldIdle": "— m",
       "maps.editor.statusWorld": "X {x}, Y {y} m",
       "maps.editor.objectTypesNone": "No object-type selected",
+      "maps.editor.objectType.wall": "Walls",
+      "maps.editor.objectType.floor": "Floors",
+      "maps.editor.objectType.position": "Positions",
+      "maps.editor.objectType.forbidden": "Forbidden zones",
+      "maps.editor.objectType.preferred": "Preferred zones",
+      "maps.editor.objectType.unpreferred": "Unpreferred zones",
+      "maps.editor.objectType.speed": "Speed zones",
+      "maps.editor.objectType.sound": "Sound zones",
+      "maps.editor.objectType.directional": "Directional zones",
+      "maps.editor.objectType.directionalLine": "Directional lines",
+      "maps.editor.objectType.planner": "Planner zones",
+      "maps.editor.objectType.io": "I/O zones",
+      "maps.editor.filter.walls": "Walls",
+      "maps.editor.filter.floors": "Floors",
+      "maps.editor.filter.positions": "Positions",
+      "maps.editor.filter.forbidden": "Forbidden",
+      "maps.editor.filter.preferred": "Preferred",
+      "maps.editor.filter.unpreferred": "Unpreferred",
+      "maps.editor.filter.speed": "Speed",
+      "maps.editor.filter.sound": "Sound",
+      "maps.editor.tool.draw": "Draw — line or polygon (walls, zones…)",
+      "maps.editor.tool.select": "Select object",
+      "maps.editor.tool.erase": "Eraser",
+      "maps.editor.tool.eraser": "Pixel eraser — remove noise on floor plan (Walls/Floors layer)",
+      "maps.editor.tool.eraseShape": "Erase shape or line",
+      "maps.editor.tool.eraseSelection": "Erase by selection — clear pixels in rectangle",
+      "maps.editor.tool.confirmDraw": "Confirm shape",
+      "maps.editor.drawNeedMorePoints": "Add more points before confirming (wall ≥ 2, polygon ≥ 3).",
+      "maps.editor.position.title": "Position",
+      "maps.editor.position.name": "Name",
+      "maps.editor.position.x": "X (m)",
+      "maps.editor.position.y": "Y (m)",
+      "maps.editor.position.yaw": "Orientation (°)",
+      "maps.editor.position.hint": "Click map and drag to set orientation, then confirm.",
+      "maps.editor.position.invalid": "Enter valid X, Y and orientation.",
+      "maps.editor.speed.title": "Speed zone",
+      "maps.editor.speed.limit": "Speed limit (m/s)",
+      "maps.editor.speed.hint": "Robot slows to this speed inside the zone (0.1–1.5 m/s).",
+      "maps.editor.speed.invalid": "Enter a valid speed (0.1–1.5 m/s).",
+      "maps.editor.sound.title": "Sound zone",
+      "maps.editor.sound.select": "Sound",
+      "maps.editor.sound.noSound": "— Select sound —",
+      "maps.editor.sound.manage": "Manage sounds in Setup → Sounds",
+      "maps.editor.sound.invalid": "Select a sound.",
+      "maps.editor.directional.title": "Directional zone",
+      "maps.editor.directional.direction": "Direction",
+      "maps.editor.directional.degOption": "{deg}°",
+      "maps.editor.directional.shapeHint": "Robot cannot move opposite to the arrow (45° steps).",
+      "maps.editor.directional.lineWidth": "Line width (px)",
+      "maps.editor.directional.reversed": "Reverse direction",
+      "maps.editor.directional.lineHint": "Direction follows the line from first to last point.",
+      "maps.editor.directional.lineWidthInvalid": "Enter a valid line width (≥ 2 px).",
+      "maps.editor.planner.title": "Planner zone",
+      "maps.editor.planner.noLocalization": "No localization (encoders only)",
+      "maps.editor.planner.lookAhead": "Look-ahead (narrow field of view)",
+      "maps.editor.planner.ignoreObstacles": "Ignore obstacles",
+      "maps.editor.planner.pathDeviation": "Path deviation (m)",
+      "maps.editor.planner.pathTimeout": "Path timeout (s)",
+      "maps.editor.io.title": "I/O zone",
+      "maps.editor.io.module": "I/O module",
+      "maps.editor.io.plcRegister": "PLC register",
+      "maps.editor.io.plcValue": "Value",
+      "maps.editor.io.plcMode": "PLC mode",
+      "maps.editor.io.plcModeSet": "Set",
+      "maps.editor.io.plcModeAdd": "Add",
+      "maps.editor.io.plcModeSubtract": "Subtract",
+      "maps.editor.io.hint": "Robot activates I/O when entering the zone.",
+      "maps.editor.io.moduleRequired": "Enter an I/O module name.",
       "maps.menu.save": "Save map",
 
+      "sounds.title": "Sounds",
+      "sounds.subtitle": "Setup → Sounds — upload and manage robot sounds for sound zones.",
+      "sounds.create": "Create sound",
+      "sounds.createTitle": "Create sound",
+      "sounds.editTitle": "Edit sound",
+      "sounds.empty": "No sounds yet. Create one to use in sound zones.",
+      "sounds.name": "Name",
+      "sounds.description": "Description",
+      "sounds.enabled": "Enabled",
+      "sounds.file": "Audio file",
+      "sounds.noFile": "No file uploaded",
+      "sounds.upload": "Upload file…",
+      "sounds.play": "Play",
+      "sounds.playFailed": "Could not play file.",
+      "sounds.fileMeta": "{name} · {duration}",
+      "sounds.nameRequired": "Enter a sound name.",
+      "sounds.deleteConfirm": "Delete this sound?",
+
       "missions.title": "Missions",
       "missions.subtitle": "Setup → Missions — robot task list.",
       "missions.create": "Create mission",
diff --git a/www/index.html b/www/index.html
index fd54c09..8c5cdb6 100644
--- a/www/index.html
+++ b/www/index.html
@@ -863,6 +863,56 @@
             </div>
           </div>
 
+          <div class="page" id="pageSounds" data-page-content="sounds" hidden>
+            <div class="soundsPage">
+              <section class="card">
+                <div class="cardHeader">
+                  <div>
+                    <div class="cardTitle" data-i18n="sounds.title">Sounds</div>
+                    <div class="cardSub" data-i18n="sounds.subtitle">Setup → Sounds — upload and manage robot sounds for sound zones.</div>
+                  </div>
+                  <button id="soundCreateBtn" type="button" class="btn primary" data-i18n="sounds.create">Create sound</button>
+                </div>
+                <div class="cardBody">
+                  <div id="soundListEmpty" class="mutedNote" hidden data-i18n="sounds.empty">No sounds yet. Create one to use in sound zones.</div>
+                  <div id="soundList" class="missionList"></div>
+                </div>
+              </section>
+            </div>
+
+            <dialog id="soundEditDialog" class="mapsMirDialog">
+              <form id="soundEditForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" id="soundEditTitle" data-i18n="sounds.createTitle">Create sound</h2>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="sounds.name">Name</span>
+                  <input type="text" id="soundEditName" autocomplete="off" required />
+                </label>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="sounds.description">Description</span>
+                  <textarea id="soundEditDescription" rows="2"></textarea>
+                </label>
+                <label class="mapsMirField mapsMirField--checkbox">
+                  <input type="checkbox" id="soundEditEnabled" checked />
+                  <span data-i18n="sounds.enabled">Enabled</span>
+                </label>
+                <div class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="sounds.file">Audio file</span>
+                  <p id="soundEditFileMeta" class="mutedNote">—</p>
+                  <div class="mapsMirDialogFooter mapsMirDialogFooter--inline">
+                    <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="soundEditUploadBtn" data-i18n="sounds.upload">Upload file…</button>
+                    <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="soundEditPlayBtn" disabled data-i18n="sounds.play">Play</button>
+                  </div>
+                  <input type="file" id="soundEditUploadInput" accept="audio/*,.wav,.mp3,.ogg" hidden />
+                </div>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="soundEditCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="button" class="mapsMirBtn mapsMirBtn--danger" id="soundEditDeleteBtn" hidden data-i18n="common.delete">Delete</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+          </div>
+
           <div class="page" id="pageMaps" data-page-content="maps" hidden>
             <div id="mapsListView" class="mapsMirPage">
               <header class="mapsMirHeader">
@@ -993,7 +1043,7 @@
                 </button>
               </header>
 
-              <div class="mapEditorMappingBar" role="toolbar" data-i18n-aria="maps.editor.toolbarAria">
+              <div class="mapEditorMappingBar" id="mapEditorMappingBar" role="toolbar" data-i18n-aria="maps.editor.toolbarAria">
                 <button type="button" class="mapEditorMapTool" id="mapEditorSearchBtn" disabled data-i18n-title="maps.editor.tool.search" title="Search">
                   <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12.5 12.5L17 17" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
                 </button>
@@ -1010,9 +1060,119 @@
                   <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2.5v15M2.5 10h15" stroke="currentColor" stroke-width="1.2"/><path d="M10 2.5L8 5.5h4L10 2.5zM10 17.5l-2-3h4l-2 3zM2.5 10l3-2v4l-3-2zM17.5 10l-3-2v4l3-2z" fill="currentColor"/></svg>
                 </button>
                 <div class="mapEditorMappingBarSpacer" aria-hidden="true"></div>
-                <select class="mapEditorObjectSelect" id="mapEditorObjectSelect" disabled>
-                  <option value="" data-i18n="maps.editor.objectTypesNone">No object-type selected</option>
-                </select>
+                <div class="mapEditorObjectTypePicker" id="mapEditorObjectTypePicker">
+                  <button
+                    type="button"
+                    class="mapEditorObjectTypeBtn"
+                    id="mapEditorObjectTypeBtn"
+                    disabled
+                    aria-haspopup="listbox"
+                    aria-expanded="false"
+                    aria-controls="mapEditorObjectTypeMenu"
+                  >
+                    <span class="mapEditorObjectTypeIcon" id="mapEditorObjectTypeIcon" aria-hidden="true"></span>
+                    <span class="mapEditorObjectTypeLabel" id="mapEditorObjectTypeLabel" data-i18n="maps.editor.objectTypesNone">No object-type selected</span>
+                    <svg class="mapEditorObjectTypeChevron" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                  </button>
+                  <ul class="mapEditorObjectTypeMenu" id="mapEditorObjectTypeMenu" role="listbox" hidden>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.5 2"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectTypesNone">No object-type selected</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="wall" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--wall" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 14L15 4" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.wall">Walls</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="floor" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--floor" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.floor">Floors</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="position" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--position" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="4.5" cy="9" r="2.2" fill="currentColor"/><path d="M7 9h8M13 9l-2.5-2.2M13 9l-2.5 2.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.position">Positions</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="forbidden" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--forbidden" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.22" stroke="currentColor" stroke-width="1.5"/><path d="M5 13L13 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.forbidden">Forbidden zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="preferred" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--preferred" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.28" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.preferred">Preferred zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="unpreferred" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--unpreferred" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 2" stroke-linejoin="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.unpreferred">Unpreferred zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="speed" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--speed" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M6 11h6M9 8v3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.speed">Speed zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="sound" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--sound" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M6 10.5v-3h2l2.5-1.5v7L8 11.5H6z" fill="currentColor" fill-opacity="0.5"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.sound">Sound zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="directional" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--directional" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.16" stroke="currentColor" stroke-width="1.5"/><path d="M6 9h6M10 9l-2-2M10 9l-2 2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.directional">Directional zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="directional_line" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--directionalLine" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 14L15 4" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M11 4h4v4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.directionalLine">Directional lines</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="planner" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--planner" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.14" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/><circle cx="9" cy="9" r="2" fill="currentColor"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.planner">Planner zones</span>
+                    </li>
+                    <li class="mapEditorObjectTypeOption" role="option" data-value="io" tabindex="-1">
+                      <span class="mapEditorObjectTypeOptionIcon mapEditorObjectTypeOptionIcon--io" aria-hidden="true">
+                        <svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.12" stroke="currentColor" stroke-width="1.5"/><path d="M6.5 10h5M8 8v4M10 8v4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
+                      </span>
+                      <span data-i18n="maps.editor.objectType.io">I/O zones</span>
+                    </li>
+                  </ul>
+                </div>
+                <button type="button" class="mapEditorMapTool" id="mapEditorDrawBtn" data-tool="draw" disabled data-i18n-title="maps.editor.tool.draw" title="Draw">
+                  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.5 3.5l2 2-9 9H5.5v-2l9-9z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M12.5 5.5l2 2" stroke="currentColor" stroke-width="1.4"/></svg>
+                </button>
+                <button type="button" class="mapEditorMapTool" id="mapEditorSelectBtn" data-tool="select" disabled data-i18n-title="maps.editor.tool.select" title="Select">
+                  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 3l12 7-5.5 1.5L8 17 6.5 11.5 4 3z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
+                </button>
+                <button type="button" class="mapEditorMapTool" id="mapEditorEraserBtn" data-tool="eraser" disabled data-i18n-title="maps.editor.tool.eraser" title="Eraser">
+                  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 14h12M6.5 14L14 6.5l2.5 2.5L9 16.5H6.5V14z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
+                </button>
+                <button type="button" class="mapEditorMapTool" id="mapEditorEraseSelectionBtn" data-tool="eraseSelection" disabled data-i18n-title="maps.editor.tool.eraseSelection" title="Erase by selection">
+                  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><rect x="4" y="4" width="12" height="12" rx="1" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="3 2"/></svg>
+                </button>
+                <button type="button" class="mapEditorMapTool" id="mapEditorEraseShapeBtn" data-tool="eraseShape" disabled data-i18n-title="maps.editor.tool.eraseShape" title="Erase shape">
+                  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+                </button>
+                <button type="button" class="mapEditorMapTool" id="mapEditorConfirmDrawBtn" hidden disabled data-i18n-title="maps.editor.tool.confirmDraw" title="Confirm shape">
+                  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 10l3.5 3.5L15 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </button>
                 <button type="button" class="mapEditorMapTool" id="mapEditorCrosshairBtn" disabled data-i18n-title="maps.editor.tool.crosshair" title="Crosshair">
                   <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="6" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M10 4v12M4 10h12" stroke="currentColor" stroke-width="1.3"/></svg>
                 </button>
@@ -1050,6 +1210,7 @@
                         <div class="mapEditorSheetGrid" id="mapEditorSheetGrid" aria-hidden="true"></div>
                         <img id="mapEditorImage" class="mapEditorImageLoader" alt="" draggable="false" hidden />
                         <canvas id="mapEditorOccupancyCanvas" class="mapEditorOccupancyCanvas" hidden aria-hidden="true"></canvas>
+                        <svg id="mapEditorObjectsSvg" class="mapEditorObjectsSvg" xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true"></svg>
                         <div id="mapEditorOrigin" class="mapEditorOrigin" hidden aria-hidden="true">
                           <span class="mapEditorOriginAxis mapEditorOriginAxis--x" aria-hidden="true"></span>
                           <span class="mapEditorOriginAxis mapEditorOriginAxis--z" aria-hidden="true"></span>
@@ -1198,6 +1359,164 @@
               </form>
             </dialog>
 
+            <dialog id="mapEditorPositionDialog" class="mapsMirDialog">
+              <form id="mapEditorPositionForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.editor.position.title">Position</h2>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.editor.position.name">Name</span>
+                  <input type="text" id="mapPositionName" autocomplete="off" />
+                </label>
+                <div class="mapsMirFieldRow">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.position.x">X (m)</span>
+                    <input type="number" id="mapPositionX" step="any" required />
+                  </label>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.position.y">Y (m)</span>
+                    <input type="number" id="mapPositionY" step="any" required />
+                  </label>
+                </div>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.editor.position.yaw">Orientation (°)</span>
+                  <input type="number" id="mapPositionYaw" step="any" required />
+                </label>
+                <p class="mapsMirDialogHint" data-i18n="maps.editor.position.hint">Click map and drag to set orientation, then confirm.</p>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapPositionCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+
+            <dialog id="mapEditorSpeedDialog" class="mapsMirDialog">
+              <form id="mapEditorSpeedForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.editor.speed.title">Speed zone</h2>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.editor.speed.limit">Speed limit (m/s)</span>
+                  <input type="number" id="mapSpeedMps" min="0.1" max="1.5" step="0.05" value="0.8" required />
+                </label>
+                <p class="mapsMirDialogHint" data-i18n="maps.editor.speed.hint">Robot slows to this speed while inside the zone (0.1–1.5 m/s).</p>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapSpeedCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+
+            <dialog id="mapEditorSoundDialog" class="mapsMirDialog">
+              <form id="mapEditorSoundForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.editor.sound.title">Sound zone</h2>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.editor.sound.select">Sound</span>
+                  <select id="mapSoundZoneSelect" required></select>
+                </label>
+                <p class="mapsMirDialogHint">
+                  <button type="button" class="mapsMirLinkBtn" id="mapSoundManageLink" data-i18n="maps.editor.sound.manage">Manage sounds in Setup → Sounds</button>
+                </p>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapSoundCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+
+            <dialog id="mapEditorDirectionalDialog" class="mapsMirDialog">
+              <form id="mapEditorDirectionalForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.editor.directional.title">Directional zone</h2>
+                <div id="mapDirectionalShapePanel">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.directional.direction">Direction</span>
+                    <select id="mapDirectionalDeg"></select>
+                  </label>
+                  <p class="mapsMirDialogHint" data-i18n="maps.editor.directional.shapeHint">Robot cannot move opposite to the arrow (45° steps).</p>
+                </div>
+                <div id="mapDirectionalLinePanel" hidden>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.directional.lineWidth">Line width (px)</span>
+                    <input type="number" id="mapDirectionalLineWidth" min="2" max="48" step="1" value="8" />
+                  </label>
+                  <label class="mapsMirField mapsMirField--checkbox">
+                    <input type="checkbox" id="mapDirectionalReversed" />
+                    <span data-i18n="maps.editor.directional.reversed">Reverse direction</span>
+                  </label>
+                  <p class="mapsMirDialogHint" data-i18n="maps.editor.directional.lineHint">Direction follows line from first to last point.</p>
+                </div>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapDirectionalCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+
+            <dialog id="mapEditorPlannerDialog" class="mapsMirDialog">
+              <form id="mapEditorPlannerForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.editor.planner.title">Planner zone</h2>
+                <label class="mapsMirField mapsMirField--checkbox">
+                  <input type="checkbox" id="mapPlannerNoLocalization" />
+                  <span data-i18n="maps.editor.planner.noLocalization">No localization (encoders only)</span>
+                </label>
+                <label class="mapsMirField mapsMirField--checkbox">
+                  <input type="checkbox" id="mapPlannerLookAhead" />
+                  <span data-i18n="maps.editor.planner.lookAhead">Look-ahead (narrow field of view)</span>
+                </label>
+                <label class="mapsMirField mapsMirField--checkbox">
+                  <input type="checkbox" id="mapPlannerIgnoreObstacles" />
+                  <span data-i18n="maps.editor.planner.ignoreObstacles">Ignore obstacles</span>
+                </label>
+                <div class="mapsMirFieldRow">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.planner.pathDeviation">Path deviation (m)</span>
+                    <input type="number" id="mapPlannerPathDeviation" min="0" max="3" step="0.1" value="0.5" />
+                  </label>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.planner.pathTimeout">Path timeout (s)</span>
+                    <input type="number" id="mapPlannerPathTimeout" min="0" step="1" value="30" />
+                  </label>
+                </div>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapPlannerCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+
+            <dialog id="mapEditorIoDialog" class="mapsMirDialog">
+              <form id="mapEditorIoForm" method="dialog">
+                <h2 class="mapsMirDialogTitle" data-i18n="maps.editor.io.title">I/O zone</h2>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.editor.io.module">I/O module</span>
+                  <input type="text" id="mapIoModule" list="mapIoModuleList" autocomplete="off" required />
+                  <datalist id="mapIoModuleList">
+                    <option value="GPIO module 1"></option>
+                    <option value="PLC I/O 1"></option>
+                  </datalist>
+                </label>
+                <div class="mapsMirFieldRow">
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.io.plcRegister">PLC register</span>
+                    <input type="number" id="mapIoPlcRegister" step="1" />
+                  </label>
+                  <label class="mapsMirField">
+                    <span class="mapsMirFieldLabel" data-i18n="maps.editor.io.plcValue">Value</span>
+                    <input type="number" id="mapIoPlcValue" step="1" />
+                  </label>
+                </div>
+                <label class="mapsMirField">
+                  <span class="mapsMirFieldLabel" data-i18n="maps.editor.io.plcMode">PLC mode</span>
+                  <select id="mapIoPlcMode">
+                    <option value="set" data-i18n="maps.editor.io.plcModeSet">Set</option>
+                    <option value="add" data-i18n="maps.editor.io.plcModeAdd">Add</option>
+                    <option value="subtract" data-i18n="maps.editor.io.plcModeSubtract">Subtract</option>
+                  </select>
+                </label>
+                <p class="mapsMirDialogHint" data-i18n="maps.editor.io.hint">Robot activates I/O when entering the zone.</p>
+                <div class="mapsMirDialogFooter">
+                  <button type="button" class="mapsMirBtn mapsMirBtn--outline" id="mapIoCancelBtn" data-i18n="common.cancel">Cancel</button>
+                  <button type="submit" class="mapsMirBtn mapsMirBtn--primary" data-i18n="common.save">Save</button>
+                </div>
+              </form>
+            </dialog>
+
             <dialog id="mapUploadConfirmDialog" class="mapsMirDialog">
               <div class="mapsMirDialogPanel">
                 <h2 class="mapsMirDialogTitle" data-i18n="maps.uploadConfirm.title">Overwrite map?</h2>
@@ -1729,8 +2048,14 @@ GET /api/v2.0.0/status</pre>
     <script src="/missions.js"></script>
     <script src="/map-geo.js"></script>
     <script src="/map-occupancy-canvas.js"></script>
+    <script src="/map-occupancy-edit.js"></script>
+    <script src="/map-planner-zones.js"></script>
+    <script src="/map-behavior-zones.js"></script>
+    <script src="/map-advanced-zones.js"></script>
+    <script src="/map-objects.js"></script>
     <script src="/map-yaml.js"></script>
     <script src="/maps.js"></script>
+    <script src="/sounds.js"></script>
     <script src="/map-editor.js"></script>
     <script src="/topbar.js"></script>
     <script src="/dashboard.js"></script>
diff --git a/www/map-advanced-zones.js b/www/map-advanced-zones.js
new file mode 100644
index 0000000..ac5378b
--- /dev/null
+++ b/www/map-advanced-zones.js
@@ -0,0 +1,233 @@
+(() => {
+  /**
+   * Runtime hooks for Directional / Planner settings / I/O map zones (MiR §4.2.6.5, .10, .11).
+   */
+  const TYPES = {
+    directional: "directional",
+    directional_line: "directional_line",
+    planner: "planner",
+    io: "io",
+  };
+
+  const ADVANCED_TYPES = new Set([
+    TYPES.directional,
+    TYPES.directional_line,
+    TYPES.planner,
+    TYPES.io,
+  ]);
+
+  const DIRECTION_DEGREES = [0, 45, 90, 135, 180, 225, 270, 315];
+
+  const DEFAULT_PLANNER = {
+    no_localization: false,
+    look_ahead: false,
+    path_deviation: 0.5,
+    path_timeout: 30,
+    ignore_obstacles: false,
+  };
+
+  const DEFAULT_IO = {
+    io_module: "",
+    plc_register: null,
+    plc_value: null,
+    plc_mode: "set",
+  };
+
+  function pointInPolygon(px, py, points) {
+    return window.MapPlannerZones?.pointInPolygon(px, py, points) || false;
+  }
+
+  function normalizeDirectionDeg(value) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return 0;
+    let deg = ((Math.round(n / 45) * 45) % 360 + 360) % 360;
+    if (!DIRECTION_DEGREES.includes(deg)) {
+      deg = DIRECTION_DEGREES.reduce((best, d) =>
+        Math.abs(d - deg) < Math.abs(best - deg) ? d : best,
+      );
+    }
+    return deg;
+  }
+
+  function clampPathDeviation(value) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return DEFAULT_PLANNER.path_deviation;
+    return Math.min(3, Math.max(0, n));
+  }
+
+  function clampPathTimeout(value) {
+    const n = Number(value);
+    if (!Number.isFinite(n) || n < 0) return DEFAULT_PLANNER.path_timeout;
+    return n;
+  }
+
+  function normalizePlannerSettings(raw = {}) {
+    return {
+      no_localization: !!raw.no_localization,
+      look_ahead: !!raw.look_ahead,
+      path_deviation: clampPathDeviation(raw.path_deviation),
+      path_timeout: clampPathTimeout(raw.path_timeout),
+      ignore_obstacles: !!raw.ignore_obstacles,
+    };
+  }
+
+  function normalizeIoSettings(raw = {}) {
+    const mode = raw.plc_mode;
+    return {
+      io_module: typeof raw.io_module === "string" ? raw.io_module : "",
+      plc_register:
+        raw.plc_register == null || raw.plc_register === ""
+          ? null
+          : Number(raw.plc_register),
+      plc_value:
+        raw.plc_value == null || raw.plc_value === "" ? null : Number(raw.plc_value),
+      plc_mode: mode === "add" || mode === "subtract" ? mode : "set",
+    };
+  }
+
+  function isAdvancedZoneType(type) {
+    return ADVANCED_TYPES.has(type);
+  }
+
+  function isDirectionalType(type) {
+    return type === TYPES.directional || type === TYPES.directional_line;
+  }
+
+  function filterAdvancedZones(zones) {
+    return (Array.isArray(zones) ? zones : []).filter((z) => isAdvancedZoneType(z?.type));
+  }
+
+  function pointNearPolyline(px, py, points, halfWidth = 8) {
+    if (!points?.length || points.length < 2) return false;
+    for (let i = 0; i < points.length - 1; i++) {
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const dx = p2.x - p1.x;
+      const dy = p2.y - p1.y;
+      const lenSq = dx * dx + dy * dy;
+      let dist;
+      if (lenSq === 0) dist = Math.hypot(px - p1.x, py - p1.y);
+      else {
+        let t = ((px - p1.x) * dx + (py - p1.y) * dy) / lenSq;
+        t = Math.max(0, Math.min(1, t));
+        dist = Math.hypot(px - (p1.x + t * dx), py - (p1.y + t * dy));
+      }
+      if (dist <= halfWidth) return true;
+    }
+    return false;
+  }
+
+  function zonesAtPoint(zones, px, py) {
+    const list = Array.isArray(zones) ? zones : [];
+    const hits = [];
+    for (let i = list.length - 1; i >= 0; i--) {
+      const z = list[i];
+      if (!isAdvancedZoneType(z?.type) || !z.points?.length) continue;
+      if (z.type === TYPES.directional_line) {
+        const width = Number(z.line_width) || 8;
+        if (pointNearPolyline(px, py, z.points, width / 2 + 4)) hits.push(z);
+        continue;
+      }
+      if (pointInPolygon(px, py, z.points)) hits.push(z);
+    }
+    return hits;
+  }
+
+  function lineDirectionDeg(zone) {
+    if (!zone?.points?.length || zone.points.length < 2) return 0;
+    const p0 = zone.points[0];
+    const p1 = zone.points[zone.points.length - 1];
+    let deg = (Math.atan2(-(p1.y - p0.y), p1.x - p0.x) * 180) / Math.PI;
+    if (zone.reversed) deg = (deg + 180) % 360;
+    return normalizeDirectionDeg(deg);
+  }
+
+  function zoneDirectionDeg(zone) {
+    if (!zone) return 0;
+    if (zone.type === TYPES.directional_line) return lineDirectionDeg(zone);
+    if (zone.type === TYPES.directional) return normalizeDirectionDeg(zone.direction_deg);
+    return 0;
+  }
+
+  /** Heading radians (map image coords) allowed if dot >= 0 with zone arrow. */
+  function isHeadingAllowed(zone, headingRad) {
+    const arrowRad = (-zoneDirectionDeg(zone) * Math.PI) / 180;
+    const hx = Math.cos(headingRad);
+    const hy = Math.sin(headingRad);
+    const ax = Math.cos(arrowRad);
+    const ay = Math.sin(arrowRad);
+    return hx * ax + hy * ay >= 0;
+  }
+
+  function getDirectionalConstraint(zones, px, py, headingRad) {
+    const hits = zonesAtPoint(zones, px, py).filter(isDirectionalType);
+    const zone = hits[0];
+    if (!zone) return null;
+    return {
+      zone,
+      direction_deg: zoneDirectionDeg(zone),
+      allowed: isHeadingAllowed(zone, headingRad),
+    };
+  }
+
+  function getPlannerSettings(zones, px, py) {
+    const zone = zonesAtPoint(zones, px, py).find((z) => z.type === TYPES.planner);
+    if (!zone) return null;
+    return {
+      zone,
+      settings: normalizePlannerSettings(zone),
+    };
+  }
+
+  function getIoActivation(zones, px, py) {
+    const zone = zonesAtPoint(zones, px, py).find((z) => z.type === TYPES.io);
+    if (!zone) return null;
+    return {
+      zone,
+      settings: normalizeIoSettings(zone),
+    };
+  }
+
+  function classifyPoint(zones, px, py, headingRad = null) {
+    const hits = zonesAtPoint(zones, px, py);
+    const directional = hits.find(isDirectionalType);
+    const planner = hits.find((z) => z.type === TYPES.planner);
+    const io = hits.find((z) => z.type === TYPES.io);
+    const out = {
+      directional: directional || null,
+      direction_deg: directional ? zoneDirectionDeg(directional) : null,
+      planner: planner || null,
+      planner_settings: planner ? normalizePlannerSettings(planner) : null,
+      io: io || null,
+      io_settings: io ? normalizeIoSettings(io) : null,
+      zones: hits,
+    };
+    if (directional && headingRad != null) {
+      out.heading_allowed = isHeadingAllowed(directional, headingRad);
+    }
+    return out;
+  }
+
+  window.MapAdvancedZones = {
+    TYPES,
+    ADVANCED_TYPES,
+    DIRECTION_DEGREES,
+    DEFAULT_PLANNER,
+    DEFAULT_IO,
+    normalizeDirectionDeg,
+    normalizePlannerSettings,
+    normalizeIoSettings,
+    clampPathDeviation,
+    clampPathTimeout,
+    isAdvancedZoneType,
+    isDirectionalType,
+    filterAdvancedZones,
+    zonesAtPoint,
+    zoneDirectionDeg,
+    isHeadingAllowed,
+    getDirectionalConstraint,
+    getPlannerSettings,
+    getIoActivation,
+    classifyPoint,
+  };
+})();
diff --git a/www/map-behavior-zones.js b/www/map-behavior-zones.js
new file mode 100644
index 0000000..64ff7c3
--- /dev/null
+++ b/www/map-behavior-zones.js
@@ -0,0 +1,89 @@
+(() => {
+  /**
+   * Runtime hooks for Speed / Sound map zones (MiR §4.2.6.8–9).
+   * Vector overlay only — consumed by motion controller / mission runner.
+   */
+  const TYPES = {
+    speed: "speed",
+    sound: "sound",
+  };
+
+  const BEHAVIOR_TYPES = new Set([TYPES.speed, TYPES.sound]);
+
+  const SPEED_MIN = 0.1;
+  const SPEED_MAX = 1.5;
+  const DEFAULT_SPEED_MPS = 0.8;
+
+  function pointInPolygon(px, py, points) {
+    return window.MapPlannerZones?.pointInPolygon(px, py, points) || false;
+  }
+
+  function clampSpeed(value) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return DEFAULT_SPEED_MPS;
+    return Math.min(SPEED_MAX, Math.max(SPEED_MIN, n));
+  }
+
+  function isBehaviorZoneType(type) {
+    return BEHAVIOR_TYPES.has(type);
+  }
+
+  function filterBehaviorZones(zones) {
+    return (Array.isArray(zones) ? zones : []).filter((z) => isBehaviorZoneType(z?.type));
+  }
+
+  /** Topmost behavior zones containing image pixel (newest wins for overlaps). */
+  function zonesAtPoint(zones, px, py) {
+    const list = Array.isArray(zones) ? zones : [];
+    const hits = [];
+    for (let i = list.length - 1; i >= 0; i--) {
+      const z = list[i];
+      if (!isBehaviorZoneType(z?.type) || !z.points?.length) continue;
+      if (pointInPolygon(px, py, z.points)) hits.push(z);
+    }
+    return hits;
+  }
+
+  function getSpeedLimit(zones, px, py) {
+    const hit = zonesAtPoint(zones, px, py).find((z) => z.type === TYPES.speed);
+    if (!hit) return null;
+    return clampSpeed(hit.speed_mps);
+  }
+
+  function getSoundAtPoint(zones, px, py) {
+    const hit = zonesAtPoint(zones, px, py).find((z) => z.type === TYPES.sound);
+    if (!hit?.sound_id) return null;
+    return {
+      sound_id: hit.sound_id,
+      zone_id: hit.id,
+    };
+  }
+
+  function classifyPoint(zones, px, py) {
+    const hits = zonesAtPoint(zones, px, py);
+    const speedZone = hits.find((z) => z.type === TYPES.speed);
+    const soundZone = hits.find((z) => z.type === TYPES.sound);
+    return {
+      speed_mps: speedZone ? clampSpeed(speedZone.speed_mps) : null,
+      sound_id: soundZone?.sound_id || null,
+      speed_zone: speedZone || null,
+      sound_zone: soundZone || null,
+      zones: hits,
+    };
+  }
+
+  window.MapBehaviorZones = {
+    TYPES,
+    BEHAVIOR_TYPES,
+    SPEED_MIN,
+    SPEED_MAX,
+    DEFAULT_SPEED_MPS,
+    clampSpeed,
+    isBehaviorZoneType,
+    filterBehaviorZones,
+    zonesAtPoint,
+    getSpeedLimit,
+    getSoundAtPoint,
+    classifyPoint,
+  };
+})();
diff --git a/www/map-editor.js b/www/map-editor.js
index 2993c03..624ffb7 100644
--- a/www/map-editor.js
+++ b/www/map-editor.js
@@ -3,6 +3,11 @@
   const t = (key, vars) => window.I18n?.t(key, vars) ?? key;
   const Geo = () => window.MapGeo;
   const Occ = () => window.MapOccupancyCanvas;
+  const OccEdit = () => window.MapOccupancyEdit;
+  const Objects = () => window.MapObjects;
+  const Planner = () => window.MapPlannerZones;
+  const Behavior = () => window.MapBehaviorZones;
+  const Advanced = () => window.MapAdvancedZones;
 
   const state = {
     mapId: null,
@@ -11,6 +16,40 @@
     readOnly: false,
     dirty: false,
     activeTool: "pan",
+    /** Selected object type for MiR-style zones (wall | floor | position). */
+    objectType: "",
+    /** Saved zones — persisted to database via map.zones on save. */
+    zones: [],
+    /** In-progress draft: shape (wall/floor) or position placement. */
+    draft: null,
+    selectedZoneId: null,
+    undoStack: [],
+    /** Grayscale floor-plan raster (map_server PNG) was modified. */
+    rasterDirty: false,
+    /** Base scan layer edited by eraser (map_base.png). */
+    baseDirty: false,
+    /** Wall/floor zone ids already baked into composite — hide SVG unless selected. */
+    bakedZoneIds: new Set(),
+    /** Active brush stroke for pixel eraser. */
+    eraserStroke: null,
+    /** Dragging a wall/floor vertex in Select mode. */
+    vertexDrag: null,
+    /** Dragging erase-by-selection rectangle. */
+    selectionDrag: null,
+    /** Live selection rectangle (image pixels). */
+    selectionRect: null,
+    /** Placing a position: click anchor + drag for yaw. */
+    positionDrag: null,
+    /** Pending position dialog payload. */
+    pendingPosition: null,
+    /** Pending speed/sound zone dialog payload. */
+    pendingBehavior: null,
+    /** Pending directional / planner / I/O zone dialog payload. */
+    pendingAdvanced: null,
+    /** Cached sounds for sound-zone picker. */
+    soundsCache: [],
+    /** Suppress click after pointer drag. */
+    pointerMoved: false,
     /** Layer 1 — view space (screen pan/zoom only). */
     view: Geo()?.createView(1, 0, 0) || { scale: 1, panX: 0, panY: 0 },
     panning: null,
@@ -32,6 +71,13 @@
   const gridEl = el("mapEditorSheetGrid");
   const imageEl = el("mapEditorImage");
   const occupancyCanvasEl = el("mapEditorOccupancyCanvas");
+  const objectsSvgEl = el("mapEditorObjectsSvg");
+  const objectTypeBtnEl = el("mapEditorObjectTypeBtn");
+  const objectTypeIconEl = el("mapEditorObjectTypeIcon");
+  const objectTypeLabelEl = el("mapEditorObjectTypeLabel");
+  const objectTypeMenuEl = el("mapEditorObjectTypeMenu");
+  const objectTypeOptionEls = () =>
+    objectTypeMenuEl?.querySelectorAll(".mapEditorObjectTypeOption") || [];
   const originEl = el("mapEditorOrigin");
   const originHitEl = el("mapEditorOriginHit");
   const originLabelEl = el("mapEditorOriginLabel");
@@ -47,6 +93,75 @@
   const uploadConfirmDialogEl = el("mapUploadConfirmDialog");
   const uploadMetaDialogEl = el("mapUploadMetaDialog");
   const uploadYamlInputEl = el("mapUploadYamlInput");
+  const positionDialogEl = el("mapEditorPositionDialog");
+  const positionFormEl = el("mapEditorPositionForm");
+  const positionFields = {
+    name: el("mapPositionName"),
+    x: el("mapPositionX"),
+    y: el("mapPositionY"),
+    yaw: el("mapPositionYaw"),
+  };
+  const speedDialogEl = el("mapEditorSpeedDialog");
+  const speedFormEl = el("mapEditorSpeedForm");
+  const speedFields = {
+    speed: el("mapSpeedMps"),
+  };
+  const soundDialogEl = el("mapEditorSoundDialog");
+  const soundFormEl = el("mapEditorSoundForm");
+  const soundFields = {
+    soundId: el("mapSoundZoneSelect"),
+    manageLink: el("mapSoundManageLink"),
+  };
+  const directionalDialogEl = el("mapEditorDirectionalDialog");
+  const directionalFormEl = el("mapEditorDirectionalForm");
+  const directionalFields = {
+    shapePanel: el("mapDirectionalShapePanel"),
+    linePanel: el("mapDirectionalLinePanel"),
+    direction: el("mapDirectionalDeg"),
+    reversed: el("mapDirectionalReversed"),
+    lineWidth: el("mapDirectionalLineWidth"),
+  };
+  const plannerDialogEl = el("mapEditorPlannerDialog");
+  const plannerFormEl = el("mapEditorPlannerForm");
+  const plannerFields = {
+    noLocalization: el("mapPlannerNoLocalization"),
+    lookAhead: el("mapPlannerLookAhead"),
+    ignoreObstacles: el("mapPlannerIgnoreObstacles"),
+    pathDeviation: el("mapPlannerPathDeviation"),
+    pathTimeout: el("mapPlannerPathTimeout"),
+  };
+  const ioDialogEl = el("mapEditorIoDialog");
+  const ioFormEl = el("mapEditorIoForm");
+  const ioFields = {
+    module: el("mapIoModule"),
+    plcRegister: el("mapIoPlcRegister"),
+    plcValue: el("mapIoPlcValue"),
+    plcMode: el("mapIoPlcMode"),
+  };
+
+  /** Off-screen base scan layer (map_base.png — eraser edits this). */
+  let baseCanvasEl = null;
+  function getBaseCanvas() {
+    if (!baseCanvasEl) {
+      baseCanvasEl = document.createElement("canvas");
+      baseCanvasEl.className = "mapEditorBaseCanvas";
+      baseCanvasEl.hidden = true;
+      baseCanvasEl.setAttribute("aria-hidden", "true");
+    }
+    return baseCanvasEl;
+  }
+
+  /** Off-screen composite = rebake(base + zones). */
+  let sourceCanvasEl = null;
+  function getSourceCanvas() {
+    if (!sourceCanvasEl) {
+      sourceCanvasEl = document.createElement("canvas");
+      sourceCanvasEl.className = "mapEditorSourceCanvas";
+      sourceCanvasEl.hidden = true;
+      sourceCanvasEl.setAttribute("aria-hidden", "true");
+    }
+    return sourceCanvasEl;
+  }
 
   const uploadMetaFields = {
     resolution: el("mapUploadResolution"),
@@ -90,6 +205,12 @@
     return `/api/maps/${encodeURIComponent(map.id)}/image?t=${encodeURIComponent(map.updated_at || "")}`;
   }
 
+  /** Base scan layer for editor rebake (map_base.png). */
+  function mapBaseImageUrl(map) {
+    if (!map?.id || !map.image_file) return null;
+    return `/api/maps/${encodeURIComponent(map.id)}/image/base?t=${encodeURIComponent(map.updated_at || "")}`;
+  }
+
   function viewportSize() {
     const rect = viewportEl?.getBoundingClientRect();
     return { width: rect?.width || 1, height: rect?.height || 1 };
@@ -134,15 +255,47 @@
     occupancyCanvasEl.setAttribute("aria-hidden", visible ? "false" : "true");
   }
 
-  /** Paint RViz-style occupancy colors from loaded PNG (hidden loader img). */
+  /** Load base scan, rebake composite (base + zone layers), paint display. */
   function paintOccupancyFromImage() {
     const occ = Occ();
     if (!occ || !occupancyCanvasEl || !imageEl?.naturalWidth) return false;
-    const ok = occ.renderFromImage(occupancyCanvasEl, imageEl, mapRenderMeta());
+    initBaseFromImage();
+    const ok = refreshDisplayFromSource();
     setOccupancyCanvasVisible(ok);
     return ok;
   }
 
+  function initBaseFromImage() {
+    const edit = OccEdit();
+    if (!edit || !imageEl?.naturalWidth) return false;
+    const ok = edit.initSourceFromImage(getBaseCanvas(), imageEl);
+    if (!ok) return false;
+    state.baseDirty = false;
+    rebakeComposite();
+    return true;
+  }
+
+  function floorPlanZoneIds() {
+    const obj = Objects();
+    return new Set(
+      state.zones.filter((z) => obj?.isFloorPlanType(z.type)).map((z) => z.id),
+    );
+  }
+
+  function rebakeComposite() {
+    const edit = OccEdit();
+    if (!edit?.rebakeComposite(getBaseCanvas(), getSourceCanvas(), state.zones)) return false;
+    state.bakedZoneIds = floorPlanZoneIds();
+    refreshDisplayFromSource();
+    return true;
+  }
+
+  function refreshDisplayFromSource() {
+    const edit = OccEdit();
+    if (!edit || !occupancyCanvasEl || !getSourceCanvas().width) return false;
+    return edit.renderDisplayFromSource(occupancyCanvasEl, getSourceCanvas(), mapRenderMeta(), Occ());
+  }
+
   /**
    * Paint live occupancy grid (record/stream — roadmap step 2+).
    * @param {{ width: number, height: number, data: number[]|Int8Array|string }} grid
@@ -171,15 +324,1025 @@
     if (!canvasWrapEl) return;
     canvasWrapEl.classList.toggle("is-pan-tool", state.activeTool === "pan" && !state.panning);
     canvasWrapEl.classList.toggle("is-panning", !!state.panning);
+    canvasWrapEl.classList.toggle(
+      "is-draw-tool",
+      state.activeTool === "draw" ||
+        state.activeTool === "select" ||
+        state.activeTool === "eraseShape" ||
+        state.activeTool === "eraseSelection",
+    );
+    canvasWrapEl.classList.toggle("is-eraser-tool", state.activeTool === "eraser");
+    canvasWrapEl.classList.toggle("is-erase-selection-tool", state.activeTool === "eraseSelection");
+  }
+
+  function isInteractionBlocked() {
+    return !!(
+      state.draft ||
+      state.eraserStroke ||
+      state.vertexDrag ||
+      state.selectionDrag ||
+      state.positionDrag
+    );
+  }
+
+  function clearTransientDrag() {
+    state.vertexDrag = null;
+    state.selectionDrag = null;
+    state.selectionRect = null;
+    state.positionDrag = null;
+    state.pointerMoved = false;
   }
 
   function setActiveTool(tool) {
-    if (tool !== "pan") return;
+    const allowed = ["pan", "draw", "select", "eraser", "eraseShape", "eraseSelection"];
+    if (!allowed.includes(tool)) return;
+    if (tool !== "pan" && !state.objectType) return;
+    if (tool !== "draw") cancelDraft();
+    state.eraserStroke = null;
+    clearTransientDrag();
     state.activeTool = tool;
     toolBtnEls().forEach((btn) => {
       btn.classList.toggle("is-active", btn.dataset.tool === tool);
     });
     updateCanvasCursor();
+    renderObjects();
+  }
+
+  function syncZonesFromMap() {
+    state.zones = Objects()?.parseZones(state.map?.zones) || [];
+    state.undoStack = [];
+    state.draft = null;
+    state.selectedZoneId = null;
+    state.eraserStroke = null;
+    if (getBaseCanvas().width) {
+      rebakeComposite();
+    } else {
+      state.bakedZoneIds = floorPlanZoneIds();
+    }
+    renderObjects();
+    updateUndoUi();
+  }
+
+  function pushUndo() {
+    const edit = OccEdit();
+    state.undoStack.push({
+      zones: JSON.parse(JSON.stringify(state.zones)),
+      baseRaster: edit?.cloneRaster(getBaseCanvas()),
+      bakedIds: [...state.bakedZoneIds],
+    });
+    if (state.undoStack.length > 30) state.undoStack.shift();
+    updateUndoUi();
+  }
+
+  function updateUndoUi() {
+    const blocked = isInteractionBlocked();
+    el("mapEditorUndoBtn")?.toggleAttribute(
+      "disabled",
+      !state.undoStack.length || state.readOnly || blocked,
+    );
+  }
+
+  function undoZones() {
+    if (!state.undoStack.length || isInteractionBlocked()) return;
+    const snap = state.undoStack.pop();
+    state.zones = snap.zones;
+    state.bakedZoneIds = new Set(snap.bakedIds || []);
+    state.draft = null;
+    state.selectedZoneId = null;
+    OccEdit()?.restoreRaster(getBaseCanvas(), snap.baseRaster);
+    rebakeComposite();
+    renderObjects();
+    setDirty(true);
+    state.rasterDirty = true;
+    state.baseDirty = true;
+    updateUndoUi();
+  }
+
+  function mapMetaForEditor() {
+    return mapMetaForOriginDisplay() || state.map || {};
+  }
+
+  function renderObjects() {
+    const obj = Objects();
+    if (!objectsSvgEl || !obj) return;
+    const has = hasFloorPlan();
+    const { width, height } = floorPlanSize();
+    if (!has || !width) {
+      objectsSvgEl.hidden = true;
+      objectsSvgEl.setAttribute("aria-hidden", "true");
+      return;
+    }
+    objectsSvgEl.hidden = false;
+    objectsSvgEl.setAttribute("aria-hidden", "false");
+    objectsSvgEl.setAttribute("width", String(width));
+    objectsSvgEl.setAttribute("height", String(height));
+    objectsSvgEl.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    const visibleZones = state.zones.filter(
+      (z) =>
+        !obj.isFloorPlanType(z.type) ||
+        !state.bakedZoneIds.has(z.id) ||
+        z.id === state.selectedZoneId,
+    );
+    obj.render(objectsSvgEl, visibleZones, {
+      mapMeta: mapMetaForEditor(),
+      imageWidth: width,
+      imageHeight: height,
+      selectedId: state.selectedZoneId,
+      showVertices: state.activeTool === "select",
+      draft: state.draft,
+      selectionRect: state.selectionRect,
+    });
+  }
+
+  function imagePointFromEvent(evt) {
+    const geo = Geo();
+    const { width, height } = floorPlanSize();
+    const rect = sheetEl?.getBoundingClientRect();
+    return geo?.clientToImage(evt.clientX, evt.clientY, rect, width, height);
+  }
+
+  function removeZone(id) {
+    const obj = Objects();
+    const zone = state.zones.find((z) => z.id === id);
+    pushUndo();
+    state.zones = state.zones.filter((z) => z.id !== id);
+    if (state.selectedZoneId === id) state.selectedZoneId = null;
+    if (obj?.isFloorPlanType(zone?.type)) {
+      rebakeComposite();
+      state.rasterDirty = true;
+    }
+    renderObjects();
+    setDirty(true);
+  }
+
+  function commitDraft() {
+    const obj = Objects();
+    if (!state.draft || state.draft.kind !== "shape" || !obj) return false;
+    const extra = {};
+    if (state.draft.type === obj.TYPES.speed) {
+      extra.speed_mps = Behavior()?.DEFAULT_SPEED_MPS ?? 0.8;
+    }
+    if (state.draft.type === obj.TYPES.directional) {
+      extra.direction_deg = 0;
+    }
+    if (state.draft.type === obj.TYPES.directional_line) {
+      extra.line_width = 8;
+    }
+    if (state.draft.type === obj.TYPES.planner) {
+      Object.assign(extra, Advanced()?.DEFAULT_PLANNER || {});
+    }
+    if (state.draft.type === obj.TYPES.io) {
+      extra.io_module = "";
+    }
+    const zone = obj.createZone(state.draft.type, state.draft.points, extra);
+    if (!zone) return false;
+    pushUndo();
+    state.zones = [...state.zones, zone];
+    state.draft = null;
+    if (obj.isFloorPlanType(zone.type)) {
+      rebakeComposite();
+      state.rasterDirty = true;
+    }
+    renderObjects();
+    setDirty(true);
+    updateDraftUi();
+    updateUndoUi();
+    if (obj.isBehaviorZoneType(zone.type)) {
+      state.selectedZoneId = zone.id;
+      renderObjects();
+      openBehaviorDialog(zone.id, "create");
+    }
+    if (obj.isAdvancedZoneType(zone.type)) {
+      state.selectedZoneId = zone.id;
+      renderObjects();
+      openAdvancedDialog(zone.id, "create");
+    }
+    return true;
+  }
+
+  function cancelDraft() {
+    state.draft = null;
+    state.positionDrag = null;
+    updateDraftUi();
+    updateUndoUi();
+    renderObjects();
+  }
+
+  function updateDraftUi() {
+    const obj = Objects();
+    const shapeDraft = state.draft?.kind === "shape" ? state.draft : null;
+    const canConfirm =
+      shapeDraft && obj && shapeDraft.points.length >= obj.minPoints(shapeDraft.type);
+    const confirmBtn = el("mapEditorConfirmDrawBtn");
+    if (confirmBtn) {
+      confirmBtn.hidden = !shapeDraft;
+      confirmBtn.toggleAttribute("disabled", !canConfirm || state.readOnly);
+    }
+  }
+
+  function objectTypeLabelKey(type) {
+    if (type === "wall") return "maps.editor.objectType.wall";
+    if (type === "floor") return "maps.editor.objectType.floor";
+    if (type === "position") return "maps.editor.objectType.position";
+    if (type === "forbidden") return "maps.editor.objectType.forbidden";
+    if (type === "preferred") return "maps.editor.objectType.preferred";
+    if (type === "unpreferred") return "maps.editor.objectType.unpreferred";
+    if (type === "speed") return "maps.editor.objectType.speed";
+    if (type === "sound") return "maps.editor.objectType.sound";
+    if (type === "directional") return "maps.editor.objectType.directional";
+    if (type === "directional_line") return "maps.editor.objectType.directionalLine";
+    if (type === "planner") return "maps.editor.objectType.planner";
+    if (type === "io") return "maps.editor.objectType.io";
+    return "maps.editor.objectTypesNone";
+  }
+
+  function objectTypeIconMarkup(type) {
+    if (type === "wall") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 14L15 4" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>`;
+    }
+    if (type === "floor") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+    }
+    if (type === "position") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><circle cx="4.5" cy="9" r="2.2" fill="currentColor"/><path d="M7 9h8M13 9l-2.5-2.2M13 9l-2.5 2.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    }
+    if (type === "forbidden") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.22" stroke="currentColor" stroke-width="1.5"/><path d="M5 13L13 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>`;
+    }
+    if (type === "preferred") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.28" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
+    }
+    if (type === "unpreferred") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 2" stroke-linejoin="round"/></svg>`;
+    }
+    if (type === "speed") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.2" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M6 11h6M9 8v3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>`;
+    }
+    if (type === "sound") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.18" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M6 10.5v-3h2l2.5-1.5v7L8 11.5H6z" fill="currentColor" fill-opacity="0.5"/></svg>`;
+    }
+    if (type === "directional") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.16" stroke="currentColor" stroke-width="1.5"/><path d="M6 9h6M10 9l-2-2M10 9l-2 2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+    }
+    if (type === "directional_line") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 14L15 4" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M11 4h4v4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+    }
+    if (type === "planner") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.14" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 2"/><circle cx="9" cy="9" r="2" fill="currentColor"/></svg>`;
+    }
+    if (type === "io") {
+      return `<svg width="18" height="18" viewBox="0 0 18 18"><polygon points="3,14 9,4 15,14" fill="currentColor" fill-opacity="0.12" stroke="currentColor" stroke-width="1.5"/><path d="M6.5 10h5M8 8v4M10 8v4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>`;
+    }
+    return `<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-dasharray="2.5 2"/></svg>`;
+  }
+
+  function closeObjectTypeMenu() {
+    objectTypeMenuEl?.setAttribute("hidden", "");
+    objectTypeBtnEl?.setAttribute("aria-expanded", "false");
+    objectTypeMenuEl?.removeAttribute("style");
+    el("mapEditorObjectTypePicker")?.classList.remove("is-open");
+  }
+
+  function positionObjectTypeMenu() {
+    if (!objectTypeBtnEl || !objectTypeMenuEl || objectTypeMenuEl.hidden) return;
+    const rect = objectTypeBtnEl.getBoundingClientRect();
+    objectTypeMenuEl.style.position = "fixed";
+    objectTypeMenuEl.style.top = `${rect.bottom + 1}px`;
+    objectTypeMenuEl.style.left = `${rect.left}px`;
+    objectTypeMenuEl.style.width = `${rect.width}px`;
+    objectTypeMenuEl.style.right = "auto";
+    objectTypeMenuEl.style.zIndex = "200";
+  }
+
+  function openObjectTypeMenu() {
+    if (objectTypeBtnEl?.disabled) return;
+    objectTypeMenuEl?.removeAttribute("hidden");
+    objectTypeBtnEl?.setAttribute("aria-expanded", "true");
+    el("mapEditorObjectTypePicker")?.classList.add("is-open");
+    positionObjectTypeMenu();
+  }
+
+  function toggleObjectTypeMenu() {
+    if (objectTypeMenuEl?.hidden) openObjectTypeMenu();
+    else closeObjectTypeMenu();
+  }
+
+  function updateObjectTypePickerUi() {
+    const type = state.objectType || "";
+    if (objectTypeIconEl) {
+      objectTypeIconEl.innerHTML = objectTypeIconMarkup(type);
+      objectTypeIconEl.className = "mapEditorObjectTypeIcon";
+      if (type === "wall") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--wall");
+      if (type === "floor") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--floor");
+      if (type === "position") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--position");
+      if (type === "forbidden") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--forbidden");
+      if (type === "preferred") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--preferred");
+      if (type === "unpreferred") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--unpreferred");
+      if (type === "speed") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--speed");
+      if (type === "sound") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--sound");
+      if (type === "directional") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--directional");
+      if (type === "directional_line") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--directionalLine");
+      if (type === "planner") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--planner");
+      if (type === "io") objectTypeIconEl.classList.add("mapEditorObjectTypeOptionIcon--io");
+    }
+    if (objectTypeLabelEl) {
+      objectTypeLabelEl.textContent = t(objectTypeLabelKey(type));
+    }
+    objectTypeOptionEls().forEach((node) => {
+      const selected = (node.dataset.value || "") === type;
+      node.classList.toggle("is-selected", selected);
+      node.setAttribute("aria-selected", selected ? "true" : "false");
+    });
+  }
+
+  function updateObjectToolsUi() {
+    const canEdit = hasFloorPlan() && !state.readOnly;
+    const hasType = !!state.objectType && canEdit;
+    const obj = Objects();
+    const isOverlay = obj?.isOverlayObjectType(state.objectType);
+    objectTypeBtnEl?.toggleAttribute("disabled", !canEdit);
+    if (!canEdit) closeObjectTypeMenu();
+    el("mapEditorDrawBtn")?.toggleAttribute("disabled", !hasType);
+    el("mapEditorSelectBtn")?.toggleAttribute("disabled", !hasType);
+    el("mapEditorEraserBtn")?.toggleAttribute("disabled", !hasType || isOverlay);
+    el("mapEditorEraseShapeBtn")?.toggleAttribute("disabled", !hasType);
+    el("mapEditorEraseSelectionBtn")?.toggleAttribute("disabled", !hasType || isOverlay);
+    updateObjectTypePickerUi();
+    updateDraftUi();
+  }
+
+  function setObjectType(type) {
+    const allowed = new Set([
+      "wall",
+      "floor",
+      "position",
+      "forbidden",
+      "preferred",
+      "unpreferred",
+      "speed",
+      "sound",
+      "directional",
+      "directional_line",
+      "planner",
+      "io",
+      "",
+    ]);
+    state.objectType = allowed.has(type) ? type : "";
+    cancelDraft();
+    closeObjectTypeMenu();
+    updateObjectTypePickerUi();
+    if (state.objectType) setActiveTool("draw");
+    else setActiveTool("pan");
+    updateObjectToolsUi();
+  }
+
+  function pointInRect(x0, y0, x1, y1, px, py) {
+    const x = Math.min(x0, x1);
+    const y = Math.min(y0, y1);
+    const w = Math.abs(x1 - x0);
+    const h = Math.abs(y1 - y0);
+    return px >= x && px <= x + w && py >= y && py <= y + h;
+  }
+
+  function zoneIntersectsRect(zone, x0, y0, x1, y1) {
+    const obj = Objects();
+    if (!obj?.isFloorPlanType(zone?.type) || !zone.points?.length) return false;
+    return zone.points.some((p) => pointInRect(x0, y0, x1, y1, p.x, p.y));
+  }
+
+  function removeZonesInRect(x0, y0, x1, y1, withUndo = true) {
+    const obj = Objects();
+    const toRemove = state.zones.filter(
+      (z) => obj?.isFloorPlanType(z.type) && zoneIntersectsRect(z, x0, y0, x1, y1),
+    );
+    if (!toRemove.length) return false;
+    if (withUndo) pushUndo();
+    const ids = new Set(toRemove.map((z) => z.id));
+    state.zones = state.zones.filter((z) => !ids.has(z.id));
+    if (state.selectedZoneId && ids.has(state.selectedZoneId)) state.selectedZoneId = null;
+    rebakeComposite();
+    renderObjects();
+    setDirty(true);
+    state.rasterDirty = true;
+    return true;
+  }
+
+  function applyVertexMove(zoneId, pointIndex, pt) {
+    const obj = Objects();
+    const zone = state.zones.find((z) => z.id === zoneId);
+    if (!zone?.points?.[pointIndex] || !pt) return;
+    zone.points[pointIndex] = { x: pt.x, y: pt.y };
+    if (obj?.isFloorPlanType(zone.type)) {
+      rebakeComposite();
+      state.rasterDirty = true;
+    }
+    renderObjects();
+    setDirty(true);
+  }
+
+  function beginVertexDrag(evt) {
+    if (state.activeTool !== "select" || !state.objectType || state.readOnly) return false;
+    const pt = imagePointFromEvent(evt);
+    const obj = Objects();
+    if (!pt || !obj) return false;
+    const hit = obj.hitTestVertex(state.zones, pt.x, pt.y, state.selectedZoneId);
+    if (!hit) return false;
+    evt.preventDefault();
+    dismissCanvasTip();
+    pushUndo();
+    state.selectedZoneId = hit.zoneId;
+    state.vertexDrag = hit;
+    state.pointerMoved = false;
+    updateUndoUi();
+    renderObjects();
+    return true;
+  }
+
+  function continueVertexDrag(evt) {
+    if (!state.vertexDrag) return;
+    const pt = imagePointFromEvent(evt);
+    if (!pt) return;
+    state.pointerMoved = true;
+    applyVertexMove(state.vertexDrag.zoneId, state.vertexDrag.pointIndex, pt);
+  }
+
+  function endVertexDrag() {
+    if (!state.vertexDrag) return;
+    state.vertexDrag = null;
+    updateUndoUi();
+  }
+
+  function beginSelectionDrag(evt) {
+    if (state.activeTool !== "eraseSelection" || !state.objectType || state.readOnly) return false;
+    const obj = Objects();
+    if (!obj?.isFloorPlanType(state.objectType)) return false;
+    const pt = imagePointFromEvent(evt);
+    if (!pt) return false;
+    evt.preventDefault();
+    dismissCanvasTip();
+    state.selectionDrag = { x0: pt.x, y0: pt.y };
+    state.selectionRect = { x0: pt.x, y0: pt.y, x1: pt.x, y1: pt.y };
+    state.pointerMoved = false;
+    renderObjects();
+    return true;
+  }
+
+  function continueSelectionDrag(evt) {
+    if (!state.selectionDrag) return;
+    const pt = imagePointFromEvent(evt);
+    if (!pt) return;
+    state.pointerMoved = true;
+    state.selectionRect = {
+      x0: state.selectionDrag.x0,
+      y0: state.selectionDrag.y0,
+      x1: pt.x,
+      y1: pt.y,
+    };
+    renderObjects();
+  }
+
+  function endSelectionDrag() {
+    if (!state.selectionDrag || !state.selectionRect) {
+      state.selectionDrag = null;
+      state.selectionRect = null;
+      return;
+    }
+    const { x0, y0, x1, y1 } = state.selectionRect;
+    const w = Math.abs(x1 - x0);
+    const h = Math.abs(y1 - y0);
+    state.selectionDrag = null;
+    state.selectionRect = null;
+    if (w >= 3 && h >= 3 && state.pointerMoved) {
+      pushUndo();
+      OccEdit()?.eraseRect(getBaseCanvas(), x0, y0, x1, y1, state.objectType);
+      removeZonesInRect(x0, y0, x1, y1, false);
+      rebakeComposite();
+      state.baseDirty = true;
+      state.rasterDirty = true;
+      setDirty(true);
+    }
+    state.pointerMoved = false;
+    renderObjects();
+    updateUndoUi();
+  }
+
+  function beginPositionDrag(evt) {
+    const obj = Objects();
+    if (
+      state.activeTool !== "draw" ||
+      state.objectType !== obj?.TYPES.position ||
+      state.readOnly
+    ) {
+      return false;
+    }
+    const pt = imagePointFromEvent(evt);
+    if (!pt) return false;
+    evt.preventDefault();
+    dismissCanvasTip();
+    const yaw = obj.yawFromPoints(pt, pt);
+    state.positionDrag = { px: pt.x, py: pt.y };
+    state.draft = { kind: "position", px: pt.x, py: pt.y, yaw };
+    state.pointerMoved = false;
+    updateUndoUi();
+    renderObjects();
+    return true;
+  }
+
+  function continuePositionDrag(evt) {
+    if (!state.positionDrag || state.draft?.kind !== "position") return;
+    const pt = imagePointFromEvent(evt);
+    const obj = Objects();
+    if (!pt || !obj) return;
+    state.pointerMoved = true;
+    state.draft.yaw = obj.yawFromPoints(
+      { x: state.positionDrag.px, y: state.positionDrag.py },
+      pt,
+    );
+    renderObjects();
+  }
+
+  function endPositionDrag() {
+    if (!state.positionDrag || state.draft?.kind !== "position") return;
+    const anchor = state.positionDrag;
+    const draft = state.draft;
+    state.positionDrag = null;
+    if (!state.pointerMoved) {
+      state.draft = null;
+      renderObjects();
+      updateUndoUi();
+      return;
+    }
+    openPositionDialogFromDraft(anchor.px, anchor.py, draft.yaw);
+    state.draft = null;
+    updateUndoUi();
+    renderObjects();
+  }
+
+  function openPositionDialogFromDraft(px, py, yawRad, zoneId = null) {
+    const geo = Geo();
+    const { width, height } = floorPlanSize();
+    const mapMeta = mapMetaForEditor();
+    const world = geo?.pixelToWorld(mapMeta, width, height, px, py) || { x: 0, y: 0 };
+    const existing = zoneId ? state.zones.find((z) => z.id === zoneId) : null;
+    state.pendingPosition = {
+      mode: existing ? "edit" : "create",
+      zoneId: existing?.id || null,
+      px,
+      py,
+      yaw: existing ? Number(existing.yaw) : yawRad,
+    };
+    if (positionFields.name) positionFields.name.value = existing?.name || "";
+    if (positionFields.x) positionFields.x.value = (existing ? existing.x : world.x).toFixed(3);
+    if (positionFields.y) positionFields.y.value = (existing ? existing.y : world.y).toFixed(3);
+    const storedYaw = existing ? Number(existing.yaw) : yawRad;
+    const yawDeg = (-storedYaw * 180) / Math.PI;
+    if (positionFields.yaw) positionFields.yaw.value = yawDeg.toFixed(1);
+    positionDialogEl?.showModal();
+  }
+
+  function commitPositionFromDialog() {
+    const obj = Objects();
+    if (!obj || !state.pendingPosition) return false;
+    const name = positionFields.name?.value.trim() || "";
+    const worldX = Number(positionFields.x?.value);
+    const worldY = Number(positionFields.y?.value);
+    const yawDeg = Number(positionFields.yaw?.value);
+    const yaw = (-yawDeg * Math.PI) / 180;
+    if (!Number.isFinite(worldX) || !Number.isFinite(worldY) || !Number.isFinite(yawDeg)) {
+      alert(t("maps.editor.position.invalid"));
+      return false;
+    }
+    pushUndo();
+    if (state.pendingPosition.mode === "edit" && state.pendingPosition.zoneId) {
+      state.zones = state.zones.map((z) =>
+        z.id === state.pendingPosition.zoneId
+          ? { ...z, name, x: worldX, y: worldY, yaw }
+          : z,
+      );
+      state.selectedZoneId = state.pendingPosition.zoneId;
+    } else {
+      const zone = obj.createPosition(worldX, worldY, yaw, name);
+      if (!zone) return false;
+      state.zones = [...state.zones, zone];
+      state.selectedZoneId = zone.id;
+    }
+    state.pendingPosition = null;
+    positionDialogEl?.close();
+    renderObjects();
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  async function fetchSoundsList() {
+    try {
+      const res = await fetch("/api/sounds", { credentials: "include" });
+      if (!res.ok) throw new Error("failed");
+      const data = await res.json();
+      state.soundsCache = Array.isArray(data.sounds) ? data.sounds : [];
+    } catch {
+      state.soundsCache = [];
+    }
+    return state.soundsCache;
+  }
+
+  function fillSoundZoneSelect(selectedId = "") {
+    const select = soundFields.soundId;
+    if (!select) return;
+    select.innerHTML = "";
+    const empty = document.createElement("option");
+    empty.value = "";
+    empty.textContent = t("maps.editor.sound.noSound");
+    select.appendChild(empty);
+    state.soundsCache.forEach((s) => {
+      const opt = document.createElement("option");
+      opt.value = s.id;
+      opt.textContent = s.name || s.id;
+      if (s.id === selectedId) opt.selected = true;
+      select.appendChild(opt);
+    });
+    if (selectedId && !state.soundsCache.some((s) => s.id === selectedId)) {
+      const missing = document.createElement("option");
+      missing.value = selectedId;
+      missing.textContent = selectedId;
+      missing.selected = true;
+      select.appendChild(missing);
+    }
+  }
+
+  async function openBehaviorDialog(zoneId, mode = "edit") {
+    const obj = Objects();
+    const zone = state.zones.find((z) => z.id === zoneId);
+    if (!obj || !zone) return;
+    state.pendingBehavior = { mode, zoneId, type: zone.type };
+    if (zone.type === obj.TYPES.speed) {
+      if (speedFields.speed) {
+        speedFields.speed.min = String(Behavior()?.SPEED_MIN ?? 0.1);
+        speedFields.speed.max = String(Behavior()?.SPEED_MAX ?? 1.5);
+        speedFields.speed.step = "0.05";
+        speedFields.speed.value = String(zone.speed_mps ?? Behavior()?.DEFAULT_SPEED_MPS ?? 0.8);
+      }
+      speedDialogEl?.showModal();
+      return;
+    }
+    if (zone.type === obj.TYPES.sound) {
+      await fetchSoundsList();
+      fillSoundZoneSelect(zone.sound_id || "");
+      soundDialogEl?.showModal();
+    }
+  }
+
+  function cancelBehaviorDialog() {
+    const pending = state.pendingBehavior;
+    state.pendingBehavior = null;
+    if (pending?.mode === "create" && pending.zoneId) {
+      state.zones = state.zones.filter((z) => z.id !== pending.zoneId);
+      if (state.selectedZoneId === pending.zoneId) state.selectedZoneId = null;
+      renderObjects();
+      setDirty(true);
+    }
+    speedDialogEl?.close();
+    soundDialogEl?.close();
+  }
+
+  function commitSpeedFromDialog() {
+    const obj = Objects();
+    if (!obj || !state.pendingBehavior?.zoneId) return false;
+    const speed = obj.clampSpeedMps(Number(speedFields.speed?.value));
+    if (!Number.isFinite(speed)) {
+      alert(t("maps.editor.speed.invalid"));
+      return false;
+    }
+    const zoneId = state.pendingBehavior.zoneId;
+    if (state.pendingBehavior.mode === "edit") pushUndo();
+    state.zones = state.zones.map((z) =>
+      z.id === zoneId && z.type === obj.TYPES.speed ? { ...z, speed_mps: speed } : z,
+    );
+    state.selectedZoneId = zoneId;
+    state.pendingBehavior = null;
+    speedDialogEl?.close();
+    renderObjects();
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  function commitSoundFromDialog() {
+    const obj = Objects();
+    if (!obj || !state.pendingBehavior?.zoneId) return false;
+    const soundId = soundFields.soundId?.value || "";
+    if (!soundId) {
+      alert(t("maps.editor.sound.invalid"));
+      return false;
+    }
+    const zoneId = state.pendingBehavior.zoneId;
+    if (state.pendingBehavior.mode === "edit") pushUndo();
+    state.zones = state.zones.map((z) =>
+      z.id === zoneId && z.type === obj.TYPES.sound ? { ...z, sound_id: soundId } : z,
+    );
+    state.selectedZoneId = zoneId;
+    state.pendingBehavior = null;
+    soundDialogEl?.close();
+    renderObjects();
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  function fillDirectionSelect(selected = 0) {
+    const select = directionalFields.direction;
+    if (!select) return;
+    select.innerHTML = "";
+    (Advanced()?.DIRECTION_DEGREES || [0, 45, 90, 135, 180, 225, 270, 315]).forEach((deg) => {
+      const opt = document.createElement("option");
+      opt.value = String(deg);
+      opt.textContent = t("maps.editor.directional.degOption", { deg });
+      if (deg === selected) opt.selected = true;
+      select.appendChild(opt);
+    });
+  }
+
+  function openAdvancedDialog(zoneId, mode = "edit") {
+    const obj = Objects();
+    const zone = state.zones.find((z) => z.id === zoneId);
+    const adv = Advanced();
+    if (!obj || !zone || !adv) return;
+    state.pendingAdvanced = { mode, zoneId, type: zone.type };
+
+    if (zone.type === obj.TYPES.directional) {
+      if (directionalFields.shapePanel) directionalFields.shapePanel.hidden = false;
+      if (directionalFields.linePanel) directionalFields.linePanel.hidden = true;
+      fillDirectionSelect(adv.normalizeDirectionDeg(zone.direction_deg));
+      directionalDialogEl?.showModal();
+      return;
+    }
+    if (zone.type === obj.TYPES.directional_line) {
+      if (directionalFields.shapePanel) directionalFields.shapePanel.hidden = true;
+      if (directionalFields.linePanel) directionalFields.linePanel.hidden = false;
+      if (directionalFields.reversed) directionalFields.reversed.checked = !!zone.reversed;
+      if (directionalFields.lineWidth) {
+        directionalFields.lineWidth.value = String(zone.line_width ?? 8);
+      }
+      directionalDialogEl?.showModal();
+      return;
+    }
+    if (zone.type === obj.TYPES.planner) {
+      const s = adv.normalizePlannerSettings(zone);
+      if (plannerFields.noLocalization) plannerFields.noLocalization.checked = s.no_localization;
+      if (plannerFields.lookAhead) plannerFields.lookAhead.checked = s.look_ahead;
+      if (plannerFields.ignoreObstacles) plannerFields.ignoreObstacles.checked = s.ignore_obstacles;
+      if (plannerFields.pathDeviation) plannerFields.pathDeviation.value = String(s.path_deviation);
+      if (plannerFields.pathTimeout) plannerFields.pathTimeout.value = String(s.path_timeout);
+      plannerDialogEl?.showModal();
+      return;
+    }
+    if (zone.type === obj.TYPES.io) {
+      const s = adv.normalizeIoSettings(zone);
+      if (ioFields.module) ioFields.module.value = s.io_module || "";
+      if (ioFields.plcRegister) {
+        ioFields.plcRegister.value = s.plc_register == null ? "" : String(s.plc_register);
+      }
+      if (ioFields.plcValue) ioFields.plcValue.value = s.plc_value == null ? "" : String(s.plc_value);
+      if (ioFields.plcMode) ioFields.plcMode.value = s.plc_mode || "set";
+      ioDialogEl?.showModal();
+    }
+  }
+
+  function cancelAdvancedDialog() {
+    const pending = state.pendingAdvanced;
+    state.pendingAdvanced = null;
+    if (pending?.mode === "create" && pending.zoneId) {
+      state.zones = state.zones.filter((z) => z.id !== pending.zoneId);
+      if (state.selectedZoneId === pending.zoneId) state.selectedZoneId = null;
+      renderObjects();
+      setDirty(true);
+    }
+    directionalDialogEl?.close();
+    plannerDialogEl?.close();
+    ioDialogEl?.close();
+  }
+
+  function commitDirectionalFromDialog() {
+    const obj = Objects();
+    const adv = Advanced();
+    if (!obj || !adv || !state.pendingAdvanced?.zoneId) return false;
+    const zoneId = state.pendingAdvanced.zoneId;
+    const zone = state.zones.find((z) => z.id === zoneId);
+    if (!zone) return false;
+    if (state.pendingAdvanced.mode === "edit") pushUndo();
+
+    if (zone.type === obj.TYPES.directional) {
+      const direction_deg = adv.normalizeDirectionDeg(Number(directionalFields.direction?.value));
+      state.zones = state.zones.map((z) =>
+        z.id === zoneId ? { ...z, direction_deg } : z,
+      );
+    } else if (zone.type === obj.TYPES.directional_line) {
+      const line_width = Number(directionalFields.lineWidth?.value);
+      if (!Number.isFinite(line_width) || line_width < 2) {
+        alert(t("maps.editor.directional.lineWidthInvalid"));
+        return false;
+      }
+      state.zones = state.zones.map((z) =>
+        z.id === zoneId
+          ? { ...z, reversed: !!directionalFields.reversed?.checked, line_width }
+          : z,
+      );
+    }
+
+    state.selectedZoneId = zoneId;
+    state.pendingAdvanced = null;
+    directionalDialogEl?.close();
+    renderObjects();
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  function commitPlannerFromDialog() {
+    const obj = Objects();
+    const adv = Advanced();
+    if (!obj || !adv || !state.pendingAdvanced?.zoneId) return false;
+    const zoneId = state.pendingAdvanced.zoneId;
+    if (state.pendingAdvanced.mode === "edit") pushUndo();
+    const settings = adv.normalizePlannerSettings({
+      no_localization: !!plannerFields.noLocalization?.checked,
+      look_ahead: !!plannerFields.lookAhead?.checked,
+      ignore_obstacles: !!plannerFields.ignoreObstacles?.checked,
+      path_deviation: Number(plannerFields.pathDeviation?.value),
+      path_timeout: Number(plannerFields.pathTimeout?.value),
+    });
+    state.zones = state.zones.map((z) =>
+      z.id === zoneId && z.type === obj.TYPES.planner ? { ...z, ...settings } : z,
+    );
+    state.selectedZoneId = zoneId;
+    state.pendingAdvanced = null;
+    plannerDialogEl?.close();
+    renderObjects();
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  function commitIoFromDialog() {
+    const obj = Objects();
+    const adv = Advanced();
+    if (!obj || !adv || !state.pendingAdvanced?.zoneId) return false;
+    const io_module = ioFields.module?.value.trim() || "";
+    if (!io_module) {
+      alert(t("maps.editor.io.moduleRequired"));
+      return false;
+    }
+    const zoneId = state.pendingAdvanced.zoneId;
+    if (state.pendingAdvanced.mode === "edit") pushUndo();
+    const settings = adv.normalizeIoSettings({
+      io_module,
+      plc_register: ioFields.plcRegister?.value,
+      plc_value: ioFields.plcValue?.value,
+      plc_mode: ioFields.plcMode?.value,
+    });
+    state.zones = state.zones.map((z) =>
+      z.id === zoneId && z.type === obj.TYPES.io ? { ...z, ...settings } : z,
+    );
+    state.selectedZoneId = zoneId;
+    state.pendingAdvanced = null;
+    ioDialogEl?.close();
+    renderObjects();
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  function onCanvasClick(evt) {
+    if (!hasFloorPlan() || state.readOnly || state.pointerMoved) return;
+    if (evt.target?.closest?.(".mapEditorOriginHit")) return;
+    const pt = imagePointFromEvent(evt);
+    if (!pt) return;
+    dismissCanvasTip();
+    const obj = Objects();
+    const { width, height } = floorPlanSize();
+    const mapMeta = mapMetaForEditor();
+    if (!obj) return;
+
+    if (
+      state.activeTool === "draw" &&
+      (obj.isFloorPlanType(state.objectType) ||
+        obj.isPlannerZoneType(state.objectType) ||
+        obj.isBehaviorZoneType(state.objectType) ||
+        obj.isAdvancedZoneType(state.objectType))
+    ) {
+      if (!state.draft || state.draft.kind !== "shape") {
+        state.draft = { kind: "shape", type: state.objectType, points: [], hover: null };
+        updateUndoUi();
+      }
+      let next = { x: pt.x, y: pt.y };
+      const pts = state.draft.points;
+      if (evt.shiftKey && pts.length) {
+        next = obj.constrainAxis(pts[pts.length - 1], next);
+      }
+      if (obj.isDirectionalLineType(state.draft.type)) {
+        if (pts.length && obj.nearPoint(next, pts[pts.length - 1])) return;
+        pts.push(next);
+        renderObjects();
+        updateDraftUi();
+        return;
+      }
+      if (obj.isPolygonType(state.draft.type) && pts.length >= 3 && obj.nearPoint(next, pts[0])) {
+        commitDraft();
+        return;
+      }
+      if (pts.length && obj.nearPoint(next, pts[pts.length - 1])) return;
+      pts.push(next);
+      renderObjects();
+      updateDraftUi();
+      return;
+    }
+
+    if (state.activeTool === "select") {
+      const hit = obj.hitTestAny(state.zones, pt.x, pt.y, mapMeta, width, height);
+      state.selectedZoneId = hit?.id || null;
+      renderObjects();
+      return;
+    }
+
+    if (state.activeTool === "eraseShape") {
+      const hit = obj.hitTestAny(state.zones, pt.x, pt.y, mapMeta, width, height);
+      if (hit) removeZone(hit.id);
+    }
+  }
+
+  function onCanvasDblClick(evt) {
+    if (!hasFloorPlan() || state.readOnly) return;
+    const obj = Objects();
+    const { width, height } = floorPlanSize();
+    const pt = imagePointFromEvent(evt);
+    if (!pt || !obj) return;
+    const hit = obj.hitTestAny(
+      state.zones,
+      pt.x,
+      pt.y,
+      mapMetaForEditor(),
+      width,
+      height,
+    );
+    if (hit?.type === obj.TYPES.position) {
+      state.selectedZoneId = hit.id;
+      openPositionDialogFromDraft(pt.x, pt.y, hit.yaw, hit.id);
+      renderObjects();
+      return;
+    }
+    if (obj.isBehaviorZoneType(hit?.type)) {
+      state.selectedZoneId = hit.id;
+      openBehaviorDialog(hit.id, "edit");
+      renderObjects();
+      return;
+    }
+    if (obj.isAdvancedZoneType(hit?.type)) {
+      state.selectedZoneId = hit.id;
+      openAdvancedDialog(hit.id, "edit");
+      renderObjects();
+    }
+  }
+
+  function beginEraserStroke(evt) {
+    if (state.activeTool !== "eraser" || !state.objectType || state.readOnly) return false;
+    const pt = imagePointFromEvent(evt);
+    if (!pt) return false;
+    evt.preventDefault();
+    dismissCanvasTip();
+    pushUndo();
+    const edit = OccEdit();
+    edit?.paintBrush(getBaseCanvas(), pt.x, pt.y, state.objectType);
+    rebakeComposite();
+    state.eraserStroke = { lastX: pt.x, lastY: pt.y };
+    state.baseDirty = true;
+    state.rasterDirty = true;
+    setDirty(true);
+    updateUndoUi();
+    return true;
+  }
+
+  function continueEraserStroke(evt) {
+    if (!state.eraserStroke || state.activeTool !== "eraser") return;
+    const pt = imagePointFromEvent(evt);
+    const edit = OccEdit();
+    if (!pt || !edit) return;
+    edit.paintBrushStroke(
+      getBaseCanvas(),
+      state.eraserStroke.lastX,
+      state.eraserStroke.lastY,
+      pt.x,
+      pt.y,
+      state.objectType,
+    );
+    state.eraserStroke.lastX = pt.x;
+    state.eraserStroke.lastY = pt.y;
+    rebakeComposite();
+  }
+
+  function endEraserStroke() {
+    if (!state.eraserStroke) return;
+    state.eraserStroke = null;
+    updateUndoUi();
   }
 
   /** Layer 1 — apply view transform to inner canvas only. */
@@ -263,6 +1426,8 @@
     }
 
     updateOriginMarker();
+    renderObjects();
+    updateObjectToolsUi();
     updateStatusBar();
   }
 
@@ -381,8 +1546,9 @@
     }
   }
 
-  function renderMapImage() {
-    const url = mapImageUrl(state.map);
+  function renderMapImage(opts = {}) {
+    const shouldFit = opts.fitToView !== false;
+    const url = mapBaseImageUrl(state.map);
     if (url && imageEl) {
       imageEl.src = url;
       imageEl.hidden = false;
@@ -403,10 +1569,14 @@
       () => {
         paintOccupancyFromImage();
         updateImageLayer();
-        fitToView();
+        if (shouldFit) fitToView();
       },
       { once: true },
     );
+    if (url && imageEl?.complete && imageEl.naturalWidth) {
+      paintOccupancyFromImage();
+      updateImageLayer();
+    }
     if (!url) {
       centerSheetInView();
       applyViewTransform();
@@ -455,12 +1625,15 @@
     el("mapEditorSaveBtn")?.toggleAttribute("disabled", ro || !state.dirty);
     el("mapEditorSettingsBtn")?.toggleAttribute("disabled", ro);
     updateMenuActionsUi();
+    updateObjectToolsUi();
+    updateUndoUi();
   }
 
   async function reloadMap() {
     if (!state.mapId) return;
     state.map = await api(`/api/maps/${encodeURIComponent(state.mapId)}`);
     await loadYamlMeta();
+    syncZonesFromMap();
     updateHeader();
     renderMapImage();
     fillSettingsForm();
@@ -474,6 +1647,21 @@
     state.tipVisible = true;
     state.showOrigin = true;
     state.activeTool = "pan";
+    state.objectType = "";
+    state.zones = [];
+    state.draft = null;
+    state.selectedZoneId = null;
+    state.undoStack = [];
+    state.rasterDirty = false;
+    state.baseDirty = false;
+    state.bakedZoneIds = new Set();
+    state.eraserStroke = null;
+    state.vertexDrag = null;
+    state.selectionDrag = null;
+    state.selectionRect = null;
+    state.positionDrag = null;
+    state.pendingPosition = null;
+    updateObjectTypePickerUi();
     state.view = Geo()?.createView(1, 0, 0) || { scale: 1, panX: 0, panY: 0 };
     if (tipEl) {
       tipEl.hidden = false;
@@ -492,8 +1680,23 @@
     state.callbacks = {};
     state.uploadMeta = null;
     state.yamlMeta = null;
+    state.zones = [];
+    state.draft = null;
+    state.selectedZoneId = null;
+    state.undoStack = [];
+    state.objectType = "";
+    state.rasterDirty = false;
+    state.baseDirty = false;
+    state.bakedZoneIds = new Set();
+    state.eraserStroke = null;
+    state.vertexDrag = null;
+    state.selectionDrag = null;
+    state.selectionRect = null;
+    state.positionDrag = null;
+    state.pendingPosition = null;
     menuDialogEl?.close();
     settingsDialogEl?.close();
+    positionDialogEl?.close();
     activateDialogEl?.close();
     uploadConfirmDialogEl?.close();
     uploadMetaDialogEl?.close();
@@ -674,6 +1877,34 @@
     promptActivate();
   }
 
+  async function uploadMapImageBlob(blob, kind) {
+    if (!state.map || !blob) return null;
+    const pngName = state.map.image_file || "map.png";
+    const filename = /\.png$/i.test(pngName) ? pngName : `${pngName}.png`;
+    const form = new FormData();
+    form.append("file", blob, filename);
+    const path =
+      kind === "base"
+        ? `/api/maps/${encodeURIComponent(state.map.id)}/image/base`
+        : `/api/maps/${encodeURIComponent(state.map.id)}/image/composite`;
+    const res = await fetch(path, {
+      credentials: "include",
+      method: "POST",
+      body: form,
+    });
+    if (!res.ok) {
+      let msg = res.statusText;
+      try {
+        const err = await res.json();
+        if (err.error) msg = err.error;
+      } catch {
+        /* ignore */
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
+
   async function saveMap() {
     if (!state.map || state.readOnly) return;
     const payload = readSettingsPayload();
@@ -681,16 +1912,31 @@
       alert(t("maps.error.nameEmpty"));
       return;
     }
+    rebakeComposite();
+    const edit = OccEdit();
+    if (state.baseDirty && edit) {
+      const baseBlob = await edit.exportPngBlob(getBaseCanvas());
+      const baseUpdated = await uploadMapImageBlob(baseBlob, "base");
+      if (baseUpdated) state.map = { ...state.map, ...baseUpdated };
+      state.baseDirty = false;
+    }
+    if (state.rasterDirty && edit) {
+      const compositeBlob = await edit.exportPngBlob(getSourceCanvas());
+      const imageUpdated = await uploadMapImageBlob(compositeBlob, "composite");
+      if (imageUpdated) state.map = { ...state.map, ...imageUpdated };
+      state.rasterDirty = false;
+    }
     const updated = await api(`/api/maps/${encodeURIComponent(state.map.id)}`, {
       method: "PUT",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload),
+      body: JSON.stringify({ ...payload, zones: state.zones }),
     });
     state.map = updated;
+    syncZonesFromMap();
     state.callbacks.onMapUpdated?.(updated);
     setDirty(false);
     updateHeader();
-    updateImageLayer();
+    renderMapImage({ fitToView: false });
     menuDialogEl?.close();
     promptActivate();
   }
@@ -734,6 +1980,27 @@
 
     viewportEl?.addEventListener("mousemove", (evt) => {
       updateStatusBar({ x: evt.clientX, y: evt.clientY });
+      if (state.draft?.kind === "shape" && state.activeTool === "draw") {
+        const pt = imagePointFromEvent(evt);
+        const obj = Objects();
+        if (pt && obj) {
+          let hover = { x: pt.x, y: pt.y };
+          const pts = state.draft.points;
+          if (evt.shiftKey && pts.length) {
+            hover = obj.constrainAxis(pts[pts.length - 1], hover);
+          }
+          state.draft.hover = hover;
+          renderObjects();
+        }
+      }
+    });
+
+    viewportEl?.addEventListener("click", (evt) => {
+      if (state.activeTool !== "pan") onCanvasClick(evt);
+    });
+
+    viewportEl?.addEventListener("dblclick", (evt) => {
+      onCanvasDblClick(evt);
     });
 
     viewportEl?.addEventListener("mouseleave", () => {
@@ -741,7 +2008,13 @@
     });
 
     viewportEl?.addEventListener("mousedown", (evt) => {
-      if (evt.button !== 0 || state.activeTool !== "pan") return;
+      if (evt.button !== 0) return;
+      state.pointerMoved = false;
+      if (beginEraserStroke(evt)) return;
+      if (beginVertexDrag(evt)) return;
+      if (beginSelectionDrag(evt)) return;
+      if (beginPositionDrag(evt)) return;
+      if (state.activeTool !== "pan") return;
       evt.preventDefault();
       dismissCanvasTip();
       state.panning = {
@@ -754,13 +2027,34 @@
     });
 
     window.addEventListener("mousemove", (evt) => {
+      if (state.eraserStroke) {
+        continueEraserStroke(evt);
+        return;
+      }
+      if (state.vertexDrag) {
+        continueVertexDrag(evt);
+        return;
+      }
+      if (state.selectionDrag) {
+        continueSelectionDrag(evt);
+        return;
+      }
+      if (state.positionDrag) {
+        continuePositionDrag(evt);
+        return;
+      }
       if (!state.panning) return;
+      state.pointerMoved = true;
       state.view.panX = state.panning.startPanX + (evt.clientX - state.panning.startX);
       state.view.panY = state.panning.startPanY + (evt.clientY - state.panning.startY);
       applyViewTransform();
     });
 
     window.addEventListener("mouseup", () => {
+      endEraserStroke();
+      endVertexDrag();
+      endSelectionDrag();
+      endPositionDrag();
       if (!state.panning) return;
       state.panning = null;
       updateCanvasCursor();
@@ -769,6 +2063,7 @@
     window.addEventListener("resize", () => {
       if (!state.mapId) return;
       applyViewTransform();
+      positionObjectTypeMenu();
     });
   }
 
@@ -803,6 +2098,98 @@
       saveMap().catch((e) => alert(e.message));
     });
     el("mapEditorPanBtn")?.addEventListener("click", () => setActiveTool("pan"));
+    el("mapEditorDrawBtn")?.addEventListener("click", () => setActiveTool("draw"));
+    el("mapEditorSelectBtn")?.addEventListener("click", () => setActiveTool("select"));
+    el("mapEditorEraserBtn")?.addEventListener("click", () => setActiveTool("eraser"));
+    el("mapEditorEraseShapeBtn")?.addEventListener("click", () => setActiveTool("eraseShape"));
+    el("mapEditorEraseSelectionBtn")?.addEventListener("click", () => setActiveTool("eraseSelection"));
+    el("mapEditorConfirmDrawBtn")?.addEventListener("click", () => {
+      if (!commitDraft()) {
+        alert(t("maps.editor.drawNeedMorePoints"));
+      }
+    });
+    el("mapEditorUndoBtn")?.addEventListener("click", () => undoZones());
+    objectTypeBtnEl?.addEventListener("click", (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      toggleObjectTypeMenu();
+    });
+    objectTypeMenuEl?.addEventListener("click", (evt) => {
+      evt.stopPropagation();
+      const option = evt.target?.closest?.(".mapEditorObjectTypeOption");
+      if (!option) return;
+      setObjectType(option.dataset.value ?? "");
+    });
+    document.addEventListener("click", (evt) => {
+      if (evt.target?.closest?.("#mapEditorObjectTypePicker")) return;
+      if (evt.target?.closest?.("#mapEditorObjectTypeMenu")) return;
+      closeObjectTypeMenu();
+    });
+    el("mapEditorMappingBar")?.addEventListener("scroll", () => positionObjectTypeMenu(), { passive: true });
+    el("mapPositionCancelBtn")?.addEventListener("click", () => {
+      state.pendingPosition = null;
+      positionDialogEl?.close();
+    });
+    positionDialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      state.pendingPosition = null;
+      positionDialogEl?.close();
+    });
+    positionFormEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      if (!commitPositionFromDialog()) return;
+    });
+    el("mapSpeedCancelBtn")?.addEventListener("click", () => cancelBehaviorDialog());
+    speedDialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      cancelBehaviorDialog();
+    });
+    speedFormEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      commitSpeedFromDialog();
+    });
+    el("mapSoundCancelBtn")?.addEventListener("click", () => cancelBehaviorDialog());
+    soundDialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      cancelBehaviorDialog();
+    });
+    soundFormEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      commitSoundFromDialog();
+    });
+    soundFields.manageLink?.addEventListener("click", (evt) => {
+      evt.preventDefault();
+      soundDialogEl?.close();
+      state.pendingBehavior = null;
+      window.LmApp?.setActivePage?.("sounds");
+    });
+    el("mapDirectionalCancelBtn")?.addEventListener("click", () => cancelAdvancedDialog());
+    directionalDialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      cancelAdvancedDialog();
+    });
+    directionalFormEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      commitDirectionalFromDialog();
+    });
+    el("mapPlannerCancelBtn")?.addEventListener("click", () => cancelAdvancedDialog());
+    plannerDialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      cancelAdvancedDialog();
+    });
+    plannerFormEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      commitPlannerFromDialog();
+    });
+    el("mapIoCancelBtn")?.addEventListener("click", () => cancelAdvancedDialog());
+    ioDialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      cancelAdvancedDialog();
+    });
+    ioFormEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      commitIoFromDialog();
+    });
     el("mapEditorOriginBtn")?.addEventListener("click", () => setShowOrigin(!state.showOrigin));
     el("mapEditorFitBtn")?.addEventListener("click", fitToView);
     el("mapEditorCenterBtn")?.addEventListener("click", () => {
@@ -917,11 +2304,24 @@
       });
     });
 
+    window.addEventListener("keydown", (evt) => {
+      if (!state.mapId || state.readOnly) return;
+      if (evt.key === "Enter" && state.draft?.kind === "shape") {
+        if (commitDraft()) evt.preventDefault();
+        else alert(t("maps.editor.drawNeedMorePoints"));
+      }
+      if (evt.key === "Escape" && state.draft) {
+        cancelDraft();
+        evt.preventDefault();
+      }
+    });
+
     window.addEventListener("lm:locale-change", () => {
       if (state.tipVisible && tipEl) tipEl.textContent = t("maps.editor.canvasTip");
       updateHeader();
       updateStatusBar();
       updateOriginMarker();
+      updateObjectTypePickerUi();
     });
   }
 
@@ -934,5 +2334,21 @@
     reloadMap,
     paintOccupancyGrid,
     paintOccupancyFromImage,
+    getZones: () => JSON.parse(JSON.stringify(state.zones)),
+    getPlannerZones: () => Planner()?.filterPlannerZones(state.zones) || [],
+    getBehaviorZones: () => Behavior()?.filterBehaviorZones(state.zones) || [],
+    getAdvancedZones: () => Advanced()?.filterAdvancedZones(state.zones) || [],
+    classifyImagePoint: (px, py) => Planner()?.classifyPoint(state.zones, px, py) || null,
+    classifyBehavior: (px, py) => Behavior()?.classifyPoint(state.zones, px, py) || null,
+    classifyAdvanced: (px, py, headingRad) =>
+      Advanced()?.classifyPoint(state.zones, px, py, headingRad) || null,
+    getSpeedLimit: (px, py) => Behavior()?.getSpeedLimit(state.zones, px, py) ?? null,
+    getSoundAtPoint: (px, py) => Behavior()?.getSoundAtPoint(state.zones, px, py) ?? null,
+    getDirectionalConstraint: (px, py, headingRad) =>
+      Advanced()?.getDirectionalConstraint(state.zones, px, py, headingRad) ?? null,
+    getPlannerSettings: (px, py) => Advanced()?.getPlannerSettings(state.zones, px, py) ?? null,
+    getIoActivation: (px, py) => Advanced()?.getIoActivation(state.zones, px, py) ?? null,
+    pathCost: (points) => Planner()?.pathCost(state.zones, points) ?? Infinity,
+    isPathBlocked: (points) => Planner()?.isPathBlocked(state.zones, points) ?? false,
   };
 })();
diff --git a/www/map-objects.js b/www/map-objects.js
new file mode 100644
index 0000000..71cc83d
--- /dev/null
+++ b/www/map-objects.js
@@ -0,0 +1,698 @@
+(() => {
+  const TYPES = {
+    wall: "wall",
+    floor: "floor",
+    position: "position",
+    forbidden: "forbidden",
+    preferred: "preferred",
+    unpreferred: "unpreferred",
+    speed: "speed",
+    sound: "sound",
+    directional: "directional",
+    directional_line: "directional_line",
+    planner: "planner",
+    io: "io",
+  };
+
+  const FLOOR_PLAN_TYPES = new Set([TYPES.wall, TYPES.floor]);
+  const POLYGON_TYPES = new Set([
+    TYPES.floor,
+    TYPES.forbidden,
+    TYPES.preferred,
+    TYPES.unpreferred,
+    TYPES.speed,
+    TYPES.sound,
+    TYPES.directional,
+    TYPES.planner,
+    TYPES.io,
+  ]);
+  const POINT_SHAPE_TYPES = new Set([TYPES.wall, TYPES.directional_line, ...POLYGON_TYPES]);
+
+  function newId() {
+    return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
+  }
+
+  function normalizePoint(p) {
+    const x = Number(p?.x);
+    const y = Number(p?.y);
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
+    return { x, y };
+  }
+
+  function minPoints(type) {
+    if (type === TYPES.wall || type === TYPES.directional_line) return 2;
+    if (POLYGON_TYPES.has(type)) return 3;
+    return 0;
+  }
+
+  function isFloorPlanType(type) {
+    return FLOOR_PLAN_TYPES.has(type);
+  }
+
+  function isPlannerZoneType(type) {
+    return window.MapPlannerZones?.isPlannerZoneType(type) || false;
+  }
+
+  function isBehaviorZoneType(type) {
+    return window.MapBehaviorZones?.isBehaviorZoneType(type) || false;
+  }
+
+  function isAdvancedZoneType(type) {
+    return window.MapAdvancedZones?.isAdvancedZoneType(type) || false;
+  }
+
+  function isDirectionalLineType(type) {
+    return type === TYPES.directional_line;
+  }
+
+  function clampSpeedMps(value) {
+    return window.MapBehaviorZones?.clampSpeed(value) ?? 0.8;
+  }
+
+  function isPolygonType(type) {
+    return POLYGON_TYPES.has(type);
+  }
+
+  function isPolylineType(type) {
+    return type === TYPES.wall || type === TYPES.directional_line;
+  }
+
+  function isPointShapeType(type) {
+    return POINT_SHAPE_TYPES.has(type);
+  }
+
+  function isOverlayObjectType(type) {
+    return (
+      type === TYPES.position ||
+      isPlannerZoneType(type) ||
+      isBehaviorZoneType(type) ||
+      isAdvancedZoneType(type)
+    );
+  }
+
+  function isValidPolygon(z) {
+    if (!z || !isPolygonType(z.type)) return false;
+    const points = Array.isArray(z.points) ? z.points.map(normalizePoint).filter(Boolean) : [];
+    return points.length >= minPoints(z.type);
+  }
+
+  function isValidWall(z) {
+    if (!z || z.type !== TYPES.wall) return false;
+    const points = Array.isArray(z.points) ? z.points.map(normalizePoint).filter(Boolean) : [];
+    return points.length >= 2;
+  }
+
+  function isValidPosition(z) {
+    return (
+      z &&
+      z.type === TYPES.position &&
+      Number.isFinite(Number(z.x)) &&
+      Number.isFinite(Number(z.y)) &&
+      Number.isFinite(Number(z.yaw))
+    );
+  }
+
+  function isValidSpeedZone(z) {
+    if (!isValidPolygon(z) || z.type !== TYPES.speed) return false;
+    return Number.isFinite(Number(z.speed_mps));
+  }
+
+  function isValidSoundZone(z) {
+    return isValidPolygon(z) && z.type === TYPES.sound && typeof z.sound_id === "string";
+  }
+
+  function isValidDirectionalShape(z) {
+    return isValidPolygon(z) && z.type === TYPES.directional && Number.isFinite(Number(z.direction_deg));
+  }
+
+  function isValidDirectionalLine(z) {
+    if (!z || z.type !== TYPES.directional_line) return false;
+    const points = Array.isArray(z.points) ? z.points.map(normalizePoint).filter(Boolean) : [];
+    return points.length >= 2;
+  }
+
+  function isValidPlannerZone(z) {
+    return isValidPolygon(z) && z.type === TYPES.planner;
+  }
+
+  function isValidIoZone(z) {
+    return isValidPolygon(z) && z.type === TYPES.io && typeof z.io_module === "string";
+  }
+
+  function isValidZone(z) {
+    if (z?.type === TYPES.position) return isValidPosition(z);
+    if (z?.type === TYPES.wall) return isValidWall(z);
+    if (z?.type === TYPES.speed) return isValidSpeedZone(z);
+    if (z?.type === TYPES.sound) return isValidSoundZone(z);
+    if (z?.type === TYPES.directional) return isValidDirectionalShape(z);
+    if (z?.type === TYPES.directional_line) return isValidDirectionalLine(z);
+    if (z?.type === TYPES.planner) return isValidPlannerZone(z);
+    if (z?.type === TYPES.io) return isValidIoZone(z);
+    if (isPolygonType(z?.type)) return isValidPolygon(z);
+    return false;
+  }
+
+  /** Parse all map objects from API / database payload. */
+  function parseZones(raw) {
+    if (!Array.isArray(raw)) return [];
+    return raw
+      .map((z) => {
+        if (!z) return null;
+        if (z.type === TYPES.position) {
+          return {
+            id: typeof z.id === "string" && z.id ? z.id : newId(),
+            type: TYPES.position,
+            name: typeof z.name === "string" ? z.name : "",
+            x: Number(z.x),
+            y: Number(z.y),
+            yaw: Number(z.yaw),
+          };
+        }
+        if (isPointShapeType(z.type)) {
+          const base = {
+            id: typeof z.id === "string" && z.id ? z.id : newId(),
+            type: z.type,
+            points: (Array.isArray(z.points) ? z.points : []).map(normalizePoint).filter(Boolean),
+          };
+          if (z.type === TYPES.speed) {
+            base.speed_mps = clampSpeedMps(z.speed_mps);
+          }
+          if (z.type === TYPES.sound) {
+            base.sound_id = typeof z.sound_id === "string" ? z.sound_id : "";
+          }
+          if (z.type === TYPES.directional) {
+            base.direction_deg = window.MapAdvancedZones?.normalizeDirectionDeg(z.direction_deg) ?? 0;
+          }
+          if (z.type === TYPES.directional_line) {
+            base.reversed = !!z.reversed;
+            base.line_width = Number.isFinite(Number(z.line_width)) ? Number(z.line_width) : 8;
+          }
+          if (z.type === TYPES.planner) {
+            Object.assign(
+              base,
+              window.MapAdvancedZones?.normalizePlannerSettings(z) || {},
+            );
+          }
+          if (z.type === TYPES.io) {
+            const io = window.MapAdvancedZones?.normalizeIoSettings(z) || {};
+            base.io_module = io.io_module || "";
+            base.plc_register = io.plc_register;
+            base.plc_value = io.plc_value;
+            base.plc_mode = io.plc_mode;
+          }
+          return base;
+        }
+        return null;
+      })
+      .filter(isValidZone);
+  }
+
+  function createZone(type, points, extra = {}) {
+    const pts = points.map(normalizePoint).filter(Boolean);
+    if (pts.length < minPoints(type)) return null;
+    const zone = { id: newId(), type, points: pts };
+    if (type === TYPES.speed) zone.speed_mps = clampSpeedMps(extra.speed_mps);
+    if (type === TYPES.sound) zone.sound_id = typeof extra.sound_id === "string" ? extra.sound_id : "";
+    if (type === TYPES.directional) {
+      zone.direction_deg = window.MapAdvancedZones?.normalizeDirectionDeg(extra.direction_deg) ?? 0;
+    }
+    if (type === TYPES.directional_line) {
+      zone.reversed = !!extra.reversed;
+      zone.line_width = Number.isFinite(Number(extra.line_width)) ? Number(extra.line_width) : 8;
+    }
+    if (type === TYPES.planner) {
+      Object.assign(zone, window.MapAdvancedZones?.normalizePlannerSettings(extra) || {});
+    }
+    if (type === TYPES.io) {
+      const io = window.MapAdvancedZones?.normalizeIoSettings(extra) || {};
+      zone.io_module = io.io_module || "";
+      zone.plc_register = io.plc_register;
+      zone.plc_value = io.plc_value;
+      zone.plc_mode = io.plc_mode;
+    }
+    return zone;
+  }
+
+  function createPosition(worldX, worldY, yaw, name = "") {
+    if (!Number.isFinite(worldX) || !Number.isFinite(worldY) || !Number.isFinite(yaw)) return null;
+    return {
+      id: newId(),
+      type: TYPES.position,
+      name: name || "",
+      x: worldX,
+      y: worldY,
+      yaw,
+    };
+  }
+
+  function distPointToSegment(px, py, x1, y1, x2, y2) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lenSq = dx * dx + dy * dy;
+    if (lenSq === 0) return Math.hypot(px - x1, py - y1);
+    let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+  }
+
+  function pointInPolygon(px, py, points) {
+    return window.MapPlannerZones?.pointInPolygon(px, py, points) || false;
+  }
+
+  function dist(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+
+  function positionPixel(z, mapMeta, imgW, imgH) {
+    const geo = window.MapGeo;
+    if (!geo || !z) return null;
+    return geo.worldToPixel(mapMeta, imgW, imgH, z.x, z.y);
+  }
+
+  function hitTestPlannerZone(zones, px, py) {
+    for (let i = zones.length - 1; i >= 0; i--) {
+      const z = zones[i];
+      if (isPlannerZoneType(z.type) && pointInPolygon(px, py, z.points)) return z;
+    }
+    return null;
+  }
+
+  function hitTestBehaviorZone(zones, px, py) {
+    for (let i = zones.length - 1; i >= 0; i--) {
+      const z = zones[i];
+      if (isBehaviorZoneType(z.type) && pointInPolygon(px, py, z.points)) return z;
+    }
+    return null;
+  }
+
+  function hitTestAdvancedZone(zones, px, py, tolerance = 8) {
+    for (let i = zones.length - 1; i >= 0; i--) {
+      const z = zones[i];
+      if (!isAdvancedZoneType(z.type)) continue;
+      if (z.type === TYPES.directional_line) {
+        for (let j = 0; j < z.points.length - 1; j++) {
+          const p1 = z.points[j];
+          const p2 = z.points[j + 1];
+          const width = Number(z.line_width) || 8;
+          if (distPointToSegment(px, py, p1.x, p1.y, p2.x, p2.y) <= width / 2 + tolerance) return z;
+        }
+        continue;
+      }
+      if (z.points?.length && pointInPolygon(px, py, z.points)) return z;
+    }
+    return null;
+  }
+
+  /** Find topmost floor-plan shape at image pixel. */
+  function hitTest(zones, px, py, tolerance = 8) {
+    for (let i = zones.length - 1; i >= 0; i--) {
+      const z = zones[i];
+      if (z.type === TYPES.floor && pointInPolygon(px, py, z.points)) return z;
+      if (z.type === TYPES.wall) {
+        for (let j = 0; j < z.points.length - 1; j++) {
+          const p1 = z.points[j];
+          const p2 = z.points[j + 1];
+          if (distPointToSegment(px, py, p1.x, p1.y, p2.x, p2.y) <= tolerance) return z;
+        }
+      }
+      if (z.type === TYPES.directional_line) {
+        for (let j = 0; j < z.points.length - 1; j++) {
+          const p1 = z.points[j];
+          const p2 = z.points[j + 1];
+          const width = Number(z.line_width) || 8;
+          if (distPointToSegment(px, py, p1.x, p1.y, p2.x, p2.y) <= width / 2 + tolerance) return z;
+        }
+      }
+    }
+    return null;
+  }
+
+  function hitTestPosition(zones, px, py, mapMeta, imgW, imgH, tolerance = 14) {
+    for (let i = zones.length - 1; i >= 0; i--) {
+      const z = zones[i];
+      if (z.type !== TYPES.position) continue;
+      const pt = positionPixel(z, mapMeta, imgW, imgH);
+      if (pt && dist({ x: px, y: py }, pt) <= tolerance) return z;
+    }
+    return null;
+  }
+
+  function hitTestAny(zones, px, py, mapMeta, imgW, imgH, tolerance = 8) {
+    const pos = hitTestPosition(zones, px, py, mapMeta, imgW, imgH, tolerance + 4);
+    if (pos) return pos;
+    const behavior = hitTestBehaviorZone(zones, px, py);
+    if (behavior) return behavior;
+    const advanced = hitTestAdvancedZone(zones, px, py, tolerance);
+    if (advanced) return advanced;
+    const planner = hitTestPlannerZone(zones, px, py);
+    if (planner) return planner;
+    return hitTest(zones, px, py, tolerance);
+  }
+
+  /** Hit vertex handle on selected or any point-based shape. */
+  function hitTestVertex(zones, px, py, selectedId, tolerance = 10) {
+    const tryZone = (z) => {
+      if (!isPointShapeType(z.type)) return null;
+      for (let i = 0; i < z.points.length; i++) {
+        if (dist({ x: px, y: py }, z.points[i]) <= tolerance) {
+          return { zoneId: z.id, pointIndex: i };
+        }
+      }
+      return null;
+    };
+    if (selectedId) {
+      const sel = zones.find((z) => z.id === selectedId);
+      const hit = sel ? tryZone(sel) : null;
+      if (hit) return hit;
+    }
+    for (let i = zones.length - 1; i >= 0; i--) {
+      const hit = tryZone(zones[i]);
+      if (hit) return hit;
+    }
+    return null;
+  }
+
+  function pointsAttr(points) {
+    return points.map((p) => `${p.x},${p.y}`).join(" ");
+  }
+
+  function clearSvg(svgEl) {
+    while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+  }
+
+  function appendPolyline(parent, points, className) {
+    if (points.length < 2) return null;
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+    el.setAttribute("class", className);
+    el.setAttribute("points", pointsAttr(points));
+    el.setAttribute("fill", "none");
+    parent.appendChild(el);
+    return el;
+  }
+
+  function appendPolygon(parent, points, className) {
+    if (points.length < 3) return null;
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    el.setAttribute("class", className);
+    el.setAttribute("points", pointsAttr(points));
+    parent.appendChild(el);
+    return el;
+  }
+
+  function appendLine(parent, p1, p2, className) {
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    el.setAttribute("class", className);
+    el.setAttribute("x1", String(p1.x));
+    el.setAttribute("y1", String(p1.y));
+    el.setAttribute("x2", String(p2.x));
+    el.setAttribute("y2", String(p2.y));
+    parent.appendChild(el);
+    return el;
+  }
+
+  function appendVertex(parent, p, className, r = 5, dataAttrs = {}) {
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    el.setAttribute("class", className);
+    el.setAttribute("cx", String(p.x));
+    el.setAttribute("cy", String(p.y));
+    el.setAttribute("r", String(r));
+    Object.entries(dataAttrs).forEach(([k, v]) => el.setAttribute(k, v));
+    parent.appendChild(el);
+    return el;
+  }
+
+  function appendPositionMarker(parent, px, py, yawDeg, selected) {
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    g.setAttribute("class", selected ? "mapObjPosition mapObjPosition--selected" : "mapObjPosition");
+    g.setAttribute("transform", `translate(${px},${py}) rotate(${yawDeg})`);
+
+    const shaft = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    shaft.setAttribute("class", "mapObjPositionShaft");
+    shaft.setAttribute("x1", "0");
+    shaft.setAttribute("y1", "0");
+    shaft.setAttribute("x2", "22");
+    shaft.setAttribute("y2", "0");
+    g.appendChild(shaft);
+
+    const head = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    head.setAttribute("class", "mapObjPositionHead");
+    head.setAttribute("points", "22,0 14,-5 14,5");
+    g.appendChild(head);
+
+    const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    dot.setAttribute("class", "mapObjPositionDot");
+    dot.setAttribute("cx", "0");
+    dot.setAttribute("cy", "0");
+    dot.setAttribute("r", "4");
+    g.appendChild(dot);
+
+    parent.appendChild(g);
+    return g;
+  }
+
+  function appendSelectionRect(parent, rect) {
+    if (!rect) return null;
+    const x = Math.min(rect.x0, rect.x1);
+    const y = Math.min(rect.y0, rect.y1);
+    const w = Math.abs(rect.x1 - rect.x0);
+    const h = Math.abs(rect.y1 - rect.y0);
+    if (w < 1 && h < 1) return null;
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    el.setAttribute("class", "mapObjSelectionRect");
+    el.setAttribute("x", String(x));
+    el.setAttribute("y", String(y));
+    el.setAttribute("width", String(w));
+    el.setAttribute("height", String(h));
+    parent.appendChild(el);
+    return el;
+  }
+
+  function polygonCentroid(points) {
+    if (!points?.length) return null;
+    let x = 0;
+    let y = 0;
+    for (const p of points) {
+      x += p.x;
+      y += p.y;
+    }
+    return { x: x / points.length, y: y / points.length };
+  }
+
+  function lineMidpoint(points) {
+    if (!points?.length) return null;
+    if (points.length === 1) return { ...points[0] };
+    const p0 = points[0];
+    const p1 = points[points.length - 1];
+    return { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 };
+  }
+
+  function appendDirectionArrow(parent, cx, cy, directionDeg, selected = false) {
+    const adv = window.MapAdvancedZones;
+    const deg = adv?.normalizeDirectionDeg(directionDeg) ?? 0;
+    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    g.setAttribute(
+      "class",
+      selected ? "mapObjDirectionArrow mapObjDirectionArrow--selected" : "mapObjDirectionArrow",
+    );
+    g.setAttribute("transform", `translate(${cx},${cy}) rotate(${-deg})`);
+
+    const shaft = document.createElementNS("http://www.w3.org/2000/svg", "line");
+    shaft.setAttribute("class", "mapObjDirectionShaft");
+    shaft.setAttribute("x1", "-14");
+    shaft.setAttribute("y1", "0");
+    shaft.setAttribute("x2", "14");
+    shaft.setAttribute("y2", "0");
+    g.appendChild(shaft);
+
+    const head = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    head.setAttribute("class", "mapObjDirectionHead");
+    head.setAttribute("points", "14,0 6,-5 6,5");
+    g.appendChild(head);
+
+    parent.appendChild(g);
+    return g;
+  }
+
+  function appendPolylineStyled(parent, points, className, strokeWidth = null) {
+    const el = appendPolyline(parent, points, className);
+    if (el && strokeWidth != null) el.setAttribute("stroke-width", String(strokeWidth));
+    return el;
+  }
+
+  function polygonClass(type, selected, draft = false) {
+    const base = {
+      [TYPES.floor]: "mapObjFloor",
+      [TYPES.forbidden]: "mapObjForbidden",
+      [TYPES.preferred]: "mapObjPreferred",
+      [TYPES.unpreferred]: "mapObjUnpreferred",
+      [TYPES.speed]: "mapObjSpeed",
+      [TYPES.sound]: "mapObjSound",
+      [TYPES.directional]: "mapObjDirectional",
+      [TYPES.planner]: "mapObjPlannerSettings",
+      [TYPES.io]: "mapObjIo",
+    }[type];
+    if (!base) return "";
+    if (draft) return `${base} ${base}--draft`;
+    if (selected) return `${base} ${base}--selected`;
+    return base;
+  }
+
+  function filterVisible(zones, visibility) {
+    const vis = visibility || {};
+    return zones.filter((z) => {
+      if (z.type === TYPES.wall) return vis.walls !== false;
+      if (z.type === TYPES.floor) return vis.floors !== false;
+      if (z.type === TYPES.position) return vis.positions !== false;
+      if (z.type === TYPES.forbidden) return vis.forbidden !== false;
+      if (z.type === TYPES.preferred) return vis.preferred !== false;
+      if (z.type === TYPES.unpreferred) return vis.unpreferred !== false;
+      if (z.type === TYPES.speed) return vis.speed !== false;
+      if (z.type === TYPES.sound) return vis.sound !== false;
+      if (z.type === TYPES.directional || z.type === TYPES.directional_line) {
+        return vis.directional !== false;
+      }
+      if (z.type === TYPES.planner) return vis.planner !== false;
+      if (z.type === TYPES.io) return vis.io !== false;
+      return true;
+    });
+  }
+
+  /**
+   * Render map objects on SVG overlay.
+   * @param {SVGSVGElement} svgEl
+   * @param {object[]} zones
+   * @param {object} opts
+   */
+  function render(svgEl, zones, opts = {}) {
+    if (!svgEl) return;
+    clearSvg(svgEl);
+
+    const mapMeta = opts.mapMeta || {};
+    const imgW = opts.imageWidth || 0;
+    const imgH = opts.imageHeight || 0;
+    const list = filterVisible(zones, opts.visibility);
+
+    list.forEach((z) => {
+      const selected = z.id === opts.selectedId;
+      if (z.type === TYPES.wall) {
+        appendPolyline(svgEl, z.points, selected ? "mapObjWall mapObjWall--selected" : "mapObjWall");
+      } else if (z.type === TYPES.directional_line) {
+        const cls = selected
+          ? "mapObjDirectionalLine mapObjDirectionalLine--selected"
+          : "mapObjDirectionalLine";
+        appendPolylineStyled(svgEl, z.points, cls, z.line_width || 8);
+        const mid = lineMidpoint(z.points);
+        if (mid) {
+          appendDirectionArrow(
+            svgEl,
+            mid.x,
+            mid.y,
+            window.MapAdvancedZones?.zoneDirectionDeg(z) ?? 0,
+            selected,
+          );
+        }
+      } else if (isPolygonType(z.type)) {
+        appendPolygon(svgEl, z.points, polygonClass(z.type, selected));
+        if (z.type === TYPES.directional) {
+          const c = polygonCentroid(z.points);
+          if (c) appendDirectionArrow(svgEl, c.x, c.y, z.direction_deg ?? 0, selected);
+        }
+      } else if (z.type === TYPES.position) {
+        const pt = positionPixel(z, mapMeta, imgW, imgH);
+        if (pt) {
+          const yawDeg = (-Number(z.yaw) * 180) / Math.PI;
+          appendPositionMarker(svgEl, pt.x, pt.y, yawDeg, selected);
+        }
+      }
+    });
+
+    if (opts.selectedId && opts.showVertices !== false) {
+      const sel = list.find((z) => z.id === opts.selectedId);
+      if (sel && isPointShapeType(sel.type)) {
+        sel.points.forEach((p, i) => {
+          appendVertex(svgEl, p, "mapObjVertex mapObjVertex--handle", 6, {
+            "data-vertex-index": String(i),
+          });
+        });
+      }
+    }
+
+    const draft = opts.draft;
+    if (draft?.kind === "shape" && draft.type && Array.isArray(draft.points) && draft.points.length) {
+      const pts = draft.points;
+      const hover = draft.hover;
+      if (draft.type === TYPES.wall || draft.type === TYPES.directional_line) {
+        const draftCls =
+          draft.type === TYPES.directional_line
+            ? "mapObjDirectionalLine mapObjDirectionalLine--draft"
+            : "mapObjWall mapObjWall--draft";
+        appendPolylineStyled(svgEl, pts, draftCls, draft.type === TYPES.directional_line ? 8 : null);
+        if (hover && pts.length) appendLine(svgEl, pts[pts.length - 1], hover, "mapObjDraftLine");
+      } else if (isPolygonType(draft.type)) {
+        if (pts.length >= 3) appendPolygon(svgEl, pts, polygonClass(draft.type, false, true));
+        else if (pts.length === 2) appendPolyline(svgEl, pts, "mapObjDraftLine");
+        if (hover && pts.length) appendLine(svgEl, pts[pts.length - 1], hover, "mapObjDraftLine");
+        appendVertex(svgEl, pts[0], "mapObjCloseHint", 6);
+      }
+      pts.forEach((p) => appendVertex(svgEl, p, "mapObjVertex"));
+    }
+
+    if (draft?.kind === "position" && draft.px != null && draft.py != null) {
+      const yawDeg = (-Number(draft.yaw || 0) * 180) / Math.PI;
+      appendPositionMarker(svgEl, draft.px, draft.py, yawDeg, true);
+    }
+
+    appendSelectionRect(svgEl, opts.selectionRect);
+  }
+
+  function constrainAxis(from, to) {
+    const dx = Math.abs(to.x - from.x);
+    const dy = Math.abs(to.y - from.y);
+    if (dx >= dy) return { x: to.x, y: from.y };
+    return { x: from.x, y: to.y };
+  }
+
+  function nearPoint(a, b, tolerance = 12) {
+    return dist(a, b) <= tolerance;
+  }
+
+  function yawFromPoints(origin, target) {
+    return Math.atan2(-(target.y - origin.y), target.x - origin.x);
+  }
+
+  window.MapObjects = {
+    TYPES,
+    FLOOR_PLAN_TYPES,
+    POLYGON_TYPES,
+    POINT_SHAPE_TYPES,
+    newId,
+    parseZones,
+    createZone,
+    createPosition,
+    minPoints,
+    isFloorPlanType,
+    isPlannerZoneType,
+    isBehaviorZoneType,
+    isAdvancedZoneType,
+    isDirectionalLineType,
+    clampSpeedMps,
+    isPolygonType,
+    isPolylineType,
+    isPointShapeType,
+    isOverlayObjectType,
+    isValidZone,
+    hitTest,
+    hitTestPlannerZone,
+    hitTestBehaviorZone,
+    hitTestAdvancedZone,
+    hitTestPosition,
+    hitTestAny,
+    hitTestVertex,
+    positionPixel,
+    render,
+    filterVisible,
+    constrainAxis,
+    nearPoint,
+    yawFromPoints,
+  };
+})();
diff --git a/www/map-occupancy-edit.js b/www/map-occupancy-edit.js
new file mode 100644
index 0000000..a93e7b9
--- /dev/null
+++ b/www/map-occupancy-edit.js
@@ -0,0 +1,234 @@
+(() => {
+  /**
+   * map_server grayscale editing — bake walls/floors and brush-erase on floor-plan raster.
+   * Values match ROS map_server convention (see map-occupancy-canvas.js).
+   */
+  const GRAY = {
+    free: 254,
+    occupied: 0,
+    unknown: 205,
+  };
+
+  const DEFAULT_LINE_WIDTH = 3;
+  const DEFAULT_BRUSH_RADIUS = 10;
+
+  function ensureCanvas(canvas, width, height) {
+    if (!canvas) return null;
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+    return canvas.getContext("2d");
+  }
+
+  function copyCanvas(src, dst) {
+    if (!src?.width || !dst) return false;
+    const ctx = ensureCanvas(dst, src.width, src.height);
+    if (!ctx) return false;
+    ctx.drawImage(src, 0, 0);
+    return true;
+  }
+
+  /**
+   * Composite = base scan + floor polygons (free) + wall polylines (occupied).
+   * @param {HTMLCanvasElement} baseCanvas
+   * @param {HTMLCanvasElement} outCanvas
+   * @param {object[]} zones
+   */
+  function rebakeComposite(baseCanvas, outCanvas, zones) {
+    if (!baseCanvas?.width || !outCanvas) return false;
+    copyCanvas(baseCanvas, outCanvas);
+    const list = Array.isArray(zones) ? zones : [];
+    list.filter((z) => z?.type === "floor").forEach((z) => bakeFloor(outCanvas, z.points));
+    list.filter((z) => z?.type === "wall").forEach((z) => bakeWall(outCanvas, z.points));
+    return true;
+  }
+
+  /** Load PNG pixels into editable grayscale source canvas. */
+  function initSourceFromImage(sourceCanvas, imageEl) {
+    if (!sourceCanvas || !imageEl?.naturalWidth) return false;
+    const w = imageEl.naturalWidth;
+    const h = imageEl.naturalHeight;
+    const ctx = ensureCanvas(sourceCanvas, w, h);
+    if (!ctx) return false;
+    ctx.drawImage(imageEl, 0, 0, w, h);
+    return true;
+  }
+
+  function cloneRaster(sourceCanvas) {
+    if (!sourceCanvas?.width) return null;
+    const ctx = sourceCanvas.getContext("2d");
+    if (!ctx) return null;
+    return ctx.getImageData(0, 0, sourceCanvas.width, sourceCanvas.height);
+  }
+
+  function restoreRaster(sourceCanvas, imageData) {
+    if (!sourceCanvas || !imageData) return false;
+    const ctx = ensureCanvas(sourceCanvas, imageData.width, imageData.height);
+    if (!ctx) return false;
+    ctx.putImageData(imageData, 0, 0);
+    return true;
+  }
+
+  function grayRgb(gray) {
+    const g = Math.max(0, Math.min(255, gray | 0));
+    return `rgb(${g},${g},${g})`;
+  }
+
+  /** Paint display canvas from grayscale source using map_server thresholds. */
+  function renderDisplayFromSource(displayCanvas, sourceCanvas, meta, occModule) {
+    const occ = occModule || window.MapOccupancyCanvas;
+    if (!occ?.renderFromImage || !displayCanvas || !sourceCanvas?.width) return false;
+    return occ.renderFromImage(displayCanvas, sourceCanvas, meta || {});
+  }
+
+  function strokePolyline(ctx, points, gray, lineWidth = DEFAULT_LINE_WIDTH) {
+    if (!ctx || !points || points.length < 2) return;
+    ctx.save();
+    ctx.strokeStyle = grayRgb(gray);
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    points.forEach((p, i) => {
+      if (i === 0) ctx.moveTo(p.x, p.y);
+      else ctx.lineTo(p.x, p.y);
+    });
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  function fillPolygon(ctx, points, gray) {
+    if (!ctx || !points || points.length < 3) return;
+    ctx.save();
+    ctx.fillStyle = grayRgb(gray);
+    ctx.beginPath();
+    points.forEach((p, i) => {
+      if (i === 0) ctx.moveTo(p.x, p.y);
+      else ctx.lineTo(p.x, p.y);
+    });
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+
+  /** Bake wall polyline as occupied pixels. */
+  function bakeWall(sourceCanvas, points, lineWidth = DEFAULT_LINE_WIDTH) {
+    const ctx = sourceCanvas?.getContext("2d");
+    if (!ctx) return false;
+    strokePolyline(ctx, points, GRAY.occupied, lineWidth);
+    return true;
+  }
+
+  /** Bake floor polygon as free walkable pixels. */
+  function bakeFloor(sourceCanvas, points) {
+    const ctx = sourceCanvas?.getContext("2d");
+    if (!ctx) return false;
+    fillPolygon(ctx, points, GRAY.free);
+    return true;
+  }
+
+  /** Remove baked wall by painting free along its path. */
+  function unbakeWall(sourceCanvas, points, lineWidth = DEFAULT_LINE_WIDTH + 2) {
+    const ctx = sourceCanvas?.getContext("2d");
+    if (!ctx) return false;
+    strokePolyline(ctx, points, GRAY.free, lineWidth);
+    return true;
+  }
+
+  function bakeZone(sourceCanvas, zone) {
+    if (!zone?.points?.length) return false;
+    if (zone.type === "wall") return bakeWall(sourceCanvas, zone.points);
+    if (zone.type === "floor") return bakeFloor(sourceCanvas, zone.points);
+    return false;
+  }
+
+  function unbakeZone(sourceCanvas, zone) {
+    if (!zone?.points?.length) return false;
+    if (zone.type === "wall") return unbakeWall(sourceCanvas, zone.points);
+    if (zone.type === "floor") {
+      const ctx = sourceCanvas?.getContext("2d");
+      if (!ctx) return false;
+      fillPolygon(ctx, zone.points, GRAY.unknown);
+      return true;
+    }
+    return false;
+  }
+
+  function paintBrush(sourceCanvas, x, y, layer, radius = DEFAULT_BRUSH_RADIUS) {
+    const ctx = sourceCanvas?.getContext("2d");
+    if (!ctx) return false;
+    const gray = layer === "floor" ? GRAY.unknown : GRAY.free;
+    ctx.save();
+    ctx.fillStyle = grayRgb(gray);
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+    return true;
+  }
+
+  /** Erase pixels inside axis-aligned rectangle on base layer. */
+  function eraseRect(sourceCanvas, x0, y0, x1, y1, layer) {
+    const ctx = sourceCanvas?.getContext("2d");
+    if (!ctx) return false;
+    const gray = layer === "floor" ? GRAY.unknown : GRAY.free;
+    const x = Math.min(x0, x1);
+    const y = Math.min(y0, y1);
+    const w = Math.abs(x1 - x0);
+    const h = Math.abs(y1 - y0);
+    if (w < 1 || h < 1) return false;
+    ctx.save();
+    ctx.fillStyle = grayRgb(gray);
+    ctx.fillRect(x, y, w, h);
+    ctx.restore();
+    return true;
+  }
+
+  /** Interpolated brush stroke between two image-space points. */
+  function paintBrushStroke(sourceCanvas, x0, y0, x1, y1, layer, radius = DEFAULT_BRUSH_RADIUS) {
+    const dist = Math.hypot(x1 - x0, y1 - y0);
+    const step = Math.max(1, radius * 0.5);
+    const n = Math.max(1, Math.ceil(dist / step));
+    for (let i = 0; i <= n; i++) {
+      const t = i / n;
+      paintBrush(sourceCanvas, x0 + (x1 - x0) * t, y0 + (y1 - y0) * t, layer, radius);
+    }
+  }
+
+  function exportPngBlob(sourceCanvas) {
+    return new Promise((resolve, reject) => {
+      if (!sourceCanvas?.width) {
+        reject(new Error("no source canvas"));
+        return;
+      }
+      sourceCanvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("export failed"));
+        },
+        "image/png",
+      );
+    });
+  }
+
+  window.MapOccupancyEdit = {
+    GRAY,
+    DEFAULT_LINE_WIDTH,
+    DEFAULT_BRUSH_RADIUS,
+    initSourceFromImage,
+    cloneRaster,
+    restoreRaster,
+    copyCanvas,
+    rebakeComposite,
+    renderDisplayFromSource,
+    bakeWall,
+    bakeFloor,
+    bakeZone,
+    unbakeZone,
+    paintBrush,
+    paintBrushStroke,
+    eraseRect,
+    exportPngBlob,
+  };
+})();
diff --git a/www/map-planner-zones.js b/www/map-planner-zones.js
new file mode 100644
index 0000000..44e7b73
--- /dev/null
+++ b/www/map-planner-zones.js
@@ -0,0 +1,104 @@
+(() => {
+  /**
+   * Planner hooks for Forbidden / Preferred / Unpreferred drive zones (MiR §4.2.6.6).
+   * Vector overlay only — consumed by future global planner / path preview.
+   */
+  const TYPES = {
+    forbidden: "forbidden",
+    preferred: "preferred",
+    unpreferred: "unpreferred",
+  };
+
+  const PLANNER_TYPES = new Set([TYPES.forbidden, TYPES.preferred, TYPES.unpreferred]);
+
+  /** Relative traversal cost (forbidden = impassable). */
+  const COST = {
+    forbidden: Infinity,
+    unpreferred: 4,
+    preferred: 0.35,
+    neutral: 1,
+  };
+
+  function pointInPolygon(px, py, points) {
+    if (!points?.length) return false;
+    let inside = false;
+    for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+      const xi = points[i].x;
+      const yi = points[i].y;
+      const xj = points[j].x;
+      const yj = points[j].y;
+      const intersect = yi > py !== yj > py && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi;
+      if (intersect) inside = !inside;
+    }
+    return inside;
+  }
+
+  function isPlannerZoneType(type) {
+    return PLANNER_TYPES.has(type);
+  }
+
+  function filterPlannerZones(zones) {
+    return (Array.isArray(zones) ? zones : []).filter((z) => isPlannerZoneType(z?.type));
+  }
+
+  /** Topmost planner zones containing image pixel (newest wins for overlaps). */
+  function zonesAtPoint(zones, px, py) {
+    const list = Array.isArray(zones) ? zones : [];
+    const hits = [];
+    for (let i = list.length - 1; i >= 0; i--) {
+      const z = list[i];
+      if (!isPlannerZoneType(z?.type) || !z.points?.length) continue;
+      if (pointInPolygon(px, py, z.points)) hits.push(z);
+    }
+    return hits;
+  }
+
+  function pixelCost(zones, px, py) {
+    const hits = zonesAtPoint(zones, px, py);
+    if (hits.some((z) => z.type === TYPES.forbidden)) return COST.forbidden;
+    if (hits.some((z) => z.type === TYPES.unpreferred)) return COST.unpreferred;
+    if (hits.some((z) => z.type === TYPES.preferred)) return COST.preferred;
+    return COST.neutral;
+  }
+
+  function classifyPoint(zones, px, py) {
+    const hits = zonesAtPoint(zones, px, py);
+    return {
+      forbidden: hits.some((z) => z.type === TYPES.forbidden),
+      preferred: hits.some((z) => z.type === TYPES.preferred),
+      unpreferred: hits.some((z) => z.type === TYPES.unpreferred),
+      zones: hits,
+      cost: pixelCost(zones, px, py),
+    };
+  }
+
+  function isPathBlocked(zones, pathPoints) {
+    const pts = Array.isArray(pathPoints) ? pathPoints : [];
+    return pts.some((p) => pixelCost(zones, p.x, p.y) === COST.forbidden);
+  }
+
+  function pathCost(zones, pathPoints) {
+    const pts = Array.isArray(pathPoints) ? pathPoints : [];
+    let sum = 0;
+    for (const p of pts) {
+      const c = pixelCost(zones, p.x, p.y);
+      if (!Number.isFinite(c)) return Infinity;
+      sum += c;
+    }
+    return sum;
+  }
+
+  window.MapPlannerZones = {
+    TYPES,
+    PLANNER_TYPES,
+    COST,
+    isPlannerZoneType,
+    filterPlannerZones,
+    zonesAtPoint,
+    pixelCost,
+    classifyPoint,
+    isPathBlocked,
+    pathCost,
+    pointInPolygon,
+  };
+})();
diff --git a/www/nav.js b/www/nav.js
index 9e8afc7..6fecbf4 100644
--- a/www/nav.js
+++ b/www/nav.js
@@ -15,6 +15,7 @@
       items: [
         { section: "missions", page: "missions" },
         { section: "maps", page: "maps" },
+        { section: "sounds", page: "sounds" },
         { section: "build-robot", page: "config" },
       ],
     },
@@ -34,6 +35,7 @@
     config: { module: "setup", section: "build-robot" },
     maps: { module: "setup", section: "maps" },
     missions: { module: "setup", section: "missions" },
+    sounds: { module: "setup", section: "sounds" },
     integrations: { module: "system", section: "integrations" },
     monitoring: { module: "monitoring", section: "monitoring-log" },
     help: { module: "help", section: "help-api" },
diff --git a/www/sounds.js b/www/sounds.js
new file mode 100644
index 0000000..d7614ad
--- /dev/null
+++ b/www/sounds.js
@@ -0,0 +1,280 @@
+(() => {
+  const el = (id) => document.getElementById(id);
+  const t = (key, vars) => window.I18n?.t(key, vars) ?? key;
+
+  const listEl = el("soundList");
+  const emptyEl = el("soundListEmpty");
+  const createBtnEl = el("soundCreateBtn");
+  const dialogEl = el("soundEditDialog");
+  const formEl = el("soundEditForm");
+  const titleEl = el("soundEditTitle");
+  const nameEl = el("soundEditName");
+  const descEl = el("soundEditDescription");
+  const enabledEl = el("soundEditEnabled");
+  const fileMetaEl = el("soundEditFileMeta");
+  const uploadInputEl = el("soundEditUploadInput");
+  const uploadBtnEl = el("soundEditUploadBtn");
+  const playBtnEl = el("soundEditPlayBtn");
+  const deleteBtnEl = el("soundEditDeleteBtn");
+
+  const store = {
+    sounds: [],
+    editingId: null,
+    previewAudio: null,
+  };
+
+  function canWrite() {
+    if (!window.AuthApp?.canWrite) return true;
+    return window.AuthApp.canWrite("integrations");
+  }
+
+  function escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  async function apiJson(url, opts = {}) {
+    if (window.AuthApp && !window.AuthApp.isReady()) {
+      throw new Error("not authenticated");
+    }
+    const res = await fetch(url, { credentials: "include", ...opts });
+    const text = await res.text();
+    let data = null;
+    try {
+      data = text ? JSON.parse(text) : null;
+    } catch {
+      data = null;
+    }
+    if (!res.ok) {
+      const msg = (data && data.error) || text || res.statusText;
+      throw new Error(msg);
+    }
+    return data;
+  }
+
+  async function refreshSounds() {
+    const data = await apiJson("/api/sounds");
+    store.sounds = Array.isArray(data.sounds) ? data.sounds : [];
+  }
+
+  function formatDuration(ms) {
+    if (!Number.isFinite(Number(ms))) return "—";
+    const sec = Math.round(Number(ms) / 100) / 10;
+    return `${sec}s`;
+  }
+
+  function renderList() {
+    if (!listEl) return;
+    listEl.innerHTML = "";
+    if (emptyEl) emptyEl.hidden = store.sounds.length > 0;
+
+    store.sounds.forEach((sound) => {
+      const row = document.createElement("div");
+      row.className = "missionListItem soundListItem";
+      const hasFile = !!sound.file_name;
+      row.innerHTML = `
+        <div>
+          <div class="missionListItemTitle">${escapeHtml(sound.name || sound.id)}</div>
+          <div class="missionListItemMeta">
+            ${sound.enabled === false ? t("common.disabled") : t("common.enabled")}
+            · ${hasFile ? escapeHtml(sound.file_name) : t("sounds.noFile")}
+            ${sound.duration_ms != null ? ` · ${formatDuration(sound.duration_ms)}` : ""}
+          </div>
+        </div>
+        <div class="missionListItemActions">
+          <button type="button" class="btn subtle soundPlayBtn" data-id="${escapeHtml(sound.id)}" ${hasFile ? "" : "disabled"}>${t("sounds.play")}</button>
+          <button type="button" class="btn subtle soundEditBtn" data-id="${escapeHtml(sound.id)}">${t("common.edit")}</button>
+        </div>
+      `;
+      listEl.appendChild(row);
+    });
+
+    listEl.querySelectorAll(".soundEditBtn").forEach((btn) => {
+      btn.addEventListener("click", () => openDialog(btn.dataset.id));
+    });
+    listEl.querySelectorAll(".soundPlayBtn").forEach((btn) => {
+      btn.addEventListener("click", () => playSound(btn.dataset.id));
+    });
+  }
+
+  function stopPreview() {
+    if (store.previewAudio) {
+      store.previewAudio.pause();
+      store.previewAudio = null;
+    }
+  }
+
+  function playSound(id) {
+    stopPreview();
+    const audio = new Audio(`/api/sounds/${encodeURIComponent(id)}/file`);
+    store.previewAudio = audio;
+    audio.play().catch(() => alert(t("sounds.playFailed")));
+  }
+
+  function updateFileMeta(sound) {
+    if (!fileMetaEl) return;
+    if (sound?.file_name) {
+      fileMetaEl.textContent = t("sounds.fileMeta", {
+        name: sound.file_name,
+        duration: formatDuration(sound.duration_ms),
+      });
+    } else {
+      fileMetaEl.textContent = t("sounds.noFile");
+    }
+    if (playBtnEl) playBtnEl.disabled = !sound?.file_name;
+  }
+
+  function openDialog(id = null) {
+    store.editingId = id;
+    const existing = id ? store.sounds.find((s) => s.id === id) : null;
+    if (titleEl) {
+      titleEl.textContent = existing ? t("sounds.editTitle") : t("sounds.createTitle");
+    }
+    if (nameEl) nameEl.value = existing?.name || "";
+    if (descEl) descEl.value = existing?.description || "";
+    if (enabledEl) enabledEl.checked = existing?.enabled !== false;
+    updateFileMeta(existing);
+    if (deleteBtnEl) deleteBtnEl.hidden = !existing || !canWrite();
+    if (uploadBtnEl) uploadBtnEl.disabled = !canWrite();
+    if (nameEl) nameEl.readOnly = !canWrite();
+    if (descEl) descEl.readOnly = !canWrite();
+    if (enabledEl) enabledEl.disabled = !canWrite();
+    dialogEl?.showModal();
+  }
+
+  async function saveDialog() {
+    if (!canWrite()) return;
+    const name = nameEl?.value.trim() || "";
+    if (!name) {
+      alert(t("sounds.nameRequired"));
+      return;
+    }
+    const payload = {
+      name,
+      description: descEl?.value.trim() || "",
+      enabled: enabledEl?.checked !== false,
+    };
+    try {
+      if (store.editingId) {
+        await apiJson(`/api/sounds/${encodeURIComponent(store.editingId)}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+      } else {
+        const created = await apiJson("/api/sounds", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        store.editingId = created.id;
+      }
+      await refreshSounds();
+      renderList();
+      const updated = store.sounds.find((s) => s.id === store.editingId);
+      updateFileMeta(updated);
+      if (!uploadInputEl?.files?.length) {
+        dialogEl?.close();
+      }
+    } catch (e) {
+      alert(e.message);
+    }
+  }
+
+  async function uploadFile() {
+    if (!canWrite() || !store.editingId) return;
+    const file = uploadInputEl?.files?.[0];
+    if (!file) return;
+    const form = new FormData();
+    form.append("file", file);
+    try {
+      await apiJson(`/api/sounds/${encodeURIComponent(store.editingId)}/file`, {
+        method: "POST",
+        body: form,
+      });
+      uploadInputEl.value = "";
+      await refreshSounds();
+      renderList();
+      updateFileMeta(store.sounds.find((s) => s.id === store.editingId));
+    } catch (e) {
+      alert(e.message);
+    }
+  }
+
+  async function deleteSound() {
+    if (!canWrite() || !store.editingId) return;
+    if (!confirm(t("sounds.deleteConfirm"))) return;
+    try {
+      await apiJson(`/api/sounds/${encodeURIComponent(store.editingId)}`, { method: "DELETE" });
+      dialogEl?.close();
+      store.editingId = null;
+      await refreshSounds();
+      renderList();
+    } catch (e) {
+      alert(e.message);
+    }
+  }
+
+  function bindEvents() {
+    createBtnEl?.addEventListener("click", () => {
+      if (!canWrite()) return;
+      openDialog(null);
+    });
+    formEl?.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+      saveDialog();
+    });
+    el("soundEditCancelBtn")?.addEventListener("click", () => {
+      stopPreview();
+      dialogEl?.close();
+    });
+    dialogEl?.addEventListener("cancel", (evt) => {
+      evt.preventDefault();
+      stopPreview();
+      dialogEl?.close();
+    });
+    uploadBtnEl?.addEventListener("click", () => uploadInputEl?.click());
+    uploadInputEl?.addEventListener("change", () => {
+      saveDialog().then(() => uploadFile());
+    });
+    playBtnEl?.addEventListener("click", () => {
+      if (store.editingId) playSound(store.editingId);
+    });
+    deleteBtnEl?.addEventListener("click", () => deleteSound());
+  }
+
+  async function onPageShow() {
+    stopPreview();
+    if (createBtnEl) createBtnEl.hidden = !canWrite();
+    try {
+      await refreshSounds();
+      renderList();
+    } catch (e) {
+      if (emptyEl) {
+        emptyEl.hidden = false;
+        emptyEl.textContent = e.message;
+      }
+    }
+  }
+
+  function onPageHide() {
+    stopPreview();
+    dialogEl?.close();
+  }
+
+  function getSounds() {
+    return JSON.parse(JSON.stringify(store.sounds));
+  }
+
+  bindEvents();
+
+  window.SoundsApp = {
+    onPageShow,
+    onPageHide,
+    getSounds,
+    refreshSounds,
+  };
+})();
diff --git a/www/style.css b/www/style.css
index fdaab13..5513b62 100644
--- a/www/style.css
+++ b/www/style.css
@@ -3642,6 +3642,21 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   margin-top: 18px;
 }
 
+.mapsMirDialogFooter--inline {
+  justify-content: flex-start;
+  margin-top: 8px;
+}
+
+.mapsMirField--checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mapsMirField--checkbox input {
+  width: auto;
+}
+
 .mapsMirMenuList {
   list-style: none;
   margin: 0;
@@ -3795,6 +3810,12 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   flex-shrink: 0;
   min-height: 40px;
   overflow-x: auto;
+  position: relative;
+  z-index: 20;
+}
+
+.mapEditorObjectTypePicker.is-open {
+  z-index: 210;
 }
 
 .mapEditorMappingBarSpacer {
@@ -3839,20 +3860,161 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   background: rgba(255, 255, 255, 0.5);
 }
 
-.mapEditorObjectSelect {
+.mapEditorObjectTypePicker {
+  position: relative;
   flex: 1 1 220px;
   min-width: 180px;
   max-width: none;
-  height: 40px;
-  padding: 0 28px 0 12px;
-  border: none;
   border-right: 1px solid #c4c4c4;
+}
+
+.mapEditorObjectTypeBtn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 40px;
+  padding: 0 28px 0 10px;
+  border: none;
   border-radius: 0;
-  font-size: 13px;
+  background: #fff;
   color: #555;
-  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
-  appearance: none;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mapEditorObjectTypeBtn:hover:not(:disabled) {
+  background: #fafafa;
+}
+
+.mapEditorObjectTypeBtn:disabled {
+  color: #b0b0b0;
   cursor: not-allowed;
+  background: #f5f5f5;
+}
+
+.mapEditorObjectTypeBtn[aria-expanded="true"] {
+  background: #fafafa;
+}
+
+.mapEditorObjectTypeIcon,
+.mapEditorObjectTypeOptionIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #666;
+}
+
+.mapEditorObjectTypeIcon {
+  width: 20px;
+  height: 20px;
+}
+
+.mapEditorObjectTypeOptionIcon {
+  width: 22px;
+  height: 22px;
+}
+
+.mapEditorObjectTypeOptionIcon--wall {
+  color: #1a1a1a;
+}
+
+.mapEditorObjectTypeOptionIcon--floor {
+  color: #666;
+}
+
+.mapEditorObjectTypeOptionIcon--position {
+  color: #2980b9;
+}
+
+.mapEditorObjectTypeOptionIcon--forbidden {
+  color: #c0392b;
+}
+
+.mapEditorObjectTypeOptionIcon--preferred {
+  color: #27ae60;
+}
+
+.mapEditorObjectTypeOptionIcon--unpreferred {
+  color: #8e44ad;
+}
+
+.mapEditorObjectTypeOptionIcon--speed {
+  color: #e67e22;
+}
+
+.mapEditorObjectTypeOptionIcon--sound {
+  color: #3498db;
+}
+
+.mapEditorObjectTypeOptionIcon--directional {
+  color: #16a085;
+}
+
+.mapEditorObjectTypeOptionIcon--directionalLine {
+  color: #1abc9c;
+}
+
+.mapEditorObjectTypeOptionIcon--planner {
+  color: #7f8c8d;
+}
+
+.mapEditorObjectTypeOptionIcon--io {
+  color: #566573;
+}
+
+.mapEditorObjectTypeLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mapEditorObjectTypeChevron {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #666;
+  pointer-events: none;
+}
+
+.mapEditorObjectTypeMenu {
+  position: fixed;
+  z-index: 200;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: #fff;
+  border: 1px solid #c4c4c4;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+.mapEditorObjectTypeMenu[hidden] {
+  display: none !important;
+}
+
+.mapEditorObjectTypeOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 13px;
+  color: #444;
+  cursor: pointer;
+}
+
+.mapEditorObjectTypeOption:hover,
+.mapEditorObjectTypeOption.is-selected {
+  background: rgba(92, 184, 92, 0.12);
+}
+
+.mapEditorObjectTypeOption.is-selected {
+  color: var(--mir-green, #5cb85c);
+  font-weight: 600;
 }
 
 .mapEditorCanvasWrap {
@@ -4088,6 +4250,354 @@ body.auth-readonly-maps-page .mapsMirMapMenuCancelBtn {
   pointer-events: none;
 }
 
+.mapEditorObjectsSvg {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.mapEditorObjectsSvg .mapObjWall {
+  stroke: #1a1a1a;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjWall--selected {
+  stroke: #e67e22;
+  stroke-width: 4;
+}
+
+.mapEditorObjectsSvg .mapObjWall--draft {
+  stroke: #3498db;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjFloor {
+  fill: rgba(255, 255, 255, 0.82);
+  stroke: #888;
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjFloor--selected {
+  fill: rgba(230, 126, 34, 0.25);
+  stroke: #e67e22;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjFloor--draft {
+  fill: rgba(52, 152, 219, 0.2);
+  stroke: #3498db;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDraftLine {
+  stroke: #3498db;
+  stroke-width: 2;
+  stroke-dasharray: 4 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjVertex {
+  fill: #3498db;
+  stroke: #fff;
+  stroke-width: 1;
+}
+
+.mapEditorObjectsSvg .mapObjCloseHint {
+  fill: none;
+  stroke: #27ae60;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjForbidden {
+  fill: rgba(231, 76, 60, 0.28);
+  stroke: #c0392b;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjForbidden--selected {
+  fill: rgba(231, 76, 60, 0.42);
+  stroke: #e74c3c;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjForbidden--draft {
+  fill: rgba(231, 76, 60, 0.18);
+  stroke: #e74c3c;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjPreferred {
+  fill: rgba(92, 184, 92, 0.28);
+  stroke: #27ae60;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPreferred--selected {
+  fill: rgba(92, 184, 92, 0.42);
+  stroke: #2ecc71;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjPreferred--draft {
+  fill: rgba(92, 184, 92, 0.18);
+  stroke: #2ecc71;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjUnpreferred {
+  fill: rgba(155, 89, 182, 0.24);
+  stroke: #8e44ad;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjUnpreferred--selected {
+  fill: rgba(155, 89, 182, 0.38);
+  stroke: #9b59b6;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjUnpreferred--draft {
+  fill: rgba(155, 89, 182, 0.16);
+  stroke: #9b59b6;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjSpeed {
+  fill: rgba(243, 156, 18, 0.28);
+  stroke: #e67e22;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjSpeed--selected {
+  fill: rgba(243, 156, 18, 0.42);
+  stroke: #f39c12;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjSpeed--draft {
+  fill: rgba(243, 156, 18, 0.18);
+  stroke: #f39c12;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjSound {
+  fill: rgba(52, 152, 219, 0.24);
+  stroke: #2980b9;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjSound--selected {
+  fill: rgba(52, 152, 219, 0.38);
+  stroke: #3498db;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjSound--draft {
+  fill: rgba(52, 152, 219, 0.16);
+  stroke: #3498db;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDirectional {
+  fill: rgba(26, 188, 156, 0.22);
+  stroke: #16a085;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjDirectional--selected {
+  fill: rgba(26, 188, 156, 0.36);
+  stroke: #1abc9c;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjDirectional--draft {
+  fill: rgba(26, 188, 156, 0.14);
+  stroke: #1abc9c;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionalLine {
+  fill: none;
+  stroke: #16a085;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionalLine--selected {
+  stroke: #1abc9c;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionalLine--draft {
+  stroke: #48c9b0;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionArrow {
+  pointer-events: none;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionShaft {
+  stroke: #117a65;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionHead {
+  fill: #117a65;
+  stroke: none;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionArrow--selected .mapObjDirectionShaft {
+  stroke: #0e6655;
+}
+
+.mapEditorObjectsSvg .mapObjDirectionArrow--selected .mapObjDirectionHead {
+  fill: #0e6655;
+}
+
+.mapEditorObjectsSvg .mapObjPlannerSettings {
+  fill: rgba(127, 140, 141, 0.22);
+  stroke: #7f8c8d;
+  stroke-width: 2;
+  stroke-dasharray: 5 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPlannerSettings--selected {
+  fill: rgba(127, 140, 141, 0.34);
+  stroke: #95a5a6;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjPlannerSettings--draft {
+  fill: rgba(127, 140, 141, 0.14);
+  stroke: #95a5a6;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjIo {
+  fill: rgba(86, 101, 115, 0.24);
+  stroke: #566573;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjIo--selected {
+  fill: rgba(86, 101, 115, 0.38);
+  stroke: #5d6d7e;
+  stroke-width: 2.5;
+}
+
+.mapEditorObjectsSvg .mapObjIo--draft {
+  fill: rgba(86, 101, 115, 0.16);
+  stroke: #5d6d7e;
+  stroke-dasharray: 6 4;
+}
+
+.mapEditorObjectsSvg .mapObjVertex--handle {
+  fill: #e67e22;
+  stroke: #fff;
+  stroke-width: 1.5;
+  cursor: grab;
+}
+
+.mapEditorObjectsSvg .mapObjSelectionRect {
+  fill: rgba(231, 76, 60, 0.12);
+  stroke: #e74c3c;
+  stroke-width: 1.5;
+  stroke-dasharray: 5 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPositionShaft {
+  stroke: #2980b9;
+  stroke-width: 3;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.mapEditorObjectsSvg .mapObjPositionHead {
+  fill: #2980b9;
+  stroke: none;
+}
+
+.mapEditorObjectsSvg .mapObjPositionDot {
+  fill: #fff;
+  stroke: #2980b9;
+  stroke-width: 2;
+}
+
+.mapEditorObjectsSvg .mapObjPosition--selected .mapObjPositionShaft {
+  stroke: #e67e22;
+}
+
+.mapEditorObjectsSvg .mapObjPosition--selected .mapObjPositionHead {
+  fill: #e67e22;
+}
+
+.mapEditorObjectsSvg .mapObjPosition--selected .mapObjPositionDot {
+  stroke: #e67e22;
+}
+
+.mapEditorCanvasWrap.is-erase-selection-tool {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-erase-selection-tool .mapEditorViewport {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-draw-tool {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-draw-tool .mapEditorViewport {
+  cursor: crosshair;
+}
+
+.mapEditorCanvasWrap.is-eraser-tool {
+  cursor: cell;
+}
+
+.mapEditorCanvasWrap.is-eraser-tool .mapEditorViewport {
+  cursor: cell;
+}
+
+.mapEditorSourceCanvas {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.mapEditorBaseCanvas {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .mapEditorStatusBar {
   flex-shrink: 0;
   display: grid;