@helping-ai-workflow/md2doc 3.9.0 → 3.10.0

package/lib/editor/client.js

@@ -731,7 +731,7 @@
   const toolbarModel = window.md2docToolbarModel;
   const pasteMd = window.md2docPasteMd;
   const assetLib = window.md2docAsset;
-  const docSourceLib = window.md2docDocSource;
+  const icons = window.md2docIcons;
   let lines = ED.lines, blocks = ED.blocks, mtimeMs = ED.mtimeMs;
   let lastParts = null;
   // v3.4.0 batch2 Task 6 fix round 1 (review F1) — true while `lastParts` is
@@ -1146,6 +1146,7 @@
 
   function setDirty() {
     document.title = (documentIsDirty() ? '● ' : '') + baseTitle;
+    paintSaveStatus(documentIsDirty() ? 'dirty' : 'clean');
   }
 
   // setDirty() is push-driven: something has to call it. MEASURED by keeping
@@ -1202,9 +1203,9 @@
   }
 
   // ── banners (conflict / render-failed / save-failed) ──────────────────
-  // One shared, dismissible banner element. `actionLabel`+`onAction` add an
-  // extra button ahead of the always-present ✕ dismiss button (e.g. the
-  // conflict banner's "Reload"); omit them for a plain dismiss-only notice.
+  // One shared banner element. `actionLabel`+`onAction` add an extra button
+  // ahead of the ✕ (e.g. the conflict card's 重新載入). Since v3.10.0 callers
+  // go through showError() / showNotice() below; only an error card has a ✕.
   let activeBanner = null;
   // Review recommendation 5 (2026-08-31): whether the banner on screen is a
   // structural REFUSAL — 「無法整批操作」 and its siblings — as opposed to a
@@ -1223,7 +1224,7 @@
   // dismissKeynavExitBanner()'s own comment for why Escape, specifically,
   // is the only OTHER thing allowed to clear it.
   let activeBannerIsKeynavExit = false;
-  function showBanner(message, actionLabel, onAction) {
+  function showBanner(message, actionLabel, onAction, level) {
     if (activeBanner) { activeBanner.remove(); activeBanner = null; }
     // Reset unconditionally: refuseStructuralListEdit() sets it back to true
     // straight after its own call, so every OTHER caller gets false without
@@ -1265,7 +1266,20 @@
     closeToolbarMenu();
     const el = document.createElement('div');
     el.className = 'ed-conflict';
+    // v3.10.0 (spec §5.2): two levels on the one .ed-conflict element (tests
+    // and every dismiss path find banners by that class). 'error' is a card
+    // under the toolbar that stays until closed (role alert): a problem that
+    // can lose or skip an edit. 'notice' is a small box at the bottom that
+    // fades after 4 seconds (role status): a refusal or an explanation.
+    const lv = level === 'notice' ? 'notice' : 'error';
+    el.setAttribute('data-level', lv);
+    el.setAttribute('role', lv === 'error' ? 'alert' : 'status');
+    const ico = document.createElement('span');
+    ico.className = 'ed-msg-ico';
+    ico.innerHTML = icons.svg(lv === 'error' ? 'circle-alert' : 'info', 18);
+    el.appendChild(ico);
     const msg = document.createElement('span');
+    msg.className = 'ed-msg-text';
     msg.textContent = message;
     el.appendChild(msg);
     if (actionLabel && onAction) {
@@ -1277,22 +1291,38 @@
     }
     const dismissBtn = document.createElement('button');
     dismissBtn.type = 'button';
-    dismissBtn.textContent = '✕';
-    dismissBtn.setAttribute('aria-label', 'Dismiss');
-    dismissBtn.addEventListener('click', () => {
-      el.remove();
-      if (activeBanner === el) {
-        activeBanner = null;
-        activeBannerIsRefusal = false;
-        activeBannerIsSwallow = false;
-        activeBannerIsKeynavExit = false;
-      }
-    });
-    el.appendChild(dismissBtn);
+    dismissBtn.className = 'ed-msg-x';
+    dismissBtn.innerHTML = icons.svg('x', 16);
+    dismissBtn.setAttribute('aria-label', '關閉');
+    dismissBtn.addEventListener('click', () => dismissBannerEl(el));
+    // A notice has no close button: it goes away by itself.
+    if (lv === 'error') el.appendChild(dismissBtn);
     document.body.appendChild(el);
     activeBanner = el;
+    if (lv === 'notice') {
+      // The fade runs the SAME cleanup the ✕ does, so the flags above go back
+      // to "no banner" and the next Escape is not swallowed by a stale one
+      // (Review Focus 3). Hovering pauses it; leaving gives at least 0.8s back.
+      let left = 4000; let t0 = Date.now(); let timer = setTimeout(() => dismissBannerEl(el), left);
+      el.addEventListener('mouseenter', () => { clearTimeout(timer); left -= Date.now() - t0; });
+      el.addEventListener('mouseleave', () => { t0 = Date.now(); timer = setTimeout(() => dismissBannerEl(el), Math.max(left, 800)); });
+    }
     return el;
   }
+  // The one way a banner leaves the screen by the user's hand or by its own
+  // timer: scoped to THIS element, so a newer banner that has replaced it is
+  // left alone (and its flags with it).
+  function dismissBannerEl(el) {
+    el.remove();
+    if (activeBanner === el) {
+      activeBanner = null;
+      activeBannerIsRefusal = false;
+      activeBannerIsSwallow = false;
+      activeBannerIsKeynavExit = false;
+    }
+  }
+  function showError(message, actionLabel, onAction) { return showBanner(message, actionLabel, onAction, 'error'); }
+  function showNotice(message) { return showBanner(message, null, null, 'notice'); }
 
   // Task 9 review I3: MEASURED AT THE TIME — `.ed-conflict` was
   // `position:fixed; top:0; z-index:999` against `.ed-toolbar`'s
@@ -1341,12 +1371,8 @@
   }
 
   function showConflictBanner() {
-    showBanner(
-      'File changed on disk — reload to pick up external edits ' +
-      '(your unsaved changes will be lost).',
-      'Reload',
-      () => location.reload()
-    );
+    showError('這個檔案剛在別處被修改。重新載入會帶入新內容，並捨棄你在這裡還沒儲存的變更。',
+      '重新載入', () => location.reload());
   }
 
   // F10 ——「一道沒閉合的圍欄把後面的內容吃掉了」那一句，單獨一個常數。
@@ -1547,24 +1573,24 @@
         body: JSON.stringify({ fileId: ED.fileId, content: lines.join('\n') }),
       });
     } catch (e) {
-      showBanner('Render failed — network error (' + describeFailure(e) +
-        '). Your edit was not applied.', null, null);
+      showError('這次修改沒有套用：連不到編輯伺服器（' + describeFailure(e) +
+        '）。文件維持修改前的樣子。', null, null);
       return false;
     }
     if (!res.ok) {
       const reason = await describeHttpFailure(res);
-      showBanner('Render failed — ' + reason + '. Your edit was not applied.', null, null);
+      showError('這次修改沒有套用：' + reason + '。文件維持修改前的樣子。', null, null);
       return false;
     }
     let j;
     try {
       j = await res.json();
     } catch (e) {
-      showBanner('Render failed — malformed server response. Your edit was not applied.', null, null);
+      showError('這次修改沒有套用：伺服器回傳的內容無法解析。文件維持修改前的樣子。', null, null);
       return false;
     }
     if (!Array.isArray(j.parts) || !Array.isArray(j.blocks)) {
-      showBanner('Render failed — malformed server response. Your edit was not applied.', null, null);
+      showError('這次修改沒有套用：伺服器回傳的內容無法解析。文件維持修改前的樣子。', null, null);
       return false;
     }
     // Past every failure exit: this render is going to happen, so whatever
