mellos-mapping 0.26.0 → 0.26.2

package/dist/server.mjs

@@ -24650,7 +24650,7 @@ function launcherViewerPid(run) {
 
 // src/server/server.ts
 var SERVER_NAME = "mellos-mapping";
-var SERVER_VERSION = "0.26.0";
+var SERVER_VERSION = "0.26.2";
 function text(s, isError = false) {
   return { content: [{ type: "text", text: s }], ...isError ? { isError: true } : {} };
 }

package/dist/web/terminal.css

@@ -4,8 +4,11 @@ header{display:flex;align-items:center;justify-content:space-between;gap:12px;pa
 .brand{color:#e5edf7;text-decoration:none;font-weight:650;white-space:nowrap}.brand span{font-weight:400;color:#97a7bd;font-size:12px;margin-left:12px}.brand:hover span{color:#81dbae}
 .tools{display:flex;align-items:center;gap:8px;font-size:12px;color:#aab8cb}button,select{font:inherit;color:#d9e2ed;background:#202b3a;border:1px solid #3b4b60;border-radius:5px;padding:4px 7px;cursor:pointer}button:hover,select:hover{border-color:#81dbae}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #81dbae;outline-offset:2px}
 #terminal{min-width:0;min-height:0;padding:0;overflow:hidden;user-select:none;background:#10151c}#terminal .xterm{height:100%;padding:8px 10px 0}#terminal .xterm-viewport{overscroll-behavior:contain}
+#terminal .xterm-helper-textarea:disabled{pointer-events:none}
 footer{min-height:32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:5px 14px;border-top:1px solid #283343;color:#8c9eb5;font-size:11px}#connection{overflow-wrap:anywhere}#connection[data-state="connected"]{color:#81dbae}#connection[data-state="error"]{color:#ffaf87}.hint{margin-left:auto}[hidden]{display:none!important}
-@media(max-width:440px){.brand span{margin-left:6px}.hint{margin-left:0;width:100%}header{padding:0 10px}#terminal .xterm{padding-left:4px;padding-right:4px}}
+button:disabled{opacity:.65;cursor:default}
+@media(max-width:600px){.brand span{display:none}}
+@media(max-width:440px){.tools label{display:none}.hint{margin-left:0;width:100%}header{padding:0 10px}#terminal .xterm{padding-left:4px;padding-right:4px}}
 dialog{max-width:min(420px,90vw);border:1px solid #3b4b60;border-radius:10px;background:#151c25;color:#d9e2ed;padding:24px}dialog::backdrop{background:#0009}dialog h2{font-size:18px;margin-top:0}dialog p{line-height:1.9;font-size:13px}dialog form{text-align:right}
 
 #star-reminder {

package/dist/web/terminal.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mellos · 终端地图</title><link rel="icon" href="data:,"><link rel="stylesheet" href="./xterm.css"><link rel="stylesheet" href="./terminal.css"><script type="module" src="./terminal.js"></script></head>
-<body><header><a class="brand" id="graphic" href="./" title="切换到图形地图">Mellos <span>图形地图 ↗</span></a><div class="tools"><label for="font-size">字号</label><select id="font-size" aria-label="终端字号"><option>10</option><option>11</option><option>12</option><option selected>13</option><option>14</option><option>15</option><option>16</option><option>18</option><option>20</option><option>24</option><option>28</option></select><button id="help" aria-label="操作帮助">?</button></div></header>
+<body><header><a class="brand" id="graphic" href="./" title="切换到图形地图">Mellos <span>图形地图 ↗</span></a><div class="tools"><button id="keyboard">启用快捷键</button><label for="font-size">字号</label><select id="font-size" aria-label="终端字号"><option>10</option><option>11</option><option>12</option><option selected>13</option><option>14</option><option>15</option><option>16</option><option>18</option><option>20</option><option>24</option><option>28</option></select><button id="help" aria-label="操作帮助">?</button></div></header>
 <main id="terminal" aria-label="Mellos 终端地图"></main>
-<footer><span id="connection" role="status" aria-live="polite">正在连接…</span><button id="restart" hidden>重新连接</button><span class="hint">滚轮缩放 · 拖动平移 · 点击选择 · ? 帮助</span><aside id="star-reminder" aria-label="支持 Mellos Mapping" hidden><span>地图有帮到你？欢迎在 GitHub 点个 Star。</span><a href="https://github.com/GuangminJu/mellos-mapping" target="_blank" rel="noopener noreferrer">去点 Star ↗</a><button type="button">不再提醒</button></aside></footer>
-<dialog id="help-dialog"><h2>终端地图操作</h2><p>滚轮 / + / −：总览 → 模块 → 细节<br>拖动：平移 · 单击：固定详情<br>双击带 ⊞ 的节点：进入子地图<br>Backspace：返回父地图<br>Tab / 数字 1–9：切换页面<br>f：自动跟随 · 0：重置视图<br>x 按两次：确认删除当前页<br>q：关闭地图，可用「重新连接」再次打开</p><p>右上角字号只影响此网页终端。</p><form method="dialog"><button>关闭帮助</button></form></dialog>
+<footer><span id="connection" role="status" aria-live="polite">正在连接…</span><button id="restart" hidden>重新连接</button><span class="hint">滚轮缩放 · 拖动平移 · 快捷键需手动启用，离开地图即释放</span><aside id="star-reminder" aria-label="支持 Mellos Mapping" hidden><span>地图有帮到你？欢迎在 GitHub 点个 Star。</span><a href="https://github.com/GuangminJu/mellos-mapping" target="_blank" rel="noopener noreferrer">去点 Star ↗</a><button type="button">不再提醒</button></aside></footer>
+<dialog id="help-dialog"><h2>终端地图操作</h2><p>鼠标操作可直接使用。键盘操作请先点击「启用快捷键」；Esc 或离开地图后释放，需再次启用。</p><p>滚轮 / + / −：总览 → 模块 → 细节<br>拖动：平移 · 单击：固定详情<br>双击带 ⊞ 的节点：进入子地图<br>Backspace：返回父地图<br>Tab / 数字 1–9：切换页面<br>f：自动跟随 · 0：重置视图<br>x 按两次：确认删除当前页<br>q：关闭地图，可用「重新连接」再次打开</p><p>右上角字号只影响此网页终端。</p><form method="dialog"><button>关闭帮助</button></form></dialog>
 </body></html>

package/dist/web/terminal.js

@@ -9213,6 +9213,36 @@ function createStarNotice(base2) {
   };
 }
 
+// src/web/terminal-input.ts
+function bindTerminalInput(textarea, button, surface) {
+  const listeners = new AbortController();
+  const options = { signal: listeners.signal };
+  const release = () => {
+    textarea.blur();
+    textarea.disabled = true;
+    button.disabled = false;
+    button.textContent = "\u542F\u7528\u5FEB\u6377\u952E";
+  };
+  button.addEventListener("click", () => {
+    textarea.disabled = false;
+    textarea.focus({ preventScroll: true });
+    button.disabled = true;
+    button.textContent = "\u5FEB\u6377\u952E\u5DF2\u542F\u7528";
+  }, options);
+  textarea.addEventListener("blur", release, options);
+  window.addEventListener("blur", release, options);
+  surface.addEventListener("pointerleave", release, options);
+  document.documentElement.addEventListener("pointerleave", release, options);
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState !== "visible") release();
+  }, options);
+  release();
+  return { release, dispose: () => {
+    release();
+    listeners.abort();
+  } };
+}
+
 // src/web/terminal-app.ts
 var element = (id) => document.getElementById(id);
 var container = element("terminal");
@@ -9246,6 +9276,8 @@ var terminal = new Dl({
 var fit = new o();
 terminal.loadAddon(fit);
 terminal.open(container);
+var keyboard = element("keyboard");
+var input = bindTerminalInput(terminal.textarea, keyboard, container);
 function setStatus(text, state) {
   status.textContent = text;
   status.dataset.state = state;
@@ -9289,19 +9321,24 @@ font.addEventListener("change", () => {
   } catch {
   }
   resize();
-  terminal.focus();
 });
 var help = element("help-dialog");
 element("help").addEventListener("click", () => help.showModal());
-help.addEventListener("close", () => terminal.focus());
 terminal.attachCustomKeyEventHandler((event) => {
-  if (event.key === "?") {
-    if (event.type === "keydown" && !help.open) help.showModal();
+  if (terminal.textarea.disabled || !document.hasFocus()) return false;
+  if (event.isComposing || event.keyCode === 229) return true;
+  if (event.key === "Escape" || event.key === "?") {
+    if (event.type === "keydown") {
+      input.release();
+      keyboard.focus();
+      if (event.key === "?" && !help.open) help.showModal();
+    }
     return false;
   }
   return true;
 });
 restart.addEventListener("click", () => {
+  input.release();
   retries = 0;
   connect();
 });
@@ -9322,7 +9359,6 @@ function connect() {
     if (socket !== connection) return;
     connection.send(JSON.stringify({ type: "start", ...dimensions() }));
     setStatus("\u5DF2\u8FDE\u63A5 \xB7 \u7EC8\u7AEF\u5730\u56FE", "connected");
-    terminal.focus();
   });
   connection.addEventListener("message", (event) => {
     if (socket !== connection) return;
@@ -9353,12 +9389,16 @@ function connect() {
   });
 }
 window.addEventListener("pagehide", (event) => {
+  input.release();
   disposed = true;
   clearTimeout(retryTimer);
   cancelAnimationFrame(resizeFrame);
   observer.disconnect();
   socket?.close();
-  if (!event.persisted) terminal.dispose();
+  if (!event.persisted) {
+    input.dispose();
+    terminal.dispose();
+  }
 });
 window.addEventListener("pageshow", (event) => {
   if (event.persisted) {

package/docs/codex.md

@@ -66,6 +66,14 @@ changes remeasure terminal cells rather than stretching an image, and do not
 change the host's global terminal font. The terminal uses xterm.js cell rendering;
 the graphical mode remains native SVG and supports SVG export.
 
+Mouse zoom, dragging and selection work immediately. To use keyboard shortcuts,
+click **启用快捷键**, or Tab to that button and press Enter. The hidden terminal
+input stays disabled until this explicit action. Escape, leaving the map, losing
+focus or hiding the page releases keyboard input; enable it again when needed.
+Loading, reconnecting and restoring the page do not activate keyboard input.
+Font selection keeps its own focus; closing keyboard help returns to the
+activation button without reactivating the terminal.
+
 Both modes use the same project maps. Terminal input/output goes over a local
 WebSocket to a dedicated mmap worker. Each connected browser owns its own
 page/zoom/selection state and renderer; there is no shared shell. Closing the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mellos-mapping",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "mcpName": "io.github.GuangminJu/mellos-mapping",
   "description": "A live layered dependency map for bottom-up development — MCP server + terminal pane. Ghost the design first, then light nodes up from the bottom as they are built and verified.",
   "type": "module",