mdv-live 0.5.20 → 0.5.22

package/CHANGELOG.md

@@ -5,6 +5,68 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.22] - 2026-06-02
+
+### Fixed — 大量のファイル/フォルダがあるディレクトリで開くとタブが固まる
+
+ファイル数の多いディレクトリ（例: Downloads、サブフォルダが多いルート）で
+mdv を開く、あるいは開いている間に一括 FS 操作（git checkout / npm install /
+一括保存）が走ると、ブラウザタブが固まることがあった。原因はすべてブラウザ側の
+左ファイルツリーの再描画（サーバー側は無罪）。2 系統あった:
+
+- **イベント storm**: FS イベントごとに `tree_update` を連発し、クライアントが
+  そのたびにツリーを全再構築していた。
+- **一括描画**: 1 ディレクトリの大量エントリ、および初回ロードの先読み
+  （lookahead）で大量の DOM ノードを一度に生成していた。
+
+修正:
+
+- **storm 抑制**: クライアントの `tree_update` を 1 回の refresh に集約
+  （in-flight + dirty で直列化、古いレスポンスの上書き競合も解消）。watcher の
+  broadcast を 150ms デバウンス。`POST /api/file` はファイル新規作成時のみ
+  `tree_update` を送る（既存ファイル保存ではツリーを更新しない）。
+- **ディレクトリ上限 + 遅延ページング**: 1 ディレクトリあたり 500 件で打ち切り、
+  「もっと読み込む」で残りを `GET /api/tree/page` から取得。
+- **先読み廃止**: `/api/tree` は最上位のみを返し、各フォルダは展開時に遅延
+  ロード。どの形のフォルダでも初回オープンの DOM ノード数を最大 1 段（~500 行）
+  に固定（サブフォルダ多数ルートで実測 60,206 → 166 ノード）。
+- **差分描画**: ツリーを innerHTML で全破棄せず、パス + 種別キーで差分 reconcile。
+  外部変更時もスクロール位置・展開状態・選択を維持。ロード済み（折りたたみ含む）
+  および load-more 済みのディレクトリは、表示中の範囲を再取得して反映。
+- **deep-link reveal**: cap を超える位置のエントリへ URL/リンクで遷移した際も、
+  親をページングして当該ノードを reveal + ハイライト。
+
+302 テスト全 PASS。Codex (GPT-5.5) 異種モデルクロスレビュー済み。
+
+## [0.5.21] - 2026-05-22
+
+### Fixed — Marp スライドが横長ペインで上下に見切れる
+
+ウィンドウ表示（split モード）で、スライドペインがスライドのアスペクト比
+（16:9）より横長になると、スライド（特に全面画像）の上下が見切れていた。
+
+- 原因: スライドペイン内の `.marpit` に確定した高さがなく、active SVG の
+  `max-height: 100%` が無効化されていた。SVG が「幅 100%」だけで決まるため、
+  ペインが 16:9 より横長だと縦にあふれて上下がクリップされていた
+  （フルスクリーン表示は `.marpit` が `height: 100vh` を持つため影響なし）。
+- 修正: `.marpit` に `height: 100%` を与え、active SVG を
+  `width/height: auto` + `max-width/height: 100%` の真の "contain" に変更。
+  ペインが横長・縦長どちらでもスライド全体が必ず収まる。
+
+### Added — トラックパッドのピンチズーム / パン
+
+Marp スライド表示で、トラックパッドのピンチ操作（macOS では ctrl+wheel、
+マウスの ctrl+スクロールも同様）でスライドを拡大・縮小できるように。
+
+- 二本指スクロールでパン（ペインのネイティブ overflow スクロール）。ピンチと
+  パンは分離（ctrl 付き wheel のみズーム）。
+- カーソル位置を中心にズーム。ズーム範囲は fit（等倍）〜6倍。
+- ダブルクリック / `0` キーで全体表示（fit）に復帰。`=` / `-` キーでも増減。
+- スライド送り・フルスクリーン切替・ペインのリサイズで自動的に fit に追従。
+- ズーム計算（contain fit / クランプ / wheel→zoom）は DOM 非依存の
+  `src/static/lib/marpZoom.js` に分離し、単体テスト（`tests/test-marp-zoom.js`、
+  12 件）を追加。
+
 ## [0.5.20] - 2026-05-18
 
 ### Fixed — Presenter View のノート編集が毎回 STALE エラー

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.20",
+  "version": "0.5.22",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/api/file.js

@@ -24,6 +24,15 @@ async function resolveAndValidate(relativePath, rootDir) {
   return { valid: true, fullPath: path.join(rootDir, relativePath) };
 }
 