@@ -1775,7 +1801,7 @@
     // 者【現在看到的】那份文件。applyPatch()／applyFullRender() 自己不呼叫
     // showBanner()，所以這一句不會被同一次 render 裡的另一句蓋掉。
     if (swallowed) {
-      showBanner(SWALLOW_MESSAGE, null, null);
+      showError(SWALLOW_MESSAGE, null, null);
       activeBannerIsSwallow = true;   // 順序同 refuseStructuralListEdit()：
                                       // showBanner() 自己會把旗標歸零。
     } else if (!nowUnclosed) {
@@ -2568,8 +2594,8 @@
     try {
       return await rerenderAll(editRange);
     } catch (e) {
-      showBanner('Render failed — unexpected error (' + describeFailure(e) +
-        '). Your edit was not applied.', null, null);
+      showError('這次修改沒有套用：發生未預期的錯誤（' + describeFailure(e) +
+        '）。文件維持修改前的樣子。', null, null);
       return false;
     }
   }
@@ -3292,20 +3318,20 @@
   // listRunSupportsStructuralEdit() — see its comment for why this is a
   // parameter and not a second function). One constant so both call sites
   // stay byte-identical instead of two hand-typed copies drifting apart.
-  const NO_SOURCE_LINE_MESSAGE = '此項目沒有自己的來源行，無法刪除或直接編輯';
+  const NO_SOURCE_LINE_MESSAGE = '此項目沒有自己的來源行，無法在這裡刪除或編輯。請用文字編輯器修改，存檔後這裡會自動更新。';
   // T7 fix round 1 (LOW-2): insertBlockBelow()'s own wording. A second
   // constant rather than a reuse, because the one above NAMES the two
   // operations it refuses — an insert that answered '無法刪除' would be
   // telling the user something that is not true of the button they pressed.
-  const NO_SOURCE_LINE_INSERT_MESSAGE = '此項目沒有自己的來源行，無法在其後插入區塊';
+  const NO_SOURCE_LINE_INSERT_MESSAGE = '此項目沒有自己的來源行，無法在其後插入。請用文字編輯器修改，存檔後這裡會自動更新。';
   // The degraded-subtree wording (see blockRangeIsUnlocatable() above). Each
   // one NAMES ITS OPERATION exactly as the pair above does — that is the whole
   // reason the pair above is a pair — and differs from it only in the clause
   // that states the cause. Deliberately says nothing about the refusal being
   // temporary: nothing lifts it, so wording like 「已暫停」 would promise a state
   // change that never comes.
-  const UNLOCATABLE_LINE_MESSAGE = '這段巢狀清單對不到自己的來源行，無法刪除或直接編輯';
-  const UNLOCATABLE_LINE_INSERT_MESSAGE = '這段巢狀清單對不到自己的來源行，無法在其後插入區塊';
+  const UNLOCATABLE_LINE_MESSAGE = '這段巢狀清單對不到自己的來源行，無法在這裡刪除或編輯。請用文字編輯器修改，存檔後這裡會自動更新。';
+  const UNLOCATABLE_LINE_INSERT_MESSAGE = '這段巢狀清單對不到自己的來源行，無法在其後插入。請用文字編輯器修改，存檔後這裡會自動更新。';
   // Both refusals go through one chooser each, so a call site cannot pick the
   // right guard and the wrong sentence.
   function noSourceLineMessageFor(blockEl) {
@@ -4237,6 +4263,38 @@
       blockEl.appendChild(buildGutterInsertButton());
       blockEl.appendChild(buildGutterHandle());
     });
+    alignGutterTops(blockEls);
+  }
+
+  // The ⠿ / ＋ pair sits on the block's first line of text, whatever the
+  // block's own margin and line-height (a heading line is 49.5px tall, a
+  // paragraph's 24.75px). Measured from the first real text node's first
+  // line box, so tables, list items and code all land on their first row; a
+  // block with no text (an image, a bare diagram) keeps top 0. armEditables()
+  // also runs on a detached <template> fragment (the partial re-render path),
+  // where nothing has a layout yet: then it waits one frame and measures the
+  // blocks that have been connected by then.
+  function alignGutterTops(blockEls) {
+    if (!blockEls.length || !blockEls[0].isConnected) {
+      if (blockEls.length) requestAnimationFrame(() => alignGutterTops(blockEls.filter((b) => b.isConnected)));
+      return;
+    }
+    for (const b of blockEls) {
+      const walker = document.createTreeWalker(b, NodeFilter.SHOW_TEXT, {
+        acceptNode: (n) => (n.data.trim() && !n.parentElement.closest('.ed-handle, .ed-insert, .ed-li-marker, svg'))
+          ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
+      });
+      const t = walker.nextNode();
+      let top = 0;
+      if (t) {
+        const rg = document.createRange();
+        rg.selectNodeContents(t);
+        const line = rg.getClientRects()[0];
+        const handle = b.querySelector('.ed-handle');
+        if (line && handle) top = Math.round(line.top + line.height / 2 - b.getBoundingClientRect().top - handle.offsetHeight / 2);
+      }
+      b.style.setProperty('--ed-pair-top', top + 'px');
+    }
   }
 
   // A fresh ⠿ button per block — deliberately NOT wired with its own
@@ -4248,7 +4306,7 @@
     const el = document.createElement('button');
     el.type = 'button';
     el.className = 'ed-handle';
-    el.textContent = '⠿';
+    el.innerHTML = icons.svg('grip-vertical', 16);
     el.setAttribute('aria-label', '區塊選項');
     // v2.11.1: a <button> is a sequential focus stop, and there is one of
     // these plus one ＋ standing immediately after EVERY block — so any Tab
@@ -4703,7 +4761,7 @@
     const el = document.createElement('button');
     el.type = 'button';
     el.className = 'ed-insert';
-    el.textContent = '＋';
+    el.innerHTML = icons.svg('plus', 16);
     el.setAttribute('aria-label', '插入區塊');
     // Not a tab stop — see buildGutterHandle() above for the whole reason.
     el.setAttribute('tabindex', '-1');
@@ -4963,7 +5021,7 @@
     if (!document.body.contains(blockEl)) {
       liveBlockEl = reresolveBlockEl(identity) ||
         (selfSession ? reresolveBlockElAfterSelfCommit(identity) : null);
-      if (!liveBlockEl) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return; }
+      if (!liveBlockEl) { showError(DROPPED_GESTURE_MESSAGE, null, null); return; }
     }
     // T7 fix round 1 (LOW-2): same refusal deleteBlockViaGutter() makes below,
     // for the same reason and against the same LIVE block. A block that owns
