collabmd 0.1.47 → 0.1.49

package/src/client/presentation/image-lightbox-controller.js

@@ -76,6 +76,8 @@ export class ImageLightboxController {
     this.pinchStartCenter = { x: 0, y: 0 };
     this.didDrag = false;
     this.resetButton = null;
+    this.previouslyFocusedElement = null;
+    this.blockingModalHandler = () => this.close();
 
     this.handlePreviewClick = (event) => {
       const target = event.target;
@@ -102,12 +104,6 @@ export class ImageLightboxController {
         return;
       }
 
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        this.close();
-        return;
-      }
-
       if (event.key === '+' || event.key === '=') {
         event.preventDefault();
         this.zoomBy(ZOOM_STEP);
@@ -161,15 +157,19 @@ export class ImageLightboxController {
     }
 
     this.ensureOverlayRoot();
+    this.previouslyFocusedElement = this.document.activeElement instanceof this.window.HTMLElement
+      ? this.document.activeElement
+      : null;
     this.resetView();
     this.titleElement.textContent = image.getAttribute('alt') || 'Image preview';
     this.imageElement.src = src;
     this.imageElement.alt = image.getAttribute('alt') || '';
-    this.overlayRoot.hidden = false;
+    this.overlayRoot.showModal();
     this.isOpen = true;
     this.document.body.classList.add('image-lightbox-open');
+    this.document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.syncTransform();
-    this.overlayRoot.focus?.();
+    this.overlayRoot.querySelector('button:not(:disabled)')?.focus();
     return true;
   }
 
@@ -184,11 +184,14 @@ export class ImageLightboxController {
     this.pinchStartDistance = 0;
     this.didDrag = false;
     this.viewport?.classList?.remove('is-dragging');
-    if (this.overlayRoot) {
-      this.overlayRoot.hidden = true;
+    if (this.overlayRoot?.open) {
+      this.overlayRoot.close();
     }
     this.isOpen = false;
     this.document.body.classList.remove('image-lightbox-open');
+    this.document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.previouslyFocusedElement?.focus?.();
+    this.previouslyFocusedElement = null;
   }
 
   resetView() {
@@ -442,11 +445,14 @@ export class ImageLightboxController {
       return this.overlayRoot;
     }
 
-    const overlayRoot = this.document.createElement('div');
+    const overlayRoot = this.document.createElement('dialog');
     overlayRoot.className = 'image-lightbox-root';
     overlayRoot.dataset.imageLightboxRoot = 'true';
-    overlayRoot.hidden = true;
-    overlayRoot.tabIndex = -1;
+    overlayRoot.setAttribute('aria-labelledby', 'imageLightboxTitle');
+    overlayRoot.addEventListener('cancel', (event) => {
+      event.preventDefault();
+      this.close();
+    });
 
     const backdrop = this.document.createElement('button');
     backdrop.className = 'image-lightbox-backdrop';
@@ -460,9 +466,6 @@ export class ImageLightboxController {
 
     const shell = this.document.createElement('div');
     shell.className = 'image-lightbox-shell';
-    shell.setAttribute('role', 'dialog');
-    shell.setAttribute('aria-modal', 'true');
-    shell.setAttribute('aria-label', 'Image preview');
     shell.addEventListener('click', (event) => event.stopPropagation());
     shell.addEventListener('pointerdown', (event) => event.stopPropagation());
 
@@ -471,6 +474,7 @@ export class ImageLightboxController {
 
     const title = this.document.createElement('div');
     title.className = 'image-lightbox-title';
+    title.id = 'imageLightboxTitle';
     title.textContent = 'Image preview';
 
     const controls = this.document.createElement('div');

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

@@ -15,7 +15,7 @@ export class LayoutController {
     this.previewPane = document.getElementById('previewPane');
     this.mobileToggleButton = document.getElementById('mobileViewToggle');
     this.resizer = document.getElementById('resizer');
-    this.viewButtons = Array.from(document.querySelectorAll('.view-btn'));
+    this.viewButtons = Array.from(document.querySelectorAll('#toolbarViewToggle [data-view]'));
   }
 
   isMobileViewport() {
@@ -128,6 +128,8 @@ export class LayoutController {
     const previewIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
     const editorIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>';
 
+    // Icons and labels are fixed application-owned markup.
+    // pi-lens-ignore: no-inner-html-js
     this.mobileToggleButton.innerHTML = `${label === 'Editor' ? editorIcon : previewIcon}<span class="ui-toolbar-button-label">${label}</span>`;
   }
 

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

@@ -1,5 +1,4 @@
-import { stripVaultFileExtension } from '../../domain/file-kind.js';
-import { escapeHtml } from '../domain/vault-utils.js';
+import { createFileSearchEntry, findFileSearchMatch } from '../domain/file-search.js';
 import { getVaultFileIconSvg } from './file-icon-svg.js';
 import {
   DEFAULT_SEARCH_DEBOUNCE_MS,
@@ -17,117 +16,15 @@ function getRawFileName(filePath) {
   return String(filePath ?? '').split('/').pop() || String(filePath ?? '');
 }
 
-function createCorpusEntry(filePath) {
-  const displayName = stripVaultFileExtension(filePath);
-  const fileName = displayName.split('/').pop() || displayName;
-  const rawFileName = getRawFileName(filePath);
-
-  return {
-    displayName,
-    fileName,
-    filePath,
-    lowerDisplayName: displayName.toLowerCase(),
-    lowerFileName: fileName.toLowerCase(),
-    lowerPath: String(filePath).toLowerCase(),
-    lowerRawFileName: rawFileName.toLowerCase(),
-  };
-}
-
 function getFileName(filePath) {
-  const displayName = stripVaultFileExtension(filePath);
-  return displayName.split('/').pop() || displayName;
+  return createFileSearchEntry(filePath).fileName;
 }
 
 function getDirPath(filePath) {
-  const displayName = stripVaultFileExtension(filePath);
+  const displayName = createFileSearchEntry(filePath).displayName;
   return displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
 }
 
-function createRangeIndices(start, length) {
-  return Array.from({ length }, (_, index) => start + index);
-}
-
-function findFuzzyMatch(text, query) {
-  const indices = [];
-  let queryIndex = 0;
-  let score = 0;
-  let consecutiveBonus = 0;
-
-  for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
-    if (/\s/u.test(query[queryIndex]) && /[\s/\\_-]/u.test(text[index])) {
-      queryIndex += 1;
-      consecutiveBonus = 0;
-      continue;
-    }
-
-    if (text[index] !== query[queryIndex]) {
-      if (queryIndex > 0) {
-        score -= 0.25;
-      }
-      consecutiveBonus = 0;
-      continue;
-    }
-
-    queryIndex += 1;
-    indices.push(index);
-    consecutiveBonus += 1;
-    score += consecutiveBonus;
-
-    if (
-      index === 0
-      || text[index - 1] === '/'
-      || text[index - 1] === '-'
-      || text[index - 1] === '_'
-      || text[index - 1] === ' '
-    ) {
-      score += 5;
-    }
-  }
-
-  return queryIndex === query.length && score > 0
-    ? { indices, score }
-    : null;
-}
-
-function findCorpusMatch(entry, query) {
-  const fileIndex = entry.lowerFileName.indexOf(query);
-  if (fileIndex >= 0) {
-    return {
-      indices: createRangeIndices(fileIndex + (entry.displayName.length - entry.fileName.length), query.length),
-      score: 100 + (1 / entry.fileName.length),
-    };
-  }
-
-  const pathIndex = entry.lowerDisplayName.indexOf(query);
-  if (pathIndex >= 0) {
-    return {
-      indices: createRangeIndices(pathIndex, query.length),
-      score: 50 + (1 / entry.displayName.length),
-    };
-  }
-
-  const rawFileIndex = entry.lowerRawFileName.indexOf(query);
-  if (rawFileIndex >= 0) {
-    return {
-      indices: createRangeIndices(
-        rawFileIndex + (entry.displayName.length - entry.fileName.length),
-        query.length,
-      ),
-      score: 40 + (1 / entry.lowerRawFileName.length),
-    };
-  }
-
-  const rawPathIndex = entry.lowerPath.indexOf(query);
-  if (rawPathIndex >= 0) {
-    return {
-      indices: createRangeIndices(rawPathIndex, query.length),
-      score: 25 + (1 / entry.lowerPath.length),
-    };
-  }
-
-  return findFuzzyMatch(entry.lowerDisplayName, query);
-}
-
 function splitMatchIndices(entry, indices = []) {
   const fileNameStart = entry.displayName.length - entry.fileName.length;
   return {
@@ -138,42 +35,25 @@ function splitMatchIndices(entry, indices = []) {
   };
 }
 
-function highlightText(text, indices = []) {
-  if (indices.length === 0) {
-    return escapeHtml(text);
-  }
-
+function appendHighlightedText(element, text, indices = []) {
   const matchedIndices = new Set(indices);
-  let result = '';
-  let runStart = null;
   let cursor = 0;
 
-  const appendRun = (runEnd) => {
-    result += escapeHtml(text.slice(cursor, runStart));
-    result += `<mark>${escapeHtml(text.slice(runStart, runEnd + 1))}</mark>`;
-    cursor = runEnd + 1;
-    runStart = null;
-  };
+  while (cursor < text.length) {
+    const matched = matchedIndices.has(cursor);
+    let end = cursor + 1;
+    while (end < text.length && matchedIndices.has(end) === matched) end += 1;
 
-  for (let index = 0; index < text.length; index += 1) {
-    if (!matchedIndices.has(index)) {
-      if (runStart !== null) {
-        appendRun(index - 1);
-      }
-      continue;
-    }
-
-    if (runStart === null) {
-      runStart = index;
+    const value = text.slice(cursor, end);
+    if (matched) {
+      const mark = document.createElement('mark');
+      mark.textContent = value;
+      element.append(mark);
+    } else {
+      element.append(value);
     }
+    cursor = end;
   }
-
-  if (runStart !== null) {
-    appendRun(text.length - 1);
-  }
-
-  result += escapeHtml(text.slice(cursor));
-  return result;
 }
 
 export class QuickSwitcherController {
@@ -218,28 +98,20 @@ export class QuickSwitcherController {
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.isOpen = false;
-    this.previousActiveElement = null;
     this.mode = 'files';
     this.textResults = null;
     this.textResultItems = [];
     this.textSearchRunner = new QuickSwitcherTextSearchRunner({
       debounceMs: this.searchDebounceMs,
     });
+    this.blockingModalHandler = () => this.close();
 
     this.bindEvents();
   }
 
   bindEvents() {
-    this.overlay?.addEventListener('mousedown', (e) => {
-      if (e.target === this.overlay) this.close();
-    });
-
-    this.overlay?.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        this.close();
-      }
-    });
+    document.addEventListener?.('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.overlay?.addEventListener('close', () => this.handleClose());
 
     this.modeTabs.forEach((tab, index) => {
       tab.addEventListener('click', () => {
@@ -293,86 +165,36 @@ export class QuickSwitcherController {
     });
   }
 
+  handleClose() {
+    this.abortTextSearch();
+    this.isOpen = false;
+    this.input?.setAttribute('aria-expanded', 'false');
+    this.input.value = '';
+    this.resultsList.innerHTML = '';
+    this.setActiveDescendant('');
+  }
+
   open() {
-    if (!this.overlay) return;
+    if (!this.overlay || this.overlay.open) return;
 
-    this.previousActiveElement = document.activeElement;
     this.isOpen = true;
     this.input.value = '';
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
-    this.overlay.classList.add('visible');
-    this.overlay.setAttribute('aria-hidden', 'false');
-    this.input?.setAttribute('aria-expanded', 'true');
     this.setMode('files', { preserveInput: true });
-
-    // The overlay transitions visibility hidden→visible over 120ms.
-    // Browsers ignore .focus() while the element is still visibility:hidden,
-    // so we must wait for the transition to complete.
-    this._focusAfterTransition();
-  }
-
-  /** Focus the input once the overlay visibility transition finishes. */
-  _focusAfterTransition() {
-    this._cancelPendingFocus();
-
-    const tryFocus = () => {
-      this._focusCleanup = null;
-      this.input?.focus();
-      if (this.isOpen && this.input && document.activeElement !== this.input) {
-        setTimeout(() => this.input?.focus(), 50);
-      }
-    };
-
-    const onEnd = (e) => {
-      if (e.propertyName === 'visibility' || e.propertyName === 'opacity') {
-        this.overlay.removeEventListener('transitionend', onEnd);
-        clearTimeout(fallbackTimer);
-        tryFocus();
-      }
-    };
-    this.overlay.addEventListener('transitionend', onEnd);
-
-    const fallbackTimer = setTimeout(() => {
-      this.overlay.removeEventListener('transitionend', onEnd);
-      tryFocus();
-    }, 160);
-
-    this._focusCleanup = () => {
-      this.overlay.removeEventListener('transitionend', onEnd);
-      clearTimeout(fallbackTimer);
-    };
+    this.overlay.showModal();
+    this.input?.setAttribute('aria-expanded', 'true');
   }
 
-  _cancelPendingFocus() {
-    if (this._focusCleanup) {
-      this._focusCleanup();
-      this._focusCleanup = null;
-    }
-  }
-
-  close({ restoreFocus = true } = {}) {
-    if (!this.overlay) return;
-
-    const previousActiveElement = this.previousActiveElement;
-    this._cancelPendingFocus();
-    this.abortTextSearch();
-    this.isOpen = false;
-    this.overlay.classList.remove('visible');
-    this.overlay.setAttribute('aria-hidden', 'true');
-    this.input?.setAttribute('aria-expanded', 'false');
-    this.input.value = '';
-    this.resultsList.innerHTML = '';
-    this.setActiveDescendant('');
-    this.previousActiveElement = null;
-
-    if (restoreFocus) {
-      previousActiveElement?.focus?.();
+  close() {
+    this.handleClose();
+    if (this.overlay?.open) {
+      this.overlay.close();
     }
   }
 
   toggle() {
-    if (this.isOpen) {
+    if (this.overlay?.open) {
       this.close();
     } else {
       this.open();
@@ -429,7 +251,7 @@ export class QuickSwitcherController {
     const allFiles = this.getFileList?.() ?? [];
     if (allFiles !== this.lastFileListRef) {
       this.lastFileListRef = allFiles;
-      this.fileCorpus = allFiles.map((filePath) => createCorpusEntry(filePath));
+      this.fileCorpus = allFiles.map((filePath) => createFileSearchEntry(filePath));
     }
 
     this.fileMatches.clear();
@@ -462,7 +284,7 @@ export class QuickSwitcherController {
       const ranked = [];
       let fileMatchCount = 0;
       this.fileCorpus.forEach((entry) => {
-        const match = findCorpusMatch(entry, query);
+        const match = findFileSearchMatch(entry, query);
         if (!match) {
           return;
         }
@@ -556,11 +378,20 @@ export class QuickSwitcherController {
       const corpusEntry = this.fileCorpus.find((entry) => entry.filePath === filePath);
       const matchIndices = corpusEntry ? splitMatchIndices(corpusEntry, match?.indices) : { dirPath: [], fileName: [] };
 
-      item.innerHTML = `
-        ${getVaultFileIconSvg(filePath, { className: 'qs-result-icon' })}
-        <span class="qs-result-name">${highlightText(fileName, matchIndices.fileName)}</span>
-        ${dirPath ? `<span class="qs-result-path" title="${escapeHtml(dirPath)}">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
-      `;
+      const svg = getVaultFileIconSvg(filePath, { className: 'qs-result-icon' });
+      item.append(document.createRange().createContextualFragment(svg));
+      const name = document.createElement('span');
+      name.className = 'qs-result-name';
+      appendHighlightedText(name, fileName, matchIndices.fileName);
+      item.append(name);
+
+      if (dirPath) {
+        const path = document.createElement('span');
+        path.className = 'qs-result-path';
+        path.title = dirPath;
+        appendHighlightedText(path, dirPath, matchIndices.dirPath);
+        item.append(path);
+      }
 
       item.addEventListener('click', () => {
         this.selectedIndex = index;
@@ -645,11 +476,16 @@ export class QuickSwitcherController {
 
       const header = document.createElement('div');
       header.className = 'qs-text-group-header';
-      header.innerHTML = `
-        <span class="qs-text-file-name">${escapeHtml(getFileName(fileGroup.file))}</span>
-        <span class="qs-text-file-meta">${escapeHtml(getDirPath(fileGroup.file))}</span>
-        <span class="qs-text-count">${escapeHtml(formatMatchCount(fileGroup.matchCount, { truncated: fileGroup.truncated }))}</span>
-      `;
+      [
+        ['qs-text-file-name', getFileName(fileGroup.file)],
+        ['qs-text-file-meta', getDirPath(fileGroup.file)],
+        ['qs-text-count', formatMatchCount(fileGroup.matchCount, { truncated: fileGroup.truncated })],
+      ].forEach(([className, text]) => {
+        const span = document.createElement('span');
+        span.className = className;
+        span.textContent = text;
+        header.append(span);
+      });
       group.appendChild(header);
 
       (fileGroup.snippets ?? []).forEach((snippet) => {
@@ -664,10 +500,13 @@ export class QuickSwitcherController {
         item.setAttribute('role', 'option');
         item.setAttribute('aria-selected', itemIndex === this.selectedTextIndex ? 'true' : 'false');
         item.dataset.textIndex = String(itemIndex);
-        item.innerHTML = `
-          <span class="qs-text-line">L${escapeHtml(String(snippet.line ?? 1))}</span>
-          <span class="qs-text-snippet">${this.highlightSnippet(snippet)}</span>
-        `;
+        const line = document.createElement('span');
+        line.className = 'qs-text-line';
+        line.textContent = `L${snippet.line ?? 1}`;
+        const snippetText = document.createElement('span');
+        snippetText.className = 'qs-text-snippet';
+        this.appendHighlightedSnippet(snippetText, snippet);
+        item.append(line, snippetText);
         item.addEventListener('click', () => {
           this.selectedTextIndex = itemIndex;
           this.confirmSelection();
@@ -687,11 +526,14 @@ export class QuickSwitcherController {
     this.updateSelection();
   }
 
-  highlightSnippet(snippet = {}) {
+  appendHighlightedSnippet(element, snippet = {}) {
     const text = String(snippet.text ?? '');
     const start = Math.min(Math.max(Number(snippet.matchStart) || 0, 0), text.length);
     const end = Math.min(Math.max(Number(snippet.matchEnd) || start, start), text.length);
-    return `${escapeHtml(text.slice(0, start))}<mark>${escapeHtml(text.slice(start, end))}</mark>${escapeHtml(text.slice(end))}`;
+    element.append(text.slice(0, start));
+    const mark = document.createElement('mark');
+    mark.textContent = text.slice(start, end);
+    element.append(mark, text.slice(end));
   }
 
   moveSelection(delta) {

package/src/client/presentation/quick-switcher-text-search.js

@@ -7,20 +7,16 @@ export function formatMatchCount(count = 0, { truncated = false } = {}) {
 }
 
 export function flattenTextResults(payload = {}) {
-  const flattened = [];
-  (payload.files ?? []).forEach((fileGroup) => {
-    (fileGroup.snippets ?? []).forEach((snippet) => {
-      flattened.push({
-        column: snippet.column,
-        file: fileGroup.file,
-        kind: fileGroup.kind,
-        line: snippet.line,
-        matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
-        snippet,
-      });
-    });
-  });
-  return flattened;
+  return (payload.files ?? []).flatMap((fileGroup) => (
+    (fileGroup.snippets ?? []).map((snippet) => ({
+      column: snippet.column,
+      file: fileGroup.file,
+      kind: fileGroup.kind,
+      line: snippet.line,
+      matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
+      snippet,
+    }))
+  ));
 }
 
 export class QuickSwitcherTextSearchRunner {

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

@@ -1,7 +1,6 @@
 /* ===== COMPONENTS / NAVIGATION ===== */
 
-.ui-button--toolbar,
-.ui-toolbar-button {
+.ui-button--toolbar {
   display: flex;
   align-items: center;
   gap: var(--space-1);

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

@@ -2,6 +2,8 @@
 
 .preview-container,
 .cm-scroller,
+.cm-tooltip-autocomplete > ul,
+.presence-panel-list,
 .file-tree,
 .git-panel,
 .diff-scroll,
@@ -25,6 +27,8 @@
 
 .preview-container::-webkit-scrollbar,
 .cm-scroller::-webkit-scrollbar,
+.cm-tooltip-autocomplete > ul::-webkit-scrollbar,
+.presence-panel-list::-webkit-scrollbar,
 .file-tree::-webkit-scrollbar,
 .git-panel::-webkit-scrollbar,
 .diff-scroll::-webkit-scrollbar,
@@ -48,6 +52,8 @@
 
 .preview-container::-webkit-scrollbar-track,
 .cm-scroller::-webkit-scrollbar-track,
+.cm-tooltip-autocomplete > ul::-webkit-scrollbar-track,
+.presence-panel-list::-webkit-scrollbar-track,
 .file-tree::-webkit-scrollbar-track,
 .git-panel::-webkit-scrollbar-track,
 .diff-scroll::-webkit-scrollbar-track,
@@ -70,6 +76,8 @@
 
 .preview-container::-webkit-scrollbar-thumb,
 .cm-scroller::-webkit-scrollbar-thumb,
+.cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb,
+.presence-panel-list::-webkit-scrollbar-thumb,
 .file-tree::-webkit-scrollbar-thumb,
 .git-panel::-webkit-scrollbar-thumb,
 .diff-scroll::-webkit-scrollbar-thumb,
@@ -93,6 +101,8 @@
 
 .preview-container::-webkit-scrollbar-thumb:hover,
 .cm-scroller::-webkit-scrollbar-thumb:hover,
+.cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb:hover,
+.presence-panel-list::-webkit-scrollbar-thumb:hover,
 .file-tree::-webkit-scrollbar-thumb:hover,
 .git-panel::-webkit-scrollbar-thumb:hover,
 .diff-scroll::-webkit-scrollbar-thumb:hover,