collabmd 0.1.51 → 0.1.52

package/src/client/presentation/quick-switcher-controller.js

@@ -11,6 +11,7 @@ const MAX_VISIBLE_RESULTS = 30;
 const NO_RECENT_FILE_RANK = Number.MAX_SAFE_INTEGER;
 const FILE_RESULT_ID_PREFIX = 'quick-switcher-file-';
 const TEXT_RESULT_ID_PREFIX = 'quick-switcher-text-';
+export const FILE_FILTER_DEBOUNCE_MS = 150;
 
 function getRawFileName(filePath) {
   return String(filePath ?? '').split('/').pop() || String(filePath ?? '');
@@ -94,7 +95,13 @@ export class QuickSwitcherController {
     this.fileMatchCount = 0;
     this.fileResultsTruncated = false;
     this.fileCorpus = [];
+    this.fileCorpusByPath = new Map();
     this.lastFileListRef = null;
+    this.lastFileMetadataRef = null;
+    this.cachedModifiedTimes = new Map();
+    this.lastRecentFilesRef = null;
+    this.cachedRecentRanks = new Map();
+    this.fileFilterTimer = null;
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.isOpen = false;
@@ -136,7 +143,13 @@ export class QuickSwitcherController {
     });
 
     this.input?.addEventListener('input', () => {
-      this.handleInput();
+      if (this.mode === 'text') {
+        this.handleInput();
+        return;
+      }
+
+      this.abortTextSearch();
+      this.scheduleFileFilter();
     });
 
     this.input?.addEventListener('keydown', (e) => {
@@ -166,6 +179,8 @@ export class QuickSwitcherController {
   }
 
   handleClose() {
+    clearTimeout(this.fileFilterTimer);
+    this.fileFilterTimer = null;
     this.abortTextSearch();
     this.isOpen = false;
     this.input?.setAttribute('aria-expanded', 'false');
@@ -245,27 +260,48 @@ export class QuickSwitcherController {
     this.filterFiles();
   }
 
+  scheduleFileFilter() {
+    clearTimeout(this.fileFilterTimer);
+    this.fileFilterTimer = setTimeout(() => {
+      this.fileFilterTimer = null;
+      if (this.isOpen && this.mode === 'files') {
+        this.filterFiles();
+      }
+    }, FILE_FILTER_DEBOUNCE_MS);
+  }
+
   filterFiles() {
+    clearTimeout(this.fileFilterTimer);
+    this.fileFilterTimer = null;
     this.resultsList?.setAttribute('aria-busy', 'false');
     const query = this.input?.value.trim().toLowerCase().replace(/\s+/gu, ' ') ?? '';
     const allFiles = this.getFileList?.() ?? [];
     if (allFiles !== this.lastFileListRef) {
       this.lastFileListRef = allFiles;
       this.fileCorpus = allFiles.map((filePath) => createFileSearchEntry(filePath));
+      this.fileCorpusByPath = new Map(this.fileCorpus.map((entry) => [entry.filePath, entry]));
     }
 
     this.fileMatches.clear();
     const fileMetadata = this.getFileMetadata?.() ?? [];
-    const modifiedTimes = new Map(
-      (Array.isArray(fileMetadata) ? fileMetadata : []).map((entry) => [
-        entry?.path,
-        Number.isFinite(Number(entry?.mtimeMs)) ? Number(entry.mtimeMs) : 0,
-      ]),
-    );
+    if (fileMetadata !== this.lastFileMetadataRef) {
+      this.lastFileMetadataRef = fileMetadata;
+      this.cachedModifiedTimes = new Map(
+        (Array.isArray(fileMetadata) ? fileMetadata : []).map((entry) => [
+          entry?.path,
+          Number.isFinite(Number(entry?.mtimeMs)) ? Number(entry.mtimeMs) : 0,
+        ]),
+      );
+    }
+    const modifiedTimes = this.cachedModifiedTimes;
     const recentFiles = this.getRecentFiles?.() ?? [];
-    const recentRanks = new Map(
-      (Array.isArray(recentFiles) ? recentFiles : []).map((filePath, index) => [filePath, index]),
-    );
+    if (recentFiles !== this.lastRecentFilesRef) {
+      this.lastRecentFilesRef = recentFiles;
+      this.cachedRecentRanks = new Map(
+        (Array.isArray(recentFiles) ? recentFiles : []).map((filePath, index) => [filePath, index]),
+      );
+    }
+    const recentRanks = this.cachedRecentRanks;
     if (!query) {
       this.filteredFiles = [...this.fileCorpus]
         .sort((left, right) => {
@@ -293,6 +329,7 @@ export class QuickSwitcherController {
         this.fileMatches.set(entry.filePath, match);
         const rankedEntry = {
           filePath: entry.filePath,
+          lowerPath: entry.lowerPath,
           recentRank: recentRanks.get(entry.filePath) ?? NO_RECENT_FILE_RANK,
           score: match.score,
         };
@@ -306,7 +343,7 @@ export class QuickSwitcherController {
                 rankedEntry.recentRank < current.recentRank
                 || (
                   rankedEntry.recentRank === current.recentRank
-                  && entry.lowerPath < String(current.filePath).toLowerCase()
+                  && rankedEntry.lowerPath < current.lowerPath
                 )
               )
             );
@@ -372,10 +409,10 @@ export class QuickSwitcherController {
       item.setAttribute('aria-selected', index === this.selectedIndex ? 'true' : 'false');
       item.dataset.index = String(index);
 
+      const corpusEntry = this.fileCorpusByPath.get(filePath);
       const fileName = getRawFileName(filePath);
-      const dirPath = getDirPath(filePath);
+      const dirPath = corpusEntry ? corpusEntry.dirPath : getDirPath(filePath);
       const match = this.fileMatches.get(filePath);
-      const corpusEntry = this.fileCorpus.find((entry) => entry.filePath === filePath);
       const matchIndices = corpusEntry ? splitMatchIndices(corpusEntry, match?.indices) : { dirPath: [], fileName: [] };
 
       const svg = getVaultFileIconSvg(filePath, { className: 'qs-result-icon' });

package/src/client/presentation/scroll-sync-controller.js

@@ -5,6 +5,9 @@ const VIEWPORT_FOCUS_RATIO = 0.35;
 const LARGE_DOCUMENT_EDITOR_IDLE_MS = 120;
 const MIN_VIEWPORT_FOCUS_OFFSET = 12;
 const TOP_SCROLL_EPSILON = 2;
+// SVG renderers may expose source lines relative to the diagram, not the document.
+const SOURCE_BLOCK_SELECTOR = '[data-source-line]:not(svg, svg *)';
+const SCROLL_INPUT_EVENTS = ['wheel', 'touchstart', 'pointerdown', 'keydown'];
 
 function getScrollableRange(element) {
   return Math.max(element.scrollHeight - element.clientHeight, 0);
@@ -29,7 +32,7 @@ function getElementScrollTop(container, element) {
 }
 
 function isLeafSourceBlock(element) {
-  return !element.querySelector('[data-source-line]');
+  return !element.querySelector(SOURCE_BLOCK_SELECTOR);
 }
 
 export class ScrollSyncController {
@@ -48,7 +51,7 @@ export class ScrollSyncController {
     this.editorScroller = null;
     this.editorScrollActive = false;
     this.editorScrollIdleTimer = null;
-    this.lockedElements = new Set();
+    this.scrollUnlockFrames = new Map();
     this.pendingSync = null;
     this.frameId = null;
     this.previewBlocks = null;
@@ -56,10 +59,33 @@ export class ScrollSyncController {
     this.previewBlocksReadyCallbacks = [];
     this.largeDocumentMode = false;
     this.lastInteractionSource = 'editor';
+    this.scrollInputSource = null;
     this.suspendedUntil = 0;
+    this.listenerController = null;
+    this.editorListenerController = null;
+
+    this.handleScrollInput = (event) => {
+      const source = event.currentTarget;
+      // Layout and hydration can emit scroll events long after a frame lock expires.
+      // Only input in the other pane transfers control of scroll synchronization.
+      this.scrollInputSource = source;
+      this.lastInteractionSource = source === this.editorScroller ? 'editor' : 'preview';
+      // A collaborator's input takes priority over pending programmatic scrolling.
+      this.pendingSync = null;
+      cancelAnimationFrame(this.scrollUnlockFrames.get(source));
+      this.scrollUnlockFrames.delete(source);
+      const target = source === this.editorScroller ? this.previewContainer : this.editorScroller;
+      if (target) this.lockScrollTarget(target);
+      if (source === this.previewContainer) {
+        clearTimeout(this.editorScrollIdleTimer);
+        this.editorScrollIdleTimer = null;
+        this.setEditorScrollActive(false);
+      }
+    };
 
     this.handleEditorScroll = () => {
-      if (!this.editorScroller || this.lockedElements.has(this.editorScroller) || this.isSuspended()) {
+      if (!this.editorScroller || (this.scrollInputSource && this.scrollInputSource !== this.editorScroller)
+        || this.scrollUnlockFrames.has(this.editorScroller) || this.isSuspended()) {
         return;
       }
 
@@ -77,7 +103,8 @@ export class ScrollSyncController {
     };
 
     this.handlePreviewScroll = () => {
-      if (!this.previewContainer || this.lockedElements.has(this.previewContainer) || this.isSuspended()) {
+      if (!this.previewContainer || (this.scrollInputSource && this.scrollInputSource !== this.previewContainer)
+        || this.scrollUnlockFrames.has(this.previewContainer) || this.isSuspended()) {
         return;
       }
 
@@ -87,7 +114,11 @@ export class ScrollSyncController {
   }
 
   initialize() {
-    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
+    this.listenerController?.abort();
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
+    this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true, signal });
+    SCROLL_INPUT_EVENTS.forEach((type) => this.previewContainer?.addEventListener(type, this.handleScrollInput, { passive: true, signal }));
   }
 
   attachEditorScroller(editorScroller) {
@@ -95,9 +126,18 @@ export class ScrollSyncController {
       return;
     }
 
-    this.editorScroller?.removeEventListener('scroll', this.handleEditorScroll);
+    this.editorListenerController?.abort();
     this.editorScroller = editorScroller;
-    this.editorScroller?.addEventListener('scroll', this.handleEditorScroll, { passive: true });
+    this.scrollInputSource = null;
+    if (!this.editorScroller) {
+      this.editorListenerController = null;
+      return;
+    }
+
+    this.editorListenerController = new AbortController();
+    const { signal } = this.editorListenerController;
+    this.editorScroller.addEventListener('scroll', this.handleEditorScroll, { passive: true, signal });
+    SCROLL_INPUT_EVENTS.forEach((type) => this.editorScroller.addEventListener(type, this.handleScrollInput, { passive: true, signal }));
   }
 
   syncPreviewToEditor() {
@@ -111,9 +151,12 @@ export class ScrollSyncController {
   }
 
   destroy() {
-    this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
-    this.editorScroller?.removeEventListener('scroll', this.handleEditorScroll);
+    this.listenerController?.abort();
+    this.listenerController = null;
+    this.editorListenerController?.abort();
+    this.editorListenerController = null;
     this.editorScroller = null;
+    this.scrollInputSource = null;
     clearTimeout(this.editorScrollIdleTimer);
     this.editorScrollIdleTimer = null;
     this.pendingSync = null;
@@ -121,7 +164,8 @@ export class ScrollSyncController {
     cancelIdleRender(this.previewBlocksWarmId);
     this.previewBlocksWarmId = null;
     this.previewBlocksReadyCallbacks = [];
-    this.lockedElements.clear();
+    this.scrollUnlockFrames.forEach((frame) => cancelAnimationFrame(frame));
+    this.scrollUnlockFrames.clear();
     this.editorScrollActive = false;
     this.lastInteractionSource = 'editor';
     this.suspendedUntil = 0;
@@ -133,7 +177,7 @@ export class ScrollSyncController {
   }
 
   scheduleSync(source, target, { preferApproximateMapping = false } = {}) {
-    if (!source || !target || this.lockedElements.has(source) || this.isSuspended()) {
+    if (!source || !target || this.scrollUnlockFrames.has(source) || this.isSuspended()) {
       return;
     }
 
@@ -268,7 +312,7 @@ export class ScrollSyncController {
   }
 
   sync(source, target, { preferApproximateMapping = false } = {}) {
-    if (!source || !target || this.lockedElements.has(source) || this.isSuspended()) {
+    if (!source || !target || this.scrollUnlockFrames.has(source) || this.isSuspended()) {
       return;
     }
 
@@ -283,11 +327,8 @@ export class ScrollSyncController {
     if (source === this.previewContainer && target === this.editorScroller) {
       const targetLine = this.getEditorLineNumberForPreviewScroll();
       if (targetLine !== null) {
-        this.lockedElements.add(target);
+        this.lockScrollTarget(target);
         this.scrollEditorToLine?.(targetLine, VIEWPORT_FOCUS_RATIO);
-        requestAnimationFrame(() => {
-          this.lockedElements.delete(target);
-        });
         return;
       }
     }
@@ -301,12 +342,19 @@ export class ScrollSyncController {
   }
 
   setScrollTop(target, nextScrollTop) {
-    this.lockedElements.add(target);
+    this.lockScrollTarget(target);
     target.scrollTop = clampScrollTop(nextScrollTop);
+  }
 
-    requestAnimationFrame(() => {
-      this.lockedElements.delete(target);
-    });
+  lockScrollTarget(target) {
+    cancelAnimationFrame(this.scrollUnlockFrames.get(target));
+    // CodeMirror can adjust scroll position during its next layout measurement.
+    // Keep that adjustment from feeding back into the pane being scrolled.
+    this.scrollUnlockFrames.set(target, requestAnimationFrame(() => {
+      this.scrollUnlockFrames.set(target, requestAnimationFrame(() => {
+        this.scrollUnlockFrames.delete(target);
+      }));
+    }));
   }
 
   getPreviewScrollTopForEditorLine() {
@@ -371,7 +419,7 @@ export class ScrollSyncController {
   }
 
   buildPreviewBlocks() {
-    const allBlocks = Array.from(this.previewElement.querySelectorAll('[data-source-line]'))
+    const allBlocks = Array.from(this.previewElement.querySelectorAll(SOURCE_BLOCK_SELECTOR))
       .map((element) => {
         const start = Number.parseInt(element.getAttribute('data-source-line') || '', 10);
         const end = Number.parseInt(element.getAttribute('data-source-line-end') || '', 10);

package/src/client/styles/components/navigation.css

@@ -32,11 +32,11 @@
   flex-shrink: 0;
 }
 
-.toolbar-vim-button .toolbar-vim-state {
+.ui-button--toggle .toolbar-toggle-state {
   margin-left: auto;
 }
 
-.toolbar-vim-button[aria-pressed='true'] .toolbar-vim-state {
+.ui-button--toggle[aria-pressed='true'] .toolbar-toggle-state {
   background: var(--color-primary-highlight);
   color: var(--color-primary);
 }

package/src/client/styles/deferred-collab.css

@@ -1,3 +1,4 @@
+@import 'katex/dist/katex.min.css';
 @import './features/comments-drawer.css';
 @import './features/comment-overview.css';
 @import './features/comment-overlays.css';

package/src/client/styles/deferred-preview.css

@@ -1,3 +1,4 @@
+@import 'katex/dist/katex.min.css';
 @import './features/media-lightbox.css';
 @import './features/embedded-preview.css';
 @import './features/diagram-preview.css';

package/src/client/styles/features/diagram-preview.css

@@ -115,6 +115,7 @@
   max-width: 100%;
   max-height: min(70vh, 720px);
   overflow: auto;
+  scrollbar-gutter: stable;
   padding: var(--space-3);
   touch-action: pan-x pan-y;
   background: transparent;

package/src/client/styles/features/preview-markdown.css

@@ -1106,17 +1106,17 @@
   position: relative;
   max-width: 100%;
   margin: var(--space-4) 0;
-  overflow-x: auto;
+  overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-surface);
-  -webkit-overflow-scrolling: touch;
 }
 
 .preview-content pre code {
   display: block;
-  width: fit-content;
-  min-width: 100%;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   padding: var(--space-4);
   background: none;
   color: var(--color-text);