@@ -5292,14 +5350,14 @@
     if (!document.body.contains(blockEl)) {
       liveBlockEl = reresolveBlockEl(identity) ||
         (selfSession ? reresolveBlockElAfterSelfCommit(identity) : null);
-      if (!liveBlockEl) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return null; }
+      if (!liveBlockEl) { showError(DROPPED_GESTURE_MESSAGE, null, null); return null; }
     }
     // A block that owns no source line has an INVERTED range
     // (endLine === startLine - 1) and every commit helper handed one does
     // something plausible and wrong.
     if (blockOwnsNoLine(liveBlockEl)) { refuseStructuralListEdit(noSourceLineMessageFor(liveBlockEl)); return null; }
     const rec = blockRecOf(liveBlockEl);
-    if (!rec) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return null; }
+    if (!rec) { showError(DROPPED_GESTURE_MESSAGE, null, null); return null; }
     if (anchor) anchor.line = rec.startLine;
 
     const res = selectionLib
@@ -5336,7 +5394,7 @@
     const els = [];
     for (let i = 0; i < members.length; i++) {
       const el = blockElById(members[i].id);
-      if (!el) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return null; }
+      if (!el) { showError(DROPPED_GESTURE_MESSAGE, null, null); return null; }
       // Belt to membersOf()'s own braces: selection.js excludes a block that
       // owns no line from every member set it builds, so this is unreachable —
       // but "another module filters it" is an argument about another file's
@@ -7106,7 +7164,7 @@
       // not before: the user can reach exactly that through the ⠿ menu.
       const editedIdStr = String(burst.blockId);
       if (unsupportedByLi.some((u) => u.blockId === editedIdStr)) {
-        showBanner('含不支援的格式，改用原始碼編輯', null, null);
+        showNotice('含不支援的格式，改用原始碼編輯');
         endBurstWithoutResolve();
         await safeRerenderAll();
         return false;
@@ -7222,7 +7280,7 @@
       // `lines`), and return false so the caller (switchAwayFrom(), on
       // behalf of whatever triggered this resolution) aborts instead of
       // proceeding as if the burst resolved cleanly.
-      showBanner('含不支援的格式，改用原始碼編輯', null, null);
+      showNotice('含不支援的格式，改用原始碼編輯');
       endBurstWithoutResolve();
       openRawEditor(burst.blockEl);
       return false;
@@ -7543,6 +7601,10 @@
     }));
   };
   window.__edTestForceRerender = function () { return rerenderAll(); };
+  // v3.10.0: a notice has no close button (it fades after 4s). Tests that only
+  // need the banner gone before their next gesture take it down through the
+  // same dismissBannerEl() the fade timer and the ✕ use.
+  window.__edTestDismissBanner = function () { if (activeBanner) dismissBannerEl(activeBanner); };
   window.__edTestTruncateTo = function (n) { lines = lines.slice(0, n); };
 
   // v3.0.2: computeIndentClamp() lives past this file's node early-exit
@@ -9222,7 +9284,7 @@
   // and shadowed each other silently (last-declaration-wins), so the
   // no-source-line callers pass their own text instead of a second function.
   function refuseStructuralListEdit(message) {
-    showBanner(message || '此清單含不支援的格式，無法調整結構', null, null);
+    showNotice(message || '此清單含不支援的格式，無法調整結構');
     // Review recommendation 5: mark it, so the next SUCCESSFUL render clears
     // it (dismissRefusalBanner(), called from rerenderAll()). Set after the
     // showBanner() call, which resets the flag for every other caller.
@@ -10310,7 +10372,7 @@
     const burst = currentBurst;
     if (!burst || burst.blockType !== 'table' || burst.editEl !== tableEl || !grid.length) return false;
     const width = grid.reduce((w, row) => Math.max(w, row.length), 0);
-    if (grid.length > 500 || width > 50) { showBanner(GRID_PASTE_TOO_BIG_MESSAGE); return true; }
+    if (grid.length > 500 || width > 50) { showNotice(GRID_PASTE_TOO_BIG_MESSAGE); return true; }
     const origin = burst.cellRange
       ? (() => { const rc = cellRangeLib.normalize(burst.cellRange.anchor, burst.cellRange.focus);
         return { r: rc.top, c: rc.left }; })()
@@ -10423,7 +10485,7 @@
       const liveSrc = srcRec
         ? document.querySelector('.ed-block[data-block-id="' + srcRec.id + '"]') : null;
       dest = (liveSrc && nextBlock(liveSrc)) || reresolveBlockEl(destIdentity);
-      if (!dest) { showBanner(DROPPED_GESTURE_MESSAGE); return; }
+      if (!dest) { showError(DROPPED_GESTURE_MESSAGE); return; }
     }
     if (x !== null) arrowGoalX = x;
     arrowLandOn(dest, delta, x !== null ? x : arrowGoalX);
@@ -10991,7 +11053,7 @@
       // Dropping is still the right answer (see the S1 comment above); saying
       // nothing was not.
       if (!liveTableEl) {
-        showBanner(DROPPED_GESTURE_MESSAGE, null, null); return null;
+        showError(DROPPED_GESTURE_MESSAGE, null, null); return null;
       }
     }
     if (currentBurst && currentBurst.blockType === 'table' && currentBurst.editEl === liveTableEl) return liveTableEl;
@@ -11059,7 +11121,7 @@
     // 15 call sites): can't relocate it on the live table -> drop the
     // gesture and say so, never guess.
     if (!targetCell) {
-      showBanner(DROPPED_GESTURE_MESSAGE, null, null);
+      showError(DROPPED_GESTURE_MESSAGE, null, null);
       return;
     }
     currentBurst.history.snap('insert-col-pre');
@@ -11111,7 +11173,7 @@
     // can't relocate it on the live table -> drop the gesture and say so,
     // never guess.
     if (afterRowIndex >= 0 && !afterRow) {
-      showBanner(DROPPED_GESTURE_MESSAGE, null, null);
+      showError(DROPPED_GESTURE_MESSAGE, null, null);
       return;
     }
     currentBurst.history.snap('insert-row-pre');
@@ -11587,7 +11649,7 @@
     if (!liveTableEl) return;
     const headerRow = headerRowOf(liveTableEl);
     if (!headerRow || headerRow.cells.length <= 1) {
-      showBanner('無法刪除最後一欄', null, null);
+      showNotice('無法刪除最後一欄');
       return;
     }
     currentBurst.history.snap('delete-col-pre');
@@ -11615,11 +11677,11 @@
     const liveRowEl = rowIndex >= 0 ? allRowsOf(liveTableEl)[rowIndex] : null;
     if (!liveRowEl) return;
     if (liveRowEl === headerRowOf(liveTableEl)) {
-      showBanner('無法刪除標題列', null, null);
+      showNotice('無法刪除標題列');
       return;
     }
     if (bodyRowsOf(liveTableEl).length <= 1) {
-      showBanner('無法刪除最後一列', null, null);
+      showNotice('無法刪除最後一列');
       return;
     }
     currentBurst.history.snap('delete-row-pre');
@@ -12936,7 +12998,7 @@
     const sourceEl = els[st.sourceIndex];
     const destEl = target.mode === 'append' ? null : (els[target.blockIndex] || null);
     if (!sourceEl || (target.mode !== 'append' && !destEl)) {
-      showBanner(DROPPED_GESTURE_MESSAGE, null, null);
+      showError(DROPPED_GESTURE_MESSAGE, null, null);
       return;
     }
     const destIdentity = destEl ? captureBlockIdentity(destEl) : null;
