feat: wip web admin for mapping and crud

1 files changed, 775 insertions, 0 deletions

diff --git a/internal/admin/static/map.js b/internal/admin/static/map.js
new file mode 100644
index 0000000..3443339
--- /dev/null
+++ b/internal/admin/static/map.js
@@ -0,0 +1,775 @@
+var CELL = 100;
+var currentZ = 0, currentDir = '', selectedRoom = null, mapData = null;
+var panX = 0, panY = 0, scale = 1;
+var dragging = false, startX = 0, startY = 0, prevX = 0, prevY = 0;
+var dragRoom = false;
+var linkDrag = false, linkFromId = null, linkTargetId = null, linkGhostDir = null;
+var delDrag = false, delFromId = null, delTargetId = null;
+var roomMap = {}, occupied = {};
+var gridDirs = [
+  {dx:0,dy:-1,dir:'north'},{dx:0,dy:1,dir:'south'},
+  {dx:1,dy:0,dir:'east'},{dx:-1,dy:0,dir:'west'},
+  {dx:1,dy:-1,dir:'northeast'},{dx:-1,dy:-1,dir:'northwest'},
+  {dx:1,dy:1,dir:'southeast'},{dx:-1,dy:1,dir:'southwest'}
+];
+var saveTimer = null;
+var upTarget = {}, downTarget = {};
+
+function changeZ(dz) {
+  if (dz === 0) currentZ = 0; else currentZ += dz;
+  loadMap();
+}
+
+function changeDir(dir) {
+  currentDir = dir;
+  loadMap();
+}
+
+function loadMap() {
+  $('#zLabel').textContent = 'Z=' + currentZ;
+  var url = '/api/map?z=' + currentZ;
+  if (currentDir) url += '&dir=' + encodeURIComponent(currentDir);
+  API.get(url).then(function(data) {
+    mapData = data;
+    if (!currentDir && data.dir) {
+      currentDir = data.dir;
+    }
+    updateDirSelect();
+    renderMap(data);
+  }).catch(function(e) {
+    notify('Failed to load map: ' + e.message, 'error');
+  });
+}
+
+function renderMap(data) {
+  var svg = $('#mapSvg');
+  var container = $('#mapContainer');
+  var W = container.clientWidth;
+  var H = container.clientHeight;
+
+  roomMap = {};
+  if (data.rooms) data.rooms.forEach(function(r) { roomMap[r.id] = r; });
+
+  occupied = {};
+  if (data.rooms) data.rooms.forEach(function(r) { occupied[r.x+','+r.y] = r.id; });
+
+  upTarget = {}; downTarget = {};
+  if (data.upLinks) data.upLinks.forEach(function(l) { upTarget[l.from] = l.to; });
+  if (data.downLinks) data.downLinks.forEach(function(l) { downTarget[l.from] = l.to; });
+
+  var svgNS = 'http://www.w3.org/2000/svg';
+  var g = '';
+
+  if (data.links) {
+    data.links.forEach(function(l) {
+      var fr = roomMap[l.from], tr = roomMap[l.to];
+      if (!fr || !tr) return;
+      var x1 = fr.x * CELL + CELL/2, y1 = fr.y * CELL + CELL/2;
+      var x2 = tr.x * CELL + CELL/2, y2 = tr.y * CELL + CELL/2;
+      var c = fr.color ? resolveColor(fr.color) : '#666';
+      c = c.replace('#','');
+      g += '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="#'+c+'" stroke-width="6" opacity="0.35"'+ (l.bidirectional ? '' : ' stroke-dasharray="4,3"')+' vector-effect="non-scaling-stroke"/>';
+    });
+  }
+
+  var hasUp = {}, hasDown = {};
+  if (data.upLinks) data.upLinks.forEach(function(l) { hasUp[l.from] = true; });
+  if (data.downLinks) data.downLinks.forEach(function(l) { hasDown[l.from] = true; });
+
+  var roomHTML = '';
+  if (data.rooms) {
+    data.rooms.forEach(function(r) {
+      var x = r.x * CELL + 8, y = r.y * CELL + 8, w = CELL-16, h = CELL-16;
+      var fill = resolveColor(r.color);
+      var txtColor = hexLuminance(fill) > 0.35 ? '#111' : '#fff';
+      var sel = selectedRoom === r.id;
+      roomHTML += '<rect class="rm" x="'+x+'" y="'+y+'" width="'+w+'" height="'+h+'" rx="5" fill="'+fill+'" stroke="'+(sel?'#fff':fill)+'" stroke-width="'+(sel?3:1.5)+'" data-id="'+r.id+'" data-name="'+esc(r.name)+'"/>';
+      roomHTML += wrapText(r.name, x+w/2, y+h/2, w, txtColor);
+
+      var btnY = y+h-4;
+      var topY = y+4;
+      if (hasUp[r.id] && upTarget[r.id]) {
+        roomHTML += '<g class="ud-hover"><rect class="nav-btn-bg" x="'+(x+3)+'" y="'+(topY+2)+'" width="14" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="nav-btn" x="'+(x+10)+'" y="'+(topY+14)+'" text-anchor="middle" fill="'+txtColor+'" data-action="goto" data-dz="1" data-target="'+upTarget[r.id]+'" title="Go up to #'+upTarget[r.id]+'">\u2191</text></g>';
+      }
+      if (hasDown[r.id] && downTarget[r.id]) {
+        roomHTML += '<g class="ud-hover"><rect class="nav-btn-bg" x="'+(x+w-17)+'" y="'+(topY+2)+'" width="14" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="nav-btn" x="'+(x+w-10)+'" y="'+(topY+14)+'" text-anchor="middle" fill="'+txtColor+'" data-action="goto" data-dz="-1" data-target="'+downTarget[r.id]+'" title="Go down to #'+downTarget[r.id]+'">\u2193</text></g>';
+      }
+
+      if (sel) {
+        var btnX = x + 6, btnBW = 18;
+        roomHTML += '<g class="ud-hover"><rect class="new-btn-bg" x="'+(btnX-2)+'" y="'+(btnY-12)+'" width="'+btnBW+'" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="ud-btn" x="'+(btnX+btnBW/2-2)+'" y="'+btnY+'" text-anchor="middle" font-size="10" fill="'+txtColor+'" data-dir="up" title="Create room up">+\u2191</text></g>';
+        roomHTML += '<g class="ud-hover"><rect class="new-btn-bg" x="'+(x+w-20)+'" y="'+(btnY-12)+'" width="'+btnBW+'" height="14" rx="3" fill="'+txtColor+'" opacity="0.12" pointer-events="none"/><text class="ud-btn" x="'+(x+w-11)+'" y="'+btnY+'" text-anchor="middle" font-size="10" fill="'+txtColor+'" data-dir="down" title="Create room down">+\u2193</text></g>';
+      }
+    });
+  }
+
+  var ghostHTML = '';
+  if (selectedRoom && roomMap[selectedRoom]) {
+    var sr = roomMap[selectedRoom];
+    gridDirs.forEach(function(d) {
+      var nx = sr.x + d.dx, ny = sr.y + d.dy;
+      var key = nx+','+ny;
+      if (!occupied[key]) {
+        ghostHTML += '<rect class="ghost ghost-hover" x="'+(nx*CELL+8)+'" y="'+(ny*CELL+8)+'" width="'+(CELL-16)+'" height="'+(CELL-16)+'" rx="5" fill="rgba(100,200,255,0.12)" stroke="rgba(100,200,255,0.25)" stroke-width="1.5" stroke-dasharray="4,4" data-dir="'+d.dir+'" data-gx="'+nx+'" data-gy="'+ny+'"/>';
+        ghostHTML += '<text x="'+(nx*CELL+CELL/2)+'" y="'+(ny*CELL+CELL/2+4)+'" text-anchor="middle" font-size="11" fill="rgba(255,255,255,0.35)" pointer-events="none" font-family="monospace">+</text>';
+      }
+    });
+  }
+
+  var innerHTML = g + roomHTML + ghostHTML;
+  var vb = [(-panX - W/2)/scale, (-panY - H/2)/scale, W/scale, H/scale];
+  var svgHTML = '<svg width="'+W+'" height="'+H+'" viewBox="'+vb.join(' ')+'" xmlns="'+svgNS+'"><g>'+innerHTML+'</g></svg>';
+  svg.innerHTML = svgHTML;
+
+  svg.addEventListener('contextmenu', function(e) { e.preventDefault(); });
+
+  svg.onmousedown = function(e) {
+    var onRoom = e.target.classList.contains('rm');
+    var onGhost = e.target.classList.contains('ghost');
+    var onUdBtn = e.target.classList.contains('ud-btn');
+    var onNavBtn = e.target.classList.contains('nav-btn');
+
+    if (onNavBtn) {
+      e.stopPropagation();
+      var dz = parseInt(e.target.getAttribute('data-dz'));
+      var tid = parseInt(e.target.getAttribute('data-target'));
+      currentZ += dz;
+      selectedRoom = tid;
+      loadMap();
+      selectRoom(tid);
+      return;
+    }
+
+    if (e.button === 2 && onRoom) {
+      delFromId = parseInt(e.target.getAttribute('data-id'));
+      delDrag = false; delTargetId = null;
+      dragging = true;
+      startX = e.clientX; startY = e.clientY;
+      prevX = e.clientX; prevY = e.clientY;
+      dragRoom = true; linkFromId = null; linkDrag = false; linkTargetId = null; linkGhostDir = null;
+      clearLinkHighlight();
+      return;
+    }
+
+    if (e.button !== 0) return;
+
+    if (onUdBtn) {
+      e.stopPropagation();
+      var dir = e.target.getAttribute('data-dir');
+      createRoom(selectedRoom, dir);
+      return;
+    }
+
+    dragRoom = onRoom || onGhost;
+    dragging = true;
+    startX = e.clientX; startY = e.clientY;
+    prevX = e.clientX; prevY = e.clientY;
+    linkFromId = onRoom ? parseInt(e.target.getAttribute('data-id')) : null;
+    linkDrag = false;
+    linkTargetId = null;
+    linkGhostDir = null;
+    delDrag = false; delFromId = null; delTargetId = null;
+    clearLinkHighlight();
+  };
+
+  svg.onmousemove = function(e) {
+    if (!dragging) return;
+    var moved = Math.abs(e.clientX - startX) >= 4 || Math.abs(e.clientY - startY) >= 4;
+
+    if (delFromId && moved && !delDrag) {
+      delDrag = true;
+    }
+    if (delDrag && moved) {
+      updateDelDragTarget(e);
+      return;
+    }
+
+    if (!dragRoom && !delDrag && !delFromId) {
+      panX += e.clientX - prevX;
+      panY += e.clientY - prevY;
+      prevX = e.clientX; prevY = e.clientY;
+      updateView();
+    }
+
+    if (linkFromId && moved) {
+      linkDrag = true;
+      updateLinkDragTarget(e);
+    }
+  };
+
+  svg.onmouseup = function(e) {
+    if (!dragging) return;
+
+    var moved = Math.abs(e.clientX - startX) >= 4 || Math.abs(e.clientY - startY) >= 4;
+
+    if (delFromId && !delDrag && !moved) {
+      showRoomContextMenu(startX, startY, delFromId);
+      clearDelHighlight();
+      dragging = false; dragRoom = false; delFromId = null; delTargetId = null; delDrag = false;
+      return;
+    }
+
+    if (delDrag && delFromId && delTargetId) {
+      deleteLink(delFromId, delTargetId);
+      clearDelHighlight();
+      dragging = false; dragRoom = false; delDrag = false; delFromId = null; delTargetId = null;
+      return;
+    }
+
+    if (linkDrag && linkFromId) {
+      if (linkTargetId) {
+        createLink(linkFromId, linkTargetId);
+      } else if (linkGhostDir) {
+        createRoom(linkFromId, linkGhostDir);
+      }
+    } else if (!moved && !delDrag) {
+      if (e.target.classList.contains('rm')) {
+        selectRoom(parseInt(e.target.getAttribute('data-id')));
+      } else if (e.target.classList.contains('ghost')) {
+        var dir = e.target.getAttribute('data-dir');
+        createRoom(selectedRoom, dir);
+      }
+    }
+
+    clearLinkHighlight();
+    clearDelHighlight();
+    dragging = false; dragRoom = false;
+    linkDrag = false; linkFromId = null; linkTargetId = null; linkGhostDir = null;
+    delDrag = false; delFromId = null; delTargetId = null;
+  };
+
+  svg.onwheel = function(e) {
+    e.preventDefault();
+    var zf = e.deltaY < 0 ? 1.1 : 0.9;
+    scale *= zf;
+    if (scale < 0.1) scale = 0.1;
+    if (scale > 5) scale = 5;
+    updateView();
+  };
+
+  svg.querySelectorAll('rect.rm').forEach(function(r) {
+    r.addEventListener('mousemove', function(ev) {
+      var tip = $('#tooltip');
+      tip.style.display = 'block';
+      tip.style.left = (ev.clientX+12)+'px';
+      tip.style.top = (ev.clientY+12)+'px';
+      tip.textContent = '#'+r.getAttribute('data-id')+' '+r.getAttribute('data-name');
+    });
+    r.addEventListener('mouseleave', function() {
+      $('#tooltip').style.display = 'none';
+    });
+  });
+}
+
+function wrapText(name, cx, cy, maxWidth, color) {
+  if (!name) name = '';
+  color = color || '#fff';
+  var charW = 6;
+  var maxLen = Math.max(4, Math.floor((maxWidth - 4) / charW));
+  var lines = [];
+  for (var i = 0; i < name.length; i += maxLen) {
+    lines.push(name.substring(i, i + maxLen));
+  }
+  if (lines.length > 3) lines = lines.slice(0, 3);
+  var dy = -(lines.length - 1) * 6;
+  return lines.map(function(l, i) {
+    return '<text x="'+cx+'" y="'+(cy+dy+i*12)+'" text-anchor="middle" font-size="10" fill="'+color+'" pointer-events="none" font-family="monospace">'+esc(l)+'</text>';
+  }).join('');
+}
+
+function updateView() {
+  var svg = document.querySelector('#mapSvg svg');
+  if (!svg) return;
+  var W = svg.parentElement.clientWidth;
+  var H = svg.parentElement.clientHeight;
+  var vb = [(-panX - W/2)/scale, (-panY - H/2)/scale, W/scale, H/scale];
+  svg.setAttribute('viewBox', vb.join(' '));
+}
+
+function selectRoom(id) {
+  selectedRoom = id;
+  loadMap();
+  API.get('/api/rooms/' + id).then(function(data) {
+    renderSidePanel(data);
+  }).catch(function(e) {
+    notify('Failed to load room: '+e.message, 'error');
+  });
+}
+
+function renderSidePanel(data) {
+  var panel = $('#panelContent');
+  if (!data || !data.room) {
+    panel.innerHTML = '<p style="color:#888;text-align:center;margin-top:40px">Room not found</p>';
+    return;
+  }
+  var r = data.room;
+  var file = data.file || '';
+  var html = '<div class="form-group"><label>File</label><span style="font-size:11px;color:#888">' + esc(file) + '</span></div>';
+
+  html += '<div class="form-group"><label>ID</label><input id="roomID" type="number" value="' + r.id + '" onchange="autoSave()"></div>';
+  html += '<div class="form-group"><label>Name</label><input id="roomName" value="' + escAttr(r.name || '') + '" oninput="autoSave()"></div>';
+  html += '<div class="form-group color-field"><label>Color</label><span class="color-swatch" style="background:'+resolveColor(r.color)+'"></span><input id="roomColor" value="' + escAttr(r.color || '') + '" oninput="autoSave()"></div>';
+  html += '<div class="form-group"><label>Directory</label><select id="roomDir" onchange="autoSave()"></select></div>';
+  var descText = '';
+  if (Array.isArray(r.description)) {
+    descText = r.description.map(function(d) { return d.text || ''; }).join('\n\n');
+  } else if (typeof r.description === 'string') {
+    descText = r.description;
+  }
+  html += '<div class="form-group"><label>Description</label><textarea id="roomDesc" rows="4" oninput="autoSave()">' + esc(descText) + '</textarea></div>';
+  html += '<div class="form-group"><label>Hazard</label><input id="roomHazard" value="' + escAttr(r.hazard || '') + '" oninput="autoSave()"></div>';
+  html += '<div class="form-group"><label><input type="checkbox" id="roomBlockTransport" onchange="autoSave()"' + (r.block_transport ? ' checked' : '') + '> Block Transport</label></div>';
+
+  panel.innerHTML = html;
+  setTimeout(function() {
+    var cf = document.querySelector('#panelContent .color-field');
+    if (cf) {
+      bindColorField(cf);
+      var ci = cf.querySelector('input');
+      if (ci) ci.addEventListener('input', function() { autoSave(); });
+    }
+    loadRoomDirs(function(dirs) {
+      var sel = $('#roomDir');
+      if (!sel) return;
+      var current = (file || '').replace(/^data\/rooms\/?/, '').split('/')[0] || '';
+      dirs.forEach(function(d) {
+        var opt = document.createElement('option');
+        opt.value = d;
+        opt.textContent = d || '(root)';
+        if (d === current) opt.selected = true;
+        sel.appendChild(opt);
+      });
+    });
+  }, 50);
+}
+
+function autoSave() {
+  if (saveTimer) clearTimeout(saveTimer);
+  saveTimer = setTimeout(function() { doSavePanel(); }, 600);
+}
+
+function doSavePanel() {
+  var id = selectedRoom;
+  if (!id) return;
+  API.get('/api/rooms/' + id).then(function(data) {
+    var r = data.room || {};
+    r.id = id;
+    var el = $('#roomName'); if (el) r.name = el.value;
+    el = $('#roomColor'); if (el) r.color = el.value;
+    el = $('#roomDesc'); if (el && el.value) r.description = [{text: el.value}];
+    el = $('#roomHazard'); if (el) r.hazard = el.value;
+    el = $('#roomBlockTransport'); if (el) r.block_transport = el.checked;
+
+    var newID = parseInt($('#roomID').value) || id;
+    var newDir = $('#roomDir').value;
+    var currentDir = (data.file || '').replace(/^data\/rooms\/?/, '').split('/')[0] || '';
+
+    var save = function() {
+      API.put('/api/rooms/' + id, r).then(function() {
+        updateUndoBar();
+      }).catch(function(e) { notify('Save failed: '+e.message, 'error'); });
+    };
+
+    if (newDir !== currentDir && newDir !== undefined) {
+      API.post('/api/rooms/move', {id: id, dir: newDir}).then(function() {
+        if (newID !== id) {
+          API.post('/api/rooms/rename', {id: id, new_id: newID}).then(function() {
+            selectRoom(newID);
+          }).catch(function(e) { notify('Rename failed: '+e.message, 'error'); save(); });
+        } else { save(); }
+      }).catch(function(e) { notify('Move failed: '+e.message, 'error'); save(); });
+    } else if (newID !== id) {
+      API.post('/api/rooms/rename', {id: id, new_id: newID}).then(function() {
+        selectRoom(newID);
+      }).catch(function(e) { notify('Rename failed: '+e.message, 'error'); save(); });
+    } else { save(); }
+  });
+}
+
+function deleteRoom(id) {
+  if (!confirm('Delete room #' + id + '?')) return;
+  if (mapData && mapData.rooms) {
+    var neighbors = [];
+    if (mapData.links) {
+      mapData.links.forEach(function(l) {
+        if (l.from === id && l.to !== id) neighbors.push(l.to);
+        if (l.to === id && l.from !== id) neighbors.push(l.from);
+      });
+    }
+    if (neighbors.length > 1) {
+      var remaining = mapData.rooms.filter(function(r) { return r.id !== id; });
+      var adj = {};
+      remaining.forEach(function(r) { adj[r.id] = []; });
+      if (mapData.links) {
+        mapData.links.forEach(function(l) {
+          if (l.from === id || l.to === id) return;
+          if (adj[l.from]) adj[l.from].push(l.to);
+          if (adj[l.to]) adj[l.to].push(l.from);
+        });
+      }
+      if (remaining.length > 0) {
+        var visited = {}, queue = [remaining[0].id];
+        visited[remaining[0].id] = true;
+        while (queue.length > 0) {
+          var cur = queue.shift();
+          (adj[cur] || []).forEach(function(n) { if (!visited[n]) { visited[n] = true; queue.push(n); } });
+        }
+        if (Object.keys(visited).length < remaining.length) {
+          if (!confirm('Deleting room #'+id+' will split the map into disconnected areas. Continue?')) return;
+        }
+      }
+    }
+  }
+  API.del('/api/rooms/' + id).then(function() {
+    notify('Room #' + id + ' deleted', 'success');
+    updateUndoBar();
+    selectedRoom = null;
+    $('#panelContent').innerHTML = '<p style="color:#888;text-align:center;margin-top:40px">Room deleted</p>';
+    loadMap();
+  }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); });
+}
+
+function createRoom(fromID, dir) {
+  API.get('/api/next-room-id?from=' + fromID).then(function(r) {
+    var newID = r.id;
+    var name = 'Room #' + newID;
+    var body = { name: name, link_from: fromID, link_dir: dir };
+    var srcRoom = roomMap[fromID];
+    if (srcRoom && srcRoom.color) body.color = srcRoom.color;
+    API.post('/api/rooms', body).then(function(resp) {
+      var createdId = (resp && resp.room && resp.room.id) || newID;
+      notify('Room #' + createdId + ' created', 'success');
+      updateUndoBar();
+      selectRoom(createdId);
+    }).catch(function(e) { notify('Create failed: ' + e.message, 'error'); });
+  });
+}
+
+function showRoomContextMenu(x, y, id) {
+  var overlay = document.createElement('div');
+  overlay.className = 'cm-overlay';
+  overlay.onclick = function() { overlay.remove(); menu.remove(); };
+
+  var menu = document.createElement('div');
+  menu.className = 'cm-menu';
+  menu.style.left = x + 'px';
+  menu.style.top = y + 'px';
+
+  var delBtn = document.createElement('button');
+  delBtn.textContent = 'Delete Room';
+  delBtn.className = 'danger';
+  delBtn.onclick = function() {
+    overlay.remove(); menu.remove();
+    deleteRoom(id);
+  };
+  menu.appendChild(delBtn);
+
+  var selBtn = document.createElement('button');
+  selBtn.textContent = 'Room Details';
+  selBtn.onclick = function() {
+    overlay.remove(); menu.remove();
+    selectRoom(id);
+  };
+  menu.appendChild(selBtn);
+
+  document.body.appendChild(overlay);
+  document.body.appendChild(menu);
+}
+
+function mouseToGrid(e) {
+  var svgEl = document.querySelector('#mapSvg svg');
+  if (!svgEl) return null;
+  var rect = svgEl.getBoundingClientRect();
+  var mx = e.clientX - rect.left;
+  var my = e.clientY - rect.top;
+  if (mx < 0 || my < 0 || mx > rect.width || my > rect.height) return null;
+  var vb = svgEl.getAttribute('viewBox');
+  if (!vb) return null;
+  var parts = vb.split(' ');
+  var vbX = parseFloat(parts[0]), vbY = parseFloat(parts[1]);
+  var vbW = parseFloat(parts[2]), vbH = parseFloat(parts[3]);
+  var wx = vbX + mx * vbW / rect.width;
+  var wy = vbY + my * vbH / rect.height;
+  return {
+    x: Math.floor(wx / CELL),
+    y: Math.floor(wy / CELL)
+  };
+}
+
+function gridDeltaToDir(dx, dy) {
+  for (var i = 0; i < gridDirs.length; i++) {
+    if (gridDirs[i].dx === dx && gridDirs[i].dy === dy) return gridDirs[i].dir;
+  }
+  return null;
+}
+
+function updateLinkDragTarget(e) {
+  clearLinkHighlight();
+  linkTargetId = null;
+  linkGhostDir = null;
+
+  var fromRoom = mapData.rooms ? mapData.rooms.find(function(r){return r.id === linkFromId;}) : null;
+  if (!fromRoom) return;
+
+  var gp = mouseToGrid(e);
+  if (!gp) return;
+
+  var neighbor = occupied[gp.x+','+gp.y];
+  var gdx = gp.x - fromRoom.x;
+  var gdy = gp.y - fromRoom.y;
+  if (Math.abs(gdx) > 1 || Math.abs(gdy) > 1) return;
+  if (gdx === 0 && gdy === 0) return;
+  var dir = gridDeltaToDir(gdx, gdy);
+  if (!dir) return;
+
+  if (neighbor && neighbor !== linkFromId) {
+    linkTargetId = neighbor;
+    linkGhostDir = null;
+    applyLinkHighlight(linkFromId, linkTargetId);
+  } else if (!neighbor) {
+    linkGhostDir = dir;
+    linkTargetId = null;
+    applyGhostLinkHighlight(fromRoom, gp.x, gp.y);
+  } else {
+    linkGhostDir = null;
+  }
+}
+
+function applyGhostLinkHighlight(fromRoom, gx, gy) {
+  clearLinkHighlight();
+  linkTargetId = null;
+
+  var fromEl = document.querySelector('.rm[data-id="'+linkFromId+'"]');
+  if (!fromEl) return;
+  fromEl.setAttribute('stroke', '#0ff');
+  fromEl.setAttribute('stroke-width', '3');
+
+  var g = document.querySelector('#mapSvg svg g');
+  if (!g) return;
+  var svgNS = 'http://www.w3.org/2000/svg';
+  var line = document.createElementNS(svgNS, 'line');
+  line.id = '__hl_line';
+  line.setAttribute('x1', fromRoom.x * CELL + CELL/2);
+  line.setAttribute('y1', fromRoom.y * CELL + CELL/2);
+  line.setAttribute('x2', gx * CELL + CELL/2);
+  line.setAttribute('y2', gy * CELL + CELL/2);
+  line.setAttribute('stroke', '#0ff');
+  line.setAttribute('stroke-width', '3');
+  line.setAttribute('stroke-dasharray', '6,3');
+  line.setAttribute('pointer-events', 'none');
+  g.appendChild(line);
+}
+
+function applyLinkHighlight(fromId, toId) {
+  clearLinkHighlight();
+
+  var fromEl = document.querySelector('.rm[data-id="'+fromId+'"]');
+  var toEl = document.querySelector('.rm[data-id="'+toId+'"]');
+  var fromRoom = roomMap[fromId];
+  var toRoom = roomMap[toId];
+  if (!fromEl || !toEl || !fromRoom || !toRoom) return;
+
+  fromEl.setAttribute('stroke', '#0ff');
+  fromEl.setAttribute('stroke-width', '3');
+  toEl.setAttribute('stroke', '#f0f');
+  toEl.setAttribute('stroke-width', '3');
+
+  var g = document.querySelector('#mapSvg svg g');
+  if (!g) return;
+  var svgNS = 'http://www.w3.org/2000/svg';
+  var line = document.createElementNS(svgNS, 'line');
+  line.id = '__hl_line';
+  line.setAttribute('x1', fromRoom.x * CELL + CELL/2);
+  line.setAttribute('y1', fromRoom.y * CELL + CELL/2);
+  line.setAttribute('x2', toRoom.x * CELL + CELL/2);
+  line.setAttribute('y2', toRoom.y * CELL + CELL/2);
+  line.setAttribute('stroke', '#f0f');
+  line.setAttribute('stroke-width', '3');
+  line.setAttribute('stroke-dasharray', '6,3');
+  line.setAttribute('pointer-events', 'none');
+  g.appendChild(line);
+}
+
+function clearLinkHighlight() {
+  var line = document.getElementById('__hl_line');
+  if (line) line.remove();
+
+  if (linkFromId) {
+    var el = document.querySelector('.rm[data-id="'+linkFromId+'"]');
+    if (el) {
+      el.setAttribute('stroke', selectedRoom === linkFromId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
+      el.setAttribute('stroke-width', selectedRoom === linkFromId ? '3' : '1.5');
+    }
+  }
+  if (linkTargetId) {
+    var el = document.querySelector('.rm[data-id="'+linkTargetId+'"]');
+    if (el) {
+      el.setAttribute('stroke', selectedRoom === linkTargetId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
+      el.setAttribute('stroke-width', selectedRoom === linkTargetId ? '3' : '1.5');
+    }
+  }
+}
+
+function createLink(fromId, toId) {
+  API.post('/api/rooms/link', {from: fromId, to: toId}).then(function() {
+    notify('Linked rooms #'+fromId+' '+toId, 'success');
+    updateUndoBar();
+    loadMap();
+    if (selectedRoom) {
+      API.get('/api/rooms/' + selectedRoom).then(function(data) {
+        renderSidePanel(data);
+      });
+    }
+  }).catch(function(e) {
+    notify('Link failed: ' + e.message, 'error');
+  });
+}
+
+function updateDelDragTarget(e) {
+  clearDelHighlight();
+  delTargetId = null;
+
+  var fromRoom = mapData.rooms ? mapData.rooms.find(function(r){return r.id === delFromId;}) : null;
+  if (!fromRoom) return;
+
+  var gp = mouseToGrid(e);
+  if (!gp) return;
+
+  var neighbor = occupied[gp.x+','+gp.y];
+  if (!neighbor || neighbor === delFromId) return;
+
+  var gdx = gp.x - fromRoom.x;
+  var gdy = gp.y - fromRoom.y;
+  if (Math.abs(gdx) > 1 || Math.abs(gdy) > 1) return;
+  if (gdx === 0 && gdy === 0) return;
+  if (!gridDeltaToDir(gdx, gdy)) return;
+
+  delTargetId = neighbor;
+  applyDelHighlight(delFromId, delTargetId);
+}
+
+function applyDelHighlight(fromId, toId) {
+  clearDelHighlight();
+
+  var fromEl = document.querySelector('.rm[data-id="'+fromId+'"]');
+  var toEl = document.querySelector('.rm[data-id="'+toId+'"]');
+  var fromRoom = roomMap[fromId];
+  var toRoom = roomMap[toId];
+  if (!fromEl || !toEl || !fromRoom || !toRoom) return;
+
+  fromEl.setAttribute('stroke', '#f55');
+  fromEl.setAttribute('stroke-width', '3');
+  toEl.setAttribute('stroke', '#f55');
+  toEl.setAttribute('stroke-width', '3');
+
+  var g = document.querySelector('#mapSvg svg g');
+  if (!g) return;
+  var svgNS = 'http://www.w3.org/2000/svg';
+  var line = document.createElementNS(svgNS, 'line');
+  line.id = '__dl_line';
+  line.setAttribute('x1', fromRoom.x * CELL + CELL/2);
+  line.setAttribute('y1', fromRoom.y * CELL + CELL/2);
+  line.setAttribute('x2', toRoom.x * CELL + CELL/2);
+  line.setAttribute('y2', toRoom.y * CELL + CELL/2);
+  line.setAttribute('stroke', '#f55');
+  line.setAttribute('stroke-width', '3');
+  line.setAttribute('stroke-dasharray', '6,3');
+  line.setAttribute('pointer-events', 'none');
+  g.appendChild(line);
+}
+
+function clearDelHighlight() {
+  var line = document.getElementById('__dl_line');
+  if (line) line.remove();
+
+  if (delFromId) {
+    var el = document.querySelector('.rm[data-id="'+delFromId+'"]');
+    if (el) {
+      el.setAttribute('stroke', selectedRoom === delFromId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
+      el.setAttribute('stroke-width', selectedRoom === delFromId ? '3' : '1.5');
+    }
+  }
+  if (delTargetId) {
+    var el = document.querySelector('.rm[data-id="'+delTargetId+'"]');
+    if (el) {
+      el.setAttribute('stroke', selectedRoom === delTargetId ? '#fff' : (el.getAttribute('fill') || '#3a3a6a'));
+      el.setAttribute('stroke-width', selectedRoom === delTargetId ? '3' : '1.5');
+    }
+  }
+}
+
+function deleteLink(fromId, toId) {
+  if (mapData && mapData.links) {
+    var checkOrphan = function(roomId, otherId) {
+      var room = roomMap[roomId];
+      if (!room) return false;
+      var otherLinks = mapData.links.filter(function(l) {
+        return (l.from === roomId || l.to === roomId) && !((l.from === roomId && l.to === otherId) || (l.from === otherId && l.to === roomId));
+      });
+      if (otherLinks.length === 0) {
+        if (!confirm('Removing this link will orphan room #'+roomId+' and it will disappear from the map. Continue?')) return false;
+      }
+      return true;
+    };
+    if (!checkOrphan(toId, fromId)) return;
+    if (!checkOrphan(fromId, toId)) return;
+  }
+
+  fetch('/api/rooms/link', {
+    method: 'DELETE',
+    headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({from: fromId, to: toId}),
+    credentials: 'same-origin'
+  }).then(function(r) {
+    if (!r.ok) throw new Error('unlink failed');
+    return r.json();
+  }).then(function() {
+    notify('Removed link #'+fromId+' '+toId, 'success');
+    updateUndoBar();
+    loadMap();
+    if (selectedRoom) {
+      API.get('/api/rooms/' + selectedRoom).then(function(data) {
+        renderSidePanel(data);
+      });
+    }
+  }).catch(function(e) {
+    notify('Delete link failed: ' + e.message, 'error');
+  });
+}
+
+function esc(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+function escAttr(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;');
+}
+
+window.refreshPage = function() { loadMap(); if (selectedRoom) selectRoom(selectedRoom); };
+
+function loadRoomDirs(cb) {
+  API.get('/api/room-dirs').then(function(dirs) {
+    var sel = $('#dirSelect');
+    if (sel && sel.options.length === 0) {
+      dirs.forEach(function(d) {
+        var opt = document.createElement('option');
+        opt.value = d;
+        opt.textContent = d || '(root)';
+        sel.appendChild(opt);
+      });
+    }
+    updateDirSelect();
+    if (cb) cb(dirs);
+  });
+}
+
+function updateDirSelect() {
+  var sel = $('#dirSelect');
+  if (sel && currentDir !== undefined) {
+    sel.value = currentDir;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function() { loadRoomDirs(function() { loadMap(); }); });