+/**
+ * Check whether a file or directory exists at the given path.
+ * @param {string} fullPath - Absolute path
+ * @returns {Promise<boolean>} True if it exists
+ */
+async function pathExists(fullPath) {
+  return fs.access(fullPath).then(() => true).catch(() => false);
+}
+
 /**
  * Broadcast tree_update to all WebSocket clients
  * @param {Express} app - Express app instance
@@ -184,8 +193,14 @@ export function setupFileRoutes(app) {
     }
 
     try {
+      // Only a *new* file changes the tree structure; editing existing content
+      // does not. Broadcasting tree_update on every autosave makes all clients
+      // re-fetch and re-render the whole tree needlessly (a tree storm during
+      // normal editing). Content updates already reach watchers via the
+      // targeted file_update channel, so an existing-file save stays silent.
+      const isNewFile = !(await pathExists(fullPath));
       await fs.writeFile(fullPath, content, 'utf-8');
-      broadcastTreeUpdate(app);
+      if (isNewFile) broadcastTreeUpdate(app);
       res.json({ success: true });
     } catch (err) {
       res.status(500).json({ error: err.message });

package/src/api/tree.js

@@ -9,6 +9,34 @@ import { getRelativePath, validatePathReal } from '../utils/path.js';
 
 const IGNORED_PATTERNS = new Set(['node_modules', '__pycache__', '.git']);
 const MAX_INITIAL_DEPTH = 1;
+// Cap how many children of a single directory are materialized at once. A
+// directory with tens of thousands of entries would otherwise render tens of
+// thousands of DOM nodes in one shot and freeze the browser tab. The remainder
+// is fetched on demand via /api/tree/page ("load more").
+const MAX_CHILDREN_PER_DIR = 500;
+
+/**
+ * Build a "load more" sentinel node for a truncated directory listing.
+ * @param {string} dirRelativePath - Directory whose children were truncated ('' = root)
+ * @param {number} offset - Number of children already returned
+ * @param {number} total - Total visible children in the directory
+ * @returns {{type: string, path: string, offset: number, total: number, remaining: number}}
+ */
+function moreNode(dirRelativePath, offset, total) {
+  return { type: 'more', path: dirRelativePath, offset, total, remaining: total - offset };
+}
+
+/**
+ * Read a directory's visible entries, sorted (directories first, then files).
+ * @param {string} dirPath - Directory path
+ * @returns {Promise<fs.Dirent[]>} Filtered + sorted entries
+ */
+async function readVisibleEntries(dirPath) {
+  const entries = await fs.readdir(dirPath, { withFileTypes: true });
+  const visible = entries.filter((entry) => !shouldIgnore(entry.name));
+  visible.sort(sortEntries);
+  return visible;
+}
 
 /**
  * Check if an entry should be ignored
@@ -43,12 +71,10 @@ export async function buildFileTree(dirPath, rootDir, depth = 0) {
   const items = [];
 
   try {
-    const entries = await fs.readdir(dirPath, { withFileTypes: true });
-    entries.sort(sortEntries);
-
-    for (const entry of entries) {
-      if (shouldIgnore(entry.name)) continue;
+    const visible = await readVisibleEntries(dirPath);
+    const shown = visible.slice(0, MAX_CHILDREN_PER_DIR);
 
+    for (const entry of shown) {
       const fullPath = path.join(dirPath, entry.name);
       const relativePath = getRelativePath(fullPath, rootDir);
 
@@ -70,6 +96,10 @@ export async function buildFileTree(dirPath, rootDir, depth = 0) {
         });
       }
     }
+
+    if (visible.length > MAX_CHILDREN_PER_DIR) {
+      items.push(moreNode(getRelativePath(dirPath, rootDir), MAX_CHILDREN_PER_DIR, visible.length));
+    }
   } catch (err) {
     console.error(`Error reading directory ${dirPath}:`, err);
   }
@@ -77,15 +107,59 @@ export async function buildFileTree(dirPath, rootDir, depth = 0) {
   return items;
 }
 
+/**
+ * Read one page of a directory's direct children (no lookahead). Backs
+ * /api/tree/page so the remainder of a large directory can be revealed on
+ * demand instead of all at once.
+ * @param {string} dirPath - Directory path
+ * @param {string} rootDir - Root directory for relative paths
+ * @param {number} offset - Index of the first child to return
+ * @param {number} limit - Maximum children to return
+ * @returns {Promise<Array>} Page items (subdirectories unloaded), plus a
+ *   trailing "more" sentinel when further children remain.
+ */
+export async function readDirPage(dirPath, rootDir, offset, limit) {
+  const items = [];
+
+  try {
+    const visible = await readVisibleEntries(dirPath);
+    const slice = visible.slice(offset, offset + limit);
+
+    for (const entry of slice) {
+      const fullPath = path.join(dirPath, entry.name);
+      const relativePath = getRelativePath(fullPath, rootDir);
+
+      if (entry.isDirectory()) {
+        items.push({ type: 'directory', name: entry.name, path: relativePath, children: [], loaded: false });
+      } else {
+        items.push({ type: 'file', name: entry.name, path: relativePath, icon: getFileType(entry.name).icon });
+      }
+    }
+
+    const nextOffset = offset + slice.length;
+    if (visible.length > nextOffset) {
+      items.push(moreNode(getRelativePath(dirPath, rootDir), nextOffset, visible.length));
+    }
+  } catch (err) {
+    console.error(`Error reading directory page ${dirPath}:`, err);
+  }
+
+  return items;
+}
+
 /**
  * Setup file tree routes
  * @param {Express} app - Express app instance
  */
 export function setupTreeRoutes(app) {
-  // Get full tree
+  // Get the top level of the tree. Direct children only (subdirectories come
+  // back unloaded), same as expand. Without this depth argument the initial
+  // load eagerly materialized one level of grandchildren into hidden DOM — a
+  // root with many large subdirectories could mount tens of thousands of nodes
+  // up front and freeze the tab. Each folder now loads its children on expand.
   app.get('/api/tree', async (req, res) => {
     try {
-      const tree = await buildFileTree(app.locals.rootDir, app.locals.rootDir);
+      const tree = await buildFileTree(app.locals.rootDir, app.locals.rootDir, MAX_INITIAL_DEPTH);
       res.json(tree);
     } catch (err) {
       res.status(500).json({ error: err.message });
@@ -106,12 +180,39 @@ export function setupTreeRoutes(app) {
       }
 
       const fullPath = path.join(app.locals.rootDir, relativePath);
-      const children = await buildFileTree(fullPath, app.locals.rootDir, 0);
+      // Direct children only: start at the depth cap so subdirectories come
+      // back unloaded (loaded:false, children:[]). Lazy-loading one level per
+      // expand avoids reading a whole grandchild level on every expand of a
+      // wide directory (which made expanding/restoring large trees expensive).
+      const children = await buildFileTree(fullPath, app.locals.rootDir, MAX_INITIAL_DEPTH);
       res.json(children);
     } catch (err) {
       res.status(500).json({ error: err.message });
     }
   });
+
+  // Load one more page of a large directory's children (lazy pagination).
+  app.get('/api/tree/page', async (req, res) => {
+    try {
+      const relativePath = typeof req.query.path === 'string' ? req.query.path : '';
+      const offset = Math.max(0, parseInt(req.query.offset, 10) || 0);
+      const requested = parseInt(req.query.limit, 10) || MAX_CHILDREN_PER_DIR;
+      const limit = Math.min(MAX_CHILDREN_PER_DIR, Math.max(1, requested));
+
+      // '' = root (always inside rootDir); any other path must validate.
+      if (relativePath && !await validatePathReal(relativePath, app.locals.rootDir)) {
+        return res.status(403).json({ error: 'Access denied' });
+      }
+
+      const dirPath = relativePath
+        ? path.join(app.locals.rootDir, relativePath)
+        : app.locals.rootDir;
+      const items = await readDirPage(dirPath, app.locals.rootDir, offset, limit);
+      res.json(items);
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
 }
 
 export default setupTreeRoutes;

package/src/static/app.js

@@ -455,8 +455,10 @@
                 if (data.type === 'file_update' && state.activeTabIndex >= 0) {
                     this.handleFileUpdate(data);
                 } else if (data.type === 'tree_update') {
-                    // tree_update を受信したらAPIから最新ツリーを取得
-                    await FileTreeManager.refresh();
+                    // Coalesce bursts: bulk FS ops (git checkout, npm install)
+                    // emit hundreds of tree_update frames. Schedule a single
+                    // refresh instead of refreshing once per frame.
+                    FileTreeManager.scheduleRefresh();
                 }
             };
 
@@ -565,7 +567,38 @@
             elements.fileTree.innerHTML = '<div style="padding: 16px; color: var(--text-muted);">読み込みに失敗しました。<br><button onclick="location.reload()" style="margin-top: 8px; cursor: pointer;">再読み込み</button></div>';
         },
 
+        // --- tree refresh coalescing --------------------------------------
+        // A burst of tree_update frames (a bulk FS operation emits hundreds)
+        // must collapse into a single tree refresh. Refreshing once per frame
+        // tears down and rebuilds the whole tree repeatedly and freezes the
+        // tab. We also never run two refreshes concurrently: the old code did
+        // `await refresh()` per ws message, so overlapping fetches could let a
+        // stale response overwrite a newer tree. `_refreshInFlight` serializes
+        // them; `_refreshDirty` runs exactly one more pass for events that
+        // arrived mid-flight.
+        _refreshTimer: null,
+        _refreshInFlight: false,
+        _refreshDirty: false,
+
+        scheduleRefresh() {
+            if (this._refreshInFlight) {
+                // A refresh is running; remember to re-run once after it ends.
+                this._refreshDirty = true;
+                return;
+            }
+            if (this._refreshTimer) return; // burst already scheduled
+            this._refreshTimer = setTimeout(() => {
+                this._refreshTimer = null;
+                this.refresh();
+            }, 50);
+        },
+
         async refresh() {
+            if (this._refreshInFlight) {
+                this._refreshDirty = true;
+                return;
+            }
+            this._refreshInFlight = true;
             try {
                 const response = await MDVApi.fetchTree();
                 if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -573,52 +606,248 @@
                 await this.update(tree);
             } catch (e) {
                 console.error('Failed to refresh tree:', e);
+            } finally {
+                this._refreshInFlight = false;
+                if (this._refreshDirty) {
+                    this._refreshDirty = false;
+                    this.scheduleRefresh();
+                }
             }
         },
 
         async update(tree) {
-            // 展開済みかつ読み込み済みのパスを保存
-            const expandedPaths = new Set();
-            document.querySelectorAll('.tree-item').forEach(item => {
-                const children = item.querySelector('.tree-children');
-                if (children && !children.classList.contains('collapsed') && item.dataset.loaded === 'true') {
-                    expandedPaths.add(item.dataset.path);
-                }
-            });
+            // Keyed, in-place reconcile instead of an innerHTML teardown. The
+            // old code rebuilt the whole tree on every external change, which
+            // (a) flickered, (b) lost scroll position, and (c) collapsed any
+            // folder deeper than the lookahead because those nodes were not in
+            // the rebuilt DOM. Reconciling by path key preserves scroll,
+            // selection, and already-expanded subtrees, and only touches nodes
+            // that actually changed.
+            const treeEl = elements.fileTree;
+            const prevScroll = treeEl.scrollTop;
+
+            // `tree` is the first capped page of the root. If the user paged the
+            // root past it ("load more"), refetch the full shown range so
+            // reconcile keeps AND refreshes those extra rows rather than pruning
+            // them or going stale.
+            const rootCapped = tree.length > 0 && tree[tree.length - 1].type === 'more';
+            const rootRows = this.countItemRows(treeEl);
+            const rootList = (rootCapped && rootRows > tree.length - 1)
+                ? await this.fetchChildrenUpTo('', rootRows)
+                : tree;
+            this.reconcile(treeEl, rootList);
+
+            // `/api/tree` only carries the top level, so every directory whose
+            // children have been loaded must be refreshed explicitly to pick up
+            // changes. Done in parallel and reconciled in place (keeps each
+            // folder's expansion state).
+            await this.refreshLoaded();
+
+            treeEl.scrollTop = prevScroll;
+            this.updateHighlight();
+        },
 
-            elements.fileTree.innerHTML = this.renderItems(tree);
+        nodeKey(el) {
+            if (el.classList && el.classList.contains('tree-item')) {
+                // Include kind so a file and a directory at the same path get
+                // different keys: if an entry is replaced by one of the other
+                // kind, reconcile treats it as remove+add and rebuilds correct
+                // markup instead of reusing a node that can't toggle kind.
+                const kind = el.querySelector(':scope > .tree-children') ? 'd' : 'f';
+                return 'item:' + kind + ':' + el.dataset.path;
+            }
+            if (el.classList && el.classList.contains('tree-more')) return 'more:' + (el.dataset.dir || '');
+            return null;
+        },
+
+        itemKey(item) {
+            if (item.type === 'more') return 'more:' + (item.path || '');
+            const kind = item.type === 'directory' ? 'd' : 'f';
+            return 'item:' + kind + ':' + item.path;
+        },
+
+        // Reconcile `container`'s direct children against `items` by path key:
+        // reuse matching nodes (preserving their subtrees), create new ones,
+        // remove deleted ones, and fix ordering — without tearing the list down.
+        reconcile(container, items) {
+            const list = Array.isArray(items) ? items : [];
+
+            // Callers always pass a list covering at least the rows currently
+            // shown (paged directories are refetched in full via
+            // fetchChildrenUpTo before reconciling), so the keyed diff below can
+            // prune freely without dropping load-more'd rows.
+            const existing = new Map();
+            for (const el of Array.from(container.children)) {
+                const key = this.nodeKey(el);
+                if (key) existing.set(key, el);
+            }
+
+            const used = new Set();
+            let prev = null;
+            for (const item of list) {
+                const key = this.itemKey(item);
+                let el = existing.get(key);
+                if (el && !used.has(key)) {
+                    this.updateNode(el, item);
+                } else {
+                    el = this.createNode(item);
+                }
+                used.add(key);
 
-            // 展開済みディレクトリを復元（子要素も再取得）
-            for (const path of expandedPaths) {
-                const item = document.querySelector(`.tree-item[data-path="${CSS.escape(path)}"]`);
-                if (item) {
-                    const children = item.querySelector('.tree-children');
-                    const chevron = item.querySelector('.chevron');
+                const desiredNext = prev ? prev.nextSibling : container.firstChild;
+                if (el !== desiredNext) {
+                    container.insertBefore(el, desiredNext);
+                }
+                prev = el;
+            }
 
-                    // 子要素を再取得
-                    if (children && item.dataset.loaded !== 'true') {
-                        await this.expandDirectory(path, children);
-                    }
+            for (const [key, el] of existing) {
+                if (!used.has(key)) el.remove();
+            }
+        },
 
-                    if (children) children.classList.remove('collapsed');
-                    if (chevron) chevron.classList.add('expanded');
+        updateNode(el, item) {
+            if (item.type === 'directory') {
+                // Only refresh the child level when the new data carries it
+                // (loaded:true). When it doesn't (loaded:false), leave the
+                // existing — possibly deeper-expanded — subtree untouched and
+                // never downgrade an already-loaded directory.
+                if (item.loaded === true) {
+                    el.dataset.loaded = 'true';
+                    const childrenBox = el.querySelector(':scope > .tree-children');
+                    if (childrenBox) this.reconcile(childrenBox, item.children || []);
+                }
+            } else if (item.type === 'more') {
+                el.dataset.offset = item.offset;
+                el.dataset.total = item.total;
+                const name = el.querySelector('.name');
+                if (name) {
+                    const remaining = item.remaining != null ? item.remaining : (item.total - item.offset);
+                    name.textContent = `… 残り ${remaining} 件を表示`;
                 }
             }
+            // files: name/icon are keyed by path, so a rename is add + remove
+        },
 
-            this.updateHighlight();
+        createNode(item) {
+            const html = item.type === 'directory' ? this.renderDirectory(item)
+                : item.type === 'more' ? this.renderMore(item)
+                : this.renderFile(item);
+            const tmp = document.createElement('div');
+            tmp.innerHTML = html.trim();
+            return tmp.firstElementChild;
+        },
+
+        countItemRows(container) {
+            let n = 0;
+            for (const el of container.children) {
+                if (el.classList && el.classList.contains('tree-item')) n++;
+            }
+            return n;
+        },
+
+        // Fetch a directory's children up to at least `minCount` rows, paging
+        // through /api/tree/page. Used to refresh a directory the user has
+        // "load more"d past the cap: re-read exactly what is currently shown
+        // (plus a trailing "more" row if further entries remain) so reconcile
+        // can apply adds/deletes without dropping the loaded rows. For a normal
+        // (<= one page) directory this is a single request. `dirPath` is '' for
+        // the root.
+        async fetchChildrenUpTo(dirPath, minCount) {
+            let items = [];
+            let offset = 0;
+            // Bounded as a safety net; each page advances the offset.
+            for (let guard = 0; guard < 1000; guard++) {
+                const response = await MDVApi.pageTree(dirPath, offset);
+                if (!response.ok) break;
+                const page = await response.json();
+                let more = null;
+                if (page.length && page[page.length - 1].type === 'more') {
+                    more = page.pop();
+                }
+                items = items.concat(page);
+                if (!more) return items;             // directory fully read
+                if (items.length >= minCount) {       // covered what is shown
+                    items.push(more);                 // keep the "load more" row
+                    return items;
+                }
+                offset = more.offset;
+            }
+            return items;
+        },
+
+        // Refresh every directory whose children have been loaded — expanded or
+        // collapsed. A collapsed-but-loaded folder still holds cached rows in
+        // the DOM; without refetching it here, a file added or removed inside it
+        // stays stale until reload (the top-level payload no longer carries a
+        // lookahead that refreshed those folders for free). reconcile keeps each
+        // folder's expanded descendants intact.
+        async refreshLoaded() {
+            const loaded = [];
+            document.querySelectorAll('.tree-item').forEach(item => {
+                const box = item.querySelector(':scope > .tree-children');
+                if (item.dataset.loaded === 'true' && box) {
+                    loaded.push({ path: item.dataset.path, count: this.countItemRows(box) });
+                }
+            });
+
+            await Promise.all(loaded.map(async ({ path: dirPath, count }) => {
+                try {
+                    // Re-read exactly what is shown (paging if it was load-more'd)
+                    // so reconcile refreshes the directory without dropping rows.
+                    const children = await this.fetchChildrenUpTo(dirPath, count);
+                    const item = document.querySelector(`.tree-item[data-path="${CSS.escape(dirPath)}"]`);
+                    const box = item && item.querySelector(':scope > .tree-children');
+                    if (box) this.reconcile(box, children);
+                } catch (e) {
+                    // best-effort refresh of one loaded directory; ignore
+                }
+            }));
         },
 
         renderItems(items) {
             if (!items || items.length === 0) return '';
 
             return items.map(item => {
-                if (item.type === 'directory') {
-                    return this.renderDirectory(item);
-                }
+                if (item.type === 'directory') return this.renderDirectory(item);
+                if (item.type === 'more') return this.renderMore(item);
                 return this.renderFile(item);
             }).join('');
         },
 
+        // "Load more" row shown when a directory has more children than the
+        // per-directory cap. Clicking it fetches the next page and splices the
+        // rows in. Not a .tree-item, so it never matches the file-open / drag /
+        // context-menu delegation.
+        renderMore(item) {
+            const remaining = item.remaining != null ? item.remaining : (item.total - item.offset);
+            const safeDir = escapeHtml(item.path || '');
+            return `
+                <div class="tree-more" data-dir="${safeDir}" data-offset="${item.offset}" data-total="${item.total}" onclick="MDV.loadMore(this)">
+                    <span class="name">… 残り ${remaining} 件を表示</span>
+                </div>
+            `;
+        },
+
+        async loadMore(el) {
+            if (el.classList.contains('loading')) return;
+            el.classList.add('loading');
+            const dir = el.dataset.dir || '';
+            const offset = parseInt(el.dataset.offset, 10) || 0;
+            try {
+                const response = await MDVApi.pageTree(dir, offset);
+                if (!response.ok) throw new Error(`HTTP ${response.status}`);
+                const items = await response.json();
+                // Splice the new rows in before this node, then drop it. The
+                // page response carries its own trailing "more" row if needed.
+                el.insertAdjacentHTML('beforebegin', this.renderItems(items));
+                el.remove();
+            } catch (e) {
+                console.error('Failed to load more:', e);
+                el.classList.remove('loading');
+            }
+        },
+
         renderDirectory(item) {
             const loaded = item.loaded !== false;
             const safePath = escapeHtml(item.path);
@@ -655,6 +884,32 @@
             }
         },
 
+        // Page a directory's listing until `targetPath` appears, so URL/link
+        // navigation can reveal an entry that sorts past the per-directory cap.
+        // The parent must already be loaded (expandToPath processes parents
+        // first). Returns the node, or null if it genuinely isn't there.
+        async revealInParent(targetPath) {
+            const slash = targetPath.lastIndexOf('/');
+            const parentPath = slash >= 0 ? targetPath.slice(0, slash) : '';
+            const container = parentPath
+                ? document.querySelector(`.tree-item[data-path="${CSS.escape(parentPath)}"] > .tree-children`)
+                : elements.fileTree;
+            if (!container) return null;
+
+            const sel = `:scope > .tree-item[data-path="${CSS.escape(targetPath)}"]`;
+            for (let guard = 0; guard < 1000; guard++) {
+                const found = container.querySelector(sel);
+                if (found) return found;
+                const more = container.querySelector(':scope > .tree-more');
+                if (!more) return null; // listing exhausted; target not present
+                const offsetBefore = more.dataset.offset;
+                await this.loadMore(more);
+                const moreAfter = container.querySelector(':scope > .tree-more');
+                if (moreAfter && moreAfter.dataset.offset === offsetBefore) return null; // no progress
+            }
+            return null;
+        },
+
         async expandToPath(filePath) {
             // パスを分割して順番に展開
             const parts = filePath.split('/');
@@ -663,7 +918,12 @@
             for (const part of parts) {
                 currentPath = currentPath ? `${currentPath}/${part}` : part;
 
-                const item = document.querySelector(`.tree-item[data-path="${CSS.escape(currentPath)}"]`);
+                let item = document.querySelector(`.tree-item[data-path="${CSS.escape(currentPath)}"]`);
+                if (!item) {
+                    // The node may sort past its parent's per-directory cap and
+                    // not be rendered yet. Page the parent in until it appears.
+                    item = await this.revealInParent(currentPath);
+                }
                 if (!item) continue;
 
                 const children = item.querySelector('.tree-children');
@@ -1206,6 +1466,136 @@
         }
     };
 
+    // ============================================================
+    // Marp Slide Zoom (trackpad pinch-to-zoom + pan)
+    // ============================================================
+    //
+    // At fit (zoom === 1) the slide is sized entirely by the CSS "contain"
+    // rules so the whole slide — image and all — is always visible. Zooming
+    // past 1 switches the active SVG to explicit pixel dimensions
+    // (fitSize * zoom); the pane's native overflow then lets a two-finger
+    // scroll pan around the enlarged slide. macOS trackpad pinch arrives as a
+    // `wheel` event with `ctrlKey` set, so ctrl+scroll on a mouse zooms too.
+    const MarpZoom = {
+        area: null,
+        zoom: 1,
+        onWheel: null,
+        onDblClick: null,
+        ro: null,
+
+        // Pure zoom math lives in lib/marpZoom.js (globalThis.MDVMarpZoom) so
+        // it can be unit-tested without a DOM. If that script failed to load,
+        // the CSS-only fit still works; we just skip wiring the gestures.
+        lib() { return (typeof globalThis !== 'undefined') ? globalThis.MDVMarpZoom : null; },
+
+        init(area) {
+            this.detach();
+            if (!this.lib()) return;
+            this.area = area;
+            this.zoom = 1;
+            this.onWheel = (e) => {
+                // Plain two-finger scroll is left to the pane so it pans the
+                // zoomed slide natively. Only a pinch (ctrlKey) zooms.
+                if (!e.ctrlKey) return;
+                e.preventDefault();
+                this.zoomTo(this.lib().zoomForWheel(this.zoom, e.deltaY), e.clientX, e.clientY);
+            };
+            // Double-click anywhere on the slide snaps back to fit.
+            this.onDblClick = () => this.reset();
+            area.addEventListener('wheel', this.onWheel, { passive: false });
+            area.addEventListener('dblclick', this.onDblClick);
+            // Re-apply the pixel size when the pane is resized (window resize,
+            // dragging the notes splitter) so a zoomed slide tracks the new
+            // fit instead of freezing at a stale size.
+            if (typeof ResizeObserver !== 'undefined') {
+                this.ro = new ResizeObserver(() => {
+                    if (!this.lib().isFit(this.zoom)) this.zoomTo(this.zoom);
+                });
+                this.ro.observe(area);
+            }
+        },
+
+        detach() {
+            if (this.area && this.onWheel) {
+                this.area.removeEventListener('wheel', this.onWheel);
+                this.area.removeEventListener('dblclick', this.onDblClick);
+            }
+            if (this.ro) { this.ro.disconnect(); this.ro = null; }
+            this.area = null;
+            this.onWheel = null;
+            this.onDblClick = null;
+            this.zoom = 1;
+        },
+
+        activeSvg() {
+            return this.area
+                ? this.area.querySelector('.marpit > svg[data-marpit-svg].active')
+                : null;
+        },
+
+        // Slide dimensions at fit (zoom 1), resolved the same way the CSS
+        // "contain" rule does — so the 1.0 → 1.01 transition doesn't jump.
+        fitSize(svg) {
+            const cs = getComputedStyle(this.area);
+            const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+            const padY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+            const aw = this.area.clientWidth - padX;
+            const ah = this.area.clientHeight - padY;
+            const vb = svg.viewBox && svg.viewBox.baseVal;
+            const ratio = (vb && vb.width) ? vb.height / vb.width : 9 / 16;
+            return this.lib().containFit(aw, ah, ratio);
+        },
+
+        // Apply `z` around a focal point (defaults to the pane centre). The
+        // before/after rects already fold in centring and scroll offsets, so
+        // the point under the cursor stays put as the slide grows.
+        zoomTo(z, focalX, focalY) {
+            const svg = this.activeSvg();
+            if (!svg) return;
+            z = this.lib().clampZoom(z);
+            if (this.lib().isFit(z)) { this.reset(); return; }
+
+            if (focalX == null) {
+                const r = this.area.getBoundingClientRect();
+                focalX = r.left + r.width / 2;
+                focalY = r.top + r.height / 2;
+            }
+            const before = svg.getBoundingClientRect();
+            const relX = before.width ? (focalX - before.left) / before.width : 0.5;
+            const relY = before.height ? (focalY - before.top) / before.height : 0.5;
+
+            this.zoom = z;
+            const fit = this.fitSize(svg);
+            svg.style.width = (fit.w * z) + 'px';
+            svg.style.height = (fit.h * z) + 'px';
+            this.area.classList.add('marp-zoomed');
+
+            const after = svg.getBoundingClientRect();
+            this.area.scrollLeft += (after.left + relX * after.width) - focalX;
+            this.area.scrollTop += (after.top + relY * after.height) - focalY;
+        },
+
+        // Step zoom for keyboard (+/-): dir > 0 zooms in, else out.
+        nudge(dir) {
+            if (!this.lib()) return;
+            this.zoomTo(this.lib().zoomForStep(this.zoom, dir));
+        },
+
+        // Back to fit: clear the pixel sizing on every slide (the active one
+        // may have changed since we zoomed) and hand sizing back to CSS.
+        reset() {
+            this.zoom = 1;
+            if (!this.area) return;
+            this.area.querySelectorAll('.marpit > svg[data-marpit-svg]').forEach(s => {
+                s.style.width = '';
+                s.style.height = '';
+            });
+            this.area.classList.remove('marp-zoomed');
+            this.area.scrollLeft = 0;
+            this.area.scrollTop = 0;
+        }
+    };
+
     // ============================================================
     // Presenter View (separate window with speaker notes)
     // ============================================================
@@ -1523,6 +1913,8 @@
         gotoSlide(index) {
             const slides = elements.content.querySelectorAll('.marpit > svg[data-marpit-svg]');
             if (!slides.length || index < 0 || index >= slides.length) return;
+            // Each slide opens at fit; clear any zoom carried from the last one.
+            MarpZoom.reset();
             slides.forEach((s, i) => s.classList.toggle('active', i === index));
             const panels = elements.content.querySelectorAll(
                 '#marpNotesArea > .speaker-notes-panel'
@@ -1619,6 +2011,12 @@
                 MarpSplitHandle.attach(splitEl, handleEl);
             }
 
+            // Enable trackpad pinch-to-zoom / pan on the slide pane.
+            const slideArea = document.getElementById('marpSlideArea');
+            if (slideArea) {
+                MarpZoom.init(slideArea);
+            }
+
             // Add navigation controls. The nav is appended to .content (NOT
             // marpit) so its `position: fixed` doesn't get clipped by the
             // grid container's overflow:hidden rule.
@@ -1692,6 +2090,8 @@
             );
 
             const showSlide = (index) => {
+                // Each slide opens at fit; clear any zoom from the last one.
+                MarpZoom.reset();
                 slides.forEach((slide, i) => {
                     slide.classList.toggle('active', i === index);
                 });
@@ -1731,6 +2131,11 @@
             const expandIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>';
             const shrinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4m0 5H4m5 0L4 4m11 5h5m-5 0V4m0 5l5-5M9 15v5m0-5H4m5 0l-5 5m11-5h5m-5 0v5m0-5l5 5" /></svg>';
             const toggleFullscreen = () => {
+                // Snap back to fit across the transition: the fullscreen and
+                // windowed panes have different sizes, and the fullscreen CSS
+                // owns the fit there, so a leftover pixel zoom would mis-size
+                // the slide. The user can re-pinch on either side.
+                MarpZoom.reset();
                 document.body.classList.toggle('marp-fullscreen');
                 const isFullscreen = document.body.classList.contains('marp-fullscreen');
                 if (fullscreenBtn) {
@@ -1826,6 +2231,17 @@
                     // shortcut and must not also open the presenter view.
                     e.preventDefault();
                     PresenterView.open();
+                } else if ((e.key === '+' || e.key === '=') && !e.metaKey && !e.ctrlKey) {
+                    // Keyboard zoom (centre-anchored) mirrors the pinch gesture.
+                    // Skip Cmd/Ctrl which the browser owns for page zoom.
+                    e.preventDefault();
+                    MarpZoom.nudge(1);
+                } else if ((e.key === '-' || e.key === '_') && !e.metaKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    MarpZoom.nudge(-1);
+                } else if (e.key === '0' && !e.metaKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    MarpZoom.reset();
                 } else if (e.key === 'Escape') {
                     e.preventDefault();
                     if (document.body.classList.contains('marp-fullscreen')) {
@@ -1843,6 +2259,7 @@
             // 800ms save timer doesn't fire after the editor element is gone.
             InlineNotesPanel.detach();
             MarpSplitHandle.detach();
+            MarpZoom.detach();
             elements.content.classList.remove('marp-viewer');
             document.body.classList.remove('marp-fullscreen');
             if (marpKeyHandler) {
@@ -3360,6 +3777,7 @@
         openFile: (path) => TabManager.open(path),
         switchTab: (index) => TabManager.switch(index),
         closeTab: (index) => TabManager.close(index),
+        loadMore: (element) => FileTreeManager.loadMore(element),
         toggleDirectory: async (element) => {
             const chevron = element.querySelector('.chevron');
             const children = element.nextElementSibling;

package/src/static/index.html

@@ -181,6 +181,7 @@
     <script src="/static/lib/apiClient.js"></script>
     <script src="/static/lib/saveQueue.js"></script>
     <script src="/static/lib/tabRegistry.js"></script>
+    <script src="/static/lib/marpZoom.js"></script>
     <script src="/static/app.js"></script>
 </body>
 </html>

package/src/static/lib/apiClient.js

@@ -39,6 +39,12 @@
   function expandTree(path) {
     return fetch('/api/tree/expand?path=' + encodeURIComponent(path));
   }
+  /** GET /api/tree/page — next page of a large directory's children */
+  function pageTree(path, offset, limit) {
+    const params = new URLSearchParams({ path: path || '', offset: String(offset || 0) });
+    if (limit) params.set('limit', String(limit));
+    return fetch('/api/tree/page?' + params.toString());
+  }
   function fetchFile(path) {
     return fetch('/api/file?path=' + encodeURIComponent(path));
   }
@@ -65,6 +71,7 @@
       saveMarpNote,
       fetchTree,
       expandTree,
+      pageTree,
       fetchFile,
       saveFile,
       fetchInfo,

package/src/static/lib/marpZoom.js

@@ -0,0 +1,84 @@
+/**
+ * Pure math for the Marp slide zoom (src/static/app.js → MarpZoom).
+ *
+ * Imported from a `<script>` tag (no module loader), so the functions are
+ * exposed on `globalThis.MDVMarpZoom`. Kept DOM-free so the contain/clamp
+ * logic — the part that decides whether the whole slide stays visible — can
+ * be unit-tested without a browser (see tests/test-marp-zoom.js).
+ */
+(function () {
+  'use strict';
+
+  const ZOOM_MIN = 1;
+  const ZOOM_MAX = 6;
+
+  // Per-wheel-delta zoom sensitivity. Pinch deltas are small and frequent;
+  // the exponential keeps each step proportional so the gesture feels even
+  // across the whole range instead of accelerating near the top. Tuned for a
+  // snappy pinch (a 120-delta notch ≈ +62%; was 0.0015 ≈ +20%, 0.0025 ≈ +35%).
+  const WHEEL_FACTOR = 0.004;
+
+  // Keyboard +/- step ratio (zoom in / zoom out).
+  const STEP_IN = 1.25;
+  const STEP_OUT = 0.8;
+
+  /**
+   * "Contain" fit: the largest w×h with aspect `ratio` (= height/width) that
+   * fits inside areaW×areaH. Mirrors the CSS `max-width/height:100%` +
+   * `width/height:auto` resolution so the JS-driven zoom (≥1) starts exactly
+   * where the CSS fit (=1) leaves off — no jump at the 1.0 boundary.
+   *
+   * @param {number} areaW  available content width (px)
+   * @param {number} areaH  available content height (px)
+   * @param {number} ratio  slide height / slide width (e.g. 720/1280)
+   * @returns {{w:number,h:number}} fitted slide size, never below 1px
+   */
+  function containFit(areaW, areaH, ratio) {
+    if (!(areaW > 0) || !(areaH > 0) || !(ratio > 0)) {
+      return { w: 1, h: 1 };
+    }
+    let w = areaW;
+    let h = areaW * ratio;
+    if (h > areaH) {
+      h = areaH;
+      w = areaH / ratio;
+    }
+    return { w: Math.max(1, w), h: Math.max(1, h) };
+  }
+
+  /** Clamp a zoom level to [ZOOM_MIN, ZOOM_MAX]. */
+  function clampZoom(z) {
+    if (!Number.isFinite(z)) return ZOOM_MIN;
+    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z));
+  }
+
+  /**
+   * Next zoom level for a wheel/pinch delta. Negative deltaY (pinch open /
+   * scroll up) zooms in. Result is already clamped.
+   */
+  function zoomForWheel(current, deltaY) {
+    return clampZoom(current * Math.exp(-deltaY * WHEEL_FACTOR));
+  }
+
+  /** Next zoom level for a keyboard step. dir > 0 zooms in, else out. */
+  function zoomForStep(current, dir) {
+    return clampZoom(current * (dir > 0 ? STEP_IN : STEP_OUT));
+  }
+
+  /** True when a zoom level is effectively the fit (no pixel sizing needed). */
+  function isFit(z) {
+    return z <= ZOOM_MIN + 0.001;
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVMarpZoom = {
+      ZOOM_MIN,
+      ZOOM_MAX,
+      containFit,
+      clampZoom,
+      zoomForWheel,
+      zoomForStep,
+      isFit,
+    };
+  }
+})();

package/src/static/styles.css

@@ -166,6 +166,20 @@ body {
 .tree-item-content .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tree-children { padding-left: 16px; }
 .tree-children.collapsed { display: none; }
+
+/* "Load more" row for directories with more children than the per-dir cap */
+.tree-more {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px 6px 34px;
+    cursor: pointer;
+    font-size: 12px;
+    font-style: italic;
+    color: var(--text-muted);
+    user-select: none;
+}
+.tree-more:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+.tree-more.loading { opacity: 0.5; cursor: default; }
 .chevron { transition: transform 0.15s; }
 .chevron.expanded { transform: rotate(90deg); }
 .chevron.loading { animation: spin 0.6s linear infinite; }
@@ -1080,24 +1094,38 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
 .marp-slide-area {
     overflow: auto;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    /* `safe` keeps the slide reachable when zoomed larger than the pane:
+       plain `center` would push the overflowing top/left out of the scroll
+       range so you could never scroll back to them. */
+    align-items: safe center;
+    justify-content: safe center;
     padding: 20px;
     min-height: 0;
 }
 
+/* The pane is the trackpad-zoom focus target. Pinch (ctrl+wheel) zooms the
+   slide; two-finger scroll then pans via the pane's native overflow. */
+.marp-slide-area.marp-zoomed { cursor: grab; }
+.marp-slide-area.marp-zoomed.marp-panning { cursor: grabbing; }
+
 .marp-slide-area .marpit {
+    /* Definite height (the pane's height is definite) so the active SVG's
+       `max-height: 100%` actually clamps — without it the SVG was sized by
+       width alone and overflowed vertically on wide/short panes. */
     width: 100%;
-    max-height: 100%;
+    height: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: safe center;
+    justify-content: safe center;
 }
 
 .marp-slide-area .marpit > svg[data-marpit-svg] {
     display: none;
+    /* width:auto + height:auto + the two max-* caps give "contain": the SVG
+       (intrinsic 16:9 viewBox) scales down to fit BOTH pane dimensions. */
     max-width: 100%;
     max-height: 100%;
+    width: auto;
     height: auto;
     box-shadow: 0 4px 20px rgba(0,0,0,0.15);
     border-radius: 4px;
@@ -1107,6 +1135,14 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
     display: block;
 }
 
+/* When zoomed past fit, MarpZoom sets explicit px width/height on the active
+   SVG. The caps must be lifted or they'd clamp it back to the pane size. */
+.marp-slide-area.marp-zoomed .marpit { width: auto; height: auto; }
+.marp-slide-area.marp-zoomed .marpit > svg[data-marpit-svg].active {
+    max-width: none;
+    max-height: none;
+}
+
 .marp-split-handle {
     cursor: row-resize;
     background: var(--border);

package/src/watcher.js

@@ -56,11 +56,21 @@ export function setupWatcher(rootDir, wss, options = {}) {
     return path.relative(rootDir, filePath).split(path.sep).join('/');
   }
 
+  // Coalesce bursts: a bulk FS operation (git checkout, npm install, unzip)
+  // fires many add/unlink events. Emit at most one tree_update per debounce
+  // window so clients don't re-fetch and re-render the whole tree per event.
+  const TREE_UPDATE_DEBOUNCE_MS = 150;
+  let treeUpdateTimer = null;
+
   function broadcastTreeUpdate() {
-    wss.broadcast({
-      type: 'tree_update',
-      tree: null
-    });
+    if (treeUpdateTimer) return; // a broadcast is already scheduled for this burst
+    treeUpdateTimer = setTimeout(() => {
+      treeUpdateTimer = null;
+      wss.broadcast({
+        type: 'tree_update',
+        tree: null
+      });
+    }, TREE_UPDATE_DEBOUNCE_MS);
   }
 
   watcher.on('change', async (filePath) => {