@@ -12970,7 +13032,7 @@
     if (destEl && !document.body.contains(destEl)) {
       liveDestEl = reresolveBlockEl(destIdentity) ||
         (destSelfSession ? reresolveBlockElAfterSelfCommit(destIdentity) : null);
-      if (!liveDestEl) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return; }
+      if (!liveDestEl) { showError(DROPPED_GESTURE_MESSAGE, null, null); return; }
     }
     // ── S4 Task 6: THE OPERAND SET (spec §4.5, §3.3, §3.6) ────────────────
     // §4.5: 「grip 在選取集合內 → 整批搬（3.3 的成員資格規則）」. Up to Task 5
@@ -13039,7 +13101,7 @@
     const sj = live.indexOf(opEls[opEls.length - 1]);
     const rest = live.filter((el) => opEls.indexOf(el) === -1);
     const di = liveDestEl ? rest.indexOf(liveDestEl) : rest.length;
-    if (si < 0 || sj < 0 || di < 0) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return; }
+    if (si < 0 || sj < 0 || di < 0) { showError(DROPPED_GESTURE_MESSAGE, null, null); return; }
     // §3.3's set is contiguous in block order — resolveGutterOperands()'s own
     // gate — so its members' lines plus the separators between them are ONE
     // range, which is what makes a batch move the same single commitRangeEdit
@@ -13047,7 +13109,7 @@
     const srcRec = spanMoveRange(opRecs);
     const destRec = liveDestEl ? blockRecOf(liveDestEl) : null;
     if (!srcRec || (liveDestEl && !destRec)) {
-      showBanner(DROPPED_GESTURE_MESSAGE, null, null);
+      showError(DROPPED_GESTURE_MESSAGE, null, null);
       return;
     }
     // A destination that owns no source line has an INVERTED range, and its
@@ -13217,7 +13279,7 @@
     const run = listRunOf(liEl);
     const srcIdxs = liEls.map((el) => run.indexOf(el));
     const srcIdx = srcIdxs[0];
-    if (srcIdx < 0) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return; }
+    if (srcIdx < 0) { showError(DROPPED_GESTURE_MESSAGE, null, null); return; }
     // A member outside the grip's own commit span means the set straddles TWO
     // runs — contiguity in `blocks` does not imply one run, because two
     // adjacent runs separated by a delimiter change ('- a' / '1. b') are
@@ -13305,7 +13367,7 @@
     // the ARRAY, and the reordered span's first member is not the run's first
     // line.
     const range = runRangeOfBlocks({ lines, blocks, stack }, run);
-    if (!range) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return; }
+    if (!range) { showError(DROPPED_GESTURE_MESSAGE, null, null); return; }
     const span = order.map((i) => run[i]);
     // ── THE SEAM TASK 7 OWNS — §4.5's indent clamp ─────────────────────
     //
@@ -14319,6 +14381,11 @@
   // paintSelToolbarMarks() below. Filled by buildSelToolbar(), which runs once.
   const selToolbarMarkBtns = [];
 
+  const SELTB_ICON = {
+    'ed-seltb-b': 'bold', 'ed-seltb-i': 'italic', 'ed-seltb-s': 'strikethrough',
+    'ed-seltb-u': 'underline', 'ed-seltb-code': 'code', 'ed-seltb-link': 'link',
+  };
+
   function buildSelToolbar() {
     const el = document.createElement('div');
     el.className = 'ed-seltb';
@@ -14326,7 +14393,7 @@
       const b = document.createElement('button');
       b.type = 'button';
       b.className = 'ed-seltb-btn ' + cls;
-      b.textContent = label;
+      b.innerHTML = icons.svg(SELTB_ICON[cls], 16);
       b.setAttribute('aria-label', ariaLabel);
       b.setAttribute('aria-pressed', 'false');
       selToolbarMarkBtns.push({ btn: b, tag: tag });
@@ -14344,6 +14411,10 @@
     addBtn('ed-seltb-s', 'S', '刪除線', 'DEL', () => applyMarkToggle('DEL'));
     addBtn('ed-seltb-u', 'U', '底線', 'U', () => applyMarkToggle('U'));
     addBtn('ed-seltb-code', '<>', 'Code', 'CODE', () => applyMarkToggle('CODE'));
+    const sep = document.createElement('span');
+    sep.className = 'ed-seltb-sep';
+    sep.setAttribute('aria-hidden', 'true');
+    el.appendChild(sep);
     addBtn('ed-seltb-link', '\u{1F517}', 'Link', 'A', () => applyLinkToggle());
     return el;
   }
@@ -14713,7 +14784,24 @@
   }
 
   // ── save ───────────────────────────────────────────────────────────────
+  // v3.10.0: the outside-edit check (onDiskMtime() below) must not read its
+  // own saves as someone else's edit. A ping answered while a save is in
+  // flight, or one sent before a save that has since landed, carries an mtime
+  // that is not comparable with `mtimeMs`; saveGen / savesInFlight let the
+  // ping tell (no save in flight when it was sent, none started or in flight
+  // when it came back). Reasoned from the ordering, not measured — both directions: a
+  // stale pre-save mtime
+  // against the post-save baseline would reload a clean page for nothing, and
+  // a post-write mtime read before the save's reply lands would raise the
+  // conflict card over the user's own save.
+  let saveGen = 0;
+  let savesInFlight = 0;
   async function save() {
+    saveGen++;
+    savesInFlight++;
+    try { return await sendSave(); } finally { savesInFlight--; }
+  }
+  async function sendSave() {
     // fix 3: the receipt for the bytes about to leave, taken BEFORE the request
     // and not after it. `markSaved()` used to read the stack depth when the
     // RESPONSE landed, and a save round trip is hundreds of milliseconds —
@@ -14726,6 +14814,7 @@
     // See UndoStack.saveToken()/markSaved() for why the receipt carries an op
     // identity and not just a depth.
     const token = stack.saveToken();
+    paintSaveStatus('saving');
     //
     // ⚠ There is deliberately NO in-flight lock and no supersede guard here, and
     // that is a correction of something this file briefly carried. The premise
@@ -14754,8 +14843,9 @@
         body: JSON.stringify({ fileId: ED.fileId, content: lines.join(EOL), baseMtimeMs: mtimeMs }),
       });
     } catch (e) {
-      showBanner('Save failed — network error (' + describeFailure(e) +
-        '); changes NOT saved.', null, null);
+      paintSaveStatus('failed');
+      showError('無法儲存：連不到編輯伺服器（' + describeFailure(e) +
+        '）。變更還在這個分頁裡，請稍後再按 ' + SAVE_KEY_HINT + '。', null, null);
       return;
     }
     if (res.status === 200) {
@@ -14763,7 +14853,8 @@
       try {
         j = await res.json();
       } catch (e) {
-        showBanner('Save failed — malformed server response; changes NOT saved.', null, null);
+        paintSaveStatus('failed');
+        showError('無法儲存：伺服器回傳的內容無法解析。變更還在這個分頁裡。', null, null);
         return;
       }
       mtimeMs = j.mtimeMs;
@@ -14781,6 +14872,7 @@
       return;
     }
     if (res.status === 409) {
+      paintSaveStatus('failed');
       showConflictBanner();
       return;
     }
@@ -14788,7 +14880,8 @@
     // user's edits. Dirty state (and `mtimeMs`) is left untouched, and
     // there is no auto-retry; the user decides what to do next.
     const reason = await describeHttpFailure(res);
