collabmd 0.1.47 → 0.1.48

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 {
@@ -429,7 +309,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 +342,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 +436,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 +534,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 +558,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 +584,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/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,

package/src/client/styles/export-document.css

@@ -63,42 +63,31 @@ body[data-surface='export-document']::-webkit-scrollbar {
   padding-left: 20px;
 }
 
-.export-content {
-  padding: 32px 40px;
-  border: 1px solid var(--color-divider);
-  border-radius: 20px;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-card-strong);
-}
-
-.export-content p,
-.export-content li,
-.export-content blockquote {
-  max-width: none;
-}
-
 .export-content .task-list-item input[type='checkbox'] {
   cursor: default;
 }
 
-.export-content .table-wrapper {
-  overflow: visible;
+.export-directory-toc {
+  margin-bottom: 48px;
 }
 
-.export-content .bases-table-shell,
-.export-content pre {
-  overflow: visible;
+.export-directory-toc ol {
+  columns: 2;
 }
 
-.export-content table {
-  white-space: normal;
+.export-document-section + .export-document-section {
+  margin-top: 64px;
+  padding-top: 48px;
+  border-top: 1px solid var(--color-divider);
 }
 
-.export-content pre code {
-  width: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-wrap: anywhere;
+.export-document-heading {
+  margin-bottom: 32px;
+}
+
+.export-document-heading p {
+  color: var(--color-text-muted);
+  font-size: 13px;
 }
 
 .export-diagram {
@@ -243,19 +232,45 @@ body[data-surface='export-document']::-webkit-scrollbar {
 
   .export-content {
     width: auto;
+    max-width: none;
     padding: 0;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
     overflow: visible;
   }
 
+  .export-content p,
+  .export-content li,
+  .export-content blockquote {
+    max-width: none;
+  }
+
+  .export-directory-toc {
+    break-after: page;
+  }
+
+  .export-document-section {
+    break-before: page;
+  }
+
+  .export-document-section:first-of-type {
+    break-before: auto;
+  }
+
+  .export-document-section + .export-document-section {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+
   .export-content pre,
   .export-content .table-wrapper,
   .export-content .bases-table-shell {
     overflow: visible !important;
   }
 
+  .export-content table {
+    white-space: normal;
+  }
+
   .export-content pre code {
     width: auto;
     white-space: pre-wrap;

package/src/client/styles/features/collaboration-presence.css

@@ -9,6 +9,19 @@
   align-items: center;
 }
 
+.toolbar-presence-cluster {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-shrink: 0;
+}
+
+.toolbar-presence-count {
+  background: transparent;
+  padding-inline: var(--space-1);
+  min-height: auto;
+}
+
 .toolbar-badge-button {
   cursor: pointer;
   transition: background var(--transition-interactive), box-shadow var(--transition-interactive), color var(--transition-interactive);
@@ -68,7 +81,6 @@
   padding: 0 8px 0 6px;
   gap: 4px;
   border-radius: var(--radius-full);
-  box-shadow: var(--shadow-accent-ring);
 }
 
 .user-avatar.is-local + .user-avatar {

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

@@ -1,7 +1,26 @@
 /* ===== PREVIEW / MARKDOWN ===== */
 
 .preview-content {
+  position: relative;
+  min-width: 0;
+  max-width: var(--preview-content-max-width, var(--preview-content-width));
+  margin: 0 auto;
+  overflow: visible;
+  padding: var(--space-6) var(--space-6) var(--space-12);
+  color: var(--color-text);
   font-family: var(--font-prose);
+  font-size: var(--text-sm);
+  line-height: 1.7;
+}
+
+.preview-content[data-render-phase='shell'] {
+  color: var(--color-text-muted);
+}
+
+@media (min-width: 769px) {
+  .preview-content {
+    padding-bottom: calc(var(--space-12) + 96px);
+  }
 }
 
 .preview-content h1,
@@ -52,6 +71,40 @@
   font-weight: 600;
 }
 
+.preview-content .preview-heading-fold-button {
+  margin-inline: 0 var(--space-2);
+  border: 0;
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.preview-content .preview-heading-fold-button::before {
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  content: '';
+  transform: rotate(-45deg);
+  transition: transform var(--transition-interactive);
+}
+
+.preview-content .preview-heading-fold-button[aria-expanded='true']::before {
+  transform: rotate(45deg);
+}
+
+.preview-content .preview-heading-fold-button:hover {
+  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
+}
+
+.preview-content .preview-heading-fold-button:focus-visible {
+  box-shadow: var(--shadow-focus-compact);
+  color: var(--color-primary);
+  outline: 0;
+}
+
 .preview-content .preview-heading-link-button {
   display: inline-flex;
   width: 1.18em;
@@ -231,6 +284,7 @@
 }
 
 .preview-content p:has(> .excalidraw-embed-placeholder:only-child),
+.preview-content p:has(> .drawio-embed-placeholder:only-child),
 .preview-content p:has(> .bases-embed-placeholder:only-child),
 .preview-content p:has(> .video-embed-placeholder:only-child),
 .preview-content p:has(> .plantuml-shell:only-child) {

package/src/client/styles/foundation/tokens.css

@@ -1,5 +1,13 @@
 /* ===== FOUNDATION / TOKENS ===== */
 
+@font-face {
+  font-display: swap;
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../assets/vendor/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
+}
+
 :root {
   --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
   --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);

package/src/client/styles/layout/shell.css

@@ -62,6 +62,7 @@
   align-items: baseline;
   gap: var(--space-3);
   min-width: 0;
+  overflow: hidden;
 }
 
 .pane-label {
@@ -76,6 +77,9 @@
   color: var(--color-text-muted);
   font-family: var(--font-mono);
   font-size: var(--text-meta);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .resizer {
@@ -171,29 +175,6 @@
   overscroll-behavior: contain;
 }
 
-.preview-content {
-  position: relative;
-  min-width: 0;
-  max-width: var(--preview-content-max-width);
-  margin: 0 auto;
-  overflow: visible;
-  padding: var(--space-6) var(--space-6) var(--space-12);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: var(--text-sm);
-  line-height: 1.7;
-}
-
-.preview-content[data-render-phase='shell'] {
-  color: var(--color-text-muted);
-}
-
-@media (min-width: 769px) {
-  .preview-content {
-    padding-bottom: calc(var(--space-12) + 96px);
-  }
-}
-
 .preview-content.is-excalidraw-file-preview {
   position: relative;
   display: flex;
@@ -217,7 +198,8 @@
   padding: var(--space-4);
 }
 
-.preview-content.is-pdf-file-preview {
+.preview-content.is-pdf-file-preview,
+.preview-content.is-html-file-preview {
   position: relative;
   display: flex;
   box-sizing: border-box;
@@ -277,6 +259,7 @@
 .preview-content.is-excalidraw-file-preview [data-preview-render-host='true'],
 .preview-content.is-image-file-preview [data-preview-render-host='true'],
 .preview-content.is-pdf-file-preview [data-preview-render-host='true'],
+.preview-content.is-html-file-preview [data-preview-render-host='true'],
 .preview-content.is-base-file-preview [data-preview-render-host='true'] {
   display: flex;
   flex: 1;
@@ -290,6 +273,75 @@
   flex-direction: column;
 }
 
+.preview-content.is-html-file-preview [data-preview-render-host='true'] {
+  height: 100%;
+  min-height: 0;
+}
+
+.html-file-preview-shell {
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+}
+
+.html-file-preview-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-3);
+  z-index: 172;
+  width: auto;
+  height: auto;
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  background: var(--color-bg);
+  box-shadow: var(--shadow-lg);
+}
+
+body.html-preview-maximized-open {
+  overflow: hidden;
+}
+
+body.html-preview-maximized-open #htmlPreviewMaximize {
+  position: fixed;
+  top: var(--space-5);
+  right: var(--space-5);
+  z-index: 174;
+  background: var(--color-surface-raised);
+  box-shadow: var(--shadow-md);
+}
+
+.html-file-preview-script-gate {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+  padding: var(--space-2);
+  border: 1px solid var(--border-warning-toast);
+  border-radius: var(--radius-md);
+  background: var(--surface-warning-soft);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+}
+
+.html-file-preview-frame {
+  display: block;
+  flex: 1;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: white;
+}
+
 .image-file-preview-shell {
   display: flex;
   align-items: center;