collabmd 0.1.51 → 0.1.54

package/src/client/presentation/outline-controller.js

@@ -9,8 +9,6 @@ export class OutlineController {
     this.activeHeadingId = null;
     this.headings = [];
     this.pinnedHeadingId = null;
-    this.pdfOutline = null;
-    this.onNavigateToPdfOutline = null;
     this.onNavigateToHeading = onNavigateToHeading;
     this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
@@ -83,11 +81,6 @@ export class OutlineController {
       return;
     }
 
-    if (this.pdfOutline) {
-      this.renderPdfOutline();
-      return;
-    }
-
     const previewContent = document.getElementById('previewContent');
     const headings = previewContent?.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [];
 
@@ -131,85 +124,6 @@ export class OutlineController {
     this.observeHeadings(Array.from(headings));
   }
 
-  setPdfOutline(outline, onNavigate) {
-    this.cleanup();
-    this.pdfOutline = Array.isArray(outline) && outline.length > 0 ? outline : null;
-    this.onNavigateToPdfOutline = this.pdfOutline ? onNavigate : null;
-    this.activeHeadingId = null;
-    this.toggleButton?.classList.toggle('hidden', !this.pdfOutline);
-
-    if (!this.pdfOutline) {
-      this.navigation?.replaceChildren();
-      this.close();
-      return;
-    }
-
-    if (this.outlineOpen) {
-      this.renderPdfOutline();
-    }
-  }
-
-  clearPdfOutline() {
-    this.pdfOutline = null;
-    this.onNavigateToPdfOutline = null;
-    this.activeHeadingId = null;
-    this.pinnedHeadingId = null;
-    this.navigation?.replaceChildren();
-    this.toggleButton?.classList.add('hidden');
-    this.close();
-  }
-
-  renderPdfOutline() {
-    if (!this.navigation || !this.pdfOutline) {
-      return;
-    }
-
-    this.cleanup();
-    this.navigation.replaceChildren();
-    const fragment = document.createDocumentFragment();
-    let itemIndex = 0;
-    const appendItems = (items, level = 1) => {
-      items.forEach((item) => {
-        if (!item || typeof item !== 'object') {
-          return;
-        }
-
-        const title = String(item.title ?? '').trim();
-        if (title) {
-          const id = `pdf-outline-${itemIndex}`;
-          const button = document.createElement('button');
-          button.type = 'button';
-          button.className = 'outline-item';
-          button.dataset.level = String(Math.min(level, 6));
-          button.dataset.target = id;
-          button.title = title;
-          button.textContent = title;
-          button.addEventListener('click', () => {
-            this.setActiveItem(id, { behavior: 'auto' });
-            this.onNavigateToPdfOutline?.(item);
-            if (this.mobileBreakpointQuery.matches) {
-              this.close();
-            }
-          });
-          fragment.appendChild(button);
-          itemIndex += 1;
-        }
-
-        if (Array.isArray(item.items)) {
-          appendItems(item.items, Math.min(level + 1, 6));
-        }
-      });
-    };
-
-    appendItems(this.pdfOutline);
-    if (fragment.childNodes.length === 0) {
-      this.navigation.innerHTML = '<div class="outline-empty">No outline found</div>';
-      return;
-    }
-
-    this.navigation.appendChild(fragment);
-  }
-
   cleanup({ preservePinnedHeading = false } = {}) {
     if (this.activeHeadingFrame) {
       cancelAnimationFrame(this.activeHeadingFrame);

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/presentation/vault-dashboard.js

@@ -0,0 +1,63 @@
+import { findFuzzyMatch } from '../domain/file-search.js';
+
+export function renderVaultDashboard({ container, vaults, getVaultUrl, onSelect }) {
+  container.removeAttribute('role');
+  container.classList.add('vault-dashboard');
+  container.innerHTML = `
+    <main class="vault-dashboard-card" aria-labelledby="vaultDashboardTitle">
+      <header class="vault-dashboard-header">
+        <div class="sidebar-brand">
+          <svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+            <rect x="3" y="4" width="17" height="24" rx="3" stroke="var(--color-primary)" stroke-width="2"></rect>
+            <rect x="12" y="4" width="17" height="24" rx="3" fill="var(--color-primary)"></rect>
+            <path d="M17 12h7m-7 4h7m-7 4h4" stroke="var(--color-primary-contrast)" stroke-width="1.5"></path>
+          </svg>
+          <span class="sidebar-title">CollabMD</span>
+        </div>
+        <h1 id="vaultDashboardTitle">Choose a vault</h1>
+        <p>Open a project to start collaborating.</p>
+      </header>
+      <div class="vault-dashboard-search">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m16 16 4 4"></path></svg>
+        <input type="search" class="ui-input" aria-label="Find a vault" placeholder="Find a vault…">
+      </div>
+      <div class="vault-dashboard-list-heading">
+        <h2>Your vaults</h2>
+        <span class="ui-pill-badge ui-pill-badge--count ui-pill-badge--muted"></span>
+      </div>
+      <nav aria-label="Vaults"></nav>
+      <p class="ui-empty-state" role="status" hidden>No matching vaults.</p>
+      <footer class="vault-dashboard-footer">Press <kbd>Enter</kbd> to open the first match</footer>
+    </main>`;
+  container.querySelector('.ui-pill-badge').textContent = String(vaults.length);
+  const list = container.querySelector('nav');
+  const empty = container.querySelector('[role="status"]');
+  const entries = vaults.map((vault) => {
+    const link = document.createElement('a');
+    link.className = 'ui-record-surface vault-dashboard-link';
+    link.href = getVaultUrl(vault.id);
+    link.innerHTML = `
+      <span class="vault-dashboard-icon" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></span>
+      <span class="vault-dashboard-name"></span>
+      <svg class="vault-dashboard-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-5-5 5 5-5 5"></path></svg>`;
+    link.querySelector('.vault-dashboard-name').textContent = vault.name || vault.id;
+    link.addEventListener('click', () => onSelect?.(vault.id));
+    list.append(link);
+    return { link, text: `${vault.name || vault.id} ${vault.id}`.toLowerCase() };
+  });
+  const input = container.querySelector('input');
+  input.addEventListener('input', () => {
+    const query = input.value.trim().toLowerCase();
+    entries.forEach(({ link, text }) => {
+      link.hidden = Boolean(query && !text.includes(query) && !findFuzzyMatch(text, query));
+    });
+    empty.hidden = entries.some(({ link }) => !link.hidden);
+  });
+  input.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      entries.find(({ link }) => !link.hidden)?.link.click();
+    }
+  });
+  input.focus();
+}

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);