-    showBanner('Save failed — ' + reason + '; changes NOT saved.', null, null);
+    paintSaveStatus('failed');
+    showError('無法儲存：' + reason + '。變更還在這個分頁裡。', null, null);
   }
 
   // v3.4.0 §3: the "resolve whatever is open, THEN save" precondition —
@@ -15067,12 +15160,6 @@
   let toolbarMenuEl = null; // the H▾ dropdown panel, or null when closed
   let toolbarBlockEl = null;
   let toolbarStateSig = '';
-  // 追加 4's document mode: 'edit' | 'source'. v3.2.1 removed the third
-  // state ('preview'); docsource.js's MODES comment records why.
-  // docsource.js owns the cycle order and the lines[]<->string conversion.
-  let docMode = 'edit';
-  let sourceTextarea = null;
-  let sourceBaseLines = null;
   // 追加 2: Ctrl+Shift+V arms a plain-text-only paste for the NEXT paste
   // event. A ClipboardEvent carries no modifier state of its own, so the
   // intent has to be captured on the keystroke that produced it.
@@ -15109,9 +15196,10 @@
   // stray-key hand-back raises this rather than only some of them.
   const TOOLBAR_KEYNAV_EXIT_MESSAGE = '已離開鍵盤游標，按 Alt+F10 可以再進入工具列';
 
-  // Extra visual classes for the three inline buttons whose own glyph is the
-  // affordance (B is bold, I is italic, S is struck through) — the same
-  // idiom .ed-seltb-b/-i/-s use.
+  // Extra classes on the three inline buttons. Until v3.10.0 their text glyph
+  // was the affordance (B bold, I italic, S struck) and these classes styled
+  // it; the buttons draw Lucide icons now and the classes carry no CSS, but
+  // they stay as stable hooks, same as .ed-seltb-b/-i/-s.
   const TOOLBAR_BTN_CLASS = {
     bold: 'ed-toolbar-b', italic: 'ed-toolbar-i', strike: 'ed-toolbar-s',
   };
@@ -15286,7 +15374,6 @@
       // measures it here because toolbar-model.js may not touch the DOM, and
       // .ed-seltb is painted from the same measurement — see updateToolbar().
       marks: selectionMarkStates(sel),
-      mode: docMode,
       // v3.4.0 §3: the `save` button's own state. documentIsDirty() (just
       // above burstHasUncommittedEdit()'s own comment) is the SAME
       // expression setDirty() paints the title dot from — not a second copy
@@ -15329,9 +15416,9 @@
         btn.setAttribute('aria-pressed',
           st.mixed ? 'mixed' : (st.active ? 'true' : 'false'));
       }
-      // `headings` (H / H1..H6) and, since v3.2.1, the mode button carry a
-      // derived label; every other button keeps the glyph it was built with.
-      if (typeof st.label === 'string') btn.textContent = st.label;
+      // v3.10.0: every button draws the fixed Lucide icon buildToolbar() gave
+      // it. A derived label (H1..H6 on `headings`) no longer reaches the
+      // button's content; the title below still follows the state.
       // v3.2.1: a per-mode title CANNOT be baked in buildToolbar() — the mode
       // button's title names the NEXT state, so it has to be rewritten every
       // time the mode changes. It rides the same diffed loop as everything
@@ -15457,10 +15544,11 @@
   // Steps over disabled buttons. The walk is bounded by the button count and
   // wraps, so a bar with nothing enabled would leave the index where it was
   // rather than spin — see the model's own guarantee that this cannot happen
-  // (deriveState() keeps `preview` out of every disabling branch, including
-  // the source-mode override; T11-2 later exempted `outline` from that
-  // override too, so the enabled set there is `['outline','preview']` — the
-  // guarantee holds more strongly than when this was written, not less).
+  // (deriveState() keeps `outline` out of every disabling branch. Until
+  // v3.10.0 the guarantee rested on the source-mode button `preview`; that
+  // button is gone, and `outline` — enabled in all 264 ctx combinations a
+  // sweep of blockType x inList x indent x dirty x hasSelection produces —
+  // carries it now).
   function moveToolbarCursor(delta) {
     const btns = toolbarRovingBtns();
     if (!btns.length) return;
@@ -15533,29 +15621,13 @@
   // Scoped to genuine standalone controls only — INPUT/TEXTAREA/SELECT —
   // not to `.ed-wys-armed`/`.ed-wys-cell`: wireToolbarTracking()'s own
   // focusin comment is explicit that SOME toolbar activations (list,
-  // ordered-list, check, table, insert-before, insert-after, preview)
+  // ordered-list, check, table, insert-before, insert-after)
   // deliberately land a focusin on an editable block WITHOUT ending keynav,
   // so a real block surface must not trip this bail.
   //
-  // ⚠ FIX ROUND 1 (self-review, caught before ship): `preview`'s own landing
-  // is `sourceTextarea` — a real `<textarea>`, not a `.ed-wys-armed` block —
-  // so the exemption above named it but the first cut of this function did
-  // not actually implement it, and the omission is load-bearing: source
-  // mode's model disables every button except outline/preview (this file's
-  // own "S/4.1 Source mode" comment — the cursor is meant to be walked with
-  // Left/Right/Home/End between those two, THEN activated), and MEASURED,
-  // that walk is exactly what this function's first cut broke — the very
-  // next arrow key after landing in the source textarea silently exited
-  // keynav instead of moving between the two enabled buttons, closing off
-  // the one route backlog #6's own still-open `preview` round-trip gap (see
-  // activateToolbarCursor()'s comment) names as "THE WAY OUT". `sourceTextarea`
-  // is therefore excluded by reference (not by tag/class — an ordinary
-  // `textarea.ed-raw`, e.g. backlog #6's own quote/code rescue, still trips
-  // this bail exactly as intended, since typing there IS the user's own
-  // text, not bar navigation).
   function toolbarKeynavBlockedByRealControl() {
     const ae = document.activeElement;
-    if (!ae || ae === sourceTextarea) return false;
+    if (!ae) return false;
     return !!(ae.tagName && (ae.tagName === 'INPUT' ||
       ae.tagName === 'TEXTAREA' || ae.tagName === 'SELECT'));
   }
@@ -15566,8 +15638,9 @@
   // WHERE THE CARET ENDS UP AFTERWARDS, driven button by button over the
   // enabled row in a plain paragraph, pressing Enter on the cursor and then
   // typing to see whether the characters land anywhere — UPDATED for Task 9
-  // (backlog #6), which fixed the first two bullets below; only the third
-  // remains an open gap, tracked below rather than left unstated:
+  // (backlog #6), which fixed both bullets below. (A third, the source-mode
+  // button's return trip leaving the caret on BODY, was still open when
+  // v3.10.0 removed source mode altogether.)
   //
   //   * FIXED: quote, code and line used to end on BODY with typing going
   //     nowhere, clean burst and dirty one alike. restoreAfterStructuralOp()'s
@@ -15579,35 +15652,9 @@
   //     what dropped the caret). undoViaToolbar()/redoViaToolbar()/
   //     imageViaToolbar() now wrap the same captureCaretForSave()/
   //     restoreCaretForSave() pair saveViaToolbar() uses.
-  //   * STILL OPEN: `preview` (cycleDocMode(), the document-wide edit↔source
-  //     toggle) is UNCHANGED — going INTO source mode focuses the source
-  //     textarea correctly, but the RETURN trip (source → edit) still leaves
-  //     the caret on BODY, MEASURED unchanged by this task's own review.
-  //     Deliberately left open rather than rushed: unlike the two bullets
-  //     above, there is no established rescue to reuse here —
-  //     captureCaretForSave()'s block-id + text-offset coordinate system has
-  //     no meaning for a source-textarea cursor position (a raw character
-  //     offset into the WHOLE document string, not one block's rendered
-  //     text), so a correct fix needs its own coordinate mapping and its own
-  //     tests, not a copy-paste of this task's other two fixes. Backlog #6's
-  //     first two clauses no longer make this escape hatch NECESSARY the way
-  //     they used to (quote/code/line now have their own direct rescue,
-  //     rather than needing the preview round-trip as their only way out),
-  //     which is why this is deferred rather than treated as still blocking.
   //
   // A mouse click on those same buttons does exactly the same thing, so none
-  // of this is something the keyboard route introduced — a mouse user can
-  // always climb out of the still-open `preview` case by clicking into any
-  // OTHER editable text on the page, where a keyboard user cannot, because Tab
-  // from BODY goes nowhere (this file's own §3.5 contract).
-  //
-  // THE WAY OUT for the still-open case, driven end to end from a stranded
-  // BODY: the entry chord still works there (the bar's own state survives,
-  // and its row is fully enabled), so walking to the mode button and pressing
-  // Enter puts the caret in the source textarea, where typing lands. Coming
-  // back the same way returns the document to edit mode but leaves the caret
-  // on BODY again — the hatch is somewhere to keep typing, not (yet) a way
-  // back to the WYSIWYG caret.
+  // of this is something the keyboard route introduced.
   function activateToolbarCursor() {
     const btn = toolbarRovingBtns()[toolbarRovingIndex];
     if (!btn || btn.disabled) return;
@@ -15640,7 +15687,7 @@
       btn.type = 'button';
       btn.className = 'ed-toolbar-btn' +
         (TOOLBAR_BTN_CLASS[def.id] ? ' ' + TOOLBAR_BTN_CLASS[def.id] : '');
-      btn.textContent = def.icon;
+      btn.innerHTML = icons.svg(def.icon, 18);
       btn.title = def.title;
       btn.setAttribute('aria-label', def.title);
       btn.setAttribute('data-ed-tb', def.id);
@@ -15693,9 +15740,8 @@
     }, true);
     toolbarBtns = btns;
     // v3.1.0 的 spec 承諾「元素存在但無內容，§3 上線時填入、不需要重排版面」，
-    // 但元素從未被建立。這裡把承諾兌現：佔好寬度。內容不再是空的 ——
-    // paintModeStatus() 會在 mountToolbar() 掛上之後、以及每次 setDocMode()
-    // 切換時寫入當前模式名稱。
+    // 但元素從未被建立。這裡把承諾兌現：佔好寬度。v3.10.0 起它顯示存檔狀態
+    // （paintSaveStatus()）；原本寫的模式名稱隨原始碼模式一起移除。
     const statusEl = document.createElement('span');
     statusEl.className = 'ed-toolbar-status';
     // Final wave, M7: the only announcement a mode switch ever gets. Every
@@ -15756,7 +15802,6 @@
       // for the caret rescue.
       case 'image': return imageViaToolbar();
       case 'outline': return toggleOutlineSidebar(!!viaKeyboard);
-      case 'preview': return cycleDocMode();
       default: return undefined;
     }
   }
@@ -15921,7 +15966,7 @@
     if (!document.body.contains(blockEl)) {
       liveBlockEl = reresolveBlockEl(identity) ||
         (selfSession ? reresolveBlockElAfterSelfCommit(identity) : null);
-      if (!liveBlockEl) { showBanner(DROPPED_GESTURE_MESSAGE, null, null); return; }
+      if (!liveBlockEl) { showError(DROPPED_GESTURE_MESSAGE, null, null); return; }
     }
     const rec = blockRecOf(liveBlockEl);
     // A block that owns no source line has an inverted range, and there is
@@ -16076,14 +16121,14 @@
     // two literals and then parses the bytes. Keep the two rules the same
     // shape, and let the server's refusal be the one the user sees.
     if (!insertableFile(blob)) {
-      showBanner(TOOLBAR_UNSUPPORTED_IMAGE_MESSAGE, null, null);
+      showNotice(TOOLBAR_UNSUPPORTED_IMAGE_MESSAGE);
       return null;
     }
     let data;
     try {
       data = await blobToBase64(blob);
     } catch (e) {
-      showBanner('圖片讀取失敗 — ' + describeFailure(e), null, null);
+      showError('圖片讀取失敗 — ' + describeFailure(e), null, null);
       return null;
     }
     let res;
@@ -16095,12 +16140,12 @@
         }),
       });
     } catch (e) {
-      showBanner('圖片上傳失敗 — ' + describeFailure(e) + '。檔案未寫入。', null, null);
+      showError('圖片上傳失敗 — ' + describeFailure(e) + '。檔案未寫入。', null, null);
       return null;
     }
     if (!res.ok) {
       const reason = await describeHttpFailure(res);
-      showBanner('圖片上傳失敗 — ' + reason + '。檔案未寫入。', null, null);
+      showError('圖片上傳失敗 — ' + reason + '。檔案未寫入。', null, null);
       return null;
     }
     let j;
@@ -16111,11 +16156,11 @@
     // that is not a draw.io diagram -- so the reason has to arrive.
     if (!res.ok) {
       const why = (j && typeof j.error === 'string' && j.error) ? j.error : ('HTTP ' + res.status);
-      showBanner('檔案上傳失敗 — ' + why, null, null);
+      showError('檔案上傳失敗 — ' + why, null, null);
       return null;
     }
     if (!j || typeof j.path !== 'string') {
-      showBanner('圖片上傳失敗 — 伺服器回應格式不正確。', null, null);
+      showError('圖片上傳失敗 — 伺服器回應格式不正確。', null, null);
       return null;
     }
     return j.path;
@@ -16154,7 +16199,7 @@
     }
     if (!paths.length) return;
     const target = (anchorEl && document.body.contains(anchorEl)) ? anchorEl : lastBlockEl();
-    if (!target) { showBanner(TOOLBAR_NO_ANCHOR_MESSAGE, null, null); return; }
+    if (!target) { showNotice(TOOLBAR_NO_ANCHOR_MESSAGE); return; }
     const newLines = [];
     paths.forEach((p, i) => {
       if (i > 0) newLines.push('');
@@ -16219,7 +16264,7 @@
       ? blockEl
       : (reresolveBlockEl(identity) ||
         (selfSession ? reresolveBlockElAfterSelfCommit(identity) : null));
-    if (!anchorEl) { showBanner(TOOLBAR_NO_ANCHOR_MESSAGE, null, null); return; }
+    if (!anchorEl) { showNotice(TOOLBAR_NO_ANCHOR_MESSAGE); return; }
     // Re-captured AFTER the commit: `identity` above holds the PRE-commit
     // fingerprint, which the commit we just awaited may itself have
     // invalidated. What has to survive the dialog is the anchor as it stands
@@ -16251,7 +16296,7 @@
       // very symptom being fixed.
       const live = document.body.contains(anchorEl)
         ? anchorEl : reresolveBlockEl(dialogIdentity);
-      if (!live) { showBanner(TOOLBAR_NO_ANCHOR_MESSAGE, null, null); return; }
+      if (!live) { showNotice(TOOLBAR_NO_ANCHOR_MESSAGE); return; }
       insertImages(files, live);
     });
     input.click();
@@ -16279,31 +16324,11 @@
   }
 
   function wireImageDrop() {
-    // ⚠ BOTH listeners are gated on `docMode === 'edit'`, and that gate is
-    // load-bearing rather than tidy-minded.
-    //
-    // In SOURCE mode `enterSourceMode()` only sets `contentEl.hidden = true` —
-    // every `.ed-block` is still in the DOM, so `lastBlockEl()` resolves and an
-    // ungated drop ran the whole upload plus an `insertBlockBelow()` commit
-    // behind the hidden content, against `lines`. The textarea the user is
-    // looking at still held the PRE-drop source, and `leaveSourceMode()` then
-    // commits `commitRangeEdit(1, lines.length, ta.value)` over the post-drop
-    // `lines` — erasing the reference that was just inserted. MEASURED:
-    // '# Doc\n\nBody para.\n' -> source mode -> drop x.png -> type EDITED ->
-    // leave, and the file ends '# Doc\n\nBody para.\n\nEDITED\n' with
-    // assets/x.png orphaned on disk. No error, no visible effect, and a stray
-    // binary left in what is usually a git working tree.
-    //
-    // v3.2.1: `!== 'edit'` rather than `=== 'source'` on purpose. Source is
-    // the only other mode today, but the gate's reason is "the content the
-    // user is looking at is not the content a drop would write into" — a
-    // future third mode inherits the refusal rather than the hole.
     document.addEventListener('dragover', (e) => {
       // Nothing is dropped into a document behind a modal. Returning WITHOUT
       // preventDefault() is what makes the browser refuse the drop, so the
       // gesture is declined visibly rather than swallowed.
       if (waveEditorIsModal()) return;
-      if (docMode !== 'edit') return;
       if (!dragCarriesFiles(e)) return;
       e.preventDefault();
       if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
@@ -16313,7 +16338,6 @@
       // took the document behind it from 4 blocks to 5 and put an `<img>` into
       // `.content`, with the overlay still up and saying nothing.
       if (waveEditorIsModal()) return;
-      if (docMode !== 'edit') return;
       if (!dragCarriesFiles(e)) return;
       const files = e.dataTransfer
         ? Array.prototype.slice.call(e.dataTransfer.files || [])
@@ -16433,94 +16457,26 @@
     }, true);
   }
 
-  // ── 追加 4: the whole-document source escape hatch ─────────────────────
-  // v3.2.1: applyPreviewEditability() lived here and was preview mode's ONLY
-  // effect. Preview is gone (docsource.js's MODES comment carries the
-  // measurement), and with it the last caller of this function.
-
-  function enterSourceMode() {
-    // The pre-edit snapshot fromSource() diffs against. Omitting it makes
-    // `changed` unconditionally true (docsource.js's documented fail-safe),
-    // i.e. a needless write of byte-identical content on every exit.
-    sourceBaseLines = lines.slice();
-    const ta = document.createElement('textarea');
-    ta.className = 'ed-source';
-    ta.setAttribute('aria-label', '文件原始碼');
-    ta.value = docSourceLib.toSource(lines, EOL);
-    contentEl.hidden = true;
-    contentEl.parentNode.insertBefore(ta, contentEl);
-    sourceTextarea = ta;
-    ta.focus();
-  }
-
-  // Returns false when the commit's render failed — the textarea is then left
-  // standing with the user's text intact (a failed round trip must never be
-  // the thing that discards a whole document's edit), and the mode does not
-  // advance.
-  async function leaveSourceMode() {
-    const ta = sourceTextarea;
-    if (!ta) return true;
-    const parsed = docSourceLib.fromSource(ta.value, EOL, sourceBaseLines);
-    if (parsed.changed) {
-      // 全量置換 through the SAME replaceLines() pipeline every other edit
-      // uses — one commitRangeEdit over the whole document, therefore one
-      // undo op, and no second writer of `lines`.
-      const result = commitRangeEdit({ lines, blocks, stack }, 1, lines.length,
-        parsed.lines.join('\n'));
-      if (result.op !== null) {
-        const prevLines = lines;
-        lines = result.lines;
-        setDirty();
-        const editRange = result.op
-          ? { startLine: Math.min(result.op.startLine, result.op.endLine + 1),
-              endLine: Math.max(result.op.startLine - 1, result.op.endLine),
-              delta: result.op.after.length - result.op.before.length }
-          : undefined;
-        const ok = await safeRerenderAll(editRange);
-        if (!ok) {
-          lines = rollbackFailedRender({ lines, stack }, result, prevLines);
-          setDirty();
-          return false;
-        }
-      }
-    }
-    sourceTextarea = null;
-    sourceBaseLines = null;
-    ta.remove();
-    contentEl.hidden = false;
-    return true;
-  }
-
-  async function cycleDocMode() {
-    if (!docSourceLib) return;
-    await setDocMode(docSourceLib.next(docMode));
-  }
-
-  async function setDocMode(next) {
-    if (next === docMode) return;
-    if (docMode === 'edit') {
-      // Same precondition every structural operation has: resolve whatever
-      // session is open before the DOM it lives in is swapped or hidden.
-      const ok = await switchAwayFrom();
-      if (!ok) return;
-    }
-    if (docMode === 'source') {
-      const ok = await leaveSourceMode();
-      if (!ok) return;
-    }
-    docMode = next;
-    if (docMode === 'source') enterSourceMode();
-    document.body.setAttribute('data-ed-mode', docMode);
-    paintModeStatus();
-    updateToolbar();
-  }
-
-  // v3.2.1: 模式必須說出來 —— 使用者按第二下以為卡住，其實是進了 source。
-  // Called from setDocMode() AND from mountToolbar(), so the slot is truthful
-  // from the first paint rather than only after the first mode change.
-  function paintModeStatus() {
+  // The toolbar's right-hand status slot says whether the file on disk matches
+  // the page. Save stays manual (Ctrl/Cmd+S or the save button); this only
+  // makes the state visible. role="status" (mountToolbar()) so a screen
+  // reader hears it. v3.10.0: it used to name the document mode, which went
+  // with source mode. The save button's aria-pressed follows 'dirty' — save
+  // is not in TOOLBAR_TOGGLE_IDS, so updateToolbar() never writes it back.
+  const SAVE_KEY_HINT = /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘S' : 'Ctrl+S';
+  function paintSaveStatus(state) {
     const statusEl = document.querySelector('.ed-toolbar-status');
-    if (statusEl) statusEl.textContent = docMode === 'source' ? '原始碼' : '編輯';
+    if (!statusEl) return;
+    // setDirty() runs on every burst mutation; rewriting an unchanged role=
+    // "status" region would have a screen reader re-announce it per keystroke.
+    if (statusEl.getAttribute('data-state') === state) return;
+    statusEl.setAttribute('data-state', state);
+    if (state === 'clean') statusEl.innerHTML = icons.svg('check', 15) + '<span>已儲存</span>';
+    else if (state === 'dirty') statusEl.innerHTML = '<i class="ed-status-dot"></i><span>有未儲存的變更 · ' + SAVE_KEY_HINT + ' 儲存</span>';
+    else if (state === 'saving') statusEl.innerHTML = '<span>儲存中…</span>';
+    else statusEl.innerHTML = icons.svg('circle-alert', 15) + '<span>無法儲存</span>';
+    const btn = toolbarBtns && toolbarBtns.save;
+    if (btn) btn.setAttribute('aria-pressed', state === 'dirty' ? 'true' : 'false');
   }
 
   // ── mount ──────────────────────────────────────────────────────────────
@@ -16600,8 +16556,7 @@
     // while both had to end up with the hint out.
     toolbarEl.addEventListener('scroll', paintToolbarOverflow, { passive: true });
     window.addEventListener('resize', paintToolbarOverflow);
-    document.body.setAttribute('data-ed-mode', docMode);
-    paintModeStatus();
+    paintSaveStatus(documentIsDirty() ? 'dirty' : 'clean');
     wireToolbarTracking();
     wireImageDrop();
     wirePlainPasteArming();
@@ -16620,10 +16575,7 @@
     // That bail returns for EVERY key, so an entry gesture placed under it
     // would be dead while a degraded block's raw editor holds focus — driven
     // from that editor, the gesture lands on the bar and the caret stays in
-    // the textarea. Source mode is a different surface (`textarea.ed-source`,
-    // which that bail does not match) and reaches the bar as well; there the
-    // model disables the row apart from the button that gets you back out, so
-    // the cursor lands on that one.
+    // the textarea.
     //
     // Escape is NOT claimed here. It belongs to the ordered prologue just
     // below, which already ranks a drag and an open menu above everything
@@ -16789,7 +16741,7 @@
           e.key !== 'Control' && e.key !== 'Meta') {
         exitToolbarKeynav();
         if (e.key !== 'Tab') {
-          showBanner(TOOLBAR_KEYNAV_EXIT_MESSAGE, null, null);
+          showNotice(TOOLBAR_KEYNAV_EXIT_MESSAGE);
           activeBannerIsKeynavExit = true;
         }
       }
@@ -17746,7 +17698,7 @@
       return;
     }
     drawioDeferredNotice = null;
-    showBanner(message, null, null);
+    showNotice(message);
   }
   function flushDrawioNotice() {
     if (!drawioDeferredNotice) return;
@@ -17757,7 +17709,7 @@
     if (activeBanner || noticeTeardownWouldDisrupt()) return;
     const m = drawioDeferredNotice.message;
     drawioDeferredNotice = null;
-    showBanner(m, null, null);
+    showNotice(m);
   }
   const DRAWIO_PAGE_GONE_MSG =
     '目前檢視的 drawio 分頁已不存在（可能已刪除或改名），已切回第一頁。';
@@ -18071,6 +18023,45 @@
     }
   }
 
+  // v3.10.0: an edit made outside the browser. Clean page: reload it and land
+  // on the same heading. Unsaved work here: say so now, once per outside
+  // version, instead of waiting for the save to bounce with a 409.
+  // documentIsDirty() already counts an uncommitted burst, so typing that has
+  // not been committed yet takes the conflict branch (Review Focus 4).
+  let conflictShownFor = 0;
+  function onDiskMtime(disk) {
+    if (disk === mtimeMs || waveEditorIsModal()) return;
+    // An open MD 原始碼 box with typed-but-uncommitted text is unsaved work
+    // too, and documentIsDirty() cannot see it (a textarea's value touches no
+    // block's innerHTML). A reload would silently throw it away.
+    const rawPending = !!(activeEditor && activeEditor.hasChanges());
+    if (!documentIsDirty() && !rawPending) {
+      try { sessionStorage.setItem('md2doc-reload-anchor', JSON.stringify(readingAnchor())); } catch (e) { /* private mode */ }
+      location.reload();
+      return;
+    }
+    if (conflictShownFor === disk) return;
+    conflictShownFor = disk;
+    showConflictBanner();
+  }
+  function readingAnchor() {
+    const hs = [].slice.call(document.querySelectorAll('.content h1[id], .content h2[id], .content h3[id], .content h4[id]'));
+    let best = null;
+    for (const h of hs) { if (h.getBoundingClientRect().top <= 80) best = h; else break; }
+    return best ? { id: best.id, off: Math.round(best.getBoundingClientRect().top) } : { y: Math.round(scrollY) };
+  }
+  (function restoreReloadAnchor() {
+    let a = null;
+    try { a = JSON.parse(sessionStorage.getItem('md2doc-reload-anchor') || 'null'); sessionStorage.removeItem('md2doc-reload-anchor'); } catch (e) { a = null; }
+    if (!a) return;
+    requestAnimationFrame(() => {
+      const h = a.id && document.getElementById(a.id);
+      if (h) scrollTo(0, scrollY + h.getBoundingClientRect().top - a.off);
+      else if (typeof a.y === 'number') scrollTo(0, a.y);
+      showNotice('檔案在別處被修改，已重新載入。');
+    });
+  })();
+
   setInterval(() => {
     // A notice this refresh could not show earlier because the slot was
     // taken (see noteDrawioNotice) gets its next chance here, on the same
@@ -18095,10 +18086,17 @@
     // is the accepted worst-case latency for this whole feature.
     const ack = drawioAckPending;
     drawioAckPending = null;
+    const pingSaveGen = saveGen;
+    const pingSavesInFlight = savesInFlight;
     fetch('/api/ping', {
       method: 'POST', headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ fileId: ED.fileId, drawioClientId: ED.drawioClientId, drawioAck: ack }),
     }).then((res) => {
+      // v3.10.0: X-Md2doc-Mtime is the file's mtime as the server saw it. Only
+      // comparable when no save started or ran during this round trip.
+      const disk = Number(res.headers.get('x-md2doc-mtime'));
+      if (isFinite(disk) && disk > 0 && saveGen === pingSaveGen &&
+          pingSavesInFlight === 0 && savesInFlight === 0) onDiskMtime(disk);
       if (res.status !== 200) return null;
       return res.json().catch(() => null);
     }).then((j) => {
@@ -18748,7 +18746,7 @@
     // missing from the file after the user has read about it, and the dirty
     // net is about the work, not about the notice.
     let el = null;
-    el = showBanner(
+    el = showError(
       '這個改動沒辦法只改幾個位元組寫回檔案，所以【沒有】寫回去 —— 編輯器上看到的' +
       '比檔案裡多一步。受影響的是這個 wavedrom 區塊的內容，' + range +
       '（不含前後兩道圍欄）。原因：' + reason,
@@ -18866,7 +18864,7 @@
       // Kept, with a hole in it. The user is told once more on the way out,
       // because the status line they were reading has just been removed from
       // the screen along with the rest of the dialog.
-      showBanner(
+      showError(
         '這次波形編輯有一個改動沒辦法寫回檔案，它沒有留下來 —— 檔案裡是其餘' +
         '寫得回去的部分（這個區塊的內容在第 ' + seam.startLine + '–' +
         seam.endLine + ' 行）。',
@@ -18904,7 +18902,7 @@
       // it. Losing a session is bad; silently corrupting the document the user
       // keeps editing afterwards is worse, and before fix 1 this path risked
       // both at once.
-      showBanner(
+      showError(
         '畫面沒有重畫成功，但你畫的波形還在文件裡（按 Ctrl+S 可以存檔，' +
         'Ctrl+Z 可以撤銷）。', null, null);
     }